/* ============================================================
   Supporto IT - ADCO HUB
   Foglio di stile unico del sito. Tutti i colori sono definiti
   come variabili qui sotto: per cambiare il tema basta modificare
   il blocco :root.
   ============================================================ */

:root {
  --blu-900: #0d2440;
  --blu-800: #123258;
  --blu-700: #17497f;
  --blu-600: #1d63ad;
  --blu-500: #2a7bd0;
  --blu-100: #e3eefb;
  --blu-050: #f2f7fd;

  --bg: #f3f5f9;
  --surface: #ffffff;
  --surface-alt: #f8fafc;
  --border: #dce3ed;
  --border-forte: #c3cddd;

  --testo: #16202f;
  --testo-medio: #41506a;
  --testo-tenue: #6b7a91;

  --ok: #1e7a52;
  --ok-bg: #e6f4ee;
  --attenzione: #92600a;
  --attenzione-bg: #fdf3e0;
  --critico: #a32020;
  --critico-bg: #fbeaea;

  --raggio: 10px;
  --raggio-s: 6px;
  --ombra: 0 1px 2px rgba(16, 32, 56, .06), 0 4px 14px rgba(16, 32, 56, .05);
  --ombra-alta: 0 2px 6px rgba(16, 32, 56, .08), 0 12px 32px rgba(16, 32, 56, .10);
  --max: 1180px;
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f151f;
    --surface: #161e2b;
    --surface-alt: #1b2534;
    --border: #2a3648;
    --border-forte: #3a4a63;
    --testo: #e8edf5;
    --testo-medio: #b3c0d3;
    --testo-tenue: #8b9ab1;
    --blu-100: #1c3350;
    --blu-050: #17243a;
    --blu-600: #5aa2e8;
    --blu-700: #7bb6ee;
    --ok-bg: #12291f;
    --attenzione-bg: #2b2213;
    --critico-bg: #2c1717;
    --ok: #6cc79b;
    --attenzione: #e0b063;
    --critico: #e88b8b;
    --ombra: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
    --ombra-alta: 0 2px 6px rgba(0, 0, 0, .35), 0 12px 32px rgba(0, 0, 0, .4);
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Sui monitor delle postazioni (Full HD e oltre) il sito è un po' più grande:
   testi più leggibili e meno spazio vuoto ai lati. Portatili e telefoni restano come sono. */
@media (min-width: 1600px) { html { zoom: 1.075; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--testo);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blu-600); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .6em; color: var(--testo); }
h1 { font-size: 2rem; letter-spacing: -.02em; }
h2 { font-size: 1.4rem; letter-spacing: -.01em; }
h3 { font-size: 1.1rem; }

p { margin: 0 0 1em; }

.contenitore { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* ---------- Header ---------- */

.intestazione {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}

.intestazione-riga {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 68px;
}

.logo { display: flex; align-items: center; gap: 11px; text-decoration: none; flex: 0 0 auto; }
.logo:hover { text-decoration: none; }

.logo-segno {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: linear-gradient(140deg, var(--blu-700), var(--blu-500));
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: .82rem; letter-spacing: .04em;
}

.logo-immagine {
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.logo-testo { display: flex; flex-direction: column; line-height: 1.15; }
.logo-testo strong { font-size: .98rem; color: var(--testo); }
.logo-testo span { font-size: .74rem; color: var(--testo-tenue); letter-spacing: .06em; text-transform: uppercase; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.nav a {
  color: var(--testo-medio);
  font-size: .92rem;
  padding: 8px 12px;
  border-radius: var(--raggio-s);
}
.nav a:hover { background: var(--surface-alt); color: var(--testo); text-decoration: none; }
.nav a.attivo { color: var(--blu-600); font-weight: 600; }

.menu-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--raggio-s);
  padding: 7px 10px;
  cursor: pointer;
  color: var(--testo-medio);
  font-size: 1rem;
}

/* ---------- Barra di ricerca ---------- */

.cerca { position: relative; display: flex; }
.cerca input {
  width: 100%;
  font: inherit;
  font-size: .95rem;
  padding: 11px 14px 11px 40px;
  border: 1px solid var(--border-forte);
  border-radius: var(--raggio-s);
  background: var(--surface);
  color: var(--testo);
}
.cerca input:focus {
  outline: none;
  border-color: var(--blu-500);
  box-shadow: 0 0 0 3px rgba(42, 123, 208, .18);
}
.cerca svg {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--testo-tenue); pointer-events: none;
}
.cerca-compatta { flex: 0 1 320px; }
.cerca-compatta input { padding-top: 8px; padding-bottom: 8px; background: var(--surface-alt); }

