/* Foundry console, styled after Rivet's dashboard (rivet-dev/rivet frontend theme):
   zinc surfaces, hairline borders, orange primary, IBM Plex type, shadcn-style components.
   Follows the OS theme; the topbar toggle pins light or dark (stored in localStorage). */
:root {
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* Light: Rivet's tokens on shadcn's zinc light scale (Rivet's own dashboard ships dark only). */
:root, :root[data-theme="light"] {
  color-scheme: light;
  --background: hsl(0 0% 100%);
  --card: hsl(0 0% 100%);
  --secondary: hsl(240 5% 96%);
  --muted: hsl(240 5% 96%);
  --accent: hsl(240 5% 96%);
  --foreground: hsl(240 10% 4%);
  --muted-foreground: hsl(240 4% 46%);
  --border: hsl(240 6% 90%);
  --input: hsl(240 6% 90%);
  --primary: hsl(18.5 100% 50%);
  --primary-hover: hsl(18.5 100% 45%);
  --primary-foreground: #fff;
  --destructive: hsl(0 72.2% 50.6%);
  --warning: hsl(35 92% 33%);
  --success: hsl(160 84% 30%);
  --radius: 0.5rem;
  --nav-bg: hsl(0 0% 100% / .85);
  --row-hover: hsl(240 5% 96% / .7);
  --code-ink: hsl(240 10% 4%);
  --link-line: hsl(240 5% 70%);
  --placeholder: hsl(240 4% 60%);
  --success-ink: hsl(160 84% 28%);
  --danger-ink: hsl(0 72% 45%);
  --shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
}
/* Dark: Rivet dashboard theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  color-scheme: dark;

  --background: hsl(240 6% 4%);      /* #09090b */
  --card: hsl(240 7% 5%);
  --secondary: hsl(240 5% 7%);
  --muted: hsl(240 5% 9%);
  --accent: hsl(240 5% 9%);
  --foreground: hsl(0 0% 98%);
  --muted-foreground: hsl(240 5% 65%);
  --border: hsl(240 5% 14%);
  --input: hsl(240 5% 14%);
  --primary: hsl(18.5 100% 50%);     /* #FF4F00 */
  --primary-hover: hsl(18.5 100% 45%);
  --primary-foreground: #fff;
  --destructive: hsl(0 72.2% 50.6%);
  --warning: hsl(47.9 95.8% 53.1%);
  --success: hsl(160 60% 45%);
  --radius: 0.5rem;
  --nav-bg: hsl(240 6% 4% / .85);
  --row-hover: hsl(240 5% 9% / .5);
  --code-ink: hsl(240 5% 84%);
  --link-line: hsl(240 5% 35%);
  --placeholder: hsl(240 5% 45%);
  --success-ink: hsl(160 60% 45%);
  --danger-ink: hsl(0 85% 65%);
  --shadow: 0 1px 2px 0 rgb(0 0 0 / .4);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;

  --background: hsl(240 6% 4%);      /* #09090b */
  --card: hsl(240 7% 5%);
  --secondary: hsl(240 5% 7%);
  --muted: hsl(240 5% 9%);
  --accent: hsl(240 5% 9%);
  --foreground: hsl(0 0% 98%);
  --muted-foreground: hsl(240 5% 65%);
  --border: hsl(240 5% 14%);
  --input: hsl(240 5% 14%);
  --primary: hsl(18.5 100% 50%);     /* #FF4F00 */
  --primary-hover: hsl(18.5 100% 45%);
  --primary-foreground: #fff;
  --destructive: hsl(0 72.2% 50.6%);
  --warning: hsl(47.9 95.8% 53.1%);
  --success: hsl(160 60% 45%);
  --radius: 0.5rem;
  --nav-bg: hsl(240 6% 4% / .85);
  --row-hover: hsl(240 5% 9% / .5);
  --code-ink: hsl(240 5% 84%);
  --link-line: hsl(240 5% 35%);
  --placeholder: hsl(240 5% 45%);
  --success-ink: hsl(160 60% 45%);
  --danger-ink: hsl(0 85% 65%);
  --shadow: 0 1px 2px 0 rgb(0 0 0 / .4);
}
* { box-sizing: border-box; border-color: var(--border); }
html, body { background: var(--background); }
body { margin: 0; font: 14px/1.5 var(--font-sans); color: var(--foreground); -webkit-font-smoothing: antialiased; }
::selection { background: hsl(18.5 100% 50% / .35); }
a { color: var(--foreground); text-decoration: underline; text-decoration-color: var(--link-line); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--primary); }
h1 { font-size: 24px; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 4px; }
h2 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
h3 { font-size: 12px; font-weight: 500; margin: 18px 0 8px; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: .06em; }
code, pre, .mono { font-family: var(--font-mono); font-size: 12.5px; }
code { background: var(--muted); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; }
pre code, td code.plain { background: none; border: 0; padding: 0; }
pre { background: var(--background); color: var(--code-ink); border: 1px solid var(--border); padding: 12px; border-radius: var(--radius); overflow: auto; max-height: 420px; }

/* top bar */
.topnav { display: flex; gap: 4px; align-items: center; height: 56px; padding: 0 20px; background: var(--nav-bg); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 5; flex-wrap: wrap; }
.topnav a { color: var(--muted-foreground); font-weight: 500; text-decoration: none; padding: 6px 10px; border-radius: 6px; font-size: 13.5px; }
.topnav a:hover { color: var(--foreground); background: var(--accent); }
.topnav a.on { color: var(--foreground); background: var(--muted); }
.topnav .brand { color: var(--foreground); font-weight: 600; font-size: 15px; margin-right: 12px; padding-left: 0; background: none; }
.logo { color: var(--primary); }
.spacer { flex: 1; }

.page { max-width: 1120px; margin: 0 auto; padding: 32px 16px 64px; }
.page.wide { max-width: 1480px; }
.pagehead { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.sub, .muted { color: var(--muted-foreground); }
.grid { display: grid; gap: 16px; }
.cols-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.cols-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* card */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; min-width: 0;
  box-shadow: var(--shadow); }
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 8px; }
.card-actions { display: flex; gap: 8px; }
.stat { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; font-family: var(--font-mono); }

/* table */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; font-weight: 500; color: var(--muted-foreground); font-size: 12.5px; height: 40px; padding: 0 10px; border-bottom: 1px solid var(--border); }
td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
tbody tr { transition: background-color .12s; }
tbody tr:hover { background: var(--row-hover); }
tr:last-child td { border-bottom: 0; }

/* badge */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 1px 10px; border-radius: 999px; border: 1px solid transparent;
  font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 1.6; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-ok { color: var(--success-ink); background: hsl(160 60% 45% / .12); border-color: hsl(160 60% 45% / .25); }
.badge-bad { color: var(--danger-ink); background: hsl(0 72% 50% / .12); border-color: hsl(0 72% 50% / .3); }
.badge-busy { color: var(--primary); background: hsl(18.5 100% 50% / .12); border-color: hsl(18.5 100% 50% / .3); }
.badge-muted { color: var(--muted-foreground); background: var(--secondary); border-color: var(--border); }

/* button */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 6px;
  border: 1px solid var(--input); background: transparent; color: var(--foreground); font: inherit; font-size: 13.5px; font-weight: 500;
  cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color .12s, border-color .12s; }
.btn:hover { background: var(--accent); text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.btn-primary { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-danger { color: var(--danger-ink); border-color: hsl(0 72% 50% / .35); }
.btn-danger:hover { background: hsl(0 72% 50% / .12); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* form */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.field span { font-size: 13px; color: var(--foreground); font-weight: 500; }
input, textarea, select { font: inherit; font-size: 13.5px; padding: 8px 12px; min-height: 38px; border: 1px solid var(--input); border-radius: 6px;
  background: var(--background); color: var(--foreground); width: 100%; }
input::placeholder, textarea::placeholder { color: var(--placeholder); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px hsl(18.5 100% 50% / .2); }
textarea { min-height: 90px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.kv { display: grid; grid-template-columns: 140px 1fr; gap: 8px 12px; font-size: 13.5px; }
.kv dt { color: var(--muted-foreground); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* toasts */
.flashes { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 20; }
.flash { padding: 12px 16px; border-radius: var(--radius); cursor: pointer; max-width: 420px; background: var(--card); border: 1px solid var(--border);
  box-shadow: 0 10px 30px rgb(0 0 0 / .2); }
.flash-info { border-left: 3px solid var(--success); }
.flash-error { border-left: 3px solid var(--destructive); }

/* session page */
.session { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); gap: 16px; }
@media (max-width: 980px) { .session { grid-template-columns: 1fr; } }
.term-wrap { background: #09090b; border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; height: 560px; }
.term { height: 100%; }
.term-bar { display: flex; justify-content: space-between; color: var(--muted-foreground); font-size: 12px; margin: 8px 2px 0; font-family: var(--font-mono); }
.preview { width: 100%; height: 360px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }

/* timeline + release steps */
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { padding: 6px 0 6px 18px; border-left: 1px solid var(--border); position: relative; }
.timeline li::before { content: ""; position: absolute; left: -4px; top: 13px; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
.timeline .when { color: var(--muted-foreground); font-size: 12px; margin-right: 8px; font-family: var(--font-mono); }
.steps { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 14px; }
.steps span { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); font-size: 12px; color: var(--muted-foreground); background: var(--secondary); }
.steps span.done { color: var(--success-ink); background: hsl(160 60% 45% / .12); border-color: hsl(160 60% 45% / .25); }
.steps span.now { color: var(--primary); background: hsl(18.5 100% 50% / .12); border-color: hsl(18.5 100% 50% / .3); }
.steps span.bad { color: var(--danger-ink); background: hsl(0 72% 50% / .12); border-color: hsl(0 72% 50% / .3); }
.empty { color: var(--muted-foreground); padding: 12px 0; }
.note { background: hsl(47.9 95.8% 53.1% / .08); color: var(--warning); border: 1px solid hsl(47.9 95.8% 53.1% / .25); padding: 10px 12px; border-radius: var(--radius); margin-bottom: 12px; }
details summary { cursor: pointer; color: var(--muted-foreground); }
.page > :is(.card, .grid) + :is(.card, .grid) { margin-top: 16px; }
.theme-toggle { height: 32px; width: 32px; padding: 0; margin-left: 4px; }
.theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: inline; }
:root[data-theme="dark"] .theme-toggle .moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .sun { display: inline; }
  :root:not([data-theme="light"]) .theme-toggle .moon { display: none; }
}
.btn-sm { height: 28px; padding: 0 10px; font-size: 12.5px; }
.tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 8px; background: var(--muted); border: 1px solid var(--border); }
.tab { border: 0; background: transparent; color: var(--muted-foreground); font: inherit; font-size: 12.5px; font-weight: 500; padding: 4px 10px; border-radius: 6px; cursor: pointer; }
.tab:hover { color: var(--foreground); }
.tab.on { background: var(--card); color: var(--foreground); box-shadow: var(--shadow); }

/* my agent */
.agent-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; }
@media (max-width: 980px) { .agent-layout { grid-template-columns: 1fr; } }
.chat { display: flex; flex-direction: column; padding: 0; height: calc(100vh - 230px); min-height: 480px; }
.chat-log { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 18px; }
.turn { display: flex; flex-direction: column; gap: 8px; }
.msg { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 88%; padding: 10px 14px; border-radius: 10px; }
.msg.me { align-self: flex-end; background: var(--muted); border: 1px solid var(--border); }
.msg.sys { align-self: flex-end; color: var(--muted-foreground); font-size: 12.5px; padding: 4px 10px; }
.msg.agent { align-self: flex-start; background: var(--secondary); border: 1px solid var(--border); }
.msg.err { color: var(--danger-ink); }
.msg .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); margin-right: 6px; animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.steps-log { display: flex; flex-direction: column; gap: 3px; padding-left: 10px; border-left: 2px solid var(--border); }
.steps-log:empty { display: none; }
.step { font-size: 12.5px; overflow-wrap: anywhere; }
.step.tool .mono:first-child { color: var(--primary); }
.step.err { color: var(--danger-ink); }
.step.say { color: var(--muted-foreground); white-space: pre-wrap; }
.shot { max-width: 320px; border: 1px solid var(--border); border-radius: 6px; margin: 4px 0; }
.turn-meta { font-size: 11.5px; color: var(--muted-foreground); }
.chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); align-items: flex-end; }
.chat-form textarea { min-height: 44px; height: 44px; resize: vertical; }
.screen { width: 100%; aspect-ratio: 1280 / 830; border: 1px solid var(--border); border-radius: var(--radius); background: #000; }
.approval { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.approval:last-child { border-bottom: 0; }
.approval .draft { white-space: pre-wrap; background: var(--muted); border-radius: 6px; padding: 8px 10px; font-size: 13px; }
.msg.md { white-space: normal; }
.msg.md p { margin: 0 0 8px; } .msg.md p:last-child { margin-bottom: 0; }
.msg.md ul, .msg.md ol { margin: 0 0 8px; padding-left: 20px; }
.msg.md table { margin: 6px 0 10px; font-size: 13px; } .msg.md td, .msg.md th { padding: 6px 8px; }

/* automations */
.auto-card { align-self: flex-start; width: min(560px, 100%); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--card); display: flex; flex-direction: column; gap: 8px; }
.auto-card.pending { border-color: hsl(18.5 100% 50% / .45); box-shadow: 0 0 0 3px hsl(18.5 100% 50% / .08); }
.auto-spec { margin: 0; font-size: 13px; }
.draft-inline { background: var(--muted); border-radius: 4px; padding: 1px 6px; font-family: var(--font-mono); font-size: 12.5px; }
tr.selected td { background: var(--muted); }
.err { color: var(--danger-ink); }
.run-turn { margin-top: 8px; }

/* sign-in, sign-up, welcome */
.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--background); }
.auth-card { width: min(400px, 100%); display: flex; flex-direction: column; gap: 14px; }
.auth-card h1 { font-size: 22px; margin: 0; }
.auth-brand { font-weight: 600; display: flex; align-items: center; gap: 6px; }
.auth-brand .logo { color: var(--primary); }
.auth-card form { display: flex; flex-direction: column; gap: 12px; }
.auth-card label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted-foreground); }
.auth-card input { font: inherit; padding: 9px 11px; border: 1px solid var(--input); border-radius: var(--radius); background: var(--background); color: var(--foreground); }
.auth-card input:focus { outline: 2px solid hsl(18.5 100% 50% / .35); border-color: var(--primary); }
.btn.wide { width: 100%; justify-content: center; }
.flash-inline { padding: 9px 12px; border-radius: var(--radius); font-size: 13px; border: 1px solid var(--border); }
.flash-inline.flash-error { color: var(--danger-ink); border-color: hsl(0 72% 50% / .35); }
.flash-inline.flash-info { color: var(--success-ink); }
.small { font-size: 12.5px; }

