/* ============================================================================
   LA CHAT - stile della pagina `/chat`.
   Elenco delle conversazioni + stanza aperta; su telefono si alternano. */

:root {
    --chat-sfondo: #f6f3ec;
    --chat-sfondo-elenco: #f8f8f8;
    --chat-sfondo-msg: linear-gradient(135deg, #fbfbfb 0%, rgb(244 244 244) 10%);
    --chat-sfondo-msg-border: #f8f8f8;
    --chat-motivo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='0.07' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 22h36c4 0 7 3 7 7v18c0 4-3 7-7 7H34l-8 8v-8h-8c-4 0-7-3-7-7V29c0-4 3-7 7-7z'/%3E%3Cpath d='M105 18l4 11 11 1-8 8 2 11-9-6-9 6 2-11-8-8 11-1z'/%3E%3Cpath d='M176 32c-3-4-9-4-12 0s-2 10 4 15l8 6 8-6c6-5 7-11 4-15s-9-4-12 0z'/%3E%3Cpath d='M28 98l34-12-11 13 12 8z'/%3E%3Cpath d='M51 99l11-13'/%3E%3Ccircle cx='128' cy='90' r='6'/%3E%3Cpath d='M172 84c4-5 9-5 13 0s9 5 13 0'/%3E%3Cpath d='M172 94c4-5 9-5 13 0s9 5 13 0'/%3E%3Cellipse cx='48' cy='178' rx='10' ry='9'/%3E%3Cpath d='M53 179l5 1-5 2'/%3E%3Cpath d='M118 168c0-11 9-20 20-20-2 13-9 20-20 20z'/%3E%3Cpath d='M118 168l20-20'/%3E%3Ccircle cx='192' cy='172' r='4'/%3E%3Cpath d='M196 172v-22l11 4'/%3E%3Cpath d='M182 208l8 8-8 8-8-8z'/%3E%3C/g%3E%3C/svg%3E");
    --chat-sfondo-media: rgb(244 244 244 / 82%);
    --chat-sfondo-media-text: rgb(4 4 28);
}

[data-theme="dark"] {
    --chat-sfondo: #0f1b24;
    --chat-sfondo-elenco: rgb(4 4 28);
    --chat-sfondo-msg: linear-gradient(135deg, #353518 0%, rgb(4 41 34) 10%);
    --chat-sfondo-msg-border: #51515185;
    --chat-motivo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 22h36c4 0 7 3 7 7v18c0 4-3 7-7 7H34l-8 8v-8h-8c-4 0-7-3-7-7V29c0-4 3-7 7-7z'/%3E%3Cpath d='M105 18l4 11 11 1-8 8 2 11-9-6-9 6 2-11-8-8 11-1z'/%3E%3Cpath d='M176 32c-3-4-9-4-12 0s-2 10 4 15l8 6 8-6c6-5 7-11 4-15s-9-4-12 0z'/%3E%3Cpath d='M28 98l34-12-11 13 12 8z'/%3E%3Cpath d='M51 99l11-13'/%3E%3Ccircle cx='128' cy='90' r='6'/%3E%3Cpath d='M172 84c4-5 9-5 13 0s9 5 13 0'/%3E%3Cpath d='M172 94c4-5 9-5 13 0s9 5 13 0'/%3E%3Cellipse cx='48' cy='178' rx='10' ry='9'/%3E%3Cpath d='M53 179l5 1-5 2'/%3E%3Cpath d='M118 168c0-11 9-20 20-20-2 13-9 20-20 20z'/%3E%3Cpath d='M118 168l20-20'/%3E%3Ccircle cx='192' cy='172' r='4'/%3E%3Cpath d='M196 172v-22l11 4'/%3E%3Cpath d='M182 208l8 8-8 8-8-8z'/%3E%3C/g%3E%3C/svg%3E");
    --chat-sfondo-media: rgb(4 4 28 / 57%);
    --chat-sfondo-media-text: rgb(244 244 244);
}

.chat-wrap {
    /* Le misure e le ombre della chat sono variabili NOSTRE, dichiarate qui (modello di `groups.css`,
       che usa `--gr-*`): i COLORI restano quelli del sito, cosi' chiaro e scuro vengono da soli. */
    --chat-ombra-bolla: 0 1px 2px rgba(0, 0, 0, .07), 0 4px 14px rgba(0, 0, 0, .06);
    --chat-ombra-mia: 0 4px 14px rgba(108, 92, 231, .28);
    /* L'ALONE DELL'EMOJI (27/09/2026): la luce del colore del marchio, quando la mano passa sopra
       un'emoji - nel pannello e nei messaggi. Sta QUI, non sul tasto del pannello (dove era nata): una
       variabile dichiarata su un tasto non esiste fuori da quel tasto, quindi l'emoji di un MESSAGGIO non
       la vedeva e il suo `box-shadow` diventava `none` - il cerchio non si accendeva (misurato in
       `check_chat_emoji.py`, sezione O: crescita si', cerchio 0). Le due righe sono lo stesso colore
       scritto in due modi: `rgba` per i browser che non conoscono `color-mix`, e `color-mix` per gli
       altri, che lo prende dal token del tema invece di scriverlo a mano.

       SUL MESSAGGIO NON E' PIU' UN `box-shadow` (27/09/2026, sera): quello disegna la SCATOLA
       dell'elemento, e il titolare l'ha visto subito ("un border che non segue le forme dell'emoji").
       Li' l'alone e' un `filter: drop-shadow`, che segue il disegno. Il pannello (un tasto tondo vero)
       tiene il suo `box-shadow`. */
    --chat-emoji-alone: rgba(108, 92, 231, 0.22);
    --chat-emoji-alone: color-mix(in srgb, var(--mood-primary) 22%, transparent);
    /* L'ALONE ACCESO (27/09/2026, sera): la stessa luce, piu' viva, per quando l'emoji si muove (il pop, il
       tremolio, la rotazione, la scioglitura) e per l'emoji da sola sotto il mouse. Stesse due righe di
       prima, perche' il motivo e' lo stesso. */
    --chat-emoji-lampo: rgba(108, 92, 231, 0.55);
    --chat-emoji-lampo: color-mix(in srgb, var(--mood-primary) 55%, transparent);
    --chat-griglia: 320px 1fr;
    max-width: 1080px;
    padding-bottom: 24px;
}

/* I titoli delle pagine interne (come "Gruppi"): 1.45rem, peso 800. */
:root {
    --shell-top: calc(38px + env(safe-area-inset-top, 0px));
}

.chat-wrap h1 {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 800;
}

/* Le icone dentro i pulsanti del sito si dimensionano qui: `.mood-btn` non lo fa. */
.chat-wrap .mood-btn svg,
.chat-wrap .mood-btn i[data-lucide] {
    width: 18px;
    height: 18px;
    flex: none;
}

/* ---------- L'avviso di rischio (senza 2FA la chat si apre, ma lo dice) ---------- */
/* Un tono di allarme, non un errore rosso: si usa il colore di avviso del sito. */
.chat-rischio {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 10px 12px;
    background: var(--mood-bg-card);
    border: 1px solid var(--mood-warning);
    border-left: 3px solid var(--mood-warning);
    border-radius: var(--mood-radius-sm);
    color: var(--mood-text);
    font-size: 0.85rem;
    line-height: 1.4;
}

.chat-rischio svg {
    width: 20px;
    height: 20px;
    flex: none;
    color: var(--mood-warning);
}

.chat-rischio p {
    margin: 0;
    flex: 1;
    min-width: 0;
}

.chat-rischio .mood-btn {
    flex: none;
}

/* IL TASTO CHE CHIUDE LA STRISCIA (25/09/2026). Il titolare: "manca il bottone close". Sta in fondo alla
   riga, dopo "Attiva il 2FA": tondo, spento, come le altre x del sito (`.chat-pezzo__via`). Sul telefono
   diventa un bersaglio da dito (44px), non un puntino da centrare col pollice. */
.chat-rischio__via {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--mood-text-muted);
    cursor: pointer;
}

.chat-rischio__via:hover {
    color: var(--mood-text);
    background: var(--mood-bg-hover);
}

.chat-rischio__via svg {
    width: 18px;
    height: 18px;
    color: currentColor;
}

/* SUL TELEFONO LA STRISCIA STA IN DUE RIGHE, NON TRE (25/09/2026). Il titolare: "su mobile non e' */
@media (max-width: 620px) {

    /* DUE RIGHE, OGNUNO AL SUO POSTO (25/09/2026). Con `flex-wrap` il testo finiva schiacciato in una
       colonna stretta (misurato: 122px su sei righe, 155px di striscia) perche' chi si stringe lo decide
       il testo piu' lungo: qui invece la griglia dice riga e colonna a ogni pezzo. */
    .chat-rischio {
        display: grid;
        grid-template-columns: 20px 1fr auto;
        column-gap: 10px;
        row-gap: 8px;
        align-items: start;
    }

    .chat-rischio>svg {
        margin-top: 2px;
    }

    .chat-rischio>p {
        grid-area: 1 / 2 / 2 / 4;
    }

    .chat-rischio>.mood-btn {
        grid-area: 2 / 2;
        justify-self: start;
        margin-left: 30px;
        min-height: 44px;
    }

    .chat-rischio>.chat-rischio__via {
        grid-area: 2 / 3;
        justify-self: end;
        width: 44px;
        height: 44px;
    }

    .chat-rischio>.chat-rischio__via svg {
        width: 20px;
        height: 20px;
    }
}

/* ---------- Le superfici (card del sito) ---------- */
.chat-pannello {
    background: var(--mood-bg-card);
    border: 1px solid var(--mood-border);
    border-radius: var(--mood-radius);
    box-shadow: var(--mood-shadow);
    padding: 22px;
    max-width: 720px;
    margin: 8px auto 0;
}

.chat-pannello li:nth-child(odd),
.chat-pannello li:nth-child(even) {
    background: transparent;
}

/* ---------- I pannelli (la porta, le linee guida) ---------- */
.chat-pannello__titolo {
    margin: 0 0 10px;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--mood-text);
}

/* Il testo della porta: `div` che CONTIENE frasi ed elenchi (non un <p>: non puo' contenerli). */
.chat-pannello__testo {
    color: var(--mood-text-muted);
    line-height: 1.55;
    font-size: 0.92rem;
}

.chat-pannello__testo p {
    margin: 0 0 10px;
}

.chat-pannello__testo p:last-child {
    margin-bottom: 0;
}

.chat-pannello__testo ul {
    margin: 0 0 12px 18px;
    padding: 0;
}

.chat-pannello__testo li {
    margin-bottom: 10px;
}

.chat-pannello__testo li:last-child {
    margin-bottom: 0;
}

.chat-pannello__azioni {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.chat-pannello__azioni .mood-btn {
    margin: 0;
}

/* Il tasto "lo faccio dopo" e' un'uscita SECONDARIA: non deve attirare piu' di quello vero. */
.chat-pannello__azioni .mood-btn#chatSalta2fa {
    border: 1px solid var(--mood-border);
    background: transparent;
    color: var(--mood-text-muted);
}

.chat-pannello__azioni .mood-btn#chatSalta2fa:hover {
    border: 1px solid var(--mood-border);
    background: var(--mood-bg-hover);
    color: var(--mood-text);
}

.chat-regole {
    max-height: 46vh;
    overflow: auto;
    padding-right: 6px;
    margin-bottom: 14px;
}

.chat-regole h3 {
    margin: 14px 0 6px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--mood-text);
}

.chat-regole p,
.chat-regole li {
    color: var(--mood-text-muted);
    line-height: 1.55;
    font-size: 0.9rem;
}

.chat-regole ul {
    margin: 6px 0 0 18px;
    padding: 0;
}

.chat-griglia {
    display: grid;
    grid-template-columns: var(--chat-griglia);
    gap: 14px;
    align-items: start;
}

.chat-elenco {
    background: var(--chat-sfondo-elenco);
}

.chat-elenco,
.chat-stanza {
    border: 1px solid var(--mood-border);
    border-radius: var(--mood-radius);
    box-shadow: var(--mood-shadow);
    /* L'altezza toglie anche l'avviso di rischio, quando c'e': `--chat-avviso` lo scrive il
       JavaScript MISURANDO la striscia (a capo compreso), non indovinandola. */
    height: calc(100vh - var(--shell-top) - 40px - var(--chat-avviso, 0px));
    height: calc(100dvh - var(--shell-top) - 40px - var(--chat-avviso, 0px));
    min-height: 380px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Riferimento per il pulsante "torna in fondo", che galleggia dentro la stanza. */
    position: relative;
}

.chat-stanza {
    background-color: var(--chat-sfondo);
    background-image: var(--chat-motivo);
    background-repeat: repeat;
    background-size: 240px 240px;
}

/* LA COLONNA DELL'ELENCO SCORRE (22/09/2026): la zona delle chiavi non e' piu' un piede fisso che si
   mangia l'elenco utenti (vedi "LA COLONNA SCORRE" piu' sotto). La testa e la ricerca si fermano in alto. */
.chat-elenco {
    overflow-y: auto;
}

.chat-elenco__testa,
.chat-elenco .chat-cerca-box {
    position: sticky;
    z-index: 2;
}

/* La testa copre le righe che le scorrono sotto: senza il suo fondo si vedrebbero passare attraverso. */
.chat-elenco__testa {
    top: 0;
    background: var(--chat-sfondo-elenco);
}

/* La ricerca si ferma SOTTO la testa: `--chat-testa-h` la scrive il JavaScript misurandola (la testa
   cambia altezza con la lingua e col carattere: un numero indovinato sarebbe un altro difetto). */
.chat-elenco .chat-cerca-box {
    top: var(--chat-testa-h, 52px);
    background: var(--mood-bg-hover);
}

.chat-elenco__testa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 14px 8px;
}

/* IL TASTO «NUOVA» ALTO DA DITO (28/09/2026). La prova `check_chat_nuova.py` l'ha misurato alto 26px: era
   `mood-btn-sm` (4px di imbottitura e 0.7rem di carattere), e col dito si sbaglia a premerlo — proprio il
   tasto da cui parte tutto il pannello. Qui prende l'altezza delle altre cose che si toccano nella chat
   (44px); la testa dell'elenco si adegua da sola, e il carattere resta quello piccolo di prima. */
#chatNuova {
    min-height: 26px;
}

/* ---------- Il campo di ricerca: una pillola con l'icona dentro ---------- */
.chat-cerca-box {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 12px 10px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--mood-border);
    background: var(--mood-bg-hover);
    transition: border-color var(--mood-transition), box-shadow var(--mood-transition);
}

.chat-cerca-box:focus-within {
    border-color: var(--mood-primary);
    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.16);
}

.chat-cerca-box>svg {
    width: 17px;
    height: 17px;
    color: var(--mood-text-muted);
    flex: none;
}

.chat-cerca {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 9px 0;
    border: 0;
    background: none;
    color: var(--mood-text);
    font-family: var(--mood-font);
    font-size: 0.88rem;
}

.chat-cerca:focus {
    outline: none;
}

.chat-cerca::placeholder {
    color: var(--mood-text-muted);
}

/* ---------- LA COLONNA SCORRE, LA ZONA DELLE CHIAVI NON RUBA PIU' SPAZIO (22/09/2026) ---------- */
.chat-conversazioni {
    overflow: visible;
    flex: none;
    padding: 0 6px 10px;
}

/* IL DITO CHE TIENE PREMUTO NON DEVE APRIRE IL MENU DI SISTEMA (28/09/2026). Su iPhone la pressione
   lunga su un tasto fa uscire il fumetto di copia/selezione AL POSTO di quello che si sta facendo: senza
   questa riga il menu della riga (l'archivio) non si vedrebbe mai. */
.chat-riga {
    -webkit-touch-callout: none;
}

/* L'ARCHIVIO DELL'ELENCO (28/09/2026). IL TITOLARE: «archivia chat» fra le voci, e «pressione lunga sulla
   riga della conversazione nell'elenco». Le conversazioni messe via stanno in fondo, sotto una linguetta
   che dice quante sono e si apre a tocco. */
.chat-archivio {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--mood-border);
}

.chat-archivio__testa {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: var(--mood-radius);
    background: none;
    color: var(--mood-text-muted);
    font-family: var(--mood-font);
    font-size: 0.84rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.chat-archivio__testa:hover {
    background: rgba(108, 92, 231, 0.14);
    background: color-mix(in srgb, var(--mood-primary) 14%, transparent);
}

.chat-archivio__testa svg {
    width: 17px;
    height: 17px;
    flex: none;
}

.chat-archivio__testa span {
    flex: 1;
}

.chat-archivio__freccia {
    transition: transform var(--mood-transition);
}

.chat-archivio.is-aperto .chat-archivio__freccia {
    transform: rotate(180deg);
}

.chat-archivio__dentro {
    padding-top: 2px;
}

/* La riga di avviso dentro l'elenco (per esempio: «sono tutte archiviate»). */
.chat-elenco__nota {
    margin: 8px 12px;
}

/* Una conversazione nell'elenco */
.chat-riga {
    display: flex;
    gap: 11px;
    align-items: center;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-radius: var(--mood-radius);
    padding: 10px 12px;
    cursor: pointer;
    color: var(--mood-text);
    font-family: var(--mood-font);
    transition: background var(--mood-transition), box-shadow var(--mood-transition);
    margin-bottom: 5px;
}

/* Il tinteggio segue il tema dove `color-mix` e' supportato (modello di mood-ui.css). */
.chat-riga:hover,
.chat-persona:hover,
.chat-menu button:hover {
    background: rgba(108, 92, 231, 0.14);
    background: color-mix(in srgb, var(--mood-primary) 14%, transparent);
}

/* La conversazione aperta si riconosce dal filo viola a sinistra, come nelle app di messaggi. */
.chat-riga.is-attiva {
    background: rgba(108, 92, 231, 0.14);
    background: color-mix(in srgb, var(--mood-primary) 14%, transparent);
    box-shadow: 0px 0px 4px var(--mood-primary);
}

.chat-riga__foto {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    object-fit: cover;
    flex: none;
    border: 1px solid rgb(237 162 25);
    background: rgba(108, 92, 231, 0.14);
    box-shadow: 0 0 0 1px #142dcf;
}

.chat-riga__chi {
    min-width: 0;
    flex: 1;
}

.chat-riga__chi b {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--mood-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-riga__chi span {
    display: block;
    font-size: 0.78rem;
    color: var(--mood-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Chi ha scritto per ultimo senza risposta: anteprima piu' scura e pallino col numero. */
.chat-riga--nuova .chat-riga__chi span {
    color: var(--mood-text);
}

.chat-riga__pallino {
    flex: none;
    min-width: 20px;
    height: 20px;
    border-radius: 999px;
    padding: 0 6px;
    background: var(--mood-primary);
    color: var(--white);
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Le note in piccolo: stessa tinta dei testi secondari del sito. */
/* RIMESSA IL 25/09/2026, PAROLA PER PAROLA. Questa regola e' del titolare (il rigo "1 messaggio che non si */
/* ... E ADESSO LA NOTA SEGUE IL MESSAGGIO DI SOPRA SENZA SALIRCI (27/09/2026). Il `-35px` era tarato quando
   la fila nascosta occupava ancora lo spazio della sua faccia (35 px): senza quella riga, adesso, quei -35 px
   porterebbero la nota SOPRA la bolla precedente. Misurato: con la fila davvero fuori dal documento la nota
   va appoggiata al posto che quella fila lasciava, cioè subito sotto il messaggio di sopra. */
#chatNascosti.chat-nota {
    margin-top: 2px;
    margin-left: 40px;
    background: #f4433612;
    padding: 4px 10px;
    border-radius: 3px 16px 16px 8px;
    width: fit-content;
    margin-bottom: 2rem;
}

.chat-nota {
    font-size: 0.76rem;
    color: var(--mood-text-muted);
    line-height: 1.45;
    font-weight: 400;
}

.chat-elenco .chat-nota {
    padding: 10px 14px 14px;
    margin: 0;
    border-top: 1px solid var(--mood-border);
}

/* ---------- La stanza ---------- */
.chat-vuoto {
    padding: 26px 22px;
    color: var(--mood-text-muted);
    margin: auto;
    text-align: center;
    max-width: 420px;
}

/* L'icona dello stato vuoto: un cerchio tinto, come le icone dei riquadri del sito. */
.chat-vuoto__ico {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 999px;
    color: var(--mood-primary);
    border: 1px solid var(--mood-border);
    background: rgba(108, 92, 231, 0.14);
    background: color-mix(in srgb, var(--mood-primary) 14%, transparent);
}

.chat-vuoto__ico svg {
    width: 26px;
    height: 26px;
}

.chat-vuoto b {
    color: var(--mood-text);
}

.chat-vuoto p {
    margin: 0 0 8px;
}

.chat-vuoto p:last-child {
    margin-bottom: 0;
}

.chat-testa {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--mood-border);
    position: relative;
    z-index: 4;
    background: var(--mood-bg-card);
}

/* Il "torna all'elenco" e il menu': icone del sito, non testo. */
.chat-testa__indietro,
.chat-testa__menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: none;
    color: var(--mood-text-muted);
    cursor: pointer;
    padding: 6px;
    border-radius: var(--mood-radius-sm);
    transition: background var(--mood-transition);
}

.chat-testa__indietro {
    display: none;
}

.chat-testa__indietro svg,
.chat-testa__menu svg {
    width: 20px;
    height: 20px;
}

.chat-testa__indietro:hover,
.chat-testa__menu:hover {
    background: rgba(108, 92, 231, 0.14);
    background: color-mix(in srgb, var(--mood-primary) 14%, transparent);
    color: var(--mood-text);
}

.chat-testa__foto {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    object-fit: cover;
    border: 2px solid var(--mood-primary, #6C5CE7);
    background: var(--mood-bg-hover, #1E1E3A);
}

.chat-testa__chi {
    flex: 1;
    min-width: 0;
    line-height: 1.2;
}

.chat-testa__chi b {
    display: block;
    color: var(--mood-text);
    font-size: 0.95rem;
}

.chat-menu {
    position: absolute;
    right: 12px;
    top: 54px;
    /* Sopra la barra del sito (che e' sticky): il menu' della stanza deve starci davanti. */
    z-index: 200;
    background: var(--mood-bg-card);
    border: 1px solid var(--mood-border);
    border-radius: var(--mood-radius-sm);
    box-shadow: var(--mood-shadow);
    padding: 6px;
    min-width: 230px;
    margin-bottom: 1rem;
}

.chat-menu button {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 9px 10px;
    border-radius: var(--mood-radius-sm);
    color: var(--mood-text);
    font-size: 0.86rem;
    font-family: var(--mood-font);
}

/* LE VOCI DELLA CONVERSAZIONE (28/09/2026): icone e righe, come nel menu del messaggio. Il menu e'
   cresciuto (archivia, esporta, svuota, blocca + i tre interruttori): su uno schermo basso deve poter
   scorrere invece di finire fuori dal bordo. */
#chatMenu {
    max-height: calc(100dvh - 96px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

#chatMenu button {
    display: flex;
    align-items: center;
    gap: 10px;
}

#chatMenu button svg {
    width: 17px;
    height: 17px;
    flex: none;
    color: var(--mood-text-muted);
}

#chatMenu .chat-menu__voce--pericolo,
#chatMenu .chat-menu__voce--pericolo svg {
    color: var(--mood-danger);
}

.chat-menu__titolo {
    margin: 3px 6px 5px;
    font-family: var(--mood-font);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mood-text-muted);
}

.chat-menu__separatore {
    height: 1px;
    margin: 6px 4px;
    background: var(--mood-border);
}

/* LA RIGA CHE CONTA I MEDIA (29/09/2026). Non è una voce da premere: è il conto di quello che la chat tiene
   su questo dispositivo, e sta sopra ai tasti che lo cambiano. Piccola e in grigio, come le note del sito. */
.chat-menu__nota {
    margin: 0 6px 6px;
    font-family: var(--mood-font);
    font-size: 0.74rem;
    line-height: 1.35;
    color: var(--mood-text-muted);
}

/* Un tasto spento deve SEMBRARE spento: «Salva i file in una cartella…» c'è solo dove il navigatore sa
   scrivere in una cartella scelta (Chrome/Edge del computer). Altrove resta, si spegne e lo spiega. */
#chatMenu button:disabled {
    opacity: 0.55;
    cursor: default;
}

