/* AgileLLM — la chat. Foglio unico, chiaro e scuro, nessuna libreria: quel che serve alla pagina sta qui.
   Il tema scuro non è una variante di cortesia: il titolare lavora dall'iPad, spesso la sera. Le due tavolozze si
   scrivono una accanto all'altra nelle variabili, e il resto del foglio non sa quale delle due è in uso. */

:root {
  color-scheme: light dark;
  --sfondo: #ffffff;
  --sfondo-2: #f7f6f4;
  --sfondo-3: #efedea;
  --bordo: #8a8783;   /* ≥ 3:1 su sfondo e sfondo-2 (WCAG 1.4.11): il bordo di un campo va visto */
  --testo: #1c1917;
  --testo-2: #6b655e;
  --accento: #0f766e;
  --accento-chiaro: #d7efec;
  --rosso: #b91c1c;
  --verde: #15803d;
  --ambra: #b45309;
  --barra-larghezza: 17rem;
  --raggio: .6rem;
}

[data-tema="scuro"] {
  --sfondo: #16161a;
  --sfondo-2: #1e1e23;
  --sfondo-3: #2a2a31;
  --bordo: #6e6e77;   /* ≥ 3:1 su sfondo e sfondo-2 (WCAG 1.4.11): il bordo di un campo va visto */
  --testo: #edeae5;
  --testo-2: #a09a92;
  --accento: #2dd4bf;
  --accento-chiaro: #10312e;
  --rosso: #f87171;
  --verde: #4ade80;
  --ambra: #fbbf24;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--testo);
  background: var(--sfondo);
  -webkit-text-size-adjust: 100%;      /* l'iPad non deve ingrandire il testo da solo quando si ruota */
}

button, input, select, textarea { font: inherit; color: inherit; }

/* ---------------------------------------------------------------- accesso */
#sezione-entra {
  max-width: 24rem;
  margin: 12vh auto 0;
  padding: 1.5rem;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--sfondo-2);
}
#sezione-entra h1 { font-size: 1.25rem; margin: 0 0 .25rem; }
#sezione-entra .sottotitolo { color: var(--testo-2); margin: 0 0 1.25rem; font-size: .92rem; line-height: 1.45; }
#entra-google {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .65rem; margin-bottom: .25rem; text-decoration: none; font-weight: 600;
  border: 1px solid var(--bordo); border-radius: .4rem; background: var(--sfondo); color: var(--testo);
}
#entra-google:hover { background: var(--sfondo-3); }
.oppure {
  display: flex; align-items: center; gap: .6rem; margin: 1rem 0 .25rem;
  font-size: .8rem; color: var(--testo-2);
}
.oppure::before, .oppure::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--bordo); }
#sezione-entra label { display: block; font-size: .85rem; color: var(--testo-2); margin: .75rem 0 .25rem; }
#sezione-entra input {
  width: 100%; padding: .6rem .7rem; border: 1px solid var(--bordo);
  border-radius: .4rem; background: var(--sfondo);
}
#sezione-entra input:focus-visible { outline: 2px solid var(--accento); outline-offset: 1px; }
#errore-entra { color: var(--rosso); font-size: .85rem; min-height: 1.3em; margin-top: .6rem; }
#sezione-entra button[type=submit] {
  margin-top: 1rem; width: 100%; padding: .65rem;
  background: var(--accento); color: var(--sfondo); border: 1px solid var(--accento);
  border-radius: .4rem; cursor: pointer; font-weight: 600;
}
.marchio { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.marchio img { height: 1.7rem; width: auto; }

/* ---------------------------------------------------------------- impalcatura */
#sezione-chat { display: flex; height: 100dvh; }

/* ---------------------------------------------------------------- barra laterale */
#barra {
  width: var(--barra-larghezza);
  flex: 0 0 var(--barra-larghezza);
  background: var(--sfondo-2);
  border-right: 1px solid var(--bordo);
  display: flex; flex-direction: column; min-height: 0;
}
#barra-testa { padding: .75rem; display: flex; flex-direction: column; gap: .5rem; }
#nuova {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .6rem; border: 1px solid var(--bordo); border-radius: .4rem;
  background: var(--sfondo); cursor: pointer; font-weight: 600;
}
#nuova:hover { background: var(--sfondo-3); }
#cerca {
  width: 100%; padding: .5rem .6rem; border: 1px solid var(--bordo);
  border-radius: .4rem; background: var(--sfondo); font-size: .9rem;
}
#conversazioni { flex: 1 1 auto; overflow-y: auto; padding: 0 .5rem .75rem; min-height: 0; }
#conversazioni .gruppo {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--testo-2); padding: .9rem .5rem .3rem;
}
.voce {
  display: flex; align-items: center; gap: .25rem;
  border-radius: .4rem; padding: .05rem .1rem .05rem .5rem;
}
.voce:hover, .voce:focus-within { background: var(--sfondo-3); }
.voce.aperta { background: var(--accento-chiaro); }
.voce .titolo {
  flex: 1 1 auto; text-align: left; background: none; border: 0; cursor: pointer;
  padding: .5rem 0; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.voce .azione {
  flex: 0 0 auto; background: none; border: 0; cursor: pointer; padding: .35rem;
  border-radius: .3rem; color: var(--testo-2); line-height: 1;
}
.voce .azione:hover { background: var(--sfondo); color: var(--testo); }
.voce .azione.elimina:hover { color: var(--rosso); }
#vuoto { color: var(--testo-2); font-size: .88rem; padding: 1rem .5rem; line-height: 1.5; }
#barra-piede { border-top: 1px solid var(--bordo); padding: .6rem .75rem; font-size: .8rem; color: var(--testo-2); }
#barra-piede .riga-piede { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.riga-piede .comandi { display: flex; align-items: center; gap: .35rem; }
#tema, #lingua, #esci {
  background: none; border: 1px solid var(--bordo); border-radius: .35rem;
  padding: .3rem .55rem; cursor: pointer; font-size: .8rem;
}
#lingua { color: var(--testo-2); }
#esci { color: var(--rosso); }
#elimina-tutte {
  width: 100%; margin-top: .5rem; padding: .35rem; font-size: .78rem; cursor: pointer;
  background: none; border: 1px solid var(--bordo); border-radius: .35rem; color: var(--testo-2);
}
#elimina-tutte:hover { border-color: var(--rosso); color: var(--rosso); }

