/* /ai-agents (site-src/gen/dm/agents.py, agent Z, 2026-10-07): one page for comment moderation AND DM automation.
   Class prefix ag-. Tokens from system.css; Instagram's own colours only inside the two phones (--ig-*). */

/* ───────────── the page knows the visitor's product (html[data-product], set before the first paint) ─────────────
   A block written for one product shows only for it; a [data-g] block is always on the page and only changes place. */
html[data-product='dm'] [data-only='mod'], html:not([data-product='dm']) [data-only='dm'] { display: none !important; }

/* the headline's two nouns swap places, and the marker sits under whichever comes last */
.ag-pair { display: inline-flex; flex-wrap: wrap; column-gap: 0.26em; }
.ag-pw, .ag-and { white-space: nowrap; }
.ag-pw[data-g='mod'] { order: 1; } .ag-and { order: 2; } .ag-pw[data-g='dm'] { order: 3; }
html[data-product='dm'] .ag-pw[data-g='dm'] { order: 1; }
html[data-product='dm'] .ag-pw[data-g='mod'] { order: 3; }
html:not([data-product='dm']) .ag-pw[data-g='dm'], html[data-product='dm'] .ag-pw[data-g='mod'] { padding-inline: 0.1em; margin-inline: -0.1em; border-radius: 0.1em; background: linear-gradient(180deg, transparent 0 62%, color-mix(in srgb, var(--accent-bright), transparent 52%) 62%, color-mix(in srgb, var(--accent-bright), transparent 52%) 96%, transparent 96%); }

/* the settings groups: the two shared ones, then the visitor's product, then the other */
.kit-caps[data-ag-sort] > .kit-capg[data-g] { order: 2; }
html:not([data-product='dm']) .kit-caps[data-ag-sort] > [data-g='mod'], html[data-product='dm'] .kit-caps[data-ag-sort] > [data-g='dm'] { order: 1; }
/* the questions: the visitor's product asks first */
#faq .qa-list[data-ag-sort] { display: flex; flex-direction: column; }
html[data-product='dm'] #faq .qa[data-g='dm'] { order: -1; }

/* (system.css keeps .ag, .ag-add, .ag-av and others for the home's older agent stage: this sheet's names avoid them) */
/* ───────────── the signature: the agent between a reel's comments and a DM, 1120 x 640, scaled as one picture ───────────── */
.ag-sig { margin: 0; --ig-meta: #6b6b6b; }
.ag-sig [data-in]:not(.on):not([data-in='0']), .ag-sig [data-in='0'].gone { display: none; }
.ag-box { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; padding: var(--s-12) var(--s-6) var(--s-8); border-radius: var(--r-2xl); background: var(--surface); border: var(--hairline) solid var(--line); box-shadow: var(--shadow-card); overflow: clip; }
.ag-box::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, color-mix(in srgb, var(--ink-4) 32%, transparent) 1px, transparent 1.2px); background-size: 18px 18px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); pointer-events: none; }
.ag-fitw { width: 100%; min-width: 0; display: grid; justify-items: center; }
.ag-stage { font-family: var(--font); text-align: start; }
.ag-sig.is-reset .ag-stage { opacity: 0; transition: opacity 0.6s var(--ease); }
.ag-stage > * { position: absolute; }
.ag-f { display: none !important; }
.ag-pa { left: 0; top: 0; } .ag-pb { left: 820px; top: 0; }
.ag-pcol { width: 300px; display: grid; gap: 12px; }
.ag-pl { margin: 0; height: 24px; display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 13px; font-weight: 650; color: var(--ink); white-space: nowrap; }
.ag-pl span { font-weight: 500; color: var(--ink-3); }
.ag-phone { width: 300px !important; height: 604px !important; padding: 10px; border-radius: 50px; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.14), inset 0 0 0 5px #0b0c0e, 0 30px 60px -22px rgb(15 23 42 / 0.42), 0 0 0 1px rgb(0 0 0 / 0.55); }
.ag-phone .ps-screen { border-radius: 41px; }
.ag-phone .ps-btn-a { top: 116px; } .ag-phone .ps-btn-b { top: 158px; } .ag-phone .ps-btn-c { top: 172px; }
.ag-sig .ig-status { color: #000; }

/* the wires: the agent to each place; the one in use carries the accent and a moving dot */
.ag-wire { top: 336px; width: 50px; height: 2px; border-radius: 1px; background: repeating-linear-gradient(90deg, var(--ink-4) 0 5px, transparent 5px 9px); }
.ag-wire.is-l { left: 300px; } .ag-wire.is-r { left: 770px; }
.ag-wire i { position: absolute; inset: -1px 0; border-radius: 2px; background: var(--accent); }
.ag-wire i::after { content: ''; position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); animation: ag-run 1.1s var(--ease) infinite; }
.ag-wire.is-l i::after { animation-name: ag-run-l; }
@keyframes ag-run { from { transform: translateX(0); } to { transform: translateX(42px); } }
@keyframes ag-run-l { from { transform: translateX(42px); } to { transform: translateX(0); } }

