/* PROD — Modulo Chat
 *
 * File dedicato, fuori dal manifest lossless del monolite: gli stili della
 * chat non toccano il sigillo dei sei file core (stesso criterio adottato per
 * css/progetti-module.css).
 *
 * Regole di questo file: namespace .chat-module, prefisso cht- su ogni classe,
 * zero !important, nessun layer di tema, colori solo dai token.
 *
 * Il prefisso non e' cosmetico: .chat-card e' anche il selettore che script.js
 * usa in aggiornaListaFiltrabili(), quindi una bolla con quella classe
 * finirebbe dentro la ricerca universale.
 */

.chat-module {
    --cht-gap: 12px;
    --cht-radius: 14px;
    --cht-bolla-mia: var(--accent);
    --cht-bolla-altrui: var(--panel-soft);

    display: grid;
    grid-template-columns: 320px 1fr;
    gap: var(--cht-gap);
    min-height: 0;
    color: var(--text-main);
}

/* L'ospite dei modali (#cht-overlay) e' un div vuoto figlio della griglia:
   contava come terzo elemento e si prendeva una seconda riga intera — su un
   1080, 313px sotto le due card, vuoti. Con display:contents non e' piu' una
   cella; quello che ci finisce dentro (velo del modale, lente sulle foto) e'
   position:fixed e non occupa spazio comunque. */
.chat-module > #cht-overlay {
    display: contents;
}

/* La chat prende tutta l'altezza utile del main, come il kanban dei quaderni:
   l'altezza arriva da .main-content, che su desktop ce l'ha gia' definita, e
   scende per la catena flex fino alle due colonne, che hanno gia' lo scroll
   dentro. Prima era `calc(100dvh - 190px)`, un numero scritto a mano che non
   coincideva con la pagina: su un 1080 restava un terzo di main vuoto sotto.
   Il pavimento a 560px sta in cima alla catena: su una finestra bassa cresce
   tutto e torna a scorrere la pagina, invece di schiacciare l'elenco a tre
   righe. Il :has() limita la catena alla chat: altrove il contenitore resta
   com'e'. Sotto i 769px vale il blocco in fondo al file, che ha il suo dvh. */
@media (min-width: 769px) {
    #contenitore-dati:has(> .chat-module) {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 560px;
    }

    .chat-module {
        flex: 1;
    }
}

/* ── Colonna sinistra: elenco conversazioni ─────────────────────────────── */

.chat-module .cht-lista {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 0;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: var(--cht-radius);
    overflow: hidden;
}

.chat-module .cht-lista-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--panel-border);
}

.chat-module .cht-cerca-wrap {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}

.chat-module .cht-cerca-wrap > i {
    position: absolute;
    left: 10px;
    font-size: 0.8rem;
    color: var(--text-tertiary);
    pointer-events: none;
}

.chat-module .cht-cerca {
    width: 100%;
    padding: 8px 10px 8px 30px;
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    background: var(--bg-base);
    color: var(--text-main);
    font-size: 0.88rem;
}

.chat-module .cht-cerca:focus {
    outline: none;
    border-color: var(--accent);
}

.chat-module .cht-lista-scroll {
    overflow-y: auto;
    min-height: 0;
    padding: 6px;
}

.chat-module .cht-riga {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}

.chat-module .cht-riga:hover { background: var(--surface-hover-soft); }
.chat-module .cht-riga.is-attiva { background: var(--accent-wash); }

.chat-module .cht-riga-corpo {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 3px;
}

.chat-module .cht-riga-titolo {
    display: flex;
    align-items: center;
    gap: 6px;
}

.chat-module .cht-riga-nome {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-module .cht-riga.ha-non-letti .cht-riga-nome { font-weight: 700; }

.chat-module .cht-riga-ora,
.chat-module .cht-riga-muta {
    font-size: 0.72rem;
    color: var(--text-tertiary);
    flex: none;
}

.chat-module .cht-riga-preview {
    display: flex;
    align-items: center;
    gap: 6px;
}

.chat-module .cht-riga-testo {
    flex: 1;
    min-width: 0;
    font-size: 0.82rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-module .cht-riga.ha-non-letti .cht-riga-testo { color: var(--text-secondary); }
.chat-module .cht-riga-vuota { font-style: italic; color: var(--text-tertiary); }

.chat-module .cht-riga-badge {
    flex: none;
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-contrast);
    font-size: 0.7rem;
    font-weight: 700;
    text-align: center;
}

/* ── Avatar ─────────────────────────────────────────────────────────────── */

.chat-module .cht-avatar {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: var(--accent-contrast);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.chat-module .cht-avatar-sm { width: 26px; height: 26px; font-size: 0.62rem; }
.chat-module .cht-avatar-gruppo { background: var(--panel-mid); color: var(--text-secondary); }
.chat-module .cht-avatar-spazio { flex: none; width: 26px; }

/* ── Colonna destra: thread ─────────────────────────────────────────────── */

.chat-module .cht-thread {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 0;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: var(--cht-radius);
    overflow: hidden;
}

.chat-module .cht-thread-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--panel-border);
}

