/* aiditor bundled Core CSS
 * Generated by tools/build.mjs from src/. Do not edit by hand.
 * Sources: 10 files concatenated in dependency order.
 */

/* ---- style/theme.css ---- */
/* aiditor — theme tokens (source of truth for ALL colors / sizes / motion)
 *
 * Theme v2 layers (read top → down):
 *   Authoring  : semantic custom-theme entry (--aiditor-surface-panel, --aiditor-brand)
 *   Primitives : compatibility / advanced ramp (--aiditor-c-04)
 *   Roles      : component-facing tokens (--aiditor-bg-1, --aiditor-fg-2)
 *   Components : rare per-component tweaks that are not roles
 *
 * ALL non-token CSS in dock.css / component.css / ui-*.css must reference Layer 2
 * roles, not primitive ramp tokens. Themes override authoring tokens + the
 * compatibility ramp + a few role mappings; component tokens stay put.
 *
 * Naming convention:
 *   --aiditor-surface-* semantic surface authoring tokens
 *   --aiditor-text-*    semantic text authoring tokens
 *   --aiditor-stroke-*  semantic border/stroke authoring tokens
 *   --aiditor-brand*    brand/accent authoring tokens
 *   --aiditor-state-*   success / warning / danger / info authoring tokens
 *   --aiditor-c-NN     12-step grayscale primitive (00 = darkest, 11 = lightest)
 *   --aiditor-c-NAME   semantic primitive (accent / success / warn / error / info)
 *   --aiditor-bg-N     background depth ramp role (0 = deepest)
 *   --aiditor-fg-N     foreground emphasis role (0 = strongest)
 *   --aiditor-border*  border roles
 *   --aiditor-r-N      radius scale
 *   --aiditor-space-N  spacing scale (4 8 12 16 24 32)
 *   --aiditor-size-N   control size scale (h: row heights / icons)
 *   --aiditor-dur-N    motion durations
 *   --aiditor-z-N      z-index scale
 *   --aiditor-shadow-N elevation shadows
 *   --aiditor-font-*   font stacks
 */

:root,
.aiditor-root[data-aiditor-theme="dark"] {
  color-scheme: dark;

  /* ── Layer 1 — Primitives (Dark theme — Godot-minimal default) ───
   *
   * Palette inspired by passivestar/godot-minimal-theme.tres: a neutral
   * charcoal ramp anchored at #272727 with a cool-blue accent. Low
   * contrast between surface steps; depth communicated by luminance
   * instead of borders / shadows / colored tinting. */

  /* Authoring tokens: recommended custom-theme surface. Theme authors
   * change these semantic names; components keep consuming the role tokens
   * below. The numeric --aiditor-c-* ramp stays as compatibility/advanced API. */
  --aiditor-surface-canvas: #141414;
  --aiditor-surface-lower:  #1a1a1a;
  --aiditor-surface-frame:  #202020;
  --aiditor-surface-panel:  #272727;
  --aiditor-surface-field:  #1a1a1a;
  --aiditor-surface-hover:  #2d2d2d;
  --aiditor-surface-active: #333333;
  --aiditor-surface-raised: #2d2d2d;

  --aiditor-text-primary:  #d4d4d4;
  --aiditor-text-body:     #bfbfbf;
  --aiditor-text-label:    #9a9a9a;
  --aiditor-text-muted:    #707070;
  --aiditor-text-disabled: #5a5a5a;

  --aiditor-stroke-subtle: #2d2d2d;
  --aiditor-stroke-strong: #3b3b3b;
  --aiditor-stroke-field:  #333333;
  --aiditor-stroke-hover:  #474747;

  --aiditor-brand:          #569eff;
  --aiditor-brand-hover:    #7fb5ff;
  --aiditor-brand-contrast: #ffffff;

  --aiditor-state-success: #4dcf68;
  --aiditor-state-warning: #d4ba6b;
  --aiditor-state-danger:  #e07a78;
  --aiditor-state-info:    #569eff;

  /* 12-step neutral-gray ramp. c-03 is the Godot "surface_base". */
  --aiditor-c-00: var(--aiditor-surface-canvas);   /* deepest viewport + inset wells */
  --aiditor-c-01: var(--aiditor-surface-lower);    /* lower */
  --aiditor-c-02: var(--aiditor-surface-frame);    /* frame */
  --aiditor-c-03: var(--aiditor-surface-panel);    /* surface_base dock body */
  --aiditor-c-04: var(--aiditor-surface-hover);    /* hover */
  --aiditor-c-05: var(--aiditor-surface-active);   /* active / selected tab */
  --aiditor-c-06: var(--aiditor-stroke-strong);    /* border-strong */
  --aiditor-c-07: #474747;
  --aiditor-c-08: var(--aiditor-text-disabled);
  --aiditor-c-09: var(--aiditor-text-muted);       /* muted / placeholder */
  --aiditor-c-10: var(--aiditor-text-label);       /* labels */
  --aiditor-c-11: var(--aiditor-text-primary);     /* primary text (not pure white) */

  /* Brand accent — Godot's canonical #569eff, with a soft derivative. */
  --aiditor-c-accent:      var(--aiditor-brand);
  --aiditor-c-accent-soft: var(--aiditor-brand-hover);

  /* Semantic colors — calibrated to the low-contrast chassis. warn uses
   * Godot's khaki (warning_color ≈ 0.83,0.78,0.62); success keeps a more
   * "OK-button" green per design preference; error is a softer red so
   * it reads as "warning" rather than "alarm" against the neutral gray. */
  --aiditor-c-success: var(--aiditor-state-success);
  --aiditor-c-warn:    var(--aiditor-state-warning);
  --aiditor-c-error:   var(--aiditor-state-danger);
  --aiditor-c-info:    var(--aiditor-state-info);

  /* ── Layer 2 — Roles (semantic, point at primitives) ───────────── */

  /* Background depth ramp. Note bg-2 (inputs) is DEEPER than bg-1 (panel)
   * — the Godot "inset well" convention: fields recede, panels rise. */
  --aiditor-bg-0: var(--aiditor-surface-canvas);   /* viewport */
  --aiditor-bg-1: var(--aiditor-surface-panel);    /* dock body = Godot surface_base */
  --aiditor-bg-2: var(--aiditor-surface-field);    /* input fields, inset wells */
  --aiditor-bg-3: var(--aiditor-surface-hover);    /* hover surfaces, dropdowns */
  --aiditor-bg-4: var(--aiditor-surface-active);   /* active surfaces */
  /* "Raised" surface — one step LIGHTER than dock body (bg-1). Reserved
   * for floating cards that should feel lifted off the panel. Pair with
   * --aiditor-shadow-raised. Distinct from bg-3 (hover) semantically. */
  --aiditor-bg-raised: var(--aiditor-surface-raised);

  /* Foreground emphasis ramp (strongest → most muted). */
  --aiditor-fg-0: var(--aiditor-text-primary);   /* primary text */
  --aiditor-fg-1: var(--aiditor-text-body);      /* body text */
  --aiditor-fg-2: var(--aiditor-text-label);     /* labels */
  --aiditor-fg-3: var(--aiditor-text-muted);     /* placeholder / disabled */

  /* Borders — low luminance difference, visible but never loud. */
  --aiditor-border:        var(--aiditor-stroke-subtle);
  --aiditor-border-strong: var(--aiditor-stroke-strong);
  --aiditor-border-input:  var(--aiditor-stroke-field);
  --aiditor-border-hover:  var(--aiditor-stroke-hover);

  /* Brand. */
  --aiditor-accent:      var(--aiditor-brand);
  --aiditor-accent-soft: var(--aiditor-brand-hover);
  --aiditor-accent-fg:   var(--aiditor-brand-contrast);
  --aiditor-accent-bg:   color-mix(in srgb, var(--aiditor-c-accent) 14%, transparent);
  --aiditor-accent-bg-strong: color-mix(in srgb, var(--aiditor-c-accent) 22%, transparent);

  /* States — derived from accent via color-mix so they shift with the theme. */
  --aiditor-hover:       color-mix(in srgb, var(--aiditor-c-11)    6%, transparent);
  --aiditor-active:      color-mix(in srgb, var(--aiditor-c-accent) 18%, transparent);
  --aiditor-selected:    color-mix(in srgb, var(--aiditor-c-accent) 22%, transparent);
  --aiditor-selected-hover: color-mix(in srgb, var(--aiditor-c-accent) 30%, transparent);
  --aiditor-selected-border: color-mix(in srgb, var(--aiditor-c-accent) 56%, var(--aiditor-border));
  --aiditor-selected-fg: var(--aiditor-fg-0);
  --aiditor-focus-ring:  var(--aiditor-c-accent);
  --aiditor-scrim:       color-mix(in srgb, var(--aiditor-surface-canvas) 62%, transparent);

  /* Semantic state colors as text + bg pairs. */
  --aiditor-success:    var(--aiditor-c-success);
  --aiditor-success-bg: color-mix(in srgb, var(--aiditor-c-success) 12%, transparent);
  --aiditor-success-fg: var(--aiditor-accent-fg);
  --aiditor-warn:       var(--aiditor-c-warn);
  --aiditor-warn-bg:    color-mix(in srgb, var(--aiditor-c-warn)    14%, transparent);
  --aiditor-warn-fg:    #15120a;
  --aiditor-error:      var(--aiditor-c-error);
  --aiditor-error-bg:   color-mix(in srgb, var(--aiditor-c-error)   14%, transparent);
  --aiditor-error-fg:   var(--aiditor-accent-fg);
  --aiditor-info:       var(--aiditor-c-info);
  --aiditor-info-bg:    color-mix(in srgb, var(--aiditor-c-info)    12%, transparent);
  --aiditor-info-fg:    var(--aiditor-accent-fg);

  /* Subtle highlight lines used on raised controls. Components should use
   * this instead of hard-coded white/black alpha overlays. */
  --aiditor-highlight-subtle: color-mix(in srgb, var(--aiditor-fg-0) 6%, transparent);
  --aiditor-highlight-strong: color-mix(in srgb, var(--aiditor-fg-0) 12%, transparent);

  /* ── Layer 1 — Spacing scale (4-pt grid) ───────────────────────── */
  --aiditor-space-1: 4px;
  --aiditor-space-2: 8px;
  --aiditor-space-3: 12px;
  --aiditor-space-4: 16px;
  --aiditor-space-5: 24px;
  --aiditor-space-6: 32px;

  /* ── Layer 1 — Sizing scale (control heights, icon sizes) ──────── */
  --aiditor-size-h-xs: 18px;
  --aiditor-size-h-sm: 22px;
  --aiditor-size-h-md: 26px;   /* default control height */
  --aiditor-size-h-lg: 32px;
  --aiditor-size-icon-sm: 12px;
  --aiditor-size-icon-md: 14px;
  --aiditor-size-icon-lg: 18px;

  /* ── Layer 1 — Radius scale ────────────────────────────────────── */
  --aiditor-r-1: 2px;
  --aiditor-r-2: 3px;
  --aiditor-r-3: 5px;
  --aiditor-r-4: 7px;
  --aiditor-r-pill: 999px;

  /* ── Layer 1 — Typography ──────────────────────────────────────── */
  --aiditor-font-ui:   -apple-system, BlinkMacSystemFont, 'Geist', 'Inter', system-ui, sans-serif;
  --aiditor-font-mono: 'Geist Mono', 'JetBrains Mono', 'SF Mono', 'Cascadia Code', Consolas, monospace;
  --aiditor-fs-xs: 11px;
  --aiditor-fs-sm: 12px;
  --aiditor-fs-md: 13px;   /* default body */
  --aiditor-fs-lg: 14px;
  --aiditor-fs-xl: 16px;
  --aiditor-lh-tight: 1.2;
  --aiditor-lh-base:  1.5;

  /* ── Layer 1 — Motion ──────────────────────────────────────────── */
  --aiditor-dur-fast: 80ms;    /* hover / focus / press */
  --aiditor-dur-med:  160ms;   /* dropdowns, popovers */
  --aiditor-dur-slow: 240ms;   /* drawers, modals */
  --aiditor-ease:     cubic-bezier(.2, .8, .2, 1);

  /* ── Layer 1 — Z-index scale ───────────────────────────────────── */
  --aiditor-z-content:  1;
  --aiditor-z-sticky:   10;
  --aiditor-z-dock-overlay: 100;     /* focus mode */
  --aiditor-z-popover:  1000;
  --aiditor-z-modal:    1100;
  --aiditor-z-toast:    1200;
  --aiditor-z-drag:     1300;        /* drag ghosts always on top */

  /* ── Layer 1 — Shadows ─────────────────────────────────────────
   * Dark default (low-contrast Godot chassis) uses restrained alphas so
   * popovers/modals don't read as ink blots. The Dracula theme below
   * overrides these back to stronger values to suit its deeper ramp. */
  --aiditor-shadow-1: 0 1px 2px rgba(0,0,0,.22);
  --aiditor-shadow-2: 0 2px 6px rgba(0,0,0,.30);
  --aiditor-shadow-3: 0 4px 14px rgba(0,0,0,.40);
  --aiditor-shadow-4: 0 8px 24px rgba(0,0,0,.50);
  /* Raised card shadow — subtle lift, not a modal drop. */
  --aiditor-shadow-raised: 0 1px 2px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.22);

  /* ── Layer 3 — Component-specific (rare; only if not a role) ───── */
  --aiditor-toolbar-h:    28px;
  --aiditor-panel-toolbar-h: 28px;
  --aiditor-panel-toolbar-py: 2px;
  --aiditor-tab-h:        28px;
  --aiditor-control-px:   8px;       /* default horizontal padding inside controls */
  --aiditor-toolbar-bg:   var(--aiditor-bg-raised);
  --aiditor-toolbar-border-w: 1px;
  --aiditor-toolbar-border: var(--aiditor-border);
  --aiditor-dock-border: var(--aiditor-border);
  --aiditor-chrome-border: var(--aiditor-border);
  --aiditor-view-bg:      var(--aiditor-bg-0);
  --aiditor-view-radius:  var(--aiditor-r-3);
  --aiditor-splitter-bg:  var(--aiditor-border);
  --aiditor-splitter-active-bg: var(--aiditor-accent);
  --aiditor-dock-tab-fg: var(--aiditor-fg-2);
  --aiditor-dock-tab-active-fg: var(--aiditor-fg-0);
  --aiditor-button-bg:    var(--aiditor-bg-2);
  --aiditor-button-border: var(--aiditor-border-strong);
  --aiditor-button-hover-bg: var(--aiditor-bg-3);
  --aiditor-button-hover-border: var(--aiditor-border-hover);
  --aiditor-button-active-bg: var(--aiditor-bg-4);
  --aiditor-button-active-border: var(--aiditor-button-border);

  /* ── Layer 3 — Interaction thresholds (JS reads via ui.readNum) ── */
  --aiditor-drag-threshold: 6;       /* px before a pointerdown becomes a drag */

  /* ── Layer 3 — Status icon glyphs (consumed by CSS `content:`) ─── */
  --aiditor-icon-info:    "ⓘ";
  --aiditor-icon-success: "✓";
  --aiditor-icon-warn:    "⚠";
  --aiditor-icon-error:   "⨯";

  /* Compatibility aliases for existing theme consumers. */
  --aiditor-color-bg-0:        var(--aiditor-bg-0);
  --aiditor-color-bg-1:        var(--aiditor-bg-1);
  --aiditor-color-border:      var(--aiditor-border);
  --aiditor-color-fg-0:        var(--aiditor-fg-0);
  --aiditor-color-fg-2:        var(--aiditor-fg-2);
  --aiditor-color-accent:      var(--aiditor-accent);
  --aiditor-color-accent-soft: var(--aiditor-accent-soft);
}

/* ── Dracula theme — a richer, violet-accented dark with raised fields.
 * Deeper grayscale ramp, cool-violet accent, stronger shadows, and the
 * "raised input" role mapping (bg-2 LIGHTER than bg-1) that contrasts
 * the default Godot "inset input" convention. Selected via
 * [data-aiditor-theme="dracula"]. */
:root[data-aiditor-density="compact"],
.aiditor-root[data-aiditor-density="compact"] {
  --aiditor-fs-xs: 10px;
  --aiditor-fs-sm: 11px;
  --aiditor-fs-md: 12px;
  --aiditor-fs-lg: 13px;
  --aiditor-fs-xl: 14px;
}

:root[data-aiditor-density="comfortable"],
.aiditor-root[data-aiditor-density="comfortable"] {
  --aiditor-fs-xs: 12px;
  --aiditor-fs-sm: 13px;
  --aiditor-fs-md: 14px;
  --aiditor-fs-lg: 16px;
  --aiditor-fs-xl: 18px;
}

:root[data-aiditor-theme="dracula"],
.aiditor-root[data-aiditor-theme="dracula"] {
  color-scheme: dark;

  --aiditor-surface-canvas: #0c0c0e;
  --aiditor-surface-lower:  #111113;
  --aiditor-surface-frame:  #16161a;
  --aiditor-surface-panel:  #111113;
  --aiditor-surface-field:  #1c1c20;
  --aiditor-surface-hover:  #2a2a30;
  --aiditor-surface-active: #38383f;
  --aiditor-surface-raised: #1c1c20;

  --aiditor-text-primary:  #e8e8f0;
  --aiditor-text-body:     #c4c4cc;
  --aiditor-text-label:    #9494a0;
  --aiditor-text-muted:    #72727c;
  --aiditor-text-disabled: #5e5e66;

  --aiditor-stroke-subtle: #1c1c20;
  --aiditor-stroke-strong: #2a2a30;
  --aiditor-stroke-field:  #2a2a30;
  --aiditor-stroke-hover:  #4a4a52;

  --aiditor-brand:          #7b6ef6;
  --aiditor-brand-hover:    #a89ff8;
  --aiditor-brand-contrast: #ffffff;

  --aiditor-state-success: #3ecf8e;
  --aiditor-state-warning: #f0a050;
  --aiditor-state-danger:  #e05555;
  --aiditor-state-info:    #38bdf8;

  --aiditor-c-00: #0c0c0e;
  --aiditor-c-01: #111113;
  --aiditor-c-02: #16161a;
  --aiditor-c-03: #1c1c20;
  --aiditor-c-04: #24242a;
  --aiditor-c-05: #2a2a30;
  --aiditor-c-06: #38383f;
  --aiditor-c-07: #4a4a52;
  --aiditor-c-08: #5e5e66;
  --aiditor-c-09: #72727c;
  --aiditor-c-10: #9494a0;
  --aiditor-c-11: #e8e8f0;

  --aiditor-c-accent:      #7b6ef6;
  --aiditor-c-accent-soft: #a89ff8;

  --aiditor-c-success: #3ecf8e;
  --aiditor-c-warn:    #f0a050;
  --aiditor-c-error:   #e05555;
  --aiditor-c-info:    #38bdf8;

  /* Raised-input role mapping: field sits ABOVE panel, opposite of the
   * Godot default. This is the single substantive layout difference
   * between the two dark themes — everything else is palette. */
  --aiditor-bg-1: var(--aiditor-surface-panel);   /* dock body */
  --aiditor-bg-2: var(--aiditor-surface-field);   /* input (lighter than panel) */
  --aiditor-bg-3: var(--aiditor-surface-hover);
  --aiditor-bg-4: var(--aiditor-surface-active);
  --aiditor-bg-raised: var(--aiditor-surface-raised);   /* raised cards sit above bg-1 */

  --aiditor-border:        var(--aiditor-stroke-subtle);
  --aiditor-border-strong: var(--aiditor-stroke-strong);
  --aiditor-border-input:  var(--aiditor-stroke-field);
  --aiditor-border-hover:  var(--aiditor-stroke-hover);

  --aiditor-fg-1: var(--aiditor-text-body);

  --aiditor-shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --aiditor-shadow-2: 0 2px 8px rgba(0,0,0,.5);
  --aiditor-shadow-3: 0 4px 16px rgba(0,0,0,.6);
  --aiditor-shadow-4: 0 8px 32px rgba(0,0,0,.7);
  --aiditor-shadow-raised: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px rgba(0,0,0,.35);
}

/* Harbor theme - layered charcoal editor palette with quiet translucent tabs. */
:root[data-aiditor-theme="harbor"],
.aiditor-root[data-aiditor-theme="harbor"] {
  color-scheme: dark;

  --aiditor-surface-canvas: #18181a;
  --aiditor-surface-lower:  #272729;
  --aiditor-surface-frame:  #313035;
  --aiditor-surface-panel:  #3f4045;
  --aiditor-surface-field:  #313035;
  --aiditor-surface-hover:  #37363b;
  --aiditor-surface-active: #3f4045;
  --aiditor-surface-raised: #313035;

  --aiditor-text-primary:  #cacbd0;
  --aiditor-text-body:     #cacbd0;
  --aiditor-text-label:    #97969c;
  --aiditor-text-muted:    #65656c;
  --aiditor-text-disabled: #55555b;

  --aiditor-stroke-subtle: #37363b;
  --aiditor-stroke-strong: #4a4a51;
  --aiditor-stroke-field:  #37363b;
  --aiditor-stroke-hover:  #55555b;

  --aiditor-brand:          #72d6b4;
  --aiditor-brand-hover:    #8effd5;
  --aiditor-brand-contrast: #10211b;

  --aiditor-state-success: #72d6b4;
  --aiditor-state-warning: #d4b76a;
  --aiditor-state-danger:  #ef746b;
  --aiditor-state-info:    #7eb6d8;

  --aiditor-c-00: #18181a;
  --aiditor-c-01: #272729;
  --aiditor-c-02: #313035;
  --aiditor-c-03: #3f4045;
  --aiditor-c-04: #37363b;
  --aiditor-c-05: #4a4a51;
  --aiditor-c-06: #55555b;
  --aiditor-c-07: #65656c;
  --aiditor-c-08: #7b7b82;
  --aiditor-c-09: #97969c;
  --aiditor-c-10: #b4b5ba;
  --aiditor-c-11: #cacbd0;

  --aiditor-c-accent:      var(--aiditor-brand);
  --aiditor-c-accent-soft: var(--aiditor-brand-hover);
  --aiditor-c-success: var(--aiditor-state-success);
  --aiditor-c-warn:    var(--aiditor-state-warning);
  --aiditor-c-error:   var(--aiditor-state-danger);
  --aiditor-c-info:    var(--aiditor-state-info);

  --aiditor-bg-0: var(--aiditor-surface-canvas);
  --aiditor-bg-1: var(--aiditor-surface-panel);
  --aiditor-bg-2: var(--aiditor-surface-field);
  --aiditor-bg-3: var(--aiditor-surface-hover);
  --aiditor-bg-4: var(--aiditor-surface-active);
  --aiditor-bg-raised: var(--aiditor-surface-raised);

  --aiditor-fg-0: var(--aiditor-text-primary);
  --aiditor-fg-1: var(--aiditor-text-body);
  --aiditor-fg-2: var(--aiditor-text-label);
  --aiditor-fg-3: var(--aiditor-text-muted);

  --aiditor-border:        var(--aiditor-stroke-subtle);
  --aiditor-border-strong: var(--aiditor-stroke-strong);
  --aiditor-border-input:  var(--aiditor-stroke-field);
  --aiditor-border-hover:  var(--aiditor-stroke-hover);

  --aiditor-accent:      var(--aiditor-brand);
  --aiditor-accent-soft: var(--aiditor-brand-hover);
  --aiditor-accent-fg:   var(--aiditor-brand-contrast);
  --aiditor-accent-bg:   color-mix(in srgb, var(--aiditor-brand) 16%, transparent);
  --aiditor-accent-bg-strong: color-mix(in srgb, var(--aiditor-brand) 26%, transparent);

  --aiditor-hover:    color-mix(in srgb, var(--aiditor-text-primary) 5%, transparent);
  --aiditor-active:   color-mix(in srgb, var(--aiditor-brand) 16%, transparent);
  --aiditor-selected: color-mix(in srgb, var(--aiditor-brand) 20%, transparent);
  --aiditor-selected-hover: color-mix(in srgb, var(--aiditor-brand) 28%, transparent);
  --aiditor-selected-border: color-mix(in srgb, var(--aiditor-brand) 54%, var(--aiditor-border));
  --aiditor-selected-fg: var(--aiditor-fg-0);
  --aiditor-scrim:    color-mix(in srgb, var(--aiditor-surface-canvas) 66%, transparent);

  --aiditor-toolbar-bg: transparent;
  --aiditor-toolbar-border-w: 0px;
  --aiditor-toolbar-border: transparent;
  --aiditor-dock-border: transparent;
  --aiditor-chrome-border: transparent;
  --aiditor-view-bg: var(--aiditor-bg-2);
  --aiditor-view-radius: var(--aiditor-r-4);
  --aiditor-splitter-bg: transparent;
  --aiditor-splitter-active-bg: var(--aiditor-accent);
  --aiditor-dock-tab-fg: #65656c;
  --aiditor-dock-tab-active-fg: #cacbd0;
  --aiditor-button-bg: #272729;
  --aiditor-button-border: #313235;
  --aiditor-button-hover-bg: #313035;
  --aiditor-button-hover-border: #313235;
  --aiditor-button-active-bg: #3f4045;
  --aiditor-button-active-border: #313235;

  --aiditor-highlight-subtle: color-mix(in srgb, var(--aiditor-fg-0) 3%, transparent);
  --aiditor-highlight-strong: color-mix(in srgb, var(--aiditor-fg-0) 8%, transparent);

  --aiditor-shadow-1: 0 1px 2px rgba(0,0,0,.20);
  --aiditor-shadow-2: 0 2px 8px rgba(0,0,0,.28);
  --aiditor-shadow-3: 0 4px 16px rgba(0,0,0,.36);
  --aiditor-shadow-4: 0 8px 32px rgba(0,0,0,.46);
  --aiditor-shadow-raised: none;
}

