/* DIALOGHI */
/* ------------------------------------------------ */
/* Le due cose che si sovrappongono alla pagina: il popup di contatto
   e l'assistente in basso a destra. Stanno insieme perche' condividono
   il modo di comparire e i canali di contatto che mostrano.

   Nessun token nuovo: tutto viene da tema.css. */


/* IL POPUP */
/* ------------------------------------------------ */

.popup {
  width: min(560px, calc(100vw - var(--sp-8)));
  max-height: min(86svh, 760px);
  padding: 0;
  border: 1px solid var(--bordo-su-chiaro);
  border-radius: var(--raggio-l);
  background: var(--superficie-chiara);
  box-shadow: var(--ombra-rilievo);
  color: var(--testo-su-chiaro);
  overflow: hidden;
}

/* Il fondo oscurato e sfocato lo disegna il browser: e' lo
   pseudo-elemento del <dialog>. Sfocare quello che sta sotto e non
   solo scurirlo toglie di mezzo il resto della pagina senza farlo
   sparire. */
.popup::backdrop {
  background: rgb(var(--rgb-fondo-scuro) / .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.popup__riquadro {
  position: relative;
  max-height: inherit;
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.popup__chiudi {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--bordo-su-chiaro);
  border-radius: var(--raggio-cerchio);
  background: var(--fondo-chiaro);
  color: var(--testo-su-chiaro-attenuato);
  transition: border-color var(--durata-media) ease,
              color var(--durata-media) ease;
}

.popup__chiudi:hover {
  border-color: var(--accento);
  color: var(--accento-su-chiaro);
}

.popup__chiudi svg {
  width: 16px;
  height: 16px;
}

.popup__titolo {
  margin-top: var(--sp-3);
  padding-right: var(--sp-10);
  font-size: var(--titolo-s);
}

.popup__sommario {
  margin-top: var(--sp-3);
  color: var(--testo-su-chiaro-attenuato);
  font-size: var(--testo-s);
  line-height: var(--interlinea-media);
}

.popup__chiosa {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--bordo-su-chiaro-tenue);
  color: var(--testo-su-chiaro-tenue);
  font-size: var(--testo-xxs);
  line-height: var(--interlinea-media);
}


/* I TRE CANALI */
/* ------------------------------------------------ */
/* In ordine di attrito crescente: un pulsante, dei recapiti, un
   modulo. I due secondi sono <details>, quindi si aprono senza una
   riga di JavaScript. */

.via {
  display: block;
  margin-top: var(--sp-4);
  border: 1px solid var(--bordo-su-chiaro);
  border-radius: var(--raggio-m);
  background: var(--fondo-chiaro);
  transition: border-color var(--durata-media) ease,
              box-shadow var(--durata-media) ease;
}

.via:hover {
  border-color: var(--accento);
}

.via--primaria {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-color: var(--accento);
  background: var(--grad-accento-superficie);
  color: var(--fondo-scuro);
}

.via--primaria:hover {
  color: var(--fondo-scuro);
  box-shadow: var(--ombra-passaggio);
}

.via__segno {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--raggio-cerchio);
  background: rgb(var(--rgb-fondo-scuro) / .12);
}

.via__segno svg {
  width: 24px;
  height: 24px;
}

.via__testo {
  display: grid;
  gap: 2px;
}

.via__nome {
  font-family: var(--font-display);
  font-size: var(--testo-l);
}

.via__nota {
  color: inherit;
  font-size: var(--testo-xs);
  line-height: var(--interlinea-media);
  opacity: .8;
}

.via__freccia {
  margin-left: auto;
}

.via__freccia svg {
  width: 20px;
  height: 20px;
}

/* --- I due canali apribili --- */

.via__sommario {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5);
  cursor: pointer;
  list-style: none;
}

/* Il triangolino di default va tolto in tre modi diversi, perche' i
   browser lo disegnano in tre modi diversi: la lista, lo pseudo
   ::marker della specifica, e il vecchio pseudo di WebKit. */
