/* The Live inbox and the two DM channel pages (site-src/gen/dm/channels.py, agent M). Class prefix ch-. Tokens from
   system.css; Instagram's and Messenger's own colours only inside their phones (--ig-*, --fb, --fb-bubble). Reuses the DM
   home's inbox parts (.lx-m, .lx-av, .lx-k, .lx-kv, .lx-tags, .lx-auto, .lx-ev, .lx-note) and the kit's nodes. */

/* ───────────── the shared stage: drawn at one size, scaled whole; a caption line under it ───────────── */
.ch-fig { margin: 0; }
.ch-fig [data-in]:not(.on) { display: none !important; }
.ch-stage { font-family: var(--font); text-align: start; }
.ch-fig.is-reset .ch-stage { opacity: 0; transition: opacity 0.6s var(--ease); }
.ch-box { position: relative; display: grid; justify-items: center; }
.ch-igs .ch-box, .ch-mss .ch-box { 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; }
.ch-igs .ch-box::before, .ch-mss .ch-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; }
.ch-b, .ch-lit { display: none !important; }
.ch-line { display: grid; justify-items: center; margin: var(--s-5) 0 0; min-height: 36px; }
.ch-line-t { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding-inline: 10px 14px; border-radius: var(--r-pill); background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--shadow-lift); font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; animation: ch-in 0.35s var(--ease) backwards; }
.ch-line-t .i { width: 20px; height: 20px; padding: 4px; border-radius: 50%; background: var(--accent); color: var(--hero-ink); stroke-width: 2.6; }
.ch-sp { flex: 1; }
.ch-k { margin: 0 0 4px; font-size: 11px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
@keyframes ch-in { from { opacity: 0; transform: translateY(6px); } }

/* ═════════════ /messages: the Live inbox window (1180 x 640) ═════════════ */
.ch-lx .ch-stage { display: grid; grid-template-columns: 300px minmax(0, 1fr) 316px; border-radius: 18px; background: var(--surface); border: var(--hairline) solid var(--line); box-shadow: var(--shadow-card); overflow: hidden; }
.ch-list { display: flex; flex-direction: column; min-height: 0; border-inline-end: var(--hairline) solid var(--line); background: var(--surface); }
.ch-list-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 58px; padding: 0 14px; border-bottom: var(--hairline) solid var(--line-soft); }
.ch-list-h b { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 650; color: var(--ink); }
.ch-list-h b .i { width: 16px; height: 16px; color: var(--ink-3); }
.ch-seg { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--rail); font-size: 11.5px; font-weight: 600; color: var(--ink-3c); }
.ch-seg span { padding: 3px 9px; border-radius: 6px; }
.ch-seg .is-on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgb(15 23 42 / 0.08); }
.ch-search { margin: 10px 12px 4px; display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px; border-radius: 8px; background: var(--canvas); border: var(--hairline) solid var(--line-soft); font-size: 12px; color: var(--ink-3); }
.ch-search .i { width: 14px; height: 14px; }
.ch-rows { list-style: none; margin: 0; padding: 4px 0 0; }
.ch-row { position: relative; display: flex; gap: 10px; padding: 11px 14px; border-bottom: var(--hairline) solid var(--line-soft); }
.ch-row.is-on { background: var(--accent-soft); }
.ch-row.is-on::before { content: ''; position: absolute; inset-inline-start: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.ch-row-b { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ch-row-n { display: flex; justify-content: space-between; gap: 6px; font-size: 13px; color: var(--ink); }
.ch-row-n b { font-weight: 650; }
.ch-row-n time { font-size: 11px; color: var(--ink-3); }
.ch-row small { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-row-t { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-row-t > span.on { animation: ch-in 0.35s var(--ease) backwards; }
.ch-row-t em { font-style: normal; font-weight: 600; color: var(--accent-ink); }
.ch-row.is-unread .ch-row-t { font-weight: 650; color: var(--ink); }
.ch-row.is-unread .ch-row-t::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-inline-start: 6px; border-radius: 50%; background: var(--accent); vertical-align: 1px; }

.ch-thread { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--canvas); }
.ch-th-h { flex: none; display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 14px; border-bottom: var(--hairline) solid var(--line); background: var(--surface); }
.ch-th-n { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.ch-th-n b { font-size: 14px; font-weight: 650; color: var(--ink); }
.ch-th-n small { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-asg { display: inline-flex; align-items: center; height: 30px; padding: 0 10px; border-radius: 8px; border: var(--hairline) solid var(--line); background: var(--surface); font-size: 12px; font-weight: 600; color: var(--ink-2); }
.ch-asg > span { display: inline-flex; align-items: center; gap: 6px; }
.ch-asg > span.on { animation: ch-in 0.35s var(--ease) backwards; }
.ch-asg .lx-av { width: 18px; height: 18px; font-size: 9px; }
.ch-tool { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; border: var(--hairline) solid var(--line); background: var(--surface); color: var(--ink-3); }
.ch-tool .i { width: 15px; height: 15px; }
.ch-th { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 14px 18px; overflow: hidden; }
.ch-th > * { flex: none; }
.ch-th > .on { animation: ch-in 0.4s var(--ease) backwards; }
.ch-ev { justify-content: center; }
.ch-ev .i { width: 14px; height: 14px; }
.ch-note { animation: ch-in 0.4s var(--ease) backwards; }
.ch-note .i { width: 14px; height: 14px; flex: none; }
.ch-thread .lx-m > div { max-width: 74%; }
.ch-btn { margin: 0 !important; padding: 7px 12px !important; border-radius: 10px !important; background: var(--surface) !important; border: var(--hairline) solid var(--accent-line); text-align: center; font-weight: 650; color: var(--accent-ink) !important; }
.ch-link { margin: 0 !important; display: flex !important; align-items: center; gap: 6px; padding: 7px 12px !important; border-radius: 10px !important; background: var(--surface) !important; border: var(--hairline) solid var(--accent-line); font-weight: 650; white-space: nowrap; }
.ch-link .i { width: 13px; height: 13px; color: var(--ink-3); flex: none; }
.ch-link em { font-style: normal; font-weight: 500; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; }
.ch-cmp { flex: none; margin: 0 12px 12px; padding: 8px 10px; border-radius: 12px; border: var(--hairline) solid var(--line); background: var(--surface); box-shadow: var(--shadow-lift); }
.ch-cmp p { margin: 0; }
.ch-cmp-tabs { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--ink-3); }
.ch-cmp-tabs b { color: var(--ink); font-weight: 650; }
.ch-win { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-size: 11.5px; font-weight: 550; color: var(--ink-2); white-space: nowrap; }
.ch-win i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-bright); }
.ch-cmp-in { min-height: 36px; display: flex; align-items: center; font-size: 13px; color: var(--ink); }
.ch-ph { color: var(--ink-3); }
.ch-typed.on::after { content: ''; display: inline-block; width: 1.5px; height: 1.05em; margin-inline-start: 1px; vertical-align: -0.15em; background: var(--ink); }
.ch-cmp-bar { display: flex; align-items: center; gap: 12px; color: var(--ink-3); }
.ch-cmp-bar .i { width: 16px; height: 16px; }
.ch-send { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--accent); color: var(--hero-ink); transition: transform 0.15s var(--ease); }
.ch-send.tap { transform: scale(0.9); }

