/* ============================================================================
 * delphos-design.css — the Delphos Design studio.
 *
 * WHY THIS FILE LOOKS LIKE THIS
 *
 * Two rules shaped every decision here.
 *
 * 1. IT MUST FEEL LIKE DELPHOS, NOT LIKE A SECOND APP. Every colour comes from
 *    the host app's own tokens — `--accent` (terracotta), `--text-color`,
 *    `--chat-area-background`, `--border-color`, `--secondary-color` — with
 *    literal fallbacks only for the case where a token is absent. Light mode is
 *    handled the way the rest of the app handles it: `body.light_mode`. There is
 *    no separate design-studio palette to drift out of sync.
 *
 * 2. THE CANVAS MUST STAY CLEAR. An earlier version used floating panels and
 *    hard-coded preview padding, so controls both covered the design and stole
 *    space from it. Project view now uses three honest grid tracks: AI partner
 *    left, a flexible canvas centre, and nontechnical options right. Narrow
 *    screens collapse rails into explicit drawers instead of shrinking the work.
 *
 * The studio chrome is deliberately understated: neutral surfaces, one accent,
 * no gradients or decoration that could be mistaken for part of the design being
 * previewed. Accessibility is not optional in a tool that grades accessibility:
 * visible focus rings, 44px targets, reduced-motion honoured.
 * ========================================================================== */

