/* ─────────────────────────────────────────────────────────────────────────
 * workspace-ui.css — AgencyOS Working Workspace.
 *
 * WORKING WORKSPACE STRICT VISUAL REDESIGN CORRECTIVE.
 *
 * This file was previously a base IDE-chrome block followed by an appended
 * one-off override block. It is now ONE coherent, token-governed system:
 * every dimension the workspace uses (surface ladder, spacing scale, row
 * heights, control heights, panel sizes, radii, type scale) is declared
 * once at the top as a `--ww-*` custom property and consumed everywhere
 * else. There are no magic numbers repeated across selectors and no
 * appended override sections.
 *
 * It still sits ON TOP of AgencyOS's own existing tokens (style.css's
 * --text-*, --border-*, --cyan/--green/--amber/--red, --font-ui,
 * --font-mono) and still reuses deployment-command-center.css's `.dcc-*`
 * classes for badges/logs/hints. It introduces NO new brand colour.
 *
 * The one genuinely new thing is a local SURFACE LADDER. AgencyOS's global
 * --bg-base / --bg-elevated / --bg-hover / --bg-active are all literally
 * #080808, so an IDE built from them has no depth at all: every pane, tab
 * strip, editor, transcript and composer rendered as the same flat black
 * with hairline borders, which is the direct cause of the "boxes without
 * hierarchy / debug tooling" appearance. The ladder below stays firmly in
 * the same near-black family (nothing is lighter than #17171a) but gives
 * chrome, panels, inputs and the editor canvas distinguishable planes.
 * ────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS — the single source of truth for the whole workspace
   ═══════════════════════════════════════════════════════════════════ */
.wui-ide-root,
.wui-root {
  /* — Surface ladder (dark, AgencyOS identity, real depth) — */
  --ww-surf-canvas:  #0a0a0c;  /* editor / terminal / log canvas — deepest */
  --ww-surf-chrome:  #0e0e11;  /* activity bar, status bar, tab strips     */
  --ww-surf-panel:   #121215;  /* sidebar, bottom panel, elevated panes    */
  --ww-surf-input:   #16161a;  /* text inputs, composer, selects           */
  --ww-surf-raised:  #1b1b20;  /* hover / active row, active tab           */

  /* — Lines. Explicit, three-step, so a divider can outrank a hairline. — */
  --ww-line:         rgba(255,255,255,0.07);
  --ww-line-strong:  rgba(255,255,255,0.12);
  /* WORKING WORKSPACE FINAL ONE-SHOT CORRECTIVE — the Claude-active accent
     (mission target ~#FA8676), not a generic blue/cyan secondary system.
     Used for focus, the active/running signal, and nothing else. */
  --ww-accent-claude: #FA8676;
  --ww-line-focus:   var(--ww-accent-claude);
  --ww-success:      #6CC994;
  /* AGENCYOS — WORKING WORKSPACE UX POLISH CORRECTIVE §4 — the queued/"Q"
     state gets its OWN color, distinct from the Claude-orange active
     signal, normal user messages, errors, and the question-card accent —
     never reusing --ww-accent-claude for a fundamentally different state. */
  --ww-accent-queued: #E3B341;

  /* — Spacing scale. Every gap/padding in this file is one of these. — */
  --ww-s1: 2px;  --ww-s2: 4px;  --ww-s3: 6px;  --ww-s4: 8px;
  --ww-s5: 12px; --ww-s6: 16px; --ww-s7: 20px; --ww-s8: 28px;

  /* — Structural dimensions — */
  --ww-activitybar-w: 48px;
  --ww-sidebar-min:   200px;
  --ww-sidebar-max:   480px;
  --ww-header-h:      36px;   /* sidebar header, breadcrumb, panel toolbar */
  --ww-tab-h:         34px;   /* editor tabs AND bottom-panel tabs — same  */
  --ww-row-h:         24px;   /* tree / file / list rows                   */
  --ww-ctl-h:         28px;   /* every button, input and select            */
  --ww-statusbar-h:   26px;
  --ww-topbar-h:      44px;
  --ww-bottom-min:    240px;  /* below this the composer cannot fit        */
  --ww-composer-min:  76px;

  /* — Radii — */
  --ww-r1: 3px; --ww-r2: 5px; --ww-r3: 8px;

  /* — Type scale — WORKING WORKSPACE FINAL ONE-SHOT CORRECTIVE: raised
     toward the mission's target (14-15px conversation/composer body,
     11-12px meta) — the pre-existing scale read noticeably smaller/denser
     than a real Claude Code/VS Code transcript. */
  --ww-fs-xs: 11px;  /* meta, status bar, badges          */
  --ww-fs-sm: 12px;  /* labels, tabs, secondary UI        */
  --ww-fs-md: 14px;  /* tree rows, body copy, composer    */
  --ww-fs-lg: 15px;  /* the workspace title only          */
  --ww-lh-tight: 1.35;
  --ww-lh-body:  1.55;
  --ww-mono: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);

  /* — Ceiling used only by the standalone debug page, which mounts the IDE
       at the very top of the document with no shell above it. — */
  --ww-standalone-offset: 20px;
}

/* ═══════════════════════════════════════════════════════════════════════
   1b. LIGHT THEME — the SAME tokens, re-valued. Nothing else in this file
   changes.

   LIGHT THEME COMPATIBILITY CORRECTIVE. Section 1 above declares the
   surface ladder with literal near-black values, so the whole IDE stayed
   near-black under AgencyOS's own `[data-theme="light"]` switch while
   --text-primary correctly flipped to #0a0a0c — i.e. near-black text on a
   near-black canvas (measured contrast 1.00:1, the workspace title,
   Explorer tree and Claude tab were literally invisible). The tokens were
   never semantic, only dark-valued.

   The fix is a single re-mapping of the SAME custom properties under the
   existing app-wide `[data-theme="light"]` selector (the mechanism
   app.js's toggleTheme()/settingsSetTheme() already drive and persist to
   localStorage 'agencyos-theme') — NOT a set of per-component
   `[data-theme=light] .foo { color: … }` overrides. Every one of the ~700
   declarations below Section 2 consumes these tokens and therefore
   inverts correctly with no further edit. That is why this block is the
   whole light theme.

   The ladder is INVERTED BY ROLE, not merely lightened: in dark, chrome
   sits above the canvas because light-on-dark depth reads as "lifted"; in
   light, the same framing furniture must RECEDE below the canvas, so
   --ww-surf-chrome/-panel go DARKER than --ww-surf-canvas here while
   keeping the identical semantic meaning (canvas = the writing surface,
   chrome = framing, panel = docked pane, input = entry field, raised =
   hover/active). Hairlines flip from white-alpha to black-alpha for the
   same reason — a white hairline is invisible on a light surface.
   ═══════════════════════════════════════════════════════════════════ */
[data-theme="light"] .wui-ide-root,
[data-theme="light"] .wui-root {
  /* — Surface ladder (light). Canvas is the brightest plane; framing
       recedes beneath it. Verified in a real browser, see the corrective
       report's §5/§19 rendered evidence. — */
  --ww-surf-canvas:  #ffffff;  /* editor / terminal / log canvas — cleanest */
  --ww-surf-chrome:  #e9edf2;  /* activity bar, status bar, tab strips      */
  --ww-surf-panel:   #f3f5f8;  /* sidebar, bottom panel, elevated panes     */
  --ww-surf-input:   #ffffff;  /* text inputs, composer, selects            */
  --ww-surf-raised:  #dde3ec;  /* hover / active row, active tab            */

  /* — Lines. Black-alpha at the same three-step strength relationship the
       dark theme uses, so a divider still outranks a hairline. — */
  --ww-line:         rgba(0,0,0,0.10);
  --ww-line-strong:  rgba(0,0,0,0.17);
  --ww-line-focus:   var(--cyan);

  /* Semantic status colours, re-valued for a light ground — same reasoning
     and same measured cause as deployment-command-center.css's light block
     (style.css re-values the *-dim tints but not the base hues, which stay
     dark-tuned). Scoped to the workspace roots, never :root. */
  --green: #146c2e;
  --amber: #7a5600;
  --red:   #c1121f;
  /* --cyan is deliberately NOT re-valued here. It is used in this file as a
     BACKGROUND (the primary composer button, the active-tab underline,
     --ww-line-focus), not as body text, and darkening it measurably broke
     the "Send" button — its dark-on-cyan label fell to 3.33:1 in a light
     re-audit. Left at the accepted accent value, which passes in both
     themes. Recorded here so a later pass does not "helpfully" add it. */

  /* --text-faint is the workspace's quietest label tier (the "SESSION" /
     "RUN" / "+ to send" affordance captions and the "No open tabs"
     placeholder). style.css's light value #9ca3af measured 1.96–2.32:1
     against this ladder's chrome/panel surfaces. Darkened to clear 4.5:1
     while staying visibly the quietest tier in the hierarchy. */
  --text-faint: #5f6773;
}

.wui-root { color: var(--text-primary); font-family: var(--font-ui); }

/* Inside the AgencyOS shell the IDE's host (#tab-workspace / .tab-panel)
   already has a definite height, so `height:100%` fills exactly the room
   the shell actually left — no magic viewport offset to keep in sync with
   the header stack. The standalone debug page has no such host, so it
   falls back to a viewport-relative height. */
#wwRoot .wui-ide-root { height: calc(100vh - var(--ww-standalone-offset)); }
/* EMBEDDED FULL-SCREEN IDE MODE CORRECTIVE — the full-screen IDE shell
   needs the exact same explicit height as .wui-ide-root above (found
   live: without it, the flex chain below has no definite height to
   distribute, so .wui-ide-fullscreen-body/.wui-ide-fullscreen-iframe
   collapsed to a ~150px sliver — the real workbench was actually
   loading and running correctly the whole time, just rendered into an
   almost-invisible strip). */
#wwRoot .wui-ide-fullscreen { height: calc(100vh - var(--ww-standalone-offset)); }

/* ═══════════════════════════════════════════════════════════════════════
   2. IDE SHELL — one column stack that genuinely fills its host
   ═══════════════════════════════════════════════════════════════════ */
.wui-ide-root {
  display: flex;
  flex-direction: column;
  /* Was `80vh; max-height:900px`, which left a large band of dead black
     below the IDE inside the AgencyOS shell and made the whole workspace
     read as a floating box. It now fills its host exactly. */
  height: 100%;
  min-height: 520px;
  max-height: 100vh;
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--ww-fs-md);
  background: var(--ww-surf-canvas);
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-r3);
  overflow: hidden;
}

/* EMBEDDED FULL-SCREEN IDE MODE CORRECTIVE — the real VS Code workbench,
   embedded same-origin via /ide/<sessionId>/, filling the entire
   Working Workspace content pane. `body.ide-fullscreen-mode` (toggled
   only by renderIdeEmbedded()/_exitIdeMode()/resetPerWorkspaceState())
   additionally collapses the OUTER AgencyOS left sidebar so the real
   IDE gets the full viewport width, per the mission's explicit
   preference ("collapse AgencyOS left navigation while IDE Mode is
   active") rather than being squeezed into a narrow content panel. */
body.ide-fullscreen-mode #sidebar { display: none; }
.wui-ide-fullscreen {
  display: flex; flex-direction: column;
  width: 100%; height: 100%;
  background: var(--ww-surf-canvas);
}
.wui-ide-fullscreen-toolbar {
  display: flex; align-items: center; gap: var(--ww-s4);
  height: var(--ww-topbar-h); flex-shrink: 0;
  padding: 0 var(--ww-s5);
  background: var(--ww-surf-chrome);
  border-bottom: 1px solid var(--ww-line-strong);
}
.wui-ide-fullscreen-title {
  font-weight: 600; font-size: var(--ww-fs-md); color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px;
}
.wui-ide-fullscreen-spacer { flex: 1; }
.wui-ide-fullscreen-body { flex: 1; min-height: 0; position: relative; }
.wui-ide-fullscreen-iframe {
  width: 100%; height: 100%; border: 0; display: block;
}
.wui-ide-fullscreen-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--ww-s5); height: 100%; color: var(--text-secondary); text-align: center;
}
.wui-ide-fullscreen-empty-actions { display: flex; gap: var(--ww-s4); }

