/* NYXIVO — Diseño Moderno · Chat widget overrides
 * Reemplaza la paleta violeta/índigo del chat-widget.css por el lenguaje
 * dark-glass + brand-500 blue + brand-glow del moderno.
 *
 * Solo se carga desde index-moderno.php — el legacy mantiene sus colores.
 */

/* ============================================================
 * BUBBLE flotante — gradient brand + glow + ring sutil
 * ============================================================ */
#nyx-chat-bubble {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, #1d4ed8 100%) !important;
    color: #fff !important;
    width: 64px !important;
    height: 64px !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow:
        0 10px 40px -10px rgb(var(--brand-glow, 96 165 250) / 0.65),
        inset 0 1px 0 rgba(255, 255, 255, 0.30),
        inset 0 -2px 4px rgba(30, 58, 138, 0.40) !important;
    transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow .35s ease,
                opacity .25s ease !important;
    position: fixed;
    bottom: 24px;
    right: 24px;
}
#nyx-chat-bubble:hover {
    transform: translateY(-3px) scale(1.06) !important;
    box-shadow:
        0 18px 60px -10px rgb(var(--brand-glow, 96 165 250) / 0.85),
        inset 0 1px 0 rgba(255, 255, 255, 0.40),
        inset 0 -2px 4px rgba(30, 58, 138, 0.45) !important;
}
#nyx-chat-bubble.active {
    transform: scale(0.94) !important;
    opacity: 1 !important;
    box-shadow:
        0 6px 24px -8px rgb(var(--brand-glow, 96 165 250) / 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}

/* Halo orbital sutil al hover (anillo difuso continuo) */
#nyx-chat-bubble::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(var(--brand-glow, 96 165 250) / 0.25) 0%, transparent 65%);
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
    z-index: -1;
}
#nyx-chat-bubble:hover::before { opacity: 1; }

/* ============================================================
 * BADGE de notificaciones — mismo brand pero con borde dark
 * ============================================================ */
.nyx-chat-badge {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
    color: #fff !important;
    border: 2px solid #080d1a !important;
    box-shadow: 0 0 14px rgb(var(--brand-glow, 96 165 250) / 0.6) !important;
    width: 22px !important;
    height: 22px !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
}

/* ============================================================
 * VENTANA del chat — frosted glass con borde brand
 * ============================================================ */
#nyx-chat-window {
    background: rgba(8, 13, 26, 0.92) !important;
    -webkit-backdrop-filter: blur(24px) saturate(140%);
            backdrop-filter: blur(24px) saturate(140%);
    border: 1px solid rgba(59, 130, 246, 0.22) !important;
    border-radius: 20px !important;
    box-shadow:
        0 30px 80px -20px rgba(0, 0, 0, 0.85),
        0 0 40px -8px rgb(var(--brand-glow, 96 165 250) / 0.35) !important;
    width: 384px !important;
    height: 540px !important;
}

/* Header con gradient ink + borde brand inferior */
.nyx-chat-header {
    background: linear-gradient(180deg,
        rgba(15, 23, 42, 0.85) 0%,
        rgba(8, 13, 26, 0.95) 100%) !important;
    border-bottom: 1px solid rgba(59, 130, 246, 0.18) !important;
}
.nyx-chat-header__name {
    color: #f8fafc !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
}
.nyx-chat-header__status {
    color: #93c5fd !important;
    font-size: 0.68rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    font-weight: 700 !important;
}