/* IL MENU DELLA RIGA DELL'ELENCO (28/09/2026): una finestrella sul punto dove si e' tenuto premuto, come
   quella del messaggio (che e' `fixed` per stare sopra tutto il resto della pagina). */
#chatMenuRiga {
    position: fixed;
    z-index: 1250;
    right: auto;
    top: auto;
    width: max-content;
    min-width: 190px;
    max-width: min(92vw, 300px);
    padding: 6px;
    border: 1px solid var(--mood-border);
    border-radius: 14px;
    background: var(--mood-bg-card);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}

#chatMenuRiga .chat-menu__voce {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--mood-text);
    font-family: var(--mood-font);
    font-size: 0.86rem;
    text-align: left;
    cursor: pointer;
}

#chatMenuRiga .chat-menu__voce svg {
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--mood-text-muted);
}

/* ---------- "Sta scrivendo": la bolla coi tre puntini ---------- */
.chat-msg--scrittura {
    padding: 13px 15px;
}

.chat-punti {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 8px;
}

.chat-punti i {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--mood-text-muted);
    animation: chat-punto 1.2s infinite ease-in-out both;
}

.chat-punti i:nth-child(2) {
    animation-delay: 0.16s;
}

.chat-punti i:nth-child(3) {
    animation-delay: 0.32s;
}

@keyframes chat-punto {

    0%,
    60%,
    100% {
        transform: translateY(0);
        opacity: 0.5;
    }

    30% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .chat-punti i {
        animation: none;
        opacity: 0.85;
    }
}

/* Il nome nell'intestazione quando qualcuno sta scrivendo (prende il posto di "Cifrata end-to-end"). */
.chat-testa__chi .chat-nota.is-scrivendo {
    color: var(--mood-primary);
    font-weight: 600;
}

/* ---------- I messaggi ----------
   Ogni messaggio e' una RIGA (`[foto] bolla`): la bolla ha la coda dal lato di chi scrive, e i
   messaggi ravvicinati della stessa persona si toccano (gruppo), come in un'app di messaggi. */
.chat-messaggi {
    flex: 1;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 16px 16px 2rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 200px;
    scrollbar-width: thin;
    scrollbar-color: var(--mood-border) transparent;
    /* QUESTA RIGA NON E' MIA (27/09/2026). L'ho trovata SOLO sul server, e il file di lavoro non l'aveva:
       e' il «-80px» che infila la fila dei messaggi sotto il compositore. La porto qui invece di
       cancellarla - e' il senso del controllo di `tools/pubblica.sh`, e la ragione per cui si guardano le
       righe una per una e non il numero. Se e' sbagliata, si toglie: ma si toglie SAPENDO di toglierla. */
    margin-bottom: -100px;
}

.chat-messaggi::-webkit-scrollbar {
    width: 8px;
}

.chat-messaggi::-webkit-scrollbar-thumb {
    background: var(--mood-border);
    border-radius: 4px;
}

/* Il separatore di giorno: una pillola al centro, come nelle app di messaggi. */
.chat-giorno {
    align-self: center;
    margin: 10px 0 12px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--mood-bg-hover);
    border: 1px solid var(--mood-border);
    color: var(--mood-text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.chat-fila {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-top: 8px;
}

.chat-fila.chat-fila--loro {
    display: flex;
    /* L'AVATAR DI FIANCO, IN UNA RIGA VERA (25/09/2026). Prima la fila ricevuta era una COLONNA: l'avatar era */
    flex-direction: row;
    align-items: flex-end;
}

.chat-fila--loro .chat-fila__foto {
    /* Il `position: sticky` e il margine negativo servivano al trucco della colonna: qui no. */
    position: static;
    top: auto;
    margin-bottom: 0;
}

.chat-fila--loro {
    justify-content: flex-start;
}

.chat-fila--mio {
    justify-content: flex-end;
}

.chat-fila--mio:last-child,
.chat-fila--loro:last-child {
    /* 5rem e non 2rem: riga del titolare, trovata solo sul server (27/09/2026) e portata qui perche' non
       andasse persa pubblicando. */
    margin-bottom: 5rem;
}

/* Lo spazio e' dato dal primo messaggio del gruppo: gli altri gli stanno appiccicati. */
.chat-fila--attaccata {
    margin-top: 2px;
}

/* LA RIGA NASCOSTA È DAVVERO NASCOSTA (27/09/2026). Il titolare: «quando elimini un messaggio o lo nascondi
   ... ora rimane appeso l'avatar». La causa era qui: `nascondiBolla()` (chat.js) mette `hidden` sulla fila, ma
   quell'attributo vale solo per il `display: none` del foglio del BROWSER, e una regola d'autore la batte —
   `.chat-fila { display: flex }` (poco sopra). Risultato misurato a schermo: la bolla spariva (`.chat-msg` non
   ha nessun `display` d'autore) e la FACCIA di chi aveva scritto restava lì, appesa, da sola.
   `!important` e non il solo ordine di scrittura: `.chat-fila.chat-fila--loro` pesa quanto `.chat-fila[hidden]`
   e in questo file scrivono più sessioni — una riga che deve sparire non può dipendere da chi arriva dopo.
   E DA OGGI C'È ANCHE LA COLONNA (29/09/2026): la bolla non è più figlia diretta della fila ma di
   `.chat-msg__corpo`, che è anche lui un `display: flex` (colonna) — quindi ha bisogno della stessa regola,
   altrimenti nascondere la bolla lascierebbe a schermo l'ora e le spunte. */
.chat-fila[hidden],
.chat-msg[hidden],
.chat-msg__corpo[hidden] {
    display: none !important;
}



/* E LE BOLLE DELLO STESSO AUTORE RESTANO ALLINEATE (25/09/2026). Nella riga "attaccata" l'avatar non c'e' */
.chat-fila--loro.chat-fila--attaccata {
    padding-left: 43px;
}

/* LA FILA CHE SE NE VA: L'EFFETTO «ELIMINATO» (26/09/2026). Il titolare: «Effetto "cancellazione stile
   Telegram" quando eliminiamo un messaggio un allegato un media un audio». La fila non sparisce di colpo:
   l'altezza VERA si blocca in pixel (la mette `filaCheSparisce()`, in chat.js), poi si scende a zero mentre
   la bolla scivola e si dissolve, e le righe di sotto salgono al suo posto.
   PIU' LUNGA E PIU' VISTOSA (27/09/2026). Il titolare, davanti alla misura - uscita in 349 ms su Chrome e
   336 ms su WebKit - ha scelto «piu' lunga e piu' vistosa»: adesso e' mezzo secondo, la bolla scivola piu'
   lontano (34 px invece di 20) e si rimpicciolisce di piu' (.78 invece di .85), con un velo di sfocatura
   piu' spesso. La rete di sicurezza in `filaCheSparisce()` si e' alzata con lui (900 ms, non piu' 620):
   senza quello, un motore che non manda `transitionend` taglierebbe l'animazione a meta'.
   DUE CLASSI E NON UNA: la prima dichiara il movimento e il taglio del contorno, la seconda i valori di
   arrivo. Cosi' quando il valore cambia la transizione ESISTE gia' - e non si affida alla fortuna di ogni
   motore (misurato su Chrome il 26/09/2026).
   IL TAGLIO SI ACCENDE SOLO QUI: le reazioni e i tasti azione della bolla stanno FUORI dal suo contorno
   (posizionati assoluti, chat.css:812 e 1705) e un `overflow: hidden` fisso sulla fila li mozzerebbe.
   E `will-change` solo mentre si muove: su una stanza intera di righe ferme sarebbe memoria sprecata. */
.chat-fila--sparisce {
    overflow: hidden;
    pointer-events: none;
    /* LA RIGA IN USCITA NON SI FA SCHIACCIARE DALLA STANZA (27/09/2026). Il titolare: «non vedo l'effetto
       quando elimino». La causa era qui, e non si vedeva leggendo il foglio: `#chatMessaggi` e' un contenitore
       FLESSIBILE in colonna (chat.css:677), e in flexbox l'altezza minima automatica di una voce (`min-height:
       auto`, che la tiene grande quanto il suo contenuto) vale SOLO finche' il suo `overflow` e' `visibile`.
       Con `overflow: hidden` - che la riga prende QUI, una riga sopra - quel limite cade a zero: se la stanza
       e' piu' piena dello spazio disponibile, il motore schiaccia la voce CHE STA USCENDO fino a zero. Misurato
       col moto ridotto acceso: riga alta 0 px, con la bolla ancora dipinta a 92 px dentro (clippata), e niente
       - nessuna transizione, perche' con quel sistema la dissolvenza e' di sola opacita' - a mascherare il
       salto. `flex-shrink: 0` toglie la riga dalla distribuzione: l'altezza la decide la riga stessa, e il
       posto si libera come deve - con la compressione animata per chi vede il movimento, e togliendo la riga
       dal documento per chi no. */
    flex-shrink: 0;
    will-change: opacity, transform, max-height;
    transition: opacity .5s ease,
        transform .5s cubic-bezier(.4, 0, .2, 1),
        max-height .5s ease,
        margin .5s ease,
        padding .5s ease;
}

.chat-fila--via {
    opacity: 0;
    transform: scale(.78) translateX(-34px);
}

/* IL POSTO SI LIBERA MENTRE LA RIGA ESCE - PER CHI VEDE IL MOVIMENTO (27/09/2026). Prima queste righe
   stavano nella regola di sopra, per tutti: chi ha chiesto «Riduci movimento» vedeva la stanza COMPRIMERSI
   sotto il dito mentre la bolla spariva di colpo - il contrario di quello che quella preferenza chiede.
   Adesso la compressione dello spazio e' solo di chi il movimento lo vede; per l'altro la riga si dissolve
   ferma, e il posto si libera quando la riga viene tolta dal documento (chat.js). */
@media (prefers-reduced-motion: no-preference) {
    .chat-fila--via {
        /* `!important` perche' l'altezza di partenza e' scritta dal JS sull'attributo `style`. */
        max-height: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* I MIEI SCIVOLANO DALL'ALTRA PARTE: la mia coda e' a destra, e sparire verso sinistra sembrerebbe un
   rientro invece di un'uscita. */
.chat-fila--mio.chat-fila--via {
    transform: scale(.78) translateX(34px);
}

/* E la bolla si scioglie: un velo di sfocatura durante l'uscita. Vale per tutto quello che c'e' dentro -
   testo, vocale, foto, video - perche' e' la BOLLA a sciogliersi, non il suo contenuto. */
.chat-fila--sparisce .chat-msg {
    transition: filter .46s ease;
}

.chat-fila--via .chat-msg {
    filter: blur(3px);
}

/* A CHI HA CHIESTO AL SISTEMA DI NON MUOVERE NIENTE NON SI MUOVE NIENTE - MA L'USCITA SI VEDE (27/09/2026).
   IL TITOLARE: «io non vedo l'effetto quando elimino o nascondo che svanisce.. va via secco». La causa era
   qui: con «Riduci movimento» acceso la riga veniva TOLTA di colpo, senza nessuna dissolvenza - e quella
   preferenza di sistema non chiede «non farmi capire cosa succede», chiede «non muovermi lo schermo».
   Adesso si dissolve (sola opacita', .18s) e nient'altro si muove: l'altezza non si comprime (vedi la regola
   `no-preference` piu' sopra), la bolla non scivola, non si rimpicciolisce e non si sfoca. Il posto si libera
   quando la riga se ne va, e la rete di sicurezza in `filaCheSparisce()` si accorcia con l'animazione. */
@media (prefers-reduced-motion: reduce) {
    .chat-fila--sparisce {
        transition: opacity .18s ease;
    }

    /* LA RIGA MIA HA UNA REGOLA SUA, CON DUE CLASSI (`.chat-fila--mio.chat-fila--via`, chat.css:814): la
       riga sopra, con una classe sola, NON basta a fermarla - ed e' quello che e' successo al primo giro
       (13 campioni con la riga piu' bassa: si stava ancora rimpicciolendo). Qui il selettore ha lo stesso
       peso e viene dopo, quindi vince. */
    .chat-fila--via,
    .chat-fila--mio.chat-fila--via {
        opacity: 0;
        transform: none;
    }

    .chat-fila--via .chat-msg {
        filter: none;
    }
}

.chat-fila__foto {
    top: 1px;
    position: sticky;
    width: 35px;
    height: 35px;
    border-radius: 999px;
    object-fit: cover;
    flex: none;
    background: var(--mood-bg-hover);
    margin-bottom: -26px;
    z-index: 4;
    border: 2px solid var(--mood-border);
}

.chat-msg {
    position: relative;
    /* LA BOLLA SI STRINGE SUL SUO CONTENUTO (25/09/2026). Il titolare: "la ui e' incasinata come vedi non e' */
    max-width: min(76%, 560px);
    width: -webkit-max-content;
    width: max-content;
    padding: 10px 15px 6px;
    border-radius: 22px;
    font-size: 0.92rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    box-shadow: var(--chat-ombra-bolla);
    /* SUL TELEFONO LA BOLLA NON APRE IL MENU DEL BROWSER (25/09/2026). La pressione lunga serve al menu */
    -webkit-touch-callout: none;
}

/* Ricevuti: superficie del tema, coda in basso a sinistra. */
.chat-msg--loro {
    background: var(--chat-sfondo-msg);
    border: 2px solid var(--chat-sfondo-msg-border);
    color: var(--chat-sfondo-media-text);
    border-bottom-left-radius: 6px;
}

/* Miei: il viola del sito (con la sua ombra), coda in basso a destra. */
.chat-msg--mio {
    background: linear-gradient(135deg, var(--mood-primary), var(--mood-primary-dark));
    color: var(--white);
    border-bottom-right-radius: 4px;
    box-shadow: var(--chat-ombra-mia);
    border: 2px solid var(--chat-sfondo-msg-border);
}

/* Dentro un gruppo il lato della coda resta tondo: le bolle si toccano senza spigoli doppi. */
.chat-fila--attaccata .chat-msg--loro {
    border-top-left-radius: 6px;
}

.chat-fila--attaccata .chat-msg--mio {
    border-top-right-radius: 6px;
}

/* ==================== LA COLONNA DEL MESSAGGIO: LA BOLLA SOPRA, LA RIGA DI SOTTO (29/09/2026) ====================
   IL TITOLARE: «voglio che miglioriamo questa parte ... ma la parte azioni deve andare a lato del messaggio i
   tre puntini ... cosi' il pie libera la parte della bolla e non e' piu' alta come ora» e «dovrebbe finire sotto
   la bolla data e la spunta di lettura e ricevuta».
   QUESTA E' LA SCATOLA CHE MANCAVA. La bolla (`.chat-msg`) ha lo sfondo: qualunque cosa le si metta dentro sta
   SOPRA quel fondo, anche con un margine negativo. Per avere l'ora SOTTO lo sfondo serve un contenitore che le
   tenga in colonna - questa. Non e' una scatola nuova per il gusto di averla: e' il minimo perche' lo sfondo
   finisca dove finisce il messaggio.
   LA MISURA STA QUI, NON PIU' SULLA BOLLA (era `.chat-msg { max-width: min(76%, 560px) }`): cosi' la bolla si
   stringe sul suo contenuto dentro la colonna, e la riga di sotto ha la stessa larghezza della bolla - cioe' si
   allinea al suo bordo senza conti. Il lato lo decide chi scrive: `--mio` a destra, `--loro` a sinistra (le due
   classi le mette `bolla()`, in chat.js).
   E I TASTI DI FIANCO HANNO BISOGNO DI `position: relative` QUI: `.chat-msg__azioni` e' assoluto e sta DENTRO
   la bolla (quindi si ancora alla bolla), ma la striscia che occupa la decide la colonna - vedi la regola del
   telefono (dove la bolla poteva arrivare a tutta la riga) e il commento su `.chat-msg__azioni`. */
.chat-msg__corpo {
    display: flex;
    flex-direction: column;
    position: relative;
    max-width: min(76%, 560px);
    min-width: 0;
}

.chat-msg__corpo--mio {
    align-items: flex-end;
}

.chat-msg__corpo--loro {
    align-items: flex-start;
}

/* La bolla non supera mai la colonna: la misura e' sua (sopra), e una bolla scritta a mano senza colonna
   (le pagine di prova, `tools/checks/diag_bolla_video.html`) tiene la sua regola di sempre. */
.chat-msg__corpo > .chat-msg {
    max-width: 100%;
}

.chat-msg__testo {
    display: block;
}

/* IL MESSAGGIO LUNGO SI VEDE IN TRE RIGHE (30/09/2026). IL TITOLARE: «in feed e in chat la parte scritta
   in markup ... deve essere limitata che si vedono tipo 3 righe anche non formattate e si apre il
   visualizzatore come un readme...». Dentro una bolla da 241px utili, un messaggio che non ci sta (una
   tabella, un blocco di codice, piu' di tre righe: vedi `MoodTesto.meritaLettore`) non si disegna piu'
   per intero: si vedono TRE righe di testo leggibile (`MoodTesto.anteprima` — niente tabella schiacciata,
   niente blocco di codice largo 65px) e il messaggio INTERO si legge nel lettore, con il markdown
   formato (`.chat-lettore`, la stessa porta del tasto «Apri» sotto la bolla).
   Il `-webkit-box` e' l'unico modo che i navigatori hanno per CONTARE le righe; l'ellissi la mette lui. */
.chat-msg__testo--anteprima {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ========================= IL TESTO DELLE PERSONE DENTRO LA BOLLA (28/09/2026) ==================
   IL TITOLARE: «poi nelle chat non viene riconosciuto url ... e il markdown come in tutte le chat .. per
   il grassetto italic .. liste eccetera .. i @ .. e gli #».
   Il testo della bolla non è più testo puro: `MoodTesto.rendi` (vedi `mood-testo.js`) ci mette gli
   indirizzi, i @nomi, le #etichette, il grassetto, il corsivo, il barrato, il codice, gli elenchi e le
   citazioni. Qui c'è SOLO la resa, e le due regole che contano:
     - I LINK PRENDONO IL COLORE DELLA BOLLA (`inherit`) e si vedono dalla sottolineatura. Le bolle sono
       verdi (ricevute) e viola (mie), tutte e due scure: il colore dei link del feed su quel fondo non si
       leggerebbe. La sottolineatura è il segno che dice «questo si tocca», e funziona su tutte e due.
     - LE PAROLE RESTANO QUELLE SCRITTE. Lo spazio bianco della bolla è `pre-wrap` (vedi `.chat-msg`),
       quindi nessun elemento qui dentro deve aggiungere spazi suoi: gli elenchi si allineano col
       `padding`, non con dei margini che sposterebbero il testo.
   L'`esc` e la formattazione stanno nel modulo, provate da `tools/checks/check_chat_testo.py`. */
.chat-msg__testo a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.chat-msg__testo a.mention-link,
.chat-msg__testo a.hashtag-link {
    color: inherit;
    font-weight: 700;
}

.chat-msg__testo strong { font-weight: 700; }
.chat-msg__testo em { font-style: italic; }
.chat-msg__testo del { text-decoration: line-through; opacity: 0.85; }
/* Il sottolineato (`++testo++`, 01/10/2026): `mood-testo.js` rende un `<u>` — la sottolineatura e' sua,
   qui si tiene solo staccata dalle lettere. */
.chat-msg__testo u.chat-md-sottolineato { text-decoration: underline; text-underline-offset: 2px; }

.chat-msg__testo .chat-md-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.88em;
    padding: 1px 6px;
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.22);
}

.chat-msg__testo .chat-md-lista {
    margin: 4px 0 2px;
    padding-left: 20px;
    list-style-position: outside;
}

.chat-msg__testo .chat-md-lista li { margin: 1px 0; }
.chat-msg__testo .chat-md-lista li:nth-child(odd),
.chat-msg__testo .chat-md-lista li:nth-child(even){
    background:transparent;
    display: table-header-group;
    vertical-align: middle;
    unicode-bidi: isolate;
    break-inside: if(media(overflow-block: paged): avoid;);
    border-color: inherit;    
}
.chat-msg__testo .chat-md-cita {
    display: block;
    margin: 4px 0;
    padding: 3px 10px;
    border-left: 3px solid currentColor;
    border-radius: 0 8px 8px 0;
    background: rgba(0, 0, 0, 0.18);
    opacity: 0.95;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 20px;
    margin-inline-end: 20px;
    unicode-bidi: isolate;
}

/* I TITOLI, I BLOCCHI DI CODICE E LE TABELLE DENTRO UNA BOLLA (28/09/2026). IL TITOLARE: «ho creato un
   post esempio in chat ma non vedo tutti i markdown in funzione». Prima qui il markdown si fermava a
   grassetto/corsivo/barrato/codice/elenchi/citazioni: titoli e tabelle non esistevano (il «#» era solo
   l'etichetta). Adesso esistono, e le misure stanno PICCOLE di proposito: dentro una bolla un titolo
   grande come in una pagina non ci sta. Le stesse classi vestono il corpo dei post in `mood.css`. */
.chat-msg__testo .chat-md-titolo {
    font-weight: 700;
    line-height: 1.3;
    margin: 6px 0 2px;
}

.chat-msg__testo .chat-md-titolo-1 {font-size: 1.18em;display: block;margin-block-start: 0.67em;margin-block-end: 0.67em;margin-inline-start: 0px;margin-inline-end: 0px;font-weight: bold;unicode-bidi: isolate;}
.chat-msg__testo .chat-md-titolo-2 { font-size: 1.12em; }
.chat-msg__testo .chat-md-titolo-3 {font-size: 1.06em;display: block;margin-block-start: 1em;margin-block-end: 1em;margin-inline-start: 0px;margin-inline-end: 0px;font-weight: bold;unicode-bidi: isolate;}
.chat-msg__testo .chat-md-titolo-4,
.chat-msg__testo .chat-md-titolo-5,
.chat-msg__testo .chat-md-titolo-6 { font-size: 1em; opacity: 0.92; }

.chat-msg__testo .chat-md-pre {
    margin: 4px 0;
    padding: 6px 9px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.22);
    overflow-x: auto;
    max-width: 100%;
}

/* `white-space: pre`: le righe del blocco si vedono come sono scritte (e non si mandano a capo). */
.chat-msg__testo .chat-md-pre code.chat-md-blocco {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.88em;
    white-space: pre;
}

/* LA TABELLA CHE IN UNA BOLLA NON CI STA (29/09/2026). IL TITOLARE: «io vedo ancora nella chat le tabelle
   schiacciate e tutto compresso .. (andrebbero mostrate parzialmente in ogni caso... tipo max-height: 120px;
   overflow-y: hidden; con sfumatura e uno clicca su icona apri view..)». Erano due difetti, e si vedono in
   due righe diverse:
   - la tabella si STRINGEVA per stare nei 241px utili della bolla e le celle andavano a capo: adesso tiene
     la larghezza del suo contenuto (`width: max-content`) e, se e' piu' larga, scorre come prima;
   - se e' piu' ALTA di 120px si TAGLIA: il taglio si vede per la sfumatura, che `chat.js` accende
     aggiungendo `is-tagliata` (lui sa misurare, il foglio no), e il resto si legge nel lettore — la porta e'
     il tasto «Apri» che c'e' gia' sotto la bolla (`meritaIlLettore` vede le tabelle). */
.chat-msg__testo .chat-md-tabella-scorri {
    margin: 4px 0;
    max-width: 100%;
    max-height: 120px;
    overflow-y: hidden;
    overflow-x: auto;
}

/* LA SFUMATURA DEL TAGLIO E' UNA MASCHERA, NON UN VELO (29/09/2026): un gradiente colorato avrebbe dovuto
   sapere di che colore e' la bolla (le mie sono di un grigio, quelle degli altri di un altro), una maschera
   no: spegne il disegno e basta, qualunque cosa ci sia sotto. */
.chat-msg__testo .chat-md-tabella-scorri.is-tagliata {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent 100%);
}

