/* File: static/css/neural-bg.css - VERSIONE "GLASS UI" COMPLETA */

/* 1. Il Canvas sta fisso sullo sfondo */
#neural-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    background-color: #0f0f12; /* Sfondo molto scuro per far risaltare i nodi */
}

body.neural-bg-enabled #neural-canvas {
    opacity: 1;
}

/* 
   =========================================================================
   2. TRASPARENZE STRUTTURALI (Sfondi trasparenti per vedere il canvas)
   =========================================================================
*/

body.neural-bg-enabled,
body.neural-bg-enabled .app-layout,
body.neural-bg-enabled #chat-container,
body.neural-bg-enabled .page-container {
    background: transparent !important;
    background-color: transparent !important;
}

/* 
   =========================================================================
   3. EFFETTO VETRO (GLASSMORPHISM) PER SIDEBAR E HEADER
   =========================================================================
*/

/* Sidebar */
body.neural-bg-enabled #sidebar {
    background-color: rgba(20, 20, 25, 0.75) !important; /* Scuro semi-trasparente */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 2;
}

/* Header */
body.neural-bg-enabled .main-header,
body.neural-bg-enabled #header {
    background-color: rgba(20, 20, 25, 0.75) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 2;
}

/* Workspace Panel (Destra) */
body.neural-bg-enabled #project-files-panel {
    background-color: rgba(20, 20, 25, 0.85) !important;
    backdrop-filter: blur(15px);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 2;
}

/* 
   =========================================================================
   4. STILE BOLLE CHAT COERENTE (VETRO & TECH)
   =========================================================================
*/

/* Stile base per tutti i messaggi quando Neural è attivo */
body.neural-bg-enabled .message {
    backdrop-filter: blur(5px); /* Leggera sfocatura dietro la bolla */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Ombra morbida per profondità */
    border: 1px solid transparent; /* Predispone il bordo */
}

/* Assistente (Grigio/Vetro Scuro) */
body.neural-bg-enabled .assistant-message {
    background-color: rgba(40, 44, 52, 0.7) !important; /* Vetro scuro */
    border-color: rgba(255, 255, 255, 0.08); /* Bordo sottile chiaro */
    color: #e0e0e0;
}

/* Utente (Colore Accento/Vetro Colorato) */
body.neural-bg-enabled .user-message {
    /* Usa il colore accento (blu/verde/ecc) ma lo rende semi-trasparente */
    background-color: rgba(var(--accent-color-rgb), 0.75) !important; 
    border-color: rgba(255, 255, 255, 0.2); /* Bordo più evidente per l'utente */
    color: white;
}

/* Tool e Pensieri (Stile HUD Tecnico) */
body.neural-bg-enabled .grouped-process-bubble details {
    background-color: rgba(0, 0, 0, 0.4) !important; /* Più scuro per i dati tecnici */
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.neural-bg-enabled .grouped-process-bubble summary {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #aaa;
}

body.neural-bg-enabled .process-step {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Evidenziazione codice dentro la chat */
body.neural-bg-enabled .message pre {
    background-color: rgba(0, 0, 0, 0.5) !important; /* Sfondo codice più scuro */
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 
   =========================================================================
   5. AREA INPUT FLUTTUANTE E CENTRATA
   =========================================================================
*/

/* Contenitore Input "Invisibile" */
body.neural-bg-enabled #input-container {
    background-color: rgba(20, 20, 25, 0.85) !important; /* Fondo barra input */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 3;
    
    /* Reset layout per centratura */
    width: 100% !important;
    max-width: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 10px !important;
}

/* L'area di testo vera e propria */
body.neural-bg-enabled #input-area {
    background-color: transparent !important;
    border-top: none !important;
    width: 100%;
    max-width: 1000px !important; /* Mantiene la larghezza della chat */
    box-shadow: none !important;
}

/* La Textarea (Input) */
body.neural-bg-enabled #chat-input {
    background-color: rgba(0, 0, 0, 0.3) !important; /* Input più scuro */
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: white;
}

body.neural-bg-enabled #chat-input:focus {
    background-color: rgba(0, 0, 0, 0.5) !important;
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 15px rgba(var(--accent-color-rgb), 0.2) !important;
}

