/* Every colour is a token, and every token carries both themes: light-dark() picks a side from the
   used color-scheme, so the theme switch below only has to move color-scheme rather than restate
   the palette. `light dark` means an untouched install follows the operating system.

   The look follows Activepieces: neutral greys, one purple for action (blue at night, as theirs
   is), Inter, 6–12px corners, hairline borders and almost no shadow. Pages sit in a white panel
   inset from a light grey chrome that the sidebar shares. */
/* Inter, the typeface Activepieces sets everything in (SIL Open Font License; web/INTER-LICENSE.txt). */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/InterVariable.woff2") format("woff2"); }
:root {
  color-scheme: light dark;
  /* The chrome behind the sidebar and around the content panel, and what sits on it. */
  --chrome: light-dark(#fafafa, #262626);
  --bg: light-dark(#fafafa, #171717);
  --surface: light-dark(#ffffff, #0a0a0a);
  --surface-low: light-dark(#f5f5f5, #171717);
  --surface-high: light-dark(#ebebeb, #262626);
  --ink: light-dark(#0a0a0a, #fafafa);
  --secondary: light-dark(#404040, #d4d4d4);
  --muted: light-dark(#737373, #a3a3a3);
  --faint: light-dark(#a3a3a3, #737373);
  --line: light-dark(#e5e5e5, #ffffff14);
  --line-soft: light-dark(#f0f0f0, #ffffff0d);
  --line-strong: light-dark(#d4d4d4, #ffffff29);
  --control: light-dark(#ffffff, #ffffff08);
  --accent: light-dark(#6e41e2, #0d80f2);
  --accent-hover: light-dark(#7c54e5, #0c74db);
  --accent-soft: light-dark(#6e41e21a, #0d80f226);
  --on-accent: light-dark(#f9fafb, #f5f9ff);
  --blue: light-dark(#3b82f6, #60a5fa);
  --green: light-dark(#10b981, #34d399);

  /* Accent trim: tinted borders, the glow round a selection and the wash behind a callout. */
  --accent-ring: light-dark(#6e41e229, #0d80f240);
  --accent-border: light-dark(#6e41e266, #0d80f273);
  --accent-line: light-dark(#6e41e233, #0d80f24d);
  --accent-wash: light-dark(#6e41e20a, #0d80f214);
  /* Focus is neutral, as in Activepieces: a grey border and ring rather than the accent. */
  --focus-border: light-dark(#a3a3a3, #737373);
  --focus-ring: light-dark(#a3a3a380, #73737380);
  --selection-bg: light-dark(#6e41e22e, #0d80f259);
  --selection-ink: light-dark(#0a0a0a, #fafafa);
  --scrollbar: light-dark(#d4d4d4, #ffffff29);

  /* Status colours: emerald, amber and rose. Each has a text tone, a fill and a border. */
  --success-ink: light-dark(#047857, #6ee7b7);
  --success-soft: light-dark(#ecfdf5, #022c22);
  --success-line: light-dark(#a7f3d0, #065f46);
  --warning: light-dark(#f59e0b, #fbbf24);
  --warning-ink: light-dark(#b45309, #fcd34d);
  --warning-soft: light-dark(#fffbeb, #451a03);
  --warning-line: light-dark(#fde68a, #78350f);
  --danger: light-dark(#e11d48, #fb7185);
  --danger-ink: light-dark(#be123c, #fda4af);
  --danger-soft: light-dark(#fff1f2, #4c0519);
  --danger-line: light-dark(#fecdd3, #881337);
  /* Live is a green dot. */
  --success: light-dark(#10b981, #34d399);
  /* The draft (.specs/55): amber, from the warning tones, and only for its dot, its solid pill and
     the 2px ring round the frame — so an amber fill elsewhere keeps meaning "worth knowing". Red
     stays "Needs your OK" alone. */
  --draft: var(--warning);
  --draft-ink: var(--warning-ink);
  --draft-soft: var(--warning-soft);
  --draft-line: var(--warning-line);
  --on-draft: light-dark(#422006, #1c1917);

  /* Elevation. Hairlines do most of the work, so shadows stay faint. */
  --tint-1: light-dark(#0000000d, #00000066);
  --tint-2: light-dark(#00000014, #00000080);
  --tint-3: light-dark(#0000001f, #00000099);
  --tint-4: light-dark(#00000033, #000000b3);
  --backdrop: light-dark(#00000066, #000000a6);
  /* Behind a dialog: Activepieces' black at 80%. */
  --overlay: #000000cc;
  --shadow: 0 1px 2px 0 var(--tint-1);
  --shadow-md: 0 4px 6px -1px var(--tint-2), 0 2px 4px -2px var(--tint-2);
  --shadow-lg: 0 10px 15px -3px var(--tint-2), 0 4px 6px -4px var(--tint-2);
  --panel-shadow: 2px 0 4px -2px var(--tint-1), 0 2px 4px -2px var(--tint-1);

  /* Chrome: the sidebar shares the page's grey; the content panel is white. */
  --sidebar-bg: var(--chrome);
  --sidebar-ink: light-dark(#0a0a0acc, #fafafacc);
  --sidebar-hover: light-dark(#e5e5e599, #404040);
  --sidebar-muted: light-dark(#0a0a0ab3, #fafafab3);
  --sidebar-caption: light-dark(#0a0a0a80, #fafafa80);
  --sidebar-line: light-dark(#e5e5e5, #ffffff14);
  --navbar-bg: var(--surface);
  --brand-ink: var(--ink);
  --empty-icon: var(--faint);
  --composer-line: light-dark(#0a0a0a33, #fafafa33);

  /* Tables, and the dotted canvas behind previews and workflows. */
  --table-head-bg: light-dark(#f5f5f5b3, #262626b3);
  --row-hover: light-dark(#f5f5f580, #26262680);
  --stage-bg: light-dark(#fbfbfb, #171717);
  --dot-grid: light-dark(#b2b2b2, #737373);

  /* Code and source views are dark in both themes. */
  --code-bg: #171717;
  --code-ink: #e5e5e5;
  --code-line: #262626;
  --code-toolbar-bg: #0a0a0a;
  --code-toolbar-ink: #a3a3a3;
  --code-button-bg: #ffffff14;
  --code-button-ink: #e5e5e5;
  --code-button-hover: #ffffff26;
  --tool-output-bg: var(--surface-low);

  /* An app's letter badge; .mark-0 … .mark-9 pick one of Activepieces' project colours. */
  --mark: #a855f7;

  --sans: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --serif: "Sentient", ui-serif, "New York", "Iowan Old Style", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --radius: 8px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 12px;
  /* The sidebar is a rail of icons, and beside it (when an app's menu is pinned) a panel. */
  --rail-width: 56px;
  --panel-width: 248px;
  --sidebar-width: var(--rail-width);
  --history-width: 240px;
  --navbar-height: 56px;
  /* The height of what sits above every page in the draft (its banner and notices), measured
     by client.js; nothing on live. */
  --banner-height: 0px;
  /* The viewport height the chrome takes around a page: the panel's inset and its borders (on a
     phone in the draft, the 2px amber ring drawn inside the screen's edge too). */
  --frame: calc(26px + var(--banner-height));
  font: 14px/1.5 var(--sans);
  font-feature-settings: "rlig" 1, "calt" 1;
  font-synthesis: none;
}

/* An explicit choice pins the scheme; with no attribute the `light dark` above defers to the OS. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
/* Set for one frame while the palette swaps, so the page changes over rather than animating. */
:root.theme-switching, :root.theme-switching *, :root.theme-switching *::before, :root.theme-switching *::after { transition: none !important; }

.mark-0 { --mark: #ef4444; }
.mark-1 { --mark: #3b82f6; }
.mark-2 { --mark: #eab308; }
.mark-3 { --mark: #a855f7; }
.mark-4 { --mark: #22c55e; }
.mark-5 { --mark: #f472b6; }
.mark-6 { --mark: #9333ea; }
.mark-7 { --mark: #f97316; }
.mark-8 { --mark: #15803d; }
.mark-9 { --mark: #06b6d4; }

* { box-sizing: border-box; }
body { margin: 0; background: var(--chrome); color: var(--ink); -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; font-feature-settings: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 7px 12px; border: 1px solid transparent; border-radius: var(--radius-md); background: var(--surface-low); color: var(--ink); font-size: 14px; font-weight: 400; line-height: 20px; cursor: pointer; transition: background .15s, border-color .15s, color .15s, box-shadow .15s; }
button:hover { background: var(--surface-high); }
button:disabled { opacity: .5; cursor: default; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 0; }
.primary, button[type="submit"] { background: var(--accent); color: var(--on-accent); }
.primary:hover, button[type="submit"]:hover { background: var(--accent-hover); }
.primary:disabled, button[type="submit"]:disabled { background: var(--accent); }
.secondary { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow); }
.secondary:hover { background: var(--surface-low); }
/* A secondary button that submits its form (Enter still does) keeps the secondary look: one accent per screen. */
button.secondary[type="submit"], button.secondary[type="submit"]:disabled { background: var(--surface); color: var(--ink); }
button.secondary[type="submit"]:hover:not(:disabled) { background: var(--surface-low); }
.subtle, .icon-button, .text-button { background: transparent; box-shadow: none; }
.subtle:hover { background: var(--surface-high); }
.icon-button { width: 32px; height: 32px; padding: 7px; flex: none; color: var(--muted); }
.icon-button:hover { color: var(--ink); background: var(--surface-high); }
.text-button { padding: 4px 0; font-size: 13px; color: var(--muted); }
.text-button:hover { color: var(--ink); background: transparent; }
.text-button .icon { width: 15px; height: 15px; }
button.danger { color: #fff; border-color: transparent; background: var(--danger); box-shadow: none; }
button.danger:hover { background: color-mix(in srgb, var(--danger) 88%, var(--surface)); }
.full { width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { line-height: 1.3; letter-spacing: -.01em; font-weight: 600; }
h1 { font-size: 24px; margin-bottom: 12px; }
h2 { font-size: 18px; margin-bottom: 10px; }
h3 { font-size: 15px; margin-bottom: 8px; }
p { margin-bottom: 12px; }
.muted { color: var(--muted); font-weight: 400; }
.mono { font-family: var(--mono); }
kbd { display: inline-block; padding: 0 5px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-low); color: var(--muted); font: 500 11px/18px var(--sans); white-space: nowrap; }
.icon { display: inline-block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; clip-path: inset(50%); padding: 8px 14px; border-radius: var(--radius-md); background: var(--accent); color: var(--on-accent); }
.skip-link:focus { clip-path: none; }
[hidden] { display: none !important; }
::selection { background: var(--selection-bg); color: var(--selection-ink); }
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent; }

label { display: block; margin: 14px 0; color: var(--ink); font-size: 14px; font-weight: 500; }
input, select, textarea { display: block; width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--control); padding: 7px 10px; color: var(--ink); font-size: 14px; font-weight: 400; line-height: 20px; box-shadow: var(--shadow); outline: none; transition: border-color .15s, box-shadow .15s; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:focus { border-color: var(--focus-border); box-shadow: 0 0 0 1px var(--focus-ring); }
textarea:focus, select:focus { border-color: var(--focus-border); box-shadow: 0 0 0 3px var(--focus-ring); }
input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; opacity: .6; }
input[type="checkbox"], input[type="radio"] { display: inline-block; width: 16px; height: 16px; margin-right: 8px; padding: 0; box-shadow: none; accent-color: var(--accent); vertical-align: middle; }
input[type="checkbox"]:focus, input[type="radio"]:focus { box-shadow: none; }
input[type="color"] { height: 36px; padding: 3px; }
select { cursor: pointer; }
textarea { resize: vertical; padding: 8px 12px; line-height: 1.6; }
input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
.card { padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.brand { display: inline-flex; gap: 8px; align-items: center; flex: none; min-width: 0; }
.brand strong { color: var(--brand-ink); font-size: 14px; font-weight: 600; letter-spacing: -.01em; line-height: 1; }
.brand strong span { color: inherit; }
.brand-mark { width: 20px; height: 22px; flex: none; }
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.status-dot.green { background: var(--green); }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 0 7px; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); border-radius: 999px; background: var(--success-soft); color: var(--success-ink); font-size: 12px; font-weight: 500; line-height: 18px; white-space: nowrap; }
.badge.neutral, .badge.gray { background: var(--surface-low); color: var(--muted); border-color: var(--line); }
.badge.accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }

/* Sign in: Activepieces' auth landing — a still of the app behind a frosted wash, and one card. */
.login-page { position: relative; display: flex; min-height: 100dvh; flex-direction: column; align-items: center; justify-content: center; padding: 40px 16px; overflow: hidden; background: var(--chrome); }
.login-page > :not(.login-backdrop) { position: relative; z-index: 1; }
.login-backdrop { position: absolute; inset: 0; display: flex; pointer-events: none; user-select: none; }
.login-backdrop::after { content: ""; position: absolute; inset: 0; background: light-dark(#fafafac7, #262626c7); backdrop-filter: blur(2.8px); }
.login-backdrop i { display: block; border-radius: 999px; background: var(--surface-high); }
.login-backdrop-rail { display: flex; flex-direction: column; gap: 10px; width: 240px; padding: 18px 16px; }
.login-backdrop-rail i { height: 12px; width: 70%; }
.login-backdrop-rail i:first-child { width: 45%; height: 18px; margin-bottom: 14px; }
.login-backdrop-panel { flex: 1; display: flex; flex-direction: column; gap: 14px; margin: 6px 6px 6px 0; padding: 0 0 32px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--panel-shadow); }
.login-backdrop-panel i { height: 12px; width: 46%; margin: 0 32px; }
.login-backdrop-panel .login-backdrop-bar { width: auto; height: 45px; margin: 0 0 18px; border-radius: 0; background: transparent; border-bottom: 1px solid var(--line); }
.login-backdrop-panel .login-backdrop-composer { width: auto; height: 96px; margin: auto 32px 0; border-radius: 16px; background: transparent; border: 1px solid var(--line); }
.login-brand { margin-bottom: 28px; }
.login-brand .brand-mark { width: 28px; height: 31px; }
.login-brand strong { font-size: 20px; }
.login-card { width: 100%; max-width: 400px; padding: 32px 28px 28px; border-color: light-dark(#0000000f, #ffffff14); border-radius: 16px; box-shadow: 0 1px 2px #1018280a, 0 6px 12px -4px #1018280f, 0 24px 40px -12px #10182824, 0 56px 80px -32px #10182829; }
.welcome-icon { display: inline-flex; width: 36px; height: 36px; border-radius: var(--radius); align-items: center; justify-content: center; color: var(--accent); background: var(--accent-soft); flex: none; }
.login-card .welcome-icon { display: none; }
.login-card h1 { margin: 0 0 6px; font-size: 21px; font-weight: 400; letter-spacing: -.02em; text-align: center; text-wrap: balance; }
.login-card > p { margin-bottom: 24px; font-size: 14px; text-align: center; }
.login-card label { margin: 0 0 16px; }
.login-card label input { margin-top: 8px; }
.login-card button[type="submit"], .login-card #sso-login { height: 40px; margin-top: 8px; }
.login-card #sso-login { margin-bottom: 8px; }
.login-card .login-toggle { display: block; width: 100%; margin-top: 16px; color: var(--muted); font-weight: 400; text-align: center; }
.login-error { margin: -8px 0 16px; padding: 8px 12px; border: 1px solid var(--danger-line); border-radius: var(--radius-md); background: var(--danger-soft); color: var(--danger-ink); font-size: 13px; }
.login-footnote { margin: 20px 0 0; color: var(--muted); font-size: 12px; }
.theme-picker.login-theme-picker { position: fixed; top: 16px; right: 16px; z-index: 2; }

/* The sidebar, as Frappe 16 draws it: a narrow rail of icons (a name appears on hover) and, beside it,
   one menu panel that shows what is under whatever was chosen. The rail holds ours (Chat, Home, Open),
   then the apps, then who is signed in; an app's menu is pinned beside the rail while it is in use, and
   Open and the account open theirs as a flyout. */
.app-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; width: var(--sidebar-width); display: flex; background: var(--sidebar-bg); color: var(--ink); transition: transform .2s ease; }
body.panel-pinned { --sidebar-width: calc(var(--rail-width) + var(--panel-width)); }
.rail { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; width: var(--rail-width); flex: none; padding: 12px 0; }
.rail-brand { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; border-radius: var(--radius-md); }
.rail-brand:hover { background: var(--sidebar-hover); }
.rail-brand .brand-mark { width: 20px; height: 22px; }
.rail-group { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
.rail-ours { padding-top: 4px; }
.rail-apps { position: relative; flex: 1; min-height: 0; justify-content: flex-start; margin-top: 4px; padding: 10px 0 4px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none; }
.rail-apps::before { content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 1px; background: var(--sidebar-line); }
.rail-apps::-webkit-scrollbar { display: none; }
.rail-apps:not(:has(.rail-item)) { flex: 1; }
.rail-apps:not(:has(.rail-item))::before { display: none; }
.rail-foot { gap: 8px; }
.rail-item { position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; flex: none; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--sidebar-muted); }
.rail-item .icon { width: 20px; height: 20px; }
.rail-item:hover { background: var(--sidebar-hover); color: var(--ink); }
.rail-item.active, .rail-item.selected, .rail-item[aria-expanded="true"] { background: var(--sidebar-hover); color: var(--ink); }
.rail-item.active .icon, .rail-item.selected .icon { color: var(--accent); }
.rail-item.active::before, .rail-item.selected::before { content: ""; position: absolute; left: -10px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.rail-item .app-nav-mark { width: 22px; height: 22px; font-size: 12px; }
.rail-account { height: 40px; width: 40px; border-radius: 999px; }
.rail-account .avatar { width: 28px; height: 28px; font-size: 11px; }
.rail-account[aria-expanded="true"], .rail-account:hover { background: transparent; }
.rail-account:hover .avatar, .rail-account[aria-expanded="true"] .avatar { box-shadow: 0 0 0 2px var(--sidebar-hover); }
/* A name on hover or focus, drawn by sidebar.js beside the icon (a scrolling rail would clip a pseudo-element). */
.rail-tooltip { position: fixed; z-index: 120; padding: 4px 8px; border-radius: var(--radius-sm); background: var(--ink); color: var(--surface); font-size: 12px; font-weight: 500; line-height: 16px; white-space: nowrap; pointer-events: none; transform: translateY(-50%); box-shadow: var(--shadow-md); }
.rail-button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; flex: none; border: 0; border-radius: 999px; background: transparent; color: var(--sidebar-muted); }
.rail-button:hover { background: var(--sidebar-hover); color: var(--ink); }
.rail-button .icon { width: 16px; height: 16px; }
.rail-button.is-small { width: 24px; height: 24px; border-radius: var(--radius-md); }
.rail-button.is-small .icon { width: 14px; height: 14px; }

/* The panel: pinned beside the rail for an app (the page makes room at once: a page that reflows for 200ms is slow, and a click made while it slides misses), a flyout over the page for Open and the account. */
.side-panel { position: absolute; top: 0; bottom: 0; left: var(--rail-width); display: flex; flex-direction: column; gap: 8px; width: var(--panel-width); padding: 12px 8px; overflow: hidden auto; overscroll-behavior: contain; background: var(--sidebar-bg); }
.side-panel[hidden] { display: none; }
body:not(.panel-pinned) .side-panel { top: 12px; bottom: 12px; left: calc(var(--rail-width) - 4px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-lg); }
.panel-head { display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 4px 0 8px; }
.panel-title { flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 600; letter-spacing: -.005em; }
.panel-app-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.panel-app-title .app-icon { width: 28px; height: 28px; border-radius: var(--radius-md); font-size: 13px; }
.panel-app-title .app-icon .icon { width: 16px; height: 16px; }
.panel-app-title span:last-child { overflow: hidden; text-overflow: ellipsis; }
.panel-search { display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-low); color: var(--muted); font-size: 13px; font-weight: 400; text-align: left; }
.panel-search:hover { border-color: var(--line-strong); color: var(--ink); background: var(--surface-low); }
.panel-search .icon { width: 14px; height: 14px; }
.panel-search span { flex: 1; }
.panel-search kbd { padding: 0 5px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--muted); font: 11px/18px var(--mono); }
.panel-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.panel-body[hidden] { display: none; }
.rail-nav, .utility-nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--sidebar-ink); font-size: 14px; font-weight: 400; text-align: left; white-space: nowrap; }
.nav-item > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav-item .icon { width: 18px; height: 18px; }
.nav-item:hover { background: var(--sidebar-hover); color: var(--ink); }
.nav-item.active, .nav-item.selected { background: var(--sidebar-hover); color: var(--ink); font-weight: 500; }
.nav-item.active .icon { color: var(--accent); }
.nav-count { margin-left: auto; color: var(--muted); font-size: 12px; font-weight: 400; }
.panel-nav .new-build { margin-bottom: 4px; }
.sidebar-caption { display: inline-flex; justify-content: flex-start; padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; color: var(--sidebar-caption); font-size: 11px; font-weight: 500; line-height: 16px; letter-spacing: .025em; text-transform: uppercase; }
button.sidebar-caption:hover { color: var(--ink); background: transparent; }
/* An app's menu: its overview, then its pages in the groups the app makes. */
.panel-group { display: flex; flex-direction: column; gap: 1px; margin-top: 6px; }
.panel-group-head { display: flex; align-items: center; justify-content: flex-start; gap: 6px; width: 100%; height: 28px; padding: 0 10px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--sidebar-caption); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-align: left; text-transform: uppercase; }
.panel-group-head:hover { color: var(--ink); background: transparent; }
.panel-group-head > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-group-head .icon { width: 12px; height: 12px; transition: transform .15s ease; }
.panel-group-head[aria-expanded="false"] .icon { transform: rotate(-90deg); }
.panel-links { display: flex; flex-direction: column; gap: 1px; }
.panel-links[hidden] { display: none; }
.panel-link { display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; height: 32px; padding: 0 10px 0 12px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--sidebar-ink); font-size: 13px; font-weight: 400; text-align: left; white-space: nowrap; }
.panel-link > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.panel-link:hover { background: var(--sidebar-hover); color: var(--ink); }
.panel-link.selected { background: var(--sidebar-hover); color: var(--ink); font-weight: 500; }
.panel-link.selected::before { content: ""; width: 3px; height: 14px; margin-left: -8px; margin-right: 3px; border-radius: 2px; background: var(--accent); flex: none; }
.panel-link .icon { width: 14px; height: 14px; color: var(--muted); }
.panel-link.is-report { color: var(--muted); cursor: default; }
.panel-link.is-report:hover { background: transparent; color: var(--muted); }
.panel-link.is-report small { margin-left: auto; font-size: 11px; color: var(--faint); }
.panel-empty { margin: 0; padding: 4px 10px; font-size: 13px; color: var(--muted); white-space: normal; }
.panel-rule { height: 1px; margin: 6px 4px; background: var(--sidebar-line); }
.sidebar-empty { margin: 0; padding: 4px 12px; font-size: 13px; color: var(--muted); white-space: normal; }
#sessions { display: grid; gap: 1px; align-content: start; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.session-entry { position: relative; display: flex; align-items: flex-start; justify-content: flex-start; gap: 8px; width: 100%; padding: 6px 8px; border-radius: var(--radius-md); text-align: left; background: transparent; color: var(--ink); }
.session-entry > .icon { width: 14px; height: 14px; margin-top: 2px; color: var(--muted); }
.session-entry:hover { background: var(--surface-low); }
.session-entry.selected { background: var(--surface-low); box-shadow: inset 2px 0 0 var(--accent); }
.session-entry.selected .session-title { font-weight: 600; }
.session-info { display: grid; min-width: 0; gap: 1px; }
.session-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; line-height: 18px; }
.session-meta { color: var(--muted); font-size: 11px; line-height: 16px; }
.utility-nav:not(:has(button:not([hidden]))) { display: none; }
.last-request { align-self: flex-start; margin: 4px 10px 0; padding: 0 8px; border: 0; border-radius: 999px; background: var(--surface-high); color: var(--muted); font: 11px/20px var(--mono); }
/* The account menu: who is signed in, then the tools and settings, then theme and sign-out. */
.account { display: flex; align-items: center; gap: 2px; min-width: 0; padding: 4px 0 8px; margin-bottom: 4px; border-bottom: 1px solid var(--sidebar-line); }
.account[hidden] { display: none; }
.account-person { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; padding: 0 8px; }
.avatar { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; color: var(--on-accent); background: var(--accent); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.account-info { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.3; }
#identity { font-size: 14px; font-weight: 500; color: var(--ink); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
#workspace-label { font-size: 12px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.panel-foot { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--sidebar-line); }
.panel-foot .theme-picker { display: block; }
.panel-foot .theme-menu { top: auto; bottom: calc(100% + 4px); right: auto; left: 0; width: 100%; }
.main-shell { position: relative; height: calc(100dvh - 24px); margin: 12px 8px 12px var(--sidebar-width); min-width: 0; overflow: auto; overscroll-behavior: contain; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--panel-shadow); }
/* On a wide screen every page heads itself; this bar is only the phone's way into the rail. */
.navbar { position: sticky; top: 0; z-index: 30; display: none; align-items: center; gap: 8px; height: var(--navbar-height); padding: 0 8px 0 6px; background: var(--navbar-bg); border-bottom: 1px solid var(--line); }
.workspace-context { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; font-size: 14px; }
#workspace-heading { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.context-divider { color: var(--faint); }
#view-label { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Search is Activepieces' command dialog: a field over a list, near the top of the screen. */
.search-palette { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-start; justify-content: center; padding: 14vh 16px 16px; background: var(--overlay); }
.global-search { width: 100%; max-width: 512px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); }
.search-field { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 12px; border-bottom: 1px solid var(--line); color: var(--muted); }
.search-field > .icon { opacity: .5; }
.search-field input { height: 46px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 14px; }
.search-field input:focus { box-shadow: none; }
.search-field input::-webkit-search-cancel-button { display: none; }
.search-results { max-height: 300px; overflow-y: auto; padding: 4px; }
.search-result { width: 100%; display: flex; justify-content: flex-start; gap: 8px; padding: 6px 8px; border-radius: var(--radius-sm); text-align: left; background: transparent; }
.search-result:hover, .search-result:focus-visible { background: var(--surface-low); outline: none; }
.search-result .icon { color: var(--muted); }
.search-result span { flex: 1; overflow-wrap: anywhere; }
.search-result small { color: var(--muted); font-size: 12px; }
.search-results > p { margin: 0; padding: 20px 12px; font-size: 14px; color: var(--muted); text-align: center; }
.search-hint { margin: 0; padding: 24px 12px; font-size: 14px; color: var(--muted); text-align: center; }
.search-results:not([hidden]) + .search-hint { display: none; }
.theme-picker { position: relative; flex: none; }
.theme-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 50; width: 224px; padding: 4px; display: grid; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.theme-option { width: 100%; padding: 6px 8px; gap: 10px; justify-content: flex-start; border-radius: var(--radius-sm); text-align: left; background: transparent; color: var(--secondary); white-space: nowrap; }
.theme-option:hover, .theme-option:focus-visible { background: var(--surface-low); color: var(--ink); outline: none; }
.theme-option > span { display: grid; min-width: 0; line-height: 1.35; }
.theme-option strong { font-size: 14px; font-weight: 500; color: var(--ink); }
.theme-option small { font-size: 12px; color: var(--muted); }
.theme-option > .icon:first-child { color: var(--muted); }
/* The tick marks the active mode; it holds its slot when hidden so the rows stay aligned. */
.theme-option > .icon:last-child { margin-left: auto; color: var(--accent); visibility: hidden; }
.theme-option[aria-checked="true"] > .icon:first-child { color: var(--ink); }
.theme-option[aria-checked="true"] > .icon:last-child { visibility: visible; }
#main-content { min-width: 0; outline: none; }
.mobile-only { display: none; }

/* Home: Activepieces' chat page — a serif headline and a line under it, set left in one column,
   the rounded prompt box, then the workspace's apps. */
.overview { width: 100%; max-width: 816px; margin: 0 auto; padding: 72px 24px 48px; }
.overview-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 28px; text-align: left; }
.overview-hero h1 { margin: 0; font-family: var(--serif); font-size: 48px; font-weight: 700; letter-spacing: 0; line-height: 1.1; text-wrap: balance; }
.overview-hero p { max-width: 576px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.5; }
/* The prompt, and Connections that need you when there are some, each stand apart from what follows. */
.home-prompt, .connection-attention { margin: 0 0 48px; }
.home-composer { padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); cursor: text; transition: border-color .15s, box-shadow .15s; }
.home-composer:focus-within { border-color: var(--focus-border); }
.home-composer textarea { min-height: 88px; max-height: 300px; padding: 8px 10px; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 14px; resize: none; }
.home-composer textarea:focus { box-shadow: none; }
.home-composer-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 2px 2px; }
.model-picker { display: inline-flex; align-items: center; gap: 6px; height: 28px; margin: 0; min-width: 0; padding: 0 4px 0 10px; border-radius: 999px; color: var(--muted); font-size: 12px; font-weight: 500; }
.model-picker:hover { background: var(--surface-low); }
.model-picker select { max-width: 200px; height: 26px; padding: 0 2px; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 12px; font-weight: 500; color: var(--secondary); text-overflow: ellipsis; cursor: pointer; }
.model-picker select:focus { box-shadow: none; }
.model-picker:focus-within { outline: 3px solid var(--focus-ring); }
.home-composer .model-picker select { max-width: 240px; }
.composer-actions { display: flex; align-items: center; gap: 8px; flex: none; }
/* The send button is a round arrow, as Activepieces' is; its words stay for screen readers. */
.home-composer button[type="submit"] { width: 32px; height: 32px; padding: 0; border-radius: 999px; }
.home-composer button[type="submit"] > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.prompt-suggestions { display: flex; justify-content: flex-start; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.prompt-chip { padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: light-dark(#f5f5f580, #26262680); color: light-dark(#0a0a0ab3, #fafafab3); font-size: 12px; line-height: 16px; }
.prompt-chip:hover { background: var(--surface-low); color: var(--ink); }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.section-heading h2 { margin: 0; font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.recent-apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.recent-card { display: flex; flex-direction: column; align-items: stretch; gap: 0; min-width: 0; padding: 16px; text-align: left; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); transition: border-color .2s; }
.recent-card:hover { border-color: var(--faint); background: var(--surface); }
.recent-card-heading { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.recent-card h3 { min-width: 0; margin: 0; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-card > p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1; min-height: 42px; margin: 0 0 14px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.recent-card-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.recent-card-footer .icon { width: 14px; height: 14px; }
.home-empty { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; padding: 24px; border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); color: var(--secondary); }
.home-empty > .welcome-icon { width: 40px; height: 40px; background: var(--surface-low); color: var(--muted); }
.home-empty h3 { font-size: 14px; margin-bottom: 4px; }
.home-empty p { font-size: 13px; margin: 0; color: var(--muted); }
.home-empty > div { flex: 1; }

/* Pages: the whole panel's width, headed as Activepieces' PageHeader heads a dashboard page — a
   16px title and a line under it, actions on the right, pinned while the page scrolls. */
.desk-layout { max-width: none; margin: 0; padding: 0 16px 32px; min-width: 0; }
.breadcrumbs { font-size: 13px; color: var(--muted); margin-bottom: 16px; }
.desk-layout[data-kind="workspace"] .breadcrumbs { display: none; }
.page-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; }
.page-header h1 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: 0; line-height: 24px; }
.page-header p { margin: 0; color: var(--muted); font-size: 14px; line-height: 20px; }
:is(.settings-page, .desk-layout) > .page-header { position: sticky; top: var(--banner-height); z-index: 20; min-height: 60px; margin: 0 -16px 4px; padding: 12px 16px; background: var(--surface); }
.page-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.workspace-header { align-items: flex-end; margin: 0 0 24px; }
.workspace-header h1 { font-size: 28px; margin: 8px 0; }
.workspace-header p { max-width: 600px; font-size: 14px; line-height: 1.6; }
.eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-low); color: var(--muted); font-size: 12px; font-weight: 500; line-height: 20px; }
.workspace-filters { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
/* Tabs within a section are Activepieces' default TabsList: a grey track, the chosen one raised. */
.filter-tabs, .panel-switcher, .preview-tabs { display: flex; align-items: center; gap: 2px; min-height: 36px; padding: 3px; border-radius: var(--radius-md); background: var(--surface-low); color: var(--muted); }
.filter-tabs button, .panel-switcher button { min-height: 30px; padding: 4px 12px; border-radius: var(--radius-sm); background: transparent; color: var(--muted); font-size: 14px; font-weight: 500; white-space: nowrap; }
.filter-tabs button:hover, .panel-switcher button:hover { background: transparent; color: var(--ink); }
.filter-tabs button[aria-pressed="true"], .panel-switcher button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.filter-tabs .filter-count { min-width: 18px; padding: 0 5px; border-radius: 999px; font-size: 11px; line-height: 16px; color: var(--muted); background: var(--surface-high); }
/* A page's own sections are its outline tabs: a row under the header, the chosen one underlined. */
.settings-hub-tabs, .trace-tabs { display: flex; align-items: flex-end; gap: 0; min-height: 0; width: auto; margin: 0 -16px 16px; padding: 8px 12px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; overflow-x: auto; }
.settings-hub-tabs button, .trace-tab { min-height: 0; margin-bottom: -1px; padding: 4px 12px 12px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--ink); font-size: 14px; font-weight: 500; box-shadow: none; white-space: nowrap; }
.settings-hub-tabs button:hover, .trace-tab:hover { background: transparent; color: var(--ink); }
.settings-hub-tabs button[aria-pressed="true"], .trace-tab.active { border-bottom-color: var(--ink); background: transparent; box-shadow: none; }
.app-search { display: flex; align-items: center; gap: 8px; width: 300px; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--control); color: var(--muted); box-shadow: var(--shadow); }
.app-search input { height: 34px; padding: 0; border: 0; background: transparent; box-shadow: none; }
.app-search input:focus { box-shadow: none; }
.app-search:focus-within { border-color: var(--focus-border); box-shadow: 0 0 0 1px var(--focus-ring); }
.app-search > .icon { width: 15px; height: 15px; }
.app-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.app-card { display: flex; flex-direction: column; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); min-width: 0; transition: border-color .2s; }
.app-card:hover { border-color: var(--faint); }
.app-card-heading { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.app-icon { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius); background: var(--mark); color: #fff; font-size: 14px; font-weight: 700; flex: none; }
.app-card-identity { min-width: 0; flex: 1; }
.app-card h2 { font-size: 16px; margin: 0 0 2px; overflow-wrap: anywhere; }
.app-card-id { color: var(--muted); font: 12px/1.5 var(--mono); overflow-wrap: anywhere; }
.app-card-badges { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.app-card > p { color: var(--muted); font-size: 14px; line-height: 1.6; }
.app-pages { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 18px; flex: 1; align-content: flex-start; }
.page-shortcut { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--secondary); font-size: 13px; }
.page-shortcut .icon { width: 13px; height: 13px; color: var(--muted); }
.page-shortcut:hover { background: var(--surface-low); color: var(--ink); }
.draft-page-chip { font-size: 12px; padding: 3px 10px; border-radius: 999px; color: var(--muted); background: var(--surface-low); }
.app-card-footer { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; padding: 8px 10px; margin-top: auto; border-radius: var(--radius); background: var(--surface-low); }
.app-card-footer > span { font-size: 12px; color: var(--muted); }
.app-card-actions { display: flex; gap: 4px; margin-left: auto; }
.app-card-actions button { padding: 4px 8px; font-size: 13px; }
.app-card-actions .text-button { color: var(--accent); }
.draft-note { display: flex; gap: 6px; align-items: center; color: var(--accent); font-size: 12px; margin: 0 0 16px; }
.draft-note .icon { width: 14px; height: 14px; }
.workspace-summary { display: flex; gap: 16px; align-items: center; justify-content: space-between; margin: 24px 0; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-low); }
.workspace-summary > .welcome-icon { background: var(--surface); box-shadow: var(--shadow); }
.workspace-summary-copy { flex: 1; }
.workspace-summary h3 { font-size: 14px; margin: 0 0 4px; }
.workspace-summary p { margin: 0; font-size: 13px; color: var(--muted); }
.workspace-metrics { display: flex; gap: 22px; color: var(--muted); font-size: 12px; text-align: right; }
.workspace-metrics strong { display: block; font-size: 16px; font-weight: 600; color: var(--ink); }
.available-heading { margin: 28px 0 16px; font-size: 15px; }
.available-app .primary { align-self: flex-start; margin-top: auto; }
.workspace-footer { display: flex; align-items: center; gap: 7px; margin-top: 28px; color: var(--muted); font-size: 12px; }
/* Activepieces' empty state: a muted icon tile, a title and a line of help, centred. */
.empty-state { padding: 56px 24px; text-align: center; color: var(--muted); grid-column: 1 / -1; font-size: 14px; }
/* A neutral note a page leads with (.specs/55, P6: the draft's schedules, an agent skill kept on
   live): the line's own words, sometimes with the way elsewhere. Never the draft's amber. */
.page-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-low); color: var(--ink); font-size: 13px; line-height: 1.5; }
.page-note > span:not(.badge) { flex: 1; min-width: 200px; overflow-wrap: anywhere; }
.page-note > button { flex: none; height: 32px; padding: 0 10px; font-size: 13px; }
.empty-state .icon { width: 28px; height: 28px; color: var(--empty-icon); margin-bottom: 12px; }
.empty-state h3 { color: var(--ink); margin-bottom: 6px; font-size: 20px; }
.empty-state > p:first-child { color: var(--ink); font-size: 16px; font-weight: 600; }
.empty-state button { margin-top: 12px; }

/* Record lists are Activepieces' DataTable: a toolbar, then the table in a hairline frame. */
.list-card { background: transparent; border: 0; border-radius: 0; overflow: visible; box-shadow: none; }
.list-tools { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; }
.list-tools > span { font-size: 14px; color: var(--muted); white-space: nowrap; }
.list-search { position: relative; display: flex; align-items: center; flex: 0 1 320px; min-width: 0; margin: 0; font-weight: 400; }
.list-search > .icon { position: absolute; left: 10px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.list-search input { padding-left: 32px; }
.list-card > .table-scroll { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.list-card th:first-child, .list-card td:first-child { padding-left: 32px; }
.list-card th:last-child, .list-card td:last-child { padding-right: 32px; }
.list-card > .empty-state { padding: 40px 24px; }
.table-scroll { overflow: auto; min-width: 0; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
td, th { padding: 8px; white-space: nowrap; text-align: left; vertical-align: middle; }
th { padding-block: 10px; background: var(--table-head-bg); color: var(--ink); font-size: 12px; font-weight: 500; border-bottom: 1px solid var(--line); }
td { border-bottom: 1px solid var(--line); }
th:first-child, td:first-child { padding-left: 16px; }
th:last-child, td:last-child { padding-right: 16px; }
tr:last-child > td { border-bottom: 0; }
tr:hover > td { background: var(--row-hover); }
.link-button { display: inline; padding: 0; border: 0; background: none; color: var(--ink); font-weight: 500; white-space: nowrap; box-shadow: none; }
.link-button:hover { background: none; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.record-layout { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 24px; }
.record-meta { padding-top: 16px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.record-meta p { white-space: pre-line; margin-bottom: 16px; }
.record-form { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }
.form-section { padding: 20px 24px; border-bottom: 1px solid var(--line); }
.form-section h3 { font-size: 16px; margin-bottom: 8px; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.field-grid label.wide { grid-column: 1 / -1; }
.required { color: var(--danger); margin-left: 4px; }
.field-help { display: block; color: var(--muted); font-size: 12px; font-weight: 400; margin-top: 6px; }
.record-form input, .record-form select, .record-form textarea { margin-top: 8px; }
.form-footer { padding: 14px 24px; display: flex; justify-content: flex-end; gap: 8px; }
.form-footer button { min-width: 88px; }
.notice { padding: 10px 14px; border: 1px solid var(--warning-line); border-radius: var(--radius); background: var(--warning-soft); color: var(--warning-ink); margin-bottom: 16px; font-size: 13px; }
iframe { width: 100%; height: 650px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.link-control { position: relative; }
.link-popup { position: absolute; top: 100%; left: 0; right: 0; z-index: 10; margin-top: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-md); max-height: 300px; overflow: auto; }
.link-option { display: grid; gap: 1px; padding: 6px 8px; border-radius: var(--radius-sm); cursor: pointer; }
.link-option:hover, .link-option[aria-selected="true"] { background: var(--surface-low); }
.link-option strong { font-size: 13px; font-weight: 500; color: var(--ink); }
.link-option small { color: var(--muted); overflow-wrap: anywhere; font-size: 12px; }
.link-status { padding: 6px 8px; color: var(--muted); font-size: 12px; }
.link-more { width: 100%; text-align: left; justify-content: flex-start; border-radius: var(--radius-sm); font-size: 12px; background: transparent; }

/* Assistant: Chat, Builder and the Scraper are Activepieces' chat page — the conversations in a
   narrow list on the left, the conversation in one centred column, the prompt box under it. Above
   them is their project header: the page header (a 14px title, the conversation as a crumb after
   it), then a row of outline tabs on a hairline, each a 16px icon and a label, the chosen one
   underlined in ink — the tabs their dashboard filters by the person's permissions. */
.agent-layout { display: flex; flex-direction: column; height: calc(100dvh - var(--frame)); min-height: 480px; padding: 0; min-width: 0; }
.agent-header { display: flex; align-items: center; gap: 8px; min-height: 52px; margin: 0; padding: 8px 12px; }
.agent-title { flex: none; margin: 0 0 0 4px; font-size: 14px; font-weight: 500; line-height: 20px; white-space: nowrap; }
.agent-crumbs { display: flex; flex: none; align-items: center; gap: 2px; color: var(--muted); }
.agent-crumbs button { min-height: 0; padding: 4px 6px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); font-size: 14px; font-weight: 500; }
.agent-crumbs button:hover { background: var(--surface-low); color: var(--ink); }
.agent-crumbs .icon, .agent-heading > .icon { flex: none; width: 14px; height: 14px; color: var(--muted); }
.agent-heading { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; }
.conversation-title { min-width: 0; overflow: hidden; color: var(--muted); font-size: 14px; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
.agent-heading .badge { flex: none; font-size: 11px; line-height: 16px; padding: 0 6px; }
.agent-tabs { display: flex; flex: none; align-items: flex-end; padding: 0 12px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.agent-tabs button { gap: 8px; min-height: 0; margin-bottom: -1px; padding: 4px 12px 12px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--ink); font-size: 14px; font-weight: 500; box-shadow: none; white-space: nowrap; }
.agent-tabs button:hover { background: transparent; color: var(--ink); }
.agent-tabs button[aria-pressed="true"] { border-bottom-color: var(--ink); }
.agent-tabs .icon { width: 16px; height: 16px; }
.agent-header .page-actions button { padding: 5px 10px; font-size: 13px; }
.agent-header .page-actions .icon { width: 15px; height: 15px; }
.history-toggle { border-radius: 999px; }
.history-toggle[aria-pressed="true"] { color: var(--ink); background: var(--surface-low); }
.agent-panels { display: flex; flex: 1; min-height: 0; gap: 0; }
/* As wide as its reader drags it: 180px at least, 400px at most, and never so wide that the
   conversation keeps less than 360px (361px here: the handle's hairline is the other pixel).
   client.js holds the same numbers for the handle. */
.conversation-history { display: flex; flex: none; flex-direction: column; gap: 6px; width: clamp(180px, var(--history-width, 220px), min(400px, 100% - 361px)); min-width: 0; min-height: 0; padding: 4px 8px 8px; border: 0; border-radius: 0; background: transparent; }
.conversation-history[hidden] { display: none; }
/* Activepieces' resizable handle: a hairline, a wider grab area either side of it, and a grip. */
.panel-resizer { position: relative; z-index: 5; display: flex; flex: none; align-items: center; justify-content: center; width: 1px; background: var(--line); cursor: col-resize; touch-action: none; outline: none; transition: background .15s; }
.panel-resizer::after { content: ""; position: absolute; inset: 0 -4px; }
.panel-resizer:hover, .panel-resizer.is-dragging { background: var(--focus-border); }
.panel-resizer:focus-visible { background: var(--focus-border); box-shadow: 0 0 0 2px var(--focus-ring); }
.panel-grip { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 12px; height: 16px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface-low); color: var(--muted); }
.panel-grip .icon { width: 10px; height: 10px; }
.panel-resizer:hover .panel-grip, .panel-resizer.is-dragging .panel-grip { color: var(--ink); }
.agent-layout[data-history="closed"] .panel-resizer { display: none; }
body.resizing-panel { cursor: col-resize; user-select: none; }
.conversation-history-heading { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 30px; padding: 0 0 0 8px; }
.conversation-history-heading .sidebar-caption { font-weight: 600; letter-spacing: .05em; color: var(--muted); }
.conversation-history-heading .icon-button { width: 28px; height: 28px; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--ink); }
.conversation-history-heading .icon { width: 14px; height: 14px; }
.chat { position: relative; display: flex; flex: 1; flex-direction: column; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.chat-panel-heading { display: none; }
.subtle-label { margin-left: auto; padding: 0 7px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-low); color: var(--muted); font-size: 11px; font-weight: 500; line-height: 18px; }
.mode-help { width: calc(100% - 48px); max-width: 768px; margin: 0 auto; padding: 12px 0 8px; color: var(--muted); font-size: 12px; line-height: 1.6; text-align: center; }
.conversation-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 24px 24px 16px; overscroll-behavior: contain; scroll-padding-bottom: 16px; }
.conversation-scroll > :is(#questions, .pending-action, #review, .chat-transfer) { max-width: 768px; margin-inline: auto; }
#messages { display: flex; flex-direction: column; gap: 28px; max-width: 768px; min-width: 0; margin: 0 auto; }
.message { min-width: 0; overflow-wrap: anywhere; font-size: 14px; line-height: 1.7; }
.message > small, .message-label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; margin: 0 2px 6px; }
.message-label .icon { width: 22px; height: 22px; padding: 4px; border-radius: var(--radius-md); color: var(--accent); background: var(--accent-soft); }
.message-content { padding: 0 2px; }
.message-content > :last-child { margin-bottom: 0; }
.message.user { width: fit-content; max-width: 85%; align-self: flex-end; }
.message.user .message-label { justify-content: flex-end; }
.message.user .message-content { padding: 10px 14px; border-radius: 16px 16px 6px 16px; background: var(--surface-low); white-space: pre-wrap; }
.message-content p { margin-bottom: 12px; white-space: pre-wrap; }
.message-content h2, .message-content h3, .message-content h4 { margin: 20px 0 8px; line-height: 1.4; }
.message-content h2:first-child, .message-content h3:first-child, .message-content h4:first-child { margin-top: 0; }
.message-content h2 { font-size: 18px; }
.message-content h3 { font-size: 16px; }
.message-content h4 { font-size: 14px; }
.message-content ul, .message-content ol { margin: 8px 0 14px; padding-left: 22px; }
.message-content li { margin: 4px 0; }
.message-content blockquote { margin: 12px 0; padding: 6px 14px; border-left: 2px solid var(--line-strong); color: var(--secondary); }
.message-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.message-content :not(pre) > code { font: 12px/1.6 var(--mono); padding: 1px 5px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-low); }
/* Tokens and turn totals are text people open to read: 12px `--muted` (over 4.5:1 in both themes),
   never `--faint`, which is about 2.6:1 light and 4.0:1 dark. */
.turn-usage { margin-top: 8px; padding: 8px 2px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.7; }
.turn-usage > small { display: block; margin-bottom: 3px; font-size: 12px; }
.turn-usage summary { cursor: pointer; margin-top: 4px; }
.turn-usage details > div { margin-top: 5px; overflow-wrap: anywhere; font-family: var(--mono); }
.chat-trace-link, .chat-run-link { display: block; margin-top: 8px; font-size: 12px; color: var(--accent); white-space: normal; text-align: left; }
.message > .table-scroll { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.message .table-scroll th, .message .table-scroll td { padding: 8px 12px; font-size: 13px; }
.code-block { margin: 14px 0; overflow: hidden; border: 1px solid var(--code-line); border-radius: var(--radius); background: var(--code-bg); color: var(--code-ink); }
.code-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px 6px 12px; background: var(--code-toolbar-bg); color: var(--code-toolbar-ink); font-size: 12px; }
.code-toolbar button { padding: 2px 8px; background: var(--code-button-bg); color: var(--code-button-ink); border-radius: var(--radius-sm); font-size: 12px; }
.code-toolbar button:hover { background: var(--code-button-hover); }
.code-toolbar .icon { width: 12px; height: 12px; }
.code-block pre { max-height: 480px; margin: 0; padding: 14px 16px; overflow: auto; white-space: pre; font: 12px/1.7 var(--mono); }
.assistant-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; text-align: center; color: var(--secondary); }
.assistant-empty .welcome-icon { width: 56px; height: 56px; margin-bottom: 16px; border-radius: 16px; background: var(--surface-low); color: var(--muted); }
.assistant-empty .welcome-icon .icon { width: 26px; height: 26px; }
.assistant-empty h3 { font-size: 20px; margin: 0 0 8px; }
.assistant-empty p { max-width: 340px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.assistant-empty .prompt-chip { max-width: 100%; }
/* The running step's spinner, in a request's row (`.action-stack-mark`). */
.live-step-spinner { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--line-strong); border-top-color: var(--accent); animation: live-spin .7s linear infinite; }
@keyframes live-spin { to { transform: rotate(360deg); } }
.turn-failure .message-label { color: var(--danger); }
.turn-failure .message-label .icon { color: var(--danger); background: var(--danger-soft); }
.turn-failure .message-content { padding: 10px 14px; border: 1px solid var(--danger-line); border-radius: var(--radius); background: var(--danger-soft); color: var(--danger-ink); }
.turn-failure .message-content p { margin-bottom: 0; }
.turn-failure .link-button { margin-top: 10px; color: var(--danger-ink); }
#questions { margin: 18px 0 5px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.question-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.question-position { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.question-header-chip { padding: 0 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 500; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.question-count { color: var(--muted); font-size: 12px; white-space: nowrap; }
.question-dots { display: flex; align-items: center; gap: 5px; flex: none; }
.question-dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: var(--line-strong); cursor: pointer; }
.question-dot.answered { background: var(--accent-border); }
.question-dot.current { width: 18px; border-radius: 999px; background: var(--accent); }
#questions h3.question-text { font-size: 15px; line-height: 1.5; margin-bottom: 4px; }
.question-hint { margin-bottom: 10px; color: var(--muted); font-size: 12px; }
/* A long list scrolls inside the card, never making the card taller than the screen; the padding keeps a focus ring from being clipped. */
.question-options { display: flex; flex-direction: column; gap: 6px; margin: 9px -3px; padding: 3px; max-height: min(46vh, 380px); overflow-y: auto; overscroll-behavior: contain; }
.question-option { display: flex; align-items: flex-start; justify-content: flex-start; gap: 10px; width: 100%; padding: 10px 12px; text-align: left; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); cursor: pointer; }
.question-option:hover { border-color: var(--line-strong); background: var(--surface-low); }
.question-option.selected { border-color: var(--accent); background: var(--accent-wash); }
.question-option.custom .question-option-label { color: var(--secondary); }
.question-mark { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-top: 2px; flex: none; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); }
.question-mark.multiple { border-radius: var(--radius-sm); }
.question-option.selected .question-mark { border-color: var(--accent); background: var(--accent); }
.question-mark .icon { width: 11px; height: 11px; color: var(--on-accent); }
.question-option-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.question-option-label { font-size: 14px; line-height: 1.5; }
.question-option-description { color: var(--muted); font-size: 12px; line-height: 1.5; }
.question-custom { width: 100%; margin-bottom: 12px; }
.question-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.question-review { display: flex; flex-direction: column; margin: 12px 0; }
.question-review-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.question-review-row:last-child { border-bottom: 0; }
.question-review-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.question-review-question { color: var(--muted); font-size: 12px; }
.question-review-answer { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.question-review-answer.missing { color: var(--danger); }
.question-review-answer.skipped { color: var(--muted); }
/* Guided questions (docs/designs/guided-forms-and-documents.md): why one is asked, a search over a long list, Cancel, and a refusal in words. */
.question-stage { padding: 0 8px; border-radius: 999px; background: var(--surface-low); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font-size: 12px; font-weight: 500; line-height: 20px; white-space: nowrap; }
.question-stage.required { background: var(--warning-soft); box-shadow: inset 0 0 0 1px var(--warning-line); color: var(--warning-ink); }
.question-stage.choose { background: var(--accent-soft); box-shadow: none; color: var(--accent); }
.question-search { position: relative; margin: 12px 0 0; }
.question-search > .icon { position: absolute; left: 10px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.question-search input { padding-left: 34px; }
.question-empty { margin: 0 0 8px; color: var(--muted); font-size: 13px; }
.question-cancel { margin-right: auto; color: var(--muted); }
.question-error { margin: 12px 0 0; padding: 8px 10px; border: 1px solid var(--danger-line); border-radius: var(--radius-md); background: var(--danger-soft); color: var(--danger-ink); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
#review { display: flex; gap: 12px; margin: 18px 0 5px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-low); }
.review-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent); flex: none; }
#review h3 { font-size: 14px; margin-bottom: 4px; }
#review p { font-size: 13px; color: var(--secondary); margin-bottom: 4px; line-height: 1.6; }
#review .text-button { font-size: 13px; color: var(--accent); text-align: left; }
.pending-action { margin: 18px 0 5px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-md); }
.pending-action h3 { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 4px; }
.pending-action .pending-action-badge { padding: 0 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 500; line-height: 20px; }
.pending-action p { font-size: 13px; color: var(--muted); margin-bottom: 12px; line-height: 1.6; }
.pending-action .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; margin-bottom: 14px; }
.pending-action label { font-size: 13px; margin: 10px 0; }
.pending-action input, .pending-action textarea, .pending-action select { margin-top: 6px; }
.pending-action-actions { display: flex; gap: 8px; }
/* The composer is Activepieces' prompt box: a pill-cornered frame, the text, then its tools. */
.message-composer { flex: none; width: calc(100% - 48px); max-width: 768px; margin: 0 auto; padding: 8px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: var(--shadow); cursor: text; transition: border-color .15s; }
.message-composer:focus-within { border-color: var(--focus-border); }
.message-composer textarea { min-height: 44px; max-height: 200px; padding: 8px 10px; border: 0; border-radius: 0; box-shadow: none; resize: none; font-size: 15px; background: transparent; }
.message-composer textarea:focus { box-shadow: none; }
.composer-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.composer-tools { display: flex; align-items: center; gap: 4px; min-width: 0; flex: 1; }
.composer-tools .model-picker { min-width: 0; }
.composer-tools .model-picker select { max-width: 230px; }
.composer-tools .icon-button { width: 28px; height: 28px; padding: 6px; border-radius: 999px; }
.composer-tools .icon { width: 15px; height: 15px; }
.execution-picker { margin: 0; min-width: 0; }
.execution-picker select { width: 92px; height: 26px; padding: 0 6px; font-size: 12px; border: 0; background: var(--surface-low); border-radius: var(--radius-md); box-shadow: none; color: var(--secondary); }
.auto-submit-picker { display: inline-flex; align-items: center; gap: 5px; height: 26px; margin: 0; padding: 0 9px; border-radius: 999px; background: var(--surface-low); font-size: 12px; font-weight: 400; color: var(--secondary); cursor: pointer; white-space: nowrap; }
.auto-submit-picker input { width: 13px; height: 13px; margin: 0; }
.send-button { width: 32px; height: 32px; padding: 0; border-radius: 999px; flex: none; }
.send-button .icon { width: 16px; height: 16px; }
.message-composer .keyboard-hint { display: block; }
/* Files for the next message: chips above the box, a drop target when a file is dragged over. */
.message-composer.dropping { border-color: var(--accent); background: var(--accent-wash); }
.attachment-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 4px 6px 2px; list-style: none; }
.attachment-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-width: 0; }
li.attachment-chip { min-height: 40px; padding: 4px 4px 4px 4px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-low); }
li.attachment-chip.failed { border-color: var(--danger-line); }
.attachment-thumb { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface-high); color: var(--muted); }
.attachment-picture { position: absolute; inset: 0; width: 100%; height: 100%; }
.attachment-words { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.attachment-name { min-width: 0; max-width: 200px; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.attachment-state { color: var(--muted); font-size: 11px; }
li.attachment-chip.failed .attachment-state { color: var(--danger-ink); }
.attachment-remove { width: 24px; height: 24px; padding: 4px; border-radius: 999px; }
.attachment-remove .icon { width: 14px; height: 14px; }
.attachment-error { margin: 0; padding: 4px 10px 0; color: var(--danger-ink); font-size: 12px; line-height: 1.5; }
/* The files a message carried, in the thread: under the person's words, on their side. */
.message-attachments { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.message-attachments .attachment-chip { padding: 4px 10px 4px 4px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.message-attachments .attachment-chip:hover { background: var(--surface-low); }
.message-attachments .has-picture .attachment-thumb { width: 44px; height: 44px; }
.panel-switcher { display: none; }
/* Under the prompt box, the small centred line Activepieces keeps there. */
.agent-footer { display: flex; gap: 12px; align-items: center; justify-content: center; width: calc(100% - 48px); max-width: 768px; margin: 0 auto; padding: 8px 0 12px; font-size: 11.5px; line-height: 14px; color: var(--muted); }
.agent-footer > span { display: flex; gap: 6px; align-items: center; min-width: 0; }
.agent-footer .status-dot { width: 5px; height: 5px; }
.agent-footer #agent-footer-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.agent-footer .text-button { flex: none; padding: 0; font-size: 11.5px; white-space: nowrap; }
.agent-footer .icon { width: 12px; height: 12px; }

/* Draft preview: always derived from the App proposal */
.preview-panel { display: flex; min-width: 0; min-height: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }
.preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.preview-tabs { min-height: 32px; padding: 2px; }
.preview-tabs button { min-height: 26px; padding: 2px 10px; border-radius: var(--radius-sm); background: transparent; color: var(--muted); font-size: 13px; font-weight: 500; }
.preview-tabs button:hover { background: transparent; color: var(--ink); }
.preview-tabs button[aria-selected="true"] { color: var(--ink); background: var(--surface); box-shadow: var(--shadow); }
.viewport-controls { display: flex; align-items: center; gap: 2px; padding: 2px; border-radius: var(--radius-md); background: var(--surface-low); }
.viewport-controls .icon-button { width: 28px; height: 26px; padding: 5px; border-radius: var(--radius-sm); }
.viewport-controls .icon { width: 15px; height: 15px; }
.viewport-controls [aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.preview-stage { flex: 1; min-height: 0; overflow: auto; padding: 16px; background-color: var(--stage-bg); background-image: radial-gradient(circle, var(--dot-grid) .6px, transparent .8px); background-size: 10px 10px; }
.preview-canvas { min-height: 100%; width: 100%; margin: 0 auto; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-md); transition: max-width .2s; }
.preview-stage[data-viewport="tablet"] .preview-canvas { max-width: 768px; }
.preview-stage[data-viewport="mobile"] .preview-canvas { max-width: 375px; }
.preview-empty { display: flex; min-height: 100%; padding: 64px 32px; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.preview-empty .welcome-icon { width: 56px; height: 56px; margin-bottom: 18px; border-radius: 16px; background: var(--surface-low); color: var(--muted); }
.preview-empty .welcome-icon .icon { width: 24px; height: 24px; }
.preview-empty h2 { font-size: 18px; margin: 0 0 8px; }
.preview-empty p { max-width: 280px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.preview-outline { display: flex; gap: 8px; align-items: center; margin-top: 16px; }
.preview-outline span { padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 12px; color: var(--muted); }
.preview-outline .icon { width: 13px; height: 13px; color: var(--faint); }
.draft-app-header { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.draft-app-header > div { flex: 1; min-width: 0; }
.draft-app-header h2 { font-size: 16px; margin: 0 0 2px; overflow-wrap: anywhere; }
.draft-app-header p { margin: 0; color: var(--muted); font: 12px/1.5 var(--mono); }
.draft-page-tabs { display: flex; gap: 4px; flex-wrap: wrap; padding: 10px 14px; background: var(--surface-low); border-bottom: 1px solid var(--line); }
.draft-page-tabs button { padding: 3px 10px; border-radius: var(--radius-sm); font-size: 12px; color: var(--muted); background: transparent; }
.draft-page-tabs button[aria-pressed="true"] { color: var(--ink); background: var(--surface); box-shadow: var(--shadow); }
.draft-page-content { padding: 22px; }
.draft-page-content h3 { font-size: 17px; margin-bottom: 4px; }
.draft-page-content > p { color: var(--muted); font-size: 13px; margin-bottom: 16px; }
.draft-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.draft-field-grid label { margin: 8px 0; font-size: 13px; }
.draft-field-grid input, .draft-field-grid select, .draft-field-grid textarea { margin-top: 6px; }
.draft-field-grid input:disabled, .draft-field-grid select:disabled { color: var(--muted); opacity: 1; background: var(--surface-low); }
.draft-field-grid .field-help { font-size: 11px; }
.draft-page-note { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; margin-top: 18px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--muted); background: var(--surface-low); font-size: 12px; line-height: 1.6; }
.draft-page-note .icon { width: 14px; height: 14px; margin-top: 2px; }
.preview-stage[data-viewport="mobile"] .draft-field-grid { grid-template-columns: 1fr; }
.preview-stage[data-viewport="mobile"] .draft-app-header { flex-wrap: wrap; }
.preview-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 42px; padding: 6px 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.preview-footer .icon-button { width: 26px; height: 26px; padding: 5px; }
.preview-footer .icon { width: 14px; height: 14px; }
.source-view { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--code-bg); color: var(--code-ink); }
.source-heading { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--code-toolbar-bg); color: var(--code-toolbar-ink); font-size: 12px; }
.source-heading .icon { width: 14px; height: 14px; }
#draft-json { margin: 0; padding: 18px; overflow: auto; flex: 1; font: 11px/1.8 var(--mono); white-space: pre; tab-size: 2; }

/* A reply reads under its small label; your own words sit in a grey bubble on the right. */
.agent-layout .message { font-size: 15px; line-height: 1.75; }
.agent-layout .message.assistant > .message-content { padding: 4px 0 0 32px; }
.agent-layout .message.assistant > .message-label { color: var(--ink); font-size: 13px; font-weight: 500; }
.agent-layout .message-label .icon { width: 24px; height: 24px; padding: 5px; }
.agent-layout .message.user { max-width: 80%; }
.agent-layout .message.user .message-content { padding: 12px 16px; }
.agent-layout .message.user .message-label { display: none; }
.agent-layout .message.assistant > .turn-usage { margin-left: 32px; }
.agent-layout .assistant-empty { padding-top: 56px; }
.agent-layout .assistant-empty h3 { font-family: var(--serif); font-size: 32px; font-weight: 700; letter-spacing: 0; }
.agent-layout .assistant-empty p { max-width: 420px; font-size: 15px; }

/* The Scraper: its conversation beside its workbench — the plan, the latest run, the files. */
.agent-layout[data-mode="scraper"] .workbench-panel { flex: 0 0 min(46%, 620px); border: 0; border-left: 1px solid var(--line); border-radius: 0; box-shadow: none; }
/* Beside the workbench, the conversation's 360px comes out of what the workbench leaves. */
.agent-layout[data-mode="scraper"] .conversation-history { width: clamp(180px, var(--history-width, 220px), min(400px, 100% - 361px - min(46%, 620px))); }
/* The action stack (.specs/59-ACTION-STACK.md): one 28px line per request — mark, words, then the
   count and the chevron pinned at the right edge as one unit — opening to every action, the agent's
   own text, each turn's tokens and Hide. Running words are ink and the spinner's arc the accent;
   settled ones are muted. Pulled into the thread's 28px gap so it reads with its message and reply,
   and out by the row's own 4px padding (the focus ring's room), so the mark sits on the reply's
   text and the chevron on the edge of the person's message. */
.message.action-stack { margin: -14px -4px -10px; font-size: 13px; line-height: 1.5; }
.agent-layout .message.action-stack { margin-left: 28px; font-size: 13px; line-height: 1.5; }
.action-stack-row { display: flex; align-items: center; gap: 8px; min-height: 28px; padding: 0 4px; border-radius: var(--radius-sm); color: var(--muted); cursor: pointer; list-style: none; }
.action-stack-row::-webkit-details-marker { display: none; }
.action-stack.running > .action-stack-row, .action-stack-row:hover { color: var(--ink); }
.action-stack-words { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.action-stack-end { display: flex; flex: none; align-items: center; gap: 6px; }
/* Muted, not faint: faint text is under the 4.5:1 floor in both themes. */
.action-stack-count { color: var(--muted); white-space: nowrap; }
.action-stack-end > .icon { width: 12px; height: 12px; color: var(--muted); transform: rotate(-90deg); transition: transform .15s; }
.action-stack[open] > .action-stack-row .action-stack-end > .icon { transform: none; }
.action-stack-mark { display: flex; flex: none; align-items: center; justify-content: center; width: 13px; height: 13px; }
.action-stack-mark .icon { width: 13px; height: 13px; }
.action-stack-mark.check .icon { color: var(--success-ink); }
.action-stack-mark.close .icon { color: var(--danger-ink); }
.action-stack-stop { width: 10px; height: 10px; border-radius: 2px; background: var(--muted); }
.action-stack-body { padding: 2px 4px 6px 25px; }
.action-stack-line > summary, div.action-stack-line { display: flex; align-items: center; gap: 8px; min-height: 26px; color: var(--muted); list-style: none; }
.action-stack-line > summary { cursor: pointer; }
.action-stack-line > summary::-webkit-details-marker { display: none; }
.action-stack-line.text > summary { color: var(--secondary); }
/* After the text line's colour, so hovering or opening it shows as it does on an action; a failed
   line stays red. */
.action-stack-line > summary:hover, .action-stack-line[open] > summary { color: var(--ink); }
.action-stack-line.failed > summary { color: var(--danger-ink); }
.action-stack-line-words { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.action-stack .tool-output { max-height: 180px; overflow: auto; white-space: pre-wrap; margin: 4px 0 8px 21px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--tool-output-bg); font: 11px/1.6 var(--mono); }
.action-stack .action-stack-text { margin: 4px 0 8px 21px; color: var(--secondary); font-size: 13px; }
/* The footers inside the stack are opened to be read: 12px muted, over the contrast floor. */
.action-stack .turn-usage { margin-top: 8px; padding-top: 8px; }
.action-stack .turn-label { font-weight: 500; }
.action-stack-hide { min-height: 28px; margin-top: 4px; padding: 0; border: 0; background: none; color: var(--muted); font-size: 12px; }
.action-stack-hide:hover, .action-stack-hide:focus-visible { background: none; text-decoration: underline; text-underline-offset: 3px; }
/* With less motion the spinner holds still (its accent arc still says "running"): the global rule's
   .01ms duration would spin an endless animation at random angles instead. */
@media (prefers-reduced-motion: reduce) { .live-step-spinner { animation: none; } }
.workbench-panel { display: flex; flex-direction: column; gap: 18px; min-width: 0; min-height: 0; overflow: auto; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }
.workbench-panel[hidden] { display: none; }
.workbench-section { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.workbench-heading { margin: 0; font-size: 11px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.workbench-empty { margin: 0; font-size: 13px; }
.workbench-plan { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.plan-item { display: flex; align-items: baseline; gap: 9px; font-size: 14px; line-height: 1.45; }
.plan-mark { flex: none; width: 14px; text-align: center; color: var(--faint); }
.plan-completed .plan-mark { color: var(--success-ink); }
.plan-completed .plan-title { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.plan-in_progress .plan-mark, .plan-in_progress .plan-title { color: var(--accent); font-weight: 600; }
.run-status { margin: 0; font-size: 14px; font-weight: 600; }
.run-ok { color: var(--success-ink); }
.run-failed { color: var(--danger-ink); }
.run-warning { margin: 0; padding: 6px 10px; border: 1px solid var(--warning-line); border-radius: var(--radius); background: var(--warning-soft); color: var(--warning-ink); font-size: 13px; }
.run-failure { margin: 0; max-height: 160px; overflow: auto; padding: 9px 11px; border-radius: var(--radius); background: var(--code-bg); color: var(--code-ink); font: 11px/1.55 var(--mono); white-space: pre-wrap; }
.field-fill { display: flex; flex-direction: column; gap: 5px; }
.field-fill-row { display: grid; grid-template-columns: minmax(70px, 150px) minmax(0, 1fr) 38px; gap: 9px; align-items: center; font-size: 12px; }
.field-fill-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); }
.field-fill-bar { height: 6px; overflow: hidden; border-radius: 3px; background: var(--surface-low); }
.field-fill-bar > span { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.field-fill-value { text-align: right; color: var(--muted); }
.run-preview { max-height: 230px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.run-preview table { width: 100%; border-collapse: collapse; font-size: 12px; }
.run-preview th { position: sticky; top: 0; background: var(--table-head-bg); font-weight: 500; }
.run-preview th, .run-preview td { max-width: 220px; overflow: hidden; padding: 5px 9px; border-bottom: 1px solid var(--line); text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.workbench-datasets { display: flex; flex-direction: column; gap: 8px; }
.workbench-dataset { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius); }
.workbench-dataset > div:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; }
.workbench-downloads { display: flex; flex: none; gap: 5px; }
.workbench-job { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 13px; }
.workbench-job-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.workbench-job > .workbench-tab { align-self: flex-start; }
.job-bar { display: flex; height: 8px; }
.job-bar > span { border-radius: 0; }
.job-bar > .job-failed { background: var(--danger-ink); }
.workbench-tabs { display: flex; flex-wrap: wrap; gap: 5px; }
.workbench-tab { padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font-size: 12px; cursor: pointer; }
.workbench-tab.active { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent); }
.workbench-code { max-height: 460px; margin: 0; overflow: auto; padding: 13px 15px; border-radius: var(--radius); background: var(--code-bg); color: var(--code-ink); font: 11px/1.75 var(--mono); white-space: pre; tab-size: 2; }

/* Request diagnostics retain their existing controls and data. */
.debug-page { margin: 24px; min-width: 0; overflow: auto; }
.debug-toggle { display: flex; gap: 10px; align-items: center; font-size: 14px; font-weight: 400; }
.debug-toggle input { width: 16px; height: 16px; flex: none; }
#debug-settings-form { max-width: 680px; }
#debug-settings-form details { margin: 20px 0; padding: 14px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); }
.debug-filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; margin: 15px 0; }
.debug-filters label { flex: 1; min-width: 140px; }
.debug-filters .debug-toggle { min-width: 230px; }
.debug-requests-table { width: 100%; }
.debug-requests-table td { vertical-align: top; overflow-wrap: anywhere; white-space: normal; }
.debug-requests-table td:first-child { max-width: 550px; }
.debug-requests-table .link-button { white-space: normal; text-align: left; }
.debug-requests-table small { display: block; font-size: 11px; }
.debug-warning { color: var(--warning-ink); background: var(--warning-soft); border: 1px solid var(--warning-line); padding: 12px; border-radius: var(--radius); }
.debug-dialog { width: min(1200px, 94vw); max-height: 90dvh; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--ink); background: var(--surface); box-shadow: var(--shadow-lg); overflow: auto; }
.debug-dialog::backdrop { background: var(--overlay); }
.debug-trace-header { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.debug-trace-header h2 { flex: 1; min-width: 250px; overflow-wrap: anywhere; }
.debug-request-id { display: block; overflow-wrap: anywhere; font-size: 12px; }
.debug-trace-summary { border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.debug-tabs { display: flex; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin: 16px 0; }
.debug-json { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 440px; overflow: auto; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; font: 11px/1.7 var(--mono); }
.debug-span { margin: 6px 0 6px 16px; border-left: 2px solid var(--line); padding-left: 10px; }
.debug-span > summary { cursor: pointer; padding: 6px; overflow-wrap: anywhere; }
.debug-span > summary span:first-child { font-weight: 500; margin-right: 16px; }
.debug-span > summary .muted { font-size: 12px; }
.debug-span.failed { border-color: var(--danger); }
.debug-span.interrupted { border-color: var(--warning); }
.debug-span.running { border-color: var(--accent); }
.debug-dialog details > summary { cursor: pointer; }
.debug-dialog td, .debug-dialog th { overflow-wrap: anywhere; white-space: normal; }
.debug-model-call { border: 1px solid var(--line); border-radius: var(--radius); margin: 16px 0; padding: 16px; }
.debug-model-call h3 { margin-top: 0; }
.debug-captured { border: 1px solid var(--line); border-radius: var(--radius-md); margin: 10px 0; padding: 10px; }
.debug-captured > summary { font-weight: 500; cursor: pointer; }
.debug-payload-controls { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.debug-provider-exchange { margin-top: 16px; padding-top: 4px; border-top: 1px solid var(--line); }
.debug-readable-messages { margin: 12px 0; }
.debug-feedback { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 12px; }
.debug-feedback form { display: grid; gap: 12px; max-width: 800px; }
.debug-feedback select { max-width: 240px; }
.debug-feedback textarea { width: 100%; min-height: 100px; }
.debug-feedback form > button { justify-self: start; }
#status { position: fixed; z-index: 80; right: 20px; bottom: 20px; max-width: min(520px, calc(100vw - 32px)); margin: 0; padding: 12px 16px; border: 1px solid var(--danger-line); border-radius: var(--radius); background: var(--surface); color: var(--danger-ink); box-shadow: var(--shadow-lg); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }
#status .link-button { display: block; color: inherit; font-size: 12px; margin-top: 5px; white-space: normal; }
#status:empty { display: none; }
#status.working { color: var(--ink); border-color: var(--line); }

@media (max-width: 1199px) {
  .overview { padding: 56px 24px 40px; }
  .home-prompt, .connection-attention { margin-bottom: 44px; }
  .recent-apps { gap: 12px; }
  .app-card { padding: 18px; }
  .app-card-heading { flex-wrap: wrap; }
  .workspace-header h1 { font-size: 26px; }
  .agent-layout[data-mode="scraper"] .workbench-panel { flex-basis: 42%; }
  .agent-layout[data-mode="scraper"] .conversation-history { width: clamp(180px, var(--history-width, 220px), min(400px, 58% - 361px)); }
  .record-layout { grid-template-columns: 120px minmax(0, 1fr); gap: 18px; }
}

@media (max-width: 960px) {
  .overview-hero h1 { font-size: 40px; }
  .overview-hero p { font-size: 15px; }
  .home-composer .keyboard-hint { display: none; }
  .recent-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-cards { grid-template-columns: 1fr; }
  .workspace-filters { flex-wrap: wrap; }
  .app-search { width: 100%; }
  .workspace-header { align-items: flex-start; }
  .workspace-header .page-actions { margin-top: 24px; }
  .workspace-summary { flex-wrap: wrap; }
  .workspace-metrics { width: 100%; padding-left: 52px; text-align: left; }
  .record-layout { grid-template-columns: 1fr; }
  .record-meta { display: none; }
  .message-composer .keyboard-hint { display: none; }
  /* The Scraper stacks its workbench under the conversation when there is no room beside it. */
  .agent-layout[data-mode="scraper"] { height: auto; }
  .agent-layout[data-mode="scraper"] .agent-panels { flex-direction: column; }
  .agent-layout[data-mode="scraper"] .panel-resizer { display: none; }
  .agent-layout[data-mode="scraper"] .conversation-history { width: clamp(180px, var(--history-width, 220px), 400px); }
  .agent-layout[data-mode="scraper"] .chat { min-height: 520px; }
  .agent-layout[data-mode="scraper"] .workbench-panel { flex-basis: auto; border-left: 0; border-top: 1px solid var(--line); }
  .debug-page { margin: 20px; padding: 20px; }
}

@media (max-width: 760px) {
  :root { --frame: calc(var(--navbar-height) + var(--banner-height)); }
  .mobile-only { display: inline-flex; }
  .desktop-only { display: none; }
  /* The rail and its panel are one drawer here, over a page that fills the screen edge to edge; the panel
     is always beside the rail (sidebar.js opens one with the drawer). */
  .app-sidebar { width: min(calc(var(--rail-width) + var(--panel-width)), calc(100vw - 32px)); transform: translateX(-100%); }
  body:not(.panel-pinned) .side-panel { top: 0; bottom: 0; left: var(--rail-width); width: auto; right: 0; border: 0; border-radius: 0; background: var(--sidebar-bg); box-shadow: none; }
  .side-panel { width: auto; right: 0; }
  .rail-tooltip { display: none; }
  .environment-rail { display: none; }
  body.sidebar-open .app-sidebar { transform: translateX(0); box-shadow: 8px 0 40px var(--tint-4); }
  body.sidebar-open { overflow: hidden; }
  .sidebar-backdrop { position: fixed; z-index: 35; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; padding: 0; background: var(--backdrop); }
  .sidebar-backdrop:hover { background: var(--backdrop); }
  /* Not animated back and forth: a resize into this width must land at full width in the same
     frame, not 200ms later. */
  .main-shell { height: 100dvh; margin: 0; border: 0; border-radius: 0; box-shadow: none; transition: none; }
  .navbar { display: flex; }
  :is(.settings-page, .desk-layout) > .page-header { top: calc(var(--navbar-height) + var(--banner-height)); }
  .search-palette { padding-top: 12px; }
  .overview { padding: 36px 16px 32px; }
  .overview-hero { margin-bottom: 22px; }
  .overview-hero h1 { font-size: 36px; }
  .overview-hero p { font-size: 15px; }
  .home-prompt, .connection-attention { margin-bottom: 36px; }
  .home-composer textarea { min-height: 96px; }
  .prompt-suggestions { gap: 6px; margin-top: 12px; }
  .home-empty { padding: 20px; flex-wrap: wrap; }
  .home-empty > .text-button { margin-left: 56px; }
  .workspace-header { gap: 12px; margin-bottom: 20px; }
  .workspace-header h1 { font-size: 24px; }
  .workspace-header .page-actions .icon-button { display: none; }
  .workspace-filters { gap: 12px; }
  .filter-tabs { width: 100%; }
  .filter-tabs button { flex: 1; }
  .app-card { padding: 18px; }
  .app-cards { gap: 12px; }
  .app-card-footer { margin-top: 4px; }
  .workspace-summary { padding: 18px; margin: 20px 0; }
  .workspace-footer { flex-wrap: wrap; }
  .page-actions { flex-wrap: wrap; }
  .form-section { padding: 18px; }
  .list-card th:first-child, .list-card td:first-child { padding-left: 16px; }
  .list-card th:last-child, .list-card td:last-child { padding-right: 16px; }
  /* On a phone the conversation list takes the conversation's place rather than squeezing it. */
  .agent-panels > .conversation-history { width: auto; flex: 1; }
  .panel-resizer { display: none; }
  .agent-layout[data-history="open"] .chat, .agent-layout[data-history="open"] .workbench-panel { display: none; }
  .agent-header { padding: 8px; gap: 4px; }
  .agent-tabs { padding: 0 8px; }
  .conversation-scroll { padding: 16px 12px; }
  .message-composer, .agent-footer, .mode-help { width: calc(100% - 24px); }
  .agent-layout .message { font-size: 14px; }
  .agent-layout .message.user { max-width: 90%; }
  .agent-layout .message.assistant > .message-content { padding-left: 0; }
  .agent-layout .message.assistant > .turn-usage { margin-left: 0; }
  .agent-layout .message.action-stack { margin-left: -4px; }
  .agent-layout .assistant-empty h3 { font-size: 26px; }
  .composer-tools { gap: 3px; }
  .composer-tools .model-picker select { max-width: 170px; }
  .preview-stage { padding: 12px; }
  .preview-empty { padding: 56px 20px; }
  .preview-toolbar { padding: 10px 12px; }
  .draft-page-content { padding: 18px; }
  .preview-footer { padding: 6px 12px; }
  .debug-page { margin: 16px; padding: 16px; }
  .debug-dialog { padding: 16px; }
  .debug-filters label { min-width: 120px; }
  .debug-span { margin-left: 8px; padding-left: 6px; }
  .debug-trace-header h2 { min-width: 100%; }
  .debug-requests-table { font-size: 12px; }
  #status { right: 16px; bottom: 16px; }
}

@media (max-width: 480px) {
  .overview { padding: 28px 14px 28px; }
  .overview-hero h1 { font-size: 32px; }
  .home-composer .model-picker { padding-left: 4px; }
  .home-composer .model-picker select { max-width: 150px; }
  .recent-apps { grid-template-columns: 1fr; }
  .recent-card > p { min-height: 0; }
  .home-empty { padding: 18px; gap: 12px; }
  .home-empty > .text-button { margin-left: 52px; }
  .workspace-header { flex-wrap: wrap; }
  .workspace-header .page-actions { margin-top: 0; }
  .filter-tabs button { font-size: 13px; padding: 4px 8px; }
  .app-card { padding: 16px; }
  .app-card-actions { width: 100%; margin: 0; justify-content: flex-end; }
  .field-grid { grid-template-columns: 1fr; }
  .form-section { padding: 16px; }
  .page-header { align-items: flex-start; }
  .list-tools { flex-wrap: wrap; }
  .agent-header .page-actions:not(:has(button:not([hidden]))) { display: none; }
  /* The conversation's title needs the room more than Export's label does; the icon stays. */
  .agent-header .page-actions button { padding: 6px 8px; }
  .agent-header .page-actions button > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .composer-tools .model-picker { padding: 0 2px 0 6px; gap: 3px; }
  .composer-tools .model-picker select { max-width: 115px; }
  .composer-tools .icon-button { width: 26px; padding: 5px; }
  .attachment-name { max-width: 140px; }
  .execution-picker select { width: 78px; }
  .composer-actions { gap: 4px; }
  .draft-field-grid { grid-template-columns: 1fr; }
  .draft-app-header { flex-wrap: wrap; padding: 14px; }
  .draft-app-header .badge { margin-left: 42px; }
  .draft-page-content { padding: 16px; }
  .preview-outline { gap: 5px; }
  .preview-empty { padding: 48px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Instructions and role capability administration */
.settings-page { max-width: none; margin: 0; padding: 0 16px 32px; min-width: 0; }
.settings-page .page-header { flex-wrap: wrap; }
.settings-page .page-header > div:first-child { flex: 1; min-width: 240px; }
.settings-page .page-header p { max-width: 760px; }
.settings-tabs { width: fit-content; margin: 4px 0 20px; }
/* The Settings page heads itself as a dashboard page does, over its row of outline tabs. */
.settings-eyebrow { margin: 0 -16px; padding: 18px 16px 2px; font-size: 16px; font-weight: 600; line-height: 24px; color: var(--ink); }
.settings-eyebrow + .settings-hub-tabs { margin-top: 0; }
.settings-page > .settings-section { min-width: 0; }
.settings-page > .debug-page { margin: 0; }
.settings-page > .settings-section > .page-header { margin: 4px 0 16px; }
.instruction-selection { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(200px, 2fr); gap: 20px; margin-bottom: 16px; }
.instruction-selection label { margin: 0; }
.instruction-selection select, .settings-page > section > label select { margin-top: 8px; }
.instruction-intro { margin: 20px 0 14px; }
.instruction-intro h2 { font-size: 18px; margin-bottom: 4px; }
.instruction-intro p { font-size: 14px; color: var(--muted); }
.instruction-form, .instruction-policy-form, .user-role-form { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }
.instruction-form label > select, .instruction-form label > textarea { margin-top: 8px; }
.instruction-form label:first-child { margin-top: 0; }
.instruction-form #instruction-text { min-height: 260px; resize: vertical; font: 13px/1.8 var(--mono); }
.instruction-eligibility { padding: 10px 14px; margin: 14px 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-low); color: var(--secondary); font-size: 13px; line-height: 1.6; }
.instruction-eligibility.eligible { color: var(--success-ink); background: var(--success-soft); border-color: var(--success-line); }
.settings-toggle { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; font-weight: 400; line-height: 1.6; margin: 10px 0; cursor: pointer; color: var(--secondary); }
.settings-toggle input[type="checkbox"] { flex: none; width: 16px; height: 16px; margin: 3px 0 0; }
.settings-form-footer { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; justify-content: space-between; padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--line); }
.settings-form-footer > span { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.settings-form-footer > button { margin-left: auto; }
.settings-status { font-size: 13px; margin: 12px 0 0; color: var(--success-ink); overflow-wrap: anywhere; }
.settings-status:empty { display: none; }
.settings-status.error, .instruction-eligibility.error { color: var(--danger); }
.instruction-current { margin-top: 20px; padding: 12px 14px; background: var(--surface-low); border: 1px solid var(--line); border-radius: var(--radius); }
.instruction-current > summary { color: var(--secondary); font-size: 13px; cursor: pointer; }
.instruction-current pre { max-height: 300px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.8 var(--mono); }
.instruction-source-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 20px 0 32px; }
.instruction-source-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow); }
.instruction-source-card h3 { font-size: 16px; }
.instruction-source-card p { font-size: 13px; color: var(--muted); }
.instruction-source-card .settings-toggle { margin-bottom: 0; }
.instruction-policy-panel > h2 { font-size: 18px; margin-bottom: 6px; }
.instruction-policy-panel > p { font-size: 14px; color: var(--muted); max-width: 850px; }
.role-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 4px 20px; padding: 12px 14px; margin: 14px 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-low); }
.role-checks .settings-toggle { margin: 5px 0; overflow-wrap: anywhere; }
.capability-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; padding: 18px 22px; margin: 24px 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); min-width: 0; }
.capability-group > legend { font-size: 14px; font-weight: 600; color: var(--ink); padding: 0 8px; }
.capability-row { padding: 2px 0 10px; min-width: 0; }
.capability-row > small { display: block; padding-left: 25px; font-size: 12px; color: var(--muted); line-height: 1.6; }
.capability-row .settings-toggle { margin-bottom: 6px; }
.capability-form > .settings-form-footer { padding: 0 0 16px; border: 0; }
.user-role-form > h2 { font-size: 18px; margin-bottom: 6px; }
.user-role-form > p { font-size: 14px; color: var(--muted); }
.settings-create { margin-top: 24px; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.settings-create > summary { color: var(--accent); font-size: 14px; font-weight: 500; cursor: pointer; }
.settings-create-form { max-width: 550px; margin-top: 18px; }
.settings-create-form label input { margin-top: 8px; }
.settings-create-form > button { margin-top: 8px; }
/* Both modes resolve context automatically from the message and the caller's permissions
   through the Context manager; the manual override element stays in the DOM (driven directly by
   instruction-scope tests) but is never shown. */
.scope-picker { display: none; }
.page-header { flex-wrap: wrap; }
.page-header .page-actions, .app-card-actions { flex-wrap: wrap; }

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.chip { display: inline-flex; align-items: center; padding: 0 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--secondary); font-size: 12px; font-weight: 500; line-height: 20px; white-space: nowrap; }
.chip.allowed { color: var(--success-ink); background: var(--success-soft); border-color: var(--success-line); }
.chip.denied { color: var(--faint); background: var(--surface-low); text-decoration: line-through; }
.settings-panel > h2, .settings-page > section > h2 { font-size: 18px; margin: 6px 0 6px; }
.settings-panel > p { font-size: 14px; color: var(--muted); max-width: 850px; }
.settings-panel > .table-scroll { margin: 18px 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.settings-panel > label { display: block; max-width: 520px; margin: 20px 0 8px; }
.settings-panel > label select { margin-top: 8px; }
.instruction-master-card { margin: 20px 0 32px; max-width: 760px; }
.instruction-source-links, .instruction-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.instruction-source-links button, .instruction-links button { padding: 5px 10px; font-size: 13px; }
.instruction-links { margin-top: 18px; }
.instruction-access { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.field-title { font-size: 14px; font-weight: 500; color: var(--ink); margin: 18px 0 6px; }
.role-detail { margin-top: 12px; }
.role-card { max-width: 760px; }
.role-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }
.role-card-head h3 { margin: 0 8px 0 0; }
.role-edit-form { margin-top: 16px; }
.role-edit-form label { display: block; margin-top: 12px; }
.role-edit-form label > input, .role-edit-form label > textarea { margin-top: 8px; width: 100%; }
.permission-form { margin-top: 16px; }
.permission-form .table-scroll { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.permission-table th, .permission-table td { text-align: center; }
.permission-table th:first-child, .permission-table td:first-child { text-align: left; }
.permission-table thead th { position: sticky; top: 0; }
.permission-table .role-cell { display: flex; flex-direction: column; gap: 1px; font-weight: 500; color: var(--ink); background: transparent; border-bottom: 1px solid var(--line); font-size: 13px; }
.permission-table .role-cell small { font-weight: 400; font-size: 12px; color: var(--muted); }
.permission-table tr.highlight > td { background: var(--accent-wash); }
.matrix-toggle { display: inline-flex; margin: 0; justify-content: center; }
.matrix-toggle input[type="checkbox"] { margin: 0; }
.permission-form > .settings-form-footer { border-top: 0; padding-top: 14px; margin-top: 0; }
.user-table, .role-table { min-width: 520px; }

@media (max-width: 960px) {
  .capability-group { grid-template-columns: 1fr; }
  .instruction-selection { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 760px) {
  .instruction-source-grid { grid-template-columns: 1fr; }
  .instruction-form, .instruction-policy-form, .user-role-form { padding: 18px; }
  .capability-group { padding: 15px; }
  .settings-tabs { width: 100%; flex-wrap: wrap; }
  .settings-tabs button { flex: 1; }
  .permission-table th, .permission-table td { padding: 10px 9px; }
  .role-checks { grid-template-columns: 1fr; }
  .instruction-form #instruction-text { min-height: 240px; font-size: 12px; }
  .page-header .page-actions { justify-content: flex-start; }
}

/* Model providers */
.provider-summary { margin: -8px 0 8px; font-size: 14px; color: var(--muted); }
#models h2 { margin: 28px 0 12px; font-size: 16px; }
.provider-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px 20px; margin-bottom: 12px; min-width: 0; box-shadow: var(--shadow); }
.provider-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.provider-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.provider-name h3 { margin: 0; font-size: 15px; }
.provider-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.provider-chip { padding: 0 8px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 20px; background: var(--surface-low); color: var(--secondary); }
.provider-chip.connected { background: var(--success-soft); color: var(--success-ink); border-color: var(--success-line); }
.provider-chip.muted-chip { color: var(--muted); }
.provider-description, .provider-note { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.provider-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 16px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-low); }
.provider-form label { display: grid; gap: 8px; margin: 0; font-size: 14px; font-weight: 500; color: var(--ink); }
.provider-form small { font-weight: 400; color: var(--muted); }
.provider-form-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.provider-form-actions a { font-size: 13px; color: var(--accent); }
.provider-form .settings-status { grid-column: 1 / -1; margin: 0; }
.provider-models { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.provider-speech { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.provider-speech h4 { margin: 0 0 4px; font-size: 14px; }
.capability-section { margin-top: 14px; }
.capability-section h4 { margin: 0 0 6px; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.capability-section .tool-output { max-height: 320px; overflow: auto; white-space: pre-wrap; margin: 0; padding: 10px; border: 1px solid var(--line); background: var(--tool-output-bg); border-radius: var(--radius); font: 11px/1.6 var(--mono); }
.capability-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.capability-table th { text-align: left; font-weight: 500; color: var(--muted); padding: 6px 8px 6px 0; border-bottom: 1px solid var(--line); background: transparent; }
.capability-table td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--line); vertical-align: top; word-break: break-word; white-space: normal; }

/* The run page's generic sections (capabilities.js header): a step, a question, progress, status rows. */
.capability-step { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.capability-step h4 { font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ink); margin-bottom: 8px; }
.capability-step p { margin: 0 0 4px; }
.capability-step-note { margin-top: 10px; }
.capability-step-note.error { color: var(--danger-ink); }
.capability-step-working .capability-actions { display: none; }
.capability-step-done { border-color: var(--success-line); background: var(--success-soft); }
.capability-step-failed { border-color: var(--danger-line); }
.capability-step-details { margin-top: 8px; }
.capability-step-details summary { cursor: pointer; font-size: 12px; color: var(--muted); }

.capability-progress-bar { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.capability-progress-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width 300ms ease-out; }
.capability-progress-line { margin: 8px 0 0; font-size: 13px; }

.capability-toolbar { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; flex-wrap: wrap; }
.capability-toolbar input { flex: 1 1 220px; max-width: 320px; min-height: 36px; }
.capability-count { font-size: 12px; white-space: nowrap; }
.capability-status-table td.num, .capability-status-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.capability-status-table td.status { white-space: nowrap; }
.capability-footer { margin: 8px 0 0; font-size: 12px; }
.capability-anchor { margin: 0 0 2px; font-size: 24px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.capability-checked { margin: 0 0 10px; font-size: 14px; }
.capability-collapsed summary { cursor: pointer; font-size: 13px; color: var(--muted); margin: 6px 0 8px; }
.capability-actions.capability-pager { align-items: center; margin-top: 10px; }
.capability-link a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.capability-link a:hover { text-decoration-thickness: 2px; }
/* Instances the kind folds away (discarded imports), after the rest of the list. */
.capability-fold { margin-top: 12px; }
.capability-fold > summary { cursor: pointer; font-size: 13px; color: var(--muted); margin: 6px 0 8px; }
.capability-fold > .provider-card { margin-top: 8px; }
.capability-page { font-size: 12px; font-variant-numeric: tabular-nums; }
.provider-chip.tone-success { color: var(--success-ink); background: var(--success-soft); border-color: var(--success-line); }
.provider-chip.tone-warning { color: var(--warning-ink); background: var(--warning-soft); border-color: var(--warning-line); }
.provider-chip.tone-danger { color: var(--danger-ink); background: var(--danger-soft); border-color: var(--danger-line); }
.capability-loading { margin: 8px 0 0; font-size: 13px; }
.status-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 500; border: 1px solid var(--line); color: var(--muted); background: var(--surface); }
.status-chip.status-ok { color: var(--success-ink); background: var(--success-soft); border-color: var(--success-line); }
.status-chip.status-differs { color: var(--danger-ink); background: var(--danger-soft); border-color: var(--danger-line); }
.status-chip.status-explained { color: var(--warning-ink); background: var(--warning-soft); border-color: var(--warning-line); }

.capability-choice { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); min-width: 0; }
.capability-choice legend { font-size: 15px; font-weight: 600; padding: 0 4px; }
.capability-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.capability-choice-explanation { margin: 0 0 10px; font-size: 13px; }
.capability-choice-note { margin: 0 0 10px; font-size: 13px; }
.capability-choice-note.error { color: var(--danger-ink); }
.capability-options { display: flex; flex-direction: column; gap: 8px; }
.capability-option { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 44px; padding: 10px 12px; text-align: left; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; }
.capability-option:hover:not(:disabled) { border-color: var(--accent); }
.capability-option:disabled { opacity: .6; cursor: default; }
.capability-option.recommended { border-color: var(--success-line); }
.capability-option-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 500; }
.capability-option-letter { color: var(--muted); font-variant-numeric: tabular-nums; }
.capability-option-description, .capability-option-writes { font-size: 12px; }
.capability-comment { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; font-size: 13px; }
.capability-comment textarea { width: 100%; min-height: 44px; font: inherit; resize: vertical; }
.capability-comment button { align-self: flex-end; min-height: 36px; }
.capability-choice-working { margin: 10px 0 0; font-size: 13px; }
.capability-choice-answered { padding: 10px 16px; }
.capability-choice-answered p { margin: 0; }
/* "Ask in chat" and "Change something" open a chat: they read as a link, not as muted text (/qa ISSUE-007). */
.capability-chat .text-button { min-height: 32px; font-size: 13px; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.capability-chat .text-button:hover { text-decoration-thickness: 2px; }
.capability-chat .text-button:disabled { color: var(--muted); text-decoration: none; }
.capability-view-bar { align-items: center; gap: 10px; }
.capability-view-title { font-size: 13px; font-weight: 500; }

/* A phone's width (design D14): the run page re-flows, it does not shrink. */
@media (max-width: 640px) {
  .capability-status-table, .capability-status-table tbody, .capability-status-table tr, .capability-status-table td { display: block; }
  .capability-status-table tr:first-child { display: none; }
  .capability-status-table tr { position: relative; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .capability-status-table td { border: 0; padding: 0; }
  .capability-status-table td:first-child { font-weight: 500; padding-right: 110px; }
  .capability-status-table td.status { position: absolute; right: 0; top: 8px; }
  .capability-status-table td.num { display: inline; text-align: left; font-size: 13px; color: var(--muted); white-space: normal; }
  .capability-status-table td.num::before { content: attr(data-label) " "; }
  .capability-status-table td.num + td.num::before { content: " · " attr(data-label) " "; }
  .capability-status-table td.num-last.nil { display: none; }
  .capability-comment button { align-self: stretch; }
  .capability-downloads, .capability-views { flex-direction: column; align-items: stretch; }
  .capability-downloads button, .capability-views button { width: 100%; min-height: 44px; }
  .capability-pager button, .capability-chat .text-button { min-height: 44px; }
  .capability-toolbar input { max-width: none; }
}
.capability-actions { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.provider-switches { display: flex; gap: 4px 24px; flex-wrap: wrap; }
.provider-switches .settings-toggle { margin: 4px 0; }
.provider-model-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 8px; }
.provider-model-toolbar input[type="search"] { flex: 1 1 220px; width: auto; }
.provider-count { font-size: 13px; white-space: nowrap; }
.provider-bulk { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.provider-select-all { padding: 6px 8px; font-size: 14px; white-space: nowrap; }
.provider-model-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2px 12px; max-height: 420px; overflow-y: auto; padding: 2px; }
.provider-model-list > p { grid-column: 1 / -1; font-size: 13px; }
.provider-model { display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 8px; border-radius: var(--radius-md); font-weight: 400; cursor: pointer; min-width: 0; }
.provider-model:hover { background: var(--surface-low); }
.provider-model input[type="checkbox"] { margin: 0; flex: none; }
.provider-model-text { display: grid; min-width: 0; flex: 1; }
.provider-model-label { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.provider-model code { font: 11px/1.4 var(--mono); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.provider-model:has(input:disabled) { cursor: default; opacity: .6; }
@media (max-width: 640px) {
  .provider-card { padding: 16px; }
  .provider-bulk { margin-left: 0; }
  .provider-model-list { grid-template-columns: 1fr; }
}

/* Child tables in the generated record form, and a submittable record's status. */
.table-field { grid-column: 1 / -1; margin: 6px 0 14px; }
.table-title { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 500; color: var(--ink); }
.table-control { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.table-control table { width: 100%; border-collapse: collapse; }
.table-control th { padding: 8px 10px; text-align: left; font-size: 12px; font-weight: 500; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table-control td { padding: 4px 6px; border-bottom: 1px solid var(--line); vertical-align: top; min-width: 120px; }
.table-control td:last-child { min-width: 0; width: 1%; white-space: nowrap; }
.table-control td input, .table-control td select { margin-top: 0; width: 100%; }
.table-control td input[type="checkbox"] { width: auto; }
.table-control > button { margin: 8px; }
.docstatus { display: inline-flex; align-items: center; margin-left: 12px; padding: 0 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-low); color: var(--muted); font-size: 12px; font-weight: 500; line-height: 20px; letter-spacing: 0; vertical-align: middle; }
.docstatus-submitted { background: var(--success-soft); color: var(--success-ink); border-color: var(--success-line); }
.docstatus-cancelled { background: var(--danger-soft); color: var(--danger-ink); border-color: var(--danger-line); text-decoration: line-through; }
/* A record made in the draft since its copy (.specs/55): practice, said in grey — the draft's amber
   is only its dot, its pill and the frame. */
.made-in-draft { display: inline-flex; align-items: center; margin-left: 8px; padding: 0 8px; border: 1px dashed var(--line-strong); border-radius: 999px; background: var(--surface-low); color: var(--secondary); font-size: 12px; font-weight: 500; line-height: 20px; letter-spacing: 0; vertical-align: middle; white-space: nowrap; }
h1 .made-in-draft { margin-left: 12px; }

/* Loading, twice over: the whole page before we know whether this load has a session, and the
   destination panel while a reloaded or deep-linked route fetches what it needs. */
.booting { gap: 16px; }
.booting .brand-mark { opacity: .9; }
.route-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 60vh; padding: 32px; }
.route-loading p { margin: 0; }
.route-spinner { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--accent); animation: route-spin .7s linear infinite; }
@media (prefers-reduced-motion: reduce) { .route-spinner { animation-duration: 2.4s; } }
@keyframes route-spin { to { transform: rotate(360deg); } }

/* Traces: runs, threads and one run's tree, in the manner of LLM tracing tools. */
.trace-page .page-header h1 { overflow-wrap: anywhere; }
.trace-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.trace-filters select { width: auto; }
.trace-chip { border: 1px solid var(--line); background: var(--surface); color: var(--secondary); border-radius: 999px; padding: 0 10px; font-size: 12px; line-height: 22px; cursor: pointer; }
.trace-chip:hover { background: var(--surface-low); }
.trace-table td, .trace-table th { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.trace-table .numeric { font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.trace-row { cursor: pointer; }
.trace-row:hover > td, .trace-row:focus-visible > td { background: var(--row-hover); }
.trace-row:focus-visible { outline: none; }
.trace-name { min-width: 220px; max-width: 360px; }
.trace-table td:not(.trace-name) { white-space: nowrap; }
.trace-name span:first-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.trace-name .trace-state { margin-top: 4px; }
.trace-model { font-family: var(--mono); font-size: 12px; color: var(--secondary); }
.trace-state { display: inline-flex; padding: 0 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-low); color: var(--muted); font-size: 12px; font-weight: 500; line-height: 20px; white-space: nowrap; text-transform: capitalize; }
.trace-state.success { background: var(--success-soft); color: var(--success-ink); border-color: var(--success-line); }
.trace-state.warning { background: var(--warning-soft); color: var(--warning-ink); border-color: var(--warning-line); }
.trace-state.danger { background: var(--danger-soft); color: var(--danger-ink); border-color: var(--danger-line); }
.trace-errors { text-transform: none; }
.trace-kind { display: inline-flex; padding: 0 8px; border-radius: var(--radius-sm); font: 600 11px/20px var(--mono); text-transform: uppercase; }
.trace-kind.chain, .trace-dot.chain, .trace-bar-fill.chain { --kind: var(--accent); }
.trace-kind.llm, .trace-dot.llm, .trace-bar-fill.llm { --kind: var(--warning); }
.trace-kind.tool, .trace-dot.tool, .trace-bar-fill.tool { --kind: var(--green); }
.trace-kind.model, .trace-dot.model, .trace-bar-fill.model { --kind: var(--warning-ink); }
.trace-kind.http, .trace-dot.http, .trace-bar-fill.http { --kind: var(--danger); }
.trace-kind.method, .trace-dot.method, .trace-bar-fill.method { --kind: var(--blue); }
.trace-kind.effect, .trace-dot.effect, .trace-bar-fill.effect, .trace-kind.hook, .trace-dot.hook, .trace-bar-fill.hook { --kind: var(--secondary); }
.trace-kind.sql, .trace-dot.sql, .trace-bar-fill.sql { --kind: var(--faint); }
.trace-kind { background: color-mix(in srgb, var(--kind) 14%, transparent); color: var(--kind); }
.trace-facts { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: -8px 0 16px; font-size: 13px; color: var(--muted); }
.trace-detail-facts { margin: 0 0 12px; }
.trace-split { display: grid; grid-template-columns: minmax(300px, 440px) minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); min-height: 480px; overflow: hidden; }
.trace-tree { border-right: 1px solid var(--line); padding: 8px; overflow: auto; max-height: 78vh; }
.trace-caption { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 6px 8px 10px; }
.trace-caption-controls { display: flex; align-items: center; gap: 10px; text-transform: none; letter-spacing: 0; font-size: 12px; }
.trace-toggle { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-weight: 400; cursor: pointer; }
.trace-toggle input { margin: 0; width: auto; }
.trace-link { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.trace-link:hover { background: none; }
.trace-node { display: block; width: 100%; text-align: left; background: none; border: 1px solid transparent; border-radius: var(--radius-md); padding: 5px 8px 5px calc(8px + var(--depth, 0) * 16px); cursor: pointer; color: inherit; position: relative; }
.trace-node:hover { background: var(--surface-low); }
.trace-node.selected { background: var(--surface-low); border-color: var(--line-strong); }
.trace-node:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -2px; }
.trace-node-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.trace-twisty { flex: none; width: 14px; background: none; border: 0; padding: 0; color: var(--muted); font-size: 11px; cursor: pointer; }
.trace-twisty:hover { background: none; }
.trace-twisty:disabled { cursor: default; }
.trace-node-name { font-weight: 500; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trace-count { margin-left: auto; font: 11px/1 var(--mono); color: var(--muted); background: var(--surface-low); padding: 3px 6px; border-radius: 999px; }
.trace-dot { flex: none; width: 9px; height: 9px; border-radius: 3px; background: var(--kind); }
.trace-dot.danger { box-shadow: 0 0 0 2px var(--danger-soft), 0 0 0 3px var(--danger); }
.trace-node-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 2px 0 0 29px; font: 11px/1.4 var(--mono); color: var(--muted); }
.trace-bar { position: relative; height: 3px; margin: 5px 0 0 29px; background: var(--surface-low); border-radius: 2px; overflow: hidden; }
.trace-bar-fill { position: absolute; top: 0; bottom: 0; background: var(--kind); border-radius: 2px; }
.trace-detail { padding: 16px 20px; min-width: 0; overflow: auto; max-height: 78vh; }
.trace-detail-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.trace-detail-head h2 { margin: 0; font-size: 18px; overflow-wrap: anywhere; }
.trace-section { border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 12px; background: var(--bg); }
.trace-section > summary { cursor: pointer; padding: 10px 12px; font-weight: 500; }
.trace-section > :not(summary) { margin: 0 12px 12px; }
.trace-message { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); padding: 10px 12px; margin-bottom: 8px; }
.trace-role { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.trace-message.user .trace-role { color: var(--accent); }
.trace-message.assistant .trace-role { color: var(--warning-ink); }
.trace-message.tool .trace-role { color: var(--success-ink); }
.trace-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.6 var(--mono); max-height: 360px; overflow: auto; }
.trace-call { margin-top: 8px; }
.trace-call-name { font: 600 12px/1.4 var(--mono); margin-bottom: 4px; }
.trace-json { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 420px; overflow: auto; background: var(--surface-low); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px; font: 11px/1.6 var(--mono); }
.trace-table td.trace-name { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 1180px) {
  .trace-runs :is(th, td):is(:nth-child(3), :nth-child(4), :nth-child(7)),
  .trace-threads :is(th, td):is(:nth-child(3), :nth-child(6)) { display: none; }
}
@media (max-width: 860px) {
  .trace-split { grid-template-columns: minmax(0, 1fr); }
  .trace-tree { border-right: 0; border-bottom: 1px solid var(--line); max-height: 40vh; }
  .trace-detail { max-height: none; padding: 14px; }
}

/* Query cards: a data answer as rows to page through, one record, one figure or totals. */
.query-card { margin-top: 10px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; box-shadow: var(--shadow); }
.qc-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.qc-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.qc-title strong { font-size: 14px; font-weight: 600; }
.qc-where { font-size: 12px; color: var(--muted); }
.qc-actions { display: flex; gap: 6px; align-items: center; }
.qc-action { font-size: 13px; padding: 4px 10px; }
.qc-table { width: 100%; }
.qc-table th, .qc-table td { padding: 7px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-size: 13px; }
.qc-table th { color: var(--ink); font-size: 12px; font-weight: 500; white-space: nowrap; }
.qc-table .numeric { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qc-count { color: var(--muted); }
.qc-open { font-weight: 500; text-align: left; white-space: normal; }
.qc-children > td { padding: 6px 12px 10px 28px; background: var(--surface-low); }
.qc-children-caption { display: flex; gap: 8px; align-items: baseline; font-size: 12px; margin-bottom: 4px; }
.qc-children-count { color: var(--muted); }
.qc-children .qc-table { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.qc-children .qc-table th, .qc-children .qc-table td { padding: 5px 10px; font-size: 12px; }
.qc-empty { padding: 14px; margin: 0; }
.qc-pager { display: flex; justify-content: center; align-items: center; gap: 12px; padding: 8px 12px; border-top: 1px solid var(--line); font-size: 13px; }
.qc-pager button { padding: 4px 12px; font-size: 13px; }
.qc-record { padding: 12px 14px; }
.qc-sheet { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 6px 18px; margin: 0; }
.qc-sheet dt { color: var(--muted); font-size: 13px; }
.qc-sheet dd { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.qc-children-block { margin-top: 14px; }
.qc-children-block h4 { margin: 0 0 6px; font-size: 13px; color: var(--secondary); }
.qc-stat { padding: 22px 14px; text-align: center; }
.qc-stat-value { font-size: 40px; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.qc-stat-label { margin-top: 6px; color: var(--muted); font-size: 13px; }
#page-view .query-card { margin-top: 0; }

/* Import and export dialogs. They reuse .debug-dialog's shell — one modal look in the Desk — and
   add only what a column picker, a preview grid and a progress bar need. */
.transfer-dialog { width: min(760px, 94vw); display: flex; flex-direction: column; gap: 16px; }
.transfer-dialog.transfer-wide { width: min(1180px, 96vw); }
.transfer-dialog-header { display: flex; align-items: center; gap: 12px; }
.transfer-dialog-header h2 { flex: 1; margin: 0; }
.transfer-dialog-body { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.transfer-dialog-footer { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 16px; }
/* A confirmation in the same shell: the question, what it means, and its two answers
   (`confirmDialog` in ui-kit.js; never the browser's own confirm()). */
.confirm-dialog { width: min(440px, 94vw); }
.confirm-dialog h2 { margin: 0; font-size: 17px; line-height: 1.35; overflow-wrap: anywhere; }
.confirm-dialog p { margin: 0; color: var(--muted); font-size: 14px; }
.transfer-status { margin: 0; min-height: 1.2em; font-size: 13px; color: var(--muted); }
.transfer-status.error { color: var(--danger-ink); }
.transfer-form { display: flex; flex-direction: column; gap: 16px; }
.transfer-field { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.transfer-field select, .transfer-field input[type="file"] { flex: 1 1 200px; }
.transfer-field p { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--muted); }
.transfer-label { flex-basis: 100%; font-size: 14px; font-weight: 500; color: var(--ink); }
.transfer-tools { display: flex; gap: 12px; }
.transfer-columns { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 16px; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px 16px; }
.transfer-columns legend { font-size: 13px; font-weight: 600; padding: 0 6px; color: var(--ink); }
.transfer-check { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 400; }
.transfer-check input { flex: none; }
.transfer-summary { display: flex; flex-wrap: wrap; gap: 8px; }
.transfer-summary .chip.danger, .chip.danger { color: var(--danger-ink); background: var(--danger-soft); border-color: var(--danger-line); }
.transfer-preview { font-size: 13px; }
.transfer-preview th { vertical-align: bottom; white-space: nowrap; }
.transfer-preview td { white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.transfer-header { display: block; font-weight: 600; }
.transfer-rownum { color: var(--muted); text-align: right; }
.transfer-map { width: 100%; min-width: 150px; font-size: 12px; }
.transfer-map.skipped { color: var(--muted); border-style: dashed; }
.transfer-warnings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow: auto; }
.transfer-warning { display: flex; gap: 10px; font-size: 13px; padding: 6px 10px; border-radius: var(--radius-md); border: 1px solid transparent; }
.transfer-warning strong { flex: none; min-width: 74px; font-weight: 600; }
.transfer-warning.info { color: var(--muted); background: var(--surface-low); }
.transfer-warning.warning { color: var(--warning-ink); background: var(--warning-soft); border-color: var(--warning-line); }
.transfer-warning.error { color: var(--danger-ink); background: var(--danger-soft); border-color: var(--danger-line); }
.transfer-bar { height: 8px; border-radius: 999px; background: var(--surface-low); overflow: hidden; }
.transfer-bar-fill { height: 100%; width: 0; border-radius: 999px; background: var(--accent); transition: width 240ms ease; }
.transfer-bar.done .transfer-bar-fill { background: var(--green); }
@media (max-width: 720px) {
  .transfer-columns { grid-template-columns: 1fr; }
}

/* The attachment card in a conversation. It sits beside #questions and .pending-action as a
   sibling of #messages — never inside it, which renderSession replaces wholesale — and takes the
   same card treatment. Sized for the chat column, so the dialog's own width classes stay out. */
.chat-transfer { margin: 18px 0 5px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-md); min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.chat-transfer-summary { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.chat-transfer-summary strong { overflow-wrap: anywhere; }
.chat-transfer-verdict { margin: 0; font-size: 14px; }
.chat-transfer-verdict.warn { color: var(--warning-ink); }
.chat-transfer-controls { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.chat-transfer-page { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--secondary); }
.chat-transfer-page select { max-width: 280px; }
.chat-transfer-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.chat-transfer-status { margin: 0; min-height: 1.2em; font-size: 13px; color: var(--muted); }
.chat-transfer-status.error { color: var(--danger-ink); }
.chat-transfer .table-scroll { max-height: 320px; }

/* ---------------------------------------------------------------- Builder's conversation
   What changed, in the conversation (.specs/54): its steps are lines inside the request's row
   (.specs/59), and a request ends on its change card. Tokens only; the card itself is drawn by
   changes.js (changes.css) — these rules only fit it into the conversation. */
/* In Builder red means one thing, a change that needs an OK: a step that failed, or a turn that
   didn't finish, says so in grey. */
.agent-layout[data-mode="builder"] .action-stack-line.failed > summary,
.agent-layout[data-mode="builder"] .action-stack-mark.close .icon,
.agent-layout[data-mode="builder"] .workbench-panel .run-failed { color: var(--muted); }
/* One fold per turn: each step's tokens, the totals, the skills and the trace links. */
.turn-details { margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.message.turn-details { margin: -12px 0 -4px; }
.turn-details > summary { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 4px; border-radius: var(--radius-sm); color: var(--muted); font-size: 12px; cursor: pointer; list-style: none; }
.turn-details > summary::-webkit-details-marker { display: none; }
.turn-details > summary:hover { color: var(--ink); }
.turn-details > summary .icon { width: 12px; height: 12px; transform: rotate(-90deg); transition: transform .15s; }
.turn-details[open] > summary .icon { transform: none; }
.turn-details > .turn-usage { margin-top: 6px; padding: 6px 4px 0; }
/* A request's card closes to its heading and count; its toggle sits at the heading's end. */
#messages .change-card-collapsible > .change-card-header { position: relative; padding-right: 40px; }
#messages .change-card-toggle { position: absolute; top: -4px; right: -8px; }
#messages .change-card-toggle .icon { transition: transform .15s; }
#messages .change-card-collapsed .change-card-toggle .icon { transform: rotate(-90deg); }
#messages .change-card-collapsed > :not(.change-card-header) { display: none; }
#messages .change-card { scroll-margin-top: 12px; }
/* A change asking for an OK: two choices that each answer at once, no free text. */
#questions.approval-question .question-head { justify-content: flex-start; }
.question-header-chip.approval-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--danger-soft); color: var(--danger-ink); }
.question-header-chip.approval-chip .icon { width: 12px; height: 12px; }
#questions .approval-option { min-height: 44px; align-items: center; }
#questions .approval-option.selected { border-color: var(--line-strong); background: var(--surface-low); }

/* ---- Live and the draft (.specs/55, web/environment.js) ---- */
.environment-dot { display: inline-block; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--success); }
.environment-dot.is-draft { background: var(--draft); }
/* The rail's switch, under its header: Live and Draft side by side, as a segmented control 36px
   high. Each side is as wide as its words ("Start a draft", "Draft 128" whole), sharing what is left. */
.environment-switch { padding: 8px 8px 0; }
.environment-segments { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--sidebar-line); border-radius: 999px; background: var(--surface-low); }
.environment-option { flex: 1 1 auto; min-width: 0; height: 30px; gap: 6px; padding: 0 10px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--sidebar-muted); font-size: 13px; white-space: nowrap; }
.environment-option > span:not(.environment-dot) { overflow: hidden; text-overflow: ellipsis; }
.environment-option:hover { background: var(--sidebar-hover); color: var(--ink); }
.environment-option[aria-pressed="true"] { background: var(--surface); border-color: var(--line); color: var(--ink); font-weight: 500; box-shadow: var(--shadow); }
.environment-option .icon { width: 14px; height: 14px; }
.environment-count { min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--draft); color: var(--on-draft); font-size: 11px; font-weight: 600; line-height: 16px; text-align: center; }
/* A draft that cannot be used now: its dot is a ring. */
.environment-option[data-status]:not([data-status="ready"]) .environment-dot.is-draft { background: transparent; box-shadow: inset 0 0 0 1.5px var(--draft); }
/* The rail and the phone: a pill that opens the same choice as a menu. */
.environment-pill { gap: 6px; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 500; box-shadow: var(--shadow); }
.environment-pill:hover { background: var(--surface-low); }
.environment-rail-pill { display: none; }
/* The whole switch sits at the foot of the menu panel; in the rail it is one pill */
.side-panel .environment-switch { margin-top: auto; padding: 8px 0 0; border-top: 1px solid var(--sidebar-line); }
/* In the rail the switch is one pill: a dot over a small "Live" or "Draft"; its count is in the menu it opens. */
.rail .environment-rail-pill { display: flex; flex-direction: column; justify-content: center; gap: 3px; width: 44px; height: 40px; padding: 0; margin: 0 auto; border-radius: var(--radius-md); box-shadow: none; font-size: 10px; font-weight: 500; line-height: 1; }
.rail .environment-rail-pill > .environment-count { display: none; }
.environment-menu { position: fixed; z-index: 95; width: 220px; padding: 4px; display: grid; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.environment-menu-item { justify-content: flex-start; gap: 10px; width: 100%; padding: 6px 8px; border-radius: var(--radius-sm); background: transparent; color: var(--secondary); text-align: left; }
.environment-menu-item:hover, .environment-menu-item:focus-visible { background: var(--surface-low); color: var(--ink); outline: none; }
.environment-menu-item[aria-checked="true"] { color: var(--ink); font-weight: 500; }
.environment-menu-item small { margin-left: auto; color: var(--muted); font-size: 12px; font-weight: 400; }
.environment-menu-item .icon { width: 14px; height: 14px; }
/* The menu's second part (.specs/55, P4): Publish…, Not published yet with its count, Live versions. */
.environment-menu-separator { height: 1px; margin: 4px -4px; background: var(--line); }
.environment-menu-action > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.environment-menu-count { min-width: 18px; text-align: right; font-variant-numeric: tabular-nums; }
/* Beside the rail's two sides: the button that opens the rest of the switch's menu. */
.environment-row { display: flex; align-items: center; gap: 4px; }
.environment-row > .environment-segments { flex: 1; min-width: 0; }
.environment-more { flex: none; width: 36px; height: 36px; padding: 0; border-radius: 999px; background: transparent; color: var(--sidebar-muted); }
.environment-more:hover { background: var(--sidebar-hover); color: var(--ink); }
.environment-more[aria-expanded="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.environment-more .icon { width: 15px; height: 15px; }

/* What sits above every page in the draft: the banner, then a notice. Sticky inside the content
   panel, which is the scroll container; its height is --banner-height. */
.environment-bar { position: sticky; top: 0; z-index: 25; }
/* The banner: a neutral fill, the solid amber "Draft" pill, the draft's own words. */
.draft-banner { padding: 7px 16px; border-bottom: 1px solid var(--line); background: var(--surface-low); color: var(--secondary); font-size: 13px; line-height: 20px; }
.draft-banner-line { display: flex; align-items: center; gap: 10px; min-width: 0; }
.draft-pill { display: inline-flex; align-items: center; flex: none; height: 20px; padding: 0 8px; border-radius: 999px; background: var(--draft); color: var(--on-draft); font-size: 12px; font-weight: 600; letter-spacing: .01em; }
.draft-banner-text { flex: 1; min-width: 0; margin: 0; }
.draft-banner-text strong, .draft-banner-full strong { color: var(--ink); font-weight: 500; }
.draft-banner-count { flex: none; color: var(--muted); }
.draft-banner-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.draft-banner-actions .text-button { padding: 0; gap: 4px; color: var(--secondary); text-decoration: underline; text-underline-offset: 3px; }
.draft-banner-actions .text-button:hover { color: var(--ink); }
.draft-banner-actions .icon, .draft-banner-toggle .icon { width: 14px; height: 14px; }
.draft-banner-more-toggle[aria-expanded="true"] .icon, .draft-banner-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.draft-banner-toggle { display: none; gap: 4px; padding: 0; background: transparent; color: var(--secondary); font-size: 13px; }
.draft-banner-toggle:hover { background: transparent; color: var(--ink); }
.draft-banner-more { padding: 6px 0 2px 58px; }
.draft-banner-full { display: none; margin: 0 0 6px; }
.draft-banner-list { display: grid; gap: 2px; margin: 0; padding-left: 18px; color: var(--secondary); }
.draft-banner-command { margin: 8px 0 0; }
.draft-banner-command code, .draft-start-command code { padding: 1px 6px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); font: 12px/18px var(--mono); }
/* Must fix: an amber chip and words; red stays "Needs your OK". */
.draft-must-fix { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border: 1px solid var(--draft-line); border-radius: 999px; background: var(--draft-soft); color: var(--draft-ink); font-size: 12px; font-weight: 600; vertical-align: middle; }
/* A notice about a switch: one neutral line, an action and a close. */
.environment-notice { display: flex; align-items: center; gap: 12px; padding: 6px 8px 6px 16px; border-bottom: 1px solid var(--line); background: var(--surface); font-size: 13px; }
.environment-notice-text { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; margin: 0; color: var(--ink); }
.environment-notice-action { padding: 0; color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.environment-notice-close { width: 32px; height: 32px; padding: 8px; }
/* The frame says it too: a 2px amber ring round the content panel. */
body.in-draft .main-shell { border-color: var(--draft); outline: 1px solid var(--draft); }
/* A draft that cannot be used now has nothing to navigate to. */
body.draft-unavailable :is(.rail-nav, .rail-apps, .utility-nav) { display: none; }
.draft-state-body { display: grid; justify-items: start; gap: 4px; max-width: 640px; }
.draft-state-body p { margin: 0 0 8px; }
.draft-state-body .page-actions { display: flex; gap: 8px; margin-top: 8px; }
/* Start a draft: what one is, and the command the operator runs. */
.draft-start-dialog { width: min(600px, 94vw); }
.draft-start-body > p { margin: 0; color: var(--secondary); }
.draft-start-list { display: grid; gap: 8px; margin: 0; padding-left: 20px; color: var(--secondary); }
.draft-start-how { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-low); }
.draft-start-how h3 { margin: 0 0 6px; font-size: 14px; }
.draft-start-how p { margin: 0 0 10px; color: var(--secondary); font-size: 13px; }
.draft-start-how p.muted { margin: 10px 0 0; color: var(--muted); }
.draft-start-command { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.draft-start-command code { padding: 6px 10px; font-size: 13px; overflow-wrap: anywhere; }

/* Refreshing and deleting the draft (.specs/55, P5): the switch menu's heads-up and requests, the
   operator's message, asking an administrator, and the actions a state page offers. */
.environment-menu-note { margin: 2px 4px 4px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-low); color: var(--secondary); font-size: 12px; line-height: 1.5; }
.environment-menu-requests { display: grid; }
.environment-menu-requests:empty { display: none; }
.draft-message { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-low); }
.draft-message-lead { grid-column: 1 / -1; margin: 0; color: var(--secondary); font-size: 13px; }
.draft-message-text { margin: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: 13px/1.6 var(--mono); overflow-wrap: anywhere; user-select: all; }
.draft-message-copy { display: inline-flex; align-items: center; gap: 6px; }
.draft-message-copy .icon { width: 14px; height: 14px; }
.draft-start-how .draft-message { margin-top: 10px; }
.draft-ask-notes { margin: 0 0 10px; font-size: 13px; }
.draft-ask-notes textarea { margin-top: 6px; }
.draft-ask-said { margin: 10px 0 0; color: var(--success-ink); font-size: 13px; }
.draft-ask-said.is-problem { color: var(--warning-ink); }
.draft-ask-said[hidden] { display: none; }
.draft-start-kept { margin-top: 10px; }
.draft-state-body .page-actions { flex-wrap: wrap; }
/* A conversation told something between its messages: the draft was refreshed under it. */
.conversation-note { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.conversation-note::before, .conversation-note::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.conversation-note-text { flex: none; max-width: 80%; text-align: center; overflow-wrap: anywhere; }

@media (max-width: 760px) {
  .environment-bar { top: var(--navbar-height); }
  /* The phone's frame is the screen's edge: the ring is drawn inside it. */
  body.in-draft .main-shell { border: 2px solid var(--draft); outline: 0; }
  body.in-draft { --frame: calc(var(--navbar-height) + var(--banner-height) + 4px); }
  .navbar .environment-pill { flex: none; padding: 0 8px; }
  .draft-banner { padding: 6px 12px; }
  /* "Draft · test copy", opening on tap to the whole sentence and what is held. */
  .draft-banner-toggle { display: inline-flex; flex: none; white-space: nowrap; }
  .draft-banner-text, .draft-banner-more-toggle { display: none; }
  .draft-banner-line { flex-wrap: nowrap; }
  .draft-banner-actions { margin-left: auto; }
  /* "Draft · test copy · 12 changes · Publish": the bar's pill switches sides. */
  .draft-banner-actions:has(.draft-banner-publish) .draft-banner-live { display: none; }
  /* Held by a refresh or a delete: "Draft · read-only · Decide what to keep", the pill the same. */
  .draft-banner-actions:has(.draft-banner-lifecycle) .draft-banner-live { display: none; }
  /* "Draft · test copy · 12 changes": with a count on the line, the pill is the way back to live;
     and on the narrowest phones the count is what gives way, never the line scrolling sideways. */
  .draft-banner-line:has(.draft-banner-count) .draft-banner-live { display: none; }
  .draft-banner-count { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .draft-banner-more { padding: 6px 0 2px; }
  .draft-banner-full { display: block; }
  .environment-notice { padding-left: 12px; flex-wrap: wrap; }
  .draft-message { grid-template-columns: minmax(0, 1fr); }
}

/* A Builder conversation on live while Builder works in the draft (.specs/55): a neutral note
   over the composer, with the one way on — a new conversation in the draft, the request ready. */
.continue-draft { flex: none; display: flex; align-items: center; gap: 12px; width: calc(100% - 48px); max-width: 768px; margin: 0 auto 8px; padding: 8px 8px 8px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-size: 13px; }
.continue-draft[hidden] { display: none; }
.continue-draft-text { flex: 1; min-width: 0; margin: 0; color: var(--muted); line-height: 1.5; }
.continue-draft-text strong { color: var(--ink); font-weight: 600; }
.continue-draft-button { flex: none; display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 760px) {
  .continue-draft { width: calc(100% - 24px); flex-wrap: wrap; }
  .continue-draft-button { width: 100%; justify-content: center; }
}

/* Connections (.specs/56): the Connect card a conversation waits on, a connection's code as a diff,
   what the Publish screen asks for one, and Builder's workbench beside its conversation. */
#questions.connect-card { display: flex; flex-direction: column; gap: 10px; }
#questions.connect-card .question-head { margin-bottom: 0; }
.connect-chip { display: inline-flex; align-items: center; gap: 5px; }
.connect-chip .icon { width: 12px; height: 12px; }
.connect-why, .connect-where, .connect-saved, .connect-hosts { margin: 0; font-size: 13px; line-height: 1.6; color: var(--secondary); overflow-wrap: anywhere; }
.connect-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 500; }
.connect-field input, .connect-field select { height: 36px; }
.connect-field small { font-weight: 400; }
.connect-scopes { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-low); font-size: 13px; }
.connect-scopes-lead { margin: 0 0 6px; color: var(--muted); }
.connect-scopes ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.connect-scopes li { padding: 0 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font: 11px/20px var(--mono); }
.connect-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.connect-choice { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 13px; cursor: pointer; }
.connect-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); }
.connect-consent { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.5; color: var(--secondary); }
.connect-consent[hidden] { display: none; }
.connect-actions { margin-top: 4px; }
.capability-code > summary { cursor: pointer; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.capability-code > .tool-output { margin-top: 6px; }
.capability-section .capability-diff, .capability-code .capability-diff { white-space: pre; }
.diff-line { display: block; }
.diff-added { background: var(--success-soft); color: var(--success-ink); }
.diff-removed { background: var(--danger-soft); color: var(--danger-ink); }
.diff-hunk { color: var(--accent); }
.diff-file { color: var(--muted); font-weight: 600; }
.capability-text { white-space: pre-line; }
/* A form chosen from a list (Capabilities › Accounts): the choice, then its fields. */
.capability-create > label { display: grid; gap: 8px; max-width: 420px; margin-top: 12px; font-size: 14px; font-weight: 500; color: var(--ink); }
.capability-create .capability-create-help { grid-column: 1 / -1; margin: 0; }
.capability-create .settings-status a { color: var(--accent); }
.publish-inputs { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-low); font-size: 13px; }
.publish-input { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; }
.publish-input input, .publish-input select { height: 32px; }
.publish-check-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin: 6px 0 10px; }
.publish-check-field { display: flex; flex-direction: column; gap: 4px; min-width: 220px; font-size: 13px; font-weight: 500; }
.publish-check-field small { font-weight: 400; }
.publish-check-status { flex-basis: 100%; margin: 0; font-size: 12px; color: var(--muted); }
.publish-check-status:empty { display: none; }
.publish-draft-link { display: inline-flex; align-items: center; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow); color: var(--ink); font-size: 13px; text-decoration: none; }
.publish-draft-link:hover { background: var(--surface-low); }
.publish-input-label { white-space: nowrap; }
.agent-layout[data-mode="builder"] .workbench-panel { flex: 0 0 min(40%, 560px); border: 0; border-left: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.workbench-cases, .workbench-records { display: flex; flex-direction: column; gap: 4px; margin: 0; padding-left: 18px; font-size: 13px; }
.workbench-records a { color: var(--accent); }
.workbench-technical > summary, .workbench-show-code > summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.workbench-show-code > .workbench-tabs { margin: 8px 0; }
@media (max-width: 960px) {
  .agent-layout[data-mode="builder"] .workbench-panel { flex-basis: auto; border-left: 0; border-top: 1px solid var(--line); }
}
.connection-attention-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.connection-attention-list li { display: flex; align-items: center; gap: 8px; color: var(--warning-ink); }
.connection-attention-list .icon { flex: none; width: 14px; height: 14px; }
.connection-attention-item { text-align: left; color: var(--ink); }

/* Reports: the show_report card in a conversation, the report view and the Reports list
   (docs/designs/results-as-cards-and-context-at-scale.md, design review 19A–23A). One flat frame,
   no shadow, nothing nested; the table's frame is the card's. */
.message.tool.has-card { color: var(--ink); font-size: 14px; }
.report-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; scroll-margin-top: 12px; }
/* Focused by script when a link back from the report view lands on it: an inset ring, kept inside the clipped frame. */
.report-card:focus { outline: none; }
.report-card:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; }
.report-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 16px 0; }
.report-card-title { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.report-card-title:hover, .report-card-title:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.report-card-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 10px; flex: none; }
.report-action { height: 28px; padding: 0 2px; font-size: 13px; font-weight: 500; color: var(--secondary); text-decoration: none; background: transparent; border: 0; }
/* A link drawn as a text button sits on the same line as the buttons beside it. */
a.text-button, .report-action { display: inline-flex; align-items: center; line-height: 20px; }
.report-action:hover, .report-action:focus-visible { color: var(--ink); background: transparent; text-decoration: none; }
.report-danger { color: var(--danger-ink); }
.report-card-definition, .report-card-totals { margin: 2px 16px 0; font-size: 12px; line-height: 16px; color: var(--muted); }
.report-card-totals { color: var(--secondary); margin-bottom: 2px; }
.report-card-body { margin-top: 10px; border-top: 1px solid var(--line); min-width: 0; }
.report-card-reserved { min-height: 120px; display: flex; align-items: center; justify-content: center; }
.report-card-state { display: flex; align-items: center; gap: 8px; margin: 0; padding: 16px; font-size: 13px; color: var(--secondary); }
.report-card-failed .report-card-state { color: var(--danger-ink); }
.report-card-empty .report-action, .report-card-failed .report-action { margin: 0 16px 12px; }
.report-table { overflow: hidden; }
.report-table table { font-size: 13px; }
/* Scoped to the card so it outweighs the thread's own cell padding. */
.message .report-table-compact :is(td, th) { padding: 6px 8px; }
.report-table th:first-child, .report-table td:first-child { padding-left: 16px; }
.report-table th:last-child, .report-table td:last-child { padding-right: 16px; }
.report-table td.report-text { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.report-table .num { text-align: right; font-variant-numeric: tabular-nums; }
/* Wide enough for a three-digit rank (a ranked report has at most 100 rows). */
.report-table .report-rank { box-sizing: border-box; width: 48px; min-width: 48px; max-width: 48px; padding-right: 8px; color: var(--muted); font-size: 12px; }
.report-table-dim { position: relative; }
.report-table-dim tbody { opacity: .5; }
.report-table-dim::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--accent); }
.report-totals-row td { font-weight: 600; border-top: 1px solid var(--line-strong); background: var(--surface-low); }
.report-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; border-top: 1px solid var(--line); font-size: 12px; line-height: 16px; color: var(--muted); }
.report-card-phrase { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.report-card-failed ~ .report-card-foot .report-card-phrase { color: var(--danger-ink); }
.report-pager { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.report-pager-button { width: 28px; height: 28px; padding: 4px; }
.report-pager-button span { font-size: 16px; line-height: 1; }
.report-pager-range { font-variant-numeric: tabular-nums; padding: 0 2px; }
@media (max-width: 480px) {
  .report-card-head { flex-direction: column; }
  .report-card-actions { justify-content: flex-start; }
  .report-card-foot { flex-direction: column; align-items: flex-start; }
}
/* Load earlier at the top of a long conversation (16A). */
.load-earlier { align-self: center; height: 28px; }
.load-earlier-error .conversation-note-text { color: var(--danger-ink); }
.load-earlier-retry { flex: none; height: 28px; }
/* The report view. */
.report-view-head .report-view-title { display: inline-flex; align-items: center; gap: 8px; }
.report-view-title-button { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: text; text-align: left; }
.report-view-title-button:hover, .report-view-title-button:focus-visible { background: none; text-decoration: underline; text-underline-offset: 4px; }
/* The pencil says the title can be renamed: muted, which keeps 3:1 against the page in both themes. */
.report-view-title .icon { width: 14px; height: 14px; color: var(--muted); }
.report-view-title:hover .icon, .report-view-title:focus-within .icon { color: var(--ink); }
.report-view-title-input { font-size: 16px; font-weight: 600; line-height: 24px; width: min(100%, 520px); }
.report-view-provenance a { color: var(--accent); text-decoration: none; }
.report-view-provenance a:hover { text-decoration: underline; text-underline-offset: 3px; }
.report-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 8px; }
.report-chip { height: 28px; max-width: 240px; gap: 4px; padding: 0 4px 0 10px; font-size: 12px; line-height: 20px; }
.report-chip .icon { width: 12px; height: 12px; }
.report-chip-words { padding: 0; border: 0; background: none; font: inherit; color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.report-chip-words:hover, button.report-chip-words:focus-visible { background: none; color: var(--ink); }
.report-chip-remove { width: 24px; height: 24px; padding: 5px; border: 0; background: none; color: var(--muted); border-radius: 999px; }
.report-chip-remove:hover, .report-chip-remove:focus-visible { color: var(--ink); background: var(--surface-high); }
.report-chip-remove .icon { width: 12px; height: 12px; }
.report-inline-error { margin: 0 0 8px; font-size: 13px; color: var(--danger-ink); }
.report-add-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; padding: 8px 0; }
.report-add-filter select, .report-add-filter input { height: 36px; }
.report-script-panel { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; }
.report-script { width: 100%; min-height: 200px; font: 13px/1.5 var(--mono); color: var(--code-ink); background: var(--code-bg); border: 1px solid var(--code-line); border-radius: var(--radius); padding: 10px; }
.report-view-tools { padding: 8px 0; }
.report-columns { position: relative; }
.report-columns-menu { position: absolute; right: 0; top: 32px; z-index: 5; min-width: 220px; max-height: 320px; overflow: auto; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-md); }
.report-columns-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 0; border-radius: var(--radius-sm); background: none; font-size: 13px; color: var(--ink); text-align: left; }
.report-columns-item:hover, .report-columns-item:focus-visible { background: var(--surface-low); }
.report-columns-item .icon { width: 14px; height: 14px; color: var(--accent); }
.report-columns-blank { display: inline-block; width: 14px; height: 14px; }
.report-view-table .report-table { overflow: auto; }
.report-view-table .report-table :is(th:first-child:not(.report-rank), td:first-child:not(.report-rank), .report-rank + th, .report-rank + td) { position: sticky; left: 0; background: var(--surface); z-index: 1; }
/* A rank column stays at the left too, and the lead column sticks just after it rather than over it. */
.report-view-table .report-table .report-rank { position: sticky; left: 0; background: var(--surface); z-index: 1; }
.report-view-table .report-table :is(.report-rank + th, .report-rank + td) { left: 48px; }
.report-view-table .report-table :is(th:first-child:not(.report-rank), .report-rank + th, th.report-rank) { background: var(--table-head-bg); }
.report-view-table .report-table .report-totals-row :is(td:first-child, td.report-rank, .report-rank + td) { background: var(--surface-low); }
.report-view-pager { justify-content: flex-end; width: 100%; padding: 8px 0; }
.report-view-status:empty { display: none; }
.report-list-empty { padding: 40px 24px; }
.report-list-remove { width: 40px; text-align: right; }
@media (max-width: 480px) {
  /* The lead column keeps 120px; a rank column before it is not the lead and keeps its 32px. */
  .report-view-table .report-table :is(th:first-child:not(.report-rank), td:first-child:not(.report-rank), .report-rank + th, .report-rank + td) { min-width: 120px; max-width: 120px; }
}

/* Voice on the Chat page (web/voice.js). */
.voice-panel { margin: 0 0 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; display: grid; gap: 6px; font-size: 13px; }
.voice-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.voice-head .voice-state { color: var(--muted); flex: 1; }
.voice-heard { margin: 0; min-height: 1.3em; }
.voice-reply { margin: 0; min-height: 1.3em; white-space: pre-wrap; }
.voice-typed { display: flex; gap: 6px; }
.voice-typed input { flex: 1; min-width: 0; }
.voice-form, .voice-log { margin: 4px 0 0; max-height: 160px; overflow: auto; padding: 8px; border-radius: 6px; background: var(--surface-2, rgba(127,127,127,.12)); font-size: 12px; white-space: pre-wrap; word-break: break-word; }
.voice-note { margin: 0; font-size: 12px; }
.voice-table { margin-top: 6px; overflow: auto; max-height: 260px; }
.voice-grid { border-collapse: collapse; font-size: 12px; width: 100%; }
.voice-grid th, .voice-grid td { text-align: left; padding: 3px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.voice-summary { margin: 0 0 4px; font-weight: 600; }
.voice-confirm:empty { display: none; }
.voice-setting { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--muted); font-size: 12px; font-weight: 400; cursor: pointer; }
.voice-setting input { margin: 0; }
/* Every question of an agent.waiting frame, answered by one frame. */
.voice-questions:empty { display: none; }
.voice-questions { display: grid; gap: 8px; max-height: 420px; overflow-y: auto; }
.voice-questions-head { margin: 0; }
.voice-question { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); }
.voice-question legend { padding: 0 4px; font-weight: 500; }
.voice-question-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; }
.voice-stage { padding: 0 8px; border-radius: 999px; background: var(--surface-low); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font-weight: 500; line-height: 20px; }
.voice-stage.required { background: var(--warning-soft); box-shadow: inset 0 0 0 1px var(--warning-line); color: var(--warning-ink); }
.voice-stage.choose { background: var(--accent-soft); box-shadow: none; color: var(--accent); }
.voice-options { display: flex; flex-direction: column; gap: 4px; max-height: 200px; padding: 2px; overflow-y: auto; overscroll-behavior: contain; }
.voice-option { flex-direction: column; align-items: flex-start; gap: 0; padding: 5px 10px; border-color: var(--line); background: var(--surface); text-align: left; font-size: 13px; }
.voice-option.selected { border-color: var(--accent); background: var(--accent-wash); }
.voice-option small { font-size: 12px; }
.voice-skip { justify-self: start; padding: 3px 10px; font-size: 12px; }
.voice-skip[aria-pressed="true"] { background: var(--surface-high); }
.voice-question-actions { display: flex; justify-content: flex-end; }
.voice-question-error, .voice-file-error { margin: 0; color: var(--danger-ink); font-size: 12px; line-height: 1.5; }
.voice-files { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.voice-file { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 2px 4px 2px 8px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; }
.voice-file span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-file .icon-button { width: 22px; height: 22px; padding: 4px; }
.voice-confirm { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 8px; border-radius: 6px; background: var(--surface-2, rgba(127,127,127,.12)); }