.ch-ct { display: flex; flex-direction: column; align-items: flex-start; min-height: 0; padding: 14px 18px; border-inline-start: var(--hairline) solid var(--line); background: var(--surface); overflow: hidden; }
.ch-ct-h { margin: 0 0 12px; font-size: 13px; font-weight: 650; color: var(--ink); }
.ch-big { width: 44px; height: 44px; font-size: 17px; }
.ch-ct-n { margin-top: 8px; font-size: 14.5px; font-weight: 650; color: var(--ink); }
.ch-ct > small { font-size: 12px; color: var(--ink-3); }
.ch-ct-link { margin: 6px 0 0; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--accent-ink); }
.ch-ct-link .i { width: 13px; height: 13px; }
.ch-ct .lx-k { margin: 14px 0 6px; }
.ch-auto { width: 100%; display: grid; gap: 8px; }
.ch-auto.on { animation: ch-in 0.35s var(--ease) backwards; }
.ch-auto .lx-auto .i { width: 14px; height: 14px; flex: none; }
.ch-auto.is-off .lx-auto .i { color: var(--step-amber); }
.ch-pause { justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 8px; border: var(--hairline) solid var(--line); background: var(--surface); box-shadow: var(--shadow-lift); font-size: 12px; font-weight: 650; color: var(--ink); transition: transform 0.15s var(--ease); }
.ch-pause .i { width: 14px; height: 14px; color: var(--ink-3); }
.ch-pause.tap { transform: scale(0.95); background: var(--rail); }
.ch-resume { justify-self: start; font-size: 12px; font-weight: 650; color: var(--accent-ink); }
.ch-conv { margin: 0; display: grid; gap: 2px; font-size: 12px; color: var(--ink-2); }
.ch-counts { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ch-act { margin: 0; width: 100%; display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink); }
.ch-act .i { width: 14px; height: 14px; color: var(--accent); flex: none; }
.ch-act span { flex: 1; min-width: 0; font-weight: 600; }
.ch-act em { font-style: normal; font-size: 11px; font-weight: 650; padding: 2px 8px; border-radius: var(--r-pill); background: var(--rail); color: var(--ink-3c); }
.ch-act em.is-ok { background: var(--accent-soft); color: var(--accent-ink); }
.ch-allruns { margin: 4px 0 0; font-size: 12px; font-weight: 600; color: var(--accent-ink); }

