/* ══ AGENT STUDIO ══════════════════════════════════════════════════════════
 * Three panes, the way a Mac document window has them: the sidebar folds to
 * its icons and grows a second level — the agent's sections — beside them, the
 * editor takes the middle, and the test panel is an inspector that never
 * leaves. The editor's header stays put; only the section scrolls. */

/* ── the frame ─────────────────────────────────────────────────────────── */
@media (min-width: 761px) {
  .app.agent-workspace, .app.agent-workspace.inspecting {
    --studio-h: calc(100dvh - 32px);
    /* The test panel keeps the width it has on every other page — opening an
       agent narrows nothing but the sidebar. */
    --test-w: 388px;
    --subnav-w: 184px;
    grid-template-columns: 64px minmax(0, 1fr) var(--test-w);
    gap: 16px 0; max-width: 1920px; align-items: start; }
  .agent-workspace > #content { grid-column: 2; grid-row: 1; padding: 0; min-width: 0; }

  /* The sidebar, folded to its icons. Group headers become hairlines, the
     environment becomes a status capsule, and each icon names itself on
     hover and on keyboard focus. overflow stays visible so those labels and
     the cat's invitation can open beside the rail.
     One row, never a span: spanning 1 / 3 made an empty second row whose
     16px gap let the window scroll, and the section column, stuck inside a
     box no taller than itself, slid up while this half stayed put. */
  /* Both columns are sticky, so each paints as its own layer; z-index keeps
     the rail's tooltips and the cat's bubble above the section column. */
  :is(.agent-workspace, .admin-workspace) > .nav { grid-column: 1; grid-row: 1; height: var(--studio-h);
    padding: 12px 8px 10px; overflow: visible; border-right: 0; z-index: 5;
    border-radius: var(--ui-r-panel) 0 0 var(--ui-r-panel); }
  :is(.agent-workspace, .admin-workspace) .logo { justify-content: center; padding: 4px 0 14px; }
  :is(.agent-workspace, .admin-workspace) .logo-text, :is(.agent-workspace, .admin-workspace) .nav-sec { display: none; }
  :is(.agent-workspace, .admin-workspace) .nav-items + .nav-sec:not([hidden]) { display: block; height: 1px; margin: 8px 10px;
    padding: 0; background: var(--c-dark-line); font-size: 0; overflow: hidden; }
  /* The docs link is a row like the others, so it folds like them: its word
     and its ↗ go, its icon centres, and it names itself on hover. Only the
     rail's rows fold (> .nav): the section column's own Docs link is also a
     .nav-ext, and it keeps its word. */
  :is(.agent-workspace, .admin-workspace) > .nav :is(.nav-item, .nav-ext) { justify-content: center; width: 44px; height: 40px; min-height: 40px;
    margin: 0 auto; padding: 0; gap: 0; font-size: 0; }
  :is(.agent-workspace, .admin-workspace) > .nav :is(.nav-item, .nav-ext) svg { width: 19px; height: 19px; }
  :is(.agent-workspace, .admin-workspace) > .nav .nav-ext-mark { display: none; }
  :is(.agent-workspace, .admin-workspace) > .nav :is(.nav-item, .nav-ext)[aria-label]:is(:hover, :focus-visible)::after,
  :is(.agent-workspace, .admin-workspace) #env-live .btn-label {
    position: absolute; left: calc(100% + 14px); top: 50%;
    transform: translateY(-50%); z-index: 30; pointer-events: none; white-space: nowrap;
    padding: 6px 10px; border-radius: 7px; background: var(--c-dark); color: var(--c-on-dark);
    font: 500 12px/1.2 var(--sans); letter-spacing: 0; box-shadow: var(--ui-float); }
  :is(.agent-workspace, .admin-workspace) > .nav :is(.nav-item, .nav-ext)[aria-label]:is(:hover, :focus-visible)::after { content: attr(aria-label); }
  :is(.agent-workspace, .admin-workspace) .envwrap { padding: 0 0 12px; }
  :is(.agent-workspace, .admin-workspace) .envrow { grid-template-columns: 1fr; padding: 0; background: none; isolation: auto; }
  :is(.agent-workspace, .admin-workspace) .envrow::before { display: none; }
  /* ── GO LIVE, FOLDED ──
     "Go live →" did not fit 48px, so the folded rail draws it: a broadcast
     in the ∞'s pixel grid and gold (a mark on the dark, never a filled chip).
     The waves fade outward at rest and travel outward under the pointer.
     The words become the tooltip, so "Resume go-live" still says so. The
     sandbox half folds away: anyone who sees this rail is not live yet. */
  :is(.agent-workspace, .admin-workspace) #env-sandbox { display: none; }
  :is(.agent-workspace, .admin-workspace) #env-live { width: 44px; height: 36px; min-height: 36px; margin: 0 auto;
    padding: 0; border-radius: 10px; background: var(--ui-dark-fill); color: var(--bill-gold);
    box-shadow: inset 0 0 0 1px rgba(241, 188, 4, 0.28);
    transition: background-color 160ms ease, box-shadow 160ms ease; }
  :is(.agent-workspace, .admin-workspace) #env-live::before { display: none; }
  :is(.agent-workspace, .admin-workspace) .envmark { display: block; width: 32px; height: 20px; }
  :is(.agent-workspace, .admin-workspace) .envmark-near { opacity: 0.8; }
  :is(.agent-workspace, .admin-workspace) .envmark-far { opacity: 0.5; }
  :is(.agent-workspace, .admin-workspace) #env-live .btn-label { opacity: 0; transition: opacity 120ms ease; }
  :is(.agent-workspace, .admin-workspace) #env-live:is(:hover, :focus-visible) .btn-label { opacity: 1; }
  :is(.agent-workspace, .admin-workspace) #env-live:not([aria-disabled="true"]):is(:hover, :focus-visible) {
    background: var(--ui-dark-raise);
    box-shadow: inset 0 0 0 1px rgba(241, 188, 4, 0.6), 0 0 18px -4px rgba(241, 188, 4, 0.45); }
  :is(.agent-workspace, .admin-workspace) #env-live:not([aria-disabled="true"]):is(:hover, :focus-visible) :is(.envmark-near, .envmark-far) {
    animation: envmark-wave 1100ms var(--ease-out) infinite; }
  :is(.agent-workspace, .admin-workspace) #env-live:not([aria-disabled="true"]):is(:hover, :focus-visible) .envmark-far { animation-delay: 160ms; }
  :is(.agent-workspace, .admin-workspace) #env-live:not([aria-disabled="true"]):active { background: var(--c-dark-line); }
  :is(.agent-workspace, .admin-workspace) .envwhy { display: none; }
  :is(.agent-workspace, .admin-workspace) .nav-foot { align-items: stretch; gap: 4px; padding: 8px 0 0; }
  :is(.agent-workspace, .admin-workspace) .nav-cap, :is(.agent-workspace, .admin-workspace) .meetbtn, :is(.agent-workspace, .admin-workspace) .release-versions,
  :is(.agent-workspace, .admin-workspace) #brandpill { display: none !important; }
  :is(.agent-workspace, .admin-workspace) .nav-me { justify-content: center; padding: 0; }
  :is(.agent-workspace, .admin-workspace) .signout { font-size: 11px; padding: 6px 2px; white-space: nowrap; }
  /* The cat curls up small at the foot of the rail; its invitation opens
     beside it instead of above it. */
  :is(.agent-workspace, .admin-workspace) #support { padding: 0; }
  :is(.agent-workspace, .admin-workspace) #supcat { padding: 4px 0; border-radius: 10px; }
  :is(.agent-workspace, .admin-workspace) #supcat:hover { background: var(--c-dark-sunk); }
  :is(.agent-workspace, .admin-workspace) #supcat .sup-scene { height: 44px; max-width: 48px; }
  :is(.agent-workspace, .admin-workspace) .sup-house, :is(.agent-workspace, .admin-workspace) .sup-name, :is(.agent-workspace, .admin-workspace) #supaction { display: none; }
  :is(.agent-workspace, .admin-workspace) #supcat .cat-talk { width: 38px; height: 44px; bottom: 0; }
  :is(.agent-workspace, .admin-workspace) #supbubble { position: absolute; left: calc(100% + 14px); right: auto; bottom: 6px;
    width: 220px; z-index: 40; transform-origin: 0 100%; }
  :is(.agent-workspace, .admin-workspace) #supbubble::after { top: auto; bottom: 18px; left: -5px; margin: 0;
    border: 5px solid transparent; border-right-color: var(--c-dark-line); border-left: 0; }

  /* The test panel: the same floating material as the sidebar, so the two
     panes read as the window's chrome and the editor as its document. */
  .app.agent-workspace > .rail { grid-column: 3; grid-row: 1; position: sticky; top: 16px;
    display: flex; flex-direction: column; gap: 10px; min-width: 0; width: auto;
    height: var(--studio-h); margin: 0; transform: none; opacity: 1; visibility: visible; }
  .agent-workspace .rail-head { flex: none; padding: 2px 2px 0; }
  .agent-workspace .rail-x { display: none; }
  .agent-workspace .rail .rail-card { flex: none; margin: 0; padding: 12px 14px; }
  .agent-workspace .rail .pane { min-height: 140px; }
  .agent-workspace .rail #chatpane { flex: 1; }
  .agent-workspace .rail #latpane { flex: none; }
  .agent-workspace .rail .statusline:empty { display: none; }
  .agent-workspace:not(.inspecting) > .insp { display: none; }
}
/* One wave, near arcs then far: the broadcast leaving the mark. */
@keyframes envmark-wave { 0%, 100% { opacity: 0.25; } 35% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .envmark path { animation: none !important; } }
@media (min-width: 761px) and (max-width: 1240px) {
  .app.agent-workspace, .app.agent-workspace.inspecting { --test-w: 352px; }
}
@media (min-width: 761px) and (max-width: 1279px) {
  .app.agent-workspace, .app.agent-workspace.inspecting { --subnav-w: 164px; }
}
/* No room for a third column: the test panel follows the editor, at the
   same width where every other page does the same. */
