/* ============================================
   LOHMIA CHAT - RADIANCE THEME v3.0
   Alineación COMPLETA con radiance.lohmia.com
   Fecha: 2025-11-25
   ============================================ */

/* ============================================
   1. VARIABLES CSS - PALETA RADIANCE
   ============================================ */
:root {
    /* === COLORES PRINCIPALES === */
    --radiance-primary: #2C5F7F;           /* Naranja/ámbar - ACENTO PRINCIPAL */
    --radiance-primary-dark: #166A85;
    --radiance-primary-light: #3A9CC2;
    --radiance-primary-glow: rgba(30, 136, 168, 0.3);

    /* === FONDOS (Azul Navy Profundo) === */
    --radiance-bg-darkest: #0a1628;        /* Fondo más oscuro */
    --radiance-bg-dark: #0d1f3c;           /* Fondo principal */
    --radiance-bg-medium: #1a2744;         /* Fondo secundario */
    --radiance-bg-card: #0d1f3c;  /* Cards semi-transparentes */
    --radiance-bg-input: #1e3a5f;          /* Fondo de inputs */
    --radiance-bg-elevated: #243b55;       /* Elementos elevados */

    /* === TEXTO === */
    --radiance-text: #FFFFFF;              /* Texto principal */
    --radiance-text-secondary: #94a3b8;    /* Texto secundario */
    --radiance-text-muted: #64748b;        /* Texto terciario */

    /* === BORDES === */
    --radiance-border: #3d5a80;
    --radiance-border-subtle: rgba(61, 90, 128, 0.3);
    --radiance-border-light: rgba(255, 255, 255, 0.1);

    /* === ESTADOS === */
    --radiance-success: #22c55e;
    --radiance-warning: #2C5F7F;
    --radiance-error: #ef4444;
    --radiance-info: #3b82f6;

    /* === SOMBRAS === */
    --radiance-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --radiance-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --radiance-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
    --radiance-shadow-glow: 0 0 20px rgba(245, 166, 35, 0.3);

    /* === TRANSICIONES === */
    --radiance-transition: 0.2s ease;
    --radiance-transition-slow: 0.3s ease;
}

/* ============================================
   2. RESET Y BASE GLOBAL
   ============================================ */
body,
body.radiance-theme {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    background: linear-gradient(180deg, var(--radiance-bg-darkest) 0%, var(--radiance-bg-medium) 100%) !important;
    color: var(--radiance-text) !important;
    min-height: 100vh !important;
}

/* ============================================
   3. LOGIN - ESTILO RADIANCE COMPLETO
   ============================================ */

/* Contenedor del login */
.login-container {
    background: linear-gradient(180deg, var(--radiance-bg-darkest) 0%, var(--radiance-bg-dark) 50%, var(--radiance-bg-medium) 100%) !important;
    backdrop-filter: none !important;
}

/* Card de login */
.login-box {
    background: rgba(26, 39, 68, 0.85) !important;
    border: 1px solid var(--radiance-border-subtle) !important;
    border-radius: 16px !important;
    box-shadow: var(--radiance-shadow-lg), 0 0 40px rgba(245, 166, 35, 0.1) !important;
    backdrop-filter: blur(20px) !important;
    padding: 40px !important;
}

/* Logo/Título del login */
.login-box h2,
.login-box .login-title {
    color: var(--radiance-primary) !important;
    font-size: 1.8em !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
    text-shadow: 0 2px 10px rgba(245, 166, 35, 0.2) !important;
}

.login-box .login-subtitle,
.login-box p {
    color: var(--radiance-text-secondary) !important;
    font-size: 14px !important;
    margin-bottom: 30px !important;
}

/* Robot icon styling */
.login-box .robot-icon,
.login-box .login-icon {
    color: var(--radiance-primary) !important;
    filter: drop-shadow(0 0 10px rgba(245, 166, 35, 0.4)) !important;
}

/* Inputs del login */
.login-input,
.login-box input[type="text"],
.login-box input[type="password"],
.login-box input[type="email"] {
    background: var(--radiance-bg-input) !important;
    border: none !important; border-bottom: 1px solid rgba(61, 90, 128, 0.2) !important;
    border-radius: 10px !important;
    color: var(--radiance-text) !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
    transition: var(--radiance-transition) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.login-input::placeholder,
.login-box input::placeholder {
    color: var(--radiance-text-muted) !important;
}

.login-input:focus,
.login-box input:focus {
    outline: none !important;
    border-color: var(--radiance-primary) !important;
    box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.2) !important;
}

/* Labels del login */
.login-box label {
    color: var(--radiance-text-secondary) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    margin-bottom: 6px !important;
    display: block !important;
    text-align: left !important;
}

/* Botón principal de login */
.login-btn,
.login-box button[type="submit"],
.login-box .btn-primary {
    background: linear-gradient(135deg, var(--radiance-primary) 0%, var(--radiance-primary-dark) 100%) !important;
    color: #1a1a2e !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 16px 20px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: var(--radiance-transition) !important;
    width: 100% !important;
    box-shadow: var(--radiance-shadow-md) !important;
}

.login-btn:hover,
.login-box button[type="submit"]:hover {
    background: #0d1f3c !important;
    background-image: none !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--radiance-shadow-glow) !important;
}

/* Botón secundario (Crear cuenta) */
.login-box .btn-secondary,
.login-box .create-account-btn,
.oauth-divider + button,
.login-box a.create-account {
    background: transparent !important;
    border: 2px solid var(--radiance-primary) !important;
    color: var(--radiance-primary) !important;
    border-radius: 10px !important;
    padding: 14px 24px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: var(--radiance-transition) !important;
    display: block !important;
    text-align: center !important;
    text-decoration: none !important;
    margin-top: 12px !important;
}

.login-box .btn-secondary:hover,
.login-box .create-account-btn:hover {
    background: rgba(245, 166, 35, 0.1) !important;
    transform: translateY(-1px) !important;
}

/* Divider OAuth */
.oauth-divider,
.login-divider {
    color: var(--radiance-text-muted) !important;
    margin: 24px 0 !important;
    position: relative !important;
}

.oauth-divider::before,
.oauth-divider::after,
.login-divider::before,
.login-divider::after {
    background: var(--radiance-border) !important;
}

/* Botones OAuth */
.oauth-btn,
.social-btn,
.login-box .oauth-button {
    background: #0d1f3c !important;
    border: none !important; border-bottom: 1px solid rgba(61, 90, 128, 0.2) !important;
    border-radius: 10px !important;
    color: var(--radiance-text) !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: var(--radiance-transition) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
}

.oauth-btn:hover,
.social-btn:hover {
    border-color: var(--radiance-primary) !important;
    background: rgba(245, 166, 35, 0.1) !important;
}

/* Links en login */
.login-box a,
.forgot-password {
    color: var(--radiance-primary) !important;
    text-decoration: none !important;
    font-size: 14px !important;
    transition: var(--radiance-transition) !important;
}

.login-box a:hover {
    text-decoration: underline !important;
    filter: brightness(1.2) !important;
}

/* ============================================
   4. SIDEBAR - ESTILO RADIANCE
   ============================================ */