/* ---------------------------------------------------------------- colonna della conversazione */
#colonna { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
#testa {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .6rem 1rem; border-bottom: 1px solid var(--bordo); background: var(--sfondo);
}
#apri-barra { display: none; background: none; border: 1px solid var(--bordo); border-radius: .35rem; padding: .35rem .5rem; cursor: pointer; }
#scelta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; min-width: 0; }
#scelta label { font-size: .8rem; color: var(--testo-2); }
#pacchetto {
  padding: .4rem .5rem; border: 1px solid var(--bordo); border-radius: .35rem;
  background: var(--sfondo); max-width: 18rem;
}
#maturo { font-size: .8rem; color: var(--accento); }
#modello { font-size: .75rem; color: var(--testo-2); white-space: nowrap; overflow: hidden;
           text-overflow: ellipsis; max-width: 22rem; }
#pacchetto-in-uso { margin: 0; font-size: .8rem; color: var(--testo-2); }
/* il pacchetto con cui una conversazione era nata non c'è più: si dice, non si cambia in silenzio */
#pacchetto-avviso:not(:empty) { margin: .25rem 0 0; font-size: .8rem; color: var(--ambra, #a15c00); }
#titolo-conversazione { font-weight: 600; font-size: .95rem; margin-right: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#log { flex: 1 1 auto; overflow-y: auto; padding: 1.25rem 1rem; min-height: 0; }
#log > * { max-width: 46rem; margin-left: auto; margin-right: auto; }
.riga { margin: 0 0 1.4rem; }
.riga .chi { display: block; font-size: .75rem; color: var(--testo-2); margin-bottom: .3rem; }
.riga .corpo { display: block; white-space: pre-wrap; line-height: 1.55; overflow-wrap: anywhere; }
.riga.user .corpo { background: var(--sfondo-3); border-radius: var(--raggio); padding: .7rem .85rem; }
.riga.assistant .corpo { padding: .1rem 0; }

.esito { display: block; margin-top: .45rem; font-size: .85rem; font-weight: 600; }
.esito.passata, .esito.conforme { color: var(--verde); }
.esito.corretta, .esito.conforme_con_riserva { color: var(--ambra); }
.esito.rifiutata, .esito.viola { color: var(--rosso); }
.esito.bloccato { color: var(--ambra); }
.fonti {
  display: block; margin-top: .4rem; font-size: .8rem; color: var(--testo-2);
  border-left: 2px solid var(--bordo); padding-left: .6rem; line-height: 1.5;
}

