/* ============================================================
   PEPPER — LA CHAT DELLE PERSONE (public/chat/)

   Questo file lo carica SOLO l'area /chat/, e contiene solo
   quello che lì c'è e nel pannello no: l'impaginazione da
   applicazione, l'elenco delle chat a sinistra e la barra della
   chat aperta.

   Quello che NON sta qui, e non ci deve finire:
   - le bolle, il campo per scrivere, il tasto d'invio. Quelle
     sono del KIT (kit.php), le stesse identiche di tutti gli
     altri progetti. Se una cosa della chat non va bene si
     sistema LÀ, o fra sei mesi la chat di Pepper è di nuovo
     diversa da tutte le altre;
   - i colori. Stanno in 04-pepper.css e qui si usano per nome.

   ------------------------------------------------------------
   PERCHÉ QUESTO FILE È STATO RIFATTO (11 settembre)

   Sul telefono non si vedeva la barra per scrivere. La prima
   versione dava al riquadro un'altezza «schermo meno 150px» e
   sopra ci metteva una `page-head` — il componente delle pagine
   del pannello. Ma sotto i 640px il kit di stile, giustamente,
   fa questo alle page-head (§11):

       .content > h1   font-size: 30px
       .page-head      si impila in colonna
       .page-head .btn larghezza 100%

   Titolo enorme + due bottoni a tutta riga = circa duecento
   pixel, contro i 150 che avevo scontato. Il riquadro sfondava
   lo schermo di sotto, e la barra per scrivere finiva sotto il
   bordo: la conversazione si leggeva e non si poteva rispondere.

   Due lezioni, tutte e due scritte qui perché non si ripetano:

   1. UNA CHAT NON È UNA PAGINA CON UN TITOLO. Niente page-head:
      una barra sola, il titolo che si accorcia, i due gesti come
      segni sul telefono e come parole dove c'è spazio (§10ter).

   2. NIENTE NUMERI MAGICI NELLE ALTEZZE. Un `calc(100dvh - 150px)`
      è una scommessa su quanto è alto quello che c'è sopra, e la
      si perde al primo titolo che va a capo. Adesso è tutto
      `flex`: il riquadro prende quello che avanza, qualunque cosa
      ci sia sopra. La pagina non scorre — scorre la chat dentro
      di sé, che è esattamente quello che il kit si aspetta
      («sta dentro lo spazio che gli dà la pagina invece di
      allungarla»).
   ------------------------------------------------------------

   Ordine: 01-token, 02-base, 03-componenti, 04-pepper, 05-chat.
   ============================================================ */

/* ---- L'impaginazione: un'applicazione, non una pagina --------
   Alta quanto lo schermo meno la barra, e chiusa: dentro, l'unica
   cosa che scorre è la conversazione. `dvh` e non `vh` perché sul
   telefono la barra del browser entra ed esce, e con `vh` il campo
   per scrivere sparisce sotto il bordo proprio mentre ci scrivi.
   La riga `vh` resta sopra come ripiego per i browser vecchi. */

.chat-app {
  height: calc(100vh - var(--topbar-h));
  height: calc(var(--chat-alto, 100dvh) - var(--topbar-h));
  overflow: hidden;
  /* Tutta l'altezza al contenuto: la griglia del pannello ha anche la riga
     del piè di pagina, e senza questa riga lo spazio avanzato si divideva a
     metà fra le due. Sulla chat non si vedeva (il riquadro spinge giù da
     sé), sulla pagina dei piani tagliava le schede a metà schermo. */
  grid-template-rows: minmax(0, 1fr) auto;
}

/* ---- La pagina non scorre, mai (26 settembre) -----------------
   Sul telefono, aprendo la tastiera il browser spingeva su la pagina
   intera; chiudendola la lasciava spinta: il box per scrivere restava
   a mezz'aria e la pagina si trascinava su e giù. `100dvh` non basta,
   perché su iPhone (e su Android, di suo) la tastiera passa SOPRA la
   pagina senza accorciarla.
   Il rimedio è in due pezzi:
   - `--chat-alto` è l'altezza di quello che si vede davvero, schermo
     meno tastiera: la scrive lo script in fondo a _utente.php;
   - qui la pagina è chiusa: niente da scorrere, niente rimbalzo.
   `chat-ferma` la mette lo script solo dove c'è una chat: il login e
   gli inviti restano pagine normali che scorrono. */
html.chat-ferma,
html.chat-ferma body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

html.chat-ferma body {
  min-height: 0;
}

.chat-app .content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 0;       /* senza, un figlio che scorre allunga il padre */
  overflow: hidden;
  padding: var(--space-4) var(--space-5);
}

/* Il riquadro della chat prende tutto quello che avanza. Nessuna
   altezza scritta a mano: sopra di lui possono esserci una barra,
   due barre o il modulo per rinominare, e il conto torna sempre. */
