/* ==========================================================================
   ESTRIA — Assistente in chat (presente su tutte le pagine)

   Ricostruito il 17/08/2026 sul design Figma ESTRIA-26 (componenti "Chatbot-1"
   e "Chat-1" su DESKTOP, "M/Chat-1" su MOBILE) e sui 13 commenti di Gigi.
   Specifica e decisioni: docs/TODO-CHATBOT.md, sezione "Fase 4".

   Due pezzi:
   - la BARRA, fissa sulla pagina, che è un campo di testo vero (non un
     bottone): si scrive lì dentro e all'invio si apre la chat;
   - il PANNELLO, che si apre in overlay sopra la pagina — che resta visibile,
     sfocata e scurita — e non è una pagina a sé.

   z-index 200: sopra navbar (100) e dock dei casi (80), sotto il velo di
   transizione fra pagine (400). La barra di progresso (300) starebbe sopra,
   ma a chat aperta viene nascosta: non è la pagina che si sta leggendo.
   ========================================================================== */

.chatbot {
  --chatbot-edge: 30px;
  --chatbot-bar-h: 40px;
  --chatbot-bar-w: 464px;        /* barra sulla pagina */
  --chatbot-bar-w-panel: 710px;  /* campo dentro il pannello (Figma) */
  --chatbot-col: 958px;          /* colonna dei contenuti (Figma) */
  --chatbot-bg: #333333;
  --chatbot-bg-hover: #404040;
  --chatbot-face: #737373;      /* la faccina DENTRO la chat */
  --chatbot-face-bar: var(--grigio-3);  /* e quella FUORI, nella barra */
  /* Contorno e ombra della barra, dal Figma (Chatbot-1, varianti Default e
     Close-1). Che la variante ridotta a icona abbia il contorno più scuro è
     nel design, non è una svista.
     L'ombra è stata rifatta il 20/08/2026: offset 0/3, nero al 35%, uno strato
     solo invece dei due di prima, e sfocatura portata da 2 a 6 nel secondo giro
     della stessa giornata. Vale identica per la barra estesa e per quella
     ridotta a sola faccina: sta su .chatbot__bar--page, che è lo stesso
     elemento nei due stati. Attenzione se si torna a leggerla dall'API: lo
     `spread: 58` che riporta è il residuo di una variabile e non è quello che
     Figma disegna — misurato sul render, lo stacco laterale è di 1,5px, cioè
     spread 0. */
  --chatbot-line: #737373;
  --chatbot-line-icon: #595959;
  --chatbot-shadow: 0 3px 6px rgba(0, 0, 0, 0.35);
  --case-dock-h: 50px;   /* la misura vera la passa js/chatbot.js */
  /* Valori del Figma. Verificati in browser il 17/08/2026: a pagina ferma
     danno gia' la macchia piatta del mockup. Attenzione pero': finche' le
     animazioni d'ingresso del sito sono in corso, Chromium tiene gli elementi
     animati in un layer a parte e quelli possono restare nitidi dietro
     l'overlay. E' transitorio, ma e' la cosa da guardare per prima se il
     fondo sembra sbagliato. */
  --chatbot-blur: 120px;
}

/* --------------------------------------------------------------------------
   La barra
   -------------------------------------------------------------------------- */

.chatbot__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(var(--chatbot-bar-w), calc(100vw - var(--chatbot-edge) * 2));
  height: var(--chatbot-bar-h);
  padding: 0 12px;
  background: var(--chatbot-bg);
  border: 1px solid var(--chatbot-line);
  border-radius: 1px;
  cursor: text;
  transition: background 0.18s ease, width 0.3s cubic-bezier(0.75, 0, 0.2, 1),
              bottom 0.3s cubic-bezier(0.75, 0, 0.2, 1);
}