/* ---------------------------------------------------------------- Passo 3: l'esito del firewall e le fonti

   I tre esiti non si distinguono per il colore soltanto. `passata` è una riga sottile senza riquadro, perché non
   c'è niente da leggere; `corretta` e `rifiutata` sono RIQUADRI con un bordo spesso a sinistra, perché la risposta
   che si sta leggendo non è quella che il modello ha scritto, e chi legge ha il diritto di accorgersene senza
   distinguere un ambra da un verde. Parola, segno e forma: tre canali, non uno. */
.muro { display: block; margin: .6rem 0 0; font-size: .85rem; line-height: 1.5; }
.muro-testa { margin: 0; font-weight: 600; display: flex; gap: .4rem; align-items: baseline; }
.muro-segno { font-size: 1rem; line-height: 1; }
.muro-spiega { margin: .15rem 0 0; color: var(--testo-2); }
.muro-tolti { margin: .3rem 0 0; padding-left: 1.1rem; }
.muro-tolti li { margin: .1rem 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; }
.muro-riquadro {
  border-left: 4px solid var(--bordo); border-radius: 0 var(--raggio) var(--raggio) 0;
  padding: .55rem .7rem; background: var(--sfondo-2);
}
.muro-passata .muro-testa { color: var(--verde); }
.muro-corretta { border-left-color: var(--ambra); }
.muro-corretta .muro-testa { color: var(--ambra); }
.muro-rifiutata { border-left-color: var(--rosso); }
.muro-rifiutata .muro-testa { color: var(--rosso); }
.muro-ignoto { color: var(--testo-2); }

.fonti-carte { margin-top: .7rem; }
.fonti-testa { margin: 0 0 .35rem; font-size: .78rem; color: var(--testo-2); text-transform: uppercase; letter-spacing: .04em; }
.carta {
  display: flex; gap: .6rem; align-items: center; width: 100%; text-align: left; cursor: pointer;
  margin-bottom: .35rem; padding: .5rem .6rem; border: 1px solid var(--bordo); border-radius: var(--raggio);
  background: var(--sfondo); color: var(--testo); font: inherit; font-size: .82rem;
}
.carta:hover { border-color: var(--accento); background: var(--accento-chiaro); }
.carta:focus-visible { outline: 2px solid var(--accento); outline-offset: 1px; }
.carta-n {
  flex: 0 0 auto; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--sfondo-3);
  display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums;
  font-size: .75rem; font-weight: 600;
}
.carta-corpo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.carta-titolo { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carta-sezione { color: var(--testo-2); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carta-norma {
  flex: 0 0 auto; font-size: .72rem; font-weight: 600; color: var(--accento);
  border: 1px solid var(--accento); border-radius: .3rem; padding: .05rem .3rem; white-space: nowrap;
}

/* La fonte aperta: il testo che il modello ha letto, per intero. */
#pannello-fonte {
  width: min(42rem, 92vw); max-height: 82vh; overflow-y: auto; border: 1px solid var(--bordo);
  border-radius: var(--raggio); background: var(--sfondo); color: var(--testo); padding: 1rem 1.1rem 1.2rem;
}
#pannello-fonte::backdrop { background: rgba(0, 0, 0, .45); }
#pannello-testa { display: flex; gap: .6rem; align-items: flex-start; }
#pannello-titolo { margin: 0; font-size: 1rem; flex: 1 1 auto; }
#pannello-chiudi {
  flex: 0 0 auto; border: 1px solid var(--bordo); border-radius: .35rem; background: none;
  color: var(--testo-2); cursor: pointer; font-size: .9rem; line-height: 1; padding: .3rem .45rem;
}
#pannello-sezione { margin: .3rem 0 0; font-size: .82rem; color: var(--accento); font-weight: 600; }
#pannello-testo { margin: .8rem 0 0; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
#pannello-piede { margin: .9rem 0 0; display: flex; flex-direction: column; gap: .3rem; font-size: .8rem; }
#pannello-url { color: var(--accento); overflow-wrap: anywhere; }
#pannello-nota { color: var(--testo-2); }