.sidebar {
    background: var(--radiance-bg-dark) !important;
    border-right: 1px solid var(--radiance-border-light) !important;
    backdrop-filter: none !important;
}

.sidebar-header {
    background: transparent !important;
    border-bottom: 1px solid var(--radiance-border-light) !important;
    padding: 20px !important;
}

/* Logo en sidebar */
.app-title,
.sidebar-logo {
    color: var(--radiance-text) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
}

.app-title span,
.sidebar-logo .highlight {
    color: var(--radiance-primary) !important;
}

.app-version {
    color: var(--radiance-text-muted) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

/* Secciones del sidebar */
.section-title,
.sidebar-section-title {
    color: var(--radiance-text-muted) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    margin-bottom: 12px !important;
    padding-left: 12px !important;
}

/* Items del sidebar */
.sidebar-item,
.nav-item {
    background: transparent !important;
    color: var(--radiance-text-secondary) !important;
    border-radius: 0 !important;
    padding: 12px 16px !important;
    margin: 4px 8px !important;
    transition: var(--radiance-transition) !important;
    border-left: 3px solid transparent !important;
    cursor: pointer !important;
}

.sidebar-item:hover,
.nav-item:hover {
    background: rgba(245, 166, 35, 0.1) !important;
    color: var(--radiance-text) !important;
}

.sidebar-item.active,
.nav-item.active {
    background: var(--radiance-primary) !important;
    color: #1a1a2e !important;
    font-weight: 600 !important;
    border-left-color: transparent !important;
}

.sidebar-item.active:hover {
    background: var(--radiance-primary-light) !important;
}

/* Footer del sidebar */
.sidebar-footer {
    border-top: 1px solid var(--radiance-border-light) !important;
    padding: 16px !important;
    margin-top: auto !important;
}

/* ============================================
   5. HEADER - ESTILO RADIANCE
   ============================================ */
.header,
.chat-header {
    background: var(--radiance-bg-dark) !important;
    border-bottom: 1px solid var(--radiance-border-light) !important;
    padding: 16px 20px !important;
}

.header h1,
.chat-header h1 {
    color: var(--radiance-text) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}

/* Status indicator */
.status-indicator,
.api-status {
    color: var(--radiance-success) !important;
    font-size: 13px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.status-indicator::before,
.api-status::before {
    content: '' !important;
    width: 8px !important;
    height: 8px !important;
    background: var(--radiance-success) !important;
    border-radius: 50% !important;
    animation: pulse 2s infinite !important;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Tags/Badges */
.project-line,
.chat-line,
.badge {
    color: var(--radiance-text-muted) !important;
    font-size: 13px !important;
    padding: 6px 12px !important;
    background: var(--radiance-bg-elevated) !important;
    border-radius: 0 !important;
    border: none !important; border-bottom: 1px solid rgba(61, 90, 128, 0.2) !important;
}

.badge-primary,
.badge.active {
    background: var(--radiance-primary) !important;
    color: #1a1a2e !important;
    border-color: var(--radiance-primary) !important;
    font-weight: 600 !important;
}

/* ============================================
   6. ÁREA DE CHAT - ESTILO RADIANCE
   ============================================ */
.chat-container,
.messages-container {
    background: transparent !important;
    flex: 1 !important;
    overflow-y: auto !important;
}

.chat-messages,
.messages {
    padding: 20px !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* Mensajes del usuario */
.message.user .message-bubble,
.message-bubble.user,
.user-message {
    background: rgba(245, 166, 35, 0.2) !important;
    border: 1px solid rgba(245, 166, 35, 0.3) !important;
    color: var(--radiance-text) !important;
    border-radius: 16px 16px 4px 16px !important;
    padding: 12px 16px !important;
    max-width: 80% !important;
    margin-left: auto !important;
    box-shadow: var(--radiance-shadow-sm) !important;
}

/* Mensajes del bot/AI */
.message.ai .message-bubble,
.message.bot .message-bubble,
.message-bubble.ai,
.message-bubble.bot,
.ai-message,
.bot-message {
    background: #0d1f3c !important;
    border: 1px solid var(--radiance-border-subtle) !important;
    color: var(--radiance-text) !important;
    border-radius: 16px 16px 16px 4px !important;
    padding: 12px 16px !important;
    max-width: 80% !important;
}

/* Mensajes del sistema */
.message.system .message-bubble,
.message-bubble.system,
.system-message {
    background: rgba(245, 166, 35, 0.1) !important;
    color: var(--radiance-primary) !important;
    border: 1px solid rgba(245, 166, 35, 0.2) !important;
    border-radius: 0 !important;
    padding: 10px 20px !important;
    font-size: 13px !important;
    text-align: center !important;
    max-width: 90% !important;
    margin: 12px auto !important;
}

/* Timestamp */
.message-time {
    color: var(--radiance-text-muted) !important;
    font-size: 11px !important;
    margin-top: 4px !important;
}

/* Welcome message */
#welcomeMessage,
.welcome-message {
    background: #0d1f3c !important;
    border: 1px solid var(--radiance-border-subtle) !important;
    color: var(--radiance-text) !important;
    border-radius: 12px !important;
    padding: 16px 20px !important;
}

/* ============================================
   7. INPUT AREA - ESTILO RADIANCE
   ============================================ */
.input-area,
.message-input-container {
    background: var(--radiance-bg-dark) !important;
    border-top: 1px solid var(--radiance-border-light) !important;
    padding: 16px 20px !important;
}

/* Input de mensaje */
.message-input,
#messageInput,
.input-area textarea,
.input-area input[type="text"] {
    background: var(--radiance-bg-input) !important;
    border: none !important; border-bottom: 1px solid rgba(61, 90, 128, 0.2) !important;
    border-radius: 12px !important;
    color: var(--radiance-text) !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
    transition: var(--radiance-transition) !important;
    resize: none !important;
}

.message-input::placeholder,
#messageInput::placeholder {
    color: var(--radiance-text-muted) !important;
}

.message-input:focus,
#messageInput:focus {
    outline: none !important;
    border-color: var(--radiance-primary) !important;
    box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.15) !important;
}

/* Botón de enviar - AZUL PETRÓLEO */
.send-button,
.btn-send {
    background: #2C5F7F !important;
    background-image: none !important;
    color: #1a1a2e !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: var(--radiance-transition) !important;
    min-width: 48px !important;
}

.send-button:hover,
.btn-send:hover {
    background: #0d1f3c !important;
    background-image: none !important;
    transform: scale(1.05) !important;
    box-shadow: var(--radiance-shadow-glow) !important;
}

/* Botones de acción (tools, mic, etc) */
.action-btn,
.mobile-btn,
.tools-btn,
.tools-btn-desktop,
.mic-btn-desktop {
    background: var(--radiance-bg-elevated) !important;
    color: var(--radiance-text-secondary) !important;
    border: none !important; border-bottom: 1px solid rgba(61, 90, 128, 0.2) !important;
    border-radius: 10px !important;
    padding: 12px !important;
    cursor: pointer !important;
    transition: var(--radiance-transition) !important;
}

.action-btn:hover,
.mobile-btn:hover,
.tools-btn:hover,
.tools-btn-desktop:hover,
.mic-btn-desktop:hover {
    background: rgba(245, 166, 35, 0.2) !important;
    border-color: var(--radiance-primary) !important;
    color: var(--radiance-primary) !important;
}

/* ============================================
   8. MODALES - ESTILO RADIANCE
   ============================================ */
.tools-modal,
.modal,
.config-modal {
    background: rgba(10, 22, 40, 0.9) !important;
    backdrop-filter: blur(10px) !important;
}

.tools-content,
.modal-content,
.config-content {
    background: transparent !important;
    border: none !important; border-bottom: 1px solid rgba(61, 90, 128, 0.2) !important;
    border-radius: 16px !important;
    box-shadow: var(--radiance-shadow-lg) !important;
}

.tools-header,
.modal-header {
    border-bottom: 1px solid var(--radiance-border-light) !important;
    padding: 18px 24px !important;
    background: var(--radiance-bg-dark) !important;
    border-radius: 16px 16px 0 0 !important;
}

.tools-title,
.modal-title {
    color: var(--radiance-text) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}

.tools-close,
.modal-close {
    color: var(--radiance-text-muted) !important;
    background: transparent !important;
    border: none !important;
    font-size: 20px !important;
    cursor: pointer !important;
    transition: var(--radiance-transition) !important;
    padding: 4px 8px !important;
    border-radius: 0 !important;
}

.tools-close:hover,
.modal-close:hover {
    color: var(--radiance-error) !important;
    background: rgba(239, 68, 68, 0.1) !important;
}

/* Modal body */
.tools-body,
.modal-body {
    padding: 24px !important;
}

/* Tool items in modal */
.tool-item,
.tool-card {
    background: var(--radiance-bg-card) !important;
    border: 1px solid var(--radiance-border-subtle) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    cursor: pointer !important;
    transition: var(--radiance-transition) !important;
}

.tool-item:hover,
.tool-card:hover {
    border-color: var(--radiance-primary) !important;
    background: rgba(245, 166, 35, 0.1) !important;
    transform: translateY(-2px) !important;
}

/* ============================================
   9. ERROR MODAL - ESTILO RADIANCE
   ============================================ */
.error-modal {
    background: rgba(10, 22, 40, 0.85) !important;
    backdrop-filter: blur(5px) !important;
}

.error-modal-content {
    background: transparent !important;
    border: none !important; border-bottom: 1px solid rgba(61, 90, 128, 0.2) !important;
    border-radius: 16px !important;
    box-shadow: var(--radiance-shadow-lg) !important;
}

.error-modal-icon {
    background: linear-gradient(135deg, var(--radiance-primary) 0%, var(--radiance-primary-dark) 100%) !important;
    box-shadow: 0 4px 12px rgba(245, 166, 35, 0.3) !important;
}

.error-modal-title {
    color: var(--radiance-text) !important;
}

.error-modal-message {
    color: var(--radiance-text-secondary) !important;
}

.error-modal-btn {
    background: linear-gradient(135deg, var(--radiance-primary) 0%, var(--radiance-primary-dark) 100%) !important;
    color: #1a1a2e !important;
    box-shadow: 0 2px 8px rgba(245, 166, 35, 0.3) !important;
}

.error-modal-btn:hover {
    box-shadow: 0 4px 16px rgba(245, 166, 35, 0.4) !important;
}

/* ============================================
   10. CONFIG MODAL - ESTILO RADIANCE
   ============================================ */
#configModal .tools-content,
.config-modal-content {
    background: transparent !important;
}

#configModal select,
#configModal input[type="checkbox"] {
    background: var(--radiance-bg-input) !important;
    border: none !important; border-bottom: 1px solid rgba(61, 90, 128, 0.2) !important;
    color: var(--radiance-text) !important;
    border-radius: 0 !important;
}