/* WORKSPACE UI + SCROLL PERFORMANCE CORRECTIVE §7 — one clean horizontal
   action row, vertically centered, consistent control heights/gaps. Changed
   from a fixed `height` to a `min-height` so the row can never clip; every
   child (`.wui-ide-title`, `.wui-ide-topbar-right`, and everything inside
   them) is centered on the SAME cross-axis, so no single control can drift
   out of line with the rest. */
.wui-ide-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ww-s5);
  min-height: var(--ww-topbar-h); flex-shrink: 0;
  padding: var(--ww-s3) var(--ww-s5);
  background: var(--ww-surf-chrome);
  border-bottom: 1px solid var(--ww-line-strong);
}
.wui-ide-title { display: flex; align-items: center; gap: var(--ww-s4); min-width: 0; }
.wui-ide-title h2 {
  margin: 0; font-size: var(--ww-fs-lg); font-weight: 600;
  letter-spacing: -0.01em; white-space: nowrap; line-height: 1.2;
}
.wui-ide-title .dcc-hint {
  font-size: var(--ww-fs-xs); color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wui-ide-topbar-right { display: flex; align-items: center; gap: var(--ww-s3); flex-shrink: 0; }
.wui-ide-topbar-right .action-btn { line-height: 1.2; }
/* The "Open Full IDE" CTA + its small caption used to stack the caption
   BELOW the button (a bare block-level <span> after a <button> inside a
   plain <div>), which is the exact "subtitle sits awkwardly underneath the
   button and disturbs vertical alignment" defect from the recordings. Laid
   out as one inline row instead — the caption reads as a quiet secondary
   label beside the primary control, never a second line that grows the
   topbar or knocks it out of alignment with Deploy/General Chat next to it.
   `Open Full IDE` also stays visually secondary to the rest of the row by
   design — same control height as its siblings, no size/color dominance. */
.wui-ide-primary-cta { display: flex; align-items: center; gap: var(--ww-s3); }
.wui-ide-primary-cta-caption {
  font-size: var(--ww-fs-xs); color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px;
}
@media (max-width: 900px) { .wui-ide-primary-cta-caption { display: none; } }

.wui-ide-body { display: flex; flex: 1; min-height: 0; position: relative; }

/* ═══════════════════════════════════════════════════════════════════════
   3. ACTIVITY BAR — consistent hit areas, restrained but unambiguous state
   ═══════════════════════════════════════════════════════════════════ */
.wui-ide-activitybar {
  width: var(--ww-activitybar-w); flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: var(--ww-s3) 0; gap: var(--ww-s1);
  background: var(--ww-surf-chrome);
  border-right: 1px solid var(--ww-line);
}
.wui-ide-activity-btn {
  position: relative;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: var(--ww-r2);
  color: var(--text-muted); cursor: pointer;
  transition: color var(--t-fast, 120ms ease), background var(--t-fast, 120ms ease);
}
.wui-ide-activity-btn:hover:not(.disabled):not(:disabled) {
  color: var(--text-primary); background: var(--ww-surf-raised);
}
.wui-ide-activity-btn.active { color: var(--cyan); background: transparent; }
/* An accent rail rather than a filled block — obvious without being loud. */
.wui-ide-activity-btn.active::before {
  content: ''; position: absolute; left: -6px; top: 7px; bottom: 7px;
  width: 2px; border-radius: 0 2px 2px 0; background: var(--cyan);
}
.wui-ide-activity-btn.disabled, .wui-ide-activity-btn:disabled { opacity: 0.28; cursor: not-allowed; }
.wui-ide-activity-spacer { flex: 1; }

/* ═══════════════════════════════════════════════════════════════════════
   4. SIDEBAR — Explorer / Source Control / Preview share one shell
   ═══════════════════════════════════════════════════════════════════ */
.wui-ide-sidebar {
  flex-shrink: 0; display: flex; flex-direction: column;
  min-width: var(--ww-sidebar-min); max-width: var(--ww-sidebar-max);
  background: var(--ww-surf-panel);
  border-right: 1px solid var(--ww-line);
  overflow: hidden;
}
.wui-ide-sidebar-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ww-s3);
  height: var(--ww-header-h); flex-shrink: 0;
  padding: 0 var(--ww-s3) 0 var(--ww-s5);
  font-size: var(--ww-fs-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--ww-line);
}
.wui-ide-sidebar-header-actions { display: flex; align-items: center; gap: var(--ww-s1); }
.wui-ide-sidebar-content {
  flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden;   /* never a horizontal tear-out */
  padding: var(--ww-s3) var(--ww-s4) var(--ww-s6);
  font-size: var(--ww-fs-md);
}
/* Nothing inside the sidebar may exceed its column: long prose wraps, long
   paths ellipsize. (Real-browser finding: the Source Control policy banner
   was rendering past the sidebar's right edge and being cut mid-word.) */
.wui-ide-sidebar-content > * { max-width: 100%; }
.wui-ide-sidebar-content .wui-explorer-row { max-width: 100%; }
/* Long slash-delimited prose (the Source Control policy banner) has no
   ordinary break opportunity and was being cut at the sidebar edge. */
.wui-ide-sidebar-content .dcc-hint,
.wui-ide-sidebar-content .dcc-empty,
.wui-ide-sidebar-content .dcc-error,
.wui-git-readonly-banner { overflow-wrap: anywhere; }

/* Icon button — the single small-action affordance used in every header. */
.wui-ide-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; padding: 0 var(--ww-s2);
  background: transparent; border: none; border-radius: var(--ww-r1);
  color: var(--text-muted); cursor: pointer; font-size: var(--ww-fs-sm);
  line-height: 1;
}
.wui-ide-iconbtn:hover { color: var(--text-primary); background: var(--ww-surf-raised); }
.wui-ide-expand-sidebar {
  position: absolute; left: calc(var(--ww-activitybar-w) + var(--ww-s2));
  top: var(--ww-s3); z-index: 2;
}

/* Resizers — invisible until reached for. */
.wui-ide-resizer { background: transparent; flex-shrink: 0; z-index: 3; }
.wui-ide-resizer-v { width: 5px; margin-left: -3px; cursor: col-resize; }
.wui-ide-resizer-h { height: 5px; margin-bottom: -3px; cursor: row-resize; }
.wui-ide-resizer:hover { background: var(--cyan-dim); }

/* ═══════════════════════════════════════════════════════════════════════
   5. MAIN AREA — tab strip + editor canvas
   ═══════════════════════════════════════════════════════════════════ */
.wui-ide-main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.wui-ide-maincol { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.wui-ide-tabbar {
  display: flex; align-items: stretch;
  height: var(--ww-tab-h); flex-shrink: 0;
  overflow-x: auto; overflow-y: hidden;
  background: var(--ww-surf-chrome);
  border-bottom: 1px solid var(--ww-line-strong);
  scrollbar-width: none;
}
.wui-ide-tabbar::-webkit-scrollbar { height: 0; }
.wui-ide-tabbar-empty {
  display: flex; align-items: center; padding: 0 var(--ww-s5);
  font-size: var(--ww-fs-sm); color: var(--text-faint); white-space: nowrap;
}
.wui-ide-tab {
  position: relative;
  display: flex; align-items: center; gap: var(--ww-s3);
  padding: 0 var(--ww-s3) 0 var(--ww-s5);
  max-width: 220px;
  font-size: var(--ww-fs-sm); color: var(--text-muted);
  background: transparent;
  border-right: 1px solid var(--ww-line);
  cursor: pointer; white-space: nowrap;
}
.wui-ide-tab:hover { color: var(--text-primary); background: var(--ww-surf-raised); }
.wui-ide-tab.active { color: var(--text-primary); background: var(--ww-surf-canvas); }
.wui-ide-tab.active::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--cyan);
}
.wui-ide-tab-title { overflow: hidden; text-overflow: ellipsis; }
.wui-ide-tab-close {
  display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex-shrink: 0;
  background: transparent; border: none; border-radius: var(--ww-r1);
  color: var(--text-faint); cursor: pointer; opacity: 0;
}
.wui-ide-tab:hover .wui-ide-tab-close,
.wui-ide-tab.active .wui-ide-tab-close { opacity: 1; }
.wui-ide-tab-close:hover { color: var(--text-primary); background: var(--ww-surf-raised); }

.wui-ide-editorarea {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: var(--ww-s5) var(--ww-s6) var(--ww-s6);
  background: var(--ww-surf-canvas);
}
.wui-ide-scroll-pane { overflow-y: auto; }

/* Breadcrumb / pane header — same height and baseline as every other
   header in the IDE, so the columns line up top to bottom. */
.wui-ide-breadcrumb {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ww-s4);
  min-height: var(--ww-header-h); margin-bottom: var(--ww-s5);
  padding-bottom: var(--ww-s4);
  border-bottom: 1px solid var(--ww-line);
  font-size: var(--ww-fs-sm); color: var(--text-secondary);
}
.wui-ide-breadcrumb-actions { display: flex; align-items: center; gap: var(--ww-s3); flex-shrink: 0; }

/* ── Empty states. Compact, bounded, and they name the next actions. ──── */
.wui-ide-welcome {
  max-width: 420px; margin: clamp(24px, 8vh, 72px) auto 0;
  padding: var(--ww-s7) var(--ww-s6);
  text-align: center; color: var(--text-muted);
  font-size: var(--ww-fs-md); line-height: var(--ww-lh-body);
  background: var(--ww-surf-panel);
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-r3);
}
.wui-ide-welcome-title {
  display: block; margin-bottom: var(--ww-s3);
  font-size: var(--ww-fs-md); font-weight: 600; color: var(--text-primary);
}
.wui-ide-welcome-hints {
  list-style: none; margin: var(--ww-s5) 0 0; padding: 0;
  text-align: left; font-size: var(--ww-fs-sm);
}
.wui-ide-welcome-hints li {
  display: flex; align-items: baseline; gap: var(--ww-s4);
  padding: var(--ww-s3) 0; border-top: 1px solid var(--ww-line);
}
.wui-ide-welcome-hints li::before {
  content: attr(data-step);
  flex: 0 0 16px; text-align: center;
  color: var(--cyan); font-size: var(--ww-fs-xs); font-weight: 600;
}

/* ── File editor ─────────────────────────────────────────────────────── */
.wui-editor-wrap {
  display: flex; flex: 1; min-height: 240px; height: calc(100% - 60px);
  background: var(--ww-surf-canvas);
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-r2);
  overflow: hidden;
}
.wui-editor-gutter {
  flex-shrink: 0; padding: var(--ww-s4) var(--ww-s4);
  text-align: right; user-select: none; white-space: pre;
  background: var(--ww-surf-chrome); color: var(--text-faint);
  border-right: 1px solid var(--ww-line);
  font-family: var(--ww-mono); font-size: var(--ww-fs-sm); line-height: 19px;
  overflow: hidden;
}
.wui-editor-textarea {
  flex: 1; resize: none; border: none; outline: none;
  padding: var(--ww-s4) var(--ww-s5); white-space: pre; overflow: auto;
  background: transparent; color: transparent; caret-color: var(--text-primary);
  font-family: var(--ww-mono); font-size: var(--ww-fs-sm); line-height: 19px;
  position: relative; z-index: 2;
}
/* IDE Syntax Highlighting Corrective — a real, editable textarea stays the
   actual input (transparent text, visible caret) layered exactly on top of
   a read-only Prism-highlighted <pre>/<code> of the identical text,
   scroll-synced on every input/scroll event. The textarea is still what the
   user types into, selects, and what Save/dirty-state reads from — this is
   a purely visual underlay, never a replacement editor. */