@media (min-width: 761px) and (max-width: 1080px) {
  .app.agent-workspace, .app.agent-workspace.inspecting { grid-template-columns: 64px minmax(0, 1fr); }
  .app.agent-workspace > .rail, .app.agent-workspace > .insp { grid-column: 2; grid-row: 2;
    position: static; height: auto; margin-left: calc(var(--subnav-w) + 20px); }
}

/* ── the sections: the dark column's second level ─────────────────────── */
@media (min-width: 761px) {
  .agent-workspace-layout { display: grid; grid-template-columns: var(--subnav-w) minmax(0, 1fr);
    align-items: start; min-width: 0; }
  :is(.agent-subnav, .admin-subnav) { position: sticky; top: 16px; height: var(--studio-h); padding: 16px 8px;
    background: var(--c-dark); color: var(--c-on-dark-2); border: 1px solid var(--c-dark-line);
    border-radius: 0 var(--ui-r-panel) var(--ui-r-panel) 0; }
  :is(.agent-subnav-label, .admin-subnav-label) { display: block; margin: 2px 10px 16px; font-size: 11px; font-weight: 600;
    line-height: 1; color: var(--c-on-dark-3); }
  :is(.agent-subnav, .admin-subnav) [role=tablist] { display: flex; flex-direction: column; gap: 1px; }
  :is(.agent-subnav, .admin-subnav) button { position: relative; display: flex; align-items: center; gap: 10px; width: 100%;
    min-height: 34px; margin: 0; padding: 7px 10px; border: 0; border-radius: var(--ui-r-control);
    background: transparent; color: var(--c-on-dark-2); font: 500 13px/1.2 var(--sans);
    letter-spacing: -0.006em; text-align: left; white-space: nowrap;
    transition: background-color 120ms ease, color 120ms ease; }
  :is(.agent-subnav, .admin-subnav) button > svg { width: 16px; height: 16px; flex: none; color: var(--c-on-dark-3); }
  :is(.agent-subnav, .admin-subnav) button:hover { background: var(--c-dark-sunk); color: var(--c-on-dark); }
  :is(.agent-subnav, .admin-subnav) button:active { transform: none; background: var(--c-dark-line); }
  :is(.agent-subnav, .admin-subnav) button[aria-selected=true] { background: var(--ui-dark-raise); color: var(--c-on-dark);
    font-weight: 600; box-shadow: var(--ui-dark-lift); }
  :is(.agent-subnav, .admin-subnav) button[aria-selected=true] > svg { color: var(--c-on-dark); }
  /* The rail's gold detail on the selected section (app.css · RAIL ICONS);
     only here, where the column is dark. */
  :is(.agent-subnav, .admin-subnav) button[aria-selected=true] > svg .ico-lit { color: var(--bill-gold); }
  :is(.agent-subnav, .admin-subnav) .tools-count { margin-left: auto; background: var(--ui-dark-fill); color: var(--c-on-dark-3); }
  :is(.agent-subnav, .admin-subnav) button[aria-selected=true] .tools-count { color: var(--c-on-dark-2); }
  .agent-subnav-docs { min-height: 34px; margin-top: 12px; padding: 7px 10px; }
  .agent-subnav-docs svg { width: 16px; height: 16px; }
}

/* ── the editor ────────────────────────────────────────────────────────── */
.agent-workspace-layout { min-width: 0; }
.agent-workspace-main { display: flex; flex-direction: column; height: var(--studio-h, auto);
  min-height: 520px; min-width: 0; overflow: hidden; padding: 0 16px 0 22px;
  container-type: inline-size; }
.agent-workspace-main > [role=tabpanel] { flex: 1; min-height: 0; margin: 0; padding: 20px 6px 32px 2px;
  overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; overflow-anchor: none; }
.agent-workspace-main > [hidden] { display: none !important; }
.agent-workspace-main > .agent-card { border: 0; border-radius: 0; background: none; box-shadow: none; }
.agent-workspace-main .agent-body { padding: 0; max-width: 980px; }

/* The header is a toolbar: the way back, what you are editing, its state,
   and the one action that commits it. */
.agent-detail-head { display: flex; align-items: center; gap: 8px; flex: none; flex-wrap: nowrap;
  margin: 0; padding: 2px 0 12px; border-bottom: 1px solid var(--ui-sep); }
.agent-back { display: inline-flex; align-items: center; gap: 5px; flex: none; height: 30px;
  margin-left: -4px; padding: 0 10px 0 7px; border-radius: var(--ui-r-control);
  color: var(--c-ink-2); font: 500 13px/1 var(--sans); text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease; }
.agent-back svg { width: 8px; height: 14px; }
.agent-back:hover { background: var(--ui-fill-2); color: var(--c-ink); text-decoration: none; }
.agent-detail-identity { flex: 1 1 auto; min-width: 0; }
.agent-detail-head input.agent-detail-name { display: block; width: 100%; max-width: 560px; margin: 0;
  padding: 3px 8px; border: 1px solid transparent; border-radius: var(--ui-r-control);
  background: transparent; color: var(--c-ink); font: 650 21px/1.25 var(--sans);
  letter-spacing: -0.022em; text-overflow: ellipsis;
  transition: background-color 120ms ease, box-shadow 120ms ease; }
.agent-detail-head input.agent-detail-name:hover { background: var(--ui-fill-2); border-color: transparent; }
.agent-detail-head input.agent-detail-name:focus { outline: none; background: var(--c-surface);
  border-color: var(--ui-edge); box-shadow: var(--ui-ring); }
.agent-detail-head .agent-acts { display: flex; align-items: center; gap: 10px; flex: none;
  flex-wrap: nowrap; width: auto; margin-left: auto; }
.agent-detail-head .agent-status { font-size: 12px; color: var(--c-ink-3); white-space: nowrap; }
.agent-detail-head .agent-status:empty { display: none; }
/* State is a capsule with a lamp: green for published, amber for a draft. */
.workspace-state { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px;
  border-radius: 999px; background: var(--ui-fill-2); color: var(--c-ink-2);
  font: 500 12px/1 var(--sans); white-space: nowrap; font-variant-numeric: tabular-nums; }
