/* The /demo builder page. Rides site.css for the shell (nav, buttons,
   cards, blobs); everything here is dm-* and page-specific.
   The bot preview itself is NOT here — the widget renders it in its own
   shadow root, fixed in the page corner, exactly where it will live on a
   real site. On wide screens the content column leans away from whichever
   corner the visitor chose (body[data-botside]). */

.dm-nav { justify-content: flex-start; }

/* Readability: this page gets READ, not skimmed — its muted text runs
   brighter than the marketing pages' (site.css --muted is #9aa0b8). */
.dm-wrap, .dm-footer { --muted: #bac1d6; }

.dm-wrap { flex: 1; width: 100%; max-width: 1240px; margin: 0 auto;
  padding: 0 6vw 80px; }

.dm-hero { text-align: center; padding: 44px 0 8px; }
.dm-hero h1 { font-size: clamp(1.7rem, 3.6vw, 2.8rem); font-weight: 800; line-height: 1.18; }
/* Wraps as a unit — "Easy as" must never strand "1-2-3." on its own line.
   Gradient yes, shimmer no: the sweep reads as motion for motion's sake
   on a page that's asking for focus (founder ruling). */
.dm-hero h1 em { font-style: normal; white-space: nowrap;
  animation: none; background-size: 100% auto; }
.dm-hero .sub { max-width: none; text-align: center; margin-top: 10px; font-size: 1.15rem; }

/* ---------- the 1-2-3 indicator ---------- */
.dm-steps { display: flex; justify-content: center; gap: 34px; list-style: none;
  padding: 26px 0 30px; }
.dm-steps li { display: flex; align-items: center; gap: 9px; color: var(--muted);
  font-weight: 600; font-size: 1rem; }
.dm-steps li i { display: inline-flex; width: 34px; height: 34px; border-radius: 50%;
  align-items: center; justify-content: center; font-style: normal; font-weight: 800;
  background: var(--card); border: 1px solid var(--line); transition: background .25s, border-color .25s; }
.dm-steps li[aria-current] { color: var(--ink); }
.dm-steps li[aria-current] i { background: var(--grad); border-color: transparent; color: #fff; }
.dm-steps li.dm-done i { border-color: var(--brand); color: var(--brand); }
.dm-steps li.dm-done i::before { content: "✓"; }
.dm-steps li.dm-done i { font-size: 0; } /* the number yields to the check */
.dm-steps li.dm-done i::before { font-size: 1rem; }

/* ---------- the working card ---------- */
.dm-main { max-width: 640px; }
section.dm-card { padding: 30px 28px; margin: 0; max-width: none; }
section.dm-card:hover { transform: none; background: var(--card); border-color: var(--line); }
/* site.css sizes .card span at 2rem for the homepage feature icons; in the
   builder card every span is UI text, so hand sizing back to its parents. */
section.dm-card span { font-size: inherit; }
.dm-card h2 { text-align: left; font-size: 1.35rem; margin-bottom: 6px; }
.dm-card h2:focus { outline: none; }
.dm-sub { color: var(--muted); line-height: 1.6; margin-bottom: 22px; font-size: 1.02rem; }

/* On wide screens, lean away from the bot's corner so the fixed panel
   never covers the controls. Flips when the visitor picks the left corner. */
@media (min-width: 1080px) {
  body[data-botside="right"] .dm-main { margin-right: auto; margin-left: 0; }
  body[data-botside="right"] .dm-wrap { padding-right: 440px; }
  body[data-botside="left"] .dm-main { margin-left: auto; margin-right: 0; }
  body[data-botside="left"] .dm-wrap { padding-left: 440px; }
}

/* ---------- step 1: presets ----------
 * One tidy row of six on desktop, two rows of three on phones — never a
 * row with an orphan. */
.dm-presets { display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 10px; margin-bottom: 22px; }
@media (max-width: 640px) { .dm-presets { grid-template-columns: repeat(3, 1fr); } }
.dm-preset { border: 2px solid var(--line); border-radius: 14px; background: var(--card);
  padding: 11px 4px 9px; cursor: pointer; text-align: center; font-family: inherit;
  color: var(--muted); font-weight: 600; font-size: .78rem;
  transition: border-color .18s, transform .18s, background .18s; }
.dm-preset:hover { transform: translateY(-3px); }
.dm-preset .dm-dot { width: 40px; height: 40px; border-radius: 50% 50% 10px 50%;
  margin: 0 auto 7px; display: flex; align-items: center; justify-content: center;
  font-size: 20px; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.dm-preset[aria-checked="true"] { border-color: var(--brand); color: var(--ink);
  background: rgba(99, 102, 241, .09); }

.dm-row { margin-bottom: 18px; }
.dm-row label, .dm-card .dm-label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: 7px; }
.dm-row label small { color: var(--muted); font-weight: 500; }
.dm-row input, .dm-pane input, .dm-pane textarea { width: 100%;
  border: 1px solid rgba(127, 134, 168, .35); background: rgba(255, 255, 255, .06);
  color: inherit; border-radius: 10px; padding: 11px 13px; font-size: .95rem;
  outline: none; font-family: inherit; }
.dm-row input:focus, .dm-pane input:focus, .dm-pane textarea:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px rgba(99, 102, 241, .22); }

.dm-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.dm-toggle button { border: none; background: transparent; color: var(--muted); font-family: inherit;
  font-weight: 600; font-size: .9rem; padding: 9px 16px; cursor: pointer; }
.dm-toggle button[aria-pressed="true"] { background: rgba(99, 102, 241, .18); color: var(--ink); }

.dm-next { width: 100%; text-align: center; margin-top: 6px; }

/* ---------- step 2: source ---------- */
.dm-tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.dm-tabs [role="tab"] { flex: 1; border: 1px solid var(--line); background: transparent;
  color: var(--muted); font-family: inherit; font-weight: 600; font-size: .92rem;
  padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.dm-tabs [role="tab"][aria-selected="true"] { background: rgba(99, 102, 241, .14);
  border-color: var(--brand); color: var(--ink); }
.dm-pane label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: 7px; }
.dm-pane textarea { resize: vertical; min-height: 170px; }
.dm-hint { color: var(--muted); font-size: .95rem; line-height: 1.55; margin: 9px 0 0; }
.dm-pane .dm-next { margin-top: 16px; }
.dm-back { margin-top: 18px; font-size: .95rem; }
.dm-back a { color: var(--muted); } .dm-back a:hover { color: var(--ink); }

.dm-error { border: 1px solid rgba(239, 68, 68, .4); background: rgba(239, 68, 68, .12);
  border-radius: 10px; padding: 10px 13px; font-size: .9rem; margin-top: 16px; }

/* ---------- the wait ----------
 * Training takes over the card: the form steps aside entirely and one
 * big shimmering line carries the moment. */
#dm-step2.dm-busy h2, #dm-step2.dm-busy .dm-sub, #dm-step2.dm-busy .dm-tabs,
#dm-step2.dm-busy .dm-pane, #dm-step2.dm-busy .dm-back, #dm-step2.dm-busy .dm-error {
  display: none; }