/* Avatar — gradient brand igual que el bubble */
.nyx-chat-avatar {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, #1d4ed8 100%) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow:
        0 4px 14px -4px rgb(var(--brand-glow, 96 165 250) / 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

/* Dot online → cambia verde por brand-blue para coherencia, mantiene pulse */
.nyx-chat-dot--online {
    background: #60a5fa !important;
    box-shadow: 0 0 6px rgba(96, 165, 250, 0.8) !important;
}
.nyx-chat-dot--typing {
    background: #fbbf24 !important;
}
.nyx-chat-dot--thinking {
    background: #93c5fd !important;
    box-shadow: 0 0 6px rgba(147, 197, 253, 0.6) !important;
}

/* Botones del header (whatsapp, report, new, end) — mantiene sus colores
 * pero suaviza opacidad y añade hover glass */
.nyx-chat-header__btn {
    color: #94a3b8 !important;
    transition: background-color .25s ease, color .25s ease !important;
}
.nyx-chat-header__btn:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #fff !important;
}

/* Body de mensajes — fondo del chat, slightly diferente del header */
.nyx-chat-messages {
    background: rgba(5, 8, 17, 0.6) !important;
}

/* Mensajes del asistente — burbuja dark glass con borde sutil
 * (el legacy usa #1e293b plano; aquí hacemos un dark más profundo
 * con borde apenas perceptible para que respire dentro de la ventana). */
.nyx-chat-msg--asistente .nyx-chat-msg__content {
    background: rgba(15, 23, 42, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #e2e8f0 !important;
    border-bottom-left-radius: 4px !important;
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.4) !important;
}

/* Mensajes del usuario — gradient brand-blue sólido (reemplaza el violeta
 * por el lenguaje cromático del moderno). Glow azul en lugar de morado. */
.nyx-chat-msg--usuario .nyx-chat-msg__content {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, #1d4ed8 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-bottom-right-radius: 4px !important;
    box-shadow:
        0 6px 20px -6px rgb(var(--brand-glow, 96 165 250) / 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
    font-weight: 500 !important;
}

/* Timestamps de mensajes — más sobrios, brand-tint */
.nyx-chat-msg__time { color: #64748b !important; }
.nyx-chat-msg--usuario .nyx-chat-msg__checks { color: #93c5fd !important; }

/* Avatar mini en cada mensaje — borde brand sutil para coherencia visual */
.nyx-chat-msg__avatar {
    border: 1.5px solid rgba(59, 130, 246, 0.30) !important;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.25) !important;
}

/* ============================================================
 * TYPING INDICATOR — "Alaia está escribiendo..." con 3 puntos rebotando
 * El legacy usa fondo #1e293b + dots violetas #8b5cf6. Aquí se reemplaza
 * por dark glass + dots brand-blue. El keyframe nyxTyping del legacy
 * (1.4s con stagger 0.2s/0.4s) lo respetamos — solo cambiamos colores.
 * ============================================================ */
.nyx-chat-typing {
    background: rgba(15, 23, 42, 0.85) !important;
    border: 1px solid rgba(59, 130, 246, 0.18) !important;
    border-bottom-left-radius: 4px !important;
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.4) !important;
}
.nyx-chat-typing__name {
    color: #93c5fd !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
}
.nyx-chat-typing__dots span {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%) !important;
    box-shadow: 0 0 6px rgba(59, 130, 246, 0.6) !important;
    width: 6px !important;
    height: 6px !important;
}

/* Input de texto en el footer del chat — frosted glass */
.nyx-chat-input,
.nyx-chat-input input,
.nyx-chat-input textarea {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    color: #f1f5f9 !important;
    border-radius: 12px !important;
}
.nyx-chat-input input:focus,
.nyx-chat-input textarea:focus {
    border-color: rgba(59, 130, 246, 0.55) !important;
    background: rgba(59, 130, 246, 0.08) !important;
    outline: none !important;
}

/* Botón enviar — brand sólido */
.nyx-chat-send,
.nyx-chat-input button[type="submit"] {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow:
        0 4px 12px -2px rgb(var(--brand-glow, 96 165 250) / 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
    border-radius: 12px !important;
    transition: transform .25s ease, box-shadow .25s ease !important;
}
.nyx-chat-send:hover,
.nyx-chat-input button[type="submit"]:hover {
    transform: translateY(-1px) !important;
    box-shadow:
        0 8px 22px -4px rgb(var(--brand-glow, 96 165 250) / 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.30) !important;
}

/* Quick action button WhatsApp — keep verde pero con borde brand-tinted */
.nyx-chat-quick-btn--whatsapp {
    border: 1px solid rgba(34, 197, 94, 0.30) !important;
    background: rgba(34, 197, 94, 0.10) !important;
    color: #86efac !important;
}

/* Menú dropdown del header */
.nyx-chat-menu {
    background: rgba(15, 23, 42, 0.95) !important;
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
    border: 1px solid rgba(59, 130, 246, 0.20) !important;
    border-radius: 14px !important;
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.7) !important;
}
.nyx-chat-menu__item {
    color: #cbd5e1 !important;
}
.nyx-chat-menu__item:hover {
    background: rgba(59, 130, 246, 0.12) !important;
    color: #fff !important;
}
.nyx-chat-menu__divider {
    background: rgba(255, 255, 255, 0.06) !important;
}

/* System messages (los grises de "iniciando conversación", etc) */
.nyx-chat-system-msg {
    color: #64748b !important;
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.10em !important;
    font-weight: 700 !important;
}

/* Restart pill */
.nyx-chat-restart {
    background: rgba(59, 130, 246, 0.10) !important;
    border: 1px solid rgba(59, 130, 246, 0.25) !important;
    color: #93c5fd !important;
    border-radius: 9999px !important;
}
.nyx-chat-restart:hover {
    background: rgba(59, 130, 246, 0.18) !important;
    color: #fff !important;
}

/* ============================================================
 * Responsive — full-screen en mobile (mantiene comportamiento
 * pero con bordes redondeados solo arriba para que se sienta sheet).
 * ============================================================ */
@media (max-width: 480px) {
    #nyx-chat-window {
        width: 100% !important;
        height: 100dvh !important;
        bottom: 0 !important;
        right: 0 !important;
        left: 0 !important;
        border-radius: 18px 18px 0 0 !important;
    }
    #nyx-chat-bubble {
        bottom: 72px !important; /* above mobile-bottom-nav (60px + 12px gap) */
        right: 16px !important;
        width: 52px !important;
        height: 52px !important;
    }
}

/* ============================================================
 * Reduced motion — desactiva micro-animaciones del bubble/halo
 * pero CONSERVA la animación de los 3 puntos del typing indicator.
 * Sin esto, el `*` rule del moderno-motion baja todas las
 * animaciones a 0.001ms y los puntos se ven estáticos.
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
    #nyx-chat-bubble,
    #nyx-chat-bubble:hover { transform: none !important; }
    #nyx-chat-bubble::before { transition: none !important; }
    .nyx-chat-badge { animation: none !important; }

    /* Excepción: los 3 puntos del typing deben rebotar a su duración
     * real para que el indicador "escribiendo..." sea perceptible.
     * Replica los delays del CSS original (0/0.2s/0.4s). */
    .nyx-chat-typing__dots span {
        animation: nyxTyping 1.4s infinite !important;
    }
    .nyx-chat-typing__dots span:nth-child(2) { animation-delay: 0.2s !important; }
    .nyx-chat-typing__dots span:nth-child(3) { animation-delay: 0.4s !important; }

    /* Dot status del header (typing/thinking) también debe pulsar */
    .nyx-chat-dot--typing   { animation: nyxDotTyping 0.8s infinite !important; }
    .nyx-chat-dot--thinking { animation: nyxDotThinking 1.5s ease-in-out infinite !important; }
}