#page-agent, #page-agentControl { max-width: 1440px; }
.agent-control-summary { margin-bottom: 12px; }
.agent-control-card { display: grid; gap: 11px; }
.agent-control-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.agent-control-head h3 { font-size: 14px; line-height: 1.35; }
.agent-control-head p { margin-top: 3px; color: var(--c-muted); font-size: 11px; line-height: 1.55; }
.agent-control-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.agent-control-facts > div, .agent-endpoint-list > div, .agent-secret-list > div,
.agent-binding-list > div, .agent-simple-list article { padding: 9px 10px; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-surface); }
.agent-control-facts span, .agent-endpoint-list span, .agent-secret-list span,
.agent-binding-list span, .agent-inline-note { display: block; color: var(--c-muted); font-size: 10px; line-height: 1.5; }
.agent-control-facts b, .agent-endpoint-list b, .agent-secret-list b, .agent-binding-list b,
.agent-simple-list b { display: block; color: var(--c-fg); font-size: 12px; line-height: 1.45; }
.agent-control-note { color: var(--c-muted); font-size: 11px; line-height: 1.6; }
.agent-control-inline-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.agent-control-subgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.agent-control-section-title { margin-bottom: 7px; color: var(--c-muted); font-size: 11px; }
.agent-endpoint-list, .agent-secret-list, .agent-binding-list, .agent-simple-list { display: grid; gap: 7px; }
.agent-control-history { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; color: var(--c-muted); font-size: 11px; }
.agent-empty-inline { padding: 12px; border: 1px dashed var(--c-border); border-radius: var(--r-sm); color: var(--c-muted); font-size: 11px; line-height: 1.6; }
.agent-audit-table td .pill { display: inline-flex; }
.agent-oauth-events { display: grid; gap: 8px; margin: 12px 0; }
.agent-oauth-event { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-surface); color: var(--c-muted); font-size: 11px; line-height: 1.5; }
.agent-oauth-event a, #agent-oauth-session .settings-inline-state a:not(.btn) { color: var(--c-primary); text-decoration: none; }
#agent-oauth-session .settings-inline-state > div { display: grid; gap: 7px; }
#agent-oauth-session .settings-detail-section { display: grid; gap: 9px; }
#agent-oauth-session input, #agent-oauth-session select { width: 100%; min-height: 42px; border: 1px solid var(--c-border-strong); border-radius: var(--r-sm); background: var(--c-bg); color: var(--c-fg); }

.agent-page-active .app, .agent-page-active .workspace { min-height: 0; overflow: hidden; }
.agent-page-active .workspace, .agent-page-active .main { min-width: 0; min-height: 0; }
.agent-page-active .main { display: flex; flex: 1 1 0; flex-direction: column; padding: 0; overflow: hidden; }
.agent-page-active #page-agent {
  display: flex;
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}
.agent-page-head { margin: 16px 20px 10px; }
.agent-surface-shell { display: flex; width: 100%; min-width: 0; min-height: 0; flex: 1 1 0; flex-direction: column; overflow: hidden; }
.agent-surface-tabs { display: flex; flex: 0 0 46px; align-items: stretch; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--c-border); background: var(--c-bg-elevated); }
.agent-surface-tabs button { position: relative; display: flex; min-width: 132px; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; border: 0; background: transparent; color: var(--c-muted); font: 600 11px var(--font-sans); cursor: pointer; }
.agent-surface-tabs button::after { position: absolute; right: 10px; bottom: -1px; left: 10px; height: 2px; background: transparent; content: ""; }
.agent-surface-tabs button:hover { color: var(--c-fg); }
.agent-surface-tabs button.selected { color: var(--c-fg); }
.agent-surface-tabs button.selected::after { background: var(--c-primary); }
.agent-surface-tabs i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-subtle); }
.agent-surface-tabs i.ready { background: var(--c-primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--c-primary) 12%, transparent); }
.agent-surface-tabs i.blocked { background: var(--c-danger); }
.agent-surface-tabs i.pending { background: var(--c-warn); }
.agent-workbench {
  position: relative;
  display: grid;
  grid-template-columns: 232px minmax(420px, 1fr) 300px;
  grid-template-rows: minmax(0, 1fr);
  height: auto;
  min-height: 0;
  max-height: none;
  flex: 1 1 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--c-bg);
}
.agent-surface-shell .agent-workbench { height: auto; min-height: 0; flex: 1 1 0; }
.agent-composer-blocker b { min-width: 0; flex: 1; font-weight: 500; }
.agent-composer-configure { min-height: 32px; margin-left: auto; padding: 5px 9px; border: 1px solid color-mix(in oklab, var(--c-warn) 44%, var(--c-border)); border-radius: var(--r-sm); background: transparent; color: inherit; font: 600 11px var(--font-sans); cursor: pointer; white-space: nowrap; }
.agent-composer-configure:hover { background: color-mix(in oklab, var(--c-warn) 10%, transparent); }
.agent-dsh-workspace { display: flex; min-height: 0; flex: 1; flex-direction: column; background: var(--c-bg); }
.agent-dsh-workspace > header { display: flex; min-height: 58px; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 14px; border-bottom: 1px solid var(--c-border); background: var(--c-bg-elevated); }
.agent-dsh-workspace > header > div:first-child { display: grid; min-width: 0; gap: 2px; }
.agent-dsh-workspace > header span { color: var(--c-primary); font: 8px/1.2 var(--font-mono); letter-spacing: .15em; }
.agent-dsh-workspace > header b { color: var(--c-fg); font-size: 13px; }
.agent-dsh-workspace > header small { color: var(--c-muted); font-size: 9px; }
.agent-dsh-workspace > header > div:last-child { display: flex; align-items: center; gap: 7px; }
.agent-dsh-frame-wrap { position: relative; min-height: 0; flex: 1; overflow: hidden; background: var(--c-surface); }
.agent-dsh-frame-wrap iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.agent-dsh-loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; background: color-mix(in oklab, var(--c-bg) 84%, transparent); color: var(--c-muted); }
.agent-dsh-loading span { width: 24px; height: 24px; border: 2px solid var(--c-border-strong); border-top-color: var(--c-primary); border-radius: 50%; animation: agent-dsh-spin .8s linear infinite; }
.agent-dsh-loading b { font-size: 10px; font-weight: 500; }
.agent-dsh-unavailable { display: grid; min-height: 0; flex: 1; place-content: center; justify-items: center; gap: 5px; color: var(--c-muted); text-align: center; }
.agent-dsh-unavailable b { color: var(--c-fg); font-size: 14px; }
.agent-dsh-unavailable p { font-size: 11px; }
@keyframes agent-dsh-spin { to { transform: rotate(1turn); } }
.agent-conversations, .agent-inspector, .agent-chat { min-width: 0; background: var(--c-bg-elevated); }
.agent-conversations { display: flex; min-height: 0; flex-direction: column; overflow: hidden; border-right: 1px solid var(--c-border); }
.agent-chat { display: flex; min-height: 0; flex-direction: column; overflow: hidden; background: var(--c-bg); }
.agent-inspector { display: flex; min-height: 0; flex-direction: column; padding: 0; overflow: hidden; border-left: 1px solid var(--c-border); }

