/* Foglio di stile della miniapp.
 *
 * DUE TAVOLOZZE FISSE, E IL TEMA DI TELEGRAM NON LE DECIDE.
 *
 * Fino a ieri fondo e testo arrivavano da var(--tg-theme-*), per seguire il
 * tema dell'utente invece di combatterlo. Quella regola e' caduta, e per un
 * motivo misurato: con Telegram in tema CHIARO le schermate che devono essere
 * scure diventavano bianche con testo nero, 17.8:1 di contrasto - cioe'
 * esattamente l'affaticamento che si voleva togliere - e il questionario
 * chiaro non si distingueva piu' dal resto.
 *
 * Quindi:
 *    schermate di navigazione (elenco, media, keyword, bozza)  ->  SCURE
 *    questionario                                              ->  CHIARO
 * sempre, con qualunque tema abbia l'utente. La barra in alto di Telegram
 * viene allineata da JS (vai() chiama setHeaderColor), cosi' la cornice non
 * litiga con la pagina.
 *
 * DUE REGOLE CHE RESTANO
 *
 * 1. NIENTE ESTREMI, DA NESSUNA DELLE DUE PARTI. Niente nero puro come fondo
 *    e niente bianco puro come testo sullo scuro; niente bianco puro come
 *    fondo e niente nero puro come testo sul chiaro. I fondi hanno dentro una
 *    punta di orchidea - il colore d'accento - perche' un fondo appena
 *    colorato affatica meno di uno perfettamente neutro.
 *
 * 2. LA CLASSE .esempio STA SOTTO IL CAMPO ED E' GRIGIA. Gli esempi non
 *    entrano mai dentro un input, ne' come valore ne' come placeholder: se ci
 *    fossero, resterebbero li' e tutti i personaggi finirebbero per
 *    assomigliarsi.
 *
 * IL TESTO HA TRE LIVELLI, non due: principale, secondario, di servizio. Non
 * sono tre colori diversi ma lo stesso colore spento verso il fondo di
 * quantita' diverse (color-mix). E' la strada piu' semplice - abbassare
 * l'opacita' - fatta in modo che si smorzi solo l'inchiostro: con `opacity`
 * sull'elemento si smorzerebbero anche bordi e pastiglie colorate dentro.
 *
 * IL COLORE D'ACCENTO NON E' IL BLU DI TELEGRAM, ed e' voluto: dentro
 * Telegram tutto e' blu, e un'app che usa lo stesso blu per le sue azioni non
 * si distingue da quello che le sta intorno.
 *
 * I TRE LIVELLI HANNO TRE COLORI, E VALGONO IN TUTTA L'APP:
 *    libero     verde    lo vedono tutti
 *    canale     azzurro  serve un'azione dell'utente (iscriversi)
 *    pagamento  ambra    costa
 * Sul chiaro sono gli STESSI colori in variante piu' scura, mai colori
 * diversi: un livello che cambia colore fra due schermate e' un livello che
 * non si impara piu'.
 */

:root {
    /* --- il fondo -------------------------------------------------------
       Non nero puro, e non neutro. Dentro Telegram il fondo lo da' il tema
       (#17212b sul tema scuro, che gia' tende al blu); qui gli si aggiunge
       una punta di orchidea, cosi' il fondo e' d'accordo col colore
       d'accento invece di essere grigio-e-basta. Un fondo appena colorato
       affatica meno di uno perfettamente neutro.

       color-mix e' recente: la riga prima e' il valore semplice, che resta
       valido se il browser non la conosce. Nel peggiore dei casi si ottiene
       il fondo del tema senza tinta, che e' esattamente com'era prima. */
    --bg:         #1a1622;
    --superficie: #221d2d;

    /* --- il testo, in TRE livelli --------------------------------------
       Non due. Il difetto di prima era che meta' schermata pesava uguale:
       titoli, testi e note tutti allo stesso peso, e quando tutto grida non
       si legge piu' niente.

       I tre livelli non sono tre colori diversi: sono lo STESSO colore
       spento verso il fondo di quantita' diverse. E' la strada piu' semplice
       (abbassare l'opacita') fatta bene: con `opacity` sull'elemento si
       smorzerebbero anche i bordi e le pastiglie colorate dentro, mentre
       mescolando il colore col fondo si smorza solo l'inchiostro.

       Il primo livello e' al 92%: gia' quello toglie il bianco puro, ed e'
       la modifica che si sente di piu' e che quasi non si vede. */
    --testo-base: #e8e6ef;
    --testo:   var(--testo-base);
    --testo:   color-mix(in srgb, var(--testo-base) 92%, var(--bg));
    --testo-2: #9a94a8;
    --testo-2: color-mix(in srgb, var(--testo-base) 66%, var(--bg));
    --testo-3: #8b8893;
    --testo-3: color-mix(in srgb, var(--testo-base) 55%, var(--bg));
    /* Nome storico del secondario: mezzo foglio lo usa gia'. */
    --tenue:   var(--testo-2);

    --collegamento:  #9db8f0;

    /* --- palette nostra -------------------------------------------------- */
    --accento:       #b58ef5;
    --accento-tenue: rgba(181, 142, 245, .15);
    --accento-bordo: rgba(181, 142, 245, .40);
    --accento-testo: #17121f;

    /* I tre livelli restano gli stessi tre colori, schiariti quel tanto che
       basta a reggere su un fondo meno nero: e' una variante dello stesso
       colore, non un colore diverso. */
    --livello-libero:       #5cc088;
    --livello-libero-bg:    rgba(92, 192, 136, .15);
    --livello-canale:       #58b4e0;
    --livello-canale-bg:    rgba(88, 180, 224, .15);
    --livello-pagamento:    #e8b055;
    --livello-pagamento-bg: rgba(232, 176, 85, .16);

    --avviso:    #e8b055;
    --avviso-bg: rgba(232, 176, 85, .14);
    --guasto:    #f47e72;
    --guasto-bg: rgba(244, 126, 114, .14);
    --ok:        #5cc088;

    --bordo:       rgba(154, 148, 168, .22);
    --bordo-forte: rgba(154, 148, 168, .36);

    /* --- scala di spaziatura: quattro passi, non quindici ---------------- */
    --s1: 4px;
    --s2: 8px;
    --s3: 12px;
    --s4: 16px;
    --s5: 24px;
    --s6: 32px;

    --raggio:       12px;
    --raggio-corto: 8px;

    /* Tocco minimo per il dito. E' un'app da telefono: sotto i 44px si
       sbaglia bersaglio, e qui sbagliare bersaglio vuol dire aprire il
       pannello di modifica del media sbagliato. */
    --tocco: 44px;

    /* Interlinea. Su fondo scuro le lettere chiare sanguinano verso lo
       sfondo e le righe si impastano: qui sono piu' larghe che su chiaro. */
    --interlinea: 1.62;
    --interlinea-fitta: 1.5;
}

