/* ============================================================================
   delphos-code.css — Delphos Code, the cloud AI IDE.

   ── Why this file is structured the way it is ──
   The previous stylesheet grew per-component, so every panel invented its own
   padding, radius and font size. That is what made the IDE feel like unrelated
   widgets sharing a window. Everything here derives from ONE token set:

     SPACE   --s1..--s7   4px scale. No arbitrary padding anywhere.
     TYPE    --t-xs..--t-lg + --lh-*        one ramp, used everywhere.
     RADIUS  --r-sm/--r/--r-lg/--r-full
     DEPTH   --z-* elevation + --sh-* shadows
     MOTION  --fast/--med/--slow + --ease   one curve for the whole product.

   Rules that keep it coherent:
     • A control is 28px (sm), 32px (md) or 38px (lg) tall. Nothing in between.
     • Row padding is always --s2 --s3. Card padding is always --s4.
     • Only interactive elements animate, and only transform/opacity/colour.
     • Every focusable element gets the same :focus-visible ring.

   ── Layout ──
     .dcode-topbar     brand · project · global actions        (48px)
     .dcode-stage      gate / select / compose / workspace
     .dcode-statusbar  diagnostics · position · language · rev (26px)

   Inside the workspace: chat ║ canvas, canvas = tabs · breadcrumb ·
   (explorer ║ editor) · panel. `║` are draggable splitters whose widths persist.

   There is deliberately NO right-hand rail in Code mode: /code/<id> is a
   dedicated IDE, so every global action lives in the top bar and the editor
   gets the full width. Desktop only.
   ========================================================================== */