.agent-panel-head, .agent-chat-head { display: flex; min-height: 54px; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-color: var(--c-border); background: var(--c-bg-elevated); }
.agent-panel-head > div:first-child { display: grid; gap: 2px; }
.agent-panel-head > div:first-child span { color: var(--c-primary); font: 9px/1.2 var(--font-mono); letter-spacing: .16em; }
.agent-panel-head > div:first-child b { color: var(--c-fg); font-size: 14px; }
.agent-panel-actions { display: flex; align-items: center; gap: 5px; }
.agent-panel-actions button { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-surface); color: var(--c-primary); font: 600 17px/1 var(--font-sans); cursor: pointer; }
.agent-panel-actions button:hover { border-color: var(--c-border-strong); }
.agent-panel-actions button:disabled { opacity: .42; cursor: not-allowed; }
.agent-panel-actions svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.agent-conversation-list { min-height: 0; flex: 1; padding: 7px; }
.agent-conversation-row { border-radius: var(--r-sm); color: var(--c-fg); }
.agent-conversation-row:hover { background: var(--c-surface); }
.agent-conversation-row.selected { border-color: transparent; background: color-mix(in oklab, var(--c-primary) 11%, transparent); }
.agent-conversation-row.selected::before { content: ""; width: 2px; align-self: stretch; border-radius: 2px; background: var(--c-primary); }
.agent-conversation-meta em, .agent-conversation-meta i { background: var(--c-surface-2); color: var(--c-muted); }

