/* === Global Style — Gabriele Cripezzi === */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Rokkitt:wght@400;700&display=swap');

:root {
  --color-bg: #121212;
  --color-text-light: #f4f4f4;
  --color-text-accent: #07a701;
  --font-title: 'Rokkitt', sans-serif;
  --font-body: 'Lato', sans-serif;
}

body, h1, h2, h3, h4, h5, h6, p, figure, dl, dd {
  margin: 0;
  padding: 0;
}

/* Imposta una baseline per tutti i paragrafi del sito e ripristina il margine verticale */
p {
    font-size: 1rem; 
    margin-bottom: 1.5rem;
}

/* Regola la dimensione e lo spazio dei paragrafi all'interno del contenitore chat */
.chat-entry p {
    font-size: 1rem; 
    margin-bottom: 1rem; 
}

body {
  background: var(--color-bg);
  color: var(--color-text-light);
  font-family: var(--font-body);
  line-height: 1.6;
}

hr {
    display: block;
    margin-block-start: 3em;
    margin-block-end: 3em;
    margin-inline-start: auto;
    margin-inline-end: auto;
    color: gray;
    unicode-bidi: isolate;
    overflow: hidden;
    border-style: solid;
    border-width: 1px;
}


/* === GLOBAL LINKS === */
a {
  color: var(--color-text-accent);
  text-decoration: none;
  transition: color .25s ease;
}
a:hover {
  color: #ffe29c;
  text-decoration: none;
}

/* === HEADINGS PERSONALIZZATI === */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-title);
  color: var(--color-text-accent);
  font-weight: 400;
  line-height: 1;
  margin-bottom: 0.8rem;
}

/* h1 - Titolo principale */
h1 {
  font-size: 2.7rem;
  margin-top: 0;
  margin-bottom: 1rem;
}

/* h2 - Sottotitolo importante */
h2 {
  font-size: 2rem;
  margin-top: 1rem;
  margin-bottom: 0.8rem;
}

/* h3 - Sezione */
h3 {
  font-size: 1.8rem;
  margin-top: 1.8rem;
  margin-bottom: 0.7rem;
}

/* h4 - Sottosezione */
h4 {
  font-size: 1.3rem;
  margin-top: 1.5rem;
  margin-bottom: 0.6rem;
}

/* h5 - Gruppo */
h5 {
  font-size: 1.1rem;
  margin-top: 1.2rem;
  margin-bottom: 0.5rem;
  color: #ddd; /* Leggermente più chiaro per differenziare */
}

/* h6 - Elemento piccolo */
h6 {
  font-size: 1rem;
  margin-top: 1rem;
  margin-bottom: 0.4rem;
  color: #bbb;
  font-weight: 300;
}

/* Headings all'interno delle chat entry */
.chat-entry h1,
.chat-entry h2,
.chat-entry h3,
.chat-entry h4,
.chat-entry h5,
.chat-entry h6 {
  margin-top: 1.2rem;
  margin-bottom: 0.6rem;
}

/* Riduzioni per schermi piccoli */
@media (max-width: 768px) {
  h1 { font-size: 2.2rem; }
  h2 { font-size: 1.8rem; }
  h3 { font-size: 1.5rem; }
  h4 { font-size: 1.25rem; }
  h5 { font-size: 1.05rem; }
  h6 { font-size: 0.95rem; }
}

/* === HEADERS DESKTOP (Stile unificato) === */

/* Header BASE: Contiene gli stili comuni e il look ridotto (Page Header) */
.main-header { /* Modificato da .home-header, .page-header */
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    /* Padding ridotto per tutte le pagine */
    padding: 15px 0 10px; 
    text-align: center;
}
.main-header .site-logo {
    display: block;
    width: 100%;
    text-align: center;
    font-family: var(--font-title);
    font-size: 2.5rem;
    color: var(--color-text-accent);
    letter-spacing: 1px;
    margin-bottom: 0; /* Unificato */
}
.main-header .site-tagline {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 1.1rem; /* Tagline piccola per tutti */
    color: #797979; /* Colore più scuro per tutti */
    margin-top: 0;
    text-align: center;
    margin-bottom: 10px; /* Spazio ridotto prima del menu per tutti */
}
.main-header .main-menu { /* Modificato da .home-header .home-menu, .page-header .home-menu */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 8px 0;
    margin-bottom: 0; /* Imposto a zero per eliminare lo spazio fisso e lo shift */
    text-align: center;
}
.main-header .main-menu a {
    color: var(--color-text-light);
    font-size: 0.95rem; /* Testo menu piccolo/uniforme */
    font-weight: 400; 
    letter-spacing: .2px;
    padding: 5px 8px;
    margin: 0 8px;
}
.main-header .main-menu a:hover {
    color: var(--color-text-accent);
}