/* ==========================================================================
   TEMA CHIARO — solo il questionario
   ==========================================================================
   E' l'unica schermata dove si LEGGE e si SCRIVE testo lungo: li' il fondo
   chiaro stanca meno. Il resto dell'app e' navigazione e liste, e sullo scuro
   sta meglio.

   NON e' un secondo foglio di stile: e' la stessa tavolozza con altri valori.
   I componenti non sanno niente di temi - continuano a leggere --bg, --testo,
   --accento - e cambiare una regola qui la cambia in tutte e due i temi.

   TUTTE le variabili vengono ridefinite, comprese quelle che altrove hanno un
   ripiego: se ne restasse fuori una, il questionario sarebbe mezzo chiaro e
   mezzo scuro - ed e' il difetto che si nota di piu' di tutti.

   Sul chiaro valgono le stesse cautele al contrario: niente bianco puro come
   fondo, niente nero puro come testo. Il fondo ha la stessa punta di orchidea
   dello scuro, cosi' le due schermate sono parenti invece che estranee. */
.tema-chiaro {
    --bg:            #f4f2f8;
    --superficie:    #eae6f2;

    --testo-base: #241f2e;
    --testo:   #241f2e;
    --testo:   color-mix(in srgb, #241f2e 92%, var(--bg));
    /* Le percentuali NON sono le stesse dello scuro, ed e' la cosa che si
       sbaglia piu' facilmente copiando un tema nell'altro: mescolando verso il
       bianco il contrasto crolla molto piu' in fretta che mescolando verso il
       nero. Col 48% dello scuro, qui il testo di servizio scendeva a 2.9:1 -
       sotto qualunque soglia leggibile. Questi tre valori danno 11.5, 6.8 e
       5.0 contro 1, cioe' la stessa gerarchia con la stessa leggibilita'. */
    --testo-2: #56525e;
    --testo-2: color-mix(in srgb, #241f2e 76%, var(--bg));
    --testo-3: #67636f;
    --testo-3: color-mix(in srgb, #241f2e 68%, var(--bg));
    --tenue:   var(--testo-2);

    --collegamento: #5a3aa8;

    /* Stessi colori, variante piu' SCURA: su fondo chiaro l'orchidea chiara
       sparisce. E' lo stesso viola, non un altro colore. */
    --accento:       #6b3fc0;
    --accento-tenue: rgba(107, 63, 192, .10);
    --accento-bordo: rgba(107, 63, 192, .35);
    --accento-testo: #ffffff;

    --livello-libero:       #1f7a4d;
    --livello-libero-bg:    rgba(31, 122, 77, .12);
    --livello-canale:       #14688f;
    --livello-canale-bg:    rgba(20, 104, 143, .12);
    --livello-pagamento:    #8a5d0c;
    --livello-pagamento-bg: rgba(138, 93, 12, .13);

    --avviso:    #8a5d0c;
    --avviso-bg: rgba(138, 93, 12, .12);
    --guasto:    #b8332a;
    --guasto-bg: rgba(184, 51, 42, .10);
    --ok:        #1f7a4d;

    --bordo:       rgba(60, 50, 80, .18);
    --bordo-forte: rgba(60, 50, 80, .32);

    /* Su chiaro le righe si impastano meno: l'interlinea puo' stringere un po'
       senza che la lettura ne soffra. */
    --interlinea: 1.55;

    background: var(--bg);
    color: var(--testo);
}

/* Il corpo segue la schermata attiva: senza, intorno al questionario
   resterebbe la cornice scura e il passaggio sarebbe un lampo. La transizione
   e' lenta abbastanza da non sembrare uno sfarfallio e corta abbastanza da non
   sembrare un ritardo. */
body { transition: background-color .22s ease, color .22s ease; }
body.corpo-chiaro {
    background: #f4f2f8;
    color: #241f2e;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: var(--s4) var(--s4) 64px;
    background: var(--bg);
    color: var(--testo);
    font: 16px/var(--interlinea) -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

.schermata { display: none; }
.schermata.attiva { display: block; animation: entra .18s ease-out; }
.nascosto { display: none !important; }

@keyframes entra { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; } }

/* --- gerarchia tipografica ---------------------------------------------
   Il difetto della versione precedente era che tutto pesava uguale: stesso
   corpo, stesso colore, stesso spazio sopra e sotto. Qui i livelli sono
   quattro e si distinguono per DUE cose insieme (corpo e colore), perche' il
   corpo da solo non basta su uno schermo da 380px. */
header { margin-bottom: var(--s5); }

h1 {
    font-size: 26px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -.02em;
    margin: var(--s3) 0 var(--s1);
}

h2 {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--tenue);
    margin: 0 0 var(--s3);
}

.sottotitolo { color: var(--testo-2); font-size: 14px; line-height: var(--interlinea); margin: var(--s1) 0 0; }
.aiuto { color: var(--testo-2); font-size: 13px; line-height: var(--interlinea); margin: var(--s1) 0; }
.attesa { color: var(--tenue); text-align: center; padding: 64px 0; }

/* --- campi -------------------------------------------------------------- */
.campo { margin-bottom: var(--s6); }

label, .campo > .etichetta {
    display: block;
    font-weight: 600;
    font-size: 15px;
    margin-bottom: var(--s2);
}
.numero { color: var(--tenue); font-weight: 400; }

.obbligatoria::after {
    content: " obbligatoria";
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--avviso);
    margin-left: var(--s2);
}

/* L'aiuto sta SOPRA il campo: e' un'istruzione, si legge prima di scrivere. */
.campo .aiuto { margin: 0 0 var(--s2); }

input[type="text"], input[type="number"], input[type="file"], textarea, select {
    width: 100%;
    min-height: var(--tocco);
    padding: 11px var(--s3);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-corto);
    background: var(--bg);
    color: var(--testo);
    font: inherit;
    font-size: 16px;   /* sotto i 16px iOS ingrandisce la pagina al focus */
    transition: border-color .12s, box-shadow .12s;
}
select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--tenue) 50%),
                      linear-gradient(135deg, var(--tenue) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: var(--s6);
}
textarea { resize: vertical; min-height: 110px; line-height: var(--interlinea); }

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--accento);
    box-shadow: 0 0 0 3px var(--accento-tenue);
}

/* ==========================================================================
   NIENTE SCORRIMENTO ORIZZONTALE. MAI.
   ==========================================================================
   Su un telefono, dover scorrere di lato per leggere una frase e' un difetto
   che rende inutile la schermata. Le cause sono sempre le stesse quattro, e
   qui si chiudono tutte insieme invece che una regola per volta:

     1. una parola o un indirizzo lunghissimo che non si spezza -> il testo
        allarga il suo contenitore e con lui la pagina. overflow-wrap:anywhere
        sul corpo lo spezza, ovunque, senza doversene ricordare;
     2. un elemento piu' largo del viewport (una miniatura, un campo, un
        blocco di codice) -> max-width: 100% su tutto cio' che ha una misura
        propria;
     3. un white-space che impedisce il ritorno a capo -> resta ammesso SOLO
        dentro un contenitore che ritaglia (le righe compatte dei media, le
        pastiglie dei filtri), mai su testo che si deve leggere;
     4. una larghezza fissa invece che fluida -> non ce ne sono, e questo
        blocco serve anche a ricordarlo a chi ne aggiungera' una.

   NON si usa overflow-x: hidden sul body: quello nasconde il sintomo e lascia
   il pezzo che sborda fuori dallo schermo, illeggibile e non raggiungibile.
   Qui si toglie la causa. */