/* ---------------------------------------------------------------- le domande frequenti (Passo 11) */
#aiuto {
  flex: 0 0 auto; width: 1.7rem; height: 1.7rem; border: 1px solid var(--bordo); border-radius: 50%;
  background: var(--sfondo); color: var(--testo-2); cursor: pointer; font-weight: 700; line-height: 1;
}
#aiuto:hover { border-color: var(--accento); color: var(--accento); }

#pannello-faq {
  width: min(46rem, 92vw); max-height: 82vh; border: 1px solid var(--bordo); border-radius: var(--raggio);
  background: var(--sfondo); color: var(--testo); padding: 0; overflow: hidden;
}
#pannello-faq::backdrop { background: rgba(0, 0, 0, .45); }
#faq-testa {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .8rem 1rem; border-bottom: 1px solid var(--bordo); background: var(--sfondo-2);
}
#faq-titolo { margin: 0; font-size: 1.05rem; }
#faq-chiudi {
  flex: 0 0 auto; border: 1px solid var(--bordo); border-radius: .35rem; background: none;
  color: var(--testo-2); cursor: pointer; font-size: .9rem; line-height: 1; padding: .3rem .45rem;
}
#faq-elenco { max-height: calc(82vh - 3.4rem); overflow-y: auto; padding: .5rem 1rem 1rem; }
#faq-elenco .faq { padding: .9rem 0; border-bottom: 1px solid var(--bordo); }
#faq-elenco .faq:last-child { border-bottom: 0; }
#faq-elenco .domanda-it { margin: 0 0 .3rem; font-size: .98rem; }
#faq-elenco .domanda-en {
  margin: .7rem 0 .2rem; font-size: .72rem; color: var(--testo-2); text-transform: uppercase; letter-spacing: .04em;
}
#faq-elenco .risposta-it, #faq-elenco .risposta-en { margin: 0 0 .35rem; font-size: .9rem; line-height: 1.5; }
#faq-elenco .risposta-en { color: var(--testo-2); }
#faq-elenco .fonte-faq { margin: .4rem 0 0; font-size: .76rem; color: var(--testo-2); font-style: italic; }

.segnala {
  margin-top: .5rem; font-size: .78rem; padding: .3rem .55rem; cursor: pointer;
  border: 1px solid var(--bordo); border-radius: .35rem; background: none; color: var(--testo-2);
}
.segnala:hover { border-color: var(--rosso); color: var(--rosso); }

/* La guida al primo accesso (Passo 11): un <dialog> come il pannello della fonte. «Avanti»/«Indietro» camminano
   fra i passi, «Salta» e «✕» chiudono (e chiudere vale come vista, lo segna il ponte). Il pulsante IT/EN cambia
   lingua senza perdere il passo in corso. */
#guida {
  width: min(40rem, 92vw); max-height: 82vh; overflow-y: auto; border: 1px solid var(--bordo);
  border-radius: var(--raggio); background: var(--sfondo); color: var(--testo); padding: 1rem 1.1rem 1.2rem;
}
#guida::backdrop { background: rgba(0, 0, 0, .45); }
#guida-testa { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
#guida-titolo { margin: 0; font-size: 1rem; flex: 1 1 auto; }
#guida-lingua { display: inline-flex; gap: .25rem; }
#guida-lingua .lingua {
  border: 1px solid var(--bordo); border-radius: .35rem; background: none; color: var(--testo-2);
  cursor: pointer; font-size: .75rem; padding: .2rem .5rem; font-weight: 600;
}
#guida-lingua .lingua.attiva { border-color: var(--accento); color: var(--accento); background: var(--accento-chiaro); }
#guida-chiudi {
  flex: 0 0 auto; border: 1px solid var(--bordo); border-radius: .35rem; background: none;
  color: var(--testo-2); cursor: pointer; font-size: .9rem; line-height: 1; padding: .3rem .45rem;
}
#guida-corpo { margin-top: .9rem; }
#guida-numero { margin: 0 0 .3rem; font-size: .78rem; color: var(--testo-2); text-transform: uppercase; letter-spacing: .04em; }
#guida-passo-titolo { margin: 0 0 .45rem; font-size: 1.05rem; }
#guida-passo-testo { margin: 0; line-height: 1.6; }
#guida-piede { margin-top: 1.1rem; display: flex; gap: .6rem; align-items: center; justify-content: space-between; }
#guida-piede button {
  padding: .5rem .9rem; border: 1px solid var(--bordo); border-radius: var(--raggio);
  background: var(--sfondo); color: var(--testo); cursor: pointer; font-size: .9rem;
}
#guida-salta { color: var(--testo-2); }
#guida-passi { display: inline-flex; gap: .5rem; }
#guida-avanti { background: var(--accento); color: #fff; border-color: var(--accento); font-weight: 600; }
#guida-indietro:disabled { opacity: .45; cursor: default; }
#apri-guida {
  background: none; border: 1px solid var(--bordo); border-radius: .35rem;
  padding: .35rem .5rem; cursor: pointer; font-size: .82rem; color: var(--testo-2);
}
#apri-guida:hover { border-color: var(--accento); color: var(--accento); }