/* Header HOME (Override - Mantengo solo le classi per compatibilità futura/CSS esterni, ma rimuovo i cambiamenti di stile) */
.home-header {
    /* Rimuovo gli override di padding/font-size/color per unificare l'aspetto */
    padding: 15px 0 10px; /* Uniformato */
}

.home-header .site-tagline {
    font-size: 1.1; /* Uniformato */
    color: #797979; /* Uniformato */
    margin-bottom: 10px; /* Uniformato */
}
.home-header .main-menu { /* Modificato .home-menu in .main-menu */
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Uniformato */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Uniformato */
    padding: 8px 0; /* Uniformato */
}
.home-header .main-menu a { /* Modificato .home-menu in .main-menu */
    font-size: 0.95rem; /* Uniformato */
    font-weight: 400; /* Uniformato */
}


/* === NAV MENU — DEFINITIVO (rimuovo i vecchi stili che interferiscono) === */

.nav-container, .nav, .nav ul, .nav ul li a {
    /* Rimuovo i vecchi stili del nav non più usati per evitare conflitti */
    display: contents; 
}

/* FIX: Reset completo colore slider */
.featured-slider a.slide-inner {
    color: #f4f4f4 !important;
}

.featured-slider a.slide-inner h3 {
    color: #07a701 !important;
}


/* === MAIN LAYOUT === */
.main-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 5%;
}

.content-layout {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem;
}

/* === TAB STYLES === */
.tab-container {
    margin-top: 2rem;
    margin-bottom: 3rem;
    padding-top: 1px; /* Evita il margine collasso */
}

/* FIX 1: Forza la visualizzazione orizzontale delle tabs */
.tab-nav {
    display: flex; /* CRITICO: Rende i link affiancati */
    border-bottom: 1px solid #333; /* Linea di base */
    margin-bottom: 2rem;
}

.tab-link {
    display: block;
    text-align: center;
    padding: 0 1.5rem; /* Padding laterale per spaziatura */
    margin-right: 1.5rem; /* Spazio tra le tab */
    border-bottom: 3px solid transparent; /* Bordino inferiore di default */
    transition: all 0.25s ease;
    color: #999 !important; /* Testo non selezionato */
    /* FIX: Rimuovo margini superflui se ce ne sono */
    margin-top: 0; 
    margin-bottom: 0;
}

/* Stile per il titolo h3 all'interno della tab */
.tab-link .tab-title {
    font-family: var(--font-title);
    font-size: 1.5rem; /* Un po' più grande di h3 standard */
    font-weight: 700;
    margin-top: 0.8rem; /* Spazio in alto */
    margin-bottom: 0.7rem; /* Spazio in basso */
    color: inherit; /* Eredita il colore dal .tab-link */
    transition: color 0.25s ease;
}

/* Tab Attiva */
.tab-link.active {
    border-bottom-color: var(--color-text-light); /* Bordino bianco richiesto */
    background-color: #333; /* Grigiastro leggero per lo sfondo */
    border-radius: 4px 4px 0 0;
    color: var(--color-text-accent) !important; /* Testo giallo per la tab attiva */
}

.tab-link.active .tab-title {
    color: var(--color-text-accent) !important; /* Forza il titolo in giallo */
}

/* Hover su tab non attiva */
.tab-link:not(.active):hover {
    color: var(--color-text-light) !important;
}

.tab-link:not(.active):hover .tab-title {
    color: var(--color-text-light) !important;
}

/* === LISTE ARCHIVIO === */

.list-container ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.list-container li {
    /* FIX 3: Aggiungo separatore sottile tra le voci */
    padding-bottom: 1.5rem; 
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #222; /* Riga fine per separare */
    transition: background-color 0.2s ease;
}

.list-container li:last-child {
    border-bottom: none; /* Rimuove il separatore dall'ultima voce */
    margin-bottom: 0;
    padding-bottom: 0;
}

.list-container li:hover {
    background-color: rgba(255, 255, 255, 0.03); /* Leggero hover */
    border-radius: 4px;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: -10px;
    margin-right: -10px;
    /* FIX 3: Mantieni il separatore anche all'hover, se non è l'ultimo elemento */
    border-bottom: 1px solid #444; 
}

.list-container li a {
    display: block;
    text-decoration: none;
    color: inherit;
    /* FIX 3: Ripulisco il padding dell'hover se la riga è il separatore */
    padding: 0; 
}

.list-container li h4 {
    /* FIX: Imposta il colore giallo di default */
    color: var(--color-text-accent); 
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    transition: color 0.2s ease;
}

.list-container li a:hover h4 {
    /* All'hover, usa un giallo leggermente più chiaro (come il link hover globale) */
    color: #ffe29c; 
}