/* Linen theme - warm paper surfaces with graphite text and a restrained teal accent. */
:root[data-aiditor-theme="linen"],
.aiditor-root[data-aiditor-theme="linen"] {
  color-scheme: light;

  --aiditor-surface-canvas: #ece4d8;
  --aiditor-surface-lower:  #f9f4ec;
  --aiditor-surface-frame:  #e2d8c9;
  --aiditor-surface-panel:  #f3ece1;
  --aiditor-surface-field:  #e7dccd;
  --aiditor-surface-hover:  #d9cdbb;
  --aiditor-surface-active: #ccbea9;
  --aiditor-surface-raised: #fffaf1;

  --aiditor-text-primary:  #24211d;
  --aiditor-text-body:     #403a32;
  --aiditor-text-label:    #665d51;
  --aiditor-text-muted:    #897e70;
  --aiditor-text-disabled: #a99f92;

  --aiditor-stroke-subtle: #d5c8b6;
  --aiditor-stroke-strong: #b8a891;
  --aiditor-stroke-field:  #c6b7a2;
  --aiditor-stroke-hover:  #9c8a73;

  --aiditor-brand:          #287d74;
  --aiditor-brand-hover:    #35a095;
  --aiditor-brand-contrast: #f6fffb;

  --aiditor-state-success: #3f9b63;
  --aiditor-state-warning: #bd7b2f;
  --aiditor-state-danger:  #c45d57;
  --aiditor-state-info:    #347da6;

  --aiditor-c-00: #ece4d8;
  --aiditor-c-01: #f9f4ec;
  --aiditor-c-02: #f3ece1;
  --aiditor-c-03: #e7dccd;
  --aiditor-c-04: #d9cdbb;
  --aiditor-c-05: #ccbea9;
  --aiditor-c-06: #b8a891;
  --aiditor-c-07: #9c8a73;
  --aiditor-c-08: #897e70;
  --aiditor-c-09: #665d51;
  --aiditor-c-10: #403a32;
  --aiditor-c-11: #24211d;

  --aiditor-c-accent:      var(--aiditor-brand);
  --aiditor-c-accent-soft: var(--aiditor-brand-hover);
  --aiditor-c-success: var(--aiditor-state-success);
  --aiditor-c-warn:    var(--aiditor-state-warning);
  --aiditor-c-error:   var(--aiditor-state-danger);
  --aiditor-c-info:    var(--aiditor-state-info);

  --aiditor-bg-0: var(--aiditor-surface-canvas);
  --aiditor-bg-1: var(--aiditor-surface-panel);
  --aiditor-bg-2: var(--aiditor-surface-field);
  --aiditor-bg-3: var(--aiditor-surface-hover);
  --aiditor-bg-4: var(--aiditor-surface-active);
  --aiditor-bg-raised: var(--aiditor-surface-raised);

  --aiditor-fg-0: var(--aiditor-text-primary);
  --aiditor-fg-1: var(--aiditor-text-body);
  --aiditor-fg-2: var(--aiditor-text-label);
  --aiditor-fg-3: var(--aiditor-text-muted);

  --aiditor-border:        var(--aiditor-stroke-subtle);
  --aiditor-border-strong: var(--aiditor-stroke-strong);
  --aiditor-border-input:  var(--aiditor-stroke-field);
  --aiditor-border-hover:  var(--aiditor-stroke-hover);

  --aiditor-accent:      var(--aiditor-brand);
  --aiditor-accent-soft: var(--aiditor-brand-hover);
  --aiditor-accent-fg:   var(--aiditor-brand-contrast);
  --aiditor-accent-bg:   color-mix(in srgb, var(--aiditor-brand) 13%, transparent);
  --aiditor-accent-bg-strong: color-mix(in srgb, var(--aiditor-brand) 22%, transparent);

  --aiditor-hover:       color-mix(in srgb, var(--aiditor-text-primary) 6%, transparent);
  --aiditor-active:      color-mix(in srgb, var(--aiditor-brand) 15%, transparent);
  --aiditor-selected:    color-mix(in srgb, var(--aiditor-brand) 18%, transparent);
  --aiditor-selected-hover: color-mix(in srgb, var(--aiditor-brand) 26%, transparent);
  --aiditor-selected-border: color-mix(in srgb, var(--aiditor-brand) 50%, var(--aiditor-border));
  --aiditor-selected-fg: var(--aiditor-fg-0);
  --aiditor-scrim:       color-mix(in srgb, #31271a 38%, transparent);

  --aiditor-success:    var(--aiditor-c-success);
  --aiditor-success-bg: color-mix(in srgb, var(--aiditor-c-success) 13%, transparent);
  --aiditor-success-fg: #f8fff8;
  --aiditor-warn:       var(--aiditor-c-warn);
  --aiditor-warn-bg:    color-mix(in srgb, var(--aiditor-c-warn) 14%, transparent);
  --aiditor-warn-fg:    #201407;
  --aiditor-error:      var(--aiditor-c-error);
  --aiditor-error-bg:   color-mix(in srgb, var(--aiditor-c-error) 13%, transparent);
  --aiditor-error-fg:   #fff8f6;
  --aiditor-info:       var(--aiditor-c-info);
  --aiditor-info-bg:    color-mix(in srgb, var(--aiditor-c-info) 12%, transparent);
  --aiditor-info-fg:    #f5fbff;

  --aiditor-toolbar-bg: var(--aiditor-bg-raised);
  --aiditor-toolbar-border-w: 1px;
  --aiditor-toolbar-border: var(--aiditor-border);
  --aiditor-dock-border: var(--aiditor-border);
  --aiditor-chrome-border: var(--aiditor-border);
  --aiditor-view-bg: var(--aiditor-bg-0);
  --aiditor-view-radius: var(--aiditor-r-3);
  --aiditor-splitter-bg: var(--aiditor-border);
  --aiditor-splitter-active-bg: var(--aiditor-accent);
  --aiditor-dock-tab-fg: var(--aiditor-fg-2);
  --aiditor-dock-tab-active-fg: var(--aiditor-fg-0);
  --aiditor-button-bg: var(--aiditor-bg-2);
  --aiditor-button-border: var(--aiditor-border-strong);
  --aiditor-button-hover-bg: var(--aiditor-bg-3);
  --aiditor-button-hover-border: var(--aiditor-border-hover);
  --aiditor-button-active-bg: var(--aiditor-bg-4);
  --aiditor-button-active-border: var(--aiditor-border-strong);

  --aiditor-highlight-subtle: color-mix(in srgb, #ffffff 46%, transparent);
  --aiditor-highlight-strong: color-mix(in srgb, #ffffff 68%, transparent);
  --aiditor-shadow-1: 0 1px 2px rgba(80,60,34,.12);
  --aiditor-shadow-2: 0 2px 8px rgba(80,60,34,.14);
  --aiditor-shadow-3: 0 4px 16px rgba(80,60,34,.16);
  --aiditor-shadow-4: 0 8px 32px rgba(80,60,34,.20);
  --aiditor-shadow-raised: 0 1px 2px rgba(80,60,34,.10), 0 2px 7px rgba(80,60,34,.14);
}

/* Sakura theme - soft cherry-blossom surfaces with plum text and rose accent. */
:root[data-aiditor-theme="sakura"],
.aiditor-root[data-aiditor-theme="sakura"] {
  color-scheme: light;

  --aiditor-surface-canvas: #f5e9ec;
  --aiditor-surface-lower:  #fff9f7;
  --aiditor-surface-frame:  #ead7dc;
  --aiditor-surface-panel:  #fff3f4;
  --aiditor-surface-field:  #f0dde2;
  --aiditor-surface-hover:  #e5c8d1;
  --aiditor-surface-active: #dcb7c3;
  --aiditor-surface-raised: #fffaf8;

  --aiditor-text-primary:  #25191d;
  --aiditor-text-body:     #3d2e33;
  --aiditor-text-label:    #66515a;
  --aiditor-text-muted:    #8b737c;
  --aiditor-text-disabled: #ad9aa1;

  --aiditor-stroke-subtle: #ead0d8;
  --aiditor-stroke-strong: #cda8b5;
  --aiditor-stroke-field:  #d9b8c3;
  --aiditor-stroke-hover:  #b78396;

  --aiditor-brand:          #c95786;
  --aiditor-brand-hover:    #e1749e;
  --aiditor-brand-contrast: #fff8fb;

  --aiditor-state-success: #4f9b73;
  --aiditor-state-warning: #b8793a;
  --aiditor-state-danger:  #c85262;
  --aiditor-state-info:    #4f86b7;

  --aiditor-c-00: #f5e9ec;
  --aiditor-c-01: #fff9f7;
  --aiditor-c-02: #fff3f4;
  --aiditor-c-03: #f0dde2;
  --aiditor-c-04: #e5c8d1;
  --aiditor-c-05: #dcb7c3;
  --aiditor-c-06: #cda8b5;
  --aiditor-c-07: #b78396;
  --aiditor-c-08: #ad9aa1;
  --aiditor-c-09: #8b737c;
  --aiditor-c-10: #3d2e33;
  --aiditor-c-11: #25191d;

  --aiditor-c-accent:      var(--aiditor-brand);
  --aiditor-c-accent-soft: var(--aiditor-brand-hover);
  --aiditor-c-success: var(--aiditor-state-success);
  --aiditor-c-warn:    var(--aiditor-state-warning);
  --aiditor-c-error:   var(--aiditor-state-danger);
  --aiditor-c-info:    var(--aiditor-state-info);

  --aiditor-bg-0: var(--aiditor-surface-canvas);
  --aiditor-bg-1: var(--aiditor-surface-panel);
  --aiditor-bg-2: var(--aiditor-surface-field);
  --aiditor-bg-3: var(--aiditor-surface-hover);
  --aiditor-bg-4: var(--aiditor-surface-active);
  --aiditor-bg-raised: var(--aiditor-surface-raised);

  --aiditor-fg-0: var(--aiditor-text-primary);
  --aiditor-fg-1: var(--aiditor-text-body);
  --aiditor-fg-2: var(--aiditor-text-label);
  --aiditor-fg-3: var(--aiditor-text-muted);

  --aiditor-border:        var(--aiditor-stroke-subtle);
  --aiditor-border-strong: var(--aiditor-stroke-strong);
  --aiditor-border-input:  var(--aiditor-stroke-field);
  --aiditor-border-hover:  var(--aiditor-stroke-hover);

  --aiditor-accent:      var(--aiditor-brand);
  --aiditor-accent-soft: var(--aiditor-brand-hover);
  --aiditor-accent-fg:   var(--aiditor-brand-contrast);
  --aiditor-accent-bg:   color-mix(in srgb, var(--aiditor-brand) 13%, transparent);
  --aiditor-accent-bg-strong: color-mix(in srgb, var(--aiditor-brand) 22%, transparent);

  --aiditor-hover:       color-mix(in srgb, var(--aiditor-text-primary) 6%, transparent);
  --aiditor-active:      color-mix(in srgb, var(--aiditor-brand) 15%, transparent);
  --aiditor-selected:    color-mix(in srgb, var(--aiditor-brand) 18%, transparent);
  --aiditor-selected-hover: color-mix(in srgb, var(--aiditor-brand) 26%, transparent);
  --aiditor-selected-border: color-mix(in srgb, var(--aiditor-brand) 50%, var(--aiditor-border));
  --aiditor-selected-fg: var(--aiditor-fg-0);
  --aiditor-scrim:       color-mix(in srgb, #4d2430 36%, transparent);

  --aiditor-success:    var(--aiditor-c-success);
  --aiditor-success-bg: color-mix(in srgb, var(--aiditor-c-success) 13%, transparent);
  --aiditor-success-fg: #f7fff9;
  --aiditor-warn:       var(--aiditor-c-warn);
  --aiditor-warn-bg:    color-mix(in srgb, var(--aiditor-c-warn) 14%, transparent);
  --aiditor-warn-fg:    #211305;
  --aiditor-error:      var(--aiditor-c-error);
  --aiditor-error-bg:   color-mix(in srgb, var(--aiditor-c-error) 13%, transparent);
  --aiditor-error-fg:   #fff8f9;
  --aiditor-info:       var(--aiditor-c-info);
  --aiditor-info-bg:    color-mix(in srgb, var(--aiditor-c-info) 12%, transparent);
  --aiditor-info-fg:    #f6fbff;

  --aiditor-toolbar-bg: var(--aiditor-bg-raised);
  --aiditor-toolbar-border-w: 1px;
  --aiditor-toolbar-border: var(--aiditor-border);
  --aiditor-dock-border: var(--aiditor-border);
  --aiditor-chrome-border: var(--aiditor-border);
  --aiditor-view-bg: var(--aiditor-bg-0);
  --aiditor-view-radius: var(--aiditor-r-3);
  --aiditor-splitter-bg: var(--aiditor-border);
  --aiditor-splitter-active-bg: var(--aiditor-accent);
  --aiditor-dock-tab-fg: var(--aiditor-fg-2);
  --aiditor-dock-tab-active-fg: var(--aiditor-fg-0);
  --aiditor-button-bg: var(--aiditor-bg-2);
  --aiditor-button-border: var(--aiditor-border-strong);
  --aiditor-button-hover-bg: var(--aiditor-bg-3);
  --aiditor-button-hover-border: var(--aiditor-border-hover);
  --aiditor-button-active-bg: var(--aiditor-bg-4);
  --aiditor-button-active-border: var(--aiditor-border-strong);

  --aiditor-highlight-subtle: color-mix(in srgb, #ffffff 50%, transparent);
  --aiditor-highlight-strong: color-mix(in srgb, #ffffff 72%, transparent);
  --aiditor-shadow-1: 0 1px 2px rgba(93,39,57,.10);
  --aiditor-shadow-2: 0 2px 8px rgba(93,39,57,.12);
  --aiditor-shadow-3: 0 4px 16px rgba(93,39,57,.14);
  --aiditor-shadow-4: 0 8px 32px rgba(93,39,57,.18);
  --aiditor-shadow-raised: 0 1px 2px rgba(93,39,57,.09), 0 2px 7px rgba(93,39,57,.12);
}

/* Abyss theme id, shown as Sea - brighter ocean blue with sea-glass accent. */
:root[data-aiditor-theme="abyss"],
.aiditor-root[data-aiditor-theme="abyss"] {
  color-scheme: dark;

  --aiditor-surface-canvas: #102830;
  --aiditor-surface-lower:  #15313a;
  --aiditor-surface-frame:  #1a3c46;
  --aiditor-surface-panel:  #204956;
  --aiditor-surface-field:  #163640;
  --aiditor-surface-hover:  #2b6371;
  --aiditor-surface-active: #377987;
  --aiditor-surface-raised: #255866;

  --aiditor-text-primary:  #f0fbfa;
  --aiditor-text-body:     #cde9e6;
  --aiditor-text-label:    #9fc6c4;
  --aiditor-text-muted:    #75999b;
  --aiditor-text-disabled: #58797d;

  --aiditor-stroke-subtle: #2a5a66;
  --aiditor-stroke-strong: #41808d;
  --aiditor-stroke-field:  #346b78;
  --aiditor-stroke-hover:  #65aeba;

  --aiditor-brand:          #55d8d1;
  --aiditor-brand-hover:    #8cf1ea;
  --aiditor-brand-contrast: #062329;

  --aiditor-state-success: #7bdd9a;
  --aiditor-state-warning: #e2b869;
  --aiditor-state-danger:  #ec8177;
  --aiditor-state-info:    #83d7ff;

  --aiditor-c-00: #102830;
  --aiditor-c-01: #15313a;
  --aiditor-c-02: #1a3c46;
  --aiditor-c-03: #204956;
  --aiditor-c-04: #2b6371;
  --aiditor-c-05: #377987;
  --aiditor-c-06: #41808d;
  --aiditor-c-07: #65aeba;
  --aiditor-c-08: #75999b;
  --aiditor-c-09: #9fc6c4;
  --aiditor-c-10: #cde9e6;
  --aiditor-c-11: #f0fbfa;

  --aiditor-c-accent:      var(--aiditor-brand);
  --aiditor-c-accent-soft: var(--aiditor-brand-hover);
  --aiditor-c-success: var(--aiditor-state-success);
  --aiditor-c-warn:    var(--aiditor-state-warning);
  --aiditor-c-error:   var(--aiditor-state-danger);
  --aiditor-c-info:    var(--aiditor-state-info);

  --aiditor-bg-0: var(--aiditor-surface-canvas);
  --aiditor-bg-1: var(--aiditor-surface-panel);
  --aiditor-bg-2: var(--aiditor-surface-field);
  --aiditor-bg-3: var(--aiditor-surface-hover);
  --aiditor-bg-4: var(--aiditor-surface-active);
  --aiditor-bg-raised: var(--aiditor-surface-raised);

  --aiditor-fg-0: var(--aiditor-text-primary);
  --aiditor-fg-1: var(--aiditor-text-body);
  --aiditor-fg-2: var(--aiditor-text-label);
  --aiditor-fg-3: var(--aiditor-text-muted);

  --aiditor-border:        var(--aiditor-stroke-subtle);
  --aiditor-border-strong: var(--aiditor-stroke-strong);
  --aiditor-border-input:  var(--aiditor-stroke-field);
  --aiditor-border-hover:  var(--aiditor-stroke-hover);

  --aiditor-accent:      var(--aiditor-brand);
  --aiditor-accent-soft: var(--aiditor-brand-hover);
  --aiditor-accent-fg:   var(--aiditor-brand-contrast);
  --aiditor-accent-bg:   color-mix(in srgb, var(--aiditor-brand) 15%, transparent);
  --aiditor-accent-bg-strong: color-mix(in srgb, var(--aiditor-brand) 25%, transparent);

  --aiditor-hover:       color-mix(in srgb, var(--aiditor-text-primary) 8%, transparent);
  --aiditor-active:      color-mix(in srgb, var(--aiditor-brand) 19%, transparent);
  --aiditor-selected:    color-mix(in srgb, var(--aiditor-brand) 23%, transparent);
  --aiditor-selected-hover: color-mix(in srgb, var(--aiditor-brand) 33%, transparent);
  --aiditor-selected-border: color-mix(in srgb, var(--aiditor-brand) 62%, var(--aiditor-border));
  --aiditor-selected-fg: var(--aiditor-fg-0);
  --aiditor-scrim:       color-mix(in srgb, var(--aiditor-surface-canvas) 70%, transparent);

  --aiditor-success:    var(--aiditor-c-success);
  --aiditor-success-bg: color-mix(in srgb, var(--aiditor-c-success) 14%, transparent);
  --aiditor-success-fg: #062329;
  --aiditor-warn:       var(--aiditor-c-warn);
  --aiditor-warn-bg:    color-mix(in srgb, var(--aiditor-c-warn) 15%, transparent);
  --aiditor-warn-fg:    #1c1304;
  --aiditor-error:      var(--aiditor-c-error);
  --aiditor-error-bg:   color-mix(in srgb, var(--aiditor-c-error) 14%, transparent);
  --aiditor-error-fg:   #fff8f6;
  --aiditor-info:       var(--aiditor-c-info);
  --aiditor-info-bg:    color-mix(in srgb, var(--aiditor-c-info) 13%, transparent);
  --aiditor-info-fg:    #062329;

  --aiditor-toolbar-bg: var(--aiditor-bg-raised);
  --aiditor-toolbar-border-w: 1px;
  --aiditor-toolbar-border: var(--aiditor-border);
  --aiditor-dock-border: var(--aiditor-border);
  --aiditor-chrome-border: var(--aiditor-border);
  --aiditor-view-bg: var(--aiditor-bg-0);
  --aiditor-view-radius: var(--aiditor-r-3);
  --aiditor-splitter-bg: color-mix(in srgb, var(--aiditor-border) 82%, var(--aiditor-bg-0));
  --aiditor-splitter-active-bg: var(--aiditor-accent);
  --aiditor-dock-tab-fg: var(--aiditor-fg-2);
  --aiditor-dock-tab-active-fg: var(--aiditor-fg-0);
  --aiditor-button-bg: var(--aiditor-bg-2);
  --aiditor-button-border: var(--aiditor-border-strong);
  --aiditor-button-hover-bg: var(--aiditor-bg-3);
  --aiditor-button-hover-border: var(--aiditor-border-hover);
  --aiditor-button-active-bg: var(--aiditor-bg-4);
  --aiditor-button-active-border: var(--aiditor-border-strong);

  --aiditor-highlight-subtle: color-mix(in srgb, var(--aiditor-fg-0) 7%, transparent);
  --aiditor-highlight-strong: color-mix(in srgb, var(--aiditor-fg-0) 14%, transparent);
  --aiditor-shadow-1: 0 1px 2px rgba(1,14,18,.30);
  --aiditor-shadow-2: 0 2px 8px rgba(1,14,18,.38);
  --aiditor-shadow-3: 0 4px 16px rgba(1,14,18,.46);
  --aiditor-shadow-4: 0 8px 32px rgba(1,14,18,.56);
  --aiditor-shadow-raised: 0 1px 2px rgba(1,14,18,.28), 0 3px 10px rgba(1,14,18,.34);
}

/* Hadal theme id, shown as Abyss - blue-gray black with cold ocean highlights. */
:root[data-aiditor-theme="hadal"],
.aiditor-root[data-aiditor-theme="hadal"] {
  color-scheme: dark;

  --aiditor-surface-canvas: #02050a;
  --aiditor-surface-lower:  #040812;
  --aiditor-surface-frame:  #070d18;
  --aiditor-surface-panel:  #0a1421;
  --aiditor-surface-field:  #050b14;
  --aiditor-surface-hover:  #101d2e;
  --aiditor-surface-active: #172840;
  --aiditor-surface-raised: #0d1828;

  --aiditor-text-primary:  #d9e5ee;
  --aiditor-text-body:     #a1b3c4;
  --aiditor-text-label:    #708295;
  --aiditor-text-muted:    #4a5d70;
  --aiditor-text-disabled: #354557;

  --aiditor-stroke-subtle: #122235;
  --aiditor-stroke-strong: #203a56;
  --aiditor-stroke-field:  #172b41;
  --aiditor-stroke-hover:  #355f85;

  --aiditor-brand:          #4fa8ea;
  --aiditor-brand-hover:    #7ecbff;
  --aiditor-brand-contrast: #02070d;

  --aiditor-state-success: #55bd83;
  --aiditor-state-warning: #c4924f;
  --aiditor-state-danger:  #d26d6b;
  --aiditor-state-info:    #4fa8ea;

  --aiditor-c-00: #02050a;
  --aiditor-c-01: #040812;
  --aiditor-c-02: #070d18;
  --aiditor-c-03: #0a1421;
  --aiditor-c-04: #101d2e;
  --aiditor-c-05: #172840;
  --aiditor-c-06: #203a56;
  --aiditor-c-07: #355f85;
  --aiditor-c-08: #4a5d70;
  --aiditor-c-09: #708295;
  --aiditor-c-10: #a1b3c4;
  --aiditor-c-11: #d9e5ee;

  --aiditor-c-accent:      var(--aiditor-brand);
  --aiditor-c-accent-soft: var(--aiditor-brand-hover);
  --aiditor-c-success: var(--aiditor-state-success);
  --aiditor-c-warn:    var(--aiditor-state-warning);
  --aiditor-c-error:   var(--aiditor-state-danger);
  --aiditor-c-info:    var(--aiditor-state-info);

  --aiditor-bg-0: var(--aiditor-surface-canvas);
  --aiditor-bg-1: var(--aiditor-surface-panel);
  --aiditor-bg-2: var(--aiditor-surface-field);
  --aiditor-bg-3: var(--aiditor-surface-hover);
  --aiditor-bg-4: var(--aiditor-surface-active);
  --aiditor-bg-raised: var(--aiditor-surface-raised);

  --aiditor-fg-0: var(--aiditor-text-primary);
  --aiditor-fg-1: var(--aiditor-text-body);
  --aiditor-fg-2: var(--aiditor-text-label);
  --aiditor-fg-3: var(--aiditor-text-muted);

  --aiditor-border:        var(--aiditor-stroke-subtle);
  --aiditor-border-strong: var(--aiditor-stroke-strong);
  --aiditor-border-input:  var(--aiditor-stroke-field);
  --aiditor-border-hover:  var(--aiditor-stroke-hover);

  --aiditor-accent:      var(--aiditor-brand);
  --aiditor-accent-soft: var(--aiditor-brand-hover);
  --aiditor-accent-fg:   var(--aiditor-brand-contrast);
  --aiditor-accent-bg:   color-mix(in srgb, var(--aiditor-brand) 12%, transparent);
  --aiditor-accent-bg-strong: color-mix(in srgb, var(--aiditor-brand) 21%, transparent);

  --aiditor-hover:       color-mix(in srgb, var(--aiditor-text-primary) 6%, transparent);
  --aiditor-active:      color-mix(in srgb, var(--aiditor-brand) 15%, transparent);
  --aiditor-selected:    color-mix(in srgb, var(--aiditor-brand) 19%, transparent);
  --aiditor-selected-hover: color-mix(in srgb, var(--aiditor-brand) 27%, transparent);
  --aiditor-selected-border: color-mix(in srgb, var(--aiditor-brand) 54%, var(--aiditor-border));
  --aiditor-selected-fg: var(--aiditor-fg-0);
  --aiditor-scrim:       color-mix(in srgb, var(--aiditor-surface-canvas) 76%, transparent);

  --aiditor-success:    var(--aiditor-c-success);
  --aiditor-success-bg: color-mix(in srgb, var(--aiditor-c-success) 13%, transparent);
  --aiditor-success-fg: #02070d;
  --aiditor-warn:       var(--aiditor-c-warn);
  --aiditor-warn-bg:    color-mix(in srgb, var(--aiditor-c-warn) 14%, transparent);
  --aiditor-warn-fg:    #1b1104;
  --aiditor-error:      var(--aiditor-c-error);
  --aiditor-error-bg:   color-mix(in srgb, var(--aiditor-c-error) 13%, transparent);
  --aiditor-error-fg:   #fff8f6;
  --aiditor-info:       var(--aiditor-c-info);
  --aiditor-info-bg:    color-mix(in srgb, var(--aiditor-c-info) 14%, transparent);
  --aiditor-info-fg:    #02070d;

  --aiditor-toolbar-bg: var(--aiditor-bg-raised);
  --aiditor-toolbar-border-w: 1px;
  --aiditor-toolbar-border: var(--aiditor-border);
  --aiditor-dock-border: var(--aiditor-border);
  --aiditor-chrome-border: var(--aiditor-border);
  --aiditor-view-bg: var(--aiditor-bg-0);
  --aiditor-view-radius: var(--aiditor-r-3);
  --aiditor-splitter-bg: color-mix(in srgb, var(--aiditor-border) 82%, var(--aiditor-bg-0));
  --aiditor-splitter-active-bg: var(--aiditor-accent);
  --aiditor-dock-tab-fg: var(--aiditor-fg-2);
  --aiditor-dock-tab-active-fg: var(--aiditor-fg-0);
  --aiditor-button-bg: var(--aiditor-bg-2);
  --aiditor-button-border: var(--aiditor-border-strong);
  --aiditor-button-hover-bg: var(--aiditor-bg-3);
  --aiditor-button-hover-border: var(--aiditor-border-hover);
  --aiditor-button-active-bg: var(--aiditor-bg-4);
  --aiditor-button-active-border: var(--aiditor-border-strong);

  --aiditor-highlight-subtle: color-mix(in srgb, var(--aiditor-fg-0) 6%, transparent);
  --aiditor-highlight-strong: color-mix(in srgb, var(--aiditor-fg-0) 12%, transparent);
  --aiditor-shadow-1: 0 1px 2px rgba(0,2,5,.56);
  --aiditor-shadow-2: 0 2px 8px rgba(0,2,5,.66);
  --aiditor-shadow-3: 0 4px 18px rgba(0,2,5,.76);
  --aiditor-shadow-4: 0 9px 36px rgba(0,2,5,.84);
  --aiditor-shadow-raised: 0 1px 2px rgba(0,2,5,.54), 0 4px 13px rgba(0,2,5,.62);
}

/* Forest theme - clean pine surfaces with moss accent and warm bark states. */
:root[data-aiditor-theme="forest"],
.aiditor-root[data-aiditor-theme="forest"] {
  color-scheme: dark;

  --aiditor-surface-canvas: #0c130f;
  --aiditor-surface-lower:  #101a14;
  --aiditor-surface-frame:  #16231a;
  --aiditor-surface-panel:  #1b2d21;
  --aiditor-surface-field:  #111d16;
  --aiditor-surface-hover:  #273d2d;
  --aiditor-surface-active: #334d3a;
  --aiditor-surface-raised: #203525;

  --aiditor-text-primary:  #eff3e4;
  --aiditor-text-body:     #cbd7bf;
  --aiditor-text-label:    #9bad8d;
  --aiditor-text-muted:    #718469;
  --aiditor-text-disabled: #53614f;

  --aiditor-stroke-subtle: #2b422f;
  --aiditor-stroke-strong: #4a684b;
  --aiditor-stroke-field:  #355039;
  --aiditor-stroke-hover:  #7da06e;

  --aiditor-brand:          #a4c765;
  --aiditor-brand-hover:    #c8df7a;
  --aiditor-brand-contrast: #161f09;

  --aiditor-state-success: #8fc96d;
  --aiditor-state-warning: #d4a35b;
  --aiditor-state-danger:  #cf746c;
  --aiditor-state-info:    #87beb0;

  --aiditor-c-00: #0c130f;
  --aiditor-c-01: #101a14;
  --aiditor-c-02: #16231a;
  --aiditor-c-03: #1b2d21;
  --aiditor-c-04: #273d2d;
  --aiditor-c-05: #334d3a;
  --aiditor-c-06: #4a684b;
  --aiditor-c-07: #7da06e;
  --aiditor-c-08: #718469;
  --aiditor-c-09: #9bad8d;
  --aiditor-c-10: #cbd7bf;
  --aiditor-c-11: #eff3e4;

  --aiditor-c-accent:      var(--aiditor-brand);
  --aiditor-c-accent-soft: var(--aiditor-brand-hover);
  --aiditor-c-success: var(--aiditor-state-success);
  --aiditor-c-warn:    var(--aiditor-state-warning);
  --aiditor-c-error:   var(--aiditor-state-danger);
  --aiditor-c-info:    var(--aiditor-state-info);

  --aiditor-bg-0: var(--aiditor-surface-canvas);
  --aiditor-bg-1: var(--aiditor-surface-panel);
  --aiditor-bg-2: var(--aiditor-surface-field);
  --aiditor-bg-3: var(--aiditor-surface-hover);
  --aiditor-bg-4: var(--aiditor-surface-active);
  --aiditor-bg-raised: var(--aiditor-surface-raised);

  --aiditor-fg-0: var(--aiditor-text-primary);
  --aiditor-fg-1: var(--aiditor-text-body);
  --aiditor-fg-2: var(--aiditor-text-label);
  --aiditor-fg-3: var(--aiditor-text-muted);

  --aiditor-border:        var(--aiditor-stroke-subtle);
  --aiditor-border-strong: var(--aiditor-stroke-strong);
  --aiditor-border-input:  var(--aiditor-stroke-field);
  --aiditor-border-hover:  var(--aiditor-stroke-hover);

  --aiditor-accent:      var(--aiditor-brand);
  --aiditor-accent-soft: var(--aiditor-brand-hover);
  --aiditor-accent-fg:   var(--aiditor-brand-contrast);
  --aiditor-accent-bg:   color-mix(in srgb, var(--aiditor-brand) 14%, transparent);
  --aiditor-accent-bg-strong: color-mix(in srgb, var(--aiditor-brand) 24%, transparent);

  --aiditor-hover:       color-mix(in srgb, var(--aiditor-text-primary) 7%, transparent);
  --aiditor-active:      color-mix(in srgb, var(--aiditor-brand) 17%, transparent);
  --aiditor-selected:    color-mix(in srgb, var(--aiditor-brand) 22%, transparent);
  --aiditor-selected-hover: color-mix(in srgb, var(--aiditor-brand) 31%, transparent);
  --aiditor-selected-border: color-mix(in srgb, var(--aiditor-brand) 58%, var(--aiditor-border));
  --aiditor-selected-fg: var(--aiditor-fg-0);
  --aiditor-scrim:       color-mix(in srgb, var(--aiditor-surface-canvas) 72%, transparent);

  --aiditor-success:    var(--aiditor-c-success);
  --aiditor-success-bg: color-mix(in srgb, var(--aiditor-c-success) 13%, transparent);
  --aiditor-success-fg: #161f09;
  --aiditor-warn:       var(--aiditor-c-warn);
  --aiditor-warn-bg:    color-mix(in srgb, var(--aiditor-c-warn) 14%, transparent);
  --aiditor-warn-fg:    #1b1205;
  --aiditor-error:      var(--aiditor-c-error);
  --aiditor-error-bg:   color-mix(in srgb, var(--aiditor-c-error) 13%, transparent);
  --aiditor-error-fg:   #fff8f6;
  --aiditor-info:       var(--aiditor-c-info);
  --aiditor-info-bg:    color-mix(in srgb, var(--aiditor-c-info) 13%, transparent);
  --aiditor-info-fg:    #091510;

  --aiditor-toolbar-bg: var(--aiditor-bg-raised);
  --aiditor-toolbar-border-w: 1px;
  --aiditor-toolbar-border: var(--aiditor-border);
  --aiditor-dock-border: var(--aiditor-border);
  --aiditor-chrome-border: var(--aiditor-border);
  --aiditor-view-bg: var(--aiditor-bg-0);
  --aiditor-view-radius: var(--aiditor-r-3);
  --aiditor-splitter-bg: color-mix(in srgb, var(--aiditor-border) 82%, var(--aiditor-bg-0));
  --aiditor-splitter-active-bg: var(--aiditor-accent);
  --aiditor-dock-tab-fg: var(--aiditor-fg-2);
  --aiditor-dock-tab-active-fg: var(--aiditor-fg-0);
  --aiditor-button-bg: var(--aiditor-bg-2);
  --aiditor-button-border: var(--aiditor-border-strong);
  --aiditor-button-hover-bg: var(--aiditor-bg-3);
  --aiditor-button-hover-border: var(--aiditor-border-hover);
  --aiditor-button-active-bg: var(--aiditor-bg-4);
  --aiditor-button-active-border: var(--aiditor-border-strong);

  --aiditor-highlight-subtle: color-mix(in srgb, var(--aiditor-fg-0) 7%, transparent);
  --aiditor-highlight-strong: color-mix(in srgb, var(--aiditor-fg-0) 13%, transparent);
  --aiditor-shadow-1: 0 1px 2px rgba(3,9,5,.34);
  --aiditor-shadow-2: 0 2px 8px rgba(3,9,5,.42);
  --aiditor-shadow-3: 0 4px 16px rgba(3,9,5,.50);
  --aiditor-shadow-4: 0 8px 32px rgba(3,9,5,.60);
  --aiditor-shadow-raised: 0 1px 2px rgba(3,9,5,.32), 0 3px 10px rgba(3,9,5,.38);
}

:root[data-aiditor-theme="light"],
.aiditor-root[data-aiditor-theme="light"] {
  color-scheme: light;

  --aiditor-surface-canvas: #f4f4f7;
  --aiditor-surface-lower:  #ffffff;
  --aiditor-surface-frame:  #f8f8fa;
  --aiditor-surface-panel:  #ffffff;
  --aiditor-surface-field:  #e6e6ec;
  --aiditor-surface-hover:  #c8c8d2;
  --aiditor-surface-active: #b0b0bc;
  --aiditor-surface-raised: #f8f8fa;

  --aiditor-text-primary:  #18181c;
  --aiditor-text-body:     #2a2a30;
  --aiditor-text-label:    #38383f;
  --aiditor-text-muted:    #54545e;
  --aiditor-text-disabled: #6e6e7a;

  --aiditor-stroke-subtle: #e6e6ec;
  --aiditor-stroke-strong: #c8c8d2;
  --aiditor-stroke-field:  #c8c8d2;
  --aiditor-stroke-hover:  #8e8e9c;

  --aiditor-brand:          #5b4ee0;
  --aiditor-brand-hover:    #8278f0;
  --aiditor-brand-contrast: #ffffff;

  --aiditor-state-success: #16a163;
  --aiditor-state-warning: #c97a1a;
  --aiditor-state-danger:  #c53030;
  --aiditor-state-info:    #1e88c4;

  --aiditor-c-00: #f4f4f7;
  --aiditor-c-01: #ffffff;
  --aiditor-c-02: #f8f8fa;
  --aiditor-c-03: #e6e6ec;
  --aiditor-c-04: #d8d8e0;
  --aiditor-c-05: #c8c8d2;
  --aiditor-c-06: #b0b0bc;
  --aiditor-c-07: #8e8e9c;
  --aiditor-c-08: #6e6e7a;
  --aiditor-c-09: #54545e;
  --aiditor-c-10: #38383f;
  --aiditor-c-11: #18181c;

  --aiditor-c-accent:      #5b4ee0;
  --aiditor-c-accent-soft: #8278f0;

  --aiditor-c-success: #16a163;
  --aiditor-c-warn:    #c97a1a;
  --aiditor-c-error:   #c53030;
  --aiditor-c-info:    #1e88c4;

  /* Light theme needs lighter shadows or they look like ink blots. */
  --aiditor-shadow-1: 0 1px 2px rgba(20,20,40,.08);
  --aiditor-shadow-2: 0 2px 8px rgba(20,20,40,.10);
  --aiditor-shadow-3: 0 4px 16px rgba(20,20,40,.12);
  --aiditor-shadow-4: 0 8px 32px rgba(20,20,40,.16);

  /* Light mode locks the "white panel + slightly grey inset field" role
   * mapping. :root uses Godot's "inset-in-dark" convention which, when
   * inherited with light primitives, would invert into "raised-in-light".
   * Light mode reads more naturally with white panels and inset fields. */
  --aiditor-bg-1: var(--aiditor-surface-panel);   /* dock body = white */
  --aiditor-bg-2: var(--aiditor-surface-field);   /* input = light gray (inset) */
  --aiditor-bg-3: var(--aiditor-surface-hover);
  --aiditor-bg-4: var(--aiditor-surface-active);
  --aiditor-bg-raised: var(--aiditor-surface-raised);   /* slightly off-white to separate from bg-1 */

  --aiditor-border:        var(--aiditor-stroke-subtle);
  --aiditor-border-strong: var(--aiditor-stroke-strong);
  --aiditor-border-input:  var(--aiditor-stroke-field);
  --aiditor-border-hover:  var(--aiditor-stroke-hover);

  --aiditor-shadow-raised: 0 1px 2px rgba(20,20,40,.08), 0 2px 6px rgba(20,20,40,.10);

  --aiditor-fg-1: var(--aiditor-text-body);
  --aiditor-accent-fg: var(--aiditor-brand-contrast);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --aiditor-dur-fast: 0ms;
    --aiditor-dur-med:  0ms;
    --aiditor-dur-slow: 0ms;
  }
}

/* ---- style/dock.css ---- */
/* aiditor — Dock styles
 *
 * All tokens come from theme.css (Layer 2 roles). Literals are forbidden in
 * this file; if you need a new color/size/duration, add it as a token there
 * and reference it here as var(--aiditor-*).
 */

/* ── root container ─────────────────────────────────── */
.aiditor-root {
  display: flex;
  width: 100%; height: 100%;
  background: var(--aiditor-bg-0);
  color: var(--aiditor-fg-0);
  font-family: var(--aiditor-font-ui);
  font-size: var(--aiditor-fs-md);
  overflow: hidden;
}

/* ── split (flex container) ─────────────────────────── */
.aiditor-split {
  display: flex;
  flex: 1 1 0;
  min-width: 0; min-height: 0;
}
.aiditor-split-horizontal { flex-direction: row; }
.aiditor-split-vertical   { flex-direction: column; }

.aiditor-split-child {
  display: flex;
  min-width: 0; min-height: 0;
  overflow: hidden;
}
.aiditor-split-child > * { flex: 1 1 0; min-width: 0; min-height: 0; }

/* ── splitter ───────────────────────────────────────── */
.aiditor-splitter {
  flex: 0 0 1px;
  background: var(--aiditor-splitter-bg);
  position: relative;
  z-index: var(--aiditor-z-sticky);
  transition: background var(--aiditor-dur-fast) var(--aiditor-ease);
}
.aiditor-splitter::after {
  /* widened hit area */
  content: ''; position: absolute;
}
.aiditor-splitter-horizontal { cursor: ew-resize; }
.aiditor-splitter-horizontal::after { top: 0; bottom: 0; left: -3px; right: -3px; }
.aiditor-splitter-vertical   { cursor: ns-resize; }
.aiditor-splitter-vertical::after { left: 0; right: 0; top: -3px; bottom: -3px; }
.aiditor-splitter:hover,
.aiditor-splitter-active { background: var(--aiditor-splitter-active-bg); }

/* ── dock (leaf) ────────────────────────────────────── */
.aiditor-dock {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  min-width: 0; min-height: 0;
  background: var(--aiditor-bg-0);
  border: 1px solid var(--aiditor-dock-border);
  contain: layout style paint;
  overflow: hidden;
}
.aiditor-dock-toolbar-top    { flex-direction: column; }
.aiditor-dock-toolbar-bottom { flex-direction: column-reverse; }
.aiditor-dock-toolbar-left   { flex-direction: row; }
.aiditor-dock-toolbar-right  { flex-direction: row-reverse; }

.aiditor-dock-focused {
  position: fixed;
  inset: 0;
  z-index: var(--aiditor-z-dock-overlay);
  border: 0;
}
.aiditor-dock-collapsed > .aiditor-dock-content { display: none; }
.aiditor-dock-content {
  flex: 1 1 auto;
  min-width: 0; min-height: 0;
  overflow: hidden;
  position: relative;
  background: var(--aiditor-bg-1);
}
.aiditor-panel {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
}
.aiditor-panel-error {
  padding: var(--aiditor-space-3) var(--aiditor-space-4);
  color: var(--aiditor-error);
  background: var(--aiditor-error-bg);
  border: 1px solid var(--aiditor-error);
  border-radius: var(--aiditor-r-2);
  margin: var(--aiditor-space-2);
  font: var(--aiditor-fs-md)/var(--aiditor-lh-tight) var(--aiditor-font-mono);
}
.aiditor-dock-dragging { outline: 1px solid var(--aiditor-accent); outline-offset: -1px; }

/* ── corner handles ─────────────────────────────────── */
.aiditor-corner {
  position: absolute;
  width: 14px; height: 14px;
  z-index: 20;
  opacity: 0;
  transition: opacity var(--aiditor-dur-fast) var(--aiditor-ease);
}
.aiditor-dock-c-tl > .aiditor-corner-tl,
.aiditor-dock-c-tr > .aiditor-corner-tr,
.aiditor-dock-c-bl > .aiditor-corner-bl,
.aiditor-dock-c-br > .aiditor-corner-br { opacity: 1; }
.aiditor-corner::before {
  content: ''; position: absolute; inset: 0;
  background: var(--aiditor-fg-2);
  transition: background var(--aiditor-dur-fast) var(--aiditor-ease);
}
.aiditor-corner:hover::before { background: var(--aiditor-accent-soft); }

.aiditor-corner-tl { top: 0;    left: 0;    cursor: nwse-resize; }
.aiditor-corner-tl::before { clip-path: polygon(0 0, 100% 0, 0 100%); }
.aiditor-corner-tr { top: 0;    right: 0;   cursor: nesw-resize; }
.aiditor-corner-tr::before { clip-path: polygon(0 0, 100% 0, 100% 100%); }
.aiditor-corner-bl { bottom: 0; left: 0;    cursor: nesw-resize; }
.aiditor-corner-bl::before { clip-path: polygon(0 0, 100% 100%, 0 100%); }
.aiditor-corner-br { bottom: 0; right: 0;   cursor: nwse-resize; }
.aiditor-corner-br::before { clip-path: polygon(100% 0, 100% 100%, 0 100%); }

/* ── global drag state ──────────────────────────────── */
body.aiditor-dragging { user-select: none; }
body.aiditor-dragging-horizontal, body.aiditor-dragging-horizontal * { cursor: ew-resize !important; }
body.aiditor-dragging-vertical,   body.aiditor-dragging-vertical *   { cursor: ns-resize !important; }

/* ── preview overlay ────────────────────────────────── */
.aiditor-overlay {
  position: fixed;
  pointer-events: none;
  z-index: var(--aiditor-z-popover);
  display: none;
}
.aiditor-overlay-split {
  background: color-mix(in srgb, var(--aiditor-accent) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--aiditor-accent) 45%, transparent);
}
.aiditor-overlay-merge {
  background: color-mix(in srgb, var(--aiditor-accent) 18%, transparent);
  border: 2px solid var(--aiditor-accent);
}
.aiditor-preview-line-v {
  position: absolute;
  top: 0; bottom: 0; width: 2px;
  margin-left: -1px;
  background: var(--aiditor-accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--aiditor-accent) 70%, transparent);
}
.aiditor-preview-line-h {
  position: absolute;
  left: 0; right: 0; height: 2px;
  margin-top: -1px;
  background: var(--aiditor-accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--aiditor-accent) 70%, transparent);
}
.aiditor-merge-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--aiditor-fg-0);
  font-size: var(--aiditor-fs-xl);
  font-weight: 500;
  letter-spacing: .04em;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}