/* The studio is a desktop workspace, exactly like Delphos Code. */
@media (max-width: 820px) { #design-menu-item { display: none !important; } }

/* Design mode replaces the chat workspace rather than floating over it. */
body.delphos-designing { overflow: hidden !important; }
body.delphos-designing .chat-list,
body.delphos-designing #chat-skeleton,
body.delphos-designing .typing-area,
body.delphos-designing .header,
body.delphos-designing .chat-header,
body.delphos-designing .right-sidebar,
body.delphos-designing .side-panel,
body.delphos-designing #right-rail,
/* The chat top bar and left sidebar. The sidebar was already invisible here by
   accident rather than by intent — `.nav-menu` is z-index 999 and `.ddx` is 9000,
   so it was merely COVERED. `.nav` is 9999, ABOVE `.ddx`, so the 60px chat top bar
   really did paint over the studio header. Both are now hidden outright, the same
   way canvas-panel.css already does it, so the studio does not depend on a
   z-index race to look right. */
body.delphos-designing .nav,
body.delphos-designing .nav-menu,
body.delphos-designing .nav-overlay-swipe { display: none !important; }

.ddx {
    /* ── palette: borrowed from the app, never invented ─────────────────── */
    --d-accent: var(--accent, #b7795c);
    --d-accent-strong: var(--accent-strong, #975d46);
    --d-accent-contrast: var(--accent-contrast, #fff);
    --d-soft: var(--accent-soft, rgba(183, 121, 92, .13));
    --d-ring: var(--accent-ring, rgba(183, 121, 92, .28));

    /* ── surface ramp ─────────────────────────────────────────────────────
       THIS WAS INVERTED AND HARDCODED, and it is why every pill, dropdown and
       dialog read as bulky blue-black slabs that did not belong to the app.
       Two mistakes compounded:

       1. DIRECTION. The app's ramp goes UP from the canvas — chat-area (#201f1d)
          is the darkest plane and controls sit ABOVE it (--secondary-color
          #2a2927, hover #353330). The old values went DOWN instead
          (--d-sunken: #0a0a0b), so controls were darker than the page they sat
          on. That alone makes a UI look heavy and wrong.
       2. HUE. Those literals (#0a0a0b, #1e1e21, #0d0d0f) are cool greys. The
          app's palette is WARM graphite. A cool near-black beside warm charcoal
          reads unmistakably as navy, which is exactly the "dark blue" complaint.

       Every step below is now the app's own token, so the studio inherits the
       warm ramp and flips with light mode for free — no separate palette to
       drift, and no light-mode override block needed at all. */
    --d-bg: var(--chat-area-background, #201f1d);        /* canvas               */
    --d-raised: var(--light-dark-background, #242321);   /* chrome, panels, cards */
    --d-float: var(--darker-background, #252321);        /* popovers, dialogs     */
    --d-control: var(--secondary-color, #2a2927);        /* button + input fills  */
    --d-hover: var(--secondary-hover-color, #353330);    /* hover                 */
    --d-active: var(--highlight-background, #383531);    /* pressed / selected    */
    /* Kept as an alias so the many existing consumers pick up the corrected
       value in one place rather than being renamed one by one. */
    --d-sunken: var(--d-control);

    --d-line: var(--border-color, rgba(245, 238, 230, .1));
    --d-line-soft: var(--nav-bar-border, rgba(245, 238, 230, .08));

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

    --d-good: #3fb950;
    --d-warn: #d29922;
    --d-bad: #f85149;
    --d-info: #58a6ff;

    --d-mono: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
    /* The one place the studio departs from the app's type: the launch screen's
       single question. A serif display face is what makes the front door read as
       a design tool rather than a settings panel, and a system stack buys it
       without a font request. */
    --d-serif: ui-serif, Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif;

    /* Shape and depth come from the app's shared scale (ui-polish.css declares
       --ui-radius* / --ui-shadow* / --ui-ease) so the studio's corners and
       elevation match every other panel in the product instead of inventing a
       second, slightly-different set. */
    --d-r-sm: var(--ui-radius-sm, 9px);
    --d-r: var(--ui-radius, 12px);
    --d-r-lg: var(--ui-radius-lg, 18px);
    --d-r-xl: 22px;

    --d-fast: 130ms;
    --d-mid: 210ms;
    --d-slow: 380ms;
    --d-ease: var(--ui-ease, cubic-bezier(.22, .61, .36, 1));
    --d-spring: cubic-bezier(.16, 1.06, .3, 1);

    --d-shadow-card: var(--ui-shadow-md, 0 8px 24px rgb(0 0 0 / .28));
    --d-shadow-pop: var(--ui-shadow-lg, 0 24px 70px rgb(0 0 0 / .5));

    position: fixed;
    inset: 0;
    z-index: 9000;
    display: none;
    flex-direction: column;
    background: var(--d-bg);
    color: var(--d-text);
    font-family: inherit;
    font-size: 13.5px;
    line-height: 1.55;
}

/* No light-mode override block is needed any more.
   Every surface above resolves to an app token that ui-polish.css already
   redeclares under `body.light_mode`, so the studio flips automatically and
   correctly. The old block hardcoded #ffffff / #f4f5f7 — cool greys that fought
   the app's warm light palette (--light-dark-background #f5f1ec) and, worse,
   pinned values that no longer tracked the theme at all. */

.ddx.is-open { display: flex; }

.ddx *, .ddx *::before, .ddx *::after { box-sizing: border-box; }
.ddx :focus-visible { outline: 2px solid var(--d-ring); outline-offset: 2px; border-radius: 4px; }

/* ── the two views ───────────────────────────────────────────────────────────
   The studio is either asking what to build or showing what it built. Those two
   states want opposite chrome, so only one is ever in the layout: an empty 380px
   conversation rail next to an empty stage is noise, not a workspace. */
.ddx-launch { display: none; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.ddx.is-launch .ddx-launch { display: block; }
.ddx.is-launch .ddx-body { display: none; }
.ddx.is-work .ddx-launch { display: none; }

/* Nothing in the top bar that needs an open project survives the launch screen —
   except the crumb, which is how you get back INTO the open design. */
.ddx.is-launch .ddx-only-work,
.ddx.is-launch .ddx-chip,
.ddx.is-launch [data-act="go-launch"] { display: none; }
.ddx.is-launch:not(.has-project) .ddx-crumb { display: none; }
.ddx.is-launch .ddx-crumb::before {
    content: 'arrow_back';
    font-family: 'Material Symbols Rounded';
    font-size: 17px;
    line-height: 1;
}
.ddx.is-launch .ddx-crumb .material-symbols-rounded { display: none; }

/* ── top bar ───────────────────────────────────────────────────────────────────
 * DELIBERATELY THE SAME BAR AS `.dcode-topbar` IN delphos-code.css.
 *
 * WHY. Delphos Code and Delphos Design are two surfaces of ONE product and a user
 * moves between them in a single session, so a header that changes height, fill,
 * control size and shape between them reads as two apps stitched together — which
 * is exactly the report. Code's bar is the one that was right, so this one now
 * follows it rather than the other way round.
 *
 * The metrics are restated as literals instead of shared through a token file
 * because the two products ship independent stylesheets and neither may depend on
 * the other loading. THEY MUST BE CHANGED TOGETHER:
 *
 *     bar height        48px       (--topbar-h)
 *     bar padding       0 10px     (--s3)
 *     bar gap           6px        (--s2)
 *     bar fill          --d-raised  ≡ Code's --c-bg2
 *     control height    28px       (--h-sm)
 *     control radius    6px        (--r-sm) — NOT --d-r-sm (9px), which is the
 *                                  studio's softer radius for panels and cards
 *     brand tile        28px, accent glyph on --d-soft
 *
 * Interaction overlays use color-mix on the TEXT token rather than Code's literal
 * rgba(245,238,230,.07). In the dark default the two resolve to the same value; in
 * light mode the literal is a white wash on a white bar (an invisible hover),
 * which is a bug worth not copying.
 */
.ddx-top {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 48px;
    padding: 0 10px;
    flex: 0 0 auto;
    border-bottom: 1px solid var(--d-line);
    background: var(--d-raised);
    position: relative;
    z-index: 3;
}

/* The way out, leading rather than trailing, with a hairline separator so it
   reads as "leave this surface" instead of as the first of the brand's
   decorations. Identical role and identical treatment to `.dcode-back`.
   The separator is a pseudo-element, not a border + padding, so the 28px box
   stays exactly 28px and the glyph stays centred inside it. */
.ddx-back {
    position: relative;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    margin-right: 6px;
    padding: 0;
    color: var(--d-muted);
    background: transparent;
    border-color: transparent;
    border-radius: 6px;
}
.ddx-back::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -3px;
    width: 1px;
    height: 18px;
    background: var(--d-line);
    transform: translateY(-50%);
}
.ddx-back:hover:not(:disabled) {
    color: var(--d-accent);
    background: color-mix(in srgb, var(--d-text) 8%, transparent);
    border-color: transparent;
}

/* Every icon button IN THE BAR is a 28px borderless square, matching
   `.dcode-iconbtn`. Scoped to `.ddx-top` on purpose: `.ddx-icon` is also the
   studio's dialog/toolbar button at 36px with a border, and that is correct
   everywhere else. */
.ddx-top .ddx-icon {
    width: 28px;
    height: 28px;
    padding: 0;
    color: var(--d-muted);
    background: transparent;
    border-color: transparent;
    border-radius: 6px;
    transition: background-color var(--d-fast) var(--d-ease), color var(--d-fast) var(--d-ease), transform var(--d-fast) var(--d-ease);
}
.ddx-top .ddx-icon .material-symbols-rounded { font-size: 19px; }
.ddx-top .ddx-icon:hover:not(:disabled) {
    color: var(--d-text);
    background: color-mix(in srgb, var(--d-text) 8%, transparent);
    border-color: transparent;
}
.ddx-top .ddx-icon:active:not(:disabled) { transform: scale(.94); }
@supports not (background: color-mix(in srgb, red, blue)) {
    .ddx-back:hover:not(:disabled),
    .ddx-top .ddx-icon:hover:not(:disabled) { background: var(--d-control); }
}

/* Brand: an accent glyph in a soft tile, then the product name. Code's brand,
   beat for beat — including the plain (non-accent) wordmark, because an accent
   word here and a plain one there was one of the tells. */
.ddx-brand {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding-right: 4px;
}
.ddx-brand-ico {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    color: var(--d-accent);
    background: var(--d-soft);
    border-radius: 6px;
    font-size: 19px !important;
}
.ddx-title { font-size: 13px; font-weight: 400; letter-spacing: -.01em; white-space: nowrap; }
.ddx-title strong { font-weight: 650; }

/* Hairline group separator — Code's `.dcode-tdiv`. */
.ddx-tdiv { width: 1px; height: 18px; background: var(--d-line); flex: 0 0 auto; margin: 0 4px; }
.ddx-spacer { flex: 1 1 auto; min-width: 6px; }

/* The open design's name IS the switcher — one control instead of a name plus a
   dropdown competing beside it. Sized to `.dcode-proj`. */
.ddx-crumb {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 40ch;
    height: 28px;
    padding: 0 6px 0 10px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--d-text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: color var(--d-fast) var(--d-ease), background-color var(--d-fast) var(--d-ease), border-color var(--d-fast) var(--d-ease);
}
.ddx-crumb::before { color: var(--d-faint); }
.ddx-crumb:hover:not(:disabled) { color: var(--d-text); background: color-mix(in srgb, var(--d-text) 5%, transparent); border-color: transparent; }
.ddx-crumb:disabled { opacity: .5; cursor: default; }
.ddx-crumb .material-symbols-rounded { font-size: 18px; color: var(--d-faint); }
.ddx-crumb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ddx-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    background: var(--d-soft);
    color: var(--d-accent);
}
.ddx-chip:empty { display: none; }
.ddx-chip.good { background: rgba(63, 185, 80, .13); color: var(--d-good); }
.ddx-chip.warn { background: rgba(210, 153, 34, .14); color: var(--d-warn); }

/* A pure host for the shared live-usage chip (assets/js/live-usage.js brings its
   own styling), so an idle turn leaves no gap in the bar. Mirrors Code's
   `.dcode-sb-item.is-slot`. */
.ddx-usage { display: inline-flex; align-items: center; flex: 0 0 auto; }
.ddx-usage:empty { display: none; }

/* ── controls ────────────────────────────────────────────────────────────── */
.ddx-btn, .ddx-icon {
    font: inherit;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 13px;
    color: var(--d-text);
    background: var(--d-sunken);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r-sm);
    cursor: pointer;
    transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}
/* Hover matches the app: the fill lifts to --secondary-hover-color. Recolouring
   the label and border to the accent instead (the old behaviour) made every
   hover look like a selection. */
.ddx-btn:hover:not(:disabled), .ddx-icon:hover:not(:disabled) { background: var(--d-hover); border-color: var(--d-line); }
.ddx-btn:disabled, .ddx-icon:disabled { opacity: .45; cursor: not-allowed; }

.ddx-btn.primary {
    background: var(--d-accent);
    border-color: transparent;
    color: var(--d-accent-contrast);
    font-weight: 600;
}
.ddx-btn.primary:hover:not(:disabled) { background: var(--d-accent-strong); border-color: transparent; color: var(--d-accent-contrast); }

/* Destructive confirmations get their own colour so "Delete" never looks like
   the safe default sitting next to Cancel. */
.ddx-btn.danger { background: rgba(248, 81, 73, .12); border-color: rgba(248, 81, 73, .38); color: var(--d-bad); font-weight: 600; }
.ddx-btn.danger:hover:not(:disabled) { background: var(--d-bad); border-color: transparent; color: #fff; }

/* One shared caret glyph for every control that opens a .ddx-menu. */
.ddx-caret::after {
    content: 'expand_more';
    font-family: 'Material Symbols Rounded';
    font-size: 16px;
    line-height: 1;
    color: var(--d-faint);
}

.ddx-icon { width: 36px; padding: 0; }
.ddx-icon.sm { width: 30px; height: 30px; }
.ddx-icon.sm .material-symbols-rounded { font-size: 17px; }
.ddx .material-symbols-rounded { font-size: 19px; line-height: 1; }

/* ── two-column body ─────────────────────────────────────────────────────── */
.ddx-body {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
}

.ddx-left {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid var(--d-line);
    background: var(--d-raised);
}

.ddx-right { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

/* ── conversation ────────────────────────────────────────────────────────── */
.ddx-log {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Each entry is an icon + text row, so the feed can be SKIMMED. Previously every
   line was undifferentiated wrapped text, which is why a working turn read as a
   wall of noise rather than progress. */
.ddx-line {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 13px;
    color: var(--d-muted);
}
.ddx-line-ico {
    flex: 0 0 auto;
    margin-top: 1px;
    font-size: 15px !important;
    color: var(--d-faint);
}
.ddx-line-txt { flex: 1 1 auto; min-width: 0; white-space: pre-wrap; word-break: break-word; }

.ddx-line.user {
    align-self: flex-end;
    max-width: 92%;
    padding: 8px 12px;
    border-radius: var(--d-r) var(--d-r) 3px var(--d-r);
    background: var(--d-soft);
    color: var(--d-text);
}
.ddx-line.assistant { color: var(--d-text); }
.ddx-line.assistant .ddx-line-ico { color: var(--d-accent); }

.ddx-line.step {
    margin-top: 6px;
    padding-top: 9px;
    border-top: 1px solid var(--d-line-soft);
    color: var(--d-text);
    font-size: 12.5px;
    font-weight: 600;
}
.ddx-line.step:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.ddx-line.step .ddx-line-ico { color: var(--d-accent); }

/* File writes are monospace rows that fill up live. */
.ddx-line.write { color: var(--d-muted); font-size: 11.5px; }
.ddx-line.write .ddx-line-txt { font-family: var(--d-mono); }
.ddx-line.write .ddx-line-ico { color: var(--d-faint); }

/* Still streaming: a soft pulse on the icon is the only motion in the feed, so
   it reads as "this is happening now" without competing with the design. */
.ddx-line.write.is-live .ddx-line-ico { color: var(--d-accent); animation: ddx-pulse 1.1s var(--d-ease) infinite; }
.ddx-line.write.is-done { color: var(--d-good); }
.ddx-line.write.is-done .ddx-line-ico { color: var(--d-good); animation: none; }
.ddx-line.write.is-aborted { color: var(--d-faint); text-decoration: line-through; }
.ddx-line.write.is-aborted .ddx-line-ico { animation: none; }

@keyframes ddx-pulse {
    0%, 100% { opacity: .35; }
    50% { opacity: 1; }
}

.ddx-line.meta, .ddx-line.tool { color: var(--d-faint); font-size: 11.5px; }
.ddx-line.review { color: var(--d-warn); font-weight: 600; font-size: 12.5px; }
.ddx-line.review .ddx-line-ico { color: var(--d-warn); }
.ddx-line.error { color: var(--d-bad); }
.ddx-line.error .ddx-line-ico { color: var(--d-bad); }

/* ── composer ────────────────────────────────────────────────────────────── */
/* ── composer ────────────────────────────────────────────────────────────────
   ONE field with the action inside it, the same shape as the launch composer and
   the app's own chat input. The previous version was a bare 76px textarea with a
   full-width "Design it" button underneath and a lone square stop button beside
   it — two controls fighting for the same job, one of them always dead. */
.ddx-compose { flex: 0 0 auto; padding: 12px; border-top: 1px solid var(--d-line); }

.ddx-field-wrap {
    padding: 8px 8px 8px 12px;
    background: var(--d-control);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r-lg);
    box-shadow: var(--input-wrapper-shadow, none);
    transition: border-color var(--d-fast) var(--d-ease), box-shadow var(--d-fast) var(--d-ease);
}
.ddx-field-wrap:focus-within {
    border-color: var(--d-ring);
    box-shadow: var(--input-wrapper-shadow, none), 0 0 0 3px var(--d-soft);
}

.ddx-compose textarea {
    display: block;
    width: 100%;
    min-height: 42px;
    max-height: 180px;
    padding: 4px 2px 6px 0;
    resize: none;
    overflow-y: auto;
    font: inherit;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--d-text);
    background: none;
    border: 0;
}
.ddx-compose textarea:focus { outline: none; }
.ddx-compose textarea::placeholder { color: var(--d-faint); }

.ddx-compose-actions { display: flex; align-items: center; gap: 6px; }

/* ── composer controls: attach + model ───────────────────────────────────────
   Both live in the composer rather than a settings panel because both are
   per-turn decisions. The model one previously did not exist at all: a design
   started on a cheap model could only be finished on a stronger one by creating
   a whole new project. */
.ddx-compose-icon {
    flex: 0 0 auto;
    position: relative;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    color: var(--d-muted);
    background: transparent;
    border: 1px solid transparent;
    /* Circular, matching the launch composer's icon pills exactly. The two attach
       buttons are the same control in two places and used to disagree about their
       own shape. */
    border-radius: 999px;
    cursor: pointer;
    transition: color var(--d-fast) var(--d-ease), background-color var(--d-fast) var(--d-ease), border-color var(--d-fast) var(--d-ease);
}
.ddx-compose-icon:hover { color: var(--d-text); background: var(--d-control); border-color: var(--d-line); }
.ddx-compose-icon .material-symbols-rounded { font-size: 19px; }
/* Attached-something state, so the count is visible without opening anything. */
.ddx-compose-icon.is-on { color: var(--d-accent); background: var(--d-soft); border-color: var(--d-ring); }
.ddx-compose-icon .ddx-pill-count { box-shadow: 0 0 0 2px var(--d-raised); }

.ddx-compose-model {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 40%;
    height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 8px;
    font: inherit;
    font-size: 11.5px;
    color: var(--d-muted);
    background: transparent;
    border: 1px solid var(--d-line);
    border-radius: 999px;
    cursor: pointer;
    transition: color var(--d-fast) var(--d-ease), background-color var(--d-fast) var(--d-ease), border-color var(--d-fast) var(--d-ease);
}
.ddx-compose-model:hover { color: var(--d-text); background: var(--d-hover); border-color: var(--d-ring); }
.ddx-compose-model .material-symbols-rounded { flex: none; font-size: 15px; }
.ddx-compose-model b {
    min-width: 0;
    font-weight: 600;
    color: var(--d-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── attached-reference chips ────────────────────────────────────────────────
   Above the textarea in BOTH composers, so a brief that grows to its 180px cap
   never scrolls the references out of view. */
.ddx-attach-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.ddx-attach-row[hidden] { display: none; }
.ddx-chip-file {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    height: 26px;
    padding: 0 4px 0 8px;
    font-size: 11.5px;
    color: var(--d-text);
    background: var(--d-sunken);
    border: 1px solid var(--d-line);
    border-radius: 999px;
}
.ddx-chip-file > .material-symbols-rounded { flex: none; font-size: 15px; color: var(--d-faint); }
.ddx-chip-file-name {
    min-width: 0;
    max-width: 20ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ddx-chip-file-x {
    flex: none;
    width: 19px;
    height: 19px;
    display: grid;
    place-items: center;
    color: var(--d-faint);
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: color var(--d-fast) var(--d-ease), background-color var(--d-fast) var(--d-ease);
}
.ddx-chip-file-x:hover { color: var(--d-bad); background: rgba(248, 81, 73, .14); }
.ddx-chip-file-x .material-symbols-rounded { font-size: 13px; }

.ddx-compose-hint {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 11px;
    color: var(--d-accent);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Send and Stop occupy the SAME slot: exactly one is a valid action at any
   moment, so exactly one is rendered. No permanently-disabled button. */
.ddx-go.is-stop { display: none; background: var(--d-bad); }
.ddx-go.is-stop:hover { background: #d5372f; }
.ddx-field-wrap.is-running [data-act="send"] { display: none; }
.ddx-field-wrap.is-running .ddx-go.is-stop { display: inline-flex; }

/* A square, not a glyph: the icon font renders "stop" at a size that looks
   accidental next to an arrow. */
.ddx-stop-glyph {
    width: 11px;
    height: 11px;
    border-radius: 2px;
    background: currentColor;
}

.ddx-hint { margin: 8px 2px 0; font-size: 11px; color: var(--d-faint); line-height: 1.45; }
.ddx.is-running .ddx-hint { visibility: hidden; }

/* ── "the AI is driving this view" ───────────────────────────────────────────
   Every preview op moves something the user is looking at — the surface, the
   theme, the tab. Without a signal those changes look like the UI twitching on
   its own, so the studio says who is in control. */
.ddx-agent {
    display: none;
    align-items: center;
    gap: 6px;
    max-width: 260px;
    padding: 0 10px;
    height: 26px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--d-accent);
    background: var(--d-soft);
    border-radius: 999px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ddx-agent::before {
    content: '';
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: ddx-pulse 1.1s var(--d-ease) infinite;
}
.ddx.is-agent-driving .ddx-agent { display: inline-flex; }

/* While the agent owns the view, the controls it is moving are marked read-only
   rather than silently fighting the user for them. */
.ddx.is-agent-driving .ddx-sel {
    border-color: var(--d-ring);
    background: var(--d-soft);
    color: var(--d-accent);
    pointer-events: none;
}
.ddx.is-agent-driving .ddx-stage { box-shadow: inset 0 0 0 1px var(--d-ring); }

/* ── tabs ────────────────────────────────────────────────────────────────── */
.ddx-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 46px;
    padding: 0 12px;
    flex: 0 0 auto;
    border-bottom: 1px solid var(--d-line);
    background: var(--d-raised);
}

.ddx-tab {
    font: inherit;
    font-size: 13px;
    height: 30px;
    padding: 0 12px;
    color: var(--d-muted);
    background: none;
    border: 0;
    border-radius: var(--d-r-sm);
    cursor: pointer;
}
.ddx-tab:hover { color: var(--d-text); background: var(--d-hover); }
.ddx-tab.is-on { color: var(--d-accent); background: var(--d-soft); font-weight: 600; }

/* Was a <select>. Native selects cannot show a description per row, cannot be
   animated, and render as an OS widget that ignores every token above — so these
   are buttons that open .ddx-menu instead. */
.ddx-sel {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font: inherit;
    font-size: 12.5px;
    height: 30px;
    max-width: 200px;
    padding: 0 10px;
    color: var(--d-text);
    background: var(--d-sunken);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r-sm);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color var(--d-fast) var(--d-ease), color var(--d-fast) var(--d-ease);
}
.ddx-sel::after {
    content: 'expand_more';
    font-family: 'Material Symbols Rounded';
    font-size: 16px;
    color: var(--d-faint);
}
.ddx-sel:hover { background: var(--d-hover); }

/* ── stage ───────────────────────────────────────────────────────────────── */
.ddx-stage { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; }

.ddx-preview-wrap { padding: 14px; }
.ddx-preview-note { margin-bottom: 9px; font-size: 11.5px; color: var(--d-faint); }
.ddx-frame-holder {
    overflow: hidden;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    background: #fff;
}
.ddx-frame { display: block; border: 0; background: #fff; }

/* ════════════════════════════════════════════════════════════════════════════
 * LAUNCH SCREEN
 *
 * The front door of a design tool is itself a design argument. It gets one
 * question in a display serif, one composer that holds every choice inline
 * instead of behind a settings panel, and a shelf of starting points you can see
 * rather than read. Everything else — the project list, the systems, the full
 * template taxonomy — sits below the fold where it cannot compete.
 * ══════════════════════════════════════════════════════════════════════════ */
.ddx-launch-scroll {
    height: 100%;
    overflow: auto;
    overscroll-behavior: contain;
    /* A single accent-tinted bloom behind the hero. The second layer used to be
       `rgb(255 255 255 / .028)`, which is invisible in dark mode and a dirty grey
       smear in light mode; deriving the whole effect from --accent-soft means it
       works in both themes and follows a user's accent change. */
    background: radial-gradient(ellipse 900px 420px at 50% -8%, var(--d-soft), transparent 70%);
}

/* A blocking notice (service down, wrong plan) replaces the hero but must NOT
   destroy it — the hero's DOM and listeners have to survive a retry. */
.ddx-notice-wrap { display: none; }
.ddx-launch.has-notice .ddx-launch-scroll { display: none; }
.ddx-launch.has-notice .ddx-notice-wrap { display: block; height: 100%; overflow: auto; }

.ddx-hero {
    max-width: 940px;
    margin: 0 auto;
    padding: clamp(28px, 7vh, 76px) 24px 8px;
    text-align: center;
}

.ddx-display {
    margin: 0 0 clamp(18px, 3.4vh, 34px);
    font-family: var(--d-serif);
    font-weight: 400;
    font-size: clamp(28px, 4.6vw, 46px);
    line-height: 1.12;
    letter-spacing: -.015em;
    color: var(--d-text);
}

/* ── the composer ────────────────────────────────────────────────────────── */
.ddx-forge {
    max-width: 720px;
    margin: 0 auto;
    padding: 14px 14px 12px;
    text-align: left;
    background: var(--d-raised);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r-xl);
    /* The app's own composer shadow, so this reads as the same kind of object as
       the chat input rather than a differently-elevated card. */
    box-shadow: var(--input-wrapper-shadow, var(--d-shadow-card));
    transition: border-color var(--d-mid) var(--d-ease), box-shadow var(--d-mid) var(--d-ease);
}
.ddx-forge:focus-within {
    border-color: var(--d-ring);
    box-shadow: var(--input-wrapper-shadow, var(--d-shadow-card)), 0 0 0 3px var(--d-soft);
}

.ddx-forge-input {
    display: block;
    width: 100%;
    min-height: 52px;
    max-height: 260px;
    padding: 4px 6px 10px;
    font: inherit;
    font-size: 15px;
    line-height: 1.5;
    color: var(--d-text);
    background: none;
    border: 0;
    resize: none;
    overflow-y: auto;
}
.ddx-forge-input:focus { outline: none; }
.ddx-forge-input::placeholder { color: var(--d-faint); }

/* ONE LINE, ALWAYS.
   `flex-wrap: wrap` here was a real bug, not a preference: the moment the
   Template label grew from "None" to "Desktop software UI" the row overflowed and
   the Model pill plus the send button dropped to a second line, so the composer
   visibly changed shape every time a template was chosen. The row now refuses to
   wrap; the two long labels shrink and ellipsize instead, and the icon pills and
   send button are locked at their intrinsic size so they can never be pushed
   off. */
.ddx-forge-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    min-width: 0;
}

/* Inline setting chips. Each carries its own label so the composer explains
   itself without a legend. Height is 34px, not 40px — the old ones read as
   oversized slabs next to the app's own 30-36px controls. */
.ddx-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 1 auto;
    min-width: 0;
    height: 34px;
    padding: 0 6px 0 10px;
    font: inherit;
    color: var(--d-text);
    background: var(--d-control);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r-sm);
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    transition: background-color var(--d-fast) var(--d-ease), border-color var(--d-fast) var(--d-ease);
}
.ddx-pill:hover { background: var(--d-hover); }
.ddx-pill:active { background: var(--d-active); }

/* Label and value stack inside one shrinkable box, so ellipsis works on the
   value while the caret stays glued to the right edge. */
.ddx-pill-txt { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.ddx-pill small {
    flex: 0 0 auto;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--d-faint);
}
.ddx-pill b {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 118px;
    font-size: 12.5px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ddx-pill-caret { flex: 0 0 auto; font-size: 15px !important; color: var(--d-faint); }
.ddx-pill.is-on { border-color: var(--d-ring); background: var(--d-soft); }
.ddx-pill.is-on b { color: var(--d-accent); }

/* ── icon-only pills ──────────────────────────────────────────────────────────
   WHY THESE CHANGED. A single glyph inside a 34px box with a 9px radius and the
   same fill as the labelled pills beside it read as a labelled control whose
   label had failed to load — a cropped grey slab in a row of legible chips. Two
   fixes: circular, so a lone glyph is obviously a lone glyph and not a truncated
   button; and quiet by default (no fill, muted glyph) so the composer's visual
   weight stays on the brief and the send button, not on two secondary actions.
   They still light up on hover and when active. */
.ddx-pill.is-icon {
    flex: 0 0 auto;
    position: relative;
    width: 34px;
    padding: 0;
    justify-content: center;
    border-radius: 999px;
    background: transparent;
    border-color: transparent;
    color: var(--d-muted);
}
.ddx-pill.is-icon .material-symbols-rounded { font-size: 20px !important; }
.ddx-pill.is-icon:hover { background: var(--d-control); border-color: var(--d-line); color: var(--d-text); }
.ddx-pill.is-icon:active { background: var(--d-active); }
.ddx-pill.is-icon.is-on {
    background: var(--d-soft);
    border-color: var(--d-ring);
    color: var(--d-accent);
}
/* Attached-reference count. Sits on the rim of the circle so it never pushes the
   glyph off-centre or changes the control's footprint. */
.ddx-pill-count {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--d-accent);
    color: var(--d-accent-contrast);
    font-size: 9.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    box-shadow: 0 0 0 2px var(--d-raised);
    pointer-events: none;
}
.ddx-pill-count[hidden] { display: none; }

.ddx-go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    color: var(--d-accent-contrast);
    background: var(--d-accent);
    border: 0;
    border-radius: var(--d-r-sm);
    cursor: pointer;
    transition: background-color var(--d-fast) var(--d-ease), transform var(--d-fast) var(--d-spring);
}
.ddx-go .material-symbols-rounded { font-size: 18px; }
.ddx-go:hover:not(:disabled) { background: var(--d-accent-strong); }
.ddx-go:active:not(:disabled) { transform: scale(.93); }
.ddx-go:disabled { opacity: .5; cursor: progress; }

/* ── vision status ───────────────────────────────────────────────────────
   The critique loop only means anything if a model can actually see the
   screenshot, so its status is stated on the front door rather than discovered
   mid-run. */
.ddx-vision {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 12px 0 0;
    font-size: 11.5px;
    color: var(--d-faint);
}
.ddx-vision:empty { display: none; }
.ddx-vision .material-symbols-rounded { font-size: 15px !important; }
.ddx-vision.is-bad { color: var(--d-bad); font-weight: 600; }

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

.ddx-launch.is-busy .ddx-forge { opacity: .6; pointer-events: none; }

/* ── template shelf ─────────────────────────────────────────────────────── */
.ddx-fan-label {
    margin: clamp(26px, 4.4vh, 44px) 0 14px;
    font-size: 12.5px;
    color: var(--d-muted);
}

/* 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 unambiguous. */
.ddx-fan {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 6px;
}

.ddx-tcard {
    --r: 0deg;
    --y: 0px;
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: clamp(104px, 12vw, 132px);
    margin: 0 -5px;
    padding: 15px 10px 11px;
    font: inherit;
    color: var(--d-muted);
    background: var(--d-raised);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r-lg);
    box-shadow: var(--d-shadow-card);
    cursor: pointer;
    transform: rotate(var(--r)) translateY(var(--y));
    transform-origin: 50% 120%;
    transition: transform var(--d-mid) var(--d-spring), border-color var(--d-fast) var(--d-ease),
                color var(--d-fast) var(--d-ease), box-shadow var(--d-mid) var(--d-ease);
}
.ddx-tcard:nth-child(1) { --r: -9deg; --y: 11px; }
.ddx-tcard:nth-child(2) { --r: -4.5deg; --y: 3px; }
.ddx-tcard:nth-child(3) { --r: 0deg; --y: -1px; }
.ddx-tcard:nth-child(4) { --r: 4.5deg; --y: 3px; }
.ddx-tcard:nth-child(5) { --r: 9deg; --y: 11px; }

.ddx-tcard:hover, .ddx-tcard:focus-visible {
    z-index: 3;
    color: var(--d-text);
    background: var(--d-hover);
    border-color: var(--d-line);
    transform: rotate(0deg) translateY(-10px) scale(1.04);
    box-shadow: var(--d-shadow-pop);
}
.ddx-tcard.is-on {
    z-index: 2;
    color: var(--d-accent);
    border-color: var(--d-ring);
    background: var(--d-soft);
    transform: rotate(0deg) translateY(-6px);
}
.ddx-tcard.is-on:hover { background: var(--d-soft); }

.ddx-tcard-art { display: block; margin-bottom: 10px; }
.ddx-tcard-art svg { display: block; width: 100%; height: auto; }
.ddx-tcard-name { display: block; font-size: 12px; font-weight: 600; }

.ddx-blank {
    display: inline-block;
    margin: clamp(20px, 3.6vh, 34px) auto 0;
    padding: 7px 4px;
    font: inherit;
    font-size: 12.5px;
    color: var(--d-muted);
    background: none;
    border: 0;
    cursor: pointer;
    transition: color var(--d-fast) var(--d-ease);
}
.ddx-blank span { display: inline-block; transition: transform var(--d-mid) var(--d-spring); }
.ddx-blank:hover { color: var(--d-accent); }
.ddx-blank:hover span { transform: translateX(4px); }

/* ── browse strip ───────────────────────────────────────────────────────── */
.ddx-browse {
    max-width: 940px;
    margin: clamp(30px, 6vh, 62px) auto 0;
    padding: 0 24px 56px;
}

.ddx-browse-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.ddx-segs {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: var(--d-sunken);
    border: 1px solid var(--d-line);
    border-radius: 999px;
}
.ddx-seg {
    height: 30px;
    padding: 0 14px;
    font: inherit;
    font-size: 12.5px;
    color: var(--d-muted);
    background: none;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: color var(--d-fast) var(--d-ease), background-color var(--d-fast) var(--d-ease);
}
.ddx-seg:hover { color: var(--d-text); background: var(--d-hover); }
.ddx-seg.is-on {
    color: var(--d-accent);
    background: var(--d-soft);
    box-shadow: inset 0 0 0 1px var(--d-ring);
    font-weight: 600;
}
.ddx-seg.is-on:hover { background: var(--d-soft); }

.ddx-search {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    height: 34px;
    padding: 0 12px;
    background: var(--d-sunken);
    border: 1px solid var(--d-line);
    border-radius: 999px;
    transition: border-color var(--d-fast) var(--d-ease);
}
.ddx-search:focus-within { border-color: var(--d-accent); }
.ddx-search .material-symbols-rounded { font-size: 17px; color: var(--d-faint); }
.ddx-search input {
    width: 168px;
    font: inherit;
    font-size: 12.5px;
    color: var(--d-text);
    background: none;
    border: 0;
}
.ddx-search input:focus { outline: none; }
.ddx-search input::placeholder { color: var(--d-faint); }
.ddx-search input::-webkit-search-cancel-button { filter: grayscale(1) opacity(.5); }

/* Reserving height keeps the page from jumping as you switch between Projects,
   Design systems and Templates — the three tabs hold very different amounts. */
.ddx-browse-body { min-height: 140px; }

.ddx-browse-empty { margin: 26px 0; font-size: 13px; color: var(--d-faint); text-align: center; }
.ddx-browse-group {
    margin: 22px 0 9px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--d-faint);
}
.ddx-browse-group:first-child { margin-top: 0; }
.ddx-chiprow { display: flex; flex-wrap: wrap; gap: 7px; }

.ddx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 10px; }

.ddx-pcard, .ddx-scard {
    position: relative;
    display: flex;
    background: var(--d-raised);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    transition: border-color var(--d-fast) var(--d-ease), transform var(--d-mid) var(--d-spring), box-shadow var(--d-mid) var(--d-ease);
}
.ddx-pcard:hover, .ddx-scard:hover {
    background: var(--d-hover);
    border-color: var(--d-line);
    transform: translateY(-2px);
    box-shadow: var(--d-shadow-card);
}
.ddx-scard.is-on { border-color: var(--d-ring); background: var(--d-soft); }
.ddx-scard.is-on:hover { background: var(--d-soft); }

.ddx-pcard-hit {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 13px 14px;
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    border-radius: inherit;
    text-align: left;
    cursor: pointer;
}
.ddx-pcard-top { display: flex; align-items: center; gap: 8px; }
.ddx-pcard-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--d-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ddx-pcard-desc {
    font-size: 12px;
    color: var(--d-muted);
    line-height: 1.45;
    /* Two lines: enough to recognise the brief, never enough to unbalance the grid. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ddx-pcard-meta { display: flex; gap: 10px; font-size: 11px; color: var(--d-faint); }
.ddx-pcard-cta { margin-top: 2px; font-size: 11.5px; font-weight: 600; color: var(--d-accent); }

/* Row tools stay out of the way until the card is hovered or one of them has
   focus — a keyboard user must never lose access to Delete. */
.ddx-pcard-tools {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 9px 9px 9px 0;
    opacity: 0;
    transition: opacity var(--d-fast) var(--d-ease);
}
.ddx-pcard:hover .ddx-pcard-tools,
.ddx-pcard:focus-within .ddx-pcard-tools { opacity: 1; }
.ddx-pcard-tools .ddx-icon:hover { border-color: var(--d-bad); color: var(--d-bad); }
.ddx-pcard-tools .ddx-icon[data-act="rename-project"]:hover { border-color: var(--d-accent); color: var(--d-accent); }

/* ── shared pill/idea chip (reused by the templates tab) ─────────────────── */
.ddx-idea {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: inherit;
    font-size: 12.5px;
    padding: 8px 13px;
    color: var(--d-text);
    background: var(--d-raised);
    border: 1px solid var(--d-line);
    border-radius: 999px;
    cursor: pointer;
    text-align: left;
    transition: border-color var(--d-fast) var(--d-ease), color var(--d-fast) var(--d-ease), background-color var(--d-fast) var(--d-ease);
}
.ddx-idea:hover { background: var(--d-hover); }
.ddx-idea .material-symbols-rounded { font-size: 16px; color: var(--d-faint); }
.ddx-idea small { font-family: var(--d-mono); font-size: 10px; color: var(--d-faint); }
.ddx-idea.is-on { border-color: var(--d-ring); background: var(--d-soft); color: var(--d-accent); font-weight: 600; }
.ddx-idea.is-on .material-symbols-rounded, .ddx-idea.is-on small { color: var(--d-accent); }

/* ── full-surface notice (offline / not premium) ─────────────────────────── */
.ddx-notice {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    max-width: 520px;
    margin: 0 auto;
    padding: clamp(48px, 14vh, 130px) 24px;
    text-align: center;
}
.ddx-notice-icon { font-size: 40px !important; color: var(--d-faint); }
.ddx-notice h2 { margin: 12px 0 6px; font-family: var(--d-serif); font-weight: 400; font-size: 26px; }
.ddx-notice-body { font-size: 13.5px; color: var(--d-muted); }
.ddx-notice-body p { margin: 0 0 10px; line-height: 1.6; }
.ddx-notice-body code {
    padding: 2px 6px;
    font-family: var(--d-mono);
    font-size: 12px;
    color: var(--d-text);
    background: var(--d-sunken);
    border: 1px solid var(--d-line);
    border-radius: 5px;
}
.ddx-notice-body pre {
    margin: 0 0 12px;
    padding: 11px 14px;
    text-align: left;
    background: var(--d-sunken);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r-sm);
    overflow-x: auto;
}
.ddx-notice-body pre code { padding: 0; background: none; border: 0; }
.ddx-notice .ddx-btn { margin-top: 8px; }

/* ── entrance ────────────────────────────────────────────────────────────────
   Gated on `.is-entering`, which JS adds only when the view is actually ENTERED
   and removes when the sequence finishes.

   Previously these selectors were `.ddx.is-launch …`, i.e. permanently true
   while the launch screen was up. Combined with a re-render on every click, the
   whole hero replayed a 255ms staggered entrance each time the user touched a
   dropdown — which is precisely why it looked like the page was reloading. */
.ddx-launch.is-entering .ddx-display,
.ddx-launch.is-entering .ddx-forge,
.ddx-launch.is-entering .ddx-vision,
.ddx-launch.is-entering .ddx-fan-label,
.ddx-launch.is-entering .ddx-fan,
.ddx-launch.is-entering .ddx-blank,
.ddx-launch.is-entering .ddx-browse { animation: ddx-rise var(--d-slow) var(--d-ease) backwards; }
.ddx-launch.is-entering .ddx-display { animation-delay: 20ms; }
.ddx-launch.is-entering .ddx-forge { animation-delay: 70ms; }
.ddx-launch.is-entering .ddx-vision { animation-delay: 110ms; }
.ddx-launch.is-entering .ddx-fan-label { animation-delay: 140ms; }
.ddx-launch.is-entering .ddx-fan { animation-delay: 170ms; }
.ddx-launch.is-entering .ddx-blank { animation-delay: 220ms; }
.ddx-launch.is-entering .ddx-browse { animation-delay: 260ms; }
.ddx-launch.is-entering .ddx-notice { animation: ddx-rise var(--d-slow) var(--d-ease) backwards; }

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

/* The fan deals itself out from the centre once the shelf has arrived. */
.ddx-launch.is-entering .ddx-tcard { animation: ddx-deal var(--d-slow) var(--d-spring) backwards; }
.ddx-launch.is-entering .ddx-tcard:nth-child(1) { animation-delay: 205ms; }
.ddx-launch.is-entering .ddx-tcard:nth-child(2) { animation-delay: 245ms; }
.ddx-launch.is-entering .ddx-tcard:nth-child(3) { animation-delay: 185ms; }
.ddx-launch.is-entering .ddx-tcard:nth-child(4) { animation-delay: 245ms; }
.ddx-launch.is-entering .ddx-tcard:nth-child(5) { animation-delay: 205ms; }

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

.ddx-empty { margin: auto; padding: 26px; max-width: 420px; text-align: center; color: var(--d-muted); font-size: 13px; }
.ddx-empty .material-symbols-rounded { display: block; margin: 0 auto 10px; font-size: 34px; color: var(--d-faint); }
.ddx-empty code {
    display: inline-block;
    margin-top: 10px;
    padding: 5px 9px;
    font-family: var(--d-mono);
    font-size: 12px;
    color: var(--d-text);
    background: var(--d-sunken);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r-sm);
}

/* ── files ───────────────────────────────────────────────────────────────── */
.ddx-pane { padding: 14px 16px 36px; }
.ddx-pane h3 {
    margin: 20px 0 9px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--d-faint);
}
.ddx-pane h3:first-child { margin-top: 0; }
.ddx-note { margin: 6px 0; color: var(--d-muted); font-size: 12.5px; }

.ddx-filelist { display: flex; flex-direction: column; gap: 1px; }
.ddx-file {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 34px;
    padding: 5px 9px;
    font: inherit;
    font-size: 12.5px;
    color: var(--d-muted);
    background: none;
    border: 0;
    border-radius: var(--d-r-sm);
    text-align: left;
    cursor: pointer;
}
.ddx-file:hover { background: var(--d-raised); color: var(--d-text); }
.ddx-file.is-on { background: var(--d-soft); color: var(--d-accent); }
.ddx-file .material-symbols-rounded { font-size: 17px; color: var(--d-faint); }
.ddx-file.is-on .material-symbols-rounded { color: var(--d-accent); }
.ddx-file span.path { font-family: var(--d-mono); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── editor ──────────────────────────────────────────────────────────────── */
.ddx-editor-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--d-line);
    font-family: var(--d-mono);
    font-size: 12px;
    color: var(--d-muted);
}
.ddx-code {
    flex: 1 1 auto;
    width: 100%;
    min-height: 62vh;
    padding: 13px 15px;
    border: 0;
    resize: none;
    color: var(--d-text);
    background: var(--d-bg);
    font-family: var(--d-mono);
    font-size: 12.5px;
    line-height: 1.65;
    tab-size: 4;
}

/* ── tokens ──────────────────────────────────────────────────────────────── */
.ddx-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 9px; }
.ddx-swatch { overflow: hidden; border: 1px solid var(--d-line); border-radius: var(--d-r-sm); background: var(--d-raised); }
.ddx-swatch i { display: block; height: 40px; }
.ddx-swatch b { display: block; padding: 6px 8px 0; font-size: 11.5px; font-weight: 600; }
.ddx-swatch span { display: block; padding: 0 8px 7px; font-family: var(--d-mono); font-size: 10.5px; color: var(--d-faint); }

.ddx-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ddx-table th {
    padding: 6px 8px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: var(--d-faint);
    border-bottom: 1px solid var(--d-line);
}
.ddx-table td { padding: 6px 8px; color: var(--d-muted); border-bottom: 1px solid var(--d-line-soft); vertical-align: top; }
.ddx-table td:first-child { font-family: var(--d-mono); font-size: 11.5px; color: var(--d-text); white-space: nowrap; }
.ddx-params { font-family: var(--d-mono); font-size: 11px; }

.ddx-bar { display: block; width: 120px; height: 6px; border-radius: 999px; background: var(--d-sunken); overflow: hidden; }
.ddx-bar i { display: block; height: 100%; background: var(--d-accent); }

/* ── review ──────────────────────────────────────────────────────────────── */
.ddx-verdict { display: flex; align-items: baseline; gap: 12px; }
.ddx-verdict b { font-size: 40px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.ddx-verdict b.good { color: var(--d-good); }
.ddx-verdict b.warn { color: var(--d-warn); }
.ddx-verdict small { color: var(--d-faint); font-size: 13px; }

.ddx-findings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.ddx-findings li {
    padding: 9px 11px;
    font-size: 12.5px;
    background: var(--d-raised);
    border: 1px solid var(--d-line);
    border-left: 3px solid var(--d-line);
    border-radius: var(--d-r-sm);
}
.ddx-findings li b { margin-right: 6px; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }
.ddx-findings li.sev-critical, .ddx-findings li.sev-error { border-left-color: var(--d-bad); }
.ddx-findings li.sev-critical b, .ddx-findings li.sev-error b { color: var(--d-bad); }
.ddx-findings li.sev-warning { border-left-color: var(--d-warn); }
.ddx-findings li.sev-warning b { color: var(--d-warn); }
.ddx-findings li.sev-info b { color: var(--d-faint); }
.ddx-where, .ddx-fix { display: block; margin-top: 4px; font-size: 11.5px; }
.ddx-where { font-family: var(--d-mono); color: var(--d-faint); }
.ddx-fix { color: var(--d-good); }

.ddx-row { display: flex; align-items: center; gap: 9px; margin-top: 18px; }

/* ════════════════════════════════════════════════════════════════════════════
 * DIALOGS AND POPOVERS
 *
 * These replace window.prompt / window.confirm / <select>. A tool that grades
 * other people's interfaces cannot ask its own questions with an OS widget it
 * has no control over, so both layers live outside .ddx (they are appended to
 * <body> and outlive a re-render) and therefore re-declare the tokens they need
 * against the app's own variables.
 * ══════════════════════════════════════════════════════════════════════════ */
.ddx-sheet, .ddx-menu-layer {
    --s-accent: var(--accent, #b7795c);
    --s-accent-strong: var(--accent-strong, #975d46);
    --s-accent-contrast: var(--accent-contrast, #fff);
    --s-soft: var(--accent-soft, rgba(183, 121, 92, .13));
    --s-ring: var(--accent-ring, rgba(183, 121, 92, .28));

    /* Same correction as .ddx above: the popover plane is --darker-background
       (what .chat-ctx-menu and .cs-modal already use), control fills sit ABOVE it
       on --secondary-color, and hover is --secondary-hover-color. The old
       --s-sunken: #0d0d0f was a cool near-black used for menu-item hover and for
       every dialog button, which is why the dropdown rows and buttons looked like
       dark blue blocks bolted onto a warm app. */
    --s-float: var(--darker-background, #252321);
    --s-control: var(--secondary-color, #2a2927);
    --s-hover: var(--secondary-hover-color, #353330);
    --s-sunken: var(--s-control);

    --s-line: var(--border-color, rgba(245, 238, 230, .1));
    --s-text: var(--text-color, #eeeae5);
    --s-muted: var(--subheading-color, #aaa39b);
    --s-faint: var(--placeholder-color, #938d86);
    --s-bad: #f85149;
    --s-mono: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
    --s-r: var(--ui-radius, 12px);
    --s-r-sm: var(--ui-radius-sm, 9px);
    --s-r-lg: var(--ui-radius-lg, 18px);
    --s-sh: var(--ui-shadow-lg, 0 24px 70px rgb(0 0 0 / .5));
    --s-ease: var(--ui-ease, cubic-bezier(.22, .61, .36, 1));
    --s-spring: cubic-bezier(.16, 1.06, .3, 1);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--s-text);
}
/* No light-mode block: every value above is an app token that already flips. */
.ddx-sheet *, .ddx-menu-layer *, .ddx-sheet *::before, .ddx-menu-layer *::before { box-sizing: border-box; }
.ddx-sheet :focus-visible, .ddx-menu-layer :focus-visible { outline: 2px solid var(--s-ring); outline-offset: 2px; border-radius: 6px; }

/* ── sheet (modal) ──────────────────────────────────────────────────────── */
.ddx-sheet {
    position: fixed;
    inset: 0;
    z-index: 9600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.ddx-sheet-scrim {
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / .58);
    backdrop-filter: blur(3px);
    animation: ddx-fade-in 200ms var(--s-ease);
}
.ddx-sheet.is-out .ddx-sheet-scrim { animation: ddx-fade-in 180ms var(--s-ease) reverse forwards; }

.ddx-sheet-card {
    position: relative;
    width: min(452px, 100%);
    max-height: 86vh;
    overflow: auto;
    padding: 22px 24px 18px;
    background: var(--s-float);
    border: 1px solid var(--s-line);
    border-radius: var(--s-r-lg);
    box-shadow: var(--s-sh);
    animation: ddx-sheet-in 260ms var(--s-spring);
}
.ddx-sheet-card.is-wide { width: min(600px, 100%); }
.ddx-sheet.is-out .ddx-sheet-card { animation: ddx-sheet-out 170ms var(--s-ease) forwards; }

@keyframes ddx-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ddx-sheet-in {
    from { opacity: 0; transform: translateY(16px) scale(.965); }
    to { opacity: 1; transform: none; }
}
@keyframes ddx-sheet-out {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: translateY(8px) scale(.98); }
}

.ddx-sheet-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: 12px;
    font-size: 21px !important;
    color: var(--s-accent);
    background: var(--s-soft);
    border-radius: 11px;
}
.ddx-sheet-title { margin: 0 0 6px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.ddx-sheet-text { margin: 0 0 16px; font-size: 12.5px; color: var(--s-muted); line-height: 1.55; }
.ddx-sheet-sub { margin: 20px 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--s-faint); }
.ddx-sheet-list { margin: 0; padding-left: 17px; font-size: 12px; color: var(--s-muted); }
.ddx-sheet-list li { margin-bottom: 5px; }
.ddx-sheet-list b { color: var(--s-text); }

/* ddxConfirm has no body at all, so an empty content slot must not leave a gap
   above the buttons. */
.ddx-sheet-body:empty { display: none; }

.ddx-sheet-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.ddx-sheet-actions:empty { display: none; }
.ddx-sheet-actions .ddx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    padding: 0 15px;
    font: inherit;
    font-size: 13px;
    color: var(--s-text);
    background: transparent;
    border: 1px solid var(--s-line);
    border-radius: 11px;
    cursor: pointer;
    transition: background-color 130ms var(--s-ease), border-color 130ms var(--s-ease), color 130ms var(--s-ease);
}
/* Matches .cs-modal-ghost / .cs-modal-primary, the app's existing dialog buttons:
   the secondary action is a transparent outline, not a filled slab. */
.ddx-sheet-actions .ddx-btn:hover { background: var(--s-hover); }
.ddx-sheet-actions .ddx-btn.primary { background: var(--s-accent); border-color: transparent; color: var(--s-accent-contrast); font-weight: 600; }
.ddx-sheet-actions .ddx-btn.primary:hover { background: var(--s-accent-strong); }
.ddx-sheet-actions .ddx-btn.danger { background: rgba(248, 81, 73, .12); border-color: rgba(248, 81, 73, .38); color: var(--s-bad); font-weight: 600; }
.ddx-sheet-actions .ddx-btn.danger:hover { background: var(--s-bad); border-color: transparent; color: #fff; }
.ddx-sheet .material-symbols-rounded { font-size: 18px; line-height: 1; }

/* ── fields ─────────────────────────────────────────────────────────────── */
.ddx-field { display: block; }
.ddx-field-label { display: block; margin-bottom: 6px; font-size: 11.5px; font-weight: 600; color: var(--s-muted); }
.ddx-input {
    display: block;
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    font: inherit;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--s-text);
    background: var(--s-sunken);
    border: 1px solid var(--s-line);
    border-radius: 10px;
    resize: vertical;
    transition: border-color 130ms var(--s-ease), box-shadow 130ms var(--s-ease);
}
textarea.ddx-input { min-height: 84px; }
.ddx-input::placeholder { color: var(--s-faint); }
.ddx-input:focus { outline: none; border-color: var(--s-accent); box-shadow: 0 0 0 3px var(--s-soft); }
/* An empty required field shakes and keeps focus rather than closing silently. */
.ddx-input.is-shake { animation: ddx-shake 380ms var(--s-ease); border-color: var(--s-bad); }

.ddx-field-hint { margin: 8px 0 0; font-size: 11.5px; color: var(--s-faint); }
.ddx-field-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.ddx-chip-btn {
    font: inherit;
    font-size: 11.5px;
    padding: 5px 10px;
    color: var(--s-muted);
    background: var(--s-sunken);
    border: 1px solid var(--s-line);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color 130ms var(--s-ease), color 130ms var(--s-ease);
}
.ddx-chip-btn:hover { border-color: var(--s-accent); color: var(--s-accent); }

/* ── export picker ──────────────────────────────────────────────────────── */
.ddx-export-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ddx-export-opt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 11px 13px;
    font: inherit;
    color: var(--s-text);
    background: var(--s-sunken);
    border: 1px solid var(--s-line);
    border-radius: 10px;
    text-align: left;
    cursor: pointer;
    transition: border-color 130ms var(--s-ease), transform 130ms var(--s-ease);
}
.ddx-export-opt b { font-size: 12.5px; font-weight: 600; }
.ddx-export-opt small { font-family: var(--s-mono); font-size: 10.5px; color: var(--s-faint); }
.ddx-export-opt:hover:not(:disabled) { border-color: var(--s-accent); transform: translateY(-1px); }
.ddx-export-opt:disabled { opacity: .6; cursor: progress; }
.ddx-export-opt.is-busy b { color: var(--s-accent); }

/* First-class sheet actions (handoff to Code / import from Figma). */
.ddx-export-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin-bottom: 12px; }
.ddx-export-handoff {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 12px 14px;
    font: inherit;
    color: var(--s-text);
    background: linear-gradient(135deg, var(--s-surface), var(--s-sunken));
    border: 1px solid var(--s-accent-soft, var(--s-line));
    border-radius: 12px;
    text-align: left;
    cursor: pointer;
    transition: border-color 130ms var(--s-ease), transform 130ms var(--s-ease), box-shadow 130ms var(--s-ease);
}
.ddx-export-handoff .material-symbols-rounded { color: var(--s-accent); }
.ddx-export-handoff b { font-size: 12.5px; font-weight: 700; }
.ddx-export-handoff small { font-size: 10.5px; color: var(--s-faint); line-height: 1.4; }
.ddx-export-handoff:hover:not(:disabled) { border-color: var(--s-accent); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.ddx-sheet-note { padding: 8px 11px; margin-bottom: 10px; font-size: 11.5px; color: var(--s-faint); background: var(--s-sunken); border: 1px solid var(--s-line); border-radius: 10px; line-height: 1.5; }
.ddx-sheet-note b { color: var(--s-text); }
.ddx-field { display: flex; flex-direction: column; gap: 5px; margin: 10px 0; font-size: 11.5px; color: var(--s-muted); }
.ddx-field-row { flex-direction: column; }
.ddx-field select, .ddx-field input {
    font: inherit; color: var(--s-text); background: var(--s-sunken);
    border: 1px solid var(--s-line); border-radius: 9px; padding: 8px 10px;
}
.ddx-textarea {
    width: 100%; min-height: 80px; resize: vertical; font-family: var(--s-mono, inherit); font-size: 12px;
    color: var(--s-text); background: var(--s-sunken); border: 1px solid var(--s-line);
    border-radius: 10px; padding: 10px 11px; box-sizing: border-box;
}
.ddx-textarea:focus, .ddx-field select:focus { outline: none; border-color: var(--s-accent); }
.ddx-handoff-go { margin-top: 10px; width: 100%; justify-content: center; }


/* ── motion clip recording ────────────────────────────────────────────────── */
.ddx-rec-overlay {
    position: fixed;
    z-index: 9800;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px 9px 15px;
    color: #fff;
    background: rgb(20 20 24 / .92);
    border: 1px solid rgb(255 255 255 / .14);
    border-radius: 999px;
    box-shadow: 0 12px 40px rgb(0 0 0 / .4);
    font-size: 12.5px;
    backdrop-filter: blur(8px);
}
.ddx-rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #f75549; animation: ddx-rec-pulse 1s ease-in-out infinite; }
@keyframes ddx-rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.ddx-rec-stop {
    font: inherit; font-size: 12px; font-weight: 600;
    color: #fff; background: #f75549;
    border: 0; border-radius: 999px; padding: 5px 14px; cursor: pointer;
}
.ddx-rec-stop:hover { background: #e0473c; }

.ddx-motion-video {
    display: block;
    width: 100%;
    max-height: 60vh;
    border-radius: 12px;
    background: #0c0c0e;
    border: 1px solid var(--s-line);
}

/* ── models-by-role sheet ────────────────────────────────────────────────
   Design's counterpart of Delphos Code's "Sub-agents" dialog. Sheet-scoped
   tokens (`--s-*`) for the reason spelled out under the share sheet below: a
   sheet layer is a sibling of `.ddx`, so `--d-*` does not reach it. */
.ddx-role-grid { display: grid; gap: 9px; }
.ddx-role-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 11px;
    background: var(--s-sunken);
    border: 1px solid var(--s-line);
    border-radius: 11px;
}
.ddx-role-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ddx-role-txt b { font-size: 12.5px; font-weight: 600; text-transform: capitalize; }
.ddx-role-txt small { font-size: 10.5px; color: var(--s-faint); line-height: 1.4; }
.ddx-role-row select.ddx-input { flex: 0 0 auto; width: 15rem; max-width: 45%; min-height: 34px; padding: 6px 9px; cursor: pointer; }

@media (max-width: 620px) {
    .ddx-role-row { flex-direction: column; align-items: stretch; gap: 7px; }
    .ddx-role-row select.ddx-input { width: 100%; max-width: none; }
}

/* ── share sheet ─────────────────────────────────────────────────────────
   The mode choice is the first and largest thing in the sheet on purpose: the
   difference between handing somebody a read-only link and handing them write
   access to your design is the only decision here that cannot be undone by
   revoking afterwards.

   FIRST, A TOKEN-SCOPE TRAP WORTH NAMING: the base `.ddx-btn` rule is written in
   the `--d-*` family, and those variables are declared on `.ddx` — the studio
   root. A sheet layer is appended to <body> as a SIBLING of `.ddx`, so nothing
   inside it inherits `--d-*` at all. That is why `.ddx-sheet-actions .ddx-btn`
   restates every property in `--s-*`. Buttons in the sheet BODY need the same
   treatment or they paint with an invalid background and vanish into the card. */
.ddx-sheet-body .ddx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    padding: 0 15px;
    font: inherit;
    font-size: 13px;
    color: var(--s-text);
    background: transparent;
    border: 1px solid var(--s-line);
    border-radius: 11px;
    cursor: pointer;
    transition: background-color 130ms var(--s-ease), border-color 130ms var(--s-ease), color 130ms var(--s-ease);
}
.ddx-sheet-body .ddx-btn:hover:not(:disabled) { background: var(--s-hover); }
.ddx-sheet-body .ddx-btn:disabled { opacity: .45; cursor: not-allowed; }
.ddx-sheet-body .ddx-btn.primary { background: var(--s-accent); border-color: transparent; color: var(--s-accent-contrast); font-weight: 600; }
.ddx-sheet-body .ddx-btn.primary:hover:not(:disabled) { background: var(--s-accent-strong); }
.ddx-sheet-body .ddx-btn.danger { background: rgba(248, 81, 73, .12); border-color: rgba(248, 81, 73, .38); color: var(--s-bad); font-weight: 600; }
.ddx-sheet-body .ddx-btn.danger:hover:not(:disabled) { background: var(--s-bad); border-color: transparent; color: #fff; }

.ddx-share-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 9px; }
.ddx-share-mode {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 13px 14px;
    font: inherit;
    color: var(--s-text);
    background: var(--s-sunken);
    border: 1px solid var(--s-line);
    border-radius: 12px;
    text-align: left;
    cursor: pointer;
    transition: border-color 130ms var(--s-ease), background-color 130ms var(--s-ease), box-shadow 130ms var(--s-ease);
}
.ddx-share-mode > .material-symbols-rounded { color: var(--s-faint); font-size: 20px !important; }
.ddx-share-mode b { font-size: 12.5px; font-weight: 600; }
.ddx-share-mode small { font-size: 11px; color: var(--s-muted); line-height: 1.45; }
.ddx-share-mode:hover { border-color: var(--s-ring); background: var(--s-hover); }
.ddx-share-mode.is-on { border-color: var(--s-accent); background: var(--s-soft); box-shadow: 0 0 0 1px var(--s-accent) inset; }
.ddx-share-mode.is-on > .material-symbols-rounded { color: var(--s-accent); }

.ddx-share-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 11px; margin-top: 15px; }
.ddx-share-opts .ddx-field-label em { font-style: normal; font-weight: 400; color: var(--s-faint); }
.ddx-share-opts select.ddx-input { cursor: pointer; }

.ddx-share-limits {
    display: flex;
    gap: 8px;
    margin-top: 15px;
    padding: 10px 12px;
    font-size: 11.5px;
    color: var(--s-muted);
    line-height: 1.5;
    background: var(--s-sunken);
    border: 1px solid var(--s-line);
    border-radius: 11px;
}
.ddx-share-limits .material-symbols-rounded { flex: none; color: var(--s-good, #3fb950); font-size: 16px !important; }

.ddx-btn.ddx-share-create { width: 100%; margin-top: 13px; height: 42px; justify-content: center; }

.ddx-share-created {
    margin-top: 14px;
    padding: 13px 14px;
    background: var(--s-soft);
    border: 1px solid var(--s-accent);
    border-radius: 12px;
    animation: ddx-fade-in 180ms var(--s-ease);
}
.ddx-share-created-head { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; font-size: 12.5px; color: var(--s-accent); }
.ddx-share-created-head .material-symbols-rounded { font-size: 17px !important; }
.ddx-share-url { display: flex; gap: 7px; }
.ddx-share-url input {
    flex: 1;
    min-width: 0;
    height: 38px;
    padding: 0 11px;
    color: var(--s-text);
    background: var(--s-control, var(--s-sunken));
    border: 1px solid var(--s-line);
    border-radius: 9px;
    font-family: var(--s-mono);
    font-size: 11.5px;
    outline: none;
}
.ddx-share-url .ddx-btn { flex: none; height: 38px; padding: 0 13px; display: inline-flex; align-items: center; gap: 6px; }

.ddx-share-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.ddx-share-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    background: var(--s-sunken);
    border: 1px solid var(--s-line);
    border-radius: 11px;
}
.ddx-share-tag {
    flex: none;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--s-muted);
    background: rgb(255 255 255 / .06);
}
.ddx-share-tag.edit { color: var(--s-warn, #d29922); background: rgba(210, 153, 34, .14); }
.ddx-share-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 12px; }
.ddx-share-meta small { font-size: 10.5px; color: var(--s-faint); }
.ddx-share-revoke {
    flex: none;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    color: var(--s-faint);
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: color 130ms var(--s-ease), background-color 130ms var(--s-ease);
}
.ddx-share-revoke:hover:not(:disabled) { color: var(--s-bad); background: rgba(248, 81, 73, .12); }
.ddx-share-revoke:disabled { opacity: .45; cursor: not-allowed; }
.ddx-btn.ddx-share-revoke-all { width: 100%; margin-top: 9px; height: 38px; justify-content: center; }

/* Used by the share sheet's Create button while the request is in flight. The
   studio had no spinner class of its own — every other busy state here is a text
   swap — so this is defined once, next to its only caller. */
.ddx-spin {
    width: 13px;
    height: 13px;
    flex: none;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ddx-spin 700ms linear infinite;
}
@keyframes ddx-spin { to { transform: rotate(360deg); } }

/* ── anchored menu (replaces every <select>) ────────────────────────────── */
.ddx-menu-layer { position: fixed; inset: 0; z-index: 9700; }

.ddx-menu {
    position: absolute;
    width: max-content;
    min-width: 208px;
    max-width: min(360px, calc(100vw - 20px));
    padding: 6px;
    background: var(--s-float);
    border: 1px solid var(--s-line);
    border-radius: var(--s-r);
    box-shadow: var(--s-sh);
    /* Scales out of the edge nearest its anchor, so it reads as belonging to the
       button that opened it rather than arriving from nowhere. */
    transform-origin: var(--ddx-menu-origin, top) center;
    animation: ddx-menu-in 170ms var(--s-spring);
}
.ddx-menu-layer.is-out .ddx-menu { animation: ddx-menu-out 130ms var(--s-ease) forwards; }

@keyframes ddx-menu-in {
    from { opacity: 0; transform: scale(.94) translateY(-6px); }
    to { opacity: 1; transform: none; }
}
@keyframes ddx-menu-out {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: scale(.97) translateY(-3px); }
}

.ddx-menu-head {
    padding: 7px 10px 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--s-faint);
}
.ddx-menu-scroll { max-height: min(58vh, 420px); overflow-y: auto; overscroll-behavior: contain; }
.ddx-menu-group {
    padding: 10px 10px 5px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--s-faint);
}

.ddx-menu-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    width: 100%;
    min-height: 36px;
    padding: 8px 9px;
    font: inherit;
    color: var(--s-text);
    background: none;
    border: 0;
    border-radius: 9px;
    text-align: left;
    cursor: pointer;
    transition: background-color 110ms var(--s-ease), color 110ms var(--s-ease);
}
.ddx-menu-item:hover, .ddx-menu-item:focus-visible { background: var(--s-hover); }
.ddx-menu-item.is-on { background: var(--s-soft); }
.ddx-menu-item.is-on .ddx-menu-txt b, .ddx-menu-item.is-on .ddx-menu-ico { color: var(--s-accent); }

.ddx-menu-ico { flex: 0 0 auto; margin-top: 1px; font-size: 18px !important; color: var(--s-faint); }
.ddx-menu-txt { flex: 1 1 auto; min-width: 0; }
.ddx-menu-txt b { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.ddx-menu-txt small { display: block; margin-top: 1px; font-size: 11px; color: var(--s-muted); line-height: 1.4; }

.ddx-menu-tick { flex: 0 0 auto; margin-top: 1px; font-size: 17px !important; color: var(--s-accent); opacity: 0; }
.ddx-menu-item.is-on .ddx-menu-tick { opacity: 1; }

/* Motion is decoration here, never information: every animated surface above is
   still fully usable with its duration collapsed. */
@media (prefers-reduced-motion: reduce) {
    .ddx-sheet *, .ddx-sheet *::before, .ddx-menu-layer *, .ddx-menu-layer *::before,
    .ddx-sheet-scrim, .ddx-sheet-card, .ddx-menu {
        animation-duration: .001ms !important;
        animation-delay: 0ms !important;
        transition-duration: .001ms !important;
    }
}

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
    .ddx-body { grid-template-columns: 330px minmax(0, 1fr); }
}

@media (max-width: 980px) {
    .ddx-body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) 46vh; }
    .ddx-left { order: 2; border-right: 0; border-top: 1px solid var(--d-line); }
    .ddx-right { order: 1; }
}