/* Solo la barra sulla pagina è fissa e reagisce allo scroll: quella in fondo
   al pannello è lo stesso componente ma sta nel flusso.

   Dal debug 0826-2 qui non si scrive più: il click apre la chat, e la domanda
   si scrive nel campo del pannello. Da qui il `cursor: pointer` in tutti gli
   stati, e il campo tolto dal giro dei puntatori — senza, il click gli darebbe
   il fuoco (e su iOS aprirebbe la tastiera) per l'istante che passa prima che
   il pannello lo sostituisca. Resta raggiungibile da tastiera: `pointer-events`
   non tocca il Tab, e chi arriva lì può ancora scrivere e premere invio. */
.chatbot__bar--page {
  position: fixed;
  left: 50%;
  bottom: var(--chatbot-edge);
  transform: translateX(-50%);
  z-index: 200;
  cursor: pointer;
  /* L'ombra è solo qui: nel pannello la barra sta su un fondo piatto e non
     ha niente su cui staccare. */
  box-shadow: var(--chatbot-shadow);
}

.chatbot__bar--page .chatbot__input { pointer-events: none; }

.chatbot__bar:hover,
.chatbot__bar:focus-within {
  background: var(--chatbot-bg-hover);
}

/* Il campo vero. Il segnaposto nativo è spento: al suo posto c'è
   .chatbot__ph, che ruota fra più frasi e che il placeholder non saprebbe
   animare. */
.chatbot__bar-field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
}

.chatbot__input {
  width: 100%;
  height: 100%;
  border: 0;
  background: none;
  color: var(--grigio-3);
  caret-color: var(--arancio-1);
  padding: 0;
}

.chatbot__input::placeholder { color: transparent; }
.chatbot__input:focus { outline: none; }

/* Segnaposto rotante: le frasi sono impilate e scorrono verso l'alto.
   Resta visibile anche col campo a fuoco — sparisce solo quando l'utente
   ha scritto qualcosa (decisione Gigi del 17/08/2026). */
.chatbot__ph {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  color: var(--chatbot-face);
  mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
}

.chatbot__ph-track {
  position: absolute;
  inset: 0;
  transition: transform 0.5s cubic-bezier(0.75, 0, 0.2, 1);
}

