/*
 * NOVAOption — css/nova-chatbot.css
 * Fase 5: Tokenización del chatbot flotante.
 *
 * CÓMO USAR:
 * Añadir en layout/head.php (después de nova-tokens.css):
 *   <link rel="stylesheet" href="css/nova-chatbot.css">
 *
 * No modifica footer.php. Sobrescribe las clases de Tailwind
 * del chatbot con variables CSS. El JS del chatbot no cambia.
 */

/* ── Botón flotante ───────────────────────────────────────── */
#chatbot-toggle-btn {
    background: var(--nova-blue, #1A5FE8) !important;
    box-shadow: 0 0 15px rgba(26, 95, 232, 0.4) !important;
}
#chatbot-toggle-btn:hover {
    background: var(--nova-blue, #1A5FE8) !important;
    filter: brightness(1.1);
}

/* ── Ventana del chatbot ───────────────────────────────────── */
#chatbot-window {
    background: var(--nova-surface, #ffffff) !important;
    border: 0.5px solid var(--nova-border, #E5E7EB) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12) !important;
    border-radius: 12px !important;
}
[data-theme="dark"] #chatbot-window {
    background: var(--nova-surface, #1E2D3F) !important;
    border-color: var(--nova-border, #1E3A5F) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.40) !important;
}

/* ── Header del chat ───────────────────────────────────────── */
#chatbot-window > div:first-child {
    background: var(--nova-elevated, #F9FAFB) !important;
    border-bottom: 0.5px solid var(--nova-border, #E5E7EB) !important;
    border-radius: 12px 12px 0 0 !important;
}
[data-theme="dark"] #chatbot-window > div:first-child {
    background: var(--nova-elevated, #253548) !important;
    border-bottom-color: var(--nova-border, #1E3A5F) !important;
}

/* Nombre del asistente */
#chatbot-window h3 {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-weight: 600 !important;
    color: var(--nova-text, #111) !important;
    font-size: 13px !important;
    letter-spacing: 0 !important;
}

/* Dot "En línea" */
#chatbot-window .bg-green-500 { background-color: var(--nova-success, #059669) !important; }

/* Botones maximizar/restaurar */
#btn-maximize-chat,
#btn-restore-chat {
    color: var(--nova-text-4, #9CA3AF) !important;
    background: transparent !important;
}
#btn-maximize-chat:hover,
#btn-restore-chat:hover {
    color: var(--nova-blue, #1A5FE8) !important;
    background: var(--nova-bg, #F5F6FA) !important;
}

/* ── Área de mensajes ─────────────────────────────────────── */
#chatbot-messages {
    background: var(--nova-bg, #F5F6FA) !important;
}
[data-theme="dark"] #chatbot-messages {
    background: var(--nova-bg, #0D1B2A) !important;
}

/* Burbuja del bot */
#chatbot-messages .bg-gray-800 {
    background: var(--nova-surface, #ffffff) !important;
    color: var(--nova-text, #111) !important;
    border-color: var(--nova-border, #E5E7EB) !important;
}
[data-theme="dark"] #chatbot-messages .bg-gray-800 {
    background: var(--nova-surface, #1E2D3F) !important;
    color: var(--nova-text, #F0F4FF) !important;
    border-color: var(--nova-border, #1E3A5F) !important;
}

/* Burbuja del usuario */
#chatbot-messages .bg-cyan-600 {
    background: var(--nova-blue, #1A5FE8) !important;
    border-color: var(--nova-blue, #1A5FE8) !important;
    color: #fff !important;
}

/* Burbuja de límite alcanzado */
#chatbot-messages .bg-amber-900\/30 {
    background: var(--nova-warning-bg, #FEF3C7) !important;
    color: var(--nova-warning, #D97706) !important;
    border-color: rgba(217, 119, 6, 0.4) !important;
}
[data-theme="dark"] #chatbot-messages .bg-amber-900\/30 {
    background: var(--nova-warning-bg, #2D1F00) !important;
    color: var(--nova-warning, #F59E0B) !important;
}

/* ── Footer del chat ───────────────────────────────────────── */
#chatbot-window > div:last-child {
    background: var(--nova-surface, #ffffff) !important;
    border-top: 0.5px solid var(--nova-border, #E5E7EB) !important;
    border-radius: 0 0 12px 12px !important;
}
[data-theme="dark"] #chatbot-window > div:last-child {
    background: var(--nova-elevated, #253548) !important;
    border-top-color: var(--nova-border, #1E3A5F) !important;
}

/* Input del chat */
#chatbot-input {
    background: var(--nova-elevated, #F9FAFB) !important;
    color: var(--nova-text, #111) !important;
    border: 0.5px solid var(--nova-border, #E5E7EB) !important;
    border-radius: 7px !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 13px !important;
}
[data-theme="dark"] #chatbot-input {
    background: var(--nova-bg, #0D1B2A) !important;
    color: var(--nova-text, #F0F4FF) !important;
    border-color: var(--nova-border, #1E3A5F) !important;
}
#chatbot-input:focus {
    border-color: var(--nova-blue, #1A5FE8) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(26, 95, 232, 0.12) !important;
}
#chatbot-input::placeholder { color: var(--nova-text-4, #9CA3AF) !important; }

/* Botón enviar */
#chatbot-window form button[type="submit"] {
    background: var(--nova-blue, #1A5FE8) !important;
}
#chatbot-window form button[type="submit"]:hover {
    filter: brightness(1.1);
}

/* Barra de cuota */
#chat-quota-bar { color: var(--nova-text-4, #9CA3AF) !important; }
#chat-quota-fill { background: var(--nova-blue, #1A5FE8) !important; }

/* Tablas que genera la IA en el chat */
#chatbot-messages th {
    border-bottom-color: var(--nova-border, #E5E7EB) !important;
    color: var(--nova-blue, #1A5FE8) !important;
}
#chatbot-messages td {
    border-bottom-color: var(--nova-border-soft, #F3F4F6) !important;
}