.workspace-state:empty { display: none; }
.workspace-state::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--c-ink-4); }
.workspace-state[data-state=published]::before { width: 5px; height: 5px; background: none; border: 1.5px solid var(--c-ink-2); }
.workspace-state[data-state=draft] { color: var(--c-open-ink); background: var(--c-open-bg); }
.workspace-state[data-state=draft]::before { background: var(--c-open); }
.agent-detail-head .agent-acts #save { min-width: 0; min-height: 30px; margin: 0; padding: 6px 14px;
  border-radius: var(--ui-r-control); font: 600 12.5px/1 var(--sans); white-space: nowrap; }
/* Nothing to save is a confirmation, not a dead button. */
.agent-detail-head .agent-acts #save.ghost:disabled { opacity: 1; padding: 6px 4px; border-color: transparent;
  background: transparent; color: var(--c-ink-3); font-weight: 500; }
.agent-detail-head .agent-acts #save.ghost:disabled::before { content: '\2713'; margin-right: 5px; }

/* ── Prompt ────────────────────────────────────────────────────────────── */
/* The counts are on the section control; what stays here is the one thing
   worth interrupting for — a variable the prompt uses and nothing supplies. */
.prompt-context { margin: 0; }
.prompt-context-head { display: none; }
.workspace-missing { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 9px 12px; border-radius: 10px;
  background: var(--c-open-bg); color: var(--c-open-ink); font-size: 12.5px; }
.workspace-missing .workspace-chip { color: var(--c-open-ink); background: var(--c-surface);
  border: 0; box-shadow: 0 0 0 1px var(--c-open-line); padding: 4px 7px; border-radius: 6px;
  font: 500 12px/1 var(--mono); }
.prompt-compose { display: flex; flex-direction: column; gap: 14px; }
.prompt-compose .editor { margin: 0; overflow: hidden; background: var(--c-surface); border: 0;
  border-radius: var(--ui-r-card); box-shadow: var(--ui-card); transition: box-shadow 160ms ease; }
.prompt-compose .editor:focus-within { box-shadow: var(--ui-card), var(--ui-ring); }
.prompt-compose .editor-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin: 0; padding: 14px 18px 0; background: transparent; border: 0; }
.prompt-compose .editor-head label { font: 600 13px/1.4 var(--sans); letter-spacing: -0.006em;
  text-transform: none; color: var(--c-ink); }
.prompt-compose .charcount { font-size: 11.5px; color: var(--c-ink-3); }
.prompt-compose textarea.editor-body { display: block; width: 100%; max-height: none !important;
  margin: 0; padding: 8px 18px 16px; border: 0 !important; border-radius: 0; box-shadow: none;
  background: transparent; color: var(--c-ink); font: 400 15px/1.65 var(--sans);
  letter-spacing: -0.003em; resize: vertical; outline: none; }
.prompt-compose #sysprompt { height: clamp(260px, 42dvh, 620px) !important; min-height: 200px; }
.prompt-compose #firstmsg { height: 84px !important; min-height: 64px; }
.prompt-compose #endmsg { height: 72px !important; min-height: 52px; }
/* A flow node's words use the same editor (flow.js). */
.flow-node-compose { margin: 4px 0 18px; }
.flow-node-compose #flow-node-prompt { height: clamp(220px, 34dvh, 480px) !important; min-height: 160px; }
.flow-node-compose #flow-node-greeting { height: 84px !important; min-height: 64px; }
/* The agent's tools a node offers (flow.js): one row per tool, ticked = offered. */
.flow-node-tools { display: grid; gap: 6px; margin: 0 0 18px; }
.flow-node-tool { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border-radius: 10px;
  background: var(--c-surface); box-shadow: var(--ui-card); cursor: pointer;
  text-transform: none; letter-spacing: 0; font-weight: 400; }
.flow-node-tool input { margin: 3px 0 0; accent-color: var(--c-ink); }
.flow-node-tool span { display: grid; gap: 2px; min-width: 0; }
.flow-node-tool code { font: 500 12.5px/1.4 var(--mono); color: #3f6296; }
.flow-node-tool small { font-size: 12px; line-height: 1.45; color: var(--c-ink-3); overflow-wrap: anywhere; }
.flow-node-tool.off code { color: var(--c-ink-3); }
.flow-node-tool.off small { color: var(--c-open-ink); }
.flow-tools-empty { margin: 0 0 8px; font-size: 12.5px; color: var(--c-ink-3); white-space: normal; }
.flow-transition-name { margin-left: 6px; padding: 2px 6px; border-radius: 5px; background: #e6edfa;
  color: #3f6296; font: 500 11px/1.4 var(--mono); text-transform: none; letter-spacing: 0; }
.context-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  min-height: 38px; padding: 5px 10px 5px 18px; border-top: 1px solid var(--ui-sep);
  background: transparent; font-size: 12px; color: var(--c-ink-3); }
.context-footer kbd { display: inline-block; min-width: 18px; margin: 0 2px; padding: 3px 5px;
  border-radius: 5px; background: var(--c-surface); color: var(--c-ink-2); text-align: center;
  font: 600 11px/1 var(--sans); box-shadow: 0 0 0 1px var(--ui-edge), 0 1px 0 var(--ui-edge); }
.variable-insert { display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-height: 26px; margin: 0; padding: 4px 9px; border: 0; border-radius: 7px;
  background: transparent; color: var(--c-ink-2); font: 500 12px/1 var(--sans); white-space: nowrap; }
.variable-insert:hover { background: var(--ui-fill-2); color: var(--c-ink); }
.variable-insert:active { transform: none; background: var(--ui-fill-3); }
/* References stay visible while the native textarea owns editing and undo. */
.prompt-text-surface { position: relative; isolation: isolate; overflow: hidden; }
.prompt-text-surface textarea { position: relative; z-index: 1; }
.prompt-references { position: absolute; inset: 0; overflow: hidden; pointer-events: none; color: transparent; z-index: 0; }
.prompt-references > div { white-space: pre-wrap; overflow-wrap: break-word; border: 0; color: transparent; }
.prompt-reference { border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.prompt-reference-variable { background: #e9efe0; box-shadow: 0 0 0 1px #d4ddc3; }
.prompt-reference-tool, .prompt-reference-result { background: #e6edfa; box-shadow: 0 0 0 1px #c6d6f1; }
/* A variable the next call needs a test value for (agent-bubbles.js). Amber,
 * not red: unfinished, not broken. */
.prompt-reference-variable.prompt-reference-missing { background: var(--c-open-bg); box-shadow: 0 0 0 1px var(--c-open-line); }

/* The bubble a refused call opens on a missing variable: a popover pinned
 * under the token, arrow pointing at it. It lives in #prompt-editor rather than
 * the text surface, which clips. */
#prompt-editor, .flow-node-detail { position: relative; }
.flow-node-detail .var-bubble p { white-space: normal; line-height: 1.45; }
.var-bubble { position: absolute; z-index: 20; width: 300px; box-sizing: border-box; padding: 12px 12px 10px;
  background: var(--c-surface); border-radius: var(--ui-r-card); box-shadow: var(--ui-float), 0 0 0 1px var(--c-open-line);
  animation: vb-in 160ms ease-out; }
.var-bubble::before { content: ""; position: absolute; top: -6px; left: var(--arrow, 22px); width: 10px; height: 10px;
  background: var(--c-surface); transform: rotate(45deg); box-shadow: -1px -1px 0 0 var(--c-open-line); }
@keyframes vb-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .var-bubble { animation: none; } }
.vb-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.vb-head code { font: 600 12.5px/1.3 var(--mono); color: var(--c-ink); }
.vb-tag { margin-left: auto; padding: 2px 7px; border-radius: 999px; font-size: 11px; font-weight: 600;
  color: var(--c-open-ink); background: var(--c-open-bg); white-space: nowrap; }
.var-bubble[aria-label*=" tool"] .vb-tag { color: #2f4f86; background: #e6edfa; }
.vb-scope { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--ui-sep); font-size: 11.5px; line-height: 1.45; color: var(--c-ink-3); }
.vb-result { margin-top: 8px; }
.vb-result:empty { display: none; }
.vb-value { margin: 0; padding: 8px 10px; border-radius: var(--ui-r-control); background: var(--ui-fill-2);
  font: 500 14px/1.4 var(--sans); color: var(--c-ink); overflow-wrap: anywhere; }
.vb-fields { margin-top: 6px; font: 11.5px/1.6 var(--mono); color: var(--c-ink-2); overflow-wrap: anywhere; }
.vb-fields span { color: var(--c-ink-3); }
.vb-x { width: 24px; height: 24px; padding: 0; margin: -4px -4px -4px 0; border: 0; background: none; color: var(--c-ink-3);
  font-size: 16px; line-height: 1; border-radius: 6px; }
.vb-x:hover { background: var(--ui-fill-2); color: var(--c-ink); }
.var-bubble .vb-input { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--c-line-strong);
  border-radius: var(--ui-r-control); background: var(--c-surface); color: var(--c-ink); font: 400 14px/1.4 var(--sans); }
.var-bubble .vb-input:focus { outline: none; border-color: rgba(27, 26, 22, 0.34); box-shadow: var(--ui-ring); }
.var-bubble .vb-input[aria-invalid="true"] { border-color: var(--c-alarm-line); }
.vb-help { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--c-ink-3); }
.vb-help:empty, .vb-error:empty { display: none; }
.vb-error { margin: 6px 0 0; font-size: 12px; color: var(--c-alarm-ink); }
.vb-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.vb-saved { font-size: 11.5px; color: var(--c-ink-3); }
.vb-next { padding: 7px 12px; font-size: 12.5px; }
@media (max-width: 760px) { .var-bubble { width: min(300px, calc(100% - 8px)); } .var-bubble .vb-input { font-size: 16px; } }
.context-legend { display: flex; gap: 6px; align-items: center; }
.context-legend span { padding: 2px 7px; border-radius: 999px; font-weight: 500; }
.context-legend .legend-variable { background: #e9efe0; color: #56643b; }
.context-legend .legend-tool { background: #e6edfa; color: #3f6296; }

/* ── Variables · After-call results · Publish ──────────────────────────── */
.workspace-panel > * { max-width: 980px; }
.workspace-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 0 18px; }
.workspace-heading h2 { margin: 0 0 4px; color: var(--c-ink); font: 650 20px/1.25 var(--sans); letter-spacing: -0.02em; }
.workspace-heading > span, .workspace-heading > div > span, .workspace-heading p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--c-ink-3); }
.workspace-heading > .workspace-kicker { display: none; }
.workspace-heading > .workspace-check { font-size: 13px; color: var(--c-ink-2); gap: 9px; }
.workspace-card { margin: 0 0 18px; padding: 16px 18px; background: var(--c-surface); border: 0;
  border-radius: var(--ui-r-card); box-shadow: var(--ui-card); }
