/* Assistente: in alto il cerchio, che è il modo di parlargli; sotto, domande e risposte
   come in un quaderno di lavoro. La domanda è in carattere con le grazie (la voce di
   Marco), la risposta in bastoni (la voce dell'assistente). L'unica cosa che si muove
   è il cerchio. */

/* Registrate per poterle far scorrere con una transizione: quanto il cerchio è aperto
   (0 chiuso, 1 spalancato) e quanto è forte la voce in questo momento (0-1). */
@property --apri {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --livello {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

:root {
  --carta: #f6f5fa;
  --foglio: #ffffff;
  --inchiostro: #1b1826;
  --grigio: #5d586e;
  --riga: #dcd8e8;
  --viola: #6d28d9;
  --viola-testo: #5b21b6;
  --sopra-viola: #ffffff;
  --allarme: #a3271c;
  --allarme-fondo: #fbeceb;
  --avviso-fondo: #f3edff;

  --orbita-forte: #6d28d9;
  --orbita-debole: rgb(109 40 217 / 0.2);
  --satellite: #7c3aed;
  --bagliore: 124 58 237;

  --grazie: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --bastoni: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;

  --misura: 40rem;
  --bordo: max(1rem, env(safe-area-inset-left));
}

[data-tema="scuro"] {
  --carta: #0d0b16;
  --foglio: #1a1727;
  --inchiostro: #ece9f5;
  --grigio: #a59fb8;
  --riga: #322d45;
  --viola: #8b5cf6;
  --viola-testo: #c4b5fd;
  --sopra-viola: #0d0b16;
  --allarme: #ffb4a8;
  --allarme-fondo: #3a1c1a;
  --avviso-fondo: #241e38;

  --orbita-forte: #ded3ff;
  --orbita-debole: rgb(196 181 253 / 0.2);
  --satellite: #c8eeff;
  --bagliore: 139 92 246;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

/* Un'app, non un documento: testata, cerchio e campo restano fermi, scorre solo la conversazione. */
body {
  margin: 0;
  /* Non 100dvh: nella PWA sul telefono di Marco risulta più alto dello schermo che si vede, e il
     campo in basso finiva fuori (schermata del 02/10). Si segue la pagina (100%), e `--alto`, che
     app.js misura dallo schermo visibile, fa da tetto. */
  height: 100%;
  max-height: var(--alto, none);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--carta);
  color: var(--inchiostro);
  font-family: var(--bastoni);
  font-size: 1rem;
  line-height: 1.55;
}

.nascosto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 3px solid var(--viola);
  outline-offset: 2px;
}

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

.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 0.9rem;
  border: 1px solid var(--riga);
  border-radius: 0.5rem;
  background: var(--foglio);
  color: var(--inchiostro);
  font: inherit;
  font-size: 0.9375rem;
  text-decoration: none;
  cursor: pointer;
}

.bottone:hover {
  border-color: var(--viola);
}

.bottone-pieno {
  border-color: var(--viola);
  background: var(--viola);
  color: var(--sopra-viola);
  font-weight: 600;
}

.bottone-pieno:disabled {
  opacity: 0.55;
  cursor: default;
}

.scelta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 0.4rem 0 0.9rem;
  border: 1px solid var(--riga);
  border-radius: 0.5rem;
  background: var(--foglio);
  font-size: 0.9375rem;
}

.scelta-nome {
  color: var(--grigio);
}

.scelta-campo {
  flex: 1;
  min-height: 2.25rem;
  border: 0;
  background: transparent;
  color: var(--inchiostro);
  font: inherit;
  cursor: pointer;
}

.scelta-campo option {
  background: var(--foglio);
  color: var(--inchiostro);
}

/* ── Testata ─────────────────────────────────────────────────────────── */

.testata {
  flex: none;
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: max(0.6rem, env(safe-area-inset-top)) var(--bordo) 0.6rem;
}