/* ── reduced motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .aiditor-corner, .aiditor-splitter, .aiditor-corner::before { transition: none; }
}

/* ---- style/component.css ---- */
/* aiditor — built-in component styles
 *
 * Only contains toolbar + panel-drag visuals now. Tabs moved to
 * ui-form.css (.aiditor-ui-tab*) and are visually owned by aiditor.ui.tab; the
 * dock-tabs thin shell adds the `.aiditor-dock-tabs` marker class for
 * interactions.js hit-testing. Error-log moved to ui-data.css
 * (.aiditor-ui-errlog*) and is built from ui.card + ui.view.
 */

/* ── toolbar container ─────────────────────────── */
.aiditor-toolbar {
  display: flex;
  flex-shrink: 0;
  background: var(--aiditor-toolbar-bg);
  align-items: stretch;
  user-select: none;
  min-height: var(--aiditor-toolbar-h);
}
.aiditor-toolbar[hidden] { display: none; }
.aiditor-toolbar-top    { border-bottom: var(--aiditor-toolbar-border-w) solid var(--aiditor-toolbar-border); }
.aiditor-toolbar-bottom { border-top:    var(--aiditor-toolbar-border-w) solid var(--aiditor-toolbar-border); }
.aiditor-toolbar-left {
  flex-direction: column;
  border-right: var(--aiditor-toolbar-border-w) solid var(--aiditor-toolbar-border);
  min-width: var(--aiditor-toolbar-h);
  min-height: 0;
}
.aiditor-toolbar-right {
  flex-direction: column;
  border-left: var(--aiditor-toolbar-border-w) solid var(--aiditor-toolbar-border);
  min-width: var(--aiditor-toolbar-h);
  min-height: 0;
}
.aiditor-toolbar-start {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: stretch;
  overflow: hidden;
}
.aiditor-toolbar-end {
  display: flex;
  flex: 0 0 auto;
  align-items: stretch;
}
.aiditor-toolbar-left  > .aiditor-toolbar-start,
.aiditor-toolbar-left  > .aiditor-toolbar-end,
.aiditor-toolbar-right > .aiditor-toolbar-start,
.aiditor-toolbar-right > .aiditor-toolbar-end { flex-direction: column; }
.aiditor-toolbar-item { display: inline-flex; align-items: center; }

/* ── panel drag visuals ─────────────── */
.aiditor-drag-ghost {
  position: fixed;
  pointer-events: none;
  z-index: var(--aiditor-z-drag);
  top: 0; left: 0;
  padding: var(--aiditor-space-1) var(--aiditor-space-3);
  background: var(--aiditor-bg-1);
  border: 1px solid var(--aiditor-accent);
  border-radius: var(--aiditor-r-2);
  color: var(--aiditor-fg-0);
  font: var(--aiditor-fs-md) var(--aiditor-font-ui);
  box-shadow: var(--aiditor-shadow-3);
  will-change: transform;
}
.aiditor-drop-target {
  outline: 2px solid var(--aiditor-accent);
  outline-offset: -2px;
  background: var(--aiditor-accent-bg);
}
.aiditor-drop-reject {
  outline: 2px solid var(--aiditor-error);
  outline-offset: -2px;
  cursor: not-allowed;
}
.aiditor-panel-drop-overlay {
  position: fixed;
  pointer-events: none;
  z-index: calc(var(--aiditor-z-drag) - 1);
  background: color-mix(in srgb, var(--aiditor-bg-0) 18%, transparent);
  outline: 1px solid color-mix(in srgb, var(--aiditor-accent) 38%, transparent);
  outline-offset: -1px;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--aiditor-bg-4) 34%, transparent),
    inset 0 0 40px color-mix(in srgb, var(--aiditor-bg-0) 46%, transparent);
}
.aiditor-panel-drop-map {
  position: absolute;
  left: var(--aiditor-space-3);
  top: var(--aiditor-space-3);
  width: calc(100% - var(--aiditor-space-3) * 2);
  height: calc(100% - var(--aiditor-space-3) * 2);
  display: block;
  overflow: visible;
}
.aiditor-panel-drop-shape {
  fill: color-mix(in srgb, var(--aiditor-bg-1) 4%, transparent);
  stroke: color-mix(in srgb, var(--aiditor-accent) 52%, transparent);
  stroke-width: 0.65;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  shape-rendering: geometricPrecision;
  transition:
    fill var(--aiditor-dur-fast) var(--aiditor-ease),
    stroke var(--aiditor-dur-fast) var(--aiditor-ease);
}
.aiditor-panel-drop-shape-center {
  rx: 1;
  ry: 1;
}
.aiditor-panel-drop-shape.aiditor-panel-drop-active {
  fill: color-mix(in srgb, var(--aiditor-accent) 20%, transparent);
  stroke: color-mix(in srgb, var(--aiditor-accent) 92%, white 8%);
  stroke-width: 1.05;
  filter:
    drop-shadow(0 0 7px color-mix(in srgb, var(--aiditor-accent) 28%, transparent))
    drop-shadow(0 10px 24px color-mix(in srgb, var(--aiditor-bg-0) 55%, transparent));
}

.aiditor-extension-disabled {
  min-height: 100%;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--aiditor-space-2);
  padding: var(--aiditor-space-6);
  color: var(--aiditor-fg-1);
  text-align: center;
}
.aiditor-extension-disabled-title {
  color: var(--aiditor-warning);
  font-weight: 600;
}
.aiditor-extension-disabled-body {
  max-width: 42rem;
  color: var(--aiditor-fg-2);
  line-height: 1.45;
}
.aiditor-extension-iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 12rem;
  border: 0;
  background: var(--aiditor-bg-0);
}

@media (prefers-reduced-motion: reduce) {
  .aiditor-tab, .aiditor-tab-close, .aiditor-tab-add { transition: none; }
}

/* ---- style/ui-base.css ---- */
/* aiditor — UI library: base widgets
 *
 * Buttons, icons, tooltips, popovers, kbd, badges, tags, spinners, dividers.
 * All values are theme tokens (var(--aiditor-*)). No literals.
 */

/* ── dropzone / dragsource (ui._dnd.js) ────────────────────────────
 * Generic HTML5-DnD feedback classes. Applied to whatever element the
 * caller passed to ui.dropzone / ui.dragsource; never assumes a role-
 * specific container. outline (not border) so we don't perturb layout
 * when the class is added/removed mid-drag.
 */
.aiditor-ui-dropzone-active {
  outline: 2px dashed var(--aiditor-accent);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--aiditor-accent) 10%, transparent);
}
.aiditor-ui-dropzone-reject {
  outline: 2px dashed var(--aiditor-error);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--aiditor-error) 8%, transparent);
  cursor: not-allowed;
}
.aiditor-ui-dragging { opacity: 0.55; }

/* ── icon ─────────────────────────────────────────── */
.aiditor-ui-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  user-select: none;
}
.aiditor-ui-icon-sm { font-size: var(--aiditor-size-icon-sm); min-width: var(--aiditor-size-icon-sm); }
.aiditor-ui-icon-md { font-size: var(--aiditor-size-icon-md); min-width: var(--aiditor-size-icon-md); }
.aiditor-ui-icon-lg { font-size: var(--aiditor-size-icon-lg); min-width: var(--aiditor-size-icon-lg); }

/* SVG icons (registered via aiditor.ui.registerIcon) — size-track the font size
 * of the host span so the same size scale applies to text glyphs and SVG
 * interchangeably. stroke uses currentColor so the icon colors follow text. */
.aiditor-ui-icon svg { width: 1em; height: 1em; display: block; }
.aiditor-ui-icon-svg { /* marker class; no style beyond svg sizing above */ }
.aiditor-ui-icon-sm svg { width: var(--aiditor-size-icon-sm); height: var(--aiditor-size-icon-sm); }
.aiditor-ui-icon-md svg { width: var(--aiditor-size-icon-md); height: var(--aiditor-size-icon-md); }
.aiditor-ui-icon-lg svg { width: var(--aiditor-size-icon-lg); height: var(--aiditor-size-icon-lg); }

/* ── image ────────────────────────────────────────── */
/* Displayed at 100% of its slot — sizing comes from the absolute slot or
 * BOX_STYLE width/height applied by the registration. object-fit decides
 * how the bitmap fills that box. */
.aiditor-ui-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
}
.aiditor-ui-image:not([src]) {
  visibility: hidden;
}

/* ── button ───────────────────────────────────────── */
.aiditor-ui-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--aiditor-space-1);
  min-width: 0;
  max-width: 100%;
  padding: 0 var(--aiditor-space-3);
  background: var(--aiditor-button-bg);
  color: var(--aiditor-fg-1);
  border: 1px solid var(--aiditor-button-border);
  border-radius: var(--aiditor-r-2);
  font: var(--aiditor-fs-md) var(--aiditor-font-ui);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--aiditor-bg-0) 42%, transparent), inset 0 1px 0 var(--aiditor-highlight-subtle);
  transform: translateZ(0);
  transition:
    background  var(--aiditor-dur-fast) var(--aiditor-ease),
    color       var(--aiditor-dur-fast) var(--aiditor-ease),
    border      var(--aiditor-dur-fast) var(--aiditor-ease),
    box-shadow  var(--aiditor-dur-med)  var(--aiditor-ease),
    transform   var(--aiditor-dur-fast) var(--aiditor-ease);
}
.aiditor-ui-btn-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aiditor-ui-btn-text-empty .aiditor-ui-btn-text {
  display: none;
}
.aiditor-ui-state-btn-icon-empty > .aiditor-ui-icon {
  display: none;
}
/* Click-flash overlay (pure CSS, no JS). Expands a soft radial highlight on press. */
.aiditor-ui-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, currentColor 0%, transparent 60%);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity var(--aiditor-dur-med) var(--aiditor-ease),
              transform var(--aiditor-dur-med) var(--aiditor-ease);
  pointer-events: none;
  z-index: 0;
}
.aiditor-ui-btn > * { position: relative; z-index: 1; }
.aiditor-ui-btn-sm { height: var(--aiditor-size-h-sm); padding: 0 var(--aiditor-space-2); font-size: var(--aiditor-fs-sm); }
.aiditor-ui-btn-md { height: var(--aiditor-size-h-md); }
.aiditor-ui-btn-lg { height: var(--aiditor-size-h-lg); padding: 0 var(--aiditor-space-4); font-size: var(--aiditor-fs-lg); }
.aiditor-ui-btn:hover {
  background: var(--aiditor-button-hover-bg);
  color: var(--aiditor-fg-0);
  border-color: var(--aiditor-button-hover-border);
  transform: translateY(-1px);
  box-shadow: var(--aiditor-shadow-1), inset 0 1px 0 var(--aiditor-highlight-subtle);
}
.aiditor-ui-btn:active {
  background: var(--aiditor-button-active-bg);
  border-color: var(--aiditor-button-active-border);
  transform: translateY(0) scale(0.985);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
  transition-duration: 40ms;
}
.aiditor-ui-btn:active::before {
  opacity: .14;
  transform: scale(1);
  transition-duration: 0ms;
}
.aiditor-ui-btn:focus-visible {
  outline: none;
  border-color: var(--aiditor-accent);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--aiditor-accent) 28%, transparent),
    0 1px 0 rgba(0,0,0,.18);
}
.aiditor-ui-btn[disabled] {
  opacity: .38;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}

.aiditor-ui-btn-primary {
  background: var(--aiditor-accent);
  color: var(--aiditor-accent-fg);
  border-color: var(--aiditor-accent);
  box-shadow: inset 0 1px 0 var(--aiditor-highlight-strong);
}
.aiditor-ui-btn-primary:hover {
  background: color-mix(in srgb, var(--aiditor-accent-soft) 72%, var(--aiditor-accent));
  border-color: var(--aiditor-accent-soft);
  box-shadow: 0 0 0 2px var(--aiditor-accent-bg), inset 0 1px 0 var(--aiditor-highlight-strong);
}
.aiditor-ui-btn-primary:active {
  background: var(--aiditor-accent);
  box-shadow:
    inset 0 2px 4px color-mix(in srgb, var(--aiditor-bg-0) 48%, transparent),
    0 0 0 0 transparent;
}

.aiditor-ui-btn-ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.aiditor-ui-btn-ghost:hover {
  background: var(--aiditor-hover);
  border-color: transparent;
  box-shadow: none;
}
.aiditor-ui-btn-ghost:active { background: var(--aiditor-active); box-shadow: none; }

.aiditor-ui-btn-danger {
  background: var(--aiditor-error-bg);
  color: var(--aiditor-error);
  border-color: var(--aiditor-error);
}
.aiditor-ui-btn-danger:hover {
  background: var(--aiditor-error);
  color: var(--aiditor-error-fg);
  box-shadow:
    0 4px 12px color-mix(in srgb, var(--aiditor-error) 40%, transparent),
    inset 0 1px 0 var(--aiditor-highlight-strong);
}
.aiditor-ui-btn-danger:focus-visible {
  border-color: var(--aiditor-error);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--aiditor-error) 32%, transparent),
    0 1px 0 rgba(0,0,0,.18);
}

/* ── icon button (square, ghost by default) ───────── */
.aiditor-ui-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--aiditor-r-2);
  color: var(--aiditor-fg-2);
  cursor: pointer;
  padding: 0;
  transform: translateZ(0);
  transition: background var(--aiditor-dur-fast) var(--aiditor-ease),
              color      var(--aiditor-dur-fast) var(--aiditor-ease),
              transform  var(--aiditor-dur-fast) var(--aiditor-ease),
              box-shadow var(--aiditor-dur-med) var(--aiditor-ease);
}
.aiditor-ui-icon-btn-sm { width: var(--aiditor-size-h-sm); height: var(--aiditor-size-h-sm); }
.aiditor-ui-icon-btn-md { width: var(--aiditor-size-h-md); height: var(--aiditor-size-h-md); }
.aiditor-ui-icon-btn-lg { width: var(--aiditor-size-h-lg); height: var(--aiditor-size-h-lg); }
.aiditor-ui-icon-btn:hover {
  background: var(--aiditor-hover);
  color: var(--aiditor-fg-0);
}
.aiditor-ui-icon-btn:active {
  transform: scale(0.9);
  background: var(--aiditor-active);
  transition-duration: 40ms;
}
.aiditor-ui-icon-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--aiditor-accent) 36%, transparent);
}
.aiditor-ui-icon-btn[disabled] { opacity: .38; pointer-events: none; }
.aiditor-ui-state-btn[aria-pressed="true"],
.aiditor-ui-state-btn-on {
  color: var(--aiditor-accent);
  background: var(--aiditor-accent-bg);
  border-color: color-mix(in srgb, var(--aiditor-accent) 36%, transparent);
}
.aiditor-ui-state-btn[aria-pressed="true"]:hover,
.aiditor-ui-state-btn-on:hover {
  color: var(--aiditor-accent-soft);
  background: var(--aiditor-accent-bg-strong);
}

/* ── action bar (local UiAction surface) ───────── */
.aiditor-ui-action-bar {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--aiditor-space-1);
  flex: 0 0 auto;
  min-width: 0;
}
.aiditor-ui-action-bar-empty { display: none; }
.aiditor-ui-action-bar-compact .aiditor-ui-action-btn.aiditor-ui-icon-btn-sm {
  width: 22px;
  height: 22px;
}
.aiditor-ui-action-menu-btn {
  color: var(--aiditor-fg-2);
}
.aiditor-ui-copy-btn {
  transition: color var(--aiditor-dur-fast) var(--aiditor-ease),
              background var(--aiditor-dur-fast) var(--aiditor-ease),
              border-color var(--aiditor-dur-fast) var(--aiditor-ease),
              transform var(--aiditor-dur-fast) var(--aiditor-ease);
}
.aiditor-ui-copy-btn-copied {
  color: var(--aiditor-success);
  background: color-mix(in srgb, var(--aiditor-success) 18%, transparent);
  border-color: color-mix(in srgb, var(--aiditor-success) 42%, transparent);
}
.aiditor-ui-copy-btn-copied:hover {
  color: var(--aiditor-success);
  background: color-mix(in srgb, var(--aiditor-success) 24%, transparent);
  border-color: color-mix(in srgb, var(--aiditor-success) 56%, transparent);
}

/* ── tooltip ──────────────────────────────────────── */
.aiditor-ui-tooltip {
  position: fixed;
  padding: var(--aiditor-space-1) var(--aiditor-space-2);
  background: var(--aiditor-bg-3);
  color: var(--aiditor-fg-0);
  border: 1px solid var(--aiditor-border-strong);
  border-radius: var(--aiditor-r-2);
  font: var(--aiditor-fs-sm) var(--aiditor-font-ui);
  box-shadow: var(--aiditor-shadow-2);
  pointer-events: none;
  z-index: var(--aiditor-z-popover);
  max-width: 240px;
  white-space: pre-wrap;
  animation: aiditor-fade-in var(--aiditor-dur-fast) var(--aiditor-ease) both;
}

/* ── popover ──────────────────────────────────────── */
.aiditor-ui-popover {
  position: fixed;
  background: var(--aiditor-bg-2);
  color: var(--aiditor-fg-0);
  border: 1px solid var(--aiditor-border-strong);
  border-radius: var(--aiditor-r-3);
  box-shadow: var(--aiditor-shadow-3);
  z-index: var(--aiditor-z-popover);
  min-width: 120px;
  transform-origin: top center;
  animation: aiditor-pop-in var(--aiditor-dur-med) var(--aiditor-ease) both;
}

@keyframes aiditor-fade-in {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes aiditor-pop-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .aiditor-ui-tooltip, .aiditor-ui-popover { animation: none; }
}

/* ── kbd ──────────────────────────────────────────── */
.aiditor-ui-kbd {
  display: inline-block;
  padding: 1px var(--aiditor-space-1);
  background: var(--aiditor-bg-2);
  border: 1px solid var(--aiditor-border-strong);
  border-bottom-width: 2px;
  border-radius: var(--aiditor-r-1);
  font: var(--aiditor-fs-xs) var(--aiditor-font-mono);
  color: var(--aiditor-fg-1);
  line-height: 1.2;
}

/* ── badge ────────────────────────────────────────── */
.aiditor-ui-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: var(--aiditor-r-pill);
  font: 600 var(--aiditor-fs-xs) var(--aiditor-font-ui);
  background: var(--aiditor-bg-3);
  color: var(--aiditor-fg-0);
  letter-spacing: 0;
}
.aiditor-ui-badge-success { background: var(--aiditor-success-bg); color: var(--aiditor-success); }
.aiditor-ui-badge-warn    { background: var(--aiditor-warn-bg);    color: var(--aiditor-warn); }
.aiditor-ui-badge-error   { background: var(--aiditor-error-bg);   color: var(--aiditor-error); }
.aiditor-ui-badge-info    { background: var(--aiditor-info-bg);    color: var(--aiditor-info); }
.aiditor-ui-badge-dot { min-width: 8px; width: 8px; height: 8px; padding: 0; }

/* ── tag ──────────────────────────────────────────── */
.aiditor-ui-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px var(--aiditor-space-1) 1px var(--aiditor-space-2);
  background: var(--aiditor-bg-3);
  color: var(--aiditor-fg-0);
  border: 1px solid var(--aiditor-border-strong);
  border-radius: var(--aiditor-r-2);
  font: var(--aiditor-fs-sm) var(--aiditor-font-ui);
  height: var(--aiditor-size-h-sm);
  box-sizing: border-box;
}
.aiditor-ui-tag-text { padding-right: 2px; }
.aiditor-ui-tag-close {
  width: 14px; height: 14px;
  border: 0;
  background: transparent;
  color: var(--aiditor-fg-2);
  border-radius: var(--aiditor-r-1);
  cursor: pointer;
  font: 14px/1 var(--aiditor-font-ui);
  padding: 0;
}
.aiditor-ui-tag-close:hover { background: var(--aiditor-bg-4); color: var(--aiditor-fg-0); }

/* ── spinner ──────────────────────────────────────── */
.aiditor-ui-spinner {
  display: inline-block;
  border-radius: 50%;
  border: 2px solid var(--aiditor-border-strong);
  border-top-color: var(--aiditor-accent);
  animation: aiditor-spin .8s linear infinite;
}
.aiditor-ui-spinner-sm { width: 12px; height: 12px; border-width: 2px; }
.aiditor-ui-spinner-md { width: 16px; height: 16px; border-width: 2px; }
.aiditor-ui-spinner-lg { width: 24px; height: 24px; border-width: 3px; }
@keyframes aiditor-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .aiditor-ui-spinner { animation-duration: 2s; } }