/* Below the fan's natural width the cards would overlap into illegibility, so it
   stops being a fan and becomes an honest wrapping grid. */
@media (max-width: 700px) {
    .ddx-fan { flex-wrap: wrap; gap: 8px; }
    .ddx-tcard { --r: 0deg; --y: 0px; width: calc(50% - 4px); margin: 0; }
    .ddx-tcard:hover, .ddx-tcard:focus-visible { transform: translateY(-4px); }
    .ddx-tcard.is-on { transform: none; }
    .ddx-search { margin-left: 0; width: 100%; }
    .ddx-search input { width: 100%; }
    /* Below this width six controls genuinely cannot share a line, so wrapping
       is correct here — unlike on desktop, where it was an accident that made the
       composer change shape whenever a label grew. The send button is pulled to
       the end of the last row so it stays the obvious final step. */
    .ddx-forge-row { flex-wrap: wrap; gap: 6px; }
    .ddx-forge-row .ddx-spacer { display: none; }
    .ddx-go { margin-left: auto; }
    .ddx-pill b { max-width: 88px; }
}

/* Both the OS preference AND the app's own in-product toggle (app-windows.js
   sets body.pref-reduce-motion), so a user who turned motion off in Delphos
   settings is honoured here too. */
@media (prefers-reduced-motion: reduce) {
    .ddx *, .ddx *::before, .ddx *::after {
        transition-duration: .001ms !important;
        animation-duration: .001ms !important;
        /* Without this, a `backwards`-filled entrance keeps the element at
           opacity 0 for its whole delay — a collapsed animation would flash
           blank instead of simply not moving. */
        animation-delay: 0ms !important;
    }
}