.via__sommario::marker {
  content: "";
}

.via__sommario::-webkit-details-marker {
  display: none;
}

.via__gallone svg {
  width: 18px;
  height: 18px;
  color: var(--accento-su-chiaro);
  transition: transform var(--durata-rapida) ease;
}

.via[open] .via__gallone svg {
  transform: rotate(180deg);
}

.via__corpo {
  padding: 0 var(--sp-5) var(--sp-5);
}

.via__corpo .via__nota {
  margin-top: var(--sp-4);
  color: var(--testo-su-chiaro-tenue);
  opacity: 1;
}


/* I RECAPITI */
/* ------------------------------------------------ */

.recapito {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--bordo-su-chiaro-tenue);
  color: var(--testo-su-chiaro);
}

.recapito:hover {
  color: var(--accento-su-chiaro);
}

.recapito__valore {
  font-family: var(--font-display);
  font-size: var(--testo-xl);
}

.orari {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--bordo-su-chiaro-tenue);
}

.orari dd {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  margin: var(--sp-2) 0 0;
  font-size: var(--testo-s);
}

.orari dd span:last-child {
  color: var(--testo-su-chiaro-attenuato);
  font-variant-numeric: tabular-nums;
}


/* IL MODULO */
/* ------------------------------------------------ */

.modulo {
  display: grid;
  gap: var(--sp-4);
}

.modulo__campo {
  display: grid;
  gap: var(--sp-2);
}

.modulo__etichetta {
  color: var(--testo-su-chiaro-tenue);
  font-size: var(--testo-xxs);
  letter-spacing: var(--traccia-l);
  text-transform: uppercase;
}

.modulo__etichetta em {
  font-style: normal;
  opacity: .7;
  text-transform: none;
  letter-spacing: 0;
}

.modulo input[type="text"],
.modulo input[type="email"],
.modulo input[type="tel"] {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--bordo-su-chiaro);
  border-radius: var(--raggio-s);
  background: var(--superficie-chiara);
  color: var(--testo-su-chiaro);
  font-size: var(--testo-m);
}

.modulo input:focus-visible {
  border-color: var(--accento);
}

.modulo__nota {
  color: var(--testo-su-chiaro-tenue);
  font-size: var(--testo-xs);
  line-height: var(--interlinea-media);
}

.modulo__consenso {
  display: flex;
  gap: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--bordo-su-chiaro-tenue);
  color: var(--testo-su-chiaro-attenuato);
  font-size: var(--testo-xs);
  line-height: var(--interlinea-media);
}

.modulo__consenso input {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--accento);
}

.modulo__consenso a {
  border-bottom: 1px solid var(--bordo-su-chiaro-forte);
}

.modulo__errore {
  padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--accento-su-chiaro);
  border-radius: var(--raggio-xs);
  background: var(--superficie-chiara-alt);
  color: var(--testo-su-chiaro);
  font-size: var(--testo-s);
  line-height: var(--interlinea-media);
}

.modulo__invia {
  width: 100%;
}

.modulo__esito {
  padding: var(--sp-5);
  border: 1px solid var(--accento);
  border-radius: var(--raggio-s);
  background: var(--superficie-chiara);
}

.modulo__esito-titolo {
  font-family: var(--font-display);
  font-size: var(--testo-xl);
}

.modulo__esito-testo {
  margin-top: var(--sp-2);
  color: var(--testo-su-chiaro-attenuato);
  font-size: var(--testo-s);
  line-height: var(--interlinea-media);
}


/* L'ASSISTENTE */
/* ------------------------------------------------ */

.assistente {
  position: fixed;
  right: var(--sp-5);
  bottom: var(--sp-5);
  z-index: var(--z-testata);
  /* Compare e sparisce con lo stesso ritmo della barra a isola: e'
     testata.js a decidere quando, scrivendo lo stesso attributo. */
  transition: transform var(--durata-lenta) ease,
              opacity var(--durata-lenta) ease;
}

