/* static/style.css - VERSIONE FINALE E PULITA */

:root {
    --sidebar-width: 280px;
    --navbar-height: 50px;
    --workspace-panel-width: 300px;

    /* TEMA CHIARO (DEFAULT) */
    --bg-color: #f0f2f5;
    --text-color: #333;
    --text-color-muted: #6c757d;
    --card-bg-color: #fff;
    --border-color: #dee2e6;
    --accent-color: #007bff;
    --accent-color-rgb: 0, 123, 255;
    --user-bubble-bg: #007bff;
    --user-bubble-text: white;
    --assistant-bubble-bg: #e9e9eb;
    --assistant-bubble-text: #333;
    --hover-bg-color: #dbeafe;
    --table-header-bg: #f9f9f9;
    --code-bg: #0d1117;
    --danger-color: #dc3545;
    --success-color: #28a745;
    --warning-color: #ffc107;
}

html[data-theme='dark'] {
    /* TEMA SCURO */
    --bg-color: #121212;
    --text-color: #e0e0e0;
    --text-color-muted: #888;
    --card-bg-color: #1e1e1e;
    --border-color: #3a3a3a;
    --accent-color: #3b82f6;
    --accent-color-rgb: 59, 130, 246;
    --user-bubble-bg: #3b82f6;
    --user-bubble-text: white;
    --assistant-bubble-bg: #374151;
    --assistant-bubble-text: #e0e0e0;
    --hover-bg-color: rgba(59, 130, 246, 0.2);
    --table-header-bg: #2c2c2c;
    --code-bg: #161b22;
    --danger-color: #f87171;
    --success-color: #4ade80;
    --warning-color: #facc15;
}

html[data-theme='dark'] .logo-icon {
    filter: invert(1) hue-rotate(180deg);
}


#selectors-container {
    display: flex;
    flex-wrap: wrap; /* QUESTA È LA REGOLA CHIAVE */
    gap: 16px;
    align-items: center;
}

/* 2. Il div che contiene il nostro pulsante deve occupare tutta la larghezza disponibile */
/* Il contenitore della barra di azioni */
/* Il contenitore della barra di azioni */
#selectors-container {
    display: flex;
    flex-wrap: wrap; 
    gap: 16px;
    align-items: center; /* QUESTA È LA REGOLA CHIAVE PER L'ALLINEAMENTO VERTICALE */
}



/* ===== INIZIO STILE PER WELCOME SCREEN DINAMICO ===== */

/* 1. Il contenitore principale che funge da "maschera" */
.starters-container {
    display: flex;
    width: 100%;
    max-width: 90vw;
    overflow-x: scroll;  /* <-- CORREZIONE: Permette lo scroll orizzontale */
    cursor: grab;        /* <-- AGGIUNTA: Mostra il cursore per trascinare */
    user-select: none;
    position: relative;
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    
    /* Aggiungi anche queste regole per nascondere la barra di scorrimento */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE/Edge */
}

.starters-container::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* 2. Il nastro animato */
.starters-track {
    display: flex;
    gap: 15px;
    /* L'animazione è definita qui */
    animation: marquee 40s linear infinite;
}

/* 3. Pausa dell'animazione al passaggio del mouse (solo desktop) */
.starters-container:hover .starters-track {
    animation-play-state: paused;
}

/* 4. Definizione dell'animazione (invariata) */
@keyframes marquee {
    from { transform: translateX(0%); }
    to { transform: translateX(-50%); }
}

/* 5. Stile dei pulsanti */
.starters-container .starter-btn {
    width: 240px;
    height: 110px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
    padding: 15px;
    text-align: left;
    cursor: default; 
    border: 1px solid var(--border-color);
    background-color: var(--card-bg-color);
    color: var(--text-color);
    border-radius: 12px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.starters-container .starter-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.starters-container .starter-btn strong {
    font-size: 1.1em;
    font-weight: 600;
}

.starters-container .starter-btn small {
    opacity: 0.7;
}

/* ===== FINE STILE ===== */


/* --- STILI GLOBALI --- */
html, body {
    margin: 0; padding: 0; height: 100%;
    /* 
       LA SOLUZIONE:
       1. Usiamo prima i font di sistema (-apple-system, etc.) che sono veloci e ottimizzati.
       2. Poi mettiamo 'Noto Sans SC' come fallback per i caratteri cinesi.
    */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, 'Noto Sans SC';
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.2s, color 0.2s;
}
body { 
    display: flex; 
    flex-direction: column;
}
body.chat-page { 
    overflow: hidden; /* Evita lo scroll sulla pagina chat */
}
a { text-decoration: none; }
h1, h2 { color: var(--text-color); }
button { cursor: pointer; }
.hidden { display: none !important; }


/* --- LAYOUT PRINCIPALE SPA --- */
.app-container {
    display: flex;
    flex-direction: column;
    height: 100vh; /* L'altezza del contenitore principale è l'altezza della viewport */
}
.main-header {
    height: var(--navbar-height);
    background-color: var(--card-bg-color);
    padding: 0 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0; 
    position: relative;
    z-index: 1001;
}
.main-header nav { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
}
.main-header a.nav-link { 
    padding: 14px 16px; 
    color: var(--text-color); 
    font-weight: 500; 
    position: relative; /* Necessario per il puntino */
}
#nav-chat { font-weight: bold; } /* Per evidenziare il link della chat */

/* Stile per l'indicatore di agente attivo ("puntino luminoso") */

body.agent-is-working .nav-chat::after { /* <-- Modificato da # a . */
    content: '';
    position: absolute;
    top: 10px;
    right: 10px; 
    top: 10px;;
    width: 8px;
    height: 8px;
    background-color: #3498db;
    border-radius: 50%;
    box-shadow: 0 0 8px #3498db;
    animation: pulse 1.5s infinite;
}

/* Stile per il link quando è in attesa */
body.agent-is-working .nav-chat { /* <-- Modificato da # a . */
    opacity: 0.8;
    cursor: pointer; 
}

@keyframes pulse {
    0% { transform: scale(0.9); opacity: 0.7; }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(0.9); opacity: 0.7; }
}

#page-content {
    flex-grow: 1; /* Occupa tutto lo spazio rimanente */
    overflow-y: auto; /* Permette lo scroll del contenuto della pagina */
    display: flex; /* Permette al contenuto (es. .app-layout, .page-container) di occupare lo spazio */
}

/* --- LAYOUT INTERNO DELLA CHAT (app-layout) --- */
.app-layout {
    display: flex;
    width: 100%; /* Occupa il 100% della larghezza di #page-content */
    overflow: hidden; /* Nasconde l'overflow e gestisce i pannelli scorrevoli */
     flex-grow: 1; /* <-- LA VERA SOLUZIONE: Fai in modo che occupi lo spazio verticale rimanente */
    position: relative; /* Buona pratica per contenere elementi posizionati */
    background-color: var(--card-bg-color); /* <-- AGGIUNGI QUESTA RIGA */
}


/*
===================================================================
 STILE MODERNO E UNIFICATO PER INPUT E TEXTAREA
===================================================================
*/

/* 1. Stile di base per tutti i campi di testo e ricerca */
input[type="text"],
input[type="search"],
textarea {
    /* Rimuoviamo l'aspetto predefinito */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    /* Stile visuale */
    background-color: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 1em; /* Usa la dimensione del font del genitore */
    font-family: inherit; /* Usa il font dell'app */
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%; /* Occupa lo spazio disponibile di default */
    box-sizing: border-box; /* Calcolo delle dimensioni prevedibile */
}

/* 2. Effetto Focus per tutti i campi */
input[type="text"]:focus,
input[type="search"]:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

html[data-theme='dark'] input[type="text"]:focus,
html[data-theme='dark'] input[type="search"]:focus,
html[data-theme='dark'] textarea:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4);
}

/* 3. Aggiungiamo un'icona di ricerca ai campi di tipo "search" */
input[type="search"] {
    padding-left: 32px; /* Spazio a sinistra per l'icona */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 16px;
}

html[data-theme='dark'] input[type="search"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
}

/* 4. Opzionale: Rimuoviamo l'icona "X" che alcuni browser aggiungono ai campi di ricerca */
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}


/* --- NAVBAR (elementi specifici della navbar del progetto originale) --- */
.navbar { /* Questa classe è ora deprecata in favore di .main-header */
    height: var(--navbar-height);
    background-color: var(--card-bg-color);
    padding: 0 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0; 
    box-sizing: border-box; 
    position: relative;
    z-index: 998;
}
.nav-links-desktop { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
}
.navbar a { 
    padding: 14px 16px; 
    color: var(--text-color); 
    font-weight: 500; 
}
.logo-link { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    color: var(--text-color);
}
.logo-icon { 
    height: 24px; 
    width: auto; 
}
.nav-controls-right { 
    display: flex; 
    align-items: center; 
    gap: 16px; 
}
.navbar-title { font-size: 1.2em; font-weight: 600; display: none; } 
#menu-toggle { display: none; background: none; border: none; font-size: 24px; color: var(--text-color); } 
#workspace-toggle-btn {
    background-color: var(--assistant-bubble-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}
#workspace-toggle-btn.active {
    background-color: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
}




/* Stile generico per i menu contestuali */
.context-menu {
    position: absolute;
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    padding: 5px;
    z-index: 1010;
    min-width: 150px;
}

.context-menu-item {
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 0.9em;
}

.context-menu-item:hover {
    background-color: var(--accent-color);
    color: var(--user-bubble-text);
}


/* --- SIDEBAR SINISTRA (CONVERSAZIONI) --- */
#sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0; 
    background-color: var(--card-bg-color);
    border-right: 1px solid var(--border-color);
    display: flex; 
    flex-direction: column;
    padding: 10px;
    box-sizing: border-box;
    contain: layout; /* <-- AGGIUNGI QUESTA RIGA */
}
#sidebar-content-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#conversations-list { 
    list-style-type: none; 
    padding: 0; 
    margin: 0;
    flex-grow: 1; 
    overflow-y: auto; 
}
#conversations-list li { 
    padding: 12px; border-radius: 6px; cursor: pointer; margin-bottom: 5px; 
    display: flex; justify-content: space-between; align-items: center; word-break: break-word; 
}
#conversations-list li:hover { background-color: var(--hover-bg-color); }
#conversations-list li.active { background-color: var(--hover-bg-color); color: var(--accent-color); font-weight: 500; }
.delete-convo-btn { background: none; border: none; color: var(--danger-color); font-size: 1.2em; opacity: 0.2; padding: 0 5px; }
#conversations-list li:hover .delete-convo-btn { opacity: 1; }
.convo-title-wrapper { display: flex; align-items: center; gap: 8px; overflow: hidden; }
.convo-title-wrapper span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-icon { font-size: 0.9em; opacity: 0.7; }
#new-chat-btn { 
    width: 100%; padding: 12px; margin-bottom: 10px; background-color: var(--accent-color); 
    color: white; border: none; border-radius: 6px; font-size: 1em; flex-shrink: 0; 
}
#sidebar .theme-switcher-container { 
    margin-top: auto; padding: 10px; border-top: 1px solid var(--border-color);
    display: flex; justify-content: space-between; align-items: center;
    color: var(--text-color); flex-shrink: 0;
}
.switch { position: relative; display: inline-block; width: 60px; height: 34px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; }
.slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; transition: .4s; }
input:checked + .slider { background-color: var(--accent-color); }
input:checked + .slider:before { transform: translateX(26px); }
.slider.round { border-radius: 34px; }
.slider.round:before { border-radius: 50%; }


/* 1. Nasconde la sidebar ISTANTANEAMENTE se la classe di preload è presente.
      Nessuna transizione qui, per evitare il flash. */
html.sidebar-collapsed-preload body #sidebar {
    width: 0;
    padding: 0;
    margin-left: -10px;
    overflow: hidden;
}

html.selectors-collapsed-preload #selectors-container.collapsed {
    transition: none !important; /* Disabilita l'animazione solo al caricamento */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}

/* 2. La classe del body gestisce la transizione per i click SUCCESSIVI. */
body.sidebar-collapsed #sidebar {
    width: 0;
    padding: 0;
    margin-left: -10px;
    overflow: hidden;
}


/* --- CHAT CONTAINER E CONTENUTI DI PAGINA --- */
#chat-container {
    flex: 1 1 auto;
    min-width: 0; 
    display: flex;
    flex-direction: column;
    background: var(--card-bg-color);
    /* height: 100%; Non più necessaria, 'flex: 1' fa già il lavoro */
    overflow: hidden;
    contain: layout;
    transition: all 0.3s ease;
}
/* La classe .page-content è ora un contenitore generico per le pagine non-chat, con scroll proprio */
.page-container { 
    flex-grow: 1; 
    padding: 20px; 
    overflow-y: auto;
    background-color: var(--bg-color);
    box-sizing: border-box; /* Assicura che padding non aggiunga larghezza */
    width: 100%; /* Occupa tutta la larghezza disponibile */
}
/* Header con selettori */
#header { padding: 16px 32px; border-bottom: 1px solid var(--border-color); display: flex; flex-wrap: wrap; align-items: center; gap: 16px; flex-shrink: 0; }
#header > div { display: flex; align-items: center; gap: 8px; }
#header label { font-weight: 500; }

#model-selector, #prompt-selector, #default-model-selector, #default-prompt-selector, #orchestrator-model-selector, #language-selector, #rag-model-input {
    /* Rimuoviamo l'aspetto predefinito del browser */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Stile di base */
    background-color: var(--bg-color); /* Sfondo più tenue, come la textarea */
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 8px; /* Bordi leggermente più arrotondati */
    padding: 8px 30px 8px 12px; /* Aggiungi spazio a destra per la freccia */
    font-size: 0.9em;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;

    /* Aggiungiamo la nostra freccia personalizzata */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
}

/* Stile per il tema scuro */
html[data-theme='dark'] #model-selector,
html[data-theme='dark'] #prompt-selector,
html[data-theme='dark'] #default-model-selector,
html[data-theme='dark'] #default-prompt-selector, 
html[data-theme='dark'] #rag-model-input, 
html[data-theme='dark'] #language-selector,
html[data-theme='dark'] #orchestrator-model-selector,
html[data-theme='dark'] #mission-selector
{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* Stile per l'effetto focus (il bordo blu) */
#model-selector:focus, #prompt-selector:focus, #default-model-selector:focus, #default-prompt-selector, #orchestrator-model-selector, #rag-model-input , #language-selector:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4); /* Usa il colore accento per il focus */
}

/* Stile per il display del progetto attivo */
#active-project-display { display: flex; align-items: center; gap: 8px; background-color: var(--assistant-bubble-bg); padding: 6px 12px; border-radius: 18px; font-size: 0.9em; color: var(--text-color); }
#active-project-display.hidden { display: none; }
/* Stile per il pulsante di uscita dal progetto */
#exit-project-btn { background: none; border: 1px solid var(--text-color-muted); color: var(--text-color-muted); width: 20px; height: 20px; border-radius: 50%; cursor: pointer; line-height: 18px; padding: 0; font-weight: bold; }
#exit-project-btn:hover { background-color: var(--danger-color); color: white; border-color: transparent; }
#rag-status-container { display: flex; align-items: center; gap: 8px; background-color: var(--assistant-bubble-bg); padding: 6px 12px; border-radius: 18px; font-size: 0.9em; color: var(--text-color); }
#rag-status-container.hidden { display: none; }
#reset-rag-btn {
    background: none;
    border: 1px solid var(--text-color-muted);
    color: var(--text-color-muted);
    width: 22px; /* Leggermente più grande per un tocco migliore */
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    /* Usa Flexbox per centrare perfettamente l'icona SVG */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}#reset-rag-btn:hover { background-color: var(--danger-color); color: white; border-color: transparent; }
/* Box dei messaggi */
#chat-box { flex-grow: 1; padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; contain: layout; }
.message { padding: 10px 15px; border-radius: 18px; max-width: 85%; line-height: 1.4; word-break: break-word; display: flex; flex-direction: column; }
.user-message { background-color: var(--user-bubble-bg); color: var(--user-bubble-text); align-self: flex-end; }
.assistant-message { background-color: var(--assistant-bubble-bg); color: var(--assistant-bubble-text); align-self: flex-start; }
.system-message { background-color: transparent; color: var(--text-color-muted); font-size: 0.85em; font-style: italic; text-align: center; align-self: center; max-width: 100%; }