#configModal select:focus {
    border-color: var(--radiance-primary) !important;
    outline: none !important;
}

#configModal label {
    color: var(--radiance-text-secondary) !important;
}

#configModal input[type="checkbox"] {
    accent-color: var(--radiance-primary) !important;
}

/* ============================================
   11. HAMBURGER MENU - ESTILO RADIANCE
   ============================================ */
.hamburger-menu {
    background: var(--radiance-bg-dark) !important;
    border: none !important; border-bottom: 1px solid rgba(61, 90, 128, 0.2) !important;
    border-radius: 10px !important;
    padding: 10px !important;
    box-shadow: var(--radiance-shadow-md) !important;
}

.hamburger-menu:hover {
    border-color: var(--radiance-primary) !important;
    background: var(--radiance-bg-elevated) !important;
}

.hamburger-line {
    background: var(--radiance-text) !important;
}

/* ============================================
   12. SCROLLBAR - ESTILO RADIANCE
   ============================================ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--radiance-bg-dark);
}

::-webkit-scrollbar-thumb {
    background: var(--radiance-border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--radiance-primary);
}

/* ============================================
   13. TYPING INDICATOR - ESTILO RADIANCE
   ============================================ */
.typing-indicator {
    background: var(--radiance-bg-card) !important;
    border: 1px solid var(--radiance-border-subtle) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
}

.typing-indicator .dot,
.typing-indicator span {
    background: var(--radiance-primary) !important;
}

/* ============================================
   14. LOADING STATES - ESTILO RADIANCE
   ============================================ */
.loading,
.spinner {
    color: var(--radiance-primary) !important;
}

.loading-overlay {
    background: rgba(10, 22, 40, 0.8) !important;
}

/* ============================================
   15. MOBILE MENU - ESTILO RADIANCE
   ============================================ */
#mobileMenu,
.mobile-menu {
    background: var(--radiance-bg-dark) !important;
    border: none !important; border-bottom: 1px solid rgba(61, 90, 128, 0.2) !important;
    border-radius: 12px !important;
    box-shadow: var(--radiance-shadow-lg) !important;
}

#mobileMenu button,
.mobile-menu button {
    background: var(--radiance-bg-elevated) !important;
    color: var(--radiance-text-secondary) !important;
    border: none !important; border-bottom: 1px solid rgba(61, 90, 128, 0.2) !important;
}

#mobileMenu button:hover,
.mobile-menu button:hover {
    background: rgba(245, 166, 35, 0.2) !important;
    border-color: var(--radiance-primary) !important;
    color: var(--radiance-primary) !important;
}

/* ============================================
   16. SIDEBAR OVERLAY - ESTILO RADIANCE
   ============================================ */
.sidebar-overlay,
.sidebar-overlay.active {
    background: rgba(10, 22, 40, 0.8) !important;
}

/* ============================================
   17. FOCUS STATES - ACCESIBILIDAD
   ============================================ */
*:focus-visible {
    outline: 2px solid var(--radiance-primary) !important;
    outline-offset: 2px !important;
}

/* ============================================
   18. RESPONSIVE - MOBILE
   ============================================ */
@media (max-width: 768px) {
    .login-box {
        margin: 0 16px !important;
        padding: 28px 24px !important;
    }

    .sidebar {
        background: var(--radiance-bg-dark) !important;
    }

    .chat-messages,
    .messages {
        padding: 16px !important;
    }

    .input-area {
        padding: 12px 16px !important;
    }

    .message.user .message-bubble,
    .message.ai .message-bubble {
        max-width: 90% !important;
    }
}

/* ============================================
   19. UTILIDADES
   ============================================ */
