/* T390/T483 (doc 57/65): dock visual system from the prototype — scoped
   paint only. No layout/geometry/display/position/z-index changes.

   T483 correction: the multi-dock rail hosts each session in a same-origin
   iframe (/agents/<id>?projection=dock) whose OWN document renders the
   real transcript/composer — it never contains .dock-transcript,
   .dock-composer, or #agent-dock (those belong to the legacy single-dock
   overlay, which the multi-dock rail bypasses entirely and which no
   session ever populates). Measured live: the reachable ancestor inside
   that iframe's document is body.agent-projection-dock; the real elements
   are #transcript / .transcript-role / .transcript-prose / .transcript-tool
   / .composer.agent-composer / .file-reference-input / #instruction-text /
   #instruct-submit / #agent-status (shared with the standalone session
   view — .agent-projection-dock scopes every rule below to the dock
   iframe only). Every selector keeps its original .dock-transcript /
   .agent-session-column form too (harmless if unreachable there; some
   still apply inside the parent document, e.g. the launch column, and the
   legacy #agent-dock overlay stays styled in case it is ever re-wired). */

/* ── Single-dock chrome (scoped to #agent-dock, legacy overlay) ──────────── */
#agent-dock .dock-header { border-bottom: 1px solid var(--ui-line-soft); }
#agent-dock .dock-title { font-family: var(--font-ui); font-weight: 650; letter-spacing: -0.01em; }
#agent-dock .dock-brief {
  flex: 0 0 auto;
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--ui-line-soft);
  background: var(--ui-panel-soft);
}
#agent-dock .dock-brief[hidden] { display: none; }
#agent-dock .dock-brief > div { min-width: 0; display: grid; gap: 3px; }
#agent-dock .dock-brief strong,
#agent-dock #dock-activity {
  overflow: hidden;
  color: var(--ui-text-soft);
  font-size: 12px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#agent-dock .dock-role-summary {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}
#agent-dock .dock-role-summary .workforce-role-icon { flex: 0 0 auto; }
#agent-dock #dock-goal { white-space: normal; }
#agent-dock .dock-agent-option { grid-template-columns: 34px minmax(0, 1fr); }
#agent-dock .dock-picker-role-icon { grid-column: 1; grid-row: 1 / span 2; }
#agent-dock .dock-agent-option-title,
#agent-dock .dock-agent-option-snippet { grid-column: 2; }
#agent-dock .dock-runtime { display: flex; flex-wrap: wrap; gap: 5px; }
#agent-dock .dock-runtime span {
  max-width: 100%;
  overflow: hidden;
  padding: 3px 7px;
  border: 1px solid var(--ui-line);
  border-radius: 999px;
  color: var(--ui-muted);
  font: 9.5px/1.25 ui-monospace, Menlo, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#agent-dock .dock-brief-label { color:var(--ui-accent); font-family:var(--font-mono); font-size:.62rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; }
#agent-dock .dock-runtime { font-family: var(--font-mono); font-size: 0.65rem; color: var(--ui-muted); }

#agent-dock-columns .agent-session-column + .agent-session-column {
  border-left: 1px solid var(--ui-line-strong, var(--ui-line));
}
#agent-dock .workforce-mark-svg { fill: currentColor; stroke: none; }
#agent-dock .workforce-mark-svg path { stroke: none; }

/* ── Status strip: mono machine layer with live state ───── */
#agent-dock .dock-agent-status,
body.agent-projection-dock #agent-status { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.04em; color: var(--ui-muted); }
#agent-dock .dock-agent-status[data-state="working"],
body.agent-projection-dock #agent-status[data-state="working"] { color: var(--ui-success); }
#agent-dock .dock-agent-status[data-state="needs_input"],
body.agent-projection-dock #agent-status[data-state="needs_input"] { color: var(--ui-warning); }

/* T488 (doc 65, round 2, item 1): message bubbles were rendering fully
   WHITE. Root cause — the iframe the dock rail hosts is a SEPARATE
   document (see header comment above): the T487 rail-scoped
   `--ui-panel: var(--ui-glass)` override lives in the PARENT document's
   #agent-dock-rail only and cannot cross the iframe boundary, so every
   rule below reading var(--ui-panel) was resolving to THIS document's
   own :root --ui-panel — which tokens.css repurposed app-wide as a
   literal opaque card color (#ffffff in light theme, per the T485
   comment on that token) — instead of the prototype's translucent
   .t-turn.agent .t-bubble { background: var(--ui-panel) } (where the
   prototype's OWN --ui-panel IS what this codebase calls --ui-glass).
   Re-scope the same substitution at the iframe's own root so every
   descendant here (message bubbles, composer input, tool chips) picks
   up the correct glass tone with no per-rule changes — the same T487/
   T485 pattern, just applied on the other side of the iframe boundary. */