body {
    overflow-wrap: anywhere;
}
img, video, textarea, input, select, pre, table {
    max-width: 100%;
}
/* Un figlio di flex non si stringe sotto il suo contenuto se non glielo si
   dice: e' il modo piu' comune in cui una riga lunga allarga tutta la pagina. */
.corpo-riga, .corpo-storica, .testa-esempio, .esempio, .fascia {
    min-width: 0;
}

/* L'esempio sta SOTTO il campo, grigio, in corpo minore. Mai dentro. */
.esempio {
    margin: var(--s2) 0 0;
    padding: var(--s2) var(--s3);
    border-left: 2px solid var(--bordo-forte);
    color: var(--tenue);
    font-size: 13px;
    line-height: var(--interlinea);
    white-space: pre-wrap;
    background: var(--superficie);
    border-radius: 0 var(--raggio-corto) var(--raggio-corto) 0;
}
.esempio .etichetta-esempio {
    display: block;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    margin-bottom: var(--s1);
    opacity: .75;
}

.avviso {
    margin: var(--s2) 0 0;
    padding: var(--s2) var(--s3);
    background: var(--avviso-bg);
    border-radius: var(--raggio-corto);
    color: var(--avviso);
    font-size: 13px;
    line-height: var(--interlinea);
}

.campo.da-completare > .etichetta::before {
    content: "da completare";
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--accento-testo);
    background: var(--avviso);
    padding: 2px var(--s2);
    border-radius: var(--s1);
    margin-right: var(--s2);
    vertical-align: 2px;
}

/* --- scelta singola ----------------------------------------------------- */
.opzioni { display: flex; flex-direction: column; gap: var(--s2); }
.opzione {
    display: flex;
    gap: var(--s3);
    align-items: flex-start;
    min-height: var(--tocco);
    padding: var(--s3);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-corto);
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.opzione input { margin-top: 3px; flex: none; width: auto; min-height: 0; }
.opzione.scelta { border-color: var(--accento); background: var(--accento-tenue); }
.opzione .descrizione { color: var(--tenue); font-size: 13px; display: block; margin-top: 2px; }

/* --- riquadri, elenchi -------------------------------------------------- */
.riquadro {
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: var(--s4);
    margin: var(--s4) 0;
}
.riquadro.regole pre {
    white-space: pre-wrap;
    font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--tenue);
    margin: var(--s2) 0 0;
}

.elenco { display: flex; flex-direction: column; gap: var(--s2); }

.voce {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s3);
    min-height: var(--tocco);
    padding: var(--s3) var(--s4);
    background: var(--bg);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-corto);
    cursor: pointer;
    text-align: left;
    width: 100%;
    font: inherit;
    color: inherit;
    transition: border-color .12s, background .12s;
}
.voce:active { border-color: var(--accento-bordo); background: var(--accento-tenue); }
.voce .meta { color: var(--testo-3); font-size: 13px; margin-top: 2px; }

.pallino {
    font-size: 11px;
    font-weight: 600;
    padding: 3px var(--s2);
    border-radius: 20px;
    background: var(--superficie);
    color: var(--tenue);
    white-space: nowrap;
}
.pallino.acceso { background: rgba(79, 180, 119, .16); color: var(--ok); }

/* --- bottoni ------------------------------------------------------------ */
button.primario {
    width: 100%;
    min-height: var(--tocco);
    padding: 14px;
    border: 0;
    border-radius: var(--raggio-corto);
    background: var(--accento);
    color: var(--accento-testo);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    margin-top: var(--s2);
    transition: filter .12s, transform .06s;
}
button.primario:active { transform: scale(.99); filter: brightness(1.08); }
button.primario:disabled { opacity: .4; cursor: not-allowed; }
button.primario.grande { padding: 17px; font-size: 17px; }

button.collegamento {
    background: none;
    border: 0;
    color: var(--tenue);
    font: inherit;
    font-size: 14px;
    padding: var(--s2) 0;
    cursor: pointer;
    min-height: 0;
    width: auto;
}
button.collegamento:active { color: var(--accento); }

/* Bottone di servizio: tutto cio' che non e' l'azione principale della
   schermata ne' un collegamento di navigazione. */
button:not(.primario):not(.collegamento):not(.chip):not(.icona) {
    width: 100%;
    min-height: var(--tocco);
    padding: 12px;
    border: 1px solid var(--bordo-forte);
    border-radius: var(--raggio-corto);
    background: var(--superficie);
    color: var(--testo);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    margin-top: var(--s2);
}
button:not(.primario):not(.collegamento):not(.chip):not(.icona):disabled {
    opacity: .4; cursor: not-allowed;
}

/* Bottone d'accento in versione leggera: porta a una sezione importante
   senza rubare il posto all'azione principale della schermata. */
button.evidenziato {
    background: var(--accento-tenue) !important;
    border-color: var(--accento-bordo) !important;
    color: var(--testo) !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    text-align: left;
}
button.evidenziato .freccia { color: var(--accento); font-weight: 600; }
button.evidenziato .sotto {
    display: block;
    font-weight: 400;
    font-size: 12px;
    color: var(--tenue);
    margin-top: 2px;
}

.riga-interruttore {
    display: flex;
    align-items: center;
    gap: var(--s3);
    font-weight: 400;
    min-height: var(--tocco);
    margin: var(--s4) 0;
}
.riga-interruttore input { width: auto; min-height: 0; }

.stato-salvataggio { font-size: 13px; color: var(--tenue); min-height: 20px; margin: var(--s2) 0 0; }
.stato-salvataggio.guasto { color: var(--guasto); }
.stato-salvataggio.fatto { color: var(--ok); }

.errore {
    position: fixed;
    left: var(--s3); right: var(--s3); bottom: var(--s3);
    padding: var(--s3) var(--s4);
    background: var(--guasto);
    color: #fff;
    border-radius: var(--raggio-corto);
    font-size: 14px;
    z-index: 10;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}

/* ==========================================================================
   LIVELLI DEI MEDIA - tre colori, validi ovunque
   ========================================================================== */
.liv {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
    padding: 3px var(--s2);
    border-radius: 20px;
    white-space: nowrap;
    text-transform: lowercase;
}
.liv::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}
.liv-libero    { color: var(--livello-libero);    background: var(--livello-libero-bg); }
.liv-canale    { color: var(--livello-canale);    background: var(--livello-canale-bg); }
.liv-pagamento { color: var(--livello-pagamento); background: var(--livello-pagamento-bg); }

/* La barra colorata a sinistra della riga: dice il livello senza occupare
   larghezza, che su 380px e' la risorsa scarsa. */