/* ============ agent-first frame (agent-first-ui.md, section 3) ============ */
.btn.primary { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
.btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn.sm { height: 28px; padding: 0 10px; font-size: 12.5px; }
.btn.ghost { border-color: transparent; }
.btn.ghost:hover { background: var(--accent); }
.btn.danger { color: var(--danger-ink); border-color: hsl(0 72% 50% / .35); }
.kbd { font-family: var(--font-mono); font-size: 11px; border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; color: var(--muted-foreground); background: var(--background); }
.label { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-foreground); font-weight: 500; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border); font-size: 11.5px; color: var(--muted-foreground); white-space: nowrap; }
.pill.live { color: var(--success-ink); border-color: hsl(160 60% 45% / .4); }
.pill.warn { color: var(--warning); border-color: hsl(35 92% 40% / .45); }
.meta { font-size: 12px; color: var(--muted-foreground); margin: 6px 0 0; }
.warn { color: var(--warning); }
.num { font-variant-numeric: tabular-nums; }

.frame { height: 100vh; display: flex; flex-direction: column; }
.topbar { height: 48px; flex: none; display: flex; align-items: center; gap: 6px; padding: 0 12px; border-bottom: 1px solid var(--border); background: var(--background); position: relative; z-index: 6; }
.topnav-tabs { display: flex; gap: 2px; margin-left: 8px; }
.topnav-tabs .tab { padding: 6px 10px; border-radius: 6px; color: var(--muted-foreground); text-decoration: none; font-weight: 500; font-size: 13.5px; display: inline-flex; align-items: center; }
.topnav-tabs .tab:hover { color: var(--foreground); background: var(--accent); }
.topnav-tabs .tab.on { color: var(--foreground); background: var(--muted); }
.topnav-tabs .count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--primary); color: var(--primary-foreground); font-size: 11px; font-weight: 600; margin-left: 6px; }
.icon-btn { height: 32px; min-width: 32px; border-radius: 6px; border: 0; background: none; color: var(--muted-foreground); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; }
.icon-btn:hover { background: var(--accent); }
details.org-switch, details.account { position: relative; }
details.org-switch > summary, details.account > summary { list-style: none; cursor: pointer; }
details.org-switch > summary::-webkit-details-marker, details.account > summary::-webkit-details-marker { display: none; }
.org-btn { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--radius); font-weight: 500; color: var(--foreground); }
.org-btn:hover { background: var(--accent); }
.org-dot { width: 18px; height: 18px; border-radius: 5px; background: var(--primary); display: inline-block; flex: none; }
.org-dot.team { background: hsl(200 70% 45%); }
.org-dot.sm { width: 14px; height: 14px; border-radius: 4px; }
.chev { color: var(--muted-foreground); font-size: 11px; }
.menu { position: absolute; top: 40px; min-width: 240px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgb(0 0 0 / .12); padding: 6px; z-index: 10; display: flex; flex-direction: column; }
.org-menu { left: 0; }
.account-menu { right: 0; }
.menu-item { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 6px; text-decoration: none; color: var(--foreground); font-size: 13.5px; }
.menu-item:hover, .menu-item.on { background: var(--accent); }
.menu-item .sub { margin-left: auto; font-size: 12px; }
.menu-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; display: flex; flex-direction: column; }
.menu-head .sub { font-size: 12px; }
.theme-row { justify-content: space-between; cursor: default; }
.theme-pick { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; padding: 2px; gap: 2px; }
.theme-pick button { border: 0; background: none; color: var(--muted-foreground); font: inherit; font-size: 11.5px; padding: 2px 6px; border-radius: 4px; cursor: pointer; }
.theme-pick button:hover { background: var(--accent); color: var(--foreground); }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: hsl(200 70% 45%); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }

.frame-body { flex: 1; min-height: 0; display: flex; }
.rail { width: 224px; flex: none; border-right: 1px solid var(--border); padding: 14px 10px; overflow-y: auto; background: var(--background); }
.rail-label { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-foreground); font-weight: 500; padding: 0 8px; margin: 12px 0 4px; }
.rail-section:first-child .rail-label { margin-top: 0; }
.rail-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; color: var(--foreground); text-decoration: none; font-size: 13.5px; }
.rail-item:hover { background: var(--accent); }
.rail-item.on { background: var(--muted); font-weight: 500; }
.rail-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-st { margin-left: auto; font-size: 11px; color: var(--muted-foreground); white-space: nowrap; }
.tone-ok { color: var(--success-ink); }
.tone-warn { color: var(--warning); }
.tone-bad { color: var(--danger-ink); }
.frame-main { flex: 1; min-width: 0; overflow-y: auto; background: var(--background); }
.frame-main.fill { overflow: hidden; display: flex; }
.frame-main .page { max-width: 880px; padding: 28px 20px 64px; }
.frame-main.wide .page { max-width: 1480px; }

/* Home */
.home { flex: 1; min-width: 0; display: flex; }
.conv-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.conv-col .scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 24px 20px 12px; }
.conv { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.day { display: flex; align-items: center; gap: 12px; color: var(--muted-foreground); font-size: 12px; }
.day::before, .day::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.turn { display: flex; flex-direction: column; gap: 10px; }
.conv .msg { display: flex; gap: 11px; max-width: 100%; padding: 0; border: 0; background: none; white-space: normal; align-self: stretch; border-radius: 0; }
.conv .msg .who { font-weight: 600; font-size: 13.5px; line-height: 1.4; color: var(--foreground); }
.conv .msg .who.you { color: var(--you); }
.conv .msg .who time { font-weight: 400; color: var(--faint); font-size: 11.5px; margin-left: 7px; opacity: 0; transition: opacity .12s; }
.conv .msg:hover .who time { opacity: 1; }
.conv .msg .txt { min-width: 0; flex: 1; max-width: 64ch; }
.conv .msg .said { white-space: pre-wrap; overflow-wrap: anywhere; }
.conv .msg .txt p { margin: 0 0 6px; }
.reply.md p { margin: 0 0 8px; } .reply.md p:last-child { margin: 0; }
.reply.md ul, .reply.md ol { margin: 0 0 8px; padding-left: 20px; }
.reply.md table { margin: 6px 0 10px; font-size: 13px; }
.reply.err { color: var(--danger-ink); }
.scope-pill { display: inline-block; font-size: 11.5px; color: var(--muted-foreground); background: var(--muted); border-radius: 999px; padding: 0 8px; margin-bottom: 4px; }
.steps-line { border: 0; background: none; color: var(--muted-foreground); font: inherit; font-size: 12px; padding: 0; margin: 0 0 6px; cursor: pointer; font-family: var(--font-mono); }
.steps-line:hover { color: var(--foreground); }
.run-card, .acard { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); padding: 12px 14px; margin-top: 8px; max-width: 540px; display: flex; flex-direction: column; gap: 6px; }
.acard.pending { border-color: hsl(18.5 100% 50% / .5); box-shadow: 0 0 0 3px hsl(18.5 100% 50% / .07); }
.acard.receipt { border-left: 3px solid var(--success); }
.acard h3 { font-size: 14px; font-weight: 600; margin: 0; color: var(--foreground); text-transform: none; letter-spacing: 0; }
.acard-head, .run-head { display: flex; align-items: center; gap: 8px; }
.acard-head .label, .run-head .label { margin-right: auto; }
.cost { font-family: var(--font-mono); font-size: 12px; color: var(--muted-foreground); }
.acard .row, .run-card .row { margin-top: 4px; gap: 8px; }
.acard .kv { grid-template-columns: 96px 1fr; font-size: 13px; gap: 4px 12px; }
.runline { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); animation: pulse 1.4s infinite; flex: none; }
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } }
.plan-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; }
.question h3 { margin: 4px 0 6px; }
.choice { display: flex; flex-direction: column; gap: 6px; }
.choice label { display: flex; gap: 8px; align-items: center; padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font-size: 13.5px; }
.choice label:hover { border-color: var(--primary); }
.choice input[type=radio] { width: auto; min-height: 0; accent-color: var(--primary); }
.choice .write-in input[type=text] { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; min-height: 0; padding: 2px 4px; background: none; }
.answers { margin: 0; padding-left: 18px; font-size: 13px; }
.answers .muted { margin-right: 6px; }
.receipt-lines { margin: 0; padding-left: 18px; font-size: 13.5px; }
.struck { text-decoration: line-through; color: var(--muted-foreground); }
.quote { border-left: 3px solid var(--border); padding: 6px 10px; background: var(--muted); border-radius: 4px; white-space: pre-wrap; font-size: 13.5px; }
.quote .to { font-size: 12px; color: var(--muted-foreground); }
.sug-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: 8px; }
.sug { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; text-align: left; background: var(--card); display: flex; flex-direction: column; gap: 4px; font: inherit; color: var(--foreground); cursor: pointer; }
.sug:hover { border-color: var(--primary); }
.sug .label { font-size: 10.5px; }
.sug .t { font-weight: 500; }
.sug small { color: var(--muted-foreground); }
.more { align-self: center; }
.search-head { font-size: 13px; color: var(--muted-foreground); }

