/* Botling's design tokens: the one set of colours the app shell (desktop/src/renderer/styles.css),
   the chat page (chat.css) and the component kit (Web/kit) all use. Change a colour here and all
   three follow. Each of those stylesheets imports this file on its first line; the
   builds put its text in place of that line (Web/kit/build.mjs inlineTokens), so nothing loads it
   separately. Dark is the default; [data-theme="light"] is the light set (component pages carry
   data-theme; Botling 2's app page and chat page set it from Settings → Appearance → App,
   desktop/src/renderer/theme.ts). The values are the Swift app's (Theme.swift); the ones after
   --codex are the shell's and chat's own surfaces, named so the light set can change them too. */
:root {
  --ground: #0E0E10;
  --side: #141417;
  --bubble: #1B1B1F;
  --user-bubble: #2B2B31;
  --notice: #16161A;
  --selected: #26262C;
  --hover: #1F1F24;
  --line: #232327;
  --text: #EDEDF0;
  --muted: #A0A0A8;
  --faint: #8E8E96;
  --chip: #2A2A31;
  --blue: #4C8DFF;
  --link: #8DB5FF;
  --green: #4CC38A;
  --orange: #F2A64A;
  --orange-line: #6B4A1F;
  --orange-text: #F7C27F;
  --error: #FF8A80;
  --code: #111114;
  --border: #2E2E35;
  --raised: #2C2C33;
  --claude: #D97757;
  --codex: #6E9BFF;
  --popover: #1F1F24;
  --strong-line: #3A3A42;
  --active: #2B3B5C;
  --info-bg: #1A2233;
  --info-line: #2B3B5C;
  --accent-bg: #1E2A44;
  --accent-bg-hover: #26375A;
  --accent-line: #2F4F8F;
  --card: #232328;
  --card-line: #303037;
  --waiting-bg: #2A2116;
  --done-bg: #15291F;
  --stale-bg: #2E1B1A;
  --verify: #8FD9B6;
  --verify-bg: #16261E;
  --selection: #33415E;
  --slash-bg: #1C1C20;
  --slash-line: #29292F;
  --hover-strong: #33333B;
  --soft-text: #C8C8CE;
  --panel-ground: #111318;
  --panel-text: #E5E7EB;
  --panel-line: #454850;
  /* How strong black shadows and dimming backdrops are: rgb(0 0 0 / calc(.45 * var(--shade))). */
  --shade: 1;
}
:root[data-theme="light"] {
  --ground: #F5F5F7;
  --side: #EDEDF0;
  --bubble: #FFFFFF;
  --user-bubble: #E9E9EE;
  --notice: #F0F0F3;
  --selected: #E2E2E8;
  --hover: #EAEAEE;
  --line: #E3E3E8;
  --text: #1C1C1F;
  --muted: #5F5F68;
  --faint: #7A7A83;
  --chip: #EEEEF2;
  --blue: #2F6FE0;
  --link: #2F6FE0;
  --green: #1E8A55;
  --orange: #B26A00;
  --orange-line: #E8C79A;
  --orange-text: #9A5B00;
  --error: #D0342C;
  --code: #F2F2F5;
  --border: #DADADF;
  --raised: #FFFFFF;
  --claude: #C2603F;
  --codex: #3D6FE0;
  --popover: #FFFFFF;
  --strong-line: #CFCFD6;
  --active: #DCE7FB;
  --info-bg: #E6EEFC;
  --info-line: #B9CEF5;
  --accent-bg: #EAF1FF;
  --accent-bg-hover: #DCE7FB;
  --accent-line: #B9CEF5;
  --card: #FFFFFF;
  --card-line: #DADADF;
  --waiting-bg: #FFF4E2;
  --done-bg: #E3F4EA;
  --stale-bg: #FCE8E6;
  --verify: #1E8A55;
  --verify-bg: #E3F4EA;
  --selection: #CFDDF8;
  --slash-bg: #FFFFFF;
  --slash-line: #E3E3E8;
  --hover-strong: #E2E2E8;
  --soft-text: #3F3F46;
  --panel-ground: #FFFFFF;
  --panel-text: #1C1C1F;
  --panel-line: #DADADF;
  --shade: 0.35;
  color-scheme: light;
}
/* Botling 2.0's app chrome (the left column, the chat area's header). The chat itself is the
   Web/src chat page with its own chat.css. Colours are Web/src/tokens.css (the Swift app's,
   Theme.swift), shared with the chat page and the component kit; desktop/build.mjs puts them in
   place of the import. */
