/* @voltro/devtools — CSS isolation strategy.
 *
 * Every Tailwind utility consumed by the devtools UI is generated under
 * the `vdt:` prefix (`vdt:bg-card`, `vdt:flex`, `vdt:rounded-md`, …) so it
 * cannot collide with the host app's utility namespace. The consumer
 * app's `globals.css` adds `@import "@voltro/devtools/styles.css"` and
 * Tailwind v4's vite plugin compiles the devtools tree into the same
 * bundle — but with the prefixed utility set kept entirely separate
 * from the host's unprefixed one.
 *
 * Tokens (--background, --foreground, --border, …) are NOT defined
 * against `:root`. They live under `.vdt-scope` instead, so the host
 * page's token values aren't shadowed by the devtools'. Every descendant
 * resolves tokens from this layer; the host's tree is untouched.
 *
 * The other direction — the host's styles reaching the overlay — is closed
 * by rendering into a shadow root (`shadowHost.tsx`), which copies exactly
 * the rules mentioning `vdt` out of the document's sheets. Keep that
 * marker in every selector, keyframe name and container name here.
 *
 * Visual identity: always dark, brand-violet accent. The host page's
 * theme (light / dark / system) has zero influence — devtools is its
 * own surface. */

@import "tailwindcss" prefix(vdt);

/* Scan the devtools source tree only. The Tailwind v4 vite plugin
 * picks this up because this file is `@import`-ed from that deployment's
 * globals.css; the relative path resolves through the workspace
 * symlink. */
@source "./**/*.{tsx,ts}";

/* ---- Tokens (dark-only, scoped to .vdt-scope) ---- */

.vdt-scope {
  --background:            #100c19;
  --background-elevated:   #1c1427;
  --foreground:            #f5f3fa;
  --foreground-muted:      #b9afc9;
  --foreground-subtle:     #a294b4;
  --border:                #342b43;
  --border-strong:         #584566;
  --card:                  #17111f;
  --card-foreground:       #f5f3fa;
  --muted:                 #251b33;
  --muted-foreground:      #b9afc9;
  --accent:                #a874ff;              /* brand violet */
  --accent-foreground:     #170c29;
  --accent-dim:            #7c3aed;
  --accent-glow:           #7c3aed59;
  --success:               oklch(0.72 0.15 162);
  --warning:               oklch(0.8 0.19 86);
  --danger:                oklch(0.7 0.21 22);
  --info:                  oklch(0.7 0.18 240);

  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;

  --shadow-panel: 0 18px 48px -12px oklch(0 0 0 / 60%),
                  0 2px 8px       oklch(0 0 0 / 40%);
  --shadow-button: 0 4px 16px -2px var(--accent-glow);

  /* Use the Voltro face when present, with a system fallback independent
   * of arbitrary host display typography. */
  font-family: Geist, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* The devtools' typography baseline. */
  font-size: 13px;
  line-height: 1.45;
  color: var(--foreground);
}

/* Map our tokens into Tailwind's `@theme inline` so `vdt:bg-card`,
 * `vdt:text-muted-foreground`, `vdt:border-border` etc. resolve. */
@theme inline {
  --color-background:          var(--background);
  --color-background-elevated: var(--background-elevated);
  --color-foreground:          var(--foreground);
  --color-foreground-muted:    var(--foreground-muted);
  --color-foreground-subtle:   var(--foreground-subtle);
  --color-border:              var(--border);
  --color-border-strong:       var(--border-strong);
  --color-card:                var(--card);
  --color-card-foreground:     var(--card-foreground);
  --color-muted:               var(--muted);
  --color-muted-foreground:    var(--muted-foreground);
  --color-accent:              var(--accent);
  --color-accent-foreground:   var(--accent-foreground);
  --color-accent-dim:          var(--accent-dim);
  --color-success:             var(--success);
  --color-warning:             var(--warning);
  --color-danger:              var(--danger);
  --color-info:                var(--info);

  --radius-sm: var(--radius-sm);
  --radius-md: var(--radius-md);
  --radius-lg: var(--radius-lg);
  --radius-xl: var(--radius-xl);
}

/* ---- Reset (scoped — never bleeds into host) ---- */

/* The overlay renders inside a SHADOW ROOT (shadowHost.tsx): the host's
 * stylesheet does not reach these elements, and only the rules of ours that
 * mention `vdt` are copied in. That includes the host's Tailwind PREFLIGHT —
 * so the user-agent defaults are ours to clear. Measured before this block
 * existed: every `<button>` in a panel wore Chrome's grey bevel, and a
 * `vdt:border-b-2` drew nothing because the UA border-style is `none`.
 *
 * It sits in `@layer base` (declared by `@import "tailwindcss"`, and the
 * statement is copied into the shadow sheet with it) and every selector is
 * wrapped in `:where()`, so it has ZERO specificity and loses to any
 * `vdt:*` utility on both counts. A bare `.vdt-scope button { padding: 0 }`
 * would beat every `vdt:p-*`. */