body.pref-reduce-motion .ddx *,
body.pref-reduce-motion .ddx *::before,
body.pref-reduce-motion .ddx *::after,
body.pref-reduce-motion .ddx-sheet *,
body.pref-reduce-motion .ddx-sheet-card,
body.pref-reduce-motion .ddx-sheet-scrim,
body.pref-reduce-motion .ddx-menu-layer *,
body.pref-reduce-motion .ddx-menu {
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
}
/* ========================================================================== 
 * CANVAS-FIRST WORKSPACE (project view only)
 * The launch lobby above stays untouched. Once a project opens, one visual
 * surface replaces the old IDE rails and technical tabs.
 * ========================================================================== */
.ddx.is-work {
    --dw-bg: #121315;
    --dw-bg-soft: #191a1d;
    --dw-panel: rgb(28 29 32 / .88);
    --dw-panel-solid: #1d1e21;
    --dw-panel-strong: #242529;
    --dw-line: rgb(255 255 255 / .11);
    --dw-line-strong: rgb(255 255 255 / .18);
    --dw-text: #f4f4f5;
    --dw-muted: #a7a9af;
    --dw-faint: #777a82;
    --dw-silver: #d9dce3;
    --dw-silver-2: #9298a5;
    --dw-glow: rgb(205 211 222 / .15);
    --dw-shadow: 0 24px 70px rgb(0 0 0 / .34);
    background: var(--dw-bg);
    color: var(--dw-text);
}
body.light_mode .ddx.is-work {
    --dw-bg: #eeece8;
    --dw-bg-soft: #f6f4f1;
    --dw-panel: rgb(255 255 255 / .86);
    --dw-panel-solid: #fff;
    --dw-panel-strong: #f5f3f0;
    --dw-line: rgb(28 27 25 / .1);
    --dw-line-strong: rgb(28 27 25 / .17);
    --dw-text: #202124;
    --dw-muted: #666970;
    --dw-faint: #92949a;
    --dw-silver: #6e7480;
    --dw-silver-2: #a7abb4;
    --dw-glow: rgb(255 255 255 / .68);
    --dw-shadow: 0 24px 70px rgb(47 43 38 / .15);
}
/* THE WORKSPACE KEEPS THE SAME TOP BAR AS THE LOBBY — AND AS DELPHOS CODE.
 *
 * This block used to REPLACE the bar the moment a project opened: 60px instead of
 * 48px, 18px padding instead of 10px, a cool `--dw-bg` blur instead of the warm
 * raised fill, and an animated silver gradient on the wordmark. So Delphos Design
 * had two headers of its own AND neither matched Delphos Code's — three variants
 * of the same chrome inside one product. Only the stacking context is kept here,
 * because the workspace floats rails that must pass under the bar. */
