/* Helix Agent — web UI.
 *
 * The design tokens are lifted from src/sidebar/webview/styles.ts so the browser UI and the VS Code
 * sidebar share one visual language. The difference: outside VS Code nothing defines the
 * --vscode-* custom properties, so they are given real values here (dark + light), keeping the same
 * NAMES the sidebar rules already use.
 */

/* ── Tokens ─────────────────────────────────────────────────────────────────────────────── */

:root {
    /* Status + shape scale — verbatim from the sidebar. */
    --bas-ok: #3fb950;
    --bas-error: #f85149;
    --bas-warn: #d29922;
    --bas-ok-rgb: 63, 185, 80;
    --bas-error-rgb: 248, 81, 73;
    --bas-r-sm: 4px;
    --bas-r-md: 6px;
    --bas-r-lg: 8px;
    --bas-r-pill: 999px;
    --bas-grey-rgb: 127, 127, 127;
    --bas-line-faint: rgba(var(--bas-grey-rgb), .12);
    --bas-line: rgba(var(--bas-grey-rgb), .28);
    --bas-line-strong: rgba(var(--bas-grey-rgb), .45);
    --bas-fill-subtle: rgba(var(--bas-grey-rgb), .08);
    --bas-fill: rgba(var(--bas-grey-rgb), .15);
    --bas-fill-hover: rgba(var(--bas-grey-rgb), .28);
    --bas-green: #88c796;
    --bas-green-rgb: 136, 199, 150;

    /* The agent accent. Identical to the sidebar's Agentic mode (styles.ts `body.agentic-mode`),
       so the browser UI reads as the same product rather than a blue-tinted cousin. The composer
       border and wash, the send button, focus rings, the running dot and selection all take it. */
    --mode-accent: rgb(142, 117, 176);
    --mode-accent-rgb: 142, 117, 176;
    --mode-accent-hover: rgba(142, 117, 176, .82);
    --mode-accent-fg: #211a2a;
    /* Kept as an alias so rules lifted from the sidebar keep working unchanged. */
    --agent-search-accent: var(--mode-accent);
    --agent-search-accent-rgb: var(--mode-accent-rgb);
    --bas-sel-bg: rgba(var(--mode-accent-rgb), .27);

    --bas-shadow-popover: 0 6px 24px rgba(0, 0, 0, .45);

    --bas-fs-tag: 10px;
    --bas-fs-micro: 11px;
    /* Slightly roomier than the sidebar: the browser has more space and a longer reading distance. */
    --bas-fs-code: 12px;
    --bas-fs-sm: 12.5px;
    /* Research chrome needs one compact, readable size between metadata and answer copy. */
    --bas-fs-research: 13px;
    --bas-fs-research-meta: 11.5px;
    --bas-fs-md: 14px;
    --bas-fs-lg: 15px;

    --bas-mono: ui-monospace, 'SF Mono', 'Menlo', 'Cascadia Mono', 'Consolas', monospace;
    --bas-sans: system-ui, -apple-system, 'Segoe UI', 'Ubuntu', 'Helvetica Neue', sans-serif;

    --rail-w: 240px;
    --thread-w: 780px;
}

/* Dark is the default: this is a developer tool that mostly lives beside a dark editor. */
:root, :root[data-theme="dark"] {
    color-scheme: dark;
    --vscode-foreground: #cccccc;
    --vscode-descriptionForeground: #9d9d9d;
    --vscode-disabledForeground: #6e6e6e;
    --vscode-editor-background: #1f1f1f;
    --vscode-sideBar-background: #181818;
    --vscode-editorWidget-background: #252526;
    --vscode-widget-border: #2f2f2f;
    --vscode-panel-border: #2b2b2b;
    --vscode-input-background: #2a2a2a;
    --vscode-input-foreground: #e6e6e6;
    --vscode-input-border: #3a3a3a;
    --vscode-input-placeholderForeground: #8a8a8a;
    /* The product's accent is the Helix lilac. The interface used to borrow VS Code's blue for
       links, focus rings and primary buttons, which read as a second, unrelated brand. */
    --vscode-button-background: #7d5fae;
    --vscode-button-foreground: #ffffff;
    --vscode-button-hoverBackground: #8f6fc4;
    --vscode-list-hoverBackground: #2a2d2e;
    --vscode-textCodeBlock-background: #1a1a1a;
    --vscode-textLink-foreground: #b799e6;
    --vscode-focusBorder: #8e75b0;
    --vscode-toolbar-hoverBackground: rgba(90, 93, 94, .31);
    --vscode-scrollbarSlider-background: rgba(121, 121, 121, .4);
    --vscode-scrollbarSlider-hoverBackground: rgba(100, 100, 100, .7);
    /* Syntax colours use the same muted lilac/cyan/green family as the Helix UI. */
    --syntax-keyword: #c99ae8;
    --syntax-string: #9fd477;
    --syntax-number: #65d4df;
    --syntax-comment: #7f8b91;
    --syntax-function: #e6c77a;
    --syntax-property: #ef8f9c;
    --syntax-tag: #bd9ae8;
    --syntax-attr: #82b8f0;
    --syntax-operator: #bca8cf;
    --diff-add-bg: rgba(var(--bas-ok-rgb), .14);
    --diff-del-bg: rgba(var(--bas-error-rgb), .14);
    --user-bubble-bg: #2a2a2a;
}

:root[data-theme="light"] {
    color-scheme: light;
    --vscode-foreground: #3b3b3b;
    --vscode-descriptionForeground: #6b6b6b;
    --vscode-disabledForeground: #a0a0a0;
    --vscode-editor-background: #ffffff;
    --vscode-sideBar-background: #f8f8f8;
    --vscode-editorWidget-background: #ffffff;
    --vscode-widget-border: #e0e0e0;
    --vscode-panel-border: #e5e5e5;
    --vscode-input-background: #ffffff;
    --vscode-input-foreground: #1f1f1f;
    --vscode-input-border: #cecece;
    --vscode-input-placeholderForeground: #767676;
    --vscode-button-background: #6a4b96;
    --vscode-button-foreground: #ffffff;
    --vscode-button-hoverBackground: #5b3f81;
    --vscode-list-hoverBackground: #ececec;
    --vscode-textCodeBlock-background: #f3f3f3;
    --vscode-textLink-foreground: #6a4b96;
    --vscode-focusBorder: #7a609e;
    --vscode-toolbar-hoverBackground: rgba(0, 0, 0, .06);
    --vscode-scrollbarSlider-background: rgba(100, 100, 100, .3);
    --vscode-scrollbarSlider-hoverBackground: rgba(100, 100, 100, .5);
    --syntax-keyword: #713e91;
    --syntax-string: #3f701d;
    --syntax-number: #006b75;
    --syntax-comment: #68747c;
    --syntax-function: #795e26;
    --syntax-property: #a3154f;
    --syntax-tag: #6f42a5;
    --syntax-attr: #0451a5;
    --syntax-operator: #65536f;
    /* A deeper lilac on white: the dark theme's tint is too pale here, and white-on-accent needs
       ~5.6:1 for the send button and primary action to stay AA. */
    --mode-accent: rgb(122, 96, 158);
    --mode-accent-rgb: 122, 96, 158;
    --mode-accent-hover: rgba(122, 96, 158, .86);
    --mode-accent-fg: #ffffff;
    /* Darkened so status text keeps WCAG AA contrast on a white background. */
    --bas-ok: #1a7f37;
    --bas-error: #cf222e;
    --bas-warn: #9a6700;
    --bas-shadow-popover: 0 6px 24px rgba(0, 0, 0, .18);
    --diff-add-bg: rgba(26, 127, 55, .12);
    --diff-del-bg: rgba(207, 34, 46, .12);
    --user-bubble-bg: #f0f0f0;
}

/* ── Base ───────────────────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* The `hidden` attribute is enforced by the UA stylesheet as `display: none`, which ANY author
   `display` rule outranks. Several elements here are toggled via `hidden` while also being
   flex/inline-flex when visible (#approval, #status-chip, #jump-latest), so without this they can
   never actually hide. Keep this rule above everything that sets `display`. */
[hidden] { display: none !important; }

html, body {
    height: 100%;
    min-height: 100%;
    font-family: var(--bas-sans);
    font-size: var(--bas-fs-md);
    line-height: 1.45;
    color: var(--vscode-foreground);
    background: var(--vscode-editor-background);
    -webkit-font-smoothing: antialiased;
}
body { overflow: hidden; overscroll-behavior: none; }

button, textarea, input { font: inherit; color: inherit; }
a { color: var(--vscode-textLink-foreground); }

:focus-visible {
    outline: 2px solid var(--mode-accent);
    outline-offset: 2px;
    border-radius: var(--bas-r-sm);
}

.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;
}

.dim { color: var(--vscode-descriptionForeground); }
.push-right { margin-left: auto; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
    background: var(--vscode-scrollbarSlider-background);
    border-radius: var(--bas-r-pill);
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--vscode-scrollbarSlider-hoverBackground); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ── Shell ──────────────────────────────────────────────────────────────────────────────── */

#app { display: flex; width: 100%; height: 100%; min-height: 0; overflow: hidden; }

/* Dynamic viewport units follow the visible browser area when mobile address bars or the on-screen
   keyboard open. The earlier 100%/100vh layout could leave the composer below the keyboard. */
@supports (height: 100dvh) {
    html, body, #app { height: 100dvh; }
}

#rail {
    width: var(--rail-w);
    flex: 0 0 var(--rail-w);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: visible;
    background: var(--vscode-sideBar-background);
    border-right: 1px solid var(--vscode-panel-border);
    transition: width .18s ease, flex-basis .18s ease, margin-left .18s ease;
}

.rail-head {
    display: flex; align-items: center; gap: 8px;
    min-height: 40px;
    padding: 6px 8px 6px 12px;
    transition: padding .18s ease, gap .18s ease;
}
#rail-close { margin-left: auto; }
.brand {
    display: flex; align-items: center; gap: 8px;
    width: 91px; min-width: 0; flex: 0 0 auto;
    padding: 3px 4px 3px 1px;
    background: none; border: 0; border-radius: var(--bas-r-sm);
    color: inherit; cursor: pointer;
    overflow: hidden;
    transition: width .18s ease, opacity .12s ease, padding .18s ease;
}
.brand:hover { background: var(--vscode-toolbar-hoverBackground); }
.brand-wordmark {
    display: block;
    width: 86px; height: 18px;
    background-color: var(--mode-accent);
    /* The source also contains the large symbol. Positioning its mask at the bottom exposes only
       the HELIX wordmark while retaining the original geometry from the supplied brand asset. */
    -webkit-mask: url('/helix-logo.png') no-repeat center bottom / 88px auto;
    mask: url('/helix-logo.png') no-repeat center bottom / 88px auto;
}
.new-chat-nav {
    display: flex; align-items: center; gap: 10px;
    width: calc(100% - 20px); margin: 10px 10px 4px; padding: 8px 9px;
    border: 0; border-radius: var(--bas-r-md); background: transparent;
    color: var(--vscode-foreground); font-size: var(--bas-fs-sm); text-align: left; cursor: pointer;
    overflow: hidden;
    transition: width .18s ease, margin .18s ease, padding .18s ease, background .12s ease;
}
.new-chat-nav svg { flex: 0 0 18px; width: 18px; height: 18px; color: var(--vscode-descriptionForeground); }
.new-chat-nav span {
    max-width: 180px; overflow: hidden; white-space: nowrap;
    transition: max-width .18s ease, opacity .12s ease;
}
.new-chat-nav:hover, .new-chat-nav:focus-visible {
    background: var(--vscode-list-hoverBackground); outline: 0;
}
.new-chat-nav:hover svg, .new-chat-nav:focus-visible svg { color: var(--mode-accent); }

.rail-shortcuts { display: grid; gap: 2px; padding: 1px 10px 5px; }
.rail-shortcut {
    display: flex; align-items: center; gap: 10px;
    width: 100%; min-height: 32px; padding: 6px 9px;
    overflow: hidden;
    border: 0; border-radius: var(--bas-r-md);
    background: transparent; color: var(--vscode-descriptionForeground);
    font: inherit; font-size: var(--bas-fs-sm); text-align: left; cursor: pointer;
    transition: width .18s ease, padding .18s ease, background .12s ease;
}
.rail-shortcut:hover, .rail-shortcut:focus-visible {
    color: var(--vscode-foreground); background: var(--vscode-list-hoverBackground); outline: 0;
}
.rail-shortcut svg { flex: 0 0 18px; width: 18px; height: 18px; }
.rail-shortcut span {
    max-width: 180px; overflow: hidden; white-space: nowrap;
    transition: max-width .18s ease, opacity .12s ease;
}

#dialog-list {
    flex: 1; min-height: 0; overflow-y: auto; padding: 2px 6px 6px;
    transition: opacity .12s ease;
}

.dialog-item {
    display: flex; align-items: center; gap: 6px;
    width: 100%; text-align: left;
    min-height: 28px;
    padding: 5px 7px; margin-bottom: 1px;
    background: none; border: 0; border-radius: var(--bas-r-md);
    color: inherit; font-size: var(--bas-fs-sm); cursor: pointer;
}
.dialog-item:hover { background: var(--vscode-list-hoverBackground); }
.dialog-item[aria-current="true"] {
    background: var(--bas-sel-bg);
    font-weight: 600;
}
.dialog-item .title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dialog-item .kill {
    flex: 0 0 auto; opacity: 0; border: 0; background: none;
    color: var(--vscode-descriptionForeground); cursor: pointer;
    padding: 2px 4px; border-radius: var(--bas-r-sm); line-height: 1;
}
.dialog-item:hover .kill, .dialog-item .kill:focus-visible { opacity: 1; }
.dialog-item .kill:hover { color: var(--bas-error); background: var(--vscode-toolbar-hoverBackground); }

.rail-foot {
    padding: 8px 12px;
    font-size: var(--bas-fs-micro);
    transition: padding .18s ease;
}
.rail-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#rail-scrim { display: none; }

/* `position: relative` makes this the containing block for #jump-latest. Without it the pill
   centres on the whole window — visibly off to one side, because the rail is not part of the
   conversation column. */
#main {
    flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; position: relative;
    isolation: isolate;
    transition: flex-basis .22s ease, width .22s ease;
}