/* FIX 2: Sottotitoli/Excerpt in bianco */
.list-subtitle, 
.list-excerpt {
    font-size: 1rem;
    color: var(--color-text-light); /* CRITICO: Imposta in bianco */
    margin-bottom: 0.8rem;
    line-height: 1.4;
}

/* FIX 2: Autore in bianco */
.list-author {
    font-size: 0.9rem;
    color: var(--color-text-light); /* CRITICO: Imposta in bianco */
    display: block;
}

/* === COVER / PAGE TITLE === */
.cover-content {
  background: #202020;
  padding: 40px;
  text-align: center;
  border-radius: 8px;
  margin-bottom: 40px;
}

.page-title { /* Aggiungo classe per h1 in page.php */
  font-size: 2.5rem;
  /* FIX: Riduce interlinea e allinea a sinistra (richiesto) */
  line-height: 1.1;
  text-align: left; 
  margin-bottom: 0;
}
.page-subtitle { /* Aggiungo classe per h2 in page.php */
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.5em;
  color: #aaa;
  line-height: 1;
  margin-top: 0;
  margin-bottom: 1.5em;
}

/* NUOVI STILI: Autore e Separatore */
.article-author {
    font-size: 1em;
    color: #ccc; /* Grigio chiaro richiesto */
    margin-top: 1em; 
    margin-bottom: 1em; 
}

.article-separator {
    border: 0;
    height: 1px;
    background: #333; /* Grigio scuro per una riga fine */
    margin-top: 1em;
    margin-bottom: 2em; /* Spazio prima del contenuto */
    width: 100%;
}
/* FINE NUOVI STILI */


.content li { /* NUOVA REGOLA PER SPAZIO TRA ELEMENTI LISTA */
    margin-bottom: 8px; 
}

/* FIX: NUOVO STILE: Sottotitolo Chat (richiesto) */
.chat-subtitle {
    display: block;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1.1rem;
    color: #444; /* Grigio scuro richiesto */
    margin-top: 5px;
    margin-bottom: 25px; /* Spazio sotto il sottotitolo */
    text-align: left;
}

.page-content h3 {
  font-size: 21px;
  margin-top: 25px;
  margin-bottom: 10px;
}

/* === BREADCRUMB === */
.breadcrumb {
  font-size: .9rem;
  margin-bottom: 1.4rem;
}

.breadcrumb a {
  color: var(--color-text-accent);
}
.breadcrumb a:hover {
  color: #fff;
}

/* === CARD GRID === */
.grid, .cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(270px,1fr));
  gap: 1.8rem;
  margin-top: 2rem;
}

.card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 1.2rem;
  transition: all .3s ease;
  overflow: hidden;
}
.card:hover {
  transform: translateY(-6px);
  border-color: var(--color-text-accent);
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}

.card a {
  display: block;
  padding: 2rem;
  color: inherit;
}
.card h3 {
  margin-bottom: 1rem;
}
.card p {
  color: #ddd;
}

/* === CHAT ESSENTIALS === */

/* Nome ruolo con due punti */
.chat-entry > strong {
    font-family: var(--font-title);
    font-size: 1.1em;
    white-space: normal;
}

.chat-entry > strong::after {
    content: ": ";
}

/* Forza font del corpo del messaggio */
.chat-entry p,
.chat-entry li {
    font-family: var(--font-body) !important;
    white-space: normal;
}

.chat-entry li {
    margin-bottom: 5px;
}
/* FINE FIX */


/* === FOOTER === */
.footer, .site-footer {
  text-align: center;
  padding: 25px 5%;
  border-top: 1px solid #333;
  font-size: .8em;
  color: #797979;
}

.menu-toggle {
    display: block !important;
}

#sidebar-menu {
    display: block; /* sarà gestito da layout.css con right:-300px */
}

/* FIX: Nascondi icona sandwich quando sidebar è aperta */
#sidebar-menu.active + .menu-toggle {
    display: none !important;
}

@media (min-width: 900px) {
    .menu-toggle {
        display: none !important;
    }
}

/* === SIDEBAR === */

#sidebar-menu {
    position: fixed;
    top: 0;
    right: -300px; /* Nascosta a destra */
    width: 300px;
    height: 100%;
    background: #0a0a0a;
    box-shadow: -5px 0 15px rgba(0,0,0,0.5);
    transition: right 0.3s ease;
    z-index: 1000;
    padding: 20px;
}

#sidebar-menu.active {
    right: 0;
}

.sidebar-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 1.5rem; /* Ridotta da 1.8rem */
    cursor: pointer;
    color: #fff; /* Colore BIANCO (era giallo) */
    transition: color 0.2s;
}
.sidebar-close:hover {
    color: #07a701; /* Giallo all'hover */
}

/* 3. Stili Header e Menu Sidebar */