.ddx.is-work .ddx-top {
    position: relative;
    z-index: 20;
}
.ddx.is-work .ddx-icon,
.ddx.is-work .ddx-crumb {
    color: var(--d-muted);
    background: transparent;
    border-color: transparent;
}
.ddx.is-work .ddx-crumb { color: var(--d-text); }
.ddx.is-work .ddx-icon:hover:not(:disabled),
.ddx.is-work .ddx-crumb:hover:not(:disabled) {
    color: var(--d-text);
    background: color-mix(in srgb, var(--d-text) 8%, transparent);
    border-color: transparent;
}

/* Mode switch: docked right at the bar's own control height, which is where and
   how Delphos Code puts its trailing Preview / Run pair. It used to be a floating
   glass capsule pinned to the exact centre of the bar — a second, differently
   shaped control system inside a header that already had one, and the reason the
   two products' bars did not read as siblings. */
.ddx-modes {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
}
.ddx-mode {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--d-text);
    background: color-mix(in srgb, var(--d-text) 5%, transparent);
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--d-fast) var(--d-ease), background-color var(--d-fast) var(--d-ease), transform var(--d-fast) var(--d-ease);
}
.ddx-mode .material-symbols-rounded { font-size: 17px; }
.ddx-mode:hover { background: color-mix(in srgb, var(--d-text) 9%, transparent); }
.ddx-mode:active { transform: scale(.975); }
.ddx-mode.is-on { color: var(--d-accent); background: var(--d-soft); }
@supports not (background: color-mix(in srgb, red, blue)) {
    .ddx-mode { background: var(--d-control); }
    .ddx-mode:hover { background: var(--d-hover); }
}
.ddx.is-work .ddx-body {
    position: relative;
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% -12%, var(--dw-glow), transparent 42%),
        linear-gradient(145deg, var(--dw-bg-soft), var(--dw-bg) 58%);
}
.ddx-workspace { position: absolute; inset: 0; min-width: 0; min-height: 0; overflow: hidden; }
.ddx-stage { position: absolute; inset: 0; overflow: hidden; display: block; }
.ddx-visual-view, .ddx-code-view { width: 100%; height: 100%; min-height: 0; }
.ddx-visual-view[hidden], .ddx-code-view[hidden] { display: none !important; }
.ddx-preview-wrap {
    width: 100%;
    min-height: 100%;
    padding: 86px 300px 110px 58px;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}