.bordo-libero    { box-shadow: inset 3px 0 0 var(--livello-libero); }
.bordo-canale    { box-shadow: inset 3px 0 0 var(--livello-canale); }
.bordo-pagamento { box-shadow: inset 3px 0 0 var(--livello-pagamento); }

/* ==========================================================================
   MEDIA: filtri, sezioni, righe compatte
   ========================================================================== */

/* --- barra dei filtri: resta in cima mentre si scorre ------------------- */
.barra-filtri {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bg);
    padding: var(--s2) 0;
    margin: 0 0 var(--s3);
    border-bottom: 1px solid var(--bordo);
}
.riga-chip {
    display: flex;
    gap: var(--s2);
    overflow-x: auto;
    padding-bottom: var(--s1);
    scrollbar-width: none;
}
.riga-chip::-webkit-scrollbar { display: none; }

button.chip {
    flex: none;
    min-height: 34px;
    padding: 6px var(--s3);
    border: 1px solid var(--bordo-forte);
    border-radius: 20px;
    background: var(--superficie);
    color: var(--tenue);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    margin: 0;
    width: auto;
}
button.chip .n { opacity: .7; font-weight: 400; margin-left: 3px; }
/* Gli spenti, staccati dal numero che conta. */
button.chip .n-spenti { color: var(--testo-3); font-weight: 400; margin-left: 3px; font-size: 11px; }
button.chip.attivo {
    background: var(--accento-tenue);
    border-color: var(--accento-bordo);
    color: var(--testo);
}
button.chip.attivo.chip-libero    { border-color: var(--livello-libero);    color: var(--livello-libero); }
button.chip.attivo.chip-canale    { border-color: var(--livello-canale);    color: var(--livello-canale); }
button.chip.attivo.chip-pagamento { border-color: var(--livello-pagamento); color: var(--livello-pagamento); }

/* --- intestazione di sezione ------------------------------------------- */
.sezione { margin: var(--s5) 0 0; }
.testa-sezione {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s3);
    margin-bottom: var(--s2);
}
.testa-sezione h2 { margin: 0; }
.testa-sezione .conteggio { font-size: 12px; color: var(--testo-3); }

/* TRE sezioni, una per livello, ognuna col proprio colore. Il filo sotto
 * l'intestazione fa il lavoro che il testo colorato da solo non farebbe: si
 * vede scorrendo veloce, quando si sta cercando dove finisce un livello e
 * dove comincia il successivo. */
.sezione-libero    .testa-sezione h2 { color: var(--livello-libero); }
.sezione-canale    .testa-sezione h2 { color: var(--livello-canale); }
.sezione-pagamento .testa-sezione h2 { color: var(--livello-pagamento); }
.sezione-libero    .testa-sezione,
.sezione-canale    .testa-sezione,
.sezione-pagamento .testa-sezione {
    padding-bottom: 6px;
    border-bottom: 2px solid var(--bordo);
}
.sezione-libero    .testa-sezione { border-bottom-color: var(--livello-libero); }
.sezione-canale    .testa-sezione { border-bottom-color: var(--livello-canale); }
.sezione-pagamento .testa-sezione { border-bottom-color: var(--livello-pagamento); }

/* --- riga compatta ------------------------------------------------------ */
.griglia-media { display: flex; flex-direction: column; gap: 6px; }

.riga-media {
    display: flex;
    align-items: center;
    gap: var(--s3);
    min-height: 56px;
    padding: var(--s2) var(--s3) var(--s2) var(--s4);
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-corto);
    cursor: pointer;
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    margin: 0;
}
.riga-media:active { border-color: var(--accento-bordo); }
/* Un media spento resta visibile ma smorzato: non si cancella mai nulla, e
   l'elenco deve dire a colpo d'occhio cosa e' in servizio e cosa no. */
.riga-media.spenta { opacity: .45; }
.riga-media.spenta .miniatura { filter: grayscale(1); }

.miniatura {
    width: 40px; height: 40px;
    flex: none;
    object-fit: cover;
    border-radius: 6px;
    background: var(--bordo);
}
/* IL VOCALE NON HA ANTEPRIMA, e fingere una miniatura grigia lo renderebbe
 * indistinguibile da un file mancante. Al suo posto l'onda e la durata: sono
 * le due cose che permettono di ritrovare un vocale in mezzo agli altri. */
.miniatura.vocale {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    background: color-mix(in srgb, var(--superficie) 70%, var(--accento));
    border: 1px solid var(--bordo);
}
.miniatura.vocale .onda {
    font-size: 10px;
    line-height: 1;
    letter-spacing: -1px;
    color: var(--accento);
}
.miniatura.vocale .durata {
    font-size: 10px;
    line-height: 1;
    color: var(--testo-2);
    font-variant-numeric: tabular-nums;
}

/* Le parole del vocale. In corsivo perche' sono parlato riportato, e non
 * vanno confuse con la descrizione del file che sta sopra. */
.testo-detto {
    font-size: 12px;
    font-style: italic;
    color: var(--testo-2);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.testo-detto.mancante { color: var(--testo-3); font-style: normal; }

.miniatura.segnaposto {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--tenue);
    letter-spacing: .04em;
}

.corpo-riga { flex: 1; min-width: 0; }
.riga-titolo {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.chiave {
    font-weight: 700;
    font-size: 14px;
    letter-spacing: -.01em;
}
.chiave-vuota { color: var(--guasto); font-weight: 600; font-size: 13px; }

/* LA DESCRIZIONE DEL FILE, non quella della keyword. Le due si confondono
   facilmente e curare quella sbagliata costa un giro di banco: qui e' grigia,
   piccola e su una riga sola; quella della keyword e' su fondo colorato e
   marcata "nel prompt" (vedi .uso-keyword). */
.descrizione-file {
    color: var(--testo-2);
    font-size: 12.5px;
    line-height: 1.35;
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.riga-media.aperta .descrizione-file { white-space: normal; }

.coda-riga {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    flex: none;
}
.prezzo {
    font-size: 13px;
    font-weight: 600;
    color: var(--livello-pagamento);
    white-space: nowrap;
}
.spento-segno {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--guasto);
}
.numeri-riga { font-size: 11px; color: var(--testo-3); white-space: nowrap; }

/* --- pannello di modifica (quello che c'era gia', solo rivestito) ------- */
.modifica-media {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s2);
    padding: var(--s3);
    margin: 0 0 6px;
    background: var(--superficie);
    border: 1px solid var(--accento-bordo);
    border-top: 0;
    border-radius: 0 0 var(--raggio-corto) var(--raggio-corto);
}
.modifica-media input,
.modifica-media select { margin: 0; font-size: 15px; min-height: 40px; padding: var(--s2); }
.modifica-media .larga { grid-column: 1 / -1; }
.modifica-media button { margin: 0; min-height: 40px; padding: var(--s2); font-size: 14px; }
.modifica-media .etichetta-campo {
    grid-column: 1 / -1;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--testo-3);
    margin: var(--s2) 0 -4px;
}