body.agent-projection-dock {
  --ui-panel: var(--ui-glass);
  --ui-line: var(--ui-glass-line);
  --ui-line-soft: var(--ui-glass-line-soft);
}

/* ── Transcript turns (dock surfaces only; the standalone/main session
     view is untouched — agent-projection-dock scopes strictly to the
     iframe the multi-dock rail hosts) ───────────────────────────── */
.dock-transcript .transcript-role,
.agent-session-column .transcript-role,
body.agent-projection-dock .transcript-role { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ui-muted); }
.dock-transcript .transcript-operator .transcript-role,
.agent-session-column .transcript-operator .transcript-role,
body.agent-projection-dock .transcript-operator .transcript-role { color: var(--ui-accent); }

/* T488 (item 2): un-nest the message card. Base CSS (transitional-
   workspaces.css .transcript-block/.transcript-agent/.transcript-operator)
   already paints a border+padding+background+shadow on the OUTER
   <article> — the rules below then painted a SECOND border+background on
   the INNER .transcript-prose div, rendering as a card inside a card (a
   "You" message showed an obviously nested box). Neutralize the outer
   article's card look in the dock and make .transcript-prose the ONE
   visible surface, with its own padding (prototype's .t-bubble: 11-14px)
   so text never touches the edge. Send-status accents (queued/sending/
   failed) move from the old border-right strip to a border-color/
   background change on that single surface instead. */
.dock-transcript .transcript-block,
.agent-session-column .transcript-block,
body.agent-projection-dock .transcript-block {
  border: 0;
  padding: 0;
  background: none;
  box-shadow: none;
}
.dock-transcript .transcript-operator .transcript-prose,
.agent-session-column .transcript-operator .transcript-prose,
body.agent-projection-dock .transcript-operator .transcript-prose { background: color-mix(in srgb, var(--ui-accent) 9%, transparent); border: 1px solid color-mix(in srgb, var(--ui-accent) 20%, transparent); border-radius: 13px; padding: 11px 14px; }
.dock-transcript .transcript-agent .transcript-prose,
.agent-session-column .transcript-agent .transcript-prose,
body.agent-projection-dock .transcript-agent .transcript-prose { background: var(--ui-panel); border: 1px solid var(--ui-line); border-radius: 13px; padding: 11px 14px; }
.dock-transcript .transcript-operator.pending .transcript-prose,
.agent-session-column .transcript-operator.pending .transcript-prose,
body.agent-projection-dock .transcript-operator.pending .transcript-prose { border-color: var(--ui-warning-line); opacity: .82; }
.dock-transcript .transcript-operator.failed .transcript-prose,
.agent-session-column .transcript-operator.failed .transcript-prose,
body.agent-projection-dock .transcript-operator.failed .transcript-prose { border-color: var(--ui-danger-line); background: var(--ui-danger-soft); }

/* Ask Mainframe already has one clear identity in the dock header. Its
   fixed runtime and resolved model are not actionable composer controls, so
   remove the redundant, shrink-prone Assistant/model chips below the input. */
/* AR32: "why it failed" on the bubble itself, not just the transient status
   line under the composer (which the next action overwrites). */
.dock-transcript .transcript-status-reason,
.agent-session-column .transcript-status-reason,
body.agent-projection-dock .transcript-status-reason { font-size: 0.78rem; color: var(--ui-danger); margin: 4px 0 8px; }

/* Tool lines: mono, chip background, accent-left when open.
   AR32 round 4 carry-over: operator decision, a deliberate prototype
   deviation — fully rounded (matching every other chip in the transcript)
   rather than the prototype's square-left "flag" shape. */
.dock-transcript .transcript-tool,
.agent-session-column .transcript-tool,
body.agent-projection-dock .transcript-tool { font-family: var(--font-mono); border-left: 2px solid var(--ui-line); border-radius: 8px; background: var(--ui-panel-soft, var(--ui-panel)); }
.dock-transcript .transcript-tool[open],
.agent-session-column .transcript-tool[open],
body.agent-projection-dock .transcript-tool[open] { border-left-color: var(--ui-accent); }
.dock-transcript .transcript-tool-title,
.agent-session-column .transcript-tool-title,
body.agent-projection-dock .transcript-tool-title { color: var(--ui-text-soft); }
.dock-transcript .transcript-tool-count,
.agent-session-column .transcript-tool-count,
body.agent-projection-dock .transcript-tool-count { color: var(--ui-muted); }

