/* ---------------------------------------------------------------------------
   Interfaccia di conversazione.

   La chat non e' una pagina di contenuti: e' una postazione di lavoro. Il flusso
   dei messaggi scorre da solo, il campo della domanda resta sempre raggiungibile
   e nulla sposta il fuoco mentre si scrive. I colori sono quelli di Bootstrap
   Italia: qui si aggiunge la disposizione, non un tema nuovo.
   --------------------------------------------------------------------------- */

/* Tipografia della conversazione.

   Il corpo del sito e' impostato a 1.05rem, giusto per una pagina di contenuti
   istituzionali che si legge una volta. Una chat si legge per ore, e le interfacce
   di riferimento stanno tutte fra i 15 e i 16 pixel con interlinea larga: il testo
   piu' piccolo, ma respirato, si scorre meglio di uno grande e fitto.

   La misura di riga resta sotto i 70 caratteri: oltre, l'occhio perde il capo della
   riga successiva. E' la ragione per cui i giornali incolonnano. */
.chat-page {
    font-size: .82rem;

    --chat-primary: #0066cc;
    --chat-primary-scuro: #17324d;
    --chat-primary-tenue: #e6f0fa;
    --chat-linea: #dfe4ea;
    --chat-linea-tenue: #eef1f5;
    --chat-superficie: #fff;
    --chat-tela: #f7f9fc;
    --chat-testo-tenue: #5b6f82;
    --chat-verde: #00cc85;
    --chat-ambra: #e8a33d;
    --chat-raggio: 14px;
    --chat-cima: 210px; /* sovrascritto da chat.js con la posizione reale */
}

/* Il guscio occupa cio' che resta della finestra sotto l'intestazione: il flusso
   scorre dentro, non trascina la pagina. */
.chat-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 1.25rem;
    height: calc(100dvh - var(--chat-cima));
    min-height: 26rem;
}

.chat-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--chat-superficie);
    border: 1px solid var(--chat-linea);
    border-radius: var(--chat-raggio);
    overflow: hidden;
}

/* --- Intestazione della conversazione ------------------------------------ */

.chat-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem .9rem;
    border-bottom: 1px solid var(--chat-linea);
    background: var(--chat-superficie);
    flex: 0 0 auto;
}

.chat-topbar-id {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
}

.chat-topbar-titolo {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
    margin: 0;
    color: var(--chat-primary-scuro);
}

