/* =============================================================
   Parea Sons — il bollo e il pannello dell'assistente

   La regola sta in SISTEMA.md §4septies. Due cose sole vanno tenute a
   mente leggendo questo foglio:

   IL BOLLO È TONDO, ed è la SECONDA eccezione del sito dopo il segno
   di zoom (§4ter). Non è uno stile: è un oggetto. Un sigillo di
   ceralacca è tondo perché è stampato, e questo segno non sta nella
   griglia della pagina — galleggia sopra, come un sigillo su una
   lettera. Resta la seconda e ultima.

   LA RIGA SULLA NATURA NON SI RIMPICCIOLISCE. È l'art. 50 del Reg.
   (UE) 2024/1689: sta sopra la conversazione, alla misura del testo
   di servizio e non del piè di pagina, e chi la volesse più discreta
   sta chiedendo di non rispettarlo.
   ============================================================= */

/* --- Il bollo -------------------------------------------------- */

/* Sta a `--z-pannello` come il visore della lente, e sotto ci finisce
   per ORDINE nel documento: il pannello dell'assistente arriva col
   blocco comune, prima del contenuto, mentre il visore lo appende
   js/lente.js in fondo al body. Verificato col visore aperto — sopra
   il bollo c'è `visore__telaio`. Non è un caso fortunato, è come sono
   fatte le due cose; se un giorno il bollo si spostasse in fondo al
   body, qui servirebbe un livello suo. */
.bollo {
  position: fixed;
  right: var(--s-24);
  bottom: var(--s-24);
  z-index: var(--z-pannello);
  display: grid;
  place-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bianco-lino);
  border: 1px solid var(--beige);
  cursor: pointer;
  transition:
    border-color var(--t-rapido) var(--ease),
    transform var(--t-medio) var(--ease);
}

.bollo:hover,
.bollo:focus-visible { border-color: var(--rosso); transform: translateY(-2px); }

.bollo:focus-visible { outline: 2px solid var(--rosso); outline-offset: 2px; }

/* Lo stemma, ritagliato dal logo unico come nell'header e nel footer:
   un file solo, tre viste. */
/* La proporzione la dichiara già .ps-logo--stemma in header.css:
   qui si dice solo quanto è grande. */
.bollo__segno { width: 30px; }

/* Col pannello aperto il bollo se ne va: la crocetta del pannello è
   già il modo di chiudere, e due chiusure a due centimetri l'una
   dall'altra sono una di troppo. */
.bollo[aria-expanded="true"] {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .bollo { transition: none; }
  .bollo:hover, .bollo:focus-visible { transform: none; }
}

/* --- Il pannello ----------------------------------------------
   Non è il cassetto laterale degli altri pannelli: quelli portano una
   lista che si scorre tutta, questo porta un discorso che cresce dal
   basso. Sta appoggiato all'angolo, sopra il bollo che lo ha aperto. */

.assistente {
  position: fixed;
  right: var(--s-24);
  bottom: var(--s-24);
  z-index: var(--z-pannello);
  display: grid;
  grid-template-rows: auto auto 1fr auto auto auto;
  width: min(380px, calc(100vw - var(--s-32)));
  max-height: min(560px, calc(100vh - var(--s-64)));
  background: var(--bianco-lino);
  border: 1px solid var(--beige);
  transform: translateY(8px);
  opacity: 0;
  visibility: hidden;
  transition:
    transform var(--t-medio) var(--ease),
    opacity var(--t-medio) var(--ease),
    visibility 0s linear var(--t-medio);
}