/* Generated files open beside the conversation as a real sibling pane, not a modal overlay. */
#artifact-panel {
    width: 0; min-width: 0; flex: 0 0 0;
    display: flex; flex-direction: column; min-height: 0;
    overflow: hidden; opacity: 0; transform: translateX(18px);
    background: var(--vscode-editor-background);
    transition: flex-basis .22s ease, width .22s ease, opacity .16s ease, transform .22s ease;
}
body.artifact-open #artifact-panel.is-visible {
    width: var(--artifact-pane-size, calc((100vw - 61px) / 2));
    flex-basis: var(--artifact-pane-size, calc((100vw - 61px) / 2));
    opacity: 1; transform: translateX(0);
}
#artifact-panel[hidden] { display: none; }
.artifact-resizer {
    position: relative; z-index: 4; align-self: stretch;
    width: 0; flex: 0 0 0; opacity: 0;
    cursor: col-resize; touch-action: none; background: transparent;
    transition: width .18s ease, flex-basis .18s ease, opacity .14s ease;
}
body.artifact-open .artifact-resizer {
    width: 7px; flex-basis: 7px; opacity: 1;
}
.artifact-resizer::before {
    content: ''; position: absolute; inset: 0 auto 0 3px; width: 1px;
    background: rgba(var(--mode-accent-rgb), .72);
    transition: width .12s ease, left .12s ease, background .12s ease;
}
.artifact-resizer span {
    position: absolute; top: 50%; left: 1px; width: 5px; height: 30px;
    margin-top: -15px; border-radius: var(--bas-r-pill);
    background: var(--mode-accent); opacity: .72;
    transform: scaleY(.72); transition: opacity .12s ease, transform .12s ease;
}
.artifact-resizer:hover::before,
.artifact-resizer:focus-visible::before,
.artifact-resizer.is-dragging::before { left: 2px; width: 3px; background: var(--mode-accent); }
.artifact-resizer:hover span,
.artifact-resizer:focus-visible span,
.artifact-resizer.is-dragging span { opacity: 1; transform: scaleY(1); }
.artifact-resizer:focus-visible { outline: none; }
.artifact-panel-head {
    min-height: 40px; flex: 0 0 40px; padding: 0 9px 0 14px;
    display: flex; align-items: center; gap: 12px;
    background: var(--vscode-editor-background);
    border-bottom: 1px solid var(--vscode-panel-border);
}
.artifact-panel-title { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.artifact-panel-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--bas-fs-sm); }
.artifact-panel-title span { color: var(--vscode-descriptionForeground); font-size: var(--bas-fs-micro); white-space: nowrap; }
.artifact-panel-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.artifact-head-btn {
    height: 28px; padding: 0 9px; display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--vscode-widget-border); border-radius: var(--bas-r-md);
    background: var(--bas-fill-subtle); color: var(--vscode-foreground);
    font: inherit; font-size: var(--bas-fs-micro); cursor: pointer;
}
.artifact-head-btn:hover, .artifact-head-btn:focus-visible { background: var(--vscode-toolbar-hoverBackground); outline: none; }
.artifact-head-btn.is-confirmed { color: var(--mode-accent); }
.artifact-head-btn svg, #artifact-close svg {
    width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.25;
    stroke-linecap: round; stroke-linejoin: round;
}
.artifact-code {
    flex: 1; min-height: 0; overflow: auto; padding: 9px 0 20px;
    background: var(--vscode-textCodeBlock-background);
    color: var(--vscode-foreground); font-family: var(--bas-mono); font-size: var(--bas-fs-code);
    line-height: 1.55; tab-size: 4;
}
.artifact-code-line {
    display: grid; grid-template-columns: 52px max-content; align-items: stretch;
    min-width: 100%; width: max-content;
}
.artifact-code-line:hover { background: rgba(var(--bas-grey-rgb), .08); }
.artifact-line-number {
    position: sticky; left: 0; z-index: 1; width: 52px; min-height: 23px; padding: 0 11px 0 4px;
    border: 0; background: var(--vscode-textCodeBlock-background);
    color: var(--vscode-editorLineNumber-foreground, var(--vscode-descriptionForeground));
    font: inherit; font-size: var(--bas-fs-micro); text-align: right; cursor: pointer;
}
.artifact-code-line:hover .artifact-line-number,
.artifact-line-number:focus-visible { color: var(--mode-accent); outline: none; }
.artifact-line-code { min-height: 23px; padding: 0 20px 0 10px; white-space: pre; }
.artifact-line-comment, .artifact-comment-editor {
    position: sticky; left: 52px; width: calc(100% - 78px); max-width: 620px; min-width: 0; box-sizing: border-box;
    margin: 5px 16px 8px 62px; padding: 8px 10px;
    border-left: 2px solid var(--mode-accent); border-radius: 0 var(--bas-r-md) var(--bas-r-md) 0;
    background: rgba(var(--mode-accent-rgb), .10); color: var(--vscode-foreground);
    font-family: var(--bas-font); font-size: var(--bas-fs-sm); overflow-wrap: anywhere;
}
.artifact-line-comment { display: flex; align-items: flex-start; gap: 10px; }
.artifact-line-comment span { flex: 1; }
.artifact-comment-edit {
    border: 0; background: none; color: var(--vscode-textLink-foreground); font: inherit;
    font-size: var(--bas-fs-micro); cursor: pointer;
}
.artifact-comment-editor textarea {
    display: block; width: 100%; box-sizing: border-box; resize: vertical; min-height: 64px; padding: 8px 9px;
    border: 1px solid var(--vscode-input-border); border-radius: var(--bas-r-md);
    background: var(--vscode-input-background); color: var(--vscode-input-foreground);
    font: inherit; outline: none;
}
.artifact-comment-editor textarea:focus { border-color: var(--mode-accent); }
.artifact-comment-actions { margin-top: 7px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.artifact-comment-actions .btn { min-width: 0; max-width: 100%; }
.artifact-comment-actions .primary { border-color: var(--mode-accent); color: var(--vscode-foreground); }
.artifact-comments {
    min-height: 48px; padding: 8px 10px 8px 14px; display: flex; align-items: center; gap: 12px;
    border-top: 1px solid var(--vscode-panel-border); background: var(--vscode-editor-background);
    color: var(--vscode-descriptionForeground); font-size: var(--bas-fs-micro);
}
.artifact-comments span { flex: 1; }
.artifact-comments .btn { white-space: nowrap; }

#topbar {
    display: flex; align-items: center; gap: 10px;
    padding: 0 10px; height: 40px; flex: 0 0 40px;
    background: var(--vscode-editor-background);
}
#dialog-title {
    font-size: var(--bas-fs-md); font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mobile-menu-icon { display: none; }
.incognito-close { display: none; }
body.incognito-mode .incognito-ghost { display: none; }
body.incognito-mode .incognito-close { display: block; }

.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; flex: 0 0 auto;
    background: none; border: 0; border-radius: var(--bas-r-md);
    color: var(--vscode-descriptionForeground); cursor: pointer;
}
.icon-btn:hover { background: var(--vscode-toolbar-hoverBackground); color: var(--vscode-foreground); }

.chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 8px; border-radius: var(--bas-r-pill);
    background: var(--bas-fill); border: 1px solid var(--bas-line-faint);
    font-size: var(--bas-fs-micro); color: var(--vscode-descriptionForeground);
    white-space: nowrap;
}
.chip.busy::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: var(--mode-accent); animation: pulse 1.4s ease-in-out infinite;
}
.chip.danger { color: var(--bas-error); border-color: rgba(var(--bas-error-rgb), .4); }
@keyframes pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* ── Thread ─────────────────────────────────────────────────────────────────────────────── */

#scroll {
    flex: 1; overflow-y: auto; overflow-x: hidden; scroll-behavior: auto;
    /* Reserve the scrollbar's width even when there is nothing to scroll. Without this the bar
       appears the moment an answer grows past the fold, the content box narrows by its width, and
       the centred thread below slides sideways by half of it — a glide that lands exactly when the
       activity row collapses, so it reads as part of that animation rather than as a reflow. */
    scrollbar-gutter: stable;
}
#thread {
    width: 100%;
    /* Keep 780px of readable content on wide screens, but reserve the same side gutters as the
       composer whenever the main pane becomes narrower. Previously the zero horizontal padding
       made both answers and right-aligned questions touch the pane edges. */
    max-width: calc(var(--thread-w) + 36px);
    margin: 0 auto;
    padding: 14px 18px calc(8px + var(--active-turn-space, 0px));
}

.turn { margin: 0; }
.turn.user {
    display: flex;
    justify-content: flex-end;
    margin: 2px 0 12px;
    padding: 0;
}
.turn.user .bubble {
    max-width: min(88%, 680px);
    padding: 9px 13px;
    background: var(--vscode-input-background);
    border: 1px solid var(--vscode-input-border);
    border-radius: var(--bas-r-lg);
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.turn.assistant {
    padding: 10px 0 11px;
}
.turn.assistant .body {
    overflow-wrap: anywhere;
    font-size: var(--bas-fs-md);
}

/* Optional continuation after a substantial web report. It is visually separate from the answer
   because clicking it starts a new, user-visible turn with a stronger research contract. */
.research-suggestion {
    margin: 9px 0 17px; overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--vscode-widget-border) 88%, var(--vscode-foreground));
    border-radius: 16px;
    background: color-mix(in srgb, var(--bas-fill-subtle) 94%, var(--vscode-foreground) 6%);
    animation: researchSuggestionIn .22s ease-out both;
}
.research-suggestion-head {
    display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 15px;
    border-bottom: 1px solid var(--vscode-widget-border);
}
.research-suggestion-icon {
    display: inline-flex; width: 20px; height: 20px; flex: 0 0 auto;
    color: var(--vscode-descriptionForeground);
}
.research-suggestion-icon svg { width: 20px; height: 20px; }
.research-suggestion-icon circle, .research-suggestion-icon path {
    fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round;
}
.research-suggestion-title { flex: 1; font-size: var(--bas-fs-md); font-weight: 500; }
.research-suggestion-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px;
    color: var(--vscode-descriptionForeground); background: transparent; cursor: pointer;
}
.research-suggestion-close:hover { color: var(--vscode-foreground); background: var(--vscode-toolbar-hoverBackground); }
.research-suggestion-close svg { width: 16px; height: 16px; }
.research-suggestion-close path { fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; }
.research-suggestion-content {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
    gap: 22px; padding: 16px 17px 15px;
}
.research-suggestion-description {
    color: var(--vscode-descriptionForeground); font-size: var(--bas-fs-md); line-height: 1.48;
}
.research-suggestion-action { display: grid; justify-items: center; gap: 6px; min-width: 132px; }
.research-suggestion-start {
    min-width: 126px; padding: 8px 15px; border: 0; border-radius: 10px;
    background: var(--vscode-foreground); color: var(--vscode-editor-background);
    font-weight: 650; cursor: pointer; white-space: nowrap;
}
.research-suggestion-start:hover:not(:disabled) { opacity: .88; }
.research-suggestion-start:disabled { opacity: .55; cursor: default; }
.research-suggestion-meta {
    color: var(--vscode-disabledForeground); font-size: var(--bas-fs-research-meta); white-space: nowrap;
}
@keyframes researchSuggestionIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 620px) {
    .research-suggestion-content { grid-template-columns: 1fr; gap: 14px; }
    .research-suggestion-action { justify-items: stretch; }
    .research-suggestion-start { width: 100%; }
}

/* ── The activity row ───────────────────────────────────────────────────────────────────────
   One row per turn, whatever the agent did in it. Its label says what is happening right now;
   its arrow expands the timeline of everything that happened. Web search set this rhythm, and
   Python runs, connector calls and file generation now share it rather than each bringing a
   look of their own. */

.activity { margin: 0; padding: 8px 0 9px; }
.activity-head {
    display: flex; align-items: center; gap: 8px; min-width: 0;
    font-size: var(--bas-fs-md); color: var(--vscode-descriptionForeground);
    cursor: pointer; outline: none;
}
.activity-head:focus-visible .activity-name { text-decoration: underline; text-underline-offset: 3px; }
/* The activity row and the Thinking indicator share one Helix Pulse; two copies of this geometry
   would drift apart the first time either is touched. */
.activity-icon, .thinking-icon {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    /* Match VS Code's timeline `.step-helix`, not the larger footer working spinner. */
    width: 14px; height: 17px; color: var(--mode-accent);
}
.activity-icon svg, .thinking-icon svg { display: block; width: 14px; height: 17px; overflow: visible; }
/* Exact Helix Pulse geometry and motion from the VS Code panel's timeline `.step-helix`. */
.activity-icon .helix-strand, .thinking-icon .helix-strand {
    fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round;
}
.activity-icon .helix-strand-a, .thinking-icon .helix-strand-a { stroke-dasharray: 30; animation: helixFlowA 1.8s ease-in-out infinite; }
.activity-icon .helix-strand-b, .thinking-icon .helix-strand-b { stroke-dasharray: 30; animation: helixFlowB 1.8s ease-in-out infinite; opacity: .58; }
.activity-icon .helix-dot, .thinking-icon .helix-dot { fill: currentColor; transform-box: fill-box; transform-origin: center; }
.activity-icon .helix-dot-a, .thinking-icon .helix-dot-a { animation: helixDotA 1.8s ease-in-out infinite; }
.activity-icon .helix-dot-b, .thinking-icon .helix-dot-b { animation: helixDotB 1.8s ease-in-out infinite; }
/* Helix is a live-work signal, never a completed-state badge. Once the receipt settles, its plain
   text heading remains and the semantic icons inside the expanded timeline carry the history. */
.activity:not(.is-live) > .activity-head .activity-icon { display: none; }

.activity-name {
    min-width: 0; flex: 0 1 auto;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-weight: 400; color: var(--vscode-descriptionForeground);
    transition: opacity .15s ease, color .15s ease;
}
.activity.is-live .activity-name, .thinking-label {
    background-image: linear-gradient(105deg,
        var(--vscode-descriptionForeground) 0%,
        var(--vscode-descriptionForeground) 42%,
        var(--vscode-foreground) 50%,
        var(--vscode-descriptionForeground) 58%,
        var(--vscode-descriptionForeground) 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: searchTextGlow 2.4s linear infinite;
}
/* The turn's Thinking indicator. One node, always last in the thread. It is a TURN signal: the
   activity row is a receipt and settles before the answer starts, so it could never be this. */
.thinking {
    display: flex; align-items: center; gap: 8px; padding: 8px 0 9px;
    font-size: var(--bas-fs-md);
}
.thinking-label {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-weight: 400; color: var(--vscode-descriptionForeground);
}
/* Deliberation is over. The marker stops moving and stops shimmering — it is a fact about the
   answer below it now, not a claim that anything is still happening. */
.thinking.is-thought .thinking-label {
    background-image: none; -webkit-text-fill-color: currentColor;
    color: var(--vscode-descriptionForeground); animation: none;
}
.thinking.is-thought .helix-strand { stroke-dasharray: none; opacity: .72; animation: none; }
.thinking.is-thought .helix-dot { display: none; }

/* Completed work is supporting material, not part of the answer: keep it deliberately subdued. */
.activity[data-status="ok"] .activity-name { color: var(--vscode-descriptionForeground); }
.activity[data-status="error"] .activity-name { color: var(--bas-error); }

/* The whole label is the click target. Keep the decorative arrow out of the quiet resting state;
   reveal it only while the text is hovered or keyboard-focused. */
.activity-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto; width: 12px; height: 12px; margin-left: -4px; padding: 0; pointer-events: none;
    color: inherit; visibility: hidden; opacity: 0; transform-origin: 50% 50%;
    transition: opacity .12s ease, transform .14s ease;
}
.activity-toggle svg { display: block; width: 11px; height: 11px; }
.activity-toggle path {
    fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round;
}
.activity-head:hover .activity-toggle { visibility: visible; opacity: 1; }
.activity.open .activity-toggle { transform: rotate(90deg); }
/* Nothing to disclose (a receipt whose timeline was never stored) — do not offer the affordance. */
/* Nothing to disclose yet — while the model is only thinking, or for a receipt whose timeline was
   never stored. `display: none` rather than `visibility: hidden` so the arrow takes no space and
   leaves no flex gap after the label; it appears the moment the first step arrives. */
.activity.is-bare .activity-toggle { display: none; }
.activity.is-bare .activity-head { cursor: default; }

.activity-timeline { display: none; margin: 7px 0 3px 14px; padding-left: 17px; }
.activity.open .activity-timeline { display: block; }

.activity-item { position: relative; padding: 1px 0 11px; min-width: 0; }
.activity-item:last-child { padding-bottom: 1px; }
.activity-item.connects-next::after {
    /* Connect this dot to the next one only. A continuous container border otherwise extends
       above the first event and below the last event when the copy has different line heights. */
    content: ''; position: absolute; left: -18px; top: 12px; bottom: -11px;
    width: 1px; background: var(--vscode-widget-border);
}
/* Semantic 18px icons (globe, terminal, code, connector) need the same breathing room at the
   beginning of an edge that Done has at its end. Start the line three pixels below the icon box
   instead of letting it enter the globe's lower stroke. */
.activity-item.has-icon.connects-next::after { top: 22px; }
/* Stop before the completion circle instead of drawing through it. The remaining four-pixel gap
   makes the end node feel connected without compromising the icon's outline. */
.activity-item.connects-footer::after { bottom: -5px; }
.activity-item::before {
    content: ''; position: absolute; width: 5px; height: 5px; left: -20px; top: 8px;
    border: 1px solid var(--mode-accent); border-radius: 50%; background: var(--vscode-editor-background);
}
.activity-item[data-status="running"]::before {
    background: var(--mode-accent); box-shadow: 0 0 0 4px rgba(var(--mode-accent-rgb), .12);
    animation: pulse 1.25s ease-in-out infinite;
}
.activity-item[data-status="ok"]::before { background: var(--mode-accent); }
.activity-item[data-status="error"]::before { border-color: var(--bas-error); background: var(--bas-error); }
/* The model's own narration is progress, not an outcome: no filled dot, quieter type. */
.activity-item[data-kind="thinking"]::before { background: var(--vscode-editor-background); opacity: .55; }
.activity-item.has-icon::before { display: none; }
.activity-item-icon {
    position: absolute; left: -27px; top: 1px;
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; color: var(--vscode-descriptionForeground);
}
.activity-item-icon svg { display: block; width: 18px; height: 18px; overflow: visible; }
.activity-item-icon circle, .activity-item-icon ellipse, .activity-item-icon rect,
.activity-item-icon path {
    fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round;
}
.activity-item[data-status="running"] .activity-item-icon {
    color: var(--mode-accent); filter: drop-shadow(0 0 4px rgba(var(--mode-accent-rgb), .18));
}
.activity-item[data-status="error"] .activity-item-icon { color: var(--bas-error); }

.activity-item-label {
    min-width: 0; font-size: var(--bas-fs-research); line-height: 1.4;
    color: var(--vscode-descriptionForeground);
}
.web-search-activity > .activity-item-label {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; column-gap: 12px;
}
.web-search-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-item-count {
    margin-left: 16px; color: var(--vscode-disabledForeground);
    font-size: var(--bas-fs-research-meta); font-weight: 400;
}
.activity-item-label > :first-child { margin-top: 0; }
.activity-item-label > :last-child { margin-bottom: 0; }
.activity-item-label p { margin: 0; line-height: 1.45; }
.activity-item[data-status="error"] .activity-item-label { color: var(--bas-error); }
.activity-item[data-kind="thinking"] .activity-item-label { font-style: italic; opacity: .85; }
.activity-item-detail {
    min-width: 0; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--vscode-disabledForeground);
    font-family: var(--bas-mono); font-size: var(--bas-fs-code);
}
.activity-item-body {
    max-height: 200px; margin: 7px 0 2px; padding: 8px 10px; overflow: auto;
    border: 1px solid var(--vscode-widget-border); border-radius: var(--bas-r-md);
    background: var(--vscode-textCodeBlock-background); color: var(--vscode-foreground);
    font: var(--bas-fs-code)/1.5 var(--bas-mono); white-space: pre-wrap; overflow-wrap: anywhere;
}
.activity-item[data-status="error"] .activity-item-body {
    border-color: color-mix(in srgb, var(--bas-error) 38%, var(--vscode-widget-border));
    background: color-mix(in srgb, var(--bas-error) 6%, var(--vscode-textCodeBlock-background));
}