.chat-module .cht-thread-titolo {
    flex: 1;
    min-width: 0;
    display: grid;
}

.chat-module .cht-thread-nome {
    font-weight: 700;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-module .cht-thread-sub {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-module .cht-indietro { display: none; }

.chat-module .cht-scroller {
    position: relative;
    overflow-y: auto;
    overflow-anchor: none;
    min-height: 0;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: var(--bg-base);
}

/* ── Separatori e messaggi di sistema ───────────────────────────────────── */

.chat-module .cht-giorno,
.chat-module .cht-sistema {
    align-self: center;
    margin: 10px 0 6px;
}

.chat-module .cht-giorno > span,
.chat-module .cht-sistema > span {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--panel-soft);
    color: var(--text-tertiary);
    font-size: 0.72rem;
}

/* ── Bolle ──────────────────────────────────────────────────────────────── */

.chat-module .cht-bolla-riga {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    max-width: 100%;
}

.chat-module .cht-bolla-riga.is-mia { flex-direction: row-reverse; }

.chat-module .cht-bolla {
    position: relative;
    max-width: min(68ch, 78%);
    padding: 7px 11px 5px;
    border-radius: var(--cht-radius);
    background: var(--cht-bolla-altrui);
    color: var(--text-main);
    font-size: 0.9rem;
    line-height: 1.42;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.chat-module .cht-bolla-riga.is-mia .cht-bolla {
    background: var(--cht-bolla-mia);
    color: var(--accent-contrast);
}

.chat-module .cht-bolla.is-in-invio { opacity: 0.62; }
.chat-module .cht-bolla.is-errore { border: 1px solid var(--error); }

.chat-module .cht-bolla-eliminata {
    background: transparent;
    border: 1px dashed var(--panel-border-mid);
    color: var(--text-tertiary);
    font-size: 0.83rem;
}

/* Il nome di chi scrive porta il colore che quella persona si e' scelta: e'
   come la si riconosce a colpo d'occhio in un gruppo. Ma quel colore e' pensato
   per un disco pieno, non per del testo su fondo chiaro, e usato cosi' com'e'
   scendeva a 2,4 di contrasto. Impastato col colore del testo l'identita'
   resta e la riga si legge, in tutti e due i temi. */
.chat-module .cht-bolla-autore {
    display: block;
    margin-bottom: 2px;
    font-size: 0.76rem;
    font-weight: 700;
    color: color-mix(in oklab, var(--cht-utente, var(--accent)) 62%, var(--text-main));
}

.chat-module .cht-bolla-testo { display: block; white-space: pre-wrap; }

.chat-module .cht-bolla-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    margin-top: 2px;
    font-size: 0.66rem;
    opacity: 0.72;
}

.chat-module .cht-modificato { font-style: italic; }
.chat-module .cht-stato-letto { color: var(--accent-strong); }
.chat-module .cht-bolla-riga.is-mia .cht-stato-letto { color: inherit; }

.chat-module .cht-bolla-azione {
    flex: none;
    padding: 4px 6px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-tertiary);
    font-size: 0.72rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.chat-module .cht-bolla-riga:hover .cht-bolla-azione { opacity: 1; }
.chat-module .cht-bolla-azione:hover { color: var(--text-strong); background: var(--surface-hover-soft); }

/* Rispondere e reagire sono gesti di tutti i giorni: restano visibili, anche
   se in sordina, perche' un comando a opacita' zero non lo scopre nessuno.
   Eliminare no — quello resta nascosto fino al passaggio del mouse, che e'
   il motivo per cui l'opacita' zero era stata scelta quando era l'unica
   azione della bolla. */
.chat-module .cht-bolla-azione.is-primaria { opacity: 0.45; }
.chat-module .cht-bolla-azione.is-primaria:hover { opacity: 1; }

/* ── Media nelle bolle ──────────────────────────────────────────────────── */

.chat-module .cht-media-wrap {
    display: grid;
    gap: 3px;
    margin-bottom: 4px;
}

.chat-module .cht-media-griglia { grid-template-columns: 1fr 1fr; }

.chat-module .cht-media {
    position: relative;
    display: block;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: var(--panel-mid);
    overflow: hidden;
    cursor: pointer;
    line-height: 0;
}

.chat-module .cht-media img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 320px;
    object-fit: cover;
}