/* ==========================================================================
   MEDIA: vista per keyword
   ========================================================================== */
.gruppo-keyword {
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: var(--s3) var(--s4);
    margin-bottom: var(--s2);
}
.testa-gruppo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s3);
}
.testa-gruppo .chiave { font-size: 16px; }
.conteggi-livello { display: flex; gap: 6px; flex-wrap: wrap; margin-top: var(--s2); }

/* LA DESCRIZIONE D'USO: e' quella che finisce nel system prompt, e si deve
   vedere che e' un'altra cosa rispetto alla descrizione del file. */
.uso-keyword {
    margin-top: var(--s2);
    padding: var(--s2) var(--s3);
    background: var(--accento-tenue);
    border-left: 3px solid var(--accento);
    border-radius: 0 var(--raggio-corto) var(--raggio-corto) 0;
    font-size: 13px;
    line-height: 1.45;
}
.uso-keyword .marca {
    display: block;
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--accento);
    margin-bottom: 2px;
}
.uso-keyword.mancante { background: var(--avviso-bg); border-left-color: var(--avviso); }
.uso-keyword.mancante .marca { color: var(--avviso); }

/* --- gradini di prezzo -------------------------------------------------- */
.gradini {
    display: flex;
    gap: 5px;
    margin-top: var(--s3);
    flex-wrap: wrap;
}
.gradino {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-width: 52px;
    padding: 5px 6px;
    border-radius: 6px;
    border: 1px solid var(--bordo);
    background: var(--bg);
    font-size: 11px;
}
.gradino .stars { font-weight: 600; color: var(--testo-2); }
.gradino .quanti { font-size: 10px; color: var(--testo-3); }
/* Coperto: almeno tre media su quel gradino. */
.gradino.coperto { border-color: var(--livello-pagamento); }
.gradino.coperto .stars { color: var(--livello-pagamento); }
/* SCOPERTO: sotto i tre, la regola "contenuto diverso a prezzo diverso" resta
   senza materiale e l'offerta viene negata in silenzio. E' il difetto piu'
   difficile da vedere di tutta la libreria, quindi qui e' rosso, pieno, e con
   il numero scritto sopra. */
.gradino.scoperto {
    border-color: var(--guasto);
    background: var(--guasto-bg);
}
.gradino.scoperto .stars, .gradino.scoperto .quanti { color: var(--guasto); }
.gradino.vuoto { opacity: .55; border-style: dashed; }

.nota-gradini {
    margin-top: var(--s2);
    font-size: 12px;
    line-height: 1.4;
    color: var(--guasto);
}

/* --- riepilogo in testa alla schermata media --------------------------- */
.riepilogo-media {
    display: flex;
    gap: var(--s2);
    flex-wrap: wrap;
    margin-bottom: var(--s3);
}
.tessera {
    flex: 1 1 auto;
    min-width: 88px;
    padding: var(--s3);
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-corto);
}
.tessera .numero-grande { font-size: 22px; font-weight: 700; line-height: 1.1; }
.tessera .etichetta-tessera {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--testo-3);
    margin-top: 2px;
}
.tessera.allarme { border-color: var(--guasto); background: var(--guasto-bg); }
.tessera.allarme .numero-grande { color: var(--guasto); }

/* Una tessera per livello, col colore del livello: sono gli stessi tre colori
 * delle righe e delle pastiglie, e vederli qui in cima vuol dire riconoscere
 * subito quale dei tre e' magro. */
.tessera-libero    .numero-grande { color: var(--livello-libero); }
.tessera-canale    .numero-grande { color: var(--livello-canale); }
.tessera-pagamento .numero-grande { color: var(--livello-pagamento); }

/* Gli spenti non entrano nel numero grande: stanno sotto, spenti anche di
 * colore. Sommarli avrebbe fatto credere di avere contenuti che non partono. */
.nota-tessera { font-size: 11px; color: var(--testo-3); margin-top: 3px; }

/* --- caricamento multiplo ---------------------------------------------- */
.esito-caricamento {
    margin-top: var(--s2);
    font-size: 13px;
    color: var(--tenue);
    max-height: 140px;
    overflow-y: auto;
}
.esito-caricamento div { padding: 2px 0; }
.esito-caricamento .ko { color: var(--guasto); }
.esito-caricamento .ok { color: var(--ok); }

.barra-avanzamento {
    height: 4px;
    background: var(--bordo);
    border-radius: 2px;
    overflow: hidden;
    margin-top: var(--s2);
}
.barra-avanzamento > div {
    height: 100%;
    width: 0;
    background: var(--accento);
    transition: width .2s;
}

/* Il riquadro di riepilogo in fondo al questionario: l'azione principale della
   schermata sta li' dentro, quindi si stacca dal resto con un filo d'accento. */
.riquadro.riepilogo {
    border-color: var(--accento-bordo);
    background: linear-gradient(var(--accento-tenue), transparent 60%), var(--superficie);
}

/* --- schermo stretto: 380px e' l'uso vero ------------------------------ */
@media (max-width: 400px) {
    body { padding: var(--s3) var(--s3) 64px; }
    h1 { font-size: 23px; }
    .riquadro { padding: var(--s3); }
    .modifica-media { grid-template-columns: 1fr; }
    .tessera { min-width: 72px; padding: var(--s2) var(--s3); }
    .tessera .numero-grande { font-size: 19px; }
}


/* ==========================================================================
   GLI ORARI DEL PERSONAGGIO
   Tre stati, tre colori, e il ripiego che si vede prima di tutto il resto.
   I colori NON sono i tre dei livelli media: quelli vogliono dire un'altra
   cosa, e riusarli qui insegnerebbe un significato sbagliato.
   ========================================================================== */
.pannello-orari {
    margin-top: var(--s3);
    padding: var(--s3);
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-corto);
}
.pannello-orari.di-ripiego { border-color: var(--guasto); }
.pannello-orari.in-corso { opacity: .55; }

.testa-orari {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    margin-bottom: var(--s2);
}
.stato-orari {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--testo-3);
}
.di-ripiego .stato-orari { color: var(--guasto); }

.avviso-ripiego {
    font-size: 12px;
    line-height: var(--interlinea-fitta);
    color: var(--guasto);
    background: var(--guasto-bg);
    padding: var(--s2);
    border-radius: var(--raggio-corto);
    margin: 0 0 var(--s2);
}