.chat-topbar-sottotitolo {
    margin: 0;
    font-size: .78rem;
    color: var(--chat-testo-tenue);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-topbar-id .min-w-0 { min-width: 0; }

.chat-topbar-azioni {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex: 0 0 auto;
}

.chat-topbar-azioni .btn {
    --bs-btn-padding-y: .25rem;
    --bs-btn-padding-x: .6rem;
    font-size: .8rem;
    white-space: nowrap;
}

/* Pallino di stato del servizio normativa: un colore vale una riga di testo. */
.chat-pallino {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    display: inline-block;
    background: var(--chat-verde);
    flex: 0 0 auto;
}

.chat-pallino.assente { background: var(--chat-ambra); }

.chat-pallino.avvio {
    background: #b1b1b3;
    animation: chat-pulsa 1.4s ease-in-out infinite;
}

/* --- Avvisi -------------------------------------------------------------- */

.chat-avvisi {
    flex: 0 0 auto;
    padding: .6rem .9rem 0;
}

.chat-avvisi .callout {
    margin: 0 0 .5rem;
    padding: .4rem .75rem;
    font-size: .82rem;
}

.chat-avvisi .callout .callout-inner {
    padding: 0;
    border: 0;
}

.chat-avvisi .callout p { margin: 0; }

/* --- Flusso dei messaggi ------------------------------------------------- */

.chat-thread {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-behavior: auto;
    padding: 1rem .9rem .5rem;
    background: var(--chat-tela);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.msg {
    display: flex;
    gap: .65rem;
    max-width: 100%;
    animation: chat-entra .18s ease-out;
}

.msg-utente { flex-direction: row-reverse; }

.msg-avatar {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .7rem;
    font-weight: 700;
    background: var(--chat-primary-tenue);
    color: var(--chat-primary);
}

.msg-utente .msg-avatar {
    background: var(--chat-primary);
    color: #fff;
}

.msg-avatar .icon {
    width: 1.1rem;
    height: 1.1rem;
    fill: currentColor;
}

.msg-corpo {
    min-width: 0;
    max-width: 40rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.msg-utente .msg-corpo {
    align-items: flex-end;
    max-width: 34rem;
}

.msg-meta {
    font-size: .72rem;
    color: var(--chat-testo-tenue);
    display: flex;
    gap: .4rem;
    align-items: baseline;
}

.msg-autore { font-weight: 600; }

.msg-bolla {
    background: var(--chat-superficie);
    border: 1px solid var(--chat-linea);
    border-radius: var(--chat-raggio);
    padding: .7rem .9rem;
    font-size: .85rem;
    line-height: 1.55;
    word-break: break-word;
}

/* La risposta dell'assistente non e' un messaggio in una bolla: e' il testo che
   si sta leggendo. Togliendole cornice e sfondo resta la colonna di lettura, e la
   bolla torna a significare qualcosa - la dice l'utente. */
.msg-assistente .msg-bolla {
    background: transparent;
    border: 0;
    padding: .1rem 0 0;
}

/* Bootstrap Italia fissa la misura direttamente sugli elementi di testo:
   `p, ul, ol, dl { font-size: 1rem }`, che sopra i 576px diventa 1.125rem, cioe'
   18px. Una regola sull'elemento batte sempre l'ereditarieta', quindi la misura
   scritta sulla bolla non arrivava mai ai paragrafi: si poteva rimpicciolire il
   contenitore quanto si voleva e il testo restava a 18px.
   Qui i discendenti tornano a ereditare, e la bolla governa davvero. */
.msg-bolla p,
.msg-bolla ul,
.msg-bolla ol,
.msg-bolla dl,
.messaggio-html p,
.messaggio-html ul,
.messaggio-html ol,
.messaggio-html li,
.messaggio-html dl,
.messaggio-html blockquote,
.messaggio-html table {
    font-size: inherit;
}

/* L'avviso in testa alla chat e' scritto nel serif del design system e cade sotto
   la stessa regola: senza questo resta 18px sopra una conversazione da 14. */
.chat-page .callout p {
    font-size: .85rem;
}

/* Spaziatura fra i blocchi di una risposta: paragrafi ed elenchi hanno bisogno di
   aria fra loro, i titoli di piu' aria sopra che sotto per legarsi al testo che
   introducono. */
.messaggio-html > * { margin-top: 0; }
.messaggio-html > * + * { margin-top: .75rem; }

.messaggio-html h1,
.messaggio-html h2,
.messaggio-html h3,
.messaggio-html h4,
.messaggio-html h5,
.messaggio-html h6 {
    margin-top: 1.35rem;
    margin-bottom: 0;
    font-weight: 700;
    line-height: 1.3;
}

.messaggio-html h1 { font-size: 1rem; }
.messaggio-html h2 { font-size: .95rem; }
.messaggio-html h3 { font-size: .9rem; }
.messaggio-html h4,
.messaggio-html h5,
.messaggio-html h6 { font-size: .85rem; }

.messaggio-html > :first-child { margin-top: 0; }
.messaggio-html > :last-child { margin-bottom: 0; }

.messaggio-html ul,
.messaggio-html ol { padding-left: 1.35rem; }

.messaggio-html li + li { margin-top: .3rem; }

.msg-utente .msg-bolla {
    background: var(--chat-primary);
    border-color: var(--chat-primary);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.msg-assistente .msg-bolla { border-bottom-left-radius: 4px; }

.msg-bolla .messaggio-testo { margin: 0; white-space: pre-wrap; }

/* Cursore di scrittura durante lo streaming: si vede che il testo sta arrivando. */
.msg-bolla.in-scrittura .messaggio-testo::after {
    content: "";
    display: inline-block;
    width: .45rem;
    height: 1rem;
    margin-left: .12rem;
    vertical-align: text-bottom;
    background: var(--chat-primary);
    animation: chat-cursore 1s steps(2, start) infinite;
}

/* --- Avanzamento delle consultazioni ------------------------------------- */

/* Un turno con consultazioni dura decine di secondi: l'elenco dei passaggi dice
   che cosa sta facendo il sistema, non solo che sta facendo qualcosa. */
.chat-passi {
    list-style: none;
    margin: 0 0 .5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    font-size: .82rem;
    color: var(--chat-testo-tenue);
}

.chat-passo {
    display: flex;
    align-items: center;
    gap: .45rem;
    animation: chat-entra .18s ease-out;
}

.chat-passo-segno {
    width: .95rem;
    height: .95rem;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 2px solid var(--chat-primary);
    border-right-color: transparent;
    animation: chat-gira .7s linear infinite;
}

.chat-passo.fatto .chat-passo-segno {
    border: 0;
    background: var(--chat-verde);
    animation: none;
    -webkit-mask: var(--segno-spunta);
    mask: var(--segno-spunta);
}

.chat-passi { --segno-spunta: url("/svg/spunta.svg") center/contain no-repeat; }

.chat-passo-tempo {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    font-size: .74rem;
    opacity: .8;
}

/* Attesa prima del primo frammento: tre punti, non uno spinner anonimo. */
.chat-punti {
    display: inline-flex;
    gap: .25rem;
    padding: .15rem 0;
}

.chat-punti span {
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background: var(--chat-primary);
    opacity: .35;
    animation: chat-punto 1.1s ease-in-out infinite;
}

.chat-punti span:nth-child(2) { animation-delay: .18s; }
.chat-punti span:nth-child(3) { animation-delay: .36s; }

/* --- Fonti, azioni, misure ----------------------------------------------- */

.msg-fonti {
    border: 1px solid var(--chat-linea);
    border-radius: 10px;
    background: var(--chat-superficie);
    padding: .35rem .6rem;
    font-size: .82rem;
}

.msg-fonti > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: .4rem;
    color: var(--chat-testo-tenue);
    font-weight: 600;
}

.msg-fonti > summary::-webkit-details-marker { display: none; }

.msg-fonti > summary::after {
    content: "";
    width: .5rem;
    height: .5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-left: .1rem;
    transition: transform .15s ease;
}

.msg-fonti[open] > summary::after { transform: rotate(-135deg); }

.msg-fonti .chip { margin: .35rem .35rem 0 0; }

.msg-azioni {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
    opacity: 0;
    transition: opacity .15s ease;
}

.msg:hover .msg-azioni,
.msg:focus-within .msg-azioni,
.msg-azioni.sempre { opacity: 1; }

.chat-azione {
    border: 1px solid transparent;
    background: transparent;
    color: var(--chat-testo-tenue);
    font-size: .75rem;
    border-radius: 8px;
    padding: .15rem .45rem;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    cursor: pointer;
}

.chat-azione:hover {
    background: var(--chat-primary-tenue);
    color: var(--chat-primary);
    border-color: var(--chat-linea);
}

.chat-azione .icon {
    width: .85rem;
    height: .85rem;
    fill: currentColor;
}

.chat-misure {
    font-size: .75rem;
    color: var(--chat-testo-tenue);
}

.chat-misure > summary {
    cursor: pointer;
    list-style: none;
    padding: .15rem .45rem;
    border-radius: 8px;
}

.chat-misure > summary::-webkit-details-marker { display: none; }

.chat-misure > summary:hover {
    background: var(--chat-primary-tenue);
    color: var(--chat-primary);
}

.chat-misure-griglia {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-top: .35rem;
}

.chat-misura {
    background: var(--chat-linea-tenue);
    border-radius: 6px;
    padding: .15rem .45rem;
    font-variant-numeric: tabular-nums;
}

.chat-misura b { font-weight: 700; color: var(--chat-primary-scuro); }

/* --- Stato vuoto --------------------------------------------------------- */

.chat-vuoto {
    margin: auto 0;
    padding: 1rem .25rem 2rem;
    text-align: center;
}

.chat-vuoto h2 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--chat-primary-scuro);
    margin-bottom: .35rem;
}

.chat-vuoto p {
    color: var(--chat-testo-tenue);
    font-size: .88rem;
    margin-bottom: 1rem;
}

.chat-esempi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: .6rem;
    max-width: 46rem;
    margin: 0 auto;
}

