/* ========================================
   Chatbot AI Pro - Theme System v2.0.2
   Sistema de Temas Claro/Oscuro - COMPLETO
   ======================================== */

/* ==========================================
   TEMA CLARO (Light Mode) - DEFAULT
   ========================================== */
:root,
.claude-pro-theme-light {
    /* Colores de fondo */
    --claude-bg-window: #ffffff;
    --claude-bg-messages: #f8fafc;
    --claude-bg-input-area: #ffffff;
    
    /* Colores de texto */
    --claude-text-primary: #1e293b;
    --claude-text-secondary: #64748b;
    --claude-text-tertiary: #94a3b8;
    
    /* Mensajes del Bot */
    --claude-bot-message-bg: #ffffff;
    --claude-bot-message-text: #1e293b;
    --claude-bot-message-border: rgba(0, 0, 0, 0.08);
    --claude-bot-message-shadow: rgba(0, 0, 0, 0.08);
    
    /* Mensajes del Usuario */
    --claude-user-message-bg: #10b981;
    --claude-user-message-bg-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --claude-user-message-text: #ffffff;
    --claude-user-message-shadow: rgba(16, 185, 129, 0.25);
    
    /* Avatar del Bot */
    --claude-bot-avatar-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --claude-bot-avatar-text: #ffffff;
    
    /* Avatar del Usuario */
    --claude-user-avatar-bg: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --claude-user-avatar-text: #ffffff;
    
    /* Scrollbar */
    --claude-scrollbar-thumb: #cbd5e1;
    --claude-scrollbar-thumb-hover: #94a3b8;
    --claude-scrollbar-track: transparent;
    
    /* Input Container */
    --claude-input-container-bg: #ffffff;
    --claude-input-container-border: #e2e8f0;
    
    /* Input de texto */
    --claude-input-bg: #ffffff;
    --claude-input-text: #1e293b;
    --claude-input-placeholder: #94a3b8;
    --claude-input-border: #e2e8f0;
    --claude-input-border-focus: #10b981;
    --claude-input-shadow-focus: rgba(16, 185, 129, 0.1);
    
    /* Botones */
    --claude-button-send-bg: #10b981;
    --claude-button-send-bg-hover: #059669;
    --claude-button-send-text: #ffffff;
    --claude-button-send-shadow: rgba(16, 185, 129, 0.3);
    
    /* Typing indicator */
    --claude-typing-dot: #94a3b8;
    
    /* Bordes y divisores */
    --claude-border-color: #e2e8f0;
    --claude-divider-color: rgba(0, 0, 0, 0.08);
    
    /* Sombras */
    --claude-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --claude-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);
    --claude-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.15);
    
    /* Overlays */
    --claude-overlay-bg: rgba(0, 0, 0, 0.05);
    --claude-overlay-hover: rgba(0, 0, 0, 0.08);
    
    /* Header (se mantiene con gradiente del color primario) */
    --claude-header-bg: linear-gradient(135deg, var(--claude-color-primary, #10b981) 0%, var(--claude-color-primary-dark, #059669) 100%);
    --claude-header-text: #ffffff;
    --claude-header-close-bg: rgba(255, 255, 255, 0.15);
    --claude-header-close-hover: rgba(255, 255, 255, 0.25);
    
    /* Estados */
    --claude-badge-online: #10b981;
    --claude-badge-border: #ffffff;
    
    /* Productos WooCommerce */
    --claude-product-bg: #ffffff;
    --claude-product-border: #e2e8f0;
    --claude-product-title: #1e293b;
    --claude-product-price: #10b981;
    --claude-product-hover-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

    /* Handoff card */
    --claude-handoff-bg: #f5f3ff;
    --claude-handoff-border: #ddd6fe;
    --claude-handoff-text: #4c1d95;
    --claude-handoff-btn-bg: #7c3aed;
    --claude-handoff-btn-shadow: rgba(124, 58, 237, 0.3);
}

/* ==========================================
   TEMA OSCURO (Dark Mode)
   ========================================== */
.claude-pro-theme-dark {
    /* Colores de fondo */
    --claude-bg-window: #1e293b;
    --claude-bg-messages: #0f172a;
    --claude-bg-input-area: #1e293b;
    
    /* Colores de texto */
    --claude-text-primary: #f1f5f9;
    --claude-text-secondary: #cbd5e1;
    --claude-text-tertiary: #94a3b8;
    
    /* Mensajes del Bot */
    --claude-bot-message-bg: #334155;
    --claude-bot-message-text: #f1f5f9;
    --claude-bot-message-border: rgba(255, 255, 255, 0.08);
    --claude-bot-message-shadow: rgba(0, 0, 0, 0.3);
    
    /* Mensajes del Usuario */
    --claude-user-message-bg: #10b981;
    --claude-user-message-bg-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --claude-user-message-text: #ffffff;
    --claude-user-message-shadow: rgba(16, 185, 129, 0.4);
    
    /* Avatar del Bot */
    --claude-bot-avatar-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --claude-bot-avatar-text: #ffffff;
    
    /* Avatar del Usuario */
    --claude-user-avatar-bg: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --claude-user-avatar-text: #ffffff;
    
    /* Scrollbar */
    --claude-scrollbar-thumb: #475569;
    --claude-scrollbar-thumb-hover: #64748b;
    --claude-scrollbar-track: transparent;
    
    /* Input Container */
    --claude-input-container-bg: #1e293b;
    --claude-input-container-border: #334155;
    
    /* Input de texto */
    --claude-input-bg: #334155;
    --claude-input-text: #f1f5f9;
    --claude-input-placeholder: #64748b;
    --claude-input-border: #475569;
    --claude-input-border-focus: #10b981;
    --claude-input-shadow-focus: rgba(16, 185, 129, 0.2);
    
    /* Botones */
    --claude-button-send-bg: #10b981;
    --claude-button-send-bg-hover: #059669;
    --claude-button-send-text: #ffffff;
    --claude-button-send-shadow: rgba(16, 185, 129, 0.4);
    
    /* Typing indicator */
    --claude-typing-dot: #64748b;
    
    /* Bordes y divisores */
    --claude-border-color: #334155;
    --claude-divider-color: rgba(255, 255, 255, 0.08);
    
    /* Sombras */
    --claude-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --claude-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
    --claude-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.6);
    
    /* Overlays */
    --claude-overlay-bg: rgba(255, 255, 255, 0.05);
    --claude-overlay-hover: rgba(255, 255, 255, 0.08);
    
    /* Header (se mantiene con gradiente del color primario) */
    --claude-header-bg: linear-gradient(135deg, var(--claude-color-primary, #10b981) 0%, var(--claude-color-primary-dark, #059669) 100%);
    --claude-header-text: #ffffff;
    --claude-header-close-bg: rgba(255, 255, 255, 0.15);
    --claude-header-close-hover: rgba(255, 255, 255, 0.25);
    
    /* Estados */
    --claude-badge-online: #10b981;
    --claude-badge-border: #1e293b;
    
    /* Productos WooCommerce */
    --claude-product-bg: #334155;
    --claude-product-border: #475569;
    --claude-product-title: #f1f5f9;
    --claude-product-price: #34d399;
    --claude-product-hover-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);

    /* Handoff card */
    --claude-handoff-bg: #2e1065;
    --claude-handoff-border: #5b21b6;
    --claude-handoff-text: #e9d5ff;
    --claude-handoff-btn-bg: #7c3aed;
    --claude-handoff-btn-shadow: rgba(124, 58, 237, 0.5);
}

/* ==========================================
   APLICACIÓN DE TEMAS - TODOS LOS ELEMENTOS
   ========================================== */

/* Ventana de Chat */
.claude-pro-chat-window {
    background: var(--claude-bg-window) !important;
}

/* Área de Mensajes */
.claude-pro-chat-messages {
    background: var(--claude-bg-messages) !important;
}

.claude-pro-chat-messages::-webkit-scrollbar-thumb {
    background: var(--claude-scrollbar-thumb) !important;
}

.claude-pro-chat-messages::-webkit-scrollbar-thumb:hover {
    background: var(--claude-scrollbar-thumb-hover) !important;
}

.claude-pro-chat-messages::-webkit-scrollbar-track {
    background: var(--claude-scrollbar-track) !important;
}

/* Mensajes del Bot */
.claude-pro-message.assistant .claude-pro-message-content {
    background: var(--claude-bot-message-bg) !important;
    color: var(--claude-bot-message-text) !important;
    border-color: var(--claude-bot-message-border) !important;
    box-shadow: 0 2px 8px var(--claude-bot-message-shadow) !important;
}

/* CRÍTICO: Todo el texto dentro del mensaje del bot */
.claude-pro-message.assistant .claude-pro-message-content *:not(a) {
    color: var(--claude-bot-message-text) !important;
}

.claude-pro-message.assistant .claude-pro-message-content h3,
.claude-pro-message.assistant .claude-pro-message-content h4,
.claude-pro-message.assistant .claude-pro-message-content p,
.claude-pro-message.assistant .claude-pro-message-content span,
.claude-pro-message.assistant .claude-pro-message-content div,
.claude-pro-message.assistant .claude-pro-message-content strong,
.claude-pro-message.assistant .claude-pro-message-content li {
    color: var(--claude-bot-message-text) !important;
}

/* Enlaces en mensajes del bot */
.claude-pro-message.assistant .claude-pro-message-content a {
    color: #10b981 !important;
    text-decoration: underline;
}

.claude-pro-theme-dark .claude-pro-message.assistant .claude-pro-message-content a {
    color: #34d399 !important;
}

/* Mensajes del Usuario */
.claude-pro-message.user .claude-pro-message-content {
    background: var(--claude-user-message-bg-gradient) !important;
    color: var(--claude-user-message-text) !important;
    box-shadow: 0 4px 12px var(--claude-user-message-shadow) !important;
}

.claude-pro-message.user .claude-pro-message-content *{
    color: #ffffff !important;
}

/* Avatar del Bot */
.claude-pro-message.assistant .claude-pro-message-avatar {
    background: var(--claude-bot-avatar-bg) !important;
    color: var(--claude-bot-avatar-text) !important;
}

/* Avatar del Usuario */
.claude-pro-message.user .claude-pro-message-avatar {
    background: var(--claude-user-avatar-bg) !important;
    color: var(--claude-user-avatar-text) !important;
}

/* Input Area Container - CRÍTICO */
.claude-pro-chat-input-area,
.claude-pro-chat-input-wrapper {
    background: var(--claude-input-container-bg) !important;
    border-top-color: var(--claude-input-container-border) !important;
}

/* Input de Texto - CRÍTICO */
.claude-pro-chat-input {
    background: var(--claude-input-bg) !important;
    color: var(--claude-input-text) !important;
    border-color: var(--claude-input-border) !important;
}

.claude-pro-chat-input::placeholder {
    color: var(--claude-input-placeholder) !important;
}

.claude-pro-chat-input:focus {
    border-color: var(--claude-input-border-focus) !important;
    box-shadow: 0 0 0 3px var(--claude-input-shadow-focus) !important;
}

/* Botón de Enviar */
.claude-pro-chat-send {
    background: var(--claude-button-send-bg) !important;
    color: var(--claude-button-send-text) !important;
    box-shadow: 0 4px 12px var(--claude-button-send-shadow) !important;
}

.claude-pro-chat-send:hover {
    background: var(--claude-button-send-bg-hover) !important;
}

/* Typing Indicator */
.claude-pro-typing-dot {
    background: var(--claude-typing-dot) !important;
}

/* Header */
.claude-pro-chat-header {
    background: var(--claude-header-bg) !important;
    color: var(--claude-header-text) !important;
}

.claude-pro-chat-close {
    background: var(--claude-header-close-bg) !important;
}

.claude-pro-chat-close:hover {
    background: var(--claude-header-close-hover) !important;
}

/* Badge Online */
.claude-pro-chat-button::after {
    border-color: var(--claude-badge-border) !important;
}

/* Productos WooCommerce - CRÍTICO */
.claude-pro-product-card {
    background: var(--claude-product-bg) !important;
    border-color: var(--claude-product-border) !important;
    box-shadow: var(--claude-shadow-sm) !important;
}

.claude-pro-product-card:hover {
    box-shadow: var(--claude-product-hover-shadow) !important;
}

.claude-pro-product-title {
    color: var(--claude-product-title) !important;
}

.claude-pro-product-price {
    color: var(--claude-product-price) !important;
}

.claude-pro-product-stock,
.claude-pro-product-meta {
    color: var(--claude-text-secondary) !important;
}

/* ==========================================
   TRANSICIONES SUAVES ENTRE TEMAS
   ========================================== */
.claude-pro-chat-window,
.claude-pro-chat-messages,
.claude-pro-message-content,
.claude-pro-chat-input,
.claude-pro-chat-input-area,
.claude-pro-chat-input-wrapper,
.claude-pro-product-card {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease,
                box-shadow 0.3s ease !important;
}

/* ==========================================
   RESPONSIVE - MANTIENE TEMAS
   Las variables CSS heredan correctamente a todos los breakpoints
   gracias al sistema :root / .claude-pro-theme-light / .claude-pro-theme-dark.
   No se necesitan overrides adicionales por breakpoint.
   ========================================== */

/* ==========================================
   OVERRIDE CRÍTICOS PARA FORZAR TEMAS
   ========================================== */

/* Forzar colores en modo claro */
.claude-pro-theme-light .claude-pro-chat-input-area {
    background: #ffffff !important;
}

.claude-pro-theme-light .claude-pro-chat-input {
    background: #ffffff !important;
    color: #1e293b !important;
}

.claude-pro-theme-light .claude-pro-message.assistant .claude-pro-message-content {
    background: #ffffff !important;
    color: #1e293b !important;
}

/* PRODUCTOS WOOCOMMERCE - MODO CLARO */
.claude-pro-theme-light .claude-pro-product-card {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}

.claude-pro-theme-light .claude-pro-product-name {
    color: #1e293b !important;
}

.claude-pro-theme-light .claude-pro-product-price {
    color: #10b981 !important;
}

.claude-pro-theme-light .claude-pro-product-old-price {
    color: #94a3b8 !important;
}

.claude-pro-theme-light .claude-pro-product-card img {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

/* Forzar colores en modo oscuro */
.claude-pro-theme-dark .claude-pro-chat-input-area {
    background: #1e293b !important;
}

.claude-pro-theme-dark .claude-pro-chat-input {
    background: #334155 !important;
    color: #f1f5f9 !important;
}

.claude-pro-theme-dark .claude-pro-message.assistant .claude-pro-message-content {
    background: #334155 !important;
    color: #f1f5f9 !important;
}

/* PRODUCTOS WOOCOMMERCE - MODO OSCURO */
.claude-pro-theme-dark .claude-pro-product-card {
    background: #334155 !important;
    border-color: #475569 !important;
}

.claude-pro-theme-dark .claude-pro-product-name {
    color: #f1f5f9 !important;
}

.claude-pro-theme-dark .claude-pro-product-price {
    color: #34d399 !important;
}

.claude-pro-theme-dark .claude-pro-product-old-price {
    color: #94a3b8 !important;
}

.claude-pro-theme-dark .claude-pro-product-card img {
    background: #1e293b !important;
    border-color: #475569 !important;
}