.composer { padding: 10px 20px 14px; border-top: 1px solid var(--border); background: var(--background); flex: none; }
.composer .box { max-width: 720px; margin: 0 auto; border: 1px solid var(--border); border-radius: 10px; background: var(--card); display: flex; align-items: flex-end; gap: 8px; padding: 8px 8px 8px 14px; }
.composer .box:focus-within { border-color: var(--primary); }
.composer textarea { flex: 1; min-width: 0; border: 0; background: none; box-shadow: none !important; min-height: 24px; max-height: 200px; padding: 4px 0; resize: none; }
.composer .scope { font-size: 12px; color: var(--muted-foreground); padding: 2px 8px; border-radius: 999px; background: var(--muted); white-space: nowrap; align-self: center; }
.composer .kbd { align-self: center; }
.composer-meta { max-width: 720px; margin: 6px auto 0; font-size: 11.5px; color: var(--muted-foreground); }
.send { width: 30px; height: 30px; border-radius: 7px; background: var(--primary); color: var(--primary-foreground); border: 0; font-weight: 600; cursor: pointer; flex: none; }
.composer.inline { border-top: 0; padding: 12px 0 0; }
.composer.inline .box { max-width: none; }

.pane { width: 400px; flex: none; border-left: 1px solid var(--border); background: var(--card); display: flex; flex-direction: column; min-width: 0; }
.pane.wide { width: min(640px, 48vw); }
.pane-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.pane-head h2 { font-size: 14px; margin-right: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pane-body { padding: 14px; overflow: auto; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.pane .screen { width: 100%; aspect-ratio: 1280 / 830; border: 1px solid var(--border); border-radius: var(--radius); background: #000; }
.pane .screen.placeholder { background: repeating-linear-gradient(45deg, var(--muted) 0 6px, var(--card) 6px 12px); display: flex; align-items: center; justify-content: center; color: var(--muted-foreground); text-align: center; padding: 16px; }
.preview-frame { width: 100%; height: 420px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.pane .preview-frame { height: calc(100vh - 200px); }
ol.trace { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.trace-step { display: grid; grid-template-columns: 22px 1fr; gap: 8px; font-size: 13px; align-items: baseline; overflow-wrap: anywhere; }
.trace-step .n { font-family: var(--font-mono); font-size: 11px; color: var(--muted-foreground); }
.trace-step .mono { display: block; font-size: 11px; }
.trace-step.err { color: var(--danger-ink); }
.trace-step.say { color: var(--muted-foreground); }
.trace-step .shot { max-width: 100%; }
.empty-hero { max-width: 520px; margin: 12vh auto; text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; }

/* Inbox */
.inbox { display: flex; flex-direction: column; gap: 18px; }
.inbox h1 { font-size: 20px; }
.group h2 { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-foreground); font-weight: 500; margin-bottom: 6px; display: flex; gap: 8px; align-items: center; }
.group .count { font-family: var(--font-mono); }
.trow { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); margin-bottom: 6px; }
.trow.sel { border-color: var(--primary); box-shadow: 0 0 0 3px hsl(18.5 100% 50% / .1); }
.trow:hover { background: var(--row-hover); }
.trow .k { width: 10px; height: 10px; border-radius: 50%; justify-self: center; }
.trow .k.need { background: var(--warning); }
.trow .k.work { background: var(--primary); animation: pulse 1.4s infinite; }
.trow .k.done { background: var(--success); }
.trow .k.fail { background: var(--destructive); }
.trow-main { text-decoration: none; color: inherit; min-width: 0; }
.trow .t { font-weight: 500; overflow-wrap: anywhere; }
.trow .s { font-size: 12.5px; color: var(--muted-foreground); overflow-wrap: anywhere; }
.trow .r { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.keys { font-size: 12px; color: var(--muted-foreground); display: flex; gap: 12px; flex-wrap: wrap; }

/* item pages */
.item-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.item-head .ph1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.item-head h1 { font-size: 20px; margin: 0; }
.crumbs { margin: 0; font-size: 12.5px; color: var(--muted-foreground); }
.crumbs a { color: var(--muted-foreground); }
.item-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); }
.item-tab { padding: 8px 12px; color: var(--muted-foreground); border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none; font-size: 13.5px; }
.item-tab.on { color: var(--foreground); border-bottom-color: var(--primary); }
.tl { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.tl li { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.tl .when { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted-foreground); }
.tl .by { color: var(--muted-foreground); font-size: 12.5px; }
.section { margin-top: 20px; }
.section-h { font-size: 13px; font-weight: 600; margin: 20px 0 8px; }
.scoped { margin-top: 28px; border-top: 1px solid var(--border); padding-top: 16px; }
.scoped-thread { max-width: none; margin-bottom: 8px; }
.list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.list-row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "t a" "s a"; gap: 2px 12px; padding: 10px 14px; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; align-items: center; }
.list-row:last-child { border-bottom: 0; }
.list-row .t { grid-area: t; font-weight: 500; }
.list-row .s { grid-area: s; font-size: 12.5px; color: var(--muted-foreground); }
.list-row > .btn { grid-area: a; }
a.list-row:hover { background: var(--row-hover); }
.stack { display: flex; flex-direction: column; gap: 4px; max-width: 520px; }
.task-page { display: flex; flex-direction: column; gap: 12px; }
.task-page .conv { margin: 0; }

/* ⌘K */
.palette { position: fixed; inset: 0; background: rgb(0 0 0 / .35); z-index: 30; display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; }
.palette[hidden] { display: none; }
.palette-box { width: min(560px, calc(100vw - 32px)); background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 20px 60px rgb(0 0 0 / .3); overflow: hidden; }
.palette-box input { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; font-size: 15px; padding: 14px 16px; box-shadow: none !important; }
#palette-list { list-style: none; margin: 0; padding: 6px; max-height: 50vh; overflow: auto; }
#palette-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 13.5px; }
#palette-list li.on, #palette-list li:hover { background: var(--accent); }
#palette-list .k { color: var(--muted-foreground); font-size: 12px; }
.palette-foot { display: flex; gap: 12px; flex-wrap: wrap; padding: 8px 12px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--muted-foreground); }

.bottom-tabs { display: none; }
@media (max-width: 900px) {
  .rail { display: none; }
  .rail.open { display: block; position: fixed; inset: 48px 0 52px 0; width: auto; z-index: 9; }
  .bottom-tabs { display: flex; flex: none; height: 52px; border-top: 1px solid var(--border); background: var(--background); }
  .bottom-tabs a, .bottom-tabs button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; color: var(--muted-foreground); text-decoration: none; font: inherit; font-weight: 500; background: none; border: 0; }
  .bottom-tabs .on { color: var(--foreground); }
  .bottom-tabs .count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
  .topnav-tabs { display: none; }
  .pane, .pane.wide { position: fixed; inset: auto 0 0 0; height: 72%; width: auto; border-left: 0; border-top: 1px solid var(--border); border-radius: 14px 14px 0 0; box-shadow: 0 -10px 30px rgb(0 0 0 / .2); z-index: 8; }
  .topnav-tabs { margin-left: 2px; }
  .tl li { grid-template-columns: 1fr; gap: 2px; }
}
@media (max-width: 560px) {
  .kv { grid-template-columns: 1fr; }
  .trow { grid-template-columns: 16px 1fr; }
  .trow .r { grid-column: 2; justify-content: flex-start; }
  .org-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* /welcome */
.auth-card.welcome { width: min(560px, 100%); }
.tools-label { font-size: 13px; color: var(--muted-foreground); }
.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.tool { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); color: var(--foreground); font: inherit; cursor: pointer; text-align: left; }
.tool:hover { border-color: var(--primary); }
.tool.on { border-color: var(--primary); background: hsl(18.5 100% 50% / .08); }
.tool-name { font-weight: 500; font-size: 13.5px; }
.tool-kind { font-size: 11px; color: var(--muted-foreground); }
.auth-card.mailbox { width: min(640px, 100%); }
.acard.mail { max-width: none; }
.mail-text { white-space: pre-wrap; max-height: none; }
.agent-bar { display: flex; align-items: center; gap: 8px; padding: 8px 20px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.item-tabs.flat { border-bottom: 0; }
.team-item { display: flex; flex-direction: column; }
.team-item .meta { margin: 0; }
.waiting { color: var(--warning); }
.invite-card { max-width: none; }
.list-row label { display: inline-flex; gap: 4px; align-items: center; margin-right: 10px; }
.list-row input[type=checkbox] { width: auto; min-height: 0; accent-color: var(--primary); }
.invites-strip { padding: 10px 20px 0; flex: none; }
.invites-strip .acard { max-width: 720px; margin: 0 auto; }

.agent-av { width: 24px; height: 24px; border-radius: 50%; background: var(--foreground); color: var(--background); display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 600; flex: none; }
.agent-av.sm { width: 20px; height: 20px; font-size: 10.5px; }
.agent-av.org { background: hsl(200 70% 45%); color: #fff; border-radius: 6px; }
.chat-head { display: flex; align-items: center; gap: 8px; padding: 8px 20px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.chat-head a.who-link { color: var(--foreground); text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; border-radius: 6px; padding: 2px 6px 2px 2px; }
.chat-head a.who-link:hover { background: var(--accent); }
.chat-head .in-org { color: var(--muted-foreground); }
.rename { margin: 0 0 14px; gap: 8px; align-items: center; flex-wrap: wrap; }
.rename input[type=text] { width: 180px; }
.add-login { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin: 0 0 16px; background: var(--card); }
.add-login label { font-weight: 500; font-size: 13px; display: block; margin-bottom: 6px; }
.add-login .row { gap: 8px; }
.add-login input[type=text] { flex: 1; min-width: 160px; }
.login-group { margin-bottom: 20px; }
.login-group .section-h { display: flex; align-items: baseline; gap: 8px; }
/* Task card: a question handed to another agent */
.pill.ok { color: var(--success-ink); border-color: hsl(160 60% 45% / .4); }
.pill.bad { color: var(--danger-ink); border-color: hsl(0 72% 50% / .35); }
.task-card .task-q { margin: 0; font-size: 13.5px; color: var(--foreground); }
.task-route { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--muted-foreground); }
.task-route .hop { padding: 1px 7px; border-radius: 6px; background: var(--muted); color: var(--foreground); }
.task-route .hop.last { font-weight: 600; }
.task-route .arrow { color: var(--muted-foreground); }
.task-answer { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 2px; font-size: 13.5px; }
.task-card.st-needs_input { border-color: hsl(35 92% 40% / .45); }
/* @mentions in the composer */
.mention-menu { position: absolute; bottom: calc(100% + 6px); left: 0; min-width: 240px; max-width: 360px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgb(0 0 0 / .15); list-style: none; margin: 0; padding: 4px; z-index: 20; }
.mention-menu[hidden] { display: none; }
.mention-menu li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.mention-menu li.on, .mention-menu li:hover { background: var(--accent); }
.mention-menu .k { margin-left: auto; color: var(--muted-foreground); font-size: 11.5px; }
.composer .box { position: relative; }
/* Sidebar: agents grouped by team */
.rail-group { font-size: 11px; color: var(--muted-foreground); padding: 6px 10px 2px 18px; }
.rail-item .agent-av { margin-right: 6px; }
.rail-item.agent { display: flex; align-items: center; }
.rail-item.agent .rail-title { flex: 1; }
/* Teams page */
.team-block { margin: 0 0 24px; }
.team-block .section-h { display: flex; align-items: baseline; gap: 8px; }
.people { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 10px; }
.person-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--border); font-size: 12.5px; background: var(--card); }
.person-chip .x { border: 0; background: none; color: var(--muted-foreground); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 0 0 2px; }
.inline-add { display: inline-flex; gap: 6px; align-items: center; }
.inline-add select { font-size: 12.5px; padding: 3px 6px; }
.team-fd { margin: 0 0 20px; border: 1px solid var(--border); border-radius: var(--radius); }
.list-row .t .agent-av { margin-right: 6px; }
.new-team { gap: 8px; margin-top: 8px; }
.new-team input[type=text] { flex: 1; max-width: 320px; }
.add-login input[type=text] { width: 100%; margin-bottom: 8px; }