.agent-left-footer { border-top: 1px solid var(--c-border); background: color-mix(in oklab, var(--c-surface) 45%, var(--c-bg-elevated)); }
.agent-skills { display: grid; gap: 8px; padding: 11px 12px 4px; }
.agent-skills-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.agent-skills-head span { color: var(--c-primary); font: 9px/1.2 var(--font-mono); letter-spacing: .16em; }
.agent-skills-head b { color: var(--c-subtle); font-size: 9px; font-weight: 500; }
.agent-skills p { color: var(--c-muted); font-size: 10px; line-height: 1.55; }
.agent-skill-pills { display: flex; gap: 5px; flex-wrap: wrap; }
.agent-skill-pills span { max-width: 100%; padding: 4px 6px; overflow: hidden; border: 1px solid var(--c-border); border-radius: 5px; background: var(--c-bg-elevated); color: var(--c-fg); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.agent-skills > button { display: flex; min-height: 32px; align-items: center; justify-content: space-between; padding: 5px 7px; border: 0; border-radius: 5px; background: transparent; color: var(--c-muted); font: 10px var(--font-sans); text-align: left; cursor: pointer; }
.agent-skills > button:hover { background: var(--c-surface); color: var(--c-fg); }
.agent-skills > button span { color: var(--c-primary); }
.agent-privacy-foot { border-color: var(--c-border); background: var(--c-surface); color: var(--c-muted); }

.agent-runtime-statusbar { flex: 0 0 auto; border-bottom: 1px solid var(--c-border); background: var(--c-bg-elevated); }
.agent-runtime-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 44px; border-bottom: 1px solid var(--c-border); }
.agent-runtime-switch { display: flex; min-width: 0; min-height: 44px; align-items: center; justify-content: space-between; gap: 9px; padding: 5px 12px; border: 0; border-right: 1px solid var(--c-border); border-radius: 0; background: transparent; color: var(--c-muted); font: inherit; text-align: left; cursor: pointer; }
.agent-runtime-switch:last-child { border-right: 0; }
.agent-runtime-switch > span { display: grid; min-width: 0; gap: 2px; }
.agent-runtime-switch small { color: var(--c-subtle); font: 8px/1.2 var(--font-mono); letter-spacing: .14em; }
.agent-runtime-switch b { overflow: hidden; color: inherit; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.agent-runtime-switch em { flex: 0 0 auto; padding: 3px 5px; border: 1px solid var(--c-border); border-radius: 4px; color: var(--c-warn); font: 700 8px/1 var(--font-mono); font-style: normal; letter-spacing: .08em; }
.agent-runtime-switch em.ready { border-color: color-mix(in oklab, var(--c-primary) 40%, transparent); color: var(--c-primary); }
.agent-runtime-switch.selected { box-shadow: inset 0 -2px var(--c-primary); background: color-mix(in oklab, var(--c-primary) 7%, transparent); color: var(--c-fg); }
.agent-runtime-switch:disabled { cursor: default; }
.agent-runtime-overview { display: flex; min-width: 0; align-items: flex-start; }
.agent-runtime-disclosure { min-width: 0; flex: 1 1 auto; }
.agent-runtime-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; min-height: 42px; align-items: center; gap: 8px; padding: 5px 12px; list-style: none; cursor: pointer; }
.agent-runtime-summary::-webkit-details-marker { display: none; }
.agent-runtime-copy { display: grid; min-width: 0; gap: 1px; }
.agent-runtime-copy > span { display: none; color: var(--c-primary); font: 8px/1.2 var(--font-mono); letter-spacing: .14em; }
.agent-runtime-copy > b { overflow: hidden; color: var(--c-fg); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.agent-runtime-copy > small { overflow: hidden; color: var(--c-muted); font-size: 8px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.agent-runtime-disclosure-label { display: inline-flex; align-items: center; gap: 5px; color: var(--c-muted); font-size: 9px; white-space: nowrap; }
.agent-runtime-disclosure-label i { color: var(--c-primary); font-style: normal; transition: transform 160ms ease; }
.agent-runtime-disclosure[open] .agent-runtime-disclosure-label i { transform: rotate(180deg); }
.agent-runtime-detail-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; padding: 9px 12px 10px; border-top: 1px solid var(--c-border); background: color-mix(in oklab, var(--c-surface) 44%, var(--c-bg-elevated)); }
.agent-runtime-detail-panel > p { grid-column: 1 / -1; overflow-wrap: anywhere; color: var(--c-muted); font-size: 9px; line-height: 1.45; }
.agent-runtime-contract { display: flex; min-width: 0; align-items: center; gap: 7px; flex-wrap: wrap; }
.agent-runtime-contract > span:not(.agent-readiness) { color: var(--c-subtle); font-size: 8px; white-space: nowrap; }
.agent-runtime-contract b { color: var(--c-muted); font-weight: 500; }
.agent-readiness { padding: 4px 6px; border: 1px solid color-mix(in oklab, var(--c-warn) 42%, transparent); border-radius: 4px; color: var(--c-warn); font: 700 8px/1 var(--font-mono); letter-spacing: .1em; }
.agent-readiness.ready { border-color: color-mix(in oklab, var(--c-primary) 42%, transparent); color: var(--c-primary); }
.agent-runtime-capabilities { display: flex; justify-content: flex-end; gap: 5px; flex-wrap: wrap; }
.agent-runtime-capabilities span { padding: 3px 6px; border: 1px solid var(--c-border); border-radius: 999px; color: var(--c-muted); font-size: 8px; }
.agent-runtime-capabilities span.empty { border-style: dashed; }
.agent-chat-head { border-bottom: 1px solid var(--c-border); }
.agent-chat-head-actions { display: flex; align-items: center; gap: 7px; }

.agent-chat-log {
  min-height: 0;
  gap: 15px;
  padding: 18px clamp(14px, 2.5vw, 32px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
}
.agent-chat-empty { min-height: 0; }
.agent-message-error {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid color-mix(in oklab, var(--c-warn) 42%, var(--c-border));
  border-radius: var(--r-sm);
  background: color-mix(in oklab, var(--c-warn) 8%, var(--c-bg-elevated));
}
.agent-message-error > div { display: grid; min-width: 0; gap: 4px; }
.agent-message-error b { color: var(--c-fg); font-size: 10px; }
.agent-message-error p { overflow-wrap: anywhere; color: var(--c-muted); font-size: 9px; line-height: 1.5; }
.agent-message-error .btn { flex: 0 0 auto; min-height: 32px; }
.agent-message-avatar { border-radius: var(--r-sm); background: var(--c-surface); color: var(--c-primary); }
.agent-message.user .agent-message-avatar { background: var(--c-surface-2); color: var(--c-muted); }
.agent-message-body > p { border-color: var(--c-border); background: var(--c-bg-elevated); color: var(--c-fg); }
.agent-message.user .agent-message-body > p { border-color: color-mix(in oklab, var(--c-primary) 34%, transparent); background: color-mix(in oklab, var(--c-primary) 10%, var(--c-bg-elevated)); color: var(--c-fg); }
.agent-message-body > p strong { color: var(--c-fg); font-weight: 720; }
.agent-message-evidence-link { display: inline-flex; min-height: 28px; align-items: center; gap: 5px; margin: 5px 2px 0; padding: 3px 7px; border: 0; border-radius: 5px; background: transparent; color: var(--c-primary); font: 9px/1.3 var(--font-sans); cursor: pointer; }
.agent-message-evidence-link:hover { background: color-mix(in oklab, var(--c-primary) 9%, transparent); }
.agent-chat-empty > p, .agent-message-meta span { color: var(--c-muted); }
.agent-orbit { border-color: var(--c-border-strong); background: var(--c-surface); color: var(--c-primary); }
.agent-orbit i { background: var(--c-info); }
.agent-quick-prompts button { border-color: var(--c-border); background: var(--c-bg-elevated); color: var(--c-muted); }
.agent-quick-prompts button:hover { border-color: var(--c-border-strong); background: var(--c-surface); color: var(--c-fg); }
.agent-composer-wrap {
  min-width: 0;
  flex: 0 0 auto;
  padding: 9px 12px max(11px, env(safe-area-inset-bottom));
  border-color: var(--c-border);
  background: var(--c-bg-elevated);
}
.agent-output-modes button { color: var(--c-muted); }
.agent-output-modes button.selected { border-color: var(--c-border-strong); background: var(--c-surface); color: var(--c-fg); }
.agent-composer { min-width: 0; border-color: var(--c-border-strong); border-radius: var(--r-md); background: var(--c-bg); }
.agent-composer:focus-within { border-color: var(--c-info); box-shadow: 0 0 0 2px color-mix(in oklab, var(--c-info) 12%, transparent); }
.agent-composer textarea { max-height: min(180px, 24dvh); overflow-y: auto; color: var(--c-fg); }
.agent-composer textarea::placeholder { color: var(--c-muted); }
.agent-composer-foot { min-width: 0; flex-wrap: wrap; }

.agent-inspector-toolbar { display: flex; min-height: 53px; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--c-border); }
.agent-inspector-toolbar > div { display: grid; gap: 2px; }
.agent-inspector-toolbar span { color: var(--c-primary); font: 8px/1.2 var(--font-mono); letter-spacing: .15em; }
.agent-inspector-toolbar b { color: var(--c-fg); font-size: 12px; }
.agent-inspector-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--c-border); }
.agent-inspector-tabs button { min-width: 0; min-height: 44px; padding: 6px 2px; border: 0; border-right: 1px solid var(--c-border); background: transparent; color: var(--c-muted); font: 10px var(--font-sans); cursor: pointer; }
.agent-inspector-tabs button:last-child { border-right: 0; }
.agent-inspector-tabs button.selected { box-shadow: inset 0 -2px var(--c-primary); background: color-mix(in oklab, var(--c-primary) 7%, transparent); color: var(--c-fg); }
.agent-inspector-body { min-height: 0; flex: 1; padding: 12px; overflow-y: auto; }
.agent-task-facts > div, .agent-task-switcher button { border-color: var(--c-border); border-radius: var(--r-sm); background: var(--c-surface); }
.agent-task-facts--idle dd { font-family: var(--font-mono); }
.agent-inspector-section, .agent-inspector-head { border-color: var(--c-border); }
.agent-inspector-section--first { margin-top: 0; padding-top: 0; border-top: 0; }
.agent-inspector-note { margin: -2px 0 9px; color: var(--c-muted); font-size: 9px; line-height: 1.55; }
.agent-inspector-truth { display: grid; gap: 4px; padding: 10px; border: 1px dashed var(--c-border); border-radius: var(--r-sm); background: var(--c-surface); }
.agent-inspector-truth b { color: var(--c-fg); font-size: 10px; }
.agent-inspector-truth p { color: var(--c-muted); font-size: 9px; line-height: 1.55; }
.agent-task-events > div i { background: var(--c-info); }
.agent-approval { border-color: color-mix(in oklab, var(--c-warn) 40%, transparent); background: color-mix(in oklab, var(--c-warn) 8%, transparent); }
.agent-run-id-list { display: grid; gap: 5px; }
.agent-run-id-list code { padding: 7px; overflow-wrap: anywhere; border: 1px solid var(--c-border); border-radius: 5px; background: var(--c-surface); color: var(--c-primary); font-size: 8px; }
.agent-evidence-list, .agent-inspector-tools, .agent-runtime-gates { display: grid; gap: 7px; }
.agent-evidence-list article, .agent-inspector-tools article, .agent-runtime-gates > div { display: grid; gap: 4px; padding: 9px; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-surface); }
.agent-evidence-list article > b { color: var(--c-fg); font-size: 10px; }
.agent-evidence-list code, .agent-inspector-tools code { overflow-wrap: anywhere; color: var(--c-primary); font-size: 8px; }
.agent-evidence-list span, .agent-evidence-list small, .agent-inspector-tools small { color: var(--c-muted); font-size: 8px; }
.agent-technical-ids { min-width: 0; }
.agent-technical-ids > summary { color: var(--c-muted); font-size: 8px; cursor: pointer; }
.agent-technical-ids[open] > summary { margin-bottom: 5px; color: var(--c-primary); }
.agent-technical-ids code { display: block; margin-top: 4px; padding: 6px; overflow-wrap: anywhere; border: 1px solid var(--c-border); border-radius: 5px; background: var(--c-bg); color: var(--c-muted); font-size: 8px; }
.agent-task-technical-id { margin: 8px 12px 0; }
.agent-inspector-tools > article > div { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.agent-inspector-tools b { color: var(--c-fg); font-size: 10px; }
.agent-inspector-tools > article > div span { color: var(--c-warn); font: 8px var(--font-mono); }
.agent-inspector-tools p { color: var(--c-muted); font-size: 9px; line-height: 1.5; }
.agent-boundary-list { display: grid; gap: 8px; }
.agent-boundary-list article { display: grid; grid-template-columns: 28px 1fr; gap: 8px; padding: 10px; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-surface); }
.agent-boundary-list article > span { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 4px; background: color-mix(in oklab, var(--c-primary) 12%, transparent); color: var(--c-primary); font: 8px var(--font-mono); }
.agent-boundary-list article > div { display: grid; gap: 4px; }
.agent-boundary-list b { color: var(--c-fg); font-size: 10px; }
.agent-boundary-list p { color: var(--c-muted); font-size: 9px; line-height: 1.55; }
.agent-runtime-gates > div { grid-template-columns: 1fr auto; }
.agent-runtime-gates span { color: var(--c-fg); font-size: 9px; }
.agent-runtime-gates b { font: 8px var(--font-mono); }
.agent-runtime-gates b.ready { color: var(--c-primary); }
.agent-runtime-gates b.blocked { color: var(--c-warn); }
.agent-runtime-gates small { grid-column: 1 / -1; color: var(--c-muted); font-size: 8px; line-height: 1.45; }
.agent-mobile-tools, .agent-mobile-backdrop, .agent-mobile-close { display: none; }