.testata-nome {
  margin: 0 auto 0 0;
  font-family: var(--grazie);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.menu {
  display: none;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  padding-top: 0.25rem;
}

.menu.aperto {
  display: flex;
}

/* I dispositivi collegati stanno nel menu come gli altri tasti. */
.menu-dispositivi {
  display: contents;
}

.menu-codice {
  margin: 0;
  padding: 0.6rem 0.9rem;
  border-radius: 0.5rem;
  background: var(--avviso-fondo);
  font-variant-numeric: tabular-nums;
}

/* Su uno schermo largo il menu è un riquadro che si apre sotto il tasto, a destra: i tasti
   tutti in fila occupavano la testata intera. */
@media (min-width: 40rem) {
  .menu {
    position: absolute;
    top: 100%;
    right: var(--bordo);
    width: 21rem;
    max-height: calc(var(--alto, 100vh) - 5rem);
    padding: 0.6rem;
    border: 1px solid var(--riga);
    border-radius: 0.75rem;
    background: var(--foglio);
    box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 0.28);
    overflow-y: auto;
  }

  .menu .bottone,
  .menu .scelta {
    background: var(--carta);
  }
}

/* ── Scena: il cerchio, il saluto, lo stato ──────────────────────────── */

.scena {
  flex: none;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem var(--bordo) 0.9rem;
  text-align: center;
}

/* Qualche stella, solo col tema scuro. Disegnate a mano: niente immagini. */
[data-tema="scuro"] .scena::before {
  content: "";
  position: absolute;
  inset: -4rem 0 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 8% 30%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 17% 68%, #cfc4ff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 24% 22%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 31% 84%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 38% 12%, #c8eeff 50%, transparent 51%),
    radial-gradient(1px 1px at 62% 9%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 71% 76%, #cfc4ff 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 28%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 86% 58%, #c8eeff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 93% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 4% 88%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 96% 90%, #fff 50%, transparent 51%);
  opacity: 0.55;
}

/* Senza conversazione la rete sta al centro dello schermo e prende lo spazio libero; quando si
   comincia a parlare sale in alto, piccola, e sotto scorrono domande e risposte. */
[data-conversazione="no"] .scena {
  flex: 1;
  min-height: 0;
  justify-content: center;
  overflow: hidden; /* con la tastiera aperta lo spazio è poco: niente deve finire sopra il campo */
}

/* Schermo basso (telefono con la tastiera aperta): resta solo la rete, più piccola. */
@media (max-height: 36rem) {
  [data-conversazione="no"] .cerchio {
    --lato: min(60vw, 38vh);
  }

  [data-conversazione="no"] .scena-saluto {
    display: none;
  }
}

[data-conversazione="no"] .pagina {
  flex: none;
}

.scena-saluto {
  position: relative;
  margin: 0.9rem 0 0.2rem;
  font-family: var(--grazie);
  font-size: clamp(1.5rem, 6vw, 2.1rem);
  font-weight: 500;
  line-height: 1.2;
  text-wrap: balance;
}

.scena-stato {
  position: relative;
  margin: 0;
  max-width: 34rem;
  min-height: 1.55em;
  color: var(--grigio);
  overflow-wrap: anywhere;
}

[data-voce="ascolta"] .scena-stato,
[data-voce="parla"] .scena-stato,
[data-voce="pensa"] .scena-stato {
  color: var(--viola-testo);
  font-family: var(--grazie);
  font-size: 1.0625rem;
}

[data-conversazione="si"] .scena-saluto {
  display: none;
}

[data-conversazione="si"] .scena-stato {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
}

/* ── Il cerchio ───────────────────────────────────────────────────────
   Una rete neurale a forma di vortice (Vortis): un imbuto visto di lato, come un uragano,
   fatto di nodi collegati lungo due spirali che ruotano, con impulsi che corrono lungo i fili. La disegna rete.js su una tela; qui ci sono solo la misura e l'alone dietro.
   Dice in che momento è la conversazione: fermo (pochi impulsi), ti ascolta (si apre e
   segue il volume della tua voce), ci pensa (scariche ovunque), parla (dal centro in
   fuori). Lo stato è scritto anche a parole, sotto. */

.cerchio {
  --lato: min(78vw, 44vh, 24rem);
  --apri: 0;
  --livello: 0;
  position: relative;
  flex: none;
  width: var(--lato);
  height: var(--lato);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: --apri 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), --livello 0.1s linear, width 0.45s ease, height 0.45s ease;
  animation: nasce 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.cerchio:disabled {
  cursor: default;
}

[data-conversazione="si"] .cerchio {
  --lato: min(30vw, 16vh, 7.5rem);
}

[data-voce="ascolta"] .cerchio {
  --apri: 1;
}

[data-voce="pensa"] .cerchio {
  --apri: 0.3;
}

[data-voce="parla"] .cerchio {
  --apri: 0.55;
}

@keyframes nasce {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}

.cerchio-alone {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--bagliore) / calc(0.14 + var(--livello) * 0.3)), transparent 72%);
  transform: scale(calc(0.9 + var(--apri) * 0.1 + var(--livello) * 0.12));
}