.chatbot__ph-item {
  height: 100%;
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chatbot__bar.has-text .chatbot__ph { display: none; }

/* Faccina a destra; lascia il posto alla freccia d'invio quando il campo è
   attivo (variante "Chat-1" del componente). */
.chatbot__bar-face,
.chatbot__bar-send {
  flex: none;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: var(--chatbot-face-bar);
  background: none;
  border: 0;
  padding: 0;
}

.chatbot__bar-face svg,
.chatbot__bar-send svg { width: 100%; height: 100%; }

.chatbot__bar-send { display: none; cursor: pointer; }

/* La freccia prende il posto della faccina appena il campo è pronto a
   ricevere testo, non solo quando il testo c'è già (debug 0818): basta il
   caret che lampeggia. */
.chatbot__bar.has-text .chatbot__bar-face,
.chatbot__bar:focus-within .chatbot__bar-face { display: none; }
.chatbot__bar.has-text .chatbot__bar-send,
.chatbot__bar:focus-within .chatbot__bar-send { display: grid; }

/* Dentro il pannello il campo è sempre quello su cui si scrive: lì la
   faccina non compare mai (debug 0818). */
.chatbot__form .chatbot__bar-face { display: none; }
.chatbot__form .chatbot__bar-send { display: grid; }

/* Ridotta a sola icona. Governata da [data-scroll] su <html>, che imposta
   js/main.js insieme agli stati della navbar: estesa in cima e sul footer,
   ridotta nel mezzo. Riusare quel segnale evita di ricalcolare qui la soglia
   del footer, che è tarata (debug 07/2026) e non banale.

   Ridotta, la barra scende anche di mezzo margine (debug 0820): si avvicina
   del 50% al bordo inferiore dello schermo e risale al suo posto solo quando
   torna estesa, cioè in cima e in fondo alla pagina. */
:root[data-scroll="scrolled"] .chatbot__bar--page {
  width: var(--chatbot-bar-h);
  padding: 0;
  justify-content: center;
  border-color: var(--chatbot-line-icon);
  bottom: calc(var(--chatbot-edge) / 2);
}

:root[data-scroll="scrolled"] .chatbot__bar--page .chatbot__bar-field,
:root[data-scroll="scrolled"] .chatbot__bar--page .chatbot__bar-send { display: none; }
:root[data-scroll="scrolled"] .chatbot__bar--page .chatbot__bar-face { display: grid; }

/* Col campo a fuoco la barra resta estesa anche a pagina scorsa (debug 0820).
   Su iOS aprire la tastiera fa scattare uno scroll, [data-scroll] passa a
   "scrolled" e la barra si richiudeva a faccina proprio mentre l'utente stava
   per scrivere, portandosi via il campo e il testo appena digitato.

   E lo stesso vale al passaggio del mouse (debug 0826): la barra ridotta a
   faccina, in hover, torna la barra intera — la stessa che si vede in hover
   quando la barra e' nella sua versione estesa, quindi anche col fondo piu'
   chiaro, che arriva da .chatbot__bar:hover piu' su. Fuori da @media (hover)
   non ci si entra: su un device a tocco l'hover resta appiccicato dopo il tap
   e la barra rimarrebbe aperta da sola. Il click continua ad aprire la chat,
   come sulla faccina. */
:root[data-scroll="scrolled"] .chatbot__bar--page:focus-within {
  width: min(var(--chatbot-bar-w), calc(100vw - var(--chatbot-edge) * 2));
  padding: 0 12px;
  justify-content: flex-start;
  border-color: var(--chatbot-line);
  bottom: var(--chatbot-edge);
}

:root[data-scroll="scrolled"] .chatbot__bar--page:focus-within .chatbot__bar-field { display: flex; }
:root[data-scroll="scrolled"] .chatbot__bar--page:focus-within .chatbot__bar-face { display: none; }
:root[data-scroll="scrolled"] .chatbot__bar--page:focus-within .chatbot__bar-send { display: grid; }

@media (hover: hover) {
  :root[data-scroll="scrolled"] .chatbot__bar--page:hover {
    width: min(var(--chatbot-bar-w), calc(100vw - var(--chatbot-edge) * 2));
    padding: 0 12px;
    justify-content: flex-start;
    border-color: var(--chatbot-line);
    bottom: var(--chatbot-edge);
  }

  :root[data-scroll="scrolled"] .chatbot__bar--page:hover .chatbot__bar-field { display: flex; }
  :root[data-scroll="scrolled"] .chatbot__bar--page:hover .chatbot__bar-face { display: none; }
  :root[data-scroll="scrolled"] .chatbot__bar--page:hover .chatbot__bar-send { display: grid; }
}

/* Pagine dei casi: la barra resta in basso come altrove, 15px sopra la dock
   (debug 0818 — annulla la risalita sotto la navbar decisa il 17/08/2026).
   Torna comune anche il comportamento allo scroll, quindi qui non serve più
   nessuna eccezione: si riduce a icona come sulle altre pagine.
   Quando la dock scivola via sul footer la barra la segue, altrimenti
   resterebbe sospesa sul vuoto: lo stato arriva da [data-dock] su <html>,
   che js/main.js imposta insieme a .is-hidden della dock. */
.chatbot--dock .chatbot__bar--page {
  bottom: calc(var(--case-dock-h) + 15px);
}

/* Qui sotto la barra non c'è il bordo dello schermo ma la dock, e dimezzare la
   distanza dal bordo la porterebbe sopra la dock. Si dimezza quindi lo stacco
   dalla dock, che è ciò che davvero la separa da quel che sta sotto. */
:root[data-scroll="scrolled"] .chatbot--dock .chatbot__bar--page {
  bottom: calc(var(--case-dock-h) + 7.5px);
}

:root[data-dock="hidden"] .chatbot--dock .chatbot__bar--page {
  bottom: var(--chatbot-edge);
}

:root[data-scroll="scrolled"][data-dock="hidden"] .chatbot--dock .chatbot__bar--page {
  bottom: calc(var(--chatbot-edge) / 2);
}

/* Barra tornata estesa sulle pagine dei casi: lo stacco dalla dock torna quello
   della versione estesa, 15px invece di 7,5 (e il margine pieno dal bordo dove
   la dock e' scivolata via). Senza questo il mouse apre la barra e la vede
   scendere di 7,5px proprio mentre la clicca. */
:root[data-scroll="scrolled"] .chatbot--dock .chatbot__bar--page:focus-within {
  bottom: calc(var(--case-dock-h) + 15px);
}

:root[data-scroll="scrolled"][data-dock="hidden"] .chatbot--dock .chatbot__bar--page:focus-within {
  bottom: var(--chatbot-edge);
}

@media (hover: hover) {
  :root[data-scroll="scrolled"] .chatbot--dock .chatbot__bar--page:hover {
    bottom: calc(var(--case-dock-h) + 15px);
  }

  :root[data-scroll="scrolled"][data-dock="hidden"] .chatbot--dock .chatbot__bar--page:hover {
    bottom: var(--chatbot-edge);
  }
}

/* Menu aperto, pagina Contatti e pagina Prenota: la barra non c'è (debug
   0818). La chat resta comunque raggiungibile se era già aperta prima di
   arrivarci — per esempio seguendo una CTA del bot. */
:root.menu-is-open .chatbot__bar--page,
.chatbot--no-bar .chatbot__bar--page { display: none; }

.chatbot.is-open .chatbot__bar--page { display: none; }

/* --------------------------------------------------------------------------
   Il pannello, in overlay sopra la pagina
   -------------------------------------------------------------------------- */

.chatbot__panel {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  /* Nero al 50% dal debug 0826; prima era #333333 al 75%. Il blur resta
     quello di sempre. */
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(var(--chatbot-blur));
  -webkit-backdrop-filter: blur(var(--chatbot-blur));
  color: var(--grigio-3);
  /* su iOS la tastiera riduce la viewport: l'altezza la impone il JS via
     visualViewport, questa è la posizione di riposo */
  height: 100%;
  /* Apertura e chiusura in dissolvenza (debug 0818). [hidden] non è
     animabile: js/chatbot.js lo toglie prima di accendere .is-open e lo
     rimette a dissolvenza finita. */
  opacity: 0;
  transition: opacity 0.32s ease;
}

.chatbot__panel[hidden] { display: none; }
.chatbot.is-open .chatbot__panel { opacity: 1; }

/* Col pannello aperto la pagina dietro non deve scorrere: resta visibile
   sfocata, ma non è più il documento che si sta leggendo. */
:root.chatbot-locked,
:root.chatbot-locked body { overflow: hidden; }

/* overflow:hidden da solo non regge su iOS: se il tocco parte dal pannello
   Safari scorre lo stesso la pagina sotto (debug 0818). L'unico blocco che
   tiene è togliere il body dal flusso; js/chatbot.js si ricorda a che punto
   era lo scroll e lo rimette, altrimenti chiudendo si tornerebbe in cima. */
:root.chatbot-locked body {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
}

/* Sopra la chat la barra di avanzamento della lettura non vuol dire niente:
   quella che scorre non è più la pagina (debug 0818). */
:root.chatbot-locked .scroll-progress { display: none; }

/* Dal debug 0826 qui restano solo i due bottoni, indietro a sinistra e nuova
   chat a destra: la faccina che stava in mezzo e' scesa nella conversazione. */
.chatbot__head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 20px 30px;
  min-height: 70px;
}