/* Compact web-search evidence card — candidate results are useful operational history but do not
   become citations until the agent actually reads their pages. */
.web-results {
    width: min(670px, 100%); max-height: 190px; margin: 8px 0 2px; overflow: auto;
    border: 1px solid var(--vscode-widget-border); border-radius: var(--bas-r-md);
    background: color-mix(in srgb, var(--bas-fill-subtle) 88%, transparent); scrollbar-width: thin;
}
.web-results.is-revealing {
    transform-origin: top; animation: webResultsReveal .24s cubic-bezier(.2, .75, .25, 1) both;
}
.web-result {
    display: grid; grid-template-columns: 15px minmax(0, 1fr) minmax(90px, auto);
    align-items: center; gap: 9px; min-height: 34px; padding: 6px 10px;
    color: var(--vscode-descriptionForeground); font-size: var(--bas-fs-research);
    line-height: 1.35; text-decoration: none;
}
.web-result.is-entering {
    animation: webResultEnter .18s ease-out both;
    animation-delay: calc(var(--web-result-order, 0) * 45ms);
}
.web-result + .web-result { border-top: 1px solid color-mix(in srgb, var(--vscode-widget-border) 58%, transparent); }
.web-result:hover, .web-result:focus-visible {
    color: var(--vscode-foreground); background: var(--vscode-list-hoverBackground); outline: none;
}
.web-result-mark {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px; border: 1px solid color-mix(in srgb, var(--vscode-descriptionForeground) 30%, transparent);
    border-radius: 3px; color: var(--vscode-descriptionForeground);
    background: color-mix(in srgb, var(--vscode-descriptionForeground) 8%, transparent);
    font-size: 8px; font-weight: 650; line-height: 1;
}
.web-result-favicon {
    position: absolute; inset: 0; width: 100%; height: 100%; padding: 1px;
    object-fit: contain; background: var(--bas-fill-subtle); opacity: 0;
}
.web-result-mark.has-favicon .web-result-favicon { opacity: 1; }
.web-result-mark.has-favicon .web-result-fallback { visibility: hidden; }
.web-result-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.web-result-host {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--vscode-disabledForeground); font-size: var(--bas-fs-research-meta); text-align: right;
}
.activity-footer {
    position: relative; display: flex; align-items: center; margin: 9px 0 1px; min-height: 18px;
    color: var(--vscode-descriptionForeground); font-size: var(--bas-fs-research); line-height: 1.4;
}
.activity-footer-icon {
    position: absolute; left: -27px; top: 0;
    display: inline-flex; width: 18px; height: 18px;
}
.activity-footer-icon svg { display: block; width: 18px; height: 18px; }
.activity-footer-icon circle, .activity-footer-icon path {
    fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round;
}
.activity[data-status="error"] .activity-footer { color: var(--bas-error); }
.activity-footer[hidden] { display: none; }

@keyframes webResultsReveal {
    from { opacity: .35; clip-path: inset(0 0 100% 0 round var(--bas-r-md)); }
    to { opacity: 1; clip-path: inset(0 0 0 0 round var(--bas-r-md)); }
}
@keyframes webResultEnter {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 620px) {
    .web-result { grid-template-columns: 15px minmax(0, 1fr); }
    .web-result-host { display: none; }
    .web-results { width: 100%; }
}

/* A file being written streams into its own entry, so generation is visible on expand without
   competing with the row for attention. */
.code-preview {
    min-width: 0; width: min(520px, 100%); margin: 7px 0 2px;
    overflow: hidden; border: 1px solid var(--vscode-widget-border); border-radius: var(--bas-r-md);
    background: var(--vscode-textCodeBlock-background);
}
.code-preview-head {
    min-height: 27px; padding: 5px 9px; display: flex; align-items: center; gap: 8px;
    border-bottom: 1px solid var(--vscode-widget-border); color: var(--vscode-descriptionForeground);
    font-family: var(--bas-sans); font-size: var(--bas-fs-micro);
}
.code-preview-title { color: var(--vscode-foreground); }
.code-preview-meta {
    margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.code-preview pre {
    max-height: 132px; min-height: 54px; margin: 0; padding: 9px 11px; overflow: auto;
    color: var(--vscode-foreground); font: var(--bas-fs-code)/1.5 var(--bas-mono); white-space: pre;
}
.stream-caret {
    display: inline-block; width: 1px; height: 1.15em; margin-left: 1px; vertical-align: -.2em;
    background: var(--mode-accent); animation: streamCaretBlink .85s steps(1) infinite;
}
.code-preview:not(.is-live) .stream-caret { display: none; }
@keyframes streamCaretBlink { 50% { opacity: 0; } }

@keyframes searchTextGlow {
    from { background-position: 145% 0; }
    to { background-position: -45% 0; }
}
@keyframes helixFlowA {
    0%, 100% { stroke-dashoffset: 0; opacity: .52; }
    50% { stroke-dashoffset: -12; opacity: 1; }
}
@keyframes helixFlowB {
    0%, 100% { stroke-dashoffset: 0; opacity: 1; }
    50% { stroke-dashoffset: 12; opacity: .42; }
}
@keyframes helixDotA {
    0%, 100% { transform: scale(.78); opacity: .55; }
    50% { transform: scale(1.2); opacity: 1; }
}
@keyframes helixDotB {
    0%, 100% { transform: scale(1.2); opacity: 1; }
    50% { transform: scale(.78); opacity: .55; }
}

/* ── Diffs ──────────────────────────────────────────────────────────────────────────────── */

.diff {
    margin: 8px 0; border: 1px solid var(--vscode-widget-border);
    border-radius: var(--bas-r-md); overflow: hidden;
    background: var(--vscode-textCodeBlock-background);
}
.diff-head {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; background: var(--bas-fill-subtle);
    border-bottom: 1px solid var(--vscode-widget-border);
    font-size: var(--bas-fs-sm);
}
.diff-path { font-family: var(--bas-mono); font-size: var(--bas-fs-code); font-weight: 600; }
.diff-stat { margin-left: auto; font-size: var(--bas-fs-micro); }
.diff-stat .add { color: var(--bas-ok); }
.diff-stat .del { color: var(--bas-error); }
.diff-rows { max-height: 340px; overflow: auto; }
.diff-row {
    display: flex; font-family: var(--bas-mono); font-size: var(--bas-fs-code);
    line-height: 1.5; white-space: pre;
}
.diff-row .ln {
    flex: 0 0 46px; text-align: right; padding-right: 10px;
    color: var(--vscode-disabledForeground); user-select: none;
}
.diff-row .tx { flex: 1; padding-right: 12px; overflow-wrap: normal; }
.diff-row.add { background: var(--diff-add-bg); }
.diff-row.del { background: var(--diff-del-bg); }
.diff-row.meta { color: var(--vscode-descriptionForeground); font-style: italic; padding: 4px 12px; }
.diff-row.add .tx::before { content: '+'; margin-right: 6px; color: var(--bas-ok); }
.diff-row.del .tx::before { content: '-'; margin-right: 6px; color: var(--bas-error); }
.diff-row.context .tx::before { content: ' '; margin-right: 6px; }

/* ── Markdown ───────────────────────────────────────────────────────────────────────────── */

.body h1, .body h2, .body h3, .body h4 { margin: 14px 0 6px; line-height: 1.3; font-weight: 600; }
.body h1 { font-size: 1.32em; }
.body h2 { font-size: 1.18em; }
.body h3 { font-size: 1.06em; }
.body h4 { font-size: 1em; }
.body > *:first-child { margin-top: 0; }
.body p { margin: 0 0 4px; }
.body br + br { display: none; }
.body .source-ref {
    padding: 1px 5px;
    border-radius: var(--bas-r-sm);
    background: var(--bas-fill);
    color: var(--vscode-descriptionForeground);
    font-size: .88em;
    line-height: 1.35;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
.body a.source-link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    max-width: min(240px, 100%);
    margin: 0 1px;
    padding: 0 6px;
    border: 1px solid rgba(var(--mode-accent-rgb), .42);
    border-radius: var(--bas-r-pill);
    background: rgba(var(--mode-accent-rgb), .1);
    color: var(--vscode-descriptionForeground);
    /* Citations are deliberately subordinate to prose while sharing its baseline. */
    font-size: .86em;
    line-height: 1.2;
    text-decoration: none;
    vertical-align: .12em;
    transition: color 100ms ease, border-color 100ms ease, background 100ms ease;
}
.body a.source-link:hover,
.body a.source-link:focus-visible {
    border-color: rgba(var(--mode-accent-rgb), .78);
    background: rgba(var(--mode-accent-rgb), .18);
    color: var(--vscode-foreground);
    text-decoration: none;
}
.source-link-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.source-link-arrow {
    flex: 0 0 11px;
    width: 11px;
    height: 11px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.25;
    opacity: .8;
}

/* A linked YouTube walkthrough becomes part of the answer instead of a raw blue URL. The player
   uses the same width, radius and subdued surface language as the surrounding Helix content. */
.youtube-embed-card {
    width: 100%;
    max-width: 100%;
    margin: 14px 0 10px;
    overflow: hidden;
    border: 1px solid var(--bas-line-strong);
    border-radius: 14px;
    background: color-mix(in srgb, var(--vscode-editorWidget-background) 88%, transparent);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .16);
}
.youtube-embed-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 12px;
    border-bottom: 1px solid var(--bas-line);
    color: var(--vscode-descriptionForeground);
    font-size: .88em;
}
.youtube-embed-mark {
    display: inline-flex;
    width: 21px;
    height: 21px;
    align-items: center;
    justify-content: center;
    color: rgb(var(--mode-accent-rgb));
}
.youtube-embed-mark svg { width: 21px; height: 21px; }
.youtube-embed-mark rect { fill: none; stroke: currentColor; stroke-width: 1.4; }
.youtube-embed-mark path { fill: currentColor; }
.youtube-embed-label { color: var(--vscode-foreground); font-weight: 550; }
.youtube-embed-open {
    margin-left: auto;
    color: var(--vscode-descriptionForeground);
    text-decoration: none;
}
.youtube-embed-open:hover, .youtube-embed-open:focus-visible {
    color: var(--vscode-foreground);
    text-decoration: none;
}
.youtube-embed-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: rgba(0, 0, 0, .28);
}
.youtube-embed-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 620px) {
    .youtube-embed-card { margin: 11px 0 8px; border-radius: 11px; }
    .youtube-embed-head { min-height: 39px; padding: 0 10px; }
}

/* A source keeps the answer compact; its full article title appears only on deliberate hover or
   keyboard focus. The card lives under <body>, so fixed positioning also avoids clipping inside
   tables and horizontally scrolling answer content. */
.source-preview {
    position: fixed;
    z-index: 70;
    width: min(360px, calc(100vw - 16px));
    padding: 14px 15px 13px;
    border: 1px solid var(--bas-line-strong);
    border-radius: 12px;
    background: var(--vscode-editorWidget-background);
    color: var(--vscode-foreground);
    box-shadow: var(--bas-shadow-popover);
    pointer-events: none;
    opacity: 0;
    transform: translateY(3px) scale(.99);
    transition: opacity 90ms ease, transform 90ms ease;
}
.source-preview.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.source-preview-title {
    font-size: var(--bas-fs-lg);
    font-weight: 500;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.source-preview-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 9px;
    color: var(--vscode-descriptionForeground);
    font-size: var(--bas-fs-sm);
}
.source-preview-mark {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    overflow: hidden;
    border-radius: 4px;
    background: var(--bas-fill);
    color: var(--vscode-descriptionForeground);
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
}
.source-preview-mark img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.source-preview-mark:not(.has-favicon) img { opacity: 0; }
.source-preview-mark.has-favicon .source-preview-fallback { visibility: hidden; }
.source-preview-site { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.body ul, .body ol { margin: 5px 0 7px; padding-left: 20px; }
.body li { margin: 2px 0; }
.body li.task {
    position: relative;
    display: block;
    list-style: none;
    margin-left: -18px;
    padding-left: 20px;
}
.md-check {
    position: absolute; left: 0; top: .36em;
    width: 11px; height: 11px; border-radius: 3px;
    border: 1px solid var(--bas-line-strong);
}
.md-check-label { display: inline; }
/* Nested bullets in a checklist belong below their parent rather than forming a second column. */
.body li.task > ul, .body li.task > ol { margin: 5px 0 0; }
.md-check.done { background: var(--bas-green); border-color: var(--bas-green); }
.md-check.active { background: var(--bas-warn); border-color: var(--bas-warn); }
.md-check.failed { background: var(--bas-error); border-color: var(--bas-error); }
.body blockquote {
    margin: 8px 0; padding: 2px 0 2px 12px;
    border-left: 3px solid var(--bas-line); color: var(--vscode-descriptionForeground);
}
/* Markdown separators divide sections without turning one answer into widely spaced cards. */
.body hr {
    height: 0;
    border: 0;
    border-top: 1px solid var(--vscode-panel-border);
    margin: 6px 0;
}
.body code {
    font-family: var(--bas-mono); font-size: var(--bas-fs-code);
    background: var(--bas-fill); padding: 1.5px 5px; border-radius: var(--bas-r-sm);
}

.codeblock { position: relative; margin: 8px 0; }
.codeblock pre {
    /* The block scrolls, never the page. */
    overflow-x: auto;
    padding: 9px 11px;
    background: var(--bas-fill-subtle);
    border: 1px solid var(--vscode-widget-border);
    border-radius: var(--bas-r-md);
}
.codeblock pre code {
    background: none; padding: 0; font-size: var(--bas-fs-code);
    color: var(--vscode-foreground);
    line-height: 1.55; display: block; white-space: pre;
}
.code-head {
    display: flex; align-items: center; gap: 8px;
    min-height: 27px; padding: 4px 9px; font-size: var(--bas-fs-micro);
    background: var(--bas-fill-subtle);
    border: 1px solid var(--vscode-widget-border); border-bottom: 0;
    border-radius: var(--bas-r-md) var(--bas-r-md) 0 0;
}
.code-head + pre { border-radius: 0 0 var(--bas-r-md) var(--bas-r-md); }
.code-lang {
    color: var(--vscode-descriptionForeground); font-family: var(--bas-mono);
    letter-spacing: .025em; text-transform: lowercase; opacity: .86;
}
.code-open { margin-left: auto; }
.code-copy {
    position: absolute; top: 6px; right: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    width: 23px; height: 23px; padding: 3px;
    background: transparent;
    border: 0; border-radius: var(--bas-r-sm);
    color: var(--vscode-descriptionForeground); cursor: pointer;
    opacity: .72; transition: opacity .12s ease;
}
.code-copy svg {
    width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.25;
    stroke-linecap: round; stroke-linejoin: round;
}
.code-head .code-copy { position: static; width: 23px; height: 23px; margin-left: auto; }
.code-head .code-open + .code-copy { margin-left: 0; }
/* Streaming rebuilds the Markdown subtree for each frame. Keep the control's space reserved but
   reveal it only after the answer settles, otherwise the newly created SVG appears to flicker. */
.turn.streaming .code-copy { visibility: hidden; opacity: 0; pointer-events: none; }
.codeblock:hover .code-copy, .code-copy:focus-visible { opacity: 1; }
.code-copy:hover, .code-copy:focus-visible {
    color: var(--vscode-foreground); background: var(--vscode-toolbar-hoverBackground); outline: none;
}
.code-copy.copied { color: var(--mode-accent); background: rgba(var(--mode-accent-rgb), .14); }

.syn-keyword { color: var(--syntax-keyword); }
.syn-string { color: var(--syntax-string); }
.syn-number { color: var(--syntax-number); }
.syn-comment { color: var(--syntax-comment); font-style: italic; }
.syn-function { color: var(--syntax-function); }
.syn-property { color: var(--syntax-property); }
.syn-tag { color: var(--syntax-tag); }
.syn-attr { color: var(--syntax-attr); }
.syn-operator { color: var(--syntax-operator); }

.table-wrap {
    max-width: 100%; overflow-x: auto; margin: 10px 0;
    overscroll-behavior-x: contain; scrollbar-width: thin;
}
.body table {
    width: 100%; border-collapse: collapse; table-layout: auto;
    font-size: var(--bas-fs-sm);
}
.body th, .body td {
    border: 1px solid var(--vscode-widget-border); padding: 7px 10px; text-align: left;
    /* `.turn.assistant .body` deliberately allows emergency wrapping for prose and URLs. A table
       must opt out: `anywhere` reduces every cell's intrinsic minimum width to one character and
       produced columns such as "Prod / ukt" and vertically stacked years. Auto layout can now
       measure real words; if their combined minimum is wider than the answer, table-wrap scrolls. */
    overflow-wrap: normal; word-break: normal; hyphens: none;
}
.body th {
    background: var(--bas-fill-subtle); font-weight: 600; white-space: nowrap;
}

/* Hidden until the answer is pointed at. These act on the answer they belong to, so they only need
   to exist once the reader has gone to it — a permanent row of icons under every reply is four
   pieces of chrome per turn competing with the text. Opacity rather than display, so revealing them
   never reflows the conversation, and :focus-within keeps them reachable by keyboard alone. */
.turn-actions {
    display: flex; align-items: center; gap: 2px; margin: 5px 0 0;
    color: var(--vscode-descriptionForeground); opacity: 0;
    transition: opacity .12s ease;
}
.turn.assistant:hover .turn-actions,
.turn-actions:focus-within,
.turn-actions.has-feedback { opacity: 1; }
.answer-action {
    width: 23px; height: 23px; padding: 3px; display: inline-flex;
    align-items: center; justify-content: center; border: 0; border-radius: var(--bas-r-sm);
    color: inherit; background: transparent; cursor: pointer;
}
.answer-action svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.answer-action:hover, .answer-action:focus-visible { color: var(--vscode-foreground); background: var(--vscode-toolbar-hoverBackground); outline: none; }
.answer-action.is-selected, .answer-action.is-confirmed { color: var(--mode-accent); background: rgba(var(--mode-accent-rgb), .14); }
.answer-action:disabled { cursor: default; opacity: .45; }
.answer-action[data-rating]:disabled { visibility: hidden; }
.resume-search {
    margin-left: 5px; padding: 3px 7px; border: 1px solid var(--vscode-widget-border);
    border-radius: var(--bas-r-sm); background: transparent; color: var(--vscode-descriptionForeground);
    font: inherit; font-size: var(--bas-fs-micro); cursor: pointer;
}
.resume-search:hover:not(:disabled), .resume-search:focus-visible:not(:disabled) {
    color: var(--vscode-foreground); background: var(--vscode-toolbar-hoverBackground); outline: none;
}
.resume-search:disabled { cursor: default; opacity: .45; }

.turn.error .body {
    padding: 9px 12px; border-radius: var(--bas-r-md);
    background: rgba(var(--bas-error-rgb), .1);
    border: 1px solid rgba(var(--bas-error-rgb), .35);
    color: var(--bas-error);
}

/* ── Empty state ────────────────────────────────────────────────────────────────────────── */

#empty-net {
    position: absolute; inset: 40px 0 0; z-index: 0;
    width: 100%; height: calc(100% - 40px);
    color: var(--vscode-descriptionForeground);
    opacity: .5; pointer-events: none;
}
#empty-net[hidden] { display: none; }
/* The helix carries its own falloff and glow, so it needs less of the canvas-wide dimming the
   node sky relies on — but still enough to sit behind the greeting rather than beside it. */