#piede { border-top: 1px solid var(--bordo); padding: .75rem 1rem 1rem; background: var(--sfondo); }
#forma { display: flex; gap: .5rem; align-items: flex-end; max-width: 46rem; margin: 0 auto; }
#domanda {
  flex: 1 1 auto; min-width: 0; padding: .7rem .8rem; border: 1px solid var(--bordo);
  border-radius: var(--raggio); background: var(--sfondo); resize: none; max-height: 40vh; line-height: 1.45;
}
#domanda:focus-visible { outline: 2px solid var(--accento); outline-offset: 1px; }
#forma button {
  flex: 0 0 auto; padding: .7rem .9rem; border: 1px solid var(--bordo);
  border-radius: var(--raggio); background: var(--sfondo); cursor: pointer;
}
#forma button[type=submit] { background: var(--accento); color: var(--sfondo); border-color: var(--accento); font-weight: 600; }
#ricomincia { color: var(--testo-2); }
#note { max-width: 46rem; margin: .5rem auto 0; display: flex; gap: 1rem; flex-wrap: wrap; font-size: .8rem; }
#prima-frase { margin: 0; color: var(--accento); font-variant-numeric: tabular-nums; }
#motore { margin: 0; color: var(--testo-2); }
#ripiego { margin: 0; color: var(--ambra); }
#avviso-conservazione { margin: .45rem auto 0; max-width: 46rem; font-size: .75rem; color: var(--testo-2); line-height: 1.45; }

/* ---------------------------------------------------------------- iPad e telefono */
#velo { display: none; }

@media (max-width: 52rem) {
  #barra {
    position: fixed; z-index: 20; top: 0; bottom: 0; left: 0;
    transform: translateX(-100%); transition: transform .18s ease-out;
  }
  body[data-barra="aperta"] #barra { transform: translateX(0); }
  body[data-barra="aperta"] #velo {
    display: block; position: fixed; inset: 0; z-index: 10; background: rgba(0,0,0,.35); border: 0;
  }
  #apri-barra { display: block; }
  #log { padding: 1rem .75rem; }
  #piede { padding: .6rem .75rem .75rem; }
  #titolo-conversazione { font-size: .9rem; }
  #pacchetto { max-width: 11rem; font-size: .85rem; }
}

@media (prefers-reduced-motion: reduce) {
  #barra { transition: none; }
}

/* ---------------------------------------------------------------- il Markdown della risposta (Passo 2)
   La risposta del modello non è più una stringa sola: `markdown.js` la disegna a nodi (paragrafi, elenchi, titoli,
   citazioni, blocchi di codice). Quindi la spaziatura la decide questo foglio, non `pre-wrap`: con il `pre-wrap` di
   prima ogni a capo del Markdown si sommerebbe al margine del paragrafo e la risposta si aprirebbe a fisarmonica. */
.riga.assistant .corpo { white-space: normal; }
.riga.assistant .corpo > * { margin: 0 0 .7rem; }
.riga.assistant .corpo > *:last-child { margin-bottom: 0; }
.riga.assistant .corpo h2 { font-size: 1.05rem; }
.riga.assistant .corpo h3 { font-size: .98rem; }
.riga.assistant .corpo h4 { font-size: .92rem; color: var(--testo-2); }
.riga.assistant .corpo ul, .riga.assistant .corpo ol { padding-left: 1.3rem; }
.riga.assistant .corpo li { margin: .2rem 0; }
.riga.assistant .corpo blockquote {
  border-left: 3px solid var(--bordo); padding: .1rem 0 .1rem .8rem; color: var(--testo-2);
}
.riga.assistant .corpo code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em;
  background: var(--sfondo-3); border-radius: .3rem; padding: .08rem .3rem;
}
.riga.assistant .corpo a { color: var(--accento); }