/* ── divider ──────────────────────────────────────── */
.aiditor-ui-divider-h {
  width: 100%;
  height: 1px;
  background: var(--aiditor-border);
  margin: var(--aiditor-space-2) 0;
}
.aiditor-ui-divider-v {
  width: 1px;
  align-self: stretch;
  background: var(--aiditor-border);
  margin: 0 var(--aiditor-space-2);
}
.aiditor-ui-divider-labeled {
  display: flex;
  align-items: center;
  gap: var(--aiditor-space-2);
  background: transparent;
  height: auto;
}
.aiditor-ui-divider-labeled::before,
.aiditor-ui-divider-labeled::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--aiditor-border);
}
.aiditor-ui-divider-label {
  font: var(--aiditor-fs-xs) var(--aiditor-font-ui);
  color: var(--aiditor-fg-2);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ── text (display-only) ────────────────────────────────────────── */
.aiditor-ui-text {
  font: var(--aiditor-fs-md) var(--aiditor-font-ui);
  color: var(--aiditor-fg-1);
  line-height: 1.4;
  min-width: 0;
}
.aiditor-ui-text-size-sm { font-size: var(--aiditor-fs-sm); }
.aiditor-ui-text-size-md { font-size: var(--aiditor-fs-md); }
.aiditor-ui-text-size-lg { font-size: var(--aiditor-fs-lg); }
.aiditor-ui-text-h1      { font-weight: 700; font-size: var(--aiditor-fs-xl); color: var(--aiditor-fg-0); }
.aiditor-ui-text-h2      { font-weight: 600; font-size: var(--aiditor-fs-lg); color: var(--aiditor-fg-0); }
.aiditor-ui-text-caption { font-size: var(--aiditor-fs-xs); color: var(--aiditor-fg-2); }

/* ---- style/ui-form.css ---- */
/* aiditor — UI library: form widgets
 * input, textarea, numberInput, vectorInput, slider, rangeSlider,
 * checkbox, switch, radio, segmented, select, combobox, colorInput,
 * enumInput, tagInput. All values come from theme tokens.
 */

/* ── field shell (input / combobox / tagInput share) ────────────── */
.aiditor-ui-field {
  display: inline-flex;
  align-items: center;
  width: 100%;
  height: var(--aiditor-size-h-md);
  background: var(--aiditor-bg-2);
  border: 1px solid var(--aiditor-border-input);
  border-radius: var(--aiditor-r-2);
  padding: 0 var(--aiditor-control-px);
  gap: var(--aiditor-space-1);
  box-sizing: border-box;
  transition: border-color var(--aiditor-dur-fast) var(--aiditor-ease),
              box-shadow   var(--aiditor-dur-med)  var(--aiditor-ease),
              background   var(--aiditor-dur-fast) var(--aiditor-ease);
}
.aiditor-ui-field:hover { border-color: var(--aiditor-border-hover); }
.aiditor-ui-field:focus-within {
  border-color: var(--aiditor-accent);
  background: color-mix(in srgb, var(--aiditor-bg-2) 92%, var(--aiditor-accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--aiditor-accent) 22%, transparent);
}
.aiditor-ui-field-disabled { opacity: .38; pointer-events: none; }
.aiditor-ui-field-prefix, .aiditor-ui-field-suffix {
  display: inline-flex;
  align-items: center;
  color: var(--aiditor-fg-2);
  font: var(--aiditor-fs-md) var(--aiditor-font-ui);
}

/* ── input ──────────────────────────────────────────────────────── */
.aiditor-ui-input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--aiditor-fg-0);
  font: var(--aiditor-fs-md) var(--aiditor-font-ui);
  padding: 0;
}
.aiditor-ui-input::placeholder { color: var(--aiditor-fg-3); }
.aiditor-ui-search-field .aiditor-ui-field-prefix {
  color: var(--aiditor-fg-3);
}
.aiditor-ui-search-clear[hidden] {
  display: none;
}
.aiditor-ui-search-clear {
  width: 18px;
  height: 18px;
  min-width: 18px;
  padding: 0;
  color: var(--aiditor-fg-3);
}

/* ── textarea ───────────────────────────────────────────────────── */
.aiditor-ui-textarea {
  display: block;
  width: 100%;
  min-height: 60px;
  box-sizing: border-box;
  background: var(--aiditor-bg-2);
  border: 1px solid var(--aiditor-border-input);
  border-radius: var(--aiditor-r-2);
  padding: var(--aiditor-space-1) var(--aiditor-space-2);
  color: var(--aiditor-fg-0);
  font: var(--aiditor-fs-md) var(--aiditor-font-ui);
  outline: 0;
  resize: vertical;
}
.aiditor-ui-textarea-mono { font-family: var(--aiditor-font-mono); font-size: var(--aiditor-fs-sm); }
.aiditor-ui-textarea {
  transition: border-color var(--aiditor-dur-fast) var(--aiditor-ease),
              box-shadow   var(--aiditor-dur-med)  var(--aiditor-ease);
}
.aiditor-ui-textarea:focus {
  border-color: var(--aiditor-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--aiditor-accent) 22%, transparent);
}

/* ── numberInput ────────────────────────────────────────────────── */
.aiditor-ui-num {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: var(--aiditor-size-h-md);
  cursor: ew-resize;
  user-select: none;
  min-width: 0;
}
.aiditor-ui-num-body {
  display: inline-flex;
  align-items: center;
  height: 100%;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  background: var(--aiditor-bg-2);
  border: 1px solid var(--aiditor-border-input);
  border-radius: var(--aiditor-r-2);
  box-sizing: border-box;
}
.aiditor-ui-num:hover .aiditor-ui-num-body { border-color: var(--aiditor-border-strong); }
.aiditor-ui-num:focus-within .aiditor-ui-num-body { border-color: var(--aiditor-accent); }
.aiditor-ui-num-disabled { cursor: default; opacity: .58; }
.aiditor-ui-num-disabled .aiditor-ui-num-body { border-color: var(--aiditor-border-input); }
.aiditor-ui-num-disabled .aiditor-ui-num-text,
.aiditor-ui-num-disabled .aiditor-ui-num-label,
.aiditor-ui-num-disabled .aiditor-ui-num-suffix { cursor: default; }
.aiditor-ui-num-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 16px;
  padding: 0 var(--aiditor-space-1);
  color: var(--aiditor-fg-1);
  font: 600 var(--aiditor-fs-sm) var(--aiditor-font-ui);
  height: 100%;
  box-sizing: border-box;
}
.aiditor-ui-num-step {
  width: 18px; height: 100%;
  background: transparent;
  border: 0;
  color: var(--aiditor-fg-2);
  cursor: pointer;
  padding: 0;
  font: var(--aiditor-fs-md) var(--aiditor-font-mono);
}
.aiditor-ui-num-step:hover { background: var(--aiditor-bg-3); color: var(--aiditor-fg-0); }
.aiditor-ui-num-text {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  text-align: center;
  font: var(--aiditor-fs-md) var(--aiditor-font-mono);
  color: var(--aiditor-fg-0);
  padding: 0 var(--aiditor-space-1);
  cursor: ew-resize;
  user-select: none;
}
.aiditor-ui-num-suffix {
  padding: 0 var(--aiditor-space-1);
  color: var(--aiditor-fg-2);
  font: var(--aiditor-fs-sm) var(--aiditor-font-ui);
  cursor: ew-resize;
}
.aiditor-ui-num-label { cursor: ew-resize; }
.aiditor-ui-num-scrubbing .aiditor-ui-num-body { background: var(--aiditor-accent-bg); }
.aiditor-ui-num-scrubbing .aiditor-ui-num-text { cursor: ew-resize; }
.aiditor-ui-num-editing .aiditor-ui-num-text {
  cursor: text;
  user-select: text;
  background: var(--aiditor-bg-2);
}
.aiditor-ui-num-editing .aiditor-ui-num-body { background: var(--aiditor-bg-2); }

/* ── vectorInput ────────────────────────────────────────────────── */
.aiditor-ui-vec {
  display: inline-flex;
  gap: 3px;
  width: 100%;
  min-width: 0;
  --aiditor-vec-axis: var(--aiditor-accent);
}
.aiditor-ui-vec-row { flex-direction: row; }
.aiditor-ui-vec-column { flex-direction: column; }
.aiditor-ui-vec > .aiditor-ui-vec-axis-field {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  gap: 0;
}
.aiditor-ui-vec-column > .aiditor-ui-vec-axis-field { flex: 0 0 auto; }
.aiditor-ui-vec > .aiditor-ui-vec-axis-field .aiditor-ui-num-label {
  min-width: 18px;
  padding: 0 var(--aiditor-space-1);
  border: 1px solid color-mix(in srgb, var(--aiditor-vec-axis) 28%, var(--aiditor-border-input));
  border-right: 0;
  border-radius: var(--aiditor-r-2) 0 0 var(--aiditor-r-2);
  background: color-mix(in srgb, var(--aiditor-vec-axis) 15%, var(--aiditor-bg-2));
  color: color-mix(in srgb, var(--aiditor-vec-axis) 70%, var(--aiditor-fg-0));
  font-weight: 700;
  text-transform: uppercase;
}
.aiditor-ui-vec > .aiditor-ui-vec-axis-field .aiditor-ui-num-body {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.aiditor-ui-vec > .aiditor-ui-vec-axis-field:hover .aiditor-ui-num-label {
  border-color: color-mix(in srgb, var(--aiditor-vec-axis) 38%, var(--aiditor-border-strong));
  background: color-mix(in srgb, var(--aiditor-vec-axis) 20%, var(--aiditor-bg-2));
}
.aiditor-ui-vec > .aiditor-ui-vec-axis-field:focus-within .aiditor-ui-num-label {
  border-color: color-mix(in srgb, var(--aiditor-vec-axis) 56%, var(--aiditor-accent));
  background: color-mix(in srgb, var(--aiditor-vec-axis) 24%, var(--aiditor-bg-2));
}
.aiditor-ui-vec > .aiditor-ui-vec-axis-field:nth-child(1) { --aiditor-vec-axis: #d85b5b; }
.aiditor-ui-vec > .aiditor-ui-vec-axis-field:nth-child(2) { --aiditor-vec-axis: #62ad68; }
.aiditor-ui-vec > .aiditor-ui-vec-axis-field:nth-child(3) { --aiditor-vec-axis: #5f8de3; }
.aiditor-ui-vec > .aiditor-ui-vec-axis-field:nth-child(4) { --aiditor-vec-axis: #cf884a; }

/* ── slider ─────────────────────────────────────────────────────── */
.aiditor-ui-slider {
  display: flex;
  align-items: center;
  gap: var(--aiditor-space-2);
  height: var(--aiditor-size-h-md);
  width: 100%;
}
.aiditor-ui-slider-track {
  flex: 1 1 auto;
  position: relative;
  height: 4px;
  background: var(--aiditor-bg-2);
  border: 1px solid var(--aiditor-border-input);
  border-radius: var(--aiditor-r-pill);
  cursor: pointer;
}
.aiditor-ui-slider-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--aiditor-accent);
  border-radius: var(--aiditor-r-pill);
}
.aiditor-ui-slider-thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px; height: 14px;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  background: var(--aiditor-fg-0);
  border: 2px solid var(--aiditor-accent);
  border-radius: 50%;
  box-shadow: var(--aiditor-shadow-1), 0 0 0 0 color-mix(in srgb, var(--aiditor-accent) 30%, transparent);
  cursor: grab;
  transition: width var(--aiditor-dur-fast) var(--aiditor-ease),
              height var(--aiditor-dur-fast) var(--aiditor-ease),
              box-shadow var(--aiditor-dur-med) var(--aiditor-ease);
}
.aiditor-ui-slider-track:hover .aiditor-ui-slider-thumb {
  width: 16px; height: 16px;
  box-shadow: var(--aiditor-shadow-2), 0 0 0 4px color-mix(in srgb, var(--aiditor-accent) 18%, transparent);
}
.aiditor-ui-slider-thumb:active {
  cursor: grabbing;
  width: 18px; height: 18px;
  box-shadow: var(--aiditor-shadow-2), 0 0 0 6px color-mix(in srgb, var(--aiditor-accent) 24%, transparent);
}
.aiditor-ui-slider-value {
  min-width: 36px;
  text-align: right;
  font: var(--aiditor-fs-sm) var(--aiditor-font-mono);
  color: var(--aiditor-fg-1);
}

/* ── checkbox ───────────────────────────────────────────────────── */
.aiditor-ui-check {
  display: inline-flex;
  align-items: center;
  gap: var(--aiditor-space-2);
  cursor: pointer;
  user-select: none;
  font: var(--aiditor-fs-md) var(--aiditor-font-ui);
  color: var(--aiditor-fg-0);
}
.aiditor-ui-check-box {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}
.aiditor-ui-check-mark {
  position: relative;
  width: 16px; height: 16px;
  flex: 0 0 auto;                   /* never let narrow rows squash the mark into an ellipse */
  background: var(--aiditor-bg-2);
  border: 1px solid var(--aiditor-border-input);
  border-radius: var(--aiditor-r-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  font: 12px/1 var(--aiditor-font-ui);
  transition: background var(--aiditor-dur-fast) var(--aiditor-ease),
              border-color var(--aiditor-dur-fast) var(--aiditor-ease),
              box-shadow var(--aiditor-dur-med) var(--aiditor-ease),
              transform var(--aiditor-dur-fast) var(--aiditor-ease);
}
.aiditor-ui-check-mark::after {
  content: '✓';
  display: inline-block;
  transform: scale(0.4) rotate(-12deg);
  opacity: 0;
  transition: transform var(--aiditor-dur-med) cubic-bezier(.34,1.56,.64,1),
              opacity   var(--aiditor-dur-fast) var(--aiditor-ease);
}
.aiditor-ui-check-box:checked + .aiditor-ui-check-mark {
  background: var(--aiditor-accent);
  border-color: var(--aiditor-accent);
  color: var(--aiditor-accent-fg);
}
.aiditor-ui-check-box:checked + .aiditor-ui-check-mark::after {
  transform: scale(1) rotate(0deg);
  opacity: 1;
}
.aiditor-ui-check:hover .aiditor-ui-check-mark { border-color: var(--aiditor-accent-soft); }
.aiditor-ui-check:active .aiditor-ui-check-mark { transform: scale(0.92); }
.aiditor-ui-check-box:focus-visible + .aiditor-ui-check-mark {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--aiditor-accent) 32%, transparent);
}

/* ── switch ─────────────────────────────────────────────────────── */
.aiditor-ui-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--aiditor-space-2);
  cursor: pointer;
  user-select: none;
  font: var(--aiditor-fs-md) var(--aiditor-font-ui);
  color: var(--aiditor-fg-0);
}
.aiditor-ui-switch-box { position: absolute; opacity: 0; width: 0; height: 0; }
.aiditor-ui-switch-track {
  position: relative;
  width: 30px; height: 16px;
  flex: 0 0 auto;                   /* fixed-geometry indicator — no flex-shrink */
  background: var(--aiditor-bg-3);
  border: 1px solid var(--aiditor-border-input);
  border-radius: var(--aiditor-r-pill);
  transition: background var(--aiditor-dur-med) var(--aiditor-ease),
              border-color var(--aiditor-dur-med) var(--aiditor-ease),
              box-shadow var(--aiditor-dur-med) var(--aiditor-ease);
}
.aiditor-ui-switch:hover .aiditor-ui-switch-track { border-color: var(--aiditor-border-hover); }
.aiditor-ui-switch-knob {
  position: absolute;
  top: 50%;                       /* vertical centering: independent of knob/track sizes */
  transform: translateY(-50%);
  left: 1px;                       /* 1px gap from the track's left inner edge */
  width: 12px; height: 12px;
  background: var(--aiditor-fg-0);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 0 0 0 transparent;
  transition: left  var(--aiditor-dur-med) cubic-bezier(.34,1.56,.64,1),
              right var(--aiditor-dur-med) cubic-bezier(.34,1.56,.64,1),
              width var(--aiditor-dur-fast) var(--aiditor-ease),
              background var(--aiditor-dur-med) var(--aiditor-ease);
}
.aiditor-ui-switch:active .aiditor-ui-switch-knob { width: 16px; }
.aiditor-ui-switch-on .aiditor-ui-switch-track {
  background: var(--aiditor-accent);
  border-color: var(--aiditor-accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--aiditor-accent) 30%, transparent),
              inset 0 1px 2px rgba(0,0,0,.2);
}
/* On-state: anchor to the right edge with the same 1px inset as the left.
   The active squish (width: 16) still widens the knob; anchoring to `right`
   means the growing width extends leftward — matching the off-state spring
   without hardcoding pixel offsets. */
.aiditor-ui-switch-on .aiditor-ui-switch-knob {
  left: auto;
  right: 1px;
  background: var(--aiditor-accent-fg);
}
.aiditor-ui-switch-box:focus-visible + .aiditor-ui-switch-track {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--aiditor-accent) 30%, transparent);
}

/* ── radio ──────────────────────────────────────────────────────── */
/* flex-wrap so narrow containers push whole items onto a new row instead of
   horizontally squashing the dots into ovals. row-gap controls the spacing
   between wrapped lines; column-gap keeps horizontal spacing unchanged. */
.aiditor-ui-radio-group {
  display: inline-flex;
  flex-wrap: wrap;
  column-gap: var(--aiditor-space-3);
  row-gap: var(--aiditor-space-1);
}
.aiditor-ui-radio-vertical {
  flex-direction: column;
  flex-wrap: nowrap;
  row-gap: var(--aiditor-space-1);
}
.aiditor-ui-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--aiditor-space-2);
  cursor: pointer;
  font: var(--aiditor-fs-md) var(--aiditor-font-ui);
  color: var(--aiditor-fg-0);
}
.aiditor-ui-radio-box { position: absolute; opacity: 0; width: 0; height: 0; }
.aiditor-ui-radio-dot {
  width: 14px; height: 14px;
  flex: 0 0 auto;                   /* fixed-geometry indicator — no flex-shrink */
  border: 1px solid var(--aiditor-border-input);
  background: var(--aiditor-bg-2);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--aiditor-dur-fast) var(--aiditor-ease),
              background   var(--aiditor-dur-fast) var(--aiditor-ease),
              transform    var(--aiditor-dur-fast) var(--aiditor-ease),
              box-shadow   var(--aiditor-dur-med) var(--aiditor-ease);
}
.aiditor-ui-radio-label { white-space: nowrap; }
.aiditor-ui-radio-dot::after {
  content: '';
  width: 6px; height: 6px;
  background: var(--aiditor-accent);
  border-radius: 50%;
  transform: scale(0);
  transition: transform var(--aiditor-dur-med) cubic-bezier(.34,1.56,.64,1);
}
.aiditor-ui-radio:hover .aiditor-ui-radio-dot {
  border-color: var(--aiditor-accent-soft);
  transform: scale(1.08);
}
.aiditor-ui-radio:active .aiditor-ui-radio-dot { transform: scale(0.92); }
.aiditor-ui-radio-box:checked + .aiditor-ui-radio-dot::after { transform: scale(1); }
.aiditor-ui-radio-box:checked + .aiditor-ui-radio-dot {
  border-color: var(--aiditor-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--aiditor-accent) 14%, transparent);
}
.aiditor-ui-radio-box:focus-visible + .aiditor-ui-radio-dot {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--aiditor-accent) 32%, transparent);
}

/* ── segmented ──────────────────────────────────────────────────── */
.aiditor-ui-seg {
  display: flex;
  align-self: flex-start;
  max-width: 100%;
  min-width: 0;
  background: var(--aiditor-bg-2);
  border: 1px solid var(--aiditor-border-input);
  border-radius: var(--aiditor-r-2);
  padding: 2px;
  gap: 2px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--aiditor-bg-4) transparent;
}
.aiditor-ui-seg::-webkit-scrollbar { height: 4px; }
.aiditor-ui-seg::-webkit-scrollbar-thumb { background: var(--aiditor-bg-4); border-radius: 2px; }
.aiditor-ui-seg::-webkit-scrollbar-track { background: transparent; }
.aiditor-ui-seg-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--aiditor-space-1);
  padding: 0 var(--aiditor-space-3);
  height: calc(var(--aiditor-size-h-md) - 6px);
  background: transparent;
  color: var(--aiditor-fg-2);
  border: 0;
  border-radius: var(--aiditor-r-1);
  font: var(--aiditor-fs-md) var(--aiditor-font-ui);
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  transition: background var(--aiditor-dur-fast) var(--aiditor-ease),
              color var(--aiditor-dur-fast) var(--aiditor-ease),
              transform var(--aiditor-dur-fast) var(--aiditor-ease),
              box-shadow var(--aiditor-dur-med) var(--aiditor-ease);
}
.aiditor-ui-seg-btn:hover { background: var(--aiditor-hover); color: var(--aiditor-fg-0); }
.aiditor-ui-seg-btn:active { transform: scale(0.96); }
.aiditor-ui-seg-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--aiditor-accent) 40%, transparent);
}
.aiditor-ui-seg-active {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--aiditor-bg-4) 80%, var(--aiditor-accent)) 0%,
    var(--aiditor-bg-4) 100%);
  color: var(--aiditor-fg-0);
  box-shadow:
    inset 0 -2px 0 var(--aiditor-accent),
    0 1px 0 rgba(0,0,0,.18);
}
.aiditor-ui-seg-active:hover {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--aiditor-bg-4) 80%, var(--aiditor-accent)) 0%,
    var(--aiditor-bg-4) 100%);
  color: var(--aiditor-fg-0);
}

/* ── select ─────────────────────────────────────────────────────── */
.aiditor-ui-select {
  display: inline-flex;
  align-items: center;
  width: 100%;
  height: var(--aiditor-size-h-md);
  background: var(--aiditor-bg-2);
  border: 1px solid var(--aiditor-border-input);
  border-radius: var(--aiditor-r-2);
  padding: 0 var(--aiditor-control-px);
  color: var(--aiditor-fg-0);
  font: var(--aiditor-fs-md) var(--aiditor-font-ui);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--aiditor-dur-fast) var(--aiditor-ease),
              background var(--aiditor-dur-fast) var(--aiditor-ease),
              box-shadow var(--aiditor-dur-med) var(--aiditor-ease);
}
.aiditor-ui-select:hover { border-color: var(--aiditor-border-hover); background: var(--aiditor-bg-3); }
.aiditor-ui-select:focus-visible,
.aiditor-ui-select-open {
  outline: none;
  border-color: var(--aiditor-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--aiditor-accent) 22%, transparent);
}
.aiditor-ui-select-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aiditor-ui-select-placeholder { color: var(--aiditor-fg-3); }
.aiditor-ui-select-arrow {
  color: var(--aiditor-fg-2);
  margin-left: var(--aiditor-space-2);
  display: inline-block;
  font-size: 1.12em;
  line-height: 1;
  transition: transform var(--aiditor-dur-med) var(--aiditor-ease);
}
.aiditor-ui-select-open .aiditor-ui-select-arrow { transform: rotate(180deg); }
.aiditor-ui-select-auto {
  width: auto;
  max-width: 100%;
}
.aiditor-ui-select-minimal {
  height: 26px;
  width: auto;
  min-width: 0;
  padding: 0 var(--aiditor-space-2);
  border-color: transparent;
  border-radius: var(--aiditor-r-1);
  background: transparent;
  color: var(--aiditor-fg-1);
  box-shadow: none;
}
.aiditor-ui-select-minimal:hover {
  border-color: transparent;
  background: var(--aiditor-hover);
}
.aiditor-ui-select-minimal:focus-visible,
.aiditor-ui-select-minimal.aiditor-ui-select-open {
  border-color: transparent;
  background: var(--aiditor-selected);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--aiditor-accent) 28%, transparent);
}
.aiditor-ui-select-minimal .aiditor-ui-select-label {
  flex: 0 1 auto;
}
.aiditor-ui-select-minimal .aiditor-ui-select-arrow {
  margin-left: var(--aiditor-space-1);
  font-size: 1.22em;
}

/* Menu used by select / combobox / overlay menu. Lives in the portal root,
 * which has no background of its own — without an explicit fill, the menu
 * shows whatever is behind it. Use `--aiditor-bg-raised` so the menu reads as a
 * lifted surface above any panel and stays legible across all themes. */
.aiditor-ui-menu {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: var(--aiditor-space-1);
  min-width: 120px;
  max-width: min(420px, calc(100vw - 24px));
  background: var(--aiditor-bg-raised);
  border: 1px solid var(--aiditor-border);
  border-radius: var(--aiditor-r-2);
  box-shadow: var(--aiditor-shadow-md);
}
.aiditor-ui-menu-item {
  display: inline-flex;
  align-items: center;
  gap: var(--aiditor-space-2);
  background: transparent;
  border: 0;
  padding: var(--aiditor-space-1) var(--aiditor-space-2);
  color: var(--aiditor-fg-1);
  font: var(--aiditor-fs-md) var(--aiditor-font-ui);
  cursor: pointer;
  text-align: left;
  border-radius: var(--aiditor-r-1);
  position: relative;
  transition: background var(--aiditor-dur-fast) var(--aiditor-ease),
              color var(--aiditor-dur-fast) var(--aiditor-ease),
              padding-left var(--aiditor-dur-fast) var(--aiditor-ease);
}
.aiditor-ui-menu-item:hover {
  background: var(--aiditor-hover);
  color: var(--aiditor-fg-0);
  padding-left: calc(var(--aiditor-space-2) + 2px);
}
.aiditor-ui-menu-item-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.aiditor-ui-menu-item-label,
.aiditor-ui-menu-item-sub {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aiditor-ui-menu-item-sub {
  color: var(--aiditor-fg-3);
  font: var(--aiditor-fs-xs) var(--aiditor-font-ui);
}
.aiditor-ui-menu-item-active {
  background: var(--aiditor-selected);
  color: var(--aiditor-selected-fg);
}
.aiditor-ui-menu-item-active:hover {
  background: var(--aiditor-selected-hover);
  color: var(--aiditor-selected-fg);
}
.aiditor-ui-menu-item-active::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 2px;
  background: var(--aiditor-accent);
  border-radius: 0 var(--aiditor-r-1) var(--aiditor-r-1) 0;
}
.aiditor-ui-menu-header {
  position: sticky;
  top: calc(-1 * var(--aiditor-space-1));
  z-index: 1;
  padding: var(--aiditor-space-2) var(--aiditor-space-2) var(--aiditor-space-1);
  color: var(--aiditor-fg-1);
  background: var(--aiditor-bg-raised);
  font: 700 var(--aiditor-fs-xs) var(--aiditor-font-ui);
  text-transform: uppercase;
  letter-spacing: 0;
}
.aiditor-ui-menu-divider {
  height: 1px;
  margin: var(--aiditor-space-1) 0;
  background: var(--aiditor-border);
}
.aiditor-ui-menu-empty {
  padding: var(--aiditor-space-2);
  color: var(--aiditor-fg-3);
  font: var(--aiditor-fs-sm) var(--aiditor-font-ui);
  font-style: italic;
}

/* ── combobox ───────────────────────────────────────────────────── */
.aiditor-ui-combobox .aiditor-ui-field-suffix { cursor: pointer; }

/* ── colorInput ─────────────────────────────────────────────────── */
.aiditor-ui-color {
  display: inline-flex;
  align-items: center;
  gap: var(--aiditor-space-2);
  width: 100%;
}
.aiditor-ui-color-swatch {
  position: relative;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: var(--aiditor-r-2);
  border: 1px solid var(--aiditor-border-input);
  background:
    linear-gradient(45deg, color-mix(in srgb, var(--aiditor-fg-0) 14%, transparent) 25%, transparent 25%),
    linear-gradient(-45deg, color-mix(in srgb, var(--aiditor-fg-0) 14%, transparent) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, color-mix(in srgb, var(--aiditor-fg-0) 14%, transparent) 75%),
    linear-gradient(-45deg, transparent 75%, color-mix(in srgb, var(--aiditor-fg-0) 14%, transparent) 75%),
    var(--aiditor-bg-2);
  background-position: 0 0, 0 2px, 2px -2px, -2px 0;
  background-size: 4px 4px;
  cursor: pointer;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}
.aiditor-ui-color-swatch-fill {
  position: absolute;
  inset: 0;
}
.aiditor-ui-color-text {
  flex: 1 1 auto;
  min-width: 0;
}
.aiditor-ui-color-text .aiditor-ui-input {
  font-family: var(--aiditor-font-mono);
}
.aiditor-ui-color-disabled {
  opacity: .65;
}

.aiditor-ui-color-picker {
  width: 220px;
  padding: 0;
  display: flex;
  flex-direction: column;
  color: var(--aiditor-fg-1);
}
.aiditor-ui-color-picker-main {
  padding: 8px 8px 6px;
}
.aiditor-ui-color-sv {
  position: relative;
  width: 100%;
  height: 130px;
  margin-bottom: 6px;
  border-radius: 6px;
  cursor: crosshair;
  overflow: hidden;
  user-select: none;
}
.aiditor-ui-color-sv-dot {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 4px rgba(0,0,0,.3);
}
.aiditor-ui-color-hue,
.aiditor-ui-color-alpha {
  position: relative;
  width: 100%;
  height: 10px;
  margin-bottom: 4px;
  border-radius: 5px;
  overflow: hidden;
}
.aiditor-ui-color-hue {
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}
.aiditor-ui-color-alpha {
  margin-bottom: 0;
  background:
    linear-gradient(45deg, rgba(255,255,255,.18) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,.18) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,.18) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.18) 75%),
    var(--aiditor-bg-2);
  background-position: 0 0, 0 2px, 2px -2px, -2px 0;
  background-size: 4px 4px;
}
.aiditor-ui-color-range {
  width: 100%;
  height: 10px;
  margin: 0;
  display: block;
  appearance: none;
  border-radius: 5px;
  background: transparent;
  outline: 0;
  cursor: pointer;
}
.aiditor-ui-color-range::-webkit-slider-thumb {
  appearance: none;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.25);
}
.aiditor-ui-color-range::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.25);
}
.aiditor-ui-color-values {
  padding: 0 8px 6px;
}
.aiditor-ui-color-values .aiditor-ui-seg {
  width: 100%;
  margin-bottom: 6px;
}
.aiditor-ui-color-values .aiditor-ui-seg-btn {
  flex: 1 1 0;
  min-width: 0;
  height: 22px;
  padding: 0 6px;
  font-size: 10px;
  text-transform: uppercase;
}
.aiditor-ui-color-value-row {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
}
.aiditor-ui-color-current,
.aiditor-ui-color-preview,
.aiditor-ui-color-favorite-fill {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 1px solid var(--aiditor-border-input);
  border-radius: 3px;
  overflow: hidden;
  background:
    linear-gradient(45deg, rgba(255,255,255,.18) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,.18) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,.18) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.18) 75%),
    var(--aiditor-bg-2);
  background-position: 0 0, 0 2px, 2px -2px, -2px 0;
  background-size: 4px 4px;
}
.aiditor-ui-color-preview-fill {
  position: absolute;
  inset: 0;
}
.aiditor-ui-color-hex-field {
  flex: 1 1 auto;
  min-width: 0;
}
.aiditor-ui-color-hex-field .aiditor-ui-input {
  height: 22px;
  font: 11px var(--aiditor-font-mono);
}
.aiditor-ui-color-value-row .aiditor-ui-icon-btn {
  width: 22px;
  height: 22px;
}
.aiditor-ui-color-channel {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 1 1 0;
  min-width: 0;
}
.aiditor-ui-color-channel-label {
  flex: 0 0 auto;
  width: 10px;
  color: var(--aiditor-fg-3);
  font: 9px var(--aiditor-font-ui);
  text-transform: uppercase;
}
.aiditor-ui-color-channel-input {
  flex: 1 1 auto;
  width: 0;
  min-width: 0;
  height: 22px;
  padding: 0 4px;
  border: 1px solid var(--aiditor-border-input);
  border-radius: 3px;
  background: var(--aiditor-bg-2);
  color: var(--aiditor-fg-0);
  font: 10px var(--aiditor-font-ui);
  text-align: center;
  outline: 0;
  box-sizing: border-box;
}
.aiditor-ui-color-channel-input:focus {
  border-color: var(--aiditor-accent);
  box-shadow: 0 0 0 1px var(--aiditor-focus-ring);
}
.aiditor-ui-color-favorites {
  padding: 6px 8px 8px;
  border-top: 1px solid var(--aiditor-border);
}
.aiditor-ui-color-favorites-title {
  margin-bottom: 5px;
  color: var(--aiditor-fg-3);
  font: 700 9px var(--aiditor-font-ui);
  text-transform: uppercase;
}
.aiditor-ui-color-favorites-grid {
  display: grid;
  grid-template-columns: repeat(8, 18px);
  gap: 4px;
}
.aiditor-ui-color-favorite {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.aiditor-ui-color-favorite-active .aiditor-ui-color-favorite-fill {
  box-shadow: 0 0 0 1.5px var(--aiditor-accent);
}
.aiditor-ui-color-favorite:focus-visible .aiditor-ui-color-favorite-fill {
  outline: 1px solid var(--aiditor-accent);
  outline-offset: 1px;
}
.aiditor-ui-color-picker .aiditor-ui-field {
  min-width: 0;
  box-sizing: border-box;
}

/* ── enumInput ──────────────────────────────────────────────────── */
.aiditor-ui-enum {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 3px;
}
.aiditor-ui-enum-btn {
  height: var(--aiditor-size-h-sm);
  padding: 0 var(--aiditor-space-2);
  box-sizing: border-box;
  background: var(--aiditor-bg-2);
  border: 1px solid var(--aiditor-border-input);
  border-radius: var(--aiditor-r-2);
  color: var(--aiditor-fg-2);
  font: var(--aiditor-fs-sm) var(--aiditor-font-ui);
  cursor: pointer;
  transition: background var(--aiditor-dur-fast) var(--aiditor-ease),
              border-color var(--aiditor-dur-fast) var(--aiditor-ease),
              color var(--aiditor-dur-fast) var(--aiditor-ease),
              transform var(--aiditor-dur-fast) var(--aiditor-ease),
              box-shadow var(--aiditor-dur-med) var(--aiditor-ease);
}
.aiditor-ui-enum-btn:hover:not(.aiditor-ui-enum-on) {
  background: var(--aiditor-bg-3);
  border-color: var(--aiditor-border-hover);
  color: var(--aiditor-fg-0);
}
.aiditor-ui-enum-btn:active { transform: scale(0.94); }
.aiditor-ui-enum-on {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--aiditor-accent) 28%, var(--aiditor-bg-2)) 0%,
    var(--aiditor-accent-bg) 100%);
  color: var(--aiditor-fg-0);
  border-color: var(--aiditor-accent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--aiditor-accent) 50%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--aiditor-accent) 42%, transparent),
    0 0 6px color-mix(in srgb, var(--aiditor-accent) 16%, transparent);
}
.aiditor-ui-enum-on:hover {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--aiditor-accent) 36%, var(--aiditor-bg-2)) 0%,
    color-mix(in srgb, var(--aiditor-accent-bg) 85%, var(--aiditor-fg-0)) 100%);
}