#empty-net.is-helix {
    opacity: .44;
    filter: saturate(.62) blur(.2px);
    /* Keep the cinematic structure at the page edges while gently quieting the region occupied by
       the greeting and composer. This is an alpha mask, not a dark overlay, so themes still work. */
    -webkit-mask-image: radial-gradient(ellipse 58% 23% at 50% 45%, rgba(0, 0, 0, .18) 0%, rgba(0, 0, 0, .5) 58%, #000 100%);
    mask-image: radial-gradient(ellipse 58% 23% at 50% 45%, rgba(0, 0, 0, .18) 0%, rgba(0, 0, 0, .5) 58%, #000 100%);
}
:root[data-theme="light"] #empty-net.is-helix { opacity: .34; filter: saturate(.52) blur(.25px); }
#topbar, #scroll, #composer { position: relative; z-index: 1; }
#empty { max-width: 640px; margin: 10vh auto 0; padding: 0 18px; text-align: center; }
#empty h2 {
    margin: 0 0 8px;
    color: var(--vscode-foreground); font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(2rem, 4.1vw, 3.35rem); font-weight: 400; letter-spacing: -.035em;
}
.empty-greeting-line {
    display: flex; align-items: center; justify-content: center; gap: 13px;
    width: max-content; max-width: 100%; margin-inline: auto; white-space: nowrap;
}
.empty-greeting-line h2 { min-width: 0; margin-bottom: 8px; }
.empty-helix-mark {
    display: block; width: 28px; height: 43px; flex: 0 0 auto;
    margin-bottom: 8px; background-color: var(--mode-accent);
    -webkit-mask: url('/helix-mark.svg') no-repeat center / contain;
    mask: url('/helix-mark.svg') no-repeat center / contain;
}
#incognito-empty {
    width: min(560px, calc(100% - 36px)); margin: 10vh auto 0; padding: 18px;
    color: var(--vscode-descriptionForeground); text-align: center;
}
#incognito-empty[hidden] { display: none; }
.incognito-hero-icon {
    display: grid; place-items: center;
    width: 78px; height: 78px; margin: 0 auto 24px;
    border: 1px solid color-mix(in srgb, var(--mode-accent) 38%, var(--vscode-widget-border));
    border-radius: 50%;
    background: color-mix(in srgb, var(--vscode-editorWidget-background) 88%, var(--mode-accent) 12%);
    color: var(--mode-accent);
    box-shadow: 0 18px 50px rgba(var(--mode-accent-rgb), .12);
}
.incognito-hero-icon svg { width: 44px; height: 44px; }
#incognito-empty h2 {
    margin: 0 0 10px; color: var(--vscode-foreground);
    font-family: Georgia, 'Times New Roman', serif; font-size: 2rem; font-weight: 400;
}
#incognito-empty p { margin: 0 auto; max-width: 520px; line-height: 1.65; }
body.empty-chat #scroll { flex: 0 0 auto; overflow: visible; }
body.empty-chat #empty { margin-top: clamp(72px, 18vh, 210px); }
body.empty-chat #incognito-empty { margin-top: clamp(72px, 16vh, 190px); }
body.empty-chat #composer { padding-top: 22px; }
/* Let the ambient start-page scene continue behind the compact header. The opaque header remains
   useful once a transcript exists, where it separates fixed navigation from scrolling content. */
body.empty-chat #topbar { background: transparent; }
body.empty-chat #empty-net {
    inset: 0;
    height: 100%;
}
/* The composer paints an opaque band so the transcript can scroll under it. On the start page there
   is no transcript — only the background animation — so that band reads as a black rectangle laid
   across it. The composer box keeps its own background, so the input stays legible either way. */
body.empty-chat #composer { background: transparent; }
body.empty-chat #main::after { content: ''; flex: 1 1 auto; }

/* ── Composer ───────────────────────────────────────────────────────────────────────────── */

#jump-latest {
    position: absolute; left: 50%; transform: translateX(-50%);
    z-index: 8;
    width: 28px; height: 28px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--mode-accent);
    background: var(--vscode-editorWidget-background);
    border: 1px solid rgba(var(--mode-accent-rgb), .55);
    border-radius: 50%; cursor: pointer;
    box-shadow: none;
    transition: opacity .15s ease, border-color .15s ease, background .15s ease;
}
#jump-latest:hover {
    background: var(--vscode-editorWidget-background);
    border-color: var(--mode-accent);
}
#jump-latest svg {
    width: 16px; height: 16px;
    fill: none; stroke: currentColor; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round;
}

#composer {
    /* The attachment popover opens upward. Give this footer its own layer so it can sit over the
       transcript rather than being painted below it. */
    position: relative; z-index: 10;
    flex: 0 0 auto; padding: 8px 18px 14px; background: var(--vscode-editor-background);
}

#banner {
    max-width: var(--thread-w); margin: 0 auto 8px;
    padding: 7px 12px; border-radius: var(--bas-r-md);
    background: rgba(var(--bas-error-rgb), .1);
    border: 1px solid rgba(var(--bas-error-rgb), .35);
    font-size: var(--bas-fs-sm); color: var(--bas-error);
}
#banner.info {
    background: var(--bas-fill-subtle); border-color: var(--vscode-widget-border);
    color: var(--vscode-descriptionForeground);
}

/* Geometry taken from the sidebar's .agent-chat-box + .agent-chat-actions: a column with the
   textarea on top and an action strip beneath a hairline divider, accent border, and a wash that
   fades out diagonally so the composer is the one clearly "live" surface on the page. */
.composer-box {
    display: flex; flex-direction: column;
    max-width: var(--thread-w); margin: 0 auto;
    background:
        linear-gradient(145deg, rgba(var(--mode-accent-rgb), .22), transparent 42%),
        var(--vscode-input-background);
    border: 1px solid rgba(var(--mode-accent-rgb), .9);
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .025);
    /* Do not clip the upward-opening attachment menu inside the textarea. The rounded lower
       action strip keeps its own corners below, so the box still reads as one surface. */
    overflow: visible;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.composer-box:focus-within {
    border-color: var(--mode-accent);
    box-shadow: 0 0 0 2px rgba(var(--mode-accent-rgb), .28), 0 8px 22px rgba(0, 0, 0, .12);
}

#input {
    min-height: 54px; max-height: 200px;
    /* Taller above/below than the strip below it, so the writing area reads as the primary field. */
    padding: 15px 15px 13px;
    resize: none; overflow-y: auto;
    background: transparent; border: 0; outline: none;
    color: var(--vscode-input-foreground); line-height: 1.45;
}
#input::placeholder { color: var(--vscode-input-placeholderForeground); }

.composer-actions {
    display: flex; align-items: center; justify-content: flex-end; gap: 4px;
    padding: 7px 9px;
    border-top: 1px solid rgba(var(--bas-grey-rgb), .18);
    background: rgba(var(--bas-grey-rgb), .055);
    border-radius: 0 0 13px 13px;
}
.attach-wrap { position: relative; }
#attach { margin: 0; }
.attach-menu {
    position: absolute; z-index: 12; bottom: calc(100% + 8px); left: 0;
    width: 250px; padding: 6px;
    background: var(--vscode-editorWidget-background);
    border: 1px solid var(--vscode-widget-border); border-radius: var(--bas-r-md);
    box-shadow: var(--bas-shadow-popover);
}
.attach-menu-head,
.attach-mobile-options,
#attach-camera,
#attach-photos,
.attach-mobile-label { display: none; }
.attach-mobile-choices { display: block; }
.attach-menu button {
    width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px;
    border: 0; border-radius: var(--bas-r-sm); background: transparent;
    color: var(--vscode-foreground); text-align: left; cursor: pointer;
}
.attach-menu button:hover, .attach-menu button:focus-visible { background: var(--vscode-toolbar-hoverBackground); outline: none; }
.attach-menu svg { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.attach-menu strong, .attach-menu small { display: block; }
.attach-menu strong { font-size: var(--bas-fs-sm); font-weight: 600; }
.attach-menu small { margin-top: 2px; color: var(--vscode-descriptionForeground); font-size: var(--bas-fs-micro); }
.reasoning-effort-wrap { position: relative; margin-left: auto; }
.search-mode-btn {
    display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px;
    border: 0; border-radius: var(--bas-r-sm); background: transparent;
    color: var(--vscode-descriptionForeground); font: inherit; font-size: var(--bas-fs-micro); cursor: pointer;
}
.search-mode-btn:hover, .search-mode-btn[aria-expanded="true"] { background: var(--vscode-toolbar-hoverBackground); color: var(--vscode-foreground); }
.search-mode-btn svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.search-mode-btn .search-mode-chevron { width: 11px; height: 11px; }
.search-mode-menu {
    position: absolute; z-index: 13; bottom: calc(100% + 8px); right: 0;
    width: min(300px, calc(100vw - 28px)); padding: 7px;
    background: var(--vscode-editorWidget-background); border: 1px solid var(--vscode-widget-border);
    border-radius: var(--bas-r-md); box-shadow: var(--bas-shadow-popover);
}
.search-mode-menu p { margin: 4px 7px 8px; color: var(--vscode-descriptionForeground); font-size: var(--bas-fs-micro); line-height: 1.35; }
.search-mode-menu button {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 9px;
    border: 0; border-radius: var(--bas-r-sm); background: transparent; color: var(--vscode-foreground); text-align: left; cursor: pointer;
}
.search-mode-menu button:hover, .search-mode-menu button:focus-visible, .search-mode-menu button.is-selected { background: var(--vscode-toolbar-hoverBackground); outline: none; }
.search-mode-menu strong, .search-mode-menu small { display: block; }
.search-mode-menu strong { font-size: var(--bas-fs-sm); font-weight: 600; }
.search-mode-menu small { margin-top: 2px; color: var(--vscode-descriptionForeground); font-size: var(--bas-fs-micro); line-height: 1.3; }
.search-mode-menu b { visibility: hidden; color: var(--mode-accent); font-size: var(--bas-fs-sm); }
.search-mode-menu button.is-selected b { visibility: visible; }
#queue-hint { font-size: var(--bas-fs-micro); }

.act-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 3px 7px; border: 0; border-radius: var(--bas-r-sm);
    background: none; color: var(--vscode-descriptionForeground);
    opacity: .7; cursor: pointer; transition: background .12s, opacity .12s;
}
.act-btn:hover { background: var(--vscode-toolbar-hoverBackground); color: var(--vscode-foreground); opacity: 1; }
.attach-wrap.is-disabled { opacity: .38; }
.attach-wrap.is-disabled #attach { cursor: not-allowed; }

/* A small rounded square, not a circle — the sidebar uses --bas-r-sm here. */
.send-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 3px 7px; flex: 0 0 auto;
    border: 0; border-radius: var(--bas-r-sm); cursor: pointer;
    background: var(--mode-accent); color: var(--mode-accent-fg);
    transition: background .12s ease, opacity .12s ease;
}
.send-btn:hover:not(:disabled) { background: var(--mode-accent-hover); }
.send-btn:disabled {
    background: rgba(var(--bas-grey-rgb), .22);
    color: var(--vscode-descriptionForeground);
    opacity: .7; cursor: default;
}
.send-btn .ico-stop { display: none; }
body.busy .send-btn .ico-stop { display: block; }
body.busy .send-btn .ico-send { display: none; }
body.busy .send-btn {
    background: var(--mode-accent);
    color: var(--mode-accent-fg);
}
body.busy .send-btn:hover { background: var(--mode-accent-hover); }

.composer-foot {
    max-width: var(--thread-w); margin: 6px auto 0;
    font-size: var(--bas-fs-micro); text-align: center;
}

/* ── Approval modal ─────────────────────────────────────────────────────────────────────── */

.modal-backdrop {
    position: fixed; inset: 0; z-index: 20;
    display: flex; align-items: flex-end; justify-content: center;
    padding: 20px; background: rgba(0, 0, 0, .45);
}
.modal-card {
    width: 100%; max-width: 620px;
    padding: 16px 18px;
    background: var(--vscode-editorWidget-background);
    border: 1px solid var(--mode-accent);
    border-radius: 12px;
    box-shadow: var(--bas-shadow-popover);
}
.modal-card.danger { border-color: var(--bas-error); }
.modal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.modal-head h2 { font-size: var(--bas-fs-md); font-weight: 600; }
#approval-summary {
    font-family: var(--bas-mono); font-size: var(--bas-fs-code);
    padding: 9px 11px; margin-bottom: 10px;
    background: var(--vscode-textCodeBlock-background);
    border: 1px solid var(--vscode-widget-border);
    border-radius: var(--bas-r-md);
    white-space: pre-wrap; overflow-wrap: anywhere;
    max-height: 140px; overflow-y: auto;
}
#approval-detail { max-height: 320px; overflow-y: auto; margin-bottom: 12px; }
#approval-detail:empty { display: none; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }

.memory-edit-backdrop {
    z-index: 40;
    align-items: center;
    background: rgba(0, 0, 0, .62);
}
.memory-edit-card {
    width: min(680px, 100%);
    max-width: 680px;
    padding: 20px;
    border-color: var(--vscode-widget-border);
}
.memory-edit-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}
.memory-edit-head h2 { margin: 0 0 5px; font-size: var(--bas-fs-lg); font-weight: 650; }
.memory-edit-head p {
    margin: 0;
    color: var(--vscode-descriptionForeground);
    font-size: var(--bas-fs-sm);
    line-height: 1.45;
}
.memory-edit-field { display: block; }
.memory-edit-field > span {
    display: block;
    margin-bottom: 7px;
    color: var(--vscode-descriptionForeground);
    font-size: var(--bas-fs-micro);
    font-weight: 600;
}
#memory-edit-text {
    display: block;
    width: 100%;
    min-height: 170px;
    max-height: 48vh;
    padding: 11px 12px;
    resize: vertical;
    overflow-y: auto;
    background: var(--vscode-input-background);
    border: 1px solid var(--vscode-input-border);
    border-radius: var(--bas-r-md);
    color: var(--vscode-input-foreground);
    font: inherit;
    font-size: var(--bas-fs-sm);
    line-height: 1.55;
    outline: none;
}
#memory-edit-text:focus { border-color: var(--mode-accent); box-shadow: 0 0 0 1px var(--mode-accent); }
.memory-edit-error {
    margin: 9px 0 0;
    color: var(--bas-error);
    font-size: var(--bas-fs-sm);
}
.memory-edit-actions { align-items: center; margin-top: 16px; }
.memory-edit-hint {
    margin-right: auto;
    color: var(--vscode-descriptionForeground);
    font-size: var(--bas-fs-micro);
}
.memory-edit-actions .btn:disabled { opacity: .5; cursor: default; }

