/* ═══════════════════════════════════════════════════════════════════════
   AgentHub Desktop — v3 Tokens + Full Layout
   ═══════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --font-sans: -apple-system, BlinkMacSystemFont, 'Inter', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --font-mono: 'SF Mono', 'Cascadia Code', 'JetBrains Mono', ui-monospace, monospace;
  --headline-lg: 700 2rem/1.2 var(--font-sans);
  --headline-md: 600 1.5rem/1.2 var(--font-sans);
  --headline-sm: 600 1.25rem/1.2 var(--font-sans);
  --title-sm: 600 1.125rem/1.2 var(--font-sans);
  --body-lg: 400 1rem/1.5 var(--font-sans);
  --body: 400 0.875rem/1.5 var(--font-sans);
  --label: 500 0.75rem/1.5 var(--font-sans);
  --label-xs: 600 0.625rem/1.5 var(--font-sans);
  --sp-xs: 4px; --sp-sm: 8px; --sp-md: 16px; --sp-lg: 24px; --sp-xl: 32px;
  --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-2xl: 24px; --r-full: 9999px;
  --e-0: none; --e-1: 0 1px 2px rgba(0,0,0,0.05); --e-2: 0 4px 16px rgba(0,0,0,0.07);
  --e-3: 0 12px 40px rgba(0,0,0,0.11); --e-4: 0 24px 60px rgba(0,0,0,0.16);
  --dur-fast: 90ms; --dur-normal: 180ms; --dur-medium: 260ms; --dur-panel: 520ms; --dur-enter: 360ms; --dur-pop: 220ms;
  --ease: cubic-bezier(0.2, 0, 0, 1); --ease-spring: cubic-bezier(0.18, 0.86, 0.24, 1); --ease-panel: cubic-bezier(0.16, 1, 0.3, 1); --ease-press: cubic-bezier(0.34, 1.56, 0.64, 1);
  --state-running: #5e8dcc; --state-thinking: #5e8dcc; --state-waiting: #c0883a;
  --state-success: #409467; --state-failed: #d15252; --state-cancelled: #858595;
  --role-orchestrator: #0071bc; --role-builder: #2f8fcb; --role-reviewer: #409467;
  --role-deployer: #2b8a9e; --role-researcher: #c0883a;
  --focus-ring: 0 0 0 3px var(--ring);
  --inspector-w: 400px;
}

[data-theme="light"] {
  --app-bg: #f7f6f9; --surface: #ffffff; --surface-dim: #f1f0f5; --surface-low: #faf9fc;
  --surface-high: #efedf5; --surface-highest: #e6e4ef;
  --hover-surface: rgba(26,26,46,0.045); --selected-surface: rgba(26,26,46,0.058);
  --selected-border: rgba(26,26,46,0.105);
  --surface-overlay: rgba(255,255,255,0.88); --surface-sidebar: rgba(250,249,252,0.88);
  --text-1: #1a1a2e; --text-2: #585870; --text-3: #9595ac; --text-inv: #ffffff;
  --bdr: rgba(0,0,0,0.055); --bdr-strong: rgba(0,0,0,0.095); --bdr-focus: #0071bc;
  --primary: #0071bc; --primary-hover: #005f9f;
  --primary-light: rgba(0,113,188,0.07); --primary-soft: rgba(0,113,188,0.13);
  --success: #409467; --success-bg: rgba(64,148,103,0.08);
  --warning: #c0883a; --warning-bg: rgba(192,136,58,0.08);
  --danger: #d15252; --danger-bg: rgba(209,82,82,0.06);
  --ring: rgba(0,113,188,0.24);
  --thinking-bg: rgba(94,141,204,0.06);
  --diff-add: #f2faf5; --diff-del: #fdf5f5;
  --diff-add-bdr: #c2e3d0; --diff-del-bdr: #ebc8c8;
}

[data-theme="dark"] {
  --app-bg: #1a1a20; --surface: #24242d; --surface-dim: #1e1e26; --surface-low: #282830;
  --surface-high: #2e2e38; --surface-highest: #383844;
  --hover-surface: rgba(255,255,255,0.055); --selected-surface: rgba(255,255,255,0.075);
  --selected-border: rgba(255,255,255,0.13);
  --surface-overlay: rgba(36,36,45,0.94); --surface-sidebar: rgba(30,30,38,0.92);
  --text-1: #e3e4e6; --text-2: #9a9aa4; --text-3: #606068; --text-inv: #1a1a20;
  --bdr: rgba(255,255,255,0.06); --bdr-strong: rgba(255,255,255,0.10); --bdr-focus: #29abe2;
  --primary: #29abe2; --primary-hover: #5bc1ee;
  --primary-light: rgba(41,171,226,0.10); --primary-soft: rgba(41,171,226,0.16);
  --success: #69c967; --success-bg: rgba(105,201,103,0.08);
  --warning: #d4aa4c; --warning-bg: rgba(212,170,76,0.08);
  --danger: #e87070; --danger-bg: rgba(232,112,112,0.06);
  --ring: rgba(41,171,226,0.28);
  --thinking-bg: rgba(41,171,226,0.10);
  --diff-add: rgba(105,201,103,0.06); --diff-del: rgba(232,112,112,0.06);
  --diff-add-bdr: rgba(105,201,103,0.2); --diff-del-bdr: rgba(232,112,112,0.2);
}

body { min-width: 1180px; font: var(--body); background: var(--app-bg); color: var(--text-1); -webkit-font-smoothing: antialiased; }

/* ── Desktop window chrome ── */
.window-chrome {
  height: 32px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--bdr);
  background: var(--surface-overlay);
  backdrop-filter: blur(20px);
  color: var(--text-2);
  user-select: none;
}
.window-drag {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 10px;
}
.window-brand-mark {
  width: 20px;
  height: 20px;
  border-radius: var(--r-sm);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.window-brand-mark img {
  width: 100%;
  height: 100%;
  display: block;
}
.window-title {
  font: 500 0.8125rem var(--font-sans);
  color: var(--text-2);
}
.window-controls {
  height: 100%;
  display: flex;
  align-items: stretch;
}
.window-btn {
  width: 42px;
  border: 0;
  background: transparent;
  color: currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur-fast);
}
.window-btn:hover { background: var(--surface-high); color: var(--text-1); }
.window-btn.close:hover { background: var(--danger); color: white; }
.window-btn svg { width: 14px; height: 14px; }

/* ── Root layout ── */
.app { min-width: 1180px; display: flex; height: calc(100vh - 32px); overflow: hidden; }

/* ── Global Rail ── */
.rail { width: 52px; background: var(--surface-dim); border-right: 1px solid var(--bdr); display: flex; flex-direction: column; align-items: center; padding: 12px 0; gap: 6px; flex-shrink: 0; }
.rail-avatar { width: 36px; height: 36px; border-radius: var(--r-md); background: var(--primary); color: white; display: flex; align-items: center; justify-content: center; font: 600 13px var(--font-sans); cursor: pointer; margin-bottom: 8px; }
.rail-icon { width: 36px; height: 36px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; color: var(--text-3); cursor: pointer; transition: all var(--dur-fast); }
.rail-icon:hover { background: var(--hover-surface); color: var(--text-1); }
.rail-icon.active { background: var(--selected-surface); color: var(--primary); }
.rail-icon:focus-visible { outline: none; box-shadow: var(--focus-ring); color: var(--primary); }
.rail-spacer { flex: 1; }

