/* SOFTI NOVA — cerchietto + chat a schermo intero.
 *
 * Accenti del design system Softi (#00E8FF, #38B6FF). Il FONDO invece non e'
 * scelto qui: lo dichiara il contratto (`background` in states.json) e il widget
 * lo porta come `--nova-bg`. E' lo stesso colore dipinto sotto i fotogrammi,
 * quindi la colonna dell'avatar e il pannello accanto non hanno una giunzione da
 * nascondere: e' il QA a misurarla, non l'occhio a sperarci.
 *
 * Il CSS sta fuori da main.css di proposito: con l'avatar spento non deve
 * restare nemmeno un byte di questo file nel dist.
 */

.nova[hidden] { display: none !important; }

/* ------------------------------------------------------------- il cerchietto */

.nova-ring {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 940;
  width: 92px;
  height: 92px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--nova-bg, #06253E);
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(4, 16, 32, .45), 0 0 0 1px rgba(0, 232, 255, .28);
  transition: transform .18s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.nova-ring:hover,
.nova-ring:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(4, 16, 32, .5), 0 0 0 2px rgba(0, 232, 255, .55);
}
.nova-ring:focus-visible { outline: 2px solid #00E8FF; outline-offset: 3px; }
.nova-ring canvas { width: 100%; height: 100%; display: block; }

/* Il cerchietto non c'è finché i fotogrammi non sono pronti: meglio assente che
   un cerchio vuoto che poi si riempie. Compare quando il widget lo monta
   davvero, con la classe `is-in`. */
.nova-ring { opacity: 0; transform: translateY(6px); }
.nova-ring.is-in { opacity: 1; transform: none; }
.nova-ring.is-in:hover,
.nova-ring.is-in:focus-visible { transform: translateY(-2px); }

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

/* ------------------------------------------------------------------- la chat */

/* La chat prende TUTTA la finestra: niente margini, niente angoli, niente sito
   dietro. Sfondo opaco e non velato, perché un velo lascia intravedere la
   pagina e la pagina che si muove dietro un dialogo aperto è la cosa che fa
   sembrare rotto il dialogo. */
.nova-chat {
  position: fixed;
  inset: 0;
  z-index: 950;
  overflow: hidden;
  background: var(--nova-bg, #06253E);
}
.nova-chat[hidden] { display: none; }

/* La larghezza della colonna la detta il RAPPORTO del fotogramma dichiarato in
   `profiles.chat.size`: `--nova-ar-num` lo porta il widget. Un fotogramma 1:1
   occupa una colonna quadra, uno 4:5 una più stretta, e cambiare il numero nel
   contratto cambia il layout senza toccare questo file. Il tetto a 62vw esiste
   perché su uno schermo largo la colonna quadra arriverebbe a sfondare, e la
   colonna dei messaggi sparirebbe. */
.nova-chat__panel {
  display: grid;
  grid-template-columns: clamp(240px, calc(100dvh * var(--nova-ar-num, 1)), 62vw) minmax(0, 1fr);
  width: 100dvw;
  height: 100dvh;
  overflow: hidden;
  background: var(--nova-bg, #06253E);
}

/* La colonna ha il fondo del fotogramma, non un navy suo: e' la condizione
   perche' la giunzione fra avatar e pannello non si veda. Un tono diverso qui
   disegna una riga verticale netta per tutta l'altezza della finestra. */
.nova-chat__side {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--nova-bg, #06253E);
}
.nova-chat__avatar { position: relative; width: 100%; height: 100%; }

/* Due viste, una per inquadratura: busto e figura intera. Il passaggio e' una
   dissolvenza breve fra due VISTE — ammessa dal contratto, che vieta di
   dissolvere fra due pose (le pose si scelgono, non si mescolano). Nessuna
   delle due si smonta: rimontare l'avatar a ogni cambio vorrebbe dire
   riscaricare e ricostruire per un gesto che si fa avanti e indietro. */
.nova-view {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .26s ease;
  pointer-events: none;
}
.nova-view.is-on { opacity: 1; pointer-events: auto; }
.nova-view canvas { width: 100%; height: 100%; display: block; }

/* La figura intera si trascina per ruotare: il cursore lo dice prima del clic. */
.nova-view[data-view="intera"] { cursor: grab; touch-action: none; }
.nova-view[data-view="intera"].is-dragging { cursor: grabbing; }

@media (prefers-reduced-motion: reduce) { .nova-view { transition: none; } }
/* `contain`: se la colonna non ha esattamente il rapporto del fotogramma (il
   tetto a 62vw, o una finestra molto bassa) l'immagine si adatta invece di
   stirarsi. Un avatar stirato è il modo più veloce per far sembrare finto un
   robot che parla. */
.nova-chat__avatar canvas,
.nova-chat__avatar img { width: 100%; height: 100%; display: block; object-fit: contain; }
/* Il fondo della colonna: il comando d'inquadratura e la scritta di stato, uno
   sopra l'altro in una colonna vera.

   Prima erano DUE ELEMENTI ASSOLUTI con due `bottom:` scelti a mano — il pulsante
   a 40px, la scritta alta 54 — e lo spazio si divideva per sottrazione: 14px in
   comune sul desktop, 26 su mobile. Il commento diceva «sta sopra l'etichetta»
   pensando allo z-index, ma sopra in profondità non è di fianco nello spazio, e
   si toccavano davvero (misurato: 1471px² di sovrapposizione sul desktop, 2487 su
   mobile). Due `bottom:` che non si toccano sono un conto indovinato, e il conto
   va rifatto ogni volta che cambia l'altezza di una scritta o la larghezza.

   Qui è il LAYOUT a partizionare lo spazio: con un flex in colonna e un `gap`
   l'intersezione è zero per costruzione, a ogni larghezza e a ogni testo. Non c'è
   niente da ricalcolare, ed è la proprietà che la QA misura (`comandiColonna`). */
.nova-chat__foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 26px 12px 16px;
  /* La fascia non prende il clic: attorno ai comandi c'è solo sfumatura, e sopra
     l'avatar un rettangolo invisibile che intercetta i clic è un difetto. */
  pointer-events: none;
  /* La sfumatura sta qui e non sull'etichetta: la base del fotogramma è chiara, e
     la scritta dello stato ci sparirebbe dentro. Sull'etichetta coprirebbe solo la
     riga di testo, lasciando chiara la striscia sotto. */
  background: linear-gradient(to top, rgba(6, 20, 36, .82), rgba(6, 20, 36, 0));
}
.nova-chat__foot > .nova-chat__frame { pointer-events: auto; }

/* La scritta dello stato: sta in fondo alla colonna, sopra l'avatar, perché
   l'altezza della colonna è tutta dell'avatar e una riga di testo sotto gli
   toglierebbe la base. Non è cliccabile: si legge. */
.nova-chat__state {
  text-align: center;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(150, 245, 255, .75);
  pointer-events: none;
}

/* Il cambio di inquadratura: l'unica cosa cliccabile sopra l'avatar. In colonna
   sta SOPRA la scritta — a comandare è la mano, a leggere è l'occhio, e il
   comando per primo. */
.nova-chat__frame {
  padding: 7px 14px;
  border: 1px solid rgba(0, 232, 255, .3);
  border-radius: 999px;
  background: rgba(6, 20, 36, .55);
  color: #9BE9FF;
  font: inherit;
  font-size: 12px;
  letter-spacing: .03em;
  cursor: pointer;
}
.nova-chat__frame:hover { background: rgba(0, 232, 255, .14); }
.nova-chat__frame:focus-visible { outline: 2px solid #00E8FF; outline-offset: 2px; }

.nova-chat__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--nova-bg, #06253E);
}

.nova-chat__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 18px 20px 12px;
  border-bottom: 1px solid rgba(0, 232, 255, .14);
}
.nova-chat__title { margin: 0; font-size: 17px; font-weight: 700; color: #EAF6FF; }
.nova-chat__subtitle { font-size: 12px; color: rgba(150, 245, 255, .7); }
.nova-chat__close {
  margin-left: auto;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(0, 232, 255, .3);
  border-radius: 10px;
  background: transparent;
  color: #9BE9FF;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.nova-chat__close:hover { background: rgba(0, 232, 255, .1); }
.nova-chat__close:focus-visible { outline: 2px solid #00E8FF; outline-offset: 2px; }
/* L'interruttore della voce: dice lo stato, non l'azione — quindi acceso e
   spento si distinguono dal colore, non solo dalla parola. `nowrap` perché su
   una testa stretta «Voce accesa» non deve andare a capo sotto la ×. */
.nova-chat__audio {
  margin-left: auto;
  padding: 0 10px;
  height: 36px;
  border: 1px solid rgba(0, 232, 255, .3);
  border-radius: 10px;
  background: transparent;
  color: rgba(150, 245, 255, .55);
  font: inherit;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}
.nova-chat__audio[aria-pressed="true"] { color: #9BE9FF; border-color: rgba(0, 232, 255, .55); }
.nova-chat__audio:hover { background: rgba(0, 232, 255, .1); }
.nova-chat__audio:focus-visible { outline: 2px solid #00E8FF; outline-offset: 2px; }

.nova-chat__log {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nova-msg {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.nova-msg--bot {
  align-self: flex-start;
  background: rgba(0, 232, 255, .12);
  color: #EAF6FF;
  border-bottom-left-radius: 4px;
}
.nova-msg--me {
  align-self: flex-end;
  background: #2CAEE3;
  color: #06192B;
  border-bottom-right-radius: 4px;
}
.nova-msg a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Le mosse dell'assistenza: i pulsanti sotto la risposta. Non sono decorazione —
   sono il modo in cui una demo dice "da qui si va avanti" senza costringere a
   copiare un indirizzo a mano. Le `scelte` stanno anche da sole nel log (sotto
   il saluto), quindi la regola passa da `.nova-atti` e non da `.nova-msg`. */
.nova-atti {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.nova-atti--scelte { align-self: flex-start; max-width: 78%; margin-top: 0; }

/* `.nova-atti > …` e non `.nova-atto` da sola: `.nova-msg a` (più specifica)
   rimetterebbe il colore ereditato e la sottolineatura su ogni pulsante-link. */
.nova-atti > .nova-scelta,
.nova-atti > .nova-atto {
  font: inherit;
  font-size: 14px;
  line-height: 1.2;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0, 232, 255, .45);
  background: transparent;
  color: #EAF6FF;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.nova-atti > .nova-scelta:hover,
.nova-atti > .nova-atto:hover { background: rgba(0, 232, 255, .16); border-color: #00E8FF; }
.nova-atti > .nova-scelta:focus-visible,
.nova-atti > .nova-atto:focus-visible { outline: 2px solid #00E8FF; outline-offset: 2px; }

/* L'escalation si distingue dalle altre: è l'unica azione che porta fuori dalla
   demo, ed è l'unico momento in cui la chat prende l'iniziativa. */
.nova-atti > .nova-atto--contatto {
  background: #00E8FF;
  border-color: #00E8FF;
  color: #06253E;
  font-weight: 600;
}
.nova-atti > .nova-atto--contatto:hover { background: #7DF3FF; border-color: #7DF3FF; }

.nova-chat__form {
  display: flex;
  gap: 10px;
  padding: 12px 20px 8px;
  border-top: 1px solid rgba(0, 232, 255, .14);
}
.nova-chat__input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid rgba(0, 232, 255, .3);
  border-radius: 12px;
  background: rgba(6, 22, 40, .8);
  color: #EAF6FF;
  font: inherit;
}
.nova-chat__input::placeholder { color: rgba(150, 245, 255, .45); }
.nova-chat__input:focus-visible { outline: 2px solid #00E8FF; outline-offset: 1px; }
.nova-chat__send {
  padding: 12px 20px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(90deg, #38B6FF, #00E8FF);
  color: #06192B;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.nova-chat__send:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.nova-chat__notice {
  margin: 0;
  padding: 0 20px 14px;
  font-size: 11.5px;
  color: rgba(150, 245, 255, .6);
}

/* Su mobile l'avatar va sopra e i messaggi sotto, sempre a schermo intero. La
   fascia dell'avatar è alta quanto servirebbe a riempire la larghezza
   (100dvw / rapporto) ma non più di 44dvh: oltre, i messaggi — che sono la cosa
   che si legge — resterebbero schiacciati in un terzo di schermo. */
@media (max-width: 800px) {
  .nova-chat__panel {
    grid-template-columns: 1fr;
    grid-template-rows: min(44dvh, calc(100dvw / var(--nova-ar-num, 1))) minmax(0, 1fr);
  }
  .nova-chat__side {
    border-right: 0;
    border-bottom: 1px solid rgba(0, 232, 255, .14);
  }
  /* Su mobile la fascia dell'avatar è più bassa: il fondo si stringe, ma il `gap`
     resta — è quello che tiene separati comando e scritta. */
  .nova-chat__foot { gap: 8px; padding: 20px 10px 12px; }
  .nova-chat__state { font-size: 11px; }
  .nova-chat__frame { padding: 6px 12px; }
  .nova-chat__head { padding: 12px 14px 10px; }
  .nova-chat__log { padding: 12px 14px; }
  .nova-msg { max-width: 88%; }
  .nova-chat__form { padding: 10px 14px 6px; }
  .nova-chat__notice { padding: 0 14px 10px; }
  .nova-ring { right: 14px; bottom: 14px; width: 74px; height: 74px; }
}