.pi-workspace-status { display: grid; min-height: 0; flex: 1; place-content: center; justify-items: center; gap: 8px; padding: 24px; background: var(--c-bg); color: var(--c-muted); text-align: center; }
.pi-workspace-status > span { width: 28px; height: 28px; border: 2px solid var(--c-border-strong); border-top-color: var(--c-primary); border-radius: 50%; animation: agent-dsh-spin .8s linear infinite; }
.pi-workspace-status b { color: var(--c-fg); font-size: 14px; }
.pi-workspace-status p { max-width: 440px; font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
.pi-workspace-status .btn { min-height: 44px; }
.pi-workspace { position: relative; display: grid; grid-template-columns: 228px minmax(0, 1fr) 320px; min-height: 0; flex: 1; overflow: hidden; background: var(--c-bg); }
.pi-workspace *, .pi-workspace *::before, .pi-workspace *::after { box-sizing: border-box; min-width: 0; }
.pi-workspace button, .pi-workspace select, .pi-workspace input { min-height: 44px; font-family: var(--font-sans); }
.pi-workspace button { cursor: pointer; }
.pi-workspace button:disabled, .pi-workspace select:disabled { opacity: .45; cursor: not-allowed; }
.pi-ws-sessions, .pi-ws-inspector, .pi-ws-main { min-height: 0; background: var(--c-bg-elevated); }
.pi-ws-sessions { display: flex; flex-direction: column; border-right: 1px solid var(--c-border); }
.pi-ws-sessions > header, .pi-ws-inspector-head { display: flex; min-height: 58px; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 11px 8px 13px; border-bottom: 1px solid var(--c-border); }
.pi-ws-sessions > header > div, .pi-ws-inspector-head > div { display: grid; gap: 2px; }
.pi-ws-sessions > header span, .pi-ws-inspector-head span, .pi-ws-title > span { color: var(--c-primary); font: 8px/1.2 var(--font-mono); letter-spacing: .16em; }
.pi-ws-sessions > header b, .pi-ws-inspector-head b { color: var(--c-fg); font-size: 13px; }
.pi-ws-sessions > header button, .pi-ws-inspector-head > button, .pi-ws-mobile-actions button { display: grid; width: 44px; min-width: 44px; height: 44px; place-items: center; border: 0; border-radius: var(--r-sm); background: var(--c-surface); color: var(--c-primary); }
.pi-ws-sessions > header svg, .pi-ws-inspector-head svg, .pi-ws-mobile-actions svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pi-ws-session-list { min-height: 0; flex: 1; padding: 7px; overflow-y: auto; }
.pi-ws-session-row { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 58px; margin-bottom: 3px; padding: 7px 8px 7px 10px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--c-fg); text-align: left; }
.pi-ws-session-row:hover { background: var(--c-surface); }
.pi-ws-session-row.selected { box-shadow: inset 2px 0 var(--c-primary); background: color-mix(in oklab, var(--c-primary) 10%, transparent); }
.pi-ws-session-row > span { display: grid; gap: 4px; overflow: hidden; }
.pi-ws-session-row b { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.pi-ws-session-row small, .pi-ws-session-row em { color: var(--c-muted); font-size: 8px; font-style: normal; white-space: nowrap; }
.pi-ws-sessions > footer { display: grid; gap: 3px; padding: 11px 13px; border-top: 1px solid var(--c-border); }
.pi-ws-sessions > footer span { display: flex; align-items: center; gap: 6px; color: var(--c-fg); font-size: 9px; }
.pi-ws-sessions > footer i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-primary); }
.pi-ws-sessions > footer small { color: var(--c-muted); font-size: 8px; }
.pi-ws-main { display: flex; flex-direction: column; background: var(--c-bg); }
.pi-ws-main-head { display: flex; min-height: 58px; flex: 0 0 auto; align-items: center; gap: 10px; padding: 7px 12px; border-bottom: 1px solid var(--c-border); background: var(--c-bg-elevated); }
.pi-ws-title { display: grid; max-width: min(260px, 28vw); gap: 2px; }
.pi-ws-title > b { overflow: hidden; color: var(--c-fg); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.pi-ws-runtime-state { display: flex; min-width: 0; flex: 1; align-items: center; justify-content: center; gap: 9px; color: var(--c-muted); font-size: 8px; }
.pi-ws-runtime-state > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pi-ws-runtime-state > span:first-child { display: inline-flex; align-items: center; gap: 5px; color: var(--c-fg); }
.pi-ws-runtime-state i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-primary); }
.pi-ws-runtime-state .running i { background: var(--c-info); animation: pi-ws-pulse 1.2s ease-in-out infinite; }
.pi-ws-runtime-state .warning { color: var(--c-warn); }
@keyframes pi-ws-pulse { 50% { opacity: .35; } }
.pi-ws-head-actions { display: flex; align-items: center; gap: 5px; }
.pi-ws-head-actions .btn { min-height: 44px; }
.pi-ws-mobile-actions { display: none; }
.pi-ws-model-bar { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(110px, .35fr); gap: 8px; flex: 0 0 auto; padding: 8px 12px; border-bottom: 1px solid var(--c-border); background: color-mix(in oklab, var(--c-surface) 52%, var(--c-bg-elevated)); }
.pi-ws-model-bar label { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; }
.pi-ws-model-bar label > span { color: var(--c-muted); font-size: 9px; }
.pi-ws-model-bar select, .pi-ws-composer-foot select, .pi-ws-login-prompt select, .pi-ws-login-prompt input { width: 100%; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-bg-elevated); color: var(--c-fg); padding-inline: 10px; font-size: 10px; }
.pi-ws-chat-log { display: flex; min-height: 0; flex: 1; flex-direction: column; gap: 16px; padding: 20px clamp(12px, 3vw, 38px); overflow-y: auto; overflow-x: hidden; }
.pi-ws-chat-empty { display: grid; min-height: 100%; place-content: center; justify-items: center; gap: 6px; color: var(--c-muted); text-align: center; }
.pi-ws-chat-empty > span { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid var(--c-border-strong); border-radius: var(--r-sm); color: var(--c-primary); font: 10px var(--font-mono); }
.pi-ws-chat-empty b { color: var(--c-fg); font-size: 13px; }
.pi-ws-chat-empty p { max-width: 380px; font-size: 10px; line-height: 1.6; }
.pi-ws-message { display: grid; width: min(760px, 88%); align-self: flex-start; gap: 6px; }
.pi-ws-message.user { align-self: flex-end; }
.pi-ws-message.tool { width: min(680px, 86%); }
.pi-ws-message-meta { display: flex; align-items: center; gap: 7px; padding-inline: 2px; }
.pi-ws-message-meta b { color: var(--c-fg); font-size: 9px; }
.pi-ws-message-meta span { color: var(--c-muted); font-size: 8px; }
.pi-ws-message-text { padding: 11px 13px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-bg-elevated); color: var(--c-fg); font-size: 11px; line-height: 1.72; overflow-wrap: anywhere; white-space: pre-wrap; }
.pi-ws-message.user .pi-ws-message-text { border-color: color-mix(in oklab, var(--c-primary) 32%, var(--c-border)); background: color-mix(in oklab, var(--c-primary) 9%, var(--c-bg-elevated)); }
.pi-ws-message.tool .pi-ws-message-text { border-style: dashed; color: var(--c-muted); font-family: var(--font-mono); font-size: 9px; }
.pi-ws-tool-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.pi-ws-tool-chips span { padding: 4px 7px; border: 1px solid var(--c-border); border-radius: 999px; background: var(--c-surface); color: var(--c-muted); font: 8px var(--font-mono); }
.pi-ws-stream-pulse { display: flex; gap: 3px; padding: 2px 5px; }
.pi-ws-stream-pulse i { width: 4px; height: 4px; border-radius: 50%; background: var(--c-primary); animation: pi-ws-pulse 1s ease-in-out infinite; }
.pi-ws-stream-pulse i:nth-child(2) { animation-delay: .15s; }.pi-ws-stream-pulse i:nth-child(3) { animation-delay: .3s; }
.pi-ws-composer-wrap { flex: 0 0 auto; padding: 9px 12px 11px; border-top: 1px solid var(--c-border); background: var(--c-bg-elevated); }
.pi-ws-composer { border: 1px solid var(--c-border-strong); border-radius: var(--r-md); background: var(--c-bg); }
.pi-ws-composer:focus-within { border-color: var(--c-info); box-shadow: 0 0 0 2px color-mix(in oklab, var(--c-info) 11%, transparent); }
.pi-ws-composer textarea, .pi-ws-interaction textarea { display: block; width: 100%; min-height: 68px; resize: vertical; border: 0; outline: 0; background: transparent; color: var(--c-fg); padding: 11px 12px 5px; font: 11px/1.55 var(--font-sans); }
.pi-ws-composer-foot { display: grid; grid-template-columns: minmax(160px, 230px) auto 1fr; align-items: center; gap: 8px; padding: 6px 7px 7px 11px; }
.pi-ws-composer-foot > label { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px; }
.pi-ws-composer-foot > label > span, .pi-ws-composer-foot > span { color: var(--c-muted); font-size: 8px; }
.pi-ws-composer-foot > div { display: flex; justify-content: flex-end; gap: 6px; }
.pi-ws-composer-foot .btn { min-width: 72px; min-height: 44px; }
.pi-ws-inline-error { display: flex; min-height: 44px; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; padding: 7px 9px; border: 1px solid color-mix(in oklab, var(--c-danger) 40%, var(--c-border)); border-radius: var(--r-sm); color: var(--c-danger); font-size: 9px; }
.pi-ws-inline-error button { width: 44px; border: 0; background: transparent; color: inherit; font-size: 18px; }
.pi-ws-interaction { display: grid; grid-template-columns: minmax(0, 1fr) minmax(160px, .7fr); align-items: end; gap: 10px; margin-bottom: 7px; padding: 10px; border: 1px solid color-mix(in oklab, var(--c-warn) 38%, var(--c-border)); border-radius: var(--r-sm); background: color-mix(in oklab, var(--c-warn) 6%, var(--c-bg)); }
.pi-ws-interaction > div:first-child { display: grid; gap: 3px; }
.pi-ws-interaction span { color: var(--c-warn); font: 8px var(--font-mono); letter-spacing: .1em; }
.pi-ws-interaction b { color: var(--c-fg); font-size: 10px; }.pi-ws-interaction p { color: var(--c-muted); font-size: 9px; line-height: 1.5; }
.pi-ws-inline-actions, .pi-ws-extension-options { display: flex; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.pi-ws-extension-options button { padding-inline: 10px; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-surface); color: var(--c-fg); }
.pi-ws-inspector { display: flex; flex-direction: column; overflow: hidden; border-left: 1px solid var(--c-border); }
.pi-ws-inspector-head > button { display: none; }
.pi-ws-inspector-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); flex: 0 0 auto; border-bottom: 1px solid var(--c-border); }
.pi-ws-inspector-tabs button { border: 0; border-right: 1px solid var(--c-border); background: transparent; color: var(--c-muted); font-size: 9px; }
.pi-ws-inspector-tabs button:last-child { border-right: 0; }
.pi-ws-inspector-tabs button.selected { box-shadow: inset 0 -2px var(--c-primary); background: color-mix(in oklab, var(--c-primary) 7%, transparent); color: var(--c-fg); }
.pi-ws-inspector-body { min-height: 0; flex: 1; padding: 10px; overflow-y: auto; overflow-x: hidden; }
.pi-ws-resource-tabs { display: grid; gap: 5px; }
.pi-ws-resource-tabs button { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 9px; border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; color: var(--c-muted); font-size: 9px; text-align: left; }
.pi-ws-resource-tabs button.selected { border-color: var(--c-border); background: var(--c-surface); color: var(--c-fg); }
.pi-ws-resource-tabs em { color: var(--c-primary); font: 8px var(--font-mono); font-style: normal; }
.pi-ws-boundary-note { display: grid; gap: 4px; margin: 9px 0; padding: 9px; border: 1px solid color-mix(in oklab, var(--c-warn) 35%, var(--c-border)); border-radius: var(--r-sm); background: color-mix(in oklab, var(--c-warn) 6%, transparent); }
.pi-ws-boundary-note b { color: var(--c-warn); font-size: 9px; }.pi-ws-boundary-note p { color: var(--c-muted); font-size: 8px; line-height: 1.55; }
.pi-ws-resource-create { display: grid; gap: 4px; margin: 8px 0; padding: 8px; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-surface); }
.pi-ws-resource-create > div { display: flex; gap: 5px; flex-wrap: wrap; }
.pi-ws-resource-create button, .pi-ws-resource-actions button { min-height: 44px; padding-inline: 9px; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-bg-elevated); color: var(--c-fg); font-size: 9px; }
.pi-ws-resource-create small { color: var(--c-muted); font-size: 8px; }
.pi-ws-resource-list, .pi-ws-provider-list { display: grid; gap: 6px; margin-top: 8px; }
.pi-ws-resource-list article, .pi-ws-provider-list article { display: grid; gap: 6px; padding: 9px; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-surface); }
.pi-ws-resource-list article > div, .pi-ws-provider-list article > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.pi-ws-resource-list b, .pi-ws-provider-list b { color: var(--c-fg); font-size: 9px; overflow-wrap: anywhere; }
.pi-ws-resource-list span { color: var(--c-muted); font: 8px var(--font-mono); }.pi-ws-resource-list span.ready { color: var(--c-primary); }.pi-ws-resource-list span.blocked { color: var(--c-danger); }.pi-ws-resource-list span.warning { color: var(--c-warn); }
.pi-ws-resource-list small, .pi-ws-resource-list p { color: var(--c-muted); font-size: 8px; line-height: 1.5; overflow-wrap: anywhere; }
.pi-ws-resource-actions { display: flex; justify-content: flex-start !important; gap: 5px; flex-wrap: wrap; padding-top: 3px; border-top: 1px solid var(--c-border); }
.pi-ws-resource-actions button.danger { color: var(--c-danger); }
.pi-ws-provider-list article > div:first-child { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; }
.pi-ws-provider-mark { display: grid; width: 30px; height: 30px; place-items: center; border-radius: var(--r-sm); background: color-mix(in oklab, var(--c-primary) 10%, var(--c-bg)); color: var(--c-primary); font: 9px var(--font-mono); }
.pi-ws-provider-list article > div:first-child > span:nth-child(2) { display: grid; gap: 2px; }
.pi-ws-provider-list small { color: var(--c-muted); font-size: 8px; }.pi-ws-provider-list em { color: var(--c-muted); font: 8px var(--font-mono); font-style: normal; }.pi-ws-provider-list em.ready { color: var(--c-primary); }
.pi-ws-provider-list article > div:last-child { display: flex; gap: 5px; flex-wrap: wrap; }
.pi-ws-provider-list article > div:last-child button, .pi-ws-session-actions button, .pi-ws-fork-list button { padding: 6px 9px; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-bg-elevated); color: var(--c-fg); font-size: 9px; }
.pi-ws-provider-list button.danger { color: var(--c-danger); }
.pi-ws-secret-note { margin-top: 9px; color: var(--c-muted); font-size: 8px; line-height: 1.55; }
.pi-ws-readonly-note { margin-bottom: 7px; padding: 8px 10px; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-surface); color: var(--c-muted); font-size: 9px; line-height: 1.5; }
.pi-ws-login-card { display: grid; gap: 8px; margin-bottom: 10px; padding: 10px; border: 1px solid color-mix(in oklab, var(--c-info) 38%, var(--c-border)); border-radius: var(--r-sm); background: color-mix(in oklab, var(--c-info) 5%, transparent); }
.pi-ws-login-card > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pi-ws-login-card > header > div { display: grid; gap: 2px; }.pi-ws-login-card > header span { color: var(--c-info); font: 8px var(--font-mono); }.pi-ws-login-card > header b { color: var(--c-fg); font-size: 10px; }
.pi-ws-login-card > header em { color: var(--c-warn); font: 8px var(--font-mono); font-style: normal; }.pi-ws-login-card > header em.complete { color: var(--c-primary); }.pi-ws-login-card > header em.error { color: var(--c-danger); }
.pi-ws-login-notice { display: grid; gap: 4px; padding: 8px; border-radius: var(--r-sm); background: var(--c-surface); }
.pi-ws-login-notice a { color: var(--c-info); font-size: 9px; text-decoration: none; }.pi-ws-login-notice code { color: var(--c-fg); font: 600 13px var(--font-mono); letter-spacing: .08em; overflow-wrap: anywhere; }.pi-ws-login-notice p, .pi-ws-login-card > p { color: var(--c-muted); font-size: 8px; line-height: 1.5; }.pi-ws-login-card > p.error { color: var(--c-danger); }
.pi-ws-login-prompt { display: grid; gap: 7px; }.pi-ws-login-prompt label { display: grid; gap: 5px; }.pi-ws-login-prompt label > span { color: var(--c-fg); font-size: 9px; line-height: 1.5; }.pi-ws-login-prompt .btn, .pi-ws-login-card > .btn { width: 100%; min-height: 44px; }
.pi-ws-session-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pi-ws-session-facts > div { padding: 8px; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-surface); }.pi-ws-session-facts dt { color: var(--c-muted); font-size: 8px; }.pi-ws-session-facts dd { margin-top: 3px; overflow: hidden; color: var(--c-fg); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.pi-ws-session-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 8px; }
.pi-ws-fork-list, .pi-ws-command-list { margin-top: 13px; }.pi-ws-fork-list > header, .pi-ws-command-list > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }.pi-ws-fork-list header b, .pi-ws-command-list header b { color: var(--c-fg); font-size: 9px; }.pi-ws-fork-list header span, .pi-ws-command-list header span { color: var(--c-primary); font: 8px var(--font-mono); }
.pi-ws-fork-list > button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; text-align: left; }.pi-ws-fork-list > button span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.45; }.pi-ws-fork-list > button em { color: var(--c-primary); font-size: 8px; font-style: normal; white-space: nowrap; }
.pi-ws-command-list > div { display: flex; gap: 4px; flex-wrap: wrap; }.pi-ws-command-list code { padding: 4px 6px; border: 1px solid var(--c-border); border-radius: 4px; color: var(--c-muted); font-size: 8px; }
.pi-ws-event-list { display: grid; gap: 1px; }.pi-ws-event-list article { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: start; gap: 7px; min-height: 46px; padding: 8px 5px; border-bottom: 1px solid var(--c-border); }.pi-ws-event-list i { width: 6px; height: 6px; margin-top: 3px; border-radius: 50%; background: var(--c-primary); }.pi-ws-event-list i.running { background: var(--c-info); }.pi-ws-event-list i.error { background: var(--c-danger); }.pi-ws-event-list article > div { display: grid; gap: 2px; }.pi-ws-event-list b { color: var(--c-fg); font-size: 9px; }.pi-ws-event-list span, .pi-ws-event-list time { color: var(--c-muted); font-size: 8px; }.pi-ws-event-list time { white-space: nowrap; }
.pi-ws-panel-empty { display: grid; gap: 4px; padding: 14px 8px; color: var(--c-muted); text-align: center; }.pi-ws-panel-empty b { color: var(--c-fg); font-size: 10px; }.pi-ws-panel-empty p { font-size: 8px; line-height: 1.55; }
.pi-ws-backdrop { display: none; }