/* ── Sidebar ── */
.sidebar { width: 260px; background: var(--surface-sidebar); border-right: 1px solid var(--bdr); display: flex; flex-direction: column; flex-shrink: 0; backdrop-filter: blur(20px); }
.app.is-workbench .sidebar { display: none; }
.sidebar-search { height: 38px; margin: 10px 10px 6px; padding: 0 14px; border-radius: var(--r-md); border: 1px solid var(--bdr); background: var(--surface-low); font: var(--body); color: var(--text-1); outline: none; transition: border-color var(--dur-normal), box-shadow var(--dur-normal), background var(--dur-normal); }
.sidebar-search::placeholder { color: var(--text-3); }
.sidebar-search:focus { border-color: var(--bdr-focus); box-shadow: var(--focus-ring); background: var(--surface); }
.sidebar-scroll { flex: 1; overflow-y: auto; padding: 0 6px; }
.sidebar-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-md); cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast); }
.sidebar-item:hover { background: var(--surface-high); }
.sidebar-item.active { background: var(--selected-surface); }
.sidebar-item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.sidebar-item.unread .sidebar-name { font-weight: 600; }
.sidebar-item.unread .sidebar-sub { color: var(--text-2); }
.sidebar-av { width: 30px; height: 30px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font: 600 12px var(--font-sans); color: white; flex-shrink: 0; }
.sidebar-av.human-av { background: linear-gradient(135deg, #2f8f73, #62b58b); }
.sidebar-av.human-av.alt { background: linear-gradient(135deg, #8f6b2f, #d0a14d); }
.role-orchestrator { background: var(--role-orchestrator); }
.role-builder { background: var(--role-builder); }
.role-reviewer { background: var(--role-reviewer); }
.role-deployer { background: var(--role-deployer); }
.muted-avatar { background: var(--surface-highest); color: var(--text-3); font-size: 10px; }
.row-fill { flex: 1; min-width: 0; }
.sidebar-name { font: 500 0.8125rem var(--font-sans); }
.sidebar-sub { font: 400 0.6875rem var(--font-sans); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-time { font: 400 0.625rem var(--font-mono); color: var(--text-3); margin-left: auto; flex-shrink: 0; }
.sidebar-meta { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.sidebar-meta .sidebar-time { margin-left: 0; }
.sidebar-badge { font: 600 0.625rem var(--font-sans); background: var(--primary); color: white; border-radius: var(--r-full); min-width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; padding: 0 5px; flex-shrink: 0; }

/* ── Main Zone ── */
.main { flex: 1 1 0; display: flex; flex-direction: column; min-width: 0; overflow: hidden; container-type: inline-size; }
.workspace-header { min-height: 72px; border-bottom: 1px solid var(--bdr); background: var(--surface); display: flex; align-items: flex-start; padding: 10px 18px 8px; gap: 10px; flex-shrink: 0; }
.workspace-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--state-success); flex-shrink: 0; }
.workspace-dot.offline { background: var(--text-3); }
.workspace-title { font: 600 0.875rem/1.25 var(--font-sans); letter-spacing: 0; white-space: nowrap; }
.workspace-thread { font: 400 0.75rem var(--font-sans); color: var(--text-3); margin-left: 4px; }
.workspace-agent-av { width: 32px; height: 32px; margin-top: 1px; border-radius: var(--r-sm); color: white; display: flex; align-items: center; justify-content: center; font: 600 13px var(--font-sans); flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22), var(--e-1); }
.workspace-agent-av[style*="surface-highest"] { color: var(--primary) !important; background: var(--primary-light) !important; border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent); box-shadow: none; }
.workspace-agent-copy { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; min-width: 0; overflow: hidden; }
.workspace-title-row { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; height: 22px; overflow: hidden; }
.workspace-agent-copy .workspace-title { flex: 0 1 auto; min-width: 0; max-width: 160px; margin: 0; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; }
.workspace-agent-copy .workspace-thread { flex: 0 1 auto; min-width: 0; max-width: clamp(42px, 14vw, 136px); margin-left: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 0.6875rem var(--font-sans); }
.workspace-kind { flex: 0 1 auto; min-width: 0; max-width: 112px; padding: 2px 7px; border-radius: var(--r-sm); background: var(--warning-bg); color: var(--warning); font: 500 0.6875rem/1.25 var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.workspace-model { flex: 0 1 auto; min-width: 0; max-width: clamp(92px, 18vw, 176px); padding: 2px 8px; border-radius: var(--r-full); background: var(--surface-high); color: var(--text-2); border: 1px solid var(--bdr); font: 500 0.6875rem/1.25 var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.workspace-model[hidden],
.workspace-tab[hidden] { display: none; }
.workspace-tabs { display: flex; align-items: center; gap: 6px; height: 28px; }
.workspace-tab { height: 28px; padding: 0 10px; border: 0; border-radius: var(--r-md); background: transparent; color: var(--text-2); display: inline-flex; align-items: center; gap: 5px; font: 500 0.8125rem var(--font-sans); cursor: pointer; position: relative; }
.workspace-tab svg { width: 15px; height: 15px; }
.workspace-tab:hover { color: var(--text-1); }
.workspace-tab.active { background: var(--selected-surface); color: var(--primary); }
.workspace-tab.icon-only { width: 28px; padding: 0; justify-content: center; color: var(--text-3); }
.workspace-tab.icon-only.active { width: 28px; padding: 0; }
.workspace-tab.project-tab { width: auto; padding: 0 10px; color: var(--text-2); }
.workspace-tab.project-tab.active { color: var(--primary); }
.workspace-tab.project-tab:hover { color: var(--primary); }
.workspace-actions { flex: 0 0 auto; margin-left: auto; align-self: center; display: flex; gap: 6px; align-items: center; }
.header-btn { width: 32px; height: 32px; border-radius: var(--r-md); border: none; background: transparent; color: var(--text-2); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.header-btn:hover { background: var(--surface-high); color: var(--text-1); }
.header-btn svg { width: 15px; height: 15px; }
.inspector-toggle-btn .icon-expand { display: none; }
.app.inspector-collapsed .inspector-toggle-btn .icon-collapse { display: none; }
.app.inspector-collapsed .inspector-toggle-btn .icon-expand { display: block; }

@container (max-width: 580px) {
  .workspace-agent-copy .workspace-thread { display: none; }
  .workspace-agent-copy .workspace-title { max-width: 118px; }
  .workspace-kind { max-width: 96px; }
  .workspace-model { max-width: 118px; }
}

@container (max-width: 470px) {
  .workspace-actions .header-btn:not(.inspector-toggle-btn):nth-child(-n + 2) { display: none; }
  .workspace-agent-copy .workspace-title { max-width: 92px; }
  .workspace-kind { max-width: 82px; }
  .workspace-model { max-width: 104px; }
}

/* ── Transcript ── */
.transcript { --chat-col: min(100%, 820px); --bubble-col: min(100%, 710px); --agent-inset: 34px; flex: 1; overflow-y: auto; padding: 16px 20px 28px; display: flex; flex-direction: column; gap: 10px; transition: padding var(--dur-panel) var(--ease-panel); }
.app.inspector-collapsed .transcript { --chat-col: min(100%, 960px); --bubble-col: min(100%, 850px); }
.date-div, .stack-indent, .page-view { width: var(--chat-col); align-self: center; }
.msg { display: flex; flex-direction: column; gap: 6px; width: var(--chat-col); max-width: var(--chat-col); }
.msg.agent { align-self: center; align-items: flex-start; }
.msg.user { align-self: center; align-items: flex-end; }
.msg.agent .msg-bubble, .msg.agent .approval-card, .msg.agent .deploy-card { width: min(calc(100% - var(--agent-inset)), var(--bubble-col)); max-width: calc(100% - var(--agent-inset)); margin-left: var(--agent-inset); }
.msg-header { display: flex; align-items: center; gap: 8px; padding: 0 2px; }
.msg.agent + .stack-indent.grouped,
.stack-indent.grouped + .stack-indent.grouped { margin-top: -4px; }
.stack-indent.grouped { position: relative; }
.msg-av { width: 24px; height: 24px; border-radius: var(--r-xs); display: flex; align-items: center; justify-content: center; font: 600 10px var(--font-sans); color: white; flex-shrink: 0; }
.msg-name { font: 500 0.75rem var(--font-sans); }
.msg-time { font: 400 0.625rem var(--font-mono); color: var(--text-3); }
.msg-bubble { padding: 14px 18px; border-radius: var(--r-lg); font: var(--body); line-height: 1.6; }
.msg.agent .msg-bubble { background: var(--surface); border: 1px solid var(--bdr); color: var(--text-1); }
.human-msg .msg-bubble { border-radius: var(--r-lg); background: var(--surface); }
.msg.user .msg-bubble { background: var(--primary); color: var(--text-inv); }
.msg.user .msg-header { justify-content: flex-end; }
.msg-meta { display: flex; align-items: center; gap: 8px; padding: 0 2px; flex-wrap: wrap; }
.msg-meta.compact { margin-top: 10px; }
.msg.wide { max-width: 100%; }

/* ── Thinking indicator ── */
.thinking { width: var(--chat-col); align-self: center; padding-left: var(--agent-inset); }
.thinking-pill { width: fit-content; max-width: min(var(--bubble-col), calc(100% - var(--agent-inset))); display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: var(--thinking-bg); border: 1px solid color-mix(in srgb, var(--state-thinking) 16%, transparent); border-radius: var(--r-full); }
.thinking-dots { display: flex; gap: 4px; }
.thinking-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--state-thinking); animation: pulse 1.4s infinite ease-in-out; }
.thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes pulse { 0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } }
.thinking-text { font: 500 0.75rem var(--font-sans); color: var(--state-thinking); white-space: nowrap; }

/* ── Agent history blocks ── */
.agent-block-row {
  width: var(--chat-col);
  align-self: center;
  padding-left: 0;
}
.agent-run-shell,
.agent-detail-block,
.agent-approval-card {
  width: min(calc(100% - var(--agent-inset)), var(--bubble-col));
  max-width: calc(100% - var(--agent-inset));
  align-self: auto;
  margin-left: var(--agent-inset);
}
.agent-run-shell { display: flex; flex-direction: column; gap: 8px; }
.run-session-card { min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--bdr); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--e-1); }
.run-session-card > div { flex: 1; min-width: 0; }
.run-session-card strong { display: block; font: 600 0.8125rem var(--font-sans); }
.run-session-card span:not(.file-icon) { color: var(--text-2); font: 400 0.75rem var(--font-sans); }
.run-session-card em { color: var(--text-3); font: 400 0.6875rem var(--font-mono); font-style: normal; }
.run-session-mark { width: 30px; height: 22px; border-radius: var(--r-full); display: inline-flex; align-items: center; justify-content: center; background: var(--primary-light); color: var(--primary); border: 1px solid color-mix(in srgb, var(--primary) 16%, transparent); font: 700 0.625rem var(--font-mono); flex: 0 0 auto; }
.run-step {
  width: min(calc(100% - var(--agent-inset)), var(--bubble-col));
  max-width: calc(100% - var(--agent-inset));
  margin-left: var(--agent-inset);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  transition: background var(--dur-normal) var(--ease), border-color var(--dur-normal) var(--ease), box-shadow var(--dur-normal) var(--ease), transform var(--dur-medium) var(--ease-panel);
}
.run-step.is-open {
  border-color: var(--bdr);
  background: var(--surface);
  box-shadow: var(--e-1);
}
.run-step-toggle {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  text-align: left;
  transition: background var(--dur-normal) var(--ease), color var(--dur-normal) var(--ease), transform var(--dur-pop) var(--ease-press);
}
.run-step-toggle:hover { background: var(--surface-high); color: var(--text-1); transform: translateY(-1px); }
.run-step-toggle:active { transform: translateY(0) scale(0.996); }
.run-step-icon {
  width: 22px;
  height: 22px;
  border-radius: var(--r-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid var(--bdr);
  color: var(--text-3);
  font: 700 0.6875rem var(--font-mono);
}
.run-step.running .run-step-icon { color: var(--state-thinking); border-color: color-mix(in srgb, var(--state-thinking) 28%, var(--bdr)); background: var(--thinking-bg); }
.run-step.completed .run-step-icon { color: var(--success); border-color: color-mix(in srgb, var(--success) 24%, var(--bdr)); background: var(--success-bg); }
.run-step-copy { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.run-step-copy strong { flex: 0 0 auto; color: var(--text-2); font: 500 0.8125rem var(--font-sans); }
.run-step-copy small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); font: 400 0.75rem var(--font-sans); }
.run-step.is-open .run-step-copy strong,
.run-step-toggle:hover .run-step-copy strong { color: var(--text-1); }
.run-step-status {
  flex: 0 0 auto;
  color: var(--text-3);
  font: 500 0.6875rem var(--font-sans);
}
.run-step-chevron {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--text-3);
  font: 700 0.875rem var(--font-sans);
  transition: transform var(--dur-medium) var(--ease-panel);
}
.run-step.is-open .run-step-chevron { transform: rotate(180deg); }
.run-step-detail {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-6px);
  transition: grid-template-rows var(--dur-panel) var(--ease-panel), opacity var(--dur-medium) var(--ease), transform var(--dur-medium) var(--ease);
}
.run-step.is-open .run-step-detail {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0);
}
.run-step-detail-inner {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 12px 12px;
}
.run-step-detail .tool-card,
.run-step-detail .diff-card,
.run-step-detail .file-change-card {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
}
.agent-timeline { width: 100%; padding: 11px 12px; border: 1px solid var(--bdr); border-radius: var(--r-md); background: var(--surface-low); }
.agent-timeline-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.agent-timeline-head strong { font: 600 0.75rem var(--font-sans); }
.agent-timeline-head span { color: var(--text-3); font: 500 0.6875rem var(--font-sans); }
.agent-timeline ol { display: flex; flex-direction: column; gap: 6px; list-style: none; }
.agent-timeline li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 30px; }
.timeline-marker { width: 18px; height: 18px; border-radius: var(--r-full); display: inline-flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--bdr); position: relative; }
.timeline-marker::after { content: ""; width: 7px; height: 7px; border-radius: var(--r-full); background: var(--text-3); }
.agent-timeline li.running .timeline-marker { background: var(--primary-light); border-color: transparent; }
.agent-timeline li.running .timeline-marker::after { background: var(--primary); }
.agent-timeline li.completed .timeline-marker { background: var(--success-bg); border-color: transparent; }
.agent-timeline li.completed .timeline-marker::after { background: var(--success); }
.agent-timeline li strong { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 0.75rem var(--font-sans); }
.agent-timeline li small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); font: 400 0.6875rem var(--font-sans); }
.agent-timeline li em { font: 500 0.6875rem var(--font-sans); color: var(--text-3); font-style: normal; }
.agent-detail-block { padding: 11px 13px; border: 1px solid var(--bdr); border-radius: var(--r-md); background: var(--surface); }
.agent-detail-block.is-nested { width: 100%; max-width: 100%; margin-left: 0; }
.detail-block-head { display: flex; align-items: center; gap: 8px; min-height: 22px; }
.detail-block-head strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 0.8125rem var(--font-sans); }
.detail-block-head em { margin-left: auto; padding: 2px 7px; border-radius: var(--r-full); background: var(--surface-high); color: var(--text-2); font: 600 0.6875rem var(--font-sans); font-style: normal; }
.agent-detail-block p { margin-top: 7px; color: var(--text-2); font: 400 0.75rem/1.55 var(--font-sans); }
.thinking-block { background: var(--thinking-bg); border-color: color-mix(in srgb, var(--state-thinking) 16%, transparent); }
.thinking-block .detail-block-head strong { color: var(--state-thinking); }
.chevron { color: var(--text-3); font: 700 0.75rem var(--font-sans); }
.block-kind { padding: 2px 7px; border-radius: var(--r-full); background: var(--surface-high); color: var(--text-2); font: 600 0.6875rem var(--font-sans); white-space: nowrap; }
.block-meta { margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--text-3); font: 400 0.6875rem var(--font-sans); }
.block-meta code { padding: 2px 5px; border-radius: var(--r-xs); background: var(--surface-low); color: var(--text-2); font: 500 0.6875rem var(--font-mono); }
.subagent-block.running, .child-agent-block.pending { background: var(--surface-low); }
.route-block { border-color: color-mix(in srgb, var(--primary) 18%, var(--bdr)); }
.context-usage-block .context-bar { height: 6px; margin: 10px 0 9px; border-radius: var(--r-full); background: var(--surface-high); overflow: hidden; }
.context-usage-block .context-bar span { display: block; width: var(--usage-percent); height: 100%; border-radius: inherit; background: var(--primary); }
.context-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.context-stats span { min-width: 0; color: var(--text-3); font: 400 0.6875rem var(--font-sans); }
.context-stats strong { display: block; margin-top: 2px; color: var(--text-1); font: 600 0.6875rem var(--font-mono); }
.context-usage-block small { display: block; margin-top: 8px; color: var(--text-3); font: 400 0.6875rem var(--font-sans); }

/* ── Tool Card ── */
.tool-card { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 14px; border-radius: var(--r-sm); background: var(--surface-low); border: 1px solid var(--bdr); }
.tool-icon { width: 32px; height: 32px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tool-icon-success { background: var(--success-bg); color: var(--success); }
.tool-icon svg { width: 16px; height: 16px; }
.tool-name { font: 500 0.8125rem var(--font-sans); }
.tool-path { font: 400 0.6875rem var(--font-sans); color: var(--text-3); }
.agent-tool-card { background: var(--surface); }
.agent-tool-card .tool-icon { width: 30px; height: 30px; border-radius: var(--r-sm); background: var(--primary-light); border: 1px solid color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); font: 700 0.6875rem var(--font-mono); }
.tool-main { flex: 1; min-width: 0; }
.tool-main p { margin-top: 4px; color: var(--text-2); font: 400 0.75rem/1.45 var(--font-sans); }
.tool-status { flex: 0 0 auto; padding: 2px 7px; border-radius: var(--r-full); background: var(--surface-high); color: var(--text-2); font: 600 0.6875rem var(--font-sans); }
.tool-status.completed { background: var(--success-bg); color: var(--success); }
.tool-status.running { background: var(--primary-light); color: var(--primary); }
.tool-status.failed { background: var(--danger-bg); color: var(--danger); }
.tool-status.pending { background: var(--warning-bg); color: var(--warning); }
.file-change-card { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--bdr); border-radius: var(--r-md); background: var(--surface); }
.file-change-card span { color: var(--text-2); font: 500 0.6875rem var(--font-sans); text-transform: capitalize; }
.file-change-card code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-1); font: 500 0.75rem var(--font-mono); }
.file-change-card em { font: 600 0.6875rem var(--font-mono); font-style: normal; }
.file-change-card .add { color: var(--success); }
.file-change-card .del { color: var(--danger); }
.file-change-card button { height: 26px; padding: 0 9px; border: 1px solid var(--bdr); border-radius: var(--r-sm); background: var(--surface-low); color: var(--primary); font: 600 0.6875rem var(--font-sans); cursor: pointer; }
.agent-history-diff { background: var(--surface); }
.agent-approval-card { margin-top: 0; }
.result-block.completed { border-color: color-mix(in srgb, var(--success) 20%, var(--bdr)); background: var(--success-bg); }

/* ── Diff Card ── */
.diff-card { width: 100%; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--bdr); background: var(--surface); }
.diff-header { padding: 8px 12px; font: 500 0.75rem var(--font-sans); color: var(--text-2); background: var(--surface-low); border-bottom: 1px solid var(--bdr); display: flex; align-items: center; gap: 6px; }
.diff-line { padding: 4px 12px; font: 400 0.75rem var(--font-mono); white-space: pre-wrap; word-break: break-all; line-height: 1.5; border-left: 0; }
.diff-add { background: var(--diff-add); color: var(--success); }
.diff-del { background: var(--diff-del); color: var(--danger); }
.diff-add::before, .diff-del::before { display: inline-block; width: 1.1em; opacity: 0.9; }
.diff-add::before { content: "+"; }
.diff-del::before { content: "-"; }
.diff-stat { margin-left: auto; font: 400 0.625rem var(--font-mono); color: var(--text-3); }

/* ── Approval Card ── */
.approval-card { padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--bdr); }
.approval-title { font: 500 0.875rem var(--font-sans); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.approval-body { font: 400 0.8125rem/1.5 var(--font-sans); color: var(--text-2); margin-bottom: 12px; }
.approval-actions { display: flex; gap: 8px; }

/* ── Deploy Card ── */
.deploy-card { background: var(--surface); border: 1px solid var(--bdr); border-radius: var(--r-lg); padding: 14px 16px; }
.deploy-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.deploy-title { font: 500 0.8125rem var(--font-sans); }
.deploy-body { font: 400 0.75rem var(--font-sans); color: var(--text-2); margin-bottom: 10px; }
.deploy-url-box { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-low); border: 1px solid var(--bdr); }
.deploy-url { font: 400 0.6875rem var(--font-mono); color: var(--primary); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deploy-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }

/* ── Badges ── */
.badge { display: inline-flex; align-items: center; gap: 5px; font: 500 0.75rem var(--font-sans); padding: 3px 10px; border-radius: var(--r-full); white-space: nowrap; }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }
.badge-primary { background: var(--primary-soft); color: var(--primary); }
.badge-thinking { background: var(--thinking-bg); color: var(--state-thinking); }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 18px; border-radius: var(--r-md); font: 500 0.875rem var(--font-sans); border: none; cursor: pointer; transition: background var(--dur-normal), color var(--dur-normal), transform var(--dur-normal), box-shadow var(--dur-normal); white-space: nowrap; }
.btn-p { background: var(--primary); color: var(--text-inv); }
.btn-p:hover { background: var(--primary-hover); box-shadow: var(--e-1); }
.btn-s { background: var(--surface); color: var(--text-1); border: 1px solid var(--bdr-strong); }
.btn-s:hover { background: var(--surface-high); }
.btn-g { background: transparent; color: var(--text-2); }
.btn-g:hover { background: var(--surface-high); color: var(--text-1); }
.btn-d { background: var(--danger); color: white; }
.btn-d:hover { filter: brightness(0.92); }
.btn:active { transform: translateY(1px); }

