/* `hidden` vale DAVVERO, dappertutto.
 *
 * L'attributo `hidden` porta con se' solo `display: none` dell'user-agent, che
 * qualunque `display` scritto su una classe batte. In questo foglio e' costato
 * quattro giri, sempre lo stesso: i tasti del modulo dei documenti visibili al
 * primo passo, il wizard sopra un atto finito, «Nuovo» su una pagina vuota, e
 * «Passa al Pro» insieme a «Richiedi il Pro». Ogni volta la cura era una riga
 * `.qualcosa[hidden]`, cioe' ricordarsene — e ce ne si ricorda dopo.
 *
 * Questa riga chiude la classe intera. `!important` qui e' giusto: `hidden`
 * NON e' uno stile, e' un fatto — l'elemento non c'e' per nessuno, nemmeno per
 * i lettori di schermo. Le regole `.x[hidden]` sparse restano e non danno
 * fastidio: dicono la stessa cosa.
 */
[hidden] { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   LexNova Chat — foglio di stile unico.

   Veste: quella di casa LexNova — tela bianca, schede bianche, Inter con
   Fraunces per i titoli, e dal 4 settembre 2026 il VERDE ACCESO del marchio
   (#01ff01) al posto del teal. Il verde arriva dal sito, e con lui arriva la
   sua regola: il verde acceso e' una SUPERFICIE, non un inchiostro — quello
   che si legge e' il verde cupo #004200. Sono due token diversi apposta
   (`--accent` e `--accent-ink`), perche' scambiarli non da' errore: da' una
   riga che non si legge, e ce se ne accorge a schermo.

   Il marchio sta nella barra laterale: aperta si legge "LexNova Chat" per
   intero, richiusa a striscia resta il solo segno. La testata e' trasparente e
   porta il minimo — la materia riconosciuta a sinistra, "gratuito" e l'aiuto a
   destra: sopra la conversazione non deve esserci una barra che la tagli.

   Scritto a mano: questa app non ha una pipeline di build, e un CSS statico non
   ha la trappola del "classe nuova, build da rigenerare".
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Il verde vive in DUE forme, ed e' la regola che regge tutto il foglio —
     e' scritta cosi' anche nel sito, da dove viene: `#01ff01` **solo come
     superficie**, `#004200` **quando deve essere letto**. Il verde acceso su
     bianco ha un contrasto di 1,3:1 — invisibile come testo, giusto come
     pieno; il verde cupo ne ha 11:1. Sbagliare verso vuol dire un'etichetta
     che non si legge o un pieno che non si vede. */
  --accent:      #01ff01;   /* superficie: pieni, spunte, barre, il filo che scorre */
  --accent-ink:  #004200;   /* leggibile: testo, icone, filetti, bordi su bianco */
  --accent-dark: #003100;   /* la stessa cosa, ancora piu' cupa: il passaggio del mouse */
  --accent-soft: #e8ffe8;   /* il velo, per i fondi tenui */
  --su-accent:   #04140b;   /* quel che si scrive SOPRA il verde acceso */
  --accent-orlo: rgba(0,66,0,.22);  /* l'orlo che tiene un pieno verde sul bianco */
  /* Il verde col mouse sopra: piu' PASTELLO, non piu' scuro. Scurendo si
     andava verso il verde cupo, e col testo quasi-nero sopra il tasto
     diventava scuro su scuro — brutto e, mezzo secondo, illeggibile. Un pieno
     schiarito resta un pieno, e il segnale «sei qui sopra» arriva lo stesso. */
  --accent-su:   #7dff7d;
  /* Il font delle icone sta QUI e in nessun altro posto. Era scritto a mano in
     tre punti, e quando la famiglia e' passata da Outlined a Rounded due sono
     rimasti indietro: il carattere non c'era piu', la legatura non si
     risolveva, e al posto della spunta usciva la PAROLA «check» — sulla pagina
     del Pro e sul muro dell'abbonamento, cioe' nei due posti dove si chiedono
     ventisette euro. Un font che manca non da' errore: stampa il nome
     dell'icona e sembra un refuso. */
  --icone:        'Material Symbols Rounded', 'Material Symbols Outlined';
  --icone-tratto: 'FILL' 0, 'wght' 250, 'GRAD' -25, 'opsz' 24;
  --ink:         #1d1d1f;
  --ink-2:       #34343a;
  --muted:       #6b6b70;
  --faint:       #9a9aa0;
  --line:        rgba(0,0,0,.08);
  --line-soft:   rgba(0,0,0,.05);
  /* Non bianco pieno: #fbfbfc. Accanto a un campo di scrittura grigio il
     bianco assoluto fa sembrare il campo sporco invece che pieno, e
     l'alone di sottofondo su bianco puro stacca come una macchia. */
  --bg:          #fbfbfc;
  --panel:       #ffffff;   /* la barra laterale: bianca come la conversazione */
  --sunk:        #f0f0f2;
  --red:         #c0392b;
  --red-bg:      #fdecec;
  --radius:      16px;
  /* 248 -> 208: la barra prendeva troppo spazio alla conversazione,
     che e' la cosa per cui si apre la pagina. */
  --rail-w:      208px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--accent); color: var(--su-accent); }
input, textarea { caret-color: var(--accent-ink); font-family: inherit; }
button { font-family: inherit; }
a { color: inherit; }

.serif { font-family: 'Fraunces', Georgia, 'Times New Roman', serif; font-optical-sizing: auto; }
/* La classe si chiama ancora «outlined» perche' sta in quarantadue punti fra
   template e js, e rinominarla sarebbe un diff enorme per zero sostanza: qui
   dentro si cambia la FAMIGLIA, e il nome resta un'etichetta storica.
   Tratto 250 e non 400: 400 e' il peso di un testo, e su un'icona da venti
   pixel fa un segno spesso e squadrato — e' quello che le faceva sembrare
   vecchie. `GRAD -25` toglie un altro filo di peso sul fondo chiaro. */
.material-symbols-outlined {
  font-family: var(--icone);
  font-variation-settings: var(--icone-tratto);
  font-size: 20px; line-height: 1; user-select: none;
}
.eyebrow {
  font-size: 10.5px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--faint);
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.shell { display: flex; height: 100dvh; overflow: hidden; }

/* ══ barra laterale ══════════════════════════════════════════════════════ */
/* I corpi qui dentro sono di mezzo punto/un punto piu' piccoli di quelli
   della conversazione: la barra e' un indice, non un testo da leggere, e
   piu' e' discreta piu' spazio resta a cio' che conta. */
.rail {
  width: var(--rail-w); flex-shrink: 0; background: var(--panel);
  border-right: 1px solid rgba(0,0,0,.045); display: flex; flex-direction: column;
  transition: width .22s cubic-bezier(.22,1,.36,1);
}
/* A striscia niente filetto: deve sembrare un tutt'uno con la conversazione. */
.rail.chiusa { border-right-color: transparent; }
/* Richiusa resta una striscia col solo segno del marchio e i comandi. */
.rail.chiusa { width: 68px; }
.rail.chiusa .rail-nota { display: none; }
/* Nascosta ma non tolta: se sparisse davvero, sparirebbe anche il `flex: 1`
   che tiene il piede della barra incollato in fondo. */
.rail.chiusa .rail-list { visibility: hidden; }
.rail.chiusa .rail-head { padding: 12px 5px 10px; gap: 10px; }
.rail.chiusa .rail-nav { align-items: center; }
.rail.chiusa .rail-top { padding: 0; }
.rail.chiusa .rail-top { flex-direction: column; gap: 10px; }
.rail.chiusa .rail-voce { justify-content: center; padding: 9px; }
.rail.chiusa .rail-voce-t { display: none; }
.rail.chiusa .rail-foot { padding: 8px 0 10px; border-top-color: transparent; }

.rail-head { padding: 12px 5px 10px; display: flex; flex-direction: column; gap: 12px; }
.rail-top { display: flex; align-items: center; gap: 9px; width: 100%; height: 34px; padding: 0 7px; }
.rail-mark { display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0; }
.rail-logo {
  width: 24px; height: 24px; border-radius: 6px;
  transition: opacity .16s ease, transform .16s ease;
}
/* Da aperta il pulsante sta a fine riga, per conto suo. A striscia si sovrappone
   al logo: e' li' che il segno diventa comando. */
.rail-burger {
  width: 34px; height: 34px; border-radius: 999px; margin-left: auto;
  border: none; cursor: pointer; background: transparent; color: var(--muted);
  display: grid; place-items: center;
  transition: opacity .16s ease, background .15s ease, color .15s ease;
}
.rail.chiusa .rail-top { position: relative; justify-content: center; }
.rail.chiusa .rail-burger {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0;
}
/* Il pulsante e' sempre cliccabile — anche mentre e' invisibile — cosi' il
   passaggio del mouse e il clic sono un gesto solo, senza attese. */
.rail.chiusa .rail-top:hover .rail-logo,
.rail.chiusa .rail-top:focus-within .rail-logo { opacity: 0; transform: scale(.9); }
.rail.chiusa .rail-top:hover .rail-burger,
.rail.chiusa .rail-top:focus-within .rail-burger { opacity: 1; }
.rail-burger:hover { background: rgba(0,0,0,.05); color: var(--ink); }
.rail-burger:focus-visible { opacity: 1; outline: 2px solid var(--accent-ink); outline-offset: 1px; }

.rail-brand-t {
  font-size: 13px; font-weight: 600; letter-spacing: -.02em; white-space: nowrap;
  text-decoration: none; color: var(--ink);
}
.rail-brand-t b { font-weight: 600; color: var(--accent-ink); }
.rail.chiusa .rail-brand-t { display: none; }

.rail-nav { display: flex; flex-direction: column; gap: 1px; }
.rail-voce {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: transparent; border: none; border-radius: 8px; cursor: pointer;
  padding: 6px 8px; color: var(--ink-2); font-size: 12.5px; text-align: left;
  transition: background .14s ease, color .14s ease;
}
/* La voce puo' essere un <button> o un <a>: «Redigere documenti» porta a
   un'altra pagina, e un link deve restare un link — si apre in una scheda
   nuova col tasto centrale, e i lettori di schermo lo annunciano per quello
   che e'. Serve solo togliergli la sottolineatura. */
.rail-voce, .rail-set { text-decoration: none; }
.rail-voce:hover { background: rgba(0,0,0,.04); }
.rail-voce.on { background: var(--accent-soft); color: var(--accent-dark); font-weight: 550; }
.rail-voce .material-symbols-outlined { font-size: 18px; color: var(--muted); }
.rail-voce:hover .material-symbols-outlined,
.rail-voce.on .material-symbols-outlined { color: var(--accent-ink); }

.rail-list { flex: 1; overflow-y: auto; padding: 4px 5px 10px; }
/* "Recenti" e non un'insegna in maiuscolo: e' un'etichetta, non un titolo. */
.rail-list .rail-tit {
  display: block; padding: 15px 8px 5px; font-size: 10.5px; font-weight: 500;
  color: var(--faint); letter-spacing: 0; text-transform: none;
}
.thread-item {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 6px 8px; border-radius: 8px; border: none; background: transparent;
  color: var(--ink-2); font-size: 12.5px; text-align: left; cursor: pointer;
  transition: background .14s ease;
}
/* Fuori dalla chat la riga e' un <a> (porta a `/c/<id>`): senza questo esce
   sottolineata e la barra smette di essere identica. */
.thread-item { text-decoration: none; }
.thread-item:hover { background: rgba(0,0,0,.045); }
.thread-item.on { background: var(--accent-soft); color: var(--accent-dark); font-weight: 550; }
.thread-item .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-item .pin { font-size: 13px; color: var(--accent-ink); flex-shrink: 0; }
.thread-item .piu {
  opacity: 0; border: none; background: transparent; color: var(--faint);
  cursor: pointer; padding: 2px; border-radius: 6px; display: grid; place-items: center;
  flex-shrink: 0; transition: opacity .13s ease, background .13s ease;
}
.thread-item:hover .piu, .thread-item.on .piu { opacity: 1; }
.thread-item .piu:hover { background: rgba(0,0,0,.07); color: var(--ink); }
.thread-item .piu .material-symbols-outlined { font-size: 16px; }

/* Il campo di rinomina prende il posto del titolo, nella riga stessa. */
.rinomina {
  flex: 1; min-width: 0; border: 1px solid var(--accent-ink); border-radius: 6px;
  background: #fff; padding: 2px 6px; font-size: 12.5px; font-family: inherit;
  color: var(--ink); outline: none;
}