.ddx[data-work-mode="preview"] .ddx-preview-wrap { padding: 86px 38px 38px; }
.ddx-preview-note { display: none; }
.ddx-frame-holder {
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid var(--dw-line-strong);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 28px 90px rgb(0 0 0 / .28), 0 0 0 7px rgb(255 255 255 / .025);
    transition: width 260ms var(--d-ease), height 260ms var(--d-ease), box-shadow 180ms ease;
}
body.light_mode .ddx-frame-holder { box-shadow: 0 26px 80px rgb(64 58 50 / .18), 0 0 0 7px rgb(255 255 255 / .5); }
.ddx[data-work-mode="preview"] .ddx-frame-holder { box-shadow: 0 22px 65px rgb(0 0 0 / .24); }
.ddx-frame { display: block; border: 0; background: #fff; }
.ddx.is-agent-driving .ddx-stage { box-shadow: none; }
.ddx.is-agent-driving .ddx-frame-holder { box-shadow: 0 28px 90px rgb(0 0 0 / .3), 0 0 0 2px rgb(207 212 222 / .32), 0 0 42px rgb(207 212 222 / .1); }
/* Floating viewport controls */
.ddx-canvas-toolbar {
    position: absolute;
    z-index: 12;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 5px 6px;
    color: var(--dw-muted);
    background: var(--dw-panel);
    border: 1px solid var(--dw-line);
    border-radius: 15px;
    box-shadow: 0 12px 38px rgb(0 0 0 / .2), inset 0 1px rgb(255 255 255 / .055);
    backdrop-filter: blur(22px) saturate(1.18);
}
.ddx-device-switch { display: flex; align-items: center; gap: 2px; }
.ddx-device, .ddx-toolbar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    color: var(--dw-muted);
    background: transparent;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    transition: color 140ms ease, background 140ms ease, transform 140ms ease;
}
.ddx-device:hover, .ddx-toolbar-icon:hover { color: var(--dw-text); background: rgb(255 255 255 / .07); }
.ddx-device:active, .ddx-toolbar-icon:active { transform: scale(.93); }
.ddx-device.is-on { color: var(--dw-text); background: var(--dw-panel-strong); box-shadow: inset 0 0 0 1px var(--dw-line); }
.ddx-device .material-symbols-rounded, .ddx-toolbar-icon .material-symbols-rounded { font-size: 17px; }
.ddx-surface-meta { min-width: 72px; padding: 0 4px; font-size: 10.5px; font-variant-numeric: tabular-nums; color: var(--dw-faint); white-space: nowrap; text-align: center; }
.ddx-toolbar-rule { width: 1px; height: 19px; background: var(--dw-line); }
.ddx-canvas-toolbar .ddx-agent {
    position: absolute;
    right: calc(100% + 10px);
    top: 8px;
    max-width: 230px;
    color: var(--dw-text);
    background: var(--dw-panel);
    border: 1px solid var(--dw-line);
    box-shadow: 0 8px 25px rgb(0 0 0 / .16);
}
.ddx-canvas-toolbar .ddx-agent::before { color: var(--dw-silver); }
.ddx[data-work-mode="code"] .ddx-canvas-toolbar { display: none; }

