/* =========================================================================
   AI CO-BUILDER HERO DEMO (#aiCoBuilderHeroDemo).
   See src/components/AiCoBuilderHeroDemo.astro for the storyboard.
   Timeline: public/js/ai-cobuilder-hero-demo.js toggles `is-*` classes and
   positions `.acb__cursor` at runtime.

   Two scenes crossfade (chat, then the model) — same single-scene-at-a-
   time approach as the homepage hero demo. Same --xxx-* palette likeness
   rules as every other demo on the site. Also defines --bhd-accent/
   --bhd-accent-soft so the shared `.bhdBlock` chip (styled in
   build-hero-demo.css, loaded alongside this file on /ai) renders with
   the right color when nested inside this component.
   ========================================================================= */

.acb {
  --acb-canvas: #FAF9F5;
  --acb-card: #FFFFFF;
  --acb-border: #DBDBDE;
  --acb-line: #EAEAEA;
  --acb-head: #F6F6F7;
  --acb-ink: #2B2B2B;
  --acb-ink2: #777777;
  --acb-accent: #6A5BC6;
  --acb-accent-soft: #ECECFF;
  --acb-green: #2C8E45;
  --acb-green-soft: #C4EECF;
  /* shared with .bhdBlock (build-hero-demo.css) */
  --bhd-accent: #6A5BC6;
  --bhd-accent-soft: #ECECFF;
}

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

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

.acb__scene { position: relative; flex: 1; min-height: 0; }
.acb__sceneStack { position: absolute; inset: 0; }
.acb__scenePanel {
  position: absolute; inset: 0; overflow: hidden; min-width: 0;
  display: flex; flex-direction: column;
  opacity: 0; transition: opacity .5s ease;
}
.acb__scenePanel--chat { opacity: 1; }
.acb.is-scene-model .acb__scenePanel--chat { opacity: 0; }
.acb.is-scene-model .acb__scenePanel--model { opacity: 1; }

/* ---------- SCENE 1: chat ---------- */
.acbChatPanel {
  position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: var(--acb-card); padding: 18px 0 10px;
}
.acbChatThread {
  flex: 1; min-height: 0; padding: 0 16px; display: flex; flex-direction: column;
  justify-content: flex-start; gap: 10px; overflow: hidden;
}
.acbMsg {
  margin: 0; background: var(--acb-head); border: 1px solid var(--acb-line); border-radius: 8px;
  padding: 9px 11px; font-size: 11px; line-height: 1.45; color: var(--acb-ink);
  opacity: 0; transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease;
}
.acb.is-sent .acbMsg { opacity: 1; transform: none; }

.acb__steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.acbStep {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; color: var(--acb-ink);
  opacity: 0; transform: translateY(4px);
  transition: opacity .3s ease, transform .3s ease;
}
.acbStep.is-shown { opacity: 1; transform: none; }
.acbStep__check { flex: none; color: var(--acb-green); font-weight: 700; font-size: 10px; }

.acb__greeting {
  position: absolute; left: 16px; right: 16px; top: 36%; transform: translateY(-50%);
  margin: 0; text-align: center; font-size: 14px; font-weight: 500; color: var(--acb-ink2);
  transition: opacity .3s ease;
}
.acb.is-typing .acb__greeting, .acb.is-sent .acb__greeting { opacity: 0; }

