/* 
 * Chat-Config - Variabili CSS centralizzate per l'interfaccia chat
 * @copyright [2024] [chat-ida/saintchannel]
 * @author [Dario Santocanale]
 * @version 1.0.1
 * Questo file contiene tutte le variabili CSS condivise tra i vari componenti dell'interfaccia chat.
 * Centralizzare le variabili in questo file permette una gestione coerente degli stili in tutta l'applicazione.
 */

.chat-container {
    /* ======================================
       1. COLORI BASE
       ====================================== */
    /* Variabili Bootstrap con fallback ai colori originali */
    --chat-primary: var(--bs-success, #00FF9D);
    --chat-primary-light: rgba(var(--bs-success-rgb, 0, 255, 157), 0.15);
    --chat-primary-hover: var(--bs-success-dark, #00e68c);
    
    --chat-bg: var(--bs-white, #FFFFFF);
    --chat-bg-dark: var(--bs-light, #F0F0F0);
    --chat-bg-light: var(--bs-gray-100, #FAFAFA);
    --chat-bg-hover: rgba(var(--bs-dark-rgb, 0, 0, 0), 0.05);
    --chat-bg-active: rgba(var(--bs-dark-rgb, 0, 0, 0), 0.08);
    
    --chat-border: var(--bs-gray-300, #E5E7EB);
    --chat-border-light: rgba(var(--bs-gray-300-rgb, 229, 231, 235), 0.5);
    
    --chat-text: var(--bs-gray-800, #333333);
    --chat-text-muted: var(--bs-gray-600, #6B7280);
    
    --chat-shadow-color: rgba(var(--bs-dark-rgb, 0, 0, 0), 0.1);
    
    /* ======================================
       2. DIMENSIONI E SPAZI
       ====================================== */
    /* Dimensioni container */
    --chat-container-height: 600px;
    --chat-container-min-height: 400px;
    --chat-header-height: 56px;
    --chat-tabs-height: 40px;
    --chat-tabs-content-height: 200px;
    --chat-sidebar-width: 280px;
    --chat-dropdown-width: 220px;
    --chat-dropdown-mobile-width: 180px;
    --chat-input-height: 30px;
    /* Calcoliamo dinamicamente l'altezza del componente di input 
       basandoci su padding verticale (sopra e sotto) + altezza di base + 1px per il bordo */
    --chat-height-component: calc(var(--chat-input-height) + (var(--chat-input-padding-y) * 2) + 1px);
    
    /* Spaziature */
    --chat-spacing-xs: 4px;
    --chat-spacing-sm: 8px;
    --chat-spacing-md: 12px;
    --chat-spacing-lg: 16px;
    --chat-spacing-xl: 24px;
    
    /* Padding specifici per l'input */
    --chat-input-padding-x: 16px;
    --chat-input-padding-y: 12px;
    --chat-input-mobile-padding-x: 12px;
    --chat-input-mobile-padding-y: 10px;
    
    /* Distanze tra messaggi */
    --chat-message-spacing: 15px;
    --chat-message-gap: 15px;
    
    /* ======================================
       3. TIPOGRAFIA
       ====================================== */
    --chat-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --chat-font-size: 14px;
    --chat-font-size-xs: 11px;
    --chat-font-size-sm: 12px;
    --chat-font-size-lg: 16px;
    --chat-font-size-xl: 18px;
    
    /* ======================================
       4. BORDI E RAGGI DI CURVATURA
       ====================================== */
    --chat-border-radius: 6px;
    --chat-border-radius-lg: 8px;
    --chat-border-radius-xl: 12px;
    --chat-button-radius: 6px;
    
    /* ======================================
       5. EFFETTI VISUALI
       ====================================== */
    /* Ombre */
    --chat-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    --chat-box-shadow-light: 0 2px 8px rgba(0, 0, 0, 0.05);
    --chat-box-shadow-top: 0 -4px 12px rgba(0, 0, 0, 0.1);
    --chat-box-shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.12);
    --chat-box-shadow-input: 0 1px 3px rgba(0, 0, 0, 0.08);
    --chat-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.05);
    
    /* Transizioni */
    --chat-transition: all 0.2s ease-out;
    --chat-transition-fast: all 0.15s ease-out;
    
    /* ======================================
       6. Z-INDEX STACKING ORDER
       ====================================== */
    --chat-zindex-default: 1;
    --chat-zindex-dropdown: 1000;
    --chat-zindex-fixed: 1030;
    --chat-zindex-popover: 1060;
    --chat-zindex-modal: 1080;
    --chat-zindex-fullscreen: 1100;
    --chat-zindex-spinner: 9999;           /* Z-index molto alto per lo spinner di caricamento */
    
    /* ======================================
       7. BOTTONI E CONTROLLI
       ====================================== */
    --chat-button-size: 38px;
    --chat-button-mobile-size: 34px;
    --chat-button-icon-size: 20px;
    --chat-button-icon-mobile-size: 18px;
    
    /* ======================================
       8. STILI MESSAGGI
       ====================================== */
    --chat-message-user-bg: var(--chat-primary-light);
    --chat-message-user-text: var(--chat-text);
    --chat-message-user-border: var(--chat-primary);
    
    --chat-message-assistant-bg: var(--chat-bg-light);
    --chat-message-assistant-text: var(--chat-text);
    --chat-message-assistant-border: var(--chat-border);
    
    --chat-message-system-bg: rgba(229, 231, 235, 0.15);
    --chat-message-system-text: var(--chat-text-muted);
    --chat-message-system-border: var(--chat-border-light);
    
    /* ======================================
       9. SPINNER DI CARICAMENTO
       ====================================== */
    --chat-spinner-size: 40px;                    /* Dimensione spinner */
    --chat-spinner-border-width: 4px;            /* Spessore bordo spinner */
    --chat-spinner-color: var(--bs-success, #00FF9D);      /* Colore spinner */
    --chat-spinner-overlay-bg: var(--bs-white, #FFFFFF);   /* Sfondo overlay */
    --chat-spinner-overlay-opacity: 0.85;        /* Opacità overlay */
}

/* ======================================
   9. DARK MODE
   ====================================== */
.chat-container.chat-dark-mode {
    --chat-primary: #00FF9D;
    --chat-primary-light: rgba(0, 255, 157, 0.15);
    --chat-primary-hover: #00e68c;
    
    --chat-bg: #1F2937;
    --chat-bg-dark: #111827;
    --chat-bg-light: #2D3748;
    --chat-bg-hover: rgba(255, 255, 255, 0.05);
    --chat-bg-active: rgba(255, 255, 255, 0.08);
    
    --chat-border: #374151;
    --chat-border-light: rgba(55, 65, 81, 0.5);
    
    --chat-text: #F3F4F6;
    --chat-text-muted: #9CA3AF;
    
    --chat-shadow-color: rgba(0, 0, 0, 0.3);
    
    --chat-message-user-bg: rgba(0, 255, 157, 0.1);
    --chat-message-user-text: #F3F4F6;
    --chat-message-user-border: var(--chat-primary);
    
    --chat-message-assistant-bg: #2D3748;
    --chat-message-assistant-text: #F3F4F6;
    --chat-message-assistant-border: #374151;
    
    --chat-message-system-bg: rgba(55, 65, 81, 0.5);
    --chat-message-system-text: #D1D5DB;
    --chat-message-system-border: #4B5563;
    
    --chat-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    --chat-box-shadow-light: 0 2px 8px rgba(0, 0, 0, 0.2);


    /* Ombra del menu a discesa in dark mode */
    
    --chat-text: #ffffff;
    --chat-text-muted: #888b90;
    
    /* Spinner in dark mode */
    --chat-spinner-overlay-bg: var(--bs-gray-900, #111827);
}

/* ======================================
   10. MEDIA QUERIES PER VARIABILI RESPONSIVE
   ====================================== */
@media (max-width: 767px) {
    .chat-container {
        /* Riduzione di alcuni spazi su mobile */
        --chat-sidebar-width: 260px;
    }
}

/* Media query per schermi più piccoli */
@media (max-width: 480px) {
    .chat-container {
        --chat-font-size: 13px;
        --chat-message-spacing: 10px;
        --chat-message-gap: 10px;
    }
}

/* ======================================
   11. VARIABILI PER COMPATIBLITÀ BROWSER
   ====================================== */
@supports not (height: 100svh) {
    .chat-container {
        --chat-fullscreen-height: 100vh;
    }
}

@supports (height: 100svh) {
    .chat-container {
        --chat-fullscreen-height: 100svh;
    }
}