@media (max-width: 1279px) {
  .agent-control-facts { grid-template-columns: 1fr 1fr; }
  .agent-control-subgrid { grid-template-columns: 1fr; }
  #page-agent { position: relative; }
  .agent-workbench { display: block; overflow: hidden; }
  .agent-chat { width: 100%; height: 100%; }
  .agent-conversations, .agent-inspector { position: absolute; inset-block: 0; z-index: 5; width: min(86vw, 320px); max-height: none; transform: translateX(-105%); transition: transform 180ms cubic-bezier(.22, 1, .36, 1); box-shadow: var(--sh-float); }
  .agent-conversations { left: 0; border-right: 1px solid var(--c-border); border-bottom: 0; }
  .agent-inspector { right: 0; left: auto; border-top: 0; border-left: 1px solid var(--c-border); transform: translateX(105%); }
  #page-agent.show-agent-sessions .agent-conversations, #page-agent.show-agent-inspector .agent-inspector { transform: translateX(0); }
  .agent-mobile-tools { display: flex; align-items: center; gap: 4px; }
  .agent-mobile-tools button, .agent-mobile-close { display: grid; width: 44px; height: 44px; place-items: center; border: 0; border-radius: var(--r-sm); background: var(--c-surface); color: var(--c-muted); cursor: pointer; }
  .agent-mobile-tools svg, .agent-mobile-close svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .agent-mobile-backdrop { position: absolute; inset: 0; z-index: 4; border: 0; background: color-mix(in oklab, var(--c-bg) 56%, transparent); }
  #page-agent.show-agent-sessions .agent-mobile-backdrop, #page-agent.show-agent-inspector .agent-mobile-backdrop { display: block; }
  .pi-workspace { display: block; }
  .pi-ws-main { width: 100%; height: 100%; }
  .pi-ws-sessions, .pi-ws-inspector { position: absolute; inset-block: 0; z-index: 7; width: min(88vw, 330px); transform: translateX(-105%); transition: transform 180ms cubic-bezier(.22, 1, .36, 1); box-shadow: var(--sh-float); }
  .pi-ws-sessions { left: 0; }
  .pi-ws-inspector { right: 0; left: auto; transform: translateX(105%); }
  .pi-workspace.sessions-open .pi-ws-sessions, .pi-workspace.inspector-open .pi-ws-inspector { transform: translateX(0); }
  .pi-ws-inspector-head > button, .pi-ws-mobile-actions { display: grid; }
  .pi-ws-mobile-actions { flex: 0 0 auto; }
  .pi-ws-backdrop { position: absolute; inset: 0; z-index: 6; border: 0; background: color-mix(in oklab, var(--c-bg) 58%, transparent); }
  .pi-workspace.sessions-open .pi-ws-backdrop, .pi-workspace.inspector-open .pi-ws-backdrop { display: block; }
}