.workspace-card > header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 12px; }
.workspace-card h3 { margin: 0; font: 600 14px/1.35 var(--sans); letter-spacing: -0.008em; color: var(--c-ink); }
.workspace-card header p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--c-ink-3); }
.schema-columns, .schema-row { display: grid; grid-template-columns: minmax(110px, 1.2fr) 120px minmax(110px, 1.6fr) 64px 40px; gap: 8px; align-items: center; }
.schema-columns { padding: 0 8px 8px; font-size: 11.5px; color: var(--c-ink-3); }
.schema-columns > span:nth-child(4) { text-align: center; }
.schema-field { position: relative; padding: 6px 8px; border-top: 1px solid var(--ui-sep); background: transparent; }
.schema-row > .workspace-field { margin: 0; gap: 0; font-size: 0; line-height: 0; }
.schema-row > .workspace-field input, .schema-row > .workspace-field select { padding: 7px 8px; border-color: transparent;
  background: transparent; border-radius: 7px; font-size: 13px; line-height: 1.4; }
.schema-row > .workspace-field input:hover, .schema-row > .workspace-field select:hover { background: var(--ui-fill-2); border-color: transparent; }
.schema-row > .workspace-field input:focus, .schema-row > .workspace-field select:focus { outline: none; background: var(--c-surface);
  border-color: var(--ui-edge); box-shadow: var(--ui-ring); }
.schema-row > .workspace-check { justify-content: center; font-size: 0; }
.schema-actions { display: flex; justify-content: flex-end; align-items: center; gap: 2px; }
.workspace-remove { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px; background: transparent;
  color: var(--c-ink-3); font-size: 17px; font-weight: 400; }
.workspace-remove:hover { background: var(--c-alarm-bg); color: var(--c-alarm-ink); }
.schema-field-options { position: relative; }
.schema-field-options > summary { min-width: 24px; padding: 4px 0; list-style: none; cursor: pointer; color: var(--c-ink-3); font-size: 0; }
.schema-field-options > summary::-webkit-details-marker { display: none; }
.schema-field-options > summary::after { content: '•••'; font-size: 10px; letter-spacing: 1px; }
.schema-field-options[open] > .workspace-check { position: absolute; right: 0; top: 28px; z-index: 5; width: 190px; padding: 12px;
  background: var(--c-surface); border-radius: 10px; box-shadow: var(--ui-float); }
.workspace-field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; min-width: 0; color: var(--c-ink-2);
  font: 500 12px/1.4 var(--sans); letter-spacing: 0; text-transform: none; }
.workspace-field input, .workspace-field textarea, .workspace-field select { width: 100%; min-width: 0; box-sizing: border-box;
  padding: 8px 11px; border: 1px solid var(--ui-edge); border-radius: var(--ui-r-control); background: var(--c-surface);
  color: var(--c-ink); font: 400 13.5px/1.45 var(--sans); letter-spacing: 0; text-transform: none; }
.workspace-field textarea { min-height: 64px; resize: vertical; }
.workspace-field input:focus, .workspace-field textarea:focus, .workspace-field select:focus { outline: none;
  border-color: rgba(27, 26, 22, 0.34); box-shadow: var(--ui-ring); }
.workspace-field input::placeholder, .workspace-field textarea::placeholder { color: var(--c-ink-3); font-weight: 400; }
.workspace-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 400; letter-spacing: 0;
  text-transform: none; white-space: nowrap; color: var(--c-ink-2); }
.workspace-check input { width: 15px; height: 15px; flex: none; accent-color: var(--c-ink); }
.workspace-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.workspace-empty { margin: 0; padding: 14px 8px; font-size: 13px; line-height: 1.55; color: var(--c-ink-3); }
.workspace-advanced { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ui-sep); }
.workspace-advanced > summary { cursor: pointer; font-size: 12.5px; color: var(--c-ink-3); }
.workspace-advanced textarea { width: 100%; box-sizing: border-box; min-height: 120px; margin-top: 10px;
  border: 1px solid var(--ui-edge); border-radius: var(--ui-r-control); font: 12px/1.7 var(--mono); }
.workspace-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 10px; }
.workspace-chip { max-width: 100%; padding: 4px 9px; border: 0; border-radius: 999px; background: var(--ui-fill-2);
  color: var(--c-ink-2); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
button.workspace-chip { margin: 0; }
button.workspace-chip:hover { background: var(--ui-fill-3); color: var(--c-ink); }
code.workspace-chip { font: 500 11.5px/1.4 var(--mono); }
.tool-variable-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--ui-sep); }
.tool-variable-row strong { font-size: 13px; font-weight: 600; }
.tool-variable-row .tools-help { margin: 2px 0; font-size: 12px; }
.tool-variable-row .tools-help:empty { display: none; }
.tool-variable-row > button { flex: none; }
.tool-variable-row .workspace-chips { margin: 6px 0 0; }
.sample-details { padding: 14px 18px; }
.sample-details > summary { cursor: pointer; font: 600 14px/1.35 var(--sans); }
.sample-details > summary > span { margin-left: 8px; font-size: 12.5px; font-weight: 400; color: var(--c-ink-3); }
#sample-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; margin-top: 14px; }
/* Test call variables. The name and its "required" tag share the first row;
 * the field spans the card column under them. Amber, not red, for a missing
 * value: it is unfinished, not broken. */