.chat-riquadro {
  flex: 1 1 auto;
  min-height: 0;
}

/* ---- La colonna di sinistra ---------------------------------- */

/* Il bottone resta fermo in alto e sotto scorre solo l'elenco: con
   cento chat, «Nuova chat» non deve andarsene di sopra. */
.sidebar.chat-lato {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  overflow: hidden;
}

.chat-nuova {
  flex: 0 0 auto;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.chat-nuova svg {
  width: 18px;
  height: 18px;
}

.chat-etichetta {
  flex: 0 0 auto;
  margin: var(--space-2) 12px 0;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.chat-elenco {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: var(--space-3);
  /* Il menu del pannello è una GRIGLIA (`.sidebar nav { display: grid }`), e in
     una griglia alta quanto la colonna le righe si allungano per riempirla: con
     quattro chat venivano quattro mattoni da trecento pixel. Le righe stanno
     alte quanto il loro contenuto, e l'aria avanzata resta in fondo. */
  grid-auto-rows: min-content;
  align-content: start;
  /* E la colonna non si allarga oltre la sidebar: `minmax(0, 1fr)` perché una
     casella di griglia, di suo, non scende sotto la lunghezza del testo che ha
     dentro — ed era per quello che i titoli lunghi uscivano dal bordo invece di
     accorciarsi coi puntini. */
  grid-template-columns: minmax(0, 1fr);
}

/* Due righe per voce: il titolo e quando è stata usata l'ultima
   volta. Il componente del menu le mette in fila, qui vanno
   incolonnate. */
.sidebar nav.chat-elenco a {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  min-width: 0;        /* vedi sopra: senza, il titolo lungo allarga la riga */
  padding-top: 7px;
  padding-bottom: 7px;
}

/* Un titolo lungo si taglia con i puntini e NON allarga la colonna:
   `min-width: 0` perché dentro un flex il testo, da solo, si rifiuta
   di stringersi sotto la sua lunghezza. */
.chat-titolo {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--fs-body);
}

.chat-quando {
  font-size: var(--fs-small);
  color: var(--muted);
}

.sidebar nav.chat-elenco a.is-active .chat-quando {
  color: var(--accent);
  opacity: 0.75;
}

/* ---- La barra della chat aperta ------------------------------ */

.chat-barra {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 0 0 auto;
  min-height: 40px;
}

/* Il titolo è la prima frase che si è scritta: può essere lunga
   quanto le pare, quindi si accorcia coi puntini invece di mandare
   i bottoni a capo. */
.chat-barra h1 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.chat-gesti {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
}

/* Finché la chat non esiste non c'è niente da rinominare né da cancellare, e la
   pagina lo dice con l'attributo `hidden`. Ma `hidden` vale `display: none` come
   regola del BROWSER, e una classe la batte: senza questa riga i due bottoni si
   vedevano lo stesso, sopra una chat vuota. */
.chat-gesti[hidden] {
  display: none;
}

/* La riga che compare solo sulla chat nuova: dice cosa succede adesso, invece
   di lasciare un riquadro vuoto senza spiegazioni. */
.chat-invito {
  flex: 0 0 auto;
  margin: 0;
}

.chat-gesti .btn {
  width: auto;
  min-height: 38px;
  padding: 0 13px;
}

/* Cancellare è l'unico gesto senza ritorno: si tinge solo quando il
   dito ci è sopra, così non è un bottone rosso che grida dalla barra
   di una chat aperta per scrivere. */
.chat-cancella:hover,
.chat-cancella:focus-visible {
  border-color: var(--danger);
  color: var(--danger);
}

.chat-rinomina {
  flex: 0 0 auto;
  margin: 0;
  padding: var(--space-3) var(--space-4);
}

.chat-rinomina label {
  display: block;
  margin-bottom: 6px;
}

.chat-rinomina-riga {
  display: flex;
  gap: 10px;
  align-items: center;
}

.chat-rinomina-riga input {
  flex: 1 1 auto;
  min-width: 0;
}

/* ---- Telefono ------------------------------------------------ */

@media (max-width: 920px) {
  /* Qui la barra in alto è FISSA e il kit dà alla pagina un
     `padding-top` per non finirci sotto: l'altezza è tutto lo
     schermo, e il padding ci sta dentro (box-sizing: border-box). */
  .chat-app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: var(--chat-alto, 100dvh);
    padding-top: var(--topbar-h-mobile);
  }

  .chat-app .content {
    flex: 1 1 auto;
    /* Un dito d'aria sotto: l'ultima riga del kit è quella che dice «Pepper sta
       pensando…» o l'errore, e incollata al bordo non si legge. */
    padding: var(--space-3) var(--space-3) var(--space-3);
    gap: var(--space-2);
  }

  .sidebar.chat-lato {
    padding-bottom: var(--space-3);
  }
}