/* ── Composer: single lightweight floating capsule ── */
.composer { padding: 12px 22px 20px; border-top: none; background: var(--app-bg); }
.composer.is-hidden { display: none; }
.composer-bar { display: none; }
.composer-row { display: flex; align-items: center; gap: 10px; width: min(100%, 820px); min-height: 56px; margin: 0 auto; padding: 10px 14px 10px 16px; border: 1px solid var(--bdr); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--e-3); transition: width var(--dur-panel) var(--ease-panel), box-shadow var(--dur-normal) var(--ease), border-color var(--dur-normal) var(--ease); }
.app.inspector-collapsed .composer-row { width: min(100%, 960px); }
.composer-row::before { content: "+"; flex: 0 0 auto; width: 32px; height: 32px; border-radius: var(--r-full); color: var(--primary); background: var(--primary-light); font: 400 1.25rem/1 var(--font-sans); display: flex; align-items: center; justify-content: center; }
.composer-input { flex: 1 1 auto; min-width: 0; min-height: 32px; max-height: 96px; padding: 5px 2px; border-radius: 0; border: 0; background: transparent; font: var(--body); color: var(--text-1); outline: none; resize: none; }
.composer-input::placeholder { color: var(--text-3); }
.composer-input:focus { box-shadow: none; }
.send-btn { order: 2; width: 36px; height: 36px; border-radius: 50%; background: var(--primary); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--dur-normal) var(--ease), transform var(--dur-normal) var(--ease); flex-shrink: 0; }
.send-btn:hover { background: var(--primary-hover); transform: scale(1.05); }
.send-btn:active { transform: scale(0.95); }
.send-btn svg { width: 16px; height: 16px; }

/* ── Date divider ── */
.date-div { text-align: center; font: 400 0.625rem var(--font-sans); color: var(--text-3); padding: 4px 0; }

/* ── User bubble inline ── */
.user-msg-row { display: flex; justify-content: flex-end; align-items: flex-start; gap: 8px; width: var(--chat-col); align-self: center; }
.user-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-highest); color: var(--text-3); display: flex; align-items: center; justify-content: center; font: 600 0.6875rem var(--font-sans); flex-shrink: 0; }
.user-bubble { max-width: 72%; background: var(--primary); color: var(--text-inv); padding: 8px 14px; border-radius: var(--r-lg); font: 400 0.875rem/1.5 var(--font-sans); }
.stack-indent { padding-left: 0; padding-right: 0; }
.stack-indent .tool-card,
.stack-indent .diff-card,
.stack-indent .file-change-card {
  width: min(calc(100% - var(--agent-inset)), var(--bubble-col));
  max-width: calc(100% - var(--agent-inset));
  margin-left: var(--agent-inset);
}
.inline-title { font-weight: 500; margin-bottom: 6px; }
.inline-muted { color: var(--text-2); font-size: 0.8125rem; }
.inline-muted.loose { line-height: 1.7; }
.code-chip { font-family: var(--font-mono); background: var(--surface-high); padding: 2px 6px; border-radius: var(--r-xs); font-size: 0.75rem; }
.small-badge { font: var(--label-xs); padding: 1px 6px; }
.run-badge { margin-left: 8px; }
.link-action { margin-left: auto; font: 400 0.6875rem var(--font-sans); color: var(--primary); cursor: pointer; }
.mono-muted { font: 400 0.625rem var(--font-mono); color: var(--text-3); }
.timeline-block { margin-top: 4px; }
.inline-message-header { padding: 0 0 8px; }
.tiny-btn { height: 30px; padding: 0 12px; border-radius: var(--r-sm); font-size: 0.75rem; }
.state-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.state-dot.running { background: var(--state-running); }
.current-task-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.current-task-title { font: 500 0.75rem var(--font-sans); }
.current-task-status { margin-left: auto; }
.done-text { text-decoration: line-through; color: var(--text-3); }
.pending-ring { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--state-running); flex-shrink: 0; margin-top: 1px; }
.pending-text { font: 500 0.75rem var(--font-sans); color: var(--text-1); }
.todo-badge { background: var(--surface-high); color: var(--text-3); }
.cost-value { margin-left: auto; font: 400 0.8125rem var(--font-mono); color: var(--text-1); }
.cost-total { font: 600 0.8125rem var(--font-mono); color: var(--text-1); }
.cost-label-total { font: 600 0.75rem var(--font-sans); }
.section-divider { height: 1px; background: var(--bdr); margin: 4px 0; }
.insp-panel.active > .section-divider,
.person-panel > .section-divider { display: none; }

/* ── Right Inspector ── */
.inspector { position: relative; width: var(--inspector-w); background: var(--surface-low); border-left: 1px solid var(--bdr); display: flex; flex-direction: column; flex: 0 0 var(--inspector-w); min-width: 0; overflow: hidden; clip-path: inset(0 0 0 0); transition: flex-basis var(--dur-panel) var(--ease-panel), width var(--dur-panel) var(--ease-panel), clip-path var(--dur-panel) var(--ease-panel), border-color var(--dur-panel) var(--ease-panel), background var(--dur-normal) var(--ease); will-change: width, flex-basis, clip-path; }
.app.is-workbench .inspector { display: none; }
.app.inspector-collapsed .inspector { width: 0; flex-basis: 0; border-left-color: transparent; clip-path: inset(0 0 0 100%); pointer-events: none; }
.app.inspector-preview .inspector { width: var(--inspector-w); flex-basis: var(--inspector-w); background: var(--surface); }
.inspector-resizer { position: absolute; z-index: 5; top: 0; left: 0; width: 12px; height: 100%; cursor: col-resize; outline: none; touch-action: none; }
.inspector-resizer::after { content: ''; position: absolute; top: 10px; bottom: 10px; left: 0; width: 2px; border-radius: var(--r-full); background: transparent; transition: background var(--dur-normal) var(--ease), box-shadow var(--dur-normal) var(--ease); }
.inspector-resizer:hover::after,
.inspector-resizer:focus-visible::after,
body.is-resizing-inspector .inspector-resizer::after { background: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
body.is-resizing-inspector { cursor: col-resize; user-select: none; }
body.is-resizing-inspector .inspector { transition: none; }
body.is-resizing-inspector .main { transition: none; }
.monitor-head { width: var(--inspector-w); min-width: var(--inspector-w); height: 48px; padding: 0 10px 0 12px; border-bottom: 1px solid var(--bdr); background: var(--surface-low); display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 600 0.875rem var(--font-sans); }
.insp-body { width: var(--inspector-w); min-width: var(--inspector-w); }
.monitor-head,
.insp-body { opacity: 1; transform: translateX(0); transition: opacity 190ms var(--ease), transform var(--dur-panel) var(--ease-panel); transition-delay: 90ms; }
.app.inspector-collapsed .monitor-head,
.app.inspector-collapsed .insp-body { opacity: 0; transform: translateX(18px); transition-delay: 0ms; }
.inspector-tabs { flex: 1; min-width: 0; height: 32px; display: flex; align-items: center; gap: 6px; overflow: hidden; }
.inspector-tab { height: 28px; max-width: 128px; padding: 0 10px 0 8px; border: 0; border-radius: var(--r-md); background: transparent; color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 500 0.8125rem var(--font-sans); white-space: nowrap; cursor: pointer; }
.inspector-tab:hover { color: var(--text-1); }
.inspector-tab.active { background: var(--selected-surface); color: var(--primary); box-shadow: none; }
.inspector-tab-mark { width: 15px; height: 15px; border-radius: var(--r-full); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: currentColor; opacity: .72; }
.inspector-tab-mark svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; }
.inspector-tab-mark b { display: none; color: currentColor; font: 700 0.8125rem/1 var(--font-sans); transform: translateY(-.5px); }
.inspector-tab:hover .inspector-tab-mark { background: color-mix(in srgb, currentColor 13%, transparent); opacity: 1; }
.inspector-tab:hover .inspector-tab-mark svg { display: none; }
.inspector-tab:hover .inspector-tab-mark b { display: block; }
.inspector-window-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }
.inspector-window-actions button { width: 28px; height: 28px; border: 0; border-radius: var(--r-md); background: transparent; color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.inspector-window-actions button:hover { color: var(--text-1); background: var(--surface-high); }
.inspector-window-actions svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.insp-tabs { display: flex; border-bottom: 1px solid var(--bdr); padding: 0 8px; background: var(--surface); flex-shrink: 0; }
.insp-tab { padding: 10px 12px; font: 500 0.6875rem var(--font-sans); color: var(--text-3); cursor: pointer; border-bottom: 2px solid transparent; transition: all var(--dur-fast); }
.insp-tab:hover { color: var(--text-1); }
.insp-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.insp-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.insp-section-label { font: 600 0.625rem var(--font-sans); color: var(--text-3); text-transform: uppercase; letter-spacing: 0; margin-bottom: 4px; }
.insp-entry { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--bdr); font: 400 0.75rem var(--font-sans); color: var(--text-2); }
.insp-entry:last-child { border-bottom: none; }
.insp-check { color: var(--success); flex-shrink: 0; }
.insp-check svg { width: 14px; height: 14px; }
.insp-progress { height: 4px; background: var(--surface-highest); border-radius: 2px; overflow: hidden; margin: 6px 0 10px; }
.insp-progress-fill { height: 100%; border-radius: 2px; }
.insp-file { font: 400 0.75rem var(--font-sans); color: var(--text-2); display: flex; align-items: center; gap: 6px; padding: 4px 0; }
.insp-file svg { width: 14px; height: 14px; color: var(--text-3); flex-shrink: 0; }
.insp-file-size { margin-left: auto; font: 400 0.625rem var(--font-mono); color: var(--text-3); }
.insp-panel { display: none; }
.insp-panel.active { display: flex; flex-direction: column; gap: 12px; }
.monitor-section { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; border: 1px solid var(--bdr); border-radius: var(--r-md); background: var(--surface); transition: gap var(--dur-medium) var(--ease-panel), border-color var(--dur-normal) var(--ease), box-shadow var(--dur-normal) var(--ease); }
.monitor-section:hover { border-color: var(--bdr-strong); box-shadow: var(--e-1); }
.monitor-section.section-collapsed { gap: 0; }
.monitor-section-head { width: 100%; min-height: 30px; padding: 0 0 0 2px; color: var(--text-1); display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 500 0.75rem/1.5 var(--font-sans); }
.monitor-section-toggle { width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; transition: background var(--dur-normal) var(--ease), color var(--dur-normal) var(--ease), box-shadow var(--dur-normal) var(--ease), transform var(--dur-pop) var(--ease-press); }
.monitor-section-toggle:hover { background: var(--surface-high); color: var(--primary); transform: scale(1.04); }
.monitor-section-toggle:active { transform: scale(0.94); }
.monitor-section-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.monitor-section-toggle svg { width: 14px; height: 14px; padding: 0; border-radius: 0; color: currentColor; flex-shrink: 0; transition: transform var(--dur-medium) var(--ease-panel), color var(--dur-normal) var(--ease), background var(--dur-normal) var(--ease); }
.monitor-section.section-collapsed .monitor-section-toggle svg { transform: rotate(-90deg); }
.monitor-section > :not(.monitor-section-head) { max-height: 520px; overflow: hidden; opacity: 1; transform: translateY(0); transition: max-height var(--dur-panel) var(--ease-panel), opacity var(--dur-medium) var(--ease), transform var(--dur-medium) var(--ease); }
.monitor-section.section-collapsed > :not(.monitor-section-head) { max-height: 0; opacity: 0; transform: translateY(-4px); pointer-events: none; }
.monitor-list { display: flex; flex-direction: column; gap: 1px; }
.monitor-task { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; font: 400 0.75rem/1.4 var(--font-sans); color: var(--text-2); }
.monitor-task.done { color: var(--text-3); text-decoration: line-through; }
.monitor-task.active { color: var(--text-1); font-weight: 500; }
.monitor-check { width: 16px; height: 16px; margin-top: 1px; color: var(--success); flex-shrink: 0; }
.monitor-check svg { width: 16px; height: 16px; display: block; }
.monitor-active-dot { width: 16px; height: 16px; margin-top: 1px; border: 2px solid var(--primary); border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.monitor-active-dot span { width: 6px; height: 6px; border-radius: var(--r-full); background: var(--primary); }
.monitor-todo-dot { width: 16px; height: 16px; margin-top: 1px; border: 1px solid var(--bdr-strong); border-radius: var(--r-full); background: var(--surface); flex-shrink: 0; }
.monitor-kicker { font: 400 0.6875rem var(--font-sans); color: var(--text-3); margin-top: 1px; }
.monitor-subhead { font: 500 0.6875rem var(--font-sans); color: var(--text-2); margin-top: 2px; }
.monitor-file-list { display: flex; flex-direction: column; gap: 1px; }
.monitor-file { width: 100%; display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 32px; padding: 4px 7px; border: 0; border-radius: var(--r-sm); background: transparent; text-align: left; font: 400 0.75rem var(--font-sans); color: var(--text-2); cursor: pointer; transition: background var(--dur-normal) var(--ease), color var(--dur-normal) var(--ease), box-shadow var(--dur-normal) var(--ease), transform var(--dur-normal) var(--ease); }
.monitor-file:hover,
.monitor-file.is-open { background: var(--surface-high); color: var(--text-1); }
.monitor-file:hover { transform: translateX(1px); }
.monitor-file.is-open { box-shadow: none; }
.monitor-file:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.monitor-file.primary { color: var(--text-1); margin-bottom: 5px; font-weight: 500; }
.monitor-file svg { width: 14px; height: 14px; color: var(--text-3); flex-shrink: 0; }
.monitor-file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.monitor-file-action { margin-left: auto; width: 22px; height: 22px; border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; color: var(--text-3); opacity: 0; transform: translateX(-2px); transition: opacity var(--dur-normal) var(--ease), transform var(--dur-normal) var(--ease), background var(--dur-normal) var(--ease), color var(--dur-normal) var(--ease); }
.monitor-file-action svg { width: 14px; height: 14px; }
.monitor-file:hover .monitor-file-action,
.monitor-file:focus-visible .monitor-file-action,
.monitor-file.is-open .monitor-file-action { opacity: 1; transform: translateX(0); }
.monitor-file:hover .monitor-file-action,
.monitor-file.is-open .monitor-file-action { background: var(--surface-high); color: var(--primary); }

.readonly-editor { height: 100%; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--bdr); border-radius: var(--r-md); background: var(--surface); overflow: hidden; box-shadow: var(--e-1); animation: editorIn var(--dur-medium) var(--ease-spring); }
.editor-toolbar { min-height: 54px; padding: 10px 12px; border-bottom: 1px solid var(--bdr); display: flex; align-items: center; gap: 12px; background: color-mix(in srgb, var(--surface) 92%, var(--surface-low) 8%); }
.editor-file-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.editor-file-title .file-icon { width: 22px; height: 22px; }
.editor-file-title .file-icon svg { width: 22px; height: 22px; }
.editor-file-title strong { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 0.875rem/1.2 var(--font-sans); color: var(--text-1); }
.editor-file-title span { display: block; margin-top: 2px; font: 500 0.6875rem var(--font-sans); color: var(--text-3); }
.editor-close { width: 30px; height: 30px; border: 1px solid var(--bdr); border-radius: var(--r-sm); background: var(--surface); color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--dur-normal) var(--ease), color var(--dur-normal) var(--ease), box-shadow var(--dur-normal) var(--ease); }
.editor-close:hover { background: var(--surface-low); color: var(--text-1); box-shadow: var(--e-1); }
.editor-close:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.editor-close svg { width: 15px; height: 15px; }
.editor-meta { min-height: 30px; padding: 0 12px; border-bottom: 1px solid var(--bdr); display: flex; align-items: center; gap: 10px; color: var(--text-3); background: var(--surface-low); font: 500 0.6875rem var(--font-sans); overflow: hidden; }
.editor-meta span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor-meta span + span::before { content: ''; width: 4px; height: 4px; margin-right: 10px; border-radius: var(--r-full); background: var(--bdr-strong); display: inline-block; vertical-align: middle; }
.editor-code { flex: 1; min-height: 0; margin: 0; overflow: auto; background: color-mix(in srgb, var(--surface-low) 72%, var(--surface) 28%); color: var(--text-1); font: 400 0.75rem/1.65 var(--font-mono); tab-size: 2; }
.editor-code:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }
.editor-code code { display: block; min-width: max-content; padding: 12px 0; }
.editor-code span { display: grid; grid-template-columns: 42px minmax(0, 1fr); min-height: 20px; }
.editor-code span:hover { background: var(--primary-light); }
.editor-code em { padding-right: 10px; color: var(--text-3); text-align: right; font-style: normal; user-select: none; border-right: 1px solid var(--bdr); }
.editor-code b { padding: 0 14px; font-weight: 400; white-space: pre; }
@keyframes editorIn {
  from { opacity: 0; transform: translateX(8px); }
  to { opacity: 1; transform: translateX(0); }
}

