/* ACM · componenti nuovi dell'assistente (scheda corso, domande successive, scheda contatto).
   Ogni valore sotto è preso dall'approvato — nessun colore, raggio o font nuovo — con il
   commento che dice da quale regola viene. Fonti lette al passo 1:
   - acm-side-chat.css (pannello laterale, root del sito)
   - CSS custom dei widget HTML della hero, post 21566 (_elementor_data, elementi 58a6051/8c1168c)
   - variabili globali Elementor (novamira/elementor-list-variables): --black #1d1d1f,
     --g1..--g6, --white #ffffff, --r-lg 20px, --r-md 14px, --r-sm 4px, --r-pill 999px,
     font-primario (var(--font) nell'approvato) */

/* ── Bug segnalato da Fabrizio, misurato prima di correggere: nella hero (non nel pannello, che ha
   una sua pila di stacking separata) le domande successive risultavano non cliccabili.
   document.elementFromPoint al centro di ogni chip restituiva ".elementor-element-58a6051"
   (il DIV che Elementor mette attorno al titolo .s1-hero-title) invece del bottone.

   PRIMO TENTATIVO (sbagliato, lasciato qui per chi riprende in mano il file): alzare lo z-index
   di #heroChat stesso non basta — #heroChat non è figlio diretto di #hero, ma del wrapper widget
   Elementor che lo contiene insieme a .s1-hero-overlay (position:absolute; z-index:1, generato da
   Elementor, non da noi). z-index:5 su #heroChat vale SOLO dentro quel wrapper (posizionato = crea
   il proprio contesto di stacking): a livello di #hero, a competere con l'altro ramo dell'albero
   (.s1-hero-content / #heroContent, position:relative; z-index:2, che contiene il titolo) è lo
   z-index:1 del WRAPPER, non il 5 del figlio. Misurato con la catena completa degli antenati
   (getComputedStyle su ogni nodo): il wrapper perde 1 a 2 contro #heroContent, quindi qualunque
   z-index dentro #heroChat non emerge mai.
   CAUSA VERA e FIX: si alza lo z-index del WRAPPER STESSO. Non ha una classe stabile su cui contare
   (l'ID Elementor del widget cambierebbe se qualcuno lo ricrea in editor): si seleziona con
   :has(), ancorato all'ID nostro (#heroChat), che è garantito esistere perché l'intero motore JS
   dipende da document.getElementById('heroChat'). */
