/* ═══════════════════════════════════════════════════════════════════════════
 *  BINGO LYSTO — Widget de Soporte Flotante (login / registro)
 *  Reemplaza la integración de czm-chat-support por una solución conectada
 *  al backend del módulo de Soporte (plantillas + bot dinámicos).
 * ═══════════════════════════════════════════════════════════════════════════ */
:root {
    /* ─── BINGO LYSTO Design System v3.1 (alineado con Users/Transactions) ─── */
    --lys-sup-primary: #6366f1;        /* indigo-500 (Users/Transactions) */
    --lys-sup-primary-2: #8b5cf6;      /* violet-500 (gradiente accent) */
    --lys-sup-primary-dark: #4f46e5;
    --lys-sup-wa: #25d366;
    --lys-sup-wa-dark: #128c7e;
    --lys-sup-bg: #ffffff;
    --lys-sup-bubble-bot: #f1f5f9;     /* slate-100 */
    --lys-sup-bubble-user: linear-gradient(135deg, #6366f1, #8b5cf6);
    --lys-sup-text: #0f172a;           /* slate-900 */
    --lys-sup-muted: #64748b;          /* slate-500 */
    --lys-sup-border: #e2e8f0;         /* slate-200 */
    --lys-sup-radius: 16px;
    --lys-sup-shadow: 0 18px 50px rgba(15, 23, 42, .25);
    --lys-sup-shadow-sm: 0 1px 3px rgba(15, 23, 42, .08);
    --lys-sup-success: #10b981;
    --lys-sup-warning: #f59e0b;
    --lys-sup-danger: #ef4444;
    --lys-sup-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --lys-sup-input-bg: #ffffff;
    --lys-sup-input-text: #0f172a;
    --lys-sup-input-border: #e2e8f0;
    --lys-sup-input-placeholder: #64748b;

    /* ─── Superficies / componentes (light por defecto) ─── */
    --lys-sup-body-bg: #f8fafc;            /* fondo del scroll de mensajes */
    --lys-sup-scrollbar: #cbd5e1;          /* slate-300 */
    --lys-sup-surface: #ffffff;            /* tarjetas, chips, ticket code */
    --lys-sup-chip-bg: #ffffff;
    --lys-sup-chip-hover-bg: #eef2ff;      /* indigo-50 */
    --lys-sup-footer-bg: #f8fafc;
    --lys-sup-text-on-primary: #ffffff;    /* texto sobre fondos de color */
    /* Banner / panel de handoff (verde) */
    --lys-sup-handoff-bg: linear-gradient(135deg, #ecfdf5, #d1fae5);
    --lys-sup-handoff-border: #34d399;
    --lys-sup-handoff-icon: #059669;
    --lys-sup-handoff-title: #064e3b;
    --lys-sup-handoff-text: #047857;
    --lys-sup-handoff-dot: #10b981;
    --lys-sup-ticket-bg: #ffffff;
    --lys-sup-ticket-text: #047857;
    --lys-sup-ticket-border: rgba(16,185,129,.15);
    /* Pill de agente (violeta) */
    --lys-sup-agentpill-bg: #ede9fe;
    --lys-sup-agentpill-text: #5b21b6;
    /* Feedback up/down */
    --lys-sup-fb-up-bg: #dcfce7;
    --lys-sup-fb-up-text: #14532d;
    --lys-sup-fb-dn-bg: #fee2e2;
    --lys-sup-fb-dn-text: #b91c1c;
    /* Header status dot */
    --lys-sup-status-online: #4ade80;
}

/* ═══════════════════════════════════════════════════════════════════════
   MODO OSCURO — se activa con html[data-theme="dark"] (control manual de la
   app) y también automáticamente con la preferencia del sistema si la app
   no fija un tema explícito.
   ═══════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] {
    --lys-sup-bg: #0f172a;                 /* slate-900 — ventana del chat */
    --lys-sup-bubble-bot: #1e293b;         /* slate-800 — burbuja del bot */
    --lys-sup-bubble-user: linear-gradient(135deg, #6366f1, #8b5cf6);
    --lys-sup-text: #e2e8f0;               /* slate-200 — texto principal */
    --lys-sup-muted: #94a3b8;              /* slate-400 */
    --lys-sup-border: #334155;             /* slate-700 */
    --lys-sup-shadow: 0 18px 50px rgba(0, 0, 0, .55);
    --lys-sup-shadow-sm: 0 1px 3px rgba(0, 0, 0, .35);

    --lys-sup-input-bg: #1e293b;
    --lys-sup-input-text: #f8fafc;
    --lys-sup-input-border: #334155;
    --lys-sup-input-placeholder: #94a3b8;

    --lys-sup-body-bg: #0b1220;            /* un poco más oscuro que la ventana */
    --lys-sup-scrollbar: #475569;          /* slate-600 */
    --lys-sup-surface: #1e293b;
    --lys-sup-chip-bg: #1e293b;
    --lys-sup-chip-hover-bg: #312e81;      /* indigo-900 */
    --lys-sup-footer-bg: #0b1220;
    --lys-sup-text-on-primary: #ffffff;
    /* Handoff (verde) adaptado a oscuro */
    --lys-sup-handoff-bg: linear-gradient(135deg, #053527, #064e3b);
    --lys-sup-handoff-border: #059669;
    --lys-sup-handoff-icon: #34d399;
    --lys-sup-handoff-title: #a7f3d0;
    --lys-sup-handoff-text: #6ee7b7;
    --lys-sup-handoff-dot: #34d399;
    --lys-sup-ticket-bg: #0b1f17;
    --lys-sup-ticket-text: #6ee7b7;
    --lys-sup-ticket-border: rgba(16,185,129,.35);
    /* Pill de agente */
    --lys-sup-agentpill-bg: #312e81;
    --lys-sup-agentpill-text: #c4b5fd;
    /* Feedback */
    --lys-sup-fb-up-bg: #064e3b;
    --lys-sup-fb-up-text: #bbf7d0;
    --lys-sup-fb-dn-bg: #7f1d1d;
    --lys-sup-fb-dn-text: #fecaca;
    --lys-sup-status-online: #4ade80;
}

/* Fallback automático: si la app NO fija data-theme pero el SO está en oscuro */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]):not([data-theme="dark"]) {
        --lys-sup-bg: #0f172a;
        --lys-sup-bubble-bot: #1e293b;
        --lys-sup-text: #e2e8f0;
        --lys-sup-muted: #94a3b8;
        --lys-sup-border: #334155;
        --lys-sup-shadow: 0 18px 50px rgba(0, 0, 0, .55);
        --lys-sup-shadow-sm: 0 1px 3px rgba(0, 0, 0, .35);
        --lys-sup-input-bg: #1e293b;
        --lys-sup-input-text: #f8fafc;
        --lys-sup-input-border: #334155;
        --lys-sup-input-placeholder: #94a3b8;
        --lys-sup-body-bg: #0b1220;
        --lys-sup-scrollbar: #475569;
        --lys-sup-surface: #1e293b;
        --lys-sup-chip-bg: #1e293b;
        --lys-sup-chip-hover-bg: #312e81;
        --lys-sup-footer-bg: #0b1220;
        --lys-sup-handoff-bg: linear-gradient(135deg, #053527, #064e3b);
        --lys-sup-handoff-border: #059669;
        --lys-sup-handoff-icon: #34d399;
        --lys-sup-handoff-title: #a7f3d0;
        --lys-sup-handoff-text: #6ee7b7;
        --lys-sup-handoff-dot: #34d399;
        --lys-sup-ticket-bg: #0b1f17;
        --lys-sup-ticket-text: #6ee7b7;
        --lys-sup-ticket-border: rgba(16,185,129,.35);
        --lys-sup-agentpill-bg: #312e81;
        --lys-sup-agentpill-text: #c4b5fd;
        --lys-sup-fb-up-bg: #064e3b;
        --lys-sup-fb-up-text: #bbf7d0;
        --lys-sup-fb-dn-bg: #7f1d1d;
        --lys-sup-fb-dn-text: #fecaca;
    }
}

/* ─── Botón flotante (FAB) ─── */
.lys-sup-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--lys-sup-wa), var(--lys-sup-wa-dark));
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(37, 211, 102, .45);
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    transition: transform .25s ease, box-shadow .25s ease;
}
.lys-sup-fab:hover { transform: scale(1.06); box-shadow: 0 14px 36px rgba(37, 211, 102, .55); }
.lys-sup-fab.is-open { transform: rotate(180deg); background: linear-gradient(135deg, #ef4444, #dc2626); }

.lys-sup-fab-pulse {
    position: absolute; inset: 0;
    border-radius: 50%;
    background: rgba(37, 211, 102, .35);
    animation: lys-sup-pulse 2s ease-out infinite;
    pointer-events: none;
}
@keyframes lys-sup-pulse {
    0%   { transform: scale(1);   opacity: .7; }
    100% { transform: scale(1.7); opacity: 0;  }
}

/* ─── Panel principal ─── */
.lys-sup-panel {
    position: fixed;
    bottom: 100px;
    right: 24px;
    width: 380px;
    max-width: calc(100vw - 32px);
    height: 560px;
    max-height: calc(100vh - 130px);
    background: var(--lys-sup-bg);
    border-radius: var(--lys-sup-radius);
    box-shadow: var(--lys-sup-shadow);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 9999;
    animation: lys-sup-slide-up .28s ease-out;
}
.lys-sup-panel.is-open { display: flex; }
@keyframes lys-sup-slide-up {
    from { opacity: 0; transform: translateY(20px) scale(.96); }
    to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

/* ─── Header ─── */
.lys-sup-header {
    background: linear-gradient(135deg, var(--lys-sup-primary), var(--lys-sup-primary-2));
    color: #fff;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.lys-sup-avatar {
    width: 44px; height: 44px;
    background: rgba(255,255,255,.2);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    border: 2px solid rgba(255,255,255,.3);
}
.lys-sup-header-info { flex: 1; min-width: 0; }
.lys-sup-title { font-weight: 700; font-size: 1rem; line-height: 1.2; }
.lys-sup-status {
    font-size: .7rem;
    opacity: .9;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
}
.lys-sup-status::before {
    content: '';
    width: 8px; height: 8px;
    background: var(--lys-sup-status-online);
    border-radius: 50%;
    box-shadow: 0 0 8px #4ade80;
    animation: lys-sup-blink 1.6s ease infinite;
}
@keyframes lys-sup-blink { 50% { opacity: .4; } }
.lys-sup-close {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.18);
    color: #fff;
    cursor: pointer;
    font-size: 1rem;
    transition: background .15s ease;
}
.lys-sup-close:hover { background: rgba(255,255,255,.32); }

/* ─── Cuerpo (mensajes) ─── */
.lys-sup-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 14px 14px;
    background: var(--lys-sup-body-bg);
    display: flex;
    flex-direction: column;
    gap: 10px;
    scroll-padding-bottom: 16px;
}
.lys-sup-body::-webkit-scrollbar { width: 5px; }
.lys-sup-body::-webkit-scrollbar-thumb { background: var(--lys-sup-scrollbar); border-radius: 3px; }
.lys-sup-body > :last-child { margin-bottom: 6px; }

.lys-sup-msg {
    display: flex;
    flex-direction: column;
    max-width: 84%;
    animation: lys-sup-fade .25s ease;
}
@keyframes lys-sup-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.lys-sup-msg.bot  { align-self: flex-start; }
.lys-sup-msg.user { align-self: flex-end; }

.lys-sup-bubble {
    padding: 10px 13px;
    border-radius: 14px;
    font-size: .76rem;
    line-height: 1.45;
    color: var(--lys-sup-text);
    background: var(--lys-sup-bubble-bot);
    white-space: pre-wrap;
    word-break: break-word;
}
.lys-sup-msg.user .lys-sup-bubble {
    background: var(--lys-sup-bubble-user);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.lys-sup-msg.bot .lys-sup-bubble { border-bottom-left-radius: 4px; }
.lys-sup-time {
    font-size: .68rem;
    color: var(--lys-sup-muted);
    margin-top: 3px;
    padding: 0 6px;
}
.lys-sup-msg.user .lys-sup-time { text-align: right; }

/* ─── Acciones rápidas (chips) ─── */
.lys-sup-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 0 8px;
}
.lys-sup-quick-chip {
    background: var(--lys-sup-surface);
    border: 1px solid var(--lys-sup-border);
    color: var(--lys-sup-primary);
    padding: 7px 11px;
    border-radius: 20px;
    font-size: .78rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all .15s ease;
    white-space: nowrap;
    text-decoration: none;
}
.lys-sup-quick-chip:hover {
    background: var(--lys-sup-primary);
    color: #fff;
    border-color: var(--lys-sup-primary);
    transform: translateY(-1px);
}
.lys-sup-quick-chip i { font-size: .72rem; }

/* ─── Botones de acción dentro del mensaje (copy / wa) ─── */
.lys-sup-msg-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.lys-sup-msg-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 20px;
    font-size: .74rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all .15s ease;
    text-decoration: none;
}
.lys-sup-msg-btn.copy   { background: rgba(103, 44, 167, .12); color: var(--lys-sup-primary); }
.lys-sup-msg-btn.copy:hover { background: var(--lys-sup-primary); color: #fff; }
.lys-sup-msg-btn.wa     { background: var(--lys-sup-wa); color: #fff; }
.lys-sup-msg-btn.wa:hover { background: var(--lys-sup-wa-dark); }

/* ─── Indicador "escribiendo…" ─── */
.lys-sup-typing {
    align-self: flex-start;
    background: var(--lys-sup-bubble-bot);
    padding: 10px 14px;
    border-radius: 14px;
    display: inline-flex;
    gap: 4px;
    margin-bottom: 10px;
}
.lys-sup-typing span {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--lys-sup-muted);
    animation: lys-sup-bounce 1.2s ease infinite;
}
.lys-sup-typing span:nth-child(2) { animation-delay: .15s; }
.lys-sup-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes lys-sup-bounce {
    0%,80%,100% { opacity: .35; transform: translateY(0); }
    40%         { opacity: 1;   transform: translateY(-4px); }
}

/* ─── Input ─── */
.lys-sup-input-wrap {
    border-top: 1px solid var(--lys-sup-border);
    padding: 10px 12px;
    background: var(--lys-sup-input-bg);
    display: flex;
    gap: 8px;
    align-items: flex-end;
}
.lys-sup-input {
    flex: 1;
    border: 1px solid var(--lys-sup-input-border);
    border-radius: 22px;
    padding: 8.4px 14px;
    font-size: .8rem;
    resize: none;
    max-height: 90px;
    line-height: 1.4;
    outline: none;
    transition: border-color .15s ease;
    font-family: inherit;

    background-color: var(--lys-sup-input-bg);
    color: var(--lys-sup-input-text);
}
.lys-sup-input::placeholder {
    color: var(--lys-sup-input-placeholder);
    opacity: 1;
}
.lys-sup-input:focus { border-color: var(--lys-sup-primary); }
.lys-sup-send {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--lys-sup-primary), var(--lys-sup-primary-2));
    color: #fff;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s ease, opacity .15s ease;
    flex-shrink: 0;
}
.lys-sup-send:hover { transform: scale(1.08); }
.lys-sup-send:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* ─── Footer ─── */
.lys-sup-footer {
    text-align: center;
    font-size: .68rem;
    color: var(--lys-sup-muted);
    padding: 6px;
    background: var(--lys-sup-footer-bg);
    border-top: 1px solid var(--lys-sup-border);
}
.lys-sup-footer strong { color: var(--lys-sup-primary); }