.wui-editor-highlightwrap {
  flex: 1; position: relative; overflow: hidden;
}
.wui-editor-highlight {
  position: absolute; inset: 0; margin: 0; z-index: 1;
  padding: var(--ww-s4) var(--ww-s5); white-space: pre; overflow: auto;
  background: var(--ww-surf-canvas);
  font-family: var(--ww-mono); font-size: var(--ww-fs-sm); line-height: 19px;
  pointer-events: none;
}
.wui-editor-highlight code {
  font-family: inherit; font-size: inherit; line-height: inherit;
  background: none; text-shadow: none;
}
.wui-editor-highlightwrap .wui-editor-textarea { position: absolute; inset: 0; }

/* ── Syntax colours — WORKING WORKSPACE / VS CODE CLAUDE EXPERIENCE FINAL
   CORRECTIVE ───────────────────────────────────────────────────────────────
   The editor already layered a Prism-highlighted <code> under the textarea,
   but Prism itself was never loaded (no bundle, no script tag) AND no `.token`
   rule had ever been written — so even once tokenised, every token would have
   inherited one flat colour. Both halves are fixed: the bundle is vendored at
   assets/vendor/prism/, and these are its colours.

   This is NOT a stock Prism theme. It is expressed entirely in local
   `--ww-syn-*` tokens so the editor stays inside the AgencyOS visual language
   (the same restrained dark surface + amber accent used everywhere else), and
   re-valued under the app-wide `[data-theme="light"]` switch so the light
   Workspace stays readable rather than inheriting a dark-tuned palette.
   Presentation only: these rules colour an aria-hidden overlay, never the
   textarea whose value is what Save actually writes. */
.wui-ide-root, .wui-root {
  --ww-syn-comment: #6b7280;
  --ww-syn-punct: #9aa3af;
  --ww-syn-tag: #e2a05a;        /* HTML/XML tag names, and CSS selectors */
  --ww-syn-attr: #8fd3c1;       /* attribute names, CSS properties */
  --ww-syn-string: #c3d98b;     /* strings, attr values, CSS values */
  --ww-syn-keyword: #d78fc0;    /* keywords, at-rules, PHP/Liquid control words */
  --ww-syn-fn: #7fb2e8;         /* function names */
  --ww-syn-number: #e8b872;     /* numbers, booleans, constants */
  --ww-syn-var: #d7dae0;        /* variables, properties, plain identifiers */
  --ww-syn-important: #e06c75;
  --ww-syn-embed-bg: rgba(255, 255, 255, 0.035);
}
[data-theme="light"] .wui-ide-root,
[data-theme="light"] .wui-root {
  --ww-syn-comment: #6a737d;
  --ww-syn-punct: #586069;
  --ww-syn-tag: #b3541e;
  --ww-syn-attr: #157a6e;
  --ww-syn-string: #4b6b17;
  --ww-syn-keyword: #a626a4;
  --ww-syn-fn: #1a56a0;
  --ww-syn-number: #98561a;
  --ww-syn-var: #24292e;
  --ww-syn-important: #b31d28;
  --ww-syn-embed-bg: rgba(0, 0, 0, 0.035);
}
.wui-editor-highlight code { color: var(--ww-syn-var); }
.wui-editor-highlight .token.comment,
.wui-editor-highlight .token.prolog,
.wui-editor-highlight .token.doctype,
.wui-editor-highlight .token.cdata { color: var(--ww-syn-comment); font-style: italic; }
.wui-editor-highlight .token.punctuation,
.wui-editor-highlight .token.operator { color: var(--ww-syn-punct); }
.wui-editor-highlight .token.tag,
.wui-editor-highlight .token.selector,
.wui-editor-highlight .token.class-name,
.wui-editor-highlight .token.symbol { color: var(--ww-syn-tag); }
.wui-editor-highlight .token.attr-name,
.wui-editor-highlight .token.property { color: var(--ww-syn-attr); }
.wui-editor-highlight .token.string,
.wui-editor-highlight .token.attr-value,
.wui-editor-highlight .token.char,
.wui-editor-highlight .token.regex,
.wui-editor-highlight .token.inserted { color: var(--ww-syn-string); }
.wui-editor-highlight .token.keyword,
.wui-editor-highlight .token.atrule,
.wui-editor-highlight .token.rule,
.wui-editor-highlight .token.control,
.wui-editor-highlight .token.directive { color: var(--ww-syn-keyword); }
.wui-editor-highlight .token.function,
.wui-editor-highlight .token.builtin { color: var(--ww-syn-fn); }
.wui-editor-highlight .token.number,
.wui-editor-highlight .token.boolean,
.wui-editor-highlight .token.constant,
.wui-editor-highlight .token.unit,
.wui-editor-highlight .token.hexcode { color: var(--ww-syn-number); }
.wui-editor-highlight .token.variable { color: var(--ww-syn-var); }
.wui-editor-highlight .token.important,
.wui-editor-highlight .token.deleted { color: var(--ww-syn-important); }
.wui-editor-highlight .token.bold { font-weight: 600; }
.wui-editor-highlight .token.italic { font-style: italic; }
/* Embedded CSS/JS inside an HTML file, and Liquid/PHP inside markup, get a
   faint ground so the language boundary is visible at a glance — Prism's own
   `language-*` wrapper classes, never a guess. */
.wui-editor-highlight .token.language-css,
.wui-editor-highlight .token.language-javascript,
.wui-editor-highlight .token.language-liquid,
.wui-editor-highlight .token.language-php { background: var(--ww-syn-embed-bg); }

/* ═══════════════════════════════════════════════════════════════════════
   6. BOTTOM PANEL — one shell shared by Claude / Problems / Tests /
      Output / Terminal. This is the section the redesign changes most.
   ═══════════════════════════════════════════════════════════════════ */
.wui-ide-bottompanel {
  display: flex; flex-direction: column; flex-shrink: 0;
  min-height: var(--ww-bottom-min);
  background: var(--ww-surf-panel);
  border-top: 1px solid var(--ww-line-strong);
}
.wui-ide-bottom-tabs {
  display: flex; align-items: stretch; gap: 0;
  height: var(--ww-tab-h); flex-shrink: 0;
  padding: 0 var(--ww-s3) 0 0;
  background: var(--ww-surf-chrome);
  border-bottom: 1px solid var(--ww-line);
}
.wui-ide-bottom-tab {
  position: relative;
  display: flex; align-items: center;
  padding: 0 var(--ww-s5);
  background: transparent; border: none; cursor: pointer;
  font-family: inherit; font-size: var(--ww-fs-sm); font-weight: 500;
  letter-spacing: 0.01em; color: var(--text-muted); white-space: nowrap;
}
.wui-ide-bottom-tab:hover:not(.wui-ide-bottom-tab-disabled):not(:disabled) {
  color: var(--text-primary); background: var(--ww-surf-raised);
}
.wui-ide-bottom-tab.active { color: var(--text-primary); background: var(--ww-surf-panel); }
.wui-ide-bottom-tab.active::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--cyan);
}
.wui-ide-bottom-tab-disabled, .wui-ide-bottom-tab:disabled { opacity: 0.3; cursor: not-allowed; }
/* Count chip on the Problems tab — a chip, not a parenthesis in a label. */
.wui-tab-count {
  margin-left: var(--ww-s3); padding: 0 5px; border-radius: 999px;
  background: var(--ww-surf-raised); color: var(--text-secondary);
  font-size: 10px; font-weight: 600; line-height: 15px;
}
.wui-ide-bottom-tab.active .wui-tab-count { background: var(--cyan-dim); color: var(--cyan); }
.wui-tab-count-warn { background: var(--amber-dim) !important; color: var(--amber) !important; }

/* The panel body no longer scrolls as a whole — each panel manages its own
   scroll region, which is what keeps a composer or a toolbar pinned and
   always visible instead of being pushed below the fold. */
.wui-ide-bottom-content { flex: 1; min-height: 0; overflow: hidden; }

/* Lane A IDE Chat: Post-Restart Final Features Closure — the dock's own
   tab bar (Problems/Tests/Output/Terminal) stays docked/visible at all
   times; only the CONTENT area collapses. Fixes a real defect found via
   live CDP verification: the previous collapsed state hid the entire tab
   bar behind a single generic "▴ Panel" button, so a user could not see
   or pick a dock tab at all while collapsed. */
.wui-ide-bottompanel-collapsed { min-height: 0; border-top: 1px solid var(--ww-line-strong); }

/* ── The shared panel shell every bottom panel is built from ──────────── */
.ww-panel { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.ww-panel-toolbar {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--ww-s3) var(--ww-s4);
  min-height: var(--ww-header-h); flex-shrink: 0;
  padding: var(--ww-s3) var(--ww-s5);
  border-bottom: 1px solid var(--ww-line);
}
.ww-panel-toolbar-spacer { flex: 1; }
.ww-panel-body {
  flex: 1; min-height: 0; overflow: auto;
  padding: var(--ww-s5);
}
.ww-panel-body-flush { padding: 0; }
.ww-panel-footer {
  flex-shrink: 0;
  padding: var(--ww-s4) var(--ww-s5) var(--ww-s5);
  border-top: 1px solid var(--ww-line);
}

/* Toolbar meta — the "Status: x  exit=0  120ms" family, as aligned pairs
   rather than a run-on sentence. */
.ww-meta { display: inline-flex; align-items: baseline; gap: var(--ww-s3); font-size: var(--ww-fs-xs); }
.ww-meta-label { color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; }
.ww-meta-value { color: var(--text-secondary); font-family: var(--ww-mono); }

/* Compact empty state used inside panels — never a large empty region. */
.ww-empty {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--ww-s2);
  padding: var(--ww-s6) var(--ww-s5);
  max-width: 560px;
  color: var(--text-muted); font-size: var(--ww-fs-md); line-height: var(--ww-lh-body);
}
.ww-empty strong { color: var(--text-secondary); font-weight: 600; }
.ww-empty .dcc-hint { font-size: var(--ww-fs-sm); }

/* ═══════════════════════════════════════════════════════════════════════
   7. CLAUDE PANEL — a real assistant composer, not a floating textarea
   ═══════════════════════════════════════════════════════════════════ */
.wui-claude-panel { display: flex; flex-direction: column; height: 100%; min-height: 0; }

/* Lane A Runtime + Workflow E2E Closure Corrective — truthful, unmissable
   notice when the connected Runner is running FAKE_CLAUDE=true. Renders
   only when JobQueue.getRunnerExecutor() === 'fake'; absent otherwise. */
.wui-claude-fake-banner {
  flex-shrink: 0; padding: var(--ww-s3) var(--ww-s5);
  background: rgba(248,81,73,0.12); border-bottom: 1px solid rgba(248,81,73,0.4);
  color: #ff8b85; font-size: var(--ww-fs-xs); font-weight: 600;
}