/* Live activity header: the prototype's live strip */
.dock-transcript .sdk-live-activity-title,
.agent-session-column .sdk-live-activity-title,
body.agent-projection-dock .sdk-live-activity-title { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.05em; color: var(--ui-success); }
.dock-transcript .sdk-step-copy,
.agent-session-column .sdk-step-copy,
body.agent-projection-dock .sdk-step-copy { color: var(--ui-text-soft); }

/* T489 (doc 65, round 2, item 3): tool-call collapse on turn completion.
   Base CSS (transitional-workspaces.css) clamps a finished turn's step
   feed to a 108px scrollable peek rather than truly collapsing it — for
   any turn with more than ~3 tool calls that peek still reads as "stays
   expanded showing all the steps," which is exactly what the operator
   flagged after a live conversation. In the dock, a block that is
   neither the LIVE turn (.is-active, untouched — keeps today's
   streaming/partial view exactly as-is) nor manually opened
   (.is-expanded) now shows ONLY its one-line mono header — the step
   list is fully hidden until that header is clicked (the toggle itself
   is unchanged JS, already wired in transcript-core.js). The header text
   itself (⚙ Worked · N commands · duration) is a data-layer-free text
   change in transcript-core.js — same events, no request/stream change. */
.dock-transcript .sdk-step-activity:not(.is-active):not(.is-expanded) .sdk-step-feed-shell,
.agent-session-column .sdk-step-activity:not(.is-active):not(.is-expanded) .sdk-step-feed-shell,
body.agent-projection-dock .sdk-step-activity:not(.is-active):not(.is-expanded) .sdk-step-feed-shell {
  display: none;
}

/* ── Session picker (scoped to #agent-dock) ──────────────── */
/* Doc 65 round 3 (operator): "it was never redesigned" — bring #agent-dock
   (the "+Agent" slide-over, reused as the picker; geometry fixed to full
   height + exact rail width in multi-dock-push.css) onto the same glass
   surface the launch drawer and docked rail already carry, following the
   launch drawer's exact structural pattern (T484/T485/T487): scope
   --ui-panel/--ui-line to --ui-glass locally so every descendant already
   reading those tokens (picker rows, search input, header) picks up the
   correct translucent tone with no per-rule changes, then let the two
   legacy opaque sub-panel backgrounds (.dock-header/.dock-picker, still
   on pre-design-system --composer-bg/--conversation-bg tokens) go
   transparent so the whole column reads as ONE continuous glass surface
   instead of stacked opaque cards — the same correction T487 made for
   .agent-session-column__header. */
#agent-dock {
  --ui-panel: var(--ui-glass);
  --ui-line: var(--ui-glass-line);
  --ui-line-soft: var(--ui-glass-line-soft);
  background: color-mix(in srgb, var(--ui-bg) 20%, var(--ui-panel));
  backdrop-filter: blur(18px);
}
#agent-dock .dock-header,
#agent-dock .dock-picker { background: transparent; }
#agent-dock .dock-header { border-bottom: 1px solid var(--ui-line-soft); }
/* Search: the mono machine layer, matching the composer's own
   .file-reference-input anatomy (13px radius, 11/13 padding, accent
   focus-within ring, no glow). */
#agent-dock .dock-picker-search {
  border: 1px solid var(--ui-line);
  border-radius: 13px;
  padding: 11px 13px;
  height: auto;
  transition: border-color var(--speed, 140ms) ease;
}
#agent-dock .dock-picker-search:focus-within {
  border-color: color-mix(in srgb, var(--ui-accent) 45%, transparent);
}
#agent-dock .dock-picker-search input { font-family: var(--font-ui); font-size: var(--text-base); color: var(--ui-text); }
/* AR-round5 (operator: icon far too small, harsh fluorescent ring around
   cramped padding). Root cause of the ring: app-shell/chrome-visual.css's
   sitewide `input:focus-visible{outline:2px solid var(--ui-accent);
   outline-offset:2px}` a11y baseline loads AFTER this file and ties on
   specificity with the former shared search-input rule that zeroed outline —
   its later position in the cascade won, so a raw 2px outset
   outline+radius drew tight around the bare ~20px input box instead of the
   wrapper's own comfortable 13px/11px anatomy above. The same pattern
   already exists for #files-tab's file search (files-new/styles.css), which
   scopes outline:none at #id-level specificity
   and rely on the wrapper's :focus-within border-color instead of the raw
   ring. This mirrors that exact, already-established fix. The icon swaps
   the 13px "⌕" text glyph (unreadable at a glance) for the same 16x16 SVG
   magnifying glass files_new's search already uses. */