.text-primary { color: var(--radiance-primary) !important; }
.text-secondary { color: var(--radiance-text-secondary) !important; }
.text-muted { color: var(--radiance-text-muted) !important; }
.text-success { color: var(--radiance-success) !important; }
.text-error { color: var(--radiance-error) !important; }
.text-white { color: var(--radiance-text) !important; }

.bg-dark { background: var(--radiance-bg-dark) !important; }
.bg-medium { background: transparent !important; }
.bg-card { background: var(--radiance-bg-card) !important; }
.bg-primary { background: var(--radiance-primary) !important; }

.border-primary { border-color: var(--radiance-primary) !important; }
.border-subtle { border-color: var(--radiance-border-subtle) !important; }

/* Glow effect utility */
.glow-primary {
    box-shadow: 0 0 20px rgba(245, 166, 35, 0.4) !important;
}

/* ============================================
   20. ANIMACIONES
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes glowPulse {
    0%, 100% {
        box-shadow: 0 0 5px rgba(245, 166, 35, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(245, 166, 35, 0.5);
    }
}

.animate-fadeIn {
    animation: fadeInUp 0.3s ease;
}

.animate-glow {
    animation: glowPulse 2s infinite;
}

/* ============================================
   21. LAYOUT TIPO WHATSAPP/TELEGRAM
   ============================================ */

/* === ESTRUCTURA PRINCIPAL === */
html, body {
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
}

.app-container {
    display: flex !important;
    width: 100% !important;
    height: 100vh !important;
    overflow: hidden !important;
    background: transparent !important;
}

/* === SIDEBAR === */
.sidebar {
    width: 300px !important;
    flex-shrink: 0 !important;
    height: 100vh !important;
    overflow-y: auto !important;
}

/* === ÁREA PRINCIPAL (junto al sidebar) === */
.main-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    overflow: hidden !important;
    padding: 0 !important;
    background: transparent !important;
    /* margin-left se maneja via el flex del app-container */
}

/* === HEADER DEL CHAT - FIJO ARRIBA === */
.header {
    flex-shrink: 0 !important;
    padding: 16px 20px !important;
    background: var(--radiance-bg-dark) !important;
    border-bottom: 1px solid var(--radiance-border-light) !important;
}

/* === CHAT CONTAINER - FLEX COLUMN === */
.chat-container {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    min-height: 0 !important; /* CLAVE para flex + overflow */
}

/* === ÁREA DE MENSAJES - SCROLL + MENSAJES AL FONDO === */
.messages,
#messagesContainer {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-height: 0 !important; /* CLAVE para que flex funcione con overflow */

    /* Mensajes empujados al fondo */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;

    padding: 12px 16px !important;  /* optimizado móvil */
    margin: 0 !important;
    gap: 12px !important;
    background: transparent !important;
}

/* Mensajes individuales */
.messages > .message,
.messages > div,
#messagesContainer > .message,
#messagesContainer > div {
    flex-shrink: 0 !important;
    max-width: 85% !important;
}

/* Mensaje de bienvenida */
#welcomeMessage {
    flex-shrink: 0 !important;
}

/* === INPUT - FIJO AL FONDO, ANCHO COMPLETO === */
.input-area {
    flex-shrink: 0 !important;
    position: relative !important;

    /* Ancho completo sin huecos */
    width: 100% !important;
    margin: 0 !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;

    /* Fondo integrado */
    background: var(--radiance-bg-dark) !important;
    border-top: 1px solid var(--radiance-border-light) !important;

    /* Sin efectos de caja flotante */
    backdrop-filter: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;

    /* Layout interno */
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px 20px !important;
}

/* === BOTÓN + CON POSICIÓN RELATIVA PARA EL MENÚ === */
.tools-btn-desktop {
    position: relative !important;
}

/* === Header badges - BARRAS HORIZONTALES (NO CAMBIAR) === */
/* El diseño actual con badges de ancho completo es el correcto */
.header-context {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 10px !important;
}

.project-line,
.chat-line {
    display: block !important;
    width: 100% !important;
    padding: 8px 16px !important;
    border-radius: 0 !important;
    font-size: 13px !important;
    text-align: center !important;
    margin: 0 !important;
    background: var(--radiance-bg-elevated) !important;
    border: none !important; border-bottom: 1px solid rgba(61, 90, 128, 0.2) !important;
}

/* === FIX: Botón + (adjuntar) con estilo naranja === */
.tools-btn-desktop {
    background: transparent !important;
    border: 2px solid var(--radiance-primary) !important;
    color: var(--radiance-primary) !important;
    border-radius: 10px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: var(--radiance-transition) !important;
    flex-shrink: 0 !important;
}

.tools-btn-desktop:hover {
    background: rgba(245, 166, 35, 0.15) !important;
    transform: scale(1.05) !important;
}

.tools-btn-desktop.active {
    background: var(--radiance-primary) !important;
    color: #1a1a2e !important;
}

/* === FIX: Botón micrófono consistente === */
.mic-btn-desktop {
    background: transparent !important;
    border: 2px solid var(--radiance-border) !important;
    color: var(--radiance-text-secondary) !important;
    border-radius: 10px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    cursor: pointer !important;
    transition: var(--radiance-transition) !important;
    flex-shrink: 0 !important;
}

.mic-btn-desktop:hover {
    border-color: var(--radiance-primary) !important;
    color: var(--radiance-primary) !important;
    background: rgba(245, 166, 35, 0.1) !important;
}

/* === FIX: Input de mensaje flexible === */
.message-input,
#messageInput {
    flex: 1 !important;
    min-height: 44px !important;
    max-height: 120px !important;
}

/* === FIX: Botón enviar más visible === */
.send-button {
    width: 48px !important;
    height: 44px !important;
    min-width: 48px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* === FIX: Header compacto y centrado === */
.header {
    background: var(--radiance-bg-dark) !important;
    padding: 16px 20px !important;
    text-align: center !important;
    border-bottom: 1px solid var(--radiance-border-light) !important;
    flex-shrink: 0 !important;
}

.header h1 {
    font-size: 1.5em !important;
    margin-bottom: 0 !important;
    text-shadow: none !important;
}

/* === FIX: Welcome message estilo correcto === */
#welcomeMessage,
.message.ai {
    background: #0d1f3c !important;
    border: 1px solid var(--radiance-border-subtle) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    color: var(--radiance-text) !important;
    max-width: 85% !important;
    align-self: flex-start !important;
}

/* === MENÚ + APARECE HACIA ARRIBA === */
#mobileMenu {
    position: fixed !important;
    /* Posicionado encima del input area */
    bottom: 90px !important;
    left: 324px !important;  /* Sidebar (300px) + padding (24px) */
    right: auto !important;
    transform: none !important;

    /* Tamaño del menú */
    width: auto !important;
    min-width: 320px !important;
    max-width: 450px !important;

    /* Estilo visual */
    background: var(--radiance-bg-dark) !important;
    border: none !important; border-bottom: 1px solid rgba(61, 90, 128, 0.2) !important;
    border-radius: 16px !important;
    padding: 20px !important;

    /* Sombra hacia arriba */
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4) !important;

    z-index: 1001 !important;
}

#mobileMenu .menu-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
}