.sample-details > summary > span[data-tone="open"] { color: var(--c-open-ink); font-weight: 600; }
.sample-details > summary > span[data-tone="bad"] { color: var(--c-alarm-ink); font-weight: 600; }
.sample-help { margin: 8px 0 0; font-size: 12.5px; color: var(--c-ink-3); }
#sample-inputs .workspace-field { display: grid; grid-template-columns: minmax(0, auto) 1fr; align-items: baseline; gap: 6px 8px; }
#sample-inputs .workspace-field > input, #sample-inputs .workspace-field > select { grid-column: 1 / -1; }
.sample-req { font-size: 11px; font-weight: 500; color: var(--c-ink-3); }
.needs-value .sample-req { color: var(--c-open-ink); font-weight: 600; }
#sample-inputs .needs-value > input, #sample-inputs .needs-value > select { border-color: var(--c-open-line); background: var(--c-open-bg); }
/* Walked here by a refused call: the missing fields pulse twice, then stay amber. */
#sample-inputs .walk > input, #sample-inputs .walk > select { animation: sample-walk 900ms ease-out 2; }
@keyframes sample-walk { 0% { box-shadow: 0 0 0 0 var(--c-open-line); } 100% { box-shadow: 0 0 0 7px rgba(138, 89, 0, 0); } }
@media (prefers-reduced-motion: reduce) { #sample-inputs .walk > input, #sample-inputs .walk > select { animation: none; } }
.sample-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.sample-actions button[hidden] { display: none; }
.workspace-preview { margin: 12px 0 0; max-height: 300px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.7 var(--mono); }
.workspace-preview:empty { display: none; }
.analysis-off { opacity: .6; }
.results-next { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 4px 2px; font-size: 13px; color: var(--c-ink-3); }
.workspace-switch { display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; padding: 14px; border-radius: 10px;
  background: var(--ui-fill-2); text-transform: none; letter-spacing: 0; }
.workspace-switch input { margin-top: 1px; }
.workspace-switch strong { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--c-ink); }
.workspace-switch small { display: block; font-size: 12.5px; font-weight: 400; line-height: 1.55; color: var(--c-ink-3); }
.release-card { padding: 18px; }
.release-card h3 { margin-top: 10px; font-size: 16px; }
.release-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.release-check { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 2px; border: 0; border-bottom: 1px solid var(--ui-sep);
  border-radius: 0; background: none; color: var(--c-ink); font-size: 13px; text-align: left; }
.release-check:hover { background: none; color: var(--c-ink); }
.release-check:active { transform: none; }
.release-check strong { min-width: 96px; font-weight: 600; }
.release-check span { color: var(--c-ink-3); }
.release-check span:last-child { margin-left: auto; color: var(--c-ink-4); }
.workspace-callout { padding: 10px 12px; border-radius: 10px; background: var(--ui-fill-2); color: var(--c-ink-2); font-size: 12.5px; line-height: 1.55; }
.release-history-controls { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; }
.release-history-controls .workspace-field { max-width: 260px; margin: 0; }
.release-history-controls [hidden] { display: none; }
.revision-prompt { max-height: 160px; overflow: auto; white-space: pre-wrap; font-size: 13px; line-height: 1.65; }
.workspace-danger { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 2px; font-size: 13px; color: var(--c-ink-3); }
.workspace-danger strong { color: var(--c-ink); }
.workspace-danger p { margin: 4px 0 0; font-size: 12.5px; }

/* ── Tools ─────────────────────────────────────────────────────────────── */
#agent-tools-panel:not([hidden]) { display: flex; flex-direction: column; overflow: hidden; padding: 16px 0 0; }
.tools-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none; flex-wrap: wrap; }
.tools-phase-intro { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex: none;
  margin: 10px 2px 14px; font-size: 12.5px; color: var(--c-ink-3); }
.tools-workbench { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; flex: 1; min-height: 0; padding: 0 2px 16px; }
.tools-list { overflow: auto; min-height: 0; padding: 2px 2px 12px; }
.tools-workbench.is-empty { display: block; }
.tools-workbench.is-empty .tools-list { max-height: none; overflow: visible; }
.tools-workbench.is-empty .tools-empty { width: 100%; box-sizing: border-box; }
.tools-editor-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden;
  background: var(--c-surface); border-radius: var(--ui-r-card); box-shadow: var(--ui-card); }
.tools-editor-pane[hidden] { display: none; }
.tools-editor-pane .tool-editor { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 16px 22px 0; border: 0; }
/* The tool's name is the editor's title, editable in place like the agent's. */
.tools-editor-pane .tool-editor > .tool-field:first-child { flex: none; gap: 2px; margin: 0 0 8px; }
.tools-editor-pane .tool-editor > .tool-field:first-child > .tool-label { font-size: 11.5px; color: var(--c-ink-3); }
.tools-editor-pane .tool-editor > .tool-field:first-child > input { margin-left: -8px; width: calc(100% + 8px); padding: 3px 8px;
  border-color: transparent; background: transparent; font: 650 18px/1.3 var(--sans); letter-spacing: -0.016em; }
.tools-editor-pane .tool-editor > .tool-field:first-child > input:hover { background: var(--ui-fill-2); }
.tools-editor-pane .tool-editor > .tool-field:first-child > input:focus { background: var(--c-surface); border-color: var(--ui-edge); }
.tools-editor-pane .tool-editor > .tool-field:first-child > input:disabled { background: transparent; color: var(--c-ink); }
.tools-editor-pane .tool-editor-tabs { flex: none; margin: 0 -22px; padding: 0 22px; overflow-x: auto; scrollbar-width: none; }
.tools-editor-pane .tool-editor-content { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain;
  scrollbar-gutter: stable; overflow-anchor: none; padding: 20px 6px 24px 0; }
.tools-editor-pane .tool-editor-foot { flex: none; margin: 0 -22px; padding: 10px 22px; }
.tools-editor-pane .tool-pair { align-items: start; }
.tools-editor-pane .tool-pair > .tool-icon-button { margin-top: 24px; }
.tools-editor-pane .tool-editor-empty { padding: 28px 24px; color: var(--c-ink-3); font-size: 13px; line-height: 1.6; }
.tool-editor-empty h3 { margin: 0 0 6px; font-size: 15px; color: var(--c-ink); }
/* Pop-up buttons, the Mac way: a raised face with the double chevron. */
.agent-workspace-main select { appearance: none; -webkit-appearance: none; padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12'%3E%3Cpath d='M1 4.5 4 1.5l3 3M1 7.5l3 3 3-3' fill='none' stroke='%236f6c65' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 8px 12px; }
.tools-toolbar > .tool-field > select { width: auto; min-height: 30px; padding: 5px 28px 5px 11px; border: 0;
  background-color: var(--c-surface); box-shadow: var(--ui-raise); font: 500 12.5px/1 var(--sans); color: var(--c-ink); }
.tools-toolbar > .tool-field > select:hover { background-color: var(--c-paper); }

/* ── the context menu ── a popover at the caret, used by prompts and tools. */
.context-menu { position: fixed; z-index: 1500; display: flex; flex-direction: column; width: min(320px, calc(100vw - 16px));
  max-height: 360px; overflow: hidden; border-radius: 12px; background: var(--c-surface); color: var(--c-ink);
  font-family: var(--sans); box-shadow: var(--ui-float); }
.context-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--ui-sep); }
.context-menu-head > span { font-size: 11px; color: var(--c-ink-3); }
.context-back { padding: 0; border: 0; background: none; color: var(--c-ink-2); font: 500 12px/1.5 var(--sans); }
.context-back:disabled { opacity: 1; cursor: default; }
.context-options { min-height: 0; max-height: 260px; padding: 5px; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.context-group { padding: 9px 8px 5px; font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--c-ink-3); }
.context-option { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; margin: 0; padding: 7px 8px;
  border: 0; border-radius: 7px; background: none; color: var(--c-ink); font-size: 13px; text-align: left; }