/* Ventiquattro caselle: un buco nella striscia e' una fascia che manca. */
.striscia-ore { display: flex; gap: 1px; height: 26px; }
.striscia-ore .ora {
    flex: 1 1 0;
    border-radius: 2px;
    font-size: 9px;
    color: var(--testo-3);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 1px;
}
.ora-dorme    { background: color-mix(in srgb, var(--superficie) 55%, #6a5acd); }
.ora-occupata { background: color-mix(in srgb, var(--superficie) 55%, #d08a3c); }
.ora-libera   { background: color-mix(in srgb, var(--superficie) 78%, #4aa8d8); }

.legenda-ore {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2) var(--s3);
    margin-top: var(--s2);
    font-size: 11px;
    color: var(--testo-3);
}
.voce-legenda { display: inline-flex; align-items: center; gap: 5px; }
.punto-ora {
    width: 10px; height: 10px;
    border-radius: 3px;
    display: inline-block;
}

.fasce { margin-top: var(--s3); display: flex; flex-direction: column; gap: 6px; }
.fascia { display: flex; align-items: center; gap: 6px; }
.fascia input {
    width: 52px;
    padding: 6px;
    text-align: center;
    margin: 0;
}
.pastiglia-ora {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 999px;
    color: var(--testo);
}

/* LA CONFERMA DI SALVATAGGIO.
   La scheda non ha un tasto salva: ogni campo si salva quando lo lasci. Senza
   questa riga l'unico modo di sapere se era andata era tornarci il giorno
   dopo - e un 400 non si vedeva per niente. Non si dissolve: "non salvato" e'
   una cosa che si deve poter rileggere. */
.esito-orari {
    font-size: 12px;
    line-height: var(--interlinea-fitta);
    padding: 6px var(--s2);
    border-radius: var(--raggio-corto);
    margin-bottom: var(--s2);
}
.esito-orari.ok {
    color: var(--ok);
    background: color-mix(in srgb, var(--ok) 14%, transparent);
}
.esito-orari.ko {
    color: var(--guasto);
    background: var(--guasto-bg);
}

/* I DUE INTERRUTTORI DEL PERSONAGGIO. Sopra la striscia perche' cambiano come
   si legge tutto il resto: non sono una fascia, valgono a qualunque ora. */
.controlli-orari {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    padding: var(--s2) 0 var(--s3);
    margin-bottom: var(--s2);
    border-bottom: 1px solid var(--bordo);
}
.interruttore {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 4px var(--s2);
    cursor: pointer;
    font-size: 13px;
    color: var(--testo);
}
.interruttore input { margin: 0; width: 16px; height: 16px; accent-color: var(--accento); }
.interruttore small {
    grid-column: 2;
    font-size: 11px;
    line-height: var(--interlinea-fitta);
    color: var(--testo-3);
}
.gruppo-velocita { display: flex; flex-direction: column; gap: 5px; }
.scelte-velocita { display: flex; flex-wrap: wrap; gap: 6px; }

/* La riga del sonno con "non dorme mai" acceso: spenta a vista, non sparita.
   Gli orari restano scritti, e spegnendo l'interruttore tornano quelli. */
.fascia.spenta { opacity: .45; }
.fascia select {
    padding: 6px;
    margin: 0;
    font-size: 12px;
}
.fascia .campo-moltiplicatore { width: 58px; }
.fascia .campo-etichetta,
.fascia .campo-scene {
    flex: 1 1 90px;
    min-width: 80px;
    width: auto;
    text-align: left;
    padding: 6px;
    margin: 0;
    font-size: 12px;
}
/* Le scene entrano nel prompt, l'etichetta no: il campo si distingue a
   colpo d'occhio, perche' scriverci dentro ha una conseguenza diversa. */
.fascia .campo-scene {
    flex: 1 1 140px;
    border-left: 2px solid #d08a3c;
}
button.chip.togli-fascia {
    padding: 3px 8px;
    line-height: 1;
    color: var(--testo-3);
}
button.chip.togli-fascia:hover { color: var(--guasto); border-color: var(--guasto); }
button.chip.aggiungi-fascia { margin-top: var(--s2); }

/* ==========================================================================
   LE RISPOSTE STORICHE
   Chiuse di default, grigie, non modificabili. Devono sembrare un archivio,
   non un campo lasciato indietro: chi compila deve vedere quattro domande.
   ========================================================================== */
.storiche {
    margin-top: var(--s5);
    padding: var(--s3);
    background: var(--superficie);
    border: 1px dashed var(--bordo);
    border-radius: var(--raggio-corto);
}
.storiche > summary {
    cursor: pointer;
    font-size: 12px;
    color: var(--testo-2);
    list-style: revert;
}
.storica { margin-top: var(--s3); }
.etichetta-storica {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--testo-3);
    margin-bottom: 2px;
}
.corpo-storica {
    font-size: 13px;
    line-height: var(--interlinea-fitta);
    color: var(--testo-2);
    white-space: pre-wrap;
}
.corpo-storica.extra { margin-top: 4px; font-style: italic; color: var(--testo-3); }


/* ==========================================================================
   GLI SCAMBI DI ESEMPIO
   Dieci righe fisse. Il bordo colorato dice a colpo d'occhio quali sono nel
   prompt e quali no: e' l'unica cosa che conta scorrendo l'elenco.
   ========================================================================== */
.esempio {
    margin-top: var(--s3);
    padding: var(--s3);
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-left: 3px solid var(--bordo);
    border-radius: var(--raggio-corto);
}
.esempio.stato-approvato { border-left-color: var(--livello-libero); }
.esempio.stato-bozza     { border-left-color: var(--livello-pagamento); }
.esempio.stato-scartato  { opacity: .55; }
.esempio.stato-vuoto     { border-left-style: dashed; }

.testa-esempio {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s2);
    /* Il titolo della situazione e la marca stanno sulla stessa riga finche'
     * ci stanno: a 380px, con "corretto a mano" accanto a un titolo lungo,
     * la marca va sotto invece di spingere la riga oltre lo schermo. */
    flex-wrap: wrap;
}
.titolo-esempio { flex: 1 1 auto; min-width: 0; }
.titolo-esempio { font-weight: 600; font-size: 14px; }
.marca-esempio {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--testo-3);
    white-space: nowrap;
}
.stato-approvato .marca-esempio { color: var(--livello-libero); }
.stato-bozza .marca-esempio { color: var(--livello-pagamento); }

/* Lo scambio si legge e si corregge nello stesso posto: un campo di sola
   lettura con accanto un bottone "modifica" sarebbe un passaggio in piu' per
   la cosa che si fa piu' spesso. */
textarea.scambio {
    width: 100%;
    margin-top: var(--s2);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    line-height: 1.45;
    /* PRE-WRAP E NON PRE. Con `pre` gli a capo si tenevano ma le righe lunghe
     * non andavano a capo: per leggere una battuta lunga bisognava scorrere di
     * lato dentro il campo, su un telefono. Gli a capo degli scambi (LUI:/LEI:
     * su righe separate) li tiene anche pre-wrap, che e' l'unica cosa per cui
     * serviva `pre`. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.azioni-esempio {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: var(--s2);
}


/* Il riquadro "da cosa nascono": le risposte del questionario che claude ha
   letto. Grigio e in corpo minore perche' non e' roba da modificare qui - si
   corregge nel questionario - ma va letto insieme agli scambi. */
.da-cosa-nascono .da-questionario {
    white-space: pre-wrap;
    margin-bottom: var(--s3);
}
.conteggio-esempi {
    margin-top: var(--s3);
    padding-top: var(--s2);
    border-top: 1px solid var(--bordo);
    color: var(--livello-pagamento);
}
.conteggio-esempi.completo { color: var(--livello-libero); }

/* ==========================================================================
   MONITORAGGIO
   Pagina di CONSULTAZIONE: niente rosso lampeggiante, niente soglie. Gli
   avvisi restano sul bot, dove arrivano anche col telefono in tasca; qui si
   guarda. Il disegno lo dice: righe etichetta/valore, e l'ora della lettura
   in cima, che e' l'unica cosa che rende leggibile un numero vivo.
   ========================================================================== */
.blocco-monitor {
    margin-top: var(--s3);
    padding: var(--s3);
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-corto);
}
.blocco-monitor h2 {
    margin: 0 0 var(--s2);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--testo-3);
}
.blocco-monitor .aiuto { margin: 0 0 var(--s2); }

.riga-monitor {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s3);
    padding: 6px 0;
    border-top: 1px solid var(--bordo);
    font-size: 13px;
}
.riga-monitor:first-of-type { border-top: 0; }
.nome-monitor { color: var(--testo-3); flex: 0 1 auto; }
.valore-monitor {
    color: var(--testo);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
/* La lista dei non risposti: chi e' in cima e' fermo da piu' tempo. */
.riga-monitor.non-risposto .valore-monitor { color: var(--guasto); }
.monitor-vuoto {
    margin: 0;
    font-size: 13px;
    color: var(--ok);
}

/* UN DATO CHE NON ESISTE NON E' UNO ZERO. Grigio, in corsivo, col perche'
   nel title: si vede a colpo d'occhio che quella riga non e' una misura. */
.non-tracciato {
    color: var(--testo-3);
    font-style: italic;
    border-bottom: 1px dotted var(--bordo-forte);
    cursor: help;
}
.riga-non-tracciato {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 0;
    border-top: 1px solid var(--bordo);
    font-size: 12px;
}
.riga-non-tracciato:first-of-type { border-top: 0; }
.riga-non-tracciato strong { color: var(--testo); font-weight: 600; }
.riga-non-tracciato small {
    color: var(--testo-3);
    line-height: var(--interlinea-fitta);
}

#btn-monitor { margin-bottom: var(--s3); }

/* ==========================================================================
   CONVERSAZIONI, VISTA SINGOLA, FLUSSO
   Sola lettura: niente campi, niente bottoni di modifica. La chat usa i due
   lati come una messaggistica vera - LUI a sinistra, LEI a destra - e tutto
   cio' che non e' una battuta (offerte, acquisti, cambi di fase, invii) e'
   una RIGA CENTRATA: un evento, non una voce del dialogo.
   ========================================================================== */
.barra-bolle {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--s3);
}