.browser-preview-pane { height: 100%; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--bdr); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; box-shadow: var(--e-1); animation: editorIn var(--dur-medium) var(--ease); }
.browser-toolbar { min-height: 46px; padding: 8px 10px; border-bottom: 1px solid var(--bdr); display: flex; align-items: center; gap: 6px; background: var(--surface); }
.browser-toolbar button { width: 28px; height: 28px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.browser-toolbar button:hover { background: var(--surface-high); color: var(--text-1); }
.browser-toolbar svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; }
.browser-address { flex: 1; min-width: 0; height: 30px; padding: 0 10px; border: 1px solid var(--bdr); border-radius: var(--r-full); background: var(--surface-low); color: var(--text-2); display: flex; align-items: center; gap: 7px; }
.browser-address span { width: 15px; height: 15px; display: inline-flex; color: var(--text-3); flex: 0 0 auto; }
.browser-address strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 0.75rem var(--font-mono); }
.browser-frame-shell { flex: 1; min-height: 0; background: var(--surface-low); }
.browser-frame { width: 100%; height: 100%; border: 0; display: block; background: white; }
.browser-preview-page { min-height: 100%; padding: 14px; display: grid; grid-template-rows: auto 1fr; gap: 12px; background: var(--surface-low); color: var(--text-1); }
.browser-preview-page.is-refreshed { animation: preview-refresh 420ms var(--ease); }
.preview-page-topbar,
.preview-page-stage { border: 1px solid var(--bdr); background: var(--surface); box-shadow: 0 1px 2px rgba(18, 36, 52, 0.04); }
.preview-page-topbar { min-height: 42px; border-radius: var(--r-md); padding: 0 12px; display: flex; align-items: center; gap: 8px; }
.preview-page-mark { width: 24px; height: 24px; border-radius: var(--r-sm); display: inline-grid; place-items: center; background: var(--primary); color: #fff; font: 700 0.6875rem var(--font-sans); }
.preview-page-topbar strong { font: 650 0.875rem var(--font-sans); color: var(--text-1); }
.preview-page-status { margin-left: auto; height: 24px; padding: 0 9px; border-radius: var(--r-full); display: inline-flex; align-items: center; gap: 6px; background: var(--primary-light); color: var(--primary); font: 650 0.75rem var(--font-sans); }
.preview-page-status span { width: 7px; height: 7px; border-radius: var(--r-full); background: currentColor; }
.preview-page-stage { min-height: 0; border-radius: var(--r-lg); padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr) 154px; gap: 14px; align-items: center; overflow: hidden; }
.preview-page-copy { min-width: 0; display: grid; gap: 12px; }
.preview-page-copy h4 { margin: 0; max-width: 430px; color: var(--text-1); font: 700 1.38rem/1.18 var(--font-sans); letter-spacing: 0; }
.preview-page-copy p { margin: 0; max-width: 440px; color: var(--text-2); font: 400 0.8125rem/1.55 var(--font-sans); }
.preview-agent-list { display: grid; gap: 7px; max-width: 420px; }
.preview-agent-list div { min-height: 36px; padding: 0 10px; border: 1px solid var(--bdr); border-radius: var(--r-sm); background: var(--surface-low); display: flex; align-items: center; gap: 10px; }
.preview-agent-list strong { color: var(--text-1); font: 650 0.8125rem var(--font-sans); }
.preview-agent-list span { margin-left: auto; color: var(--text-3); font: 400 0.75rem var(--font-sans); white-space: nowrap; }
.preview-page-metrics { min-width: 0; border-left: 1px solid var(--bdr); padding-left: 12px; display: grid; gap: 8px; }
.preview-page-metrics div { min-height: 56px; padding: 10px; border-radius: var(--r-md); background: var(--surface-high); }
.preview-page-metrics b { display: block; color: var(--primary); font: 700 1rem/1.15 var(--font-sans); }
.preview-page-metrics span { display: block; margin-top: 3px; color: var(--text-2); font: 400 0.6875rem/1.3 var(--font-sans); }
@keyframes preview-refresh {
  0% { opacity: .7; }
  100% { opacity: 1; }
}
.browser-status { min-height: 30px; padding: 0 12px; border-top: 1px solid var(--bdr); display: flex; align-items: center; gap: 10px; color: var(--text-3); background: var(--surface-low); font: 500 0.6875rem var(--font-sans); }
.deploy-detail-pane { height: 100%; min-height: 0; display: flex; flex-direction: column; gap: 12px; animation: editorIn var(--dur-medium) var(--ease); }
.deploy-detail-head { min-height: 52px; padding: 10px 12px; border: 1px solid var(--bdr); border-radius: var(--r-md); background: var(--surface); display: flex; align-items: center; gap: 10px; }
.deploy-detail-head strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 0.875rem var(--font-sans); }
.deploy-detail-url { min-height: 40px; padding: 0 12px; border: 1px solid var(--bdr); border-radius: var(--r-md); background: var(--surface-low); color: var(--primary); display: flex; align-items: center; gap: 9px; }
.deploy-detail-url svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; }
.deploy-detail-url strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 0.75rem var(--font-mono); }

.person-panel { display: flex; flex-direction: column; gap: 12px; }
.person-card { display: flex; flex-direction: column; align-items: center; padding: 18px 12px 20px; border: 1px solid var(--bdr); border-radius: var(--r-lg); background: var(--surface); transition: box-shadow var(--dur-medium) var(--ease), border-color var(--dur-normal) var(--ease); }
.person-card:hover { border-color: var(--bdr-strong); box-shadow: var(--e-1); }
.person-avatar { width: 56px; height: 56px; border-radius: var(--r-lg); display: flex; align-items: center; justify-content: center; color: white; font: 700 1.125rem var(--font-sans); margin-bottom: 12px; }
.person-card h3 { font: 600 1rem/1.2 var(--font-sans); }
.person-card p { margin-top: 4px; color: var(--text-2); font: 400 0.75rem var(--font-sans); }
.person-card > span { margin-top: 10px; height: 24px; padding: 0 9px; display: inline-flex; align-items: center; border-radius: var(--r-full); background: var(--success-bg); color: var(--success); font: 500 0.6875rem var(--font-sans); }
.person-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.person-actions button { height: 30px; padding: 0 12px; border: 1px solid var(--bdr-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text-2); font: 500 0.75rem var(--font-sans); cursor: pointer; transition: background var(--dur-normal) var(--ease), color var(--dur-normal) var(--ease), box-shadow var(--dur-normal) var(--ease); }
.person-actions button:hover { background: var(--surface-low); color: var(--text-1); box-shadow: var(--e-1); }
.person-actions button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.person-projects { display: flex; flex-wrap: wrap; gap: 6px; }
.person-projects span { min-height: 24px; padding: 3px 8px; border: 1px solid var(--bdr); border-radius: var(--r-full); background: var(--surface); color: var(--text-2); font: 500 0.6875rem var(--font-sans); }

/* ── Avatar profile card ── */
[data-profile] { cursor: pointer; transition: box-shadow var(--dur-normal) var(--ease), filter var(--dur-normal) var(--ease); }
[data-profile]:hover { filter: saturate(1.03) brightness(1.02); }
[data-profile]:focus-visible { outline: none; box-shadow: var(--focus-ring), 0 0 0 1px var(--bdr-focus); }
.profile-popover {
  position: fixed;
  z-index: 60;
  width: 352px;
  max-width: calc(100vw - 24px);
  padding: 12px;
  border: 1px solid var(--bdr-strong);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--surface) 96%, var(--surface-low) 4%);
  box-shadow: var(--e-3);
  color: var(--text-1);
  opacity: 0;
  transform: translateY(4px) scale(0.985);
  transform-origin: top left;
  transition: opacity var(--dur-normal) var(--ease), transform var(--dur-normal) var(--ease);
}
.profile-popover:focus { outline: none; }
.profile-popover.open { opacity: 1; transform: translateY(0) scale(1); }
.profile-head { display: flex; align-items: center; gap: 11px; padding-bottom: 12px; border-bottom: 1px solid var(--bdr); }
.profile-avatar { width: 44px; height: 44px; border-radius: var(--r-md); color: white; display: flex; align-items: center; justify-content: center; flex: 0 0 44px; font: 700 0.9375rem var(--font-sans); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.24); }
.profile-group .profile-avatar { color: var(--primary); border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent); box-shadow: none; }
.profile-identity { flex: 1; min-width: 0; }
.profile-title-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.profile-title-row h3 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 650 0.9375rem/1.25 var(--font-sans); }
.profile-title-row span { flex: 0 0 auto; height: 22px; padding: 0 8px; border-radius: var(--r-full); display: inline-flex; align-items: center; background: var(--primary-light); color: var(--primary); font: 600 0.6875rem var(--font-sans); }
.profile-agent .profile-title-row span { background: var(--warning-bg); color: var(--warning); }
.profile-identity p { margin-top: 3px; color: var(--text-2); font: 400 0.75rem var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--bdr); }
.profile-actions button { min-width: 0; height: 34px; border: 1px solid var(--bdr); border-radius: var(--r-sm); background: var(--surface); color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; gap: 7px; font: 600 0.75rem var(--font-sans); cursor: pointer; }
.profile-actions button:hover { background: var(--primary-light); border-color: transparent; color: var(--primary); }
.profile-actions button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.profile-actions svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.profile-meta { display: flex; flex-direction: column; gap: 2px; padding-top: 9px; }
.profile-meta-row { min-height: 28px; display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: start; gap: 10px; color: var(--text-3); font: 400 0.75rem/1.45 var(--font-sans); }
.profile-meta-row strong { min-width: 0; color: var(--text-1); font: 500 0.75rem/1.45 var(--font-sans); overflow-wrap: anywhere; }
.profile-account {
  padding: 10px;
  background: color-mix(in srgb, var(--surface) 97%, white 3%);
  box-shadow: 0 16px 42px rgba(16, 24, 40, 0.12), 0 2px 8px rgba(16, 24, 40, 0.06);
}
.account-head { display: flex; align-items: center; gap: 11px; padding: 4px 4px 10px; }
.account-avatar { width: 48px; height: 48px; flex-basis: 48px; border-radius: var(--r-md); }
.account-status {
  height: 28px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--success) 22%, var(--bdr));
  border-radius: var(--r-full);
  background: var(--success-bg);
  color: var(--success);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  font: 600 0.6875rem var(--font-sans);
  cursor: pointer;
}
.account-status svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.account-signature {
  width: 100%;
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid var(--bdr);
  border-radius: var(--r-sm);
  background: var(--surface-low);
  color: var(--text-3);
  text-align: left;
  font: 400 0.75rem/1.35 var(--font-sans);
  cursor: text;
}
.account-signature:hover { border-color: var(--bdr-strong); color: var(--text-2); background: var(--surface); }
.account-actions { padding: 10px 0; }
.account-menu { display: flex; flex-direction: column; gap: 1px; padding: 2px 0; }
.account-menu-row {
  width: 100%;
  min-height: 36px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-1);
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 7px;
  text-align: left;
  font: 500 0.8125rem var(--font-sans);
  cursor: pointer;
}
.account-menu-row:hover { background: var(--surface-low); }
.account-menu-row:focus-visible,
.account-status:focus-visible,
.account-signature:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.account-menu-row.danger { color: var(--danger); }
.account-menu-icon,
.account-menu-tail { display: inline-flex; align-items: center; justify-content: center; color: currentColor; opacity: 0.78; }
.account-menu-icon svg,
.account-menu-tail svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.account-menu-tail { justify-self: end; color: var(--text-3); }
.account-menu-sep { height: 1px; margin: 5px 2px; background: var(--bdr); }
.account-spaces {
  margin-top: 7px;
  padding: 8px 9px;
  border: 1px solid var(--bdr);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--surface-low) 74%, transparent);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.account-space-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 22px; }
.account-space-row strong { min-width: 0; color: var(--text-1); font: 600 0.75rem var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-space-row span { flex: 0 0 auto; color: var(--text-3); font: 400 0.6875rem var(--font-sans); }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  [data-profile],
  .profile-popover { transition: none; }
}