:has(> #heroChat){z-index:3}

.acm-x-schede{display:grid;gap:8px;margin-top:10px}

.acm-x-scheda{
  display:grid;grid-template-columns:64px 1fr;gap:10px;align-items:center;
  text-decoration:none;color:inherit;
  border:1px solid var(--g4, #d1d1d6); /* .acm-chat-drawer { border-left: 1px solid var(--g4, #d1d1d6); } e .acm-chat-chips button */
  padding:8px;
  border-radius:var(--r-md, 14px); /* .s1-chat-av { border-radius: var(--r-md); } — hero, id 8c1168c */
  min-height:44px; /* area cliccabile minima chiesta da Fabrizio; le schede misurate erano già 86-124px, qui solo per non scendere mai sotto */
}
.acm-x-scheda img{width:64px;height:80px;object-fit:cover;display:block}
.acm-x-scheda-testo{display:grid;gap:2px;min-width:0}
.acm-x-scheda-testo strong{font-weight:600;overflow-wrap:anywhere} /* peso 600: .acm-chat-eyebrow, .acm-chat-av */
.acm-x-scheda-riga{font-size:.85em;opacity:.7}
.acm-x-scheda-invito{font-size:.85em;text-decoration:underline;text-underline-offset:3px}

.acm-x-seguito{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 4px}
/* .acm-x-seguito riusa esattamente lo stile dei chip esistenti: stessa regola, selettore esteso
   (dichiarazioni copiate da .acm-chat-chips button in acm-side-chat.css — bordo aggiornato allo
   stesso token, --g3, il 2026-09-22 per l'audit accessibilità: va tenuto identico all'altra
   copia o questa (caricata dopo, stessa specificità) vince e la riporta indietro). */
.acm-chat-chips button,
.acm-x-seguito button{
  font-family: var(--font, sans-serif);
  font-size: 12px; padding: 7px 14px; border: 1px solid var(--g3, #86868b);
  border-radius: var(--r-pill, 999px); background: var(--white, #fff); cursor: pointer; color: var(--g1, #3a3a3c);
  transition: border-color .2s, background .2s;
}

.acm-x-azioni{display:flex;align-items:center;gap:4px}
.acm-x-nuova{background:none;border:0;padding:6px;cursor:pointer;color:inherit} /* icona: stesso trattamento "nessuno sfondo" del contenitore azioni, nessun colore nuovo */

.acm-x-contatto{
  display:grid;gap:10px;margin:8px 0;padding:12px;
  border:1px solid var(--g4, #d1d1d6); /* stessa fonte di .acm-x-scheda */
}
.acm-x-campo{display:grid;gap:4px;font-size:.9em}
.acm-x-campo input,.acm-x-campo select{
  font:inherit;padding:8px;min-width:0;
  border:1px solid var(--g4, #d1d1d6); /* .acm-chat-chips button border */
  background:var(--white, #fff); /* .acm-chat-drawer background, .acm-chat-chips button background */
  color:var(--black, #1d1d1f); /* .acm-chat-title, .acm-chat-bubble color */
}
.acm-x-privacy{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:start;font-size:.85em}
.acm-x-privacy input[type=checkbox]{
  accent-color:currentColor; /* si adatta da sé: bianco in hero, nero nel pannello, come il testo della bolla che lo contiene */
  /* Audit accessibilità 2026-09-22: target size WCAG 2.5.8, ≥24×24px. Il checkbox nativo senza
     queste due righe rende a ~13×13px (dimensione di default del browser) — .acm-x-privacy è già
     l'intero <label> (acm-chat.js: label.className='acm-x-privacy'), quindi il testo è già
     cliccabile; questo garantisce che lo sia anche il controllo stesso. */
  width:24px;height:24px;
}
/* Nota sotto la spunta privacy (L. 132/2025 art. 4). Selettore a specificità 0,2,1 apposta: acm-side-chat.css
   ha `.acm-chat-bubble p{font-size:14px;margin-bottom:6px}` (0,1,1) che batteva la sola classe (0,1,0) e la
   faceva più grande della privacy (14px contro 11.9px misurati). .8em di 14px = 11.2px: mai sopra la privacy
   (.85em). margin-bottom:0 esplicito per non lasciare il buco di 6px sopra i bottoni. Niente !important. */
.acm-chat-bubble p.acm-x-nota-minori{margin:4px 0 0;font-size:.8em;opacity:.8}
.acm-x-riepilogo{font-size:.85em;opacity:.8}

/* ⚠️ APERTO (da confermare in review, Task 13): l'approvato non definisce un colore di
   errore/accento — né in acm-side-chat.css, né nel CSS della hero, né fra le variabili globali
   Elementor (nessun rosso/arancio in nessuna delle tre fonti). #b00020 sarebbe un colore nuovo,
   quindi qui l'errore si segnala SENZA colore dedicato: testo in --black con peso 600, come le
   altre enfasi dell'approvato (.acm-chat-eyebrow, .acm-chat-av). */
.acm-x-errore{color:var(--black, #1d1d1f);font-weight:600;font-size:.85em;min-height:1em;margin:0}

.acm-x-trappola{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ⚠️ APERTO (da confermare in review, Task 13): l'approvato non ha un bottone di testo pieno —
   solo bottoni icona (.acm-chat-inputbar button, .s1-hero-send). Per .acm-x-bottone (submit
   "Avanti"/"Invia" della scheda contatto) riuso gli stessi colori e lo stesso raggio di
   .acm-chat-inputbar button; il padding è nuovo perché lì serve un quadrato 36×36 per un'icona,
   qui un bottone di testo a piena larghezza — non è un colore/raggio/font nuovo, solo layout. */
.acm-x-bottone{
  /* Tutto !important: il tema ha uno stile globale per <button> (bordo/colore che arriva sopra
     anche a bottoni con classe propria, confermato dal lead su Modifica/Non ora/Invia) — qui non
     basta vincere per specificità, serve vincere sempre. */
  width:100% !important;border:0 !important;cursor:default !important;font:inherit !important;padding:10px 20px !important;
  border-radius:var(--r-md, 14px) !important; /* .acm-chat-inputbar button — allineato al token di sistema il 2026-09-22, audit accessibilità */
  background:var(--black, #1d1d1f) !important; color:#fff !important; /* .acm-chat-inputbar button */
  box-shadow:none !important;outline:none !important;
  /* "Invia" parte con l'aspetto disattivato finché la privacy non è spuntata — stesso
     trattamento di .acm-chat-inputbar button quando è vuoto (opacity:.4 nell'approvato). Qui
     NON uso pointer-events:none come l'approvato: il bottone resta operabile apposta (chiesto
     dal lead), così un click comunque arrivato mostra il messaggio dedicato invece di sembrare
     che non sia successo niente. Lo stato reale lo dice aria-disabled, non :disabled nativo. */
  opacity:.4 !important; /* niente transizione: il cambio deve essere il segnale immediato che ora si può inviare, non un'animazione */
}
.acm-x-bottone.active{opacity:1 !important;cursor:pointer !important} /* .active: stessa classe/stesso significato di .acm-chat-inputbar button.active */
.acm-x-bottone:focus-visible{outline:2px solid #fff !important;outline-offset:2px !important} /* focus visibile, colore dell'approvato (testo bianco del bottone stesso) */

@media (max-width:480px){.acm-x-scheda{grid-template-columns:48px 1fr}.acm-x-scheda img{width:48px;height:60px}}
/* Scheda senza immagine (pagine come Staff o Governance, 2026-09-29): senza questa regola il testo
   finiva nella colonna da 64px pensata per la foto — «Accadem / ia», «Governa / nce». */
.acm-x-scheda.senza-img{grid-template-columns:1fr}
.acm-x-scheda:not(:has(img)){grid-template-columns:1fr} /* regola a parte: un browser senza :has() scarterebbe l'intera lista di selettori, .senza-img compresa */

/* ── D21: trasparenza AI + «parla con l'Ufficio Orientamento» ───────────────────────────────
   Nella hero questa riga vive DENTRO l'elemento approvato .s1-hero-note (colore/dimensione già
   suoi, definiti nel CSS della hero: 10px, rgba(255,255,255,.28) prima dell'audit accessibilità
   del 2026-09-22 — vedi override poco sotto). Il pannello non ha un elemento equivalente:
   .acm-x-trasparenza ne riproduce dimensione e spaziatura copiandole da .s1-hero-note, col colore
   di .acm-chat-eyebrow perché qui lo sfondo è chiaro, non scuro come la hero — stesso token
   aggiornato a --g2 il 2026-09-22, stesso motivo del punto sopra in acm-side-chat.css. */
.acm-x-trasparenza{font-size:10px;letter-spacing:.2px;margin-top:12px;color:var(--g2, #6e6e73);flex-shrink:0}
.acm-x-parla{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:2px} /* stesso trattamento di .acm-x-scheda-invito, qui inline in una frase invece che a fine riga */

/* ── Audit accessibilità 2026-09-22: contrasto e focus sopra il video della hero ─────────────
   .s1-hero-note, il placeholder di #heroInput e .s1-hero-chip sono elementi APPROVATI, dichiarati
   nel CSS della hero (post 21566), non in questo file — l'override qui dentro (specificità ID o
   !important) è la stessa tecnica già in uso poco sopra per #hero.chat-active .s1-hero-bar-glass:
   si corregge dal plugin senza toccare il CSS custom del widget su un post di produzione.
   Misurato dal vivo su 4 fotogrammi video, caso peggiore: nota 2,37-2,51:1 (serve 4,5), placeholder
   2,06-3,38:1 (serve 4,5), chip 2,60:1 a 390px (serve 4,5, passava solo a 1440 e per un margine
   minimo). Solo l'opacità del bianco cambia, mai un colore nuovo — stesso bianco, più pieno. */
#hero .s1-hero-note{color:rgba(255,255,255,.65) !important}
#heroInput::placeholder{color:rgba(255,255,255,.65) !important}
.s1-hero-chip{color:rgba(255,255,255,.95) !important}

/* Rimisura 2026-09-22 (giro 13): a 390px, sul fotogramma video più chiaro, alzare solo l'opacità
   del testo non bastava (placeholder 2,87:1, chip 2,95:1 — migliorati ma sotto 4,5). Serve scurire
   il FONDO dietro il testo, non il testo stesso. Aggiunge un solo layer (background-image) invece
   di toccare `background` (che in post-21566.css è già `rgba(255,255,255,.1)`/`.08`, shorthand):
   così il vetro/i chip restano quelli approvati, con una velatura scura in più sotto, solo sotto il
   breakpoint mobile — a 1440 il caso peggiore passava già (nota/chip PASS, placeholder marginale ma
   comunque migliorato), non serve toccarlo lì e un cambiamento visibile solo dove serve resta più
   vicino a "minimo" di uno applicato ovunque. Nero, non un colore nuovo — stessa famiglia già in
   uso per ombre/overlay in questo file (backdrop, ombra drawer, ombra FAB). */
/* !important necessario: verificato con CDP CSS.getMatchedStylesForNode (non dedotto) che
   Elementor carica un foglio responsive dedicato al mobile (global/local-21566-frontend-mobile.css,
   stesso sito) DOPO questo file, con la stessa selettore e la stessa specificità — ridichiara
   `background: rgba(255,255,255,.1)` (shorthand, quindi anche `background-image:initial`) e
   annullava il layer aggiunto qui sopra senza !important. Stesso identico meccanismo già trovato
   per `.acm-x-parla:focus-visible` in questo stesso file: un foglio del sito, non del tema, che
   vince per ordine di caricamento sulla stessa specificità. */
@media (max-width:480px){
  .s1-hero-bar-glass{background-image:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)) !important}
  .s1-hero-chip{background-image:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)) !important}
}

/* Focus da tastiera assente su #heroInput (nessun anello: il :focus-within dichiarato su
   .s1-hero-bar-glass non scatta come atteso, misurato dal vivo) e su #heroSend (anello presente
   ma a 2,31:1, sotto il 3:1 dei componenti — eredita il colore icona, che cambia con lo stato
   attivo/inattivo). Regola diretta sull'elemento invece di un indicatore ereditato dal genitore:
   stesso bianco pieno già usato per .acm-x-bottone:focus-visible sopra, stessa ragione. */
#heroInput:focus-visible{outline:2px solid #fff !important;outline-offset:2px !important}
#heroSend:focus-visible{outline:2px solid #fff !important;outline-offset:2px !important}

/* ── D22: raccolta guidata, una domanda alla volta ───────────────────────────────────────────
   Le bolle domanda/risposta NON hanno CSS qui: sono le stesse bolle della conversazione,
   disegnate dalla STESSA funzione nodoMessaggio() del motore (vedi il commento in testa a
   window.AcmContatto in acm-chat.js) — zero regole nuove per il loro aspetto. Il riepilogo finale
   è anch'esso una bolla nodoMessaggio(), non un riquadro: il lead l'ha respinto la prima volta
   perché nella hero un riquadro trasparente col bordo, sopra il video scuro, con testo scuro, non
   si leggeva — bolla vuol dire stesso sfondo/colore delle altre, sempre leggibile.
   L'input di testo riusa la classe approvata "acm-chat-inputbar" (stesso raggio, stesso sfondo,
   stesso bottone) invece di inventarne una: qui sotto solo la regola per l'<input>, perché
   l'approvata la scrive per <textarea> e i passi di testo di questo flusso usano <input>
   (tastiera email/telefono sul cellulare, autocomplete) — dichiarazioni copiate 1:1 da
   ".acm-chat-inputbar textarea" in acm-side-chat.css. I chip (sede/anno/regione/paese/corso/
   conferma nome ambiguo/Modifica) riusano ".acm-x-seguito", già condiviso con i chip di
   "seguito" e i chip nativi dell'approvato: anche lì zero regole nuove. */
.acm-x-raccolta{display:grid;gap:8px;margin-top:10px} /* stessa regola di .acm-x-schede */
.acm-chat-inputbar input{
  flex:1;border:none;background:none;outline:none;
  font-family:var(--font, sans-serif);font-size:15px;padding:4px 0;color:var(--black, #1d1d1f);
} /* .acm-chat-inputbar textarea in acm-side-chat.css, adattata a <input> */
/* La scelta suggerita (precompila) si marca DENTRO la stessa serie di chip — stile del chip
   attivo, come il bottone di invio quando è pronto: fondo scuro, testo chiaro. Non più un chip
   "Confermi X?" separato e ridondante (bocciato dal lead: due chip per la stessa cosa). */
.acm-x-attivo{background:var(--black, #1d1d1f) !important;color:#fff !important;border-color:var(--black, #1d1d1f) !important}

/* Reset mirato SU TUTTA LA CHAT (non solo .acm-x-raccolta): il tema applica a <button>/<a> senza
   classe sua uno stile globale (bordo/colore magenta, rgb(204,51,102) — letto in reset.css del
   tema Hello Elementor con getComputedStyle) che arrivava sopra anche a bottoni FUORI dalla
   raccolta guidata: ↻ "Nuova conversazione" e ✕ "Chiudi" nella testata del pannello — segnalato
   dal lead su un secondo giro di screenshot, con ragione: il primo reset copriva solo
   .acm-x-raccolta, non tutta la chat. :is() con le TRE radici della chat (hero, nota di
   trasparenza della hero — sta fuori da #heroChat, è un fratello — e il pannello) invece di
   ripetere lo stesso blocco tre volte. Azzerato su ogni stato, poi rimesso SOLO quello
   dell'approvato con regole più specifiche o !important dove serve vincere comunque. Il focus
   resta visibile per l'accessibilità, con currentColor — si adatta da sé, nessun colore nuovo. */
:is(.s1-hero-chat, .s1-hero-note, .acm-chat-drawer) :is(button, a),
:is(.s1-hero-chat, .s1-hero-note, .acm-chat-drawer) :is(button, a):hover,
:is(.s1-hero-chat, .s1-hero-note, .acm-chat-drawer) :is(button, a):focus,
:is(.s1-hero-chat, .s1-hero-note, .acm-chat-drawer) :is(button, a):active{
  background:none;border:0;color:inherit;padding:0;margin:0;box-shadow:none;text-decoration:none;outline:none;font:inherit;
}
/* Audit accessibilità 2026-09-22: .acm-x-parla (dentro .s1-hero-note, quindi una delle tre radici
   coperte) misurato dal vivo con Tab reale risultava SENZA anello di focus, nonostante questa
   regola. Causa trovata: stessa specificità del reset del tema su <button>/<a> senza classe (il
   "bordo/colore magenta" già documentato sopra per .acm-x-bottone) — qui vinceva lui, non questa
   regola, perché mancava !important mentre .acm-x-bottone ce l'ha sempre avuto. .s1-hero-chip
   passava perché ha una sua regola di focus nativa nel CSS della hero, indipendente da questa —
   non perché questa regola funzionasse per tutti. */
:is(.s1-hero-chat, .s1-hero-note, .acm-chat-drawer) :is(button, a):focus-visible{outline:2px solid currentColor !important;outline-offset:2px !important}

/* Ripristini, con specificità più alta del reset sopra, così vincono senza bisogno di !important
   — tranne dove segnalato (.acm-x-bottone, sopra le regole native del tema). */
:is(.s1-hero-chat, .s1-hero-note, .acm-chat-drawer) .acm-x-seguito button{ /* Modifica e i chip di scelta: stesso chip dell'approvato */
  font-family: var(--font, sans-serif);font-size:12px;padding:7px 14px;
  border:1px solid var(--g4, #d1d1d6);border-radius:var(--r-pill, 999px);
  background:var(--white, #fff);color:var(--g1, #3a3a3c);cursor:pointer;
}
:is(.s1-hero-chat, .s1-hero-note, .acm-chat-drawer) .acm-x-parla{ /* "Non ora" + "parla con l'Ufficio Orientamento": testo sottolineato, non un chip */
  color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:2px;
}
.acm-chat-drawer .acm-x-nuova{background:none;border:0;padding:6px;cursor:pointer;color:inherit} /* icona ↻ della testata, fuori da .acm-x-raccolta/.acm-x-seguito */
.acm-x-privacy a{text-decoration:underline} /* color:inherit già dal reset sopra; qui solo la sottolineatura richiesta */

.acm-x-raccolta-azioni{display:flex;align-items:center;gap:14px;margin-top:4px}
.acm-x-riepilogo-lista{
  display:grid;grid-template-columns:auto 1fr;gap:4px 10px;margin:4px 0;font-size:.85em;
}
.acm-x-riepilogo-lista dt{opacity:.7;white-space:nowrap} /* etichetta attenuata */
.acm-x-riepilogo-lista dd{margin:0;font-weight:inherit} /* valore normale */

/* ── Contrasto della barra a chat attiva — segnalato dal lead su hero-390-attiva.png: "non si
   vede proprio", bloccante su telefono. Il default di .s1-hero-bar-glass (background:
   rgba(255,255,255,.1) + un box-shadow scuro, 0 8px 32px rgba(0,0,0,.2)) diventa quasi invisibile
   quando .chat-active sposta la barra sulla parte più scura del video (vedi assestaBarraHero() in
   acm-chat.js per la posizione — qui solo il contrasto). STESSO sfondo delle bolle AI, non un
   colore nuovo: preso da `.s1-chat-msg.ai .s1-chat-body { background: rgba(255,255,255,.08); }`
   in post-21566.css/post-7.css (letto da document.styleSheets, non a occhio) — le bolle restano
   leggibili sullo stesso sfondo scuro, quindi lo stesso valore basta anche qui. Solo a chat
   attiva: a chat vuota .s1-hero-bar-glass non cambia, zero pixel di differenza sullo scatto
   "hero vuota" (Task 13). */
#hero.chat-active .s1-hero-bar-glass{background:rgba(255,255,255,.08)}

/* ── #heroSend/il ↻ nuovo diventavano NON cliccabili dopo alcuni messaggi, a schermi stretti:
   misurato con getBoundingClientRect(), #heroChat (il registro dei messaggi, z-index:3 per il fix
   dei chip del D21) cresce in altezza con più messaggi e arriva a sovrapporsi alla barra —
   riportata dentro il viewport da assestaBarraHero() sopra — vincendo lo stacking e rubando il
   click anche sulla sua area vuota. .s1-hero-bar non può battere quello z-index alzando il PROPRIO
   (è dentro .s1-hero-content, che resta a z-index:2: un discendente non supera mai lo z-index di
   un fratello del proprio antenato). Si lascia passare il click sull'area vuota di #heroChat, non
   sul suo contenuto: i messaggi/chip restano cliccabili come prima (pointer-events:auto sui figli
   diretti), è SOLO lo sfondo trasparente del contenitore a non intercettare più nulla. Scoperto e
   verificato con un click vero dopo 6 messaggi a 390px, non assunto.
   2.1.9 — TOLTO: rendeva la chat non scorrevole col dito (segnalato da Fabrizio da telefono;
   misurato: uno swipe che parte fra due messaggi arriva a #hero, scrollTop fermo). La
   sovrapposizione che curava non può più esistere: impaginaChatHero() in acm-chat.js ferma la chat
   12px sopra la barra misurata, a qualunque altezza. Il contenitore torna a ricevere i tocchi. */
/* 2.1.9 — la barra INVISIBILE da desktop (segnalato da Fabrizio) non era la chat sopra: misurato
   2560×1800 a parte, chat e barra non si toccano. Era il velo. A chat attiva .s1-hero-overlay
   diventa un gradiente scuro fino a .8 con backdrop-filter:blur(10px), e sta nel contenitore di
   #heroChat, che il fix D21 qui in cima (:has(> #heroChat){z-index:3}) ha messo SOPRA #heroContent
   (z-index 2): la barra finiva sfocata e scurita sotto il velo. elementFromPoint non lo mostrava
   perché il velo ha pointer-events:none — trovato guardando lo scatto, confermato con un hit-test
   col velo reso cliccabile per un istante (lavori/hero-chiusura/misura.mjs, veloSopraBarra).
   Fix: a chat attiva #heroContent torna sopra il velo (4 > 3), come prima del D21, ma senza
   riprendersi i click: pointer-events:none su tutto il contenuto e auto solo sulla barra. Misurato:
   a chat attiva in #heroContent resta visibile SOLO la barra (titolo e badge sono visibility:hidden),
   e la barra non tocca mai la chat (impaginaChatHero()), quindi i chip del D21 restano cliccabili.
   A hero vuota non cambia niente: lo scatto approvato del Task 13 resta com'è. */
#hero.chat-active #heroContent{z-index:4;pointer-events:none}
#hero.chat-active #heroContent .s1-hero-bar{pointer-events:auto}
#hero.chat-active #heroChat{
  pointer-events:auto; /* il widget che lo contiene ha pointer-events:none (tema): va rimesso qui */
  overscroll-behavior:contain; /* arrivati in cima/fondo non si trascina la pagina sotto */
  -webkit-overflow-scrolling:touch;touch-action:pan-y;
}

/* ── ↻ "Nuova conversazione" nella hero — segnalato da Fabrizio: bloccato nella chat attiva
   senza modo di ricominciare, perché ↻ esisteva solo nella testata del pannello (.acm-x-nuova,
   sopra). Stessa icona, stesso richiamo a nuovaConversazione(); classe propria (non .acm-x-nuova)
   perché vive fuori dalle TRE radici del reset magenta qui sopra (.s1-hero-chat/.s1-hero-note/
   .acm-chat-drawer): è dentro .s1-hero-bar-glass, un fratello di #heroChat, non un discendente —
   estendere quel selettore per un solo bottone in più avrebbe allargato una superficie già
   delicata (tre round di bug magenta). Stesso trattamento "nessuno sfondo" di .acm-x-nuova, con
   !important sulle proprietà che il reset.css del tema impone ai <button> senza classe sua
   (bordo/colore magenta, la stessa causa già trovata per .acm-x-bottone). */
.acm-x-nuova-hero{
  background:none !important;border:0 !important;padding:6px !important;margin-left:4px;
  cursor:pointer;color:inherit !important;flex-shrink:0;
  box-shadow:none !important;outline:none !important;font:inherit;
}
.acm-x-nuova-hero:hover,.acm-x-nuova-hero:focus,.acm-x-nuova-hero:active{background:none !important;border:0 !important;color:inherit !important}
.acm-x-nuova-hero:focus-visible{outline:2px solid currentColor !important;outline-offset:2px}
.acm-x-nuova-hero[hidden]{display:none !important} /* rete di sicurezza: [hidden] nativo basta quasi sempre, qui vinciamo comunque */

/* ── 2.1.9 — X per chiudere la chat della hero (segnalato da Fabrizio: nessun modo di tornare alla
   hero normale). Vive nel contenitore di #heroChat, non dentro (il suo innerHTML si sostituisce), e
   la sua posizione la scrive impaginaChatHero(): in alto a destra della colonna della chat, sotto
   la nav fissa. Stesso trattamento di .acm-x-nuova-hero (nessuno sfondo, !important dove il
   reset.css del tema colpisce i <button>), bianco come il resto del testo sopra il video. Area
   cliccabile 40×40 anche se l'icona è 20. Solo a chat attiva: senza .chat-active non esiste. */
#hero .acm-x-chiudi-hero{display:none !important} /* misurato: senza !important il reset del tema sui <button> la rende inline-block anche a hero vuota */
#hero.chat-active .acm-x-chiudi-hero{
  display:flex !important;align-items:center;justify-content:center;
  position:absolute;top:12px;left:auto;z-index:2;width:40px !important;height:40px !important;
  padding:0 !important;margin:0 !important;border:0 !important;border-radius:var(--r-pill, 999px) !important;
  background:none !important;box-shadow:none !important;outline:none !important;
  color:#fff !important;cursor:pointer;pointer-events:auto;
}
#hero.chat-active .acm-x-chiudi-hero:hover,#hero.chat-active .acm-x-chiudi-hero:focus,#hero.chat-active .acm-x-chiudi-hero:active{background:none !important;border:0 !important;color:#fff !important}
#hero.chat-active .acm-x-chiudi-hero:focus-visible{outline:2px solid #fff !important;outline-offset:2px !important}
/* Il ↻ non ha senso a hero chiusa (con la X la conversazione resta, ma la vista no). */
#hero:not(.chat-active) .acm-x-nuova-hero{display:none !important}

/* 2026-09-29 (Fabrizio: «in hero home mi manca un pulsante per resettare la chat, e nella raccolta dati il "non ora"
   è scritto scuro che non si vede»). Misurato: sia ↻ sia «Non ora» ereditavano rgb(51,51,51) sopra il video scuro
   della hero — il ↻ c'era ed era cliccabile, ma non si vedeva. Solo nella hero: nel pannello lo sfondo è chiaro e il
   colore ereditato è giusto. Bianco come la X di chiusura (#hero.chat-active .acm-x-chiudi-hero). */
#hero #heroChat .acm-x-raccolta-azioni .acm-x-parla{color:#fff !important;text-decoration-color:rgba(255,255,255,.6) !important}
/* «Avvia nuova conversazione» (2026-09-29): spostato dalla barra di scrittura (accanto a «Invia», rischio di premerlo
   per sbaglio) in alto a sinistra della colonna della chat, sulla riga della X. top/left li scrive impaginaChatHero(). */
#hero.chat-active .acm-x-nuova-hero:not([hidden]){
  display:inline-flex !important;align-items:center;gap:8px;position:absolute;z-index:2;height:40px !important;
  padding:0 6px !important;margin:0 !important;pointer-events:auto;
  font-family:var(--font, sans-serif) !important;font-size:14px !important;line-height:1 !important;white-space:nowrap;
}
#hero .acm-x-nuova-hero,#hero .acm-x-nuova-hero:hover,#hero .acm-x-nuova-hero:focus,#hero .acm-x-nuova-hero:active{color:#fff !important}
#hero .acm-x-nuova-hero{opacity:.9}
#hero .acm-x-nuova-hero:hover{opacity:1}
#hero .acm-x-nuova-hero span{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.5)}

/* Pulsante AI flottante in home (Fabrizio, 2026-09-29): finché si vede la hero con la chat non serve, e sul telefono
   copriva la nota sotto la barra. Nascosto sulle pagine con #hero finché acm-chat.js non mette .acm-hero-superata
   (IntersectionObserver sulla hero). Le altre pagine non hanno #hero: nessun effetto. */
.acm-chat-fab{transition:opacity .25s ease, transform .25s ease, visibility .25s}
html:has(#hero):not(.acm-hero-superata) .acm-chat-fab{opacity:0 !important;visibility:hidden !important;pointer-events:none !important;transform:translateY(12px)}