/* ── tagInput ───────────────────────────────────────────────────── */
.aiditor-ui-taginput {
  height: auto;
  min-height: var(--aiditor-size-h-md);
  flex-wrap: wrap;
  padding: 2px var(--aiditor-control-px);
}
.aiditor-ui-taginput-list {
  display: contents;
}
.aiditor-ui-taginput-input {
  flex: 1 0 60px;
  min-width: 60px;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--aiditor-fg-0);
  font: var(--aiditor-fs-md) var(--aiditor-font-ui);
  padding: 0;
}

/* ── tab ────────────────────────────────────────────────────────── */
/* One component, three variants (bar / compact / sidebar). Vertical
 * and icon-only are independent knobs but sidebar defaults to both. */
.aiditor-ui-tab {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
  scrollbar-width: none;
}
.aiditor-ui-tab::-webkit-scrollbar { display: none; }
.aiditor-ui-tab-vertical {
  flex-direction: column;
  align-items: stretch;
  overflow-x: hidden;
  overflow-y: auto;
}
.aiditor-ui-tab-btn {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--aiditor-space-1);
  padding: 0 var(--aiditor-space-3);
  height: var(--aiditor-tab-h);
  min-width: 80px;
  justify-content: center;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--aiditor-border);
  color: var(--aiditor-fg-2);
  font: var(--aiditor-fs-md) var(--aiditor-font-ui);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--aiditor-dur-fast) var(--aiditor-ease),
              color      var(--aiditor-dur-fast) var(--aiditor-ease),
              transform  var(--aiditor-dur-fast) var(--aiditor-ease);
}
.aiditor-ui-tab-btn:active { transform: scale(0.96); }
.aiditor-ui-tab-btn::after {
  content: '';
  position: absolute;
  left: 50%; right: 50%;
  bottom: 0;
  height: 2px;
  background: var(--aiditor-accent);
  border-radius: 1px 1px 0 0;
  transition: left var(--aiditor-dur-med) var(--aiditor-ease),
              right var(--aiditor-dur-med) var(--aiditor-ease),
              opacity var(--aiditor-dur-fast) var(--aiditor-ease);
  opacity: 0;
}
.aiditor-ui-tab-btn:hover {
  background: var(--aiditor-hover);
  color: var(--aiditor-fg-0);
}
.aiditor-ui-tab-btn:hover::after { left: 30%; right: 30%; opacity: .5; }
.aiditor-ui-tab-btn-active {
  background: var(--aiditor-bg-1);
  color: var(--aiditor-fg-0);
}
.aiditor-ui-tab-btn-active:hover {
  background: var(--aiditor-bg-1);
  color: var(--aiditor-fg-0);
}
.aiditor-ui-tab-btn-active::after {
  left: 0; right: 0;
  opacity: 1;
  box-shadow: 0 0 8px color-mix(in srgb, var(--aiditor-accent) 60%, transparent);
}
.aiditor-ui-tab-btn-transient .aiditor-ui-tab-title { font-style: italic; }
.aiditor-ui-tab-btn-dirty .aiditor-ui-tab-title::after {
  content: ' •';
  color: var(--aiditor-accent);
}
.aiditor-ui-tab-btn-dragging { opacity: 0.45; }

/* close × (only visible in .aiditor-ui-tab-closable) */
.aiditor-ui-tab-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 0;
  background: transparent;
  color: var(--aiditor-fg-3);
  border-radius: var(--aiditor-r-1);
  cursor: pointer;
  font: var(--aiditor-fs-xl) var(--aiditor-font-ui);
  line-height: 1;
  padding: 0;
}
.aiditor-ui-tab-close:hover {
  background: var(--aiditor-bg-3);
  color: var(--aiditor-fg-0);
}
/* hover-reveal is the default close behaviour for .bar / dock-standard */
.aiditor-ui-tab-closable .aiditor-ui-tab-btn .aiditor-ui-tab-close { opacity: 0; }
.aiditor-ui-tab-closable .aiditor-ui-tab-btn:hover .aiditor-ui-tab-close,
.aiditor-ui-tab-closable .aiditor-ui-tab-btn-active .aiditor-ui-tab-close { opacity: 1; }

/* badge (notification count etc.) */
.aiditor-ui-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14px;
  height: 14px;
  padding: 0 4px;
  background: var(--aiditor-error);
  color: var(--aiditor-error-fg);
  border-radius: var(--aiditor-r-pill);
  font: 600 var(--aiditor-fs-xs) var(--aiditor-font-ui);
  margin-left: 2px;
}

.aiditor-ui-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--aiditor-fs-xl);
  line-height: 1;
  min-width: 14px;
}

/* + add button */
.aiditor-ui-tab-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--aiditor-tab-h);
  height: var(--aiditor-tab-h);
  border: 0;
  background: transparent;
  color: var(--aiditor-fg-3);
  cursor: pointer;
  font: 16px/1 var(--aiditor-font-ui);
}
.aiditor-ui-tab-add:hover {
  background: var(--aiditor-hover);
  color: var(--aiditor-fg-0);
}

/* compact variant — tighter padding, smaller glyph, no min-width */
.aiditor-ui-tab-compact .aiditor-ui-tab-btn {
  height: calc(var(--aiditor-tab-h) - 4px);
  padding: 0 var(--aiditor-space-2);
  font-size: var(--aiditor-fs-sm);
  min-width: 0;
}

/* vertical (auto for sidebar) */
.aiditor-ui-tab-vertical .aiditor-ui-tab-btn {
  border-right: 0;
  border-bottom: 1px solid var(--aiditor-border);
  justify-content: center;
}
.aiditor-ui-tab-vertical .aiditor-ui-tab-btn::after {
  left: 0; right: auto;
  top: 50%; bottom: 50%;
  width: 2px;
  height: auto;
  border-radius: 0 1px 1px 0;
  transition: top var(--aiditor-dur-med) var(--aiditor-ease),
              bottom var(--aiditor-dur-med) var(--aiditor-ease),
              opacity var(--aiditor-dur-fast) var(--aiditor-ease);
}
.aiditor-ui-tab-vertical .aiditor-ui-tab-btn:hover::after { top: 30%; bottom: 30%; opacity: .5; }
.aiditor-ui-tab-vertical .aiditor-ui-tab-btn-active::after { top: 0; bottom: 0; opacity: 1; }

/* icon-only (auto for sidebar) — 32×32 square */
.aiditor-ui-tab-icon-only .aiditor-ui-tab-btn {
  padding: 0;
  width: 32px;
  height: 32px;
  min-width: 0;
  gap: 0;
}
.aiditor-ui-tab-icon-only .aiditor-ui-tab-icon { font-size: 16px; }

/* dock tabs: active tabs glow only on the edge away from panel content. */
.aiditor-dock-tabs .aiditor-ui-tab-btn {
  color: var(--aiditor-dock-tab-fg);
  overflow: hidden;
}
.aiditor-dock-tabs .aiditor-ui-tab-btn-active {
  background: var(--aiditor-bg-1);
  color: var(--aiditor-dock-tab-active-fg);
}
.aiditor-dock-tabs .aiditor-ui-tab-btn-active:hover {
  background: var(--aiditor-bg-1);
  color: var(--aiditor-dock-tab-active-fg);
}
.aiditor-dock-tabs .aiditor-ui-tab-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--aiditor-dur-fast) var(--aiditor-ease);
}
.aiditor-dock-tabs .aiditor-ui-tab-btn::after {
  border-radius: 0;
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  transform: none;
}
.aiditor-dock-tabs .aiditor-ui-tab-btn-active::before { opacity: 1; }
.aiditor-dock-tabs .aiditor-ui-tab-btn-active::after  { opacity: .66; }

.aiditor-toolbar-item > .aiditor-dock-tabs {
  align-self: stretch;
}

.aiditor-dock-toolbar-top .aiditor-dock-tabs .aiditor-ui-tab-btn,
.aiditor-dock-toolbar-bottom .aiditor-dock-tabs .aiditor-ui-tab-btn {
  border-right: 0;
  margin-inline-end: 1px;
  height: auto;
  min-height: var(--aiditor-toolbar-h);
}
.aiditor-dock-toolbar-top .aiditor-dock-tabs .aiditor-ui-tab-btn {
  border-radius: var(--aiditor-r-4) var(--aiditor-r-4) 0 0;
}
.aiditor-dock-toolbar-bottom .aiditor-dock-tabs .aiditor-ui-tab-btn {
  border-radius: 0 0 var(--aiditor-r-4) var(--aiditor-r-4);
}
.aiditor-dock-toolbar-top .aiditor-dock-tabs .aiditor-ui-tab-btn::after,
.aiditor-dock-toolbar-bottom .aiditor-dock-tabs .aiditor-ui-tab-btn::after {
  left: 10px;
  right: 10px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--aiditor-accent) 78%, white 12%) 18%,
    color-mix(in srgb, var(--aiditor-accent) 66%, transparent) 82%,
    transparent
  );
}
.aiditor-dock-toolbar-top .aiditor-dock-tabs .aiditor-ui-tab-btn::after {
  top: 0;
  bottom: auto;
}
.aiditor-dock-toolbar-bottom .aiditor-dock-tabs .aiditor-ui-tab-btn::after {
  top: auto;
  bottom: 0;
}
.aiditor-dock-toolbar-top .aiditor-dock-tabs .aiditor-ui-tab-btn::before {
  background:
    radial-gradient(95px 24px at 50% 0,
      color-mix(in srgb, var(--aiditor-accent) 31%, transparent),
      color-mix(in srgb, var(--aiditor-accent) 8%, transparent) 54%,
      transparent 78%
    ),
    linear-gradient(to bottom,
      color-mix(in srgb, var(--aiditor-accent) 13%, transparent),
      transparent 42%
    );
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 25px, rgba(0,0,0,.35) 39px, transparent 56px);
  mask-image: linear-gradient(to bottom, #000 0, #000 25px, rgba(0,0,0,.35) 39px, transparent 56px);
}
.aiditor-dock-toolbar-bottom .aiditor-dock-tabs .aiditor-ui-tab-btn::before {
  background:
    radial-gradient(95px 24px at 50% 100%,
      color-mix(in srgb, var(--aiditor-accent) 31%, transparent),
      color-mix(in srgb, var(--aiditor-accent) 8%, transparent) 54%,
      transparent 78%
    ),
    linear-gradient(to top,
      color-mix(in srgb, var(--aiditor-accent) 13%, transparent),
      transparent 42%
    );
  -webkit-mask-image: linear-gradient(to top, #000 0, #000 25px, rgba(0,0,0,.35) 39px, transparent 56px);
  mask-image: linear-gradient(to top, #000 0, #000 25px, rgba(0,0,0,.35) 39px, transparent 56px);
}
.aiditor-dock-toolbar-top .aiditor-dock-tabs .aiditor-ui-tab-btn-active {
  box-shadow:
    0 -1px 0 color-mix(in srgb, var(--aiditor-accent) 16%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--aiditor-accent) 35%, transparent),
    inset 1px 0 0 color-mix(in srgb, var(--aiditor-accent) 12%, transparent),
    inset -1px 0 0 color-mix(in srgb, var(--aiditor-accent) 10%, transparent);
}
.aiditor-dock-toolbar-bottom .aiditor-dock-tabs .aiditor-ui-tab-btn-active {
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--aiditor-accent) 16%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--aiditor-accent) 35%, transparent),
    inset 1px 0 0 color-mix(in srgb, var(--aiditor-accent) 12%, transparent),
    inset -1px 0 0 color-mix(in srgb, var(--aiditor-accent) 10%, transparent);
}

.aiditor-dock-toolbar-left .aiditor-dock-tabs .aiditor-ui-tab-btn,
.aiditor-dock-toolbar-right .aiditor-dock-tabs .aiditor-ui-tab-btn {
  border-bottom: 0;
  margin-block-end: 1px;
  width: auto;
  min-width: var(--aiditor-toolbar-h);
}
.aiditor-dock-toolbar-left .aiditor-dock-tabs:not(.aiditor-ui-tab-icon-only) .aiditor-ui-tab-btn,
.aiditor-dock-toolbar-right .aiditor-dock-tabs:not(.aiditor-ui-tab-icon-only) .aiditor-ui-tab-btn {
  height: var(--aiditor-tab-h);
  min-height: var(--aiditor-tab-h);
}
.aiditor-dock-toolbar-left .aiditor-dock-tabs .aiditor-ui-tab-btn {
  border-radius: var(--aiditor-r-4) 0 0 var(--aiditor-r-4);
}
.aiditor-dock-toolbar-right .aiditor-dock-tabs .aiditor-ui-tab-btn {
  border-radius: 0 var(--aiditor-r-4) var(--aiditor-r-4) 0;
}
.aiditor-dock-toolbar-left .aiditor-dock-tabs .aiditor-ui-tab-btn::after,
.aiditor-dock-toolbar-right .aiditor-dock-tabs .aiditor-ui-tab-btn::after {
  top: 10px;
  bottom: 10px;
  width: 1px;
  height: auto;
  background: linear-gradient(
    180deg,
    transparent,
    color-mix(in srgb, var(--aiditor-accent) 78%, white 12%) 18%,
    color-mix(in srgb, var(--aiditor-accent) 66%, transparent) 82%,
    transparent
  );
}
.aiditor-dock-toolbar-left .aiditor-dock-tabs .aiditor-ui-tab-btn::after {
  left: 0;
  right: auto;
}
.aiditor-dock-toolbar-right .aiditor-dock-tabs .aiditor-ui-tab-btn::after {
  left: auto;
  right: 0;
}
.aiditor-dock-toolbar-left .aiditor-dock-tabs .aiditor-ui-tab-btn::before {
  background:
    radial-gradient(24px 95px at 0 50%,
      color-mix(in srgb, var(--aiditor-accent) 31%, transparent),
      color-mix(in srgb, var(--aiditor-accent) 8%, transparent) 54%,
      transparent 78%
    ),
    linear-gradient(to right,
      color-mix(in srgb, var(--aiditor-accent) 13%, transparent),
      transparent 42%
    );
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 25px, rgba(0,0,0,.35) 39px, transparent 56px);
  mask-image: linear-gradient(to right, #000 0, #000 25px, rgba(0,0,0,.35) 39px, transparent 56px);
}
.aiditor-dock-toolbar-right .aiditor-dock-tabs .aiditor-ui-tab-btn::before {
  background:
    radial-gradient(24px 95px at 100% 50%,
      color-mix(in srgb, var(--aiditor-accent) 31%, transparent),
      color-mix(in srgb, var(--aiditor-accent) 8%, transparent) 54%,
      transparent 78%
    ),
    linear-gradient(to left,
      color-mix(in srgb, var(--aiditor-accent) 13%, transparent),
      transparent 42%
    );
  -webkit-mask-image: linear-gradient(to left, #000 0, #000 25px, rgba(0,0,0,.35) 39px, transparent 56px);
  mask-image: linear-gradient(to left, #000 0, #000 25px, rgba(0,0,0,.35) 39px, transparent 56px);
}
.aiditor-dock-toolbar-left .aiditor-dock-tabs .aiditor-ui-tab-btn-active {
  box-shadow:
    -1px 0 0 color-mix(in srgb, var(--aiditor-accent) 16%, transparent),
    inset 1px 0 0 color-mix(in srgb, var(--aiditor-accent) 35%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--aiditor-accent) 12%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--aiditor-accent) 10%, transparent);
}
.aiditor-dock-toolbar-right .aiditor-dock-tabs .aiditor-ui-tab-btn-active {
  box-shadow:
    1px 0 0 color-mix(in srgb, var(--aiditor-accent) 16%, transparent),
    inset -1px 0 0 color-mix(in srgb, var(--aiditor-accent) 35%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--aiditor-accent) 12%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--aiditor-accent) 10%, transparent);
}

/* drop indicator (used by dock panel drag) */
.aiditor-ui-tab-drop-indicator {
  position: absolute;
  background: var(--aiditor-accent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--aiditor-accent) 70%, transparent);
  pointer-events: none;
  z-index: 3;
}

@media (prefers-reduced-motion: reduce) {
  .aiditor-ui-tab-btn,
  .aiditor-ui-tab-close,
  .aiditor-ui-tab-add { transition: none; }
}

/* ── tabPanel (tab + body pane composite) ───────────────────────── */
.aiditor-ui-tabpanel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
}
.aiditor-ui-tabpanel-horizontal { flex-direction: column; }
.aiditor-ui-tabpanel-vertical   { flex-direction: row; }
.aiditor-ui-tabpanel-body {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

/* ─── ui.structInput / ui.arrayInput / ui.propertyForm ─────────────
   Base appearance is the "nested" framed look, used anywhere these
   components are embedded inside a larger form. ui.propertyForm (which
   wraps a top-level structInput) overrides those base styles below to get
   the wider "inspector" layout. */
.aiditor-ui-struct-input,
.aiditor-ui-dict-input,
.aiditor-ui-array-input,
.aiditor-ui-array-editor {
  border: 1px solid var(--aiditor-border);
  border-radius: var(--aiditor-r-2);
  padding: var(--aiditor-space-1) var(--aiditor-space-2);
  background: color-mix(in srgb, var(--aiditor-bg-1) 84%, var(--aiditor-bg-2));
}
.aiditor-ui-struct-input-row,
.aiditor-ui-dict-input-row,
.aiditor-ui-array-input-row {
  display: grid;
  gap: var(--aiditor-space-1);
  align-items: center;
  padding: 2px 0;
}
.aiditor-ui-struct-input-row { grid-template-columns: 56px minmax(0, 1fr); }
.aiditor-ui-dict-input-row { grid-template-columns: 56px minmax(0, 1fr) auto; }
.aiditor-ui-struct-input-row-has-actions:not(.aiditor-ui-struct-input-row-actions-empty) {
  grid-template-columns: 56px minmax(0, 1fr) auto;
}
.aiditor-ui-array-input-row  { grid-template-columns: auto minmax(0, 1fr) auto; }
.aiditor-ui-struct-input-label,
.aiditor-ui-dict-input-key,
.aiditor-ui-array-input-index {
  font: var(--aiditor-fs-sm) var(--aiditor-font-mono);
  color: var(--aiditor-fg-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aiditor-ui-struct-input-cell,
.aiditor-ui-dict-input-cell,
.aiditor-ui-array-input-cell { min-width: 0; }
.aiditor-ui-struct-input-actions,
.aiditor-ui-dict-input-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}
.aiditor-ui-struct-input-row-actions-empty > .aiditor-ui-struct-input-actions {
  display: none;
}
.aiditor-ui-struct-input-cell > *,
.aiditor-ui-dict-input-cell > *,
.aiditor-ui-array-input-cell > * { width: 100%; max-width: 100%; box-sizing: border-box; }
.aiditor-ui-dict-input-row-actions-empty > .aiditor-ui-dict-input-actions { display: none; }
.aiditor-ui-dict-input-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.aiditor-ui-dict-input-key {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.aiditor-ui-dict-input-key-input {
  width: 100%;
  min-width: 0;
  height: var(--aiditor-size-h-md);
  box-sizing: border-box;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--aiditor-r-1);
  outline: 0;
  color: var(--aiditor-fg-2);
  font: inherit;
  padding: 0 var(--aiditor-space-1);
}
.aiditor-ui-dict-input-key-input:not(:read-only):hover {
  border-color: var(--aiditor-border-hover);
  background: var(--aiditor-bg-2);
}
.aiditor-ui-dict-input-key-input:not(:read-only):focus {
  border-color: var(--aiditor-accent);
  background: var(--aiditor-bg-2);
  color: var(--aiditor-fg-0);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--aiditor-accent) 20%, transparent);
}
.aiditor-ui-dict-input-error {
  display: none;
  margin-top: 1px;
  color: var(--aiditor-danger);
  font: var(--aiditor-fs-xs) var(--aiditor-font-ui);
  white-space: normal;
}
.aiditor-ui-dict-input-row.has-error .aiditor-ui-dict-input-error { display: block; }
.aiditor-ui-dict-input-row.has-error .aiditor-ui-dict-input-key-input {
  border-color: var(--aiditor-danger);
  color: var(--aiditor-danger);
}
.aiditor-ui-dict-input-empty {
  padding: var(--aiditor-space-2);
  color: var(--aiditor-fg-3);
  font: var(--aiditor-fs-sm) var(--aiditor-font-ui);
  text-align: center;
}
.aiditor-ui-dict-input-add {
  align-self: stretch;
  width: 100%;
  margin-top: var(--aiditor-space-1);
  background: var(--aiditor-bg-2);
  border-color: var(--aiditor-border-input);
}
.aiditor-ui-struct-input-row-label-hidden,
.aiditor-ui-struct-input-row-label-sr-only {
  grid-template-columns: minmax(0, 1fr);
}
.aiditor-ui-struct-input-row-label-hidden.aiditor-ui-struct-input-row-has-actions:not(.aiditor-ui-struct-input-row-actions-empty),
.aiditor-ui-struct-input-row-label-sr-only.aiditor-ui-struct-input-row-has-actions:not(.aiditor-ui-struct-input-row-actions-empty) {
  grid-template-columns: minmax(0, 1fr) auto;
}
.aiditor-ui-struct-input-row-label-hidden > .aiditor-ui-struct-input-cell,
.aiditor-ui-struct-input-row-label-sr-only > .aiditor-ui-struct-input-cell {
  grid-column: 1 / -1;
}
.aiditor-ui-struct-input-row-label-hidden.aiditor-ui-struct-input-row-has-actions:not(.aiditor-ui-struct-input-row-actions-empty) > .aiditor-ui-struct-input-cell,
.aiditor-ui-struct-input-row-label-sr-only.aiditor-ui-struct-input-row-has-actions:not(.aiditor-ui-struct-input-row-actions-empty) > .aiditor-ui-struct-input-cell {
  grid-column: 1;
}
.aiditor-ui-struct-input-label-hidden { display: none; }
.aiditor-ui-struct-input-label-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* propertyForm wraps each editor in a .aiditor-ui-slot. The editor inside the
   slot also needs to fill width or every numberInput /
   colorInput / etc collapses to its intrinsic size while text inputs take
   the remaining space, producing ragged-right rows. */