.file-icon { width: 17px; height: 17px; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-3); }
.file-icon svg { width: 17px; height: 17px; display: block; }
.file-icon.md,
.file-icon.markdown { color: var(--text-2); }
.file-icon.css { color: #1572b6; }
.file-icon.html { color: #e34f26; }
.file-icon.js { color: #f7df1e; filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }
.file-icon.ts { color: #3178c6; }
.file-icon.sql,
.file-icon.db { color: var(--info, var(--state-running)); }
.file-icon.yml,
.file-icon.yaml { color: var(--text-2); }
.file-icon.ps1,
.file-icon.powershell { color: #5391fe; }
.file-icon.git { color: #f05032; }
.file-icon.xlsx { color: #217346; }
.file-icon.link { color: var(--primary); }

/* ── Pinned announcement ── */
.pin-slot { flex: 0 0 auto; padding: 8px 8px 3px; background: transparent; pointer-events: none; }
.pin-slot[hidden] { display: none; }
.pinned-announcement { width: 100%; min-height: 46px; margin: 0 auto; display: flex; align-items: center; gap: 9px; padding: 7px 9px 7px 11px; border: 1px solid var(--bdr); border-radius: var(--r-sm); background: color-mix(in srgb, var(--surface) 96%, var(--surface-low) 4%); box-shadow: 0 4px 14px rgba(18, 18, 32, 0.045); pointer-events: auto; }
.pin-mark { width: 24px; height: 24px; border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; background: #ff7a1a; color: white; }
.pin-mark svg { width: 13px; height: 13px; display: block; }
.pin-copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pin-line { min-width: 0; display: flex; align-items: baseline; gap: 6px; color: var(--text-1); font: 400 0.8125rem/1.25 var(--font-sans); }
.pin-line strong { flex: 0 0 auto; font-weight: 600; }
.pin-line span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pin-meta { color: var(--text-3); font: 400 0.6875rem/1.2 var(--font-sans); }
.pin-meta a { color: var(--primary); text-decoration: none; cursor: pointer; }
.pin-action { width: 28px; height: 28px; border: 0; border-radius: var(--r-xs); background: transparent; color: var(--text-2); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; cursor: pointer; }
.pin-action:hover { background: var(--surface-high); color: var(--text-1); }
.pin-action svg { width: 16px; height: 16px; display: block; }
.pin-action.muted { color: var(--text-3); }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bdr); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--bdr-strong); }

/* ── Rail page views ── */
.page-view {
  margin: auto;
  max-width: 760px;
  padding: 40px 20px;
}
.page-panel {
  border: 1px solid var(--bdr);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 22px;
}
.page-title {
  font: 600 1rem var(--font-sans);
  margin-bottom: 6px;
}
.page-copy {
  color: var(--text-2);
  font: 400 0.8125rem/1.6 var(--font-sans);
  margin-bottom: 16px;
}
.page-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.page-card {
  border: 1px solid var(--bdr);
  border-radius: var(--r-lg);
  background: var(--surface-low);
  padding: 12px;
  transition: box-shadow var(--dur-medium) var(--ease), background var(--dur-normal) var(--ease);
}
.page-card:hover { background: var(--surface); box-shadow: var(--e-2); }
.page-card-title { font: 600 0.8125rem var(--font-sans); margin-bottom: 4px; }
.page-card-meta { font: 400 0.75rem/1.5 var(--font-sans); color: var(--text-2); }

/* ── Project chat pages ── */
.announcement-mark { width: 20px; height: 6px; border-radius: var(--r-full); background: var(--state-thinking); flex: 0 0 auto; }
.project-chat-view { width: var(--chat-col); align-self: center; display: flex; flex-direction: column; gap: 12px; padding: 6px 0 96px; }
.project-overview, .project-panel { border: 1px solid var(--bdr); border-radius: var(--r-lg); background: var(--surface); transition: box-shadow var(--dur-medium) var(--ease); }
.project-overview:hover, .project-panel:hover { box-shadow: var(--e-2); }
.project-overview { padding: 18px 20px; }
.project-overview-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.project-overview h2 { font: 600 1rem/1.2 var(--font-sans); margin-bottom: 4px; }
.project-overview p { color: var(--text-2); font: 400 0.8125rem var(--font-sans); }
.project-live { padding: 3px 8px; border-radius: var(--r-full); background: var(--primary-light); color: var(--primary); font: 500 0.6875rem var(--font-sans); white-space: nowrap; }
.project-members { display: flex; flex-wrap: wrap; gap: 6px; }
.project-members span { height: 24px; padding: 0 8px; border-radius: var(--r-full); background: var(--surface-low); border: 1px solid var(--bdr); color: var(--text-2); display: inline-flex; align-items: center; font: 500 0.6875rem var(--font-sans); }
.project-chat-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 12px; }
.project-panel { padding: 14px; }
.project-panel h3 { font: 600 0.8125rem var(--font-sans); margin-bottom: 10px; }
.project-run, .project-artifact { width: 100%; border: 0; background: transparent; border-radius: var(--r-sm); min-height: 38px; padding: 7px 8px; display: flex; align-items: center; gap: 9px; text-align: left; cursor: pointer; color: var(--text-1); }
.project-run:hover, .project-artifact:hover { background: var(--surface-low); }
.project-run strong { flex: 1; min-width: 0; font: 500 0.75rem var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-run small { width: 76px; color: var(--text-2); font: 400 0.6875rem var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-run em { color: var(--text-3); font: 400 0.6875rem var(--font-sans); font-style: normal; }
.project-artifact span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 0.75rem var(--font-sans); }
.project-feed { grid-column: 1 / -1; }
.feed-row { min-height: 32px; display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--bdr); color: var(--text-2); font: 400 0.75rem var(--font-sans); }
.feed-row:first-of-type { border-top: 0; }
.feed-row time { width: 42px; color: var(--text-3); font: 400 0.6875rem var(--font-mono); }

/* ── Chat-embedded structured panes ── */
.embedded-transcript { gap: 0; padding: 18px 24px 28px; background: var(--surface); }
.embedded-pane { width: min(100%, 980px); align-self: center; display: flex; flex-direction: column; gap: 14px; color: var(--text-1); }
.embedded-toolbar { min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.embedded-search { flex: 1; min-width: 220px; height: 38px; padding: 0 13px; border: 1px solid var(--bdr); border-radius: var(--r-md); background: var(--surface-low); color: var(--text-1); outline: none; font: 400 0.8125rem var(--font-sans); }
.embedded-search:focus { border-color: var(--bdr-focus); box-shadow: var(--focus-ring); background: var(--surface); }
.embedded-actions { display: flex; align-items: center; gap: 8px; }
.embedded-actions button { height: 34px; padding: 0 12px; border: 1px solid var(--bdr); border-radius: var(--r-sm); background: var(--surface); color: var(--text-2); font: 500 0.75rem var(--font-sans); cursor: pointer; }
.embedded-actions button:hover { background: var(--surface-high); color: var(--text-1); }
.embedded-table { min-width: 720px; border-top: 1px solid var(--bdr); }
.embedded-table-head, .embedded-row { display: grid; grid-template-columns: minmax(260px, 1.6fr) minmax(100px, .7fr) minmax(110px, .7fr) minmax(110px, .8fr) 32px; align-items: center; gap: 14px; min-height: 48px; border-bottom: 1px solid var(--bdr); }
.embedded-table-head { color: var(--text-3); font: 500 0.75rem var(--font-sans); }
.embedded-row { width: 100%; border-left: 0; border-right: 0; border-top: 0; background: transparent; color: var(--text-2); text-align: left; font: 400 0.8125rem var(--font-sans); cursor: pointer; }
.embedded-row:hover { background: var(--surface-low); }
.embedded-title { min-width: 0; display: flex; align-items: center; gap: 10px; color: var(--text-1); }
.embedded-title strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 0.8125rem var(--font-sans); }
.embedded-more { color: var(--text-3); text-align: center; }
.embedded-state { width: min(100%, 420px); min-height: 220px; margin: 42px auto 0; }
.embedded-project-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 0 4px; border-bottom: 1px solid var(--bdr); }
.embedded-project-head h2 { font: 600 1.125rem/1.2 var(--font-sans); margin-bottom: 5px; }
.embedded-project-head p { color: var(--text-2); font: 400 0.8125rem var(--font-sans); }
.embedded-project-head > span { padding: 3px 9px; border-radius: var(--r-full); background: var(--primary-light); color: var(--primary); font: 600 0.6875rem var(--font-sans); white-space: nowrap; }
.embedded-project-members { display: flex; flex-wrap: wrap; gap: 6px; }
.embedded-project-members span { min-height: 24px; padding: 3px 8px; border-radius: var(--r-full); background: var(--surface-low); border: 1px solid var(--bdr); color: var(--text-2); font: 500 0.6875rem var(--font-sans); }
.embedded-project-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 12px; }
.embedded-project-grid section { min-width: 0; padding: 14px; border: 1px solid var(--bdr); border-radius: var(--r-lg); background: var(--surface-low); transition: box-shadow var(--dur-medium) var(--ease), background var(--dur-normal) var(--ease); }
.embedded-project-grid section:hover { background: var(--surface); box-shadow: var(--e-2); }
.embedded-project-grid .project-run,
.embedded-project-grid .project-artifact { background: var(--surface); }
.project-task-section { grid-column: 1 / -1; }
.project-task-list { display: flex; flex-direction: column; gap: 2px; }
.project-task-row { width: 100%; min-height: 38px; display: grid; grid-template-columns: 18px minmax(180px, 1fr) 92px 92px 42px; align-items: center; gap: 10px; border: 0; border-radius: var(--r-sm); background: var(--surface); color: var(--text-2); text-align: left; padding: 6px 8px; cursor: pointer; }
.project-task-row:hover { background: var(--surface-high); }
.task-check { width: 12px; height: 12px; border-radius: var(--r-full); border: 2px solid var(--text-3); background: transparent; }
.task-check.ready { border-color: var(--success); background: var(--success); }
.task-check.thinking { border-color: var(--state-thinking); box-shadow: inset 0 0 0 3px var(--surface); background: var(--state-thinking); }
.task-check.queued { border-color: var(--warning); }
.project-task-title { min-width: 0; color: var(--text-1); font: 500 0.8125rem var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-task-owner, .project-task-due { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 0.75rem var(--font-sans); }
.project-task-row em { justify-self: end; min-width: 32px; height: 20px; padding: 0 6px; border-radius: var(--r-xs); display: inline-flex; align-items: center; justify-content: center; background: var(--surface-low); border: 1px solid var(--bdr); color: var(--text-2); font: 600 0.6875rem var(--font-sans); font-style: normal; }

/* ── Independent workbench pages ── */
.main.workbench-mode { flex-direction: row; background: var(--surface); }
.workbench { --wb-nav: 310px; --wb-main-x: 42px; --wb-main-y: 32px; width: 100%; height: 100%; display: flex; background: var(--surface); color: var(--text-1); overflow: hidden; }
.workbench-nav { width: var(--wb-nav); flex: 0 0 var(--wb-nav); padding: 26px 12px 14px; border-right: 1px solid var(--bdr); background: var(--surface-low); overflow-y: auto; }
.workbench-title { padding: 0 12px 18px; font: 600 1.375rem/1.2 var(--font-sans); letter-spacing: 0; }
.workbench-search { width: 100%; height: 40px; margin: 0 0 10px; padding: 0 14px; border: 1px solid var(--bdr); border-radius: var(--r-md); background: var(--surface); color: var(--text-1); outline: none; font: 400 0.875rem var(--font-sans); }
.workbench-search:focus { border-color: var(--bdr-focus); box-shadow: var(--focus-ring); }
.org-row { height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 12px; margin-bottom: 8px; }
.org-logo { width: 28px; height: 28px; border-radius: var(--r-full); background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; font: 700 0.625rem var(--font-mono); border: 1px solid var(--bdr); }
.org-row span { flex: 1; font: 500 0.875rem var(--font-sans); }
.org-row button { border: 0; background: transparent; color: var(--primary); font: 500 0.75rem var(--font-sans); cursor: pointer; }
.nav-row { width: 100%; min-height: 42px; padding: 0 12px; margin: 2px 0; border: 0; border-radius: var(--r-md); background: transparent; color: var(--text-1); display: flex; align-items: center; gap: 12px; text-align: left; font: 500 0.9375rem var(--font-sans); cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.nav-row:hover { background: var(--surface-high); }
.nav-row.active { background: var(--primary-light); color: var(--primary); }
.nav-row small { margin-left: auto; color: var(--text-3); font: 400 0.6875rem var(--font-sans); }
.nav-glyph { width: 20px; height: 20px; color: currentColor; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 20px; }
.nav-glyph svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; }
.nav-caption { margin: 18px 12px 8px; color: var(--text-3); font: 500 0.75rem var(--font-sans); }
.doc-shortcut { padding: 8px 12px 8px 38px; border-radius: var(--r-sm); color: var(--text-2); font: 400 0.8125rem/1.35 var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-shortcut:hover { background: var(--surface-high); color: var(--text-1); }
.workbench-main { flex: 1; min-width: 0; padding: var(--wb-main-y) var(--wb-main-x); overflow: auto; background: var(--surface); }
.workbench-main.full { max-width: 1040px; margin: 0 auto; padding-top: 38px; }
.workbench-head { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.workbench-head h1 { font: 600 1.375rem/1.2 var(--font-sans); }
.outline-action, .icon-action { height: 36px; padding: 0 14px; border: 1px solid var(--primary); border-radius: var(--r-md); background: var(--surface); color: var(--primary); font: 500 0.875rem var(--font-sans); cursor: pointer; }
.icon-action { width: 36px; padding: 0; color: var(--text-2); border-color: var(--bdr); }
.icon-action svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.outline-action:hover, .icon-action:hover { background: var(--primary-light); }
.contacts-main { padding: var(--wb-main-y) var(--wb-main-x); }
.contact-add-btn { display: inline-flex; align-items: center; gap: 7px; }
.contact-quick-grid { max-width: 760px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 22px; }
.contact-quick-grid button { min-height: 74px; padding: 14px 16px; border: 1px solid var(--bdr); border-radius: var(--r-lg); background: var(--surface-low); color: var(--text-1); text-align: left; cursor: pointer; transition: box-shadow var(--dur-medium) var(--ease), background var(--dur-normal) var(--ease), border-color var(--dur-normal) var(--ease); }
.contact-quick-grid button:hover { background: var(--surface); border-color: var(--bdr-strong); box-shadow: var(--e-1); }
.contact-quick-grid span { display: block; margin-bottom: 5px; font: 600 0.875rem var(--font-sans); }
.contact-quick-grid strong { display: block; color: var(--text-2); font: 400 0.75rem/1.45 var(--font-sans); }
.member-section-title { margin: 4px 0 10px; color: var(--text-3); font: 500 0.8125rem var(--font-sans); }
.member-list { display: flex; flex-direction: column; gap: 0; width: min(100%, 980px); border-top: 1px solid var(--bdr); }
.member-row { width: 100%; min-height: 54px; display: flex; align-items: center; gap: 12px; border: 0; border-bottom: 1px solid var(--bdr); background: transparent; text-align: left; border-radius: 0; padding: 7px 8px; cursor: pointer; }
.member-row:hover { background: var(--surface-high); }
.member-av { width: 36px; height: 36px; border-radius: var(--r-full); background: linear-gradient(135deg, var(--primary), var(--success)); color: white; display: flex; align-items: center; justify-content: center; font: 600 0.75rem var(--font-sans); }
.member-name { font: 500 0.9375rem var(--font-sans); }
.member-tag { padding: 2px 6px; border-radius: var(--r-xs); background: var(--surface-high); color: var(--text-2); font: 500 0.6875rem var(--font-sans); }
.member-org { flex: 1; min-width: 160px; color: var(--text-2); font: 400 0.75rem var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-status { margin-left: auto; color: var(--text-3); font: 400 0.75rem var(--font-sans); }
.group-member-row .member-org { max-width: 420px; }
.contact-service-grid { max-width: 780px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.service-card { min-height: 86px; padding: 14px; border: 1px solid var(--bdr); border-radius: var(--r-lg); background: var(--surface-low); color: var(--text-1); display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; text-align: left; cursor: pointer; transition: box-shadow var(--dur-medium) var(--ease), background var(--dur-normal) var(--ease), border-color var(--dur-normal) var(--ease); }
.service-card:hover { background: var(--surface); border-color: var(--bdr-strong); box-shadow: var(--e-1); }
.service-card strong { display: block; margin-bottom: 4px; font: 600 0.875rem var(--font-sans); }
.service-card span { color: var(--text-2); font: 400 0.75rem/1.45 var(--font-sans); }
.service-card em { color: var(--primary); font: 600 0.75rem var(--font-sans); font-style: normal; }

/* ── Modal: add contact / enterprise member ── */
.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 32px; background: rgba(18, 18, 28, 0.42); backdrop-filter: blur(2px); }
.contact-modal { position: relative; width: min(860px, calc(100vw - 96px)); max-height: min(760px, calc(100vh - 80px)); overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--bdr-strong); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--e-4); }
.modal-close { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-2); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.modal-close:hover { background: var(--surface-high); color: var(--text-1); }
.modal-close svg { width: 18px; height: 18px; }
.modal-head { padding: 32px 36px 16px; }
.modal-head h2 { font: 600 1.25rem/1.2 var(--font-sans); margin-bottom: 10px; }
.modal-head p { max-width: 640px; color: var(--text-2); font: 400 0.875rem/1.55 var(--font-sans); }
.contact-modal-tabs { display: flex; align-items: center; gap: 28px; margin: 0 36px; border-bottom: 1px solid var(--bdr); }
.contact-modal-tabs button { height: 42px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text-1); font: 500 0.875rem var(--font-sans); cursor: pointer; }
.contact-modal-tabs button:hover { color: var(--primary); }
.contact-modal-tabs button.active { color: var(--primary); border-bottom-color: var(--primary); }
.contact-modal-body { overflow-y: auto; padding: 22px 36px 36px; }
.invite-qr-panel { min-height: 430px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border: 1px solid var(--bdr); border-radius: var(--r-md); background: linear-gradient(180deg, var(--surface-low), var(--surface)); }
.qr-card { padding: 18px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--bdr); box-shadow: var(--e-1); }
.qr-grid { position: relative; width: 188px; height: 188px; display: grid; grid-template-columns: repeat(9, 1fr); gap: 3px; padding: 10px; background: white; border-radius: var(--r-sm); }
.qr-grid span { background: #f2f2f5; border-radius: 2px; }
.qr-grid span.on { background: #111827; }
.qr-grid b { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: 42px; height: 42px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; background: var(--primary); color: white; font: 700 0.8125rem var(--font-mono); border: 4px solid white; }
.invite-qr-panel h3 { font: 600 0.9375rem var(--font-sans); }
.invite-qr-panel p, .invite-expire, .invite-link-panel p, .invite-code-panel p { color: var(--text-2); font: 400 0.8125rem/1.5 var(--font-sans); }
.invite-link-panel, .invite-code-panel, .invite-phone-panel { min-height: 310px; display: flex; flex-direction: column; gap: 12px; padding: 22px; border: 1px solid var(--bdr); border-radius: var(--r-md); background: var(--surface-low); }
.invite-link-panel label, .invite-phone-panel label { color: var(--text-2); font: 500 0.75rem var(--font-sans); }
.invite-copy-row, .invite-phone-row { display: flex; align-items: center; gap: 8px; }
.invite-copy-row input, .invite-phone-panel input, .invite-phone-panel select { height: 38px; border: 1px solid var(--bdr); border-radius: var(--r-sm); background: var(--surface); color: var(--text-1); font: 400 0.8125rem var(--font-sans); outline: none; }
.invite-copy-row input { flex: 1; padding: 0 12px; color: var(--text-2); }
.invite-phone-panel input { padding: 0 12px; }
.invite-phone-panel select { width: 88px; padding: 0 10px; }
.invite-copy-row button, .invite-code-panel button, .invite-phone-panel button { height: 38px; padding: 0 14px; border: 1px solid var(--primary); border-radius: var(--r-sm); background: var(--primary); color: white; font: 600 0.8125rem var(--font-sans); cursor: pointer; }
.invite-code-panel { align-items: flex-start; justify-content: center; }
.invite-code-panel span { padding: 12px 16px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--bdr); color: var(--text-1); font: 700 1.25rem var(--font-mono); letter-spacing: 0; }
.invite-phone-panel { max-width: 520px; }
.invite-phone-row input { flex: 1; min-width: 0; }
.doc-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 24px; }
.doc-actions button { height: 60px; padding: 0 18px; border: 1px solid var(--bdr); border-radius: var(--r-md); background: var(--surface); color: var(--text-1); display: flex; align-items: center; gap: 14px; font: 500 0.9375rem var(--font-sans); cursor: pointer; }
.doc-actions button:hover { background: var(--surface-low); border-color: var(--bdr-strong); }
.doc-action-icon { width: 28px; height: 28px; border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; color: white; }
.doc-action-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.doc-action-icon.blue { background: var(--primary); }
.doc-action-icon.orange { background: #ff7a1a; }
.doc-action-icon.multi { background: linear-gradient(135deg, #0071bc, #ff7a1a); }
.doc-tabs { display: flex; align-items: center; gap: 26px; margin-bottom: 8px; color: var(--text-2); font: 500 0.9375rem var(--font-sans); }
.doc-tabs .active { color: var(--primary); }
.doc-tabs svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; vertical-align: -2px; }
.doc-table { min-width: 760px; }
.doc-table-head, .doc-row { display: grid; grid-template-columns: minmax(260px, 1.6fr) minmax(150px, 1fr) minmax(110px, .7fr) minmax(120px, .8fr) 42px; align-items: center; gap: 16px; min-height: 54px; border-bottom: 1px solid var(--bdr); }
.doc-table-head { color: var(--text-3); font: 500 0.8125rem var(--font-sans); }
.doc-row { color: var(--text-2); font: 400 0.8125rem var(--font-sans); }
.doc-title { min-width: 0; color: var(--text-1); display: flex; align-items: center; gap: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-title em { padding: 1px 6px; border-radius: var(--r-xs); background: var(--primary-light); color: var(--primary); font-style: normal; font-size: 0.6875rem; }
.doc-type { width: 22px; height: 22px; border-radius: var(--r-xs); background: var(--primary); color: white; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.doc-type svg, .doc-more svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.doc-more { color: var(--text-3); display: inline-flex; align-items: center; justify-content: center; }

.tasks-page { background: var(--surface); }
.task-nav { position: relative; padding-top: 24px; }
.task-nav-more { position: absolute; top: 24px; right: 14px; width: 30px; height: 30px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-2); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.task-nav-more:hover { background: var(--surface-high); color: var(--text-1); }
.task-nav-more svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.nav-divider { height: 1px; margin: 12px 12px; background: var(--bdr); }
.nav-row.slim { min-height: 34px; font-size: 0.8125rem; color: var(--text-2); }
.nav-row.active-soft { background: var(--surface-high); color: var(--text-1); }
.task-main { padding: var(--wb-main-y) var(--wb-main-x); background: var(--surface); }
.task-head { min-height: 42px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.task-head h1 { font: 600 1.375rem/1.2 var(--font-sans); margin-bottom: 6px; }
.task-head-actions { display: flex; align-items: center; gap: 8px; }
.task-head-actions .icon-action svg, .task-toolbar svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.task-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 160px)); gap: 10px; margin-bottom: 18px; }
.task-stat { min-height: 64px; padding: 12px 14px; border: 1px solid var(--bdr); border-radius: var(--r-md); background: var(--surface); }
.task-stat span { display: block; color: var(--text-3); font: 500 0.75rem var(--font-sans); margin-bottom: 6px; }
.task-stat strong { color: var(--text-1); font: 700 1.25rem var(--font-mono); }
.task-view-tabs { height: 38px; display: flex; align-items: center; gap: 22px; border-bottom: 1px solid var(--bdr); margin-bottom: 10px; }
.task-view-tabs button { height: 38px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text-2); font: 500 0.875rem var(--font-sans); cursor: pointer; }
.task-view-tabs button:hover { color: var(--text-1); }
.task-view-tabs button.active { color: var(--primary); border-bottom-color: var(--primary); }
.task-toolbar { min-height: 42px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.task-toolbar button { height: 32px; padding: 0 10px; border: 1px solid var(--bdr); border-radius: var(--r-sm); background: var(--surface); color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; font: 500 0.75rem var(--font-sans); cursor: pointer; }
.task-toolbar button:hover, .task-toolbar button.active { background: var(--surface-high); color: var(--text-1); border-color: var(--bdr-strong); }
.task-table { min-width: 860px; border-top: 1px solid var(--bdr); }
.task-table-head, .task-row { display: grid; grid-template-columns: minmax(260px, 1.65fr) minmax(140px, .95fr) minmax(90px, .62fr) minmax(92px, .62fr) minmax(92px, .62fr) minmax(92px, .62fr); align-items: center; gap: 14px; min-height: 46px; border-bottom: 1px solid var(--bdr); }
.task-table-head { color: var(--text-3); font: 500 0.75rem var(--font-sans); }
.task-group-title { min-height: 38px; display: flex; align-items: center; gap: 8px; color: var(--text-2); border-bottom: 1px solid var(--bdr); font: 600 0.8125rem var(--font-sans); }
.task-group-title svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.task-group-title em { color: var(--text-3); font: 500 0.75rem var(--font-sans); font-style: normal; }
.task-row { width: 100%; border-left: 0; border-right: 0; border-top: 0; background: transparent; color: var(--text-2); text-align: left; font: 400 0.8125rem var(--font-sans); cursor: pointer; }
.task-row:hover { background: var(--surface-high); }
.task-name { min-width: 0; display: flex; align-items: center; gap: 9px; color: var(--text-1); font: 500 0.8125rem var(--font-sans); overflow: hidden; }
.task-name i { width: 12px; height: 12px; border-radius: var(--r-full); border: 2px solid var(--text-3); flex: 0 0 auto; }
.task-name i.running { border-color: var(--state-thinking); background: var(--state-thinking); box-shadow: inset 0 0 0 3px var(--surface); }
.task-name i.done { border-color: var(--success); background: var(--success); }
.task-name em { margin-left: 2px; padding: 1px 6px; border-radius: var(--r-xs); background: var(--surface-high); color: var(--text-2); font: 500 0.6875rem var(--font-sans); font-style: normal; white-space: nowrap; }
.task-add-row { width: 100%; height: 42px; border: 0; border-bottom: 1px solid var(--bdr); background: transparent; color: var(--text-3); display: flex; align-items: center; gap: 8px; padding: 0; font: 500 0.8125rem var(--font-sans); cursor: pointer; }
.task-add-row:hover { color: var(--primary); background: var(--surface-high); }
.task-add-row svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.run-dashboard, .agent-grid, .project-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.agent-grid, .project-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.metric-card, .agent-card, .project-card, .settings-row, .run-row { border: 1px solid var(--bdr); border-radius: var(--r-lg); background: var(--surface); padding: 16px; transition: box-shadow var(--dur-medium) var(--ease), background var(--dur-normal) var(--ease); }
.metric-card:hover, .agent-card:hover, .project-card:hover, .settings-row:hover, .run-row:hover { box-shadow: var(--e-2); }
.metric-card span, .metric-card small, .agent-card p, .agent-card small, .project-card p, .project-card small, .settings-row span { color: var(--text-2); }
.metric-card strong { display: block; margin: 8px 0 4px; font: 700 1.5rem var(--font-mono); }
.run-list, .settings-list { display: flex; flex-direction: column; gap: 10px; }
.run-row { display: flex; align-items: center; gap: 12px; }
.run-row div { flex: 1; min-width: 0; }
.run-row strong, .agent-card h2, .project-card h2, .settings-row strong { display: block; font: 600 0.9375rem var(--font-sans); }
.run-row small { display: block; color: var(--text-2); margin-top: 2px; }
.run-row em { color: var(--text-3); font: 400 0.8125rem var(--font-sans); font-style: normal; }

.state { width: 9px; height: 9px; border-radius: var(--r-full); background: var(--text-3); flex-shrink: 0; }
.state.running, .state.ready { background: var(--success); }
.state.thinking { background: var(--state-thinking); }
.state.waiting, .state.queued { background: var(--warning); }
.agent-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.agent-card p { margin: 6px 0 12px; }
.project-card { display: flex; align-items: center; gap: 14px; }
.project-card div { flex: 1; min-width: 0; }
.project-card span { padding: 2px 8px; border-radius: var(--r-full); background: var(--primary-light); color: var(--primary); font: 500 0.75rem var(--font-sans); }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 58px; box-shadow: none !important; }
.settings-row span { display: block; margin-top: 3px; }
.settings-page .workbench-nav { background: var(--surface-low); }
.settings-main { background: var(--surface); }
.settings-section { max-width: 920px; margin-bottom: 18px; }
.settings-section .section-title-row { min-height: 32px; margin-bottom: 8px; }
.settings-section .section-title-row h2 { font: 600 0.875rem var(--font-sans); }
.settings-section .section-title-row span { color: var(--text-3); font: 500 0.6875rem var(--font-sans); }
.settings-list { border: 1px solid var(--bdr); border-radius: var(--r-md); background: var(--surface); overflow: hidden; gap: 0; }
.settings-row { min-height: 62px; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--bdr); border-radius: 0; }
.settings-row:last-child { border-bottom: 0; }
.settings-row:hover { background: var(--surface-low); }
.settings-row strong { color: var(--text-1); font: 600 0.875rem var(--font-sans); }
.settings-row span { max-width: 560px; color: var(--text-2); font: 400 0.75rem/1.45 var(--font-sans); }
.settings-control { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; min-width: 180px; max-width: 390px; }
.settings-scope-row { min-height: 42px; margin: 2px 8px; padding: 7px 10px 7px 34px; border-radius: var(--r-sm); color: var(--text-2); }
.settings-scope-row:hover { background: var(--surface-high); color: var(--text-1); }
.settings-scope-row strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 0.8125rem var(--font-sans); }
.settings-scope-row span { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); font: 400 0.6875rem var(--font-sans); }
.setting-value { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.setting-segment { min-height: 32px; padding: 3px; border: 1px solid var(--bdr); border-radius: var(--r-md); background: var(--surface-low); display: inline-flex; align-items: center; gap: 2px; }
.setting-segment button { height: 26px; padding: 0 10px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-2); font: 600 0.75rem var(--font-sans); cursor: pointer; white-space: nowrap; }
.setting-segment button:hover { color: var(--text-1); }
.setting-segment button.active { background: var(--surface); color: var(--primary); box-shadow: var(--e-1); }
.setting-switch { width: 42px; height: 24px; padding: 2px; border: 1px solid var(--bdr); border-radius: var(--r-full); background: var(--surface-high); cursor: pointer; transition: background var(--dur-normal) var(--ease), border-color var(--dur-normal) var(--ease); }
.setting-switch span { display: block; width: 18px; height: 18px; margin: 0; border-radius: var(--r-full); background: var(--surface); box-shadow: var(--e-1); transition: transform var(--dur-normal) var(--ease); }
.setting-switch.active { background: var(--primary); border-color: var(--primary); }
.setting-switch.active span { transform: translateX(18px); }
.setting-path { min-width: 0; max-width: 390px; height: 34px; padding: 0 4px 0 10px; border: 1px solid var(--bdr); border-radius: var(--r-md); background: var(--surface-low); display: flex; align-items: center; gap: 8px; }
.setting-path code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); font: 500 0.75rem var(--font-mono); }
.setting-path button { width: 26px; height: 26px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-3); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.setting-path button:hover { background: var(--surface); color: var(--primary); }
.setting-path svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.permission-row .settings-control { min-width: 230px; }
.settings-state-system { max-width: 920px; margin-top: 0; }