/* a phone (PLAN §2, Anant: everything fits the viewport; agent S, 2026-10-07): ONE surface at a time at full size, never
   scaled down: the chat at 260 x 316, her contact while the chat is paused, then the chat again; its name under it, then
   the caption line. Older messages step out as new ones land, so nothing is ever half cut. */
.ch-vcap { display: none; }
@media (max-width: 860px) {
  .ch-lx .ch-stage { display: grid; grid-template-columns: 260px; grid-template-rows: 316px auto; gap: 8px 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
  .ch-lx .ch-list { display: none; }
  .ch-lx .ch-thread, .ch-lx .ch-ct { grid-area: 1 / 1; height: 316px; min-height: 0; border: 0; border-radius: 16px; box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
  .ch-lx .ch-ct { visibility: hidden; padding: 12px 14px; }
  .ch-lx .ch-stage:has(.ch-b-sheet.on) .ch-ct { visibility: visible; }
  .ch-lx .ch-stage:has(.ch-b-sheet.on) .ch-thread { visibility: hidden; }
  .ch-lx .ch-ct > :nth-child(n+9) { display: none !important; }
  .ch-lx .ch-ct-h { margin-bottom: 8px; }
  .ch-lx .ch-ct .lx-k { margin: 10px 0 6px; }
  .ch-lx .ch-th-h { height: 48px; gap: 8px; padding: 0 10px; }
  .ch-lx .ch-th-h .ch-tool { display: none; }
  .ch-lx .ch-th-n small { font-size: 11px; }
  .ch-lx .ch-asg { height: 28px; padding: 0 8px; font-size: 11.5px; }
  .ch-lx .ch-th { padding: 10px; gap: 8px; }
  .ch-lx .ch-thread .lx-m > div { max-width: 86%; }
  .ch-lx .ch-th > :nth-child(-n+3),
  .ch-lx .ch-stage:has(.ch-m2.on) .ch-th > :nth-child(-n+5),
  .ch-lx .ch-stage:has(.ch-m3.on) .ch-th > :nth-child(-n+6),
  .ch-lx .ch-stage:has(.ch-m4.on) .ch-th > :nth-child(-n+7),
  .ch-lx .ch-stage:has(.ch-m5.on) .ch-th > :nth-child(-n+8),
  .ch-lx .ch-stage:has(.ch-m6.on) .ch-th > :nth-child(-n+9),
  .ch-lx .ch-stage:has(.ch-m8.on) .ch-th > :nth-child(-n+10),
  .ch-lx .ch-stage:has(.ch-m10.on) .ch-th > :nth-child(12) { display: none !important; }
  .ch-lx .ch-cmp { margin: 0 8px 8px; padding: 6px 8px; }
  .ch-lx .ch-cmp-tabs { gap: 10px; }
  .ch-lx .ch-cmp-in { min-height: 28px; font-size: 12.5px; }
  .ch-lx .ch-cmp-in > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ch-lx .ch-cmp-bar { margin-top: -30px; }
  .ch-lx .ch-cmp-bar .i:not(.ch-send .i) { display: none; }
  .ch-lx .ch-cmp-bar .ch-send .i { display: block; }
  .ch-lx .ch-cmp-in { padding-inline-end: 38px; }
  .ch-lx .ch-cmp-tabs > b, .ch-lx .ch-cmp-tabs > span { display: none; }
  .ch-lx .ch-cmp-tabs { min-height: 0; }
  .ch-lx .ch-win { margin-inline-start: 0; font-size: 11.5px; }
  .ch-lx .ch-day { font-size: 11.5px; }
  .ch-lx .ch-ev { display: block; text-align: center; line-height: 1.45; }
  .ch-lx .ch-ev .i { display: inline-block; vertical-align: -2px; margin-inline-end: 4px; }
  .ch-lx .ch-ct .lx-k { font-size: 11.5px; }
  .ch-lx .ch-asg .lx-av { width: 20px; height: 20px; font-size: 11px; }
  .ch-vcap { display: grid; justify-items: center; margin: 0; }
  .ch-vcap span { grid-area: 1 / 1; font-size: 11.5px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3c); text-align: center; }
  .ch-lx .ch-vcap { grid-row: 2; }
  .ch-line { margin-top: var(--s-3); min-height: 46px; align-items: start; }   /* two lines' room, so a caption that wraps moves nothing (H4) */
  .ch-line-t { height: auto; min-height: 34px; padding: 5px 14px 5px 8px; border-radius: 17px; font-size: 12.5px; line-height: 1.35; white-space: normal; text-align: center; }
  .ch-line-t .i { flex: none; }
}

/* ───────────── /messages: the steps' small pictures ───────────── */
.ch-mini { width: 100%; max-width: 260px; display: grid; gap: 8px; font-family: var(--font); text-align: start; }
.ch-mini .lx-m > div { max-width: 88%; }
.ch-mini .lx-m p { font-size: 12px; padding: 6px 10px; }
.ch-mlist { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 260px; display: grid; gap: 6px; }
.ch-mlist li { display: flex; gap: 9px; padding: 8px 10px; border-radius: 10px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.ch-mlist li:first-child { box-shadow: 0 0 0 1px var(--accent-line); background: var(--accent-soft); }
.ch-mlist .lx-av { width: 28px; height: 28px; font-size: 11px; }
.ch-mlist span:last-child { min-width: 0; display: grid; font-size: 11.5px; line-height: 1.3; color: var(--ink-2); }
.ch-mlist b { font-size: 12px; color: var(--ink); }
.ch-mlist small { font-size: 10.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-mlist i { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-mlist em { font-style: normal; font-weight: 600; color: var(--accent-ink); }
.ch-mpause { padding: 12px; border-radius: 12px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--shadow-lift); }
.ch-mpause .lx-k { margin: 0; }
.ch-mpause .lx-auto .i { width: 14px; height: 14px; flex: none; color: var(--step-amber); }
.ch-tr { display: grid; gap: 1px; margin-top: 6px; padding-top: 6px; border-top: var(--hairline) solid var(--line); }
.ch-tr em { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: 10.5px; color: var(--ink-3); }
.ch-tr em .i { width: 11px; height: 11px; }
.ch-mini .lx-m small .i { width: 11px; height: 11px; }

/* ───────────── /messages: the 24-hour window, three states ───────────── */
.ch-wins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); align-items: stretch; }
.ch-wcard { display: flex; flex-direction: column; gap: 10px; padding: var(--s-5); border-radius: var(--r-xl); background: var(--surface); border: var(--hairline) solid var(--line); box-shadow: var(--shadow-card); }
.band .ch-wcard { background: var(--canvas); }
.band .ch-wcard .ch-cmp, .band .ch-wcard .ch-sched, .band .ch-wcard .ch-closed { background: var(--surface); }
.ch-wv { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.ch-wk { margin: 0; display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 650; color: var(--ink); }
.ch-wk .i { width: 16px; height: 16px; }
.ch-wcard .lx-m p { font-size: 13px; }
.ch-cmp-s { margin: 0; }
.ch-sched { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; border: var(--hairline) solid var(--line); background: var(--surface); }
.ch-sched p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink); }
.ch-sched-h { display: flex; align-items: center; gap: 6px; font-size: 12px !important; font-weight: 650; color: var(--accent-ink) !important; }
.ch-sched-h .i { width: 14px; height: 14px; }
.ch-sched-a { display: flex; gap: 14px; font-size: 12px !important; font-weight: 600; color: var(--ink-3) !important; }
.ch-wnote { margin: 0; display: flex; gap: 6px; font-size: 12px; line-height: 1.45; color: var(--ink-3c); }
.ch-wnote .i { width: 14px; height: 14px; flex: none; margin-top: 1px; color: var(--ink-4); }
.ch-closed { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; border: var(--hairline) dashed var(--line); background: var(--canvas); }
.ch-closed b { font-size: 13.5px; font-weight: 650; color: var(--ink); }
.ch-closed p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.ch-wcap { margin: 0; padding-top: 10px; border-top: var(--hairline) solid var(--line-soft); font-size: var(--t-small); line-height: 1.5; color: var(--ink-3c); }
.ch-wcap b { color: var(--ink); font-weight: 650; margin-inline-end: 4px; }
@media (max-width: 960px) { .ch-wins { grid-template-columns: minmax(0, 1fr); max-width: 480px; margin-inline: auto; } }

