/* The flow builder's messaging and comment steps (site-src/gen/dm/steps_msg.py; agent I, 2026-10-07). Prefix sm-.
   Built on system.css tokens and the kit's classes; Instagram's own colours appear only inside depictions of Instagram
   (the --ig-* tokens and the hairline greys Instagram draws). Each page's signature scene plays on the DM home's beat
   clock (data-beats): an element with data-in shows from that beat, data-x hides it again. */

/* ───────────── the scene and its beats ───────────── */
.sm-sig { margin: 0; min-width: 0; }
/* Instagram's meta grey sits on tinted grounds here (the grey bubble, her own comment's blue tint): one step darker so
   it reads at AA on all of them (4.6:1 on the bubble grey; #737373 measured 4.1) */
.sm-sig, .sm-mini { --ig-meta: #6b6b6b; }
/* a drawn screen keeps its own direction: Instagram and the canvas are drawn left to right, whatever the page's is */
.sm-sig-in, .sm-mini { direction: ltr; }
.sm-sig [data-in]:not(.on) { display: none !important; }
.sm-sig .ig-m.on, .sm-sig .sm-qr.on, .sm-sig .sm-chip.on, .sm-sig .sm-file.on, .sm-sig .sm-try.on, .sm-sig .ig-cm.on,
.sm-sig .ig-ctx.on, .sm-sig .sm-reqs-r.on, .sm-sig .sm-push.on, .sm-sig .sm-line > span.on { animation: dmh-sk-in 0.35s var(--ease) backwards; }
.sm-sig .sm-dm-over.on, .sm-sig .sm-prof.on { animation: dmh-cut-in 0.4s var(--ease) backwards; }
.sm-sig-in { min-width: 0; }

/* the canvas column beside the phone (the kit's node-and-phone grammar) */
.sm-pair { align-items: center; }
.sm-pair-l { align-content: center; gap: var(--s-4) !important; }
.sm-pair .kit-phone-w { align-self: center; }
/* the canvas side is the kit's own card (dm_kit node(), FLOW_CARDS.md): stage() in the generator carries the full card or
   flow (.is-lg) and the compact one (.is-sm), and one of them shows: full on a desktop, where the card is the subject
   beside the phone; compact on a phone's 260px surface, and for a two-card flow under 1100px, where two full cards do not
   fit beside the phone at a readable size */
.sm-cv { min-width: 0; }
.sm-cv.is-sm { display: none; }
.sm-cv.is-sm > .kit-node, .sm-cv .kit-canvas-in > .kit-node { width: 244px; }
/* a two-card flow keeps the flow()'s own pixels (the kit reads its wires there) and is scaled as one picture: the app at
   114% from 1280px, where the stage has the room */
.sm-cv.is-two.is-lg { --cs: 1; position: relative; width: calc(var(--cw) * var(--cs)); height: calc(var(--ch) * var(--cs)); }
.sm-cv.is-two.is-lg > .kit-flow { transform: scale(var(--cs)); transform-origin: 0 0; transition: none; }
@media (min-width: 1280px) { .sm-cv.is-two.is-lg { --cs: 1.14; } }
/* compact cards under each other: the kit's canvas without its box, wired top to bottom at every width (the kit's own
   column rules stop at 860px, so the dots' places are said here too) */
.sm-cv .kit-canvas { display: block; }
.sm-cv .kit-canvas-in { flex-direction: column; align-items: center; gap: 28px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.sm-cv .kit-canvas-in .kit-port > .kit-dot { display: none; }
.sm-cv .kit-canvas-in .kit-dot.is-in { inset-inline-start: 50%; top: -7px; margin-inline-start: -6px; }
.sm-cv .kit-canvas-in > .kit-node:has(.kit-port):not(:last-child)::after { content: ''; position: absolute; z-index: 1; inset-inline-start: 50%; bottom: -7px; width: 12px; height: 12px; margin-inline-start: -6px; border-radius: 50%; background: var(--g); }
@media (max-width: 1099px) { .sm-cv.is-two.is-lg { display: none; } .sm-cv.is-two.is-sm { display: block; } }
@media (max-width: 860px) { .sm-cv.is-lg { display: none; } .sm-cv.is-sm { display: block; } }

/* a desktop: the pair is one composed group in the middle of the stage, and a step that stands alone is drawn at the
   size the builder shows it when you zoom in to work on it (the whole card at 116%: 334px), so the canvas side carries
   as much weight as the phone (QA2 I-3: a small card beside a 310 x 660 phone left 40% of the stage empty). From 1100px,
   where the larger step still fits beside the phone without growing taller than it */
@media (min-width: 861px) { .sm-pair { grid-template-columns: fit-content(620px) minmax(32px, 112px) 310px; justify-content: center; } }
@media (min-width: 1100px) {
  .sm-pair-l { gap: var(--s-5) !important; }
  .sm-cv.is-lg > .kit-node { zoom: 1.16; }
  .sm-pair-l .sm-stat { width: 340px; max-width: 100%; min-height: 44px; }
  .sm-pair-l .sm-chip { gap: 10px; padding: 10px 16px 10px 13px; font-size: 14.5px; }
  .sm-pair-l .sm-chip .i { width: 17px; height: 17px; }
  .sm-pair-l .sm-panel { width: 400px; max-width: 100%; gap: var(--s-4); padding: var(--s-5); border-radius: var(--r-xl); }
  .sm-pair-l .sm-panel-h { gap: 12px; padding-bottom: var(--s-4); }
  .sm-pair-l .sm-panel-h b { font-size: 17px; }
  .sm-pair-l .sm-panel-k { font-size: 12.5px; }
  .sm-pair-l .sm-panel-f { font-size: 14px; }
  .sm-pair-l .sm-seg { height: 36px; font-size: 14px; }
  .sm-pair-l .sm-file-r { gap: 12px; padding: 11px 12px; }
  .sm-pair-l .sm-file-r b { font-size: 15px; }
  .sm-pair-l .sm-file-r small { font-size: 13px; }
  .sm-pair-l .sm-file-i { width: 36px; height: 36px; }
  .sm-pair-l .sm-file-i .i { width: 18px; height: 18px; }
  .sm-pair-l .sm-check { gap: 9px; font-size: 14px; }
  .sm-pair-l .sm-check .i { width: 16px; height: 16px; }
  .sm-pair-l .sm-try { gap: 5px; padding: 12px 14px; }
  .sm-pair-l .sm-try-q { font-size: 13.5px; }
  .sm-pair-l .sm-try-k { font-size: 12.5px; }
  .sm-pair-l .sm-try-a { font-size: 15.5px; }
  .sm-pair-l .sm-var { gap: 12px; padding: 12px; font-size: 15px; }
  .sm-pair-l .sm-var-n { width: 24px; height: 24px; font-size: 12.5px; }
  .sm-pair-l .sm-switch { font-size: 15px; }
}
/* nothing already on the canvas side moves when more arrives (layout shift measured over a loop: questions 0.163,
   follow check 0.076): a list that fills grows downward from a fixed top, a file row keeps room for a two-line
   verdict, and the status area keeps room for the two lines that can show together */
@media (min-width: 861px) {
  .sm-ask .sm-pair-l { align-self: start; padding-top: var(--s-10); }
  .sm-pair-l .sm-file .sm-check { min-height: 2.8em; }
  .sm-follow .sm-stat, .sm-private .sm-stat { min-height: 104px; align-content: start; }
}

/* a way out lighting up when the run takes it (lit() in the generator: on its beat, or always in a still picture, .is-lit),
   and the card a run is on (run(): the app's selected look, on one card at a time) */
.sm-lit { display: none; }
.sm-run { display: none !important; }
.kit-node:has(> .sm-run.on) { border-color: var(--g); box-shadow: 0 0 0 3px color-mix(in srgb, var(--g) 18%, transparent), var(--kit-lift); }
.sm-sig .kit-ports > .kit-port > .sm-lit.on { display: block !important; position: absolute; inset: 0; border-radius: inherit; background: color-mix(in srgb, var(--g) 16%, transparent); opacity: 0; pointer-events: none; animation: sm-pulse 0.6s var(--ease); }
.kit-ports > .kit-port:has(> .sm-lit.on), .is-lit .kit-ports > .kit-port:has(> .sm-lit) { color: var(--g-ink); background: color-mix(in srgb, var(--g) 7%, var(--surface)); }
.kit-ports > .kit-port:last-child:has(> .sm-lit) { border-end-start-radius: calc(var(--r-lg) - 1px); border-end-end-radius: calc(var(--r-lg) - 1px); }
.kit-ports > .kit-port.is-pill:has(> .sm-lit.on), .is-lit .kit-ports > .kit-port.is-pill:has(> .sm-lit) { background: none; }
.kit-port:has(> .sm-lit.on) em, .is-lit .kit-port:has(> .sm-lit) em { border-color: var(--g); color: var(--g-ink); font-weight: 600; background: color-mix(in srgb, var(--g) 10%, var(--surface)); }
.kit-port:has(> .sm-lit.on) .kit-port-k, .is-lit .kit-port:has(> .sm-lit) .kit-port-k { color: var(--g-ink); }
/* in the full card: a tapped button is tinted, a tapped quick reply is filled, as the chat shows the tap */
.kit-btn.kit-port:has(> .sm-lit.on) { background: color-mix(in srgb, var(--mock-blue) 9%, var(--mock-surface)); }
.kit-msg > .kit-btn:last-child:has(> .sm-lit) { border-radius: 0 0 15px 15px; }
.kit-qr.kit-port:has(> .sm-lit.on) .kit-btn-l { border-color: var(--mock-blue); background: var(--mock-blue); color: var(--mock-surface); }
.kit-port:has(> .sm-lit.on) > .kit-dot, .is-lit .kit-port:has(> .sm-lit) > .kit-dot { box-shadow: 0 0 0 2px var(--surface), 0 0 0 5px color-mix(in srgb, var(--g) 28%, transparent); }
@keyframes sm-pulse { from { opacity: 1; } }

/* status lines under a node: what the step did, in words and an icon */
.sm-stat { display: grid; justify-items: center; gap: var(--s-2); width: min(100%, 300px); min-height: 36px; }
.sm-chip { margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px; border-radius: var(--r-md); border: var(--hairline) solid var(--line); background: var(--surface); box-shadow: var(--shadow-lift); font-size: 13px; line-height: 1.35; color: var(--ink-2); }
.sm-chip .i { width: 15px; height: 15px; flex: none; color: var(--ink-4); }
.sm-chip.is-ok .i { color: var(--accent); }
.sm-chip.is-warn .i { color: var(--step-amber); }
.sm-chip b { color: var(--ink); font-weight: 650; }

/* ───────────── inside the drawn phone (Instagram) ───────────── */
.sm-dm { z-index: 1; }
.sm-th { gap: 6px; }
.sm-th .kit-ig-col { max-width: 82%; }
.sm-btn { display: flex; align-items: center; justify-content: center; gap: 4px; }
.sm-ext { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sm-qr { margin: 2px 0 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.sm-qr span { padding: 6px 12px; border-radius: 17px; border: 1px solid #dbdbdb; background: #fff; font-size: 12.5px; font-weight: 600; color: var(--ig-blue); transition: transform 0.15s var(--ease), background 0.2s var(--ease); }
.sm-qr span.tap, .ig-btn.tap, .sm-card-b.tap, .sm-fcard-b.tap, .sm-reqs-r.tap, .sm-follow.tap { transform: scale(0.95); background: var(--ig-grey); }
.sm-qr.is-static { justify-content: flex-start; margin-top: var(--s-2); }
.sm-comp { position: relative; }
.sm-comp .ig-send { margin-inline-start: auto; }

/* media in the chat */
.sm-photo { display: block; width: 168px; height: 210px; object-fit: cover; border-radius: 18px; }
.sm-doc { margin: 0; display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 9px; border-radius: 18px; background: var(--ig-grey); font-size: 13px; }
.sm-doc span:last-child { display: grid; } .sm-doc small { font-size: 11.5px; color: var(--ig-meta); }
.sm-doc-i { width: 34px; height: 40px; display: grid; place-items: end center; padding-bottom: 6px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px #dbdbdb; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; color: #c62828; }
.sm-audio { margin: 0; display: flex; align-items: center; gap: 9px; padding: 8px 14px 8px 8px; border-radius: 20px; background: var(--ig-grey); }
.sm-audio small { font-size: 11.5px; color: var(--ig-meta); font-variant-numeric: tabular-nums; }
.sm-play { position: relative; width: 26px; height: 26px; flex: none; border-radius: 50%; background: #000; }
.sm-play::after { content: ''; position: absolute; left: 10px; top: 8px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #fff; }
.sm-play.is-big { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; background: rgb(0 0 0 / 0.45); }
.sm-play.is-big::after { left: 17px; top: 14px; border-width: 8px 0 8px 12px; }
.sm-wave { display: flex; align-items: center; gap: 2px; height: 22px; }
.sm-wave i { width: 2.5px; height: calc(var(--h) * 1px); border-radius: 2px; background: #555; }
.sm-sig .ig-m.on .sm-wave i { animation: sm-wave 1.2s ease-in-out infinite alternate; animation-delay: calc(var(--h) * -0.07s); }
@keyframes sm-wave { to { transform: scaleY(0.45); } }
.sm-video { position: relative; margin: 0; width: 140px; height: 210px; border-radius: 18px; overflow: hidden; }
.sm-video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sm-video small { position: absolute; right: 8px; bottom: 7px; font-size: 11px; font-weight: 600; color: #fff; text-shadow: 0 1px 2px rgb(0 0 0 / 0.5); }

/* ───────────── a panel from the builder, drawn in the app's look ───────────── */
.sm-panel { width: min(100%, 320px); display: grid; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-lg); border: var(--hairline) solid var(--line); background: var(--surface); box-shadow: var(--shadow-pop); text-align: start; }
.sm-panel-h { margin: 0; display: flex; align-items: center; gap: 10px; padding-bottom: var(--s-3); border-bottom: var(--hairline) solid var(--line-soft); }
.sm-panel-h b { font-size: 14.5px; font-weight: 650; color: var(--ink); }
.sm-panel-k { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3c); }
.sm-panel-f { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-3c); }
.sm-segs { margin: 0; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 2px; padding: 3px; border-radius: var(--r-md); background: var(--rail); box-shadow: inset 0 0 0 1px var(--line-soft); }
.sm-seg { position: relative; display: grid; place-items: center; height: 30px; padding: 0 6px; border-radius: var(--r-sm); font-size: 12.5px; font-weight: 550; color: var(--ink-3c); white-space: nowrap; }
.sm-seg-on { display: none; }
.sm-seg:has(> .sm-seg-on.on) { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgb(15 23 42 / 0.08), 0 0 0 1px var(--line); }
.sm-file { display: grid; gap: var(--s-2); }
.sm-file-r { margin: 0; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-md); border: var(--hairline) solid var(--line); background: var(--canvas); }
.sm-file-r > span:last-child { display: grid; min-width: 0; }
.sm-file-r b { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-file-r small { font-size: 12px; color: var(--ink-3c); }
.sm-file-i { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-3); }
.sm-file-i .i { width: 15px; height: 15px; }
.sm-check { margin: 0; display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
.sm-check .i { width: 14px; height: 14px; flex: none; margin-top: 1px; padding: 2px; border-radius: 50%; stroke-width: 3; }
.sm-check.is-ok .i { background: var(--accent-soft); color: var(--accent-ink); }
.sm-check.is-bad { color: var(--danger-ink); }
.sm-check.is-bad .i { background: var(--danger-soft); color: var(--danger); }
.sm-check.is-ask .i { background: color-mix(in srgb, var(--step-amber) 14%, var(--surface)); color: color-mix(in srgb, var(--step-amber) 62%, var(--ink)); }

/* the question's checks, one row per answer */
.sm-tries { gap: var(--s-2); }
.sm-try { display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--r-md); border: var(--hairline) solid var(--line); background: var(--canvas); }
.sm-try-q { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12.5px; color: var(--ink-3c); }
.sm-try-k { font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.sm-try-k::after { content: '·'; margin-inline-start: 8px; color: var(--ink-4); }
.sm-try-a { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }

/* the public reply's variations and its switch */
.sm-var { position: relative; margin: 0; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-md); border: var(--hairline) solid var(--line); background: var(--canvas); font-size: 13px; color: var(--ink-2); transition: background 0.25s var(--ease), border-color 0.25s var(--ease); }
.sm-var-n { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 6px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 11.5px; font-weight: 650; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sm-var:has(> .sm-lit.on) { border-color: var(--step-pink); background: color-mix(in srgb, var(--step-pink) 6%, var(--surface)); color: var(--ink); }
.sm-var:has(> .sm-lit.on) .sm-var-n { background: color-mix(in srgb, var(--step-pink) 90%, var(--ink)); color: #fff; box-shadow: none; }
.sm-switch { margin: 0; display: flex; align-items: center; justify-content: space-between; padding-top: var(--s-2); font-size: 13.5px; font-weight: 600; color: var(--ink); }
.sm-sw { position: relative; width: 34px; height: 20px; border-radius: 10px; background: var(--ink-4); }
.sm-sw.is-on { background: var(--accent); }
.sm-sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.2); }
.sm-sw.is-on::after { left: 16px; }

/* ───────────── cards: the carousel ───────────── */
.sm-carm { align-items: flex-end; }
.sm-car { position: relative; flex: 1; min-width: 0; overflow: hidden; margin-inline-end: -12px; }
.sm-pos { display: none; }
.sm-track { display: flex; gap: 8px; transition: transform 0.55s var(--ease); }
.sm-car:has(.sm-p2.on) .sm-track { transform: translateX(-196px); }
.sm-car:has(.sm-p3.on) .sm-track { transform: translateX(-392px); }
.sm-card { width: 188px; flex: none; border-radius: 16px; border: 1px solid #dbdbdb; background: #fff; overflow: hidden; }
.sm-card img { display: block; width: 100%; height: 98px; object-fit: cover; }
.sm-card-t { margin: 0; display: grid; gap: 2px; padding: 8px 11px 9px; font-size: 12.5px; line-height: 1.3; }
.sm-card-t span { font-size: 11.5px; color: var(--ig-meta); }
.sm-card-b { margin: 0; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 8px; border-top: 1px solid #efefef; font-size: 12.5px; font-weight: 600; color: var(--ig-blue); transition: background 0.2s var(--ease); }
.sm-solo { display: grid; justify-items: center; gap: var(--s-4); }

/* the caption line under a scene: one line at a time */
.sm-line { margin: 0; min-height: 26px; display: flex; justify-content: center; text-align: center; }
.sm-line span { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 550; color: var(--ink-2); }
.sm-line .i { width: 16px; height: 16px; flex: none; color: var(--accent); }

/* ───────────── private reply: the message requests screen ───────────── */
.sm-reqs { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; color: #000; padding: 52px 0 0; }
.sm-reqs-h { display: flex; align-items: center; gap: 12px; padding: 0 14px 12px; border-bottom: 1px solid #efefef; }
.sm-reqs-h .ig-g { width: 23px; height: 23px; } .sm-reqs-h b { font-size: 15px; }
.sm-reqs-p { margin: 0; padding: 12px 16px; font-size: 12px; line-height: 1.4; color: var(--ig-meta); text-align: center; }
.sm-reqs-r { display: flex; align-items: center; gap: 11px; padding: 9px 16px; transition: background 0.2s var(--ease); }
.sm-reqs-r p { flex: 1; min-width: 0; margin: 0; display: grid; font-size: 13.5px; }
.sm-reqs-r p span { font-size: 12px; color: #000; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-reqs-r.is-old p span { color: var(--ig-meta); font-weight: 400; }
.sm-reqs-av, .sm-reqs-r .ig-me { width: 46px !important; height: 46px !important; flex: none; border-radius: 50%; object-fit: cover; }
.sm-reqs-r .ig-me { display: grid; place-items: center; font-size: 16px; }
.sm-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--ig-blue); }
.sm-dm-over { z-index: 2; }

/* ───────────── follow check: the card and the profile ───────────── */
.sm-fcard { width: 210px; border-radius: 16px; border: 1px solid #dbdbdb; background: #fff; overflow: hidden; }
.sm-fcard-t { margin: 0; display: grid; gap: 3px; padding: 10px 12px 11px; font-size: 13px; line-height: 1.3; }
.sm-fcard-t span { font-size: 12px; color: var(--ig-meta); }
.sm-fcard-b { margin: 0; padding: 8px; border-top: 1px solid #efefef; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--ig-blue); transition: transform 0.15s var(--ease), background 0.2s var(--ease); }
.sm-prof { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; gap: 12px; padding: 52px 14px 0; background: #fff; color: #000; }
.sm-prof-top { margin: 0; display: flex; align-items: center; gap: 10px; } .sm-prof-top b { flex: 1; font-size: 15px; } .sm-prof-top .ig-g { width: 23px; height: 23px; }
.sm-prof-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sm-prof-row img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.sm-prof-row p { margin: 0; display: grid; justify-items: center; font-size: 12px; }
.sm-prof-row b { font-size: 15px; } .sm-prof-row em { font-style: normal; }
.sm-prof-bio { margin: 0; display: grid; gap: 2px; font-size: 12.5px; line-height: 1.35; }
.sm-prof-btns { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sm-prof-btns span { padding: 7px; border-radius: 8px; background: var(--ig-grey); text-align: center; font-size: 13px; font-weight: 600; }
.sm-prof-btns .sm-follow { background: var(--ig-blue); color: #fff; transition: transform 0.15s var(--ease); }
.sm-prof-grid { margin: 4px -14px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.sm-prof-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }

/* ───────────── hide: one comment, seen two ways ───────────── */
.sm-hide .sm-sig-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
/* the flow over the two views: three compact cards in the kit's flow(), scaled as one picture when the stage is narrower */
.sm-hflow { display: grid; justify-items: center; min-width: 0; }
.sm-views { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); align-items: stretch; }
.sm-view { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; gap: var(--s-3); min-width: 0; }
.sm-view-k { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-3c); }
.sm-view-k .i { width: 30px; height: 30px; flex: none; padding: 7px; border-radius: var(--r-md); border: var(--hairline) solid var(--line); background: var(--surface); color: var(--ink-3); }
.sm-view-k span { display: grid; } .sm-view-k b { font-size: 14.5px; font-weight: 650; color: var(--ink); }
.sm-post { position: relative; display: grid; border-radius: 16px; border: 1px solid #dbdbdb; background: #fff; color: #000; box-shadow: var(--shadow-pop); overflow: hidden; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto 1fr auto; }
.sm-add { margin: 0 12px 12px; align-self: end; }
/* the two posts keep one height through the loop (her comment arriving, the notification landing), so the scene never
   pushes the page under it: CLS 0 */
@media (min-width: 861px) { .sm-hide .sm-post { min-height: 500px; } }
.sm-post > .sm-push { align-self: end; }
.sm-post-h { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #efefef; }
.sm-post-h img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.sm-post-h p { flex: 1; min-width: 0; margin: 0; display: grid; font-size: 13.5px; }
.sm-post-h p span { font-size: 12px; color: var(--ig-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-igm { width: 18px; height: 18px; color: var(--instagram); }
.sm-post-c { margin: 0; padding: 10px 14px 0; font-size: 13px; font-weight: 700; }
.sm-post-c span { margin-inline-start: 4px; color: var(--ig-meta); font-weight: 500; } .sm-post-c em { font-style: normal; }
.sm-cms { padding: 4px 14px 10px; overflow: visible; }
/* the hide-comment list, when a language's comments run to more lines than the sheet holds: the newest stays whole above the comment field and the
   oldest slides under the sheet's head, as a scrolled list does. A list that fits stays at the top (the empty ::after takes the room left) (LF, 2026-10-10) */
html:is([lang='es'], [lang='fr'], [lang='pt-BR'], [lang='ar']) .sm-hide .sm-cms { overflow-y: clip; display: flex; flex-direction: column; justify-content: flex-end; }
html:is([lang='es'], [lang='fr'], [lang='pt-BR'], [lang='ar']) .sm-hide .sm-cms > li { flex: none; }
html:is([lang='es'], [lang='fr'], [lang='pt-BR'], [lang='ar']) .sm-hide .sm-cms::after { content: ''; flex: 1 0 0px; }
.sm-mine { background: color-mix(in srgb, var(--ig-blue) 6%, #fff); margin-inline: -14px; padding-inline: 14px !important; }
.sm-cms { position: relative; }
.sm-sig .ig-cm.sm-hid.gone { display: grid !important; position: absolute; left: 14px; right: 14px; opacity: 0; pointer-events: none; animation: sm-hide 0.45s var(--ease); }
.sm-sig .ig-cm.sm-hid.gone ~ .ig-cm { animation: sm-up 0.55s var(--ease); }
@keyframes sm-hide { from { opacity: 1; } }
@keyframes sm-up { from { transform: translateY(62px); } }
.sm-push { margin: 0 12px 12px; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 12px; border-radius: 16px; background: #f2f2f2; box-shadow: 0 6px 18px rgb(0 0 0 / 0.08); }
.sm-push img { width: 36px; height: 36px; border-radius: 9px; object-fit: cover; }
.sm-push p { margin: 0; display: grid; gap: 1px; font-size: 12.5px; line-height: 1.35; } .sm-push time { font-size: 11px; color: var(--ig-meta); }

/* ───────────── small pictures in "how it runs" ───────────── */
.sm-mini { width: 100%; max-width: 250px; display: grid; gap: 6px; padding: 12px; border-radius: var(--r-lg); background: #fff; color: #000; box-shadow: var(--shadow-lift), 0 0 0 1px var(--line); text-align: start; }
.sm-mini .ig-b { font-size: 12.5px; padding: 7px 12px 8px; }
.sm-mini .ig-m-av { width: 20px; height: 20px; }
.sm-mini .ig-btn { font-size: 12px; padding: 6px 10px; }
.sm-mini.is-tight { gap: 2px; }
.sm-who { margin: 4px 0 0; font-size: 10.5px; font-weight: 600; color: var(--ig-meta); }
.sm-who:first-child { margin-top: 0; }
.kit-step-v .kit-node { width: 100%; max-width: 236px; }
.kit-step-v .sm-mnote, .kit-step-v .sm-qr.is-static { width: 100%; max-width: 250px; }
.kit-step-v { gap: var(--s-2); align-content: center; }
.sm-mnote { margin: 0; display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
.sm-mnote .i { width: 15px; height: 15px; flex: none; padding: 2px; border-radius: 50%; stroke-width: 3; background: var(--accent-soft); color: var(--accent-ink); }
.sm-mnote.is-bad .i { background: var(--danger-soft); color: var(--danger); }
.sm-mnote.is-warn .i { background: color-mix(in srgb, var(--step-amber) 14%, var(--surface)); color: color-mix(in srgb, var(--step-amber) 62%, var(--ink)); }
.sm-mnote.is-idle .i { background: var(--rail); color: var(--ink-3); stroke-width: 2.2; }
.sm-mini.is-files { background: var(--surface); color: var(--ink); gap: var(--s-2); }
.sm-mini.is-cards { display: flex; justify-content: center; padding: 18px 12px; background: none; box-shadow: none; }
.sm-mini.is-cards span { width: 92px; height: 120px; flex: none; border-radius: 12px; background: center / cover no-repeat; box-shadow: 0 0 0 4px #fff, 0 6px 14px rgb(15 23 42 / 0.16); }
.sm-mini.is-cards span:nth-child(1) { transform: rotate(-8deg) translateX(18px); }
.sm-mini.is-cards span:nth-child(2) { position: relative; z-index: 1; transform: translateY(-6px); }
.sm-mini.is-cards span:nth-child(3) { transform: rotate(8deg) translateX(-18px); }
.sm-mini.is-one { padding: 0; background: none; box-shadow: none; justify-items: center; }
.sm-mini.is-one .sm-card { width: 200px; }
.sm-mini.is-cm { gap: 8px; font-size: 12.5px; line-height: 1.4; }
.sm-mini.is-cm p { margin: 0; }
.sm-mini.is-cm .is-rep { padding-inline-start: 16px; border-inline-start: 2px solid #efefef; }
.sm-mini.is-cm .is-gone { color: #6b6b6b; }
.sm-at { color: #00376b; font-weight: 600; }
.sm-mini.is-vars { background: var(--surface); color: var(--ink); }
.sm-mini.is-req { padding: 6px 0; } .sm-mini.is-req .sm-reqs-r { padding: 6px 12px; }

/* replies under a comment, inside the reel's comments */
.sm-reel .ig-sheet { height: 80%; }
.sm-rep { padding-inline-start: 42px !important; grid-template-columns: 26px minmax(0, 1fr) 22px !important; }
.sm-rav { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }

/* ───────────── a phone screen ───────────── */
@media (max-width: 760px) {
  .sm-pair-l { width: 100%; }
  .sm-hflow { display: none; }
  .sm-views { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
  .sm-line span { font-size: 13.5px; }
}
/* ═════════════ phones: ONE surface at a time (PLAN §2; Anant: everything fits the viewport on a phone) ═════════════
   Up to 860px the stage is 260 wide and never scaled down, so text keeps its size: the side the story is on (the step on
   the canvas, or the phone's bare screen at 260 x 316, switching on the beat markers .sm-vm), its name under it, then the
   line that says what is happening. A desktop never sees any of this (.sm-vm, .sm-pk hidden; .sm-surf is display:contents). */
.sm-vm { display: none !important; }
.sm-surf { display: contents; }
.sm-pk { display: none; }
@keyframes sm-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes sm-swipe { from { opacity: 0; transform: scale(0.94); } }
@media (max-width: 860px) {
  /* the box and its two sides, stacked in one cell */
  .sm-pair { grid-template-columns: 260px !important; grid-template-rows: auto !important; justify-content: center; align-items: start; padding: var(--s-4) var(--s-3) var(--s-3) !important; gap: 0 !important; }
  .sm-pair > .kit-np-wire { display: none; }
  .sm-pair > .sm-pair-l, .sm-pair > .kit-phone-w { grid-area: 1 / 1; width: 260px; display: grid; grid-template-columns: 260px; grid-template-rows: 316px auto; gap: 8px !important; align-content: start; justify-items: center; }
  .sm-pair > .sm-pair-l { visibility: hidden; }
  .sm-pair:has(> .sm-vm.on) > .sm-pair-l { visibility: visible; animation: sm-in 0.35s var(--ease); }
  .sm-pair:has(> .sm-vm.on) > .kit-phone-w { visibility: hidden; }
  .sm-pair:not(:has(> .sm-vm.on)) > .kit-phone-w { animation: sm-in 0.35s var(--ease); }
  .sm-pair-l > .kit-np-k, .sm-pair .kit-phone-l { order: 2; }
  .sm-pair-l > .kit-np-k, .sm-pair .kit-phone-l, .sm-pk { display: block; margin: 0; font-size: 11.5px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3c); text-align: center; }
  .sm-surf { width: 260px; height: 316px; min-width: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
  .sm-stat { width: 100%; min-height: 34px; }   /* the status line's room is kept, so the step never jumps when it lands */
  .sm-chip { font-size: 12.5px; padding: 6px 10px 6px 9px; }
  .sm-stat > .sm-chip:has(~ .sm-chip.on) { display: none !important; }
  .sm-tries > .sm-try:has(~ .sm-try.on) { display: none !important; }

  /* the phone: its bare screen */
  .sm-sig .kit-phone { padding: 0; border-radius: 16px; box-shadow: 0 0 0 1px var(--line); background: #fff; }
  .sm-sig .ps-btn, .sm-sig .ig-status { display: none; }
  .sm-sig .ps-screen { border-radius: 16px; background: #fff; }
  .sm-sig .kit-ig-dmh { padding-top: 10px; padding-bottom: 8px; }
  .sm-sig .ig-dm-h p span, .sm-sig .ig-ctx { font-size: 11px; }
  .sm-sig .ig-comp { display: none; }
  .sm-ask .ig-comp { display: flex; margin: 4px 8px 8px; }
  .sm-th { padding: 8px 10px 10px; }
  /* a chat keeps its newest messages whole: older ones leave as later ones land (.sm-keep-N on the thread's scene) */
  .sm-sig .sm-th > .ig-m:has(~ .ig-m.on ~ .ig-m.on ~ .ig-m.on) { display: none !important; }
  .sm-k2 .sm-th > .ig-m:has(~ .ig-m.on ~ .ig-m.on), .sm-k2 .sm-th > .ig-ctx:has(~ .ig-m.on ~ .ig-m.on) { display: none !important; }

  /* builder panels at the screen's width */
  .sm-surf > .sm-panel { width: 100%; gap: 10px; padding: 14px; box-shadow: var(--shadow-lift); }
  .sm-panel-h { padding-bottom: 10px; }
  .sm-surf .sm-panel:has(.sm-var) .sm-panel-k, .sm-surf .sm-panel:has(.sm-var) .sm-panel-f { display: none; }
  .sm-surf .sm-var { padding: 7px 10px; }
  .sm-switch { padding-top: 2px; }

  /* media: the pictures at the screen's scale, the file's label readable */
  .sm-photo { width: 136px; height: 172px; }
  .sm-video { width: 116px; height: 172px; }
  .sm-doc-i { width: 36px; font-size: 11px; letter-spacing: 0; padding-bottom: 5px; }

  /* cards: the card in view whole, its neighbours out of sight; the opening line leaves when the carousel lands, the
     carousel when her tap is posted */
  .sm-car { flex: none; width: 184px; margin-inline-end: 0; }
  .sm-card { width: 184px; }
  .sm-track { transition: none; }
  .sm-car:has(.sm-p2.on) .sm-track { transform: translateX(-192px); }
  .sm-car:has(.sm-p3.on) .sm-track { transform: translateX(-384px); }
  .sm-car:not(:has(.sm-pos.on)) .sm-card:not(:first-child),
  .sm-car:has(.sm-p2.on) .sm-card:not(:nth-child(2)),
  .sm-car:has(.sm-p3.on) .sm-card:not(:nth-child(3)) { opacity: 0; }
  .sm-car:has(.sm-p2.on) .sm-card:nth-child(2), .sm-car:has(.sm-p3.on) .sm-card:nth-child(3) { animation: sm-swipe 0.45s var(--ease); }
  .sm-cards .sm-th > .ig-m:first-child:has(~ .sm-carm.on), .sm-cards .sm-th > .sm-carm:has(~ .ig-m.me.on) { display: none !important; }
  .sm-solo { gap: 8px; justify-content: center; padding: var(--s-4) var(--s-3) var(--s-3); border-radius: var(--r-lg); border: var(--hairline) solid var(--line); background-color: var(--surface); background-image: radial-gradient(circle, color-mix(in srgb, var(--ink-4) 45%, transparent) 1px, transparent 1.2px); background-size: 16px 16px; }
  .sm-solo .kit-phone-w { width: 260px; }

  /* public reply: the comments sheet, the newest comment and its reply */
  .sm-reel .ig-sheet { height: 88%; }
  .sm-reel .ig-reel-top { top: 10px; }
  .sm-reel .ig-reel-top b { font-size: 16px; }
  .sm-public .ig-cms > li.on ~ li.on ~ li { display: none !important; }
  .sm-public .ig-cm-a { display: none; }
  .sm-public .ig-add .ig-ph, .sm-hide .ig-add .ig-ph { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sm-sig .ig-cm-l { font-size: 11px; }

  /* private reply and follow check: the screens that sit over the chat start under the (absent) status bar */
  .sm-reqs { padding-top: 10px; }
  .sm-prof { padding-top: 10px; gap: 10px; }
  .sm-prof-row img { width: 60px; height: 60px; }

  /* hide the comment: one view of the post at a time, everyone else's then Kayla's own */
  .sm-hide .sm-sig-in { gap: 0; padding: var(--s-4) var(--s-3) var(--s-3); border-radius: var(--r-lg); border: var(--hairline) solid var(--line); background-color: var(--surface); background-image: radial-gradient(circle, color-mix(in srgb, var(--ink-4) 45%, transparent) 1px, transparent 1.2px); background-size: 16px 16px; }
  .sm-hflow { display: none; }
  .sm-views { grid-template-columns: 260px; justify-content: center; gap: 0; }
  .sm-view { grid-area: 1 / 1; grid-template-rows: 316px auto; gap: 8px; }
  .sm-view.is-me { visibility: hidden; }
  .sm-views:has(> .sm-vm.on) > .is-all { visibility: hidden; }
  .sm-views:has(> .sm-vm.on) > .is-me { visibility: visible; animation: sm-in 0.35s var(--ease); }
  .sm-view-k { order: 2; justify-content: center; }
  .sm-view-k .i { display: none; }
  .sm-view-k .sm-view-s { display: none; }
  .sm-hide .ig-cm-a { display: none; }
  /* three rows do not fit above the comment box: while her comment is in the public list the last row waits out of
     sight, and it is back the moment her comment is hidden (so "Hidden from everyone else" shows the list without it) */
  .sm-hide .is-all .sm-cms:has(> .sm-hid.on) > li:last-child, .sm-hide .is-me .sm-cms > li:last-child { display: none; }
  .sm-sig .ig-cm.sm-hid.gone { left: 12px; right: 12px; }
  .sm-sig .ig-cm.sm-hid.gone ~ .ig-cm { animation: sm-in 0.35s var(--ease); }
  .sm-hide .sm-add { margin: 0 10px 8px; padding: 2px 0 0; }
  .sm-hide .sm-add p { padding-block: 7px; }
  .sm-view-k b { font-size: 11.5px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3c); }
  .sm-post { height: 316px; border-radius: 16px; border: 0; box-shadow: 0 0 0 1px var(--line); }
  .sm-post-h { padding: 10px 12px; }
  .sm-post-c { padding: 8px 12px 0; }
  .sm-cms { padding: 2px 12px 6px; }
  .sm-mine { margin-inline: -12px; padding-inline: 12px !important; }
  .sm-views:has(> .sm-vm.on) .is-me .sm-cms > li:not(.sm-mine), .sm-views:has(> .sm-vm.on) .is-me .sm-add { display: none; }
  .sm-views:has(> .sm-vm.on) .is-me .sm-push { align-self: start; margin-top: 4px; }
  .sm-hide .sm-line { margin-top: var(--s-3); }

  /* the narration line under a scene */
  /* room for its longest line (two rows) on every beat, so the scene keeps one height through the loop (CLS 0) */
  .sm-line { min-height: 46px; align-items: flex-start; margin-top: var(--s-3); }
  .sm-line span { max-width: 260px; min-height: 30px; padding: 5px 12px; font-size: 12.5px; line-height: 1.4; text-align: center; border-radius: 14px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
  .sm-line .i { width: 14px; height: 14px; }
}
/* a short phone (320 x 568: 413px under the header and the trial bar): the surfaces are 260 x 272 */
/* (the device's own height too: an iPhone SE's Safari is 553px tall with its bars and 635px once they slide away, so a
   rule on the window's height alone flips while the page scrolls and the scene jumps 44px; agent H3, 2026-10-07) */
@media (max-width: 860px) and (max-height: 620px), (max-width: 860px) and (max-device-height: 700px) {
  .sm-sig .kit-fit { --kit-h: 272px !important; }
  .sm-pair > .sm-pair-l, .sm-pair > .kit-phone-w, .sm-view { grid-template-rows: 272px auto; }
  .sm-surf, .sm-post { height: 272px; }
  .sm-pair, .sm-solo, .sm-hide .sm-sig-in { padding: var(--s-3) var(--s-3) var(--s-3) !important; }
  /* less room in the chat: the newest message alone on media; the quoted comment and what came before the step leave */
  .sm-media .sm-th > .ig-m:has(~ .ig-m.on) { display: none !important; }
  .sm-private .sm-th > .ig-ctx, .sm-follow .sm-th > .ig-ctx, .sm-follow .sm-th > .ig-m:not([data-in]) { display: none !important; }
  .sm-reel .ig-sheet { height: 100%; border-radius: 0; }
  .sm-reel .ig-grab { display: none; }
  /* the notification whole inside the shorter post (WebKit wraps it one line longer than Chromium) */
  .sm-hide .sm-push { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; margin-inline: 6px; padding: 8px 10px; }
  .sm-hide .sm-push img { width: 28px; height: 28px; border-radius: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .sm-sig *, .sm-sig *::before, .sm-sig *::after { transition: none !important; animation: none !important; }
}

/* phones, round 2 (QA2 P-2; agent S, 2026-10-07): a surface switch is a cross-fade over a solid surface, never through a
   blank stage: the surface that leaves stays in place under the one that arrives until it is fully in (0.3s). */
@media (max-width: 860px) {
  .sm-pair > .sm-pair-l, .sm-pair > .kit-phone-w, .sm-views > .sm-view { z-index: 0; transition: visibility 0s linear 0.3s, z-index 0s linear 0.3s; }
  .sm-pair > .sm-pair-l { background-color: var(--surface); }
  .sm-pair:has(> .sm-vm.on) > .sm-pair-l, .sm-pair:not(:has(> .sm-vm.on)) > .kit-phone-w,
  .sm-views:has(> .sm-vm.on) > .is-me, .sm-views:not(:has(> .sm-vm.on)) > .is-all { transition-delay: 0s; z-index: 2; animation: sm-xf 0.3s linear; }
  /* hold, then cut (QA pass 3 L-1 and pass 4; agent F2, 2026-10-08). An opacity cross-fade let the leaving surface read
     through the arriving one for 0.3s (two surfaces on top of each other), and an arriving surface that covers at once is
     an empty box while its own parts fade in. So the leaving surface stays ON TOP, whole, for 0.3s while the arriving
     one draws underneath it, then it is gone in one frame: never blank, never two at once. */
  @keyframes sm-xf { from, to { z-index: 1; } }
  /* the loop's restart: the page's script marks the root is-first for the first beat, drawn in the same task that clears
     the last one. Nothing eases in that moment, so the last picture is replaced by the complete first one in one frame
     (without it the last surface would empty itself for 0.3s under the hold, or the first would fade in from a blank). */
  .sm-sig.is-first, .sm-sig.is-first *, .sm-sig.is-first *::before, .sm-sig.is-first *::after { transition: none !important; animation-duration: 0s !important; animation-delay: 0s !important; }
  /* a screen or view that REPLACES another inside one surface (the chat over Message requests, the profile over the chat) arrives whole: the one it replaces leaves in the
     same frame, so an entrance from nothing was a blank surface for a frame or two (agent F2, 2026-10-08) */
  .sm-sig .ps-phone .ig-dm, .sm-sig .ps-phone .sm-prof { animation: none !important; }
}

/* /flow-builder/steps/ai-agent (agent AG, 2026-10-09): the step's card in conversation mode, and its capture, under the settings */
.sm-ag-fig { margin-top: var(--s-6); }
.sm-ag-fig > * + * { margin-top: var(--s-6); }
/* a phone's 260px surface holds the step's card with its four ways and the status line; the hand-off card would not fit
   under them (272px on a short phone), and the chat on the other surface shows the hand-off itself */
@media (max-width: 860px) {
  .sm-agent .sm-cv.is-sm .kit-canvas-in > .kit-node:last-child { display: none; }
  .sm-agent .sm-cv.is-sm .kit-canvas-in > .kit-node:first-of-type::after { content: none; }
}

/* Arabic (LF, 2026-10-10): the builder's panel beside the phone is the app's own panel, which an Arabic reader sees right to left: its tile, name
   and rows take the reader's direction. Every word in these scenes takes its direction from its own first letter, so a line that ends in a
   quote mark, a number or an emoji keeps it at its end */
[dir='rtl'] .sm-panel { direction: rtl; }
[dir='rtl'] :is(.sm-sig-in, .sm-mini, .sm-surf, .sm-panel) :is(p, li, b, span, em, small, q, time, dt, dd) { unicode-bidi: plaintext; }

/* the public-reply list grows a reply at a time and ran under the comment field from the second reply on, in every language: it keeps its newest
   reply in sight and the oldest comment slides under the sheet's head, as a scrolled list does; while it fits it stays at the top (LF, 2026-10-10) */
.sm-public .ig-cms { display: flex; flex-direction: column; justify-content: flex-end; }
.sm-public .ig-cms > li { flex: none; }
.sm-public .ig-cms::after { content: ''; flex: 1 0 0px; }