.acbComposer {
  position: absolute; left: 16px; right: 16px; top: 68%; transform: translateY(-50%);
  background: var(--acb-canvas);
  border: 1px solid var(--acb-border); border-radius: 8px; padding: 12px 10px 10px;
  transition: top .8s cubic-bezier(.6, .05, .3, 1), border-color .3s ease, box-shadow .3s ease;
}
.acb.is-sent .acbComposer { top: 88%; }
.acb.is-typing .acbComposer { border-color: var(--acb-accent); box-shadow: 0 0 0 2px var(--acb-accent-soft); }
.acbComposer__field { position: relative; min-height: 26px; font-size: 10.5px; line-height: 1.4; color: var(--acb-ink); }
.acbComposer__ph { position: absolute; inset: 0; color: #9b9ba2; transition: opacity .2s ease; }
.acb.is-typing .acbComposer__ph { opacity: 0; }
.acbCaret {
  display: none; width: 1.5px; height: 11px; margin-left: 1px; vertical-align: -2px;
  background: var(--acb-ink);
}
.acb.is-typing .acbCaret { display: inline-block; animation: acbCaret 1s step-end infinite; }
@keyframes acbCaret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.acbComposer__bar {
  display: flex; align-items: center; gap: 8px;
  border-top: 1px solid var(--acb-line); margin: 5px -9px 0; padding: 5px 9px 0;
}
.acbComposer__mode {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  font-size: 9px; font-weight: 500; color: #fff;
  background: var(--acb-ink2); border-radius: 999px; padding: 3px 9px;
}
.acbComposer__mode i { font-style: normal; font-size: 7px; }
.acbComposer__send {
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--acb-ink); background: #D9D9D9;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.acb.is-press-send .acbComposer__send { transform: scale(.82); background: var(--acb-ink); color: #fff; }

/* ---------- SCENE 2: the model ---------- */
.acb__tablePane { flex: 1; min-height: 0; min-width: 0; padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.acbTableTitle { margin: 0; font-size: 12px; font-weight: 600; color: var(--acb-ink); }

.acbTable { background: var(--acb-card); border: 1px solid var(--acb-border); border-radius: 8px; overflow: hidden; }
.acbTable__head, .acbTable__row {
  display: grid; grid-template-columns: 1.3fr .8fr .8fr; gap: 6px;
  padding: 7px 10px; font-size: 9.5px;
}
.acbTable__head { font-weight: 600; color: var(--acb-ink); background: var(--acb-head); border-bottom: 1px solid var(--acb-border); }
.acbTable__head span:not(:first-child), .acbTable__row span:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.acbTable__row { color: var(--acb-ink2); border-bottom: 1px solid var(--acb-line); }
.acbTable__row--new {
  position: relative; color: var(--acb-ink); font-weight: 600;
  opacity: 0; transform: translateY(4px);
  transition: opacity .4s ease, transform .4s ease, background .3s ease;
  cursor: pointer;
}
.acb.is-row-in .acbTable__row--new { opacity: 1; transform: none; }
.acb.is-row-open .acbTable__row--new { background: var(--acb-accent-soft); border-bottom: none; }
.acbChev {
  position: absolute; left: -14px; top: 50%; transform: translateY(-50%); font-size: 9px; color: var(--acb-ink2);
  transition: transform .3s ease;
}
.acb.is-row-open .acbChev { transform: translateY(-50%) rotate(90deg); }

.acbExpand { max-height: 0; overflow: hidden; transition: max-height .45s cubic-bezier(.4, 0, .2, 1); }
.acb.is-row-open .acbExpand { max-height: 150px; }
.acbExpand__inner {
  padding: 12px 12px 4px; background: var(--acb-card); border: 1px solid var(--acb-border); border-top: none;
  border-radius: 0 0 8px 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
}
.acbExpand__inner .bhdBlock { padding: 6px 12px; }
.acbFormula {
  margin: 0; font-family: var(--font-mono, monospace); font-size: 9.5px; color: var(--acb-ink);
  background: var(--acb-head); border-radius: 5px; padding: 6px 8px;
}
.acbAudit { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.acbAudit__line { font-size: 9px; color: var(--acb-ink2); }
.acbRevert {
  flex: none; font-size: 9px; font-weight: 600; color: var(--acb-ink);
  background: var(--acb-card); border: 1px solid var(--acb-border); border-radius: 999px;
  padding: 4px 10px; cursor: default;
}

.acb__cursor {
  position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; z-index: 9;
  transition: left .6s cubic-bezier(.5, .05, .3, 1), top .6s cubic-bezier(.5, .05, .3, 1), opacity .3s ease;
}
.acb.is-cursor-visible .acb__cursor { opacity: 1; }

@media (max-width: 460px) {
  .acb__stage { aspect-ratio: auto; min-height: 460px; }
}