/* ---- lista ---- */
#cerca-utente { margin: var(--s2) 0; }
.riga-conversazione {
    display: block;
    width: 100%;
    text-align: left;
    padding: var(--s2) var(--s3);
    margin-bottom: 6px;
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-corto);
    color: var(--testo);
    cursor: pointer;
}
.riga-conversazione:active { border-color: var(--accento-bordo); }
.conv-alto { display: flex; align-items: baseline; gap: 6px; font-size: 14px; }
.conv-freccia { color: var(--testo-3); }
.conv-modella { color: var(--accento); }
.conv-quando { margin-left: auto; font-size: 11px; color: var(--testo-3); }
.conv-basso { margin-top: 3px; font-size: 11px; color: var(--testo-3); }
.paginazione {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    margin-top: var(--s3);
}

/* ---- chat ---- */
#chat-corpo { display: flex; flex-direction: column; gap: 6px; padding-bottom: var(--s5); }
.chat-giorno {
    align-self: center;
    font-size: 11px;
    color: var(--testo-3);
    padding: 2px 10px;
    background: var(--superficie);
    border-radius: 999px;
    margin: var(--s2) 0;
}
.chat-bolla {
    max-width: 82%;
    padding: 7px 10px;
    border-radius: 12px;
    font-size: 14px;
    line-height: var(--interlinea-fitta);
    position: relative;
}
.chat-bolla.di-lui {
    align-self: flex-start;
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-bottom-left-radius: 4px;
}
.chat-bolla.di-lei {
    align-self: flex-end;
    background: var(--accento-tenue);
    border: 1px solid var(--accento-bordo);
    border-bottom-right-radius: 4px;
}
.chat-testo { white-space: pre-wrap; word-break: break-word; }
.chat-ora {
    display: block;
    text-align: right;
    font-size: 10px;
    color: var(--testo-3);
    margin-top: 2px;
}
/* Un messaggio che PORTA un media (la riga "LUI ti ha mandato una foto: ...")
   si distingue da una battuta scritta: bordo tratteggiato e corsivo. */
.chat-bolla.con-media .chat-testo { font-style: italic; color: var(--testo-2, var(--testo)); }
.chat-bolla.con-media { border-style: dashed; }

.chat-evento {
    align-self: center;
    text-align: center;
    font-size: 11px;
    color: var(--testo-3);
    padding: 3px 10px;
    max-width: 92%;
}
.chat-evento.evento-acquisto { color: var(--ok); font-weight: 600; }
.chat-evento.evento-negato { color: var(--guasto); }
.chat-evento.evento-fase {
    border-top: 1px dashed var(--bordo-forte);
    width: 92%;
    padding-top: 6px;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 10px;
}
.chat-evento.evento-invio { color: var(--accento); font-style: italic; }
.carica-prima { align-self: center; margin-bottom: var(--s2); }

/* ---- flusso ---- */
.riga-flusso {
    display: block;
    width: 100%;
    text-align: left;
    padding: 6px var(--s3);
    margin-bottom: 4px;
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-left: 3px solid var(--bordo-forte);
    border-radius: var(--raggio-corto);
    color: var(--testo);
    cursor: pointer;
}
.riga-flusso.di-lei { border-left-color: var(--accento); }
.riga-flusso.di-lui { border-left-color: var(--bordo-forte); }
.flusso-testa {
    display: flex;
    justify-content: space-between;
    gap: var(--s2);
    font-size: 11px;
    color: var(--testo-3);
}
.flusso-chi { white-space: nowrap; }
.flusso-testo {
    margin-top: 2px;
    font-size: 13px;
    line-height: var(--interlinea-fitta);
    word-break: break-word;
}
.flusso-testo.con-media { font-style: italic; color: var(--testo-3); }

/* ---- guadagni nel monitor ---- */
.griglia-guadagni {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s2);
    margin-bottom: var(--s2);
}
.cella-guadagni {
    padding: var(--s2);
    background: color-mix(in srgb, var(--superficie) 60%, var(--bg));
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-corto);
}
.cella-guadagni .quando { font-size: 10px; text-transform: uppercase;
    letter-spacing: .05em; color: var(--testo-3); }
.cella-guadagni .stelle { font-size: 18px; font-weight: 700; color: var(--testo);
    font-variant-numeric: tabular-nums; }
.cella-guadagni .sotto { font-size: 11px; color: var(--testo-3); }

/* ==========================================================================
   PACCHETTO 2: banco, manuale, classifica
   ========================================================================== */