#agent-dock .dock-picker-search input:focus,
#agent-dock .dock-picker-search input:focus-visible {
  outline: none;
}
#agent-dock .dock-picker-search-icon { display: flex; }
#agent-dock .dock-picker-search-icon svg { display: block; width: 16px; height: 16px; }
#agent-dock .dock-agent-option { border: 1px solid transparent; border-radius: 12px; transition: background var(--speed, 140ms) ease, border-color var(--speed, 140ms) ease; }
#agent-dock .dock-agent-option:hover,
#agent-dock .dock-agent-option:focus-visible { background: var(--ui-panel-hover, var(--ui-hover)); border-color: var(--ui-line); }
#agent-dock .dock-picker-role-icon { border-radius: 11px; background: color-mix(in srgb, var(--ui-accent) 11%, transparent); color: var(--ui-accent); }
#agent-dock .dock-agent-option-name { font-family: var(--font-ui); font-weight: 600; }
#agent-dock .dock-agent-option-snippet { font-family: var(--font-mono); font-size: 0.62rem; color: var(--ui-muted); }
#agent-dock .dock-picker-empty { color: var(--ui-muted); }

/* ── Composer: rounded panel with accent focus ring ─────── */
/* Dock polish (doc 65, operator round): this shell used to paint --ui-panel while
   the textarea inside it independently kept overlays.css's own 1px border
   and form-controls.css's opaque --ui-input background — a card nested in a
   card, two concentric borders measured live (shell 133.3px tall with a 1px
   solid edge, textarea 104px with its own 1px solid edge). The launch column
   already solved exactly this (multi-dock.css .agent-launch-column__composer:
   one bordered card, borderless transparent textarea inside). The shell is
   now the single input surface and carries the design-system input token; the
   textarea below is reset to a plain text region inside it. */
.dock-composer .file-reference-input,
body.agent-projection-dock .file-reference-input { border: 1px solid var(--ui-line); border-radius: 13px; background: var(--ui-input); padding: 11px 13px; transition: border-color var(--speed, 140ms) ease; }
.dock-composer .file-reference-input:focus-within,
body.agent-projection-dock .file-reference-input:focus-within { border-color: color-mix(in srgb, var(--ui-accent) 45%, transparent); }
.dock-composer .file-reference-input textarea,
body.agent-projection-dock .file-reference-input textarea { font-family: var(--font-ui); font-size: var(--text-base); line-height: 1.5; border: none; background: transparent; padding: 0; }
.dock-composer .file-reference-input textarea:focus,
body.agent-projection-dock .file-reference-input textarea:focus,
.dock-composer .file-reference-input textarea:focus-visible,
body.agent-projection-dock .file-reference-input textarea:focus-visible { outline: none; box-shadow: none; }
.dock-composer .file-reference-chips .file-reference-chip,
body.agent-projection-dock .file-reference-chips .file-reference-chip { border-radius: 8px; background: color-mix(in srgb, var(--ui-accent) 9%, transparent); border: 1px solid color-mix(in srgb, var(--ui-accent) 22%, transparent); font-family: var(--font-mono); font-size: 0.65rem; }
body.agent-projection-dock #instruct-submit {
  border-radius: 10px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 650;
  /* Dock polish (doc 65): this was `padding: 8px 14px`. The shorthand re-set the block axis
     and, at (0,1,2), outranked agent-composer.css's `.agent-composer
     #instruct-submit { padding-block: 0 }` (0,1,1) — so Send alone kept 8px
     of vertical padding and out-grew the other three controls in the row.
     Inline padding now comes from the shared control token so all four
     controls carry identical internal padding. */
  padding-block: 0;
  padding-inline: var(--composer-control-pad-inline, 0.625rem);
}

/* ── Quiet notices (scoped; the workspace session-view banner
     keeps its shipped styling) ───────────────────────────── */
#agent-dock .dock-force { border-radius: 10px; background: color-mix(in srgb, var(--ui-warning) 8%, transparent); }
#agent-dock .session-ended-banner,
.agent-session-column .session-ended-banner { border-radius: 10px; background: color-mix(in srgb, var(--ui-accent) 7%, transparent); }