@layer base {
  /* Pseudo-elements are not allowed inside `:where()`; they get their own
   * (still layered) selector. */
  :where(.vdt-scope, .vdt-scope *),
  :where(.vdt-scope) ::before,
  :where(.vdt-scope) ::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid var(--border);
  }
  :where(.vdt-scope) :where(button, input, select, textarea) {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    background-color: transparent;
    border-radius: 0;
  }
  /* `appearance: none` on a checkbox is a 0×0 box (measured: the dock menu's
   * push switch vanished); native controls keep their appearance and get a
   * size. */
  :where(.vdt-scope) :where(button, input[type="submit"], input[type="button"]) { appearance: none; }
  :where(.vdt-scope) :where(input[type="checkbox"], input[type="radio"]) { width: 14px; height: 14px; accent-color: var(--accent); }
  :where(.vdt-scope) :where(button, [role="button"]) { cursor: pointer; }
  :where(.vdt-scope) :where(button:disabled) { cursor: not-allowed; }
  :where(.vdt-scope) :where(input[type="search"])::-webkit-search-decoration,
  :where(.vdt-scope) :where(input[type="search"])::-webkit-search-cancel-button { -webkit-appearance: none; }
  :where(.vdt-scope) :where(input)::placeholder { color: var(--foreground-subtle); opacity: 1; }
  :where(.vdt-scope) :where(a) { color: inherit; text-decoration: inherit; }
  :where(.vdt-scope) :where(h1, h2, h3, h4, h5, h6) { font-size: inherit; font-weight: inherit; }
  :where(.vdt-scope) :where(ul, ol) { list-style: none; }
  :where(.vdt-scope) :where(table) { border-collapse: collapse; border-color: inherit; text-indent: 0; }
  :where(.vdt-scope) :where(hr) { height: 0; border-top-width: 1px; }
  :where(.vdt-scope) :where(img, svg, video, canvas) { display: block; vertical-align: middle; }
  :where(.vdt-scope) :where(svg) { flex: none; }
  :where(.vdt-scope) :where(kbd, code, pre, samp) {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
                 'Liberation Mono', 'Courier New', monospace;
    font-size: 1em;
  }
  :where(.vdt-scope) :where(pre) { white-space: pre-wrap; overflow-wrap: anywhere; }
  :where(.vdt-scope) :where(summary) { display: list-item; }
  :where(.vdt-scope) :where([hidden]:not([hidden="until-found"])) { display: none !important; }
}

/* Custom scrollbar for any scrollable surface inside the scope. Thin,
 * theme-aware, the thumb brightens on hover. */