.context-option[aria-selected=true], .context-option:hover { background: var(--ui-fill-2); }
.context-option:active { transform: none; }
.context-icon { flex: none; width: 18px; color: var(--c-ink-3); font: 12px/1.4 var(--mono); }
.context-option-label { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.context-kind { padding: 2px 6px; border-radius: 999px; background: var(--ui-fill-2); color: var(--c-ink-3); font-size: 10.5px; white-space: nowrap; }
.context-menu-foot { padding: 7px 12px; border-top: 1px solid var(--ui-sep); font-size: 11px; line-height: 1.5; color: var(--c-ink-3); }
.context-empty { padding: 12px; font-size: 12.5px; line-height: 1.55; color: var(--c-ink-3); }

/* ── narrower windows ──────────────────────────────────────────────────── */
@media (max-width: 1279px) {
  .tools-workbench { grid-template-columns: 200px minmax(0, 1fr); gap: 12px; }
  .schema-columns, .schema-row { grid-template-columns: minmax(90px, 1fr) 100px minmax(90px, 1.2fr) 56px 36px; gap: 6px; }
  .tool-execution { grid-template-columns: 1fr; }
}
@media (min-width: 761px) and (max-width: 1080px) {
  .agent-workspace-main { height: auto; min-height: 0; overflow: visible; }
  .agent-workspace-main > [role=tabpanel] { overflow: visible; }
  #agent-tools-panel:not([hidden]) { overflow: visible; }
  .tools-editor-pane { height: 640px; }
}
/* A narrow editor (a smaller window with the full-width test panel beside
   it) stacks the tool list over the editor instead of squeezing both. */
@container (max-width: 660px) {
  .tools-workbench { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .tools-list { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .tools-list .tool-card { flex: 0 0 180px; }
  .schema-row, .schema-columns { grid-template-columns: minmax(90px, 1fr) 96px 36px 32px; }
  .schema-row > .workspace-field:nth-child(3) { grid-column: 1 / 3; grid-row: 2; }
  .schema-columns > span:nth-child(3) { display: none; }
  .schema-row > .workspace-check { grid-column: 3; grid-row: 1; }
  .schema-actions { grid-column: 4; grid-row: 1; }
  .workspace-two-col, .release-checklist { grid-template-columns: 1fr; }
}

/* ── phone ─────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  /* The phone shell stays what it is everywhere else — title bar, one
     scrolling view, tab bar — and the test panel docks above the tabs. */
  .agent-workspace > .nav { display: none; }
  .agent-workspace #content { padding: 0 12px 236px; }
  .agent-workspace-main > .agent-detail-head { position: sticky; top: 0; z-index: 12; padding: 10px 0;
    background: var(--c-paper); }
  .agent-back span { display: none; }
  .agent-back { padding: 0 8px; }
  .agent-detail-head input.agent-detail-name { font-size: 17px; }
  .agent-detail-head .agent-status { display: none; }
  .agent-detail-head .workspace-state { padding: 5px 8px; font-size: 11px; }
  /* One level of navigation fits a phone, so the sections become a
     segmented control under the agent's name. The editor's wrapper steps out
     of the way (display: contents) so the control can sit between the header
     and the section it switches. */
  .agent-workspace-layout { display: flex; flex-direction: column; }
  .agent-workspace-main { display: contents; }
  .agent-workspace-main > .agent-detail-head { order: 1; }
  .agent-subnav { order: 2; display: flex; align-items: center; min-width: 0; padding: 10px 0; }
  .agent-workspace-main > [role=tabpanel] { order: 3; }
  .agent-subnav-label { display: none; }
  .agent-subnav-docs { display: none; }
  .agent-subnav [role=tablist] { display: inline-flex; gap: 0; width: 100%; padding: 2px;
    border-radius: 9px; background: var(--ui-fill); overflow-x: auto; scrollbar-width: none; }
  .agent-subnav [role=tablist]::-webkit-scrollbar { display: none; }
  .agent-subnav button { display: inline-flex; align-items: center; gap: 6px; flex: none;
    min-height: 30px; margin: 0; padding: 5px 10px; border: 0; border-radius: 7px;
    background: transparent; color: var(--c-ink-2); font: 500 12.5px/1 var(--sans); white-space: nowrap; }
  .agent-subnav button > svg { display: none; }
  .agent-subnav button:active { transform: none; }
  .agent-subnav button[aria-selected=true] { background: var(--c-surface); color: var(--c-ink);
    box-shadow: var(--ui-raise); }
  .agent-workspace-main > [role=tabpanel] { overflow: visible; padding: 14px 0 0; scrollbar-gutter: auto; }
  .prompt-compose #sysprompt { height: 300px !important; }
  .prompt-compose #firstmsg { height: 84px !important; }
  .flow-node-compose #flow-node-prompt { height: 300px !important; }
  /* 16px or iOS zooms the page the moment a field takes focus. */
  .prompt-compose textarea.editor-body, .workspace-field input, .workspace-field textarea,
  .workspace-field select, .agent-detail-head input.agent-detail-name { font-size: 16px; }
  .prompt-compose .editor-head { padding: 12px 14px 0; }
  .prompt-compose textarea.editor-body { padding: 6px 14px 14px; }
  .context-footer { padding-left: 14px; font-size: 11.5px; }
  .workspace-heading { flex-wrap: wrap; }
  .workspace-heading > span { display: none; }
  .workspace-heading h2 { font-size: 18px; }
  .workspace-card { padding: 14px; }
  .workspace-two-col, .release-checklist, #sample-inputs { grid-template-columns: 1fr; }
  .schema-columns, .schema-row { grid-template-columns: minmax(85px, 1fr) 96px 36px 30px; gap: 5px; }
  .schema-row > .workspace-field:nth-child(3) { grid-column: 1 / 3; grid-row: 2; }
  .schema-columns > span:nth-child(3) { display: none; }
  .schema-row > .workspace-check { grid-column: 3; grid-row: 1; }
  .schema-actions { grid-column: 4; grid-row: 1; }
  .schema-field { padding: 6px 2px; }
  .tool-variable-row { flex-wrap: wrap; }
  #agent-tools-panel:not([hidden]) { overflow: visible; padding-top: 14px; }
  .tools-topbar { gap: 8px; }
  .tools-phases { width: 100%; }
  .tools-phase-intro { margin: 8px 2px 10px; font-size: 12px; }
  .tools-workbench { display: flex; flex-direction: column; gap: 10px; padding: 0; }
  .tools-list { flex-direction: row; overflow-x: auto; padding: 2px 2px 6px; }
  .tools-list .tool-card { flex: 0 0 200px; }
  .tools-list .tool-check, .tools-list .tool-badge { display: none; }
  .tools-editor-pane { height: 520px; flex: none; }
  .tools-editor-pane .tool-editor { padding: 12px 14px 0; }
  .tools-editor-pane .tool-editor-tabs { margin: 0 -14px; padding: 0 14px; }
  .tools-editor-pane .tool-editor-foot { margin: 0 -14px; padding: 10px 14px; }
  /* The test panel is a sheet docked above the tab bar. */
  .app.agent-workspace > .rail { position: fixed; display: flex; top: auto !important; bottom: var(--tabbar-h);
    left: 0; right: 0; height: 196px; width: auto; margin: 0; padding: 10px 12px 12px; z-index: 35; overflow: auto;
    background: var(--c-paper); border: 0; border-radius: 16px 16px 0 0;
    box-shadow: 0 0 0 1px var(--ui-sep), 0 -8px 30px rgba(27, 26, 22, 0.08);
    transform: none; visibility: visible; opacity: 1; pointer-events: auto; }
  .agent-workspace .rail-head { display: flex; justify-content: space-between; align-items: center; min-height: 20px; padding: 0 0 8px; }
  .agent-workspace .rail-head h2 { font-size: 13px; }
  .agent-workspace .rail #testctx { font-size: 10px; }
  .agent-workspace .rail .rail-card { min-width: 0; margin-bottom: 8px; padding: 10px; border-radius: 12px; }
  .agent-workspace .rail #setupbody { display: block; min-width: 0; }
  .agent-workspace .rail #setupbody .rail-field { padding: 5px 0; }
  .agent-workspace .rail #setupbody select { font-size: 16px; }
  .agent-workspace .rail #btn { padding: 10px; font-size: 13px; }
  .agent-workspace .rail .statusline { font-size: 11px; }
  .agent-workspace .rail .statusline:empty { display: none; }
  .agent-workspace .rail .pane { min-height: 140px; }
  .agent-workspace .dock, .agent-workspace #setupbtn { display: none !important; }
  .agent-workspace #content[inert] { pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .context-menu, .agent-subnav button, .prompt-compose .editor { transition: none; }
}

/* Behavior → Interruptions: four choices on one row, two on a narrow pane. The
 * cards are the Tools editor's execution choices; only the count differs. */
.behavior-choices { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 4px 0 0; }
@media (max-width: 1400px) { .behavior-choices { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .behavior-choices { grid-template-columns: 1fr; } }

/* Behavior → Interruptions: Adaptive leads. Switched off, the fixed rules open
 * under it with a short ease-out on height and opacity (grid rows 0fr → 1fr,
 * so the height follows whatever the content is). With reduced motion they
 * simply appear. Closing is instant: the switch already says what happened. */
.behavior-turns .workspace-switch { margin-top: 4px; }
.behavior-fixed { display: grid; grid-template-rows: 1fr; }
.behavior-fixed[hidden] { display: none; }
.behavior-fixed-body { min-width: 0; min-height: 0; }
.behavior-fixed-intro { margin: 18px 0 10px; font-size: 12.5px; line-height: 1.5; color: var(--c-ink-3); }
.behavior-fixed-intro strong { display: block; margin-bottom: 2px; font-size: 13px; font-weight: 600; color: var(--c-ink); }
@keyframes behavior-reveal { from { grid-template-rows: 0fr; opacity: 0; } to { grid-template-rows: 1fr; opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .behavior-fixed.is-revealing { animation: behavior-reveal 240ms var(--ease-out); }
  .behavior-fixed.is-revealing > .behavior-fixed-body { overflow: hidden; }
}

/* Pass-through words: the customer's words as chips inside one field, the
 * text box after the last chip. Each chip's × is a real button (Tab reaches
 * it; Enter, Space, Backspace or Delete removes it). */
.pass-words { margin-top: 18px; }
.pass-words-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pass-words-head label { font-size: 13px; font-weight: 600; color: var(--c-ink); text-transform: none; letter-spacing: 0; }
.pass-words-count { font-size: 12px; color: var(--c-ink-3); font-variant-numeric: tabular-nums; }
.pass-words .pass-words-help { margin: 4px 0 8px; }
.pass-field { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 40px; padding: 5px 6px;
  box-sizing: border-box; border: 1px solid var(--ui-edge); border-radius: var(--ui-r-control);
  background: var(--c-surface); cursor: text; transition: border-color 120ms ease, box-shadow 120ms ease; }
.pass-field:hover { border-color: var(--c-ink-4); }
.pass-field:focus-within { border-color: var(--c-ink-4); box-shadow: var(--ui-ring); }
.pass-field:has(.pass-input:disabled) { background: var(--ui-fill-2); border-color: var(--ui-edge); cursor: default; }
.pass-chips { display: contents; margin: 0; padding: 0; list-style: none; }
.pass-chips[hidden] { display: none; }
.pass-chip { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; min-height: 28px; padding: 0 3px 0 10px;
  box-sizing: border-box; border-radius: 999px; background: var(--ui-fill-2); color: var(--c-ink);
  font-size: 12.5px; line-height: 1.3; }
.pass-chip > span { min-width: 0; overflow-wrap: anywhere; }
.pass-chip.is-new { animation: pass-chip-in 180ms var(--ease-out); }
@keyframes pass-chip-in { from { opacity: 0; transform: scale(0.9); } }
.pass-chip-x { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; margin: 0; padding: 0;
  border: 0; border-radius: 999px; background: none; color: var(--c-ink-3); }
.pass-chip-x svg { width: 11px; height: 11px; }
.pass-chip-x:hover { background: var(--ui-fill-3); color: var(--c-ink); }
.pass-chip-x:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 1px; }
.pass-chip-x:disabled { display: none; }
.pass-field .pass-input { flex: 1 1 160px; min-width: 120px; padding: 4px 6px; border: 0; border-radius: 0;
  background: transparent; color: var(--c-ink); font: 400 13.5px/1.45 var(--sans); }
.pass-field .pass-input:focus-visible { outline: none; }
.pass-field .pass-input:disabled { cursor: default; }
.pass-words-limits { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--c-ink-3); }
.pass-words-limits[hidden] { display: none; }
.pass-words-note { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--c-ink-2); }
.pass-words-note:empty { display: none; }
.pass-words-note[data-tone="bad"] { color: var(--c-alarm-ink); }
.pass-words-note[data-tone="quiet"] { color: var(--c-ink-3); }
@media (prefers-reduced-motion: reduce) { .pass-field { transition: none; } .pass-chip.is-new { animation: none; } }

/* Behavior → Language: the primary is a select, the secondaries a row of
 * toggles in the workspace chip style. The primary's own toggle is disabled —
 * a language cannot be its own fallback. */
.language-choices { border: 0; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.language-choices legend { margin-bottom: 8px; font-size: 12px; font-weight: 500; color: var(--c-ink-2); }
.language-choices legend small { font-weight: 400; color: var(--c-ink-3); }
.language-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--ui-edge);
  border-radius: 999px; font-size: 12.5px; color: var(--c-ink-2); cursor: pointer; text-transform: none; letter-spacing: normal;
  transition: border-color 120ms ease, box-shadow 120ms ease; }