/* ─── Responsive ─── */
@media (max-width: 480px) {
    .lys-sup-panel {
        bottom: 0;
        right: 0;
        left: 0;
        top: 0;
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }
    .lys-sup-fab { bottom: 100px; right: 16px; width: 48px; height: 48px; }
}

/* ════════════════════════════════════════════════════════════════════
   v3.1 — Refinamientos para integración con backend (handoff, KB, etc.)
   ════════════════════════════════════════════════════════════════════ */

/* Banner de handoff — aparece cuando el bot escala a humano */
.lys-sup-handoff-banner{
    background:var(--lys-sup-handoff-bg);
    border:1px solid var(--lys-sup-handoff-border);
    border-radius:10px;
    padding:.75rem .85rem;
    margin:.5rem 0;
    display:flex;
    gap:.65rem;
    align-items:flex-start;
    animation:lysFadeIn .3s ease;
}

.lys-sup-handoff-banner .lys-icon{
    color:var(--lys-sup-handoff-icon);
    font-size:1.1rem;
    flex-shrink:0;
    margin-top:2px;
}

.lys-sup-handoff-banner .lys-handoff-text{
    flex:1;
    min-width:0;
}

.lys-sup-handoff-banner .lys-handoff-text strong{
    display:block;
    margin-bottom:.35rem;
    color:var(--lys-sup-handoff-title);
    font-size:.85rem;
}