/* Nuovo stile per i messaggi tool */
.message.tool-message {
    background-color: var(--code-bg); /* Un colore di sfondo leggermente diverso */
    border-left: 3px solid var(--accent-color); /* Una linea laterale per distinguerlo */
    font-size: 0.9em;
    color: var(--text-color);
    text-align: left; /* Assicurati che il testo sia allineato a sinistra */
    align-self: flex-start; /* Si allinea a sinistra come i messaggi dell'assistente */
    max-width: 90%; /* Può essere più largo dei messaggi normali per output di tool */
    padding: 12px 18px;
    border-radius: 8px; /* Bordi leggermente meno arrotondati */
}

.tool-output-label {
    font-weight: bold;
    margin-bottom: 8px;
    font-family: sans-serif; /* Un font più leggibile per l'etichetta */
    font-size: 0.8em;
    text-transform: uppercase;
    color: var(--text-color-muted);
}


.message img { max-width: 100%; border-radius: 8px; margin-top: 10px; }
.message-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    height: 28px;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    align-self: flex-end; /* <-- QUESTA RIGA ALLINEA LE ICONE A DESTRA */
}
.message:hover .message-actions { opacity: 1; }
.action-btn { background: none; border: none; padding: 4px; cursor: pointer; color: inherit; opacity: 0.7; display: flex; align-items: center; justify-content: center; border-radius: 5px; }
.action-btn:hover { opacity: 1; background-color: rgba(0,0,0,0.1); }
.user-message .action-btn:hover { background-color: rgba(255,255,255,0.2); }
.delete-msg-btn { color: var(--danger-color) !important; }
.delete-msg-btn:hover { background-color: rgba(220, 53, 69, 0.1) !important; }

.message pre {
    position: relative;
    background-color: var(--code-bg);
    border-radius: 8px;
    padding: 12px;
    margin: 10px 0;
    
    white-space: pre-wrap;   /* Va a capo se il testo è troppo lungo */
    word-break: break-all;   /* Forza l'interruzione delle parole/stringhe lunghe */
    overflow-x: auto;        /* Aggiunge una barra di scorrimento orizzontale se necessario */
    max-width: 100%;         /* Non può mai essere più largo della bolla del messaggio */
    overflow-y: auto;        /* Attiva lo scroll verticale quando max-height viene superato */
    contain: layout style;
}

.message-text-content {
    contain: layout style;
    /* overflow: auto;  Rimosso qui, gestito da pre per il codice, e il testo normale non dovrebbe avere scroll */
}

.message pre code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.9em;
    background: none;
    display: block; /* Importante per il corretto wrap */
    /* Rimuoviamo white-space da qui, lo gestisce il genitore <pre> */
}

.copy-code-btn { position: absolute; top: 8px; right: 8px; background-color: #333; color: #ccc; border: 1px solid #555; border-radius: 5px; padding: 4px 8px; font-size: 0.8em; cursor: pointer; opacity: 0; transition: opacity 0.2s ease-in-out; }

.message pre:hover .copy-code-btn { opacity: 1; }
.welcome-screen { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; text-align: center; color: var(--text-color-muted); padding: 20px; box-sizing: border-box; }
.welcome-logo { width: 80px; height: auto; margin-bottom: 20px; }
html[data-theme='dark'] .welcome-logo { filter: invert(1) hue-rotate(180deg); }
.starters-container { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 30px; max-width: 600px; width: 100%; }
.starter-btn { background-color: var(--card-bg-color); color: var(--text-color); border: 1px solid var(--border-color); padding: 15px; border-radius: 12px; text-align: left; font-size: 0.9em; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }
.starter-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
html[data-theme='dark'] .starter-btn:hover { border-color: var(--accent-color); }
/* Indicatori e input */
.assistant-message .typing-indicator { padding: 10px 0; min-height: 20px; display: flex; align-items: center; gap: 8px; }
.typing-indicator-dots { display: flex; align-items: center; }
.typing-indicator-dots span { height: 8px; width: 8px; background-color: var(--text-color-muted); opacity: 0.5; border-radius: 50%; margin: 0 2px; animation: typing-bubble 1.4s infinite ease-in-out both; }
.typing-indicator-dots span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator-dots span:nth-child(2) { animation-delay: -0.16s; }
@keyframes typing-bubble { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1.0); } }
.typing-timer { font-size: 0.8em; color: var(--text-color-muted); font-family: 'SFMono-Regular', Consolas, monospace; }

/* --- NUOVO STILE PER L'INDICATORE "THINKING" --- */

#input-area {
    position: relative;
}

/* 2. Rimuoviamo la vecchia classe .thinking che non serve più per l'animazione diretta */
#input-area.thinking {
    /* Lasciamo questa regola vuota, la logica è tutta nello pseudo-elemento */
}

/* 3. Creiamo la linea usando uno pseudo-elemento ::before */
#input-area::before {
    content: '';
    position: absolute;
    top: -1px; /* Posizionato per coprire il bordo superiore */
    left: 0;
    width: 100%;
    
    /* STATO DI DEFAULT: una linea statica e sottile */
    height: 1px;
    background: var(--border-color);
    opacity: 1; /* È sempre visibile */
    
    /* Transizione fluida per tutte le proprietà che cambieranno */
    transition: all 0.3s ease-in-out;
    pointer-events: none;
}

/* 4. QUANDO LA CLASSE 'thinking' È ATTIVA: modifichiamo l'aspetto della linea */
#input-area.thinking::before {
    height: 2px; /* La rendiamo leggermente più spessa */
    
    /* Applichiamo il gradiente luminoso */
    background: linear-gradient(
        to right, 
        transparent 0%, 
        var(--accent-color) 50%, 
        transparent 100%
    );
    
    /* Attiviamo l'animazione pulsante */
    animation: pulse-glow 1.8s infinite ease-in-out;
}

/* 5. L'animazione per l'effetto luminoso (invariata) */
@keyframes pulse-glow {
    0%, 100% {
        opacity: 0.7;
        box-shadow: 0 0 8px rgba(var(--accent-color-rgb, 0, 123, 255), 0.5);
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 16px rgba(var(--accent-color-rgb, 0, 123, 255), 0.8);
    }
}

#input-container { display: flex; flex-direction: column; flex-shrink: 0; }
#image-preview-container { padding: 0 16px; }
.image-preview { position: relative; display: inline-block; margin: 5px 0; }
.image-preview img { max-height: 70px; border-radius: 8px; }
.remove-image-btn { position: absolute; top: -5px; right: -5px; background: #333; color: white; border-radius: 50%; width: 20px; height: 20px; border: none; font-size: 14px; line-height: 20px; text-align: center; }


#input-area {
    display: flex;
    align-items: center; /* Allinea tutto al centro verticalmente */
    padding: 12px;
    border-top: 1px solid var(--border-color);
    background-color: var(--card-bg-color);
    box-sizing: border-box;
    gap: 8px;
}


#send-button, #stop-button { flex-shrink: 0; }
#upload-btn { background: none; border: none; font-size: 24px; cursor: pointer; margin-right: 10px; color: var(--text-color-muted); }


#chat-input {
    flex-grow: 1;
    border: none;
    padding: 10px 15px;
    border-radius: 20px; /* Bordo arrotondato coerente */
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: 16px;
    line-height: 1.4;
    resize: none;
    max-height: 150px;
    overflow-y: auto;
    box-sizing: border-box;
    font-family: inherit;
    min-height: 40px; /* GARANTISCE l'altezza minima iniziale */
}


#chat-input:focus { outline: none; border-color: var(--accent-color); box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15); }
html[data-theme='dark'] #chat-input:focus { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25); }
#send-button { width: 30px; height: 30px;  padding: 0px; border: none; background-color: var(--accent-color); color: white; border-radius: 50%; }
#stop-button { width: 30px; height: 30px; padding: 0px; border: none; background-color: var(--danger-color); color: white; border-radius: 50%; font-weight: bold; }
#file-input { display: none; }
#input-area.thinking #send-button { display: none; }
#input-area.thinking #stop-button { display: block; }





/* Stili per il popup di upload */
#attachment-wrapper { position: relative; display: flex; align-items: center; }
#attachment-menu-btn { background: none; border: none; font-size: 24px; cursor: pointer; margin-right: 10px; color: var(--text-color-muted); padding: 0 5px; }
#attachment-popup { position: absolute; bottom: 100%; left: 0; margin-bottom: 10px; background-color: var(--card-bg-color); border: 1px solid var(--border-color); border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 100; width: 200px; overflow: hidden; opacity: 0; transform: translateY(10px) scale(0.95); pointer-events: none; transition: opacity 0.15s ease-out, transform 0.15s ease-out; }
#attachment-popup.visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.popup-option { padding: 12px 16px; cursor: pointer; font-size: 0.95em; border-bottom: 1px solid var(--border-color); }
.popup-option:last-child { border-bottom: none; }
.popup-option:hover { background-color: var(--hover-bg-color); }
/* Pagine manage & settings (ora usano .page-container) */
.container { max-width: 100%; margin: auto; background: var(--card-bg-color); padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); color: var(--text-color); }
/* Header della pagina con titolo e pulsante */
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 1px solid var(--border-color); padding-bottom: 15px; }
.page-header h1 { margin: 0; }


/* Blocco statistiche DB */
#db-stats { background-color: var(--bg-color); padding: 15px; border-radius: 8px; margin-bottom: 20px; border: 1px solid var(--border-color); }
#db-stats p { margin: 0; font-size: 1.1em; color: var(--text-color-muted); }
/* Tabella */
/*
===================================================================
 STILE MODERNO PER LE TABELLE (Prompts e Projects)
 Sostituisci le vecchie regole 'table', 'th, td', 'actions button', etc.
 con questo blocco completo.
===================================================================
*/

/* 1. Stile di base per la tabella */
table {
    width: 100%;
    border-collapse: separate; /* Usa 'separate' per permettere il border-radius */
    border-spacing: 0;
    margin-top: 20px;
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 12px; /* Angoli arrotondati per la tabella intera */
    overflow: hidden; /* Nasconde gli angoli spigolosi delle celle */
}

/* 2. Stile per le celle dell'header e del corpo */
th, td {
    padding: 16px; /* Aumenta la spaziatura interna (aria!) */
    text-align: left;
    vertical-align: middle; /* Allinea il contenuto al centro verticalmente */
    border-bottom: 1px solid var(--border-color); /* Separatore solo orizzontale */
}

/* Rimuovi il bordo inferiore per l'ultima riga */
tr:last-child td {
    border-bottom: none;
}

/* 3. Stile per l'header della tabella */
th {
    background-color: var(--table-header-bg);
    font-size: 0.9em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* 1. Stile di base per TUTTE le celle 'favorite' */
.favorite-cell {
    color: var(--text-color-muted); /* Colore di base grigio, come il play */
    transition: color 0.2s, transform 0.2s;
    
}

/* 2. Stile specifico per le celle che sono preferite */
.favorite-cell.is-favorite {
    color: var(--accent-color); /* Colore blu acceso per i preferiti */
}

/* 3. Effetto hover per TUTTE le stelle, per dare feedback */
.favorite-cell:hover {
    color: var(--accent-color); /* Diventa sempre blu al passaggio del mouse */
    
}

.actions {
    width: 180px; /* Larghezza fissa per contenere i bottoni */
}

/* 5. Stile moderno per i pulsanti nelle azioni (Edit/Delete) */
.actions button {
    margin: 0; /* Rimuovi margini vecchi */
    padding: 8px 16px; /* Aumenta le dimensioni */
    border-radius: 8px; /* Coerenza con il resto dell'UI */
    border: none; /* Rimuovi i bordi */
    font-weight: 500;
    font-size: 0.9em;
    transition: transform 0.1s ease;
}

.actions button:active {
    transform: scale(0.95); /* Effetto "premuto" */
}

/* Colori specifici per i pulsanti */
.edit-btn {
    background-color: var(--warning-color);
    color: #333; /* Testo scuro per una migliore leggibilità sul giallo/arancio */
}

.delete-btn {
    background-color: var(--danger-color);
    color: white;
}

/* 6. Stile per il campo dei tag, per renderlo meno invadente */
.tags-input {
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 6px 8px;
    width: 100%;
    transition: background-color 0.2s, border-color 0.2s;
}

.tags-input:hover {
    background-color: var(--bg-color);
}

.tags-input:focus {
    background-color: var(--card-bg-color);
    border-color: var(--accent-color);
}

/* 7. Miglioramento della leggibilità del testo del prompt */
.prompt-text-container {
    max-height: 80px; /* Un po' più di spazio iniziale */
}

.prompt-text-container pre {
    line-height: 1.6; /* Aumenta l'interlinea per una migliore leggibilità */
}

/* Contenitore del testo del prompt (per l'effetto "accordion") */
.prompt-text-container {
    max-height: 0; /* Il testo è nascosto di default */
    overflow: hidden; /* Nasconde il contenuto che eccede l'altezza */
    transition: max-height 0.4s ease-in-out; /* Animazione fluida per apertura/chiusura */
    border-radius: 6px; /* Aggiunge bordi arrotondati per quando sarà visibile */
    background-color: var(--bg-color); /* Leggero sfondo per distinguerlo */
}

/* 2. Quando viene espanso, il contenitore ottiene un'altezza massima e diventa scrollabile */
.prompt-text-container.expanded {
    max-height: 150px; /* Altezza massima fissa per non sformare la tabella */
    overflow-y: auto;  /* Aggiunge la barra di scorrimento verticale SOLO se necessario */
    border: 1px solid var(--border-color); /* Aggiunge un bordo per definirlo meglio */
    margin-top: 5px; /* Aggiunge un po' d'aria sopra */
}

/* 3. Stile del testo all'interno del riquadro scrollabile */
.prompt-text-container pre {
    margin: 0;
    padding: 10px; /* Aggiunge padding interno per una migliore leggibilità */
    font-family: inherit;
    white-space: pre-wrap;
    word-break: break-word;
}
/* Pulsante "Show more" migliorato */
.expand-btn { background: none; border: none; color: var(--accent-color); font-weight: bold; cursor: pointer; padding: 5px 0; display: flex; align-items: center; gap: 4px; margin-top: 5px; }
.expand-btn::after { content: '▼'; font-size: 0.7em; transition: transform 0.3s ease; }
.prompt-text-container.expanded + .expand-btn::after { transform: rotate(180deg); }

.start-project-btn { background-color: var(--success-color); color: white; border: none; border-radius: 5px; padding: 5px 10px; font-size: 1.2em; cursor: pointer; line-height: 1; transition: opacity 0.2s; }
.start-project-btn:hover { opacity: 0.8; }
/* Assicura che i pulsanti nella colonna azioni siano allineati */
.actions { display: flex; gap: 8px; }
/* Form e input */
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: 500; }
.form-group input, .form-group textarea, .form-group select { width: 100%; padding: 10px; border-radius: 5px; border: 1px solid var(--border-color); box-sizing: border-box; background-color: var(--bg-color); color: var(--text-color); }