/* Il blocco di codice: intestazione con la lingua e il pulsante «Copia», corpo che scorre in orizzontale invece di
   allargare la pagina (sul telefono una riga lunga farebbe scorrere tutta la chat di lato). */
.blocco-codice { border: 1px solid var(--bordo); border-radius: var(--raggio); overflow: hidden; background: var(--sfondo-2); }
.blocco-codice .testa-codice {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .3rem .5rem .3rem .7rem; background: var(--sfondo-3); border-bottom: 1px solid var(--bordo);
}
.blocco-codice .lingua { font-size: .72rem; color: var(--testo-2); text-transform: uppercase; letter-spacing: .04em; }
.blocco-codice .copia-codice {
  font-size: .72rem; padding: .18rem .5rem; border: 1px solid var(--bordo); border-radius: .4rem;
  background: var(--sfondo); color: var(--testo); cursor: pointer;
}
.blocco-codice .copia-codice:hover { border-color: var(--accento); color: var(--accento); }
.blocco-codice pre { margin: 0; padding: .7rem; overflow-x: auto; }
.blocco-codice pre code { background: none; padding: 0; white-space: pre; }
/* Un recinto ancora APERTO (la risposta sta arrivando): si dichiara, così non sembra un blocco finito e sbagliato. */
.blocco-codice.in-corso { border-style: dashed; }

/* Le azioni della risposta (Passo 2): ferma mentre arriva, copia e rigenera quando è arrivata. Piccole e chiare, e
   sempre visibili — non al passaggio del mouse, che sull'iPad del titolare non esiste. */
.riga .azioni { display: flex; gap: .4rem; margin-top: .45rem; flex-wrap: wrap; }
.riga .azione {
  font-size: .74rem; padding: .2rem .55rem; border: 1px solid var(--bordo); border-radius: .4rem;
  background: var(--sfondo); color: var(--testo-2); cursor: pointer;
}
.riga .azione:hover { border-color: var(--accento); color: var(--accento); }
.riga .azione.ferma { border-color: var(--rosso); color: var(--rosso); }
.riga.user .azioni { justify-content: flex-end; }

/* ---------------------------------------------------------------- la finestra delle scorciatoie
   Un pannello sopra la chat. L'elenco è disegnato dallo script leggendo la tabella `SCORCIATOIE` — qui c'è solo la
   cornice, mai un elenco scritto a mano accanto al codice che lo implementa. */
#scorciatoie-apri {
  width: 100%; margin-top: .35rem; padding: .35rem; font-size: .78rem; cursor: pointer;
  background: none; border: 1px solid var(--bordo); border-radius: .35rem; color: var(--testo-2);
}
#scorciatoie-apri:hover { border-color: var(--accento); color: var(--accento); }
#finestra-scorciatoie {
  position: fixed; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
#finestra-scorciatoie[hidden] { display: none; }
#scorciatoie-velo { position: absolute; inset: 0; background: rgba(0,0,0,.35); }
#scorciatoie-riquadro {
  position: relative; background: var(--sfondo); border: 1px solid var(--bordo);
  border-radius: var(--raggio); padding: .9rem 1.1rem; width: min(26rem, 100%);
  box-shadow: 0 12px 40px rgba(0,0,0,.28); max-height: calc(100dvh - 2rem); overflow-y: auto;
}
#scorciatoie-riquadro header { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .4rem; }
#scorciatoie-titolo { margin: 0; font-size: 1rem; }
#scorciatoie-chiudi {
  background: none; border: 1px solid var(--bordo); border-radius: .35rem;
  padding: .2rem .5rem; cursor: pointer; color: var(--testo-2); line-height: 1;
}
#scorciatoie-chiudi:hover { border-color: var(--rosso); color: var(--rosso); }
#elenco-scorciatoie { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
#elenco-scorciatoie li {
  display: flex; align-items: center; justify-content: space-between; gap: .7rem;
  padding: .45rem 0; border-bottom: 1px solid var(--sfondo-3);
}
#elenco-scorciatoie li:last-child { border-bottom: 0; }
#elenco-scorciatoie kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem;
  background: var(--sfondo-3); border: 1px solid var(--bordo); border-radius: .3rem;
  padding: .1rem .4rem; white-space: nowrap; flex: 0 0 auto;
}
#elenco-scorciatoie span { color: var(--testo-2); font-size: .85rem; text-align: right; }