#mobileMenu .menu-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 14px 10px !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: var(--radiance-transition) !important;
    background: var(--radiance-bg-elevated) !important;
    border: 1px solid transparent !important;
}

#mobileMenu .menu-item:hover {
    background: rgba(245, 166, 35, 0.2) !important;
    border-color: var(--radiance-primary) !important;
    transform: translateY(-2px) !important;
}

#mobileMenu .menu-icon {
    font-size: 28px !important;
}

#mobileMenu .menu-text {
    font-size: 12px !important;
    color: var(--radiance-text) !important;
    font-weight: 500 !important;
    text-align: center !important;
}

/* === FIX: Mic timer styling === */
.mic-timer {
    background: var(--radiance-bg-elevated) !important;
    color: var(--radiance-primary) !important;
    padding: 4px 10px !important;
    border-radius: 0 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .sidebar {
        position: fixed !important;
        transform: translateX(-100%) !important;
        z-index: 1000 !important;
    }

    .sidebar.active {
        transform: translateX(0) !important;
    }

    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }

    /* Header badges siguen siendo barras en móvil */
    .header-context {
        flex-direction: column !important;
        gap: 6px !important;
    }

    .project-line,
    .chat-line {
        width: 100% !important;
    }

    .input-area {
        padding: 12px 16px !important;
        gap: 8px !important;
    }

    .tools-btn-desktop,
    .mic-btn-desktop {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
    }

    .send-button {
        width: 44px !important;
        height: 40px !important;
        min-width: 44px !important;
    }

    /* Mobile menu centrado en móvil */
    #mobileMenu {
        left: 16px !important;
        right: 16px !important;
        width: auto !important;
        max-width: 100% !important;
        bottom: 80px !important;
    }
}

/* === FIX: Eliminar transformaciones que causan gaps === */
@media (min-width: 769px) {
    .chat-container {
        transform: none !important;
    }
}

/* ============================================
   LOGO STYLES - RADIANCE ALIGNMENT
   ============================================ */

/* === LOGIN: Vertical Logo Container === */
.logo-container-vertical {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 20px 0 30px 0 !important;
    text-align: center !important;
}

.logo-icon-large {
    width: 64px !important;
    height: 64px !important;
    filter: drop-shadow(0 0 15px rgba(245, 166, 35, 0.4)) !important;
}

.logo-icon-large svg {
    width: 100% !important;
    height: 100% !important;
}

/* === Bicolor Title (Login & Chat Header) === */
.logo-title-bicolor {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
}

.logo-title-bicolor .brand,
.sidebar-title-bicolor .brand,
.chat-header-title .brand {
    color: #22c55e !important; /* Verde Radiance */
    text-transform: uppercase !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
}

.logo-title-bicolor .product,
.chat-header-title .product {
    color: #F5A623 !important; /* Naranja Radiance */
    font-weight: 400 !important;
}

/* === Subtitle === */
.logo-subtitle {
    margin: 0 !important;
    color: #94a3b8 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em !important;
}

/* === Sidebar Title === */
.sidebar-title-bicolor {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    margin: 0 !important;
    padding: 0 !important;
}

.sidebar-title-bicolor .lohmia-robot-icon {
    flex-shrink: 0 !important;
    filter: drop-shadow(0 0 8px rgba(245, 166, 35, 0.3)) !important;
}