/* Stili per il modale */
.modal { position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.6); display: flex; justify-content: center; align-items: center; }
.modal.hidden { display: none; }
.modal-content { background-color: var(--card-bg-color); padding: 20px 30px; border: 1px solid var(--border-color); border-radius: 12px; width: 80%; max-width: 500px; position: relative; box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
.close-button { color: var(--text-color-muted); position: absolute; top: 10px; right: 20px; font-size: 28px; font-weight: bold; cursor: pointer; }
.close-button:hover, .close-button:focus { color: var(--text-color); }
.project-link { color: var(--accent-color); font-weight: 500; text-decoration: underline; cursor: pointer; }

#active-project-display.paused {
    background-color: var(--text-color-muted);
    opacity: 0.8;
}

#active-project-display.paused strong {
    text-decoration: line-through;
}

#toggle-pause-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1em;
    padding: 0 4px;
}

/* --- Stile per i pulsanti generici --- */



/* Suggerimento per il tema scuro: */
html[data-theme='dark'] .general-btn:hover {
    background-color: #2563eb; /* Un blu più luminoso per il tema scuro */
}


/* --- WORKSPACE PANEL (DESTRA) --- */
#project-files-panel {
    width: var(--workspace-panel-width);
    flex-shrink: 0;
    background-color: var(--card-bg-color);
    border-left: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    contain: layout;
    /* La transizione e la visibilità sono gestite dalle media queries */
}
.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.panel-header h3 { margin: 0; font-size: 1.1em; }
.panel-header div { display: flex; gap: 8px; }
.panel-header button {
    background: none; border: none; font-size: 1.3em; cursor: pointer;
    color: var(--text-color-muted); padding: 4px; border-radius: 5px;
}
.panel-header button:hover {
    color: var(--text-color);
    background-color: var(--assistant-bubble-bg);
}

/* --- STILE ALBERO FILE INTERATTIVO --- */
#project-file-tree-container {
    padding: 10px;
    overflow-y: auto;
    flex-grow: 1;
}
#project-file-tree-container ul {
    list-style-type: none;
    padding-left: 0; /* Rimuoviamo il padding di base */
    margin: 0;
}
#project-file-tree-container li {
    padding-left: 20px; /* Questa è la nostra indentazione per ogni livello */
    position: relative;
}

/* Linee guida verticali per l'indentazione */
#project-file-tree-container li::before {
    content: '';
    position: absolute;
    left: 8px;
    top: -12px; /* Si allinea con la fine del nodo precedente */
    bottom: 8px;
    width: 1px;
    background-color: var(--border-color);
}
/* Rimuovi la linea per il primo elemento di ogni lista */
#project-file-tree-container ul > li:first-child::before {
    top: 0;
}

.tree-node {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
}
/* Linea guida orizzontale per collegare il nodo alla linea verticale */
.tree-node::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    width: 10px;
    height: 1px;
    background-color: var(--border-color);
}
.tree-node:hover {
    background-color: var(--hover-bg-color);
}
.tree-node.active {
    background-color: var(--accent-color);
    color: var(--user-bubble-text);
}

.tree-children {
    display: none;
}
.tree-node.directory.open + .tree-children {
    display: block;
}

/* Icona per le cartelle (triangolino per aprire/chiudere) */
.tree-node.directory::after {
    content: '▶';
    font-size: 0.7em;
    margin-left: auto; /* Sposta il triangolo a destra */
    transition: transform 0.2s;
    line-height: 1; /* Assicura che sia ben centrato */
}
.tree-node.directory.open::after {
    transform: rotate(90deg);
}

/* Icona effettiva del file/cartella data da JS */
.file-tree-node-icon {
    margin-right: 8px;
    width: 16px; 
    text-align: center;
}

/* --- STILE VISUALIZZATORE FILE --- */
#file-viewer-container {
    border-top: 2px solid var(--border-color);
    display: flex;
    flex-direction: column;
    height: var(--file-viewer-height, 45%);
    flex-shrink: 0;
}
.file-viewer-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 15px; background-color: var(--assistant-bubble-bg);
    font-weight: bold; flex-shrink: 0; font-family: 'SFMono-Regular', Consolas, monospace;
}
.file-viewer-header div { display: flex; gap: 12px; }
.file-viewer-header button {
    background: none; border: none; font-size: 1.3em; cursor: pointer;
    color: var(--text-color-muted); padding: 4px; border-radius: 5px;
}
.file-viewer-header button:hover {
    color: var(--text-color);
    background-color: var(--hover-bg-color);
}

/* ===== INIZIO BLOCCO CORRETTO PER LO SCROLL ===== */
#file-viewer-content-wrapper {
    flex-grow: 1;
    overflow: auto; /* Abilita lo scroll qui, sul wrapper */
    background-color: var(--code-bg);
    position: relative;
}
#file-viewer-content {
    margin: 0; 
    padding: 10px 15px;
    white-space: pre; /* Usa 'pre' per consentire lo scroll orizzontale */
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.85em;
    color: #e0e0e0;
    min-height: 100%; /* Assicura che il contenuto riempia il wrapper */
}
/* ===== FINE BLOCCO CORRETTO ===== */


/* --- STILE PER LA NUOVA MANIGLIA DI RIDIMENSIONAMENTO VERTICALE --- */
.vertical-resizer {
    flex-shrink: 0;
    background-color: transparent; /* Invisibile di default */
    height: 10px;
    width: 100%;
    cursor: row-resize; /* Cursore per il ridimensionamento verticale */
    transition: background-color 0.2s;
    position: relative;
    /* Sposta la maniglia leggermente in alto per sovrapporsi al bordo */
    margin-top: -5px; 
    z-index: 1000;
}

.vertical-resizer:hover {
    background-color: var(--accent-color); /* Evidenzia la maniglia al passaggio del mouse */
}

/* --- STILE MENU CONTESTUALE --- */
#file-tree-context-menu {
    position: absolute; display: none; background-color: var(--card-bg-color);
    border: 1px solid var(--border-color); border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); padding: 5px; z-index: 1010;
}
/* .context-menu-item già definito sopra */


/* --- NASCONDI BARRE DI SCORRIMENTO --- */
html, body, .page-container, #conversations-list, #chat-box, #chat-input, #project-file-tree-container, #mobile-menu-chat-content, #file-viewer-content, .mobile-menu-links {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
html::-webkit-scrollbar, body::-webkit-scrollbar, .page-container::-webkit-scrollbar, #conversations-list::-webkit-scrollbar, #chat-box::-webkit-scrollbar, #chat-input::-webkit-scrollbar, #project-file-tree-container::-webkit-scrollbar, #mobile-menu-chat-content::-webkit-scrollbar, #file-viewer-content::-webkit-scrollbar {
    display: none;
}


/* --- STILI PER INDICATORE DI CARICAMENTO UPLOAD --- */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading {
    color: transparent !important;
    pointer-events: none;
    position: relative;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    margin-left: -8px;
    border: 2px solid var(--text-color-muted);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}


/* --- NUOVO MENU MOBILE A SCOMPSA E OVERLAY --- */
#mobile-menu {
    position: fixed;
    left: 0; top: 0; height: 100%;
    width: var(--sidebar-width); 
    background-color: var(--card-bg-color);
    z-index: 1000;
    box-shadow: 4px 0 10px rgba(0,0,0,0.1);
    transform: translateX(-100%); 
    transition: transform 0.3s ease-out;
    display: flex; 
    flex-direction: column; 
    box-sizing: border-box;
    overflow: hidden; 
}
#mobile-menu.visible {
    transform: translateX(0); 
}
.overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden; 
    transition: opacity 0.3s ease-in-out, visibility 0.3s;
}
.overlay.visible {
    opacity: 1;
    visibility: visible;
}

/* Stile per l'header del menu mobile */
.mobile-menu-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    font-size: 1.1em;
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.mobile-menu-links {
    padding: 10px;
    overflow-y: auto; 
    flex-shrink: 0; 
}

/* Stile per i link nel menu mobile, coerente con la sidebar */
#mobile-menu a {
    display: block;
    padding: 12px;
    color: var(--text-color);
    text-decoration: none;
    margin-bottom: 5px;
    border-radius: 6px;
    font-weight: 500;
}
#mobile-menu a:hover, #mobile-menu a.active {
    background-color: var(--hover-bg-color);
    color: var(--accent-color);
}

/* In .mobile-menu il theme-switcher non ha bisogno di margine sopra */
#mobile-menu .theme-switcher-container {
    margin-top: 0;
}

#mobile-menu .content-separator {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 10px;
}

/* Stile per il contenuto spostato della chat (che sarà iniettato in mobile-menu-chat-content) */
#mobile-menu-chat-content {
    flex-grow: 1; 
    overflow-y: auto; 
    display: flex;
    flex-direction: column;
    padding: 10px; 
}

/* Quando il blocco #sidebar-content-wrapper è spostato in mobile-menu-chat-content,
   deve assumere la sua struttura interna */
#mobile-menu-chat-content #sidebar-content-wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: hidden; 
}

/* Assicurati che il bottone new-chat-btn e la lista conversazioni
   siano correttamente visualizzati all'interno di #sidebar-content-wrapper */
#mobile-menu-chat-content #new-chat-btn {
    width: calc(100% - 20px); 
    margin: 0 10px 10px 10px; 
}
#mobile-menu-chat-content #conversations-list {
    flex-grow: 1;
    overflow-y: auto;
    padding: 0 10px; 
}


/* === INIZIO MODIFICA: Stile per il contatore token === */
#input-footer {
    display: flex; /* Usa Flexbox per l'allineamento */
    justify-content: space-between; /* Spinge i due elementi ai lati opposti */
    align-items: center; /* Li centra verticalmente */
    padding: 4px 16px;
    font-size: 0.75em;
    color: var(--text-color-muted);
}

/* Stile per il nuovo testo del disclaimer */
.disclaimer-text {
    font-style: italic;
    opacity: 0.8; /* Lo rende leggermente più discreto */
}

/* Stile per il contatore dei token (invariato ma lo teniamo qui per completezza) */
#token-counter {
    font-family: 'SFMono-Regular', Consolas, monospace;
    text-align: right;
}


.header-controls {
    display: flex;
    gap: 10px;
    align-items: center;
}

.sidebar-action-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-right: 8px;
    display: inline-flex;
    align-items: center;
    color: var(--text-color-muted);
    transition: color 0.2s, transform 0.2s;
}

.sidebar-action-icon:hover {
    color: var(--accent-color);
    transform: scale(1.1);
}

/* Stile per l'icona del progetto attualmente attivo nella sidebar */
.project-icon.active {
    margin-right: 8px;
    color: var(--success-color); /* Colore verde per indicare "attivo" */
    display: inline-flex;
    align-items: center;
}

/* NUOVE MODIFICHE BARRA DELLE CHAT */

.sidebar-search-container {
    padding: 0 10px 10px 10px;
}

#conversation-search-input {
    width: 100%;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-color);
    color: var(--text-color);
    box-sizing: border-box;
}

/* Stile per il popup di modifica, simile a quello degli allegati */
.popup-menu {
    position: absolute;
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1001; /* Sopra la lista delle conversazioni */
    padding: 8px;
    display: flex;
    gap: 8px;
}

/* pensieri */



/* ===================================================================
   FIX LAYOUT PENSIERI E CODICE
   =================================================================== */

/* 1. Forza il contenitore del singolo pensiero ad occupare tutto lo spazio */
.agent-thought {
    width: 100%;
    box-sizing: border-box;
    display: block; /* Assicura che non sia flex o inline */
}

/* 2. Stile specifico per il blocco di codice dentro i pensieri */
.agent-thoughts-container pre,
.agent-thought pre {
    display: block;               /* Occupa tutta la riga */
    width: 100% !important;       /* Forza larghezza 100% */
    min-width: 0;                 /* Permette al flexbox di restringersi se serve */
    max-width: 100%;              /* Non uscire dal bordo */
    
    box-sizing: border-box;       
    white-space: pre-wrap;        /* Mantiene spazi e a capo, ma wrappa il testo */
    word-wrap: break-word;        /* Spezza le parole lunghe */
    
    margin: 5px 0;                /* Spaziatura verticale */
    padding: 10px;                /* Spaziatura interna */
    
    background-color: rgba(0,0,0,0.2) !important; /* Sfondo scuro per contrasto */
    border-radius: 6px;
    border: 1px solid var(--border-color);
    color: inherit;               /* Usa il colore del testo genitore */
}

/* 3. Assicura che il tag code interno non rompa il layout */
.agent-thoughts-container code,
.agent-thought code {
    white-space: pre-wrap !important;
    word-break: break-word !important;
    display: block;
    width: 100%;
}

/* Stile per l'output dei tool */
.message.tool-output {
    background-color: var(--code-bg);
    color: var(--text-color);
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 0.9em;
    align-self: flex-start;
    max-width: 90%;
    border-radius: 8px;
}

.tool-output-label {
    font-weight: bold;
    font-size: 0.8em;
    text-transform: uppercase;
    color: var(--text-color-muted);
    margin-bottom: 8px;
}


/*
===================================================================
 STILE PER IL NUOVO CURSORE BLU ANIMATO
===================================================================
*/

/* 1. Il nostro nuovo cursore a pallino */
.streaming-cursor {
    display: inline-block;
    width: 0.6em;  /* Dimensione relativa al font */
    height: 0.6em;
    background-color: var(--accent-color); /* Usa il blu del tema! */
    border-radius: 50%; /* Lo rende un cerchio */
    animation: cursor-pulse 1.2s infinite ease-in-out;
    margin-left: 2px;
    vertical-align: middle; /* Lo centra sulla linea del testo */
}

/* 2. L'animazione per farlo "respirare" */
@keyframes cursor-pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(0.8);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/*
===================================================================
 STILE PER PENSIERI E RISPOSTA SEPARATI
===================================================================
*/

/* Contenitore per i pensieri (sia agente che chat) */
.agent-thoughts-container {
    padding: 8px 12px;
    font-size: 0.9em;
    color: var(--text-color-muted);
    font-style: italic;
    opacity: 0.9;
    border-left: 3px solid var(--border-color);
    margin-bottom: 8px; /* Aggiunge spazio prima del separatore */
}

/* Nasconde il contenitore e il suo margine se è vuoto */
.agent-thoughts-container:empty {
    display: none;
}

/* Linea di separazione */
.thought-separator {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 0 0 8px 0; /* Margine sopra e sotto */
}

/* Nasconde il separatore se non ci sono pensieri prima */
.agent-thoughts-container:empty + .thought-separator {
    display: none;
}

/* Contenitore per la risposta principale */
.agent-main-response-content {
    /* Non servono stili specifici, eredita quelli della bolla del messaggio */
    padding: 0; /* Rimuoviamo eventuale padding per non duplicarlo */
}


/*
===================================================================
 STILE PER LA STATUS BAR PERSISTENTE DELL'AGENTE
===================================================================
*/

/* 1. Rendiamo la bolla di risposta un contenitore flex in colonna */
.assistant-message .message-text-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 2. Facciamo in modo che i contenitori dei pensieri e della risposta crescano per riempire lo spazio */
.agent-thoughts-container,
.agent-main-response-content {
    flex-grow: 1;
    overflow-y: auto; /* Aggiungi scroll se il contenuto è troppo lungo */
}