/* ── Empty / invalid / not-found state components ── */
.state-system { margin-top: 18px; border: 1px solid var(--bdr); border-radius: var(--r-lg); background: var(--surface); padding: 14px; }
.state-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.state-panel { min-height: 190px; padding: 16px; border: 1px solid var(--bdr); border-radius: var(--r-lg); background: var(--surface-low); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.state-mark { width: 34px; height: 34px; border-radius: var(--r-md); display: inline-flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--bdr); color: var(--text-2); }
.state-mark svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; }
.state-panel h3 { margin-top: 14px; font: 600 0.9375rem var(--font-sans); }
.state-panel p { margin-top: 6px; color: var(--text-2); font: 400 0.75rem/1.5 var(--font-sans); }
.state-panel button { margin-top: 16px; height: 30px; padding: 0 12px; border: 1px solid var(--bdr); border-radius: var(--r-sm); background: var(--surface); color: var(--primary); font: 600 0.75rem var(--font-sans); cursor: pointer; }
.state-panel button:hover { background: var(--primary-light); border-color: var(--primary); }
.state-panel.empty .state-mark { color: var(--primary); background: var(--primary-light); border-color: transparent; }
.state-panel.invalid .state-mark { color: var(--warning); background: var(--warning-bg); border-color: transparent; }
.state-panel.missing .state-mark { color: var(--danger); background: var(--danger-bg); border-color: transparent; }