/* LA TABELLA NON SI SCHIACCIA (29/09/2026): `width: max-content` la lascia larga quanto il suo contenuto (e
   `min-width: 100%` perche' una tabella di due colonne resti comunque piena), quindi le celle non vanno piu'
   a capo per stare nei 241px della bolla: se e' larga, scorre. Era questo il «tutto compresso». */
.chat-msg__testo .chat-md-tabella { border-collapse: collapse; font-size: 0.95em; width: max-content; min-width: 100%; }
.chat-msg__testo .chat-md-tabella thead{
    display: table-header-group;
    vertical-align: middle;
    unicode-bidi: isolate;
    break-inside: if(media(overflow-block: paged): avoid;);
    border-color: inherit;
    background: #4a4a4a29;
}
.chat-msg__testo .chat-md-tabella th,
.chat-msg__testo .chat-md-tabella td {
    border: 1px solid currentColor;
    padding: 3px 8px;
    text-align: left;
    vertical-align: top;
}

.chat-msg__testo .chat-md-tabella th { font-weight: 700; }
.chat-msg__testo .chat-md-tabella .chat-md-cx { text-align: center; }
.chat-msg__testo .chat-md-tabella .chat-md-dx { text-align: right; }

/* ==================== LA BOLLA PULITA: L'ORA SOTTO, I TASTI DI FIANCO (29/09/2026) ====================
   IL TITOLARE: «ma la parte azioni deve andare a lato del messaggio i tre puntini ... che aprono il dropmenu
   cosi' il pie libera la parte della bolla e non e' piu' alta come ora», e «dovrebbe finire sotto la bolla
   data e la spunta di lettura e ricevuta».
   Prima c'era UNA riga sola con dentro tutto (ora + «Reagisci» + «...» + spunte) e stava DENTRO la bolla:
   era una riga in piu' nell'altezza di OGNI messaggio, anche di un «ciao». Adesso sono due posti:
     - `.chat-msg__pie` = la riga SOTTO la bolla: fuori dal suo sfondo, in fondo alla colonna
       (`.chat-msg__corpo`, che decide il lato: `--mio` a destra, `--loro` a sinistra);
     - `.chat-msg__azioni` = i due tasti, APPESI FUORI dal contorno della bolla (`right`/`left: 100%` dal suo
       lato): non entrano in nessuna altezza.
   I COLORI SONO DELLA STANZA, NON PIU' DELLA BOLLA: questa riga non sta su un fondo verde o viola ma sul fondo
   della stanza (chiaro `#f6f3ec`, scuro `#0f1b24`), e le variabili del sito li' si leggono tutte e due (e' la
   coppia che usa gia' il separatore di giorno, `.chat-giorno`). Il `#dadae7` scritto a mano che c'era qui era
   il grigio giusto su UNA bolla sola: sparisce con la riga che lo conteneva. */
.chat-msg__pie {
    margin-top: 7px;
    padding-inline: 3px;
    font-size: 0.68rem;
    color: var(--mood-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* LE SPUNTE, CON GLI STATI CHE ESISTONO (29/09/2026). Il titolare: «la spunta ... dovrebbe essere neutra ... o
   non ricevuta .. poi ricevuta .. una spunta di ricevuta colore differente .. doppia spunta colorata letta».
   Gli stati li sceglie `statoSpunta()` (chat.js): qui c'e' solo il colore di ognuno.
     - `--inviata` (una spunta) e `--consegnata` (due spunte): NEUTRE, attenuate. A distinguerle e' il DISEGNO
       (una o due spunte), non il colore: e' quello che fa ogni chat.
     - `--letta` (due spunte): COLORATE col segno di riuscita del sito. `--mood-success` e' verde in tutti e due
       i temi (#00B894 scuro, #009E7A chiaro) e si legge su tutti e due i fondi della stanza.
     - `--attesa` (orologio) e `--errore` (nube sbarrata): sono due avvisi, quindi due colori da avviso.
   La classe sta sul `span`, perche' lucide sostituisce l'`<i>` con l'`svg` (era il "0 spunte", 17/09/2026). */
.chat-msg__spunta {
    display: inline-flex;
}

.chat-msg__spunta svg {
    width: 16px;
    height: 16px;
    stroke-width: 3px;
}

.chat-msg__spunta--inviata,
.chat-msg__spunta--consegnata {
    opacity: 0.7;
}

.chat-msg__spunta--letta svg{
    stroke: rgb(11 11 210);
}

.chat-msg__spunta--attesa svg{
    color: var(--mood-text-muted);
}

.chat-msg__spunta--errore svg{
    color: var(--mood-danger);
}
.chat-msg__spunta--tocco {
    padding: 6px;
    margin: -6px;
    border-radius: 50%;
    cursor: pointer;
}

.chat-msg__spunta--tocco:hover {
    /* background: rgba(127, 127, 127, 0.18); */
}

.chat-msg__spunta--tocco {
    padding: 0;
    margin: 0;
    border-radius: 0;
    position: relative;
}

.chat-msg__spunta--tocco::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 6px;
}

.chat-msg__spunta--tocco:hover::after {
    background: rgba(127, 127, 127, 0.18);
}
.chat-msg__spunta--tocco:focus-visible {
    outline: 2px solid var(--mood-accent);
    outline-offset: 1px;
}
.chat-msg__azioni {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.chat-msg--mio .chat-msg__azioni {
    right: calc(100% + 6px);
}

.chat-msg--loro .chat-msg__azioni {
    left: calc(100% + 6px);
}

.chat-msg__azioni .chat-msg__azione {
    color: var(--mood-text-muted);
}

.chat-msg__azione {
    display: inline-flex;
    align-items: center;
    border: 0;
    background: none;
    padding: 0;
    color: inherit;
    cursor: pointer;
    font-size: 0.68rem;
    font-family: var(--mood-font);
}

.chat-msg__azione svg {
    width: 25px;
    height: 25px;
}

.chat-msg__azione:hover {
    color: var(--mood-danger);
}

/* I tasti dei messaggi che non si aprono ("Riprova", "Nascondi", "Sincronizza"): restano testo sottolineato -
   sono un invito a toccare, non un'icona accanto all'ora. */
.chat-msg--rotto .chat-msg__azione {
    text-decoration: underline;
    font-weight: 600;
    color: inherit;
    padding-inline-start: 6px;
    /* non togliere */
}

/* QUI C'ERANO DUE REGOLE PER I TASTI DENTRO LA MIA BOLLA (`.chat-msg--mio .chat-msg__azione`, colore
   `inherit` e bianco al passaggio del mouse, 25/09/2026): i tasti non stanno piu' sulla bolla (29/09/2026),
   stanno sul fondo della stanza, e il loro colore lo dice la regola qui sopra. Un tasto di testo dentro la
   bolla - «Riprova», «Nascondi», «Sincronizza» - ha la sua regola (`.chat-msg--rotto`, poco sotto). */

@media (hover: hover) {
    .chat-msg__azioni {
        opacity: 0;
        transition: opacity var(--mood-transition);
    }

    .chat-fila:hover .chat-msg__azioni,
    .chat-msg:focus-within .chat-msg__azioni {
        opacity: 1;
    }
}

.chat-msg--rotto {
    font-style: italic;
    opacity: 0.9;
}

.chat-msg__pie--trattenuto {
    justify-content: flex-start;
    color: var(--mood-warning);
}

/* La nota di sistema (stato vuoto, avvisi): con l'icona, al centro. */
.chat-sistema {
    align-self: center;
    font-size: 0.78rem;
    color: var(--mood-text-muted);
    text-align: center;
    max-width: 90%;
}

.chat-sistema--vuoto {
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: 300px;
    line-height: 1.5;
}

.chat-sistema--vuoto svg {
    width: 34px;
    height: 34px;
    color: var(--mood-primary-light);
}

/* ---------- L'ATTESA DELLA STANZA, E LA PRIMA SCHERMATA CHE ENTRA (26/09/2026) ----------
   IL TITOLARE: "ogni volta che clicco su una chat... carica alla brutta... vedo che scatta.. non e' in
   fade-in ... o con effetto di preloading". Misurato con la finestra da telefono sul sito vero (banco del
   26/09/2026): l'attesa durava 275 ms e poi le tre bolle entravano TUTTE IN UN FOTOGRAMMA, con zero
   animazioni in corso e opacita' del contenitore sempre 1 - cioe' uno scatto, non un'entrata. E la riga
   ferma "Apro la conversazione..." per un quarto di secondo e' anche un lampo: peggio del vuoto.
   LE RIGHE SONO LO SCHELETRO DELLA RICERCA (`.srch-skeleton`, search.css): una convenzione sola per il
   sito, non una seconda invenzione. */
.chat-attesa {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-self: stretch;
    padding: 4px 4px 10px;
    /* Le righe stanno in alto come i messaggi, e il blocco non si allarga: la bolla mia e' piu' corta. */
}

.chat-attesa__riga {
    height: 34px;
    max-width: 58%;
    border-radius: 14px;
    background: linear-gradient(90deg, #eeeef536 45%, #ffffff3b 50%, #eeeef538 75%);
    background-size: 200% 100%;
    animation: chat-attesa-luccichio 1.2s infinite;
}


.chat-attesa__riga--mia {
    align-self: flex-end;
    height: 30px;
    max-width: 48%;
}

.chat-attesa__riga--corta {
    height: 26px;
    max-width: 34%;
}

@keyframes chat-attesa-luccichio {
    from {
        background-position: 200% 0;
    }

    to {
        background-position: -200% 0;
    }
}

/* LA PRIMA SCHERMATA DELLA STANZA: scende di poco e si accende (la classe la mette `disegnaMessaggi()`,
   una volta sola per stanza - vedi chat.js). Vale per i messaggi, per "Ancora nessun messaggio" e per le
   righe che arrivano: e' sempre la stessa prima schermata. */
.chat-messaggi--entra {
    animation: chat-entra 0.26s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes chat-entra {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    /* A chi ha chiesto al sistema di non muovere niente non si muove niente: le righe restano ferme e la
       schermata entra di colpo, com'e' giusto. */
    .chat-attesa__riga {
        animation: none;
    }

    .chat-messaggi--entra {
        animation: none;
    }
}

/* Il pulsante "torna in fondo": galleggia sopra la conversazione, in basso a destra. */
.chat-giu {
    position: absolute;
    right: 18px;
    bottom: 92px;
    width: 38px;
    height: 38px;
    border: 1px solid var(--mood-border);
    border-radius: 999px;
    background: var(--mood-bg-card);
    color: var(--mood-primary);
    box-shadow: var(--mood-shadow);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

.chat-giu svg {
    width: 18px;
    height: 18px;
}

.chat-giu:hover {
    background: var(--mood-bg-hover);
}

/* ---------- Lo scrivi: barra in fondo, campo a pillola, invio tondo ---------- */
.chat-scrivi {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px 16px;
    /* QUESTE DUE RIGHE NON SONO MIE (27/09/2026). Erano solo sul server, scritte a mano: il bordo in alto
       tolto e un velo che sfuma in alto invece dello sfondo pieno. Il file di lavoro aveva la versione con
       le variabili del sito (`--mood-border`, `--background-card`) - che e' quella che piace ai controlli,
       perche' segue il tema chiaro e scuro - ma NON era quella accesa sul sito: porto la sua, cosi'
       pubblicando non si spegne quello che sta guardando. Da decidere con lui: tenere il velo a colori
       fissi (che in tema scuro puo' stonare) o rifarlo con le variabili. */
    border-top: none;
    background: linear-gradient(180deg, #5b9dff00 0%, #8e8e8e66 100%);
    /* Questa riga NON e' mia: l'ho trovata solo sul server (chi l'ha scritta non l'aveva portata nel file di
       lavoro). La tengo qui perche' pubblicando non vada persa - e' il senso del controllo di `pubblica.sh`. */
    z-index: 100;
    align-items: center;
    padding-bottom: 26px;
}

.chat-scrivi__etichetta {
    position: absolute;
    left: -9999px;
}

/* leggibile dagli screen reader, non a schermo */
/* LA PILLOLA DEL COMPOSITORE (25/09/2026). IL TITOLARE: "voglio che sia ... la barra sotto con il campo a
   pillola": bordo, sfondo e fuoco sono di UNA pillola sola. */
.chat-scrivi__campo {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 1px;
    border: 1px solid var(--mood-border);
    border-radius: 22px;
    background: var(--mood-bg-hover);
    transition: border-color var(--mood-transition), box-shadow var(--mood-transition);
}

/* IL FUOCO E' DELLA PILLOLA, NON DEL CAMPO (25/09/2026): si scrive dentro una scatola sola, e la scatola si
   accende quando il cursore e' dentro (`:focus-within`) - il campo di scrittura non ha piu' un anello suo. */
.chat-scrivi__campo:focus-within {
    border-color: var(--mood-primary);
    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.16);
}

/* Dentro la pillola il campo e' NUDO: niente bordo, niente sfondo, niente anello - il disegno e' della pillola.
   I numeri del titolare restano: si allarga con le righe fino a 132px (~5 righe) e non mostra la barra di
   scorrimento. `min-height: 40px` (una riga) tiene la pillola a 44px esatti anche quando e' vuoto. */
.chat-scrivi textarea {
    flex: 1;
    min-width: 0;
    min-height: 40px;
    max-height: 132px;
    resize: none;
    overflow-y: auto;
    padding: 9px 2px;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--mood-text);
    font-family: var(--mood-font);
    font-size: 0.92rem;
    line-height: 1.4;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* LA BARRA CHE SU IPAD/IPHONE SI VEDEVA LO STESSO (29/09/2026). `scrollbar-width: none` la toglie su Chrome e
   Firefox, ma SAFARI QUELLA PROPRIETA' NON LA CONOSCE: disegna la sua barra sopra la pillola del testo, e il
   titolare la vede — «la barra che continuo a vedere su iPad». Il ripiego che Safari capisce e' il suo
   `::-webkit-scrollbar` (stesso motore, altro nome), e vale anche su iPhone e iPad. Lo stesso intento era gia'
   dichiarato in tre punti del foglio, quindi si spegne in tutti e tre: la pillola dove si scrive, la fila delle
   emoji veloci nella bolla (`.chat-msg__scelta`) e la fila delle emoji del menu messaggio. */
.chat-scrivi textarea::-webkit-scrollbar { display: none; width: 0; height: 0; }
.chat-msg__scelta::-webkit-scrollbar { display: none; width: 0; height: 0; }
#chatMenuMsg .chat-menu__emoji::-webkit-scrollbar { display: none; width: 0; height: 0; }

.chat-scrivi textarea::placeholder {
    color: var(--mood-text-muted);
}

/* Niente anello sul campo: l'anello e' della pillola (`.chat-scrivi__campo:focus-within`). */
.chat-scrivi textarea:focus {
    outline: none;
}

/* L'invio: tondo e con la sola icona, come nelle app di messaggi. */
.chat-scrivi #chatInvia {
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 999px;
    position: relative;
}

.chat-scrivi #chatInvia svg {
    width: 19px;
    height: 19px;
}

.chat-scrivi #chatInvia:disabled {
    opacity: 0.6;
    cursor: default;
}

.chat-scrivi .chat-nota {
    flex: 1 0 100%;
    margin: 0;
    padding-left: 4px;
}

/* LE STRISCE DEL COMPOSITORE SU UNA RIGA LORO (25/09/2026). Il titolare, con la striscia della risposta nella */
.chat-scrivi .chat-modifica,
.chat-scrivi .chat-risposta {
    flex: 1 0 100%;
}

/* ANCHE LA STRISCIA DEL VOCALE PRENDE TUTTA LA SUA RIGA (26/09/2026): stessa regola delle altre due, scritta a
   parte per non toccare la loro. Vedi "Il vocale" qui sotto. */
.chat-scrivi .chat-vocale {
    flex: 1 0 100%;
}

/* L'ICONA DEL TASTO (26/09/2026): sta in uno `span` perche' lucide cambia l'`<i>` con un `<svg>`, e il microfono
   e la freccia si alternano dentro questo. */
.chat-scrivi #chatInvia .chat-invia__icona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---------- Il modale "scrivi a qualcuno" ----------
   Il velo e la quota sono quelli dei modali del sito (`.mood-modal-overlay`):
   rgba(0,0,0,.7) e z-index 1600. Con z-index 60 la barra sticky stava davanti. */
.chat-modale {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1600;
    padding: 16px;
}

.chat-modale__box {
    background: var(--mood-bg-card);
    border: 1px solid var(--mood-border);
    border-radius: var(--mood-radius);
    box-shadow: var(--mood-shadow);
    padding: 18px;
    width: 100%;
    max-width: 460px;
}

.chat-modale__box h2 {
    margin: 0 0 12px;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--mood-text);
}

.chat-modale__azioni {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

/* =====================================================================================
   LE TRE STRADE DEL TASTO «NUOVA» (28/09/2026) - persona, gruppo, canale.
   IL TITOLARE: «ora è solo persona unica, mi serve che sia anche gruppo e canali».
   Erano tre mestieri diversi con un pannello solo (la ricerca delle persone): qui si sceglie in cima, e sotto
   cambia il pezzo. Le voci scelte stanno in una pillola col fondo pieno, come i filtri del resto del sito.
   ===================================================================================== */

.chat-nuovo__scelte {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    padding: 4px;
    border: 1px solid var(--mood-border);
    border-radius: 999px;
    background: var(--mood-bg-hover);
}

.chat-nuovo__scelta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1 1 0;
    min-height: 44px;
    padding: 0 10px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--mood-text);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}

.chat-nuovo__scelta svg {
    width: 18px;
    height: 18px;
}

.chat-nuovo__scelta.is-attiva {
    background: var(--mood-primary);
    color: var(--white);
    box-shadow: var(--mood-shadow);
}

.chat-nuovo__pezzo {
    margin-top: 12px;
}

.chat-nuovo__vie {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.chat-nuovo__via {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--mood-border);
    border-radius: var(--mood-radius-sm);
    background: var(--mood-bg-card);
    color: var(--mood-text);
    text-decoration: none;
}

.chat-nuovo__via:hover {
    border-color: var(--mood-primary);
    box-shadow: var(--mood-shadow);
}

.chat-nuovo__via svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    color: var(--mood-primary);
}