/* ── Launch column form (scoped, geometry-free) ──────────── */
.agent-launch-column__form textarea { font-family: var(--font-ui); }
.agent-launch-column .agent-launch-model-option { font-family: var(--font-ui); transition: background var(--speed, 140ms) ease; }
.agent-launch-column .agent-launch-model-option.active { background: color-mix(in srgb, var(--ui-accent) 8%, transparent); }

/* T396: dock rail session tabs + column header paint. */
.agent-dock-tabs { gap: 0.25rem; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--ui-line-soft); }
.agent-dock-tabs button {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ui-text-soft);
  border: 1px solid transparent;
  border-radius: 0.55rem;
  padding: 0.4rem 0.7rem;
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.agent-dock-tabs button:hover { color: var(--ui-text); background: var(--ui-panel-hover, var(--ui-hover)); }
.agent-dock-tabs button[aria-selected="true"] {
  color: var(--ui-accent);
  background: color-mix(in srgb, var(--ui-accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--ui-accent) 30%, transparent);
}
.agent-session-column__header { border-bottom: 1px solid var(--ui-line-soft); }
.agent-session-column__engine-mark { display: none; grid-row: 1 / span 2; }
.agent-session-column[data-engine="mainframe"] .agent-session-column__engine-mark { display: block; }
.agent-session-column[data-engine="mainframe"] [data-dock-dot] { display: none; }
.agent-dock-capacity { font-family: var(--font-mono); font-size: 0.65rem; color: var(--ui-muted); }

/* T487 (doc 57/65): dock STRUCTURAL rebuild, value layer. Prototype's
   .dock-col (mf.css): `background: color-mix(in srgb, var(--ui-bg) 45%,
   var(--ui-panel))` — no backdrop-filter (the dock reads as a solid-ish
   panel, deliberately less "glassy" than the launch drawer's 20%-mix +
   18px blur). --ui-panel here is the SAME app-wide-repurposed-opaque token
   the T485 launch-column comment already documents; the same fix applies —
   scope --ui-panel (and --ui-line/-soft, since the transcript/composer
   borders read them too) to --ui-glass locally on the rail, so every
   descendant that already reads var(--ui-panel)/var(--ui-line) picks up
   the correct translucent value with no per-rule changes. Excluded from
   the picker (#agent-dock) and the launch column, which own their own
   backgrounds (dock-visual.css above / multi-dock-push.css's launch-only
   transparent rule). */
#agent-dock-rail {
  --ui-panel: var(--ui-glass);
  --ui-line: var(--ui-glass-line);
  --ui-line-soft: var(--ui-glass-line-soft);
  background: color-mix(in srgb, var(--ui-bg) 45%, var(--ui-panel));
}
.agent-session-column:not(.agent-launch-column) {
  background: color-mix(in srgb, var(--ui-bg) 45%, var(--ui-panel));
}
/* Prototype .dock-top has no background of its own — the dock-col's glass
   shows through uniformly, with only a border-bottom divider. The shared
   .agent-session-column__header rule (multi-dock.css) paints an opaque
   var(--ui-panel) for every column; the launch column already turns this
   transparent (T485) — real docked columns need the same correction.
   Ended sessions keep their own distinct --ui-surface-soft header cue
   (multi-dock.css [data-ended="true"] rule, equal specificity + earlier
   source — excluded here explicitly rather than relying on load order). */
.agent-session-column:not(.agent-launch-column):not([data-ended="true"]) .agent-session-column__header {
  background: transparent;
}

/* Per-column grip. The overall region edge uses the subtler Files-divider
   grammar in multi-dock.css; this pill remains only between dock columns. */
.agent-session-column__resize::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 56px;
  border-radius: 99px;
  background: var(--ui-muted);
  opacity: 0.6;
  transform: translate(-50%, -50%);
  transition: background var(--speed, 140ms) ease, opacity var(--speed, 140ms) ease;
}
.agent-session-column__resize:hover::after,
.agent-session-column__resize:focus-visible::after {
  background: var(--ui-accent);
  opacity: 1;
}

/* T397/T483: transcript life — streaming caret, working pulse, quiet empty
   states. T489 fix: the caret was unconditional on .sdk-live-activity-title,
   so a FINISHED "⚙ Worked" one-line summary (item 3 above) kept blinking a
   live cursor forever — the exact opposite of "collapsed, done" it now
   reads as. .sdk-live-activity-title only exists inside .sdk-step-activity
   (transcript-core.js); scope the caret to the genuinely-live block. */