.menu {
  position: fixed; z-index: 95; min-width: 186px; background: #fff;
  border: 1px solid var(--line); border-radius: 12px; padding: 5px;
  box-shadow: 0 10px 34px rgba(0,0,0,.14);
  animation: sali .16s ease both;
  /* Con quattordici materie l'elenco non ci sta piu' in uno schermo basso:
     scorre dentro se stesso invece di uscire dalla pagina. */
  max-height: min(62vh, 430px); overflow-y: auto; overscroll-behavior: contain;
}
@keyframes sali { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.menu-voce {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: transparent; border: none; border-radius: 8px; cursor: pointer;
  padding: 8px 10px; font-size: 13px; color: var(--ink-2);
  transition: background .13s ease, color .13s ease;
}
.menu-voce:hover { background: var(--sunk); }
.menu-voce .material-symbols-outlined { font-size: 18px; color: var(--muted); }
.menu-testa {
  padding: 9px 11px 11px; border-bottom: 1px solid var(--line-soft); margin-bottom: 5px;
}
.menu-testa b { display: block; font-size: 13px; color: var(--ink); font-weight: 600; }
.menu-testa span { display: block; font-size: 11.5px; color: var(--faint); margin-top: 2px; }
.menu-voce.attiva { color: var(--accent-dark); font-weight: 600; }
.menu-voce.attiva .material-symbols-outlined { color: var(--accent-ink); }
.menu-voce.danger { color: var(--red); }
.menu-voce.danger:hover { background: var(--red-bg); }
.menu-voce.danger .material-symbols-outlined { color: var(--red); }
/* ── lo scheletro dell'elenco ─────────────────────────────────────────────
   Le conversazioni arrivano da una fetch, quindi per un istante la barra e'
   vuota. Peggio: se la rete cade si mostrava il messaggio dell'archivio
   vuoto — «le conversazioni che apri compaiono qui» — a chi ne ha cinquanta.
   Lo scheletro dice l'unica cosa vera in quel momento: sta arrivando.

   Il numero di righe e' quello dell'ultima volta (`quanteConv`), non un
   quattro fisso: cosi' la barra non salta quando i titoli veri prendono il
   posto dei fantasmi, che e' il motivo per cui uno scheletro esiste. */
.rail-scheletro { padding: 4px 0 8px; }
.scheletro-riga {
  height: 11px; width: var(--w, 70%);
  margin: 0 10px 13px;
  border-radius: 5px;
  background: var(--sunk);
}
@media (prefers-reduced-motion: no-preference) {
  .scheletro-riga {
    background: linear-gradient(90deg,
      var(--sunk) 0%, rgba(0,0,0,.035) 38%, var(--sunk) 76%);
    background-size: 260% 100%;
    animation: scheletroScorre 1.5s ease-in-out infinite;
    animation-delay: var(--ritardo, 0ms);
  }
}
@keyframes scheletroScorre {
  from { background-position: 130% 0; }
  to   { background-position: -30% 0; }
}
/* Un guasto di rete non e' un archivio vuoto, e non deve somigliargli. */
.rail-riprova {
  margin-top: 10px;
  font: inherit; font-size: 12.5px; font-weight: 550;
  color: var(--accent-ink); background: none;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 14px; cursor: pointer;
}
.rail-riprova:hover { background: var(--accent-soft); border-color: var(--accent-ink); }

.rail-empty { padding: 12px 10px; font-size: 11.5px; color: var(--faint); line-height: 1.55; }

.rail-foot { border-top: 1px solid rgba(0,0,0,.045); padding: 6px 5px 8px; }
.rail-set {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: transparent; border: none; border-radius: 8px; cursor: pointer;
  padding: 6px 8px; color: var(--ink-2); font-size: 13px; text-align: left;
  transition: background .14s ease;
}
.rail-set:hover { background: rgba(0,0,0,.04); }
.rail-set .material-symbols-outlined { font-size: 19px; color: var(--muted); }
.rail.chiusa .rail-set { justify-content: center; padding: 9px; }
.rail.chiusa .rail-set-t { display: none; }

/* ── chi sei, in fondo alla barra ────────────────────────────────────────── */
/* L'avatar ha preso il posto della granella: stessa riga, stesso bottone,
   stesso pannello. A striscia resta solo il tondo, come prima restava solo
   l'icona. */
.rail-io { padding: 6px; gap: 9px; }
.rail-io-t { display: block; min-width: 0; line-height: 1.25; }
.rail-io-t b { display: block; font-size: 13px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-io-t span { display: block; font-size: 11px; color: var(--faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 28 -> 24: nella barra e' un'insegna di «chi sei», non un ritratto, e a
   28 px pesava piu' delle voci che gli stanno sopra. */
.iniziali-s { width: 24px; height: 24px; font-size: 10px; }
.iniziali-s.vuoto .material-symbols-outlined { font-size: 15px; }
/* Da ospite non ci sono iniziali da mettere: ci va l'icona, spenta. */
.iniziali.vuoto { background: rgba(0,0,0,.06); color: var(--muted); }
.iniziali.vuoto .material-symbols-outlined { font-size: 18px; }

/* ── la testa del pannello: nome, indirizzo, e nient'altro ───────────────── */
.set-io { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.set-io-t { min-width: 0; line-height: 1.3; }
.set-io-t b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-io-t span { display: block; font-size: 11.5px; color: var(--faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pop.pop-set {
  right: auto; top: auto; left: 12px; bottom: 58px; width: 292px;
  /* Con l'account in testa e l'uscita in fondo il pannello e' cresciuto: su uno
     schermo basso deve scorrere dentro se stesso invece di uscire dalla pagina. */
  max-height: calc(100vh - 76px); overflow-y: auto;
}
.pop.pop-set a { display: inline-block; margin-top: 4px; }
.rail.chiusa ~ * .pop.pop-set, .rail.chiusa + .main .pop.pop-set { left: 12px; }
.set-riga {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: transparent; border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; cursor: pointer; font-size: 13px; color: var(--ink-2);
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.set-riga .material-symbols-outlined { font-size: 18px; }
.set-riga b { font-weight: 600; color: var(--faint); }
.set-danger:hover { background: var(--red-bg); border-color: rgba(192,57,43,.3); color: var(--red); }
.set-sep { height: 1px; background: var(--line); margin: 13px 0 10px; }
.dot-live { width: 6px; height: 6px; border-radius: 50%; background: #15803d; display: inline-block; }
.dot-live.off { background: #b45309; }

/* ══ colonna centrale ════════════════════════════════════════════════════ */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg); }

/* Trasparente e senza filetto: la conversazione comincia in cima alla colonna,
   e sopra restano solo la materia, "gratuito" e l'aiuto. */
.top {
  flex-shrink: 0; background: transparent; border-bottom: none;
  padding: 13px 20px 6px; display: flex; align-items: center; gap: 10px;
  position: relative; z-index: 20;
}
.top-sp { flex: 1; }

/* ── la fascia dell'utilizzo ─────────────────────────────────────────────────
   Sta in flusso fra l'intestazione e la conversazione, non `fixed` e non
   `sticky`: una striscia che galleggia copre la prima riga della risposta —
   cioe' proprio quello che il collega e' venuto a leggere — e quando sparisce
   fa saltare il testo. In flusso spinge, e basta.

   Ambra e non rossa: non e' un guasto, e' un avvertimento, e il rosso qui
   direbbe che qualcosa e' andato storto. Gli stessi colori delle altre note
   d'attenzione del foglio (`.avviso`, `.status.coda`): un secondo giallo
   sarebbe un secondo significato. */
.fascia {
  flex-shrink: 0; background: #fdf6e7;
  border-bottom: 1px solid rgba(180,83,9,.18);
}
.fascia-in {
  max-width: 820px; margin: 0 auto; padding: 9px 32px;
  display: flex; align-items: center; gap: 10px;
}
.fascia-i { font-size: 18px; color: #8a5a12; flex-shrink: 0; }
.fascia-t {
  flex: 1; min-width: 0; margin: 0;
  font-size: 12.5px; line-height: 1.45; color: #8a5a12;
}
.fascia-t b { font-weight: 650; }
/* Il tasto porta al pagamento, non a una pagina da leggere: chi ha davanti
   l'avviso ha gia' l'informazione, gli manca solo il modo. */
.fascia-az {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(180,83,9,.35); background: transparent; color: #8a5a12;
  font-size: 12px; font-weight: 600; font-family: inherit;
  transition: background .14s ease, border-color .14s ease;
}
.fascia-az .material-symbols-outlined { font-size: 15px; }
.fascia-az:hover { background: rgba(180,83,9,.10); border-color: rgba(180,83,9,.5); }
.fascia-az:disabled { opacity: .6; cursor: default; }
.fascia-x {
  flex-shrink: 0; display: grid; place-items: center; cursor: pointer;
  width: 24px; height: 24px; border: 0; border-radius: 6px;
  background: transparent; color: #8a5a12; opacity: .65;
}
.fascia-x:hover { opacity: 1; background: rgba(180,83,9,.12); }
.fascia-x .material-symbols-outlined { font-size: 17px; }
@media (prefers-reduced-motion: no-preference) {
  .fascia { animation: fasciaEntra .22s cubic-bezier(.2,.9,.3,1) both; }
}
@keyframes fasciaEntra { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* Sul telefono il tasto perde la scritta e resta il segno: la riga di testo e'
   la cosa che deve stare in una riga, non il bottone. */
@media (max-width: 560px) {
  .fascia-in { padding: 8px 16px; gap: 8px; }
  .fascia-az span:last-child { display: none; }
  .fascia-az { padding: 5px 8px; }
}
/* La generica .btn-icon ridefinisce `display` piu' avanti nel foglio: senza un
   selettore piu' specifico l'hamburger di riserva ricompariva anche da desktop,
   e se ne vedevano due. */
.top .burger-top { display: none; }
/* Il marchio in filigrana e' roba da telefono: da desktop il nome sta nella
   barra laterale, e ripeterlo qui sarebbe rumore. */
.top-marchio { display: none; }
.pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px;
  border-radius: 999px; font-size: 11.5px; font-weight: 600;
  background: var(--accent-soft); color: var(--accent-dark); white-space: nowrap;
}
.pill[hidden] { display: none; }
.pill-gratis {
  display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
/* Il passaggio al Pro, in testata. Discreto ma sempre a portata: e' l'unico
   punto della chat da cui ci si arriva senza aprire le impostazioni. */
.btn-pro {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px 6px 10px;
  border-radius: 999px; border: 1px solid var(--accent-ink); background: transparent;
  color: var(--accent-dark); font-size: 12.5px; font-weight: 600; text-decoration: none;
  white-space: nowrap; transition: background .14s ease, color .14s ease;
}
.btn-pro .material-symbols-outlined { font-size: 16px; }
.btn-pro:hover { background: var(--accent); color: var(--su-accent); }
.btn-pro[hidden] { display: none; }
.pill-pro {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px;
  border-radius: 999px; background: var(--accent); color: var(--su-accent);
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
.pill-pro[hidden] { display: none; }
@media (max-width: 560px) {
  /* Su schermo stretto resta il fulmine: la parola non ci sta accanto al titolo. */
  .btn-pro span:last-child { display: none; }
  .btn-pro { padding: 6px 9px; }
}
.top-accedi {
  display: inline-flex; align-items: center; padding: 7px 15px; border-radius: 999px;
  border: 1px solid var(--accent-ink); background: transparent; color: var(--accent-dark);
  font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background .14s ease;
}
.top-accedi:hover { background: var(--accent-soft); }
.top-accedi[hidden], .iniziali[hidden] { display: none; }

.btn-tondo {
  width: 36px; height: 36px; border-radius: 999px; border: none; cursor: pointer;
  background: var(--sunk); color: var(--muted); display: grid; place-items: center;
  flex-shrink: 0; transition: background .15s ease, color .15s ease;
}
.btn-tondo:hover { background: #e6e6e9; color: var(--ink); }
.btn-tondo .material-symbols-outlined { font-size: 19px; }

.pop {
  position: absolute; right: 20px; top: 56px; width: 322px; z-index: 30;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 19px; box-shadow: 0 10px 38px rgba(0,0,0,.13);
  font-size: 13px; line-height: 1.6; color: var(--muted);
}
.pop[hidden] { display: none; }
.pop p { margin: 0 0 9px; }
.pop .pop-t {
  font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 9px;
}
.pop a { color: var(--accent-dark); font-weight: 600; text-decoration: none; }
.pop a:hover { text-decoration: underline; }

.scroll { flex: 1; overflow-y: auto; scroll-behavior: smooth; }
/* 790 -> 680. Una riga di testo giuridico si legge meglio corta: piu margine
   ai lati e meno movimento dell'occhio da un capo all'altro. */
.column { max-width: 660px; margin: 0 auto; padding: 28px 32px 40px; }

/* ══ schermata iniziale ══════════════════════════════════════════════════ */
/* Impianto da motore di ricerca: marchio, una riga, il campo. Nient'altro in
   pagina. I quattro riquadri di prima riempivano lo schermo di roba da leggere
   proprio nel momento in cui non c'e' ancora niente da leggere. */
/* L'ALONE. Dietro il saluto e il campo, una macchia di colore molto tenue che
   scalda il bianco senza sporcarlo: su fondo chiaro basta il 5-7% di opacita',
   sopra si vede il cerchio e sembra un difetto di rendering. Sta su
   `.main.vuota::before` — non sullo sfondo del `main` — cosi' compare solo a
   pagina vuota e sparisce da solo appena comincia la conversazione, dove
   sotto un parere darebbe fastidio. `pointer-events: none` perche' copre il
   campo di scrittura. */
.main.vuota { position: relative; isolation: isolate; }
/* Due macchie invece di una sola centrata: una in alto a sinistra e una in
   basso a destra del gruppo saluto+campo, cosi' lo sfondo ha una diagonale e
   non un bersaglio. La casella e' di misura FISSA e centrata — non `inset: 0`
   — perche' con le percentuali su un contenitore alto quanto la pagina le
   macchie si stiravano in verticale e diventavano due bande. */
.main.vuota::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 50%; width: 1144px; height: 728px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(closest-side, rgba(1,255,1,.24), transparent 100%)
      34% 40% / 52% 58% no-repeat,
    radial-gradient(closest-side, rgba(0,150,0,.18), transparent 100%)
      68% 62% / 46% 52% no-repeat;
}
.main.vuota .scroll { flex: 0 1 auto; overflow: visible; margin-top: auto; }
.main.vuota .dock { margin-bottom: auto; }
/* A pagina vuota il `dock` non deve dipingere niente: la sua sfumatura serve a
   nascondere il testo che scorre sotto il campo, e a colonna vuota non c'e'
   testo — copriva l'alone lasciando una banda dal bordo netto. */
.main.vuota .dock { background: none; }
.main.vuota .column { padding-top: 10px; padding-bottom: 0; }
.main.vuota .dock { padding-top: 0; }
/* A colonna vuota il campo si stringe e rimpicciolisce: al centro di una pagina
   bianca una barra larga quanto la conversazione sembra un modulo, non un invito. */
.main.vuota .dock-inner { max-width: 600px; padding: 0; }
/* A pagina vuota il campo e' un PIENO, non un riquadro: niente filo colorato,
   niente ombra pesante. E' l'unica cosa da toccare in tutta la pagina, e un
   riempimento tenue lo dice meglio di un bordo. Il filo colorato resta dove
   serve — quando il campo ha il fuoco e mentre la risposta arriva. */
.main.vuota .composer {
  border-radius: 999px; padding: 9px 8px;
  /* #eef0f4 e non #f4f5f7: su un fondo #fbfbfc il secondo e' due punti
     percentuali piu' scuro e a schermo non si vede — il campo sembrava
     bianco col filo attorno, che e' esattamente cio' che si voleva togliere.
     Il colore prende un soffio di blu dall'accento, cosi' il pieno appartiene
     alla tavolozza invece di essere un grigio qualunque. */
  /* Deve essere la cosa PIU' SCURA della schermata. Con #eef0f4 il campo
     risultava piu' chiaro dell'alone che lo circonda e a schermo leggeva come
     un pillolo bianco su un fondo grigio — l'opposto del riferimento, dove il
     campo e' un pieno che invita a toccarlo. */
  background: #ffffff; border-color: transparent;
  /* Appoggiata, non sollevata: il campo deve posarsi sull'alone, non
     galleggiarci sopra. Senza ombra, su fondo #fbfbfc, un campo bianco
     sparirebbe — e' l'unica cosa da toccare in tutta la schermata. */
  box-shadow: 0 2px 10px rgba(16,24,32,.07);
}
.main.vuota .composer:hover { background: #f6f7f9; }
/* Cresciuto su piu' righe: la pillola diventa un rettangolo morbido. A 999px
   con tre righe di testo i lati tondi si allontanano dal testo e il bottone
   tondo sembra scappato di lato — la forma di una pillola dice «una riga», e
   quando la riga non e' una sola quella forma mente. */
.composer.cresciuto,
.main.vuota .composer.cresciuto { border-radius: 20px; }
/* E i comandi si appoggiano in fondo, non al centro: con quattro righe di
   testo un bottone centrato verticalmente galleggia in mezzo al paragrafo. */
.composer.cresciuto { align-items: flex-end; }
.composer.cresciuto .btn-icon { margin-bottom: 1px; }
/* Col fuoco si AGGIUNGE l'anello, non si toglie il pieno. Qui avevo scritto
   un fondo bianco, e siccome il campo e' in autofocus quello era lo stato che
   si vedeva sempre: il pieno grigio non compariva mai, e a schermo restava un
   pillolo bianco col filo attorno — cioe' esattamente la cosa che si voleva
   togliere. Il primo strato tiene il colore del pieno, il secondo dipinge il
   bordo. */
.main.vuota .composer:focus-within {
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(100deg, rgba(32,42,53,.45), rgba(1,255,1,.75) 45%,
                            rgba(32,42,53,.35) 75%, rgba(1,255,1,.65)) border-box;
  box-shadow: 0 8px 30px rgba(0,66,0,.10);
}
.main.vuota .composer textarea { font-size: 14.5px; padding: 8px 6px; }
.main.vuota .btn-icon { width: 36px; height: 36px; }
.main.vuota .btn-icon .material-symbols-outlined { font-size: 19px; }
/* Larga quanto il campo, non quanto la pagina. Finche' era una frase corta
   stava su una riga e il disallineamento non si vedeva; da quando dichiara la
   natura del sistema — obbligo dell'AI Act — e' lunga il doppio, e distesa su
   una riga sola attraversava tutto lo schermo mentre il campo sopra ne
   occupava 680. Una nota che si riferisce a un comando sta nella sua colonna. */
.disclaimer {
  flex-shrink: 0; font-size: 11px; color: var(--faint); text-align: center;
  max-width: 744px; margin: 0 auto; padding: 0 32px 12px; line-height: 1.5;
  text-wrap: balance;
}

.hero { text-align: center; padding: 0; }
/* Una riga sola, in Kulim Park: e' l'unica cosa scritta in pagina, deve
   invitare a scrivere e basta. Il marchio sta gia' nella barra, ripeterlo qui
   era arredamento. */
/* Il segno sopra il saluto: da telefono la barra laterale sta fuori pagina e
   con lei il logo, e la schermata iniziale restava senza marchio. Da desktop
   il logo c'e' gia' a sinistra, quindi qui non serve. */
.hero-logo { display: none; }
@media (max-width: 900px) {
  .hero-logo {
    display: block; width: 40px; height: 40px; border-radius: 10px;
    margin: 0 auto 14px;
  }
}

.saluto {
  font-family: 'Kulim Park', 'Inter', sans-serif;
  font-size: clamp(26px, 3.4vw, 38px); font-weight: 400; letter-spacing: -.028em;
  line-height: 1.15; color: var(--ink); margin: 0 0 20px;
}

/* Pillole sotto il campo: tenui, non invitano quanto un riquadro pieno. */

/* ── la ricerca ───────────────────────────────────────────────────────────
   Queste due regole mancavano del tutto: c'erano solo quelle dei figli, e
   `flex: 1` sull'input non faceva niente perche' il padre non era un flex.
   Risultato: lente e testo su una riga e la x buttata a capo, appoggiata a
   sinistra. Il contenitore adesso c'e', e la x torna dov'e' sempre stata
   nella nostra grammatica: in fondo alla riga, centrata sul testo. */
.cerca { max-width: 760px; margin: 0 auto; padding: 30px 24px 40px; }
.cerca-campo {
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 16px;
}
.cerca-campo .btn-icon { flex-shrink: 0; }

.cerca-campo .material-symbols-outlined { font-size: 22px; color: var(--muted); }
.cerca-campo input {
  flex: 1; border: none; outline: none; background: transparent;
  font-family: 'Fraunces', Georgia, serif; font-optical-sizing: auto;
  font-size: 26px; font-weight: 500; letter-spacing: -.015em; color: var(--ink);
}
.cerca-campo input::placeholder { color: #c4c4c9; }
.cerca-campo input::-webkit-search-cancel-button { display: none; }
.cerca-nota { font-size: 12.5px; color: var(--faint); margin: 0 0 16px; }
.esito {
  display: block; width: 100%; text-align: left; background: transparent;
  border: none; border-bottom: 1px solid var(--line-soft); padding: 13px 4px;
  cursor: pointer; transition: background .13s ease;
}
.esito:hover { background: var(--accent-soft); }
.esito-t { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.esito-s { font-size: 13px; color: var(--muted); line-height: 1.5; }
.esito-s mark { background: rgba(1,255,1,.30); color: var(--accent-ink); padding: 0 2px; border-radius: 3px; }
.esito-m { font-size: 11px; color: var(--faint); margin-top: 5px; }

/* ══ messaggi ════════════════════════════════════════════════════════════ */
.msg { margin-bottom: 28px; }
.msg-user { display: flex; justify-content: flex-end; }
/* Tonda e grigia, non col velo del marchio e la coda: il verde e' il colore delle
   FONTI e dei comandi: usarlo anche per la domanda gli toglieva significato.
   Stretta al 58%: una domanda lunga quanto la risposta le contende la pagina,
   e qui a contare e' la risposta. */
.bubble-user {
  background: var(--sunk); color: var(--ink);
  border: 1px solid transparent; border-radius: 18px;
  padding: 9px 13px; font-size: 13px; line-height: 1.6; max-width: 58%;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.bubble-user .att {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  color: var(--accent-dark); margin-bottom: 7px; font-weight: 550;
  background: transparent; border: none; padding: 0; cursor: pointer;
  font-family: inherit; text-align: left;
}
.bubble-user .att:hover { text-decoration: underline; }
.bubble-user .att .material-symbols-outlined { font-size: 15px; }

/* Corpo piccolo e nero pieno, con molta aria fra i paragrafi: il testo pesa
   meno a schermo ma ogni blocco resta staccato dal successivo. Il colore e'
   `--ink` e non `--ink-2` perche' a 13px un inchiostro tenue diventa grigio. */
.body { font-size: 13px; line-height: 1.58; color: var(--ink); overflow-wrap: break-word; }
.body h3 {
  /* A bastoni, non piu' graziati: col corpo del testo sceso a 13px il
     contrasto fra i due caratteri diventava un salto, e il titolo sembrava
     appartenere a un altro documento. Lo stacco lo fa la MISURA — 21 contro
     13 — non la famiglia. */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 21px; font-weight: 600; color: var(--ink);
  margin: 30px 0 8px; letter-spacing: -.015em;
}
.body h3:first-child { margin-top: 0; }
.body p { margin: 0 0 22px; }
.body ul, .body ol { margin: 0 0 22px; padding-left: 22px; }
.body li { margin: 5px 0; }
.body strong { font-weight: 650; color: var(--ink); }
.body em { font-style: italic; }
.body code {
  background: var(--sunk); padding: 1.5px 5px; border-radius: 5px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 13px;
}
.body blockquote {
  margin: 0 0 22px; padding: 2px 0 2px 15px; border-left: 2.5px solid var(--accent-ink);
  color: var(--muted); font-style: italic;
}
.body hr { border: none; border-top: 1px solid var(--line); margin: 20px 0; }

.table-wrap { overflow-x: auto; margin: 0 0 15px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.body table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
/* Senza righe: i filetti in una tabella di tre colonne facevano griglia, e
   una griglia dentro un parere legge come un modulo. Allineamento e aria
   bastano a tenere le colonne. */
.body th, .body td { padding: 9px 13px; text-align: left; vertical-align: top; border-bottom: 0; }
.body th {
  font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); background: var(--panel); white-space: nowrap;
}
.body tbody tr:last-child td { border-bottom: none; }
.body td strong { white-space: nowrap; }

.art-ref {
  color: var(--accent-dark); font-weight: 550; cursor: pointer; white-space: nowrap;
  background: none; border: 0; padding: 0; font-size: inherit; font-family: inherit;
  border-bottom: 1px dashed rgba(0,66,0,.45);
  transition: background .14s ease, border-color .14s ease;
}
.art-ref:hover { background: var(--accent-soft); border-bottom-style: solid; }

/* ══ stato di lavorazione ════════════════════════════════════════════════ */
/* La riga di lavoro: nessun riquadro, nessun bordo. Mentre si aspetta in
   pagina deve muoversi UNA cosa sola, e deve sembrare respiro — non un
   componente. Il riquadro bianco col filo attorno faceva sembrare l'attesa un
   oggetto da guardare invece di un momento da attraversare. */
.status {
  display: inline-flex; align-items: center; gap: 10px; font-size: 13px;
  color: var(--muted); background: none; border: 0; padding: 2px 0;
  margin-bottom: 6px;
}
/* ══ i due punti in orbita ════════════════════════════════════════════════
   Partono ai capi di una diagonale — uno in alto a destra, uno in basso a
   sinistra — si uniscono al centro, girano, e si riaprono sull'altra: alto a
   sinistra e basso a destra. Poi da capo, all'infinito.

   Un contenitore che ruota, due punti che scorrono lungo il suo asse. La
   rotazione e' di 180° per ciclo: a fine giro la figura e' identica a com'era
   all'inizio — i due punti si sono scambiati di posto, ma a schermo non c'e'
   nessun salto alla ripetizione.

   Prima erano sei punti fermi, tre accesi per volta: una posa si spegneva e
   l'altra si accendeva, e fra le due la casella restava vuota per ~70ms. Non
   era movimento, era alternanza — e quel buco si sentiva come uno scatto. Qui
   il movimento e' continuo, quindi il momento in cui non c'e' niente non
   esiste.

   Tutto in `transform`: e' fra le proprieta' che il browser compone sul thread
   grafico, quindi l'animazione non ridisegna niente e non pesa sulla risposta
   che sta arrivando sotto.

   Il ciclo e' di 4 secondi — lento apposta: l'attesa qui dura minuti, e un
   indicatore che corre la fa sembrare piu' lunga. */
.beat {
  position: relative; display: inline-block; width: 16px; height: 16px;
  flex-shrink: 0;
  --giro: 4s;
  --r: 5.2px;
}
.beat .asse { position: absolute; inset: 0; }
.beat i {
  position: absolute; top: 50%; left: 50%;
  width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
  border-radius: 50%; background: var(--accent);
}
/* Le due forme del verde, le stesse di tutto il foglio: l'acceso e il cupo.
   Due punti identici sarebbero due punti; cosi' si vede che si SCAMBIANO, non
   che lampeggiano. E il cupo tiene su la figura sul fondo bianco, dove
   l'acceso da solo sarebbe un'ombra di colore. */
.beat i.b { background: var(--accent-ink); }
@media (prefers-reduced-motion: no-preference) {
  .beat .asse { animation: assoOrbita var(--giro) linear infinite; }
  .beat i.a { animation: respiroA var(--giro) ease-in-out infinite; }
  .beat i.b { animation: respiroB var(--giro) ease-in-out infinite; }
}
/* Senza animazioni la figura resta ferma e APERTA, non invisibile: un
   indicatore che sparisce e' peggio di uno immobile. */
@media (prefers-reduced-motion: reduce) {
  .beat .asse { transform: rotate(-45deg); }
  .beat i.a { transform: translateX(5.2px); }
  .beat i.b { transform: translateX(-5.2px); }
}
@keyframes assoOrbita {
  from { transform: rotate(-45deg); }
  to   { transform: rotate(135deg); }
}
@keyframes respiroA {
  0%, 6%    { transform: translateX(var(--r)); }
  25%       { transform: translateX(0); }
  44%, 56%  { transform: translateX(var(--r)); }
  75%       { transform: translateX(0); }
  94%, 100% { transform: translateX(var(--r)); }
}
@keyframes respiroB {
  0%, 6%    { transform: translateX(calc(var(--r) * -1)); }
  25%       { transform: translateX(0); }
  44%, 56%  { transform: translateX(calc(var(--r) * -1)); }
  75%       { transform: translateX(0); }
  94%, 100% { transform: translateX(calc(var(--r) * -1)); }
}
.status .q { color: var(--faint); font-style: italic; }

/* Sul telefono la riga che dice cosa sto facendo — «Cerco in banca dati…»,
   «Leggo la motivazione…» — e' l'unica cosa che si muove mentre si aspetta, e
   a 13px si legge male tenendo il telefono in mano. Cresce SOLO qui: da
   desktop resta com'era, dove sta accanto a una risposta larga e non deve
   prendersi la scena. */
@media (max-width: 560px) {
  .status { font-size: 15px; gap: 11px; }
  .status .q { font-size: 14px; }
}

.alert {
  border: 1px solid rgba(192,57,43,.25); background: var(--red-bg); color: var(--red);
  border-radius: 12px; padding: 12px 15px; font-size: 13.5px; line-height: 1.55;
}

/* ══ domanda strutturata ═════════════════════════════════════════════════ */
.ask { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.ask .q { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 11px; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt {
  background: #fff; border: 1px solid var(--accent-ink); color: var(--accent-dark);
  border-radius: 999px; padding: 8px 15px; font-size: 13px; font-weight: 550;
  cursor: pointer; transition: background .15s ease;
}
.opt:hover { background: var(--accent-soft); }

/* ══ l'atto redatto ══════════════════════════════════════════════════════ */
.atto {
  margin: 20px 0 4px; border: 1px solid var(--line); border-radius: 14px;
  background: #fff; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.atto-top {
  display: flex; align-items: center; gap: 9px; padding: 12px 15px;
  border-bottom: 1px solid var(--line); background: var(--panel);
}
.atto-top .material-symbols-outlined { font-size: 18px; color: var(--accent-ink); flex-shrink: 0; }
.atto-t {
  font-size: 13px; font-weight: 600; color: var(--ink); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.atto-az { display: flex; gap: 7px; flex-shrink: 0; }
.atto-dl {
  border: 1px solid var(--accent-ink); background: #fff; color: var(--accent-dark);
  border-radius: 999px; padding: 6px 13px; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: background .15s ease; white-space: nowrap;
}
.atto-dl:hover:not(:disabled) { background: var(--accent-soft); }
.atto-dl:disabled { opacity: .55; cursor: default; }
.atto-wip { font-size: 11.5px; color: var(--faint); font-style: italic; }
/* Il testo dell'atto in graziato: e' un documento, non un messaggio di chat. */
.atto-body {
  padding: 28px 32px 32px; font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-optical-sizing: auto; font-size: 14px; line-height: 1.85; color: var(--ink-2);
  max-height: 560px; overflow-y: auto; text-align: justify; hyphens: auto;
}
.atto-body p { margin: 0 0 11px; }
.atto-body .atto-h {
  text-align: center; font-weight: 600; color: var(--ink);
  margin: 20px 0 13px; letter-spacing: .015em;
}
/* Titolo di clausola in un contratto: a sinistra e in grassetto, come nel file
   scaricato (`src/atti.py`). Le due rese vanno tenute allineate: se cambia una
   regola di qua, va cambiata anche di la'. */
.atto-body .atto-cl { font-weight: 650; text-align: left; margin: 16px 0 5px; }
.atto-body .atto-h:first-child { margin-top: 0; }
.atto-body .atto-c { text-align: center; margin-top: -6px; color: var(--muted); }
.atto-body .atto-n { padding-left: 16px; }
.atto-body .atto-li { padding-left: 22px; text-align: left; }
.atto-body .art-ref { white-space: nowrap; }

/* ══ fonti ═══════════════════════════════════════════════════════════════ */
.fonti { margin-top: 18px; }
/* Un filetto sopra, non una pillola piena: in fondo a un parere la pillola
   grigia era un secondo blocco pieno dopo la tabella, e chiudeva la pagina con
   un peso che l'elenco delle fonti non ha. La riga di separazione dice la
   stessa cosa — «qui finisce il parere, sotto ci sono le fonti» — senza
   aggiungere una superficie. */
.fonti-bar {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: none; border: none; border-top: 1px solid var(--line);
  border-radius: 0; padding: 11px 2px; cursor: pointer; color: var(--ink-2);
  font-size: 13px; transition: color .14s ease;
}
.fonti-bar:hover { background: none; color: var(--accent-ink); }
/* ── «ricontrollo delle fonti» ───────────────────────────────────────────────
   La risposta e' finita e la chat e' libera; quello che gira e' il controllo.
   Sta dentro la barra delle fonti perche' e' di quelle che parla, e perche' li'
   il collega la ritrova quando torna a guardare la risposta.

   Tenue di proposito: non e' un avviso, e' una nota di servizio. Se pesasse
   quanto un errore, chi legge si fermerebbe ad aspettarla — cioe' esattamente
   quello che questa modifica esiste per non fargli fare. */
.ricontrollo {
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
  font-size: 11.5px; color: var(--faint); white-space: nowrap;
}
/* Quando la barra delle fonti non c'e' ancora, la targhetta si tiene una riga
   sua: senza, sparirebbe proprio nei primi secondi del controllo, che sono
   quelli in cui il collega si chiede cosa stia succedendo. */
.ricontrollo-riga { margin: 10px 0 0; }
.ricontrollo-riga .ricontrollo { margin-left: 0; }
.ric-giro {
  width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0;
  border: 1.6px solid rgba(0,66,0,.22); border-top-color: var(--accent-ink);
}
@media (prefers-reduced-motion: no-preference) {
  .ric-giro { animation: ricGira 1s linear infinite; }
}
/* Senza animazioni resta un anello fermo, non un buco: dice comunque «c'e' una
   cosa in corso», che e' l'informazione. */
@keyframes ricGira { to { transform: rotate(360deg); } }
@media (max-width: 560px) {
  .ricontrollo span { display: none; }
}
.fonti-bar .material-symbols-outlined { font-size: 17px; color: var(--accent-ink); flex-shrink: 0; }
.fonti-l { font-weight: 550; }
.fonti-c { color: var(--faint); font-size: 12.5px; flex: 1; text-align: left; }
.fonti-ch { transition: transform .18s ease; color: var(--muted) !important; }
.fonti.aperta .fonti-ch { transform: rotate(180deg); }
.fonti-corpo { padding: 12px 2px 0; }
.fonti-g { display: block; margin: 12px 0 7px; }
.fonti-g:first-child { margin-top: 0; }

.src {
  display: block; width: 100%; text-align: left; background: #fff;
  border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px;
  margin-bottom: 7px; cursor: pointer; text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.src:hover { border-color: var(--accent-ink); box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.src-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.src-head .material-symbols-outlined { font-size: 17px; color: var(--accent-ink); flex-shrink: 0; }
.src-tag {
  font-size: 10.5px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent-dark); background: var(--accent-soft); padding: 2.5px 8px; border-radius: 999px;
}
/* ── la bolla: da dove viene questo paragrafo ────────────────────────────── */
/* Sta SOTTO il paragrafo, non dentro: non deve spezzare la lettura. Piccola e
   spenta finché non la si guarda — chi legge di filato non la vede, chi
   controlla ce l'ha esattamente dove serve. */
.bolla {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin: -4px 0 13px; padding-left: 1px;
}
.bolla-f {
  display: inline-flex; align-items: center; gap: 5px;
  max-width: 100%; padding: 3px 9px 3px 7px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg); color: var(--faint);
  font: inherit; font-size: 11.5px; line-height: 1.5; cursor: pointer;
  transition: color .14s ease, border-color .14s ease, background .14s ease;
}
.bolla-f span:last-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 30ch;
}
.bolla-f .material-symbols-outlined { font-size: 14px; flex-shrink: 0; }
.bolla-f:hover {
  color: var(--accent-dark); border-color: var(--accent-ink);
  background: var(--accent-soft);
}

/* ── la traccia dell'agente di ricerca ───────────────────────────────────── */
/* Una rotella che gira dice «aspetta». Questa dice cosa sta facendo: quali
   parole cerca, quante pronunce trova, quante ne scarta e perché. È la stessa
   cosa che un avvocato chiederebbe a un praticante mandato in biblioteca — e
   resta in pagina a risposta finita, perché è su quello che si regge quanto ha
   appena letto. */
/* Niente riquadro nemmeno qui: e' una riga di servizio sopra la risposta, non
   un pannello. Il bordo e il fondo grigio la facevano pesare quanto il parere
   che sta sotto. */
.agente { margin: 2px 0 12px; padding: 0; border: 0; background: none; }
/* Mentre si lavora la riga della traccia E' la riga di lavoro: stessi punti,
   l'ultima operazione fatta, e si apre. Nasconderla durante l'attesa lasciava
   il collega senza niente su cui cliccare proprio nei minuti in cui il lavoro
   sta avvenendo — ed era la cosa che aveva chiesto di poter guardare. */
.agente.lavora .agente-giro { display: none; }
.agente:not(.lavora) .beat { display: none; }
/* La testa e' insieme riga di stato e pulsante: porta le due classi, e il
   layout lo comanda il pulsante (a tutta larghezza, cosi' «N passi» e la
   freccia stanno a destra). Senza questa, `.status` la lasciava inline-flex
   e il conteggio finiva appiccicato al testo. */
.status.agente-t { display: flex; width: 100%; margin-bottom: 0; }
/* I secondi e la query stanno nella testa, fra l'etichetta e il conteggio. */
.status.agente-t .q { margin-left: 6px; }
/* Il conteggio non si prende lo spazio quando e' vuoto (primi secondi). */
.agente-n:empty { display: none; }
/* L'esito colora il punto in testa, senza aggiungere una riga: fondata, con
   riserva, non trovata. */
.agente[data-esito="fondata"] .agente-giro { background: #1a7f5a; }
.agente[data-esito="parziale"] .agente-giro,
.agente[data-esito="assente"] .agente-giro { background: var(--faint); }
.agente[data-esito="fallita"] .agente-giro { background: #a3341f; }
/* La testa e' un comando, non un'insegna: ci si clicca per vedere i passi. */
.agente-t {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: transparent; border: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--ink-2); text-align: left;
}
.agente-t:hover { color: var(--ink); }
.agente-t:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 6px; }
.agente-n { margin-left: auto; font-size: 11.5px; color: var(--faint); }
.agente-frec {
  font-size: 18px; color: var(--faint); flex-shrink: 0;
  transition: transform .18s cubic-bezier(.22,1,.36,1);
}
.agente-t[aria-expanded="true"] .agente-frec { transform: rotate(180deg); }
/* Il riquadro sta QUI, non sul genitore: chiuso e' una riga nuda, aperto e'
   un pannello. Togliendo il fondo grigio dalla riga si era portato via anche
   il contenitore dei passi, e la traccia aperta finiva addosso alla risposta
   senza niente che la separasse. */
.agente-corpo {
  margin-top: 10px; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--sunk);
}
.agente-corpo[hidden] { display: none; }

/* L'anello. Un cerchio di sfumatura con il centro ritagliato: gira liscio, non
   ha bordi spezzati come i cerchietti fatti col `border`, e costa una regola.
   Da fermo diventa un punto pieno del colore d'accento: il lavoro e' finito e
   la traccia resta li' da aprire. */
.agente-giro {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent);
}
/* (L'anello che girava e' stato tolto: da quando la traccia resta nascosta
   durante il lavoro, quell'animazione non la vedeva nessuno. Il punto in
   testa ora dice l'ESITO col colore, che e' un'informazione.) */
.agente-p {
  font-size: 12.5px; line-height: 1.55; color: var(--ink-2);
  padding: 2px 0 2px 14px; position: relative;
}
.agente-p::before {
  content: ''; position: absolute; left: 3px; top: 10px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent-ink); opacity: .55;
}
.agente-p.a-vaglio::before { background: #8a6a1f; }
.agente-p.a-leggo::before  { background: #2f6b4f; }
/* I due passi che valgono la promessa del rimborso: le norme lette una per
   una prima di rispondere, e il parere riletto contro le fonti dopo. Colore
   proprio perche' il collega li distingua dal rumore della ricerca. */
.agente-p.a-norme::before     { background: #2f5f8a; }
.agente-p.a-ragiono::before   { background: #5f4f8a; }
.agente-p.a-rilettura::before { background: #8a2f4f; }
/* Una norma tenuta, col motivo per cui e' stata tenuta. Ha un rientro suo
   perche' e' un elenco dentro un passo, non una nota a margine. */
.agente-norma {
  display: block; color: var(--ink-2); font-size: 11.5px;
  margin-top: 1px; padding-left: 10px; border-left: 2px solid var(--line);
}
.agente-norma b { color: var(--ink); font-weight: 600; }
.agente-perche {
  display: block; color: var(--muted); font-size: 11.5px; font-style: italic; margin-top: 1px;
}
@media (prefers-reduced-motion: no-preference) {
  .agente-p { animation: agenteEntra .18s ease both; }
  @keyframes agenteEntra { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; } }
}

/* ── l'esito del controllo, accanto alle fonti ───────────────────────────── */
/* Una bolla diceva soltanto DA DOVE viene il paragrafo. Adesso dice anche se
   quel paragrafo, nella fonte che richiama, c'e' davvero: il server apre il
   testo, cerca il passaggio e confronta i numeri. Tre stati e tre colori, ma il
   verde e' volutamente tenue — «riscontrato» vuol dire «sta scritto li'», non
   «ha ragione», e un bollino trionfale prometterebbe la seconda cosa. */
.bolla-esito {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px 3px 7px; border-radius: 999px; cursor: pointer;
  border: 1px solid transparent; font: inherit; font-size: 11.5px; line-height: 1.5;
}
.bolla-esito .material-symbols-outlined { font-size: 14px; flex-shrink: 0; }
.bolla-esito.ok  { color: #2f6b4f; background: #eef6f1; border-color: rgba(47,107,79,.18); }
.bolla-esito.par { color: #8a6a1f; background: #fbf5e6; border-color: rgba(138,106,31,.18); }
.bolla-esito.ko  { color: #a33a2c; background: #fbeeec; border-color: rgba(163,58,44,.20); }
.bolla-esito.neu { color: var(--muted); background: var(--panel); border-color: var(--line); }
.bolla-esito:hover { filter: brightness(.97); }

/* Il passaggio: le parole della fonte su cui il paragrafo poggia, leggibili
   senza cambiare pagina. E' la differenza fra una fonte citata e una fonte
   consultabile — l'intera ragione per cui questo prodotto esiste. */
.bolla-passaggio {
  flex-basis: 100%; margin: 6px 0 2px; padding: 9px 12px;
  border-left: 2px solid var(--line); background: var(--sunk);
  border-radius: 0 8px 8px 0;
}
.bolla-passaggio .pass-da {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--faint); margin-bottom: 4px;
}
.bolla-passaggio .pass-testo { font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.bolla-passaggio .pass-vuoto { color: var(--muted); font-style: italic; }

/* ── la scheda di un ATTO ────────────────────────────────────────────────── */
/* Non e' un articolo: non ha un testo da aprire in pagina, ha un'identita' e
   un rimando alla fonte ufficiale. Il numero del decreto sta in testa, perche'
   e' quello che il collega ha appena letto nella risposta. */
/* ── l'indice di un atto, dentro il pannello ─────────────────────────────── */
.atto-scope { font-size: 12.5px; color: var(--ink-2); margin: 0 0 12px; line-height: 1.5; }
.atto-cerca input {
  width: 100%; font: inherit; font-size: 16px; padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
}
.atto-cerca input:focus { outline: none; border-color: var(--accent-ink); }
.atto-conta { font-size: 11.5px; color: var(--faint); margin: 8px 0 6px; }
.atto-indice { display: flex; flex-direction: column; gap: 2px; }
.atto-voce {
  display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left;
  background: transparent; border: none; border-radius: 8px; padding: 8px 10px;
  cursor: pointer; font: inherit; font-size: 13px; color: var(--ink-2);
  transition: background .12s ease;
}
.atto-voce:hover { background: rgba(0,0,0,.04); }
.atto-voce b { color: var(--ink); font-weight: 600; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.atto-voce span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.src-atto .src-title { font-variant-numeric: tabular-nums; }
.src-atto-t { font-size: 12px; color: var(--ink-2); line-height: 1.4; margin-top: 2px; }

.src-abrog { background: var(--red-bg); color: var(--red); }
.src-storico { background: #f3ead8; color: #8a6212; }
.src-date { font-size: 11.5px; color: var(--faint); margin-left: auto; flex-shrink: 0; }
.src-title {
  font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.42;
  margin-bottom: 4px; overflow-wrap: anywhere;
}
/* Il marcatore del controllo dentro la prosa: ambra, un filo piu' piccolo, e
   niente sfondo. Deve farsi trovare da chi scorre e non deve trasformare il
   parere in una pagina di allarmi. */
.marca {
  color: #8a6a1f; font-size: .92em; font-weight: 550;
  white-space: nowrap;
}
.src-avv {
  display: flex; align-items: center; gap: 4px; margin-top: 7px;
  font-size: 11px; color: var(--faint);
}
.src-avv .material-symbols-outlined { font-size: 13px; }
.src-snip {
  font-size: 12.5px; color: var(--muted); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ══ pannello della fonte ════════════════════════════════════════════════ */
.drawer-bg {
  position: fixed; inset: 0; background: rgba(0,66,0,0.20); z-index: 90;
  opacity: 0; pointer-events: none; transition: opacity .22s ease; backdrop-filter: blur(14px);
}
.drawer-bg.on { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; height: 100dvh; width: min(620px, 100vw);
  background: #fff; border-left: 1px solid var(--line); z-index: 91;
  transform: translateX(100%); transition: transform .26s cubic-bezier(.22,1,.36,1);
  display: flex; flex-direction: column; box-shadow: -18px 0 44px rgba(0,0,0,.10);
}
.drawer.on { transform: none; }
.drawer-top {
  padding: 18px 22px 15px; border-bottom: 1px solid var(--line); flex-shrink: 0;
  display: flex; align-items: flex-start; gap: 12px;
}
.drawer-top .meta { flex: 1; min-width: 0; }
.drawer-top h3 {
  font-family: 'Fraunces', Georgia, serif; font-optical-sizing: auto;
  margin: 5px 0 0; font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em;
}
.icon-btn {
  border: none; background: transparent; color: var(--muted); cursor: pointer;
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  flex-shrink: 0; transition: background .14s ease;
}
.icon-btn:hover { background: rgba(0,0,0,.055); color: var(--ink); }
.drawer-body { flex: 1; overflow-y: auto; padding: 20px 22px 34px; }
.drawer-body .comma { margin-bottom: 13px; }
.drawer-body .comma-n {
  font-size: 10.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 3px;
}
.drawer-text { font-size: 14.5px; line-height: 1.78; color: var(--ink-2); white-space: pre-wrap; }
.drawer-foot {
  flex-shrink: 0; border-top: 1px solid var(--line); padding: 13px 22px;
  display: flex; align-items: center; gap: 10px; background: var(--panel);
}
.link-out {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
  color: var(--accent-dark); text-decoration: none; padding: 8px 14px;
  border: 1px solid var(--accent-ink); border-radius: 999px; transition: background .14s ease;
}
.link-out:hover { background: var(--accent-soft); }
.link-out .material-symbols-outlined { font-size: 16px; }
.drawer-foot .note { font-size: 11.5px; color: var(--faint); margin-left: auto; text-align: right; }

/* ══ composer ════════════════════════════════════════════════════════════ */
/* Il velo sfuma in dieci punti percentuali invece di ventidue: il testo
   sparisce piu' vicino al campo, e fra parere e comando resta meno vuoto. */
.dock { flex-shrink: 0; background: linear-gradient(to bottom, rgba(255,255,255,0), var(--bg) 10%); padding: 8px 24px 10px; }
/* Larga quanto la colonna del testo, anzi venti pixel di piu' (680 contro
   660): il campo si allinea a cio' che si e' appena letto invece di stare
   rientrato. La regola di prima diceva l'opposto — «piu' stretta, se no
   sembra un modulo» — ed era vera quando la colonna era 790; con la colonna
   a 660 un campo da 600 sembrava solo disallineato. */
.dock-inner { max-width: 680px; margin: 0 auto; padding: 0 32px; }
.attachments { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 9px; }
/* ══ allegati ═══════════════════════════════════════════════════════════════
   Il documento e' la cosa su cui il parere si fonda: nella riga sopra il campo
   e dentro il messaggio deve avere il peso di un oggetto, non di un'etichetta.
   Il colore dice il genere prima che si legga il nome. */
.g-pdf .chip-ic, .att.g-pdf .att-ic { background: #fdeceb; color: #b3261e; }
.g-img .chip-ic, .att.g-img .att-ic { background: var(--accent-soft); color: var(--accent-ink); }
.g-word .chip-ic, .att.g-word .att-ic { background: #eaeffb; color: #2b579a; }
.g-doc .chip-ic, .att.g-doc .att-ic { background: rgba(0,0,0,.05); color: var(--muted); }

.chip-ic {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: grid; place-items: center;
}
.chip-ic .material-symbols-outlined { font-size: 17px; }
.chip-ant {
  width: 30px; height: 30px; border-radius: 8px; object-fit: cover; flex-shrink: 0;
  background: var(--sunk);
}
.chip-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.chip-t .sz { font-size: 11px; }

/* Mentre sale: una barretta che scorre sotto la chip. Non e' una percentuale —
   il caricamento e' un solo POST e la percentuale non la sappiamo — ma dice
   «sta succedendo», che e' l'informazione che serve. */
.chip.busy { position: relative; overflow: hidden; }
.chip.busy::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  background-size: 50% 100%; background-repeat: no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  .chip.busy::after { animation: chipSale 1.1s ease-in-out infinite; }
}
@keyframes chipSale {
  from { background-position: -60% 0; }
  to   { background-position: 160% 0; }
}
/* Non riuscito: resta, rossa, col motivo. Sparire e' peggio — non si saprebbe
   se il file e' partito o no. */
.chip.rotto { border-color: #f2c4c0; background: #fdf5f4; }
.chip.rotto .sz { color: #b3261e; }
.att-avviso {
  font-size: 12px; color: var(--muted); background: var(--sunk);
  border-radius: 8px; padding: 6px 10px; margin-bottom: 8px;
}

/* La scheda dentro il messaggio inviato. */
.att-lista { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.att {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: rgba(255,255,255,.55); border: 1px solid rgba(0,0,0,.07);
  border-radius: 11px; padding: 7px 9px; cursor: pointer; text-align: left;
  transition: background .14s ease, border-color .14s ease;
}
.att:hover { background: #fff; border-color: rgba(0,0,0,.14); }
.att-ic {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  display: grid; place-items: center;
}
.att-ic .material-symbols-outlined { font-size: 18px; }
.att-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.att-n {
  font-size: 12.5px; color: var(--ink); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.att-e { font-size: 11px; color: var(--muted); }
.att-giu { margin-left: auto; font-size: 17px; color: var(--faint); flex-shrink: 0; }
.att:hover .att-giu { color: var(--accent-ink); }

/* ══ la zona di rilascio ════════════════════════════════════════════════════
   Copre la pagina intera: chi trascina non mira a un riquadro, lascia cadere
   dove sta guardando. */
.rilascio {
  position: fixed; inset: 0; z-index: 120; display: grid; place-items: center;
  padding: 26px; background: rgba(251,251,252,.72);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.rilascio[hidden] { display: none; }
.rilascio-cornice {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 40px 52px; border-radius: 20px; text-align: center;
  border: 2px dashed rgba(0,66,0,.45); background: rgba(255,255,255,.75);
  box-shadow: 0 24px 60px rgba(0,66,0,.13);
  color: var(--ink);
}
.rilascio-cornice .material-symbols-outlined { font-size: 38px; color: var(--accent-ink); }
.rilascio-cornice b { font-size: 15px; font-weight: 600; }
.rilascio-nota { font-size: 12px; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .rilascio-cornice { animation: rilascioSu .18s cubic-bezier(.22,1,.36,1) both; }
}
@keyframes rilascioSu {
  from { transform: scale(.97); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
/* Mentre si trascina niente si seleziona sotto: il testo evidenziato per
   sbaglio resta li' dopo il rilascio. */
body.trascina { user-select: none; }

.chip {
  display: inline-flex; align-items: center; gap: 7px; background: #fff;
  border: 1px solid var(--line); border-radius: 10px; padding: 7px 9px 7px 11px;
  font-size: 12.5px; color: var(--ink-2); max-width: 265px;
}
.chip .material-symbols-outlined { font-size: 16px; color: var(--accent-ink); }
.chip .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip .sz { color: var(--faint); font-size: 11.5px; flex-shrink: 0; }
.chip button {
  border: none; background: transparent; color: var(--faint); cursor: pointer;
  padding: 1px; border-radius: 5px; display: grid; place-items: center;
}
.chip button:hover { color: var(--red); }
.chip.busy { opacity: .6; }

/* align-items: center — non flex-end. Con l'allineamento in fondo il "+", il
   selettore e il bottone di invio si appoggiavano alla base di una casella di
   testo piu' alta di loro, e in una riga sola sembravano tutti spostati in
   basso di qualche pixel. Al centro restano allineati fra loro sia con una
   riga sia con cinque. */
/* ── il campo di scrittura ───────────────────────────────────────────────────
   Il filo colorato attorno al campo prende i due colori del marchio: il verde
   acceso dell'accento e l'ardesia del logo (#202a35). E' un bordo SFUMATO, e in CSS
   un bordo non accetta una sfumatura: si dipinge lo sfondo dell'elemento con
   la sfumatura e si ritaglia la parte centrale con due `background-clip`
   sovrapposti — il bianco sul contenuto, la sfumatura sul bordo. Cosi' resta
   un solo elemento, senza pseudo-elementi che si mettono in mezzo ai clic.

   Da fermo e' appena percettibile. Prende colore quando il campo ha il fuoco,
   e si muove solo MENTRE la risposta si scrive: un'animazione che gira sempre
   e' un tic nervoso in fondo alla pagina, una che gira mentre si aspetta e'
   un'informazione. */
.composer {
  border: 1px solid transparent; border-radius: 22px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(100deg, rgba(32,42,53,.17), rgba(1,255,1,.20) 45%,
                            rgba(32,42,53,.14) 75%, rgba(1,255,1,.18)) border-box;
  box-shadow: 0 2px 10px rgba(16,24,32,.07);
  padding: 4px 6px; display: flex; align-items: center; gap: 4px;
  transition: box-shadow .15s ease, background .2s ease;
}
/* Col fuoco il FILO resta identico — scelta del collega: 20% a riposo e 20%
   col fuoco, il filo e' decorazione costante e non un segnale. Ma un comando
   senza NESSUN segno di fuoco lascia chi naviga da tastiera senza sapere dove
   si trova, quindi il segnale passa all'ombra: piu' profonda e tinta di verde.
   E' l'unica proprieta' che il collega non ha chiesto identica nei due stati. */
.composer:focus-within {
  box-shadow: 0 3px 16px rgba(0,66,0,.16);
}
/* Mentre scrive: il filo scorre. `background-position` si anima senza
   ridisegnare il testo dentro, quindi non costa niente al telefono. */
.dock.lavora .composer {
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(100deg, rgba(32,42,53,.5), rgba(1,255,1,.9) 25%,
                            rgba(32,42,53,.4) 50%, rgba(1,255,1,.9) 75%,
                            rgba(32,42,53,.5)) border-box;
  background-size: 100% 100%, 300% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .dock.lavora .composer { animation: filoScorre 3.2s linear infinite; }
}
@keyframes filoScorre {
  from { background-position: 0 0, 0% 50%; }
  to   { background-position: 0 0, 300% 50%; }
}
.composer textarea {
  flex: 1; border: none; outline: none; resize: none; background: transparent;
  font-size: 15px; line-height: 1.5; color: var(--ink); padding: 9px 6px; max-height: 190px;
}
.composer textarea::placeholder { color: var(--faint); }
.btn-icon {
  width: 40px; height: 40px; border-radius: 999px; border: none; cursor: pointer;
  display: grid; place-items: center; flex-shrink: 0; background: transparent;
  color: var(--muted); transition: background .14s ease, color .14s ease;
}
.btn-icon:hover:not(:disabled) { background: rgba(0,0,0,.05); color: var(--ink); }
/* Cerchio vuoto: contorno e freccia in accento, dentro trasparente. Su un
   campo bianco un disco pieno era la cosa piu' scura della schermata e si
   prendeva l'occhio prima del saluto; il contorno dice la stessa cosa senza
   gridarla. Col passaggio del mouse si riempie — allora si', e' il momento in
   cui lo si sta per premere. `border-box` e' globale, quindi il bordo non
   cambia la misura del cerchio. */
.btn-send {
  background: transparent; color: var(--accent-ink);
  border: 1.4px solid var(--accent-ink);
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.btn-send:hover:not(:disabled) { background: var(--accent); color: var(--su-accent); }
.btn-send:disabled {
  background: transparent; color: #c4c4ca; border-color: #dcdce1; cursor: default;
}
/* Mentre risponde lo stesso bottone ferma: rosso, per non confonderlo con l'invio. */
/* Fermare invece e' un'azione che va vista: li' il pieno serve. */
.btn-send.ferma { background: var(--red); color: #fff; border-color: var(--red); }
.btn-send.ferma:hover { background: #a53225; border-color: #a53225; }


/* Selettore della materia dentro il campo: al posto in cui Gemini tiene il
   modello, qui c'e' il ramo del diritto. */
.sel-materia {
  display: none; align-items: center; gap: 2px; flex-shrink: 0;
  background: transparent; border: none; border-radius: 999px;
  padding: 7px 9px 7px 12px; cursor: pointer;
  font-size: 12.5px; color: var(--muted); white-space: nowrap;
  transition: background .14s ease, color .14s ease;
}
/* Solo a colonna vuota: a conversazione iniziata la materia e' quella, e la
   dice il chip in testata. */
.main.vuota .sel-materia { display: inline-flex; }
.sel-materia:hover { background: var(--sunk); color: var(--ink); }
.sel-materia .material-symbols-outlined { font-size: 16px; }

/* ══ pagina della fonte ══════════════════════════════════════════════════ */
.page { max-width: 820px; margin: 0 auto; padding: 44px 26px 80px; }
.page-back {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
  color: var(--accent-dark); text-decoration: none; font-weight: 550; margin-bottom: 22px;
}
.page-back:hover { text-decoration: underline; }
.page h1 {
  font-family: 'Fraunces', Georgia, serif; font-optical-sizing: auto;
  font-size: 27px; font-weight: 600; letter-spacing: -.015em; line-height: 1.28; margin: 8px 0 14px;
}
.page-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.page-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 28px; box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.page-card h2 {
  font-size: 12px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 12px;
}
.page-card + .page-card { margin-top: 16px; }

/* ══ mobile ══════════════════════════════════════════════════════════════ */
.rail-velo {
  position: fixed; inset: 0; background: rgba(0,66,0,0.20); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); z-index: 79;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.rail-velo.on { opacity: 1; pointer-events: auto; }

@media (max-width: 900px) {
  .rail {
    position: fixed; inset: 0 auto 0 0; z-index: 80; width: var(--rail-w);
    transform: translateX(-100%); transition: transform .24s cubic-bezier(.22,1,.36,1);
    box-shadow: 14px 0 40px rgba(0,0,0,.12);
  }
  .rail.on { transform: none; }
  .rail.chiusa { width: var(--rail-w); }
  .rail-burger { display: none; }
  .top .burger-top { display: grid; }
  /* ── l'intestazione sul telefono ──────────────────────────────────────────
     Ci stavano hamburger, materia, «Passa al Pro» e «Accedi»: su uno schermo
     da 360 px si accavallavano. Adesso restano i comandi e in mezzo il
     marchio, posizionato in ASSOLUTO cosi' non contende lo spazio al resto —
     un elemento in flex si sarebbe spostato a ogni bottone che compare. */
  /* Sul telefono l'alone sta in BASSO, dietro il campo: e' li' che finisce
     lo sguardo e li' che si tocca. In alto, dove sul telefono c'e' subito
     l'intestazione, si sarebbe visto come una sbavatura sotto il marchio. */
  /* Le due macchie restano, ma la casella si stringe e scende: sul telefono
     il campo sta in basso, ed e' li' che finisce lo sguardo. Si cambia la
     CASELLA, non le percentuali dentro — quelle disegnano la figura. */
  .main.vuota::before {
    /* Sul telefono il campo sta IN BASSO, e l'alone deve abbracciare lui —
       non restare a mezz'aria fra il saluto e il campo, che e' dove finiva
       tenendo il centro della pagina. La casella e' anche piu' larga: su una
       cornice stretta le stesse percentuali concentrano il colore e la macchia
       si legge come un cerchio, non come un alone. */
    width: 560px; height: 600px; top: 80%;
  }
  /* Il campo occupa la riga: a pagina vuota sul telefono stringerlo lascia due
     margini vuoti e nessun guadagno. */
  /* ── da telefono il campo sta IN BASSO, anche a pagina vuota ─────────────
     Sul desktop il gruppo saluto+campo sta al centro come in un motore di
     ricerca. Sul telefono no: il pollice arriva in fondo, la tastiera si apre
     da li', e ogni applicazione di chat mette il campo dove sta la tastiera.
     Al centro sembrava una pagina di ricerca, non una conversazione.
     `margin-bottom: auto` sul dock e' quello che lo teneva al centro: si
     toglie, e il saluto resta appeso sopra grazie al `margin-top: auto` dello
     scroll. */
  .main.vuota .dock { margin-bottom: 0; }
  /* Il saluto si centra nello spazio libero invece di stare appiccicato al
     campo: con `margin-top: auto` da solo restava schiacciato in fondo. */
  .main.vuota .scroll { margin-top: auto; margin-bottom: auto; }
  .main.vuota .column { padding-bottom: 18px; }
  .main.vuota .dock-inner { max-width: none; padding: 0 4px; }
  .top { position: relative; }
  /* Accanto all'hamburger, non al centro: al centro era una filigrana che non
     si poteva toccare, e il nome del prodotto e' anche la via di casa. Stesso
     corpo, stesso peso e stesso colore del marchio nella barra laterale — e'
     lo stesso marchio, cambia solo dove sta quando la barra e' chiusa. */
  .top-marchio {
    /* `inline-flex` mangiava lo spazio fra «LexNova» e «Chat» — i nodi di solo
       spazio non sopravvivono a un contenitore flex — e a schermo si leggeva
       «LexNovaChat». `inline-block` lo tiene. */
    display: inline-block; margin-left: 2px;
    font-size: 13px; font-weight: 600; letter-spacing: -.02em;
    color: var(--ink); text-decoration: none; white-space: nowrap;
  }
  .top-marchio b { font-weight: 600; color: var(--accent-ink); }
  /* La materia la dice gia' la risposta: qui rubava la meta' della riga. */
  .column { padding: 22px 16px 32px; }
  .dock { padding: 8px 12px 14px; }
  .dock-inner { padding: 0 4px; }
  .top { padding: 11px 14px; }
  .tiles { grid-template-columns: 1fr; }
  .bubble-user { max-width: 92%; }
.atto-body { padding: 22px 18px 24px; }
  .pop { left: 12px; right: 12px; width: auto; }
  .pill-gratis { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}


/* ══ soglia: iscrizione e accesso ════════════════════════════════════════ */
/* Stessa lingua della chat — tela bianca, Kulim Park nei titoli, teal come
   unico accento — perche' chi si iscrive sta gia' guardando il prodotto: se la
   pagina cambia faccia sembra un altro sito. */
.soglia { min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); }
.soglia-top {
  flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 18px 24px;
}
.soglia-marchio {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  color: var(--ink); font-size: 15px; font-weight: 600; letter-spacing: -.02em;
}
.soglia-marchio img { width: 24px; height: 24px; border-radius: 6px; }
.soglia-marchio b { color: var(--accent-ink); font-weight: 600; }
.soglia-top .pill-gratis { margin-left: auto; }

.soglia-corpo { flex: 1; display: flex; align-items: center; justify-content: center; padding: 12px 22px 48px; }
.soglia-card { width: 100%; max-width: 430px; }

/* Il disegno del passo: al centro, sopra la barra di avanzamento e con
   un'altezza fissa. Senza altezza fissa il titolo si sposterebbe a ogni passo,
   perche' i quattro disegni non occupano lo stesso spazio. */
.passo-disegno {
  position: relative; height: 96px; margin-bottom: 22px;
}
.passo-disegno span {
  position: absolute; inset: 0; display: grid; place-items: center;
  opacity: 0; visibility: hidden; transition: opacity .3s ease;
}
.passo-disegno span.attivo { opacity: 1; visibility: visible; }
.passo-disegno .disegno { width: 116px; height: 92px; }
@media (prefers-reduced-motion: no-preference) {
  .passo-disegno span.attivo { animation: disegno-entra .42s cubic-bezier(.2,.9,.3,1) both; }
}

.passi { display: flex; gap: 6px; margin-bottom: 26px; }
.passi i {
  height: 3px; flex: 1; border-radius: 999px; background: var(--line);
  transition: background .28s ease;
}
.passi i.on { background: var(--accent); }

/* Tutti i passi occupano almeno quanto il piu' alto: la scheda e' centrata
   verticalmente, quindi senza questo il disegno e il titolo si spostavano di una
   decina di pixel a ogni "Continua" — sembrava un salto della pagina. */
.passo { display: none; min-height: 322px; }
.passo.attivo { display: block; animation: entra-passo .26s cubic-bezier(.2,.9,.3,1) both; }
@keyframes entra-passo { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }

.soglia-kicker {
  font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 10px;
}
.soglia-h {
  font-family: 'Kulim Park', 'Inter', sans-serif;
  font-size: 30px; font-weight: 500; letter-spacing: -.028em; line-height: 1.15;
  color: var(--ink); margin: 0 0 8px;
}
.soglia-sub { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0 0 26px; }

.campo { margin-bottom: 18px; }
.campo label {
  display: block; font-size: 12px; font-weight: 600; color: var(--muted);
  margin-bottom: 6px; letter-spacing: .01em;
}
.campo input {
  width: 100%; border: 1px solid var(--line); border-radius: 12px; background: #fff;
  padding: 12px 14px; font-size: 15px; font-family: inherit; color: var(--ink);
  outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.campo input:focus { border-color: var(--accent-ink); box-shadow: 0 0 0 3px var(--accent-soft); }
.campo input.sbagliato { border-color: var(--red); }
.campo input.sbagliato:focus { box-shadow: 0 0 0 3px var(--red-bg); }
.campo-pwd { position: relative; }
.campo-pwd input { padding-right: 46px; }
.occhio {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border: none; background: transparent; cursor: pointer;
  color: var(--faint); border-radius: 999px; display: grid; place-items: center;
}
.occhio:hover { background: var(--sunk); color: var(--ink); }
.occhio .material-symbols-outlined { font-size: 19px; }

.err { display: block; font-size: 12.5px; color: var(--red); margin-top: 6px; min-height: 1px; }
.err:empty { display: none; }
.err-generale { margin: 4px 0 14px; }
.aiuto { display: block; font-size: 12px; color: var(--faint); margin-top: 6px; }
.avviso {
  display: block; font-size: 12.5px; line-height: 1.5; color: #8a5a12;
  background: #fdf6e7; border: 1px solid rgba(180,83,9,.2); border-radius: 10px;
  padding: 9px 11px; margin-top: 8px;
}
.avviso:empty { display: none; }
/* Un errore scaccia l'aiuto: due righe sotto lo stesso campo si contraddicono. */
.campo .err:not(:empty) + .aiuto { display: none; }

.soglia-azioni { display: flex; gap: 10px; align-items: center; margin-top: 6px; }
.btn-pieno {
  flex: 1; background: var(--accent); color: var(--su-accent); border: none; border-radius: 999px;
  padding: 13px 22px; font-size: 14.5px; font-weight: 600; cursor: pointer;
  font-family: inherit; text-align: center; text-decoration: none;
  transition: background .15s ease;
}
.btn-pieno:hover:not(:disabled) { background: var(--accent-su); }
.btn-pieno:disabled { background: #c9ccce; cursor: default; }
.btn-piano {
  background: transparent; border: none; color: var(--muted); cursor: pointer;
  padding: 13px 16px; font-size: 14px; font-family: inherit; border-radius: 999px;
}
.btn-piano:hover { background: var(--sunk); color: var(--ink); }

.soglia-piede { margin: 26px 0 0; font-size: 12.5px; color: var(--faint); line-height: 1.7; }
.soglia-piede a { color: var(--accent-dark); font-weight: 600; text-decoration: none; }
.soglia-piede a:hover { text-decoration: underline; }

.soglia-centro { text-align: center; }
.soglia-centro .soglia-sub { max-width: 40ch; margin-left: auto; margin-right: auto; }
.soglia-centro .soglia-piede { text-align: center; }
.segno-mail {
  width: 58px; height: 58px; border-radius: 999px; margin: 0 auto 20px;
  display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink);
}
.segno-mail .material-symbols-outlined { font-size: 27px; }
.segno-ok { background: #e4f2ea; color: #2f6b4f; }
.segno-no { background: var(--red-bg); color: var(--red); }
.muro .disegno { margin: 0 auto 14px; width: 104px; height: 84px; }
.muro .scena { margin: 0 auto 14px; width: 108px; height: 86px; }
.cerca-vuoto { text-align: center; padding: 34px 0 10px; }
.cerca-vuoto .disegno { margin: 0 auto 14px; opacity: .9; }
.cerca-vuoto p { font-size: 13.5px; color: var(--faint); margin: 0; }
.ok-generale { font-size: 12.5px; color: #2f6b4f; margin: 10px 0 0; }
.ok-generale:empty { display: none; }

/* ── disegni ────────────────────────────────────────────────────────────── */
/* Le due variabili sono il contratto con gli SVG: linea in `currentColor`,
   pieni col velo, un solo dettaglio ambrato. Cambiarle qui ricolora tutto. */
.disegno {
  --velo: #e8ffe8;
  --tocco: #c07a1e;
  width: 118px; height: 94px; display: block; color: var(--accent-ink);
}
.disegno-centro { margin: 0 auto 18px; }
@keyframes disegno-entra {
  from { opacity: 0; transform: translateY(6px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* ── scene ──────────────────────────────────────────────────────────────── */
/* Stesse due variabili dei disegni, formato piu' largo: le scene stanno dove la
   pagina sarebbe bianca. Il movimento e' una comparsa e basta — un disegno che
   si muove di continuo, in un posto dove si lavora, dopo due minuti da' noia. */
.scena {
  --velo: #e8ffe8;
  --tocco: #c07a1e;
  width: 200px; height: 140px; display: block; color: var(--accent-ink);
}
.scena-piccola { width: 118px; height: 94px; }
@media (prefers-reduced-motion: no-preference) {
  .scena { animation: scena-entra .5s cubic-bezier(.2,.9,.3,1) both; }
  /* Il tratto ambrato si disegna da solo: e' il punto della scena, e vederlo
     comparire dopo il resto dice all'occhio dove guardare. */
  .scena [stroke="var(--tocco)"] {
    stroke-dasharray: 120; stroke-dashoffset: 120;
    animation: scena-traccia .9s .25s cubic-bezier(.4,0,.2,1) forwards;
  }
}
@keyframes scena-entra {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes scena-traccia { to { stroke-dashoffset: 0; } }

/* Archivio ancora vuoto: il disegno sta nella barra, quindi va tenuto piccolo. */
.rail-empty { text-align: center; }
.rail-empty .scena { width: 96px; height: 78px; margin: 10px auto 6px; opacity: .9; }
.rail.chiusa .rail-empty { display: none; }
.cerca-vuoto .scena { margin: 0 auto 14px; opacity: .9; }

/* ── spunte dei consensi ────────────────────────────────────────────────── */
/* Casella disegnata a mano: quella di sistema non si puo' colorare in teal ne'
   ingrandire, e su un modulo dove la spunta e' l'atto giuridico deve vedersi. */
.spunta {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  padding: 13px 14px; border: 1px solid var(--line); border-radius: 13px;
  margin-bottom: 10px; transition: border-color .15s ease, background .15s ease;
}
.spunta:hover { border-color: var(--accent-ink); background: var(--panel); }
.spunta input { position: absolute; opacity: 0; width: 0; height: 0; }
.spunta-box {
  width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line);
  flex-shrink: 0; margin-top: 1px; display: grid; place-items: center;
  background: #fff; transition: background .14s ease, border-color .14s ease;
}
.spunta-box .material-symbols-outlined {
  font-size: 15px; color: var(--su-accent); opacity: 0; transform: scale(.6);
  transition: opacity .14s ease, transform .14s ease;
}
.spunta input:checked + .spunta-box { background: var(--accent); border-color: var(--accent); }
.spunta input:checked + .spunta-box .material-symbols-outlined { opacity: 1; transform: none; }
.spunta input:focus-visible + .spunta-box { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.spunta-testo { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.spunta-testo a { color: var(--accent-dark); font-weight: 600; }
.spunta-nota { display: block; font-size: 12px; color: var(--faint); margin-top: 3px; }
.spunta.sbagliata { border-color: var(--red); background: var(--red-bg); }
.spunta-libera { border-style: dashed; }

/* ── pagina del piano Pro ───────────────────────────────────────────────── */
.soglia-larga .pro-card { width: 100%; max-width: 720px; }
.confronto { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 28px 0 26px; }
.confronto .col { border: 1px solid var(--line); border-radius: 16px; padding: 20px 20px 22px; }
.confronto .col-pro { border-color: var(--accent-ink); background: var(--accent-soft); }
.col-t { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.col-pro .col-t { color: var(--accent-dark); }
.col-tag { background: var(--accent); color: var(--su-accent); border-radius: 999px; padding: 2px 9px;
  font-size: 11px; letter-spacing: .04em; }
.confronto ul { margin: 0; padding: 0; list-style: none; }
.confronto li { position: relative; padding-left: 22px; margin-bottom: 11px;
  font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.confronto li::before { content: '—'; position: absolute; left: 0; color: var(--faint); }
.col-pro li::before { content: 'check'; font-family: var(--icone);
  font-variation-settings: var(--icone-tratto);
  font-size: 16px; color: var(--accent-ink); }
.pro-esito { display: flex; align-items: center; gap: 16px; margin-top: 24px;
  padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.pro-esito .disegno { width: 72px; height: 58px; flex-shrink: 0; }

/* ── pagina Pro ─────────────────────────────────────────────────────────── */
.pro-hero { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.pro-hero-t { min-width: 0; }
.pro-hero .scena { width: 220px; height: 154px; flex-shrink: 0; }
/* Il prezzo si legge prima del confronto: chi arriva qui vuole sapere quanto
   costa, e farglielo cercare in fondo alla pagina e' una scortesia.

   Scritto `.pro-card .pro-prezzo` per un motivo pratico: piu' in basso la
   scheda dell'abbonamento usa lo STESSO nome per il suo prezzo piccolo, e
   arrivando dopo nel foglio vinceva lei — il numero grande della pagina di
   vendita usciva a 15px. Due regole con lo stesso nome non si accorgono l'una
   dell'altra: qui la pagina si prende il suo contenitore. */
.pro-card .pro-prezzo { display: flex; align-items: baseline; gap: 8px; margin: 20px 0 2px; }
.pro-card .pro-prezzo b { font-family: 'Fraunces', Georgia, serif; font-size: 38px;
                font-weight: 600; color: var(--ink); letter-spacing: -.5px; }
.pro-card .pro-prezzo span { font-size: 14px; color: var(--faint); }
.pro-prezzo-nota { margin: 0; font-size: 12.5px; color: var(--faint); }
.pro-punti { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 4px 0 26px; }
.pro-punto { border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px 20px; }
.pro-punto .scena { width: 100%; height: auto; max-width: 200px; margin-bottom: 6px; }
.pro-punto h3 { margin: 8px 0 6px; font-size: 15px; font-weight: 600; color: var(--ink); }
.pro-punto p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.muro-prezzo { margin: 14px 0 0; font-size: 13px; color: var(--faint); }
.muro-prezzo b { color: var(--ink); }
@media (max-width: 720px) {
  .pro-hero { grid-template-columns: 1fr; }
  .pro-hero .scena { width: 180px; height: 126px; margin: 0 auto; }
  .pro-punti { grid-template-columns: 1fr; }
}
@media (min-width: 721px) and (max-width: 980px) {
  .pro-punti { grid-template-columns: 1fr 1fr; }
}
.pro-esito p { margin: 0; font-size: 14px; color: var(--ink-2); }
@media (max-width: 720px) { .confronto { grid-template-columns: 1fr; } }

/* ── il muro: compare quando un ospite prova a scrivere ─────────────────── */
.muro-bg {
  position: fixed; inset: 0; background: rgba(0,66,0,0.20); z-index: 100;
  opacity: 0; pointer-events: none; transition: opacity .22s ease; backdrop-filter: blur(14px);
}
.muro-bg.on { opacity: 1; pointer-events: auto; }
.muro {
  position: fixed; z-index: 101; left: 50%; top: 50%; transform: translate(-50%, -46%);
  width: min(430px, calc(100vw - 32px)); background: #fff; border-radius: 20px;
  border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0,0,0,.2);
  padding: 30px 30px 26px; text-align: center;
  opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .24s cubic-bezier(.2,.9,.3,1);
}
.muro.on { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }
.muro h2 {
  font-family: 'Kulim Park', 'Inter', sans-serif;
  font-size: 25px; font-weight: 500; letter-spacing: -.025em; color: var(--ink); margin: 0 0 10px;
}
.muro p { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0 0 8px; }
.muro .muro-cosa {
  text-align: left; margin: 20px 0 22px; padding: 16px 18px;
  background: var(--panel); border: 1px solid var(--line-soft); border-radius: 14px;
}
.muro .muro-cosa li {
  list-style: none; font-size: 13px; color: var(--ink-2); line-height: 1.5;
  padding-left: 24px; position: relative; margin-bottom: 9px;
}
.muro .muro-cosa li:last-child { margin-bottom: 0; }
.muro .muro-cosa li::before {
  content: 'check'; font-family: var(--icone);
  font-variation-settings: var(--icone-tratto); font-size: 16px;
  color: var(--accent-ink); position: absolute; left: 0; top: 0;
}
.muro-azioni { display: flex; flex-direction: column; gap: 9px; }
.muro-azioni .btn-pieno { flex: none; width: 100%; }
.muro-gia { font-size: 13px; color: var(--muted); }
.muro-gia a { color: var(--accent-dark); font-weight: 600; text-decoration: none; }
.muro-gia a:hover { text-decoration: underline; }
/* La stessa riga di rassicurazioni del pannello, ma dentro il muro: qui il
   collega sta pagando dentro un lavoro interrotto, e le tre domande che si fa
   prima di premere sono sempre quelle tre. */
.muro-fede { font-size: 11.5px; color: var(--faint); margin: 0; }

/* ── la cassa: si paga dentro l'app ───────────────────────────────────────
   Stessa grammatica del muro — velo verde, riquadro bianco, angoli larghi —
   ma il testo e' allineato a sinistra: qui non si legge un annuncio, si
   compila un modulo, e un modulo centrato si legge peggio.

   Dentro `#cassa-campi` monta Stripe con i suoi iframe: quello che possiamo
   accordare al marchio sta nell'`appearance` passato da `app.js`, non qui —
   un iframe non prende il nostro foglio di stile, ed e' esattamente il motivo
   per cui i numeri di carta stanno li' dentro. */
.cassa-bg {
  position: fixed; inset: 0; background: rgba(0,66,0,0.20); z-index: 110;
  opacity: 0; pointer-events: none; transition: opacity .22s ease;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.cassa-bg.on { opacity: 1; pointer-events: auto; }
.cassa {
  position: fixed; z-index: 111; left: 50%; top: 50%; transform: translate(-50%, -46%);
  width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 40px); overflow-y: auto;
  background: #fff; border-radius: 20px; border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(0,0,0,.2); padding: 28px 28px 24px;
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease, transform .24s cubic-bezier(.2,.9,.3,1);
}
.cassa.on { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }
.cassa-x { position: absolute; top: 10px; right: 10px; }
.cassa-tag { margin: 0 0 4px; font-size: 12.5px; color: var(--muted); }
.cassa-tag b { color: var(--accent-dark); font-weight: 600; }
.cassa h2 {
  font-family: 'Kulim Park', 'Inter', sans-serif; font-size: 26px; font-weight: 500;
  letter-spacing: -.025em; color: var(--ink); margin: 0 0 4px;
}
.cassa h2 b { font-family: 'Fraunces', Georgia, serif; font-weight: 600; }
.cassa-sub { font-size: 12.5px; color: var(--faint); line-height: 1.55; margin: 0 0 18px; }
.cassa-veloce { margin-bottom: 4px; }
.cassa-oppure {
  display: flex; align-items: center; gap: 10px; margin: 16px 0 14px;
  font-size: 11.5px; color: var(--faint);
}
.cassa-oppure::before, .cassa-oppure::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}
.cassa-campi { min-height: 54px; margin-bottom: 12px; }
.cassa-attesa { font-size: 13px; color: var(--faint); margin: 6px 0; }
.cassa .err { margin: 0 0 10px; }
.cassa .err:empty { display: none; }
.cassa .btn-pieno { width: 100%; }
.cassa-fede {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  margin: 12px 0 0; font-size: 11.5px; color: var(--faint);
}
.cassa-fede .material-symbols-outlined { font-size: 14px; }
#cassa-fatto { text-align: center; }
#cassa-fatto .disegno { margin: 0 auto 14px; width: 104px; height: 84px; }
#cassa-fatto p { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0 0 18px; }

/* ── il piano, nelle impostazioni ────────────────────────────────────────── */
/* Una scheda sola: targa del piano, percentuale, barra, una riga di spiegazione
   e il bottone. Prima era un elenco di righe tutte uguali e il piano non si
   distingueva dal resto delle impostazioni. */
.uso { border: 1px solid var(--line); border-radius: 14px; padding: 13px 14px 14px;
  background: var(--panel); }
.uso[hidden] { display: none; }
.uso-testa { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 0 0 10px; }
.uso-targa {
  display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px;
  background: var(--sunk); color: var(--muted);
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.uso.pro .uso-targa { background: var(--accent); color: var(--su-accent); }
.uso-testa b { color: var(--ink); font-size: 17px; font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.uso-barra { height: 6px; border-radius: 999px; background: var(--sunk); overflow: hidden; }
.uso-barra i { display: block; height: 100%; width: 0; border-radius: 999px;
  background: var(--accent); transition: width .4s cubic-bezier(.22,1,.36,1); }
.uso.pieno .uso-barra i { background: var(--red); }
.uso.pro .uso-barra i { background: linear-gradient(90deg, var(--accent), var(--accent-ink)); }
.uso-nota { font-size: 11.5px; color: var(--faint); margin: 10px 0 0; line-height: 1.5; }
/* La scadenza della settimana e' la didascalia dei tre riquadri qui sopra,
   non una nota nuova: sta attaccata a loro e non al paragrafo che segue. */
.sett-quando { font-size: 11.5px; color: var(--faint); margin: -6px 0 4px 2px; }

/* ── l'account, dentro le impostazioni ───────────────────────────────────────
   Quattro riquadri, uno per cosa: chi sei, l'email, la password, i
   dispositivi. Separati e non in un modulo unico, perche' sono quattro azioni
   indipendenti e ognuna ha il suo tasto: un «Salva» solo, in fondo, farebbe
   credere che mandi tutto insieme. */
/* Le voci: una riga per cosa, il modulo sotto quando si clicca. La riga dice
   gia' lo STATO — l'indirizzo, il numero, se il secondo fattore e' acceso —
   cosi' chi apre la scheda per controllare non deve aprire niente. */
.conto-voci { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.conto-voce {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 14px; border: 0; background: var(--panel); cursor: pointer;
  font: inherit; text-align: left; transition: background .14s ease;
  border-top: 1px solid var(--line-soft);
}
.conto-voci > .conto-voce:first-child { border-top: 0; }
.conto-voce:hover { background: var(--sunk); }
.conto-voce > .material-symbols-outlined { font-size: 19px; color: var(--accent-ink); }
.conto-voce-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.conto-voce-t b { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.conto-voce-t em {
  font-style: normal; font-size: 12px; color: var(--faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* La freccia non ruota: non si APRE una riga, ci si ENTRA. Una freccia che
   gira promette un accordion, ed e' un'altra cosa. */
.conto-ch { font-size: 18px; color: var(--faint); }
/* La voce che elimina si distingue prima di essere aperta: e' l'unica qui
   dentro che non si annulla. */
.conto-voce.pericolo > .material-symbols-outlined,
.conto-voce.pericolo .conto-voce-t b { color: var(--red); }
/* Dentro una voce: solo il suo modulo. Niente riquadro e niente filetto — non
   c'e' piu' niente attorno da cui separarlo, ed e' quello il punto. */
.conto-form { padding: 0; background: none; }
.conto-indietro {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 4px 0 14px; margin: 0 0 4px; border: 0; background: none;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink);
  cursor: pointer; text-align: left;
}
.conto-indietro .material-symbols-outlined { font-size: 19px; color: var(--accent-ink); }
.conto-indietro:hover { color: var(--accent-ink); }
.conto-qr { width: 168px; margin: 4px 0 10px; }
.conto-qr svg { width: 100%; height: auto; display: block; }
.conto-codici {
  list-style: none; margin: 0; padding: 10px 12px; border-radius: 10px;
  background: var(--sunk); font-family: ui-monospace, Menlo, monospace;
  font-size: 12.5px; line-height: 1.9; letter-spacing: .04em;
}
.btn-secondo.pericolo { color: var(--red); border-color: rgba(192,57,43,.34); }
.btn-secondo.pericolo:hover { background: var(--red-bg); border-color: var(--red); }

.conto-blocco {
  border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 16px 16px; margin: 0 0 14px; background: var(--panel);
}
.conto-blocco h3 { margin: 0 0 10px; font-size: 13.5px; font-weight: 650; color: var(--ink); }
.conto-campo { display: block; margin: 0 0 10px; }
.conto-campo span {
  display: block; font-size: 12px; color: var(--muted); margin: 0 0 4px;
}
.conto-campo input {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: 10px; font: inherit; font-size: 13.5px; background: #fff;
}
.conto-campo input:focus {
  outline: none; border-color: var(--accent-ink);
  box-shadow: 0 0 0 3px rgba(1,255,1,.22);
}
.conto-coppia { display: flex; gap: 10px; }
.conto-coppia > * { flex: 1; min-width: 0; }
.conto-nota { font-size: 11.5px; color: var(--faint); margin: 0 0 10px; line-height: 1.5; }
.conto-err { font-size: 12px; color: var(--red); margin: 0 0 8px; min-height: 0; }
.conto-err:empty { display: none; }
.conto-sessioni { list-style: none; margin: 0 0 10px; padding: 0; }
.conto-sessioni li {
  display: flex; flex-direction: column; gap: 1px;
  padding: 7px 0; border-top: 1px solid var(--line-soft); font-size: 12.5px;
}
.conto-sessioni li span { color: var(--faint); font-size: 11.5px; }
/* L'avviso e' uno solo per tutta la scheda: quattro riquadri con quattro
   fasce di esito sarebbero quattro cose che compaiono e spariscono. */
.conto-avviso {
  margin: 0 0 12px; padding: 9px 12px; border-radius: 10px;
  font-size: 12.5px; background: var(--accent-soft); color: var(--accent-ink);
}
.conto-avviso.rotto { background: var(--red-bg); color: var(--red); }
/* `.pop.pop-set a` piu' avanti nel foglio mette `display: inline-block` a tutti
   i link del riquadro: senza le due classi qui il bottone non prendeva la
   larghezza della scheda e restava un mozzicone a sinistra. */
/* `.pop.pop-set a` (piu' avanti) darebbe `inline-block` anche alla riga di
   accesso, che e' un link ma si legge come un bottone: serve un selettore piu'
   specifico, come per la CTA del Pro. */
.pop.pop-set .set-riga { display: flex; margin-top: 0; text-decoration: none; }
.set-esci .material-symbols-outlined { color: var(--muted); }
.set-esci:hover { background: rgba(0,0,0,.035); }

.pop.pop-set .uso-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 12px; padding: 9px 13px; border-radius: 10px;
  background: var(--accent); color: var(--su-accent); font-size: 12.5px; font-weight: 600;
  text-decoration: none; transition: background .14s ease;
}
.uso-cta:hover { background: var(--accent-su); }
.uso-cta-p { font-weight: 500; opacity: .85; font-variant-numeric: tabular-nums; }
.uso-cta[hidden] { display: none; }
.set-nota { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin: 0 0 10px; }

/* ── in coda ─────────────────────────────────────────────────────────────── */
.status.coda { border-color: rgba(180,83,9,.3); background: #fdf6e7; color: #8a5a12; }
.status.coda .beat i { background: #b45309; }
.coda-salta { margin-left: 4px; color: var(--accent-dark); font-weight: 600; text-decoration: none; }
.coda-salta:hover { text-decoration: underline; }

/* ── chi sei, in testata ─────────────────────────────────────────────────── */
.iniziali {
  width: 34px; height: 34px; border-radius: 999px; border: none; cursor: pointer;
  background: var(--accent); color: var(--su-accent); font-size: 12px; font-weight: 700;
  letter-spacing: .02em; flex-shrink: 0; font-family: inherit;
  display: grid; place-items: center; transition: filter .14s ease;
}
.iniziali:hover { filter: brightness(1.08); }
/* Iscritto ma non confermato: un punto ambrato sull'avatar, senza allarmi. */
.iniziali.da-confermare { position: relative; background: var(--muted); }
.iniziali.da-confermare::after {
  content: ''; position: absolute; top: -1px; right: -1px; width: 10px; height: 10px;
  border-radius: 999px; background: #b45309; border: 2px solid var(--bg);
}
.muro .segno-mail { margin-bottom: 16px; }
.muro #muro-verifica h2 { margin-top: 0; }

/* ══ telefono: il pannello e' sempre "aperto" ════════════════════════════ */
/* Su schermo stretto la barra non e' una colonna che si stringe: e' un
   pannello che entra da sinistra e copre la pagina. La classe `chiusa` pero'
   resta addosso — e' la preferenza del collega sul DESKTOP, ricordata nel
   localStorage — e portava dentro tutte le regole della striscia: elenco
   invisibile, scritte tolte, voci centrate. Il risultato era un pannello largo
   248px con dentro tre icone e nient'altro.
   Qui quelle regole si annullano una per una. Stanno in fondo al foglio
   apposta: alcune (`.rail.chiusa .rail-empty`) sono dichiarate DOPO il blocco
   mobile piu' sopra, e li' avrebbero vinto loro. */
@media (max-width: 900px) {
  .rail.chiusa { width: var(--rail-w); border-right-color: transparent; }
  .rail.chiusa .rail-nota { display: block; }
  .rail.chiusa .rail-list { visibility: visible; }
  .rail.chiusa .rail-empty { display: block; }
  .rail.chiusa .rail-head { padding: 12px 5px 10px; gap: 12px; }
  .rail.chiusa .rail-nav { align-items: stretch; }
  .rail.chiusa .rail-top {
    flex-direction: row; justify-content: flex-start; position: static;
    padding: 0 7px; gap: 9px;
  }
  .rail.chiusa .rail-brand-t { display: inline; }
  .rail.chiusa .rail-voce { justify-content: flex-start; padding: 6px 8px; }
  .rail.chiusa .rail-voce-t { display: inline; }
  .rail.chiusa .rail-set { justify-content: flex-start; padding: 6px 8px; }
  .rail.chiusa .rail-set-t { display: inline; }
  .rail.chiusa .rail-foot { padding: 6px 5px 8px; border-top-color: rgba(0,0,0,.045); }
  /* Il gioco logo↔pulsante e' del desktop: sul telefono il pulsante della barra
     e' nascosto, e senza questo il logo sfumava sotto il dito lasciando il
     vuoto. */
  .rail.chiusa .rail-top:hover .rail-logo,
  .rail.chiusa .rail-top:focus-within .rail-logo { opacity: 1; transform: none; }

  /* Il pannello un po' piu' largo: a 248px i titoli delle conversazioni si
     troncavano dopo tre parole, e con il dito serve anche piu' bersaglio. */
  .rail, .rail.chiusa { width: min(300px, 84vw); }

  /* 16px NON e' un vezzo tipografico: sotto quella misura iOS ingrandisce la
     pagina appena si tocca il campo, e non la rimpicciolisce piu' — il collega
     si ritrova la chat zoomata e storta, ed e' il "si bugga" piu' comune sul
     telefono. Vale per il campo di scrittura, la ricerca e i moduli. */
  .composer textarea,
  .main.vuota .composer textarea,
  .campo input,
  .rinomina,
  .cerca-campo input { font-size: 16px; }
  /* Il campo di rinomina vive dentro la riga della conversazione: a 16px il
     testo e' piu' alto, quindi la riga gli fa spazio invece di stringerlo. */
  .rinomina { padding: 4px 6px; }

  /* Sotto il campo di scrittura c'e' la barra di sistema dell'iPhone: senza
     questo il bordo del campo ci finisce sotto. */
  .dock { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .rail-foot, .rail.chiusa .rail-foot {
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
}


/* ── Fondatezza della risposta ───────────────────────────────────────────────
   Sta sopra il testo, non sotto: va letta prima di credere alla risposta.
   Il segno testuale (✓ ! ○) c'e' sempre — l'informazione non puo' dipendere
   dal solo colore, e in stampa in bianco e nero deve restare leggibile. */
.fondatezza{display:flex;gap:8px;align-items:flex-start;margin:0 0 10px;padding:7px 11px;
  border-radius:9px;font-size:13px;line-height:1.45;border:1px solid transparent}
.fondatezza .f-segno{font-weight:800;flex:none}
.fondatezza.f-fondata{background:#f0fdf4;border-color:#bbf7d0;color:#166534}
.fondatezza.f-parziale{background:#fffbeb;border-color:#fde68a;color:#92400e}
.fondatezza.f-fallita{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.fondatezza.f-assente{background:#f9fafb;border:1px dashed #9ca3af;color:#374151}
@media (prefers-reduced-motion: no-preference){ .fondatezza{transition:background .2s} }

/* La lettura dell'agente: il rapporto col caso è l'unica cosa che deve saltare
   all'occhio in un elenco di passi tutti uguali. Il rosso non è un errore —
   è una pronuncia contraria, cioè la più importante da leggere. */
.agente-p b.a-sostiene { color: #1a7f5a; font-weight: 600; }
.agente-p b.a-contrasta { color: #a3341f; font-weight: 600; }
.agente-p b.a-inquadra { color: #6b6b70; font-weight: 600; }

/* Le pronunce aperte e non usate: accanto al parere, non dentro. Chiuse di
   default — chi legge vuole la risposta, chi controlla apre. */
.scartate { margin-top: 14px; border-top: 1px solid rgba(0,0,0,.06); padding-top: 10px; }
.scartate summary { display: flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 12.5px; color: var(--muto, #6b7280); list-style: none; }
.scartate summary::-webkit-details-marker { display: none; }
.scartate summary .material-symbols-outlined { font-size: 16px; }
.scartate summary:hover { color: var(--accent-ink); }
.scartate ul { margin: 8px 0 0; padding-left: 18px; }
.scartate li { font-size: 12.5px; color: var(--muto, #6b7280); margin: 4px 0; line-height: 1.5; }

/* Il pulsante che separa il documento dall'apparato: si copia il parere, non
   la pagina. Discreto — chi legge non deve inciamparci — ma sempre presente. */
.azioni { margin-top: 10px; display: flex; gap: 8px; }
.az-copia { display: inline-flex; align-items: center; gap: 6px; border: 0;
  background: transparent; color: var(--muto, #6b7280); font: inherit;
  font-size: 12.5px; padding: 5px 8px; border-radius: 7px; cursor: pointer; }
.az-copia:hover { background: rgba(0,0,0,.045); color: var(--accent-ink); }
.az-copia .material-symbols-outlined { font-size: 16px; }

/* Il tasto della revisione, accanto a «Copia il parere»: sono due gesti dello
   stesso momento — prima controllo, poi copio — e quindi hanno la stessa
   forma. Acceso, dice che i bollini sono in pagina e si puo' spegnere. */
.az-verifica { display: inline-flex; align-items: center; gap: 6px; border: 0;
  background: transparent; color: var(--muto, #6b7280); font: inherit;
  font-size: 12.5px; padding: 5px 8px; border-radius: 7px; cursor: pointer; }
.az-verifica:hover { background: rgba(0,0,0,.045); color: var(--accent-ink); }
.az-verifica .material-symbols-outlined { font-size: 16px; }
.az-verifica.fatto { background: var(--accent-soft); color: var(--accent-dark); }

/* ══ il riquadro che spiega la revisione ════════════════════════════════════
   Prima di mettere i bollini addosso a un parere bisogna dire che cosa sono:
   «non l'ho ritrovato nel testo» accanto a un paragrafo, senza spiegazione, si
   legge come «questo e' sbagliato» — e non e' quello che vuol dire. */
.spiega-velo {
  position: fixed; inset: 0; z-index: 140; display: grid; place-items: center;
  padding: 22px; background: rgba(20,22,26,.34);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.spiega {
  background: #fff; border-radius: 16px; padding: 22px 24px 18px;
  max-width: 460px; width: 100%; box-shadow: 0 30px 70px rgba(0,0,0,.22);
  font-size: 13.5px; line-height: 1.6; color: var(--ink-2);
}
/* Il disegno della verifica. Le spunte si disegnano in sequenza — sono i
   paragrafi che vengono controllati uno dopo l'altro — e la lente scorre sopra
   il foglio. Non e' decorazione: mostra COSA sta per succedere, ed e' il modo
   piu' corto per spiegarlo prima di leggere tre righe di testo. */
.spiega .disegno { display: block; margin: 0 auto 14px; width: 128px; height: 102px; }
.disegno-verifica .dv-s1, .disegno-verifica .dv-s2 {
  stroke-dasharray: 16; stroke-dashoffset: 16;
}
.disegno-verifica .dv-attenzione { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .disegno-verifica .dv-s1 { animation: dvSegna .5s ease .25s forwards; }
  .disegno-verifica .dv-s2 { animation: dvSegna .5s ease .75s forwards; }
  .disegno-verifica .dv-attenzione { animation: dvAppare .4s ease 1.3s forwards; }
  .disegno-verifica .dv-lente { animation: dvScorre 3.4s ease-in-out 1.7s infinite; }
}
/* Senza animazioni il disegno deve restare LEGGIBILE, non vuoto: le spunte si
   mostrano gia' fatte e il segno d'attenzione gia' acceso. */
@media (prefers-reduced-motion: reduce) {
  .disegno-verifica .dv-s1, .disegno-verifica .dv-s2 { stroke-dashoffset: 0; }
  .disegno-verifica .dv-attenzione { opacity: 1; }
}
@keyframes dvSegna { to { stroke-dashoffset: 0; } }
@keyframes dvAppare { to { opacity: 1; } }
@keyframes dvScorre {
  0%, 100% { transform: translate(0, 0); }
  35%      { transform: translate(-30px, 14px); }
  70%      { transform: translate(-26px, -12px); }
}

.spiega-t {
  margin: 0 0 10px; font-size: 15.5px; font-weight: 600; color: var(--ink);
}
.spiega p { margin: 0 0 10px; }
.spiega-l { margin: 0 0 12px; padding-left: 18px; }
.spiega-l li { margin-bottom: 5px; }
.spiega-l b { color: var(--ink); font-weight: 600; }
.spiega-n { font-size: 12.5px; color: var(--muted); }
.spiega-az { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.spiega-no, .spiega-si {
  font: inherit; font-size: 13px; border-radius: 9px; padding: 8px 15px;
  cursor: pointer; border: 1px solid transparent;
}
.spiega-no { background: transparent; color: var(--muted); border-color: var(--line); }
.spiega-no:hover { background: rgba(0,0,0,.04); color: var(--ink); }
.spiega-si { background: var(--accent); color: var(--su-accent); font-weight: 600; }
.spiega-si:hover { background: var(--accent-su); }
@media (prefers-reduced-motion: no-preference) {
  .spiega { animation: rilascioSu .18s cubic-bezier(.22,1,.36,1) both; }
}

/* ── la risposta fermata dal collega ──────────────────────────────────────
   Una riga con la barra a sinistra e a destra e il motivo in mezzo. Serve a
   distinguere TRE cose che a schermo si somigliano: il consulente ha finito,
   il motore si e' rotto, oppure e' stato il collega a premere stop. Senza,
   riaprendo la conversazione si trova un parere che finisce a meta' frase e
   sembra un guasto nostro. */
.interrotta {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0 4px;
  font-size: 11.5px; color: var(--faint);
}
.interrotta::before, .interrotta::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}
.interrotta span { flex-shrink: 0; }

/* ══ la sezione «Redigere documenti» ══════════════════════════════════════
   Quasi tutto lo prende dalla chat: `main vuota` porta l'alone, `hero` il
   saluto, `dock`/`composer` il campo, `btn-send` il tasto. Qui sotto c'e' SOLO
   quello che la chat non ha — i tipi, l'archivio, il pannello dei modelli — e
   ogni regola in piu' e' una regola che puo' divergere.

   Il modulo a quattro passi che stava qui e' stato tolto: era la causa del
   «design fa schifo, senza parlare della user experience». Quattro schermate
   per due campi, e la prima chiedeva i modelli, che quasi nessuno ha. */

/* Il campo della redazione parte piu' alto della domanda di una chat: qui si
   scrivono parti, importi e date, non una riga. Resta la stessa forma. */
.doc-main .composer textarea { min-height: 46px; }
.doc-main.vuota .dock-inner { max-width: 680px; }

/* ══ le impostazioni ══════════════════════════════════════════════════════
   Un pannello con le sezioni, non un menu a tendina. Prima erano un `.pop`
   appeso alla barra: uso, una nota, «elimina tutto», lo stato del motore ed
   «esci», in colonna dentro duecentocinquanta pixel. Finche' le cose erano tre
   reggeva; con l'abbonamento — piano, rinnovo, disdetta, carta, ricevute — no:
   un menu a tendina che contiene un contratto e' un menu che nessuno legge. */
.velo-set { align-items: center; }
.set {
  /* `min-width: 0` non e' pignoleria: il pannello e' un elemento di griglia
     dentro il velo, e senza questo si allarga fino al contenuto piu' largo che
     ha dentro — la fila delle voci — sbordando a destra dallo schermo. */
  width: 100%; max-width: 860px; min-width: 0; height: min(620px, 88vh);
  display: grid; grid-template-columns: 232px 1fr;
  background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 18px 60px rgba(16,24,32,.22);
}

/* ── il lato sinistro ──────────────────────────────────────────────────── */
.set-lato {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--sunk); padding: 18px 12px 14px;
  border-right: 1px solid var(--line);
}
.set-io {
  display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px;
}
.set-io-t { display: flex; flex-direction: column; min-width: 0; }
.set-io-t b {
  font-size: 12.5px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.set-io-t span {
  font-size: 11px; color: var(--faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.set-voci { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.set-voce {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: 9px; background: transparent;
  font: inherit; font-size: 12.5px; color: var(--ink-2); cursor: pointer;
  text-align: left; transition: background .14s ease, color .14s ease;
}
.set-voce:hover { background: rgba(0,0,0,.045); }
.set-voce.on { background: #fff; color: var(--accent-dark); font-weight: 550; }
.set-voce .material-symbols-outlined { font-size: 18px; color: var(--muted); }
.set-voce.on .material-symbols-outlined { color: var(--accent-ink); }
.set-motore {
  display: flex; align-items: center; gap: 7px; padding: 10px 10px 0;
  font-size: 11px; color: var(--faint); margin: 0;
}

/* ── il corpo ──────────────────────────────────────────────────────────── */
/* `min-height: 0` non e' un dettaglio: e' quello che rende scorrevole la
   scheda. Un figlio flex non si rimpicciolisce sotto il proprio contenuto se
   non glielo si dice, quindi `overflow-y: auto` piu' sotto non mordeva mai e
   la scheda «Account» — quattro riquadri — finiva tagliata a meta' senza modo
   di arrivare in fondo. Vale per la colonna e per la sezione dentro. */
.set-corpo { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.set-testa {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
  padding: 18px 22px 14px; border-bottom: 1px solid var(--line);
}
.set-testa h2 {
  flex: 1; margin: 0; font-family: 'Inter', -apple-system, sans-serif;
  font-size: 15px; font-weight: 600; color: var(--ink);
}
.set-sez { display: none; padding: 20px 22px 24px; overflow-y: auto; }
.set-sez.attiva { display: block; flex: 1; min-height: 0; }

/* Le righe di dato: etichetta a sinistra, valore a destra. Non una tabella —
   sono quattro cose, e una tabella con quattro righe si legge come un modulo. */
.set-righe { margin: 0 0 18px; }
.set-riga-d {
  display: flex; align-items: baseline; gap: 16px; padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.set-riga-d:last-child { border-bottom: 0; }
.set-riga-d dt { font-size: 12px; color: var(--faint); width: 120px; flex-shrink: 0; }
.set-riga-d dd { margin: 0; font-size: 13px; color: var(--ink); flex: 1; }
.set-badge {
  font-style: normal; font-size: 10.5px; color: #8a5a12;
  background: rgba(192,122,30,.14); border-radius: 5px; padding: 2px 7px;
  margin-left: 7px;
}
.set-nota { font-size: 12px; line-height: 1.6; color: var(--muted); margin: 0 0 14px; }
.set-nota.rotto { color: var(--red); }
.set-avviso {
  font-size: 12px; line-height: 1.6; color: #8a5a12; margin: 0 0 14px;
  background: rgba(192,122,30,.10); border-radius: 10px; padding: 10px 12px;
}
.set-azioni { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.btn-secondo.danger { color: var(--red); }
.btn-secondo.danger:hover { border-color: var(--red); color: var(--red); }
.btn-primo.largo, .btn-secondo.largo { width: 100%; justify-content: center; }

/* ── l'utilizzo ────────────────────────────────────────────────────────── */
.uso-blocco {
  border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
  margin-bottom: 14px;
}
.uso-blocco .uso-testa {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 9px;
}
.uso-blocco .uso-testa b { font-size: 13px; color: var(--ink); }
.uso-targa {
  font-size: 10.5px; color: var(--su-accent); background: var(--accent);
  border-radius: 5px; padding: 2px 8px;
}
.uso-targa.chiara { background: var(--sunk); color: var(--muted); }
.uso-blocco .uso-barra {
  height: 6px; border-radius: 999px; background: var(--sunk); overflow: hidden;
}
.uso-blocco .uso-barra i {
  display: block; height: 100%; background: var(--accent);
  border-radius: 999px; transition: width .3s ease;
}
.uso-blocco.pieno .uso-barra i { background: var(--red); }
.uso-blocco .uso-nota { font-size: 11.5px; line-height: 1.55; color: var(--faint); margin: 9px 0 0; }

/* ── l'abbonamento ─────────────────────────────────────────────────────── */
.pro-scheda {
  border: 1px solid var(--line); border-radius: 14px; padding: 18px 18px 16px;
}
.pro-scheda.attivo { border-color: var(--accent-ink); background: var(--accent-soft); }
.pro-testa {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.pro-nome { font-size: 14px; color: var(--ink); }
.pro-nome b { color: var(--accent-dark); }
.pro-prezzo { font-size: 12px; color: var(--muted); }
.pro-prezzo b { font-size: 15px; color: var(--ink); }
.pro-stato {
  font-size: 11px; color: var(--accent-dark); background: #fff;
  border-radius: 999px; padding: 3px 10px;
}
.pro-stato.attenzione { color: #8a5a12; background: rgba(192,122,30,.14); }
.pro-elenco { list-style: none; margin: 0 0 16px; padding: 0; }
.pro-elenco li {
  display: flex; align-items: flex-start; gap: 9px; padding: 6px 0;
  font-size: 12.5px; color: var(--ink-2);
}
.pro-elenco .material-symbols-outlined { font-size: 17px; color: var(--accent-ink); }
/* Ogni voce comincia con la situazione in grassetto e prosegue col numero: si
   legge in due tempi anche a colpo d'occhio, e chi scorre veloce si porta via
   almeno il momento in cui il gratuito si mette di traverso. */
.pro-elenco li b { color: var(--ink); font-weight: 600; }

/* Il consumo VERO di chi sta leggendo. Non e' una promessa e non e' una
   pressione inventata: e' il suo contatore, scritto una volta sola. */
.pro-tuo {
  margin: 0 0 14px; padding: 10px 12px; border-radius: 11px;
  background: var(--accent-soft); border: 1px solid var(--accent-orlo);
  font-size: 12.5px; line-height: 1.55; color: var(--accent-dark);
}
.pro-tuo b { font-weight: 650; }

/* Le tre rassicurazioni sotto il tasto: quando parte, cosa costa, come si
   esce. Su una riga sola finche' ci stanno, a capo quando non ci stanno. */
.pro-fede {
  display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 12px;
  font-size: 11.5px; color: var(--muted);
}
.pro-fede > span { display: inline-flex; align-items: center; gap: 4px; }
.pro-fede .material-symbols-outlined { font-size: 14px; color: var(--accent-ink); }
.pro-scheda .set-righe { margin-bottom: 12px; }
/* I tre tasti dell'abbonamento su una riga sola finche' ci stanno: sono azioni
   sullo stesso oggetto, e incolonnarle le farebbe sembrare tre cose diverse. */
.abb-azioni { display: flex; flex-wrap: wrap; gap: 8px; }
.abb-azioni .btn-secondo, .abb-azioni .btn-primo { flex: 1 1 auto; justify-content: center; }

@media (max-width: 760px) {
  /* Su schermo stretto le voci diventano una riga sopra il contenuto: una
     colonna da 232px a fianco lascerebbe al testo meno spazio di quello che
     serve a leggere una condizione di abbonamento. */
  /* `grid-template-rows` e' la riga che mancava. Con una colonna sola la
     griglia si fa DUE righe e se le divide in parti uguali: la fascia delle
     voci si prendeva meta' schermo: sopra un modulo corto restava una fascia
     grigia alta quattrocento pixel e il modulo schiacciato sotto. Adesso la
     fascia prende quello che le serve e il resto e' del contenuto. */
  .set { grid-template-columns: 1fr; grid-template-rows: auto 1fr;
         height: min(680px, 92vh); }
  .set-lato { flex-direction: row; align-items: center; overflow-x: auto;
              border-right: 0; border-bottom: 1px solid var(--line); padding: 10px;
              flex-shrink: 0; scrollbar-width: none; }
  .set-lato::-webkit-scrollbar { display: none; }
  .set-io, .set-motore { display: none; }
  .set-voci { flex-direction: row; gap: 6px; }
  /* `width: 100%` viene dal desktop, dove le voci sono incolonnate. Messe in
     riga restavano larghe quanto tutto il pannello — 477px l'una dentro una
     riga da 370 — e si vedeva sempre e solo mezza parola della voce attiva.
     In riga la voce e' larga quanto il suo testo. */
  .set-voce { white-space: nowrap; width: auto; flex: 0 0 auto; }
}

/* ── le impostazioni sul telefono ─────────────────────────────────────────
   Il pannello prende quasi tutto lo schermo invece di galleggiare in mezzo:
   su 390 px un riquadro con l'aria intorno vuol dire leggere una condizione
   di abbonamento dentro una finestrella. */
@media (max-width: 560px) {
  .velo-set { padding: 8px; }
  .set { max-width: 100%; height: 94vh; border-radius: 16px; }
  .set-lato { padding: 8px; gap: 6px; }
  .set-voce { padding: 10px 13px; font-size: 13px; }
  .set-testa { padding: 14px 16px 12px; }
  .set-sez { padding: 16px 16px 24px; }
  /* Bersaglio da dito: 13px di padding sono giusti col mouse, stretti col
     pollice su una riga che apre una sotto-sezione. */
  .conto-voce { padding: 15px 13px; }
  .conto-indietro { padding: 10px 4px; }
  /* Sotto i 16px iOS ingrandisce la pagina appena tocchi il campo, e non la
     rimpicciolisce piu': si resta dentro un modulo zoomato che sborda. */
  .set input, .set select, .set textarea { font-size: 16px; }
  .abb-azioni .btn-secondo, .abb-azioni .btn-primo { flex: 1 1 100%; }
}

/* ── il riquadro dei lavori, su ogni pagina ────────────────────────────────
   In basso a DESTRA: a sinistra c'e' la barra, e li' e' il posto dove le
   applicazioni mettono le cose che stanno succedendo senza chiedere
   attenzione. Non e' un avviso da leggere subito — e' un lavoro che continua —
   quindi non copre niente, non si muove e si chiude.

   E' una PILA, non una scheda sola: si puo' aspettare un parere mentre si
   scrive un atto, e con una scheda sola il piu' recente faceva sparire
   l'altro. */
.lavoro-vivo {
  position: fixed; right: 20px; bottom: 20px; z-index: 55;
  display: flex; flex-direction: column-reverse; gap: 8px;
  width: 316px; max-width: calc(100vw - 40px);
}
.lavoro-vivo[hidden] { display: none; }
.lv {
  display: flex; align-items: center; gap: 11px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 6px 22px rgba(16,24,32,.12);
  padding: 11px 11px 11px 14px; text-decoration: none; color: inherit;
  animation: lvEntra .22s ease both;
}
@keyframes lvEntra {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .lv { animation: none; } }
.lv-i { flex-shrink: 0; color: var(--accent-ink); font-size: 20px; }
.lv-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.lv-t b {
  font-size: 12.5px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Una riga sola, tagliata col puntino: «Redazione dell'atto (contesto
   completo)…» andava a capo e il riquadro cresceva a ogni cambio di fase,
   ballando in un angolo dello schermo mentre si legge altro. */
.lv-t span {
  font-size: 11.5px; color: var(--faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lv-x {
  border: 0; background: transparent; color: var(--faint); cursor: pointer;
  display: grid; place-items: center; border-radius: 8px; padding: 4px;
  flex-shrink: 0; transition: background .13s ease, color .13s ease;
}
.lv-x:hover { background: rgba(0,0,0,.06); color: var(--ink); }
.lv-x .material-symbols-outlined { font-size: 18px; }
.lv-freccia {
  font-size: 18px; color: var(--accent-ink); flex-shrink: 0;
  transition: transform .16s ease;
}
/* Pronto: la scheda diventa un invito, non un cartello. Il verde non serve —
   il teal e' gia' il colore di «guarda qui» in tutto il prodotto. */
.lv[data-stato="pronto"] { border-color: var(--accent-ink); }
.lv[data-stato="pronto"]:hover { background: var(--accent-soft); }
.lv[data-stato="pronto"]:hover .lv-freccia { transform: translateX(3px); }
.lv[data-stato="rotto"] { border-color: var(--red); }
.lv[data-stato="rotto"] .lv-i, .lv[data-stato="rotto"] .lv-t b { color: var(--red); }

@media (max-width: 900px) {
  /* Sul telefono il campo di scrittura sta in fondo: il riquadro sale sopra la
     nota dell'AI Act invece di coprire il posto dove si scrive. */
  .lavoro-vivo { right: 12px; left: 12px; bottom: 78px; width: auto; }
}

/* ── la pagina dei documenti ───────────────────────────────────────────────
   Si apre sull'ELENCO. Terzo impianto su questa schermata, e la ragione sta
   scritta in `documenti.html`: i primi due mettevano al centro il momento in
   cui l'atto nasce, che capita ogni tanto, invece di quello in cui lo si
   ritrova, che capita ogni giorno. */
.doc-pagina { max-width: 760px; margin: 0 auto; padding: 34px 24px 40px; }

.doc-barra {
  display: flex; align-items: center; gap: 10px; margin-bottom: 20px;
}
.doc-barra h1 {
  flex: 1; margin: 0; font-family: 'Fraunces', Georgia, serif;
  font-size: 26px; font-weight: 600; letter-spacing: -.01em; color: var(--ink);
}
.doc-tit {
  flex: 1; font-size: 13px; color: var(--muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.btn-primo, .btn-secondo, .btn-indietro {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  /* `text-decoration: none` perche' a volte questi tasti sono LINK — il
     `mailto:` dell'aiuto, per dirne uno — e un indirizzo sottolineato dentro
     un tasto pieno sembra un refuso. */
  font: inherit; font-size: 12.5px; font-weight: 550; border-radius: 999px;
  padding: 8px 15px; flex-shrink: 0; text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primo { background: var(--accent); border: 1px solid var(--accent-orlo); color: var(--su-accent); }
.btn-primo:hover { background: var(--accent-su); border-color: var(--accent-orlo); }
.btn-primo:disabled { opacity: .5; pointer-events: none; }
.btn-secondo, .btn-indietro {
  background: #fff; border: 1px solid var(--line); color: var(--muted);
}
.btn-secondo:hover, .btn-indietro:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.btn-secondo em { font-style: normal; color: var(--faint); }
.btn-primo .material-symbols-outlined,
.btn-secondo .material-symbols-outlined,
.btn-indietro .material-symbols-outlined { font-size: 18px; }

/* ── le righe dell'elenco ─────────────────────────────────────────────────
   Righe e non schede: un elenco di atti si scorre cercando un nome, e le
   schede lo allungherebbero senza dire niente di piu'. */
.doc-riga {
  display: flex; align-items: center; gap: 13px; width: 100%;
  padding: 13px 14px; border-radius: 12px; text-decoration: none;
  border: 1px solid transparent; color: var(--ink); cursor: pointer;
  transition: background .14s ease, border-color .14s ease;
}
.doc-riga:hover { background: #fff; border-color: var(--line); }
.doc-riga + .doc-riga { margin-top: 2px; }
.dr-tipo {
  font-size: 10.5px; color: var(--accent-dark); background: var(--accent-soft);
  border-radius: 6px; padding: 3px 8px; flex-shrink: 0;
}
.dr-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.dr-t b {
  font-size: 13px; font-weight: 550; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dr-t span { font-size: 11.5px; color: var(--faint); margin-top: 2px; }
.dr-x {
  opacity: 0; border: 0; background: transparent; color: var(--faint);
  cursor: pointer; padding: 4px; border-radius: 7px; display: grid;
  place-items: center; flex-shrink: 0; transition: opacity .13s ease;
}
.doc-riga:hover .dr-x { opacity: 1; }
.dr-x:hover { color: var(--red); background: rgba(0,0,0,.06); }
.dr-x .material-symbols-outlined { font-size: 17px; }
/* Il lavoro in corso sta in testa all'elenco: e' il documento che fra poco
   sara' il primo, ed e' li' che lo si andra' a cercare. */
.doc-riga.in-corso {
  background: var(--accent-soft); border-color: transparent; cursor: default;
}
.doc-riga.in-corso[hidden] { display: none; }
.doc-riga.in-corso .dr-t b { color: var(--accent-dark); }

/* ── l'archivio vuoto ─────────────────────────────────────────────────────
   Non un riquadro tratteggiato: due righe che dicono cosa succede qui, e il
   tasto per cominciare. */
/* La pagina vuota: la scena disegnata, come nelle altre schermate di casa.
   Al centro e non a sinistra — non c'e' nient'altro con cui allinearsi, e un
   blocco solo appoggiato a un margine sembra il resto di qualcosa. */
.doc-vuota {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 54px 16px; max-width: 46ch; margin: 0 auto;
}
.doc-vuota[hidden] { display: none; }
.doc-vuota h2 {
  font-family: 'Fraunces', Georgia, serif; font-size: 21px; font-weight: 600;
  color: var(--ink); margin: 18px 0 8px; text-wrap: balance;
}
.doc-vuota p {
  margin: 0; font-size: 13px; line-height: 1.65; color: var(--muted);
  text-wrap: pretty;
}
.doc-vuota .btn-primo { margin-top: 20px; }

/* ── i tipi, dentro il pannello ────────────────────────────────────────────
   Pillole e non card: la scelta e' facoltativa, e una griglia di otto riquadri
   si legge come «devi scegliere». */
.doc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.doc-chip {
  font: inherit; font-size: 12px; cursor: pointer; color: var(--muted);
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 13px;
  transition: border-color .14s ease, color .14s ease, background .14s ease;
}
.doc-chip:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.doc-chip.on { background: var(--accent); border-color: var(--accent); color: var(--su-accent); }

.doc-riga-nota { text-align: left; font-size: 11.5px; color: var(--faint); margin: 10px 2px 0; }
.doc-riga-nota.rotto { color: var(--red); }

/* ── il menu del «+» ───────────────────────────────────────────────────── */
.pop-piu { width: 300px; padding: 6px; }
.pop-v {
  display: flex; align-items: flex-start; gap: 11px; width: 100%;
  padding: 10px 11px; border: 0; border-radius: 10px; background: transparent;
  font: inherit; text-align: left; cursor: pointer; color: var(--ink);
  transition: background .14s ease;
}
.pop-v:hover { background: rgba(0,0,0,.04); }
.pop-v .material-symbols-outlined { font-size: 19px; color: var(--accent-ink); margin-top: 1px; }
.pop-v b { display: block; font-size: 12.5px; font-weight: 600; }
.pop-v em { font-style: normal; color: var(--faint); font-weight: 400; }
.pop-v i { display: block; font-style: normal; font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* ── il pannello dei modelli ───────────────────────────────────────────────
   Una cosa che si fa UNA VOLTA non merita un passo dentro il percorso di ogni
   documento: si apre quando serve e si chiude. */
.velo {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: rgba(16,24,32,.28); padding: 24px;
  animation: veloEntra .16s ease both;
}
.velo[hidden] { display: none; }
@keyframes veloEntra { from { opacity: 0; } to { opacity: 1; } }
.foglio, .foglio-modelli {
  width: 100%; max-width: 520px; background: #fff; border-radius: 16px;
  padding: 22px 24px 24px; box-shadow: 0 12px 40px rgba(16,24,32,.18);
  max-height: 82vh; overflow-y: auto;
}
.fm-testa { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.fm-testa h2 {
  flex: 1; margin: 0; font-family: 'Inter', -apple-system, sans-serif;
  font-size: 15px; font-weight: 600; color: var(--ink);
}
.fm-aiuto { font-size: 12.5px; line-height: 1.6; color: var(--muted); margin: 0 0 16px; }
/* ── il pannello del nuovo documento ───────────────────────────────────────
   Tre zone dichiarate, non un campo di chat infilato in una finestra: qui non
   si conversa, si compila una cosa sola, e ogni pezzo ha un nome perche' chi
   lo legge sappia cosa ci va. Il piede resta fermo mentre il corpo scorre —
   il tasto che fa partire il lavoro non deve andarsene sotto il bordo. */
.foglio-nuovo {
  max-width: 640px; padding: 0; display: flex; flex-direction: column;
  max-height: 86vh;
}
.foglio-nuovo .fm-testa { padding: 20px 24px 14px; margin: 0; flex-shrink: 0; }
.fn-corpo { padding: 4px 24px 20px; overflow-y: auto; }
.fn-zona + .fn-zona { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.fn-eti {
  display: block; font-size: 12px; font-weight: 600; color: var(--ink-2);
  margin-bottom: 9px;
}
.fn-eti em { font-style: normal; font-weight: 400; color: var(--faint); }
.fn-nota { font-size: 11.5px; line-height: 1.5; color: var(--faint); margin: 8px 0 0; }
.fn-testo {
  width: 100%; font: inherit; font-size: 13px; line-height: 1.6; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; outline: none; resize: vertical; min-height: 130px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.fn-testo:focus { border-color: var(--accent-ink); box-shadow: 0 0 0 3px rgba(1,255,1,.35); }
.fn-testo::placeholder { color: var(--faint); }

/* I file allegati: RIGHE, non le chip della chat. Li' una chip sta sopra un
   campo di scrittura e deve stare stretta; qui c'e' spazio, e quello che serve
   sapere e' il nome per intero e il peso — se ho caricato il contratto giusto
   si vede dal nome, non da otto caratteri e tre puntini. */
.fn-file { display: flex; flex-direction: column; gap: 6px; }
.fn-file:not(:empty) { margin-bottom: 10px; }
.fn-f {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  background: var(--sunk); border-radius: 10px;
}
.fn-f .material-symbols-outlined { font-size: 18px; color: var(--muted); flex-shrink: 0; }
.fn-f-n {
  flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fn-f-p { font-size: 11.5px; color: var(--faint); flex-shrink: 0; }
/* Il motivo di un rifiuto e' una frase, non una misura: prende lo spazio che
   serve e semmai stringe il nome, che tanto lo si e' appena scelto. */
.fn-f.rotto .fn-f-n { flex: 0 1 auto; }
.fn-f.rotto .fn-f-p {
  flex: 1 1 auto; min-width: 0; text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fn-f.sale .fn-f-p { color: var(--accent-ink); }
.fn-f.rotto { background: rgba(193,58,58,.08); }
.fn-f.rotto .fn-f-n, .fn-f.rotto .fn-f-p { color: var(--red); }
.fn-f button {
  border: 0; background: transparent; color: var(--faint); cursor: pointer;
  display: grid; place-items: center; border-radius: 6px; padding: 3px; flex-shrink: 0;
}
.fn-f button:hover { color: var(--red); background: rgba(0,0,0,.05); }
.fn-allega {
  display: flex; align-items: center; gap: 9px; width: 100%; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--muted); text-align: left;
  padding: 11px 14px; background: transparent;
  border: 1.4px dashed var(--line); border-radius: 11px;
  transition: border-color .16s ease, color .16s ease;
}
.fn-allega:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.fn-allega .material-symbols-outlined { font-size: 18px; }

.fn-piede {
  display: flex; align-items: center; gap: 14px; flex-shrink: 0;
  padding: 14px 24px 20px; border-top: 1px solid var(--line);
}
.fn-piede .doc-riga-nota { flex: 1; margin: 0; }
.fn-piede .btn-primo { flex-shrink: 0; }

/* ── il foglio della segnalazione ─────────────────────────────────────────
   Riusa la grammatica del pannello dei documenti (zone dichiarate, piede col
   tasto) ma vive dentro un `.foglio` normale, che ha gia' il suo margine: le
   zone qui non devono aggiungerne un altro, se no il testo finisce lontano
   dal bordo il doppio di dove dovrebbe. */
.foglio-segnala { max-width: 560px; }
.foglio-segnala .fn-zona:first-of-type { margin-top: 14px; }
.foglio-segnala .fn-piede { padding: 14px 0 0; }
.foglio-segnala .fn-testo { min-height: 92px; }
.foglio-segnala .err:empty { display: none; }
/* I motivi vanno A CAPO anche sul telefono: sono la domanda del foglio, e
   metterli in una riga che scorre vuol dire nasconderne meta' a chi non sa
   che c'e' altro a destra. I tipi di documento possono scorrere, questi no. */
.seg-motivi, .seg-motivi.doc-chips { flex-wrap: wrap; overflow: visible;
  padding: 0; margin: 0 0 2px; }

.doc-modelli { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.doc-modello {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--sunk); border-radius: 10px;
}
.doc-modello-n {
  flex: 1; font-size: 12.5px; color: var(--ink); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.doc-modello-p { font-size: 11.5px; color: var(--faint); flex-shrink: 0; }
.doc-x {
  background: transparent; border: 0; cursor: pointer; color: var(--faint);
  display: grid; place-items: center; border-radius: 6px; padding: 3px;
}
.doc-x:hover { color: var(--red); background: rgba(0,0,0,.05); }
.doc-x .material-symbols-outlined { font-size: 17px; }
.doc-vuoto { font-size: 12.5px; color: var(--faint); margin: 0 0 12px; }
.doc-carica {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  font-size: 12.5px; color: var(--muted); padding: 11px 16px;
  border: 1.4px dashed var(--line); border-radius: 11px;
  transition: border-color .16s ease, color .16s ease;
}
.doc-carica:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.doc-carica.occupato { opacity: .55; pointer-events: none; }
.doc-carica .material-symbols-outlined { font-size: 18px; }
.doc-nota { font-size: 11.5px; color: var(--faint); margin: 10px 0 0; }
.doc-nota.rotto { color: var(--red); }

/* ── mentre scrive, e il documento ─────────────────────────────────────── */
.doc-lavoro {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 14px; font-size: 12.5px; color: var(--muted);
}
.doc-attesa { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.doc-sezioni { margin-left: auto; font-size: 11.5px; color: var(--faint); }
.doc-atto {
  border: 1px solid var(--line); border-radius: 14px; background: #fff;
  padding: 26px 28px;
}
.doc-scarico { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.doc-scarico .az {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: 12.5px; cursor: pointer; color: var(--muted);
  background: transparent; border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 14px;
}
.doc-scarico .az:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.doc-scarico .material-symbols-outlined { font-size: 17px; }

@media (max-width: 900px) {
  .doc-colonna { padding-top: 22px; }
  .doc-titolo { font-size: 27px; }
}

@media (max-width: 900px) {
  /* Otto pillole su uno schermo da 360px sono quattro righe di pillole, cioe'
     meta' schermata occupata da una scelta facoltativa. Si scorrono in
     orizzontale, come i filtri di qualunque applicazione sul telefono. */
  .doc-chips {
    flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
    padding: 0 14px 2px; scrollbar-width: none;
  }
  .doc-chips::-webkit-scrollbar { display: none; }
  .doc-chip { flex-shrink: 0; }
  .doc-storico { padding: 0 8px; }
  .foglio, .foglio-modelli { padding: 18px 16px 20px; }
}

/* ── i documenti sul telefono ─────────────────────────────────────────────
   La pagina era pensata per il desktop e basta: la barra del titolo era una
   riga sola e «Nuovo documento» finiva oltre il bordo destro, portandosi
   dietro tutta la pagina in scorrimento orizzontale. Da li' in poi anche i
   pannelli uscivano storti, perche' si aprivano su una pagina gia' spostata. */
@media (max-width: 700px) {
  .doc-pagina { padding: 22px 16px 34px; }
  /* Il titolo si prende la sua riga e i due tasti si dividono quella sotto:
     su 360 px non esiste modo di tenere «Documenti», «I tuoi modelli» e
     «Nuovo documento» sulla stessa riga senza tagliarne uno. */
  .doc-barra { flex-wrap: wrap; row-gap: 12px; }
  .doc-barra h1 { flex: 1 1 100%; font-size: 22px; }
  .doc-barra .btn-primo, .doc-barra .btn-secondo { flex: 1 1 auto; justify-content: center; }
  .doc-barra .btn-indietro { flex: 0 0 auto; }
  .doc-tit { flex: 1 1 100%; white-space: normal; }
}

@media (max-width: 560px) {
  /* Il pannello scende in fondo allo schermo — dove arriva il pollice — e
     prende tutta la larghezza. `min-width: 0` non e' pignoleria: senza,
     l'elemento della griglia si allarga fino al contenuto piu' largo che ha
     dentro e sborda a destra, che e' esattamente quello che faceva. */
  .velo { padding: 10px; place-items: end center; }
  .foglio, .foglio-modelli, .foglio-nuovo {
    width: 100%; max-width: 100%; min-width: 0; max-height: 90vh;
    border-radius: 18px;
  }
  .foglio-nuovo .fm-testa { padding: 16px 16px 12px; }
  .fn-corpo { padding: 4px 16px 16px; }
  .fn-zona + .fn-zona { margin-top: 18px; padding-top: 16px; }
  /* Il piede: la nota sopra, il tasto largo sotto. Affiancati, il tasto si
     stringeva a meta' riga e la nota andava a capo tre volte. */
  .fn-piede { flex-direction: column; align-items: stretch; gap: 10px;
              padding: 12px 16px 16px; }
  .fn-piede .btn-primo { width: 100%; justify-content: center; padding: 12px 15px; }
  .fn-piede .doc-riga-nota { text-align: center; }
  /* I 16px del testo non sono estetica: sotto i 16 iOS ingrandisce la pagina
     appena tocchi il campo, e non la rimpicciolisce piu'. */
  .fn-testo { font-size: 16px; min-height: 120px; }
  .doc-chips { padding-left: 16px; padding-right: 16px; margin-left: -16px;
               margin-right: -16px; }
}


/* ── gli spunti della prima volta ─────────────────────────────────────────
   Bottoni che PRECOMPILANO il campo (vedi #spunti in chat.html). Vivono solo
   nella schermata vuota: via .main:not(.vuota) spariscono col primo invio. */
/* Sotto la barra di scrittura, dentro .dock-inner: larghi quanto il campo,
   con un filo d'aria sopra. */
.spunti { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
          margin-top: 10px; }
.spunto { font: inherit; font-size: 12.5px; color: var(--ink);
          background: #fff; border: 1px solid rgba(0, 0, 0, .12);
          border-radius: 999px; padding: 8px 14px; cursor: pointer;
          transition: border-color .15s, background .15s; }
.spunto:hover { border-color: var(--accent-orlo); background: var(--accent-soft); }
.main:not(.vuota) .spunti { display: none; }

/* ── «Segnala un errore» ── stessa lingua tenue degli altri tasti d'azione */
.az-segnala { display: inline-flex; align-items: center; gap: 6px; border: 0;
  background: transparent; color: var(--muto, #6b7280); font: inherit;
  font-size: 12.5px; padding: 5px 8px; border-radius: 7px; cursor: pointer; }
.az-segnala:hover { background: rgba(0,0,0,.045); color: var(--accent-ink); }
.az-segnala .material-symbols-outlined { font-size: 15px; }
.az-segnala[data-fatto] { color: var(--accent-ink); cursor: default; }