/* ---------- Hero ---------- */

.hero {
  background: linear-gradient(135deg, var(--blu-800) 0%, var(--blu-600) 100%);
  color: #fff;
  padding: 56px 0 60px;
}
.hero h1 { color: #fff; font-size: 2.2rem; margin-bottom: .35em; }
.hero p.sottotitolo { color: rgba(255, 255, 255, .82); font-size: 1.05rem; max-width: 620px; margin-bottom: 26px; }
.hero .cerca { max-width: 640px; }
.hero .cerca input { border-color: transparent; padding-top: 14px; padding-bottom: 14px; font-size: 1rem; }
.hero-suggerimenti { margin-top: 14px; font-size: .87rem; color: rgba(255, 255, 255, .72); }
.hero-suggerimenti a { color: #fff; text-decoration: underline; text-underline-offset: 3px; margin-right: 14px; }

/* ---------- Sezioni ---------- */

.sezione { padding: 48px 0; }
.sezione-intestazione { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.sezione-intestazione p { color: var(--testo-tenue); margin: .2em 0 0; font-size: .93rem; }
.sezione-intestazione h2 { margin: 0; }

/* ---------- Griglia categorie ---------- */

.griglia-categorie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.scheda-categoria {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--raggio);
  padding: 20px;
  display: block;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.scheda-categoria:hover {
  text-decoration: none;
  border-color: var(--blu-500);
  box-shadow: var(--ombra-alta);
  transform: translateY(-2px);
}
.scheda-icona {
  width: 40px; height: 40px;
  border-radius: 9px;
  background: var(--blu-050);
  color: var(--blu-600);
  display: grid; place-items: center;
  margin-bottom: 14px;
}
.scheda-icona svg { width: 21px; height: 21px; }
.scheda-categoria h3 { margin: 0 0 6px; font-size: 1.02rem; }
.scheda-categoria p { color: var(--testo-medio); font-size: .89rem; margin: 0 0 10px; }
.scheda-conteggio { font-size: .8rem; color: var(--testo-tenue); }

/* ---------- Elenco articoli ---------- */

.elenco-articoli { display: grid; gap: 12px; }

.voce-articolo {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--raggio);
  padding: 16px 18px;
  display: block;
  transition: border-color .15s, box-shadow .15s;
}
.voce-articolo:hover { text-decoration: none; border-color: var(--blu-500); box-shadow: var(--ombra); }
.voce-articolo h3 { margin: 0 0 5px; font-size: 1rem; color: var(--blu-700); }
.voce-articolo p { margin: 0; color: var(--testo-medio); font-size: .9rem; }
.voce-meta { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .78rem; color: var(--testo-tenue); }

.etichetta {
  display: inline-block;
  background: var(--blu-050);
  color: var(--blu-700);
  border: 1px solid var(--blu-100);
  border-radius: 99px;
  padding: 2px 9px;
  font-size: .75rem;
  white-space: nowrap;
}

.punto { color: var(--border-forte); }

/* ---------- Layout a due colonne ---------- */

.due-colonne {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 36px;
  align-items: start;
  padding: 36px 0 60px;
}

.laterale {
  position: sticky;
  top: 92px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--raggio);
  padding: 18px;
}
.laterale h4 {
  font-size: .76rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--testo-tenue); margin: 0 0 10px;
}
.laterale ul { list-style: none; margin: 0 0 18px; padding: 0; }
.laterale li { margin-bottom: 2px; }
.laterale li a {
  display: block; padding: 6px 9px; border-radius: var(--raggio-s);
  font-size: .89rem; color: var(--testo-medio);
}
.laterale li a:hover { background: var(--surface-alt); color: var(--testo); text-decoration: none; }
.laterale li a.attivo { background: var(--blu-050); color: var(--blu-700); font-weight: 600; }
.laterale > *:last-child { margin-bottom: 0; }

