/* ============================================================
   CHIEDI AL MANUALE — widget di domande sul contenuto del manuale.
   Eccezione al principio 6 di AGENTS.md (nessuna dipendenza esterna
   a runtime), delimitata al solo cliente Rivolta: vedi «Eccezione al
   principio 6» in AGENTS.md.
   ============================================================ */

.chiedi {
  border-top: 1px solid var(--bordo);
  margin-top: 88px;
  padding-top: 32px;
}
/* La gerarchia tipografica arriva dalla regola h2 generale; qui si
   azzera solo il margine superiore, già dato dal padding-top sopra. */
.chiedi h2 { margin-top: 0; }

.chiedi .provenienza {
  font-size: var(--dimensione-micro);
  color: var(--testo-3);
  text-transform: uppercase;
  letter-spacing: var(--spaziatura-lettere-maiuscoletto);
  margin-bottom: 20px;
}

/* ---------- scambio: domanda e risposta correnti, mai in cronologia ---------- */
.scambio {
  margin-bottom: 20px;
  padding: 20px;
  border-radius: 8px;
  background: var(--superficie);
}
.scambio[hidden] { display: none; }

.scambio .domanda {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: var(--dimensione-corpo-grande);
  color: var(--testo);
  margin: 0 0 12px;
}

.scambio .risposta-ai {
  font-family: var(--font-testo);
  font-size: var(--dimensione-corpo);
  line-height: var(--interlinea-corpo);
  color: var(--testo-2);
  max-width: 62ch;
  margin: 0;
}

.scambio .fonte-ai {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--bordo);
  font-size: var(--dimensione-nota);
  color: var(--testo-2);
}
.scambio .fonte-ai .etichetta {
  font-size: var(--dimensione-micro);
  text-transform: uppercase;
  letter-spacing: var(--spaziatura-lettere-maiuscoletto);
  color: var(--testo-3);
  margin-right: 6px;
}
.scambio .fonte-ai a.titolo-scheda { color: var(--accento); text-decoration: none; }
.scambio .fonte-ai a.titolo-scheda:hover { text-decoration: underline; }

/* ---------- attesa: filetto orizzontale che scorre ---------- */
.scambio .attesa {
  position: relative;
  height: 2px;
  border-radius: 2px;
  background: var(--bordo);
  overflow: hidden;
}
.scambio .attesa::after {
  content: "";
  position: absolute;
  top: 0;
  left: -40%;
  width: 40%;
  height: 100%;
  background: var(--accento);
  animation: attesa-scorre 1.1s ease-in-out infinite;
}
@keyframes attesa-scorre {
  0% { left: -40%; }
  100% { left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .scambio .attesa::after { animation: none; left: 0; width: 100%; }
}
.scambio .attesa .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- campo domanda ---------- */
.campo-chiedi {
  display: flex;
  gap: 10px;
}
.campo-chiedi input[type="text"] {
  flex: 1;
  font: inherit;
  font-size: var(--dimensione-corpo-piccolo);
  padding: 10px 14px;
  border: 1px solid var(--bordo);
  border-radius: 6px;
  background: var(--superficie);
  color: var(--testo);
}
.campo-chiedi input[type="text"]::placeholder { color: var(--testo-3); }
.campo-chiedi input[type="text"]:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }

.campo-chiedi button[type="submit"] {
  display: inline-block;
  font: inherit;
  font-size: var(--dimensione-nota-media);
  font-weight: var(--peso-medio);
  cursor: pointer;
  padding: 7px 16px;
  border-radius: 6px;
  border: none;
  background: var(--accento);
  color: var(--accento-testo);
}
.campo-chiedi button[type="submit"]:hover { filter: brightness(1.08); }
.campo-chiedi button[type="submit"]:disabled {
  opacity: 0.6;
  cursor: default;
}
.campo-chiedi button[type="submit"]:disabled:hover { filter: none; }
.stato-chiedi {
  margin: 8px 0 0;
  font-size: var(--dimensione-nota-media);
  color: var(--testo-3);
}
.stato-chiedi[hidden] { display: none; }

.campo-chiedi:has(input:disabled) input[type="text"],
.campo-chiedi:has(input:disabled) button[type="submit"] {
  opacity: 0.6;
  cursor: default;
  pointer-events: none;
}

@media (max-width: 640px) {
  .campo-chiedi { flex-direction: column; align-items: stretch; }
}