/* Le due icone in cima — indietro a sinistra, nuova chat a destra — sono lo
   stesso bottone con la stessa resa (debug 0818). */
.chatbot__back,
.chatbot__head-btn {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--grigio-3);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: opacity 0.18s ease;
}

/* Dal debug 0826 le due icone sono "Back-1" e "Refresh-1", disegnate nella
   stessa gabbia e con lo stesso ingombro dentro la viewBox: qui vale una
   misura sola, e non serve più la correzione che rimpiccioliva il "più"
   perché riempiva molto più della freccetta. I 24px tengono le icone alte
   quanto prima (18px): a riquadro pieno crescerebbero a 21. */
.chatbot__back svg,
.chatbot__head-btn svg { width: 24px; height: 24px; }

.chatbot__back:hover,
.chatbot__back:focus-visible,
.chatbot__head-btn:hover,
.chatbot__head-btn:focus-visible { opacity: 0.6; }

.chatbot:not(.has-messages) .chatbot__head-btn { visibility: hidden; }

/* Il segno del bot: la faccina piccola e, sotto, "Ci sto pensando…".

   Stava in cima al pannello, al centro della testata; dal debug 0826 sta in
   coda alla conversazione, sotto la risposta del bot — e' js/chatbot.js a
   rimetterlo in fondo al log ogni volta che arriva qualcosa. Centrarlo dentro
   al log basta a centrarlo sullo schermo: il log e' gia' una colonna centrata,
   e su mobile e' largo quanto lo schermo.

   `flex: none` per la stessa ragione delle CTA: in una colonna flex piena
   verrebbe schiacciato invece di far scorrere il log. */