.assistente[data-nascosta] {
  opacity: 0;
  transform: translateY(140px);
  pointer-events: none;
}

.assistente__pulsante {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-left: auto;
  border-radius: var(--raggio-cerchio);
  background: var(--grad-accento-superficie);
  box-shadow: var(--ombra-card-chiara);
  transition: box-shadow var(--durata-media) ease,
              transform var(--durata-media) ease;
}

.assistente__pulsante:hover {
  box-shadow: var(--ombra-passaggio);
  transform: translateY(-2px);
}

/* La sigla di Aurum Intelligence.

   In JOST e non in Marcellus, e la ragione e' che serviva in
   grassetto: Marcellus esiste solo al peso 400, e chiedergliene uno
   piu' pesante non produce un carattere piu' grasso ma una
   deformazione calcolata dal browser, che su due lettere grandi si
   vede tutta. Jost e' variabile, quindi il 600 e' un peso vero. */
.assistente__sigla {
  color: var(--fondo-scuro);
  font-family: var(--font-testo);
  font-size: 21px;
  font-weight: var(--peso-forte);
  letter-spacing: .06em;
  line-height: 1;
}

/* La cornetta in piccolo sull'angolo: dice che dietro all'assistente
   c'e' comunque una persona da chiamare. */
.assistente__badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid var(--fondo-chiaro);
  border-radius: var(--raggio-cerchio);
  background: var(--fondo-scuro);
  color: var(--accento-tenue);
}

.assistente__cornetta {
  width: 11px;
  height: 11px;
}

.assistente__pannello {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--sp-3));
  display: flex;
  flex-direction: column;
  width: min(370px, calc(100vw - var(--sp-10)));
  max-height: min(520px, calc(100svh - 140px));
  border: 1px solid var(--bordo-su-chiaro);
  border-radius: var(--raggio-l);
  background: var(--superficie-chiara);
  box-shadow: var(--ombra-rilievo);
  color: var(--testo-su-chiaro);
  overflow: hidden;
}

.assistente__testa {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--bordo-su-chiaro-tenue);
  background: var(--fondo-chiaro);
}

.assistente__schede {
  display: flex;
  flex: 1;
  gap: var(--sp-1);
}

.assistente__scheda {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--raggio-pillola);
  color: var(--testo-su-chiaro-tenue);
  font-size: var(--testo-xxs);
  letter-spacing: var(--traccia-m);
  text-transform: uppercase;
  transition: background var(--durata-rapida) ease,
              color var(--durata-rapida) ease;
}

.assistente__scheda--attiva {
  background: var(--grad-accento-superficie);
  color: var(--fondo-scuro);
}

.assistente__chiudi {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--raggio-cerchio);
  color: var(--testo-su-chiaro-tenue);
}

.assistente__chiudi:hover {
  color: var(--accento-su-chiaro);
}

.assistente__chiudi svg {
  width: 15px;
  height: 15px;
}

.assistente__vista {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  padding: var(--sp-4);
  /* Non scorre: a scorrere e' la sola conversazione, piu' sotto. La
     scheda Contattaci e' corta e ci sta tutta. */
  overflow: hidden;
}

.assistente__vista--contatti {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.assistente__vista--nascosta {
  display: none;
}

.assistente__nota {
  margin-top: var(--sp-4);
  color: var(--testo-su-chiaro-tenue);
  font-size: var(--testo-xs);
  line-height: var(--interlinea-media);
}

/* Dentro il pannello i canali sono piu' compatti che nel popup. */
.assistente__vista .via--primaria {
  margin-top: 0;
  padding: var(--sp-3) var(--sp-4);
}

.assistente__vista .via__nome {
  font-size: var(--testo-m);
}


/* LA CHAT */
/* ------------------------------------------------ */

/* Scorre solo questo. Il campo di scrittura resta fermo in fondo:
   avere due aree che scorrono dentro un pannello alto cinquecento
   pixel significa che nessuna delle due si comporta come ci si
   aspetta. */
.chat__area {
  flex: 1;
  min-height: 0;
  margin-bottom: var(--sp-3);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.chat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
}

.bolla {
  max-width: 88%;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--raggio-m);
  font-size: var(--testo-s);
  line-height: var(--interlinea-media);
}

