/* ── ML OmniBot Chat Widget ── */
#omnibot-widget-root * { box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

/* ── FLOATING BUTTON ─────────────────────────── */
#omnibot-btn {
    position: fixed;
    bottom: 24px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 4px 20px rgba(0,0,0,.25);
    z-index: 99998;
    transition: transform .2s, box-shadow .2s;
    background: var(--ob-color, #F5C518);
}
#omnibot-btn:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(0,0,0,.30); }
#omnibot-btn.ob-left  { left: 24px; }
#omnibot-btn.ob-right { right: 24px; }
#omnibot-btn-dot {
    position: absolute; top: 4px; right: 4px;
    width: 12px; height: 12px;
    background: #e74c3c; border-radius: 50%; border: 2px solid #fff; display: none;
}
#omnibot-btn-dot.visible { display: block; }

/* ── PANEL ───────────────────────────────────── */
#omnibot-panel {
    position: fixed;
    bottom: 96px;
    width: 370px;
    height: 560px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0,0,0,.18);
    display: flex;
    flex-direction: column;
    z-index: 99999;
    overflow: hidden;
    transition: opacity .2s, transform .2s;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
}
#omnibot-panel.ob-left  { left: 24px; }
#omnibot-panel.ob-right { right: 24px; }
#omnibot-panel.ob-open  { opacity: 1; pointer-events: all; transform: translateY(0); }

/* ── HEADER ──────────────────────────────────── */
#omnibot-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--ob-color, #F5C518);
    color: #000;
    flex-shrink: 0;
}
#omnibot-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(0,0,0,.1);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0; overflow: hidden;
}
#omnibot-header-info { flex: 1; min-width: 0; }
#omnibot-header-name { font-weight: 700; font-size: 15px; line-height: 1.2; }
#omnibot-header-status { font-size: 11px; opacity: .7; display: flex; align-items: center; gap: 4px; }
#omnibot-header-status::before { content:''; display:block; width:6px; height:6px; border-radius:50%; background:#27ae60; }
#omnibot-header-status.handoff::before { background:#e74c3c; }
#omnibot-close-btn, #omnibot-wa-btn {
    background: none; border: none; font-size: 20px;
    cursor: pointer; padding: 4px 6px; border-radius: 4px;
    opacity: .7; color: #000; line-height: 1;
}
#omnibot-close-btn:hover, #omnibot-wa-btn:hover { opacity: 1; background: rgba(0,0,0,.1); }

/* ── FORMULARIO DE REGISTRO ──────────────────── */
#omnibot-reg-form {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: #fafafa;
    flex-direction: column;
}
#omnibot-reg-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#omnibot-reg-icon { font-size: 40px; text-align: center; margin-bottom: 4px; }
#omnibot-reg-title {
    margin: 0; text-align: center;
    font-size: 17px; font-weight: 700; color: #1a1a2e;
}
#omnibot-reg-subtitle {
    margin: 0 0 4px; text-align: center;
    font-size: 13px; color: #888; line-height: 1.4;
}
#omnibot-reg-name, #omnibot-reg-phone {
    width: 100%; padding: 11px 14px;
    border: 1.5px solid #e0e0e0; border-radius: 10px;
    font-size: 14px; outline: none;
    transition: border-color .15s;
    background: #fff;
}
#omnibot-reg-name:focus, #omnibot-reg-phone:focus {
    border-color: var(--ob-color, #F5C518);
}
#omnibot-reg-error {
    display: none; color: #e74c3c;
    font-size: 12px; text-align: center;
    background: #fdecea; border-radius: 6px;
    padding: 6px 10px;
}
#omnibot-reg-submit {
    width: 100%; padding: 12px;
    background: var(--ob-color, #F5C518);
    color: #000; font-weight: 700; font-size: 15px;
    border: none; border-radius: 10px; cursor: pointer;
    transition: opacity .15s, transform .1s;
    margin-top: 4px;
}
#omnibot-reg-submit:hover { opacity: .88; transform: translateY(-1px); }
#omnibot-reg-form { transition: opacity .25s; }

