/* Stile comune delle pagine della demo.
 *
 * ── UN FILE SOLO, E PERCHE' ─────────────────────────────────────────────────────────────
 * Chat e voce hanno lo stesso guscio: storico a sinistra, conversazione al centro, trace a
 * destra. Tenerlo in due <style> voleva dire correggere due volte ogni ritocco — ed e'
 * gia' successo con i colori del tema scuro, rimasti diversi fra le due pagine.
 *
 * ── TEMA CHIARO ────────────────────────────────────────────────────────────────────────
 * Lo sfondo e' BIANCO. Le pagine nascono per essere mostrate al cliente, spesso proiettate:
 * su un proiettore il fondo nero rende il testo grigio e le bolle si perdono. `color-scheme`
 * resta `light` esplicito, altrimenti i campi di sistema (input, scrollbar) tornano scuri
 * su un browser impostato in dark e la pagina risulta a meta'.
 */
:root {
  color-scheme: light;
  --fondo:        #ffffff;
  --pannello:     #f7f8fa;
  --bordo:        #e3e6ea;
  --testo:        #1a1d21;
  --tenue:        #6b7280;
  --accento:      #2f5c99;
  --bolla-bot:    #f1f3f5;
  --bolla-io:     #e3edfb;
  --ok:           #1f7a4d;
  --errore:       #b3261e;
  --avviso:       #9a6700;
}

* { box-sizing: border-box; }

body {
  font: 16px/1.55 system-ui, sans-serif;
  margin: 0; height: 100vh; overflow: hidden;
  background: var(--fondo); color: var(--testo);
  display: flex; flex-direction: column;
}

/* ── Intestazione ───────────────────────────────────────────────────────────────── */
header {
  padding: .7rem 1rem; border-bottom: 1px solid var(--bordo);
  display: flex; align-items: center; gap: .75rem; flex: none;
}
header a { color: var(--tenue); text-decoration: none; }
header a:hover { color: var(--accento); }
header b { font-weight: 600; }
header .chi { color: var(--tenue); font-size: .875rem; margin-left: auto; }

/* ── Il guscio a tre colonne ────────────────────────────────────────────────────────
 * `min-height: 0` sulle colonne: senza, un figlio che scorre fa crescere la riga della
 * griglia invece di scorrere, e le barre laterali si allungano oltre lo schermo. */
.guscio {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 15rem minmax(0, 1fr) 20rem;
}
.guscio > * { min-height: 0; overflow-y: auto; }

.lato {
  background: var(--pannello); display: flex; flex-direction: column;
}
.lato.sinistra { border-right: 1px solid var(--bordo); }
.lato.destra   { border-left:  1px solid var(--bordo); }
.lato h2 {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tenue); margin: 0; padding: .9rem 1rem .5rem; font-weight: 600;
}

