agentgui 1.0.948 → 1.0.949

package/site/app/vendor/anentrypoint-design/247420.css

@@ -54,8 +54,32 @@
 
   --accent:      var(--green);
   --accent-fg:   var(--paper);
+  --accent-bright: var(--green-2); /* base value so var(--accent-bright) never falls back empty; ink + [data-accent] retune it */
   --accent-tint: color-mix(in oklab, var(--accent) 26%, var(--bg));
 
+  /* On-color foregrounds — text/icons that sit ON a saturated fill (accent,
+     danger, category chips). Theme-driven so white-on-color never hard-codes
+     #fff. --on-accent tracks --accent-fg; --on-color is the generic light
+     foreground for any colored fill. */
+  --on-accent:   var(--accent-fg);
+  --on-color:    #fff;
+
+  /* Scrims — modal/overlay backdrops. Derived from --fg so a dark theme dims
+     with its own ink rather than a baked rgba(0,0,0). */
+  --scrim:        color-mix(in oklab, var(--fg) 40%, transparent);
+  --scrim-strong: color-mix(in oklab, var(--fg) 72%, transparent);
+  --scrim-media:  color-mix(in oklab, var(--fg) 85%, transparent);
+
+  /* Category palette — surfaces (forum tags, project cards) that color-code by
+     category. Canonical so a theme/accent swap recolors categories instead of
+     drifting from a private --cat-* block. Derived from the base palette. */
+  --cat-green:   var(--green-2);
+  --cat-purple:  var(--purple-2);
+  --cat-mascot:  var(--mascot);
+  --cat-sun:     var(--sun);
+  --cat-flame:   var(--flame);
+  --cat-sky:     var(--sky);
+
   --panel-bg:     var(--bg);
   --panel-bg-2:   var(--bg-2);
   --panel-accent: var(--accent);
@@ -277,6 +301,47 @@
   --panel-text-3: inherit;
   --panel-accent-2: inherit;
   --panel-shadow: inherit;
+  --on-accent: inherit;
+  --on-color: inherit;
+  --scrim: inherit;
+  --scrim-strong: inherit;
+  --scrim-media: inherit;
+  --cat-green: inherit;
+  --cat-purple: inherit;
+  --cat-mascot: inherit;
+  --cat-sun: inherit;
+  --cat-flame: inherit;
+  --cat-sky: inherit;
+}
+
+/* ============================================================
+   Named-theme preset contract
+   ------------------------------------------------------------
+   A theme is one [data-theme="X"] block that overrides ONLY the semantic
+   surface tokens — never component rules, never raw literals in component
+   sheets. The base :root above IS the "paper" theme; [data-theme="paper"]
+   restates it so the attribute is explicit and round-trippable. To add a
+   theme: copy a block, rename the attr, retune the ~8 semantic tokens.
+   ============================================================ */
+.ds-247420[data-theme="paper"] {
+  color-scheme: light;
+  --bg: var(--paper); --bg-2: var(--paper-2); --bg-3: var(--paper-3);
+  --fg: var(--ink);   --fg-2: var(--ink-2);   --fg-3: var(--ink-3);
+  --accent: var(--green); --accent-fg: var(--paper);
+}
+
+/* thebird — warm-paper brand preset. A first-class swappable theme: it lives
+   here in the canonical layer (not as a global :root override) so any consumer
+   can opt in with data-theme="thebird". The OS-shell chrome (bar heights,
+   window controls) stays in src/kits/os/theme.css; only color lives here. */
+.ds-247420[data-theme="thebird"] {
+  color-scheme: light;
+  --paper:   #F5F0E4;
+  --paper-2: #EFE9DB;
+  --paper-3: #E3DAC7;
+  --bg: var(--paper); --bg-2: var(--paper-2); --bg-3: var(--paper-3);
+  --fg: var(--ink);   --fg-2: var(--ink-2);   --fg-3: var(--ink-3);
+  --accent: var(--green); --accent-fg: var(--paper);
 }
 
 .ds-247420[data-density="compact"]     { --density: 0.75; }
@@ -322,6 +387,10 @@
               0 2px 4px  color-mix(in oklab, var(--fg) 6%,  transparent);
   --shadow-3: 0 12px 32px color-mix(in oklab, var(--fg) 14%, transparent),
               0 4px 8px   color-mix(in oklab, var(--fg) 8%,  transparent);
+  /* Overlay elevation — the float for dialogs/lightboxes that sit above a
+     scrim; heavier than --shadow-3 and theme-driven (was raw rgba(0,0,0,.4)). */
+  --shadow-overlay: 0 12px 40px color-mix(in oklab, var(--fg) 28%, transparent),
+                    0 4px 12px  color-mix(in oklab, var(--fg) 16%, transparent);
   --z-dropdown:  600;
   --z-popover:   700;
   --z-modal:     800;