.vdt-scope * {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.vdt-scope *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.vdt-scope *::-webkit-scrollbar-track { background: transparent; }
.vdt-scope *::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.vdt-scope *::-webkit-scrollbar-thumb:hover {
  background-color: var(--muted-foreground);
  background-clip: padding-box;
}

/* The scope row scrolls horizontally when the console is narrower than the
 * sum of its chips, but we hide the scrollbar chrome — a permanent 8px-tall
 * scroller below the row looks like a UI bug. The row stays draggable +
 * wheel-scrollable; the visible affordance is the cut-off last chip plus a
 * fade mask on both edges. */
.vdt-scope .vdt-tablist {
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 14px, black calc(100% - 14px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, black 14px, black calc(100% - 14px), transparent 100%);
}
.vdt-scope .vdt-tablist::-webkit-scrollbar { display: none; }

/* The fixed-position host element sits above EVERYTHING on the host page.
 * 2^31 - 1 is the maximum 32-bit signed int — defensive against host pages
 * that use absurd z-index values for their own modals. The host itself is
 * inert; only the capsule / console below it take pointer events. */
.vdt-host {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  pointer-events: none;
}
.vdt-host > .vdt-scope { display: contents; }
.vdt-scope .vdt-capsule,
.vdt-scope .vdt-console { pointer-events: auto; }

/* Selection and focus inside the overlay come from the palette, not the UA. */
.vdt-scope ::selection { background: #6530ba; color: #fff; }
.vdt-scope :where(button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.vdt-scope input { caret-color: var(--accent); }

/* Motion. One authored moment: the console arrives from its edge, the capsule
 * pops. Everything else is a 150–200ms state change. */
@keyframes vdt-pop {
  from { opacity: 0; transform: translateX(-50%) scale(0.94); }
  to   { opacity: 1; transform: translateX(-50%) scale(1); }
}
@keyframes vdt-from-bottom { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes vdt-from-top    { from { transform: translateY(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes vdt-from-left   { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes vdt-from-right  { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes vdt-window-in   { from { transform: scale(0.97); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes vdt-spin { to { transform: rotate(360deg); } }
.vdt-scope .vdt-spinner { animation: vdt-spin 900ms linear infinite; }

/* ---- Capsule (closed) --------------------------------------------------- */
.vdt-scope .vdt-capsule {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  height: 40px;
  padding: 0 14px 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--foreground-muted);
  font-size: 12px;
  white-space: nowrap;
  --pill-glow: var(--accent);
  box-shadow:
    0 12px 32px -10px oklch(0 0 0 / 60%),
    0 0 0 1px color-mix(in oklch, var(--pill-glow) 18%, transparent);
  animation: vdt-pop 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
  transition: box-shadow 180ms ease, transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.vdt-scope .vdt-capsule:hover {
  transform: translateX(-50%) translateY(-1px);
  box-shadow:
    0 14px 36px -10px oklch(0 0 0 / 65%),
    0 0 0 1px color-mix(in oklch, var(--pill-glow) 45%, transparent);
}
.vdt-scope .vdt-capsule:active { transform: translateX(-50%) scale(0.98); }
.vdt-scope .vdt-capsule-mark { width: 20px; height: 20px; flex: none; color: var(--accent); }
.vdt-scope .vdt-capsule-chips { display: inline-flex; align-items: center; gap: 12px; }
.vdt-scope .vdt-capsule-chips > .vdt-chip + .vdt-chip { position: relative; padding-left: 12px; }
.vdt-scope .vdt-capsule-chips > .vdt-chip + .vdt-chip::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 14px;
  transform: translateY(-50%);
  background: var(--border);
}
.vdt-scope .vdt-capsule-status {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  font-weight: 600;
  color: var(--foreground);
}

/* Busy kinds re-colour the ring + mark so the capsule reads as one state. */
.vdt-scope .vdt-capsule[data-kind="reconnecting"] { --pill-glow: var(--warning); }
.vdt-scope .vdt-capsule[data-kind="error"]        { --pill-glow: var(--danger); }
.vdt-scope .vdt-capsule[data-kind="reconnecting"] .vdt-capsule-mark { color: var(--warning); }
.vdt-scope .vdt-capsule[data-kind="error"] .vdt-capsule-mark        { color: var(--danger); }
@keyframes vdt-pill-pulse {
  0%, 100% { box-shadow: 0 12px 32px -10px oklch(0 0 0 / 60%), 0 0 0 1px color-mix(in oklch, var(--pill-glow) 25%, transparent), 0 0 14px color-mix(in oklch, var(--pill-glow) 25%, transparent); }
  50%      { box-shadow: 0 12px 32px -10px oklch(0 0 0 / 60%), 0 0 0 1.5px color-mix(in oklch, var(--pill-glow) 60%, transparent), 0 0 28px color-mix(in oklch, var(--pill-glow) 60%, transparent); }
}
.vdt-scope .vdt-capsule[data-busy="true"] { animation: vdt-pill-pulse 2400ms ease-in-out infinite; }

/* Three staggered fading dots after "Compiling" / "Reconnecting". */
.vdt-scope .vdt-dots { display: inline-flex; align-items: baseline; gap: 1px; margin-left: 1px; }
.vdt-scope .vdt-dots > span {
  display: inline-block; width: 3px; height: 3px; border-radius: 50%;
  background: currentColor; opacity: 0.25;
  animation: vdt-dot-tick 1400ms ease-in-out infinite;
}
.vdt-scope .vdt-dots > span:nth-child(2) { animation-delay: 180ms; }
.vdt-scope .vdt-dots > span:nth-child(3) { animation-delay: 360ms; }
@keyframes vdt-dot-tick {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  35%      { opacity: 1;    transform: translateY(-1px); }
  60%      { opacity: 0.4;  transform: translateY(0); }
}

/* ---- Shared atoms ------------------------------------------------------- */
.vdt-scope .vdt-chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.vdt-scope .vdt-chip b { color: var(--foreground); font-weight: 600; }
.vdt-scope .vdt-chip-err { color: var(--danger); }
.vdt-scope .vdt-chip-err b { color: var(--danger); }
.vdt-scope .vdt-chip-warn { color: var(--warning); }
.vdt-scope .vdt-chip-warn b { color: var(--warning); }
.vdt-scope .vdt-chip-info { color: var(--info); }
.vdt-scope .vdt-chip-info b { color: var(--info); }

.vdt-scope .vdt-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; background: var(--border-strong); }
.vdt-scope .vdt-dot-ok   { background: var(--success); box-shadow: 0 0 0 3px color-mix(in oklch, var(--success) 18%, transparent); }
.vdt-scope .vdt-dot-warn { background: var(--warning); box-shadow: 0 0 0 3px color-mix(in oklch, var(--warning) 18%, transparent); }
.vdt-scope .vdt-dot-err  { background: var(--danger);  box-shadow: 0 0 0 3px color-mix(in oklch, var(--danger) 18%, transparent); }
.vdt-scope .vdt-dot-info { background: var(--info);    box-shadow: 0 0 0 3px color-mix(in oklch, var(--info) 18%, transparent); }
.vdt-scope .vdt-dot-idle { background: var(--border-strong); }

.vdt-scope .vdt-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 6px; border-radius: 4px;
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  border: 1px solid var(--border); color: var(--foreground-muted); background: var(--muted);
  white-space: nowrap;
}
.vdt-scope .vdt-tag-ok   { color: var(--success); border-color: color-mix(in oklch, var(--success) 35%, transparent); background: color-mix(in oklch, var(--success) 14%, transparent); }
.vdt-scope .vdt-tag-err  { color: var(--danger);  border-color: color-mix(in oklch, var(--danger) 35%, transparent);  background: color-mix(in oklch, var(--danger) 14%, transparent); }
.vdt-scope .vdt-tag-warn { color: var(--warning); border-color: color-mix(in oklch, var(--warning) 35%, transparent); background: color-mix(in oklch, var(--warning) 14%, transparent); }
.vdt-scope .vdt-tag-info { color: var(--info);    border-color: color-mix(in oklch, var(--info) 35%, transparent);    background: color-mix(in oklch, var(--info) 14%, transparent); }

.vdt-scope .vdt-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600; background: var(--muted); color: var(--foreground-muted);
}
.vdt-scope .vdt-badge-acc { background: var(--accent); color: var(--accent-foreground); }
.vdt-scope .vdt-badge-err { background: color-mix(in oklch, var(--danger) 22%, transparent); color: var(--danger); }

.vdt-scope .vdt-kbd {
  display: inline-block; padding: 1px 5px; border-radius: 4px;
  border: 1px solid var(--border-strong); background: var(--background-elevated);
  font-size: 10.5px; color: var(--foreground-muted); font-family: inherit; line-height: 1.3;
}
.vdt-scope .vdt-iconbtn {
  width: 26px; height: 26px; border-radius: 6px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--foreground-muted); background: transparent; border: 0;
  transition: background-color 150ms ease, color 150ms ease;
}
.vdt-scope .vdt-iconbtn:hover { background: var(--muted); color: var(--foreground); }
.vdt-scope .vdt-iconbtn-on { background: var(--accent); color: var(--accent-foreground); }
.vdt-scope .vdt-iconbtn-on:hover { background: var(--accent-dim); color: #fff; }
.vdt-scope .vdt-sp { flex: 1; }

/* ---- Console (open) ----------------------------------------------------- */
.vdt-scope .vdt-console {
  position: absolute;
  display: flex;
  flex-direction: column;
  background: var(--background);
  color: var(--foreground);
  container-type: inline-size;
  container-name: vdt-console;
  overflow: hidden;
}
.vdt-scope .vdt-console[data-dock="bottom"] { left: 0; right: 0; bottom: 0; border-top: 1px solid var(--border); box-shadow: 0 -24px 60px -20px oklch(0 0 0 / 65%); animation: vdt-from-bottom 220ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.vdt-scope .vdt-console[data-dock="top"]    { left: 0; right: 0; top: 0;    border-bottom: 1px solid var(--border); box-shadow: 0 24px 60px -20px oklch(0 0 0 / 65%); animation: vdt-from-top 220ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.vdt-scope .vdt-console[data-dock="left"]   { top: 0; bottom: 0; left: 0;   border-right: 1px solid var(--border); box-shadow: 24px 0 60px -20px oklch(0 0 0 / 65%); animation: vdt-from-left 220ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.vdt-scope .vdt-console[data-dock="right"]  { top: 0; bottom: 0; right: 0;  border-left: 1px solid var(--border); box-shadow: -24px 0 60px -20px oklch(0 0 0 / 65%); animation: vdt-from-right 220ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.vdt-scope .vdt-console[data-dock="window"] {
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: var(--shadow-panel);
  animation: vdt-window-in 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.vdt-scope .vdt-console[data-dock="window"] .vdt-bar { cursor: grab; }
.vdt-scope .vdt-console[data-dock="window"] .vdt-bar:active { cursor: grabbing; }

/* Resize grip on the inner edge. The hit area is 10px; the visible bar is a
 * 4px pill that brightens on hover, like a browser's devtools splitter. */
.vdt-scope .vdt-grip { position: absolute; z-index: 2; touch-action: none; }
.vdt-scope .vdt-grip::after {
  content: '';
  position: absolute;
  border-radius: 4px;
  background: var(--border-strong);
  transition: background-color 150ms ease, transform 150ms ease;
}
.vdt-scope .vdt-console[data-dock="bottom"] .vdt-grip,
.vdt-scope .vdt-console[data-dock="top"] .vdt-grip { left: 0; right: 0; height: 10px; cursor: row-resize; }
.vdt-scope .vdt-console[data-dock="bottom"] .vdt-grip { top: 0; }
.vdt-scope .vdt-console[data-dock="top"] .vdt-grip { bottom: 0; }
.vdt-scope .vdt-console[data-dock="bottom"] .vdt-grip::after,
.vdt-scope .vdt-console[data-dock="top"] .vdt-grip::after { left: 50%; top: 3px; width: 44px; height: 4px; transform: translateX(-50%); }
.vdt-scope .vdt-console[data-dock="left"] .vdt-grip,
.vdt-scope .vdt-console[data-dock="right"] .vdt-grip { top: 0; bottom: 0; width: 10px; cursor: col-resize; }
.vdt-scope .vdt-console[data-dock="left"] .vdt-grip { right: 0; }
.vdt-scope .vdt-console[data-dock="right"] .vdt-grip { left: 0; }
.vdt-scope .vdt-console[data-dock="left"] .vdt-grip::after,
.vdt-scope .vdt-console[data-dock="right"] .vdt-grip::after { top: 50%; left: 3px; width: 4px; height: 44px; transform: translateY(-50%); }
.vdt-scope .vdt-grip:hover::after { background: var(--accent); }

.vdt-scope .vdt-win-resize {
  position: absolute; right: 0; bottom: 0; width: 18px; height: 18px;
  cursor: nwse-resize; touch-action: none;
}
.vdt-scope .vdt-win-resize::after {
  content: '';
  position: absolute; right: 4px; bottom: 4px; width: 8px; height: 8px;
  border-right: 2px solid var(--border-strong); border-bottom: 2px solid var(--border-strong);
  border-radius: 0 0 3px 0;
}
.vdt-scope .vdt-win-resize:hover::after { border-color: var(--accent); }

/* Header: mark · search (or title) · scopes · dock menu · close. */
.vdt-scope .vdt-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 10px 8px 14px;
  flex: none;
  min-width: 0;
}
.vdt-scope .vdt-console[data-dock="bottom"] .vdt-bar { padding-top: 14px; }
.vdt-scope .vdt-bar-mark { width: 20px; height: 20px; flex: none; }
.vdt-scope .vdt-bar-title { display: inline-flex; align-items: baseline; gap: 6px; flex: none; }
.vdt-scope .vdt-bar-brand { font-size: 13px; font-weight: 600; color: var(--foreground); }
.vdt-scope .vdt-bar-kicker { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--foreground-muted); }

.vdt-scope .vdt-search {
  flex: 0 1 360px;
  min-width: 160px;
  height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--card);
  color: var(--foreground-subtle);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.vdt-scope .vdt-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 22%, transparent);
}
.vdt-scope .vdt-search input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--foreground);
  font: inherit;
  font-size: 12.5px;
}
.vdt-scope .vdt-search input::placeholder { color: var(--foreground-subtle); }
.vdt-scope .vdt-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.vdt-scope .vdt-scopes {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 4px;
}
.vdt-scope .vdt-scopes::-webkit-scrollbar { display: none; }
.vdt-scope .vdt-scope {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--foreground-muted);
  border: 0;
  background: transparent;
  transition: background-color 150ms ease, color 150ms ease;
}
.vdt-scope .vdt-scope:hover { background: var(--muted); color: var(--foreground); }
.vdt-scope .vdt-scope-on { background: var(--muted); color: var(--foreground); box-shadow: inset 0 0 0 1px var(--border-strong); }
.vdt-scope .vdt-scope-sep { margin-left: 10px; position: relative; }
.vdt-scope .vdt-scope-sep::before {
  content: ''; position: absolute; left: -6px; top: 50%; width: 1px; height: 16px;
  transform: translateY(-50%); background: var(--border);
}

/* Body: results | detail, or one structural panel. */
.vdt-scope .vdt-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  border-top: 1px solid var(--border);
}
.vdt-scope .vdt-body-panel { display: block; overflow: auto; }
.vdt-scope .vdt-results { overflow: auto; outline-offset: -2px; }
.vdt-scope .vdt-side {
  border-left: 1px solid var(--border);
  background: var(--card);
  overflow: auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.vdt-scope .vdt-row {
  width: 100%;
  display: grid;
  grid-template-columns: 14px 92px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: inherit;
  text-align: left;
  transition: background-color 120ms ease;
}
.vdt-scope .vdt-row:hover { background: color-mix(in oklch, var(--muted) 60%, transparent); }
.vdt-scope .vdt-row-sel { background: color-mix(in oklch, var(--accent) 10%, transparent); }
.vdt-scope .vdt-row-sel:hover { background: color-mix(in oklch, var(--accent) 14%, transparent); }
.vdt-scope .vdt-row-src { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--foreground-subtle); }
.vdt-scope .vdt-row-sel .vdt-row-src { color: var(--accent); }
.vdt-scope .vdt-row-main { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.vdt-scope .vdt-row-name { color: var(--foreground); flex: none; }
.vdt-scope .vdt-row-sel .vdt-row-name { color: var(--accent); }
.vdt-scope .vdt-row-summary {
  color: var(--foreground-subtle);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.vdt-scope .vdt-row-meta { display: inline-flex; align-items: center; gap: 8px; color: var(--foreground-muted); font-size: 11.5px; white-space: nowrap; }
.vdt-scope .vdt-row-api { color: var(--foreground-subtle); }
.vdt-scope .vdt-row-time { color: var(--foreground-subtle); font-variant-numeric: tabular-nums; }

.vdt-scope .vdt-detail { display: flex; flex-direction: column; min-height: 100%; }
.vdt-scope .vdt-detail-head {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-bottom: 1px solid var(--border);
  font-size: 12px; min-width: 0;
}
.vdt-scope .vdt-detail-name { color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.vdt-scope .vdt-detail-body { overflow: auto; }

.vdt-scope .vdt-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; text-align: center; padding: 40px 24px; height: 100%;
}
.vdt-scope .vdt-empty-title { font-size: 13px; color: var(--foreground); font-weight: 500; }
.vdt-scope .vdt-empty-hint { font-size: 12px; color: var(--foreground-subtle); max-width: 40ch; }
.vdt-scope .vdt-empty-side { padding: 24px; }

.vdt-scope .vdt-card-body { padding: 12px; min-width: 0; }
.vdt-scope .vdt-trace-detail { padding: 12px; min-width: 0; font-size: 12px; }
.vdt-scope .vdt-trace-summary { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--foreground-muted); }
.vdt-scope .vdt-trace-summary strong { color: var(--foreground); font-weight: 500; }
.vdt-scope .vdt-trace-id { display: block; margin: 4px 0 12px; font-size: 10px; color: var(--foreground-subtle); overflow-wrap: anywhere; }
.vdt-scope .vdt-trace-context { margin: 0 0 12px; color: var(--foreground-muted); line-height: 1.5; }
.vdt-scope .vdt-trace-span { border-bottom: 1px solid var(--border); }
.vdt-scope .vdt-trace-span-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; padding: 8px; cursor: pointer; }
.vdt-scope .vdt-trace-span-head:hover { background: var(--background-elevated); }
.vdt-scope .vdt-trace-span-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.vdt-scope .vdt-trace-span-label { display: flex; align-items: baseline; gap: 4px; min-width: 0; }
.vdt-scope .vdt-trace-span-name { overflow-wrap: anywhere; min-width: 0; }
.vdt-scope .vdt-trace-chevron { width: 12px; height: 12px; color: var(--foreground-subtle); transform: rotate(-90deg); }
.vdt-scope .vdt-trace-span[open] > summary .vdt-trace-chevron { transform: none; }
.vdt-scope .vdt-trace-span-duration { font-variant-numeric: tabular-nums; color: var(--foreground-muted); }
.vdt-scope .vdt-trace-span-bar { position: relative; grid-column: 1 / -1; height: 4px; overflow: hidden; background: var(--background-elevated); border-radius: 2px; }
.vdt-scope .vdt-trace-span-bar > span { position: absolute; height: 100%; background: var(--accent); }
.vdt-scope .vdt-trace-span[data-status="error"] .vdt-trace-span-name, .vdt-scope .vdt-trace-span-message { color: var(--danger); }
.vdt-scope .vdt-trace-span[data-status="error"] .vdt-trace-span-bar > span { background: var(--danger); }
.vdt-scope .vdt-trace-span-body { padding: 4px 8px 12px; }
.vdt-scope .vdt-trace-span-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--foreground-subtle); font-size: 10px; overflow-wrap: anywhere; }
.vdt-scope .vdt-trace-span-message { margin: 8px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.vdt-scope .vdt-trace-attributes-label { margin: 12px 0 6px; color: var(--foreground-muted); font-weight: 500; }
.vdt-scope .vdt-trace-attributes > div { padding-block: 6px; }
.vdt-scope .vdt-trace-attributes dt { color: var(--foreground-subtle); font-size: 11px; overflow-wrap: anywhere; }
.vdt-scope .vdt-trace-attributes pre { margin-top: 2px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11px; }
.vdt-scope .vdt-trace-no-attributes { margin-top: 8px; color: var(--foreground-subtle); }
.vdt-scope .vdt-card-body > :last-child { margin-bottom: 0; }
.vdt-scope .vdt-record-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding-block: 4px; min-width: 0; }
.vdt-scope .vdt-record-row > code { overflow-wrap: anywhere; min-width: 0; }
.vdt-scope .vdt-record-description { flex: 1 1 240px; overflow-wrap: anywhere; }
.vdt-scope .vdt-pending-filter, .vdt-scope .vdt-background-filter { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: transparent; font-size: 11px; }
.vdt-scope .vdt-foot .vdt-pending-filter { color: var(--warning); }
.vdt-scope .vdt-pending-filter:hover, .vdt-scope .vdt-background-filter:hover { background: var(--muted); }
.vdt-scope .vdt-pending-filter[aria-pressed="true"] { background: var(--muted); border-color: var(--warning); }
.vdt-scope .vdt-pending-filter:focus-visible, .vdt-scope .vdt-background-filter:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.vdt-scope .vdt-background-filter[aria-pressed="true"] { background: var(--muted); border-color: var(--accent); }

/* Footer: connection chips, route, key hints. */
.vdt-scope .vdt-foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 14px;
  border-top: 1px solid var(--border);
  background: var(--background-elevated);
  font-size: 11px;
  color: var(--foreground-subtle);
  min-width: 0;
  overflow: hidden;
}
.vdt-scope .vdt-foot .vdt-chip { color: var(--foreground-muted); }
.vdt-scope .vdt-foot-route code { color: var(--foreground-muted); }
.vdt-scope .vdt-hints { display: inline-flex; gap: 12px; white-space: nowrap; }
.vdt-scope .vdt-hints > span { display: inline-flex; align-items: center; gap: 4px; }

/* Dock menu popover. */
.vdt-scope .vdt-dockmenu { position: relative; flex: none; }
.vdt-scope .vdt-dockmenu-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 3;
  min-width: 260px;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: var(--background-elevated);
  box-shadow: var(--shadow-panel);
  animation: vdt-window-in 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.vdt-scope .vdt-console[data-dock="top"] .vdt-dockmenu-pop,
.vdt-scope .vdt-console[data-dock="left"] .vdt-dockmenu-pop,
.vdt-scope .vdt-console[data-dock="right"] .vdt-dockmenu-pop,
.vdt-scope .vdt-console[data-dock="bottom"] .vdt-dockmenu-pop { top: calc(100% + 6px); }
.vdt-scope .vdt-dockmenu-row { display: flex; gap: 4px; }
.vdt-scope .vdt-dockmenu-item {
  flex: 1; height: 34px; border-radius: 7px; border: 1px solid transparent;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--foreground-muted); background: transparent;
  transition: background-color 150ms ease, color 150ms ease;
}
.vdt-scope .vdt-dockmenu-item:hover { background: var(--muted); color: var(--foreground); }
.vdt-scope .vdt-dockmenu-item-on { background: color-mix(in oklch, var(--accent) 16%, transparent); color: var(--accent); border-color: color-mix(in oklch, var(--accent) 40%, transparent); }
.vdt-scope .vdt-dockmenu-push {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
  margin-top: 8px; padding: 8px 6px 4px; border-top: 1px solid var(--border);
  cursor: pointer;
}
.vdt-scope .vdt-dockmenu-push-off { opacity: .5; cursor: not-allowed; }
.vdt-scope .vdt-dockmenu-push input { margin: 3px 0 0; accent-color: var(--accent); }
.vdt-scope .vdt-dockmenu-push-label { display: block; font-size: 12px; color: var(--foreground); }
.vdt-scope .vdt-dockmenu-push-hint { display: block; font-size: 11px; color: var(--foreground-subtle); line-height: 1.4; }