.feedback-backdrop {
    z-index: 45;
    align-items: center;
    background: rgba(0, 0, 0, .62);
}
.feedback-card {
    width: min(560px, 100%);
    max-width: 560px;
    padding: 20px;
    border-color: var(--vscode-widget-border);
}
.feedback-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 24px; margin-bottom: 16px;
}
.feedback-head h2 { margin: 0 0 5px; font-size: var(--bas-fs-lg); font-weight: 650; }
.feedback-head p,
.feedback-privacy {
    margin: 0; color: var(--vscode-descriptionForeground);
    font-size: var(--bas-fs-sm); line-height: 1.45;
}
.feedback-reasons {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px; padding: 0; margin: 0 0 16px; border: 0;
}
.feedback-reasons label {
    display: flex; align-items: center; gap: 8px; min-width: 0;
    padding: 8px 10px; border: 1px solid var(--vscode-widget-border);
    border-radius: var(--bas-r-md); background: var(--bas-fill-subtle);
    color: var(--vscode-foreground); font-size: var(--bas-fs-sm); cursor: pointer;
}
.feedback-reasons label:has(input:checked) {
    border-color: var(--mode-accent); background: rgba(var(--mode-accent-rgb), .14);
}
.feedback-reasons input { accent-color: var(--mode-accent); }
.feedback-comment { display: block; }
.feedback-comment > span {
    display: block; margin-bottom: 7px; color: var(--vscode-descriptionForeground);
    font-size: var(--bas-fs-micro); font-weight: 600;
}
#feedback-comment {
    display: block; width: 100%; min-height: 92px; max-height: 30vh;
    padding: 10px 11px; resize: vertical; overflow-y: auto;
    background: var(--vscode-input-background); border: 1px solid var(--vscode-input-border);
    border-radius: var(--bas-r-md); color: var(--vscode-input-foreground);
    font: inherit; font-size: var(--bas-fs-sm); line-height: 1.5; outline: none;
}
#feedback-comment:focus { border-color: var(--mode-accent); box-shadow: 0 0 0 1px var(--mode-accent); }
.feedback-privacy { margin-top: 10px; font-size: var(--bas-fs-micro); }
.feedback-error { margin: 9px 0 0; color: var(--bas-error); font-size: var(--bas-fs-sm); }
.feedback-actions { align-items: center; margin-top: 16px; }
.feedback-remove { color: var(--bas-error); }
.feedback-actions .btn:disabled { opacity: .5; cursor: default; }

.btn {
    padding: 6px 16px; border-radius: var(--bas-r-md); cursor: pointer;
    background: var(--bas-fill); border: 1px solid var(--bas-line);
    color: var(--vscode-foreground); font-size: var(--bas-fs-sm);
}
.btn:hover { background: var(--bas-fill-hover); }
.btn.primary {
    background: var(--mode-accent);
    border-color: var(--mode-accent);
    color: var(--mode-accent-fg); font-weight: 600;
}
.btn.primary:hover { background: var(--mode-accent-hover); }

/* ── Settings ───────────────────────────────────────────────────────────────────────────── */

.settings-backdrop {
    z-index: 40;
    align-items: center;
    padding: 24px;
    background: rgba(0, 0, 0, .58);
}
.settings-card {
    position: relative;
    display: grid;
    grid-template-columns: 238px minmax(0, 1fr);
    width: min(1060px, 100%);
    height: min(760px, calc(100vh - 48px));
    overflow: hidden;
    background: var(--vscode-editorWidget-background);
    border: 1px solid var(--vscode-widget-border);
    border-radius: 14px;
    box-shadow: 0 22px 70px rgba(0, 0, 0, .42);
}
.settings-mobile-header { display: none; }
.settings-mobile-profile { display: none; }
.settings-sidebar {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 19px 12px;
    overflow-y: auto;
    border-right: 1px solid var(--vscode-panel-border);
    background: color-mix(in srgb, var(--vscode-sideBar-background) 78%, transparent);
}
.settings-sidebar-title {
    margin: 2px 9px 10px;
    color: var(--vscode-descriptionForeground);
    font-size: var(--bas-fs-md);
    font-weight: 600;
    letter-spacing: .02em;
}
.settings-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--bas-r-md);
    background: transparent;
    color: var(--vscode-foreground);
    font: inherit;
    font-size: var(--bas-fs-sm);
    text-align: left;
    cursor: pointer;
}
.settings-nav strong { font: inherit; font-weight: inherit; }
.settings-nav small,
.settings-nav svg { display: none; }
.settings-nav:hover { background: var(--vscode-list-hoverBackground); }
.settings-nav.is-active {
    background: var(--bas-sel-bg);
    color: var(--vscode-list-activeSelectionForeground);
    font-weight: 600;
}
.settings-content {
    min-width: 0;
    overflow: auto;
    /* Inset the scroll viewport without moving the visible content. This keeps the native thumb
       inside the card's rounded corners even when it is at its upper or lower limit. */
    margin-block: 8px;
    padding: 20px 34px 28px;
}
.settings-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
}
.settings-topline h2 { font-size: 1.25rem; font-weight: 650; }
#settings-close {
    width: 24px;
    height: 24px;
    border-radius: 6px;
}
#settings-close svg { display: block; width: 14px; height: 14px; }
#settings-close:focus-visible { outline-width: 1px; outline-offset: 1px; }
.settings-page { max-width: 820px; }
.settings-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(150px, 245px);
    align-items: center;
    gap: 28px;
    padding: 17px 0;
    border-bottom: 1px solid var(--vscode-panel-border);
}
.settings-row:first-child { padding-top: 0; }
.settings-row:last-child { border-bottom: 0; }
.settings-row h3 { margin: 0 0 4px; font-size: var(--bas-fs-md); font-weight: 600; }
.settings-row p { margin: 0; color: var(--vscode-descriptionForeground); font-size: var(--bas-fs-sm); line-height: 1.45; }
.settings-input,
.settings-select {
    display: block;
    width: 100%;
    height: 36px;
    min-height: 36px;
    padding: 0 10px;
    background: var(--vscode-input-background);
    border: 1px solid var(--vscode-input-border);
    border-radius: var(--bas-r-md);
    color: var(--vscode-input-foreground);
    font: inherit;
    font-size: var(--bas-fs-sm);
    line-height: 1.2;
    outline: none;
}
.settings-select { padding-right: 30px; }
.settings-input:focus,
.settings-select:focus { border-color: var(--mode-accent); box-shadow: 0 0 0 1px var(--mode-accent); }
.settings-row .switch { justify-self: end; position: relative; display: inline-flex; width: 38px; height: 22px; }
.settings-row .switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.settings-row .switch span {
    width: 100%; height: 100%; border-radius: 999px;
    background: rgba(var(--bas-grey-rgb), .5);
    cursor: pointer;
    transition: background .14s ease;
}
.settings-row .switch span::after {
    content: ''; display: block; width: 16px; height: 16px; margin: 3px;
    border-radius: 50%; background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
    transition: transform .14s ease;
}
.settings-row .switch input:checked + span { background: var(--mode-accent); }
.settings-row .switch input:checked + span::after { transform: translateX(16px); }
.settings-row .switch input:focus-visible + span { outline: 2px solid var(--vscode-focusBorder); outline-offset: 2px; }
.research-jobs-panel {
    margin: 20px 0;
    padding: 17px;
    border: 1px solid color-mix(in srgb, var(--mode-accent) 28%, var(--vscode-panel-border));
    border-radius: calc(var(--bas-r-lg) + 2px);
    background: linear-gradient(145deg,
        color-mix(in srgb, var(--mode-accent) 7%, var(--vscode-editor-background)),
        color-mix(in srgb, var(--vscode-sideBar-background) 54%, transparent));
}
.research-jobs-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.research-jobs-head h3 { margin: 0 0 4px; font-size: var(--bas-fs-md); }
.research-jobs-head p,
.research-job-topics-label,
.research-job-options label { margin: 0; color: var(--vscode-descriptionForeground); font-size: var(--bas-fs-sm); }
.research-job-create { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--vscode-panel-border); }
.research-job-topics-label { display: block; margin-bottom: 6px; }
.research-job-topics {
    height: auto;
    min-height: 76px;
    padding: 9px 10px;
    resize: vertical;
    line-height: 1.4;
}
.research-job-options {
    display: grid;
    grid-template-columns: 82px 92px minmax(112px, 1fr) auto;
    align-items: end;
    gap: 9px;
    margin-top: 9px;
}
.research-job-options label { display: grid; gap: 5px; }
.research-job-options .btn { height: 36px; white-space: nowrap; }
.research-jobs-list { display: grid; gap: 9px; margin-top: 15px; }
.research-job-empty {
    padding: 18px 12px;
    border: 1px dashed var(--vscode-panel-border);
    border-radius: var(--bas-r-md);
    color: var(--vscode-descriptionForeground);
    font-size: var(--bas-fs-sm);
    text-align: center;
}
.research-job-card {
    padding: 12px 13px;
    border: 1px solid var(--vscode-panel-border);
    border-radius: var(--bas-r-md);
    background: color-mix(in srgb, var(--vscode-editor-background) 78%, transparent);
}
.research-job-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.research-job-card-title { min-width: 0; font-size: var(--bas-fs-sm); font-weight: 600; line-height: 1.35; }
.research-job-status {
    flex: none;
    padding: 2px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mode-accent) 18%, transparent);
    color: color-mix(in srgb, var(--mode-accent) 72%, var(--vscode-foreground));
    font-size: var(--bas-fs-xs);
    text-transform: capitalize;
}
.research-job-status[data-status="failed"],
.research-job-status[data-status="cancelled"] { background: var(--bas-error-bg); color: var(--bas-error); }
.research-job-status[data-status="completed"] { color: var(--vscode-descriptionForeground); background: var(--vscode-toolbar-hoverBackground); }
.research-job-progress { height: 4px; margin: 10px 0 8px; overflow: hidden; border-radius: 999px; background: var(--vscode-panel-border); }
.research-job-progress span { display: block; height: 100%; border-radius: inherit; background: var(--mode-accent); transition: width .25s ease; }
.research-job-meta { display: flex; flex-wrap: wrap; gap: 4px 13px; color: var(--vscode-descriptionForeground); font-size: var(--bas-fs-xs); }
.research-job-activity { margin-top: 7px; overflow: hidden; color: var(--vscode-descriptionForeground); font-size: var(--bas-fs-xs); text-overflow: ellipsis; white-space: nowrap; }
.research-job-actions { display: flex; gap: 6px; margin-top: 9px; }
.research-job-actions .btn { min-height: 28px; padding: 4px 9px; font-size: var(--bas-fs-xs); }
.settings-memory-panel {
    min-height: 0;
    padding-top: 20px;
    border-top: 1px solid var(--vscode-panel-border);
}
.settings-memory-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.settings-memory-head h3 { margin: 0 0 4px; font-size: var(--bas-fs-md); }
.settings-memory-head p { margin: 0; color: var(--vscode-descriptionForeground); font-size: var(--bas-fs-sm); }
.settings-inline-error { color: var(--vscode-descriptionForeground) !important; }
.settings-memory-head-actions { display: flex; align-items: center; gap: 8px; }
.settings-memory-forget-all { color: var(--bas-error); }
.settings-memory-forget-all:disabled { opacity: .45; cursor: default; }
.settings-memory-search-wrap { display: block; margin-top: 13px; }
.settings-memory-search {
    background: color-mix(in srgb, var(--vscode-input-background) 72%, transparent);
}
.settings-memory-list {
    display: grid;
    align-content: start;
    gap: 7px;
    height: min(540px, 48vh);
    min-height: 210px;
    margin-top: 9px;
    padding: 0 5px 2px 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}