.sidebar-logo {
    color: #fff; /* Titolo in bianco */
    font-size: 2.5rem; /* Stessa grandezza di h1/h2 */
    margin-bottom: 0;
    padding-bottom: 0;
    font-family: 'Rokkitt', sans-serif; /* Stesso font del titolo */
}
.sidebar-tagline {
    color: #797979; /* Sottotitolo in grigio */
    font-size: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
}

/* Menu links */
.sidebar-nav {
    display: flex;
    flex-direction: column; 
    border-top: 1px solid rgba(255, 255, 255, 0.1); 
}

.sidebar-link {
    /* FIX: Ingrandiamo il font, aggiungiamo padding e spostiamo a sinistra */
    color: var(--color-text-light); /* Testo bianco per contrasto/enfasi */
    font-size: 1.2em; /* Font più grande */
    text-decoration: none;
    padding: 12px 10px; /* Aggiunto padding laterale */
    display: block;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* Separatori più discreti */
    margin-left: -10px; /* Sposta i link più a sinistra, compensando il padding */
    transition: background 0.2s ease, color 0.2s ease;
}

.sidebar-link:hover {
    color: var(--color-text-accent);
    background: rgba(255, 255, 255, 0.05); /* Leggero sfondo all'hover per effetto pulsante */
}

.intro-container {
        max-width: 100% !important;
        width: 100% !important;
        height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        overflow: hidden !important;
        background-color: #000 !important;
    }

    .intro-container::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw !important; /* Usa viewport width invece di 100% */
        height: 100vh !important; /* Usa viewport height invece di 100% */
        background-image: url('/assets/img/bg-matrix_bw.jpg');
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        z-index: 0;
    }

    .intro-container::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        z-index: 1;
    }

    .intro-wrap {
        position: relative;
        z-index: 2;
        background: rgba(0, 0, 0, 0.5);
        padding: 2.5rem;
        border-radius: 12px;
        border: 1px solid rgba(0, 156, 21, 0.349);
        backdrop-filter: blur(5px);
        max-width: 800px;
        width: 90%;
        margin: 0 auto;
    }


.intro-nav {
    display:none; 
}
.intro-nav a {
    font-size:3rem;
    color:rgba(0, 156, 21, 0.349);
    text-decoration:none;
    padding:0 10px;
    transition:color 0.2s;
}
.intro-nav a:hover {
    color:#fff;
}

.intro-wrap p {
    line-height:1.7;
    margin-bottom:1.2rem;
}
.intro-next {
    margin-top:2rem;
    text-align:center !important; /* FORZA la centratura orizzontale */
}

/* Regola per il container aggiunto in index.php */
.intro-next.centered {
    width: 100%;
    text-align: center;
    /* Rimuovi i margini verticali della regola base se interferiscono */
    margin-top: 2rem; 
    margin-bottom: 0;
}

/* Assicura che il pulsante sia centrato orizzontalmente */
.intro-next.centered #nextStepButton,
.intro-next.centered .btn {
    display: inline-block; /* Cruciale per text-align: center su elementi inline/inline-block */
    /* Assicura che non abbia larghezza del 100% su mobile */
    width: auto; 
    max-width: fit-content;
}

/* Desktop */
@media (min-width: 900px) {
    .main-header .site-logo {
        margin-top: 25px; /* Più margine su desktop */
    }
}

/* Mobile */
@media (max-width: 899px) {
    .sidebar-logo {
        margin-top: 15px; /* Meno margine su mobile */
    }
}

.btn {
    display: inline-block !important;
    width: auto !important;
    max-width: fit-content !important;
    background: #111;
    border: 1px solid #444;
    padding: 0.45rem 1rem;
    color: #07a701 !important;
    text-decoration: none !important;
    border-radius: 6px;
    font-size: 0.95rem;
    line-height: 1;
    transition: background .25s ease;
    white-space: nowrap; /* evita che si allarghi per i ritorni */
}
.btn:hover {
    background: #222;
}

.btn-center {
    text-align: center;
    margin-bottom: 1.5rem;
}

/* ================================================= */
/* === CHAT DETTAGLI E TABELLA (Spostato da page.php) === */
/* ================================================= */

/* Stili per il contenitore del messaggio (chat-entry) */
.chat-entry {
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: 6px;
    border-left: 4px solid;
    color: var(--color-text-light);
    font-size: 1rem;
}

.chat-entry.gc {
    background: #303030;
    border-left-color: #07a701;
}

.chat-entry.ai {
    background: #252525;
    border-left-color: #f90;
}

.chat-entry h3 {
    color: var(--color-text-accent); /* Usa la variabile */
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
}

/* Stili per il footer aggiunto */
.chat-footer {
    text-align: center;
    margin-top: 3rem;
    padding: 1.5rem 0;
    border-top: 1px solid #222;
    color: #777;
    font-size: 0.85rem;
}