@media (max-width: 1023px) {
  .agent-surface-shell, .agent-workbench { height: auto; }
  .pi-ws-head-actions { display: none; }
  .pi-ws-title { max-width: min(240px, 42vw); }
}

@media (max-width: 480px) {
  .agent-oauth-event { align-items: flex-start; flex-direction: column; }
  .agent-control-inline-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .agent-control-inline-actions .btn { width: 100%; }
  .agent-control-facts { grid-template-columns: 1fr 1fr; }
  .agent-page-head .head-actions { display: none; }
  .agent-message-error { flex-direction: column; }
  .agent-message-error .btn { width: 100%; min-height: 44px; }
  .agent-composer-blocker { align-items: flex-start; flex-wrap: wrap; }
  .agent-composer-configure { width: 100%; min-height: 44px; margin-left: 24px; }
  .agent-surface-tabs { flex-basis: 44px; padding-inline: 4px; }
  .agent-surface-tabs button { min-width: 0; flex: 1; min-height: 44px; padding-inline: 8px; }
  .agent-dsh-workspace > header { align-items: flex-start; padding: 8px 10px; }
  .agent-dsh-workspace > header > div:last-child { display: grid; grid-template-columns: 1fr 1fr; }
  .agent-dsh-workspace > header .btn { min-height: 44px; white-space: nowrap; }
  .agent-workbench { min-height: 0; border-inline: 0; border-radius: 0; }
  .agent-runtime-tabs { min-height: 44px; }
  .agent-runtime-switch { min-height: 44px; padding: 5px 9px; }
  .agent-runtime-switch b { font-size: 11px; }
  .agent-runtime-summary { grid-template-columns: minmax(0, 1fr) auto auto; min-height: 42px; gap: 6px; padding: 5px 8px; }
  .agent-runtime-copy > b, .agent-runtime-copy > small { white-space: nowrap; }
  .agent-runtime-copy > span { display: none; }
  .agent-runtime-disclosure-label { font-size: 0; }
  .agent-runtime-disclosure-label i { font-size: 12px; }
  .agent-runtime-detail-panel { grid-template-columns: 1fr; padding-inline: 9px; }
  .agent-runtime-contract { justify-content: flex-start; }
  .agent-runtime-capabilities { min-width: 0; justify-content: flex-start; }
  .agent-runtime-mobile-tools { align-self: center; margin-right: 6px; }
  .agent-chat-head { min-height: 48px; padding: 7px 10px; }
  .agent-chat-log { padding: 14px 10px; }
  .agent-message { max-width: 95%; }
  .agent-composer-wrap { padding: 8px; }
  .agent-output-modes button, .agent-composer-foot .btn, .agent-quick-prompts button,
  .agent-task-actions .btn, .agent-approval .btn, .agent-task-switcher button { min-height: 44px; }
  .agent-composer textarea { min-height: 66px; }
  .agent-quick-prompts { display: grid; grid-template-columns: 1fr; width: 100%; }
  .agent-quick-prompts button { justify-content: space-between; }
  .agent-inspector-tabs button { min-height: 44px; }
  .pi-workspace-status { padding: 18px; }
  .pi-ws-main-head { gap: 6px; padding-inline: 7px; }
  .pi-ws-title { max-width: min(145px, 48vw); }
  .pi-ws-title > span { display: none; }
  .pi-ws-runtime-state { justify-content: flex-start; }
  .pi-ws-runtime-state > span:nth-child(n+2) { display: none; }
  .pi-ws-model-bar { grid-template-columns: 1fr; gap: 6px; padding: 7px 8px; }
  .pi-ws-model-bar label { grid-template-columns: 42px minmax(0, 1fr); }
  .pi-ws-chat-log { gap: 13px; padding: 14px 9px; }
  .pi-ws-message, .pi-ws-message.tool { width: 96%; }
  .pi-ws-message-text { padding: 10px; font-size: 11px; }
  .pi-ws-composer-wrap { padding: 7px; }
  .pi-ws-composer textarea { min-height: 62px; }
  .pi-ws-composer-foot { grid-template-columns: 1fr auto; padding: 5px 5px 5px 8px; }
  .pi-ws-composer-foot > label { grid-column: 1 / -1; }
  .pi-ws-composer-foot > div { gap: 4px; }
  .pi-ws-composer-foot .btn { min-width: 64px; }
  .pi-ws-interaction { grid-template-columns: 1fr; }
  .pi-ws-sessions, .pi-ws-inspector { width: min(92vw, 330px); }
  .agent-dsh-workspace > header span,
  .agent-dsh-workspace > header small,
  .agent-dsh-loading b,
  .agent-panel-head > div:first-child span,
  .agent-panel-state,
  .agent-privacy-foot,
  .agent-chat-head span,
  .agent-skills-head span,
  .agent-skills-head b,
  .agent-skills p,
  .agent-skill-pills span,
  .agent-skills > button,
  .agent-runtime-switch small,
  .agent-runtime-switch em,
  .agent-runtime-copy > span,
  .agent-runtime-copy > small,
  .agent-runtime-contract > span:not(.agent-readiness),
  .agent-readiness,
  .agent-runtime-capabilities span,
  .agent-conversation-row small,
  .agent-conversation-meta em,
  .agent-conversation-meta i,
  .agent-message-meta b,
  .agent-message-meta span,
  .agent-chat-loading,
  .agent-thinking b,
  .agent-thinking small,
  .agent-output-modes button,
  .agent-composer-foot > span,
  .agent-composer-blocker,
  .agent-draft-disclaimer,
  .agent-inspector-toolbar span,
  .agent-inspector-head span,
  .agent-inspector-head b,
  .agent-inspector-note,
  .agent-inspector-truth b,
  .agent-inspector-truth p,
  .agent-task-facts dt,
  .agent-task-facts dd,
  .agent-task-error b,
  .agent-task-error span,
  .agent-inspector-section h4,
  .agent-task-events > div > span,
  .agent-task-events b,
  .agent-task-events small,
  .agent-muted,
  .agent-task-switcher span,
  .agent-task-switcher small,
  .agent-inspector-empty > p,
  .agent-inspector-empty summary,
  .agent-inspector-empty code,
  .agent-inspector-empty details span,
  .agent-approval span,
  .agent-approval b,
  .agent-approval p,
  .agent-approval small,
  .agent-workbench-loading b,
  .agent-run-id-list code,
  .agent-evidence-list code,
  .agent-evidence-list span,
  .agent-evidence-list small,
  .agent-inspector-tools code,
  .agent-inspector-tools small,
  .agent-inspector-tools > article > div span,
  .agent-inspector-tools p,
  .agent-boundary-list article > span,
  .agent-boundary-list b,
  .agent-boundary-list p,
  .agent-runtime-gates span,
  .agent-runtime-gates b,
  .agent-runtime-gates small { font-size: 11px; }
  .pi-ws-sessions > header span,
  .pi-ws-inspector-head span,
  .pi-ws-session-row b,
  .pi-ws-session-row small,
  .pi-ws-session-row em,
  .pi-ws-sessions > footer span,
  .pi-ws-sessions > footer small,
  .pi-ws-runtime-state,
  .pi-ws-model-bar label > span,
  .pi-ws-model-bar select,
  .pi-ws-composer-foot select,
  .pi-ws-login-prompt select,
  .pi-ws-login-prompt input,
  .pi-ws-chat-empty p,
  .pi-ws-message-meta b,
  .pi-ws-message-meta span,
  .pi-ws-message.tool .pi-ws-message-text,
  .pi-ws-tool-chips span,
  .pi-ws-composer-foot > label > span,
  .pi-ws-composer-foot > span,
  .pi-ws-inline-error,
  .pi-ws-interaction span,
  .pi-ws-interaction b,
  .pi-ws-interaction p,
  .pi-ws-inspector-tabs button,
  .pi-ws-resource-tabs button,
  .pi-ws-resource-tabs em,
  .pi-ws-boundary-note b,
  .pi-ws-boundary-note p,
  .pi-ws-resource-create button,
  .pi-ws-resource-actions button,
  .pi-ws-resource-create small,
  .pi-ws-resource-list b,
  .pi-ws-provider-list b,
  .pi-ws-resource-list span,
  .pi-ws-resource-list small,
  .pi-ws-resource-list p,
  .pi-ws-provider-list small,
  .pi-ws-provider-list em,
  .pi-ws-provider-list article > div:last-child button,
  .pi-ws-session-actions button,
  .pi-ws-fork-list button,
  .pi-ws-secret-note,
  .pi-ws-readonly-note,
  .pi-ws-login-card > header span,
  .pi-ws-login-card > header b,
  .pi-ws-login-card > header em,
  .pi-ws-login-notice a,
  .pi-ws-login-notice p,
  .pi-ws-login-card > p,
  .pi-ws-login-prompt label > span,
  .pi-ws-session-facts dt,
  .pi-ws-session-facts dd,
  .pi-ws-fork-list header b,
  .pi-ws-command-list header b,
  .pi-ws-fork-list header span,
  .pi-ws-command-list header span,
  .pi-ws-fork-list > button em,
  .pi-ws-command-list code,
  .pi-ws-event-list b,
  .pi-ws-event-list span,
  .pi-ws-event-list time,
  .pi-ws-panel-empty b,
  .pi-ws-panel-empty p { font-size: 11px; }
  .pi-ws-event-list time { white-space: normal; text-align: right; }
}