/* Floating AI collaborator */
.ddx-assistant {
    position: absolute;
    z-index: 14;
    left: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    width: min(370px, calc(100% - 40px));
    max-height: min(480px, calc(100% - 104px));
    overflow: hidden;
    color: var(--dw-text);
    background: var(--dw-panel);
    border: 1px solid var(--dw-line);
    border-radius: 22px;
    box-shadow: var(--dw-shadow), inset 0 1px rgb(255 255 255 / .055);
    backdrop-filter: blur(26px) saturate(1.2);
    transform-origin: bottom left;
    transition: opacity 180ms ease, transform 220ms var(--d-spring), visibility 180ms ease;
}
.ddx-assistant-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 10px 12px 8px 14px;
    border-bottom: 1px solid var(--dw-line);
}
.ddx-assistant-head > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.ddx-assistant-head b { font-size: 12.5px; font-weight: 650; letter-spacing: -.01em; }
.ddx-assistant-head small { font-size: 10.5px; color: var(--dw-faint); }
.ddx-ai-orb {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    color: #292b30;
    background: linear-gradient(145deg, #fafbfc, #aeb3be 56%, #727986);
    border-radius: 11px;
    box-shadow: inset 0 1px rgb(255 255 255 / .9), 0 6px 18px rgb(0 0 0 / .2);
}
.ddx-ai-orb::after { content: ''; position: absolute; inset: 1px; border-radius: 10px; background: linear-gradient(120deg, rgb(255 255 255 / .68), transparent 42%); pointer-events: none; }
.ddx-ai-orb .material-symbols-rounded { position: relative; z-index: 1; font-size: 17px; }
.ddx-panel-close { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; color: var(--dw-faint); background: transparent; border: 0; border-radius: 9px; cursor: pointer; }
.ddx-panel-close:hover { color: var(--dw-text); background: rgb(255 255 255 / .07); }
.ddx-panel-close .material-symbols-rounded { font-size: 18px; }
.ddx-assistant .ddx-log {
    flex: 1 1 auto;
    min-height: 78px;
    max-height: 230px;
    gap: 10px;
    padding: 13px 14px 8px;
    mask-image: linear-gradient(to bottom, transparent 0, #000 10px, #000 100%);
}
.ddx-assistant .ddx-line { font-size: 12.5px; color: var(--dw-muted); line-height: 1.5; }
.ddx-assistant .ddx-line.user { max-width: 88%; padding: 8px 11px; color: var(--dw-text); background: var(--dw-panel-strong); border: 1px solid var(--dw-line); border-radius: 13px 13px 4px 13px; }
.ddx-assistant .ddx-line.assistant { color: var(--dw-text); }
.ddx-assistant .ddx-line.meta, .ddx-assistant .ddx-line.tool { color: var(--dw-faint); font-size: 11px; }
.ddx-assistant .ddx-line.step { margin-top: 2px; padding-top: 8px; color: var(--dw-muted); border-top-color: var(--dw-line); font-size: 11.5px; }
.ddx-assistant .ddx-line.write { font-family: inherit; font-size: 11px; }
.ddx-assistant .ddx-line.write .ddx-line-txt { font-family: inherit; }
.ddx-assistant .ddx-line.write.is-done { color: #80b992; }
.ddx-suggestions { display: flex; gap: 6px; padding: 4px 12px 9px; overflow-x: auto; scrollbar-width: none; }
.ddx-suggestions::-webkit-scrollbar { display: none; }
.ddx-suggestions button {
    flex: 0 0 auto;
    height: 28px;
    padding: 0 10px;
    font: inherit;
    font-size: 10.5px;
    color: var(--dw-muted);
    background: rgb(255 255 255 / .045);
    border: 1px solid var(--dw-line);
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
}
.ddx-suggestions button:hover { color: var(--dw-text); border-color: var(--dw-line-strong); background: rgb(255 255 255 / .075); }
.ddx-assistant .ddx-compose { padding: 0 10px 10px; border: 0; }
.ddx-assistant .ddx-field-wrap { padding: 8px 8px 7px 11px; background: var(--dw-panel-strong); border-color: var(--dw-line); border-radius: 15px; box-shadow: inset 0 1px rgb(255 255 255 / .025); }
.ddx-assistant .ddx-field-wrap:focus-within { border-color: var(--dw-line-strong); box-shadow: 0 0 0 3px rgb(207 212 222 / .08); }
.ddx-assistant .ddx-compose textarea { min-height: 34px; max-height: 120px; padding: 2px 2px 4px 0; color: var(--dw-text); font-size: 12.5px; }
.ddx-assistant .ddx-compose textarea::placeholder { color: var(--dw-faint); }
.ddx-assistant .ddx-go { width: 31px; height: 31px; color: #202226; background: linear-gradient(145deg, #f7f8fa, #adb3bd); border-radius: 10px; }
.ddx-assistant .ddx-go:hover:not(:disabled) { background: linear-gradient(145deg, #fff, #c5cad2); }
.ddx-assistant .ddx-go.is-stop { color: #fff; background: #c94f4f; }
.ddx-assistant-peek {
    position: absolute;
    z-index: 14;
    left: 20px;
    bottom: 20px;
    display: flex;
    align-items: center;
    gap: 9px;
    height: 48px;
    padding: 0 14px 0 8px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--dw-text);
    background: var(--dw-panel);
    border: 1px solid var(--dw-line);
    border-radius: 16px;
    box-shadow: var(--dw-shadow);
    backdrop-filter: blur(20px);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px) scale(.96);
    transition: opacity 180ms ease, transform 200ms var(--d-spring), visibility 180ms ease;
}
.ddx-assistant-peek .ddx-ai-orb { width: 32px; height: 32px; }
.ddx.is-assistant-closed .ddx-assistant { opacity: 0; visibility: hidden; transform: translateY(12px) scale(.96); pointer-events: none; }
.ddx.is-assistant-closed .ddx-assistant-peek { opacity: 1; visibility: visible; transform: none; }
.ddx[data-work-mode="preview"] .ddx-assistant,
.ddx[data-work-mode="preview"] .ddx-assistant-peek,
.ddx[data-work-mode="code"] .ddx-assistant,
.ddx[data-work-mode="code"] .ddx-assistant-peek { display: none; }
/* Nontechnical creative controls */
.ddx-inspector {
    position: absolute;
    z-index: 13;
    top: 72px;
    right: 20px;
    width: 260px;
    max-height: calc(100% - 92px);
    overflow: auto;
    color: var(--dw-text);
    background: var(--dw-panel);
    border: 1px solid var(--dw-line);
    border-radius: 20px;
    box-shadow: var(--dw-shadow), inset 0 1px rgb(255 255 255 / .055);
    backdrop-filter: blur(24px) saturate(1.2);
}
.ddx-inspector-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 16px 13px; border-bottom: 1px solid var(--dw-line); }
.ddx-inspector-head > span:first-child { display: flex; flex-direction: column; }
.ddx-inspector-head b { font-size: 12.5px; font-weight: 650; letter-spacing: -.01em; }
.ddx-inspector-head small { margin-top: 1px; font-size: 10.5px; color: var(--dw-faint); }
.ddx-inspector-head > .material-symbols-rounded { margin-top: 1px; font-size: 17px; color: var(--dw-faint); }
.ddx-inspector-body { padding: 13px; }
.ddx-control-group { min-width: 0; margin: 0 0 15px; padding: 0; border: 0; }
.ddx-control-group legend, .ddx-control-label { display: block; width: 100%; margin: 0 0 7px; padding: 0 2px; font-size: 9.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--dw-faint); }
.ddx-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.ddx-choice-grid.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ddx-choice-grid button {
    min-width: 0;
    height: 32px;
    padding: 0 7px;
    overflow: hidden;
    font: inherit;
    font-size: 10.5px;
    font-weight: 550;
    color: var(--dw-muted);
    background: rgb(255 255 255 / .035);
    border: 1px solid var(--dw-line);
    border-radius: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}
.ddx-choice-grid button:hover { color: var(--dw-text); background: rgb(255 255 255 / .07); }
.ddx-choice-grid button.is-on { color: var(--dw-text); background: var(--dw-panel-strong); border-color: var(--dw-line-strong); box-shadow: inset 0 1px rgb(255 255 255 / .045); }
.ddx-palette-row { display: flex; gap: 8px; }
.ddx-palette-row button { position: relative; width: 34px; height: 34px; padding: 0; overflow: hidden; background: #cbd0d8; border: 2px solid transparent; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .14); cursor: pointer; }
.ddx-palette-row button::before, .ddx-palette-row button::after { content: ''; position: absolute; inset: 0 50% 0 0; background: #767d89; }
.ddx-palette-row button::after { inset: 50% 0 0 50%; background: #f2f3f5; }
.ddx-palette-row button.warm { background: #d8ad8e; }
.ddx-palette-row button.warm::before { background: #6e4c3d; }
.ddx-palette-row button.warm::after { background: #f4e6d9; }
.ddx-palette-row button.mono { background: #818181; }
.ddx-palette-row button.mono::before { background: #171717; }
.ddx-palette-row button.mono::after { background: #f5f5f5; }
.ddx-palette-row button.ocean { background: #57a4b9; }
.ddx-palette-row button.ocean::before { background: #173d52; }
.ddx-palette-row button.ocean::after { background: #c9e7e9; }
.ddx-palette-row button.is-on { border-color: var(--dw-text); box-shadow: 0 0 0 2px var(--dw-panel-solid), 0 0 0 3px var(--dw-line-strong); }
.ddx-scene-direction { margin: 0 0 15px; padding-top: 13px; border-top: 1px solid var(--dw-line); }
.ddx-scene-direction[hidden] { display: none; }
.ddx-toggle-row { display: flex; align-items: center; width: 100%; min-height: 45px; padding: 7px 2px; font: inherit; color: var(--dw-text); background: transparent; border: 0; border-top: 1px solid var(--dw-line); text-align: left; cursor: pointer; }
.ddx-toggle-row > span { display: flex; flex-direction: column; }
.ddx-toggle-row b { font-size: 11.5px; font-weight: 600; }
.ddx-toggle-row small { font-size: 9.5px; color: var(--dw-faint); }
.ddx-toggle-row i { position: relative; width: 32px; height: 19px; margin-left: auto; background: var(--dw-panel-strong); border: 1px solid var(--dw-line); border-radius: 999px; transition: background 150ms ease; }
.ddx-toggle-row i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 11px; height: 11px; background: var(--dw-faint); border-radius: 50%; transition: transform 180ms var(--d-spring), background 150ms ease; }
.ddx-toggle-row.is-on i { background: #c9cdd5; border-color: transparent; }
.ddx-toggle-row.is-on i::after { background: #292b2f; transform: translateX(13px); }
.ddx-apply-direction { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; height: 38px; margin-top: 10px; font: inherit; font-size: 11.5px; font-weight: 650; color: #24262a; background: linear-gradient(135deg, #f9fafb, #aeb4bf); border: 0; border-radius: 11px; box-shadow: inset 0 1px rgb(255 255 255 / .8), 0 8px 22px rgb(0 0 0 / .16); cursor: pointer; transition: transform 140ms ease, filter 140ms ease; }
.ddx-apply-direction:hover { filter: brightness(1.08); }
.ddx-apply-direction:active { transform: scale(.98); }
.ddx-apply-direction .material-symbols-rounded { font-size: 16px; }
.ddx[data-work-mode="preview"] .ddx-inspector,
.ddx[data-work-mode="code"] .ddx-inspector { display: none; }

/* Explicit, read-only Code mode */
.ddx-code-view { padding: 22px; overflow: auto; background: linear-gradient(145deg, var(--dw-bg-soft), var(--dw-bg)); }
.ddx-code-shell { width: min(1120px, 100%); min-height: calc(100% - 2px); margin: 0 auto; overflow: hidden; background: var(--dw-panel-solid); border: 1px solid var(--dw-line); border-radius: 18px; box-shadow: var(--dw-shadow); }
.ddx-code-head { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 13px; border-bottom: 1px solid var(--dw-line); background: var(--dw-panel); }
.ddx-code-picker { display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: min(470px, 55vw); height: 34px; padding: 0 10px; font: inherit; font-size: 11.5px; color: var(--dw-text); background: var(--dw-panel-strong); border: 1px solid var(--dw-line); border-radius: 10px; cursor: pointer; }
.ddx-code-picker span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ddx-code-picker .material-symbols-rounded { flex: 0 0 auto; font-size: 16px; color: var(--dw-faint); }
.ddx-code-readonly { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--dw-faint); white-space: nowrap; }
.ddx-code-readonly .material-symbols-rounded { font-size: 14px; }
.ddx-code-language { font-size: 10.5px; color: var(--dw-faint); }
.ddx-code-head .ddx-toolbar-icon { flex: 0 0 auto; }
.ddx-code-preview { min-height: calc(100vh - 160px); margin: 0; padding: 22px 24px 50px; overflow: auto; color: #d8dbe1; background: #151619; font: 12.5px/1.72 var(--d-mono); tab-size: 4; white-space: pre; }
body.light_mode .ddx-code-preview { color: #34363a; background: #fbfaf8; }
.ddx-code-preview code { font: inherit; }
.ddx-code-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 40px; color: var(--dw-muted); text-align: center; }
.ddx-code-empty .material-symbols-rounded { font-size: 34px; color: var(--dw-faint); }
.ddx-code-empty h2 { margin: 12px 0 4px; color: var(--dw-text); font-size: 18px; }
.ddx-code-empty p { margin: 0; font-size: 12px; }
/* Premium export sheet */
.ddx-export-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.ddx-export-opt { position: relative; min-height: 72px; justify-content: center; padding: 12px 14px 12px 48px; background: var(--s-control); border-radius: 13px; }
.ddx-export-opt::before { content: 'download'; position: absolute; left: 14px; top: 50%; display: grid; place-items: center; width: 25px; height: 25px; color: var(--s-faint); background: rgb(255 255 255 / .05); border: 1px solid var(--s-line); border-radius: 8px; transform: translateY(-50%); font: 16px/1 'Material Symbols Rounded'; }
.ddx-export-opt b { font-size: 12px; line-height: 1.35; }
.ddx-export-opt small { margin-top: 2px; font-family: inherit; font-size: 10.5px; }
.ddx-export-opt:hover:not(:disabled) { border-color: var(--s-ring); background: var(--s-hover); box-shadow: 0 8px 22px rgb(0 0 0 / .13); }
.ddx-export-unavailable { position: relative; padding: 10px 12px 10px 38px; color: var(--s-muted); background: transparent; border: 1px solid var(--s-line); border-radius: 11px; }
.ddx-export-unavailable::before { content: 'conversion_path'; position: absolute; left: 12px; top: 12px; color: var(--s-faint); font: 16px/1 'Material Symbols Rounded'; }
.ddx-export-unavailable b { display: block; color: var(--s-text); font-size: 11.5px; }
.ddx-export-unavailable small { display: block; margin-top: 2px; font-size: 10.5px; line-height: 1.4; }

@media (max-width: 1180px) {
    .ddx.is-work .ddx-body { display: block; }
    .ddx-preview-wrap { padding-right: 276px; padding-left: 34px; }
    .ddx-inspector { right: 14px; width: 242px; }
    .ddx-assistant { left: 14px; bottom: 14px; width: 340px; }
    .ddx-assistant-peek { left: 14px; bottom: 14px; }
}
@media (max-width: 980px) {
    .ddx.is-work .ddx-body { display: block; grid-template: none; }
    .ddx.is-work .ddx-left { display: none; }
    .ddx.is-work .ddx-right { order: initial; }
    /* The mode switch is docked, not centred, so nothing has to be un-pinned here
       any more — it only drops its labels to stay on one line. */
    .ddx-mode { padding: 0 8px; }
    .ddx-mode > span:last-child { display: none; }
    .ddx-preview-wrap { padding: 82px 24px 245px; }
    .ddx[data-work-mode="preview"] .ddx-preview-wrap { padding: 82px 22px 24px; }
    .ddx-inspector { top: auto; right: 14px; bottom: 14px; width: 230px; max-height: 218px; }
    .ddx-inspector-head { padding: 11px 13px; }
    .ddx-inspector-body { padding: 10px; }
    .ddx-control-group { margin-bottom: 10px; }
    .ddx-scene-direction, .ddx-toggle-row { display: none; }
    .ddx-assistant { width: calc(100% - 274px); max-height: 218px; }
    .ddx-assistant .ddx-log { min-height: 54px; max-height: 88px; }
    .ddx-suggestions { display: none; }
}
@media (max-width: 720px) {
    .ddx.is-work .ddx-top { padding: 0 8px; }
    .ddx.is-work .ddx-title, .ddx.is-work .ddx-crumb, .ddx.is-work [data-act="go-launch"], .ddx.is-work .ddx-chip, .ddx.is-work .ddx-tdiv { display: none; }
    .ddx-mode { width: 28px; padding: 0; }
    .ddx-canvas-toolbar { top: 10px; }
    .ddx-canvas-toolbar .ddx-agent, .ddx-surface-meta { display: none !important; }
    .ddx-preview-wrap, .ddx[data-work-mode="preview"] .ddx-preview-wrap { padding: 68px 12px 86px; }
    .ddx-inspector { display: none; }
    .ddx-assistant { left: 10px; right: 10px; bottom: 10px; width: auto; max-height: 250px; }
    .ddx-assistant-peek { left: 10px; bottom: 10px; }
    .ddx-code-view { padding: 10px; }
    .ddx-code-shell { border-radius: 13px; }
    .ddx-code-readonly, .ddx-code-language { display: none; }
    .ddx-code-preview { padding: 16px; font-size: 11.5px; }
    .ddx-export-grid { grid-template-columns: 1fr; }
}
/* The animated silver wordmark these two rules existed to stop is gone — the
   brand is now the same static tile + name Delphos Code uses. */
.ddx-export-conversions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
@media (max-width: 620px) { .ddx-export-conversions { grid-template-columns: 1fr; } }
.ddx-frame-holder.is-empty { display: grid; place-items: center; background: color-mix(in srgb, var(--dw-panel-solid) 86%, transparent); }
.ddx-canvas-empty { max-width: 330px; padding: 34px; color: var(--dw-muted); text-align: center; }
.ddx-canvas-empty > .material-symbols-rounded { display: inline-grid; place-items: center; width: 42px; height: 42px; color: #303238; background: linear-gradient(145deg, #f7f8fa, #9fa6b2); border-radius: 14px; box-shadow: 0 10px 30px rgb(0 0 0 / .18); font-size: 20px; }
.ddx-canvas-empty h2 { margin: 16px 0 6px; color: var(--dw-text); font-size: 17px; font-weight: 620; letter-spacing: -.02em; }
.ddx-canvas-empty p { margin: 0; font-size: 12px; line-height: 1.55; }

/* ========================================================================== 
 * DOCKED THREE-COLUMN WORKSPACE
 * Final project-view overrides. The launch lobby is intentionally untouched.
 * ========================================================================== */
.ddx.is-work {
    --ddx-ai-rail: 310px;
    --ddx-options-rail: 280px;
}
.ddx.is-work.is-assistant-closed { --ddx-ai-rail: 0px; }
.ddx.is-work.is-inspector-closed { --ddx-options-rail: 0px; }
.ddx.is-work[data-work-mode="preview"],
.ddx.is-work[data-work-mode="code"] {
    --ddx-ai-rail: 0px;
    --ddx-options-rail: 0px;
}

.ddx.is-work .ddx-body {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, var(--ddx-ai-rail)) minmax(0, 1fr) minmax(0, var(--ddx-options-rail));
    grid-template-rows: minmax(0, 1fr);
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% -12%, var(--dw-glow), transparent 42%),
        linear-gradient(145deg, var(--dw-bg-soft), var(--dw-bg) 58%);
}

/* The three workspace regions are real grid tracks, never floating over one another. */
.ddx.is-work .ddx-assistant {
    position: relative;
    inset: auto;
    z-index: 3;
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    width: auto;
    min-width: 0;
    max-height: none;
    height: 100%;
    overflow: hidden;
    color: var(--dw-text);
    background: color-mix(in srgb, var(--dw-panel-solid) 96%, var(--dw-bg));
    border: 0;
    border-right: 1px solid var(--dw-line);
    border-radius: 0;
    box-shadow: 10px 0 32px rgb(0 0 0 / .08), inset 0 1px rgb(255 255 255 / .035);
    backdrop-filter: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
}
.ddx.is-work .ddx-canvas-col {
    position: relative;
    z-index: 1;
    grid-column: 2;
    grid-row: 1;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}
.ddx.is-work .ddx-inspector {
    position: relative;
    inset: auto;
    z-index: 3;
    grid-column: 3;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    width: auto;
    min-width: 0;
    max-height: none;
    height: 100%;
    overflow: hidden;
    color: var(--dw-text);
    background: color-mix(in srgb, var(--dw-panel-solid) 96%, var(--dw-bg));
    border: 0;
    border-left: 1px solid var(--dw-line);
    border-radius: 0;
    box-shadow: -10px 0 32px rgb(0 0 0 / .08), inset 0 1px rgb(255 255 255 / .035);
    backdrop-filter: none;
}
.ddx.is-work.is-assistant-closed .ddx-assistant,
.ddx.is-work.is-inspector-closed .ddx-inspector,
.ddx.is-work[data-work-mode="preview"] .ddx-assistant,
.ddx.is-work[data-work-mode="preview"] .ddx-inspector,
.ddx.is-work[data-work-mode="code"] .ddx-assistant,
.ddx.is-work[data-work-mode="code"] .ddx-inspector {
    display: none;
}

/* Rail reopen controls sit on the canvas edge only while their rail is closed. */
.ddx.is-work .ddx-rail-open {
    position: absolute;
    z-index: 18;
    top: 14px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    color: var(--dw-muted);
    background: var(--dw-panel-solid);
    border: 1px solid var(--dw-line);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgb(0 0 0 / .18);
    cursor: pointer;
}
.ddx.is-work .ddx-rail-open:hover { color: var(--dw-text); border-color: var(--dw-line-strong); background: var(--dw-panel-strong); }
.ddx.is-work .ddx-rail-open .material-symbols-rounded { font-size: 19px; }
.ddx.is-work .ddx-rail-open.is-left { left: 12px; }
.ddx.is-work .ddx-rail-open.is-right { right: 12px; }
.ddx.is-work[data-work-mode="design"].is-assistant-closed .ddx-rail-open.is-left,
.ddx.is-work[data-work-mode="design"].is-inspector-closed .ddx-rail-open.is-right { display: inline-flex; }

/* Left AI rail: the log owns the available height and suggestions wrap naturally. */
.ddx.is-work .ddx-assistant-head {
    flex: 0 0 auto;
    min-height: 64px;
    padding: 12px 14px;
    background: color-mix(in srgb, var(--dw-panel-strong) 48%, transparent);
}
.ddx.is-work .ddx-assistant .ddx-log {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    padding: 16px 15px 10px;
    overflow: auto;
    mask-image: none;
    scrollbar-gutter: stable;
}
.ddx.is-work .ddx-suggestions {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px 10px;
    overflow: visible;
    border-top: 1px solid color-mix(in srgb, var(--dw-line) 65%, transparent);
}
.ddx.is-work .ddx-suggestions button {
    flex: 0 0 auto;
    max-width: 100%;
}
.ddx.is-work .ddx-assistant .ddx-compose {
    flex: 0 0 auto;
    padding: 10px 12px 12px;
    border-top: 1px solid var(--dw-line);
    background: color-mix(in srgb, var(--dw-panel-solid) 97%, transparent);
}
.ddx.is-work .ddx-assistant .ddx-field-wrap { width: 100%; }

/* Right options rail: all controls remain available without stealing canvas width. */
.ddx.is-work .ddx-inspector-head {
    flex: 0 0 auto;
    min-height: 64px;
    align-items: center;
    padding: 12px 15px;
    background: color-mix(in srgb, var(--dw-panel-strong) 48%, transparent);
}
.ddx.is-work .ddx-inspector-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 16px 15px 24px;
    overflow-y: auto;
    scrollbar-gutter: stable;
}
.ddx.is-work .ddx-control-group { margin-bottom: 18px; }
.ddx.is-work .ddx-choice-grid { gap: 6px; }
.ddx.is-work .ddx-choice-grid button { height: 34px; }
.ddx.is-work .ddx-palette-row { justify-content: space-between; gap: 6px; }
.ddx.is-work .ddx-palette-row button { width: 34px; height: 34px; }
.ddx.is-work .ddx-palette-row button.forest { background: #6f8b72; }
.ddx.is-work .ddx-palette-row button.forest::before { background: #183d2b; }
.ddx.is-work .ddx-palette-row button.forest::after { background: #dce7d8; }
.ddx.is-work .ddx-inspector-link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    margin-top: 10px;
    padding: 8px 9px;
    color: var(--dw-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 11px;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.ddx.is-work .ddx-inspector-link:hover { color: var(--dw-text); background: var(--dw-panel-strong); border-color: var(--dw-line); }
.ddx.is-work .ddx-inspector-link > .material-symbols-rounded { flex: 0 0 auto; font-size: 18px; color: var(--dw-faint); }
.ddx.is-work .ddx-inspector-link > span { display: flex; min-width: 0; flex-direction: column; }
.ddx.is-work .ddx-inspector-link b { color: inherit; font-size: 11.5px; font-weight: 600; }
.ddx.is-work .ddx-inspector-link small { margin-top: 1px; color: var(--dw-faint); font-size: 9.5px; }

/* Toolbar participates in layout, so it never covers the top of the preview. */
.ddx.is-work .ddx-canvas-toolbar {
    position: relative;
    inset: auto;
    z-index: 8;
    grid-row: 1;
    justify-self: center;
    align-self: start;
    transform: none;
    max-width: calc(100% - 24px);
    min-width: 0;
    margin: 12px auto 9px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}
.ddx.is-work .ddx-canvas-toolbar::-webkit-scrollbar { display: none; }
.ddx.is-work .ddx-toolbar-zoom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    height: 32px;
    padding: 0 9px;
    color: var(--dw-muted);
    background: transparent;
    border: 0;
    border-radius: 9px;
    font: inherit;
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    cursor: pointer;
}
.ddx.is-work .ddx-toolbar-zoom:hover,
.ddx.is-work .ddx-toolbar-icon.is-on { color: var(--dw-text); background: var(--dw-panel-strong); }

/* Screen switcher: same quiet toolbar chip as the zoom control, with an icon,
   the current screen name, and a caret. Hidden via [hidden] until the design has
   more than one screen. */
.ddx.is-work .ddx-toolbar-screen {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 210px;
    height: 32px;
    padding: 0 8px 0 9px;
    color: var(--dw-muted);
    background: transparent;
    border: 0;
    border-radius: 9px;
    font: inherit;
    font-size: 11px;
    white-space: nowrap;
    cursor: pointer;
}
.ddx.is-work .ddx-toolbar-screen:hover { color: var(--dw-text); background: var(--dw-panel-strong); }
.ddx.is-work .ddx-toolbar-screen[hidden] { display: none; }
.ddx-toolbar-screen > .material-symbols-rounded { font-size: 17px; flex: none; }
.ddx-toolbar-screen [data-el="screenName"] { overflow: hidden; text-overflow: ellipsis; }
.ddx-toolbar-screen .ddx-screen-caret { font-size: 15px !important; opacity: .7; }
.ddx.is-work .ddx-canvas-toolbar .ddx-agent {
    position: static;
    inset: auto;
    flex: 0 1 auto;
    max-width: 190px;
    margin: 0 2px;
    overflow: hidden;
    color: var(--dw-text);
    background: transparent;
    border: 0;
    box-shadow: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ddx.is-work .ddx-canvas-toolbar .ddx-agent:empty { display: none; }

/* The stage receives every remaining pixel in the flexible centre column. */
.ddx.is-work .ddx-stage {
    position: relative;
    inset: auto;
    grid-row: 2;
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}
.ddx.is-work .ddx-visual-view,
.ddx.is-work .ddx-code-view {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
}
.ddx.is-work .ddx-preview-wrap {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    padding: 22px 24px 28px;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}
.ddx.is-work.is-canvas-panning .ddx-preview-wrap {
    align-items: flex-start;
    justify-content: flex-start;
}
.ddx.is-work .ddx-frame-holder {
    position: relative;
    flex: 0 0 auto;
    box-sizing: content-box;
    /* Center the canvas when it fits and scroll naturally when it overflows.
       Flexbox `align-items:center` + `overflow:auto` clips the TOP of an
       over-tall canvas and makes it unreachable, leaving whitespace at the
       bottom — exactly what happened when a tall page was scrolled to its end.
       Start-alignment + `margin:auto` gives the same centred look when there is
       room, but keeps an overflowing canvas reachable and anchored to the top
       of the scroll container. */
    margin: auto;
    overflow: hidden;
    border: 0;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 0 0 1px var(--dw-line-strong), 0 24px 76px rgb(0 0 0 / .28), 0 0 0 7px rgb(255 255 255 / .025);
    transition: box-shadow 180ms ease;
}
body.light_mode .ddx.is-work .ddx-frame-holder {
    box-shadow: 0 0 0 1px var(--dw-line-strong), 0 22px 64px rgb(64 58 50 / .18), 0 0 0 7px rgb(255 255 255 / .48);
}
.ddx.is-work .ddx-frame { display: block; border: 0; transform-origin: top left; }
.ddx.is-work .ddx-frame-holder.is-empty { margin: auto; }
.ddx.is-work[data-work-mode="preview"] .ddx-preview-wrap { padding: 24px 32px 32px; }
.ddx.is-work[data-work-mode="preview"] button[data-act="toggle-inspector"],
.ddx.is-work[data-work-mode="preview"] button[data-act="open-external"] + .ddx-toolbar-rule { display: none; }
.ddx.is-work[data-work-mode="code"] .ddx-canvas-toolbar { display: none; }
.ddx.is-work[data-work-mode="code"] .ddx-stage { grid-row: 1 / -1; }

/* Slightly narrower desktop: keep both rails docked but give the canvas priority. */
@media (max-width: 1400px) {
    .ddx.is-work { --ddx-ai-rail: 286px; --ddx-options-rail: 252px; }
    .ddx.is-work.is-assistant-closed { --ddx-ai-rail: 0px; }
    .ddx.is-work.is-inspector-closed { --ddx-options-rail: 0px; }
    .ddx.is-work[data-work-mode="preview"],
    .ddx.is-work[data-work-mode="code"] { --ddx-ai-rail: 0px; --ddx-options-rail: 0px; }
    .ddx.is-work .ddx-inspector-body { padding-inline: 13px; }
    .ddx.is-work .ddx-choice-grid button { padding-inline: 5px; font-size: 10px; }
}

/* Compact desktop: options become an intentional drawer instead of crushing the canvas. */
@media (max-width: 1180px) {
    .ddx.is-work { --ddx-ai-rail: 280px; --ddx-options-rail: 0px; }
    .ddx.is-work.is-assistant-closed { --ddx-ai-rail: 0px; }
    .ddx.is-work[data-work-mode="preview"],
    .ddx.is-work[data-work-mode="code"] { --ddx-ai-rail: 0px; }
    .ddx.is-work .ddx-inspector {
        position: absolute;
        inset: 12px 12px 12px auto;
        z-index: 24;
        display: flex;
        width: 274px;
        height: auto;
        max-height: none;
        border: 1px solid var(--dw-line);
        border-radius: 18px;
        box-shadow: var(--dw-shadow);
    }
    .ddx.is-work.is-inspector-closed .ddx-inspector,
    .ddx.is-work[data-work-mode="preview"] .ddx-inspector,
    .ddx.is-work[data-work-mode="code"] .ddx-inspector { display: none; }
    .ddx.is-work .ddx-preview-wrap { padding-inline: 20px; }
}

/* Small workspace: AI also becomes an optional left drawer; the canvas stays full width. */
@media (max-width: 900px) {
    .ddx.is-work { --ddx-ai-rail: 0px; --ddx-options-rail: 0px; }
    .ddx.is-work .ddx-assistant {
        position: absolute;
        inset: 10px auto 10px 10px;
        z-index: 25;
        display: flex;
        width: min(310px, calc(100% - 20px));
        height: auto;
        border: 1px solid var(--dw-line);
        border-radius: 18px;
        box-shadow: var(--dw-shadow);
    }
    .ddx.is-work.is-assistant-closed .ddx-assistant,
    .ddx.is-work[data-work-mode="preview"] .ddx-assistant,
    .ddx.is-work[data-work-mode="code"] .ddx-assistant { display: none; }
    .ddx.is-work .ddx-canvas-toolbar { max-width: calc(100% - 20px); margin-top: 10px; }
}

@media (max-width: 720px) {
    .ddx.is-work .ddx-top { height: 56px; padding-inline: 8px; }
    .ddx.is-work .ddx-title,
    .ddx.is-work .ddx-crumb,
    .ddx.is-work [data-act="go-launch"],
    .ddx.is-work .ddx-chip { display: none; }
    .ddx.is-work .ddx-modes { margin-left: auto; }
    .ddx.is-work .ddx-mode { width: 36px; padding: 0; }
    .ddx.is-work .ddx-mode > span:last-child { display: none; }
    .ddx.is-work .ddx-canvas-toolbar { gap: 3px; padding: 4px; }
    .ddx.is-work .ddx-surface-meta,
    .ddx.is-work .ddx-toolbar-rule,
    .ddx.is-work .ddx-canvas-toolbar .ddx-agent,
    .ddx.is-work button[data-act="open-external"] { display: none; }
    .ddx.is-work .ddx-preview-wrap,
    .ddx.is-work[data-work-mode="preview"] .ddx-preview-wrap { padding: 12px; }
    .ddx.is-work .ddx-inspector { inset: 8px; width: auto; }
    .ddx.is-work .ddx-assistant { inset: 8px; width: auto; }
    .ddx.is-work .ddx-code-view { padding: 10px; }
}

/* ── live token meter ────────────────────────────────────────────────────────
   Host for the shared credit meter (assets/css/live-usage.css). The studio only
   owns the SLOT: the chip itself is the same component Chat and Code mount, so
   there is exactly one idea of what a token counter looks like in the product.

   A design turn is the most expensive operation in Delphos — dozens of model
   calls, each carrying the whole project — so what it is spending belongs on the
   top bar while it spends it, not in a settings panel afterwards. */
.ddx-usage {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}
.ddx-usage:empty { display: none; }

/* On the launch screen there is no run in progress, so the slot goes with the
   rest of the workspace-only chrome. */
.ddx.is-launch .ddx-usage { display: none; }