.chat-nuovo__via span {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.chat-nuovo__via b {
    font-size: 0.92rem;
}

.chat-nuovo__via em {
    font-style: normal;
    font-size: 0.78rem;
    opacity: .75;
}

/* LE TRE VOCI SUL TELEFONO STRETTO (28/09/2026). La prova `check_chat_nuova.py` ha misurato che a 320px la
   voce «Canale» usciva dallo schermo (finiva a 336px su uno schermo largo 320): le tre pillole insieme
   prendevano 297px dei ~280 disponibili, perche' con l'imbottitura da 10px e il carattere da 0.88rem le tre
   parole non ci stavano. Qui stringono un po' — 5px di imbottitura, simbolo da 16px, carattere da 0.8rem — e
   tornano tutte e tre dentro lo schermo, con la parola INTERA (niente puntini: la parola si deve leggere). */
@media (max-width: 380px) {
    .chat-nuovo__scelte {
        gap: 4px;
        padding: 3px;
    }

    .chat-nuovo__scelta {
        padding: 0 5px;
        gap: 4px;
        font-size: 0.8rem;
    }

    .chat-nuovo__scelta svg {
        width: 16px;
        height: 16px;
    }
}

.chat-persone {
    max-height: 40vh;
    overflow: auto;
    margin-top: 10px;
}

.chat-persona {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-radius: var(--mood-radius-sm);
    padding: 9px;
    cursor: pointer;
    color: var(--mood-text);
    font-family: var(--mood-font);
}

.chat-persona img,
.chat-persona video {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    object-fit: cover;
    flex: none;
    background: var(--mood-bg-hover);
}

/* E IL VIDEO? (21/09/2026). Segnalazione del titolare: "in chat se cerco nuova persona gli avatar sono */

/* ---------- Telefono: elenco e stanza si alternano, la stanza va a tutta altezza ---------- */
@media (max-width: 780px) {
    /* ── IL MENU DELLA CONVERSAZIONE SUL TELEFONO E' UN FOGLIO DAL BASSO (30/09/2026) ────────────────
       IL TITOLARE: «ora rendilo mobile perché su mobile alcune voci vanno sotto e non è possibile
       cliccare su le ultime voci». MISURATO (WebKit da telefono, /tmp/menu-chat-prima.log): il menu era
       `absolute` dentro la testata, che sta dentro la stanza — e la stanza ha `overflow: hidden` e
       un'altezza fissa. Il menu, cresciuto con le voci dei media, usciva dal fondo della stanza e finiva
       fuori dallo schermo: a 320x568 le ultime CINQUE voci non si potevano toccare (il centro di «Sta
       scrivendo» e di «Come sono protetti i messaggi» stava sotto la barra del sito, che ha z-index 1000
       e copriva il menu; «Salva i file in una cartella…» e «Rimuovi i media» addirittura sotto il bordo
       dello schermo, a 630 e 680 px). E non c'era modo di arrivarci: il contenuto (437px) stava tutto
       dentro il disegnato (437px), quindi il menu non aveva nemmeno uno scorrimento interno.
       Adesso sul telefono e' lo stesso foglio del menu del messaggio (`#chatMenuMsg.chat-menu--foglio`):
       appoggiato in basso, largo tutto lo schermo, con lo scorrimento dentro — le voci si toccano tutte e
       le ultime stanno dove arriva il pollice. `z-index: 1250` per stare sopra la barra del sito (1000),
       come il foglio del messaggio; il fondo tiene conto della tacca (`safe-area-inset-bottom`).
       Sopra i 780px il menu resta la finestrella di sempre: li' la stanza e' alta abbastanza.
       LA VIA D'USCITA E' LA CROCE DELLA TESTATA (vedi sotto, `#chatMenu .chat-foglio__testa`): il foglio
       copre il tasto che l'ha aperto, e in WebKit un tocco sulla pagina non manda nemmeno un `click`. La
       chiusura con un click fuori dal foglio resta anche lei (l'ascoltatore sul documento c'e' gia'), ma e'
       la strada del computer. */
    #chatMenu {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        min-width: 0;
        margin: 0;
        max-height: 81dvh;
        overflow-y: auto;
        padding: 0 14px calc(14px + env(safe-area-inset-bottom));
        border: 0;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.3);
        z-index: 1250;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        animation: chat-foglio-su 0.18s ease-out;
    }

    /* LA TESTATA DEL FOGLIO (30/09/2026): maniglia, titolo e CROCE. La croce non e' un ornamento: e' la via
       d'uscita. Il foglio copre il tasto che l'ha aperto, e il tocco sulla pagina NON produce un `click` in
       WebKit quando cade su contenuto normale (misurato, /tmp/chiudi-menu.log): senza la croce, su un iPhone
       si resterebbe dentro il menu. La testata la disegna `chat.css` una volta sola per tutti i fogli della
       chat (`.chat-foglio__testa`, piu' sotto): qui si dice solo di mostrarla, perche' la regola generale la
       mostra sotto gli 800px e questo menu e' un foglio sotto i 780. */
    #chatMenu .chat-foglio__testa {
        display: flex;
    }

    /* IL TITOLO NON SI DICE DUE VOLTE: sul telefono lo dice la testata del foglio. Quello che resta e' l'altro
       titolo — «Media su questo dispositivo» — che e' di un'altra parte del foglio. */
    #chatMenuTitolo {
        display: none;
    }

    /* LE VOCI SONO RIGHE DA DITO, come nel foglio del messaggio: 48px di altezza (la misura che le dita
       azzeccano) e il dito che tiene premuto non deve selezionare il testo della voce. */
    #chatMenu button {
        min-height: 48px;
        padding: 12px 10px;
        font-size: 0.95rem;
        -webkit-touch-callout: none;
        width: auto;
    }

    #chatMenu .chat-menu__titolo {
        margin: 8px 6px 5px;
    }

    /* LA TESTATA SALE SOPRA LA BARRA DEL SITO, E IL MOTIVO È MISURATO (30/09/2026). Con il foglio qui sopra
       (che è `fixed` e quindi esce dallo scorrimento e dal taglio della stanza) le ultime voci restavano
       comunque non toccabili: `elementFromPoint` sul centro di «Come sono protetti i messaggi» rispondeva
       `moodAppBottomBar`. Il motivo non è il numero scelto per il foglio: `.chat-testa` ha `position:
       relative` con `z-index: 4`, quindi crea un CONTESTO DI IMPILAMENTO — e dentro quel contesto il foglio
       vale 4 per la pagina, non 1250, per quanto grande sia il numero. La barra del sito (z-index 1000) sta
       sopra tutta la testata compreso il foglio, e si mangiava le ultime voci. Alzando la TESTATA sopra la
       barra (1001) sale anche tutto quello che ci sta dentro: il foglio si tocca per intero, come il foglio
       del messaggio. Vale solo sul telefono: sul computer il menu è la finestrella di prima e non c'è la
       barra in basso. */
    .chat-testa {
        z-index: 1001;
    }

    /* QUESTA RIGA RESTA, E NON È UNA DIMENTICANZA (30/09/2026). Stava qui da prima: era il tentativo di
       tenere il menu vecchio (la finestrella `absolute`) sopra la barra del sito, e vale anche per gli altri
       due menu che portano il nome `chat-menu` (quello del messaggio e quello della riga dell'elenco), che
       NON ho toccato. Per `#chatMenu` adesso non fa niente — il foglio qui sopra ha `margin: 0` (e l'`id`
       vince sulla classe, quindi la sua misura la decide la regola nuova). */
    .chat-menu {
        margin-bottom: 8rem;
    }
    /* IL COMPOSITORE NON SI COMPRIME E NON FINISCE SOTTO IL BORDO (26/09/2026). IL TITOLARE, dal suo
       iPhone: ".chat-scrivi l'altezza limita la visualizzazione dei blocchi ... vengono tagliati in altezza
       ... e si perdono i bottoni compreso il bottone di [il quadrato che ferma]". MISURATO
       (/tmp/prova_compositore_tagliato.py, su WebKit - il motore di Safari): con `bottom: 1rem` la barra
       veniva DISEGNATA 16 px sotto il proprio posto - fuori dalla stanza, che ha `overflow: hidden` - e con
       `padding-bottom: 0` quei 16 px erano proprio il fondo del tasto tondo e la nota che spiega cosa e'
       andato storto; in piu' la barra si lasciava COMPRIMERE dal flex (`flex: 0 1 auto`), quindi con la
       striscia del vocale, la risposta e la modifica aperte il suo contenuto usciva dalla stanza e spariva.
       Adesso la barra non si sposta, non si comprime, e cede spazio l'area dei messaggi. */
    .chat-scrivi {
        position: relative;
        bottom: auto;
        flex: none;
        padding-bottom: 50px;
    }

    /* IL CAMPO DI SCRITTURA A 16 px, SENNO' SAFARI INGRANDISCE LA PAGINA (27/09/2026). IL TITOLARE, dal suo
       iPhone 17: «quando si manda un messaggio il textarea fa sboardare il microfono / invio fuori dallo
       schermo e si allarga tutto il modale». MISURATO (/tmp/banco_iphone_lungo.py, WebKit 402x874, il motore
       di Safari): la pagina dichiara `width=device-width, initial-scale=1.0` - nessun `maximum-scale` - e il
       campo era a 14.72 px, cioe' SOTTO I 16. Sotto i 16 px iOS Safari ingrandisce la pagina da solo quando
       si tocca il campo: il layout diventa piu' largo dello schermo e la parte destra della barra (il tasto
       tondo, microfono o invio) esce dalla vista. A 16 px quell'ingrandimento non c'e' piu' - e su un
       telefono si scrive anche piu' comodo. */
    .chat-scrivi textarea {
        font-size: 16px;
    }

    /* L'AREA DEI MESSAGGI CEDE LEI (26/09/2026): si puo' scorrere, quindi puo' rimpicciolirsi fino in fondo -
       la barra di scrittura no, e i suoi tasti (il microfono, il quadrato che ferma la registrazione e la
       nota con il motivo) devono restare tutti raggiungibili. Con il minimo di 200 px, su un telefono basso
       - o con le barre di Safari in vista, che abbassano il `dvh` - la barra finiva fuori dalla stanza. */
    .chat-messaggi {
        min-height: 0;
    }

    .chat-pannello__azioni {
        display: flex;
        flex-direction: column;
    }

    .chat-wrap {
        padding: 0;
    }

    .chat-pannello {
        padding: 18px 16px;
    }

    .chat-griglia {
        grid-template-columns: 1fr;
        border-radius: 0;
    }

    /* L'ALTEZZA TOGLIE ANCHE LA BARRA IN BASSO (22/09/2026). Il corpo della pagina ha gia' il suo
       `padding-bottom` per la barra, ma questa colonna ha un'altezza FISSA: la barra va tolta anche qui. */
    .chat-elenco,
    .chat-stanza {
        height: calc(100vh - var(--shell-top) - 12px - var(--app-nav-h, 58px) - env(safe-area-inset-bottom, 0px) - var(--chat-avviso, 0px));
        height: calc(100dvh - var(--shell-top) - 12px - var(--app-nav-h, 58px) - env(safe-area-inset-bottom, 0px) - var(--chat-avviso, 0px));
        min-height: 370px;
    }

    .chat-stanza {
        background-image: var(--chat-motivo);
        background-repeat: repeat;
        background-size: 240px 240px;
    }

    .chat-testa__indietro {
        display: inline-flex;
    }

    .chat-griglia.is-stanza .chat-elenco {
        display: none;
    }

    .chat-elenco,
    .chat-stanza {
        border-radius: 0;
    }
    .chat-elenco {
        border-radius: 0;
        padding-bottom: 1rem;
    }
    .chat-griglia:not(.is-stanza) .chat-stanza {
        display: none;
    }

    .chat-msg {
        max-width: max-content;
    }

    .chat-giu {
        bottom: 104px;
        right: 15px;
    }
}

/* ---------- LE CHIAVI DEL DISPOSITIVO (22/09/2026) ---------- */
/* ---------- LA ZONA DELLE CHIAVI, IN ORDINE (22/09/2026) ---------- */
.chat-chiavi-azioni {
    display: block;
    margin-top: 5px;
}

.chat-chiavi-azioni__dentro {
    display: block;
    margin-top: 5px;
}

.chat-chiavi-azioni__dentro.hidden {
    display: none;
}

.chat-chiavi-azioni__nota {
    display: block;
    margin-top: 4px;
    font-size: 0.66rem;
    line-height: 1.35;
    color: var(--mood-text-muted);
}

.chat-chiavi-perche {
    font: inherit;
    color: var(--mood-primary);
    background: transparent;
    border: 0;
    padding: 0;
    margin-left: 4px;
    cursor: pointer;
    text-decoration: underline;
}

.chat-chiavi-perche-testo {
    display: block;
    margin-top: 3px;
    color: var(--mood-text-muted);
}

.chat-chiavi-perche-testo.hidden {
    display: none;
}

.chat-chiavi-azioni button {
    background: none;
    border: 1px solid var(--mood-border);
    border-radius: 999px;
    color: var(--mood-text-muted);
    font-size: 0.68rem;
    padding: 1px 8px;
    cursor: pointer;
    font-family: var(--mood-font);
}

.chat-chiavi-azioni button:hover {
    color: var(--mood-text);
    border-color: var(--mood-primary);
}

.chat-chiavi-avviso {
    display: block;
    margin-top: 6px;
    line-height: 1.4;
    color: var(--mood-text);
}

/* ---------- LA COPIA SICURA SUL SERVER (22/09/2026) ---------- */
.chat-busta {
    display: block;
    margin-top: 6px;
    padding: 3px 20px 16px 20px;
}

.chat-busta__stato {
    display: block;
    line-height: 1.4;
}

.chat-busta__stato b {
    color: var(--mood-text);
}

.chat-busta__azioni {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 5px;
}

/* IL CAMPO DELLA PASSWORD NON C'E' PIU' (22/09/2026): qui c'erano `.chat-busta__frase` e
   `.chat-busta__frase input` - il campo `type="password"` con "Metti al sicuro" / "Riprendi la cronologia". */
.chat-busta__azioni button {
    font: inherit;
    font-size: 0.72rem;
    color: var(--mood-text-muted);
    background: transparent;
    border: 1px solid var(--mood-border);
    border-radius: 7px;
    padding: 3px 8px;
    cursor: pointer;
}

.chat-busta__azioni button:hover {
    color: var(--mood-text);
    border-color: var(--mood-primary);
}

.chat-busta__azioni button.is-primario {
    /* "white" come in `mood.css` (`.mood-btn-primary`): il controllo del titolare non vuole colori scritti
       a mano in questo foglio (`check_chat_ui.py`, "nessun #esadecimale"), e la tinta chiara sul viola
       primario e' la stessa che usa il sito. */
    color: white;
    background: var(--mood-primary);
    border-color: var(--mood-primary);
}

.chat-busta__azioni button.is-primario:hover {
    color: white;
    filter: brightness(1.06);
}

/* ==========================================================================
   COLLEGARE UN DISPOSITIVO (24/09/2026) */
.chat-collega {
    display: block;
    margin-top: 8px;
}

.chat-collega.hidden {
    display: none;
}

