pmx-canvas 0.4.8 → 0.5.1

package/dist/canvas/global.css

@@ -56,9 +56,7 @@
   --mono: "IBM Plex Mono", "SF Mono", "Fira Code", monospace;
   --radius: 10px;
   --radius-sm: 6px;
-  /* Shared height for the top HUD row so the toolbar and the collapsed docked
-     status/context widgets that flank it line up to the same height. Matches the
-     toolbar's natural content height (icon buttons at 6px padding). */
+  /* Shared height of the top bar and the session panel header. */
   --hud-bar-height: 44px;
 }
 
@@ -546,9 +544,11 @@ body,
 /* Node card shared styles */
 .canvas-node {
   position: absolute;
+  /* Standard card shell (rail-chrome-v2): node surface, 12px radius, soft
+     shadow. Every node kind shares it; the kind shows in the icon color. */
   background: var(--c-panel);
   border: 1px solid var(--c-line);
-  border-radius: var(--radius);
+  border-radius: 12px;
   box-shadow: 0 4px 24px var(--c-shadow);
   display: flex;
   flex-direction: column;
@@ -623,7 +623,7 @@ body,
   display: flex;
   align-items: center;
   gap: calc(8px * var(--node-chrome-scale, 1));
-  padding: calc(8px * var(--node-chrome-scale, 1)) calc(12px * var(--node-chrome-scale, 1));
+  padding: calc(7px * var(--node-chrome-scale, 1)) calc(12px * var(--node-chrome-scale, 1));
   background: var(--c-panel-overlay);
   border-bottom: 1px solid var(--c-line);
   cursor: grab;
@@ -638,7 +638,7 @@ body,
 .canvas-node .node-title {
   font-size: calc(12px * var(--node-chrome-scale, 1));
   font-weight: 600;
-  color: var(--c-muted);
+  color: var(--c-text-soft);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -654,14 +654,28 @@ body,
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: calc(18px * var(--node-chrome-scale, 1));
-  height: calc(18px * var(--node-chrome-scale, 1));
-  border-radius: calc(4px * var(--node-chrome-scale, 1));
-  color: var(--c-accent);
-  background: var(--c-accent-10);
+  width: calc(14px * var(--node-chrome-scale, 1));
+  height: calc(14px * var(--node-chrome-scale, 1));
+  color: var(--kind-accent, var(--c-accent));
   flex-shrink: 0;
 }
 
+/* Node kind accents (rail-chrome-v2): the icon carries the kind. */
+.canvas-node[data-node-type='image'],
+.canvas-node[data-node-type='mermaid'] {
+  --kind-accent: var(--c-warn);
+}
+.canvas-node[data-node-type='webpage'],
+.canvas-node[data-node-type='status'],
+.canvas-node[data-node-type='trace'] {
+  --kind-accent: var(--c-ok);
+}
+.canvas-node[data-node-type='context'],
+.canvas-node[data-node-type='prompt'],
+.canvas-node[data-node-type='response'] {
+  --kind-accent: var(--c-purple);
+}
+
 .canvas-node .node-type-badge {
   font-size: calc(10px * var(--node-chrome-scale, 1));
   padding: calc(1px * var(--node-chrome-scale, 1)) calc(6px * var(--node-chrome-scale, 1));
@@ -713,7 +727,7 @@ body,
 .canvas-node .node-controls button {
   background: none;
   border: none;
-  color: var(--c-muted);
+  color: var(--c-dim);
   cursor: pointer;
   display: inline-flex;
   align-items: center;
@@ -734,8 +748,11 @@ body,
 .canvas-node .node-body {
   flex: 1;
   overflow: auto;
-  padding: 12px;
+  padding: 10px 14px;
   min-height: 0;
+  font-size: 11px;
+  line-height: 1.6;
+  color: var(--c-text-soft);
 }
 
 /* Markdown rendered content inside nodes */
@@ -761,16 +778,62 @@ body,
   color: var(--c-muted);
 }
 
+/* GFM task lists: custom-drawn checkboxes — native inputs are an 11px target
+   at typical zoom and render inconsistently (or not at all) in embedding
+   apps — and no double marker (• plus box) on task rows. */
+.canvas-node .node-body li:has(> input[type='checkbox']),
+.md-reader-content li:has(> input[type='checkbox']) {
+  list-style: none;
+  /* Reclaim the bullet gutter, then indent the whole item past the box — the
+     box sits OUT of the text flow so wrapped lines align under the first. */
+  margin-left: -1.3em;
+  padding-left: 1.65em;
+  position: relative;
+}
+.canvas-node .node-body li > input[type='checkbox'],
+.md-reader-content li > input[type='checkbox'] {
+  appearance: none;
+  -webkit-appearance: none;
+  position: absolute;
+  left: 0;
+  top: 0.22em;
+  width: 15px;
+  height: 15px;
+  margin: 0;
+  border: 1.5px solid var(--c-muted);
+  border-radius: 4px;
+  background: var(--c-panel);
+  cursor: pointer;
+  /* Embedding webviews (Copilot app) force color schemes on form controls —
+     this box is fully custom-drawn, keep its colors ours. */
+  forced-color-adjust: none;
+  color-scheme: light;
+}
+.canvas-node .node-body li > input[type='checkbox']:hover,
+.md-reader-content li > input[type='checkbox']:hover {
+  border-color: var(--c-accent);
+}
+.canvas-node .node-body li > input[type='checkbox']:checked,
+.md-reader-content li > input[type='checkbox']:checked {
+  border-color: var(--c-accent);
+  background-color: var(--c-accent);
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8'%3E%3Cpath d='M1 4l2.6 2.6L9 1' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+/* Hanging indent: with `inside`, a wrapped line falls back to the card edge
+   under the marker instead of aligning with its own first line. */
 .canvas-node .node-body ul,
 .canvas-node .node-body ol {
   margin: 0.4em 0;
-  padding-left: 0.25em;
-  list-style-position: inside;
+  padding-left: 1.3em;
+  list-style-position: outside;
 }
 
 .canvas-node .node-body li {
   margin: 0.2em 0;
-  padding-left: 0.15em;
+  padding-left: 0.1em;
 }
 
 .canvas-node .node-body a {
@@ -821,226 +884,2226 @@ body,
   font-weight: 600;
 }
 
-/* HUD layer — [left-dock] [toolbar] [right-dock]. Wraps onto multiple rows in a
-   narrow embedding panel (e.g. the Copilot side panel) instead of clipping. */
-.hud-layer {
-  position: fixed;
-  top: 12px;
-  left: 12px;
-  right: 12px;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  justify-content: center;
-  gap: 8px;
-  z-index: 9999;
-  pointer-events: none;
-}
-.hud-layer > * {
-  pointer-events: auto;
-}
-.hud-left,
-.hud-right {
+/* ── App shell: rail + top bar + canvas region (rail-chrome-v2) ── */
+.app-shell {
   display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: var(--c-bg);
 }
 
-/* Toolbar */
-.canvas-toolbar {
+.tool-rail {
+  width: 52px;
+  flex-shrink: 0;
   display: flex;
-  flex-wrap: wrap;
+  flex-direction: column;
   align-items: center;
-  gap: 6px;
-  padding: 6px 10px;
-  min-height: var(--hud-bar-height);
-  max-width: 100%;
-  box-sizing: border-box;
-  background: var(--c-panel-glass);
-  backdrop-filter: blur(12px);
-  border: 1px solid var(--c-line);
-  border-radius: var(--radius);
+  gap: 4px;
+  padding: 10px 0;
+  background: var(--c-panel-soft);
+  border-right: 1px solid var(--c-line);
+  overflow-y: auto;
+  scrollbar-width: none;
+  /* The rail is a stacking context: its popovers can only win against the
+     canvas region's overlays (annotation capture layer at 9996) if the rail
+     ITSELF stacks above them — a child's z-index never escapes this context. */
+  z-index: 9999;
+}
+.tool-rail::-webkit-scrollbar {
+  display: none;
 }
 
-.toolbar-tooltip-anchor {
-  position: relative;
+.rail-brand {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  color: var(--c-accent);
+  flex-shrink: 0;
 }
 
-.toolbar-tooltip-anchor-start .toolbar-tooltip {
-  left: 0;
-  transform: translateX(0) translateY(6px);
+.rail-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  background: none;
+  color: var(--c-muted);
+  cursor: pointer;
+  flex-shrink: 0;
 }
-
-.toolbar-tooltip-anchor-end .toolbar-tooltip {
-  left: auto;
-  right: 0;
-  transform: translateX(0) translateY(6px);
+.rail-btn svg {
+  display: block;
 }
-
-.toolbar-tooltip {
-  position: absolute;
-  left: 50%;
-  top: calc(100% + 10px);
-  transform: translateX(-50%) translateY(6px);
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  min-width: 168px;
-  max-width: 240px;
-  padding: 10px 12px;
-  background: color-mix(in srgb, var(--c-panel) 92%, black 8%);
-  border: 1px solid color-mix(in srgb, var(--c-line) 78%, var(--c-accent) 22%);
-  border-radius: 10px;
-  box-shadow: 0 14px 36px var(--c-shadow-heavy), 0 0 0 1px var(--c-accent-8);
-  backdrop-filter: blur(14px);
+.rail-btn:hover {
+  background: var(--c-surface-hover);
   color: var(--c-text);
-  font-size: 12px;
-  line-height: 1.35;
-  white-space: normal;
-  opacity: 0;
-  pointer-events: none;
-  z-index: 10010;
-  transition: opacity 0.14s ease, transform 0.14s ease;
 }
-
-.toolbar-tooltip::after {
-  content: '';
-  position: absolute;
-  left: 50%;
-  top: -5px;
-  width: 10px;
-  height: 10px;
-  background: inherit;
-  border-top: 1px solid color-mix(in srgb, var(--c-line) 78%, var(--c-accent) 22%);
-  border-left: 1px solid color-mix(in srgb, var(--c-line) 78%, var(--c-accent) 22%);
-  transform: translateX(-50%) rotate(45deg);
+.rail-btn.active {
+  background: var(--c-accent-10);
+  border-color: var(--c-accent-25);
+  color: var(--c-accent);
+}
+.rail-btn.active:hover {
+  background: var(--c-accent-15, var(--c-accent-10));
 }
 
-.toolbar-tooltip-anchor-start .toolbar-tooltip::after {
-  left: 18px;
-  transform: rotate(45deg);
+.rail-divider {
+  width: 24px;
+  height: 1px;
+  background: var(--c-line);
+  flex-shrink: 0;
+  margin: 3px 0;
 }
 
-.toolbar-tooltip-anchor-end .toolbar-tooltip::after {
-  left: auto;
-  right: 18px;
-  transform: rotate(45deg);
+.rail-spacer {
+  flex: 1;
+  min-height: 8px;
 }
 
-.toolbar-tooltip-anchor:hover .toolbar-tooltip,
-.toolbar-tooltip-anchor > :focus-visible + .toolbar-tooltip {
-  opacity: 1;
-  transform: translateX(-50%) translateY(0);
+.app-main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
 }
 
-.toolbar-tooltip-anchor-start:hover .toolbar-tooltip,
-.toolbar-tooltip-anchor-start > :focus-visible + .toolbar-tooltip,
-.toolbar-tooltip-anchor-end:hover .toolbar-tooltip,
-.toolbar-tooltip-anchor-end > :focus-visible + .toolbar-tooltip {
-  transform: translateX(0) translateY(0);
+.top-bar {
+  height: var(--hud-bar-height);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 14px;
+  background: color-mix(in srgb, var(--c-panel-soft) 92%, transparent);
+  backdrop-filter: blur(12px);
+  border-bottom: 1px solid var(--c-line);
+  /* NOT overflow:hidden — the BarHint tooltips hang below the bar and were
+     clipped invisible for everyone (the e2e asserted opacity, which cannot
+     see ancestor clipping). Children ellipsize themselves; the narrow-screen
+     collapse is media-query display, not clipping. */
+  min-width: 0;
+  z-index: 9998;
 }
 
-.toolbar-tooltip-label {
+.top-bar-title {
   font-size: 13px;
   font-weight: 600;
-  letter-spacing: 0.01em;
   color: var(--c-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 60px;
+  flex-shrink: 1;
 }
 
-.toolbar-tooltip-meta {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  color: var(--c-text-soft);
+.top-bar-meta {
+  font: 11px var(--mono);
+  color: var(--c-dim);
+  white-space: nowrap;
+  flex-shrink: 0;
 }
 
-.toolbar-tooltip-shortcut {
+.top-bar-spacer {
+  flex: 1;
+  min-width: 0;
+}
+
+.top-bar-sep {
+  width: 1px;
+  height: 20px;
+  background: var(--c-line);
+  flex-shrink: 0;
+}
+
+.top-bar-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-height: 20px;
-  padding: 2px 7px;
-  border-radius: 999px;
-  border: 1px solid var(--c-accent-25);
-  background: var(--c-accent-10);
-  color: var(--c-accent);
-  font: 11px/1 var(--mono);
-  white-space: nowrap;
-}
-
-.canvas-toolbar button {
+  padding: 6px 8px;
   background: none;
   border: 1px solid transparent;
-  color: var(--c-muted);
-  padding: 6px 10px;
   border-radius: var(--radius-sm);
-  font: inherit;
-  font-size: 14px;
+  color: var(--c-muted);
   cursor: pointer;
+  flex-shrink: 0;
 }
-
-.canvas-toolbar button:hover {
+.top-bar-btn svg {
+  display: block;
+}
+.top-bar-btn:hover {
   background: var(--c-surface-hover);
   color: var(--c-text);
   border-color: var(--c-line);
 }
 
-.canvas-toolbar .separator {
-  width: 1px;
-  height: 20px;
-  background: var(--c-line);
-}
-
-.canvas-toolbar .canvas-brand {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  color: var(--c-accent);
+.top-bar-zoom-label {
+  min-width: 38px;
+  text-align: center;
+  font: 11px var(--mono);
+  color: var(--c-muted);
+  background: none;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  padding: 6px 4px;
+  cursor: pointer;
   flex-shrink: 0;
 }
+.top-bar-zoom-label:hover {
+  background: var(--c-surface-hover);
+  color: var(--c-text);
+}
 
-.canvas-toolbar .connection-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  flex-shrink: 0;
+.canvas-region {
+  flex: 1;
+  min-height: 0;
+  position: relative;
+  overflow: hidden;
 }
 
-.canvas-toolbar .connection-dot.connected {
-  background: var(--c-ok);
+/* ── Agent presence (rail-chrome-v2 phase 3) ────────────────────
+   Every surface below mounts only while a session is attached. Phase colors
+   are tokens so all nine themes agree: thinking=purple, tooling=accent,
+   waiting=warn, idle=dim. */
+.agent-chip,
+.agent-cursor,
+.minimap-presence {
+  --presence-color: var(--c-dim);
 }
-.canvas-toolbar .connection-dot.connecting {
-  background: var(--c-warn);
-  animation: pulse 1.5s infinite;
+.agent-chip.phase-thinking,
+.agent-cursor.phase-thinking,
+.minimap-presence.phase-thinking {
+  --presence-color: var(--c-purple);
 }
-.canvas-toolbar .connection-dot.disconnected {
-  background: var(--c-danger);
+.agent-chip.phase-tooling,
+.agent-cursor.phase-tooling,
+.minimap-presence.phase-tooling {
+  --presence-color: var(--c-accent);
+}
+.agent-chip.phase-waiting-approval,
+.agent-cursor.phase-waiting-approval,
+.minimap-presence.phase-waiting-approval {
+  --presence-color: var(--c-warn);
 }
 
-@keyframes pulse {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
+/* Top-bar chip */
+.agent-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 5px 12px;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--presence-color) 35%, transparent);
+  background: color-mix(in srgb, var(--presence-color) 12%, transparent);
+  color: var(--presence-color);
+  font-size: 11px;
+  font-weight: 600;
+  white-space: nowrap;
+  flex-shrink: 0;
+  min-width: 0;
+  max-width: 280px;
+}
+.agent-chip.phase-idle {
+  background: none;
+  border-color: var(--c-line);
+}
+.agent-chip-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--presence-color);
+  flex-shrink: 0;
+}
+.agent-chip.phase-thinking .agent-chip-dot,
+.agent-chip.phase-tooling .agent-chip-dot {
+  animation: presence-pulse 1.4s ease-in-out infinite;
+}
+.agent-chip-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+.agent-chip-who {
+  font: 10px var(--mono);
+  font-weight: 400;
+  color: var(--c-muted);
+  white-space: nowrap;
+}
+
+/* On-canvas cursor + phase chip (world layer; counter-scaled inner) */
+.agent-presence-layer {
+  display: contents;
+}
+.agent-cursor {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 9000;
+  pointer-events: none;
+  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
+  color: var(--presence-color);
+}
+.agent-cursor.is-worker {
+  opacity: 0.85;
+}
+.agent-cursor.is-worker .agent-cursor-glyph {
+  transform: scale(0.75);
+  transform-origin: top left;
+}
+.agent-cursor.is-worker .agent-cursor-chip {
+  font-size: 9px;
+  padding: 1px 6px;
+}
+.agent-chip-workers {
+  margin-left: 4px;
+  padding: 0 5px;
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--c-accent) 16%, transparent);
+  color: var(--c-accent);
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  white-space: nowrap;
+}
+
+/* End THIS session — each chip carries its own ×, so a two-agent board can
+   end one writer without hunting for it in the session panel. */
+.agent-chip-end {
+  margin-left: 2px;
+  padding: 0 3px;
+  border: none;
+  background: none;
+  color: var(--c-muted);
+  font-size: 12px;
+  line-height: 1;
+  cursor: pointer;
+  border-radius: 6px;
+}
+
+.agent-chip-end:hover {
+  color: var(--c-danger, #ef4444);
+  background: color-mix(in srgb, currentColor 12%, transparent);
+}
+
+.agent-cursor-glyph path {
+  fill: var(--identity-color, currentColor);
+}
+.agent-cursor-chip {
+  border-left: 3px solid var(--identity-color, transparent);
+}
+.agent-chip {
+  border-left: 3px solid var(--identity-color, transparent);
+}
+.minimap-presence {
+  background: var(--identity-color, var(--presence-color));
+}
+
+.agent-cursor.is-external {
+  opacity: 0.8;
+}
+.agent-cursor.is-external .agent-cursor-chip {
+  border-style: dashed;
+}
+
+.agent-cursor-inner {
+  position: relative;
+  transform-origin: 0 0;
+}
+.agent-cursor-glyph {
+  display: block;
+  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
+}
+.agent-cursor-chip {
+  position: absolute;
+  left: 14px;
+  top: 18px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 9px;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--presence-color) 35%, transparent);
+  background: color-mix(in srgb, var(--c-panel) 92%, var(--presence-color) 8%);
+  color: var(--presence-color);
+  font-size: 10.5px;
+  font-weight: 600;
+  white-space: nowrap;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+}
+.agent-cursor-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--presence-color);
+}
+.agent-cursor.phase-thinking .agent-cursor-dot,
+.agent-cursor.phase-tooling .agent-cursor-dot {
+  animation: presence-pulse 1.4s ease-in-out infinite;
+}
+.agent-cursor-who {
+  font: 9.5px var(--mono);
+  font-weight: 400;
+  color: var(--c-muted);
+}
+
+/* Node shimmer: the node an attached agent is mutating right now */
+.canvas-node.agent-mutating {
+  border-color: color-mix(in srgb, var(--c-accent) 45%, transparent) !important;
+  background-image: linear-gradient(
+    100deg,
+    transparent 20%,
+    color-mix(in srgb, var(--c-accent) 13%, transparent) 50%,
+    transparent 80%
+  );
+  background-size: 200% 100%;
+  animation: presence-shimmer 1.6s linear infinite;
+}
+
+@keyframes presence-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.45;
+  }
+}
+@keyframes presence-shimmer {
+  from {
+    background-position: 200% 0;
+  }
+  to {
+    background-position: -200% 0;
+  }
+}
+
+/* Reduced motion: keep every static color state, drop the motion. */
+@media (prefers-reduced-motion: reduce) {
+  .agent-cursor {
+    transition: none;
+  }
+  .agent-chip-dot,
+  .agent-cursor-dot,
+  .canvas-node.agent-mutating {
+    animation: none;
+  }
+  .canvas-node.agent-mutating {
+    background-image: none;
+  }
+}
+
+/* ── Session panel (rail-chrome-v2 phase 4) ─────────────────────
+   Right sibling of the centre column while a session is attached. Below
+   1180px it becomes a fixed overlay drawer and the canvas reclaims its width. */
+.session-panel {
+  width: 320px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--c-panel-soft);
+  border-left: 1px solid var(--c-line);
+  min-height: 0;
+  z-index: 9997;
+  animation: session-panel-in 180ms ease;
+}
+.session-panel.is-collapsed {
+  width: 28px;
+  align-items: center;
+  padding-top: 10px;
+  gap: 10px;
+}
+.session-collapsed-label {
+  writing-mode: vertical-rl;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--c-dim);
+}
+
+.session-panel-header {
+  height: var(--hud-bar-height);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0 12px 0 16px;
+  border-bottom: 1px solid var(--c-line);
+}
+.session-panel-title {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--c-text);
+}
+.session-live {
+  --presence-color: var(--c-dim);
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font: 10px var(--mono);
+  color: var(--c-muted);
+}
+.session-live.phase-thinking {
+  --presence-color: var(--c-purple);
+}
+.session-live.phase-tooling {
+  --presence-color: var(--c-accent);
+}
+.session-live.phase-waiting-approval {
+  --presence-color: var(--c-warn);
+}
+.session-live-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--presence-color);
+}
+.session-live.phase-thinking .session-live-dot,
+.session-live.phase-tooling .session-live-dot {
+  animation: presence-pulse 1.4s ease-in-out infinite;
+}
+.session-collapse {
+  width: 26px;
+  height: 26px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: none;
+  color: var(--c-muted);
+  font-size: 16px;
+  line-height: 1;
+  cursor: pointer;
+}
+.session-collapse:hover {
+  background: var(--c-surface-hover);
+  color: var(--c-text);
+}
+
+.session-panel-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 12px 12px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.session-section-title {
+  margin: 0 0 8px;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--c-dim);
+}
+.session-empty {
+  font-size: 10.5px;
+  line-height: 1.5;
+  color: var(--c-dim);
+}
+.session-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+/* Work items + gates */
+.session-item {
+  --glyph: var(--c-dim);
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 8px 10px;
+  border: 1px solid var(--c-line);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--c-panel) 70%, transparent);
+}
+.session-item.status-running {
+  --glyph: var(--c-accent);
+}
+.session-item.status-awaiting {
+  --glyph: var(--c-warn);
+}
+.session-item.status-done {
+  --glyph: var(--c-ok);
+}
+.session-item.status-vetoed {
+  --glyph: var(--c-danger);
+}
+.session-glyph {
+  width: 7px;
+  height: 7px;
+  margin-top: 5px;
+  border-radius: 50%;
+  background: var(--glyph);
+  flex-shrink: 0;
+}
+.session-item.status-running .session-glyph {
+  animation: presence-pulse 1.4s ease-in-out infinite;
+}
+.session-item-main {
+  flex: 1;
+  min-width: 0;
+}
+.session-item-title {
+  display: block;
+  width: 100%;
+  padding: 0;
+  border: none;
+  background: none;
+  text-align: left;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--c-text-soft);
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.session-item-title:disabled {
+  cursor: default;
+}
+.session-item-title:not(:disabled):hover {
+  color: var(--c-text);
+}
+.session-item-detail {
+  margin-top: 2px;
+  font-size: 10.5px;
+  line-height: 1.45;
+  color: var(--c-muted);
+}
+.session-item-status {
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--glyph);
+  flex-shrink: 0;
+  margin-top: 3px;
+}
+.session-item-time {
+  font: 9px var(--mono);
+  color: var(--c-dim);
+  flex-shrink: 0;
+  margin-top: 4px;
+}
+.session-gate {
+  border-color: color-mix(in srgb, var(--c-warn) 35%, transparent);
+  background: color-mix(in srgb, var(--c-warn) 6%, transparent);
+}
+.session-gate-ttl {
+  margin-top: 4px;
+  font: 10px var(--mono);
+  color: var(--c-warn);
+}
+.session-gate-held {
+  opacity: 0.85;
+}
+.session-gate-actions {
+  display: flex;
+  gap: 6px;
+  margin-top: 8px;
+}
+.session-gate-approve,
+.session-gate-reject {
+  padding: 4px 12px;
+  border-radius: 7px;
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.session-gate-approve {
+  border: 1px solid transparent;
+  background: color-mix(in srgb, var(--c-ok) 15%, transparent);
+  color: var(--c-ok);
+}
+.session-gate-approve:hover {
+  background: color-mix(in srgb, var(--c-ok) 25%, transparent);
+}
+.session-gate-reject {
+  border: 1px solid var(--c-line);
+  background: none;
+  color: var(--c-muted);
+}
+.session-gate-reject:hover {
+  border-color: color-mix(in srgb, var(--c-danger) 45%, transparent);
+  color: var(--c-danger);
+}
+.session-gate-approve:disabled,
+.session-gate-reject:disabled {
+  opacity: 0.6;
+  cursor: progress;
+}
+
+/* Timeline */
+/* One row, always: compact chips, no wrapping, and the row runs full-bleed
+   across the panel's inner padding so all six fit. If a theme/locale ever
+   makes them wider still, the row pans horizontally instead of stacking. */
+.session-section-toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+}
+.session-work-summary {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font: 10px/1 var(--mono);
+  color: var(--c-muted);
+}
+.session-work-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--c-ok);
+  animation: session-work-pulse 1.6s ease-in-out infinite;
+}
+@keyframes session-work-pulse {
+  0%,
+  100% {
+    opacity: 0.45;
+    transform: scale(0.85);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+.session-section-chevron {
+  color: var(--c-muted);
+  font-size: 13px;
+  transition: transform 0.15s ease;
+}
+.session-section-chevron.is-open {
+  transform: rotate(90deg);
+}
+
+.session-undo-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 12px;
+  border-bottom: 1px solid var(--c-line);
+  background: var(--c-accent-8);
+}
+.session-undo-text {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 11px;
+  color: var(--c-text-soft);
+}
+.session-undo-btn {
+  flex-shrink: 0;
+  padding: 3px 10px;
+  border: 1px solid var(--c-accent-25);
+  border-radius: 999px;
+  background: none;
+  color: var(--c-accent);
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.session-undo-btn:hover {
+  background: var(--c-accent-10);
+}
+
+.session-timeline-filters {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 1px;
+  margin: 2px -12px 8px;
+  /* Compact panels (Amp portal, 0.5.0 report B): six chips overflowed the
+     row by 11px — tighter inset + chip padding buys ~16px back. */
+  padding: 0 8px;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.session-timeline-filters::-webkit-scrollbar {
+  display: none;
+}
+
+/* The hovered/active chip's one-line meaning — rendered in flow because an
+   anchored tooltip would clip against the filter row's own scroll container. */
+.session-timeline-hint {
+  margin: -4px 0 8px;
+  font-size: 10px;
+  line-height: 1.35;
+  color: var(--c-muted);
+  min-height: 14px;
+}
+.session-timeline-filters .activity-filter {
+  flex-shrink: 0;
+  padding: 2px 4px;
+}
+
+.session-timeline-row {
+  --tone: var(--c-muted);
+  display: flex;
+  gap: 8px;
+  padding: 4px 2px;
+}
+.session-timeline-row.tone-accent {
+  --tone: var(--c-accent);
+}
+.session-timeline-row.tone-ok {
+  --tone: var(--c-ok);
+}
+.session-timeline-row.tone-warn {
+  --tone: var(--c-warn);
+}
+.session-timeline-row.tone-danger {
+  --tone: var(--c-danger);
+}
+.session-timeline-row.tone-purple {
+  --tone: var(--c-purple);
+}
+.session-timeline-dot {
+  width: 6px;
+  height: 6px;
+  margin-top: 5px;
+  border-radius: 50%;
+  background: var(--tone);
+  flex-shrink: 0;
+}
+.session-timeline-main {
+  flex: 1;
+  min-width: 0;
+}
+.session-timeline-head {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+.session-timeline-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--tone);
+}
+/* Row writer in its identity hue — multi-assistant boards need every row to
+   answer "who wrote this" without opening anything. */
+.session-timeline-who {
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--identity-color, var(--c-muted));
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 40%;
+}
+.session-timeline-undo {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  margin-top: 5px;
+  padding: 4px 12px;
+  border: 1px solid var(--c-accent);
+  border-radius: 999px;
+  background: var(--c-accent-10);
+  color: var(--c-accent);
+  font-size: 11.5px;
+  font-weight: 700;
+  cursor: pointer;
+  animation: session-work-pulse 1.6s ease-in-out 2;
+}
+.session-timeline-undo:hover {
+  background: var(--c-accent);
+  color: var(--c-bg);
+}
+.session-timeline-undone {
+  margin-top: 2px;
+  font: 9px var(--mono);
+  color: var(--c-dim);
+}
+.session-timeline-body {
+  font-size: 10.5px;
+  line-height: 1.5;
+  color: var(--c-text-soft);
+  overflow-wrap: anywhere;
+}
+
+/* Scope row (session panel) */
+.session-scope {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px 8px 16px;
+  border-bottom: 1px solid var(--c-line);
+  font-size: 10.5px;
+  color: var(--c-muted);
+}
+.session-scope.is-fenced {
+  background: color-mix(in srgb, var(--c-purple) 8%, transparent);
+  color: var(--c-text-soft);
+}
+.session-scope-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--c-dim);
+  flex-shrink: 0;
+}
+.session-scope.is-fenced .session-scope-dot {
+  background: var(--c-purple);
+}
+.session-scope-text {
+  flex: 1;
+  min-width: 0;
+}
+.session-scope-text strong {
+  color: var(--c-purple);
+}
+.session-scope-action {
+  padding: 3px 9px;
+  border-radius: 6px;
+  border: 1px solid var(--c-line);
+  background: none;
+  color: var(--c-muted);
+  font-size: 10.5px;
+  font-weight: 600;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.session-scope-action:hover:not(:disabled) {
+  border-color: color-mix(in srgb, var(--c-purple) 45%, transparent);
+  color: var(--c-purple);
+}
+.session-scope-action:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+/* Scope fence on the canvas (world layer) */
+.scope-fence {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1;
+  pointer-events: none;
+  border: 1.5px dashed color-mix(in srgb, var(--c-purple) 40%, transparent);
+  border-radius: 16px;
+  background: color-mix(in srgb, var(--c-purple) 3%, transparent);
+}
+.scope-fence-pill {
+  position: absolute;
+  left: 14px;
+  transform-origin: 0 50%;
+  padding: 3px 10px;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--c-purple) 35%, transparent);
+  background: color-mix(in srgb, var(--c-panel) 92%, var(--c-purple) 8%);
+  color: var(--c-purple);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  white-space: nowrap;
+}
+.scope-fence-pill-top {
+  top: -11px;
+}
+.scope-fence-pill-bottom {
+  bottom: -11px;
+  color: var(--c-muted);
+  font-weight: 500;
+  letter-spacing: 0;
+}
+
+/* ── Command bar (rail-chrome-v2 phase 5) ─────────────────────
+   The human's steering surface while a session is attached: the design's
+   floating composer, centered at the bottom of the canvas region, with the
+   pinned-context chips floating above it. */
+.command-bar {
+  position: absolute;
+  left: 50%;
+  bottom: 18px;
+  transform: translateX(-50%);
+  width: min(560px, calc(100% - 48px));
+  z-index: 65;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.command-bar-chips {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+}
+.command-bar-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  max-width: 240px;
+  padding: 2px 5px 2px 9px;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--c-warn) 35%, transparent);
+  background: color-mix(in srgb, var(--c-warn) 12%, transparent);
+  color: var(--c-warn);
+  font-size: 10px;
+  font-weight: 600;
+}
+.command-bar-chip-glyph {
+  font-size: 10px;
+  line-height: 1;
+}
+.command-bar-chip-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.command-bar-chip-unpin {
+  width: 14px;
+  height: 14px;
+  border: none;
+  border-radius: 50%;
+  background: none;
+  color: var(--c-warn);
+  font-size: 12px;
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0.7;
+}
+.command-bar-chip-unpin:hover {
+  opacity: 1;
+  background: color-mix(in srgb, var(--c-warn) 25%, transparent);
+}
+.command-bar-chips-note {
+  font-size: 10px;
+  color: var(--c-dim);
+}
+.command-bar-composer {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  border-radius: 12px;
+  border: 1px solid var(--c-line);
+  background: color-mix(in srgb, var(--c-panel) 95%, transparent);
+  backdrop-filter: blur(16px);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
+}
+.command-bar-target {
+  appearance: none;
+  -webkit-appearance: none;
+  max-width: 148px;
+  padding: 4px 18px 4px 8px;
+  border: 1px solid var(--c-line);
+  border-radius: 7px;
+  background: color-mix(in srgb, var(--c-panel) 80%, transparent)
+    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%237a8699' stroke-width='1.4'/%3E%3C/svg%3E")
+    no-repeat right 6px center;
+  color: var(--c-text-soft);
+  font: 12px/1.3 var(--mono);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.command-bar-target:hover,
+.command-bar-target:focus-visible {
+  border-color: var(--c-accent-25);
+  color: var(--c-text);
+}
+
+.command-bar-icon {
+  flex-shrink: 0;
+  color: var(--c-purple);
+}
+.command-bar-input {
+  flex: 1;
+  min-width: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  background: none;
+  color: var(--c-text);
+  font: 13px var(--font);
+}
+.command-bar-input::placeholder {
+  color: var(--c-dim);
+}
+.command-bar-composer:focus-within {
+  border-color: color-mix(in srgb, var(--c-accent) 45%, var(--c-line));
+}
+.command-bar-send {
+  flex-shrink: 0;
+  padding: 5px 14px;
+  border-radius: 7px;
+  border: none;
+  background: var(--c-accent);
+  color: var(--c-bg);
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.command-bar-send:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--c-accent) 80%, white);
+}
+.command-bar-send:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+
+/* Context-budget meter in the top bar (session-only) */
+.context-budget {
+  --tone: var(--c-ok);
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+.context-budget.tone-warn {
+  --tone: var(--c-warn);
+}
+.context-budget.tone-danger {
+  --tone: var(--c-danger);
+}
+.context-budget-caption {
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--c-muted);
+}
+.context-budget-track {
+  display: block;
+  width: 72px;
+  height: 5px;
+  border-radius: 3px;
+  background: var(--c-line);
+  overflow: hidden;
+}
+.context-budget-fill {
+  display: block;
+  height: 100%;
+  border-radius: 3px;
+  background: linear-gradient(90deg, var(--c-accent), var(--c-warn));
+  transition: width 180ms ease;
+}
+.context-budget.tone-warn .context-budget-fill,
+.context-budget.tone-danger .context-budget-fill {
+  background: var(--tone);
+}
+.context-budget-label {
+  font: 11px var(--mono);
+  color: var(--c-text-soft);
+  min-width: 30px;
+  text-align: right;
+}
+
+/* ── External Steering (rail-chrome-v2 phase 6) ───────────────
+   External writers, no session: a passive top-bar indicator, the activity
+   feed popover under it, and the connected-writers sheet. Quiet otherwise. */
+.writer-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  border: 1.5px solid var(--c-panel-soft);
+  color: var(--c-bg);
+  font-size: 8.5px;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+.external-indicator {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 12px 4px 6px;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--c-purple) 35%, transparent);
+  background: color-mix(in srgb, var(--c-purple) 8%, transparent);
+  color: var(--c-purple);
+  cursor: pointer;
+  white-space: nowrap;
+  flex-shrink: 0;
+  font: inherit;
+}
+.external-indicator:hover,
+.external-indicator[aria-expanded='true'] {
+  background: color-mix(in srgb, var(--c-purple) 15%, transparent);
+}
+.external-indicator-avatars {
+  display: inline-flex;
+  align-items: center;
+}
+.external-indicator-avatars .writer-avatar + .writer-avatar {
+  margin-left: -6px;
+}
+.external-indicator-label {
+  font-size: 11px;
+  font-weight: 600;
+}
+.external-indicator-ops {
+  font: 10px var(--mono);
+  color: var(--c-muted);
+}
+.external-indicator-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--c-purple);
+  flex-shrink: 0;
+  animation: presence-pulse 1.4s ease-in-out infinite;
+}
+
+.activity-feed {
+  position: absolute;
+  top: 10px;
+  right: 14px;
+  width: min(304px, calc(100% - 28px));
+  max-height: calc(100% - 20px);
+  display: flex;
+  flex-direction: column;
+  background: var(--c-panel);
+  border: 1px solid color-mix(in srgb, var(--c-purple) 30%, transparent);
+  border-radius: 10px;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
+  /* Popover-level like the rail menus: above the minimap, below the rail. */
+  z-index: 9999;
+  overflow: hidden;
+}
+.activity-feed-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 9px 13px;
+  border-bottom: 1px solid var(--c-line);
+  background: color-mix(in srgb, var(--c-bg) 60%, transparent);
+}
+.activity-feed-titles {
+  flex: 1;
+  min-width: 0;
+}
+.activity-feed-title {
+  font-size: 11.5px;
+  font-weight: 600;
+  color: var(--c-text);
+}
+.activity-feed-sub {
+  font: 9px var(--mono);
+  color: var(--c-dim);
+}
+.activity-feed-close {
+  background: none;
+  border: none;
+  color: var(--c-muted);
+  font-size: 14px;
+  cursor: pointer;
+  padding: 0 2px;
+}
+.activity-feed-close:hover {
+  color: var(--c-text);
+}
+.activity-filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding: 7px 10px;
+  border-bottom: 1px solid var(--c-line);
+}
+.activity-filter {
+  --writer: var(--c-purple);
+  padding: 2px 9px;
+  border-radius: 999px;
+  border: 1px solid var(--c-line);
+  background: none;
+  color: var(--c-muted);
+  font-size: 10px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.activity-filter.is-active {
+  border-color: color-mix(in srgb, var(--writer) 45%, transparent);
+  background: color-mix(in srgb, var(--writer) 14%, transparent);
+  color: var(--writer);
+}
+.activity-rows {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  min-height: 0;
+}
+.activity-row {
+  display: flex;
+  gap: 9px;
+  padding: 9px 13px;
+  border-bottom: 1px solid var(--c-line);
+}
+.activity-row:last-child {
+  border-bottom: none;
+}
+.activity-row.is-pending {
+  background: color-mix(in srgb, var(--c-purple) 5%, transparent);
+}
+.activity-glyph {
+  flex-shrink: 0;
+  width: 13px;
+  margin-top: 1px;
+  text-align: center;
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1.3;
+}
+.activity-glyph.tone-ok {
+  color: var(--c-ok);
+}
+.activity-glyph.tone-danger {
+  color: var(--c-danger);
+}
+.activity-glyph.tone-accent {
+  color: var(--c-accent);
+}
+.activity-glyph.tone-purple {
+  color: var(--c-purple);
+}
+.activity-main {
+  flex: 1;
+  min-width: 0;
+}
+.activity-text {
+  font-size: 11px;
+  color: var(--c-text-soft);
+  overflow-wrap: anywhere;
+}
+.activity-meta {
+  font-size: 10px;
+  line-height: 1.45;
+  color: var(--c-muted);
+}
+.activity-writer {
+  font: 8.5px var(--mono);
+}
+.activity-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 6px;
+}
+.activity-veto {
+  padding: 3px 10px;
+  border-radius: 7px;
+  background: none;
+  border: 1px solid color-mix(in srgb, var(--c-danger) 40%, transparent);
+  color: var(--c-danger);
+  font-size: 10.5px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.activity-veto:hover {
+  background: color-mix(in srgb, var(--c-danger) 10%, transparent);
+}
+.activity-hint,
+.activity-age {
+  font: 9px var(--mono);
+  color: var(--c-dim);
+  flex-shrink: 0;
+}
+.activity-empty {
+  padding: 14px 13px;
+  font-size: 11px;
+  color: var(--c-dim);
+}
+.activity-feed-foot {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 13px;
+  border-top: 1px solid var(--c-line);
+  background: color-mix(in srgb, var(--c-bg) 50%, transparent);
+}
+.activity-feed-note {
+  flex: 1;
+  font-size: 10px;
+  color: var(--c-dim);
+}
+.activity-feed-link {
+  background: none;
+  border: none;
+  padding: 0;
+  color: var(--c-muted);
+  font-size: 10.5px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.activity-feed-link:hover {
+  color: var(--c-text);
+}
+.activity-feed-link.is-accent {
+  color: var(--c-purple);
+}
+.activity-feed-link.is-accent:hover {
+  text-decoration: underline;
+}
+
+.writers-scrim {
+  position: absolute;
+  inset: 0;
+  background: rgba(4, 10, 18, 0.55);
+  z-index: 9999;
+}
+.writers-sheet {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 400px;
+  max-width: calc(100% - 48px);
+  background: var(--c-panel);
+  border: 1px solid var(--c-line);
+  border-radius: 12px;
+  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
+  z-index: 10000;
+  overflow: hidden;
+}
+.writers-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 11px 14px;
+  border-bottom: 1px solid var(--c-line);
+  background: color-mix(in srgb, var(--c-bg) 60%, transparent);
+}
+.writers-title {
+  flex: 1;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--c-text);
+}
+.writers-board {
+  font: 9px var(--mono);
+  color: var(--c-dim);
+}
+.writers-body {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 10px 14px;
+}
+.writers-section {
+  padding: 8px 0 2px;
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--c-dim);
+}
+.writers-row {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 6px 0;
+}
+.writers-name {
+  flex: 1;
+  font-size: 11.5px;
+  color: var(--c-text-soft);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.writers-name.is-mono {
+  font: 11px var(--mono);
+}
+.writers-config {
+  font-size: 9.5px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--c-purple) 12%, transparent);
+  color: var(--c-purple);
+}
+.writers-meta {
+  font: 9.5px var(--mono);
+  color: var(--c-dim);
+}
+.writers-empty {
+  font-size: 10.5px;
+  color: var(--c-dim);
+  padding: 4px 0;
+}
+.writers-foot {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  border-top: 1px solid var(--c-line);
+  background: color-mix(in srgb, var(--c-bg) 50%, transparent);
+}
+.writers-note {
+  flex: 1;
+  font-size: 10px;
+  color: var(--c-dim);
+}
+.writers-done {
+  padding: 5px 14px;
+  border: none;
+  border-radius: 7px;
+  background: var(--c-accent);
+  color: var(--c-bg);
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+/* ── Minimap v2 (rail-chrome-v2 phase 7, item 19) ─────────────
+   True-scale map from the store; magnifies ×1.7 from the bottom-right on hover. */
+.minimap {
+  position: absolute;
+  bottom: 18px;
+  right: 16px;
+  width: 168px;
+  height: 112px;
+  border: 1px solid var(--c-line);
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
+  background: color-mix(in srgb, var(--c-panel-soft) 94%, transparent);
+  backdrop-filter: blur(8px);
+  z-index: 60;
+  opacity: 0.85;
+  transform-origin: bottom right;
+  transition:
+    transform 160ms ease,
+    opacity 120ms ease;
+  cursor: crosshair;
+  user-select: none;
+}
+.minimap:hover {
+  opacity: 1;
+  transform: scale(1.7);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
+}
+.minimap-node {
+  position: absolute;
+  border-radius: 1.5px;
+  background: var(--kind);
+  opacity: 0.55;
+}
+.minimap-node.is-group {
+  background: color-mix(in srgb, var(--kind) 4%, transparent);
+  border: 1px dashed color-mix(in srgb, var(--kind) 55%, transparent);
+  opacity: 1;
+  border-radius: 2px;
+}
+.minimap-node.is-selected {
+  outline: 1px solid var(--c-accent);
+  opacity: 0.8;
+}
+.minimap-fence {
+  position: absolute;
+  border: 1px dashed color-mix(in srgb, var(--c-purple) 45%, transparent);
+  border-radius: 2px;
+  background: color-mix(in srgb, var(--c-purple) 3%, transparent);
+}
+.minimap-presence {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--presence-color);
+  border: 1.5px solid var(--c-bg);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--presence-color) 45%, transparent);
+  z-index: 4;
+}
+/* Actively working = the moment the human is looking for: pulse the halo. */
+.minimap-presence.phase-thinking,
+.minimap-presence.phase-tooling {
+  animation: presence-pulse 1.6s ease-in-out infinite;
+}
+.minimap-presence.is-worker {
+  width: 6px;
+  height: 6px;
+}
+.minimap-presence.is-external {
+  opacity: 0.75;
+}
+.minimap-frame {
+  position: absolute;
+  border: 1.5px solid color-mix(in srgb, var(--c-accent) 85%, transparent);
+  border-radius: 2px;
+  background: color-mix(in srgb, var(--c-accent) 5%, transparent);
+  cursor: grab;
+}
+.minimap-zoom {
+  position: absolute;
+  right: 5px;
+  bottom: 3px;
+  font: 8px var(--mono);
+  color: var(--c-dim);
+}
+
+/* ── Accessibility sweep (rail-chrome-v2 item 18) ───────────────
+   One focus ring for every chrome control; nodes are focusable for the
+   keyboard (arrow keys traverse, Enter opens); reduced motion below. */
+.tool-rail button:focus-visible,
+.top-bar button:focus-visible,
+.connection-banner button:focus-visible,
+.session-panel button:focus-visible,
+.session-panel input:focus-visible,
+.command-bar button:focus-visible,
+.command-bar-input:focus-visible,
+.selection-bar button:focus-visible,
+.activity-feed button:focus-visible,
+.writers-sheet button:focus-visible,
+.empty-state button:focus-visible,
+.session-receipt button:focus-visible,
+.snapshot-panel button:focus-visible,
+.expanded-header button:focus-visible,
+.group-action:focus-visible,
+.group-menu button:focus-visible,
+.command-palette-item:focus-visible,
+.canvas-node:focus-visible {
+  outline: 2px solid var(--c-accent);
+  outline-offset: 2px;
+}
+.command-bar-input:focus-visible {
+  outline: none;
+}
+.canvas-node:focus {
+  outline: none;
+}
+.canvas-node:focus-visible {
+  outline: 2px solid var(--c-accent);
+  outline-offset: 3px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .human-cursor {
+    transition: none;
+  }
+  .connection-banner-progress-fill,
+  .connection-dot,
+  .external-indicator-dot,
+  .group-chip-expand,
+  .beta-tag {
+  margin-left: 2px;
+  padding: 1px 5px;
+  border-radius: 8px;
+  border: 1px solid color-mix(in srgb, var(--c-accent) 45%, transparent);
+  color: var(--c-accent);
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  line-height: 1.4;
+}
+
+.start-session-dot {
+    animation: none;
+  }
+  .command-palette,
+  .snapshot-panel,
+  .session-receipt,
+  .canvas-node.group-node,
+  .activity-feed,
+  .writers-sheet,
+  .context-budget-fill {
+    animation: none;
+    transition: none;
+  }
+}
+
+/* ── Edge creation (rail-chrome-v2 item 15) ───────────────────── */
+.canvas-node.is-edge-target {
+  box-shadow: 0 0 0 2px var(--c-accent), 0 0 0 6px color-mix(in srgb, var(--c-accent) 18%, transparent);
+}
+.canvas-node.is-edge-target .node-port {
+  opacity: 1;
+  background: var(--c-accent);
+}
+.edge-hint-pill {
+  position: absolute;
+  z-index: 10000;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 10px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--c-panel) 96%, transparent);
+  border: 1px solid color-mix(in srgb, var(--c-accent) 40%, transparent);
+  pointer-events: none;
+  white-space: nowrap;
+}
+.edge-hint-main {
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--c-accent);
+}
+.edge-hint-keys {
+  font: 9px var(--mono);
+  color: var(--c-dim);
+}
+
+/* ── Human collaborator presence (rail-chrome-v2 phase 8) ─────── */
+.human-presence-layer {
+  position: absolute;
+  left: 0;
+  top: 0;
+  pointer-events: none;
+  z-index: 69;
+}
+.human-cursor {
+  position: absolute;
+  left: 0;
+  top: 0;
+  color: var(--c-ok);
+  transition: transform 120ms linear;
+}
+.human-cursor-inner {
+  transform-origin: top left;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.human-cursor-tag {
+  margin-left: 11px;
+  margin-top: -2px;
+  padding: 3px 9px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--c-ok) 92%, transparent);
+  color: var(--c-bg);
+  font-size: 10px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+.human-cursor.is-grabbing .human-cursor-tag::after {
+  content: ' · editing';
+  font-weight: 500;
+  opacity: 0.8;
+}
+.node-yield-pill {
+  /* Inside the card (paint containment clips anything outside it). */
+  position: absolute;
+  left: 10px;
+  bottom: 8px;
+  z-index: 5;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 9px;
+  border-radius: 999px;
+  background: var(--c-panel-soft);
+  border: 1px solid color-mix(in srgb, var(--c-warn) 40%, transparent);
+  color: var(--c-warn);
+  font-size: 9.5px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+.node-yield-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--c-warn);
+}
+
+/* Quiet-board affordance in the top bar */
+.start-session-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 5px 12px;
+  border-radius: 999px;
+  border: 1px solid var(--c-line);
+  background: none;
+  color: var(--c-muted);
+  font-size: 11px;
+  font-weight: 600;
+  white-space: nowrap;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.start-session-btn:hover {
+  border-color: color-mix(in srgb, var(--c-purple) 40%, transparent);
+  color: var(--c-purple);
+}
+.start-session-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--c-dim);
+}
+.start-session-btn:hover .start-session-dot {
+  background: var(--c-purple);
+}
+.session-end {
+  padding: 3px 10px;
+  border-radius: 6px;
+  border: 1px solid var(--c-line);
+  background: none;
+  color: var(--c-muted);
+  font-size: 10.5px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.session-end:hover {
+  border-color: color-mix(in srgb, var(--c-danger) 45%, transparent);
+  color: var(--c-danger);
+}
+
+/* Session receipt (design item 2) */
+.session-receipt {
+  position: absolute;
+  top: 14px;
+  right: 14px;
+  width: 290px;
+  z-index: 9998;
+  padding: 12px 14px;
+  border-radius: 12px;
+  border: 1px solid var(--c-line);
+  background: color-mix(in srgb, var(--c-panel) 96%, transparent);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
+  animation: session-panel-in 180ms ease;
+}
+.session-receipt-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.session-receipt-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--c-dim);
+}
+.session-receipt-title {
+  flex: 1;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--c-text);
+}
+.session-receipt-close {
+  width: 22px;
+  height: 22px;
+  border: none;
+  border-radius: 6px;
+  background: none;
+  color: var(--c-muted);
+  font-size: 14px;
+  cursor: pointer;
+}
+.session-receipt-close:hover {
+  background: var(--c-surface-hover);
+  color: var(--c-text);
+}
+.session-receipt-tiles {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+  margin-top: 12px;
+}
+.session-receipt-tile {
+  padding: 8px 10px;
+  border-radius: 8px;
+  border: 1px solid var(--c-line);
+  background: color-mix(in srgb, var(--c-panel-soft) 70%, transparent);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.session-receipt-tile-label {
+  font-size: 9.5px;
+  color: var(--c-dim);
+}
+.session-receipt-tile-value {
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--c-text);
+}
+.session-receipt-tile-value.tone-ok {
+  color: var(--c-ok);
+}
+.session-receipt-tile-value.tone-danger {
+  color: var(--c-danger);
+}
+.session-receipt-note,
+.session-receipt-diff {
+  margin-top: 10px;
+  font-size: 10.5px;
+  line-height: 1.5;
+  color: var(--c-muted);
+}
+.session-receipt-diff {
+  color: var(--c-text-soft);
+}
+.session-receipt-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 12px;
+}
+.session-receipt-primary,
+.session-receipt-secondary {
+  flex: 1;
+  padding: 7px 10px;
+  border-radius: 8px;
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.session-receipt-primary {
+  border: 1px solid var(--c-accent-25);
+  background: var(--c-accent-12);
+  color: var(--c-accent);
+}
+.session-receipt-primary:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.session-receipt-secondary {
+  border: 1px solid var(--c-line);
+  background: none;
+  color: var(--c-muted);
+}
+.session-receipt-secondary:hover {
+  color: var(--c-text);
+}
+
+/* Top-bar escalation badge while gates are pending */
+.gate-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 5px 10px;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--c-warn) 35%, transparent);
+  background: color-mix(in srgb, var(--c-warn) 12%, transparent);
+  color: var(--c-warn);
+  font: 11px var(--mono);
+  font-weight: 600;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+@keyframes session-panel-in {
+  from {
+    opacity: 0;
+    transform: translateX(8px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+/* Below 1180px the panel floats over the canvas as a drawer (design item 12). */
+@media (max-width: 1180px) {
+  .session-panel:not(.is-collapsed) {
+    position: fixed;
+    top: var(--hud-bar-height);
+    right: 0;
+    bottom: 0;
+    width: 312px;
+    box-shadow: -16px 0 40px rgba(0, 0, 0, 0.5);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .session-panel {
+    animation: none;
+  }
+  .session-live-dot,
+  .session-item.status-running .session-glyph,
+  .external-indicator-dot,
+  .minimap-presence {
+    animation: none;
+  }
+  .minimap {
+    transition: none;
+  }
+}
+
+/* Pan tool / held Space: the world layer goes pointer-inert so drags land on
+   the viewport container itself and pan — nodes cannot swallow the drag. */
+.canvas-viewport.pan-mode .canvas-world {
+  pointer-events: none;
+}
+.canvas-viewport.pan-mode:active {
+  cursor: grabbing;
+}
+
+.toolbar-tooltip-anchor {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.toolbar-tooltip-anchor-start .toolbar-tooltip {
+  left: 0;
+  transform: translateX(0) translateY(6px);
+}
+
+.toolbar-tooltip-anchor-end .toolbar-tooltip {
+  left: auto;
+  right: 0;
+  transform: translateX(0) translateY(6px);
+}
+
+.toolbar-tooltip {
+  position: absolute;
+  left: 50%;
+  top: calc(100% + 10px);
+  transform: translateX(-50%) translateY(6px);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 168px;
+  max-width: 240px;
+  padding: 10px 12px;
+  background: color-mix(in srgb, var(--c-panel) 92%, black 8%);
+  border: 1px solid color-mix(in srgb, var(--c-line) 78%, var(--c-accent) 22%);
+  border-radius: 10px;
+  box-shadow: 0 14px 36px var(--c-shadow-heavy), 0 0 0 1px var(--c-accent-8);
+  backdrop-filter: blur(14px);
+  color: var(--c-text);
+  font-size: 12px;
+  line-height: 1.35;
+  white-space: normal;
+  opacity: 0;
+  pointer-events: none;
+  z-index: 10010;
+  transition: opacity 0.14s ease, transform 0.14s ease;
+}
+
+.toolbar-tooltip::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: -5px;
+  width: 10px;
+  height: 10px;
+  background: inherit;
+  border-top: 1px solid color-mix(in srgb, var(--c-line) 78%, var(--c-accent) 22%);
+  border-left: 1px solid color-mix(in srgb, var(--c-line) 78%, var(--c-accent) 22%);
+  transform: translateX(-50%) rotate(45deg);
+}
+
+.toolbar-tooltip-anchor-start .toolbar-tooltip::after {
+  left: 18px;
+  transform: rotate(45deg);
+}
+
+.toolbar-tooltip-anchor-end .toolbar-tooltip::after {
+  left: auto;
+  right: 18px;
+  transform: rotate(45deg);
+}
+
+/* Up variant: bottom-anchored bars (selection bar) open their tooltip above. */
+.toolbar-tooltip-anchor-up .toolbar-tooltip {
+  top: auto;
+  bottom: calc(100% + 10px);
+  transform: translateX(-50%) translateY(-6px);
+}
+.toolbar-tooltip-anchor-up .toolbar-tooltip::after {
+  top: auto;
+  bottom: -5px;
+  border-top: none;
+  border-left: none;
+  border-bottom: 1px solid color-mix(in srgb, var(--c-line) 78%, var(--c-accent) 22%);
+  border-right: 1px solid color-mix(in srgb, var(--c-line) 78%, var(--c-accent) 22%);
+}
+.toolbar-tooltip-anchor-up:hover .toolbar-tooltip,
+.toolbar-tooltip-anchor-up > :focus-visible + .toolbar-tooltip {
+  transform: translateX(-50%) translateY(0);
+}
+
+/* :focus-within opens the tooltip only on tap-to-open (informational)
+   anchors — an action button's tooltip must dismiss after its click. */
+.toolbar-tooltip-anchor:hover .toolbar-tooltip,
+.toolbar-tooltip-anchor-tap:focus-within .toolbar-tooltip,
+.toolbar-tooltip-anchor > :focus-visible + .toolbar-tooltip {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
+
+.toolbar-tooltip-anchor-start:hover .toolbar-tooltip,
+.toolbar-tooltip-anchor-start.toolbar-tooltip-anchor-tap:focus-within .toolbar-tooltip,
+.toolbar-tooltip-anchor-start > :focus-visible + .toolbar-tooltip,
+.toolbar-tooltip-anchor-end:hover .toolbar-tooltip,
+.toolbar-tooltip-anchor-end.toolbar-tooltip-anchor-tap:focus-within .toolbar-tooltip,
+.toolbar-tooltip-anchor-end > :focus-visible + .toolbar-tooltip {
+  transform: translateX(0) translateY(0);
+}
+
+.toolbar-tooltip-anchor {
+  outline: none;
+}
+
+/* Rail variant: fixed beside the hovered button (the rail's scroll clip would
+   swallow an absolute one), arrow on the left, mounted only while hovered. */
+.toolbar-tooltip.rail-tooltip {
+  position: fixed;
+  right: auto;
+  bottom: auto;
+  min-width: 0;
+  opacity: 1;
+  transform: translateY(-50%);
+  animation: rail-tooltip-in 0.14s ease both;
+}
+.toolbar-tooltip.rail-tooltip::after {
+  left: -5px;
+  top: 50%;
+  border-top: none;
+  border-right: none;
+  border-bottom: 1px solid color-mix(in srgb, var(--c-line) 78%, var(--c-accent) 22%);
+  border-left: 1px solid color-mix(in srgb, var(--c-line) 78%, var(--c-accent) 22%);
+  transform: translateY(-50%) rotate(45deg);
+}
+@keyframes rail-tooltip-in {
+  from {
+    opacity: 0;
+    transform: translateY(-50%) translateX(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(-50%) translateX(0);
   }
 }
 
-.toolbar-group {
+.toolbar-tooltip-body {
+  font-size: 11.5px;
+  line-height: 1.45;
+  color: var(--c-text-soft);
+}
+
+.toolbar-tooltip-label {
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  color: var(--c-text);
+}
+
+.toolbar-tooltip-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  color: var(--c-text-soft);
+}
+
+.toolbar-tooltip-shortcut {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 20px;
+  padding: 2px 7px;
+  border-radius: 999px;
+  border: 1px solid var(--c-accent-25);
+  background: var(--c-accent-10);
+  color: var(--c-accent);
+  font: 11px/1 var(--mono);
+  white-space: nowrap;
+}
+
+.connection-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.connection-dot.connected {
+  background: var(--c-ok);
+}
+.connection-dot.connecting {
+  background: var(--c-warn);
+  animation: pulse 1.5s infinite;
+}
+.connection-dot.disconnected {
+  background: var(--c-danger);
+}
+.connection-dot.reconnecting {
+  background: var(--c-warn);
+  animation: pulse 1.5s infinite;
+}
+.connection-dot.resyncing {
+  background: var(--c-accent);
+  animation: pulse 1.5s infinite;
+}
+
+/* Degraded-connection banner under the top bar (phase 7, item 14) */
+.connection-banner {
   display: flex;
-  flex-wrap: wrap;
   align-items: center;
-  gap: 6px;
+  gap: 9px;
+  padding: 7px 14px;
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--c-line);
+  font-size: 11.5px;
+}
+.connection-banner.is-reconnecting {
+  background: color-mix(in srgb, var(--c-warn) 10%, transparent);
+  border-bottom-color: color-mix(in srgb, var(--c-warn) 35%, transparent);
+  color: var(--c-warn);
+}
+.connection-banner.is-resyncing {
+  background: color-mix(in srgb, var(--c-accent) 8%, transparent);
+  border-bottom-color: color-mix(in srgb, var(--c-accent) 30%, transparent);
+  color: var(--c-accent);
+}
+.connection-banner-glyph {
+  font-size: 13px;
+  line-height: 1;
+}
+.connection-banner-text {
+  flex: 1;
   min-width: 0;
-  max-width: 100%;
+}
+.connection-banner-meta {
+  font: 9.5px var(--mono);
+  color: var(--c-muted);
+}
+.connection-banner-progress {
+  width: 90px;
+  height: 4px;
+  border-radius: 2px;
+  background: var(--c-line);
+  overflow: hidden;
+}
+.connection-banner-progress-fill {
+  display: block;
+  width: 40%;
+  height: 100%;
+  background: var(--c-accent);
+  animation: connection-resync 1.1s ease-in-out infinite;
+}
+@keyframes connection-resync {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(260%);
+  }
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
 }
 
+
 /* Positioning parent for a toolbar popover menu. Every menu MUST live inside
    one of these wrapped around its trigger — anchoring to a wider ancestor
    opens the menu far from the button (0.4.2 report Finding T). */
@@ -1049,16 +3112,15 @@ body,
   display: inline-flex;
 }
 
-.canvas-toolbar button svg {
-  display: block;
-}
 
 /* ── Toolbar popover menus (theme picker + narrow-screen More menu) ── */
 .toolbar-menu {
   position: absolute;
   top: calc(100% + 8px);
   right: 0;
-  z-index: 1200;
+  /* Above the annotation capture layer (9996) — rail popovers overlap the
+     canvas region and must stay clickable while an annotation tool is armed. */
+  z-index: 9999;
   display: flex;
   flex-direction: column;
   gap: 2px;
@@ -1141,40 +3203,6 @@ body,
   border-radius: 50%;
 }
 
-.toolbar-more-glyph {
-  display: block;
-  font-size: 16px;
-  font-weight: 700;
-  line-height: 1;
-}
-
-/* Wide screens: the full two-bar toolbar; the More trigger stays hidden. */
-.toolbar-collapsible {
-  display: contents;
-}
-
-.toolbar-more {
-  display: none;
-}
-
-/* Narrow screens / embedded panels: ONE compact bar (brand, status, view
-   controls) — every secondary control folds into the More menu instead of
-   wrapping into a second toolbar row. */
-@media (max-width: 900px) {
-  .toolbar-collapsible {
-    display: none;
-  }
-
-  .toolbar-actions-bar {
-    display: none;
-  }
-
-  .toolbar-more {
-    /* inline-flex (NOT contents): this span is also the positioning anchor
-       for the More menu — display:contents cannot anchor absolute children. */
-    display: inline-flex;
-  }
-}
 
 @media (max-width: 900px) {
   .toolbar-tooltip {
@@ -1193,16 +3221,39 @@ body,
   }
 }
 
-/* Narrow embedding panels: drop low-value text from the HUD so the icon controls
-   fit in fewer rows. Buttons keep their aria-labels + tooltips, so nothing is
-   lost for a11y or discovery. */
-@media (max-width: 720px) {
+/* Below 1180px the top bar drops its low-value meta text (board id, counts).
+   Buttons keep their aria-labels + tooltips, so nothing is lost for a11y or
+   discovery. */
+@media (max-width: 1180px) {
   .hud-collapsible-text {
     display: none;
   }
 }
 
 /* Raw markdown source editor */
+.md-edit-btn {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  padding: 3px 8px;
+  font-size: 10px;
+  background: var(--c-panel);
+  border: 1px solid var(--c-line);
+  border-radius: 4px;
+  color: var(--c-text-soft);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.12s ease;
+}
+.canvas-node:hover .md-edit-btn,
+.md-edit-btn:focus-visible {
+  opacity: 1;
+}
+.md-edit-btn:hover {
+  color: var(--c-text);
+  border-color: var(--c-accent-25);
+}
+
 .md-editor-split {
   display: flex;
   height: 100%;
@@ -1736,6 +3787,10 @@ html.is-node-resizing .ext-app-preview-catcher {
   color: var(--c-accent);
 }
 
+.context-menu-item.is-danger .context-menu-label {
+  color: var(--c-danger, #e5484d);
+}
+
 .context-menu-shortcut {
   color: var(--c-muted);
   font-size: 10px;
@@ -1861,7 +3916,7 @@ html.is-node-resizing .ext-app-preview-catcher {
    constant screen size while zoomed out (see edgeChromeScale in EdgeLayer). */
 .edge-label {
   font-family: var(--font);
-  font-size: calc(11px * var(--edge-chrome-scale, 1));
+  font-size: calc(11px * var(--edge-label-scale, 1));
   pointer-events: none;
   user-select: none;
 }
@@ -1869,7 +3924,7 @@ html.is-node-resizing .ext-app-preview-catcher {
 .edge-label-bg {
   fill: var(--c-panel-glass);
   stroke: var(--c-line);
-  stroke-width: calc(0.5 * var(--edge-chrome-scale, 1));
+  stroke-width: calc(0.5 * var(--edge-label-scale, 1));
 }
 
 /* Trace nodes — compact pills for agent tool/subagent visualization */
@@ -2061,112 +4116,6 @@ html.is-node-resizing .ext-app-preview-catcher {
   color: var(--c-accent);
 }
 
-/* Docked node — compact toolbar-flanking panel */
-.docked-node {
-  min-width: 200px;
-  max-width: 360px;
-  background: var(--c-panel-glass);
-  backdrop-filter: blur(16px);
-  border: 1px solid var(--c-line);
-  border-radius: var(--radius);
-  box-shadow: 0 12px 40px var(--c-shadow-heavy), 0 0 0 1px rgba(255, 255, 255, 0.04);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.docked-node:has(.context-body) {
-  width: 320px;
-  max-width: 320px;
-}
-
-/* Collapsed docked widget = a single menu-height pill that flanks the toolbar.
-   Pinned to the same height as .canvas-toolbar so the top HUD row reads as one
-   continuous bar (status on the left, context on the right). */
-.docked-node--collapsed {
-  height: var(--hud-bar-height);
-  box-sizing: border-box;
-  justify-content: center;
-  width: auto;
-  /* Reset the base .docked-node min-width so the collapsed pill hugs its content
-     (badge + count + controls) instead of stretching to a 200px bar. */
-  min-width: 0;
-}
-.docked-node--collapsed .docked-node-header {
-  height: 100%;
-  padding: 0 10px;
-  border-bottom: none;
-}
-.docked-node-count {
-  min-width: 18px;
-  height: 18px;
-  padding: 0 5px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 9px;
-  background: var(--c-accent);
-  color: var(--c-contrast-fg);
-  font-size: 10px;
-  font-weight: 700;
-  flex-shrink: 0;
-}
-
-.docked-node-header {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 10px;
-  border-bottom: 1px solid var(--c-line);
-  user-select: none;
-  flex-shrink: 0;
-}
-
-.docked-node-header .node-type-badge {
-  font-size: 10px;
-  padding: 1px 6px;
-  border-radius: 4px;
-  background: var(--c-accent-12);
-  color: var(--c-accent);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  flex-shrink: 0;
-}
-
-.docked-node-controls {
-  display: flex;
-  gap: 4px;
-  margin-left: auto;
-  flex-shrink: 0;
-}
-
-.docked-node-controls button {
-  background: none;
-  border: none;
-  color: var(--c-muted);
-  cursor: pointer;
-  padding: 2px 4px;
-  font-size: 14px;
-  line-height: 1;
-  border-radius: 3px;
-}
-
-.docked-node-controls button:hover {
-  background: var(--c-surface-hover);
-  color: var(--c-text);
-}
-
-.docked-node-body {
-  padding: 8px 10px;
-  max-height: 200px;
-  overflow-y: auto;
-}
-
-.docked-node-body.context-body {
-  max-height: 420px;
-  padding: 10px 14px;
-}
-
 /* MCP app iframe */
 .mcp-app-frame {
   width: 100%;
@@ -2222,10 +4171,36 @@ html.is-node-resizing .ext-app-preview-catcher {
   }
 }
 
-/* ── Multi-node selection ─────────────────────────────────── */
+/* ── Multi-node selection (item 13: outline, corner handles, soft glow) ── */
 .canvas-node.selected {
   border-color: var(--c-accent);
-  box-shadow: 0 0 0 2px var(--c-accent), 0 6px 32px var(--c-accent-25);
+  box-shadow: 0 0 0 1px var(--c-accent), 0 0 0 4px color-mix(in srgb, var(--c-accent) 10%, transparent);
+}
+.node-selection-handle {
+  position: absolute;
+  width: 7px;
+  height: 7px;
+  background: var(--c-bg);
+  border: 1.5px solid var(--c-accent);
+  border-radius: 2px;
+  pointer-events: none;
+  z-index: 3;
+}
+.node-selection-handle.is-tl {
+  left: -4px;
+  top: -4px;
+}
+.node-selection-handle.is-tr {
+  right: -4px;
+  top: -4px;
+}
+.node-selection-handle.is-bl {
+  left: -4px;
+  bottom: -4px;
+}
+.node-selection-handle.is-br {
+  right: -4px;
+  bottom: -4px;
 }
 
 /* Lasso rectangle overlay */
@@ -2343,83 +4318,147 @@ html.is-node-resizing .ext-app-preview-catcher {
   z-index: 9999;
 }
 
-/* Selection action bar — fixed bottom-center */
+/* In-canvas text prompt (window.prompt replacement — embedded panes no-op it). */
+.text-prompt-backdrop {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 18vh;
+  background: color-mix(in srgb, var(--c-bg) 42%, transparent);
+  z-index: 10015;
+}
+.text-prompt {
+  width: min(440px, calc(100% - 48px));
+  padding: 14px;
+  background: var(--c-panel);
+  border: 1px solid var(--c-line);
+  border-radius: 12px;
+  box-shadow: 0 18px 60px var(--c-shadow-heavy);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.text-prompt-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--c-text);
+}
+.text-prompt-input {
+  width: 100%;
+  padding: 8px 10px;
+  border: 1px solid var(--c-line);
+  border-radius: 8px;
+  background: var(--c-bg);
+  color: var(--c-text);
+  font: 13px/1.4 var(--mono);
+}
+.text-prompt-input:focus {
+  outline: none;
+  border-color: var(--c-accent);
+}
+.text-prompt-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+.text-prompt-cancel,
+.text-prompt-confirm {
+  padding: 5px 12px;
+  border-radius: 7px;
+  border: 1px solid var(--c-line);
+  background: none;
+  color: var(--c-text-soft);
+  cursor: pointer;
+  font-size: 12px;
+}
+.text-prompt-confirm {
+  background: var(--c-accent);
+  border-color: var(--c-accent);
+  color: var(--c-bg);
+  font-weight: 600;
+}
+
+/* Selection action bar — floating bottom-center of the canvas region
+   (rail-chrome-v2 phase 7, item 13). */
+/* In a session the command bar owns the bottom-center slot — lift the
+   selection bar clear of it (composer + chips row); on the quiet board the
+   pin bar does, so lift past that instead. */
+[data-session-active='true'] .selection-bar {
+  bottom: 124px;
+}
+.selection-bar.is-above-pin-bar {
+  bottom: 70px;
+}
 .selection-bar {
-  position: fixed;
-  bottom: 60px;
+  position: absolute;
+  bottom: 18px;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 8px 14px;
-  background: var(--c-panel-glass);
-  backdrop-filter: blur(12px);
-  border: 1px solid var(--c-accent);
-  border-radius: var(--radius);
-  box-shadow: 0 8px 32px var(--c-shadow), 0 0 0 1px var(--c-accent-15);
-  z-index: 10001;
+  gap: 2px;
+  padding: 6px 8px;
+  background: color-mix(in srgb, var(--c-panel) 97%, transparent);
+  backdrop-filter: blur(12px);
+  border: 1px solid var(--c-line);
+  border-radius: 10px;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
+  z-index: 66;
   white-space: nowrap;
 }
-
 .selection-bar-count {
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--c-accent);
-}
-
-.selection-bar-btn {
-  padding: 5px 12px;
-  font-size: 12px;
+  padding: 0 8px;
+  font-size: 11px;
   font-weight: 600;
-  background: var(--c-accent-10);
-  border: 1px solid var(--c-accent-30);
-  border-radius: var(--radius-sm);
   color: var(--c-accent);
-  cursor: pointer;
-  font-family: var(--font);
-}
-
-.selection-bar-btn:hover {
-  background: var(--c-accent-25);
-  border-color: var(--c-accent);
-}
-
-.selection-bar-ask {
-  background: var(--c-accent);
-  color: var(--c-contrast-fg);
-  border-color: var(--c-accent);
 }
-
-.selection-bar-ask:hover {
-  background: var(--c-accent-hover);
-  border-color: var(--c-accent-hover);
+.selection-bar-sep {
+  width: 1px;
+  height: 18px;
+  margin: 0 4px;
+  background: var(--c-line);
 }
-
-.selection-bar-clear {
-  background: none;
+.selection-bar-icon,
+.selection-bar-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  height: 28px;
   border: none;
+  border-radius: 6px;
+  background: none;
   color: var(--c-muted);
-  font-size: 16px;
-  padding: 2px 6px;
-  line-height: 1;
+  cursor: pointer;
+  font: inherit;
+  font-size: 11px;
+  font-weight: 600;
 }
-
-.selection-bar-clear:hover {
+.selection-bar-icon {
+  width: 28px;
+  font-size: 14px;
+}
+.selection-bar-action {
+  padding: 0 9px;
+}
+.selection-bar-icon:hover,
+.selection-bar-action:hover {
+  background: color-mix(in srgb, var(--c-text) 6%, transparent);
   color: var(--c-text);
-  background: var(--c-surface-hover);
 }
-
-/* "Pin as context" button in selection bar */
-.selection-bar-pin-ctx {
-  background: var(--c-warn-12);
-  border-color: var(--c-warn-30);
+.selection-bar-icon:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+.selection-bar-action.is-pin:hover {
+  background: color-mix(in srgb, var(--c-warn) 10%, transparent);
   color: var(--c-warn);
 }
-
-.selection-bar-pin-ctx:hover {
-  background: var(--c-warn-22);
-  border-color: var(--c-warn);
+.selection-bar-icon.is-danger:hover {
+  background: color-mix(in srgb, var(--c-danger) 12%, transparent);
+  color: var(--c-danger);
 }
 
 /* ── Context-pinned nodes — amber glow ───────────────────────── */
@@ -2589,11 +4628,13 @@ html.is-node-resizing .ext-app-preview-catcher {
   box-shadow: 0 0 24px rgba(75, 188, 255, 0.12);
 }
 
+/* Anchored to the canvas region (not the window): since the rail-chrome
+   restructure the session panel owns the window's right edge. */
 .attention-toast {
-  position: fixed;
-  top: 76px;
+  position: absolute;
+  top: 18px;
   right: 18px;
-  max-width: min(260px, calc(100vw - 24px));
+  max-width: min(260px, calc(100% - 24px));
   display: inline-flex;
   align-items: center;
   gap: 8px;
@@ -2606,7 +4647,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   color: var(--c-text);
   font: inherit;
   cursor: pointer;
-  z-index: 10003;
+  z-index: 9990; /* above the world, below the rail popovers and every modal overlay */
   animation: attention-toast-in 180ms ease-out;
 }
 
@@ -2651,96 +4692,11 @@ html.is-node-resizing .ext-app-preview-catcher {
   max-width: 200px;
 }
 
-/* Context dock — expanded panel anchored top-right edge.
-   Mutually exclusive with the Updates panel (see DockedNode.tsx and
-   AttentionHistory.tsx) — opening one collapses the other, so they can both
-   share the same right: 18px anchor without overlapping. */
-.context-dock-panel {
-  position: fixed;
-  top: 92px;
-  right: 18px;
-  width: min(360px, calc(100vw - 24px));
-  max-height: calc(100vh - 110px);
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  padding: 14px;
-  background: color-mix(in srgb, var(--c-panel-glass) 96%, transparent);
-  backdrop-filter: blur(16px);
-  border: 1px solid color-mix(in srgb, var(--c-line) 82%, var(--c-accent) 18%);
-  border-radius: 18px;
-  box-shadow: 0 14px 36px var(--c-shadow), 0 0 0 1px color-mix(in srgb, var(--c-accent) 8%, transparent);
-  z-index: 10001;
-  overflow: hidden;
-}
-
-.context-dock-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 2px 2px 4px;
-  flex-shrink: 0;
-}
-
-.context-dock-header-text {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0;
-}
-
-.context-dock-title {
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--c-text);
-}
-
-.context-dock-subtitle {
-  font-size: 11px;
-  color: var(--c-dim);
-}
-
-.context-dock-controls {
-  display: flex;
-  gap: 4px;
-  flex-shrink: 0;
-}
-
-.context-dock-icon-button {
-  width: 22px;
-  height: 22px;
-  border: 0;
-  border-radius: 6px;
-  background: transparent;
-  color: var(--c-dim);
-  font-size: 16px;
-  line-height: 1;
-  cursor: pointer;
-  display: grid;
-  place-items: center;
-  padding: 0;
-}
-
-.context-dock-icon-button:hover {
-  color: var(--c-text);
-  background: var(--c-surface-hover);
-}
-
-.context-dock-body {
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow-y: auto;
-  padding-right: 2px;
-}
-
 .attention-history {
-  position: fixed;
-  top: 146px;
+  position: absolute;
+  top: 60px;
   right: 18px;
-  width: min(320px, calc(100vw - 24px));
+  width: min(320px, calc(100% - 24px));
   display: flex;
   flex-direction: column;
   gap: 10px;
@@ -2750,12 +4706,12 @@ html.is-node-resizing .ext-app-preview-catcher {
   border: 1px solid color-mix(in srgb, var(--c-line) 82%, var(--c-warn) 18%);
   border-radius: 18px;
   box-shadow: 0 14px 36px var(--c-shadow), 0 0 0 1px color-mix(in srgb, var(--c-warn) 8%, transparent);
-  z-index: 10002;
+  z-index: 9990;
 }
 
 .attention-history-tab {
-  position: fixed;
-  top: 146px;
+  position: absolute;
+  top: 60px;
   right: 0;
   display: flex;
   align-items: center;
@@ -2967,82 +4923,265 @@ html.is-node-resizing .ext-app-preview-catcher {
   color: color-mix(in srgb, var(--c-danger) 78%, var(--c-text) 22%);
 }
 
-/* ── Group node — spatial container/frame ─────────────────────── */
+/* ── Group node — spatial container/frame (groups v2, item 20) ─────
+   Dashed frame with the name pill + action cluster ON the top edge; the
+   children live in the world layer. The frame brightens while a dragged node
+   would join on release; a collapsed group is a compact chip. */
 .canvas-node.group-node {
-  background: transparent;
-  border: 2px dashed var(--group-color, var(--c-accent));
-  border-radius: 12px;
+  background: color-mix(in srgb, var(--group-color, var(--c-accent)) 3%, transparent);
+  border: 1.5px dashed color-mix(in srgb, var(--group-color, var(--c-accent)) 35%, transparent);
+  border-radius: 14px;
   box-shadow: none;
   overflow: visible;
+  /* The edge row hangs outside the frame: no paint containment here. */
+  contain: layout style;
   min-width: 200px;
   min-height: 120px;
+  transition:
+    border-color 150ms ease,
+    background 150ms ease;
 }
-
-.canvas-node.group-node .node-titlebar {
-  background: color-mix(in srgb, var(--group-color, var(--c-accent)) 12%, transparent);
-  border-bottom: 1px solid color-mix(in srgb, var(--group-color, var(--c-accent)) 25%, transparent);
-  border-radius: 10px 10px 0 0;
+.canvas-node.group-node:hover {
+  border-color: color-mix(in srgb, var(--group-color, var(--c-accent)) 55%, transparent);
 }
-
-.canvas-node.group-node .node-type-badge {
-  background: color-mix(in srgb, var(--group-color, var(--c-accent)) 20%, transparent);
-  color: var(--group-color, var(--c-accent));
+.canvas-node.group-node.active,
+.canvas-node.group-node.selected {
+  border-style: dashed;
+  border-color: color-mix(in srgb, var(--group-color, var(--c-accent)) 70%, transparent);
+}
+.canvas-node.group-node.is-drop-target {
+  border-color: color-mix(in srgb, var(--group-color, var(--c-accent)) 80%, transparent);
+  background: color-mix(in srgb, var(--group-color, var(--c-accent)) 9%, transparent);
+}
+.canvas-node.group-node.is-drop-source {
+  border-color: color-mix(in srgb, var(--c-warn) 60%, transparent);
 }
-
 .canvas-node.group-node .node-body {
-  background: color-mix(in srgb, var(--group-color, var(--c-accent)) 4%, transparent);
-  padding: 12px;
+  background: none;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
-
-.canvas-node.group-node:hover {
-  border-style: solid;
-  box-shadow: 0 0 0 1px color-mix(in srgb, var(--group-color, var(--c-accent)) 30%, transparent);
+.group-empty-hint {
+  font-size: 11px;
+  color: var(--c-dim);
+  font-style: italic;
+  text-align: center;
+  padding: 12px 18px;
+  opacity: 0.8;
+  pointer-events: none;
 }
 
-.canvas-node.group-node.active {
-  border-style: solid;
-  border-color: var(--group-color, var(--c-accent));
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--group-color, var(--c-accent)) 40%, transparent);
+/* Frame edge row: the drag handle for the whole group */
+.canvas-node.group-node .node-titlebar.group-edge-row {
+  position: absolute;
+  top: -12px;
+  left: 12px;
+  right: 12px;
+  height: 24px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: none;
+  border: none;
+  border-radius: 0;
+  cursor: grab;
+  overflow: visible;
+}
+.group-name-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 10px;
+  border-radius: 999px;
+  background: var(--c-panel-soft);
+  border: 1px solid color-mix(in srgb, var(--group-color, var(--c-accent)) 35%, transparent);
+  max-width: 70%;
+}
+.group-name {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--group-color, var(--c-accent));
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.group-count {
+  font: 9px var(--mono);
+  color: var(--c-dim);
+}
+.group-title-input {
+  width: 140px;
+  font-size: 11px;
+}
+.group-edge-spacer {
+  flex: 1;
+}
+.group-actions {
+  position: relative;
+  display: inline-flex;
+  gap: 1px;
+  padding: 2px 4px;
+  border-radius: 999px;
+  background: var(--c-panel-soft);
+  border: 1px solid var(--c-line);
+}
+.group-action {
+  display: inline-flex;
+  width: 20px;
+  height: 20px;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  border-radius: 99px;
+  color: var(--c-muted);
+  cursor: pointer;
+  font-size: 11px;
+  line-height: 1;
+  padding: 0;
+}
+.group-action:hover:not(:disabled) {
+  color: var(--group-color, var(--c-accent));
+}
+.group-action:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+/* A group stacks BELOW its children by design (bringToFront re-stacks members
+   above the frame), so the frame's own popover would paint under the member
+   cards. While the ⋯ menu is open, lift the whole frame — !important because
+   the node's z-index is an inline style from the store. */
+.canvas-node.group-menu-open {
+  z-index: 9500 !important;
 }
 
-.group-node-body {
+.group-menu {
+  position: absolute;
+  top: 26px;
+  right: 0;
+  min-width: 160px;
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  height: 100%;
+  padding: 4px;
+  background: var(--c-panel);
+  border: 1px solid var(--c-line);
+  border-radius: 8px;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
+  z-index: 20;
+}
+.group-menu button {
+  padding: 6px 10px;
+  border: none;
+  border-radius: 6px;
+  background: none;
+  color: var(--c-text-soft);
+  font: inherit;
+  font-size: 11px;
+  text-align: left;
+  cursor: pointer;
+}
+.group-menu button:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--c-text) 6%, transparent);
+  color: var(--c-text);
+}
+.group-menu button:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+.group-menu button.is-danger:hover {
+  color: var(--c-danger);
+}
+
+/* Collapsed group chip */
+.canvas-node.group-node.group-chip {
+  min-width: 0;
+  min-height: 0;
+  padding: 0;
+  background: color-mix(in srgb, var(--group-color, var(--c-accent)) 4%, transparent);
+  border: 1.5px dashed color-mix(in srgb, var(--group-color, var(--c-accent)) 35%, transparent);
+  border-radius: 12px;
+  cursor: pointer;
+}
+.canvas-node.group-node.group-chip:hover {
+  border-color: color-mix(in srgb, var(--group-color, var(--c-accent)) 60%, transparent);
+  background: color-mix(in srgb, var(--group-color, var(--c-accent)) 8%, transparent);
 }
-
-.group-summary {
+.canvas-node.group-node .node-titlebar.group-chip-inner {
   display: flex;
   align-items: center;
   gap: 10px;
-  flex-wrap: wrap;
+  padding: 10px 14px;
+  background: none;
+  border: none;
+  cursor: grab;
 }
-
-.group-child-count {
+.group-chip-expand {
+  background: none;
+  border: none;
+  padding: 0;
+  color: var(--group-color, var(--c-accent));
   font-size: 13px;
-  font-weight: 600;
+  line-height: 1;
+  cursor: pointer;
+}
+.group-chip-name {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
   color: var(--group-color, var(--c-accent));
+  white-space: nowrap;
 }
-
-.group-type-summary {
-  font-size: 12px;
-  color: var(--c-text-muted);
+.group-chip-meta {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  margin-top: 4px;
+}
+.group-kind-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 2px;
+  opacity: 0.8;
+}
+.group-chip-count {
+  font: 9px var(--mono);
+  color: var(--c-dim);
 }
 
-.group-empty-hint {
-  font-size: 12px;
-  color: var(--c-text-muted);
-  font-style: italic;
-  padding: 12px 0;
-  text-align: center;
-  opacity: 0.7;
+/* Release pill under the dragged node */
+.drop-pill {
+  position: absolute;
+  z-index: 10000;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 10px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--c-panel) 96%, transparent);
+  border: 1px solid color-mix(in srgb, var(--c-accent) 40%, transparent);
+  pointer-events: none;
+  white-space: nowrap;
+}
+.drop-pill-text {
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--c-accent);
+}
+.drop-pill-hint {
+  font: 9px var(--mono);
+  color: var(--c-dim);
 }
 
 /* ── Context pin bar — persistent floating indicator ─────────── */
 .context-pin-bar {
-  position: fixed;
-  bottom: 20px;
+  position: absolute;
+  bottom: 18px;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
@@ -3054,7 +5193,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   border: 1px solid var(--c-warn);
   border-radius: var(--radius);
   box-shadow: 0 8px 32px var(--c-shadow), 0 0 0 1px var(--c-warn-15);
-  z-index: 10000;
+  z-index: 64;
   white-space: nowrap;
 }
 
@@ -3107,6 +5246,114 @@ html.is-node-resizing .ext-app-preview-catcher {
 }
 
 /* ── Expanded overlay actions ────────────────────────────────── */
+/* Expanded node view (rail-chrome-v2 phase 7, item 16): scrim + inset panel
+   with 36/48px margins, header with kind pill + pin state, footer strip. */
+.expanded-overlay-backdrop {
+  position: absolute;
+  inset: 0;
+  z-index: 10001;
+  background: rgba(4, 10, 18, 0.6);
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+  padding: 36px 48px;
+}
+.expanded-overlay-panel {
+  flex: 1;
+  max-width: 1400px;
+  display: flex;
+  flex-direction: column;
+  background: var(--c-panel);
+  border: 1px solid var(--c-line);
+  border-radius: 14px;
+  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
+  overflow: hidden;
+}
+.expanded-overlay-panel.is-pinned {
+  border-color: color-mix(in srgb, var(--c-warn) 45%, var(--c-line));
+}
+.expanded-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  height: 46px;
+  padding: 0 16px;
+  border-bottom: 1px solid var(--c-line);
+  background: color-mix(in srgb, var(--c-bg) 60%, transparent);
+  flex-shrink: 0;
+}
+.expanded-kind-icon {
+  display: inline-flex;
+  color: var(--c-accent);
+}
+.expanded-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--c-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+.expanded-kind-pill {
+  font-size: 9px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 999px;
+  border: 1px solid var(--c-line);
+  color: var(--c-muted);
+  white-space: nowrap;
+}
+.expanded-pin {
+  background: none;
+  border: none;
+  padding: 0 2px;
+  font-size: 12px;
+  color: var(--c-dim);
+  cursor: pointer;
+}
+.expanded-pin.is-on {
+  color: var(--c-warn);
+}
+.expanded-spacer {
+  flex: 1;
+}
+.expanded-close {
+  background: none;
+  border: none;
+  color: var(--c-muted);
+  font-size: 16px;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0 4px;
+}
+.expanded-close:hover {
+  color: var(--c-text);
+}
+.expanded-body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 16px;
+}
+.expanded-body.is-embedded {
+  display: flex;
+  flex-direction: column;
+}
+.expanded-footer {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 16px;
+  border-top: 1px solid var(--c-line);
+  background: color-mix(in srgb, var(--c-bg) 50%, transparent);
+  font: 9.5px var(--mono);
+  color: var(--c-dim);
+  flex-shrink: 0;
+}
+.expanded-footer-hint.is-saving {
+  color: var(--c-warn);
+}
 .expanded-actions {
   display: flex;
   align-items: center;
@@ -3369,51 +5616,60 @@ html.is-node-resizing .ext-app-preview-catcher {
 
 /* ── Snapshot Panel ───────────────────────────────────────── */
 
+/* History drawer (rail-chrome-v2 phase 7, item 8): snapshots + sessions as
+   one reverse-chronological list in a right drawer of the canvas region. */
 .snapshot-panel {
-  position: fixed;
-  width: 320px;
-  max-height: 420px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: min(300px, 100%);
   display: flex;
   flex-direction: column;
-  background: var(--c-panel-glass);
-  backdrop-filter: blur(16px);
-  border: 1px solid var(--c-line);
-  border-radius: var(--radius);
-  box-shadow: 0 12px 40px var(--c-shadow-heavy), 0 0 0 1px rgba(255,255,255,0.04);
-  z-index: 10001;
+  background: var(--c-panel-soft);
+  border-left: 1px solid var(--c-line);
+  box-shadow: -16px 0 40px rgba(0, 0, 0, 0.45);
+  /* Above the receipt it is opened from, below the rail popovers. */
+  z-index: 9999;
   overflow: hidden;
-  animation: snapshot-panel-in 0.15s ease-out;
+  animation: snapshot-panel-in 0.18s ease-out;
 }
 
 @keyframes snapshot-panel-in {
-  from { opacity: 0; transform: translateY(-6px); }
-  to   { opacity: 1; transform: translateY(0); }
+  from { opacity: 0; transform: translateX(12px); }
+  to   { opacity: 1; transform: translateX(0); }
 }
 
 .snapshot-panel-header {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  padding: 10px 14px;
+  gap: 8px;
+  height: var(--hud-bar-height);
+  padding: 0 14px;
   border-bottom: 1px solid var(--c-line);
+  flex-shrink: 0;
 }
-
 .snapshot-panel-title {
   font-size: 11px;
-  font-weight: 600;
+  font-weight: 700;
+  letter-spacing: 0.08em;
   text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: var(--c-muted);
+  color: var(--c-text);
+}
+.snapshot-panel-sub {
+  font-size: 10px;
+  color: var(--c-dim);
+}
+.snapshot-panel-spacer {
+  flex: 1;
 }
-
 .snapshot-panel-close {
   background: none;
   border: none;
-  color: var(--c-dim);
-  font-size: 16px;
+  color: var(--c-muted);
+  font-size: 14px;
   cursor: pointer;
   padding: 0 2px;
-  line-height: 1;
 }
 .snapshot-panel-close:hover {
   color: var(--c-text);
@@ -3422,152 +5678,172 @@ html.is-node-resizing .ext-app-preview-catcher {
 .snapshot-save-form {
   display: flex;
   gap: 6px;
-  padding: 10px 14px;
-  border-bottom: 1px solid var(--c-line);
+  padding: 10px 12px 6px;
 }
-
 .snapshot-name-input {
   flex: 1;
-  background: var(--c-input-bg);
+  min-width: 0;
+  padding: 6px 10px;
   border: 1px solid var(--c-line);
-  border-radius: var(--radius-sm);
+  border-radius: 7px;
+  background: var(--c-panel);
   color: var(--c-text);
-  font-family: var(--font);
-  font-size: 12px;
-  padding: 6px 10px;
-  outline: none;
-  transition: border-color 0.15s;
+  font: 11.5px var(--font);
 }
 .snapshot-name-input:focus {
-  border-color: var(--c-accent);
+  outline: 2px solid var(--c-accent);
+  outline-offset: 1px;
 }
 .snapshot-name-input::placeholder {
   color: var(--c-dim);
 }
-
 .snapshot-save-btn {
-  background: var(--c-accent);
+  padding: 6px 12px;
   border: none;
-  color: var(--c-contrast-fg);
-  font-family: var(--font);
+  border-radius: 7px;
+  background: var(--c-accent);
+  color: var(--c-bg);
   font-size: 11px;
   font-weight: 600;
-  padding: 6px 14px;
-  border-radius: var(--radius-sm);
   cursor: pointer;
-  white-space: nowrap;
-  transition: background 0.15s;
-}
-.snapshot-save-btn:hover:not(:disabled) {
-  background: var(--c-accent-hover);
 }
 .snapshot-save-btn:disabled {
-  opacity: 0.4;
+  opacity: 0.45;
   cursor: default;
 }
-
 .snapshot-restore-note {
-  padding: 0 12px 10px;
-  font-size: 10px;
+  padding: 0 12px 8px;
+  font-size: 9.5px;
   color: var(--c-dim);
 }
 
 .snapshot-list {
-  overflow-y: auto;
   flex: 1;
-  padding: 4px 0;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 4px 12px 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
-
 .snapshot-empty {
-  padding: 20px 14px;
+  padding: 14px 2px;
+  font-size: 11px;
   color: var(--c-dim);
-  font-size: 12px;
-  text-align: center;
-  line-height: 1.5;
+}
+.snapshot-section-header {
+  margin: 10px 2px 4px;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--c-muted);
 }
 
 .snapshot-item {
+  padding: 10px 12px;
+  border: 1px solid var(--c-line);
+  border-radius: 10px;
+}
+.snapshot-item.is-session {
+  border-color: color-mix(in srgb, var(--c-purple) 30%, transparent);
+  background: color-mix(in srgb, var(--c-purple) 5%, transparent);
+}
+.snapshot-item-head {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 8px 14px;
-  transition: background 0.1s;
+  gap: 7px;
 }
-.snapshot-item:hover {
-  background: var(--c-surface-hover);
+.snapshot-session-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--c-purple);
+  flex-shrink: 0;
 }
-
-.snapshot-item-info {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0;
-  flex: 1;
+.snapshot-item-glyph {
+  color: var(--c-muted);
+  font-size: 12px;
+  line-height: 1;
 }
-
 .snapshot-item-name {
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--c-text);
+  flex: 1;
+  min-width: 0;
+  font-size: 11.5px;
+  font-weight: 600;
+  color: var(--c-text-soft);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-
-.snapshot-item-meta {
-  font-size: 10px;
+.snapshot-item.is-session .snapshot-item-name {
+  color: var(--c-text);
+}
+.snapshot-item-time {
+  font: 9px var(--mono);
   color: var(--c-dim);
 }
-
+.snapshot-item-meta {
+  margin-top: 3px;
+  font-size: 10.5px;
+  color: var(--c-muted);
+}
+.snapshot-item-diff {
+  color: var(--c-accent);
+}
 .snapshot-item-actions {
   display: flex;
-  gap: 4px;
-  flex-shrink: 0;
-  opacity: 0;
-  transition: opacity 0.1s;
-}
-.snapshot-item:hover .snapshot-item-actions {
-  opacity: 1;
+  gap: 6px;
+  margin-top: 8px;
 }
-
 .snapshot-action-btn {
-  background: none;
+  flex: 1;
+  padding: 5px 0;
   border: 1px solid var(--c-line);
+  border-radius: 6px;
+  background: none;
   color: var(--c-muted);
-  font-family: var(--font);
-  font-size: 10px;
-  padding: 3px 8px;
-  border-radius: var(--radius-sm);
+  font-size: 10.5px;
+  font-weight: 600;
   cursor: pointer;
-  transition: all 0.1s;
 }
-
+.snapshot-action-btn:hover:not(:disabled) {
+  color: var(--c-text);
+}
+.snapshot-action-btn:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.snapshot-action-diff,
 .snapshot-action-restore {
+  background: color-mix(in srgb, var(--c-accent) 12%, transparent);
+  border-color: color-mix(in srgb, var(--c-accent) 30%, transparent);
   color: var(--c-accent);
-  border-color: var(--c-accent-25);
 }
-.snapshot-action-restore:hover {
-  background: var(--c-accent-12);
-  border-color: var(--c-accent);
+.snapshot-action-diff:hover:not(:disabled),
+.snapshot-action-restore:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--c-accent) 20%, transparent);
+  color: var(--c-accent);
 }
-
 .snapshot-action-delete {
-  color: var(--c-dim);
-  border-color: transparent;
-  padding: 3px 5px;
+  flex: 0 0 auto;
+  padding: 5px 9px;
 }
-.snapshot-action-delete:hover {
+.snapshot-action-delete:hover:not(:disabled) {
+  border-color: color-mix(in srgb, var(--c-danger) 40%, transparent);
   color: var(--c-danger);
-  border-color: var(--c-danger-12);
 }
-
 .snapshot-action-confirm {
+  background: color-mix(in srgb, var(--c-danger) 12%, transparent);
+  border-color: color-mix(in srgb, var(--c-danger) 40%, transparent);
   color: var(--c-danger);
-  border-color: var(--c-danger);
 }
-.snapshot-action-confirm:hover {
-  background: var(--c-danger-12);
+.snapshot-panel-foot {
+  padding: 9px 14px;
+  border-top: 1px solid var(--c-line);
+  font-size: 9.5px;
+  color: var(--c-dim);
+  flex-shrink: 0;
 }
 
 /* ── Command Palette (Cmd/Ctrl+K) ──────────────────────────── */
@@ -3576,22 +5852,23 @@ html.is-node-resizing .ext-app-preview-catcher {
   position: fixed;
   inset: 0;
   z-index: 10002;
-  background: rgba(0, 0, 0, 0.25);
+  background: rgba(4, 10, 18, 0.55);
   display: flex;
   justify-content: center;
-  padding-top: 18vh;
+  padding-top: 56px;
 }
 
+/* ⌘K palette (rail-chrome-v2 phase 7, item 7): 560px, top-anchored at 56px,
+   grouped results, footer key hints. */
 .command-palette {
-  width: 500px;
-  max-height: 440px;
+  width: min(560px, calc(100% - 48px));
+  max-height: min(520px, calc(100vh - 80px));
   display: flex;
   flex-direction: column;
-  background: var(--c-panel-glass);
-  backdrop-filter: blur(16px);
+  background: var(--c-panel);
   border: 1px solid var(--c-line);
-  border-radius: var(--radius);
-  box-shadow: 0 12px 40px var(--c-shadow-heavy), 0 0 0 1px rgba(255,255,255,0.04);
+  border-radius: 12px;
+  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
   overflow: hidden;
   animation: command-palette-in 0.12s ease-out;
   align-self: flex-start;
@@ -3602,107 +5879,99 @@ html.is-node-resizing .ext-app-preview-catcher {
   to   { opacity: 1; transform: translateY(0) scale(1); }
 }
 
+.command-palette-search {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--c-line);
+  color: var(--c-accent);
+}
 .command-palette-input {
-  background: var(--c-input-bg);
+  flex: 1;
+  min-width: 0;
+  padding: 0;
   border: none;
-  border-bottom: 1px solid var(--c-line);
-  color: var(--c-text);
-  font-family: var(--font);
-  font-size: 14px;
-  padding: 14px 16px;
   outline: none;
-  width: 100%;
-  box-sizing: border-box;
-}
-.command-palette-input:focus {
-  border-bottom-color: var(--c-accent);
+  background: none;
+  color: var(--c-text);
+  font: 13px var(--font);
 }
 .command-palette-input::placeholder {
   color: var(--c-dim);
 }
-
-.command-palette-hint {
-  display: flex;
-  gap: 12px;
-  padding: 6px 16px;
-  font-size: 10px;
-  color: var(--c-dim);
-  border-bottom: 1px solid var(--c-line);
-}
-.command-palette-hint kbd {
-  display: inline-block;
-  background: var(--c-surface-hover);
+.command-palette-esc,
+.command-palette-kbd {
+  padding: 1px 6px;
   border: 1px solid var(--c-line);
-  border-radius: 3px;
-  padding: 0 4px;
-  font-family: var(--font);
-  font-size: 9px;
-  line-height: 1.6;
-  margin-right: 2px;
+  border-radius: 4px;
+  font: 9.5px var(--mono);
+  color: var(--c-muted);
+}
+.command-palette-esc {
+  padding: 2px 7px;
+  border-radius: 5px;
+  color: var(--c-dim);
 }
 
 .command-palette-results {
-  overflow-y: auto;
   flex: 1;
-  padding: 4px 0;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 6px 6px 4px;
 }
-
 .command-palette-empty {
-  padding: 24px 16px;
-  text-align: center;
-  color: var(--c-dim);
+  padding: 14px 10px;
   font-size: 12px;
+  color: var(--c-dim);
+}
+.command-palette-group {
+  padding: 6px 10px 4px;
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--c-dim);
 }
-
 .command-palette-item {
   display: flex;
   align-items: center;
   gap: 10px;
   width: 100%;
-  padding: 8px 16px;
-  background: none;
+  padding: 7px 10px;
   border: none;
-  color: var(--c-text);
-  font-family: var(--font);
-  font-size: 12px;
+  border-radius: 8px;
+  background: none;
+  color: var(--c-text-soft);
   cursor: pointer;
   text-align: left;
-  transition: background 0.06s;
-}
-
-.command-palette-item.selected {
-  background: var(--c-accent-10);
+  font: inherit;
 }
-
 .command-palette-item:hover {
-  background: var(--c-surface-hover);
+  background: color-mix(in srgb, var(--c-text) 5%, transparent);
 }
-
+.command-palette-item.selected,
 .command-palette-item.selected:hover {
-  background: var(--c-accent-10);
+  background: color-mix(in srgb, var(--c-accent) 12%, transparent);
+  color: var(--c-text);
 }
-
-.command-palette-badge {
-  font-size: 9px;
-  padding: 1px 6px;
-  border-radius: 4px;
-  background: var(--c-accent-12);
-  color: var(--c-accent);
+.command-palette-icon {
+  display: inline-flex;
   flex-shrink: 0;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  min-width: 32px;
-  text-align: center;
+  width: 14px;
+  height: 14px;
+  color: var(--c-accent);
 }
-
-.command-palette-badge--action {
-  background: rgba(176, 122, 255, 0.12);
+.command-palette-icon.tone-purple {
   color: var(--c-purple);
 }
-
+.command-palette-icon.tone-muted {
+  color: var(--c-muted);
+}
 .command-palette-label {
   flex: 1;
+  min-width: 0;
+  font-size: 12px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -3712,15 +5981,21 @@ html.is-node-resizing .ext-app-preview-catcher {
   color: var(--c-accent);
   font-weight: 600;
 }
-
 .command-palette-desc {
-  font-size: 11px;
   color: var(--c-dim);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 180px;
-  flex-shrink: 0;
+}
+
+.command-palette-hint {
+  display: flex;
+  gap: 14px;
+  padding: 8px 14px;
+  border-top: 1px solid var(--c-line);
+  background: color-mix(in srgb, var(--c-bg) 50%, transparent);
+  font: 9.5px var(--mono);
+  color: var(--c-dim);
+}
+.command-palette-hint-spacer {
+  flex: 1;
 }
 
 /* ── Shortcut Overlay (Press ?) ────────────────────────────── */
@@ -3829,88 +6104,117 @@ html.is-node-resizing .ext-app-preview-catcher {
   line-height: 1.4;
 }
 
-/* ── Welcome Card (empty canvas) ────────────────────────── */
-.welcome-card {
+/* ── Empty board (rail-chrome-v2 phase 7, design item 11) ───── */
+.empty-state {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 5;
+  width: 560px;
+  max-width: calc(100% - 48px);
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 12px;
-  padding: 36px 44px;
-  background: var(--c-panel-glass);
-  backdrop-filter: blur(16px);
-  border: 1px solid var(--c-line);
-  border-radius: 16px;
-  box-shadow: 0 8px 32px var(--c-shadow), 0 0 0 1px var(--c-line-30);
-  animation: welcome-fade-in 0.5s ease-out;
-  pointer-events: auto;
-  max-width: 380px;
+  gap: 16px;
   text-align: center;
+  animation: empty-state-in 0.4s ease-out;
 }
-
-@keyframes welcome-fade-in {
-  from { opacity: 0; transform: translate(-50%, -48%); }
-  to   { opacity: 1; transform: translate(-50%, -50%); }
+@keyframes empty-state-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -46%);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%);
+  }
 }
-
-.welcome-icon {
-  font-size: 32px;
-  color: var(--c-accent);
-  opacity: 0.7;
-  line-height: 1;
+.empty-state-mark {
+  stroke: var(--c-line);
+  stroke-width: 2.5;
 }
-
-.welcome-title {
-  font-size: 18px;
-  font-weight: 600;
+.empty-state-mark rect + rect {
+  stroke: color-mix(in srgb, var(--c-line) 70%, var(--c-accent));
+}
+.empty-state-title {
+  font-size: 20px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
   color: var(--c-text);
-  letter-spacing: -0.3px;
 }
-
-.welcome-subtitle {
-  font-size: 12px;
-  color: var(--c-dim);
-  margin-bottom: 8px;
-  line-height: 1.55;
+.empty-state-sub {
+  margin-top: 6px;
+  font-size: 12.5px;
+  color: var(--c-muted);
 }
-
-.welcome-hints {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
+.empty-state-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
   width: 100%;
 }
-
-.welcome-hint {
+.empty-state-action {
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 8px 12px;
-  background: var(--c-surface-subtle);
-  border: 1px solid transparent;
-  border-radius: var(--radius-sm);
+  gap: 10px;
+  padding: 13px 14px;
+  background: var(--c-panel);
+  border: 1px solid var(--c-line);
+  border-radius: 10px;
+  color: var(--c-text-soft);
+  cursor: pointer;
   text-align: left;
-  cursor: default;
   font: inherit;
-  color: inherit;
 }
-
-button.welcome-hint {
+.empty-state-action:hover {
+  border-color: color-mix(in srgb, var(--c-accent) 40%, transparent);
+}
+.empty-state-action.is-agent:hover {
+  border-color: color-mix(in srgb, var(--c-purple) 45%, transparent);
+}
+.empty-state-action .tone-accent {
+  color: var(--c-accent);
+}
+.empty-state-action .tone-warn {
+  color: var(--c-warn);
+}
+.empty-state-action .tone-ok {
+  color: var(--c-ok);
+}
+.empty-state-action .tone-purple {
+  color: var(--c-purple);
+}
+.empty-state-action-label {
+  flex: 1;
+  font-size: 12px;
+  font-weight: 600;
+}
+.empty-state-action kbd {
+  padding: 1px 6px;
+  border: 1px solid var(--c-line);
+  border-radius: 4px;
+  font: 9.5px var(--mono);
+  color: var(--c-dim);
+}
+.empty-state-action-hint {
+  font-size: 10px;
+  color: var(--c-dim);
+}
+.empty-state-hint {
+  background: none;
+  border: none;
+  padding: 0;
+  font: 10.5px var(--mono);
+  color: var(--c-dim);
   cursor: pointer;
 }
-
-button.welcome-hint:hover {
-  background: var(--c-surface-hover);
-  border-color: var(--c-line);
+.empty-state-hint:hover {
+  color: var(--c-muted);
 }
 
 @media (max-width: 980px) {
   .attention-toast {
-    top: 70px;
     left: 12px;
     right: 12px;
     width: auto;
@@ -3924,16 +6228,11 @@ button.welcome-hint:hover {
     width: auto;
   }
 
-  .welcome-card {
-    width: calc(100vw - 24px);
-    max-width: 420px;
-    padding: 28px 24px;
-  }
 }
 
 @media (prefers-reduced-motion: reduce) {
   .attention-toast,
-  .welcome-card,
+  .empty-state,
   .canvas-node.attention-pulse {
     animation: none !important;
   }
@@ -3945,32 +6244,8 @@ button.welcome-hint:hover {
   }
 }
 
-.welcome-hint kbd {
-  display: inline-block;
-  background: var(--c-input-bg);
-  border: 1px solid var(--c-line);
-  border-radius: 4px;
-  padding: 2px 7px;
-  font-family: var(--mono);
-  font-size: 10px;
-  color: var(--c-accent);
-  white-space: nowrap;
-  min-width: 70px;
-  text-align: center;
-  flex-shrink: 0;
-}
 
-.welcome-hint span {
-  font-size: 12px;
-  color: var(--c-muted);
-}
 
-.welcome-footer {
-  font-size: 11px;
-  color: var(--c-dim);
-  margin-top: 4px;
-  line-height: 1.4;
-}
 
 /* ── Image Node ─────────────────────────────────────────────── */
 .image-node {