.dock-transcript .sdk-step-activity.is-active .sdk-live-activity-title::after,
.agent-session-column .sdk-step-activity.is-active .sdk-live-activity-title::after,
body.agent-projection-dock .sdk-step-activity.is-active .sdk-live-activity-title::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 13px;
  margin-left: 6px;
  vertical-align: -2px;
  background: var(--ui-accent);
  animation: dock-caret-blink 1s steps(1) infinite;
}
@keyframes dock-caret-blink { 50% { opacity: 0; } }
#agent-dock .dock-agent-status[data-state="working"]::before,
body.agent-projection-dock #agent-status[data-state="working"]::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 999px;
  vertical-align: 0.5px;
  background: currentColor;
  animation: dock-status-pulse 2s ease infinite;
}
@keyframes dock-status-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.dock-transcript .session-transcript-unselected,
.dock-transcript .transcript-empty,
.agent-session-column .session-transcript-unselected,
.agent-session-column .transcript-empty,
body.agent-projection-dock .session-transcript-unselected,
body.agent-projection-dock .transcript-empty {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ui-muted);
  text-align: center;
  padding: 2.2rem 1rem;
}
.dock-transcript .transcript-tool summary,
.agent-session-column .transcript-tool summary,
body.agent-projection-dock .transcript-tool summary {
  cursor: pointer;
}

/* T483: docked-session column header — prototype's .dock-title (15px/650),
   distinct from the launch column's larger 17px/700 ld-head title. */
.agent-session-column:not(.agent-launch-column) .agent-session-column__identity strong {
  font-family: var(--font-ui);
  font-size: var(--text-md);
  font-weight: 650;
  color: var(--ui-text);
}
.agent-session-column:not(.agent-launch-column) .agent-session-column__identity small {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ui-muted);
}

/* T482 (doc 57 / 65): launch column rebuilt from the prototype's launch.html +
   launch.js + mf.css, values ported literally (not incrementally patched).
   Geometry (display/flex/grid/position/container-query breakpoints) stays
   owned by multi-dock.css; every rule below is paint only — colors, fonts,
   radii, spacing, transitions — scoped under .agent-launch-column so it
   never leaks onto a docked session column or another surface. */

/* T485 (doc 57/65): --ui-panel here was long ago repurposed app-wide as an
   OPAQUE card color (see tokens.css note), so color-mix(--ui-bg, --ui-panel)
   was quietly producing an opaque navy blend, not the prototype's translucent
   glass — the literal root cause of "background colours are still not the
   prototype's". Overriding --ui-panel to --ui-glass LOCALLY, scoped to this
   subtree, makes every descendant rule below that already reads var(--ui-panel)
   (textarea, engine-line, popover, tier cards, …) correctly pick up the
   prototype's real glass value with no per-rule changes. */
.agent-launch-column {
  --ui-panel: var(--ui-glass);
  --ui-line: var(--ui-glass-line);
  --ui-line-soft: var(--ui-glass-line-soft);
  background: color-mix(in srgb, var(--ui-bg) 20%, var(--ui-panel));
  backdrop-filter: blur(18px);
}
.agent-dock .agent-session-column {
  background: color-mix(in srgb, var(--ui-bg) 20%, var(--ui-panel));
  backdrop-filter: blur(18px);
}

/* Prototype .ld-head has no background of its own (the drawer's glass shows
   through) — the shared .agent-session-column__header rule paints an opaque
   var(--ui-panel) for docked columns, which this subtree's scoped --ui-panel
   would otherwise tint too. */
.agent-launch-column .agent-session-column__header {
  background: transparent;
}

/* ── Header: prototype .ld-head (17px/700 title, 13px muted subtitle,
     STACKED — the base .agent-session-column__identity is a 2-column grid
     for the docked-session dot+name layout; the launch header hides the dot
     but inherited the 2-column track, landing title/subtitle side by side
     instead of stacked) ── */
.agent-launch-column .agent-session-column__identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.agent-launch-column .agent-session-column__identity .dot { display: none; }
.agent-launch-column .agent-session-column__identity strong {
  font-family: var(--font-ui);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: normal;
  color: var(--ui-text);
}
.agent-launch-column .agent-session-column__identity small {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 400;
  color: var(--ui-muted);
  margin-top: 2px;
}
.agent-launch-column .close,
.agent-launch-column__close { font-size: 1.1rem; width: 2rem; height: 2rem; }