.settings-memory-list:focus-visible { outline: 1px solid var(--vscode-focusBorder); outline-offset: 3px; }
.settings-memory-empty {
    padding: 18px 2px;
    color: var(--vscode-descriptionForeground);
    font-size: var(--bas-fs-sm);
}
.settings-memory-item {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 9px 11px;
    background: var(--vscode-input-background);
    border: 1px solid var(--vscode-widget-border);
    border-radius: var(--bas-r-md);
    font-size: var(--bas-fs-sm);
}
.settings-memory-item span { min-width: 0; overflow-wrap: anywhere; }
.settings-memory-actions { display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.settings-memory-edit,
.settings-memory-forget {
    flex: 0 0 auto; border: 0; background: none; color: var(--vscode-textLink-foreground);
    font: inherit; font-size: var(--bas-fs-micro); cursor: pointer;
}
.settings-memory-edit:hover,
.settings-memory-forget:hover { color: var(--bas-error); }
.settings-memory-edit:disabled,
.settings-memory-forget:disabled { opacity: .45; cursor: default; }
.connector-add { padding: 20px 0; border-bottom: 1px solid var(--vscode-panel-border); }
.connector-add h3,
.connector-list-head h3 { margin: 0 0 4px; font-size: var(--bas-fs-md); }
.connector-add p { margin: 0; color: var(--vscode-descriptionForeground); font-size: var(--bas-fs-sm); }
.connector-add-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin-top: 13px; }
.connector-field { display: grid; gap: 6px; min-width: 0; }
.connector-field > span { color: var(--vscode-descriptionForeground); font-size: var(--bas-fs-micro); }
.connector-field-wide { grid-column: 1 / -1; }
.connector-add-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.connector-add-actions small { min-width: 0; color: var(--vscode-descriptionForeground); line-height: 1.4; }
.connector-add-actions .btn {
    flex: 0 0 auto; min-width: max-content; padding-inline: 14px; white-space: nowrap;
}
.connector-list-head { margin-top: 20px; }
.connector-list { display: grid; gap: 9px; margin-top: 13px; }
.connector-card {
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    padding: 12px; border: 1px solid var(--vscode-widget-border); border-radius: var(--bas-r-md);
    background: var(--vscode-input-background);
}
.connector-copy { min-width: 0; }
.connector-copy strong { display: block; font-size: var(--bas-fs-sm); }
.connector-title-row { display: flex; align-items: center; gap: 8px; }
.connector-kind { padding: 2px 6px; border-radius: 999px; background: rgba(var(--bas-purple-rgb), .13); color: var(--mode-accent); font-size: var(--bas-fs-micro); }
.connector-copy p { margin: 3px 0; color: var(--vscode-descriptionForeground); font-size: var(--bas-fs-sm); }
.connector-copy small { display: block; overflow-wrap: anywhere; color: var(--vscode-descriptionForeground); }
.connector-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.connector-actions .switch { position: relative; display: inline-flex; width: 38px; height: 22px; }
.connector-actions .switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.connector-actions .switch span { width: 100%; height: 100%; border-radius: 999px; background: rgba(var(--bas-grey-rgb), .5); cursor: pointer; }
.connector-actions .switch span::after { content: ''; display: block; width: 16px; height: 16px; margin: 3px; border-radius: 50%; background: #fff; transition: transform .14s ease; }
.connector-actions .switch input:checked + span { background: var(--mode-accent); }
.connector-actions .switch input:checked + span::after { transform: translateX(16px); }

/* ── Responsive ─────────────────────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
    :root { --mobile-rail-w: min(84vw, 330px); }
    #rail {
        position: fixed; top: 0; bottom: 0; left: 0; z-index: 15;
        width: var(--mobile-rail-w); flex-basis: var(--mobile-rail-w);
        max-width: calc(100vw - 44px);
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-shadow: var(--bas-shadow-popover);
    }
    body.rail-hidden #rail,
    body:not(.rail-open) #rail {
        width: var(--mobile-rail-w); flex-basis: var(--mobile-rail-w);
        margin-left: calc(var(--mobile-rail-w) * -1);
    }
    body.rail-hidden .rail-head,
    body.rail-hidden #dialog-list,
    body.rail-hidden .rail-foot { display: flex; }
    body.rail-hidden #dialog-list { display: block; }
    body.rail-open #rail-scrim { display: block; position: fixed; inset: 0; z-index: 14; background: rgba(0, 0, 0, .45); }
    #topbar {
        height: calc(52px + env(safe-area-inset-top, 0px));
        flex-basis: calc(52px + env(safe-area-inset-top, 0px));
        padding: env(safe-area-inset-top, 0px) max(10px, env(safe-area-inset-right, 0px)) 0 max(10px, env(safe-area-inset-left, 0px));
    }
    #topbar .icon-btn {
        width: 44px; height: 44px;
        color: color-mix(in srgb, var(--vscode-foreground) 82%, transparent);
        border-radius: 10px;
    }
    #topbar .icon-btn svg { width: 22px; height: 22px; }
    #topbar #incognito-toggle svg { width: 22px; height: 22px; }
    #topbar .icon-btn:active { background: var(--vscode-toolbar-hoverBackground); color: var(--vscode-foreground); }
    #dialog-title { min-width: 0; }
    #status-chip { max-width: 38vw; overflow: hidden; text-overflow: ellipsis; }
    #scroll { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
    #thread {
        padding: 12px max(12px, env(safe-area-inset-right, 0px)) 8px max(12px, env(safe-area-inset-left, 0px));
    }
    #composer {
        padding: 8px max(12px, env(safe-area-inset-right, 0px)) max(10px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
    }
    .modal-backdrop {
        padding: 12px max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
    }
    .modal-card { max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
    .settings-card { grid-template-columns: 190px minmax(0, 1fr); }
    .settings-content { margin-block: 6px; padding: 16px 24px 22px; }
    #artifact-panel {
        position: fixed; inset: 0; z-index: 20;
        width: 100vw; height: 100vh; height: 100dvh; min-width: 0; flex-basis: auto;
        box-shadow: var(--bas-shadow-popover); transform: translateX(24px);
    }
    body.artifact-open #artifact-panel.is-visible {
        width: 100vw; flex-basis: auto; transform: translateX(0);
    }
    .artifact-panel-head {
        min-height: calc(44px + env(safe-area-inset-top, 0px));
        flex-basis: calc(44px + env(safe-area-inset-top, 0px));
        padding: env(safe-area-inset-top, 0px) max(8px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px));
    }
    .artifact-code {
        max-width: 100vw;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    .artifact-comments { padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)); }
    .artifact-resizer { display: none; }

    .rail-head { min-height: 58px; padding-inline: 14px 10px; }
    .new-chat-nav { width: calc(100% - 24px); margin-inline: 12px; }
    .rail-shortcuts { padding-inline: 12px; }
    #dialog-list { padding: 8px 10px; }
    .dialog-item { padding-inline: 10px; border-radius: 9px; }
    #rail .rail-foot {
        z-index: 13;
        padding: 10px 14px max(11px, env(safe-area-inset-bottom, 0px));
        border-top: 0;
        background: var(--vscode-sideBar-background);
    }
    #rail .account {
        min-height: 54px; padding: 7px 8px; gap: 11px;
        border-radius: 12px;
        background: color-mix(in srgb, var(--vscode-list-hoverBackground) 72%, transparent);
    }
    #rail .account:hover,
    #rail .account[aria-expanded="true"] {
        background: color-mix(in srgb, var(--vscode-list-hoverBackground) 88%, var(--mode-accent) 12%);
    }
    #rail .account .avatar { width: 36px; height: 36px; }
    #rail .account-name { font-size: var(--bas-fs-md); }
    #rail .account-sub { margin-top: 1px; font-size: var(--bas-fs-sm); }
    #account-menu {
        left: 14px; right: 14px;
        bottom: calc(100% + 8px);
        max-height: min(280px, calc(100dvh - 170px));
        padding: 7px; overflow-y: auto;
        border-radius: 16px;
        background: color-mix(in srgb, var(--vscode-editorWidget-background) 96%, var(--mode-accent) 4%);
    }
    #account-menu .menu-item { min-height: 48px; padding: 9px 11px; border-radius: 10px; font-size: var(--bas-fs-md); }
    #account-menu .menu-item svg { width: 19px; height: 19px; }
    #account-menu .menu-info { display: none; }
}

/* A compact window needs one coherent layout. 700px also covers narrow desktop
   windows which previously landed between the two-column settings view and mobile UI. */
@media (max-width: 700px) {
    .composer-foot { display: none; }
    #input, input, select, textarea { font-size: 16px; }
    .composer-box { border-radius: 12px; }
    #input { min-height: 50px; max-height: min(180px, 34dvh); padding: 13px 13px 11px; }
    .composer-actions { min-height: 48px; padding: 4px 6px; }
    .act-btn, .send-btn, .search-mode-btn { min-height: 40px; }
    .act-btn, .send-btn { min-width: 40px; padding-inline: 10px; }
    .attach-wrap #attach {
        width: 38px; min-width: 38px; height: 38px; min-height: 38px;
        padding: 0; border-radius: 50%;
        transition: background .12s ease, color .12s ease, box-shadow .12s ease;
    }
    .send-btn {
        width: 38px; min-width: 38px; height: 38px; min-height: 38px;
        padding: 0; border-radius: 50%;
        transition: background .12s ease, opacity .12s ease, box-shadow .12s ease;
    }
    .attach-wrap #attach:focus-visible {
        border-radius: 50%; outline: none;
        background: var(--vscode-toolbar-hoverBackground); color: var(--vscode-foreground);
        box-shadow: 0 0 0 2px rgba(var(--mode-accent-rgb), .3);
    }
    .send-btn:focus-visible {
        border-radius: 50%; outline: none;
        box-shadow: 0 0 0 2px rgba(var(--mode-accent-rgb), .32);
    }
    .search-mode-btn { padding-inline: 8px; }
    .attach-menu { width: min(280px, calc(100vw - 24px)); }
    body.attach-menu-open #composer::before {
        content: ''; position: fixed; inset: 0; z-index: 13;
        background: rgba(0, 0, 0, .62); backdrop-filter: blur(3px);
    }
    .attach-wrap .attach-menu {
        position: fixed; z-index: 14;
        left: 0; right: 0; bottom: 0;
        width: 100%; max-height: min(760px, calc(100dvh - max(22px, env(safe-area-inset-top, 0px))));
        padding: 8px max(16px, env(safe-area-inset-right, 0px)) max(20px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
        overflow-y: auto; overscroll-behavior: contain;
        border: 1px solid var(--vscode-widget-border); border-bottom: 0;
        border-radius: 22px 22px 0 0;
        background: var(--vscode-editorWidget-background);
        box-shadow: 0 -18px 54px rgba(0, 0, 0, .42);
    }
    .attach-menu::before {
        content: ''; display: block; width: 42px; height: 5px; margin: 0 auto 3px;
        border-radius: var(--bas-r-pill); background: color-mix(in srgb, var(--vscode-descriptionForeground) 62%, transparent);
    }
    .attach-menu-head {
        display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px;
        align-items: center; min-height: 65px; margin-bottom: 12px;
    }
    .attach-menu-head > strong { font-size: 19px; font-weight: 650; text-align: center; }
    .attach-menu-head #attach-menu-close {
        display: inline-flex; align-items: center; justify-content: center;
        width: 46px; height: 46px; padding: 0;
        border: 1px solid var(--vscode-widget-border); border-radius: 50%;
        background: var(--bas-fill-subtle);
    }
    .attach-menu-head #attach-menu-close svg { width: 21px; height: 21px; }
    .attach-mobile-choices {
        display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
        margin-bottom: 12px;
    }
    .attach-mobile-choices #attach-camera,
    .attach-mobile-choices #attach-photos,
    .attach-mobile-choices #attach-upload {
        display: flex; min-width: 0; min-height: 116px; padding: 15px 6px;
        flex-direction: column; justify-content: center; gap: 10px;
        border-radius: 16px;
        background: color-mix(in srgb, var(--vscode-sideBar-background) 78%, transparent);
        text-align: center;
    }
    .attach-mobile-choices button:hover,
    .attach-mobile-choices button:focus-visible { background: var(--vscode-list-hoverBackground); }
    .attach-mobile-choices button > svg { width: 28px; height: 28px; }
    .attach-mobile-choices button > span { min-width: 0; }
    .attach-mobile-choices button strong { font-size: 15px; font-weight: 520; }
    .attach-mobile-choices button small,
    .attach-desktop-label { display: none; }
    .attach-mobile-label { display: block; }
    .attach-mobile-options {
        display: grid; overflow: hidden;
        border: 1px solid var(--vscode-widget-border); border-radius: 16px;
        background: color-mix(in srgb, var(--vscode-sideBar-background) 78%, transparent);
    }
    .attach-mobile-options > button,
    .attach-option-toggle {
        display: flex; align-items: center; gap: 12px;
        width: 100%; min-height: 66px; padding: 11px 15px;
        border: 0; border-bottom: 1px solid var(--vscode-panel-border); border-radius: 0;
        background: transparent; color: var(--vscode-foreground); text-align: left;
    }
    .attach-mobile-options > :last-child { border-bottom: 0; }
    .attach-mobile-options > button:hover,
    .attach-mobile-options > button:focus-visible { background: var(--vscode-toolbar-hoverBackground); }
    .attach-mobile-options > button > svg:first-child,
    .attach-option-toggle > svg:first-child { width: 23px; height: 23px; flex: 0 0 auto; color: var(--vscode-descriptionForeground); }
    .attach-mobile-options > button > span,
    .attach-option-toggle > span:nth-child(2) { min-width: 0; flex: 1; }
    .attach-mobile-options strong { display: block; font-size: 15px; font-weight: 540; }
    .attach-mobile-options small {
        display: block; margin-top: 2px; color: var(--vscode-descriptionForeground);
        font-size: 12px; line-height: 1.3;
    }
    .attach-mobile-options .attach-option-chevron { width: 17px; height: 17px; flex: 0 0 auto; }
    .attach-option-toggle .switch { position: relative; display: inline-flex; width: 46px; height: 28px; flex: 0 0 auto; }
    .attach-option-toggle .switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
    .attach-option-toggle .switch > span {
        width: 100%; height: 100%; border-radius: var(--bas-r-pill);
        background: rgba(var(--bas-grey-rgb), .5); transition: background .14s ease;
    }
    .attach-option-toggle .switch > span::after {
        content: ''; display: block; width: 22px; height: 22px; margin: 3px;
        border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
        transition: transform .14s ease;
    }
    .attach-option-toggle .switch input:checked + span { background: var(--mode-accent); }
    .attach-option-toggle .switch input:checked + span::after { transform: translateX(18px); }
    .turn.user .bubble { max-width: 94%; }
    #topbar {
        height: calc(70px + env(safe-area-inset-top, 0px));
        flex-basis: calc(70px + env(safe-area-inset-top, 0px));
        padding-inline: max(17px, env(safe-area-inset-left, 0px)) max(17px, env(safe-area-inset-right, 0px));
    }
    #topbar #rail-toggle {
        width: 48px; height: 48px; min-width: 48px;
        border: 1px solid color-mix(in srgb, var(--vscode-widget-border) 78%, var(--vscode-foreground) 22%);
        border-radius: 50%;
        background: color-mix(in srgb, var(--vscode-editorWidget-background) 88%, transparent);
    }
    #topbar #rail-toggle svg { width: 24px; height: 24px; }
    #topbar #rail-toggle > svg { display: none; }
    #topbar #rail-toggle .mobile-menu-icon {
        display: grid; gap: 4px; width: 22px;
    }
    #topbar #rail-toggle .mobile-menu-icon i {
        display: block; height: 1.5px; border-radius: var(--bas-r-pill);
        background: currentColor;
    }
    #topbar #rail-toggle .mobile-menu-icon i:nth-child(2) { width: 15px; }
    #topbar #incognito-toggle {
        width: 48px; height: 48px; min-width: 48px;
        border: 1px solid color-mix(in srgb, var(--vscode-widget-border) 78%, var(--vscode-foreground) 22%);
        border-radius: 50%;
        background: color-mix(in srgb, var(--vscode-editorWidget-background) 88%, transparent);
    }
    #topbar #incognito-toggle svg { width: 25px; height: 25px; }
    body.incognito-mode #dialog-title {
        display: block; position: absolute; left: 50%; max-width: calc(100% - 150px);
        transform: translateX(-50%); font-size: 16px; font-weight: 560; text-align: center;
    }
    .rail-head #rail-close {
        display: inline-flex; width: 48px; height: 48px; min-width: 48px;
        border: 1px solid color-mix(in srgb, var(--vscode-widget-border) 78%, var(--vscode-foreground) 22%);
        border-radius: 50%;
        background: color-mix(in srgb, var(--vscode-editorWidget-background) 88%, transparent);
    }
    .rail-head #rail-close > svg { display: none; }
    .rail-head #rail-close .mobile-menu-icon { display: grid; gap: 4px; width: 22px; }
    .rail-head #rail-close .mobile-menu-icon i {
        display: block; height: 1.5px; border-radius: var(--bas-r-pill); background: currentColor;
    }
    .rail-head #rail-close .mobile-menu-icon i:nth-child(2) { width: 15px; }
    #dialog-title { display: none; }
    #status-chip { display: none !important; }
    .settings-backdrop {
        align-items: flex-end;
        padding: max(8px, env(safe-area-inset-top, 0px)) 0 0;
        background: rgba(0, 0, 0, .68);
    }
    .settings-card {
        display: flex; flex-direction: column;
        width: 100vw;
        height: calc(100dvh - max(8px, env(safe-area-inset-top, 0px)));
        border: 1px solid var(--vscode-widget-border); border-bottom: 0;
        border-radius: 22px 22px 0 0;
        background: var(--vscode-editorWidget-background);
        box-shadow: 0 -18px 54px rgba(0, 0, 0, .38);
    }
    .settings-mobile-header {
        display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px;
        align-items: center; gap: 10px; flex: 0 0 auto;
        min-height: 72px; padding: 10px 16px;
        border-bottom: 1px solid var(--vscode-panel-border);
        background: color-mix(in srgb, var(--vscode-editorWidget-background) 96%, transparent);
    }
    .settings-mobile-header strong {
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        color: var(--vscode-foreground); font-size: 18px; font-weight: 650; text-align: center;
    }
    .settings-mobile-header-button {
        display: inline-flex; align-items: center; justify-content: center;
        width: 46px; height: 46px; padding: 0;
        border: 1px solid var(--vscode-widget-border); border-radius: 50%;
        background: var(--bas-fill-subtle); color: var(--vscode-foreground); cursor: pointer;
    }
    .settings-mobile-header-button:hover,
    .settings-mobile-header-button:focus-visible { background: var(--vscode-toolbar-hoverBackground); }
    .settings-mobile-header-button svg { width: 21px; height: 21px; }
    .settings-mobile-header-button path {
        fill: none; stroke: currentColor; stroke-width: 1.55;
        stroke-linecap: round; stroke-linejoin: round;
    }
    .settings-backdrop.show-index #settings-mobile-back { display: none; }
    .settings-backdrop.show-index .settings-mobile-header strong { grid-column: 2; grid-row: 1; }
    .settings-backdrop.show-index #settings-mobile-close { grid-column: 1; grid-row: 1; }
    .settings-sidebar {
        display: none; flex: 1 1 auto;
        padding: 18px max(16px, env(safe-area-inset-right, 0px)) max(28px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
        overflow-y: auto; overscroll-behavior: contain;
        border: 0; background: var(--vscode-editorWidget-background);
    }
    .settings-backdrop.show-index .settings-sidebar { display: flex; }
    .settings-backdrop.show-index .settings-content { display: none; }
    .settings-sidebar-title { display: none; }
    .settings-mobile-profile {
        display: flex; align-items: center; gap: 12px; flex: 0 0 auto;
        min-height: 70px; margin-bottom: 14px; padding: 12px 15px;
        border: 1px solid var(--vscode-widget-border); border-radius: 16px;
        background: color-mix(in srgb, var(--vscode-sideBar-background) 72%, transparent);
    }
    .settings-mobile-profile .avatar { width: 42px; height: 42px; }
    .settings-mobile-profile > span:last-child { min-width: 0; display: block; }
    .settings-mobile-profile strong,
    .settings-mobile-profile small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .settings-mobile-profile strong { font-size: 16px; font-weight: 600; }
    .settings-mobile-profile small { margin-top: 2px; color: var(--vscode-descriptionForeground); font-size: 12px; }
    .settings-nav {
        width: 100%; min-width: 0; min-height: 70px; padding: 12px 15px;
        flex: 0 0 auto; text-align: left;
        border-radius: 0; border-bottom: 1px solid var(--vscode-panel-border);
        background: color-mix(in srgb, var(--vscode-sideBar-background) 72%, transparent);
        font-size: var(--bas-fs-md);
    }
    .settings-nav:first-of-type { border-radius: 16px 16px 0 0; }
    .settings-nav:last-of-type { border-bottom: 0; border-radius: 0 0 16px 16px; }
    .settings-nav:hover,
    .settings-nav.is-active { background: color-mix(in srgb, var(--vscode-sideBar-background) 72%, transparent); color: var(--vscode-foreground); }
    .settings-nav:active { background: var(--vscode-list-hoverBackground); }
    .settings-nav span { min-width: 0; display: block; }
    .settings-nav strong { display: block; font-size: 16px; font-weight: 560; }
    .settings-nav small {
        display: block; margin-top: 3px;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        color: var(--vscode-descriptionForeground); font-size: 12px; font-weight: 400;
    }
    .settings-nav svg { display: block; width: 18px; height: 18px; flex: 0 0 auto; color: var(--vscode-descriptionForeground); }
    .settings-nav svg path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
    .settings-content {
        display: block; flex: 1 1 auto; min-height: 0; margin: 0;
        padding: 22px max(16px, env(safe-area-inset-right, 0px)) max(32px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
        overscroll-behavior: contain;
    }
    /* The sheet header already names the active page. Keeping the desktop title here duplicated
       Account/Connectors and consumed a full row in compact windows. */
    .settings-topline { display: none; }
    #settings-close { display: none; }
    .settings-page {
        max-width: none; overflow: hidden;
        border: 1px solid var(--vscode-widget-border); border-radius: 16px;
        background: color-mix(in srgb, var(--vscode-sideBar-background) 72%, transparent);
    }
    .settings-row { grid-template-columns: 1fr; gap: 11px; }
    .settings-page > .settings-row { padding: 17px 15px; }
    .settings-row .switch { justify-self: start; }
    .settings-row .switch,
    .connector-actions .switch { width: 50px; height: 44px; align-items: center; justify-content: center; }
    .settings-row .switch span,
    .connector-actions .switch span { width: 38px; height: 22px; flex: 0 0 auto; }
    .settings-memory-head { align-items: flex-start; flex-wrap: wrap; gap: 10px; }
    .settings-memory-head-actions { flex-wrap: wrap; }
    .settings-memory-list { height: min(440px, 48dvh); min-height: 180px; }
    [data-settings-page-content="research"] {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
    }
    [data-settings-page-content="research"] > .settings-row {
        margin-bottom: 10px;
        border: 1px solid var(--vscode-widget-border);
        border-radius: 14px;
        background: color-mix(in srgb, var(--vscode-sideBar-background) 72%, transparent);
    }
    [data-settings-page-content="research"] > .settings-row:first-child { padding-top: 17px; }
    [data-settings-page-content="research"] .research-jobs-panel {
        margin: 14px 0 10px;
        padding: 15px;
    }
    [data-settings-page-content="research"] .settings-memory-panel {
        margin-top: 10px;
        padding: 16px 15px;
        border: 1px solid var(--vscode-widget-border);
        border-radius: 16px;
        background: color-mix(in srgb, var(--vscode-sideBar-background) 72%, transparent);
    }
    .research-job-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .research-job-options .btn { min-height: 40px; }
    .settings-memory-item { align-items: flex-start; gap: 10px; }
    [data-settings-page-content="general"] > .provider-editor {
        margin: 10px 15px;
        background: color-mix(in srgb, var(--vscode-input-background) 82%, transparent);
    }
    [data-settings-page-content="general"] > .provider-editor > summary {
        display: flex; align-items: center; min-height: 48px; padding: 11px 13px;
    }
    [data-settings-page-content="general"] .provider-actions {
        flex-wrap: wrap;
    }
    [data-settings-page-content="general"] .provider-status {
        flex-basis: 100%;
    }
    .connector-add-form { grid-template-columns: 1fr; }
    .connector-field-wide { grid-column: auto; }
    .connector-add-actions { align-items: stretch; flex-direction: column; }
    .connector-add-form .btn { min-height: 40px; }
    [data-settings-page-content="connectors"] > .connector-add {
        padding: 18px 15px;
    }
    [data-settings-page-content="connectors"] > .connector-list-head {
        margin: 0; padding: 17px 15px 0;
        border-top: 1px solid var(--vscode-panel-border);
    }
    [data-settings-page-content="connectors"] > .connector-list {
        margin: 0; padding: 13px 15px 17px;
    }
    .connector-card { align-items: flex-start; flex-direction: column; gap: 10px; }
    .connector-actions { width: 100%; justify-content: flex-end; }
    [data-settings-page-content="account"] > .settings-subsection {
        margin: 0; padding: 17px 15px;
    }
    [data-settings-page-content="account"] > .settings-subsection:last-child {
        padding-bottom: 18px;
    }
    .memory-edit-card { padding: 16px; }
    .memory-edit-hint { display: none; }
    .feedback-card { padding: 16px; }
    .feedback-reasons { grid-template-columns: 1fr; }
    .modal-actions { flex-wrap: wrap; }
    .modal-actions .btn { min-height: 40px; }
    .artifact-head-btn span { display: none; }
    .artifact-head-btn, #artifact-close { width: 40px; height: 40px; padding: 0; justify-content: center; }
    .artifact-panel-title span { display: none; }
    .artifact-panel-head { gap: 7px; }
    /* Desktop preserves exact source lines and scrolls horizontally. On a phone, wrap inside the
       full-screen viewer so each line remains anchored to its gutter instead of appearing to float
       behind the fixed controls. */
    .artifact-code-line {
        grid-template-columns: 42px minmax(0, 1fr);
        width: 100%; min-width: 100%;
    }
    .artifact-line-number { width: 42px; padding-right: 8px; }
    .artifact-line-code {
        min-width: 0; padding: 0 12px 0 8px;
        white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal;
    }
    .artifact-line-comment, .artifact-comment-editor {
        left: 42px; width: calc(100% - 58px); margin-left: 50px;
    }
    .artifact-comments { align-items: stretch; flex-direction: column; gap: 7px; }
    .artifact-comments .btn { min-height: 40px; }
    .file-artifact { min-height: 72px; }
    .file-artifact-open { padding-inline: 9px; }
    .file-artifact-download { min-height: 40px; margin: 0 8px 0 2px; padding-inline: 9px; }
    .image-gallery { grid-template-columns: 1fr; }
    .web-image img { height: min(220px, 56vw); }
    .empty-greeting-line { gap: 9px; }
    #empty h2 { font-size: clamp(1.55rem, 7.7vw, 2.05rem); }
    .empty-helix-mark { width: 22px; height: 34px; }
    body.empty-chat #scroll {
        display: flex; flex: 1 1 auto; flex-direction: column;
        align-items: center; justify-content: center;
        min-height: 0; overflow: hidden;
    }
    body.empty-chat #empty {
        width: 100%; margin: 0 auto;
        transform: translateY(clamp(8px, 1.5dvh, 20px));
    }
    body.empty-chat #incognito-empty {
        width: min(560px, calc(100% - 28px)); margin: 0 auto;
        transform: translateY(clamp(24px, 5dvh, 54px));
    }
    #incognito-empty h2 { font-size: 1.75rem; }
    #incognito-empty p { font-size: 14px; }
    body.empty-chat #composer { padding-top: 8px; padding-bottom: max(18px, env(safe-area-inset-bottom, 0px)); }
    body.empty-chat #main::after { display: none; }
    body.login-page { padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
    .login-card { padding: 22px 18px 20px; }

    /* The desktop effort picker opens above its trigger. On mobile that can extend beneath the
       browser chrome and lose its model heading, so the same controls become a bounded sheet. */
    body.effort-menu-open #composer::before {
        content: ''; position: fixed; inset: 0; z-index: 12;
        background: rgba(0, 0, 0, .46); backdrop-filter: blur(2px);
    }
    .reasoning-effort-wrap .search-mode-menu {
        position: fixed; z-index: 13;
        left: max(12px, env(safe-area-inset-left, 0px));
        right: max(12px, env(safe-area-inset-right, 0px));
        bottom: max(12px, env(safe-area-inset-bottom, 0px));
        width: auto; max-height: min(560px, calc(100dvh - 28px));
        padding: 12px; overflow-y: auto; border-radius: 16px;
    }
    .reasoning-effort-wrap .search-mode-menu p { margin: 7px 9px 11px; }
    .reasoning-effort-wrap .search-mode-menu button { min-height: 58px; padding: 10px 11px; }
    .effort-menu-model { padding: 4px 7px 10px; }
    .effort-toggle { min-height: 58px; padding: 9px 7px; }
}