/* ---------- Briciole di pane ---------- */

.briciole { font-size: .84rem; color: var(--testo-tenue); padding: 18px 0 0; }
.briciole a { color: var(--testo-medio); }
.briciole span { margin: 0 7px; color: var(--border-forte); }

/* ---------- Articolo ---------- */

.articolo {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--raggio);
  padding: 34px 40px 40px;
}
.articolo-intestazione { border-bottom: 1px solid var(--border); padding-bottom: 18px; margin-bottom: 26px; }
.articolo-intestazione h1 { font-size: 1.75rem; margin-bottom: .35em; }
.articolo-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .82rem; color: var(--testo-tenue); }

.articolo-corpo { font-size: 1rem; color: var(--testo); }
.articolo-corpo h2 { font-size: 1.22rem; margin-top: 1.9em; padding-bottom: .3em; border-bottom: 1px solid var(--border); }
.articolo-corpo h3 { font-size: 1.03rem; margin-top: 1.5em; }
.articolo-corpo ul, .articolo-corpo ol { padding-left: 22px; margin: 0 0 1.1em; }
.articolo-corpo li { margin-bottom: .45em; }
.articolo-corpo code {
  background: var(--surface-alt); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 6px; font-size: .88em;
  font-family: "Cascadia Mono", Consolas, "SF Mono", monospace;
}
.articolo-corpo table { width: 100%; border-collapse: collapse; margin: 0 0 1.2em; font-size: .92rem; }
.articolo-corpo th, .articolo-corpo td { text-align: left; padding: 9px 12px; border: 1px solid var(--border); }
.articolo-corpo th { background: var(--surface-alt); font-weight: 600; }

/* ---------- Immagini nelle guide ---------- */

.articolo-corpo figure { margin: 0 0 1.5em; }
/* Video delle guide: largo quanto il testo, con i comandi del browser. */
.articolo-corpo video { display: block; width: 100%; border-radius: var(--raggio); background: #000; margin: 0 0 .6em; }

.articolo-corpo figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--raggio-s);
  background: var(--surface-alt);
}
.articolo-corpo figcaption {
  font-size: .84rem;
  color: var(--testo-tenue);
  margin-top: 8px;
  line-height: 1.45;
}
.articolo-corpo figure.stretta { max-width: 560px; }

.nota {
  border-left: 3px solid var(--blu-500);
  background: var(--blu-050);
  border-radius: 0 var(--raggio-s) var(--raggio-s) 0;
  padding: 13px 16px;
  margin: 0 0 1.2em;
  font-size: .93rem;
}
.nota strong:first-child { display: block; margin-bottom: 3px; }
.nota.attenzione { border-left-color: var(--attenzione); background: var(--attenzione-bg); }
.nota.critico { border-left-color: var(--critico); background: var(--critico-bg); }
.nota.ok { border-left-color: var(--ok); background: var(--ok-bg); }

/* ---------- Riquadro aiuto ---------- */

.riquadro-aiuto {
  margin-top: 30px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--raggio);
  padding: 22px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
}
.riquadro-aiuto h3 { margin: 0 0 4px; font-size: 1.02rem; }
.riquadro-aiuto p { margin: 0; color: var(--testo-medio); font-size: .91rem; }