/* Mono eyebrow labels: prototype .ld-label — the section-rhythm separator.
   T485: this margin (not a uniform flex gap) IS the "cramped composition"
   fix — 18px breathing room above each section, 8px down to its content,
   collapsed only for the very first eyebrow. */
.agent-launch-eyebrow {
  margin: 18px 0 8px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ui-muted);
}
.agent-launch-eyebrow:first-child { margin-top: 0; }
/* T310's phone sheet pins the composer to the viewport bottom via
   position:sticky; the eyebrow would sit stranded at the top of the
   scroll region, disconnected from the field it labels. Desktop-only. */
@media (max-width: 820px) {
  .agent-launch-eyebrow { display: none; }
}

/* ── Goal composer: prototype .goal-input (13/15 padding, 13px radius,
     14px/1.55, accent border-only focus ring — no glow) — the bordered card
     is now .agent-launch-column__composer (multi-dock.css); the textarea
     itself is borderless/transparent inside it, like the prototype's
     .goal-composer .goal-input override. ── */
.agent-launch-column__form textarea {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--ui-text);
}
.agent-launch-column__form textarea:focus,
.agent-launch-column__form .file-reference-input:focus-within {
  outline: none;
  box-shadow: none;
}
.agent-launch-column__form textarea::placeholder { color: var(--ui-muted); }

/* Attachment tray + @file reference chips: prototype .atch-chip */
.agent-launch-column__form .composer-attachment-tray .composer-image-chip,
.agent-launch-column__form .file-reference-chips .file-reference-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--ui-accent) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--ui-accent) 22%, transparent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ui-text);
}

/* @file trigger: prototype .ctx-chip */
.agent-launch-column__toolbar > [data-launch-file] {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 9px;
  background: var(--ui-hover);
  border: 1px solid var(--ui-line);
  color: var(--ui-text-soft);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  transition: border-color var(--speed) ease, color var(--speed) ease;
}
.agent-launch-column__toolbar > [data-launch-file]:hover {
  color: var(--ui-text);
  border-color: color-mix(in srgb, var(--ui-accent) 30%, transparent);
}


/* ── Engine picker rebuilt as the prototype's .engine-line: avatar tile
     + stacked name/harness + a text "Change" affordance (no caret glyph) ── */
.agent-launch-model-pill {
  gap: 11px;
  padding: 11px 14px;
  border-radius: 13px;
  border-color: var(--ui-line);
  background: var(--ui-panel);
}
.agent-launch-model-mark {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--ui-accent) 11%, transparent);
  color: var(--ui-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.agent-launch-model-mark .engine-chip { display: inline-flex; }
/* Prototype .engine-name: the bold primary line (was the only line before
   the tier selector needed the engine identity separated from the model). */
.agent-launch-model-engine-name {
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ui-text);
}
/* Prototype .engine-sub: mono, muted — now the secondary line (model name);
   T251 pins this span's text content, this rule only repaints it. */
.agent-launch-model-pill .model-picker-name {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--ui-muted);
}
.agent-launch-model-pill .model-picker-caret {
  font-size: 0;
  color: var(--ui-accent);
}
.agent-launch-model-pill .model-picker-caret::after {
  content: "Change";
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ui-accent);
}
.agent-launch-model-pill:hover .model-picker-caret::after { text-decoration: underline; }

/* Engine/model popover: prototype .engine-pop / .ep-row */
.agent-launch-model-popover {
  border-color: var(--ui-line);
  border-radius: 13px;
  /* Same dark-only see-through as the dock ⋯ menu: .agent-launch-column sets
     --ui-panel:var(--ui-glass) for its subtree, and this popover floats out of
     that subtree's blurred backdrop. Elevated token, not panel. */
  background: var(--ui-raised);
  color: var(--ui-text);
  box-shadow: var(--ui-shadow);
  padding: 5px;
}
.agent-launch-model-option {
  height: auto;
  min-height: 0;
  padding: 10px 12px;
  border-radius: 8px;
  border-bottom: 1px solid var(--ui-line-soft);
  font-family: var(--font-ui);
  color: var(--ui-text-soft);
  transition: background var(--speed) ease, color var(--speed) ease;
}
.agent-launch-model-option:last-child { border-bottom: none; }
.agent-launch-model-option:hover,
.agent-launch-model-option:focus-visible,
.agent-launch-model-option.active {
  background: color-mix(in srgb, var(--ui-accent) 10%, transparent);
  color: var(--ui-text);
}
.agent-launch-model-option[aria-selected="true"] {
  background: color-mix(in srgb, var(--ui-accent) 6%, transparent);
  color: var(--ui-text);
}
.agent-launch-model-option__model { font-size: 13px; font-weight: 500; }
.agent-launch-model-option__engine-name { font-family: var(--font-mono); font-size: 10.5px; }
.agent-launch-model-search {
  border-radius: 9px;
  border-color: var(--ui-line);
  background: var(--ui-panel);
  color: var(--ui-text);
  font-family: var(--font-ui);
}
/* Operator round (2026-09-04): the popover's "Manage models…" footer — the
   same destination "Configure engines" reaches (Settings → AI Engines), one
   click closer to the model set being picked here. */
