/* Appearance is a member preference. The controls below only change presentation. */
:root { --faint: #85858f; }
/* Issue #244 (2026-10-23): the success colour of a finished change, and its row tint. Graphite here; each scheme below sets its own. */
:root { --success: #5fd18a; --success-tint: #11241a; }
/* Announcement banner tints (owner request 2026-10-23). Text, muted text, and the level colour keep 4.5:1 on each tint. */
:root { --announcement-critical-tint: #3d1916; --announcement-important-tint: #2e2210; --announcement-info-tint: #1f242c; }

.rail-tooltip {
  position: fixed;
  z-index: 80;
  pointer-events: none;
  max-width: min(260px, calc(100vw - 80px));
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius:0;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 8px 24px #0005;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* Side drawers scroll normally without a permanent thumb crossing their content. */
.drawer:not(.page) { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.drawer:not(.page):has(:focus-visible) { scrollbar-color: var(--line) transparent; }
.drawer:not(.page)::-webkit-scrollbar { width: 8px; background: transparent; }
.drawer:not(.page)::-webkit-scrollbar-thumb { background: transparent; border-radius:0; }
.drawer:not(.page)::-webkit-scrollbar-thumb:hover,
.drawer:not(.page):has(:focus-visible)::-webkit-scrollbar-thumb { background: var(--line); }
/* Light schemes: Daylight, Paper, and Sage. Dark schemes beside Graphite (the home.css default): Dusk and High Contrast.
   A rule for every light scheme names all three; a rule for every scheme other than Graphite also names Dusk and High Contrast. */
html[data-theme="daylight"] {
  --announcement-critical-tint: #f6d9d5;
  --announcement-important-tint: #f5e8d0;
  --announcement-info-tint: #e4eaf4;
  color-scheme: light;
  --bg: #eceff2;
  --rail: #e2e6eb;
  --panel: #f7f8fa;
  --line: #cfd5dd;
  --line-soft: #dfe3e8;
  --text: #1d2531;
  --muted: #515d6c;
  --faint: #58636f;
  --bubble: #f7f8fa;
  --bubble-user: #e0e8ee;
  --accent: #11667d;
  --alert-info: #2f57a8;
  --alert-warning: #8c5409;
  --alert-critical: #a5302a;
  --danger: #a5302a;
  --success: #1c6b3a;
  --success-tint: #e1f0e5;
  --ok: #1d2531;
  --appearance-surface: #e6eaee;
  --appearance-hover: #dce2e8;
  --appearance-selected: #d3e3ea;
  --appearance-drawer: #f7f8fa;
  --appearance-composer: #f7f8fa;
  --appearance-deep: #f1f3f5;
  --appearance-accent-tint: #d9e8ee;
  --appearance-danger-tint: #f5e1df;
  --appearance-ok-tint: #e4e8ec;
  --appearance-warning-tint: #f3e6cf;
  --appearance-shadow: #26334a26;
  --appearance-button-text: #ffffff;
  --connection-divider: var(--line);
  --surface: var(--appearance-surface);
  --surface-hover: var(--appearance-hover);
  --surface-active: var(--appearance-selected);
  --avatar-neutral: #58616f;
  --screen-bg: #e4e8ec;
  --screen-glyph: #97a0ad;
  --on-accent: #ffffff;
  --run: #0f647b;
  --fail: #b0352b;
  --stale: #8c5409;
  --bot-olive-fg: #4e4603;
  --bot-olive-bg: #e7e4ca;
  --bot-green-fg: #0d5117;
  --bot-green-bg: #d5ead5;
  --bot-indigo-fg: #39416f;
  --bot-indigo-bg: #dce2fb;
  --bot-violet-fg: #55267c;
  --bot-violet-bg: #e9ddf6;
  --bot-rose-fg: #6a254e;
  --bot-rose-bg: #f6dae7;
}
html[data-theme="paper"] {
  --announcement-critical-tint: #f2d8cf;
  --announcement-important-tint: #f1e4c8;
  --announcement-info-tint: #e2e7ee;
  color-scheme: light;
  --bg: #ece6da;
  --rail: #e3dccd;
  --panel: #f5f0e6;
  --line: #d2c8b5;
  --line-soft: #e0d8c8;
  --text: #2a251f;
  --muted: #62594c;
  --faint: #5f574b;
  --bubble: #f5f0e6;
  --bubble-user: #e4ddcc;
  --accent: #1d6466;
  --alert-info: #2f5590;
  --alert-warning: #80530a;
  --alert-critical: #9a3327;
  --danger: #9a3327;
  --success: #2a6232;
  --success-tint: #e2e8d6;
  --ok: #2a251f;
  --appearance-surface: #e8e1d3;
  --appearance-hover: #ddd5c4;
  --appearance-selected: #dcd8c4;
  --appearance-drawer: #f5f0e6;
  --appearance-composer: #f5f0e6;
  --appearance-deep: #f0ebe0;
  --appearance-accent-tint: #d8e0d6;
  --appearance-danger-tint: #f0dbd2;
  --appearance-ok-tint: #e6dfd1;
  --appearance-warning-tint: #efe0c2;
  --appearance-shadow: #3a2e1a26;
  --appearance-button-text: #ffffff;
  --connection-divider: var(--line);
  --surface: var(--appearance-surface);
  --surface-hover: var(--appearance-hover);
  --surface-active: var(--appearance-selected);
  --avatar-neutral: #675e50;
  --screen-bg: #e6dfd2;
  --screen-glyph: #a49a89;
  --on-accent: #ffffff;
  --run: #1d6466;
  --fail: #a1372a;
  --stale: #80530a;
  --bot-olive-fg: #4d5217;
  --bot-olive-bg: #e2e6cc;
  --bot-green-fg: #1a6323;
  --bot-green-bg: #d5ead5;
  --bot-indigo-fg: #483c95;
  --bot-indigo-bg: #e0e0fa;
  --bot-violet-fg: #624c7c;
  --bot-violet-bg: #e8def6;
  --bot-rose-fg: #7f235c;
  --bot-rose-bg: #f6dae7;
}
html[data-theme="sage"] {
  --announcement-critical-tint: #f2d9d5;
  --announcement-important-tint: #f1e6cc;
  --announcement-info-tint: #e0e8ef;
  color-scheme: light;
  --bg: #e6ebe6;
  --rail: #dce3dc;
  --panel: #f2f5f1;
  --line: #c6d0c7;
  --line-soft: #d7dfd7;
  --text: #1e2924;
  --muted: #4e5e56;
  --faint: #55645c;
  --bubble: #f2f5f1;
  --bubble-user: #dbe5dd;
  --accent: #2c6650;
  --alert-info: #2d5689;
  --alert-warning: #855406;
  --alert-critical: #9c312a;
  --danger: #9c312a;
  --success: #1f5f36;
  --success-tint: #d6e6da;
  --ok: #1e2924;
  --appearance-surface: #e0e6e0;
  --appearance-hover: #d5ddd5;
  --appearance-selected: #cfe0d5;
  --appearance-drawer: #f2f5f1;
  --appearance-composer: #f2f5f1;
  --appearance-deep: #edf1ec;
  --appearance-accent-tint: #d3e3d8;
  --appearance-danger-tint: #f0dcd8;
  --appearance-ok-tint: #dfe5df;
  --appearance-warning-tint: #ede3ca;
  --appearance-shadow: #1e2f2626;
  --appearance-button-text: #ffffff;
  --connection-divider: var(--line);
  --surface: var(--appearance-surface);
  --surface-hover: var(--appearance-hover);
  --surface-active: var(--appearance-selected);
  --avatar-neutral: #55645b;
  --screen-bg: #dfe5df;
  --screen-glyph: #98a59c;
  --on-accent: #ffffff;
  --run: #2c6650;
  --fail: #a3352d;
  --stale: #855406;
  --bot-olive-fg: #515013;
  --bot-olive-bg: #e5e5cb;
  --bot-green-fg: #045e17;
  --bot-green-bg: #d5ead5;
  --bot-indigo-fg: #404ea5;
  --bot-indigo-bg: #dbe2fb;
  --bot-violet-fg: #783482;
  --bot-violet-bg: #eedcf1;
  --bot-rose-fg: #733a59;
  --bot-rose-bg: #f6dae7;
}
html[data-theme="dusk"] {
  --announcement-critical-tint: #4a2f2d;
  --announcement-important-tint: #3d3322;
  --announcement-info-tint: #2e3540;
  color-scheme: dark;
  --bg: #1f2227;
  --rail: #262a31;
  --panel: #24282e;
  --line: #3a404a;
  --line-soft: #30353d;
  --text: #c8cdd5;
  --muted: #9aa2ad;
  --faint: #949ca7;
  --bubble: #2a2e35;
  --bubble-user: #2d333c;
  --accent: #86b7d1;
  --alert-info: #a3b4c8;
  --alert-warning: #d4a25a;
  --alert-critical: #e5897f;
  --danger: #e5897f;
  --success: #86d49f;
  --success-tint: #1f3328;
  --ok: #e2e5ea;
  --appearance-surface: #2b3037;
  --appearance-hover: #333840;
  --appearance-selected: #2f3b47;
  --appearance-drawer: #24282e;
  --appearance-composer: #2a2e35;
  --appearance-deep: #1b1e22;
  --appearance-accent-tint: #293843;
  --appearance-danger-tint: #3b2a2a;
  --appearance-ok-tint: #2a2f36;
  --appearance-warning-tint: #383126;
  --appearance-shadow: #00000066;
  --appearance-button-text: #1f2227;
  --connection-divider: var(--line);
  --surface: var(--appearance-surface);
  --surface-hover: var(--appearance-hover);
  --surface-active: var(--appearance-selected);
  --avatar-neutral: #40464f;
  --screen-bg: #1a1d21;
  --screen-glyph: #3d434c;
  --on-accent: #1f2227;
  --run: #86b7d1;
  --fail: #e5897f;
  --stale: #d4a25a;
  --bot-olive-fg: #ccca5f;
  --bot-olive-bg: #3f3f22;
  --bot-green-fg: #8dcd8e;
  --bot-green-bg: #2e432e;
  --bot-indigo-fg: #abb9fe;
  --bot-indigo-bg: #363b55;
  --bot-violet-fg: #e79aed;
  --bot-violet-bg: #49354b;
  --bot-rose-fg: #f2b2ca;
  --bot-rose-bg: #50333e;
}
html[data-theme="contrast"] {
  --announcement-critical-tint: #3d0f0c;
  --announcement-important-tint: #2b1e00;
  --announcement-info-tint: #0b1d33;
  color-scheme: dark;
  --bg: #000000;
  --rail: #080808;
  --panel: #080808;
  --line: #9fa9b7;
  --line-soft: #737d8b;
  --text: #ffffff;
  --muted: #d8e0ea;
  --faint: #b9c5d4;
  --bubble: #101820;
  --bubble-user: #1a2440;
  --accent: #ffffff;
  --alert-info: #85bcff;
  --alert-warning: #ffb000;
  --alert-critical: #ffaaa4;
  --danger: #ffaaa4;
  --success: #8ff0ac;
  --success-tint: #062012;
  --ok: #ffffff;
  --appearance-surface: #111821;
  --appearance-hover: #263241;
  --appearance-selected: #243552;
  --appearance-drawer: #050505;
  --appearance-composer: #101820;
  --appearance-deep: #050505;
  --appearance-accent-tint: #172849;
  --appearance-danger-tint: #381b1b;
  --appearance-ok-tint: #1a1f26;
  --appearance-warning-tint: #382c10;
  --appearance-shadow: #000000b3;
  --appearance-button-text: #080808;
  --connection-divider: var(--line);
  --surface: var(--appearance-surface);
  --surface-hover: var(--appearance-hover);
  --surface-active: var(--appearance-selected);
  --screen-bg: #050505;
  --screen-glyph: var(--faint);
  --on-accent: #080808;
  --run: #00e5ff;
  --fail: #ff5555;
  --stale: #ffb000;
  --bot-olive-fg: #e9d07a;
  --bot-olive-bg: #000000;
  --bot-green-fg: #badf9a;
  --bot-green-bg: #000000;
  --bot-indigo-fg: #c8b7ff;
  --bot-indigo-bg: #000000;
  --bot-violet-fg: #fca1ff;
  --bot-violet-bg: #000000;
  --bot-rose-fg: #feb4dd;
  --bot-rose-bg: #000000;
  --bot-ring: 100%;
}
/* A white accent needs a heavier focus ring to stand out from white text. */
html[data-theme="contrast"] :focus-visible { outline-width: 3px; }

/* Legacy surfaces still carry literal Graphite colors in home.css. */
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) {
  --appearance-input: var(--appearance-surface);
}
/* Filled buttons take the theme's button text. The rule weighs no more than a bare element, so a
   component that sets its own color (a transparent tab, pill or link-style button) keeps it. */
:where(html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"])) button:where(:not(.secondary, .icon, .quiet, .rail-link, .bot-item, .recent-item, .tab, .chip, .template, .group-item, .page-back, .alert-filter, .feedback-choice, .rail-section-toggle, [role="radio"])) {
  color: var(--appearance-button-text);
}
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) .secondary,
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) .icon:hover,
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) .chip,
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) .template,
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) .step-mark {
  background: var(--appearance-surface);
  color: var(--text);
}
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) .secondary:hover,
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) .chip:hover,
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) .rail-link:hover,
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) .bot-item:hover,
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) .recent-item:hover,
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) .group-item:hover,
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) .tab:hover {
  background: var(--appearance-hover);
}
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) .bot-item.active,
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) .recent-item.active,
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) .group-item.active {
  background: var(--appearance-selected);
}
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) .search,
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) .bot-item .bot-tag,
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) .icon-picker button,
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) .security-title-logo,
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) .company-logo-preview,
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) code,
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) .drawer input,
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) .drawer select,
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) .drawer textarea,
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) .login-card input,
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) .security-card input,
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) .security-card select,
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) .security-card textarea,
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) .provider-form,
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) .connection-actions {
  background: var(--appearance-input);
  color: var(--text);
}
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) .composer { background: var(--appearance-composer); }
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) .drawer,
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) .login-card {
  background: var(--appearance-drawer);
  box-shadow: -12px 0 48px var(--appearance-shadow);
}
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) .chat-answer.md .md-table th,
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) .composer .icon {
  background: var(--appearance-hover);
}
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) .chat-answer.md .md-table tr:nth-child(even) td,
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) .device-facts,
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) .invitation-link {
  background: var(--appearance-deep);
}
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) .notice,
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) .security-steps li.next a,
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) .icon-picker button[aria-checked="true"] {
  background: var(--appearance-accent-tint);
}
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) .security-unsaved {
  background: var(--appearance-warning-tint);
  color: var(--text);
}
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) .drawer .security-section-head {
  background: var(--appearance-drawer);
}
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) .error,
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) .security-message.error {
  background: var(--appearance-danger-tint);
}
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) .security-message.ok,
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) .pill.ok {
  background: var(--appearance-ok-tint);
}
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) .pill.wait,
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) .pill.warn {
  background: var(--appearance-warning-tint);
  color: var(--text);
}
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) .screen .desktop-placeholder {
  color: var(--muted);
}
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) #mobile-navigation {
  background: var(--rail);
}
/* A room's icon sits on a surface, not a colored avatar, so its mark takes the text color. */
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"], [data-theme="dusk"], [data-theme="contrast"]) .room-avatar { color: var(--text); }
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"]) #chat-bot-avatar.room-avatar { color: #ffffff; }
html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"]) input[type="checkbox"], html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"]) input[type="radio"] { accent-color: var(--accent); }