.chatbot__mark {
  flex: none;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Lo stacco fra faccina e riga: la faccina cresciuta si porta dietro anche i
     18/40 di vuoto che l'SVG ha sotto la bocca, che a 36px fanno 7,2px. Con 4
     di gap lo stacco a video resta gli ~11px chiesti dal debug 0820. */
  gap: 4px;
  /* #737373, la stessa tinta della faccia grande dello stato vuoto: dal debug
     0826-2 le due facce dentro la chat sono dello stesso colore. Il testo qui
     sotto non eredita, ha il suo. */
  color: var(--chatbot-face);
}

.chatbot__mark-face { display: flex; }

/* 36px: i 24 di prima cresciuti del 50% (debug 0826-2). Vale per tutt'e due le
   espressioni, che stanno nello stesso riquadro. */
.chatbot__mark-face svg { width: 36px; height: 36px; }

/* Il bot che pensa (debug 0818): l'attesa non sta nel log al posto della
   risposta in arrivo, è la faccina che cambia espressione, con la riga "Ci sto
   pensando…" appena sotto. Le due espressioni stanno entrambe nel DOM e le
   alterna una classe su .chatbot, così il passaggio non ricostruisce l'SVG e
   non fa ripartire l'animazione da capo. */
.chatbot__face-thinking { display: none; }
.chatbot.is-thinking .chatbot__face-idle { display: none; }
.chatbot.is-thinking .chatbot__face-thinking { display: block; }

/* La riga sta appena sotto la faccina: la distanza la da' il `gap` del segno,
   6px, che sommati al vuoto sotto la bocca dentro l'SVG fanno gli ~11px
   chiesti dal debug 0820. */
.chatbot__thinking {
  margin: 0;
  text-align: center;
  color: var(--grigio-2);
}

.chatbot__thinking[hidden] { display: none; }

/* --- stato vuoto: faccia grande al centro, campo a metà schermo ----------- */

/* Faccia grande e campo di scrittura formano un gruppo centrato: la faccia
   sopra, il campo appena sotto, e lo spazio restante in fondo. Il campo è lo
   stesso elemento che a conversazione avviata scende in basso — non se ne
   costruiscono due. */
.chatbot__hero {
  flex: 0 0 auto;
  margin-top: auto;
  display: flex;
  justify-content: center;
  padding: 0 30px 40px;
  color: var(--chatbot-face);
  transition: opacity 0.5s ease, visibility 0.5s;
}