/* ============ Inline pass (docs/plans/inline-ui.md) ============
   No top bar: a full-height sidebar of conversations, quiet messages,
   one orange accent. Tokens first, for both themes. */
:root, :root[data-theme="light"] {
  --side: hsl(60 5% 97%);
  --hover: hsl(60 3% 92.5%);
  --chip: hsl(60 3% 94.5%);
  --faint: hsl(240 3% 62%);
  --info: hsl(217 73% 52%);
  --you: hsl(22 80% 40%);
  --t1: hsl(212 64% 49%); --t2: hsl(262 60% 57%); --t3: hsl(170 60% 33%);
  --t4: hsl(330 55% 50%); --t5: hsl(38 85% 38%); --t6: hsl(200 15% 42%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --side: hsl(240 5% 6.5%);
    --hover: hsl(240 4% 12%);
    --chip: hsl(240 4% 13%);
    --faint: hsl(240 4% 44%);
    --info: hsl(217 90% 68%);
    --you: hsl(22 82% 62%);
    --t1: hsl(212 70% 63%); --t2: hsl(262 70% 72%); --t3: hsl(170 50% 52%);
    --t4: hsl(330 65% 68%); --t5: hsl(38 85% 60%); --t6: hsl(200 12% 62%);
  }
}
:root[data-theme="dark"] {
  --side: hsl(240 5% 6.5%);
  --hover: hsl(240 4% 12%);
  --chip: hsl(240 4% 13%);
  --faint: hsl(240 4% 44%);
  --info: hsl(217 90% 68%);
  --you: hsl(22 82% 62%);
  --t1: hsl(212 70% 63%); --t2: hsl(262 70% 72%); --t3: hsl(170 50% 52%);
  --t4: hsl(330 65% 68%); --t5: hsl(38 85% 60%); --t6: hsl(200 12% 62%);
}

/* frame */
.frame { height: 100vh; height: 100dvh; display: flex; flex-direction: row; }
.side { width: 248px; flex: none; display: flex; flex-direction: column; background: var(--side); border-right: 1px solid var(--border); min-height: 0; }
.side .org-switch { padding: 10px 8px 4px; }
.side .org-btn { padding: 6px 8px; border-radius: 7px; font-weight: 600; }
.org-btn:hover { background: var(--hover); }
.org-btn .chev { display: inline-flex; margin-left: -2px; }
.org-btn .chev .ico { width: 13px; height: 13px; }
.org-dot { width: 16px; height: 16px; border-radius: 4px; }
.side-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 8px 10px; display: flex; flex-direction: column; gap: 1px; }
.side-label { font-size: 11.5px; color: var(--faint); padding: 14px 8px 4px; font-weight: 500; }
.srow { display: flex; align-items: center; gap: 9px; padding: 5px 8px; border-radius: 7px; color: var(--foreground); text-decoration: none; font-size: 13.5px; white-space: nowrap; min-width: 0; cursor: pointer; list-style: none; }
.srow::-webkit-details-marker { display: none; }
.srow:hover { background: var(--hover); text-decoration: none; }
.srow.on { background: var(--hover); font-weight: 500; }
.srow .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.srow .n { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.srow .n.count { color: var(--primary); font-weight: 600; }
.srow .tag { font-size: 11.5px; color: var(--faint); }
.srow .tag.tone-ok { color: var(--success-ink); }
.srow .tag.tone-bad { color: var(--danger-ink); }
.srow.sub { padding-left: 37px; position: relative; }
.srow.sub .t { font-size: 13px; }
.srow.dim, .srow.dim .t { color: var(--muted-foreground); }
.srow.unread .t { font-weight: 600; }
.udot { position: absolute; left: 24px; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.sico { width: 20px; display: inline-flex; justify-content: center; color: var(--muted-foreground); flex: none; }
.side-hr { height: 1px; background: var(--border); margin: 10px 6px; }
.side-lib > summary .chev .ico { transition: transform .15s; }
.side-lib[open] > summary .chev .ico { transform: rotate(90deg); }
.side-foot { display: flex; justify-content: space-around; padding: 6px 8px 8px; border-top: 1px solid var(--border); }
.fbtn { width: 30px; height: 30px; display: inline-grid; place-items: center; border-radius: 7px; color: var(--faint); background: none; border: 0; cursor: pointer; text-decoration: none; }
.fbtn:hover, .fbtn.on { background: var(--hover); color: var(--foreground); }
.ico { width: 16px; height: 16px; flex: none; }
.pulse.sm { width: 6px; height: 6px; background: var(--info); }
.side.only-unread .srow.sub:not(.unread):not(.on):not(#side-new-thread) { display: none; }

/* avatars: the person's own agent is ink, others one of six quiet colours */
.av { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10.5px; font-weight: 600; color: var(--background); background: var(--muted-foreground); flex: none; text-decoration: none; line-height: 1; }
.av.lg { width: 28px; height: 28px; font-size: 12.5px; }
.av.mine { background: var(--foreground); }
.av.you { background: var(--you); }
.av.org { border-radius: 6px; background: var(--t1); }
/* Agents: a rounded square in their colour; people stay round. */
.av.agent { border-radius: 28%; }
.agent-tag { display: inline-block; margin-left: 6px; padding: 0 5px; border: 1px solid var(--border); border-radius: 4px; font-size: 10px; font-weight: 500; line-height: 15px; color: var(--muted-foreground); vertical-align: 1px; letter-spacing: .02em; }
.av.c1 { background: var(--t1); } .av.c2 { background: var(--t2); } .av.c3 { background: var(--t3); }
.av.c4 { background: var(--t4); } .av.c5 { background: var(--t5); } .av.c6 { background: var(--t6); }
a.av:hover { text-decoration: none; opacity: .85; }

/* menus from the org switcher */
.menu { top: 44px; border-radius: 10px; }
.side .org-menu { left: 8px; }
.menu-sep { height: 1px; background: var(--border); margin: 4px 2px; }
.menu-item .kbd { margin-left: 6px; }
.menu-head { flex-direction: row; align-items: center; gap: 10px; border-bottom: 0; margin: 0; }
.menu-head > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.menu-head .sub { overflow: hidden; text-overflow: ellipsis; }
.avatar { background: var(--you); flex: none; }

/* the page */
.frame-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-y: auto; }
.frame-main.fill { overflow: hidden; }
.frame-main.fill > .home, .frame-main.fill > .thread-page { flex: 1; min-height: 0; }
.mobile-top { display: none; }

/* chat header */
.chat-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border); min-height: 56px; flex: none; }
.navpill { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; flex: none; }
.navpill button { border: 0; background: none; color: var(--muted-foreground); width: 26px; height: 24px; cursor: pointer; font-size: 15px; line-height: 1; }
.navpill button + button { border-left: 1px solid var(--border); }
.navpill button:hover { background: var(--hover); color: var(--foreground); }
.chat-head .ttl { flex: 1; min-width: 0; line-height: 1.25; display: flex; flex-direction: column; }
.chat-head .ttl b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-head .ttl small { color: var(--muted-foreground); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-head .ttl small a { color: var(--muted-foreground); text-decoration: none; }
.chat-head .ttl small a:hover { color: var(--foreground); }
.chat-head .state.live { color: var(--info); }
.pills { display: flex; gap: 6px; align-items: center; flex: none; }
.hpill { height: 28px; min-width: 28px; padding: 0 8px; border: 1px solid var(--border); border-radius: 999px; background: none; color: var(--muted-foreground); display: inline-flex; align-items: center; justify-content: center; gap: 5px; font: inherit; font-size: 12.5px; cursor: pointer; text-decoration: none; }
.hpill:hover { background: var(--hover); color: var(--foreground); text-decoration: none; }
.hpill.on { color: var(--foreground); }
.hpill.done { color: var(--success-ink); border-color: hsl(160 60% 45% / .4); }
.seg { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: 999px; }
.seg a, .seg button { padding: 2px 10px; border-radius: 999px; font-size: 12.5px; color: var(--muted-foreground); text-decoration: none; border: 0; background: none; font: inherit; cursor: pointer; }
.seg a.on, .seg button.on { background: var(--foreground); color: var(--background); }
.seg a:hover:not(.on) { color: var(--foreground); }
.composer { border-top: 0; }

/* phones: the sidebar becomes a sheet; a bottom bar takes its place */
@media (max-width: 900px) {
  .frame { flex-direction: column; }
  .side { display: none; }
  .side.open { display: flex; position: fixed; inset: 0 0 56px 0; width: auto; z-index: 9; border-right: 0; }
  .mobile-top { display: flex; align-items: center; padding: 6px 8px; border-bottom: 1px solid var(--border); flex: none; }
  .frame-main.fill .mobile-top { display: none; }
  .bottom-tabs { display: flex; flex: none; height: 56px; border-top: 1px solid var(--border); background: var(--background); }
  .bottom-tabs a, .bottom-tabs button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11px; color: var(--faint); }
  .bottom-tabs .ico { width: 18px; height: 18px; }
  .bottom-tabs .count { position: absolute; margin: -26px 0 0 26px; min-width: 16px; height: 16px; font-size: 10px; }
  .bottom-tabs a { position: relative; }
  .chat-head { padding: 8px 12px; }
  .navpill { border: 0; }
  .navpill button + button { display: none; }
}