/* ---------------------------------------------------------------- l'aiuto in linea (una voce per ogni elemento)
   Il «?» è un segno decorativo fuori dal flusso (position:absolute): non muove la forma e sull'iPad del titolare non
   nasconde i pulsanti. La bolla con titolo, spiegazione e scorciatoia si apre al passaggio del mouse o al fuoco. */
.aiuto-punto {
  position: absolute;
  width: 1rem; height: 1rem;
  display: flex; align-items: center; justify-content: center;
  font-size: .68rem; line-height: 1; font-weight: 700;
  color: var(--accento);
  background: var(--sfondo-3);
  border: 1px solid var(--bordo);
  border-radius: 50%;
  pointer-events: none;      /* solo un segno: l'aiuto si apre sull'elemento, non sul punto */
  z-index: 2;
}
#aiuto-bolla {
  position: fixed;
  z-index: 40;
  max-width: 20rem;
  padding: .6rem .75rem;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--sfondo-2);
  color: var(--testo);
  font-size: .82rem;
  line-height: 1.45;
  box-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, .18);
  pointer-events: none;      /* la bolla non ruba il passaggio del mouse all'elemento sotto */
}
#aiuto-bolla strong { display: block; font-size: .9rem; margin-bottom: .2rem; }
#aiuto-bolla p { margin: 0; color: var(--testo-2); }
#aiuto-bolla .scorciatoia {
  display: block; margin-top: .4rem; font-size: .76rem;
  color: var(--accento); font-variant-numeric: tabular-nums;
}

/* il giudizio della persona (Passo 5): due versi, due pulsanti, e quando è dato si vede che è dato */
.riga .azione.pollice { font-size: .8rem; }
.riga .azione.pollice:disabled { opacity: 1; color: var(--accento); border-color: var(--accento); cursor: default; }

/* --------------------------------------------------------------- gli allegati (Passo 6)
   Il documento caricato si vede PRIMA di mandare la domanda (nome, tipo, quanto pesa) e dopo la risposta si legge
   quanto ne è andato davvero davanti al modello: `intero` o `N pezzi su M`. Le due righe hanno stili diversi
   apposta — una è quel che hai caricato, l'altra è quel che il modello ha letto, e confonderle sarebbe la bugia
   che questo passo esiste per togliere. */
#allegati-in-corso { display: flex; flex-wrap: wrap; gap: .4rem; max-width: 46rem; margin: 0 auto .4rem; }
#allegati-in-corso:empty { display: none; }
.allegato {
  display: inline-flex; align-items: center; gap: .4rem; max-width: 100%;
  border: 1px solid var(--bordo); border-radius: .6rem; padding: .25rem .5rem;
  background: var(--sfondo-tenue, transparent); font-size: .82rem;
}
.allegato .nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 18rem; }
.allegato .conto { color: var(--testo-tenue, #666); }
.allegato button {
  border: 0; background: none; cursor: pointer; color: inherit; font-size: 1rem; line-height: 1; padding: 0 .1rem;
}
.allegato[data-stato="caricando"] { opacity: .65; }
.allegato[data-stato="rifiutato"] { border-color: var(--errore, #b3261e); }
.allegato[data-stato="rifiutato"] .conto { color: var(--errore, #b3261e); }
.allegato-detto {
  margin: .25rem 0 0; font-size: .82rem; color: var(--testo-tenue, #666);
  border-left: 3px solid var(--bordo); padding-left: .5rem;
}
.allegato-detto[data-come="pezzi"] { border-left-color: var(--attenzione, #b26a00); }
#allega { font-size: 1.1rem; line-height: 1; }

/* ------------------------------------------------ il piè di pagina del produttore e dei testi legali (Passo 10) */
#piede-pagina {
  max-width: 46rem; margin: 0 auto; padding: .75rem 1rem 1.25rem;
  font-size: .78rem; color: var(--testo-2); border-top: 1px solid var(--bordo);
}
#piede-pagina nav { display: flex; flex-wrap: wrap; gap: .35rem .9rem; }
#piede-pagina a { color: var(--accento); text-decoration: none; }
#piede-pagina a:hover, #piede-pagina a:focus-visible { text-decoration: underline; }