/* Meta: compact, aligned, badge-led — replaces "Session — Run — Status idle". */
.wui-claude-meta {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--ww-s3) var(--ww-s5);
  min-height: var(--ww-header-h); flex-shrink: 0;
  padding: var(--ww-s3) var(--ww-s5);
  border-bottom: 1px solid var(--ww-line);
  font-size: var(--ww-fs-xs); color: var(--text-muted);
}
.wui-claude-meta-item { display: inline-flex; align-items: center; gap: var(--ww-s3); }
.wui-claude-meta-item > .ww-meta-label { color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; }
.wui-claude-meta-item code {
  font-family: var(--ww-mono); font-size: var(--ww-fs-xs);
  color: var(--text-secondary); background: var(--ww-surf-raised);
  padding: 2px 6px; border-radius: var(--ww-r1);
  max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Status as a state chip, not loose text. */
.wui-claude-status-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px 2px 6px; border-radius: 999px;
  background: var(--ww-surf-raised); color: var(--text-secondary);
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
}
.wui-claude-status-chip::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.wui-claude-status-chip.running, .wui-claude-status-chip.queued,
.wui-claude-status-chip.started { background: var(--cyan-dim); color: var(--cyan); }
.wui-claude-status-chip.succeeded { background: var(--green-dim); color: var(--green); }
.wui-claude-status-chip.failed { background: var(--red-dim); color: var(--red); }
.wui-claude-status-chip.cancelled, .wui-claude-status-chip.timed_out { background: var(--amber-dim); color: var(--amber); }

/* Lane A IDE Chat: Remaining Features Closure — the model selector. */
.wui-claude-model-select-wrap { margin-left: auto; }
.wui-claude-model-select {
  background: var(--ww-surf-raised); color: var(--text-primary); border: 1px solid var(--ww-border);
  border-radius: 6px; padding: 2px 6px; font-size: 12px; font-family: inherit;
}
.wui-claude-model-select:disabled { opacity: 0.6; cursor: not-allowed; }
.wui-claude-model-mismatch { padding: 2px var(--ww-s4, 12px); }

/* Transcript takes all the slack and scrolls on its own. */
.wui-claude-log {
  /* Token / Cost Observability — the usage strip adds one more fixed row
     above this transcript. With the previous `min-height: 0` the transcript
     was the only flexible element, so at the panel's smaller heights it
     could be squeezed to a few pixels. A real floor keeps the accepted
     design's intent ("the transcript owns the panel's slack") true even
     with the extra row present; the panel's own scroll handles the rest. */
  flex: 1 1 auto; min-height: 64px; max-height: none;
  overflow-y: auto;
  padding: var(--ww-s4) var(--ww-s5);
  background: var(--ww-surf-canvas);
  border: none; border-radius: 0;
  font-family: var(--ww-mono); font-size: var(--ww-fs-sm);
}
.wui-claude-log .dcc-log-line { padding: 2px 0; line-height: var(--ww-lh-body); }
.wui-claude-log-empty {
  display: flex; flex-direction: column; justify-content: center; height: 100%;
  padding: var(--ww-s5) 0; color: var(--text-faint);
  font-family: var(--font-ui); font-size: var(--ww-fs-sm); line-height: var(--ww-lh-body);
}

/* Working Workspace VS Code + Full Conversational Claude Chat Corrective — the real chat
   transcript. Same "owns the panel's slack" contract as .wui-claude-log above, but a normal
   UI font (this is prose, not a log) and one message block per turn instead of raw lines. */
.wui-claude-transcript {
  flex: 1 1 auto; min-height: 64px; max-height: none;
  overflow-y: auto;
  /* FABLE BATCH 1 — the browser's own scroll anchoring stays ON (default)
     and ChatScroll never fights it: while the owner reads history no code
     writes scrollTop, so height changes above the viewport are absorbed by
     the browser, and rebuilds restore by turn element, not by distance. */
  overflow-anchor: auto;
  padding: var(--ww-s4) var(--ww-s5);
  background: var(--ww-surf-canvas);
  font-family: var(--font-ui); font-size: 14px; line-height: 1.6;
}
/* AGENCYOS PHASE 1 — CLAUDE WORKSPACE UX CORRECTIVE §8/§4: a turn's own
   parts (a message and the real activity under it) sit close together;
   the gap BEFORE the next user message (i.e. the start of a new turn) is
   deliberately larger, so turns read as distinct groups without resorting
   to boxed cards or borders around every line. */
/* WORKSPACE UI + SCROLL PERFORMANCE CORRECTIVE §4 — the simplest safe win
 * for long-history scroll cost: an off-screen settled turn's layout/paint
 * work is skipped entirely by the browser until it nears the viewport.
 * `contain-intrinsic-size` gives it a reasonable placeholder height so the
 * scrollbar/scroll position doesn't jump as turns enter/leave containment.
 * No virtualization/windowing needed at this codebase's realistic scale. */
.wui-chat-msg { margin-bottom: var(--ww-s3); max-width: 100%; content-visibility: auto; contain-intrinsic-size: auto 120px; }
.wui-claude-transcript > .wui-chat-msg + .wui-chat-user { margin-top: var(--ww-s5); }
.wui-chat-role {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-faint); margin-bottom: 4px;
}
/* AGENCYOS — WORKING WORKSPACE UX POLISH CORRECTIVE §6 — the latest real
   user turn (the SAME turn identity already rendered above — this is a
   presentation wrapper class on the existing node, never a second copy)
   gets a clean, visually separated block so "what did I just ask" is
   obvious at a glance, per the supplied reference. */
.wui-turn-latest-user .wui-chat-user {
  background: var(--ww-surf-raised); border: 1px solid var(--ww-line-strong);
  border-radius: var(--ww-r2); padding: var(--ww-s4) var(--ww-s5);
}
.wui-chat-user .wui-chat-role { color: var(--cyan); }
/* AGENCYOS — WORKING WORKSPACE UX POLISH CORRECTIVE §3 — the Claude
   identity is now clearly Claude-orange (label only — the answer's own
   body copy stays the normal readable text color; see §5 below). */
.wui-chat-assistant .wui-chat-role { color: var(--ww-accent-claude); }
.wui-chat-body p { margin: 0 0 10px; white-space: normal; }
.wui-chat-body p:last-child { margin-bottom: 0; }
/* §5 — real structural markdown (headings/bold/bullets), now that
   _mdLite actually renders it instead of leaving it as literal
   punctuation. Distinct weights/sizes so a heading, a bold lead-in, and
   plain body copy are never visually the same "flat gray" text. */
.wui-chat-body h3.wui-md-heading,
.wui-chat-body h4.wui-md-heading,
.wui-chat-body h5.wui-md-heading,
.wui-chat-body h6.wui-md-heading {
  margin: var(--ww-s5) 0 var(--ww-s3); font-weight: 700; color: var(--text-primary); line-height: 1.35;
}
.wui-chat-body h3.wui-md-heading { font-size: 1.15em; }
.wui-chat-body h4.wui-md-heading { font-size: 1.08em; }
.wui-chat-body h5.wui-md-heading,
.wui-chat-body h6.wui-md-heading { font-size: 1em; text-transform: uppercase; letter-spacing: 0.02em; opacity: 0.85; }
.wui-chat-body strong { font-weight: 700; color: var(--text-primary); }
.wui-chat-body ul.wui-md-list {
  margin: 0 0 10px; padding-left: 1.3em; display: flex; flex-direction: column; gap: 4px;
}
.wui-chat-body ul.wui-md-list li { line-height: 1.6; }
.wui-chat-code {
  background: var(--ww-surf-panel); border: 1px solid var(--ww-line); border-radius: 4px;
  padding: var(--ww-s3); overflow-x: auto; font-family: var(--ww-mono); font-size: 12.5px; line-height: 1.55;
  margin: 0 0 10px;
}
.wui-chat-rundetail {
  margin-top: 4px; font-family: var(--ww-mono); font-size: 10px; color: var(--text-faint); opacity: .7;
}
/* WORKSPACE UI + SCROLL PERFORMANCE CORRECTIVE §10 — one coherent accent
 * treatment for the active/running state: dots AND the truthful per-tool
 * label (Reading…/Editing…/Running…/Deploying…/Verifying… from
 * `_liveToolStatus`, real telemetry — unchanged) share ONE accent for
 * "in progress" (`.wui-exec-row.wui-exec-running`), instead of the dots
 * pulsing while the label text sat in a mismatched muted grey.
 * WORKING WORKSPACE FINAL CLOSURE CORRECTIVE — that shared accent is the
 * Claude-orange token, not cyan (the mission's own explicit "no secondary
 * blue/cyan system" rule — this was the one remaining real violation). */