.lys-sup-agent-pill{
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    font-size:.75rem;
    margin-bottom:.5rem;
    color:var(--lys-sup-handoff-text);
}

.lys-sup-agent-pill i{
    font-size:.45rem;
    color:var(--lys-sup-handoff-dot);
}

.lys-sup-handoff-banner .lys-handoff-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.75rem;
    width:100%;
}

.lys-sup-handoff-banner .lys-ticket-code{
    display:inline-flex;
    align-items:center;
    white-space:nowrap;
    background:var(--lys-sup-ticket-bg);
    color:var(--lys-sup-ticket-text);
    border:1px solid var(--lys-sup-ticket-border);
    border-radius:6px;
    padding:4px 10px;
    font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
    font-size:.72rem;
    font-weight:700;
}

.lys-sup-handoff-banner .lys-handoff-btn{
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    margin-left:auto;
    background:var(--lys-sup-wa,#25D366);
    color:#fff;
    padding:.42rem .85rem;
    border-radius:999px;
    font-size:.72rem;
    font-weight:600;
    text-decoration:none;
    transition:all .15s ease;
    white-space:nowrap;
}

.lys-sup-handoff-banner .lys-handoff-btn:hover{
    transform:translateY(-1px);
}

@media (max-width:480px){

    .lys-sup-handoff-banner .lys-handoff-actions{
        flex-wrap:wrap;
    }

    .lys-sup-handoff-banner .lys-ticket-code{
        width:100%;
    }

    .lys-sup-handoff-banner .lys-handoff-btn{
        width:100%;
        justify-content:center;
        margin-left:0;
    }
}

/* Pill del agente asignado */
.lys-sup-agent-pill {
    display: inline-flex; align-items: center; gap: .25rem;
    background: var(--lys-sup-agentpill-bg); color: var(--lys-sup-agentpill-text);
    padding: .15rem .55rem; border-radius: 999px;
    font-size: .7rem; font-weight: 600;
    margin-top: .25rem;
}
.lys-sup-agent-pill i { font-size: .65rem; }

/* Botones de feedback en cada respuesta del bot (KB) */
.lys-sup-feedback {
    display: flex; gap: .35rem; margin-top: .35rem; opacity: .55;
    transition: opacity .15s ease;
}
.lys-sup-bubble-bot:hover .lys-sup-feedback { opacity: 1; }
.lys-sup-fb-btn {
    background: var(--lys-sup-surface); border: 1px solid var(--lys-sup-border);
    border-radius: 999px;
    padding: .15rem .45rem; cursor: pointer;
    font-size: .7rem; color: var(--lys-sup-muted);
    transition: all .15s ease;
}
.lys-sup-fb-btn:hover { border-color: var(--lys-sup-primary); color: var(--lys-sup-primary); }
.lys-sup-fb-btn.is-active.fb-up { background: var(--lys-sup-fb-up-bg); border-color: var(--lys-sup-success); color: var(--lys-sup-fb-up-text); }
.lys-sup-fb-btn.is-active.fb-dn { background: var(--lys-sup-fb-dn-bg); border-color: var(--lys-sup-danger); color: var(--lys-sup-fb-dn-text); }

/* Quick-action chips refinados (matching design system) */
.lys-sup-chips, .lys-sup-quick-chips {
    display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem;
}
.lys-sup-chip {
    background: var(--lys-sup-chip-bg);
    border: 1px solid var(--lys-sup-border);
    color: var(--lys-sup-text);
    padding: .35rem .75rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s ease;
    font-family: var(--lys-sup-font);
}
.lys-sup-chip:hover {
    border-color: var(--lys-sup-primary);
    color: var(--lys-sup-primary);
    background: var(--lys-sup-chip-hover-bg);
    transform: translateY(-1px);
}

/* Indicador "está escribiendo" más refinado */
.lys-sup-typing {
    display: inline-flex;
    gap: 3px;
    padding: 8px 14px;
    background: var(--lys-sup-bubble-bot);
    border-radius: 16px;
    align-items: center;
    align-self: flex-start;
    margin-bottom: 10px;
}
.lys-sup-typing span {
    width: 6px; height: 6px;
    background: var(--lys-sup-muted);
    border-radius: 50%;
    animation: lysTypingDot 1.4s ease-in-out infinite;
}
.lys-sup-typing span:nth-child(2) { animation-delay: .2s; }
.lys-sup-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes lysTypingDot {
    0%, 60%, 100% { opacity: .3; transform: translateY(0); }
    30%           { opacity: 1;  transform: translateY(-3px); }
}

@keyframes lysFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}