@media (max-width: 430px) {
    .research-jobs-head,
    .settings-memory-head { align-items: stretch; flex-direction: column; }
    .research-jobs-head .btn,
    .settings-memory-head-actions,
    .settings-memory-head-actions .btn { width: 100%; }
    .settings-memory-head-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .research-job-options { grid-template-columns: 1fr; }
    .research-job-options .btn { width: 100%; }
}

@media (max-width: 700px) and (hover: hover) {
    .attach-wrap #attach:hover {
        border-radius: 50%;
        background: var(--vscode-toolbar-hoverBackground); color: var(--vscode-foreground);
        box-shadow: 0 0 0 1px rgba(var(--mode-accent-rgb), .18);
    }
    .send-btn:hover:not(:disabled),
    body.busy .send-btn:hover {
        border-radius: 50%;
        background: var(--mode-accent-hover);
        box-shadow: 0 0 0 2px rgba(var(--mode-accent-rgb), .2);
    }
}

/* Touch devices have no hover state. Keep destructive/history controls discoverable and provide
   comfortable hit areas without making the desktop toolbar visually larger. */
@media (hover: none), (pointer: coarse) {
    .dialog-item { min-height: 44px; }
    .dialog-item .kill { opacity: .72; min-width: 36px; min-height: 36px; display: inline-grid; place-items: center; }
    .new-chat-nav, .rail-shortcut, .account { min-height: 44px; }
    .icon-btn { min-width: 40px; min-height: 40px; }
    .answer-action { width: 36px; height: 36px; }
    .turn-actions { gap: 3px; opacity: .9; }
    .code-copy { width: 36px; height: 36px; opacity: .9; }
    .code-head .code-copy { width: 36px; height: 36px; }
}

@media (max-height: 500px) and (max-width: 860px) {
    body.empty-chat #empty { margin-top: 22px; }
    body.empty-chat #composer { padding-top: 8px; }
    #input { min-height: 42px; max-height: 28dvh; }
}

/* Motion is decoration here — the caret, spinner and scroll animation all carry meaning that is
   also conveyed statically, so removing them costs nothing. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    #scroll { scroll-behavior: auto; }
    /* Without motion the shimmer is the only thing marking this as in-progress, so restore a
       plain colour and give the label a static cue instead. */
    .thinking-label {
        background-image: none; -webkit-text-fill-color: currentColor;
        color: var(--vscode-descriptionForeground);
    }
    .thinking:not(.is-thought) .thinking-label::after { content: ' …'; }
}

/* ── Attachments and diagrams ───────────────────────────────────────────────────────────── */