.wui-chat-pending { display: flex; align-items: center; gap: 6px; color: var(--ww-accent-claude, #FA8676); font-weight: 500; margin-bottom: 4px; }

/* §10 — "Jump to latest": shown only while the user has deliberately
   scrolled away from the bottom (see _claudeStickToBottom); a small,
   unobtrusive pill, never a full-width banner. */
.wui-transcript-wrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; }
.wui-transcript-wrap > .wui-claude-transcript { flex: 1 1 auto; }
/* FABLE BATCH 1 — deep-link focus: the inline conversion event the owner
   asked to open is brought into view and briefly outlined INSIDE the one
   canonical chat. A highlight, never a second surface. */
.wui-turn-focus { outline: 2px solid var(--cyan, #22d3ee); outline-offset: 4px; border-radius: 6px; animation: wui-turn-focus-fade 2.4s ease-out forwards; }
@keyframes wui-turn-focus-fade { 0%, 60% { outline-color: var(--cyan, #22d3ee); } 100% { outline-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .wui-turn-focus { animation: none; } }
.wui-convert-toggle-row .wui-convert-details-btn { margin-left: auto; }
/* FABLE BATCH 1.5 — inline conversion presentation INSIDE the transcript:
   the current action strip on the correlated event, the live status line
   while a turn runs, the final-result summary and blocker emphasis. */
.wui-inline-conv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 4px 14px; }
.wui-inline-conv-actions .wc-item { width: 100%; }
.wui-inline-conv-live { display: flex; align-items: center; gap: 8px; margin: 4px 0 4px 14px; }
.wui-inline-conv-final { margin-top: 4px; }
.wui-inline-conv-final-ok .wc-item-reason { color: var(--green, #3fb950); }
.wui-inline-conv-final-error .wc-item-reason { color: var(--red, #f85149); }
.wui-inline-conv-blocker { color: var(--red, #f85149); }
/* WORKSPACE UI + SCROLL PERFORMANCE CORRECTIVE §6 — a real transcript
 * CONTROL, not inline message content: it never participates in normal
 * message flow (`position: absolute` inside `.wui-transcript-wrap`, which
 * scopes it to the transcript viewport, never the page), sits clear above
 * the composer, and gets a stronger shadow + a solid backdrop so it reads
 * as floating above the scroll surface instead of overlapping the last
 * lines of text underneath it — the exact "floats awkwardly over message
 * content" defect from the recordings. `hidden` (not opacity/visibility)
 * keeps it fully out of layout when not needed — no layout shift either way.
 */
.wui-jump-latest {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--ww-surf-panel); border: 1px solid var(--ww-line-strong, var(--ww-line)); border-radius: 999px;
  padding: 7px 16px; font-size: 12px; font-weight: 600; color: var(--text-primary);
  cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.4); z-index: 3;
  transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.wui-jump-latest:hover { background: var(--ww-surf-hover, var(--ww-surf-panel)); box-shadow: 0 6px 20px rgba(0,0,0,.48); transform: translateX(-50%) translateY(-1px); }
.wui-jump-latest:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.wui-chat-dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--cyan);
  animation: wui-chat-pulse 1.2s ease-in-out infinite;
}
.wui-chat-dot:nth-child(2) { animation-delay: .15s; }
.wui-chat-dot:nth-child(3) { animation-delay: .3s; }
@keyframes wui-chat-pulse { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* The composer itself — a bounded, framed, multi-line prompt surface with
   its action bar INSIDE the frame, so it reads as one control. */
.wui-claude-composer {
  flex-shrink: 0;
  padding: var(--ww-s4) var(--ww-s5) var(--ww-s5);
  border-top: 1px solid var(--ww-line);
  background: var(--ww-surf-panel);
}
.wui-claude-composer-head {
  display: flex; align-items: center; gap: var(--ww-s4);
  margin-bottom: var(--ww-s3);
}
.wui-claude-composer-label {
  font-size: var(--ww-fs-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary);
}
.wui-claude-composer-box {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--ww-surf-input);
  border: 1px solid var(--ww-line-strong);
  border-radius: var(--ww-r2);
  overflow: hidden;
  transition: border-color var(--t-fast, 120ms ease);
}
.wui-claude-composer-box:focus-within { border-color: var(--ww-line-focus); }
.wui-claude-composer-box.is-disabled { opacity: 0.6; }
/* Real click-interception bug found live: the plus-menu overlap corrective
   re-anchored `.wui-claude-plus-menu` to this box, but this box's own
   `overflow: hidden` (needed to clip the textarea's corners to the rounded
   border) also clips that menu whenever it renders above the box's own
   bounds — the menu items stayed visually plausible near the edge but were
   unclickable (real hit-testing landed on the transcript behind them, not
   the button). Lifted only while the menu is actually open, since hiding
   overflow during normal composer use is still wanted for the textarea. */
.wui-claude-composer-box.wui-composer-menu-open { overflow: visible; }

/* Lane A IDE Remaining Features Corrective — subtle drop-target affordance,
   only visible while a real drag is over the composer (§B3). */
.wui-claude-dropzone-overlay {
  position: absolute; inset: 0; z-index: 5;
  display: none; align-items: center; justify-content: center;
  background: var(--cyan-dim); border: 2px dashed var(--cyan); border-radius: var(--ww-r2);
  color: var(--cyan); font-size: var(--ww-fs-sm); font-weight: 600;
  pointer-events: none;
}
.wui-claude-dropzone-overlay.wui-dropzone-active { display: flex; }

/* AGENCYOS WORKING WORKSPACE QUESTION FLOW RE-SCOPE CORRECTIVE — the
   inline AgencyOS-native question card. Not a popup/modal: a normal block
   inside the conversation area, above the composer, which stays fully
   interactive the entire time this is visible. */
.wui-question-card {
  margin: var(--ww-s4) var(--ww-s5) 0;
  padding: var(--ww-s4);
  background: var(--ww-surf-raised);
  border: 1px solid var(--ww-accent-claude);
  border-radius: var(--ww-r2);
  display: flex; flex-direction: column; gap: var(--ww-s3);
}
.wui-question-card-title {
  font-size: var(--ww-fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--ww-accent-claude);
}
.wui-question-text { font-size: var(--ww-fs-md); line-height: 1.4; }
.wui-question-options { display: flex; flex-direction: column; gap: 6px; }
.wui-question-option { display: flex; align-items: center; gap: 8px; font-size: var(--ww-fs-md); cursor: pointer; }
.wui-question-freetext {
  width: 100%; resize: vertical; font: inherit; padding: var(--ww-s3);
  background: var(--ww-surf-input); border: 1px solid var(--ww-line); border-radius: var(--ww-r2); color: inherit;
}
.wui-question-error { margin: 0; }
.wui-question-card-actions { display: flex; align-items: center; gap: var(--ww-s3); }
.wui-question-hint { font-size: var(--ww-fs-xs); opacity: 0.65; }

/* Pending attachment/context/web chips — one shared row above the composer box. */
.wui-pending-chips-row {
  display: flex; flex-wrap: wrap; gap: var(--ww-s3);
  padding: var(--ww-s3) var(--ww-s5) 0;
}
.wui-pending-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 6px 3px 3px; border-radius: var(--ww-r2);
  background: var(--ww-surf-raised); border: 1px solid var(--ww-line);
  font-size: var(--ww-fs-xs); max-width: 220px;
}
.wui-pending-thumb { width: 22px; height: 22px; border-radius: 3px; object-fit: cover; flex-shrink: 0; }
.wui-pending-file-icon { font-size: 14px; flex-shrink: 0; }
.wui-pending-chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wui-pending-chip-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border: none; background: transparent; color: var(--text-faint);
  cursor: pointer; border-radius: 50%; flex-shrink: 0;
}
.wui-pending-chip-remove:hover { color: var(--red); background: var(--red-dim); }

/* Sent-turn attachment/context/web tags, shown under the user's own bubble. */
.wui-sent-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.wui-sent-tag {
  font-size: 10px; color: var(--text-faint); background: var(--ww-surf-raised);
  border-radius: var(--ww-r1); padding: 1px 6px;
}
/* AGENCYOS PHASE 2 — a failed reference fetch tag reuses the same compact
   pill, just tinted honestly (never hidden, never a generic success color). */
.wui-sent-tag-failed { color: var(--red, #f85149); }

/* The + composer action and its compact popup menu. */
/* Real UI bug found live: the menu's positioning context was this small
   28x28 wrap around just the + button, so `bottom: calc(100% + 4px)`
   placed it directly above the BUTTON — inside the composer box's own
   flow, overlapping the textarea above it whenever the menu's own height
   exceeded the actions-row-to-textarea-top gap. `.wui-claude-composer-box`
   (the real outer composer container, already `position: relative`) is
   now the positioning ancestor instead — `bottom: calc(100% + 4px)` on
   the menu therefore clears the WHOLE composer box, never the textarea
   inside it. No JS/positioning-math change needed. */
.wui-claude-plus-wrap { position: static; }
.wui-claude-plus-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--ww-ctl-h, 28px); height: var(--ww-ctl-h, 28px);
  border-radius: var(--ww-r2); border: 1px solid var(--ww-line-strong);
  background: var(--ww-surf-raised); color: var(--text-secondary);
  font-size: 16px; line-height: 1; cursor: pointer;
}
.wui-claude-plus-btn:hover:not(:disabled) { color: var(--text-primary); background: var(--ww-surf-chrome); }
.wui-claude-plus-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.wui-claude-plus-menu {
  /* Corrective A5 (Part 2) — was z-index:10, which sat BELOW the pending
     attachment/context chips row (.wui-pending-chips-row, a later sibling
     in DOM order, default stacking) whenever both were on screen at once
     — a real click-interception bug: a menu item under the chips row's
     footprint silently ate pointer events meant for the popup. Raised
     well above every other composer-area element. */
  position: absolute; bottom: calc(100% + 4px); left: 0; z-index: 1000;
  min-width: 180px; padding: 4px;
  background: var(--ww-surf-chrome); border: 1px solid var(--ww-line-strong);
  border-radius: var(--ww-r2); box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  display: flex; flex-direction: column;
}
.wui-claude-plus-item {
  text-align: left; padding: 6px 8px; border: none; background: transparent;
  color: var(--text-primary); font-size: var(--ww-fs-sm); border-radius: var(--ww-r1); cursor: pointer;
}
.wui-claude-plus-item:hover:not(:disabled) { background: var(--ww-surf-raised); }
.wui-claude-plus-item:disabled { color: var(--text-faint); cursor: not-allowed; }

/* Add Context — Select Project File(s) popover. */
.wui-picker-backdrop {
  position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,0.35);
  display: flex; align-items: center; justify-content: center;
}
.wui-picker-box {
  width: min(420px, 92vw); max-height: 70vh; display: flex; flex-direction: column;
  background: var(--ww-surf-chrome); border: 1px solid var(--ww-line-strong);
  border-radius: var(--ww-r2); box-shadow: 0 8px 32px rgba(0,0,0,0.35);
}
.wui-picker-header {
  padding: var(--ww-s4) var(--ww-s5); border-bottom: 1px solid var(--ww-line);
  font-size: var(--ww-fs-sm); font-weight: 600; color: var(--text-primary);
}
.wui-picker-tree { flex: 1; overflow-y: auto; padding: var(--ww-s3) 0; }
.wui-picker-row {
  display: flex; align-items: center; gap: 6px; padding: 4px 8px; cursor: pointer;
  color: var(--text-secondary); font-size: var(--ww-fs-sm);
}
.wui-picker-row:hover { background: var(--ww-surf-raised); color: var(--text-primary); }
.wui-picker-row[data-type="directory"] { color: var(--text-primary); }
.wui-picker-row.wui-picker-selected { background: var(--cyan-dim); color: var(--cyan); }
.wui-picker-caret { width: 12px; display: inline-block; opacity: 0.7; }
.wui-picker-checkbox { pointer-events: none; }
.wui-picker-footer {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ww-s3);
  padding: var(--ww-s4) var(--ww-s5); border-top: 1px solid var(--ww-line);
}
.wui-picker-limit-hint { font-size: 11px; color: var(--text-faint); }

/* P2 Phase 3 — Claude Account Management panel (reuses .wui-picker-backdrop/box). */
.wui-accounts-box { width: min(440px, 92vw); }
.wui-accounts-body { padding: var(--ww-s3) var(--ww-s5); overflow-y: auto; max-height: 60vh; }
.wui-accounts-error { color: var(--red); margin-bottom: var(--ww-s3); }
.wui-accounts-list { display: flex; flex-direction: column; gap: var(--ww-s3); }
.wui-accounts-row {
  border: 1px solid var(--ww-line); border-radius: var(--ww-r2); padding: var(--ww-s3);
  display: flex; flex-direction: column; gap: 4px; background: var(--ww-surf-raised);
}
.wui-accounts-row-main { display: flex; align-items: center; justify-content: space-between; gap: var(--ww-s3); }
.wui-accounts-label { font-weight: 500; color: var(--text-primary); font-size: var(--ww-fs-sm); }
.wui-accounts-identity { font-size: 11px; }
.wui-accounts-row-actions { display: flex; gap: var(--ww-s2); margin-top: 2px; }
.wui-accounts-add { margin-top: var(--ww-s4); padding-top: var(--ww-s4); border-top: 1px solid var(--ww-line); display: flex; flex-direction: column; gap: var(--ww-s3); }
.wui-accounts-add-input {
  width: 100%; box-sizing: border-box; padding: 6px 8px; border-radius: var(--ww-r2);
  border: 1px solid var(--ww-line-strong); background: var(--ww-surf-chrome); color: var(--text-primary);
  font-size: var(--ww-fs-sm);
}
.wui-accounts-justcreated { display: flex; flex-direction: column; gap: 6px; }
.wui-accounts-logincmd {
  display: block; padding: 8px; border-radius: var(--ww-r2); background: var(--ww-surf-chrome);
  border: 1px solid var(--ww-line-strong); font-size: 12px; overflow-x: auto; white-space: pre;
  color: var(--text-primary);
}
.wui-claude-textarea {
  width: 100%; box-sizing: border-box; display: block;
  resize: vertical; min-height: var(--ww-composer-min); max-height: 320px;
  padding: var(--ww-s4) var(--ww-s5);
  background: transparent; color: var(--text-primary);
  border: none; outline: none;
  font-family: inherit; font-size: var(--ww-fs-md); line-height: var(--ww-lh-body);
}
.wui-claude-textarea::placeholder { color: var(--text-faint); }
.wui-claude-textarea:disabled { cursor: not-allowed; }
.wui-claude-composer-actions {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--ww-s3) var(--ww-s4);
  padding: var(--ww-s3) var(--ww-s4) var(--ww-s3) var(--ww-s5);
  border-top: 1px solid var(--ww-line);
  background: var(--ww-surf-panel);
}
.wui-claude-composer-actions .ww-spacer { flex: 1; }

/* Lane A IDE Chat: Voice Placement + Listening Activity Corrective — the
   mic now lives in a fixed-width cluster immediately beside Send (never
   the left side), so there is no layout jump when its own internal state
   (icon color, activity bars) changes — only the cluster's INTERNAL
   content changes, never its box size relative to the rest of the row. */
.wui-claude-send-cluster { display: inline-flex; align-items: center; gap: var(--ww-s3); flex-shrink: 0; }
/* VS Code-style icon button, same visual weight as the other composer
   controls. No new card/header/panel. Width is fixed (not auto) so the
   reserved activity-bar space never causes a resize between states. */
.wui-claude-mic-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  width: 44px; height: var(--ww-ctl-h, 28px);
  border-radius: var(--ww-r2); border: 1px solid var(--ww-line-strong);
  background: var(--ww-surf-raised); color: var(--text-secondary);
  cursor: pointer; flex-shrink: 0;
}
.wui-claude-mic-btn:hover:not(:disabled) { color: var(--text-primary); background: var(--ww-surf-chrome); }
.wui-claude-mic-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.wui-claude-mic-btn:focus-visible {
  outline: 2px solid var(--cyan); outline-offset: 2px;
}
.wui-claude-mic-btn.wui-voice-listening {
  color: var(--red); border-color: var(--red); background: var(--red-dim);
  animation: wui-mic-pulse 1.4s ease-in-out infinite;
}
.wui-claude-mic-btn.wui-voice-processing { color: var(--amber); border-color: var(--amber); }
.wui-claude-mic-btn.wui-voice-permission_denied,
.wui-claude-mic-btn.wui-voice-error { color: var(--amber); border-color: var(--amber-dim); }
@keyframes wui-mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--red-dim); }
  50% { box-shadow: 0 0 0 4px transparent; }
}
/* Listening-activity indicator — a STATE-DRIVEN cue (animates whenever
   status is 'listening', regardless of actual input loudness), never a
   measured microphone amplitude meter. Space is always reserved (opacity
   toggles, width/layout never changes) so entering/leaving the listening
   state causes no layout jump anywhere in the composer row. Bars alone
   are never the only cue — the tiny "Listening…"/"Finishing up…" text
   label (.wui-voice-status-tiny) and the button's own title/aria-label
   always say the same thing in words. */