.appearance-settings { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 4px; }
.appearance-settings fieldset { border: 0; padding: 0; margin: 14px 0; }
.appearance-settings legend { font-size: 0.75rem; color: var(--muted); margin-bottom: 8px; }
.appearance-options { display: flex; flex-wrap: wrap; gap: 8px; }
.appearance-options button { min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); }
.appearance-options button[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color: var(--text); }
.appearance-preview {
  --preview-bg: #0e1013; --preview-rail: #15181d; --preview-card: #1d2128;
  --preview-accent: #5cc8e8; --preview-text: #d3d8df;
  display: grid; grid-template-columns: 25% minmax(0, 1fr) 24%;
  height: 98px; margin: 16px 0 12px; overflow: hidden;
  border: 1px solid var(--line); border-radius:0;
  background: var(--preview-bg); color: var(--preview-text);
}
.appearance-preview.daylight { --preview-bg: #eceff2; --preview-rail: #e2e6eb; --preview-card: #e0e8ee; --preview-accent: #11667d; --preview-text: #1d2531; }
.appearance-preview.paper { --preview-bg: #ece6da; --preview-rail: #e3dccd; --preview-card: #e4ddcc; --preview-accent: #1d6466; --preview-text: #2a251f; }
.appearance-preview.sage { --preview-bg: #e6ebe6; --preview-rail: #dce3dc; --preview-card: #dbe5dd; --preview-accent: #2c6650; --preview-text: #1e2924; }
.appearance-preview.dusk { --preview-bg: #1f2227; --preview-rail: #262a31; --preview-card: #2d333c; --preview-accent: #86b7d1; --preview-text: #c8cdd5; }
.appearance-preview.contrast { --preview-bg: #000000; --preview-rail: #080808; --preview-card: #1a2440; --preview-accent: #ffffff; --preview-text: #ffffff; }
.appearance-preview.focus { grid-template-columns: 13% minmax(0, 1fr) 0; }
.appearance-preview > span { display: flex; flex-direction: column; gap: 8px; padding: 12px; min-width: 0; }
.appearance-preview .preview-rail { background: var(--preview-rail); border-right: 1px solid var(--preview-accent); }
.appearance-preview .preview-rail i { width: 20px; height: 20px; flex: none; border-radius:0; background: var(--preview-accent); }
.appearance-preview .preview-chat { justify-content: center; }
.appearance-preview .preview-chat i { display: block; height: 12px; max-width: 70%; border-radius:0; background: var(--preview-card); }
.appearance-preview .preview-chat i:nth-child(2) { align-self: flex-end; width: 45%; }
.appearance-preview .preview-chat i:nth-child(3) { width: 60%; }
.appearance-preview .preview-panel { background: var(--preview-rail); border-left: 1px solid var(--preview-accent); }
.appearance-preview .preview-panel i { display: block; width: 100%; height: 45px; border: 1px solid var(--preview-accent); border-radius:0; }
.appearance-preview.focus .preview-panel { display: none; }
.appearance-preview.focus .preview-rail { align-items: center; padding: 10px 4px; }
.appearance-preview.focus .preview-rail i { width: 18px; height: 18px; }
.appearance-save { margin-top: 2px; }

/* Issue #187 under ADR 0178: each member's text size and font style.
   The root size is a percentage of the browser size and every text size is in rem,
   so browser zoom and the browser or system text size still apply. */
@font-face { font-family: "Console Sans"; src: url('./operator-fonts/noto-sans-400.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: "Console Sans"; src: url('./operator-fonts/noto-sans-600.ttf') format('truetype'); font-weight: 500 700; font-display: swap; }
html[data-text-size="90"] { font-size: 90%; }
html[data-text-size="110"] { font-size: 110%; }
html[data-text-size="125"] { font-size: 125%; }
html[data-text-size="140"] { font-size: 140%; }
:root {
  --font-condensed: "Console Plex", "Arial Narrow", ui-sans-serif, system-ui, sans-serif;
  --font-standard: "Console Sans", "Noto Sans", ui-sans-serif, system-ui, sans-serif;
  --font-system: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}
html[data-font="standard"] { --sans: var(--font-standard); }
html[data-font="system"] { --sans: var(--font-system); }
[data-font-choice="condensed"] { font-family: var(--font-condensed); }
[data-font-choice="standard"] { font-family: var(--font-standard); }
[data-font-choice="system"] { font-family: var(--font-system); }
/* Code and technical identifiers keep the monospace font in every style. */
pre, kbd, samp { font-family: var(--mono); }
.text-size-control { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.text-size-control button { min-width: 44px; min-height: 40px; padding: 6px 12px; border: 1px solid var(--line); }
.text-size-control output { min-width: 4.5em; text-align: center; font-variant-numeric: tabular-nums; }
.text-preview { margin: 4px 0 12px; padding: 12px; border: 1px solid var(--line); background: var(--surface); overflow-wrap: anywhere; }
.text-preview p { margin: 0 0 6px; line-height: 1.45; }
.text-preview code { font-size: 0.85em; }
.appearance-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

@media (min-width: 701px) {
  html[data-layout="focus"] .app,
  html[data-layout="focus"] .app.panel-hidden,
  html[data-layout="focus"] .app.panel-shown { grid-template-columns: 68px minmax(0, 1fr); }
  html[data-layout="focus"] .app > .rail .rail-top,
  html[data-layout="focus"] .app > .rail .search,
  html[data-layout="focus"] .app > .rail .recent-chats { display: none; }
  html[data-layout="focus"] .app > .rail .bot-list { padding: 8px 6px; }
  html[data-layout="focus"] .app > .rail .bot-item { justify-content: center; align-items: center; min-height: 52px; padding: 6px; gap: 0; }
  html[data-layout="focus"] .app > .rail .bot-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html[data-layout="focus"] .app > .rail .account-name,
  html[data-layout="focus"] .app > .rail .account-email { display: none; }
  html[data-layout="focus"] .app > .rail .rail-link.account .avatar { flex: none; }
  /* GUI sweep #100: rooms keep their name in a tooltip; the bottom links stay in view. */
  html[data-layout="focus"] .app > .rail .room-rail-head { justify-content: center; padding: 8px 6px 2px; }
  html[data-layout="focus"] .app > .rail .room-rail-head .eyebrow { display: none; }
  html[data-layout="focus"] .app > .rail .room-list { padding: 4px 6px; }
  html[data-layout="focus"] .app > .rail .rail-bottom { flex-shrink: 0; }
  html[data-layout="focus"] .app .panel { display: none; }
  html[data-layout="focus"] .app.panel-shown .panel {
    display: flex; position: fixed; right: 0; top: 0; bottom: 0; z-index: 38;
    width: min(380px, calc(100vw - 68px)); box-shadow: -12px 0 48px #0006;
  }
  html[data-layout="focus"] #chat-history { max-width: none; }
  html[data-layout="focus"] .composer { width: calc(100% - 36px); margin: 0 auto 16px; }
  html[data-layout="focus"] .app #show-panel { display: inline-flex !important; }
  html[data-layout="focus"] .app.panel-shown #show-panel { display: none !important; }
  html[data-layout="focus"] .mobile-navigation-control { display: inline-grid; flex-shrink: 0; }
  html[data-layout="focus"] #mobile-navigation {
    margin: 0; width: min(340px, calc(100vw - 32px)); height: 100dvh;
  }
  html[data-layout="focus"] #mobile-navigation .rail { display: flex; height: 100%; }
  html[data-layout="focus"] #mobile-navigation .icon,
  html[data-layout="focus"] #mobile-navigation .rail-link,
  html[data-layout="focus"] #mobile-navigation .bot-item { min-height: 44px; }
}

/* #181 (ADR 0178, Console v2 frame): separate panes on the ground colour with 8px gaps, a compact
 * rail of state dots and names, and a context column of captioned panes. The focus layout keeps its
 * icon rail, so the avatars and glyphs stay there. Phones keep the #166 layout. */
.cap { margin: 0; font-size: 0.6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.bot-state-dot { display: none; }
@media (min-width: 701px) {
  .app { gap: 8px; padding: 8px; background: var(--bg); }
  .app > .rail, .app > .chat, .app > .pane-columns, .app > #timeline { border: 1px solid var(--line); background: var(--panel); }
  .app > .pane-columns { gap: 8px; background: transparent; border: 0; }
  .app > .pane-columns > .pane { border: 1px solid var(--line); background: var(--panel); }
  #app.popout, #app.popout > .pane-columns > .pane { gap: 0; padding: 0; border: 0; }
  .app > .chat .chat-head { min-height: 40px; padding: 6px 12px; border-bottom-color: var(--line); }

  .app > .rail .rail-top { padding: 6px 10px; border-bottom: 1px solid var(--line); }
  .app > .rail .rail-group-name, .app > .rail .eyebrow { font-size: 0.6875rem; font-weight: 600; letter-spacing: .08em; color: var(--muted); }
  .app > .rail .bot-list { padding: 4px 0; }
  .app > .rail .bot-item { align-items: center; gap: 8px; padding: 6px 12px; border-left: 2px solid transparent; font-size: 0.8125rem; font-weight: 400; }
  .app > .rail .bot-item.active { background: var(--surface); border-left-color: var(--run); font-weight: 600; }
  .app > .rail .bot-item .bot-name { font-size: 0.8125rem; }
  .app > .rail .bot-item .bot-tag { padding: 0; border: 0; background: none; color: var(--muted); font-size: 0.6875rem; font-weight: 400; }
  .app > .rail .bot-preview, .app > .rail .bot-when { display: none; }
  .app > .rail .bot-avatar-shell { display: none; }
  .app > .rail .bot-state-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--text); }
  .app > .rail .bot-state-dot.running { background: var(--run); border-color: var(--run); }
  .app > .rail .bot-state-dot.attention { background: var(--stale); border-color: var(--stale); }
  .app > .rail .rail-link.account .avatar { width: 20px; height: 20px; font-size: 0.6875rem; }

  .app > .panel { gap: 8px; padding: 0; border: 0; background: transparent; }
  .app > .panel > .panel-top { align-items: center; gap: 2px; padding: 2px 4px 2px 10px; border: 1px solid var(--line); border-bottom: 0; background: var(--panel); }
  .app > .panel > .panel-top .cap { flex: 1; }
  .app > .panel > .panel-top .icon { width: 26px; height: 26px; font-size: 0.9375rem; }
  /* Keep room for the selected bot panel when large text makes computer controls taller. */
  .app > .panel > #computer { flex-shrink: 0; max-height: max(10rem, calc(100% - 15rem)); overflow-y: auto; margin-top: -8px; padding: 0 10px 10px; border: 1px solid var(--line); border-top: 0; background: var(--panel); }
  .app > .panel > #computer .screen:has(#desktop-frame[hidden]):not(.expanded):not(.in-pane) { cursor: default; }
  .app > .panel > #computer .screen:has(#desktop-frame[hidden]) .monitor { display: none; }
  .app > .panel > #computer .screen:has(#desktop-frame[hidden]) .desktop-placeholder { position: static; padding: 10px; text-align: left; }
  .app > .panel > .panel-view-switch { position: static; margin: 0; padding: 0; gap: 0; grid-template-columns: repeat(3, auto); border: 1px solid var(--line); background: var(--panel); }
  .app > .panel > .panel-view-switch.assistant-views { grid-template-columns: repeat(2, auto); }
  .app > .panel > .panel-view-switch button { padding: 7px 4px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-size: 0.6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
  .app > .panel > .panel-view-switch button[aria-pressed="true"] { background: transparent; border-bottom-color: var(--run); color: var(--text); }
  .app > .panel > .panel-view-switch + section, .app > .panel > .panel-view-switch ~ section:not([hidden]) { margin-top: -8px; padding: 10px; border: 1px solid var(--line); border-top: 0; background: var(--panel); }

  html[data-layout="focus"] .app > .rail .bot-avatar-shell { display: inline-flex; }
  html[data-layout="focus"] .app > .rail .bot-state-dot { display: none; }
  html[data-layout="focus"] .app > .rail .bot-item { border-left: 0; }
}

/* #182 (ADR 0178, Console v2 chat): the conversation is a log, not bubbles. A gutter names the time
 * and who wrote each part; a running turn sits in a bordered box with its steps, the step it is on,
 * and what it read. Phones put the gutter above each part. */
.log-row { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 10px; min-width: 0; }
.log-who { padding-top: 2px; font-size: 0.75rem; color: var(--muted); white-space: nowrap; }
.log-row.bot .log-who { color: var(--text); }
.log-row.bot.running .log-who { color: var(--run); }
.log-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.log-body > button { align-self: flex-start; padding: 6px 12px; font-size: 0.75rem; }
.log-body > .chat-attachments { justify-content: flex-start; }
.chat-turn { gap: 10px; }
.chat-turn .chat-user, .chat-turn .chat-answer { align-self: stretch; max-width: 900px; padding: 0; background: transparent; line-height: 1.5; }
.chat-turn .chat-answer.unverified { padding: 6px 8px; }
.run-box { align-self: stretch; max-width: 900px; border: 1px solid var(--line); background: var(--bg); }
.run-box > .chat-activity { max-width: none; padding: 0; }
.run-box > .chat-activity > summary { display: flex; width: 100%; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 0.75rem; color: var(--text); }
.run-box > .chat-activity > summary [role="status"] { color: var(--run); }
.run-box .chat-activity-hint { color: var(--muted); }
.run-box .chat-activity-body { padding: 6px 10px; border-bottom: 1px solid var(--line); }
.run-box .chat-action { padding: 3px 0; border-bottom: 1px solid var(--surface); font-family: var(--mono); font-size: 0.75rem; }
.run-box-live { display: grid; gap: 3px; padding: 6px 10px; font-family: var(--mono); font-size: 0.75rem; }
.run-box-live:empty { display: none; }
.run-box-live p { margin: 0; }
.run-box-live .chat-live-action { color: var(--text); }
/* Issue #590: the step the bot is on fades in when it changes; a plan shows how much of it is done.
 * home.css stops the fade and the ring under prefers-reduced-motion; the text still changes. */
@keyframes run-box-step-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
html:not([data-interface-mode="simple"]) .run-box > .chat-activity > summary .chat-activity-pulse { width: 9px; height: 9px; background: var(--run); animation: v2-ring 1.6s ease-out infinite; }
.run-box .run-box-step { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; animation: run-box-step-in .35s ease-out; }
.run-box .run-box-meta { flex: 1 0 auto; color: var(--muted); }
.run-box > .chat-activity > summary > :not(.run-box-step) { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 600px) { .run-box > .chat-activity > summary { flex-wrap: wrap; row-gap: 2px; } .run-box .run-box-step { order: 1; flex-basis: 100%; padding-left: 19px; } }
.run-box-plan { display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 10px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 0.75rem; color: var(--muted); }
.run-box-plan > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-box-plan progress { flex: none; width: 96px; height: 6px; appearance: none; border: 0; background: var(--line); accent-color: var(--run); }
.run-box-plan progress::-webkit-progress-bar { background: var(--line); }
.run-box-plan progress::-webkit-progress-value { background: var(--run); transition: width .4s ease-out; }
.run-box-plan progress::-moz-progress-bar { background: var(--run); }
@media (max-width: 700px) {
  .log-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
/* The owner (2026-10-23): who wrote each message, alike in bot chats, rooms, and both assistants. A line
 * above the text names the writer and the time; the person's message is a tinted block with an accent bar,
 * and a reply has no box. Each scheme's --surface and --accent keep text at 4.5:1 and the bar at 3:1. */
:root { --said-tint: var(--surface); --said-bar: var(--accent); }
.said, .log-row.said { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.said-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; margin: 0; padding: 0; font-size: 0.75rem; line-height: 1.35; white-space: nowrap; }
.said-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: var(--text); }
.said-time { flex-shrink: 0; font-family: var(--mono); color: var(--muted); }
.said-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.said-person { padding: 8px 12px 10px; border-left: 3px solid var(--said-bar); background: var(--said-tint); color: var(--text); }
.said-person .chat-user { color: var(--text); }
.said-reply { padding: 0 0 0 15px; }
.log-row.bot.said .log-who { color: var(--text); }
.log-row.bot.said.running .said-who { color: var(--run); }
.chat-turn:has(> .log-row.said) { gap: 14px; }
.assistant-thread .said-item { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.assistant-thread .said-item.user:not(:first-of-type), .routine-results .said-person { margin-top: 14px; }
.assistant-thread .said-item.assistant { margin-top: 10px; }
.assistant-thread .said.chat-turn, .routine-results .said.chat-turn { gap: 4px; }
/* A room keeps its time and writer column; a person's post is tinted the same way. */
.room-post.said-person { padding: 6px 10px 8px; }
.room-post.said-person .room-who { color: var(--text); font-weight: 600; }
.routine-draft-card .routine-draft-prompt { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .said-person { padding: 6px 10px 8px; }
  .said-reply { padding-left: 13px; }
}
/* #182: the header's run strip: the latest run's state, time, calls, tokens and cost, and Stop. */
.run-strip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; font-size: 0.75rem; color: var(--muted); }
.run-strip-state { color: var(--text); }
.run-strip.running .run-strip-state, .run-strip.canceling .run-strip-state { color: var(--run); }
.run-strip.failed .run-strip-state { color: var(--fail); }
.run-strip.paused .run-strip-state, .run-strip.check .run-strip-state { color: var(--stale); }
.run-strip-stop { padding: 3px 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 0.75rem; font-weight: 400; }
.run-strip-stop kbd { margin-left: 4px; padding: 0 4px; border: 1px solid var(--line); font-family: var(--mono); font-size: 0.6875rem; color: var(--muted); }
/* The owner (2026-10-22): the line is the state, a clock and the cost; Run details holds the rest. */
.run-strip-info { min-width: 0; min-height: 0; padding: 2px 4px; border: 0; background: transparent; color: var(--muted); font-size: 0.875rem; line-height: 1; box-shadow: none; }
.run-strip-info:hover, .run-strip-info[aria-expanded="true"] { color: var(--text); filter: none; }
.run-strip-info:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (pointer: coarse) { .run-strip-info { min-width: 32px; min-height: 32px; } }
.run-details { position: fixed; z-index: 85; width: max-content; max-width: min(20rem, calc(100vw - 16px)); max-height: calc(100dvh - 16px); overflow: auto;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 0; background: var(--panel); color: var(--text); box-shadow: 0 6px 20px #0004; font-size: 0.8125rem; }
.run-details:focus { outline: none; }
.run-details:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.run-details-title { margin: 0 0 6px; }
.run-details dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; margin: 0; }
.run-details dl > div { display: contents; }
.run-details dt { color: var(--muted); }
.run-details dd { margin: 0; overflow-wrap: anywhere; }
/* The owner (2026-10-22): the connection status shows only when it is not healthy. The healthy
 * text stays in the live region, visually hidden; an unhealthy one is short, with its tone. */
.chat-head #chat-status[data-normal="true"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.chat-head #chat-status[data-tone="busy"] { color: var(--stale); }
.chat-head #chat-status[data-tone="error"] { color: var(--fail); }
.chat-head #chat-status:is([data-tone="busy"], [data-tone="error"])::before { content: "● "; font-size: 0.625rem; vertical-align: 1px; }
/* #182: the composer: a captioned field on the ground colour, a worded Attach and a cyan Send. */
.composer-field { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; }
/* ADR 0202: the command list above the message field, the /help note, and the command notice.
 * The owner (2026-10-22): the list and the /help note are as wide as the whole composer, from Retry to Send,
 * so a phone or a narrow panel does not squeeze them beside the buttons. The list opens above the composer. */
#chat-form { position: relative; }
#chat-form:has(> .chat-command-help) { flex-wrap: wrap; }
#chat-form > .chat-command-help { order: -1; flex: 1 0 100%; min-width: 0; box-sizing: border-box; }
.chat-commands { position: absolute; left: 0; right: 0; bottom: 100%; z-index: 40; margin: 0 0 6px; padding: 4px 0; list-style: none;
  max-height: min(50vh, 360px); overflow-y: auto; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 8px 24px #0004; }
/* The owner (2026-10-22): a command name keeps one line unless it is wider than the row, and the summary moves
 * under the name when the row is too narrow for both, so no row is wider than the composer. */
.chat-commands li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-height: 44px; padding: 8px 12px; cursor: pointer; box-sizing: border-box; }
.chat-commands li.active, .chat-commands li:hover { background: var(--surface-active); }
.chat-command-name { flex: none; min-width: 7rem; max-width: 100%; overflow-wrap: anywhere; font-family: var(--mono); color: var(--text); }
.chat-command-summary { flex: 1 1 8rem; min-width: 0; color: var(--muted); font-size: 0.8125rem; }
/* ADR 0202 note 2026-10-21: a skill command is marked, and a long skill name wraps instead of widening the list.
 * A skill summary is written by its author and can be long: it truncates to one line, and its title keeps it whole. */
.chat-commands li:has(.chat-command-tag) .chat-command-name { min-width: 0; }
.chat-commands li:has(.chat-command-tag) .chat-command-summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-command-tag { flex: none; padding: 0 6px; border: 1px solid var(--line); color: var(--text); font-size: 0.75rem; }
/* The longer mark of a personal skill that attaches on use may wrap on a phone. */
.chat-command-tag.attaches { flex: 0 1 auto; min-width: 0; }
.chat-command-help-skills { margin: 10px 0 2px; font-size: 0.875rem; }
.chat-command-help dt { overflow-wrap: anywhere; }
.chat-command-help { border: 1px solid var(--line); background: var(--panel); padding: 10px 12px; max-height: min(50vh, 420px); overflow-y: auto; }
.chat-command-help-head { display: flex; align-items: center; justify-content: space-between; }
.chat-command-help dl { margin: 6px 0 0; }
.chat-command-help dl > div { display: flex; gap: 12px; padding: 3px 0; }
.chat-command-help dt { flex: none; min-width: 9rem; font-family: var(--mono); }
.chat-command-help dd { margin: 0; color: var(--muted); }
.chat-command-notice { margin: 0; font-size: 0.8125rem; color: var(--muted); }
/* Issue #244 (owner, 2026-10-23): a finished change is in the success colour with a check; a refusal in the danger colour with a cross. */
.chat-command-notice.success, .chat-command-notice.refused { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.chat-command-notice.success { color: var(--success); }
.chat-command-notice.refused { color: var(--danger); }
.chat-command-mark { flex: none; }
/* The row a saved note leaves in the conversation. It is local to the tab, not a message. */
.chat-local-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 12px; border: 1px solid var(--success);
  border-left-width: 4px; background: var(--success-tint); color: var(--text); font-size: 0.8125rem; line-height: 1.4;
  animation: chat-local-notice-in 200ms ease-out; }
.chat-local-notice-icon { flex: none; color: var(--success); }
.chat-local-notice-body { display: flex; align-items: baseline; gap: 8px; flex: 1 1 14rem; min-width: 0; }
.chat-local-notice-title { flex: none; color: var(--success); white-space: nowrap; }
.chat-local-notice-quote { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.chat-local-notice-error { flex-basis: 100%; margin: 0; color: var(--danger); }
@keyframes chat-local-notice-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .chat-local-notice { animation: none; } }
/* Inline confirmations and the actions beside a notice are buttons that look like buttons (owner, 2026-10-23):
   the confirming choice is filled, the other is bordered, and both are at least 36 px tall (44 px on a phone). */
.room-confirm > button, .chat-command-action, .chat-local-notice-action, .chat-reconnect { min-height: 36px; padding: 6px 14px; }
.room-confirm > button:is(.secondary, .quiet), .chat-command-action, .chat-local-notice-action, .chat-reconnect {
  border: 1px solid var(--muted); background: var(--panel); color: var(--text); }
.room-confirm > button:is(.secondary, .quiet):hover:not(:disabled), .chat-command-action:hover:not(:disabled),
.chat-local-notice-action:hover:not(:disabled), .chat-reconnect:hover:not(:disabled) { border-color: var(--accent); background: var(--appearance-hover, var(--surface-active)); }
.room-confirm > button:is(.danger, .danger-text) { border-color: var(--danger); color: var(--danger); }
.room-confirm > button:not(.secondary, .quiet, .danger, .danger-text) { border: 1px solid var(--accent); background: var(--accent); color: var(--appearance-button-text, var(--on-accent)); }
.room-confirm > button:focus-visible, .chat-command-action:focus-visible, .chat-local-notice-action:focus-visible, .chat-reconnect:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 700px) { .room-confirm > button, .chat-command-action, .chat-local-notice-action, .chat-reconnect { min-height: 44px; } }
/* Issue #244: the one control a refused command may offer, such as Start computer; the notes view; a notes save. */
.chat-command-action { align-self: flex-start; margin: 2px 0 4px; }
.workspace-notes { display: grid; gap: 8px; }
.workspace-notes .section-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.workspace-notes h2 { margin: 0; }
.workspace-notes p { margin: 0; }
.workspace-notes-scope { display: flex; gap: 4px; }
.workspace-notes-scope button[aria-pressed="true"] { background: var(--surface-active); color: var(--text); border-color: var(--text); }
.workspace-notes-path code { overflow-wrap: anywhere; }
.workspace-notes-off { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.workspace-notes-form { display: grid; gap: 6px; }
.workspace-notes-form textarea { font-family: var(--mono, ui-monospace, monospace); font-size: 0.8125rem; min-height: 14em; resize: vertical; width: 100%; box-sizing: border-box; }
.workspace-notes-form .error { color: var(--danger); }
.workspace-notes-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 720px) { .workspace-notes button { min-height: 44px; } }
.chat-notes-saved { margin: 4px 0 0; font-size: 0.8125rem; }
.step-table tr.notes-save .step-arguments { color: var(--text); font-weight: 600; }
/* ADR 0202 amendment of 2026-10-21: the conversation title in the chat header and its Rename control. */
.chat-conversation-title { display: flex; align-items: center; gap: 4px; min-width: 0; flex: 0 1 auto; font-size: 0.875rem; }
.chat-conversation-title .crumb-sep { color: var(--muted); }
.chat-conversation-name { min-width: 3rem; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.chat-rename { flex: none; min-width: 28px; min-height: 28px; padding: 0 4px; border: 0; background: none; color: var(--muted); font: inherit; cursor: pointer; }
.chat-rename:hover, .chat-rename:focus-visible { color: var(--text); }
.chat-rename-form { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; margin: 0; }
.chat-rename-form input { width: min(320px, 40vw); min-width: 0; min-height: 28px; padding: 2px 6px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; }
.chat-rename-form button { min-height: 28px; padding: 2px 8px; }
.chat-rename-problem { flex-basis: 100%; color: var(--fail); font-size: 0.75rem; }
body:is(.room-open, .assistant-open) .chat-conversation-title { display: none; }
/* ADR 0204: the results of a search of the member's own conversations, under the rail's search box. */
.conversation-search-host:empty { display: none; }
.conversation-search { display: flex; flex-direction: column; gap: 4px; max-height: min(60vh, 32rem); overflow-y: auto; margin: 0 8px 8px; padding: 6px 4px; border-bottom: 1px solid var(--line); }
.conversation-search-head { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 0 4px; }
.conversation-search-head h3 { margin: 0; font-size: 0.8125rem; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.conversation-search-clear { flex: none; min-width: 32px; min-height: 32px; }
.conversation-search-results { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.conversation-search-result { display: flex; flex-direction: column; align-items: stretch; gap: 2px; width: 100%; min-height: 44px; padding: 6px 8px; border: 0; border-left: 2px solid transparent; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.conversation-search-result:hover, .conversation-search-result:focus-visible { background: var(--surface); border-left-color: var(--run); filter: none; }
.conversation-search-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8125rem; font-weight: 600; }
.conversation-search-meta { color: var(--muted); font-size: 0.75rem; }
.conversation-search-snippet { color: var(--text); font-size: 0.75rem; line-height: 1.4; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.conversation-search-snippet mark { background: none; color: inherit; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; }
.conversation-search-empty, .conversation-search :is(p.muted) { margin: 0; padding: 2px 4px; color: var(--muted); }
.conversation-search-problem { margin: 0; padding: 2px 4px; color: var(--fail); }
.conversation-search-more { align-self: flex-start; margin: 2px 4px; min-height: 32px; }
.rail-search-conversations button { width: 100%; min-height: 36px; padding: 6px 12px; text-align: left; color: var(--text); font-size: 0.8125rem; text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 701px) {
  .rail[data-view="rooms"] .conversation-search-host { display: none; }
  html[data-layout="focus"] .app > .rail .conversation-search-host { display: none; }
}
article.chat-turn.search-hit { outline: 2px solid var(--run); outline-offset: 2px; }
article.chat-turn:focus { outline: 2px solid var(--run); outline-offset: 2px; }
@media (max-width: 700px) {
  .conversation-search-clear, .conversation-search-more, .rail-search-conversations button { min-height: 44px; min-width: 44px; }
  .conversation-search { max-height: none; overflow: visible; }
}
/* A narrow header wraps the run strip under the title, so no item covers another. */
@media (min-width: 701px) { .app > .chat .chat-title:has(.chat-conversation-title) { flex-wrap: wrap; row-gap: 2px; } }
@media (max-width: 700px) {
  .chat-command-name { min-width: 5.5rem; }
  .chat-command-help dl > div { flex-direction: column; gap: 0; }
}
.composer-attach-word { display: none; }
@media (min-width: 701px) {
  .app .composer { align-items: flex-end; margin: 0; padding: 10px 14px; border: 0; border-top: 1px solid var(--line); background: transparent; }
  .app .composer textarea { min-height: 44px; padding: 8px; border: 1px solid var(--line); background: var(--bg); resize: vertical; }
  .app .composer .icon { height: 44px; border: 1px solid var(--line); background: var(--surface); }
  .app .composer .composer-attach { width: auto; padding: 0 14px; font-size: 0.8125rem; }
  .app .composer .composer-attach > [aria-hidden] { display: none; }
  .app .composer .composer-attach-word { display: inline; }
  .app .composer #send-chat { height: 44px; padding: 0 18px; background: var(--run); color: var(--bg); font-size: 0.8125rem; }
}
@media (min-width: 701px) {
  /* The owner (2026-10-22): when the centre column is narrow, the status and the Layout tabs move
     to a second row under the title. They do not shrink into a truncated status or stacked tabs. */
  .app > .chat .chat-head { flex-wrap: wrap; row-gap: 4px; }
  .app > .chat .chat-title { flex: 1 1 24rem; min-width: 0; }
  .app > .chat .chat-crumb { flex: 0 4 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .app > .chat .chat-title:has(.chat-conversation-title) .chat-conversation-title { flex: 1 1 0; min-width: 6rem; }
  .app > .chat .chat-title:has(.chat-conversation-title) .run-strip { flex-basis: 100%; }
  .app > .chat .chat-bot-name { flex: 0 1 auto; max-width: 240px; }
  .app > .chat .run-strip { flex-wrap: nowrap; overflow: hidden; }
  .app > .chat .run-strip > * { flex: none; white-space: nowrap; }
  /* The top bar names the company; the header keeps its room for the run. */
  .app > .chat #tenant-pill { display: none; }
  .app > .chat .chat-bot-name { min-width: 80px; }
  .app > .chat .chat-meta { flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; min-width: 0; margin-left: auto; }
  .app > .chat #chat-status { flex: 0 1 auto; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
}
/* #182: next steps are small outlined buttons after a NEXT caption. */
.chat-turn .next-steps { align-items: center; }
.chat-turn .next-steps::before { content: "Next"; margin-right: 2px; font-size: 0.625rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.chat-turn .next-steps button { padding: 4px 10px; border: 1px solid var(--line); background: transparent; color: var(--text); font-size: 0.75rem; font-weight: 400; }
.chat-turn .next-steps button:hover { border-color: var(--run); color: var(--run); filter: none; }

/* #183 (ADR 0178, Console v2 navigation): a company page is a pane beside the rail, not a cover over it.
 * One compact row names where you are (Company › page) and, on Admin, carries the page's tabs on its right.
 * Tabs are small outlined buttons with the selected one in the running colour. Phones keep full pages. */
@media (min-width: 701px) {
  .drawer.page { top: calc(var(--chrome-top) + 8px); left: calc(var(--rail-col, 256px) + 16px); right: 8px; bottom: 8px;
    width: auto; border: 1px solid var(--line); background: var(--panel); padding-bottom: 24px; }
  .drawer.page > * { max-width: none; margin-left: 0; margin-right: 0; padding-left: 14px; padding-right: 14px; }
  .drawer.page > .drawer-head { min-height: 40px; margin: 0; padding: 4px 14px; gap: 8px; border-bottom: 1px solid var(--line); background: var(--panel); }
  .drawer.page > .drawer-head h2 { font-size: 0.8125rem; font-weight: 600; }
  .drawer.page .breadcrumb { gap: 6px; font-size: 0.75rem; }
  .drawer.page .page-back { padding: 3px 8px; font-size: 0.75rem; }
  .drawer.page .tabs { gap: 4px; border-bottom: 0; }
  .drawer.page .tab { padding: 3px 10px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 0.75rem; font-weight: 400; }
  .drawer.page .tab.active, .drawer.page .tab[aria-selected="true"] { border-color: var(--run); color: var(--run); box-shadow: none; }
  /* Admin: the tab row sits on the breadcrumb row. */
  #settings.drawer.page { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; }
  #settings.drawer.page > * { grid-column: 1 / -1; }
  #settings.drawer.page > .drawer-head { grid-row: 1; grid-column: 1; border-bottom: 1px solid var(--line); }
  #settings.drawer.page > .tabs { position: sticky; top: 0; z-index: 3; grid-row: 1; grid-column: 2; align-self: stretch; align-items: center;
    margin: 0; padding: 4px 14px 4px 0; border-bottom: 1px solid var(--line); background: var(--panel); }
  .drawer.page .activity-switch button { padding: 3px 10px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 0.75rem; font-weight: 400; }
  .drawer.page .activity-switch button[aria-pressed="true"] { border-color: var(--run); color: var(--run); }
  #settings.drawer.page > .tabs > .tab { align-self: center; min-height: 0; height: 26px; padding: 0 10px; }
}

/* #186 (ADR 0178, Console v2 fidelity D): the motion the agreed design shows, and compact activity lanes.
 * home.css stops every animation under prefers-reduced-motion. */
@keyframes v2-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--run) 75%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
@keyframes v2-head { 0%, 100% { opacity: 1; box-shadow: 0 0 6px var(--run); } 50% { opacity: .4; box-shadow: none; } }
@keyframes v2-lost { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes v2-alarm { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes v2-flash { from { background: color-mix(in srgb, var(--run) 22%, transparent); } to { background: transparent; } }
@keyframes v2-caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.app > .rail .bot-state-dot.running { animation: v2-ring 1.6s ease-out infinite; }
.run-strip-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: currentColor; vertical-align: 0; }
.run-strip.running .run-strip-dot, .run-strip.waiting .run-strip-dot { animation: v2-ring 1.6s ease-out infinite; }
.chat-live-action { animation: v2-flash 1.8s ease-out 1; }
.room-post.fresh { animation: v2-flash 1.8s ease-out 1; }
.room-caret { display: inline-block; width: 7px; height: 13px; margin-left: 4px; background: var(--run); vertical-align: -2px; animation: v2-caret 1s steps(2, jump-none) infinite; }
.activity-status .live-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--run); animation: v2-ring 1.6s ease-out infinite; }
.activity-cells .cell.running { animation: v2-head 1.1s ease-in-out infinite; }
.activity-cells .cell.lost, .activity-mark.bot-lost { animation: v2-lost 2.4s steps(2, jump-none) infinite; }
.activity-cells .cell.frozen { animation: none; }
.activity-state.bot-failed.unacknowledged { animation: v2-alarm 1s steps(2, jump-none) infinite; }
.activity-state.unacknowledged .activity-mark { animation: none; }
@media (min-width: 701px) {
  .activity-lanes { font-size: 0.8125rem; }
  .activity-axis, .activity-person-head, .activity-bot-row { display: grid; grid-template-columns: 11.25rem 9.375rem minmax(0, 1fr) 7.5rem; gap: 10px; align-items: center; margin: 0; }
  .activity-axis { padding: 0 0 4px; font-size: 0.6875rem; color: var(--faint); }
  .activity-ticks { display: flex; justify-content: space-between; }
  .activity-person { padding: 0; }
  .activity-person-head { padding: 4px 0 3px; font-size: 0.8125rem; background: var(--surface); }
  .activity-person-head strong { padding-left: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .activity-presence { display: inline-flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
  .activity-person-head .activity-none { grid-column: 3; margin: 0; }
  .activity-bot-row { padding: 2px 0; font-size: 0.8125rem; }
  .activity-bot-row .activity-bot-name { padding-left: 16px; color: var(--muted); }
  .activity-cells { height: 10px; }
}
@media (max-width: 700px) { .activity-person-head { flex-wrap: wrap; } }

/* Focus layout with the panel shown: the panel is an overlay below the top bar, with a solid ground,
 * and the 68 px rail draws the menu group names as dividers (#285). */
@media (min-width: 701px) {
  html[data-layout="focus"] .app.panel-shown > .panel { top: calc(var(--chrome-top) + 8px); right: 8px; bottom: 8px; padding: 8px; overflow-y: auto; background: var(--bg); border: 1px solid var(--line); }
}

/* #190: a room or the administrative assistant owns the main column, so the bot chat's run strip,
 * its reads line and the computer's caption and buttons do not show there. */
.panel-cap-room { display: none; }
body.room-open .panel-top .panel-cap-computer, body.room-open #expand-screen, body.room-open #open-settings { display: none; }
body.room-open .panel-top .panel-cap-room { display: inline; }
body.room-open .run-strip, body.room-open .composer-line,
body:is(.assistant-open, .audit-assistant-open) :is(.run-strip, .composer-line) { display: none; }

/* #190 (Room-Console): each room post has its 24-hour time and author in a left column, a question's
 * answers have the time and the number of bots asked, and a divider names a day other than today.
 * The breadcrumb row names the room's people, bots and who may join. On a phone the column is a line above. */
.room-facts { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* The facts give way before the header's controls do. */
body.room-open .app > .chat .chat-head .chat-meta, body.room-open #chat-bot-avatar { flex-shrink: 0; }
.room-post.columned, .room-answer-row { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 0 12px; align-items: start; }
.room-when { display: flex; flex-direction: column; margin: 2px 0 0; font-family: var(--mono); font-size: 0.75rem; color: var(--muted); min-width: 0; }
.room-when time { color: var(--muted); }
.room-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-post-body { min-width: 0; }
.room-post.columned .room-post-body > .chat-answer:first-child { margin-top: 0; }
.room-answer-row .room-when { color: var(--run); }
.room-answer-row .room-answers { margin-left: 0; }
.room-day { display: flex; align-items: center; gap: 10px; margin: 12px 0 6px; font-family: var(--mono); font-size: 0.6875rem; }
.room-day::before, .room-day::after { content: ""; flex: 1; border-top: 1px solid var(--line-soft); }
@media (max-width: 700px) {
  .room-post.columned, .room-answer-row { grid-template-columns: minmax(0, 1fr); }
  .room-when { flex-direction: row; gap: 8px; }
  .room-fact-join { display: none; }
}

/* #190 (Room-Console): a question's answers are cards side by side under one head that says who pays and
 * how many are posted. Each card lists its owner, model, sources, state and run, then the answer and its
 * actions. The hand-off menu names each bot's reach. Answers still stack on a phone (ADR 0178). */
/* The live check (2026-10-19): a grid whose head spans every track keeps empty tracks, so one answer took a
   quarter of the row. A wrapping flex row gives the answers the whole width, however many there are. */
.room-answer-row .room-answers { display: flex; flex-wrap: wrap; align-items: stretch; gap: 1px; padding: 0; border: 1px solid var(--line); background: var(--line); }
.room-answer-row .room-answers > * { flex: 1 1 240px; }
.room-answer-row .room-answers > .room-answers-head { flex-basis: 100%; }
.room-answers-head { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; margin: 0; padding: 7px 12px; background: var(--panel); font-family: var(--mono); font-size: 0.75rem; }
.room-answer-row .room-answers > .room-card, .room-answers > .room-review { align-self: stretch; min-width: 0; margin: 0; padding: 10px 12px; background: var(--panel); }
.room-answers > .room-review { border: 0; box-shadow: inset 0 0 0 1px var(--alert-warning); }
.room-card .room-author { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.room-card .room-author time { margin-left: auto; }
.room-card-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.room-card.posted .room-card-dot { background: var(--text); }
.room-card.running .room-card-dot { background: var(--run); animation: v2-ring 1.6s ease-out infinite; }
.room-card.review .room-card-dot { background: transparent; border: 1px dashed var(--stale); }
.room-card-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 12px; margin: 0 0 8px; font-family: var(--mono); font-size: 0.75rem; }
.room-card-facts > div { display: contents; }
.room-card-facts dd { margin: 0; overflow-wrap: anywhere; }
.room-card.running .room-card-facts div:last-child dd { color: var(--run); }
.room-card.review .room-card-facts div:last-child dd { color: var(--stale); }
.room-post.bot.room-card .chat-answer { border-left: 0; padding-left: 0; }
.room-card .room-notice { margin: 4px 0; text-align: left; }
.room-card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.room-card .room-card-actions button { padding: 3px 8px; border: 1px solid var(--line); background: transparent; color: var(--text); font-size: 0.75rem; font-weight: 400; }
.room-handoff-menu { display: flex; flex-direction: column; margin-top: 6px; border: 1px solid var(--accent); background: var(--bg); }
.room-handoff-option { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; border: 0; border-bottom: 1px solid var(--line-soft); background: transparent; color: var(--text); font-weight: 400; text-align: left; }
.room-handoff-option:hover, .room-handoff-option:focus-visible { background: var(--surface-hover); }
.room-handoff-menu > p { margin: 0; padding: 8px 10px; }
.room-ask-cap { margin-right: 2px; }
.room-composer > .room-estimate { flex-basis: auto; align-self: flex-end; margin: 0 4px 6px auto; white-space: nowrap; text-align: right; }
@media (max-width: 700px) {
  .room-answer-row .room-answers > * { flex-basis: 100%; }
  .room-handoff-option, .room-card .room-card-actions button { min-height: 44px; }
  .room-ask-cap { display: none; }
  .room-composer > .room-estimate { flex-basis: 100%; margin: 0 0 4px; }
}

/* #190 (Room-Console): the room panel is a stack of titled panes: your reviews here, instructions, bots,
 * people, folder, routines, and the room spend today. Each pane has a caption row with its figures. */
.room-panel { gap: 8px; }
.room-panel .room-pane { margin: 0; padding: 0 10px 10px; border: 1px solid var(--line); background: var(--panel); }
.room-panel .room-pane > .room-pane-head { display: flex; align-items: baseline; gap: 8px; margin: 0 -10px 8px; padding: 7px 10px; border-bottom: 1px solid var(--line); }
.room-panel .room-pane-head .room-pane-meta { margin-left: auto; font-family: var(--mono); font-weight: 400; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.room-panel .room-reviews { border-color: var(--alert-warning); }
.room-reviews ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.room-reviews li { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.room-panel .room-bot-card { margin-bottom: 6px; }
.room-panel .room-panel-foot { border-top: 0; }

/* #188 (Split-Linked): split panes take the width. The rail opens from ☰ as in the focus layout, and the
 * context panel opens from ▥ as an overlay below the top bar. A popped-out window keeps its own frame. */
@media (min-width: 701px) {
  #app.split:not(.popout), #app.split.panel-hidden:not(.popout), #app.split.panel-shown:not(.popout) { --rail-col: 0px; grid-template-columns: minmax(0, 1fr) var(--pane-columns); }
  #app.split:not(.popout) > .rail { display: none; }
  #app.split:not(.popout) > #timeline { grid-column: 1 / -1; }
  #app.split:not(.popout) > .panel { display: none; }
  #app.split.panel-shown:not(.popout) > .panel { display: flex; position: fixed; top: calc(var(--chrome-top) + 8px); right: 8px; bottom: 8px; z-index: 38;
    width: min(380px, calc(100vw - 32px)); padding: 8px; overflow-y: auto; background: var(--bg); border: 1px solid var(--line); box-shadow: -12px 0 48px #0006; }
  /* The one desktop view lives in the panel. With "Your computer" in a pane the panel stays rendered for it,
     but out of the grid and unseen, so the panes keep their columns and the screen sits over its pane. */
  #app.split.desktop-in-pane:not(.panel-shown):not(.popout) > .panel { display: flex !important; position: fixed; top: 0; left: 0; width: 0; height: 0;
    padding: 0; border: 0; overflow: visible; visibility: hidden; }
  #app.split.desktop-in-pane:not(.panel-shown):not(.popout) > .panel .screen.in-pane { visibility: visible; }
  /* A narrow chat column puts the status and the Layout tabs on their own row, not over the bot's name. */
  #app.split:not(.popout) .chat-head { flex-wrap: wrap; row-gap: 4px; }
  #app.split:not(.popout) .chat-head .chat-meta { margin-left: auto; }
  #app.split:not(.popout) #show-panel { display: inline-flex !important; }
  #app.split.panel-shown:not(.popout) #show-panel { display: none !important; }
  #app.split:not(.popout) .mobile-navigation-control { display: inline-grid; flex-shrink: 0; }
  html:has(#app.split:not(.popout)) #mobile-navigation { margin: 0; width: min(340px, calc(100vw - 32px)); height: 100dvh; }
  html:has(#app.split:not(.popout)) #mobile-navigation .rail { display: flex; height: 100%; }
}

/* #188: the Activity view switch shows its pressed view at every width, and presence keeps its gap. */
.activity-switch button[aria-pressed="true"] { border: 1px solid var(--run); color: var(--run); }
.activity-presence { display: inline-flex; align-items: center; gap: 8px; }

/* #188 (Console v2): My work first with the bots under Bots, an edge-to-edge rail, and the
   top bar clock, update age and STALE state. */
.rail-bots-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 6px 0 12px; font-size: 0.8125rem; }
.rail-bots-head .icon { width: auto; height: auto; min-width: 26px; min-height: 26px; padding: 0 6px; line-height: 1.4; }
.live-state { display: inline-flex; align-items: center; gap: 6px; }
.live-detail { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); }
.live-indicator.stale, .live-detail.stale { color: var(--stale); }
.live-indicator.stale .live-mark { border-radius: 0; background: transparent; border: 1.5px solid currentColor; }
.console-clock { padding: 2px 4px; border: 0; background: transparent; color: var(--text); font-family: var(--mono); font-size: 0.75rem; font-weight: 400; }
.console-clock:hover { background: var(--surface); filter: none; }
.console-clock[aria-pressed="true"] .console-zone { color: var(--run); }
.account-caret { color: var(--muted); font-size: 0.625rem; }
@media (min-width: 701px) {
  .app > .rail :is(.bot-list, .assistant-rail) .bot-item { padding-left: 24px; }
  .app:not(.popout) > .rail { margin: -8px 0 -8px -8px; border: 0; border-right: 1px solid var(--line); }
  html[data-layout="focus"] .app > .rail .rail-bots-head { display: none; }
}
@media (max-width: 700px) {
  .live-detail, .account-caret { display: none; }
}

/* Owner request 2026-10-23: the top bar computer status beside the live indicator, as its sibling:
   the same mono type, size, capitals, letter spacing and height, and no border box. A monitor icon
   in currentColor carries the state as its colour and as the dot on its corner: success on, accent
   starting, muted off and before the first status, danger unavailable. The dot pulses like the LIVE
   mark only while the computer is on, and fades slowly while it starts; home.css stops both under
   reduced motion. A top bar of 960 px or less shows the icon only; the name and tooltip keep the words. */
.live-indicator.stale { text-transform: none; letter-spacing: 0; }
.computer-chip-place { position: relative; display: inline-flex; align-items: center; }
.computer-chip-place[hidden] { display: none; }
.computer-chip { --chip-cut: var(--rail); display: inline-flex; align-items: center; gap: 6px; min-height: 0; padding: 2px 4px; border: 0;
  border-radius: 4px; background: transparent; font-family: var(--mono); font-size: 0.75rem; font-weight: 400; line-height: inherit;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.computer-chip:hover { --chip-cut: var(--surface); background: var(--surface); filter: none; }
.computer-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.computer-chip.on { color: var(--success); }
.computer-chip.starting { color: var(--accent); }
.computer-chip.off, .computer-chip.checking { color: var(--muted); }
.computer-chip.unavailable { color: var(--danger); }
.computer-chip-icon { position: relative; display: inline-flex; flex: none; width: 14px; height: 14px; }
.computer-chip-icon svg { display: block; }
.computer-chip-dot { position: absolute; right: -2px; top: 6px; width: 6px; height: 6px; box-sizing: border-box; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 0 1.5px var(--chip-cut, var(--rail)); }
.computer-chip.off .computer-chip-dot, .computer-chip-popover.off .computer-chip-dot { background: var(--chip-cut, var(--rail)); border: 1.5px solid currentColor; }
.computer-chip.unavailable .computer-chip-dot, .computer-chip-popover.unavailable .computer-chip-dot { border-radius: 0; }
.computer-chip.checking .computer-chip-dot, .computer-chip-popover.checking .computer-chip-dot { display: none; }
.computer-chip.checking .computer-chip-icon svg { stroke-dasharray: 2 2; }
.computer-chip-dot.pulse { animation: computer-chip-ring 1.6s ease-out infinite; }
.computer-chip.starting .computer-chip-dot { animation: computer-chip-fade 2.4s ease-in-out infinite; }
@keyframes computer-chip-ring { 0% { box-shadow: 0 0 0 1.5px var(--chip-cut, var(--rail)), 0 0 0 1.5px color-mix(in srgb, currentColor 75%, transparent); }
  70%, 100% { box-shadow: 0 0 0 1.5px var(--chip-cut, var(--rail)), 0 0 0 6px transparent; } }
@keyframes computer-chip-fade { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) {
  .computer-chip-dot.pulse, .computer-chip.starting .computer-chip-dot { animation: none; }
}
.computer-chip-popover { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; display: grid; gap: 6px; min-width: 200px; max-width: min(280px, calc(100vw - 32px));
  padding: 10px 12px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 0.8125rem; white-space: normal; box-shadow: 0 6px 18px rgb(0 0 0 / 0.25); }
.computer-chip-popover { --chip-cut: var(--panel); }
.computer-chip-popover-state { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); }
.computer-chip-popover.on .computer-chip-popover-state { color: var(--success); }
.computer-chip-popover.starting .computer-chip-popover-state { color: var(--accent); }
.computer-chip-popover.unavailable .computer-chip-popover-state { color: var(--danger); }
.computer-chip-popover-reason { color: var(--muted); }
/* A narrow top bar keeps the icon only; the name and the tooltip keep the words. */
@media (max-width: 960px) {
  .computer-chip-text { display: none; }
}
@media (max-width: 700px) {
  .computer-chip { min-width: 44px; min-height: 44px; justify-content: center; padding: 0 8px; }
  .computer-chip-text { display: none; }
  .computer-chip-popover { position: fixed; top: calc(var(--chrome-top) + 6px); left: 16px; right: 16px; max-width: none; }
}

/* Console v2 motion: a solid cursor blinks after an answer that is still coming, and Usage
   shows running work: a ringing dot, a pulsing bar, and a flash where an amount went up. */
.log-row.bot.answering .chat-answer:not(.md)::after,
.log-row.bot.answering .chat-answer.md > :last-child::after { content: ''; display: inline-block; width: 0.45em; height: 1em; margin-left: 3px; background: var(--run); vertical-align: -0.15em; animation: v2-caret 1s steps(2, jump-none) infinite; }
.usage-live { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--run); vertical-align: 0.05em; animation: v2-ring 1.6s ease-out infinite; }
.usage-meter.running .usage-meter-fill { background: var(--run); animation: v2-head 1.1s ease-in-out infinite; }
.usage-meter.running.warn .usage-meter-fill { background: var(--stale); }
.usage-meter.running.over .usage-meter-fill { background: var(--fail); }
.usage-meter.grew, .usage-bots tr.grew > * { animation: v2-flash 1.8s ease-out 1; }
.usage-share { min-width: 6rem; }
.usage-share-bar { display: block; height: 6px; margin-top: 3px; background: var(--surface); }
.usage-share-bar > span { display: block; height: 100%; background: var(--muted); }
.usage-bots tr.grew .usage-share-bar > span { background: var(--run); transition: width .6s ease-out; }

/* #188 (Console v2): the Layout tabs in the chat header and its crumb. */
.pane-layout { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.pane-layout > * { flex: none; white-space: nowrap; }
.pane-layout-tabs { display: inline-flex; gap: 3px; flex-wrap: nowrap; }
.pane-layout-tabs .tab { padding: 2px 8px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 0.75rem; font-weight: 400; box-shadow: none; }
.pane-layout-tabs .tab.active { border-color: var(--run); color: var(--run); }
.chat-crumb { flex: none; font-size: 0.8125rem; white-space: nowrap; }
.chat-crumb .crumb-link { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.chat-crumb .crumb-link:hover, .chat-bot-name:hover { color: var(--text); text-decoration: underline; }
button.chat-bot-name { padding: 0; border: 0; background: none; color: inherit; font-family: inherit; text-align: left; cursor: pointer; }
body.room-open button.chat-bot-name { cursor: default; text-decoration: none; }
/* ADR 0178 test 23: on a phone the composer line stays one line and the header pill names the model.
 * #197 phase 1: the class label stays in the line, so it is readable even when no header pill shows. */
@media (max-width: 700px) {
  .composer-line .composer-line-model { flex: none; overflow: visible; }
  .composer-line-model > :not(.class-tag), .composer-line-model > button { display: none; }
}
@media (max-width: 1100px) { .chat-crumb { display: none; } }

/* The owner's report (2026-10-18): at large text Routines was left a few pixels. The open bot view keeps a usable height. */
@media (min-width: 701px) {
  .app > .panel > :is(#chat-schedules, #chat-bot-skills, #chat-bot-edit):not([hidden]) { min-height: min(14rem, 45vh); }
}

/* ADR 0185: the owner-only, read-only cloud file browser.
 * ADR 0178 (product owner design E, 2026-10-19): a view strip at the left of the rail, the home
 * folder as a tree in the rail's Files view, and open files as tabs in the Files pane. */
.rail-strip { display: none; }
@media (min-width: 701px) {
  /* The strip shows in the workspace layout, in the rail's sheet, and in the Files view of the focus layout. */
  html:not([data-layout="focus"]) .rail, #mobile-navigation .rail, .app > .rail[data-view="files"] { padding-left: 48px; }
  html:not([data-layout="focus"]) .rail .rail-strip, #mobile-navigation .rail .rail-strip, .app > .rail[data-view="files"] .rail-strip {
    display: flex; flex-direction: column; align-items: center; gap: 4px; position: absolute; left: 0; top: 0; bottom: 0; width: 48px;
    padding: 6px 0; box-sizing: border-box; background: var(--bg); border-right: 1px solid var(--line); }
  .rail-strip-button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--muted); }
  .rail-strip-button:hover { color: var(--text); background: transparent; filter: none; }
  .rail-strip-button[aria-pressed="true"] { color: var(--text); box-shadow: inset 2px 0 0 var(--run); }
  .rail-strip-spacer { flex: 1; }
  /* The Rooms view shows the rooms alone, and the Bots view the bots alone (product owner, 2026-10-19).
     The search stays in both: it filters the bots and the rooms. A phone keeps both in one sheet. */
  .rail[data-view="rooms"] :is(.rail-bots-head, #bot-list, #assistant-rail) { display: none; }
  .rail[data-view="bots"] .room-rail { display: none; }
  .rail[data-view="rooms"] .room-rail { flex: 1; min-height: 0; }
  .rail[data-view="files"] > :not(.rail-strip, #rail-files, .rail-bottom) { display: none; }
  /* The Files view keeps the rail beside split panes (#188 hides it for the other views). */
  #app.files-view { --rail-col: 348px; }
  #app.files-view:not(.split) { grid-template-columns: var(--rail-col) minmax(0, 1fr) 300px; }
  #app.files-view.panel-hidden:not(.split) { grid-template-columns: var(--rail-col) minmax(0, 1fr) 0; }
  #app.files-view.split:is(.split, .panel-hidden, .panel-shown):not(.popout) { --rail-col: 348px; grid-template-columns: var(--rail-col) minmax(0, 1fr) var(--pane-columns); }
  #app.files-view.split:not(.popout) > .rail { display: flex; }
  #app.files-view.split:not(.popout) > #timeline { grid-column: 2 / -1; }
  #app.files-view.split:not(.popout) .mobile-navigation-control { display: none; }
}
/* On a wide screen the strip makes the rail wider, so the bot names keep their room. */
@media (min-width: 1400px) {
  html:not([data-layout="focus"]) .app { --rail-col: 304px; grid-template-columns: var(--rail-col) minmax(0, 1fr) 300px; }
  html:not([data-layout="focus"]) .app.panel-hidden { grid-template-columns: var(--rail-col) minmax(0, 1fr) 0; }
}
@media (min-width: 701px) and (max-width: 1100px) {
  #app.files-view, #app.files-view.split:is(.split, .panel-hidden, .panel-shown):not(.popout) { --rail-col: 300px; }
  #app.files-view:not(.split), #app.files-view.panel-hidden:not(.split) { grid-template-columns: var(--rail-col) minmax(0, 1fr) 0; }
  #app.files-view.panel-shown:not(.split) { grid-template-columns: var(--rail-col) minmax(0, 1fr) 300px; }
}
.rail-files { display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; }
.workspace-files { min-width: 0; }
.files-head { display: flex; align-items: center; gap: 4px; padding: 8px 8px 6px 12px; }
.files-cap { color: var(--text); }
.files-state { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; font-size: 0.6875rem; color: var(--muted); }
.files-dot { width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid currentColor; box-sizing: border-box; }
.files-state.awake .files-dot { background: var(--run); border-color: var(--run); }
.files-spacer { flex: 1; }
.files-head .files-tool { width: 28px; height: 28px; padding: 0; display: grid; place-items: center; background: transparent; color: var(--muted); border: 1px solid transparent; }
.files-head .files-tool:hover:not(:disabled) { color: var(--text); border-color: var(--line); filter: none; }
.files-message { margin: 4px 12px 8px; font-size: 0.8125rem; }
.files-filter { display: block; padding: 0 8px 8px 12px; }
.files-filter input { width: 100%; box-sizing: border-box; padding: 4px 8px; font-size: 0.75rem; }
.files-sort { display: flex; align-items: center; gap: 8px; padding: 0 8px 8px 12px; font-size: 0.75rem; }
.files-sort select { min-width: 0; flex: 1; padding: 4px 8px; font: inherit; }
@media (max-width: 760px) {
  .files-sort select { min-height: 44px; }
}
.files-home { margin: 0; padding: 2px 12px 4px; font-size: 0.75rem; font-weight: 600; color: var(--muted); }
.files-tree { flex: 1; min-height: 0; overflow-y: auto; margin: 0; padding: 0 0 6px; list-style: none; }
.files-row { display: flex; align-items: center; min-height: 24px; padding: 0 8px 0 4px; font-size: 0.8125rem; color: var(--text); cursor: pointer; user-select: none; }
.files-row:hover { background: var(--surface); }
.files-row.selected { background: color-mix(in srgb, var(--run) 14%, var(--panel)); box-shadow: inset 1px 0 0 var(--run); }
.files-row:focus-visible { outline: 1px solid var(--run); outline-offset: -1px; }
.files-row.open-tab .files-name { font-weight: 500; }
.files-row[aria-disabled="true"] { color: var(--muted); cursor: default; }
.files-row-note, .files-row-more { cursor: default; color: var(--muted); font-size: 0.75rem; }
.files-row-note:hover, .files-row-more:hover { background: transparent; }
.files-row-note.error-text { color: var(--danger); }
.files-row-more button { padding: 2px 6px; font-size: 0.75rem; }
.files-guide { flex: none; align-self: stretch; width: 7px; margin-left: 7px; border-left: 1px solid var(--line); }
.files-chevron { flex: none; width: 16px; text-align: center; color: var(--muted); font-family: var(--mono); font-size: 0.6875rem; }
.files-icon { flex: none; margin-right: 6px; color: var(--muted); }
.files-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files-large { flex: none; margin-left: 6px; font-size: 0.6875rem; }
/* The owner (2026-10-19): one compact upload line, and a drop target for files from the device. */
.files-upload-status { display: flex; align-items: center; gap: 6px; margin: 0 8px 6px 12px; font-size: 0.75rem; min-width: 0; overflow-wrap: anywhere; }
.files-upload-status.error { color: var(--danger); }
.files-upload-dismiss { flex: none; margin-left: auto; width: 22px; height: 22px; padding: 0; border: 0; background: transparent; color: var(--muted); }
.files-tree.drop-target, .files-row.drop-target { background: color-mix(in srgb, var(--run) 18%, var(--panel)); box-shadow: inset 0 0 0 1px var(--run); }
/* ADR 0191: explicit multiple selection, separate from row opening and focus. */
.files-pick { flex: none; display: grid; place-items: center; width: 24px; min-height: 24px; cursor: pointer; }
.files-pick input { margin: 0; width: 14px; height: 14px; accent-color: var(--run); cursor: pointer; }
.files-selection { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 0 8px 8px 12px; font-size: 0.75rem; }
.files-selection button { padding: 3px 5px; font-size: 0.75rem; }
/* ADR 0188: row actions, the actions menu, inline names, Move to…, and the Trash view. */
.files-row-actions { flex: none; margin-left: 4px; width: 22px; height: 20px; padding: 0; border: 0; background: transparent; color: var(--muted); line-height: 1; opacity: 0; }
.files-row:hover .files-row-actions, .files-row.selected .files-row-actions, .files-row:focus-within .files-row-actions, .files-row-actions[aria-expanded="true"] { opacity: 1; }
.files-row .files-size + .files-row-actions, .files-row .files-large + .files-row-actions { margin-left: 4px; }
.files-row.folder .files-slash + .files-row-actions { margin-left: auto; }
.files-menu { position: fixed; z-index: 60; display: flex; flex-direction: column; min-width: 180px; padding: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 20px rgb(0 0 0 / 0.25); }
.files-menu [role="menuitem"] { text-align: left; padding: 6px 10px; border: 0; background: transparent; color: var(--text); font-size: 0.8125rem; }
.files-menu [role="menuitem"]:hover, .files-menu [role="menuitem"]:focus { background: var(--surface); outline: none; filter: none; }
.files-name-edit { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.files-name-edit input { width: 100%; box-sizing: border-box; padding: 1px 4px; font-size: 0.8125rem; }
.files-name-problem { font-size: 0.6875rem; }
.files-row-edit { cursor: default; }
.files-undo { flex: none; padding: 1px 8px; font-size: 0.75rem; }
.files-dialog-backdrop { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgb(0 0 0 / 0.35); }
.files-dialog { width: min(420px, 100%); max-height: calc(100vh - 32px); overflow: auto; box-sizing: border-box; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.files-dialog-title { margin: 0 0 8px; font-size: 0.9375rem; overflow-wrap: anywhere; }
.files-dialog-folders { margin: 0; padding: 0; border: 0; max-height: 50vh; overflow: auto; }
.files-dialog-folder { display: flex; align-items: center; gap: 8px; min-height: 32px; font-size: 0.8125rem; overflow-wrap: anywhere; }
.files-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.files-trash { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.files-trash-head { display: flex; align-items: center; gap: 8px; padding: 0 8px 6px 8px; }
.files-trash-title { flex: 1; font-size: 0.8125rem; }
.files-trash-confirm { margin: 0 8px 8px 12px; padding: 8px 10px; border: 1px solid var(--danger); border-radius: 6px; font-size: 0.8125rem; }
.files-trash-confirm p { margin: 0; overflow-wrap: anywhere; }
.files-trash-confirm .danger { color: var(--danger); }
.files-trash-list { margin: 0; padding: 0; list-style: none; }
.files-trash-entry { display: grid; grid-template-columns: 14px minmax(0, 1fr); align-items: start; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 0.8125rem; }
.files-trash-entry .files-trash-confirm { grid-column: 1 / -1; margin: 4px 0 0; }
/* ADR 0188 amendment (2026-10-21): the question before Move to Trash, with "Don't ask again". */
.files-ask { display: grid; gap: 6px; }
.files-ask-skip { display: inline-flex; align-items: center; gap: 6px; width: fit-content; cursor: pointer; }
.files-preference-choice { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.files-preference-message { display: block; }
.files-trash-entry > .files-icon { margin: 3px 0 0; }
.files-trash-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.files-trash-text .files-name { flex: none; white-space: normal; overflow-wrap: anywhere; }
.files-trash-meta { font-size: 0.6875rem; line-height: 1.5; overflow-wrap: anywhere; }
.files-trash-actions { grid-column: 2; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
.files-trash-actions button, .files-trash-head button { padding: 2px 8px; font-size: 0.75rem; }
.files-foot { margin: 0; padding: 6px 12px; border-top: 1px solid var(--line); font-size: 0.6875rem; line-height: 1.5; }
.files-tabbed, .files-file { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.files-tabs { display: flex; align-items: stretch; overflow-x: auto; border-bottom: 1px solid var(--line); background: var(--bg); }
.files-tab { display: flex; align-items: center; gap: 2px; min-height: 34px; padding: 0 4px 0 10px; border-right: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.files-tab.active { background: var(--panel); color: var(--text); box-shadow: inset 0 2px 0 var(--run); }
.files-tab-open { display: inline-flex; align-items: center; padding: 0; border: 0; background: transparent; color: inherit; font-size: 0.8125rem; font-weight: 400; }
.files-tab-open:hover, .files-tab-close:hover { filter: none; color: var(--text); }
.files-tab-close { width: 24px; height: 24px; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 0.8125rem; }
.files-tab-close:hover { background: var(--surface); }
.files-tab-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.files-path { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 5px 12px; border-bottom: 1px solid var(--line); font-size: 0.75rem; }
.files-crumbs { min-width: 0; overflow-wrap: anywhere; color: var(--muted); }
.files-meta { margin-left: auto; }
.files-path-actions { display: inline-flex; align-items: center; gap: 6px; }
.files-path-actions button { padding: 3px 10px; font-size: 0.75rem; }
.files-path-actions .quiet { padding: 3px 6px; }
.files-download { margin: 0; padding: 4px 12px; }
.files-preview { padding: 14px 18px; }
.workspace-file-preview { min-width: 0; }
.files-file-head { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-bottom: 1px solid var(--line); }
.files-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 0.875rem; }
.files-standalone.pane-body { display: flex; flex-direction: column; padding: 0; }
.files-standalone .files-tree { overflow: visible; }
/* A phone keeps 44 px targets (ADR 0178 phone forms). */
@media (max-width: 700px) {
  .files-standalone .files-row { min-height: 44px; font-size: 0.875rem; }
  .files-standalone button, .files-standalone input, .pane-files .pane-head button { min-height: 44px; min-width: 44px; }
  .files-standalone .files-pick { width: 44px; min-height: 44px; }
  .files-standalone .files-pick input { min-width: 0; min-height: 0; width: 18px; height: 18px; }
  .files-standalone .files-row-actions { opacity: 1; width: 44px; }
  .files-menu [role="menuitem"], .files-dialog button, .files-dialog-folder { min-height: 44px; }
  .files-ask button, .files-ask-skip, .files-preference-choice { min-height: 44px; }
  .files-ask button { min-width: 44px; }
  .files-standalone .files-ask-skip input { min-height: 0; min-width: 0; width: 18px; height: 18px; }
  .files-standalone .files-dialog-folder input { min-width: 0; min-height: 0; width: 20px; height: 20px; margin: 0 12px; }
  .files-trash-entry { flex-wrap: wrap; }
  .files-standalone .files-path { gap: 8px; }
  .files-standalone .files-path-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
}

/* The owner (2026-10-19): the line above the composer is smaller, and its sources are pills. */
.composer-line { font-size: 0.6875rem; align-items: center; gap: 2px 6px; }
.composer-line-sources { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.source-pill { display: inline-flex; align-items: center; gap: 3px; padding: 0 6px; line-height: 1.5; border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; }
.source-pill.ok { color: var(--text); }
.source-pill.ok > [aria-hidden] { color: var(--run); }
.source-pill.off { color: var(--muted); border-style: dashed; }
@media (max-width: 700px) { .composer-line-sources { flex-wrap: nowrap; } }

/* #188 (Console v2): the phone chat header. "‹ Bots" opens the rail, the bot's name is in the
   middle with its run and model under it, and "•••" opens the bot panel. */
.phone-back, .phone-dots, .chat-head-sub { display: contents; }
.phone-back, .phone-dots { display: none; }
@media (max-width: 700px) {
  .app > .chat .chat-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 4px; row-gap: 0; padding: 4px 4px 6px; }
  .app > .chat .chat-head :is(.chat-title, .chat-meta) { display: contents; }
  .app > .chat .chat-head #open-navigation { grid-column: 1; grid-row: 1 / span 3; width: auto; padding: 0 8px; }
  .app > .chat .chat-head :is(.nav-glyph, .panel-glyph, #chat-bot-avatar, #conversation-link, #tenant-pill, .pane-layout) { display: none !important; }
  .app > .chat .chat-head .phone-back { display: inline; font-size: 0.875rem; color: var(--text); }
  .app > .chat .chat-head .phone-dots { display: inline; letter-spacing: 1px; }
  .app > .chat .chat-head #chat-bot-line { grid-column: 2; grid-row: 1; justify-self: center; max-width: 100%; text-align: center; }
  .app > .chat .chat-head .chat-head-sub { display: flex; grid-column: 2; grid-row: 2; justify-self: center; align-items: center; gap: 4px 8px; min-width: 0; max-width: 100%; }
  .app > .chat .chat-head .chat-head-sub .run-strip { flex: 0 1 auto; }
  .app > .chat .chat-head .run-strip-stop { min-height: 32px; }
  .app > .chat .chat-head .run-strip-stop kbd { display: none; }
  .app > .chat .chat-head #chat-status { grid-column: 2; grid-row: 3; justify-self: center; text-align: center; }
  .app > .chat .chat-head #show-panel { grid-column: 3; grid-row: 1 / span 3; min-width: 44px; min-height: 44px; }
  /* ADR 0202 amendment of 2026-10-21: the title sits under the bot's name, above its run and model. */
  .app > .chat .chat-head .chat-conversation-title { grid-column: 2; grid-row: 2; justify-self: center; min-width: 0; max-width: 100%; }
  .app > .chat .chat-head:has(.chat-conversation-title) .chat-head-sub { grid-row: 3; }
  .app > .chat .chat-head:has(.chat-conversation-title) #chat-status { grid-row: 4; }
  .app > .chat .chat-head:has(.chat-conversation-title) :is(#open-navigation, #show-panel) { grid-row: 1 / span 4; }
  .chat-conversation-title .crumb-sep { display: none; }
  .chat-conversation-name { max-width: 100%; }
  .chat-rename, .chat-rename-form button { min-width: 44px; min-height: 44px; }
  .chat-rename-form { justify-content: center; }
  .chat-rename-form input { flex: 1 1 100%; min-height: 44px; font-size: 1rem; }
}

/* #188 (Console v2): the phone Activity page shows the live hour as cards, as in the design. */
.activity-show, .activity-summary, .activity-people-cap, .activity-phone-note { display: none; }
.activity-ack-all { width: 100%; margin-top: 8px; min-height: 44px; }
@media (max-width: 700px) {
  .activity-view :is(.activity-switch, .activity-range, .activity-status .check, .activity-reach) { display: none; }
  .activity-show { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .activity-show button { min-height: 44px; padding: 0 6px; font-weight: 400; }
  .activity-show button[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--run); color: var(--run); }
  .activity-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--line); border: 1px solid var(--line); }
  .activity-summary > div { display: flex; flex-direction: column; gap: 2px; padding: 8px; background: var(--panel); }
  .activity-summary dd { margin: 0; font-size: 1.125rem; font-weight: 500; }
  .activity-summary dt { color: var(--muted); font-size: 0.6875rem; }
  .activity-summary .bot-running { color: var(--run); }
  .activity-summary .bot-failed { color: var(--fail); }
  .activity-summary .bot-lost { color: var(--stale); }
  .activity-people-cap { display: block; margin: 4px 0 0; }
  .activity-phone-note { display: block; margin: 4px 0 0; }
  .activity-person { border: 1px solid var(--line); background: var(--panel); padding: 0; }
  .activity-person-head { padding: 10px 12px; }
  .activity-person .activity-bot { border-top: 1px solid var(--line-soft); }
  .activity-person .activity-bot-row { padding: 8px 12px 10px; }
}

/* #189 (Console v2 fidelity F): strip cells that show on every row ground, axis labels at the ends of
   the strip, a ring for idle and a grey dot for offline, the colour key, the lane filter and the footer. */
.activity-cells .cell { background: color-mix(in srgb, var(--muted) 22%, transparent); }
.activity-bot-row[aria-expanded="true"] { background: color-mix(in srgb, var(--run) 10%, transparent); }
.activity-ticks { position: relative; display: block; height: 1.4em; }
.activity-ticks > span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.activity-ticks > span:first-child { transform: none; }
.activity-ticks > span:last-child { transform: translateX(-100%); }
.activity-mark.bot-idle { border-radius: 50%; }
.activity-mark.person-offline { border: 0; border-radius: 50%; background: color-mix(in srgb, var(--muted) 45%, var(--bg)); }
.activity-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 8px 0 0; border-top: 1px solid var(--line); }
.activity-key > span { display: inline-flex; align-items: center; gap: 6px; }
.activity-swatch { display: inline-block; width: 10px; height: 10px; background: color-mix(in srgb, var(--muted) 22%, transparent); }
.activity-swatch.running { background: var(--run); }
.activity-swatch.ran { background: var(--muted); }
.activity-swatch.failed { background: var(--fail); }
.activity-swatch.lost { background: var(--stale); }
.activity-filter-none { margin: 8px 0; }
.activity-footer { margin: 0; padding-top: 8px; border-top: 1px solid var(--line); }

/* #189 (Console v2 fidelity F): the right column on a wide view, the open lane with "Why this state",
   and the person page. The column follows the width of the view, so a narrow pane stacks it above the lanes. */
.activity-view.wide { container-type: inline-size; }
.activity-body { display: grid; gap: 12px; min-width: 0; }
.activity-main { min-width: 0; }
.activity-aside { order: -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; align-items: start; }
@container (min-width: 1080px) {
  .activity-body { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
  .activity-aside { order: 0; grid-template-columns: minmax(0, 1fr); position: sticky; top: 8px; }
}
.activity-panel { border: 1px solid var(--line); background: var(--panel); padding: 8px 10px; min-width: 0; }
.activity-panel h3.cap { margin: 0 0 6px; font-size: 0.6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.activity-panel-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.activity-panel-head h3.cap { margin: 0; flex: 1; }
.activity-panel-head .activity-ack-all { width: auto; min-height: 0; margin: 0; padding: 2px 10px; }
.activity-now dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; margin: 0; font-size: 0.75rem; }
.activity-now dl > div { display: flex; justify-content: space-between; gap: 8px; }
.activity-now dt { color: var(--muted); }
.activity-now dd { margin: 0; }
.activity-run { color: var(--run); }
.activity-fail { color: var(--fail); }
.activity-lost { color: var(--stale); }
.activity-view .activity-attention.activity-panel { padding: 8px 10px; }
.activity-attention .activity-card { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 8px; padding: 4px 0; }
.activity-card p { margin: 0; }
.activity-card .muted { line-height: 1.45; }
.activity-card button.secondary { margin-top: 4px; padding: 2px 10px; }
.activity-tag { font-weight: 600; }
.activity-card .activity-tag.activity-fail { animation: v2-alarm 1s steps(2, jump-none) infinite; }
.activity-card .activity-tag.activity-lost { animation: v2-lost 2.4s steps(2, jump-none) infinite; }
.activity-sources-panel dl { display: grid; gap: 3px; margin: 0 0 6px; }
.activity-sources-panel dl > div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 8px; }
.activity-sources-panel dt { color: var(--muted); }
.activity-sources-panel dd { margin: 0; }
.activity-sources-panel p { margin: 0; }
.activity-link { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-weight: inherit; text-align: left; cursor: pointer; }
.activity-link:hover, .activity-link:focus-visible { color: var(--run); text-decoration: underline; filter: none; background: transparent; }
.activity-person-head .activity-person-link { padding-left: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.activity-detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.activity-detail .activity-runs { grid-column: 1 / -1; }
.activity-why p { margin: 0 0 4px; line-height: 1.5; }
.activity-why p.cap { font-size: 0.6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.activity-owner-link { font-size: 0.75rem; }
@media (max-width: 700px) { .activity-detail { grid-template-columns: minmax(0, 1fr); } }
.activity-person-page { display: grid; gap: 8px; }
.activity-person-nav { display: flex; align-items: center; gap: 12px; margin: 0; }
.activity-person-page .activity-lanes .activity-axis { margin-top: 2px; }

/* #190 (Console v2): a turn's steps are a short monospaced table of number, tool and arguments,
   and the steps pane uses the same table. The thumbs take the palette's colours. */
.step-table { width: 100%; margin-top: 4px; border-collapse: collapse; table-layout: fixed; font-size: 0.75rem; color: var(--text); }
.step-table th { padding: 4px 8px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 0.6875rem; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; text-align: left; }
.step-table th:first-child { width: 2.25rem; }
.step-table th:nth-child(2) { width: 38%; }
.step-table tr.result td.step-tool { padding-left: 20px; }
.step-table th:last-child { width: 6.5rem; }
.step-table td { padding: 3px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: top; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step-table td.step-number, .step-table tr.result td.step-tool { color: var(--muted); }
.step-table tr.now td:not(.step-number) { color: var(--run); }
.step-table td.step-raw { text-align: right; }
.step-table tr.step-detail td { white-space: normal; }
.step-table tfoot td { padding: 6px 8px 2px; border-bottom: 0; text-align: right; }
.chat-turn-read a { color: var(--text); }
.chat-turn-read a:hover { color: var(--run); }
.chat-feedback .feedback-choice { display: inline-grid; place-items: center; opacity: 1; color: var(--muted); }
.chat-feedback .feedback-choice:hover, .chat-feedback .feedback-choice:focus-visible { color: var(--text); }
.chat-feedback .feedback-choice.up[aria-pressed="true"] { color: var(--run); }
.chat-feedback .feedback-choice.down[aria-pressed="true"] { color: var(--fail); }
.feedback-choice.down .thumb { transform: rotate(180deg); }

/* #190 (Console v2): file panes carry the chat's link group badge and their number, which the file
   cards repeat; a splitter on each pane's left edge changes the column sizes. The pane says UPDATED
   with the time of its version, or PAUSED. The timeline rows have captions, and VIEWING has a cyan border. */
.pane { position: relative; }
.pane-splitter { position: absolute; top: 0; bottom: 0; left: -8px; z-index: 3; width: 8px; cursor: col-resize; touch-action: none; }
.pane-splitter::after { content: ''; position: absolute; top: 50%; left: 3px; width: 2px; height: 24px; margin-top: -12px; background: var(--line); }
.pane-splitter:hover::after, .pane-splitter:focus-visible::after { background: var(--run); }
.pane-splitter:focus-visible { outline: 1px solid var(--run); outline-offset: -1px; }
.pane-number, .pane-link-badge { display: inline-grid; place-items: center; flex: none; min-width: 18px; height: 18px; padding: 0 4px; border: 1px solid var(--text); color: var(--text); font-size: 0.6875rem; line-height: 1; }
.pane-link-badge { border-color: transparent; background: color-mix(in srgb, var(--run) 35%, transparent); }
.file-card .pane-number { min-width: 24px; height: 24px; }
.pane-tools .pane-state { margin-right: 0; font-size: 0.6875rem; letter-spacing: .06em; color: var(--muted); }
.pane-tools .pane-state.paused { color: var(--stale); }
.pane-newer { justify-content: space-between; font-size: 0.75rem; }
.timeline-name.caps { font-size: 0.6875rem; letter-spacing: .06em; text-transform: uppercase; }
.viewing-indicator { border-color: var(--run); color: var(--text); }
.viewing-indicator strong { color: var(--run); }

/* The product owner (2026-10-19): the compact timeline is one row, the start time, the events over the
   slider, and the controls at the right end. A phone puts the track on its own line to keep 44 px controls. */
.timeline.compact { padding: 2px 12px; }
.timeline-one { display: flex; align-items: center; gap: 8px; min-width: 0; }
.timeline-one > .timeline-name, .timeline-one > .timeline-stepping, .timeline-one > .timeline-sizes, .timeline-one > .timeline-copy { flex: none; }
.timeline-track { position: relative; flex: 1; min-width: 80px; height: 28px; }
.timeline-track > .timeline-strip { position: absolute; top: 0; right: 0; left: 0; height: 12px; border: 0; }
.timeline-track .timeline-mark { top: 1px; height: 8px; }
.timeline-track > .timeline-slider { position: absolute; right: 0; bottom: 0; left: 0; }
@media (min-width: 701px) { .timeline-one .small-button { padding-top: 2px; padding-bottom: 2px; } }
@media (max-width: 700px) {
  .timeline-one { flex-wrap: wrap; row-gap: 0; }
  .timeline-one > .timeline-name { display: none; }
  .timeline-track { flex-basis: 100%; }
  .timeline :is(.timeline-stepping, .timeline-sizes) .small-button, .timeline .timeline-copy { min-width: 44px; min-height: 44px; }
}

/* #191 (ADR 0178, Console v2 fidelity H): Usage is a row of compact period tabs with the live label and
   Export CSV, three panes (company cap, default member caps, today), the two tables as panes, and a footer. */
.usage-limits { gap: 8px; }
.usage-periods { gap: 6px 10px; }
.usage-periods-gap { flex: 1; }
.usage-periods .usage-rule { margin: 0; }
.usage-live-label { display: inline-flex; align-items: center; gap: 6px; color: var(--run); font-family: var(--mono); }
.usage-live-label .live-mark { animation: v2-ring 1.6s ease-out infinite; }
.usage-live-label.stale { color: var(--stale); }
.usage-live-label.stale .live-mark { border-radius: 0; background: transparent; border: 1.5px solid currentColor; animation: none; }
.usage-export { padding: 3px 10px; font-size: 0.75rem; font-weight: 400; }
.usage-panes { display: flex; flex-wrap: wrap; gap: 8px; }
.usage-pane { min-width: 0; border: 1px solid var(--line); background: var(--panel); }
.usage-panes > .usage-pane { flex: 1 1 260px; }
.usage-panes > .usage-company { flex: 2 1 420px; }
.usage-pane-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.usage-limits .usage-pane-head h3 { margin: 0; color: var(--muted); font-size: 0.6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.usage-pane-body { margin: 0; padding: 10px; }
.usage-pane-body > p { margin: 6px 0 0; }
.usage-facts { display: grid; gap: 6px; font-family: var(--mono); font-size: 0.75rem; }
.usage-facts > div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 10px; }
.usage-facts dt { color: var(--muted); }
.usage-facts dd { margin: 0; }
.usage-pane .audit-table { margin: 0; }
.usage-pane-note { margin: 6px 10px; }
.usage-foot { margin: 0; padding-top: 6px; border-top: 1px solid var(--line); }
@media (min-width: 701px) {
  #settings.drawer.page .usage-periods .tab { min-height: 0; height: 26px; padding: 0 10px; }
}
/* The owner (#191): in Daylight the dimmed band around a company page read as a heavy gutter. */
@media (min-width: 701px) {
  html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"]) body:has(.drawer.page:not([hidden])) .scrim { background: color-mix(in srgb, var(--line) 35%, transparent); }
  html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"]) .usage-pane, html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"]) .usage-pane-head, html:is([data-theme="daylight"], [data-theme="paper"], [data-theme="sage"]) .usage-foot { border-color: var(--line-soft); }
}

/* #189 (Console v2 fidelity F): Admin › Activity in two-column rows, with the member notice beside them. */
.activity-settings { display: grid; gap: 8px; align-items: start; }
@media (min-width: 1100px) { .activity-settings { grid-template-columns: minmax(0, 1fr) minmax(260px, 380px); } }
.activity-settings-main { display: grid; gap: 8px; min-width: 0; }
.activity-settings-panel { border: 1px solid var(--line); background: var(--panel); min-width: 0; }
.activity-settings-panel h3.cap { margin: 0; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 0.6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.activity-settings-panel > p, .activity-settings-panel > table, .activity-settings-preview > .activity-notice { margin: 8px 12px; }
.activity-settings-panel > table { width: calc(100% - 24px); }
.activity-settings-head { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); padding-right: 12px; }
.activity-settings-head h3.cap { flex: 1; border-bottom: 0; }
.activity-settings-people { font-size: 0.75rem; white-space: nowrap; }
.activity-settings-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); }
.activity-settings-row p { margin: 0; }
.activity-settings-name { font-weight: 600; }
.activity-settings-fixed { padding: 4px 10px; border: 1px solid var(--line); color: var(--muted); font-size: 0.75rem; }
.activity-settings-switch { display: inline-flex; align-items: center; gap: 8px; min-width: 4.5rem; cursor: pointer; font-size: 0.75rem; }
.activity-settings-switch input { appearance: none; flex: none; box-sizing: border-box; width: 34px; min-width: 34px; height: 18px; min-height: 0; padding: 0; margin: 0; border: 1px solid var(--line); background: var(--surface); position: relative; cursor: pointer; }
.activity-settings-switch input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; background: var(--muted); transition: transform .15s ease-out; }
.activity-settings-switch input:checked { border-color: var(--run); background: color-mix(in srgb, var(--run) 25%, var(--surface)); }
.activity-settings-switch input:checked::after { transform: translateX(16px); background: var(--run); }
.activity-settings-switch input:focus-visible { outline: 2px solid var(--run); outline-offset: 2px; }
.activity-settings-status { margin: 6px 12px; min-height: 1em; }
.activity-settings-preview .activity-notice { padding: 8px 10px; border: 1px solid var(--text); }
@media (max-width: 700px) { .activity-settings-row { grid-template-columns: minmax(0, 1fr); gap: 8px; } }

/* The product owner (2026-10-19): while the computer is off, a click anywhere in a Files view starts it. */
.files-off { cursor: pointer; }

/* The owner (2026-10-19): too much empty space above a file. In a split page the tabs sit in the
   pane head, and the path, its facts and the actions share one line that shortens with "…". */
.pane-files .pane-head:has(.files-tabs) { padding: 0 6px 0 0; gap: 4px; }
.pane-files .pane-head .files-tabs { flex: 1; min-width: 0; border-bottom: 0; background: transparent; }
.pane-files .pane-head .files-tab { min-height: 32px; }
.files-path { flex-wrap: nowrap; padding: 3px 8px 3px 12px; }
.files-crumbs { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
.files-meta { flex: 0 1000 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files-path-actions { flex: none; }
@media (max-width: 700px) { .files-path { flex-wrap: wrap; } }

/* The owner (2026-10-19): a folder and a file look different at a glance. A folder has a filled
   icon, a heavier name and a trailing "/"; a file has an outline icon and its size. */
.files-row.folder .files-icon { color: var(--text); }
.files-row.folder .files-name { font-weight: 600; }
.files-row.file .files-icon { color: var(--muted); }
.files-slash { color: var(--muted); font-family: var(--mono); }
.files-size, .files-row .files-large { margin-left: auto; padding-left: 8px; font-size: 0.6875rem; white-space: nowrap; }
/* ADR 0189 (design E): files a bot read (R, muted) or wrote (W, accent) in this conversation. */
.files-mark { flex: none; width: 16px; margin-left: 4px; text-align: center; font-family: var(--mono); font-size: 0.6875rem; font-weight: 600; }
.files-mark.write { color: var(--run); }
.files-mark.read { color: var(--muted); }
.files-conversation { flex: none; max-height: 40%; overflow-y: auto; border-top: 1px solid var(--line); }
.files-section { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 12px 6px 8px; border: 0; border-radius: 0; background: transparent; color: var(--text); font: inherit; font-size: 0.75rem; text-align: left; cursor: pointer; }
.files-section:hover { background: var(--surface); filter: none; }
.files-section:focus-visible { outline: 1px solid var(--run); outline-offset: -1px; }
.files-count { font-size: 0.6875rem; }
.files-conversation-list { margin: 0; padding: 0 0 6px; list-style: none; }
.files-conversation-list .files-row { width: 100%; padding-left: 16px; border: 0; border-radius: 0; background: transparent; font: inherit; font-size: 0.8125rem; font-weight: 400; text-align: left; }
.files-conversation-list .files-row:hover { background: var(--surface); filter: none; }
.files-conversation-list .files-mark { margin: 0 4px 0 0; }
.files-conversation-note { margin: 0; padding: 2px 8px 6px 34px; font-size: 0.75rem; line-height: 1.4; overflow-wrap: anywhere; }
.files-conversation-note.error { color: var(--danger); }
.files-standalone .files-conversation { max-height: none; overflow: visible; }
.files-row .files-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The owner (2026-10-19): Hidden removes the timeline line; the composer line offers it back. */
.composer-line .composer-line-timeline { flex: none; margin-left: auto; padding: 0 6px; }

/* #194: improve the full bot list within the existing console palette and typography. */
.rail .rail-bots-name { margin: 0; font-size: 0.875rem; font-weight: 500; }
.rail .rail-bots-head .icon { min-width: 32px; min-height: 32px; }
.rail .search { margin: 8px 12px 10px; padding: 6px 9px; }
.rail .assistant-rail { border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 8px; }
.rail .bot-list { padding: 2px 8px; }
.rail .bot-rail-row { display: flex; align-items: center; gap: 0; min-width: 0; min-height: 44px; margin: 3px 0; border-radius: 6px; }
.rail .bot-rail-row:hover { background: var(--surface-hover); }
.rail .bot-rail-row[data-current="true"], .rail .bot-rail-row:has(> .bot-item.active) { background: color-mix(in srgb, var(--accent) 10%, var(--panel)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, var(--line)); }
.rail .bot-rail-row[data-current="true"]:hover { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
/* Issue #600: the member drags a bot to its place; a line shows where it lands. */
.rail .bot-rail-row[data-dragging="true"] { opacity: .45; }
.rail .bot-rail-row[data-drop="before"] { box-shadow: inset 0 2px 0 var(--accent); }
.rail .bot-rail-row[data-drop="after"] { box-shadow: inset 0 -2px 0 var(--accent); }
.rail .bot-rail-row .bot-item { flex: 1; min-width: 0; width: auto; min-height: 44px; align-items: center; gap: 8px; padding: 6px 8px; border: 0; border-radius: 6px; font-size: 0.8125rem; background: transparent; color: var(--text); }
.rail .bot-rail-row .bot-item.active { background: transparent; border: 0; font-weight: 500; }
.rail .bot-rail-row .bot-item:hover { background: transparent; }
.rail .bot-rail-row .bot-item:focus-visible, .bot-row-actions:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
html[data-theme="contrast"] .rail .bot-rail-row .bot-item:focus-visible, html[data-theme="contrast"] .bot-row-actions:focus-visible { outline-width: 3px; }
.rail .bot-rail-row .bot-avatar-shell { display: inline-flex; }
.rail .bot-rail-row .avatar { width: 26px; height: 26px; font-size: 0.8125rem; background: var(--surface-active); color: var(--text); border: 1px solid var(--line); border-radius: 0; }
.rail .bot-rail-row .avatar svg { width: 16px; height: 16px; fill: currentColor; }
.rail .bot-rail-row .bot-name { font-size: 0.8125rem; gap: 8px; }
.rail .bot-rail-row .bot-title { flex: 1 1 auto; }
.rail .bot-rail-row .bot-tag { flex: 0 1 auto; max-width: 45%; padding: 1px 4px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 0.6875rem; font-weight: 400; }
.rail .bot-rail-row .bot-preview { display: none; }
/* The owner (2026-10-22): the built-in assistants keep a one-line subtitle that says what they are, in both modes. */
.rail .assistant-rail .bot-rail-row .bot-preview, html[data-interface-mode="simple"] .rail :is(#assistant-rail, #audit-assistant-rail) .bot-preview {
  display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin-top: 2px; color: var(--muted);
  font-size: 0.6875rem; font-weight: 400; line-height: 1.3; white-space: normal; overflow: hidden; }
.rail .bot-rail-row .bot-state-dot { display: none; }
.rail .bot-rail-row .bot-state-dot.running { display: block; position: absolute; right: -3px; bottom: -3px; width: 8px; height: 8px; border: 1px solid var(--panel); border-radius: 50%; background: var(--run); }
.rail .bot-rail-row .bot-attention-dot { min-width: 14px; height: 14px; right: -4px; top: -4px; padding: 0 2px; background: var(--stale); color: var(--bg); border-color: var(--panel); }
.rail .bot-row-actions { flex: none; width: 28px; min-height: 32px; padding: 0; margin-right: 4px; border: 0; background: transparent; color: var(--muted); font-size: 1rem; opacity: 0; }
.rail .bot-rail-row:is(:hover, :focus-within, [data-current="true"]) .bot-row-actions, .rail .bot-row-actions[aria-expanded="true"] { opacity: 1; }
.bot-row-menu { position: fixed; z-index: 85; display: flex; flex-direction: column; width: min(12rem, calc(100vw - 16px)); max-height: calc(100dvh - 16px); overflow: auto; padding: 4px; border: 1px solid var(--line); border-radius: 0; background: var(--panel); box-shadow: 0 6px 20px #0004; }
.bot-row-menu [role="menuitem"] { flex: none; min-height: 40px; text-align: left; overflow-wrap: anywhere; padding: 8px 10px; border: 0; background: transparent; color: var(--text); font-size: 0.8125rem; }
.bot-row-menu [role="menuitem"].danger { color: var(--danger); border-top: 1px solid var(--line); }
.bot-row-menu [role="menuitem"]:hover { background: var(--surface-hover); filter: none; }
.bot-row-menu [role="menuitem"]:focus { background: var(--surface); outline: 2px solid var(--accent); outline-offset: -2px; }
@media (hover: none), (pointer: coarse), (max-width: 700px) {
  .rail .bot-row-actions { opacity: 1; width: 44px; min-height: 44px; }
  .rail .rail-bots-head .icon, .bot-row-menu [role="menuitem"] { min-height: 44px; min-width: 44px; }
  .rail .search { min-height: 44px; }
}
@media (min-width: 701px) {
  html[data-layout="focus"] .app > .rail .bot-rail-row { border-radius: 0; box-shadow: none; margin: 0; }
  html[data-layout="focus"] .app > .rail .bot-rail-row .bot-item { width: 100%; justify-content: center; gap: 0; padding: 6px; min-height: 52px; border-radius: 0; }
  html[data-layout="focus"] .app > .rail .bot-row-actions { display: none; }
}
.rail .bot-rail-row .bot-tag { flex-shrink: 0; }
.rail .bot-rail-row .bot-default-tag { max-width: none; }

/* Issue #224 (ADR 0178 bot accents, 2026-10-20): each bot has one of five accents, a glyph colour on a tint.
 * The accent repeats on the selected rail row and the conversation header icon. Layout, neutral surfaces,
 * state colours, and square icon corners do not change. A 3 px bar and the heavier name mark the selected
 * row without colour; the admin assistant keeps its neutral icon. High Contrast draws accents as outlines. */
[data-accent="olive"], .chat-head:has(#chat-bot-avatar[data-accent="olive"]:not(.room-avatar, .assistant-head-avatar)) { --bot-fg: var(--bot-olive-fg); --bot-bg: var(--bot-olive-bg); }
[data-accent="green"], .chat-head:has(#chat-bot-avatar[data-accent="green"]:not(.room-avatar, .assistant-head-avatar)) { --bot-fg: var(--bot-green-fg); --bot-bg: var(--bot-green-bg); }
[data-accent="indigo"], .chat-head:has(#chat-bot-avatar[data-accent="indigo"]:not(.room-avatar, .assistant-head-avatar)) { --bot-fg: var(--bot-indigo-fg); --bot-bg: var(--bot-indigo-bg); }
[data-accent="violet"], .chat-head:has(#chat-bot-avatar[data-accent="violet"]:not(.room-avatar, .assistant-head-avatar)) { --bot-fg: var(--bot-violet-fg); --bot-bg: var(--bot-violet-bg); }
[data-accent="rose"], .chat-head:has(#chat-bot-avatar[data-accent="rose"]:not(.room-avatar, .assistant-head-avatar)) { --bot-fg: var(--bot-rose-fg); --bot-bg: var(--bot-rose-bg); }
.avatar[data-accent], .rail .bot-rail-row .avatar[data-accent], #chat-bot-avatar[data-accent]:not(.room-avatar, .assistant-head-avatar) {
  background: var(--bot-bg); color: var(--bot-fg); border: 1px solid color-mix(in srgb, var(--bot-fg) var(--bot-ring, 40%), var(--bot-bg));
}
.rail .bot-rail-row[data-accent]:is([data-current="true"], :has(> .bot-item.active)) {
  background: color-mix(in srgb, var(--bot-fg) 9%, var(--panel));
  box-shadow: inset 3px 0 0 var(--bot-fg), inset 0 0 0 1px color-mix(in srgb, var(--bot-fg) 35%, var(--line));
}
.rail .bot-rail-row[data-accent][data-current="true"]:hover { background: color-mix(in srgb, var(--bot-fg) 9%, var(--surface)); }
.app > .rail .bot-rail-row[data-accent] .bot-item.active::before { background: var(--bot-fg); }
.app > .chat .chat-head:has(#chat-bot-avatar[data-accent]:not(.room-avatar, .assistant-head-avatar)) { box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--bot-fg) 55%, transparent); }
.room-card[data-accent] { box-shadow: inset 3px 0 0 var(--bot-fg); }
@media (min-width: 701px) {
  html[data-layout="focus"] .app > .rail .bot-rail-row[data-accent][data-current="true"] { box-shadow: inset 3px 0 0 var(--bot-fg); }
}

/* Usage column sorting retains the table's typography and theme. */
.audit-table .usage-sort {
  display: inline-flex; align-items: center; gap: .35em; min-height: 32px; min-width: 44px;
  padding: 2px 0; border: 0; background: transparent; color: inherit;
  font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left;
}
.audit-table .usage-sort:hover { color: var(--text); }
.audit-table .usage-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.audit-table [aria-sort] .usage-sort { color: var(--text); }
.audit-table .usage-sort > span { flex-shrink: 0; }
@media (pointer: coarse) { .audit-table .usage-sort { min-height: 44px; } }

/* Issues 193/195: presentation only. Keep controllers and saved pane choices mounted. */
.simple-only { display: none !important; }
html[data-interface-mode="simple"] .simple-only { display: inline-flex !important; }
html[data-interface-mode="simple"] :is(.full-only, #go-to, #timeline, .pane-layout, .composer-line-timeline,
  #assistant-rail, .bot-preview, .bot-row-actions, #chat-bot-list, #open-settings, .panel-view-switch,
  .composer-line-sources, .composer-line-change, .chat-live-action, .chat-live-read, .run-box-meta, .run-box-step,
  .chat-turn-status[data-state="done"], .console-clock,
  .live-state:has(.live-indicator.live)) { display: none !important; }
html[data-interface-mode="simple"] .run-strip.running .run-strip-state { display: none; }
html[data-interface-mode="simple"] .chat-activity-pulse { animation: none; }
html[data-interface-mode="simple"] .chat-activity-hint { margin-left: 8px; }
html[data-interface-mode="simple"] #panel :is(#chat-bot-edit, #chat-bot-skills) { display: none; }
/* The owner (2026-10-23): an assistant's About and Routines views keep their switch in Simple mode. */
html[data-interface-mode="simple"] body:is(.assistant-open, .audit-assistant-open) #panel > #panel-view-switch { display: grid !important; }
html[data-interface-mode="simple"] #panel[data-simple-panel="routines"] :is(#computer, #expand-screen, .panel-cap-computer) { display: none; }
html[data-interface-mode="simple"] #panel[data-simple-panel="computer"] #chat-schedules { display: none; }
.simple-panel-heading { margin: 0 0 12px; font-size: 1rem; font-weight: 500; }
.bot-search-toggle { flex: none; min-width: 44px; min-height: 44px; }
html[data-interface-mode="simple"] .search input[hidden] { display: none !important; }
html[data-interface-mode="simple"] .composer-line { flex-wrap: wrap; }
.model-file-restriction { color: var(--warning, var(--stale)); }
.conversation-usage-table { max-width: 100%; overflow-x: auto; }
.conversation-usage-table th:first-child { min-width: 140px; max-width: 220px; overflow-wrap: anywhere; }
@media(min-width:701px) {
  html[data-interface-mode="simple"] #app:not(.panel-shown):not(.split) { grid-template-columns: var(--rail-col) minmax(0, 1fr) 0; }
  html[data-interface-mode="simple"] #app.split:not(.panel-shown):not(.popout) { grid-template-columns: var(--rail-col) minmax(0, 1fr) var(--pane-columns) 0; }
  html[data-interface-mode="simple"] #app:not(.panel-shown) > .panel { display: none; }
  html[data-interface-mode="simple"] #app:not(.panel-shown) #show-panel { display: inline-flex; }
}
html[data-interface-mode="simple"] :is(.chat-head-model, .spend-pill-holder:has(.status-pill.model), .spend-pill-holder:has(.status-pill.spend:not(.near):not(.reached))) { display: none; }
html[data-interface-mode="simple"] [data-rail-group="company"]:has(#settings-button) :is(#people-button, #usage-button, #audit-button, #activity-button) { display: none; }
.simple-company-pages { flex-wrap: wrap; gap: 8px; padding: 12px 0; }
html[data-interface-mode="simple"] .rail .search:not([data-search-open="true"]) { display: none !important; }
html[data-interface-mode="simple"] #bot-search-action { margin-left: auto; }
html[data-interface-mode="simple"] .rail-bots-head #new-bot { margin-left: 0; }
@media(max-width:700px) {
  html[data-interface-mode="simple"] .console-company { display: block; min-width: 0; max-width: 45vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* File panes keep their tools compact; phone controls retain their touch targets. */
@media (min-width:701px) {
  :is(.pane-file,.pane-version,.pane-attachment) > .pane-head { padding: 3px 8px; }
  :is(.pane-file,.pane-version,.pane-attachment) > .pane-tools { flex-wrap: nowrap; padding: 3px 8px; gap: 4px 8px; }
  :is(.pane-file,.pane-version,.pane-attachment) > .pane-tools > .num { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  :is(.pane-file,.pane-version,.pane-attachment) > .pane-tools > :is(button,select) { flex: none; }
  :is(.pane-file,.pane-version,.pane-attachment) > .pane-tools .small-button { min-height: 24px; padding: 2px 8px; }
}
:is(.pane-file,.pane-version,.pane-attachment) > .pane-body:has(>.file-preview-pdf) { padding: 0; }

/* #285 (owner choice A, 2026-10-24): the rail menu. It sits on the rail's own ground, with 32 px rows,
 * 16 px line icons from nav-icons.tsx, and a 2 px run-colour bar with bold text for the selected page,
 * so selection does not depend on colour. My Work names the first group; the chevron beside it folds
 * the whole menu. The unread count is a pill at the end of the Alerts row; it pulses, and stops under
 * reduced motion. These rules replace the older menu rules in home.css and in this file. */
#rail-menu { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 6px 0 8px; border-top: 1px solid var(--line); }
#rail-menu .rail-menu-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 8px 2px 12px; }
#rail-menu .rail-group-name { font-size: 0.6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
#rail-menu .rail-menu-head .rail-group-name { flex: 1; min-width: 0; margin: 0; }
#rail-menu .rail-menu-toggle { flex: none; justify-content: center; margin: 0; padding: 4px 6px; min-width: 24px; min-height: 24px; }
#rail-menu .rail-section-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#rail-menu [data-rail-group="company"] .rail-group-name { margin: 8px 12px 2px; padding: 10px 0 2px; border-top: 1px solid var(--line-soft); }
#rail-menu .rail-link { position: relative; min-width: 0; height: auto; min-height: 32px; gap: 10px; padding: 0 12px 0 10px; border-left: 2px solid transparent; border-radius: 0;
  background: transparent; color: var(--text); font-size: 0.8125rem; font-weight: 400; text-align: left; box-shadow: none;
  transition: background-color .12s ease, color .12s ease; }
#rail-menu .rail-link .glyph { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 0; background: none; color: var(--muted);
  transition: color .12s ease; }
#rail-menu .rail-link .glyph svg { width: 16px; height: 16px; }
#rail-menu .rail-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A tint of the text colour, so hover shows on every ground, light or dark. */
#rail-menu .rail-link:hover { background: color-mix(in srgb, var(--text) 8%, transparent); filter: none; }
#rail-menu .rail-link:hover .glyph { color: var(--text); }
#rail-menu .rail-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; z-index: 1; }
html[data-theme="contrast"] #rail-menu .rail-link:focus-visible { outline-width: 3px; outline-offset: -3px; }
#rail-menu .rail-link[aria-current="page"] { background: var(--surface-active); border-left-color: var(--run); font-weight: 600; }
#rail-menu .rail-link[aria-current="page"] .glyph { color: var(--run); }
#rail-menu .alert-nav-count { position: static; flex: none; margin-left: auto; min-width: 20px; height: 18px; padding: 0 6px; box-sizing: border-box; border-radius: 9px;
  background: var(--fail); color: var(--bg); font-size: 0.6875rem; line-height: 18px; font-weight: 700; font-variant-numeric: tabular-nums;
  animation: rail-unread-pulse 2.4s ease-in-out infinite; }
@keyframes rail-unread-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fail) 0%, transparent); }
  50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--fail) 28%, transparent); }
}
@media (prefers-reduced-motion: reduce) { #rail-menu .alert-nav-count { animation: none; } }
/* The icon menu: the folded menu (data-icon-menu, which app.tsx sets only where a pointer can hover and
 * not on a phone), and the Focus layout's 68 px rail on a wide screen (the Focus Files rail and the rail
 * sheet keep the list). Names stay in each aria-label and tooltip; the Company name becomes a divider
 * line. The selector list repeats on six rules: the Focus arm depends on where the rail sits, which only
 * the stylesheet knows. :where() keeps both arms at the weight of #rail-menu plus one attribute. */
:is(#rail-menu[data-icon-menu], :where(html[data-layout="focus"] .app:not(.files-view) > .rail) #rail-menu:not([data-phone])) { grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); padding: 6px 8px 8px; }
:is(#rail-menu[data-icon-menu], :where(html[data-layout="focus"] .app:not(.files-view) > .rail) #rail-menu:not([data-phone])) .rail-link { justify-content: center; min-height: 36px; padding: 0; border-left-width: 0; }
:is(#rail-menu[data-icon-menu], :where(html[data-layout="focus"] .app:not(.files-view) > .rail) #rail-menu:not([data-phone])) .rail-link[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--run); }
:is(#rail-menu[data-icon-menu], :where(html[data-layout="focus"] .app:not(.files-view) > .rail) #rail-menu:not([data-phone])) .rail-label { display: none; }
:is(#rail-menu[data-icon-menu], :where(html[data-layout="focus"] .app:not(.files-view) > .rail) #rail-menu:not([data-phone])) [data-rail-group="company"] .rail-group-name { height: 0; margin: 4px; padding: 0; overflow: hidden; border-top: 1px solid var(--line-soft); font-size: 0; }
:is(#rail-menu[data-icon-menu], :where(html[data-layout="focus"] .app:not(.files-view) > .rail) #rail-menu:not([data-phone])) .alert-nav-count { position: absolute; top: 2px; right: 2px; margin: 0; min-width: 16px; height: 14px; padding: 0 4px; border-radius: 7px; font-size: 0.5625rem; line-height: 14px; }
/* The 68 px rail has no room for the My Work name; the chevron stays where the menu can fold, and the empty
 * head row goes where it cannot (a touch screen). A touch screen in the Focus layout reads the names in the
 * rail sheet, which keeps the named list; the 68 px rail itself has no room for them. */
@media (min-width: 701px) {
  html[data-layout="focus"] .app:not(.files-view) > .rail #rail-menu .rail-menu-head:not(:has(.rail-menu-toggle)) { display: none; }
  html[data-layout="focus"] .app:not(.files-view) > .rail #rail-menu { padding: 8px 6px; }
  html[data-layout="focus"] .app:not(.files-view) > .rail #rail-menu .rail-link { min-height: 44px; }
  html[data-layout="focus"] .app:not(.files-view) > .rail #rail-menu .rail-menu-head { justify-content: center; padding: 0; }
  html[data-layout="focus"] .app:not(.files-view) > .rail #rail-menu .rail-menu-head .rail-group-name { display: none; }
}
@media (min-width: 701px) {
  /* The rail top held only the MY WORK label, which the menu now carries; the bots keep their Bots heading. */
  .app > .rail .rail-top { display: none; }
}
@media (max-width: 700px) {
  #mobile-navigation #rail-menu .rail-link { min-height: 44px; font-size: 0.9375rem; }
  .phone-tabs .nav-icon { width: 20px; height: 20px; }
  .phone-tab-count { top: 3px; left: calc(50% + 6px); min-width: 18px; height: 16px; padding: 0 5px; border-radius: 8px; font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--rail); }
  .phone-more-item:has(.phone-more-label) { justify-content: flex-start; gap: 12px; }
  .phone-more-item > .phone-more-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
  .phone-more-icon { display: inline-grid; place-items: center; flex: none; color: var(--muted); }
  .phone-more-icon .nav-icon { width: 20px; height: 20px; }
  .phone-more-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
}

/* Issue #268: source-code previews. Each scheme sets the code background and token colours; each colour keeps 4.5:1
   on its background (7:1 in High Contrast), and on the changed-line tint. The line number is CSS content, so a selection
   and Copy hold only the file's text. Long lines scroll inside the code box, or wrap on request; the page never widens. */
:root { --code-bg: #101317; --code-text: #d3d8df; --code-faint: #8a94a1; --tok-comment: #929cab; --tok-keyword: #c79bf2; --tok-string: #a5d68a; --tok-number: #f2a96b; --tok-title: #7fc6ef; --tok-tag: #f2878d; --tok-attr: #e6c07b; --tok-meta: #6fd3c2; }
html[data-theme="dusk"] { --code-bg: #1a1d21; --code-text: #c8cdd5; --code-faint: #959ead; --tok-comment: #9aa3b0; --tok-keyword: #c6a8f2; --tok-string: #aad18f; --tok-number: #e9a977; --tok-title: #8cc4e2; --tok-tag: #ee9496; --tok-attr: #dcc283; --tok-meta: #80cfc2; }
html[data-theme="contrast"] { --code-bg: #000000; --code-text: #ffffff; --code-faint: #c9d3df; --tok-comment: #d2dae4; --tok-keyword: #ffadff; --tok-string: #a3ffa3; --tok-number: #ffd27a; --tok-title: #9ddcff; --tok-tag: #ffabab; --tok-attr: #ffe680; --tok-meta: #86f2e3; }
html[data-theme="daylight"] { --code-bg: #fbfcfd; --code-text: #1d2531; --code-faint: #58636f; --tok-comment: #5b6573; --tok-keyword: #7a2fa3; --tok-string: #1f6b2a; --tok-number: #9a4a00; --tok-title: #0b5d86; --tok-tag: #a3262f; --tok-attr: #765000; --tok-meta: #0f6a62; }
html[data-theme="paper"] { --code-bg: #faf6ee; --code-text: #2a251f; --code-faint: #5f574b; --tok-comment: #5f574b; --tok-keyword: #7a2d8f; --tok-string: #2f6620; --tok-number: #94450a; --tok-title: #1d5a7a; --tok-tag: #9c2a2a; --tok-attr: #6c4e00; --tok-meta: #1d6466; }
html[data-theme="sage"] { --code-bg: #f8faf7; --code-text: #1e2924; --code-faint: #55645c; --tok-comment: #55645c; --tok-keyword: #6f3197; --tok-string: #2b672b; --tok-number: #91490b; --tok-title: #1d5b7f; --tok-tag: #9b2c33; --tok-attr: #695105; --tok-meta: #2c6650; }
.code-view { display: flex; flex-direction: column; gap: 6px; min-width: 0; max-width: 100%; }
.code-tools, .file-view-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 0.75rem; }
.file-view-switch { margin-bottom: 6px; }
.code-lang { margin-right: auto; min-width: 0; color: var(--muted); overflow-wrap: anywhere; }
.code-tools button, .file-view-switch button, .code-view .file-preview-note button { padding: 3px 10px; font-size: 0.75rem; }
.code-tools button[aria-pressed="true"], .file-view-switch button[aria-pressed="true"] { background: var(--surface-active); color: var(--text); }
.code-copied:empty { display: none; }
.code-body { margin: 0; max-height: 420px; min-width: 0; max-width: 100%; overflow: auto; padding: 6px 0; border: 1px solid var(--line); background: var(--code-bg); color: var(--code-text); font-family: var(--mono); font-size: 0.8125rem; line-height: 1.5; white-space: pre; tab-size: 4; -moz-tab-size: 4; }
.code-body:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.code-view .code-body > code { display: block; width: max-content; min-width: 100%; padding: 0; background: none; color: inherit; font: inherit; }
.code-line { display: flex; }
.code-line::before { content: attr(data-line); flex: none; position: sticky; left: 0; width: var(--code-gutter, 2ch); padding: 0 12px 0 8px; background: var(--code-bg); color: var(--code-faint); text-align: right; user-select: none; -webkit-user-select: none; }
.code-text { flex: 1 0 auto; padding-right: 12px; white-space: pre; }
.code-view .code-wrap > code { width: auto; }
.code-wrap .code-text { flex: 1 1 0; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.code-digits-2 { --code-gutter: 2ch; } .code-digits-3 { --code-gutter: 3ch; } .code-digits-4 { --code-gutter: 4ch; } .code-digits-5 { --code-gutter: 5ch; } .code-digits-6 { --code-gutter: 6ch; }
.code-line.files-line-changed, .code-line.files-line-changed::before { background: color-mix(in srgb, var(--accent) 12%, var(--code-bg)); }
.code-line.files-line-changed::before { box-shadow: inset 3px 0 0 var(--accent); }
.tok-comment { color: var(--tok-comment); font-style: italic; }
.tok-keyword { color: var(--tok-keyword); }
.tok-string { color: var(--tok-string); }
.tok-number { color: var(--tok-number); }
.tok-title { color: var(--tok-title); }
.tok-tag { color: var(--tok-tag); }
.tok-attr { color: var(--tok-attr); }
.tok-meta { color: var(--tok-meta); }
/* In a pane, the code box fills the pane, and only the code scrolls. */
.pane-body:has(>.code-view), .files-preview:has(>.workspace-file-preview>.code-view) { display: flex; flex-direction: column; }
.pane-body > .code-view, .workspace-file-preview > .code-view { flex: 1 1 0; min-height: 120px; }
.pane-body > .code-view > .code-body, .workspace-file-preview > .code-view > .code-body { flex: 1 1 0; min-height: 100px; max-height: none; }
@media (max-width: 700px) {
  .code-tools button, .file-view-switch button, .code-view .file-preview-note button { min-height: 44px; min-width: 44px; }
}
/* Issue #590 follow-up: earlier decided approvals fold into one line under the turn. */
.approval-earlier { margin: 4px 0; font-size: 0.8125rem; color: var(--muted); }
.approval-earlier > summary { cursor: pointer; }
/* Issue #655: the Publish action and its confirmation under an interactive page. */
.page-publish { margin: 6px 0; }
.page-publish .app-link { display: block; margin: 4px 0; overflow-wrap: anywhere; }