.bottone {
  display: inline-block;
  background: var(--blu-600);
  color: #fff;
  border: 1px solid var(--blu-600);
  border-radius: var(--raggio-s);
  padding: 10px 18px;
  font-size: .93rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.bottone:hover { background: var(--blu-700); border-color: var(--blu-700); text-decoration: none; color: #fff; }
.bottone.secondario { background: transparent; color: var(--blu-600); border-color: var(--border-forte); }
.bottone.secondario:hover { background: var(--surface-alt); color: var(--blu-700); }

/* ---------- Contatti ---------- */

.griglia-contatti { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.scheda {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--raggio);
  padding: 22px;
}
.scheda h3 { margin: 0 0 8px; font-size: 1.02rem; }
.scheda p { color: var(--testo-medio); font-size: .92rem; }
.scheda p:last-child { margin-bottom: 0; }
.dato { font-size: 1.05rem; font-weight: 600; color: var(--blu-700); }

.tabella-livelli { width: 100%; border-collapse: collapse; font-size: .93rem; background: var(--surface); }
.tabella-livelli th, .tabella-livelli td { text-align: left; padding: 12px 14px; border: 1px solid var(--border); }
.tabella-livelli th { background: var(--surface-alt); font-weight: 600; }

/* ---------- Ricerca ---------- */

.stato-vuoto {
  background: var(--surface);
  border: 1px dashed var(--border-forte);
  border-radius: var(--raggio);
  padding: 44px 24px;
  text-align: center;
  color: var(--testo-medio);
}
.stato-vuoto h3 { margin-bottom: 6px; }
mark { background: #ffe89a; color: inherit; padding: 0 2px; border-radius: 3px; }
@media (prefers-color-scheme: dark) { mark { background: #6b5a1e; color: #ffeeb8; } }

/* ---------- Footer ---------- */

.piede {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 34px 0;
  margin-top: 40px;
  font-size: .88rem;
  color: var(--testo-tenue);
}
.piede-riga { display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; align-items: center; }

/* Piè di pagina sempre in fondo alla finestra, anche nelle pagine con poco
   contenuto (es. statistiche di un mese vuoto). Le pagine di accesso hanno un
   layout proprio e restano escluse. */
body:not(.pagina-accesso) { min-height: 100vh; display: flex; flex-direction: column; }
body:not(.pagina-accesso) > .piede { margin-top: auto; }
body:not(.pagina-accesso) > :has(+ .piede) { margin-bottom: 40px; }
.piede a { color: var(--testo-medio); margin-right: 16px; }

/* ---------- Pagina di accesso ---------- */

body.pagina-accesso {
  background: linear-gradient(135deg, var(--blu-900) 0%, var(--blu-700) 55%, var(--blu-600) 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}

.accesso { width: 100%; max-width: 420px; }

.accesso-riquadro {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 34px 32px 30px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
}

.accesso-logo { display: flex; align-items: center; gap: 11px; margin-bottom: 26px; }

.accesso h1 { font-size: 1.32rem; margin-bottom: .35em; }
.accesso-intro { color: var(--testo-medio); font-size: .92rem; margin-bottom: 22px; }

.accesso label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--testo-medio);
  margin-bottom: 6px;
}

.accesso input[type="text"],
.accesso input[type="password"] {
  width: 100%;
  font: inherit;
  font-size: .95rem;
  padding: 11px 13px;
  margin-bottom: 16px;
  border: 1px solid var(--border-forte);
  border-radius: var(--raggio-s);
  background: var(--surface);
  color: var(--testo);
}
.accesso input:focus {
  outline: none;
  border-color: var(--blu-500);
  box-shadow: 0 0 0 3px rgba(42, 123, 208, .18);
}

.campo-password { position: relative; }
.campo-password input { padding-right: 86px; }
.campo-password button {
  position: absolute;
  top: 8px; right: 7px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--raggio-s);
  color: var(--testo-medio);
  font: inherit;
  font-size: .8rem;
  padding: 5px 10px;
  cursor: pointer;
}
.campo-password button:hover { color: var(--testo); border-color: var(--border-forte); }

.accesso-avviso {
  background: var(--blu-050);
  border-left: 3px solid var(--blu-500);
  border-radius: 0 var(--raggio-s) var(--raggio-s) 0;
  color: var(--testo-medio);
  font-size: .88rem;
  padding: 11px 13px;
  margin-bottom: 18px;
}

.accesso-errore {
  background: var(--critico-bg);
  border-left: 3px solid var(--critico);
  border-radius: 0 var(--raggio-s) var(--raggio-s) 0;
  color: var(--critico);
  font-size: .89rem;
  padding: 10px 13px;
  margin-bottom: 16px;
}

.bottone-largo { width: 100%; text-align: center; padding: 12px 18px; font-size: .97rem; }
.bottone-largo:disabled { opacity: .65; cursor: default; }

/* Accesso con Microsoft 365. */
.bottone-microsoft {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--surface);
  color: var(--testo);
  border-color: var(--border-forte);
}
.bottone-microsoft:hover { background: var(--surface-alt); color: var(--testo); border-color: var(--border-forte); }
.bottone-microsoft svg { width: 18px; height: 18px; flex-shrink: 0; }
.accesso-separatore { display: flex; align-items: center; gap: 10px; margin: 18px 0; font-size: .8rem; color: var(--testo-tenue); }
.accesso-separatore::before, .accesso-separatore::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.accesso-separatore[hidden] { display: none; }

.accesso-aiuto {
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: .84rem;
  color: var(--testo-tenue);
}

.accesso-piede {
  text-align: center;
  margin: 20px 0 0;
  font-size: .82rem;
  color: rgba(255, 255, 255, .7);
}

.nav a.esci { color: var(--testo-tenue); }
.nav a.esci:hover { color: var(--critico); }

/* Colori fissi: il blu chiaro del tema scuro non regge il testo bianco */
.nav a.apri-ticket {
  margin-left: 6px;
  background: #1d63ad;
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
}
.nav a.apri-ticket:hover { background: #17497f; color: #fff; }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .due-colonne { grid-template-columns: 1fr; gap: 20px; }
  .laterale { position: static; }
  .articolo { padding: 24px 22px 30px; }
}

@media (max-width: 720px) {
  .intestazione-riga { height: 60px; }
  .menu-toggle { display: block; }
  .nav {
    display: none;
    position: absolute; top: 60px; left: 0; right: 0;
    background: var(--surface); border-bottom: 1px solid var(--border);
    flex-direction: column; align-items: stretch; padding: 8px 16px 14px; gap: 0;
  }
  .nav.aperto { display: flex; }
  .nav a.apri-ticket { margin: 8px 0 0; text-align: center; }
  .cerca-compatta { display: none; }
  .hero { padding: 40px 0 44px; }
  .hero h1 { font-size: 1.7rem; }
  h1 { font-size: 1.6rem; }
  .contenitore { padding: 0 16px; }
}

/* ---------- Stampa ---------- */

@media print {
  .intestazione, .piede, .laterale, .riquadro-aiuto, .briciole { display: none !important; }
  body { background: #fff; }
  .articolo { border: none; padding: 0; }
  .due-colonne { display: block; padding: 0; }
  a { color: #000; text-decoration: none; }
  .articolo-corpo figure { break-inside: avoid; page-break-inside: avoid; max-width: 480px; }
}



/* ---------- AI Mode nella barra di ricerca ---------- */

.cerca-principale {
  position: relative;
  max-width: 640px;
  width: 100%;
}

.cerca-principale input {
  padding-right: 130px !important;
  border-radius: 26px !important;
}

.ai-mode-btn {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--testo-medio);
  border-radius: 20px;
  padding: 7px 12px;
  font: inherit;
  font-size: .88rem;
  cursor: pointer;
  transition:
    background .15s,
    color .15s,
    border-color .15s,
    box-shadow .15s;
}

.ai-mode-btn:hover {
  background: var(--blu-050);
  color: var(--blu-700);
  border-color: var(--blu-500);
}

.ai-mode-btn.attivo {
  background: var(--blu-600);
  color: #fff;
  border-color: var(--blu-600);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}

.ai-scintilla {
  font-size: 1rem;
  line-height: 1;
}

.cerca-principale.ai-attiva input {
  border-color: var(--blu-500);
  box-shadow: 0 0 0 3px rgba(42, 123, 208, .18);
}

.risposta-ai {
  max-width: 640px;
  margin-top: 16px;
  padding: 18px 20px;
  background: var(--surface);
  color: var(--testo);
  border: 1px solid var(--border);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  line-height: 1.6;
}

.risposta-ai-caricamento {
  color: var(--testo-medio);
}

.risposta-ai-errore {
  color: var(--critico);
}

@media (max-width: 520px) {
  .ai-mode-btn span:last-child {
    display: none;
  }

  .ai-mode-btn {
    padding: 8px 11px;
  }

  .cerca-principale input {
    padding-right: 58px !important;
  }
}

/* ---------- Pagina dedicata Assistente AI (stile "AI Mode") ---------- */

/* Resta visibile sotto l'intestazione (68px + bordo) mentre si scorre la conversazione. */
.ai-barra-superiore {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 69px;
  z-index: 45;
}
.ai-barra-superiore-riga {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 50px;
}
.ai-etichetta {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--testo);
}
.ai-torna {
  color: var(--testo-tenue);
  font-size: .87rem;
  white-space: nowrap;
}
.ai-torna:hover { color: var(--blu-600); text-decoration: none; }

.pagina-ai {
  min-height: 66vh;
  display: flex;
  flex-direction: column;
  padding: 0 16px 130px;
}

/* ---- Schermata iniziale, vuota ---- */

.ai-vuoto {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 48px 16px;
  text-align: center;
}
.ai-vuoto[hidden] { display: none; }

.ai-saluto {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 1.9rem;
  font-weight: 600;
}
.ai-saluto .ai-scintilla { color: var(--blu-600); font-size: 1.5rem; }

/* Helpo, la mascotte: grande nel saluto, piccolo accanto al nome e nei pulsanti. */
/* Disco bianco dietro al logo: l'anello blu scuro resta visibile anche nel tema scuro. */
.helpo-grande { display: block; width: 128px; height: 128px; padding: 4px; background: #fff; border-radius: 50%; margin-bottom: -14px; }
.helpo-mini { display: inline-block; flex: 0 0 auto; }
/* Nel pulsante "Chiedi a Helpo" il logo completo è più grande ma non allarga il pulsante. */
.ai-mode-btn .helpo-mini { margin: -5px 0 -5px -4px; }
.ai-mittente {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--testo-medio);
}

.ai-composer { position: relative; width: 100%; max-width: 620px; }
.ai-composer input {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: 18px 58px 18px 22px;
  border: 1px solid var(--border);
  border-radius: 28px;
  background: var(--surface);
  color: var(--testo);
  box-shadow: var(--ombra-alta);
}
.ai-composer input:focus {
  outline: none;
  border-color: var(--blu-500);
  box-shadow: 0 0 0 3px rgba(42, 123, 208, .18), var(--ombra-alta);
}

.ai-invia {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--blu-600);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .15s;
}
.ai-invia:hover { background: var(--blu-700); }
.ai-invia:disabled { opacity: .55; cursor: default; }
.ai-invia svg { width: 16px; height: 16px; }

.ai-suggerimenti-lista {
  width: 100%;
  max-width: 540px;
  display: grid;
  gap: 3px;
  text-align: left;
}
.ai-suggerimenti-lista[hidden] { display: none; }
.ai-suggerimento-riga {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--raggio-s);
  color: var(--testo-medio);
  font-size: .92rem;
}
.ai-suggerimento-riga:hover { background: var(--surface-alt); color: var(--testo); text-decoration: none; }
.ai-suggerimento-icona { width: 16px; height: 16px; color: var(--testo-tenue); flex-shrink: 0; }