.language-chip input { width: 13px; height: 13px; margin: 0; accent-color: var(--c-ink); }
.language-chip:has(:checked) { border-color: var(--c-ink); box-shadow: 0 0 0 1px var(--c-ink); color: var(--c-ink); }
.language-chip:has(:disabled) { opacity: .45; cursor: default; }
.language-choices + .tools-help { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .language-chip { transition: none; } }

/* Incoming calls: the workspace's numbers as a grouped list, a switch per row. */
.inbound-card { padding: 4px 0 10px; }
/* the switch stays at the row end at every width — it IS the row's action */
.inbound-list .inbound-row { grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; }
.inbound-toggle { display: inline-flex; align-items: center; cursor: pointer; }
.inbound-toggle input:disabled { opacity: .4; cursor: not-allowed; }
.inbound-empty { padding: 18px; }
.inbound-empty strong { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 600; color: var(--c-ink); }
.inbound-empty p { margin: 0 0 12px; max-width: 60ch; font-size: 13px; line-height: 1.55; color: var(--c-ink-3); }
.inbound-card #inbound-status:empty { display: none; }
.inbound-card #inbound-status { margin: 6px 18px 0; }
.inbound-card .results-next { margin: 8px 18px 0; padding-top: 10px; border-top: 1px solid var(--ui-sep); }
.inbound-note[hidden], .inbound-tip[hidden] { display: none; }
.inbound-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.inbound-note > button { flex: none; white-space: nowrap; }
.inbound-tip { margin: 8px 18px 0; font-size: 12.5px; line-height: 1.55; color: var(--c-ink-3); }
.inbound-tip code { font: 12px/1 var(--mono); color: var(--c-ink-2); }

/* ── Logs (agent-logs.js; docs/sprints/prod/PLAN_AGENT_LOGS.md) ─────────── */
/* Errors + warnings in the last 24 h, on a section label: the alarm hue the
 * console already uses for "something failed", never a new one. */
.log-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 999px; background: var(--c-alarm-bg); color: var(--c-alarm-ink);
  font: 600 11px/1 var(--sans); font-variant-numeric: tabular-nums; }
.log-count:empty { display: none; }
@media (min-width: 761px) {
  .agent-subnav .log-count { margin-left: auto; background: var(--ui-dark-fill); color: var(--c-alarm-on-dark); }
  .agent-subnav .tools-count:not(:empty) + .log-count { margin-left: 4px; }
}