@media (max-height: 700px) {
  .agent-runtime-tabs { min-height: 44px; }
  .agent-runtime-switch { min-height: 44px; padding-block: 5px; }
  .agent-runtime-summary { min-height: 38px; padding-block: 4px; }
  .agent-chat-head { min-height: 44px; padding-block: 6px; }
  .agent-chat-log { padding-block: 10px; }
  .agent-chat-empty { gap: 6px; padding-block: 14px; }
  .agent-orbit { width: 48px; height: 48px; font-size: 20px; }
  .agent-composer-wrap { padding-top: 6px; padding-bottom: max(7px, env(safe-area-inset-bottom)); }
  .agent-output-modes { margin-bottom: 5px; }
  .agent-composer textarea { min-height: 52px; max-height: min(96px, 18dvh); }
}

@media (pointer: coarse) {
  .agent-page-active button,
  .agent-page-active [role="button"] { min-width: 44px; min-height: 44px; }
  .agent-page-active input:not([type="checkbox"]):not([type="radio"]),
  .agent-page-active select,
  .agent-page-active textarea { min-height: 44px; }
}

/* 网关实时流：增量消息与连接状态使用独立的视觉层，避免和已归档消息混淆。 */
.agent-message--streaming {
  position: relative;
  width: min(760px, 88%);
  max-width: 88%;
  align-self: flex-start;
  gap: 9px;
}
.agent-message--streaming .agent-message-avatar {
  position: relative;
  overflow: visible;
  border: 1px solid color-mix(in oklab, var(--c-primary) 46%, var(--c-border));
  background: color-mix(in oklab, var(--c-primary) 12%, var(--c-surface));
  color: var(--c-primary);
}
.agent-message--streaming .agent-message-avatar::after {
  position: absolute;
  right: -3px;
  top: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--c-primary) 14%, transparent);
  content: "";
  animation: agent-stream-pulse 1.35s ease-in-out infinite;
}
.agent-message--streaming .agent-message-body { min-width: 0; flex: 1 1 auto; }
.agent-message--streaming .agent-message-meta { margin-bottom: 5px; }
.agent-message--streaming .agent-message-meta b { color: var(--c-primary); }
.agent-message--streaming .agent-stream-state {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--c-primary) 34%, var(--c-border));
  border-radius: 999px;
  background: color-mix(in oklab, var(--c-primary) 7%, transparent);
  color: var(--c-primary);
  font: 8px/1.2 var(--font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-message--streaming .agent-stream-text {
  position: relative;
  min-height: 44px;
  border-color: color-mix(in oklab, var(--c-primary) 34%, var(--c-border));
  background: linear-gradient(135deg, color-mix(in oklab, var(--c-primary) 7%, var(--c-bg-elevated)), var(--c-bg-elevated));
  box-shadow: inset 2px 0 color-mix(in oklab, var(--c-primary) 72%, transparent);
}
.agent-message--streaming .agent-stream-text::after {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 4px;
  vertical-align: -0.14em;
  border-radius: 2px;
  background: var(--c-primary);
  content: "";
  animation: agent-stream-caret .9s steps(1, end) infinite;
}
.agent-stream-hint {
  display: block;
  margin: 5px 2px 0;
  color: var(--c-muted);
  font-size: 8px;
  line-height: 1.45;
}
.agent-stream-connection {
  display: grid;
  grid-template-columns: auto minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-bottom: 7px;
  padding: 7px 9px;
  border: 1px solid color-mix(in oklab, var(--c-primary) 33%, var(--c-border));
  border-radius: var(--r-sm);
  background: color-mix(in oklab, var(--c-primary) 6%, var(--c-bg));
  color: var(--c-muted);
}
.agent-stream-connection > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--c-primary) 12%, transparent);
  animation: agent-stream-pulse 1.35s ease-in-out infinite;
}
.agent-stream-connection > b {
  min-width: 0;
  overflow: hidden;
  color: var(--c-fg);
  font-size: 9px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-stream-connection > small {
  min-width: 0;
  overflow: hidden;
  color: var(--c-muted);
  font-size: 8px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-stream-connection.fallback {
  border-color: color-mix(in oklab, var(--c-warn) 44%, var(--c-border));
  background: color-mix(in oklab, var(--c-warn) 7%, var(--c-bg));
}
.agent-stream-connection.fallback > span {
  background: var(--c-warn);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--c-warn) 13%, transparent);
}
.agent-stream-connection.fallback > b { color: var(--c-warn); }