.wui-voice-activity {
  display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; width: 12px;
  opacity: 0; transition: opacity 120ms ease;
}
.wui-claude-mic-btn.wui-voice-listening .wui-voice-activity,
.wui-claude-mic-btn.wui-voice-processing .wui-voice-activity { opacity: 1; }
.wui-voice-activity span {
  display: block; width: 2px; height: 4px; border-radius: 1px;
  background: currentColor;
}
@media (prefers-reduced-motion: no-preference) {
  .wui-claude-mic-btn.wui-voice-listening .wui-voice-activity span {
    animation: wui-voice-bar 0.9s ease-in-out infinite;
  }
  .wui-voice-activity span:nth-child(1) { animation-delay: 0ms; }
  .wui-voice-activity span:nth-child(2) { animation-delay: 150ms; }
  .wui-voice-activity span:nth-child(3) { animation-delay: 300ms; }
  .wui-claude-mic-btn.wui-voice-processing .wui-voice-activity span {
    animation: wui-voice-bar 0.9s ease-in-out infinite;
    animation-play-state: paused; /* processing: bars shown but settled, not actively bouncing */
    height: 6px;
  }
}
@media (prefers-reduced-motion: reduce) {
  /* Honor reduced motion: a static (non-animating) but still visibly
     distinct listening indicator, never nothing at all. */
  .wui-claude-mic-btn.wui-voice-listening .wui-voice-activity span { height: 8px; }
  .wui-claude-mic-btn.wui-voice-processing .wui-voice-activity span { height: 5px; }
}
@keyframes wui-voice-bar {
  0%, 100% { height: 3px; }
  50% { height: 10px; }
}
/* Lane A IDE Chat: Voice Continuous Composer Corrective — §6. The user's
   actual dictated words are never rendered here; only a tiny status word
   (Listening…/Finishing up…) or a genuine error/permission message. */
/* Lane A IDE Chat: Voice Placement + Listening Activity Corrective —
   always rendered (never added/removed from the DOM) with a reserved
   min-height, so appearing/disappearing text here never shifts the
   composer/mic/Send row — the "no layout jump while listening" requirement. */
.wui-voice-status-line {
  padding: 0 var(--ww-s5) var(--ww-s3); height: 23px; box-sizing: border-box;
  font-size: var(--ww-fs-xs); color: var(--amber); line-height: 1;
  display: flex; align-items: center;
}
.wui-voice-status-tiny { color: var(--text-faint); font-size: var(--ww-fs-xs); font-style: italic; }
/* While a recognizer is actively writing into the composer it is
   read-only (not disabled — still fully visible/selectable) so a
   concurrent programmatic update can never race a keystroke; a subtle
   left accent distinguishes this from the normal editable state. */
.wui-claude-textarea-voice {
  border-left: 2px solid var(--red); background: var(--ww-surf-raised);
}
.wui-claude-hint-inline {
  font-size: var(--ww-fs-xs); color: var(--text-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wui-claude-disabled-why, .wui-claude-session-note {
  font-size: var(--ww-fs-xs); color: var(--text-muted);
}
/* WORKING WORKSPACE FINAL ONE-SHOT CORRECTIVE — follow-up queue UI. */
.wui-claude-queue-count {
  font-size: var(--ww-fs-xs); color: var(--ww-accent-queued);
  font-weight: 600; white-space: nowrap;
}
/* AGENCYOS — WORKING WORKSPACE UX POLISH CORRECTIVE §4 — the queued/"Q"
   state is its own yellow, never the Claude-orange active signal — a
   queued message and an active one must be instantly distinguishable at
   a glance. */
.wui-queued-badge {
  display: inline-block; margin-left: var(--ww-s3);
  font-size: 10px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--ww-accent-queued); border: 1px solid var(--ww-accent-queued);
  border-radius: var(--ww-r1); padding: 1px 5px; vertical-align: middle;
}
#wwSendBtn.wui-send-queue-mode { color: var(--ww-accent-queued); border-color: var(--ww-accent-queued); }
.wui-claude-kbd {
  font-family: var(--ww-mono); font-size: 10px;
  padding: 1px 5px; border-radius: var(--ww-r1);
  background: var(--ww-surf-raised); color: var(--text-muted);
  border: 1px solid var(--ww-line);
}

/* ═══════════════════════════════════════════════════════════════════════
   8. PROBLEMS / OUTPUT
   ═══════════════════════════════════════════════════════════════════ */
.wui-problem {
  display: flex; align-items: baseline; gap: var(--ww-s4);
  padding: var(--ww-s3) var(--ww-s4);
  border-bottom: 1px solid var(--ww-line);
  font-size: var(--ww-fs-sm); line-height: var(--ww-lh-body);
}
.wui-problem:hover { background: var(--ww-surf-raised); }
.wui-problem-sev {
  flex: 0 0 auto; padding: 1px 7px; border-radius: var(--ww-r1);
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
}
.wui-problem-sev.error { background: var(--red-dim); color: var(--red); }
.wui-problem-sev.warning { background: var(--amber-dim); color: var(--amber); }
.wui-problem-loc {
  flex: 0 0 auto; font-family: var(--ww-mono); font-size: var(--ww-fs-xs);
  color: var(--text-secondary);
}
.wui-problem-msg { flex: 1 1 auto; color: var(--text-primary); }

.wui-bottom-log {
  height: 100%; max-height: none; overflow-y: auto;
  padding: var(--ww-s4) var(--ww-s5);
  background: var(--ww-surf-canvas);
  border: none; border-radius: 0;
  font-family: var(--ww-mono); font-size: var(--ww-fs-sm);
}
.wui-bottom-log .dcc-log-line {
  padding: 1px 0; line-height: var(--ww-lh-body);
  white-space: pre-wrap; word-break: break-word;
}

/* ═══════════════════════════════════════════════════════════════════════
   9. TERMINAL — presentation only. Policy/allowlist/caps are untouched.
   ═══════════════════════════════════════════════════════════════════ */
.wui-terminal { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.wui-terminal-banner {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--ww-s3) var(--ww-s5);
  min-height: var(--ww-header-h); flex-shrink: 0;
  padding: var(--ww-s3) var(--ww-s5);
  border-bottom: 1px solid var(--ww-line);
  font-size: var(--ww-fs-xs); color: var(--text-muted); margin: 0;
}
.wui-terminal-log {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: var(--ww-s4) var(--ww-s5); margin: 0;
  background: var(--ww-surf-canvas); border: none; border-radius: 0;
  font-family: var(--ww-mono); font-size: var(--ww-fs-sm);
}
.wui-terminal-line { white-space: pre-wrap; word-break: break-word; line-height: var(--ww-lh-body); padding: 1px 0; }
.wui-terminal-line-cmd { color: var(--text-primary); font-weight: 600; }
.wui-terminal-line-meta { color: var(--text-faint); }
.wui-terminal-status {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--ww-s3) var(--ww-s5);
  flex-shrink: 0; margin: 0;
  padding: var(--ww-s3) var(--ww-s5);
  border-top: 1px solid var(--ww-line);
}
.wui-terminal-status .ww-spacer { flex: 1; }
.wui-terminal-input-row {
  display: flex; align-items: center; gap: var(--ww-s4);
  flex-shrink: 0; flex-wrap: nowrap; margin: 0;
  padding: var(--ww-s4) var(--ww-s5) var(--ww-s5);
  border-top: 1px solid var(--ww-line);
}
.wui-terminal-prompt { color: var(--cyan); flex-shrink: 0; font-size: var(--ww-fs-sm); }
.wui-terminal-input {
  flex: 1; min-width: 0; height: var(--ww-ctl-h);
  padding: 0 var(--ww-s4);
  background: var(--ww-surf-input); color: var(--text-primary);
  border: 1px solid var(--ww-line-strong); border-radius: var(--ww-r2);
  font-family: var(--ww-mono); font-size: var(--ww-fs-sm); outline: none;
}
.wui-terminal-input:focus { border-color: var(--ww-line-focus); }
.wui-terminal-input::placeholder { color: var(--text-faint); }

/* ═══════════════════════════════════════════════════════════════════════
   10. STATUS BAR
   ═══════════════════════════════════════════════════════════════════ */
.wui-ide-statusbar {
  display: flex; align-items: center; gap: var(--ww-s5);
  height: var(--ww-statusbar-h); flex-shrink: 0;
  padding: 0 var(--ww-s5);
  background: var(--ww-surf-chrome);
  border-top: 1px solid var(--ww-line);
  font-size: var(--ww-fs-xs); color: var(--text-muted);
}
.wui-statusbar-item { display: inline-flex; align-items: center; gap: var(--ww-s2); white-space: nowrap; }
.wui-statusbar-right { margin-left: auto; }

/* ═══════════════════════════════════════════════════════════════════════
   11. TREE / LIST ROWS — Explorer, Source Control files, Preview targets
   ═══════════════════════════════════════════════════════════════════ */
.wui-explorer-toolbar { margin: 0 0 var(--ww-s3); }
.wui-explorer-tree { font-size: var(--ww-fs-md); }
.wui-explorer-row {
  display: flex; align-items: center; gap: var(--ww-s3);
  height: var(--ww-row-h); padding: 0 var(--ww-s3);
  border-radius: var(--ww-r1); cursor: pointer; white-space: nowrap;
  color: var(--text-secondary);
}
.wui-explorer-row:hover { background: var(--ww-surf-raised); color: var(--text-primary); }
.wui-explorer-row.selected { background: var(--cyan-dim); color: var(--cyan); font-weight: 500; }
/* Carets and file icons sit on --text-secondary, not --text-faint: at
   --text-faint (#30363d) against the panel surface they were, when
   actually rendered and looked at, effectively invisible. */