/* Footer input */
body.neural-bg-enabled #input-footer {
    width: 100%;
    max-width: 1000px !important;
    color: rgba(255, 255, 255, 0.5);
}

/* 
   =========================================================================
   6. ADATTAMENTI TEMA CHIARO (Light Glass Mode)
   =========================================================================
*/

/* Sfondo del canvas in Light Mode (grigio chiarissimo per contrasto) */
html[data-theme='light'] body.neural-bg-enabled #neural-canvas {
    background-color: #f0f2f5; 
}

/* 
   --- SIDEBAR, HEADER E INPUT (Vetro Chiaro) --- 
   Usiamo un bianco con alta trasparenza per l'effetto vetro satinato.
*/
html[data-theme='light'] body.neural-bg-enabled #sidebar,
html[data-theme='light'] body.neural-bg-enabled .main-header,
html[data-theme='light'] body.neural-bg-enabled #header, /* <--- AGGIUNTO QUESTO PER LA BARRA ALTA */
html[data-theme='light'] body.neural-bg-enabled #input-container {
    background-color: rgba(255, 255, 255, 0.65) !important; /* Vetro bianco */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-color: rgba(0, 0, 0, 0.08); /* Bordo sottile grigio */
    color: #333;
}

/* 
   --- WORKSPACE PANEL (Vetro Chiaro) ---
*/
html[data-theme='light'] body.neural-bg-enabled #project-files-panel {
    background-color: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(20px);
    border-left: 1px solid rgba(0, 0, 0, 0.08);
}

/* 
   --- MESSAGGI (Bolle) ---
*/
html[data-theme='light'] body.neural-bg-enabled .assistant-message {
    background-color: rgba(255, 255, 255, 0.85) !important; /* Quasi solido per leggibilità */
    border: 1px solid rgba(0, 0, 0, 0.05);
    color: #1a1a1a;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* Input di testo */
html[data-theme='light'] body.neural-bg-enabled #chat-input {
    background-color: rgba(255, 255, 255, 0.5) !important;
    color: #000;
    border-color: rgba(0,0,0,0.15) !important;
}

html[data-theme='light'] body.neural-bg-enabled #chat-input:focus {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb), 0.15) !important;
}

/*
   --- LINK DELLA NAVBAR IN LIGHT MODE ---
   Devono essere scuri per contrastare col vetro chiaro
*/
html[data-theme='light'] body.neural-bg-enabled .nav-link {
    color: #444 !important;
    font-weight: 500;
}

html[data-theme='light'] body.neural-bg-enabled .nav-link:hover {
    color: var(--accent-color) !important;
    background-color: rgba(0,0,0,0.05); /* Hover leggero */
}

/* Loghi e icone scure */
html[data-theme='light'] body.neural-bg-enabled .logo-icon {
    filter: none; /* Assicurati che i loghi non siano invertiti */
}

/* =========================================================================
   FIX PER PENSIERI NELLA CHAT STANDARD (Blocco singolo)
   ========================================================================= */

/* 1. Il contenitore del pensiero (details) */
body.neural-bg-enabled details.persistent-thought {
    background-color: rgba(0, 0, 0, 0.25) !important; /* Sfondo scuro semi-trasparente */
    border: 1px solid rgba(255, 255, 255, 0.1) !important; /* Bordo sottile */
    border-radius: 8px;
    margin-bottom: 12px; /* Spazio prima della risposta */
    box-shadow: inset 0 0 10px rgba(0,0,0,0.2); /* Profondità interna */
}

/* 2. Il sommario cliccabile "Processo di pensiero" */
body.neural-bg-enabled details.persistent-thought summary {
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: #bbb !important; /* Testo grigio chiaro */
    border: none !important;
    border-bottom: 1px solid transparent !important;
    transition: background-color 0.2s, color 0.2s;
}

body.neural-bg-enabled details.persistent-thought summary:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--accent-color) !important;
}

/* Quando è aperto, aggiungi una linea di separazione sotto il titolo */
body.neural-bg-enabled details.persistent-thought[open] summary {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px 8px 0 0;
}