.chat-collega__lato {
    display: inline-flex;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: var(--mood-bg, #101018);
    border: 1px solid var(--mood-border, #2A2A4A);
    border-radius: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.chat-collega__lato b {
    display: block;
    margin-bottom: 4px;
    font-size: 0.86rem;
    color: var(--mood-text, #e6e6ef);
}

.chat-collega__spiega {
    display: block;
    margin-bottom: 8px;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--mood-text-muted, #8888AA);
}

.chat-collega__tasto {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--mood-border, #2A2A4A);
    border-radius: 999px;
    background: var(--mood-bg-card, #15152A);
    color: var(--mood-text, #e6e6ef);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.chat-collega__tasto:hover {
    border-color: var(--mood-primary, #6C5CE7);
}

.chat-collega input {
    width: 100%;
    max-width: 170px;
    margin-right: 8px;
    padding: 8px 10px;
    background: var(--mood-bg-card, #15152A);
    color: var(--mood-text, #e6e6ef);
    border: 1px solid var(--mood-border, #2A2A4A);
    border-radius: 10px;
    font-size: 1rem;
    letter-spacing: 0.2em;
    font-variant-numeric: tabular-nums;
}

.chat-collega__codice {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    text-align: center;
}

.chat-collega__codice.hidden {
    display: none;
}

.chat-collega__numero {
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    font-variant-numeric: tabular-nums;
    color: var(--mood-text, #e6e6ef);
}

.chat-collega__qr svg {
    display: block;
    width: 148px;
    height: 148px;
    /* Il QR resta BIANCO anche in tema scuro: un QR scuro non si legge col telefonino. E' l'unico colore
       scritto a mano che non si puo' togliere, e `check_chat_ui.py` lo sa (lo esenta, con questa ragione). */
    background: #fff;
    border-radius: 10px;
    padding: 4px;
}

.chat-collega__esito {
    display: block;
    min-height: 1.1em;
    font-size: 0.8rem;
    color: var(--mood-text-muted, #8888AA);
}

/* I due esiti del collegamento (25/09/2026): i colori del sito, non scritti a mano. */
.chat-collega__esito--ok {
    color: var(--mood-success);
}

.chat-collega__esito--ko {
    color: var(--mood-danger);
}

.chat-busta__nota {
    display: block;
    margin-top: 4px;
    font-size: 0.68rem;
    line-height: 1.35;
    color: var(--mood-text-muted);
}

/* ==========================================================================
   IL PANNELLO DELLE CHIAVI - un aside che entra dal lato (24/09/2026) */
.chat-chiavi-pannello__testa {
    justify-content: space-between;
}

.chat-chiavi-pannello__testa .mood-drawer-ident {
    flex: 1 1 auto;
}

.chat-chiavi-pannello__chiudi {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--mood-border, #2A2A4A);
    border-radius: 50%;
    background: transparent;
    color: var(--mood-text-muted, #8888AA);
    cursor: pointer;
}

.chat-chiavi-pannello__chiudi:hover {
    color: var(--mood-text, #F0F0FF);
    border-color: var(--mood-primary, #6C5CE7);
}

.chat-chiavi-pannello__corpo {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px));
}

/* Nel pannello il blocco della copia non ha piu' i margini della colonna stretta. */
.chat-chiavi-pannello .chat-busta {
    margin-top: 0;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--mood-border, #2A2A4A);
}

.chat-chiavi-pannello .chat-busta__stato {
    font-size: 0.9rem;
    line-height: 1.5;
}

.chat-chiavi-pannello .chat-chiavi-azioni {
    margin-top: 14px;
}

.chat-chiavi-pannello .chat-chiavi-azioni__dentro {
    margin-top: 0;
}

.chat-chiavi-pannello .chat-chiavi-azioni__dentro button:not(.chat-collega__tasto) {
    width: 100%;
}

/* I tasti: larghi, alti, uno per riga - uno solo ha senso in una colonna stretta, non in un pannello. */
.chat-chiavi-pannello .chat-chiavi-azioni button,
.chat-chiavi-pannello .chat-busta__azioni button {
    display: block;
    width: 100%;
    min-height: 44px;
    margin-bottom: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.86rem;
    font-weight: 600;
    text-align: left;
}

.chat-collega__tasto {
    min-height: initial !important;
    margin-bottom: initial !important;
}

.chat-chiavi-pannello .chat-busta__azioni {
    margin-top: 10px;
}

.chat-chiavi-pannello .chat-chiavi-azioni__nota,
.chat-chiavi-pannello .chat-busta__nota {
    font-size: 0.78rem;
    line-height: 1.5;
}

/* Il tasto che apre il pannello: l'unico in vista, quindi si fa vedere. */
.chat-chiavi-azioni__apri {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 3px 8px;
    border-radius: var(--mood-radius-sm);
    border: none;
    cursor: pointer;
    transition: all var(--mood-transition);
    margin-left: 8px;
    background: var(--bg-button);
    color: white;
    font-size: 0.75rem;
}

.chat-chiavi-azioni__apri[aria-expanded="true"] {
    color: var(--mood-text, #F0F0FF);
    border-color: var(--mood-primary, #6C5CE7);
}

/* Telefono: il pannello e' gia' largo 92vw (`mood-drawer`), e i tasti crescono ancora un po'. */
@media (max-width: 600px) {

    .chat-chiavi-pannello .chat-chiavi-azioni button,
    .chat-chiavi-pannello .chat-busta__azioni button {
        min-height: 48px;
        font-size: 0.9rem;
    }

    .chat-chiavi-pannello__corpo {
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* I COLLEGAMENTI DELLA STANZA (24/09/2026). Il titolare: "non e' linkabile al profilo o al gruppo". Il nome */
.chat-testa__chi b a {
    color: inherit;
    text-decoration: none;
}

.chat-testa__chi b a:hover {
    text-decoration: underline;
}

/* IL NOME DELLA STANZA RESTA SU UNA RIGA SOLA (26/09/2026).
   IL TITOLARE: "poi titoli troppo lunghi vanno troncati perche' sballano tutti chat-testa__chi ... */
.chat-testa__chi b,
.chat-testa__chi b a {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-msg__nome {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 2px;
}

.chat-msg__nome:hover {
    color: var(--mood-primary, #6c5ce7);
    text-decoration: underline;
}

/* LE ICONE DELLA RIGA: CHE COSA E' QUESTA CONVERSAZIONE (24/09/2026). Il titolare: "vi vuole una icona */
.chat-riga__faccia {
    position: relative;
    flex: none;
    display: inline-flex;
}

.chat-riga__foto--gruppo {
    display: grid;
    place-items: center;
    color: var(--mood-primary, #6c5ce7);
    background: rgba(108, 92, 231, 0.16);
    background: color-mix(in srgb, var(--mood-primary) 16%, var(--mood-bg-hover));
    box-shadow: 0 0 0 2px var(--mood-bg-card);
}

.chat-riga__foto--gruppo svg {
    width: 22px;
    height: 22px;
}

.chat-riga__tipo {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--mood-bg-card);
    border: 1px solid var(--mood-border);
    color: var(--mood-primary, #6c5ce7);
}

.chat-riga__tipo svg {
    width: 11px;
    height: 11px;
}

@media (max-width: 600px) {

    /* Su telefono la riga e' piu' bassa: il pallino resta leggibile ma non tocca il testo. */
    .chat-riga__tipo {
        width: 17px;
        height: 17px;
    }

    .chat-riga__tipo svg {
        width: 10px;
        height: 10px;
    }
}

/* L'ICONA DEL TIPO DI MESSAGGIO (24/09/2026): "se e' media con iconcina media". Nell'anteprima dell'elenco
   l'icona sta davanti al testo (una foto non e' una riga di testo) e dentro la bolla dice che tipo e' il
   messaggio anche quando l'anteprima e' piccola o non si apre. */
.chat-riga__chi span svg {
    width: 13px;
    height: 13px;
    vertical-align: -2px;
}

.chat-msg__media {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--button-text-color);
    padding-inline: 5px;
}

.chat-msg__media svg {
    width: 13px;
    height: 13px;
}

.chat-msg--mio .chat-msg__media {
    color: inherit;
    opacity: 0.85;
}

/* "INOLTRATO" SULLA BOLLA (26/09/2026). Il titolare: "manca inoltra a" (il menu del messaggio). Il cartello
   sta in cima alla bolla, come il nome di chi scrive nei gruppi: piccola riga con la freccia, che si legge
   subito e non ruba spazio al contenuto. Dentro le MIE bolle (viola) eredita il colore del testo. */
.chat-msg__inoltro {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #5d4e4e;
}

.chat-msg__inoltro svg {
    width: 12px;
    height: 12px;
}

.chat-msg--mio .chat-msg__inoltro {
    color: inherit;
    opacity: 0.85;
}

/* E dentro una bolla-emoji il cartello prende lo stesso colore attenuato della riga sopra il texto
   (la regola di `__media` e `__nome`): li' c'e' una faccina grande e il resto non deve gridare. */
.chat-msg--emoji .chat-msg__inoltro {
    color: var(--mood-text-muted);
}

/* LE REAZIONI SULLA BOLLA (25/09/2026). "Prima le reazioni sui messaggi (pollicecuore sulla bolla) ... se mettiamo */
.chat-msg__reazioni {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
    color: #eeeeee;
}

.chat-msg__reazione {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--mood-bg-hover);
    border: 1px solid var(--mood-border);
    color: var(--mood-text);
    font: inherit;
    line-height: 1.4;
    cursor: pointer;
}

.chat-msg__reazione.is-mia {
    border-color: var(--mood-primary);
    background: rgba(108, 92, 231, 0.16);
    background: color-mix(in srgb, var(--mood-primary) 16%, transparent);
}

.chat-msg__reazione.is-lettura {
    cursor: default;
    opacity: 0.85;
}

/* IL «+N» DELLE PILLOLE (29/09/2026): non e' una reazione (toccandola non si toglie niente), apre quelle
   che restano. Stessa forma delle pillole - cosi' la fila resta una fila - col contorno tratteggiato che
   dice «qui c'e' altro». */
.chat-msg__reazione--piu {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--mood-text-muted);
    border-style: dashed;
}

.chat-msg__reazione-emoji {
    font-size: 1rem;
    line-height: 1.1;
}

.chat-msg__reazione-quante {
    font-size: 0.72rem;
    color: var(--mood-text-muted);
}

/* LA FILA DELLE EMOJI VELOCI (25/09/2026 · OTTO + IL «+» DAL 29/09/2026). Sta dentro la bolla, in fondo.
   Va a capo invece di sfondare: sul telefono la bolla e' larga al massimo 296px, e nove tasti non ci stanno
   sempre in una riga sola - meglio due righe dentro la bolla che tasti fuori dallo schermo. */
.chat-msg__scelta {
    display: flex;
    max-width: 100%;
    gap: 2px;
    margin-top: 4px;
    padding: 5px 15px;
    border-radius: 999px;
    background: var(--mood-bg-card);
    border: 1px solid var(--mood-border);
    box-shadow: var(--mood-shadow);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    align-items: center;
}

.chat-msg__scelta-emoji {
    background: none;
    border: 0;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    padding: 2px 3px;
    border-radius: 8px;
    transition: transform var(--mood-transition);
}

.chat-msg__scelta-emoji:hover {
    background: var(--mood-bg-hover);
    transform: scale(1.18);
}

/* IL «+» E' UN TASTO DIVERSO (29/09/2026): non e' una reazione, e' la porta al catalogo (1914 emoji con la
   ricerca). Si vede dal disegno (un più, non un'emoji) e dal colore attenuato; la misura resta quella degli
   altri, cosi' il dito non cambia mira. */
.chat-msg__scelta-emoji--piu {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--mood-text-muted);
}

/* SUL TELEFONO LA FILA SI STRINGE (29/09/2026): un tasto da 28px invece che da 31, cosi' gli otto tasti
   veloci restano in una riga e il «+» scende sotto da solo quando serve. */
@media (max-width: 600px) {
    .chat-msg__scelta {
        gap: 1px;
        padding: 3px 7px;
        max-width: 150px;
    }

    .chat-msg__scelta-emoji {
        font-size: 1.1rem;
        padding: 8px 6px;
    }
}

.chat-msg__azione--reagisci {
    padding: 0 4px;
}

/* IL TASTO DEL MENU, ACCANTO ALL'ORA (26/09/2026). Il titolare: "a fianco dei singoli messaggi e' meglio */
.chat-msg__azione--menu {
    padding: 2px 4px;
    border-radius: 6px;
}

.chat-msg__azione--menu:hover {
    color: var(--mood-repost);
    background: var(--mood-bg-hover-nd);
}

.chat-msg--mio .chat-msg__azione--menu:hover {
    color: var(--white);
}

/* EMOJI DA SOLE = EMOJI GRANDI, come nelle altre chat: un messaggio di soli simboli si legge dall'altra
   parte della stanza (su telefono un po' meno, per non mangiare tutta la bolla). */
.chat-msg__testo--emoji {
    font-size: 38px;
    line-height: 1.15;
}

/* ============================ IL PANNELLO DELLE EMOJI (25/09/2026) ============================ */
.chat-scrivi {
    position: relative;
}

.chat-scrivi__emoji {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: var(--mood-radius-sm);
    background: none;
    color: var(--mood-text-muted);
    cursor: pointer;
    transition: color var(--mood-transition);
}

.chat-scrivi__emoji:hover,
.chat-scrivi__emoji[aria-expanded="true"] {
    color: var(--mood-primary);
}

.chat-scrivi__emoji svg {
    width: 22px;
    height: 22px;
}

.chat-emoji {
    position: absolute;
    left: auto;
    right: 0;
    min-width: 250px;
    /* COL CATALOGO IL PANNELLO E' PIU' LARGO (27/09/2026): con 1914 emoji una finestrella da 250px
       faceva righe da sei tasti e uno scorrimento infinito. La misura e' la stessa del campo di
       scrittura della chat, e non supera mai il telefono. */
    width: min(380px, 92vw);
    bottom: 100%;
    margin-bottom: 6px;
    max-height: 46vh;
    /* NON SCORRE IL PANNELLO: scorrono i GRUPPI (`chat-emoji__corpo`). Cosi' la ricerca e la nota
       restano ferme in cima anche dopo mille righe di scorrimento — e senza altezze indovinate. */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 8px 10px 12px;
    border: 1px solid var(--mood-border);
    border-radius: var(--mood-radius-sm);
    background: var(--mood-bg-card);
    box-shadow: var(--mood-shadow);
    z-index: 30;
}

/* La ricerca: e' la pillola delle altre ricerche della chat (`.chat-cerca-box`), con i margini di qui. */
.chat-emoji__cerca {
    flex: none;
    margin: 0 0 6px;
}

.chat-emoji__nota {
    flex: none;
    margin: 0 2px 6px;
    font-size: 0.82rem;
    color: var(--mood-text-muted);
}

/* Il corpo che scorre. `min-height: 0` non e' un dettaglio: senza, un figlio flessibile non si accorcia
   sotto il suo contenuto, e il pannello sfonderebbe il `max-height` invece di far scorrere. */
.chat-emoji__corpo {
    flex: 1;
    min-height: 0;
    /* LO SPAZIO PER IL SALTO (27/09/2026): ai lati un po' di respiro, altrimenti l'emoji della prima e
       dell'ultima colonna, quando salta, viene tagliata dal bordo del pannello (misurato: 5px fuori). */
    padding: 0 5px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

/* IL NOME DEL GRUPPO RESTA IN CIMA MENTRE SI SCORRE (27/09/2026): con i gruppi lunghi (le bandiere sono
   270) il titolo se ne andava via e non si sapeva piu' dove si era. */
.chat-emoji__titolo {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 10px 0 4px;
    padding: 2px 0;
    background: var(--mood-bg-card);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mood-text-muted);
}

.chat-emoji__titolo:first-child {
    margin-top: 0;
}

.chat-emoji__griglia {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
    gap: 2px;
}

.chat-emoji__emoji {
    /* `--chat-emoji-alone` (il cerchio di luce) sta su `.chat-wrap` (27/09/2026): da li' lo vedono il
       pannello e le emoji dei messaggi tutti e due, mentre una variabile dichiarata qui valeva solo
       dentro il tasto. Qui resta il disegno del tasto. */
    padding: 5px 0;
    border: 0;
    border-radius: 8px;
    background: none;
    font-size: 1.4rem;
    line-height: 1.1;
    cursor: pointer;
    transition: background var(--mood-transition);
}

/* IL DISEGNO DELL'EMOJI, avvolto in uno `span` da chat.js. A ingrandirsi e' LUI, non il tasto: i 1914 tasti
   stanno in una griglia dentro un corpo che scorre (`overflow: hidden` con `auto`), e un tasto che esce dal
   suo riquadro viene tagliato sui bordi del pannello - l'ultima colonna, la prima riga. Cosi' invece il
   tasto resta fermo al suo posto (la griglia non si sposta di un pixel) e si muove solo il carattere, che
   cresce dentro il suo stesso riquadro. `display: inline-block` non e' un dettaglio: su un elemento in
   linea `transform` non ha nessun effetto. Il `border-radius: 50%` e' quello che rende tondo il cerchio di
   luce, perche' il `box-shadow` prende la forma del riquadro. */
.chat-emoji__segno {
    display: inline-block;
    transform-origin: 50% 55%;
    border-radius: 50%;
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease;
}

/* COL MOUSE: si allarga, si solleva di un respiro, e sotto di lei si accende il cerchio di luce. Solo dove
   il mouse esiste davvero (`hover: hover` e `pointer: fine`): su un telefono `:hover` resta attaccato
   all'ultimo tocco, e l'emoji resterebbe grande per sempre. Il fondo del tasto c'era gia' prima. */
@media (hover: hover) and (pointer: fine) {
    .chat-emoji__emoji:hover {
        background: var(--mood-bg-hover);
    }

    .chat-emoji__emoji:hover .chat-emoji__segno {
        transform: scale(1.34) translateY(-2px);
    }
}

/* COL DITO E COL CLIC: mentre si preme l'emoji cresce subito, senza aspettare che il clic finisca (sul
   telefono la risposta arriva nell'istante in cui il dito tocca), e il fondo dice che il tasto e' preso. */
.chat-emoji__emoji:active {
    background: var(--mood-bg-hover);
}

.chat-emoji__emoji:active .chat-emoji__segno {
    transform: scale(1.42);
    transition-duration: 0.08s;
}

/* IL SALTO (27/09/2026). Il titolare: "le emoji sono gia' leggermente animate ... si puo' fare che con
   hover o click da mobile si allargano ancora un po' ... un effetto grazioso ... qualcosa che renda uniche
   le nostre emoji". La classe `is-scoppio` la mette chat.js al clic e se ne va da sola quando l'animazione
   finisce: prima cresce di slancio con un piccolo scarto di lato, poi rimbalza indietro e si posa, mentre
   il cerchio di luce sboccia e svanisce. Mezzo secondo, e tutto torna fermo com'era. */
.chat-emoji__emoji.is-scoppio .chat-emoji__segno {
    animation: chat-emoji-scoppio 0.5s cubic-bezier(0.22, 0.7, 0.85, 0.43) both;
}

@keyframes chat-emoji-scoppio {
    0% {
        transform: scale(1) rotate(0deg);
        box-shadow: 0 0 0 0 var(--chat-emoji-alone);
    }

    55% {
        transform: scale(1.2) rotate(-8deg);
        box-shadow: 0 0 0 7px var(--chat-emoji-alone);
    }

    70% {
        transform: scale(1.02) rotate(5deg);
        box-shadow: 0 0 0 10px transparent;
    }

    100% {
        transform: scale(1) rotate(0deg);
        box-shadow: 0 0 0 0 transparent;
    }
}

/* A CHI HA CHIESTO AL SISTEMA DI NON MUOVERE NIENTE non si muove niente: niente salto, niente scarto di
   lato, niente cerchio che sboccia. Resta il fondo del tasto, perche' il feedback non si toglie a nessuno. */
@media (prefers-reduced-motion: reduce) {
    .chat-emoji__segno {
        transition: none;
    }

    .chat-emoji__emoji:hover .chat-emoji__segno,
    .chat-emoji__emoji:active .chat-emoji__segno {
        transform: none;
        box-shadow: none;
    }

    .chat-emoji__emoji.is-scoppio .chat-emoji__segno {
        animation: none;
    }
}

/* LE EMOJI CON IL FONT GIUSTO (25/09/2026): nella stanza, nel pannello e sulle reazioni. Senza, su qualche
   sistema escono in bianco e nero o come quadratini. */
.chat-msg__testo,
.chat-emoji__emoji,
.chat-msg__reazione-emoji,
.chat-msg__scelta-emoji {
    font-family: var(--mood-font), "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif;
}

/* Da quattro a nove emoji: medie. Una fila a misura piena sarebbe una bolla senza testo. */
.chat-msg__testo--emoji-medio {
    font-size: 26px;
    line-height: 1.2;
}

/* ============================ EMOJI DA SOLA: SI VEDE DIRETTAMENTE (25/09/2026) ============================ */
.chat-msg--emoji {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 4px 14px; /* e' del titolare non cancellare */
    min-width: 0;
    flex: 0 0 auto;
    margin-block-end: 6px;
}

/* L'ANIMAZIONE DELLA BOLLA-EMOJI E' DEL TITOLARE (25/09/2026, 18:37) - PORTATA QUI, NON CANCELLATA. */
.chat-msg--emoji .chat-msg__testo--emoji {
    font-size: 120px;
    line-height: 1.1;
    animation: 5s ease-in-out infinite float;
}

.chat-msg--emoji .chat-msg__testo--emoji-medio {
    font-size: 34px;
}

/* L'ora e le spunte di una bolla-emoji non stanno piu' DENTRO la bolla (29/09/2026): sono nella riga di sotto,
   che e' fuori dallo sfondo - e il colore giusto (quello attenuato) e' gia' quello della riga per tutti
   (`.chat-msg__pie`, «LA BOLLA PULITA»). Qui restano solo i pezzi che stanno ancora dentro: il cartello del
   tipo e il nome di chi scrive. */
.chat-msg--emoji .chat-msg__media,
.chat-msg--emoji .chat-msg__nome {
    color: var(--mood-text-muted);
}

@media (max-width: 600px) {
    .chat-msg--emoji .chat-msg__testo--emoji {
        font-size: 90px;
    }
}

/* ==================== L'EMOJI DEL MESSAGGIO SI MUOVE DAVVERO (27/09/2026, sera) ====================
   IL TITOLARE, DUE VOLTE. Prima: "voglio una animazione vera, non un border che non segue le forme
   dell'emoji". Poi, davanti al risultato: "le animazioni sono pessime". Aveva ragione due volte, e i due
   difetti erano questi:

   1. IL CERCHIO ERA UNA SCATOLA. `box-shadow` disegna il RIQUADRO dell'elemento: la `border-radius` lo
      stondava, ma restava un anello geometrico attorno a un disegno che geometrico non e' (una bandiera,
      una faccia che cola, un fiocco). Adesso l'alone e' `filter: drop-shadow()`: guarda i PIXEL DISEGNATI,
      alfa compreso, quindi prende la forma del glifo. `text-shadow` non basterebbe: sulle emoji a colori
      (COLR/CPAL, CBDT/CBLC, sbix) alcuni sistemi lo ignorano. Via anche la `border-radius`, che serviva solo
      a stondare la scatola.
   2. UNA MOSSA SOLA PER TUTTE. Ogni clic faceva lo stesso salto, su ogni emoji: una faccina che trema che
      saltella come una che fa festa e' rumore. Adesso la mossa la sceglie l'EMOJI (la tabella sta in
      chat.js, `MOSSE_EMOJI`): quattro movimenti con caratteri diversi, e le emoji senza un mestiere loro
      ricevono comunque il pop.

   QUELLO CHE NON SI CAMBIA (era la trappola pagata il 25/09): si scrive con `scale`/`rotate`/`translate`
   (le proprieta' singole), NON `transform`, perche' la bolla-emoji ha l'animazione `float` del titolare che
   gira su `transform`: un `transform` in `:hover` o in una `@keyframes` PERDE contro un'animazione in corso,
   mentre le proprieta' singole si sommano al `float` (l'emoji continua a galleggiare mentre fa il suo
   numero). `display: inline-block` serve come nel pannello: su un elemento in linea `scale` non fa niente.

   I COLORI SONO GETTONI, non valori scritti a mano: `--chat-emoji-alone` (l'alone fermo, col mouse) e
   `--chat-emoji-lampo` (l'alone acceso, durante la mossa), tutti e due su `.chat-wrap` perche' li' li vedono
   il pannello e la stanza. */
.chat-msg__testo--emoji,
.chat-msg__testo--emoji-medio {
    display: inline-block;
    /* Il "piede" del glifo: le mosse partono da terra, non dal centro geometrico (che per un carattere sta
       piu' in alto). */
    transform-origin: 50% 70%;
    transition: scale 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), rotate 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
        filter 0.22s ease;
}

/* COL MOUSE. Solo dove il mouse esiste davvero: su un telefono `:hover` resta attaccato all'ultimo tocco. */
@media (hover: hover) and (pointer: fine) {
    .chat-msg__testo--emoji:hover {
        scale: 1.12;
        filter: drop-shadow(0 3px 6px var(--chat-emoji-alone));
    }

    /* L'EMOJI DA SOLA: alone DOPPIO, che si allarga dal contorno del disegno. */
    .chat-msg__testo--emoji-una:hover {
        scale: 1.15;
        filter: drop-shadow(0 0 10px var(--chat-emoji-lampo)) drop-shadow(0 0 22px var(--chat-emoji-lampo));
    }

    /* Il gruppetto (da quattro a nove emoji): crescita appena, senza alone doppio che farebbe ballare un
       blocco di testo. */
    .chat-msg__testo--emoji-medio:hover {
        scale: 1.04;
        filter: drop-shadow(0 2px 4px var(--chat-emoji-alone));
    }
}

/* AL CLIC (o al tocco) LA MOSSA. Non piu' un salto uguale per tutte: quattro movimenti con caratteri
   diversi, scelti dall'emoji (la tabella `MOSSE_EMOJI` sta in chat.js). La classe se ne va da sola quando
   l'animazione finisce (`animationend`): nel DOM non resta niente appeso. A chi ha chiesto al sistema di
   non muovere niente la classe non arriva nemmeno (chat.js lo guarda), e comunque le regole in fondo
   spengono tutto. */

/* 1. IL POP CHE RIMBALZA - le emoji che SBUCANO: faccina che spunta, festa, stelle filanti, trombette,
   testa che esplode. E' anche la mossa di TUTTE le altre: un clic che non fa niente su quasi tutte le emoji
   sarebbe un difetto peggiore della monotonia. */
.chat-msg__testo--emoji.is-scoppia {
    animation: chat-emoji-scoppia 1.55s cubic-bezier(0.22, 0.7, 0.3, 1) both;
}

@keyframes chat-emoji-scoppia {
    0% {
        scale: 0.4;
        rotate: -14deg;
        opacity: 0;
        filter: drop-shadow(0 0 0 transparent);
    }

    35% {
        scale: 1.25;
        rotate: 6deg;
        opacity: 1;
        filter: drop-shadow(0 0 14px var(--chat-emoji-lampo));
    }

    62% {
        scale: 0.92;
        rotate: -3deg;
        filter: drop-shadow(0 0 8px var(--chat-emoji-lampo));
    }

    82% {
        scale: 1.06;
        rotate: 1deg;
        filter: drop-shadow(0 0 4px var(--chat-emoji-lampo));
    }

    100% {
        scale: 1;
        rotate: 0deg;
        opacity: 1;
        filter: drop-shadow(0 0 0 transparent);
    }
}

/* 2. IL TREMOLIO - le emoji spaventate o infreddolite: faccina congelata, che urla, spaventata, che
   sbircia fra le dita. Il tremolio e' IRREGOLARE apposta (ampiezze diverse a destra e a sinistra): un
   sinusoidale puro sembrerebbe un motore, non paura. */
.chat-msg__testo--emoji.is-trema {
    animation: chat-emoji-trema 0.6s ease-in-out both;
}

@keyframes chat-emoji-trema {

    0%,
    100% {
        translate: 0 0;
        rotate: 0deg;
    }

    10% {
        translate: -3px 0;
        rotate: -2deg;
    }

    20% {
        translate: 3px 0;
        rotate: 2deg;
    }

    30% {
        translate: -3px 0;
        rotate: -2deg;
    }

    40% {
        translate: 3px 0;
        rotate: 2deg;
    }

    50% {
        translate: -2px 0;
        rotate: -1deg;
    }

    60% {
        translate: 2px 0;
        rotate: 1deg;
    }

    70% {
        translate: -2px 0;
        rotate: -1deg;
    }

    80% {
        translate: 2px 0;
        rotate: 1deg;
    }

    90% {
        translate: -1px 0;
        rotate: -1deg;
    }
}

/* 3. LA ROTAZIONE CON SPINTA - le emoji che girano: ruota panoramica, ciclone, giostra, ingranaggio.
   Parte piano, accelera, sorpassa e si assesta: come una trottola che si ferma. Un `rotate` lineare
   sembrerebbe un orologio. */
.chat-msg__testo--emoji.is-gira {
    animation: chat-emoji-gira 1.2s cubic-bezier(0.22, 0.7, 0.3, 1) both;
}

@keyframes chat-emoji-gira {
    0% {
        rotate: 0deg;
        scale: 1;
    }

    15% {
        rotate: -18deg;
        scale: 1.18;
    }

    60% {
        rotate: 360deg;
        scale: 1.05;
    }

    80% {
        rotate: 372deg;
        scale: 1.02;
    }

    100% {
        rotate: 360deg;
        scale: 1;
    }
}

/* 4. LA SCIOGLITURA - le emoji che si deformano: faccina che si scioglie, stordita, frastornata. Quello che
   fa "colare" e' la scala NON uniforme (larga e bassa, poi stretta e alta): non e' uno zoom, e' una
   deformazione. */
.chat-msg__testo--emoji.is-scioglie {
    animation: chat-emoji-scioglie 1s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes chat-emoji-scioglie {
    0% {
        scale: 1 1;
        translate: 0 0;
    }

    20% {
        scale: 1.15 0.85;
        translate: 0 2px;
    }

    45% {
        scale: 0.9 1.15;
        translate: 0 -4px;
    }

    70% {
        scale: 1.05 0.95;
        translate: 0 1px;
    }

    100% {
        scale: 1 1;
        translate: 0 0;
    }
}

/* 5. IL GRUPPETTO (da quattro a nove emoji): una spinta piccola su tutto il blocco. Farlo scartare di lato
   o girare sarebbe un pezzo di testo che balla. */
.chat-msg__testo--emoji-medio.is-scoppio-gruppo {
    animation: chat-emoji-gruppo 1.5s cubic-bezier(0.27, 0.1, 0.67, 1.04) both;
}

@keyframes chat-emoji-gruppo {

    0%,
    100% {
        scale: 1;
    }

    65% {
        scale: 1.02;
    }
}

/* A CHI HA CHIESTO DI NON MUOVERE NIENTE: niente. La classe non arriva nemmeno (chat.js guarda
   `prefers-reduced-motion` prima di metterla), quindi queste regole sono la rete di sicurezza: se un domani
   la classe arrivasse da un'altra strada, qui viene spenta. */
@media (prefers-reduced-motion: reduce) {

    .chat-msg__testo--emoji,
    .chat-msg__testo--emoji-medio {
        transition: none;
    }

    .chat-msg__testo--emoji:hover,
    .chat-msg__testo--emoji-una:hover,
    .chat-msg__testo--emoji-medio:hover {
        scale: none;
        filter: none;
    }

    .chat-msg__testo--emoji.is-scoppia,
    .chat-msg__testo--emoji.is-trema,
    .chat-msg__testo--emoji.is-gira,
    .chat-msg__testo--emoji.is-scioglie,
    .chat-msg__testo--emoji-medio.is-scoppio-gruppo {
        animation: none;
    }
}

/* LE EMOJI RICEVUTE STANNO DI FIANCO ALL'AVATAR - E NON SERVE PIU' NIENTE (25/09/2026). */

/* E sotto l'emoji: le reazioni (dentro la bolla) e poi l'ora con le spunte, nella riga di sotto (prima erano
   una sotto l'altra: misurate a 381 e 410, due righe di testo sottolineato sotto un'emoji grande).
   IL `flex-start` NON SERVE PIU' (29/09/2026): il lato dell'ora lo decide la colonna (`--mio` a destra, `--loro`
   a sinistra), e per un'emoji sola le due cose coincidono. Serve invece lo SCOSTAMENTO di 14px: la bolla-emoji
   ha 14px di padding per lato (`padding: 4px 14px`, riga del titolare, non si tocca), quindi l'ora deve cadere
   sotto l'EMOJI e non sotto il suo margine - altrimenti sembra staccata dal messaggio. */
.chat-msg__corpo--emoji .chat-msg__pie {
    padding-inline: 14px;
}

/* ==================== I PEZZI PRONTI: SI VEDONO PRIMA DI MANDARLI, IN UNA MODALE (25/09/2026) ========== */
.chat-pezzi {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 8px;
    border-radius: 14px;
    background: var(--mood-bg-hover);
    max-height: 34vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* La finestra degli allegati pronti: un po' piu' stretta delle altre, perche' dentro ci stanno le schede. */
.chat-pezzi-box {
    max-width: 420px;
}

.chat-pezzi__nota {
    margin: -4px 0 12px;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--mood-text-muted);
}

.chat-pezzi__azioni {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
}

.chat-pezzi__aggiungi {
    padding: 8px 4px;
    border: 0;
    background: none;
    color: var(--mood-primary);
    font-family: var(--mood-font);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.chat-pezzi__aggiungi:hover {
    text-decoration: underline;
}

.chat-pezzi__tasti {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.chat-pezzo {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 32px 6px 6px;
    border: 1px solid var(--mood-border);
    border-radius: 12px;
    background: var(--mood-bg-card);
    max-width: min(100%, 320px);
}

.chat-pezzo__foto {
    width: 54px;
    height: 54px;
    border-radius: 9px;
    object-fit: cover;
    flex: none;
    background: var(--mood-bg-hover);
}

.chat-pezzo__icona {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 9px;
    background: var(--mood-bg-hover);
    color: var(--mood-primary);
    flex: none;
}

.chat-pezzo__icona svg {
    width: 22px;
    height: 22px;
}

.chat-pezzo__testo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.chat-pezzo__testo strong {
    font-size: 0.82rem;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-pezzo__testo span {
    font-size: 0.72rem;
    color: var(--mood-text-muted);
}

.chat-pezzo__via {
    position: absolute;
    top: 4px;
    right: 4px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 50%;
    background: var(--mood-bg-hover);
    color: var(--mood-text-muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.chat-pezzo__via:hover {
    color: var(--mood-danger);
}

/* Sul telefono la x diventa un bersaglio da dito. */
@media (max-width: 800px) {
    .chat-pezzo {
        max-width: 100%;
        padding-right: 50px;
    }

    .chat-pezzo__via {
        width: 44px;
        height: 44px;
        top: 2px;
        right: 2px;
        font-size: 1.3rem;
    }
}

/* ==================== LA SCHEDA DELLO STATO DI UN ALLEGATO -> IN FONDO AL FOGLIO ====================
   Era qui, in mezzo al foglio, e **non funzionava**: la regola vecchia (il grigio fisso) sta piu' sotto, nella
   sezione degli allegati, e a parita' di selettore vince l'ultima. L'ha scoperto `check_allegato_fila.py` (F1) */

/* ============================ GLI ALLEGATI (25/09/2026) ============================ */
.chat-scrivi__clip {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: var(--mood-radius-sm);
    background: none;
    color: var(--mood-text-muted);
    cursor: pointer;
    transition: color var(--mood-transition);
}

.chat-scrivi__clip:hover,
.chat-scrivi__clip[aria-expanded="true"] {
    color: var(--mood-primary);
}

.chat-scrivi__clip svg {
    width: 22px;
    height: 22px;
}

/* IL NUMERO DEGLI ALLEGATI IN ATTESA, SULLA GRAFFETTA (25/09/2026). Non e' un tasto in piu': e' una pastiglia */
.chat-scrivi__clip {
    position: relative;
}

.chat-scrivi__clip-pallino {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--mood-primary);
    color: var(--white);
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.chat-clip {
    position: absolute;
    left: 0;
    bottom: 100%;
    margin-bottom: 6px;
    min-width: 280px;
    max-width: min(92vw, 420px);
    padding: 6px;
    border: 1px solid var(--mood-border);
    border-radius: var(--mood-radius-sm);
    background: var(--mood-bg-card);
    box-shadow: var(--mood-shadow);
    z-index: 30;
}

/* ======================= LE PROPOSTE DI @ E # (28/09/2026) =======================
   IL TITOLARE: «se metto @founder ed è nella chat deve proporlo». È un elenco appeso sopra la barra, come il
   menu degli allegati (`position: absolute` su `.chat-scrivi`, che è `position: relative`), ma NON è un
   foglio: niente velo, niente `blur` del campo (vedi `guardaProposte` in chat.js). Sul telefono resta
   attaccato alla barra e largo quanto lo schermo: si sceglie col dito mentre la tastiera è aperta. */
.chat-proposte {
    position: absolute;
    left: 8px;
    bottom: 100%;
    margin-bottom: 6px;
    min-width: 250px;
    max-width: min(92vw, 380px);
    max-height: min(46vh, 320px);
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--mood-border);
    border-radius: var(--mood-radius-sm);
    background: var(--mood-bg-card);
    box-shadow: var(--mood-shadow);
    z-index: 31;
}

.chat-proposte__titolo {
    margin: 2px 8px 6px;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mood-text-muted);
}

.chat-proposte__fila {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chat-proposte__voce {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 9px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--mood-text);
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
}

.chat-proposte__voce:hover,
.chat-proposte__voce.is-scelta {
    background: var(--mood-bg-hover);
}

/* L'avatar della proposta puo' essere una fotografia, un disegno vettoriale o un VIDEO (28/09/2026):
   la regola e' scritta sulla classe, non su `img`, quindi vale per tutti e due i tag - se fosse scritta
   su `img` un video comparirebbe alla sua misura naturale (e' quello che e' successo nella ricerca delle
   persone, vedi check_chat_avatar_video.py). Lo sfondo e' per il video: finche' non e' decodificato il
   cerchio non e' un buco. */
.chat-proposte__foto {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--mood-bg-hover);
}

.chat-proposte__nome {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-proposte__sotto {
    margin-left: auto;
    color: var(--mood-text-muted);
    font-size: 0.78rem;
    flex: 0 0 auto;
}

@media (max-width: 800px) {
    .chat-proposte {
        left: 0;
        right: 0;
        min-width: 0;
        max-width: none;
    }
}

.chat-clip__voce {
    display: flex;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--mood-text);
    text-align: left;
    cursor: pointer;
    transition: background var(--mood-transition);
}

.chat-clip__voce:hover {
    background: var(--mood-bg-hover);
}

.chat-clip__icona {
    color: var(--mood-primary);
    display: flex;
    align-items: flex-start;
    padding-top: 2px;
}

.chat-clip__icona svg {
    width: 18px;
    height: 18px;
}

.chat-clip__testo {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chat-clip__testo strong {
    font-size: 0.86rem;
}

.chat-clip__testo span {
    font-size: 0.72rem;
    color: var(--mood-text-muted);
    line-height: 1.35;
}

/* Dentro la bolla: la foto, e la scheda del file. */
.chat-allegato {
    display: flex;
    position: relative;
    margin: 2px 0 4px;
    aspect-ratio: auto;
    max-width: max-content;
    background: var(--gradient-bg-like);
    border-radius: 18px;
    padding: 4px 6px;
}
.chat-msg--mio .chat-allegato{
    background: var(--gradient-post);
}
.chat-allegato__foto {
    display: block;
    max-width: min(320px, 62vw);
    max-height: 320px;
    border-radius: 14px;
    cursor: zoom-in;
    object-fit: cover;
    aspect-ratio: auto;
}

.chat-allegato__stato {
    display: block;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(127, 127, 127, 0.12);
    font-size: 0.76rem;
    color: var(--mood-text-muted);
}

.chat-allegato__file {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(127, 127, 127, 0.12);
    text-decoration: none;
    color: inherit;
    max-width: -webkit-fill-available;
}

.chat-msg--mio .chat-allegato__file {
    background: rgba(255, 255, 255, 0.18);
}

.chat-allegato__file:hover {
    color: var(--button-hover-text-color);
    background: var(--mood-bg-hover-nd);
}

.chat-allegato__file svg {
    width: 20px;
    height: 20px;
    min-width: 19px;
    flex: 1;
}

.chat-allegato__nome {
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-allegato__peso {
    font-size: 0.7rem;
    color: var(--mood-text-muted);
}

.chat-msg--mio .chat-allegato__peso {
    color: rgba(255, 255, 255, 0.82);
}

/* ============ IL NOME DI UN ALLEGATO NON ESCE DALLA NUVOLETTA (26/09/2026) ============
   IL TITOLARE: "ho visto che gli allegati hanno il nome che sborda... facciamo che il nome viene troncato per
   non farlo andare fuori dalla nuvoletta del messaggio". */
.chat-allegato__dentro {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.chat-allegato__nome {
    display: inline-block;
    max-width: 100%;
}

/* E LA STESSA COSA NELLE DUE FRASI CHE DICONO IL NOME INTERO, "Apro "..."..." e ""..." non si apre su questo */
.chat-allegato__stato {
    overflow-wrap: anywhere;
    word-break: break-word;
}


/* ---------- LA GALLERIA DEI MEDIA, A MINIATURE (26/09/2026) ---------- */
.chat-galleria {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
    width: min(320px, 62vw);
    margin: 2px 0 4px;
    border-radius: 14px;
    overflow: hidden;
    /* background: var(--gradient-black-alfa); */
}

.chat-allegato--thumb {
    margin: 0;
    aspect-ratio: auto;
    min-width: 0;
    /* LA CELLA UBBIDISCE ALLA GRIGLIA, NON AL SUO CONTENUTO (26/09/2026): `.chat-allegato` porta
       `max-width: max-content`, e con un segnaposto a larghezza percentuale (nessun testo a fare da misura)
       la cella che occupa due colonne si rimpiccioliva: misurato 136 px invece di 242, e quindi 68 di altezza
       invece di 121 - la fila dispari si sfilacciava. Una cella di galleria e' larga quanto la traccia: sempre. */
    max-width: none;
}

.chat-allegato--thumb .chat-allegato__foto,
.chat-allegato--thumb .chat-allegato__video {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    aspect-ratio: auto;
    object-fit: cover;
    border-radius: 12px;
    overflow: hidden;
}

/* La miniatura che non e' ancora arrivata: un quadrato, non un rettangolo che balla la larghezza. */
.chat-allegato--thumb .chat-allegato__stato {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 6px;
    border-radius: 0;
    font-size: 0.66rem;
    text-align: center;
    overflow: hidden;
}

/* Il play di un video in griglia: tondo e piccolo, senza il peso scritto (nella miniatura non c'e' spazio). */
.chat-allegato--thumb .chat-allegato__play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}

.chat-allegato--thumb .chat-allegato__play-peso {
    display: none;
}

.chat-galleria--dispari>.chat-allegato--thumb:last-child {
    grid-column: 1 / -1;
    aspect-ratio: 2 / 1;
}

/* ================== LA CELLA DEL CONTO: «+17» (28/09/2026) ==================
   IL TITOLARE: «tipo ho 20 allegati mostra i primi 3 e il quarto ... con dentro 17... e bottone che apre la
   galleria già così risparmiamo un sacco di spazio». È la QUARTA cella della griglia: un velo scuro sopra la
   griglia stessa, il numero grande al centro, e un tocco che apre la galleria del messaggio.
   È un `<button>` (non uno `<span>`): si preme con la tastiera e i lettori di schermo lo annunciano come
   «Vedi gli altri 17 media». Il velo è lo stesso delle foto che non sono ancora arrivate, così la cella
   appartiene visivamente alla griglia invece di sembrare un riquadro estraneo. */
.chat-allegato--piu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: rgba(12, 12, 20, 0.55);
    color: #fff;
    font-family: var(--mood-font);
    cursor: pointer;
    transition: background var(--mood-transition);
}

.chat-allegato--piu:hover,
.chat-allegato--piu:focus-visible {
    background: rgba(12, 12, 20, 0.7);
}

.chat-allegato--piu svg {
    width: 20px;
    height: 20px;
    opacity: .85;
}

.chat-allegato--piu b {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
}

/* ================== IL TASTO UNICO DEL MESSAGGIO: «Scarica tutto (3)» (28/09/2026) ==================
   IL TITOLARE: «il messaggio ... con un unico clic con pulsante centrato nel messaggio della galleria».
   Sta sotto la griglia, CENTRATO nella bolla, e non a tutta larghezza: su un telefono un tasto largo
   quanto la bolla si legge come «invia», e non e' quello. E' una pillola discreta: il bordo dice che si
   puo' premere, il fondo resta quello della bolla finche' non ci si passa (o non si tocca). */
.chat-galleria__tutto {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px auto 2px;
    padding: 7px 12px;
    border: 1px solid #2196f3a6;
    border-radius: 999px;
    background: none;
    color: var(--mood-text);
    font-family: var(--mood-font);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background var(--mood-transition), border-color var(--mood-transition);
}

.chat-galleria__tutto:hover {
    background: var(--mood-bg-hover);
    border-color: var(--mood-primary);
}

.chat-galleria__tutto:disabled {
    opacity: .6;
    cursor: default;
}

.chat-galleria__tutto svg {
    width: 15px;
    height: 15px;
}

/* =============================== IL MENU DEL MESSAGGIO (25/09/2026) ===============================
   Tasto destro sul computer, mezzo secondo di pressione sul telefono. Si appoggia dove sta il dito, con le
   reazioni rapide in cima e le voci sotto; "Elimina" e' rossa. */
#chatMenuMsg {
    position: fixed;
    z-index: 1250;
    /* LARGHEZZA (25/09/2026). Il titolare: "width: max-content e' meglio giusto?". Si', ed e' servito: qui il */
    width: max-content;
    min-width: 232px;
    max-width: min(92vw, 340px);
    padding: 6px;
    border: 1px solid var(--mood-border);
    border-radius: 14px;
    background: var(--mood-bg-card);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}

#chatMenuMsg .chat-menu__emoji {
    display: flex;
    gap: 2px;
    padding: 2px 12px 2px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--mood-border);
    overflow-x: auto;
    flex-direction: row;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#chatMenuMsg .chat-menu__emoji-una {
    flex: 0 0 auto;
    /* era `flex: 1`: era lui a gonfiare il menu fino a 773px */
    width: 36px;
    padding: 4px 8px;
    border: 0;
    border-radius: 9px;
    background: none;
    font-size: 1.15rem;
    line-height: 1.1;
    cursor: pointer;
    transition: background var(--mood-transition), transform var(--mood-transition);
}

#chatMenuMsg .chat-menu__emoji-una:hover {
    background: var(--mood-bg-hover);
    transform: scale(1.2);
}

/* IL «+» DELLA FILA VELOCE DEL MENU (29/09/2026): e' la nona cella, e si vede che e' un'altra cosa - porta
   al pannello delle 1914 emoji, non reagisce da sola. */
#chatMenuMsg .chat-menu__emoji-una--piu {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--mood-text-muted);
}

#chatMenuMsg .chat-menu__voce {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 40px;
    padding: 9px 10px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--mood-text);
    font-size: 0.86rem;
    font-family: var(--mood-font);
    text-align: left;
    cursor: pointer;
    transition: background var(--mood-transition);
}

#chatMenuMsg .chat-menu__voce:hover {
    background: var(--mood-bg-hover);
}

#chatMenuMsg .chat-menu__voce svg {
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--mood-text-muted);
}

#chatMenuMsg .chat-menu__voce--pericolo,
#chatMenuMsg .chat-menu__voce--pericolo svg {
    color: var(--mood-danger);
}

/* SUL TELEFONO IL MENU E' UN FOGLIO DAL BASSO (25/09/2026). Il titolare: "la dropmenu deve essere in */
@media (max-width: 800px) {
    #chatMenuMsg.chat-menu--foglio {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0px;
        margin-bottom: 0;
        width: auto;
        min-width: 0;
        max-width: none;
        max-height: 70dvh;
        overflow-y: auto;
        padding: 0 14px calc(14px + env(safe-area-inset-bottom));
        border: 0;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.3);
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        animation: chat-foglio-su 0.18s ease-out;
    }

    /* LE NOVE CELLE DELLA FILA (29/09/2026). Erano sei e si spartivano la larghezza del foglio. Adesso sono
       otto piu' il «+»: si spartiscono la larghezza FINCHE' ci stanno, e quando non ci stanno vanno A CAPO
       invece di uscire dallo schermo (a 320px di larghezza, nove tasti da 36 non ci stanno). Qui la larghezza
       e' gia' fissata (`left: 0` e `right: 0`), quindi non la gonfiano: era `flex: 1` a fare il menu da
       773px, ma solo quando la larghezza era `max-content`. */
    #chatMenuMsg.chat-menu--foglio .chat-menu__emoji {
        justify-content: space-between;
        gap: 4px;
    }

    /* LA CROCE NON SUBISCE IL NOME IN PRESTITO (25/09/2026). `#chatMenuMsg` porta la classe `chat-menu` - e' */
    #chatMenuMsg.chat-menu--foglio .chat-foglio__chiudi {
        display: grid;
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
    }

    #chatMenuMsg .chat-menu__emoji-una {
        min-height: 35px;
    }

    #chatMenuMsg .chat-menu__voce {
        min-height: 48px;
        font-size: 0.95rem;
    }

    /* Il dito non deve selezionare l'emoji o il testo della voce mentre tiene premuto. */
    #chatMenuMsg .chat-menu__emoji-una,
    #chatMenuMsg .chat-menu__voce {
        -webkit-touch-callout: none;
    }
}

/* LA STRISCIA DELLA MODIFICA: dice cosa si sta cambiando, e lascia annullare. */
.chat-modifica {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    padding: 6px 10px;
    border-left: 3px solid var(--mood-primary);
    border-radius: 4px 10px 10px 4px;
    background: var(--mood-bg-hover);
    font-size: 0.78rem;
    color: var(--mood-text-muted);
}

.chat-modifica svg {
    width: 15px;
    height: 15px;
    color: var(--mood-primary);
}

.chat-modifica .chat-msg__azione {
    margin-left: auto;
}

/* ---------- IL VOCALE: LA STRISCIA MENTRE SI REGISTRA (26/09/2026) ---------- */
.chat-vocale {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    padding: 6px 10px;
    border-left: 3px solid var(--mood-danger);
    border-radius: 4px 10px 10px 4px;
    background: var(--mood-bg-hover);
    font-size: 0.78rem;
    color: var(--mood-text-muted);
}

.chat-vocale__punto {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    flex: none;
    background: var(--mood-danger);
    animation: chat-vocale-punto 1s infinite ease-in-out;
}

@keyframes chat-vocale-punto {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.35;
        transform: scale(0.8);
    }
}