/* === Chat Header Title === */
.chat-header-title {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

.chat-header-title .lohmia-robot-icon {
    flex-shrink: 0 !important;
    filter: drop-shadow(0 0 6px rgba(245, 166, 35, 0.3)) !important;
}

/* === Override any inline h2 styles in login-box === */
.login-box h2 {
    all: unset !important;
}

.login-box .logo-container-vertical {
    width: 100% !important;
}

/* === Ensure subtitle in login box is styled correctly === */
.login-box > p:first-of-type {
    display: none !important; /* Hide old subtitle if exists */
}

/* === Make sure green is visible on dark backgrounds === */
.brand {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* === Mobile adjustments === */
@media (max-width: 768px) {
    .logo-container-vertical {
        gap: 12px !important;
        padding: 16px 0 24px 0 !important;
    }

    .logo-icon-large {
        width: 56px !important;
        height: 56px !important;
    }

    .logo-title-bicolor {
        font-size: 24px !important;
    }

    .sidebar-title-bicolor {
        font-size: 18px !important;
    }

    .chat-header-title {
        font-size: 18px !important;
    }
}

/* ============================================
   RADIANCE EFFECTS - Visual Polish
   ============================================ */

/* === Verde más vibrante para LOHMIA === */
.logo-title-bicolor .brand,
.sidebar-title-bicolor .brand,
.chat-header-title .brand {
    color: #2DD4BF !important; /* Verde-cyan vibrante como Radiance */
    text-shadow: 0 0 20px rgba(45, 212, 191, 0.4) !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}

/* === Naranja con glow sutil === */
.logo-title-bicolor .product,
.chat-header-title .product {
    color: #FFFFFF !important;
    text-shadow: none !important;
}

/* === Card del Login - Estilo Radiance === */
.login-box {
    background: rgba(26, 39, 68, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.1),
        0 10px 40px rgba(0, 0, 0, 0.25),
        0 0 60px rgba(245, 166, 35, 0.08) !important;
    backdrop-filter: blur(12px) !important;
    padding: 40px !important;
}

/* === Icono con glow mejorado === */
.logo-icon-large {
    filter: drop-shadow(0 4px 15px rgba(245, 166, 35, 0.4)) !important;
}

.logo-icon-large svg {
    width: 64px !important;
    height: 64px !important;
}

/* === Sidebar icon glow === */
.sidebar-title-bicolor .lohmia-robot-icon,
.chat-header-title .lohmia-robot-icon {
    filter: drop-shadow(0 2px 8px rgba(245, 166, 35, 0.35)) !important;
}

/* === Subtítulo mejorado === */
.logo-subtitle {
    color: #94a3b8 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: 0.03em !important;
    opacity: 0.9 !important;
}

/* === Logo container vertical refinado === */
.logo-container-vertical {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 24px 0 32px 0 !important;
}

/* === Título login más grande === */
.logo-title-bicolor {
    font-size: 28px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
}

/* === Sidebar header refinado === */
.sidebar-header {
    background: rgba(26, 39, 68, 0.6) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 20px !important;
}

.sidebar-title-bicolor {
    font-size: 20px !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* === Chat header refinado === */
.chat-header-title {
    font-size: 20px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* === Hover effects === */
.logo-icon-large:hover {
    filter: drop-shadow(0 4px 20px rgba(245, 166, 35, 0.5)) !important;
    transform: scale(1.02);
    transition: all 0.3s ease !important;
}

/* === Animación sutil para el icono === */
@keyframes subtleGlow {
    0%, 100% {
        filter: drop-shadow(0 4px 15px rgba(245, 166, 35, 0.4));
    }
    50% {
        filter: drop-shadow(0 4px 20px rgba(245, 166, 35, 0.55));
    }
}

.logo-icon-large {
    animation: subtleGlow 3s ease-in-out infinite !important;
}

/* === Input fields refinados === */
.login-input,
.login-box input[type="text"],
.login-box input[type="password"] {
    background: rgba(13, 31, 60, 0.8) !important;
    border: 1px solid rgba(61, 90, 128, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.2s ease !important;
}

.login-input:focus,
.login-box input:focus {
    border-color: #2DD4BF !important;
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.15) !important;
}

/* === Botón login refinado === */
.login-btn,
.login-box button[type="submit"] {
    background: #2C5F7F !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    transition: all 0.2s ease !important;
}

.login-btn:hover,
.login-box button[type="submit"]:hover {
    background: #0d1f3c !important;
    box-shadow: none !important;
    transform: translateY(-2px) !important;
}

/* ============================================
   RADIANCE LOGIN - EXACT MATCH
   Override inline styles
   ============================================ */

/* === Background - Navy Dark === */
.login-container {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #0f172a 100%) !important;
}

/* === Card - Dark Slate === */
.login-box {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    border-radius: 24px !important;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5) !important;
    padding: 40px !important;
    max-width: 400px !important;
}

/* === Title with Gradient === */
.logo-title-bicolor {
    background: linear-gradient(135deg, #2C5F7F, #10b981) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
}

/* Remove individual span colors since we use gradient */
.logo-title-bicolor .brand,
.logo-title-bicolor .product {
    -webkit-text-fill-color: transparent !important;
    background: none !important;
    text-shadow: none !important;
}

/* === Subtitle === */
.logo-subtitle {
    color: #94a3b8 !important;
    font-size: 14px !important;
    margin-top: 8px !important;
}

/* === Inputs - Dark Style === */
.login-input,
.login-box input[type="text"],
.login-box input[type="password"],
.login-box input[type="email"] {
    background: #0f172a !important;
    border: 1px solid #334155 !important;
    border-radius: 12px !important;
    color: #f8fafc !important;
    padding: 15px !important;
    font-size: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: all 0.3s !important;
}

.login-input::placeholder,
.login-box input::placeholder {
    color: #64748b !important;
}

.login-input:focus,
.login-box input:focus {
    outline: none !important;
    border-color: #2C5F7F !important;
    box-shadow: 0 0 0 3px rgba(44, 95, 127, 0.2) !important;
}

/* === Labels === */
.login-box label {
    color: #94a3b8 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-align: left !important;
    display: block !important;
    margin-bottom: 6px !important;
}

/* === Button - Amber Gradient === */
.login-btn,
.login-box button[type="submit"],
.login-box .btn-primary {
    background: #2C5F7F !important;
    background-image: none !important;
    color: #0f172a !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 15px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    width: 100% !important;
    cursor: pointer !important;
    transition: all 0.3s !important;
    margin-top: 10px !important;
}

.login-btn:hover,
.login-box button[type="submit"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 30px rgba(30, 136, 168, 0.3) !important;
}

/* === Icon Glow - Amber === */
.logo-icon-large {
    filter: drop-shadow(0 0 20px rgba(44, 95, 127, 0.4)) !important;
}

/* === Secondary Button === */
.login-box .btn-secondary,
.login-box .create-account-btn {
    background: transparent !important;
    border: 1px solid #334155 !important;
    color: #f8fafc !important;
    border-radius: 12px !important;
    padding: 14px !important;
    font-size: 15px !important;
    transition: all 0.3s !important;
}

.login-box .btn-secondary:hover,
.login-box .create-account-btn:hover {
    border-color: #2C5F7F !important;
    color: #2C5F7F !important;
}

/* === Toggle Password Button === */
.login-box #togglePassBtn,
.login-box button[type="button"] {
    color: #64748b !important;
    background: none !important;
}

.login-box #togglePassBtn:hover {
    color: #2C5F7F !important;
}

/* === Remove old glow animations === */
.logo-icon-large {
    animation: none !important;
}

/* === Error Modal Dark Style === */
.error-modal-content {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #f8fafc !important;
}

.error-modal-btn {
    background: #2C5F7F !important;
    background-image: none !important;
    color: #0f172a !important;
}

/* ============================================
   FIX: Title Gradient - Like Radiance
   ============================================ */

/* === Title Container === */
.logo-title-bicolor {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    margin: 0 !important;
    /* Remove the broken gradient approach */
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
}

/* === LOHMIA - Amber/Orange Color === */
.logo-title-bicolor .brand {
    color: #2C5F7F !important;
    -webkit-text-fill-color: #2C5F7F !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    background: none !important;
    text-shadow: 0 0 30px rgba(30, 136, 168, 0.3) !important;
}

/* === Chat/Radiance - Emerald/Green Color === */
.logo-title-bicolor .product {
    color: #10b981 !important;
    -webkit-text-fill-color: #10b981 !important;
    font-weight: 400 !important;
    background: none !important;
    text-shadow: 0 0 30px rgba(16, 185, 129, 0.3) !important;
}

/* === Sidebar title === */
.sidebar-title-bicolor .brand {
    color: #2C5F7F !important;
    -webkit-text-fill-color: #2C5F7F !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    text-shadow: 0 0 20px rgba(44, 95, 127, 0.25) !important;
}

/* === Chat header title === */
.chat-header-title .brand {
    color: #2C5F7F !important;
    -webkit-text-fill-color: #2C5F7F !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
}

.chat-header-title .product {
    color: #10b981 !important;
    -webkit-text-fill-color: #10b981 !important;
    font-weight: 400 !important;
}

/* ============================================
   EXACT RADIANCE TITLE STYLE
   Copied from radiance.lohmia.com
   ============================================ */

/* === Login Title - EXACT Match === */
.logo-title-bicolor {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, #2C5F7F, #10b981) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

/* Force spans to inherit the gradient */
.logo-title-bicolor .brand,
.logo-title-bicolor .product {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: inherit !important;
    color: inherit !important;
    text-shadow: none !important;
    display: inline !important;
}

/* === Alternative: If gradient on container doesn't work, apply to wrapper === */
.logo-container-vertical h2.logo-title-bicolor {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, #2C5F7F, #10b981) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    margin: 0 !important;
}

/* === Sidebar & Header - Simpler two-color approach === */
.sidebar-title-bicolor .brand,
.chat-header-title .brand {
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
    font-weight: 700 !important;
}

.chat-header-title .product {
    color: #2C5F7F !important;
    -webkit-text-fill-color: #2C5F7F !important;
    font-weight: 400 !important;
}

/* ============================================
   CHAT LAYOUT FIX - Full Width & Height
   Responsive: Desktop + Mobile
   ============================================ */

/* === RESET BASE === */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    background: #0a1628 !important;
}

/* === APP CONTAINER === */
.app-container {
    display: flex !important;
    height: 100vh !important;
    width: 100vw !important;
    overflow: hidden !important;
    background: #0a1628 !important;
}

/* === MAIN CONTENT - Full width after sidebar === */
.main-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #0d1f3c !important;
}

/* === HEADER === */
.header {
    flex-shrink: 0 !important;
    padding: 16px 20px !important;
    background: #0d1929 !important;
    border-bottom: none !important;
    margin: 0 !important;
    width: 100% !important;
}

/* === HEADER CONTEXT (Badges) === */
.header-context {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 0 !important;
}

.project-line,
.chat-line {
    display: block !important;
    width: 100% !important;
    padding: 10px 20px !important;
    background: rgba(26, 39, 68, 0.6) !important;
    border-radius: 0 !important;
    border: none !important;
    color: #94a3b8 !important;
    font-size: 13px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* === CHAT CONTAINER - Full width === */
.chat-container {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    background: #0d1f3c !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* === MESSAGES AREA === */
.messages,
#messagesContainer {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* Messages at bottom */
    gap: 12px !important;
    padding: 12px 16px !important;  /* optimizado móvil */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-height: 0 !important; /* Critical for flex + overflow */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background: #0d1f3c !important;
}

/* === MESSAGE BUBBLES === */
.message {
    max-width: 85% !important;
    width: fit-content !important;
    padding: 12px 16px !important;
    border-radius: 12px !important;
    word-wrap: break-word !important;
}

.message.ai {
    align-self: flex-start !important;
    background: #0d1f3c !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: #f8fafc !important;
}

.message.user {
    align-self: flex-end !important;
    background: #1ABC9C !important;
    background-image: none !important;
    color: #FFFFFF !important;
}

/* === INPUT AREA - Full width, fixed at bottom === */
.input-area {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px 20px !important;
    background: #0d1929 !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 10 !important;
}

/* === INPUT FIELD === */
.message-input {
    flex: 1 !important;
    min-width: 0 !important; /* Allow shrinking */
    padding: 12px 16px !important;
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    border-radius: 12px !important;
    color: #f8fafc !important;
    font-size: 15px !important;
    resize: none !important;
    outline: none !important;
    max-height: 120px !important;
    overflow-y: auto !important;
}

.message-input:focus {
    border-color: #2C5F7F !important;
    box-shadow: 0 0 0 3px rgba(44, 95, 127, 0.15) !important;
}

.message-input::placeholder {
    color: #64748b !important;
}

/* === BUTTONS IN INPUT AREA === */
.tools-btn-desktop,
.mobile-btn,
.mic-btn-desktop {
    flex-shrink: 0 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
    border: none !important;
    background: #2C5F7F !important;
    color: #FFFFFF !important;
    font-size: 18px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.tools-btn-desktop:hover,
.mobile-btn:hover,
.mic-btn-desktop:hover {
    background: #0d1f3c !important;
    border-color: #2C5F7F !important;
}

.send-button {
    flex-shrink: 0 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
    border: none !important;
    background: #2C5F7F !important;
    background-image: none !important;
    color: #0f172a !important;
    font-size: 18px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.send-button:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 4px 15px rgba(30, 136, 168, 0.3) !important;
}

/* === MOBILE MENU (opens upward) === */
#mobileMenu {
    position: fixed !important;
    bottom: 80px !important;
    left: 24px !important;
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    border-radius: 12px !important;
    padding: 8px !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.3) !important;
    z-index: 1000 !important;
}

/* === RESPONSIVE - MOBILE === */
@media (max-width: 768px) {
    .sidebar {
        position: fixed !important;
        left: -280px !important;
        top: 0 !important;
        height: 100vh !important;
        z-index: 1000 !important;
        transition: left 0.3s ease !important;
    }

    .sidebar.open {
        left: 0 !important;
    }

    .main-content {
        margin-left: 0 !important;
        width: 100vw !important;
    }

    .header {
        padding: 12px 16px !important;
    }

    .messages,
    #messagesContainer {
        padding: 16px !important;
    }

    .input-area {
        padding: 12px 16px !important;
        gap: 8px !important;
    }

    .message-input {
        padding: 12px 14px !important;
        font-size: 16px !important; /* Prevent zoom on iOS */
    }

    .tools-btn-desktop,
    .mobile-btn,
    .mic-btn-desktop,
    .send-button {
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
    }

    #mobileMenu {
        left: 16px !important;
        bottom: 70px !important;
    }

    .message {
        max-width: 90% !important;
    }

    .project-line,
    .chat-line {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }
}

