@xenosystem/agent-conversation 0.1.35 → 0.1.37

package/src/transcript.css

@@ -0,0 +1,585 @@
+/* =============================================================================
+   The XENO Agent transcript — D10 of `XENO AGENT PANEL - SPEC.md`, as CSS.
+   -----------------------------------------------------------------------------
+   Ported from the Turn Modes Bench (v20), geometry for geometry: the clock line, the rail
+   (28 px rows, 12 px apart, the marker's box EARNED), details as children on branches, asks as
+   cards that stop the rail, the sub-turn's tree, the fold to a receipt, both step modes.
+
+   Every class is `xa-` prefixed and every rule lives under `.xa-transcript`, so nothing here
+   reaches a host's document — this stylesheet ships with a panel that mounts at runtime.
+
+   One ink, two themes: every grey is the ink at an alpha, so the light theme is one flip of
+   `--xa-ink` and the six text greys. A colour that only exists in one theme is a defect.
+   ============================================================================= */
+
+/* the tokens are shared with the composer (`composer.css`), which is the same ink on the same plate.
+   `.xa-app` is the panel's root and carries them for everything it holds; `.xa-transcript` and
+   `.xa-dock` keep them too, because the trays and the vocabulary sheet mount those alone. */
+.xa-app, .xa-transcript, .xa-dock {
+  color-scheme: dark;
+  --xa-ink: 255, 255, 255;
+  /* the panel paints its OWN ground and plate — the bench's, in both themes — rather than borrowing the
+     host's page: a tile reads the same in every host, and a host whose light page is a shade greyer
+     (`--xeno-page-bg: #ececee`) does not tint the conversation */
+  --xa-ground: #08080a;
+  --xa-plate: #161618;
+  --xa-box: #141416;
+  --xa-code: #0e0e10;
+  --xa-well: #111113;
+  --xa-menu: #101011;
+  --xa-ink-text: #e6e6ea;
+  --xa-send: #e8e8ec;
+  --xa-send-hover: #ffffff;
+  --xa-line: rgba(var(--xa-ink), 0.08);
+  --xa-line-soft: rgba(var(--xa-ink), 0.07);
+  --xa-line-tip: rgba(var(--xa-ink), 0.10);
+  --xa-wash: rgba(var(--xa-ink), 0.03);
+  --xa-wash-hover: rgba(var(--xa-ink), 0.05);
+  --xa-t1: #f4f4f4;
+  --xa-t2: #d8d8de;
+  --xa-t3: #acacb4;
+  --xa-t4: #7f7f86;
+  --xa-t5: #6c6c74;
+  --xa-t6: #5b5b62;
+  --xa-label: rgba(244, 244, 244, 0.32);
+  --xa-amber: #d99a4e;
+  --xa-green: #6fbf73;
+  --xa-red: #d76f6f;
+  --xa-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
+  --xa-ease-out: cubic-bezier(0.4, 0, 0.8, 0.4);
+  --xa-glide: cubic-bezier(0.3, 0, 0.2, 1);
+  /* the composer's own tokens, from the locked prototype */
+  --xa-tile: #1c1c1f;
+  --xa-tile-img: #232326;
+  --xa-line-menu: rgba(var(--xa-ink), 0.09);
+  --xa-seg-on: rgba(var(--xa-ink), 0.12);
+  --xa-amber-wash: rgba(217, 154, 78, 0.08);
+  --xa-amber-line: rgba(217, 154, 78, 0.26);
+  --xa-amber-dim: #8a7a63;
+}
+/* the panel's typography — the bench sets it on its page body; a panel that mounts inside another
+   product cannot rely on the host's body, so the root declares it */
+.xa-app, .xa-transcript {
+  color: var(--xa-t2);
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
+  font-size: 13px;
+  line-height: 20px;
+  font-feature-settings: 'cv02' 1, 'cv03' 1, 'cv04' 1, 'cv11' 1, 'ss01' 1;
+  letter-spacing: -0.006em;
+  -webkit-font-smoothing: antialiased;
+  tab-size: 8;
+  text-size-adjust: auto;
+}
+/* the frame: a column — the thread scrolling inside it, the dock pinned to its bottom edge (bench `.app`) */
+.xa-app { display: flex; flex-direction: column; position: relative; flex: 1; min-height: 0; background: var(--xa-ground); overflow: hidden; user-select: none; }
+/* the scroller (bench `.transcript`) — only as the frame's own child: trays and standalone sheets
+   also carry `.xa-transcript` for its scope, and must not become scrollers */
+.xa-app > .xa-transcript { flex: 1; min-height: 0; overflow-y: auto; padding: 26px 16px 14px; scrollbar-width: thin; scrollbar-color: rgba(var(--xa-ink), 0.12) transparent; }
+.xa-app > .xa-transcript::-webkit-scrollbar { width: 8px; }
+.xa-app > .xa-transcript::-webkit-scrollbar-thumb { background: rgba(var(--xa-ink), 0.12); border-radius: 2px; }
+/* the thread: the column the messages stand in (bench `.thread`) */
+.xa-thread { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
+:root[data-theme='light'] .xa-app, :root[data-theme='light'] .xa-transcript, :root[data-theme='light'] .xa-dock {
+  color-scheme: light;
+  --xa-ink: 0, 0, 0;
+  --xa-ground: #f5f5f6;
+  --xa-plate: #ffffff;
+  --xa-box: #ffffff;
+  --xa-code: #f3f3f5;
+  --xa-well: #f0f0f2;
+  --xa-menu: #ffffff;
+  --xa-ink-text: #1a1a1e;
+  --xa-send: #111114;
+  --xa-send-hover: #000000;
+  --xa-line: rgba(0, 0, 0, 0.10);
+  --xa-line-soft: rgba(0, 0, 0, 0.08);
+  --xa-line-tip: rgba(0, 0, 0, 0.13);
+  --xa-wash: rgba(0, 0, 0, 0.03);
+  --xa-wash-hover: rgba(0, 0, 0, 0.05);
+  --xa-t1: #111114;
+  --xa-t2: #2a2a30;
+  --xa-t3: #4b4b53;
+  --xa-t4: #6f6f78;
+  --xa-t5: #8b8b94;
+  --xa-t6: #a3a3ab;
+  --xa-label: rgba(17, 17, 20, 0.4);
+  --xa-green: #3f9a45;
+  --xa-red: #c24f4f;
+  --xa-amber: #b57a2c;
+  --xa-tile: #f0f0f2;
+  --xa-tile-img: #e8e8ec;
+  --xa-amber-wash: rgba(181, 122, 44, 0.10);
+  --xa-amber-line: rgba(181, 122, 44, 0.30);
+  --xa-amber-dim: #8a6f3f;
+}
+
+/* The bench's element resets (`* {}`, `button {}`, `svg {}`) at the bench's OWN specificity. Scoped with a
+   plain class they became (0,1,1) and beat every single-class rule — `.xa-tobottom` lost its background,
+   border and colour to `.xa-app button`. `:where()` scopes them to the panel and adds nothing. */
+/* the bench's `*` — elements only; a pseudo-element keeps the UA's content-box, as it does there */
+:where(.xa-app, .xa-transcript, .xa-dock) * { box-sizing: border-box; }
+:where(.xa-app, .xa-transcript, .xa-dock) button { font: inherit; color: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
+/* Two things a HOST's preflight (Tailwind's) writes that the bench never does, put back at one class
+   of specificity so the panel reads the same in every host: pseudo-elements keep the UA's
+   content-box, and a button keeps the UA's `appearance: auto` — `button` reads the same and is not
+   the same value. */
+.xa-app *::before, .xa-app *::after, .xa-transcript *::before, .xa-transcript *::after, .xa-dock *::before, .xa-dock *::after { box-sizing: content-box; }
+.xa-app button, .xa-transcript button, .xa-dock button { appearance: auto; }
+:where(.xa-app, .xa-transcript, .xa-dock) button:focus-visible { outline: 1px solid rgba(var(--xa-ink), 0.45); outline-offset: 2px; }
+.xa-app svg, .xa-transcript svg, .xa-dock svg { flex: none; display: block; vertical-align: baseline; }
+:where(.xa-app, .xa-transcript, .xa-dock) .xeno-element {
+  display: block;
+  /* The canonical renderer remains the source; this consumer reset matches the bench's baseline
+     SVG metrics without changing the shared element declaration or geometry. */
+  line-height: inherit;
+  vertical-align: baseline;
+  transition: all 0s ease 0s;
+}
+/* the bench's motion rule: a person who asked for less motion gets none — no rise, no glide, no breathing */
+@media (prefers-reduced-motion: reduce) {
+  :where(.xa-app, .xa-transcript, .xa-dock), :where(.xa-app, .xa-transcript, .xa-dock) *, :where(.xa-app, .xa-transcript, .xa-dock) *::before, :where(.xa-app, .xa-transcript, .xa-dock) *::after { animation: none !important; transition: none !important; }
+}
+/* back to the live end of the thread — shows only when you have scrolled up (bench `.tobottom`) */
+.xa-tobottom { position: absolute; right: 22px; z-index: 5; width: 24px; height: 24px; border-radius: 4px; background: var(--xa-plate); border: 1px solid var(--xa-line-tip); color: var(--xa-t3); opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity 160ms linear, transform 160ms var(--xa-ease); }
+.xa-tobottom.xa-show { opacity: 1; pointer-events: auto; transform: none; }
+.xa-tobottom:hover { color: var(--xa-t1); background: var(--xa-menu); }
+.xa-tobottom svg { width: 12px; height: 12px; }
+.xa-num { font-variant-numeric: tabular-nums; }
+.xa-mono { font-family: ui-monospace, 'Cascadia Mono', 'JetBrains Mono', Menlo, Consolas, monospace; }
+.xa-label { font-size: 10px; line-height: 12px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--xa-label); }
+
+/* ── motion: the composer's pair, at the transcript's scale ─────────────── */
+@keyframes xa-breathe { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
+@keyframes xa-rise { 0% { transform: translateY(10px); opacity: 0; filter: blur(3px); } 45% { transform: translateY(4px); opacity: 0; filter: blur(3px); } 100% { transform: none; opacity: 1; filter: blur(0); } }
+@keyframes xa-sink { 0% { transform: none; opacity: 1; filter: blur(0); } 55% { transform: translateY(4px); opacity: 0; filter: blur(3px); } 100% { transform: translateY(10px); opacity: 0; filter: blur(3px); } }
+@keyframes xa-raildraw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
+@keyframes xa-drawx { from { transform: scaleX(0); } to { transform: scaleX(1); } }
+@keyframes xa-dotout { to { opacity: 0; filter: blur(3px); transform: scale(0.6); } }
+@keyframes xa-slidein { from { transform: translateX(-16px); opacity: 0; filter: blur(3px); } to { transform: none; opacity: 1; filter: blur(0); } }
+@keyframes xa-frombelow { from { transform: translateY(14px); opacity: 0; filter: blur(2px); } to { transform: none; opacity: 1; filter: blur(0); } }
+@keyframes xa-toabove { to { transform: translateY(-14px); opacity: 0; filter: blur(2px); } }
+@keyframes xa-blurout { to { opacity: 0; filter: blur(3px); } }
+
+/* the glyph of a LIVE step plays its icon-motion on a loop — the trigger xeno-elements does not ship yet
+   (hover and selection are its two); until it does, this is the one rule the transcript adds to the set */
+.xa-transcript .xa-row.xa-now .xeno-element[data-glyph],
+.xa-transcript .xa-row.xa-ask:not(.xa-ok):not(.xa-bad) .xeno-element[data-glyph],
+.xa-transcript .xa-cur .xa-gl .xeno-element[data-glyph] {
+  animation: var(--xeno-icon-anim) var(--xeno-icon-dur) var(--xeno-icon-ease) infinite;
+}
+.xa-transcript .xa-row.xa-now .xeno-element[data-glyph] .xeno-part,
+.xa-transcript .xa-row.xa-ask:not(.xa-ok):not(.xa-bad) .xeno-element[data-glyph] .xeno-part,
+.xa-transcript .xa-cur .xa-gl .xeno-element[data-glyph] .xeno-part {
+  animation: var(--part-anim) var(--part-dur) var(--xeno-icon-ease) infinite;
+  vector-effect: var(--part-vfx, none);
+}
+
+/* ── messages ─────────────────────────────────────────────────────────── */
+.xa-user { align-self: flex-end; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; max-width: 82%; animation: xa-rise 280ms var(--xa-ease) both; }
+.xa-bubble { padding: 9px 12px; background: var(--xa-wash-hover); border: 1px solid var(--xa-line-soft); border-radius: 6px; color: var(--xa-ink-text); overflow-wrap: normal; }
+.xa-bubble.xa-queued { background: var(--xa-wash); border-style: dashed; }
+.xa-bubble img { display: block; max-width: 100%; border-radius: 4px; border: 1px solid var(--xa-line-soft); margin-bottom: 6px; }
+/* what you can do to a message shows when you reach for it */
+.xa-acts { display: flex; align-items: center; gap: 2px; height: 18px; opacity: 0; transition: opacity 160ms linear; }
+.xa-user:hover .xa-acts, .xa-agent:hover .xa-acts, .xa-acts.xa-on, .xa-acts:focus-within { opacity: 1; }
+.xa-acts .xa-t { font-size: 10px; color: var(--xa-t6); padding: 0 6px; }
+.xa-acts .xa-b { height: 18px; padding: 0 6px; gap: 5px; border-radius: 3px; font-size: 10px; color: var(--xa-t5); }
+.xa-acts .xa-b:hover { color: var(--xa-t2); background: var(--xa-wash); }
+.xa-acts .xa-b:disabled { opacity: 0.4; cursor: not-allowed; }
+.xa-acts .xa-b svg { width: 11px; height: 11px; }
+.xa-acts .xa-b.xa-done { color: var(--xa-green); }
+.xa-acts .xa-b.xa-failed { color: var(--xa-red); }
+.xa-acts .xa-b.xa-tog.xa-on { color: var(--xa-t1); }
+.xa-acts .xa-vr { width: 1px; height: 10px; margin: 0 4px; background: rgba(var(--xa-ink), 0.12); }
+.xa-chip { display: inline-flex; align-items: center; gap: 5px; vertical-align: top; margin-top: 1px; height: 18px; padding: 0 6px 0 5px; background: rgba(var(--xa-ink), 0.07); border: 1px solid var(--xa-line-soft); border-radius: 3px; font-size: 12px; line-height: 16px; color: var(--xa-t1); white-space: nowrap; }
+.xa-chip svg { width: 12px; height: 12px; color: var(--xa-t4); }
+/* a day boundary in the thread */
+.xa-sep { display: flex; align-items: center; gap: 10px; }
+.xa-sep::before, .xa-sep::after { content: ''; flex: 1; height: 1px; background: var(--xa-line-soft); }
+.xa-agent { display: flex; flex-direction: column; gap: 10px; }
+/* the reply's markdown — the agent-interface's vocabulary: square bullets, quiet headings, a bordered table */
+.xa-body { color: var(--xa-t2); max-width: 66ch; }
+.xa-body p { margin: 0 0 8px; } .xa-body p:last-child { margin: 0; }
+.xa-body h1, .xa-body h2, .xa-body h3, .xa-body h4 { margin: 4px 0 6px; font-size: 13px; line-height: 20px; font-weight: 600; color: var(--xa-t1); }
+.xa-body ul, .xa-body ol { margin: 0 0 8px; padding: 0; list-style: none; }
+.xa-body ul li, .xa-body ol li { position: relative; padding-left: 14px; margin: 0 0 3px; }
+.xa-body ul li::before { content: ''; position: absolute; left: 2px; top: 8px; width: 4px; height: 4px; background: var(--xa-t5); border-radius: 1px; }
+.xa-body ol { counter-reset: xa-ol; }
+.xa-body ol li { padding-left: 20px; counter-increment: xa-ol; }
+.xa-body ol li::before { content: counter(xa-ol) '.'; position: absolute; left: 0; top: 0; font-size: 11px; color: var(--xa-t5); font-variant-numeric: tabular-nums; }
+.xa-body strong { font-weight: 600; color: var(--xa-t1); }
+.xa-body a { color: var(--xa-t1); text-decoration: underline; text-decoration-color: rgba(var(--xa-ink), 0.3); text-underline-offset: 2px; }
+.xa-body blockquote { margin: 0 0 8px; padding: 6px 0 6px 11px; border-left: 2px solid var(--xa-line-tip); color: var(--xa-t3); }
+.xa-body table { border-collapse: separate; border-spacing: 0; margin: 2px 0 8px; font-size: 12px; line-height: 17px; border: 1px solid var(--xa-line-soft); border-radius: 4px; overflow: hidden; }
+.xa-body th { text-align: left; padding: 5px 10px; font-size: 10px; line-height: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--xa-label); background: var(--xa-well); border-bottom: 1px solid var(--xa-line-soft); }
+.xa-body td { padding: 5px 10px; color: var(--xa-t3); border-bottom: 1px solid rgba(var(--xa-ink), 0.05); vertical-align: top; }
+.xa-body tr:last-child td { border-bottom: 0; }
+.xa-body th + th, .xa-body td + td { border-left: 1px solid rgba(var(--xa-ink), 0.05); }
+.xa-body td:first-child { color: var(--xa-t2); white-space: nowrap; }
+.xa-body code, .xa-row code, .xa-card code { font-family: ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace; font-size: 11.5px; padding: 1px 4px; background: rgba(var(--xa-ink), 0.06); border-radius: 3px; color: var(--xa-t1); }
+.xa-body hr { border: 0; border-top: 1px solid var(--xa-line-soft); margin: 8px 0; }
+/* the reply arrives as it is written; the caret is the same 6px state square, breathing */
+.xa-body .xa-caret { display: inline-block; width: 6px; height: 6px; margin-left: 3px; vertical-align: -1px; background: var(--xa-t2); border-radius: 1px; animation: xa-breathe 1.4s ease-in-out infinite; }
+.xa-body .xa-cite { display: inline-flex; align-items: center; justify-content: center; min-width: 14px; height: 14px; padding: 0 3px; margin: 0 1px; vertical-align: 2px; border-radius: 2px; background: rgba(var(--xa-ink), 0.07); border: 1px solid var(--xa-line-soft); font-size: 9px; line-height: 12px; font-weight: 500; color: var(--xa-t3); cursor: default; transition: background 120ms linear, color 120ms linear; }
+.xa-body .xa-cite:hover { background: rgba(var(--xa-ink), 0.14); color: var(--xa-t1); }
+/* a code block in the reply: a header that says what it is and what you can do */
+.xa-code { max-width: 66ch; border: 1px solid var(--xa-line-soft); border-radius: 4px; overflow: hidden; margin: 0 0 8px; animation: xa-rise 260ms var(--xa-ease) both; }
+.xa-code .xa-hd { display: flex; align-items: center; height: 24px; padding: 0 4px 0 9px; background: var(--xa-well); border-bottom: 1px solid rgba(var(--xa-ink), 0.05); font-size: 10px; color: var(--xa-t5); }
+.xa-code .xa-hd .xa-b { margin-left: auto; height: 18px; padding: 0 6px; gap: 5px; border-radius: 3px; font-size: 10px; color: var(--xa-t5); }
+.xa-code .xa-hd .xa-b:hover { color: var(--xa-t2); background: var(--xa-wash); }
+.xa-code .xa-hd .xa-b svg { width: 11px; height: 11px; }
+.xa-code pre { margin: 0; padding: 8px 9px; background: var(--xa-code); font-size: 11px; line-height: 16px; color: var(--xa-t3); white-space: pre; overflow-x: auto; scrollbar-width: thin; scrollbar-color: rgba(var(--xa-ink), 0.12) transparent; }
+.xa-code pre code { padding: 0; background: none; font-size: inherit; color: inherit; }
+/* the sources stay with the answer once the rail has folded: a line the citations point at */
+.xa-srcline { display: flex; align-items: center; gap: 8px; height: 22px; cursor: pointer; font-size: 11px; color: var(--xa-t4); }
+.xa-srcline:hover { color: var(--xa-t2); }
+.xa-srcline .xa-stack { display: flex; }
+.xa-srcline .xa-stack .xa-fav { width: 14px; height: 14px; margin-left: -4px; border-radius: 2px; border: 1px solid var(--xa-line-tip); background: linear-gradient(135deg, #2a2a2f, #1c1c1f); box-shadow: 0 0 0 1px var(--xa-ground); }
+.xa-srcline .xa-stack .xa-fav:first-child { margin-left: 0; }
+.xa-srcline .xa-chev { color: var(--xa-t6); transition: transform 160ms var(--xa-ease); }
+.xa-srcline.xa-open .xa-chev { transform: rotate(90deg); }
+.xa-srcwrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 220ms var(--xa-ease); }
+.xa-srcwrap.xa-open { grid-template-rows: 1fr; }
+.xa-srcwrap > div { min-height: 0; overflow: hidden; }
+.xa-srcwrap .xa-detail { margin: 0; animation: none; }
+/* the action row under a reply: what it cost, when, and what you can do with it */
+.xa-rfoot .xa-meta { margin-left: auto; font-size: 10px; color: var(--xa-t6); }
+.xa-rfoot .xa-meta .xa-vr { display: inline-block; vertical-align: -1px; }
+/* what you might say next — the reply offers it, the composer takes it */
+.xa-pills { display: flex; flex-wrap: wrap; gap: 6px; }
+.xa-pills button { height: 24px; padding: 0 9px; border-radius: 4px; font-size: 11px; font-weight: 500; color: var(--xa-t3); background: var(--xa-wash); border: 1px solid var(--xa-line-soft); animation: xa-rise 260ms var(--xa-ease) both; animation-delay: var(--xa-d, 0ms); }
+.xa-pills button:hover { color: var(--xa-t1); background: var(--xa-wash-hover); border-color: var(--xa-line-tip); }
+
+/* ── the turn: Z ──────────────────────────────────────────────────────── */
+.xa-turn { display: flex; flex-direction: column; gap: 2px; }
+.xa-line { display: flex; align-items: center; gap: 10px; min-height: 22px; animation: xa-rise 280ms var(--xa-ease) both; animation-delay: 160ms; }
+.xa-line .xa-dot { flex: none; width: 6px; height: 6px; margin: 0 5px 0 6px; border-radius: 1px; background: var(--xa-t3); animation: xa-breathe 1.4s ease-in-out infinite; transition: background 160ms linear; }
+.xa-turn:not(.xa-live) .xa-line .xa-dot { animation: none; background: var(--xa-t5); }
+.xa-turn.xa-settle .xa-line .xa-dot { animation: xa-dotout 200ms var(--xa-ease-out) both; }
+.xa-line .xa-dot.xa-gone { display: none; }
+.xa-line .xa-read { font-size: 11.5px; line-height: 16px; color: var(--xa-t4); white-space: nowrap; }
+.xa-line .xa-read .xa-n { color: var(--xa-t6); }
+.xa-turn:not(.xa-live) .xa-line { cursor: pointer; }
+.xa-turn:not(.xa-live) .xa-line:hover .xa-read { color: var(--xa-t3); }
+.xa-line .xa-chev { flex: none; color: var(--xa-t6); opacity: 0; transition: transform 160ms var(--xa-ease), opacity 160ms linear; }
+.xa-turn:not(.xa-live) .xa-line .xa-chev { opacity: 1; }
+.xa-turn.xa-open .xa-line .xa-chev { transform: rotate(90deg); }
+/* collapsed steps: while it works the rail stays folded and the clock line carries the current step —
+   "Working for 4s | Clicked Message @Lil Bro" — the text fading out on the right when it is long */
+.xa-line .xa-vr { display: none; flex: none; width: 1px; height: 10px; background: rgba(var(--xa-ink), 0.12); }
+.xa-line .xa-cur { display: none; align-items: center; gap: 7px; flex: 1 1 0; min-width: 0; height: 16px; overflow: hidden; font-size: 11.5px; line-height: 16px; color: var(--xa-t4); mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent 100%); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent 100%); }
+.xa-line .xa-cur .xa-mono { font-size: 11px; }
+/* the first step slides out from behind the clock — glyph, then its words; every later step replaces the
+   pair: the glyph rises from below as the old one leaves upward, the words come out from behind the glyph */
+.xa-line .xa-cur .xa-slot { position: relative; flex: none; width: 12px; height: 16px; overflow: hidden; }
+.xa-line .xa-cur .xa-gl { position: absolute; left: 0; top: 2px; width: 12px; height: 12px; display: flex; align-items: center; justify-content: center; color: var(--xa-t4); }
+.xa-line .xa-cur .xa-gl svg { width: 12px; height: 12px; }
+.xa-line .xa-cur .xa-gl .xa-sq { width: 4px; height: 4px; background: var(--xa-t5); border-radius: 1px; }
+.xa-line .xa-cur .xa-gl.xa-first { animation: xa-slidein 280ms var(--xa-ease) both; }
+.xa-line .xa-cur .xa-gl.xa-in { animation: xa-frombelow 240ms var(--xa-ease) both; }
+.xa-line .xa-cur .xa-gl.xa-out { animation: xa-toabove 200ms var(--xa-ease-out) both; }
+.xa-line .xa-cur .xa-tx { position: relative; flex: 1 1 0; min-width: 0; height: 16px; overflow: hidden; }
+.xa-line .xa-cur .xa-t { position: absolute; left: 0; top: 0; white-space: nowrap; }
+.xa-line .xa-cur .xa-t.xa-first { animation: xa-slidein 280ms var(--xa-ease) both; animation-delay: 120ms; }
+.xa-line .xa-cur .xa-t.xa-in { animation: xa-slidein 260ms var(--xa-ease) both; animation-delay: 90ms; }
+.xa-line .xa-cur .xa-t.xa-out { animation: xa-blurout 160ms var(--xa-ease-out) both; }
+.xa-collapsed .xa-turn.xa-live:not(.xa-open):not(.xa-done) .xa-line .xa-vr { display: block; }
+.xa-collapsed .xa-turn.xa-live:not(.xa-open):not(.xa-done) .xa-line .xa-cur { display: flex; }
+.xa-collapsed .xa-turn.xa-live:not(.xa-open):not(.xa-asking) .xa-railwrap { grid-template-rows: 0fr; }
+/* an ask surfaces alone: its row and its card, the rest of the rail stays folded */
+.xa-collapsed .xa-turn.xa-live.xa-asking:not(.xa-open) .xa-rail .xa-row:not(.xa-ask):not(.xa-sub),
+.xa-collapsed .xa-turn.xa-live.xa-asking:not(.xa-open) .xa-rail .xa-row.xa-ask.xa-ok,
+.xa-collapsed .xa-turn.xa-live.xa-asking:not(.xa-open) .xa-rail .xa-row.xa-ask.xa-bad { display: none; }
+.xa-collapsed .xa-turn.xa-live.xa-asking:not(.xa-open) .xa-rail .xa-row.xa-ask::before { display: none; }
+.xa-collapsed .xa-turn.xa-live.xa-asking:not(.xa-open) .xa-line .xa-vr,
+.xa-collapsed .xa-turn.xa-live.xa-asking:not(.xa-open) .xa-line .xa-cur { display: none; }
+.xa-collapsed .xa-turn.xa-live .xa-line { cursor: pointer; }
+.xa-collapsed .xa-turn.xa-live.xa-asking:not(.xa-open) .xa-rail .xa-row.xa-sub { display: flex; }
+.xa-collapsed .xa-turn.xa-live.xa-asking:not(.xa-open) .xa-rail .xa-row.xa-sub.xa-folded { display: none; }
+.xa-line .xa-shots { margin-left: auto; display: flex; gap: 4px; }
+.xa-railwrap { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 220ms var(--xa-ease); }
+.xa-turn:not(.xa-live):not(.xa-open) .xa-railwrap { grid-template-rows: 0fr; }
+.xa-rail { overflow: hidden; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
+.xa-row { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 9px; min-height: 28px; font-size: 11.5px; line-height: 16px; color: var(--xa-t4); animation: xa-rise 240ms var(--xa-ease) both; }
+.xa-row::before { content: ''; position: absolute; left: 8.5px; top: 23px; bottom: -17px; width: 1px; background: var(--xa-line); transform-origin: top; animation: xa-raildraw 200ms linear both; }
+.xa-row:last-child::before { display: none; }
+.xa-row .xa-ic { position: relative; flex: none; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; border-radius: 3px; background: var(--xa-box); border: 1px solid var(--xa-line-soft); color: var(--xa-t5); transition: background 160ms var(--xa-ease), border-color 160ms var(--xa-ease); }
+.xa-row .xa-ic svg { width: 12px; height: 12px; }
+.xa-row.xa-note .xa-ic { background: var(--xa-ground); border-color: var(--xa-line-tip); }
+.xa-row.xa-note .xa-ic::after { content: ''; width: 4px; height: 4px; background: var(--xa-t5); border-radius: 1px; }
+.xa-row.xa-now .xa-ic { color: var(--xa-t2); animation: xa-breathe 1.4s ease-in-out infinite; }
+.xa-row.xa-now .xa-ic, .xa-row.xa-ask:not(.xa-ok):not(.xa-bad) .xa-ic { background: transparent; border-color: transparent; }
+.xa-row.xa-ask .xa-ic { color: var(--xa-t1); animation: xa-breathe 1.4s ease-in-out infinite; }
+.xa-row.xa-ask.xa-ok .xa-ic, .xa-row.xa-ask.xa-bad .xa-ic { animation: none; }
+.xa-row.xa-ask.xa-ok .xa-ic { color: var(--xa-green); border-color: rgba(111, 191, 115, 0.45); background: rgba(111, 191, 115, 0.08); }
+.xa-row.xa-ask.xa-bad .xa-ic, .xa-row.xa-bad .xa-ic { color: var(--xa-red); border-color: rgba(215, 111, 111, 0.45); background: rgba(215, 111, 111, 0.08); }
+.xa-row.xa-warn .xa-ic { color: var(--xa-amber); border-color: rgba(217, 154, 78, 0.45); background: rgba(217, 154, 78, 0.08); }
+.xa-row.xa-stop .xa-ic { color: var(--xa-t3); border-color: var(--xa-line-tip); background: var(--xa-well); }
+.xa-row.xa-note, .xa-row.xa-think { color: var(--xa-t2); animation-duration: 300ms; }
+.xa-row .xa-verb { flex: none; }
+.xa-row .xa-obj { flex: 1 1 0; color: var(--xa-t3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.xa-row .xa-res { margin-left: auto; flex: none; font-size: 10px; color: var(--xa-t6); transition: opacity 160ms linear; }
+.xa-row.xa-now .xa-res.xa-late { opacity: 0; }
+.xa-row .xa-what { color: var(--xa-t2); }
+.xa-row .xa-why { flex: 1 1 0; min-width: 0; color: var(--xa-t4); }
+.xa-row.xa-bad, .xa-row.xa-warn, .xa-row.xa-stop { color: var(--xa-t3); }
+.xa-row .xa-act { flex: none; height: 20px; padding: 0 8px; border-radius: 3px; font-size: 10.5px; font-weight: 500; color: var(--xa-t2); background: rgba(var(--xa-ink), 0.06); border: 1px solid var(--xa-line-soft); }
+.xa-row .xa-act:hover { color: var(--xa-t1); background: rgba(var(--xa-ink), 0.1); }
+.xa-row .xa-act:disabled { opacity: 0.45; cursor: not-allowed; }
+.xa-row .xa-chev { flex: none; color: var(--xa-t6); transition: transform 160ms var(--xa-ease); }
+.xa-row.xa-open .xa-chev { transform: rotate(90deg); }
+.xa-frame { display: inline-block; width: 34px; height: 21px; border-radius: 3px; border: 1px solid var(--xa-line-tip); background: var(--xa-well); object-fit: cover; }
+/* the note row: the agent's own sentence between steps — markdown, a line or two */
+.xa-row.xa-note .xa-body { flex: 1 1 0; min-width: 0; font-size: 11.5px; line-height: 16px; color: var(--xa-t2); }
+.xa-row.xa-note .xa-body p { margin: 0 0 4px; } .xa-row.xa-note .xa-body p:last-child { margin: 0; }
+
+/* thinking: one line — "Thinking · <the current thought>" — the phrase swapping as the reasoning moves,
+   nothing boxed, nothing masked. Done, it reads "Thought for Ns ›" and opens to the full text. */
+.xa-row.xa-think .xa-head { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; cursor: pointer; }
+.xa-row.xa-think .xa-head .xa-what { flex: none; }
+.xa-row.xa-think .xa-head .xa-dot2 { flex: none; color: var(--xa-t6); }
+.xa-row.xa-think .xa-head .xa-curthought { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--xa-t4); animation: xa-rise 280ms var(--xa-ease) both; }
+.xa-row.xa-think:not(.xa-now) .xa-head .xa-dot2, .xa-row.xa-think:not(.xa-now) .xa-head .xa-curthought { display: none; }
+.xa-row.xa-think .xa-fullwrap { flex-basis: 100%; margin: -9px 0 0 43px; display: grid; grid-template-rows: 0fr; transition: grid-template-rows 220ms var(--xa-ease), margin 220ms var(--xa-ease); }
+.xa-row.xa-think.xa-open .xa-fullwrap { grid-template-rows: 1fr; margin: 0 0 2px 43px; }
+.xa-row.xa-think .xa-full { min-height: 0; overflow: hidden; font-size: 11.5px; line-height: 16px; color: var(--xa-t4); }
+.xa-row.xa-think .xa-full p { margin: 0 0 4px; } .xa-row.xa-think .xa-full p:last-child { margin: 0; }
+/* the plan row keeps the list folded under it for the record; the list itself rides the composer */
+.xa-row.xa-plan .xa-head { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; cursor: pointer; }
+.xa-planwrap { flex-basis: 100%; margin: -9px 0 0 43px; display: grid; grid-template-rows: 0fr; transition: grid-template-rows 220ms var(--xa-ease), margin 220ms var(--xa-ease); }
+.xa-row.xa-plan.xa-open .xa-planwrap { grid-template-rows: 1fr; margin: 0 0 0 43px; }
+.xa-planwrap > div { min-height: 0; overflow: hidden; }
+.xa-plan-list { display: flex; flex-direction: column; padding-bottom: 2px; }
+.xa-plan-list .xa-item, .xa-tasks .xa-item { display: flex; align-items: center; gap: 9px; min-height: 22px; font-size: 11px; color: var(--xa-t4); }
+.xa-plan-list .xa-item .xa-sq, .xa-tasks .xa-item .xa-sq { flex: none; width: 6px; height: 6px; border-radius: 1px; border: 1px solid var(--xa-t5); background: none; transition: background 160ms linear, border-color 160ms linear; }
+.xa-plan-list .xa-item.xa-now, .xa-tasks .xa-item.xa-now { color: var(--xa-t2); }
+.xa-plan-list .xa-item.xa-now .xa-sq, .xa-tasks .xa-item.xa-now .xa-sq { border-color: var(--xa-t2); background: var(--xa-t2); animation: xa-breathe 1.4s ease-in-out infinite; }
+.xa-plan-list .xa-item.xa-done, .xa-tasks .xa-item.xa-done { color: var(--xa-t5); }
+.xa-plan-list .xa-item.xa-done .xa-sq, .xa-tasks .xa-item.xa-done .xa-sq { border-color: var(--xa-t4); background: var(--xa-t4); animation: none; }
+.xa-plan-list .xa-item.xa-blocked .xa-sq, .xa-tasks .xa-item.xa-blocked .xa-sq { border-color: var(--xa-amber); background: rgba(217, 154, 78, 0.4); }
+
+/* a sub-turn: a turn inside a row — the bot, the mode as a badge, the brief, its own clock, its own
+   rail nested under it, folding like a turn and reopening from its row (D11) */
+.xa-row .xa-mode, .xa-line .xa-cur .xa-mode { display: inline-flex; align-items: center; flex: none; height: 16px; padding: 0 5px; border-radius: 3px; background: rgba(var(--xa-ink), 0.06); font-size: 10px; line-height: 1; font-weight: 500; color: var(--xa-t4); }
+.xa-row.xa-sub .xa-head { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
+.xa-row.xa-sub.xa-folded .xa-head { cursor: pointer; }
+.xa-row.xa-sub .xa-head .xa-obj { flex: 1 1 0; }
+.xa-row.xa-sub .xa-head .xa-res { margin-left: auto; }
+.xa-subwrap { flex-basis: 100%; margin: 0; display: grid; grid-template-rows: 1fr; transition: grid-template-rows 220ms var(--xa-ease), margin-top 220ms var(--xa-ease); }
+.xa-row.xa-sub.xa-folded:not(.xa-open) .xa-subwrap { grid-template-rows: 0fr; margin-top: -9px; }
+.xa-subwrap > span { display: block; min-height: 0; overflow: hidden; }
+.xa-subwrap > span > .xa-rail { padding: 2px 0 2px 27px; overflow: visible; }
+  /* the nested rows are CHILDREN of the sub-turn, and the delegation attaches ONCE: the parent's line branches into the
+   sub-turn's FIRST row, and every row after it hangs on the sub-turn's own rail under that one — the delegate's trail,
+   never a set of siblings each hooked to the parent. The tree at every depth: one branch per child. */
+.xa-subwrap > span > .xa-rail > .xa-row:first-child::after, .xa-detail.xa-nest > .xa-rail > .xa-row:first-child::after { content: ''; position: absolute; left: -18.5px; top: 13.5px; width: 18.5px; height: 1px; background: var(--xa-line); pointer-events: none; transform-origin: left center; animation: xa-drawx 160ms linear both; }
+.xa-detail.xa-nest > .xa-rail > .xa-row:first-child::after { left: -34.5px; width: 34.5px; }
+/* a rail's last row draws no line of its own — so when the sub-turn IS the parent's last row, the piece from the
+   parent's marker down to the first nested row's branch is drawn by the wrapper, outside the fold's clip */
+.xa-subwrap, .xa-row .xa-dwrap { position: relative; }
+.xa-row:last-child > .xa-subwrap::before { content: ''; position: absolute; left: 8.5px; top: -14px; height: 30px; width: 1px; background: var(--xa-line); transform-origin: top; animation: xa-raildraw 200ms linear both; }
+.xa-row.xa-sub.xa-folded:not(.xa-open) > .xa-subwrap::before { display: none; }
+/* an ask pending as a sub-turn's FIRST row: the parent's line runs on past its branch, down into the card, and
+   branches into it — the card is that row's child. A later pending ask hangs on the sub-turn's own rail, which stops
+   at it, as a pending ask stops any rail. */
+.xa-subwrap > span > .xa-rail > .xa-row.xa-ask:first-child:not(.xa-ok):not(.xa-bad) .xa-cardslot::before { transform: scaleX(1); }
+.xa-subwrap > span > .xa-rail > .xa-row.xa-ask:first-child:not(.xa-ok):not(.xa-bad) .xa-cardslot::after { content: ''; position: absolute; left: -18.5px; top: -23px; height: calc(50% + 23px); width: 1px; background: var(--xa-line); transform-origin: top; animation: xa-raildraw 200ms linear both; }
+/* collapsed mode shows the pending ask alone, so it is the first row on screen whatever its place in the rail */
+.xa-collapsed .xa-turn.xa-live.xa-asking:not(.xa-open) .xa-subwrap > span > .xa-rail > .xa-row.xa-ask::after { content: ''; position: absolute; left: -18.5px; top: 13.5px; width: 18.5px; height: 1px; background: var(--xa-line); pointer-events: none; }
+.xa-collapsed .xa-turn.xa-live.xa-asking:not(.xa-open) .xa-subwrap .xa-row.xa-ask:not(.xa-ok):not(.xa-bad) .xa-cardslot::before { transform: scaleX(1); }
+.xa-collapsed .xa-turn.xa-live.xa-asking:not(.xa-open) .xa-subwrap .xa-row.xa-ask:not(.xa-ok):not(.xa-bad) .xa-cardslot::after { content: ''; position: absolute; left: -18.5px; top: -23px; height: calc(50% + 23px); width: 1px; background: var(--xa-line); transform-origin: top; animation: xa-raildraw 200ms linear both; }
+
+/* ── what opens under a row ───────────────────────────────────────────── */
+/* a detail is open while its step is current, folded once the step is behind — the row keeps the count,
+   a chevron says it opens, a click reopens it. Everything in it hangs on the rail by a branch. */
+.xa-row .xa-dwrap { flex-basis: 100%; display: grid; grid-template-rows: 1fr; transition: grid-template-rows 220ms var(--xa-ease), margin-top 220ms var(--xa-ease); }
+.xa-row:not(.xa-now):not(.xa-open) .xa-dwrap { grid-template-rows: 0fr; margin-top: -9px; }
+.xa-row .xa-dwrap > div { min-height: 0; overflow: hidden; }
+.xa-row.xa-hasd { cursor: default; }
+.xa-row.xa-hasd:not(.xa-now) { cursor: pointer; }
+.xa-row.xa-hasd .xa-chev { flex: none; color: var(--xa-t6); opacity: 0; transition: transform 160ms var(--xa-ease), opacity 160ms linear; }
+.xa-row.xa-hasd:not(.xa-now) .xa-chev { opacity: 1; }
+.xa-row .xa-detail { flex-basis: 100%; margin: 0 0 2px 43px; min-width: 0; animation: xa-rise 240ms var(--xa-ease) both; animation-delay: 120ms; }
+.xa-rail .xa-detail.xa-list .xa-it, .xa-rail .xa-detail.xa-sources .xa-it, .xa-rail .xa-detail.xa-matches .xa-file, .xa-rail .xa-detail.xa-output, .xa-rail .xa-detail.xa-diff, .xa-rail .xa-detail.xa-prose, .xa-rail .xa-detail.xa-slice { position: relative; }
+.xa-rail .xa-detail.xa-list .xa-it::before, .xa-rail .xa-detail.xa-sources .xa-it::before, .xa-rail .xa-detail.xa-matches .xa-file::before { content: ''; position: absolute; left: -34.5px; top: 50%; width: 34.5px; height: 1px; background: var(--xa-line); }
+/* a block detail (output, diff, prose, a slice) hangs by ONE branch at its mid-height. The branch is drawn by the
+   detail's wrapper, not by the block: the block clips its overflow for its corners, and a branch that starts 35px
+   outside a clipping box is a branch nobody sees. */
+.xa-row .xa-dwrap > div { position: relative; }
+.xa-row .xa-dwrap > div:has(> :is(.xa-detail.xa-output, .xa-detail.xa-diff, .xa-detail.xa-prose, .xa-detail.xa-slice))::before { content: ''; position: absolute; left: 8.5px; top: calc(50% - 2px); width: 34.5px; height: 1px; background: var(--xa-line); }
+/* when the row is the rail's LAST — a live step always is — the row draws no line of its own, so the spine its
+   children hang on is drawn here: a piece from the marker to the detail's top (outside the fold's clip), then each
+   child its own segment, the last ending at its branch. Scoped to :last-child so nothing is ever drawn twice. */
+.xa-row:last-child > .xa-dwrap::before { content: ''; position: absolute; left: 8.5px; top: -14px; height: 14px; width: 1px; background: var(--xa-line); transform-origin: top; animation: xa-raildraw 200ms linear both; }
+.xa-row:last-child:has(> .xa-dwrap > div > .xa-detail.xa-nest) > .xa-dwrap::before { height: 30px; }
+.xa-row:not(.xa-now):not(.xa-open) > .xa-dwrap::before { display: none; }
+.xa-row:last-child > .xa-dwrap > div:has(> :is(.xa-detail.xa-output, .xa-detail.xa-diff, .xa-detail.xa-prose, .xa-detail.xa-slice))::after { content: ''; position: absolute; left: 8.5px; top: 0; height: calc(50% - 2px); width: 1px; background: var(--xa-line); }
+.xa-row:last-child > .xa-dwrap > div > .xa-detail.xa-list .xa-it::after, .xa-row:last-child > .xa-dwrap > div > .xa-detail.xa-sources .xa-it::after { content: ''; position: absolute; left: -34.5px; top: 0; bottom: 0; width: 1px; background: var(--xa-line); pointer-events: none; }
+.xa-row:last-child > .xa-dwrap > div > .xa-detail.xa-list .xa-it:last-child::after, .xa-row:last-child > .xa-dwrap > div > .xa-detail.xa-sources .xa-it:last-child::after { bottom: 50%; }
+.xa-detail.xa-matches .xa-grp { position: relative; }
+.xa-row:last-child > .xa-dwrap > div > .xa-detail.xa-matches .xa-grp::after { content: ''; position: absolute; left: -34.5px; top: 0; bottom: 0; width: 1px; background: var(--xa-line); pointer-events: none; }
+.xa-row:last-child > .xa-dwrap > div > .xa-detail.xa-matches .xa-grp:last-child::after { bottom: auto; height: 12px; }
+.xa-detail.xa-output, .xa-detail.xa-diff pre, .xa-card .xa-bd pre, .xa-detail.xa-slice pre { scrollbar-width: thin; scrollbar-color: rgba(var(--xa-ink), 0.12) transparent; }
+.xa-detail.xa-output, .xa-detail.xa-slice { border: 1px solid rgba(var(--xa-ink), 0.06); border-radius: 4px; overflow: hidden; background: var(--xa-well); }
+.xa-detail.xa-output pre, .xa-detail.xa-slice pre { margin: 0; padding: 7px 9px; font-size: 11px; line-height: 16px; color: var(--xa-t3); white-space: pre; overflow-x: auto; max-height: 320px; overflow-y: auto; }
+.xa-detail.xa-output pre.xa-err { color: var(--xa-red); border-top: 1px solid rgba(var(--xa-ink), 0.05); }
+.xa-detail.xa-slice pre .xa-gut { display: inline-block; width: 34px; margin-right: 10px; text-align: right; color: var(--xa-t6); }
+.xa-detail.xa-slice .xa-more { padding: 0 9px 6px; font-size: 10px; color: var(--xa-t6); }
+.xa-detail.xa-prose { font-size: 11.5px; line-height: 16px; color: var(--xa-t3); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 320px; overflow-y: auto; }
+.xa-detail .xa-add { color: var(--xa-green); } .xa-detail .xa-del { color: var(--xa-red); }
+/* the footer of a detail: what it cost and where it ran */
+.xa-detail .xa-foot { display: flex; gap: 12px; height: 22px; align-items: center; padding: 0 9px; border-top: 1px solid rgba(var(--xa-ink), 0.05); font-size: 10px; color: var(--xa-t6); }
+.xa-detail .xa-foot .xa-cwd { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.xa-detail.xa-diff { border: 1px solid rgba(var(--xa-ink), 0.06); border-radius: 4px; overflow: hidden; }
+.xa-detail.xa-diff .xa-hunk { display: flex; align-items: center; gap: 8px; padding: 5px 9px; background: var(--xa-well); border-bottom: 1px solid rgba(var(--xa-ink), 0.05); font-size: 10.5px; color: var(--xa-t5); }
+.xa-detail.xa-diff .xa-hunk .xa-keep { margin-left: auto; display: inline-flex; gap: 8px; }
+.xa-detail.xa-diff .xa-hunk .xa-keep button { font-size: 10px; color: var(--xa-t5); }
+.xa-detail.xa-diff .xa-hunk .xa-keep button:hover { color: var(--xa-t2); }
+.xa-detail.xa-diff .xa-hunk .xa-keep button:disabled { opacity: 0.45; cursor: not-allowed; }
+.xa-detail.xa-diff .xa-hk .xa-hstate { margin-left: auto; font-size: 10px; color: var(--xa-t5); display: none; }
+.xa-detail.xa-diff .xa-hk.xa-kept .xa-hstate, .xa-detail.xa-diff .xa-hk.xa-undone .xa-hstate { display: inline; }
+.xa-detail.xa-diff .xa-hk.xa-kept .xa-keep, .xa-detail.xa-diff .xa-hk.xa-undone .xa-keep { display: none; }
+.xa-detail.xa-diff .xa-hk.xa-undone pre .xa-add { text-decoration: line-through; opacity: 0.45; }
+.xa-detail.xa-diff pre { margin: 0; padding: 6px 9px; background: var(--xa-code); font-size: 11px; line-height: 16px; color: var(--xa-t3); white-space: pre; overflow-x: auto; max-height: 320px; overflow-y: auto; }
+.xa-detail.xa-list { display: flex; flex-direction: column; }
+.xa-detail.xa-list .xa-it { display: flex; align-items: center; gap: 8px; min-height: 22px; font-size: 11px; color: var(--xa-t4); }
+.xa-detail.xa-list .xa-it .xa-k { color: var(--xa-t3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.xa-detail.xa-list .xa-it .xa-where { margin-left: auto; flex: none; font-size: 10px; color: var(--xa-t6); }
+.xa-detail.xa-list .xa-it button.xa-k { text-align: left; justify-content: flex-start; }
+.xa-detail.xa-list .xa-it button.xa-k:hover { color: var(--xa-t1); }
+/* search results: grouped by file, each match with its line and what is on it */
+.xa-detail.xa-matches { display: flex; flex-direction: column; }
+.xa-detail.xa-matches .xa-file { display: flex; align-items: center; gap: 8px; min-height: 24px; font-size: 11px; color: var(--xa-t3); }
+.xa-detail.xa-matches .xa-file .xa-fg { flex: none; display: flex; color: var(--xa-t5); }
+.xa-detail.xa-matches .xa-file .xa-fg svg { width: 12px; height: 12px; }
+.xa-detail.xa-matches .xa-file .xa-k { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.xa-detail.xa-matches .xa-file .xa-where { margin-left: auto; flex: none; font-size: 10px; color: var(--xa-t6); }
+/* the matches hang on the FILE the way the file hangs on the rail: a line dropped from under the file's glyph to the
+   last match, and a branch from it to each line number (the tree at every depth — a child is drawn on its parent) */
+.xa-detail.xa-matches .xa-lns { position: relative; }
+.xa-detail.xa-matches .xa-lns::before { content: ''; position: absolute; left: 5.5px; top: -5px; bottom: 10px; width: 1px; background: var(--xa-line); transform-origin: top; animation: xa-raildraw 200ms linear both; }
+.xa-detail.xa-matches .xa-ln { display: flex; align-items: center; gap: 10px; min-height: 20px; padding-left: 6px; font-size: 11px; }
+.xa-detail.xa-matches .xa-ln .xa-n { flex: none; display: flex; align-items: center; justify-content: flex-end; width: 48px; color: var(--xa-t6); }
+.xa-detail.xa-matches .xa-ln .xa-n::before { content: ''; flex: 1 1 auto; height: 1px; margin-right: 6px; background: var(--xa-line); transform-origin: left center; animation: xa-drawx 160ms linear 200ms both; }
+.xa-detail.xa-matches .xa-ln .xa-s { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; color: var(--xa-t5); }
+/* sources: numbered so the reply can point at them */
+.xa-detail.xa-sources { display: flex; flex-direction: column; }
+.xa-detail.xa-sources .xa-it { display: flex; align-items: center; gap: 8px; min-height: 24px; font-size: 11px; color: var(--xa-t4); border-radius: 3px; transition: background 120ms linear; }
+.xa-detail.xa-sources .xa-it:hover, .xa-detail.xa-sources .xa-it.xa-hi { background: var(--xa-wash); }
+.xa-detail.xa-sources .xa-it .xa-n { flex: none; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; border-radius: 2px; background: rgba(var(--xa-ink), 0.07); border: 1px solid var(--xa-line-soft); font-size: 9px; font-weight: 500; color: var(--xa-t3); }
+.xa-detail.xa-sources .xa-it .xa-fav { flex: none; width: 14px; height: 14px; border-radius: 2px; border: 1px solid var(--xa-line-tip); background: linear-gradient(135deg, #2a2a2f, #1c1c1f); }
+.xa-detail.xa-sources .xa-it .xa-k { color: var(--xa-t3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; justify-content: flex-start; }
+.xa-detail.xa-sources .xa-it .xa-where { margin-left: auto; flex: none; font-size: 10px; color: var(--xa-t6); }
+.xa-detail.xa-sources .xa-it .xa-go { flex: none; width: 16px; color: var(--xa-t6); opacity: 0; transition: opacity 120ms linear; }
+.xa-detail.xa-sources .xa-it:hover .xa-go { opacity: 1; }
+.xa-detail.xa-sources .xa-it .xa-go svg { width: 10px; height: 10px; }
+.xa-detail.xa-frames { display: flex; gap: 4px; }
+.xa-detail.xa-frames .xa-frame { width: auto; height: 84px; max-width: 100%; }
+.xa-detail.xa-nest > .xa-rail { gap: 12px; padding: 2px 0; overflow: visible; }
+
+/* ── cards: A's card, Z's cadence — Cancel left, the way forward right ─── */
+.xa-row .xa-brk { flex: 0 0 100%; height: 0; }
+.xa-row .xa-brk + .xa-cardslot { margin-top: -9px; }
+.xa-cardslot { position: relative; flex-basis: 100%; max-width: 420px; margin: 0 0 2px 27px; transform: translateX(-27px); transition: transform 280ms var(--xa-glide); }
+.xa-row.xa-ask.xa-ok .xa-cardslot, .xa-row.xa-ask.xa-bad .xa-cardslot { transform: none; }
+/* the rail stops at an ask — the loop waits here. Answered and followed by the next step, the line comes down
+   and connects: a TRANSITION to a static end state, so an interrupted draw can only snap complete, never stop short */
+.xa-row.xa-ask::before { animation: none; transform: scaleY(0); transition: transform 200ms linear; }
+.xa-row.xa-ask.xa-joined::before { transform: scaleY(1); }
+.xa-cardslot::before { content: ''; position: absolute; left: -18.5px; top: 50%; width: 18.5px; height: 1px; background: var(--xa-line); transform-origin: left center; transform: scaleX(0); transition: transform 180ms linear 200ms; }
+.xa-row.xa-ask.xa-joined .xa-cardslot::before { transform: scaleX(1); }
+.xa-card { background: var(--xa-plate); border: 1px solid var(--xa-line-soft); border-radius: 6px; overflow: hidden; animation: xa-rise 260ms var(--xa-ease) both; animation-delay: 150ms; }
+.xa-card .xa-hd, .xa-card .xa-bd, .xa-card .xa-ft { animation: xa-rise 220ms var(--xa-ease) both; }
+.xa-card .xa-hd { animation-delay: 210ms; } .xa-card .xa-bd { animation-delay: 270ms; } .xa-card .xa-ft { animation-delay: 350ms; }
+.xa-card .xa-hd { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 11px; font-size: 11.5px; font-weight: 500; color: var(--xa-t2); border-bottom: 1px solid var(--xa-line-soft); }
+.xa-card .xa-hd svg { width: 12px; height: 12px; color: var(--xa-t4); }
+.xa-card .xa-hd .xa-right { margin-left: auto; font-size: 10px; font-weight: 400; color: var(--xa-t6); }
+.xa-card .xa-bd { padding: 9px 11px 10px; font-size: 11.5px; line-height: 17px; color: var(--xa-t4); }
+.xa-card .xa-bd .xa-what { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; color: var(--xa-t2); }
+.xa-card .xa-bd .xa-what .xa-sq { flex: none; width: 6px; height: 6px; background: var(--xa-t3); border-radius: 1px; animation: xa-breathe 1.4s ease-in-out infinite; }
+.xa-card .xa-bd .xa-what .xa-scope { margin-left: auto; font-size: 10px; color: var(--xa-t6); }
+.xa-card.xa-ok .xa-bd .xa-what .xa-sq { animation: none; background: var(--xa-green); }
+.xa-card.xa-bad .xa-bd .xa-what .xa-sq { animation: none; background: var(--xa-red); }
+.xa-card .xa-bd pre { margin: 6px 0 0; padding: 6px 9px; background: var(--xa-well); border: 1px solid rgba(var(--xa-ink), 0.06); border-radius: 4px; font-size: 11px; line-height: 16px; color: var(--xa-t3); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 200px; overflow: auto; }
+.xa-card .xa-bd .xa-opts { display: flex; flex-direction: column; margin-top: 4px; }
+.xa-card .xa-bd .xa-opt { display: flex; align-items: center; justify-content: flex-start; gap: 9px; width: 100%; min-height: 24px; padding: 0 4px; margin: 0 -4px; border-radius: 3px; font-size: 11.5px; color: var(--xa-t3); text-align: left; }
+.xa-card .xa-bd .xa-opt:hover { background: var(--xa-wash-hover); color: var(--xa-t1); }
+.xa-card .xa-bd .xa-opt .xa-osq { flex: none; width: 6px; height: 6px; border: 1px solid var(--xa-t5); border-radius: 1px; transition: background 120ms linear, border-color 120ms linear; }
+.xa-card .xa-bd .xa-opt.xa-on { color: var(--xa-t1); }
+.xa-card .xa-bd .xa-opt.xa-on .xa-osq { background: var(--xa-t2); border-color: var(--xa-t2); }
+.xa-card.xa-answered .xa-bd .xa-opt { pointer-events: none; }
+.xa-card .xa-bd .xa-free { display: flex; gap: 6px; margin-top: 8px; }
+.xa-card .xa-bd .xa-free input { flex: 1; min-width: 0; height: 26px; padding: 0 8px; border-radius: 4px; border: 1px solid var(--xa-line-soft); background: var(--xa-well); color: var(--xa-t1); font: inherit; font-size: 11.5px; outline: none; }
+.xa-card .xa-bd .xa-free input:focus { border-color: var(--xa-line-tip); }
+.xa-card .xa-ft { display: flex; align-items: center; gap: 6px; padding: 8px 11px; border-top: 1px solid var(--xa-line-soft); }
+.xa-card .xa-ft .xa-cacts { display: flex; flex: 1; justify-content: space-between; gap: 6px; }
+.xa-card .xa-ft .xa-hint { font-size: 10px; color: var(--xa-t6); align-self: center; }
+/* a key name inherits the card's type wherever it sits — a host's preflight would hand kbd a monospace face */
+.xa-card .xa-ft kbd { font: inherit; font-feature-settings: inherit; }
+.xa-card .xa-bd .xa-plan-list { margin-top: 2px; }
+.xa-card .xa-ft .xa-b { height: 24px; padding: 0 9px; gap: 7px; border-radius: 4px; font-size: 11px; font-weight: 500; color: var(--xa-t3); background: rgba(var(--xa-ink), 0.05); }
+.xa-card .xa-ft .xa-b:hover { color: var(--xa-t1); background: var(--xa-wash-hover); }
+.xa-card .xa-ft .xa-b:disabled { opacity: 0.45; cursor: not-allowed; }
+.xa-card .xa-ft .xa-b.xa-main, .xa-card .xa-ft .xa-b.xa-main:hover { color: var(--xa-ground); background: var(--xa-send); }
+.xa-card .xa-ft .xa-b.xa-main:hover { background: var(--xa-send-hover); }
+.xa-card .xa-ft .xa-b kbd { font: inherit; font-size: 10px; opacity: 0.6; }
+.xa-card .xa-ft .xa-more { position: relative; }
+.xa-card .xa-ft .xa-menu { position: absolute; left: 0; bottom: 100%; margin-bottom: 4px; min-width: 190px; padding: 4px; border-radius: 4px; background: var(--xa-menu); border: 1px solid var(--xa-line-tip); display: flex; flex-direction: column; gap: 1px; z-index: 5; }
+.xa-card .xa-ft .xa-menu button { width: 100%; height: 24px; padding: 0 8px; justify-content: flex-start; border-radius: 3px; font-size: 11px; color: var(--xa-t3); text-align: left; }
+.xa-card .xa-ft .xa-menu button:hover { color: var(--xa-t1); background: var(--xa-wash-hover); }
+.xa-card .xa-ft .xa-verdict { display: none; font-size: 11px; color: var(--xa-t4); }
+.xa-card.xa-answered .xa-ft .xa-cacts { display: none; }
+.xa-card.xa-answered .xa-ft .xa-verdict { display: inline; animation: xa-rise 280ms var(--xa-ease) both; animation-delay: 170ms; }
+.xa-card .xa-error { padding: 0 11px 8px; font-size: 10.5px; color: var(--xa-red); }
+
+/* ── the receipt: consequences only, each with a way back ─────────────── */
+.xa-files { max-width: 420px; background: var(--xa-plate); border: 1px solid var(--xa-line-soft); border-radius: 6px; overflow: hidden; animation: xa-rise 280ms var(--xa-ease) both; animation-delay: 200ms; }
+.xa-files .xa-hd { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 11px; border-bottom: 1px solid var(--xa-line-soft); }
+.xa-files .xa-hd .xa-ic { flex: none; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; border-radius: 3px; background: var(--xa-box); border: 1px solid var(--xa-line-soft); color: var(--xa-t4); }
+.xa-files .xa-hd .xa-ic svg { width: 12px; height: 12px; }
+.xa-files .xa-hd .xa-t { font-size: 11.5px; font-weight: 500; color: var(--xa-t2); }
+.xa-files .xa-hd .xa-t .xa-n { font-weight: 400; color: var(--xa-t5); margin-left: 6px; }
+.xa-files .xa-hd .xa-b { margin-left: auto; height: 24px; padding: 0 9px; border-radius: 4px; font-size: 11px; font-weight: 500; color: var(--xa-t3); background: rgba(var(--xa-ink), 0.05); }
+.xa-files .xa-hd .xa-b + .xa-b { margin-left: 0; }
+.xa-files .xa-hd .xa-b:hover { color: var(--xa-t1); background: var(--xa-wash-hover); }
+.xa-files .xa-hd .xa-b:disabled { opacity: 0.45; cursor: not-allowed; }
+.xa-files .xa-frow { display: flex; align-items: center; gap: 8px; min-height: 26px; padding: 0 11px; font-size: 11px; color: var(--xa-t4); border-bottom: 1px solid rgba(var(--xa-ink), 0.05); }
+.xa-files .xa-frow:last-child { border-bottom: 0; }
+.xa-files .xa-frow .xa-name { color: var(--xa-t3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; justify-content: flex-start; }
+.xa-files .xa-frow button.xa-name:hover { color: var(--xa-t1); }
+.xa-files .xa-frow .xa-n { margin-left: auto; flex: none; font-size: 10px; }
+.xa-files .xa-n .xa-add { color: var(--xa-green); } .xa-files .xa-n .xa-del { color: var(--xa-red); margin-left: 5px; }
+.xa-files.xa-reverted .xa-frow .xa-name { text-decoration: line-through; color: var(--xa-t5); }
+.xa-files .xa-review { border-top: 1px solid var(--xa-line-soft); padding: 8px 11px 10px; }
+.xa-files .xa-review .xa-detail { margin: 0; animation: none; }
+
+/* ── the plan on the composer's top edge: the Tasks tray ─────────────── */
+.xa-tasks { display: flex; flex-direction: column; background: var(--xa-wash); border: 1px solid var(--xa-line-soft); border-radius: 4px; overflow: hidden; }
+.xa-tasks .xa-bar { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; cursor: pointer; width: 100%; }
+.xa-tasks .xa-bar:hover { background: var(--xa-wash-hover); }
+.xa-tasks .xa-bar .xa-label { color: var(--xa-label); }
+.xa-tasks .xa-bar .xa-curtask { font-size: 11px; color: var(--xa-t3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.xa-tasks .xa-bar .xa-cnt { margin-left: auto; flex: none; font-size: 10px; color: var(--xa-t6); }
+.xa-tasks .xa-bar .xa-chev { flex: none; color: var(--xa-t6); transition: transform 160ms var(--xa-ease); }
+.xa-tasks.xa-open .xa-bar .xa-chev { transform: rotate(-90deg); }
+.xa-tasks .xa-listwrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 220ms var(--xa-ease); }
+.xa-tasks.xa-open .xa-listwrap { grid-template-rows: 1fr; }
+.xa-tasks .xa-list { min-height: 0; overflow: hidden; }
+.xa-tasks .xa-list .xa-in { padding: 2px 10px 6px; border-top: 1px solid rgba(var(--xa-ink), 0.05); max-height: 160px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(var(--xa-ink), 0.12) transparent; }
+
+/* a background run's controls — on the row that started it, and on the tray's items. Text, never a
+   button plate: a row is a sentence, and these are the two verbs it accepts. */
+.xa-rowacts { display: inline-flex; align-items: center; gap: 8px; flex: none; margin-left: 8px; opacity: 0; transition: opacity 120ms linear; }
+.xa-row:hover .xa-rowacts, .xa-row.xa-now .xa-rowacts, .xa-tasks .xa-item:hover .xa-rowacts, .xa-tasks .xa-item.xa-now .xa-rowacts, .xa-rowacts:focus-within { opacity: 1; }
+.xa-rowacts button { font-size: 10px; line-height: 1; color: var(--xa-t5); }
+.xa-rowacts button:hover { color: var(--xa-t2); }
+.xa-rowacts button:disabled { color: var(--xa-t6); cursor: default; }
+.xa-bgruns .xa-item { gap: 8px; }
+.xa-bgruns .xa-item > .xa-mono { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.xa-bgruns .xa-item .xa-runres { margin-left: auto; flex: none; font-size: 10px; color: var(--xa-t6); }
+.xa-agents .xa-item > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.xa-agents .xa-item .xa-runres { margin-left: auto; flex: none; font-size: 10px; color: var(--xa-t6); }
+
+/* the thread is still opening: the clock line alone, the reply not yet begun */
+.xa-turn.xa-opening .xa-rail { min-height: 0; }
+