@media (prefers-reduced-motion: reduce) {
    .chat-vocale__punto {
        animation: none;
    }
}

.chat-vocale__tempo {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--mood-text);
}

.chat-vocale__scritta {
    flex: 1;
}

.chat-vocale .chat-msg__azione {
    margin-left: auto;
    font-weight: 600;
    text-decoration: underline;
    color: var(--mood-primary);
}

/* IL TASTO CHE REGISTRA: rosso, come il punto della striscia. Il colore viene dai gettoni del sito, cosi' segue
   il tema chiaro e scuro (nessun colore scritto a mano: e' la regola di questo foglio). */
.chat-scrivi #chatInvia.is-rec {
    background: var(--mood-danger);
    border-color: var(--mood-danger);
}

/* ============ IL PANNELLO EMOJI E IL MENU ALLEGATI SUL TELEFONO: FOGLI DAL BASSO (25/09/2026) ============ */
/* LA TESTATA DEL FOGLIO NON C'ENTRA CON LA FINESTRELLA (30/09/2026). Il menu della conversazione e' un foglio
   dal basso sotto i 780px e la finestrella di sempre sopra: ma la regola generale che mostra le testate dei
   fogli vale sotto gli 800px, quindi fra 781 e 800px la finestrella del computer si troverebbe dentro una
   maniglia e una croce. Questa riga lo impedisce: porta l'`id`, quindi vince sulla regola generale qualunque
   sia l'ordine in cui stanno nel foglio. */
@media (min-width: 781px) {
    #chatMenu .chat-foglio__testa {
        display: none;
    }
}

.chat-velo {
    position: fixed;
    inset: 0;
    z-index: 1190;
    background: rgba(8, 8, 20, 0.5);
    /* Col dito sul velo la pagina sotto non si muove: il foglio e' una modale, non un pannello in mezzo. */
    touch-action: none;
    overscroll-behavior: contain;
}

/* La testata del foglio esiste solo sul telefono: sul computer i due riquadri restano quelli di sempre. */
.chat-foglio__testa {
    display: none;
}

body.chat-foglio-aperto {
    overflow: hidden;
}

/* MA IL FOGLIO DEVE STARE SOPRA IL VELO (25/09/2026). Misurato: `check_chat_mobile.py` non riusciva piu' a */
body.chat-foglio-aperto .chat-scrivi {
    z-index: 1191;
}