/* The launcher is hidden on mobile — the feature is desktop-only. */
@media (max-width: 820px) { #code-menu-item { display: none !important; } }

/* ── dedicated IDE environment ────────────────────────────────────────────
   Code mode is not a panel inside the dashboard, it is its own workspace, so
   every piece of app chrome that belongs to chat is removed rather than merely
   covered. `overflow:hidden` on the body stops the page behind from scrolling
   under the IDE.

   ── WHY THE CHAT SIDEBAR USED TO SHOW BESIDE THE IDE ──

   It was the intended design, and that is the thing being changed. `.dcode` was
   inset from the left by `--dc-sidebar-current-w` (set on `body` in
   canvas-panel.css: the 56px rail, or 292px while `.nav-menu.open`), with a
   `transition: left` to follow it. So the IDE deliberately sat BESIDE the chat
   sidebar, while Delphos Design covers it — and covering it is what was asked
   for, because an IDE has its own file explorer and does not need a chat rail
   next to it.

   Two real defects came with that layout, and both are fixed here:

     1. `.dcode` sat at `z-index: 60`, while `.nav-menu` is 999 and `.nav` is
        9999. Any overlap therefore resolved in the chat chrome's favour, and the
        60px chat top bar painted straight over the workspace header.

     2. `open()` called `window.toggleNav(false)` to "collapse the sidebar", which
        CANNOT hide it on desktop. Above 1000px style.css pins
        `.nav-menu { transform: translateX(0) }` and `.nav-menu:not(.open)` merely
        narrows the width, so `.open` selects between a full panel and an icon
        rail — visibility is not what it controls. No argument to toggleNav could
        have produced a hidden sidebar, and the call mutated the user's chat
        layout as a side effect of opening the IDE.

   The fix is the pattern this app already uses for its other full-screen
   surface: `body.delphos-canvas-open .nav { display: none }` in canvas-panel.css.
   Hide the chrome outright, let the surface own the viewport, and leave the
   sidebar's own state untouched so it comes back exactly as it was. */
body.delphos-coding {
    overflow: hidden !important;
}
body.delphos-coding .chat-list,
body.delphos-coding #chat-skeleton,
body.delphos-coding .typing-area,
body.delphos-coding .header,
body.delphos-coding .chat-header,
body.delphos-coding .right-sidebar,
body.delphos-coding .side-panel,
body.delphos-coding #right-rail,
/* The chat top bar and the left sidebar. Hidden, not narrowed: the IDE has its
   own top bar and its own explorer, so both of these are duplicate chrome here.
   `.nav .action-buttons` and `.nav #start-live-voice` used to be hidden
   individually — pointless once their whole parent is gone. */
body.delphos-coding .nav,
body.delphos-coding .nav-menu,
body.delphos-coding .nav-overlay-swipe { display: none !important; }

.dcode {
    /* ── palette ─────────────────────────────────────────────────────────── */
    --c-accent: var(--dc-accent, var(--accent, #b7795c));
    --c-accent-strong: var(--accent-strong, #975d46);
    --c-accent-contrast: var(--accent-contrast, #fff);
    --c-soft: var(--accent-soft, rgba(183, 121, 92, .14));
    --c-ring: var(--accent-ring, rgba(183, 121, 92, .40));

    /* ── surface ramp ─────────────────────────────────────────────────────
       THIS WAS INVERTED AND HARDCODED, and it is the single biggest reason the
       IDE read as cheap next to Delphos Design. Two mistakes compounded, and
       they are exactly the two Delphos Design already diagnosed and fixed:

       1. DIRECTION. The app's ramp goes UP from the canvas — the chat area is
          the darkest plane and controls sit ABOVE it. These values went DOWN
          instead (--c-bg3 was #0a0a0b, DARKER than the #0e0e0e canvas), so every
          input, well and popover was a hole punched in the page. That alone
          makes an interface look heavy and unfinished.
       2. HUE. #0a0a0b / #17171a / #1e1e21 / #7a7570 are cool greys. The app's
          palette is WARM graphite. A cool near-black beside warm charcoal reads
          unmistakably as navy, which is the "colour theme of the workspace"
          complaint.

       Every step is now the app's own token, exactly as delphos-design.css does
       it, so the IDE inherits the warm ramp, flips with `body.light_mode` for
       free, and can never drift from the rest of the product again. The
       --dc-* overrides are kept first in each var() chain because the workspace
       theme picker sets them at runtime.

       Ordering, canvas outwards:
         --c-bg    canvas / editor background
         --c-bg2   raised chrome: top bar, panels, cards
         --c-bg3   control fills: buttons, inputs, wells   (ABOVE the canvas now)
         --c-bg4   floating: popovers, modals, menus
         --c-hover / --c-active  interaction states                            */
    --c-bg: var(--dc-surface, var(--chat-area-background, #201f1d));
    --c-bg2: var(--dc-surface-2, var(--light-dark-background, #242321));
    --c-bg3: var(--secondary-color, #2a2927);
    --c-bg4: var(--darker-background, #252321);
    --c-hover: var(--secondary-hover-color, #353330);
    --c-active: var(--highlight-background, #383531);

    /* ── overlay ink ──────────────────────────────────────────────────────
       The single base colour every translucent overlay in the IDE is built
       from — borders, dividers, hovers, scrollbars, subtle fills. On the dark
       ramp it is a warm off-white laid over charcoal; in light mode it MUST
       invert to a dark ink or every one of those overlays turns into a
       near-invisible white-on-white smear (which is exactly why Code did not
       "follow" light mode). Defined once here and flipped in the light-mode
       block below, so all ~90 overlays track the theme from one place. */
    --c-ink: 245, 238, 230;

    --c-line: var(--dc-line, var(--border-color, rgba(var(--c-ink), .1)));
    --c-line-soft: var(--nav-bar-border, rgba(var(--c-ink), .07));
    --c-line-strong: rgba(var(--c-ink), .18);

    --c-text: var(--dc-text, var(--text-color, #eeeae5));
    --c-muted: var(--dc-muted, var(--subheading-color, #aaa39b));
    --c-faint: var(--placeholder-color, #938d86);

    --c-mono: var(--dc-mono, ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace);
    /* The one place the IDE departs from the app's type: the lobby's single
       question. A serif display face is what makes the front door read as a
       craft tool rather than a settings screen — the same decision, and the same
       system stack, as the Delphos Design lobby, so the two front doors are
       recognisably siblings. */
    --c-serif: ui-serif, Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif;

    --c-add: #3fb950; --c-add-soft: rgba(63, 185, 80, .13);
    --c-del: #f85149; --c-del-soft: rgba(248, 81, 73, .12);
    --c-warn: #d29922; --c-warn-soft: rgba(210, 153, 34, .13);
    --c-info: #58a6ff; --c-info-soft: rgba(88, 166, 255, .12);

    /* ── space: a single 4px scale ────────────────────────────────────────── */
    --s1: 4px; --s2: 6px; --s3: 10px; --s4: 14px; --s5: 18px; --s6: 24px; --s7: 32px;

    /* ── type ─────────────────────────────────────────────────────────────── */
    --t-xs: 11px; --t-sm: 12px; --t-md: 13px; --t-base: 13.5px; --t-lg: 15px;
    --lh-tight: 1.25; --lh: 1.5; --lh-loose: 1.65;

    /* ── shape ────────────────────────────────────────────────────────────── */
    --r-sm: 6px; --r: 9px; --r-lg: 13px; --r-full: 999px;

    /* ── control heights: three sizes, no others ──────────────────────────── */
    --h-sm: 28px; --h-md: 32px; --h-lg: 38px;

    /* ── chrome metrics ───────────────────────────────────────────────────── */
    --topbar-h: 48px;
    --statusbar-h: 26px;
    --tabs-h: 36px;
    --crumb-h: 26px;

    /* ── depth ──────────────────────────────────────────────────────────────
       Taken from the app's shared elevation scale (ui-polish.css declares
       --ui-shadow-*) so the IDE's cards and popovers cast the same shadow as
       every other panel in the product, instead of inventing a second,
       slightly-different set. */
    --sh-1: var(--ui-shadow-sm, 0 1px 2px rgba(0, 0, 0, .18));
    --sh-2: var(--ui-shadow-md, 0 8px 24px rgba(0, 0, 0, .28));
    --sh-3: var(--ui-shadow-lg, 0 24px 70px rgba(0, 0, 0, .5));
    --z-pop: 90; --z-mask: 95; --z-modal: 100;

    /* ── motion: one curve, three speeds ────────────────────────────────────
       --ease now defers to the app's shared --ui-ease, the same curve Delphos
       Design uses, so a hover here and a hover there decelerate identically.
       --spring is the overshoot curve reserved for things that ARRIVE (cards
       dealing out, sheets opening); it is never used for hover, where an
       overshoot reads as a wobble. */
    --ease: var(--ui-ease, cubic-bezier(.22, .61, .36, 1));
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --spring: cubic-bezier(.16, 1.06, .3, 1);
    --fast: .13s; --med: .21s; --slow: .38s;

    /* Full viewport, matching `.ddx` in delphos-design.css exactly. The old value
       was `inset: 0 0 0 var(--dc-sidebar-current-w, 56px)` — a left gutter for a
       chat sidebar that is now hidden, so the gutter (and the `transition: left`
       that tracked it) has nothing left to reserve space for.

       `z-index: 9000` is also Design's value: high enough to clear `.nav-menu`
       (999), low enough to stay under the app-window layer (9998) and the canvas
       panel (9995), so overlays launched from inside the IDE still land on top.

       This works despite `.dcode` being mounted inside `.chat-container`, because
       that element is `position: relative` with `z-index: auto` and
       `will-change: scroll-position` — none of which opens a stacking context. So
       the value competes in the root context, against `.nav`/`.nav-menu`, as
       intended. If `.chat-container` ever gains a z-index or a transform, this
       breaks silently and `.dcode` must move to <body>. */
    position: fixed; inset: 0;
    display: flex; flex-direction: column;
    background: var(--c-bg); color: var(--c-text);
    z-index: 9000; overflow: hidden;
    font-family: var(--font, system-ui, -apple-system, 'Segoe UI', sans-serif);
    font-size: var(--t-base); line-height: var(--lh);
    animation: dc-in var(--med) var(--ease);
}
/* Light mode: invert the overlay ink from warm off-white to warm graphite so
   every translucent border, divider, hover and scrollbar built on --c-ink stays
   visible on the light surface ramp instead of washing out to white-on-white.
   The surface/text tokens already flip via the app's own light_mode variables
   (see the surface ramp above); this is the one thing they could not carry. */
body.light_mode .dcode { --c-ink: 40, 33, 26; }
.dcode[hidden] { display: none; }
/* The HTML `hidden` attribute must always win. Components here set explicit
   `display` values (flex/grid/block), and those silently override the UA
   `[hidden]{display:none}` rule — which is how an overlay toggled with
   `el.hidden = true` can stay visible on top of the editor. This one line makes
   `hidden` authoritative for every element in the IDE. */
.dcode [hidden] { display: none !important; }
.dcode * { box-sizing: border-box; min-width: 0; }
.dcode button { font-family: inherit; font-size: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
.dcode input, .dcode textarea { font-family: inherit; color: inherit; }

/* Focus: one ring for the entire product. */
.dcode :focus-visible {
    outline-offset: 1px;
    border-radius: var(--r-sm);
}
/* ── icon font: must survive the resets above ─────────────────────────────
   `.dcode button { font-family: inherit }` and `.dcode input, .dcode textarea
   { font-family: inherit }` are (0,1,1) selectors, while the icon font is
   delivered by Google as `.material-symbols-rounded { font-family: … }` — a
   plain (0,1,0) class. So the resets WIN, and any element that is BOTH the
   control and the icon (e.g. `<button class="dcode-card-menu
   material-symbols-rounded">more_horiz</button>`) lost the icon font and
   painted its ligature name as literal text. Re-asserting the family here (and
   only the family plus the properties ligature substitution depends on) fixes
   every such element without touching layout. */
.dcode .material-symbols-rounded,
.dcode button.material-symbols-rounded,
.dcode .material-icons {
    font-family: 'Material Symbols Rounded', 'Material Icons' !important;
    font-weight: normal;
    font-style: normal;
    letter-spacing: normal;
    text-transform: none;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}
.dcode .material-symbols-rounded {
    user-select: none;
    font-variation-settings: 'wght' 400, 'opsz' 20;
    flex: none;
}
/* When the icon class sits on the control itself there is no inner span to size,
   and `font-size: inherit` from the button reset would leave the glyph at body
   size. Give that shape a sensible icon size; any rule that targets a nested
   `.material-symbols-rounded` is more specific and still wins. */
.dcode button.material-symbols-rounded { font-size: 19px; line-height: 1; }

/* ── motion system ───────────────────────────────────────────────────────── */
@keyframes dc-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes dc-spin { to { transform: rotate(360deg); } }
@keyframes dc-rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes dc-slide { from { opacity: 0; transform: translateX(-7px); } to { opacity: 1; transform: none; } }
@keyframes dc-pop { from { opacity: 0; transform: scale(.965); } to { opacity: 1; transform: none; } }
@keyframes dc-pulse { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2.5px); } }
@keyframes dc-check { from { transform: scale(0) rotate(-25deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes dc-sheen { from { background-position: -220% 0; } to { background-position: 220% 0; } }
@keyframes dc-flash { from { background: var(--c-soft); } to { background: transparent; } }
@keyframes dc-caret { 0%, 45% { opacity: 1; } 55%, 100% { opacity: 0; } }
@keyframes dc-bar { 0% { transform: translateX(-100%); } 100% { transform: translateX(320%); } }

@media (prefers-reduced-motion: reduce) {
    .dcode, .dcode * {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Scrollbars: thin, and only visible where content actually scrolls. */
.dcode ::-webkit-scrollbar { width: 10px; height: 10px; }
.dcode ::-webkit-scrollbar-track { background: transparent; }
.dcode ::-webkit-scrollbar-thumb {
    background: rgba(var(--c-ink), .1);
    border: 2px solid transparent; background-clip: content-box;
    border-radius: var(--r-full);
}
.dcode ::-webkit-scrollbar-thumb:hover { background: rgba(var(--c-ink), .22); background-clip: content-box; }
.dcode ::-webkit-scrollbar-corner { background: transparent; }

/* While a splitter is dragging, kill pointer events + transitions everywhere so
   the drag is exact and nothing lags behind the cursor. */
.dcode.resizing { cursor: col-resize; user-select: none; }
.dcode.resizing * { transition: none !important; pointer-events: none; }
.dcode.resizing .dcode-split { pointer-events: auto; }

/* ══════════════════════════════════════════════════════════════════════════
   TOP BAR
   ═════════════════════════════════════════════════════════════════════════ */
.dcode-topbar {
    height: var(--topbar-h); flex: none;
    display: flex; align-items: center; gap: var(--s2);
    padding: 0 var(--s3);
    background: var(--c-bg2);
    border-bottom: 1px solid var(--c-line);
    position: relative; z-index: 3;
}
/* The way out of the IDE. Leading, not trailing, and given a hairline separator
   so it reads as "leave this surface" rather than as the first of the brand's
   decorations — the same role `.ddx-back` plays in Delphos Design. Since
   `body.delphos-coding` now hides the chat top bar and sidebar, this is the only
   visible route back to chat, so it gets to be unmissable. */
.dcode-back {
    flex: none;
    position: relative;
    margin-right: var(--s2);
}
/* The separator is a pseudo-element rather than a border + padding, so the 32px
   icon box stays exactly 32px and the glyph stays centred in it. */
.dcode-back::after {
    content: '';
    position: absolute;
    top: 50%;
    right: calc(var(--s2) / -2);
    width: 1px;
    height: 18px;
    background: var(--c-line);
    transform: translateY(-50%);
}
.dcode-back:hover { color: var(--c-accent); }

.dcode-brand { display: flex; align-items: center; gap: var(--s2); padding-right: var(--s1); }
.dcode-brand-ico {
    font-size: 19px; color: var(--c-accent);
    display: grid; place-items: center;
    width: var(--h-sm); height: var(--h-sm);
    background: var(--c-soft); border-radius: var(--r-sm);
}
.dcode-brand-txt { font-size: var(--t-md); letter-spacing: -.01em; white-space: nowrap; }
.dcode-brand-txt strong { font-weight: 650; }

.dcode-tdiv { width: 1px; height: 18px; background: var(--c-line); flex: none; margin: 0 var(--s1); }
.dcode-spacer { flex: 1 1 auto; min-width: var(--s2); }

.dcode-proj {
    display: flex; align-items: center; gap: var(--s2);
    height: var(--h-sm); padding: 0 var(--s3);
    border-radius: var(--r-sm); cursor: pointer;
    max-width: 40ch;
    transition: background var(--fast) var(--ease);
}
.dcode-proj:hover { background: rgba(var(--c-ink), .05); }
.dcode-proj-title { font-weight: 600; font-size: var(--t-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcode-chip {
    font-size: var(--t-xs); font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
    padding: 2px var(--s2); border-radius: var(--r-full);
    background: var(--c-soft); color: var(--c-accent); flex: none;
}
.dcode-tools { display: flex; align-items: center; gap: 2px; }

/* ── buttons: icon / text / primary, all on the same height ladder ───────── */
.dcode-iconbtn, .dcode-mini, .dcode-ca-btn {
    display: grid; place-items: center;
    border-radius: var(--r-sm); color: var(--c-muted);
    transition: background var(--fast) var(--ease), color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.dcode-iconbtn { width: var(--h-sm); height: var(--h-sm); }
.dcode-iconbtn .material-symbols-rounded { font-size: 19px; }
.dcode-mini { width: 24px; height: 24px; }
.dcode-mini .material-symbols-rounded { font-size: 16px; }
.dcode-ca-btn { width: 26px; height: 26px; }
.dcode-ca-btn .material-symbols-rounded { font-size: 17px; }
.dcode-iconbtn:hover, .dcode-mini:hover, .dcode-ca-btn:hover { background: rgba(var(--c-ink), .07); color: var(--c-text); }
.dcode-iconbtn:active, .dcode-mini:active, .dcode-ca-btn:active { transform: scale(.94); }
.dcode-iconbtn.active, .dcode-ca-btn.active { background: var(--c-soft); color: var(--c-accent); }

.dcode-btn {
    display: inline-flex; align-items: center; gap: var(--s2);
    height: var(--h-sm); padding: 0 var(--s3);
    border-radius: var(--r-sm);
    background: rgba(var(--c-ink), .05);
    color: var(--c-text); font-size: var(--t-sm); font-weight: 600;
    white-space: nowrap;
    transition: background var(--fast) var(--ease), transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.dcode-btn .material-symbols-rounded { font-size: 17px; }
.dcode-btn:hover { background: rgba(var(--c-ink), .09); }
.dcode-btn:active { transform: scale(.975); }
.dcode-btn.primary { background: var(--c-accent); color: #fff; box-shadow: var(--sh-1); }
.dcode-btn.primary:hover { background: var(--c-accent-strong); }
.dcode-btn.run { background: rgba(63, 185, 80, .16); color: var(--c-add); }
.dcode-btn.run:hover { background: rgba(63, 185, 80, .24); }
.dcode-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ══════════════════════════════════════════════════════════════════════════
   STAGE + STATUS BAR
   ═════════════════════════════════════════════════════════════════════════ */
.dcode-stage { flex: 1 1 auto; min-height: 0; display: flex; overflow: hidden; }

.dcode-statusbar {
    height: var(--statusbar-h); flex: none;
    display: flex; align-items: center; gap: var(--s1);
    padding: 0 var(--s3);
    background: var(--c-bg2); border-top: 1px solid var(--c-line);
    font-size: var(--t-xs); color: var(--c-muted);
}
.dcode-statusbar[hidden] { display: none; }
.dcode-sb-item {
    display: inline-flex; align-items: center; gap: var(--s1);
    height: 20px; padding: 0 var(--s2);
    border-radius: var(--r-sm); color: inherit; white-space: nowrap;
    transition: background var(--fast) var(--ease);
}
button.dcode-sb-item:hover { background: rgba(var(--c-ink), .07); color: var(--c-text); }
.dcode-sb-item .material-symbols-rounded { font-size: 13px; }
.dcode-sb-item .material-symbols-rounded.bad { color: var(--c-del); }
.dcode-sb-item .material-symbols-rounded.warn { color: var(--c-warn); }
.dcode-sb-item.mono { font-family: var(--c-mono); font-size: 10.5px; letter-spacing: .02em; }
.dcode-sb-item.dirty { color: var(--c-warn); }
.dcode-sb-item.busy { color: var(--c-accent); }
/* A pure host for the shared live-usage chip. It carries none of the status-bar
   item styling because the chip brings its own, and an empty slot must not leave
   a gap in the bar. */
.dcode-sb-item.is-slot { padding: 0; gap: 0; background: none; }
.dcode-sb-item.is-slot:empty { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   SHARED: loading / spinner / empty
   ═════════════════════════════════════════════════════════════════════════ */
.dcode-loading {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: var(--s4);
    color: var(--c-muted); font-size: var(--t-md);
}
/* Inline variant used while a conversation loads inside the chat column. */
.dcode-loading.sm {
    flex: none; flex-direction: row; gap: var(--s2);
    justify-content: flex-start; padding: var(--s3) 0;
    font-size: var(--t-sm);
}
.dcode-spinner {
    width: 22px; height: 22px; flex: none;
    border: 2px solid var(--c-line-strong);
    border-top-color: var(--c-accent);
    border-radius: 50%;
    animation: dc-spin .7s linear infinite;
}
.dcode-spinner.sm { width: 13px; height: 13px; border-width: 1.5px; }
.dcode-empty-pane {
    height: 100%; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: var(--s2);
    color: var(--c-faint); font-size: var(--t-sm); text-align: center; padding: var(--s6);
}
.dcode-empty-pane .material-symbols-rounded { font-size: 26px; opacity: .5; }
.dcode-empty-pane p { margin: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   GATE (premium)
   ═════════════════════════════════════════════════════════════════════════ */
.dcode-gate { flex: 1; display: grid; place-items: center; padding: var(--s7); overflow: auto; }
.dcode-gate-card {
    max-width: 520px; text-align: center;
    padding: var(--s7); border-radius: var(--r-lg);
    background: var(--c-bg2); border: 1px solid var(--c-line);
    box-shadow: var(--sh-3); animation: dc-pop var(--slow) var(--ease);
}
.dcode-gate-badge {
    font-size: 30px; color: var(--c-accent);
    width: 58px; height: 58px; margin: 0 auto var(--s5);
    display: grid; place-items: center;
    background: var(--c-soft); border-radius: var(--r-lg);
}
.dcode-gate-card h1 { margin: 0 0 var(--s3); font-size: 23px; font-weight: 680; letter-spacing: -.02em; }
.dcode-gate-card p { margin: 0 0 var(--s6); color: var(--c-muted); line-height: var(--lh-loose); }
.dcode-gate-feats { display: flex; flex-direction: column; gap: var(--s3); text-align: left; margin-bottom: var(--s6); }
.dcode-gate-feat { display: flex; align-items: center; gap: var(--s3); font-size: var(--t-md); }
.dcode-gate-feat .material-symbols-rounded { font-size: 18px; color: var(--c-add); }

/* ══════════════════════════════════════════════════════════════════════════
   THE LOBBY  —  hero composer · blueprint shelf · your projects
   ══════════════════════════════════════════════════════════════════════════

   WHY THIS REPLACED TWO SCREENS

   There used to be a `compose` screen (a textarea alone on an empty page) and a
   separate `select` dashboard (a wall of cards with no way to start), reachable
   only through each other. Both jobs are now one scroll: ask, or pick up where
   you left off.

   The composition is deliberately the same as the Delphos Design lobby — serif
   display question, one field with its controls inside it, a fanned shelf of
   starting points, then a browse strip with tabs and search. Two front doors to
   two sibling products should be recognisably siblings.
   ═════════════════════════════════════════════════════════════════════════ */
.dcode-lobby { flex: 1; min-height: 0; overflow: hidden; }
.dcode-lobby-scroll { height: 100%; overflow: auto; padding: clamp(20px, 4vh, 44px) clamp(18px, 4vw, 48px) 56px; }

.dcode-hero {
    width: min(760px, 100%);
    margin: 0 auto;
    text-align: center;
}

/* The one place the IDE uses a serif face. A display question in the app's UI
   sans reads as a form label; in serif it reads as an invitation. */
.dcode-display {
    margin: clamp(10px, 4vh, 40px) 0 clamp(18px, 3vh, 30px);
    font-family: var(--c-serif);
    font-size: clamp(30px, 4.6vw, 46px);
    font-weight: 400;
    letter-spacing: -.015em;
    line-height: 1.12;
    color: var(--c-text);
}

/* ── the composer ────────────────────────────────────────────────────────
   ONE field with its controls inside it. The old version was a textarea, a
   separate row of framework pills, a separate row of model chips and a floating
   send button — four bands of chrome for one sentence of input. */
.dcode-forge {
    padding: var(--s4) var(--s4) var(--s3);
    text-align: left;
    background: var(--c-bg2);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-2);
    transition: border-color var(--med) var(--ease), box-shadow var(--med) var(--ease);
}
.dcode-forge:focus-within { border-color: var(--c-ring); box-shadow: var(--sh-2), 0 0 0 3px var(--c-soft); }

.dcode-forge-input {
    display: block;
    width: 100%;
    min-height: 46px;
    max-height: 220px;
    padding: 0 var(--s1) var(--s2);
    background: none;
    border: 0;
    resize: none;
    outline: none;
    overflow-y: auto;
    font: inherit;
    font-size: var(--t-lg);
    line-height: var(--lh-loose);
    color: var(--c-text);
}
.dcode-forge-input::placeholder { color: var(--c-faint); }

.dcode-forge-row { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }

/* Empty submit shakes the composer instead of opening an alert about it. */
.dcode-forge.is-shake { animation: dc-shake 400ms var(--ease); }
@keyframes dc-shake {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(4px); }
    30%, 50%, 70% { transform: translateX(-6px); }
    40%, 60% { transform: translateX(6px); }
}

/* ── in-composer pills ─────────────────────────────────────────────────── */
.dcode-fpill {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    max-width: 190px;
    height: var(--h-md);
    padding: 0 var(--s3);
    font: inherit;
    font-size: var(--t-sm);
    color: var(--c-muted);
    background: var(--c-bg3);
    border: 1px solid var(--c-line);
    border-radius: var(--r-full);
    transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.dcode-fpill:hover { color: var(--c-text); background: var(--c-hover); }
.dcode-fpill.is-on { color: var(--c-accent); background: var(--c-soft); border-color: var(--c-ring); }
.dcode-fpill.is-icon { width: var(--h-md); padding: 0; justify-content: center; }
.dcode-fpill .material-symbols-rounded { font-size: 17px; flex: none; }
.dcode-fpill-caret { font-size: 16px !important; color: var(--c-faint); margin-left: -2px; }

/* A label above its value, so a pill states what it controls as well as what it
   is set to. Two stacked lines at 9.5/12px fit the same 32px control height as a
   single-line pill, so the row stays on one baseline. */
.dcode-fpill-txt { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.15; }
.dcode-fpill-txt small { font-size: 9.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--c-faint); }
.dcode-fpill-txt b { font-size: var(--t-sm); font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcode-fpill.is-on .dcode-fpill-txt small { color: currentColor; opacity: .75; }

.dcode-fpill-n {
    min-width: 16px; height: 16px; padding: 0 4px;
    display: grid; place-items: center;
    font-size: 10px; font-weight: 700;
    color: var(--c-accent-contrast); background: var(--c-accent);
    border-radius: var(--r-full);
}
.dcode-fpill-n[hidden] { display: none; }

/* The send button. Round, accent-filled, and the only filled control in the
   composer, so there is never a question about what submits. */
.dcode-go {
    width: var(--h-md); height: var(--h-md); flex: none;
    display: grid; place-items: center;
    border-radius: var(--r-full);
    color: var(--c-accent-contrast);
    background: var(--c-accent);
    box-shadow: var(--sh-1);
    transition: background-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.dcode-go:hover { background: var(--c-accent-strong); }
.dcode-go:active { transform: scale(.93); }
.dcode-go:disabled { opacity: .6; }
.dcode-go .material-symbols-rounded { font-size: 19px; }

/* ── the environment note ────────────────────────────────────────────────── */
.dcode-envnote {
    display: flex; align-items: center; justify-content: center; gap: var(--s2);
    margin: var(--s4) 0 0;
    font-size: var(--t-sm);
    color: var(--c-faint);
    line-height: var(--lh);
}
.dcode-envnote .material-symbols-rounded { font-size: 16px; flex: none; }
.dcode-envnote.is-bad { color: var(--c-warn); font-weight: 600; }

/* ── the blueprint shelf ─────────────────────────────────────────────────
   Cards fan out from the centre, which reads as a physical shelf you flick
   through rather than a row of equal buttons. Hover straightens and lifts the one
   you are aiming at, so the target is never ambiguous. */
.dcode-fan-label { margin: clamp(26px, 4.4vh, 44px) 0 var(--s4); font-size: var(--t-md); color: var(--c-muted); }

.dcode-fan { display: flex; justify-content: center; align-items: flex-end; padding-bottom: var(--s2); }

.dcode-bcard {
    --r-rot: 0deg;
    --y: 0px;
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: clamp(104px, 12vw, 132px);
    margin: 0 -5px;
    padding: var(--s4) var(--s3) var(--s3);
    font: inherit;
    color: var(--c-muted);
    background: var(--c-bg2);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-2);
    transform: rotate(var(--r-rot)) translateY(var(--y));
    transform-origin: 50% 120%;
    transition: transform var(--med) var(--spring), border-color var(--fast) var(--ease),
                color var(--fast) var(--ease), box-shadow var(--med) var(--ease), background-color var(--fast) var(--ease);
}
.dcode-bcard:nth-child(1) { --r-rot: -9deg; --y: 11px; }
.dcode-bcard:nth-child(2) { --r-rot: -4.5deg; --y: 3px; }
.dcode-bcard:nth-child(3) { --r-rot: 0deg; --y: -1px; }
.dcode-bcard:nth-child(4) { --r-rot: 4.5deg; --y: 3px; }
.dcode-bcard:nth-child(5) { --r-rot: 9deg; --y: 11px; }

.dcode-bcard:hover, .dcode-bcard:focus-visible {
    z-index: 3;
    color: var(--c-text);
    background: var(--c-hover);
    transform: rotate(0deg) translateY(-10px) scale(1.04);
    box-shadow: var(--sh-3);
}
.dcode-bcard.is-on {
    z-index: 2;
    color: var(--c-accent);
    background: var(--c-soft);
    border-color: var(--c-ring);
    transform: rotate(0deg) translateY(-6px);
}
.dcode-bcard-art { display: block; }
.dcode-bcard-art svg { width: 100%; height: auto; display: block; }
.dcode-bcard-name { display: block; margin-top: var(--s3); font-size: var(--t-sm); font-weight: 600; }

.dcode-blank {
    margin-top: clamp(20px, 3.4vh, 34px);
    padding: var(--s2) var(--s3);
    font: inherit;
    font-size: var(--t-md);
    color: var(--c-muted);
    border-radius: var(--r-sm);
    transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.dcode-blank:hover { color: var(--c-accent); background: var(--c-soft); }

/* ── the browse strip ────────────────────────────────────────────────────── */
.dcode-browse { width: min(1240px, 100%); margin: clamp(34px, 6vh, 68px) auto 0; }

.dcode-browse-bar {
    display: flex; align-items: center; gap: var(--s4);
    margin-bottom: var(--s5);
    flex-wrap: wrap;
}

.dcode-segs {
    display: inline-flex; align-items: center; gap: 2px;
    padding: 3px;
    background: var(--c-bg3);
    border: 1px solid var(--c-line);
    border-radius: var(--r-full);
}
.dcode-seg {
    display: inline-flex; align-items: center; gap: var(--s2);
    height: var(--h-sm); padding: 0 var(--s4);
    font: inherit; font-size: var(--t-sm); font-weight: 600;
    color: var(--c-muted);
    border-radius: var(--r-full);
    transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.dcode-seg:hover { color: var(--c-text); }
.dcode-seg.is-on { color: var(--c-accent); background: var(--c-soft); }
.dcode-seg-n { font-size: 10.5px; font-weight: 700; opacity: .7; font-variant-numeric: tabular-nums; }
.dcode-seg-n[hidden] { display: none; }

.dcode-search {
    display: inline-flex; align-items: center; gap: var(--s2);
    flex: 1 1 220px; max-width: 320px; margin-left: auto;
    height: var(--h-md); padding: 0 var(--s3);
    background: var(--c-bg3);
    border: 1px solid var(--c-line);
    border-radius: var(--r-full);
    color: var(--c-faint);
    transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.dcode-search:focus-within { border-color: var(--c-ring); box-shadow: 0 0 0 3px var(--c-soft); }
.dcode-search .material-symbols-rounded { font-size: 18px; flex: none; }
.dcode-search input {
    flex: 1; min-width: 0;
    background: none; border: 0; outline: none;
    font: inherit; font-size: var(--t-sm); color: var(--c-text);
}
.dcode-search input::placeholder { color: var(--c-faint); }
.dcode-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.dcode-browse-body { min-height: 160px; }

.dcode-browse-empty {
    display: flex; flex-direction: column; align-items: center; gap: var(--s2);
    padding: var(--s7) var(--s5);
    text-align: center;
    color: var(--c-muted);
    font-size: var(--t-sm);
}
.dcode-browse-empty > .material-symbols-rounded { font-size: 34px; color: var(--c-faint); margin-bottom: var(--s1); }
.dcode-browse-empty strong { color: var(--c-text); font-size: var(--t-lg); font-weight: 640; }

/* ── staggered entrance, ON ENTRY ONLY ──────────────────────────────────────
   `.is-entering` is added only when arriving from another view. Replaying a
   400ms cascade whenever a tab is clicked or a search filters cards is exactly
   what makes an interface feel like it is reloading. */
.dcode-lobby.is-entering .dcode-display,
.dcode-lobby.is-entering .dcode-forge,
.dcode-lobby.is-entering .dcode-envnote,
.dcode-lobby.is-entering .dcode-fan-label,
.dcode-lobby.is-entering .dcode-blank,
.dcode-lobby.is-entering .dcode-browse {
    animation: dc-rise var(--slow) var(--ease) backwards;
}
.dcode-lobby.is-entering .dcode-display { animation-delay: 20ms; }
.dcode-lobby.is-entering .dcode-forge { animation-delay: 70ms; }
.dcode-lobby.is-entering .dcode-envnote { animation-delay: 110ms; }
.dcode-lobby.is-entering .dcode-fan-label { animation-delay: 150ms; }
.dcode-lobby.is-entering .dcode-blank { animation-delay: 230ms; }
.dcode-lobby.is-entering .dcode-browse { animation-delay: 270ms; }

/* The shelf deals itself out from the centre once the composer has arrived. */
.dcode-lobby.is-entering .dcode-bcard { animation: dc-deal var(--slow) var(--spring) backwards; }
.dcode-lobby.is-entering .dcode-bcard:nth-child(1) { animation-delay: 210ms; }
.dcode-lobby.is-entering .dcode-bcard:nth-child(2) { animation-delay: 250ms; }
.dcode-lobby.is-entering .dcode-bcard:nth-child(3) { animation-delay: 190ms; }
.dcode-lobby.is-entering .dcode-bcard:nth-child(4) { animation-delay: 250ms; }
.dcode-lobby.is-entering .dcode-bcard:nth-child(5) { animation-delay: 210ms; }

@keyframes dc-deal {
    from { opacity: 0; transform: rotate(0deg) translateY(26px) scale(.94); }
    to { opacity: 1; transform: rotate(var(--r-rot)) translateY(var(--y)); }
}

/* ── project grid ────────────────────────────────────────────────────────── */
.dcode-grid {
    display: grid; gap: var(--s5);
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.dcode-card {
    position: relative; padding: var(--s5);
    border-radius: var(--r-lg);
    background: var(--c-bg2); border: 1px solid var(--c-line);
    cursor: pointer; overflow: hidden;
    animation: dc-rise var(--slow) var(--ease) backwards;
    transition: border-color var(--med) var(--ease), transform var(--med) var(--ease), box-shadow var(--med) var(--ease);
}
.dcode-card:hover { border-color: var(--c-line-strong); transform: translateY(-2px); box-shadow: var(--sh-2); }
.dcode-card.new { border-style: dashed; background: transparent; }
.dcode-card.new:hover { border-color: var(--c-accent); background: var(--c-soft); }
.dcode-card-ico {
    font-size: 20px; color: var(--c-accent);
    width: var(--h-md); height: var(--h-md); margin-bottom: var(--s4);
    display: grid; place-items: center;
    background: var(--c-soft); border-radius: var(--r-sm);
}
.dcode-card-title {
    font-size: var(--t-lg); font-weight: 640; margin-bottom: var(--s1);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dcode-card-desc {
    font-size: var(--t-sm); color: var(--c-muted); line-height: var(--lh);
    margin-bottom: var(--s4);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: calc(var(--t-sm) * var(--lh) * 2);
}
.dcode-card-meta {
    display: flex; align-items: center; gap: var(--s2);
    font-size: var(--t-xs); color: var(--c-faint);
}
.dcode-card-fw { text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.dcode-card-menu {
    position: absolute; top: var(--s3); right: var(--s3);
    width: 24px; height: 24px; border-radius: var(--r-sm);
    display: grid; place-items: center; font-size: 17px;
    color: var(--c-faint); opacity: 0;
    transition: opacity var(--fast) var(--ease), background var(--fast) var(--ease);
}
.dcode-card:hover .dcode-card-menu { opacity: 1; }
.dcode-card-menu:hover { background: rgba(var(--c-ink), .1); color: var(--c-text); }

/* ══════════════════════════════════════════════════════════════════════════
   Legacy compose leftovers.

   The `.dcode-compose*` screen and its framework-pill row were replaced by the
   lobby above. `.dcode-pill` survives because the WORKSPACE still uses it (the
   engineering bar, the model row), and `.dcode-compose-go` is kept as an alias
   of `.dcode-go` so nothing that still renders the old markup loses its send
   button. Everything else was deleted rather than left to rot.
   ═════════════════════════════════════════════════════════════════════════ */
.dcode-pill {
    display: inline-flex; align-items: center; gap: var(--s1);
    height: var(--h-sm); padding: 0 var(--s3);
    border-radius: var(--r-full);
    background: var(--c-bg3); border: 1px solid var(--c-line);
    color: var(--c-muted); font-size: var(--t-sm); font-weight: 550;
    transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.dcode-pill .material-symbols-rounded { font-size: 15px; }
.dcode-pill:hover { background: var(--c-hover); color: var(--c-text); }
.dcode-pill.sel { background: var(--c-soft); border-color: var(--c-ring); color: var(--c-accent); }
.dcode-compose-go {
    width: var(--h-lg); height: var(--h-lg); flex: none;
    display: grid; place-items: center; border-radius: var(--r-full);
    background: var(--c-accent); color: #fff; box-shadow: var(--sh-1);
    transition: background var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.dcode-compose-go:hover { background: var(--c-accent-strong); }
.dcode-compose-go:active { transform: scale(.93); }
.dcode-compose-go:disabled { opacity: .6; }
/* `.dcode-suggest-row` and `.dcode-suggest` are gone: the four permanent example
   chips under the old composer became a popover on the lobby's `+` pill, so the
   examples are available without four lines of grey text competing with the
   question above them. */

/* ══════════════════════════════════════════════════════════════════════════
   WORKSPACE SHELL
   ═════════════════════════════════════════════════════════════════════════ */
.dcode-work { flex: 1; display: flex; min-height: 0; min-width: 0; }

/* ── splitters ────────────────────────────────────────────────────────────
   A 5px hit area with a 1px visual line: comfortable to grab without looking
   like a chunky divider. The line brightens on hover so the affordance is
   discoverable, and the whole handle latches to the accent while dragging. */
.dcode-split { flex: none; position: relative; background: var(--c-line-soft); z-index: 2; }
.dcode-split.v { width: 1px; cursor: col-resize; }
.dcode-split.h { height: 1px; cursor: row-resize; }
.dcode-split::after {
    content: ''; position: absolute; z-index: 1;
    background: transparent;
    transition: background var(--fast) var(--ease);
}
.dcode-split.v::after { inset: 0 -3px; }
.dcode-split.h::after { inset: -3px 0; }
.dcode-split:hover::after, .dcode-split.dragging::after { background: var(--c-ring); }
.dcode-split.dragging { background: var(--c-accent); }

/* ── focus mode: the chat collapses away, the editor takes everything ───── */
.dcode.focus .dcode-chat,
.dcode.focus #dcode-split-chat { display: none; }
.dcode-work.no-explorer .dcode-explorer,
.dcode-work.no-explorer #dcode-split-exp { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   CHAT COLUMN
   ═════════════════════════════════════════════════════════════════════════ */
.dcode-chat {
    flex: none; display: flex; flex-direction: column;
    min-width: 300px; background: var(--c-bg);
    border-right: 1px solid var(--c-line); min-height: 0;
}
.dcode-chat-head {
    height: var(--tabs-h); flex: none;
    display: flex; align-items: center; gap: var(--s2);
    padding: 0 var(--s2) 0 var(--s3);
    border-bottom: 1px solid var(--c-line);
}
.dcode-sess {
    display: flex; align-items: center; gap: var(--s2);
    height: var(--h-sm); padding: 0 var(--s2);
    border-radius: var(--r-sm); color: var(--c-muted);
    font-size: var(--t-sm); font-weight: 600; max-width: 26ch;
    transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.dcode-sess:hover { background: rgba(var(--c-ink), .06); color: var(--c-text); }
.dcode-sess .material-symbols-rounded { font-size: 16px; }
.dcode-sess .caret { font-size: 15px; opacity: .7; }
.dcode-sess-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dcode-chat-body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: var(--s4) var(--s4) var(--s6);
    display: flex; flex-direction: column; gap: var(--s4);
    scroll-behavior: smooth;
}
.dcode-welcome { margin: auto 0; text-align: center; padding: var(--s6) var(--s4); animation: dc-rise var(--slow) var(--ease); }
.dcode-welcome .material-symbols-rounded {
    font-size: 26px; color: var(--c-accent);
    width: 46px; height: 46px; margin: 0 auto var(--s4);
    display: grid; place-items: center; background: var(--c-soft); border-radius: var(--r-lg);
}
.dcode-welcome h3 { margin: 0 0 var(--s2); font-size: var(--t-lg); font-weight: 640; }
.dcode-welcome p { margin: 0; color: var(--c-muted); font-size: var(--t-sm); line-height: var(--lh-loose); }

/* ── messages ─────────────────────────────────────────────────────────────
   User turns are right-aligned bubbles; agent turns are a full-width column so
   plans, tool trails and diffs can use the whole width. */
.dcode-msg { display: flex; flex-direction: column; gap: var(--s2); animation: dc-rise var(--med) var(--ease); }
.dcode-msg.user { align-items: flex-end; }
.dcode-msg.user .dcode-bubble {
    background: var(--c-soft); border: 1px solid var(--c-ring);
    max-width: 88%; border-bottom-right-radius: var(--r-sm);
}
.dcode-bubble {
    padding: var(--s3) var(--s4); border-radius: var(--r-lg);
    font-size: var(--t-md); line-height: var(--lh-loose);
    word-break: break-word; overflow-wrap: anywhere;
}
.dcode-msg.ai .dcode-bubble { padding: 0; }
.dcode-bubble p { margin: 0 0 var(--s3); }
.dcode-bubble p:last-child { margin-bottom: 0; }
.dcode-bubble ul, .dcode-bubble ol { margin: 0 0 var(--s3); padding-left: var(--s5); }
.dcode-bubble li { margin-bottom: var(--s1); }
.dcode-bubble strong { font-weight: 650; }
.dcode-bubble code {
    font-family: var(--c-mono); font-size: .92em;
    background: rgba(var(--c-ink), .07); padding: 1px 5px; border-radius: var(--r-sm);
}
.dcode-bubble pre {
    background: var(--c-bg3); border: 1px solid var(--c-line);
    border-radius: var(--r); padding: var(--s3); overflow-x: auto; margin: 0 0 var(--s3);
}
.dcode-bubble pre code { background: none; padding: 0; }
.dcode-bubble h1, .dcode-bubble h2, .dcode-bubble h3 { margin: var(--s4) 0 var(--s2); font-size: var(--t-base); font-weight: 650; }
.dcode-bubble a { color: var(--c-accent); }
.dcode-msg-atts { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s2); }

.dcode-log { display: flex; flex-direction: column; gap: var(--s2); }

/* ── the live "what is it doing right now" row ────────────────────────────── */
.dcode-live {
    display: flex; align-items: center; gap: var(--s2);
    font-size: var(--t-sm); color: var(--c-accent); padding: var(--s1) 0;
}
.dcode-live-dots { display: inline-flex; gap: 3px; flex: none; }
.dcode-live-dots i {
    width: 4px; height: 4px; border-radius: 50%; background: currentColor;
    animation: dc-pulse 1.1s var(--ease) infinite;
}
.dcode-live-dots i:nth-child(2) { animation-delay: .16s; }
.dcode-live-dots i:nth-child(3) { animation-delay: .32s; }
.dcode-live-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── thinking ─────────────────────────────────────────────────────────────
   Reasoning is de-emphasised on purpose: it is context, not the answer. */
.dcode-think {
    display: flex; gap: var(--s2); align-items: flex-start;
    font-size: var(--t-sm); color: var(--c-faint);
    font-style: italic; line-height: var(--lh);
    padding: var(--s2) var(--s3);
    border-left: 2px solid var(--c-line);
    background: rgba(var(--c-ink), .02);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    max-height: 12em; overflow: hidden auto;
}
.dcode-think .material-symbols-rounded { font-size: 15px; margin-top: 1px; opacity: .8; }
.dcode-think.streaming > span:last-child::after {
    content: '▌'; margin-left: 1px; animation: dc-caret 1s step-end infinite;
}

/* ══════════════════════════════════════════════════════════════════════════
   LIVE ACTIVITY STREAM
   ─────────────────────────────────────────────────────────────────────────
   The agent's work is grouped like Antigravity's: a collapsible header that
   summarises the burst ("Explored 4 files, 9 searches") with the individual
   steps underneath. Cheap reads collapse into the group so the transcript stays
   readable; anything with a real result stays visible.
   ═════════════════════════════════════════════════════════════════════════ */
.dcode-act {
    border: 1px solid var(--c-line-soft); border-radius: var(--r);
    background: rgba(var(--c-ink), .018);
    overflow: hidden; animation: dc-rise var(--med) var(--ease);
}
.dcode-act-head {
    display: flex; align-items: center; gap: var(--s2);
    width: 100%; padding: var(--s2) var(--s3);
    font-size: var(--t-sm); font-weight: 600; color: var(--c-muted);
    text-align: left;
    transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.dcode-act-head:hover { background: rgba(var(--c-ink), .04); color: var(--c-text); }
.dcode-act-head .caret {
    font-size: 16px; opacity: .6; flex: none;
    transition: transform var(--med) var(--ease);
}
.dcode-act.open .dcode-act-head .caret { transform: rotate(90deg); }
.dcode-act-head .dcode-act-sum { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcode-act-body {
    display: none; flex-direction: column;
    padding: var(--s1) var(--s3) var(--s3) var(--s5);
    border-top: 1px solid var(--c-line-soft);
}
.dcode-act.open .dcode-act-body { display: flex; }
.dcode-act.running .dcode-act-head { color: var(--c-accent); }

/* One executed step. */
.dcode-act-row {
    display: flex; align-items: center; gap: var(--s2);
    min-height: 24px; padding: 2px 0;
    font-size: var(--t-sm); color: var(--c-muted);
    animation: dc-slide var(--fast) var(--ease);
}
.dcode-act-row .dcode-act-ico { font-size: 15px; opacity: .75; flex: none; }
.dcode-act-row .dcode-act-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcode-act-row .dcode-act-label code {
    font-family: var(--c-mono); font-size: .9em; color: var(--c-text);
    background: rgba(var(--c-ink), .06); padding: 1px 4px; border-radius: 4px;
}
.dcode-act-meta { font-size: var(--t-xs); color: var(--c-faint); flex: none; font-variant-numeric: tabular-nums; }
.dcode-act-row.clickable { cursor: pointer; border-radius: var(--r-sm); padding-left: var(--s1); margin-left: calc(var(--s1) * -1); }
.dcode-act-row.clickable:hover { background: rgba(var(--c-ink), .05); color: var(--c-text); }
.dcode-act-row.done .dcode-act-ico { color: var(--c-add); opacity: 1; }
.dcode-act-row.err { color: var(--c-del); }
.dcode-act-row.err .dcode-act-ico { color: var(--c-del); opacity: 1; }
.dcode-act-row.cached .dcode-act-meta { color: var(--c-info); }
/* A step still in flight gets a spinner in place of its icon. */
.dcode-act-spin {
    width: 12px; height: 12px; flex: none;
    border: 1.5px solid var(--c-line-strong); border-top-color: var(--c-accent);
    border-radius: 50%; animation: dc-spin .7s linear infinite;
}

/* Legacy single tool row (kept: the transcript replay still emits these). */
.dcode-tool {
    display: flex; align-items: center; gap: var(--s2);
    font-size: var(--t-sm); color: var(--c-muted);
    padding: var(--s1) 0; line-height: var(--lh-tight);
}
.dcode-tool .material-symbols-rounded { font-size: 15px; opacity: .75; }
.dcode-tool code {
    font-family: var(--c-mono); font-size: .9em; color: var(--c-text);
    background: rgba(var(--c-ink), .06); padding: 1px 4px; border-radius: 4px;
}
.dcode-tool.click { cursor: pointer; border-radius: var(--r-sm); }
.dcode-tool.click:hover { color: var(--c-text); background: rgba(var(--c-ink), .05); }
.dcode-tool.err { color: var(--c-del); }
.dcode-tool.ok { color: var(--c-add); }

/* ── live code streaming card ─────────────────────────────────────────────
   Shows the file body arriving character by character. Capped in height with
   the tail pinned, so it reads like a build log rather than pushing the whole
   transcript down the page. */
.dcode-stream {
    border: 1px solid var(--c-ring); border-radius: var(--r);
    background: var(--c-bg3); overflow: hidden;
    animation: dc-rise var(--med) var(--ease);
}
.dcode-stream-head {
    display: flex; align-items: center; gap: var(--s2);
    padding: var(--s2) var(--s3);
    background: var(--c-soft);
    font-size: var(--t-sm); font-weight: 600;
}
.dcode-stream-head .material-symbols-rounded { font-size: 15px; color: var(--c-accent); }
.dcode-stream-path { font-family: var(--c-mono); font-size: var(--t-xs); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcode-stream-n { font-size: var(--t-xs); color: var(--c-muted); font-variant-numeric: tabular-nums; }
.dcode-stream-body {
    margin: 0; padding: var(--s3);
    max-height: 220px; overflow: auto;
    font-family: var(--c-mono); font-size: var(--t-xs); line-height: 1.55;
    color: var(--c-text); white-space: pre; tab-size: 2;
}
.dcode-stream.live .dcode-stream-body::after {
    content: '▌'; color: var(--c-accent); animation: dc-caret 1s step-end infinite;
}
/* A thin indeterminate bar while the body is still arriving. */
.dcode-stream.live .dcode-stream-head::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--c-accent), transparent);
    animation: dc-bar 1.1s linear infinite;
}
.dcode-stream-head { position: relative; }

/* ── context / token meter ────────────────────────────────────────────────── */
.dcode-ctxbar {
    display: flex; align-items: center; gap: var(--s2);
    font-size: var(--t-xs); color: var(--c-faint);
}
.dcode-ctxbar .track {
    flex: 1; height: 3px; border-radius: var(--r-full);
    background: rgba(var(--c-ink), .08); overflow: hidden;
}
.dcode-ctxbar .fill {
    height: 100%; background: var(--c-accent); border-radius: inherit;
    transition: width var(--slow) var(--ease), background var(--med) var(--ease);
}
.dcode-ctxbar.warn .fill { background: var(--c-warn); }
.dcode-ctxbar.bad .fill { background: var(--c-del); }

/* ── memory + compaction notices ─────────────────────────────────────────── */
.dcode-memchips { display: flex; flex-wrap: wrap; gap: var(--s1); }
.dcode-memchip {
    display: inline-flex; align-items: center; gap: var(--s1);
    max-width: 100%; padding: 2px var(--s2);
    border-radius: var(--r-full);
    background: var(--c-info-soft); color: var(--c-info);
    font-size: var(--t-xs);
}
.dcode-memchip .material-symbols-rounded { font-size: 13px; }
.dcode-memchip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcode-compact {
    display: flex; align-items: center; gap: var(--s2);
    padding: var(--s2) var(--s3); border-radius: var(--r-sm);
    background: var(--c-info-soft); color: var(--c-info);
    font-size: var(--t-xs);
}
.dcode-compact .material-symbols-rounded { font-size: 14px; }

/* ── terminal output card in the transcript ──────────────────────────────── */
.dcode-term-card {
    border: 1px solid var(--c-line); border-radius: var(--r);
    background: var(--c-bg3); overflow: hidden;
}
.dcode-term-card .head {
    display: flex; align-items: center; gap: var(--s2);
    padding: var(--s2) var(--s3); background: rgba(var(--c-ink), .03);
    font-family: var(--c-mono); font-size: var(--t-xs);
}
.dcode-term-card .head .material-symbols-rounded { font-size: 14px; color: var(--c-muted); }
.dcode-term-card .head .code { flex: 1; color: var(--c-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcode-term-card .head .exit { color: var(--c-add); font-weight: 600; }
.dcode-term-card .head .exit.bad { color: var(--c-del); }
.dcode-term-card pre {
    margin: 0; padding: var(--s3); max-height: 200px; overflow: auto;
    font-family: var(--c-mono); font-size: var(--t-xs); line-height: 1.5;
    color: var(--c-muted); white-space: pre-wrap; word-break: break-word;
}

/* ── plan + todos ─────────────────────────────────────────────────────────── */
.dcode-plan {
    border: 1px solid var(--c-line); border-radius: var(--r);
    background: var(--c-bg2); overflow: hidden;
    animation: dc-rise var(--med) var(--ease);
}
.dcode-plan-head {
    display: flex; align-items: center; gap: var(--s2);
    padding: var(--s3); background: rgba(var(--c-ink), .03);
    font-size: var(--t-md); font-weight: 640;
}
.dcode-plan-head .material-symbols-rounded { font-size: 16px; color: var(--c-accent); }
.dcode-plan-prog {
    margin-left: auto; font-size: var(--t-xs); color: var(--c-muted);
    font-variant-numeric: tabular-nums; font-weight: 600;
}
.dcode-plan ol { margin: 0; padding: var(--s3) var(--s3) var(--s3) var(--s6); font-size: var(--t-sm); color: var(--c-muted); }
.dcode-plan ol li { margin-bottom: var(--s1); }
.dcode-plan.static { opacity: .82; }
.dcode-todos { display: flex; flex-direction: column; padding: var(--s1) var(--s3) var(--s3); gap: 2px; }
.dcode-todo {
    display: flex; align-items: flex-start; gap: var(--s2);
    font-size: var(--t-sm); color: var(--c-muted);
    padding: 3px 0; transition: color var(--med) var(--ease);
}
.dcode-todo .chk {
    width: 15px; height: 15px; flex: none; margin-top: 1px;
    border: 1.5px solid var(--c-line-strong); border-radius: 4px;
    display: grid; place-items: center;
    transition: all var(--med) var(--ease);
}
.dcode-todo .chk .material-symbols-rounded { font-size: 12px; color: #fff; animation: dc-check var(--med) var(--ease); }
.dcode-todo .chk .spin {
    width: 8px; height: 8px; border: 1.5px solid transparent;
    border-top-color: var(--c-accent); border-radius: 50%;
    animation: dc-spin .7s linear infinite;
}
.dcode-todo.done { color: var(--c-faint); }
.dcode-todo.done .txt { text-decoration: line-through; }
.dcode-todo.done .chk { background: var(--c-add); border-color: var(--c-add); }
.dcode-todo.active { color: var(--c-text); font-weight: 550; }
.dcode-todo.active .chk { border-color: var(--c-accent); }

/* ── blocked write notice ─────────────────────────────────────────────────── */
.dcode-reject {
    border: 1px solid rgba(248, 81, 73, .3); border-radius: var(--r);
    background: var(--c-del-soft); padding: var(--s3);
}
.dcode-reject-head {
    display: flex; align-items: center; gap: var(--s2);
    font-size: var(--t-sm); font-weight: 640; color: var(--c-del); margin-bottom: var(--s2);
}
.dcode-reject-head .material-symbols-rounded { font-size: 16px; }
.dcode-reject p { margin: 0 0 var(--s2); font-size: var(--t-sm); line-height: var(--lh); }
.dcode-reject code { font-family: var(--c-mono); font-size: .9em; }
.dcode-reject small { color: var(--c-muted); font-size: var(--t-xs); }

/* ══════════════════════════════════════════════════════════════════════════
   CHANGE CARDS + DIFF
   ═════════════════════════════════════════════════════════════════════════ */
.dcode-change {
    border: 1px solid var(--c-line); border-radius: var(--r);
    background: var(--c-bg2); overflow: hidden;
    animation: dc-rise var(--med) var(--ease);
    transition: border-color var(--med) var(--ease), opacity var(--med) var(--ease);
}
.dcode-change.resolved { opacity: .72; }
.dcode-change.resolved:hover { opacity: 1; }
.dcode-change-head {
    display: flex; align-items: center; gap: var(--s2);
    padding: var(--s2) var(--s3); cursor: pointer;
    transition: background var(--fast) var(--ease);
}
.dcode-change-head:hover { background: rgba(var(--c-ink), .04); }
.dcode-op {
    font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    padding: 2px var(--s2); border-radius: 4px; flex: none;
}
.dcode-op.create { background: var(--c-add-soft); color: var(--c-add); }
.dcode-op.update { background: var(--c-warn-soft); color: var(--c-warn); }
.dcode-op.delete { background: var(--c-del-soft); color: var(--c-del); }
.dcode-op.rename { background: var(--c-info-soft); color: var(--c-info); }
.dcode-change-path {
    flex: 1; font-family: var(--c-mono); font-size: var(--t-xs);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    cursor: pointer;
}
.dcode-change-path:hover { color: var(--c-accent); text-decoration: underline; }
.dcode-dstat { display: inline-flex; gap: var(--s1); font-size: var(--t-xs); font-variant-numeric: tabular-nums; flex: none; }
.dcode-dstat .add { color: var(--c-add); }
.dcode-dstat .del { color: var(--c-del); }
.dcode-change-toggle {
    width: 22px; height: 22px; display: grid; place-items: center;
    border-radius: var(--r-sm); color: var(--c-faint); flex: none;
    transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.dcode-change-toggle:hover { background: rgba(var(--c-ink), .08); color: var(--c-text); }
.dcode-change-toggle .material-symbols-rounded { font-size: 16px; }

.dcode-diff { display: none; border-top: 1px solid var(--c-line); max-height: 400px; overflow: auto; }
.dcode-change.open .dcode-diff { display: block; }
.dcode-change-foot {
    display: none; align-items: center; gap: var(--s2);
    padding: var(--s2) var(--s3); border-top: 1px solid var(--c-line);
    background: rgba(var(--c-ink), .02);
}
.dcode-change.open .dcode-change-foot { display: flex; }
.dcode-hn { font-size: var(--t-xs); color: var(--c-muted); margin-right: auto; }
.dcode-change-foot button {
    display: inline-flex; align-items: center; gap: var(--s1);
    height: var(--h-sm); padding: 0 var(--s3);
    border-radius: var(--r-sm); font-size: var(--t-sm); font-weight: 600;
    background: rgba(var(--c-ink), .05); color: var(--c-text);
    transition: background var(--fast) var(--ease);
}
.dcode-change-foot button .material-symbols-rounded { font-size: 15px; }
.dcode-change-foot button:hover { background: rgba(var(--c-ink), .1); }
.dcode-change-foot .revert:hover { background: var(--c-del-soft); color: var(--c-del); }
.dcode-change-foot .keep:hover { background: var(--c-add-soft); color: var(--c-add); }

/* ── restore point (whole-turn time travel) ─────────────────────────────────
   Sits below a turn's change cards. Deliberately quiet until hovered so it
   never competes with the per-file Keep/Revert, but always reachable. */
.dcode-restore {
    display: flex; align-items: center; gap: var(--s2);
    margin-top: var(--s1); padding: var(--s2) var(--s3);
    border: 1px dashed var(--c-line-strong); border-radius: var(--r);
    background: rgba(var(--c-ink), .015);
    font-size: var(--t-xs); color: var(--c-faint);
    transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.dcode-restore:hover { border-color: var(--c-ring); background: var(--c-soft); }
.dcode-restore.done { opacity: .55; border-style: solid; }
.dcode-restore-ico { font-size: 15px; color: var(--c-muted); flex: none; }
.dcode-restore-copy { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcode-restore-btn {
    display: inline-flex; align-items: center; gap: var(--s1); flex: none;
    height: var(--h-sm); padding: 0 var(--s3);
    border: 1px solid var(--c-line-strong); border-radius: var(--r-sm);
    background: var(--c-bg4); color: var(--c-text);
    font-size: var(--t-xs); font-weight: 600;
    transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.dcode-restore-btn:hover { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.dcode-restore-btn:disabled { opacity: .6; cursor: default; }
.dcode-restore-btn .material-symbols-rounded { font-size: 15px; }
.dcode-restore-btn .dcode-spinner.sm { width: 13px; height: 13px; }
.dcode-change-foot button:disabled { opacity: .45; cursor: not-allowed; }

/* diff rows: a fixed monospace grid so gutters line up exactly */
.dcode-dl {
    display: grid; grid-template-columns: 44px 44px 1fr;
    font-family: var(--c-mono); font-size: var(--t-xs); line-height: 1.6;
}
.dcode-dl > span { padding: 0 var(--s2); white-space: pre; overflow: hidden; }
.dcode-dl .ln { color: var(--c-faint); text-align: right; user-select: none; font-variant-numeric: tabular-nums; }
.dcode-dl .tx { white-space: pre-wrap; word-break: break-word; }
.dcode-dl.add { background: var(--c-add-soft); }
.dcode-dl.add .tx { color: var(--c-add); }
.dcode-dl.del { background: var(--c-del-soft); }
.dcode-dl.del .tx { color: var(--c-del); }
.dcode-dl.ctx .tx { color: var(--c-muted); }
.dcode-dgap {
    padding: 2px var(--s4); font-family: var(--c-mono); font-size: 10px;
    color: var(--c-faint); background: rgba(var(--c-ink), .02);
    border-top: 1px solid var(--c-line-soft); border-bottom: 1px solid var(--c-line-soft);
}
.dcode-hunk { border-bottom: 1px solid var(--c-line-soft); }
.dcode-hunk:last-child { border-bottom: 0; }
.dcode-hunk.reverted { opacity: .4; }
/* A hunk the user explicitly kept: acknowledged, then de-emphasised. */
.dcode-hunk.kept { opacity: .6; }
.dcode-hunk.kept .dcode-hunk-bar { color: var(--c-add); }
.dcode-hunk-bar .hl { font-family: var(--c-mono); font-size: 10px; color: var(--c-faint); }
.dcode-hunk-bar {
    display: flex; align-items: center; gap: var(--s2);
    padding: var(--s1) var(--s3); background: rgba(var(--c-ink), .02);
    font-size: var(--t-xs); color: var(--c-muted);
}
.dcode-hunk-bar .dcode-spacer { min-width: 0; }
.dcode-hunk-bar button {
    display: inline-flex; align-items: center; gap: 3px;
    height: 22px; padding: 0 var(--s2); border-radius: var(--r-sm);
    font-size: var(--t-xs); font-weight: 600; color: var(--c-muted);
    transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.dcode-hunk-bar button .material-symbols-rounded { font-size: 13px; }
.dcode-hunk-bar button:hover { background: rgba(var(--c-ink), .08); color: var(--c-text); }
.dcode-hunk-bar .hrev:hover { background: var(--c-del-soft); color: var(--c-del); }
.dcode-hunk-bar .hkeep:hover { background: var(--c-add-soft); color: var(--c-add); }
.dcode-diff-note { padding: var(--s3); font-size: var(--t-xs); color: var(--c-muted); text-align: center; }
.dcode-hchange { animation: dc-flash var(--slow) var(--ease); }

/* ── composer ─────────────────────────────────────────────────────────────── */
.dcode-chat-foot { flex: none; padding: var(--s3); border-top: 1px solid var(--c-line); background: var(--c-bg); }
.dcode-attach-row { display: flex; flex-wrap: wrap; gap: var(--s1); margin-bottom: var(--s2); }
.dcode-attach-row[hidden] { display: none; }
.dcode-chip-file {
    display: inline-flex; align-items: center; gap: var(--s1);
    max-width: 190px; padding: 3px var(--s2);
    border-radius: var(--r-sm); background: rgba(var(--c-ink), .06);
    font-size: var(--t-xs); color: var(--c-muted);
}
.dcode-chip-file .material-symbols-rounded { font-size: 13px; }
.dcode-chip-file button { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 4px; color: var(--c-faint); }
.dcode-chip-file button:hover { background: rgba(var(--c-ink), .12); color: var(--c-text); }
.dcode-chip-file button .material-symbols-rounded { font-size: 12px; }
.dcode-chip-file.sm { max-width: 150px; }

.dcode-inbar {
    background: var(--c-bg2); border: 1px solid var(--c-line);
    border-radius: var(--r-lg); padding: var(--s3) var(--s4) var(--s2);
    transition: border-color var(--med) var(--ease), box-shadow var(--med) var(--ease);
}
.dcode-inbar:focus-within { border-color: var(--c-ring); box-shadow: 0 0 0 3px var(--c-soft); }
.dcode-chat-input {
    width: 100%; max-height: 170px; min-height: 24px;
    background: none; border: 0; resize: none; outline: none;
    font-size: var(--t-md); line-height: var(--lh-loose); color: var(--c-text);
    padding: var(--s2) var(--s1);
}
.dcode-chat-input::placeholder { color: var(--c-faint); }
.dcode-inbar-row { display: flex; align-items: center; gap: var(--s1); margin-top: var(--s2); }
.dcode-model {
    display: inline-flex; align-items: center; gap: var(--s1);
    height: 24px; padding: 0 var(--s2); border-radius: var(--r-sm);
    background: rgba(var(--c-ink), .05); color: var(--c-muted);
    font-size: var(--t-xs); font-weight: 600; max-width: 20ch;
    transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.dcode-model .material-symbols-rounded { font-size: 14px; }
.dcode-model:hover { background: rgba(var(--c-ink), .09); color: var(--c-text); }
.dcode-model span:not(.material-symbols-rounded) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcode-mode {
    display: inline-flex; align-items: center; gap: var(--s1);
    height: 24px; padding: 0 var(--s2); border-radius: var(--r-sm);
    background: rgba(var(--c-ink), .05); color: var(--c-muted);
    font-size: var(--t-xs); font-weight: 600;
    transition: all var(--fast) var(--ease);
}
.dcode-mode .material-symbols-rounded { font-size: 14px; }
.dcode-mode:hover { background: rgba(var(--c-ink), .09); }
.dcode-mode.on { background: var(--c-soft); color: var(--c-accent); }
.dcode-send {
    width: var(--h-md); height: var(--h-md); margin-left: auto; flex: none;
    display: grid; place-items: center; border-radius: var(--r-full);
    background: var(--c-accent); color: #fff;
    transition: background var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.dcode-send .material-symbols-rounded { font-size: 18px; }
.dcode-send:hover { background: var(--c-accent-strong); }
.dcode-send:active { transform: scale(.92); }
.dcode-send.stop { background: var(--c-del); }
.dcode-chat.busy .dcode-inbar { border-color: var(--c-ring); }

/* ══════════════════════════════════════════════════════════════════════════
   CANVAS (tabs · breadcrumb · explorer ║ editor · panel)
   ═════════════════════════════════════════════════════════════════════════ */
.dcode-canvas { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
.dcode-canvas-top {
    height: var(--tabs-h); flex: none;
    display: flex; align-items: center; gap: var(--s1);
    padding: 0 var(--s2); background: var(--c-bg2);
    border-bottom: 1px solid var(--c-line);
}
.dcode-tabs { flex: 1; display: flex; align-items: stretch; gap: 2px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.dcode-tabs::-webkit-scrollbar { height: 0; }
.dcode-canvas-actions { display: flex; align-items: center; gap: 1px; flex: none; padding-left: var(--s1); }

.dcode-tab {
    display: inline-flex; align-items: center; gap: var(--s2);
    height: 28px; padding: 0 var(--s2) 0 var(--s3);
    border-radius: var(--r-sm); flex: none; max-width: 190px;
    font-size: var(--t-sm); color: var(--c-muted); cursor: pointer;
    position: relative;
    transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.dcode-tab:hover { background: rgba(var(--c-ink), .05); color: var(--c-text); }
.dcode-tab.active { background: var(--c-bg); color: var(--c-text); }
/* The active tab is marked with an accent underline rather than a heavy fill. */
.dcode-tab.active::after {
    content: ''; position: absolute; left: var(--s2); right: var(--s2); bottom: 0;
    height: 2px; border-radius: 2px 2px 0 0; background: var(--c-accent);
}
.dcode-tab .tname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcode-tab.dirty .tname { font-style: italic; }
.dcode-tab.dirty .tname::after { content: ' •'; color: var(--c-warn); font-style: normal; }
.dcode-tab.bad .tname { color: var(--c-del); }
.dcode-tab .tclose {
    width: 17px; height: 17px; display: grid; place-items: center;
    border-radius: 4px; color: var(--c-faint); flex: none; opacity: 0;
    transition: opacity var(--fast) var(--ease), background var(--fast) var(--ease);
}
.dcode-tab:hover .tclose, .dcode-tab.active .tclose { opacity: 1; }
.dcode-tab .tclose:hover { background: rgba(var(--c-ink), .14); color: var(--c-text); }
.dcode-tab .tclose .material-symbols-rounded { font-size: 13px; }

.dcode-breadcrumb {
    height: var(--crumb-h); flex: none;
    display: flex; align-items: center; gap: var(--s1);
    padding: 0 var(--s3); background: var(--c-bg);
    border-bottom: 1px solid var(--c-line-soft);
    font-size: var(--t-xs); color: var(--c-muted); overflow: hidden;
}
.dcode-breadcrumb.empty { display: none; }
.dcode-breadcrumb .cb { white-space: nowrap; }
.dcode-breadcrumb .cb.proj { color: var(--c-accent); font-weight: 600; }
.dcode-breadcrumb .cb.last { color: var(--c-text); }
.dcode-breadcrumb .sep { font-size: 13px; opacity: .5; flex: none; }

.dcode-canvas-main { flex: 1 1 auto; display: flex; min-height: 0; min-width: 0; }

/* ── explorer ─────────────────────────────────────────────────────────────── */
.dcode-explorer {
    flex: none; display: flex; flex-direction: column;
    min-width: 150px; background: var(--c-bg);
    border-right: 1px solid var(--c-line-soft); min-height: 0;
}
.dcode-exp-head {
    height: 30px; flex: none;
    display: flex; align-items: center; gap: var(--s1);
    padding: 0 var(--s1) 0 var(--s3);
    font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--c-faint);
}
.dcode-exp-actions { margin-left: auto; display: flex; gap: 0; opacity: 0; transition: opacity var(--fast) var(--ease); }
.dcode-explorer:hover .dcode-exp-actions, .dcode-exp-actions:focus-within { opacity: 1; }
.dcode-tree { flex: 1 1 auto; overflow: auto; padding-bottom: var(--s4); }
.dcode-tree-empty { padding: var(--s4) var(--s3); font-size: var(--t-sm); color: var(--c-faint); line-height: var(--lh); }
.dcode-tree-empty.err { color: var(--c-del); }

.dcode-node > .dcode-children { display: none; }
.dcode-node.open > .dcode-children { display: block; }
.dcode-row {
    display: flex; align-items: center; gap: var(--s2);
    height: 24px; padding-right: var(--s2);
    font-size: var(--t-sm); color: var(--c-muted); cursor: pointer;
    position: relative; white-space: nowrap;
    transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.dcode-row:hover { background: rgba(var(--c-ink), .05); color: var(--c-text); }
.dcode-row.active { background: var(--c-soft); color: var(--c-text); }
.dcode-row.active::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--c-accent);
}
.dcode-row .dcode-fname { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.dcode-row .dcode-fname.mono { font-family: var(--c-mono); font-size: var(--t-xs); }
.dcode-row.has-error .dcode-fname { color: var(--c-del); }
.dcode-row.has-warn .dcode-fname { color: var(--c-warn); }
.dcode-caret { display: grid; place-items: center; width: 14px; flex: none; }
.dcode-caret .material-symbols-rounded { font-size: 15px; transition: transform var(--fast) var(--ease); }
.dcode-node.open > .dcode-row .dcode-caret .material-symbols-rounded { transform: rotate(90deg); }
.dcode-row-acts { display: none; gap: 0; flex: none; }
.dcode-row:hover .dcode-row-acts { display: flex; }
.dcode-row-acts button {
    width: 20px; height: 20px; display: grid; place-items: center;
    border-radius: 4px; color: var(--c-faint);
}
.dcode-row-acts button:hover { background: rgba(var(--c-ink), .12); color: var(--c-text); }
.dcode-row-acts button .material-symbols-rounded { font-size: 14px; }
.dcode-dot { width: 5px; height: 5px; border-radius: 50%; flex: none; }
.dcode-row.dirty .dcode-dot { background: var(--c-warn); }
.dcode-row.sres { height: 22px; padding-left: var(--s6); }
.dcode-row.sres .ln { font-family: var(--c-mono); font-size: 10px; color: var(--c-faint); min-width: 26px; text-align: right; flex: none; }

/* File-type icon colours: a quiet, consistent language cue. */
.dcode-fico { font-size: 15px; flex: none; }
.fico.folder { color: #7d8590; }
.fico.html { color: #e34c26; }
.fico.css { color: #5b9bd5; }
.fico.js { color: #e8c34a; }
.fico.ts { color: #4b8bbe; }
.fico.json { color: #a0a8b4; }
.fico.md { color: #9aa4b2; }
.fico.py { color: #4fa86f; }
.fico.img { color: #b57edc; }

.dcode-searchbox { padding: var(--s2) var(--s3); }
.dcode-searchbox input, .dcode-searchin {
    width: 100%; height: var(--h-sm); padding: 0 var(--s3);
    background: var(--c-bg3); border: 1px solid var(--c-line);
    border-radius: var(--r-sm); outline: none;
    font-size: var(--t-sm); color: var(--c-text);
    transition: border-color var(--fast) var(--ease);
}
.dcode-searchbox input:focus { border-color: var(--c-ring); }
.dcode-search-sum { padding: var(--s1) var(--s3) var(--s2); font-size: var(--t-xs); color: var(--c-faint); }
.dcode-sgroup { margin-bottom: var(--s1); }

/* ── editor ───────────────────────────────────────────────────────────────── */
.dcode-editorwrap { flex: 1 1 auto; position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.dcode-editorhost { flex: 1 1 auto; position: relative; min-height: 0; }
.dcode-editor { position: absolute; inset: 0; }
.dcode-ed-loading {
    position: absolute; inset: 0; display: grid; place-items: center;
    background: var(--c-bg); color: var(--c-muted); font-size: var(--t-sm); z-index: 2;
}
.dcode-empty-ed {
    position: absolute; inset: 0; z-index: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s3);
    background: var(--c-bg); color: var(--c-faint); text-align: center; padding: var(--s6);
}
/* CRITICAL: an explicit `display` beats the UA `[hidden]{display:none}` rule,
   so the JS toggling `.hidden = true` on this overlay would otherwise leave it
   covering the editor. Restore the hide. */
.dcode-empty-ed[hidden] { display: none !important; }
.dcode-empty-ed .material-symbols-rounded { font-size: 34px; opacity: .35; }
.dcode-empty-ed h3 { margin: 0; font-size: var(--t-lg); font-weight: 600; color: var(--c-muted); }
.dcode-empty-ed p { margin: 0; font-size: var(--t-sm); max-width: 42ch; line-height: var(--lh-loose); }
.dcode-kbds { display: flex; gap: var(--s2); margin-top: var(--s2); font-size: var(--t-xs); }
.dcode-kbds kbd {
    font-family: var(--c-mono); font-size: 10px;
    padding: 2px var(--s2); border-radius: 4px;
    background: rgba(var(--c-ink), .07); border: 1px solid var(--c-line);
}
.dcode-ta-fallback {
    position: absolute; inset: 0; width: 100%; height: 100%;
    background: var(--c-bg3); border: 0; outline: none; resize: none;
    padding: var(--s3) var(--s4);
    font-family: var(--c-mono); font-size: var(--t-md); line-height: 1.6;
    color: var(--c-text); tab-size: 2;
}
/* Lines the AI just wrote, marked in the editor gutter + body. */
.dcode-ai-line { background: var(--c-add-soft) !important; }
.dcode-ai-gutter { background: var(--c-add) !important; width: 2px !important; margin-left: 2px; }

/* ── in-editor AI review bar ──────────────────────────────────────────────────
   WHAT WAS WRONG. This element carried no layout at all — only `flex: none`, a
   top border and a fill — while the JS puts an icon, a label and FOUR buttons
   inside it. So the children fell back to inline flow: the sparkle glyph
   collided with "1 AI change", the chevrons and the Keep label ran together
   with no gaps or hit targets, and because the bar was a flex ITEM of
   .dcode-editorwrap it also stole a full-width strip from the editor and drew a
   seam across the bottom of the file. That is exactly the "1 AI change ^ v
   ✓Keep" smear in the report.

   WHAT IT IS NOW. A floating pill, anchored bottom-left INSIDE the editor
   (.dcode-editorwrap is already position:relative), so it costs the editor no
   height, reads as an overlay on the file it describes, and lays its children
   out on the product's own control ladder. It sits bottom-LEFT rather than
   bottom-right so it never covers Monaco's own minimap or scrollbar. */
.dcode-review {
    position: absolute; z-index: 4;
    left: var(--s4); bottom: var(--s4);
    max-width: calc(100% - var(--s6));
    display: flex; align-items: center; gap: var(--s1);
    height: 34px; padding: 0 var(--s1) 0 var(--s3);
    border-radius: var(--r-full);
    border: 1px solid var(--c-line-strong);
    background: color-mix(in srgb, var(--c-bg2) 92%, transparent);
    backdrop-filter: blur(10px) saturate(140%);
    box-shadow: var(--sh-2);
    animation: dc-review-in var(--med) var(--spring);
}
@supports not (background: color-mix(in srgb, red, blue)) {
    .dcode-review { background: var(--c-bg2); }
}
@keyframes dc-review-in {
    from { opacity: 0; transform: translateY(6px) scale(.97); }
    to   { opacity: 1; transform: none; }
}
.dcode-review[hidden] { display: none; }
.dcode-review .ai {
    flex: none; font-size: 17px; color: var(--c-accent);
    /* Kept out of the text's way: the glyph used to butt straight into the
       label because nothing separated them. */
    margin-right: var(--s1);
}
.dcode-review .rv-txt {
    flex: 0 1 auto; min-width: 0;
    font-size: var(--t-sm); font-weight: 600; color: var(--c-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-right: var(--s2);
}
/* Hairline between "what changed" and "what to do about it", so the two halves
   of the pill are not one undifferentiated run of glyphs. */
.dcode-review .rv-div { width: 1px; height: 16px; flex: none; background: var(--c-line); margin: 0 var(--s1); }
.dcode-review button {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s1);
    flex: none; height: 26px; min-width: 26px; padding: 0 var(--s1);
    border-radius: var(--r-full); border: 0; background: transparent;
    color: var(--c-muted); font-size: var(--t-sm); font-weight: 600;
    cursor: pointer; white-space: nowrap;
    transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.dcode-review button .material-symbols-rounded { font-size: 17px; }
.dcode-review button:hover { background: rgba(var(--c-ink), .09); color: var(--c-text); }
.dcode-review button:active { transform: scale(.94); }
.dcode-review button:disabled { opacity: .45; cursor: not-allowed; }
/* The two decisions are colour-coded the same way the change cards' Keep /
   Revert pair already is, so the same action means the same thing wherever the
   user meets it. Both carry a label, never a bare glyph: an unlabelled ✗ beside
   an unlabelled ✓ is a coin toss. */
.dcode-review button[data-rv="keep"],
.dcode-review button[data-rv="reject"] { padding: 0 var(--s3) 0 var(--s2); }
.dcode-review button[data-rv="keep"] { color: var(--c-add); background: var(--c-add-soft); }
.dcode-review button[data-rv="keep"]:hover { background: color-mix(in srgb, var(--c-add) 24%, transparent); color: var(--c-add); }
.dcode-review button[data-rv="reject"] { color: var(--c-del); }
.dcode-review button[data-rv="reject"]:hover { background: var(--c-del-soft); color: var(--c-del); }
.dcode-review.is-busy { pointer-events: none; opacity: .7; }

/* Narrow editors drop the words and keep the glyphs, rather than letting the
   pill overrun the pane. Tooltips still name every action. */
@media (max-width: 1180px) {
    .dcode-review .rv-txt { display: none; }
    .dcode-review button[data-rv="keep"] span:not(.material-symbols-rounded),
    .dcode-review button[data-rv="reject"] span:not(.material-symbols-rounded) { display: none; }
    .dcode-review button[data-rv="keep"],
    .dcode-review button[data-rv="reject"] { padding: 0 var(--s1); }
}

/* ── bottom panel ─────────────────────────────────────────────────────────── */
.dcode-panel {
    flex: none; display: none; flex-direction: column;
    min-height: 120px; background: var(--c-bg2);
    border-top: 1px solid var(--c-line);
}
/* State classes here must match what delphos-code.js toggles: the canvas gets
   `panel` when the drawer is open, and the active tab/pane are marked `sel`. */
.dcode-canvas.panel .dcode-panel { display: flex; }
.dcode-canvas:not(.panel) #dcode-split-panel { display: none; }
.dcode-panel-head {
    height: 30px; flex: none;
    display: flex; align-items: center; gap: var(--s1);
    padding: 0 var(--s1) 0 var(--s2);
    border-bottom: 1px solid var(--c-line);
}
.dcode-ptab {
    display: inline-flex; align-items: center; gap: var(--s1);
    height: 22px; padding: 0 var(--s2); border-radius: var(--r-sm);
    font-size: var(--t-xs); font-weight: 650; letter-spacing: .02em;
    color: var(--c-faint); text-transform: uppercase;
    transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.dcode-ptab:hover { background: rgba(var(--c-ink), .06); color: var(--c-muted); }
.dcode-ptab.sel { color: var(--c-text); background: rgba(var(--c-ink), .07); }
.dcode-pcount {
    font-size: 10px; font-weight: 700; padding: 1px 5px;
    border-radius: var(--r-full); background: rgba(var(--c-ink), .1); color: var(--c-muted);
    font-variant-numeric: tabular-nums;
}
.dcode-pcount.bad { background: var(--c-del-soft); color: var(--c-del); }
.dcode-pcount.warn { background: var(--c-warn-soft); color: var(--c-warn); }
.dcode-panel-st { font-size: var(--t-xs); color: var(--c-faint); margin-right: var(--s1); }
.dcode-panel-body { flex: 1 1 auto; min-height: 0; position: relative; }
.dcode-pane { position: absolute; inset: 0; display: none; overflow: auto; }
.dcode-pane.sel { display: block; }

.dcode-pgroup { border-bottom: 1px solid var(--c-line-soft); }
.dcode-pfile {
    display: flex; align-items: center; gap: var(--s2);
    padding: var(--s2) var(--s3); background: rgba(var(--c-ink), .02);
    font-size: var(--t-xs);
}
.dcode-pfile-name { font-family: var(--c-mono); color: var(--c-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcode-pfile-n {
    margin-left: auto; font-size: 10px; font-weight: 700; padding: 1px 5px;
    border-radius: var(--r-full); background: rgba(var(--c-ink), .1); color: var(--c-muted); flex: none;
}
.dcode-prow {
    display: flex; align-items: flex-start; gap: var(--s2);
    width: 100%; padding: var(--s1) var(--s3) var(--s1) var(--s5);
    font-size: var(--t-sm); color: var(--c-muted); text-align: left;
    transition: background var(--fast) var(--ease);
}
.dcode-prow:hover { background: rgba(var(--c-ink), .05); color: var(--c-text); }
.dcode-prow .material-symbols-rounded { font-size: 14px; margin-top: 1px; flex: none; }
.dcode-prow .material-symbols-rounded.error { color: var(--c-del); }
.dcode-prow .material-symbols-rounded.warning { color: var(--c-warn); }
.dcode-prow-msg { flex: 1; line-height: var(--lh); }
.dcode-prow-pos { font-family: var(--c-mono); font-size: 10px; color: var(--c-faint); flex: none; }

/* output / terminal panes */
#dcode-pane-logs, .dcode-term-out {
    padding: var(--s2) var(--s3);
    font-family: var(--c-mono); font-size: var(--t-xs); line-height: 1.65;
    color: var(--c-muted);
}
#dcode-pane-logs .row, .dcode-term-out .row { white-space: pre-wrap; word-break: break-word; }
#dcode-pane-logs .row.ok, .dcode-term-out .row.ok { color: var(--c-add); }
#dcode-pane-logs .row.err, .dcode-term-out .row.err { color: var(--c-del); }
#dcode-pane-logs .row.muted, .dcode-term-out .row.muted { color: var(--c-faint); }
#dcode-pane-terminal { display: none; flex-direction: column; }
#dcode-pane-terminal.sel { display: flex; }
.dcode-term-out { flex: 1 1 auto; overflow: auto; min-height: 0; }
.dcode-term-in {
    flex: none; display: flex; align-items: center; gap: var(--s2);
    padding: var(--s3) var(--s4); border-top: 1px solid var(--c-line); position: relative;
}
.dcode-term-in .ps1 { font-family: var(--c-mono); color: var(--c-add); font-size: var(--t-sm); flex: none; }
.dcode-term-in input {
    flex: 1; background: none; border: 0; outline: none;
    font-family: var(--c-mono); font-size: var(--t-sm); color: var(--c-text);
}
.dcode-term-in .qk { display: flex; gap: var(--s1); flex: none; }
.dcode-term-in .qk button {
    height: 20px; padding: 0 var(--s2); border-radius: 4px;
    background: rgba(var(--c-ink), .06); color: var(--c-muted);
    font-family: var(--c-mono); font-size: 10px;
}
.dcode-term-in .qk button:hover { background: rgba(var(--c-ink), .12); color: var(--c-text); }

/* ── preview overlay ──────────────────────────────────────────────────────── */
.dcode-preview {
    position: absolute; inset: 0; z-index: 6;
    display: none; flex-direction: column; background: var(--c-bg);
}
.dcode-canvas.preview .dcode-preview { display: flex; animation: dc-in var(--med) var(--ease); }
.dcode-preview-bar {
    height: var(--tabs-h); flex: none;
    display: flex; align-items: center; gap: var(--s2);
    padding: 0 var(--s2) 0 var(--s3);
    background: var(--c-bg2); border-bottom: 1px solid var(--c-line);
}
.dcode-preview-url {
    flex: 1; font-family: var(--c-mono); font-size: var(--t-xs); color: var(--c-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dcode-preview iframe { flex: 1; width: 100%; border: 0; background: #fff; }

/* ══════════════════════════════════════════════════════════════════════════
   OVERLAYS: popover · context menu · modal · quick open
   ═════════════════════════════════════════════════════════════════════════ */
.dcode-pop {
    /* Absolute (not fixed): openPop() computes left/top RELATIVE to the IDE root,
       which is itself offset from the viewport by the app sidebar. As `fixed`
       those root-relative coordinates landed the popover far left, on top of the
       sidebar ("the session chat goes to left"). The IDE root is position:fixed,
       so it is the containing block and absolute coordinates resolve correctly. */
    position: absolute; z-index: var(--z-pop);
    min-width: 240px; max-width: 340px;
    background: var(--c-bg4); border: 1px solid var(--c-line-strong);
    border-radius: var(--r); box-shadow: var(--sh-3);
    overflow: hidden; animation: dc-pop var(--fast) var(--ease-out);
}
.dcode-pop-head {
    display: flex; align-items: center; gap: var(--s2);
    padding: var(--s2) var(--s2) var(--s2) var(--s3);
    border-bottom: 1px solid var(--c-line);
    font-size: var(--t-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--c-faint);
}
.dcode-pop-head .dcode-mini { margin-left: auto; }
.dcode-pop-search { padding: var(--s2); border-bottom: 1px solid var(--c-line); }
.dcode-pop-search input {
    width: 100%; height: var(--h-sm); padding: 0 var(--s3);
    background: var(--c-bg3); border: 1px solid var(--c-line);
    border-radius: var(--r-sm); outline: none; font-size: var(--t-sm); color: var(--c-text);
}
.dcode-pop-search input:focus { border-color: var(--c-ring); }
.dcode-pop-list { max-height: 320px; overflow: auto; padding: var(--s1); }
.dcode-pop-empty { padding: var(--s4); text-align: center; font-size: var(--t-sm); color: var(--c-faint); }

.dcode-model-opt {
    display: flex; align-items: center; gap: var(--s2);
    width: 100%; padding: var(--s2) var(--s2);
    border-radius: var(--r-sm); font-size: var(--t-sm); color: var(--c-muted);
    text-align: left; transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.dcode-model-opt:hover { background: rgba(var(--c-ink), .07); color: var(--c-text); }
.dcode-model-opt.sel { background: var(--c-soft); color: var(--c-text); }
.dcode-model-opt > .material-symbols-rounded { font-size: 16px; flex: none; }
.dcode-model-opt-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
.dcode-model-opt .chk { font-size: 15px; color: var(--c-accent); }
/* Capability badges. Every one of these is rendered from the model config —
   nothing here implies a model has a capability the backend did not report. */
.dcode-mb {
    font-size: 9.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    padding: 2px 5px; border-radius: 4px; flex: none;
    background: rgba(var(--c-ink), .08); color: var(--c-muted);
}
.dcode-mb.think { background: rgba(183, 121, 92, .18); color: var(--c-accent); }
.dcode-mb.vision { background: rgba(88, 166, 255, .16); color: var(--c-info); }
.dcode-mb.tools { background: rgba(63, 185, 80, .15); color: var(--c-add); }
.dcode-mb.pdf { background: rgba(210, 153, 34, .15); color: var(--c-warn); }
.dcode-mb.audio { background: rgba(181, 126, 220, .18); color: #b57edc; }
.dcode-mb.ctx { background: rgba(var(--c-ink), .06); color: var(--c-faint); font-family: var(--c-mono); }
.dcode-mb.more { background: rgba(var(--c-ink), .1); color: var(--c-faint); cursor: default; }
.dcode-model-caps { display: flex; flex-wrap: wrap; gap: 3px; max-width: 45%; justify-content: flex-end; }
.dcode-model-sub {
    display: block; font-size: var(--t-xs); color: var(--c-faint);
    margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.dcode-sess-list { max-height: 320px; overflow: auto; padding: var(--s1); }
.dcode-sess-opt {
    display: flex; align-items: center; gap: var(--s2);
    width: 100%; padding: var(--s2); border-radius: var(--r-sm);
    font-size: var(--t-sm); color: var(--c-muted); text-align: left;
    transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.dcode-sess-opt:hover { background: rgba(var(--c-ink), .07); color: var(--c-text); }
.dcode-sess-opt.sel { background: var(--c-soft); color: var(--c-text); }
.dcode-sess-opt-copy { flex: 1; min-width: 0; }
.dcode-sess-opt-copy b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcode-sess-opt-copy small { color: var(--c-faint); font-size: var(--t-xs); }
.dcode-sess-menu { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 4px; color: var(--c-faint); flex: none; }
.dcode-sess-menu:hover { background: rgba(var(--c-ink), .12); color: var(--c-text); }
.dcode-sess-menu .material-symbols-rounded { font-size: 15px; }
.dcode-sess-add {
    display: flex; align-items: center; gap: var(--s2);
    width: 100%; padding: var(--s2); border-top: 1px solid var(--c-line);
    font-size: var(--t-sm); font-weight: 600; color: var(--c-accent);
}
.dcode-sess-add:hover { background: var(--c-soft); }

.dcode-ctx {
    position: fixed; z-index: var(--z-pop);
    min-width: 190px; padding: var(--s1);
    background: var(--c-bg4); border: 1px solid var(--c-line-strong);
    border-radius: var(--r); box-shadow: var(--sh-3);
    animation: dc-pop var(--fast) var(--ease-out);
}
.dcode-ctx button {
    display: flex; align-items: center; gap: var(--s2);
    width: 100%; height: var(--h-sm); padding: 0 var(--s2);
    border-radius: var(--r-sm); font-size: var(--t-sm); color: var(--c-muted); text-align: left;
    transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.dcode-ctx button .material-symbols-rounded { font-size: 16px; }
.dcode-ctx button:hover { background: rgba(var(--c-ink), .08); color: var(--c-text); }
.dcode-ctx button.danger { color: var(--c-del); }
.dcode-ctx button.danger:hover { background: var(--c-del-soft); }
.dcode-ctx-sep { height: 1px; margin: var(--s1) var(--s2); background: var(--c-line); }

.dcode-mask {
    position: fixed; inset: 0; z-index: var(--z-mask);
    display: grid; place-items: center; padding: var(--s6);
    background: rgba(0, 0, 0, .55); backdrop-filter: blur(3px);
    animation: dc-in var(--fast) var(--ease);
}
.dcode-modal {
    width: 100%; max-width: 440px;
    background: var(--c-bg2); border: 1px solid var(--c-line-strong);
    border-radius: var(--r-lg); box-shadow: var(--sh-3);
    overflow: hidden; animation: dc-pop var(--med) var(--ease-out);
}
.dcode-modal-head {
    display: flex; align-items: center; gap: var(--s2);
    padding: var(--s4); border-bottom: 1px solid var(--c-line);
    font-size: var(--t-lg); font-weight: 640;
}
.dcode-modal-head h2 { margin: 0; font-size: inherit; font-weight: inherit; }
.dcode-modal-head .dcode-iconbtn { margin-left: auto; }
.dcode-modal-x { margin-left: auto; width: 26px; height: 26px; display: grid; place-items: center; border-radius: var(--r-sm); color: var(--c-faint); }
.dcode-modal-x:hover { background: rgba(var(--c-ink), .09); color: var(--c-text); }

/* Design-style header: a rounded accent icon badge on the left, the title and a
   quiet subtitle stacked beside it. Mirrors Delphos Design's .ddx-sheet-icon /
   .ddx-sheet-text so the Share dialog reads the same in both studios. */
.dcode-modal.is-wide { max-width: 600px; }
.dcode-modal-head.has-icon { align-items: flex-start; font-weight: inherit; }
.dcode-modal-icon {
    display: inline-flex; align-items: center; justify-content: center;
    flex: none; width: 38px; height: 38px;
    font-size: 21px !important; color: var(--c-accent);
    background: var(--c-soft); border-radius: 11px;
}
.dcode-modal-head-txt { flex: 1 1 auto; min-width: 0; }
.dcode-modal-head-txt h2 { font-size: var(--t-lg); font-weight: 640; letter-spacing: -.01em; }
.dcode-modal-sub { margin: 4px 0 0; font-size: var(--t-sm); font-weight: 400; color: var(--c-muted); line-height: var(--lh-loose); }
.dcode-modal-body { padding: var(--s4); max-height: 62vh; overflow: auto; }
.dcode-modal-lead { margin: 0 0 var(--s3); font-size: var(--t-md); color: var(--c-muted); line-height: var(--lh-loose); }
.dcode-modal-foot {
    display: flex; justify-content: flex-end; gap: var(--s2);
    padding: var(--s3) var(--s4); border-top: 1px solid var(--c-line);
    background: rgba(var(--c-ink), .02);
}
/* `.dcode-field` is the WRAPPER around a prompt input (see dcPrompt), so the
   frame lives on the wrapper and the input simply fills it. */
.dcode-field {
    display: flex; align-items: center;
    width: 100%; height: var(--h-lg); padding: 0 var(--s3);
    background: var(--c-bg3); border: 1px solid var(--c-line);
    border-radius: var(--r-sm);
    transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.dcode-field:focus-within { border-color: var(--c-ring); box-shadow: 0 0 0 3px var(--c-soft); }
/* ── labelled variant ─────────────────────────────────────────────────────────
   The base `.dcode-field` is a fixed-height single-line frame, which is right for
   dcPrompt's one bare input and wrong for a form: a <label> beside a <select> in a
   38px flex row puts them side by side, and a nine-row <textarea> gets clipped.
   The Git and GitHub dialogs need real labelled fields, so this variant stacks the
   label above the control and lets the box grow. Same frame, same focus ring — a
   second input style would have been a second look. */
.dcode-field.labelled {
    flex-direction: column; align-items: stretch;
    height: auto; min-height: var(--h-lg);
    padding: var(--s2) var(--s3) var(--s3);
    gap: 1px;
}
.dcode-field.labelled > label {
    color: var(--c-faint); font-size: 9.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
}
.dcode-field.labelled > input,
.dcode-field.labelled > select,
.dcode-field.labelled > textarea {
    width: 100%; background: none; border: 0; outline: none;
    color: var(--c-text); font: inherit; font-size: var(--t-md);
}
.dcode-field.labelled > textarea {
    min-height: 130px; max-height: 40vh; resize: vertical;
    font-family: var(--c-mono); font-size: var(--t-sm); line-height: 1.6;
}
.dcode-field.labelled > select { cursor: pointer; }
.dcode-field + .dcode-field { margin-top: var(--s3); }
.dcode-field input {
    flex: 1; width: 100%; background: none; border: 0; outline: none;
    font-size: var(--t-md); color: var(--c-text);
}

.dcode-quick-mask {
    position: fixed; inset: 0; z-index: var(--z-modal);
    display: flex; justify-content: center; align-items: flex-start;
    padding-top: 12vh; background: rgba(0, 0, 0, .5); backdrop-filter: blur(3px);
    animation: dc-in var(--fast) var(--ease);
}
.dcode-quick {
    width: 100%; max-width: 560px;
    background: var(--c-bg4); border: 1px solid var(--c-line-strong);
    border-radius: var(--r-lg); box-shadow: var(--sh-3);
    overflow: hidden; animation: dc-pop var(--med) var(--ease-out);
}
.dcode-quick input {
    width: 100%; height: 44px; padding: 0 var(--s4);
    background: none; border: 0; border-bottom: 1px solid var(--c-line);
    outline: none; font-size: var(--t-lg); color: var(--c-text);
}
.dcode-quick-list { max-height: 46vh; overflow: auto; padding: var(--s1); }
.dcode-qrow {
    display: flex; align-items: center; gap: var(--s2);
    width: 100%; padding: var(--s2) var(--s3);
    border-radius: var(--r-sm); font-size: var(--t-sm); color: var(--c-muted); text-align: left;
}
.dcode-qrow .qn { color: var(--c-text); }
.dcode-qrow .qd { margin-left: auto; font-size: var(--t-xs); color: var(--c-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcode-qrow:hover, .dcode-qrow.sel { background: var(--c-soft); }
.dcode-qrow.sel { color: var(--c-text); }

/* ── tools / connections modal content ───────────────────────────────────── */
.dcode-tools-list { display: flex; flex-direction: column; gap: var(--s1); }
.dcode-tool-item {
    display: flex; align-items: center; gap: var(--s3);
    padding: var(--s3); border-radius: var(--r-sm);
    background: rgba(var(--c-ink), .03); font-size: var(--t-sm);
}
.dcode-tool-item .material-symbols-rounded { font-size: 18px; color: var(--c-muted); }
.dcode-tool-item .ti-copy { flex: 1; min-width: 0; }
.dcode-tool-item b { display: block; font-weight: 600; }
.dcode-tool-item small { color: var(--c-faint); font-size: var(--t-xs); }
.dcode-tool-on { margin-left: auto; font-size: var(--t-xs); color: var(--c-add); font-weight: 600; }
.dcode-tools-connect { display: flex; flex-direction: column; gap: var(--s3); }
.dcode-mcp-host { min-height: 120px; }

/* ── narrow-window accommodation ──────────────────────────────────────────
   Below ~1180px the three columns cannot all stay comfortable, so the explorer
   yields first (it is the most re-openable of the three) and the chat narrows to
   its floor. The editor never drops below a usable width. */
@media (max-width: 1180px) {
    .dcode-chat { min-width: 280px; }
    .dcode-explorer { max-width: 200px; }
}
@media (max-width: 980px) {
    .dcode-work .dcode-explorer, .dcode-work #dcode-split-exp { display: none; }
}
@media (max-width: 900px) { .dcode-es-grid { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════════════════
   PROJECT CARDS

   The dashboard's own chrome (hero, toolbar, scope buttons, section headers)
   was deleted when the lobby absorbed it — the lobby's `.dcode-browse-bar`,
   `.dcode-segs` and `.dcode-search` do those jobs now. What remains here is the
   CARD, which the lobby still renders unchanged.
   ══════════════════════════════════════════════════════════════════════════ */
.dcode-card {
    min-height: 238px; padding: var(--s5); display: flex; flex-direction: column;
    overflow: visible; cursor: pointer;
}
.dcode-card:focus-visible { border-color: var(--c-accent); }
.dcode-card.archived { opacity: .78; }
.dcode-card.archived:hover { opacity: 1; }
.dcode-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); }
.dcode-card-top .dcode-card-ico { margin: 0; }
.dcode-card-menu {
    position: static; width: var(--h-sm); height: var(--h-sm); opacity: 1;
    color: var(--c-muted); border: 1px solid var(--c-line-soft); background: rgba(var(--c-ink),.025);
}
.dcode-card:hover .dcode-card-menu { opacity: 1; }
.dcode-card-menu:hover { border-color: var(--c-line-strong); }
.dcode-card-title { padding-right: 0; font-size: 16px; }
.dcode-card-desc { flex: 1; min-height: 42px; margin-bottom: var(--s4); -webkit-line-clamp: 3; }
.dcode-card-tags { display: flex; flex-wrap: wrap; gap: var(--s1); margin-bottom: var(--s4); }
.dcode-card-tag {
    display: inline-flex; align-items: center; gap: 3px; height: 21px; padding: 0 var(--s2);
    border: 1px solid var(--c-line-soft); border-radius: var(--r-full);
    color: var(--c-muted); background: rgba(var(--c-ink),.025);
    font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.dcode-card-tag .material-symbols-rounded { font-size: 12px; }
.dcode-card-tag.mode { color: var(--c-info); background: var(--c-info-soft); border-color: transparent; }
.dcode-card-tag.archived { color: var(--c-warn); background: var(--c-warn-soft); border-color: transparent; }
.dcode-card-foot {
    min-height: 30px; display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
    padding-top: var(--s3); border-top: 1px solid var(--c-line-soft);
}
.dcode-card-meta { min-width: 0; }
.dcode-card-meta .pin { font-size: 13px; color: var(--c-accent); }
.dcode-card-open {
    display: inline-flex; align-items: center; gap: var(--s1); height: 26px; padding: 0 var(--s2);
    border-radius: var(--r-sm); color: var(--c-accent); font-size: var(--t-xs); font-weight: 700;
}
.dcode-card-open:hover { background: var(--c-soft); }
.dcode-card-open .material-symbols-rounded { font-size: 14px; }
.dcode-delete-warning {
    display: flex; align-items: flex-start; gap: var(--s3); margin-bottom: var(--s4); padding: var(--s3);
    border: 1px solid rgba(248,81,73,.28); border-radius: var(--r); background: var(--c-del-soft);
}
.dcode-delete-warning > .material-symbols-rounded { color: var(--c-del); font-size: 20px; }
.dcode-delete-warning strong { color: var(--c-del); }
.dcode-delete-warning p { margin: var(--s1) 0 0; color: var(--c-muted); font-size: var(--t-sm); line-height: var(--lh-loose); }
.dcode-delete-label { display: block; margin-bottom: var(--s2); color: var(--c-muted); font-size: var(--t-sm); }
.dcode-delete-label code { color: var(--c-text); font-family: var(--c-mono); font-weight: 700; }
.dcode-field.danger:focus-within { border-color: var(--c-del); box-shadow: 0 0 0 3px var(--c-del-soft); }
.dcode-modal-foot .dcode-btn.danger { background: var(--c-del); color: #fff; }
.dcode-modal-foot .dcode-btn.danger:hover { background: #d63f38; }
.dcode-modal-foot .dcode-btn.danger:disabled { opacity: .4; }

/* On a narrow window the browse bar stacks and the search takes the full width,
   rather than the tabs and the field fighting over one row. */
@media (max-width: 820px) {
    .dcode-browse-bar { flex-direction: column; align-items: stretch; }
    .dcode-search { max-width: none; margin-left: 0; }
    .dcode-segs { overflow-x: auto; }
    .dcode-fan { flex-wrap: wrap; gap: var(--s3); }
    .dcode-bcard { margin: 0; --r-rot: 0deg; --y: 0px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   V2 AUTONOMOUS ENGINEERING WORKSPACE
   ══════════════════════════════════════════════════════════════════════════ */
.dcode-engineering-bar {
    min-height: 34px; flex: none; display: flex; align-items: center; gap: var(--s1);
    padding: 3px var(--s2) 3px var(--s3); border-bottom: 1px solid var(--c-line-soft);
    background: color-mix(in srgb, var(--c-bg2) 72%, var(--c-bg));
}
.dcode-workflow-btn {
    min-width: 0; height: var(--h-sm); display: inline-flex; align-items: center; gap: var(--s1);
    padding: 0 var(--s2); border: 1px solid var(--c-line-soft); border-radius: var(--r-sm);
    background: rgba(var(--c-ink),.035); color: var(--c-text); font-size: var(--t-xs); font-weight: 680;
}
.dcode-workflow-btn:hover { border-color: var(--c-ring); background: var(--c-soft); }
.dcode-workflow-btn:disabled { opacity: .6; cursor: wait; }
.dcode-workflow-btn > .material-symbols-rounded { font-size: 15px; color: var(--c-accent); }
.dcode-workflow-btn .caret { color: var(--c-faint); font-size: 14px; }
.dcode-workflow-btn small {
    padding: 1px 5px; border-radius: var(--r-full); background: var(--c-add-soft);
    color: var(--c-add); font-size: 9px; font-weight: 760; letter-spacing: .04em; text-transform: uppercase;
}
.dcode-workflow-btn small.readonly { background: var(--c-info-soft); color: var(--c-info); }
.dcode-agent-count { color: var(--c-faint); font-size: 10px; white-space: nowrap; }
.dcode-mode.supervised { background: var(--c-warn-soft); color: var(--c-warn); }
.dcode-mode:disabled { opacity: .55; cursor: wait; }

.dcode-pop[data-pop="workflow"] { width: min(430px, calc(100% - 16px)); max-width: 430px; }
.dcode-workflow-list { max-height: 430px; }
.dcode-workflow-opt {
    width: 100%; display: grid; grid-template-columns: 24px minmax(0,1fr) auto; align-items: start;
    gap: var(--s2); padding: var(--s3); border-radius: var(--r-sm); color: var(--c-muted); text-align: left;
}
.dcode-workflow-opt:hover { background: rgba(var(--c-ink),.06); color: var(--c-text); }
.dcode-workflow-opt.sel { background: var(--c-soft); color: var(--c-text); }
.dcode-workflow-opt > .material-symbols-rounded { margin-top: 1px; color: var(--c-accent); font-size: 18px; }
.dcode-workflow-opt b, .dcode-workflow-opt small { display: block; }
.dcode-workflow-opt b { color: var(--c-text); font-size: var(--t-sm); }
.dcode-workflow-opt small { margin-top: 2px; color: var(--c-faint); font-size: var(--t-xs); line-height: var(--lh); }
.dcode-workflow-opt em {
    margin-top: 2px; color: var(--c-faint); font-size: 9px; font-style: normal;
    font-weight: 750; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}

/* Context and engineering settings */
.dcode-modal.wide { max-width: min(920px, calc(100vw - 48px)); }
.dcode-report-hero {
    display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); padding: var(--s4);
    border: 1px solid var(--c-ring); border-radius: var(--r); background: var(--c-soft);
}
.dcode-report-hero > .material-symbols-rounded { color: var(--c-accent); font-size: 24px; }
.dcode-report-hero > div { flex: 1; }
.dcode-report-hero b, .dcode-report-hero small { display: block; }
.dcode-report-hero b { font-size: var(--t-lg); }
.dcode-report-hero small { margin-top: 2px; color: var(--c-muted); }
.dcode-report-hero > span:last-child { color: var(--c-accent); font-size: var(--t-sm); font-weight: 700; white-space: nowrap; }
.dcode-report-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s3); }
.dcode-report-grid section {
    min-height: 150px; padding: var(--s4); border: 1px solid var(--c-line);
    border-radius: var(--r); background: rgba(var(--c-ink),.018);
}
.dcode-report-grid h3 { margin: 0 0 var(--s2); font-size: var(--t-md); }
.dcode-report-grid h4 { margin: var(--s3) 0 var(--s1); color: var(--c-faint); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .05em; }
.dcode-report-grid p, .dcode-report-grid ul { margin: 0; color: var(--c-muted); font-size: var(--t-sm); line-height: var(--lh-loose); }
.dcode-report-grid ul { max-height: 150px; overflow: auto; padding-left: var(--s5); }
.dcode-report-grid li { margin-bottom: 2px; overflow-wrap: anywhere; }
.dcode-report-empty { color: var(--c-faint) !important; }
.dcode-report-safe { display: flex; align-items: center; gap: var(--s1); color: var(--c-add) !important; }
.dcode-report-safe .material-symbols-rounded { font-size: 15px; }
.dcode-settings-cols { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s4); }
.dcode-settings-cols section > h3 { margin: 0 0 var(--s2); font-size: var(--t-md); }
.dcode-agent-settings, .dcode-role-settings { display: flex; flex-direction: column; gap: var(--s1); }
.dcode-agent-setting, .dcode-role-setting {
    min-height: 52px; display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3);
    border: 1px solid var(--c-line-soft); border-radius: var(--r-sm); background: rgba(var(--c-ink),.02);
}
.dcode-agent-setting:hover, .dcode-role-setting:hover { border-color: var(--c-line-strong); background: rgba(var(--c-ink),.035); }
.dcode-agent-setting input { accent-color: var(--c-accent); flex: none; }
.dcode-agent-setting > .material-symbols-rounded { color: var(--c-accent); font-size: 18px; }
.dcode-agent-setting > span:last-child, .dcode-role-setting > span { flex: 1; }
.dcode-agent-setting b, .dcode-agent-setting small, .dcode-role-setting b, .dcode-role-setting small { display: block; }
.dcode-agent-setting b, .dcode-role-setting b { font-size: var(--t-sm); }
.dcode-agent-setting small, .dcode-role-setting small { color: var(--c-faint); font-size: var(--t-xs); line-height: var(--lh); }
.dcode-role-setting select {
    width: min(180px, 48%); height: var(--h-md); padding: 0 var(--s2); color: var(--c-text);
    border: 1px solid var(--c-line); border-radius: var(--r-sm); background: var(--c-bg3); outline: none;
}
.dcode-role-setting select:focus { border-color: var(--c-ring); }

/* ── editor settings modal ─────────────────────────────────────────────────── */
.dcode-es-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s4); }
.dcode-es-grid section > h3 { margin: 0 0 var(--s2); font-size: var(--t-md); }
.dcode-es-row {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
    min-height: 40px; padding: var(--s1) var(--s2);
    border: 1px solid var(--c-line-soft); border-radius: var(--r-sm); background: rgba(var(--c-ink),.02);
}
.dcode-es-row + .dcode-es-row { margin-top: var(--s1); }
.dcode-es-row b { font-size: var(--t-sm); font-weight: 550; }
.dcode-es-row select {
    width: min(180px, 55%); height: var(--h-md); padding: 0 var(--s2); color: var(--c-text);
    border: 1px solid var(--c-line); border-radius: var(--r-sm); background: var(--c-bg3); outline: none;
    font-size: var(--t-sm);
}
.dcode-es-row select:focus { border-color: var(--c-ring); }
.dcode-es-row input[type="number"] {
    width: 72px; height: var(--h-md); padding: 0 var(--s2); color: var(--c-text);
    border: 1px solid var(--c-line); border-radius: var(--r-sm); background: var(--c-bg3); outline: none;
    font-size: var(--t-sm); font-family: var(--c-mono); text-align: right;
}
.dcode-es-row input[type="number"]:focus { border-color: var(--c-ring); }
.dcode-es-row input[type="checkbox"] { accent-color: var(--c-accent); width: 15px; height: 15px; flex: none; }
.dcode-es-hint { margin: var(--s3) 0 0; font-size: var(--t-xs); color: var(--c-faint); }

/* Advanced project search */
.dcode-searchbox { display: flex; flex-direction: column; gap: var(--s1); }
.dcode-searchbox .dcode-search-path { height: 25px; color: var(--c-muted); font-size: var(--t-xs); }
.dcode-search-options { display: flex; align-items: center; gap: var(--s1); }
.dcode-search-options button {
    min-width: 28px; height: 23px; padding: 0 var(--s1); border: 1px solid var(--c-line-soft);
    border-radius: 4px; color: var(--c-faint); font-family: var(--c-mono); font-size: 10px;
}
.dcode-search-options button:hover { color: var(--c-text); background: rgba(var(--c-ink),.06); }
.dcode-search-options button.on { color: var(--c-accent); border-color: var(--c-ring); background: var(--c-soft); }

/* Hierarchical tasks. One collection replaces the former plan + todo duplicate. */
.dcode-plan.static { opacity: .9; }
.dcode-todos { padding-top: var(--s2); }
.dcode-todo {
    min-height: 30px; align-items: flex-start; padding: 4px 0 4px calc(var(--task-depth, 0) * 18px);
    position: relative;
}
.dcode-todo[style*="--task-depth:1"], .dcode-todo[style*="--task-depth:2"],
.dcode-todo[style*="--task-depth:3"], .dcode-todo[style*="--task-depth:4"],
.dcode-todo[style*="--task-depth:5"] { border-left: 1px solid var(--c-line-soft); }
.dcode-task-copy { flex: 1; min-width: 0; }
.dcode-task-copy .txt { display: block; overflow-wrap: anywhere; }
.dcode-task-copy small { display: block; margin-top: 1px; color: var(--c-faint); font-size: 10px; line-height: var(--lh); }
.dcode-task-copy small.err { color: var(--c-del); }
.dcode-task-state {
    margin-top: 1px; color: var(--c-faint); font-size: 9px; font-weight: 760;
    letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.dcode-todo > button {
    height: 21px; padding: 0 var(--s2); border: 1px solid var(--c-line-soft); border-radius: 4px;
    color: var(--c-muted); font-size: 10px; font-weight: 650;
}
.dcode-todo > button:hover { color: var(--c-text); border-color: var(--c-line-strong); background: rgba(var(--c-ink),.06); }
.dcode-todo.failed { color: var(--c-del); }
.dcode-todo.failed .chk { border-color: var(--c-del); background: var(--c-del-soft); }
.dcode-todo.failed .chk .material-symbols-rounded { color: var(--c-del); }
.dcode-todo.failed .dcode-task-state { color: var(--c-del); }
.dcode-todo.cancelled { color: var(--c-faint); }
.dcode-todo.cancelled .txt { text-decoration: line-through; }
.dcode-todo.cancelled .chk { border-color: var(--c-faint); }
.dcode-todo.cancelled .chk .material-symbols-rounded { color: var(--c-faint); }
.dcode-todo.active .dcode-task-state { color: var(--c-accent); }
.dcode-todo.done .dcode-task-state { color: var(--c-add); }
.dcode-task-empty { padding: var(--s3) 0; color: var(--c-faint); font-size: var(--t-sm); }

/* Developer panels */
.dcode-panel-head { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.dcode-panel-head::-webkit-scrollbar { display: none; }
.dcode-panel-action {
    width: 25px; height: 25px; display: grid; place-items: center; flex: none;
    border: 1px solid var(--c-line-soft) !important; border-radius: var(--r-sm) !important; color: var(--c-muted) !important;
}
.dcode-panel-action:hover { color: var(--c-text) !important; background: rgba(var(--c-ink),.07) !important; }
.dcode-panel-action .material-symbols-rounded { font-size: 15px; }
.dcode-feature-pane.sel { display: flex; flex-direction: column; }
.dcode-feature-toolbar, .dcode-git-commit {
    min-height: 40px; flex: none; display: flex; align-items: center; gap: var(--s2);
    padding: var(--s2) var(--s3); border-bottom: 1px solid var(--c-line-soft);
}
.dcode-feature-toolbar > input, .dcode-git-commit > input {
    flex: 1; height: var(--h-sm); padding: 0 var(--s3); border: 1px solid var(--c-line);
    border-radius: var(--r-sm); background: var(--c-bg3); color: var(--c-text); outline: none;
    font-family: var(--c-mono); font-size: var(--t-xs);
}
.dcode-feature-toolbar > input:focus, .dcode-git-commit > input:focus { border-color: var(--c-ring); }
.dcode-feature-toolbar .dcode-btn, .dcode-git-commit .dcode-btn { height: var(--h-sm); }
.dcode-feature-toolbar .material-symbols-rounded, .dcode-git-commit .material-symbols-rounded { font-size: 15px; }
.dcode-feature-note { color: var(--c-faint); font-size: var(--t-xs); line-height: var(--lh); }
#dcode-pane-source > .dcode-feature-note { padding: var(--s1) var(--s3); border-bottom: 1px solid var(--c-line-soft); }
.dcode-feature-output {
    flex: 1; min-height: 0; margin: 0; padding: var(--s3); overflow: auto;
    color: var(--c-muted); background: var(--c-bg3); font: var(--t-xs)/1.6 var(--c-mono); white-space: pre-wrap; word-break: break-word;
}
.dcode-pane-loading { display: flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 90px; color: var(--c-faint); font-size: var(--t-sm); }
.dcode-process-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(230px, 38%) minmax(0,1fr); }
.dcode-process-list { min-height: 0; overflow: auto; border-right: 1px solid var(--c-line); }
.dcode-process-console { min-height: 0; display: flex; flex-direction: column; background: var(--c-bg3); }
.dcode-feature-subhead { height: 30px; flex: none; display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s3); border-bottom: 1px solid var(--c-line-soft); color: var(--c-muted); font-size: var(--t-xs); }
.dcode-feature-subhead > span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcode-process-console pre { flex: 1; min-height: 0; margin: 0; padding: var(--s3); overflow: auto; color: var(--c-muted); font: var(--t-xs)/1.55 var(--c-mono); white-space: pre-wrap; word-break: break-word; }
.dcode-process-row {
    display: flex; align-items: flex-start; gap: var(--s2); padding: var(--s2) var(--s3);
    border-bottom: 1px solid var(--c-line-soft); color: var(--c-muted); cursor: pointer;
}
.dcode-process-row:hover, .dcode-process-row.sel { background: rgba(var(--c-ink),.045); color: var(--c-text); }
.dcode-process-row.sel { box-shadow: inset 2px 0 var(--c-accent); }
.dcode-process-dot { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: var(--c-faint); flex: none; }
.dcode-process-dot.running, .dcode-process-dot.starting { background: var(--c-add); box-shadow: 0 0 0 3px var(--c-add-soft); }
.dcode-process-dot.stopping { background: var(--c-warn); }
.dcode-process-dot.failed { background: var(--c-del); }
.dcode-process-copy { flex: 1; min-width: 0; }
.dcode-process-copy b, .dcode-process-copy code, .dcode-process-copy small { display: block; }
.dcode-process-copy b { color: var(--c-text); font-size: var(--t-sm); }
.dcode-process-copy code { margin: 1px 0; overflow: hidden; color: var(--c-muted); font: 10px/1.4 var(--c-mono); text-overflow: ellipsis; white-space: nowrap; }
.dcode-process-copy small { color: var(--c-faint); font-size: 10px; }
.dcode-process-actions { display: flex; gap: 1px; }
.dcode-process-actions button { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 4px; color: var(--c-faint); }
.dcode-process-actions button:hover { color: var(--c-text); background: rgba(var(--c-ink),.08); }
.dcode-process-actions .material-symbols-rounded { font-size: 14px; }
.dcode-memory-list, .dcode-checkpoint-list { flex: 1; min-height: 0; overflow: auto; }
.dcode-memory-row, .dcode-checkpoint-row {
    display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s3);
    border-bottom: 1px solid var(--c-line-soft); color: var(--c-muted);
}
.dcode-memory-row > .material-symbols-rounded, .dcode-checkpoint-row > .material-symbols-rounded { margin-top: 1px; color: var(--c-accent); font-size: 18px; }
.dcode-memory-row > span:nth-child(2), .dcode-checkpoint-row > span:nth-child(2) { flex: 1; min-width: 0; }
.dcode-memory-row b, .dcode-checkpoint-row b { display: block; color: var(--c-text); font-size: var(--t-xs); text-transform: capitalize; }
.dcode-memory-row p { margin: 2px 0; color: var(--c-muted); font-size: var(--t-sm); line-height: var(--lh); overflow-wrap: anywhere; }
.dcode-memory-row small, .dcode-checkpoint-row small { display: block; color: var(--c-faint); font-size: 10px; }
.dcode-memory-row > button { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 4px; color: var(--c-faint); }
.dcode-memory-row > button:hover { color: var(--c-del); background: var(--c-del-soft); }
.dcode-memory-row > button .material-symbols-rounded { font-size: 15px; }
.dcode-checkpoint-row { align-items: center; }
.dcode-checkpoint-row .dcode-restore-btn { margin-left: auto; }

/* ══════════════════════════════════════════════════════════════════════════
   GIT PANEL
   ──────────────────────────────────────────────────────────────────────────
   Built on the SAME primitives as the Processes and Memory panes above — 40px
   toolbars, hairline-separated rows, 22px row actions, --c-add / --c-del for
   added / removed — so Source Control does not read as a bolted-on third-party
   panel. Nothing here invents a new metric.
   ══════════════════════════════════════════════════════════════════════════ */
.dcode-git, .dcode-gh { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.dcode-git-head {
    min-height: 40px; flex: none;
    display: flex; align-items: center; gap: var(--s2);
    padding: var(--s2) var(--s3);
    border-bottom: 1px solid var(--c-line-soft);
}
.dcode-git-branch {
    display: inline-flex; align-items: center; gap: var(--s2);
    max-width: 26ch; height: var(--h-sm); padding: 0 var(--s2) 0 var(--s3);
    border-radius: var(--r-sm); background: rgba(var(--c-ink), .05);
    color: var(--c-text); font-size: var(--t-sm);
    transition: background var(--fast) var(--ease);
}
.dcode-git-branch:hover:not(:disabled) { background: rgba(var(--c-ink), .1); }
.dcode-git-branch:disabled { opacity: .55; cursor: not-allowed; }
.dcode-git-branch b { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.dcode-git-branch .material-symbols-rounded { font-size: 16px; color: var(--c-accent); }
.dcode-git-branch .caret { color: var(--c-faint); font-size: 15px; }
/* Divergence counts. Amber for "behind" is deliberate: unpulled remote commits are
   the state that makes a push fail, so it is a warning, not a fact. */
.dcode-git-div {
    display: inline-flex; align-items: center; gap: 2px; flex: none;
    height: 20px; padding: 0 var(--s2);
    border-radius: var(--r-full); background: var(--c-warn-soft); color: var(--c-warn);
    font-size: var(--t-xs); font-weight: 600; font-variant-numeric: tabular-nums;
}
.dcode-git-div .material-symbols-rounded { font-size: 13px; }
.dcode-git-div:last-of-type { background: var(--c-info-soft); color: var(--c-info); }

.dcode-git-remote {
    flex: none; display: flex; align-items: center; gap: var(--s2);
    padding: var(--s2) var(--s3);
    border-bottom: 1px solid var(--c-line-soft);
    color: var(--c-muted); font-size: var(--t-xs);
}
.dcode-git-remote .material-symbols-rounded { font-size: 15px; color: var(--c-faint); }
.dcode-git-remote a { color: var(--c-accent); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcode-git-remote a:hover { text-decoration: underline; }
.dcode-git-remote em {
    padding: 1px var(--s2); border-radius: var(--r-full);
    background: var(--c-soft); color: var(--c-accent);
    font-size: 10px; font-style: normal; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
}
.dcode-git-remote small { margin-left: auto; color: var(--c-faint); font-size: 10px; white-space: nowrap; }

/* Segmented view switch. Shared with the diff viewer's mode switch, so "pick a
   view" looks the same in both places. */
.dcode-git-segs { flex: none; display: flex; gap: 2px; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--c-line-soft); }
.dcode-git-seg {
    display: inline-flex; align-items: center; gap: var(--s1);
    height: 24px; padding: 0 var(--s3);
    border-radius: var(--r-full); color: var(--c-muted);
    font-size: var(--t-xs); font-weight: 600;
    transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.dcode-git-seg:hover { background: rgba(var(--c-ink), .07); color: var(--c-text); }
.dcode-git-seg.sel { background: var(--c-soft); color: var(--c-accent); }
.dcode-git-seg em { font-style: normal; font-variant-numeric: tabular-nums; opacity: .8; }

.dcode-git-body { flex: 1; min-height: 0; overflow: auto; }

.dcode-git-banner {
    display: flex; align-items: center; gap: var(--s3);
    padding: var(--s3); border-bottom: 1px solid var(--c-line-soft);
    background: var(--c-del-soft); color: var(--c-text);
}
.dcode-git-banner .material-symbols-rounded { color: var(--c-del); font-size: 20px; }
.dcode-git-banner > span:nth-child(2) { flex: 1; min-width: 0; }
.dcode-git-banner b { display: block; font-size: var(--t-sm); }
.dcode-git-banner small { display: block; color: var(--c-muted); font-size: var(--t-xs); }

.dcode-git-grouphead {
    display: flex; align-items: center; gap: var(--s2);
    height: 26px; padding: 0 var(--s3);
    background: var(--c-bg2); border-bottom: 1px solid var(--c-line-soft);
    color: var(--c-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
    position: sticky; top: 0; z-index: 1;
}
.dcode-git-grouphead b { font-weight: 700; }
.dcode-git-grouphead > span { padding: 0 5px; border-radius: var(--r-full); background: rgba(var(--c-ink), .08); font-variant-numeric: tabular-nums; }
.dcode-git-groupact { margin-left: auto; color: var(--c-accent); font-size: 10px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.dcode-git-groupact:hover { text-decoration: underline; }

.dcode-git-row {
    display: flex; align-items: center; gap: var(--s2);
    padding: var(--s2) var(--s3);
    border-bottom: 1px solid var(--c-line-soft);
    color: var(--c-muted); cursor: pointer;
}
.dcode-git-row:hover { background: rgba(var(--c-ink), .045); color: var(--c-text); }
.dcode-git-row.conflict { box-shadow: inset 2px 0 var(--c-del); }
.dcode-git-kind { display: grid; place-items: center; width: 18px; height: 18px; flex: none; border-radius: 4px; }
.dcode-git-kind .material-symbols-rounded { font-size: 13px; }
.dcode-git-kind.modified { background: var(--c-warn-soft); color: var(--c-warn); }
.dcode-git-kind.added, .dcode-git-kind.untracked { background: var(--c-add-soft); color: var(--c-add); }
.dcode-git-kind.deleted { background: var(--c-del-soft); color: var(--c-del); }
.dcode-git-kind.renamed, .dcode-git-kind.copied { background: var(--c-info-soft); color: var(--c-info); }
.dcode-git-kind.conflicted { background: var(--c-del-soft); color: var(--c-del); }
.dcode-git-path {
    flex: 1; min-width: 0; overflow: hidden;
    font-family: var(--c-mono); font-size: var(--t-xs);
    text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left;
}
.dcode-git-path em { color: var(--c-faint); font-style: normal; }
.dcode-git-rowacts { display: flex; gap: 1px; flex: none; opacity: 0; transition: opacity var(--fast) var(--ease); }
.dcode-git-row:hover .dcode-git-rowacts, .dcode-git-branchrow:hover .dcode-git-rowacts,
.dcode-git-rowacts:focus-within { opacity: 1; }
.dcode-git-rowacts button { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 4px; color: var(--c-faint); }
.dcode-git-rowacts button:hover { color: var(--c-text); background: rgba(var(--c-ink), .1); }
.dcode-git-rowacts .material-symbols-rounded { font-size: 14px; }
/* Keyboard users never hover, so the actions must be reachable on focus. */
@media (hover: none) { .dcode-git-rowacts { opacity: 1; } }

/* History */
.dcode-git-commitrow {
    display: flex; align-items: center; gap: var(--s3);
    padding: var(--s2) var(--s3);
    border-bottom: 1px solid var(--c-line-soft);
    color: var(--c-muted); cursor: pointer;
}
.dcode-git-commitrow:hover { background: rgba(var(--c-ink), .045); }
.dcode-git-sha { flex: none; color: var(--c-accent); font-family: var(--c-mono); font-size: var(--t-xs); }
.dcode-git-commitcopy { flex: 1; min-width: 0; }
.dcode-git-commitcopy b { display: block; overflow: hidden; color: var(--c-text); font-size: var(--t-sm); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.dcode-git-commitcopy small { display: block; color: var(--c-faint); font-size: 10px; }
.dcode-git-refs { display: flex; gap: var(--s1); flex: none; }
.dcode-git-refs em {
    padding: 1px 5px; border-radius: var(--r-full);
    background: var(--c-soft); color: var(--c-accent);
    font-size: 9.5px; font-style: normal; font-weight: 600; white-space: nowrap;
}
.dcode-git-commitrow > button { width: 22px; height: 22px; display: grid; place-items: center; flex: none; border-radius: 4px; color: var(--c-faint); }
.dcode-git-commitrow > button:hover { color: var(--c-text); background: rgba(var(--c-ink), .1); }
.dcode-git-commitrow > button .material-symbols-rounded { font-size: 14px; }

/* Branches */
.dcode-git-branchrow {
    display: flex; align-items: center; gap: var(--s2);
    padding: var(--s2) var(--s3);
    border-bottom: 1px solid var(--c-line-soft);
    color: var(--c-muted);
}
.dcode-git-branchrow:hover { background: rgba(var(--c-ink), .045); }
.dcode-git-branchrow.sel { box-shadow: inset 2px 0 var(--c-accent); }
.dcode-git-branchrow > .material-symbols-rounded { font-size: 15px; flex: none; color: var(--c-faint); }
.dcode-git-branchrow.sel > .material-symbols-rounded { color: var(--c-accent); }
.dcode-git-branchcopy { flex: 1; min-width: 0; }
.dcode-git-branchcopy b { display: block; overflow: hidden; color: var(--c-text); font-family: var(--c-mono); font-size: var(--t-xs); text-overflow: ellipsis; white-space: nowrap; }
.dcode-git-branchcopy small { display: block; color: var(--c-faint); font-size: 10px; }
.dcode-git-branchrow > em {
    flex: none; padding: 1px var(--s2); border-radius: var(--r-full);
    background: var(--c-soft); color: var(--c-accent);
    font-size: 9.5px; font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}

/* Commit row — the one place in the panel that is a form. */
.dcode-git .dcode-git-commit { border-top: 1px solid var(--c-line); border-bottom: 0; }
.dcode-git .dcode-git-commit > input { font-family: inherit; font-size: var(--t-sm); }

/* ══════════════════════════════════════════════════════════════════════════
   GITHUB PANEL
   ══════════════════════════════════════════════════════════════════════════ */
.dcode-gh-head {
    min-height: 44px; flex: none;
    display: flex; align-items: center; gap: var(--s3);
    padding: var(--s2) var(--s3);
    border-bottom: 1px solid var(--c-line-soft);
}
.dcode-gh-avatar {
    width: 26px; height: 26px; flex: none;
    display: grid; place-items: center;
    border-radius: 50%; background: var(--c-soft); color: var(--c-accent);
    font-size: 16px; object-fit: cover;
}
.dcode-gh-who { min-width: 0; }
.dcode-gh-who b { display: block; overflow: hidden; color: var(--c-text); font-size: var(--t-sm); text-overflow: ellipsis; white-space: nowrap; }
.dcode-gh-who small { display: block; overflow: hidden; color: var(--c-faint); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.dcode-gh-repos { flex: 1; min-height: 0; overflow: auto; }
.dcode-gh-repo {
    display: flex; align-items: center; gap: var(--s3);
    padding: var(--s2) var(--s3);
    border-bottom: 1px solid var(--c-line-soft);
    color: var(--c-muted);
}
.dcode-gh-repo:hover { background: rgba(var(--c-ink), .045); }
.dcode-gh-repo > .material-symbols-rounded { flex: none; color: var(--c-faint); font-size: 16px; }
.dcode-gh-repocopy { flex: 1; min-width: 0; }
.dcode-gh-repocopy b { display: block; overflow: hidden; color: var(--c-text); font-size: var(--t-sm); text-overflow: ellipsis; white-space: nowrap; }
.dcode-gh-repocopy small { display: block; overflow: hidden; color: var(--c-muted); font-size: var(--t-xs); text-overflow: ellipsis; white-space: nowrap; }
.dcode-gh-repocopy em { display: block; color: var(--c-faint); font-size: 10px; font-style: normal; }
.dcode-gh-repoacts { display: flex; gap: 1px; flex: none; }
.dcode-gh-repoacts button { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 4px; color: var(--c-faint); }
.dcode-gh-repoacts button:hover:not(:disabled) { color: var(--c-text); background: rgba(var(--c-ink), .1); }
.dcode-gh-repoacts button:disabled { opacity: .4; cursor: not-allowed; }
.dcode-gh-repoacts .material-symbols-rounded { font-size: 15px; }

/* The not-connected state. It is the first thing most users will see here, so it
   states what the connection is FOR and exactly what it grants — a Connect button
   with no explanation of the scopes it is about to request is not consent. */
.dcode-gh-connect {
    flex: 1; min-height: 0; overflow: auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--s3); padding: var(--s6); text-align: center;
}
.dcode-gh-mark {
    display: grid; place-items: center;
    width: 46px; height: 46px;
    border-radius: var(--r-lg); background: var(--c-soft); color: var(--c-accent);
    font-size: 26px !important;
}
.dcode-gh-connect h3 { margin: 0; color: var(--c-text); font-size: var(--t-lg); font-weight: 650; }
.dcode-gh-connect p { margin: 0; max-width: 52ch; color: var(--c-muted); font-size: var(--t-sm); line-height: var(--lh-loose); }
.dcode-gh-scopes { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; margin: 0; padding: 0; list-style: none; }
.dcode-gh-scopes li {
    display: inline-flex; align-items: center; gap: var(--s1);
    padding: 3px var(--s2); border-radius: var(--r-full);
    background: rgba(var(--c-ink), .06); color: var(--c-muted); font-size: var(--t-xs);
}
.dcode-gh-scopes .material-symbols-rounded { font-size: 13px; color: var(--c-add); }
.dcode-gh-scopes code { font-family: var(--c-mono); font-size: 10.5px; }
.dcode-gh-fine { max-width: 52ch; color: var(--c-faint) !important; font-size: var(--t-xs) !important; }

/* The GitHub row inside the Connections dialog. */
.dcode-conn-github { display: flex; flex-direction: column; gap: var(--s2); }
.dcode-conn-github .dcode-tool-item { align-items: center; }
.dcode-conn-github .dcode-btn { flex: none; }
.dcode-conn-sep { height: 1px; margin: var(--s4) 0; background: var(--c-line); }

/* ══════════════════════════════════════════════════════════════════════════
   DIFF VIEWER (inline + side by side)
   ──────────────────────────────────────────────────────────────────────────
   Both layouts render the SAME parsed hunks the server returned, so they can
   never disagree about what changed. Line numbers are their own columns rather
   than part of the text, so a copy of the code copies the code.
   ══════════════════════════════════════════════════════════════════════════ */
.dcode-diffview { display: flex; flex-direction: column; gap: var(--s3); max-height: min(66vh, 640px); overflow: auto; }
.dcode-diff-modes { display: flex; align-items: center; gap: var(--s2); position: sticky; top: 0; z-index: 2; padding-bottom: var(--s2); background: var(--c-bg4); }
.dcode-diff-meta { margin-left: auto; overflow: hidden; color: var(--c-muted); font-size: var(--t-xs); text-overflow: ellipsis; white-space: nowrap; }
.dcode-diff-file { border: 1px solid var(--c-line); border-radius: var(--r); overflow: hidden; }
.dcode-diff-fhead {
    display: flex; align-items: center; gap: var(--s2);
    padding: var(--s2) var(--s3);
    background: var(--c-bg2); border-bottom: 1px solid var(--c-line);
}
.dcode-diff-fpath { flex: 1; min-width: 0; overflow: hidden; color: var(--c-text); font-family: var(--c-mono); font-size: var(--t-xs); text-overflow: ellipsis; white-space: nowrap; }
.dcode-diff-hunk { border-top: 1px solid var(--c-line-soft); }
.dcode-diff-hunk:first-of-type { border-top: 0; }
.dcode-diff-hhead { padding: 2px var(--s3); background: var(--c-bg3); color: var(--c-faint); font: 10px/1.7 var(--c-mono); }
.dcode-diff-line { display: grid; grid-template-columns: 42px 42px minmax(0, 1fr); font: var(--t-xs)/1.6 var(--c-mono); }
.dcode-diff-line i {
    padding: 0 var(--s2); color: var(--c-faint); font-style: normal;
    text-align: right; user-select: none; font-variant-numeric: tabular-nums;
}
.dcode-diff-line code { padding: 0 var(--s3); overflow-x: auto; white-space: pre; }
.dcode-diff-line.add { background: var(--c-add-soft); }
.dcode-diff-line.add code { color: var(--c-add); }
.dcode-diff-line.del { background: var(--c-del-soft); }
.dcode-diff-line.del code { color: var(--c-del); }
.dcode-diff-line.ctx code { color: var(--c-muted); }
.dcode-diff-line.meta code { color: var(--c-faint); font-style: italic; }
.dcode-diff-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dcode-diff-cell { display: grid; grid-template-columns: 40px minmax(0, 1fr); font: var(--t-xs)/1.6 var(--c-mono); border-right: 1px solid var(--c-line-soft); }
.dcode-diff-cell:nth-child(2n) { border-right: 0; }
.dcode-diff-cell i { padding: 0 var(--s2); color: var(--c-faint); font-style: normal; text-align: right; user-select: none; font-variant-numeric: tabular-nums; }
.dcode-diff-cell code { padding: 0 var(--s2); overflow-x: auto; color: var(--c-muted); white-space: pre; }
.dcode-diff-cell.add { background: var(--c-add-soft); }
.dcode-diff-cell.add code { color: var(--c-add); }
.dcode-diff-cell.del { background: var(--c-del-soft); }
.dcode-diff-cell.del code { color: var(--c-del); }
.dcode-diff-cell.empty { background: rgba(var(--c-ink), .03); }
.dcode-diff-note { padding: var(--s3); color: var(--c-faint); font-size: var(--t-xs); text-align: center; }
@media (max-width: 900px) { .dcode-diff-split { grid-template-columns: 1fr; } }

/* Checkbox rows in the Git/GitHub dialogs. */
.dcode-check { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3); color: var(--c-muted); font-size: var(--t-sm); cursor: pointer; }
.dcode-check input { width: 15px; height: 15px; accent-color: var(--c-accent); }

@media (max-width: 1240px) {
    .dcode-agent-count { display: none; }
    .dcode-process-layout { grid-template-columns: minmax(200px, 42%) minmax(0,1fr); }
    .dcode-ptab { padding-inline: var(--s1); }
}
@media (max-width: 1080px) {
    .dcode-settings-cols, .dcode-report-grid { grid-template-columns: 1fr; }
    .dcode-modal.wide { max-width: calc(100vw - 28px); }
    .dcode-term-in .qk { display: none; }
    .dcode-workflow-btn small { display: none; }
}

.dcode-conflict-preview { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--s3); }
.dcode-conflict-preview > div { min-width: 0; }
.dcode-conflict-preview b { display: block; margin-bottom: var(--s1); color: var(--c-muted); font-size: var(--t-xs); }
.dcode-conflict-preview pre {
    max-height: 300px; margin: 0; padding: var(--s3); overflow: auto; border: 1px solid var(--c-line);
    border-radius: var(--r-sm); background: var(--c-bg3); color: var(--c-muted);
    font: 10px/1.5 var(--c-mono); white-space: pre-wrap; word-break: break-word;
}
.dcode-conflict-missing { padding: var(--s4); border: 1px dashed var(--c-del); border-radius: var(--r); color: var(--c-del); }
@media (max-width: 900px) { .dcode-conflict-preview { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════════════════
   THEMED FORM CONTROLS
   ──────────────────────────────────────────────────────────────────────────
   Native controls were being painted by the browser's own dark palette — that
   is where the blue dropdown panel and blue autofill boxes came from, since the
   UA had no idea this surface is themed. `color-scheme` tells it, and the rest
   pins every control to the product's own surface, line and accent tokens.
   ══════════════════════════════════════════════════════════════════════════ */
.dcode { color-scheme: dark; accent-color: var(--c-accent); }

.dcode select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    height: var(--h-md); padding: 0 26px 0 var(--s2);
    color: var(--c-text); background-color: var(--c-bg3);
    border: 1px solid var(--c-line); border-radius: var(--r-sm);
    font-family: inherit; font-size: var(--t-sm); line-height: normal;
    outline: none; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--c-muted) 50%), linear-gradient(135deg, var(--c-muted) 50%, transparent 50%);
    background-position: calc(100% - 15px) center, calc(100% - 10px) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.dcode select:hover { border-color: var(--c-line-strong); background-color: var(--c-bg2); }
.dcode select:focus, .dcode select:focus-visible { border-color: var(--c-ring); box-shadow: 0 0 0 3px var(--c-soft); }
.dcode select:disabled { opacity: .55; cursor: not-allowed; }
/* The option list is drawn by the platform; these are the only properties it
   honours, and they keep it on the product surface instead of system blue. */
.dcode select option,
.dcode select optgroup {
    background-color: var(--c-bg2);
    color: var(--c-text);
}
.dcode select option:checked { background-color: var(--c-soft); color: var(--c-accent); }

/* Text inputs: kill the UA's blue autofill/selection wash. */
.dcode input:-webkit-autofill,
.dcode input:-webkit-autofill:hover,
.dcode input:-webkit-autofill:focus,
.dcode textarea:-webkit-autofill {
    -webkit-text-fill-color: var(--c-text);
    caret-color: var(--c-text);
    box-shadow: 0 0 0 1000px var(--c-bg3) inset;
    transition: background-color 6000000s 0s, color 6000000s 0s;
}
.dcode input::selection, .dcode textarea::selection { background: var(--c-soft); color: var(--c-text); }
/* `type="search"` keeps a UA appearance in WebKit even after `border: 0`, and it
   paints its own inset field chrome. Inside a wrapper that already draws the
   frame (`.dcode-project-search`) that lands as a second border tucked in
   against the text. Dropping the appearance leaves exactly one frame. */
.dcode input[type="search"] { -webkit-appearance: none; appearance: none; }
.dcode input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.dcode input[type="checkbox"], .dcode input[type="radio"] { accent-color: var(--c-accent); }

/* Role selects sit in a fixed-width column inside settings rows. */
.dcode-role-setting select { width: min(200px, 52%); }

/* The `.dcode-compose-tools` / `.dcode-compose-chip` row was a THIRD band of
   controls under the old composer (framework pills, then model chips, then send).
   Those controls now live inside the lobby composer itself as `.dcode-fpill`, so
   this block is gone rather than left as dead weight. */

/* ── popover option rows ─────────────────────────────────────────────────────
   Used by the lobby's example and stack pickers. `.dcode-model-opt` already
   existed for the model list; this is the same shape for a plain option, so all
   three popovers look like one component instead of three. */
.dcode-pop-opt {
    display: flex; align-items: flex-start; gap: var(--s3);
    width: 100%; padding: var(--s3);
    border-radius: var(--r-sm);
    color: var(--c-muted); font-size: var(--t-sm); text-align: left;
    transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.dcode-pop-opt:hover { background: var(--c-hover); color: var(--c-text); }
.dcode-pop-opt.sel { background: var(--c-soft); color: var(--c-accent); }
.dcode-pop-opt > .material-symbols-rounded { font-size: 17px; flex: none; margin-top: 1px; }
.dcode-pop-opt > span:not(.material-symbols-rounded) { flex: 1; min-width: 0; line-height: var(--lh); }
.dcode-pop-opt small { display: block; margin-top: 2px; color: var(--c-faint); font-size: var(--t-xs); }
.dcode-pop-opt .chk { font-size: 16px; color: var(--c-accent); }

/* ══════════════════════════════════════════════════════════════════════════
   PREVIEW LOCATION BAR
   ──────────────────────────────────────────────────────────────────────────
   Shows where the preview currently is and accepts a path inside the project.
   The lock is literal: the field cannot navigate to an external URL, so it is
   styled as a scoped path field rather than a browser address bar.
   ══════════════════════════════════════════════════════════════════════════ */
.dcode-preview-loc {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s1);
    height: 24px; padding: 0 var(--s2);
    border: 1px solid var(--c-line-soft); border-radius: var(--r-full);
    background: var(--c-bg3);
    transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.dcode-preview-loc:focus-within { border-color: var(--c-ring); background: var(--c-bg2); }
.dcode-preview-loc .lock { font-size: 13px; color: var(--c-add); flex: none; }
.dcode-preview-input {
    flex: 1; min-width: 0; height: 100%;
    background: none; border: 0; outline: none;
    color: var(--c-text); font-family: var(--c-mono); font-size: var(--t-xs);
}
.dcode-preview-input::placeholder { color: var(--c-faint); }
.dcode-preview-state {
    flex: none; max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--c-faint); font-size: var(--t-xs);
}
.dcode-preview-state[hidden] { display: none; }

.dcode-page-opt {
    width: 100%; display: flex; align-items: center; gap: var(--s2);
    min-height: 34px; padding: var(--s1) var(--s2); border-radius: var(--r-sm);
    color: var(--c-muted); text-align: left;
}
.dcode-page-opt:hover { background: rgba(var(--c-ink), .06); color: var(--c-text); }
.dcode-page-opt.sel { background: var(--c-soft); color: var(--c-accent); }
.dcode-page-opt > .material-symbols-rounded { font-size: 16px; flex: none; }
.dcode-page-opt-name { flex: 1; min-width: 0; display: block; font-size: var(--t-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcode-page-opt-name small { display: block; color: var(--c-faint); font-size: var(--t-xs); }
.dcode-page-opt .chk { color: var(--c-accent); }

/* ══════════════════════════════════════════════════════════════════════════
   PREVIEW AUTOMATION — the shield
   ──────────────────────────────────────────────────────────────────────────
   While the agent drives the preview, the frame belongs to it. This layer is
   the visible half of that: it covers the iframe, absorbs every pointer gesture
   aimed at it, and keeps a Stop button permanently in reach. (The other half is
   inside the frame, where the driver discards real input events — an overlay
   alone cannot stop keystrokes once the frame holds focus.)

   It deliberately does NOT tint the page. The whole point is that the user can
   watch their own UI being operated, so obscuring it would defeat the feature;
   the moving accent ring the driver paints is what draws the eye instead.
   ══════════════════════════════════════════════════════════════════════════ */
.dcode-drive-shield {
    position: absolute; inset: var(--tabs-h) 0 0 0; z-index: 8;
    display: none; flex-direction: column; align-items: center;
    padding-top: var(--s3);
    /* `auto` is the load-bearing declaration: this element exists to intercept. */
    pointer-events: auto;
    cursor: not-allowed;
    background: transparent;
}
.dcode-drive-shield.on { display: flex; animation: dc-in var(--fast) var(--ease); }

.dcode-drive-bar {
    display: flex; align-items: center; gap: var(--s3);
    max-width: min(560px, calc(100% - var(--s5)));
    padding: var(--s2) var(--s2) var(--s2) var(--s4);
    background: color-mix(in srgb, var(--c-bg4) 94%, transparent);
    border: 1px solid var(--c-ring); border-radius: var(--r-full);
    box-shadow: var(--sh-3);
    backdrop-filter: blur(8px);
    cursor: default;
}
.dcode-drive-dot {
    flex: none; width: 8px; height: 8px; border-radius: var(--r-full);
    background: var(--c-accent);
    box-shadow: 0 0 0 0 var(--c-ring);
    animation: dc-drive-beat 1.6s var(--ease) infinite;
}
@keyframes dc-drive-beat {
    0%   { box-shadow: 0 0 0 0 var(--c-ring); }
    70%  { box-shadow: 0 0 0 8px rgba(183, 121, 92, 0); }
    100% { box-shadow: 0 0 0 0 rgba(183, 121, 92, 0); }
}
.dcode-drive-copy { display: flex; flex-direction: column; min-width: 0; line-height: var(--lh-tight); }
.dcode-drive-copy b { font-size: var(--t-sm); font-weight: 650; color: var(--c-text); }
.dcode-drive-copy small {
    font-size: var(--t-xs); color: var(--c-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dcode-drive-count {
    flex: none; padding: 2px var(--s2); border-radius: var(--r-full);
    background: var(--c-soft); color: var(--c-accent);
    font-size: 10px; font-weight: 700; white-space: nowrap;
}
.dcode-drive-count:empty { display: none; }
.dcode-drive-stop {
    flex: none; display: inline-flex; align-items: center; gap: 3px;
    height: var(--h-sm); padding: 0 var(--s3);
    border-radius: var(--r-full);
    background: var(--c-del); color: #fff;
    font-size: var(--t-xs); font-weight: 700;
    cursor: pointer;
    transition: background var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.dcode-drive-stop:hover { background: #d63f38; }
.dcode-drive-stop:active { transform: scale(.95); }
.dcode-drive-stop .material-symbols-rounded { font-size: 16px; }
.dcode-drive-hint {
    margin-top: var(--s2); padding: 3px var(--s3);
    border-radius: var(--r-full);
    background: rgba(0, 0, 0, .55);
    color: rgba(var(--c-ink), .8);
    font-size: var(--t-xs);
    cursor: default;
}
/* A thin accent frame around the whole canvas makes the "not yours right now"
   state readable from the corner of the eye, without covering the app. */
.dcode-canvas.driving .dcode-preview { box-shadow: inset 0 0 0 2px var(--c-ring); }
.dcode-canvas.driving .dcode-preview-bar { background: color-mix(in srgb, var(--c-soft) 34%, var(--c-bg2)); }

/* ══════════════════════════════════════════════════════════════════════════
   PREVIEW AUTOMATION — borrowing a vision model
   ══════════════════════════════════════════════════════════════════════════ */
.dcode-vision-lede { margin: 0 0 var(--s4); font-size: var(--t-md); color: var(--c-muted); line-height: var(--lh-loose); }
.dcode-vision-lede b { color: var(--c-text); font-weight: 650; }
.dcode-vision-lede em { color: var(--c-accent); font-style: normal; font-weight: 600; }
.dcode-vision-list {
    display: flex; flex-direction: column; gap: var(--s1);
    max-height: 40vh; overflow: auto;
    margin-bottom: var(--s4); padding: var(--s1);
    background: var(--c-bg3); border: 1px solid var(--c-line-soft); border-radius: var(--r-sm);
}
.dcode-vision-opt {
    display: flex; align-items: center; gap: var(--s3);
    padding: var(--s2) var(--s3); border-radius: var(--r-sm);
    cursor: pointer;
    transition: background var(--fast) var(--ease);
}
.dcode-vision-opt:hover { background: rgba(var(--c-ink), .05); }
.dcode-vision-opt:has(input:checked) { background: var(--c-soft); }
.dcode-vision-opt input { flex: none; accent-color: var(--c-accent); margin: 0; }
.dcode-vision-name {
    display: flex; flex-direction: column; min-width: 0;
    font-size: var(--t-sm); font-weight: 600; color: var(--c-text); line-height: var(--lh-tight);
}
.dcode-vision-name small { margin-top: 2px; font-size: var(--t-xs); font-weight: 500; color: var(--c-faint); }
.dcode-vision-opt:has(input:checked) .dcode-vision-name { color: var(--c-accent); }

/* ── out-of-credit notice in the transcript ──────────────────────────────────
   When a run is cut off mid-way because the daily allowance ran out, the
   transcript has to SAY so. Without this the user sees the agent stop in the
   middle of a task and reasonably concludes the product broke.

   Styled as a stated fact, not an alarm: it uses the same card shape as the
   other inline notices and the red is confined to the icon and the rule, because
   the user has not done anything wrong. */
.dcode-blocked {
    display: flex;
    align-items: flex-start;
    gap: var(--s3);
    margin: var(--s3) 0;
    padding: var(--s3) var(--s4);
    background: var(--c-del-soft);
    border: 1px solid rgba(248, 81, 73, .28);
    border-left: 2px solid var(--c-del);
    border-radius: var(--r);
    animation: dc-rise var(--med) var(--ease-out);
}
.dcode-blocked .material-symbols-rounded {
    font-size: 18px;
    color: var(--c-del);
    flex: none;
    margin-top: 1px;
}
.dcode-blocked strong {
    display: block;
    font-size: var(--t-md);
    font-weight: 650;
    color: var(--c-text);
    margin-bottom: 2px;
}
.dcode-blocked p {
    margin: 0;
    font-size: var(--t-sm);
    line-height: var(--lh);
    color: var(--c-muted);
}

/* ══════════════════════════════════════════════════════════════════════════
   EXPORT DIALOG

   The dialog's job is to be HONEST about what a download contains before the
   user commits to it, so the layout leads with the two choices and then explains
   what was left out. Everything below the choices is explanation, and is styled
   as such — quieter than the buttons, never competing with them.
   ═════════════════════════════════════════════════════════════════════════ */
.dcode-export-summary {
    display: flex; align-items: center; gap: var(--s4);
    margin-bottom: var(--s5); padding-bottom: var(--s4);
    border-bottom: 1px solid var(--c-line-soft);
}
.dcode-export-ico {
    flex: none;
    width: 42px; height: 42px;
    display: grid; place-items: center;
    font-size: 23px; color: var(--c-accent);
    background: var(--c-soft); border-radius: var(--r);
}
.dcode-export-summary strong { display: block; font-size: var(--t-lg); font-weight: 640; }
.dcode-export-summary p { margin: 2px 0 0; font-size: var(--t-sm); color: var(--c-muted); font-variant-numeric: tabular-nums; }

.dcode-export-grid { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.dcode-export-opt {
    display: flex; flex-direction: column; gap: 3px;
    padding: var(--s4);
    text-align: left;
    background: var(--c-bg3);
    border: 1px solid var(--c-line);
    border-radius: var(--r);
    transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.dcode-export-opt:hover { background: var(--c-hover); border-color: var(--c-ring); }
.dcode-export-opt:active { transform: translateY(1px); }
.dcode-export-opt:disabled { opacity: .6; }
.dcode-export-opt b { font-size: var(--t-md); font-weight: 640; color: var(--c-text); }
.dcode-export-opt small { font-size: var(--t-xs); color: var(--c-muted); line-height: var(--lh); }

.dcode-export-sub {
    margin: var(--s6) 0 var(--s2);
    font-size: var(--t-xs); font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--c-faint);
}
.dcode-export-note { margin: var(--s2) 0 0; font-size: var(--t-xs); color: var(--c-faint); line-height: var(--lh); }
.dcode-export-note code { font-family: var(--c-mono); color: var(--c-muted); }

.dcode-export-excluded { margin: var(--s3) 0 0; padding: 0; list-style: none; }
.dcode-export-excluded li {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
    padding: var(--s2) 0;
    font-size: var(--t-sm);
    border-bottom: 1px solid var(--c-line-soft);
}
.dcode-export-excluded li:last-child { border-bottom: 0; }
.dcode-export-excluded span { color: var(--c-muted); }
.dcode-export-excluded em {
    flex: none; font-style: normal; font-size: var(--t-xs);
    color: var(--c-faint); font-variant-numeric: tabular-nums;
}

.dcode-export-cmd {
    margin: var(--s3) 0 0; padding: var(--s3) var(--s4);
    font-family: var(--c-mono); font-size: var(--t-sm); line-height: 1.7;
    color: var(--c-text);
    background: var(--c-bg3);
    border: 1px solid var(--c-line);
    border-radius: var(--r-sm);
    white-space: pre-wrap; overflow-x: auto;
}

/* Secrets in a bundle are a real risk, so the warning is amber and sits where it
   cannot be scrolled past — but it does not BLOCK the export, because the files
   are the user's own and silently dropping them would break their project. */
.dcode-export-warn {
    display: flex; align-items: flex-start; gap: var(--s3);
    margin-top: var(--s4); padding: var(--s3) var(--s4);
    font-size: var(--t-sm); line-height: var(--lh);
    color: var(--c-text);
    background: var(--c-warn-soft);
    border: 1px solid rgba(210, 153, 34, .3);
    border-left: 2px solid var(--c-warn);
    border-radius: var(--r);
}
.dcode-export-warn .material-symbols-rounded { font-size: 18px; color: var(--c-warn); flex: none; margin-top: 1px; }

/* ══════════════════════════════════════════════════════════════════════════
   SHARE DIALOG

   The two modes are presented as one choice with the consequences written on
   them, because "Preview" versus "Preview + Edit" is a permissions decision and
   the user should not have to infer what it grants from the label alone.
   ═════════════════════════════════════════════════════════════════════════ */
.dcode-share-modes { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.dcode-share-mode {
    display: flex; flex-direction: column; gap: 3px;
    padding: var(--s4);
    text-align: left;
    background: var(--c-bg3);
    border: 1px solid var(--c-line);
    border-radius: var(--r);
    transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.dcode-share-mode > .material-symbols-rounded { font-size: 19px; color: var(--c-faint); margin-bottom: var(--s1); }
.dcode-share-mode b { font-size: var(--t-md); font-weight: 640; color: var(--c-text); }
.dcode-share-mode small { font-size: var(--t-xs); color: var(--c-muted); line-height: var(--lh); }
.dcode-share-mode:hover { background: var(--c-hover); }
.dcode-share-mode.is-on { background: var(--c-soft); border-color: var(--c-ring); }
.dcode-share-mode.is-on > .material-symbols-rounded { color: var(--c-accent); }
.dcode-share-mode.is-on b { color: var(--c-accent); }

.dcode-share-opts { display: grid; gap: var(--s3); margin-top: var(--s5); }
.dcode-share-field { display: flex; flex-direction: column; gap: var(--s2); }
.dcode-share-field > span {
    font-size: var(--t-xs); font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase;
    color: var(--c-faint);
}
.dcode-share-field > span em { font-style: normal; font-weight: 500; letter-spacing: normal; text-transform: none; opacity: .75; }
.dcode-share-field select {
    height: var(--h-lg); padding: 0 var(--s3);
    color: var(--c-text); background: var(--c-bg3);
    border: 1px solid var(--c-line); border-radius: var(--r-sm);
    font: inherit; font-size: var(--t-md);
}

/* The limits are the most important sentence in this dialog: they are what makes
   handing a link to a stranger a safe thing to do. Stated, not hidden behind an
   info icon. */
.dcode-share-limits {
    display: flex; align-items: flex-start; gap: var(--s3);
    margin-top: var(--s5); padding: var(--s3) var(--s4);
    font-size: var(--t-xs); line-height: var(--lh);
    color: var(--c-muted);
    background: var(--c-bg3);
    border: 1px solid var(--c-line-soft);
    border-radius: var(--r);
}
.dcode-share-limits .material-symbols-rounded { font-size: 17px; color: var(--c-add); flex: none; margin-top: 1px; }

.dcode-share-create { width: 100%; height: var(--h-lg); margin-top: var(--s5); justify-content: center; }
.dcode-share-revoke-all { width: 100%; height: var(--h-md); margin-top: var(--s3); justify-content: center; color: var(--c-del); }
.dcode-share-revoke-all:hover { background: var(--c-del-soft); }

/* ── the created link ─────────────────────────────────────────────────────
   Shown once, because the token is never stored server-side. The `dc-rise`
   entrance and the accent frame are there to make sure it is not missed. */
.dcode-share-created {
    margin-top: var(--s4); padding: var(--s4);
    background: var(--c-soft);
    border: 1px solid var(--c-ring);
    border-radius: var(--r);
    animation: dc-rise var(--med) var(--ease-out);
}
.dcode-share-created-head { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
.dcode-share-created-head .material-symbols-rounded { font-size: 18px; color: var(--c-add); }
.dcode-share-created-head b { font-size: var(--t-md); font-weight: 640; color: var(--c-text); }

.dcode-share-url { display: flex; gap: var(--s2); }
.dcode-share-url input {
    flex: 1; min-width: 0; height: var(--h-md); padding: 0 var(--s3);
    font-family: var(--c-mono); font-size: var(--t-xs);
    color: var(--c-text); background: var(--c-bg);
    border: 1px solid var(--c-line); border-radius: var(--r-sm);
    outline: none;
}
.dcode-share-url .dcode-btn { flex: none; height: var(--h-md); }

/* ── active links ────────────────────────────────────────────────────────── */
.dcode-share-list { margin: var(--s3) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s2); }
.dcode-share-list li {
    display: flex; align-items: center; gap: var(--s3);
    padding: var(--s2) var(--s3);
    background: var(--c-bg3);
    border: 1px solid var(--c-line-soft);
    border-radius: var(--r-sm);
}
.dcode-share-tag {
    flex: none; padding: 2px var(--s2);
    font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--c-muted); background: rgba(var(--c-ink), .06);
    border-radius: var(--r-full);
}
.dcode-share-tag.edit { color: var(--c-warn); background: var(--c-warn-soft); }
.dcode-share-meta { flex: 1; min-width: 0; font-size: var(--t-sm); color: var(--c-text); }
.dcode-share-meta small { display: block; font-size: var(--t-xs); color: var(--c-faint); font-variant-numeric: tabular-nums; }
.dcode-share-revoke {
    flex: none; width: var(--h-sm); height: var(--h-sm);
    display: grid; place-items: center;
    border-radius: var(--r-sm);
    color: var(--c-faint);
    transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.dcode-share-revoke:hover { color: var(--c-del); background: var(--c-del-soft); }
.dcode-share-revoke .material-symbols-rounded { font-size: 17px; }
.dcode-share-revoke:disabled { opacity: .4; }

/* The share and export dialogs carry more explanation than a prompt does, so the
   modal is allowed to be wider for them. */
.dcode-modal:has(.dcode-share-modes),
.dcode-modal:has(.dcode-export-grid) { max-width: 560px; }