.wui-explorer-caret {
  flex: 0 0 12px; display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary); font-size: 9px;
}
.wui-explorer-icon { display: flex; flex-shrink: 0; color: var(--text-secondary); opacity: 0.75; }
.wui-explorer-row:hover .wui-explorer-icon,
.wui-explorer-row.selected .wui-explorer-icon { color: inherit; opacity: 1; }
/* Directories read as directories at a glance. */
.wui-explorer-row[data-type="directory"] .wui-explorer-icon { color: var(--cyan); opacity: 0.7; }
.wui-explorer-row[data-type="directory"] .wui-explorer-name { color: var(--text-primary); }
.wui-explorer-name { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wui-explorer-protected { margin-left: auto; color: var(--amber); flex-shrink: 0; display: flex; }
.wui-explorer-error { margin-bottom: var(--ww-s4); font-size: var(--ww-fs-sm); line-height: var(--ww-lh-body); }

.wui-git-file-row { justify-content: flex-start; height: auto; min-height: var(--ww-row-h); max-width: 100%; }
.wui-git-file-row .wui-explorer-name { flex: 1 1 auto; min-width: 0; }
.wui-git-file-row .wui-git-view-diff { margin-left: auto; flex-shrink: 0; }
.wui-git-file-row > .dcc-hint { flex-shrink: 0; font-family: var(--ww-mono); }
.wui-git-file-row input[type=checkbox] { flex: 0 0 auto; margin: 0; accent-color: var(--cyan); }
.wui-preview-target-readiness { margin: 0 0 var(--ww-s3); padding-left: 30px; font-size: var(--ww-fs-xs); }

/* ═══════════════════════════════════════════════════════════════════════
   12. SHARED CONTROLS — one height, one radius, everywhere
   ═══════════════════════════════════════════════════════════════════ */
.wui-row {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--ww-s4); margin-bottom: var(--ww-s5);
}
.wui-row:last-child { margin-bottom: 0; }
.wui-row input[type=text],
.wui-row select,
.wui-ide-ws-select {
  height: var(--ww-ctl-h); padding: 0 var(--ww-s4);
  background: var(--ww-surf-input); color: var(--text-primary);
  border: 1px solid var(--ww-line-strong); border-radius: var(--ww-r2);
  font-family: inherit; font-size: var(--ww-fs-sm); outline: none;
}
.wui-row input[type=text], .wui-row select { flex: 1 1 auto; min-width: 150px; }
.wui-ide-ws-select { flex: 0 0 auto; min-width: 130px; }
.wui-row input[type=text]:focus, .wui-row select:focus { border-color: var(--ww-line-focus); }
.wui-row select:disabled, .wui-row input:disabled { opacity: 0.5; cursor: not-allowed; }
/* A control group whose members must not stretch (toolbars). */
.ww-controls { display: flex; align-items: center; gap: var(--ww-s3); flex-wrap: wrap; }
.ww-controls select { flex: 0 1 auto; min-width: 200px; }

.wui-mono { font-family: var(--ww-mono); font-size: var(--ww-fs-sm); }
.wui-status { font-weight: 600; }
.wui-status.succeeded, .wui-status.ready, .wui-status.cli_ready { color: var(--green); }
.wui-status.failed { color: var(--red); }
.wui-status.cancelled, .wui-status.timed_out { color: var(--amber); }
.wui-status.running, .wui-status.queued, .wui-status.started,
.wui-status.starting, .wui-status.restarting { color: var(--cyan); }
.wui-status.stopped, .wui-status.stopping { color: var(--text-secondary); }

.wui-table { width: 100%; border-collapse: collapse; margin-top: var(--ww-s5); }
.wui-table th, .wui-table td {
  text-align: left; padding: var(--ww-s3) var(--ww-s4);
  border-bottom: 1px solid var(--ww-line); font-size: var(--ww-fs-sm);
}
.wui-table th {
  color: var(--text-faint); font-weight: 600; font-size: var(--ww-fs-xs);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.wui-table tbody tr:hover { background: var(--ww-surf-raised); }

.wui-attr-introduced_this_run { background: var(--green-dim); color: var(--green); border-color: transparent; }
.wui-attr-pre_existing_dirty { background: var(--ww-surf-raised); color: var(--text-secondary); }
.wui-attr-ambiguous { background: var(--amber-dim); color: var(--amber); border-color: transparent; }

.wui-diffbox {
  margin-top: var(--ww-s5); max-height: 320px;
  background: var(--ww-surf-canvas); border: 1px solid var(--ww-line);
  border-radius: var(--ww-r2); font-family: var(--ww-mono);
}

/* ═══════════════════════════════════════════════════════════════════════
   13. PREVIEW
   ═══════════════════════════════════════════════════════════════════ */
.wui-preview-frame-wrap {
  margin-top: var(--ww-s5); padding: var(--ww-s5);
  background: var(--ww-surf-panel);
  border: 1px solid var(--ww-line); border-radius: var(--ww-r3);
  overflow-x: auto;
}
.wui-preview-frame {
  width: 100%; height: 480px; display: block; margin: 0 auto;
  background: #fff; border: 1px solid var(--ww-line-strong); border-radius: var(--ww-r2);
}

/* ═══════════════════════════════════════════════════════════════════════
   14. SOURCE CONTROL
   ═══════════════════════════════════════════════════════════════════ */
.wui-git-readonly-banner {
  margin: 0 0 var(--ww-s4); padding: var(--ww-s3) var(--ww-s4);
  background: var(--ww-surf-raised); border-radius: var(--ww-r2);
  color: var(--text-muted); font-size: var(--ww-fs-xs); line-height: var(--ww-lh-body);
}
.wui-git-repo-summary {
  display: flex; flex-direction: column; gap: var(--ww-s3);
  margin-bottom: var(--ww-s4); padding: var(--ww-s4);
  background: var(--ww-surf-canvas); border: 1px solid var(--ww-line);
  border-radius: var(--ww-r2);
}
.wui-git-repo-line { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ww-s3) var(--ww-s5); }
.wui-git-repo-line .ww-meta-value { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wui-git-group-label {
  display: flex; align-items: center; gap: var(--ww-s3);
  margin: var(--ww-s5) 0 var(--ww-s2);
  font-size: var(--ww-fs-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint);
}
.wui-git-section-title {
  display: block; margin: var(--ww-s7) 0 var(--ww-s4);
  padding-bottom: var(--ww-s3); border-bottom: 1px solid var(--ww-line);
  font-size: var(--ww-fs-sm); font-weight: 600; color: var(--text-primary);
}
.wui-git-section-title:first-child { margin-top: 0; }
.wui-git-commit-message {
  flex: 1 1 280px; min-width: 240px;
  padding: var(--ww-s4); resize: vertical;
  background: var(--ww-surf-input); color: var(--text-primary);
  border: 1px solid var(--ww-line-strong); border-radius: var(--ww-r2);
  font-family: inherit; font-size: var(--ww-fs-md); line-height: var(--ww-lh-body); outline: none;
}
.wui-git-commit-message:focus { border-color: var(--ww-line-focus); }
.wui-git-plan-review {
  margin-top: var(--ww-s4); padding: var(--ww-s5);
  background: var(--ww-surf-canvas); border: 1px solid var(--ww-line);
  border-radius: var(--ww-r2); font-family: inherit; font-size: var(--ww-fs-sm);
  line-height: var(--ww-lh-body); max-height: none;
}
.wui-git-plan-review ul { margin: var(--ww-s3) 0; padding-left: var(--ww-s7); }
.wui-git-commit-result {
  margin-top: var(--ww-s4); padding: var(--ww-s4) var(--ww-s5);
  background: var(--green-dim); border-radius: var(--ww-r2); font-size: var(--ww-fs-sm);
}

/* ═══════════════════════════════════════════════════════════════════════
   15. LOCAL OVERRIDES of the shared .dcc-* helpers, scoped to the IDE only
   ═══════════════════════════════════════════════════════════════════ */
.wui-ide-root .dcc-empty {
  padding: var(--ww-s5) 0; color: var(--text-muted);
  font-size: var(--ww-fs-md); line-height: var(--ww-lh-body);
}
.wui-ide-root .dcc-hint { font-size: var(--ww-fs-sm); line-height: var(--ww-lh-body); }
.wui-ide-root .dcc-error, .wui-ide-root .dcc-warn { font-size: var(--ww-fs-sm); line-height: var(--ww-lh-body); }
.wui-ide-root .dcc-log {
  background: var(--ww-surf-canvas); border-color: var(--ww-line);
  border-radius: var(--ww-r2); font-family: var(--ww-mono); font-size: var(--ww-fs-sm);
}
.wui-ide-root .dcc-badge { font-size: var(--ww-fs-xs); }
/* Buttons inside the IDE all sit on the one control height. */
.wui-ide-root .action-btn.small {
  height: var(--ww-ctl-h); display: inline-flex; align-items: center;
  padding: 0 var(--ww-s5); border-radius: var(--ww-r2);
  font-size: var(--ww-fs-sm); line-height: 1; white-space: nowrap;
}
.wui-ide-root .action-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.wui-locked-notice { max-width: 560px; margin: var(--ww-s8) auto; text-align: center; }

/* ═══════════════════════════════════════════════════════════════════════
   16. VIEWPORT ADAPTATION
   Verified at 1920×1080, 1440×900 and 1280×800, with and without the
   AgencyOS right-hand Activity/Telemetry rail visible.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1440px) {
  .wui-ide-root { --ww-sidebar-max: 380px; }
  .wui-ide-bottom-tab { padding: 0 var(--ww-s4); }
}
@media (max-width: 1180px) {
  .wui-ide-root {
    --ww-sidebar-max: 300px;
    --ww-activitybar-w: 44px;
  }
  .wui-ide-editorarea { padding: var(--ww-s5) var(--ww-s5) var(--ww-s5); }
  .wui-ide-title .dcc-hint { display: none; }
}

/* ── TOKEN / COST OBSERVABILITY ───────────────────────────────────────────
 * The compact usage strip inside the existing Claude panel, directly under
 * its meta row. Deliberately built from the SAME accepted Working Workspace
 * token system (--ww-* surfaces/spacing/type + the shared --text-*, --amber,
 * --border palette) as every other panel in this file — no new colours, no
 * new spacing scale, no ad-hoc styling, and no second dashboard. It is
 * theme-agnostic by construction: every value below is a token that the
 * accepted dark and light themes already redefine.
 * ──────────────────────────────────────────────────────────────────────── */
.wui-usage-strip {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--ww-s3) var(--ww-s5);
  flex-shrink: 0;
  padding: var(--ww-s3) var(--ww-s5);
  border-bottom: 1px solid var(--ww-line);
  background: var(--ww-surf-chrome);
  font-size: var(--ww-fs-xs); color: var(--text-muted);
  /* Never a source of horizontal page scroll: the strip wraps instead. */
  max-width: 100%; overflow-wrap: anywhere;
}
.wui-usage-item { display: inline-flex; align-items: baseline; gap: var(--ww-s3); }
.wui-usage-item > .ww-meta-label {
  color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em;
}
.wui-usage-item b { color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.wui-usage-item code {
  font-family: var(--ww-mono); font-size: var(--ww-fs-xs);
  color: var(--text-secondary); background: var(--ww-surf-raised);
  padding: 2px 6px; border-radius: var(--ww-r1);
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wui-usage-sub { color: var(--text-faint); font-size: 10px; }

/* Lane A IDE Chat: Post-Restart Final Features Closure — Details disclosure. */
.wui-usage-details-toggle {
  background: none; border: none; color: var(--cyan); font-size: var(--ww-fs-xs);
  cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 2px;
}
.wui-usage-details {
  flex-basis: 100%; display: flex; flex-wrap: wrap; gap: var(--ww-s5);
  padding-top: var(--ww-s3); border-top: 1px dashed var(--ww-line);
}
.wui-usage-detail-group { min-width: 180px; }
.wui-usage-detail-heading {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-faint); margin-bottom: 4px;
}
.wui-usage-detail-row { display: flex; justify-content: space-between; gap: var(--ww-s4); padding: 1px 0; }
.wui-usage-detail-row span { color: var(--text-muted); }
.wui-usage-detail-row b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.wui-usage-detail-total { border-top: 1px solid var(--ww-line); margin-top: 2px; padding-top: 3px; }
.wui-usage-detail-note {
  flex-basis: 100%; color: var(--text-faint); font-size: 10px; line-height: 1.4; max-width: 640px;
}
.wui-usage-muted { color: var(--text-faint); }
/* An unpriced / unavailable figure is rendered as an explicit, hoverable
 * word — never as a fabricated $0.00. Amber (the accepted "attention, not
 * error" colour already used by the status chips above) marks it. */
.wui-usage-unpriced { color: var(--amber); cursor: help; }

/* ── WORKING WORKSPACE FINAL UNIFICATION CORRECTIVE ─────────────────────────
 * The ONE project history. Actors must stay visually distinguishable: a
 * manual conversation turn genuinely IS a conversation and keeps a
 * conversational shape, while normal-workflow and automated-conversion
 * activity are deliberately NOT forced into the same chat bubble — doing so
 * would obscure who actually acted, which is the specific thing this view
 * exists to make unambiguous. The left rule is the actor signal. */
.wui-hist-turn {
  padding: var(--ww-s3) var(--ww-s4);
  margin: var(--ww-s3) 0;
  border-left: 3px solid var(--ww-line);
  border-radius: 0 4px 4px 0;
}
.wui-hist-actor {
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--text-primary); margin-bottom: 3px;
}
.wui-hist-text {
  white-space: pre-wrap; margin: 0; max-height: 360px; overflow: auto;
  background: transparent; padding: 0; font-size: 12px; line-height: 1.5;
}
.wui-hist-event { border-left: 3px solid var(--ww-line); padding-left: var(--ww-s3); }