/* ── MESSAGES ────────────────────────────────── */
#omnibot-messages {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #f7f7f7;
    scroll-behavior: smooth;
}
.ob-msg { display: flex; flex-direction: column; max-width: 84%; animation: ob-in .18s ease; }
@keyframes ob-in { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
.ob-msg-bot  { align-self: flex-start; align-items: flex-start; }
.ob-msg-user { align-self: flex-end;   align-items: flex-end; }
.ob-bubble {
    padding: 9px 13px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.55;
    word-break: break-word;
}
.ob-msg-bot  .ob-bubble { background:#fff; color:#222; border-bottom-left-radius:4px; box-shadow: 0 1px 3px rgba(0,0,0,.07); }
.ob-msg-user .ob-bubble { background:var(--ob-color,#F5C518); color:#000; border-bottom-right-radius:4px; }
.ob-msg-time { font-size: 10px; color:#bbb; margin-top:3px; padding:0 4px; }

/* Links en mensajes del bot */
.ob-bubble .ob-link {
    color: #1877F2;
    text-decoration: underline;
    word-break: break-all;
}
.ob-bubble .ob-link:hover { color: #0d5bbf; }

/* ── TYPING ──────────────────────────────────── */
.ob-typing { display:flex; gap:4px; padding:10px 14px; }
.ob-typing span { width:7px; height:7px; border-radius:50%; background:#ccc; animation: ob-bounce 1.2s infinite; }
.ob-typing span:nth-child(2) { animation-delay:.2s; }
.ob-typing span:nth-child(3) { animation-delay:.4s; }
@keyframes ob-bounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-7px)} }

/* ── WHATSAPP CARD ───────────────────────────── */
.ob-wa-card {
    display: flex; align-items: center; gap: 10px;
    background: #e7f9ef; border: 1.5px solid #25D366;
    border-radius: 12px; padding: 10px 14px;
    text-decoration: none; color: inherit;
    transition: background .15s; cursor: pointer;
    max-width: 260px;
}
.ob-wa-card:hover { background: #d4f5e2; }
.ob-wa-icon { font-size: 26px; }
.ob-wa-title { font-weight: 700; font-size: 13px; color: #1a1a1a; }
.ob-wa-sub   { font-size: 11px; color: #666; margin-top: 1px; }
.ob-wa-arrow { font-size: 18px; color: #25D366; margin-left: auto; }

/* ── INPUT ───────────────────────────────────── */
#omnibot-input-area {
    display: flex; align-items: flex-end; gap: 8px;
    padding: 10px 12px; border-top: 1px solid #efefef;
    background: #fff; flex-shrink: 0;
}
#omnibot-input {
    flex: 1; border: 1.5px solid #e0e0e0; border-radius: 20px;
    padding: 8px 14px; font-size: 14px; resize: none;
    max-height: 90px; overflow-y: auto; outline: none;
    line-height: 1.4; transition: border .15s; font-family: inherit;
}
#omnibot-input:focus { border-color: var(--ob-color, #F5C518); }
#omnibot-send {
    width: 38px; height: 38px; border-radius: 50%; border: none;
    background: var(--ob-color, #F5C518); color: #000;
    font-size: 16px; cursor: pointer; display: flex;
    align-items: center; justify-content: center;
    flex-shrink: 0; transition: transform .15s;
}
#omnibot-send:hover { transform: scale(1.08); }
#omnibot-send:disabled { opacity: .45; cursor: default; transform: none; }

/* ── FOOTER ──────────────────────────────────── */
#omnibot-footer {
    text-align: center; padding: 5px 12px 8px;
    font-size: 11px; color: #bbb; flex-shrink: 0;
    background: #fff; display: flex;
    align-items: center; justify-content: center; gap: 8px;
}
#omnibot-wa-footer {
    color: #25D366; font-weight: 600; text-decoration: none;
    font-size: 12px; white-space: nowrap;
}
#omnibot-wa-footer:hover { text-decoration: underline; }

/* ── RESPONSIVE ──────────────────────────────── */
@media (max-width: 420px) {
    #omnibot-panel { width: calc(100vw - 20px); right: 10px !important; left: 10px !important; height: 72vh; }
    #omnibot-btn   { bottom: 16px; right: 16px !important; left: auto !important; }
}

/* ── SHAKE ANIMATION ─────────────────────────── */
@keyframes ob-shake {
    0%,100% { transform: scale(1.08) rotate(0deg); }
    20%      { transform: scale(1.08) rotate(-10deg); }
    40%      { transform: scale(1.08) rotate(10deg); }
    60%      { transform: scale(1.08) rotate(-6deg); }
    80%      { transform: scale(1.08) rotate(6deg); }
}
#omnibot-btn.ob-shake { animation: ob-shake .6s ease; }