.dm-training { text-align: center; padding: 64px 0 58px; }
/* Sized to own the card — and carrying enough specificity to actually do
   it: site.css's `.card p` (.95rem) outranks a lone class, which is how
   "big bold" once shipped as small bold. Static gradient, no sweep; the
   blinking dots alone say something is happening. */
section.dm-card p.dm-training-big { font-weight: 800; line-height: 1.2;
  font-size: clamp(2.1rem, 5.5vw, 3rem);
  background: var(--grad); background-size: 100% auto;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.dm-dots s { text-decoration: none; animation: dm-dot 1.4s infinite; }
.dm-dots s:nth-child(2) { animation-delay: .25s; }
.dm-dots s:nth-child(3) { animation-delay: .5s; }
@keyframes dm-dot { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

/* The mini chat window: rides the homepage hero's .demo-msg styles
   (site.css) for the bubbles and typing dots; only the frame and the
   skeleton text-lines are defined here. */
.dm-train-chat { max-width: 340px; margin: 30px auto 0; background: var(--bg2);
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .4); }
.dm-train-msgs { padding: 14px; height: 185px; display: flex; flex-direction: column;
  gap: 9px; justify-content: flex-end; overflow: hidden; }
.dm-skel span { display: block; height: 9px; border-radius: 5px;
  background: rgba(255, 255, 255, .3); }
.dm-skel span + span { margin-top: 6px; }
section.dm-card p.dm-training-sub { color: var(--muted); margin-top: 16px; font-size: 1.05rem; }
@media (prefers-reduced-motion: reduce) {
  .dm-dots s { animation: none; opacity: .7; }
  .dm-train-chat { display: none; } /* the text carries the state alone */
  .dm-preset:hover { transform: none; }
}

/* ---------- step 3 ---------- */
/* Act one is a hero: big, centered, pointing at the corner where their
   bot just came alive. (Specificity matches site.css's .card rules.) */
.dm-ready-hero { text-align: center; padding: 22px 0 14px; }
section.dm-card .dm-ready-hero h2 { text-align: center; margin-bottom: 12px;
  font-size: clamp(1.9rem, 4.5vw, 2.7rem); line-height: 1.15;
  background: var(--grad); background-size: 100% auto;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
section.dm-card p.dm-ready-sub { font-size: 1.12rem; color: var(--ink);
  line-height: 1.55; margin-bottom: 22px; }
.dm-ready-hero .dm-chips { justify-content: center; }
#dm-ready-hand { display: inline-block; font-size: 1.3em; }

#dm-after { animation: dm-rise .5s ease; }
@keyframes dm-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #dm-after { animation: none; } }

.dm-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 6px; }
.dm-chip { border: 1px solid rgba(99, 102, 241, .5); background: rgba(99, 102, 241, .1);
  color: var(--ink); border-radius: 999px; padding: 9px 15px; font-size: .9rem;
  font-family: inherit; font-weight: 600; cursor: pointer; transition: background .15s; }
.dm-chip:hover { background: rgba(99, 102, 241, .22); }

/* ---------- the temporary share page ---------- */
.dm-share { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.dm-share-row { display: flex; align-items: center; gap: 9px; }
.dm-share-row code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap;
  background: #05060c; border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 13px; font-size: .85rem; color: #9fe8a4; }
.dm-share-row button { background: none; border: none; font-size: 1.15rem; cursor: pointer;
  filter: grayscale(.3); transition: transform .15s; }
.dm-share-row button:hover { transform: scale(1.15); }

/* ---------- want to keep it? ---------- */
.dm-save { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.dm-save h3 { font-size: 1.15rem; margin-bottom: 6px; }
.dm-save > p { color: var(--muted); line-height: 1.6; margin-bottom: 14px; }
.dm-save input { width: 100%; box-sizing: border-box; border: 1px solid rgba(127,134,168,.35);
  background: rgba(255,255,255,.06); color: inherit; border-radius: 10px; padding: 11px 13px;
  font-size: .95rem; outline: none; }
.dm-save input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(99,102,241,.22); }
.dm-save .btn { width: 100%; text-align: center; margin-top: 12px; box-sizing: border-box; }
.dm-sent { text-align: center; padding: 10px 0 4px; }
.dm-sent b { font-size: 1.05rem; }
.dm-sent p { color: var(--muted); line-height: 1.6; margin: 8px 0 14px; }
.dm-sent .btn { width: auto; }

/* ---------- the on-page dialog ---------- */
.dm-modal { position: fixed; inset: 0; z-index: 3000000000; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(5, 6, 12, .72); backdrop-filter: blur(4px); }
.dm-modal[hidden] { display: none; }
.dm-modal-card { background: var(--bg2); border: 1px solid var(--line);
  border-radius: 18px; padding: 26px 24px; max-width: 400px; width: 100%;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .55); animation: dm-rise .25s ease; }
.dm-modal-card h3 { font-size: 1.2rem; margin-bottom: 8px; }
.dm-modal-card p { color: var(--muted); line-height: 1.6; margin-bottom: 20px; }
.dm-modal-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) { .dm-modal-card { animation: none; } }

/* ---------- footer ---------- */
.dm-footer { margin-top: auto; display: flex; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding: 22px 6vw; color: var(--muted); font-size: .9rem;
  border-top: 1px solid var(--line); }
.dm-footer a { color: var(--muted); } .dm-footer a:hover { color: var(--ink); }

@media (max-width: 600px) {
  .dm-steps { gap: 18px; }
  .dm-steps li span { display: none; } /* numbers alone carry it on phones */
  section.dm-card { padding: 22px 18px; }
}