.chat-esempio {
    text-align: left;
    background: var(--chat-superficie);
    border: 1px solid var(--chat-linea);
    border-radius: 12px;
    padding: .65rem .8rem;
    font-size: .85rem;
    line-height: 1.4;
    color: var(--chat-primary-scuro);
    cursor: pointer;
    transition: border-color .15s ease, transform .15s ease;
}

.chat-esempio:hover {
    border-color: var(--chat-primary);
    transform: translateY(-1px);
}

.chat-esempio-tag {
    display: block;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--chat-primary);
    font-weight: 700;
    margin-bottom: .15rem;
}

/* --- Composizione -------------------------------------------------------- */

.chat-composer {
    flex: 0 0 auto;
    position: relative;
    border-top: 1px solid var(--chat-linea);
    background: var(--chat-superficie);
    padding: .6rem .9rem .5rem;
}

/* Pillola "torna in fondo": compare solo quando si e' risaliti a leggere. */
.chat-giu {
    position: absolute;
    top: -2.75rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    border: 1px solid var(--chat-linea);
    background: var(--chat-superficie);
    color: var(--chat-primary);
    border-radius: 999px;
    padding: .25rem .75rem;
    font-size: .78rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(23, 50, 77, .16);
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    cursor: pointer;
}

.chat-giu .icon { width: .85rem; height: .85rem; fill: currentColor; }