@media (max-width: 800px) {

    .chat-emoji,
    .chat-clip {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        z-index: 1200;
        margin: 0;
        min-width: 0;
        max-width: none;
        /* La larghezza scritta per il computer (`min(380px, 92vw)`) non serve qui: il foglio prende tutto
           il telefono, da sinistra a destra (27/09/2026). */
        width: auto;
        max-height: 62dvh;
        padding: 0 14px calc(14px + env(safe-area-inset-bottom));
        border: 0;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.3);
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        animation: chat-foglio-su 0.18s ease-out;
    }

    @keyframes chat-foglio-su {
        from {
            transform: translateY(16px);
            opacity: 0.5;
        }

        to {
            transform: none;
            opacity: 1;
        }
    }

    /* La testata: la maniglia (si capisce che si tira su dal basso), il titolo, la croce da 44px. */
    .chat-foglio__testa {
        position: sticky;
        top: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0 -14px 8px;
        padding: 16px 14px 10px;
        background: var(--mood-bg-card);
        border-bottom: 1px solid var(--mood-border);
    }

    .chat-foglio__maniglia {
        position: absolute;
        left: 50%;
        top: 7px;
        width: 42px;
        height: 4px;
        margin-left: -21px;
        border-radius: 999px;
        background: var(--mood-border);
    }

    .chat-foglio__titolo {
        flex: 1;
        margin: 0;
        font-size: 1rem;
        font-weight: 700;
        color: var(--mood-text);
    }

    .chat-foglio__chiudi {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        margin: -6px -8px -6px 0;
        border: 0;
        border-radius: 50%;
        background: none;
        color: var(--mood-text-muted);
        cursor: pointer;
    }

    .chat-foglio__chiudi:hover {
        background: var(--mood-bg-hover);
    }

    /* Le emoji: celle da dito (44px) e piu' grandi da vedere. */
    .chat-emoji__griglia {
        grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
        gap: 4px;
    }

    .chat-emoji__emoji {
        min-height: 44px;
        font-size: 1.6rem;
    }

    .chat-emoji__titolo {
        font-size: 0.78rem;
    }

    /* La ricerca sul telefono: le parole nel campo non finiscono sotto il pollice (27/09/2026). Il fondo
       e' opaco: sotto di lei passano le emoji mentre si scorre, e senza fondo si vedrebbero attraverso. */
    .chat-emoji__cerca {
        margin: 0 0 8px;
        background: var(--mood-bg-hover);
    }

    /* E IL CAMPO E' ALTO DA DITO — MISURATO SULL'INPUT, NON SULLA PILLOLA (27/09/2026). Il primo giro di
       questa regola metteva `min-height: 44px` sulla pillola: la pillola cresceva, l'`input` dentro restava
       35px, e i 9px che mancavano erano due strisce di pillola che NON prendevano il tocco (il campo si
       apriva solo centrandolo col dito). La prova l'ha misurato: «cerca alta 35 px» con la pillola a 44. */
    .chat-emoji__cerca .chat-cerca {
        min-height: 44px;
    }

    .chat-emoji__nota {
        font-size: 0.86rem;
    }

    /* Lo scorrimento a tocco sta sul corpo che scorre, non piu' sul pannello (27/09/2026). */
    .chat-emoji__corpo {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        /* L'ultima riga non deve finire sotto la barra di casa del telefono: il margine che prima stava
           sul pannello adesso sta qui, dove finisce lo scorrimento. */
        padding-bottom: 4px;
    }

    /* I due modi dell'allegato: righe alte 56px, con la spiegazione leggibile. */
    .chat-clip__voce {
        min-height: 56px;
        align-items: center;
        padding: 10px 12px;
    }

    .chat-clip__icona {
        align-items: center;
        padding-top: 0;
    }

    .chat-clip__icona svg {
        width: 22px;
        height: 22px;
    }

    .chat-clip__testo strong {
        font-size: 0.95rem;
    }

    .chat-clip__testo span {
        font-size: 0.82rem;
    }

    /* GLI ALLEGATI PRONTI SUL TELEFONO (25/09/2026): foglio dal basso come il pannello delle emoji - stessa
       maniglia, stessa testata, stessa altezza in `dvh` - e le schede dei file a tutta larghezza. Il tasto
       nella barra diventa da dito (44px), come gli altri. */
    #chatPezziModale {
        align-items: flex-end;
        padding: 0;
    }

    #chatPezziModale .chat-modale__box {
        width: 100%;
        max-width: none;
        max-height: 62dvh;
        overflow-y: auto;
        padding: 0 14px calc(14px + env(safe-area-inset-bottom));
        border: 0;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.3);
        animation: chat-foglio-su 0.18s ease-out;
    }

    /* Sul telefono il titolo lo dice la TESTATA del foglio: l'`h2` lo scriverebbe due volte. */
    #chatPezziModale h2 {
        display: none;
    }

    .chat-pezzi {
        max-height: 46dvh;
    }

    .chat-pezzi__azioni {
        flex-wrap: wrap;
    }
}

@media (max-width: 600px) {
    .chat-msg__testo--emoji-medio {
        font-size: 22px;
    }

    /* L'ALTEZZA DEL PANNELLO LA DECIDE IL FOGLIO (25/09/2026). Qui c'era `max-height: 40vh`, scritta quando
       il pannello era la finestrella appoggiata sopra il campo: sotto gli 800px vinceva lei e il foglio
       restava alto 338px invece di 523 (misurato). Tolta: sul telefono comanda `max-height: 62dvh`. */
}

@media (max-width: 600px) {
    .chat-msg__testo--emoji {
        font-size: 32px;
    }

    .chat-msg__reazione {
        padding: 3px 8px;
    }
}

.chat-busta__errore {
    display: block;
    margin-top: 4px;
    font-size: 0.7rem;
    color: var(--mood-danger);
}

/* ==================== LA CITAZIONE: STRISCIA SOPRA IL CAMPO, E PEZZO CITATO NELLA BOLLA (25/09/2026) ==== */
.chat-risposta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    padding: 6px 8px 6px 0;
    border-radius: 12px;
    background: var(--mood-bg-hover);
}

.chat-risposta__segno {
    flex: none;
    align-self: stretch;
    width: 3px;
    border-radius: 999px;
    background: var(--mood-primary);
}

.chat-risposta__dentro {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.chat-risposta__dentro strong {
    font-size: 0.76rem;
    color: var(--mood-primary);
}

.chat-risposta__dentro span {
    font-size: 0.78rem;
    color: var(--mood-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-risposta__via {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--mood-text-muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.chat-risposta__via:hover {
    color: var(--mood-danger);
}

/* Il pezzo citato dentro la bolla: barra a sinistra, chi l'ha scritto e che cosa. */
.chat-msg__cita {
    display: block;
    margin: 0 0 6px;
    padding: 5px 10px;
    border-left: 3px solid rgb(0 235 0 / 83%);
    border-radius: 3px 10px 10px 3px;
    background: var(--background-color-alf-1);
    cursor: pointer;
    max-width: 100%;
}

.chat-msg--mio .chat-msg__cita {
    background: rgb(3 169 244 / 52%);
}

.chat-msg__cita b {
    display: block;
    font-size: 0.72rem;
    color: var(--mood-primary);
}

.chat-msg--mio .chat-msg__cita b {
    color: var(--white);
}

.chat-msg__cita span {
    display: block;
    font-size: 0.78rem;
    color: var(--mood-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-msg--mio .chat-msg__cita span {
    color: rgba(255, 255, 255, 0.86);
}

/* Il messaggio citato, quando ci si arriva: un lampo per un attimo, per capire dove si e' finiti. */
.chat-msg--lampo {
    animation: chat-lampo 1.2s ease-out;
}

@keyframes chat-lampo {
    0% {
        box-shadow: 0 0 0 3px var(--mood-primary);
    }

    100% {
        box-shadow: var(--chat-ombra-bolla);
    }
}

/* Sul telefono la x della citazione e' da dito. */
@media (max-width: 800px) {
    .chat-risposta__via {
        width: 44px;
        height: 44px;
    }
}

/* ==================== LA SCHEDA DELLO STATO DI UN ALLEGATO (25/09/2026) ==================== */
.chat-allegato__stato {
    display: block;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(63, 81, 181, 0.26);
    background: color-mix(in srgb, var(--mood-primary) 26%, transparent);
    color: var(--mood-text);
    font-size: 0.76rem;
}

.chat-msg--mio .chat-allegato__stato {
    background: rgba(255, 255, 255, 0.18);
    color: var(--white);
}

/* ============ LA FRASE DELLA VOCE CHE STA ARRIVANDO (28/09/2026) ============
   IL TITOLARE: «scarica la voce che guardi (e la successiva, mentre guardi)». Quando si apre la galleria da
   una cella che non ha i byte (il «+17»), il palco dice cosa sta prendendo e quanto pesa: un riquadro vuoto
   direbbe che non c'e' niente da vedere, ed e' falso. */
.chat-visore__attesa {
    margin: 0;
    padding: 14px 18px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 0.9rem;
    text-align: center;
}

/* ============ IL VISORE DEGLI ALLEGATI E LE ANTEPRIME NELLA BOLLA (25/09/2026) ============
   Il titolare: "gli allegati devono essere scaricabili non che si apre in altre finestre che non si capisce e
   le immagini e video devono avere anteprima come facciamo in feed con i post.. tipo galleria slide". */
.chat-visore {
    position: fixed;
    inset: 0;
    z-index: 1700;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 8, 16, 0.94);
    /* IL DITO NON SCORRE LA PAGINA SOTTO: il visore si chiude, la conversazione resta dove stava. */
    touch-action: none;
    overscroll-behavior: contain;
}

.chat-visore.hidden {
    display: none;
}

/* Mentre il visore e' aperto la pagina sotto sta ferma (stessa regola dei fogli, `chat-foglio-aperto`). */
body.chat-visore-aperto {
    overflow: hidden;
}

.chat-visore__palco {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 64px 72px 92px;
}

.chat-visore__media {
    max-width: 100%;
    max-height: 100%;
    border-radius: var(--mood-radius);
    object-fit: contain;
    outline: none;
    background: rgba(0, 0, 0, 0.35);
}

/* Le frecce e la X: 48px di lato, col dito ci stanno dentro comodi (la lezione della striscia del 2FA). */
.chat-visore__freccia,
.chat-visore__chiudi {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.95);
    cursor: pointer;
    transition: background var(--mood-transition);
}

.chat-visore__freccia:hover,
.chat-visore__chiudi:hover {
    background: rgba(255, 255, 255, 0.26);
}

.chat-visore__freccia svg,
.chat-visore__chiudi svg {
    width: 26px;
    height: 26px;
}

#chatVisore .chat-visore__chiudi {
    top: 14px;
    right: 14px;
    transform: none;
}

.chat-visore__freccia {
    top: 50%;
    transform: translateY(-50%);
}

.chat-visore__freccia--prima {
    left: 12px;
}

.chat-visore__freccia--dopo {
    right: 12px;
}

/* Con un allegato solo le frecce non servono: si nascondono invece di dire "1 / 1" e non portare da nessuna
   parte. */
.chat-visore--uno .chat-visore__freccia {
    display: none;
}

.chat-visore__piede {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    background: rgba(0, 0, 0, 0.55);
    color: rgba(255, 255, 255, 0.92);
}

.chat-visore__conto {
    font-size: 0.85rem;
    opacity: 0.8;
    flex: none;
}

.chat-visore__nome {
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.chat-visore__scarica {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex: none;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.85rem;
    text-decoration: none;
    transition: background var(--mood-transition);
}

.chat-visore__scarica:hover {
    background: rgba(255, 255, 255, 0.3);
}

.chat-visore__scarica svg {
    width: 18px;
    height: 18px;
}

/* SUL TELEFONO IL VISORE E' TUTTO SCHERMO E LE FRECCE SI AVVICINANO AL BORDO (25/09/2026): le stesse
   misure da dito (44px), il nome del file sotto il contatore per non spingere fuori il tasto Scarica. */
@media (max-width: 620px) {
    .chat-visore__palco {
        padding: 58px 12px 104px;
    }

    .chat-visore__freccia {
        width: 44px;
        height: 44px;
        background: rgba(8, 8, 16, 0.55);
    }

    .chat-visore__freccia--prima {
        left: 6px;
    }

    .chat-visore__freccia--dopo {
        right: 6px;
    }

    .chat-visore__piede {
        flex-wrap: wrap;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    }

    .chat-visore__nome {
        flex: 1 1 100%;
        order: 2;
    }

    .chat-visore__scarica {
        min-height: 46px;
    }
}

/* ---------------------------- LE ANTEPRIME DENTRO LA BOLLA (25/09/2026) ---------------------------- */
.chat-allegato__video,
.chat-allegato__audio {
    display: block;
    max-width: min(320px, 62vw);
    border-radius: 14px;
    background: rgba(127, 127, 127, 0.12);
}

/* LA BOLLA PRENDE LA FORMA DEL FILM (26/09/2026). Il titolare, dal suo iPhone: «il css e' bruttissimo» su una
   bolla col video. Misurato su uno schermo da 390 px (`/tmp/prova_bolla_video.py`): il film verticale di un
   iPhone e' 1080x1920 (rapporto 0,563) e il riquadro lo forzava a 242x161 (3:2) — quindi il film veniva
   disegnato 91x161 dentro un riquadro largo, cioe' il 37,6% della larghezza, con banda grigia ai lati e i
   comandi nativi schiacciati sopra. Adesso il riquadro porta la forma del film (gliela scrive `chat.js`,
   appena la sa: dalla miniatura, che e' un fotogramma del film, e dai byte veri quando arrivano), il fondo e'
   nero - come in ogni lettore - e la forma qui sotto resta solo finche' quella vera non e' nota. */
.chat-allegato__video {
    max-height: min(360px, 62vh);
    aspect-ratio: 3 / 2;
    /* il segnaposto: ~20 KB di miniatura, poi si corregge da sola */
    object-fit: contain;
    /* il film non si deforma mai: semmai lascia banda */
    background: #000;
    max-width: 100%;
}

.chat-msg .chat-allegato__audio {
    width: min(280px, 60vw);
}

/* I DUE TASTINI SOPRA IL MEDIA (25/09/2026) — E SI VEDONO SOLO QUANDO SERVE (27/09/2026, regola del titolare).
   IL TITOLARE: «poi avevo aggiunto [queste righe] per evitare che ci fosse sempre il download che rompe i
   coglioni». Era una sua modifica, andata persa quando il foglio sul server e' stato riallineato stamattina:
   qui e' rimessa con il selettore che ha indicato lui - **`.chat-msg:hover`**, cioe' il passaggio del mouse
   sulla BOLLA, non sull'allegato (che e' piccolo e si manca) - e con `right: 8px` come l'aveva scritto.
   SI VEDONO AL PASSAGGIO DEL MOUSE, e basta: a riposo quei due tondi scuri coprivano la foto (o il fotogramma
   del video) e davano fastidio. `display: none` non toglie niente dal documento: i tasti restano li', e
   tornano appena il mouse entra nella bolla.
   TASTIERA: si aggiunge `:focus-within` (una riga sola), perche' con `display: none` un tasto nascosto e'
   anche irraggiungibile col Tab - chi naviga da tastiera non potrebbe piu' scaricare niente. Entrando col
   Tab nella bolla i tasti compaiono, ed e' lo stesso gesto del mouse. E' lo schema che questo foglio usa
   gia' per i tasti d'azione del messaggio (`.chat-msg__azioni` + `.chat-msg:focus-within`, chat.css:986-996):
   uno schema solo, usato due volte, invece di due invenzioni.
   DITO: su un telefono il mouse non c'e', e quei tasti non si vedono - di proposito. Non e' una porta chiusa:
   toccando la foto si apre il VISORE (`apriVisore`, chat.js), che ha "Scarica" col file intero e le frecce
   per scorrere. Su un vocale quel tasto non c'e' nemmeno (si disegna solo per i media: chat.js, `tastiAllegato`). */
.chat-allegato__tasti {
    position: absolute;
    top: 8px;
    right: 8px;
    display: none;
    gap: 6px;
}

.chat-msg:hover .chat-allegato__tasti,
.chat-msg:focus-within .chat-allegato__tasti {
    display: flex;
}

.chat-allegato__tasto {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(8, 8, 16, 0.62);
    color: rgba(255, 255, 255, 0.95);
    cursor: pointer;
    transition: background var(--mood-transition);
}

.chat-allegato__tasto:hover {
    background: rgba(8, 8, 16, 0.82);
}

.chat-allegato__tasto svg {
    width: 16px;
    height: 16px;
}

/* IL TASTO play SOPRA IL FOTOGRAMMA (25/09/2026). Un video SENZA i suoi byte non si puo' riprodurre, e la bolla -
   per non caricare l'interfaccia - mostra il fotogramma (la miniatura, ~20 KB) invece del film intero. In mezzo
   al fotogramma sta questo tasto, col PESO scritto sotto: si sa che cosa si sta per scaricare prima di farlo. */
.chat-allegato__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    width: 58px;
    height: 58px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(8, 8, 16, 0.62);
    color: rgba(255, 255, 255, 0.96);
    cursor: pointer;
    transition: background var(--mood-transition);
}

.chat-allegato__play:hover {
    background: rgba(8, 8, 16, 0.82);
}

.chat-allegato__play:disabled {
    cursor: default;
    opacity: 0.7;
}

.chat-allegato__play svg {
    width: 22px;
    height: 22px;
}

.chat-allegato__play-peso {
    font-size: 0.6rem;
    font-weight: 600;
    line-height: 1;
}

/* ---------------------------- IL VOCALE CON I SUOI COMANDI (26/09/2026) ----------------------------
   Il titolare: «l'audio non e' personalizzato» - e aveva incollato la bolla: dentro c'era il lettore del
   navigatore (`<audio controls>`), la barra grigia coi tre puntini, che non parla la lingua della bolla.
   Qui i comandi sono i nostri: play, barra, tempo. E il PESO sta scritto prima di ascoltare, come sul play
   dei video: si sa che cosa si sta per scaricare prima di farlo. Il colore e' `currentColor`, cosi' lo stesso
   blocco sta sulla bolla verde dei miei e su quella degli altri senza due regole diverse.
   (Il nome `chat-vocale` era gia' preso: e' la registrazione in corso, col puntino rosso e il cronometro. Per
   questo il lettore si chiama `chat-audio`.) */
.chat-audio {
    display: flex;
    align-items: center;
    gap: 8px;
    width: min(260px, 58vw);
    padding: 4px 10px 4px 6px;
    border-radius: 14px;
    background: rgb(193 193 193 / 29%);
    max-width: 100%;
}

.chat-audio__play {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: inherit;
    cursor: pointer;
}

/* IL CERCHIO E' `currentColor` CON L'OPACITA': sotto c'e' il testo, non un'altra tinta da tenere allineata. */
.chat-audio__play::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.18;
}

.chat-audio__play:hover::before {
    opacity: 0.28;
}

.chat-audio__play:disabled {
    cursor: default;
}

.chat-audio__play:disabled::before {
    opacity: 0.1;
}

.chat-audio__play svg {
    position: relative;
    width: 19px;
    height: 19px;
}

.chat-audio__corsa {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    /* sopra la tela: il pollice resta il comando (vedi `.chat-audio__campo`) */
    z-index: 1;
    display: block;
    width: 100%;
    flex: 1 1 auto;
    min-width: 60px;
    height: 24px;
    margin: 0;
    padding: 0;
    background: none;
    cursor: pointer;
}

.chat-audio__corsa:disabled {
    cursor: default;
}

/* LA PARTE GIA' SENTITA: `--quanto` lo scrive `chat.js` a ogni passo (0%..100%). Senza, la barra e' tutta
   vuota - che e' il modo giusto di dire «questo non l'hai ancora sentito». */
.chat-audio__corsa::-webkit-slider-runnable-track {
    height: 5px;
    border-radius: 3px;
    background: linear-gradient(to right,
            currentColor var(--quanto, 0%),
            rgba(127, 127, 127, 0.35) var(--quanto, 0%));
}

.chat-audio__corsa::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 13px;
    height: 13px;
    margin-top: -4px;
    border: 0;
    border-radius: 50%;
    background: currentColor;
}

.chat-audio__corsa::-moz-range-track {
    height: 5px;
    border-radius: 3px;
    background: rgba(127, 127, 127, 0.35);
}

.chat-audio__corsa::-moz-range-progress {
    height: 5px;
    border-radius: 3px;
    background: currentColor;
}

.chat-audio__corsa::-moz-range-thumb {
    width: 13px;
    height: 13px;
    border: 0;
    border-radius: 50%;
    background: currentColor;
}

/* ---------------------------- L'ONDA DEL VOCALE (27/09/2026) ----------------------------
   Il titolare: «ora anche nella chat aggiungi onda». La tela sta SOTTO la barra, nello stesso
   rettangolo: il lettore non cresce di un pixel e il pollice resta il comando che era (tastiera
   compresa - la barra e' l'unica cosa che si tocca, l'onda e' un disegno).
   L'onda la disegna `chat.js` (`disegnaOnda`) con i picchi calcolati dai byte GIA' sul dispositivo:
   per disegnarla non scende un byte. Finche' i byte non sono qui la classe `chat-audio--onda` non
   c'e', la tela resta vuota e la barra si comporta come prima (grigio + avanzamento). */
.chat-audio__campo {
    position: relative;
    flex: 1 1 auto;
    min-width: 60px;
    height: 24px;
}

.chat-audio__onda {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* i tocchi li prende la barra: l'onda non si tocca */
}

/* QUANDO L'ONDA C'E' LA BARRA NON DISEGNA PIU' L'AVANZAMENTO: lo dice l'onda (barre piene / barre
   chiare). Due avanzamenti sovrapposti, con due colori diversi, sarebbero un pasticcio. */
.chat-audio--onda .chat-audio__corsa::-webkit-slider-runnable-track {
    background: none;
}

.chat-audio--onda .chat-audio__corsa::-moz-range-track {
    background: none;
}

.chat-audio--onda .chat-audio__corsa::-moz-range-progress {
    background: none;
}

.chat-audio__tempo {
    flex: none;
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
}

/* IL MOTORE NON SI VEDE, MA RESTA DIPINTO (27/09/2026). I comandi sono i nostri, e il nodo `<audio>` sta
   nella bolla perche' e' lui che suona. NON con `display: none`, pero': un motore senza area dipinta e' un
   motore che non tutti i navigatori fanno suonare - e su iOS Safari e' il caso noto (l'elemento non ha
   motore, `play()` viene rifiutato). La prova che avevamo in casa lo dice gia': il commento di
   `mettiDentro` (chat.js:4483) racconta che un `<audio>` STACCATO suonava su Chrome e non altrove - e
   `display: none` e' la stessa cosa detta in un altro modo. Cosa e' MISURATO e cosa no, per non raccontare
   favole: misurato che con l'etichetta sbagliata (`application/octet-stream`) il vocale NON suona su WebKit
   (errore 4 del lettore, /tmp/prova-webkit-vocale.log) mentre su Chrome suona lo stesso; le posizioni, su
   Chrome e sul WebKit del Mac, suonano tutte (perfino quella staccata) - quindi il telefono vero e' l'unico
   giudice, e a questo serve `public/prova-vocale.html`. Qui si sceglie la posizione che la regola della
   piattaforma indica come sicura: area 1x1, opacita' quasi zero, nodo dipinto nel documento. */
.chat-audio__mezzo {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 1px;
    height: 1px;
    opacity: 0.01;
    pointer-events: none;
    overflow: hidden;
}

@media (max-width: 620px) {

    /* 44 px: la misura sotto la quale un tasto non si prende col dito (Apple, e vale anche per Google). */
    .chat-audio__play {
        width: 44px;
        height: 44px;
    }
}

/* ---------------------------- IL SEGNAPOSTO SFOCATO (26/09/2026) ----------------------------
   «mette in blur e dice di scaricare se non e' gia' in cache del device». Quando l'anteprima non c'e' e i byte
   non sono sul dispositivo, la bolla non si svuota e non scarica niente da sola: si vede un riquadro sfocato
   (un velo chiaro, sfocato davvero), il nome, il peso, e il tasto che scarica. Non e' un'immagine: nessun byte
   e' sceso per disegnarlo. */
.chat-allegato__attesa {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* LA MISURA E' QUELLA DELLE FOTO (26/09/2026): `min(320px, 62vw)` come `.chat-allegato__foto`, e mai piu'
       larga di chi lo contiene. Il nome non decide piu' quanto e' largo il riquadro: e' quello che, da solo in
       una bolla, lo portava a 264 px (misurato a 390 px) contro i 242 px di una foto. */
    width: min(320px, 62vw);
    max-width: 100%;
    aspect-ratio: auto;
    border-radius: 14px;
    overflow: hidden;
    background: #101018;
}

.chat-allegato__attesa-velo {
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle at 35% 30%,
            rgba(255, 255, 255, 0.42),
            rgba(255, 255, 255, 0.07) 45%,
            rgba(255, 255, 255, 0.02));
    filter: blur(18px);
}