/* Narrow console (side dock, small window): stack list over detail and drop
 * the scope labels to icons. Container queries, so a window dragged narrow
 * behaves exactly like a side dock. */
@container vdt-console (max-width: 899px) {
  .vdt-scope .vdt-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(160px, 45%); }
  .vdt-scope .vdt-side { border-left: 0; border-top: 1px solid var(--border); }
  .vdt-scope .vdt-body[data-empty="true"] { grid-template-rows: minmax(0, 1fr); }
  .vdt-scope .vdt-body[data-empty="true"] .vdt-side { display: none; }
  .vdt-scope .vdt-row { grid-template-columns: 14px minmax(0, 1fr) auto; }
  .vdt-scope .vdt-row-src { display: none; }
  .vdt-scope .vdt-hints > span:nth-child(-n + 2) { display: none; }
}
/* Below ~1240px the ten labelled chips plus the search no longer share one
 * row: the chips drop to icons (All keeps its word), the badges stay. */
@container vdt-console (max-width: 1239px) {
  .vdt-scope .vdt-scope-label { display: none; }
  .vdt-scope .vdt-scope[data-scope="all"] .vdt-scope-label { display: inline; }
}
@container vdt-console (max-width: 640px) {
  .vdt-scope .vdt-bar { flex-wrap: wrap; row-gap: 6px; }
  .vdt-scope .vdt-foot { flex-wrap: wrap; row-gap: 6px; }
  .vdt-scope .vdt-foot-route { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  /* handle 18 + mark 20 + dock 26 + close 26 + four 10px gaps + bar padding */
  .vdt-scope .vdt-search { flex: 1 1 calc(100% - 160px); order: 1; }
  .vdt-scope .vdt-bar-title { order: 1; }
  .vdt-scope .vdt-dockmenu { order: 2; }
  .vdt-scope .vdt-bar > .vdt-iconbtn:last-child { order: 3; }
  .vdt-scope .vdt-scopes { order: 4; flex-basis: 100%; padding: 0; }
  .vdt-scope .vdt-row-meta .vdt-row-api { display: none; }
  .vdt-scope .vdt-hints { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* `[data-dock]` keeps this at the specificity of the per-dock entrance
   * rules above; a bare `.vdt-console` here loses to them and the console
   * still slides in (measured). */
  .vdt-scope .vdt-capsule,
  .vdt-scope .vdt-console[data-dock],
  .vdt-scope .vdt-dockmenu-pop { animation: none; transition: none; }
  .vdt-scope .vdt-capsule[data-busy="true"] { animation: none; }
  .vdt-scope .vdt-dots > span { animation: none; opacity: 0.6; }
  .vdt-scope .vdt-capsule:hover { transform: translateX(-50%); }
}

/* The overlay's own error state (components/boundary.tsx): inside the chrome,
 * never the page's. */
.vdt-scope .vdt-crash {
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
  padding: 14px 16px; color: var(--foreground);
  background: color-mix(in oklch, var(--danger) 10%, var(--background));
  border: 1px solid color-mix(in oklch, var(--danger) 40%, transparent);
  border-radius: 10px; margin: 12px;
}
.vdt-scope .vdt-capsule + .vdt-crash,
.vdt-host[data-open="false"] .vdt-crash {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  margin: 0; pointer-events: auto; max-width: min(90vw, 560px);
}
.vdt-scope .vdt-crash-title { font-size: 12.5px; font-weight: 600; }
.vdt-scope .vdt-crash-message { margin: 0; padding: 0; background: transparent; border: 0; color: var(--danger); font-size: 11.5px; white-space: pre-wrap; }
.vdt-scope .vdt-crash-reset {
  padding: 5px 10px; border-radius: 6px; border: 1px solid var(--border-strong);
  background: var(--card); color: var(--foreground); font-size: 12px;
}
.vdt-scope .vdt-crash-reset:hover { border-color: var(--accent); }

/* Window drag handle — the one spot in the bar that is always "hold here". */
.vdt-scope .vdt-win-handle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 26px; margin-right: -4px; border-radius: 6px;
  color: var(--foreground-subtle); cursor: grab; flex: none;
}
.vdt-scope .vdt-win-handle:hover { color: var(--foreground); background: var(--muted); }
.vdt-scope .vdt-console[data-dock="window"] .vdt-bar:active .vdt-win-handle { cursor: grabbing; }