.chat-module .cht-media-placeholder {
    display: block;
    width: 220px;
    aspect-ratio: 16 / 9;
    background: var(--panel-mid);
}

.chat-module .cht-media-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-contrast);
    font-size: 1.5rem;
    background: rgba(0, 0, 0, 0.28);
}

.chat-module .cht-media-durata {
    position: absolute;
    right: 6px;
    bottom: 6px;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.6);
    color: var(--accent-contrast);
    font-size: 0.68rem;
    line-height: 1.5;
}

.chat-module .cht-file {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--panel-mid);
    color: inherit;
    font-size: 0.84rem;
    text-decoration: none;
}

/* Il nome per intero va a capo invece di essere troncato: di un documento e'
   quasi sempre la coda a distinguerlo ("...rev-C.pdf"). */
.chat-module .cht-file-nome {
    flex: 1;
    overflow-wrap: anywhere;
}

.chat-module .cht-file-peso {
    flex-shrink: 0;
    opacity: 0.65;
    font-size: 0.76rem;
}

.chat-module .cht-attesa-nome {
    display: block;
    max-width: 76px;
    overflow: hidden;
    font-size: 0.66rem;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Citazione (risposta a un messaggio) ────────────────────────────────── */

.chat-module .cht-citazione {
    display: block;
    width: 100%;
    margin-bottom: 5px;
    padding: 5px 9px;
    border: 0;
    border-inline-start: 3px solid var(--cht-cit, var(--accent));
    border-radius: 6px;
    background: color-mix(in srgb, var(--text-strong) 8%, transparent);
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.chat-module .cht-citazione.is-persa {
    border-inline-start-color: var(--panel-border-mid);
    font-size: 0.78rem;
    font-style: italic;
    opacity: 0.75;
    cursor: default;
}

.chat-module .cht-citazione-autore {
    display: block;
    color: var(--cht-cit, var(--accent));
    font-size: 0.74rem;
    font-weight: 600;
}

.chat-module .cht-citazione-testo {
    display: block;
    overflow: hidden;
    font-size: 0.79rem;
    opacity: 0.85;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Il lampo dopo il salto: dice "eccolo" senza bisogno di una freccia. */
.chat-module .cht-bolla-riga.is-evidenziato .cht-bolla {
    animation: cht-evidenzia 1.6s ease-out;
}

@keyframes cht-evidenzia {
    0%, 40% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent); }
    100%    { box-shadow: 0 0 0 3px transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .chat-module .cht-bolla-riga.is-evidenziato .cht-bolla { animation: none; outline: 2px solid var(--accent); }
}

.chat-module .cht-risposta-barra {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-inline-start: 3px solid var(--cht-cit, var(--accent));
    border-radius: 8px;
    background: var(--panel-soft);
}

.chat-module .cht-risposta-testo {
    flex: 1;
    min-width: 0;
}

/* ── Reazioni ───────────────────────────────────────────────────────────── */

.chat-module .cht-reazioni {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 5px;
}

.chat-module .cht-reazione {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    background: var(--panel-bg);
    font-size: 0.8rem;
    line-height: 1.4;
    cursor: pointer;
}

.chat-module .cht-reazione.is-mia {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 18%, var(--panel-bg));
}

.chat-module .cht-reazione-n {
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 600;
}

/* Il pannellino delle emoji rapide, ancorato alla bolla. */
.chat-module .cht-reazioni-pop {
    position: absolute;
    z-index: 5;
    top: -38px;
    display: flex;
    gap: 2px;
    padding: 4px;
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    background: var(--panel-bg);
    box-shadow: 0 6px 20px rgb(0 0 0 / 22%);
}

.chat-module .cht-bolla-riga { position: relative; }

.chat-module .cht-reazione-scelta {
    padding: 3px 6px;
    border: 0;
    border-radius: 999px;
    background: none;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.12s ease;
}

.chat-module .cht-reazione-scelta:hover { transform: scale(1.25); }

/* ── Ricerca nel thread ─────────────────────────────────────────────────── */

.chat-module .cht-ricerca-barra .cht-cerca {
    flex: 1;
    min-width: 0;
}

.chat-module .cht-ricerca-conteggio {
    flex-shrink: 0;
    min-width: 34px;
    color: var(--text-secondary);
    font-size: 0.78rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ── Composer ───────────────────────────────────────────────────────────── */

.chat-module .cht-composer {
    padding: 10px 12px;
    border-top: 1px solid var(--panel-border);
    background: var(--panel-bg);
}

.chat-module .cht-composer-bloccato {
    text-align: center;
    color: var(--text-tertiary);
    font-size: 0.84rem;
}

.chat-module .cht-composer-riga {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.chat-module .cht-input {
    flex: 1;
    min-height: 40px;
    max-height: 160px;
    padding: 10px 12px;
    border: 1px solid var(--panel-border);
    border-radius: 20px;
    background: var(--bg-base);
    color: var(--text-main);
    font: inherit;
    font-size: 0.9rem;
    line-height: 1.4;
    resize: none;
}

.chat-module .cht-input:focus { outline: none; border-color: var(--accent); }

.chat-module .cht-invia {
    flex: none;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-contrast);
    cursor: pointer;
}

.chat-module .cht-invia:hover { background: var(--accent-strong); }

.chat-module .cht-attesa {
    display: flex;
    gap: 8px;
    padding-bottom: 8px;
    overflow-x: auto;
}

.chat-module .cht-attesa-item {
    position: relative;
    flex: none;
    width: 62px;
    height: 62px;
    border-radius: 8px;
    background: var(--panel-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    overflow: hidden;
}

.chat-module .cht-attesa-item.is-errore { border: 1px solid var(--error); }
.chat-module .cht-attesa-item img { width: 100%; height: 100%; object-fit: cover; }

.chat-module .cht-attesa-spinner {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
}

.chat-module .cht-attesa-x {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: var(--accent-contrast);
    font-size: 0.62rem;
    line-height: 1;
    cursor: pointer;
}

/* ── Pillola nuovi messaggi ─────────────────────────────────────────────── */

.chat-module .cht-pillola {
    position: sticky;
    bottom: 6px;
    align-self: center;
    margin-top: 6px;
    padding: 6px 14px;
    border: none;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-contrast);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

/* ── Stati vuoti e skeleton ─────────────────────────────────────────────── */

.chat-module .cht-vuoto {
    display: grid;
    place-items: center;
    gap: 10px;
    padding: 40px 20px;
    color: var(--text-tertiary);
    text-align: center;
}

.chat-module .cht-vuoto > i { font-size: 1.8rem; opacity: 0.55; }
.chat-module .cht-vuoto-thread { margin: auto; }

.chat-module .cht-skeleton { display: grid; gap: 10px; padding: 10px 0; }

.chat-module .cht-skel-bolla {
    width: 46%;
    height: 34px;
    border-radius: var(--cht-radius);
    background: var(--panel-soft);
    animation: cht-pulse 1.3s ease-in-out infinite;
}

.chat-module .cht-skel-bolla.is-mia { margin-left: auto; width: 34%; }

@keyframes cht-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.9; }
}

/* ── Bottoni generici ───────────────────────────────────────────────────── */

.chat-module .cht-icona-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s ease;
}