.chatbot__hero svg { width: 120px; height: 120px; }

.chatbot:not(.has-messages) .chatbot__form { margin-bottom: auto; }

/* Dissolvenza vera al primo messaggio (commento #30): con display:none non ci
   sarebbe transizione, quindi la faccia esce di scena ma continua a non
   occupare spazio grazie a height:0. */
.chatbot.has-messages .chatbot__hero {
  opacity: 0;
  visibility: hidden;
  height: 0;
  padding: 0;
  margin-top: 0;
  overflow: hidden;
}

/* --- conversazione -------------------------------------------------------- */

.chatbot__log {
  flex: 1 1 auto;
  /* senza questo un elemento flex non scende sotto il proprio min-content:
     col recap aperto la colonna sfondava e il campo finiva coperto */
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 10px 0 30px;
  width: min(var(--chatbot-col), calc(100% - 60px));
  margin-inline: auto;
}

.chatbot:not(.has-messages) .chatbot__log { display: none; }

.chatbot__msg {
  max-width: 80%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* La domanda è in una bolla; la risposta è testo semplice, senza bolla e
   più chiara (Figma: #BFBFBF contro #F3F3F3). La bolla è arrotondata di 11px
   su tre angoli: quello in basso a destra resta vivo e la aggancia al lato
   da cui arriva (Figma, debug 0818). */
.chatbot__msg--user {
  align-self: flex-end;
  background: var(--chatbot-bg);
  color: var(--grigio-2);
  padding: 10px 14px;
  border-radius: 11px 11px 0 11px;
}

.chatbot__msg--bot {
  align-self: flex-start;
  color: var(--grigio-3);
}

.chatbot__msg--error {
  align-self: flex-start;
  color: var(--arancio-1);
}

.chatbot__msg a { color: inherit; text-decoration: underline; }

/* CTA proposte dal bot: in fila, scrollabili di lato se non ci stanno
   (commento #24).

   `flex: none` non è decorativo (debug 0820). Il log è un flex in colonna e
   questa riga, avendo overflow diverso da visible, perde la dimensione minima
   automatica: era l'unica figlia comprimibile, e appena la conversazione
   superava l'altezza del log veniva schiacciata da 34px a 2px — le CTA
   sparivano del tutto invece di far scorrere il log. Su mobile capitava
   quasi subito, ma succedeva anche su desktop con una chat abbastanza lunga. */
.chatbot__ctas {
  flex: none;
  align-self: flex-start;
  display: flex;
  gap: 8px;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.chatbot__ctas::-webkit-scrollbar { display: none; }

.chatbot__cta {
  flex: none;
  background: var(--chatbot-bg);          /* #333333, Figma */
  color: var(--grigio-3);
  padding: 8px 12px;
  border: 1px solid var(--chatbot-line-icon);   /* #595959, Figma */
  border-radius: 1px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s ease;
}

.chatbot__cta:hover,
.chatbot__cta:focus-visible { background: var(--chatbot-bg-hover); }

/* --- recap da confermare -------------------------------------------------- */

.chatbot__action {
  flex: none;
  width: min(var(--chatbot-col), calc(100% - 60px));
  margin-inline: auto;
  padding: 20px;
  background: var(--chatbot-bg);
}

.chatbot__action[hidden] { display: none; }

.chatbot__action-title {
  margin: 0 0 12px;
  color: var(--arancio-1);
}

.chatbot__action-list {
  margin: 0 0 15px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 12px;
}

.chatbot__action-list dt { color: var(--grigio-2); }

.chatbot__action-list dd {
  margin: 0;
  color: var(--grigio-3);
  overflow-wrap: anywhere;
}

.chatbot__consent {
  margin: 0 0 15px;
  color: var(--grigio-2);
}

.chatbot__consent a { color: var(--grigio-2); }

.chatbot__captcha { margin-bottom: 15px; }
.chatbot__captcha:empty { display: none; }

.chatbot__action-buttons { display: flex; gap: 10px; }

.chatbot__action-buttons .btn {
  flex: 0 1 220px;
  height: 40px;
  padding: 0 15px;
}

/* --- campo in fondo al pannello ------------------------------------------- */

.chatbot__form {
  flex: none;
  display: flex;
  justify-content: center;   /* il campo è centrato, come la faccia sopra */
  padding: 0 30px 30px;
}

.chatbot__form .chatbot__bar {
  width: min(var(--chatbot-bar-w-panel), 100%);
}

/* La riga sulle imprecisioni sta al centro della pagina (debug 0818): il
   bottone "Nuova" che le stava accanto è diventato l'icona in alto a destra.

   Il colore è #BFBFBF e non il #737373 della faccina (debug 0820: «sul desktop
   non vedo la frase»). Il pannello è un velo al 75% su una pagina sfocata: il
   fondo che ne esce sta intorno a #666, e su quello il #737373 spariva. È lo
   stesso grigio di «Ci sto pensando…», che infatti si è sempre letto. */
.chatbot__foot {
  flex: none;
  margin: 0;
  padding: 0 0 15px;
  width: min(var(--chatbot-col), calc(100% - 60px));
  margin-inline: auto;
  text-align: center;
  color: var(--grigio-2);
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .chatbot {
    --chatbot-edge: 15px;
    --chatbot-bar-h: 48px;
    --chatbot-blur: 64px;
  }

  .chatbot__head { padding: 15px; min-height: 60px; }
  .chatbot__action { padding: 15px; }
  .chatbot__form { padding: 0 15px 15px; }
  .chatbot__foot { padding: 0 0 10px; width: calc(100% - 30px); }

  /* Il log arriva ai bordi e sono i suoi figli a rientrare (debug 0820): così
     la fila di CTA può scorrere per tutta la larghezza dello schermo, qualunque
     sia il device, invece che dentro una colonna già stretta di 30px. I balloon
     restano dove li ha voluti il debug 0818, a 15px dai bordi. */
  .chatbot__log { padding: 10px 0 20px; gap: 20px; width: 100%; }

  .chatbot__msg {
    margin-inline: var(--chatbot-edge);
    /* 88% dello spazio fra i due margini: prima era 88% del log, che i 30px
       li aveva già tolti lui. Il balloon resta largo com'era. */
    max-width: calc((100% - var(--chatbot-edge) * 2) * 0.88);
  }

  /* La finestra di scorrimento è tutto lo schermo; il rientro lo dà il padding,
     che i browser rispettano anche in fondo allo scorrimento: l'ultima CTA si
     ferma a 15px dal bordo come la prima. */
  .chatbot__ctas {
    padding-inline: var(--chatbot-edge);
    scroll-padding-inline: var(--chatbot-edge);
  }

  /* Faccina e barra si toccavano: lo spazio che si vedeva erano i 18px di vuoto
     interno dell'SVG sotto la bocca. Il debug 0820 chiede di raddoppiarlo, da
     qui i 18px di padding. (Il `gap: 30px` che stava qui non faceva niente: la
     faccia è figlia unica di un flex.) */
  .chatbot__hero { padding: 0 15px 18px; }
  .chatbot__hero svg { width: 90px; height: 90px; }

  /* iOS ingrandisce la pagina quando prende il fuoco un campo sotto i 16px, e
     lo zoom resta anche dopo aver chiuso la chat (debug 0818). Il rimedio è
     il campo a 16px: bloccare la viewport con maximum-scale toglierebbe
     all'utente lo zoom manuale su tutto il sito. */
  .chatbot__input,
  .chatbot__ph { font-size: 16px; }

  .chatbot__action-buttons .btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .chatbot__bar,
  .chatbot__back,
  .chatbot__cta,
  .chatbot__head-btn,
  .chatbot__panel,
  .chatbot__ph-track,
  .chatbot__hero { transition: none; }
}