/* ---- Conversazione ---- */

.ai-conversazione {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  display: grid;
  gap: 32px;
  padding-top: 30px;
}

/* Quando la pagina porta la domanda in cima, la lascia sotto intestazione e barra fisse di Helpo. */
.ai-turno { display: grid; gap: 12px; scroll-margin-top: 140px; }

.ai-domanda {
  justify-self: end;
  max-width: 82%;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--testo);
  padding: 11px 18px;
  border-radius: 20px;
  font-size: .95rem;
}

.risposta-ai {
  max-width: none;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  color: var(--testo);
  font-size: .98rem;
  line-height: 1.7;
}
.risposta-ai p { margin: 0 0 .9em; }
.risposta-ai p:last-child { margin-bottom: 0; }

.risposta-ai-caricamento { color: var(--testo-tenue); }
.risposta-ai-errore { color: var(--critico); }

.ai-disclaimer {
  font-size: .78rem;
  color: var(--testo-tenue);
  margin: 0;
}
.ai-disclaimer a { color: var(--testo-tenue); }

.ai-risposta-azioni { display: flex; align-items: center; gap: 4px; }
.ai-azione {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: none;
  background: transparent;
  color: var(--testo-tenue);
  border-radius: 50%;
  cursor: pointer;
}
.ai-azione:hover { background: var(--surface-alt); color: var(--testo); }
.ai-azione svg { width: 16px; height: 16px; }