:root {
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ground); color: var(--text); }
body {
  font: 15px/1.5 -apple-system, "PingFang TC", "Noto Sans TC", "Segoe UI", sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
#root { height: 100%; }

.shell { height: 100%; display: flex; }
.drag { -webkit-app-region: drag; }

/* The left column (SidePanels.swift BotRow: 48 pt rows, a 32 pt face, 15 pt names). */
.rail { width: 248px; flex-shrink: 0; display: flex; flex-direction: column; background: var(--side); border-right: 1px solid var(--line); }
.rail-top { height: 40px; flex-shrink: 0; }
.bots { flex: 1; overflow-y: auto; padding: 4px 10px 10px; display: flex; flex-direction: column; gap: 2px; scrollbar-width: none; }
.bot-row {
  display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 10px; border: 0; border-radius: 12px;
  background: transparent; cursor: pointer; text-align: left; -webkit-app-region: no-drag;
}
.bot-row:hover { background: var(--hover); }
.bot-row.selected { background: var(--selected); }
.bot-avatar { width: 32px; height: 32px; flex-shrink: 0; }
.bot-name { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bot-name.main { font-weight: 600; }
.bot-row.asleep .bot-name { color: var(--muted); }
.bot-gap { flex: 1; }
.bot-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.bot-dot.working { background: var(--blue); }
.badge {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 600; background: var(--blue); color: #fff;
}
.badge.waiting { background: var(--orange); color: #1A1206; }

/* The chat area: a slim header over the chat page. */
.chat-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.chat-header { height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; }
.chat-title { font-weight: 600; }
.chat-status { color: var(--faint); }
.chat-status[data-status="working"] { color: var(--blue); }
.chat-status[data-status="waiting"], .chat-status[data-status="disconnected"], .chat-status[data-status="retrying"] { color: var(--orange); }
.board-switch-bar { display: flex; justify-content: center; flex-shrink: 0; padding: 10px 0 6px; }
.board-switch { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--chip); border-radius: 9px; background: var(--bubble); -webkit-app-region: no-drag; }
.board-switch button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 24px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 12px; cursor: pointer; }
.board-switch button:hover { color: var(--text); }
.board-switch button[aria-pressed="true"] { background: var(--selected); color: var(--text); }
.board-switch button:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
#chat-frame { flex: 1; width: 100%; border: 0; display: block; background: var(--ground); }

.banner { max-width: 640px; margin: 0 auto; padding: 6px 24px; font-size: 12.5px; color: var(--error); }
.banner.bottom { position: absolute; left: 0; right: 0; bottom: 92px; text-align: center; pointer-events: none; }
.core-swap { max-width: 640px; margin: 0 auto; padding: 6px 24px; font-size: 12.5px; color: var(--muted); text-align: center; }

/* Which heads a bot has (1.x's `engineNames`), beside its name. */
.chat-heads { font-size: 12px; color: var(--muted, #8b8f98); padding: 1px 8px; border: 1px solid currentColor; border-radius: 999px; opacity: 0.8; }
.rounds-bar { max-width: 640px; margin: 0 auto; padding: 4px 24px; font-size: 12.5px; color: var(--muted); display: flex; gap: 10px; align-items: center; }
.rounds-bar button { background: none; border: 1px solid var(--line); color: var(--text); border-radius: 999px; padding: 1px 10px; font-size: 12px; cursor: pointer; }
.rounds-bar button:hover { background: var(--hover); }

/* The header's buttons from plugins (right side; Routines is one), and the popover under each. */
.chat-actions { position: absolute; right: 14px; top: 8px; display: flex; gap: 6px; -webkit-app-region: no-drag; }
.header-button { background: none; border: 1px solid var(--line); border-radius: 999px; padding: 1px 10px; font-size: 12px; color: var(--muted); cursor: pointer; }
.header-button:hover { background: var(--hover); color: var(--text); }
.header-button.on { background: var(--selected); color: var(--text); }
.header-view { position: relative; }
.header-view-panel {
  position: absolute; right: 0; top: 30px; z-index: 20; width: 360px; max-height: 420px; overflow-y: auto;
  background: var(--bubble); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 12.5px;
  box-shadow: 0 8px 28px rgb(0 0 0 / calc(0.45 * var(--shade, 1)));
}

/* The rail's Plugins button and the plugins panel (1.x: Settings → Plugins), in the routines panel's look. */
.rail-plugins { position: relative; padding: 6px 10px 8px; border-top: 1px solid var(--line); }
.rail-button { width: 100%; text-align: left; background: none; border: 0; border-radius: 10px; padding: 6px 10px; font-size: 13px; color: var(--muted); cursor: pointer; display: flex; align-items: center; gap: 8px; }
.rail-button:hover, .rail-button.on { background: var(--hover); color: var(--text); }
.rail-update { padding: 0 10px 4px; }
.rail-update .rail-button { color: var(--text); }
.rail-update .rail-button.error { color: var(--error); }
.rail-update .rail-button:disabled { cursor: default; opacity: 0.8; }
.rail-update-bar { height: 2px; margin: 2px 10px 0; border-radius: 1px; background: var(--chip); overflow: hidden; }
.rail-update-bar > span { display: block; height: 100%; background: var(--orange); transition: width 0.3s; }
.rail-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.plugins-panel, .plugin-panel {
  position: fixed; left: 258px; bottom: 16px; z-index: 30; width: 440px; max-height: 72vh; overflow-y: auto;
  background: var(--bubble); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px 12px; font-size: 12.5px;
  box-shadow: 0 8px 28px rgb(0 0 0 / calc(0.45 * var(--shade, 1)));
}
.plugin-panel { width: 520px; height: 70vh; display: flex; flex-direction: column; overflow: hidden; }
.plugin-panel-frame { flex: 1; width: 100%; border: 0; border-radius: 8px; background: var(--bubble); }
.plugins-head { display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 13px; margin-bottom: 8px; }
.plugins-close { background: none; border: 0; color: var(--muted); font-size: 16px; cursor: pointer; padding: 0 4px; }
.plugins-close:hover { color: var(--text); }
.plugins-panel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.plugin, .plugins-broken { padding: 8px 10px; background: var(--side); border-radius: 10px; }
.plugins-broken { margin-top: 8px; }
.plugin[data-enabled="0"] .plugin-title { color: var(--muted); }
.plugin-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plugin-title { font-weight: 600; font-size: 13px; }
.plugin-version, .plugin-meta { color: var(--faint); font-weight: 400; }
.plugin-meta { margin-top: 2px; }
.plugin-description { color: var(--muted); margin-top: 2px; }
.plugin-toggle { display: flex; align-items: center; gap: 4px; color: var(--muted); cursor: pointer; }
.plugin-setting { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.plugin-setting-title { color: var(--muted); }
.plugin-setting input[type="text"], .plugin-setting input[type="number"], .plugin-setting input[type="password"], .plugin-setting select {
  background: var(--ground); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 2px 8px; font-size: 12px; width: 170px;
}
.plugin-secret { display: flex; gap: 4px; align-items: center; }
.plugin-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.plugin-buttons button, .plugin-secret button { background: var(--chip); border: 0; border-radius: 8px; padding: 2px 10px; font-size: 12px; cursor: pointer; }
.plugin-buttons button:hover:not(:disabled), .plugin-secret button:hover:not(:disabled) { background: var(--selected); }
.plugin-buttons button:disabled, .plugin-secret button:disabled { opacity: 0.5; cursor: default; }
.plugins-problem { color: var(--error); margin: 2px 0 6px; }
.plugins-result { color: var(--green); margin: 2px 0 6px; }
.plugins-empty { color: var(--faint); margin: 2px 0; }
.plugins-ask { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.plugins-starters { display: flex; flex-wrap: wrap; gap: 6px; }
.plugins-starter, .plugins-ask-send { font: inherit; cursor: pointer; }
.plugins-ask-text { font: inherit; resize: vertical; }

/* Settings (SettingsWindow.swift): a sheet with the sections on the left, 1.x's 900×640. */
.rail-settings { padding: 0 10px 8px; }
.sidebar-settings { display: flex; align-items: center; gap: 6px; }
.sidebar-settings > .rail-button { flex: 1; }
.sidebar-settings .strip-gear.on { color: var(--text); background: var(--selected); }
.sidebar-settings-popover { position: fixed; z-index: 60; width: min(300px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow-y: auto; padding: 14px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 12px; background: var(--bubble); color: var(--text); box-shadow: 0 12px 36px rgb(0 0 0 / calc(0.53 * var(--shade, 1))); font-size: 14px; }
.sidebar-settings-popover header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.sidebar-settings-popover header button { border: 0; background: transparent; color: var(--muted); font-size: 20px; cursor: pointer; }
.sidebar-settings-switch { display: flex; gap: 12px; align-items: center; justify-content: space-between; min-height: 34px; }
.sidebar-settings-switch input { appearance: none; position: relative; width: 28px; height: 16px; flex-shrink: 0; margin: 0; border: 1px solid var(--muted); border-radius: 20px; background: var(--chip); cursor: pointer; }
.sidebar-settings-switch input::before { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.sidebar-settings-switch input:checked { background: var(--blue); border-color: var(--blue); }
.sidebar-settings-switch input:checked::before { transform: translateX(12px); background: white; }
.sidebar-settings-switch input:disabled { opacity: .5; cursor: default; }
.sidebar-settings-switch input:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.sidebar-settings-links { border-top: 1px solid var(--line); padding-top: 6px; }
.sidebar-settings-links button { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 34px; padding: 6px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.sidebar-settings-links button:hover { background: var(--hover); }
.sidebar-settings-links button span:last-child { color: var(--faint); }
.sidebar-settings-links .all-settings { color: var(--blue); }
.settings-backdrop { position: fixed; inset: 0; z-index: 50; background: rgb(0 0 0 / calc(0.5 * var(--shade))); display: flex; align-items: center; justify-content: center; }
.settings { width: min(980px, calc(100vw - 32px)); height: min(700px, calc(100vh - 32px)); display: flex; background: var(--ground); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 16px 48px rgb(0 0 0 / calc(0.55 * var(--shade, 1))); }
.settings-side { width: 220px; flex-shrink: 0; background: var(--side); border-right: 1px solid var(--line); padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.settings-search { margin-bottom: 10px; background: var(--ground); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 5px 9px; font-size: 13px; }
.settings-tab { text-align: left; background: none; border: 0; border-radius: 8px; padding: 6px 10px; font-size: 13px; color: var(--muted); cursor: pointer; display: flex; align-items: center; gap: 8px; }
.settings-tab:hover { background: var(--hover); color: var(--text); }
.settings-tab.on { background: var(--selected); color: var(--text); }
.settings-new { font-size: 10px; background: var(--blue); color: #fff; border-radius: 999px; padding: 0 6px; }
.settings-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.settings-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px 8px; border-bottom: 1px solid var(--line); }
.settings-header h2 { font-size: 16px; margin: 0; }
.settings-done { background: var(--blue); color: #fff; border: 0; border-radius: 8px; padding: 3px 14px; font-size: 13px; cursor: pointer; }
.settings-body { flex: 1; overflow-y: auto; padding: 8px 20px 20px; }
.settings-problem { color: var(--error); margin: 8px 20px 0; font-size: 13px; }
.settings-group { margin-top: 14px; }
.settings-group h3 { font-size: 12px; font-weight: 600; color: var(--muted); margin: 0 0 6px 4px; }
.settings-card { background: var(--side); border: 1px solid var(--line); border-radius: 10px; padding: 4px 12px; }
.settings-note { color: var(--faint); font-size: 12px; margin: 4px 4px 0; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.settings-row:last-child { border-bottom: 0; }
.settings-hint { color: var(--faint); font-size: 11.5px; margin-top: 2px; }
/* Settings → Usage (Phase 5c, 1.x's usage page). */
.usage-number { font-variant-numeric: tabular-nums; }
.usage-faint { color: var(--muted); font-variant-numeric: tabular-nums; }
.usage-line { display: flex; gap: 12px; align-items: baseline; }
.usage-cost { min-width: 72px; text-align: right; }
.usage-limits { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-variant-numeric: tabular-nums; }
.usage-stale { color: var(--faint); font-size: 11px; }
.settings-control { display: flex; align-items: center; gap: 8px; }
.settings-control select, .settings-control input[type="text"], .settings-control input[type="number"], .settings-prompt textarea {
  background: var(--ground); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 3px 8px; font-size: 12.5px;
}
.settings-control input[type="text"] { width: 200px; }
.settings-control select:disabled { opacity: 0.5; }
.settings-control input[type="number"] { width: 70px; }
.settings-control button, .settings-actions button { background: var(--chip); border: 0; border-radius: 8px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.settings-actions { padding: 6px 0; }
.settings-actions button:disabled { opacity: 0.5; cursor: default; }
.agy-runtime-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.agy-runtime-actions button { min-height: 28px; }
.agy-runtime-actions button:not(.settings-done) { box-shadow: inset 0 0 0 1px var(--border); }
.agy-runtime-actions .settings-done { background: var(--blue); color: #fff; }
.agy-runtime-actions button:hover:not(:disabled) { filter: brightness(1.1); }
.agy-runtime-actions button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.settings-prompt { padding: 8px 0; font-size: 13px; }
.settings-prompt textarea { width: 100%; margin-top: 6px; resize: vertical; font: inherit; font-size: 12.5px; }
.settings-tag { font-size: 11px; color: var(--muted); background: var(--chip); border-radius: 6px; padding: 0 6px; margin-left: 6px; }
.settings-preview { display: flex; gap: 12px; padding: 8px 0; align-items: flex-end; }
.segmented { display: inline-flex; background: var(--ground); border: 1px solid var(--line); border-radius: 8px; padding: 2px; gap: 2px; flex-wrap: wrap; }
.segmented button { background: none; border: 0; border-radius: 6px; padding: 2px 9px; font-size: 12px; color: var(--muted); cursor: pointer; }
.segmented button.on { background: var(--selected); color: var(--text); }
.segmented button:disabled { opacity: 0.5; cursor: default; }
/* Settings in four groups (settings-pages.ts); plugins' pages indented under Plugins. */
.settings-nav-group { display: flex; flex-direction: column; gap: 2px; }
.settings-nav-title { font-size: 11px; font-weight: 600; color: var(--faint); padding: 10px 10px 4px; }
.settings-nav-group:first-of-type .settings-nav-title { padding-top: 2px; }
.settings-tab.indent { padding-left: 22px; font-size: 12.5px; }
.settings-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 4px 6px; }
.settings-group-head h3 { margin: 0 !important; }
.settings-group-head .settings-tag { margin-left: 0; }
.settings-group-action { margin-left: auto; }
.settings-link { all: unset; color: var(--blue); cursor: pointer; font-size: 12px; }
.settings-link:hover { text-decoration: underline; }
.settings-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 3px; }
.settings-link:disabled { opacity: .5; cursor: default; }
.settings-lead { margin: 12px 4px 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.settings-actions-end { display: flex; justify-content: flex-end; }
.settings-avatar-preview { border-radius: 50%; }
.settings-row.own .settings-hint { color: var(--blue); }
.settings-row.own .settings-control select { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, var(--bubble)); }
.effort-segmented button { padding: 2px 8px; }
/* Appearance: a card per theme with a small picture of the app in that look. */
.theme-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.theme-card { display: flex; flex-direction: column; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--bubble); color: var(--text); font-size: 12.5px; cursor: pointer; text-align: center; }
.theme-card.on { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.theme-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.theme-thumb { height: 56px; border-radius: 6px; display: flex; overflow: hidden; border: 1px solid var(--line); }
.theme-thumb-side { width: 30%; }
.theme-thumb-main { flex: 1; padding: 8px; display: flex; flex-direction: column; gap: 5px; }
.theme-thumb-main span { height: 6px; border-radius: 3px; width: 70%; }
.theme-thumb-main span + span { width: 50%; }
.theme-thumb-light { background: #F5F5F7; } .theme-thumb-light .theme-thumb-side { background: #EDEDF0; } .theme-thumb-light .theme-thumb-main span { background: #FFFFFF; } .theme-thumb-light .theme-thumb-main span + span { background: #E2E2E8; }
.theme-thumb-dark { background: #0E0E10; } .theme-thumb-dark .theme-thumb-side { background: #141417; } .theme-thumb-dark .theme-thumb-main span { background: #1B1B1F; } .theme-thumb-dark .theme-thumb-main span + span { background: #2A2A31; }
.theme-thumb-system { background: linear-gradient(90deg, #F5F5F7 50%, #0E0E10 50%); } .theme-thumb-system .theme-thumb-side, .theme-thumb-system .theme-thumb-main { display: none; }
/* Permissions: one card per engine, the same two-step choice; Full access in orange (told apart by lightness too). */
.permission-card { margin-top: 14px; background: var(--side); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.permission-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.permission-head h3 { margin: 0; font-size: 13.5px; font-weight: 650; }
.permission-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; font-size: 12.5px; line-height: 1.5; }
.permission-choice { background: var(--bubble); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.permission-choice.full { background: color-mix(in srgb, var(--orange) 12%, var(--bubble)); }
.permission-choice.full strong { color: var(--orange); }
.permission-card .settings-hint, .permission-card .settings-problem { margin: 0; }
/* Models & workers. */
.models-workers { display: flex; flex-direction: column; gap: 14px; padding-top: 12px; }
.models-workers .settings-group { margin-top: 0; }
.mw-explain { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.mw-explain-card { display: flex; gap: 10px; align-items: flex-start; background: var(--bubble); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.mw-explain-card svg { flex-shrink: 0; }
.mw-explain-card p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.mw-icon-head { color: var(--blue); } .mw-icon-workers { color: var(--green); }
.mw-picker { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.mw-tabs { display: flex; background: var(--chip); border-radius: 10px; padding: 3px; gap: 3px; }
.mw-tabs button { border: 0; border-radius: 8px; padding: 6px 16px; font-size: 13px; background: transparent; color: var(--muted); cursor: pointer; }
.mw-tabs button.on { background: var(--bubble); color: var(--text); font-weight: 600; box-shadow: 0 1px 3px rgb(0 0 0 / calc(0.25 * var(--shade, 1))); }
.mw-tabs button:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.mw-tab-note { font-size: 11px; color: var(--faint); font-weight: 400; }
.mw-card { background: var(--side); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.mw-table { display: flex; flex-direction: column; font-size: 13px; }
.mw-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1fr); border-bottom: 1px solid var(--line); }
.mw-row > * { padding: 9px 12px; min-width: 0; }
.mw-row-head { font-weight: 600; }
.mw-row-label { color: var(--muted); padding-top: 13px; }
.mw-cell { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.mw-cell select { max-width: 100%; background: var(--bubble); color: var(--text); border: 1px solid var(--line); border-radius: 7px; padding: 4px 8px; font-size: 13px; }
.mw-cell select:disabled { opacity: .5; }
.mw-workers-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.mw-follow { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; font-size: 12px; color: var(--muted); }
.mw-readonly { font-size: 12.5px; color: var(--muted); background: var(--chip); border-radius: 7px; padding: 4px 8px; }
.mw-inline-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; font-size: 12.5px; }
.mw-inline-toggle .settings-hint { display: block; }
.mw-guide { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; padding: 12px; background: var(--bubble); border-bottom: 1px solid var(--line); }
.mw-guide-card { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.mw-guide-card.on { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, var(--bubble)); }
.mw-guide-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; }
.mw-guide-top span { color: var(--muted); font-size: 12px; }
.mw-guide-good { line-height: 1.45; }
.mw-rows { padding: 0 12px; }
.mw-table + .mw-rows { border-top: 0; }
.mw-agy { display: flex; flex-direction: column; gap: 8px; }
.mw-agy-status { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.mw-ok { color: var(--green); } .mw-warn { color: var(--orange); }
.mw-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.mw-engine-checks { display: flex; gap: 8px; flex-wrap: wrap; }
.mw-check { display: inline-flex; align-items: center; gap: 6px; background: var(--bubble); border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; font-size: 13px; }
.mw-own { padding: 4px 0; font-size: 13px; }
.mw-own-toggle { all: unset; box-sizing: border-box; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; cursor: pointer; min-height: 32px; }
.mw-own-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.mw-own-toggle .settings-hint { display: block; }
.mw-own-list { border-top: 1px solid var(--line); margin-top: 4px; }
.mw-own-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; flex-wrap: wrap; }
.mw-own-row strong { font-weight: 600; }
.mw-own-diff { display: inline; }
.mw-own-actions { display: flex; gap: 12px; }
.mw-apply { padding: 8px 0 4px; }
.plugins-list ul { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; }

/* "Add project" and "New bot" under the bots (SidePanels.swift's bottom row). */
.rail-add { padding: 0 10px 6px; display: flex; flex-wrap: wrap; gap: 2px; }
.rail-add .rail-button { width: auto; flex: 0 1 auto; white-space: nowrap; }
.rail-add .new-bot-button { margin-left: auto; }

/* A bot and its subagent rows (SubagentRows / SubagentRow: 30 pt rows, 26 pt in, 13 pt titles). */
.bot-entry { display: flex; flex-direction: column; gap: 2px; }
.subagent-rows { display: flex; flex-direction: column; }
.task-agents { margin: 4px 0; display: flex; flex-direction: column; gap: 5px; }
.task-agents > summary { cursor: pointer; font-size: 12px; color: var(--faint); list-style: none; display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.task-agents > summary::-webkit-details-marker { display: none; }
.task-agents-on { color: var(--green); }
.task-agent { position: relative; display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; color: var(--text); background: var(--hover); border: 1px solid transparent; border-radius: 8px; padding: 8px 24px 8px 8px; font: inherit; cursor: pointer; }
.task-agent:hover, .task-agent:focus-visible { border-color: var(--muted); }
.task-agent[data-status="running"] { border-left-color: var(--green); }
.task-agent.unavailable { cursor: default; opacity: .7; }
.task-agent-title { overflow-wrap: anywhere; }
.task-agent-meta { color: var(--muted); font-size: 11px; }
.task-agent-open { position: absolute; right: 8px; top: 8px; color: var(--muted); }
.subagent-row { display: flex; align-items: center; border-radius: 10px; -webkit-app-region: no-drag; }
.subagent-row:hover { background: var(--hover); }
.subagent-row.selected, .subagent-row.selected:hover { background: var(--selected); }
.subagent-rows.nested { margin-left: 14px; }
.subagent-kind { margin-left: 6px; flex: none; font-size: 10px; line-height: 1; padding: 2px 5px; border-radius: 999px; border: 1px solid var(--border, currentColor); opacity: .7; }
.chat-parent { background: none; border: 0; padding: 0; font: inherit; color: inherit; opacity: .65; cursor: pointer; -webkit-app-region: no-drag; }
.chat-parent:hover { opacity: 1; text-decoration: underline; }
.chat-parent-sep { opacity: .5; }
.subagent-open {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 4px 0 26px;
  background: none; border: 0; color: var(--muted); font-size: 13px; text-align: left; cursor: pointer;
}
.subagent-row.running .subagent-open { color: var(--text); }
.subagent-arrow { color: var(--faint); display: inline-flex; flex-shrink: 0; }
.subagent-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.subagent-network { flex-shrink: 0; font-size: 11px; color: var(--orange); }
.subagent-owner {
  width: 24px; height: 24px; flex-shrink: 0; position: relative; display: inline-flex; align-items: center; justify-content: center;
}
.subagent-owner img { width: 24px; height: 24px; object-fit: contain; }
.subagent-owner-badge {
  position: absolute; right: 0; bottom: 0; width: 10px; height: 10px; border-radius: 50%;
  background: var(--side); color: var(--text); font-size: 7px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.subagent-settle { width: 24px; height: 30px; margin-right: 6px; flex-shrink: 0; background: none; border: 0; padding: 0; cursor: pointer; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; }
.subagent-settle .settle-icon { display: none; align-items: center; position: relative; }
.subagent-settle .settle-icon .subagent-mark { position: absolute; right: -4px; bottom: -3px; font-size: 8px; }
.subagent-row:hover .subagent-settle .settle-icon, .subagent-row:not(.running) .subagent-settle .settle-icon { display: inline-flex; }
.subagent-row:hover .subagent-settle .settle-mark, .subagent-row:not(.running) .subagent-settle .settle-mark { display: none; }
.subagent-row.running:not(:hover) .subagent-settle { cursor: default; }
.settle-icon.failed { color: var(--orange); }
.settle-icon.stopped { color: var(--faint); }
.subagent-mark { display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 600; line-height: 1; }
.subagent-mark.done { color: var(--faint); }
.subagent-mark.failed { color: var(--orange); }
.subagent-mark.stopped { color: var(--faint); font-size: 7px; }
.subagent-more { background: none; border: 0; color: var(--faint); font-size: 12px; text-align: left; padding: 0 0 0 45px; height: 24px; cursor: pointer; -webkit-app-region: no-drag; }

/* New bot (NewBotForm: two rounded fields, Cancel and Create, on Theme.bubble). */
.new-bot { margin: 0 12px 8px; padding: 12px; border-radius: 12px; background: var(--bubble); display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.new-bot input, .new-bot textarea {
  background: var(--ground); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 4px 7px; font: inherit; font-size: 13px; resize: none;
}
.new-bot input:focus, .new-bot textarea:focus { outline: none; border-color: rgba(76, 141, 255, 0.6); }
.new-bot-buttons { display: flex; justify-content: flex-end; gap: 12px; align-items: center; }
.new-bot-cancel { background: none; border: 0; color: var(--muted); font-size: 13px; cursor: pointer; }
.new-bot-create { background: var(--chip); border: 0; border-radius: 6px; padding: 2px 12px; font-size: 13px; color: var(--text); cursor: pointer; }
.new-bot-create:disabled { opacity: 0.45; cursor: default; }

/* A row's menu and the "Remove …?" confirmation (1.x's contextMenu and confirmationDialog). */
.bot-menu { position: fixed; z-index: 60; min-width: 170px; padding: 5px; background: var(--bubble); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 28px rgb(0 0 0 / calc(0.5 * var(--shade, 1))); }
.bot-menu-item { width: 100%; text-align: left; background: none; border: 0; border-radius: 5px; padding: 4px 10px; font-size: 13px; cursor: pointer; }
.bot-menu-item:hover { background: var(--blue); color: #fff; }
.bot-menu-item.destructive { color: var(--error); }
.bot-menu-item.destructive:hover { color: #fff; }
.dialog-backdrop { position: fixed; inset: 0; z-index: 70; background: rgb(0 0 0 / calc(0.45 * var(--shade))); display: flex; align-items: flex-start; justify-content: center; padding-top: 18vh; }
.dialog { width: 340px; background: var(--bubble); border: 1px solid var(--line); border-radius: 12px; padding: 18px 18px 14px; box-shadow: 0 16px 48px rgb(0 0 0 / calc(0.55 * var(--shade, 1))); }
.dialog h2 { margin: 0 0 6px; font-size: 14px; font-weight: 600; }
.dialog p { margin: 0 0 14px; font-size: 12.5px; color: var(--muted); word-break: break-word; }
.dialog-buttons { display: flex; justify-content: flex-end; gap: 8px; }
.dialog-buttons button { border: 0; border-radius: 6px; padding: 4px 14px; font-size: 13px; cursor: pointer; }
.dialog-cancel { background: var(--chip); color: var(--text); }
.dialog-destructive { background: #B3261E; color: #fff; }
/* ApprovalSheet.tsx: a card's command waiting for your OK, in full. */
.approval-sheet { width: min(460px, calc(100vw - 32px)); box-sizing: border-box; }
.approval-sheet p { margin-bottom: 6px; }
.approval-folder { display: block; margin: 0 0 8px; font: 12px ui-monospace, "SF Mono", Menlo, monospace; color: var(--text); word-break: break-all; }
.approval-command { margin: 0 0 12px; max-height: 30vh; overflow: auto; padding: 8px 10px; border-radius: 8px; background: var(--chip); color: var(--text); font: 12px/1.5 ui-monospace, "SF Mono", Menlo, monospace; white-space: pre-wrap; word-break: break-all; }
.approval-sheet .approval-note { margin: 0 0 14px; font-size: 12px; color: var(--faint); }

/* The right panel (SidePanels.swift DetailPanel: Theme.side, 20 pt padding, 28 pt between sections). */
.detail-panel {
  width: 272px; flex-shrink: 0; overflow-y: auto; scrollbar-width: none; background: var(--side);
  border-left: 1px solid var(--line); padding: 36px 20px 20px; display: flex; flex-direction: column; gap: 28px;
}
.detail-head { display: flex; align-items: center; gap: 10px; }
.detail-avatar { width: 28px; height: 28px; }
.detail-name { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.detail-section h3 { margin: 0 0 10px; font-size: 12px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: 0.04em; }
.now-card { background: var(--bubble); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; }
.now-line { display: flex; align-items: center; gap: 10px; min-height: 24px; }
.now-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex-shrink: 0; }
.now-dot[data-status="working"] { background: var(--blue); }
.now-dot[data-status="waiting"], .now-dot[data-status="retrying"] { background: var(--orange); }
.now-dot[data-status="awake"] { background: var(--green); }
.now-doing { font-size: 13px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.waiting-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.waiting-item { display: flex; min-height: 52px; background: var(--waiting-bg); border: 1px solid var(--orange-line); border-radius: 14px; }
.waiting-open {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 0 10px 14px;
  background: none; border: 0; color: var(--text); font-size: 13.5px; text-align: left; cursor: pointer;
}
.waiting-avatar { width: 26px; height: 26px; flex-shrink: 0; }
.waiting-text { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.waiting-chevron { color: var(--orange); font-size: 16px; }
.waiting-ignore { width: 36px; flex-shrink: 0; background: none; border: 0; color: var(--faint); font-size: 14px; cursor: pointer; }
.waiting-ignore:hover { color: var(--text); }
.bot-dot.waiting { background: var(--orange); }
/* Task Details uses the existing panel inside a modal drawer below the desktop breakpoint. */
.task-details-entry { position: fixed; top: 0; right: 6px; z-index: 25; min-height: 40px; padding: 0 10px; border: 0; border-radius: 6px; background: var(--side); color: var(--text); cursor: pointer; -webkit-app-region: no-drag; }
.task-details-drawer { position: fixed; inset: 0; z-index: 80; }
.task-details-drawer[hidden] { display: none; }
.task-details-backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / calc(0.53 * var(--shade))); }
.task-details-sheet { position: absolute; inset: 0 0 0 auto; width: min(360px, 92vw); display: flex; flex-direction: column; background: var(--side); box-shadow: 0 0 40px rgb(0 0 0 / calc(0.6 * var(--shade, 1))); }
.task-details-header { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; padding: max(8px, env(safe-area-inset-top)) 16px 8px; border-bottom: 1px solid var(--line); }
.task-details-header button { min-height: 44px; min-width: 44px; background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
.task-details-sheet > .detail-panel { display: flex; width: 100%; min-height: 0; flex: 1; border: 0; padding: 20px 20px max(20px, env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 860px) { .chat-header { padding-right: 84px; } }


/* Results (44 pt rows on Theme.bubble, the label and an arrow) and Settled (36 pt rows, ↩ back). */
.result-list, .settled-list { display: flex; flex-direction: column; gap: 6px; }
.result-row {
  display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; background: var(--bubble); border: 0; border-radius: 12px;
  color: var(--text); font-size: 13.5px; text-align: left; cursor: pointer;
}
.result-row:hover { background: var(--selected); }
.result-row.compact { height: 36px; padding: 0 12px; border-radius: 10px; background: var(--selected); font-weight: 600; }
.result-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.result-icon { color: var(--faint); flex-shrink: 0; }
.settled-row { display: flex; align-items: center; background: var(--bubble); border-radius: 12px; min-height: 36px; }
.settled-row.selected { background: var(--selected); }
.settled-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0 0 0 14px; height: 36px; background: none; border: 0; color: var(--muted); font-size: 13px; text-align: left; cursor: pointer; }
.settled-mark { width: 10px; display: inline-flex; justify-content: center; flex-shrink: 0; }
.settled-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settled-title.running { color: var(--text); }
.settled-back { width: 32px; height: 36px; margin-right: 4px; flex-shrink: 0; background: none; border: 0; color: var(--faint); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.settled-back:hover { color: var(--text); }
.settled-more { background: none; border: 0; color: var(--faint); font-size: 12px; text-align: left; padding: 0 0 0 14px; height: 24px; cursor: pointer; }

/* The button at the window's top right that folds the right panel (RightToggle: 28×24). */
.right-toggle {
  position: fixed; top: 8px; right: 14px; z-index: 25; width: 28px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 6px; color: var(--muted); cursor: pointer; -webkit-app-region: no-drag;
}
.right-toggle.on { background: var(--selected); color: var(--text); }
.right-toggle:hover { color: var(--text); }

/* The folded panel (RightStrip: 56 pt wide, the face with its status dot, an icon per section, settings last). */
.right-strip {
  width: 56px; flex-shrink: 0; background: var(--side); border-left: 1px solid var(--line); padding: 36px 0 12px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative;
}
.strip-face { width: 40px; height: 40px; border: 0; border-radius: 10px; background: var(--selected); position: relative; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.strip-face img { width: 26px; height: 26px; }
.strip-dot { position: absolute; right: 3px; bottom: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--faint); border: 2px solid var(--selected); box-sizing: content-box; transform: translate(2px, 2px); }
.strip-dot[data-status="working"] { background: var(--blue); }
.strip-dot[data-status="waiting"], .strip-dot[data-status="retrying"] { background: var(--orange); }
.strip-dot[data-status="awake"] { background: var(--green); }
.strip-tip {
  position: absolute; right: 60px; top: 36px; z-index: 40; width: 260px; padding: 8px 10px; background: var(--chip); border: 1px solid var(--strong-line); border-radius: 8px;
  box-shadow: 0 8px 22px rgb(0 0 0 / calc(0.5 * var(--shade, 1))); pointer-events: none;
}
.strip-tip-title { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; }
.strip-tip-title .now-dot { width: 7px; height: 7px; }
.strip-tip-detail { margin-top: 4px; font-size: 12px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.strip-rule { width: 28px; height: 1px; background: var(--chip); margin: 4px 0; }
.strip-slot { position: relative; }
.strip-icon { width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; position: relative; display: inline-flex; align-items: center; justify-content: center; }
.strip-icon[data-section="waiting"] { color: var(--orange); }
.strip-icon.on { background: var(--selected); color: var(--text); }
.strip-badge {
  position: absolute; top: -1px; right: -2px; min-width: 16px; height: 15px; padding: 0 4px; border-radius: 8px; font-size: 10px; font-weight: 700;
  font-variant-numeric: tabular-nums; background: var(--chip); color: var(--text); border: 1px solid var(--side); display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
}
.strip-badge.waiting { background: var(--orange); color: var(--side); }
.strip-flyout {
  position: absolute; right: 50px; top: 0; z-index: 40; width: 300px; max-height: 520px; display: flex; flex-direction: column; gap: 8px; padding: 12px;
  background: var(--bubble); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 32px rgb(0 0 0 / calc(0.5 * var(--shade, 1)));
}
.strip-flyout-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--faint); }
.strip-esc { font-size: 11px; }
.strip-flyout-body { overflow-y: auto; scrollbar-width: none; }
.strip-members { display: flex; flex-direction: column; gap: 10px; }
.strip-gap { flex: 1; }
.strip-settings { width: 40px; height: 40px; border: 0; background: none; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.strip-settings:hover { color: var(--text); }

.chat-column { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat-column[hidden] { display: none; }

/* Phase 4c: the left column's search (⌘K), pinned rows, the fold into a strip of faces (1.x's RailView, RailStrip). */
.rail-top { position: relative; }
.rail-toggle {
  position: absolute; top: 8px; left: 78px; width: 28px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 6px; color: var(--muted); cursor: pointer; -webkit-app-region: no-drag;
}
.rail-toggle.on { background: var(--selected); color: var(--text); }
.rail-toggle:hover { color: var(--text); }
.rail-strip .rail-toggle { left: 14px; }
.rail-search { position: relative; margin: 0 10px 6px; display: flex; align-items: center; }
.rail-search input {
  width: 100%; height: 30px; padding: 0 34px 0 28px; border-radius: 8px; border: 1px solid var(--line); background: var(--bubble); color: var(--text);
  font-size: 13px; outline: none; -webkit-app-region: no-drag;
}
.rail-search input::-webkit-search-cancel-button { display: none; }
.rail-search input:focus { border-color: var(--strong-line); }
.rail-search-icon { position: absolute; left: 9px; color: var(--faint); pointer-events: none; }
.rail-search-key { position: absolute; right: 9px; font-size: 11px; color: var(--faint); pointer-events: none; }
.rail-empty { padding: 10px; font-size: 13px; color: var(--faint); }
.rail-section { margin: 8px 10px 2px; height: 20px; font-size: 12px; font-weight: 600; color: var(--faint); }
.rail-rule { height: 1px; background: var(--line); margin: 6px 10px; }
.bot-row-wrap { position: relative; display: flex; flex-direction: column; }
.bot-pin {
  position: absolute; right: 8px; top: 12px; width: 24px; height: 24px; border: 0; border-radius: 6px; background: var(--chip); color: var(--faint);
  display: none; align-items: center; justify-content: center; cursor: pointer; -webkit-app-region: no-drag;
}
.bot-pin.on { color: var(--text); }
.bot-row-wrap.pinnable:hover .bot-pin { display: inline-flex; }
.bot-row-wrap.pinnable:hover .bot-row { padding-right: 40px; }
.task-count { font-size: 11px; color: var(--link); padding: 0 7px; height: 18px; line-height: 18px; border-radius: 9px; background: var(--info-bg); flex-shrink: 0; white-space: nowrap; }
.bot-menu-rule { height: 1px; background: var(--line); margin: 4px 2px; }
/* A subagent row's "⋯" and its agent menu ("Move to…", agentMoves). */
.subagent-more-menu { width: 20px; height: 30px; flex-shrink: 0; background: none; border: 0; padding: 0; cursor: pointer; color: var(--muted); display: none; align-items: center; justify-content: center; font-size: 13px; }
.subagent-row:hover .subagent-more-menu, .subagent-more-menu:focus-visible, .settled-row:hover .subagent-more-menu { display: inline-flex; }
.subagent-host { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-menu { max-width: 320px; }
.agent-menu .bot-menu-item:disabled { opacity: .5; cursor: default; background: none; color: inherit; }
.agent-menu-reason, .agent-target-why { font-size: 11px; color: var(--muted); }
.agent-menu-reason { padding: 4px 10px; }
.agent-menu-name { display: flex; gap: 6px; padding: 4px 6px; }
.agent-menu-name input { flex: 1; min-width: 0; font-size: 12px; }
.agent-menu-message { flex-direction: column; align-items: stretch; }
.agent-menu-message textarea { min-width: 220px; font-size: 12px; resize: vertical; }
.subagent-pick { width: 14px; height: 14px; margin: 0 6px; flex-shrink: 0; cursor: pointer; }
.subagent-group { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 8px 6px 26px; }
.subagent-group input { flex: 1 1 120px; min-width: 0; font-size: 12px; }
.subagent-group button { font-size: 12px; }

.rail-strip {
  width: 56px; flex-shrink: 0; background: var(--side); border-right: 1px solid var(--line); padding: 0 0 12px;
  display: flex; flex-direction: column; align-items: center; position: relative;
}
.rail-strip .rail-top { width: 56px; }
.strip-bots { flex: 1; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 4px; scrollbar-width: none; }
.strip-entry { display: flex; flex-direction: column; align-items: center; }
.strip-rule.short { width: 16px; }
.strip-bot {
  width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; position: relative; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; -webkit-app-region: no-drag;
}
.strip-bot img { width: 28px; height: 28px; }
.strip-bot:hover { background: var(--hover); }
.strip-bot.selected { background: var(--selected); }
.strip-bot.selected::before { content: ""; position: absolute; left: -8px; top: 10px; width: 3px; height: 20px; border-radius: 2px; background: var(--blue); }
.strip-bot.asleep img { opacity: 0.55; }
.strip-bot.working::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; border: 1.5px dashed var(--blue); }
.strip-bot.disconnected::after { content: ""; position: absolute; inset: 3px; border-radius: 12px; border: 1.5px solid var(--orange); }
.strip-disconnected { position: absolute; z-index: 1; right: 1px; bottom: 1px; width: 14px; height: 14px; border-radius: 50%; background: var(--orange); color: var(--side); box-shadow: 0 0 0 2px var(--side); font-size: 10px; font-weight: 900; line-height: 14px; text-align: center; }
.strip-unread { position: absolute; right: 3px; top: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--blue); border: 2px solid var(--side); }
.rail-tip-title { font-size: 12px; font-weight: 500; }
.rail-tip-detail { font-size: 11px; color: var(--muted); }
/* A folded face's peek (StripPeek): the bot's name, then any sub bots as the open column's rows; a strip on its
   left bridges the gap to the face so the pointer can cross. */
.strip-peek {
  position: fixed; left: 60px; z-index: 40; min-width: 180px; max-width: 280px; max-height: calc(100vh - 16px); padding: 4px;
  background: var(--bubble); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 28px rgb(0 0 0 / calc(0.5 * var(--shade, 1)));
  display: flex; flex-direction: column; gap: 2px; -webkit-app-region: no-drag;
}
.strip-peek::before { content: ""; position: absolute; left: -14px; top: 0; width: 14px; height: 48px; }
.strip-peek-name {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 5px 8px; border: 0; border-radius: 6px; background: none;
  color: var(--text); text-align: left; cursor: pointer;
}
.strip-peek-name:hover, .strip-peek-name:focus-visible { background: var(--hover); }
.strip-peek .subagent-rows { min-height: 0; overflow-y: auto; scrollbar-width: none; }
.strip-peek .subagent-row { border-radius: 6px; }
.strip-peek .subagent-open { padding-left: 6px; }
.strip-add { position: relative; }
.strip-plus, .strip-gear { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--faint); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.strip-plus:hover, .strip-gear:hover { color: var(--text); background: var(--hover); }
.strip-add-menu { position: absolute; left: 40px; bottom: 0; z-index: 50; min-width: 150px; padding: 5px; background: var(--bubble); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 28px rgb(0 0 0 / calc(0.5 * var(--shade, 1))); display: flex; flex-direction: column; }
.strip-add-menu button { text-align: left; background: none; border: 0; border-radius: 5px; padding: 4px 10px; font-size: 13px; cursor: pointer; }
.strip-add-menu button:hover { background: var(--blue); color: #fff; }

/* The right panel's tasks, design R2-3 "Grouped": Needs you / Running / Done, each folding, a
   40 px row per task, the open one as a card in place, a hovered one's timeline floating left. */
.task-none { font-size: 13px; color: var(--faint); padding: 0 2px; }
.task-groups { display: flex; flex-direction: column; gap: 18px; }
.tasks-section .now-card + .task-groups, .tasks-section .task-none + .task-groups, .tasks-section .now-doing + .task-groups { margin-top: 18px; }
.task-group-head { display: flex; align-items: center; gap: 6px; height: 18px; margin-bottom: 8px; }
.detail-section .task-group-head h3 { margin: 0; line-height: 18px; }
.task-group-count { font-size: 11px; color: var(--link); padding: 0 7px; height: 18px; line-height: 18px; border-radius: 9px; background: var(--info-bg); }
.task-group-count[data-group="waiting"] { color: var(--orange-text); background: var(--waiting-bg); }
.task-group-count[data-group="done"], .task-group-count[data-group="quiet"] { color: var(--muted); background: var(--chip); }
.task-group-count[data-group="verify"] { color: var(--verify); background: var(--verify-bg); }
.task-group-fold { margin-left: auto; width: 24px; height: 24px; border: 0; border-radius: 6px; background: none; color: var(--faint); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.task-group-fold:hover { background: var(--hover); }
.task-group-fold svg, .task-agents-chevron { transition: transform .15s; }
.task-group-fold svg.open, .task-agents[open] .task-agents-chevron { transform: rotate(90deg); }
.task-list { display: flex; flex-direction: column; gap: 2px; }
.task-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--faint); }
.task-dot[data-state="running"] { background: var(--blue); }
.task-dot[data-state="waiting"] { background: var(--orange-text); }
.task-dot[data-state="done"] { background: var(--green); }
.task-dot[data-state="stale"] { background: var(--error); }
.task-owner { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); flex-shrink: 0; }
.task-owner-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--claude); }
.task-owner-dot[data-head="codex"] { background: var(--codex); }
.task-claiming { font-size: 11px; color: var(--faint); }
.task-row { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 4px 0 8px; border-radius: 8px; box-sizing: border-box; }
.task-row:hover, .task-row.hov { background: var(--hover); }
.task-row-open { flex: 1; min-width: 0; display: flex; flex-direction: column; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; line-height: 1.3; font: inherit; color: inherit; }
.task-row-name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-line { font-size: 11.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-row[data-state="waiting"] .task-line { color: var(--orange-text); }
.task-row[data-state="stale"] .task-line { color: var(--error); }
.task-dot[data-state="verify"] { background: var(--verify); }
.task-stage-line { display: flex; align-items: center; gap: 6px; }
.task-stage-bar { display: inline-flex; gap: 3px; flex-shrink: 0; }
.task-stage-seg { width: 14px; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--faint) 40%, transparent); }
.task-stage-seg[data-step="done"] { background: var(--green); }
.task-stage-seg[data-step="current"] { background: var(--blue); }
.task-stages { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 11px; color: var(--faint); margin-top: -2px; }
.task-stage { display: inline-flex; align-items: center; gap: 4px; }
.task-stage::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--faint) 40%, transparent); }
.task-stage[data-step="done"] { color: var(--muted); }
.task-stage[data-step="done"]::before { background: var(--green); }
.task-stage[data-step="current"] { color: var(--text); }
.task-stage[data-step="current"]::before { background: var(--blue); }
.task-check, .task-complete { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; border: 0; background: var(--chip); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.task-check:hover, .task-complete:hover { color: var(--green); background: var(--selected); }
.task-complete { margin-left: auto; }
.task-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--bubble); margin: 2px 0; }
.task-card-top { display: flex; align-items: flex-start; gap: 8px; width: 100%; }
.task-card-head { flex: 1; min-width: 0; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.task-name { font-size: 14px; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.task-name.bold { font-weight: 600; }
.task-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; margin-top: -4px; }
.task-blocked { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 10px; background: var(--waiting-bg); border: 1px solid var(--orange-line); font-size: 12.5px; color: var(--orange-text); }
.task-blocked.quiet { background: none; }
.task-answer { align-self: flex-start; background: var(--orange); color: #1A1206; border: 0; border-radius: 8px; height: 28px; padding: 0 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.task-track { display: flex; flex-direction: column; font-size: 12.5px; }
.task-step { display: grid; grid-template-columns: 12px 1fr; column-gap: 10px; }
.task-step-mark { display: flex; flex-direction: column; align-items: center; }
.task-step-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; box-sizing: border-box; }
.task-step-dot.now { background: var(--blue); }
.task-step-dot.next { border: 1.5px solid var(--faint); }
.task-step-line { flex: 1; width: 1px; background: var(--selected); min-height: 8px; margin: 3px 0; }
.task-step-body { padding-bottom: 6px; min-width: 0; }
.task-step[data-step="next"] .task-step-body { color: var(--muted); }
.task-field-label { display: block; font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; }
.task-field-value { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.task-stale { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--error); }
.task-stale .task-report { margin-left: auto; }
.task-stale.quiet { color: var(--faint); }
.task-summary-tag { font-size: 11px; color: var(--muted); background: var(--chip); border-radius: 999px; padding: 1px 8px; }
.task-help { font-size: 12px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.task-report { background: var(--chip); border: 0; border-radius: 8px; height: 28px; padding: 0 10px; font-size: 12.5px; color: var(--text); cursor: pointer; }
.task-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.task-jump { background: none; border: 0; padding: 0; color: var(--link); font-size: 12px; cursor: pointer; white-space: nowrap; }
.task-timeline { position: fixed; z-index: 40; width: 272px; box-sizing: border-box; background: var(--bubble); border: 1px solid var(--strong-line); border-radius: 14px; box-shadow: 0 18px 48px rgb(0 0 0 / calc(.6 * var(--shade, 1))); padding: 14px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; color: var(--text); pointer-events: none; max-height: calc(100vh - 16px); overflow: hidden; }
.task-timeline-arrow { position: absolute; right: -6px; width: 10px; height: 10px; background: var(--bubble); border-top: 1px solid var(--strong-line); border-right: 1px solid var(--strong-line); transform: rotate(45deg); }
.task-timeline-head { display: flex; align-items: flex-start; gap: 8px; }
.task-timeline-head .task-dot { margin-top: 6px; }
.task-timeline-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.35; }
.task-events { display: flex; flex-direction: column; }
.task-event { display: grid; grid-template-columns: 34px 10px 1fr; column-gap: 8px; }
.task-event-time { font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; padding-top: 1px; white-space: nowrap; }
.task-event-mark { display: flex; flex-direction: column; align-items: center; }
.task-event-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; background: var(--faint); box-sizing: border-box; }
.task-event[data-kind="now"] .task-event-dot { background: var(--blue); }
.task-event[data-kind="waiting"] .task-event-dot { background: var(--orange-text); }
.task-event[data-kind="done"] .task-event-dot, .task-event[data-kind="complete"] .task-event-dot { background: var(--green); }
.task-event[data-kind="next"] .task-event-dot { background: transparent; border: 1.5px solid var(--faint); }
.task-event[data-kind="subagent"] .task-event-dot { background: transparent; border: 1.5px solid var(--green); }
.task-event-line { flex: 1; width: 1px; background: var(--selected); margin-top: 3px; }
.task-event-text { font-size: 12.5px; padding-bottom: 8px; min-width: 0; overflow-wrap: anywhere; }
.task-event-label { color: var(--faint); font-size: 11px; margin-right: 4px; }

.dialog-primary { background: var(--blue); color: #fff; border: 0; border-radius: 8px; padding: 5px 14px; font-size: 13px; cursor: pointer; }
.dialog-primary:disabled { opacity: 0.45; cursor: default; }

/* The component spec workspace in the right panel (Phase 5a; 1.x's spec panel: 340 pt, wide 560). */
.takeover-panel { width: 340px; flex-shrink: 0; display: flex; background: var(--side); border-left: 1px solid var(--line); }
.takeover-panel.wide { width: 560px; }
.takeover-frame { flex: 1; width: 100%; border: 0; display: block; background: var(--side); }
@media (max-width: 860px) { .takeover-panel { display: none; } }

/* Phase 5b: a newer Botling 2 is out (only linked, never installed). */
.update-bar { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 6px 16px; font-size: 12.5px; color: var(--text, #e8e8e8); background: var(--chip); border-bottom: 1px solid var(--line); }
.update-bar button { background: var(--blue); color: #fff; border: 0; border-radius: 8px; padding: 2px 10px; font-size: 12px; cursor: pointer; }
.update-bar button.quiet { background: transparent; color: var(--faint); }

/* Subscription quota cards in the gear popover (1.x RateLimitCards). */
.quick-usage { border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 10px; }
.quick-usage h3 { font-size: 12px; font-weight: 400; color: var(--faint); margin: 8px 0 6px; }
.quick-usage-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.quick-usage-cards.single { grid-template-columns: minmax(0, 1fr); }
.quick-usage-card { display: flex; align-items: center; gap: 8px; padding: 10px 8px; background: var(--card); border-radius: 8px; min-width: 0; }
/* The card colour is the dark theme's; light uses the page's own surface so the ring track and text stay readable. */
:root[data-theme="light"] .quick-usage-card { background: var(--bubble); box-shadow: inset 0 0 0 1px var(--line); }
.quick-usage-ring { position: relative; width: 41px; height: 41px; flex-shrink: 0; display: grid; place-items: center; font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.quick-usage-ring svg { position: absolute; inset: 0; width: 41px; height: 41px; transform: rotate(-90deg); }
.quick-usage-card strong { display: block; font-size: 13px; font-weight: 400; }
.quick-usage-card small { display: block; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.quick-usage-note { margin: 6px 0 0; font-size: 11px; color: var(--faint); }
.quick-usage-retry { white-space: nowrap; }
.quick-usage-note button { border: 0; background: none; color: var(--blue); font: inherit; cursor: pointer; padding: 0 2px; border-radius: 4px; }
.quick-usage-note button:hover:not(:disabled) { text-decoration: underline; }
.quick-usage-note button:disabled { color: var(--faint); cursor: default; }
.quick-usage-note button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* The bot's settings in the right panel (1.x's DetailPanel slider button and SettingsPage). */
.detail-settings, .panel-back { width: 32px; height: 32px; flex-shrink: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.detail-settings:hover, .panel-back:hover { background: var(--hover); color: var(--text); }
.settings-panel-head { gap: 4px; }
.panel-settings { display: flex; flex-direction: column; }
.panel-settings .settings-group:first-child { margin-top: 0; }
.panel-settings .settings-row { flex-wrap: wrap; gap: 6px 16px; }
.panel-settings .settings-control { flex-wrap: wrap; max-width: 100%; }
.panel-settings .settings-problem { margin: 0 0 8px; }

/* A plugin's main-area tab (plan W2): its frame in the chat's place, the chat page kept loaded under it. */
.chat-column.main-tab-on #chat-frame { display: none; }
.main-tab { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.main-tab-frame { flex: 1; width: 100%; border: 0; border-top: 1px solid var(--line); background: transparent; }
/* Full-page reports cover the shell without unmounting its conversation. */
.report-viewer { position: fixed; inset: 38px 0 0; z-index: 1000; display: flex; flex-direction: column; background: var(--ground); }
.report-viewer header { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.report-viewer header span { opacity: .65; }
.report-viewer iframe { flex: 1; min-height: 0; width: 100%; border: 0; background: white; }
.report-viewer header button { padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--chip); cursor: pointer; }
.report-viewer header button:hover { background: var(--hover); }
.report-viewer header button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Panels under the chat that plugins bring (BottomPanels.tsx): the page lays out the frame, a divider and the header's toggle. */
.bottom-panel { height: 300px; min-height: min(120px, 70vh); max-height: 70vh; overflow: hidden; display: flex; flex-direction: column; flex-shrink: 0; background: var(--panel-ground); color: var(--panel-text); border-top: 1px solid var(--panel-line); }
.bottom-drag-shield { position: fixed; inset: 0; z-index: 10000; cursor: ns-resize; -webkit-app-region: no-drag; }
.bottom-divider { height: 7px; flex-shrink: 0; cursor: ns-resize; touch-action: none; user-select: none; background: transparent; }
.bottom-divider:hover, .bottom-divider:active, .bottom-divider:focus-visible { background: var(--selected); outline: none; }
.bottom-divider::after { content: ""; display: block; width: 32px; height: 2px; margin: 2px auto; border-radius: 2px; background: var(--muted); opacity: .5; }
.bottom-panel[hidden] { display: none; }
.bottom-panel-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.bottom-panel-frame { flex: 1; min-height: 0; width: 100%; border: 0; background: transparent; }
.bottom-toggle {
  height: 24px; margin: 0; padding: 0 8px; border: 0; border-radius: 5px;
  background: transparent; color: var(--muted); font: inherit; font-size: 12px; line-height: 24px;
  cursor: pointer; -webkit-app-region: no-drag;
}
.bottom-toggle:hover { background: var(--hover); color: var(--text); }
.bottom-toggle[aria-expanded=true] { background: var(--selected); color: var(--text); }
.bottom-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.bottom-toggle:disabled { opacity: .4; cursor: default; }
.bottom-controls { display: inline-flex; flex-shrink: 0; }
/* Keep a bottom panel's toggle and the header buttons reachable alongside long engine labels. */
.chat-column > .chat-header { padding-left: 12px; padding-right: 12px; }
.chat-column > .chat-header .chat-title, .chat-column > .chat-header .chat-heads { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-column > .chat-header .chat-title { flex-shrink: 1; }
.chat-column > .chat-header .chat-heads { flex-shrink: 2; }
.chat-column > .chat-header .chat-status, .chat-column > .chat-header .chat-actions { flex-shrink: 0; }
.chat-column > .chat-header .chat-actions { position: static; }
@media (max-width: 860px) { .chat-column > .chat-header { padding-right: 84px; } }
.settings-fold { all: unset; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; color: inherit; font: inherit; }
.settings-fold:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 4px; }
.settings-confirm { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; font-size: 12px; color: var(--muted); }
.settings-confirm span { flex-basis: 100%; text-align: right; }

.phone-bot { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; font-size: 13px; }
.phone-offer { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 0; }
.qr-code { border-radius: 8px; background: #fff; }

/* A plugin's block in the app page's own surface (Settings page, gear popover): as tall as its content, no frame of its own. */
.plugin-slot-frame { display: block; width: 100%; border: 0; background: transparent; color-scheme: dark; }
:root[data-theme="light"] .plugin-slot-frame { color-scheme: light; }
/* The two numbers on a bot row (blue unread, orange needs you) and the Idle corner button: a 20 pt clock at the
   row's top-right corner while the pointer is on it (the settle clock's icon); in Idle, a back arrow. The pin
   moves under it, and the numbers move down so the two never overlap. */
.bot-counts { display: inline-flex; gap: 4px; flex-shrink: 0; }
.bot-idle {
  position: absolute; right: 6px; top: 4px; width: 20px; height: 20px; border: 0; border-radius: 6px; background: var(--chip); color: var(--text);
  display: none; align-items: center; justify-content: center; padding: 0; cursor: pointer; -webkit-app-region: no-drag;
}
.bot-row-wrap.idleable:hover .bot-idle, .bot-idle:focus-visible, .bot-row-wrap.idleable:focus-within .bot-idle { display: inline-flex; }
.bot-row-wrap.idleable .bot-pin { top: auto; bottom: 4px; right: 6px; width: 20px; height: 20px; }
.bot-row-wrap.idleable:hover .bot-row { padding-right: 32px; }
.bot-row-wrap.idleable:hover .bot-counts { margin-top: 14px; }
/* Idle: the collapsed group at the bottom of the bots (30 pt, as a subagent row), its bots as normal rows when open. */
.rail-idle { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; border-top: 1px solid var(--line); padding-top: 2px; }
.rail-idle-row {
  display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 0; border-radius: 10px; background: none;
  color: var(--faint); font-size: 12px; font-weight: 600; text-align: left; cursor: pointer; -webkit-app-region: no-drag;
}
.rail-idle-row:hover { background: var(--hover); color: var(--text); }
.rail-idle-count { font-weight: 500; }
.rail-idle-chevron, .rail-peek-chevron { display: inline-flex; transform: rotate(180deg); transition: transform .12s; }
.rail-idle-chevron.open, .rail-peek-chevron.open { transform: rotate(270deg); }
/* A bot's status card beside the column (PeekCard), drawn as the folded column's peek. */
.rail-peek {
  position: fixed; z-index: 40; width: 276px; max-height: calc(100vh - 16px); overflow-y: auto; scrollbar-width: none; padding: 8px;
  background: var(--bubble); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 28px rgb(0 0 0 / calc(0.5 * var(--shade, 1)));
  display: flex; flex-direction: column; gap: 4px; -webkit-app-region: no-drag;
}
.rail-peek-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 2px 4px 4px; }
.rail-peek-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-peek-count { font-size: 11px; color: var(--muted); flex-shrink: 0; }
.rail-peek-row { display: flex; align-items: center; border-radius: 6px; }
.rail-peek-row:hover, .rail-peek-row.open { background: var(--hover); }
.rail-peek-row:hover .subagent-more-menu, .rail-peek-row .subagent-more-menu:focus-visible { display: inline-flex; }
.rail-peek-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 4px 6px; border: 0; background: none; color: var(--text); text-align: left; cursor: pointer; }
.rail-peek-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rail-peek-title { display: flex; align-items: center; font-size: 13px; min-width: 0; }
.rail-peek-doing { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-peek-doing.waiting { color: var(--orange); }
.rail-peek-time { font-size: 11px; color: var(--faint); flex-shrink: 0; }
.peek-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--faint); }
.peek-dot.running { background: var(--blue); }
.peek-dot.waiting { background: var(--orange); }
.rail-peek-agents { display: flex; flex-direction: column; margin: 0 0 2px 10px; padding-left: 8px; border-left: 1px solid var(--selected); }
.rail-peek-agent { display: flex; align-items: center; gap: 8px; min-height: 26px; padding: 0 6px; border: 0; border-radius: 6px; background: none; color: var(--muted); font-size: 12px; text-align: left; cursor: pointer; }
.rail-peek-agent:hover, .rail-peek-agent:focus-visible { background: var(--hover); color: var(--text); }
.rail-peek-state { font-size: 11px; flex-shrink: 0; color: var(--faint); }
.rail-peek-state.running { color: var(--blue); }
.rail-peek-none { font-size: 11px; color: var(--faint); padding: 4px 6px; }
.rail-peek-group { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 6px; border: 0; border-radius: 6px; background: none; color: var(--faint); font-size: 12px; font-weight: 600; text-align: left; cursor: pointer; }
.rail-peek-group:hover, .rail-peek-group:focus-visible { background: var(--hover); color: var(--text); }
.rail-peek-group-count { margin-left: auto; font-weight: 500; }
.rail-peek-link { align-self: flex-start; border: 0; background: none; padding: 4px 6px; border-radius: 6px; color: var(--blue); font-size: 12px; cursor: pointer; }
.rail-peek-link:hover, .rail-peek-link:focus-visible { background: var(--hover); }
/* The light look (data-theme="light", Settings → Appearance → App) for what has no token. */
:root[data-theme="light"] .badge.waiting, :root[data-theme="light"] .task-answer { color: #fff; }

/* Scoped to model selection; share the settings palette and do not affect terminal/layout. */
.settings-control:has(> .model-picker) { flex: 1 1 100%; min-width: 0; }
.model-picker { width: 100%; min-width: 0; }
.model-picker-controls { display: grid; grid-template-columns: minmax(0, 1fr) 72px; gap: 8px; }
.model-picker-controls select {
  width: 100%; min-width: 0; height: 32px; appearance: none;
  padding: 5px 28px 5px 10px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%23888' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.model-picker-controls button { height: 32px; color: var(--muted); font: inherit; }
.model-picker-controls button:hover:not(:disabled) { background: var(--hover); color: var(--text); }
.model-picker-controls button:disabled { opacity: .5; cursor: default; }
.model-picker-controls :is(button, select):focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.model-picker .settings-note { margin: 5px 0 0; line-height: 1.45; font-size: 11px; overflow-wrap: anywhere; }

/* Chromium's customizable select keeps the popup in the page and uses the app palette. */
@supports (appearance: base-select) {
  .model-picker-controls select, .model-picker-controls select::picker(select) { appearance: base-select; }
  .model-picker-controls select > button { width: 100%; min-width: 0; height: auto; padding: 0; border-radius: 0; background: transparent; color: var(--text); text-align: left; font: inherit; }
  .model-picker-controls .model-selected-text { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
  .model-picker-controls select::picker-icon { display: none; }
  .model-picker-controls select::picker(select) {
    background: var(--ground); color: var(--text); border: 1px solid var(--line);
    border-radius: 10px; padding: 5px; box-shadow: 0 12px 32px rgb(0 0 0 / calc(0.33 * var(--shade, 1)));
    max-height: 290px; overflow-y: auto; margin-top: 5px;
  }
  .model-picker-controls option { padding: 7px 9px; border-radius: 6px; font: 12px/1.4 -apple-system, sans-serif; }
  .model-picker-controls option:hover, .model-picker-controls option:focus { background: var(--hover); }
  .model-picker-controls option:checked { background: var(--selected); }
  .model-picker-controls optgroup { color: var(--muted); font-size: 11px; }
  .model-picker-controls optgroup option { color: var(--text); }
}