/* === SAFE AREA (for notched phones) === */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .input-area {
        padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    }
}

/* === SCROLLBAR STYLING === */
.messages::-webkit-scrollbar,
#messagesContainer::-webkit-scrollbar {
    width: 6px !important;
}

.messages::-webkit-scrollbar-track,
#messagesContainer::-webkit-scrollbar-track {
    background: transparent !important;
}

.messages::-webkit-scrollbar-thumb,
#messagesContainer::-webkit-scrollbar-thumb {
    background: #334155 !important;
    border-radius: 3px !important;
}

.messages::-webkit-scrollbar-thumb:hover,
#messagesContainer::-webkit-scrollbar-thumb:hover {
    background: #0d1f3c !important;
}

/* === REMOVE ANY EXTRA SPACING === */
.chat-container::after,
.main-content::after,
.app-container::after {
    display: none !important;
    content: none !important;
}

/* ============================================
   URGENT FIX: Layout Issues Post-Change
   ============================================ */

/* === FIX 1: Message text truncation === */
.message,
.message.ai,
.message.user {
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 85% !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
}

.message.ai {
    align-self: flex-start !important;
    margin-right: auto !important;
}

.message.user {
    align-self: flex-end !important;
    margin-left: auto !important;
}

/* === FIX 2: Tools button "+" visibility === */
.tools-btn-desktop {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    left: 0 !important;
    z-index: 10 !important;
    flex-shrink: 0 !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 10px !important;
    border: 1px solid #334155 !important;
    background: #1e293b !important;
    color: #2C5F7F !important;
    font-size: 20px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    align-items: center !important;
    justify-content: center !important;
}

.tools-btn-desktop:hover {
    background: #0d1f3c !important;
    border-color: #2C5F7F !important;
}

/* === FIX 3: Remove dark zone below input === */
html {
    height: 100% !important;
    overflow: hidden !important;
}

body {
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #0a1628 !important;
}

.app-container {
    height: 100vh !important;
    height: 100dvh !important; /* Dynamic viewport for mobile */
    overflow: hidden !important;
}

.main-content {
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
}

/* Ensure nothing appears after input-area */
.input-area {
    margin-bottom: 0 !important;
    padding-bottom: 16px !important;
}

/* Hide any elements after input-area */
.chat-container > .input-area ~ * {
    display: none !important;
}

/* === FIX 4: Remove blue bar between messages and input === */
.messages,
#messagesContainer {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    background: #0d1f3c !important;
}

.chat-container {
    background: #0d1f3c !important;
    gap: 0 !important;
}

.input-area {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-top: 0 !important;
    background: #0d1929 !important;
}