.chat-rapidi {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
    margin-bottom: .45rem;
}

.chat-rapido {
    border: 1px solid var(--chat-linea);
    background: var(--chat-superficie);
    color: var(--chat-testo-tenue);
    border-radius: 999px;
    padding: .15rem .6rem;
    font-size: .75rem;
    cursor: pointer;
}

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

.chat-box {
    border: 1px solid var(--chat-linea);
    border-radius: var(--chat-raggio);
    background: var(--chat-superficie);
    padding: .45rem .5rem .35rem .75rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.chat-box:focus-within {
    border-color: var(--chat-primary);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, .12);
}

/* Bootstrap Italia disegna gli input come riga sottolineata con etichetta
   flottante: dentro il composer serve un'area di testo neutra che cresce. */
.chat-box textarea.chat-testo {
    width: 100%;
    border: 0;
    outline: 0;
    resize: none;
    background: transparent;
    padding: .15rem 0;
    font-size: .85rem;
    line-height: 1.5;
    color: var(--chat-primary-scuro);
    max-height: 40vh;
    overflow-y: auto;
}

.chat-box textarea.chat-testo::placeholder { color: #9aa5b1; }

.chat-strumenti {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .2rem;
}

.chat-indizio {
    font-size: .72rem;
    color: var(--chat-testo-tenue);
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
}

.chat-indizio kbd {
    background: var(--chat-linea-tenue);
    border: 1px solid var(--chat-linea);
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: 0 .25rem;
    font-size: .7rem;
    color: var(--chat-primary-scuro);
}

.chat-contatore {
    font-size: .72rem;
    color: var(--chat-testo-tenue);
    font-variant-numeric: tabular-nums;
}

.chat-invia {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: 0;
    background: var(--chat-primary);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .15s ease, transform .1s ease;
}

.chat-invia:hover:not(:disabled) { background: #0059b3; }
.chat-invia:active:not(:disabled) { transform: scale(.94); }

.chat-invia:disabled {
    background: #c5cdd6;
    cursor: not-allowed;
}

.chat-invia .icon { width: 1.05rem; height: 1.05rem; fill: currentColor; }

/* In generazione il tasto diventa "ferma": un turno lungo si deve poter chiudere. */
.chat-invia.ferma {
    background: var(--chat-primary-scuro);
    cursor: pointer;
}

.chat-invia .quadrato {
    width: .7rem;
    height: .7rem;
    border-radius: 2px;
    background: currentColor;
}

/* --- Colonna delle fonti ------------------------------------------------- */

.chat-side {
    min-height: 0;
    overflow-y: auto;
    border: 1px solid var(--chat-linea);
    border-radius: var(--chat-raggio);
    background: var(--chat-superficie);
    padding: .9rem;
}

.chat-side h2 {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--chat-testo-tenue);
    margin-bottom: .65rem;
}

.chat-fonte {
    display: flex;
    gap: .5rem;
    padding: .5rem 0;
    border-top: 1px solid var(--chat-linea-tenue);
    font-size: .82rem;
}

.chat-fonte:first-of-type { border-top: 0; }

/* Il badge di stato e' alto quanto la sua riga: non deve stirarsi sulla nota. */
.chat-fonte > .badge {
    align-self: flex-start;
    margin-top: .1rem;
    flex: 0 0 auto;
}

.chat-fonte-testo { min-width: 0; }

.chat-fonte-nome {
    font-weight: 600;
    color: var(--chat-primary-scuro);
    display: block;
}

.chat-fonte-nota { color: var(--chat-testo-tenue); font-size: .76rem; }

/* --- Errori -------------------------------------------------------------- */

.chat-errore {
    border: 1px solid #f5c6cb;
    border-left: 4px solid #d9364f;
    background: #fff5f6;
    border-radius: 10px;
    padding: .6rem .8rem;
    font-size: .85rem;
    color: #7a1220;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

/* --- Adattamento a schermi stretti --------------------------------------- */

@media (max-width: 991.98px) {
    .chat-shell { grid-template-columns: minmax(0, 1fr); }

    .chat-side { display: none; }

    .chat-side.aperto {
        display: block;
        position: fixed;
        inset: auto 0 0 0;
        max-height: 70dvh;
        z-index: 20;
        border-radius: var(--chat-raggio) var(--chat-raggio) 0 0;
        box-shadow: 0 -6px 24px rgba(23, 50, 77, .2);
    }

    .msg-corpo,
    .msg-utente .msg-corpo { max-width: 100%; }

    .chat-topbar-sottotitolo { display: none; }
    .msg-azioni { opacity: 1; }
}

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

@keyframes chat-gira { to { transform: rotate(360deg); } }

@keyframes chat-punto {
    0%, 100% { opacity: .3; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-2px); }
}

@keyframes chat-cursore {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* -------------------------------------------------------------------------
   Documento generato: il blocco che il modello ha marcato come deliverable.
   Il bordo non e' decorazione, e' il confine di cio' che finisce nel file
   scaricato: fuori dalla scheda resta conversazione.
   ------------------------------------------------------------------------- */

.documento-generato {
    margin: .9rem 0;
    border: 1px solid var(--chat-linea);
    border-radius: var(--chat-raggio);
    background: var(--chat-superficie);
    overflow: hidden;
}

.documento-testata {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .5rem .75rem;
    background: var(--chat-tela);
    border-bottom: 1px solid var(--chat-linea);
}

.documento-titolo {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--chat-primary-scuro);
}

.documento-titolo .icon {
    width: .95rem;
    height: .95rem;
    fill: var(--chat-primary);
}

.documento-azioni {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.documento-azioni .chat-azione {
    border-color: var(--chat-linea);
    background: var(--chat-superficie);
}

/* Durante lo streaming il messaggio non e' ancora salvato: i bottoni restano
   visibili ma spenti, cosi' si vede che arriveranno invece di comparire dal
   nulla a risposta conclusa. */
.documento-azioni .chat-azione:disabled {
    opacity: .45;
    cursor: default;
    background: transparent;
}

.documento-azioni .chat-azione:disabled:hover {
    background: transparent;
    color: var(--chat-testo-tenue);
    border-color: var(--chat-linea);
}

.documento-corpo {
    padding: .75rem 1rem;
}

.documento-corpo > :first-child { margin-top: 0; }
.documento-corpo > :last-child { margin-bottom: 0; }

@media (max-width: 576px) {
    .documento-testata { align-items: flex-start; }
    .documento-azioni { width: 100%; }
}

/* Riquadro di invio mail: compare sotto la bozza, non sopra la conversazione.
   Nel PoC non spedisce: raccoglie cio' che manca e poi lo dichiara. */

.documento-invio {
    border-top: 1px solid var(--chat-linea);
    background: var(--chat-tela);
    padding: .7rem 1rem .8rem;
}

.documento-invio-intro {
    margin: 0 0 .5rem;
    font-size: .8rem;
    color: var(--chat-testo-tenue);
}

.documento-invio-campo {
    display: block;
    margin-bottom: .5rem;
}

.documento-invio-campo > span {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    color: var(--chat-testo-tenue);
    margin-bottom: .15rem;
}

.documento-invio-campo > input {
    width: 100%;
    max-width: 32rem;
    font-size: .85rem;
    padding: .35rem .5rem;
    border: 1px solid var(--chat-linea);
    border-radius: 8px;
    background: var(--chat-superficie);
}

.documento-invio-campo > input:focus {
    outline: 2px solid var(--chat-primary);
    outline-offset: 1px;
    border-color: var(--chat-primary);
}

.documento-invio-barra {
    display: flex;
    gap: .35rem;
    margin-top: .5rem;
}

.documento-invio-barra .chat-azione {
    border-color: var(--chat-linea);
    background: var(--chat-superficie);
}

.documento-invio-avviso {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    margin: 0 0 .5rem;
    font-size: .82rem;
    color: var(--chat-primary-scuro);
}

.documento-invio-avviso .icon {
    width: 1rem;
    height: 1rem;
    flex: none;
    margin-top: .1rem;
    fill: var(--chat-ambra);
}

/* Riepilogo di cio' che sarebbe partito: due colonne, etichetta e valore. */
.documento-invio-riepilogo {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .15rem .6rem;
    margin: 0;
    font-size: .8rem;
}

.documento-invio-riepilogo dt {
    font-weight: 600;
    color: var(--chat-testo-tenue);
}

.documento-invio-riepilogo dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* Intestazioni di una mail: metadati, non prosa. Stanno sopra il testo e non
   dentro, cosi' un elenco di cinquanta indirizzi non seppellisce la lettera. */

.documento-intestazioni {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .1rem .6rem;
    margin: 0 0 .7rem;
    padding-bottom: .6rem;
    border-bottom: 1px dashed var(--chat-linea);
    font-size: .82rem;
}

.documento-intestazioni dt {
    font-weight: 600;
    color: var(--chat-testo-tenue);
}

.documento-intestazioni dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.documento-intestazioni summary {
    cursor: pointer;
    color: var(--chat-primary);
}

.documento-intestazioni details[open] summary {
    margin-bottom: .2rem;
}

.documento-invio-campo > textarea {
    width: 100%;
    max-width: 32rem;
    font-family: inherit;
    font-size: .85rem;
    line-height: 1.4;
    padding: .35rem .5rem;
    border: 1px solid var(--chat-linea);
    border-radius: 8px;
    background: var(--chat-superficie);
    resize: vertical;
}

.documento-invio-campo > textarea:focus {
    outline: 2px solid var(--chat-primary);
    outline-offset: 1px;
    border-color: var(--chat-primary);
}

/* Il bottone che spedisce davvero si distingue dagli altri: da li' in poi non si
   torna indietro. */
.documento-invio-barra .chat-azione.conferma {
    background: var(--chat-primary);
    border-color: var(--chat-primary);
    color: #fff;
    font-weight: 600;
}

.documento-invio-barra .chat-azione.conferma:hover {
    background: var(--chat-primary-scuro);
    border-color: var(--chat-primary-scuro);
    color: #fff;
}

.documento-invio-barra .chat-azione.conferma .icon { fill: #fff; }

.documento-invio-barra .chat-azione.conferma:disabled {
    opacity: .6;
    cursor: default;
}

.documento-invio-avviso.inviata .icon { fill: var(--chat-verde); }

/* Documento troncato: la risposta si e' interrotta e cio' che si vede finisce a
   meta'. L'avviso sta sopra il testo, non sotto, perche' serve prima di leggerlo. */
.documento-troncato {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    margin: 0;
    padding: .55rem 1rem;
    background: #fdf6e8;
    border-bottom: 1px solid var(--chat-linea);
    font-size: .82rem;
    color: #6b4d0f;
}

.documento-troncato .icon {
    width: 1rem;
    height: 1rem;
    flex: none;
    margin-top: .1rem;
    fill: var(--chat-ambra);
}

/* -------------------------------------------------------------------------
   Editor del documento: finestra a tutto schermo, testo grezzo.
   Si scrive il Markdown perche' e' quello il documento: nessuna resa
   intermedia fra cio' che si legge qui e cio' che parte.
   ------------------------------------------------------------------------- */

dialog.editor-documento {
    position: fixed;
    inset: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    background: var(--chat-superficie);
    color: #1b1c1d;
}

.editor-documento::backdrop {
    background: rgba(23, 50, 77, .55);
}

.editor-guscio {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--chat-superficie);
}

.editor-testata,
.editor-piede {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .6rem 1rem;
    background: var(--chat-tela);
}

.editor-testata { border-bottom: 1px solid var(--chat-linea); }
.editor-piede { border-top: 1px solid var(--chat-linea); flex-wrap: wrap; }

.editor-titolo {
    flex: 1;
    font-weight: 600;
    color: var(--chat-primary-scuro);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.editor-testata .chat-azione,
.editor-piede .chat-azione {
    border-color: var(--chat-linea);
    background: var(--chat-superficie);
}

/* Il testo occupa tutto lo spazio che resta: e' l'oggetto della pagina. */
.editor-testo {
    flex: 1;
    width: 100%;
    border: 0;
    outline: 0;
    resize: none;
    padding: 1.2rem clamp(1rem, 6vw, 5rem);
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: .9rem;
    line-height: 1.7;
    color: #1b1c1d;
    background: var(--chat-superficie);
    tab-size: 2;
}

/* Lo stato sta in mezzo e spinge le azioni a destra: "Modifiche non salvate"
   deve stare accanto al bottone che salva, non nascosto in un angolo. */
.editor-stato {
    flex: 1;
    font-size: .78rem;
    color: var(--chat-testo-tenue);
}

.editor-azioni {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.documento-modificato {
    font-style: normal;
    font-weight: 500;
    font-size: .7rem;
    padding: .05rem .35rem;
    margin-left: .3rem;
    border-radius: 6px;
    background: var(--chat-primary-tenue);
    color: var(--chat-primary);
}

@media (max-width: 576px) {
    .editor-testo { padding: 1rem; }
    .editor-stato { flex-basis: 100%; order: 3; }
}

/* -------------------------------------------------------------------------
   Vista essenziale.

   Stessa pagina, meno cornice: l'intestazione istituzionale e il piede
   spariscono e resta la conversazione, centrata, come in un assistente
   qualunque. Non e' una pagina diversa - sarebbe una seconda interfaccia da
   mantenere - ma la stessa con la cornice tolta.

   Chi lavora tutto il giorno in chat non ha bisogno del menu dell'ente sopra
   ogni risposta; chi ci entra due volte al mese si', ed e' per questo che si
   sceglie invece di decidere per tutti.
   ------------------------------------------------------------------------- */

html[data-vista="essenziale"] .it-header-wrapper,
html[data-vista="essenziale"] .it-footer {
    display: none;
}

html[data-vista="essenziale"] main.chat-page {
    padding: 0 !important;
}

html[data-vista="essenziale"] main.chat-page > .container {
    max-width: none;
    padding-inline: 0;
}

/* Una colonna sola, larga quanto una lettura comoda. */
html[data-vista="essenziale"] .chat-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

html[data-vista="essenziale"] .chat-col {
    width: 100%;
    max-width: 56rem;
    margin: 0 auto;
    border: 0;
    border-radius: 0;
}

/* Le fonti restano raggiungibili, ma a chiamata: diventano il pannello che
   sullo schermo stretto esiste gia', invece di una colonna sempre aperta. */
html[data-vista="essenziale"] .chat-side {
    display: none;
}

html[data-vista="essenziale"] .chat-side.aperto {
    display: block;
    position: fixed;
    inset: auto 0 0 0;
    max-width: 32rem;
    margin: 0 auto;
    max-height: 70dvh;
    z-index: 20;
    border-radius: var(--chat-raggio) var(--chat-raggio) 0 0;
    box-shadow: 0 -6px 24px rgba(23, 50, 77, .2);
}

html[data-vista="essenziale"] #btn-pannello {
    display: inline-flex !important;
}


/* Intestazioni della mail nell'editor: caselle, non righe di testo da riscrivere.
   Spostare un indirizzo fra A, Cc e Ccn e' la modifica piu' frequente, e non deve
   costare un altro turno di conversazione. */
.editor-campi {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .3rem .7rem;
    align-items: start;
    padding: .75rem clamp(1rem, 6vw, 5rem);
    border-bottom: 1px solid var(--chat-linea);
    background: var(--chat-tela);
}

.editor-campo {
    display: contents;
}

.editor-campo > span {
    font-size: .78rem;
    font-weight: 600;
    color: var(--chat-testo-tenue);
    padding-top: .35rem;
    white-space: nowrap;
}

.editor-campo > input,
.editor-campo > textarea {
    width: 100%;
    min-height: 2.1rem;
    font-family: inherit;
    font-size: .85rem;
    line-height: 1.4;
    padding: .3rem .5rem;
    border: 1px solid var(--chat-linea);
    border-radius: 8px;
    background: var(--chat-superficie);
    resize: none;
    overflow-y: auto;
}

.editor-campo > input:focus,
.editor-campo > textarea:focus {
    outline: 2px solid var(--chat-primary);
    outline-offset: 1px;
    border-color: var(--chat-primary);
}

@media (max-width: 576px) {
    .editor-campi {
        grid-template-columns: minmax(0, 1fr);
        padding: .75rem 1rem;
    }

    .editor-campo > span { padding-top: .2rem; }
}

/* Scelta degli allegati: gli altri documenti della conversazione. Sta dentro il
   riquadro di conferma perche' e' li' che si decide che cosa parte davvero. */
.documento-allegati {
    margin: .6rem 0 0;
    padding: .5rem .6rem;
    border: 1px solid var(--chat-linea);
    border-radius: 8px;
    background: var(--chat-superficie);
}

.documento-allegati legend {
    float: none;
    width: auto;
    padding: 0 .3rem;
    margin: 0;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--chat-testo-tenue);
}

.documento-allegato {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .2rem 0;
    font-size: .82rem;
}

.documento-allegato input[type="checkbox"] {
    position: static;
    width: 1rem;
    height: 1rem;
    opacity: 1;
    flex: none;
    accent-color: var(--chat-primary);
}

.documento-allegato label {
    flex: 1;
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.documento-allegato select {
    font-size: .78rem;
    padding: .1rem .3rem;
    border: 1px solid var(--chat-linea);
    border-radius: 6px;
    background: var(--chat-superficie);
    height: auto;
}

/* Barra degli strumenti dell'editor visuale: comandi di formattazione, non stili
   inventati. Il grassetto si vede grassetto, il corsivo corsivo. */
.editor-strumenti {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
    padding: .4rem clamp(1rem, 6vw, 5rem);
    border-bottom: 1px solid var(--chat-linea);
    background: var(--chat-tela);
}

.editor-strumenti .chat-azione {
    border-color: var(--chat-linea);
    background: var(--chat-superficie);
    min-width: 2rem;
    justify-content: center;
}

.editor-strumenti .grassetto { font-weight: 700; }
.editor-strumenti .corsivo { font-style: italic; }

/* Sul sorgente i comandi non hanno presa: restano visibili ma spenti, cosi' si
   capisce perche' non rispondono invece di sembrare rotti. */
.editor-strumenti.spenta .chat-azione[data-strumento] {
    opacity: .4;
    pointer-events: none;
}

.editor-collegamento {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    padding: .5rem clamp(1rem, 6vw, 5rem);
    border-bottom: 1px solid var(--chat-linea);
    background: var(--chat-primary-tenue);
}

.editor-collegamento label {
    flex: 1;
    max-width: 32rem;
    margin: 0;
    font-size: .75rem;
    font-weight: 600;
    color: var(--chat-primary-scuro);
}

.editor-collegamento input {
    display: block;
    width: 100%;
    margin-top: .15rem;
    font-size: .85rem;
    padding: .3rem .5rem;
    border: 1px solid var(--chat-linea);
    border-radius: 8px;
    background: var(--chat-superficie);
}

/* L'area visuale si legge come il documento finito: stessa misura e stessa
   interlinea della conversazione, non il monospazio del sorgente. */
.editor-visuale {
    flex: 1;
    overflow-y: auto;
    padding: 1.2rem clamp(1rem, 6vw, 5rem);
    font-size: .95rem;
    line-height: 1.65;
    color: #1b1c1d;
    background: var(--chat-superficie);
    outline: 0;
}

.editor-visuale > * { margin-top: 0; }
.editor-visuale > * + * { margin-top: .75rem; }

.editor-visuale h2 { font-size: 1.1rem; font-weight: 700; margin-top: 1.35rem; }
.editor-visuale h3 { font-size: 1rem; font-weight: 700; margin-top: 1.2rem; }

.editor-visuale blockquote {
    margin-left: 0;
    padding-left: .8rem;
    border-left: 3px solid var(--chat-linea);
    color: var(--chat-testo-tenue);
}

.editor-visuale ul,
.editor-visuale ol { padding-left: 1.35rem; }

.editor-visuale:focus-visible { outline: 0; }

/* Anteprima di un allegato: sola lettura, stessa resa della chat. */
.anteprima-corpo {
    flex: 1;
    overflow-y: auto;
    padding: 1.4rem clamp(1rem, 6vw, 5rem);
    font-size: .95rem;
    line-height: 1.65;
}

.anteprima-corpo > *:first-child { margin-top: 0; }

@keyframes chat-pulsa {
    0%, 100% { opacity: .35; }
    50% { opacity: 1; }
}

/* Chi ha chiesto meno movimento vede gli stessi stati, senza animazioni. */
@media (prefers-reduced-motion: reduce) {
    .msg,
    .chat-passo,
    .chat-passo-segno,
    .chat-punti span,
    .chat-pallino.avvio,
    .msg-bolla.in-scrittura .messaggio-testo::after {
        animation: none;
    }

    .chat-esempio:hover { transform: none; }
}