.chat-module .cht-icona-btn:hover { background: var(--surface-hover-soft); color: var(--text-strong); }
.chat-module .cht-icona-btn[disabled] { opacity: 0.4; cursor: not-allowed; }

.chat-module .cht-btn {
    padding: 8px 16px;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    background: var(--panel-soft);
    color: var(--text-main);
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
}

.chat-module .cht-btn:hover { background: var(--surface-hover-soft); }
.chat-module .cht-btn[disabled] { opacity: 0.45; cursor: not-allowed; }

.chat-module .cht-btn-primario {
    border-color: transparent;
    background: var(--accent);
    color: var(--accent-contrast);
}

.chat-module .cht-btn-primario:hover { background: var(--accent-strong); }

.chat-module .cht-btn-pericolo {
    border-color: transparent;
    background: transparent;
    color: var(--error);
}

/* ── Modali e lightbox ──────────────────────────────────────────────────── */

.chat-module .cht-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.5);
}

.chat-module .cht-modal {
    width: min(460px, 100%);
    max-height: 84dvh;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border-radius: var(--cht-radius);
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    overflow: hidden;
}

.chat-module .cht-modal-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chat-module .cht-modal-head h3 {
    flex: 1;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.chat-module .cht-utenti {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    display: grid;
    align-content: start;
    gap: 2px;
}

.chat-module .cht-utente {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    text-align: left;
    font-size: 0.88rem;
    cursor: pointer;
}

.chat-module .cht-utente:hover { background: var(--surface-hover-soft); }
.chat-module .cht-utente.is-scelto { background: var(--accent-wash); }
.chat-module .cht-utente-nome { flex: 1; min-width: 0; }

.chat-module .cht-tag {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--panel-soft);
    color: var(--text-tertiary);
    font-size: 0.68rem;
}