/* --- STILI PER LA TABELLA MARKDOWN --- */
.chat-entry table {
    width: 100%; 
    max-width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    overflow-x: auto; 
    display: block; 
}

.chat-entry th,
.chat-entry td {
    padding: 10px;
    border: 1px solid #444;
    vertical-align: top;
    text-align: left;
}

.chat-entry td {
    word-wrap: break-word; 
    overflow-wrap: break-word;
}
/* ------------------------------------------ */

/* Stili per il pulsante Archivio Chats (btn-center) */
.btn-center {
    text-align: center;
    margin-bottom: 1.5rem;
}


/* ------- splash multistep ----------------*/

.hidden-step {
    display: none !important;
}

.btn-accent {
    display: inline-block;
    padding: 8px 10px;
    border: 1px solid var(--color-text-accent); 
    border-radius: 4px;
    font-size: .8em;
    font-weight: 300;
    color: var(--color-text-accent) !important; /* Giallo */
    text-decoration: none !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    background-color: transparent;
    transition: background-color 0.25s ease, color 0.25s ease;
    margin-top: 30px; /* Spazio sopra il pulsante */
}

.btn-accent:hover {
    color: var(--color-bg) !important; /* Testo del colore dello sfondo (nero/scuro) */
    background-color: var(--color-text-accent); /* Sfondo giallo al passaggio del mouse */
    cursor: pointer;
}


/* === Stili Modal Correttivi per Contenuto Tag === */

    /* Nascondi il titolo generale del modal per i tag, poiché il tag ha il suo <h1> nel contenuto */
    /* #overlay-title {
        display: none; 
    } */

    /* PUNTO 3 FIX: Titoli più grandi per i tag nel modal */
    #content-box h1 { 
        font-family: var(--font-title, 'Rokkitt', sans-serif);
        font-size: 2.2rem;
        color: var(--color-text-accent); /* Usa il colore accentuato */
        text-align: center;
        margin-bottom: 1.5rem;
        margin-top: 0;
    }
    #content-box h2 {
        font-family: var(--font-body, 'Lato', sans-serif);
        font-size: 1.3rem;
        color: var(--color-text-light);
        margin-top: 1rem;
        margin-bottom: 0.8rem;
    }
    
    /* PUNTO 1 FIX: Stile lista senza inline */
    .posts-list-modal {
        list-style-type: disc;
        padding-left: 20px;
        margin-bottom: 1rem;
    }
    
    .posts-list-modal li {
        margin-bottom: 8px;
        font-size: 1.1rem;
    }
    
    .posts-list-modal a {
        color: var(--color-text-accent); /* Giallo */
        text-decoration: underline;
    }

    /* Stile per il messaggio "altri N post" */
    .tag-more-info {
        text-align: center;
        font-size: 0.9rem;
        color: #999;
        margin-top: 15px;
    }

/* ===== STILI MODAL TAGS ===== */
.tag-modal-content {
    font-family: var(--font-body);
    color: var(--color-text-light);
}

.tag-modal-content h1 {
    font-family: var(--font-title);
    font-size: 2.2rem;
    color: var(--color-text-accent);
    margin-bottom: 0.5rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid rgba(248, 195, 80, 0.3);
    text-align: center;
}

.tag-posts-count {
    font-size: 0.95rem;
    color: #aaa;
    text-align: center;
    margin-bottom: 1.5rem;
    font-style: italic;
}

.tag-posts-list {
    list-style-type: none !important;
    padding-left: 0 !important;
    margin-bottom: 1.5rem !important;
}

.tag-posts-list li {
    margin-bottom: 0.8rem !important;
    padding-bottom: 0.8rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: border-color 0.2s ease;
}

.tag-posts-list li:last-child {
    border-bottom: none !important;
}

.tag-posts-list li:hover {
    border-bottom-color: rgba(248, 195, 80, 0.5) !important;
}

.tag-posts-list a {
    color: #ddd !important;
    text-decoration: none !important;
    font-size: 1.05rem;
    line-height: 1.4;
    display: block;
    padding: 0.2rem 0;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.tag-posts-list a:hover {
    color: var(--color-text-accent) !important;
    padding-left: 5px;
}

.tag-more-info {
    font-size: 0.9rem;
    color: #888;
    text-align: center;
    font-style: italic;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.2);
}

.tag-no-posts {
    color: #888;
    font-style: italic;
    text-align: center;
    margin: 1.5rem 0;
}

/* Stile uniforme per tutti i modal (posts, chats, tags) */
#content-box {
    background: rgba(32, 32, 32, 0.95) !important;
    border: 1px solid rgba(248, 195, 80, 0.2) !important;
    font-family: var(--font-body) !important;
}