.agent-launch-model-manage {
  display: block; width: 100%; margin-top: 4px; padding: 8px 11px;
  border: 0; border-top: 1px solid var(--ui-line-soft); border-radius: 0 0 8px 8px;
  background: transparent; cursor: pointer;
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 600;
  color: var(--ui-accent);
  transition: background var(--speed) ease, color var(--speed) ease;
}
.agent-launch-model-manage:hover { background: var(--ui-hover); color: var(--ui-text); }
.agent-launch-model-manage:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: -2px; }

/* Launch veil (operator 2026-09-04, #1400 refinement): the launching/
   connecting placeholder shown over the reservation's frame region while
   accept -> bind -> reconcile is in flight, so the server's honest 404 for
   the placeholder identity never flashes. Multi-dock.js's frame keeps its
   layout slot; the veil takes it while [data-launch-veil="true"]. */
.agent-session-column__launch-veil {
  display: flex; flex: 1 1 auto; min-height: 0;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 24px; text-align: center;
  background: var(--ui-bg);
}
.agent-session-column__launch-veil[hidden] { display: none; }
.agent-session-column[data-launch-veil="true"] > .agent-session-column__frame { display: none; }
/* Terminal failed backdrop (bounded reconciliation genuinely exhausted):
   quiet, danger-tinted copy matching the header's honest verdict. */
.agent-session-column__launch-veil[data-failed="true"] strong { color: var(--ui-danger); }
.agent-session-column__launch-veil strong {
  font-family: var(--font-ui); font-size: 13.5px; font-weight: 650; color: var(--ui-text);
}
.agent-session-column__launch-veil span[data-launch-veil-copy] {
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ui-muted);
  max-width: 30ch; line-height: 1.5;
}
.agent-session-column__launch-veil .agent-launch-submit-spinner { color: var(--ui-accent); }

/* ── Submit: T485 — the shared .button.primary.large design-system variant
     (foundation.css) now matches the prototype's .dock-send/.btn-primary
     exactly; the launch submit button just consumes it, no bespoke CSS. ── */

/* ── State / error line: prototype's quiet inline copy, no boxed treatment
     unless it is actually an error ── */
.agent-launch-column__state:not(:empty) {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ui-muted);
}
.agent-launch-column[data-launch-stage="degraded"] .agent-launch-column__state,
.agent-launch-column[data-launch-stage="rejected"] .agent-launch-column__state {
  padding: 8px 11px;
  border: 1px solid var(--ui-danger-line);
  border-radius: 9px;
  background: var(--ui-danger-soft);
  color: var(--ui-danger);
}

/* ── Footer: prototype's quiet mono meta row (hint / routine / configure) ── */
.agent-launch-column__hint {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ui-muted);
}
.agent-launch-column__routine,
.agent-launch-column__configure {
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--ui-accent);
}
.agent-launch-column__routine:hover,
.agent-launch-column__configure:hover { text-decoration: underline; }
.agent-launch-persistence {
  font-family: var(--font-mono);
  font-size: 10px;
}

/* UI batch 2: dock picker tile = the same per-agent hue as the workforce card tile. */
#agent-dock .dock-picker-role-icon {
  background: hsl(var(--project-hue, 190) 65% 55% / 0.14);
  color: hsl(var(--project-hue, 190) 65% 62%);
}
html[data-theme="light"] #agent-dock .dock-picker-role-icon {
  background: hsl(var(--project-hue, 190) 55% 42% / 0.12);
  color: hsl(var(--project-hue, 190) 60% 36%);
}

/* UI batch 4: picker tile inherits the canonical 40/20 tile above. */
#agent-dock .dock-picker-role-icon {
  width: 40px;
  height: 40px;
  align-self: center;
}
#agent-dock .dock-picker-role-icon svg {
  width: 20px;
  height: 20px;
}