/* La chat degli assistenti (assets/js/assistente.js, pagine da scripts/assistenti/genera.js).
 * L'aspetto e' quello di site.css: testata, piede, page-hero, card, btn-*, sol-ex, note e i
 * colori vengono da li'. Qui solo cio' che site.css non ha: elenco, messaggi, casella. */
.as-nota { border-left: 3px solid var(--gold); padding: 10px 14px; background: rgba(245,158,11,.1); color: var(--text); margin-top: 22px; max-width: 680px; border-radius: 4px; font-size: .95rem; }
.as-riquadro { max-width: 680px; }
.as-riquadro p { color: var(--text); margin: 0 0 10px; }
.as-riquadro .cta-row { margin-top: 18px; }
.as-riquadro a:not([class]) { color: var(--accent2); }
.as-chat { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
.as-elenco { padding: 14px; }
.as-nuova { width: 100%; margin-bottom: 10px; }
.as-elenco ul { list-style: none; margin: 0 0 10px; padding: 0; max-height: 50vh; overflow-y: auto; }
.as-voce { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--text); padding: 8px 10px; border-radius: 6px; cursor: pointer; font: inherit; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-voce:hover, .as-voce.attiva { background: rgba(59,130,246,.15); }
.as-collegamento { background: none; border: 0; padding: 0; color: var(--accent2); text-decoration: underline; cursor: pointer; font: inherit; }
.as-elenco .as-collegamento, #as-elimina-questa { font-size: .82rem; color: var(--text-dim); }
.as-dialogo { min-width: 0; }
.as-avviso { margin: 0 0 14px; font-size: .85rem; color: var(--text-dim); }
.as-messaggi { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
/* scroll-margin: chi salta a un messaggio non lo trova sotto la testata fissa (70 px) */
.as-msg { scroll-margin-top: 90px; scroll-margin-bottom: 24px; padding: 12px 16px; border-radius: 10px; max-width: 85%; overflow-wrap: anywhere; line-height: 1.6; font-size: .95rem; }
.as-msg p { margin: 0 0 .7em; } .as-msg p:last-child { margin-bottom: 0; }
.as-msg ul, .as-msg ol { margin: 0 0 .7em; padding-left: 1.3em; }
.as-msg a { color: var(--accent2); }
.as-msg-tu { align-self: flex-end; background: rgba(59,130,246,.2); white-space: pre-wrap; }
.as-msg-lui { align-self: flex-start; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); }
.as-attesa { color: var(--text-dim); font-style: italic; }
/* le domande d'esempio sono pulsanti: stesso aspetto delle .sol-ex span di /soluzioni */
.as-esempi { margin: 0 0 14px; }
.sol-ex .as-esempio { font: inherit; font-size: 0.85rem; color: var(--text-dim); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 999px; padding: 8px 14px; cursor: pointer; }
.sol-ex .as-esempio:hover { color: var(--text); border-color: var(--accent2); }
.as-errore { color: #fca5a5; margin: 0 0 10px; }
.as-direzioni { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.as-direzioni-titolo { width: 100%; margin: 0 0 2px; font-size: .9rem; color: var(--text); }
.as-direzione { font: inherit; font-size: .88rem; color: var(--text-dim); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: 999px; padding: 9px 15px; cursor: pointer; }
.as-direzione:hover { color: var(--text); border-color: var(--accent2); }
.as-direzione[aria-checked="true"] { color: #fff; background: rgba(59,130,246,.28); border-color: var(--accent); }
.as-briciole a { color: var(--accent2); text-decoration: none; }
.as-briciole a:hover { text-decoration: underline; }
.as-altri { display: block; margin-top: 12px; font-size: .85rem; color: var(--accent2); }
.as-apri-elenco { display: none; }
/* i salti nella conversazione: in basso a destra, sopra il contenuto, solo quando servono */
.as-salti { position: fixed; right: 16px; bottom: 16px; z-index: 50; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.as-salto { font: inherit; font-size: .82rem; color: #fff; background: rgba(15,23,42,.92); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 9px 14px; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.as-salto:hover { border-color: var(--accent2); }
.as-errore a { color: inherit; }
.as-scrivi { display: flex; gap: 10px; align-items: flex-end; }
.as-scrivi textarea { flex: 1; min-width: 0; resize: vertical; min-height: 50px; max-height: 40vh; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); color: var(--text); font-family: var(--font); font-size: 16px; }
.as-scrivi textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.as-scrivi button:disabled { opacity: .5; cursor: wait; }
#as-elimina-questa { margin-top: 12px; }
.as-nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.page [hidden] { display: none !important; }
@media (max-width: 760px) {
  /* sul telefono la parte alta resta sotto la testata fissa (70 px) ma lascia vedere prima la chat */
  .page-hero.as-hero { padding-top: 100px !important; padding-bottom: 28px !important; }
  .as-hero .section-title { margin-bottom: 12px; }
  .as-hero .section-desc.lead { font-size: .95rem; line-height: 1.55; }
  .as-nota { margin-top: 14px; font-size: .88rem; }
  .page section.as-corpo { padding-top: 24px; padding-bottom: 48px; }
  .as-chat { grid-template-columns: 1fr; }
  /* sul telefono l'elenco si apre dal pulsante in alto */
  .as-apri-elenco { display: block; width: 100%; }
  .as-elenco { display: none; }
  .as-elenco.aperto { display: block; }
  .as-elenco ul { max-height: 30vh; }
  .as-msg { max-width: 100%; }
}