/* ==========================================================================
   MiMuovo · pagina MiMuovo AI
   1. conferma che diventa "Confermato" (scene dei passi)
   In testata c'è il film (assets/mm/films/mimuovo-ai.css): la vecchia
   sezione WhatsApp ↔ app non c'è più, il film la fa già vedere.
   ========================================================================== */

/* le copie ferme delle scene stanno dentro .step: il testo della scena non
   deve prendere la misura dei paragrafi del passo (.step p in mm.css) */
.step :where(.scene) p{font-size:inherit;line-height:inherit;color:inherit;max-width:none}

/* le liste a griglia non si allargano oltre la scena per colpa del testo su una riga */
.scene .rows{grid-template-columns:minmax(0,1fr)}

/* ---------- 1. conferma e risultato ---------- */
.ai-cf .b{transition:background-color .25s ease,color .25s ease,opacity .25s ease}
.ai-cf .b.dark{display:inline-grid;align-items:center;justify-items:center}
.ai-cf .b.dark > span{grid-area:1/1;display:inline-flex;align-items:center;gap:5px;transition:opacity .2s ease,filter .2s ease}
.ai-cf .b.dark svg{width:12px;height:12px}
.ai-cf .l2{opacity:0;filter:blur(3px)}
.scene[data-step="4"] .ai-cf .b.dark{background:#EAF6DF;color:#2F6B12;transition-delay:.62s;animation:aiPress .3s var(--ease-out) .5s both}
.scene[data-step="4"] .ai-cf .l1{opacity:0;filter:blur(3px);transition-delay:.62s}
.scene[data-step="4"] .ai-cf .l2{opacity:1;filter:none;transition-delay:.66s}
.scene[data-step="4"] .ai-cf .b:not(.dark){opacity:.35;transition-delay:.62s}
@keyframes aiPress{0%,100%{transform:scale(1)}45%{transform:scale(.94)}}

.scene .ai-a{grid-template-columns:30px minmax(0,1fr)}
/* testata: "sto cercando" compare dove arriverà la risposta, così la scena non cambia altezza tra un passo e l'altro */
.scene .ai{position:relative}
.scene .ai > .ai-think.vis{position:absolute;left:0;right:0;top:50px}
/* passi: domanda e risposta stanno in un gruppo per passo; la domanda resta a destra */
.ai > div[data-show]:not(.ai-sug):not(.ai-think):not(.ai-done){display:flex;flex-direction:column;gap:12px}
.ai > div[data-show]:not(.ai-sug):not(.ai-think):not(.ai-done) > .ai-q{align-self:flex-end}
.ai-dl{margin-top:9px}
.ai-dl .row{background:#fff}
.ai-done{display:flex;align-items:center;gap:9px;margin-left:40px;padding:9px 12px;border-radius:12px;background:#F4FAEE;border:1px solid #DDEFCB;font-size:12.5px;color:#20261f}
.ai-done svg{width:15px;height:15px;color:#3B6E00;flex-shrink:0}
.ai-later{margin:12px 0 0 40px;opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .5s var(--ease-out)}
.scene[data-step="4"] .ai-later{opacity:1;transform:none;transition-delay:1.1s}

/* bento */
.chips.ai-chips span{display:inline-flex;align-items:center;gap:6px}
.chips.ai-chips svg{width:13px;height:13px;flex-shrink:0}
.chips.ai-chips span.ask{background:var(--paper-soft);border-color:var(--border);color:var(--ink-soft)}
.chips.ai-chips span.act{background:var(--green-soft);border-color:#CFE6B4;color:var(--green-deep)}
.ai-wa{width:40px;height:40px}
.ai-mini{padding:12px;border-radius:14px;background:#fff;border:1px solid #CFE6B4;box-shadow:var(--shadow-soft)}
.ai-mini p{font-size:13px;line-height:1.45;color:var(--ink);max-width:none}
.ai-mini span{display:flex;gap:6px;margin-top:10px}
.ai-mini b,.ai-mini i{font-style:normal;font-size:12px;font-weight:700;padding:7px 12px;border-radius:999px}
.ai-mini b{background:#121712;color:#fff}
.ai-mini i{background:var(--paper-soft);color:var(--ink-soft)}

/* flusso: la chat in piccolo, con l'aspetto di WhatsApp (assets/wa-mockup.js) */
.fs-ui .aiw-mini{display:flex;flex-direction:column;gap:3px;padding:8px 7px;border-radius:11px;background:#EFE7DD;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
.aiw-m{max-width:94%;padding:5px 7px 4px;border-radius:11px;font-size:11.5px;line-height:1.35;color:#111B21;box-shadow:0 1px .5px rgba(0,0,0,.13)}
.aiw-m.aiw-in{align-self:flex-start;background:#fff;border-bottom-left-radius:3px}
.aiw-m.aiw-out{align-self:flex-end;background:#D9FDD3;border-bottom-right-radius:3px}
.aiw-t{float:right;position:relative;top:3px;margin:5px 0 0 7px;font-size:9px;line-height:1;color:#8696A0;white-space:nowrap}
.aiw-out .aiw-t{color:#6DA57C}
.aiw-t i{font-style:normal;letter-spacing:-3px;padding-right:3px;color:#53BDEB}
.aiw-in + .aiw-out{opacity:0;transform:translateY(4px);transition:opacity .3s ease,transform .4s var(--ease-out)}
.fstage.on .aiw-in + .aiw-out,.fstage.done .aiw-in + .aiw-out{opacity:1;transform:none;transition-delay:.7s}

/* su telefono le righe delle scene vanno a capo invece di finire con i puntini */
@media (max-width: 640px){.scene .row .tx b,.scene .row .tx span{white-space:normal}}
@media (prefers-reduced-motion: reduce){.scene[data-step="4"] .ai-cf .b.dark{animation:none}}

/* correzione locale: su telefono la colonna dei passi non si allarga oltre
   lo schermo per colpa del contenuto delle scene (in mm.css .steps usa 1fr) */
@media (max-width: 979px){.steps{grid-template-columns:minmax(0,1fr)}}