/* 3. La status bar: non cresce e rimane in fondo */
.agent-status-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    margin-top: 8px; /* Spazio dal contenuto sopra */
    border-top: 1px solid var(--border-color);
    background-color: var(--assistant-bubble-bg); /* Sfondo coerente con la bolla */
    flex-shrink: 0; /* Impedisce che si rimpicciolisca */
    
    /* Proprietà per l'effetto "sticky" all'interno del suo contenitore flex */
    position: sticky;
    bottom: 0;
}

/* Stili per testo e timer (leggermente rivisti per coerenza) */
.agent-status-text {
    font-size: 0.85em;
    font-style: italic;
    color: var(--text-color-muted);
}

.agent-status-timer {
    font-size: 0.85em;
    font-family: 'SFMono-Regular', Consolas, monospace;
    color: var(--text-color);
    background-color: var(--card-bg-color); /* Sfondo contrastante */
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
}


/*
===================================================================
 STILE PER LA STATUS BAR (CON AZIONI INTEGRATE)
===================================================================
*/

/* 1. Assicurati che la status bar distribuisca lo spazio */
.agent-status-header {
    display: flex;
    justify-content: space-between; /* Spinge il testo a sinistra e i controlli a destra */
    align-items: center;
    padding: 6px 12px;
    margin-top: 8px;
    border-top: 1px solid var(--border-color);
    background-color: var(--assistant-bubble-bg);
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
}

/* 2. Crea un contenitore flessibile per i controlli a destra */
.status-controls {
    display: flex;
    align-items: center;
    gap: 12px; /* Spazio tra le icone e il timer */
}




html[data-theme='dark'] .agent-status-timer {
    color: var(--text-color);
    background-color: var(--bg-color);
}


/* Stile per la sidebar quando è bloccata durante un task */
#conversations-list.disabled {
    opacity: 0.5;
    pointer-events: none; /* Disabilita completamente i click sulla lista */
    cursor: not-allowed;
}

#new-chat-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--accent-color); /* Mantiene il colore per non sembrare "spento" */
}

.agent-thoughts-container {
    opacity: 0.7; /* Rende il testo leggermente trasparente */
    font-size: 0.9em; /* Rende il testo leggermente più piccolo */
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.1); /* Sfondo scuro leggero */
    border-radius: 8px;
    margin-bottom: 15px; /* Spazio sotto il pensiero */
    font-family: 'Courier New', Courier, monospace; /* Usa un font monospazio per distinguerlo */
}

/* Stile per il separatore tra pensiero e risposta */
.thought-response-separator {
    border: none;
    height: 1px;
    background-color: var(--border-color);
    margin-top: 1rem;
    margin: 1rem 0 1.5rem 0;
}

/* Nasconde i pensieri se sono vuoti */
.agent-thoughts-container:empty {
    display: none;
}

/*
===================================================================
 STILE PER LA BARRA DEL PROMPT DINAMICO (JAILBREAK)
===================================================================
*/

#jailbreak-input-container {
    width: 100%;
    /* Questo valore 48rem è lo standard di T-Chat per l'area input. 
       Se hai cambiato la larghezza della chat, metti lo stesso valore qui. */
    max-width: 48rem; 
    margin: 0 auto 10px auto; /* Centrato orizzontalmente, 10px spazio sotto */
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    padding: 0 1rem; /* Piccolo padding laterale per non toccare i bordi su mobile */
}

#jailbreak-prompt-input {
    width: 100%; /* Occupa tutto lo spazio del contenitore */
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 10px 15px;
    font-size: 0.95em;
    resize: none; /* Impedisce il resize manuale che rompe il layout */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    box-sizing: border-box;
}

/* Opzionale: Focus più evidente */
#jailbreak-prompt-input:focus {
    border-color: var(--accent-color);
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--accent-color-rgb), 0.2);
}


#jailbreak-prompt-input:focus {
    outline: none;
    border-color: var(--warning-color); /* Evidenzia con un colore diverso (es. giallo) */
    box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.25);
}


/*
===================================================================
 STILE PER LA SIDEBAR COLLASSABILE
===================================================================
*/

/* 1. Stile del nuovo pulsante nella navbar */
#sidebar-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-color-muted);
    padding: 6px;
    border-radius: 5px;
    margin-right: 10px; /* Spazio tra il pulsante e il logo */
    display: flex; /* Per centrare l'SVG */
    align-items: center;
    justify-content: center;
}
#sidebar-toggle-btn:hover {
    background-color: var(--assistant-bubble-bg);
    color: var(--text-color);
}

/* 2. Logica di collasso: cosa succede quando il body ha la classe .sidebar-collapsed */

/* La sidebar scompare */
body.sidebar-collapsed #sidebar {
    width: 0;
    padding: 0;
    margin-left: -10px; /* Nasconde anche l'ultimo padding */
    overflow: hidden;
}

/* 3. Aggiungiamo le transizioni per rendere il tutto fluido */
#sidebar {
    transition: width 0.3s ease, margin-left 0.3s ease, padding 0.3s ease;
}

/* Anche l'area della chat si adatterà, ma una transizione esplicita
   sul suo margine la rende ancora più fluida se necessario.
   Con il layout flex attuale, non è strettamente necessaria, ma non fa male. */
#chat-container {
    transition: margin-left 0.3s ease;
}

/* 4. Nascondiamo il pulsante su mobile, dove c'è già il menu hamburger */
@media (max-width: 768px) {
    #sidebar-toggle-btn {
        display: none;
    }
}


html.selectors-collapsed-preload #selectors-container {
        max-height: 0;
        opacity: 0;
        margin-bottom: -12px;
        /* IMPORTANTE: nessuna transizione qui! */
    }

/*
===================================================================
 STILE PER LA SELEZIONE PRESET COMPONIBILI
===================================================================
*/

#preset-selection-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

#preset-selection-container label {
    font-weight: 500;
    white-space: nowrap;
}

#active-presets-display {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    background-color: var(--bg-color);
    padding: 4px 8px;
    border-radius: 8px;
    min-height: 24px;
    align-items: center;
    /* --- NUOVE REGOLE --- */
    transition: opacity 0.2s, max-width 0.3s ease-in-out, padding 0.3s;
    max-width: 500px; /* Un limite generoso quando è visibile */
}

/* Quando il contenitore è vuoto, lo facciamo collassare e scomparire */
#active-presets-display:empty {
    opacity: 0;
    max-width: 0;
    padding: 4px 0; /* Rimuoviamo il padding orizzontale */
    margin: 0;      /* Rimuoviamo eventuali margini */
}

.preset-tag {
    background-color: var(--accent-color);
    color: white;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.8em;
    display: flex;
    align-items: center;
    gap: 5px;
}

.preset-tag .remove-preset-tag-btn {
    background: none;
    border: none;
    color: white;
    opacity: 0.7;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.1em;
    line-height: 1;
    padding: 0;
}
.preset-tag .remove-preset-tag-btn:hover {
    opacity: 1;
}

.no-presets-active {
    font-style: italic;
    color: var(--text-color-muted);
    font-size: 0.9em;
}

.general-btn-light {
    background-color: var(--assistant-bubble-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}
.general-btn-light:hover {
    background-color: var(--hover-bg-color);
}


#preset-options-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
    max-height: 50vh;
    overflow-y: auto;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: 15px;
    margin-top: 15px;
}

.preset-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    cursor: pointer;
}
.preset-option:hover {
    background-color: var(--hover-bg-color);
}
.preset-option input[type="checkbox"] {
    margin-top: 5px;
    width: 18px;
    height: 18px;
}
.preset-option-details {
    display: flex;
    flex-direction: column;
}
.preset-option-details strong {
    font-size: 1.1em;
}
.preset-option-details small {
    color: var(--text-color-muted);
}


/* Stile per il footer nella pagina delle impostazioni */
.settings-footer {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    text-align: center;
    font-size: 0.9em;
    color: var(--text-color-muted);
}

.settings-footer nav {
    margin-top: 8px;
}

.settings-footer a {
    color: var(--accent-color);
    text-decoration: none;
}

.settings-footer a:hover {
    text-decoration: underline;
}

/* Stile per migliorare la leggibilità delle pagine di testo (es. Termini) */
.legal-page .container {
    max-width: 800px; /* Larghezza ottimale per la lettura */
    line-height: 1.7; /* Aumenta l'interlinea */
}

.legal-page h2 {
    margin-top: 2em;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5em;
}

.legal-page ul {
    padding-left: 20px;
}

.legal-page li {
    margin-bottom: 10px;
}


/*
===================================================================
 STILE PER ICONE SVG PROFESSIONALI
===================================================================
*/

/* Stile generico per tutte le icone SVG usate */
.file-tree-node-icon svg,
.tree-node-action-btn svg,
.start-project-btn svg,
.favorite-cell svg {
    vertical-align: middle; /* Allinea l'icona verticalmente con il testo */
    display: inline-block; /* Comportamento corretto per l'allineamento */
}

/* Stile per le icone nell'albero dei file */
.file-tree-node-icon {
    margin-right: 6px; /* Spazio tra icona e nome file */
    display: inline-flex; /* Centra l'SVG all'interno */
    align-items: center;
}

/* Stile per il pulsante "start" nella tabella progetti */
.start-project-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    border-radius: 50%;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color-muted);
    transition: color 0.2s, background-color 0.2s;
}

.start-project-btn:hover {
    color: var(--success-color);
    background-color: var(--hover-bg-color);
}

/* Stile per l'icona stella dei preferiti */


.favorite-cell svg {
    /* Per la stella vuota, non riempiamo l'interno */
    fill: none; 
}
.favorite-cell:hover svg {
    /* Al passaggio del mouse, riempiamo leggermente per dare un feedback */
    fill: rgba(255, 193, 7, 0.2);
}


/* 1. Stile di base per TUTTI i pulsanti */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 15px; /* Leggermente ridotto per compensare il bordo più spesso */
    border: 2px solid transparent; /* Bordo di 2px per un look più deciso */
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.9em;
    cursor: pointer;
    text-decoration: none;
    background-color: transparent; /* SFONDO TRASPARENTE DI BASE */
    transition: all 0.2s ease-in-out; /* Transizione fluida per tutto */
    white-space: nowrap;
}

.btn:active {
    transform: scale(0.98); /* Effetto "premuto" leggermente più soft */
    transition: transform 0.1s;
}

.btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

/* 2. Modificatori di colore (stile "outline") */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 15px;
    border: 2px solid transparent;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.9em;
    cursor: pointer;
    text-decoration: none;
    background-color: transparent;
    transition: all 0.2s ease-in-out;
    white-space: nowrap;
}

.btn:active {
    transform: scale(0.98);
    transition: transform 0.1s;
}

.btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

/* 2. Modificatori di colore (stile "outline") */

/* Blu - Azioni primarie */
.btn.btn-primary {
    border-color: var(--accent-color);
    color: var(--accent-color);
}
.btn.btn-primary:hover {
    background-color: var(--accent-color);
    color: white;
}

/* Giallo - Azioni di modifica */
.btn.btn-warning {
    border-color: var(--warning-color);
    color: var(--warning-color);
}
.btn.btn-warning:hover {
    background-color: var(--warning-color);
    color: #212529;
}

/* Rosso - Azioni distruttive */
.btn.btn-danger {
    border-color: var(--danger-color);
    color: var(--danger-color);
}
.btn.btn-danger:hover {
    background-color: var(--danger-color);
    color: white;
}

/* Grigio - Azioni secondarie */
.btn.btn-light {
    border-color: var(--border-color);
    color: var(--text-color-muted);
}
.btn.btn-light:hover {
    background-color: var(--hover-bg-color);
    border-color: var(--accent-color);
    color: var(--text-color);
}

/* Pulsante Stop speciale (mantiene la forma rotonda) */
#stop-button.btn.btn-danger {
    border-radius: 18px;
}

.btn.btn-success {
    border-color: var(--success-color);
    color: var(--success-color);
}
.btn.btn-success:hover {
    background-color: var(--success-color);
    color: white;
}

html.selectors-collapsed-preload #selectors-container.collapsed {
    transition: none !important; /* Disabilita l'animazione solo al caricamento */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}

#sidebar-content-wrapper {
    visibility: hidden;
}


/* ===================================================================
   STILI PER LA PAGINA USER (Allineamento Perfetto e Stile Dedicato)
   =================================================================== */

/* Contenitore per i selettori di personalità */
#user-list-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
    margin-top: 20px;
    margin-bottom: 30px;
    padding-bottom: 25px;
    border-bottom: 1px solid var(--border-color);
}

/* 
   Stile per il singolo riquadro della personalità 
   LA CHIAVE È L'ALLINEAMENTO VERTICALE CENTRATO
*/
.personality-selector-item {
    display: flex;
    justify-content: space-between;
    align-items: center; /* <<< QUESTA È LA REGOLA FONDAMENTALE PER L'ALLINEAMENTO */
    gap: 15px;
    background-color: var(--card-bg-color); /* Sfondo leggermente diverso per staccare */
    padding: 12px 20px; /* Aumentato il padding laterale */
    border: 1px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.personality-selector-item:hover {
    border-color: var(--text-color-muted);
}

.personality-selector-item.selected {
    background-color: var(--hover-bg-color);
    border-color: var(--accent-color);
}

/* 
   Stile dedicato per il nome della personalità 
*/
.personality-selector-item .personality-name {
    font-size: 1.2em; /* Leggermente più grande per dargli importanza */
    font-weight: 600; /* Più deciso */
    line-height: 1;   /* Rimuove spazio verticale extra dal testo */
    color: var(--text-color);
}


/* --- Toggle Switch Stile Professionale (invariato) --- */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    flex-shrink: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--assistant-bubble-bg);
    transition: .4s;
    border-radius: 34px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
input:checked + .slider {
    background-color: var(--accent-color);
}
input:checked + .slider:before {
    transform: translateX(26px);
}

/* Stili per le liste di contenuto (Note, Timeline, etc.) - invariati */
.user-content-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}
.user-content-item {
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    padding: 15px 20px;
    border-radius: 8px;
}
.user-content-item .item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.item-header strong {
    font-size: 1.1em;
    font-weight: 600;
}
.item-header .item-actions {
    display: flex;
    gap: 8px;
}
.btn.btn-sm {
    padding: 5px 12px;
    font-size: 0.85em;
}
.user-content-item .item-content {
    margin: 0 0 12px 0;
    line-height: 1.6;
    color: var(--text-color);
}
.user-content-item .item-meta {
    font-size: 0.8em;
    color: var(--text-color-muted);
    opacity: 0.8;
}


/* ===================================================================
   STILI FINALI: MENU NAVIGAZIONE DAVVERO COMPATTO E SCROLLABILE
   =================================================================== */

/* 1. Il menu mobile è un contenitore Flexbox verticale. */
#mobile-menu {
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Impedisce lo scroll dell'intero menu */
}

/* 2. L'header rimane fisso in alto. */
.mobile-menu-header {
    flex-shrink: 0;
}

/* 3. --- LA VERA MODIFICA ---
   Il contenitore dei link ora ha un'altezza massima MOLTO più piccola. */
.mobile-menu-links {
    flex-shrink: 0;
    max-height: 180px;    /* <-- VALORE RIDOTTO CHE FORZA LO SCROLL */
    overflow-y: auto;     /* <-- Abilita lo scroll verticale */
    padding-bottom: 10px; /* Aggiunge un po' d'aria in fondo alla lista scrollabile */
}