/* Actor colour coding. Deliberately four distinct signals, matching the four
 * real origins of activity in a project: the person, their manual Claude
 * session, the normal AgencyOS workflow, and the automated conversion
 * machinery. */
.wui-hist-actor-you { border-left-color: var(--accent, #6b8e6b); }
.wui-hist-actor-claude { border-left-color: var(--text-faint); }
.wui-hist-actor-workflow { border-left-color: var(--amber, #d29922); }
.wui-hist-actor-system { border-left-color: var(--text-muted); }

/* A nav item whose icon key is missing degrades to its own readable label
 * rather than the string "undefined" (see _navResolve). This should never be
 * seen in a correct build — it exists so a future mistake is legible instead
 * of silently shipping a blank, unclickable-looking button. */
.wui-ide-activity-fallback {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.02em; line-height: 18px; display: inline-block;
}

/* ── WORKING WORKSPACE FINAL UX CLOSURE CORRECTIVE ─────────────────────────
 * Readability pass, scoped to the chronology inside the Claude tab only —
 * deliberately NOT a global rescale of .wc-item/.wc-item-reason etc., which
 * are shared with Skills & MCP and other unrelated panels via
 * capability-manager.css. Every rule below is scoped under
 * .wui-claude-transcript so those other surfaces are completely unaffected.
 * Genuine prose (user/Claude messages) gets a real comfortable reading size;
 * technical metadata/ids stay clearly secondary, but not microscopic. */
.wui-claude-transcript { font-size: var(--ww-fs-md); }
.wui-claude-transcript .wui-chat-body {
  /* AGENCYOS — WORKING WORKSPACE QUEUE + AUTOSCROLL + FONT FINAL
     CORRECTIVE — 18px read visually too large in practice; settled at
     17px, still a real improvement over the original 15px. */
  font-size: 17px; line-height: 1.6;
}
.wui-claude-transcript .wc-item-name {
  font-size: var(--ww-fs-md); color: var(--text-primary);
}
.wui-claude-transcript .wc-item-reason {
  font-size: 11px; line-height: 1.5;
}
.wui-claude-transcript .wui-hist-actor { font-size: 12px; }
/* Terminal results (PASSED/FAILED/APPROVED/BLOCKED) must be scannable at a
 * glance, not the same weight as a routine activity line. Applied via a
 * class the JS adds to the specific event whose title/status is terminal —
 * never inferred from prose matching, only from the event's own real
 * `status`/`stage`. */
.wui-hist-terminal .wc-item-name { font-weight: 700; }
.wui-hist-terminal.wui-hist-status-passed .wc-item-name,
.wui-hist-terminal.wui-hist-status-approved .wc-item-name { color: var(--green, #3fb950); }
.wui-hist-terminal.wui-hist-status-failed .wc-item-name,
.wui-hist-terminal.wui-hist-status-blocked .wc-item-name { color: var(--red, #f85149); }
/* Command/execution evidence (a real persisted prompt/response, shown via
 * <details><pre class="wui-chat-code">) gets a slightly larger monospace
 * size than raw metadata, since it is genuine read content, not a label. */
.wui-claude-transcript .wui-chat-code { font-size: 12.5px; line-height: 1.55; }

/* The Claude-centered Conversion entry point (replaces the old separate
 * Convert tab). A compact, clearly-bounded inline section — never styled to
 * look like another full-page destination. */
.wui-convert-toggle-row {
  display: flex; align-items: center; gap: var(--ww-s3); flex-wrap: wrap;
  margin: var(--ww-s3) 0;
}
.wui-convert-orientation { font-size: 12px; color: var(--text-secondary, #8b949e); }
/* Default: a quiet, secondary status line — this is NOT a nav-styled
 * destination competing with the composer.
 * AGENCYOS CONVERT UI SURGICAL RESTORE + WORKSPACE BUTTON FIX — the manual
 * toggle button (.wui-convert-toggle-btn) this emphasis used to target was
 * removed as a duplicate of the restored main-workflow Convert tab.
 * .wui-convert-action-flag is the plain-text "Conversion — action needed"
 * signal that used to be the button's own label; it keeps the same visual
 * weight the button had, without being a control. */
.wui-convert-action-flag {
  font-weight: 600; color: var(--accent, #58a6ff);
}
.wui-inline-convert {
  border: 1px solid var(--ww-line); border-radius: var(--ww-r1);
  background: var(--ww-surf-panel); padding: var(--ww-s4);
  margin-bottom: var(--ww-s4);
}

/* Genuine per-file execution evidence on a Claude turn (WorkspaceProvenanceEngine
 * git-diff attribution) — compact VS-Code-style "Edit <path>" rows, never a
 * bare file count buried in a details toggle. */
/* WORKSPACE UI + SCROLL PERFORMANCE CORRECTIVE §8 — VS Code / Claude
 * Code-like compact row hierarchy: a fixed label column, a path/command
 * column that takes the remaining width and truncates with an ellipsis
 * (the full value is still available via the element's own `title`
 * attribute, and in full via the existing "Show output" details toggle)
 * instead of the old `word-break: break-all`, which let one long Bash
 * command wrap across many lines and dominate the transcript — the exact
 * "giant multi-line shell command" defect this corrective removes. Status
 * stays pinned to the right via `margin-left: auto` on the tail elements. */
.wui-exec-rows { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; }
/* FINAL MICRO-UX + LIVE-TURN JANK CORRECTIVE §14 — developer-tool row
 * density: ~28-34px tall, no wrapped multi-line command in the default
 * state (the path/command column already truncates via ellipsis below). */
.wui-exec-row {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12.5px; padding: 6px 6px; min-width: 0; min-height: 28px;
  border-radius: 4px;
}
.wui-exec-row-head { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; min-width: 0; }
.wui-exec-label {
  font-weight: 600; color: var(--text-secondary, #8b949e);
  flex: 0 0 56px; min-width: 56px; flex-shrink: 0;
}
.wui-exec-path {
  font-family: var(--ww-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  color: var(--text-primary);
  flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Real, live tool_use/tool_result rows (WORKING WORKSPACE — CLAUDE DRIVER
 * STREAMING TELEMETRY FINAL CLOSURE). Failure is the only state that gets
 * color — a normal in-progress/completed tool call stays neutral, matching
 * this file's existing "don't make every event green/red" rule. */
.wui-exec-pending { font-size: 11px; color: var(--text-secondary, #8b949e); font-style: italic; flex-shrink: 0; margin-left: auto; }
/* AGENCYOS PHASE 5 — completed activity reads visually quieter than the one row still running,
 * without introducing a second color scheme (failure keeps the only real color). */
.wui-exec-row.wui-exec-done { opacity: .58; }
.wui-exec-row.wui-exec-running { opacity: 1; }
.wui-exec-row.wui-exec-running .wui-exec-label { color: var(--ww-accent-claude, #FA8676); }
.wui-exec-row.wui-exec-running .wui-exec-pending { color: var(--ww-accent-claude, #FA8676); }
.wui-exec-row.wui-exec-failed { opacity: 1; }
.wui-exec-row.wui-exec-failed .wui-exec-label { color: var(--red, #f85149); }
.wui-exec-failed-tag { color: var(--red, #f85149) !important; font-style: normal !important; font-weight: 600; flex-shrink: 0; margin-left: auto; }
.wui-exec-out { margin: 2px 0 4px 64px; flex-basis: 100%; }

/* WORKING WORKSPACE FINAL CLOSURE CORRECTIVE — real IN/OUT evidence,
 * rendered inline (matches the supplied Claude Code reference screenshots
 * exactly): a solid, never-translucent bordered box directly under the
 * tool row, muted IN/OUT labels, selectable monospace, internal scroll
 * for long output — never a floating/modal popup. */
.wui-exec-evidence {
  margin-left: 64px; border: 1px solid var(--ww-line, rgba(255,255,255,0.07));
  border-radius: var(--ww-r2, 5px); background: var(--ww-surf-canvas, #0a0a0c);
  overflow: hidden;
}
.wui-exec-evidence-in, .wui-exec-evidence-out { padding: 6px 10px; }
.wui-exec-evidence-in { border-bottom: 1px solid var(--ww-line, rgba(255,255,255,0.07)); }
.wui-exec-evidence-label {
  display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-faint, #6e7681); margin-bottom: 3px;
}
.wui-exec-evidence-pre {
  margin: 0; font-family: var(--ww-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12.5px; line-height: 1.5; color: var(--text-primary);
  white-space: pre-wrap; word-break: break-word; user-select: text;
  max-height: 260px; overflow: auto;
}
.wui-exec-out summary { font-size: 11.5px; color: var(--text-secondary, #8b949e); cursor: pointer; }
.wui-exec-out summary { font-size: 11px; color: var(--text-secondary, #8b949e); cursor: pointer; }
.wui-exec-out pre { font-size: 12px; max-height: 260px; overflow: auto; white-space: pre-wrap; margin-top: 4px; }

/* FABLE BATCH 3 — prominent deploy result inside the one project chat */
.wui-inline-deploy-result { margin: 8px 0 4px; padding: 12px 14px; border: 1px solid var(--green, #3fb950); border-radius: 8px; background: color-mix(in srgb, var(--green, #3fb950) 10%, transparent); }
.wui-inline-deploy-result.wui-inline-deploy-failed { border-color: var(--red, #f85149); background: color-mix(in srgb, var(--red, #f85149) 10%, transparent); }
.wui-inline-deploy-title { font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.wui-inline-deploy-open { display: inline-block; font-size: 14px; padding: 8px 14px; }
.wui-inline-deploy-url { margin-top: 6px; font-size: 12px; word-break: break-all; }
.wui-inline-deploy-meta { margin-top: 6px; font-size: 12px; color: var(--text-muted); }