.chat-allegato__attesa-dentro {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px 12px;
    color: rgba(255, 255, 255, 0.94);
    text-align: center;
    max-width: max-content;
}

.chat-allegato__attesa-dentro svg {
    width: 22px;
    height: 22px;
    opacity: 0.9;
}

.chat-allegato__attesa-dentro b {
    max-width: 100%;
    font-size: 0.58rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: break-spaces;
}

.chat-allegato__attesa-dentro>span {
    font-size: 0.57rem;
    opacity: 0.8;
}

.chat-allegato__attesa-giu {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
    min-height: 32px;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: inherit;
    font: inherit;
    font-size: 0.62rem;
    font-weight: 600;
    cursor: pointer;
}

.chat-allegato__attesa-giu:hover {
    background: rgba(255, 255, 255, 0.2);
}

.chat-allegato__attesa-giu:disabled {
    cursor: default;
    opacity: 0.6;
}

.chat-allegato__attesa-giu svg {
    width: 15px;
    height: 15px;
}

/* NELLA CELLA IL SEGNAPOSTO E' LA CELLA, E DICE SOLO IL NECESSARIO (26/09/2026) --------------------------
   IL TITOLARE, con un allegato per le mani: "questi devono essere dinamici ... e allinearsi alla griglia in
   modo automatico e non forzare", e dentro la cella basta "icona tipologia, il peso KB e icon centrata con il
   bottone, senza altre voci". Misurato prima (390 px, banco vero, /tmp/prova_attesa_larghezza.py): nella stessa
   fila due segnaposti venivano 131 e 157 px di altezza - la fila prende il piu' alto e sotto l'altro resta un
   buco -, e a decidere la misura era il nome, che in chat e' un nome come
   "7EAAD9E9-E6AB-406A-A4D1-57565317E430.jpeg".
   1. LA MISURA NON SI SCEGLIE QUI: la da' la cella. `width/height: 100%` e nient'altro - nessun `aspect-ratio`
      e nessun pixel. Se accanto c'e' una foto, il segnaposto prende la sua altezza e i bordi combaciano; se in
      una fila ci sono solo segnaposti, l'altezza e' quella del loro contenuto (icona, peso, tasto tondo), che
      per tutti e' lo stesso proprio perche' il nome non si disegna piu'.
   2. IL NOME NON ENTRA IN 119 px DI CELLA: resta nel DOM, e quindi nella lettura a voce dentro l'`aria-label`
      del tasto che scarica, ma non si vede. Restano l'icona della tipologia, il peso e la freccia che scarica.
   Il tasto tondo e' 44 px perche' sotto quella misura un dito non lo prende (la stessa regola del lettore dei
   vocali, poco piu' su). Fuori dalla cella, dove lo spazio c'e', la forma resta quella di prima: nome, peso e
   la parola "Scarica". */
.chat-allegato--thumb .chat-allegato__attesa {
    width: 100%;
    height: 100%;
    border-radius: 11px;
}

.chat-allegato--thumb .chat-allegato__attesa-dentro {
    max-width: 100%;
    gap: 6px;
    padding: 6px;
}

.chat-allegato--thumb .chat-allegato__attesa-dentro b {
    display: none;
}

.chat-allegato--thumb .chat-allegato__attesa-dentro>span {
    font-size: 0.62rem;
}

/* IL TASTO E' TONDO, E L'ICONA STA IN MEZZO A LUI: la parola "Scarica" sparisce perche' in 119 px non ci
   sta (la dice la bolla quando il file e' da solo), e il cerchio e' 44 px: la misura sotto la quale un tasto
   non si prende col dito. */
.chat-allegato--thumb .chat-allegato__attesa-giu {
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
}

.chat-allegato--thumb .chat-allegato__attesa-giu>span {
    display: none;
}

.chat-allegato--thumb .chat-allegato__attesa-giu svg {
    width: 20px;
    height: 20px;
}

/* La scheda del file: ora si capisce che si scarica (icona e parola), e resta un <a> con `download` - e' la
   strada che `check_allegato_privato.py` prova byte per byte (D3). */
.chat-allegato__giu {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    flex: none;
}

.chat-allegato__giu svg {
    width: 16px;
    height: 16px;
}

.chat-allegato__giu span {
    font-size: 0.7rem;
}

@media (max-width: 620px) {
    .chat-allegato__tasto {
        width: 40px;
        height: 40px;
    }

    .chat-allegato__tasto svg {
        width: 18px;
        height: 18px;
    }
}

/* ==================== L'ANIMAZIONE "float" DEL TITOLARE (25/09/2026) - IN FONDO, COM'ERA SUL SERVER ======== */
@keyframes float {

    0%,
    to {
        transform: translateY(0)rotate(0)
    }

    50% {
        transform: translateY(-1px)rotate(5deg)
    }
}

.wedding-events .float-animation {
    animation: 6s ease-in-out infinite float
}

/* ==================== IL TRASCINAMENTO DEI FILE (26/09/2026) ====================
   Il cartello che compare trascinando un file sopra la stanza. Sta DENTRO `.chat-stanza`, che e' l'unico
   `position: relative` di questa zona, e non prende i tocchi: e' un cartello, non un tasto. */
.chat-trascina {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: color-mix(in srgb, var(--mood-bg-card) 88%, transparent);
    border: 2px dashed var(--mood-primary);
    border-radius: var(--mood-radius);
    pointer-events: none;
    text-align: center;
}

.chat-trascina__dentro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    max-width: 34ch;
}

.chat-trascina__icona {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: 4px;
    border-radius: 50%;
    background: var(--mood-primary);
    color: var(--button-hover-text-color, #fff);
}

.chat-trascina__icona svg {
    width: 26px;
    height: 26px;
}

.chat-trascina strong {
    font-size: 1.05rem;
    color: var(--mood-text);
}

.chat-trascina__nota {
    font-size: 0.82rem;
    color: var(--mood-text-muted);
}

/* LA SCHEDA DI UNA FOTO O DI UN VIDEO (26/09/2026). IL TITOLARE: "si deve vedere mezza area compressa e mezza
   area in modo file". Anteprima GRANDE sopra (la foto compressa, o il fotogramma del video) e sotto la scheda
   del file: nome, peso, e i due modi delle stesse dimensioni. */
.chat-pezzo--media {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 8px;
    max-width: min(100%, 340px);
}

.chat-pezzo__grande {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 120px;
    max-height: 240px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--mood-bg-hover);
}

.chat-pezzo__grande img,
.chat-pezzo__grande video {
    display: block;
    width: 100%;
    max-height: 240px;
    object-fit: contain;
}

.chat-pezzo--media .chat-pezzo__foto {
    width: 100%;
    height: auto;
    max-height: 240px;
    border-radius: 0;
}

.chat-pezzo__segno {
    position: absolute;
    left: 8px;
    top: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(8, 8, 16, 0.62);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
}

.chat-pezzo--media .chat-pezzo__via {
    background: rgba(8, 8, 16, 0.62);
    color: #fff;
}

.chat-pezzo--media .chat-pezzo__via:hover {
    background: var(--mood-danger);
    color: #fff;
}

.chat-pezzo__nota {
    font-size: 0.72rem;
    color: var(--mood-text-muted);
}

.chat-pezzo__modi {
    display: flex;
    border: 1px solid var(--mood-border);
    border-radius: 10px;
    overflow: hidden;
}

.chat-pezzo__modo {
    flex: 1 1 50%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 7px 4px;
    border: 0;
    background: none;
    color: var(--mood-text-muted);
    font-family: var(--mood-font);
    font-size: 0.78rem;
    cursor: pointer;
}

.chat-pezzo__modo+.chat-pezzo__modo {
    border-left: 1px solid var(--mood-border);
}

.chat-pezzo__modo strong {
    font-size: 0.78rem;
    font-weight: 700;
}

.chat-pezzo__modo span {
    font-size: 0.68rem;
}

.chat-pezzo__modo.is-scelto {
    background: var(--mood-primary);
    color: var(--button-hover-text-color, #fff);
}

.chat-pezzo__modo.is-scelto span {
    color: inherit;
    opacity: 0.9;
}

@media (max-width: 800px) {

    .chat-allegato__giu{
        position: absolute;
        bottom: 6px;
        right: 14px;
    }
    .chat-allegato__giu span{
        display:none;
    }
    .chat-pezzo--media {
        max-width: 100%;
        padding: 8px;
    }

    .chat-pezzo__modo {
        min-height: 44px;
    }

    /* ==================== I BERSAGLI DEL DITO (26/09/2026) ====================
   MISURATO sulla stanza a 390px, col dito (`tools/checks/diag_telefono_pesantezza.py`): i tasti d'azione di un
   messaggio erano 23x15px, "torna all'elenco" e il menu' della stanza 32x32, il tasto di un allegato 40x40. Sono
   bersagli da dito mancati: si tocca, non succede niente, si tocca di nuovo. Da qui in giu' vale la misura di un
   dito, ma SOLO dove c'e' il dito o lo schermo e' stretto: sul computer i tasti restano come prima.

   I tasti dentro una bolla crescevano di AREA SENZA CRESCERE LA BOLLA, con un `margin` negativo della stessa
   misura: cosi' la riga dell'ora non si allungava (misurato: la bolla non cambiava altezza).
   DA OGGI NON SERVE PIU' (29/09/2026): i tasti d'azione NON stanno piu' dentro la bolla - stanno di fianco,
   fuori dal suo contorno (chat.css, «LA BOLLA PULITA»), quindi possono essere grandi quanto un dito senza
   toccare niente: il margine negativo che li teneva stretti se ne va con la ragione che l'aveva messo. */
    @media (hover: none),
    (max-width: 800px) {
        /* LA STRISCIA DEI TASTI, RISERVATA (29/09/2026). Sul telefono i tasti d'azione restano in VISTA (il
           mouse non c'e', quindi non c'e' nessun passaggio che li faccia comparire: `@media (hover: hover)`
           non vale qui). Se la bolla arrivasse a tutta la riga - e ci arrivava, `.chat-msg { max-width:
           max-content }` a 780px - i due tasti le finirebbero SOPRA. Qui la COLONNA riserva la striscia:
           30 + 2 + 30 = 62px di tasti, piu' i 6px di distacco = 68, arrotondati a 70. La bolla usa tutto il
           resto, e sul computer questa regola non esiste (li' lo spazio di fianco c'e' sempre, e i tasti si
           fanno vedere col mouse).
           MISURATO PRIMA DI SCRIVERLA (tools/checks/diag_bolla_pulita.py): con 70 e basta, sui messaggi
           RICEVUTI i tasti uscivano dalla stanza di 39px a 390px - perche' nella riga c'e' anche l'AVATAR
           (35 + 8 di distacco), e i 70px si sommavano a quei 43 invece di comprenderli. Percio' due misure:
           70 per i miei, 70 + 43 = 113 per i loro. */
        .chat-msg__corpo {
            max-width: calc(100% - 70px);
        }

        .chat-fila--loro .chat-msg__corpo {
            max-width: calc(100% - 113px);
        }

        .chat-msg__azioni {
            gap: 2px;
        }

        .chat-msg__azioni .chat-msg__azione {
            justify-content: center;
            min-width: 30px;
            min-height: 30px;
            padding: 0 6px;
            border-radius: 6px;
        }

        .chat-msg__azioni .chat-msg__azione svg {
            width: 18px;
            height: 18px;
        }

        /* Il tasto che torna all'elenco e quello del menu': sono in cima, dove un tasto grande non sposta niente. */
        .chat-testa__indietro,
        .chat-testa__menu {
            min-width: 44px;
            min-height: 44px;
            padding: 0;
        }

        /* IL NOME DI CHI SCRIVE, IN CIMA: era un indirizzo alto 24px. Cresce di AREA col margine negativo, cosi'
       la testa della stanza non diventa piu' alta (e il nome lungo si tronca come prima). */
        .chat-testa__chi b a {
            padding-block: 10px;
            margin-block: -10px;
        }

        /* I tasti del compositore: graffetta ed emoji, come il tasto che manda (che e' gia' 44). */
        .chat-scrivi__clip,
        .chat-scrivi__emoji {
            min-width: 44px;
            min-height: 44px;
        }

        /* Il tasto di un allegato (ingrandisci, scarica) e quello che riporta in fondo. */
        .chat-allegato__tasto {
            width: 44px;
            height: 44px;
        }

        .chat-giu {
            min-width: 44px;
            min-height: 44px;
        }

        /* LA STRISCIA DEL VOCALE CON DUE TASTI (26/09/2026): la frase che spiega perche' il microfono non e' partito
       e' lunga, e con due tasti accanto usciva dallo schermo. Adesso la frase va a capo e i tasti stanno sotto,
       grandi come un dito. */
        .chat-vocale {
            flex-wrap: wrap;
            row-gap: 4px;
        }

        .chat-vocale__scritta {
            flex: 1 1 120px;
            min-width: 0;
        }

        .chat-vocale .chat-msg__azione {
            min-height: 44px;
            margin-left: auto;
            padding: 0 6px;
        }
    }

    /* Sul telefono la barra sta piu' stretta: i pulsanti restano comodi per il pollice (44px di altezza, come le
   altre barre della chat) e il conto resta su UNA riga.
   SOTTO I 440px LA PAROLA SPARISCE E RESTA IL SIMBOLO (28/09/2026). E' la cura del difetto misurato qui sopra:
   con le due parole («Inoltra», «Elimina») i pulsanti prendevano 187px dei 320, e al conto ne restavano 49 -
   tre righe in una colonnina. E' anche quel che fanno le app di messaggi sul telefono: il simbolo si legge, e
   il nome resta (ai lettori di schermo lo dice `aria-label`, al dito il fumetto col `title`). Sopra i 440px,
   dove lo spazio c'e', la parola torna. */
    @media (max-width: 640px) {
        .chat-scelta {
            padding: 8px 10px;
            gap: 6px;
        }

        .chat-scelta__voce {
            min-height: 44px;
            padding: 0 12px;
            font-size: 0.82rem;
        }

        .chat-scelta__via {
            width: 44px;
            height: 44px;
        }

        .chat-scelta__conto {
            font-size: 0.8rem;
        }
    }

    @media (max-width: 440px) {
        .chat-scelta__voce {
            justify-content: center;
            width: 44px;
            padding: 0;
        }

        .chat-scelta__voce span {
            display: none;
            /* il simbolo resta, la parola la dice `aria-label` */
        }

        .chat-scelta__voce svg {
            width: 20px;
            height: 20px;
        }
    }

    /* IL TELEFONO PIU' STRETTO (iPhone SE e simili): ancora un po' di respiro in meno, cosi' il conto non si
   accorcia nemmeno qui. */
    @media (max-width: 360px) {
        .chat-scelta {
            padding: 6px 8px;
            gap: 5px;
        }

        .chat-scelta__conto {
            font-size: 0.76rem;
        }
    }

}


/* =================
   ho spostato qui il css perché così e' anche desktop e non solo mobile 

   LA SELEZIONE DI PIU' MESSAGGI (28/09/2026) - la barra in basso e la spunta sulle bolle.
   IL TITOLARE: «non vedo il seleziona e non posso selezionarne più di uno ... e non si apre in basso una
   nav che permette inoltro, o rimozione ... come si fa in telegram e whatsapp».
   Sta sopra la barra dove si scrive (in basso, dove arriva il pollice), e si accende solo scegliendo
   «Seleziona…» dal menu di un messaggio. La governa `entraInSelezione()` in `assets/js/chat.js`.
   ============ */

.chat-scelta {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    /* Il fondo pieno serve: sotto ci passa l'elenco dei messaggi (che ha il margine negativo del
       compositore, vedi `.chat-messaggi`), e senza fondo si leggerebbero le bolle attraverso. */
    background: var(--mood-bg-card);
    border-top: 1px solid var(--mood-border);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, .10);
    z-index: 101;
    /* sopra il compositore (100), che sta subito sotto */
}

.chat-scelta__via {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border: 1px solid var(--mood-border);
    border-radius: 50%;
    background: var(--mood-bg-hover);
    color: var(--mood-text);
    cursor: pointer;
}

.chat-scelta__via:hover {
    border-color: var(--mood-primary);
    color: var(--mood-primary);
}

.chat-scelta__conto {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--mood-text);
    /* IL CONTO STA SU UNA RIGA, SEMPRE (28/09/2026). MISURATO SUL SITO: con la barra larga 390px il conto
       aveva 119px e stava su una riga; a 320px ne aveva 49 - «1 messaggio scelto» si spezzava in TRE righe
       dentro una colonnina di 49px (una parola per riga, «messagg / scelto») e la barra cresceva da 61 a
       78px. Con i caratteri del sistema ingranditi succede anche a 390px. Qui il conto non si spezza mai:
       se lo spazio e' poco si accorcia la parola con i puntini, e le misure qui sotto (le due `@media`)
       fanno in modo che lo spazio non manchi. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-scelta__voce {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 8px 13px;
    border: 1px solid var(--mood-border);
    border-radius: 999px;
    background: var(--mood-bg-hover);
    color: var(--mood-text);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.chat-scelta__voce svg,
.chat-scelta__via svg {
    width: 18px;
    height: 18px;
}

.chat-scelta__voce:hover:not(:disabled) {
    border-color: var(--mood-primary);
    color: var(--mood-primary);
}

.chat-scelta__voce--pericolo {
    border-color: var(--mood-danger);
    color: var(--mood-danger);
    background: transparent;
}

.chat-scelta__voce--pericolo:hover:not(:disabled) {
    background: var(--mood-danger);
    color: var(--white);
}

/* Niente da premere finche' non c'e' niente scelto: si vede che e' spento, e non si preme a vuoto. */
.chat-scelta__voce:disabled {
    opacity: .45;
    cursor: default;
}

/* In selezione l'elenco si alza: la barra prende il posto che il margine negativo dava al compositore,
   cosi' l'ultimo messaggio non finisce sotto i pulsanti. */
.chat-stanza--scelta .chat-messaggi {
    margin-bottom: 0;
}

/* LA SPUNTA SUL MESSAGGIO SCELTO (28/09/2026). Un cerchio col segno di spunta sull'angolo della bolla,
   come le app di messaggi: si capisce al volo quali sono scelti, anche col pollice che copre la fila. */
.chat-msg--scelto {
    outline: 2px solid var(--mood-primary);
    outline-offset: 1px;
}

.chat-msg--scelto::after {
    content: '';
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--white);
    background-color: var(--mood-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
    box-shadow: var(--mood-shadow);
}

/* =====================================================================================
   IL LETTORE DEL MESSAGGIO (29/09/2026) — una pagina da leggere, non una bolla.

   IL TITOLARE: «sia in feed nei post che in chat avendo attivato markdown diventa complessa la
   responsive .. direi che cliccando si inizia ad aprire di default una opzione tipo leggi e
   schermo intero in modo read un lettore pulito che ne pensi?».

   PERCHE' UNA FINESTRA A PARTE E NON UNA BOLLA PIU' LARGA. Una bolla ha 241px utili a 390px di
   schermo, e il markdown che non ci sta dentro scorre in una finestrella che nessuno vede
   (misurato: 44px di tabella e 65px di codice restano fuori dal riquadro). Qui il testo e' lo stesso
   (`.mood-post-body.mood-lettore-corpo`, vedi `mood.css`: colonna di ~60-70 caratteri, riga 1.65),
   ma su una superficie che ci sta: TELEFONO = tutto lo schermo (e' il modo in cui si legge comodi, ed
   e' la stessa scelta del visore dei post), COMPUTER = una finestra larga 760px, che e' come si legge
   su uno schermo grande.

   IL TOCCO FUORI CHIUDE, DENTRO NO (`chat.js`, `legaFogli`): dentro si scorre, si seleziona e si
   seguono i collegamenti — chiudere a ogni tocco sarebbe insopportabile.
   ===================================================================================== */

.chat-lettore {
    padding: 0;                       /* la finestra prende lo schermo: il margine del modale non serve */
    align-items: stretch;
    justify-content: stretch;
}

.chat-lettore__box {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: var(--mood-bg);
    overflow: hidden;
}

.chat-lettore__testa {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--mood-border);
    background: var(--mood-bg-card);
    flex: 0 0 auto;
}

.chat-lettore__faccia {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 50%;
    overflow: hidden;
    display: block;
}

.chat-lettore__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.chat-lettore__chi {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.chat-lettore__chi b {
    color: var(--mood-text);
    font-weight: 800;
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-lettore__quando {
    color: var(--mood-text-muted);
    font-size: 0.72rem;
}

/* Un tasto da dito, non da mouse: 40px di lato per 40px di alto. */
.chat-lettore__chiudi {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--mood-bg-hover);
    color: var(--mood-text);
    cursor: pointer;
}

.chat-lettore__dentro {
    flex: 1 1 auto;
    min-height: 0;                    /* senza questo il figlio che scorre sfonda la finestra */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: clamp(14px, 4vw, 34px);
}

/* SUL COMPUTER: una finestra, non tutto lo schermo (stessa scelta del visore dei post, dove
   `.lb-compact` vale per il dito e la finestra centrata per il mouse). */
@media (min-width: 900px) {
    .chat-lettore {
        padding: 26px;
        align-items: center;
        justify-content: center;
    }
    .chat-lettore__box {
        height: auto;
        max-height: 90vh;
        max-width: 760px;
        border: 1px solid var(--mood-border);
        border-radius: var(--mood-radius);
        box-shadow: var(--mood-shadow);
    }
}

/* IL TASTO «APRI» SOTTO LA BOLLA (29/09/2026): e' la porta che si VEDE quando il messaggio non ci
   sta. Compare solo allora (lo decide `meritaIlLettore` in `chat.js`): sulle bolle corte non c'e',
   perche' non c'e' niente da aprire. Sta nella riga dell'ora, dove si guarda comunque. */
.chat-msg__apri {
    /* L'ICONA INSIEME ALLA SCRITTA (29/09/2026). IL TITOLARE, per le tabelle: «uno clicca su icona apri
       view». La porta era gia' questa (una riga sotto la bolla, accanto all'ora): qui prende il disegno
       «apri in grande» accanto alla parola, cosi' si vede che apre, e non che e' un collegamento. */
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 0;
    background: transparent;
    color: var(--mood-primary);
    font: inherit;
    font-weight: 700;
    padding: 0 2px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.chat-msg__apri svg { flex: 0 0 auto; }

.chat-msg__apri:hover,
.chat-msg__apri:focus-visible {
    filter: brightness(1.15);
}