/* 4. La linea di separazione. */
.content-separator {
    flex-shrink: 0;
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 0 10px; /* Rimosso margine sopra/sotto per un layout più compatto */
}

/* 5. Il contenitore della chat occupa tutto lo spazio rimanente. */
#mobile-menu-chat-content {
    flex-grow: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding-top: 10px; /* Aggiunge un po' d'aria sopra la lista delle chat */
}

/* 6. Il contenuto JS si adatta correttamente. */
#mobile-menu-chat-content #sidebar-content-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}


/* ===================================================================
   STILI PER LE PAGINE DI AUTENTICAZIONE - v5.0 CON CONTROLLO POSIZIONE/ZOOM
   =================================================================== */

/* Impostazioni di base del body (invariate) */
body.auth-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
}

/* 1. Contenitore dello sfondo con IMPOSTAZIONI PERSONALIZZABILI */
#auth-background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    
    /* === IMPOSTAZIONI DESKTOP (E DI BASE) === */
    /* Immagine di fallback */
    background-image: url('/static/media/video/t-chat-vid.mp4');
    
    /* Zoom Immagine: 'cover' (riempie), 'contain' (mostra tutto) o una percentuale (es. 150%) */
    background-size: cover;
    
    /* Posizione Immagine: X% Y%. Es: '50% 50%' (centro), '0% 0%' (alto-sinistra) */
    background-position: center center;
    /* ========================================= */
}

/* 2. Video con IMPOSTAZIONI PERSONALIZZABILI */
#auth-background-container video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Lascia sempre 'cover' per riempire lo schermo */
    opacity: 0;
    transition: opacity 0.8s ease-in;
    
    /* === IMPOSTAZIONI DESKTOP (E DI BASE) === */
    /* Zoom Video: 1 = 100%, 1.2 = 120%, 0.8 = 80% */
    transform: scale(1.2);
    
    /* Posizione Video: X% Y%. Controlla quale parte del video viene mostrata. */
    object-position: center center;
    /* ========================================= */
}

/* 3. Logica di apparizione del video (invariata) */
#auth-background-container.video-ready video {
    opacity: 1;
}

/* ===== INIZIO SEZIONE MOBILE ===== */
@media (max-width: 768px) {

    

    

    /* 1. Nascondiamo il disclaimer di default su mobile */
    #input-footer .disclaimer-text {
        display: none;
    }

    /* 2. Facciamo in modo che l'avviso sulla privacy occupi lo spazio */
    #input-footer .privacy-warning {
        flex-grow: 1; /* Occupa tutto lo spazio a sinistra */
        font-size: 0.7em; /* Riduciamo un po' il testo */
        text-align: left; /* Assicuriamo l'allineamento a sinistra */
    }


    #auth-background-container {
        /* === IMPOSTAZIONI SOLO PER MOBILE === */
        
        /* Zoom Immagine Mobile: es. 200% per uno zoom maggiore */
        background-size: 200%;
        
        /* Posizione Immagine Mobile: es. 70% 50% per spostarla a destra */
        background-position: 70% 50%;
        /* ==================================== */
    }

    #auth-background-container video {
        /* === IMPOSTAZIONI SOLO PER MOBILE === */
        
        /* Zoom Video Mobile: es. 2.5 per uno zoom molto forte */
        transform: scale(1.4);
        
        /* Posizione Video Mobile: es. 75% 80% per inquadrare in basso a destra */
        object-position: 55% 90%;
        /* ==================================== */
    }
}
/* ===== FINE SEZIONE MOBILE ===== */


/* 4. Il resto degli stili per il form rimane invariato */
.app-layout-auth {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1; 
}
/* ... (copia e incolla qui il resto degli stili per .auth-box, .auth-logo, etc. dalla versione precedente) ... */
.auth-container {
    width: 100%;
    padding: 20px;
}
.auth-box {
    max-width: 400px;
    margin: auto;
    background-color: rgba(10, 10, 10, 0.6);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 30px 40px;
    border-radius: 16px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    text-align: center;
    color: white;
}
html[data-theme='dark'] .auth-box {
    background-color: rgba(10, 10, 10, 0.7);
}
.auth-logo {
    width: 60px;
    height: auto;
    margin-bottom: 20px;
    filter: invert(1);
}
.auth-box h2 {
    margin-bottom: 25px;
    font-size: 1.8em;
    color: white;
}
.auth-box .form-group label {
    color: rgba(255, 255, 255, 0.8);
    text-align: left;
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}
.auth-box input[type="text"],
.auth-box input[type="email"],
.auth-box input[type="password"] {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    border-radius: 8px;
    padding: 12px;
    width: 100%;
    box-sizing: border-box;
}
.auth-box input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}
.auth-box input:focus {
    outline: none;
    border-color: white;
    background-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
}
.btn.btn-primary.btn-full-width {
    background-color: transparent;
    border-color: #3b82f6;
    color: #3b82f6;
}
.btn.btn-primary.btn-full-width:hover {
    background-color: #3b82f6;
    color: white;
}
.auth-switch {
    margin-top: 25px;
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.7);
}
.auth-switch a {
    color: white;
    font-weight: 500;
}
.auth-switch a:hover {
    text-decoration: underline;
}
.error-message {
    color: #f87171;
    background-color: rgba(248, 113, 113, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.5);
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 15px;
    font-size: 0.9em;
}

/*
===================================================================
 STILE PER I PENSIERI PERSISTENTI (COLLAPSE)
===================================================================
*/

.persistent-thought {
    margin-bottom: 0; /* Rimuoviamo il margine inferiore per un layout più compatto */
    border: none; /* Rimuoviamo il bordo, ci penserà il separatore */
    border-radius: 8px;
    overflow: hidden;
}

.persistent-thought summary {
    cursor: pointer;
    padding: 8px 12px;
    font-size: 0.9em;
    font-weight: 500;
    color: var(--text-color-muted);
    background-color: transparent; /* Sfondo trasparente per un look più integrato */
    transition: background-color 0.2s;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.persistent-thought summary:hover {
    background-color: var(--hover-bg-color);
}

/* Quando il details è aperto, cambia lo stile del summary */
.persistent-thought[open] summary {
    border-bottom: 1px solid var(--border-color);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.persistent-thought .agent-thoughts-container {
    padding: 12px;
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-top: none;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-left: 3px solid var(--accent-color); /* Aggiunge una barra laterale per distinguere il contenuto */
    margin-bottom: 0;
}

/*
===================================================================
 STILE PER IL MODALE DELLA RIUNIONE
===================================================================
*/
.meeting-setup-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-top: 20px;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: 20px 0;
}

.meeting-column h3 {
    margin-top: 0;
    font-size: 1.1em;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
    margin-bottom: 12px;
}

.options-list {
    max-height: 250px;
    overflow-y: auto;
    padding-right: 10px; /* Spazio per la scrollbar */
}

.option-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 6px;
    margin-bottom: 5px;
}

.option-item:hover {
    background-color: var(--hover-bg-color);
}

.option-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.option-item label {
    font-weight: 500;
    cursor: pointer;
}

/* Stili per la visualizzazione dello stato "Riunione Attiva" */
#active-meeting-display {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: var(--assistant-bubble-bg);
    padding: 6px 12px;
    border-radius: 18px;
    font-size: 0.9em;
    color: var(--text-color);
}

#active-meeting-display strong {
    font-weight: 600;
}

#exit-meeting-btn {
    /* Stile simile a exit-project-btn */
    background: none;
    border: 1px solid var(--text-color-muted);
    color: var(--text-color-muted);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    line-height: 18px;
    padding: 0;
    font-weight: bold;
}
#exit-meeting-btn:hover {
    background-color: var(--danger-color);
    color: white;
    border-color: transparent;
}

/* Responsive per il modale */
@media (max-width: 768px) {
    .meeting-setup-container {
        grid-template-columns: 1fr; /* Impila le colonne su mobile */
    }
}

/*
===================================================================
 STILE UNIFICATO PER L'HEADER DEI SELETTORI
===================================================================
*/

/* 1. Contenitore principale: flex, allineamento e gap */
#selectors-container {
    display: flex;
    flex-wrap: wrap; 
    gap: 12px; /* Un po' meno spazio tra gli elementi */
    align-items: center;
}

/* 2. Resetta tutti i figli diretti per un comportamento prevedibile */
#selectors-container > div {
    margin: 0;
    padding: 0;
    display: flex; /* Rende anche i gruppi interni dei flex container */
    align-items: center; /* Allinea etichetta e selettore tra di loro */
    gap: 8px; /* Spazio tra etichetta e selettore */
}

/* 3. Stile unificato per TUTTI i controlli (select, pulsanti, display) */
#model-selector, 
#prompt-selector,
#mission-selector, 
#manage-presets-btn,
#start-meeting-btn,
#transform-to-project-btn,
#orchestrator-model-selector {
    height: 38px; /* ALTEZZA FISSA E UNIFORME PER TUTTI */
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: var(--card-bg-color);
    color: var(--text-color);
    font-size: 0.9em;
    display: inline-flex; /* Necessario per centrare il contenuto interno */
    align-items: center;  /* Centra il testo/icona verticalmente */
    justify-content: center;
    box-sizing: border-box; /* Assicura che padding e border non alterino l'altezza */
    white-space: nowrap;
    transition: all 0.2s ease;
}

/* 4. Stile specifico per i pulsanti (Gestisci, Riunione) */
#manage-presets-btn,
#start-meeting-btn,
#header-actions-bar,
#transform-to-project-btn,
#orchestrator-model-selector { /* <-- MODIFICA CHIAVE QUI */
    background-color: var(--bg-color);
    color: var(--text-color); /* Aggiunto per coerenza */
    border-color: var(--border-color); /* Aggiunto per coerenza */
    cursor: pointer;
}

#manage-presets-btn:hover,
#start-meeting-btn:hover,
#header-actions-bar:hover, #transform-to-project-btn:hover { /* <-- MODIFICA CHIAVE QUI */
    border-color: var(--accent-color);
    background-color: var(--hover-bg-color);
}

/* 5. Stile per i selettori (Model, Prompt) per mantenere la freccia */
#model-selector, 
#prompt-selector,
#mission-selector {
    padding-right: 30px; /* Spazio per la freccia */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
}

html[data-theme='dark'] #model-selector, 
html[data-theme='dark'] #prompt-selector {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* 6. Stile per il display dei preset attivi */
#active-presets-display {
    padding: 0 8px; /* Meno padding laterale se ci sono i tag */
    gap: 6px;
}

#active-presets-display .no-presets-active {
    padding: 0 4px; /* Aggiunge un po' di spazio al testo "Nessuno" */
}

/* 7. Stile per le etichette (Modello, Prompt sistema, etc.) */
#selectors-container label {
    margin-right: 6px;
    font-weight: 500;
    font-size: 0.9em;
    color: var(--text-color-muted);
     margin: 0;
}


/*
===================================================================
 STILI PER LA MODALITÀ RIUNIONE (sia live che cronologia) - v2.0
===================================================================
*/

/* 1. Stile per i pensieri dell'Orchestratore */
.message.meeting-orchestrator-thought {
    align-self: center;
    max-width: 90%;
    width: 100%;
    background-color: transparent;
    padding: 8px 0;
    margin: 5px 0;
    border-bottom: 1px dashed var(--border-color);
}

.message.meeting-orchestrator-thought p {
    margin: 0;
    font-size: 0.85em;
    color: var(--text-color-muted);
    font-style: italic;
    text-align: center;
}

/* 2. Stile per gli interventi dei Partecipanti */
.message.meeting-participant-message {
    align-self: flex-start;
    background-color: var(--assistant-bubble-bg);
    border-left: 4px solid var(--accent-color);
    max-width: 85%;
    padding: 0; /* Il padding sarà gestito dai figli */
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    overflow: hidden;
}

/* 3. Header con il nome del partecipante */
.participant-header {
    font-weight: bold;
    font-size: 0.9em;
    padding: 8px 15px;
    background-color: rgba(0,0,0,0.05);
    border-bottom: 1px solid var(--border-color);
}

html[data-theme='dark'] .participant-header {
    background-color: rgba(255,255,255,0.05);
}

/* 4. Contenuto del messaggio del partecipante */
.meeting-participant-message .message-text-content {
    padding: 12px 15px;
}

/* 5. Posizionamento delle azioni per i messaggi dei partecipanti */
.meeting-participant-message .message-actions {
    padding: 0 8px 8px 0;
    align-self: flex-end;
}

/*
===================================================================
 STILE PER PENSIERI COLLASSABILI NELLE CHAT NORMALI
===================================================================
*/
.persistent-thought {
    width: 100%; /* FORZA LARGHEZZA PIENA */
    box-sizing: border-box;
    margin-bottom: 10px; /* Spazio tra pensieri e risposta finale */
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden; /* Mantiene i bordi arrotondati */
    background-color: rgba(0, 0, 0, 0.03); /* Sfondo leggermente diverso per distinguerlo */
}

.persistent-thought summary {
    width: 100%; /* FORZA LARGHEZZA PIENA */
    box-sizing: border-box;
    cursor: pointer;
    padding: 10px 12px;
    font-size: 0.9em;
    font-weight: 500;
    color: var(--text-color-muted);
    background-color: transparent;
    list-style: none; /* Rimuove il triangolino standard su alcuni browser */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.persistent-thought summary:hover {
    background-color: var(--hover-bg-color);
}

.persistent-thought[open] summary {
    border-bottom: 1px solid var(--border-color);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.persistent-thought .agent-thoughts-container {
    padding: 12px;
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-top: none;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-left: 3px solid var(--accent-color); /* Aggiunge una barra laterale per distinguere il contenuto */
    margin-bottom: 0;
}

.meeting-participant-message .message-content {
    flex-grow: 1; /* <-- QUESTA È LA RIGA CHE RISOLVE IL BUG */
    display: flex;
    flex-direction: column;
}

/* Rimuove un possibile doppio bordo se il messaggio contiene solo un header */
.meeting-participant-message .message-text-content:empty {
    display: none;
}

td .tags-input {
    margin-top: 12px;
}

/* --- STILE PER LA NUOVA GESTIONE PRESET NELL'HEADER --- */

/* 1. Nasconde il testo "Nessuno" quando non ci sono preset attivi.
      Il JS lo aggiunge ancora, ma noi lo rendiamo invisibile. */
#active-presets-display .no-presets-active {
    display: none;
}

/* 2. Il contenitore che allinea i tag (quando appaiono) e il pulsante Preset */
#preset-management-wrapper {
    display: flex;
    align-items: center;
    gap: 8px; /* Spazio tra i tag e il pulsante */
}

/* 3. Stile per il nuovo pulsante "Preset" con icona */
#manage-presets-btn {
    display: inline-flex; /* Permette di allineare icona e testo */
    align-items: center;
    gap: 6px; /* Spazio tra icona e testo */
    padding: 0 12px; /* Padding orizzontale */
    height: 38px; /* Stessa altezza degli altri controlli */
    background-color: var(--bg-color);
}

/* 4. Nasconde il testo del pulsante su schermi più piccoli per un look più compatto */
@media (max-width: 850px) {
    #manage-presets-btn span {
        display: none;
    }
    #manage-presets-btn {
        padding: 0 8px; /* Riduci il padding quando c'è solo l'icona */
    }
}

#provider-icon {
    display: inline-flex;
    align-items: center;
    opacity: 0.7;
}