.aiditor-ui-slot > *,
.aiditor-ui-struct-input-cell > .aiditor-ui-slot > * { width: 100%; max-width: 100%; box-sizing: border-box; }
.aiditor-ui-array-input-rows { display: flex; flex-direction: column; gap: 2px; }
.aiditor-ui-array-input-add {
  align-self: stretch;
  width: 100%;
  margin-top: var(--aiditor-space-1);
  background: var(--aiditor-bg-2);
  border-color: var(--aiditor-border-input);
}
.aiditor-ui-array-editor {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  outline: none;
  user-select: none;
}
.aiditor-ui-array-editor-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  position: relative;
}
.aiditor-ui-array-editor-row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) auto;
  gap: 2px;
  align-items: center;
  min-width: 0;
  min-height: var(--aiditor-size-h-md);
  padding: 1px;
  border: 1px solid transparent;
  border-radius: var(--aiditor-r-2);
}
.aiditor-ui-array-editor-compact .aiditor-ui-array-editor-row {
  min-height: var(--aiditor-size-h-sm);
  padding: 0 1px;
}
.aiditor-ui-array-editor-comfortable .aiditor-ui-array-editor-row {
  min-height: 34px;
  padding: 3px;
}
.aiditor-ui-array-editor-index-none .aiditor-ui-array-editor-row {
  grid-template-columns: minmax(0, 1fr) auto;
}
.aiditor-ui-array-editor-row:hover {
  background: var(--aiditor-hover);
}
.aiditor-ui-array-editor-row.is-selected {
  border-color: var(--aiditor-selected-border);
  background: var(--aiditor-selected);
}
.aiditor-ui-array-editor-row.is-selected:hover {
  border-color: var(--aiditor-accent);
  background: var(--aiditor-selected-hover);
}
.aiditor-ui-array-editor-row.is-active {
  box-shadow: inset 2px 0 0 var(--aiditor-accent);
}
.aiditor-ui-array-editor-row.is-dragging {
  opacity: .55;
}
.aiditor-ui-array-editor-row.is-disabled {
  opacity: .62;
}
.aiditor-ui-array-editor-index {
  box-sizing: border-box;
  justify-self: end;
  width: auto;
  min-width: 0;
  max-width: 7ch;
  height: calc(var(--aiditor-size-h-sm) - 2px);
  padding: 0 2px;
  overflow: hidden;
  border: 0;
  border-radius: var(--aiditor-r-1);
  background: transparent;
  color: var(--aiditor-fg-3);
  font: var(--aiditor-fs-xs) var(--aiditor-font-mono);
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aiditor-ui-array-editor-index-handle .aiditor-ui-array-editor-index {
  min-width: 14px;
  padding: 0 3px;
  text-align: center;
}
.aiditor-ui-array-editor-index-number-handle .aiditor-ui-array-editor-index {
  max-width: 9ch;
}
.aiditor-ui-array-editor-index:not(:disabled):hover {
  background: var(--aiditor-hover);
  color: var(--aiditor-fg-1);
}
.aiditor-ui-array-editor-handle {
  cursor: grab;
}
.aiditor-ui-array-editor-handle:active {
  cursor: grabbing;
}
.aiditor-ui-array-editor-cell {
  min-width: 0;
  user-select: text;
}
.aiditor-ui-array-editor-cell > * {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.aiditor-ui-array-editor-cell > .aiditor-ui-struct-input,
.aiditor-ui-array-editor-cell > .aiditor-ui-dict-input,
.aiditor-ui-array-editor-cell > .aiditor-ui-array-input,
.aiditor-ui-array-editor-cell > .aiditor-ui-array-editor {
  padding-inline: var(--aiditor-space-1);
}
.aiditor-ui-array-editor-cell > .aiditor-ui-struct-input .aiditor-ui-struct-input-row {
  grid-template-columns: minmax(36px, 48px) minmax(0, 1fr);
  gap: 3px;
}
.aiditor-ui-array-editor-cell > .aiditor-ui-struct-input .aiditor-ui-struct-input-row-has-actions:not(.aiditor-ui-struct-input-row-actions-empty) {
  grid-template-columns: minmax(36px, 48px) minmax(0, 1fr) auto;
}
.aiditor-ui-array-editor-cell > .aiditor-ui-struct-input .aiditor-ui-struct-input-row-label-hidden,
.aiditor-ui-array-editor-cell > .aiditor-ui-struct-input .aiditor-ui-struct-input-row-label-sr-only {
  grid-template-columns: minmax(0, 1fr);
}
.aiditor-ui-array-editor-cell > .aiditor-ui-struct-input .aiditor-ui-struct-input-row-label-hidden.aiditor-ui-struct-input-row-has-actions:not(.aiditor-ui-struct-input-row-actions-empty),
.aiditor-ui-array-editor-cell > .aiditor-ui-struct-input .aiditor-ui-struct-input-row-label-sr-only.aiditor-ui-struct-input-row-has-actions:not(.aiditor-ui-struct-input-row-actions-empty) {
  grid-template-columns: minmax(0, 1fr) auto;
}
.aiditor-ui-array-editor-cell > .aiditor-ui-dict-input .aiditor-ui-dict-input-row {
  grid-template-columns: minmax(36px, 48px) minmax(0, 1fr) auto;
  gap: 3px;
}
.aiditor-ui-array-editor-actions {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 2px;
  align-items: center;
}
.aiditor-ui-array-editor-empty {
  padding: var(--aiditor-space-1) 0;
  color: var(--aiditor-fg-3);
  font: var(--aiditor-fs-sm) var(--aiditor-font-ui);
}
.aiditor-ui-array-editor-add {
  align-self: stretch;
  width: 100%;
  margin-top: var(--aiditor-space-1);
  background: var(--aiditor-bg-2);
  border-color: var(--aiditor-border-input);
}
.aiditor-ui-array-editor-drop-line {
  height: 2px;
  flex: 0 0 2px;
  margin: 1px 0;
  border-radius: 999px;
  background: var(--aiditor-accent);
  box-shadow: 0 0 0 2px var(--aiditor-accent-bg);
}
.aiditor-ui-array-editor.is-drop-reject .aiditor-ui-array-editor-drop-line {
  background: var(--aiditor-error);
  box-shadow: 0 0 0 2px var(--aiditor-error-bg);
}

.aiditor-ui-property-form { display: flex; flex-direction: column; min-width: 0; }
/* Strip struct-input chrome inside the panel — both the unnamed top bucket
   (rendered flat) and the bodies of property sections share the same row
   layout: a fixed-ish label column + 1fr editor column. Nested structInputs
   keep the compact base layout above. */
.aiditor-ui-property-form .aiditor-ui-property-form-struct {
  border: 0;
  padding: 0 var(--aiditor-space-1);
  background: transparent;
}
.aiditor-ui-property-form .aiditor-ui-property-form-struct > .aiditor-ui-struct-input-row {
  grid-template-columns: minmax(64px, 76px) minmax(0, 1fr);
  gap: var(--aiditor-space-2);
  padding: var(--aiditor-space-1) 0;
}
.aiditor-ui-property-form .aiditor-ui-property-form-struct > .aiditor-ui-struct-input-row-has-actions:not(.aiditor-ui-struct-input-row-actions-empty) {
  grid-template-columns: minmax(64px, 76px) minmax(0, 1fr) auto;
}
.aiditor-ui-property-form .aiditor-ui-property-form-struct > .aiditor-ui-struct-input-row > .aiditor-ui-struct-input-label {
  font: var(--aiditor-fs-sm) var(--aiditor-font-ui);
  color: var(--aiditor-fg-2);
}
.aiditor-ui-property-form .aiditor-ui-property-form-struct > .aiditor-ui-struct-input-row-label-hidden,
.aiditor-ui-property-form .aiditor-ui-property-form-struct > .aiditor-ui-struct-input-row-label-sr-only {
  grid-template-columns: minmax(0, 1fr);
}
.aiditor-ui-property-form .aiditor-ui-property-form-struct > .aiditor-ui-struct-input-row-label-hidden.aiditor-ui-struct-input-row-has-actions:not(.aiditor-ui-struct-input-row-actions-empty),
.aiditor-ui-property-form .aiditor-ui-property-form-struct > .aiditor-ui-struct-input-row-label-sr-only.aiditor-ui-struct-input-row-has-actions:not(.aiditor-ui-struct-input-row-actions-empty) {
  grid-template-columns: minmax(0, 1fr) auto;
}
.aiditor-ui-property-form .aiditor-ui-property-form-struct > .aiditor-ui-struct-input-row-label-hidden > .aiditor-ui-struct-input-cell,
.aiditor-ui-property-form .aiditor-ui-property-form-struct > .aiditor-ui-struct-input-row-label-sr-only > .aiditor-ui-struct-input-cell {
  grid-column: 1 / -1;
}
.aiditor-ui-property-form .aiditor-ui-property-form-struct > .aiditor-ui-struct-input-row-label-hidden.aiditor-ui-struct-input-row-has-actions:not(.aiditor-ui-struct-input-row-actions-empty) > .aiditor-ui-struct-input-cell,
.aiditor-ui-property-form .aiditor-ui-property-form-struct > .aiditor-ui-struct-input-row-label-sr-only.aiditor-ui-struct-input-row-has-actions:not(.aiditor-ui-struct-input-row-actions-empty) > .aiditor-ui-struct-input-cell {
  grid-column: 1;
}
/* Help cursor only when the label actually carries a tooltip — otherwise the
 * cursor lies. Marker is set by ui.structInput when a tooltip is wired. */
.aiditor-ui-struct-input-label[data-has-tip] { cursor: help; }
/* Section-wrapped groups: section provides the collapsible header; we
   keep a small inset so rows and nested composite editors do not touch edges. */
.aiditor-ui-property-section {
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}
.aiditor-ui-property-section > .aiditor-ui-section-head {
  flex-basis: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0 var(--aiditor-space-2);
  border-radius: var(--aiditor-r-2);
  background: color-mix(in srgb, var(--aiditor-bg-2) 76%, var(--aiditor-bg-3));
  color: var(--aiditor-fg-1);
  font: 700 var(--aiditor-fs-xs) var(--aiditor-font-ui);
}
.aiditor-ui-property-section > .aiditor-ui-section-head:hover {
  background: color-mix(in srgb, var(--aiditor-bg-2) 62%, var(--aiditor-hover));
  color: var(--aiditor-fg-0);
}
.aiditor-ui-property-section > .aiditor-ui-section-head .aiditor-ui-section-arrow {
  color: var(--aiditor-fg-3);
}
.aiditor-ui-property-section > .aiditor-ui-section-head .aiditor-ui-section-actions {
  min-width: 22px;
}
.aiditor-ui-property-section > .aiditor-ui-section-body {
  padding: var(--aiditor-space-1) var(--aiditor-space-1) var(--aiditor-space-2);
  gap: 0;
  background: transparent;
}

.aiditor-ui-property-list {
  display: flex;
  flex-direction: column;
  gap: var(--aiditor-space-1);
  min-width: 0;
}
.aiditor-ui-property-list-items {
  display: flex;
  flex-direction: column;
  gap: var(--aiditor-space-1);
  min-width: 0;
}
.aiditor-ui-property-list-item {
  background: transparent;
}
.aiditor-ui-property-list-item > .aiditor-ui-section-head {
  min-height: 26px;
  height: 26px;
}
.aiditor-ui-property-list-comfortable .aiditor-ui-property-list-item > .aiditor-ui-section-head {
  min-height: 30px;
  height: 30px;
}
.aiditor-ui-property-list-item > .aiditor-ui-section-body {
  padding: var(--aiditor-space-1) 0 var(--aiditor-space-2);
}
.aiditor-ui-property-list-form {
  min-width: 0;
}
.aiditor-ui-property-list-empty {
  padding: var(--aiditor-space-2);
  color: var(--aiditor-fg-3);
  font: var(--aiditor-fs-sm) var(--aiditor-font-ui);
}

/* ── slot wrapper for propertyForm editing ──────────────────────────
   Grid template gives the editor the full 1fr column and the optional reset
   button auto width on the right — no layout shift between fields with/without
   a reset. */
.aiditor-ui-slot {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.aiditor-ui-slot > * { min-width: 0; max-width: 100%; box-sizing: border-box; }
.aiditor-ui-slot > :first-child { width: 100%; }
.aiditor-ui-slot-disabled {
  opacity: .48;
  cursor: not-allowed;
}
.aiditor-ui-slot-reset { grid-column: 2; flex: 0 0 auto; transition: opacity var(--aiditor-dur-fast) var(--aiditor-ease); }

/* ─── Inspector panel ───────────────────────────────────────────── */
.aiditor-inspector {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  min-height: 0;
  color: var(--aiditor-fg-1);
  background: var(--aiditor-bg-1);
}
.aiditor-inspector-head {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--aiditor-space-1);
  padding: var(--aiditor-space-2);
  border-bottom: var(--aiditor-toolbar-border-w) solid var(--aiditor-toolbar-border);
}
.aiditor-inspector-title-line {
  display: flex;
  align-items: center;
  gap: var(--aiditor-space-1);
  min-width: 0;
}
.aiditor-inspector-title {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: var(--aiditor-fs-md) var(--aiditor-font-ui);
  font-weight: 700;
}
.aiditor-inspector-subtitle {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--aiditor-fg-3);
  font: var(--aiditor-fs-sm) var(--aiditor-font-ui);
}
.aiditor-inspector-actions {
  margin-left: auto;
}
.aiditor-inspector-search {
  width: 100%;
}
.aiditor-inspector-search[hidden] {
  display: none;
}
.aiditor-inspector-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 6px var(--aiditor-space-2) var(--aiditor-space-2);
}
.aiditor-inspector-empty {
  color: var(--aiditor-fg-3);
  font: var(--aiditor-fs-sm) var(--aiditor-font-ui);
}

/* ---- style/ui-editor.css ---- */
/* aiditor — UI library: editor specials */

/* ── gradientInput ──────────────────────────────────────────────── */
.aiditor-ui-gradient {
  display: flex;
  flex-direction: column;
  gap: var(--aiditor-space-2);
  width: 100%;
}
.aiditor-ui-gradient-barwrap {
  position: relative;
  width: 100%;
  padding-bottom: 14px; /* room for the handles' pointer tails */
}
.aiditor-ui-gradient-checker {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 24px;
  border-radius: var(--aiditor-r-2);
  background-image:
    linear-gradient(45deg, var(--aiditor-bg-3) 25%, transparent 25%),
    linear-gradient(-45deg, var(--aiditor-bg-3) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--aiditor-bg-3) 75%),
    linear-gradient(-45deg, transparent 75%, var(--aiditor-bg-3) 75%);
  background-size: 10px 10px;
  background-position: 0 0, 0 5px, 5px -5px, -5px 0;
  pointer-events: none;
}
.aiditor-ui-gradient-bar {
  position: relative;
  width: 100%;
  height: 24px;
  border-radius: var(--aiditor-r-2);
  border: 1px solid var(--aiditor-border-input);
  cursor: copy;
  box-shadow: inset 0 0 0 1px var(--aiditor-highlight-subtle);
}
.aiditor-ui-gradient-rail {
  position: absolute;
  left: 0; right: 0;
  top: 24px;
  height: 14px;
}
.aiditor-ui-gradient-stop {
  position: absolute;
  top: 0;
  width: 14px;
  height: 14px;
  transform: translateX(-50%);
  cursor: grab;
  display: block;
  transition: transform var(--aiditor-dur-fast) var(--aiditor-ease),
              filter    var(--aiditor-dur-fast) var(--aiditor-ease);
}
.aiditor-ui-gradient-stop::before {
  /* pointer triangle aiming at the bar */
  content: '';
  position: absolute;
  left: 50%;
  top: -4px;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid var(--aiditor-fg-0);
}
.aiditor-ui-gradient-stop-fill {
  position: absolute;
  left: 50%;
  top: 1px;
  width: 12px;
  height: 12px;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 2px solid var(--aiditor-fg-0);
  box-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.aiditor-ui-gradient-stop:hover { transform: translateX(-50%) translateY(-1px); }
.aiditor-ui-gradient-stop-active::before { border-bottom-color: var(--aiditor-accent); }
.aiditor-ui-gradient-stop-active .aiditor-ui-gradient-stop-fill {
  border-color: var(--aiditor-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--aiditor-accent) 22%, transparent),
              0 1px 2px rgba(0,0,0,.5);
}
.aiditor-ui-gradient-stop-dragging {
  cursor: grabbing;
  filter: brightness(1.1);
}
.aiditor-ui-gradient-editor {
  display: flex;
  align-items: center;
  gap: var(--aiditor-space-2);
}
.aiditor-ui-gradient-editor > .aiditor-ui-color { flex: 1 1 auto; min-width: 0; }
.aiditor-ui-gradient-delete {
  flex: 0 0 auto;
  width: var(--aiditor-size-h-md);
  height: var(--aiditor-size-h-md);
  background: var(--aiditor-bg-2);
  border: 1px solid var(--aiditor-border-input);
  border-radius: var(--aiditor-r-2);
  color: var(--aiditor-fg-2);
  cursor: pointer;
  font: var(--aiditor-fs-md) var(--aiditor-font-ui);
  transition: background var(--aiditor-dur-fast) var(--aiditor-ease),
              color var(--aiditor-dur-fast) var(--aiditor-ease),
              border-color var(--aiditor-dur-fast) var(--aiditor-ease),
              transform var(--aiditor-dur-fast) var(--aiditor-ease);
}
.aiditor-ui-gradient-delete:hover {
  background: color-mix(in srgb, var(--aiditor-error) 18%, var(--aiditor-bg-2));
  border-color: var(--aiditor-error);
  color: var(--aiditor-error);
}
.aiditor-ui-gradient-delete:active { transform: scale(0.94); }

/* ── curveInput ─────────────────────────────────────────────────── */
.aiditor-ui-curve {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1 / 1;
  min-width: 0;
  min-height: 0;
  background: var(--aiditor-bg-2);
  border: 1px solid var(--aiditor-border-input);
  border-radius: var(--aiditor-r-2);
  padding: var(--aiditor-space-1);
  gap: var(--aiditor-space-1);
  box-sizing: border-box;
}
.aiditor-ui-curve-canvas-wrap {
  position: relative;
  flex: 1 1 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 0;
}
.aiditor-ui-curve-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  border-radius: var(--aiditor-r-1);
}

/* ── codeInput ──────────────────────────────────────────────────── */
.aiditor-ui-code {
  display: flex;
  width: 100%;
  background: var(--aiditor-bg-2);
  border: 1px solid var(--aiditor-border-input);
  border-radius: var(--aiditor-r-2);
  position: relative;
  overflow: hidden;
}
.aiditor-ui-code-lang {
  position: absolute;
  top: 4px; right: 8px;
  font: var(--aiditor-fs-xs) var(--aiditor-font-mono);
  color: var(--aiditor-fg-3);
  text-transform: uppercase;
  letter-spacing: .06em;
  z-index: 2;
  pointer-events: none;
}
.aiditor-ui-code-gutter {
  flex-shrink: 0;
  padding: var(--aiditor-space-2) var(--aiditor-space-1);
  background: var(--aiditor-bg-1);
  color: var(--aiditor-fg-3);
  font: var(--aiditor-fs-sm)/var(--aiditor-lh-base) var(--aiditor-font-mono);
  text-align: right;
  min-width: 28px;
  white-space: pre;
  overflow: hidden;
  user-select: none;
  border-right: 1px solid var(--aiditor-border);
}
.aiditor-ui-code-editor {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  display: flex;
}
.aiditor-ui-code-text {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  color: var(--aiditor-fg-0);
  border: 0;
  outline: 0;
  resize: vertical;
  padding: var(--aiditor-space-2);
  font: var(--aiditor-fs-sm)/var(--aiditor-lh-base) var(--aiditor-font-mono);
  white-space: pre;
  overflow-wrap: normal;
  word-break: normal;
  overflow: auto;
  tab-size: 2;
}

/* Highlight overlay — rendered only when opts.highlight is provided. The
 * textarea's text becomes transparent so the colored <pre> layer shows
 * through; the caret and selection remain on the textarea. */
.aiditor-ui-code-hlmode .aiditor-ui-code-text {
  position: relative;
  z-index: 1;
  color: transparent;
  caret-color: var(--aiditor-fg-0);
  background: transparent;
}
.aiditor-ui-code-hlmode .aiditor-ui-code-text::selection {
  background: color-mix(in srgb, var(--aiditor-accent) 35%, transparent);
  color: transparent;
}
.aiditor-ui-code-hl {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: var(--aiditor-space-2);
  font: var(--aiditor-fs-sm)/var(--aiditor-lh-base) var(--aiditor-font-mono);
  color: var(--aiditor-fg-0);
  background: transparent;
  white-space: pre;
  overflow-wrap: normal;
  word-break: normal;
  overflow: hidden;
  pointer-events: none;
  tab-size: 2;
  z-index: 0;
}
.aiditor-ui-code-hl-inner {
  display: block;
  font: inherit;
  color: inherit;
  white-space: pre;
}
/* Token color palette — keyed off existing theme tokens so it follows
 * light/dark mode automatically. Callers wrap tokens with these class names
 * via the tokenize() helper (or any custom highlighter they write). */
.aiditor-hl-k { color: var(--aiditor-accent); font-weight: 500; }     /* keyword */
.aiditor-hl-i { color: var(--aiditor-fg-0); }                          /* ident */
.aiditor-hl-s { color: var(--aiditor-success); }                       /* string */
.aiditor-hl-n { color: var(--aiditor-info); }                          /* number */
.aiditor-hl-c { color: var(--aiditor-fg-3); font-style: italic; }      /* comment */
.aiditor-hl-p { color: var(--aiditor-fg-2); }                          /* punctuation */

/* ── pathInput ──────────────────────────────────────────────────── */
.aiditor-ui-path-browse {
  width: 22px;
  height: 22px;
  background: var(--aiditor-button-bg);
  border: 1px solid var(--aiditor-button-border);
  border-radius: var(--aiditor-r-1);
  color: var(--aiditor-fg-1);
  cursor: pointer;
  font: var(--aiditor-fs-md) var(--aiditor-font-ui);
  padding: 0;
}
.aiditor-ui-path-browse:hover { background: var(--aiditor-button-hover-bg); border-color: var(--aiditor-button-hover-border); color: var(--aiditor-fg-0); }

/* ── fileInput ──────────────────────────────────────────────────── */
.aiditor-ui-fileinput {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 80px;
  background: var(--aiditor-bg-2);
  border: 1px dashed var(--aiditor-border-input);
  border-radius: var(--aiditor-r-3);
  cursor: pointer;
  transition: background var(--aiditor-dur-fast) var(--aiditor-ease),
              border var(--aiditor-dur-fast) var(--aiditor-ease);
}
.aiditor-ui-fileinput:hover { border-color: var(--aiditor-accent-soft); background: var(--aiditor-bg-3); }
.aiditor-ui-fileinput-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--aiditor-space-1);
  padding: var(--aiditor-space-3);
  pointer-events: none;
}
.aiditor-ui-fileinput-icon { font-size: var(--aiditor-size-icon-lg); color: var(--aiditor-fg-2); }
.aiditor-ui-fileinput-text {
  font: var(--aiditor-fs-sm) var(--aiditor-font-ui);
  color: var(--aiditor-fg-1);
  text-align: center;
  word-break: break-all;
}

/* ── ui.assetPicker — path text + preview thumbnail + browse button ───── */
.aiditor-ui-asset-picker {
  display: inline-flex;
  align-items: center;
  gap: var(--aiditor-space-1);
  padding: 2px;
  min-width: 0;
}
.aiditor-ui-asset-picker.is-missing {
  border-color: var(--aiditor-error) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--aiditor-error) 55%, transparent) inset;
}
.aiditor-ui-asset-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px; flex-shrink: 0;
  border-radius: var(--aiditor-r-1, 2px);
  background: repeating-linear-gradient(45deg,
    var(--aiditor-bg-0) 0, var(--aiditor-bg-0) 2px,
    var(--aiditor-bg-2) 2px, var(--aiditor-bg-2) 4px);
  color: var(--aiditor-fg-3);
  cursor: grab;
  overflow: hidden;
}
.aiditor-ui-asset-preview:hover { color: var(--aiditor-accent); }
.aiditor-ui-asset-preview:active { cursor: grabbing; }
.aiditor-ui-asset-preview img { width: 100%; height: 100%; object-fit: cover; }
.aiditor-ui-asset-path {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

/* ── ui.dateInput — native date field, framed like ui.input ──────────── */
.aiditor-ui-date-input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter: invert(.5);
  opacity: .75;
}
.aiditor-ui-date-input::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* ── ui.anchorPicker — anchor preset grid + offset fields ─────────── */
.aiditor-ui-anchor-picker {
  display: flex; flex-direction: column;
  gap: var(--aiditor-space-2);
}
.aiditor-ui-anchor-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  padding: 2px;
  background: var(--aiditor-bg-2);
  border: 1px solid var(--aiditor-border-input);
  border-radius: var(--aiditor-r-2);
}
.aiditor-ui-anchor-cell {
  appearance: none;
  background: var(--aiditor-bg-1);
  border: 1px solid transparent;
  border-radius: var(--aiditor-r-1);
  padding: 0;
  aspect-ratio: 1;
  cursor: pointer;
  transition: background var(--aiditor-dur-fast), border-color var(--aiditor-dur-fast);
}
.aiditor-ui-anchor-cell:hover { background: var(--aiditor-bg-3); }
.aiditor-ui-anchor-cell.is-active {
  background: var(--aiditor-selected);
  border-color: var(--aiditor-accent);
}
.aiditor-ui-anchor-cell.is-active:hover {
  background: var(--aiditor-selected-hover);
  border-color: var(--aiditor-accent);
}
.aiditor-ui-anchor-glyph { width: 100%; height: 100%; display: block; }
.aiditor-ui-anchor-glyph-frame {
  fill: none; stroke: var(--aiditor-fg-3);
  stroke-width: 0.5; stroke-dasharray: 1.5 1.5;
}
.aiditor-ui-anchor-glyph-span {
  fill: color-mix(in srgb, var(--aiditor-accent) 22%, transparent);
}
.aiditor-ui-anchor-glyph-mark { fill: var(--aiditor-accent); }
.aiditor-ui-anchor-cell.is-active .aiditor-ui-anchor-glyph-frame { stroke: var(--aiditor-accent); }

.aiditor-ui-anchor-offsets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--aiditor-space-1) var(--aiditor-space-2);
}
.aiditor-ui-anchor-offset {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: var(--aiditor-space-1);
}
.aiditor-ui-anchor-offset-label {
  font: var(--aiditor-fs-sm) var(--aiditor-font-ui);
  color: var(--aiditor-fg-2);
}
.aiditor-ui-anchor-offset-input {
  width: 100%; min-width: 0;
  height: var(--aiditor-size-h-md);
  padding: 0 var(--aiditor-space-1);
  background: var(--aiditor-bg-2);
  border: 1px solid var(--aiditor-border);
  border-radius: var(--aiditor-r-1);
  color: var(--aiditor-fg-0);
  font: var(--aiditor-fs-sm) var(--aiditor-font-mono);
  box-sizing: border-box;
}
.aiditor-ui-anchor-offset-input:focus {
  outline: none;
  border-color: var(--aiditor-accent);
}

/* ─── ui.richPromptInput — inline atom prompt editor ───────────────────── */
.aiditor-richprompt {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
}

.aiditor-richprompt-editor {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 62px;
  padding: 15px;
  color: var(--aiditor-fg-0);
  font: var(--aiditor-fs-md)/var(--aiditor-lh-base) var(--aiditor-font-ui);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow: auto;
  outline: none;
  caret-color: var(--aiditor-accent);
  box-sizing: border-box;
}

.aiditor-richprompt-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--aiditor-fg-3);
  pointer-events: none;
}

.aiditor-richprompt-token {
  display: inline-flex;
  align-items: center;
  max-width: 220px;
  height: 21px;
  line-height: 19px;
  margin: 0 2px;
  padding: 0 6px;
  gap: 4px;
  vertical-align: middle;
  border: 1px solid color-mix(in srgb, var(--aiditor-accent) 34%, var(--aiditor-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--aiditor-accent) 12%, var(--aiditor-bg-2));
  color: var(--aiditor-fg-0);
  font: var(--aiditor-fs-xs) var(--aiditor-font-ui);
  cursor: default;
}

.aiditor-richprompt-token:hover {
  border-color: color-mix(in srgb, var(--aiditor-accent) 58%, var(--aiditor-border));
  background: color-mix(in srgb, var(--aiditor-accent) 18%, var(--aiditor-bg-2));
}

.aiditor-richprompt-token-thumb {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  object-fit: cover;
  background: var(--aiditor-bg-0);
  box-shadow: inset 0 0 0 1px var(--aiditor-border);
}

.aiditor-richprompt-token-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aiditor-richprompt-token-remove {
  flex: 0 0 auto;
  color: var(--aiditor-fg-3);
  font-weight: 700;
}

.aiditor-richprompt-caret {
  display: inline-block;
  width: 0;
  min-width: 0;
  overflow: hidden;
  color: transparent;
  user-select: none;
}

/* ---- style/ui-container.css ---- */
/* aiditor — UI library: containers */

/* ── section ────────────────────────────────────────────────────── */
.aiditor-ui-section {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--aiditor-border);
  border-radius: var(--aiditor-r-2);
  overflow: hidden;
  background: var(--aiditor-view-bg);
}
.aiditor-ui-section-head {
  display: flex;
  align-items: center;
  flex: 0 0 var(--aiditor-size-h-md);
  gap: var(--aiditor-space-1);
  width: 100%;
  height: var(--aiditor-size-h-md);
  min-height: var(--aiditor-size-h-md);
  padding: 0 var(--aiditor-space-2);
  border: 0;
  box-sizing: border-box;
  background: var(--aiditor-bg-1);
}
.aiditor-ui-section-toggle {
  display: inline-flex;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  gap: var(--aiditor-space-1);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--aiditor-fg-0);
  font: 600 var(--aiditor-fs-sm) var(--aiditor-font-ui);
  letter-spacing: 0;
  cursor: pointer;
  text-align: left;
}
.aiditor-ui-section-head:hover,
.aiditor-ui-section-toggle:hover {
  background: color-mix(in srgb, var(--aiditor-bg-1) 82%, var(--aiditor-hover));
}
.aiditor-ui-section-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--aiditor-accent) 32%, transparent);
}
.aiditor-ui-section-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--aiditor-fg-2);
  line-height: 1;
  transition: transform var(--aiditor-dur-1) var(--aiditor-ease-standard);
}
.aiditor-ui-section-leading,
.aiditor-ui-section-trailing,
.aiditor-ui-section-actions {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
}
.aiditor-ui-section-actions {
  gap: var(--aiditor-space-1);
  max-width: 100%;
  justify-content: flex-end;
}
.aiditor-ui-section-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aiditor-ui-section-meta {
  flex: 0 0 auto;
  color: var(--aiditor-fg-3);
  font: var(--aiditor-fs-xs) var(--aiditor-font-mono);
}
.aiditor-ui-section-body {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0;
  padding: var(--aiditor-space-2);
  gap: var(--aiditor-space-1);
  background: var(--aiditor-view-bg);
}
.aiditor-ui-section-collapsed .aiditor-ui-section-body { display: none; }

/* ── propRow ────────────────────────────────────────────────────── */
.aiditor-ui-prop-row {
  display: grid;
  grid-template-columns: minmax(0, 80px) minmax(0, 1fr);
  align-items: center;
  gap: var(--aiditor-space-2);
  min-width: 0;
  min-height: var(--aiditor-size-h-md);
}
.aiditor-ui-prop-label {
  font: var(--aiditor-fs-sm) var(--aiditor-font-ui);
  color: var(--aiditor-fg-2);
  text-align: right;
  user-select: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* `min-width: 0` is what lets the flex child shrink past its intrinsic
   content width. `overflow: hidden` would additionally clip — and it bites
   absolutely-positioned control parts that legitimately extend outside the
   flow (slider thumb at value 0/1, color-picker popovers, etc). Leave the
   shrink semantics, drop the clip. */
.aiditor-ui-prop-control { display: flex; min-width: 0; }
.aiditor-ui-prop-control > * { flex: 1 1 auto; min-width: 0; max-width: 100%; }

/* ── card ───────────────────────────────────────────────────────── */
.aiditor-ui-card {
  background: var(--aiditor-bg-1);
  border: 1px solid var(--aiditor-border);
  border-radius: var(--aiditor-r-3);
  display: flex;
  flex-direction: column;
}
.aiditor-ui-card-head {
  padding: var(--aiditor-space-2) var(--aiditor-space-3);
  font: 600 var(--aiditor-fs-sm) var(--aiditor-font-ui);
  color: var(--aiditor-fg-0);
  border-bottom: 1px solid var(--aiditor-border);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.aiditor-ui-card-body { display: flex; flex-direction: column; gap: var(--aiditor-space-2); }
.aiditor-ui-card-padded .aiditor-ui-card-body { padding: var(--aiditor-space-3); }

/* ── scene / UI tree node wrapper ─────────────────────────────────
   Every renderUITree node is a real editor node. The component body fills
   the node; arbitrary children default to an absolute overlay layer. */
.aiditor-ui-node {
  position: relative;
  display: inline-block;
  min-width: 0;
  box-sizing: border-box;
}
.aiditor-ui-node-body {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.aiditor-ui-node-body > :first-child {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.aiditor-ui-node-children {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.aiditor-ui-node-children > .aiditor-ui-abs-slot {
  position: absolute;
  pointer-events: auto;
}

/* ── scrollArea ─────────────────────────────────────────────────── */
/* view */
div.aiditor-ui-view {
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  background: var(--aiditor-view-bg);
  border-radius: var(--aiditor-view-radius);
}
.aiditor-ui-view-padded { padding: var(--aiditor-space-2); }
.aiditor-ui-view-scroll-auto,
.aiditor-ui-view-scroll-y {
  overflow-y: auto;
  overflow-x: hidden;
}
.aiditor-ui-view-scroll-x {
  overflow-x: auto;
  overflow-y: hidden;
}
.aiditor-ui-view-scroll-both { overflow: auto; }
.aiditor-ui-view-scroll-hidden { overflow: hidden; }
.aiditor-ui-view-scroll-none { overflow: visible; }

.aiditor-ui-scrollarea {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--aiditor-bg-4) transparent;
}
.aiditor-ui-scrollarea-both { overflow-x: auto; }
.aiditor-ui-scrollarea::-webkit-scrollbar { width: 8px; height: 8px; }
.aiditor-ui-scrollarea::-webkit-scrollbar-track { background: transparent; }
.aiditor-ui-scrollarea::-webkit-scrollbar-thumb {
  background: var(--aiditor-bg-4);
  border-radius: var(--aiditor-r-pill);
}
.aiditor-ui-scrollarea::-webkit-scrollbar-thumb:hover { background: var(--aiditor-fg-3); }
/* ── absolute container ─────────────────────────────────────────
   The container clips children by default — this is the runtime
   behavior cards depend on. Editor surfaces (e.g. .gde-cs-canvas)
   override via specificity to let resize handles escape the frame. */
.aiditor-ui-absolute { overflow: hidden; }
.aiditor-ui-absolute > .aiditor-ui-abs-slot { position: absolute; }
/* The slot's geometry is fully expressed via left/top/right/bottom (see
   _layout-rect.js), so the wrapped component fills it edge-to-edge. The slot
   contract: the rendered component is always the first child; any later
   children are editor overlays (resize handles, drag affordances) that
   need their own positioning and must not be auto-sized. */
.aiditor-ui-abs-slot > :first-child { width: 100%; height: 100%; box-sizing: border-box; }

/* ---- style/ui-data.css ---- */
/* aiditor — UI library: data display */

/* ── list (virtualized) ─────────────────────────────────────────── */
.aiditor-ui-list {
  position: relative;
  height: 240px;
  min-height: 0;
  overflow-y: auto;
  background: var(--aiditor-view-bg);
  border: 1px solid var(--aiditor-border);
  border-radius: var(--aiditor-view-radius);
}
.aiditor-ui-list-spacer { position: relative; width: 100%; }
.aiditor-ui-list-window {
  position: absolute;
  left: 0; right: 0; top: 0;
  will-change: transform;
}
.aiditor-ui-list-row {
  display: flex;
  align-items: center;
  padding: 0 var(--aiditor-space-2);
  font: var(--aiditor-fs-sm) var(--aiditor-font-ui);
  color: var(--aiditor-fg-1);
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--aiditor-border);
  box-sizing: border-box;
}
.aiditor-ui-list-row:hover { background: var(--aiditor-hover); color: var(--aiditor-fg-0); }
.aiditor-ui-list-row-active {
  background: var(--aiditor-selected);
  color: var(--aiditor-selected-fg);
}
.aiditor-ui-list-row-active:hover {
  background: var(--aiditor-selected-hover);
  color: var(--aiditor-selected-fg);
}

/* ── tree ───────────────────────────────────────────────────────── */
.aiditor-ui-tree {
  position: relative;
  height: 240px;
  min-height: 0;
  overflow-y: auto;
  background: var(--aiditor-view-bg);
  border: 1px solid var(--aiditor-border);
  border-radius: var(--aiditor-view-radius);
  outline: none;
}
/* Container focus ring — keyboard only. :focus alone would light up on
   every row click (since the tree is tabIndex=0 to receive key events),
   which reads as a stray outer selection. :focus-visible suppresses that
   path while preserving keyboard accessibility. */
.aiditor-ui-tree:focus-visible { box-shadow: none; }
.aiditor-ui-tree-spacer { position: relative; width: 100%; }
.aiditor-ui-tree-window {
  position: absolute;
  left: 0; right: 0; top: 0;
  will-change: transform;
}
.aiditor-ui-tree-row {
  display: flex;
  align-items: center;
  gap: 3px;
  width: 100%;
  padding-right: 4px;
  font: var(--aiditor-fs-sm) var(--aiditor-font-ui);
  color: var(--aiditor-fg-1);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  box-sizing: border-box;
  position: relative;
}
.aiditor-ui-tree-row:hover { background: var(--aiditor-hover); color: var(--aiditor-fg-0); }
.aiditor-ui-tree-row-active { background: var(--aiditor-selected); color: var(--aiditor-selected-fg); }
.aiditor-ui-tree-row-active:hover { background: var(--aiditor-selected-hover); color: var(--aiditor-selected-fg); }
.aiditor-ui-tree-row-focused { outline: 1px solid var(--aiditor-accent); outline-offset: -1px; }
.aiditor-ui-tree-row-disabled { opacity: 0.45; cursor: default; }
.aiditor-ui-tree-row-dragging { opacity: 0.4; }
.aiditor-ui-tree-arrow {
  display: inline-flex;
  align-items: center; justify-content: center;
  flex: 0 0 auto;
  width: 16px; height: 16px;
  color: var(--aiditor-fg-2);
  font-size: var(--aiditor-fs-sm);
  line-height: 1;
  cursor: pointer;
  border-radius: var(--aiditor-r-1, 2px);
}
.aiditor-ui-tree-arrow:hover { color: var(--aiditor-fg-0); background: var(--aiditor-bg-3); }
.aiditor-ui-tree-leading,
.aiditor-ui-tree-icon {
  display: inline-flex; align-items: center;
  flex: 0 0 auto;
  color: var(--aiditor-fg-2);
}
.aiditor-ui-tree-label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aiditor-ui-tree-trailing {
  display: inline-flex; align-items: center;
  flex: 0 0 auto;
  color: var(--aiditor-fg-3);
}
.aiditor-ui-tree-actions {
  display: inline-flex; align-items: center; gap: 2px;
  flex: 0 0 auto;
  margin-left: auto;
  transition: opacity var(--aiditor-dur-fast, 80ms);
}
.aiditor-ui-tree-actions[data-visibility="hover"] { opacity: 0; }
.aiditor-ui-tree-row:hover .aiditor-ui-tree-actions[data-visibility="hover"] { opacity: 1; }
.aiditor-ui-tree-actions[data-visibility="selected"] { opacity: 0; }
.aiditor-ui-tree-row-active .aiditor-ui-tree-actions[data-visibility="selected"] { opacity: 1; }
.aiditor-ui-tree-match {
  background: color-mix(in srgb, var(--aiditor-accent) 30%, transparent);
  color: var(--aiditor-fg-0);
  border-radius: var(--aiditor-r-1, 2px);
  padding: 0 1px;
}
.aiditor-ui-tree-row-matched { /* subtle tint when in highlight mode */ }

/* DnD indicator + ghost — live in a fixed portal, document-relative */
.aiditor-ui-tree-dnd-portal { font: var(--aiditor-fs-sm) var(--aiditor-font-ui); }
.aiditor-ui-tree-ghost-wrap {
  position: fixed; left: 0; top: 0;
  transform: translate(0, 0);
  pointer-events: none;
  will-change: transform;
  opacity: 0.9;
}
.aiditor-ui-tree-ghost {
  background: var(--aiditor-bg-raised, var(--aiditor-bg-2));
  color: var(--aiditor-fg-0);
  border: 1px solid var(--aiditor-accent);
  border-radius: var(--aiditor-view-radius);
  padding: 4px 10px;
  box-shadow: var(--aiditor-shadow-lg, 0 8px 24px rgba(0,0,0,0.4));
  font-weight: 500;
}
.aiditor-ui-tree-drop-indicator {
  position: fixed;
  pointer-events: none;
  background: var(--aiditor-accent);
  border-radius: 1px;
  box-shadow: 0 0 4px var(--aiditor-accent);
  transition: opacity var(--aiditor-dur-fast, 80ms);
}
.aiditor-ui-tree-drop-indicator.aiditor-ui-tree-drop-inside {
  background: color-mix(in srgb, var(--aiditor-accent) 12%, transparent);
  border: 2px solid var(--aiditor-accent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--aiditor-accent) 45%, transparent),
    0 0 10px color-mix(in srgb, var(--aiditor-accent) 30%, transparent);
  border-radius: var(--aiditor-r-2);
}
.aiditor-ui-tree-drop-indicator.aiditor-ui-tree-drop-reject {
  background: var(--aiditor-error);
  box-shadow: 0 0 4px var(--aiditor-error);
}
.aiditor-ui-tree-drop-indicator.aiditor-ui-tree-drop-inside.aiditor-ui-tree-drop-reject {
  background: color-mix(in srgb, var(--aiditor-error) 10%, transparent);
  border-color: var(--aiditor-error);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--aiditor-error) 30%, transparent);
}