.bolla--assistente {
  border: 1px solid var(--bordo-su-chiaro);
  border-bottom-left-radius: var(--raggio-xs);
  background: var(--fondo-chiaro);
  color: var(--testo-su-chiaro);
}

.bolla--persona {
  align-self: flex-end;
  border-bottom-right-radius: var(--raggio-xs);
  background: var(--fondo-scuro);
  color: var(--testo-su-scuro);
}

.bolla__approfondimento {
  align-self: flex-start;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--accento);
  color: var(--accento-su-chiaro);
  font-size: var(--testo-xxs);
  letter-spacing: var(--traccia-m);
  text-transform: uppercase;
}

.chat__suggerimenti {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.chat__suggerimento {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--bordo-su-chiaro);
  border-radius: var(--raggio-pillola);
  color: var(--testo-su-chiaro-attenuato);
  font-size: var(--testo-xs);
  text-align: left;
  transition: border-color var(--durata-media) ease,
              color var(--durata-media) ease;
}

.chat__suggerimento:hover {
  border-color: var(--accento);
  color: var(--accento-su-chiaro);
}

/* Una volta usato, un suggerimento non serve piu': sparisce e lascia
   spazio agli altri. */
.chat__suggerimento[hidden] {
  display: none;
}

.chat__scrittura {
  display: flex;
  gap: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--bordo-su-chiaro-tenue);
}

.chat__scrittura input {
  flex: 1;
  min-width: 0;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--bordo-su-chiaro);
  border-radius: var(--raggio-pillola);
  background: var(--fondo-chiaro);
  color: var(--testo-su-chiaro);
  font-size: var(--testo-s);
}

.chat__scrittura input:focus-visible {
  border-color: var(--accento);
}

.chat__invia {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--raggio-cerchio);
  background: var(--grad-accento-superficie);
  color: var(--fondo-scuro);
}

.chat__invia svg {
  width: 18px;
  height: 18px;
}

.chat[data-attesa]::after {
  content: "sto pensando…";
  align-self: flex-start;
  color: var(--testo-su-chiaro-tenue);
  font-size: var(--testo-xs);
  font-style: italic;
}


/* IL TELEFONO */
/* ------------------------------------------------ */

@media (max-width: 599px) {
  .assistente {
    right: var(--sp-4);
    bottom: var(--sp-4);
  }

  /* Sul telefono il pannello non pende dal pulsante: occupa la
     larghezza utile e si appoggia in basso, dove arriva il pollice. */
  .assistente__pannello {
    position: fixed;
    right: var(--sp-3);
    bottom: calc(56px + var(--sp-6));
    left: var(--sp-3);
    width: auto;
    /* Il pannello si ferma sotto la barra a isola invece di
       scivolarci dietro: 56 e' il pulsante, il resto e' la barra piu'
       il suo margine. */
    max-height: calc(100svh - 56px - 116px);
  }

  .popup {
    width: 100vw;
    max-width: 100vw;
    max-height: 92svh;
    /* Sul telefono la finestra si appoggia in basso invece di
       galleggiare: e' dove arriva il pollice, e non lascia due
       strisce di fondo sopra e sotto. */
    margin: auto auto 0;
    border-bottom: 0;
    border-radius: var(--raggio-l) var(--raggio-l) 0 0;
  }

  .popup__riquadro {
    padding: var(--sp-6) var(--sp-5) var(--sp-8);
  }

  .via--primaria {
    padding: var(--sp-4);
  }

  .via__sommario {
    padding: var(--sp-4);
  }

  .via__corpo {
    padding: 0 var(--sp-4) var(--sp-4);
  }
}