/* ══ 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. */
  .agent-workspace > .nav { grid-column: 1; grid-row: 1 / 3; height: var(--studio-h);
    padding: 12px 8px 10px; overflow: visible; border-right: 0;
    border-radius: var(--ui-r-panel) 0 0 var(--ui-r-panel); }
  .agent-workspace .logo { justify-content: center; padding: 4px 0 14px; }
  .agent-workspace .logo-text, .agent-workspace .nav-sec, .agent-workspace .nav-new { display: none; }
  .agent-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; }
  .agent-workspace .nav-item { justify-content: center; width: 44px; height: 40px; min-height: 40px;
    margin: 0 auto; padding: 0; gap: 0; font-size: 0; }
  .agent-workspace .nav-item svg { width: 19px; height: 19px; }
  .agent-workspace .nav-item:hover::after, .agent-workspace .nav-item:focus-visible::after {
    content: attr(aria-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); }
  .agent-workspace .envwrap { padding: 0 0 12px; }
  .agent-workspace .envrow { grid-template-columns: 1fr; padding: 0; background: none; }
  .agent-workspace .envrow::before { display: none; }
  .agent-workspace .envtab:not(.on) { display: none; }
  .agent-workspace .envtab.on { min-height: 22px; padding: 4px 0; gap: 4px; border-radius: 999px;
    background: var(--ui-dark-fill); color: var(--c-on-dark-2); font-size: 10px; font-weight: 600; }
  .agent-workspace .envwhy { display: none; }
  .agent-workspace .nav-foot { align-items: stretch; gap: 4px; padding: 8px 0 0; }
  .agent-workspace .nav-cap, .agent-workspace .meetbtn, .agent-workspace .release-versions,
  .agent-workspace #brandpill { display: none !important; }
  .agent-workspace .nav-me { justify-content: center; padding: 0; }
  .agent-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. */
  .agent-workspace #support { padding: 0; }
  .agent-workspace #supcat { padding: 4px 0; border-radius: 10px; }
  .agent-workspace #supcat:hover { background: var(--c-dark-sunk); }
  .agent-workspace #supcat .sup-scene { height: 44px; max-width: 48px; }
  .agent-workspace .sup-house, .agent-workspace .sup-name, .agent-workspace #supaction { display: none; }
  .agent-workspace #supcat .cat-talk { width: 38px; height: 44px; bottom: 0; }
  .agent-workspace #supbubble { position: absolute; left: calc(100% + 14px); right: auto; bottom: 6px;
    width: 220px; z-index: 40; transform-origin: 0 100%; }
  .agent-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; }
}
@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; }
  .agent-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; }
  .agent-subnav-label { display: block; margin: 2px 10px 16px; font-size: 11px; font-weight: 600;
    line-height: 1; color: var(--c-on-dark-3); }
  .agent-subnav [role=tablist] { display: flex; flex-direction: column; gap: 1px; }
  .agent-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; }
  .agent-subnav button > svg { width: 16px; height: 16px; flex: none; color: var(--c-on-dark-3); }
  .agent-subnav button:hover { background: var(--c-dark-sunk); color: var(--c-on-dark); }
  .agent-subnav button:active { transform: none; background: var(--c-dark-line); }
  .agent-subnav button[aria-selected=true] { background: var(--ui-dark-raise); color: var(--c-on-dark);
    font-weight: 600; box-shadow: var(--ui-dark-lift); }
  .agent-subnav button[aria-selected=true] > svg { color: var(--c-on-dark); }
  .agent-subnav .tools-count { margin-left: auto; background: var(--ui-dark-fill); color: var(--c-on-dark-3); }
  .agent-subnav button[aria-selected=true] .tools-count { color: var(--c-on-dark-2); }
}

/* ── 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 [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; } }