#content-box h1,
#content-box h2,
#content-box h3 {
    font-family: var(--font-title) !important;
    margin-top: 1.2rem !important;
    margin-bottom: 0.8rem !important;
}

#content-box p {
    line-height: 1.6 !important;
    margin-bottom: 1rem !important;
}

#content-box ul,
#content-box ol {
    margin-left: 0 !important;
    margin-bottom: 1.2rem !important;
}

#content-box li {
    margin-left: 1.5rem !important;
    margin-bottom: 0.5rem !important;
}    


#overlay-content {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

#overlay-content .tag-modal-content {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: rgba(30, 30, 30, 0.95) !important;
    padding: 20px !important;
    border-radius: 8px !important;
    color: #eee !important;
}

#overlay-content .tag-modal-content h1 {
    color: #07a701 !important;
    font-size: 1.8rem !important;
    margin-bottom: 1rem !important;
    text-align: center !important;
}

#overlay-content .tag-posts-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 1rem 0 !important;
}

#overlay-content .tag-posts-list li {
    padding: 10px !important;
    margin-bottom: 8px !important;
    background: rgba(40, 40, 40, 0.8) !important;
    border-radius: 4px !important;
    border-left: 3px solid #07a701 !important;
}

#overlay-content .tag-posts-list a {
    color: #eee !important;
    text-decoration: none !important;
    font-size: 1rem !important;
}

#overlay-content .tag-posts-list a:hover {
    color: #07a701 !important;
}

/* ============================================
   🔥 TOOLTIP DEFINITIVO - VERSIONE FINALE
============================================ */

/* 1. Reset per tutti gli elementi con data-tooltip */
a[data-tooltip] {
    position: relative !important;
    display: inline !important;
    color: var(--color-text-accent) !important;
    text-decoration: none !important;
    border-bottom: 1px dotted var(--color-text-accent) !important;
    cursor: help !important;
    z-index: 1000 !important;
}

/* 2. Sovrascrivi il comportamento hover globale */
a[data-tooltip]:hover {
    color: var(--color-text-accent) !important;
    text-decoration: none !important;
    border-bottom-style: solid !important;
}

/* 3. Il tooltip stesso - Posizionato RELATIVO al link */
a[data-tooltip]:hover::after {
    content: attr(data-tooltip) !important;
    position: absolute !important;
    bottom: calc(100% + 10px) !important; /* Sopra il link */
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: rgba(0, 0, 0, 0.95) !important;
    color: white !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    width: max-content !important;
    max-width: 300px !important;
    min-width: 150px !important;
    z-index: 100000 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
    pointer-events: none !important;
    text-align: left !important;
    word-wrap: break-word !important;
}

/* 4. Freccetta del tooltip */
a[data-tooltip]:hover::before {
    content: '' !important;
    position: absolute !important;
    bottom: calc(100% + 2px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border: 8px solid transparent !important;
    border-top-color: rgba(0, 0, 0, 0.95) !important;
    z-index: 99999 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    pointer-events: none !important;
}

/* 5. Versione per mobile */
@media (max-width: 768px) {
    a[data-tooltip]:hover::after {
        max-width: 250px !important;
        font-size: 13px !important;
        padding: 10px 12px !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
}

/* 6. Per contenitori specifici (splash page) */
.step-content a[data-tooltip],
.intro-content a[data-tooltip],
.content a[data-tooltip] {
    position: relative !important;
    z-index: 1001 !important;
}

.step-content a[data-tooltip]:hover,
.intro-content a[data-tooltip]:hover,
.content a[data-tooltip]:hover {
    z-index: 100001 !important;
}

/* Stili per il Frame di Controllo */
#control-frame {
    flex-direction: column; /* CRITICO: Allinea gli elementi verticalmente */
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex; /* Metti i gruppi di pulsanti in linea */
    gap: 10px;
    z-index: 1000; /* CRITICO: Deve essere sopra la canvas */
    background: rgba(0, 0, 0, 0.4); /* Sfondo leggermente scuro per visibilità */
    padding: 10px;
    border-radius: 5px;
    user-select: none; /* Impedisce la selezione del testo */
}

/* Stili per i pulsanti di controllo */
.control-btn {
    width: 30px;
    height: 30px;
    line-height: 1;
    font-size: 18px;
    font-weight: bold;
    color: #636363; /* Testo giallo come il bordo */
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid #636363; /* Bordino giallo richiesto */
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.1s;
    /* Rimuove i problemi di tocco sui dispositivi mobili */
    -webkit-tap-highlight-color: transparent; 
}

.control-btn:hover {
    background: #07a701;
    color: #000;
}

.control-group {
    display: flex;
    flex-direction: column; /* Metti i pulsanti in colonna */
    gap: 5px;
}



/* Nuovo contenitore per mantenere i 3 gruppi di controlli orizzontali */
#main-controls {
    display: flex;
    gap: 10px;
}