html[data-theme='dark'] #provider-icon svg {
    stroke: var(--text-color); /* Usa il colore del testo principale del tema scuro */
}

#input-footer .privacy-warning {
    font-weight: 500;
    font-style: italic;
}

.api-key-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.api-key-wrapper .api-key-input {
    padding-right: 45px; /* Fa spazio per il lucchetto all'interno del campo */
}

/* Stile per l'input quando è disabilitato (bloccato) */
.api-key-input:disabled {
    background-color: var(--bg-color);
    cursor: not-allowed;
    opacity: 0.7;
}

.lock-btn {
    position: absolute;
    right: 1px;
    top: 1px;
    bottom: 1px;
    width: 25px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-color-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lock-btn:hover {
    color: var(--accent-color);
}

#active-project-display {
    overflow: hidden;
}

.project-name-marquee {
    flex-grow: 1;
    overflow: hidden;
    white-space: nowrap;
}

.project-name-marquee span {
    display: inline-block;
    padding-left: 100%;
    animation: marquee-project-name 10s linear infinite;
    animation-play-state: paused;
    font-weight: bold;
}

.project-name-marquee:hover span {
    animation-play-state: paused;
}

@keyframes marquee-project-name {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}


/*
===================================================================
 STILE BARRA CONTESTO RAG (Desktop & Mobile)
===================================================================
*/

/* 1. Contenitore principale della barra RAG */
#session-rag-container {
    display: flex;
    flex-direction: column; /* Impila header e lista file */
    width: 100%; /* Occupa tutta la larghezza disponibile nell'header */
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 12px; /* Spazio dagli altri controlli */
    box-sizing: border-box;
}

/* Nascondi se ha la classe .hidden (invariato) */
#session-rag-container.hidden {
    display: none !important;
}

/* 2. Header della barra (titolo "Contesto RAG" e pulsante "Pulisci") */
.rag-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.rag-header strong {
    font-size: 0.9em;
    font-weight: 600;
    color: var(--text-color-muted);
}

#clear-rag-context-btn {
    background: none;
    border: none;
    color: var(--danger-color);
    font-size: 0.8em;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}

#clear-rag-context-btn:hover {
    background-color: rgba(220, 53, 69, 0.1);
}

/* 3. Lista dei file caricati */
#session-files-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap; /* Permette ai file di andare a capo */
    gap: 8px;
}

/* 4. Stile per ogni singolo file (tag) */
.session-file-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--assistant-bubble-bg);
    color: var(--text-color);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.85em;
    white-space: nowrap;
}

.remove-file-btn {
    background: none;
    border: none;
    color: var(--text-color-muted);
    cursor: pointer;
    font-weight: bold;
    font-size: 1.2em;
    line-height: 1;
    padding: 0 2px;
}

.remove-file-btn:hover {
    color: var(--danger-color);
}


/* ===== MODIFICHE RESPONSIVE PER LA BARRA RAG ===== */

@media (max-width: 768px) {
    #session-rag-container {
        /* Su mobile, riduciamo i margini per un look più compatto */
        margin-top: 8px;
        padding: 6px 10px;
    }

    .rag-header strong {
        font-size: 0.8em; /* Riduciamo un po' il testo */
    }

    #session-files-list {
        /* Permettiamo lo scroll orizzontale se i file sono troppi */
        flex-wrap: nowrap;
        overflow-x: auto;
        /* Nasconde la scrollbar per un look più pulito */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    #session-files-list::-webkit-scrollbar {
        display: none;
    }

    .session-file-item {
        /* Impedisce ai tag dei file di rimpicciolirsi troppo */
        flex-shrink: 0;
    }
}

/*
===================================================================
 STILE BARRA DI STATO UNIFICATA (RAG + RIUNIONE)
===================================================================
*/

/* 1. Contenitore principale che raggruppa tutto */
#context-status-bar {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px; /* Spazio tra la barra RAG e quella della Riunione */
    margin-top: 12px;
}

#context-status-bar.hidden {
    display: none !important;
}

/* 2. Sovrascriviamo lo stile di #session-rag-container per rimuovere il margine */
#session-rag-container {
    margin-top: 0;
}

/*
===================================================================
 STILE MINIMALISTA E COERENTE PER LA BARRA RIUNIONE
===================================================================
*/

/* 1. Stile del contenitore principale del banner riunione */
#meeting-status-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 12px;
    width: 100%;
    box-sizing: border-box;
}

#meeting-status-banner.hidden {
    display: none !important;
}

/* 2. Stile del testo "Riunione Attiva con..." */
#meeting-status-banner .banner-text {
    font-size: 0.9em;
    font-weight: 500;
    color: var(--text-color);
}

/* 3. Stile del pulsante di chiusura (X) */
#exit-meeting-mode-btn {
    background: none;
    border: none;
    color: var(--text-color-muted);
    cursor: pointer;
    font-weight: bold;
    font-size: 1.4em;
    line-height: 1;
    padding: 0 4px;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#exit-meeting-mode-btn:hover {
    background-color: var(--assistant-bubble-bg);
    color: var(--danger-color);
}

/* ===================================================================
   STILE PER LA NUOVA BARRA DI STATO CONTESTUALE
   =================================================================== */

/* 1. Contenitore principale della barra di stato */
#context-status-bar {
    padding: 12px 32px;
    border-bottom: 1px solid var(--border-color);
    /*background-color: var(--bg-color);*/
    display: flex;
    flex-direction: column;
    gap: 12px; /* Spazio tra il banner riunione e il box RAG */
    flex-shrink: 0;
}

#context-status-bar.hidden {
    display: none !important;
}

/* 2. Stile del banner per la riunione attiva */
#meeting-status-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--card-bg-color);
}
#meeting-status-banner .banner-text {
    font-size: 0.9em;
    font-weight: 500;
}
#exit-meeting-mode-btn {
    background: none; border: none; font-size: 1.4em;
    color: var(--text-color-muted); cursor: pointer; line-height: 1;
    padding: 4px;
}
#exit-meeting-mode-btn:hover {
    color: var(--danger-color);
}

/* 3. Adattamento del contenitore RAG esistente */
#session-rag-container {
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 12px;
    /* Rimuoviamo il margine che non serve più */
    margin-top: 0; 
}
.rag-header strong {
    color: var(--text-color);
}
#clear-rag-context-btn {
    color: var(--text-color-muted);
    font-weight: 500;
}
#clear-rag-context-btn:hover {
    color: var(--danger-color);
    background-color: transparent;
}

/* 4. Stile per la lista di file RAG */
#session-files-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}


/* 5. OTTIMIZZAZIONE MOBILE */
@media (max-width: 768px) {
    #context-status-bar {
        padding: 8px 16px; /* Padding ridotto su mobile */
    }

    /* LA MAGIA PER LO SCROLL ORIZZONTALE DEI FILE */
    #session-files-list {
        flex-wrap: nowrap;      /* Impedisce ai file di andare a capo */
        overflow-x: auto;       /* Abilita lo scroll orizzontale */
        padding-bottom: 5px;    /* Aggiunge un po' d'aria sotto per non tagliare le ombre */
        
        /* Nasconde la scrollbar per un look più pulito */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    #session-files-list::-webkit-scrollbar {
        display: none;
    }

    /* Impedisce ai tag dei file di rimpicciolirsi */
    .session-file-item {
        flex-shrink: 0;
    }
}

/* Stile per il nuovo pulsante "Nuova Chat" FISSO (versione definitiva) */
#quick-new-chat-btn {
    position: fixed;    /* LA CHIAVE: lo fissa alla finestra del browser */
    right: 16px;
    z-index: 100;
    
    /* Stile minimalista */
    background: none;
    border: none;
    padding: 8px;
    border-radius: 50%;
    cursor: pointer;
    
    color: var(--text-color-muted);
    
    /* Transizioni */
    transition: color 0.2s, background-color 0.2s, transform 0.2s, top 0.4s ease-in-out; /* Aggiunta transizione per 'top' */
}

#quick-new-chat-btn:hover {
    color: var(--accent-color);
    background-color: var(--assistant-bubble-bg);
    transform: scale(1.1);
}

/*
===================================================================
 STILE PER IL NUOVO MENU UTENTE A SCOMPARSA
===================================================================
*/

/* 1. Contenitore principale: deve essere un punto di riferimento per il pannello */
#user-session-container {
    position: relative; /* Fondamentale per posizionare il pannello flottante */
}

/* 2. Stile per il nuovo pulsante-icona */
#user-menu-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    transition: background-color 0.2s;
}

#user-menu-btn:hover {
    background-color: var(--assistant-bubble-bg);
}

/* 3. Stile per il pannello flottante */
#user-menu-panel {
    position: absolute;
    top: 100%; /* Si posiziona subito sotto il pulsante */
    right: 0;
    margin-top: 8px; /* Aggiunge un po' d'aria */
    min-width: 180px;
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    z-index: 1010;
    overflow: hidden;
    /* Animazione di comparsa */
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Quando il pannello NON è nascosto, diventa visibile */
#user-menu-panel:not(.hidden) {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* 4. Stile per gli elementi interni al pannello */
#user-menu-username {
    padding: 10px 15px;
    font-weight: 600;
    font-size: 0.9em;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 10px 15px;
    font-size: 0.9em;
    cursor: pointer;
    color: var(--text-color);
}

.user-menu-item:hover {
    background-color: var(--hover-bg-color);
}

.modal-search-container {
    margin-top: 15px;
    margin-bottom: 15px;
}

#preset-search-input {
    width: 100%;
    /* Eredita automaticamente lo stile moderno degli input 
       che abbiamo definito globalmente, quindi non serve altro! */
}

.meeting-column {
    display: flex;
    flex-direction: column; /* Assicura che gli elementi si impilino verticalmente */
}

.options-list {
    flex-grow: 1; /* Fa in modo che la lista occupi lo spazio rimanente */
    min-height: 150px; /* Altezza minima per evitare che collassi se vuota */
}


@media (max-width: 768px) {
    .modal {
        /* Invece di centrare, allinea l'elemento figlio (il contenuto) all'inizio (in alto) */
        align-items: flex-start;

        /* Aggiungiamo un po' di padding in alto per non attaccare il contenuto al bordo dello schermo */
        padding-top: 20px;
        padding-bottom: 20px; /* Aggiungiamo padding anche sotto per lo scroll */
    }

    .modal-content {
        /* Riduciamo il margine verticale che potrebbe interferire */
        margin-top: 0;
        margin-bottom: 0;
    }
}

/*
===================================================================
 STILI PER LA PAGINA INFO (LAYOUT FINALE 50/50 E RESPONSIVE)
===================================================================
*/

/* Layout principale a griglia per un controllo preciso */
.info-layout {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Due colonne di uguale larghezza (50/50) */
    gap: 40px;
}

.info-main-content {
    min-width: 0;
}

/* Sidebar destra (ora occupa il 50%) */
.info-sidebar {
    position: sticky;
    top: 20px;
    align-self: flex-start;
}

.info-sidebar h3 {
    margin-top: 0;
    font-size: 1.1em;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

.info-toggle-nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.info-toggle-nav details {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--card-bg-color); /* Sfondo bianco/scuro per il toggle */
}

.info-toggle-nav summary {
    padding: 12px 15px;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s;
}

.info-toggle-nav summary:hover {
    background-color: var(--hover-bg-color);
}

.info-toggle-nav summary::after {
    content: '▼';
    font-size: 0.7em;
    transition: transform 0.3s ease;
}

.info-toggle-nav details[open] > summary::after {
    transform: rotate(180deg);
}

/* Contenuto dei toggle PICCOLI */
.info-toggle-nav details > p {
    padding: 0 15px 15px 15px;
    margin: 0;
    font-size: 0.9em;
    color: var(--text-color-muted);
    border-top: 1px solid var(--border-color);
    padding-top: 15px;
}

/*
--- STILI PER IL PANNELLO GRANDE ---
*/

/* Il contenuto del pannello grande è nascosto di default */
.toggle-content-large {
    display: none;
}

/* Quando il toggle è aperto, mostriamo il contenuto */
.info-toggle-large[open] .toggle-content-large {
    display: block;
    padding: 20px 25px; /* Aumentato padding per più aria */
    border-top: 1px solid var(--border-color);
}

.toggle-content-large h4, .toggle-content-large h5 {
    margin-top: 0;
    margin-bottom: 12px;
}
.toggle-content-large h5 {
    font-size: 1em;
    margin-top: 25px; /* Più spazio tra le sezioni */
}
.toggle-content-large ul {
    padding-left: 20px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px; /* Più spazio tra gli elementi della lista */
    line-height: 1.6; /* Migliora la leggibilità */
}

/* Nasconde la <p> di fallback quando il contenuto grande è visibile */
.info-toggle-large[open] > p {
    display: none;
}

/* --- LOGICA RESPONSIVE --- */
@media (max-width: 992px) {
    .info-layout {
        grid-template-columns: 1fr; /* Una sola colonna su schermi più piccoli */
    }
    .info-sidebar {
        position: static;
        order: -1; /* Sposta la sidebar in cima */
        margin-bottom: 30px;
    }

    /* Su mobile, il pannello grande si comporta come gli altri toggle */
    .info-toggle-large[open] .toggle-content-large {
        padding: 15px;
    }
}

/*
===================================================================
 STILI PER LA SEZIONE USE CASES NELLA SIDEBAR
===================================================================
*/

/* Stile per il sottotitolo, per separarlo dalla sezione precedente */
.info-sidebar-subtitle {
    margin-top: 40px; /* Aggiunge spazio SOPRA il titolo */
    font-size: 1.1em;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

/* Contenitore per i casi d'uso */
.info-use-cases {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Spazio tra i vari casi d'uso */
}

/* Riusiamo lo stesso stile dei toggle dell'indice per coerenza */
.info-use-cases details {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--card-bg-color);
}

.info-use-cases summary {
    padding: 12px 15px;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s;
}

.info-use-cases summary:hover {
    background-color: var(--hover-bg-color);
}

.info-use-cases summary::after {
    content: '▼';
    font-size: 0.7em;
    transition: transform 0.3s ease;
}

.info-use-cases details[open] > summary::after {
    transform: rotate(180deg);
}

.info-use-cases details p {
    padding: 0 15px 15px 15px;
    margin: 0;
    font-size: 0.9em;
    color: var(--text-color-muted);
    border-top: 1px solid var(--border-color);
    padding-top: 15px;
}

/*
===================================================================
 STILI PER LA GRAFICA DEI CASI D'USO
===================================================================
*/

/* Contenitore principale per i passaggi del caso d'uso */
.use-case-steps {
    position: relative; /* Necessario per posizionare la linea di connessione */
    display: flex;
    flex-direction: column;
    gap: 25px; /* Spazio verticale tra i passaggi */
    padding: 15px 15px 15px 25px; /* Padding interno, con più spazio a sinistra per la linea */
    border-top: 1px solid var(--border-color);
}

/* Ogni singolo passaggio */
.step {
    display: flex;
    align-items: flex-start; /* Allinea l'icona con l'inizio del testo */
    gap: 20px; /* Spazio tra icona e testo */
    position: relative; /* Necessario per la linea di connessione */
}

/* Icona del passaggio */
.step-icon {
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--hover-bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.6em; /* Rende l'emoji più grande */
    border: 2px solid var(--border-color);
}

/* Contenuto testuale del passaggio */
.step-content strong {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--text-color);
}

.step-content p {
    font-size: 0.9em;
    color: var(--text-color-muted);
    margin: 0;
    line-height: 1.6;
}