.agent-capability-summary {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  min-width: 0;
  margin-top: 1px;
  padding: 8px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: color-mix(in oklab, var(--c-bg) 45%, var(--c-surface));
}
.agent-capability-summary-mark {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid var(--c-border-strong);
  border-radius: 6px;
  color: var(--c-muted);
  font: 700 11px/1 var(--font-mono);
}
.agent-capability-summary-copy { display: grid; min-width: 0; gap: 2px; }
.agent-capability-summary-copy b {
  overflow: hidden;
  color: var(--c-fg);
  font-size: 9.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-capability-summary-copy small,
.agent-capability-summary-copy p {
  color: var(--c-muted);
  font-size: 8px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.agent-capability-summary[data-state="ready"] {
  border-color: color-mix(in oklab, var(--c-primary) 34%, var(--c-border));
  background: color-mix(in oklab, var(--c-primary) 5%, var(--c-bg));
}
.agent-capability-summary[data-state="ready"] .agent-capability-summary-mark {
  border-color: color-mix(in oklab, var(--c-primary) 48%, var(--c-border));
  background: color-mix(in oklab, var(--c-primary) 12%, transparent);
  color: var(--c-primary);
}
.agent-capability-summary[data-state="partial"],
.agent-capability-summary[data-state="pending"] {
  border-color: color-mix(in oklab, var(--c-warn) 34%, var(--c-border));
  background: color-mix(in oklab, var(--c-warn) 5%, var(--c-bg));
}
.agent-capability-summary[data-state="partial"] .agent-capability-summary-mark,
.agent-capability-summary[data-state="pending"] .agent-capability-summary-mark {
  border-color: color-mix(in oklab, var(--c-warn) 48%, var(--c-border));
  color: var(--c-warn);
}
@keyframes agent-stream-pulse {
  50% { opacity: .42; transform: scale(.72); }
}
@keyframes agent-stream-caret {
  50% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .agent-message--streaming .agent-message-avatar::after,
  .agent-message--streaming .agent-stream-text::after,
  .agent-stream-connection > span { animation: none; }
}
@media (max-width: 480px) {
  .agent-message--streaming { width: 96%; max-width: 96%; }
  .agent-stream-connection { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .agent-stream-connection > small { grid-column: 2; white-space: normal; }
  .agent-stream-hint,
  .agent-capability-summary-copy small,
  .agent-capability-summary-copy p { font-size: 10px; }
  .agent-capability-summary-copy b { font-size: 11px; }
}