/* Stili per il contenitore del menu espandibile */
#expandable-menu-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Stile per il pulsante toggle, riusa .control-btn con larghezza piena */
#menu-toggle-btn {
    width: 100%; /* Larghezza massima del wrapper, per coprire i controlli */
    cursor: pointer;
}

#menu-arrow {
    display: inline-block;
    margin-left: 5px;
    transition: transform 0.3s ease;
}

/* Stili per il menu (nav) inizialmente nascosto */
#expandable-menu {
    display: flex;
    flex-direction: column;
    /* Proprietà per nascondere e animare l'espansione */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out; 
    padding: 0;
}

/* Stili per i link del menu (usano l'aspetto di control-btn) */
.menu-link {
    /* Essendo un link, deve essere reso come un blocco per avere larghezza e altezza definite */
    display: block; 
    width: 100%;
    height: 30px; /* Altezza come i pulsanti di controllo */
    line-height: 30px; 
    text-align: center;
    text-decoration: none;
    margin-top: 5px; /* Spazio tra i link */
}

/* Classe per espandere il menu */
#expandable-menu.expanded {
    max-height: 350px; /* Un valore sufficientemente grande per contenere tutti i link */
}

/* Ruota la freccia quando il menu è espanso */
#menu-toggle-btn[aria-expanded="true"] #menu-arrow {
    transform: rotate(180deg);
}

/* === PAGINATION STYLES === */
.pagination-nav {
    display: flex;
    justify-content: center; /* Centra orizzontalmente */
    align-items: center;
    gap: 10px; /* Spazio tra i bottoni e il menu */
    margin: 2rem 0;
    padding: 10px 0;
}

.pagination-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--color-text-accent); /* Giallo */
    border: 1px solid var(--color-text-accent);
    border-radius: 4px;
    transition: all 0.2s ease;
}

.pagination-link:hover {
    background-color: var(--color-text-accent);
    color: var(--color-bg); /* Sfondo scuro all'hover */
}

.pagination-link.disabled {
    color: #444 !important;
    border-color: #444 !important;
    cursor: default;
    pointer-events: none; /* Disabilita il click */
}

.page-jumper {
    padding: 8px 12px;
    font-size: 1rem;
    background-color: #333; /* Sfondo scuro come le tab attive */
    color: var(--color-text-light); /* Testo bianco */
    border: 1px solid #555;
    border-radius: 4px;
    cursor: pointer;
    /* Rimuove l'aspetto nativo su alcuni browser per uniformare */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Aggiunge una freccia personalizzata (o usa quella del sistema) */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23f4f4f4%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13%205.1L146.2%20202.7%2018.6%2074.5a17.6%2017.6%200%200%200-24.8%2024.9l130.4%20130.5c6.8%206.8%2017.9%206.8%2024.7%200l130.4-130.5c6.8-6.8%206.8-17.9%200-24.9-6.9-7-18-7-24.8%200z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 8px top 50%;
    background-size: 10px auto;
    padding-right: 30px; /* Spazio per l'icona */
}

/* =========================================== */
/* MOBILE PAGINATION FIX */
/* =========================================== */
@media (max-width: 768px) {
    .pagination-nav {
        flex-wrap: wrap;
        gap: 8px;
        margin: 1.5rem 0;
    }
    
    .pagination-link {
        width: 35px;
        height: 35px;
        font-size: 1.2rem;
    }
    
    .page-jumper {
        font-size: 0.9rem;
        padding: 6px 10px;
        padding-right: 25px;
        background-size: 8px auto;
        background-position: right 6px top 50%;
    }
}


#content-box.is-loading-tab {
    transition: none !important; 
    transition-duration: 0s !important; /* Forza durata a zero */
    
    /* Manteniamo le dimensioni per non farlo collassare */
    min-height: 500px !important; 
    max-height: 90vh !important; 
}

/* Stili per il Modal Archivio (Larghezza e Altezza Maggiorate) */
.archive-modal-large,
.tag-modal-large {
    max-width: 900px !important;
    width: 90% !important;
    max-height: 90vh !important;
    padding: 20px !important;
    transition: all 0.3s ease-in-out;
}

/* Specifico per tag-modal-large se hai bisogno di personalizzazioni extra */
.tag-modal-large {
    /* Eventuali personalizzazioni extra per i tag */
}