/* threads (docs/plans/inline-ui.md, section 2) */
.tlink { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 10px; padding: 7px 12px; margin: 2px 0 6px; max-width: 460px; background: var(--card); text-decoration: none; color: var(--foreground); }
.tlink:hover { background: var(--hover); text-decoration: none; }
.tlink .t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.tlink b { font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tlink small { color: var(--muted-foreground); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbadge { font-size: 11px; border: 1px solid var(--border); border-radius: 999px; padding: 0 8px; color: var(--success-ink); white-space: nowrap; }
.st-working .sbadge { color: var(--info); }
.st-needs_you .sbadge { color: var(--primary); border-color: hsl(18.5 100% 50% / .4); }
.st-failed .sbadge { color: var(--danger-ink); }
.svc { text-align: center; color: var(--faint); font-size: 12.5px; padding: 2px 0; }
.svc a { color: var(--muted-foreground); }
.hpill.ppl { padding: 0 6px 0 4px; gap: 0; }
.hpill.ppl .av { width: 18px; height: 18px; font-size: 9.5px; border: 2px solid var(--background); margin-left: -5px; }
.hpill.ppl .av:first-child { margin-left: 0; }
details.more { position: relative; }
details.more > summary { list-style: none; }
details.more > summary::-webkit-details-marker { display: none; }
.more-menu { right: 0; top: 34px; min-width: 200px; }
.more-menu button.menu-item { border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-align: left; width: 100%; }
.more-menu .kbd { margin-left: auto; }
.trow .k.unread { background: var(--info); }

/* messages (docs/plans/inline-ui.md, section 3) */
.conv { gap: 16px; }
.turn { gap: 14px; }
.conv .msg > .av { margin-top: 1px; }
.conv .msg.cont { margin-top: -10px; }
.conv .msg.cont > .av { visibility: hidden; height: 0; }
.conv .msg.cont .who { display: none; }
.conv .msg .txt { max-width: 68ch; }
.conv .msg .txt > .said, .conv .msg .txt > .reply { margin-top: 1px; }
details.worked { margin: 1px 0 4px; }
details.worked > summary { list-style: none; color: var(--muted-foreground); font-size: 13px; cursor: pointer; display: inline-flex; gap: 2px; user-select: none; }
details.worked > summary::-webkit-details-marker { display: none; }
details.worked > summary:hover { color: var(--foreground); }
details.worked > summary .chev { display: inline-block; margin-left: 4px; transition: transform .15s; }
details.worked[open] > summary .chev { transform: rotate(90deg); }
.steplist { margin: 6px 0 4px; padding: 0 0 0 2px; list-style: none; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--muted-foreground); }
.steplist li::before { content: "✓ "; color: var(--faint); }
.steplist li.err { color: var(--danger-ink); }
.steplist li.err::before { content: "! "; }
.live-steps { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--muted-foreground); margin: 2px 0 4px; }
.live-steps .now { color: var(--foreground); display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.live-steps .pulse { width: 7px; height: 7px; background: var(--info); }
.linkish { border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; color: var(--muted-foreground); text-decoration: underline; text-decoration-color: var(--link-line); text-underline-offset: 3px; cursor: pointer; }
.linkish:hover { color: var(--foreground); }
.cline { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; color: var(--muted-foreground); font-size: 13px; margin: 4px 0 0; }
.cline .ok { color: var(--success-ink); }
.cline .pulse { align-self: center; width: 7px; height: 7px; background: var(--info); }
.cline.struck > span { text-decoration: line-through; }
.ack { display: inline-flex; align-items: center; gap: 3px; margin-top: 6px; background: var(--chip); border-radius: 999px; padding: 0 9px; font-size: 12px; color: var(--muted-foreground); }
.ack.mine { color: var(--success-ink); }
.conv .msg.agent .reply { cursor: default; }
/* cards only for what needs the person: text width, no side bar, tighter */
.acard, .run-card { max-width: 520px; padding: 10px 12px; gap: 5px; margin-top: 6px; border-radius: 10px; box-shadow: none; }
.acard.pending { border-color: var(--border); box-shadow: none; }
.acard.receipt { border-left: 1px solid var(--border); }
.acard .label { font-size: 10.5px; }
.acard h3 { font-size: 13.5px; }
.acard .btn.sm { height: 26px; }
.acard .btn.primary { background: var(--foreground); border-color: var(--foreground); color: var(--background); }
.acard .btn.primary:hover { opacity: .88; background: var(--foreground); }
.ack .av { width: 15px; height: 15px; font-size: 8.5px; margin-left: 2px; }

/* composer: a pill with + for commands (docs/plans/inline-ui.md, section 4) */
.composer { padding: 8px 20px 16px; }
.composer .box { border-radius: 999px; padding: 5px 5px 5px 6px; align-items: center; gap: 6px; background: var(--background); }
.composer .box:focus-within { border-color: var(--muted-foreground); }
.composer textarea { padding: 5px 2px; font-size: 14px; }
.composer .send { width: 32px; height: 32px; border-radius: 50%; font-size: 15px; }
.composer .scope { align-self: center; }
details.cplus { position: relative; flex: none; }
details.cplus > summary { list-style: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); display: grid; place-items: center; color: var(--muted-foreground); cursor: pointer; }
details.cplus > summary::-webkit-details-marker { display: none; }
details.cplus > summary:hover { color: var(--foreground); background: var(--hover); }
.cmd-menu { bottom: 40px; top: auto; left: 0; min-width: 280px; }
.cmd-menu .menu-item { border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-align: left; width: 100%; }
.cmd-menu b { font-family: var(--font-mono); font-weight: 500; font-size: 12.5px; }
/* new thread */
.new-empty { flex: 1; display: grid; place-items: center; color: var(--faint); text-align: center; padding: 20px; }
.new-empty p { margin: 0; color: var(--muted-foreground); }
.new-empty .muted { display: block; color: var(--faint); font-size: 13px; }
.mark { width: 44px; height: 44px; border-radius: 12px; border: 3px solid var(--border); margin: 0 auto 12px; }
.composer.big { padding: 0 20px 28px; }
.bigbox { max-width: 720px; margin: 0 auto; border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px 10px; background: var(--card); position: relative; }
.bigbox:focus-within { border-color: var(--muted-foreground); }
.bigbox textarea { border: 0; background: none; box-shadow: none !important; min-height: 64px; padding: 0; resize: none; font-size: 15px; }
.bigbox .bar { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--chip); color: var(--muted-foreground); font: inherit; font-size: 12.5px; border: 0; cursor: pointer; list-style: none; }
.chip::-webkit-details-marker { display: none; }
.chip:hover { color: var(--foreground); }
.chip.dim { opacity: .6; }
.chip .av { width: 16px; height: 16px; font-size: 9px; }
details.chip-menu { position: relative; }
.chip-list { bottom: 34px; top: auto; left: 0; min-width: 220px; max-height: 300px; overflow: auto; }
.chip-list .menu-item { border: 0; background: none; font: inherit; color: inherit; cursor: pointer; width: 100%; text-align: left; }