/* ── table ──────────────────────────────────────────────────────── */
.aiditor-ui-table {
  display: flex;
  flex-direction: column;
  background: var(--aiditor-view-bg);
  border: 1px solid var(--aiditor-border);
  border-radius: var(--aiditor-r-2);
  overflow: hidden;
}
.aiditor-ui-table-head {
  display: flex;
  background: var(--aiditor-bg-2);
  border-bottom: 1px solid var(--aiditor-border-strong);
  font: 600 var(--aiditor-fs-xs) var(--aiditor-font-ui);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--aiditor-fg-2);
  flex-shrink: 0;
}
.aiditor-ui-table-th {
  padding: var(--aiditor-space-1) var(--aiditor-space-2);
  border-right: 1px solid var(--aiditor-border);
  box-sizing: border-box;
}
.aiditor-ui-table-th:last-child { border-right: 0; }
.aiditor-ui-table-body {
  border: 0;
  border-radius: 0;
  flex: 1 1 auto;
}
.aiditor-ui-table-row {
  display: flex;
  width: 100%;
  align-items: center;
  font: var(--aiditor-fs-sm) var(--aiditor-font-ui);
  color: var(--aiditor-fg-1);
}
.aiditor-ui-table-td {
  padding: 0 var(--aiditor-space-2);
  border-right: 1px solid var(--aiditor-border);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
}
.aiditor-ui-table-td:last-child { border-right: 0; }

/* ── gridSelection ─────────────────────────────────────────────── */
.aiditor-ui-grid-marquee {
  position: absolute;
  z-index: 5;
  border: 1px solid var(--aiditor-accent);
  background: color-mix(in srgb, var(--aiditor-accent) 14%, transparent);
  pointer-events: none;
  box-sizing: border-box;
}

.aiditor-ui-grid-drag-ghost {
  position: fixed;
  z-index: var(--aiditor-z-popover);
  transform: translate(10px, 10px);
  min-width: 52px;
  max-width: 180px;
  padding: 4px 8px;
  border: 1px solid var(--aiditor-accent);
  border-radius: var(--aiditor-r-2);
  background: var(--aiditor-bg-raised);
  color: var(--aiditor-fg-1);
  box-shadow: var(--aiditor-shadow-3);
  font: var(--aiditor-fs-sm) var(--aiditor-font-ui);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.aiditor-ui-grid-drop-indicator {
  position: absolute;
  z-index: 6;
  display: none;
  width: 2px;
  border-radius: var(--aiditor-r-pill);
  background: var(--aiditor-accent);
  box-shadow: 0 0 8px var(--aiditor-accent);
  pointer-events: none;
}

/* ── breadcrumbs ────────────────────────────────────────────────── */
.aiditor-ui-crumbs {
  display: flex;
  align-items: center;
  gap: var(--aiditor-space-1);
  font: var(--aiditor-fs-sm) var(--aiditor-font-ui);
  color: var(--aiditor-fg-2);
}
.aiditor-ui-crumbs-link {
  background: transparent;
  border: 0;
  color: var(--aiditor-fg-1);
  font: inherit;
  padding: 0 var(--aiditor-space-1);
  cursor: pointer;
  border-radius: var(--aiditor-r-1);
}
.aiditor-ui-crumbs-link:hover { background: var(--aiditor-hover); color: var(--aiditor-fg-0); }
.aiditor-ui-crumbs-static { padding: 0 var(--aiditor-space-1); }
.aiditor-ui-crumbs-last { color: var(--aiditor-fg-0); font-weight: 600; }
.aiditor-ui-crumbs-sep { color: var(--aiditor-fg-3); }

/* ── progressBar (linear + circle, sm/md/lg, default/success/warn/error) ── */
.aiditor-ui-progress {
  position: relative;
  min-width: 0;
  color: var(--aiditor-accent);
  box-sizing: border-box;
}
.aiditor-ui-progress-kind-success { color: var(--aiditor-success); }
.aiditor-ui-progress-kind-warn    { color: var(--aiditor-warn); }
.aiditor-ui-progress-kind-error   { color: var(--aiditor-error); }

/* Linear */
.aiditor-ui-progress-linear {
  width: 100%;
  background: var(--aiditor-bg-2);
  border-radius: var(--aiditor-r-pill);
  overflow: hidden;
}
.aiditor-ui-progress-linear.aiditor-ui-progress-sm { height: 4px; }
.aiditor-ui-progress-linear.aiditor-ui-progress-md { height: 6px; }
.aiditor-ui-progress-linear.aiditor-ui-progress-lg { height: 10px; }
.aiditor-ui-progress-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: currentColor;
  transition: width var(--aiditor-dur-med) var(--aiditor-ease);
}
.aiditor-ui-progress-linear.aiditor-ui-progress-ind .aiditor-ui-progress-fill {
  width: 30% !important;
  animation: aiditor-progress-ind 1.4s ease-in-out infinite;
}
@keyframes aiditor-progress-ind {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

/* Circle */
.aiditor-ui-progress:not(.aiditor-ui-progress-linear) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
}
.aiditor-ui-progress:not(.aiditor-ui-progress-linear).aiditor-ui-progress-sm { width: 28px; height: 28px; }
.aiditor-ui-progress:not(.aiditor-ui-progress-linear).aiditor-ui-progress-md { width: 40px; height: 40px; }
.aiditor-ui-progress:not(.aiditor-ui-progress-linear).aiditor-ui-progress-lg { width: 64px; height: 64px; }
.aiditor-ui-progress-svg {
  width: 100%; height: 100%;
  transform: rotate(-90deg);                    /* 0% starts at 12 o'clock */
}
.aiditor-ui-progress-track-arc {
  stroke: var(--aiditor-bg-2);
  stroke-width: 3;
}
.aiditor-ui-progress-fill-arc {
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset var(--aiditor-dur-med) var(--aiditor-ease);
}
.aiditor-ui-progress:not(.aiditor-ui-progress-linear).aiditor-ui-progress-ind .aiditor-ui-progress-svg {
  animation: aiditor-progress-spin 1s linear infinite;
}
.aiditor-ui-progress:not(.aiditor-ui-progress-linear).aiditor-ui-progress-ind .aiditor-ui-progress-fill-arc {
  stroke-dasharray: 25 75 !important;
}
@keyframes aiditor-progress-spin { to { transform: rotate(270deg); } }

@media (prefers-reduced-motion: reduce) {
  .aiditor-ui-progress-ind .aiditor-ui-progress-fill { animation: none; width: 100% !important; }
  .aiditor-ui-progress-ind .aiditor-ui-progress-svg  { animation: none; }
}

.aiditor-ui-progress-label {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  max-width: calc(100% - 8px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: var(--aiditor-fs-xs) var(--aiditor-font-ui);
  color: var(--aiditor-fg-0);
  pointer-events: none;
}

/* ── log panel ─ */
.aiditor-ui-errlog {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: var(--aiditor-bg-1);
}
.aiditor-ui-errlog-bar {
  display: flex;
  gap: var(--aiditor-space-2);
  align-items: center;
  padding: var(--aiditor-panel-toolbar-py) var(--aiditor-space-2);
  border-bottom: var(--aiditor-toolbar-border-w) solid var(--aiditor-toolbar-border);
  background: var(--aiditor-toolbar-bg);
  flex: 0 0 auto;
  min-height: var(--aiditor-panel-toolbar-h);
  min-width: 0;
  box-sizing: border-box;
}
.aiditor-ui-errlog-bar .aiditor-ui-select { flex: 0 0 96px; width: 96px; min-width: 0; }
.aiditor-ui-errlog-bar .aiditor-ui-search-field { flex: 1 1 160px; min-width: 92px; max-width: 280px; }
.aiditor-ui-errlog-bar .aiditor-ui-select,
.aiditor-ui-errlog-bar .aiditor-ui-field {
  height: calc(var(--aiditor-panel-toolbar-h) - var(--aiditor-panel-toolbar-py) - var(--aiditor-panel-toolbar-py));
  font-size: var(--aiditor-fs-sm);
}
.aiditor-ui-errlog-bar .aiditor-ui-btn { flex: 0 0 auto; }
.aiditor-ui-errlog-spacer { flex: 1 1 auto; }
.aiditor-ui-errlog-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 2px;
  user-select: none;
}
.aiditor-ui-errlog-empty {
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 96px;
  color: var(--aiditor-fg-2);
  font: var(--aiditor-fs-sm) var(--aiditor-font-ui);
  font-style: italic;
}
.aiditor-ui-errlog-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  margin-bottom: 1px;
  border: 1px solid transparent;
  border-radius: var(--aiditor-r-2);
  font: var(--aiditor-fs-sm) var(--aiditor-font-ui);
  background: var(--aiditor-bg-2);
  overflow: hidden;
  cursor: pointer;
  transition:
    background var(--aiditor-dur-fast) var(--aiditor-ease),
    border-color var(--aiditor-dur-fast) var(--aiditor-ease);
}
.aiditor-ui-errlog-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--aiditor-fg-3);
}
.aiditor-ui-errlog-row:hover {
  background: var(--aiditor-hover);
  border-color: var(--aiditor-border-hover);
}
.aiditor-ui-errlog-row:focus-visible {
  outline: 2px solid var(--aiditor-accent);
  outline-offset: -2px;
}
.aiditor-ui-errlog-row-error {
  background: color-mix(in srgb, var(--aiditor-error) 7%, var(--aiditor-bg-2));
}
.aiditor-ui-errlog-row-error::before {
  background: var(--aiditor-error);
}
.aiditor-ui-errlog-row-error:hover {
  background: color-mix(in srgb, var(--aiditor-error) 18%, var(--aiditor-bg-2));
}
.aiditor-ui-errlog-row-warn {
  background: color-mix(in srgb, var(--aiditor-warn) 7%, var(--aiditor-bg-2));
}
.aiditor-ui-errlog-row-warn::before {
  background: var(--aiditor-warn);
}
.aiditor-ui-errlog-row-info::before {
  background: var(--aiditor-accent);
}
.aiditor-ui-errlog-row-debug::before {
  background: var(--aiditor-fg-3);
}
.aiditor-ui-errlog-row-selected {
  background: var(--aiditor-selected);
  border-color: var(--aiditor-selected-border);
}
.aiditor-ui-errlog-row-selected:hover {
  background: var(--aiditor-selected-hover);
  border-color: var(--aiditor-accent);
}
.aiditor-ui-errlog-main {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) minmax(132px, max-content);
  gap: var(--aiditor-space-2);
  align-items: center;
  min-width: 0;
  min-height: 22px;
  padding: 1px var(--aiditor-space-2) 1px 9px;
  background: transparent;
  color: inherit;
  text-align: left;
}
.aiditor-ui-errlog-level {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: var(--aiditor-r-1);
  background: var(--aiditor-bg-3);
  color: var(--aiditor-fg-1);
  font: 600 var(--aiditor-fs-xs) var(--aiditor-font-mono);
  text-transform: uppercase;
  cursor: pointer;
}
.aiditor-ui-errlog-level:hover {
  filter: brightness(1.12);
}
.aiditor-ui-errlog-level-error { background: color-mix(in srgb, var(--aiditor-error) 18%, var(--aiditor-bg-3)); color: var(--aiditor-error); }
.aiditor-ui-errlog-level-warn  { background: color-mix(in srgb, var(--aiditor-warn) 18%, var(--aiditor-bg-3)); color: var(--aiditor-warn); }
.aiditor-ui-errlog-level-info  { background: color-mix(in srgb, var(--aiditor-accent) 18%, var(--aiditor-bg-3)); color: var(--aiditor-accent); }
.aiditor-ui-errlog-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--aiditor-fg-3);
  font: var(--aiditor-fs-xs) var(--aiditor-font-mono);
  text-align: right;
}
.aiditor-ui-errlog-msg {
  min-width: 0;
  color: var(--aiditor-fg-0);
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aiditor-ui-errlog-dismiss {
  align-self: center;
  margin-right: 2px;
  opacity: .45;
}
.aiditor-ui-errlog-dismiss.aiditor-ui-icon-btn-sm {
  width: 18px;
  height: 18px;
}
.aiditor-ui-errlog-row:hover .aiditor-ui-errlog-dismiss,
.aiditor-ui-errlog-row-open .aiditor-ui-errlog-dismiss {
  opacity: 1;
}
.aiditor-ui-errlog-details {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 var(--aiditor-space-2) var(--aiditor-space-2) 28px;
  color: var(--aiditor-fg-2);
  border-top: 1px solid color-mix(in srgb, var(--aiditor-border) 70%, transparent);
}
.aiditor-ui-errlog-detail {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: var(--aiditor-space-2);
  font: var(--aiditor-fs-xs) var(--aiditor-font-mono);
}
.aiditor-ui-errlog-detail-label {
  color: var(--aiditor-fg-3);
}
.aiditor-ui-errlog-detail-value {
  min-width: 0;
  overflow-wrap: anywhere;
  user-select: text;
}
.aiditor-ui-errlog-stack {
  margin: 2px 0 0;
  max-height: 220px;
  overflow: auto;
  padding: var(--aiditor-space-2);
  border: 1px solid var(--aiditor-border-input);
  border-radius: var(--aiditor-r-2);
  background: var(--aiditor-bg-1);
  color: var(--aiditor-fg-1);
  font: var(--aiditor-fs-xs) var(--aiditor-font-mono);
  white-space: pre-wrap;
}

/* ── history panel ─ */
.aiditor-history-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: var(--aiditor-bg-1);
}
.aiditor-history-toolbar {
  display: flex;
  align-items: center;
  gap: var(--aiditor-space-1);
  padding: var(--aiditor-panel-toolbar-py) var(--aiditor-space-2);
  min-height: var(--aiditor-panel-toolbar-h);
  box-sizing: border-box;
  border-bottom: var(--aiditor-toolbar-border-w) solid var(--aiditor-toolbar-border);
  background: var(--aiditor-toolbar-bg);
}
.aiditor-history-status {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--aiditor-fg-2);
  font: var(--aiditor-fs-xs) var(--aiditor-font-ui);
  text-align: right;
}
.aiditor-history-error {
  flex: 0 0 auto;
  margin: var(--aiditor-space-2);
  padding: var(--aiditor-space-2);
  border: 1px solid color-mix(in srgb, var(--aiditor-error) 44%, var(--aiditor-border));
  border-radius: var(--aiditor-r-2);
  background: color-mix(in srgb, var(--aiditor-error) 10%, var(--aiditor-bg-2));
  color: var(--aiditor-error);
  font: var(--aiditor-fs-xs) var(--aiditor-font-mono);
  overflow-wrap: anywhere;
}
.aiditor-history-error[hidden] { display: none; }
.aiditor-history-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 3px;
}
.aiditor-history-empty {
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 96px;
  color: var(--aiditor-fg-2);
  font: var(--aiditor-fs-sm) var(--aiditor-font-ui);
  font-style: italic;
}
.aiditor-history-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(50px, auto) minmax(0, 1fr);
  column-gap: var(--aiditor-space-2);
  align-items: center;
  width: 100%;
  min-height: 28px;
  margin-bottom: 2px;
  padding: 0 var(--aiditor-space-2) 0 var(--aiditor-space-3);
  border: 1px solid transparent;
  border-radius: var(--aiditor-r-2);
  background: var(--aiditor-bg-2);
  color: var(--aiditor-fg-0);
  text-align: left;
  cursor: pointer;
  font: var(--aiditor-fs-sm) var(--aiditor-font-ui);
  box-sizing: border-box;
}
.aiditor-history-row:hover:not(:disabled) {
  background: var(--aiditor-hover);
  border-color: var(--aiditor-border-hover);
}
.aiditor-history-row-current {
  background: var(--aiditor-selected);
  border-color: var(--aiditor-selected-border);
}
.aiditor-history-row-current:hover:not(:disabled) {
  background: var(--aiditor-selected-hover);
  border-color: var(--aiditor-accent);
}
.aiditor-history-row-saved:not(.aiditor-history-row-current)::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: var(--aiditor-success);
}
.aiditor-history-row:disabled {
  cursor: default;
}
.aiditor-history-marker {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--aiditor-fg-3);
  font: 600 var(--aiditor-fs-xs) var(--aiditor-font-mono);
  text-transform: uppercase;
}
.aiditor-history-row-current .aiditor-history-marker {
  color: var(--aiditor-accent);
}
.aiditor-history-row-saved .aiditor-history-marker {
  color: var(--aiditor-success);
}
.aiditor-history-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(72px, max-content);
  align-items: baseline;
  column-gap: var(--aiditor-space-3);
  min-width: 0;
}
.aiditor-history-label,
.aiditor-history-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aiditor-history-label {
  color: var(--aiditor-fg-0);
}
.aiditor-history-meta {
  color: var(--aiditor-fg-3);
  font: var(--aiditor-fs-xs) var(--aiditor-font-mono);
  text-align: right;
}

/* ── panel list ─ */
.aiditor-panel-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 3px;
  background: var(--aiditor-bg-1);
  box-sizing: border-box;
}
.aiditor-panel-list-toolbar {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
}
.aiditor-panel-list-toolbar .aiditor-ui-field {
  width: 100%;
}
.aiditor-panel-list > .aiditor-ui-list {
  flex: 1 1 auto;
  min-height: 0;
}
.aiditor-panel-list-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: var(--aiditor-space-2);
  width: 100%;
  min-height: 100%;
  padding: 0 5px;
  box-sizing: border-box;
  color: inherit;
  text-align: left;
  cursor: grab;
}
.aiditor-panel-list-row:active {
  cursor: grabbing;
}
.aiditor-panel-list-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.aiditor-panel-list-name,
.aiditor-panel-list-id {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aiditor-panel-list-name {
  color: var(--aiditor-fg-0);
  font: var(--aiditor-fs-sm) var(--aiditor-font-ui);
}
.aiditor-panel-list-id {
  color: var(--aiditor-fg-3);
  font: var(--aiditor-fs-xs) var(--aiditor-font-mono);
}

/* ── asset browser ───────────────────────────────────── */
.aiditor-ui-asset-browser {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  background: var(--aiditor-bg-1);
}
.aiditor-ui-assetbar {
  display: flex;
  align-items: center;
  gap: var(--aiditor-space-2);
  padding: var(--aiditor-space-1) var(--aiditor-space-2);
  border-bottom: 1px solid var(--aiditor-border);
  background: var(--aiditor-bg-2);
}
.aiditor-ui-assetbar .aiditor-ui-search-field {
  flex: 1 1 220px;
  margin: 0;
}
.aiditor-ui-assetbar .aiditor-ui-input {
  width: auto;
  max-width: none;
  background: transparent;
  border: 0;
  padding: 0;
}
.aiditor-ui-assetcrumb {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 2px;
  height: var(--aiditor-size-h-md);
  min-width: 0;
  max-width: 42%;
  padding: 0 var(--aiditor-space-2);
  border: 1px solid var(--aiditor-border);
  border-radius: var(--aiditor-r-2);
  background: var(--aiditor-bg-1);
  overflow: hidden;
}
.aiditor-ui-assetcrumb button {
  flex: 0 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--aiditor-fg-1);
  font: var(--aiditor-fs-sm) var(--aiditor-font-ui);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.aiditor-ui-assetcrumb button:hover { color: var(--aiditor-accent); }
.aiditor-ui-assetcrumb-sep { color: var(--aiditor-fg-3); }
.aiditor-ui-assetgrid {
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
  position: relative;
  display: grid;
  justify-content: start;
  align-content: start;
  gap: var(--aiditor-space-2);
  padding: var(--aiditor-space-2);
  background: var(--aiditor-bg-1);
}
.aiditor-ui-assetgrid-sm { grid-template-columns: repeat(auto-fill, 72px); --aiditor-asset-tile: 72px; --aiditor-asset-thumb: 42px; }
.aiditor-ui-assetgrid-md { grid-template-columns: repeat(auto-fill, 96px); --aiditor-asset-tile: 96px; --aiditor-asset-thumb: 64px; }
.aiditor-ui-assetgrid-lg { grid-template-columns: repeat(auto-fill, 128px); --aiditor-asset-tile: 128px; --aiditor-asset-thumb: 92px; }
.aiditor-ui-assetgrid-xl { grid-template-columns: repeat(auto-fill, 176px); --aiditor-asset-tile: 176px; --aiditor-asset-thumb: 136px; }
.aiditor-ui-assetgrid-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.aiditor-ui-assetitem {
  width: var(--aiditor-asset-tile);
  height: calc(var(--aiditor-asset-thumb) + 28px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  padding: 3px;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: var(--aiditor-r-2);
  color: var(--aiditor-fg-1);
  cursor: default;
  user-select: none;
}
.aiditor-ui-assetgrid-list .aiditor-ui-assetitem {
  width: 100%;
  height: 28px;
  display: grid;
  grid-template-columns: 28px minmax(120px, 1fr) 90px 80px 96px;
  align-items: center;
  gap: var(--aiditor-space-2);
}
.aiditor-ui-assetitem:hover {
  background: var(--aiditor-bg-2);
  border-color: var(--aiditor-border);
}
.aiditor-ui-assetitem.is-selected {
  background: var(--aiditor-selected);
  border-color: var(--aiditor-accent);
  color: var(--aiditor-selected-fg);
}
.aiditor-ui-assetitem.is-selected:hover {
  background: var(--aiditor-selected-hover);
  border-color: var(--aiditor-accent);
  color: var(--aiditor-selected-fg);
}
.aiditor-ui-assetthumb {
  width: var(--aiditor-asset-thumb);
  height: var(--aiditor-asset-thumb);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--aiditor-border);
  border-radius: var(--aiditor-r-2);
  background: var(--aiditor-bg-2);
}
.aiditor-ui-assetgrid-list .aiditor-ui-assetthumb {
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
}
.aiditor-ui-assetthumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.aiditor-ui-assetname {
  width: 100%;
  min-width: 0;
  text-align: center;
  font: var(--aiditor-fs-xs) var(--aiditor-font-ui);
  line-height: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aiditor-ui-assetgrid-list .aiditor-ui-assetname {
  text-align: left;
  font-size: var(--aiditor-fs-sm);
}
.aiditor-ui-assetmeta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--aiditor-fg-3);
  font: var(--aiditor-fs-xs) var(--aiditor-font-ui);
}
.aiditor-ui-asset-empty {
  grid-column: 1 / -1;
  padding: var(--aiditor-space-4);
  color: var(--aiditor-fg-3);
  font: var(--aiditor-fs-sm) var(--aiditor-font-ui);
  text-align: center;
}
.aiditor-ui-asset-marquee {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  border: 1px solid var(--aiditor-accent);
  background: color-mix(in srgb, var(--aiditor-accent) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--aiditor-accent) 30%, transparent);
}

.aiditor-change-review {
  display: flex;
  flex-direction: column;
  gap: var(--aiditor-space-2);
  min-width: 0;
  color: var(--aiditor-fg-1);
  font: var(--aiditor-fs-sm) var(--aiditor-font-ui);
}
.aiditor-change-review-head,
.aiditor-change-review-resource-head,
.aiditor-change-review-change-meta,
.aiditor-change-review-diff,
.aiditor-change-review-actions {
  display: flex;
  align-items: center;
  gap: var(--aiditor-space-2);
}
.aiditor-change-review-head {
  padding-bottom: var(--aiditor-space-1);
  border-bottom: 1px solid var(--aiditor-border);
}
.aiditor-change-review-title-block {
  min-width: 0;
  flex: 1 1 auto;
}
.aiditor-change-review-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--aiditor-fg-0);
  font-weight: 650;
}
.aiditor-change-review-summary,
.aiditor-change-review-description,
.aiditor-change-review-resource-subtitle,
.aiditor-change-review-change-summary {
  color: var(--aiditor-fg-3);
  font-size: var(--aiditor-fs-xs);
  line-height: 1.35;
}
.aiditor-change-review-actions {
  flex: 0 0 auto;
  margin-left: auto;
}
.aiditor-change-review-status {
  flex: 0 0 auto;
  padding: 1px 6px;
  border: 1px solid var(--aiditor-border);
  border-radius: var(--aiditor-r-pill);
  color: var(--aiditor-fg-3);
  font-size: var(--aiditor-fs-xs);
  line-height: 16px;
}
.aiditor-change-review-status-applied {
  border-color: color-mix(in srgb, var(--aiditor-success) 40%, var(--aiditor-border));
  color: var(--aiditor-success);
}
.aiditor-change-review-status-failed {
  border-color: color-mix(in srgb, var(--aiditor-error) 40%, var(--aiditor-border));
  color: var(--aiditor-error);
}
.aiditor-change-review-status-rejected {
  border-color: color-mix(in srgb, var(--aiditor-warning) 40%, var(--aiditor-border));
  color: var(--aiditor-warning);
}
.aiditor-change-review-validation {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.aiditor-change-review-validation-item {
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, var(--aiditor-error) 35%, var(--aiditor-border));
  border-radius: var(--aiditor-r-2);
  background: color-mix(in srgb, var(--aiditor-error) 10%, var(--aiditor-bg-1));
  color: var(--aiditor-error);
}
.aiditor-change-review-resources,
.aiditor-change-review-changes {
  display: flex;
  flex-direction: column;
  gap: var(--aiditor-space-1);
}
.aiditor-change-review-resource {
  border: 1px solid var(--aiditor-border);
  border-radius: var(--aiditor-r-2);
  background: var(--aiditor-bg-1);
  overflow: hidden;
}
.aiditor-change-review-resource-head {
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-bottom: 1px solid var(--aiditor-border);
  background: var(--aiditor-bg-2);
  color: inherit;
  text-align: left;
}
.aiditor-change-review-resource-label {
  min-width: 0;
  flex: 1 1 auto;
}
.aiditor-change-review-resource-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--aiditor-fg-0);
  font-weight: 600;
}
.aiditor-change-review-change {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 7px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--aiditor-border) 70%, transparent);
}
.aiditor-change-review-change:last-child {
  border-bottom: 0;
}
.aiditor-change-review-change-meta {
  flex-wrap: wrap;
}
.aiditor-change-review-op,
.aiditor-change-review-path {
  flex: 0 1 auto;
  min-width: 0;
  padding: 1px 6px;
  border: 1px solid var(--aiditor-border);
  border-radius: var(--aiditor-r-pill);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--aiditor-fs-xs);
}
.aiditor-change-review-op {
  color: var(--aiditor-accent);
  text-transform: uppercase;
}
.aiditor-change-review-diff {
  align-items: stretch;
}
.aiditor-change-review-value {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid var(--aiditor-border);
  border-radius: var(--aiditor-r-2);
  overflow: hidden;
  background: var(--aiditor-bg-0);
}
.aiditor-change-review-value-before {
  border-color: color-mix(in srgb, var(--aiditor-error) 24%, var(--aiditor-border));
}
.aiditor-change-review-value-after {
  border-color: color-mix(in srgb, var(--aiditor-success) 24%, var(--aiditor-border));
}
.aiditor-change-review-value-label {
  padding: 4px 6px;
  border-right: 1px solid var(--aiditor-border);
  background: var(--aiditor-bg-2);
  color: var(--aiditor-fg-3);
  font-size: var(--aiditor-fs-xs);
}
.aiditor-change-review-value-text {
  min-width: 0;
  padding: 4px 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--aiditor-fg-1);
  font: var(--aiditor-fs-xs) var(--aiditor-font-mono);
}
.aiditor-change-review-empty {
  color: var(--aiditor-fg-3);
  font-style: italic;
}