.chat-module .cht-modal-sezione { display: grid; gap: 6px; }
.chat-module .cht-modal-riga { display: flex; gap: 8px; }
.chat-module .cht-etichetta { font-size: 0.78rem; color: var(--text-tertiary); }

.chat-module .cht-campo {
    flex: 1;
    padding: 9px 12px;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    background: var(--bg-base);
    color: var(--text-main);
    font: inherit;
    font-size: 0.88rem;
}

.chat-module .cht-modal-piede {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.chat-module .cht-modal-conteggio { font-size: 0.78rem; color: var(--text-tertiary); }

.chat-module .cht-lightbox {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, 0.9);
}

.chat-module .cht-lightbox-corpo {
    max-width: 94vw;
    max-height: 84dvh;
    line-height: 0;
}

.chat-module .cht-lightbox-corpo img,
.chat-module .cht-lightbox-corpo video {
    max-width: 94vw;
    max-height: 84dvh;
    border-radius: 8px;
}

.chat-module .cht-lightbox-x {
    position: absolute;
    top: 14px;
    right: 14px;
    color: var(--accent-contrast);
}

.chat-module .cht-lightbox-dl {
    position: absolute;
    bottom: 20px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: var(--accent-contrast);
    font-size: 0.84rem;
    text-decoration: none;
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
/* La soglia coincide con quella di modules/core/viewport.js: sotto i 768px le
 * due colonne diventano uno stack e il thread va a schermo intero, come fa la
 * sezione Oggi con body.page-scrivania-oggi. Serve una classe distinta perche' la
 * lista conversazioni vuole la topbar e il thread no. */

@media (max-width: 768px) {
    .chat-module {
        grid-template-columns: 1fr;
        height: calc(100dvh - 150px);
    }

    .chat-module .cht-thread { display: none; }
    .chat-module .cht-indietro { display: inline-flex; }

    body.chat-thread-aperto .chat-module {
        position: fixed;
        inset: 0;
        z-index: 45;
        height: 100dvh;
        gap: 0;
    }

    body.chat-thread-aperto .chat-module .cht-lista { display: none; }

    body.chat-thread-aperto .chat-module .cht-thread {
        display: grid;
        border: none;
        border-radius: 0;
        height: 100dvh;
    }

    /* Il dock flottante si sovrapporrebbe al composer, e il padding-bottom
     * centralizzato di #contenitore-dati (mobile-atelier.css) creerebbe un
     * secondo scroll sotto la conversazione. */
    body.chat-thread-aperto .pr-dock,
    body.chat-thread-aperto .mobile-topbar { display: none; }

    body.chat-thread-aperto #contenitore-dati { padding: 0; }

    body.chat-thread-aperto .chat-module .cht-composer {
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    }

    body.chat-thread-aperto .chat-module .cht-thread-head {
        padding-top: calc(10px + env(safe-area-inset-top, 0px));
    }

    /* 16px e non 0.9rem: sotto i 16px iPhone ingrandisce la pagina appena il
     * campo prende il fuoco, e la conversazione si sposta sotto le dita. E'
     * la stessa ragione per cui gli altri campi del telefono stanno a 16. */
    .chat-module .cht-input {
        font-size: 16px;
    }

    .chat-module .cht-bolla { max-width: 84%; }
    .chat-module .cht-bolla-azione { opacity: 1; }
}