/* ═════════════ the channel stages (800 x 680): the starts or the flow beside a phone ═════════════ */
.ch-igs .ch-stage > *, .ch-mss .ch-stage > * { position: absolute; }
.ch-starts { left: 20px; top: 10px; width: 440px; display: grid; gap: 10px; }
.ch-phone { left: 620px; top: 0; width: 300px !important; height: 640px !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); }
.ch-phone .ps-screen { border-radius: 41px; }
.ch-phone .ps-btn-a { top: 116px; } .ch-phone .ps-btn-b { top: 158px; } .ch-phone .ps-btn-c { top: 172px; }
.ch-sn { position: relative; width: 100%; }
/* the lit start or step: a ring that fades in as its own layer; the others step back onto the canvas, their words still AA */
.ch-sn::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-pop); opacity: 0; transition: opacity 0.35s var(--ease); pointer-events: none; }
.ch-stage:has(.ch-lit.on) .ch-sn:not(:has(.ch-lit.on)) { background: var(--canvas); box-shadow: none; }
.ch-sn:has(.ch-lit.on)::after { opacity: 1; }
.ch-done { margin-inline-start: 8px; width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--hero-ink); animation: ch-in 0.35s var(--ease) backwards; }
.ch-done .i { width: 12px; height: 12px; stroke-width: 3; }
/* /messenger-chatbot: the flow on the builder's canvas (the kit's flow(): the app's cards and wires). This sheet sizes the
   window, rings the step the chat is on (one at a time, in the step's own hue) and moves the camera with it */
