/* =========================================================================
   AI SPEED DEMO (#aiSpeedDemo).
   See src/components/AiSpeedDemo.astro for the storyboard.
   Timeline: public/js/ai-speed-demo.js toggles `is-*` classes.

   The AI co-builder chat language established in BudgetDetailDemo (message,
   reply, a checklist landing one item at a time, a "Done" line with a
   result chip), minus the composer/typing simulation — this is a compact
   pillar demo, not a full feature page. Same --xxx-* palette likeness
   rules as every other demo on the site.
   ========================================================================= */

.asd {
  --asd-canvas: #FAF9F5;
  --asd-card: #FFFFFF;
  --asd-border: #DBDBDE;
  --asd-line: #EAEAEA;
  --asd-ink: #2B2B2B;
  --asd-ink2: #777777;
  --asd-accent: #6A5BC6;
  --asd-accent-soft: #ECECFF;
  --asd-green: #2C8E45;
  --asd-green-soft: #C4EECF;
}

.asd__stage {
  position: relative; overflow: hidden; width: 100%;
  aspect-ratio: 3 / 2; min-height: 380px; max-width: 640px; margin: 0 auto;
  background: var(--asd-canvas);
  display: flex; flex-direction: column;
  transition: opacity .5s ease;
}
.asd.is-out .asd__stage { opacity: 0; }

.asd__topBar {
  flex: none; font-size: 11px; font-weight: 600; color: var(--asd-ink);
  padding: 12px 14px 9px; border-bottom: 1px solid var(--asd-line);
  white-space: nowrap;
}

.asd__pane { flex: 1; min-height: 0; min-width: 0; padding: 18px 16px; display: flex; flex-direction: column; justify-content: center; gap: 18px; }

.asd__thread {
  background: var(--asd-card); border: 1px solid var(--asd-border); border-radius: 10px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 9px;
}

/* the user's request — already sent, no typing simulation. */
.asdMsg {
  align-self: flex-end; max-width: 88%;
  background: var(--asd-accent); color: #fff; font-size: 10.5px; line-height: 1.4;
  padding: 7px 11px; border-radius: 10px 10px 2px 10px; margin: 0;
}

/* the AI's reply — fades in after a beat. */
.asdReply {
  max-width: 92%; font-size: 10.5px; line-height: 1.4; color: var(--asd-ink); margin: 0;
  opacity: 0; transform: translateY(var(--motion-rise));
  transition: opacity var(--motion-base) ease, transform var(--motion-base) var(--ease-enter);
}
.asd.is-replied .asdReply { opacity: 1; transform: none; }

/* the build checklist — the motion kit's .mo-step (styles.css); each
   step lands one at a time, at a pace that gets FASTER as it goes, selling
   the speed claim in the pacing itself (see the JS driver). */
.asd__steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.asdStep { font-size: 10px; color: var(--asd-ink2); }
.asdStep__label { flex: 1; min-width: 0; }

/* the "Done" line + result chip — fades in once every step has landed. */
.asdDone {
  font-size: 10.5px; color: var(--asd-ink); margin: 2px 0 0;
  opacity: 0; transform: translateY(var(--motion-rise));
  transition: opacity var(--motion-base) ease, transform var(--motion-base) var(--ease-enter);
}
.asd.is-done .asdDone { opacity: 1; transform: none; }
.asdDone [data-el="doneTime"] { font-weight: 700; font-variant-numeric: tabular-nums; }
.asdChip {
  display: inline-block; background: var(--asd-accent-soft); color: var(--asd-accent);
  font-size: 9.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
}

/* the speed badge — the last thing to land. */
.asdSpeed {
  align-self: center; font-size: 9.5px; font-weight: 700; color: var(--asd-green);
  background: #E3F5E9; border: 1px solid var(--asd-green-soft); border-radius: 999px;
  padding: 5px 12px; white-space: nowrap;
  opacity: 0; transform: translateY(var(--motion-rise));
  transition: opacity var(--motion-base) ease, transform var(--motion-base) var(--ease-enter);
}
.asd.is-resolved .asdSpeed { opacity: 1; transform: none; }