/* the agent, drawn from its page in the app: its name, Knowledge, Where it answers, and what it is doing now */
.ag-card { left: 350px; top: 62px; width: 420px; height: 530px; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 16px; border-radius: 18px; background: var(--canvas); border: var(--hairline) solid var(--line); box-shadow: var(--shadow-pop); }
.ag-card-h { display: flex; align-items: center; gap: 12px; padding-bottom: 4px; }
.ag-dog { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-lift); color: var(--ink-3c); }
.ag-dog img { width: 22px; height: 22px; }
.ag-dog .i { width: 18px; height: 18px; }
.ag-card-h p { margin: 0; display: grid; line-height: 1.3; }
.ag-card-h b { font-size: 16px; font-weight: 650; letter-spacing: -0.012em; color: var(--ink); }
.ag-card-h small { font-size: 13px; color: var(--ink-3c); }
.ag-k { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 650; color: var(--ink); }
.ag-k span { min-width: 20px; height: 20px; display: inline-grid; place-items: center; padding: 0 6px; border-radius: 10px; background: var(--step-amber); color: var(--ink); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ag-srcs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ag-src { position: relative; display: flex; align-items: center; gap: 11px; height: 62px; padding: 0 12px; border-radius: 12px; background: var(--surface); border: var(--hairline) solid var(--line); transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.ag-src-i { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--rail); color: var(--ink-3c); transition: background-color 0.35s var(--ease), color 0.35s var(--ease); }
.ag-src-i .i { width: 16px; height: 16px; }
.ag-src-b { flex: 1; min-width: 0; display: grid; line-height: 1.35; }
.ag-src-b b { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-src-b small { font-size: 13px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-src-b q { quotes: none; justify-self: start; margin-top: 3px; padding: 2px 8px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-ink); font-size: 13px; font-weight: 600; animation: ag-in 0.35s var(--ease) backwards; }
.ag-src:has(q.on) small { display: none; }
.ag-lit { display: none !important; }
.ag-src:has(.ag-lit.on) { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-lift); }
.ag-src:has(.ag-lit.on) .ag-src-i { background: var(--accent); color: var(--hero-ink); }
.ag-miss { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px 0 6px; border-radius: var(--r-pill); background: var(--rail); color: var(--ink-3c); font-size: 13px; font-weight: 600; white-space: nowrap; animation: ag-in 0.35s var(--ease) backwards; }
.ag-miss .i { width: 13px; height: 13px; stroke-width: 2.6; }
.ag-src:nth-child(2) .ag-miss { animation-delay: 0.18s; } .ag-src:nth-child(3) .ag-miss { animation-delay: 0.36s; }

.ag-where, .ag-gap { grid-row: 4; grid-column: 1; align-self: start; display: grid; gap: 6px; margin-top: 4px; }
.ag-w { position: relative; margin: 0; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; border: var(--hairline) solid var(--line-soft); transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease); }
.ag-w > .i { width: 16px; height: 16px; flex: none; color: var(--ink-3c); }
.ag-w span { display: grid; line-height: 1.35; }
.ag-w b { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.ag-w small { font-size: 13px; color: var(--ink-3); }
.ag-w-on { display: none !important; }
.ag-w:has(.ag-w-on.on) { background: var(--surface); border-color: var(--accent-line); }
.ag-w:has(.ag-w-on.on) > .i { color: var(--accent); }
.ag-w:has(.ag-w-on.on)::after { content: ''; margin-inline-start: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.ag-gap { animation: ag-in 0.4s var(--ease) backwards; }
.ag-gap-c { display: grid; gap: 6px; padding: 12px; border-radius: 12px; background: var(--surface); border: var(--hairline) solid var(--line); box-shadow: var(--shadow-lift); }
.ag-gap-c p { margin: 0; }
.ag-gap-q { font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.ag-gap-m { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-3); }
.ag-gap-m .i { width: 14px; height: 14px; }
.ag-gap-a { display: flex; gap: 8px; margin-top: 4px !important; }
.ag-btn { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 8px; background: var(--accent); color: var(--hero-ink); font-size: 13px; font-weight: 600; white-space: nowrap; }
.ag-btn.is-ghost { background: var(--surface); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.ag-gap-n { margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: var(--ink-3c); }

/* what it is doing: one line that keeps its place */
.ag-sts { grid-row: 5; display: grid; border-top: var(--hairline) solid var(--line); padding-top: 12px; }
.ag-st { grid-area: 1 / 1; margin: 0; display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.ag-sig .ag-sts > .ag-st:not(.on) { display: flex; visibility: hidden; }
.ag-sig .ag-sts > .ag-st[data-in='0']:not(.on):not(.gone) { visibility: visible; }
.ag-st.on { animation: ag-in 0.35s var(--ease) backwards; }
.ag-st .i { width: 22px; height: 22px; flex: none; padding: 5px; border-radius: 50%; background: var(--rail); color: var(--ink-3c); stroke-width: 2.4; }
.ag-st.is-ok .i { background: var(--accent); color: var(--hero-ink); }
.ag-st.is-ok { color: var(--accent-ink); }
.ag-st.is-hand .i { background: var(--step-amber); color: var(--ink); }
.ag-st.is-hand, .ag-st.is-no { color: var(--ink); }

/* under the reel: Instagram's comment sheet */
.ag-ch { position: absolute; inset: 44px 0 auto; height: 42px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; border-bottom: 1px solid #efefef; color: #000; }
.ag-ch b { font-size: 15px; font-weight: 700; }
.ag-ch .ig-g { width: 22px; height: 22px; }
.ag-phone .ag-cap { position: absolute; inset: 86px 0 auto; display: flex; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #efefef; }
.ag-phone .ag-cap img { width: 30px; height: 30px; flex: none; border-radius: 50%; object-fit: cover; }
.ag-phone .ag-cap p { margin: 0; font-size: 12.5px; line-height: 1.38; color: #000; }
.ag-phone .ag-cap time { display: block; margin-top: 3px; font-size: 11.5px; color: var(--ig-meta); }
.ag-cms { list-style: none; margin: 0; position: absolute; inset: 170px 0 56px; padding: 2px 14px; overflow: hidden; display: flex; flex-direction: column; }
.ag-cms > li { flex: none; }
.ag-cm { display: grid; grid-template-columns: 30px minmax(0, 1fr) 20px; gap: 10px; padding: 8px 0; }
.ag-cm.on { animation: ag-in 0.4s var(--ease) backwards; }
.ag-cm.is-new { background: color-mix(in srgb, var(--ig-blue) 5%, #fff); margin-inline: -14px; padding-inline: 14px; }
.ag-avt { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--instagram) 13%, #fff); color: color-mix(in srgb, var(--instagram) 80%, var(--ink)); font-size: 12.5px; font-weight: 700; }
.ag-avt.c2 { background: color-mix(in srgb, var(--step-blue) 13%, #fff); color: color-mix(in srgb, var(--step-blue) 80%, var(--ink)); }
.ag-avt.c4 { background: color-mix(in srgb, var(--step-teal) 14%, #fff); color: color-mix(in srgb, var(--step-teal) 65%, var(--ink)); }
.ag-avt.c5 { background: color-mix(in srgb, var(--step-violet) 13%, #fff); color: var(--step-violet); }
.ag-cm-b { min-width: 0; }
.ag-cm-b p { margin: 0; }
.ag-cm-n { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #000; }
.ag-cm-n b { font-weight: 650; }
.ag-cm-n time { color: var(--ig-meta); }
.ag-cm-t { font-size: 13px; line-height: 1.35; color: #000; overflow-wrap: anywhere; }
.ag-cm-a { margin-top: 2px !important; font-size: 11.5px; font-weight: 600; color: var(--ig-meta); }
.ag-cm-l { display: grid; justify-items: center; align-content: start; padding-top: 6px; font-size: 11px; color: var(--ig-meta); }
.ag-cm-l .ig-g { width: 13px; height: 13px; }
.ag-rep { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; margin-top: 8px; animation: ag-in 0.45s var(--ease) backwards; }
.ag-rep img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.ag-author { color: var(--ig-meta); font-weight: 500; }
.ag-at { color: #00376b; }
.ag-addc { position: absolute; inset: auto 0 16px; display: flex; align-items: center; gap: 9px; padding: 0 12px; }
.ag-addc p { flex: 1; min-width: 0; margin: 0; padding: 8px 13px; border: 1px solid #dbdbdb; border-radius: 22px; font-size: 12.5px; color: var(--ig-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* her DMs */
.ag-th { padding-top: 10px !important; }
.ag-th .ig-m.on { animation: ag-in 0.4s var(--ease) backwards; }
.ag-th { justify-content: flex-start !important; }
.ag-th .ig-ctx { padding-top: 6px; }
.ag-th .ag-today { margin-top: 8px; }

.ag-capt { display: none; }
@keyframes ag-in { from { opacity: 0; transform: translateY(6px); } }

/* ───────────── a phone: ONE surface at a time at full size (agent S's rule; PLAN §2) ─────────────
   Under 860px the stage is 260 wide and never scaled down: the reel's comments, then Lucía's DMs, then the reel again,
   then the agent's Unanswered card. Its name sits under it, then the one line that says what the agent is doing. */
@media (max-width: 860px) {
  .ag-box { padding: var(--s-4) var(--s-3) var(--s-3); border-radius: var(--r-xl); }
  .ag-box::before { display: none; }
  .ag-fitw { width: auto; margin-inline: calc(-1 * var(--s-3)); }
  .ag-wire { display: none; }
  .ag-pa, .ag-pb { left: 0; top: 0; }
  .ag-pcol { width: 260px; gap: 0; }
  .ag-pl { display: none; }
  .ag-phone { width: 260px !important; height: 316px !important; padding: 0; border-radius: 16px; box-shadow: 0 0 0 1px var(--line); background: #fff; }
  .ag-phone .ps-btn, .ag-phone .ig-status { display: none; }
  .ag-phone .ps-screen { border-radius: 16px; background: #fff; }
  .ag-ch { inset: 0 0 auto; height: 38px; padding: 0 12px; }
  .ag-ch b { font-size: 14px; }
  .ag-ch .ig-g { width: 20px; height: 20px; }
  .ag-phone .ag-cap { inset: 38px 0 auto; padding: 8px 12px; gap: 8px; }
  .ag-phone .ag-cap img { width: 26px; height: 26px; }
  .ag-phone .ag-cap p { font-size: 12px; }
  .ag-phone .ag-cap time { display: none; }
  .ag-cms { inset: 92px 0 44px; padding: 0 12px; }
  .ag-cm { gap: 8px; padding: 6px 0; grid-template-columns: 28px minmax(0, 1fr) 18px; }
  .ag-cm.is-new { margin-inline: -12px; padding-inline: 12px; }
  .ag-avt { width: 28px; height: 28px; font-size: 12px; }
  .ag-cm-a { display: none; }
  .ag-rep { margin-top: 6px; }
  .ag-cms > .ag-cm:not([data-in]) { display: none; }
  .ag-addc { inset: auto 0 8px; padding: 0 10px; }
  .ag-addc p { font-size: 12px; padding: 7px 12px; }
  .ag-phone .kit-ig-dmh { padding-top: 10px; padding-bottom: 8px; }
  .ag-phone .ig-comp { display: none; }
  .ag-th:has(.ag-today.on) > :nth-child(-n + 2) { display: none; }
  .ag-phone:has(.ag-cms > .ag-cm:nth-child(3).on) .ag-cap { display: none; }
  .ag-cms:has(> .ag-cm:nth-child(3).on) { top: 38px; }
  .ag-th { padding: 8px 10px 12px !important; }
  .ag-th .ig-ctx { font-size: 11px; }
  /* the agent's card is a surface only when it has something of its own to show: the question it left for a person */
  .ag-card { left: 0; top: 0; width: 260px; height: 316px; grid-template-rows: auto minmax(0, 1fr); gap: 10px; padding: 14px; border-radius: 16px; box-shadow: 0 0 0 1px var(--line); border: 0; }
  .ag-card .ag-k-kn, .ag-card .ag-srcs, .ag-card .ag-where, .ag-card .ag-sts { display: none !important; }
  .ag-card .ag-gap { grid-row: 2; }
  .ag-card-h b { font-size: 15px; }
  .ag-card-h small, .ag-gap-m, .ag-gap-n { font-size: 12.5px; }
  .ag-dog { width: 34px; height: 34px; }
  /* which surface: a cross-fade over a solid surface, never through a blank stage (S, round 2) */
  .ag-stage .ag-pa, .ag-stage .ag-pb, .ag-stage .ag-card { visibility: hidden; z-index: 0; transition: visibility 0s linear 0.3s, z-index 0s linear 0.3s; }
  .ag-stage:not(:has(.ag-f.on)) .ag-pa, .ag-stage:has(.ag-f-dm.on) .ag-pb, .ag-stage:has(.ag-f-un.on) .ag-card { visibility: visible; transition-delay: 0s; z-index: 2; animation: ag-xf 0.3s linear; }
  .ag-capt { display: grid; justify-items: center; gap: var(--s-2); margin-top: var(--s-3); }
  .ag-nm { margin: 0; display: grid; font-size: 11.5px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3c); }
  .ag-nm span { grid-area: 1 / 1; text-align: center; }
  .ag-line { margin: 0; display: grid; justify-items: center; min-height: 34px; }
  .ag-line-t { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding-block: 5px; padding-inline: 8px 14px; border-radius: 17px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--shadow-lift); font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--ink); text-align: start; }
  .ag-sig .ag-line .ag-line-t:not(.on) { display: inline-flex; visibility: hidden; }
  .ag-sig .ag-line .ag-line-t[data-in='0']:not(.on):not(.gone) { visibility: visible; }
  .ag-line-t.on { animation: ag-in 0.35s var(--ease) backwards; }
  .ag-line-t > .i { width: 20px; height: 20px; flex: none; padding: 4px; border-radius: 50%; background: var(--accent); color: var(--hero-ink); stroke-width: 2.6; }
  .ag-line-t b { font-weight: 650; overflow-wrap: anywhere; }
  /* hold, then cut (QA pass 3 L-1 and pass 4; agent F2, 2026-10-08, the same rule as the flow-builder sheets). 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. */
  @keyframes ag-xf { from, to { z-index: 1; } }
  /* the loop's restart: no fade to nothing on a phone (the stage was blank for about half a second), and 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. */
  .ag-sig.is-reset .ag-stage { opacity: 1; transition: none; }
  .ag-sig.is-first, .ag-sig.is-first *, .ag-sig.is-first *::before, .ag-sig.is-first *::after { transition: none !important; animation-duration: 0s !important; animation-delay: 0s !important; }
}
/* a short phone (320 x 568: 413px under the header and the trial bar): the same screens, 36px shorter */
@media (max-width: 860px) and (max-height: 620px) {
  .ag-fit { --kit-h: 280px !important; }
  .ag-phone, .ag-card { height: 280px !important; }
  .ag-phone .ag-cap { display: none; }
  .ag-cms { top: 38px; }
  .ag-gap-n { display: none; }
}

/* ───────────── one screen: the small pictures ───────────── */
.ag-mini { width: 100%; max-width: 250px; display: grid; gap: 7px; font-family: var(--font); text-align: start; }
.ag-mini p { margin: 0; }
.ag-mh { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.ag-mh b { font-weight: 650; color: var(--ink); }
.ag-mh span { font-size: 12px; color: var(--ink-3c); }
.ag-mrow { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 10px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.band .ag-mrow, .band .ag-mini .ag-gap-c { background: var(--surface); }
.ag-mrow .ag-src-i { width: 26px; height: 26px; border-radius: 7px; }
.ag-mrow .ag-src-i .i { width: 14px; height: 14px; }
.ag-mrow > span:last-child { min-width: 0; display: grid; line-height: 1.3; }
.ag-mrow b { font-size: 12.5px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.ag-mrow small { font-size: 12px; color: var(--ink-3c); }
.ag-mseg { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 9px; background: var(--rail); font-size: 12px; font-weight: 550; color: var(--ink-3c); text-align: center; }
.ag-mseg span { padding: 4px; border-radius: 7px; }
.ag-mseg .is-on { background: var(--surface); color: var(--ink); font-weight: 650; box-shadow: 0 1px 2px rgb(15 23 42 / 0.08); }
.ag-mq, .ag-ma { max-width: 88%; padding: 7px 11px; border-radius: 14px; font-size: 12.5px; line-height: 1.38; }
.ag-mq { justify-self: end; background: var(--rail); color: var(--ink); }
.ag-ma { justify-self: start; background: var(--accent-soft); color: var(--ink); }
.ag-mnote { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3c); }
.ag-mnote .i { width: 13px; height: 13px; flex: none; }
.ag-mini .ag-gap-c { padding: 10px; box-shadow: 0 0 0 1px var(--line); border: 0; }
.ag-mini .ag-gap-q { font-size: 13.5px; }
.ag-mini .ag-gap-m { font-size: 12px; }
.ag-mini .ag-btn { height: 26px; font-size: 12.5px; }

/* ───────────── where it answers: two halves, the visitor's product first ───────────── */
.ag-halves { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-16); }
.ag-half { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-16); align-items: center; }
html[data-product='dm'] .ag-half[data-g='dm'] { order: -1; }
/* the second half mirrors, whichever product it is, and a hairline parts the two */
html:not([data-product='dm']) .ag-half[data-g='dm'], html[data-product='dm'] .ag-half[data-g='mod'] { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); padding-top: var(--s-16); border-top: var(--hairline) solid var(--line); }
html:not([data-product='dm']) .ag-half[data-g='dm'] .ag-half-copy, html[data-product='dm'] .ag-half[data-g='mod'] .ag-half-copy { order: 2; }
.ag-half-v { min-width: 0; }
.ag-h3 { margin: 0; font-size: var(--t-h2); line-height: 1.15; letter-spacing: -0.022em; font-weight: 650; color: var(--ink); text-wrap: balance; }
.ag-half .kit-points dt { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.ag-gt { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.ag-gt-i { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: var(--accent-soft); color: var(--accent-ink); }
.ag-gt-i .i { width: 14px; height: 14px; }
@media (max-width: 960px) {
  .ag-half, html:not([data-product='dm']) .ag-half[data-g='dm'], html[data-product='dm'] .ag-half[data-g='mod'] { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
  html:not([data-product='dm']) .ag-half[data-g='dm'] .ag-half-copy, html[data-product='dm'] .ag-half[data-g='mod'] .ag-half-copy { order: 0; }
  .ag-halves { gap: var(--s-12); }
  html:not([data-product='dm']) .ag-half[data-g='dm'], html[data-product='dm'] .ag-half[data-g='mod'] { padding-top: var(--s-12); }
}

/* a piece of the app, drawn: the panel the two halves and "when it does not know" show */
.ag-pn { border-radius: var(--r-xl); background: var(--surface); border: var(--hairline) solid var(--line); box-shadow: var(--shadow-card); }
.band .ag-pn { background: var(--canvas); box-shadow: none; }
.ag-pn-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: var(--s-6); font-family: var(--font); text-align: start; }
.ag-pn p { margin: 0; }
.ag-pn-h { display: flex; align-items: center; gap: 11px; }
.ag-pn-i { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 9px; background: color-mix(in srgb, var(--step-teal) 12%, var(--surface)); color: color-mix(in srgb, var(--step-teal) 70%, var(--ink)); }
.ag-pn-i .i { width: 17px; height: 17px; }
.ag-pn-h p { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.ag-pn-h small { font-size: 12.5px; font-weight: 600; color: var(--ink-3c); }
.ag-pn-h b { font-size: 15.5px; font-weight: 650; letter-spacing: -0.01em; color: var(--ink); }
.ag-live { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--accent-ink); }
.ag-live i { position: relative; width: 34px; height: 20px; border-radius: 10px; background: var(--accent); }
.ag-live i::after { content: ''; position: absolute; right: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); }
.ag-seg { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 10px; background: var(--rail); font-size: 13px; font-weight: 550; color: var(--ink-3c); text-align: center; }
.band .ag-seg { background: color-mix(in srgb, var(--rail), var(--line) 40%); }
.ag-seg span { padding: 6px; border-radius: 8px; }
.ag-seg .is-on { background: var(--surface); color: var(--ink); font-weight: 650; box-shadow: 0 1px 2px rgb(15 23 42 / 0.08); }
.ag-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ag-opt { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 4px 10px; align-content: start; padding: 12px; border-radius: 12px; background: var(--surface); border: var(--hairline) solid var(--line); }
.ag-opt i { width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-4); }
.ag-opt span { display: grid; gap: 2px; line-height: 1.35; }
.ag-opt b { font-size: 14px; font-weight: 650; color: var(--ink); }
.ag-opt small { font-size: 13px; color: var(--ink-3c); }
.ag-opt em { grid-column: 2; justify-self: start; font-style: normal; margin-top: 4px; padding: 2px 8px; border-radius: 6px; background: var(--rail); font-size: 12px; font-weight: 600; color: var(--ink-3c); }
.ag-opt.is-on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ag-opt.is-on i { box-shadow: inset 0 0 0 5px var(--accent); }
.ag-opt.is-on em { background: var(--accent-soft); color: var(--accent-ink); }
.ag-pn .ag-k { margin-top: 4px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3c); }
.ag-path { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ag-who { flex: 1 1 150px; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 12px; background: var(--surface); border: var(--hairline) solid var(--line); }
.ag-who .ag-dog { width: 30px; height: 30px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--line); }
.ag-who .ag-dog img { width: 18px; height: 18px; }
.ag-who .ag-dog .i { width: 15px; height: 15px; }
.ag-who > span:last-child { min-width: 0; display: grid; line-height: 1.3; }
.ag-who b { font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-who small { font-size: 12.5px; color: var(--ink-3c); }
.ag-who.is-you { border-style: dashed; background: transparent; }
.ag-arr { flex: none; display: grid; place-items: center; color: var(--ink-4); }
.ag-arr .i { width: 14px; height: 14px; }
.ag-dr { display: grid; gap: 8px; margin-top: 4px; padding: 12px; border-radius: 12px; background: var(--surface); border: var(--hairline) solid var(--line); box-shadow: var(--shadow-lift); }
.ag-dr-c { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.4; color: var(--ink); }
.ag-dr-c > span:nth-child(2) { flex: 1; min-width: 0; }
.ag-dr-c b { font-weight: 650; }
.ag-chip { flex: none; font-style: normal; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: color-mix(in srgb, var(--step-amber) 16%, var(--surface)); color: color-mix(in srgb, var(--step-amber) 45%, var(--ink)); font-size: 12px; font-weight: 650; white-space: nowrap; }
.ag-chip.is-ok { background: var(--accent-soft); color: var(--accent-ink); }
.ag-dr-t { padding: 9px 11px; border-radius: 10px; background: var(--accent-soft); font-size: 14px; line-height: 1.45; color: var(--ink); }
.ag-dr-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--ink-3c); }
/* the DM half: a chat in the Live inbox beside the flow step */
.ag-pn-in.is-dm { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-6); }
.ag-tc { display: grid; gap: 7px; padding: 14px; border-radius: 14px; background: var(--surface); border: var(--hairline) solid var(--line); box-shadow: var(--shadow-lift); }
.ag-tc-h { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; margin-bottom: 4px !important; border-bottom: var(--hairline) solid var(--line-soft); }
.ag-tc-h > span:nth-child(2) { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.ag-tc-h b { font-size: 14px; font-weight: 650; color: var(--ink); }
.ag-tc-h small { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ink-3c); }
.ag-tc-h small .i { width: 13px; height: 13px; }
.ag-bub { justify-self: start; max-width: 84%; padding: 8px 12px; border-radius: 16px; background: var(--rail); font-size: 14px; line-height: 1.4; color: var(--ink); }
.ag-bub.is-ai { justify-self: end; background: var(--accent-soft); }
.ag-by { justify-self: end; display: flex; align-items: center; gap: 5px; margin-top: -3px !important; font-size: 12.5px; font-weight: 600; color: var(--ink-3c); }
.ag-by .i { width: 13px; height: 13px; }
.ag-hand { display: flex; align-items: center; gap: 10px; margin-top: 4px !important; padding: 9px 11px; border-radius: 10px; border: var(--hairline) dashed color-mix(in srgb, var(--step-amber) 50%, var(--line)); background: color-mix(in srgb, var(--step-amber) 7%, var(--surface)); }
.ag-hand .i { width: 16px; height: 16px; flex: none; color: color-mix(in srgb, var(--step-amber) 60%, var(--ink)); }
.ag-hand span { display: grid; font-size: 13px; line-height: 1.35; color: var(--ink-3c); }
.ag-hand b { font-weight: 650; color: var(--ink); }
.ag-node.kit-node { width: 264px; }
@media (max-width: 1100px) { .ag-pn-in.is-dm { grid-template-columns: minmax(0, 1fr); justify-items: stretch; } .ag-node.kit-node { width: auto; } .ag-node .kit-dot { display: none; } }
@media (max-width: 520px) {
  .ag-pn-in { padding: var(--s-4); }
  .ag-opts { grid-template-columns: minmax(0, 1fr); }
  .ag-arr { display: none; }
  .ag-who { flex-basis: 100%; }
  .ag-dr-f { flex-wrap: wrap; }
  .ag-tc-h { flex-wrap: wrap; }
}
/* the Unanswered tab: one answer teaches it */
.ag-tabs { display: flex; gap: 18px; overflow: hidden; border-bottom: var(--hairline) solid var(--line); font-size: 13.5px; font-weight: 550; color: var(--ink-3c); white-space: nowrap; }
.ag-tabs span { display: inline-flex; align-items: center; gap: 6px; padding-bottom: 10px; }
.ag-tabs .is-on { color: var(--ink); font-weight: 650; box-shadow: inset 0 -2px 0 var(--accent); }
.ag-tabs i { font-style: normal; min-width: 18px; height: 18px; display: inline-grid; place-items: center; padding: 0 5px; border-radius: 9px; background: var(--step-amber); color: var(--ink); font-size: 11.5px; font-weight: 700; }
.ag-tl { display: grid; gap: 9px; }
.ag-tl-q { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.ag-tl-q > span:nth-child(2) { flex: 1; min-width: 0; }
.ag-tl-y, .ag-tl-a { margin-inline-start: 40px !important; padding: 10px 12px; border-radius: 12px; font-size: 14px; line-height: 1.45; color: var(--ink); }
.ag-tl-y { display: grid; gap: 2px; background: var(--surface); border: var(--hairline) solid var(--line); box-shadow: var(--shadow-lift); }
.ag-tl-y small { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3c); }
.ag-tl-a { display: flex; gap: 10px; align-items: flex-start; background: var(--accent-soft); }
.ag-tl-a .ag-dog { width: 26px; height: 26px; border-radius: 8px; box-shadow: none; background: var(--surface); }
.ag-tl-a .ag-dog img { width: 16px; height: 16px; }
.ag-tl-s { margin-inline-start: 40px !important; display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--accent-ink); }
.ag-tl-s .i { width: 16px; height: 16px; padding: 3px; border-radius: 50%; background: var(--accent); color: var(--hero-ink); stroke-width: 3; }
.ag-tl-s + .ag-tl-q { margin-top: 8px !important; padding-top: 14px; border-top: var(--hairline) solid var(--line-soft); }
@media (max-width: 520px) { .ag-tl-y, .ag-tl-a, .ag-tl-s { margin-inline-start: 0 !important; } .ag-tabs span:nth-child(-n + 2) { display: none; } }

/* right to left: the drawn pieces keep their left-to-right geometry (KIT.md § 6, rule 15) */
[dir='rtl'] :is(.ag-pn-in, .ag-mini) { direction: ltr; }
[dir='rtl'] :is(.ag-pn-in, .ag-mini) :is(p, b, small, span) { unicode-bidi: plaintext; }

/* (the pseudo-elements too: the dot that runs along the lit wire is an ::after and kept running under reduced motion at
   desktop sizes; agent F2, 2026-10-08) */
@media (prefers-reduced-motion: reduce) { .ag-sig *, .ag-sig *::before, .ag-sig *::after, .ag-line-t { animation: none !important; transition: none !important; } }