/* 3. Il contenitore interno del testo */
body.neural-bg-enabled .agent-thoughts-container {
    background-color: transparent !important; /* Rimuovi sfondi grigi solidi */
    border: none !important;
    border-left: 2px solid var(--accent-color) !important; /* Mantieni solo la linea colorata a sinistra */
    color: #ccc !important;
    padding-top: 10px;
}

/* 4. Il testo vero e proprio del pensiero */
body.neural-bg-enabled .clean-json-thought {
    color: #aaa !important; /* Colore testo stile terminale spento */
    font-family: 'SFMono-Regular', Consolas, monospace;
    background-color: transparent !important;
}


/* 
   =========================================================================
   7. EFFETTO LINK "PULSE DATA" (Versione Finale: Neutro a riposo, Tech al tocco)
   =========================================================================
*/

/* --- 1. STATO BASE (A RIPOSO) --- */
body.neural-bg-enabled a:not(.btn):not(.nav-link):not(.user-menu-item) {
    position: relative;
    
    /* FIX: Usa il colore del testo normale, non blu */
    color: var(--text-color); 
    
    text-decoration: none;
    font-weight: 500;
    
    /* Transizione fluida per colore e ombre */
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* --- 2. STATO HOVER (DARK MODE / NEURAL) --- */
body.neural-bg-enabled a:not(.btn):not(.nav-link):not(.user-menu-item):hover {
    /* Al passaggio del mouse, si illumina col colore dell'accento */
    color: var(--accent-color);
    
    /* Glow colorato (bagliore) dietro il testo */
    text-shadow: 0 0 12px rgba(var(--accent-color-rgb), 0.6);
}

/* --- 3. LA LINEA DI ENERGIA (UNDERLINE) --- */
body.neural-bg-enabled a:not(.btn):not(.nav-link):not(.user-menu-item)::after {
    content: '';
    position: absolute;
    bottom: -2px; /* Sotto il testo */
    left: 50%;    /* Parte dal centro */
    width: 0%;    /* Invisibile all'inizio */
    height: 2px;  /* Spessore della linea */
    
    background-color: var(--accent-color);
    
    /* La linea ha il suo bagliore */
    box-shadow: 0 0 8px var(--accent-color); 
    
    /* Animazione di espansione */
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Espansione della linea all'hover */
body.neural-bg-enabled a:not(.btn):not(.nav-link):not(.user-menu-item):hover::after {
    width: 100%;
    left: 0;
}

/* 
   =========================================================================
   8. ADATTAMENTO TEMA CHIARO (Light Mode)
   =========================================================================
*/

/* In Light Mode, il testo a riposo è già scuro grazie a var(--text-color), 
   ma dobbiamo assicurarci che l'hover sia leggibile e senza glow eccessivi */

html[data-theme='light'] body.neural-bg-enabled a:not(.btn):not(.nav-link):not(.user-menu-item):hover {
    /* Hover in light mode: Colore accento scuro, nitido */
    color: var(--accent-color);
    
    /* NIENTE BAGLIORE su sfondo bianco (sporcasse il testo), solo leggera evidenza */
    text-shadow: none;
    font-weight: 600; /* Leggermente più grassetto per evidenziare */
}

html[data-theme='light'] body.neural-bg-enabled a:not(.btn):not(.nav-link):not(.user-menu-item)::after {
    /* La linea in light mode è solida, senza ombra luminosa */
    box-shadow: none;
    height: 2px;
}

/* --- FIX SPECIFICO NAVBAR TEMA CHIARO --- */
/* Assicura che i link della navbar si leggano bene sul vetro chiaro */
html[data-theme='light'] body.neural-bg-enabled .nav-link {
    color: #333 !important; /* Forza scuro a riposo */
}

html[data-theme='light'] body.neural-bg-enabled .nav-link:hover {
    color: var(--accent-color) !important; /* Colore accento all'hover */
    background-color: rgba(0, 0, 0, 0.05); /* Sfondo leggero invece del glow */
    text-shadow: none !important;
}

/* 
   =========================================================================
   9. EFFETTO NEURAL PER STARTERS TRACK (Versione High Blur)
   =========================================================================
*/

/* Contenitore delle card */
body.neural-bg-enabled .starters-container .starter-btn {
    /* Sfondo Vetro Scuro con ALTA SFOCATURA */
    background-color: rgba(20, 20, 25, 0.5) !important; /* Leggermente più trasparente per mostrare meglio il blur */
    
    /* AUMENTATO DA 10px A 25px */
    backdrop-filter: blur(55px);
    -webkit-backdrop-filter: blur(55px);
    
    /* Bordi Sottili e Luminosi */
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* Ombra più profonda per staccare dal fondo */
    
    /* Testo */
    color: #e0e0e0 !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transizione più elastica */
}

/* Testo descrittivo piccolo */
body.neural-bg-enabled .starters-container .starter-btn small {
    color: #aaa !important;
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 0.75em;
}

/* Titolo card */
body.neural-bg-enabled .starters-container .starter-btn strong {
    color: #fff !important;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* HOVER: Attivazione "Energetica" */
body.neural-bg-enabled .starters-container .starter-btn:hover {
    transform: translateY(-4px) scale(1.02); /* Leggero zoom */
    border-color: var(--accent-color) !important;
    box-shadow: 0 12px 30px rgba(var(--accent-color-rgb), 0.25); /* Glow più forte */
    background-color: rgba(30, 30, 35, 0.6) !important;
}

/* --- ADATTAMENTO LIGHT MODE (High Blur) --- */
html[data-theme='light'] body.neural-bg-enabled .starters-container .starter-btn {
    background-color: rgba(255, 255, 255, 0.55) !important;
    
    /* AUMENTATO ANCHE QUI */
    backdrop-filter: blur(55px);
    -webkit-backdrop-filter: blur(55px);
    
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #333 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

html[data-theme='light'] body.neural-bg-enabled .starters-container .starter-btn strong {
    color: #1a1a1a !important;
}

html[data-theme='light'] body.neural-bg-enabled .starters-container .starter-btn small {
    color: #555 !important;
}

html[data-theme='light'] body.neural-bg-enabled .starters-container .starter-btn:hover {
    background-color: rgba(255, 255, 255, 0.75) !important;
    border-color: var(--accent-color) !important;
    box-shadow: 0 12px 30px rgba(var(--accent-color-rgb), 0.15);
}

/* 
   =========================================================================
   10. EFFETTO SFOCATURA (BLUR) PER I MODALI E OVERLAY
   =========================================================================
*/

/* 1. Modali Generici (Creazione Progetti, Preset, Settings, ecc.) */
body.neural-bg-enabled .modal {
    /* Riduciamo l'opacità del nero di fondo per far risaltare la sfocatura */
    background-color: rgba(0, 0, 0, 0.4) !important;
    
    /* La magia: sfoca tutto ciò che sta dietro */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    /* Transizione fluida per l'apertura */
    transition: backdrop-filter 0.3s ease, background-color 0.3s ease;
}

/* 2. Overlay Menu Mobile */
body.neural-bg-enabled .overlay {
    background-color: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* 3. Popup degli Allegati (graffetta) e altri popup piccoli */
body.neural-bg-enabled #attachment-popup,
body.neural-bg-enabled .popup-menu,
body.neural-bg-enabled #user-menu-panel {
    /* Rendiamo anche i menu a tendina leggermente traslucidi e sfocati */
    background-color: rgba(20, 20, 25, 0.9) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 
   --- ADATTAMENTO TEMA CHIARO (LIGHT MODE) --- 
   In light mode, invece di scurire, vogliamo un effetto "vetro smerigliato" bianco.
*/
html[data-theme='light'] body.neural-bg-enabled .modal,
html[data-theme='light'] body.neural-bg-enabled .overlay {
    background-color: rgba(255, 255, 255, 0.4) !important;
}

html[data-theme='light'] body.neural-bg-enabled #attachment-popup,
html[data-theme='light'] body.neural-bg-enabled .popup-menu,
html[data-theme='light'] body.neural-bg-enabled #user-menu-panel {
    background-color: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(0, 0, 0, 0.1);
}