@media (max-width: 720px) {
  .aiditor-change-review-head,
  .aiditor-change-review-diff {
    flex-direction: column;
    align-items: stretch;
  }
  .aiditor-change-review-actions {
    margin-left: 0;
  }
}

/* ---- style/ui-overlay.css ---- */
/* aiditor — UI library: overlay widgets
 *
 * Covers menu (extras on top of the base in ui-form.css), modal, drawer,
 * alert, toast. Popover/tooltip live in ui-base.css since lots of widgets
 * compose them directly.
 */

/* ── menu (overlay-mode extras) ─────────────────────────────────── */
.aiditor-ui-menu-divider {
  height: 1px;
  margin: var(--aiditor-space-1) 0;
  background: var(--aiditor-border);
}
.aiditor-ui-menu-header {
  padding: var(--aiditor-space-1) var(--aiditor-space-2);
  font: 600 var(--aiditor-fs-xs) var(--aiditor-font-ui);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--aiditor-fg-3);
}
.aiditor-ui-menu-item-disabled { opacity: .38; pointer-events: none; }
.aiditor-ui-menu-item-danger { color: var(--aiditor-error); }
.aiditor-ui-menu-item-danger:hover { background: var(--aiditor-error-bg); color: var(--aiditor-error); }
.aiditor-ui-menu-item-label { flex: 1 1 auto; }
.aiditor-ui-menu-item-kbd {
  margin-left: var(--aiditor-space-3);
  opacity: .7;
}
.aiditor-ui-menu-item-sub {
  margin-left: var(--aiditor-space-2);
  color: var(--aiditor-fg-3);
  font-size: var(--aiditor-fs-md);
  line-height: 1;
}
.aiditor-ui-menu-item[data-open="true"] {
  background: var(--aiditor-hover);
  color: var(--aiditor-fg-0);
}
.aiditor-ui-menu-submenu {
  position: absolute;
  z-index: calc(var(--aiditor-z-popover) + 2);
}

.aiditor-ui-quick-pick {
  display: flex;
  flex-direction: column;
  gap: var(--aiditor-space-1);
  padding: var(--aiditor-space-1);
  color: var(--aiditor-fg-1);
}
.aiditor-ui-quick-pick-input {
  width: 100%;
  box-sizing: border-box;
}
.aiditor-ui-quick-pick-list {
  overflow: auto;
  max-height: 360px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.aiditor-ui-quick-pick-row {
  position: relative;
  display: flex;
  align-items: stretch;
  min-width: 0;
  padding: var(--aiditor-space-1) var(--aiditor-space-2);
  border-radius: var(--aiditor-r-1);
  color: var(--aiditor-fg-1);
  cursor: pointer;
  user-select: none;
  transition: background var(--aiditor-dur-fast) var(--aiditor-ease),
              color var(--aiditor-dur-fast) var(--aiditor-ease);
}
.aiditor-ui-quick-pick-row:hover {
  background: var(--aiditor-hover);
  color: var(--aiditor-fg-0);
}
.aiditor-ui-quick-pick-row-active,
.aiditor-ui-quick-pick-row-active:hover {
  background: var(--aiditor-selected);
  color: var(--aiditor-selected-fg);
}
.aiditor-ui-quick-pick-row-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 2px;
  border-radius: 0 var(--aiditor-r-1) var(--aiditor-r-1) 0;
  background: var(--aiditor-accent);
}
.aiditor-ui-quick-pick-row-selected {
  box-shadow: inset 0 0 0 1px var(--aiditor-selected-border);
}
.aiditor-ui-quick-pick-row-disabled {
  opacity: .45;
  cursor: default;
}
.aiditor-ui-quick-pick-row-disabled:hover {
  background: transparent;
  color: var(--aiditor-fg-1);
}
.aiditor-ui-quick-pick-row-content {
  flex: 1 1 auto;
  min-width: 0;
}
.aiditor-ui-quick-pick-default {
  display: flex;
  align-items: flex-start;
  gap: var(--aiditor-space-2);
  min-width: 0;
}
.aiditor-ui-quick-pick-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.aiditor-ui-quick-pick-main {
  display: flex;
  align-items: baseline;
  gap: var(--aiditor-space-2);
  min-width: 0;
}
.aiditor-ui-quick-pick-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 600 var(--aiditor-fs-md) var(--aiditor-font-ui);
}
.aiditor-ui-quick-pick-description,
.aiditor-ui-quick-pick-detail {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--aiditor-fg-3);
}
.aiditor-ui-quick-pick-description {
  flex: 0 1 auto;
  font: var(--aiditor-fs-sm) var(--aiditor-font-ui);
}
.aiditor-ui-quick-pick-detail {
  font: var(--aiditor-fs-xs) var(--aiditor-font-ui);
}
.aiditor-ui-quick-pick-row-active .aiditor-ui-quick-pick-description,
.aiditor-ui-quick-pick-row-active .aiditor-ui-quick-pick-detail {
  color: color-mix(in srgb, var(--aiditor-selected-fg) 72%, transparent);
}
.aiditor-ui-quick-pick-group {
  position: static;
  background: transparent;
}
.aiditor-ui-quick-pick-empty {
  margin: var(--aiditor-space-1);
}

/* ── modal ──────────────────────────────────────────────────────── */
.aiditor-ui-modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--aiditor-scrim);
  z-index: var(--aiditor-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: aiditor-backdrop-in var(--aiditor-dur-med) var(--aiditor-ease) both;
}
.aiditor-ui-modal {
  display: flex;
  flex-direction: column;
  width: max-content;
  min-width: min(320px, calc(100vw - 24px));
  max-width: min(560px, calc(100vw - 24px));
  max-height: 86vh;
  background: var(--aiditor-bg-1);
  border: 1px solid var(--aiditor-border-strong);
  border-radius: var(--aiditor-r-3);
  box-shadow: var(--aiditor-shadow-4);
  overflow: hidden;
  box-sizing: border-box;
  animation: aiditor-modal-in var(--aiditor-dur-slow) cubic-bezier(.18,.89,.32,1.18) both;
}
@keyframes aiditor-backdrop-in {
  from { opacity: 0; backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); }
  to   { opacity: 1; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
}
@keyframes aiditor-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.aiditor-ui-modal-head {
  display: flex;
  align-items: center;
  padding: var(--aiditor-space-2) var(--aiditor-space-3);
  border-bottom: 1px solid var(--aiditor-border);
  background: var(--aiditor-bg-2);
  flex-shrink: 0;
}
.aiditor-ui-modal-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 600 var(--aiditor-fs-md) var(--aiditor-font-ui);
  color: var(--aiditor-fg-0);
}
.aiditor-ui-modal-close {
  background: transparent;
  border: 0;
  width: 24px;
  height: 24px;
  border-radius: var(--aiditor-r-1);
  color: var(--aiditor-fg-2);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.aiditor-ui-modal-close:hover { background: var(--aiditor-hover); color: var(--aiditor-fg-0); }
.aiditor-ui-modal-body {
  padding: var(--aiditor-space-3);
  overflow-y: auto;
  color: var(--aiditor-fg-1);
  font: var(--aiditor-fs-md) var(--aiditor-font-ui);
  flex: 1 1 auto;
  min-width: 0;
}
.aiditor-ui-modal-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--aiditor-space-2);
  padding: var(--aiditor-space-2) var(--aiditor-space-3);
  border-top: 1px solid var(--aiditor-border);
  background: var(--aiditor-bg-2);
  flex-shrink: 0;
  min-width: 0;
}

/* ── dialogs (alert / confirm / prompt) ─────────────────────────── */
.aiditor-ui-dialog-body {
  min-width: 320px;
  max-width: 460px;
  max-height: min(360px, 52vh);
  overflow: auto;
  font: var(--aiditor-fs-md) var(--aiditor-font-ui);
  color: var(--aiditor-fg-1);
  line-height: 1.5;
  white-space: pre-wrap;
}
.aiditor-ui-dialog-body-prompt {
  display: flex;
  flex-direction: column;
  gap: var(--aiditor-space-2);
}
.aiditor-ui-dialog-msg {
  font: var(--aiditor-fs-sm) var(--aiditor-font-ui);
  color: var(--aiditor-fg-2);
}
.aiditor-ui-dialog-foot {
  display: flex;
  gap: var(--aiditor-space-2);
  justify-content: flex-end;
}

/* ── drawer ─────────────────────────────────────────────────────── */
.aiditor-ui-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: var(--aiditor-scrim);
  z-index: var(--aiditor-z-modal);
  pointer-events: auto;
}
.aiditor-ui-drawer {
  position: absolute;
  display: flex;
  flex-direction: column;
  background: var(--aiditor-bg-1);
  border: 1px solid var(--aiditor-border-strong);
  box-shadow: var(--aiditor-shadow-3);
  transition: transform var(--aiditor-dur-med) var(--aiditor-ease);
}
.aiditor-ui-drawer-right {
  top: 0; right: 0; bottom: 0;
  width: min(420px, 92vw);
  border-right: 0;
  transform: translateX(100%);
}
.aiditor-ui-drawer-left {
  top: 0; left: 0; bottom: 0;
  width: min(420px, 92vw);
  border-left: 0;
  transform: translateX(-100%);
}
.aiditor-ui-drawer-top {
  top: 0; left: 0; right: 0;
  height: min(320px, 80vh);
  border-top: 0;
  transform: translateY(-100%);
}
.aiditor-ui-drawer-bottom {
  bottom: 0; left: 0; right: 0;
  height: min(320px, 80vh);
  border-bottom: 0;
  transform: translateY(100%);
}
.aiditor-ui-drawer-open { transform: translate(0, 0); }
.aiditor-ui-drawer-head {
  display: flex;
  align-items: center;
  padding: var(--aiditor-space-2) var(--aiditor-space-3);
  border-bottom: 1px solid var(--aiditor-border);
  background: var(--aiditor-bg-2);
  flex-shrink: 0;
}
.aiditor-ui-drawer-title {
  flex: 1 1 auto;
  font: 600 var(--aiditor-fs-md) var(--aiditor-font-ui);
  color: var(--aiditor-fg-0);
}
.aiditor-ui-drawer-body {
  padding: var(--aiditor-space-3);
  overflow-y: auto;
  color: var(--aiditor-fg-1);
  font: var(--aiditor-fs-md) var(--aiditor-font-ui);
  flex: 1 1 auto;
}

/* ── banner (inline status) ─────────────────────────────────────── */
.aiditor-ui-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--aiditor-space-2);
  width: 100%;
  min-width: 0;
  padding: var(--aiditor-space-2) var(--aiditor-space-3);
  border: 1px solid var(--aiditor-border);
  border-radius: var(--aiditor-r-2);
  background: var(--aiditor-bg-2);
  color: var(--aiditor-fg-1);
  font: var(--aiditor-fs-sm) var(--aiditor-font-ui);
  animation: aiditor-banner-in var(--aiditor-dur-med) var(--aiditor-ease) both;
  box-sizing: border-box;
}
@keyframes aiditor-banner-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .aiditor-ui-modal-backdrop, .aiditor-ui-modal, .aiditor-ui-banner, .aiditor-ui-toast { animation: none; }
}
.aiditor-ui-banner-icon {
  font-size: var(--aiditor-fs-lg);
  line-height: 1.3;
  flex-shrink: 0;
}
.aiditor-ui-banner-body { flex: 1 1 auto; min-width: 0; }
.aiditor-ui-banner-title {
  font-weight: 600;
  color: var(--aiditor-fg-0);
  margin-bottom: 2px;
}
.aiditor-ui-banner-msg { color: var(--aiditor-fg-1); white-space: pre-wrap; overflow-wrap: anywhere; }
.aiditor-ui-banner-close {
  background: transparent;
  border: 0;
  width: 20px;
  height: 20px;
  border-radius: var(--aiditor-r-1);
  color: var(--aiditor-fg-2);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.aiditor-ui-banner-close:hover { background: var(--aiditor-hover); color: var(--aiditor-fg-0); }

.aiditor-ui-banner-info    { border-color: var(--aiditor-info);    background: var(--aiditor-info-bg); }
.aiditor-ui-banner-info    .aiditor-ui-banner-icon { color: var(--aiditor-info); }
.aiditor-ui-banner-info    .aiditor-ui-banner-icon::before { content: var(--aiditor-icon-info); }
.aiditor-ui-banner-success { border-color: var(--aiditor-success); background: var(--aiditor-success-bg); }
.aiditor-ui-banner-success .aiditor-ui-banner-icon { color: var(--aiditor-success); }
.aiditor-ui-banner-success .aiditor-ui-banner-icon::before { content: var(--aiditor-icon-success); }
.aiditor-ui-banner-warn    { border-color: var(--aiditor-warn);    background: var(--aiditor-warn-bg); }
.aiditor-ui-banner-warn    .aiditor-ui-banner-icon { color: var(--aiditor-warn); }
.aiditor-ui-banner-warn    .aiditor-ui-banner-icon::before { content: var(--aiditor-icon-warn); }
.aiditor-ui-banner-error   { border-color: var(--aiditor-error);   background: var(--aiditor-error-bg); }
.aiditor-ui-banner-error   .aiditor-ui-banner-icon { color: var(--aiditor-error); }
.aiditor-ui-banner-error   .aiditor-ui-banner-icon::before { content: var(--aiditor-icon-error); }

/* ── toast (top-right stack) ────────────────────────────────────── */
.aiditor-ui-toast-stack {
  position: fixed;
  top: var(--aiditor-space-3);
  right: var(--aiditor-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--aiditor-space-2);
  z-index: var(--aiditor-z-toast);
  pointer-events: none;
}
.aiditor-ui-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--aiditor-space-2);
  min-width: 240px;
  max-width: 360px;
  padding: var(--aiditor-space-2) var(--aiditor-space-3);
  background: var(--aiditor-bg-2);
  border: 1px solid var(--aiditor-border-strong);
  border-radius: var(--aiditor-r-2);
  box-shadow: var(--aiditor-shadow-3);
  color: var(--aiditor-fg-1);
  font: var(--aiditor-fs-sm) var(--aiditor-font-ui);
  pointer-events: auto;
  transform: translateX(120%);
  opacity: 0;
  transition: transform var(--aiditor-dur-med) var(--aiditor-ease), opacity var(--aiditor-dur-med) var(--aiditor-ease);
}
.aiditor-ui-toast {
  transition: transform var(--aiditor-dur-slow) cubic-bezier(.18,.89,.32,1.18),
              opacity var(--aiditor-dur-med) var(--aiditor-ease);
}
.aiditor-ui-toast-in  { transform: translateX(0); opacity: 1; }
.aiditor-ui-toast-out { transform: translateX(120%); opacity: 0; }
.aiditor-ui-toast-icon {
  font-size: var(--aiditor-fs-lg);
  line-height: 1.3;
  flex-shrink: 0;
}
.aiditor-ui-toast-body { flex: 1 1 auto; }
.aiditor-ui-toast-title {
  font-weight: 600;
  color: var(--aiditor-fg-0);
  margin-bottom: 2px;
}
.aiditor-ui-toast-msg { color: var(--aiditor-fg-1); white-space: pre-wrap; }
.aiditor-ui-toast-close {
  background: transparent;
  border: 0;
  width: 20px;
  height: 20px;
  border-radius: var(--aiditor-r-1);
  color: var(--aiditor-fg-2);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.aiditor-ui-toast-close:hover { background: var(--aiditor-hover); color: var(--aiditor-fg-0); }

.aiditor-ui-toast-info    { border-left: 3px solid var(--aiditor-info); }
.aiditor-ui-toast-info    .aiditor-ui-toast-icon { color: var(--aiditor-info); }
.aiditor-ui-toast-info    .aiditor-ui-toast-icon::before { content: var(--aiditor-icon-info); }
.aiditor-ui-toast-success { border-left: 3px solid var(--aiditor-success); }
.aiditor-ui-toast-success .aiditor-ui-toast-icon { color: var(--aiditor-success); }
.aiditor-ui-toast-success .aiditor-ui-toast-icon::before { content: var(--aiditor-icon-success); }
.aiditor-ui-toast-warn    { border-left: 3px solid var(--aiditor-warn); }
.aiditor-ui-toast-warn    .aiditor-ui-toast-icon { color: var(--aiditor-warn); }
.aiditor-ui-toast-warn    .aiditor-ui-toast-icon::before { content: var(--aiditor-icon-warn); }
.aiditor-ui-toast-error   { border-left: 3px solid var(--aiditor-error); }
.aiditor-ui-toast-error   .aiditor-ui-toast-icon { color: var(--aiditor-error); }
.aiditor-ui-toast-error   .aiditor-ui-toast-icon::before { content: var(--aiditor-icon-error); }

/* ---- style/ui-settings.css ---- */
/* aiditor - Settings panel */

.aiditor-settings-panel {
  display: grid;
  grid-template-columns: var(--aiditor-settings-nav-w, 240px) 1px minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--aiditor-bg-1);
  color: var(--aiditor-fg-1);
}

.aiditor-settings-nav {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-right: 0;
  background: var(--aiditor-bg-1);
  padding: var(--aiditor-space-2) var(--aiditor-space-1);
  box-sizing: border-box;
}

.aiditor-settings-nav > .aiditor-ui-search-field {
  flex: 0 0 auto;
  margin-bottom: var(--aiditor-space-2);
}

.aiditor-settings-splitter {
  min-width: 1px;
  height: 100%;
}

.aiditor-settings-tree-view {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
}

.aiditor-settings-tree {
  width: 100%;
  height: 100%;
  background: transparent;
  border-radius: 0;
}

.aiditor-settings-tree .aiditor-ui-tree-row {
  border-radius: 4px;
}

.aiditor-settings-tree .aiditor-ui-tree-row-active,
.aiditor-settings-tree .aiditor-ui-tree-row-active:hover {
  background: var(--aiditor-selected);
  color: var(--aiditor-fg-0);
}

.aiditor-settings-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.aiditor-settings-page {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  max-width: 1080px;
  width: 100%;
  padding: var(--aiditor-space-5);
  box-sizing: border-box;
}

.aiditor-settings-page-head {
  display: flex;
  flex-direction: column;
  gap: var(--aiditor-space-1);
  margin-bottom: var(--aiditor-space-4);
}

.aiditor-settings-page-title {
  color: var(--aiditor-fg-0);
  font: 700 var(--aiditor-fs-xl) var(--aiditor-font-ui);
}

.aiditor-settings-page-desc {
  max-width: 720px;
  color: var(--aiditor-fg-3);
  line-height: 1.45;
}

.aiditor-settings-ai-page {
  max-width: 1180px;
}

.aiditor-settings-ai-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--aiditor-space-3);
  margin-bottom: var(--aiditor-space-4);
}

.aiditor-settings-ai-toolbar .aiditor-settings-field {
  flex: 1 1 auto;
  max-width: 560px;
}

.aiditor-settings-field-compact {
  grid-template-columns: minmax(132px, 32%) minmax(0, 1fr);
}

.aiditor-settings-connection-shell {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: var(--aiditor-space-4);
  min-width: 0;
  align-items: start;
}

.aiditor-settings-connection-list {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--aiditor-border);
  border-radius: var(--aiditor-r-3);
  background: var(--aiditor-view-bg);
}

.aiditor-settings-connection-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px var(--aiditor-space-2);
  width: 100%;
  min-height: 54px;
  padding: var(--aiditor-space-2) var(--aiditor-space-3);
  border: 0;
  border-bottom: 1px solid var(--aiditor-border);
  background: transparent;
  color: var(--aiditor-fg-1);
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}

.aiditor-settings-connection-item:last-child {
  border-bottom: 0;
}

.aiditor-settings-connection-item:hover {
  background: var(--aiditor-hover);
}

.aiditor-settings-connection-item[data-active="true"] {
  background: var(--aiditor-selected);
  color: var(--aiditor-fg-0);
}

.aiditor-settings-connection-item-title {
  grid-column: 1;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aiditor-settings-connection-item-meta {
  grid-column: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--aiditor-fg-3);
  font: var(--aiditor-fs-xs) var(--aiditor-font-ui);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aiditor-settings-connection-item[data-active="true"] .aiditor-settings-connection-item-meta {
  color: var(--aiditor-fg-2);
}

.aiditor-settings-connection-item-status {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  max-width: 92px;
  overflow: hidden;
  padding: 2px 7px;
  border: 1px solid var(--aiditor-border);
  border-radius: 999px;
  background: var(--aiditor-bg-2);
  color: var(--aiditor-fg-2);
  font: var(--aiditor-fs-xs) var(--aiditor-font-ui);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aiditor-settings-connection-detail {
  min-width: 0;
}

.aiditor-settings-connection-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-bottom: var(--aiditor-space-3);
  border: 1px solid var(--aiditor-border);
  border-radius: var(--aiditor-r-3);
  background: var(--aiditor-view-bg);
  overflow: hidden;
}

.aiditor-settings-connection-card.aiditor-settings-provider-loading {
  border-color: color-mix(in srgb, var(--aiditor-warn) 38%, var(--aiditor-border));
}

.aiditor-settings-connection-card.aiditor-settings-provider-ok {
  border-color: color-mix(in srgb, var(--aiditor-success) 44%, var(--aiditor-border));
}

.aiditor-settings-connection-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--aiditor-space-3);
  min-width: 0;
  padding: var(--aiditor-space-3);
  border-bottom: 1px solid var(--aiditor-border);
  background: var(--aiditor-toolbar-bg);
}

.aiditor-settings-connection-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}

.aiditor-settings-connection-title {
  min-width: 0;
  overflow: hidden;
  color: var(--aiditor-fg-0);
  font: 700 var(--aiditor-fs-lg) var(--aiditor-font-ui);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aiditor-settings-connection-subtitle {
  min-width: 0;
  overflow: hidden;
  color: var(--aiditor-fg-3);
  font: var(--aiditor-fs-xs) var(--aiditor-font-ui);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aiditor-settings-connection-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--aiditor-space-2);
  flex: 0 0 auto;
}

.aiditor-settings-connection-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--aiditor-space-3);
  padding: var(--aiditor-space-3);
}

.aiditor-settings-theme-page {
  display: flex;
  flex-direction: column;
  max-width: none;
}

.aiditor-settings-theme-bar {
  display: flex;
  align-items: center;
  gap: var(--aiditor-space-2);
  margin-bottom: var(--aiditor-space-3);
}

.aiditor-settings-theme-tabs {
  flex: 1 1 auto;
  min-width: 160px;
}

.aiditor-settings-theme-scroll {
  flex: 1 1 auto;
  min-height: 0;
}

.aiditor-settings-theme-host {
  padding-right: var(--aiditor-space-2);
}

.aiditor-settings-theme-pane {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--aiditor-space-1) var(--aiditor-space-3);
  align-content: start;
}

.aiditor-settings-theme-pane .aiditor-ui-prop-row {
  grid-template-columns: minmax(0, 112px) minmax(0, 1fr);
}

.aiditor-settings-theme-pane .aiditor-ui-prop-label {
  text-align: left;
}

.aiditor-theme-config {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  background: var(--aiditor-bg-1);
}
.aiditor-theme-config-head,
.aiditor-theme-config-foot {
  display: flex;
  align-items: center;
  gap: var(--aiditor-space-2);
  padding: var(--aiditor-space-2) var(--aiditor-space-3);
  flex: 0 0 auto;
  min-width: 0;
  box-sizing: border-box;
}
.aiditor-theme-config-head {
  border-bottom: var(--aiditor-toolbar-border-w) solid var(--aiditor-toolbar-border);
  background: var(--aiditor-toolbar-bg);
}
.aiditor-theme-config-foot {
  border-top: var(--aiditor-toolbar-border-w) solid var(--aiditor-toolbar-border);
  background: var(--aiditor-toolbar-bg);
}
.aiditor-theme-config-head .aiditor-ui-select {
  flex: 1 1 0;
  min-width: 0;
}
.aiditor-theme-config-head .aiditor-ui-btn {
  flex: 0 0 auto;
}
.aiditor-theme-config-tabs {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
.aiditor-theme-config-scroll {
  flex: 1 1 auto;
  min-height: 0;
}
.aiditor-theme-config-host {
  padding: var(--aiditor-space-2) var(--aiditor-space-3);
}
.aiditor-theme-config-host.aiditor-settings-theme-host {
  padding-right: var(--aiditor-space-3);
}
.aiditor-theme-config-host .aiditor-settings-theme-pane {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.aiditor-theme-config-host .aiditor-settings-theme-pane .aiditor-ui-prop-row {
  grid-template-columns: minmax(0, 96px) minmax(0, 1fr);
}

.aiditor-settings-ai-overview {
  display: flex;
  flex-direction: column;
  gap: var(--aiditor-space-3);
  margin-bottom: var(--aiditor-space-4);
}

.aiditor-settings-note {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: var(--aiditor-space-2) var(--aiditor-space-3);
  border: 1px solid color-mix(in srgb, var(--aiditor-warn) 34%, var(--aiditor-border));
  border-radius: var(--aiditor-r-3);
  background: var(--aiditor-warn-bg);
  color: var(--aiditor-fg-2);
  line-height: 1.4;
  box-sizing: border-box;
}

.aiditor-settings-provider-block {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--aiditor-border);
  border-radius: var(--aiditor-r-3);
  background: var(--aiditor-view-bg);
  overflow: hidden;
}

.aiditor-settings-provider-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--aiditor-space-3);
  min-height: 42px;
  padding: 0 var(--aiditor-space-3);
  border-bottom: var(--aiditor-toolbar-border-w) solid var(--aiditor-toolbar-border);
  background: var(--aiditor-toolbar-bg);
}

.aiditor-settings-provider-block-title {
  color: var(--aiditor-fg-0);
  font-weight: 700;
}

.aiditor-settings-provider-block-desc {
  min-width: 0;
  color: var(--aiditor-fg-3);
  font: var(--aiditor-fs-xs) var(--aiditor-font-ui);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aiditor-settings-provider-list {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.aiditor-settings-provider-row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: start;
  min-width: 0;
  border-bottom: 1px solid var(--aiditor-border);
}

.aiditor-settings-provider-row:last-child {
  border-bottom: 0;
}

.aiditor-settings-provider-row.aiditor-settings-provider-loading {
  border-color: color-mix(in srgb, var(--aiditor-warn) 38%, var(--aiditor-border));
}

.aiditor-settings-provider-row.aiditor-settings-provider-ok {
  border-color: color-mix(in srgb, var(--aiditor-success) 44%, var(--aiditor-border));
}

.aiditor-settings-provider-head {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--aiditor-space-2);
  min-height: 0;
  padding: var(--aiditor-space-3);
  background: transparent;
}

.aiditor-settings-provider-title {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: var(--aiditor-space-2);
  color: var(--aiditor-fg-0);
  font-weight: 700;
}

.aiditor-settings-provider-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--aiditor-space-2) var(--aiditor-space-3);
  padding: var(--aiditor-space-3);
}

.aiditor-settings-field {
  display: grid;
  grid-template-columns: minmax(150px, 34%) minmax(0, 1fr);
  align-items: center;
  gap: var(--aiditor-space-3);
  min-width: 0;
}

.aiditor-settings-field-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}

.aiditor-settings-field-control {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: var(--aiditor-space-1);
}

.aiditor-settings-field-control > .aiditor-ui-field,
.aiditor-settings-field-control > .aiditor-ui-select,
.aiditor-settings-field-control > .aiditor-ui-input {
  flex: 1 1 auto;
  min-width: 0;
}

.aiditor-settings-model-control .aiditor-ui-combobox {
  flex: 1 1 auto;
  min-width: 0;
}

.aiditor-settings-model-action {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: var(--aiditor-space-1);
}

.aiditor-settings-auth-actions {
  display: flex;
  align-items: center;
  gap: var(--aiditor-space-2);
  min-width: 0;
  flex-wrap: wrap;
}

.aiditor-settings-provider-status {
  color: var(--aiditor-fg-3);
  font: var(--aiditor-fs-xs) var(--aiditor-font-ui);
  white-space: nowrap;
}

.aiditor-settings-auth-hint {
  color: var(--aiditor-fg-3);
  font: var(--aiditor-fs-xs) var(--aiditor-font-mono);
  white-space: nowrap;
}

.aiditor-settings-field-label {
  color: var(--aiditor-fg-1);
  font-weight: 600;
}

.aiditor-settings-field-desc {
  color: var(--aiditor-fg-3);
  font: var(--aiditor-fs-xs) var(--aiditor-font-ui);
  line-height: 1.35;
}

@media (max-width: 680px) {
  .aiditor-settings-panel {
    grid-template-columns: minmax(132px, 34%) 1px minmax(0, 1fr);
  }
  .aiditor-settings-page {
    padding: var(--aiditor-space-3);
  }
  .aiditor-settings-ai-toolbar,
  .aiditor-settings-connection-head {
    align-items: stretch;
    flex-direction: column;
  }
  .aiditor-settings-ai-toolbar .aiditor-settings-field {
    max-width: none;
    width: 100%;
  }
  .aiditor-settings-connection-shell {
    grid-template-columns: minmax(0, 1fr);
  }
  .aiditor-settings-ai-overview,
  .aiditor-settings-field-compact,
  .aiditor-settings-provider-row,
  .aiditor-settings-provider-fields {
    grid-template-columns: minmax(0, 1fr);
  }
  .aiditor-settings-field {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--aiditor-space-1);
  }
}