/* ── Storico ────────────────────────────────────────────────────────────────────── */
.nuova {
  margin: .9rem 1rem .3rem; padding: .6rem .9rem; border: 1px solid var(--bordo);
  border-radius: .5rem; background: var(--fondo); color: var(--accento);
  font: inherit; font-weight: 600; cursor: pointer; text-align: left; flex: none;
}
.nuova:hover { border-color: var(--accento); }
.storico { list-style: none; margin: 0; padding: 0 .6rem 1rem; }
.storico li { margin-bottom: .2rem; }
.storico button {
  width: 100%; text-align: left; border: 0; background: none; font: inherit;
  color: inherit; cursor: pointer; padding: .5rem .6rem; border-radius: .45rem;
  display: block; overflow: hidden;
}
.storico button:hover { background: #eceff3; }
.storico button.attiva { background: #e3edfb; }
.storico .titolo {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: .875rem;
  /* Spazio per la ✕, che sta sopra: senza, un titolo lungo ci finisce sotto. */
  padding-right: 1.25rem;
}

/* ── La ✕ per cancellare ────────────────────────────────────────────────────────────
 * Compare passando sopra la voce, in alto a destra. Sta FUORI dal pulsante che apre la
 * conversazione — un <button> dentro un <button> non e' valido e il browser lo sposta
 * fuori, rompendo la riga — quindi la voce e' un contenitore posizionato con dentro due
 * pulsanti affiancati.
 * Su schermo che non ha il passaggio del mouse (touch) resta sempre visibile: altrimenti
 * su telefono non ci sarebbe modo di cancellare. */
.storico li { position: relative; }
.storico .cancella {
  position: absolute; top: .25rem; right: .25rem;
  /* LARGHEZZA E DISPLAY VANNO RIDICHIARATI. Qui sopra `.storico button` vale per TUTTI
   * i pulsanti dell'elenco, ✕ compresa, e le da' `display: block; width: 100%`: una ✕
   * larga quanto la voce, che con `right` finisce ad occupare tutta la riga e si vede a
   * SINISTRA, col suo sfondo di passaggio come una banda rosa. Posizionarla non basta
   * se resta larga quanto il contenitore. */
  width: auto; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; cursor: pointer; padding: .15rem .35rem;
  border-radius: .3rem; color: var(--tenue); font-size: .85rem; line-height: 1;
  opacity: 0; transition: opacity .12s;
  /* INVISIBILE VUOL DIRE ANCHE NON CLICCABILE. Con la sola `opacity: 0` il pulsante
   * resta li' e intercetta i clic: chi mira all'angolo in alto a destra della voce per
   * aprirla si troverebbe la domanda «eliminare?» senza aver visto niente da premere. */
  pointer-events: none;
}
.storico li:hover .cancella, .storico .cancella:focus-visible {
  opacity: 1; pointer-events: auto;
}
.storico .cancella:hover { background: #f6d7d5; color: var(--errore); }
/* Dove non esiste il passaggio del mouse (telefono) resta sempre visibile e premibile:
 * altrimenti non ci sarebbe modo di cancellare. */
@media (hover: none) {
  .storico .cancella { opacity: .6; pointer-events: auto; }
}
.storico .quando { display: block; font-size: .72rem; color: var(--tenue); }
.vuoto { padding: 0 1rem; color: var(--tenue); font-size: .82rem; }

/* ── Conversazione ──────────────────────────────────────────────────────────────── */
.centro { display: flex; flex-direction: column; overflow: hidden !important; }
#conversazione {
  flex: 1; overflow-y: auto; padding: 1.25rem;
  display: flex; flex-direction: column; gap: .6rem;
}
.riga {
  max-width: min(42rem, 85%); padding: .6rem .9rem; border-radius: .8rem;
  white-space: pre-wrap;
}
.bot { background: var(--bolla-bot); align-self: flex-start; }
.io  { background: var(--bolla-io);  align-self: flex-end; }
.sistema {
  align-self: center; color: var(--tenue); font-size: .8rem; background: none;
  font-style: italic; max-width: 100%;
}

form.scrivi {
  display: flex; gap: .5rem; padding: 1rem; border-top: 1px solid var(--bordo);
  flex: none;
}
form.scrivi input {
  flex: 1; padding: .7rem .9rem; border-radius: .6rem; border: 1px solid var(--bordo);
  background: var(--fondo); color: inherit; font: inherit;
}
form.scrivi input:focus { outline: 2px solid var(--bolla-io); border-color: var(--accento); }
button.principale {
  padding: .7rem 1.2rem; border-radius: .6rem; border: 0; background: var(--accento);
  color: #fff; font: inherit; cursor: pointer;
}
button.principale:disabled { opacity: .45; cursor: default; }

/* ── Trace ──────────────────────────────────────────────────────────────────────── */
.trace { padding: 0 .75rem 1rem; }
.evento {
  border: 1px solid var(--bordo); border-left: 3px solid var(--tenue);
  border-radius: .45rem; background: var(--fondo);
  padding: .5rem .6rem; margin-bottom: .4rem; font-size: .8rem;
}
.evento.ok      { border-left-color: var(--ok); }
.evento.errore  { border-left-color: var(--errore); }
.evento.saltato { border-left-color: var(--avviso); }
.evento.passo   { border-left-color: var(--accento); }
.evento .che { font-weight: 600; display: block; word-break: break-word; }
.evento .dettaglio { color: var(--tenue); display: block; margin-top: .15rem; }
.evento .durata { float: right; color: var(--tenue); font-variant-numeric: tabular-nums; }

/* ── Voce ───────────────────────────────────────────────────────────────────────── */
.centro.voce { align-items: center; justify-content: center; padding: 2rem; gap: .5rem; }
#faccia {
  width: min(20rem, 70vw); border-radius: 1rem; margin-bottom: 1rem;
  background: #000; aspect-ratio: 1; object-fit: cover;
}
.livello { height: 4px; background: var(--bordo); border-radius: 2px; margin-top: 1rem;
           width: min(22rem, 80vw); }
.livello > div { height: 100%; width: 0; background: var(--ok); border-radius: 2px;
                 transition: width .1s; }
#stato { margin-top: 1rem; color: var(--tenue); min-height: 2rem; text-align: center; }

/* ── I dialoghi (conferma, avviso) ──────────────────────────────────────────────────
 * Il markup lo costruisce `dialoghi.js`; qui c'e' solo come si vede. Stesso aspetto del
 * dialogo del numero nella pagina d'ingresso, cosi' le due cose non sembrano venire da
 * due programmi diversi. */
dialog.dialogo {
  border: 0; border-radius: 1rem; padding: 0; width: min(24rem, 92vw);
  box-shadow: 0 1.5rem 3rem rgba(16, 24, 40, .18), 0 0 0 1px var(--bordo);
  background: var(--fondo); color: var(--testo);
}
dialog.dialogo::backdrop { background: rgba(16, 24, 40, .45); backdrop-filter: blur(2px); }
@media (prefers-reduced-motion: no-preference) {
  dialog.dialogo[open] { animation: dialogo-entra .16s ease-out; }
  @keyframes dialogo-entra { from { opacity: 0; transform: translateY(.5rem) scale(.98); } }
}
.dialogo .dentro { padding: 1.5rem; }
.dialogo h2 { margin: 0 0 .35rem; font-size: 1.15rem; }
.dialogo .spiega { margin: 0 0 1.25rem; color: var(--tenue); font-size: .9rem; }
.dialogo .azioni { display: flex; gap: .5rem; }
.dialogo .azioni button {
  flex: 1; padding: .65rem 1rem; border-radius: .55rem; font: inherit; cursor: pointer;
}
.dialogo .secondario { border: 1px solid var(--bordo); background: var(--fondo); color: var(--testo); }
.dialogo .secondario:hover { border-color: var(--accento); }
.dialogo .primario { border: 0; background: var(--accento); color: #fff; }
.dialogo .primario:hover { background: #27497a; }
/* L'azione che non si recupera si vede che e' quella: rossa, e non e' quella su cui
 * parte il fuoco. */
.dialogo .pericolo { border: 0; background: var(--errore); color: #fff; }
.dialogo .pericolo:hover { background: #8c1e18; }

/* Su schermo stretto le barre laterali si tolgono di mezzo: la conversazione resta
 * leggibile invece di ridursi a una colonna di due parole. */
@media (max-width: 60rem) {
  .guscio { grid-template-columns: 1fr; }
  .lato { display: none; }
}