/* La linea di connessione verticale */
.step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 22px; /* Centrata rispetto all'icona (metà di 45px) */
    top: 50px; /* Inizia sotto l'icona */
    bottom: -25px; /* Si estende fino al passaggio successivo */
    width: 2px;
    background-color: var(--border-color);
}


#image-gen-toggle-btn { background: none; border: none; font-size: 24px; cursor: pointer; margin-right: 10px; color: var(--text-color-muted); padding: 0 5px; }

/* Contenitore per input con icona interna */
.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-icon input {
    width: 100%;
    /* Aggiunge spazio a destra per non sovrapporre il testo all'icona */
    padding-right: 40px; 
}

/* Stile per il pulsante-icona */
.input-with-icon .icon-btn {
    position: absolute;
    right: 10px; /* Posiziona l'icona a 10px dal bordo destro */
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-color-muted);
    padding: 5px;
}

.input-with-icon .icon-btn:hover {
    color: var(--text-color);
}

/* Effetto "Respiro" per la barra di stato durante il lavoro */
.agent-status-header.working {
    background-color: rgba(var(--accent-color-rgb), 0.1);
    border-left: 4px solid var(--accent-color);
    animation: pulse-bg 2s infinite alternate;
}

@keyframes pulse-bg {
    0% { box-shadow: 0 0 5px rgba(var(--accent-color-rgb), 0.1); }
    100% { box-shadow: 0 0 15px rgba(var(--accent-color-rgb), 0.3); }
}

/* Stile per il contatore di velocità */
.speed-meter {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 0.85em;
    color: var(--accent-color);
    margin-right: 10px;
    font-weight: 600;
}

/* Stile per selettori e pulsanti disabilitati (Modalità Missione) */
#model-selector:disabled, 
#prompt-selector:disabled,
#mission-selector:disabled, /* Se mai dovessimo disabilitare anche questo */
#manage-presets-btn:disabled,
#start-meeting-btn:disabled,
#transform-to-project-btn:disabled {
    opacity: 0.4; /* Molto trasparente */
    cursor: not-allowed;
    pointer-events: none; /* Impedisce ogni interazione, anche hover */
    background-color: var(--card-bg-color); /* Mantiene il colore di fondo ma sbiadito */
    border-color: var(--border-color); /* Bordo standard, non focus */
}

/* Rimuoviamo l'effetto hover quando sono disabilitati */
#manage-presets-btn:disabled:hover,
#start-meeting-btn:disabled:hover,
#transform-to-project-btn:disabled:hover {
    background-color: var(--card-bg-color); /* Nessun cambio colore */
    border-color: var(--border-color);
}

/* FIX: Assicura che i contenitori dell'agente occupino tutto lo spazio */
.agent-main-response-content, 
.agent-thoughts-container {
    width: 100%;
    min-width: 100%;
    box-sizing: border-box;
    /* overflow-x: auto;  <-- Rimosso perché gestito dal pre */
}

/* FIX: Assicura che il codice non rompa il layout */
.agent-main-response-content pre,
.agent-thoughts-container pre {
    max-width: 100%;
    white-space: pre-wrap; /* Manda a capo il codice lungo */
    word-wrap: break-word;
}

/* Colore di sfondo leggermente diverso per i pensieri per distinguerli */
.agent-thoughts-container {
    background-color: rgba(0, 0, 0, 0.15); /* Sfondo scuro per contrasto */
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
    border-left: 3px solid var(--accent-color);
}

/* ========= INIZIO BLOCCO RESPONSIVE CORRETTO E UNIFICATO ========= */

/* --- RESPONSIVE MEDIA QUERIES --- */

/* Regole per schermi GRANDI (Desktop > 1024px) */
@media (min-width: 1025px) {
    /* Mostra la sidebar solo sulla pagina della chat */
    body:not(.chat-page) #sidebar {
        display: none;
    }

    #project-files-panel {
        /* Su desktop, il pannello è parte del layout flex. Visibilità gestita da max-width. */
        max-width: 0;
        overflow: hidden;
        border-left-color: transparent;
        transition: max-width 0.3s ease-in-out, border-left-color 0.3s ease; /* Transizione specifica per desktop */
    }
    .app-layout.workspace-visible #project-files-panel {
        max-width: var(--workspace-panel-width);
        border-left-color: var(--border-color);
    }

    
}


/* --- STILI PER IL RESIZER DEL WORKSPACE --- */
.resizer {
    flex-shrink: 0;
    background-color: transparent; /* Invisibile di default */
    width: 10px;
    cursor: col-resize; /* Cursore per il ridimensionamento orizzontale */
    transition: background-color 0.2s;
    position: relative;
    /* Sposta la maniglia leggermente a sinistra per sovrapporsi al bordo */
    margin-left: -5px; 
    z-index: 1000;
    display: none;
}

.app-layout.workspace-visible .resizer {
    display: block; /* <-- NUOVA REGOLA PER MOSTRARLA */
}

.resizer:hover {
    background-color: var(--accent-color); /* Evidenzia la maniglia al passaggio del mouse */
}

/* Quando si trascina, potremmo voler cambiare l'aspetto del body per evitare selezioni di testo accidentali */
body.resizing {
    user-select: none;
    cursor: col-resize;
}


/* Regole per schermi MEDI e PICCOLI (Tablet e Mobile <= 1024px) */
@media (max-width: 1024px) {
    #workspace-toggle-btn span:nth-child(2) {
         display: none; /* Nascondi il testo "Workspace" */
    }
    #workspace-toggle-btn { 
        padding: 6px 8px; /* Padding ridotto */
    }

    #project-files-panel {
        /* Su schermi più piccoli, il pannello è posizionato sopra il contenuto */
        position: fixed; 
        top: var(--navbar-height);
        right: 0;
        height: calc(100% - var(--navbar-height)); 
        z-index: 999; 
        box-shadow: -4px 0 10px rgba(0,0,0,0.1);
        
        /* Assicuriamoci che abbia sempre la sua larghezza */
        max-width: var(--workspace-panel-width);
        
        /* La visibilità è gestita da transform: esce dallo schermo a destra */
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out; /* Transizione specifica per mobile */
    }

    .app-layout.workspace-visible #project-files-panel {
        /* Rientra nello schermo, diventando visibile */
        transform: translateX(0);
    }
}

#selectors-toggle-btn {
    display: none;
}


/* Regole valide solo per schermi PICCOLI (Mobile <= 768px) */
/* --- OTTIMIZZAZIONE MOBILE HEADER v3 (Layout Finale) --- */
/* --- CSS MOBILE FINALE v4 --- */
@media (max-width: 768px) {

    /* --- PULSANTE WORKSPACE SU MOBILE (Floating Action Button) --- */
    #workspace-toggle-btn {
        display: none; 
    }

    #workspace-toggle-btn:not(.hidden) {
        display: flex !important;
        position: fixed;
        
        /* POSIZIONE: In alto, sotto la navbar */
        bottom: 120px; 
        right: 0; /* Attaccato al bordo destro */
        z-index: 1005; /* Sopra al pannello quando esce */
        
        width: 42px;
        height: 42px;
        
        /* Forma a linguetta (arrotondato solo a sinistra) */
        border-radius: 8px 0 0 8px; 
        padding: 0;
        justify-content: center;
        align-items: center;
        
        background-color: var(--card-bg-color);
        border: 1px solid var(--border-color);
        border-right: none; /* Unisce visivamente al bordo schermo */
        
        /* Ombra solo a sinistra */
        box-shadow: -2px 2px 6px rgba(0,0,0,0.1);
        color: var(--text-color);
        
        transition: background-color 0.2s, color 0.2s;
    }
    
    #workspace-toggle-btn svg {
        width: 20px;
        height: 20px;
    }
    
    #workspace-toggle-btn span {
        display: none;
    }
    
    /* Stato attivo (Pannello Aperto) */
    #workspace-toggle-btn.active {
        background-color: var(--accent-color);
        color: white;
        border-color: var(--accent-color);
        
        /* MUOVI IL PULSANTE INSIEME AL PANNELLO */
        right: var(--workspace-panel-width); 
        
        /* Cambia bordo arrotondato per sembrare attaccato al lato destro del pannello */
        border-radius: 8px 0 0 8px; 
        border-right: 1px solid rgba(255,255,255,0.2);
        
        /* Aggiungi transizione fluida per seguire l'apertura */
        transition: right 0.3s ease-in-out, background-color 0.2s;
    }


    #menu-toggle {
        display: block !important; /* Forza visualizzazione */
        background: none;
        border: none;
        font-size: 24px;
        color: var(--text-color);
        cursor: pointer;
        padding: 5px;
        margin-left: 10px; /* Spazio dall'icona user */
    }

    /* Assicura che il contenitore di destra (User + Hamburger) sia visibile */
    .nav-controls-right {
        display: flex !important;
        align-items: center;
        position: absolute; /* Posizionamento assoluto per non interferire col resto */
        top: 10px;
        right: 15px;
        z-index: 21; /* Sopra al toggle dei selettori */
    }
    
    /* Poiché abbiamo messo il pulsante toggle dei selettori (#selectors-toggle-btn) in absolute top-right,
       ora si sovrappone al menu hamburger. Dobbiamo spostare il toggle selettori. */
       
    #selectors-toggle-btn {
        /* Spostiamolo a SINISTRA del gruppo controlli o sotto */
        /* Soluzione migliore: mettiamolo sotto la navbar o a sinistra dei controlli */
        right: 90px; /* 15px (margine) + circa 70px (user + hamburger) */
        top: 8px; /* Allineato verticalmente */
    }
    
    /* Nascondiamo il pulsante Workspace su mobile se presente, per fare spazio */
    #workspace-toggle-btn {
        display: none !important;
    }

    /* FIX NAVBAR MOBILE */
    .navbar {
        display: flex;
        justify-content: space-between; /* Spinge gli elementi ai lati opposti */
        align-items: center;
        width: 100%;
        padding: 0 15px; /* Un po' di margine ai lati */
        box-sizing: border-box; /* Assicura che il padding non rompa la larghezza */
    }

    /* Assicura che i controlli a destra (User, Hamburger) stiano insieme */
    .nav-controls-right {
        display: flex;
        align-items: center;
        gap: 15px; /* Spazio tra user e hamburger */
    }
    
    /* Assicura che il titolo/logo stia a sinistra */
    .navbar-title, .logo-link {
        flex-grow: 1; /* Occupa lo spazio centrale se serve, o sta a sinistra */
        display: flex;
        align-items: center;
    }
    
    #header {
        padding: 12px 15px;
        gap: 0;
        position: relative;
        background-color: var(--card-bg-color);
        border-bottom: 1px solid var(--border-color);
    }

    /* CONTAINER A COMPARSA */
    #selectors-container {
        display: flex;
        flex-direction: column;
        gap: 12px; /* Spazio verticale tra i gruppi */
        width: 100%;
        max-height: 600px;
        opacity: 1;
        margin-top: 10px;
        transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, margin-top 0.3s ease;
        overflow: hidden;
    }

    #selectors-container.collapsed {
        max-height: 0 !important;
        opacity: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        pointer-events: none;
    }

    /* PULSANTE TOGGLE */
    #selectors-toggle-btn {
        position: absolute;
        top: 10px;
        right: 15px;
        width: 36px;
        height: 36px;
        padding: 8px;
        background-color: var(--bg-color);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        color: var(--text-color);
        z-index: 20;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* GRUPPI (Etichetta SOPRA + Select SOTTO) */
    .selector-group {
        width: 100%;
        display: flex;
        flex-direction: column; 
        align-items: flex-start; 
        gap: 4px; 
        background-color: transparent; 
        padding: 0;
        border: none;
    }

    /* Etichette */
    #header label {
        display: block;
        font-size: 0.75em;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--accent-color);
        margin-left: 2px; 
        margin-bottom: 0;
    }

    /* Input e Select */
    #header select {
        width: 100%;
        height: 40px;
        font-size: 15px; /* Evita zoom su iOS */
        background-color: var(--bg-color);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding-left: 10px;
    }

    /* PULSANTI AZIONE: FLEX per adattamento automatico */
    .action-buttons-group {
        display: flex;
        flex-direction: row;
        gap: 8px;
        width: 100%;
        margin-top: 5px;
    }

    /* Stile UNIFICATO per tutti i pulsanti su mobile */
    .action-buttons-group button,
    #transform-to-project-btn {
        flex: 1; /* Si dividono lo spazio equamente */
        height: 44px; /* Altezza comoda per il tocco */
        padding: 0;
        justify-content: center;
        align-items: center;
        
        /* FORZATURA STILE UNIFORME */
        background-color: var(--card-bg-color) !important; 
        border: 1px solid var(--border-color) !important;
        font-weight: 600;
        color: var(--text-color) !important; 
        display: flex !important; 
        border-radius: 8px;
    }

    /* Forza la visibilità del testo */
    .action-buttons-group button span,
    #transform-to-project-btn span {
        display: inline-block !important;
        font-size: 0.85em; 
    }
    
    /* Nasconde le icone SVG per risparmiare spazio */
    .action-buttons-group button svg,
    #transform-to-project-btn svg {
        display: none !important; 
    }
    
    /* Riposiziona Icona Provider */
    #provider-icon {
        position: absolute;
        right: 30px; 
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none; 
        opacity: 0.6;
    }
    /* Bisogna rendere relativo il container del modello per posizionare l'icona */
    .selector-group:has(#model-selector) {
        position: relative;
    }

    /* Nascondi elementi desktop */
    .nav-links-desktop { display: none; }
    #sidebar { display: none; }
}


/* ===================================================================
   STILE PER CENTRARE LA CHAT SU SCHERMI LARGHI (CON SIDEBAR NASCOSTA)
=================================================================== */

/* Applichiamo questa regola solo su schermi più larghi di 1200px */
@media (min-width: 1200px) {
    body.sidebar-collapsed #chat-box {
        padding-left: 15%;
        padding-right: 15%;
        transition: padding 0.3s ease-in-out;
    }

    body.sidebar-collapsed #input-container {
        width: 100%; 
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
        transition: max-width 0.3s ease-in-out;
        position: relative;
    }

    body.sidebar-collapsed #input-area {
        border-top-color: transparent;
    }

    body.sidebar-collapsed #input-container::before {
        content: ''; 
        position: absolute;
        top: 0; 
        left: 50%;
        transform: translateX(-50%);
        width: 100vw; 
        height: 1px; 
        background-color: var(--border-color); 
    }
}



/*
===================================================================
 STILE PER CENTRARE LA CHAT SU SCHERMI LARGHI (CON SIDEBAR NASCOSTA)
===================================================================
*/