/* === FIX 5: Input area proper layout === */
.input-area {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* === FIX 6: Message input field === */
.message-input {
    flex: 1 !important;
    min-width: 0 !important;
    order: 0 !important;
}

/* === FIX 7: Button order in input area === */
.tools-btn-desktop {
    order: -1 !important; /* First */
}

.mic-btn-desktop,
.mobile-btn.mic-btn-desktop {
    order: 1 !important;
}

.send-button {
    order: 2 !important; /* Last */
}

/* === FIX 8: Hide mic timer when not recording === */
.mic-timer {
    display: none;
}

.mic-timer.active {
    display: block !important;
}

/* === FIX 9: Input side indicator === */
.input-side-indicator {
    position: absolute !important;
    display: none !important;
}

/* === Mobile fixes === */
@media (max-width: 768px) {
    .tools-btn-desktop {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        font-size: 18px !important;
    }

    .input-area {
        padding: 12px 16px !important;
        gap: 8px !important;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .message {
        max-width: 90% !important;
    }
}

/* ============================================
   DEFINITIVE LAYOUT FIX
   High specificity selectors to override all
   ============================================ */

/* === FULL HEIGHT CHAIN === */
html,
body,
body.radiance-theme,
body.radiance9-theme {
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
    min-height: 100% !important;
    overflow: hidden !important;
    background: #0a1628 !important;
}

/* === APP CONTAINER === */
body .app-container,
body #appContainer,
div.app-container {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
    background: #0a1628 !important;
}

/* === MAIN CONTENT === */
body .app-container .main-content,
div.app-container div.main-content,
.main-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    height: 100dvh !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #0d1f3c !important;
}

/* === HEADER === */
body .main-content .header,
div.main-content div.header {
    flex-shrink: 0 !important;
    width: 100% !important;
    padding: 16px 20px !important;
    margin: 0 !important;
    background: #0d1929 !important;
    border-bottom: none !important;
    box-sizing: border-box !important;
}

/* === CHAT CONTAINER === */
body .main-content .chat-container,
div.main-content div.chat-container {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: #0d1f3c !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* === MESSAGES CONTAINER === */
body .chat-container .messages,
body .chat-container #messagesContainer,
div.chat-container div.messages,
div#messagesContainer {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 12px 16px !important;  /* optimizado móvil */
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #0d1f3c !important;
    box-sizing: border-box !important;
}

/* === MESSAGE BUBBLES - PREVENT TRUNCATION === */
body .messages .message,
body #messagesContainer .message,
div.messages div.message,
.message.ai,
.message.user {
    display: block !important;
    width: auto !important;
    max-width: 85% !important;
    min-width: 0 !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    overflow: visible !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
    text-overflow: unset !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
}

body .messages .message.ai,
div.messages div.message.ai {
    align-self: flex-start !important;
    margin-right: auto !important;
    margin-left: 0 !important;
    background: #0d1f3c !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: #f8fafc !important;
}

body .messages .message.user,
div.messages div.message.user {
    align-self: flex-end !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    background: #1ABC9C !important;
    background-image: none !important;
    color: #FFFFFF !important;
}

/* === INPUT AREA === */
body .chat-container .input-area,
div.chat-container div.input-area {
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px 20px !important;
    margin: 0 !important;
    background: #0d1929 !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* === TOOLS BUTTON (+) - FORCE VISIBLE === */
body .input-area .tools-btn-desktop,
div.input-area button.tools-btn-desktop {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
    order: -1 !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 10px !important;
    border: none !important;
    background: #2C5F7F !important;
    color: #FFFFFF !important;
    font-size: 22px !important;
    font-weight: bold !important;
    line-height: 1 !important;
    cursor: pointer !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    left: 0 !important;
    z-index: 10 !important;
}

body .input-area .tools-btn-desktop:hover {
    background: #0d1f3c !important;
    border-color: #FFFFFF !important;
}

/* === MESSAGE INPUT === */
body .input-area .message-input,
div.input-area textarea.message-input {
    flex: 1 !important;
    min-width: 0 !important;
    order: 0 !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    border-radius: 12px !important;
    color: #f8fafc !important;
    font-size: 15px !important;
    resize: none !important;
    outline: none !important;
    box-sizing: border-box !important;
}

/* === MIC BUTTON === */
body .input-area .mic-btn-desktop,
body .input-area .mobile-btn.mic-btn-desktop {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
    order: 1 !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 10px !important;
    border: none !important;
    background: #2C5F7F !important;
    color: #FFFFFF !important;
    font-size: 18px !important;
    cursor: pointer !important;
    align-items: center !important;
    justify-content: center !important;
}

/* === SEND BUTTON === */
body .input-area .send-button {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
    order: 2 !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 10px !important;
    border: none !important;
    background: #2C5F7F !important;
    background-image: none !important;
    color: #0f172a !important;
    font-size: 18px !important;
    cursor: pointer !important;
    align-items: center !important;
    justify-content: center !important;
}

/* === HIDE EXTRA ELEMENTS === */
.input-side-indicator,
.mic-timer:not(.active) {
    display: none !important;
}

/* === MOBILE MENU === */
#mobileMenu {
    position: fixed !important;
    bottom: 80px !important;
    left: 24px !important;
    z-index: 1000 !important;
}

/* === MOBILE RESPONSIVE === */
@media (max-width: 768px) {
    body .main-content .header {
        padding: 12px 16px !important;
    }

    body .chat-container .messages,
    body #messagesContainer {
        padding: 16px !important;
    }

    body .chat-container .input-area {
        padding: 12px 16px !important;
        gap: 8px !important;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body .input-area .tools-btn-desktop,
    body .input-area .mic-btn-desktop,
    body .input-area .send-button {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        font-size: 18px !important;
    }

    body .input-area .message-input {
        font-size: 16px !important;
        padding: 12px 14px !important;
    }

    body .messages .message {
        max-width: 90% !important;
    }

    #mobileMenu {
        left: 16px !important;
        bottom: 70px !important;
    }
}

/* === SCROLLBAR === */
.messages::-webkit-scrollbar,
#messagesContainer::-webkit-scrollbar {
    width: 6px !important;
}

.messages::-webkit-scrollbar-thumb,
#messagesContainer::-webkit-scrollbar-thumb {
    background: #334155 !important;
    border-radius: 3px !important;
}

/* Fix: Processing overlay hidden by default */
.processing-overlay {
    display: none \!important;
    position: fixed \!important;
    top: 0 \!important;
    left: 0 \!important;
    width: 100% \!important;
    height: 100% \!important;
    z-index: 9999 \!important;
}
.processing-overlay.active {
    display: flex \!important;
    justify-content: center \!important;
    align-items: center \!important;
}


/* === OVERRIDE: Desktop button SVG icons === */
.tools-btn-desktop svg,
.send-button svg,
.mic-btn-desktop svg {
    stroke: #FFFFFF !important;
    fill: none !important;
    width: 20px !important;
    height: 20px !important;
}

/* === OVERRIDE: Desktop buttons unified colors === */
.tools-btn-desktop {
    background: #2C5F7F !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 12px !important;
}

.tools-btn-desktop:hover {
    background: #0d1f3c !important;
}

.send-button,
.btn-send {
    background: #2C5F7F !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 12px !important;
}

.send-button:hover,
.btn-send:hover {
    background: #0d1f3c !important;
    transform: none !important;
    box-shadow: none !important;
}

/* === SIDEBAR SVG ICONS === */
.section-title svg,
.sidebar-icon svg,
.sidebar-item svg {
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important;
    fill: none !important;
    vertical-align: middle !important;
    margin-right: 6px !important;
    flex-shrink: 0 !important;
}

.section-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.sidebar-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* === MESSAGE BUBBLE COLORS (added separately) === */
.message.ai {
    background: #5A8FB0 !important;
    color: #FFFFFF !important;
}
.message.user {
    background: #1ABC9C !important;
    color: #FFFFFF !important;
}
/* === END MESSAGE BUBBLE COLORS === */