@media (max-width: 640px) {
  /* Il titolo della chat non è il titolo di una pagina: 30px qui
     sarebbero tre righe di schermo rubate alla conversazione. */
  .chat-barra h1 {
    font-size: 17px;
  }

  /* I due gesti diventano segni, come i bottoni della barra in alto.
     Scritti per esteso, sotto i 640px il kit li allarga a tutta riga
     (§11) e si portano via l'altezza che serve a scrivere. */
  .chat-gesti .btn {
    width: 38px;
    min-height: 38px;
    padding: 0;
  }

  .chat-gesti .con-spazio {
    display: none;
  }

  .chat-gesti .senza-spazio {
    display: inline-flex;
    align-items: center;
  }
}

/* ---- La barra del piano ---------------------------------------- */

/* Una riga sottile sotto il titolo: quanto si è usato del piano e quando
   si riparte. Non deve rubare spazio alla chat, quindi niente card: testo
   piccolo e una linea che si riempie. */
.chat-piano {
  flex: 0 0 auto;
  display: grid;
  gap: 6px;
  margin: 0;
  font-size: var(--fs-small);
  color: var(--muted);
}

.chat-piano-testo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
}

.chat-piano-testo strong {
  color: var(--text);
  font-weight: 600;
}

.chat-piano-barra {
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--line);
  overflow: hidden;
}

.chat-piano-barra span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.chat-piano.is-quasi .chat-piano-barra span { background: var(--warning); }
.chat-piano.is-finito .chat-piano-barra span { background: var(--danger); }
.chat-piano.is-finito .chat-piano-testo span:last-child { color: var(--text); }

.chat-piano-manca {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin: 0;
}

.chat-piano-manca .btn {
  width: auto;
}

.chat-piano-testo a {
  color: inherit;
  text-decoration: none;
}

.chat-piano-testo a:hover strong {
  text-decoration: underline;
}

/* ---- La pagina dei piani --------------------------------------- */

/* La colonna della chat non scorre (vedi «La pagina non scorre, mai»):
   qui scorre questo riquadro, che prende tutta l'altezza che avanza. */
.piani-pagina {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  align-content: start;
  gap: var(--space-4);
  max-width: 900px;
  padding-bottom: var(--space-4);
}

.piani-pagina .card,
.piani-pagina .alert {
  margin: 0;
}

.piani-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
}

.piano-scheda {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.piano-scheda form {
  margin-top: auto;
}

.piano-prezzo {
  margin: 0;
  font-size: var(--fs-lead);
}

.piano-scheda ul {
  margin: 0;
  padding-left: 18px;
}

/* Il campo-trappola dei moduli pubblici (iscrizione): fuori dallo schermo,
   non `display:none` (certi programmi saltano proprio quelli nascosti così). */
.campo-trappola {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Le pagine di soglia (accesso, invito, iscrizione) non hanno una chat da
   tenere ferma: il loro contenuto scorre, o il modulo dell'iscrizione — il
   più lungo — resterebbe tagliato sotto il bordo. */
.chat-app.senza-menu .content {
  overflow-y: auto;
}

/* ---- Il profilo in fondo alla colonna, come in ChatGPT ---------- */

.chat-profilo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
}

.chat-profilo:hover,
.chat-profilo.is-active {
  background: var(--accent-soft);
}

.profilo-cerchio {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--btn-text);
  font-weight: 700;
}

.chat-profilo-testo {
  display: grid;
  min-width: 0;
}

.chat-profilo-nome,
.chat-profilo-piano {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.chat-profilo-nome {
  font-weight: 500;
}

.chat-profilo-piano {
  font-size: var(--fs-small);
  color: var(--muted);
}

/* ---- Impostazioni ---------------------------------------------- */

.impostazioni h2 {
  margin-top: 0;
}

.profilo-testa {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: var(--space-3);
}

.profilo-testa .profilo-cerchio {
  width: 52px;
  height: 52px;
  font-size: 22px;
}

.impostazioni-riga {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.impostazioni-riga .campo {
  flex: 1 1 260px;
}

.impostazioni-riga .btn {
  width: auto;
}

.impostazioni-riga > span {
  align-self: center;
}

.utilizzo {
  display: grid;
  gap: 8px;
  margin-bottom: var(--space-3);
}

.utilizzo-testa {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 14px;
}

.utilizzo .chat-piano-barra {
  height: 8px;
}

.utilizzo .hint {
  margin: 0;
}

.utilizzo.is-quasi .chat-piano-barra span { background: var(--warning); }
.utilizzo.is-finito .chat-piano-barra span { background: var(--danger); }