@import url("../safe_markdown.css"); /* ===== theme tokens ===== Two grounds, one component layer. EVERY color below this block reads a token — a literal rgba()/hex anywhere else is a bug, because it can only be right on one of the two themes. The tiers exist because alpha-white and alpha-black are not interchangeable: ink is heavier than light at the same alpha, so each tier is tuned per ground rather than inverted. `.theme-light` is stamped on by theme.js; dark is the default so a failed/absent stamp lands on the theme the app shipped with. */ :root { --mermaid-group:#141517; --mermaid-node-border:#4b4d52; --mermaid-group-border:#303135; --mermaid-line:#85888f; --mermaid-category-1:#52657e; --mermaid-category-2:#486c62; --mermaid-category-3:#6c597e; --mermaid-category-4:#7a6748; --mermaid-category-5:#7e575f; --mermaid-category-6:#466d79; --mermaid-category-7:#647044; --mermaid-category-8:#5d6275; --bg:#111214; --bg-raised:#17181b; --bg-hover:#1d1e22; --bg-log:#0e0f11; --bubble:#141517; /* the user's raised message bubble */ --border:rgba(255,255,255,.07); --line-1:rgba(255,255,255,.04); /* faintest wash — detail-toggle at rest */ --line-2:rgba(255,255,255,.06); /* inline code chips, toggle edges */ --line-3:rgba(255,255,255,.10); /* bubble + modal edges */ --line-4:rgba(255,255,255,.14); /* issue cards, chip hover, resizer */ --line-5:rgba(255,255,255,.22); /* sign-in pill */ --wash:rgba(255,255,255,.035); /* table header fill */ --thumb:rgba(255,255,255,.09); --thumb-h:rgba(255,255,255,.18); --scrim:rgba(0,0,0,.55); /* modal overlay */ --scrim-light:rgba(0,0,0,.35); /* the MRU flick — deliberately lighter */ --shadow-lg:0 24px 64px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.4); --shadow-md:0 12px 40px rgba(0,0,0,.5); --shadow-sm:0 4px 12px rgba(0,0,0,.3); --text:#d9dadd; --text-dim:#9a9da3; --text-faint:#62656c; --rail-preview:#999da7; --rail-title:var(--text); --rail-subtitle:#b3b6be; --startup-skeleton:rgba(255,255,255,.09); --startup-skeleton-sweep:rgba(255,255,255,.16); /* The trough of the travelling shimmer band, NOT a text color: it is picked per ground for how far it reads FROM --text, which is the whole of whether the pass is visible. Judged on the real row (12px, dense, long monospace strings), not in isolation — a trough that looks ample on a big clean sample vanishes here. On dark the band runs darker than the text; on light, lighter. */ --shimmer-trough:#45484e; --green:#3fb950; --amber:#e0a542; --blue:#58a0e8; --red:#e5534b; --violet:#a78bef; --amber-fill:rgba(224,165,66,.10); --amber-edge:rgba(224,165,66,.20); --amber-fill-h:rgba(224,165,66,.16); --amber-body:rgba(224,165,66,.045); --amber-rule:rgba(224,165,66,.18); --reader-annotation-linked-fill:rgba(224,165,66,.24); --reader-annotation-linked-edge:rgba(224,165,66,.62); --blue-fill:rgba(88,160,232,.10); --blue-edge:rgba(88,160,232,.24); --blue-fill-h:rgba(88,160,232,.16); --blue-edge-h:rgba(88,160,232,.36); --mark:rgba(224,165,66,.22); /* search-hit highlight */ --blue-under:rgba(88,160,232,.4); /* link underline at rest */ --green-fill:rgba(63,185,80,.08); --green-edge:rgba(63,185,80,.18); --green-fill-h:rgba(63,185,80,.14); --green-edge-h:rgba(63,185,80,.30); --red-fill:rgba(229,83,75,.06); --red-edge:rgba(229,83,75,.18); /* Board membership. A teal that no status uses, so a board chip can never be misread as a state; 6.1:1 on its own chip fill. Deliberately NOT violet — that hue already means Revisit/rate-limited. Both grounds measured against the COMPOSITED fill, not bare --bg. */ --board:#3fb2a6; --board-fill:rgba(63,178,166,.12); --restart-bg:#241516; --restart-edge:rgba(229,83,75,.35); --knob:#fff; /* the usage switch's sliding knob */ --on-amber:#000; /* text ON an amber-filled button */ --on-red:#000; /* text ON the dark ground's brighter red */ --term-bg:#0e0f11; --term-fg:#9a9da3; --term-codex-highlight:#2a2b2d; /* xterm's local text selection — translucent, so the selected text keeps its own colors. Dark value = xterm's stock default (pixel-identical); the light ground needs its own because a white wash on near-white paper is invisible. */ --term-sel:rgba(255,255,255,.30); /* The 16 ANSI slots. Dark = xterm's stock palette, unchanged — the values are written out only so the light ground can re-pick them (an indexed color repaints live on a theme flip; truecolor bytes the agents emit are baked and follow the agent's own theme). */ --ansi-black:#2e3436; --ansi-red:#cc0000; --ansi-green:#4e9a06; --ansi-yellow:#c4a000; --ansi-blue:#3465a4; --ansi-magenta:#75507b; --ansi-cyan:#06989a; --ansi-white:#d3d7cf; --ansi-br-black:#555753; --ansi-br-red:#ef2929; --ansi-br-green:#8ae234; --ansi-br-yellow:#fce94f; --ansi-br-blue:#729fcf; --ansi-br-magenta:#ad7fa8; --ansi-br-cyan:#34e2e2; --ansi-br-white:#eeeeec; --mono:ui-monospace,"SF Mono",Menlo,monospace; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --workspace-min-w:240px; --session-title-min-w:20px; --panel-min-w:30px; --panel-compact-w:640px; --panel-wide-gutters:128px; --reader-content-max-width:850px; --reader-content-inline-padding:28px; --reader-annotation-prose-min-width:640px; --reader-annotation-margin-width:248px; --reader-annotation-action-size:30px; --answer-suggested-reply-clearance:0px; --reader-enter-distance:4px; --control-target:28px; --close-target:32px; } /* Light: for reading in a bright room. The ground is off-white, not #fff — pure white under a window glares the way pure black does in the dark, and holding it back one step frees #fff to be the RAISED surface, so bubbles and modals still read as lifted. Every status hue is re-picked (not darkened) to clear 4.5:1 on this ground: the dark green measures 2.4:1 here, which is invisible. Alpha blacks are tinted 20,22,28 to match the type's cool bias. */ :root.theme-light { --mermaid-group:#f7f7f5; --mermaid-node-border:#bfc1c5; --mermaid-group-border:#dedee0; --mermaid-line:#73767e; --mermaid-category-1:#b4c1d0; --mermaid-category-2:#a8c2ba; --mermaid-category-3:#c9bdd3; --mermaid-category-4:#d4c4a5; --mermaid-category-5:#cbaeb1; --mermaid-category-6:#a6c5cc; --mermaid-category-7:#bac4a6; --mermaid-category-8:#bfc2cb; --bg:#fbfbfa; --bg-raised:#ffffff; --bg-hover:#f0f0ee; --bg-log:#f6f6f4; --bubble:#ffffff; --border:rgba(20,22,28,.10); --line-1:rgba(20,22,28,.028); --line-2:rgba(20,22,28,.055); --line-3:rgba(20,22,28,.12); --line-4:rgba(20,22,28,.16); --line-5:rgba(20,22,28,.26); --wash:rgba(20,22,28,.032); --thumb:rgba(20,22,28,.20); --thumb-h:rgba(20,22,28,.34); --scrim:rgba(28,30,36,.28); --scrim-light:rgba(28,30,36,.16); --shadow-lg:0 24px 64px rgba(28,30,36,.14),0 2px 8px rgba(28,30,36,.09); --shadow-md:0 12px 40px rgba(28,30,36,.13); --shadow-sm:0 4px 12px rgba(28,30,36,.12); --text:#1c1e22; --text-dim:#5a5e66; --text-faint:#8b8f98; --rail-preview:#6e737d; --rail-title:#25272d; --rail-subtitle:#555b65; --startup-skeleton:rgba(20,22,28,.075); --startup-skeleton-sweep:rgba(255,255,255,.78); --shimmer-trough:#c8ccd2; --green:#1a7f37; --amber:#9a6700; --blue:#0a63c9; --red:#c02b23; --violet:#6b3fd4; --amber-fill:rgba(154,103,0,.09); --amber-edge:rgba(154,103,0,.24); --amber-fill-h:rgba(154,103,0,.15); --amber-body:rgba(154,103,0,.05); --amber-rule:rgba(154,103,0,.22); --reader-annotation-linked-fill:rgba(240,180,40,.32); --reader-annotation-linked-edge:rgba(154,103,0,.62); --blue-fill:rgba(10,99,201,.08); --blue-edge:rgba(10,99,201,.26); --blue-fill-h:rgba(10,99,201,.14); --blue-edge-h:rgba(10,99,201,.38); /* The hit highlight keeps a YELLOW wash (not the deep amber ink) — a highlighter reads as marked paper, and the row's text stays legible through it. */ --mark:rgba(240,180,40,.42); --blue-under:rgba(10,99,201,.42); --green-fill:rgba(26,127,55,.09); --green-edge:rgba(26,127,55,.26); --green-fill-h:rgba(26,127,55,.15); --green-edge-h:rgba(26,127,55,.38); --red-fill:rgba(192,43,35,.07); --red-edge:rgba(192,43,35,.24); --board:#0d6b62; --board-fill:rgba(13,107,98,.10); /* 5.3:1 on its own chip fill */ --restart-bg:#fdf2f1; --restart-edge:rgba(192,43,35,.32); --knob:#fff; --on-amber:#fff; /* on #9a6700 the readable text is white, not black */ --on-red:#fff; --term-bg:#f6f6f4; --term-fg:#42464e; --term-codex-highlight:#ececea; --term-sel:rgba(20,22,28,.18); /* Light ANSI, re-picked (not darkened): every hue slot clears 4.5:1 on --term-bg (measured 4.56–13.5). The two "white" slots stay light grays by DESIGN — they are semantically white, and TUIs use them as near-background as well as dim text; holding them to 4.5 would stop them being white at all (the standard light-terminal treatment). */ --ansi-black:#24292f; --ansi-red:#cf222e; --ansi-green:#116329; --ansi-yellow:#4d2d00; --ansi-blue:#0550ae; --ansi-magenta:#6639ba; --ansi-cyan:#155e66; --ansi-white:#6e7781; --ansi-br-black:#57606a; --ansi-br-red:#a40e26; --ansi-br-green:#1a7f37; --ansi-br-yellow:#633c01; --ansi-br-blue:#0969da; --ansi-br-magenta:#8250df; --ansi-br-cyan:#1b7c83; --ansi-br-white:#8c959f; } *{margin:0;padding:0;box-sizing:border-box} /* Thin scrollbars everywhere (rail, panel, excerpts, overlays, xterm). A vertical thumb is transient: scrollbar_visibility.js paints only the viewport that is actively moving. */ ::-webkit-scrollbar{width:8px;height:8px} ::-webkit-scrollbar-track{background:transparent} /* The thumb gets its OWN tokens, not a border tier: a hairline may be barely-there, but a thumb has to be findable and grabbable, and on a light ground the border weights are far too faint to hit. */ ::-webkit-scrollbar-thumb{border-radius:8px;border:2px solid transparent;background-clip:padding-box} ::-webkit-scrollbar-thumb:vertical{background-color:color-mix(in srgb,var(--thumb) var(--scrollbar-thumb-opacity,0%),transparent)} ::-webkit-scrollbar-thumb:horizontal{background-color:var(--thumb)} ::-webkit-scrollbar-thumb:horizontal:hover, .scrollbar-active::-webkit-scrollbar-thumb:vertical:hover{background-color:color-mix(in srgb,var(--thumb-h) var(--scrollbar-thumb-opacity,0%),transparent);background-clip:padding-box} ::-webkit-scrollbar-corner{background:transparent} body{background:var(--bg);color:var(--text);font-family:var(--sans);height:100vh;display:flex;flex-direction:column;overflow:hidden} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0} .micro{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--text-faint)} .dot{width:6px;height:6px;border-radius:50%;display:inline-block;flex-shrink:0} .dot.working{background:var(--blue);animation:pulse 2.4s ease-in-out infinite} /* Background tasks still running after the agent yielded — machine activity at rest: the working blue, but STATIC (pulse is reserved for the agent itself). */ .dot.running{background:var(--blue)} .dot.turn_done{background:var(--green)} .dot.idle{background:var(--text-faint)} .dot.waiting{background:var(--amber)} .dot.exited,.dot.failed,.dot.needs-repair{background:var(--red)} .dot.interrupted{background:var(--amber)} .dot.revisit{background:var(--violet)} /* Usage-limit / auto-resume: paused on the clock. A slow breathe (not the working pulse) — it's waiting, not busy — in a violet distinct from amber "waiting on you". */ .dot.rate-limited{background:var(--violet);animation:pulse 3.6s ease-in-out infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}} #unexpected-error-host:empty{display:none} #unexpected-error-host{position:fixed;top:16px;right:16px;z-index:119; width:min(440px,calc(100vw - 32px));pointer-events:none} .unexpected-error{display:flex;align-items:flex-start;gap:12px;padding:12px; border:1px solid var(--restart-edge);border-radius:9px;background:var(--bg-raised); color:var(--text);box-shadow:var(--shadow-md);pointer-events:auto;font:12px var(--sans)} .unexpected-error>div{flex:1;min-width:0} .unexpected-error strong{display:block;padding:6px 0} .unexpected-error summary{min-height:28px;box-sizing:border-box;padding:6px;border-radius:5px; cursor:pointer;color:var(--red)} .unexpected-error summary:hover,.unexpected-error summary:focus-visible{ background:color-mix(in srgb,var(--red) 12%,transparent)} .unexpected-error details[open] summary{background:color-mix(in srgb,var(--red) 18%,transparent)} .unexpected-error pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:180px;overflow:auto; margin:6px 0 0;font:11px var(--mono)} .unexpected-error-close{flex:none;width:32px;height:32px;padding:0;border:0;border-radius:6px; background:transparent;color:var(--text-dim);font:20px var(--sans);cursor:pointer} .unexpected-error-close:hover,.unexpected-error-close:focus-visible{ background:var(--bg-hover);color:var(--text)} .unexpected-error-close:active{background:color-mix(in srgb,var(--text) 18%,transparent)} /* Restart is reserved for explicit engine or shared-runtime failures. */ #restart-alert-host:empty{display:none} #restart-alert-host{position:fixed;inset:0;z-index:120;background:var(--scrim-light); pointer-events:none} .restart-alert{pointer-events:auto;position:absolute;top:16px;left:calc(var(--rail-w,280px) + 16px); right:16px;display:flex;align-items:center;gap:12px;padding:13px 14px; border:1px solid var(--restart-edge);border-radius:9px;background:var(--restart-bg); box-shadow:var(--shadow-md);animation:restart-alert-in .2s ease-out} @keyframes restart-alert-in{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}} .restart-alert-mark{flex:none;color:var(--red);font:700 17px/1 var(--mono)} .restart-alert-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px; color:var(--text);font-size:13px;line-height:1.4} .restart-alert-copy strong{font-weight:600} .restart-alert-copy span{color:var(--text-dim);font-size:11.5px} .restart-alert button{flex:none;min-height:var(--control-target);padding:0 10px; border:1px solid var(--red-edge);border-radius:6px;background:var(--red);color:var(--on-red); font:600 11.5px/1 var(--sans);cursor:pointer} .restart-alert button:disabled{opacity:.55;cursor:default} .restart-alert button:hover:not(:disabled),.restart-alert button:focus:not(:disabled){ filter:brightness(.9);box-shadow:0 0 0 2px var(--red-edge);outline:0} .main{flex:1;display:flex;min-height:0} /* ===== startup: one full-shell skeleton until the first accepted session snapshot ===== */ .startup-rail-skeleton,.startup-header-skeleton,.startup-brief-skeleton, .startup-terminal-skeleton{display:none} .startup-bone,.startup-bubble,.startup-dot{position:relative;overflow:hidden; background:var(--startup-skeleton)} .startup-bone::after,.startup-bubble::after{content:"";position:absolute;inset:0; transform:translateX(-115%);background:linear-gradient(100deg,transparent 22%, var(--startup-skeleton-sweep) 50%,transparent 78%);animation:startup-skeleton-sweep 1.85s ease-in-out infinite} @keyframes startup-skeleton-sweep{ 0%,18%{transform:translateX(-115%)}82%,100%{transform:translateX(115%)}} body.startup-loading #railfailure,body.startup-loading #railempty, body.startup-loading #nowrows,body.startup-loading #folderssection{display:none!important} body.startup-loading .startup-rail-skeleton{display:block;padding:8px 10px} .startup-session-row{padding:10px 11px 9px;margin-bottom:3px} .startup-session-title{display:flex;align-items:center;gap:9px} .startup-dot{width:6px;height:6px;border-radius:50%;flex:0 0 6px} .startup-rail-title{height:9px;border-radius:5px} .startup-rail-title.wide{width:83%}.startup-rail-title.medium{width:72%} .startup-rail-title.short{width:57%} .startup-rail-meta{display:block;width:45%;height:7px;margin:8px 0 0 15px;border-radius:4px} .startup-session-row:nth-child(2){opacity:.82}.startup-session-row:nth-child(3){opacity:.64} .startup-session-row:nth-child(4){opacity:.46} body.startup-loading #sheader{visibility:visible!important} body.startup-loading #sheader>:not(.startup-header-skeleton){display:none!important} body.startup-loading .startup-header-skeleton{display:flex;align-items:center;gap:10px;width:100%} .startup-header-history{width:60px;height:9px;border-radius:5px} .startup-header-state{width:min(270px,48%);height:9px;border-radius:5px} .startup-header-context{width:76px;height:24px;margin-left:auto;border-radius:7px} body.startup-loading #panel, body.startup-loading #lens-term{visibility:hidden} .startup-brief-skeleton{position:absolute;z-index:8;inset:0;background:var(--bg);pointer-events:none} body.startup-loading .startup-brief-skeleton{display:block} .startup-brief-inner{max-width:max(var(--panel-compact-w),calc(100cqw - var(--panel-wide-gutters))); margin:0 auto;padding:92px 32px} .startup-bubble{width:76%;height:68px;margin-bottom:28px;border:1px solid var(--line-3); border-radius:9px;background:var(--bubble)} .startup-copy-group{display:grid;gap:13px}.startup-copy-group.secondary{margin-top:34px;opacity:.72} .startup-copy-line{height:9px;border-radius:5px}.startup-copy-line:first-child{height:11px;margin-bottom:4px} .startup-copy-line.wide{width:83%}.startup-copy-line.long{width:74%} .startup-copy-line.medium{width:57%}.startup-copy-line.short{width:43%} .startup-terminal-skeleton{position:absolute;z-index:7;inset:0;padding:36px 26px; background:var(--bg-log);pointer-events:none} body.startup-loading .startup-terminal-skeleton{display:grid;align-content:start;gap:14px} body.startup-loading .log-actions{display:none} .startup-terminal-line{height:8px;border-radius:2px} .startup-terminal-line.short{width:34%}.startup-terminal-line.medium{width:58%} .startup-terminal-line.long{width:76%}.startup-terminal-line.wide{width:84%} .startup-terminal-line.prompt{width:50%;margin-top:16px} @media (prefers-reduced-motion:reduce){ .startup-bone::after,.startup-bubble::after{animation:none;display:none}} /* ===== rail ===== */ /* The rail is a fixed column: the app bar stays put and the session list scrolls. */ .rail{width:var(--rail-w,280px);flex-shrink:0;display:flex;flex-direction:column;min-height:0; container-type:inline-size; --rail-action-size:var(--control-target);--rail-action-gap:1px;--rail-avatar-gap:4px; --rail-avatar-image-size:22px;--rail-badge-size:10px} #sessions{flex:1;overflow-y:auto;overflow-x:hidden;padding-bottom:12px} .rail-section-label{padding:8px 20px 4px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--text-faint);display:flex;align-items:center} .rail-now-header{position:sticky;top:0;z-index:3;background:var(--bg)} .rail-now-header::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px; pointer-events:none;background:linear-gradient(var(--bg),transparent);opacity:0} #sessions.has-content-above .rail-now-header::after{opacity:1} .session-tools{margin-left:auto;display:flex;align-items:center;gap:var(--rail-action-gap)} .session-tools .railicon{margin-left:0} .interruption-signal{min-height:var(--control-target);padding:0 8px;border:0;border-radius:7px; background:var(--amber-fill);color:var(--amber);font:600 11px var(--sans);cursor:pointer; white-space:nowrap;text-transform:none;letter-spacing:normal} .interruption-signal:hover,.interruption-signal:focus-visible{background:var(--amber-fill-h); box-shadow:inset 0 0 0 1px var(--amber-edge);outline:0} .rail-section-label.folders-label{margin-top:11px;padding-top:12px;border-top:1px solid var(--border)} /* ===== draggable column dividers ===== */ /* A 1px hairline centered in a 28px interaction corridor. Its negative margins preserve the one-pixel layout seam while hover and keyboard focus paint the full-height target. */ .resizer{flex-shrink:0;width:28px;margin-inline:-13.5px;z-index:5;cursor:col-resize; position:relative;background:transparent;outline:0} .resizer::before{content:"";position:absolute;top:0;bottom:0;left:13.5px;width:1px; background:var(--border)} .resizer:hover::before,.resizer.dragging::before,.resizer:focus-visible::before{ background:var(--line-4);left:12.5px;width:3px} .rail-top{padding:0 20px 0 86px;-webkit-app-region:drag;height:38px;display:flex;align-items:center} .appname{min-width:0;overflow:hidden;white-space:nowrap;font-size:12.5px;font-weight:600; color:var(--text-dim)} .railicon{width:var(--rail-action-size);height:var(--rail-action-size);flex:none;margin-left:auto; padding:0;border:0;border-radius:7px;background:transparent;color:var(--text-faint); cursor:pointer;-webkit-app-region:no-drag;display:flex;align-items:center;justify-content:center} .railicon[hidden]{display:none} .railicon:hover,.railicon:focus-visible{color:var(--text);background:var(--line-2);outline:0} .railicon svg{width:14px;height:14px;display:block} /* Group header reads as a header, set apart from the session titles it labels: a hair bigger, brighter (full --text), and prefixed with a folder glyph so the repo can't be mistaken for a conversation row (dogfood: 12.5px/--text-dim read identical to titles). */ .repo-label{padding:12px 20px 4px;font-size:13.5px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:7px} .repo-label .repo-toggle{min-width:0;display:flex;align-items:baseline;gap:6px;cursor:pointer; padding:3px 8px 3px 6px;margin:-3px 0 -3px -6px;border-radius:6px} .repo-label .repo-toggle:hover{background:var(--bg-raised)} .repo-label .repo-toggle:focus-visible{outline:1px solid var(--line-4);outline-offset:3px;border-radius:3px} /* The fold mark is the shared .chev triangle (the brief panel's turn rows own the base rule); here it flows inline in the flex row instead of sitting absolute in a gutter. */ .repo-label .repo-chevron{position:static;flex-shrink:0;align-self:center} .repo-label .rname{min-width:0;display:flex;align-items:baseline;gap:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .repo-label .repo-count{font-size:11px;font-weight:400;color:var(--text-faint)} /* Folder glyph is a STROKED OUTLINE, not a filled shape. A solid folder inked at --text-dim reads calm on the dark ground (subtle gray on darker gray) but as a heavy dark blob on the light ground, dominating the label beside it. An outline holds the same visual weight as the label's own strokes on either ground. Kept as a CSS mask + background-color so the ink still lives in the token block; the SVG's own stroke is white so the mask uses its shape as-is. */ .repo-label .rname::before{content:"";width:14px;height:12px;flex-shrink:0;background-color:var(--text-dim);align-self:center; -webkit-mask:no-repeat center/contain;mask:no-repeat center/contain; -webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14' fill='none' stroke='white' stroke-width='1.4' stroke-linejoin='round'%3E%3Cpath d='M1.5 3.2A1.5 1.5 0 0 1 3 1.7h3.2a1.5 1.5 0 0 1 1.06.44L8.4 3.2H13a1.5 1.5 0 0 1 1.5 1.5v6.3A1.5 1.5 0 0 1 13 12.5H3a1.5 1.5 0 0 1-1.5-1.5z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14' fill='none' stroke='white' stroke-width='1.4' stroke-linejoin='round'%3E%3Cpath d='M1.5 3.2A1.5 1.5 0 0 1 3 1.7h3.2a1.5 1.5 0 0 1 1.06.44L8.4 3.2H13a1.5 1.5 0 0 1 1.5 1.5v6.3A1.5 1.5 0 0 1 13 12.5H3a1.5 1.5 0 0 1-1.5-1.5z'/%3E%3C/svg%3E")} .repo-label .repo-search{width:var(--control-target);height:var(--control-target);margin:-8px -8px -8px auto; padding:0;border:0;background:transparent;align-self:center;align-items:center;justify-content:center; border-radius:7px;color:transparent;cursor:pointer;display:flex} .repo-label .repo-search svg{width:12px;height:12px} .repo-label:hover .repo-search{color:var(--text-faint)} .repo-label .repo-search:hover,.repo-label .repo-search:focus-visible{color:var(--text); background:var(--line-2);outline:0} .repo-label .repo-new{align-self:center} /* THE BOARD SLAB — a whole board rendered as ONE session row, visibly overloaded. The supervisor's own row wears its board: an eyebrow above the title carrying the board name and one square per current worker. The workers themselves are off the rail entirely, so the list stays flat — no container, no children, no indent — and an unrelated session beside a board can never be misread as belonging to it. The row opens the supervisor like any session; only the eyebrow opens the board. Spec (V1): agent_context/board_improvements_board/ rail_fat_row_mockup.html */ /* A slab keeps the ordinary row ground. Persistent background is reserved for selection; the eyebrow, extra height, and worker squares carry the board identity. */ /* Top-aligned, not centered: the name may wrap, and the worker squares belong beside its first line. The target extends 11px above the ink and 3px below it; the negative margin keeps that target out of layout so the ink retains an ordinary row's top inset and the title follows it by 3px. */ .slab-eyebrow{display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:8px;row-gap:2px; width:fit-content;min-width:0; min-height:var(--control-target);max-width:100%;margin:-11px -4px 0;padding:11px 4px 3px; cursor:pointer} .slab-eyebrow.off{display:none} /* The board name is HYPERLINKED TEXT, not a button: it is a destination inside a reading row, so it reads the way a link reads — underlined at rest, and the only thing focus paints is the text itself. A button's box would draw a second bounding shape into a rail that has exactly one (the row), and after a click Chromium leaves that box painted over a row the reader has already moved past. The 28px target survives as the eyebrow's padding around the link; the target is what you can HIT, and the ink is what you can SEE, and only for a link may those two differ. */ .slab-eyebrow .slab-board:focus-visible{outline:2px solid var(--board);outline-offset:2px; border-radius:2px} .slab-eyebrow.action-failed{color:var(--red)} .slab-eyebrow.action-failed .slab-board{color:var(--red)} /* The board's name, in the folder's slot and its register — it replaces LODESTAR/SEALANT rather than crowding beside it. NEVER truncated: a half-spelled board reads worse than a half-spelled title, because the board name is the shorter and more repeated of the two. A name too wide for the rail WRAPS to a second eyebrow line; the thread title below keeps its own ellipsis and is what gives up width when a row runs out. */ .slab-eyebrow .slab-board{min-width:0;overflow-wrap:anywhere; font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.07em; line-height:1.35;color:var(--board);cursor:pointer; /* Underlined AT REST, which is what makes it a link rather than a word that turns out to be clickable. The offset keeps the rule clear of the uppercase baseline, and skip-ink keeps it off the descenders of a mixed-case board name. */ text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px; text-decoration-skip-ink:auto;text-decoration-color:color-mix(in srgb,var(--board) 45%,transparent)} /* Hover strengthens the rule the reader is already looking at — it does not introduce one. */ .slab-eyebrow .slab-board:hover{text-decoration-color:var(--board)} /* The fleet projection owns presence and state; the rail compresses each current worker into one square. Work and harness-owned transitions are blue, named blocks are amber, and true stalls are red. Only canonical working activity pulses. */ .slab-eyebrow .slab-dots{display:inline-flex;gap:4px;align-items:center;height:14px; flex-shrink:0} .slab-eyebrow .wd{width:7px;height:7px;border-radius:2px;flex:none} .slab-eyebrow .wd.working, .slab-eyebrow .wd.recovering, .slab-eyebrow .wd.finalizing{background:var(--blue)} .slab-eyebrow .wd.blocked{background:var(--amber)} .slab-eyebrow .wd.needs_repair, .slab-eyebrow .wd.stalled{background:var(--red)} .slab-eyebrow .wd.pulse{animation:pulse 2.4s ease-in-out infinite} @media (prefers-reduced-motion:reduce){.slab-eyebrow .wd.pulse{animation:none}} .session{margin:2px 6px;padding:6px 8px 8px;min-height:62px;cursor:pointer;border-radius:7px} .session:hover{background:var(--line-1)} .session.active{background:var(--bg-hover)} .session.dragging{background:var(--bg-hover);opacity:.58} .session-title{font-size:12.5px;line-height:1.4;display:flex;gap:5px;align-items:center;min-height:28px;color:var(--text-dim)} .session-title .stitle{flex:1 1 var(--session-title-min-w);min-width:var(--session-title-min-w); font-size:13.5px;font-weight:550;color:var(--rail-title); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .session-title .sright{margin-left:auto;min-width:0;flex:0 1 auto;display:flex;align-items:center;gap:5px} .session-title .session-tag{height:28px;min-width:0;white-space:nowrap;flex:0 1 auto; overflow:hidden;text-overflow:ellipsis;padding:0 6px;border:0;border-radius:6px; background:transparent;box-shadow:inset 0 0 0 1px var(--line-3);color:var(--text); font:600 11px/1.4 var(--sans);cursor:pointer} .session-title .session-tag.off{display:none} .session-title .session-tag:hover,.session-title .session-tag:focus-visible{ background:var(--line-3);outline:2px solid var(--blue);outline-offset:1px} .session-title .session-tag:hover:not(:focus-visible){outline:0} .session-title .board-tag{white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis; padding:1px 6px;border-radius:5px;background:var(--board-fill);color:var(--board); font-size:10.5px;font-weight:600;line-height:1.45} .session-title .board-tag.off{display:none} .session-title .now-folder{display:none;font-size:10px;color:var(--rail-preview);flex-shrink:0} .session-title .pin-mark{display:none;align-items:center;justify-content:center;width:16px;flex:none;color:var(--text-dim)} .session-title .pin-mark svg{width:12px;height:12px} .session.pinned .pin-mark{display:flex} .session-more{position:absolute;right:4px;bottom:0;width:28px;height:28px;padding:0;display:flex;align-items:center;justify-content:center;border:0;border-radius:6px; background:transparent;color:var(--text-dim);cursor:pointer;opacity:0} .session-more svg{width:14px;height:14px;display:block;flex:none} .session:hover .session-more,.session:focus-within .session-more,.session-more[aria-expanded=true], .session.rail-title-action-failed .session-more{opacity:1} .session-more:hover,.session-more:focus-visible,.session-more[aria-expanded=true]{background:var(--line-3);color:var(--text);outline:0} .session-more:focus-visible{outline:2px solid var(--blue);outline-offset:1px} .session-more.action-failed,.session-more.action-failed:hover,.session-more.action-failed:focus-visible{ background:var(--red-fill);color:var(--red);box-shadow:inset 0 0 0 1px var(--red-edge)} .session-meta{font-size:11px;line-height:1.5;min-height:17px;padding-top:2px;color:var(--rail-preview);display:flex;gap:6px;align-items:baseline;white-space:nowrap;overflow:hidden} .session:hover .session-meta,.session:focus-within .session-meta, .session:has(.session-more[aria-expanded=true]) .session-meta, .session.rail-title-action-failed .session-meta{padding-right:28px} .session-meta > span{flex-shrink:0} /* span.off must outrank `.session-meta .pill{display:inline-flex}` below — at equal specificity the later rule won, so the "hidden" pill kept showing a stale dot. */ .session-meta > span.off{display:none} .session-meta .sgist{font-size:12px;color:var(--rail-subtitle);overflow:hidden;text-overflow:ellipsis;min-width:0;flex-shrink:1} /* The word owns the baseline; the out-of-flow dot keeps flex centering and its reserved gap. */ .session-meta .pill{position:relative;display:inline-flex;align-items:center} .session-meta .pword{padding-left:10px} .session-meta .dot{position:absolute;width:5px;height:5px} .session-meta .draftmark{color:var(--amber)} .session-meta .draftmark.risk{color:var(--red)} .session-meta .rail-action-failure{color:var(--red);font-weight:600;overflow:hidden; text-overflow:ellipsis;min-width:0;flex-shrink:1} :is(.pill,.answer-expanded-session-status,.descendant-stat).p-waiting, :is(.pill,.answer-expanded-session-status,.descendant-stat).p-interrupted{color:var(--amber)} :is(.pill,.answer-expanded-session-status,.descendant-stat).p-working, :is(.pill,.answer-expanded-session-status,.descendant-stat).p-compacting, :is(.pill,.answer-expanded-session-status,.descendant-stat).p-running{color:var(--blue)} :is(.pill,.answer-expanded-session-status,.descendant-stat).p-ready{color:var(--green)} :is(.pill,.answer-expanded-session-status,.descendant-stat).p-exited, :is(.pill,.answer-expanded-session-status,.descendant-stat).p-failed, :is(.pill,.answer-expanded-session-status,.descendant-stat).p-needs-repair{color:var(--red)} .pill.p-revisit{min-height:var(--control-target);margin:-7px -6px;padding:0 6px;border-radius:6px; color:var(--violet);cursor:pointer} :is(.pill,.answer-expanded-session-status,.descendant-stat).p-revisit, :is(.pill,.answer-expanded-session-status,.descendant-stat).p-rate-limited{color:var(--violet)} .pill.p-revisit:hover,.pill.p-revisit:focus-visible{color:var(--violet);background:var(--line-2); box-shadow:inset 0 0 0 1px var(--line-4);outline:0} .pill.p-revisit.action-failed,.pill.p-revisit.action-failed:hover, .pill.p-revisit.action-failed:focus-visible{color:var(--red);background:var(--red-fill); box-shadow:inset 0 0 0 1px var(--red-edge);outline:0} /* "▶ Continue" / "Open" on a STOPPED row — limit-stopped or interrupted. Same slot and register as Revisit but NOT hover-gated: a stopped session's primary action stays visible on the row that shows the problem, never only behind the header's collapsed count. */ .session-meta .continuebtn{display:none;min-height:var(--control-target);margin:-7px -7px -7px auto; padding:0 7px;border:0;border-radius:6px;background:transparent;font:inherit;cursor:pointer; color:var(--text-faint)} .session-meta .continuebtn::before{content:none} /* never the · separator — it has its own slot */ .session.can-continue .session-meta .continuebtn{display:inline-flex;align-items:center} .session-meta .continuebtn:hover,.session-meta .continuebtn:focus-visible{color:var(--violet); background:var(--line-2);outline:0} /* The fold row sits where a session would, but quieter — it labels absence, not a thing. */ .fold{display:block;width:calc(100% - 20px);min-height:var(--control-target);margin:1px 10px; padding:5px 12px;border:0;border-radius:7px;background:transparent;color:var(--text-faint); font:inherit;font-size:11px;text-align:left;cursor:pointer} .fold:hover,.fold:focus-visible{background:var(--bg-raised);color:var(--text-dim);outline:0} .rail-empty{padding:18px 22px;font-size:12px;color:var(--text-faint);line-height:1.7} .rail-failure{margin:3px 10px 7px;padding:8px 10px;border:1px solid var(--red-edge); border-radius:7px;background:var(--red-fill);color:var(--red);font-size:11px;line-height:1.45} /* ===== header + split ===== */ .content{flex:1;display:flex;flex-direction:column;min-width:var(--workspace-min-w); position:relative} .session-header{height:44px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;padding:0 16px;flex-shrink:0;-webkit-app-region:drag} .session-history{-webkit-app-region:no-drag;display:flex;align-items:center;gap:1px;flex:none} .session-history-button{-webkit-app-region:no-drag;width:30px;height:30px;padding:0;border:0; border-radius:7px;background:transparent;color:var(--text-dim);cursor:pointer;display:grid; place-items:center} .session-history-button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round} .session-history-button:not(:disabled):hover,.session-history-button:focus-visible{background:var(--bg-hover); color:var(--text);outline:0} .session-history-button:active:not(:disabled){background:var(--line-3);transform:translateY(1px)} .session-history-button:disabled{opacity:.28;cursor:default} /* One edge tab collapses and restores the brief panel. It belongs to the terminal column, so it follows that column's left edge in both states without duplicating positioning logic. The 28x44 hit corridor stays visually quiet while hover, focus, and press paint only the compact edge tab. Its layer remains below expanded Read mode and the shared modal overlay. */ .brief-panel-toggle{position:absolute;z-index:8;top:50%;left:0;transform:translateY(-50%); width:28px;height:44px;padding:0;border:0;background:none;cursor:pointer;outline:0; display:grid;align-items:center;justify-items:start;border-radius:0 7px 7px 0} .brief-panel-toggle-tab{width:10px;height:32px;border:1px solid var(--line-3);border-left:0; border-radius:0 5px 5px 0;background:var(--bg-raised);color:var(--text-faint); display:grid;place-items:center;box-shadow:var(--shadow-sm)} .brief-panel-toggle:hover .brief-panel-toggle-tab, .brief-panel-toggle:focus-visible .brief-panel-toggle-tab{ background:var(--line-2);color:var(--text);border-color:var(--line-4)} .brief-panel-toggle:active .brief-panel-toggle-tab{background:var(--line-3)} .brief-panel-toggle svg{width:9px;height:9px} .brief-panel-toggle[aria-expanded="true"] svg{transform:rotate(180deg)} .session-header .state{font-size:12.5px;color:var(--text-dim)} .session-header-actions{display:inline-flex;align-items:center;gap:2px;flex-shrink:0} .session-header .ctx{margin-left:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);font-size:11px;color:var(--text-faint)} /* The usage-limit auto-resume toggle — clickable (header is a drag region), violet to match the rate-limited pill; the 'off' state dims. */ .session-header .autoresume{-webkit-app-region:no-drag;cursor:pointer;font-size:11px;font-weight:600;padding:2px 8px;border-radius:10px;border:1px solid var(--violet);color:var(--violet);white-space:nowrap} .session-header .autoresume.off{color:var(--text-faint);border-color:var(--border)} .session-header .autoresume{min-height:var(--control-target);background:transparent;font-family:var(--sans)} .session-header .autoresume:hover,.session-header .autoresume:focus-visible{background:var(--line-2); box-shadow:0 0 0 1px var(--line-4);outline:0} /* The usage widget — a compact menu-bar-style pill in the header, and its stats popover. */ .usage-widget{-webkit-app-region:no-drag;min-height:var(--control-target);cursor:pointer;display:inline-flex; align-items:center;gap:5px;padding:0 8px;border:0;border-radius:8px;background:transparent; color:inherit;font-family:var(--mono);font-size:11.5px;font-weight:600} .usage-widget:hover,.usage-widget:focus-visible,.usage-widget[aria-expanded="true"]{background:var(--bg-hover);outline:0} .usage-bars{display:inline-flex;align-items:flex-end;gap:2px;height:12px} .usage-bars i{width:3px;background:var(--text-faint);border-radius:1px;opacity:.4} .usage-bars i:nth-child(1){height:5px} .usage-bars i:nth-child(2){height:9px} .usage-bars i:nth-child(3){height:12px} .usage-bars i.lit{opacity:1;background:var(--text-dim)} /* Popover: anchored under the header's right edge, dark card matching the app. */ .usage-pop{-webkit-app-region:no-drag;position:absolute;top:46px;right:16px;z-index:50;width:320px; background:var(--bg-raised);border:1px solid var(--border);border-radius:10px;padding:16px 18px; box-shadow:var(--shadow-md)} .usage-pop-head{font-size:14px;font-weight:700;color:var(--text);margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--border)} .usage-empty{font-size:12px;color:var(--text-dim);padding:6px 0 14px} .usage-empty-sub{font-size:11px;color:var(--text-faint)} /* Provider sections stack (hidden until a provider's first sample) — margin-bottom, not top, so a hidden leading section leaves no stray gap. Window rows space via their wrappers (the labels are each first in a wrapper, so label-level margins can't do it). */ .usage-sec{margin-bottom:16px} .usage-sec:last-child{margin-bottom:0} .usage-provider{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);margin-bottom:6px} .usage-win + .usage-win{margin-top:12px} .usage-row-label{font-size:12px;color:var(--text-dim)} .usage-big{font-size:26px;font-weight:700;color:var(--text);line-height:1.15} .usage-bar{height:6px;background:var(--line-2);border-radius:3px;overflow:hidden;margin:6px 0 4px} .usage-fill{height:100%;background:var(--green);border-radius:3px;transition:width .3s} .usage-reset{font-size:11px;color:var(--text-faint)} /* The global auto-resume toggle row — an iOS-style switch, violet when on (matches the pill). */ .usage-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding-top:12px;border-top:1px solid var(--border)} .usage-toggle-label{font-size:12.5px;color:var(--text-dim)} .usage-switch-target{display:flex;align-items:center;justify-content:center;flex-shrink:0; width:44px;min-height:var(--control-target);padding:3px;border:0;border-radius:14px;background:transparent;cursor:pointer} .usage-switch-target:hover,.usage-switch-target:focus-visible{background:var(--line-2);outline:0} .usage-switch{display:block;flex-shrink:0;width:38px;height:22px;border-radius:11px;background:var(--line-3);position:relative;transition:background .18s} .usage-switch i{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--knob);transition:left .18s} .usage-switch-target.on .usage-switch{background:var(--violet)} .usage-switch-target.on .usage-switch i{left:18px} .split{flex:1;display:flex;min-height:0;position:relative} /* One segmented control language serves adjacent, mutually exclusive reading surfaces. */ .segmented-control{display:inline-flex;align-items:center;gap:0;height:var(--control-target); padding:0;border:1px solid var(--line-3);border-radius:6px;background:var(--bg-raised); box-shadow:var(--shadow-sm)} .segmented-control[hidden]{display:none} .segmented-control-button{min-width:var(--control-target);min-height:var(--control-target); margin:-1px 0;padding:4px 10px;border:0;border-radius:5px;background:transparent;color:var(--text-dim); font:11px var(--sans);white-space:nowrap;cursor:pointer} .segmented-control-button:hover,.segmented-control-button:focus-visible{ background:var(--bg-hover);color:var(--text);outline:0} .segmented-control-button[aria-pressed="true"], .segmented-control-button[aria-selected="true"]{ background:color-mix(in srgb,var(--blue) 16%,transparent);color:var(--text); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--blue) 35%,transparent);outline:0} .segmented-control-button:active:not(:disabled){background:var(--line-3)} .segmented-control-button:disabled{color:var(--text-faint);cursor:default} /* ===== the middle column: lodestar's judgment — the brief thread, with the session's documents reached from the Files button beneath it ===== */ .panel-col{position:relative;flex:1;display:flex;flex-direction:column;min-width:var(--panel-min-w); container-type:inline-size;transition:opacity .12s} .content.brief-panel-snap-preview .panel-col{opacity:.18} .content.brief-panel-snap-preview #log-resizer::after{content:"‹";position:absolute;top:7px;left:0; width:28px;height:30px;border-radius:7px;display:grid;place-items:center;color:var(--text-dim); font:18px/1 var(--sans);background:var(--line-3);box-shadow:inset 0 0 0 1px var(--line-4)} .content.brief-panel-collapsed .panel-col{flex:0 0 0;min-width:0;width:0;overflow:hidden;opacity:0} .content.brief-panel-collapsed #log-resizer{display:none} .content.brief-panel-collapsed .log{width:100%;flex:1 1 auto} .panel-inner{ max-width:max(var(--panel-compact-w),calc(100cqw - var(--panel-wide-gutters)));margin:0 auto} .panel-mode-bar{position:absolute;z-index:6;top:12px;right:0;left:0;height:var(--control-target); min-width:0;padding:0 8px;overflow:hidden;display:flex;align-items:center;justify-content:center; -webkit-app-region:no-drag} .panel-mode-bar[hidden]{display:none} .panel-mode-switch{flex:none;max-width:100%} @container (max-width:144px){.panel-mode-bar{display:none}} /* ===== brief panel: the thread ===== */ .panel{flex:1;overflow-y:auto;min-width:0} .panel-inner{padding:48px 32px 32px} /* History dissolves into the top fade — shown only while content is clipped above. */ .panel-fade{position:sticky;top:0;height:44px;margin-bottom:-44px;z-index:4;pointer-events:none; background:linear-gradient(var(--bg) 15%,transparent);opacity:0;transition:opacity .15s} .panel-fade.on{opacity:1} /* One exchange per turn — a dialogue, not a log: two voices share one text edge, each marked by a single glyph hanging in the left gutter. › = the user (the terminal's own prompt glyph); ▶/▼ (CSS triangle) = a folded/unfolded reply. Turn numbers never render here. */ /* The thread reads like a normal chat: ONE uniform gap between every message — bubble to reply, reply to the next bubble, bubble to bubble. No within-turn vs between-turn distinction (that two-tier rhythm read as inconsistent padding around the agent rows). */ .exchange{margin-top:14px} .exchange .entry{margin-top:14px} .exchange .open-turn{margin-top:14px} /* The user's message is a lighter raised bubble that lifts off the panel — the lift alone separates it from the brief, so the text stays the neutral brief color (no recolor). A small "you" label names the voice; the › gutter glyph is retired (the bubble carries it). */ .umsg{font-family:var(--mono);font-size:12.5px;line-height:1.65;color:var(--text); white-space:pre-wrap;word-break:break-word;background:var(--bubble); border:1px solid var(--line-3); border-radius:8px;padding:9px 13px;margin-left:-12px} /* A task can stack several user-message bubbles (redirect after an interrupt, an answer); without a gap they read as one merged block. */ .umsg + .umsg{margin-top:14px} .umsg::before{content:'you';display:block;font-family:var(--sans);font-size:9px;font-weight:600; text-transform:uppercase;letter-spacing:.12em;color:var(--text-faint);margin-bottom:5px} /* The row's box extends left to swallow the gutter, so hover covers the chevron; its text still sits on the shared edge (padding-left cancels the negative margin). */ .turn-prev{position:relative;cursor:pointer;margin:14px -10px 0 -26px;padding:5px 10px 5px 26px; border-radius:6px;font-size:12.5px;color:var(--text-faint);line-height:1.5} .turn-prev:hover{background:var(--bg-raised);color:var(--text-dim)} /* THE app-wide expand/collapse mark (also the rail's folder toggle via .repo-chevron). */ .chev{position:absolute;width:0;height:0;border-style:solid; border-width:4px 0 4px 6px;border-color:transparent transparent transparent var(--text-faint); transition:transform .15s} .chev.open{transform:rotate(90deg)} .turn-prev .chev{left:10px;top:10px} .turn-meta .chev{left:-16px;top:3px} .turn-prev .failed{color:var(--red)} .turn-note{margin-top:14px;font-size:12.5px;color:var(--text-faint);line-height:1.5} .turn-note.feature-off{padding:9px 11px;border:1px solid var(--line-2);border-radius:7px; background:var(--line-1);font-style:normal} .entry{margin-top:14px} .entry.hist{margin-top:14px} .entry.hist .turn-meta{position:relative;cursor:pointer} .entry.hist .turn-meta:hover{color:var(--text-dim)} .turn-meta{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--text-faint);margin-bottom:10px} /* Debug retry: quiet at rest, revealed when the brief is hovered. text-transform:none so the lowercase word reads as an action, not part of the uppercase meta label. */ .turn-meta .retry{text-transform:none;letter-spacing:normal;margin-left:8px;cursor:pointer; min-height:var(--control-target);padding:0 6px;border:0;border-radius:5px;background:transparent; color:var(--text-faint);font:inherit;opacity:0;transition:opacity .12s} .entry:hover .turn-meta .retry{opacity:.7} .turn-meta .retry:hover,.turn-meta .retry:focus-visible{opacity:1;color:var(--text); background:var(--line-2);outline:0} .turn-meta .retry.busy{opacity:1;color:var(--amber);cursor:default} .turn-meta .retry.failed{opacity:1;color:var(--red);background:color-mix(in srgb,var(--red) 10%,transparent); border-radius:5px;padding:5px} .gist{font-size:14px;font-weight:600;line-height:1.55;margin-bottom:10px} .para,.entry > .brief-list{font-size:14px;line-height:1.7;color:var(--text-dim)} .para{margin-bottom:13px} .brief-literal{white-space:pre-wrap;overflow-wrap:anywhere} .brief-markdown{overflow-x:auto} .brief-markdown > :first-child{margin-top:0} .brief-markdown > :last-child{margin-bottom:0} .brief-markdown p{margin:0} /* Inline `code` in brief prose (gist, paragraphs, the asking line, the collapsed gist row): identifiers/paths/values in monospace, a faint chip behind them so they read as literals, not prose. Sized down a touch (.92em) so it sits on the line without bloating it. */ .entry code,.turn-prev code{font-family:var(--mono);font-size:.92em; background:var(--line-2);border-radius:4px;padding:1px 5px; -webkit-box-decoration-break:clone;box-decoration-break:clone} /* The amber judgment: a collapsible "heads up" pill. At rest it shows only the writer's one-line flag_summary, so the brief stays calm and the flag stays unmissable; clicking the head reveals the full judgment prose. */ /* Collapsed: the head is a standalone amber pill. Open: the whole .flag becomes ONE bordered callout — the head and body share a single outline (head corners square off at the bottom, a divider separates them) so the judgment text reads as part of the flag, not a detached paragraph below it. */ .flag{margin-bottom:13px;border:1px solid transparent;border-radius:7px;transition:border-color .12s} .flag.open{border-color:var(--amber-edge)} .flag-head{display:flex;align-items:center;gap:8px;cursor:pointer; background:var(--amber-fill);border:1px solid var(--amber-edge); border-radius:6px;padding:6px 11px;transition:background .12s} .flag-head:hover{background:var(--amber-fill-h)} /* Open: the head drops its own border/radius and becomes the box's header strip, joined to the body by a hairline divider; the shared .flag border is the single outline. */ .flag.open .flag-head{border:none;border-bottom:1px solid var(--amber-rule);border-radius:6px 6px 0 0} .flag-head .ic{color:var(--amber);font-size:12px;flex-shrink:0} .flag-head .ttl{font-size:11.5px;font-weight:600;color:var(--amber);text-transform:uppercase;letter-spacing:.06em;flex-shrink:0} .flag-head .sub{font-size:12.5px;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .flag-head .caret{margin-left:auto;flex-shrink:0;width:0;height:0;border-style:solid; border-width:4px 0 4px 6px;border-color:transparent transparent transparent var(--text-faint); transition:transform .15s} .flag.open .flag-head .caret{transform:rotate(90deg)} .flag-body{display:none;background:var(--amber-body);padding:11px 13px;border-radius:0 0 6px 6px;font-size:14px;line-height:1.7;color:var(--text)} .flag.open .flag-body{display:block} /* The detail fold: collapsible depth — a toggle with the writer's label, expanding to the full content. Visually lighter than the amber flag (neutral, not a judgment). */ .detail-fold{margin-bottom:13px} .detail-toggle{font-size:12px;color:var(--text-faint);cursor:pointer;display:inline-flex; align-items:center;gap:5px;padding:4px 8px;border-radius:5px; background:var(--line-1);border:1px solid var(--line-2)} .detail-toggle:hover{background:var(--line-2);color:var(--text-dim)} .detail-chev{width:0;height:0;border-style:solid;border-width:3px 0 3px 4px; border-color:transparent transparent transparent currentColor;transition:transform .12s} .detail-fold.open .detail-chev{transform:rotate(90deg)} .detail-body{display:none;font-size:13.5px;line-height:1.7;color:var(--text-dim); margin-top:10px;padding-left:12px;border-left:2px solid var(--border)} .detail-fold.open .detail-body{display:block} /* Artifact chips — the turn's openable deliverables, hoisted into one strip under the gist. Same visual family as the docs shelf's rows (border, radius, hover). */ .art-strip{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 13px} .art-chip{display:inline-flex;align-items:baseline;gap:8px;max-width:100%;cursor:pointer; border:1px solid var(--border);border-radius:8px;padding:6px 11px;background:transparent; text-align:left;font:inherit;color:inherit} .art-chip:hover,.art-chip:focus-visible{background:var(--bg-hover);border-color:var(--line-4);outline:0} .art-chip.failed{border-color:color-mix(in srgb,var(--red) 42%,var(--border)); background:color-mix(in srgb,var(--red) 9%,var(--bg-raised))} .art-error{color:var(--red);font:10px/1.35 var(--mono)} .art-name{font-size:12.5px;font-weight:600;color:var(--text);font-family:var(--mono); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .art-role{font-size:11px;color:var(--text-faint); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .art-ext{font-size:11px;color:var(--text-faint)} /* A brief list block — bullets anywhere (top level or inside a fold/flag). Quiet rows with hairline separators; no bullet glyph (the indent + separators carry the list reading). */ .brief-list{margin:6px 0;padding:0;list-style:none} .brief-list li{padding:4px 0;border-bottom:1px solid var(--border)} .brief-list li:last-child{border-bottom:none} .brief-keyed{font-size:14px;line-height:1.65;color:var(--text-dim);margin:6px 0} .brief-keyed strong{color:var(--text)} .brief-table-wrap{margin:8px 0 13px;overflow-x:auto} .brief-table{width:100%;border-collapse:collapse;font-size:13px;line-height:1.45} .brief-table th,.brief-table td{padding:7px 9px;text-align:left;vertical-align:top; border-bottom:1px solid var(--border)} .brief-table th{font-weight:600;color:var(--text);white-space:nowrap} .brief-table td{color:var(--text-dim)} /* Resolved file paths in reading surfaces. Markdown is a plain-click modal link; other extensions keep the Cmd+click OS-open gesture used by the terminal. */ .fpath,.md-local-link,.url,.g-link{display:inline-flex;align-items:center; min-height:var(--control-target); margin:-3px -4px;padding:0 4px;border-radius:4px;color:var(--blue); text-decoration:underline;text-decoration-color:var(--blue-under);text-underline-offset:2px} .fpath{cursor:default}.fpath.markdown-path,.md-local-link,.url,.g-link{cursor:pointer} /* A linked path inside inline code must fragment with the code box. Keeping it inline-flex makes the path wrap inside one atomic child while the parent paints only its first line. */ :not(pre)>code .fpath{display:inline;line-height:28px;margin:-8px -4px;padding:8px 4px; -webkit-box-decoration-break:clone;box-decoration-break:clone} .fpath:hover,.fpath:focus-visible,.md-local-link:hover,.md-local-link:focus-visible, .url:hover,.url:focus-visible,.g-link:hover,.g-link:focus-visible{ background:var(--bg-hover);text-decoration-color:var(--blue);outline:0} /* The file-path picker: a popover anchored under an activated path that names ≥2 files. The shared filename lives once in the header; rows render full parent locations with their leaf folder emphasized, because that is the information that distinguishes the candidates. */ .pick{position:absolute;z-index:120;width:min(410px,calc(100vw - 24px));background:var(--bg-raised);border:1px solid var(--line-3); border-radius:9px;box-shadow:var(--shadow-md);overflow:hidden} .pick-head{display:flex;align-items:baseline;gap:10px;padding:11px 15px 10px;border-bottom:1px solid var(--border)} .pick-head .q{font-family:var(--mono);font-size:12px;color:var(--text)} .pick-head .sub{margin-left:auto;font-size:11px;color:var(--text-faint)} .pick-list{max-height:236px;overflow-y:auto;padding:5px} .pick-row{display:flex;align-items:center;gap:10px;min-height:39px;padding:8px 11px;border:1px solid var(--border); border-radius:7px;cursor:pointer} .pick-row+.pick-row{margin-top:3px} .pick-row.active{background:var(--bg-hover);border-color:transparent;box-shadow:inset 3px 0 var(--blue)} .pick-path{font-family:var(--mono);font-size:12px;line-height:1.45;min-width:0;overflow-wrap:anywhere} .pick-path .dir{color:var(--text-faint)} .pick-path .match{color:var(--text);font-weight:600} .pick-row .meta{margin-left:auto;flex-shrink:0;font-size:10.5px;color:var(--text-faint);white-space:nowrap;text-align:right} .pick-row .meta.recent{color:var(--green)} /* The error-raw box and the audit-failed box: a mono panel that reveals stored text. */ .excerpt{display:none;margin:-4px 0 13px;padding:8px 12px;border-left:2px solid var(--border);font-family:var(--mono);font-size:11.5px;line-height:1.6;color:var(--text-faint);white-space:pre-wrap;word-break:break-word;max-height:220px;overflow-y:auto} .asking{margin-top:14px;font-size:14px;line-height:1.7} .asking .q{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--text-faint);margin-bottom:6px} .asking .stakes{color:var(--text-dim);font-style:italic} .drafts[hidden]{display:none} .drafts{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px} .draft{flex:0 1 auto;min-height:var(--control-target); padding:4px 10px;border:1px solid var(--border);border-radius:6px;background:none; color:var(--text-dim);font:13px/1.4 var(--sans);overflow-wrap:anywhere;cursor:pointer} .draft:hover,.draft:focus-visible{color:var(--text);border-color:var(--text-faint); background:var(--bg-hover);outline:0} .draft:active{background:var(--line-3);transform:translateY(1px)} .dry{font-size:12.5px;color:var(--text-faint);font-style:italic;line-height:1.6} .error-entry{font-size:12.5px;color:var(--red);line-height:1.6;font-family:var(--mono);white-space:pre-wrap} .open-turn{margin-top:24px;font-size:11px;color:var(--text-faint);display:flex;gap:8px;align-items:center} .empty{padding:60px 36px;color:var(--text-faint);font-size:13px;line-height:1.7} .translation-loading,.translation-empty{display:flex;align-items:center;gap:9px; color:var(--text-faint);font-size:12.5px;line-height:1.6} .translation-spinner{width:12px;height:12px;border:1px solid var(--line-4); border-top-color:var(--blue);border-radius:50%;animation:translation-spin .8s linear infinite} @keyframes translation-spin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){.translation-spinner{animation:none;border-color:var(--blue)}} .translation-error{padding:10px 12px;border-left:2px solid var(--red);background:var(--red-fill); color:var(--red);font:12px/1.55 var(--mono);white-space:pre-wrap} .translation-markdown{font-size:14px;line-height:1.7;color:var(--text-dim)} /* ===== right column: live terminal + rendered-answer overlay ===== */ .log{position:relative;width:var(--log-w,560px);flex-shrink:1;min-width:0;background:var(--bg-log);display:flex;flex-direction:column} .log-body{flex:1;overflow:hidden;min-height:0;display:flex;flex-direction:column} .log-surface{position:relative;flex:1;min-height:0} .terminal-deck{position:absolute;inset:0;display:flex;flex-direction:column;min-height:0} .agent-terminal-pane{position:relative;flex:1;min-height:0;background:var(--bg-log)} #lens-term{position:absolute;inset:8px;overflow:hidden} .termwrap{position:absolute;inset:0;display:none} .termwrap.visible{display:block} .termwrap.draft-drag-active::after{content:"";position:absolute;z-index:6;inset:0; border:2px solid var(--blue);border-radius:6px;pointer-events:none} .termwrap .xterm{height:100%} .termwrap .xterm:not(.allow-transparency) .xterm-viewport{background-color:var(--term-bg)} .terminal-action-failure{position:absolute;z-index:5;right:8px;bottom:8px;left:8px; padding:8px 10px;border-top:1px solid color-mix(in srgb,var(--red) 34%,transparent); border-radius:0 0 6px 6px;background:color-mix(in srgb,var(--term-bg) 94%,var(--red)); color:var(--red);font-family:var(--mono);font-size:10px;line-height:1.35;pointer-events:none} .terminal-action-failure[hidden]{display:none} .term-placeholder{padding:24px 16px;font-size:12px;color:var(--text-faint);line-height:1.7} .term-placeholder.clickable{cursor:pointer;color:var(--text-dim)} .term-placeholder.clickable:hover{color:var(--text)} .term-placeholder.session-problem{position:absolute;left:0;right:0;bottom:0;padding:0;color:var(--text)} .session-problem>div{display:flex;flex-direction:column;align-items:flex-start;gap:3px; padding:13px 15px;border-top:1px solid var(--red-edge);background:var(--red-fill)} .session-problem strong{font-size:12.5px;font-weight:650;color:var(--red)} .session-problem span{font-size:11.5px;color:var(--text-dim)} .session-problem button{min-height:var(--control-target);margin-top:5px;padding:0 9px; border:1px solid var(--red-edge);border-radius:6px;background:transparent;color:var(--red); font:600 11.5px var(--sans);cursor:pointer} .session-problem button:hover,.session-problem button:focus-visible{background:var(--red-fill); box-shadow:inset 0 0 0 1px var(--red-edge);outline:0} .answer-expanded-scrim{display:none} .log-surface.reader-expanded .answer-expanded-scrim{display:block;position:fixed;z-index:8;inset:0; background:var(--scrim)} .log-actions{position:absolute;z-index:6;top:12px;right:14px;display:flex;align-items:center;gap:6px; -webkit-app-region:no-drag} .activity-revealed-controls{opacity:0;transform:translateY(-3px);pointer-events:none; transition:opacity 220ms ease,transform 220ms ease} .activity-controls-visible>.activity-revealed-controls, .activity-revealed-controls:has(:focus-visible){opacity:1;transform:translateY(0);pointer-events:auto; transition-duration:160ms} .log-surface.reader-expanded .log-actions{display:none} .answer-read,.shell-open,.answer-expand,.answer-find{display:inline-flex;align-items:center;min-height:var(--control-target); gap:6px;background:var(--bg-raised);color:var(--text-dim);border:1px solid var(--line-3); border-radius:6px;padding:4px 9px;font-family:var(--sans);font-size:11px;cursor:pointer; box-shadow:var(--shadow-sm)} .answer-read:hover,.answer-read:focus-visible,.shell-open:hover,.shell-open:focus-visible, .answer-expand:hover,.answer-expand:focus-visible,.answer-find:hover,.answer-find:focus-visible, .shell-open[aria-pressed="true"],.answer-find[aria-pressed="true"]{color:var(--text); border-color:var(--line-4);background:var(--bg-hover);outline:0} .answer-read.busy{color:var(--text-faint);cursor:default} .answer-read svg,.shell-open svg,.answer-expand svg,.answer-find svg{width:12px;height:12px} .answer-expand[hidden],.answer-find[hidden]{display:none} .shell-open[hidden]{display:none} .user-shell-pane{position:relative;flex:none;height:34%;min-height:0;display:flex; flex-direction:column;background:var(--term-bg);box-shadow:var(--shadow-sm)} .user-shell-pane[hidden],.shell-divider[hidden]{display:none} .user-shell-head{height:34px;flex:none;display:flex;align-items:center;gap:8px;padding:0 6px 0 12px; border-bottom:1px solid var(--border);background:var(--bg-raised)} .user-shell-glyph{color:var(--text-dim);font:12px var(--mono)} .user-shell-folder{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; color:var(--text-dim);font:10.5px var(--mono)} .user-shell-controls{margin-left:auto;display:flex;align-items:center;gap:1px} .user-shell-expand,.user-shell-close{display:grid;place-items:center;padding:0;border:0;border-radius:6px; background:transparent;color:var(--text-faint);cursor:pointer} .user-shell-expand{width:var(--control-target);height:var(--control-target)} .user-shell-close{width:var(--close-target);height:var(--close-target)} .user-shell-expand:hover,.user-shell-expand:focus-visible,.user-shell-close:hover, .user-shell-close:focus-visible,.user-shell-expand[aria-pressed="true"]{ background:var(--line-2);color:var(--text);outline:0} .user-shell-expand svg,.user-shell-close svg{width:14px;height:14px} .user-shell-expand-close{display:none} .user-shell-expand[aria-pressed="true"] .user-shell-expand-open{display:none} .user-shell-expand[aria-pressed="true"] .user-shell-expand-close{display:inline} .user-shell-state-action{min-height:var(--control-target);padding:0 8px;border:1px solid var(--red-edge); border-radius:6px;background:transparent;color:var(--red);font:600 11px var(--sans);cursor:pointer} .user-shell-state-action:hover,.user-shell-state-action:focus-visible{background:var(--red-fill); box-shadow:inset 0 0 0 1px var(--red-edge);outline:0} .user-shell-body{position:relative;flex:1;min-height:0} .user-shell-body .termwrap{inset:8px} .user-shell-failure{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:10px 12px; border-top:1px solid var(--red-edge);background:var(--red-fill);color:var(--red); font:11px/1.45 var(--mono)} .user-shell-failure[hidden]{display:none} .shell-divider{position:relative;z-index:4;flex:none;height:13px;margin-block:-6px;cursor:row-resize} .shell-divider::before{content:"";position:absolute;left:0;right:0;top:6px;height:1px; background:linear-gradient(var(--border),var(--border)),var(--bg-raised)} .shell-divider:hover,.shell-divider:focus-visible{outline:0;background:var(--line-2)} .shell-divider:hover::before{top:5px;height:3px; background:linear-gradient(var(--line-4),var(--line-4)),var(--bg-raised)} .answer-reader{--reader-item-gap:18px;--reader-surface:var(--bg);position:absolute;z-index:5;inset:0; background:var(--reader-surface);display:flex; flex-direction:column} .answer-reader.draft-drag-active::after{content:"";position:absolute;z-index:20;inset:0; border:2px solid var(--blue);border-radius:inherit;pointer-events:none} .answer-reader.expanded{--reader-surface:var(--bg-raised);position:fixed;z-index:9;inset:22px; border:1px solid var(--line-3);border-radius:12px;box-shadow:var(--shadow-lg);overflow:hidden; -webkit-app-region:no-drag} .answer-reader.expanded .answer-find-shelf,.answer-reader.expanded .answer-scroll, .answer-reader.expanded .answer-tail-action,.answer-reader.expanded .answer-compose{ -webkit-app-region:no-drag} .answer-reader-head{display:none} .session-branch-heading{flex:none;padding:16px 24px 12px;font-size:15px;font-weight:600; border-bottom:1px solid var(--border);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .session-branch-heading[hidden]{display:none} .session-branch-boundary{display:flex;align-items:center;justify-content:space-between;gap:12px; border-top:1px solid var(--border);padding-top:12px;margin:24px 0;color:var(--text-dim);font-size:12px} .session-branch-boundary button{min-height:30px;flex:none;padding:5px 8px;border:1px solid var(--border); border-radius:6px;background:transparent;color:var(--text);font:inherit;cursor:pointer} .session-branch-boundary button:hover,.session-branch-boundary button:focus-visible{ background:var(--bg-hover);outline:2px solid var(--border);outline-offset:1px} .session-branch-icon svg{width:16px;height:16px} .answer-reader.expanded .answer-reader-head{height:52px;box-sizing:border-box;padding:0 10px; border-bottom:1px solid var(--border);display:grid; grid-template-columns:minmax(185px,1fr) minmax(220px,420px) minmax(185px,1fr); align-items:center;column-gap:8px;flex-shrink:0;position:relative;overflow:visible} .answer-expanded-navigation{display:flex;align-items:center;gap:4px;min-width:0} .answer-expanded-switcher{position:relative;z-index:13;min-width:0;height:52px;display:flex; align-items:center;-webkit-app-region:no-drag} .answer-expanded-status{max-width:100%;min-height:36px;padding:0 9px;border:0;border-radius:7px; background:transparent;color:var(--text-dim);display:inline-flex;align-items:center;gap:7px; cursor:pointer} .answer-expanded-status[hidden]{display:none} .answer-expanded-status:hover,.answer-expanded-status:focus-visible, .answer-expanded-status[aria-expanded="true"]{background:var(--line-2);color:var(--text);outline:0} .answer-expanded-status>svg{width:12px;height:12px;flex:none;color:var(--text-faint); transition:transform 160ms ease,color 160ms ease} .answer-expanded-status[aria-expanded="true"]>svg{transform:rotate(180deg);color:var(--text-dim)} .answer-expanded-status-summary{min-width:0;display:flex;align-items:center;gap:8px; overflow:hidden;white-space:nowrap;font:11px/1.3 var(--sans)} .answer-expanded-summary-part{display:inline-flex;align-items:center;gap:5px} .answer-expanded-summary-separator{color:var(--text-faint)} .answer-expanded-identity{min-width:0;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:2px} .answer-reader-title-row{max-width:100%;min-width:0;display:flex;align-items:center; justify-content:center;gap:7px} .answer-reader-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; color:var(--text);font:650 13.5px var(--sans)} .answer-expanded-current-status{color:var(--text-dim);font:10.5px/1.1 var(--sans);white-space:nowrap} .answer-expanded-current-status.p-working,.answer-expanded-current-status.p-compacting, .answer-expanded-current-status.p-running{color:var(--blue)} .answer-expanded-current-status.p-waiting,.answer-expanded-current-status.p-rate-limited{color:var(--amber)} .answer-expanded-current-status.p-failed,.answer-expanded-current-status.p-exited, .answer-expanded-current-status.p-interrupted{color:var(--red)} .answer-expanded-actions{min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:6px} .answer-expanded-session-shelf{position:absolute;top:48px;left:0; width:min(480px,calc(100vw - 88px));max-height:min(440px,calc(100vh - 150px)); padding:7px;border:1px solid var(--line-3);border-radius:10px;background:var(--bg-raised); box-shadow:var(--shadow-md);opacity:0;visibility:hidden;pointer-events:none; transform:translateY(-5px) scale(.985);transform-origin:top left; transition:opacity 130ms ease,transform 130ms ease,visibility 0s linear 130ms} .answer-expanded-switcher.open .answer-expanded-session-shelf{opacity:1;visibility:visible; pointer-events:auto;transform:translateY(0) scale(1);transition:opacity 180ms ease,transform 180ms ease} .answer-expanded-shelf-head{padding:7px 9px 6px;color:var(--text-faint);display:flex; align-items:center;justify-content:space-between;font:650 10px/1 var(--sans); letter-spacing:.08em;text-transform:uppercase} .answer-expanded-shelf-count{font-weight:400;letter-spacing:0;text-transform:none} .answer-expanded-session-list{overflow-y:auto;overscroll-behavior:contain;max-height:calc(min(440px,100vh - 150px) - 37px)} .answer-expanded-session-error{padding:12px 9px;color:var(--red);font:11px/1.4 var(--sans)} .answer-expanded-session-row{width:100%;min-height:52px;padding:7px 9px;border:0;border-radius:8px; background:transparent;color:var(--text);display:grid;grid-template-columns:22px minmax(0,1fr) auto; column-gap:9px;align-items:center;text-align:left;cursor:pointer} .answer-expanded-session-row:hover,.answer-expanded-session-row:focus-visible{background:var(--bg-hover); outline:0} .answer-expanded-session-row:active{background:var(--line-3)} .answer-expanded-session-row[aria-current="true"]{background:var(--line-2)} .answer-expanded-session-agent{width:18px;height:18px;display:grid;place-items:center;color:var(--text)} .answer-expanded-session-agent svg{display:block;width:100%;height:100%} .answer-expanded-session-agent.codex svg{transform:scale(1.38)} .answer-expanded-session-copy{min-width:0;display:flex;flex-direction:column;gap:3px} .answer-expanded-session-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap; color:var(--text);font:600 12.5px/1.25 var(--sans)} .answer-expanded-session-scent{overflow:hidden;text-overflow:ellipsis;white-space:nowrap; color:var(--text-faint);font:11px/1.2 var(--sans)} .answer-expanded-session-meta{display:flex;align-items:center;gap:8px;margin-left:8px; color:var(--text-faint);font:10.5px/1 var(--sans);white-space:nowrap} .answer-expanded-session-draft{color:var(--amber)} .answer-expanded-session-draft.risk{color:var(--red)} .answer-expanded-session-status{display:inline-flex;align-items:center;gap:5px} .answer-expanded-action{display:inline-flex;align-items:center;gap:6px;min-height:var(--control-target); padding:0 9px;border:1px solid var(--line-3);border-radius:7px;background:transparent; color:var(--text-dim);font:11px var(--sans);cursor:pointer} .answer-expanded-action:hover,.answer-expanded-action:focus-visible, .answer-expanded-action[aria-pressed="true"]{background:var(--bg-hover);color:var(--text);outline:0} .answer-expanded-action svg{width:12px;height:12px;flex:none} .answer-expanded-close{width:30px;height:30px;padding:0;border:0;border-radius:7px; background:transparent;color:var(--text-faint);font:300 17px/1 var(--sans);cursor:pointer} .answer-expanded-close svg{width:16px;height:16px} .answer-expanded-close:hover,.answer-expanded-close:focus-visible{background:var(--bg-hover); color:var(--text);outline:0} @media (prefers-reduced-motion:reduce){ .activity-revealed-controls,.answer-expanded-status>svg,.answer-expanded-session-shelf{ transition:none} } @media (max-width:760px){ .answer-reader.expanded .answer-reader-head{ grid-template-columns:minmax(132px,1fr) minmax(150px,1.35fr) minmax(132px,1fr); column-gap:4px} .answer-expanded-status{gap:4px;padding-inline:6px} .answer-expanded-status-summary{gap:5px;font-size:10px} .answer-expanded-summary-part{gap:3px} .answer-expanded-status>svg{display:none} .answer-reader-title{font-size:12px} .answer-expanded-action{width:30px;padding:0;justify-content:center} .answer-expanded-action span{display:none} } .answer-expand-close{display:none} .answer-expand[aria-pressed="true"] .answer-expand-open{display:none} .answer-expand[aria-pressed="true"] .answer-expand-close{display:inline} .answer-find-shelf{flex:none;margin-top:52px;padding:12px 28px;border-bottom:1px solid var(--border); background:var(--bg);display:flex;justify-content:center} .answer-find-shelf[hidden]{display:none} .answer-reader.expanded .answer-find-shelf{margin-top:0;background:var(--bg-raised)} .answer-findbar{width:min(620px,100%);min-height:38px;display:flex;align-items:center;gap:3px; padding:3px 4px 3px 10px; border:1px solid var(--line-3);border-radius:8px;background:var(--bg-raised); box-shadow:var(--shadow-sm)} .answer-findbar:focus-within{border-color:color-mix(in srgb,var(--blue) 55%,var(--line-3)); box-shadow:0 0 0 2px color-mix(in srgb,var(--blue) 14%,transparent),var(--shadow-sm)} .answer-findbar-icon{flex:none;width:14px;height:14px;color:var(--text-faint)} .answer-findbar input{min-width:80px;flex:1;height:30px;padding:0 5px;border:0;outline:0; background:transparent;color:var(--text);font:13px var(--sans)} .answer-findbar input::-webkit-search-cancel-button{display:none} .answer-find-count{flex:none;min-width:48px;color:var(--text-dim);font:11px var(--mono); text-align:right;white-space:nowrap} .answer-find-count.error{max-width:210px;color:var(--red);overflow:hidden;text-overflow:ellipsis} .answer-find-step,.answer-find-close{flex:none;display:grid;place-items:center;padding:0;border:0; border-radius:6px;background:transparent;color:var(--text-dim);cursor:pointer} .answer-find-step{width:var(--control-target);height:var(--control-target)} .answer-find-close{width:var(--close-target);height:var(--close-target)} .answer-find-step:hover,.answer-find-step:focus-visible,.answer-find-close:hover, .answer-find-close:focus-visible{background:var(--bg-hover);color:var(--text);outline:0} .answer-find-step:disabled{color:var(--text-faint);cursor:default} .answer-find-step:disabled:hover{background:transparent} .answer-find-step svg,.answer-find-close svg{width:14px;height:14px} .answer-find-shelf:not([hidden])+.answer-scroll-frame .answer-content{padding-top:16px} .answer-scroll-frame{position:relative;isolation:isolate;flex:1;min-height:0;contain:paint; overflow:hidden} /* Conversation children cannot escape above reader chrome, even with their own z-index. The passive and active slots then resolve foreground priority by source order. */ .answer-scroll{position:relative;z-index:0;height:100%;min-height:0;overflow-y:auto; overflow-x:hidden;overflow-anchor:none} .answer-scroll:focus{outline:none} .answer-viewport-runway{height:0;pointer-events:none} .reader-overlay-host{position:absolute;z-index:1;inset:0;pointer-events:none} .reader-overlay-passive,.reader-overlay-active{position:absolute;inset:0;pointer-events:none} .reader-overlay-passive>*,.reader-overlay-active>*{pointer-events:auto} .answer-scroll-frame:has(.reader-overlay-active>:not([hidden])) .reader-overlay-passive{display:none} .answer-tail-action{position:absolute;left:50%;bottom:12px;min-height:32px;padding:0 11px; transform:translateX(-50%); border:1px solid var(--line-4);border-radius:16px;background:var(--bg-raised);color:var(--text); box-shadow:var(--shadow-sm);font:600 11px var(--sans);cursor:pointer} .answer-reader:has(.answer-suggested-replies:not([hidden])) .answer-tail-action{ bottom:calc(22px + var(--answer-suggested-reply-clearance))} .answer-tail-action:hover,.answer-tail-action:focus-visible{background:var(--bg-hover); box-shadow:var(--shadow-sm),inset 0 0 0 1px var(--line-4);outline:0} .answer-tail-action[hidden]{display:none} .answer-content{margin:0;padding:20px var(--reader-content-inline-padding) calc(42px + var(--answer-suggested-reply-clearance)); font-size:14px;line-height:1.7;overflow-wrap:anywhere} .answer-content .fpath,.answer-content .md-local-link,.answer-content .url, .answer-content .g-link{display:inline;line-height:28px;margin:-8px -4px;padding:8px 4px; -webkit-box-decoration-break:clone;box-decoration-break:clone} .answer-reader.expanded .answer-content{box-sizing:border-box;width:100%; max-width:var(--reader-content-max-width);margin:0 auto} .answer-loading-skeleton{position:absolute;inset:0;overflow:hidden;background:var(--bg); pointer-events:none;z-index:1} .answer-loading-shape{width:100%;padding:20px var(--reader-content-inline-padding);opacity:0} .answer-loading-skeleton.visible .answer-loading-shape{opacity:1} .answer-reader.expanded .answer-loading-shape{max-width:var(--reader-content-max-width);margin:0 auto} .answer-loading-shape svg{display:block;width:100%;height:400px} .answer-loading-bubble{fill:var(--bubble);stroke:var(--line-3);vector-effect:non-scaling-stroke} .answer-loading-sweep{animation:startup-skeleton-sweep 1.85s ease-in-out infinite} @media(prefers-reduced-motion:reduce){.answer-loading-sweep{animation:none;visibility:hidden}} /* Fade the sibling branches around the one mounted message; its ancestors never fade. This follows canonical adoption without cloning or mutating historical cells. */ .reader-send-handoff > :not(.reader-send-message):not(:has(.reader-send-message)), .reader-send-handoff :has(.reader-send-message) > :not(.reader-send-message):not(:has(.reader-send-message)){ opacity:var(--reader-send-background-opacity);pointer-events:none} .reader-send-message{translate:0 var(--reader-send-offset);z-index:1;pointer-events:none; will-change:translate} .answer-content.answer-error{color:var(--red);font-family:var(--mono);font-size:12px; white-space:pre-wrap} .answer-exchange + .answer-exchange,.answer-exchange + .answer-live-tail{ margin-top:30px;padding-top:30px;border-top:1px solid var(--border)} .answer-exchange + .answer-exchange.answer-exchange-adopted-in-place{ margin-top:var(--reader-item-gap);padding-top:0;border-top:0} .answer-history-error,.answer-timeline-error{margin-bottom:var(--reader-item-gap);color:var(--red);font-family:var(--mono); font-size:11px;line-height:1.45} .answer-content .answer-message{position:relative} .answer-find-match{padding:1px 0;border-radius:2px;background:color-mix(in srgb,#f4c84a 38%,transparent); color:inherit;box-shadow:inset 0 -1px color-mix(in srgb,#d49a00 55%,transparent)} .answer-find-match.active{background:#f0b429;color:#241700; box-shadow:0 0 0 2px color-mix(in srgb,#f0b429 26%,transparent)} .answer-content .answer-agent{margin:0;padding:0 32px 0 0} .reader-annotation-prose{min-width:0} .answer-raw-block{white-space:pre-wrap;overflow-wrap:anywhere} .reader-annotation-margin{display:none;min-width:0;font-family:var(--sans)} .answer-reader.reader-annotation-margin-enabled .answer-agent.reader-annotation-target{ position:relative} .answer-reader.reader-annotation-margin-enabled .answer-agent.reader-annotation-target .reader-annotation-margin{display:block;position:absolute;top:0; left:calc(100% + var(--reader-content-inline-padding)); width:calc(var(--reader-annotation-margin-width) - var(--reader-content-inline-padding))} .passage-highlight-surface{position:relative;isolation:isolate} .passage-highlight-layer{position:absolute;inset:-3px;width:calc(100% + 6px);height:calc(100% + 6px);overflow:hidden; pointer-events:none;z-index:-1;fill:var(--amber-fill-h);stroke:none} .passage-highlight-layer.linked,.passage-highlight-layer.engaged{ fill:var(--reader-annotation-linked-fill);stroke:var(--reader-annotation-linked-edge);stroke-width:1.5} .passage-highlight-layer.passage-highlight-draft{fill:var(--blue-fill);stroke:var(--blue-edge);stroke-width:1.5} .reader-annotation-highlight,.reader-annotation-draft-highlight{margin:0;padding:0; color:inherit;background:transparent;box-shadow:none;outline:0} .reader-annotation-highlight{cursor:pointer} .reader-annotation-margin-note{padding:2px 5px 3px 11px;border-left:1px solid var(--line-4); border-radius:0 6px 6px 0;color:var(--text-dim);font:11px/1.45 var(--sans);outline:0} .reader-annotation-margin-note.linked,.reader-annotation-margin-note:hover, .reader-annotation-margin-note:focus-visible{border-left-color:var(--amber); background:var(--reader-annotation-linked-fill);color:var(--text); box-shadow:inset 3px 0 var(--amber),0 0 0 1px var(--reader-annotation-linked-edge)} .answer-flow{display:flex;flex-direction:column;align-items:stretch} .answer-content .answer-saying{margin:0;padding:0 32px 0 0;color:var(--text-dim); font-size:14px;line-height:1.7} /* Message boundaries belong to the timeline containers, including Pending and Process. */ .answer-content :is(.answer-exchange,.answer-flow) > :not([hidden]) ~ :not([hidden]){ margin-top:var(--reader-item-gap)} .answer-content .answer-flow > .answer-saying + :is(.answer-evidence-row,.answer-evidence-fold){ margin-top:7px} .answer-content :is(.answer-flow,.answer-evidence-fold-body) > :is(.answer-evidence-row,.answer-evidence-fold) + .answer-evidence-row{margin-top:3px} .answer-content :is(.answer-saying,.reader-annotation-prose) > :first-child, .answer-content .answer-markdown-block:first-child > :first-child, .answer-content .md-body li:first-child{margin-top:0} .answer-content .answer-saying > :nth-last-child(1 of :not(.answer-copy)), .answer-content .reader-annotation-prose > :nth-last-child(1 of :not(.passage-highlight-layer)), .answer-content .answer-markdown-block:nth-last-child(1 of :not(.passage-highlight-layer)) > :last-child, .answer-content .md-body li:last-child{margin-bottom:0} .answer-interruption{margin:0;min-height:28px;display:flex;align-items:center; padding:3px 10px;border-left:3px solid var(--red);color:var(--red);font-size:12px} .reader-answer-failed{padding:9px 12px;border-left:3px solid var(--red); border-radius:0 6px 6px 0;background:var(--red-fill)} .reader-answer-failed-label{display:block;margin-bottom:4px;color:var(--red); font:600 9px/1.4 var(--sans);text-transform:uppercase;letter-spacing:.1em} .reader-answer-failed-detail{color:var(--text);font-size:13px;white-space:pre-wrap; overflow-wrap:anywhere} .answer-content .umsg{margin-left:0;padding-right:72px} .answer-content .answer-user.answer-user-compaction-probe, .answer-content .answer-user.answer-user-compacted{ max-height:180px;overflow:hidden} .answer-content .answer-user.answer-user-compacted, .answer-content .answer-user.answer-user-compaction-expanded{padding-bottom:44px} .answer-content .answer-user.answer-user-compacted::after{ content:'';position:absolute;z-index:1;right:0;bottom:0;left:0;height:72px; pointer-events:none;background:linear-gradient(transparent,var(--bubble) 72%)} .answer-user-compaction-toggle{position:absolute;z-index:2;right:9px;bottom:8px; min-height:28px;padding:0 9px;border:1px solid var(--line-3);border-radius:6px; background:var(--bubble);color:var(--text-dim);font:600 11px var(--sans);cursor:pointer; box-shadow:var(--shadow-sm)} .answer-user-compaction-toggle:hover,.answer-user-compaction-toggle:focus-visible{ background:var(--bg-hover);color:var(--text);border-color:var(--line-4);outline:0} .answer-user-compaction-toggle:active{background:var(--line-3)} .answer-copy{position:absolute;top:0;right:0;width:var(--control-target);height:var(--control-target);display:flex; align-items:center;justify-content:center;padding:0;border:0;border-radius:5px; background:var(--bg);color:var(--text-faint);cursor:pointer;opacity:0;pointer-events:none; transition:opacity .12s,color .12s,background .12s} .answer-user .answer-copy{top:8px;right:8px;background:var(--bubble)} .answer-pending{border-style:dashed;color:var(--text-dim)} .answer-confirming{--pending-confirmed:0%; color:color-mix(in srgb,var(--text) var(--pending-confirmed),var(--text-dim)); border-color:color-mix(in srgb,var(--line-3) var(--pending-confirmed),transparent)} .answer-pending-edge{position:absolute;inset:-1px;border:1px dashed var(--line-3); border-radius:inherit;pointer-events:none} .answer-message:hover>.answer-copy,.answer-message:focus-within>.answer-copy, .answer-copy:focus-visible{opacity:1;pointer-events:auto} .answer-copy:hover,.answer-copy:focus-visible{color:var(--text);background:var(--line-2);outline:0} .answer-copy.copied{color:var(--green)} .answer-copy.failed{opacity:1;pointer-events:auto;color:var(--red); background:color-mix(in srgb,var(--red) 12%,var(--bg));font:700 14px var(--mono)} .answer-copy svg{width:14px;height:14px} .answer-live{display:flex;min-height:28px;align-items:center;gap:8px;color:var(--text-faint); font-family:var(--sans);font-size:11.5px;padding:2px 0} .answer-live.error{color:var(--red)} .answer-live .dot{flex-shrink:0} .answer-evidence-row{min-height:32px;display:block;padding:0; border-radius:7px;color:var(--text-faint);font-size:12px} .answer-reader-enter{animation:answer-reader-enter var(--spring-soft-duration) var(--spring-soft) both} @keyframes answer-reader-enter{ from{opacity:0;transform:translateY(var(--reader-enter-distance))} to{opacity:1;transform:translateY(0)}} .answer-evidence-row.current{color:var(--text)} .answer-evidence-row.failed{color:var(--red)} .answer-evidence-fold,.answer-process-fold{border-radius:7px} .answer-evidence-fold-summary,.answer-process-summary{ min-height:28px;display:flex;align-items:center;gap:8px; padding:3px 10px;border-radius:7px;color:var(--text-faint);cursor:pointer;list-style:none} .answer-evidence-fold-summary::-webkit-details-marker, .answer-process-summary::-webkit-details-marker{display:none} .answer-evidence-fold-summary::before,.answer-process-summary::before{ content:'';flex:none;width:0;height:0;border-style:solid; border-width:4px 0 4px 6px;border-color:transparent transparent transparent currentColor; transition:transform .15s} .answer-evidence-fold[open]>.answer-evidence-fold-summary::before, .answer-process-fold[open]:not(.answer-process-collapsing)>.answer-process-summary::before{transform:rotate(90deg)} .answer-evidence-fold[open]>.answer-evidence-fold-summary{ background:var(--line-2);color:var(--text-dim)} .answer-process-summary{width:fit-content;max-width:100%;color:var(--text-dim)} .answer-evidence-fold-summary:hover, .answer-evidence-fold:focus-within>.answer-evidence-fold-summary, .answer-process-summary:hover,.answer-process-summary:focus-visible{ background:var(--bg-hover);color:var(--text-dim);outline:0; box-shadow:inset 0 0 0 1px var(--line-3)} .answer-evidence-fold-body{display:flex;flex-direction:column} .answer-process-summary:active{background:var(--line-2)} .answer-process-body{display:flex;flex-direction:column;margin-left:13px; padding:4px 0 0 18px;border-left:1px solid var(--line-3)} .answer-process-animating>.answer-process-body{overflow:hidden} .answer-evidence-phrase{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .answer-evidence-phrase,.answer-evidence-phrase code{font-family:var(--sans);color:inherit;background:none;font-size:inherit} /* The bottommost receipt shimmers for as long as the session is working. It is a LIVENESS cue and nothing more — it says the agent is still going rather than hung or idle — so it deliberately does NOT track whether that particular tool call has returned. Later sayings or interruption facts take over the live edge and leave the receipt static. Between calls the bottommost receipt is a settled one, and stopping there would blink the signal off through exactly the silent stretches the reader most needs it. The band is wide (340px) because these rows can contain long action labels: a narrow sweep crosses too little of the row to register. */ .answer-live-tail.working .answer-evidence-row.current.content-tail .answer-evidence-phrase{ background:repeating-linear-gradient(100deg,var(--text) 0,var(--text) 130px, var(--shimmer-trough) 170px,var(--text) 210px,var(--text) 340px); background-size:340px 100%;background-repeat:repeat-x;background-clip:text; -webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent; animation:answer-evidence-shimmer 2.6s linear infinite} @keyframes answer-evidence-shimmer{from{background-position:0 0}to{background-position:340px 0}} .answer-evidence-age{margin-left:auto;flex:none;color:var(--text-faint);padding:0 3px; white-space:nowrap} .answer-live-tail.time-error .answer-evidence-age{color:var(--red)} @media (prefers-reduced-motion:reduce){ .answer-reader-enter{animation:none} .answer-process-summary::before{transition:none} .answer-live-tail.working .answer-evidence-row.current.content-tail .answer-evidence-phrase{ background:none;color:var(--text); -webkit-text-fill-color:currentColor;animation:none} } .reader-annotation-selection{position:absolute;width:var(--reader-annotation-action-size); height:var(--reader-annotation-action-size);display:grid; place-items:center;padding:0;border:1px solid var(--line-4);border-radius:7px; background:var(--bg-raised);color:var(--text);box-shadow:var(--shadow-md);cursor:pointer; opacity:1;transition:opacity 160ms ease,display 160ms allow-discrete} .reader-annotation-selection[hidden]{display:none;opacity:0} @starting-style{.reader-annotation-selection:not([hidden]){opacity:0}} .reader-annotation-selection.block-offer{border-color:transparent;background:transparent; color:var(--text-faint);box-shadow:none} .reader-annotation-selection:hover,.reader-annotation-selection:focus-visible{ background:var(--bg-hover);border-color:var(--line-4);outline:0} .reader-annotation-selection svg{width:15px;height:15px} @media (prefers-reduced-motion:reduce){.reader-annotation-selection{transition:none}} .reader-annotation-popover,.reader-annotation-editor-host{position:absolute;padding:10px 11px; border:1px solid var(--line-4);border-radius:9px;background:var(--bg-raised);color:var(--text); box-shadow:var(--shadow-md);font:11px/1.45 var(--sans);overflow-y:auto; overscroll-behavior:contain} .reader-annotation-popover[hidden],.reader-annotation-editor-host[hidden]{display:none} .reader-annotation-comment-box{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto; align-items:start;gap:7px} .reader-annotation-comment-copy{display:block;min-width:0;white-space:pre-wrap} .reader-annotation-comment-tools{display:flex;gap:2px} .reader-annotation-icon-action{width:28px;height:28px;display:grid;place-items:center;padding:0; border:0;border-radius:6px;background:transparent;color:var(--text-dim);cursor:pointer} .reader-annotation-icon-action:hover,.reader-annotation-icon-action:focus-visible{ background:var(--bg-hover);color:var(--text);outline:0} .reader-annotation-icon-action.danger:hover,.reader-annotation-icon-action.danger:focus-visible{ background:var(--red-fill);color:var(--red)} .reader-annotation-icon-action svg{width:15px;height:15px;pointer-events:none} .reader-annotation-editor,.reader-annotation-review-editor{display:block;width:100%;resize:vertical; min-height:72px;padding:8px 9px;border:1px solid var(--line-4);border-radius:7px; background:var(--bg);color:var(--text);font:12px/1.45 var(--sans);outline:0} .reader-annotation-editor:focus,.reader-annotation-review-editor:focus{border-color:var(--blue); box-shadow:0 0 0 2px var(--blue-fill)} .reader-annotation-draft-editor{display:flex;flex-direction:column;align-items:stretch;gap:6px} .reader-annotation-margin>.reader-annotation-draft-editor{margin:0} .reader-annotation-margin .reader-annotation-editor{min-height:78px} .reader-annotation-draft-actions{display:flex;align-self:flex-end;gap:5px} .reader-annotation-draft-action{min-height:28px;padding:4px 9px;border:0;border-radius:6px; background:transparent;color:var(--text-dim);font:10.5px var(--sans);cursor:pointer} .reader-annotation-draft-action:hover,.reader-annotation-draft-action:focus-visible{ background:var(--bg-hover);color:var(--text);outline:0} .reader-annotation-draft-send{background:var(--text);color:var(--bg);font-weight:600} .reader-annotation-draft-send:hover,.reader-annotation-draft-send:focus-visible{ background:var(--text);color:var(--bg);opacity:.88} .answer-compose{position:relative;z-index:2;flex-shrink:0;background:var(--reader-surface)} .answer-compose-surface{padding:12px 16px 10px;border-top:1px solid var(--border); background:var(--bg-raised)} .answer-compose-inner{position:relative;width:100%;display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:7px 10px} .answer-reader.expanded .answer-compose-inner{max-width:var(--reader-content-max-width);margin:0 auto} .answer-suggested-replies{position:absolute;left:26px;right:16px;bottom:calc(100% + 10px); display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:6px; opacity:1;translate:0 0; transition:opacity var(--spring-snappy-duration) var(--spring-steady), translate var(--spring-snappy-duration) var(--spring-snappy), display var(--spring-snappy-duration) allow-discrete} .answer-compose:has(.reader-annotation-review:not([hidden])) .answer-suggested-replies{ left:72px} .answer-reader.expanded .answer-suggested-replies{right:auto;left:50%; width:var(--reader-content-max-width);max-width:100%;transform:translateX(-50%);padding-left:10px} .answer-reader.expanded .answer-compose:has(.reader-annotation-review:not([hidden])) .answer-suggested-replies{left:50%;padding-left:56px} .answer-suggested-replies[hidden]{display:none;opacity:0;translate:0 5px;pointer-events:none} @starting-style{.answer-suggested-replies:not([hidden]){opacity:0;translate:0 5px}} @media (prefers-reduced-motion:reduce){.answer-suggested-replies{transition:none}} .answer-suggested-reply{min-height:30px;padding:4px 11px;border:1px solid var(--line-3); border-radius:15px;background:color-mix(in srgb,var(--bg-raised) 86%,transparent); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--shadow-sm); color:var(--text-dim);font:11.5px var(--sans);cursor:pointer} .answer-suggested-reply:hover,.answer-suggested-reply:focus-visible{ border-color:var(--line-4);background:color-mix(in srgb,var(--bg-hover) 88%,transparent); color:var(--text);outline:0} .answer-suggested-reply:active{background:var(--blue-fill);color:var(--text)} .reader-annotation-review{grid-column:1;align-self:end;height:34px;min-width:46px; display:flex;align-items:center;justify-content:center;gap:5px;padding:0 8px; border:1px solid var(--line-3);border-radius:7px;background:transparent;color:var(--text-dim); font:11.5px var(--sans);cursor:pointer} .reader-annotation-review[hidden]{display:none} .reader-annotation-review:hover,.reader-annotation-review:focus-visible, .reader-annotation-review[aria-expanded="true"]{background:var(--bg-hover);color:var(--text); border-color:var(--line-4);outline:0} .reader-annotation-review svg{width:15px;height:15px;flex:none} .answer-input-shell{grid-column:2;min-width:0;position:relative} .answer-compose draft-image-editor{width:100%;display:block;resize:none;min-height:36px;max-height:132px; overflow-y:auto;background:var(--bg);color:var(--text);border:1px solid var(--line-3); border-radius:8px;padding:8px 10px;outline:0;font-family:var(--sans);font-size:12.5px; line-height:1.45} .answer-compose draft-image-editor:focus{border-color:var(--line-4)} .answer-compose draft-image-editor:disabled{color:var(--text-dim);cursor:default} .answer-compose draft-image-editor::placeholder{color:var(--text-faint)} .answer-slash-menu{position:absolute;left:0;bottom:calc(100% + 7px);width:min(450px,100%); max-height:min(300px,42vh);overflow-y:auto;padding:5px;border:1px solid var(--line-4); border-radius:9px;background:var(--bg-raised);box-shadow:var(--shadow-md)} .answer-slash-menu[hidden]{display:none} .answer-slash-option{width:100%;min-height:40px;display:grid; grid-template-columns:112px minmax(0,1fr);align-items:center;gap:10px;padding:5px 9px; border:0;border-radius:7px;background:transparent;color:var(--text-dim);text-align:left; cursor:pointer} .answer-slash-option:hover,.answer-slash-option:focus-visible, .answer-slash-option[aria-selected="true"]{background:var(--bg-hover);color:var(--text);outline:0} .answer-slash-option code{color:var(--text);font-family:var(--mono);font-size:12px; font-weight:600} .answer-slash-description{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; color:var(--text-faint);font-size:11.5px} .answer-slash-option[aria-selected="true"] .answer-slash-description{color:var(--text-dim)} .answer-slash-empty{min-height:40px;display:flex;align-items:center;padding:5px 10px; color:var(--text-faint);font-size:11.5px} .answer-compose-actions{grid-column:3;align-self:end;display:flex;gap:6px} .answer-send,.answer-stop{width:82px;height:34px;padding:0 8px;border:1px solid var(--line-4); border-radius:7px;font:600 11.5px var(--sans);cursor:pointer} .answer-stop{background:var(--bg-raised);color:var(--red)} .answer-stop[hidden]{display:none} .answer-stop:hover,.answer-stop:focus-visible{background:color-mix(in srgb,var(--red) 14%,var(--bg-raised)); border-color:var(--red);outline:0} .answer-stop:active{background:color-mix(in srgb,var(--red) 24%,var(--bg-raised))} .answer-stop:disabled{cursor:default;color:var(--text-dim);background:var(--bg-raised);border-color:var(--line-4)} .answer-send{background:var(--text);color:var(--bg)} .answer-send:hover{opacity:.88} .answer-send:disabled{opacity:.35;cursor:default} .answer-compose-error{grid-column:1 / -1;color:var(--red);font-family:var(--mono); font-size:10.5px;line-height:1.45} .reader-annotation-error{grid-column:1 / -1;color:var(--red);font:10.5px/1.45 var(--mono)} .reader-annotation-error[hidden]{display:none} .reader-annotation-review-panel{position:absolute;left:0;bottom:calc(100% + 9px); width:min(500px,calc(100% - 62px));max-height:min(300px,45vh);overflow-y:auto; padding:4px 10px;border:1px solid var(--line-4);border-radius:9px;background:var(--bg-raised); box-shadow:var(--shadow-md)} .reader-annotation-review-panel[hidden]{display:none} .reader-annotation-review-item{position:relative;padding:9px 4px 10px} .reader-annotation-review-item+.reader-annotation-review-item{border-top:1px solid var(--border)} .reader-annotation-review-tools{position:absolute;top:5px;right:0;display:flex;gap:1px;opacity:0} .reader-annotation-review-item:hover .reader-annotation-review-tools, .reader-annotation-review-item:focus-within .reader-annotation-review-tools{opacity:1} .reader-annotation-review-item blockquote{display:-webkit-box;margin:0 92px 4px 0; overflow:hidden;padding-left:8px;border-left:1px solid var(--line-4);color:var(--text-faint); font:11px/1.35 Georgia,serif;-webkit-box-orient:vertical;-webkit-line-clamp:2} .reader-annotation-review-line{margin:0 92px 5px 0;color:var(--text-faint); font:10.5px/1.4 var(--sans)} .reader-annotation-review-item p{margin:0;color:var(--text);font:11.5px/1.45 var(--sans)} .reader-annotation-review-editor{min-height:66px} .reader-feature-failure,.draft-risk{flex-shrink:0;display:flex;align-items:center;gap:9px; min-height:38px;margin:0 8px 8px;padding:5px 8px 5px 10px;border:1px solid var(--red-edge); border-radius:8px;background:var(--red-fill);color:var(--red);font-size:10.5px;line-height:1.4} .reader-feature-failure>span:first-child,.draft-risk>span:first-child{min-width:0;flex:1} .reader-feature-failure button,.draft-risk button{min-height:var(--control-target);flex:none; padding:4px 8px;border:0;border-radius:6px;background:transparent;color:var(--red); font:600 10.5px var(--sans);cursor:pointer} .reader-feature-failure button:hover,.reader-feature-failure button:focus, .draft-risk button:hover,.draft-risk button:focus{background:var(--red-fill); box-shadow:inset 0 0 0 1px var(--red-edge);outline:0} .draft-risk-copy-error{color:var(--red);font-size:10px} .answer-compose.draft-at-risk draft-image-editor{border-color:var(--red)} .recent-screenshots{height:38px;flex-shrink:0;align-items:center;padding:0 8px; border-top:1px solid var(--border);background:var(--bg-raised)} .recent-screenshots.expanded{height:auto;align-items:flex-start;padding:9px 10px} .recent-screenshots.attached{border-top-color:var(--green-edge)} .recent-screenshots-mini{display:flex;min-width:0;flex:1;height:38px;align-items:center; gap:5px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none} .recent-screenshots-mini::-webkit-scrollbar{display:none} .recent-screenshot-offer{display:flex;min-width:0;flex:1;height:38px;align-items:center;gap:8px} .recent-screenshot-offer-copy{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis; white-space:nowrap;color:var(--text-dim);font-size:10.5px} .recent-screenshot-offer.error .recent-screenshot-offer-copy{color:var(--red)} .recent-screenshot-offer-action{min-height:var(--control-target);flex:none;padding:0 9px; border:0;border-radius:6px;background:var(--blue-fill);color:var(--blue); font:600 10.5px var(--sans);cursor:pointer} .recent-screenshot-offer-action:hover,.recent-screenshot-offer-action:focus-visible{ background:var(--blue-fill-h);box-shadow:inset 0 0 0 1px var(--blue-edge-h);outline:0} .recent-screenshot-offer-action:disabled{color:var(--text-faint);background:var(--line-2); box-shadow:none;cursor:default} .recent-screenshot-mini{position:relative;width:42px;height:30px;flex:0 0 42px; overflow:hidden;padding:2px;border:1px solid var(--line-3);border-radius:5px; background:var(--bg);color:var(--text);cursor:pointer} .recent-screenshot-mini:hover,.recent-screenshot-mini:focus-visible{border-color:var(--line-5); background:var(--line-2);box-shadow:inset 0 0 0 1px var(--line-4);outline:0} .recent-screenshot-mini.attached{border-color:var(--green);box-shadow:inset 0 -2px var(--green)} .recent-screenshot-mini.attached:hover,.recent-screenshot-mini.attached:focus-visible{ background:var(--green-fill-h);box-shadow:inset 0 -2px var(--green), inset 0 0 0 1px var(--green-edge-h)} .recent-screenshot-mini img{display:block;width:100%;height:100%;border-radius:2px; object-fit:cover} .recent-screenshot-mini-state{position:absolute;right:1px;top:1px;display:grid;width:14px; height:14px;place-items:center;border-radius:50%;background:var(--text-dim); color:var(--bg-raised);font:700 9px/14px var(--sans);pointer-events:none} .recent-screenshot-mini.attached .recent-screenshot-mini-state{background:var(--green);color:#fff} .recent-screenshot-mini.failed{border-color:var(--red)} .recent-screenshot-mini.failed .recent-screenshot-mini-state, .recent-screenshot-mini-error{background:var(--red-fill);color:var(--red)} .recent-screenshot-mini-error{width:30px;flex-basis:30px;font:700 13px var(--sans)} .recent-screenshot-mini-error:hover,.recent-screenshot-mini-error:focus-visible{ border-color:var(--red);background:var(--red-fill);box-shadow:inset 0 0 0 1px var(--red-edge)} .recent-screenshots-content{display:none;min-width:0;flex:1;align-self:stretch; flex-direction:column;gap:6px} .recent-screenshots.expanded .recent-screenshots-mini{display:none} .recent-screenshots.expanded .recent-screenshots-content{display:flex} .recent-screenshots-toggle{display:none;width:var(--close-target);height:var(--close-target); flex:0 0 var(--close-target);margin-left:8px;border:0;border-radius:7px;background:none; padding:0;color:var(--text-dim);font:20px/1 var(--sans);cursor:pointer} .recent-screenshots.expanded .recent-screenshots-toggle, .recent-screenshots.offer .recent-screenshots-toggle{display:block} .recent-screenshots-toggle:hover,.recent-screenshots-toggle:focus-visible{color:var(--text); background:var(--line-2);outline:0} .recent-screenshots-track{display:flex;gap:7px;overflow-x:auto;overflow-y:hidden; min-height:56px;padding-bottom:2px} .recent-screenshot{position:relative;width:76px;height:54px;flex:0 0 76px;overflow:hidden; border:1px solid var(--line-3);border-radius:6px;background:var(--bg)} .recent-screenshot.attached{border-color:var(--green)} .recent-screenshot.failed{border-color:var(--red)} .recent-screenshot-preview{display:block;width:100%;height:100%;padding:0;border:0; background:none;cursor:zoom-in} .recent-screenshot-preview:hover{opacity:.9} .recent-screenshot-preview:focus-visible{outline:1px solid var(--text);outline-offset:-2px} .recent-screenshot-preview img{display:block;width:100%;height:100%;object-fit:cover} .recent-screenshot-attach{position:absolute;right:3px;top:3px;width:var(--control-target); height:var(--control-target);padding:0;border:1px solid rgba(255,255,255,.6);border-radius:50%; background:rgba(0,0,0,.72);color:#fff;font-size:16px;line-height:1;cursor:pointer} .recent-screenshot-attach:hover,.recent-screenshot-attach:focus-visible{background:var(--green); border-color:#fff;box-shadow:0 0 0 2px rgba(0,0,0,.45);outline:0} .recent-screenshot-attach:disabled{border-color:rgba(255,255,255,.4);color:#fff; background:var(--green);cursor:default} .recent-screenshot-badge{position:absolute;left:3px;bottom:3px;padding:2px 4px; border-radius:3px;background:var(--green);color:#fff;font-size:8px;font-weight:600; line-height:1;pointer-events:none} .recent-screenshots-error{margin:0 2px;color:var(--red);font-family:var(--mono); font-size:10px;line-height:1.4} .answer-screenshot-host{padding:0 16px;max-width:100%} .answer-screenshot-host:has(.recent-screenshots[style*="display: flex"]){padding-top:16px;padding-bottom:10px} .answer-reader:has(.answer-screenshot-host .recent-screenshots[style*="display: flex"]) .answer-scroll-frame::after{content:"";position:absolute;z-index:0;left:0;right:0;bottom:0; height:40px;pointer-events:none;background:linear-gradient(transparent,var(--reader-surface))} .answer-compose:has(.answer-screenshot-host .recent-screenshots[style*="display: flex"]) .answer-compose-surface{padding-top:2px;border-top:0;background:transparent} .answer-reader.expanded .answer-screenshot-host{width:calc(var(--reader-content-max-width) + 32px); max-width:100%;margin:0 auto} #terminal-screenshot-host{flex-shrink:0} .recent-screenshots.floating{width:fit-content;max-width:100%;height:auto;padding:0; border:0;background:transparent;align-items:flex-start} .recent-screenshots.floating:not(.offer) .recent-screenshots-mini{display:none} .recent-screenshots.floating:not(.offer) .recent-screenshots-content{display:flex;flex:initial} .recent-screenshots.floating .recent-screenshots-track{flex-wrap:wrap;overflow:visible; min-height:0;padding:0;gap:8px} .recent-screenshots.floating .recent-screenshots-toggle{display:block} .floating-thumbnail{width:88px;height:84px;flex:0 0 88px;border-radius:8px;background:var(--bg-raised)} .floating-thumbnail .recent-screenshot-preview{height:54px;position:relative} .floating-thumbnail .recent-screenshot-preview img{object-fit:contain} .floating-thumbnail .recent-screenshot-preview:hover, .floating-thumbnail .recent-screenshot-preview:focus-visible{opacity:1;background:var(--line-2);outline:0} .floating-thumbnail .recent-screenshot-preview:hover::after, .floating-thumbnail .recent-screenshot-preview:focus-visible::after{content:'↗';position:absolute; inset:0;display:grid;place-items:center;background:var(--line-3);color:var(--text);font-size:18px} .floating-thumbnail .recent-screenshot-attach{position:static;display:block;width:100%;height:28px; border:0;border-top:1px solid var(--line-3);border-radius:0;background:transparent; color:var(--text-dim);font:11px var(--sans)} .floating-thumbnail .recent-screenshot-attach:hover, .floating-thumbnail .recent-screenshot-attach:focus-visible{background:var(--blue-fill-h); color:var(--blue);box-shadow:none;outline:0} .floating-thumbnail.attached{border-color:var(--blue-edge)} .screenshot-attachment-confirmed .recent-screenshot-attach{background:var(--blue-fill);color:var(--blue)} .floating-thumbnail .recent-screenshot-attach:disabled{cursor:default} .screenshot-browse,.screenshot-shelf-close{display:inline-flex;align-items:center;justify-content:center; width:32px;height:32px;flex:0 0 32px;padding:0;border:0;border-radius:7px; background:transparent;color:var(--text-dim);cursor:pointer} .screenshot-browse[hidden]{display:none} .screenshot-browse svg{width:16px;height:16px} .screenshot-shelf-close{font:20px var(--sans)} .screenshot-browse:hover,.screenshot-browse:focus-visible, .screenshot-shelf-close:hover,.screenshot-shelf-close:focus-visible{background:var(--line-2); color:var(--text);outline:0} .screenshot-browse[aria-expanded="true"]{background:var(--blue-fill);color:var(--blue)} .recent-screenshot-viewer{z-index:14} .recent-screenshot-viewer-box{display:flex;flex-direction:column;width:min(1000px,calc(100% - 56px)); height:min(760px,calc(100% - 56px));overflow:hidden;background:var(--bg-raised); border:1px solid var(--border);border-radius:10px;box-shadow:0 18px 60px rgba(0,0,0,.35)} .recent-screenshot-viewer-head,.recent-screenshot-viewer-foot{display:flex;align-items:center; gap:12px;flex-shrink:0;padding:10px 13px} .recent-screenshot-viewer-head{border-bottom:1px solid var(--border);font-size:11px; font-weight:600;color:var(--text)} .recent-screenshot-viewer-head span{min-width:0;overflow:hidden;text-overflow:ellipsis; white-space:nowrap} .recent-screenshot-viewer-head button{width:var(--close-target);height:var(--close-target); margin:-6px -6px -6px auto;padding:0;border:0;border-radius:7px;background:none; color:var(--text-dim);font:20px/1 var(--sans);cursor:pointer} .recent-screenshot-viewer-head button:hover,.recent-screenshot-viewer-head button:focus-visible{ color:var(--text);background:var(--line-2);outline:0} .recent-screenshot-viewer-stage{display:flex;flex:1;min-height:0;align-items:center; justify-content:center;padding:16px;background:var(--bg)} .recent-screenshot-viewer-stage img{display:block;max-width:100%;max-height:100%; object-fit:contain;box-shadow:0 4px 22px rgba(0,0,0,.24)} .recent-screenshot-viewer-foot{justify-content:flex-end;border-top:1px solid var(--border)} .recent-screenshot-viewer-status{margin-right:auto;color:var(--green);font-size:10px; font-weight:600} .recent-screenshot-viewer-attach{min-width:170px;height:42px;padding:0 18px;border:1px solid var(--line-4); border-radius:6px;background:var(--text);color:var(--bg);font-family:var(--sans); font-size:12.5px;font-weight:600;cursor:pointer} .recent-screenshot-viewer-attach:hover{opacity:.88} .recent-screenshot-viewer-attach:disabled{opacity:.45;cursor:default} .md-body .md-local-link-broken{color:var(--red);text-decoration:underline dotted; text-underline-offset:2px} .md-image-inert,.md-link-inert{color:var(--text-faint)} .overlay{position:fixed;inset:0;background:var(--scrim);display:flex;align-items:center;justify-content:center;z-index:10} .overlay-box{background:var(--bg-raised);border:1px solid var(--border);border-radius:10px;padding:22px 26px;width:560px;max-height:74vh;overflow-y:auto} .interruption-modal{width:min(680px,calc(100vw - 40px));max-height:min(680px,calc(100vh - 40px)); display:flex;flex-direction:column;background:var(--bg-raised);border:1px solid var(--border); border-radius:11px;box-shadow:var(--shadow-lg);overflow:hidden} .interruption-head{height:52px;display:flex;align-items:center;padding:0 12px 0 20px; border-bottom:1px solid var(--border);font-size:14px;font-weight:680;flex-shrink:0} .interruption-close{margin-left:auto;width:var(--close-target);height:var(--close-target); border:0;border-radius:7px;background:transparent;color:var(--text-faint);font:15px/1 var(--sans); cursor:pointer} .interruption-close:hover,.interruption-close:focus-visible{background:var(--bg-hover); color:var(--text);outline:0} .interruption-list{overflow-y:auto} .interruption-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center; gap:8px 18px;padding:15px 18px 15px 20px; border-bottom:1px solid var(--border)} .interruption-row:last-child{border-bottom:0} .interruption-copy{flex:1;min-width:0} .interruption-name{font-size:13px;font-weight:650;color:var(--text);white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .interruption-meta{margin-top:4px;font-size:11px;color:var(--amber);white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .interruption-scent{margin-top:5px;font-size:11.5px;line-height:1.4;color:var(--text-dim); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .interruption-actions{display:flex;gap:7px;flex-shrink:0} .interruption-action{min-height:var(--control-target);padding:0 10px;border:1px solid var(--line-3); border-radius:7px;background:transparent;color:var(--text-dim);font:12px var(--sans);cursor:pointer} .interruption-action:hover,.interruption-action:focus-visible{background:var(--line-2); border-color:var(--line-4);color:var(--text);outline:0} .interruption-action.primary{border-color:var(--amber-edge);background:var(--amber-fill); color:var(--amber);font-weight:650} .interruption-action.primary:hover,.interruption-action.primary:focus-visible{ background:var(--amber-fill-h);border-color:var(--amber)} .interruption-action:disabled{opacity:.55;cursor:default} .interruption-row.interruption-action-failed{border-color:var(--red-edge);background:var(--red-fill)} .interruption-action.failed{border-color:var(--red);color:var(--red);background:var(--red-fill)} .interruption-action-error{grid-column:1/-1;color:var(--red);font-size:11px;line-height:1.4} .inline-action-failed{color:var(--red)!important;background:var(--red-fill)!important; box-shadow:inset 0 0 0 1px var(--red-edge);border-radius:4px} .inline-action-error{margin-left:6px;color:var(--red);font-size:11px;line-height:1.4} /* Per-agent icon on each rail row — the brand glyph (Claude's sunburst, Codex's monogram knot) so a glance tells the two apart even when titles look identical. Inline SVG injected at update time (see rail.js AGENT_GLYPHS). Tight sizing — the rail is space-poor, so the icon is the minimum that still reads as a brand mark. The title line owns the 5px gap. */ .session-title .agenticon{display:inline-flex;align-items:center;justify-content:center; width:11px;height:11px;flex-shrink:0;align-self:center;color:var(--text-dim)} .session-title .agenticon svg{width:100%;height:100%;display:block} /* The Codex SVG's path fills only ~67% of its viewBox (vs Claude's ~95%), so it renders visibly smaller at the same container size. Scale up so the two brands feel evenly weighted. Measured by inspecting the path bounding box vs the 721×721 viewBox. */ .session-title .agenticon.codex svg{transform:scale(1.41)} /* Codex's mark is monochrome and its source fill is white — invisible on the light ground. It ships as currentColor (rail.js), so the ink is set here and follows the theme. Set on the CONTAINER, not a .codex variant: only two of the four mounts tag the agent onto the element (rail rows and the launcher pill do; search and MRU rows don't), and Claude's sunburst carries its own brand fill, so it ignores this. */ .agenticon,.lp-icon,.sr-icon,.mru-icon{color:var(--text)} /* New-session launcher pill — a split control: left chevron opens the agent dropdown, right icon is the default agent's brand glyph (one click launches it). Both the Now tools and each repo group mount one (built in launcher.js buildLauncherPill). */ .launcher-pill{display:inline-flex;align-items:center;border:1px solid var(--border); border-radius:7px;overflow:hidden;-webkit-app-region:no-drag;line-height:1} .launcher-pill .lp-picker{display:inline-flex;align-items:center;justify-content:center; width:var(--control-target);height:var(--control-target);color:var(--text-faint);padding:0; border:0;background:transparent;cursor:pointer} .launcher-pill .lp-picker:hover,.launcher-pill .lp-picker:focus-visible{ color:var(--text);background:var(--bg-hover);outline:0} .launcher-pill .lp-picker svg{width:14px;height:14px;display:block} .launcher-pill .lp-icon{display:inline-flex;align-items:center;justify-content:center; width:var(--control-target);height:var(--control-target);padding:0;border:0; border-left:1px solid var(--border);background:transparent;color:var(--text);opacity:.95;cursor:pointer} .launcher-pill .lp-icon:hover,.launcher-pill .lp-icon:focus-visible{background:var(--bg-hover);outline:0} .launcher-pill .lp-icon svg{width:13px;height:13px;display:block} .launcher-pill .lp-icon.codex svg{transform:scale(1.41)} /* The rail's agent picker remains anchored to the split button; choosing a row opens the first-message overlay with that agent selected. */ .agent-dropdown{position:fixed;z-index:1000;background:var(--bg-raised);border:1px solid var(--border); border-radius:7px;width:230px;padding:4px;box-shadow:var(--shadow-sm)} .agent-dropdown-row{width:100%;min-height:var(--control-target);padding:7px 10px;border:0; border-radius:5px;background:transparent;cursor:pointer;display:flex;align-items:center;gap:8px; font:13px var(--sans);color:var(--text);text-align:left;user-select:none} .agent-dropdown-row:hover,.agent-dropdown-row:focus-visible{background:var(--bg-hover);outline:0} .agent-dropdown-row .agenticon{display:inline-flex;align-items:center;justify-content:center; width:14px;height:14px;flex-shrink:0} .agent-dropdown-row .agenticon svg{width:100%;height:100%;display:block} .agent-dropdown-row .agenticon.codex svg{transform:scale(1.41)} /* New session owns the workspace and its selected rail draft until Start hands it off. */ .content.new-session-open > :not(.new-session-canvas){visibility:hidden!important;pointer-events:none} .new-session-canvas{position:absolute;inset:0;z-index:3;container-type:inline-size;flex-direction:column;background:var(--bg-log)} .new-session-navigation{height:42px;flex:none;display:flex;align-items:center;padding:0 16px} .new-session-stage{flex:1;min-height:0;overflow:auto;overflow-anchor:none;display:flex;align-items:safe center; justify-content:center;padding:24px 40px max(64px,10vh)} .new-session-form{position:relative;width:min(680px,100%);margin:0} .new-session-title{color:var(--text);font-size:clamp(24px,2.5vw,36px);line-height:1.25; font-weight:450;letter-spacing:-.025em;text-align:center;margin:0 0 30px;text-wrap:balance} .new-session-composer{position:relative;margin:0 0 16px;border:1px solid var(--line-3); border-radius:9px;background:var(--bg-raised);overflow:visible} .new-session-composer:focus-within{border-color:var(--line-4)} .new-session-composer.draft-drag-active::after{content:"";position:absolute;z-index:5;inset:-1px; border:2px solid var(--blue);border-radius:9px;background:var(--blue-fill);pointer-events:none} #new-session-input{display:block;width:100%;min-height:72px;max-height:280px;padding:16px 18px 8px; overflow-y:auto;resize:none;border:0;outline:0;background:transparent;color:var(--text); font:14px/1.5 var(--sans);transition:height 200ms var(--spring-steady)} #new-session-input::placeholder{color:var(--text-faint)} #new-session-input:disabled{color:var(--text-dim);cursor:default} .new-session-screenshot-card[hidden]{display:none} .new-session-screenshot-card{display:flex;align-items:flex-start;gap:8px;width:fit-content;max-width:100%;margin:0 0 10px} .new-session-screenshot-track{display:flex;align-items:flex-start;flex-wrap:wrap;gap:8px} .new-session-meta{min-height:34px;display:flex;align-items:center;gap:8px;padding:2px 8px 7px 12px} .new-session-value{min-height:var(--control-target);display:inline-flex;align-items:center; min-width:0;gap:7px;padding:0 7px;border:0;border-radius:7px;background:transparent;color:var(--text-dim); font-family:var(--sans);cursor:pointer} .new-session-value{max-width:230px;font-size:12px} .new-session-model-trigger{max-width:210px} .new-session-effort-usage{display:flex;align-items:center;gap:8px;flex-shrink:0} #new-session-usage-slot{display:contents} .new-session-effort-trigger{flex-shrink:0} .new-session-canvas > .usage-pop{right:auto;overflow-y:auto;overscroll-behavior:contain} .new-session-effort-trigger[hidden]{display:none} .new-session-value svg{width:13px;height:13px;flex:none} .new-session-value-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .new-session-agent-mark{width:14px;height:14px;display:inline-flex;align-items:center; justify-content:center;flex:none;color:var(--text)} .new-session-agent-mark svg{width:100%;height:100%;display:block} .new-session-agent-mark.codex svg{transform:scale(1.41)} .new-session-value:hover,.new-session-value:focus-visible, .new-session-value[aria-expanded="true"]{background:var(--line-2);color:var(--text);outline:0} .new-session-value:disabled{background:transparent;color:var(--text-faint); cursor:default} .new-session-spacer{flex:1} .new-session-start{flex:none;min-width:54px;min-height:var(--control-target);padding:5px 11px; border:1px solid var(--text);border-radius:7px;background:var(--text);color:var(--bg); font:600 12px var(--sans);cursor:pointer} .new-session-start:hover,.new-session-start:focus-visible{opacity:.88;outline:0} .new-session-start:disabled{border-color:var(--line-2);background:var(--bg-hover); color:var(--text-faint);cursor:default;opacity:1} .new-session-menu{position:absolute;z-index:2;width:230px;max-width:calc(100% - 16px);max-height:360px; overflow-y:auto;overscroll-behavior:contain;padding:4px;border:1px solid var(--border);border-radius:7px; background:var(--bg-raised);box-shadow:var(--shadow-sm)} .new-session-menu[hidden]{display:none} .new-session-model-menu{width:310px} .new-session-effort-menu{width:170px} .new-session-effort-menu .new-session-menu-row[aria-pressed="true"]{background:var(--blue-fill)} .new-session-effort-menu .new-session-menu-row[aria-pressed="true"]:is(:hover,:focus-visible){background:var(--blue-fill-h)} .new-session-menu-row{width:100%;min-height:var(--control-target);display:flex;align-items:center; gap:9px;padding:7px 10px;border:0;border-radius:5px;background:transparent;color:var(--text); font-family:var(--sans);text-align:left;cursor:pointer} .new-session-menu-row:hover,.new-session-menu-row:focus-visible{background:var(--bg-hover);outline:0} .new-session-menu-copy{min-width:0;display:flex;flex-direction:column;gap:2px} .new-session-menu-name{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .new-session-menu-path{font:10px var(--mono);color:var(--text-faint);overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .new-session-model-menu .new-session-menu-path{font-family:var(--sans)} .new-session-menu-age{margin-left:auto;flex:none;font-size:10px;color:var(--text-faint)} .new-session-menu-check{width:15px;flex:none;color:var(--blue);font-size:13px} .new-session-menu-agent{width:14px;height:14px;display:inline-flex;align-items:center; justify-content:center;flex:none;color:var(--text)} .new-session-menu-agent svg{width:100%;height:100%;display:block} .new-session-menu-agent.codex svg{transform:scale(1.41)} .new-session-menu-add{margin-top:4px;border-top:1px solid var(--border);border-radius:0 0 5px 5px} .new-session-status,.new-session-error{margin:-4px 2px 12px;font-size:11px;line-height:1.45} .new-session-status:empty,.new-session-error:empty{display:none} .new-session-status{display:flex;align-items:center;gap:8px;color:var(--text-faint)} .new-session-error{color:var(--red)} .new-session-spinner{width:11px;height:11px;border:1.5px solid var(--line-4); border-top-color:var(--text-dim);border-radius:50%;animation:new-session-spin .72s linear infinite} @keyframes new-session-spin{to{transform:rotate(360deg)}} @media(max-width:860px){ .new-session-stage{padding-inline:24px} .new-session-form{width:100%} .new-session-meta{display:grid;grid-template-columns:auto minmax(0,auto) 1fr auto;gap:4px} .new-session-value{max-width:150px} .new-session-model-trigger{max-width:150px;grid-row:2;grid-column:1 / 3;justify-self:start} .new-session-effort-usage{grid-row:2;grid-column:3 / 5;justify-self:start} .new-session-spacer{display:none} .new-session-start{grid-row:1;grid-column:4} } @container(max-width:380px){ .new-session-stage{padding-inline:16px} .new-session-meta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px} .new-session-value{max-width:100%;justify-self:start} #new-session-project,#new-session-agent{grid-column:1 / -1} .new-session-model-trigger{grid-row:3;grid-column:1} .new-session-effort-usage{grid-row:4;grid-column:1;gap:4px} .new-session-start{grid-row:4;grid-column:2} .new-session-spacer{display:none} } /* Session-row right-click menu — shared by rail and search results; rail.js clamps it. */ .row-context-menu{position:fixed;z-index:1000;background:var(--bg-raised);border:1px solid var(--border); border-radius:7px;padding:4px;box-shadow:var(--shadow-sm)} .row-context-row{display:flex;align-items:center;gap:8px;width:100%;min-height:32px;padding:0 10px;border:0; border-radius:5px;background:transparent;cursor:pointer;font:13px var(--sans);text-align:left; color:var(--text);user-select:none;white-space:nowrap} .row-context-icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex:none} .row-context-icon svg{width:16px;height:16px;flex:none;stroke-width:1.8} .row-context-separator{height:1px;margin:4px 6px;background:var(--border)} .row-context-row:hover,.row-context-row:focus-visible{background:var(--bg-hover);outline:0} .row-context-row:disabled{cursor:wait;opacity:.55} .row-context-row.danger{color:var(--red)} .row-context-row.failed,.row-context-row.failed:hover,.row-context-row.failed:focus-visible{ color:var(--red);background:var(--red-fill);box-shadow:inset 0 0 0 1px var(--red-edge)} .row-context-error{padding:6px 10px 3px;color:var(--red);font-size:11px;line-height:1.35} /* One anchored editor serves add, edit, and remove. The tag stays in the rail while this floats above it, so status repaints cannot destroy in-progress text. */ .session-tag-editor{position:fixed;z-index:1000;width:220px;background:var(--bg-raised); border:1px solid var(--border);border-radius:7px;padding:6px;box-shadow:var(--shadow-sm)} .session-tag-form{display:flex;align-items:center;gap:6px} .session-tag-input{min-width:0;flex:1;background:var(--bg);border:1px solid var(--line-3); border-radius:5px;outline:0;color:var(--text);font-family:var(--sans);font-size:12.5px; padding:6px 8px} .session-tag-input:focus{border-color:var(--line-5)} .session-tag-input[aria-invalid="true"]{border-color:var(--red)} .session-tag-save,.session-tag-remove{min-height:28px;border:0;border-radius:5px; background:transparent;font-family:var(--sans);font-size:12px;cursor:pointer} .session-tag-save{padding:6px 8px;color:var(--text-dim)} .session-tag-save:hover,.session-tag-save:focus-visible{background:var(--bg-hover);color:var(--text);outline:0} .session-tag-suggestion{display:flex;width:100%;min-height:32px;margin-top:4px;padding:6px 8px; align-items:center;gap:7px;border:0;border-radius:5px;background:transparent;color:var(--text); font-family:var(--sans);font-size:12.5px;text-align:left;cursor:pointer} .session-tag-suggestion:hover,.session-tag-suggestion:focus-visible{background:var(--green-fill-h); box-shadow:inset 0 0 0 1px var(--green-edge-h);outline:0} .session-tag-suggestion-icon{width:15px;height:15px;display:flex;align-items:center;justify-content:center; flex:0 0 15px;color:var(--green)} .session-tag-suggestion-icon svg{width:15px;height:15px;display:block} .session-tag-suggestion-copy{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .session-tag-suggestion.loading{cursor:wait} .session-tag-suggestion.loading .session-tag-suggestion-copy{width:76px;height:7px;border-radius:4px; background:var(--line-2);animation:tag-suggestion-pulse .7s ease-in-out infinite alternate} .session-tag-suggestion.failed{cursor:default;color:var(--red);font-size:10.5px;line-height:1.35; align-items:flex-start;white-space:normal} .session-tag-suggestion.failed .session-tag-suggestion-icon{color:var(--red)} .session-tag-suggestion:disabled{opacity:1} .session-tag-suggestion.failed:hover,.session-tag-suggestion.failed:focus-visible, .session-tag-suggestion.loading:hover{background:transparent;box-shadow:none;outline:0} .session-tag-suggestion.off{display:none} @keyframes tag-suggestion-pulse{to{opacity:.42}} .session-tag-remove{display:block;width:100%;margin-top:4px;padding:6px 8px;text-align:left; color:var(--red)} .session-tag-remove:hover,.session-tag-remove:focus-visible{background:var(--red-fill);outline:0} .session-tag-save:disabled,.session-tag-remove:disabled{cursor:default;opacity:.5} .session-tag-error{padding:5px 2px 1px;color:var(--red);font-size:10.5px;line-height:1.35} .session-tag-error.off{display:none} /* ===== debug config (dev only) ===== */ .debug-gear{width:var(--control-target);height:var(--control-target);margin-left:2px;padding:0; border:0;border-radius:6px;background:transparent;color:var(--text-faint);cursor:pointer; -webkit-app-region:no-drag;display:flex;align-items:center;justify-content:center;opacity:.5} .debug-gear:hover,.debug-gear:focus-visible{opacity:1;color:var(--text);background:var(--line-2);outline:0} .debug-gear svg{width:13px;height:13px;display:block} .debug-modal{background:var(--bg-raised);border:1px solid var(--border);border-radius:10px;width:380px} .debug-header{padding:14px 18px 10px;font-size:13px;font-weight:600;color:var(--text);display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border)} .debug-close{width:var(--close-target);height:var(--close-target);margin:-8px -8px -8px 0; padding:0;border:0;border-radius:7px;background:transparent;cursor:pointer;color:var(--text-faint); font-size:14px;-webkit-app-region:no-drag} .debug-close:hover,.debug-close:focus-visible{color:var(--text);background:var(--line-2);outline:0} .debug-body{padding:14px 18px 18px;display:flex;flex-direction:column;gap:10px} .debug-action{width:100%;text-align:left;font-size:12.5px} /* ===== thread search + browse (⌘K) ===== */ /* The modal always opens with content (empty query = the browse list), so it sits at a fixed top — the search bar never moves as the list below it grows or shrinks. */ .search-overlay{align-items:flex-start;justify-content:center} .search-modal{width:600px;max-width:calc(100% - 48px);margin-top:14vh;background:var(--bg-raised); border:1px solid var(--line-3);border-radius:12px; box-shadow:var(--shadow-lg); display:flex;flex-direction:column;max-height:min(56vh,460px);overflow:hidden} .search-bar{display:flex;align-items:center;gap:11px;padding:14px 16px;flex-shrink:0} .has-results .search-bar{border-bottom:1px solid var(--border)} .search-bar svg{width:16px;height:16px;color:var(--text-faint);flex-shrink:0} .search-bar input{flex:1;background:transparent;border:0;outline:0;color:var(--text);font-family:var(--sans);font-size:14.5px} .search-bar input::placeholder{color:var(--text-faint)} .search-mode{flex-shrink:0} .search-mode-references{position:relative} .search-reference-spinner{display:none;position:absolute;left:50%;top:50%;width:9px;height:9px; margin:-5px 0 0 -5px;border:1.5px solid var(--line-4);border-top-color:var(--blue);border-radius:50%; animation:search-spinner-spin .7s linear infinite} .search-mode-references[aria-busy="true"]{color:transparent} .search-mode-references[aria-busy="true"] .search-reference-spinner{display:block} .search-spinner{width:14px;height:14px;flex-shrink:0;border:2px solid var(--line-3); border-top-color:var(--blue);border-radius:50%;animation:search-spinner-spin .7s linear infinite} @keyframes search-spinner-spin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){.search-spinner,.search-reference-spinner{animation:none}} .search-scope{flex-shrink:0;font-family:var(--mono);font-size:11.5px;color:var(--text-dim);background:var(--bg-hover); border-radius:5px;padding:3px 8px;white-space:nowrap;display:inline-flex;align-items:center;gap:6px} .search-scope-x{width:32px;height:32px;margin:-6px -7px -6px 0; padding:0;border:0;border-radius:5px;background:transparent;cursor:pointer;color:var(--text-faint); font-family:var(--sans)} .search-scope-x:hover,.search-scope-x:focus-visible{color:var(--text);background:var(--line-3);outline:0} .search-results{overflow-y:auto;padding:6px 0;min-height:0} .search-results.reference-loading .sr-row{opacity:.38;pointer-events:none} .reference-loading-note{padding:9px 20px;color:var(--text-dim);font-size:11.5px; border-bottom:1px solid var(--border)} /* repo group header — same vocabulary as the rail's, scaled to the modal */ .search-results .sr-group{padding:11px 16px 3px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text-faint);display:flex;align-items:center;gap:7px} .sr-row{margin:1px 8px;padding:9px 11px;border-radius:7px;cursor:pointer} .sr-row:hover,.sr-row.sel{background:var(--bg-hover)} .sr-row.opening{background:color-mix(in srgb,var(--blue) 12%,var(--bg-raised));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--blue) 35%,transparent)} .sr-opening-spinner{width:12px;height:12px;align-self:center} .sr-row .sr-top{display:flex;align-items:baseline;gap:9px} /* browse-row extras: the agent glyph and — unscoped — the folder tag */ .sr-row .sr-icon{display:inline-flex;width:13px;height:13px;flex-shrink:0;align-self:center;opacity:.85} .sr-row .sr-icon svg{width:100%;height:100%;display:block} .sr-row .sr-folder{flex-shrink:0;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint)} .sr-row .sr-title{font-size:13px;color:var(--text);line-height:1.35;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sr-row .sr-ago{font-size:11px;color:var(--text-faint);flex-shrink:0} .sr-row .sr-excerpt{font-size:11.5px;color:var(--text-faint);line-height:1.5;margin-top:4px;display:flex;align-items:baseline;gap:7px} .sr-row .sr-who{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;flex-shrink:0} .sr-row .sr-who.you,.sr-row .sr-who.id{color:var(--blue)} .sr-row .sr-who.agent{color:var(--text-dim)} .sr-row .sr-who.title{color:var(--text-faint)} .sr-row .sr-who.sem{color:var(--violet)} .sem-note{padding:8px 20px;font-size:11px;color:var(--amber);border-top:1px solid var(--border)} .sr-row .sr-ondisk{flex-shrink:0;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--amber)} .sr-row .sr-snip{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical; -webkit-line-clamp:2;white-space:normal;min-width:0;line-height:1.45} .search-notices{position:sticky;top:0;z-index:2;background:var(--bg-raised);max-height:120px;overflow:auto} .search-notices .sem-note{overflow-wrap:anywhere} .sr-row.reference-row .sr-top{align-items:center} .sr-reference-detail{display:grid;grid-template-columns:minmax(0,1fr) var(--control-target); column-gap:4px;align-items:center} .sr-reference-path{grid-column:1;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; color:var(--text-dim);font:11px/1.45 var(--mono)} .sr-reference-source{grid-column:1;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; color:var(--text-faint);font-size:11px;line-height:1.45} .reference-copy{grid-column:2;grid-row:1/3;width:var(--control-target);height:var(--control-target); padding:0;border:0;border-radius:6px;background:transparent;color:var(--text-faint); font:12px var(--sans);opacity:0;cursor:pointer} .reference-row:hover .reference-copy,.reference-copy:focus-visible, .reference-copy.copied,.reference-copy.failed{opacity:1} .reference-copy:hover,.reference-copy:focus-visible{background:var(--line-3);color:var(--text);outline:0} .reference-copy.copied{color:var(--green)} .reference-copy.failed{color:var(--red);background:color-mix(in srgb,var(--red) 12%,transparent)} .sr-row mark{background:var(--mark);color:var(--amber);border-radius:2px;padding:0 1px;font-weight:600} .sr-row.failed{background:color-mix(in srgb,var(--red) 9%,var(--bg-raised))} .sr-row-error{margin-top:6px;color:var(--red);font:10.5px/1.4 var(--mono)} .search-empty{padding:34px 20px;text-align:center;color:var(--text-faint);font-size:12.5px;line-height:1.7} .search-empty code{font-family:var(--mono);font-size:11.5px;color:var(--text-dim)} .search-footer{flex-shrink:0;border-top:1px solid var(--border);padding:7px 14px;display:flex;gap:16px;font-size:10.5px;color:var(--text-faint)} .search-footer .k{font-family:var(--mono);color:var(--text-dim)} .search-footer .search-count{margin-left:auto} /* ===== ⌘` MRU switcher ===== */ /* A flick, not a modal moment: lighter scrim than the search overlay, a small vertical strip in the rail's own grammar (glyph · title · folder tag · live status dot). */ .mru-overlay{background:var(--scrim-light)} .mru-strip{width:440px;max-width:calc(100% - 48px);background:var(--bg-raised); border:1px solid var(--line-3);border-radius:12px; box-shadow:var(--shadow-lg);padding:8px} .mru-cap{padding:4px 10px 8px;font-size:10px;font-weight:600;text-transform:uppercase; letter-spacing:.12em;color:var(--text-faint);display:flex} .mru-kbd{margin-left:auto;font-family:var(--mono);letter-spacing:0;text-transform:none;font-weight:400} .mru-row{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:7px} .mru-row .mru-icon{display:inline-flex;width:13px;height:13px;flex-shrink:0;opacity:.85} .mru-row .mru-icon svg{width:100%;height:100%;display:block} .mru-row .mru-title{flex:1;min-width:0;font-size:12.5px;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mru-row .mru-folder{flex-shrink:0;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint)} .mru-row.sel{background:var(--bg-hover)} .mru-row.sel .mru-title{color:var(--text)} /* ===== the scratchpad: the pad (⌘J / rail-top icon) with its inline composer ===== */ /* The pad icon lives in the rail-top row (an app-level surface, not a session control) and owns the row's free space before the account control. */ .pad-top-slot{margin-left:auto;-webkit-app-region:no-drag;display:flex;align-items:center; gap:var(--rail-action-gap)} .pad-top-slot ~ .auth-slot{margin-left:var(--rail-avatar-gap)} .pad-top-slot .railicon{margin-left:0} /* The native traffic lights own the header's left edge. Below the width where the complete wordmark and right-hand actions coexist, the wordmark yields and the insets tighten without shrinking any interaction target. */ @container (max-width:275px){ .rail-top{padding-right:14px;padding-left:74px} } @container (max-width:260px){ .appname{visibility:hidden;flex-basis:0} } /* Badge: results awaiting eyes only (the rail's green unread grammar) — queued/parked jots never badge. */ .railicon{position:relative} .pad-badge{position:absolute;top:0;right:2px;min-width:var(--rail-badge-size); height:var(--rail-badge-size);border:1px solid var(--bg);border-radius:6px; background:var(--green);color:var(--bg);font-size:7px;font-weight:600;line-height:1; align-items:center;justify-content:center;text-align:center;padding:0 2px;pointer-events:none} /* The note owns the full first row. Captured context is supporting metadata below it, so a long thought wraps instead of horizontally scrolling behind a fixed chip. */ .pad-composer{margin:14px 22px 12px;border:1px solid var(--line-3);border-radius:9px; background:var(--bg-raised);overflow:hidden;flex-shrink:0} .pad-composer:focus-within{border-color:var(--line-4)} #padinput{display:block;width:100%;min-height:42px;max-height:88px;padding:10px 12px 5px; overflow-y:auto;resize:none;background:transparent;border:0;outline:0;color:var(--text); font-family:var(--sans);font-size:14px;line-height:1.5} #padinput::placeholder{color:var(--text-faint)} .pad-composer-meta{min-height:34px;display:flex;align-items:center;gap:12px; padding:2px 8px 7px 12px} .pad-composer-spacer{flex:1} .jot-ctx{align-items:center;gap:6px;color:var(--text-faint);min-width:0;font-size:11.5px} .jot-ctx-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .jot-ctx-x{flex-shrink:0;width:var(--control-target);height:var(--control-target);padding:0; border:0;border-radius:6px;background:transparent;cursor:pointer;color:var(--text-faint); font-family:var(--sans);font-size:12px} .jot-ctx-x:hover,.jot-ctx-x:focus-visible{color:var(--text);background:var(--line-2);outline:0} .pad-keep{flex-shrink:0;min-width:54px;padding:5px 11px;border:1px solid var(--text); border-radius:7px;background:var(--text);color:var(--bg);font-family:var(--sans); font-size:12px;font-weight:600;cursor:pointer} .pad-keep:hover{opacity:.88} .pad-keep:disabled{border-color:var(--line-2);background:var(--bg-hover); color:var(--text-faint);cursor:default;opacity:1} /* Findings are a reading surface: room for a real headline and outcome, with the host app fully quiet behind the scrim. */ .pad-modal{width:900px;max-width:calc(100% - 48px);margin-top:7vh;background:var(--bg-raised); border:1px solid var(--line-3);border-radius:12px;box-shadow:var(--shadow-lg); display:flex;flex-direction:column;max-height:min(78vh,740px);overflow:hidden} .pad-head{min-height:58px;padding:0 22px;border-bottom:1px solid var(--border);flex-shrink:0; display:flex;align-items:center;position:relative} .pad-title{font-size:17px;font-weight:650;color:var(--text);letter-spacing:-.01em} .pad-headline{font-size:12.5px;color:var(--green);font-weight:600;margin-left:10px} .pad-head-spacer{flex:1} .pad-head-action{width:32px;height:32px;border:0;border-radius:7px;background:transparent; color:var(--text-faint);font-family:var(--sans);font-size:16px;line-height:1;cursor:pointer} .pad-head-action:hover,.pad-head-action:focus-visible{background:var(--bg-hover); color:var(--text);outline:0} .pad-close{font-size:20px;font-weight:300} .pad-menu{position:absolute;z-index:2;right:48px;top:46px;min-width:230px;padding:5px; border:1px solid var(--line-3);border-radius:8px;background:var(--bg-raised); box-shadow:var(--shadow-md)} .pad-menu button{display:block;width:100%;border:0;border-radius:5px;background:transparent; color:var(--text-dim);font-family:var(--sans);font-size:12.5px;text-align:left;padding:7px 9px; cursor:pointer} .pad-menu button:hover{background:var(--bg-hover);color:var(--text)} .pad-menu button:disabled{color:var(--text-faint);cursor:default} .pad-tabs{height:42px;padding:0 22px;border-bottom:1px solid var(--border);display:flex; align-items:flex-end;gap:24px;flex-shrink:0} .pad-tab{height:42px;padding:0;border:0;border-bottom:2px solid transparent;background:transparent; color:var(--text-dim);font-family:var(--sans);font-size:12.5px;font-weight:600;cursor:pointer} .pad-tab.active{color:var(--text);border-bottom-color:var(--text)} .pad-tab-count{color:var(--text-faint);font-weight:500;margin-left:3px} .pad-note{padding:7px 22px;color:var(--red);background:var(--red-fill); border-bottom:1px solid var(--red-edge);font-size:12px;flex-shrink:0} .pad-note.feature-off{color:var(--text-dim);background:var(--line-1); border-bottom-color:var(--border)} .pad-action-failed{background:var(--red-fill);box-shadow:inset 0 0 0 1px var(--red-edge)} .pad-action-error{grid-column:1 / -1;margin:8px 12px 0;color:var(--red);font-size:12px; line-height:1.45} .pad-composer>.pad-action-error{margin:0;padding:7px 12px;border-top:1px solid var(--red-edge)} .pad-menu>.pad-action-error{margin:5px 9px 4px} .pad-action-failed button.failed,.pad-action-failed input.failed{border-color:var(--red); background:var(--red-fill);color:var(--red)} .pad-body{overflow-y:auto;padding:6px 12px 16px;min-height:160px} .pad-empty{padding:48px 24px;text-align:center;color:var(--text-dim);font-size:13px;line-height:1.6} /* The finding owns the row. Jot provenance, interpretation, and lifecycle controls are one explicit disclosure away instead of competing with the outcome. */ .pad-result{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px; margin:0;padding:17px 14px 16px;border-radius:9px;border-bottom:1px solid var(--line-1)} .pad-result:hover{background:var(--bg-hover)} .pad-result-main{min-width:0} .pad-result-title{color:var(--text);font-size:15px;font-weight:650;line-height:1.4; letter-spacing:-.005em} .pad-result-summary{color:var(--text-dim);font-size:13.5px;line-height:1.55;margin-top:4px; max-width:690px} .pad-result.failed .pad-result-summary,.pad-missing{color:var(--red)} .pad-result.read .pad-result-title{color:var(--text-dim)} .pad-read-mark{margin-left:8px;color:var(--text-faint);font-size:10.5px;font-weight:600; text-transform:uppercase;letter-spacing:.06em;vertical-align:2px} .pad-open{align-self:center;margin-left:16px;border:1px solid var(--line-4);border-radius:7px; background:var(--bg-raised);color:var(--text);font-family:var(--sans);font-size:12px; font-weight:600;padding:6px 10px;cursor:pointer;white-space:nowrap} .pad-open:hover{border-color:var(--text-faint)} .pad-source-toggle{display:inline-flex;align-items:center;gap:5px;min-height:var(--control-target); margin:4px 0 -4px -7px;padding:0 7px;border:0;border-radius:6px;background:transparent; color:var(--text-faint);font-family:var(--sans); font-size:11.5px;cursor:pointer} .pad-source-toggle:hover,.pad-source-toggle:focus-visible{color:var(--text);background:var(--line-2);outline:0} .pad-source-toggle .chev{position:static} .pad-source{display:none;margin-top:9px;padding:9px 12px;border-left:2px solid var(--line-4); color:var(--text-dim);font-size:12.5px;line-height:1.5} .pad-result.expanded .pad-source,.pad-list-row.expanded .pad-source{display:block} .pad-source-jot{color:var(--text-dim)} .pad-source .pj-read{margin-top:6px} .pj-read{font-size:12px;color:var(--text-dim);line-height:1.55} .jr-label{color:var(--text-faint);font-size:10.5px;font-weight:600;text-transform:uppercase; letter-spacing:.06em;margin-right:6px} .jr-pending{color:var(--text-faint);font-style:italic} .jr-err{color:var(--red)} .jr-edit{width:var(--control-target);height:var(--control-target);margin:-7px -7px -7px 0; padding:0;border:0;border-radius:6px;background:transparent;color:var(--text-faint); cursor:pointer;font:11px var(--sans)} .jr-edit:hover,.jr-edit:focus-visible{color:var(--text);background:var(--line-2);outline:0} .jr-input{background:var(--bg);border:1px solid var(--line-3);border-radius:5px;outline:0; color:var(--text);font-family:var(--sans);font-size:12px;padding:3px 7px;width:85%} .pj-unsure{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;color:var(--amber); background:var(--amber-fill);border:1px solid var(--amber-edge);border-radius:999px; padding:1px 8px;margin-top:7px} .pj-acts{display:flex;gap:6px;margin-top:10px} .pj-acts button{min-height:var(--control-target);font:11px var(--sans);color:var(--text-faint); border:1px solid var(--line-2);border-radius:6px;padding:0 8px;cursor:pointer; background:var(--bg-raised)} .pj-acts button:hover,.pj-acts button:focus-visible{color:var(--text);border-color:var(--line-4); background:var(--line-2);outline:0} /* Tonight and Archive are deliberately quieter indexes. Expanding a row reveals the same provenance/actions component used by findings. */ .pad-list-row{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:18px; padding:16px 18px;border-bottom:1px solid var(--line-1);border-radius:9px} .pad-list-row:hover{background:var(--bg-hover)} .pad-list-title{color:var(--text);font-size:14px;font-weight:600;line-height:1.45} .pad-list-note{color:var(--red);font-size:12.5px;line-height:1.5;margin-top:4px} .pad-list-note.pending{color:var(--blue)} .pad-list-note.unsure{color:var(--amber)} .pad-list-side{display:flex;align-items:flex-start;gap:10px;color:var(--text-faint); font-size:12px;white-space:nowrap;padding-top:2px} .pad-list-side .running{color:var(--blue)} .pad-list-side .parked{color:var(--amber)} .pad-list-open{border:0;background:transparent;color:var(--blue);font-family:var(--sans); font-size:12px;min-height:var(--control-target);padding:0 8px;margin:-6px -8px; border-radius:6px;cursor:pointer} .pad-list-open:hover,.pad-list-open:focus-visible{background:var(--line-2);outline:0} /* The result detail: jot header as a raised bubble, then the block walker's own styles. */ .pad-detail{padding:6px 12px 10px} .pd-back{min-height:var(--control-target);font:12px var(--sans);color:var(--text-dim);cursor:pointer; padding:0 8px;margin:0 0 6px -8px;border:0;border-radius:6px;background:transparent} .pd-back:hover,.pd-back:focus-visible{color:var(--text);background:var(--line-2);outline:0} .pd-jot{background:var(--bubble);border:1px solid var(--line-3);border-radius:10px; padding:10px 14px;margin-bottom:6px} .pd-who{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.1em; color:var(--text-faint);margin-bottom:4px} .pd-text{font-size:13px;color:var(--text);line-height:1.5} .pd-read{font-size:12px;color:var(--text-dim);margin:0 0 16px 4px;line-height:1.55} .pd-next{display:flex;align-items:center;gap:10px;margin-top:16px;padding-top:14px; border-top:1px solid var(--border)} .pd-quiet{margin-left:auto;display:flex;gap:8px} .pd-act{min-height:var(--control-target);font:12px var(--sans);color:var(--text-dim); border:1px solid var(--line-3);border-radius:7px;padding:0 11px;cursor:pointer;background:transparent} .pd-act:hover,.pd-act:focus-visible{color:var(--text);border-color:var(--line-4); background:var(--line-2);outline:0} /* ===== the thread map (rail-top icon beside the pad) ===== */ /* Near-fullscreen: the map is a canvas (groups grid + dependency rail), not a list — it gets the window. The page renders in an isolated iframe (the engine's own template with its own tokens, themed via postMessage), so no map CSS lives here beyond the chrome. */ .map-modal{position:absolute;inset:22px;background:var(--bg-raised); border:1px solid var(--line-3);border-radius:12px;box-shadow:var(--shadow-lg); display:flex;flex-direction:column;overflow:hidden} .map-head{display:flex;align-items:center;gap:12px;padding:12px 18px; border-bottom:1px solid var(--border);flex-shrink:0} .map-title{font-size:13.5px;font-weight:650;color:var(--text)} .map-sub{font-size:12px;color:var(--text-dim)} .map-update{align-items:center;gap:6px;color:var(--blue);font-size:12px;font-weight:550; white-space:nowrap} @media (prefers-reduced-motion:reduce){.map-update .dot{animation:none}} .map-spacer{flex:1} .map-gen{min-height:var(--control-target);background:transparent;border:1px solid var(--line-3);border-radius:7px; color:var(--text-dim);font-family:var(--sans);font-size:12px;padding:0 12px; cursor:pointer} .map-gen:hover:not(:disabled),.map-gen:focus-visible{color:var(--text);border-color:var(--line-4); background:var(--line-2);outline:0} .map-gen:disabled{cursor:default;color:var(--text-faint)} .map-close{width:var(--close-target);height:var(--close-target);margin:-4px -8px -4px 0; color:var(--text-faint);cursor:pointer;font-size:14px;line-height:1;padding:0; border:0;border-radius:7px;background:transparent} .map-close:hover,.map-close:focus-visible{color:var(--text);background:var(--line-2);outline:0} .map-note{padding:8px 18px;font-size:12px;color:var(--red);background:var(--red-fill); border-bottom:1px solid var(--red-edge);flex-shrink:0;white-space:pre-wrap; max-height:120px;overflow-y:auto} .map-note.mode{color:var(--text-dim);background:var(--wash);border-bottom-color:var(--border)} .map-body{flex:1;display:flex;min-height:0} .map-empty{flex:1;align-items:center;justify-content:center;color:var(--text-dim); font-size:13px;padding:40px;text-align:center;line-height:1.6} #mapframe{flex:1;border:0;width:100%;height:100%;background:transparent} /* ===== general project boards ===== */ /* A board is a reversible map into sessions, not a peer workspace. The session UI stays mounted beneath this near-fullscreen overlay. */ .board-modal{position:absolute;inset:22px;background:var(--bg-raised); border:1px solid var(--line-3);border-radius:12px;box-shadow:var(--shadow-lg); display:flex;flex-direction:column;overflow:hidden} .board-modal-head{height:52px;box-sizing:border-box;padding:0 16px 0 18px; border-bottom:1px solid var(--border);display:flex;align-items:center;flex-shrink:0; position:relative} .board-picker{display:flex;align-items:center;gap:7px;min-width:0;max-width:min(520px,65vw); border:0;border-radius:7px;background:transparent;color:var(--text);font-family:var(--sans); font-size:14px;font-weight:680;padding:6px 8px;cursor:pointer;text-align:left} .board-picker:hover{background:var(--bg-hover)} .board-picker .chev{position:static;flex-shrink:0} .board-program-menu{position:absolute;z-index:9;top:43px;left:18px;min-width:240px; max-width:360px;padding:4px;background:var(--bg-raised);border:1px solid var(--line-3); border-radius:9px;box-shadow:var(--shadow-lg)} .board-program-group{padding:7px 10px 4px;color:var(--text-faint);font-family:var(--sans); font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase} .board-program-group.archived{margin-top:4px;border-top:1px solid var(--border);padding-top:9px} .board-program-row{display:flex;width:100%;min-height:var(--control-target);box-sizing:border-box; align-items:center;gap:8px; border:0;border-radius:6px;background:transparent;color:var(--text);font-family:var(--sans); font-size:12.5px;text-align:left;padding:7px 10px;cursor:pointer;overflow-wrap:anywhere} .board-program-row:hover,.board-program-row:focus-visible{background:var(--bg-hover);outline:0} .board-program-row.error{color:var(--red)} .board-program-title{min-width:0;flex:1} .board-program-status{flex-shrink:0;border-radius:5px;padding:2px 6px;color:var(--text-dim); background:var(--line-2);font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase} .board-program-status.ready,.board-program-status.finished{color:var(--green);background:var(--green-fill)} .board-program-status.finalizing{color:var(--amber);background:var(--amber-fill)} .board-program-status.invalid,.board-program-status.error{color:var(--red);background:var(--red-fill)} .board-program-check{margin-left:auto;color:var(--blue);font-weight:700} .board-program-empty,.board-program-error{padding:8px 10px;color:var(--text-dim); font-size:11.5px;line-height:1.5} .board-program-error{color:var(--red)} .board-modal-spacer{flex:1} /* Ordinary open work names itself through deviations below. Only board-wide lifecycle states that change what happens next earn a header mark. */ .board-health-state{flex-shrink:0;margin-left:10px;padding:3px 9px;border-radius:6px; font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.06em; text-transform:uppercase} .board-health-state.ready,.board-health-state.finished{ background:var(--green-fill);color:var(--green)} .board-health-state.finalizing{background:var(--amber-fill);color:var(--amber)} .board-health-state.invalid{background:var(--red-fill);color:var(--red)} .board-lifecycle-actions{display:flex;align-items:center;gap:4px;flex-shrink:0;margin-left:8px} .board-archive-action,.board-delete-action{position:relative;flex-shrink:0} .board-storage-button,.board-archive-button{min-height:var(--control-target);border:1px solid var(--border);border-radius:7px; padding:4px 10px;background:transparent;color:var(--text-dim);font:600 11px/1.2 var(--sans); cursor:pointer} .board-storage-button:hover,.board-storage-button:focus-visible, .board-archive-button:hover,.board-archive-button:focus-visible{border-color:var(--green); background:var(--green-fill);color:var(--green);outline:0} .board-archive-action.board-action-failed .board-archive-button{border-color:var(--red-edge); color:var(--red)} .board-archive-action .board-action-failure{position:absolute;top:32px;left:0;z-index:11; width:max-content;max-width:280px} .board-delete-button{min-height:var(--control-target);border:1px solid transparent;border-radius:7px; padding:4px 10px;background:transparent;color:var(--text-faint);font:600 11px/1.2 var(--sans); cursor:pointer} .board-delete-button:hover,.board-delete-button:focus-visible,.board-delete-action.open .board-delete-button{ border-color:var(--red-edge);background:var(--red-fill);color:var(--red);outline:0} .board-delete-action.board-action-failed .board-delete-button{border-color:var(--red-edge); background:var(--red-fill);color:var(--red)} .board-delete-confirm{position:absolute;top:32px;left:0;z-index:12;width:300px;padding:11px; box-sizing:border-box;border:1px solid var(--red-edge);border-radius:8px;background:var(--bg-raised); box-shadow:var(--shadow-lg);font-family:var(--sans)} .board-delete-question{display:block;color:var(--text);font-size:12px;font-weight:650} .board-delete-confirm-actions{display:flex;justify-content:flex-end;gap:6px;margin-top:10px} .board-delete-confirm-actions button{min-height:var(--control-target);border:1px solid var(--border); border-radius:6px;padding:3px 9px;background:transparent;color:var(--text-dim); font:600 11px/1.2 var(--sans);cursor:pointer} .board-delete-confirm-actions button:hover,.board-delete-confirm-actions button:focus-visible{ background:var(--bg-hover);color:var(--text);outline:0} .board-delete-confirm-actions .board-delete-proceed{border-color:var(--red-edge); background:var(--red-fill);color:var(--red)} .board-delete-confirm-actions .board-delete-proceed:hover, .board-delete-confirm-actions .board-delete-proceed:focus-visible{border-color:var(--red); background:var(--red-fill);color:var(--red)} .board-delete-action .board-action-failure{position:absolute;top:32px;right:0;z-index:11; width:max-content;max-width:280px} .board-fleet-summary{flex-shrink:0;margin-left:10px;color:var(--text-dim); font-family:var(--sans);font-size:11px;font-weight:600;white-space:nowrap} /* The ◈ is drawn in CSS, as it is on the rail's supervisor chip, so the same role reads the same in both places and the glyph never enters the button's text. */ .board-supervisor{display:flex;align-items:center;gap:6px;max-width:min(320px,32vw); min-height:var(--control-target);margin-right:6px;border:1px solid var(--border);border-radius:7px; background:transparent; color:var(--text-dim);font-family:var(--sans);font-size:11.5px;font-weight:600; padding:5px 10px;cursor:pointer} .board-supervisor::before{content:"◈";color:var(--board);font-size:10px;opacity:.9} .board-supervisor:hover,.board-supervisor:focus-visible{border-color:var(--board); background:var(--bg-hover);color:var(--text);outline:0} .board-supervisor-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .board-supervisor-state{flex-shrink:0;color:var(--amber);font-weight:600} .board-supervisor.deviating{border-color:var(--amber)} .board-zoom{display:flex;align-items:center;margin-right:8px;border:1px solid var(--border); border-radius:7px;background:var(--bg);overflow:hidden} .board-zoom button{width:var(--control-target);height:var(--control-target);border:0; border-radius:0;background:transparent;color:var(--text-dim);font:13px/1 var(--sans); cursor:pointer} .board-zoom .board-zoom-value{width:48px;border-inline:1px solid var(--border); font-size:10.5px;font-weight:600} .board-zoom button:hover:not(:disabled),.board-zoom button:focus-visible{ background:var(--bg-hover);color:var(--text);outline:0} .board-zoom button:disabled{color:var(--text-faint);cursor:default;opacity:.45} .board-close,.board-inspector-close{width:30px;height:30px;border:0;border-radius:7px; background:transparent;color:var(--text-faint);font-family:var(--sans);font-size:17px; font-weight:300;line-height:1;cursor:pointer} .board-close:hover,.board-inspector-close:hover, .board-close:focus-visible,.board-inspector-close:focus-visible{background:var(--bg-hover); color:var(--text);outline:0} /* The graph owns the overlay. Detail floats over it and never changes canvas geometry. */ .board-workspace{display:flex;flex:1;min-width:0;min-height:0;background:var(--bg); position:relative;overflow:hidden} .board-main{display:flex;flex:1;min-width:0;min-height:0;flex-direction:column} .board-heading{padding:15px 28px 16px;border-bottom:1px solid var(--border)} .board-goal{max-width:860px;font-size:13px;line-height:1.5;color:var(--text-dim)} .board-program-references{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px} .board-program-references:empty{display:none} .board-program-reference{min-height:var(--control-target);padding:5px 9px;border:1px solid var(--border); border-radius:7px;background:var(--bg);color:var(--text-dim);font:inherit;font-size:11px; cursor:pointer} .board-program-reference:hover,.board-program-reference:focus-visible{border-color:var(--blue); background:var(--bg-hover);color:var(--text);outline:0} .board-error{white-space:pre-wrap;color:var(--red);background:var(--red-fill); border-bottom:1px solid var(--red-edge);padding:9px 28px;font-size:11.5px;line-height:1.45} .board-error-actions{display:inline-flex;gap:7px;margin-left:12px;white-space:normal} .board-error-action{min-height:var(--control-target);border:1px solid var(--red-edge); border-radius:6px;padding:3px 7px;background:var(--bg-raised);color:var(--red);font:inherit; cursor:pointer} .board-error-action:hover,.board-error-action:focus-visible{border-color:var(--red); background:var(--red-fill);color:var(--text);outline:0} .board-empty{flex:1;align-items:center;justify-content:center;color:var(--text-dim); font-size:13px;padding:40px;text-align:center} .board-canvas-scroll{flex:1;min-height:0;overflow:auto;background:var(--wash)} .board-zoom-stage{position:relative;min-width:100%;min-height:100%} .board-canvas{position:absolute;left:0;top:0;transform-origin:top left} .board-edges,.board-nodes{position:absolute;inset:0;width:100%;height:100%} .board-edges{z-index:1;overflow:visible;pointer-events:none} .board-edge-line{fill:none;stroke:var(--blue);stroke-width:1.7;opacity:.62; transition:opacity .12s,stroke-width .12s} .board-edge-hit{fill:none;stroke:transparent;stroke-width:14;pointer-events:stroke} .board-edge.hot .board-edge-line{opacity:1;stroke-width:2.2} .board-edge.dimmed .board-edge-line{opacity:.1} .board-edges marker path{fill:var(--blue);stroke:none} /* A dependency whose far end is scrolled past the fold otherwise stops at the boundary with nothing at its end and reads as broken. The marker rides the edge itself — the thing that looks severed — and is drawn only for edges the fold actually cuts. */ .board-edge-offscreen{fill:var(--blue);stroke:var(--bg);stroke-width:1.5} .board-edge.dimmed .board-edge-offscreen{opacity:.1} .board-nodes{z-index:2;pointer-events:none} .board-node,.board-group{position:absolute;box-sizing:border-box;margin:0;color:var(--text)} .board-node,.board-group{pointer-events:auto} .board-node{border:1px solid var(--border);border-radius:9px;background:var(--bg); box-shadow:var(--shadow-sm);padding:0;text-align:left;font:inherit;cursor:pointer} .board-group{border:0;border-radius:12px;background:transparent; box-shadow:inset 0 0 0 1px var(--line-4)} .board-node,.board-group{transition:opacity .12s,border-color .12s,background .12s,box-shadow .12s} .board-node.dimmed,.board-group.dimmed{opacity:.16} :is(.board-node,.board-group)[data-board-status="working"], :is(.board-node,.board-group)[data-board-status="active"]{ --board-status-color:var(--blue);--board-status-fill:var(--blue-fill); --board-status-edge:var(--blue-edge)} :is(.board-node,.board-group)[data-board-status="resolved"]{ --board-status-color:var(--green);--board-status-fill:var(--green-fill); --board-status-edge:var(--green-edge)} :is(.board-node,.board-group)[data-board-status="waiting"]{ --board-status-color:var(--text-faint);--board-status-fill:var(--bg-raised); --board-status-edge:var(--line-4)} :is(.board-node,.board-group)[data-board-status="attention"]{ --board-status-color:var(--amber);--board-status-fill:var(--amber-fill); --board-status-edge:var(--amber-edge)} :is(.board-node,.board-group)[data-board-status="problem"]{ --board-status-color:var(--red);--board-status-fill:var(--red-fill); --board-status-edge:var(--red-edge)} :is(.board-node,.board-group)[data-board-status="dropped"]{ --board-status-color:var(--text-faint);--board-status-fill:var(--wash); --board-status-edge:var(--border);opacity:.62} :is(.board-node,.board-group)[data-board-status="waiting"], :is(.board-node,.board-group)[data-board-status="dropped"]{border-style:dashed} :is(.board-node,.board-group):not([data-board-status="open"]){ background:var(--board-status-fill)} .board-node:not([data-board-status="open"]){border-color:var(--board-status-edge); box-shadow:inset 5px 0 0 var(--board-status-color),var(--shadow-sm)} .board-group:not([data-board-status="open"]){box-shadow:inset 5px 0 0 var(--board-status-color), inset 0 0 0 1px var(--board-status-edge)} .board-node:hover,.board-node.selected{border-color:var(--blue)} .board-group.selected{outline:1px solid var(--blue);outline-offset:-1px} .board-node-body{display:flex;width:100%;height:100%;box-sizing:border-box;flex-direction:column; align-items:flex-start;border:0;background:transparent;color:inherit;text-align:left; font:inherit;padding:13px 15px;cursor:pointer} .board-group>.board-node-body{height:90px;min-height:90px;border-bottom:1px solid var(--line-2)} .board-group>.board-node-body>.board-node-summary{-webkit-line-clamp:2} .board-node-title{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical; -webkit-line-clamp:2;font-size:13.5px;font-weight:680;line-height:1.35} .board-node-summary{display:-webkit-box;margin-top:5px;font-size:12px;line-height:1.42; color:var(--text-dim);overflow:hidden;overflow-wrap:anywhere;-webkit-box-orient:vertical; -webkit-line-clamp:3} .board-node-foot{display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:8px; font-size:10.5px;color:var(--text-faint)} .board-node-foot.blocked{color:var(--amber)} .board-node-foot.resolved{color:var(--green)} .board-node-foot.dropped{color:var(--text-faint)} /* One optional owner for detail. It overlays the map and is absent until a card is chosen. */ .board-inspector{position:absolute;z-index:5;top:0;right:0;bottom:0;width:360px; overflow-y:auto;box-sizing:border-box;border-left:1px solid var(--border);padding:24px; background:var(--bg);box-shadow:var(--shadow-lg);transform:translateX(100%); visibility:hidden;transition:transform .16s ease,visibility 0s linear .16s} .board-inspector.open{transform:translateX(0);visibility:visible;transition-delay:0s} .board-inspector-head{display:flex;align-items:flex-start;gap:12px} .board-inspector-head .board-inspector-title{flex:1} .board-inspector-title{margin:0;color:var(--text);font-size:19px;line-height:1.3} .board-inspector-summary,.board-current{margin:8px 0 0;color:var(--text-dim); font-size:13px;line-height:1.55;overflow-wrap:anywhere} .board-current{color:var(--text)} .board-inspector-label{margin:25px 0 8px;color:var(--text-faint);font-size:9.5px; font-weight:750;letter-spacing:.1em;text-transform:uppercase} .board-inspector-list{display:flex;flex-direction:column;gap:7px} .board-relation,.board-session{display:flex;width:100%;min-height:var(--control-target); box-sizing:border-box;align-items:center; gap:7px;border:1px solid var(--border);border-radius:7px;background:var(--bg-raised); color:var(--text);font:inherit;font-size:11.5px;text-align:left;padding:8px 10px;cursor:pointer} .board-relation:hover,.board-session:hover,.board-relation:focus-visible, .board-session:focus-visible{border-color:var(--blue);background:var(--bg-hover);outline:0} .board-relation-kind{color:var(--text-faint);font-size:9.5px;text-transform:uppercase} .board-session{display:grid;grid-template-columns:1fr auto} .board-session-title{font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .board-session-purpose{grid-column:1/-1;color:var(--text-dim);line-height:1.4} .board-session-state{color:var(--text-faint);font-size:10px} .board-session-state.p-working,.board-session-state.p-compacting, .board-session-state.p-running{color:var(--blue)} .board-reference{display:flex;width:100%;min-height:var(--control-target);padding:9px 10px; border:1px solid var(--border); border-radius:7px;background:transparent;color:var(--text);font:inherit;font-size:11.5px; font-weight:650;text-align:left;cursor:pointer;justify-content:space-between;gap:10px} .board-reference-label{min-width:0;overflow-wrap:anywhere} .board-reference-change{flex:none;color:var(--amber);font-size:9.5px;font-weight:650} .board-reference:hover,.board-reference:focus-visible{border-color:var(--blue); background:var(--bg-hover);outline:0} .board-action-failed{border-color:var(--red-edge)!important;background:var(--red-fill)!important} .board-reference.board-action-failed,.board-program-reference.board-action-failed, .board-supervisor.board-action-failed,.board-error-action.board-action-failed{flex-wrap:wrap} .board-program-reference.board-action-failed,.board-error-action.board-action-failed{ display:inline-flex;align-items:center} .board-action-failure{flex-basis:100%;width:100%;color:var(--red);font-size:10.5px; line-height:1.35;font-weight:600;text-align:left} .board-session>.board-action-failure{grid-column:1/-1} .board-action-failed:hover,.board-action-failed:focus-visible{ box-shadow:inset 0 0 0 1px var(--red);outline:0} @media(max-width:900px){ .board-modal{inset:10px} .board-inspector{width:min(360px,88%)} .restart-alert{left:16px} } /* ===== first-run gate + auth slot (doc 04) ===== */ .auth-slot{margin-left:auto;-webkit-app-region:no-drag;position:relative;display:flex;align-items:center} .signin-pill{min-height:var(--control-target);cursor:pointer;display:flex;align-items:center;gap:6px;background:transparent; color:var(--text);border:1px solid var(--line-5);border-radius:6px; padding:3px 10px 3px 8px;font-size:11.5px;font-family:var(--sans);font-weight:500; transition:all .15s} .signin-pill:hover,.signin-pill:focus-visible{background:var(--line-2); border-color:var(--line-5);outline:0} .signin-pill svg{width:13px;height:13px;flex-shrink:0} .auth-avatar{cursor:pointer;width:var(--control-target);height:var(--control-target);padding:0; border:0;border-radius:50%;background:transparent;display:flex;align-items:center; justify-content:center;transition:background .15s,box-shadow .15s} .auth-avatar img{display:block;width:var(--rail-avatar-image-size);height:var(--rail-avatar-image-size); object-fit:cover;border-radius:50%} .auth-avatar:hover,.auth-avatar:focus-visible{background:var(--line-2); box-shadow:inset 0 0 0 1px var(--line-4);outline:0} .auth-dropdown{position:absolute;top:100%;right:0;margin-top:6px; background:var(--bg-raised);border:1px solid var(--border);border-radius:8px; padding:8px 0;min-width:250px;box-shadow:var(--shadow-md);z-index:10} .auth-dropdown .dd-email{padding:6px 14px 8px;font-size:11.5px;color:var(--text-faint); border-bottom:1px solid var(--border);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .auth-dropdown .dd-item{display:block;width:100%;text-align:left;background:none;border:none; min-height:var(--control-target);color:var(--text-dim);font-size:12.5px;font-family:var(--sans); padding:6px 14px;cursor:pointer;transition:all .12s} .auth-dropdown .dd-item:hover,.auth-dropdown .dd-item:focus-visible{background:var(--bg-hover);color:var(--text);outline:0} .auth-dropdown .dd-item:disabled{cursor:default;color:var(--red)} .auth-dropdown .dd-item.selected{background:var(--line-2);color:var(--text)} .auth-dropdown .dd-item.credits-exhausted:disabled{color:var(--amber);background:var(--amber-fill); box-shadow:inset 3px 0 var(--amber)} .auth-dropdown .dd-setting{border-radius:6px;overflow:hidden} .auth-dropdown .dd-problems:empty{display:none} .auth-dropdown .dd-problem{display:flex;align-items:center;justify-content:space-between;gap:8px; padding:1px 8px 5px 14px;color:var(--red);font-size:10.5px;line-height:1.35} .auth-dropdown .dd-problem button{flex:none;min-height:var(--control-target);padding:0 7px;border:0; border-radius:6px;background:transparent;color:var(--red);font:600 10.5px/1 var(--sans);cursor:pointer} .auth-dropdown .dd-problem button:hover,.auth-dropdown .dd-problem button:focus-visible{ background:var(--red-fill);box-shadow:inset 0 0 0 1px var(--red-edge);outline:0} .auth-dropdown .dd-sep{height:1px;background:var(--border);margin:4px 0} .gate{width:520px} .gate-title{font-size:15px;font-weight:600;margin-bottom:6px} .gate-sub{font-size:12.5px;color:var(--text-dim);line-height:1.6;margin-bottom:8px} .gate-disclosure{font-size:11.5px;color:var(--text-faint);line-height:1.55;margin-bottom:18px} .gate-step{border-top:1px solid var(--border);padding:13px 0;font-size:12.5px;line-height:1.6} .g-head{color:var(--text);font-weight:600;margin-bottom:3px} .g-head.ok{color:var(--green)} .g-head.bad{color:var(--red)} .g-detail{color:var(--text-dim)} .g-detail label{cursor:pointer} .g-err{color:var(--red);font-size:12px} .mono{font-family:var(--mono);font-size:11.5px} .g-btn{min-height:var(--control-target);background:var(--bg-hover);color:var(--text); border:1px solid var(--border);border-radius:6px;padding:0 12px;font-size:12px; cursor:pointer;font-family:var(--sans)} .g-btn:hover,.g-btn:focus-visible{background:var(--line-3);outline:1px solid var(--line-5)} .g-btn:disabled{opacity:.4;cursor:default} .g-start{margin-top:16px;padding:8px 18px;font-weight:600} /* ===== Phone access ===== */ .mobile-access-modal{width:min(520px,calc(100vw - 40px));max-height:calc(100vh - 40px); display:grid;grid-template-rows:auto minmax(0,1fr) auto;border:1px solid var(--line-3); border-radius:11px;background:var(--bg-raised);box-shadow:var(--shadow-lg);overflow:hidden} .mobile-access-head{min-height:48px;display:flex;align-items:center;padding:8px 10px 8px 18px; border-bottom:1px solid var(--border);font-size:14px;font-weight:650} .mobile-access-close{width:var(--close-target);height:var(--close-target);margin-left:auto;border:0; border-radius:7px;background:transparent;color:var(--text-faint);font:16px/1 var(--sans); cursor:pointer} .mobile-access-close:hover,.mobile-access-close:focus-visible{background:var(--bg-hover); color:var(--text);outline:0} .mobile-access-body{min-height:0;padding:18px 20px 15px;overflow-y:auto} .mobile-access-setup{margin-top:11px;border-top:1px solid var(--line-3)} .mobile-access-setup summary{min-height:var(--control-target);display:flex;align-items:center; margin-top:6px;padding:3px 7px;border-radius:6px;color:var(--text-dim);font-size:11.5px; font-weight:600;cursor:pointer;list-style:none} .mobile-access-setup summary::-webkit-details-marker{display:none} .mobile-access-setup summary::after{content:'›';margin-left:auto;color:var(--text-faint); font:17px/1 var(--sans);transform:rotate(0);transition:transform .12s ease} .mobile-access-setup summary:hover,.mobile-access-setup summary:focus-visible{ background:var(--bg-hover);color:var(--text);outline:0} .mobile-access-setup[open] summary{background:var(--bg-hover);color:var(--text)} .mobile-access-setup[open] summary::after{transform:rotate(90deg)} .mobile-access-setup-body{padding:10px 7px 2px} .mobile-access-intro,.mobile-access-privacy{margin:0;color:var(--text-dim);font-size:12.5px; line-height:1.55} .mobile-access-guide{margin:15px 0 0;padding:0;list-style:none;counter-reset:mobile-step} .mobile-access-guide li{min-height:32px;display:grid;grid-template-columns:22px minmax(0,1fr) auto; align-items:start;gap:8px;padding:7px 0;border-top:1px solid var(--border);counter-increment:mobile-step; color:var(--text-dim);font-size:11.5px;line-height:1.5} .mobile-access-guide li::before{content:counter(mobile-step);width:20px;height:20px;display:grid; place-items:center;margin-top:1px;border:1px solid var(--line-3);border-radius:50%;color:var(--text-faint); font:600 9.5px/1 var(--mono)} .mobile-access-guide strong{color:var(--text);font-weight:630} .mobile-access-download{min-height:var(--control-target);margin:-4px 0;padding:0 8px;border:0; border-radius:6px;background:transparent;color:var(--blue);font:600 10.5px var(--sans);cursor:pointer} .mobile-access-download:hover,.mobile-access-download:focus-visible{background:var(--blue-fill); box-shadow:inset 0 0 0 1px var(--blue-edge);outline:0} .mobile-access-guide .inline-action-error{grid-column:2/-1;margin:2px 0 0} .mobile-access-privacy{margin-top:12px;padding:10px 11px;border:1px solid var(--border); border-radius:7px;background:var(--bg);color:var(--text-faint);font-size:11px} .mobile-access-state{color:var(--text-dim);font-size:12.5px;line-height:1.55} .mobile-access-url-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center; gap:8px;margin-top:15px} .mobile-access-url-row[hidden]{display:none} .mobile-access-url-row code{min-width:0;padding:9px 10px;border:1px solid var(--border); border-radius:7px;background:var(--bg);color:var(--text-dim);font:10.5px/1.4 var(--mono); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mobile-access-url-row button{min-height:var(--control-target);padding:0 9px;border:0; border-radius:7px;background:transparent;color:var(--blue);font:600 11px var(--sans);cursor:pointer} .mobile-access-url-row button:hover,.mobile-access-url-row button:focus-visible{ background:var(--blue-fill);box-shadow:inset 0 0 0 1px var(--blue-edge);outline:0} .mobile-access-pairing{margin-top:15px;padding:13px 14px;border:1px solid var(--amber-edge); border-radius:8px;background:var(--amber-fill);display:grid;grid-template-columns:1fr auto; align-items:baseline;gap:3px 12px} .mobile-access-pairing[hidden]{display:none} .mobile-access-pair-label{color:var(--amber);font-size:10.5px;font-weight:650} .mobile-access-pairing strong{grid-row:1/3;grid-column:2;color:var(--text); font:700 24px/1 var(--mono);letter-spacing:.14em} .mobile-access-pairing span:last-child{color:var(--text-faint);font-size:10px} .mobile-access-error{min-height:15px;margin-top:9px;color:var(--red);font-size:11px;line-height:1.4} .mobile-access-actions{min-height:54px;display:grid;grid-template-columns:auto 1fr auto auto; align-items:center;gap:8px;padding:9px 12px;border-top:1px solid var(--border)} .mobile-access-primary{border-color:var(--blue-edge);background:var(--blue-fill);color:var(--blue); font-weight:650} .mobile-access-primary:hover,.mobile-access-primary:focus-visible{background:var(--bg-hover); outline:1px solid var(--blue)} /* ===== import picker (sessions started outside lodestar) ===== The whole surface is the ⌘K modal verbatim (.search-modal/.search-bar/.search-results/ .search-footer, rows via srRowHtml with browse's landmarks, folder tags, and you-excerpts); only the title in the bar, the checkbox lead, the error who-tag, and the footer's controls are its own. */ .import-head{font-size:14.5px;font-weight:600;color:var(--text)} .sr-row .sr-check{align-self:center;accent-color:var(--blue);flex:none;margin:0} .sr-row .sr-who.err{color:var(--red)} .search-empty.failure{color:var(--red);background:var(--red-fill)} .import-footer{align-items:center} .import-footer .search-count{margin-left:0} .clear-all{min-height:var(--control-target);padding:0 8px;border:0;border-radius:6px; background:transparent;color:var(--blue);font:inherit;cursor:pointer} .clear-all:hover,.clear-all:focus-visible{background:var(--line-2);outline:0} .clear-all:disabled{opacity:.4;cursor:default} .clear-all:empty{display:none} .foot-spacer{margin-left:auto} .import-go{font-weight:600} .import-refresh-failure{margin:8px 10px 2px;padding:8px 10px;border:1px solid var(--red-edge); border-radius:7px;background:var(--red-fill);color:var(--red);font-size:11.5px;line-height:1.45} .import-confirmation{min-height:156px;padding:24px;display:flex;box-sizing:border-box; flex-direction:column;align-items:center;justify-content:center;text-align:center} .import-confirmation-mark{color:var(--green);font-size:20px;line-height:1;margin-bottom:12px} .import-confirmation-title{max-width:440px;color:var(--text);font-size:14px;font-weight:600; line-height:1.45;overflow-wrap:anywhere} .import-confirmation-detail{margin-top:4px;color:var(--text-faint);font-size:11.5px} .import-confirmation-error{max-width:440px;margin-top:12px;padding:7px 9px;border:1px solid var(--red-edge); border-radius:7px;background:var(--red-fill);color:var(--red);font-size:11.5px;line-height:1.45} /* ===== report this brief ===== */ .report-box{display:none;margin-top:10px;border:1px solid var(--border);border-radius:7px;padding:10px 12px} .report-consent{font-size:11.5px;color:var(--text-faint);line-height:1.5;margin-bottom:8px} .report-note{width:100%;min-height:48px;background:var(--bg);color:var(--text);border:1px solid var(--border); border-radius:6px;padding:6px 8px;font-family:var(--sans);font-size:12px;resize:vertical;margin-bottom:8px} .report-status{font-size:11.5px;color:var(--green);margin-left:8px} .report-status.bad{color:var(--red)} /* ===== the conversation Files button + its panel ===== */ .fb-btn{-webkit-app-region:no-drag;min-height:var(--control-target);padding:0 8px;border:0; display:inline-flex;align-items:center;gap:5px; border-radius:8px;background:transparent;font:11.5px var(--mono);color:var(--text-dim);cursor:pointer} .fb-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round} .fb-btn:hover,.fb-btn:focus-visible{background:var(--bg-hover);color:var(--text);outline:0} .fb-btn.on,.fb-btn:active{background:var(--line-3);color:var(--text)} .fb-btn.failed{color:var(--red); background:color-mix(in srgb,var(--red) 9%,var(--bg-raised))} /* FIXED, not absolute: the thread scrolls and clips, so a panel parented into it would be cut off at the fold. fbPlace() anchors it to the button's measured rect and flips it above when the triggering control leaves no room below — the ordinary case, not the exception. */ .fb-panel{position:fixed;width:390px;z-index:40;display:none;overflow:hidden; background:var(--bg-raised);border:1px solid var(--line-4);border-radius:10px; box-shadow:0 10px 32px rgba(0,0,0,.45)} :root.theme-light .fb-panel{box-shadow:0 10px 30px rgba(20,22,28,.16)} .fb-panel.open{display:block} .fb-panel-error{padding:12px 14px;color:var(--red);font:10.5px/1.45 var(--mono)} .fb-warnings{padding:9px 12px;color:var(--amber);background:var(--amber-fill); border-bottom:1px solid var(--border);font:10.5px/1.45 var(--mono)} .fb-tabs{display:flex;gap:2px;padding:6px;border-bottom:1px solid var(--border)} .fb-tabs button{min-height:var(--control-target);padding:0 9px;border:0;border-radius:6px; background:transparent;color:var(--text-faint);font:11.5px var(--sans);cursor:pointer} .fb-tabs button:hover,.fb-tabs button:focus-visible{background:var(--bg-hover);color:var(--text);outline:0} .fb-tabs button[aria-selected="true"]{background:var(--line-3);color:var(--text)} .fb-scroll{max-height:400px;overflow:auto;padding:6px 0 7px} .fb-exchange+.fb-exchange{margin-top:5px;padding-top:5px;border-top:1px solid var(--border)} .fb-exchange-title{padding:5px 12px 6px;color:var(--text-dim);font:600 11.5px/1.35 var(--sans); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fb-row{display:flex;align-items:center;gap:9px;min-height:var(--control-target); margin:0 6px;padding:0 11px;border-radius:6px;cursor:pointer} .fb-row:hover,.fb-row:focus-visible{background:var(--bg-hover);outline:0} /* A long label must lose its LEADING path, never its filename — so the row scrolls to its end rather than ellipsing there: the filename is what the reader recognises. */ .fb-name{flex:1;min-width:0;font-family:var(--mono);font-size:12px;font-weight:400; color:var(--text-dim);white-space:nowrap;overflow:hidden;direction:rtl;text-align:left} /* The disambiguating path sits a step back from the filename, so it separates two rows without ever competing with the name. */ .fb-dir{font-weight:400;color:var(--text-faint)} /* Nothing anywhere to open: the row states that at rest instead of inviting a doomed click. It keeps its copy control — the path is still the useful thing to take away. */ .fb-row.gone{cursor:default} .fb-row.gone:hover{background:transparent} .fb-row.gone .fb-name{color:var(--text-faint);font-weight:400;text-decoration:line-through; text-decoration-color:var(--line-4)} .fb-gone{flex:none;font-size:11px;color:var(--text-faint)} /* The row's clock: a past open reads as a sentence and sits a step forward; a modified age is a bare figure, since it is the same kind of fact on every remaining row. */ .fb-when{flex:none;font-size:11px;color:var(--text-faint);white-space:nowrap} .fb-when.fb-opened{color:var(--text-dim)} .fb-remember-error{padding:9px 12px;color:var(--red);border-bottom:1px solid var(--border); font:10.5px/1.45 var(--mono)} /* Copy path appears on the row you are pointing at — an icon repeated down every row at rest is noise, and that is the only row you could copy. It sits inside the row, before the clock, so the clock keeps the right edge instead of an empty slot. */ .fb-copy{flex:none;width:var(--control-target);height:var(--control-target);border:0;border-radius:6px; display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--text-faint); background:transparent;opacity:0;transition:opacity .1s;cursor:pointer} .fb-row:hover .fb-copy,.fb-copy:focus-visible{opacity:1} .fb-copy:hover,.fb-copy:focus-visible{background:var(--line-3);color:var(--text);outline:0} .fb-copy.done{opacity:1;color:var(--green)} .fb-copy.failed{opacity:1;color:var(--red);background:color-mix(in srgb,var(--red) 12%,transparent)} .fb-row.failed{background:color-mix(in srgb,var(--red) 8%,var(--bg-raised))} .fb-row-error{margin:-1px 12px 5px;padding:3px 6px;color:var(--red);font:10px/1.4 var(--mono)} /* ===== the document reader modal ===== */ .docs-modal{position:absolute;inset:22px;background:var(--bg-raised); border:1px solid var(--line-3);border-radius:12px;box-shadow:var(--shadow-lg); display:flex;flex-direction:column;overflow:hidden} .doc-head{height:52px;box-sizing:border-box;padding:0 10px 0 18px;display:flex; align-items:center;gap:8px;border-bottom:1px solid var(--border);flex-shrink:0} /* This is a DIFFERENT path than the session recorded — the merged copy of a document whose worktree was removed. A fact that deviates from the expected state, so it renders. */ .doc-relocated{margin-top:8px;font-size:11.5px;line-height:1.5;color:var(--text-faint)} .doc-title{min-width:0;font:650 13.5px var(--sans);color:var(--text);overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .doc-spacer{flex:1} .doc-action{min-height:var(--control-target);padding:0 9px;flex-shrink:0;border:1px solid var(--line-3); border-radius:7px;background:transparent;font:11px var(--sans);color:var(--text-dim);cursor:pointer} .doc-action:hover,.doc-action:focus-visible{color:var(--text);background:var(--bg-hover);outline:0} .doc-action.copied{color:var(--green);border-color:color-mix(in srgb,var(--green) 42%,var(--border)); background:color-mix(in srgb,var(--green) 10%,transparent)} .doc-action.failed{color:var(--red);border-color:color-mix(in srgb,var(--red) 42%,var(--border)); background:color-mix(in srgb,var(--red) 12%,transparent)} .doc-comments{display:flex;align-items:center;gap:5px} .doc-comments[hidden]{display:none} .doc-comments svg{width:15px;height:15px} .doc-close{width:var(--close-target);height:var(--close-target);padding:0;border:0;border-radius:7px; background:transparent;color:var(--text-faint);font:300 17px/1 var(--sans);cursor:pointer} .doc-close:hover,.doc-close:focus-visible{color:var(--text);background:var(--bg-hover);outline:0} .doc-annotation-error{flex:none;margin:8px 12px 0;padding:7px 9px;border:1px solid var(--red-edge); border-radius:7px;background:var(--red-fill);color:var(--red);font:10.5px/1.45 var(--mono)} .doc-annotation-error[hidden]{display:none} .docs-scroll{position:relative;flex:1;min-height:0;overflow-y:auto} .docs-content{width:min(850px,100%);margin:0 auto;padding:10px 32px 40px} .doc-annotation-selection,.doc-annotation-editor-host,.doc-annotation-popover{z-index:3} .doc-annotation-review-panel{z-index:4;top:60px;right:12px;bottom:auto;left:auto; width:min(500px,calc(100% - 24px));max-height:min(420px,calc(100% - 72px))} .doc-annotation-review-source{margin:0 92px 5px 0;color:var(--text-dim); font:600 10.5px/1.4 var(--mono);overflow-wrap:anywhere} .fpath.open-failed,.pick-row.open-failed{color:var(--red); background:color-mix(in srgb,var(--red) 12%,transparent);border-radius:4px} .md-body{margin-top:12px;font-size:13px;line-height:1.65;color:var(--text)} .md-body h1{font-size:17px;margin:18px 0 8px} .md-body h2{font-size:15px;margin:16px 0 6px} .md-body h3,.md-body h4{font-size:13.5px;margin:14px 0 4px} .md-body p{margin:8px 0} .md-body ul,.md-body ol{margin:8px 0;padding-left:22px} .md-body li{margin:3px 0} .md-body code{font-family:var(--mono);font-size:11.5px;background:var(--line-2); border-radius:4px;padding:1px 4px; -webkit-box-decoration-break:clone;box-decoration-break:clone} .md-body pre{background:var(--bg-log);border:1px solid var(--border);border-radius:7px; padding:10px 12px;overflow-x:auto;margin:10px 0} .md-body pre code{background:none;padding:0;font-size:11.5px;line-height:1.55} .md-body blockquote{border-left:2px solid var(--border);margin:8px 0;padding:2px 12px;color:var(--text-dim)} .md-body table,.brief-markdown table{border-collapse:collapse;margin:10px 0;font-size:12px} .md-body th,.md-body td,.brief-markdown th,.brief-markdown td{ border:1px solid var(--border);padding:4px 9px;text-align:left;vertical-align:top} .brief-markdown table{width:100%;line-height:1.5;color:var(--text-dim)} .brief-markdown th{color:var(--text);font-weight:600;background:var(--wash)} .brief-markdown th,.brief-markdown td{overflow-wrap:anywhere} .md-body a{color:var(--blue);text-decoration:none} .md-body a:hover{text-decoration:underline} .md-body hr{border:none;border-top:1px solid var(--border);margin:14px 0} .md-body img{max-width:100%} .packetgate{color:var(--amber)} .answer-binding-error{display:flex;align-items:center;gap:12px;margin-bottom:var(--reader-item-gap);color:var(--red);font-size:12px} .answer-binding-retry{min-width:28px;min-height:28px;padding:5px 9px;border:1px solid currentColor;border-radius:6px;color:inherit;background:transparent;cursor:pointer} .answer-binding-retry:hover,.answer-binding-retry:focus-visible{background:color-mix(in srgb,var(--red) 15%,transparent)} .answer-binding-retry:active{background:color-mix(in srgb,var(--red) 25%,transparent)} .answer-binding-retry:disabled{opacity:.6;cursor:wait} .content.ai-disabled #panel-mode-bar{display:none} .brief-panel-toggle[hidden]{display:none} .g-ai-choice{display:flex;align-items:center;gap:8px;min-height:32px;padding:4px 8px;border-radius:6px;cursor:pointer} .g-ai-choice:hover,.g-ai-choice:focus-within{background:var(--bg-hover)} .g-link{display:inline-block;min-height:28px;padding:5px 2px} /* Navigation ancestry keeps ordinary rail rows and their keyed action surfaces. */ .session{position:relative;outline:none;margin-left:calc(6px + var(--session-depth, 0)*14px)} .session.session-family{padding-left:20px} .session:focus-visible{background:var(--bg-hover);box-shadow:inset 0 0 0 1px var(--line-4)} .session-disclosure{position:absolute;z-index:1;left:0;top:6px;width:28px;height:28px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--text-faint);display:flex;align-items:center;padding-left:4px;cursor:pointer} .session-disclosure.off{display:none} .session-disclosure:hover,.session-disclosure:focus-visible{color:var(--text);outline:none} .session:has(.session-disclosure:focus-visible){background:var(--bg-hover);box-shadow:inset 0 0 0 1px var(--line-4)} .session-descendant-counts{flex:none;min-width:28px;height:28px;padding:0 6px;border:0; border-radius:5px;background:transparent;color:var(--text-dim);font:11px var(--sans);cursor:pointer} .session-descendant-counts.off{display:none} .session-descendant-counts:hover,.session-descendant-counts:focus-visible{background:var(--line-3)} .session-descendant-counts:focus-visible{outline:2px solid var(--blue);outline-offset:1px} .descendant-counts{display:flex;align-items:center;gap:9px;font-variant-numeric:tabular-nums} .descendant-stat{display:inline-flex;align-items:center;gap:4px;white-space:nowrap} .descendant-dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none} .descendant-tooltip{display:none;position:absolute;z-index:10;right:8px;top:calc(100% - 4px); max-width:calc(100% - 16px);padding:8px 10px;border:1px solid var(--line-4);border-radius:6px; background:var(--bg-raised);color:var(--text);box-shadow:var(--shadow-sm); text-align:left;line-height:1.6;white-space:normal;pointer-events:none} .session-descendant-counts:hover .descendant-tooltip, .session-descendant-counts:focus-visible .descendant-tooltip{display:block} .session-chevron{display:block;width:12px;height:12px;flex:none;transform:rotate(0deg)} .session-chevron.open{transform:rotate(90deg)} .session.cross-folder-child:not(.now-row) .now-folder{display:inline} .session.archived-ancestor .stitle{color:var(--text-faint)} .session.archived-ancestor .continuebtn{display:none!important} .session.parent-drop-target,.session.parent-drop-target:hover{background:var(--blue-fill);box-shadow:inset 0 0 0 1.5px var(--blue)} .session.parent-drop-invalid,.session.parent-drop-invalid:hover{background:var(--red-fill);box-shadow:inset 0 0 0 1.5px var(--red)} .parent-dragging .session-more{visibility:hidden} .session.parent-write-pending{opacity:.6} #rail-parent-hint{position:fixed;z-index:1100;max-width:340px;padding:7px 10px;border:1px solid var(--blue-edge);border-radius:7px;background:var(--bg-raised);color:var(--text);box-shadow:var(--shadow-sm);font-size:11px;line-height:1.45;pointer-events:none} #rail-parent-hint.invalid{border-color:var(--red-edge);color:var(--red)} /* Screenshot surfaces use the shared spring presets; surrounding geometry cannot overshoot. */ .recent-screenshots.floating,.new-session-screenshot-card{ interpolate-size:allow-keywords;height:auto;opacity:1;overflow:clip;overflow-clip-margin:3px; transition:height var(--spring-steady-duration) var(--spring-steady),opacity 160ms ease, margin-bottom var(--spring-steady-duration) var(--spring-steady),display var(--spring-steady-duration) allow-discrete} .recent-screenshots.floating[style*="display: none"],.new-session-screenshot-card[hidden]{ height:0;opacity:0;pointer-events:none;margin-bottom:0} .answer-screenshot-host{transition:padding-block var(--spring-steady-duration) var(--spring-steady)} .floating-thumbnail{ opacity:1;translate:0 0;scale:1;transform-origin:center bottom; transition:opacity 160ms ease,translate var(--spring-snappy-duration) var(--spring-snappy), scale var(--spring-snappy-duration) var(--spring-snappy),border-color 140ms ease,background 140ms ease} .recent-screenshots.floating[inert] .floating-thumbnail, .new-session-screenshot-card[inert] .floating-thumbnail{ translate:0 4px;transition-duration:120ms;transition-timing-function:var(--spring-steady)} .screenshot-browse,.screenshot-shelf-close,.floating-thumbnail .recent-screenshot-attach, .recent-screenshots.floating .recent-screenshots-toggle{ transition:background 140ms ease,color 140ms ease,scale var(--spring-snappy-duration) var(--spring-snappy), translate var(--spring-snappy-duration) var(--spring-snappy)} .screenshot-browse:active,.screenshot-shelf-close:active, .recent-screenshots.floating .recent-screenshots-toggle:active{scale:.95} .floating-thumbnail .recent-screenshot-attach:active:not(:disabled){background:var(--blue-fill)} @starting-style{ .recent-screenshots.floating,.new-session-screenshot-card{height:0;opacity:0;margin-bottom:0} .floating-thumbnail{opacity:0;translate:0 12px} } .recent-screenshot-viewer{opacity:1;transition:opacity 160ms ease,display 180ms allow-discrete} .recent-screenshot-viewer[style*="display: none"]{opacity:0;pointer-events:none} .recent-screenshot-viewer-box{translate:0 0;scale:1;transform-origin:center; transition:translate var(--spring-soft-duration) var(--spring-soft),scale var(--spring-soft-duration) var(--spring-soft)} .recent-screenshot-viewer[style*="display: none"] .recent-screenshot-viewer-box{ translate:0 6px;scale:.99;transition-duration:160ms;transition-timing-function:var(--spring-steady)} @starting-style{ .recent-screenshot-viewer{opacity:0} .recent-screenshot-viewer-box{translate:0 14px;scale:.98} } @media (prefers-reduced-motion:reduce){ .recent-screenshots.floating,.new-session-screenshot-card,.answer-screenshot-host, .floating-thumbnail,.screenshot-browse,.screenshot-shelf-close, .floating-thumbnail .recent-screenshot-attach, .recent-screenshots.floating .recent-screenshots-toggle, .recent-screenshot-viewer,.recent-screenshot-viewer-box{transition:none} } .screenshot-motion-reset,.screenshot-motion-reset *{transition:none!important} /* Surface motion shares the physical presets in motion.js. Text is translated, never scaled. */ #answer-mode{position:relative;isolation:isolate} #answer-mode-indicator{position:absolute;z-index:-1;top:-1px;bottom:-1px;left:0;border-radius:5px; background:color-mix(in srgb,var(--blue) 16%,transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--blue) 35%,transparent);pointer-events:none} #answer-mode .segmented-control-button{background:transparent;box-shadow:none} #answer-mode .segmented-control-button:focus-visible{ background:var(--bg-hover)} .session{transition:background var(--spring-snappy-duration) var(--spring-snappy), box-shadow var(--spring-snappy-duration) var(--spring-snappy)} .session.active{box-shadow:inset 0 0 0 1px var(--line-3)} @keyframes surface-spring-enter{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}} @keyframes small-spring-enter{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}} #searchoverlay .search-modal,#docsview .docs-modal, .fb-panel.open{animation:surface-spring-enter var(--spring-soft-duration) var(--spring-soft) both} .new-session-menu:not([hidden]),.screenshot-attachment-confirmed .recent-screenshot-attach{ animation:small-spring-enter var(--spring-snappy-duration) var(--spring-snappy) both} @media(prefers-reduced-motion:reduce){ .session,.session .session-more,.answer-suggested-replies,#new-session-input{transition:none} #searchoverlay .search-modal,#docsview .docs-modal, .fb-panel.open,.new-session-menu:not([hidden]), .screenshot-attachment-confirmed .recent-screenshot-attach{animation:none} } #answer-send,#new-session-start,.recent-screenshot-attach,.answer-suggested-reply{ transition:translate var(--spring-snappy-duration) var(--spring-snappy)} #answer-send:active:not(:disabled),#new-session-start:active:not(:disabled), .recent-screenshot-attach:active:not(:disabled),.answer-suggested-reply:active{translate:0 1px} @media(prefers-reduced-motion:reduce){ #answer-send,#new-session-start,.recent-screenshot-attach,.answer-suggested-reply{transition:none} } .answer-tool-summary{min-height:32px;padding:6px 10px;display:flex;align-items:baseline; gap:8px;list-style:none;border-radius:7px;cursor:pointer;color:var(--text-dim)} .answer-tool-summary::-webkit-details-marker{display:none} .answer-tool-summary::before{content:'›';font-size:16px;line-height:18px;flex:none} .answer-tool-receipt[open]>.answer-tool-summary::before{transform:rotate(90deg)} .answer-tool-summary:hover,.answer-tool-summary:focus{background:var(--bg-hover); box-shadow:inset 0 0 0 1px var(--line-3);outline:none} .answer-tool-summary:active{background:var(--line-2)} .answer-evidence-row.failed .answer-tool-summary, .answer-evidence-row.failed .answer-tool-result{color:var(--red)} .answer-evidence-row.failed .answer-tool-summary:hover, .answer-evidence-row.failed .answer-tool-summary:focus{background:color-mix(in srgb,var(--red) 12%,transparent)} .answer-tool-summary .answer-evidence-phrase{flex:1;white-space:normal;overflow-wrap:anywhere} .answer-tool-evidence{margin:4px 10px 12px 25px;border-left:1px solid var(--line-3);padding-left:14px} .answer-tool-evidence:empty{display:none} .answer-tool-evidence-label{font-size:10px;color:var(--text-faint);margin:10px 0 5px} .answer-tool-evidence pre{font:11.5px/1.6 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere; margin:0;padding:8px;background:var(--bg-hover);border-radius:5px;color:var(--text-dim)} .answer-tool-result{font-size:11px;color:var(--text-dim);flex:none} .answer-tool-error{margin:3px 10px 8px 25px;color:var(--red);font-size:12px;overflow-wrap:anywhere} .answer-tool-image{display:block;margin:8px 10px 10px 25px;padding:4px;min-width:32px;min-height:32px; border:1px solid var(--line-3);border-radius:7px;background:transparent;cursor:pointer;max-width:calc(100% - 35px)} .answer-tool-image img{display:block;max-width:100%;width:172px;height:auto;border-radius:4px} .answer-tool-image.expanded img{width:640px} .answer-tool-image:hover,.answer-tool-image:focus-visible{background:var(--bg-hover);outline:2px solid var(--line-3)} .answer-tool-batch>.answer-tool-receipt>.answer-tool-evidence{padding-left:8px} .answer-tool-batch-evidence>.answer-tool-summary{color:var(--text-faint);font-size:11px} .md-mermaid{background:var(--bg);margin:12px 0;border:1px solid var(--border);border-radius:8px;overflow:hidden} .md-mermaid-controls{display:flex;justify-content:flex-end;gap:4px;padding:4px 6px} .md-mermaid-controls[hidden],.md-mermaid-view[hidden],.md-mermaid-error[hidden]{display:none} .md-mermaid-controls button{min-width:28px;min-height:28px;padding:3px 8px;border:0; border-radius:5px;background:transparent;color:var(--text-dim);font:inherit;font-size:11px;cursor:pointer} .md-mermaid-controls button:hover,.md-mermaid-controls button:focus-visible, .md-mermaid-controls button[aria-pressed="true"],.md-mermaid-controls button[aria-expanded="true"]{ background:var(--line-2);color:var(--text)} .md-mermaid-controls button:focus-visible,.md-mermaid-view:focus-visible{outline:2px solid var(--blue);outline-offset:-2px} .md-mermaid-view{overflow:auto;padding:12px;text-align:center} .md-mermaid-view img{display:block;margin:auto;max-width:100%;height:auto} .md-mermaid-actual-size .md-mermaid-view img{max-width:none} .md-body .md-mermaid>pre{margin:0;border:0;border-radius:0;text-align:left} .md-mermaid-rendered:not(.md-mermaid-show-source)>pre{display:none} .md-mermaid-error{padding:12px;color:var(--red);white-space:pre-wrap;font-size:12px} .md-mermaid-stage{position:fixed;left:-100000px;top:0;visibility:hidden;pointer-events:none} /* Now keeps canonical family order; folder labels name consecutive runs, not new groups. */ .rail-pinned-toggle{display:flex;align-items:center;gap:7px; width:calc(100% - 12px);min-height:32px;margin:0 6px 3px;padding:5px 8px;border:0;border-radius:6px; background:var(--bg);color:var(--text-dim);font:11px var(--sans);text-align:left;cursor:pointer} .rail-pinned-toggle strong{font-weight:600}.pin-count{color:var(--rail-preview)} .pin-attention{margin-left:auto;color:var(--blue);font-size:10px} .rail-pinned-toggle:hover,.rail-pinned-toggle:focus-visible{background:var(--bg-hover);color:var(--text);outline:0} .rail-pinned-toggle:focus-visible{box-shadow:inset 0 0 0 1px var(--blue)} .now-folder-heading{display:flex;justify-content:flex-end;align-items:flex-start;gap:8px;position:sticky;top:var(--now-header-height);z-index:1;min-height:30px;padding:0 9px;background:var(--bg)} .now-folder-heading button{display:flex;justify-content:flex-end;align-items:center;gap:5px;min-width:28px;min-height:28px;max-width:100%;padding:4px 5px; background:transparent;border:0;border-radius:5px;color:var(--rail-preview);font:500 10px var(--sans);cursor:pointer} .now-folder-heading svg{width:12px;height:12px;flex:none}.now-folder-heading span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .now-folder-heading button:hover,.now-folder-heading button:focus-visible{background:var(--line-3);color:var(--text);outline:0} .now-folder-heading button:focus-visible{box-shadow:inset 0 0 0 1px var(--blue)} .now-folder-heading button.copied{color:var(--green);background:var(--green-fill)} .now-folder-heading button.copied:hover,.now-folder-heading button.copied:focus-visible{background:var(--green-edge);color:var(--green)} .now-folder-copy-error{order:-1;flex:1;min-width:0;padding:6px 0;color:var(--red);font:11px/1.5 var(--sans);text-align:right;overflow-wrap:anywhere} .now-folder-copy-error[hidden]{display:none} .now-folder-heading.copy-failed button{flex-shrink:0;max-width:50%;color:var(--red);background:var(--red-fill)} .now-folder-heading.copy-failed button:hover,.now-folder-heading.copy-failed button:focus-visible{background:var(--red-edge);color:var(--red)} .rail-actions-menu{width:210px} .row-context-row.semantic-pin:is(:hover,:focus-visible){color:var(--amber);background:var(--amber-fill)} .row-context-row.semantic-done:is(:hover,:focus-visible){color:var(--green);background:var(--green-fill-h);box-shadow:inset 0 0 0 1px var(--green-edge-h)} .row-context-row.semantic-revisit:is(:hover,:focus-visible){color:var(--violet);background:var(--line-3)} .row-context-row.danger:is(:hover,:focus-visible){color:var(--red);background:var(--red-fill)} .now-folder-heading.after-pins{border-top:1px solid var(--border);margin-top:9px;padding-top:8px} /* Image objects share one thumbnail and viewer surface across draft and transcript content. */ draft-image-editor{display:block;white-space:pre-wrap;overflow-wrap:anywhere;outline:none;overflow-y:auto;line-height:1.8} draft-image-editor:empty::before{content:attr(placeholder);color:var(--text-faint);pointer-events:none} draft-image-editor[disabled]{color:var(--text-dim);cursor:default} .message-image{position:relative;display:inline-flex;vertical-align:middle;width:280px;height:175px;max-width:100%;border:1px solid var(--line-3);border-radius:8px;overflow:hidden;background:var(--bg-raised)} .message-image-preview{display:flex;align-items:center;justify-content:center;position:relative;width:100%;height:100%;padding:0;border:0;background:transparent;color:var(--text);cursor:pointer} .message-image-preview img{display:block;width:100%;height:100%;object-fit:contain} .message-image-preview:hover,.message-image-preview:focus-visible{background:var(--blue-fill-h);outline:2px solid var(--blue);outline-offset:-2px} .message-image-preview:hover::after,.message-image-preview:focus-visible::after{content:'↗';position:absolute;inset:0;display:flex;justify-content:flex-end;align-items:flex-end;padding:8px;background:var(--blue-fill);color:var(--blue)} .message-image-error{color:var(--red);padding:10px;font:12px/1.5 var(--sans)} draft-image-editor .message-image,.draft-image-measure .message-image{width:86px;height:62px;margin:3px 5px;vertical-align:middle} .draft-image-remove{position:absolute;right:1px;top:1px;width:32px;height:32px;border:1px solid var(--line-3);border-radius:6px;background:var(--bg-raised);color:var(--text-dim);font-size:20px;cursor:pointer;opacity:0} .message-image:hover .draft-image-remove,.message-image:focus-within .draft-image-remove{opacity:1} .draft-image-remove:hover,.draft-image-remove:focus-visible{color:var(--red);background:var(--red-fill-h);opacity:1} .answer-user-parts .message-image{display:flex;margin:12px 0} .answer-user-parts{white-space:pre-wrap} .image-viewer-controls{display:flex;gap:4px;align-items:center;margin-left:auto} .recent-screenshot-viewer-head .image-viewer-controls button{min-width:32px;width:auto;height:32px;padding:0 8px;font:12px var(--sans)} .image-viewer-controls button[aria-pressed="true"]{background:var(--blue-fill);color:var(--blue)} #image-viewer-stage{display:block;overflow:auto;position:relative;background:var(--bg);touch-action:none} #image-viewer-stage.zoomed{cursor:grab} .image-viewer-frame{min-width:100%;min-height:100%;width:max-content;height:max-content;display:flex;align-items:center;justify-content:center;padding:24px} #recent-screenshot-viewer-image{max-width:none;max-height:none;flex:none;user-select:none} #image-viewer-error{color:var(--red);padding:24px;font-size:13px} #image-viewer-navigation{display:flex;gap:6px;overflow:auto;max-width:100%} #image-viewer-navigation .message-image{width:64px;height:44px;flex:none} #image-viewer-navigation button[aria-pressed="true"]{outline:2px solid var(--blue);outline-offset:-2px} .recent-screenshot-viewer-foot{flex-wrap:wrap} .recent-screenshots.floating .recent-screenshots-track,.new-session-screenshot-track{max-height:180px;overflow:auto;scrollbar-width:thin} .md-session-link{display:inline-flex;align-items:center;gap:6px;min-height:28px;min-width:28px; max-width:100%;box-sizing:border-box;padding:2px 7px;border-radius:6px; color:var(--text);background:var(--bg-raised);box-shadow:inset 0 0 0 1px var(--border); text-decoration:none;vertical-align:baseline;cursor:pointer;overflow-wrap:anywhere} .md-session-link:hover,.md-session-link:focus-visible{background:var(--bg-hover); outline:2px solid var(--border);outline-offset:1px;text-decoration:none} .md-session-link:active,.md-session-link[aria-busy="true"]{background:var(--blue-fill-h)} .md-session-link .md-session-icon{display:inline-flex;width:15px;height:15px;flex-shrink:0} .md-session-icon svg{width:100%;height:100%} .md-session-error{display:block;color:var(--red);font-size:12px;line-height:1.5;margin:4px 0} .rail-order-gap{flex:none;pointer-events:auto;background:none;border:0;padding:0;margin:0} /* Research records use the ordinary document surface and theme. */ .doc-action[hidden]{display:none} .research-record{width:min(1050px,100%);font-size:13px;line-height:1.65;color:var(--text);padding-top:20px} .research-tree{list-style:none;margin:0 0 0 8px;padding:0} .research-tree .research-tree{margin:4px 0 0 6px} .research-tree li{position:relative;padding:0 0 10px 20px} .research-tree li::before{content:"";position:absolute;left:0;top:16px;width:15px;border-top:1px solid var(--line-3)} .research-tree li::after{content:"";position:absolute;left:0;top:0;bottom:0;border-left:1px solid var(--line-3)} .research-tree li:last-child::after{height:17px;bottom:auto} .research-heading{position:relative;padding:5px 8px 5px 21px;min-height:32px;list-style:none;border-radius:4px;overflow-wrap:anywhere} summary.research-heading{cursor:pointer} summary.research-heading::-webkit-details-marker{display:none} summary.research-heading::before{content:"›";position:absolute;left:6px;top:4px;color:var(--text-dim)} .research-step[open]>summary::before{transform:rotate(90deg)} summary.research-heading:hover,summary.research-heading:focus-visible{background:var(--bg-hover);outline:2px solid transparent} summary.research-heading:focus-visible{outline-color:var(--text-dim)} .research-heading strong{font-weight:600} .research-annotation{display:block;color:var(--text-dim);margin-top:2px} .research-learning{color:var(--green)} .research-limit{color:var(--amber)} .research-untested,.research-proposal{color:var(--blue)} .research-support{margin:8px 8px 15px 21px;padding-left:14px;border-left:2px solid var(--line-3)} .research-support .md-link{display:inline-block;min-height:28px;padding:2px 4px;overflow-wrap:anywhere} .research-support .md-link:hover,.research-support .md-link:focus-visible{background:var(--bg-hover);outline:2px solid var(--line-3);border-radius:3px} .research-error{color:var(--red);white-space:pre-wrap;overflow-wrap:anywhere} .reader-command-dialog{width:min(440px,calc(100vw - 48px));max-height:calc(100vh - 48px); display:flex;flex-direction:column;background:var(--term-bg);border:1px solid var(--border); border-radius:12px;box-shadow:var(--shadow-lg);overflow:hidden} .reader-command-head{display:flex;align-items:center;gap:16px;padding:10px 14px; border-bottom:1px solid var(--border);font:600 14px var(--sans)} .reader-command-read{margin-left:auto} .reader-command-choices{display:flex;flex-direction:column;gap:8px;padding:14px;overflow:auto} .reader-command-dialog button{min-width:32px;min-height:32px;padding:5px 12px;border:1px solid var(--border); border-radius:6px;background:var(--bg-raised);color:var(--text);font:13px var(--sans);cursor:pointer} .reader-command-dialog button:hover,.reader-command-dialog button:focus-visible{ background:var(--bg-hover);outline:2px solid var(--blue);outline-offset:1px} .reader-command-dialog button:active{background:var(--blue-fill-h)} .reader-command-error{padding:0 14px 8px;color:var(--red);font:13px var(--sans)} .reader-command-error:empty{display:none} .terminal-runtime-problem{position:absolute;bottom:0;left:0;right:0;z-index:5} .terminal-runtime-problem[hidden]{display:none} .terminal-runtime-problem span{max-height:120px;overflow:auto; white-space:pre-wrap;overflow-wrap:anywhere} #lens-term:has(>.terminal-runtime-problem:not([hidden]))>.term-placeholder{display:none!important} .conversation-request{font:13px/1.5 var(--sans);padding:12px;border-bottom:1px solid var(--border);white-space:normal} .conversation-request label{display:block;margin-bottom:8px} .conversation-request input{display:block;min-height:32px;width:100%;margin-top:6px;padding:6px 8px;border:1px solid var(--border);border-radius:6px;background:var(--bg-raised);color:var(--text);font:inherit} .conversation-request pre{white-space:pre-wrap;max-height:180px;overflow:auto} .conversation-request button{min-height:32px;min-width:32px;padding:5px 10px;margin:4px;border:1px solid var(--border);border-radius:6px;background:var(--bg-raised);color:var(--text);font:inherit;cursor:pointer} .conversation-request button:hover,.conversation-request button:focus-visible{background:var(--bg-hover);outline:2px solid var(--blue)} .conversation-request button:active{background:var(--blue-fill-h)} .conversation-send-error{color:var(--red);font-size:13px;white-space:pre-wrap} #conversation-requests:empty{display:none} #conversation-requests{max-height:35vh;overflow:auto} .conversation-request button[aria-pressed="true"],.reader-command-dialog button[aria-pressed="true"]{background:var(--blue-fill);border-color:var(--blue)} /* HTML owns its own opaque browsing context; comments live in the app above it. */ .html-preview-open .docs-content{width:100%;height:100%;padding:16px;box-sizing:border-box} .html-preview-open .docs-scroll{overflow:hidden} .html-preview-stage{display:grid;grid-template-columns:minmax(0,1fr) 248px;gap:24px;height:100%;min-height:0} .html-preview-viewport{position:relative;min-width:0;min-height:0;overflow:hidden;border:1px solid var(--line-4);border-radius:7px} .html-preview-viewport iframe{display:block;width:100%;height:100%;border:0;background:white} .html-preview-marks{position:absolute;inset:0;pointer-events:none;overflow:hidden} .html-preview-marks[hidden]{display:none} .html-comment-pin{position:absolute;pointer-events:auto;width:30px;height:30px;background:var(--bg-raised);border:1px solid var(--amber-edge);color:var(--amber)} .html-comment-pin:hover,.html-comment-pin:focus-visible{background:var(--amber-fill-h);color:var(--amber)} .html-preview-margin{position:relative;min-height:0;overflow-y:auto;scrollbar-color:var(--thumb) transparent} .html-preview-margin>section{position:absolute;left:0;right:4px} .html-comment-context{font:10px/1.4 var(--sans);color:var(--text-dim);margin-top:6px} .html-comment-context summary{min-height:28px;padding:6px;border-radius:5px;cursor:pointer;overflow-wrap:anywhere} .html-comment-context summary:hover,.html-comment-context summary:focus-visible{background:var(--bg-hover);color:var(--text);outline:0} .html-comment-context img{display:block;max-width:100%;max-height:160px;object-fit:contain;border:1px solid var(--line-3);border-radius:5px;margin:6px 0} .html-comment-draft .html-comment-context{margin-top:0} .html-preview-stage.compact{display:block;position:relative} .html-preview-stage.compact .html-preview-viewport{height:100%} .html-preview-stage.compact .html-preview-margin{position:absolute;inset:0;overflow:visible;pointer-events:none} .html-preview-stage.compact .html-preview-margin>section{pointer-events:auto;left:auto;right:12px;width:286px;max-width:calc(100% - 24px);padding:10px 11px;border:1px solid var(--line-4);border-radius:9px;background:var(--bg-raised);box-shadow:var(--shadow-md)} .html-preview-modes{display:flex;border:1px solid var(--line-3);padding:2px;border-radius:7px} .html-preview-modes[hidden]{display:none} .html-preview-modes button{min-height:28px;padding:4px 9px;border:0;border-radius:5px;background:transparent;color:var(--text-dim);font:11px var(--sans);cursor:pointer} .html-preview-modes button:hover,.html-preview-modes button:focus-visible{background:var(--bg-hover);color:var(--text);outline:0} .html-preview-modes button[aria-pressed="true"]{background:var(--line-4);color:var(--text)} .html-comment-parent{min-height:28px;padding:4px 6px;background:transparent;border:0;border-radius:5px;color:var(--text-dim);font:11px var(--sans);cursor:pointer} .html-comment-parent:hover,.html-comment-parent:focus-visible{background:var(--bg-hover);color:var(--text);outline:0} .html-comment-outline{position:absolute;box-sizing:border-box;border:2px solid var(--amber);border-radius:3px;background:var(--amber-fill);pointer-events:none} .document-compose{flex:none;padding:8px 16px 12px;border-top:1px solid var(--line-3)} .document-compose[hidden]{display:none} .document-compose .answer-compose-inner{max-width:100%;display:flex;align-items:flex-end;gap:8px} .document-compose draft-image-editor{flex:1;min-width:0} .document-compose .doc-comments{flex:none;margin-bottom:3px} .document-compose .answer-send{flex:none;min-height:32px} .document-margin-enabled.docs-content{width:min(1160px,100%);display:grid;grid-template-columns:minmax(0,1fr) 248px;gap:32px} .document-margin-enabled .md-body{min-width:0} .document-annotation-margin{padding:0;min-width:0;position:relative} .document-annotation-margin[hidden]{display:none} .document-annotation-margin>section{margin-bottom:8px} .document-margin-enabled .doc-relocated{grid-column:1/-1} .document-compose~.doc-annotation-review-panel{top:auto;bottom:72px} .html-comment-selection{position:absolute;box-sizing:border-box;border:2px solid var(--blue);border-radius:3px;pointer-events:none}