/* Inbox: quiet rows (docs/plans/inline-ui.md, section 4) */
.inbox { max-width: 720px; margin: 0 auto; gap: 14px; }
.inbox h1 { font-size: 18px; }
.inbox .group h2 { font-size: 11.5px; margin: 0 0 2px 10px; color: var(--muted-foreground); }
.irow { display: grid; grid-template-columns: 10px 1fr auto auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--foreground); }
.irow:hover, .irow.sel { background: var(--hover); text-decoration: none; }
.irow .im { min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.irow .im b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.irow .im small { color: var(--muted-foreground); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.irow .when { color: var(--faint); font-size: 12px; }
.irow .iact { display: flex; gap: 10px; opacity: 0; }
.irow:hover .iact, .irow.sel .iact { opacity: 1; }
.idot { width: 7px; height: 7px; border-radius: 50%; background: transparent; justify-self: center; }
.idot.need { background: var(--primary); }
.idot.unread { background: var(--info); }
.idot.work { background: var(--info); animation: pulse 1.4s infinite; }
.idot.fail { background: var(--destructive); }
.idot.done { border: 1px solid var(--border); }
.inbox .keys { margin-top: 6px; padding-left: 10px; }
/* Chats (phone's first tab) */
.chats { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 1px; }
.chats .seg.wide { align-self: flex-start; margin-bottom: 10px; }
.chats form { margin: 0 0 10px; }
.chats .srow.sub .n { margin-left: 6px; }
@media (max-width: 900px) { .irow { grid-template-columns: 10px 1fr auto; } .irow .iact { display: none; } }
.irow .im { color: var(--foreground); text-decoration: none; } .irow .im:hover { text-decoration: none; }

/* ============ App hub (docs/dogfood/apps-hub.md) ============
   An app's page, its changes and versions: quiet rows, two panes, one orange
   dot for "a preview waits for you". */
.crumbs .sep { margin: 0 6px; color: var(--faint); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--foreground); }
.hub-head .ph1 { gap: 8px; }
.hub-sub { color: var(--muted-foreground); font-size: 13px; }
.hub-sub .live-dot { color: var(--success-ink); font-size: 10px; margin-right: 2px; vertical-align: 1px; }
.hpill.primary { background: var(--foreground); border-color: var(--foreground); color: var(--background); }
.hpill.primary:hover { opacity: .88; background: var(--foreground); color: var(--background); }
.tab-n { margin-left: 6px; font-size: 11px; color: var(--primary); font-weight: 600; }
.app-panes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.app-pane { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; background: var(--card); }
.app-pane > header { display: flex; align-items: baseline; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); min-width: 0; font-size: 13px; }
.app-pane > header b { font-weight: 600; }
.app-pane > header .addr { margin-left: auto; color: var(--muted-foreground); font-size: 11.5px; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.app-pane > header .addr:hover { color: var(--foreground); }
.app-pane > header .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.pane-frame { width: 100%; height: 380px; border: 0; background: #fff; display: block; }
.pane-empty { height: 380px; display: grid; place-items: center; color: var(--faint); font-size: 13px; text-align: center; padding: 16px; }
.pane-empty.left { place-items: start; display: block; height: auto; min-height: 120px; text-align: left; color: var(--muted-foreground); }
.hub-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.hub-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 8px; min-width: 0; }
.hub-row:hover { background: var(--hover); }
.hub-row.empty { color: var(--faint); font-size: 13px; }
.hub-row.empty:hover { background: none; }
.hub-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; text-decoration: none; color: var(--foreground); }
.hub-t:hover { text-decoration: none; }
.hub-t b { font-weight: 500; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-t small { color: var(--muted-foreground); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-acts { display: flex; align-items: center; gap: 12px; flex: none; }
.hub-acts .btn.primary { background: var(--foreground); border-color: var(--foreground); color: var(--background); }
.hub-acts .btn.primary:hover { opacity: .88; }
.hdot { width: 7px; height: 7px; border-radius: 50%; flex: none; border: 1px solid var(--border); }
.hdot.need { background: var(--primary); border-color: var(--primary); }
.hdot.work { background: var(--info); border-color: var(--info); animation: pulse 1.4s infinite; }
.hdot.done { background: var(--success-ink); border-color: var(--success-ink); }
.hub-t.log { font-size: 13px; color: var(--muted-foreground); }
.hub-desc { margin-top: 14px; padding-left: 10px; }
.srow.sub2 { padding-left: 50px; position: relative; }
.srow.sub2 .t { font-size: 12.5px; color: var(--muted-foreground); }
.srow.sub2.on .t, .srow.sub2:hover .t { color: var(--foreground); }
.srow.sub2.waiting .t { color: var(--foreground); font-weight: 500; }
.odot { position: absolute; left: 37px; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.app-panes > * { min-width: 0; }
.app-pane > header > * { min-width: 0; }
.hub-head .ph1 > * { min-width: 0; }
@media (max-width: 900px) {
  .app-panes { grid-template-columns: minmax(0, 1fr); }
  .pane-frame, .pane-empty { height: 300px; }
  .hub-row { flex-wrap: wrap; }
  .hub-acts { width: 100%; padding-left: 19px; }
}
/* the change page: thread left, preview right; on a phone, preview below */
.frame-main.fill > .change-page { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.change-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(340px, 1fr) minmax(0, 1.25fr); }
.change-thread { min-height: 0; border-right: 1px solid var(--border); }
.change-thread .conv { max-width: 640px; }
.change-preview { min-height: 0; display: flex; flex-direction: column; padding: 12px 16px 14px; gap: 8px; background: var(--side); }
.pv-bar { display: flex; align-items: center; gap: 10px; min-width: 0; flex: none; }
.pv-bar .addr { margin-left: auto; color: var(--muted-foreground); font-size: 11.5px; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pv-bar .addr:hover { color: var(--foreground); }
.pv-bar .seg button { white-space: nowrap; }
.pv-note.warn { color: var(--warning); }
.pv-state { font-size: 12.5px; color: var(--muted-foreground); white-space: nowrap; }
.pv-state.ok { color: var(--success-ink); }
.pv-frame { flex: 1; min-height: 0; width: 100%; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.change-preview .pane-empty { flex: 1; height: auto; border: 1px dashed var(--border); border-radius: 10px; }
.pv-note { margin: 0; font-size: 12px; color: var(--faint); flex: none; }
.screen-pane .pv-note { align-self: stretch; }
.ship-slot { padding-left: 40px; }
.menu-item.m-only { display: none; }
@media (max-width: 900px) { .menu-item.m-only { display: flex; } }
@media (max-width: 900px) {
  .frame-main.fill > .change-page { overflow-y: auto; }
  .change-body { display: flex; flex-direction: column; flex: none; }
  .change-thread { border-right: 0; border-bottom: 1px solid var(--border); }
  .change-thread .scroll { max-height: none; overflow: visible; }
  .change-preview { min-height: 70vh; }
  .pv-frame { min-height: 60vh; }
  #change-people, #change-discard, #change-fresh { display: none; }
}
details.fold > summary { cursor: pointer; color: var(--muted-foreground); list-style: none; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: "› "; }
details.fold[open] > summary::before { content: "⌄ "; }
.app-pane.quiet .pane-empty { height: 380px; }
@media (max-width: 900px) {
  .app-pane.quiet .pane-empty { height: 90px; }
}
html { scroll-behavior: smooth; }
.frame-main > .page { min-width: 0; width: 100%; }
.scoped .conv { min-width: 0; }
.scoped .conv .msg .txt { overflow-wrap: anywhere; }
.app-pane > header > b, .app-pane > header > .pill { flex: none; }
.app-pane > header > .small { flex: 1; }

/* Connectors (docs/plans/connectors.md): the list, a connector's page, its cards, Audit's calls. */
:root { --allow-ink: var(--success-ink); --allow-bg: hsl(160 60% 45% / .12); --ask-ink: var(--warning); --ask-bg: hsl(35 92% 45% / .13); --off-ink: var(--muted-foreground); --off-bg: var(--muted); }
.conn-list { margin-bottom: 12px; }
.conn-row { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; padding: 14px; border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; align-items: start; }
.conn-row:last-child { border-bottom: 0; }
a.conn-row:hover { background: var(--row-hover); text-decoration: none; }
.conn-row.later { opacity: .6; }
.conn-mark { width: 36px; height: 36px; border-radius: 9px; background: var(--foreground); color: var(--background); display: grid; place-items: center; font-weight: 700; }
.conn-row.later .conn-mark { background: var(--muted); color: var(--muted-foreground); }
.conn-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.conn-main .t { display: flex; gap: 8px; align-items: center; }
.conn-main .s { font-size: 12.5px; color: var(--muted-foreground); }
.conn-sum { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; }
.conn-sum .lvl { color: var(--foreground); }
.conn-go { color: var(--muted-foreground); font-size: 20px; line-height: 1; align-self: center; }
.conn-sec { margin-top: 22px; }
.conn-sec .section-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.conn-sec .section-h a { margin-left: auto; font-weight: 400; }
details > summary.section-h { cursor: pointer; list-style: none; }
details > summary.section-h::-webkit-details-marker { display: none; }
details > summary.section-h::before { content: "›"; display: inline-block; width: 10px; transition: transform .15s; }
details[open] > summary.section-h::before { transform: rotate(90deg); }
table.perm { width: auto; min-width: 100%; border: 1px solid var(--border); border-radius: var(--radius); border-collapse: separate; border-spacing: 0; background: var(--card); }
table.perm th, table.perm td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
table.perm tbody tr:last-child > * { border-bottom: 0; }
table.perm thead th { font-size: 12px; font-weight: 600; color: var(--muted-foreground); white-space: nowrap; }
table.perm thead th .own { display: block; font-weight: 400; font-size: 11px; color: var(--primary); }
table.perm tbody th { font-weight: 600; font-size: 13.5px; min-width: 150px; }
table.perm tbody th small { display: block; font-weight: 400; font-size: 12px; color: var(--muted-foreground); }
.cell { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid transparent; font: inherit; font-size: 12px; font-weight: 600; cursor: default; }
button.cell { cursor: pointer; }
button.cell:hover { border-color: var(--foreground); }
button.cell:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.cell.allow { background: var(--allow-bg); color: var(--allow-ink); }
.cell.ask { background: var(--ask-bg); color: var(--ask-ink); }
.cell.deny { background: var(--off-bg); color: var(--off-ink); }
.cell.inh { background: transparent; border: 1px dashed var(--border); font-weight: 500; }
.legend { line-height: 2; }
.legend .cell { height: 20px; min-width: 0; padding: 0 8px; font-size: 11.5px; }
.conn-form { display: flex; gap: 10px 14px; flex-wrap: wrap; align-items: flex-end; margin: 8px 0; }
.conn-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted-foreground); }
.conn-form select { height: 32px; min-width: 150px; max-width: 100%; }
.conn-form .row { display: flex; gap: 8px; }
.agent-ceil { grid-template-columns: minmax(160px, 1fr) auto; grid-template-areas: "t s"; }
.agent-ceil .t { display: flex; align-items: center; gap: 8px; }
.agent-ceil .s { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.agent-ceil .seg button[disabled] { cursor: default; }
.agent-ceil .seg button:not(.on):not([disabled]):hover { color: var(--foreground); }
.agent-ceil .sets { display: flex; gap: 4px; flex-wrap: wrap; }
.agent-ceil .chip { height: 22px; font-size: 12px; }
.agent-ceil .chip.dim { opacity: .45; text-decoration: line-through; }
.repo { display: inline-block; margin: 0 8px 2px 0; }
table.tools-t td { padding: 7px 10px; border-bottom: 1px solid var(--border); font-size: 13px; vertical-align: top; }
.lvl-tag, .status-tag { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; white-space: nowrap; background: var(--muted); color: var(--muted-foreground); }
.lvl-tag.read, .status-tag.succeeded, .status-tag.allowed { background: var(--allow-bg); color: var(--allow-ink); }
.lvl-tag.write, .status-tag.waiting, .status-tag.approved { background: var(--ask-bg); color: var(--ask-ink); }
.lvl-tag.destructive, .status-tag.denied, .status-tag.failed { background: hsl(0 72% 50% / .12); color: var(--danger-ink); }
.status-tag.declined, .status-tag.expired { background: var(--muted); color: var(--muted-foreground); }
.tl.calls li { grid-template-columns: 130px 1fr; }
.ok-ink { color: var(--success-ink); }
.danger-ink { color: var(--danger-ink); }
.call-block { font-family: var(--font-mono); font-size: 12px; background: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; margin: 2px 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--code-ink); }
.conn-card .meta { margin: 0; }
.role-tag { font: inherit; font-size: 10.5px; padding: 0 6px; height: 18px; border-radius: 999px; border: 1px solid var(--border); background: none; color: var(--muted-foreground); cursor: pointer; margin-left: 4px; }
span.role-tag { cursor: default; display: inline-flex; align-items: center; }
.role-tag.on { border-color: var(--foreground); color: var(--foreground); }
.audit-tabs { margin-bottom: 14px; }
.audit-tabs a { text-decoration: none; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.filters select { height: 32px; max-width: 100%; }
table.calls-t th { font-size: 12px; color: var(--muted-foreground); font-weight: 600; text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
table.calls-t td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: top; font-size: 13px; }
table.calls-t td.when { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted-foreground); white-space: nowrap; }
ol.chain { list-style: none; margin: 0; padding: 0 0 0 4px; }
ol.chain li { display: grid; grid-template-columns: 14px 1fr auto; gap: 10px; padding: 0 0 14px; position: relative; font-size: 13.5px; }
ol.chain li::before { content: ""; position: absolute; left: 4px; top: 12px; bottom: 0; width: 1px; background: var(--border); }
ol.chain li:last-child::before { display: none; }
ol.chain .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--foreground); margin-top: 5px; }
ol.chain li.waiting .dot { background: var(--warning); }
ol.chain li.approved .dot, ol.chain li.allowed .dot { background: var(--success); }
ol.chain li.upstream .dot { background: var(--primary); }
ol.chain li:is(.ceiling, .denied, .failed, .declined, .expired, .asker) .dot { background: var(--destructive); }
ol.chain .what { display: flex; flex-direction: column; min-width: 0; }
ol.chain .what span { color: var(--muted-foreground); overflow-wrap: anywhere; }
ol.chain .when { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted-foreground); white-space: nowrap; }
@media (max-width: 560px) {
  .conn-row { grid-template-columns: 30px 1fr; }
  .conn-mark { width: 30px; height: 30px; }
  .conn-go { display: none; }
  .agent-ceil { grid-template-columns: 1fr; grid-template-areas: "t" "s"; }
  .agent-ceil .s { justify-content: flex-start; }
  ol.chain li { grid-template-columns: 14px 1fr; }
  ol.chain .when { grid-column: 2; }
  .conn-form label, .conn-form select { width: 100%; }
}
.conn-connect { max-width: 720px; display: flex; flex-direction: column; gap: 10px; }
.conn-connect h2 { font-size: 16px; margin: 0; }
.conn-connect p { margin: 0; }
.conn-connect ul.defaults { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.conn-connect ul.defaults .cell { height: 20px; min-width: 0; padding: 0 8px; font-size: 11.5px; margin-right: 6px; }
.agent-ceil .chip.on { background: none; border: 1px solid var(--foreground); color: var(--foreground); }
.agent-ceil .chip.on::before { content: "✓"; font-size: 10px; }
.agent-ceil .chip.dim { opacity: 1; background: none; border: 1px dashed var(--border); color: var(--muted-foreground); text-decoration: line-through; }
.list > .empty { padding: 12px 14px; margin: 0; }
.filters select { width: auto; flex: 0 1 190px; min-width: 0; }
.conn-form select { width: auto; }
@media (max-width: 560px) { .filters select { flex: 1 1 45%; } }
ol.chain li.waiting { color: inherit; }
.cline.conn { flex-wrap: nowrap; }
.cline.conn > span:last-child { flex: 1 1 auto; min-width: 0; }
.agent-ceil { grid-template-columns: 1fr; grid-template-areas: "t" "s"; gap: 8px; }
.agent-ceil .s { justify-content: flex-start; }
@media (max-width: 560px) {
  table.perm th, table.perm td { padding: 8px 6px; }
  table.perm tbody th { min-width: 96px; font-size: 13px; }
  table.perm tbody th small { font-size: 11px; }
  table.perm thead th { font-size: 11px; }
  .cell { min-width: 44px; padding: 0 7px; font-size: 11.5px; }
  .agent-ceil .seg button { padding: 2px 8px; }
}
.conn-switch { max-width: 720px; display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; border-color: var(--primary); }
.conn-switch h2 { font-size: 16px; margin: 0; }
.conn-switch p { margin: 0; }
.warn-line { color: var(--warning); font-size: 13.5px; }
.conn-form input[type=text] { height: 32px; padding: 0 10px; border: 1px solid var(--input); border-radius: 6px; background: var(--background); color: var(--foreground); font: inherit; }
.conn-form label.check { flex-direction: row; align-items: center; gap: 6px; color: var(--foreground); }
#github-app .list-row .s a { margin-left: 6px; }
.conn-form label.check { flex-basis: 100%; font-size: 13px; }
.conn-form label.check input[type=checkbox] { width: 16px; height: 16px; flex: none; margin: 0; accent-color: var(--primary); }

/* layout engine (docs/layout.md). The sidebar is a sticky LiveView and the
   place is the main LiveView: both containers step out of the box tree so the
   frame lays out their children exactly as before. */
.sidebar-root, .sidebar-wrap, .frame > [data-phx-main] { display: contents; }
.frame.bare .side, .frame.bare .bottom-tabs { display: none !important; }
@media (max-width: 900px) { .bottom-tabs { order: 9; } }
/* coming back to a chat: the card you opened flashes once */
@keyframes card-flash { 0% { box-shadow: 0 0 0 0 hsl(18.5 100% 50% / .55); } 100% { box-shadow: 0 0 0 10px hsl(18.5 100% 50% / 0); } }
.flashed { animation: card-flash 1.2s ease-out 1; border-color: var(--primary) !important; }
@media (prefers-reduced-motion: reduce) { .flashed { animation: none; } }
.return-strip { display: flex; align-items: center; gap: 8px; max-width: 460px; margin: 0 0 14px; padding: 7px 12px; border: 1px dashed var(--border); border-radius: 10px; color: var(--muted-foreground); font-size: 13px; text-decoration: none; }
.return-strip:hover { color: var(--foreground); border-color: var(--primary); text-decoration: none; }
.return-strip .arrow { color: var(--primary); }

/* the place and the side panel (docs/layout.md): Inline, one orange accent */
.lsplit { flex: 1; min-width: 0; min-height: 0; display: flex; }
.lsplit > .frame-main { flex: 1; min-width: 0; }
.lsplit.resizing { cursor: col-resize; user-select: none; }
.lsplit.resizing iframe { pointer-events: none; }
.ldivider { width: 7px; margin: 0 -3px; flex: none; cursor: col-resize; position: relative; z-index: 3; touch-action: none; }
.ldivider::after { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 1px; background: var(--border); transition: background .15s, width .15s; }
.ldivider:hover::after, .lsplit.resizing .ldivider::after { background: var(--primary); width: 2px; left: 2px; }
.lside { width: var(--side-w, 38%); min-width: 300px; max-width: 72%; flex: none; display: flex; flex-direction: column; min-height: 0; background: var(--background); }
.sheet-grab { display: none; }
.lbar { display: flex; align-items: flex-end; gap: 6px; border-bottom: 1px solid var(--border); background: var(--side); flex: none; min-height: 41px; }
.ltabs { display: flex; gap: 2px; padding: 6px 0 0 8px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent); }
.lacts { display: flex; gap: 4px; padding: 0 8px 6px 0; flex: none; }
.ltabs::-webkit-scrollbar { display: none; }
.ltab { display: flex; align-items: center; gap: 6px; max-width: 180px; flex: none; padding: 5px 6px 5px 10px; border: 1px solid transparent; border-bottom: 0; border-radius: 7px 7px 0 0; color: var(--muted-foreground); font-size: 12.5px; cursor: pointer; white-space: nowrap; user-select: none; }
.ltab .t { overflow: hidden; text-overflow: ellipsis; }
.ltab .ico { width: 13px; height: 13px; flex: none; }
.ltab:hover { color: var(--foreground); }
.ltab.on { background: var(--background); border-color: var(--border); color: var(--foreground); margin-bottom: -1px; }
.ltab.pinned .ico { color: var(--primary); }
.ltab .x { border: 0; background: none; color: var(--faint); width: 16px; height: 16px; border-radius: 4px; padding: 0; line-height: 1; font-size: 14px; cursor: pointer; visibility: hidden; }
.ltab:hover .x, .ltab.on .x { visibility: visible; }
.ltab .x:hover { background: var(--hover); color: var(--foreground); }
.lhead { display: flex; align-items: center; gap: 6px; padding: 7px 10px 7px 14px; border-bottom: 1px solid var(--border); min-height: 40px; flex: none; }
.lhead .t { font-size: 13px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lhead .sp { flex: 1; }
.lbtn { width: 26px; height: 26px; display: inline-grid; place-items: center; border: 1px solid var(--border); border-radius: 7px; background: none; color: var(--muted-foreground); font: inherit; font-size: 13px; cursor: pointer; text-decoration: none; flex: none; }
.lbtn:hover { color: var(--foreground); background: var(--hover); text-decoration: none; }
.lbtn .ico { width: 14px; height: 14px; }
.lpane { display: none; flex: 1; min-height: 0; }
.lpane.on { display: flex; flex-direction: column; }
.lpane > div { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.lorg { padding: 6px 14px; font-size: 12px; color: var(--muted-foreground); border-bottom: 1px solid var(--border); background: var(--muted); }
.lnotice { padding: 24px 18px; color: var(--muted-foreground); font-size: 13.5px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.thread-page.embedded { flex: 1; min-height: 0; display: flex; }
.thread-page.embedded .chat-head { min-height: 44px; padding: 6px 12px; }
.thread-page.embedded .conv-col .scroll { padding: 16px 14px 8px; }
.embedded .return-strip, .embedded .navpill { display: none; }
.panel-flash .flashes { position: static; padding: 8px 12px 0; }
/* while a thing is open beside, its card and sidebar row carry the edge */
.tlink { border-color: var(--open-edge, var(--border)); box-shadow: 0 0 0 calc(var(--open-on, 0) * 3px) hsl(18.5 100% 50% / .16); transition: border-color .15s, box-shadow .15s; }
.srow[data-ref] { box-shadow: inset 2px 0 0 var(--open-edge, transparent); }
.acard[data-ref], .cline [data-ref] { border-color: var(--open-edge, var(--border)); }
/* phones: the side panel is a sheet over the place */
@media (max-width: 900px) {
  .ldivider { display: none; }
  .lside { position: fixed; left: 0; right: 0; bottom: 0; top: 56px; width: auto; min-width: 0; max-width: none; z-index: 20; border-top: 1px solid var(--border); border-radius: 16px 16px 0 0; box-shadow: 0 -10px 40px rgb(0 0 0 / .18); transition: transform .2s; animation: sheet-up .22s ease-out; }
  .sheet-grab { display: flex; justify-content: center; padding: 7px 0 3px; cursor: grab; touch-action: none; flex: none; }
  .sheet-grab span { width: 38px; height: 4px; border-radius: 2px; background: var(--border); }
  .lbar { background: var(--background); }
  .lacts #lside-pin { display: none; }
}
@keyframes sheet-up { from { transform: translateY(40%); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lside { animation: none; } }
/* pages hosted in a side tab (FoundryWeb.PaneLive) */
.embedded-page { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }
.embedded-page:not(.fill) { padding: 16px 18px 40px; }
.embedded-page.fill > * { flex: 1; min-height: 0; }
.embedded-page .pagehead h1, .embedded-page .crumbs { display: none; }
.change-body.single { grid-template-columns: minmax(0, 1fr); }
.change-body.single .change-thread { border-right: 0; }
.change-page.embedded .change-thread .conv { max-width: none; }
.change-preview.in-pane { flex: 1; min-height: 0; background: var(--background); padding: 10px 12px 12px; }
.lbtn.wide { width: auto; padding: 0 9px; font-size: 12px; white-space: nowrap; }
.irow .im[data-ref] { box-shadow: inset 2px 0 0 var(--open-edge, transparent); padding-left: 6px; border-radius: 4px; }
.plain, .plain:hover { color: inherit; text-decoration: none; }
a.plain:hover { text-decoration: underline; text-decoration-color: var(--link-line); }
.embedded-page h1 { font-size: 19px; line-height: 1.3; }
/* Foundry's own dialogs: the confirm list and Save layout as… (Inline: white
   or black, one orange accent) */
.fdialog { border: 1px solid var(--border); border-radius: 12px; padding: 18px 18px 14px; width: min(400px, calc(100vw - 32px)); background: var(--background); color: var(--foreground); box-shadow: 0 18px 60px rgb(0 0 0 / .28); }
.fdialog::backdrop { background: rgb(0 0 0 / .38); }
.fdialog b { display: block; font-size: 15px; font-weight: 600; margin-bottom: 6px; line-height: 1.35; }
.fdialog p { margin: 0 0 12px; color: var(--muted-foreground); font-size: 13.5px; line-height: 1.5; }
.fdialog input:not([type=checkbox]) { width: 100%; height: 34px; border: 1px solid var(--border); border-radius: 7px; padding: 0 10px; font: inherit; background: var(--background); color: var(--foreground); margin-bottom: 10px; }
.fdialog input:focus { outline: 2px solid var(--primary); outline-offset: -1px; }
.fdialog .check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--muted-foreground); margin-bottom: 8px; }
.dlg-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.btn.dark { background: var(--foreground); color: var(--background); border-color: var(--foreground); }
.btn.dark:hover { opacity: .88; background: var(--foreground); }
.fdialog.confirm .btn.dark { min-width: 88px; }
@media (prefers-reduced-motion: no-preference) { .fdialog[open] { animation: dlg-in .14s ease-out; } }
@keyframes dlg-in { from { transform: translateY(6px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
/* the layout menu and Focus */
.lmenu { position: relative; }
.lmenu > summary { list-style: none; }
.lmenu > summary::-webkit-details-marker { display: none; }
.layout-pop { right: 0; left: auto; top: 32px; min-width: 240px; z-index: 30; }
.menu-label { font-size: 11px; color: var(--faint); padding: 6px 10px 2px; text-transform: none; }
.saved-row { display: flex; align-items: center; gap: 6px; }
.saved-row .t { flex: 1; text-align: left; color: var(--foreground); text-decoration: none; }
.saved-row .sub { color: var(--faint); font-size: 12px; }
.focus-pill { position: fixed; right: 16px; bottom: 16px; z-index: 15; border: 1px solid var(--border); background: var(--background); color: var(--muted-foreground); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12.5px; cursor: pointer; box-shadow: var(--shadow); }
.focus-pill:hover { color: var(--foreground); border-color: var(--primary); }
@media (max-width: 900px) { .focus-pill { bottom: 68px; } }
/* Library › System › Cards and /dev/cards */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; margin: 8px 0 20px; }
.cards-tbl { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 760px; }
.cards-tbl th, .cards-tbl td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.cards-tbl th { font-weight: 500; color: var(--muted-foreground); font-size: 12px; background: var(--side); }
.cards-tbl tr:last-child td { border-bottom: 0; }
.lpill { display: inline-block; font-size: 12px; border: 1px solid var(--border); border-radius: 99px; padding: 0 8px; white-space: nowrap; color: var(--muted-foreground); }
.lpill.is-side { border-color: var(--primary); color: var(--primary); background: hsl(18.5 100% 50% / .07); }
.lpill.is-place { border-color: var(--foreground); color: var(--foreground); }
.ann { font-family: var(--font-mono); font-size: 11px; color: var(--primary); margin-left: 6px; cursor: help; }
.why { padding: 16px 18px; }
.why h2 { font-size: 15px; margin: 0 0 10px; }
.why-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.why-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted-foreground); }
.why-form select { height: 30px; border: 1px solid var(--border); border-radius: 7px; background: var(--background); color: var(--foreground); font: inherit; font-size: 13px; padding: 0 8px; }
.why-answer { margin: 12px 0 0; padding: 10px 12px; border-left: 2px solid var(--primary); background: var(--side); border-radius: 0 8px 8px 0; font-size: 13.5px; }
.gallery-kind { border-top: 1px solid var(--border); padding: 18px 0; }
.gallery-kind header { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.gallery-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-top: 8px; }
.gallery-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fdialog .check input { width: 14px; height: 14px; min-width: 0; flex: none; margin: 2px 0 0; padding: 0; appearance: auto; accent-color: var(--primary); }
.irow .im:focus:not(:focus-visible) { outline: none; }
.new-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; }
/* an agent's screen and a turn's steps, beside the chat */
.screen-frame { background: #000; }
.steps-pane { padding: 12px 14px 24px; overflow-y: auto; flex: 1; min-height: 0; }
.steps-q { font-size: 13px; color: var(--muted-foreground); margin: 0 0 10px; }
/* what an agent opened beside you: the grey line in the chat and the chip */
.layout-line { align-items: baseline; flex-wrap: wrap; }
.layout-line .lay-ico { color: var(--primary); flex: none; position: relative; top: 2px; }
.layout-line .lay-t { flex: 1 1 260px; min-width: 0; }
.lay-why { position: relative; flex: none; }
.lay-why > summary { list-style: none; cursor: pointer; }
.lay-why > summary::-webkit-details-marker { display: none; }
.lay-why-pop { position: absolute; z-index: 5; right: 0; top: 20px; width: min(320px, 80vw); background: var(--background); border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; box-shadow: 0 8px 28px rgb(0 0 0 / .12); display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; }
.look-chip { display: inline-flex; align-self: flex-start; font-size: 11.5px; color: var(--muted-foreground); background: var(--secondary); border: 1px solid var(--border); border-radius: 6px; padding: 0 7px; margin: 2px 0 4px; }
/* a tab an agent opened: the strip, the avatar on the tab, the waiting chip */
.agent-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 6px 12px; background: hsl(18.5 100% 50% / .08); border-bottom: 1px solid hsl(18.5 100% 50% / .25); color: var(--primary); font-size: 12.5px; flex: none; }
.agent-strip .av { width: 18px; height: 18px; font-size: 10px; }
.agent-strip .who { color: var(--foreground); font-weight: 500; }
.agent-strip .linkish { color: var(--primary); }
.strip-why { position: relative; }
.strip-why > summary { list-style: none; cursor: pointer; }
.strip-why > summary::-webkit-details-marker { display: none; }
.why-pop { position: absolute; z-index: 25; left: 0; top: 22px; width: min(320px, 80vw); background: var(--background); color: var(--foreground); border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; box-shadow: 0 10px 30px rgb(0 0 0 / .14); display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.tab-av { width: 14px; height: 14px; font-size: 8.5px; }
.agent-chips { position: fixed; right: 18px; bottom: 92px; z-index: 18; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; max-width: min(460px, calc(100vw - 32px)); }
.agent-chip { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 10px; border: 1px solid var(--primary); background: var(--background); border-radius: 999px; box-shadow: 0 6px 24px rgb(0 0 0 / .12); font-size: 12.5px; }
.agent-chip .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-chip .av { width: 18px; height: 18px; font-size: 10px; }
@media (max-width: 900px) { .agent-chips { bottom: 132px; right: 12px; } }
.agent-rules { padding: 16px 18px; }
.agent-rules h2 { font-size: 15px; margin: 0; }
.rules-grid { display: flex; flex-direction: column; gap: 2px; margin: 10px 0; }
.rule-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.rule-row:last-child { border-bottom: 0; }
.rule-row .t { font-size: 13.5px; min-width: 0; }
.rule-row .seg button { font-size: 12px; padding: 2px 9px; }
.frame-pick { align-self: flex-start; flex-wrap: wrap; }
/* Compare: the first two tabs side by side */
.lpanes { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.lside.compare .lpanes { flex-direction: row; }
.lside.compare .lpane.on { flex: 1; min-width: 0; border-right: 1px solid var(--border); }
.lside.compare .lpane.on:last-child, .lside.compare .lpane.on + .lpane:not(.on) { border-right: 0; }
.cmp-head { display: flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; border-bottom: 1px solid var(--border); flex: none; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) { .lside.compare .lpanes { flex-direction: column; } .lside.compare .lpane.on { border-right: 0; border-bottom: 1px solid var(--border); } }
.lpane > .cmp-head { flex: none; }
.lpane > .cmp-head { flex-direction: row; justify-content: flex-start; }
/* Follow along: a switch in a chat's header */
.hpill.follow { gap: 6px; }
.hpill.follow .sw { width: 20px; height: 11px; border-radius: 99px; background: var(--border); position: relative; transition: background .15s; }
.hpill.follow .sw::after { content: ""; position: absolute; left: 2px; top: 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--background); transition: left .15s; }
.hpill.follow.on { color: var(--primary); border-color: hsl(18.5 100% 50% / .5); }
.hpill.follow.on .sw { background: var(--primary); }
.hpill.follow.on .sw::after { left: 11px; }
@media (max-width: 900px) { .hpill.follow { padding: 0 6px; } }
/* the Why popover anchors to the strip, so it never runs off the panel */
.agent-strip { position: relative; }
.agent-strip .strip-why { position: static; }
.agent-strip .why-pop { left: 12px; right: 12px; width: auto; top: calc(100% + 4px); }
.strip-slot { flex: none; }
.agent-chips:empty { display: none; }

/* a change's process: the stage strip under its header (Foundry.Flows.ChangeFlow) */
.stage-strip { display: flex; flex-direction: column; gap: 6px; padding: 10px 20px; border-bottom: 1px solid var(--border); background: var(--secondary); font-size: 13px; }
.stage-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin: 0; padding: 0; list-style: none; }
.stage-steps li { display: flex; align-items: center; gap: 6px; color: var(--muted-foreground); }
.stage-steps .dot { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--border); box-sizing: border-box; }
.stage-steps .stage-done { color: var(--success-ink); }
.stage-steps .stage-done .dot { background: var(--success); border-color: var(--success); }
.stage-steps .stage-now { color: var(--foreground); font-weight: 600; }
.stage-steps .stage-now .dot { border-color: var(--primary); background: var(--primary); box-shadow: 0 0 0 3px hsl(18.5 100% 50% / .18); }
.stage-steps .stage-off { text-decoration: line-through; opacity: .6; }
.stage-now { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.stage-now b { font-weight: 600; }
.stage-strip.st-needs_you .stage-now b { color: var(--primary); }
.stage-strip.st-failed .stage-now b { color: var(--danger-ink); }
.stage-note, .stage-test { color: var(--muted-foreground); }
.stage-note { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1 1 100%; }
.stage-actions { display: flex; gap: 8px; margin-left: auto; }
.discard-why { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 20px; border-bottom: 1px solid var(--border); font-size: 13px; }
.discard-why input { flex: 1 1 220px; min-width: 0; padding: 7px 10px; border: 1px solid var(--input); border-radius: 8px; background: var(--background); color: var(--foreground); font: inherit; }
/* a change to how an app's changes go (Foundry.ChangeProcess) */
.process-diff { width: 100%; border-collapse: collapse; font-size: 13px; margin: 6px 0; }
.process-diff th { text-align: left; font-weight: 500; color: var(--muted-foreground); padding: 4px 8px 4px 0; border-bottom: 1px solid var(--border); }
.process-diff td { padding: 6px 8px 6px 0; vertical-align: top; border-bottom: 1px solid var(--border); }
.process-diff .was { color: var(--muted-foreground); text-decoration: line-through; }
.process-diff .now { color: var(--success-ink); }
.process-page { display: flex; flex-direction: column; gap: 12px; }
.process-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.process-step { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.process-step h4 { margin: 0 0 6px; font-size: 14px; }
.process-step dl { margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.process-step dt { color: var(--muted-foreground); font-size: 12px; margin-top: 4px; }
.process-step dd { margin: 0; }
.process-step .src { font-size: 11px; color: var(--muted-foreground); border: 1px solid var(--border); border-radius: 999px; padding: 0 6px; margin-left: 4px; white-space: nowrap; }
.process-step .src-custom { color: var(--primary); border-color: var(--primary); }
.process-h { margin: 8px 0 0; font-size: 14px; }
.process-ask .row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.process-ask input { flex: 1 1 240px; min-width: 0; padding: 7px 10px; border: 1px solid var(--input); border-radius: 8px; background: var(--background); color: var(--foreground); font: inherit; }
/* Release GitHub's main from the Versions tab (Foundry.MainRelease) */
.rel-panel { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 10px; }
.rel-panel header { display: flex; flex-direction: column; gap: 2px; }
.rel-panel h4 { margin: 0; font-size: 14px; }
.rel-kv { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: 13px; }
.rel-kv dt { color: var(--muted-foreground); }
.rel-kv dd { margin: 0; min-width: 0; }
.rel-kv ul { margin: 2px 0 0; padding-left: 18px; }
.rel-kv .ok { color: var(--success-ink); }
.rel-kv .bad { color: var(--danger-ink); }
.rel-panel .btns { display: flex; gap: 8px; flex-wrap: wrap; }
.rel-progress { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }

/* Agent config cards and the settings page's Config section (Foundry.AgentConfig) */
.config-diff { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 12px; line-height: 1.5; background: var(--muted); border-radius: 6px; padding: 8px 10px; margin: 6px 0; overflow-x: auto; white-space: pre; }
.config-diff .d-ins { color: var(--success-ink); display: block; }
.config-diff .d-del { color: var(--destructive, #b42318); text-decoration: line-through; display: block; }
.config-diff .d-eq { color: var(--muted-foreground); display: block; }
.config-card .widens { color: var(--warning-ink, #8a5a00); }
.config-file { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 12px; line-height: 1.5; background: var(--muted); border-radius: 6px; padding: 10px 12px; overflow-x: auto; white-space: pre; max-height: 420px; }
.config-history { list-style: none; padding: 0; margin: 8px 0; }
.config-history li { display: flex; gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.config-history .sha { font-family: var(--font-mono, ui-monospace, Menlo, monospace); color: var(--muted-foreground); font-size: 12px; }
.config-error { border-left: 3px solid var(--destructive, #b42318); padding: 6px 10px; background: var(--muted); font-size: 13px; }

/* Discussions (Foundry.Discussions): the list on an agent's and an app's page */
.disc-new { display: flex; gap: 8px; margin: 8px 0 14px; }
.disc-new input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--background); color: inherit; font: inherit; }
.disc-row { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 10px 2px; border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; }
.disc-row:hover { background: var(--muted); }
.disc-row .num { color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.disc-row .t { font-weight: 500; }
.disc-inline { margin-left: 8px; }
.spec-card .spec-title { margin: 6px 0 4px; font-size: 15px; }
.spec-card .spec-part { font-size: 13px; margin: 6px 0; }
.spec-card .spec-part ul { margin: 2px 0 0; padding-left: 18px; }