/* La tela sborda un po' dal tasto: i nodi davanti, ingranditi dalla prospettiva, non
   vengono tagliati. */
.cerchio-rete {
  position: absolute;
  inset: -9%;
  width: 118%;
  height: 118%;
  pointer-events: none;
}

.cerchio:hover:not(:disabled) .cerchio-rete {
  filter: brightness(1.12);
}

@media (prefers-reduced-motion: reduce) {
  .cerchio {
    animation: none;
    transition: none;
  }
}

/* ── Pagina: ciò che scorre ──────────────────────────────────────────── */

.pagina {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: calc(var(--misura) + 2 * var(--bordo));
  margin: 0 auto;
  padding: 0.5rem var(--bordo) 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.avviso {
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  border-radius: 0.5rem;
  background: var(--avviso-fondo);
  font-size: 0.9375rem;
}

/* ── Scambi: domanda come titolo, risposta sotto, fonti in calce ─────── */

.scambi {
  margin: 0;
  padding: 0;
  list-style: none;
}

.scambio {
  margin: 0 0 2.25rem;
}

.scambio-domanda {
  margin: 0 0 0.6rem;
  font-family: var(--grazie);
  font-size: 1.3125rem;
  font-weight: 500;
  line-height: 1.3;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.scambio-risposta {
  margin: 0;
  padding-left: 0.9rem;
  border-left: 3px solid var(--viola);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.scambio-calce {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
  margin: 0.6rem 0 0;
  padding-left: calc(0.9rem + 3px);
  color: var(--grigio);
  font-size: 0.875rem;
}

.scambio-leggi {
  min-height: 2.25rem;
  padding: 0 0.6rem;
  border: 1px solid var(--riga);
  border-radius: 0.5rem;
  background: transparent;
  color: var(--viola-testo);
  font: inherit;
  cursor: pointer;
}

.scambio-leggi:hover {
  border-color: var(--viola);
}

/* Un'azione preparata dall'assistente, da confermare: il testo si può correggere prima. */
.proposta {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0.9rem 0 0;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--viola);
  border-radius: 0.5rem;
  background: var(--avviso-fondo);
}

.proposta-titolo {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.proposta-contesto {
  margin: 0;
  color: var(--grigio);
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}

.proposta-testo {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--riga);
  border-radius: 0.5rem;
  background: var(--foglio);
  color: var(--inchiostro);
  font: inherit;
  line-height: 1.4;
  resize: none; /* l'altezza la dà il testo: si vede sempre tutto */
  overflow: hidden;
}

.proposta-tasti {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.proposta-esito {
  margin: 0;
  min-height: 1.4em;
  color: var(--viola-testo);
  overflow-wrap: anywhere;
}

.proposta-esito:empty {
  display: none;
}

.attesa {
  margin: 0 0 2rem;
  padding-left: 0.9rem;
  border-left: 3px solid var(--viola);
  color: var(--grigio);
}

/* ── Schermo largo (PC): Zeno a sinistra, la conversazione a destra ───── */

@media (min-width: 60rem) {
  body {
    display: grid;
    grid-template-columns: minmax(22rem, 2fr) 3fr;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .testata {
    grid-column: 1 / -1;
  }

  .scena,
  [data-conversazione="no"] .scena {
    grid-column: 1;
    grid-row: 2 / 4;
    min-height: 0;
    justify-content: center;
    border-right: 1px solid var(--riga);
    overflow: hidden;
  }

  /* Zeno resta grande anche a conversazione avviata: lo spazio è suo. */
  .cerchio,
  [data-conversazione="si"] .cerchio {
    --lato: min(32vw, 62vh, 28rem);
  }

  [data-conversazione="si"] .scena-stato {
    margin-top: 0.9rem;
    font-size: 1rem;
  }

  .pagina,
  [data-conversazione="no"] .pagina {
    grid-column: 2;
    grid-row: 2;
    padding-top: 1.5rem;
  }

  .scrivi {
    grid-column: 2;
    grid-row: 3;
  }
}

/* ── Scrittura ───────────────────────────────────────────────────────── */

.scrivi {
  flex: none;
  width: 100%;
  max-width: calc(var(--misura) + 2 * var(--bordo));
  margin: 0 auto;
  padding: 0.6rem var(--bordo) max(0.6rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--riga);
}

.scrivi-riga {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}

.scrivi-campo {
  flex: 1;
  min-height: 2.75rem;
  max-height: 10rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--riga);
  border-radius: 0.5rem;
  background: var(--foglio);
  color: var(--inchiostro);
  font: inherit;
  line-height: 1.4;
  resize: none;
}

/* Il microfono per un messaggio a voce: mentre registra diventa il tasto per mandarlo. */
.bottone-mic {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  padding: 0;
  color: var(--viola-testo);
}

.bottone-mic .mic-acceso,
.bottone-mic[aria-pressed="true"] .mic-riposo {
  display: none;
}

.bottone-mic[aria-pressed="true"] {
  border-color: var(--viola);
  background: var(--viola);
  color: var(--sopra-viola);
}

.bottone-mic[aria-pressed="true"] .mic-acceso {
  display: block;
}

.scrivi-campo::placeholder {
  color: var(--grigio);
}

.scrivi-aiuto {
  display: none;
  margin: 0.4rem 0 0;
  color: var(--grigio);
  font-size: 0.8125rem;
}

@media (min-width: 48rem) and (hover: hover) {
  .scrivi-aiuto {
    display: block;
  }
}

.errore {
  margin: 0 0 0.5rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.5rem;
  background: var(--allarme-fondo);
  color: var(--allarme);
  font-size: 0.9375rem;
}

.errore-link {
  color: inherit;
  font-weight: 600;
}

/* Nota sotto il campo: dice se la risposta a una domanda scritta verrà anche letta. */
.scrivi-voce {
  margin: 0.4rem 0 0;
  color: var(--grigio);
  font-size: 0.8125rem;
}

/* ── La porta d'ingresso (istanze con accesso proprio) ───────────────── */

.accesso {
  display: flex; /* anche sugli schermi larghi, dove il corpo della pagina è una griglia */
  align-items: center;
  justify-content: center;
}

.accesso-scatola {
  width: min(22rem, calc(100% - 2 * var(--bordo)));
  padding: 1.5rem;
  border: 1px solid var(--riga);
  border-radius: 0.75rem;
  background: var(--foglio);
}

.accesso-nome {
  margin: 0 0 0.25rem;
  font-family: var(--grazie);
  font-size: 1.75rem;
  font-weight: 600;
}

.accesso-testo {
  margin: 0 0 1.25rem;
  color: var(--grigio);
}

.accesso-modulo {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.accesso-etichetta {
  font-size: 0.9375rem;
  color: var(--grigio);
}

.accesso-campo {
  flex: none;
  width: 100%;
  background: var(--carta);
}