/* IL BANCO NON E' PRODUZIONE, e il colore lo dice prima del testo: cornice
   ambra, intestazione sua. Chi apre questa schermata per sbaglio se ne
   accorge dal primo pixel. */
.schermata.banco { border-top: 3px solid #d08a3c; }
.schermata.banco h1 { color: #d08a3c; }
button.chip.chip-banco { border-color: #d08a3c; color: #d08a3c; }
/* La lista dei run: i TRE NUMERI in ambra, il colore del Banco, cosi'
   scorrendo si legge la colonna dei giudizi senza leggere i nomi. */
.lista-run-banco {
    max-height: 55vh;
    overflow-y: auto;
    margin-bottom: var(--s2);
}
.riga-run-banco[disabled] { opacity: .45; cursor: default; }
.riga-run-banco .run-marcatura {
    color: var(--testo-3);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}
.numeri-banco {
    color: #d08a3c;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.nota-giudice {
    align-self: flex-end;
    max-width: 82%;
    font-size: 11px;
    line-height: var(--interlinea-fitta);
    color: #d08a3c;
    border-left: 2px solid #d08a3c;
    padding: 2px 8px;
    margin-top: -2px;
}

/* La barra della modalita' manuale e il campo di invio. */
.riga-manuale {
    padding: var(--s2) var(--s3);
    margin-bottom: var(--s2);
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-corto);
}
.riga-manuale.accesa { border-color: var(--accento-bordo); }
#chat-invio {
    display: flex;
    gap: var(--s2);
    align-items: flex-end;
    position: sticky;
    bottom: 0;
    width: 100%;
    padding: var(--s2) 0;
    background: var(--bg);
}
#chat-invio.nascosto { display: none; }
/* flex:1 da solo non basta: gli input del progetto hanno una width fissa dal
   foglio generale, e la textarea usciva stretta e verticale. width:auto +
   min-width:0 la fanno riempire davvero la riga, su telefono e su pc. */
#chat-invio textarea {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    min-height: 44px;   /* il min-height globale (110px) qui e' un muro */
    box-sizing: border-box;
    margin: 0;
    resize: vertical;
    font-size: 14px;
    line-height: 1.4;
    padding: 8px 10px;
}
/* IL COLPEVOLE VERO (25/8, secondo giro): button.primario ha width:100% dal
   foglio generale, e con flex-basis:auto quel width E' la base -> il bottone
   si prendeva la riga intera e la textarea collassava stretta e verticale.
   Non era cache: era specificita' sul BOTTONE, non sulla textarea.
   #chat-invio button.primario (1,1,1) batte button.primario (0,1,1). */
#chat-invio button.primario {
    width: auto;
    flex: 0 0 auto;
    margin: 0;
    padding: 11px 16px;
    white-space: nowrap;
}

/* Badge nella lista e nel monitor. */
.badge-top, .badge-manuale {
    font-size: 10px;
    padding: 1px 7px;
    border-radius: 999px;
    margin-left: 4px;
    white-space: nowrap;
}
.badge-top { background: color-mix(in srgb, var(--ok) 20%, transparent); color: var(--ok); }
.badge-manuale { background: var(--accento-tenue); color: var(--accento); }

/* Righe del monitor che aprono la vista singola. */
button.riga-monitor.riga-cliccabile {
    background: none;
    width: 100%;
    cursor: pointer;
    color: var(--testo);
}
.errore-conversazione {
    font-size: 11px;
    color: var(--guasto);
    padding: 0 0 4px 12px;
    border-bottom: 1px dotted var(--bordo);
    word-break: break-word;
}

/* Il controllo media della modalita' manuale. */
#chat-media-pannello {
    margin: var(--s2) 0;
    padding: var(--s2);
    background: var(--superficie);
    border: 1px solid var(--accento-bordo);
    border-radius: var(--raggio-corto);
}
#chat-media-pannello.nascosto { display: none; }
#chat-media-corpo { max-height: 45vh; overflow-y: auto; margin-top: var(--s2); }
.riga-media-catalogo { margin-bottom: 4px; }
#chat-invio .chip { flex: 0 0 auto; margin: 0; align-self: stretch; }

/* Anteprime nel pannello media della manuale. */
.riga-thumb { display: flex; gap: var(--s2); align-items: center; min-width: 0; }
.thumb-testo { flex: 1 1 auto; min-width: 0; }
.thumb-media {
    width: 44px; height: 44px;
    object-fit: cover;
    border-radius: 6px;
    background: var(--bg);
    flex: 0 0 auto;
}
.thumb-vocale {
    width: 44px; height: 44px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: var(--bg);
    border-radius: 6px;
    flex: 0 0 auto;
}
.thumb-vocale small { font-size: 9px; color: var(--testo-3); }
#fs-anteprima { margin: var(--s2) 0; font-size: 13px; color: var(--testo); }
#fs-anteprima img, #fs-anteprima video {
    max-width: 160px;
    max-height: 160px;
    border-radius: var(--raggio-corto);
    display: block;
}
#fs-anteprima.nascosto { display: none; }

/* La riga del sonno accanto alla spunta "non dorme mai" (2/10): ore intere per
 * il sonno, due orari per la finestra del risveglio. Va a capo su un telefono
 * stretto invece di uscire dallo schermo. */
.riga-sonno { flex-wrap: wrap; row-gap: 6px; }
.riga-sonno input[type="time"] { width: 92px; }

/* I SALUTI PREPARATI: una riga per frase, testo largo e fascia accanto. */
.riga-saluto {
    display: flex;
    align-items: center;
    gap: var(--s2);
    margin-top: var(--s2);
}
.riga-saluto input[type=text] { flex: 1; min-width: 0; }
.riga-saluto small { color: var(--testo-3); white-space: nowrap; }
.riga-saluto.nuova { margin-top: var(--s3); }

/* LA REVISIONE LoRA: testi leggibili, differenze evidenti. */
.lora-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin: var(--s2) 0; }
.lora-blocco { margin-top: var(--s3); padding: var(--s3); background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio-corto); }
.lora-testo { white-space: pre-wrap; line-height: 1.5; margin-top: var(--s2); }
.lora-storia { margin-top: var(--s2); font-size: 13px; }
.lora-turno { white-space: pre-wrap; padding: 2px 0; }
.lora-lei { color: var(--testo-3); }
.lora-ultimo .lora-testo { font-weight: 600; }
.lora-tolto { background: #fbd5d5; text-decoration: line-through; }
.lora-messo { background: #cdeccf; }
.lora-bottoni { display: flex; gap: var(--s2); margin-top: var(--s3); flex-wrap: wrap; }
.lora-campo { width: 100%; margin-top: var(--s2); }
/* confronto del revisore (10/10): tre risposte affiancate, le segnalate evidenziate */
.revisore-colonne { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s2); }
.revisore-segnalata { border-color: #d97706; background: #fff7e6; }
.revisore-pezzo { background: #fde68a; }
.revisore-esito { font-size: 12px; color: var(--testo-3); margin-top: var(--s2); }