@@ -466,7 +535,7 @@
 
 .ds-247420 pre {
   font-family: var(--ff-mono);
-  background: var(--panel-bg, #15151a);
+  background: var(--panel-bg);
   color: var(--panel-text, inherit);
   padding: var(--space-5);
   overflow-x: auto;
@@ -477,7 +546,7 @@
 }
 .ds-247420 pre .k { color: var(--mascot); }
 .ds-247420 pre .s { color: var(--sun); }
-.ds-247420 pre .c { color: #9A9AA2; }
+.ds-247420 pre .c { color: var(--fg-3); }
 .ds-247420 pre .n { color: var(--green-2); }
 
 /* ============================================================
@@ -662,7 +731,14 @@
   align-self: stretch;
   height: 100%;
 }
-.ds-247420 .app-main > * { min-height: 0; }
+/* Document children (hero, sections, panels) keep their natural height in the
+   scrolling flex column. Without flex-shrink:0 the flex algorithm shrinks them
+   toward min-height:0 once total content exceeds the fixed-height .app-main,
+   collapsing every section to 0 and piling content on top of itself — the
+   failure mode any long-scroll page (a marketing/landing route) hits. Grow
+   children (.chat/.grow/etc.) re-assert flex:1 1 auto below via higher
+   specificity, so a single full-height pane still fills the region. */
+.ds-247420 .app-main > * { min-height: 0; flex-shrink: 0; }
 /* The main region scrolls its own overflow at every breakpoint (previously
    only ≥901px), so a fixed-height .app never clips route content and inner
    panels don't fight the page scroll. */
@@ -864,6 +940,11 @@
 .ds-247420 .row.row-state-disabled { opacity: 0.5; pointer-events: none; }
 .ds-247420 .row.row-state-error { background: color-mix(in oklab, var(--flame) 10%, var(--bg-2)); }
 .ds-247420 .row.row-state-error::before { background: var(--flame); }
+/* rail tones — a persistent status colour on the leading rail (the ::before
+   bar). Active/hover/error still win via their own rules below source order. */
+.ds-247420 .row.rail-green::before  { background: var(--accent); }
+.ds-247420 .row.rail-purple::before { background: var(--purple-2, #7F18A4); }
+.ds-247420 .row.rail-flame::before  { background: var(--flame); }
 .ds-247420 .row-grid { /* explicit grid-template-columns set inline */ }
 
 .ds-247420 .row .code  { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); }
@@ -921,10 +1002,10 @@
 .ds-247420 .cli .copy   {
   padding: 8px 16px; background: transparent; color: var(--paper);
   font-size: var(--fs-tiny); text-transform: uppercase; letter-spacing: var(--tr-caps);
-  cursor: pointer; box-shadow: inset 0 0 0 1px #6A6A70;
+  cursor: pointer; box-shadow: inset 0 0 0 1px var(--rule-strong);
   border-radius: var(--r-pill);
 }
-.ds-247420 .cli .copy:hover { background: #6A6A70; }
+.ds-247420 .cli .copy:hover { background: var(--fg-3); }
 
 /* Multi-line CLI block: when .cli holds .cli-line / .cli-cmt children
    (quickstart scripts, multi-command snippets) it stacks as a column
@@ -1026,6 +1107,7 @@
 /* ============================================================
    Currently shipping dots
    ============================================================ */
+.ds-247420 .ds-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; vertical-align: middle; }
 .ds-247420 .ds-dot-on  { color: var(--green-2); }
 .ds-247420 .ds-dot-off { color: var(--fg-3); }
 .ds-247420 .ds-dot-live { color: var(--green-2); }
@@ -1118,8 +1200,13 @@
   .ds-247420 .app-topbar {
     gap: var(--space-2); padding: 12px var(--space-3);
   }
+  /* When the topbar is folded into .app-chrome it is a flex:0 0 auto child, so
+     it sizes to its nav's content and overflows the viewport instead of letting
+     the nav's own overflow-x:auto engage. Constrain it to the chrome width so
+     the horizontally-scrolling nav stays inside the screen. */
+  .ds-247420 .app-chrome > .app-topbar { max-width: 100%; min-width: 0; flex-basis: 100%; }
   .ds-247420 .app-topbar > nav {
-    flex: 1 1 100%; margin-left: 0; order: 3;
+    flex: 1 1 100%; margin-left: 0; order: 3; min-width: 0; max-width: 100%;
     display: flex; gap: 2px; flex-wrap: nowrap;
     overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
   }
@@ -1617,7 +1704,7 @@
 .ds-247420 .btn-primary.danger {
   background: var(--warn);
   border-color: var(--warn);
-  color: #fff;
+  color: var(--on-color);
 }
 
 /* ── Preview ──────────────────────────────────────────────── */
@@ -1801,7 +1888,7 @@
 .ds-247420 .ds-segmented .ds-seg-btn:hover { color: var(--fg); }
 .ds-247420 .ds-segmented .ds-seg-btn.is-on {
   background: var(--bg); color: var(--fg);
-  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
+  box-shadow: var(--shadow-1);
 }
 .ds-247420 .ds-theme-toggle.btn {
   font-family: var(--ff-mono); font-size: var(--fs-xs);
@@ -2571,7 +2658,7 @@
 }
 .ds-247420 .ds-field input[aria-invalid="true"],
 .ds-247420 .ds-field textarea[aria-invalid="true"] {
-  box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--flame, #d64545);
+  box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--flame);
 }
 
 /* Clear button for text inputs */
@@ -2864,6 +2951,7 @@
   font-size: var(--fs-sm);
   color: var(--fg-2);
 }
+.ds-247420 .ds-alert-retry { margin-top: var(--space-2); }
 
 .ds-247420 .ds-alert-dismiss {
   flex-shrink: 0;
@@ -4433,9 +4521,9 @@
   cursor: pointer; font-size: 16px; line-height: 1;
 }
 .ds-247420 .vx-vc-btn:hover { background: var(--bg-4, var(--bg-3)); }
-.ds-247420 .vx-vc-on { background: var(--accent); color: var(--accent-fg, #fff); border-color: var(--accent); }
+.ds-247420 .vx-vc-on { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
 .ds-247420 .vx-vc-disabled, .ds-247420 .vx-vc-btn:disabled { opacity: .4; cursor: not-allowed; }
-.ds-247420 .vx-vc-leave { margin-left: auto; background: var(--danger, #d04545); color: #fff; border-color: var(--danger, #d04545); }
+.ds-247420 .vx-vc-leave { margin-left: auto; background: var(--danger); color: var(--on-color); border-color: var(--danger); }
 .ds-247420 .vx-vc-glyph { pointer-events: none; }
 
 /* ThreadPanel — cm-thread-panel / cm-tp-* */
@@ -4471,14 +4559,14 @@
 .ds-247420 .cm-tp-item-title { font-size: var(--fs-1, 14px); }
 .ds-247420 .cm-tp-item-snippet { font-size: var(--fs-0, 12px); color: var(--fg-2, var(--fg)); opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .ds-247420 .cm-tp-item-meta { display: flex; gap: var(--space-2); font-size: var(--fs-micro, 11px); color: var(--fg-2, var(--fg)); opacity: .7; }
-.ds-247420 .cm-tp-empty, .ds-247420 .cm-forum-empty { padding: var(--space-3); text-align: center; color: var(--fg-2, var(--fg)); opacity: .7; }
+.ds-247420 .cm-tp-empty, .ds-247420 .cm-forum-empty, .ds-247420 .cm-channel-empty, .ds-247420 .cm-member-empty { padding: var(--space-3); text-align: center; color: var(--fg-2, var(--fg)); opacity: .7; font-size: var(--fs-sm); }
 
 /* ForumView — cm-forum / cm-forum-* */
 .ds-247420 .cm-forum { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--bg-1, var(--bg-2)); color: var(--fg); }
 .ds-247420 .cm-forum-toolbar { display: flex; gap: var(--space-2); align-items: center; padding: var(--space-2); border-bottom: var(--bw-hair) solid var(--rule); }
 .ds-247420 .cm-forum-search { flex: 1; padding: var(--space-1) var(--space-2); border: var(--bw-hair) solid var(--rule-strong); border-radius: var(--r-1); background: var(--bg-3); color: var(--fg); }
 .ds-247420 .cm-forum-sort { padding: var(--space-1); border: var(--bw-hair) solid var(--rule-strong); border-radius: var(--r-1); background: var(--bg-3); color: var(--fg); }
-.ds-247420 .cm-forum-new { padding: var(--space-1) var(--space-2); border: none; border-radius: var(--r-1); background: var(--accent); color: var(--accent-fg, #fff); cursor: pointer; }
+.ds-247420 .cm-forum-new { padding: var(--space-1) var(--space-2); border: none; border-radius: var(--r-1); background: var(--accent); color: var(--accent-fg); cursor: pointer; }
 .ds-247420 .cm-forum-list { flex: 1; min-height: 0; overflow-y: auto; }
 .ds-247420 .cm-forum-item { display: flex; flex-direction: column; gap: var(--space-1); width: 100%; text-align: left; cursor: pointer; padding: var(--space-2) var(--space-3); border: none; background: transparent; border-bottom: var(--bw-hair) solid var(--rule); color: var(--fg); }
 .ds-247420 .cm-forum-item:hover { background: var(--bg-3); }
@@ -4522,8 +4610,169 @@
 }
 
 /* chat.css */
-/* chat.css — chat-specific styles. Currently empty; all chat styles live in
-   app-shell.css under the .chat-* prefix. Reserved for future split. */
+/* chat.css — chat-specific styles. Most chat styles live in app-shell.css under
+   the .chat-* prefix. This file carries the AgentChat kit styles (the reusable
+   multi-agent orchestration chat surface). */
+
+.ds-247420 .agentchat {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  flex: 1;
+  gap: var(--space-2, 8px);
+}
+
+/* agent + model picker, new/stop, status — wraps on narrow widths */
+.ds-247420 .agentchat-controls {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--space-2, 8px);
+}
+.ds-247420 .agentchat-controls .select,
+.ds-247420 .agentchat-controls [role="combobox"] { min-width: 130px; max-width: 240px; }
+
+.ds-247420 .agentchat-status {
+  display: inline-flex;
+  align-items: center;
+  gap: .4em;
+  white-space: nowrap;
+  margin-left: auto;
+  font-size: .85em;
+  color: var(--fg-3);
+}
+/* status disc — a CSS-drawn dot, not a glyph; pulses while streaming */
+.ds-247420 .agentchat-status .status-dot-disc {
+  flex: none; width: 8px; height: 8px; border-radius: 50%;
+  background: var(--fg-3);
+}
+.ds-247420 .agentchat-status .status-dot-disc.status-dot-live {
+  background: var(--accent);
+  animation: agentchat-pulse 2s infinite;
+}
+@keyframes agentchat-pulse {
+  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 50%, transparent); }
+  70%  { box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent) 0%, transparent); }
+  100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 0%, transparent); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ds-247420 .agentchat-status .status-dot-disc { animation: none !important; }
+}
+
+/* working-directory bar */
+.ds-247420 .agentchat-cwd {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2, 8px);
+  font-size: .85em;
+  color: var(--fg-3);
+  flex-wrap: wrap;
+}
+.ds-247420 .agentchat-cwd-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 60ch;
+}
+.ds-247420 .agentchat-cwd-btn {
+  background: none;
+  border: 1px solid var(--rule);
+  color: inherit;
+  border-radius: 6px;
+  padding: 2px 8px;
+  cursor: pointer;
+  font: inherit;
+}
+.ds-247420 .agentchat-cwd-btn:hover { border-color: var(--accent); }
+.ds-247420 .agentchat-cwd-input {
+  flex: 1;
+  min-width: 12ch;
+  background: var(--bg-2);
+  border: 1px solid var(--rule);
+  color: var(--fg);
+  border-radius: 6px;
+  padding: 4px 8px;
+  font: inherit;
+}
+
+/* head + thread */
+.ds-247420 .agentchat-head {
+  display: flex;
+  align-items: baseline;
+  gap: .5em;
+}
+.ds-247420 .agentchat-title { font-size: 1em; margin: 0; }
+.ds-247420 .agentchat-sub { font-size: .85em; color: var(--fg-3); }
+.ds-247420 .agentchat-thread {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2, 8px);
+}
+
+/* Empty state: a fresh thread is an invitation, not a void. */
+.ds-247420 .agentchat-empty {
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: .4em;
+  text-align: center;
+  padding: var(--space-6, 32px) var(--space-4, 16px);
+  color: var(--fg-3);
+  max-width: 46ch;
+}
+.ds-247420 .agentchat-empty-title { margin: 0; font-size: 1.05em; color: var(--fg-2, var(--fg)); }
+.ds-247420 .agentchat-empty-sub { margin: 0; font-size: .9em; }
+.ds-247420 .agentchat-empty-suggestions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: .5em;
+  justify-content: center;
+  margin-top: .5em;
+}
+.ds-247420 .agentchat-empty-suggestion {
+  cursor: pointer;
+  font: inherit;
+  font-size: .85em;
+  padding: .4em .8em;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--fg) 16%, transparent);
+  background: color-mix(in srgb, var(--fg) 5%, transparent);
+  color: var(--fg-2, var(--fg));
+}
+.ds-247420 .agentchat-empty-suggestion:hover { background: color-mix(in srgb, var(--accent, var(--fg)) 12%, transparent); }
+.ds-247420 .agentchat-empty-suggestion:focus-visible { outline: 2px solid var(--accent, var(--fg)); outline-offset: 2px; }
+
+/* "working" tail: a long silent tool call shouldn't read as frozen. */
+.ds-247420 .agentchat-working {
+  display: flex;
+  align-items: center;
+  gap: .5em;
+  padding: .3em .2em;
+  color: var(--fg-3);
+  font-size: .85em;
+}
+.ds-247420 .agentchat-working-text { color: var(--fg-3); }
+/* Self-contained dots (chat-thinking-dots lives in a kit sheet not bundled
+   into this DS distribution, so the agentchat tail draws its own). */
+.ds-247420 .agentchat-working .chat-thinking-dots { display: inline-flex; gap: 3px; }
+.ds-247420 .agentchat-working .chat-thinking-dots span {
+  width: 5px; height: 5px; border-radius: 50%;
+  background: var(--fg); opacity: .4;
+  animation: agentchat-dot-bounce 1.2s infinite ease-in-out;
+}
+.ds-247420 .agentchat-working .chat-thinking-dots span:nth-child(2) { animation-delay: .15s; }
+.ds-247420 .agentchat-working .chat-thinking-dots span:nth-child(3) { animation-delay: .3s; }
+@keyframes agentchat-dot-bounce {
+  0%, 80%, 100% { transform: scale(.6); opacity: .3; }
+  40% { transform: scale(1); opacity: .9; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ds-247420 .agentchat-working .chat-thinking-dots span { animation: none; opacity: .7; }
+}
 
 /* editor-primitives.css */
 /* editor-primitives.css — chrome for in-engine editors, inspectors, IDEs,
@@ -4531,6 +4780,71 @@
    resolved from colors_and_type.css: --panel-{0..3}, --panel-text(-2/-3),
    --accent, --accent-fg, --rule, --rule-strong, --r-1/-2, --ff-mono. */
 
+/* ---------------------------------------------------------------
+   Docked panel — the engine-editor idiom: flush, square, dense,
+   full-height. Unlike the dashboard .panel card (rounded, margined,
+   shadowed) this docks edge-to-edge with a 1px --rule seam. Use for
+   inspector / hierarchy / apps / events columns inside an editor.
+   --------------------------------------------------------------- */
+.ds-247420 .ds-ep-panel {
+    display: flex; flex-direction: column;
+    min-height: 0; height: 100%;
+    margin: 0; border-radius: 0; box-shadow: none;
+    background: var(--panel-1);
+    color: var(--panel-text);
+    font: var(--fs-tiny, 12px)/var(--lh-base, 1.4) var(--ff-mono, monospace);
+    overflow: hidden;
+}
+.ds-247420 .ds-ep-panel-head {
+    flex-shrink: 0;
+    display: flex; align-items: center; justify-content: space-between; gap: 8px;
+    padding: 6px 10px;
+    border-bottom: 1px solid var(--rule);
+    font-size: var(--fs-micro, 11px); font-weight: 600;
+    text-transform: uppercase; letter-spacing: 0.1em;
+    color: var(--panel-text-3);
+    white-space: nowrap;
+}
+.ds-247420 .ds-ep-panel-head > :last-child {
+    font-weight: 500; letter-spacing: 0;
+    color: var(--panel-text-2);
+    overflow: hidden; text-overflow: ellipsis;
+}
+.ds-247420 .ds-ep-panel-body {
+    flex: 1; min-height: 0; overflow: auto;
+    padding: 6px 8px;
+}
+.ds-247420 .ds-ep-panel-body.flush { padding: 0; }
+/* A sub-section divider inside a docked panel (e.g. app-prop mount). Only
+   shows its top seam when it actually has content — an empty section is
+   collapsed so no stray dashed rule floats over an empty inspector. */
+.ds-247420 .ds-ep-panel-section {
+    flex-shrink: 0;
+    border-top: 1px solid var(--rule);
+    overflow: auto;
+}
+.ds-247420 .ds-ep-panel-section:empty { display: none; border-top: 0; }
+
+/* Dense status strip for editor chrome — thin, flush, bordered top. */
+.ds-247420 .ds-ep-statusbar {
+    flex-shrink: 0;
+    display: flex; align-items: center; justify-content: space-between; gap: 8px;
+    min-height: 0; height: 26px;
+    padding: 0 10px;
+    border-top: 1px solid var(--rule);
+    background: var(--panel-1);
+    color: var(--panel-text-2);
+    font: var(--fs-micro, 11px)/1 var(--ff-mono, monospace);
+}
+.ds-247420 .ds-ep-statusbar-left, .ds-247420 .ds-ep-statusbar-right { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.ds-247420 .ds-ep-statusbar-left { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* Buttons inside the dense strip shrink to fit the 26px band. */
+.ds-247420 .ds-ep-statusbar button {
+    min-height: 0; height: 20px; padding: 0 8px;
+    border-radius: var(--r-1, 4px);
+    font: var(--fs-micro, 11px)/1 var(--ff-mono, monospace);
+}
+
 /* Toolbar */
 .ds-247420 .ds-ep-toolbar {
     display: flex; align-items: center; gap: 6px;
@@ -4568,7 +4882,24 @@
     color: var(--accent);
     border-bottom-color: var(--accent);
 }
-.ds-247420 .ds-ep-tabs-body { flex: 1; min-height: 0; overflow: auto; }
+/* Flex column so a full-height docked child (e.g. an inspector panel) fills
+   the tab body instead of collapsing under a block container. */
+.ds-247420 .ds-ep-tabs-body { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; }
+
+/* EventLog — dense console-style log rows (one event per line). */
+.ds-247420 .ds-ep-eventlog {
+    display: flex; flex-direction: column;
+    font: var(--fs-tiny, 12px)/1.4 var(--ff-mono, monospace);
+    color: var(--panel-text);
+}
+.ds-247420 .ds-ep-eventrow {
+    display: flex; align-items: baseline; gap: 8px;
+    padding: 3px 8px;
+    border-bottom: 1px solid color-mix(in oklab, var(--rule) 50%, transparent);
+}
+.ds-247420 .ds-ep-eventrow:hover { background: color-mix(in oklab, var(--accent) 6%, transparent); }
+.ds-247420 .ds-ep-eventrow-type { color: var(--panel-text); font-weight: 600; flex-shrink: 0; }
+.ds-247420 .ds-ep-eventrow-sub { color: var(--panel-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
 /* TreeView / TreeItem */
 .ds-247420 .ds-ep-tree {
@@ -4656,6 +4987,84 @@
     font-size: 0.8em;
     color: var(--panel-text-3);
 }
+/* x/y/z packed on one row, each field equal width, no horizontal overflow. */
+.ds-247420 .ds-ep-vec3 {
+    display: flex; gap: 4px; width: 100%; min-width: 0;
+}
+.ds-247420 .ds-ep-vec3 > * { flex: 1 1 0; min-width: 0; }
+/* Each axis cell (axis letter + scrub input) must show its full 3-decimal value
+   without clipping. The axis letter is a fixed micro-glyph; the input flexes to
+   fill the rest with tight padding and centered text so 0.000 / -0.0 / 1.000 are
+   always legible even in the narrow 3-up layout. */
+.ds-247420 .ds-ep-vec3 > * {
+    display: flex; align-items: center; gap: 2px;
+}
+.ds-247420 .ds-ep-vec3 .ds-ep-propfield-hint {
+    flex: 0 0 auto; width: 9px; text-align: center;
+    grid-column: auto; font-size: 0.8em; opacity: 0.7;
+}
+.ds-247420 .ds-ep-vec3 .ds-input-bare {
+    flex: 1 1 auto; min-width: 0; width: auto;
+    padding: 2px 4px; text-align: center; text-overflow: clip;
+}
+/* Dense numeric inputs in the inspector — compact, tight radius, mono. */
+.ds-247420 .ds-ep-propfield-value input,
+.ds-247420 .ds-ep-propfield-value .ds-input-bare {
+    padding: 2px 6px;
+    border-radius: var(--r-1, 4px);
+    font: var(--fs-tiny, 12px)/1.3 var(--ff-mono, monospace);
+}
+.ds-247420 .ds-input-bare {
+    appearance: none;
+    background: var(--panel-2);
+    color: var(--panel-text);
+    border: 1px solid var(--rule);
+    border-radius: var(--r-1, 4px);
+    padding: 2px 6px;
+    font: var(--fs-tiny, 12px)/1.3 var(--ff-mono, monospace);
+    min-width: 0;
+}
+.ds-247420 .ds-input-bare:focus { outline: none; border-color: var(--accent); }
+/* A property field whose control spans the full panel width (label above,
+   control below) — used for wide segmented controls that would clip in the
+   narrow value column. */
+.ds-247420 .ds-ep-propfield.block {
+    display: flex; flex-direction: column; align-items: stretch; gap: 4px;
+}
+.ds-247420 .ds-ep-propfield.block > .ds-ep-propfield-value { width: 100%; }
+.ds-247420 .ds-ep-propfield.block .ds-ep-btngrp { width: 100%; }
+.ds-247420 .ds-ep-propfield.block .ds-ep-btngrp-btn { flex: 1 1 0; text-align: center; }
+
+/* Flush dense action bar docked at a panel bottom (inspector Edit/Delete etc.).
+   Compact buttons, square-ish, bordered top — not big floating pills. */
+.ds-247420 .ds-ep-actionbar {
+    flex-shrink: 0;
+    display: flex; align-items: center; gap: 6px;
+    padding: 6px 8px;
+    border-top: 1px solid var(--rule);
+    background: var(--panel-1);
+}
+.ds-247420 .ds-ep-actionbar > * { flex: 1 1 0; }
+.ds-247420 .ds-ep-actionbar button {
+    width: 100%;
+    min-height: 28px; height: 28px; padding: 0 10px;
+    border-radius: var(--r-1, 4px);
+    font: var(--fs-tiny, 12px)/1 var(--ff-mono, monospace);
+}
+
+/* Inline buttons inside a tree row (e.g. app-list Place) and the editor toolbars
+   are compact — small, square-ish, not big pills. Excludes the segmented
+   IconButtonGroup which manages its own sizing. */
+.ds-247420 .ds-ep-tree-row button:not(.ds-ep-btngrp-btn),
+.ds-247420 .ds-ep-toolbar button:not(.ds-ep-btngrp-btn) {
+    min-height: 24px; height: 24px; padding: 0 8px;
+    border-radius: var(--r-1, 4px);
+    font: var(--fs-tiny, 12px)/1 var(--ff-mono, monospace);
+}
+@media (pointer: coarse) {
+    .ds-247420 .ds-ep-tree-row button:not(.ds-ep-btngrp-btn),
+    .ds-247420 .ds-ep-toolbar button:not(.ds-ep-btngrp-btn) { min-height: 36px; height: 36px; }
+}
 
 /* Dock — 3x3 grid for in-engine overlay (canvas pass-through center) */
 .ds-247420 .ds-ep-dock {
@@ -4765,7 +5174,7 @@
     color: var(--panel-text, var(--fg-text));
     border: 1px solid var(--rule);
     border-radius: var(--r-2, 8px);
-    box-shadow: 0 8px 28px rgba(0,0,0,0.18);
+    box-shadow: var(--shadow-2);
     padding: 4px;
     display: flex; flex-direction: column;
     outline: none;
@@ -4782,7 +5191,7 @@
 .ds-247420 .ds-ep-ctxmenu-item:focus-visible {
     background: var(--panel-2, var(--rule));
 }
-.ds-247420 .ds-ep-ctxmenu-item.danger { color: var(--danger, #c33); }
+.ds-247420 .ds-ep-ctxmenu-item.danger { color: var(--danger); }
 .ds-247420 .ds-ep-ctxmenu-item.disabled { opacity: 0.45; cursor: not-allowed; }
 .ds-247420 .ds-ep-ctxmenu-icon { width: 16px; display: inline-flex; justify-content: center; }
 .ds-247420 .ds-ep-ctxmenu-sep { height: 1px; background: var(--rule); margin: 4px 6px; }
@@ -4792,13 +5201,13 @@
    --------------------------------------------------------------- */
 .ds-247420 .ds-ep-drawer-backdrop {
     position: fixed; inset: 0; z-index: 8500;
-    background: rgba(0,0,0,0.42);
+    background: var(--scrim);
 }
 .ds-247420 .ds-ep-drawer {
     position: absolute;
     background: var(--panel-1, var(--panel-bg));
     color: var(--panel-text, var(--fg-text));
-    box-shadow: 0 12px 40px rgba(0,0,0,0.28);
+    box-shadow: var(--shadow-overlay);
     outline: none;
     transition: transform 180ms ease;
     padding: 12px;
@@ -4819,7 +5228,7 @@
    --------------------------------------------------------------- */
 .ds-247420 .ds-ep-dialog-backdrop {
     position: fixed; inset: 0; z-index: 9500;
-    background: rgba(0,0,0,0.5);
+    background: var(--scrim-strong);
     display: flex; align-items: center; justify-content: center;
     padding: 16px;
 }
@@ -4828,7 +5237,7 @@
     color: var(--panel-text, var(--fg-text));
     border: 1px solid var(--rule);
     border-radius: var(--r-2, 10px);
-    box-shadow: 0 20px 60px rgba(0,0,0,0.36);
+    box-shadow: var(--shadow-overlay);
     min-width: 280px; max-width: min(560px, 100%);
     max-height: 90vh; overflow: auto;
     display: flex; flex-direction: column;
@@ -4852,7 +5261,7 @@
     background: var(--accent); color: var(--accent-fg); border-color: var(--accent);
 }
 .ds-247420 .ds-ep-dialog-btn.kind-danger {
-    background: var(--danger, #c33); color: #fff; border-color: var(--danger, #c33);
+    background: var(--danger); color: var(--on-accent); border-color: var(--danger);
 }
 
 /* ---------------------------------------------------------------
@@ -4874,14 +5283,14 @@
     border-left: 3px solid var(--accent);
     border-radius: var(--r-1, 6px);
     padding: 10px 14px;
-    box-shadow: 0 8px 24px rgba(0,0,0,0.22);
+    box-shadow: var(--shadow-3);
     min-width: 220px; max-width: 360px;
     opacity: 1;
     transition: opacity 180ms ease, transform 180ms ease;
 }
-.ds-247420 .ds-ep-toast.kind-success { border-left-color: var(--success, #2a8); }
-.ds-247420 .ds-ep-toast.kind-warn    { border-left-color: var(--warn, #d90); }
-.ds-247420 .ds-ep-toast.kind-error   { border-left-color: var(--danger, #c33); }
+.ds-247420 .ds-ep-toast.kind-success { border-left-color: var(--success); }
+.ds-247420 .ds-ep-toast.kind-warn    { border-left-color: var(--warn); }
+.ds-247420 .ds-ep-toast.kind-error   { border-left-color: var(--danger); }
 .ds-247420 .ds-ep-toast.leaving { opacity: 0; transform: translateY(-6px); }
 @media (max-width: 480px) {
     .ds-247420 .ds-ep-toast-host { left: 16px; right: 16px; align-items: center; }
@@ -5041,7 +5450,7 @@
     font-weight: 500;
 }
 .ds-247420 .ds-field-required {
-    color: var(--danger, oklch(0.55 0.18 25));
+    color: var(--danger);
     font-weight: 700;
     margin-left: 2px;
 }
@@ -5050,12 +5459,12 @@
     font-size: var(--fs-tiny, 12px);
 }
 .ds-247420 .ds-field-error {
-    color: var(--danger, oklch(0.55 0.18 25));
+    color: var(--danger);
     font-size: var(--fs-tiny, 12px);
     font-weight: 500;
 }
 .ds-247420 .ds-field-wrap [aria-invalid="true"] {
-    border-color: var(--danger, oklch(0.55 0.18 25)) !important;
+    border-color: var(--danger) !important;
 }
 
 .ds-247420 .sr-only {
@@ -5083,10 +5492,10 @@
     font-size: 12px;
     line-height: 1.4;
     max-width: 280px;
-    box-shadow: 0 6px 18px rgba(0,0,0,0.22);
+    box-shadow: var(--shadow-3);
     pointer-events: none;
 }
-.ds-247420 .ds-tooltip.kind-danger { border-color: var(--danger, #c33); color: var(--danger, #c33); }
+.ds-247420 .ds-tooltip.kind-danger { border-color: var(--danger); color: var(--danger); }
 @media (prefers-reduced-motion: no-preference) {
     .ds-247420 .ds-tooltip { transition: opacity 120ms ease; }
 }
@@ -5102,7 +5511,7 @@
     color: var(--panel-text, var(--fg-text));
     border: 1px solid var(--rule);
     border-radius: var(--r-2, 8px);
-    box-shadow: 0 8px 28px rgba(0,0,0,0.22);
+    box-shadow: var(--shadow-3);
     padding: 0;
     outline: none;
     min-width: 160px;
@@ -5139,7 +5548,7 @@
     pointer-events: none;
     cursor: not-allowed;
 }
-.ds-247420 .ds-dropdown-item.is-danger { color: var(--danger, #c33); }
+.ds-247420 .ds-dropdown-item.is-danger { color: var(--danger); }
 .ds-247420 .ds-dropdown-glyph { width: 16px; display: inline-flex; justify-content: center; flex-shrink: 0; }
 .ds-247420 .ds-dropdown-label { flex: 1; min-width: 0; }
 .ds-247420 .ds-dropdown-separator { height: 1px; background: var(--rule); margin: 4px 6px; }
@@ -5219,7 +5628,7 @@
     background: var(--bg-2); color: var(--fg);
     border: 1px solid var(--rule);
     border-radius: var(--r-2, 14px);
-    box-shadow: var(--shadow-3, 0 12px 32px rgba(0,0,0,0.3));
+    box-shadow: var(--shadow-3);
     overflow: hidden;
 }
 .ds-247420 .ov-cmd-input {
@@ -5267,7 +5676,7 @@
     background: var(--bg-2); color: var(--fg);
     border: 1px solid var(--rule);
     border-radius: var(--r-2, 14px);
-    box-shadow: var(--shadow-3, 0 12px 32px rgba(0,0,0,0.3));
+    box-shadow: var(--shadow-3);
     outline: none; overflow: hidden;
 }
 .ds-247420 .ov-emoji-tabs {
@@ -5347,7 +5756,7 @@
     background: var(--bg-2); color: var(--fg);
     border: 1px solid var(--rule);
     border-radius: var(--r-2, 14px);
-    box-shadow: var(--shadow-3, 0 12px 32px rgba(0,0,0,0.3));
+    box-shadow: var(--shadow-3);
     outline: none; overflow: hidden;
 }
 .ds-247420 .ov-set-head {
@@ -5392,14 +5801,14 @@
 .ds-247420 .ov-auth-backdrop {
     position: fixed; inset: 0; z-index: var(--z-overlay, 1000);
     display: flex; align-items: center; justify-content: center;
-    background: rgba(0,0,0,.55);
+    background: var(--scrim-strong);
 }
 .ds-247420 .ov-auth-panel {
     width: min(420px, 92vw);
     display: flex; flex-direction: column;
     background: var(--bg-2); color: var(--fg);
     border: 1px solid var(--rule); border-radius: var(--r-2, 8px);
-    box-shadow: var(--shadow-2, 0 12px 40px rgba(0,0,0,.4));
+    box-shadow: var(--shadow-overlay);
     overflow: hidden;
 }
 .ds-247420 .ov-auth-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3); border-bottom: 1px solid var(--rule); }
@@ -5412,18 +5821,486 @@
 .ds-247420 .ov-auth-body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); }
 .ds-247420 .ov-auth-hint { margin: 0; font-size: var(--fs-0, 12px); color: var(--fg-2, var(--fg)); }
 .ds-247420 .ov-auth-input { padding: var(--space-2); border: 1px solid var(--rule-strong); border-radius: var(--r-1); background: var(--bg-3); color: var(--fg); }
-.ds-247420 .ov-auth-primary { padding: var(--space-2); border: none; border-radius: var(--r-1); background: var(--accent); color: var(--accent-fg, #fff); font-weight: 700; cursor: pointer; }
+.ds-247420 .ov-auth-primary { padding: var(--space-2); border: none; border-radius: var(--r-1); background: var(--accent); color: var(--on-accent); font-weight: 700; cursor: pointer; }
 .ds-247420 .ov-auth-primary:disabled { opacity: .6; cursor: progress; }
-.ds-247420 .ov-auth-error { margin: 0 var(--space-3) var(--space-3); padding: var(--space-2); border-radius: var(--r-1); background: var(--danger-bg, rgba(208,69,69,.15)); color: var(--danger, #d04545); font-size: var(--fs-0, 12px); }
+.ds-247420 .ov-auth-error { margin: 0 var(--space-3) var(--space-3); padding: var(--space-2); border-radius: var(--r-1); background: color-mix(in oklab, var(--danger) 15%, transparent); color: var(--danger); font-size: var(--fs-0, 12px); }
 
 /* VideoLightbox — ov-lightbox-* */
 .ds-247420 .ov-lightbox-backdrop {
     position: fixed; inset: 0; z-index: var(--z-overlay-top, 1100);
     display: flex; align-items: center; justify-content: center;
-    background: rgba(0,0,0,.85);
+    background: var(--scrim-media);
 }
-.ds-247420 .ov-lightbox-x { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
-.ds-247420 .ov-lightbox-x:hover { background: rgba(255,255,255,.24); }
+.ds-247420 .ov-lightbox-x { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border: none; border-radius: 50%; background: color-mix(in oklab, var(--on-color) 12%, transparent); color: var(--on-color); font-size: 24px; line-height: 1; cursor: pointer; }
+.ds-247420 .ov-lightbox-x:hover { background: color-mix(in oklab, var(--on-color) 24%, transparent); }
 .ds-247420 .ov-lightbox-stage { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); max-width: 92vw; max-height: 90vh; }
-.ds-247420 .ov-lightbox-video { max-width: 92vw; max-height: 82vh; border-radius: var(--r-1); background: #000; }
-.ds-247420 .ov-lightbox-label { color: #fff; font-size: var(--fs-0, 12px); opacity: .85; }
+.ds-247420 .ov-lightbox-video { max-width: 92vw; max-height: 82vh; border-radius: var(--r-1); background: #000; /* true black media letterbox, intentional */ }
+.ds-247420 .ov-lightbox-label { color: var(--on-color); font-size: var(--fs-0, 12px); opacity: .85; }
+
+/* ---------------------------------------------------------------
+   Editor-primitive scrollbars — thin, dark, themed so docked panels
+   don't show a fat light OS scrollbar over the dark engine chrome.
+   --------------------------------------------------------------- */
+.ds-247420 .ds-ep-panel,
+.ds-247420 .ds-ep-panel-body,
+.ds-247420 .ds-ep-tree,
+.ds-247420 .ds-ep-eventlog,
+.ds-247420 .ds-ep-drawer { scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
+.ds-247420 .ds-ep-panel ::-webkit-scrollbar,
+.ds-247420 .ds-ep-panel-body::-webkit-scrollbar,
+.ds-247420 .ds-ep-tree::-webkit-scrollbar,
+.ds-247420 .ds-ep-eventlog::-webkit-scrollbar { width: 8px; height: 8px; }
+.ds-247420 .ds-ep-panel ::-webkit-scrollbar-track,
+.ds-247420 .ds-ep-panel-body::-webkit-scrollbar-track,
+.ds-247420 .ds-ep-tree::-webkit-scrollbar-track,
+.ds-247420 .ds-ep-eventlog::-webkit-scrollbar-track { background: transparent; }
+.ds-247420 .ds-ep-panel ::-webkit-scrollbar-thumb,
+.ds-247420 .ds-ep-panel-body::-webkit-scrollbar-thumb,
+.ds-247420 .ds-ep-tree::-webkit-scrollbar-thumb,
+.ds-247420 .ds-ep-eventlog::-webkit-scrollbar-thumb {
+    background: var(--rule); border-radius: var(--r-pill, 999px);
+    border: 2px solid transparent; background-clip: padding-box;
+}
+.ds-247420 .ds-ep-panel ::-webkit-scrollbar-thumb:hover,
+.ds-247420 .ds-ep-panel-body::-webkit-scrollbar-thumb:hover {
+    background: var(--panel-text-3, var(--rule)); background-clip: padding-box;
+}
+
+/* ---------------------------------------------------------------
+   Dense app-prop inputs — color swatch + checkbox sized to match the
+   engine-editor density (raw browser controls otherwise read as jank).
+   --------------------------------------------------------------- */
+/* Specificity bump (.ds-ep-propfield-value prefix) so the sized swatch/check win
+   over the generic `.ds-ep-propfield-value input { width:100% }` rule — otherwise
+   a color/checkbox app-prop stretches to the full field width and reads as jank. */
+.ds-247420 .ds-ep-propfield-value input.ds-input-color { width: 28px; flex: 0 0 auto; }
+.ds-247420 .ds-ep-propfield-value input.ds-input-check { width: 16px; flex: 0 0 auto; }
+.ds-247420 .ds-input-color {
+    appearance: none; -webkit-appearance: none;
+    width: 28px; height: 22px; padding: 0;
+    border: 1px solid var(--rule); border-radius: var(--r-1, 4px);
+    background: var(--panel-2); cursor: pointer; flex-shrink: 0;
+}
+.ds-247420 .ds-input-color::-webkit-color-swatch-wrapper { padding: 2px; }
+.ds-247420 .ds-input-color::-webkit-color-swatch { border: none; border-radius: 2px; }
+.ds-247420 .ds-input-color:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.ds-247420 .ds-input-check {
+    appearance: none; -webkit-appearance: none;
+    width: 16px; height: 16px; flex-shrink: 0;
+    border: 1px solid var(--rule); border-radius: var(--r-1, 4px);
+    background: var(--panel-2); cursor: pointer; position: relative;
+}
+.ds-247420 .ds-input-check:checked { background: var(--accent); border-color: var(--accent); }
+.ds-247420 .ds-input-check:checked::after {
+    content: ''; position: absolute; left: 4px; top: 1px;
+    width: 4px; height: 8px; border: solid var(--accent-fg, #fff);
+    border-width: 0 2px 2px 0; transform: rotate(45deg);
+}
+.ds-247420 .ds-input-check:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+
+/* ---------------------------------------------------------------
+   Tree drag-reparent affordance — clear drop target + dragging row.
+   useDropTarget marks the active row with [data-drop-target-active]; the
+   dragged source carries [data-dragging]. Both surfaced as visible state so a
+   reparent drag shows exactly where it will land.
+   --------------------------------------------------------------- */
+.ds-247420 .ds-ep-tree-item[data-drop-target-active] > .ds-ep-tree-row,
+.ds-247420 .ds-ep-tree-row[data-drop-target-active],
+.ds-247420 .ds-ep-tree-row.drag-over {
+    background: color-mix(in oklab, var(--accent) 22%, transparent);
+    box-shadow: inset 0 0 0 1px var(--accent);
+}
+.ds-247420 .ds-ep-panel-body[data-drop-target-active] {
+    box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--accent) 50%, transparent);
+}
+.ds-247420 .ds-ep-tree-item[data-dragging] > .ds-ep-tree-row,
+.ds-247420 .ds-ep-tree-item.dragging > .ds-ep-tree-row { opacity: 0.5; }
+
+/* ---------------------------------------------------------------
+   Floating editor docks — the non-occluding idiom. The game/3D
+   viewport fills the whole editor stage; the hierarchy + inspector
+   ride over it as translucent, backdrop-blurred, collapsible cards
+   so the play area stays visible (and clickable) behind them. The
+   dock layer is pointer-events:none; only the dock cards capture
+   input, so the exposed viewport gutter clicks through to the canvas.
+   --------------------------------------------------------------- */
+.ds-247420 .ds-ep-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; }
+.ds-247420 .ds-ep-dock-layer { display: block; }
+.ds-247420 .ds-ep-dock {
+    position: absolute; top: 8px; bottom: 8px;
+    display: flex; flex-direction: column;
+    width: 280px; max-width: calc(50% - 12px);
+    pointer-events: all;
+    background: color-mix(in oklab, var(--panel-1) 82%, transparent);
+    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
+    border: 1px solid var(--rule);
+    border-radius: var(--r-2, 8px);
+    box-shadow: 0 6px 24px color-mix(in oklab, #000 28%, transparent);
+    color: var(--panel-text);
+    overflow: hidden;
+}
+.ds-247420 .ds-ep-dock-left { left: 8px; }
+.ds-247420 .ds-ep-dock-right { right: 8px; }
+/* Collapsed: shrink to just the header strip, freeing the viewport. */
+.ds-247420 .ds-ep-dock.collapsed { bottom: auto; height: auto; }
+.ds-247420 .ds-ep-dock-head {
+    display: flex; align-items: center; gap: 6px;
+    flex: 0 0 auto; padding: 4px 6px 4px 10px;
+    border-bottom: 1px solid var(--rule);
+    background: color-mix(in oklab, var(--panel-1) 60%, transparent);
+}
+.ds-247420 .ds-ep-dock.collapsed .ds-ep-dock-head { border-bottom: 0; }
+.ds-247420 .ds-ep-dock-title {
+    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+    font: 8px/1 var(--ff-mono, monospace); text-transform: uppercase; letter-spacing: 0.12em;
+    color: var(--panel-text-3);
+}
+.ds-247420 .ds-ep-dock-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: transparent; }
+.ds-247420 .ds-ep-dock-body.hidden { display: none; }
+/* The right dock's body reuses .ds-ep-panel but must stay transparent so the
+   dock's own translucency/blur shows the game view through. */
+.ds-247420 .ds-ep-dock-body.ds-ep-panel { background: transparent; }
+
+/* Mobile: docks become full-width bottom-anchored sheets so they don't crowd
+   the narrow viewport side-by-side; the viewport still fills the stage behind. */
+@media (max-width: 760px) {
+    .ds-247420 .ds-ep-dock { width: auto; max-width: none; left: 6px; right: 6px; top: auto; bottom: 6px; max-height: 46vh; }
+    .ds-247420 .ds-ep-dock-left { bottom: calc(46vh + 12px); max-height: 40vh; }
+    .ds-247420 .ds-ep-dock.collapsed { bottom: auto; }
+    .ds-247420 .ds-ep-dock-left.collapsed { top: 6px; bottom: auto; }
+}
+
+/* community-app.css */
+/* community-app.css — layout glue for mountCommunityApp (the full chat/community
+   app GUI). Reuses the canonical app/body/main classes from app-shell.css and
+   the community + voice component classes from community.css; this part only adds
+   the app-composition wrapper, the server+channel rail pills, the voice view grid,
+   and the category-color tokens the consumer avatars use. All scoped under
+   .ds-247420. Additive — defines only the ca- prefix, group, rail-empty, vx-view
+   classes plus the cat color tokens. */
+
+.ds-247420.ds-247420 .ca-app {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  min-height: 0;
+  overflow: hidden;
+}
+.ds-247420.ds-247420 .ca-app > .app-body {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+.ds-247420.ds-247420 .ca-app > .app-body > .app-main {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  padding: 0;
+}
+
+/* server + channel rail */
+.ds-247420.ds-247420 .ca-rail {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  width: 220px;
+  min-width: 220px;
+  padding: 8px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background: var(--bg-2, color-mix(in oklab, var(--bg) 92%, var(--fg)));
+  scrollbar-width: thin;
+}
+.ds-247420.ds-247420 .ca-rail .group {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--fg-3, color-mix(in oklab, var(--fg) 55%, transparent));
+  padding: 10px 8px 4px;
+}
+.ds-247420.ds-247420 .ca-rail a {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  border-radius: 6px;
+  color: var(--fg-2, color-mix(in oklab, var(--fg) 78%, transparent));
+  text-decoration: none;
+  font-size: var(--fs-sm, 14px);
+  line-height: 1.2;
+  transition: background 0.1s, color 0.1s;
+}
+.ds-247420.ds-247420 .ca-rail a:hover { background: color-mix(in oklab, var(--fg) 8%, transparent); color: var(--fg); }
+.ds-247420.ds-247420 .ca-rail a.active { background: color-mix(in oklab, var(--accent) 22%, transparent); color: var(--fg); }
+.ds-247420.ds-247420 .ca-rail a .glyph {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  flex-shrink: 0;
+  color: var(--fg-3, currentColor);
+}
+.ds-247420.ds-247420 .ca-rail a > span:nth-child(2) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ds-247420.ds-247420 .ca-rail a .count {
+  flex-shrink: 0;
+  min-width: 18px;
+  padding: 0 5px;
+  border-radius: 9px;
+  background: var(--accent);
+  color: var(--on-accent);
+  font-size: 11px;
+  font-weight: 600;
+  text-align: center;
+}
+.ds-247420.ds-247420 .ca-rail .rail-empty {
+  padding: 8px;
+  color: var(--fg-3, color-mix(in oklab, var(--fg) 50%, transparent));
+  font-size: var(--fs-sm, 14px);
+  font-style: italic;
+}
+
+/* voice channel view */
+.ds-247420.ds-247420 .vx-view {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+.ds-247420.ds-247420 .vx-view .vx-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 12px;
+  flex: 1;
+  min-height: 0;
+  padding: 16px;
+  overflow-y: auto;
+  align-content: start;
+}
+
+/* spoint/loading-screen.css */
+/* Loading-screen kit styles. Scoped under .ds-247420 at build time.
+   All colors reference design tokens (no raw literals) per the token-lint gate. */
+.ds-247420 .sp-loading {
+  position: fixed;
+  inset: 0;
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg);
+  color: var(--fg);
+  font-family: var(--ff-mono);
+  transition: opacity var(--dur-slow) var(--ease);
+}
+.ds-247420 .sp-loading-fade { opacity: 0; pointer-events: none; }
+.ds-247420 .sp-loading-container {
+  width: min(420px, 86vw);
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+.ds-247420 .sp-loading-header h1 {
+  margin: 0;
+  font-family: var(--ff-display);
+  font-size: var(--fs-h2);
+  letter-spacing: 0.04em;
+}
+.ds-247420 .sp-loading-label {
+  margin: 4px 0 0;
+  color: var(--fg-2);
+  font-size: var(--fs-body);
+}
+.ds-247420 .sp-loading-bars { display: flex; flex-direction: column; gap: 10px; }
+.ds-247420 .sp-loading-bar-row {
+  display: grid;
+  grid-template-columns: 88px 1fr 44px;
+  align-items: center;
+  gap: 10px;
+}
+.ds-247420 .sp-loading-bar-name {
+  color: var(--fg-3);
+  font-size: var(--fs-small, 11px);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+.ds-247420 .sp-loading-bar-track {
+  height: 6px;
+  border-radius: 3px;
+  background: var(--bg-3);
+  overflow: hidden;
+}
+.ds-247420 .sp-loading-bar-fill {
+  height: 100%;
+  width: 0%;
+  background: var(--accent);
+  transition: width var(--dur-base) var(--ease);
+}
+.ds-247420 .sp-loading-bar-pct {
+  color: var(--fg-2);
+  font-size: var(--fs-small, 11px);
+  text-align: right;
+}
+.ds-247420 .sp-loading-detail {
+  min-height: 16px;
+  color: var(--fg-3);
+  font-size: var(--fs-small, 11px);
+}
+
+/* spoint/game-hud.css */
+/* Game-HUD kit styles. Scoped under .ds-247420 at build time.
+   Colors from semantic tokens (no raw literals) per the token-lint gate. */
+.ds-247420 .sp-hud { pointer-events: none; font-family: var(--ff-mono); }
+.ds-247420 .sp-hud-crosshair {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 24px;
+  color: var(--fg);
+  text-shadow: 0 0 2px var(--bg);
+}
+.ds-247420 .sp-hud-ammo {
+  position: fixed;
+  bottom: 50px;
+  right: 20px;
+  font-size: 24px;
+  font-weight: bold;
+  color: var(--fg);
+  text-shadow: 0 0 4px var(--bg);
+}
+.ds-247420 .sp-hud-ammo-reloading { color: var(--warn); }
+.ds-247420 .sp-hud-health {
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 200px;
+  height: 20px;
+  background: var(--bg-3);
+  border-radius: 4px;
+  overflow: hidden;
+}
+.ds-247420 .sp-hud-health-fill {
+  height: 100%;
+  transition: width var(--dur-snap) var(--ease);
+}
+.ds-247420 .sp-hud-hp-high { background: var(--success); }
+.ds-247420 .sp-hud-hp-mid { background: var(--warn); }
+.ds-247420 .sp-hud-hp-low { background: var(--danger); }
+.ds-247420 .sp-hud-health-num {
+  position: absolute;
+  width: 100%;
+  text-align: center;
+  color: var(--fg);
+  font-size: 12px;
+  line-height: 20px;
+}
+.ds-247420 .sp-hud-boost {
+  position: fixed;
+  top: 80px;
+  right: 20px;
+  padding: 8px 16px;
+  background: var(--accent);
+  color: var(--accent-fg);
+  font-weight: bold;
+  border-radius: 6px;
+  font-size: 14px;
+}
+
+/* spoint/host-join-lobby.css */
+/* Host/join lobby kit styles. Scoped under .ds-247420 at build time.
+   Token-only colors (no raw literals) per the token-lint gate. */
+.ds-247420 .sp-lobby {
+  position: fixed;
+  inset: 0;
+  z-index: 9500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: color-mix(in srgb, var(--bg) 70%, transparent);
+  font-family: var(--ff-mono);
+}
+.ds-247420 .sp-lobby-card {
+  position: relative;
+  width: min(360px, 88vw);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 24px;
+  background: var(--bg-2);
+  border: 1px solid var(--bw-rule, var(--rule));
+  border-radius: var(--r-2, 10px);
+  color: var(--fg);
+}
+.ds-247420 .sp-lobby-title {
+  margin: 0;
+  font-family: var(--ff-display);
+  font-size: var(--fs-h3);
+}
+.ds-247420 .sp-lobby-sub {
+  margin: 0;
+  color: var(--fg-3);
+  font-size: var(--fs-small, 12px);
+}
+.ds-247420 .sp-lobby-btn {
+  appearance: none;
+  border: 1px solid var(--bw-rule, var(--rule));
+  background: var(--bg-3);
+  color: var(--fg);
+  font-family: var(--ff-mono);
+  font-size: var(--fs-body);
+  padding: 10px 14px;
+  border-radius: var(--r-1, 6px);
+  cursor: pointer;
+}
+.ds-247420 .sp-lobby-btn:hover { background: var(--bg-2); }
+.ds-247420 .sp-lobby-btn:disabled { opacity: 0.6; cursor: default; }
+.ds-247420 .sp-lobby-btn-primary {
+  background: var(--accent);
+  color: var(--accent-fg);
+  border-color: var(--accent);
+}
+.ds-247420 .sp-lobby-join { display: flex; gap: 8px; }
+.ds-247420 .sp-lobby-input {
+  flex: 1;
+  min-width: 0;
+  background: var(--bg);
+  color: var(--fg);
+  border: 1px solid var(--bw-rule, var(--rule));
+  border-radius: var(--r-1, 6px);
+  padding: 8px 10px;
+  font: var(--fs-body) var(--ff-mono);
+  outline: none;
+}
+.ds-247420 .sp-lobby-input:focus { border-color: var(--accent); }
+.ds-247420 .sp-lobby-link { font-size: var(--fs-small, 11px); }
+.ds-247420 .sp-lobby-code {
+  font-family: var(--ff-display);
+  font-size: var(--fs-h2);
+  letter-spacing: 0.12em;
+  text-align: center;
+  color: var(--accent);
+  padding: 8px;
+  background: var(--bg);
+  border-radius: var(--r-1, 6px);
+}
+.ds-247420 .sp-lobby-err { min-height: 16px; color: var(--danger); font-size: var(--fs-small, 11px); }
+.ds-247420 .sp-lobby-close {
+  position: absolute;
+  top: 10px;
+  right: 12px;
+  appearance: none;
+  background: none;
+  border: none;
+  color: var(--fg-3);
+  font-size: 16px;
+  cursor: pointer;
+  line-height: 1;
+}