/* ── Project workspace page ── */
.projects-page .workbench-nav { width: var(--wb-nav); flex-basis: var(--wb-nav); }
.nav-row.slim { min-height: 34px; font-size: 0.8125rem; color: var(--text-2); }
.project-main { padding: var(--wb-main-y) var(--wb-main-x); background: var(--surface); }
.project-nav { padding-top: 30px; background: var(--surface-low); }
.project-nav .workbench-title { padding-bottom: 20px; }
.project-nav-row { width: 100%; min-height: 56px; padding: 8px 10px; margin: 2px 0; border: 1px solid transparent; border-radius: var(--r-md); background: transparent; color: var(--text-1); display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; text-align: left; cursor: pointer; }
.project-nav-row:hover { background: var(--surface-high); border-color: var(--bdr); }
.project-nav-row.active { background: var(--surface-high); border-color: var(--bdr); box-shadow: none; color: var(--text-1); }
.project-nav-icon { width: 24px; height: 24px; border-radius: var(--r-sm); background: var(--surface-high); color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; }
.project-nav-row.active .project-nav-icon { background: var(--primary-light); color: var(--primary); }
.project-nav-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.project-nav-row strong { display: block; font: 600 0.8125rem var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-nav-row small { display: block; margin-top: 2px; color: var(--text-3); font: 400 0.6875rem var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-nav-row em { color: var(--text-3); font: 500 0.6875rem var(--font-sans); font-style: normal; white-space: nowrap; }
.project-filter-list { display: flex; flex-direction: column; gap: 2px; }
.project-filter { width: 100%; min-height: 34px; padding: 0 10px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-2); display: flex; align-items: center; gap: 10px; text-align: left; font: 500 0.8125rem var(--font-sans); cursor: pointer; }
.project-filter:hover { background: var(--hover-surface); color: var(--text-1); }
.project-filter.active { background: var(--selected-surface); color: var(--primary); }
.project-filter span { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; color: currentColor; }
.project-filter svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.project-detail-head { min-height: 58px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.project-detail-head h1 { font: 650 1.5rem/1.2 var(--font-sans); letter-spacing: 0; }
.project-detail-head p { margin-top: 4px; color: var(--text-2); font: 400 0.875rem var(--font-sans); }
.project-head-actions { display: flex; align-items: center; gap: 10px; }
.project-head-actions > span { padding: 4px 9px; border-radius: var(--r-full); color: var(--primary); background: var(--primary-light); font: 600 0.75rem var(--font-sans); white-space: nowrap; }
.project-tabs { height: 38px; display: flex; align-items: center; gap: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--bdr); }
.project-tabs button { height: 37px; padding: 0 1px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; font: 500 0.8125rem var(--font-sans); cursor: pointer; }
.project-tabs svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.project-tabs button:hover { color: var(--text-1); }
.project-tabs button.active { color: var(--primary); border-bottom-color: var(--primary); }
.project-detail-layout { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(320px, .82fr); gap: 12px; max-width: 1180px; }
.project-announcement, .project-members-card, .project-detail-panel { min-width: 0; border: 1px solid var(--bdr); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--e-1); }
.project-announcement { grid-column: 1 / -1; min-height: 52px; padding: 9px 12px; display: flex; align-items: center; gap: 12px; background: color-mix(in srgb, var(--surface) 94%, var(--primary-light) 6%); }
.project-announcement div { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.project-announcement strong { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font: 600 0.8125rem var(--font-sans); }
.project-announcement strong svg,
.section-title-row h2 svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; vertical-align: -2px; }
.project-announcement p { min-width: 0; color: var(--text-2); font: 400 0.8125rem var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-announcement button { height: 28px; padding: 0 10px; border: 1px solid var(--bdr); border-radius: var(--r-sm); background: var(--surface); color: var(--primary); font: 600 0.75rem var(--font-sans); cursor: pointer; }
.project-members-card { grid-column: 1 / -1; padding: 12px 14px; }
.project-detail-panel { padding: 14px; background: var(--surface-low); }
.project-detail-panel .project-run,
.project-detail-panel .project-artifact { background: var(--surface); border: 1px solid transparent; }
.project-detail-panel .project-run:hover,
.project-detail-panel .project-artifact:hover { border-color: var(--bdr); }
.project-runs-panel { min-height: 202px; }
.project-detail-layout .project-feed { grid-column: 1 / -1; }

/* ── Agent configuration and marketplace ── */
.agents-page .workbench-nav { width: var(--wb-nav); flex-basis: var(--wb-nav); }
.agent-main { padding: var(--wb-main-y) var(--wb-main-x); }
.head-subcopy { margin-top: 5px; color: var(--text-2); font: 400 0.8125rem/1.45 var(--font-sans); }
.workbench-head .outline-action { display: inline-flex; align-items: center; gap: 7px; }
.workbench-head .outline-action svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.agent-summary-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.agent-stat { min-height: 72px; padding: 12px 14px; border: 1px solid var(--bdr); border-radius: var(--r-md); background: var(--surface); }
.agent-stat span { display: block; color: var(--text-3); font: 600 0.6875rem var(--font-sans); }
.agent-stat strong { display: block; margin-top: 5px; color: var(--text-1); font: 700 1.125rem/1.1 var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-stat small { display: block; margin-top: 5px; color: var(--text-2); font: 400 0.6875rem var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-layout { display: grid; grid-template-columns: minmax(520px, 1fr) minmax(380px, 420px); gap: 14px; align-items: start; }
.agent-section, .agent-detail { border: 1px solid var(--bdr); border-radius: var(--r-lg); background: var(--surface); transition: box-shadow var(--dur-medium) var(--ease); }
.agent-section:hover, .agent-detail:hover { box-shadow: var(--e-2); }
.agent-section { padding: 14px; }
.section-title-row { min-height: 30px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.section-title-row h2 { font: 600 0.9375rem var(--font-sans); }
.section-title-row h3 { font: 600 0.8125rem var(--font-sans); }
.section-title-row span { color: var(--text-3); font: 500 0.6875rem var(--font-sans); }
.agent-config-list { display: flex; flex-direction: column; gap: 6px; }
.agent-config-row { width: 100%; min-height: 72px; padding: 10px; border: 1px solid transparent; border-radius: var(--r-md); background: transparent; color: var(--text-1); display: grid; grid-template-columns: 38px minmax(0, 1fr) 150px 14px; align-items: center; gap: 10px; text-align: left; cursor: pointer; }
.agent-config-row:hover, .agent-config-row.selected { background: var(--surface-high); border-color: var(--bdr); }
.agent-config-row.selected { box-shadow: none; }
.agent-config-row strong { display: block; font: 600 0.875rem var(--font-sans); }
.agent-config-row span:not(.state) { display: block; color: var(--text-2); font: 400 0.75rem var(--font-sans); margin-top: 2px; }
.agent-config-row small { display: block; color: var(--text-3); font: 400 0.6875rem var(--font-sans); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-config-row em { color: var(--text-2); font: 500 0.6875rem var(--font-mono); font-style: normal; white-space: nowrap; }
.agent-symbol { width: 34px; height: 34px; border-radius: var(--r-sm); color: white; display: flex; align-items: center; justify-content: center; font: 700 0.75rem var(--font-sans); }
.agent-detail { padding: 16px; }
.detail-head { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--bdr); }
.detail-head.editable { align-items: flex-start; }
.detail-head.editable > div:nth-child(2) { min-width: 0; flex: 1; }
.detail-head h2 { font: 600 1rem var(--font-sans); }
.detail-head span { color: var(--text-2); font: 400 0.75rem var(--font-sans); }
.agent-save-state { flex: 0 0 auto; padding: 3px 8px; border-radius: var(--r-full); background: var(--success-bg); color: var(--success) !important; font: 600 0.6875rem var(--font-sans) !important; }
.agent-save-state.dirty { background: var(--warning-bg); color: var(--warning) !important; }
.agent-runtime-line { min-height: 36px; margin: 12px 0 4px; padding: 0 10px; border: 1px solid var(--bdr); border-radius: var(--r-sm); background: var(--surface-low); display: grid; grid-template-columns: 9px minmax(0, 1fr) minmax(120px, auto); align-items: center; gap: 9px; }
.agent-runtime-line strong { min-width: 0; color: var(--text-1); font: 600 0.75rem var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-runtime-line em { color: var(--primary); font: 600 0.6875rem var(--font-mono); font-style: normal; white-space: nowrap; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
.detail-grid label { min-height: 58px; padding: 10px; border: 1px solid var(--bdr); border-radius: var(--r-sm); color: var(--text-3); font: 400 0.6875rem var(--font-sans); }
.detail-grid strong { display: block; margin-top: 6px; color: var(--text-1); font: 600 0.75rem var(--font-sans); }
.agent-edit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
.agent-edit-grid label { min-height: 58px; padding: 8px 10px; border: 1px solid var(--bdr); border-radius: var(--r-sm); background: var(--surface-low); color: var(--text-3); display: flex; flex-direction: column; justify-content: center; gap: 5px; font: 500 0.6875rem var(--font-sans); }
.agent-edit-grid input,
.agent-edit-grid select { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text-1); font: 600 0.75rem var(--font-sans); }
.agent-edit-grid select { cursor: pointer; }
.agent-edit-grid label:focus-within { border-color: var(--bdr-focus); background: var(--surface); box-shadow: var(--focus-ring); }
.agent-skill-editor { padding-top: 2px; margin-bottom: 14px; }
.skill-chip-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.skill-chip { min-height: 30px; padding: 0 10px; border: 1px solid var(--bdr); border-radius: var(--r-full); background: var(--surface); color: var(--text-2); font: 600 0.75rem var(--font-sans); cursor: pointer; }
.skill-chip:hover { color: var(--text-1); background: var(--surface-low); }
.skill-chip.active { border-color: transparent; background: var(--primary-light); color: var(--primary); }
.tool-scope h3 { font: 600 0.8125rem var(--font-sans); margin-bottom: 8px; }
.scope-row { min-height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--bdr); color: var(--text-2); font: 400 0.75rem var(--font-sans); }
.scope-row strong { color: var(--primary); font: 600 0.6875rem var(--font-sans); }
.editable-tools { margin-top: 4px; }
.scope-row.editable { min-height: 42px; }
.scope-row.editable > span { color: var(--text-1); font-weight: 500; }
.permission-segment { height: 30px; padding: 2px; border: 1px solid var(--bdr); border-radius: var(--r-sm); background: var(--surface-low); display: inline-flex; align-items: center; gap: 2px; }
.permission-segment button { height: 24px; padding: 0 8px; border: 0; border-radius: var(--r-xs); background: transparent; color: var(--text-3); font: 600 0.6875rem var(--font-sans); cursor: pointer; }
.permission-segment button:hover { color: var(--text-1); }
.permission-segment button.active { background: var(--surface); color: var(--primary); box-shadow: var(--e-1); }
.agent-edit-actions { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--bdr); }
.agent-edit-actions .btn { flex: 1 1 0; padding: 0 10px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; filter: none; transform: none; }
.agent-mini-log { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--bdr); }
.agent-mini-log > div:not(.section-title-row) { min-height: 30px; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 9px; color: var(--text-2); font: 400 0.75rem var(--font-sans); }
.agent-mini-log time { color: var(--text-3); font: 500 0.6875rem var(--font-mono); }
.agent-mini-log span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-policy-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.agent-rule-list { display: flex; flex-direction: column; gap: 6px; }
.agent-rule-row { width: 100%; min-height: 62px; padding: 10px; border: 1px solid transparent; border-radius: var(--r-md); background: transparent; color: var(--text-1); display: grid; grid-template-columns: 34px minmax(0, 1fr) 68px 82px; align-items: center; gap: 10px; text-align: left; cursor: pointer; }
.agent-rule-row:hover { background: var(--surface-high); border-color: var(--bdr); }
.rule-icon { width: 30px; height: 30px; border-radius: var(--r-sm); background: var(--primary-light); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; }
.rule-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.agent-rule-row strong { display: block; font: 600 0.8125rem var(--font-sans); }
.agent-rule-row small { display: block; margin-top: 2px; color: var(--text-3); font: 400 0.6875rem var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-rule-row em { width: fit-content; padding: 3px 7px; border-radius: var(--r-full); font: 600 0.6875rem var(--font-sans); font-style: normal; white-space: nowrap; }
.agent-rule-row em.risk-low { background: var(--success-bg); color: var(--success); }
.agent-rule-row em.risk-mid { background: var(--warning-bg); color: var(--warning); }
.agent-rule-row em.risk-high { background: var(--danger-bg); color: var(--danger); }
.agent-rule-row b { justify-self: end; padding: 3px 7px; border-radius: var(--r-full); background: var(--primary-light); color: var(--primary); font: 600 0.6875rem var(--font-sans); }
.policy-side { min-height: 240px; }
.policy-check { min-height: 38px; display: flex; align-items: center; gap: 9px; border-top: 1px solid var(--bdr); color: var(--text-2); font: 500 0.75rem var(--font-sans); }
.policy-check:first-of-type { border-top: 0; }
.policy-check input { accent-color: var(--primary); }
.policy-note { margin-top: 14px; padding: 11px 12px; border: 1px solid var(--bdr); border-radius: var(--r-sm); background: var(--surface-low); }
.policy-note strong { display: block; font: 600 0.8125rem var(--font-sans); }
.policy-note p { margin-top: 5px; color: var(--text-2); font: 400 0.75rem/1.5 var(--font-sans); }
.tool-matrix { min-width: 860px; }
.tool-matrix-head,
.tool-matrix-row { display: grid; grid-template-columns: minmax(160px, 1.1fr) repeat(5, minmax(96px, .8fr)); align-items: center; gap: 10px; min-height: 48px; border-bottom: 1px solid var(--bdr); }
.tool-matrix-head { color: var(--text-3); font: 600 0.6875rem var(--font-sans); }
.tool-matrix-row { width: 100%; border-left: 0; border-right: 0; border-top: 0; background: transparent; color: var(--text-1); text-align: left; cursor: pointer; }
.tool-matrix-row:hover { background: var(--surface-high); }
.tool-agent-cell { display: flex; align-items: center; gap: 9px; min-width: 0; }
.tool-agent-cell .agent-symbol { width: 28px; height: 28px; font-size: .6875rem; }
.tool-agent-cell strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 0.8125rem var(--font-sans); }
.tool-matrix em,
.audit-row em { width: fit-content; padding: 3px 8px; border-radius: var(--r-full); font: 600 0.6875rem var(--font-sans); font-style: normal; white-space: nowrap; }
.tool-matrix em.allow,
.audit-row em.allow { background: var(--success-bg); color: var(--success); }
.tool-matrix em.confirm,
.audit-row em.confirm { background: var(--warning-bg); color: var(--warning); }
.tool-matrix em.deny,
.audit-row em.deny { background: var(--danger-bg); color: var(--danger); }
.permission-legend { display: flex; align-items: center; gap: 14px; margin-top: 10px; color: var(--text-2); font: 500 0.75rem var(--font-sans); }
.permission-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.permission-legend i { width: 8px; height: 8px; border-radius: var(--r-full); display: inline-block; }
.permission-legend i.allow { background: var(--success); }
.permission-legend i.confirm { background: var(--warning); }
.permission-legend i.deny { background: var(--danger); }
.model-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.model-card { min-height: 126px; padding: 14px; border: 1px solid var(--bdr); border-radius: var(--r-lg); background: var(--surface); display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: flex-start; transition: box-shadow var(--dur-medium) var(--ease); }
.model-card:hover { box-shadow: var(--e-2); }
.model-card h2 { font: 600 0.9375rem var(--font-sans); }
.model-card p { margin-top: 5px; color: var(--text-2); font: 400 0.75rem/1.45 var(--font-sans); }
.model-card small { display: block; margin-top: 10px; color: var(--text-3); font: 500 0.6875rem var(--font-sans); }
.model-card > span { padding: 3px 8px; border-radius: var(--r-full); background: var(--primary-light); color: var(--primary); font: 600 0.6875rem var(--font-sans); }
.model-routing { margin-top: 2px; }
.model-route-row { width: 100%; min-height: 54px; padding: 8px 10px; border: 1px solid transparent; border-radius: var(--r-md); background: transparent; color: var(--text-1); display: grid; grid-template-columns: 34px minmax(0, 1fr) 150px; align-items: center; gap: 10px; text-align: left; cursor: pointer; }
.model-route-row:hover { background: var(--surface-high); border-color: var(--bdr); }
.model-route-row strong { display: block; font: 600 0.8125rem var(--font-sans); }
.model-route-row small { display: block; color: var(--text-3); font: 400 0.6875rem var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-route-row em { color: var(--primary); font: 600 0.6875rem var(--font-mono); font-style: normal; text-align: right; }
.model-health { margin-top: 14px; }
.model-health-row { min-height: 40px; display: grid; grid-template-columns: minmax(180px, 1fr) 72px minmax(120px, .7fr); align-items: center; gap: 12px; border-top: 1px solid var(--bdr); }
.model-health-row:first-of-type { border-top: 0; }
.model-health-row strong { font: 600 0.8125rem var(--font-mono); }
.model-health-row span { width: fit-content; padding: 3px 8px; border-radius: var(--r-full); background: var(--success-bg); color: var(--success); font: 600 0.6875rem var(--font-sans); }
.model-health-row em { color: var(--text-3); font: 400 0.75rem var(--font-sans); font-style: normal; text-align: right; }
.audit-filter-bar { display: flex; align-items: center; gap: 7px; margin: -4px 0 12px; }
.audit-filter-bar button { height: 30px; padding: 0 10px; border: 1px solid var(--bdr); border-radius: var(--r-full); background: var(--surface); color: var(--text-2); font: 600 0.75rem var(--font-sans); cursor: pointer; }
.audit-filter-bar button:hover { border-color: var(--selected-border); background: var(--hover-surface); color: var(--text-1); }
.audit-filter-bar button.active { border-color: transparent; background: var(--selected-surface); color: var(--primary); }
.audit-section { overflow: hidden; }
.audit-head,
.audit-row { display: grid; grid-template-columns: 72px 120px 150px 100px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 48px; border-bottom: 1px solid var(--bdr); }
.audit-head { color: var(--text-3); font: 600 0.6875rem var(--font-sans); }
.audit-row { width: 100%; border-left: 0; border-right: 0; border-top: 0; background: transparent; color: var(--text-1); text-align: left; cursor: pointer; }
.audit-row:hover { background: var(--surface-high); }
.audit-row time { color: var(--text-3); font: 500 0.6875rem var(--font-mono); }
.audit-row strong { font: 600 0.8125rem var(--font-sans); }
.audit-row span { color: var(--text-2); font: 500 0.75rem var(--font-sans); }
.audit-row small { color: var(--text-3); font: 400 0.75rem var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-market-main { display: flex; flex-direction: column; gap: 14px; }
.market-toolbar { display: flex; align-items: center; gap: 12px; margin-top: -6px; }
.market-search { width: 320px; height: 38px; padding: 0 13px; border: 1px solid var(--bdr); border-radius: var(--r-md); background: var(--surface); color: var(--text-1); outline: none; font: 400 0.8125rem var(--font-sans); }
.market-search:focus { border-color: var(--bdr-focus); box-shadow: var(--focus-ring); }
.market-cats { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.market-cats button { height: 30px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--r-full); background: transparent; color: var(--text-2); font: 500 0.75rem var(--font-sans); cursor: pointer; white-space: nowrap; }
.market-cats button:hover { background: var(--surface-high); color: var(--text-1); }
.market-cats button.active { background: var(--selected-surface); border-color: transparent; color: var(--primary); }
.market-featured { margin-top: 4px; }
.market-list-section { min-height: 260px; }
.market-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.market-card { min-height: 190px; padding: 16px; border: 1px solid var(--bdr); border-radius: var(--r-lg); background: var(--surface-low); display: flex; flex-direction: column; gap: 9px; transition: box-shadow var(--dur-medium) var(--ease), background var(--dur-normal) var(--ease); }
.market-card:hover { background: var(--surface); box-shadow: var(--e-2); }
.market-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.market-icon { width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; font: 700 0.6875rem var(--font-mono); }
.market-card h3 { font: 600 0.875rem var(--font-sans); }
.market-card p { color: var(--text-2); font: 400 0.75rem/1.45 var(--font-sans); }
.market-card small { min-height: 34px; color: var(--text-3); font: 400 0.6875rem/1.45 var(--font-sans); }
.market-card div:last-child { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.market-card span { color: var(--text-3); font: 500 0.6875rem var(--font-sans); }
.market-card button { height: 28px; padding: 0 10px; border: 1px solid var(--bdr); border-radius: var(--r-sm); background: var(--surface); color: var(--primary); font: 600 0.75rem var(--font-sans); cursor: pointer; }
.market-card button:hover { background: var(--primary-light); }
.market-list { display: flex; flex-direction: column; gap: 6px; }
.market-list-row { width: 100%; min-height: 58px; padding: 9px 10px; border: 1px solid transparent; border-radius: var(--r-md); background: transparent; color: var(--text-1); display: grid; grid-template-columns: 34px minmax(180px, 1fr) 72px minmax(220px, .9fr) 58px; align-items: center; gap: 12px; text-align: left; cursor: pointer; }
.market-list-row:hover { background: var(--surface-high); border-color: var(--bdr); }
.market-list-row strong { display: block; font: 600 0.8125rem var(--font-sans); }
.market-list-row span { display: block; margin-top: 2px; color: var(--text-2); font: 400 0.75rem var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.market-list-row em { color: var(--text-3); font: 500 0.6875rem var(--font-sans); font-style: normal; }
.market-list-row small { color: var(--text-3); font: 400 0.6875rem var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.market-list-row b { justify-self: end; color: var(--primary); font: 600 0.75rem var(--font-sans); }

/* ── Card context menu and multi-select ── */
[data-selectable-card] {
  position: relative;
  transition: background var(--dur-normal) var(--ease), border-color var(--dur-normal) var(--ease), box-shadow var(--dur-normal) var(--ease), opacity var(--dur-normal) var(--ease);
}
[data-selectable-card].is-context,
[data-selectable-card].is-selected {
  border-color: var(--selected-border) !important;
  box-shadow: inset 0 0 0 1px var(--selected-border), var(--e-1) !important;
}
[data-selectable-card].is-context {
  background: color-mix(in srgb, var(--surface-high) 64%, var(--surface) 36%) !important;
}
[data-selectable-card].is-selected {
  background: var(--selected-surface) !important;
}
.msg-bubble.is-context,
.msg-bubble.is-selected,
.tool-card.is-context,
.tool-card.is-selected,
.diff-card.is-context,
.diff-card.is-selected,
.approval-card.is-context,
.approval-card.is-selected,
.deploy-card.is-context,
.deploy-card.is-selected {
  border-color: var(--selected-border) !important;
}
.user-msg-row.is-context .user-bubble,
.user-msg-row.is-selected .user-bubble {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.26), 0 0 0 2px var(--selected-border), var(--e-1);
}
[data-selectable-card].is-actioned {
  animation: card-action-pulse 680ms var(--ease);
}
[data-selectable-card].is-soft-hidden {
  opacity: .42;
  filter: grayscale(.3);
}
@keyframes card-action-pulse {
  0% { box-shadow: inset 0 0 0 1px var(--selected-border), var(--e-1); }
  45% { box-shadow: inset 0 0 0 1px var(--selected-border), 0 0 0 4px var(--hover-surface), var(--e-2); }
  100% { box-shadow: inset 0 0 0 1px var(--selected-border), var(--e-1); }
}
.selection-mode [data-selectable-card] { cursor: default; }
.selection-mode .main,
.selection-mode .transcript,
.selection-mode [data-selectable-card],
.selection-mode .pin-slot {
  -webkit-user-select: none;
  user-select: none;
}
.selection-mode .main ::selection {
  background: transparent;
}
.selection-mode .composer {
  display: none;
}
.selection-mode [data-selectable-card].is-selected::before,
.selection-mode [data-selectable-card].is-selected::after {
  content: none;
}
.card-context-menu {
  position: fixed;
  z-index: 80;
  width: 244px;
  padding: 6px;
  border: 1px solid var(--bdr-strong);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--surface) 96%, var(--surface-low) 4%);
  box-shadow: var(--e-3);
  opacity: 0;
  transform: translateY(4px) scale(.985);
  transform-origin: top left;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.card-context-menu.open {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.context-menu-title {
  padding: 7px 8px 8px;
  border-bottom: 1px solid var(--bdr);
  margin-bottom: 4px;
}
.context-menu-title span {
  display: block;
  color: var(--text-1);
  font: 600 0.75rem/1.35 var(--font-sans);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.context-menu-title small {
  display: block;
  margin-top: 2px;
  color: var(--text-3);
  font: 500 0.625rem var(--font-sans);
}
.context-menu-group {
  padding: 4px 0;
  border-bottom: 1px solid var(--bdr);
}
.context-menu-group:last-child { border-bottom: 0; }
.context-menu-item {
  width: 100%;
  min-height: 32px;
  padding: 0 7px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-1);
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  text-align: left;
  font: 500 0.8125rem var(--font-sans);
  cursor: pointer;
}
.context-menu-item:hover {
  background: var(--surface-high);
}
.context-menu-item.danger { color: var(--danger); }
.context-menu-item.danger:hover { background: var(--danger-bg); }
.context-menu-icon {
  width: 20px;
  height: 20px;
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.context-menu-item:hover .context-menu-icon { color: currentColor; }
.context-menu-icon svg,
.multi-select-bar svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.context-menu-item kbd {
  color: var(--text-3);
  font: 500 0.625rem var(--font-mono);
}
.context-menu-item b {
  color: var(--text-3);
  font: 600 0.875rem/1 var(--font-sans);
}
.multi-select-bar {
  position: fixed;
  z-index: 75;
  left: calc(var(--selectbar-left, 0px) + var(--selectbar-width, 100vw) / 2);
  bottom: 22px;
  transform: translateX(-50%);
  max-width: min(calc(var(--selectbar-width, 100vw) - 44px), 980px);
  min-height: 46px;
  padding: 5px 6px 5px 10px;
  border: 1px solid var(--bdr-strong);
  border-radius: var(--r-xl);
  background: color-mix(in srgb, var(--surface) 96%, var(--surface-low) 4%);
  box-shadow: var(--e-3);
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: auto hidden;
  scrollbar-width: none;
}
.multi-select-bar::-webkit-scrollbar { display: none; }
.multi-select-count {
  min-width: 88px;
  color: var(--text-2);
  font: 600 0.75rem var(--font-sans);
  padding: 0 8px;
}
.multi-select-count span {
  color: var(--primary);
  font: 700 0.875rem var(--font-mono);
}
.multi-select-count em {
  color: var(--text-3);
  font: 500 0.6875rem var(--font-mono);
  font-style: normal;
}
.multi-select-bar button {
  height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 0.75rem var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
}
.multi-select-bar button:hover {
  background: var(--surface-high);
  color: var(--text-1);
}
.multi-select-bar button.danger { color: var(--danger); }
.multi-select-bar button.danger:hover { background: var(--danger-bg); }
.multi-select-bar button.ghost { color: var(--text-3); }
.selection-marquee {
  position: fixed;
  z-index: 70;
  display: none;
  pointer-events: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.selection-marquee.active { display: block; }
.demo-toast {
  position: fixed;
  z-index: 90;
  left: 50%;
  bottom: 80px;
  transform: translate(-50%, 8px);
  opacity: 0;
  min-height: 36px;
  padding: 8px 14px;
  border: 1px solid var(--bdr-strong);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--text-1);
  box-shadow: var(--e-3);
  font: 600 0.75rem var(--font-sans);
  pointer-events: none;
  transition: opacity var(--dur-normal) var(--ease), transform var(--dur-normal) var(--ease);
}
.demo-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}