/* Applichiamo questa regola solo su schermi più larghi di 1200px */
@media (min-width: 1200px) {
    body.sidebar-collapsed #chat-box {
        
        /* 
         * LA SOLUZIONE: Aggiungiamo un padding orizzontale al contenitore 
         * dei messaggi. Questo crea un'area di contenuto più stretta 
         * al centro, senza modificare la larghezza totale della finestra.
         * Le bolle si allineeranno ai bordi di questa nuova area interna.
        */
        padding-left: 15%;
        padding-right: 15%;

        /* Una transizione per rendere il cambio più fluido */
        transition: padding 0.3s ease-in-out;
    }

    body.sidebar-collapsed #input-container {
        /*
         * LA SOLUZIONE: Applichiamo la stessa logica di centratura
         * al contenitore principale della barra di input (#input-container).
         * Questo centrerà tutto il blocco in una volta sola.
        */
        
        /* Assicura che il contenitore possa essere centrato */
        width: 100%; 
        
        /* Imposta la stessa larghezza massima delle bolle per un allineamento perfetto */
        max-width: 1000px;
        
        /* Centra il blocco orizzontalmente */
        margin-left: auto;
        margin-right: auto;

        /* Aggiunge una transizione fluida anche qui */
        transition: max-width 0.3s ease-in-out;
    }

    body.sidebar-collapsed #input-container {
        /* 1. Lo rendiamo un punto di riferimento per il posizionamento del nuovo bordo. */
        position: relative;
    }

    body.sidebar-collapsed #input-area {
        /* 2. Nascondiamo il suo bordo superiore originale per non averne due. */
        border-top-color: transparent;
    }

    /* 3. Creiamo un "falso bordo" usando un pseudo-elemento ::before. */
    body.sidebar-collapsed #input-container::before {
        content: ''; /* Obbligatorio per far apparire lo pseudo-elemento */
        position: absolute;
        top: 0; /* Lo posizioniamo esattamente sopra il contenitore dell'input */
        
        /* La magia per estenderlo a tutta la larghezza dello schermo */
        left: 50%;
        transform: translateX(-50%);
        width: 100vw; 
        
        height: 1px; /* Lo spessore del nostro nuovo bordo */
        background-color: var(--border-color); /* Il colore del bordo */
    }
}



/* ===================================================================
   FIX JSON & CODICE NEI PENSIERI (Stile Trasparente)
   =================================================================== */

/* Rimuove il "box scuro" dai blocchi JSON/Codice dentro i pensieri */
.agent-thoughts-container pre {
    background-color: transparent !important; /* Rimuove lo sfondo scuro */
    border: none !important;                  /* Rimuove il bordo */
    padding: 0 !important;                    /* Rimuove il padding interno del box */
    margin: 5px 0;
    width: 100%;
    
    /* Stile del testo */
    font-family: 'SFMono-Regular', Consolas, monospace; /* Mantiene il font monospazio per allineamento */
    font-size: 0.9em;
    color: var(--text-color-muted);           /* Usa il colore grigio dei pensieri, non il bianco acceso */
    
    /* Gestione a capo */
    white-space: pre-wrap;                    /* Va a capo se troppo lungo */
    word-wrap: break-word;
    overflow: visible;                        /* Niente barre di scorrimento interne */
}

/* Assicura che il tag code interno non abbia stili contrastanti */
.agent-thoughts-container code {
    background-color: transparent !important;
    color: inherit !important;                /* Eredita il colore muted dal pre */
    border: none !important;
    padding: 0;
    display: inline;                          /* Si comporta come testo normale */
}

/* Nasconde eventuali pulsanti "Copia" che potrebbero apparire sui pensieri (opzionale, per pulizia) */
.agent-thoughts-container .copy-code-btn {
    display: none !important;
}

.clean-json-thought {
    white-space: pre-wrap;       /* Mantiene l'indentazione e gli a capo del JSON */
    word-wrap: break-word;       /* Evita che righe lunghe rompano il layout */
    font-family: 'SFMono-Regular', Consolas, monospace; /* Font tecnico ma pulito */
    font-size: 0.9em;            /* Leggermente più piccolo del testo normale */
    color: var(--text-color-muted); /* Grigio discreto */
    background-color: transparent;  /* NESSUN SFONDO */
    border: none;                   /* NESSUN BORDO */
    padding: 5px 0;                 /* Spaziatura minima */
    margin: 0;
    line-height: 1.4;
}

/* Assicuriamoci che il contenitore padre non aggiunga stili indesiderati */
.agent-thoughts-container {
    background-color: transparent !important;
    border: none !important;
    padding-left: 10px;
    border-left: 2px solid var(--border-color) !important; /* Solo la linea laterale */
}

/* ===================================================================
   STILE "STEALTH" PER AGENTE (Uniformità Totale)
   =================================================================== */

/* 1. Rendi il contenitore dei pensieri totalmente trasparente e integrato */
.persistent-thought,
.agent-thoughts-container {
    background-color: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    box-shadow: none !important;
}

/* 2. Stile del sommario ("Processo di pensiero") - deve sembrare un header discreto */
.persistent-thought summary {
    background-color: rgba(0,0,0,0.05) !important; /* Leggerissimo stacco */
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 10px;
    color: var(--text-color-muted);
    font-size: 0.85em;
    font-weight: 600;
    border: 1px solid transparent;
}
html[data-theme='dark'] .persistent-thought summary {
    background-color: rgba(255,255,255,0.05) !important;
}

/* 3. JSON e Codice nei pensieri: VIA I BOX SCURI */
.agent-thoughts-container pre,
.agent-thoughts-container code,
.clean-json-thought {
    background-color: transparent !important; /* Niente sfondo nero/grigio */
    border: none !important;
    color: var(--text-color-muted) !important; /* Colore testo grigio/discreto */
    padding: 0 !important;
    margin: 5px 0 !important;
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 0.9em;
    white-space: pre-wrap; /* Fondamentale per l'a capo e la larghezza */
    word-wrap: break-word;
    box-shadow: none !important;
}

/* 4. Output dei Tool: renderli simili a messaggi di sistema o codice pulito */
.message.tool-output {
    background-color: transparent !important; /* Rimuove sfondo scuro */
    border: 1px solid var(--border-color); /* Solo un bordo sottile */
    color: var(--text-color);
    width: 50%;
    max-width: 100%;
    box-shadow: none;
}

.tool-output-label {
    color: var(--accent-color);
    font-size: 0.75em;
    margin-bottom: 5px;
}

.message.tool-output pre {
    background-color: rgba(0,0,0,0.03) !important; /* Sfondo appena accennato */
    padding: 10px;
    border-radius: 6px;
    margin: 0;
    color: var(--text-color);
}

.message {
    padding: 10px 15px;
    border-radius: 18px;
    max-width: 85%;
    line-height: 1.4;
    word-break: break-word;
    display: flex;
    flex-direction: column;
    
    /* width: 50%;  <--- CANCELLA ASSOLUTAMENTE QUESTA RIGA!!! */
    width: fit-content; /* Usa questo al suo posto, o niente */
}

/* ===================================================================
   RAFFINAMENTO VISIVO "STACK" (Pensieri + Tool)
   =================================================================== */

/* Riduce lo spazio tra messaggi consecutivi di pensiero/tool per farli sembrare un unico blocco */
.message.assistant-message:has(details.persistent-thought) {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    
}

/* Assicura che il contenuto del tool sia leggibile ma discreto */
details.persistent-thought .clean-json-thought {
    font-size: 0.85em;
    color: var(--text-color-muted);
    font-family: 'SFMono-Regular', Consolas, monospace;
    padding: 10px 5px; /* Un po' di aria dentro quando aperto */
}

/* Stile specifico per il summary del Tool per distinguerlo leggermente dal Pensiero */
details.persistent-thought summary {
    font-size: 0.8em; /* Testo piccolo per l'header */
    opacity: 0.8;
}

/* Opzionale: Cambia colore al summary se è un tool */
.message[data-role="tool"] summary {
    color: var(--accent-color);
}

/* --- STILI PER I GRUPPI DI PROCESSO (Cronologia) --- */

/* La bolla contenitore principale */
.grouped-process-bubble {
    background-color: transparent !important; /* Trasparente per integrarsi */
    padding: 0 !important;
    
    max-width: 100%;
    margin-bottom: 5px;
    border: none;
    box-shadow: none;
}

/* Il tag <details> che racchiude tutto */
.grouped-process-bubble details {
    background-color: rgba(255, 255, 255, 0.03); /* Sfondo leggerissimo */
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}

/* Il sommario cliccabile */
.grouped-process-bubble summary {
    padding: 10px 15px;
    font-size: 0.85em;
    font-weight: 600;
    color: var(--text-color-muted);
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.2);
    transition: background 0.2s;
    list-style: none; /* Nasconde triangolo default */
    display: flex;
    align-items: center;
}

.grouped-process-bubble summary:hover {
    color: var(--accent-color);
    background-color: rgba(0, 0, 0, 0.3);
}

/* Aggiungiamo un'icona personalizzata al summary */
.grouped-process-bubble summary::before {
    content: '▶';
    display: inline-block;
    margin-right: 8px;
    font-size: 0.8em;
    transition: transform 0.2s;
}

.grouped-process-bubble details[open] summary::before {
    transform: rotate(90deg);
}

/* Il contenitore interno degli step */
.grouped-process-bubble .agent-thoughts-container {
    padding: 0;
    background-color: transparent;
    border: none;
    display: flex;
    flex-direction: column;
}

/* --- STILE DEI SINGOLI STEP DENTRO IL GRUPPO --- */
.process-step {
    padding: 12px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.9em;
    position: relative;
}

.process-step:last-child {
    border-bottom: none;
}

/* Etichetta del tipo di step (Tool vs Pensiero) */
.step-label {
    font-size: 0.75em;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 6px;
    color: var(--text-color-muted);
    opacity: 0.7;
}

/* Colori specifici per distinguere a colpo d'occhio */
.step-tool .step-label {
    color: #ff9f43; /* Arancione per i tool */
}

.step-assistant_thought .step-label {
    color: #54a0ff; /* Blu chiaro per i pensieri */
}

/* Contenuto JSON/Codice pulito */
.clean-json-thought {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 0.9em;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text-color-muted);
}

/* Riduciamo il padding dei messaggi markdown dentro i pensieri */
.thought-content p {
    margin: 0;
}

/* --- FIX DIMENSIONI ICONE CONDIVISIONE --- */

/* Icona "Condiviso con me" (Link) */
.convo-title-wrapper span svg {
    width: 16px !important;
    height: 16px !important;
    display: block; /* Assicura che rispetti width/height */
}

/* Icona "Condiviso da me" (User) */
.convo-title-wrapper span[style*="#fd7e14"] svg {
    width: 16px !important;
    height: 16px !important;
    display: block;
}

/* Per sicurezza, forziamo tutti gli SVG dentro il wrapper del titolo */
.convo-title-wrapper svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0; /* Impedisce che vengano schiacciati */
}

/* 
   =========================================================================
   10. OTTIMIZZAZIONE MOBILE DEFINITIVA (Prompts, Projects, Presets)
   =========================================================================
*/

@media (max-width: 768px) {
    
    /* --- 1. Header Pagina Universale --- */
    .page-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 15px !important;
    }
    
    .header-controls {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .header-controls input, 
    .header-controls button {
        width: 100% !important;
        margin: 0 !important;
    }

    /* --- 2. Trasformazione TABELLA -> CARD (Universale) --- */
    
    /* Nascondi header tabelle */
    #prompts-table thead,
    #projects-list-container table thead,
    #presets-list-container table thead {  /* <--- AGGIUNTO */
        display: none !important;
    }

    /* Blocchi principali */
    #prompts-table, #prompts-table tbody,
    #projects-list-container table, #projects-list-container table tbody,
    #presets-list-container table, #presets-list-container table tbody { /* <--- AGGIUNTO */
        display: block !important;
        width: 100% !important;
    }

    /* RIGHE -> CARD */
    #prompts-table tbody tr,
    #projects-list-container table tbody tr,
    #presets-list-container table tbody tr { /* <--- AGGIUNTO */
        display: flex !important;
        flex-direction: column !important;
        position: relative !important;
        background-color: var(--card-bg-color) !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 12px !important;
        margin-bottom: 15px !important;
        padding: 15px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
    }

    /* CELLE -> BLOCCHI */
    #prompts-table td,
    #projects-list-container table td,
    #presets-list-container table td { /* <--- AGGIUNTO */
        display: block !important;
        width: 100% !important;
        padding: 4px 0 !important;
        border: none !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }

    /* --- 3. STILI SPECIFICI PER CONTENUTO (Adattivi) --- */

    /* Stella Preferiti (Sempre in alto a destra) */
    /* Nota: Assumiamo che la stella sia sempre nella prima colonna (td:first-child) o abbia classe .favorite-col */
    #prompts-table td:first-child,
    #projects-list-container table td:first-child,
    #presets-list-container table td:first-child {
        position: absolute !important;
        top: 15px !important;
        right: 15px !important;
        width: auto !important;
        padding: 0 !important;
    }

    /* Nome Elemento (Assumiamo sia la 2° colonna per Prompts/Presets, 3° per Projects) */
    /* Projects ha il pulsante Start come 2°, quindi il nome è 3° */
    #prompts-table td:nth-child(2),
    #presets-list-container table td:nth-child(2) {
        font-size: 1.2em !important;
        font-weight: 700 !important;
        color: var(--text-color) !important;
        margin-bottom: 5px !important;
        padding-right: 40px !important; /* Spazio stella */
    }

    /* Project Name (Speciale) */
    #projects-list-container table td:nth-child(3) {
        font-size: 1.2em !important;
        font-weight: 700 !important;
        color: var(--text-color) !important;
        margin-bottom: 5px !important;
        padding-right: 40px !important;
    }

    /* Descrizione / Modello / Prompt */
    #prompts-table td:nth-child(3),
    #presets-list-container table td:nth-child(3), /* Modello */
    #presets-list-container table td:nth-child(4) { /* Prompt */
        font-size: 0.9em !important;
        color: var(--text-color-muted) !important;
        margin-bottom: 5px !important;
    }
    
    /* Etichette per Presets */
    #presets-list-container table td:nth-child(3)::before { content: "Modello: "; font-weight: 600; }
    #presets-list-container table td:nth-child(4)::before { content: "Prompt: "; font-weight: 600; }

    /* Tags */
    .tags-input {
        width: 100% !important;
        margin-top: 5px !important;
    }

    /* Azioni (Sempre l'ultima colonna) */
    #prompts-table td:last-child,
    #projects-list-container table td:last-child,
    #presets-list-container table td:last-child {
        border-top: 1px solid var(--border-color) !important;
        padding-top: 15px !important;
        margin-top: 10px !important;
        display: flex !important;
        justify-content: flex-end !important;
        gap: 10px !important;
    }

    /* Pulsanti Azione espansi */
    .actions button {
        flex: 1 !important;
        justify-content: center !important;
        padding: 10px !important;
    }
}

/* === GESTIONE IPHONE PWA / FULLSCREEN === */
@media all and (display-mode: standalone) {
    
    body {
        /* Aggiunge spazio in alto per il Notch */
        padding-top: env(safe-area-inset-top);
        
        /* IMPORTANTE: Non mettiamo padding-bottom al body qui, 
           perché romperebbe il layout flexbox a tutta altezza.
           Lo gestiremo nell'input container. */
        
        height: 100vh; /* Forza altezza viewport */
        background-color: var(--card-bg-color); /* Copre eventuali buchi */
    }

    /* Fix Navbar in alto */
    .main-header {
        /* Aggiungiamo un po' di spazio extra sopra */
        padding-top: max(10px, env(safe-area-inset-top)); 
        height: auto; 
        min-height: var(--navbar-height);
    }

    /* Fix Input Container in basso (LA PARTE CHE CHIEDEVI) */
    #input-container {
        /* Aggiungiamo padding in fondo uguale all'area sicura dell'iPhone + 10px di respiro */
        padding-bottom: calc(env(safe-area-inset-bottom) + 10px) !important;
        
        /* Assicuriamo che lo sfondo copra quest'area extra */
        background-color: var(--card-bg-color); 
    }

    /* Se usi il menu mobile, anche lui deve rispettare l'area sicura */
    #mobile-menu {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
}