/* One dot per tool, call input and result field: the worst thing logged
 * about it in 24 h. Hidden until the logs answer. */
button.log-dot { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; min-height: 0;
  margin: 0; padding: 0; border: 0; border-radius: 6px; background: transparent; box-shadow: none; cursor: pointer; }
button.log-dot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
button.log-dot[data-tone=error]::before { background: var(--c-alarm); }
button.log-dot[data-tone=warning]::before { background: var(--c-open); }
button.log-dot:hover { background: var(--ui-fill-2); }
button.log-dot:active { transform: none; background: var(--ui-fill); }
button.log-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
button.log-dot[hidden] { display: none; }
.tool-card { position: relative; }
.tool-card.has-log .tool-open { padding-right: 36px; }
.tool-summary > .log-dot { position: absolute; top: 8px; right: 8px; }
.schema-field > .log-dot { position: absolute; left: -17px; top: 12px; }
/* A logs bubble lives in the section it opened from. */
#agent-tools-panel, #agent-variables-panel, #agent-results-panel { position: relative; }

/* A tool the prompt names that the agent does not have: amber, underlined. */
.prompt-reference-unknown { background: var(--c-open-bg); box-shadow: inset 0 -2px 0 var(--c-open); }
.prompt-compose button.prompt-lint { margin: 0 auto 0 8px; min-height: 0; padding: 2px 8px; border: 0; border-radius: 999px;
  background: var(--c-open-bg); color: var(--c-open-ink); font: 600 10.5px/1.4 var(--sans); }
.prompt-compose button.prompt-lint:hover { box-shadow: 0 0 0 1px var(--c-open-line); }
.prompt-compose button.prompt-lint:active { transform: none; }

/* The bubble's logs flavour: the variable bubble's shell, three lines in
 * monospace, the ring in the colour of the worst of them. */
.var-bubble.vb-logs { width: 440px; }
.var-bubble.vb-logs[data-ring=alarm] { box-shadow: var(--ui-float), 0 0 0 1px var(--c-alarm-line); }
.var-bubble.vb-logs[data-ring=alarm]::before { box-shadow: -1px -1px 0 0 var(--c-alarm-line); }
.var-bubble.vb-logs[data-ring=accent] { box-shadow: var(--ui-float), 0 0 0 1px var(--accent-line); }
.var-bubble.vb-logs[data-ring=accent]::before { box-shadow: -1px -1px 0 0 var(--accent-line); }
.var-bubble .vb-tag[data-tone=alarm] { color: var(--c-alarm-ink); background: var(--c-alarm-bg); }
.var-bubble .vb-tag[data-tone=accent] { color: var(--accent); background: var(--accent-bg); }
.var-bubble .vb-tag[data-tone=tool] { color: #2f4f86; background: #e6edfa; }
.var-bubble .vb-tag[data-tone=plain] { color: var(--c-ink-2); background: var(--ui-fill-2); }
.vb-log-list { border-top: 1px solid var(--ui-sep); }
.vb-log-list > .vb-help { margin: 8px 0 0; }
.vb-log { display: grid; grid-template-columns: 44px 78px minmax(0, 1fr); gap: 10px; padding: 6px 0;
  border-bottom: 1px solid var(--ui-sep); font: 11.5px/1.5 var(--mono); color: var(--c-ink-2); }
.vb-log-t, .vb-log-c { color: var(--c-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums; }
.vb-log-s { min-width: 0; overflow-wrap: anywhere; }
.vb-log b { font-weight: 600; color: var(--c-ink); }
.vb-log[data-level=error] b { color: var(--c-alarm-ink); }
.vb-log[data-level=warning] b { color: var(--c-open-ink); }
.vb-note { margin-top: 8px; }
.vb-logs .vb-actions { flex-wrap: wrap; }
.vb-count:not(:empty)::after { content: ' · '; }
.var-bubble button.vb-see { min-height: 0; margin: 0; padding: 0; border: 0; background: none; color: var(--c-ink-2);
  font: 500 11.5px/1.4 var(--sans); text-decoration: underline dotted; text-underline-offset: 3px; }
.var-bubble button.vb-see:hover { color: var(--c-ink); }
.var-bubble button.vb-see:active { transform: none; }
.vb-own { display: flex; align-items: center; gap: 6px; }
.var-bubble button.vb-act { margin: 0; padding: 7px 11px; font-size: 12.5px; }
@media (max-width: 760px) { .var-bubble.vb-logs { width: min(440px, calc(100% - 8px)); } }

/* The Logs tab: the model pages' range buttons and request table. */
.logs-card { padding: 14px 18px 12px; }
.logs-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 14px; }
.logs-filters .use-r[aria-pressed=true] { font-weight: 600; }
.logs-search { flex: 1 1 200px; min-width: 180px; max-width: 280px; box-sizing: border-box; padding: 5px 10px;
  border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); background: var(--c-surface);
  color: var(--c-ink); font: 12px/1.4 var(--mono); }
.logs-search::placeholder { color: var(--c-ink-3); }
.logs-search:focus { outline: none; border-color: rgba(27, 26, 22, 0.34); box-shadow: var(--ui-ring); }
.logs-table td { vertical-align: top; }
.logs-table td.logs-time, .logs-table td.logs-call { font: 11.5px/1.6 var(--mono); color: var(--c-ink-3); }
.logs-table td.logs-event { width: 100%; min-width: 240px; white-space: normal; }
.logs-row { cursor: pointer; }
.logs-row:hover td { background: var(--ui-fill-2); }
.logs-row.is-open td, .logs-detail-row td { background: var(--c-sunk); }
.logs-table tr.logs-row.is-open td { border-bottom-color: transparent; }
button.logs-toggle { display: block; width: 100%; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 4px;
  background: none; color: inherit; font: inherit; line-height: 1.45; text-align: left; box-shadow: none; }
button.logs-toggle:active { transform: none; }
button.logs-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.logs-ev { display: block; font-weight: 600; color: var(--c-ink); overflow-wrap: anywhere; }
.logs-row[data-level=error] .logs-ev { color: var(--c-alarm-ink); }
.logs-row[data-level=warning] .logs-ev { color: var(--c-open-ink); }
.logs-sub { display: block; margin-top: 1px; font-size: 12px; color: var(--c-ink-3); overflow-wrap: anywhere; }
.logs-part { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.logs-part-tools { color: #2f4f86; background: #e6edfa; }
.logs-part-variables { color: #56643b; background: #e9efe0; }
.logs-part-results { color: var(--accent); background: var(--accent-bg); }
.logs-part-prompt { color: var(--c-ink-2); background: var(--ui-fill); }
.logs-part-calls { color: var(--c-ink-3); background: var(--ui-fill-2); }
.logs-detail-row td { padding-top: 0; white-space: normal; }
.logs-detail { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 14px; padding: 8px 10px;
  border-radius: var(--r-sm); background: var(--c-surface); box-shadow: inset 0 0 0 1px var(--ui-sep);
  font: 11.5px/1.6 var(--mono); color: var(--c-ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.logs-key { color: var(--c-ink-3); }
.logs-val { min-width: 0; }
.logs-detail-foot { grid-column: 1 / -1; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--ui-sep); color: var(--c-ink-3); }
.logs-empty { padding: 14px 2px 8px; }
.logs-empty strong { display: block; margin-bottom: 3px; font-size: 13.5px; font-weight: 600; color: var(--c-ink); }
.logs-empty p { margin: 0; max-width: 62ch; font-size: 12.5px; line-height: 1.5; color: var(--c-ink-3); }
.logs-note[data-tone=bad] { color: var(--c-alarm-ink); }
.logs-foot { margin-top: 8px; }
.logs-foot #logs-more { margin: 0; }
@media (max-width: 760px) {
  .logs-card { padding: 12px; }
  .logs-filters { gap: 8px; }
  .logs-search { max-width: none; font-size: 16px; }
  .logs-table td.logs-event { min-width: 200px; }
  .schema-field > .log-dot { left: -14px; }
}