#attach-strip {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 10px 14px 0;
}
.file-chip {
    display: inline-flex; align-items: center; gap: 6px;
    max-width: 240px; padding: 2px 8px;
    background: var(--bas-fill); border: 1px solid var(--bas-line-faint);
    border-radius: var(--bas-r-pill);
    font-size: var(--bas-fs-micro);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.file-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Same compact vision chip as the VS Code panel: thumbnail, filename, dimensions, then remove. */
.file-chip.image-file-chip {
    max-width: min(100%, 430px);
    padding: 3px 6px 3px 4px;
    border-radius: var(--bas-r-sm);
}
.file-image-thumb {
    width: 22px; height: 22px; object-fit: cover; display: block; flex: 0 0 auto;
    border: 1px solid var(--vscode-widget-border, rgba(var(--bas-grey-rgb), .3));
    border-radius: 3px;
}
.file-image-dim { flex: 0 0 auto; opacity: .55; }
.file-remove {
    border: 0; background: none; cursor: pointer; padding: 0 2px; line-height: 1;
    color: var(--vscode-descriptionForeground);
}
.file-remove:hover { color: var(--bas-error); }
.bubble-files { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 7px; }
.turn.user .bubble-files .file-chip { background: rgba(var(--bas-grey-rgb), .22); }

body.dropping::after {
    content: ''; position: fixed; inset: 8px; z-index: 30; pointer-events: none;
    border: 2px dashed var(--mode-accent); border-radius: 12px;
    background: rgba(var(--mode-accent-rgb), .07);
}

/* Tool artifacts share the same contained output treatment as textual tool receipts. Images are
   still loaded through <img>, never as executable SVG markup. */
.tool-artifact {
    width: min(100%, var(--thread-w)); box-sizing: border-box;
    margin: 10px 0 14px;
}
.file-artifact {
    min-height: 64px; display: flex; align-items: stretch;
    background: var(--bas-fill-subtle); border: 1px solid var(--vscode-widget-border);
    border-radius: var(--bas-r-md); overflow: hidden;
}
.file-artifact:hover, .file-artifact:focus-within { background: var(--vscode-list-hoverBackground); }
.file-artifact-open {
    min-width: 0; flex: 1; display: flex; align-items: center; gap: 11px; padding: 9px 12px;
    border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer;
}
.file-artifact-open:hover, .file-artifact-open:focus-visible { background: transparent; outline: none; }
.file-artifact-icon {
    width: 35px; height: 40px; flex: 0 0 auto; display: grid; place-items: center;
    border: 1px solid var(--vscode-widget-border); border-radius: var(--bas-r-sm);
    background: var(--vscode-textCodeBlock-background); color: var(--vscode-descriptionForeground);
}
.file-artifact-icon svg { width: 18px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; }
.file-artifact-copy { min-width: 0; display: grid; gap: 2px; }
.file-artifact-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--bas-fs-sm); }
.file-artifact-copy small { color: var(--vscode-descriptionForeground); font-size: var(--bas-fs-micro); text-transform: uppercase; }
.file-artifact-download {
    align-self: center; margin: 0 12px; padding: 6px 11px;
    border: 1px solid var(--vscode-widget-border); border-radius: var(--bas-r-md);
    background: var(--bas-fill); color: inherit; font: inherit; font-size: var(--bas-fs-micro); cursor: pointer;
}
.file-artifact-download:hover, .file-artifact-download:focus-visible { background: var(--vscode-toolbar-hoverBackground); outline: none; }
.diagram {
    padding: 12px;
    background: var(--vscode-textCodeBlock-background);
    border: 1px solid var(--vscode-widget-border);
    border-radius: var(--bas-r-md);
    /* A wide graph scrolls inside its own box, never the page. */
    overflow-x: auto;
}
.diagram img { display: block; max-width: 100%; height: auto; }
/* Graphviz emits dark strokes on a transparent background, which vanish in the dark theme. */
:root[data-theme="dark"] .diagram { background: #f6f6f6; }
.diagram-save {
    display: inline-block; margin-top: 8px;
    font-size: var(--bas-fs-micro); color: var(--vscode-textLink-foreground);
}

/* ── Web images ─────────────────────────────────────────────────────────────────────────── */
/* Pictures the agent found on the web. A grid rather than stacked figures: one tool call returns
   several, and full-width images would push the answer they illustrate off the screen. */

.image-gallery {
    display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.web-image { margin: 0; min-width: 0; }
/* An <a> normally; a <span> when the source URL was not linkable (see addWebImage). */
.web-image a, .web-image > span {
    display: block; border-radius: var(--bas-r-md); overflow: hidden;
    border: 1px solid var(--vscode-widget-border);
    background: var(--bas-fill-subtle);
}
.web-image a:hover, .web-image a:focus-visible { border-color: var(--vscode-focusBorder); }
.web-image img {
    display: block; width: 100%; height: 170px;
    /* Uniform tiles from wildly different source aspect ratios; the source page has the original. */
    object-fit: cover;
}
.web-image figcaption {
    display: flex; flex-direction: column; gap: 1px; padding: 5px 2px 0;
    font-size: var(--bas-fs-micro); line-height: 1.35;
}
.web-image-title {
    color: var(--vscode-foreground);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.web-image-credit {
    color: var(--vscode-descriptionForeground);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* An image written as Markdown by the model, rather than presented through the image tool. */
.md-image {
    display: block; max-width: min(100%, 420px); height: auto; margin: 8px 0;
    border-radius: var(--bas-r-md); border: 1px solid var(--vscode-widget-border);
}

/* ── Sign-in ────────────────────────────────────────────────────────────────────────────── */

body.login-page {
    position: relative; isolation: isolate;
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; min-height: 100dvh;
    padding: 24px; overflow: hidden;
    background: #111014;
}
.login-sky {
    position: fixed; inset: 0; z-index: 0; overflow: hidden;
    background:
        radial-gradient(ellipse at 18% 22%, rgba(104, 71, 145, .18), transparent 35%),
        radial-gradient(ellipse at 82% 78%, rgba(70, 47, 108, .2), transparent 39%),
        linear-gradient(145deg, #0d0c11 0%, #16131c 52%, #0d0c12 100%);
}
.login-sky::before {
    content: ''; position: absolute; inset: -22%;
    background:
        radial-gradient(ellipse at 32% 45%, rgba(150, 115, 194, .11), transparent 24%),
        radial-gradient(ellipse at 67% 56%, rgba(92, 65, 136, .1), transparent 27%);
    filter: blur(28px);
    animation: login-nebula-drift 22s ease-in-out infinite alternate;
}
.login-sky::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, transparent 25%, rgba(5, 5, 8, .42) 100%);
    pointer-events: none;
}
#login-sky-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .88; }
.login-nebula {
    position: absolute; width: min(58vw, 760px); aspect-ratio: 1;
    border-radius: 50%; filter: blur(70px); opacity: .2; mix-blend-mode: screen;
    animation: login-orbit 26s ease-in-out infinite alternate;
}
.login-nebula-one {
    left: -18%; bottom: -34%;
    background: radial-gradient(circle, rgba(130, 91, 177, .45), transparent 68%);
}
.login-nebula-two {
    right: -22%; top: -35%; animation-delay: -11s; animation-duration: 31s;
    background: radial-gradient(circle, rgba(89, 65, 135, .4), transparent 69%);
}
@keyframes login-nebula-drift {
    from { transform: translate3d(-2%, -1%, 0) rotate(-2deg) scale(1); }
    to { transform: translate3d(3%, 2%, 0) rotate(3deg) scale(1.08); }
}
@keyframes login-orbit {
    from { transform: translate3d(-2%, 1%, 0) scale(.94); }
    to { transform: translate3d(7%, -5%, 0) scale(1.08); }
}
.login-card {
    position: relative; z-index: 1; width: 100%; max-width: 410px;
    padding: 34px 34px 27px; overflow: hidden;
    background: linear-gradient(145deg, rgba(40, 37, 46, .88), rgba(27, 25, 32, .9));
    border: 1px solid rgba(194, 170, 226, .16);
    border-radius: 20px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .5), 0 0 50px rgba(var(--mode-accent-rgb), .08);
    backdrop-filter: blur(22px) saturate(1.15);
}
.login-card::before {
    content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(211, 190, 239, .58), transparent);
}
.login-brand { display: flex; align-items: center; gap: 15px; margin-bottom: 12px; }
.login-mark {
    position: relative; display: grid; place-items: center; flex: 0 0 auto;
    width: 48px; height: 58px;
    filter: drop-shadow(0 0 15px rgba(183, 155, 219, .28));
}
.login-mark::before {
    content: ''; position: absolute; width: 54px; height: 54px; border-radius: 50%;
    background: rgba(var(--mode-accent-rgb), .1); filter: blur(12px);
}
.login-mark img { position: relative; width: 31px; height: 47px; object-fit: contain; }
.login-wordmark {
    display: block; margin-bottom: 3px;
    color: #bda6dc; font-size: 10px; line-height: 1;
    font-weight: 650; letter-spacing: .23em;
}
.login-brand h1 { margin: 0; color: #eeeaf2; font-size: 1.55rem; line-height: 1.2; font-weight: 580; letter-spacing: -.02em; }
.login-lead { margin: 0 0 25px 63px; font-size: var(--bas-fs-sm); line-height: 1.55; color: #aaa4af; }
.login-field { display: block; margin-bottom: 16px; }
.login-field span {
    display: block; margin: 0 0 7px 2px;
    font-size: var(--bas-fs-micro); color: #b5afb9; font-weight: 520; letter-spacing: .02em;
}
.login-field input {
    width: 100%; min-height: 46px; padding: 10px 13px;
    background: rgba(13, 12, 16, .38);
    border: 1px solid rgba(194, 184, 204, .18);
    border-radius: 9px;
    color: #eeeaf2; outline: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02);
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.login-field input:hover { border-color: rgba(194, 174, 220, .32); }
.login-field input:focus {
    background: rgba(17, 15, 21, .58); border-color: rgba(168, 135, 211, .8);
    box-shadow: 0 0 0 3px rgba(var(--mode-accent-rgb), .14), inset 0 1px 0 rgba(255, 255, 255, .03);
}
.login-error {
    margin-bottom: 12px; padding: 7px 10px;
    background: rgba(var(--bas-error-rgb), .1);
    border: 1px solid rgba(var(--bas-error-rgb), .35);
    border-radius: var(--bas-r-md);
    font-size: var(--bas-fs-sm); color: var(--bas-error);
}
.login-submit {
    width: 100%; min-height: 46px; margin-top: 2px; padding: 10px;
    border-radius: 9px; font-weight: 640;
    box-shadow: 0 10px 28px rgba(76, 49, 111, .3);
    transition: transform .14s ease, background .14s ease, box-shadow .14s ease;
}
.login-submit:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 13px 32px rgba(76, 49, 111, .38); }
.login-submit:active:not(:disabled) { transform: translateY(0); }
.login-foot {
    display: flex; justify-content: center; align-items: center; gap: 7px;
    margin: 18px 0 0; color: #77717d; font-size: 10.5px; letter-spacing: .025em;
}
.login-foot span {
    width: 5px; height: 5px; border-radius: 50%; background: #9880b8;
    box-shadow: 0 0 9px rgba(178, 146, 220, .65);
}

@media (max-width: 520px) {
    body.login-page {
        align-items: center;
        padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    }
    .login-card { padding: 27px 21px 23px; border-radius: 16px; }
    .login-lead { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .login-sky::before, .login-nebula { animation: none; }
    .login-submit { transition: none; }
}

/* ── Account (bottom of the rail) ───────────────────────────────────────────────────────── */

.rail-foot {
    position: relative;                 /* containing block for the popover */
    padding: 8px 10px;
    /* No rule above the account button: the conversation list already ends in whitespace, and the
       line read as a section boundary in a sidebar that has no other section boundaries. */
}

.account {
    display: flex; align-items: center; gap: 9px;
    width: 100%; min-height: 36px; padding: 4px;
    background: none; border: 0; border-radius: var(--bas-r-md);
    color: inherit; text-align: left; cursor: pointer;
    overflow: hidden;
    transition: width .18s ease, padding .18s ease, gap .18s ease, background .12s ease;
}
.account:hover { background: var(--vscode-list-hoverBackground); }

.avatar {
    flex: 0 0 auto;
    display: grid; place-items: center;
    /* The radius alone rounds the box, not what is drawn inside it: an uploaded picture spilled
       over the corners and the mark rendered square. */
    width: 28px; height: 28px; border-radius: 50%; overflow: hidden;
    background: var(--mode-accent); color: var(--mode-accent-fg);
    font-size: var(--bas-fs-micro); font-weight: 600; letter-spacing: .3px;
}
.account-text {
    flex: 1; min-width: 0; max-width: 180px; display: flex; flex-direction: column;
    transition: max-width .18s ease, opacity .12s ease;
}
.account-name,
.account-sub {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.account-name { font-size: var(--bas-fs-sm); font-weight: 600; }
.account-sub { font-size: var(--bas-fs-micro); color: var(--vscode-descriptionForeground); }
.account-chevron { flex: 0 0 auto; color: var(--vscode-descriptionForeground); }
.account[aria-expanded="true"] .account-chevron { transform: rotate(180deg); }

/* Opens upward, anchored to the rail's bottom — the same popover recipe the sidebar uses. */
.popover {
    position: absolute; bottom: 58px; left: 8px; right: 8px; z-index: 12;
    padding: 5px;
    background: var(--vscode-editorWidget-background);
    border: 1px solid var(--vscode-widget-border);
    border-radius: var(--bas-r-lg);
    box-shadow: var(--bas-shadow-popover);
}

/* Desktop collapse keeps the same DOM nodes and SVGs alive. Only the rail width and text labels
   animate, so icons never jump in size or change drawing as the sidebar folds into its compact rail. */
@media (min-width: 861px) {
    body.rail-hidden #rail { width: 56px; flex-basis: 56px; margin-left: 0; }
    body.rail-hidden .rail-head { justify-content: center; gap: 0; padding-inline: 10px; }
    body.rail-hidden .brand { width: 0; min-width: 0; padding-inline: 0; opacity: 0; pointer-events: none; }
    body.rail-hidden #rail-close { margin-left: 0; }
    body.rail-hidden .new-chat-nav {
        justify-content: center; gap: 0;
        width: 36px; min-height: 36px; margin: 10px 10px 4px; padding: 8px 9px;
        background: rgba(var(--bas-grey-rgb), .12);
    }
    body.rail-hidden .new-chat-nav span,
    body.rail-hidden .rail-shortcut span { max-width: 0; opacity: 0; }
    body.rail-hidden .rail-shortcuts { padding-inline: 10px; }
    body.rail-hidden .rail-shortcut { justify-content: center; gap: 0; width: 36px; padding-inline: 9px; }
    body.rail-hidden #dialog-list { opacity: 0; visibility: hidden; pointer-events: none; }
    body.rail-hidden .rail-foot { padding: 8px 10px; }
    body.rail-hidden .account { justify-content: center; gap: 0; width: 36px; padding: 4px; }
    body.rail-hidden .account-text,
    body.rail-hidden .account-chevron { max-width: 0; width: 0; min-width: 0; opacity: 0; overflow: hidden; }
    body.rail-hidden #account-menu { left: 64px; right: auto; bottom: 8px; width: 250px; }
}
.menu-item {
    display: flex; align-items: center; gap: 9px;
    width: 100%; padding: 7px 9px;
    background: none; border: 0; border-radius: var(--bas-r-md);
    color: inherit; text-align: left; font-size: var(--bas-fs-sm); cursor: pointer;
}
.menu-item:hover { background: var(--vscode-list-hoverBackground); }
.menu-item.danger:hover { color: var(--bas-error); }
.menu-item svg { flex: 0 0 auto; color: var(--vscode-descriptionForeground); }
.menu-item.danger:hover svg { color: var(--bas-error); }
.menu-sep { height: 1px; margin: 5px 4px; background: var(--vscode-panel-border); }
.menu-info {
    padding: 4px 9px 7px;
    font-size: var(--bas-fs-micro); color: var(--vscode-descriptionForeground);
    line-height: 1.4;
}

/* ── The account settings page ─────────────────────────────────────────────────────────────── */

.settings-static { color: var(--vscode-descriptionForeground); font-size: var(--bas-fs-small); }

.account-identity { display: flex; align-items: center; gap: 14px; }
.account-identity-actions { display: flex; flex-direction: column; gap: 6px; }

.account-avatar-large {
    display: grid; place-items: center;
    width: 56px; height: 56px; flex: 0 0 56px;
    border-radius: 50%; overflow: hidden;
    background: var(--bas-accent-soft, rgba(var(--bas-grey-rgb), .22));
    font-size: 17px; font-weight: 600; letter-spacing: .02em;
}
.account-avatar-large img, .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.has-image, .account-avatar-large.has-image { background: none; }

.settings-subsection {
    display: flex; flex-direction: column; gap: 10px;
    padding: 16px 0 4px;
    border-top: 1px solid var(--vscode-panel-border);
}
.settings-subsection h3 { margin: 0; font-size: var(--bas-fs-body); }
.settings-subsection > p { margin: -6px 0 4px; color: var(--vscode-descriptionForeground); font-size: var(--bas-fs-small); }

.account-field { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 260px); align-items: center; gap: 12px; }
.account-field > span { font-size: var(--bas-fs-small); }
.account-field .settings-input { width: 100%; }

.account-form-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 4px; }
.account-form-note { font-size: var(--bas-fs-small); color: var(--vscode-descriptionForeground); }
.account-form-note.is-error { color: var(--vscode-errorForeground, #f14c4c); }

@media (max-width: 640px) {
    .account-field { grid-template-columns: minmax(0, 1fr); }
    .account-identity-row .account-identity { flex-wrap: wrap; }
}

/* ── Model name and the Thinking toggle in the composer's effort menu ──────────────────────── */

.effort-model {
    max-width: 148px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--vscode-foreground); opacity: .92;
}
/* The effort word is the secondary fact once the model is named beside it. */
.effort-model + #reasoning-effort-label { opacity: .62; }

.effort-menu-model {
    display: flex; flex-direction: column; gap: 1px;
    padding: 2px 4px 8px;
}
.effort-menu-model strong { font-size: var(--bas-fs-body); }
.effort-menu-model small {
    color: var(--vscode-descriptionForeground);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.effort-menu-sep {
    height: 1px; margin: 6px 2px;
    background: var(--vscode-panel-border);
}

.effort-toggle {
    display: flex; align-items: center; gap: 10px; justify-content: space-between;
    padding: 6px 4px; border-radius: 7px; cursor: pointer;
}
.effort-toggle:hover { background: var(--vscode-list-hoverBackground); }
.effort-toggle > span:first-child { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.effort-toggle strong { font-size: var(--bas-fs-body); font-weight: 500; }
.effort-toggle small { color: var(--vscode-descriptionForeground); }
.effort-toggle .switch input:checked + span { background: var(--mode-accent); }
.effort-toggle .switch input:checked + span::after { transform: translateX(16px); }
.effort-toggle .switch input:focus-visible + span { outline: 2px solid var(--vscode-focusBorder); outline-offset: 2px; }

/* ── Mathematics ───────────────────────────────────────────────────────────────────────────── */

.math { font-family: var(--bas-font-serif, Georgia, 'Times New Roman', serif); font-style: italic; }
.math sup, .math sub { font-style: normal; font-size: .72em; }
.math-display {
    display: block; margin: 10px 0; text-align: center;
    font-family: var(--bas-font-serif, Georgia, 'Times New Roman', serif); font-style: italic;
    font-size: 1.06em;
    overflow-x: auto;
}

/* A fraction is two stacked cells with a rule between them — the one construction that genuinely
   needs layout rather than a character. */
.math-frac {
    display: inline-flex; flex-direction: column; vertical-align: -0.55em;
    margin: 0 .18em; text-align: center;
}
.math-frac .math-num { padding: 0 .3em; border-bottom: 1px solid currentColor; }
.math-frac .math-den { padding: 0 .3em; }

.math-sqrt .math-radicand { border-top: 1px solid currentColor; padding: 0 .18em; margin-left: .04em; }

/* The model's own deliberation is prose, not output: wrap it like a sentence rather than laying it
   out as monospace machine text the reader is meant to inspect character by character. */
.activity-item[data-kind="thinking"] .activity-item-body {
    font-family: inherit;
    font-size: var(--bas-fs-small);
    line-height: 1.5;
    white-space: pre-wrap;
    color: var(--vscode-descriptionForeground);
    max-height: 190px; overflow-y: auto;
    /* The window scrolls up as it fills; anchoring keeps the newest thought in view. */
    overflow-anchor: auto;
}

/* ── Arriving, not appearing ───────────────────────────────────────────────────────────────── */
/*
   The agent decides faster than anyone can read it. Everything the timeline adds settles in over a
   moment instead of snapping into place, and a label that changes cross-fades rather than cutting.
   Motion is small on purpose: this is a status surface, not an animation.
*/

.activity-item {
    transition: opacity .22s ease, transform .22s ease;
}
.activity-item.is-entering {
    opacity: 0;
    transform: translateY(4px);
}

.activity-name { transition: opacity .16s ease; }
.activity-name.is-changing { opacity: 0; }

/* A picture is the result of the work above it; letting it fade up reads as the timeline handing
   it over, rather than as the page jumping. */
.tool-artifact, .activity-item .code-preview, .turn.assistant .md-image, .web-image {
    animation: helix-rise .26s ease both;
}

@keyframes helix-rise {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .activity-item, .activity-name { transition: none; }
    .activity-item.is-entering { opacity: 1; transform: none; }
    .tool-artifact, .activity-item .code-preview, .turn.assistant .md-image, .web-image { animation: none; }
}

/* ── Saved model endpoints ─────────────────────────────────────────────────────────────────── */
/*
   Compact by construction: the list is a dropdown, and the form that edits it stays folded away
   until someone wants it. Adding a provider is a URL and a key, so the form is five fields.
*/

.provider-editor {
    margin: 10px 0 6px;
    border: 1px solid var(--vscode-panel-border);
    border-radius: 10px;
    background: var(--bas-fill-subtle);
    overflow: hidden;
}
.provider-editor > summary {
    padding: 11px 14px; cursor: pointer;
    font-size: var(--bas-fs-sm); color: var(--vscode-descriptionForeground);
    list-style: none;
}
.provider-editor > summary::-webkit-details-marker { display: none; }
.provider-editor > summary::before {
    content: '›'; display: inline-block; width: 13px; margin-right: 3px;
    transform-origin: 45% 50%; transition: transform .14s ease;
}
.provider-editor[open] > summary::before { transform: rotate(90deg); }
.provider-editor > summary:hover { color: var(--vscode-foreground); }
.provider-editor[open] > summary {
    border-bottom: 1px solid var(--vscode-panel-border);
    color: var(--vscode-foreground);
}

.provider-form {
    display: flex; flex-direction: column; gap: 10px;
    padding: 14px;
}
.provider-field {
    display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 10px;
}
.provider-field > span { font-size: var(--bas-fs-small); color: var(--vscode-descriptionForeground); }
.provider-field .settings-input, .provider-field .settings-select { width: 100%; }

.provider-note {
    margin: 0; font-size: var(--bas-fs-micro);
    color: var(--vscode-descriptionForeground);
}
.provider-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.provider-status {
    flex: 1; min-width: 0;
    font-size: var(--bas-fs-small); color: var(--vscode-descriptionForeground);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (max-width: 640px) {
    .provider-field { grid-template-columns: minmax(0, 1fr); }
}