/* === MOBILE FIX PER ARCHIVIO TAG === */
@media (max-width: 768px) {
    .archive-modal-large {
        padding: 0 !important; /* ZERO PADDING su mobile */
        width: 100vw !important; /* Occupa tutta la larghezza */
        max-width: 100vw !important;
        max-height: 100vh !important; /* Occupa tutta l'altezza */
        height: 100vh !important;
        border-radius: 0 !important; /* Angoli squadrati */
        margin: 0 !important;
    }
    
    /* Il contenuto dentro l'archivio su mobile */
    .archive-modal-large .content-layout {
        padding: 15px !important; /* Solo qui un po' di padding */
        margin: 0 !important;
    }
    
    /* Le tabs su mobile dentro l'archivio */
    .archive-modal-large .tab-nav {
        padding: 10px 15px !important;
        margin: -15px -15px 15px -15px !important; /* Compensa il padding del content-layout */
        background: rgba(25, 25, 25, 0.95) !important;
    }
    
    /* Lista contenuti su mobile dentro l'archivio */
    .archive-modal-large .list-container {
        padding: 0 5px !important;
    }
    
    /* Items della lista su mobile dentro l'archivio */
    .archive-modal-large .list-container li {
        padding-left: 5px !important;
        padding-right: 5px !important;
        margin-left: -5px !important;
        margin-right: -5px !important;
    }
}

/* Resto del tuo CSS esistente... */
@media (max-width: 768px) {
    /* Contenitore delle tabs - scroll orizzontale */
    .tab-nav {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 10px;
        margin-bottom: 1.5rem;
        gap: 5px;
    }
    
    .tab-nav::-webkit-scrollbar {
        display: none;
    }
    
    /* Link delle tab - dimensioni ridotte */
    .tab-link {
        flex: 0 0 auto;
        min-width: fit-content;
        padding: 8px 12px !important;
        margin-right: 0 !important;
        font-size: 13px;
        border-bottom: 2px solid transparent !important;
    }
    
    /* Titoli delle tab più piccoli */
    .tab-link .tab-title {
        font-size: 14px !important;
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
        font-weight: 600;
        white-space: nowrap;
    }
    
    /* Tab attiva - stile mobile */
    .tab-link.active {
        border-bottom-color: var(--color-text-accent) !important;
        background-color: rgba(248, 195, 80, 0.1);
    }
    
    /* Contenuto della tab - adattamento mobile */
    .tab-content {
        padding: 0;
    }
    
    /* Lista articoli - spaziatura ridotta */
    .list-container li {
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }
    
    .list-container li h4 {
        font-size: 1.2rem;
    }
    
    .list-subtitle,
    .list-excerpt {
        font-size: 0.95rem;
    }
}

@media (max-width: 375px) {
    .tab-link {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }
    
    .tab-link .tab-title {
        font-size: 13px !important;
    }
    
    /* Opzionale: abbrevia i titoli lunghi se necessario */
    .tab-title:nth-child(2) { /* "Articoli Leonard" */
        font-size: 12px !important;
    }
}

.is-loading-tab {
    /* Mantiene il modal grande o almeno l'altezza del modal piccolo durante il caricamento */
    min-height: 400px; /* Scegli un valore sicuro per evitare il collasso */
    transition: none; /* Disattiva la transizione per questa operazione */
}


/* === STRUTTURA LISTE UNIFICATA (Chat, Articoli, Modal) === */
.content ul, 
.content ol,
.chat-entry ul, 
.chat-entry ol,
#content-box ul,
#content-box ol {
    display: block !important;
    margin: 1rem 0 1rem 0.5rem !important;
    padding: 0 !important;
    list-style-position: outside !important;
}

.content ol, .chat-entry ol, #content-box ol {
    list-style-type: decimal !important;
}

.content ul, .chat-entry ul, #content-box ul {
    list-style-type: disc !important;
}

.content li,
.chat-entry li,
#content-box li {
    display: list-item !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.6 !important;
    padding-left: 0.5rem !important;
}


/* Forza tutto il contenuto del modal in Giallo Accento */
#overlay-title h1, 
#overlay-title i,
#content-box h1,
#content-box h2 {
    color: #07a701 !important;
}

/* Bordi sempre gialli per tutti i modal */
#content-box {
    border-left: 4px solid #07a701 !important;
}

/* Modal specifico per Intros: Molto più piccolo e centrato */
#content-box.is-small {
    max-width: 700px !important; /* Leggermente più stretto per le intro */
    width: 90% !important;
    height: auto !important;     /* Forza l'altezza a seguire il contenuto */
    min-height: unset !important; /* Rimuove minimi precedenti */
    max-height: 80vh !important; /* Evita che esca dallo schermo se il testo è lungo */
    padding: 2.5rem !important;
    margin: auto !important;
    display: block !important;   /* Assicura che si comporti come un blocco */
    overflow-y: auto;            /* Se il testo eccede max-height, appare la scrollbar */
}

/* Icona nei titoli */
#overlay-title i {
    color: #07a701 !important;
    font-size: 1.5rem;
    display: inline-block;
    vertical-align: middle;
}