.ch-flow { width: 570px; }
.ch-cvw { position: relative; height: 600px; overflow: hidden; border-radius: var(--r-xl); border: var(--hairline) solid var(--line); background-color: var(--canvas); background-image: radial-gradient(circle, color-mix(in srgb, var(--ink-4) 45%, transparent) 1px, transparent 1.2px); background-size: 16px 16px; }
.ch-fc::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; border: var(--hairline) solid var(--g); box-shadow: 0 0 0 3px color-mix(in srgb, var(--g) 18%, transparent); opacity: 0; transition: opacity 0.35s var(--ease); pointer-events: none; }
.ch-fc:has(> .ch-lit.on)::after { opacity: 1; }
.ch-mss:has([data-node='m'] > .ch-lit.on) .kit-flow { --pan-x: 328px; }
.ch-mss:has([data-node='q'] > .ch-lit.on) .kit-flow { --pan-x: 656px; }
.ch-mss:has(:is([data-node='t'], [data-node='c']) > .ch-lit.on) .kit-flow { --pan-x: 1046px; }

/* Instagram: the account's own inbox (Primary, General, Requests) */
.ch-ig { position: absolute; inset: 44px 0 0; padding: 4px 14px; color: #000; background: #fff; }
.ch-ig-h { display: flex; align-items: center; gap: 6px; height: 40px; }
.ch-ig-h b { font-size: 17px; font-weight: 700; }
.ch-ig-h .ig-g { width: 22px; height: 22px; }
.ch-ig-h .ch-ig-down { width: 14px; height: 14px; transform: rotate(-90deg); }
.ch-ig-h > .ig-g:first-child { width: 20px; height: 20px; }
.ch-ig-search { margin: 4px 0 10px; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: var(--ig-grey); font-size: 13px; color: var(--ig-meta); }
.ch-ig-search .ig-g { width: 16px; height: 16px; }
.ch-ig-tabs { margin: 0 0 4px; display: flex; gap: 22px; font-size: 14px; }
.ch-ig-tabs b { font-weight: 700; }
.ch-ig-tabs span { color: var(--ig-meta); font-weight: 600; }
.ch-ig-rows { list-style: none; margin: 0; padding: 0; }
.ch-ig-row { position: relative; display: flex; align-items: center; gap: 11px; padding: 7px 0; }
.ch-ig-row.on { animation: ch-in 0.45s var(--ease) backwards; }
.ch-ig-av { --c: var(--instagram); width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--c) 13%, #fff); color: color-mix(in srgb, var(--c) 72%, #000); font-size: 16px; font-weight: 700; }
.ch-ig-av.c2 { --c: var(--step-blue); }
.ch-ig-av.c3 { --c: var(--step-amber); color: color-mix(in srgb, var(--c) 58%, #000); }
.ch-ig-av.c4 { --c: var(--step-teal); color: color-mix(in srgb, var(--c) 62%, #000); }
.ch-ig-av.c5 { --c: var(--step-violet); }
.ch-ig-row p { flex: 1; min-width: 0; margin: 0; display: grid; font-size: 13px; line-height: 1.35; }
.ch-ig-pv { display: flex; min-width: 0; color: var(--ig-meta); white-space: nowrap; }
.ch-ig-pv > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ch-ig-pv > span b { color: #000; font-weight: 650; }
.ch-ig-pv time { flex: none; }
.ch-ig-row:has(.ch-ig-dot.on) p > b { font-weight: 700; }
.ch-ig-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--ig-blue); }

/* Messenger: the person's chat, drawn as Messenger draws it */
.ch-ms { position: absolute; inset: 44px 0 0; display: flex; flex-direction: column; color: #000; background: #fff; }
.ch-ms svg { width: 22px; height: 22px; fill: none; stroke: var(--facebook); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ch-ms-h { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 14px 10px; border-bottom: 1px solid #f0f0f0; box-shadow: 0 1px 2px rgb(0 0 0 / 0.04); }
.ch-ms-h img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.ch-ms-h p { flex: 1; min-width: 0; margin: 0; display: grid; line-height: 1.2; }
.ch-ms-h b { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-ms-h span { font-size: 11.5px; color: #65676b; }
.ch-ms-th { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 10px 12px; overflow: hidden; }
.ch-ms-th > * { flex: none; }
.ch-ms-intro { display: grid; justify-items: center; gap: 2px; margin-bottom: auto !important; padding-top: 22px; text-align: center; }
.ch-ms-intro img { width: 72px; height: 72px; margin-bottom: 8px; border-radius: 50%; object-fit: cover; }
.ch-ms-intro b { font-size: 17px; font-weight: 700; }
.ch-ms-intro span { font-size: 12px; color: #65676b; }
.ch-ms-m { display: flex; align-items: flex-end; gap: 6px; }
.ch-ms-m.on { animation: ch-in 0.4s var(--ease) backwards; }
.ch-ms-m.me { justify-content: flex-end; }
.ch-ms-m img { width: 24px; height: 24px; flex: none; border-radius: 50%; object-fit: cover; }
.ch-ms-m > div { max-width: 82%; display: grid; gap: 3px; }
.ch-ms-m p { margin: 0; padding: 8px 12px; border-radius: 18px; background: var(--fb-bubble); font-size: 13px; line-height: 1.35; color: #050505; }
.ch-ms-m.me p { max-width: 82%; background: var(--facebook); color: #fff; }
.ch-ms-btn { text-align: center; font-weight: 650; color: var(--facebook) !important; background: #fff !important; box-shadow: inset 0 0 0 1px #dadde1; }
.ch-ms-qr { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.ch-ms-qr.on { animation: ch-in 0.4s var(--ease) backwards; }
.ch-ms-qr span, .ch-ms-ice span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--facebook); font-size: 12.5px; font-weight: 600; color: var(--facebook); transition: transform 0.15s var(--ease); }
.ch-ms-qr span.tap, .ch-ms-ice span.tap { transform: scale(0.95); box-shadow: inset 0 0 0 2px var(--facebook); }   /* the pressed reply: a heavier ring, its words still 4.8:1 on white */
.ch-ms-mail .i { width: 14px; height: 14px; }
.ch-ms-ice { flex: none; display: grid; justify-items: end; gap: 6px; padding: 0 12px 10px; }
.ch-ms-c { flex: none; display: flex; align-items: center; gap: 12px; padding: 8px 14px 26px; }
.ch-ms-c p { flex: 1; margin: 0; padding: 7px 14px; border-radius: 20px; background: var(--fb-bubble); font-size: 13px; color: #65676b; }

/* a phone: the phone's screen alone at 260 x 316 (no frame, no status bar, no composer), its name under it, then the
   line that names the start or the step (agent S, 2026-10-07) */
@media (max-width: 860px) {
  .ch-igs .ch-box, .ch-mss .ch-box { padding: var(--s-4) var(--s-3) var(--s-3); border-radius: var(--r-xl); }
  .ch-igs .ch-box::before, .ch-mss .ch-box::before { display: none; }
  .ch-igs .ch-starts, .ch-mss .ch-starts { display: none; }
  .ch-phone { left: 0; top: 0; width: 260px !important; height: 316px !important; padding: 0; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
  .ch-phone .ps-btn, .ch-phone .ig-status { display: none; }
  .ch-phone .ps-screen { border-radius: 16px; background: #fff; }
  .ch-igs .ch-vcap, .ch-mss .ch-vcap { left: 0; top: 324px; width: 260px; }
  /* Instagram's inbox: rows of one height in a list four rows tall, so a row is shown whole or not at all */
  .ch-ig { inset: 0; padding: 2px 12px; }
  .ch-ig-h { height: 36px; }
  .ch-ig-h b { font-size: 15px; }
  .ch-ig-h .ig-g { width: 20px; height: 20px; }
  .ch-ig-search { margin: 2px 0 8px; padding: 6px 10px; font-size: 12px; }
  .ch-ig-tabs { margin: 0 0 4px; font-size: 13px; gap: 18px; }
  .ch-ig-rows { height: 208px; overflow: hidden; }
  .ch-ig-row { height: 52px; padding: 0; gap: 10px; }
  .ch-ig-av { width: 40px; height: 40px; font-size: 15px; }
  .ch-ig-row p { font-size: 12.5px; }
  /* Messenger: the chat without its composer; the page's intro and older turns step out as the booking goes on */
  .ch-ms { inset: 0; }
  .ch-ms-h { padding: 8px 12px; }
  .ch-ms-h span { font-size: 11px; }
  .ch-ms-c { display: none; }
  .ch-ms-th { padding: 8px 10px; }
  .ch-ms-intro { padding-top: 8px; }
  .ch-ms-intro img { width: 56px; height: 56px; margin-bottom: 4px; }
  .ch-ms-intro b { font-size: 15px; }
  .ch-ms-intro span { font-size: 11.5px; }
  .ch-stage:has(.ch-m3.on) .ch-ms-th > :nth-child(1),
  .ch-stage:has(.ch-m5.on) .ch-ms-th > :nth-child(-n+3),
  .ch-stage:has(.ch-m7.on) .ch-ms-th > :nth-child(-n+6) { display: none !important; }
  .ch-ms-ice { padding: 0 10px 10px; }
}

/* a short phone (320 x 568: 413px under the header and the trial bar, QA §1.2): every screen 36px shorter */
@media (max-width: 860px) and (max-height: 620px) {
  .ch-fit { --kit-h: 304px !important; }
  .ch-phone { height: 280px !important; }
  .ch-igs .ch-vcap, .ch-mss .ch-vcap { top: 288px; }
  .ch-ig-rows { height: 156px; }
  .ch-ms-intro img { display: none; }
  .ch-lx .ch-stage { grid-template-rows: 280px auto; }
  .ch-lx .ch-thread, .ch-lx .ch-ct { height: 280px; }
  .ch-lx .ch-ct .lx-k { margin-top: 8px; }
  .ch-lx .ch-stage:has(.ch-m1.on) .ch-th > :nth-child(4),
  .ch-lx .ch-stage:has(.ch-m4.on) .ch-th > :nth-child(-n+8),
  .ch-lx .ch-stage:has(.ch-m5.on) .ch-th > :nth-child(-n+9),
  .ch-lx .ch-stage:has(.ch-m6.on) .ch-th > :nth-child(-n+10),
  .ch-lx .ch-stage:has(.ch-m10.on) .ch-th > :nth-child(-n+11) { display: none !important; }
}

/* ───────────── the channel pages' small pictures ───────────── */
.ch-mconn, .ch-mlive { padding: 12px; border-radius: 12px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--shadow-lift); }
.ch-mbtn { margin: 0; display: flex; align-items: center; justify-content: center; gap: 8px; height: 34px; border-radius: 8px; background: var(--facebook); color: var(--hero-ink); font-size: 12.5px; font-weight: 650; }
.ch-mrow { margin: 0; display: flex; align-items: center; gap: 9px; }
.ch-mrow > .i { width: 22px; height: 22px; flex: none; }
.ch-mrow span { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.ch-mrow b { font-size: 12.5px; color: var(--ink); }
.ch-mrow small { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-mrow em { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: 11px; font-weight: 650; color: var(--accent-ink); }
.ch-mrow em .i { width: 12px; height: 12px; }
.ch-mnote { margin: 0; font-size: 11px; color: var(--ink-3); text-align: center; }
.ch-mstarts { list-style: none; margin: 0; padding: 0; gap: 6px; }
.ch-mstarts li { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 11px; border-radius: 9px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); font-size: 12px; font-weight: 600; color: var(--ink-2); }
.ch-mstarts li .i { width: 14px; height: 14px; color: var(--ink-4); }
.ch-mstarts li.is-on { box-shadow: 0 0 0 1px var(--accent-line), 0 0 0 3px var(--accent-soft); color: var(--ink); }
.ch-mstarts li.is-on .i { color: var(--accent); }
.ch-mflow { list-style: none; margin: 0; padding: 0; gap: 8px; }
.ch-mflow > li { display: grid; }
.ch-mnode.kit-node { width: 100%; }
.ch-mnode > .kit-dot { display: none; }   /* a strip of steps, not a wired canvas: no dots waiting for a wire */
.ch-mrow > .i:not([class*=brand]) { color: var(--step-violet); }
.ch-mlive-sw { gap: 7px !important; color: var(--accent-ink) !important; }
.ch-mlive-sw i { position: relative; width: 30px; height: 18px; border-radius: 9px; background: var(--accent); }
.ch-mlive-sw i::after { content: ''; position: absolute; right: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); }
.ch-mstat { margin: 10px 0 0; padding-top: 10px; border-top: var(--hairline) solid var(--line-soft); display: flex; gap: 18px; }
.ch-mstat span { display: grid; font-size: 11px; color: var(--ink-3); }
.ch-mstat b { font-size: 17px; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) { .ch-fig *, .ch-fig *::before, .ch-fig *::after, .ch-line-t { animation: none !important; transition: none !important; } }
.ch-thread .lx-m > div { min-width: 0; }
.ch-thread .lx-m p { overflow-wrap: anywhere; }
.ch-link { max-width: 100%; overflow: hidden; }
.ch-wcard .ch-cmp-tabs { flex-wrap: wrap; row-gap: 4px; }
.ch-wcard .ch-win { white-space: normal; }
.ch-day { margin: 2px 0; align-self: center; padding: 2px 10px; border-radius: var(--r-pill); background: var(--rail); font-size: 11px; font-weight: 600; color: var(--ink-3c); }
.ch-stage:has(.ch-m1.on) .ch-u1 { display: none !important; }
.ch-stage:has(.ch-m2.on) .ch-u2 { display: none !important; }
.ch-stage:has(.ch-m3.on) .ch-u3 { display: none !important; }
.ch-stage:has(.ch-m4.on) .ch-u4 { display: none !important; }
.ch-stage:has(.ch-m5.on) .ch-u5 { display: none !important; }
.ch-stage:has(.ch-m6.on) .ch-u6 { display: none !important; }
.ch-stage:has(.ch-m7.on) .ch-u7 { display: none !important; }
.ch-stage:has(.ch-m8.on) .ch-u8 { display: none !important; }
.ch-stage:has(.ch-m9.on) .ch-u9 { display: none !important; }
.ch-stage:has(.ch-m10.on) .ch-u10 { display: none !important; }
.ch-stage:has(.ch-m11.on) .ch-u11 { display: none !important; }
.ch-stage:has(.ch-m12.on) .ch-u12 { display: 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) {
  .ch-lx .ch-thread, .ch-lx .ch-ct { z-index: 0; transition: visibility 0s linear 0.3s, z-index 0s linear 0.3s; }
  .ch-lx .ch-stage:has(.ch-b-sheet.on) .ch-ct, .ch-lx .ch-stage:not(:has(.ch-b-sheet.on)) .ch-thread { transition-delay: 0s; z-index: 2; animation: ch-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 ch-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). */
  .ch-fig.is-first, .ch-fig.is-first *, .ch-fig.is-first *::before, .ch-fig.is-first *::after { transition: none !important; animation-duration: 0s !important; animation-delay: 0s !important; }
  /* the loop's restart: the last surface holds until the first is in; the stage never fades to nothing (QA pass 3) */
  .ch-fig.is-reset .ch-stage { opacity: 1; transition: none; }
}

/* ───────────── hardening (agent H4, 2026-10-07) ─────────────
   Right to left (KIT.md § 6, rules 13 to 15): a depiction keeps the left-to-right geometry it was drawn in; the kit does
   that for the hero's visual and the steps' small pictures, this does it for the three drawn chats of the 24-hour window.
   The scene's caption line and the surface's name are page text and follow the page. */
[dir='rtl'] .ch-wv { direction: ltr; }
[dir='rtl'] .ch-wv :is(p, small, b, span, em) { unicode-bidi: plaintext; }
[dir='rtl'] .ch-ms-h > svg:first-child { transform: scaleX(-1); }   /* Messenger's back arrow points the way the reader came from (LF) */
[dir='rtl'] :is(.ch-line, .ch-vcap) { direction: rtl; }
/* the DM home's avatar letters (.lx-av, system.css) measured 2.4 to 4.1:1 on their tints: darkened here to pass AA */
.ch-stage .lx-av.a1, .ch-mini .lx-av.a1, .ch-mlist .lx-av.a1, .ch-wv .lx-av.a1 { color: color-mix(in srgb, var(--facebook) 82%, #000); }
.ch-stage .lx-av.a2, .ch-mini .lx-av.a2, .ch-mlist .lx-av.a2, .ch-wv .lx-av.a2 { color: color-mix(in srgb, var(--instagram) 72%, #000); }
.ch-stage .lx-av.a3, .ch-mini .lx-av.a3, .ch-mlist .lx-av.a3, .ch-wv .lx-av.a3 { color: color-mix(in srgb, var(--step-amber) 58%, #000); }