.assistente[data-aperto="sì"] {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.assistente .pannello__testa { padding: var(--s-16) var(--s-24); }

/* Sotto i 480px il pannello prende tutto: a quella larghezza un
   riquadro appoggiato all'angolo è un riquadro che copre metà pagina
   e non si legge. */
@media (max-width: 480px) {
  .assistente {
    right: 0;
    bottom: 0;
    width: 100vw;
    max-height: 82vh;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }
}

/* --- La dichiarazione (art. 50) -------------------------------- */

.assistente__natura {
  padding: var(--s-16) var(--s-24);
  font-family: var(--font-dato);
  font-size: var(--t-12);
  line-height: 1.6;
  color: var(--greige);
  background: var(--tortora-chiaro);
  border-bottom: 1px solid var(--filetto);
}

.assistente__natura a { color: var(--greige); text-decoration: underline; }
.assistente__natura a:hover { color: var(--rosso); }

/* --- Il discorso ----------------------------------------------- */

.assistente__discorso {
  display: grid;
  gap: var(--s-16);
  align-content: start;
  padding: var(--s-24);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.assistente__battuta {
  max-width: 88%;
  font-family: var(--font-testo);
  font-size: var(--t-16);
  line-height: 1.5;
}

/* Gli a-capo si tengono SOLO nelle battute che arriva a scrivere lo
   script: una risposta del modello può andare a capo, e senza questo
   verrebbe fuori un muro. Non sta sulla classe generale perché il
   saluto è scritto nel markup, e lì gli a-capo sono quelli del
   sorgente — con `pre-wrap` si vedevano in pagina, rientri compresi. */
.assistente__battuta--detta { white-space: pre-wrap; }

/* Le due voci si distinguono dal LATO e da un filetto, non da due
   fumetti colorati: il sito non ha pastiglie, e non le prende adesso. */
.assistente__battuta--casa {
  justify-self: start;
  padding-left: var(--s-16);
  border-left: 1px solid var(--oro);
}

.assistente__battuta--persona {
  justify-self: end;
  padding-right: var(--s-16);
  text-align: right;
  border-right: 1px solid var(--beige);
  color: var(--greige);
}

.assistente__battuta--guasto {
  justify-self: start;
  padding-left: var(--s-16);
  border-left: 1px solid var(--rosso-araldico);
}

/* I tre punti mentre si aspetta. Nessun testo: chi legge a voce ha
   già `aria-live` sul discorso e sentirà la risposta quando arriva. */
.assistente__attesa {
  justify-self: start;
  display: flex;
  gap: 4px;
  padding: var(--s-8) 0 var(--s-8) var(--s-16);
  border-left: 1px solid var(--oro);
}

.assistente__attesa i {
  width: 4px;
  height: 4px;
  background: var(--greige);
  animation: assistente-respiro 1200ms var(--ease) infinite;
}

.assistente__attesa i:nth-child(2) { animation-delay: 160ms; }
.assistente__attesa i:nth-child(3) { animation-delay: 320ms; }

@keyframes assistente-respiro {
  0%, 100% { opacity: .25; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .assistente__attesa i { animation: none; opacity: .6; }
}

/* --- Gli spunti ------------------------------------------------
   Tre domande già scritte. Spariscono alla prima battuta: servono a
   cominciare, non a restare. */

.assistente__spunti {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8);
  padding: 0 var(--s-24) var(--s-16);
}

.assistente__spunto {
  padding: 6px var(--s-16);
  font-family: var(--font-dato);
  font-size: var(--t-12);
  letter-spacing: 0.04em;
  color: var(--greige);
  border: 1px solid var(--filetto);
  cursor: pointer;
  transition:
    color var(--t-rapido) var(--ease),
    border-color var(--t-rapido) var(--ease);
}

.assistente__spunto:hover,
.assistente__spunto:focus-visible { color: var(--rosso); border-color: var(--rosso); }

/* --- Il campo -------------------------------------------------- */

.assistente__scrivi {
  display: flex;
  align-items: end;
  gap: var(--s-8);
  padding: var(--s-16) var(--s-24);
  border-top: 1px solid var(--filetto);
}

.assistente__scrivi textarea {
  flex: 1 1 auto;
  max-height: 7.5em;
  padding: var(--s-8) 0;
  font-family: var(--font-testo);
  font-size: var(--t-16);
  line-height: 1.4;
  color: var(--inchiostro);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--filetto);
  resize: none;
}

.assistente__scrivi textarea:focus {
  outline: none;
  border-bottom-color: var(--rosso);
}

/* È il cartellino di §3, in minuta: stessa tela rossa, stesso Cinzel
   maiuscolo, stesso tracking. Non è un bottone nuovo — è l'azione
   principale del pannello, e in questo sito l'azione principale ha una
   forma sola. */
.assistente__manda {
  flex: 0 0 auto;
  padding: var(--s-8) var(--s-16);
  font-family: var(--font-display);
  font-size: var(--t-12);
  letter-spacing: var(--tracking-medio);
  text-transform: uppercase;
  color: var(--bianco-lino);
  background: var(--rosso);
  cursor: pointer;
  transition: background var(--t-rapido) var(--ease);
}

.assistente__manda:hover { background: var(--rosso-cupo); }

.assistente__manda[disabled] {
  background: var(--beige);
  cursor: default;
}

/* --- Il piede -------------------------------------------------- */

.assistente__piede {
  padding: 0 var(--s-24) var(--s-16);
  font-family: var(--font-dato);
  font-size: var(--t-12);
}

.assistente__persona {
  position: relative;
  display: inline-block;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--greige);
  transition: color var(--t-rapido) var(--ease);
}

.assistente__persona:hover,
.assistente__persona:focus-visible { color: var(--rosso); }

/* Il gesto unico del sito, anche qui. */
.assistente__persona::after {
  content: "";
  position: absolute;
  inset: auto 0 -2px 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--t-medio) var(--ease);
}

.assistente__persona:hover::after,
.assistente__persona:focus-visible::after { transform: scaleX(1); }