/* ---- Composer fissa in basso durante la conversazione ---- */

.ai-composer-fissa {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: 18px 16px 22px;
  background: linear-gradient(to top, var(--bg) 60%, transparent);
}
.ai-composer-fissa-interno { display: flex; justify-content: center; }
.ai-composer-fissa .ai-composer { max-width: 680px; }
.ai-composer-fissa .ai-composer input { padding: 13px 52px 13px 18px; border-radius: 24px; }
.ai-composer-fissa .ai-invia { width: 34px; height: 34px; right: 6px; }

@media (max-width: 720px) {
  .ai-barra-superiore { top: 61px; }
  .ai-turno { scroll-margin-top: 170px; }
  .ai-barra-superiore-riga { height: auto; padding-top: 8px; padding-bottom: 8px; }
  .ai-saluto { font-size: 1.5rem; }
  .ai-domanda { max-width: 92%; }
}

/* Fonti verificate dal server per la chat Helpo. */
.ai-fonti { margin: 18px 0; padding: 14px 18px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--raggio); }
.ai-fonti ul { margin: 8px 0 0; padding-left: 20px; }
.ai-fonti li + li { margin-top: 6px; }
.ai-barra-superiore-riga { flex-wrap: wrap; gap: 10px; }

/* Feedback 👍/👎 sotto le risposte di Helpo. */
.ai-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: .85rem; color: var(--testo-tenue); }
.ai-feedback .ai-azione { font-size: 1.05rem; }
.ai-feedback-commento { display: grid; gap: 8px; width: 100%; max-width: 560px; }
.ai-feedback-commento label { color: var(--testo-medio); }
.ai-feedback-commento textarea {
  font: inherit;
  font-size: .92rem;
  padding: 10px 12px;
  border: 1px solid var(--border-forte);
  border-radius: var(--raggio-s);
  background: var(--surface);
  color: var(--testo);
  resize: vertical;
}
.ai-feedback-commento textarea:focus { outline: none; border-color: var(--blu-500); box-shadow: 0 0 0 3px rgba(42, 123, 208, .18); }
.ai-feedback-pulsanti { display: flex; flex-wrap: wrap; gap: 8px; }

/* Pagina statistiche di Helpo. */
.statistiche-mese { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.statistiche-mese select {
  font: inherit;
  padding: 7px 10px;
  border: 1px solid var(--border-forte);
  border-radius: var(--raggio-s);
  background: var(--surface);
  color: var(--testo);
}
.statistiche-numero { font-size: 1.8rem; font-weight: 700; color: var(--blu-700); line-height: 1.1; }
.statistiche-tabella { overflow-x: auto; margin-bottom: 28px; }
.statistiche-tabella td.numero, .statistiche-tabella th.numero { text-align: right; white-space: nowrap; }
.statistiche-commento { margin-bottom: 12px; }
.statistiche-commento p { white-space: pre-wrap; color: var(--testo); }