/* Bundled UI fonts (self-hosted, latin subset) so the desktop app renders the
   same as the web instead of falling back to whatever is installed locally.
   Hind (SIL OFL 1.1) is static per weight; Sora (SIL OFL 1.1) is a single
   variable file covering the whole weight axis. Files live in /public/fonts and
   are served immutable-cached by routeStatic. */
@font-face {
  font-family: "Hind";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/Hind-400.woff2") format("woff2");
}
@font-face {
  font-family: "Hind";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/Hind-500.woff2") format("woff2");
}
@font-face {
  font-family: "Hind";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/Hind-600.woff2") format("woff2");
}
@font-face {
  font-family: "Hind";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/Hind-700.woff2") format("woff2");
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/fonts/Sora-variable.woff2") format("woff2");
}

:root {
  /* Design tokens: one light surface, a single violet-indigo accent, and
     soft depth via shadows rather than hard borders. */
  --window: #f6f7fb;
  --sidebar: #0e1633;
  --sidebar-strong: #010a27;
  --canvas: #ffffff;
  --inspector: #fcfcfe;
  --ink: #1a1d27;
  --muted: #676e7d;
  /* Small helper text uses this token throughout Settings and the timeline.
     Keep it at normal-text contrast rather than treating useful instructions
     like disabled chrome. */
  --subtle: #676e7d;
  --line: #e1e4ef;
  --line-soft: #eef0f7;
  --active: #edecfd;
  --accent: #6e62e5;
  --accent-ink: #5548c8;
  --accent-soft: #f0eefc;
  --accent-faint: #fbfaff;
  --paper: #f7f7f9;
  --accent-hot: #ff5765;
  --accent-blue: #3364dd;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(20, 24, 40, 0.06), 0 1px 6px rgba(20, 24, 40, 0.05);
  --shadow-md: 0 4px 14px rgba(20, 24, 40, 0.09), 0 1px 4px rgba(20, 24, 40, 0.05);
  --brand-navy: #0e1633;
  --brand-deep: #010a27;
  --brand-violet: #8b6be8;
  --green: #2b8a5f;
  --red: #ff5765;
  --yellow: #e7b13d;
  --orange: #e0632f;
  /* Status hues are decorative elsewhere, but normal-size status copy needs
     its own accessible ink on the surface behind it. */
  --status-good-ink: #17613e;
  --status-warn-ink: #97400d;
  --status-danger-ink: #9b1c2c;
  --primary-action: #6e62e5;
  --primary-action-hover: #5548c8;
  --shadow: 0 16px 44px rgba(14, 22, 51, 0.16);
  --navigator-width: 300px;
  --inspector-width: 360px;
  --desktop-titlebar-safe-zone: 34px;
  --conversation-header-background:
    linear-gradient(90deg, rgba(110, 98, 229, 0.05), transparent 42%),
    var(--canvas);
}

* {
  box-sizing: border-box;
}

/* The HTML `hidden` attribute only hides via the UA rule `[hidden]{display:none}`,
   which ANY author `display` rule outranks — so `el.hidden = true` silently fails
   to hide a `.authForm`/`.contextMenu`/etc. that sets its own display. That bug
   had been patched one selector at a time (`.navCreateForm[hidden]`, …); the miss
   on `.authForm` doubled up the login + invite-accept forms and stranded the
   invite token ("Invite token is missing"). This single guard makes `hidden`
   authoritative for every element and retires the whole class of bug. */
[hidden] {
  display: none !important;
}

/* #224: the app themes itself off data-theme, never off the host. Declaring
   color-scheme explicitly (rather than leaving it unset, or writing
   `light dark` and letting the OS pick) is what stops a Chromium/Electron
   shell from resolving the document as light and painting its own light
   canvas behind our panes. Painting html with --window closes the same gap
   for any pixel the app's own surfaces do not cover. */
:root {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

html,
body {
  height: 100%;
}

html {
  background: var(--window);
}

body {
  margin: 0;
  background: var(--window);
  color: var(--ink);
  /* System-first (#196): the UI leans on fractional weights (590/650/720/750)
     that only variable fonts render true — static Hind forces synthetic
     bolding that differs between WebKit and Chromium, so the desktop app and
     the web drifted apart. The platform UI font honors every weight and
     matches everywhere; bundled Hind stays as the fallback for platforms
     without a good system face, and Sora (variable) still leads headings. */
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Hind, sans-serif;
  font-size: 14px;
  letter-spacing: 0;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: linear-gradient(var(--canvas), #f8f8ff);
  color: var(--ink);
  cursor: pointer;
}

button:hover:not(:disabled) {
  border-color: #c9c6eb;
  background: var(--canvas);
}

button:disabled {
  color: var(--subtle);
  cursor: default;
  opacity: 0.8;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--canvas);
  color: var(--ink);
  padding: 7px 9px;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(110, 98, 229, 0.55);
  outline: 2px solid rgba(110, 98, 229, 0.14);
}

textarea {
  resize: none;
  line-height: 1.45;
}

label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.appShell {
  position: relative;
  display: grid;
  grid-template-columns: var(--navigator-width) minmax(520px, 1fr) var(--inspector-width);
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}

.appShell.paneTransitionsReady {
  transition: grid-template-columns 400ms ease-in-out;
}

.appShell.leftPaneCollapsed {
  grid-template-columns: 0 minmax(520px, 1fr) var(--inspector-width);
}

.appShell.rightPaneCollapsed {
  grid-template-columns: var(--navigator-width) minmax(520px, 1fr) 0;
}

.appShell.leftPaneCollapsed.rightPaneCollapsed {
  grid-template-columns: 0 minmax(520px, 1fr) 0;
}

.appShell.leftPaneCollapsed .leftColumnResizer,
.appShell.rightPaneCollapsed .rightColumnResizer {
  display: none;
}

.appShell.leftPaneCollapsed .navigator {
  border-right-color: transparent;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-12px);
}

.appShell.rightPaneCollapsed .inspector {
  border-left-color: transparent;
  opacity: 0;
  overflow: hidden;
  padding-left: 0;
  padding-right: 0;
  pointer-events: none;
  transform: translateX(12px);
}

.columnResizer {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 60;
  width: 12px;
  background: transparent;
  cursor: col-resize;
  touch-action: none;
  -webkit-app-region: no-drag;
}

.columnResizer::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--accent-hot);
  opacity: 0;
  transform: translateX(-0.5px);
  transition: opacity 120ms ease;
}

.leftColumnResizer {
  left: var(--navigator-width);
  transform: translateX(-6px);
}

.rightColumnResizer {
  left: calc(100% - var(--inspector-width));
  transform: translateX(-6px);
}

.columnResizer:hover::after,
.columnResizer.active::after,
.columnResizer:focus-visible::after {
  opacity: 0.55;
}

.columnResizer:focus-visible {
  outline: 3px solid var(--accent, #6657d9);
  outline-offset: -3px;
}

body.columnResizing {
  cursor: col-resize;
  user-select: none;
}

body.columnResizing .appShell,
body.columnResizing .appShell.paneTransitionsReady .navigator,
body.columnResizing .appShell.paneTransitionsReady .inspector {
  transition: none;
}

.navigator {
  grid-column: 1;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid rgba(1, 10, 39, 0.95);
  background:
    radial-gradient(circle at 92% 4%, rgba(139, 107, 232, 0.24), transparent 28%),
    linear-gradient(180deg, var(--sidebar) 0%, var(--brand-deep) 100%);
  color: #ffffff;
}

.appShell.paneTransitionsReady .navigator {
  transition:
    border-color 400ms ease-in-out,
    opacity 400ms ease-in-out,
    transform 400ms ease-in-out;
}

.navigatorChrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 12px 14px 8px;
  -webkit-app-region: drag;
}

.windowControlSpacer {
  width: 76px;
  height: 18px;
  flex: 0 0 auto;
}

.navigatorActions {
  display: flex;
  align-items: center;
  gap: 6px;
  -webkit-app-region: no-drag;
}

.iconButton {
  display: inline-grid;
  place-items: center;
  width: 30px;
  padding: 0;
  -webkit-app-region: no-drag;
}

.settingsIcon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.refreshIcon {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.navBrand {
  padding: 4px 18px 16px;
}

.brandLockup {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brandMarkFrame {
  position: relative;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
}

.brandMark {
  position: absolute;
  inset: 0;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}

.brandMarkLight {
  display: none;
}

.brandText {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.brandWordmark {
  display: block;
  width: 64px;
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.22));
}

.navBrand h1 {
  margin: 0;
  color: #ffffff;
  font-family: Sora, Hind, ui-sans-serif, system-ui, sans-serif;
  font-size: 17px;
  font-weight: 720;
  line-height: 1.15;
}

.navBrand p {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.64);
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.quickNav,
.navigatorFooter {
  display: grid;
  gap: 6px;
  padding: 0 10px 12px;
}

.navigatorFooter {
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.navCommand,
.navSearch {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  min-height: 34px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  padding: 6px 10px;
  text-align: left;
}

.navCommand:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.09);
  border: 0;
  color: #ffffff;
}

.navSearch {
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.navSearch input {
  min-height: 0;
  border: 0;
  background: transparent;
  color: #ffffff;
  padding: 0;
}

.navSearch input::placeholder {
  color: rgba(255, 255, 255, 0.54);
}

.navSearch input:focus {
  outline: 0;
}

.navCreateForm {
  display: grid;
  gap: 7px;
  padding: 8px 10px 10px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
}

.navCreateForm[hidden] {
  display: none;
}

.navCreateForm input,
.navCreateForm select {
  min-height: 30px;
  padding: 6px 8px;
}

.navCreateActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.navCreateActions button {
  min-width: 0;
  padding: 4px 8px;
}

.commandIcon {
  color: rgba(255, 255, 255, 0.68);
  font-size: 16px;
}

.treePanel {
  min-height: 0;
  overflow: auto;
  padding: 4px 8px 14px;
}

.treeSectionLabel {
  padding: 10px 10px 6px;
  color: rgba(255, 255, 255, 0.46);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.workspaceStatus {
  margin: 0 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.76);
  padding: 7px 9px;
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.workspaceStatus[hidden] {
  display: none;
}

.workspaceStatus.working {
  border-color: rgba(139, 107, 232, 0.32);
  background: rgba(139, 107, 232, 0.14);
}

.workspaceStatus.done {
  border-color: rgba(43, 138, 95, 0.34);
  background: rgba(43, 138, 95, 0.13);
}

.workspaceStatus.error {
  border-color: rgba(255, 87, 101, 0.38);
  background: rgba(255, 87, 101, 0.12);
}

.contextTree {
  display: grid;
  gap: 1px;
}

.treeRow {
  display: grid;
  grid-template-columns: 16px 20px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 30px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
  padding: 4px 8px 4px calc(8px + (var(--depth) * 15px));
  text-align: left;
}

.treeRow.editing {
  background: rgba(255, 255, 255, 0.1);
}

.treeRow:hover {
  background: rgba(255, 255, 255, 0.09);
}

.treeRow.active {
  background: var(--active);
  color: var(--brand-navy);
  box-shadow: 0 8px 22px rgba(1, 10, 39, 0.18);
}

.treeRow.dragging {
  opacity: 0.45;
}

.treeRow.dragOver {
  background: rgba(139, 107, 232, 0.15);
  outline: 1px solid rgba(139, 107, 232, 0.36);
}

.treeRow.dropBefore,
.treeRow.dropAfter {
  position: relative;
}

.treeRow.dropBefore::before,
.treeRow.dropAfter::after {
  content: "";
  position: absolute;
  left: calc(10px + (var(--depth) * 15px));
  right: 8px;
  height: 2px;
  border-radius: 999px;
  background: var(--accent-hot);
}

.treeRow.dropBefore::before {
  top: 0;
}

.treeRow.dropAfter::after {
  bottom: 0;
}

/* Presence chips on tree rows (Presence slice B): overlapping co-viewer faces
   with a soft pulse, calmer when just viewing and quicker while typing. */
.treePresence {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-left: 6px;
  justify-self: end;
}
.presenceFace {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: rgba(139, 107, 232, 0.9);
  border: 1.5px solid var(--brand-navy, #0d1327);
  margin-left: -6px;
  overflow: hidden;
}
.presenceFace:first-child {
  margin-left: 0;
}
.presenceFace img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.presenceMore {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.62);
  margin-left: 3px;
}
.treeRow.active .presenceFace {
  border-color: var(--active, #fff);
}
@media (prefers-reduced-motion: no-preference) {
  .treePresence .presenceFace:first-child {
    animation: presencePulse 2.4s ease-in-out infinite;
  }
  .treePresence.typing .presenceFace:first-child {
    animation-duration: 1s;
  }
}
@keyframes presencePulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(139, 107, 232, 0.5);
  }
  50% {
    box-shadow: 0 0 0 3px rgba(139, 107, 232, 0);
  }
}

.disclosure {
  color: rgba(255, 255, 255, 0.52);
  font-size: 11px;
}

.treeIcon {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 13px;
}

.runSpinner {
  width: 10px;
  height: 10px;
  border: 2px solid rgba(139, 107, 232, 0.22);
  border-top-color: var(--brand-violet);
  border-radius: 999px;
  animation: runSpin 0.8s linear infinite;
}

.unreadDot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent-hot);
  box-shadow: 0 0 0 2px rgba(255, 87, 101, 0.16);
}

@keyframes runSpin {
  to {
    transform: rotate(360deg);
  }
}

.treeLabel {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 590;
}

.treeEditSlot {
  min-width: 0;
}

.treeRenameInput {
  min-height: 24px;
  border-radius: 5px;
  padding: 2px 6px;
  font-weight: 590;
}

.treeRenameInput:focus {
  border-color: rgba(139, 107, 232, 0.75);
  outline: 2px solid rgba(139, 107, 232, 0.18);
}

.treeCount {
  color: rgba(255, 255, 255, 0.42);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.treeText {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.treeMeta {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.52);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* The meta line always occupies its space so rows never change height;
     it fades in on hover instead of popping the layout around. */
  opacity: 0;
  transition: opacity 130ms ease;
}

.treeRow:hover .treeMeta,
.treeRow.active .treeMeta,
.treeRow.editing .treeMeta,
.treeRow.running .treeMeta {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .treeMeta {
    transition: none;
  }
}

.treeRow.active .treeIcon,
.treeRow.active .disclosure,
.treeRow.active .treeCount,
.treeRow.active .treeMeta {
  color: rgba(14, 22, 51, 0.68);
}

.appShell.sidebarLight .navigator {
  border-right-color: rgba(217, 221, 235, 0.95);
  background:
    radial-gradient(circle at 92% 4%, rgba(139, 107, 232, 0.12), transparent 28%),
    linear-gradient(180deg, #fbfcff 0%, #eef2fb 100%);
  color: var(--ink);
}

.appShell.sidebarLight .brandMarkDark {
  display: none;
}

.appShell.sidebarLight .brandMarkLight {
  display: block;
}

.appShell.sidebarLight .brandMark {
  box-shadow: 0 8px 22px rgba(14, 22, 51, 0.12);
}

.appShell.sidebarLight .brandWordmark {
  filter: none;
}

.appShell.sidebarLight .navBrand h1 {
  color: #161a32;
}

.appShell.sidebarLight .navBrand p {
  color: var(--muted);
}

.appShell.sidebarLight .navCommand,
.appShell.sidebarLight .navSearch {
  color: #3d4657;
}

.appShell.sidebarLight .navCommand:hover:not(:disabled) {
  background: rgba(110, 98, 229, 0.08);
  color: #1d2132;
}

.appShell.sidebarLight .navSearch,
.appShell.sidebarLight .navCreateForm {
  border-color: rgba(110, 98, 229, 0.14);
  background: rgba(255, 255, 255, 0.76);
}

.appShell.sidebarLight .navSearch input {
  color: var(--ink);
}

.appShell.sidebarLight .navSearch input::placeholder {
  color: #7e8798;
}

.appShell.sidebarLight .commandIcon {
  color: var(--muted);
}

.appShell.sidebarLight .treeSectionLabel {
  color: #5f687a;
}

.appShell.sidebarLight .treeRow {
  color: #303847;
}

.appShell.sidebarLight .treeRow.editing,
.appShell.sidebarLight .treeRow:hover {
  background: rgba(110, 98, 229, 0.07);
}

.appShell.sidebarLight .treeRow.active {
  background: var(--active);
  color: #171a32;
  box-shadow: 0 8px 22px rgba(110, 98, 229, 0.12);
}

.appShell.sidebarLight .treeRow.dragOver {
  background: rgba(139, 107, 232, 0.12);
}

.appShell.sidebarLight .disclosure,
.appShell.sidebarLight .treeIcon,
.appShell.sidebarLight .treeCount,
.appShell.sidebarLight .treeMeta {
  color: #7b8496;
}

.contextMenu {
  position: fixed;
  z-index: 40;
  display: grid;
  min-width: 150px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow);
}

.contextMenu[hidden] {
  display: none;
}

.contextMenu button {
  border: 0;
  background: transparent;
  text-align: left;
}

.contextMenu button:hover,
.contextMenu button:focus-visible {
  background: rgba(0, 0, 0, 0.06);
}

.contextMenu button:focus-visible {
  outline: 2px solid var(--accent, #6e62e5);
  outline-offset: -2px;
}

.settingsOverlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: rgba(23, 27, 32, 0.24);
  padding: 22px;
}

/* The confirmation dialog can open on top of Settings (e.g. group deletion),
   so it must stack above other overlays regardless of DOM order. */
#confirmPanel.settingsOverlay {
  z-index: 60;
}

#contextMovePanel.settingsOverlay {
  z-index: 61;
}

.settingsOverlay[hidden] {
  display: none;
}

.scheduleSheet {
  width: min(620px, 100%);
}

.confirmSheet {
  width: min(460px, 100%);
}

.organizationSwitchPasswordSheet {
  width: min(480px, 100%);
}

.organizationSwitchPasswordError {
  min-height: 1.35em;
  color: var(--danger, #b42318);
  font-size: 12.5px;
  line-height: 1.35;
}

.organizationSwitchPasswordError[hidden] {
  display: none;
}

.settingsSheet.contextMoveSheet {
  width: min(760px, 100%);
  max-height: min(860px, calc(100dvh - 44px));
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.contextMoveHeaderNote,
.contextMoveSectionHeader p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.contextMoveBody {
  display: grid;
  gap: 16px;
  min-height: 0;
  padding: 18px 20px;
  overflow: auto;
}

.contextMoveSummary {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2, rgba(127, 127, 127, 0.06));
  font-size: 13px;
  line-height: 1.4;
}

.contextMoveSummary strong {
  color: var(--ink);
}

.contextMoveAccessSection {
  display: grid;
  gap: 10px;
}

.contextMoveSectionHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.contextMoveSectionHeader h3,
.contextMoveSectionHeader p {
  margin-top: 0;
  margin-bottom: 0;
}

.contextMoveAccessList {
  display: grid;
  gap: 8px;
}

.contextMoveWindowGroup {
  display: grid;
  gap: 7px;
}

.contextMoveWindowHeader,
.contextMoveWindowControls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.contextMoveWindowControls {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.contextMoveWindowCount {
  color: var(--muted);
  font-size: 12px;
}

.contextMoveWindowToggle {
  min-height: 32px;
  padding-block: 5px;
}

.contextMoveWindowLabel {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.contextMoveAccessItem {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--window);
  cursor: pointer;
}

.contextMoveAccessItem:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--window));
}

.contextMoveAccessItem.isUnavailable {
  grid-template-columns: minmax(0, 1fr);
  cursor: default;
  opacity: 1;
  border-style: dashed;
  background: color-mix(in srgb, var(--muted) 5%, var(--window));
}

.contextMoveAccessItem input {
  margin-top: 3px;
}

.contextMoveAccessCopy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.contextMoveAccessTitle {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px 8px;
  color: var(--ink);
  font-size: 13px;
}

.contextMoveAccessType {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.contextMoveAccessMeta,
.contextMoveAccessReason,
.contextMoveAccessPermissions {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.contextMoveAccessReason {
  color: var(--ink);
}

.contextMoveEmptyAccess {
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  color: var(--muted);
  font-size: 12px;
}

.contextMoveDestinationCapabilities {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}

.contextMoveDestinationCapabilities input {
  margin-top: 3px;
}

.contextMoveDestinationCapabilities span {
  display: grid;
  gap: 3px;
  font-size: 12px;
}

.contextMoveDestinationCapabilities small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.contextMoveFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px max(20px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
  border-top: 1px solid var(--line);
}

.contextMoveSelectionStatus {
  color: var(--muted);
  font-size: 12px;
}

#confirmMessage {
  white-space: pre-line;
}

.confirmPhraseGroup {
  display: grid;
  gap: 6px;
}

.confirmPhraseGroup[hidden] {
  display: none;
}

.scheduleSheet textarea {
  min-height: 120px;
  resize: vertical;
}

.scheduleInspection {
  display: grid;
  gap: 1px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  overflow: hidden;
  background: var(--window);
}

.schedulePreviewLabel {
  color: var(--subtle);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.scheduleInspection[hidden] {
  display: none;
}

.scheduleInspectionRow {
  display: grid;
  grid-template-columns: minmax(88px, 0.36fr) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 30px;
  padding: 6px 9px;
  background: var(--canvas);
  color: var(--muted);
  font-size: 12px;
}

.scheduleInspectionRow span {
  color: var(--subtle);
}

.scheduleInspectionRow strong {
  color: var(--ink);
  font-weight: 650;
  overflow-wrap: anywhere;
}

.scheduleInspectionRow.working strong {
  color: var(--accent-ink);
}

.scheduleInspectionRow.warn strong {
  color: #8b5d00;
}

.scheduleInspectionRow.danger strong {
  color: #a42c2c;
}

.scheduleInspectionRow.done strong,
.scheduleInspectionRow.ok strong {
  color: var(--green);
}

.scheduleInspectionRow.muted strong {
  color: var(--muted);
}

.importActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.importPreview {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 9px;
  background: var(--canvas);
}

.importPreview[hidden] {
  display: none;
}

.importPreviewHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--subtle);
  font-size: 12px;
}

.importPreviewHeader strong {
  color: var(--muted);
  font-weight: 700;
  text-align: right;
}

.importPreview.ok .importPreviewHeader strong {
  color: var(--green);
}

.importPreview.warn .importPreviewHeader strong {
  color: #8b5d00;
}

.importPreview.loading .importPreviewHeader strong {
  color: var(--accent-ink);
}

.importPreview.blocked .importPreviewHeader strong {
  color: #a42c2c;
}

.importPreviewRows {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--window);
}

.importPreviewRow {
  display: grid;
  grid-template-columns: minmax(76px, 0.34fr) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 28px;
  padding: 5px 7px;
  background: var(--canvas);
  color: var(--muted);
  font-size: 12px;
}

.importPreviewRow span {
  color: var(--subtle);
}

.importPreviewRow strong {
  color: var(--ink);
  font-weight: 650;
  overflow-wrap: anywhere;
}

.importPreviewNote {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.importArtifactOption {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 650;
}

.importArtifactOption input {
  width: 14px;
  height: 14px;
  margin: 0;
}

.importArtifactList {
  display: grid;
  gap: 6px;
}

.importArtifactItem {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 6px 7px;
  border: 1px solid #d9e6dc;
  border-radius: 7px;
  background: #f7fcf8;
  color: var(--muted);
  font-size: 12px;
}

.importArtifactItem.wip {
  border-color: var(--accent-soft);
  background: var(--accent-faint);
}

.importArtifactItem strong,
.importArtifactItem span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.importArtifactItem strong {
  color: var(--ink);
  font-weight: 650;
}

.importDuplicateList {
  display: grid;
  gap: 6px;
}

.importDuplicateItem {
  display: grid;
  gap: 2px;
  border-left: 3px solid rgba(188, 126, 0, 0.55);
  padding: 5px 7px;
  background: rgba(188, 126, 0, 0.08);
  color: var(--muted);
  font-size: 12px;
}

.importDuplicateItem strong {
  color: var(--ink);
  font-weight: 650;
}

.importDuplicateItem span {
  overflow-wrap: anywhere;
}

.importDuplicateActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.importDuplicateActions button {
  min-height: 30px;
  padding: 6px 8px;
  font-size: 12px;
}

.authOverlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: rgba(246, 246, 245, 0.88);
  backdrop-filter: blur(18px);
  padding: 22px;
}

.authOverlay[hidden] {
  display: none;
}

.authSheet {
  display: grid;
  gap: 16px;
  width: min(420px, 100%);
  max-height: calc(100vh - 44px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--canvas);
  box-shadow: var(--shadow);
  padding: 22px;
}

.authHeader h2 {
  margin: 0;
  font-size: 18px;
}

.authIntro {
  color: var(--muted);
  font-size: 12px;
}

.authForm {
  display: grid;
  gap: 12px;
}

.authTextButton {
  min-height: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 650;
  justify-self: center;
  padding: 3px 6px;
}

.authTextButton:hover:not(:disabled) {
  border-color: transparent;
  background: transparent;
  text-decoration: underline;
}

.bootstrapDetails {
  border-top: 1px solid var(--line-soft);
  padding-top: 12px;
}

.bootstrapDetails summary {
  color: var(--muted);
  cursor: pointer;
  font-weight: 650;
}

.bootstrapDetails[open] summary {
  margin-bottom: 12px;
}

.bootstrapUnavailable {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--window);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  padding: 10px;
}

.bootstrapUnavailable[hidden] {
  display: none;
}

.settingsSheet {
  display: grid;
  width: min(920px, 100%);
  max-height: calc(100vh - 44px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--canvas);
  box-shadow: var(--shadow);
}

.settingsSheetTabbed {
  width: min(1080px, 100%);
  height: calc(100vh - 44px);
  max-height: calc(100vh - 44px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.settingsBody {
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  min-height: 0;
}

.settingsNav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 10px;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper, #f7f7f9) 60%, var(--canvas));
  overflow-y: auto;
}

.settingsNavSection {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper, #f7f7f9) 82%, transparent);
}

.settingsNavGroup {
  padding: 3px 6px 2px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}

/* One-line plain-language gloss under a nav group (#214) — tells a business
   user what the section IS before they click into it. */
.settingsNavNote {
  padding: 0 6px 6px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
}

.settingsPrincipalPicker {
  display: grid;
  gap: 3px;
  padding: 4px 6px 7px;
  color: var(--muted);
  font-size: 11px;
}

.settingsPrincipalPicker select {
  width: 100%;
  min-width: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 650;
}

.settingsPrincipalPicker.single select {
  appearance: none;
  border-color: transparent;
  padding-left: 0;
  background: transparent;
  opacity: 1;
  -webkit-text-fill-color: var(--ink);
}

.settingsResourceOwner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--accent, #6e62e5) 24%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent, #6e62e5) 5%, var(--canvas));
  font-size: 12px;
}

.settingsResourceOwner span { color: var(--muted); }

.settingsOwnedResources {
  display: grid;
  gap: 7px;
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--paper, #f7f7f9) 60%, var(--canvas));
}
.settingsOwnedResourcesHeader h4 { margin: 0; }
.settingsOwnedResourcesHeader span { color: var(--muted); font-size: 11.5px; }
.settingsOwnedResourcesFilterState { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.settingsOwnedResourceCard { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--canvas); }
.settingsOwnedResourceCard > div:first-child { display: grid; min-width: 0; gap: 2px; }
.settingsOwnedResourceCard > div:first-child span { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.settingsOwnedResourceActions { display: flex; flex-wrap: wrap; align-items: end; justify-content: flex-end; gap: 6px; }
.settingsOwnedResourceActions label { display: grid; gap: 2px; color: var(--muted); font-size: 10.5px; }
.settingsOwnedResourceActions select { max-width: 170px; }
.settingsOwnedResourceEditor { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.settingsOwnedResourceEditor label { display: grid; gap: 4px; font-size: 11.5px; }
.settingsOwnedResourceEditor label:has(input[type="checkbox"]) { display: flex; align-items: center; }
.settingsOwnedResourceEditor .ownedEditorWide { grid-column: 1 / -1; }
.settingsOwnedResourceEditor label.ownedEditorCheck { display: flex; align-items: flex-start; justify-content: flex-start; gap: 8px; line-height: 1.35; }
.settingsOwnedResourceEditor .ownedEditorCheck input[type="checkbox"] { flex: 0 0 auto; width: auto; margin: 2px 0 0; }
.settingsOwnedResourceEditor .ownedEditorCheck span { min-width: 0; }
.settingsOwnedResourceSearch { width: 100%; }
.settingsOwnedResourceCard.duplicateFocus { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); }
.settingsCanonicalRichResource { margin: 0; }
.settingsCanonicalOwnerMeta { color: var(--muted); font-size: 11.5px; }
.catalogOwnershipTransfer { display: flex; align-items: end; justify-content: flex-end; gap: 8px; flex: 0 1 360px; }
.catalogOwnershipTransfer label { display: grid; gap: 3px; min-width: 190px; color: var(--muted); font-size: 11px; }
.catalogOwnershipTransfer select { width: 100%; }

/* Once the canonical owner catalog is present it is the only inventory. The
   typed lists still hydrate off-screen to supply duplicate detection and rich
   MCP connection controls, which are moved into the matching canonical row. */
.settingsCanonicalInventory #credentialList,
.settingsCanonicalInventory #mcpServerList,
.settingsCanonicalInventory #scopedCapabilityList,
.settingsCanonicalInventory .capabilitySettings > .legacyResourceScopeList {
  display: none !important;
}

/* Organization members may inspect the canonical owner cards and transfer a
   resource they personally own, but rich scope rows expose mutation verbs
   whose endpoints are intentionally admin-only. Keep those controls entirely
   out of the read-only view instead of letting every click end in a 403. */
.settingsOwnerReadOnly .legacyResourceScopeList,
.settingsOwnerReadOnly #credentialAdd,
.settingsOwnerReadOnly #credentialEditor,
.settingsOwnerReadOnly #skillCreateGroup,
.settingsOwnerReadOnly #capabilityRefresh,
.settingsOwnerReadOnly #toolPolicyDisclosure,
.settingsOwnerReadOnly #mcpAddServer,
.settingsOwnerReadOnly #mcpAddCustomServer,
.settingsOwnerReadOnly #mcpEditor {
  display: none !important;
}

.legacyScopeGrant { display: none !important; }

.settingsNavItem {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.settingsNavItem:hover {
  background: color-mix(in srgb, var(--accent, #4b6bfb) 8%, transparent);
}

.settingsNavItem.active {
  background: color-mix(in srgb, var(--accent, #4b6bfb) 14%, transparent);
  box-shadow: inset 3px 0 0 var(--accent, #4b6bfb);
  font-weight: 600;
}

.settingsContent {
  min-width: 0;
  overflow-y: auto;
  padding: 0 4px;
}

.settingsContent .settingsForm {
  border: 0;
  box-shadow: none;
}

.settingsDraftBar {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 10px 16px;
  border-top: 1px solid color-mix(in srgb, var(--accent, #4b6bfb) 34%, var(--line));
  background: color-mix(in srgb, var(--accent, #4b6bfb) 9%, var(--canvas));
  box-shadow: 0 -8px 22px rgba(14, 22, 51, 0.08);
}

.settingsDraftBar[hidden] {
  display: none;
}

.settingsDraftBar > div:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.settingsDraftBar strong {
  color: var(--ink);
  font-size: 13px;
}

.settingsDraftBar span {
  color: var(--muted);
  font-size: 11.5px;
  overflow-wrap: anywhere;
}

.settingsDraftActions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

[data-settings-save-in-flight] {
  cursor: progress;
}

[data-settings-save-in-flight][inert] {
  opacity: 0.78;
}

.treeRow.leaf.multiSelected {
  background: color-mix(in srgb, var(--accent, #4b6bfb) 16%, transparent);
  outline: 1px solid color-mix(in srgb, var(--accent, #4b6bfb) 45%, transparent);
  outline-offset: -1px;
}

.bulkActionBar[hidden] {
  display: none;
}

/* Floating selection card pinned to the bottom of the tree: count and
   clear on the first row, the actions on their own full-width row. */
.bulkActionBar {
  position: sticky;
  bottom: 6px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "count clear"
    "actions actions";
  align-items: center;
  gap: 8px 10px;
  margin: 8px 6px 2px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--canvas);
  box-shadow: var(--shadow-md);
  z-index: 5;
}

.bulkActionCount {
  grid-area: count;
  color: var(--ink);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.bulkActionBar select {
  grid-area: actions;
  min-width: 0;
  width: 100%;
}

.bulkActionBar #bulkMoveButton,
.bulkActionBar #bulkTrashButton {
  grid-row: 3;
  width: 100%;
}

.bulkActionBar #bulkMoveButton {
  grid-column: 1;
  border-color: var(--accent);
  color: var(--accent-ink);
}

.bulkActionBar #bulkMoveButton:disabled {
  border-color: var(--line);
  color: var(--subtle);
}

.bulkActionBar #bulkTrashButton {
  grid-column: 2;
}

.bulkActionBar #bulkClearButton {
  grid-area: clear;
  min-width: 30px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
}

.bulkActionBar #bulkClearButton:hover {
  color: var(--ink);
}

.treeRow.subagentLeaf .treeLabel {
  color: var(--muted);
}

.treeRow.subagentLeaf.active .treeLabel {
  color: inherit;
}

.treeRow.leaf .subDisclosure {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  min-height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--muted);
  border-radius: 4px;
}

.treeRow.leaf.hasSubagents {
  grid-template-columns: 24px minmax(0, 1fr) auto;
}

.treeLeafMain {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  min-height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.treeLeafMain:focus-visible,
.subDisclosure:focus-visible {
  outline: 2px solid var(--accent, #6e62e5);
  outline-offset: 1px;
}

.treeRow.leaf .subDisclosure:hover {
  color: var(--accent, #2f5adf);
  background: color-mix(in srgb, var(--accent, #4b6bfb) 12%, transparent);
}

.subagentMark {
  color: var(--accent, #2f5adf);
  font-weight: 600;
}

/* ◆ on the family's primary leaf in the tree (#202). */
.treePrimaryMark {
  color: var(--brand-violet);
  font-size: 10px;
}

.askUserCard {
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--accent, #4b6bfb) 35%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent, #4b6bfb) 5%, transparent);
}

.askUserLabel {
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent, #2f5adf);
}

.askUserOptions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.askUserOption {
  max-width: 100%;
  padding: 6px 14px;
  border: 1px solid var(--accent, #2f5adf);
  border-radius: 999px;
  background: transparent;
  color: var(--accent, #2f5adf);
  font: inherit;
  font-size: 13px;
  overflow-wrap: anywhere;
  text-align: left;
  white-space: normal;
  cursor: pointer;
}

.askUserOption:hover {
  background: color-mix(in srgb, var(--accent, #4b6bfb) 12%, transparent);
}

.askUserCard.answered {
  opacity: 0.72;
}

/* Header + timeline share the pane's 1fr grid row: the header keeps its
   natural height and the timeline absorbs the rest. Without this wrapper a
   short transcript let the header div stretch to fill the leftover row and
   the divider line floated ~70px below its label. */
.timelineArea {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  flex: 1 1 auto; /* mobile: the pane is a flex column; take the free space */
}

.timelineArea > .timeline {
  flex: 1 1 0;
}

/* Sticky model header: pinned above the transcript, always naming the model
   that produced the content currently at the top of the viewport. Styled as
   a full-width labeled divider — the line makes the clip edge below it read
   as intentional instead of content being cut off mid-air. */
.timelineModelHeader {
  position: relative;
  margin: 8px 20px 10px;
  text-align: center;
  font-size: 11px;
  color: var(--subtle);
  letter-spacing: 0.03em;
  white-space: nowrap;
  pointer-events: none;
}

.timelineModelHeader::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px dashed var(--line);
}

.timelineModelHeader > span {
  position: relative;
  padding: 0 12px;
  background: var(--canvas);
}

/* Manual model-switch marker: instant transcript confirmation of the pick. */
.runtimeChangeMarker {
  display: inline-block;
  padding: 4px 12px;
  border: 1px dashed var(--line);
  border-radius: 999px;
  color: var(--subtle);
  font-size: 12px;
}

/* Kept as its own rule rather than joined to the selector above:
   model-switch-composer.test.js matches `.runtimeChangeMarker {` literally. */
.steerAppliedMarker {
  display: inline-block;
  padding: 4px 12px;
  border: 1px dashed var(--line);
  border-radius: 999px;
  color: var(--subtle);
  font-size: 12px;
}

/* TES-286: a prompt that was refused before its run started. Unlike the live
   error bubble this replaces, it is a persisted event — it survives the
   post-run reconcile and a page reload, which is the whole point. Styled as a
   warning notice, not an error: nothing broke, the workspace was busy. */
.runNotStartedMarker {
  padding: 10px 14px;
  border: 1px dashed var(--line);
  border-left: 3px solid var(--warning, #d08700);
  border-radius: 10px;
  color: var(--subtle);
  font-size: 13px;
  line-height: 1.5;
}

.runNotStartedActions {
  margin-top: 8px;
}

.askUserOption.selected {
  background: var(--accent, #2f5adf);
  color: #fff;
}

.askUserActions {
  margin-top: 10px;
}

.askUserActions button:disabled {
  opacity: 0.5;
  cursor: default;
}

.askUserOption:disabled {
  opacity: 0.55;
  cursor: default;
}

.askUserFree {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.askUserFree input {
  flex: 1;
  min-width: 0;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg, transparent);
  color: inherit;
  font: inherit;
  font-size: 13px;
}

.askUserFree button {
  padding: 6px 14px;
  border: 1px solid var(--accent, #2f5adf);
  border-radius: 999px;
  background: var(--accent, #2f5adf);
  color: #fff;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

/* Rendered markdown inside timeline messages and artifact previews. */
.mdContent {
  white-space: normal;
}

/* TES-255 math. macOS ships STIX Two Math and Windows ships Cambria Math; a
   Linux Chromium without a MATH-table font degrades in glyph quality (stretchy
   delimiters, radicals) but not in structure — mfrac/msub/msup stay correct.
   Display math scrolls rather than widening its container: a long formula must
   not push the transcript sideways. */
.mdContent math {
  font-family: "Cambria Math", "STIXTwoMath-Regular", "Noto Sans Math", math;
  font-size: 1.05em;
}

.mdContent math[display="block"] {
  display: block;
  margin: 12px 0;
  overflow-x: auto;
  max-width: 100%;
}

.mdContent > :first-child {
  margin-top: 0;
}

.mdContent > :last-child {
  margin-bottom: 0;
}

.mdContent h2, .mdContent h3, .mdContent h4, .mdContent h5, .mdContent h6 {
  margin: 14px 0 6px;
  line-height: 1.3;
}

.mdContent h2 { font-size: 18px; }
.mdContent h3 { font-size: 16px; }
.mdContent h4 { font-size: 15px; }
.mdContent h5, .mdContent h6 { font-size: 14px; }

.mdContent p {
  margin: 8px 0;
}

.mdContent ul, .mdContent ol {
  margin: 8px 0;
  padding-left: 22px;
}

.mdContent li {
  margin: 3px 0;
}

.mdContent blockquote {
  margin: 8px 0;
  padding: 4px 12px;
  border-left: 3px solid var(--line);
  color: var(--muted);
}

.mdContent hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 12px 0;
}

.mdContent .mdInlineCode {
  padding: 1px 5px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--line) 45%, transparent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
}

.mdContent .mdCode {
  margin: 8px 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--line) 22%, transparent);
  overflow-x: auto;
  white-space: pre;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.5;
}

.mdContent .mdTableWrap {
  margin: 8px 0;
  overflow-x: auto;
}

.mdContent table {
  border-collapse: collapse;
  font-size: 13px;
}

.mdContent th, .mdContent td {
  border: 1px solid var(--line);
  padding: 5px 10px;
  text-align: left;
  vertical-align: top;
}

.mdContent th {
  background: color-mix(in srgb, var(--line) 25%, transparent);
}

.mdContent a {
  color: var(--accent, #2f5adf);
}

pre.artifactPreview.mdContent,
.artifactPreviewMarkdown {
  white-space: normal;
  font-family: inherit;
}

.settingsScopeBar[hidden],
.settingsNavSection[hidden],
.settingsNavItem[hidden],
.settingsPane[hidden] {
  display: none;
}

.settingsScopeBar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent, #4b6bfb) 6%, var(--canvas));
}

.settingsScopeBarLabel {
  display: grid;
  gap: 2px;
  font-size: 13px;
}

.settingsScopeAccess {
  color: var(--muted);
  font-size: 12px;
}

.settingsScopeAccess.scopeAdmin {
  color: var(--accent-ink, #5548c8);
  font-weight: 600;
}

.settingsScopeSelect select {
  min-width: 220px;
}

.groupManagerList {
  margin: 0 0 8px;
}

.groupManagerItem {
  align-items: center;
}

.groupManagerActions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.groupRenameInput {
  flex: 1;
  min-width: 0;
}

@media (max-width: 760px) {
  .settingsBody {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .settingsNav {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }
  .settingsNavSection {
    display: flex;
    flex-direction: row;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
    padding-right: 8px;
    border-right: 1px solid var(--line-soft);
  }
  .settingsNavSection:last-child {
    padding-right: 0;
    border-right: 0;
  }
  .settingsNavGroup {
    flex: 0 0 auto;
    padding: 0 6px 0 2px;
    white-space: nowrap;
  }
  .settingsNavNote {
    display: none;
  }
  .settingsNavItem {
    flex: 0 0 auto;
    width: auto;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    white-space: nowrap;
  }
  .settingsDraftBar {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
  }
  .settingsDraftActions button {
    flex: 1 1 0;
  }
  .mcpDangerActions {
    margin: 4px 0 0;
    padding: 10px 0 0;
    border-top: 1px solid color-mix(in srgb, var(--red) 36%, var(--line));
    border-left: 0;
  }
}

.settingsHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
}

.settingsTitleBlock {
  display: grid;
  gap: 3px;
}

.settingsHeader h2 {
  margin: 0;
  font-size: 16px;
}

.settingsForm {
  display: grid;
  gap: 12px;
  padding: 14px 16px 16px;
}

.settingsGroup {
  display: grid;
  gap: 5px;
}

.settingsGroup[hidden] {
  display: none;
}

.settingsFieldHeading {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
}

.translationPolicyList {
  display: grid;
  gap: 6px;
}

.translationPolicyRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--window);
}

.translationPolicyRow > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.translationPolicyRow small {
  color: var(--muted);
  font-size: 11px;
}

.translationPolicyRow select {
  min-width: 146px;
}

.accessRequestActions .accessConnectLink {
  align-self: center;
  font-size: 12px;
  color: var(--muted);
  text-decoration: underline;
}

.navigatorActions {
  position: relative;
}

#notificationsBell {
  position: relative;
}

.notificationsBadge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 8px;
  background: #b91c1c;
  color: #ffffff;
  font-size: 9px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}

.notificationsPanel {
  /* Portaled to <body> and positioned off the bell at open time: inside
     the sidebar it inherits a stacking context that paints under the
     conversation pane. */
  position: fixed;
  z-index: 260;
  width: 320px;
  max-height: 420px;
  overflow-y: auto;
  background: var(--canvas, #ffffff);
  border: 1px solid var(--hairline, #d9dbe3);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(16, 18, 34, 0.18);
}

.notificationsHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--hairline, #d9dbe3);
  font-size: 13px;
}

.notificationsHeaderActions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.notificationsHeader button {
  font-size: 12px;
}

.notificationRow {
  display: flex;
  align-items: stretch;
  width: 100%;
  border-bottom: 1px solid var(--hairline, #d9dbe3);
}

.notificationRow.unread {
  background: var(--accent-faint, rgba(99, 91, 255, 0.08));
}

/* TES-237: actionable ("waiting on you") is distinct at a glance, not only
   by position — an amber accent, stronger while it stays unresolved. */
.notificationRow.actionable {
  border-left: 3px solid #b45309;
}

.notificationRow.actionable.unread {
  background: rgba(180, 83, 9, 0.1);
}

.notificationMain {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  color: var(--ink, #1c1e26);
}

.notificationDismiss {
  flex: 0 0 auto;
  align-self: stretch;
  padding: 0 10px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  color: var(--muted, #6b7080);
}

.notificationDismiss:hover {
  color: var(--ink, #1c1e26);
}

.notificationRow strong { font-size: 12.5px; }
.notificationRow span { font-size: 12px; color: var(--muted, #6b7080); }
.notificationRow em { font-size: 11px; color: var(--muted, #6b7080); font-style: normal; }

:root[data-theme="dark"] .notificationsPanel {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.diskPressureBanner {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 16px;
  font-size: 13px;
  background: #b45309;
  color: #ffffff;
}

.diskPressureBanner.critical {
  background: #b91c1c;
}

.diskPressureBanner button {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 6px;
  padding: 2px 10px;
  cursor: pointer;
}

/* On a phone these admin advisory banners wrap to 3-4 lines each and ate a
   third of the viewport. Keep them one compact strip: left-aligned, clamped
   to two lines, dismiss button pinned to the end. */
@media (max-width: 780px) {
  .diskPressureBanner {
    justify-content: space-between;
    gap: 8px;
    padding: 6px 12px;
    font-size: 11.5px;
    line-height: 1.3;
    text-align: left;
  }
  .diskPressureBanner span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .diskPressureBanner button {
    flex: 0 0 auto;
    align-self: center;
    padding: 3px 9px;
    font-size: 11px;
  }
}

.storageDiskNote {
  font-size: 12px;
  color: var(--muted);
}

.storageDiskNote.warn {
  color: #b45309;
  font-weight: 600;
}

.storageDiskNote.critical {
  color: #b91c1c;
  font-weight: 600;
}

.storageRevealTitle {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--muted);
  font-style: italic;
  cursor: pointer;
  text-decoration: underline dotted;
}

.settingsGroupHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

/* Pane title: the strongest label in the pane. It was muted 13px, which let
   the section <h4>s (UA-default bold ink) out-shout it — an inverted
   hierarchy. Title now reads as a title; section labels sit clearly below it. */
.settingsGroup h3 {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.settingsForm h4,
.settingsGroup h4 {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Cluster divider: groups related sections inside a long pane (e.g. Server).
   Sits above the section labels in the hierarchy — pane title > cluster >
   section h4 — with a hairline rule so the wall of sections reads as chunks. */
.settingsCluster {
  margin: 10px 0 -2px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 12px;
  font-weight: 650;
}

.settingsPath {
  color: var(--subtle);
  font-size: 11px;
  overflow-wrap: anywhere;
}

/* TES-265: inline refusal under the spending-limit fields — spending cannot
   be allowed without at least one limit. Shared by the Saved Sign-ins grant
   editor and the access-request approval card. */
.credentialSpendingError {
  background: rgba(198, 42, 42, 0.13);
  color: #a42c2c;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 11.5px;
}

.settingsHint {
  margin-top: 4px;
}

.settingsHint code {
  color: var(--text);
  background: var(--surface-2, rgba(127, 127, 127, 0.14));
  border-radius: 4px;
  padding: 0 4px;
  font-size: 11px;
}

.secretField {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 10px;
}

.secretField span {
  color: var(--ink);
  font-size: 13px;
}

.secretField em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.secretField input {
  grid-column: 1 / -1;
}

.identitySettings {
  border-bottom: 1px solid var(--line-soft);
}

.spaceList {
  display: grid;
  gap: 8px;
}

.spaceItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--window);
}

.spaceItem strong {
  color: var(--ink);
  font-size: 13px;
}

.spaceItem span {
  color: var(--muted);
  font-size: 11px;
}

.groupCreateForm input {
  flex: 1 1 auto;
}

.adminSectionHeader {
  border-top: 1px solid var(--line-soft);
  padding-top: 12px;
}

.adminGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 12px;
}

.adminPanel {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--window);
}

.adminPanel h4 {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
}

.userCreateForm,
.inviteCreateForm {
  align-items: stretch;
}

.userCreateForm input,
.inviteCreateForm input,
.inviteCreateForm select {
  min-width: 0;
}

.inviteCreateForm {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.inviteCreateForm button {
  grid-column: 1 / -1;
}

.inviteLinkRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.inviteLinkRow input {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
}

.inviteListItem {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.membershipEditor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.membershipEditor label:nth-child(3),
.membershipEditor .settingsActions {
  grid-column: 1 / -1;
}

.adminList {
  display: grid;
  gap: 6px;
  min-height: 34px;
  color: var(--muted);
  font-size: 12px;
}

.adminRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
}

.orgCreateForm {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.orgCreateResult {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--accent-faint);
  font-size: 12px;
  line-height: 1.5;
}

.orgCreateResult code {
  word-break: break-all;
}

.adminListItem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--canvas);
}

.adminListItem:hover {
  border-color: #cbd2dc;
}

/* Name + email/meta share one cell; without a gap they read as one word. */
.adminListItem > div {
  display: flex;
  align-items: baseline;
  column-gap: 10px;
  row-gap: 2px;
  flex-wrap: wrap;
  min-width: 0;
}

.adminListItem strong {
  color: var(--ink);
  font-size: 12px;
}

.adminListItem span {
  color: var(--muted);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.adminListItem.disabledUser {
  background: var(--window);
  opacity: 0.72;
}

/* Usage rows only.

   The base .adminListItem grid is `minmax(0, 1fr) auto`, and an `auto` track is
   satisfied toward its max-content width BEFORE the 1fr cell gets anything. The
   quota cell routinely holds a whole sentence — "$0.09 this month · no spending
   limit added for this scope · covered by the $250.00 organization-wide limit" —
   so it claimed the row and starved the name/token cell to almost nothing.

   Moving the at-limit warning to its own row fixed only the branch that has a
   warning; the no-limit branch above reproduced it exactly. So the real fix is
   here: two FLEXIBLE tracks, neither sized to max-content, which lets a long
   sentence wrap inside its own column instead of starving its neighbour. */
.usageRow {
  grid-template-columns: minmax(16ch, 1fr) minmax(0, 1.7fr);
}

.usageRow > .usageRowNotice {
  grid-column: 1 / -1;
}

/* With `overflow-wrap: anywhere` inherited from .adminListItem span, a starved
   cell wraps one character per line rather than clipping. Word-level wrapping
   keeps the failure mode legible even if a track is squeezed at some width. */
.usageRow span {
  overflow-wrap: break-word;
}

.auditFilters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 8px;
}

.auditFilters label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
}

.auditFilters input,
.auditFilters select {
  width: 100%;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--canvas);
  color: var(--ink);
}

.auditActions { justify-content: flex-start; margin-bottom: 8px; }

.auditIntegrity {
  min-height: 20px;
  margin: 4px 0 8px;
  padding: 7px 9px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--window);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.auditIntegrity[data-status="verified"] {
  border-color: color-mix(in srgb, #16803c 35%, var(--line));
  background: color-mix(in srgb, #16803c 7%, var(--canvas));
  color: var(--status-good-ink);
}

.auditIntegrity[data-status="failed"] {
  border-color: color-mix(in srgb, #b42318 45%, var(--line));
  background: color-mix(in srgb, #b42318 8%, var(--canvas));
  color: var(--status-danger-ink);
}

.auditListItem { align-items: center; }
.auditListItem > div { align-items: center; }
.auditOutcome {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 10px;
  text-transform: capitalize;
}
.auditOutcome[data-outcome="succeeded"] { color: var(--status-good-ink); }
.auditOutcome[data-outcome="denied"],
.auditOutcome[data-outcome="failed"] { color: var(--status-danger-ink); }

.auditDetail {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--window);
  overflow: hidden;
}

.auditDetailHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-soft);
}

.auditDetailHeader button { min-width: 28px; padding: 2px 7px; }
.auditDetail pre {
  max-height: 360px;
  margin: 0;
  padding: 10px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--ink);
  font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.userTitleLine {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.statusBadge {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

.inactiveBadge {
  border: 1px solid #d7dce5;
  background: var(--line-soft);
  color: #64748b;
}

.checkboxLine {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 13px;
}

.checkboxLine input {
  width: auto;
}

.toolPolicySettings,
.capabilitySettings,
.credentialSettings,
.mcpSettings {
  border-top: 1px solid var(--line-soft);
}

.credentialList,
.credentialGrantList,
.capabilityProposalList,
.scopedCapabilityList {
  display: grid;
  gap: 8px;
}

/* TES-168. The "pending work lives in another space" switch button. Sits above
   the queue, reads as an action rather than a row, and inherits .ghostButton's
   theme variables so dark mode follows. */
.crossScopeJump {
  justify-self: start;
  font-weight: 600;
  color: var(--accent-ink);
}

/* TES-262. Search, site headings and the duplicate warning. Every colour is a
   theme variable, so dark mode follows without a second set of rules. */
.credentialSearch {
  width: 100%;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 13px;
  background: var(--canvas);
  color: var(--ink);
}

.credentialGroupHeading {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: lowercase;
}

.credentialGroupHeading:first-child {
  margin-top: 0;
}

.credentialListEmpty {
  padding: 14px 0 8px;
  color: var(--muted);
  font-size: 12px;
}

.credentialDuplicates {
  display: grid;
  gap: 8px;
}

.credentialDuplicateCard {
  display: grid;
  gap: 6px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--accent-faint);
}

.credentialDuplicateCard strong {
  color: var(--ink);
  font-size: 13px;
}

.credentialDuplicateCard span {
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.credentialDuplicateActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.credentialItem,
.credentialGrantItem,
.capabilityProposalItem,
.scopedCapabilityItem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--window);
}

.credentialItem strong,
.credentialGrantItem strong,
.capabilityProposalItem strong,
.scopedCapabilityItem strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
}

.credentialItem span,
.credentialGrantItem span,
.capabilityProposalItem span,
.scopedCapabilityItem span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.credentialGrantItem.disabled,
.scopedCapabilityItem.disabled {
  opacity: 0.62;
}

.capabilityProposalItem.pending {
  border-color: #c4b5fd;
  background: var(--accent-faint);
}

.capabilityProposalItem.approved {
  border-color: #bbf7d0;
}

.capabilityProposalItem.rejected,
.capabilityProposalItem.cancelled {
  opacity: 0.72;
}

.capabilityProposalActions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.capabilityProposalDecision {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.credentialEditor,
.credentialGrantPanel {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--canvas);
}

.scopeGrantPanel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 9px;
  background: var(--accent-faint);
}

.scopeGrantPanel[hidden],
.scopeGrantForm[hidden],
.scopeGrantList[hidden] {
  display: none;
}

.scopeGrantForm {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(120px, 0.55fr) auto;
  align-items: end;
  gap: 10px;
}

.scopeGrantForm .settingsActions {
  align-self: end;
  margin: 0;
}

.scopeGrantList {
  display: grid;
  gap: 8px;
}

.scopeGrantItem {
  background: var(--canvas);
}

.scopeGrantItem.scopeGrantInactive {
  opacity: 0.64;
}

.credentialEditor {
  grid-template-columns: 1fr 1fr;
}

.credentialEditor[hidden] {
  display: none;
}

.credentialEditor .credentialWide {
  grid-column: 1 / -1;
}

.credentialGrantGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.7fr);
  gap: 10px;
}

.credentialGrantGrid .checkboxLine,
.credentialGrantGrid .settingsActions {
  grid-column: 1 / -1;
}

.mcpServerList {
  display: grid;
  gap: 8px;
}

.mcpServerItem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(5, auto);
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--window);
}

.mcpServerItem strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
}

.mcpServerItem span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.mcpServerItem.disabled {
  opacity: 0.62;
}

.mcpServerItem .orgWideBadge {
  display: inline-flex;
  color: var(--accent-ink, #5548c8);
  background: var(--accent-faint);
}

.mcpServerItem .orgWideConsequence {
  color: var(--ink);
  font-weight: 600;
  line-height: 1.4;
}

.mcpDangerActions {
  display: flex !important;
  align-items: center;
  align-self: stretch;
  margin-left: 4px;
  padding-left: 12px;
  border-left: 1px solid color-mix(in srgb, var(--red) 36%, var(--line));
}

.windowAccessPointer {
  border-color: color-mix(in srgb, var(--accent, #4b6bfb) 24%, var(--line));
  background: color-mix(in srgb, var(--accent, #4b6bfb) 5%, var(--window));
}

.mcpSettingsToken {
  grid-column: 1 / -1;
  display: flex;
  align-items: end;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
}

.mcpSettingsToken[hidden] {
  display: none;
}

.mcpSettingsToken label {
  flex: 1 1 320px;
  min-width: 0;
}

.mcpSettingsToken label span {
  margin-bottom: 4px;
}

.mcpSettingsToken input {
  width: 100%;
}

.mcpSettingsToken a {
  align-self: center;
  font-size: 12px;
}

/* TES-150: connector failures are working information, not a transient toast.
   Keep the message on the affected row, at normal reading size and contrast. */
.mcpOperationError {
  grid-column: 1 / -1;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--red, #b42318) 42%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--red, #b42318) 8%, var(--canvas));
  color: var(--red, #9f241e);
  font-size: 13px;
  font-weight: 560;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.mcpOperationError[hidden] {
  display: none;
}

.mcpEditor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--canvas);
}

.mcpEditor[hidden] {
  display: none;
}

.mcpEditor .mcpWide,
.mcpEditor .checkboxLine,
.mcpEditor .settingsActions {
  grid-column: 1 / -1;
}

.settingsActions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 2px;
}

.settingsActions button {
  min-width: 86px;
  padding: 5px 10px;
}

.conversationPane {
  grid-column: 2;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  min-width: 0;
  min-height: 0;
  background: var(--canvas);
}

.conversationHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  gap: 16px;
  padding: 12px 20px 10px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--conversation-header-background);
}

.appShell.desktopShell .navigator,
.appShell.desktopShell .conversationPane,
.appShell.desktopShell .inspector {
  padding-top: var(--desktop-titlebar-safe-zone);
}

.appShell.desktopShell .conversationPane {
  background:
    linear-gradient(90deg, rgba(110, 98, 229, 0.05), transparent 42%) top / 100% var(--desktop-titlebar-safe-zone) no-repeat,
    var(--canvas);
}

.conversationTitleGroup {
  position: relative; /* anchors the branch-family popover (#202) */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 4px 9px;
  min-width: 0;
}

.conversationTitleGroup > p {
  grid-column: 2;
}

.presenceBar {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  margin-top: 2px;
}

.presenceBar[hidden] {
  display: none;
}

.presencePill {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  border-radius: 999px;
  background: rgba(110, 98, 229, 0.08);
  color: var(--accent-ink);
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.2;
}

.presenceTyping {
  background: rgba(43, 138, 95, 0.12);
  color: var(--green);
}

.titleRow {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.paneToggleButton {
  display: inline-grid;
  place-items: center;
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  line-height: 0;
  -webkit-app-region: no-drag;
}

.paneToggleButton:hover:not(:disabled) {
  border-color: var(--line);
  background: var(--canvas);
  color: var(--accent-ink);
}

.paneToggleIcon {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

/* The left pane-toggle in the conversation header doubles as "back to the
   context list" on a phone. On desktop it stays the pane icon; the back
   label is hidden. */
.paneBackLabel {
  display: none;
}

.pinIcon {
  color: var(--accent);
  font-size: 13px;
}

/* Branch clarity (#202): the header chip names which family member this
   window is; accent when it is the authoritative (primary) one. */
.branchChip {
  flex: none;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--canvas);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
}

.branchChip:hover {
  border-color: var(--accent-soft);
  color: var(--accent-ink);
}

.branchChip.primary {
  border-color: var(--accent-soft);
  background: var(--active);
  color: var(--accent-ink);
}

/* Warning-tinted: you are NOT looking at the authoritative window. */
.branchPrimaryJump {
  flex: none;
  min-width: 0;
  max-width: 260px;
  overflow: hidden;
  padding: 3px 10px;
  border: 1px solid rgba(188, 126, 0, 0.35);
  border-radius: 999px;
  background: rgba(188, 126, 0, 0.14);
  color: #8b5d00;
  font-size: 11.5px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.branchPrimaryJump:hover {
  background: rgba(188, 126, 0, 0.22);
}

.branchFamilyPopover {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  min-width: 300px;
  max-width: min(440px, 90vw);
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--canvas);
  box-shadow: var(--shadow-md);
}

.branchFamilyHeading {
  padding: 4px 8px 8px;
  color: var(--subtle);
  font-size: 11px;
  font-weight: 700;
}

.branchFamilyRow {
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--radius-sm);
}

.branchFamilyRow:hover {
  background: var(--accent-faint);
}

.branchFamilyRow.current {
  background: var(--active);
}

.branchFamilyRow.trashed .branchFamilyTitle,
.branchFamilyRow.trashed .branchFamilyKind {
  color: var(--subtle);
}

.branchFamilyOpen {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  min-height: 44px;
  gap: 9px;
  padding: 7px 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  text-align: left;
}

.branchFamilyOpen:hover:not(:disabled) {
  border-color: transparent;
  background: transparent;
}

.branchFamilyKind {
  flex: none;
  width: 18px;
  color: var(--muted);
  text-align: center;
}

.branchFamilyText {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 1px;
}

.branchFamilyTitle {
  overflow: hidden;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.branchFamilyPrimaryMark {
  color: var(--accent);
}

.branchFamilyMeta {
  color: var(--muted);
  font-size: 11px;
}

.branchFamilyMakePrimary {
  flex: none;
  margin-right: 8px;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--accent-ink);
  font-size: 10.5px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
}

.branchFamilyMakePrimary:hover:not(:disabled) {
  background: var(--accent-faint);
}

.branchFamilyMakePrimary:disabled {
  opacity: 0.6;
  cursor: default;
}

.conversationHeader h2 {
  margin: 0;
  font-family: Sora, Hind, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 720;
}

.conversationHeader p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.toolbarActions,
.buttonRow,
.inlineForm {
  display: flex;
  align-items: center;
  gap: 8px;
}

.toolbarActions {
  flex: 0 0 auto;
}

.toolbarActions button,
.buttonRow button {
  min-width: 58px;
  padding: 5px 10px;
}

.conversationTitleGroup .paneToggleButton,
.toolbarActions .paneToggleButton {
  min-width: 30px;
  padding: 0;
}

.threadMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  min-height: 34px;
  align-items: center;
  padding: 6px 20px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 12px;
}

.contextTokens,
.contextPacketStatus,
.contextCostStatus {
  border-radius: 999px;
  padding: 3px 8px;
  background: var(--active);
  color: var(--accent-ink);
  font-weight: 650;
  white-space: nowrap;
}

/* Saved-state chip (#202): events are durable on append; this says so. */
.savedChip {
  border-radius: 999px;
  padding: 3px 8px;
  background: rgba(43, 138, 95, 0.12);
  color: var(--green);
  font-weight: 650;
  white-space: nowrap;
  cursor: help;
}

.savedChip.saving {
  background: var(--active);
  color: var(--accent-ink);
}

.contextTokens.warning,
.contextPacketStatus.warning,
.contextCostStatus.warning {
  background: rgba(188, 126, 0, 0.14);
  color: #8b5d00;
}

.contextTokens.danger,
.contextPacketStatus.danger,
.contextCostStatus.danger {
  background: rgba(198, 42, 42, 0.13);
  color: #a42c2c;
}

.scheduleMetaBadge {
  border-radius: 999px;
  padding: 3px 8px;
  background: var(--line-soft);
  color: var(--muted);
  font-weight: 650;
  white-space: nowrap;
}

.scheduleMetaBadge.ok {
  background: rgba(43, 138, 95, 0.12);
  color: var(--green);
}

.scheduleMetaBadge.working {
  background: rgba(110, 98, 229, 0.12);
  color: var(--accent-ink);
}

.scheduleMetaBadge.warn {
  background: rgba(188, 126, 0, 0.14);
  color: #8b5d00;
}

.scheduleMetaBadge.danger {
  background: rgba(198, 42, 42, 0.13);
  color: #a42c2c;
}

.scheduleMetaBadge.done,
.scheduleMetaBadge.muted {
  background: var(--line-soft);
  color: var(--muted);
}

.timeline {
  min-height: 0;
  overflow-y: auto;
  /* Content fills the pane edge-to-edge bar a small margin (#166 v3). The
     horizontal clip is what hides the off-edge timestamp rail until a pull
     drags it into view — and it stops the rail minting a horizontal scrollbar. */
  overflow-x: hidden;
  padding: 30px 20px 36px;
}

.timelineNotice,
.timelineLoadingCard,
.timelineErrorCard {
  max-width: none;
  margin: 0 auto 18px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--window);
  color: #68717c;
  padding: 12px 14px;
}

/* The oldest-edge pager. Deliberately NOT sticky: pinned it floated over the
   transcript for the entire scroll (the "in the middle of everything" bug) —
   in-flow it appears exactly where it matters, at the oldest loaded event. */
.timelineNotice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 12.5px;
  padding: 8px 14px;
}

.timelineNotice span {
  min-width: 0;
}

.timelineNotice button,
.timelineErrorCard button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--canvas);
  color: var(--ink);
  font-weight: 650;
  padding: 6px 10px;
  white-space: nowrap;
}

.timelineNotice button:disabled {
  color: var(--muted);
  opacity: 0.65;
}

.timelineLoadingCard {
  display: grid;
  gap: 10px;
}

.timelineLoadingHeader {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 650;
  color: #53606d;
}

.timelineSpinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(110, 98, 229, 0.2);
  border-top-color: var(--accent);
  border-radius: 999px;
  animation: runSpin 0.8s linear infinite;
}

.timelineSkeletonLine {
  height: 10px;
  border-radius: 999px;
  background: #e9edf2;
}

.timelineSkeletonLine:nth-child(3) {
  width: 74%;
}

.timelineSkeletonLine:nth-child(4) {
  width: 54%;
}

.timelineErrorCard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fff5f5;
  border-color: #ffd3d3;
  color: #9f2d2d;
}

.event {
  position: relative;
  display: grid;
  gap: 8px;
  max-width: none;
  margin: 0 0 22px;
}

.timelineMarker {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: none;
  margin: 0 0 18px;
  color: #8b949e;
  font-size: 12px;
  font-weight: 650;
}

.timelineMarker::before,
.timelineMarker::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line-soft);
}

.timelineMarker span {
  max-width: min(520px, 72vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timelineMarker.runtime span {
  color: var(--accent-ink);
}

.timelineMarker.import span {
  color: #5f6780;
}

.timelineMarkerChip {
  flex: none;
  padding: 2px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--accent-faint);
  color: var(--accent-ink);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* "Process import" on the import marker (slice 4): shaped like the Processed
   chip so it stays part of the marker line, not a call-to-action. */
.timelineMarkerAction {
  flex: none;
  padding: 2px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--accent-ink);
  font: inherit;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
}

.timelineMarkerAction:hover:not(:disabled) {
  background: var(--accent-faint);
}

.timelineMarkerAction:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Branch-origin divider (#202): the slim card at the copy boundary — the
   events above it are a copy; this window's own work starts below. Pure
   chrome like the model-change marker: header, rail, and meta hidden. */
.event.branchOriginEvent {
  gap: 0;
  margin: -2px auto 16px;
}

.event.branchOriginEvent .eventTimestampRail,
.event.branchOriginEvent .eventHeader,
.event.branchOriginEvent .eventMeta {
  display: none;
}

.branchOriginCard {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 7px 12px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  background: var(--accent-faint);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.branchOriginBadge {
  flex: none;
  color: var(--accent-ink);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.branchOriginCard.rewind .branchOriginBadge {
  color: #8b5d00;
}

/* Pinned import-digest card: rendered directly under the "Imported from ..."
   marker with the site preview affordance up top and deliverable rows below. */
.event.importDigestEvent {
  border: 0;
  padding: 0;
  background: transparent;
}

.importDigestCard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--canvas);
  box-shadow: var(--shadow-sm);
}

.importDigestHeader {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.importDigestHeader strong {
  font-size: 13.5px;
  font-weight: 650;
}

.importDigestHeader span {
  font-size: 12px;
  color: var(--muted);
}

.importDigestOrganizer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font-size: 13px;
  line-height: 1.55;
}

.importDigestOrganizerLabel {
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.importDigestOrganizer .mdContent p {
  margin: 0;
}

.importDigestSite {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.importDigestSiteActions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.importDigestOpenPreview {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 12.5px;
  font-weight: 650;
  text-decoration: none;
}

.importDigestOpenPreview:hover {
  background: var(--accent-ink);
}

.importDigestSiteMeta {
  font-size: 11.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.importDigestSnapshot {
  margin: 0;
  width: min(420px, 100%);
  min-height: 96px;
  max-height: 260px;
}

.importDigestNote {
  padding: 8px 10px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.importDigestRows {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.importDigestRow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
}

.importDigestRow:first-child {
  border-top: 0;
}

.importDigestRowName {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 12px;
}

.importDigestBadge {
  flex: none;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 650;
  background: var(--line-soft);
  color: var(--muted);
}

.importDigestBadge.op-add {
  background: #e3f4ea;
  color: var(--green);
}

.importDigestBadge.op-update {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.importDigestRowSize {
  flex: none;
  font-size: 11px;
  color: var(--subtle);
}

.importDigestRowActions {
  flex: none;
  display: inline-flex;
  gap: 8px;
}

.importDigestFootnote {
  font-size: 11px;
  color: var(--subtle);
}

.eventHeader {
  display: flex;
  align-items: center;
  gap: 8px;
}

.eventHeader .eventTime {
  flex: 1;
}

.eventActions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.eventAction {
  min-height: 24px;
  padding: 2px 7px;
  border-color: transparent;
  background: transparent;
  color: var(--subtle);
  font-size: 12px;
  opacity: 0;
}

.eventIconAction {
  display: inline-grid;
  place-items: center;
  width: 26px;
  min-width: 26px;
  padding: 0;
}

.eventIconAction svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.eventIconAction .rewindIcon {
  display: block;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("/assets/rewind-arrow.png") center / contain no-repeat;
  mask: url("/assets/rewind-arrow.png") center / contain no-repeat;
}

.eventIconAction .copyIcon {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
}

.eventIconAction .copyIcon::before,
.eventIconAction .copyIcon::after {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  border: 2px solid currentColor;
  border-radius: 5px;
  background: var(--canvas);
}

.eventIconAction .copyIcon::before {
  top: 1px;
  right: 1px;
  opacity: 0.66;
}

.eventIconAction .copyIcon::after {
  left: 1px;
  bottom: 1px;
}

#appShell .eventRewindAction::before {
  content: none !important;
  display: none !important;
}

.event:hover .eventAction,
.event:focus-within .eventAction,
.eventAction:focus {
  opacity: 1;
}

.eventAction:hover:not(:disabled) {
  border-color: var(--line);
  background: var(--canvas);
  color: var(--accent-ink);
}

.eventCopyAction.copied {
  color: #2f7d59;
  opacity: 1;
}

.eventRole {
  color: var(--ink);
  font-size: 13px;
  font-weight: 720;
}

.eventTime,
.eventMeta {
  color: var(--subtle);
  font-size: 12px;
}

/* Exact timestamps live OFF the right edge of the pane (#166): content fills
   the pane, the rail sits past the edge, and the timeline's overflow-x clip
   hides it. Pulling left (rubber band, JS drives --timeline-pull /
   --timeline-pull-ratio) drags the times INTO view; letting go snaps back
   with an ease-out — no bounce. The pull is the ONLY way times appear. */
.eventTimestampRail {
  position: absolute;
  top: 0;
  left: calc(100% + 14px);
  width: 132px;
  color: #a4abb3;
  font-size: 11px;
  line-height: 1.35;
  text-align: left;
  opacity: var(--timeline-pull-ratio, 0);
  pointer-events: none;
}

.timeline .event {
  transform: translateX(calc(-1 * var(--timeline-pull, 0px)));
}

/* The snap-back: only animated on release (JS stamps .timelineSnapBack while
   zeroing the pull), so the drag itself follows the finger with no lag. */
.timeline.timelineSnapBack .event {
  transition: transform 280ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

.timeline.timelineSnapBack .eventTimestampRail {
  transition: opacity 280ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

/* Reduced motion: the drag still tracks the user's own gesture (1:1 direct
   manipulation), but the release returns instantly instead of animating. */
@media (prefers-reduced-motion: reduce) {
  .timeline.timelineSnapBack .event,
  .timeline.timelineSnapBack .eventTimestampRail {
    transition: none;
  }
}

.eventText {
  color: #303236;
  font-size: 14px;
  line-height: 1.62;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* TES-68: translation is visibly a DISPLAY layer beneath the canonical
   message. The toggle never replaces the Copy/Branch actions in the header,
   which continue to operate on the original event. */
.translationControls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
  color: var(--muted);
  font-size: 11px;
}

.translationControls button {
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
}

.translationControls button[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-faint);
  color: var(--accent);
  font-weight: 700;
}

.translationLabel {
  margin-right: 2px;
}

.translationPending,
.translationFailed {
  padding-left: 8px;
  border-left: 2px solid var(--line);
}

.translationFailed {
  color: var(--danger, #a23b3b);
}

.translationPolicyPrompt {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px solid var(--accent-soft, var(--line));
  border-radius: 9px;
  background: var(--accent-faint);
  color: var(--text);
  font-size: 11px;
}

.translationPolicyPrompt button {
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
}

.translationPolicyPromptStatus {
  flex-basis: 100%;
  color: var(--muted);
}

/* The rail hides by the overflow clip on every width now — the pull reveals
   it on narrow screens too (predates #166 v3, which made hiding clip-based). */

.event.toolEvent,
.event.systemEvent,
.event.artifactEvent {
  margin-bottom: 10px;
  padding: 9px 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: #fbfbfc;
}

.event.tempArtifactEvent {
  padding: 4px 8px;
  border-color: var(--accent-soft);
  background: var(--accent-faint);
}

.event.toolSummaryEvent {
  gap: 0;
  margin: -2px auto 16px;
}

.event.toolSummaryEvent .eventTimestampRail,
.event.toolSummaryEvent .eventHeader,
.event.toolSummaryEvent .eventMeta {
  display: none;
}

.event.toolSummaryEvent .eventText {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  white-space: normal;
}

.toolSummaryCompact {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}

.toolSummaryBadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 20px;
  padding: 2px 8px;
  border: 1px solid #dfe4ee;
  border-radius: 999px;
  background: #f7f8fb;
  color: #687182;
  font-size: 12px;
  font-weight: 600;
}

.toolSummaryPulse {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(103, 70, 210, 0.32);
  animation: toolSummaryPulse 1.25s ease-out infinite;
}

@keyframes toolSummaryPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(103, 70, 210, 0.32);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(103, 70, 210, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(103, 70, 210, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .toolSummaryPulse {
    animation: none;
  }
}

.toolSummaryNames {
  overflow: hidden;
  color: #9098a5;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toolSummaryCards {
  display: grid;
  gap: 7px;
}

.toolSummaryDisclosure > summary {
  cursor: pointer;
  list-style: none;
}

.toolSummaryDisclosure > summary::-webkit-details-marker {
  display: none;
}

.toolSummaryExpandHint {
  margin-left: auto;
  color: var(--accent);
  font-size: 11px;
  font-weight: 650;
}

.toolSummaryDisclosure[open] .toolSummaryExpandHint::before {
  content: "Hide ";
}

.toolSummaryDisclosure[open] > .toolSummaryCards {
  margin-top: 7px;
}

.toolSummaryCard {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--canvas);
}

/* A recovered tool error is a note, not an emergency — amber, not red — so a
   mid-run, self-healed failure doesn't read as "the run is broken" (#176). */
.toolSummaryCard.failed {
  border-color: #f4d9a6;
  background: #fffaf0;
}

.toolSummaryCard.pending {
  border-color: #dcd6ff;
  background: var(--accent-faint);
}

.toolSummaryLive .toolSummaryCard {
  box-shadow: 0 8px 20px rgba(29, 33, 41, 0.05);
}

.toolSummaryLive .toolSummaryCard.pending .toolSummaryCardBody strong::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-left: 5px;
  border-radius: 999px;
  background: var(--accent);
  vertical-align: middle;
}

.toolSummaryIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: #eff2f7;
  color: #637083;
  font-size: 11px;
  font-weight: 800;
}

.toolSummaryIcon img {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

.toolSummaryIcon.web {
  background: #eef7ff;
  color: #23679a;
}

.toolSummaryIcon.file {
  background: #f0f7ef;
  color: #2f7540;
}

.toolSummaryIcon.message {
  background: #fff5e8;
  color: #946118;
}

.toolSummaryCardBody {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.toolSummaryCardBody strong,
.toolSummaryCardBody span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toolSummaryCardBody strong {
  color: #30343a;
  font-size: 12px;
  font-weight: 750;
}

.toolSummaryCardBody span {
  color: #76808d;
  font-size: 11px;
}

.toolSummaryCardBody .toolSummaryDomain {
  color: var(--subtle);
}

/* TES-277: an inferred or unattached pairing reads differently from a known
   one, on the collapsed card as well as inside Details. */
.toolSummaryCardBody .toolSummaryInferred {
  color: var(--warn, #a4691c);
  font-style: italic;
}

.toolSummaryCount {
  color: var(--subtle);
  font-size: 11px;
  font-weight: 750;
}

.toolSummaryDetails {
  grid-column: 2 / -1;
  color: #7b8490;
  font-size: 11px;
}

.toolSummaryDetails summary {
  cursor: pointer;
  font-weight: 700;
}

.toolSummaryDetails pre {
  max-height: 180px;
  margin: 6px 0 0;
  overflow: auto;
  white-space: pre-wrap;
}

.toolSummaryDetails > .jsonTree {
  max-height: 320px;
  margin-top: 6px;
  overflow: auto;
}

.jsonTree {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
  text-align: left;
  overflow-wrap: anywhere;
}

.jsonTree details.jsonNode > summary {
  display: block;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.jsonTree details.jsonNode > summary::-webkit-details-marker {
  display: none;
}

.jsonTree details.jsonNode > summary::before {
  content: "\25B8";
  display: inline-block;
  width: 12px;
  color: var(--subtle);
  font-size: 9px;
}

.jsonTree details.jsonNode[open] > summary::before {
  content: "\25BE";
}

.jsonTree .jsonChildren {
  margin-left: 5px;
  padding-left: 11px;
  border-left: 1px solid var(--line-soft);
}

.jsonTree .jsonLeaf {
  padding-left: 12px;
}

.jsonTree .jsonKey {
  color: var(--accent-ink);
  font-weight: 600;
}

.jsonTree .jsonString {
  color: var(--green);
  white-space: pre-wrap;
}

.jsonTree .jsonNumber {
  color: var(--accent-blue);
}

.jsonTree .jsonBool,
.jsonTree .jsonNull {
  color: var(--orange);
}

.jsonTree .jsonPreview {
  color: var(--subtle);
  font-style: italic;
  font-weight: 400;
}

.jsonTree .jsonTextPayload {
  white-space: pre-wrap;
}

.jsonTree .jsonTruncated {
  color: var(--subtle);
  font-style: italic;
}

.toolPayloadLabel {
  margin: 8px 0 2px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--subtle);
}

.toolPayloadLabel:first-child {
  margin-top: 2px;
}

/* TES-277: says what a row actually knows when it is not a known pairing. */
.toolPayloadNote {
  margin: 0 0 4px;
  font-size: 11px;
  font-style: italic;
  color: var(--warn, #a4691c);
}

/* The payloads past the visible cap of three. Folded away by default so the
   card stays a summary, and one click from being read in full. */
.toolPayloadOverflow {
  margin: 6px 0 2px;
  border-top: 1px solid var(--line, rgba(127, 127, 127, 0.25));
  padding-top: 4px;
}

.toolPayloadOverflow > summary {
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: var(--subtle);
  list-style: revert;
}

.toolPayloadOverflow > summary:hover {
  color: var(--fg, inherit);
}

.toolEventHead {
  display: flex;
  gap: 6px;
  align-items: baseline;
  margin-bottom: 4px;
}

.toolEventKind {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--subtle);
}

.toolSummaryOverflow {
  color: #929aa5;
  font-size: 12px;
  font-weight: 600;
}

.event.toolEvent .eventText,
.event.systemEvent .eventText,
.event.artifactEvent .eventText {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.artifactName {
  display: block;
  color: #2d3035;
  font-weight: 700;
}

.artifactLink {
  display: inline-flex;
  align-items: center;
  color: var(--accent);
  font-weight: 650;
  text-decoration: none;
}

.artifactLink:hover {
  text-decoration: underline;
}

/* #205: a path or localhost URL inside an imported message that has a real
   artifact behind it. Deliberately quiet — the transcript text is unchanged,
   the link is the only signal that it now goes somewhere. */
.importedPathLink {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  cursor: pointer;
}

.importedPathLink:hover {
  text-decoration-style: solid;
}

.artifactMeta {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}

.artifactResourceStatus {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}

.artifactStatusPill {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 7px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--canvas);
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1;
}

.artifactStatusPill.ready {
  border-color: #c6dfd2;
  background: #f4fbf6;
  color: #2f6b48;
}

.artifactStatusPill.checkable {
  border-color: #d7dce4;
  background: var(--window);
  color: #4f5966;
}

.artifactStatusPill.unsupported {
  border-color: #e3d4d4;
  background: #fbf6f6;
  color: #7b4b4b;
}

.tempArtifactDisclosure {
  display: grid;
  gap: 7px;
}

.tempArtifactDisclosure summary {
  display: grid;
  grid-template-columns: auto minmax(0, max-content) minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  color: #646078;
  cursor: pointer;
  list-style: none;
  white-space: normal;
}

.tempArtifactDisclosure summary::-webkit-details-marker {
  display: none;
}

.tempArtifactDisclosure[open] summary .artifactDisclosure {
  transform: rotate(90deg);
}

.tempArtifactDisclosure summary strong {
  overflow: hidden;
  color: #7c748d;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tempArtifactBody {
  padding: 6px 0 2px 18px;
}

.artifactImagePreview {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0 2px;
  width: min(520px, 100%);
  min-height: 132px;
  max-height: 380px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--window);
}

.artifactDocumentThumbnail {
  width: min(260px, 100%);
  min-height: 180px;
  max-height: 340px;
  background: var(--line-soft);
}

.artifactDocumentThumbnail .artifactImage {
  width: auto;
  max-width: 100%;
  max-height: 320px;
  box-shadow: 0 8px 18px rgba(29, 33, 41, 0.14);
}

.artifactImage {
  display: block;
  width: 100%;
  height: auto;
  max-height: 380px;
  object-fit: contain;
}

.artifactImagePlaceholder {
  padding: 18px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.artifactImageError {
  color: #9b3a3a;
}

.artifactActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 7px;
  align-items: center;
}

.artifactActionButton {
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--canvas);
  color: #47505a;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}

.artifactActionButton:hover:not(:disabled) {
  border-color: #bac3cd;
  background: var(--window);
}

.artifactRemoveButton {
  color: #a23a3a;
}

.artifactRemoveButton:hover:not(:disabled) {
  border-color: #e0b5b5;
  background: #fff6f6;
}

.artifactActionButton:disabled {
  color: #a2a9b1;
  cursor: default;
}

.artifactPreview {
  margin: 8px 0 0;
  padding: 8px;
  max-height: 180px;
  overflow: auto;
  border-radius: 6px;
  background: var(--window);
  color: #3b4046;
  white-space: pre-wrap;
}

.event.toolEvent .eventMeta,
.event.systemEvent .eventMeta,
.event.artifactEvent .eventMeta,
.event.message .eventMeta {
  display: none;
}

.event.liveEvent .eventTime {
  color: var(--muted);
}

.event.runStatusEvent {
  width: fit-content;
  margin: 4px 0 10px;
  padding: 0;
  border: 0;
  background: transparent;
}

.event.runStatusEvent .eventHeader,
.event.runStatusEvent .eventMeta {
  display: none;
}

.event.runStatusEvent .eventText {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  padding: 4px 9px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--window);
  color: #68717b;
  font-size: 12px;
  line-height: 1.2;
}

.event.runStatusEvent.statusBusy .eventText::before {
  content: "";
  width: 10px;
  height: 10px;
  border: 2px solid rgba(110, 98, 229, 0.2);
  border-top-color: var(--accent);
  border-radius: 999px;
  animation: runSpin 0.8s linear infinite;
}

.event.runPreviewEvent .eventText {
  max-height: 420px;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
}

.event.user .eventRole {
  color: var(--accent-ink);
}

.event.assistant .eventRole {
  color: #2f5c4e;
}

.event.draftEvent .eventRole {
  color: var(--muted);
}

.event.draftEvent .eventText {
  color: #555b63;
}

:root[data-theme="dark"] .event.draftEvent .eventText {
  color: #9aa1b5;
}

.emptyThread {
  max-width: 640px;
  margin: 25vh auto 0;
  color: var(--muted);
  text-align: center;
}

.queuedMessages {
  display: grid;
  gap: 6px;
  max-width: none;
  width: calc(100% - 40px);
  margin: 0 auto 8px;
}

.queuedMessages[hidden] {
  display: none;
}

.queueItem {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--canvas);
  padding: 8px 10px;
}

.queueItem.dragging {
  opacity: 0.48;
}

.queueItem.dropBefore::before,
.queueItem.dropAfter::after {
  content: "";
  position: absolute;
  right: 10px;
  left: 10px;
  height: 2px;
  border-radius: 999px;
  background: #2f6feb;
}

.queueItem.dropBefore::before {
  top: -4px;
}

.queueItem.dropAfter::after {
  bottom: -4px;
}

.queueDragHandle {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: #8a939f;
  cursor: grab;
}

.queueDragHandle[draggable="false"] {
  cursor: default;
  opacity: 0.45;
}

.queueDragHandle:active {
  cursor: grabbing;
}

.queueText {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  color: #39404a;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queueAuthor {
  flex: 0 0 auto;
  max-width: 140px;
  overflow: hidden;
  color: #607083;
  font-weight: 700;
  text-overflow: ellipsis;
}

.queueAuthor::after {
  content: ":";
}

.queuePrompt {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.queueActions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.queueSteerButton,
.queueIconButton {
  min-width: 58px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--canvas);
  color: #2d3748;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}

.queueIconButton {
  display: inline-grid;
  place-items: center;
  min-width: 0;
  width: 30px;
  padding: 0;
  color: #737d8a;
}

.queueDragHandle:hover,
.queueSteerButton:hover:not(:disabled),
.queueIconButton:hover:not(:disabled) {
  border-color: #b9c5d6;
  background: #f8fafc;
}

.queueDragHandle:hover {
  border-color: transparent;
}

.queueSteerButton:disabled,
.queueIconButton:disabled {
  cursor: default;
  opacity: 0.5;
}

.queueDragHandle svg,
.queueIconButton svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* TES-250: system continuations must not look like the person's own queued
   prompt — dashed border, muted tint, an explicit label, and a single Cancel
   control instead of Steer/edit/delete. */
.queueItem.queueSystemItem {
  border-style: dashed;
  border-color: #b9c5d6;
  background: #f4f7fb;
}

.queueSystemItem .queuePrompt {
  color: #607083;
  font-style: italic;
}

.queueSystemLabel {
  flex: 0 0 auto;
  padding: 1px 7px;
  border: 1px solid #b9c5d6;
  border-radius: 999px;
  background: #e9eff7;
  color: #4a5a6e;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.queueCancelButton {
  min-width: 58px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--canvas);
  color: #8a4b3d;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}

.queueCancelButton:hover:not(:disabled) {
  border-color: #d0a49a;
  background: #fdf6f4;
}

.queueCancelButton:disabled {
  cursor: default;
  opacity: 0.5;
}

.queueDragHandle svg {
  width: 18px;
  height: 18px;
}

.composer {
  max-width: none;
  /* auto width: the side margins define the fit exactly — a width calc here
     double-counts the margins set later (#5075) and overflows the pane by
     the difference (the iPhone "bobs side to side" bug, #186). */
  width: auto;
  margin: 0 auto 18px;
  border: 1px solid rgba(110, 98, 229, 0.22);
  border-radius: 15px;
  background: var(--canvas);
  box-shadow: 0 12px 30px rgba(14, 22, 51, 0.12);
  overflow: hidden;
}

.composer.artifactDragOver,
.timeline.artifactDragOver {
  outline: 2px solid var(--accent);
  outline-offset: -4px;
  background: color-mix(in srgb, var(--accent) 5%, var(--canvas));
}

.composer textarea {
  min-height: 78px;
  border: 0;
  border-radius: 0;
  padding: 14px 14px 8px;
}

.composer textarea:focus {
  outline: 0;
}

.composerBar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 10px 10px;
}

.composerControls {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.composer .buttonRow {
  flex: 0 0 auto;
  align-self: flex-end;
  margin-left: 4px;
  padding-left: 12px;
  border-left: 1px solid var(--line-soft);
}

.compactSelect {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.compactSelect select {
  width: auto;
  max-width: 180px;
  min-height: 28px;
  padding: 4px 7px;
}

.modelSelectWrap select {
  max-width: 230px;
}

.accessSelectWrap select {
  max-width: 140px;
}

.intelligenceSelectWrap select {
  max-width: 135px;
}

.temperatureControl input {
  min-height: 28px;
  width: 68px;
  padding: 4px 7px;
}

.toolToggle {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--status-warn-ink);
  font-size: 12px;
}

.toolToggle input {
  width: auto;
}

.primaryButton {
  min-width: 40px;
  border-color: var(--primary-action);
  background: var(--primary-action);
  color: #ffffff;
  box-shadow: var(--shadow-sm);
}

.primaryButton:hover:not(:disabled) {
  border-color: var(--primary-action-hover);
  background: var(--primary-action-hover);
  color: #ffffff;
}

.dangerButton {
  min-width: 54px;
  border-color: #e0aaa7;
  background: #fff8f7;
  color: #a92336;
}

.dangerButton:hover:not(:disabled) {
  border-color: var(--red);
  background: #fff0ee;
  color: #8f1d2c;
}

.inspector {
  grid-column: 3;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  border-left: 1px solid var(--line);
  background: var(--inspector);
  padding: 64px 14px 18px;
}

.appShell.paneTransitionsReady .inspector {
  transition:
    border-color 400ms ease-in-out,
    opacity 400ms ease-in-out,
    padding 400ms ease-in-out,
    transform 400ms ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .appShell.paneTransitionsReady,
  .appShell.paneTransitionsReady .navigator,
  .appShell.paneTransitionsReady .inspector {
    transition: none;
  }
}

.inspectorCard {
  display: grid;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
}

.inspectorCard:first-child {
  padding-top: 0;
}

.inspectorHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.inspectorHeader h3 {
  margin: 0;
  color: var(--accent-ink);
  font-family: Sora, Hind, ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 650;
}

.inspectorCount {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.artifactBrowser {
  display: grid;
  gap: 9px;
}

.artifactBrowserEmpty {
  color: var(--muted);
  font-size: 12px;
}

.artifactBrowserItem {
  display: grid;
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--canvas);
}

.artifactBrowserItem.wip {
  border-color: var(--accent-soft);
  background: var(--accent-faint);
}

.artifactBrowserItem.large {
  gap: 8px;
  padding: 9px;
}

.artifactBrowserItem.compact {
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 7px;
}

.artifactBrowserThumb {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--window);
}

.artifactBrowserThumb.large {
  width: 100%;
  min-height: 126px;
  max-height: 220px;
}

.artifactBrowserThumb.compact {
  width: 54px;
  height: 54px;
}

.artifactBrowserThumb.document {
  background: var(--line-soft);
}

.artifactBrowserThumb .artifactImage {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
}

.artifactBrowserThumb.large.document .artifactImage {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 210px;
  box-shadow: 0 7px 16px rgba(29, 33, 41, 0.14);
}

.artifactBrowserThumbPlaceholder {
  padding: 8px;
  color: #7a8390;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0;
}

.artifactBrowserBody {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.artifactBrowserBody strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.artifactBrowserMeta {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.artifactVersionBadge {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--window);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  vertical-align: 1px;
}

/* The badge as version-picker toggle (#201 Slice 2). */
button.artifactVersionBadge {
  cursor: pointer;
  font-family: inherit;
}

button.artifactVersionBadge:hover {
  border-color: var(--accent-soft);
  color: var(--ink);
}

.artifactPinChip {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  margin-left: 6px;
  padding: 0 6px;
  border: 1px solid var(--accent-soft);
  border-radius: 8px;
  background: var(--accent-faint);
  color: var(--accent-ink);
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  vertical-align: 1px;
}

/* A stale pin (newer versions exist behind it) goes amber. */
.artifactPinChip.stale {
  border-color: rgba(180, 130, 20, 0.45);
  background: rgba(240, 195, 80, 0.16);
  color: #8b5d00;
}

:root[data-theme="dark"] .artifactPinChip.stale {
  color: #e8b64c;
}

.artifactVersionList {
  display: grid;
  gap: 4px;
  margin-top: 4px;
  padding: 6px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--window);
}

.artifactVersionRow {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
}

.artifactVersionRow.pinned {
  color: var(--ink);
}

.artifactVersionRowLabel {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  min-width: 0;
}

.artifactVersionRowLabel strong {
  color: var(--ink);
  font-size: 11px;
}

.artifactVersionInherited {
  overflow: hidden;
  max-width: 150px;
  color: var(--subtle);
  font-style: italic;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.artifactVersionPinnedMark {
  color: var(--accent-ink);
}

.artifactVersionRowActions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  font-size: 11px;
}

/* Compact "Updated report.md → v2" one-liner for revision events. */
.artifactRevisionRow {
  color: var(--muted);
  font-size: 12.5px;
}

.artifactRevisionRow strong {
  color: var(--ink);
  font-weight: 650;
}

.artifactBrowserActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 2px;
  font-size: 12px;
}

.artifactDeletedNote {
  color: var(--muted, #8a8a9a);
  font-style: italic;
  font-size: 13px;
}

.artifactWipGroup {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.artifactWipToggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid #e0d9f2;
  border-radius: 8px;
  background: var(--accent-faint);
  color: #5d5274;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
  text-align: left;
}

.artifactWipToggle:hover {
  border-color: #d0c5ef;
  background: #f7f3ff;
}

.artifactDisclosure {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  color: #7a6a9d;
  font-size: 11px;
  transition: transform 120ms ease;
}

.artifactWipCount {
  color: #8b83a0;
  font-size: 11px;
  font-weight: 750;
}

.artifactWipList {
  display: grid;
  gap: 8px;
}

.artifactViewerOverlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(14, 18, 32, 0.46);
  backdrop-filter: blur(10px);
}

.artifactViewerSheet {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1120px, 100%);
  height: min(820px, calc(100dvh - 56px));
  overflow: hidden;
  border: 1px solid rgba(216, 221, 232, 0.92);
  border-radius: 10px;
  background: var(--canvas);
  box-shadow: 0 26px 72px rgba(18, 24, 40, 0.32);
}

.artifactViewerHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  border-bottom: 1px solid var(--line-soft);
  padding: 10px 12px;
  background: #f8f9fc;
}

.artifactViewerHeader strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.artifactViewerActions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.artifactViewerClose {
  flex: 0 0 auto;
}

/* TES-107. The frame's explanation sits above the frame itself, because a
   sandboxed cross-origin frame cannot be inspected to find out whether it
   painted. The wrapper owns the height so the note never overflows the sheet. */
.artifactViewerFrameWrap {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0;
  height: 100%;
}

.artifactViewerFrameNote {
  margin: 0;
  padding: 10px 16px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
  border-bottom: 1px solid var(--border, rgba(127, 127, 127, 0.25));
}

.artifactViewerFrame {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  /* A sandboxed document paints on top of this; keep it white so an HTML
     artifact authored for a white page stays readable in dark mode. */
  background: #ffffff;
}

/* TES-107. The in-app PDF renderer. The nav chrome is the APP's, not the
   frame's: the frame runs in an opaque origin and shares no stylesheet or theme
   token with us, so anything rendered there would have to duplicate the design
   system. Keeping the controls out here means they theme themselves. */
.artifactViewerPdfWrap {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  height: 100%;
}

.artifactViewerPdfBar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line-soft);
  background: #f8f9fc;
}

.artifactViewerPdfStatus {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

.artifactViewerPdfBar button {
  flex: 0 0 auto;
}

.artifactViewerPdfFrame {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  /* Matches the renderer document's own surround so there is no flash of a
     different colour while the first page rasterises. */
  background: var(--paper);
}

:root[data-theme="dark"] .artifactViewerPdfBar {
  background: var(--window);
}

.artifactViewerImageWrap {
  display: grid;
  place-items: center;
  min-height: 0;
  overflow: auto;
  padding: 16px;
  background: var(--paper);
}

.artifactViewerImage {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.artifactViewerText {
  margin: 0;
  min-height: 0;
  overflow: auto;
  padding: 16px 18px;
  background: var(--canvas);
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.artifactViewerNotice {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  padding: 24px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.inlineForm input {
  min-width: 0;
}

.inlineForm button {
  flex: 0 0 auto;
  padding: 5px 9px;
}

/* Search box: the input owns its own row so the two buttons don't crush it to
   a sliver in the narrow inspector column (#175). */
.inspector .inlineForm {
  flex-wrap: wrap;
}

.inspector .inlineForm input {
  flex: 1 1 100%;
}

.inspector .inlineForm button {
  flex: 1 1 auto;
}

.searchFilters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.results,
.sessions {
  display: grid;
  gap: 7px;
}

.resultItem,
.sessionItem {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border-radius: 9px;
  border-bottom: 1px solid var(--line-soft);
}

.resultItem[role="button"] {
  cursor: pointer;
  transition: background 0.12s ease;
}

.resultItem[role="button"]:hover {
  background: rgba(110, 98, 229, 0.07);
}

.resultItem[role="button"]:focus-visible {
  outline: 2px solid var(--accent, #6e62e5);
  outline-offset: 1px;
}

/* Result card: prominent title, dim meta, clamped highlighted preview (#175). */
.resultTitle {
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: -0.1px;
}

.resultMeta {
  display: block;
  color: var(--muted);
  font-size: 11.5px;
}

.resultPreview {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.resultPreview mark {
  background: rgba(110, 98, 229, 0.22);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}

.resultItem strong,
.sessionItem strong {
  color: var(--ink);
  font-size: 12px;
}

.resultItem span,
.sessionItem span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  max-width: min(520px, calc(100vw - 32px));
  border-radius: 9px;
  background: #262a30;
  color: #ffffff;
  box-shadow: var(--shadow);
  opacity: 0;
  padding: 10px 12px;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 150ms ease, transform 150ms ease;
}

.toast.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1180px) {
  .appShell {
    grid-template-columns: 280px minmax(0, 1fr);
  }

  .appShell.leftPaneCollapsed {
    grid-template-columns: 0 minmax(0, 1fr);
  }

  .appShell.rightPaneCollapsed {
    grid-template-columns: 280px minmax(0, 1fr);
  }

  .appShell.leftPaneCollapsed.rightPaneCollapsed {
    grid-template-columns: 0 minmax(0, 1fr);
  }

  .columnResizer {
    display: none;
  }

  .inspector {
    display: none;
  }

  #toggleRightPane {
    display: none;
  }
}

@media (min-width: 781px) and (max-width: 1180px) {
  .appShell:not(.rightPaneCollapsed) .inspector {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0 0 0 auto;
    width: min(92vw, 420px);
    z-index: 80;
    background: var(--inspector);
    box-shadow: var(--shadow);
    overflow-y: auto;
  }

  #toggleRightPane {
    display: inline-flex;
  }
}

@media (max-width: 780px) {
  /* The inspector becomes a fixed mobile sheet at z-index 80 below. Settings
     must remain the top-level surface when it is open, including when the
     inspector was already expanded before Settings launched. */
  .settingsOverlay {
    z-index: 100;
  }

  #confirmPanel.settingsOverlay {
    z-index: 110;
  }

  #contextMovePanel.settingsOverlay {
    z-index: 111;
  }

  .contextMoveSheet {
    max-height: calc(100dvh - 20px);
  }

  .contextMoveSectionHeader,
  .contextMoveWindowHeader,
  .contextMoveFooter {
    align-items: stretch;
    flex-direction: column;
  }

  .contextMoveWindowControls {
    align-items: stretch;
    flex-direction: column;
  }

  .contextMoveFooter .settingsActions {
    width: 100%;
  }

  .contextMoveFooter .settingsActions button {
    flex: 1 1 0;
  }

  .contextMoveSheet button {
    min-height: 44px;
  }

  .contextMoveSheet .iconButton {
    width: 44px;
    min-width: 44px;
  }

  .appShell,
  .appShell.leftPaneCollapsed,
  .appShell.rightPaneCollapsed,
  .appShell.leftPaneCollapsed.rightPaneCollapsed {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(152px, 34dvh) minmax(0, 1fr);
    height: 100vh;
    height: 100dvh;
  }

  .appShell.leftPaneCollapsed,
  .appShell.leftPaneCollapsed.rightPaneCollapsed {
    grid-template-rows: minmax(0, 1fr);
  }

  .navigator {
    grid-column: 1;
    grid-row: 1;
    border-right: 0;
    border-bottom: 1px solid rgba(1, 10, 39, 0.95);
  }

  .conversationPane {
    grid-column: 1;
    grid-row: 2;
  }

  .appShell.leftPaneCollapsed .navigator {
    display: none;
  }

  .appShell.leftPaneCollapsed .conversationPane,
  .appShell.leftPaneCollapsed.rightPaneCollapsed .conversationPane {
    grid-row: 1;
  }

  #toggleRightPane {
    display: none;
  }

  .conversationHeader {
    align-items: flex-start;
    flex-direction: column;
    min-height: 0;
    gap: 10px;
    padding: 10px 12px;
  }

  .conversationTitleGroup,
  .toolbarActions {
    width: 100%;
  }

  .conversationHeader h2 {
    font-size: 15px;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .toolbarActions {
    flex-wrap: wrap;
    gap: 6px;
  }

  .toolbarActions button:not(.paneToggleButton) {
    flex: 1 1 136px;
    min-width: 0;
  }

  .threadMeta {
    flex-wrap: wrap;
    min-height: 0;
    gap: 6px 8px;
    padding: 8px 12px;
  }

  .timeline {
    padding: 16px 12px 22px;
  }

  .timelineNotice,
  .timelineErrorCard {
    align-items: stretch;
    flex-direction: column;
  }

  .timelineNotice button,
  .timelineErrorCard button {
    width: 100%;
  }

  .event {
    margin-bottom: 16px;
  }

  .eventHeader {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .eventActions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .eventAction {
    opacity: 1;
  }

  .event.runPreviewEvent .eventText,
  .artifactPreview {
    max-height: 300px;
  }

  .artifactImagePreview,
  .artifactImage {
    max-height: 260px;
  }

  .emptyThread {
    margin-top: 16vh;
    padding: 0 12px;
  }

  .queuedMessages {
    width: calc(100% - 24px);
  }

  .queueItem {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .queueActions {
    grid-column: 1 / -1;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .composer {
    margin-bottom: 12px;
  }

  .composerBar,
  .composerControls {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .composer textarea {
    min-height: 92px;
    padding: 12px;
  }

  .compactSelect,
  .buttonRow {
    width: 100%;
  }

  .compactSelect {
    align-items: stretch;
    flex-direction: column;
  }

  .composer .buttonRow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: 8px;
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }

  .compactSelect select,
  .temperatureControl input,
  .modelSelectWrap select,
  .buttonRow button {
    width: 100%;
    max-width: none;
  }

  .settingsOverlay,
  .authOverlay {
    align-items: start;
    justify-items: stretch;
    overflow: auto;
    padding: 10px;
  }

  .settingsSheet,
  .authSheet {
    width: 100%;
    max-height: calc(100dvh - 20px);
    border-radius: 10px;
  }

  .authSheet {
    padding: 16px;
  }

  .settingsHeader {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 12px;
    background: var(--canvas);
  }

  .settingsForm {
    padding: 12px;
  }

  .settingsGroupHeader,
  .spaceItem {
    align-items: stretch;
    flex-direction: column;
  }

  .inlineForm {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .inlineForm input {
    flex: 1 1 180px;
  }

  .inlineForm button {
    flex: 1 1 120px;
  }

  .auditFilters {
    grid-template-columns: minmax(0, 1fr);
  }

  .secretField,
  .adminGrid,
  .inviteCreateForm,
  .inviteLinkRow,
  .membershipEditor,
  .credentialEditor,
  .credentialGrantGrid,
  .scopeGrantForm,
  .mcpEditor {
    grid-template-columns: minmax(0, 1fr);
  }

  .credentialEditor .credentialWide,
  .credentialGrantGrid .checkboxLine,
  .credentialGrantGrid .settingsActions,
  .scopeGrantForm .settingsActions,
  .mcpEditor .mcpWide,
  .mcpEditor .checkboxLine,
  .mcpEditor .settingsActions,
  .membershipEditor label:nth-child(3),
  .membershipEditor .settingsActions {
    grid-column: auto;
  }

  .credentialItem,
  .credentialGrantItem,
  .mcpServerItem,
  .adminListItem {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .credentialItem button,
  .credentialGrantItem button,
  .mcpServerItem button,
  .adminListItem button,
  .inviteLinkRow button {
    justify-self: stretch;
  }

  .settingsActions {
    flex-wrap: wrap;
    justify-content: stretch;
  }

  .settingsActions button {
    flex: 1 1 120px;
    min-width: 0;
  }
}

@media (max-width: 520px) {
  .appShell,
  .appShell.rightPaneCollapsed {
    grid-template-rows: minmax(138px, 30dvh) minmax(0, 1fr);
  }

  .navigatorChrome {
    min-height: 42px;
    padding: 8px 10px 6px;
  }

  .windowControlSpacer {
    display: none;
  }

  .navBrand {
    padding: 2px 12px 10px;
  }

  .quickNav {
    padding: 0 8px 8px;
  }

  .treePanel {
    padding: 2px 6px 10px;
  }

  .timeline {
    padding: 14px 10px 18px;
  }

  .queuedMessages {
    width: calc(100% - 16px);
  }

  .composer {
    border-radius: 12px;
    margin-bottom: 8px;
  }

  .settingsOverlay,
  .authOverlay {
    padding: 6px;
  }

  .settingsSheet,
  .authSheet {
    max-height: calc(100dvh - 12px);
    border-radius: 8px;
  }
}

/* At extreme zoom or in a short landscape window the Settings header and
   horizontal section picker can be taller than the fixed content track. Let
   the complete sheet scroll as one document so the active pane and draft bar
   remain reachable instead of collapsing the content track to zero pixels. */
@media (max-width: 520px) and (max-height: 320px) {
  .settingsSheetTabbed {
    height: calc(100dvh - 12px);
    grid-template-rows: auto auto auto;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .settingsSheetTabbed .settingsBody {
    grid-template-rows: auto auto;
    min-height: auto;
  }

  .settingsSheetTabbed .settingsContent {
    overflow: visible;
  }

  .settingsSheetTabbed .settingsHeader,
  .settingsSheetTabbed .settingsNav {
    padding-block: 2px;
  }

  .settingsSheetTabbed .settingsNavSection {
    padding-block: 0;
  }
}


.settingsInlineForm {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 8px;
}

.settingsInlineForm input[type="number"] {
  width: 120px;
}

.usageBarTrack {
  width: 160px;
  height: 6px;
  border-radius: 3px;
  background: var(--line-soft);
  overflow: hidden;
}

.usageBarFill {
  /* Spans ignore width/height while inline — the fill never painted. */
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--green);
}

.usageBarFill.warn {
  background: var(--yellow);
}

.usageBarFill.hot,
.usageBarFill.over {
  background: var(--red);
}


.settingsCheckboxRow {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  font-size: 12px;
  color: var(--ink);
}

/* Generic form rules stretch inputs to full width; a checkbox must stay
   checkbox-sized next to its text. */
.settingsCheckboxRow input[type="checkbox"] {
  width: auto;
  flex: none;
  margin: 0;
}

.settingsCheckboxRow span {
  flex: 0 1 auto;
  text-align: left;
}

/* Pane dividers live above the settings overlay in the stacking order;
   they must neither paint nor grab the pointer while any overlay is open. */
body:has(.settingsOverlay:not([hidden])) .columnResizer {
  display: none;
}

/* Folder rows are a 4-column grid; rows carrying an inline action get a
   fifth column so the count stays on the same line. */
.treeRow:has(.treeInlineAction) {
  grid-template-columns: 16px 20px minmax(0, 1fr) auto auto;
}

.treeInlineAction {
  margin-right: 8px;
  padding: 1px 8px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 5px;
  background: transparent;
  color: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  opacity: 0.6;
}

.treeRow:hover .treeInlineAction {
  opacity: 0.95;
}

.treeInlineAction:hover {
  opacity: 1;
  border-color: var(--accent-hot);
  color: var(--accent-hot);
}


.threadMeta {
  font-variant-numeric: tabular-nums;
}

.metaCopyId {
  margin-left: 2px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4px;
  cursor: pointer;
  vertical-align: 1px;
}

.metaCopyId:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
}


/* Collapsed run telemetry: one chip, expand for the full badges. */
.threadMeta:not(.expanded) > span {
  display: none;
}

.runChip {
  padding: 3px 12px;
  /* The cost part now carries its qualifier ("$0.02 est. next run"), so the
     chip is longer. .threadMeta wraps, and this keeps a long chip from
     overflowing the header on a narrow window instead of clipping it. */
  max-width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--canvas);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.runChip:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
}

.threadMeta.expanded .runChip {
  border-color: var(--accent);
  color: var(--accent-ink);
}

.toolbarMoreWrap {
  position: relative;
}

.toolbarActions .toolbarOverflowTarget {
  display: none;
}

#toolbarMore {
  min-width: 34px;
  font-weight: 700;
}

.toolbarMoreMenu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  display: grid;
  gap: 2px;
  min-width: 170px;
  padding: 6px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--canvas);
  box-shadow: var(--shadow-md);
}

.toolbarMoreMenu button {
  padding: 7px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  text-align: left;
  font-size: 13px;
  cursor: pointer;
}

.toolbarMoreMenu button:hover:not(:disabled) {
  background: var(--accent-soft);
}

.toolbarMoreMenu button:disabled {
  opacity: 0.45;
  cursor: default;
}

/* Header account menu: avatar + name button and its popover. */
.promptSuggestion {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.promptSuggestion[hidden] {
  display: none;
}

.composer textarea::placeholder {
  color: var(--ink-muted);
  opacity: 0.55;
}

.composer textarea.hasPromptSuggestion::placeholder {
  opacity: 0.3;
  font-style: italic;
}

.accountMenuWrap {
  position: relative;
  -webkit-app-region: no-drag;
}

.accountMenuButton {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 180px;
  padding: 3px 8px 3px 3px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--canvas);
  color: var(--ink);
  cursor: pointer;
  -webkit-app-region: no-drag;
}

.accountMenuButton:hover,
.accountMenuButton[aria-expanded="true"] {
  border-color: var(--accent);
  color: var(--accent-ink);
}

.accountAvatar {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.accountAvatar img,
.profileImageEditor img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.profileImageEditor {
  display: flex;
  align-items: center;
  gap: 12px;
}

.profileImageEditor > img {
  width: 72px;
  height: 72px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--line-soft);
}

.accountName {
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.accountMenu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 40;
  display: grid;
  gap: 2px;
  min-width: 220px;
  padding: 6px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--canvas);
  box-shadow: var(--shadow-md);
}

.accountMenu[hidden] {
  display: none;
}

.accountMenuHead {
  display: grid;
  gap: 2px;
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 4px;
}

.accountMenuHead strong {
  font-size: 13px;
}

.accountMenuHead span {
  font-size: 11.5px;
  opacity: 0.7;
}

.accountMenuSectionLabel {
  padding: 7px 10px 2px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.accountMenu button {
  padding: 7px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  text-align: left;
  font-size: 13px;
  cursor: pointer;
}

.accountMenu button:hover,
.accountMenu button:focus-visible {
  background: var(--accent-soft);
}

.tenantSwitchingOverlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background: var(--canvas);
  color: var(--ink);
  font-size: 16px;
  font-weight: 650;
}

body.tenantSwitching > :not(.tenantSwitchingOverlay) {
  visibility: hidden !important;
}

/* Composer runtime controls live behind the Model pill. */
.modelPill {
  padding: 5px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--canvas);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.modelPill:hover,
.modelPill[aria-expanded="true"] {
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* The runtime popover floats above the whole composer card, anchored to
   its left edge, so it never covers the prompt textarea. The base card sets
   overflow: hidden, which would clip the popover - undo it here. */
.composer {
  position: relative;
  overflow: visible;
}

#composerControls:not([hidden]) {
  position: absolute;
  left: 10px;
  bottom: calc(100% + 10px);
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  width: max-content;
  max-width: min(680px, calc(100% - 20px));
  padding: 14px 16px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--canvas);
  box-shadow: var(--shadow-md);
}

.toolbarMoreMenu[hidden],
#composerControls[hidden] {
  display: none;
}


/* Component polish: quiet secondary buttons, soft cards, tokenized inputs. */
.toolbarActions button,
.settingsActions button:not(.primaryButton),
.composerBar button:not(.primaryButton):not(.modelPill) {
  border-radius: var(--radius-sm);
}

.toolSummaryCard,
.adminListItem,
.mcpServerItem {
  border-color: var(--line-soft);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.composer {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

input,
select,
textarea {
  border-radius: var(--radius-sm);
}

button {
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

/* ================================================================
   Creative pass: the app becomes surfaces floating on a soft ground
   tinted by the brand gradient, instead of three butted columns.
   ================================================================ */

.appShell {
  background:
    radial-gradient(1100px 500px at 88% -8%, rgba(110, 98, 229, 0.10), transparent 60%),
    radial-gradient(900px 480px at -6% 34%, rgba(56, 189, 248, 0.09), transparent 55%),
    #f3f4f9;
  gap: 0;
}

/* Sidebar melts into the ground */
.appShell.sidebarLight .navigator {
  border-right: 0;
  background: transparent;
}

/* Conversation is the primary floating surface */
.conversationPane {
  margin: 10px 12px 12px 4px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 14px;
  background: var(--canvas);
  box-shadow: 0 10px 34px rgba(24, 28, 48, 0.10), 0 2px 8px rgba(24, 28, 48, 0.05);
  overflow: hidden;
}

.conversationHeader {
  border-bottom: 0;
  background: transparent;
  padding-top: 16px;
}

.threadMeta {
  background: transparent;
  border-bottom: 1px solid var(--line-soft);
}

/* Inspector is a second, quieter surface */
.inspector {
  margin: 10px 12px 12px 0;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-left: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 22px rgba(24, 28, 48, 0.07);
  padding-top: 20px;
}

.appShell.rightPaneCollapsed .inspector {
  margin: 0;
  border: 0;
}

.appShell.leftPaneCollapsed .conversationPane {
  margin-left: 12px;
}

.inspectorCard {
  padding: 14px;
  border: 0;
  border-radius: 10px;
  background: var(--canvas);
  box-shadow: var(--shadow-sm);
}

.inspectorCard + .inspectorCard {
  margin-top: 10px;
}

.inspectorCard:first-child {
  padding-top: 14px;
}

/* Editorial measure: conversations read like a well-set page, but wide enough
   to actually use a desktop pane — a 760px column stranded 100px+ of margin on
   each side of a wide window (the "whitespace on the left"). The event max-width
   and the timeline's centering padding MUST use the same value so the column and
   its contents line up exactly. */
.event,
.timelineMarker,
.timelineNotice,
.timelineLoadingCard,
.timelineErrorCard {
  max-width: 1200px;
}

.timeline {
  padding: 34px max(30px, calc((100% - 1200px) / 2)) 40px;
}

/* Message identity: your words sit in a quiet tinted card; the
   assistant answers on the open page under the brand sparkle. */
.event.message.user .eventText {
  padding: 12px 16px;
  border-radius: 12px;
  border-top-left-radius: 5px;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.10), rgba(110, 98, 229, 0.10));
  border: 1px solid rgba(110, 98, 229, 0.14);
}

.event.message .eventRole {
  font-weight: 650;
}

.event.message.assistant .eventRole::before {
  content: "✦ ";
  background: linear-gradient(135deg, #38bdf8, #6e62e5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* One bold gradient moment: creating something new */
#newCapsule {
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #38bdf8, #6e62e5);
  color: #ffffff;
  font-weight: 650;
  box-shadow: 0 6px 18px rgba(110, 98, 229, 0.35);
}

#newCapsule:hover {
  filter: brightness(1.06);
  color: #ffffff;
}

#newCapsule .commandIcon {
  color: rgba(255, 255, 255, 0.9);
}

/* Active context gets a slim gradient rail instead of a heavy fill */
.appShell.sidebarLight .treeRow.leaf.active {
  background: var(--canvas);
  box-shadow: var(--shadow-sm);
  border-radius: 10px;
}

.treeRow.leaf.active::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, #38bdf8, #6e62e5);
}

.treeRow.leaf {
  position: relative;
}

/* Composer floats free of the card edge */
.composer {
  margin: 0 22px 18px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
}

/* Queued prompts slide out of the way while a row is dragged, with a hint
   of springiness, and glide into place after reorders. */
.queueItem {
  transition: transform 380ms cubic-bezier(0.3, 0.9, 0.35, 1.12);
  will-change: transform;
}

.queueItem.dragging {
  opacity: 0.35;
}

@media (prefers-reduced-motion: reduce) {
  .queueItem {
    transition: none;
  }
}

/* Queued prompts slide out of the way while a row is dragged, with a hint
   of springiness, and glide into place after reorders. */
.queueItem {
  transition: transform 180ms cubic-bezier(0.3, 0.9, 0.35, 1.12);
  will-change: transform;
}

.queueItem.dragging {
  opacity: 0.35;
}

@media (prefers-reduced-motion: reduce) {
  .queueItem {
    transition: none;
  }
}

/* A steering instruction speaks in the user's voice mid-run: same tinted
   card as user messages, with the signature tightened corner, plus an
   eyebrow saying what it did. */
.event.steerEvent {
  border: 0;
  padding: 0;
  background: transparent;
  font-weight: 400;
  font-size: 13px;
}

.steerCard {
  padding: 10px 16px 12px;
  border-radius: 12px;
  border-top-left-radius: 5px;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.08), rgba(110, 98, 229, 0.14));
  border: 1px dashed rgba(110, 98, 229, 0.35);
}

.steerLabel {
  display: block;
  margin-bottom: 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.steerPrompt {
  color: var(--ink);
  line-height: 1.5;
}

/* Slice 6: illustrated empty states and a little considered motion. */
.emptyThread {
  display: grid;
  justify-items: center;
  gap: 4px;
  animation: emptyFadeIn 320ms ease;
}

.emptyThread strong {
  font-size: 14.5px;
  color: var(--ink);
}

.emptyThread span {
  color: var(--muted);
  font-size: 13px;
}

.emptyIllustration {
  width: 84px;
  height: 84px;
  margin-bottom: 4px;
  opacity: 0.9;
}

.artifactBrowserEmpty {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 12px 0 6px;
  text-align: center;
  animation: emptyFadeIn 320ms ease;
}

.artifactBrowserEmpty .emptyIllustration {
  width: 52px;
  height: 52px;
}

@keyframes emptyFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Overlays pop in gently instead of appearing instantly */
.settingsOverlay:not([hidden]) > * {
  animation: overlayPop 170ms cubic-bezier(0.25, 0.9, 0.3, 1.05);
}

@keyframes overlayPop {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* New live events settle in rather than snapping */
.event.liveEvent {
  animation: emptyFadeIn 220ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .emptyThread,
  .artifactBrowserEmpty,
  .settingsOverlay:not([hidden]) > *,
  .event.liveEvent {
    animation: none;
  }
}

/* Code block syntax tinting (zero-dependency) */
.mdCode .hlKw { color: var(--accent-ink); font-weight: 600; }
.mdCode .hlStr { color: var(--green); }
.mdCode .hlNum { color: var(--accent-blue); }
.mdCode .hlCom { color: var(--subtle); font-style: italic; }
.mdCode .hlKey { color: var(--accent-ink); }

#reloadBanner {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 8px 16px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--canvas);
  box-shadow: var(--shadow-md);
  font-size: 13px;
  color: var(--ink);
  animation: overlayPop 200ms cubic-bezier(0.25, 0.9, 0.3, 1.05);
}

#reloadBanner #reloadBannerButton {
  border: 0;
  border-radius: 999px;
  padding: 4px 14px;
  background: linear-gradient(135deg, #38bdf8, #6e62e5);
  color: #ffffff;
  font-weight: 650;
  cursor: pointer;
}

#reloadBanner #reloadBannerDismiss {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

/* Members & Groups redesign: People/Groups segmented views, person rows with
   membership chips, inline editors instead of the old dropdown triplet. */
.membersHeader {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.membersTabs {
  display: inline-flex;
  padding: 3px;
  background: var(--line-soft);
  border-radius: 10px;
  flex: none;
}
.membersTab {
  border: 0;
  background: transparent;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}
.membersTab.active {
  background: var(--canvas);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.membersSearch {
  flex: 1;
  min-width: 120px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 13px;
  background: var(--canvas);
}
.membersRoot {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.membersEmpty {
  padding: 24px 0;
  text-align: center;
}
.personRow {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--canvas);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.personRow.personDisabled {
  opacity: 0.55;
  box-shadow: none;
}
.personAvatar {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(135deg, var(--accent), var(--brand-violet));
}
.personAvatar.invited {
  background: var(--line);
  color: var(--muted);
  border: 1px dashed var(--subtle);
}
.personBody {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.personTitle {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 14px;
}
.personMeta {
  font-size: 12px;
  color: var(--muted);
}
.personBadge {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--line-soft);
  color: var(--muted);
}
.personBadge.you {
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.personBadge.admin {
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.personBadge.invited {
  background: #fdf3df;
  color: #8a6116;
}
.personBadge.inactive {
  background: var(--line-soft);
  color: var(--subtle);
}
.personChips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.memberChip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--window);
  font-size: 12px;
  color: var(--ink);
}
.memberChip span {
  color: var(--muted);
  font-size: 11.5px;
}
.memberChip.editable {
  cursor: pointer;
}
.memberChip.editable:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.memberChip.addChip {
  border-style: dashed;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}
.memberChip.addChip:hover {
  color: var(--accent-ink);
  border-color: var(--accent);
}
.personActions {
  flex: none;
  display: flex;
  gap: 8px;
  align-items: center;
}
.membersEditorCard {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--window);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.membersEditorCard.inviteLinkCard {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.membersEditorTitle {
  font-size: 13px;
  font-weight: 600;
}
.membersEditorRow {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.membersEditorRow input,
.membersEditorRow select {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  background: var(--canvas);
}
.membersEditorRow input {
  flex: 1;
  min-width: 140px;
}
.groupCard {
  background: var(--canvas);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.groupCardHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.groupCardTitle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}
.groupCardCount {
  font-size: 12px;
  color: var(--muted);
}
.groupCardActions {
  display: flex;
  gap: 8px;
}

.capabilityWarning {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #8a6116;
  background: #fdf3df;
  border-radius: 6px;
  padding: 4px 8px;
}

/* Mobile workflow: the tree and the conversation are alternating screens,
   the header pane-toggle acts as Back, and the tools/artifacts pane opens
   as a right-hand sheet. */
@media (max-width: 780px) {
  .appShell:not(.leftPaneCollapsed) {
    grid-template-rows: minmax(0, 1fr);
  }
  .appShell:not(.leftPaneCollapsed) .conversationPane {
    display: none;
  }
  .appShell:not(.leftPaneCollapsed) .navigator {
    border-bottom: 0;
  }
  .conversationPane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* Full-bleed on a phone: the desktop floating-card margin/radius/shadow
       wasted ~16px of every edge on a 390px screen. */
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  #toggleRightPane {
    display: inline-flex;
  }
  /* Conversation-header pane toggle becomes an explicit "‹ Contexts" back
     control so the way back to the list is legible, not a bare icon. */
  .conversationTitleGroup #toggleLeftPane {
    width: auto;
    min-width: 0;
    height: 40px;
    padding: 0 12px 0 4px;
    justify-self: start;
  }
  .conversationTitleGroup #toggleLeftPane .paneToggleIcon {
    display: none;
  }
  .conversationTitleGroup #toggleLeftPane .paneBackLabel {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    font-size: 15px;
    font-weight: 600;
    color: var(--accent);
  }
  .paneBackChevron {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  /* Touch targets: chrome icons were 30px (below the ~44px minimum). */
  .navigatorActions .iconButton,
  .navigatorActions .accountMenuButton {
    min-width: 40px;
    min-height: 40px;
  }
  .contextTree .treeRow {
    min-height: 40px;
  }
  .contextTree .disclosure {
    min-width: 34px;
    min-height: 34px;
  }
  .appShell:not(.rightPaneCollapsed) .inspector {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0 0 0 auto;
    width: min(92vw, 380px);
    z-index: 80;
    background: var(--inspector);
    box-shadow: var(--shadow);
    overflow-y: auto;
  }
  .composer {
    position: sticky;
    bottom: 0;
    margin-left: 10px;
    margin-right: 10px;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }

  /* No timestamp pull on phones (#186): the rail lives off the right edge,
     which iOS treats as pannable overflow inside the vertical scroller — the
     page "bobs" side to side. The JS gesture is gated on this breakpoint too. */
  .eventTimestampRail {
    display: none;
  }

  .timeline .event {
    transform: none;
  }

  /* Mobile de-clutter (#188): the phone is a companion surface — check on
     runs, read, steer. Chrome that only matters at a desk goes away. */
  /* Theme follows the app default and refresh duplicates the app's own
     polling; neither earns 40px of a 400px-wide header. */
  #sidebarThemeToggle,
  #refreshCapsules {
    display: none;
  }

  /* Account menu is a viewport-anchored sheet on phones (#189 follow-up): the
     account chip sits left-of-center, so anchoring the dropdown to the button's
     right edge pushed it off the left edge. Pinning left+right keeps it fully
     on-screen; JS sets `top` from the button. */
  .accountMenu {
    position: fixed;
    left: 12px;
    right: 12px;
    min-width: 0;
    width: auto;
    max-width: none;
    max-height: 70vh;
    overflow-y: auto;
  }

  /* Brand block: one tight row instead of a two-line lockup. */
  .navBrand {
    padding: 2px 14px 8px;
  }

  .brandWordmark {
    display: none;
  }

  .brandMarkFrame,
  .brandMark {
    width: 26px;
    height: 26px;
  }

  .brandMark {
    border-radius: 8px;
  }

  .navBrand h1 {
    font-size: 15px;
  }
}

.mobileSheetScrim {
  position: fixed;
  inset: 0;
  z-index: 75;
  background: rgba(14, 22, 51, 0.42);
}

.mobileSheetClose {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 85;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--canvas);
  color: var(--ink);
  font-size: 16px;
  box-shadow: var(--shadow-md);
  cursor: pointer;
}

.storageMemories {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.storageMemoryItem {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--window);
}
.storageMemoryText {
  font-size: 12.5px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Inline access-request cards: the model asks, the user sets boundaries. */
.accessRequestEvent .eventText {
  width: 100%;
}
.accessRequestCard {
  border: 1.5px dashed var(--yellow);
  background: #fdf8ec;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.accessRequestCard.resolved {
  border-style: solid;
  background: var(--window);
}
.accessRequestLabel {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8a6116;
}
.accessRequestTitle {
  font-size: 13.5px;
  font-weight: 600;
}
.accessRequestReason {
  font-size: 12.5px;
  color: var(--muted);
}
.credentialChoiceOptions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 8px;
}
.credentialChoiceOption {
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--window);
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  overflow-wrap: anywhere;
  text-align: left;
  cursor: pointer;
}
.credentialChoiceOption:hover,
.credentialChoiceOption:focus-visible {
  border-color: var(--accent, #4b6bfb);
  background: color-mix(in srgb, var(--accent, #4b6bfb) 8%, var(--window));
}
.accessRequestForm {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  font-size: 12.5px;
}
.accessRequestForm input[type="number"] {
  width: 86px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
}
/* Paste-a-token connect for MCP servers without automatic OAuth (#113). */
.accessRequestForm.mcpTokenConnect {
  width: 100%;
}
.accessRequestForm.mcpTokenConnect input[type="password"] {
  flex: 1 1 100%;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 12.5px;
}
.accessDays {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.accessCheck {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.accessLimits {
  display: inline-flex;
  gap: 6px;
}
.accessRequestActions {
  display: flex;
  gap: 8px;
}
/* Standing authorization opt-in on the owner-approval card. Deliberately reads
   as a considered choice rather than a checkbox tacked onto a button row. */
.credentialChoiceRemember {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  line-height: 1.45;
  margin: 4px 0 2px;
  cursor: pointer;
}
.credentialChoiceRemember input {
  margin-top: 2px;
  flex: none;
}
/* TES-252. The app's base rule stretches every <input> to width: 100%. On this
   flex row the checkbox therefore claimed the whole card width while flex:none
   forbade it from shrinking, so the label span was squeezed to ~0 and — with
   the timeline's overflow-wrap: anywhere — wrapped one character per line as a
   2000px-tall vertical strip. Diego hit exactly that on the "Periodic email
   cleanup" chooser. Scoped to the card family so any future checkbox added to
   these cards keeps its intrinsic size too; this is the one load-bearing job
   of the .credentialChoiceCard class. */
.credentialChoiceCard input[type="checkbox"] {
  width: auto;
}
/* TES-252. Explicit zero-candidate state: a picker whose offers were revoked,
   replaced, or expired says so instead of rendering a choice-less grid. */
.credentialChoiceEmpty {
  border: 1px dashed var(--line);
  border-radius: 9px;
  background: var(--window);
  padding: 10px 12px;
  font-size: 12.5px;
  color: var(--muted);
}
.accessBadge {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}
.accessBadge.approved {
  background: #e3f4ea;
  color: var(--green);
}
.accessBadge.denied {
  background: #fdeaea;
  color: var(--red);
}

.capabilityEditor {
  margin-top: 8px;
  width: 100%;
}
.capabilityEditLabel {
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}
.capabilityEditLabel input,
.capabilityEditLabel textarea {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  background: var(--canvas);
  color: var(--ink);
  font-family: inherit;
}
.secretBadge {
  margin-left: 8px;
}

/* Storage rows: aligned action column and size tones. */
.storageRowHeader {
  align-items: center;
  flex-wrap: nowrap;
}
.storageRowTitle {
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}
.storageRowTitle strong {
  overflow-wrap: anywhere;
}
.storageRowHeader .groupCardActions {
  flex: none;
  align-items: center;
}
.storageRowHeader .groupCardActions button {
  white-space: nowrap;
}
.storageDot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.storageDot.green { background: var(--green); }
.storageDot.yellow { background: var(--yellow); }
.storageDot.red { background: var(--red); }
.storageTone-red { border-left: 3px solid var(--red); }
.storageTone-yellow { border-left: 3px solid var(--yellow); }
.storageTone-green { border-left: 3px solid rgba(43, 138, 95, 0.35); }

/* Dark mode: the header toggle themes the whole app, not just the sidebar.
   Neutrals flip via tokens; warm/status chips get explicit dark values. */
:root[data-theme="dark"] {
  --window: #0d1120;
  --canvas: #161b2e;
  --inspector: #131828;
  --ink: #e7eaf5;
  --muted: #9aa3bb;
  --subtle: #9aa3bb;
  --line: #2c3350;
  --line-soft: #222842;
  --active: #29305a;
  --accent: #8b80f0;
  --accent-ink: #b0a7ff;
  --accent-soft: #272a4d;
  --accent-faint: #1b2038;
  --paper: #10152a;
  --status-good-ink: #82d9aa;
  --status-warn-ink: #ffc078;
  --status-danger-ink: #ff9ca5;
  --primary-action: #6559d8;
  --primary-action-hover: #594dc8;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 6px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.3);
  --shadow: 0 16px 44px rgba(0, 0, 0, 0.55);
  --conversation-header-background:
    linear-gradient(90deg, rgba(139, 128, 240, 0.08), transparent 42%),
    var(--canvas);
}
:root[data-theme="dark"] body {
  background: var(--window);
  color: var(--ink);
}
:root[data-theme="dark"] .capabilityWarning,
:root[data-theme="dark"] .personBadge.invited {
  background: #3a2f14;
  color: #eac36b;
}
:root[data-theme="dark"] .accessRequestCard {
  background: #262138;
  border-color: #8a6116;
}
:root[data-theme="dark"] .importDigestCard {
  background: var(--window);
}
:root[data-theme="dark"] .importDigestNote {
  background: transparent;
}
:root[data-theme="dark"] .importDigestOrganizer {
  background: transparent;
}
:root[data-theme="dark"] .importDigestBadge.op-add {
  background: #143526;
  color: #5fd39a;
}
:root[data-theme="dark"] .accessBadge.approved {
  background: #143526;
  color: #5fd39a;
}
:root[data-theme="dark"] .accessBadge.denied {
  background: #3d1a1f;
  color: #ff8f99;
}
:root[data-theme="dark"] .mobileSheetScrim {
  background: rgba(0, 0, 0, 0.55);
}

/* Dark-mode contrast fixes for surfaces with hardcoded light-mode values. */
:root[data-theme="dark"] .eventText {
  color: var(--ink);
}
:root[data-theme="dark"] .event.toolEvent,
:root[data-theme="dark"] .event.systemEvent,
:root[data-theme="dark"] .event.artifactEvent {
  background: var(--window);
}
:root[data-theme="dark"] .event.assistant .eventRole {
  color: #6fbf9f;
}
.toast {
  color: #f2f4fa;
}

/* Dark mode for the floating-surface ground and glass panes. */
:root[data-theme="dark"] .appShell {
  background:
    radial-gradient(1100px 500px at 88% -8%, rgba(139, 128, 240, 0.10), transparent 60%),
    radial-gradient(900px 480px at -6% 34%, rgba(56, 189, 248, 0.06), transparent 55%),
    #0a0e1b;
}
/* #224: the middle pane came up WHITE in dark mode on the new Electron build.
   Root cause is two-fold and both halves are host-dependent, which is why it
   only showed up on a newer Chromium:
   1. The stylesheet never declared `color-scheme`, so the UA resolved the
      document as light and painted its canvas light. The desktop shell also
      fills its window with a light color, so any pixel the app does not paint
      itself shows up white — see the `color-scheme` block on :root.
   2. `.conversationPane` was the ONLY major pane whose dark background came
      purely from token substitution: the navigator and inspector both paint
      literal dark colors in the dark block, while the middle pane relied on
      `background: var(--canvas)` from the light rules (and, in the desktop
      shell, on a light-mode gradient shorthand at higher specificity that
      never got a dark counterpart). Paint it explicitly here instead. */
:root[data-theme="dark"] .conversationPane {
  border-color: rgba(255, 255, 255, 0.07);
  background: var(--canvas);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.35);
}

:root[data-theme="dark"] .appShell.desktopShell .conversationPane {
  background:
    linear-gradient(90deg, rgba(139, 128, 240, 0.10), transparent 42%) top / 100% var(--desktop-titlebar-safe-zone) no-repeat,
    var(--canvas);
}

:root[data-theme="dark"] .artifactViewerHeader {
  background: var(--window);
}

/* Right-click menus were a literal rgba(255,255,255,0.96) with no dark
   counterpart, so in dark mode they painted white behind light text. Found
   while chasing the middle-pane report — unrelated to it, but the same class
   of bug: a hardcoded light colour that never got a dark twin. */
:root[data-theme="dark"] .contextMenu {
  background: rgba(22, 27, 46, 0.96);
  border-color: rgba(255, 255, 255, 0.10);
}
:root[data-theme="dark"] .inspector {
  border-color: rgba(255, 255, 255, 0.07);
  border-left-color: rgba(255, 255, 255, 0.07);
  background: rgba(19, 24, 40, 0.74);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
}

/* Dark mode: default buttons lose the white-bottom gradient, and the
   selected tree row uses light text instead of brand navy. */
:root[data-theme="dark"] button {
  background: linear-gradient(#232946, #1a2036);
  border-color: var(--line);
}
:root[data-theme="dark"] button:hover:not(:disabled) {
  background: linear-gradient(#293052, #1e2440);
}
:root[data-theme="dark"] .dangerButton {
  background: #2c1a20;
  border-color: rgba(255, 87, 101, 0.45);
  color: var(--red);
}
:root[data-theme="dark"] .treeRow.active {
  color: #eef0fb;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
}
:root[data-theme="dark"] .treeRow.active .treeIcon,
:root[data-theme="dark"] .treeRow.active .disclosure,
:root[data-theme="dark"] .treeRow.active .treeCount,
:root[data-theme="dark"] .treeRow.active .treeMeta {
  color: rgba(238, 240, 251, 0.62);
}

.shareDialogOverlay {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: grid;
  place-items: center;
  background: rgba(18, 20, 34, 0.45);
}

.shareDialog {
  width: min(480px, calc(100vw - 32px));
  max-height: 80vh;
  overflow-y: auto;
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 12px;
  background: var(--canvas, #ffffff);
  border: 1px solid var(--hairline, #d9dbe3);
}

.shareDialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.shareCreateRow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.shareCreateRow label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Only the day count is a fixed-width field. A checkbox inherits nothing here:
   a 64px-wide checkbox renders its box centered in that slot, which read like
   the "Never expires" control was floating mid-row instead of sitting with the
   other fields. */
.shareCreateRow input[type="number"],
.shareCreateRow input[type="text"] {
  width: 64px;
}

.shareCreateRow input[type="checkbox"] {
  width: auto;
  margin: 0;
  flex: none;
}

/* Fields stay left-aligned with the dialog's other copy; the action sits right. */
.shareCreateRow .primaryButton {
  margin-left: auto;
}

.shareCreatedUrl {
  display: flex;
  gap: 8px;
}

.shareCreatedUrl input {
  flex: 1;
  font-size: 12px;
}

.usageHistoryChart {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 8px 4px 0;
  min-height: 140px;
}

.usageBarColumn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.usageBarValue {
  font-size: 10.5px;
  color: var(--muted, #6b7080);
  font-variant-numeric: tabular-nums;
}

.usageBar {
  width: 70%;
  max-width: 48px;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, #7c6cff, #5346d6);
}

.usageBarLabel {
  font-size: 10.5px;
  color: var(--muted, #6b7080);
}

/* Visual slice 6: motion + loading skeletons. All entrance motion sits
   under prefers-reduced-motion: no-preference so reduce users get instant
   rendering. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes surfaceIn {
    from { opacity: 0; transform: translateY(6px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .settingsOverlay:not([hidden]) { animation: fadeIn 140ms ease-out; }
  .settingsOverlay:not([hidden]) .settingsSheet,
  .settingsOverlay:not([hidden]) > * { animation: surfaceIn 180ms cubic-bezier(0.2, 0.8, 0.3, 1); }
  .notificationsPanel:not([hidden]) { animation: surfaceIn 160ms cubic-bezier(0.2, 0.8, 0.3, 1); }
  .shareDialogOverlay { animation: fadeIn 140ms ease-out; }
  .shareDialogOverlay .shareDialog { animation: surfaceIn 180ms cubic-bezier(0.2, 0.8, 0.3, 1); }
  .toolbarMoreMenu:not([hidden]) { animation: surfaceIn 140ms ease-out; }
  .treeRow { transition: background-color 120ms ease, color 120ms ease; }
  .adminListItem, .groupCard { transition: box-shadow 140ms ease, transform 140ms ease; }
  .adminListItem:hover, .groupCard:hover { transform: translateY(-1px); }
}

/* TES-132 release gates: visible keyboard focus, scalable type, high-contrast
   fallback, reduced motion, and phone-sized controls apply across every pane. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

:where(button, a, input, select, textarea, summary, [role="button"]):focus-visible {
  outline: 3px solid var(--accent, #6657d9);
  outline-offset: 2px;
}

@media (max-width: 780px) {
  :where(button, select, input:not([type="checkbox"]):not([type="radio"]), summary, [role="button"]) {
    min-height: 44px;
  }
}

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

@media (forced-colors: active) {
  :where(button, input, select, textarea, .settingsSheet, .inspectorCard) {
    border: 1px solid CanvasText;
  }
}

@keyframes skeletonShimmer {
  from { background-position: -200px 0; }
  to { background-position: 200px 0; }
}

.skeletonRow {
  height: 14px;
  border-radius: 7px;
  margin: 10px 12px;
  background: linear-gradient(90deg, rgba(120, 126, 155, 0.14) 25%, rgba(120, 126, 155, 0.26) 50%, rgba(120, 126, 155, 0.14) 75%);
  background-size: 400px 100%;
  animation: skeletonShimmer 1.2s linear infinite;
}

.skeletonRow.wide { width: 82%; }
.skeletonRow.medium { width: 64%; }
.skeletonRow.narrow { width: 46%; }

@media (prefers-reduced-motion: reduce) {
  .skeletonRow { animation: none; }
}

/* Read-only maintenance banner (server-driven via /api/health). */
.maintenanceBanner {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 16px;
  font-size: 13px;
  background: #4338ca;
  color: #ffffff;
}

/* Full-screen "server updating" overlay: shown after ~10s of unreachable
   API, auto-clears (with a reload) the moment the server answers again. */
.outageOverlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 24px;
  background: color-mix(in srgb, var(--canvas) 88%, transparent);
  backdrop-filter: blur(6px);
}

.outageOverlay h2 {
  margin: 0;
  font-size: 20px;
}

.outageOverlay p {
  margin: 0;
  max-width: 420px;
  color: var(--muted);
  font-size: 14px;
}

.outageOverlay .outageSpinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, currentColor 25%, transparent);
  border-top-color: currentColor;
  animation: outageSpin 0.9s linear infinite;
}

.outageOverlay button {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}

@keyframes outageSpin {
  to { transform: rotate(360deg); }
}

/* Inline credential entry on credential-grant proposal cards. */
.credentialEntryForm {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  max-width: 340px;
}

.credentialEntryForm input {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--canvas);
  color: inherit;
  font-size: 13px;
}

.credentialEntryNote {
  font-size: 12px;
  color: var(--muted);
}

/* TES-242. The sign-in destination on a credential-grant proposal, as its own
   labelled fact. It used to render as one muted value inside a `·`-joined
   summary line — the address the password is about to be submitted to, styled
   exactly like the label beside it. */
.credentialDestination {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  max-width: 340px;
}

.credentialDestinationLabel {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.credentialDestinationValue {
  font-size: 13px;
  word-break: break-all;
}

.credentialDestinationValue strong {
  font-weight: 650;
}

.credentialDestination input {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--canvas);
  color: inherit;
  font-size: 12.5px;
}

.credentialDestinationWarning {
  font-size: 12px;
  color: var(--warn, #b45309);
}

/* --- Guided import surface ----------------------------------------------- */
.importEntryHint {
  margin: 0 0 10px;
  font-size: 12.5px;
  color: var(--muted);
}

.importEntryDrop {
  margin-top: 10px;
  padding: 14px 10px;
  border: 1.5px dashed var(--line);
  border-radius: 10px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.importEntryDrop.dragging {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.importSurface {
  display: flex;
  flex-direction: column;
  width: min(980px, 94vw);
  height: min(680px, 88vh);
  padding: 0;
  overflow: hidden;
  background: var(--canvas);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg, 0 18px 60px rgba(20, 24, 40, 0.28));
}

.importSurfaceHeader {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--line);
}

.importSurfaceHeader h2 { margin: 0; font-size: 17px; }
.importSurfaceHeader p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.importSurfaceHeader > div { flex: 1; }

.importDestination {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--muted);
}

.importDestination select { min-width: 160px; }

.importSurfaceBody {
  flex: 1;
  display: grid;
  grid-template-columns: 180px 1fr;
  min-height: 0;
}

.importSurfaceBody:has(.importSurfaceDetail:not([hidden])) {
  grid-template-columns: 180px 1fr 280px;
}

.importSourceRail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 8px;
  border-right: 1px solid var(--line);
  overflow-y: auto;
}

.importSourceRail button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  text-align: left;
  font-size: 13px;
  cursor: pointer;
}

.importSourceRail button:hover { background: color-mix(in srgb, currentColor 7%, transparent); }
.importSourceRail button.active { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.importSourceRail button .railNote { font-size: 11px; color: var(--muted); }

.importSurfaceMain {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 12px 16px;
  gap: 10px;
  overflow-y: auto;
}

.importSearchRow { display: flex; gap: 8px; }
.importSearchRow input { flex: 1; }

.importSessionList { display: flex; flex-direction: column; gap: 4px; }

.importSessionRow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.importSessionRow:hover { background: color-mix(in srgb, currentColor 5%, transparent); }
.importSessionRow:focus-within { border-color: var(--accent); }
.importSessionRow.selected { border-color: var(--accent); }
.importSessionRow.imported { opacity: 0.75; }
.importSessionRow.unavailable {
  background: color-mix(in srgb, var(--line) 28%, transparent);
}
.importSessionRow.unavailable:hover { background: color-mix(in srgb, var(--line) 28%, transparent); }

.importSessionUnavailableMarker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  color: var(--muted);
  font-weight: 700;
}

.importSessionCheck {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: -7px -9px;
  cursor: pointer;
}

.importSessionCheck input[type="checkbox"] { margin: 0; }
.importSessionRow .rowMain { min-width: 0; }
.importSessionDetail {
  display: grid;
  justify-items: start;
  gap: 1px;
  padding: 6px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}
.importSessionDetail:hover:not(:disabled) { border-color: transparent; background: color-mix(in srgb, currentColor 5%, transparent); }
.importSessionUnavailable { cursor: default; }
.importSessionUnavailable:hover { background: transparent; }
.importSessionRow .rowTitle { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.importSessionRow .rowMeta { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.importedBadge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, #16a34a 15%, transparent);
  color: #16a34a;
  white-space: nowrap;
}

.sourceBadge {
  font-size: 10.5px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
}

.sourceBadges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.sourceBadge.warning {
  border-color: color-mix(in srgb, #d97706 45%, var(--line));
  color: #b45309;
}

.importDiscoveryStatus {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  color: var(--muted);
  font-size: 12px;
}

.importDiscoveryError { color: #dc2626; }
.importDiscoveryActions { display: inline-flex; gap: 6px; margin-left: auto; }

.importSurfaceDetail {
  padding: 14px;
  border-left: 1px solid var(--line);
  overflow-y: auto;
  font-size: 12.5px;
}

.importSurfaceDetail h4 { margin: 0 0 8px; font-size: 13px; }
.importSurfaceDetail dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; }
.importSurfaceDetail dt { color: var(--muted); }
.importSurfaceDetail dd { margin: 0; }
.importDetailHeader {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.importDetailHeader h4 {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}
.importDetailHeader [data-import-detail-back] { flex: none; }
.importDetailBody,
.importDetailBody dd,
.importDetailBody blockquote { overflow-wrap: anywhere; }
.importSampleQuote {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-left: 3px solid var(--line);
  color: var(--muted);
  font-style: italic;
}

.importDropTarget {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1.5px dashed var(--line);
  border-radius: 12px;
  color: var(--muted);
  text-align: center;
  padding: 24px;
}

.importDropTarget.dragging { border-color: var(--accent); }

.importSurfaceFooter {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
}

.importArtifactsToggle { font-size: 12px; white-space: nowrap; }

.importSurfaceQueue {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 96px;
  overflow-y: auto;
  font-size: 12px;
}

.importQueueItem { display: flex; align-items: center; gap: 8px; }
.importQueueItem .queueState { min-width: 90px; color: var(--muted); }
.importQueueItem .queueState.done { color: #16a34a; }
.importQueueItem .queueState.failed { color: #dc2626; }
.importQueueItem a { color: var(--accent); }
.importQueueRecord { display: grid; gap: 2px; }
.importQueueFailures {
  margin: 0 0 3px 98px;
  padding-left: 16px;
  color: #b91c1c;
  line-height: 1.35;
}
.importQueueFailures li { overflow-wrap: anywhere; }

.importSurfaceActions { display: flex; align-items: center; gap: 12px; }
.importSurfaceSummary { font-size: 12.5px; color: var(--muted); }

.importNotice {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 13px;
  color: var(--muted);
}

/* The hidden attribute must always win over .inspectorCard's display:grid —
   the same specificity trap as the July 2026 quota-listbox bug. */
.inspectorCard[hidden] {
  display: none;
}

/* Desktop App download tab (web only). */
.desktopDownloadGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.desktopDownloadCard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--inspector);
}
.desktopDownloadOs { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.desktopDownloadCard .primaryButton { margin-top: 4px; text-align: center; text-decoration: none; }
.desktopDownloadCard .primaryButton[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.comingSoonBadge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
}

/* Platform-aware desktop-app download nudge (web only, dismissible). */
.desktopNudge {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 380px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--canvas);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg, 0 12px 40px rgba(20, 24, 40, 0.22));
  font-size: 13px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.desktopNudge.visible { opacity: 1; transform: translateY(0); }
.desktopNudgeGet {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
.desktopNudgeDismiss {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}

/* --- First-run onboarding wizard ---------------------------------------- */
.srOnly {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.onboardingSheet {
  display: flex;
  flex-direction: column;
  width: min(820px, 94vw);
  max-height: 88vh;
  padding: 0;
  overflow: hidden;
  background: var(--canvas);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg, 0 18px 60px rgba(20, 24, 40, 0.28));
}
.onboardingHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--inspector) 72%, var(--canvas));
}
.onboardingKicker {
  margin-bottom: 6px;
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.onboardingProgress { display: flex; align-items: center; gap: 10px; }
.onboardingProgressLabel { color: var(--ink); font-size: 13px; font-weight: 700; white-space: nowrap; }
.onboardingProgressTrack { display: flex; flex-wrap: wrap; gap: 4px; }
.onboardingDot {
  width: 18px; height: 4px; border-radius: 999px;
  background: var(--line);
  transition: background 0.2s ease;
}
.onboardingDot.active { background: var(--accent); }
.onboardingDot.done { background: color-mix(in srgb, var(--accent) 45%, transparent); }
.onboardingContent { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 0; overflow: hidden; }
.onboardingMap {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 20px 16px;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--inspector) 58%, var(--canvas));
  overflow-y: auto;
}
.onboardingRole { display: grid; gap: 5px; margin-bottom: 16px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--canvas); }
.onboardingRole strong { font-size: 12.5px; }
.onboardingRole > span:last-child { color: var(--muted); font-size: 11.5px; line-height: 1.4; }
.onboardingRoleBadge { width: fit-content; padding: 3px 7px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, var(--canvas)); color: var(--accent-ink); font-size: 10.5px; font-weight: 750; }
.onboardingStepRail { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.onboardingStepRail li { display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 8px; min-height: 31px; padding: 3px 7px; border-radius: 8px; color: var(--muted); font-size: 12px; }
.onboardingStepRail li.active { background: color-mix(in srgb, var(--accent) 10%, var(--canvas)); color: var(--ink); font-weight: 700; }
.onboardingStepRail li.done { color: var(--ink); }
.onboardingStepNumber { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 999px; background: var(--canvas); font-size: 10.5px; }
.onboardingStepRail li.active .onboardingStepNumber { border-color: var(--accent); background: var(--accent); color: white; }
.onboardingStepRail li.done .onboardingStepNumber { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); color: var(--accent-ink); }
.onboardingSaveNote { margin: auto 4px 0; padding-top: 16px; color: var(--muted); font-size: 10.5px; line-height: 1.4; }
.onboardingBody { padding: 22px 28px 18px; overflow-y: auto; }
.onboardingBody h2 { margin: 8px 0 7px; font-size: 25px; line-height: 1.16; text-wrap: balance; }
.onboardingLead { margin: 0 0 16px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.onboardingEyebrow {
  margin-top: 6px;
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.onboardingFeatureList {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.45;
}
.onboardingFeatureList li { display: grid; grid-template-columns: 28px 1fr; align-items: start; gap: 10px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; background: color-mix(in srgb, var(--inspector) 70%, var(--canvas)); }
.onboardingFeatureIcon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 13%, var(--canvas)); color: var(--accent-ink); font-size: 11px; font-weight: 800; }
.onboardingCallout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 18px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--inspector);
  font-size: 13px;
  line-height: 1.45;
}
.onboardingCallout span { color: var(--muted); }
.onboardingCallout .ghostButton {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 4px;
  color: var(--accent-ink);
  text-decoration: none;
}
.onboardingError {
  margin: -4px 0 14px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--danger, #b42318) 45%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--danger, #b42318) 8%, var(--canvas));
  color: var(--danger, #b42318);
  font-size: 13px;
  line-height: 1.45;
}
.onboardingField { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; font-size: 13px; color: var(--muted); }
.onboardingPrimaryField { margin-top: 20px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--inspector) 70%, var(--canvas)); }
.onboardingField input, .onboardingField select {
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--canvas); color: var(--ink); font-size: 14px;
}
.onboardingInviteRow { display: flex; gap: 8px; margin-bottom: 8px; }
.onboardingInviteRow input { flex: 1; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--canvas); color: var(--ink); }
.onboardingRemoveRow { flex: 0 0 auto; background: transparent; border: none; color: var(--muted); font-size: 18px; cursor: pointer; }
.onboardingAddRow { margin-top: 2px; }
.onboardingNextGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.onboardingNextCard {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  padding: 14px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--inspector); color: inherit; cursor: pointer;
}
.onboardingNextCard:hover { border-color: var(--accent); }
.onboardingNextCard strong { font-size: 14px; }
.onboardingNextCard span { font-size: 12.5px; color: var(--muted); }
.onboardingFooter {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 20px; border-top: 1px solid var(--line);
}
.onboardingFooterRight { display: flex; gap: 10px; }
@media (max-width: 720px) {
  .onboardingSheet { width: min(620px, 96vw); max-height: 92vh; }
  .onboardingContent { display: block; overflow-y: auto; }
  .onboardingMap { display: none; }
  .onboardingBody { overflow: visible; padding: 18px 20px 14px; }
  .onboardingHeader { padding-inline: 18px; }
  .onboardingProgressTrack { display: none; }
  .onboardingNextGrid { grid-template-columns: 1fr; }
}
.ghostButton {
  background: transparent; border: 1px solid var(--line);
  color: var(--muted); border-radius: 10px; padding: 8px 14px; cursor: pointer; font-size: 13px;
}
.ghostButton:hover { color: var(--ink); }
.orgSetupRow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.orgSetupRow button {
  background: transparent; border: 1px solid var(--line); color: var(--accent-ink);
  border-radius: 10px; padding: 7px 12px; cursor: pointer; font-size: 13px; font-weight: 600;
}

/* --- Connections (#214): plain-language connector UI ---------------------
   Trust marker, plain status line, per-app guardrail quote, scope sentence
   and empty states shared by the Apps & Tools and Saved Sign-ins panes. All
   built from existing tokens — no new colors enter the system here. */
.connectionTitle {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

/* Built-in / catalog connectors carry the accent treatment (the same one
   ".personBadge.you" uses); anything added by hand stays deliberately plain
   so a hand-added impostor never borrows the look of a trusted one. */
.personBadge.provenance-builtin,
.personBadge.provenance-catalog {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.personBadge.provenance-custom {
  background: var(--line-soft);
  color: var(--muted);
}

/* "Set up elsewhere" is a statement of fact, not a trust level — it must not
   borrow the accent treatment above, which would read as endorsement, nor the
   muted one, which reads as a warning about something hand-added. */
.personBadge.provenance-guide {
  background: var(--line-soft);
  color: var(--ink);
}

/* Guide rows carry instructions rather than an action, so they run full-width
   instead of reserving the right-hand button column every other row uses. */
.catalogGuideRow {
  align-items: flex-start;
}

.catalogGuideSummary {
  margin: 6px 0 0;
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.5;
  max-width: 62ch;
}

.catalogGuide {
  margin-top: 6px;
  font-size: 12.5px;
}

.catalogGuide > summary {
  cursor: pointer;
  color: var(--accent-ink);
  font-weight: 590;
  /* The disclosure triangle is the affordance; without a focus ring this is
     unreachable feedback for keyboard users. */
  border-radius: 6px;
  padding: 2px 4px;
  margin-inline-start: -4px;
}

.catalogGuide > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.catalogGuide ol {
  margin: 8px 0 0;
  padding-inline-start: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--muted);
  line-height: 1.5;
  max-width: 62ch;
}

.catalogGuide > a {
  display: inline-block;
  margin-top: 8px;
  color: var(--accent-ink);
}

.connectionStatus {
  font-size: 11.5px;
  font-weight: 590;
}

.connectionStatus.ready {
  color: var(--status-good-ink);
}

.connectionStatus.attention {
  color: var(--status-warn-ink);
}

.connectionStatus.error {
  color: var(--red, #9f241e);
}

.connectionStatus.off,
.connectionStatus.unknown {
  color: var(--muted);
}

/* An empty scope note would otherwise paint a 1px bordered stub while the
   pane's fetch is still in flight. */
.settingsScopeNote:empty {
  display: none;
}

/* AI Model Access: each row's status is a full sentence, so it takes the whole
   grid row rather than the label's right-hand gutter (.secretField is a
   two-column grid; an `auto` second column would squeeze the provider label). */
#providerKeysForm .secretField em.connectionStatus {
  grid-column: 1 / -1;
}

/* The skills row dims to signal "switched off" (.scopedCapabilityItem.disabled
   sets opacity .62). The one sentence explaining WHY it is off must stay
   readable — undim just the status line. */
.scopedCapabilityItem.disabled .connectionStatus {
  opacity: 1;
  color: var(--ink);
}

/* Per-action switches: the writable half of connectorGuardrailText. The global
   `input { width: 100% }` rule at the top of this file would otherwise render
   every checkbox as a full-width bordered box. */
.toolPolicyApp {
  display: block;
}

.toolPolicyActions {
  display: grid;
  /* min() so the track can shrink below its floor on narrow screens — a bare
     220px minimum re-opens the #186 horizontal-overflow bug. */
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: 6px 14px;
  margin: 10px 0 4px;
}

.toolPolicyAction {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 8px;
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink);
}

.toolPolicyAction input[type="checkbox"] {
  width: auto;
  min-width: 0;
  margin: 2px 0 0;
  padding: 0;
  background: none;
}

.toolPolicyAction strong {
  font-size: 12px;
  font-weight: 600;
}

.toolPolicyAdvanced {
  margin-top: 12px;
}

/* The connector pane used to render every security switch and every catalog
   entry at once, making the common “sign in / test this app” path several
   screens tall. These disclosures keep the current posture visible in one
   line while preserving the full controls on demand. */
.settingsDisclosure {
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: var(--window);
  overflow: clip;
}

.settingsDisclosure > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 9px 12px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  border-radius: 8px;
}

.settingsDisclosure > summary::-webkit-details-marker {
  display: none;
}

.settingsDisclosure > summary::before {
  content: "›";
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform 120ms ease;
}

.settingsDisclosure[open] > summary::before {
  transform: rotate(90deg);
}

.settingsDisclosure > summary > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.settingsDisclosure > summary > .settingsStateMarker {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--canvas);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 650;
  white-space: nowrap;
}

.settingsDisclosure > summary > .settingsStateMarker.changed {
  border-color: color-mix(in srgb, var(--accent, #4b6bfb) 45%, var(--line));
  background: color-mix(in srgb, var(--accent, #4b6bfb) 10%, var(--canvas));
  color: var(--accent-ink, #5548c8);
}

.settingsDisclosure > summary strong {
  font-size: 12.5px;
  font-weight: 650;
}

.settingsDisclosure > summary span span {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 400;
  overflow-wrap: anywhere;
}

.settingsDisclosure > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.settingsDisclosure[open] > summary {
  border-bottom: 1px solid var(--line-soft);
  border-radius: 8px 8px 0 0;
}

.settingsDisclosureBody {
  display: grid;
  gap: 12px;
  padding: 12px;
}

.settingsDisclosure:not([open]) > .settingsDisclosureBody {
  display: none;
}

.settingsDisclosureBody > .settingsScopeNote:first-child {
  margin-top: 0;
}

.mcpCatalogDisclosure #mcpCatalogList {
  max-height: min(48vh, 480px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}

.mcpCatalogDisclosure:not([open]) + .scopeGrantPanel {
  margin-top: 0;
}

/* <details> is not a grid container, so nested form fields would butt flush
   together and read as one field with four boxes. */
#mcpOauthAdvanced > label {
  margin-top: 10px;
}

.connectionGuardrail {
  font-size: 11px;
  color: var(--accent-ink);
}

/* "Anything you add here is available to…" — the consequence of the scope
   picker above, spelled out where the adding actually happens (#227). */
.settingsScopeNote {
  margin-top: 8px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  background: var(--accent-faint);
  border: 1px solid var(--line-soft);
  font-size: 11.5px;
  color: var(--muted);
}

/* Provider-side cliff warning (TES-192): key expiry / provider spend ceiling.
   Amber on approach, red once the limit is reached or the key is dead. Muted
   (the inherited .settingsScopeNote look) when the state is merely unknown —
   an unknown must not be dressed up as either fine or urgent. */
.providerKeyHealthNote.warn {
  background: rgba(188, 126, 0, .14);
  border-color: rgba(188, 126, 0, .38);
  color: var(--status-warn-ink);
}

.providerKeyHealthNote.critical {
  background: rgba(255, 87, 101, .14);
  border-color: rgba(255, 87, 101, .38);
  color: var(--status-danger-ink);
}

.connectionEmpty {
  display: grid;
  justify-items: start;
  gap: 6px;
  padding: 18px 16px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  background: var(--window);
}

.connectionEmpty strong {
  font-size: 13.5px;
  color: var(--ink);
}

.connectionEmpty p {
  margin: 0;
  max-width: 62ch;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

/* ============================================================================
   MOBILE CONVERSATION — "focused companion" (#189/#156)
   Everything below intentionally OVERRIDES the responsive-squeeze rules above.
   The phone is not a shrunk three-pane console: it is for reading a run,
   seeing its status at a glance, and sending the next message. Advanced
   actions live behind one overflow control; the desktop chrome is put away.
   Appended last so it wins on conflicts without raising specificity.
   ============================================================================ */
@media (max-width: 780px) {
  /* Full-bleed: drop the desktop card (margin/border/radius/shadow) so the
     conversation owns the whole width instead of floating in a boxed console. */
  .appShell.leftPaneCollapsed .conversationPane,
  .appShell.leftPaneCollapsed.rightPaneCollapsed .conversationPane,
  .conversationPane {
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--canvas);
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  /* ---- Header: one slim bar. Back · Title · overflow. ---------------------- */
  .conversationHeader {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    min-height: 52px;
    padding: 6px 6px 6px 4px;
    padding-top: max(6px, env(safe-area-inset-top));
    border-bottom: 1px solid var(--line-soft);
    background: var(--conversation-header-background, var(--canvas));
    position: sticky;
    top: 0;
    z-index: 6;
  }
  .conversationTitleGroup {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Back control: iOS-style chevron + "Contexts", not a heavy filled pill. */
  #toggleLeftPane.paneToggleButton {
    flex: 0 0 auto;
    gap: 1px;
    padding: 8px 6px 8px 4px;
    background: none;
    border: 0;
    color: var(--accent-ink);
    font-weight: 600;
  }
  #toggleLeftPane .paneToggleIcon { display: none; }
  #toggleLeftPane .paneBackLabel {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    font-size: 15px;
    color: var(--accent-ink);
  }
  #toggleLeftPane .paneBackChevron { width: 20px; height: 20px; }

  /* Title: single truncating line, tappable target for detail later. */
  .conversationTitleGroup .titleRow {
    flex: 1 1 auto;
    min-width: 0;
    gap: 6px;
  }
  .conversationHeader h2 {
    font-size: 16px;
    font-weight: 650;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .conversationTitleGroup .pinIcon { font-size: 11px; flex: 0 0 auto; }
  /* The meta line and presence move off the header — they live in the status
     strip and (later) a details sheet, so the bar stays one clean row. */
  .conversationHeader #activeMeta,
  .conversationHeader .presenceBar,
  .conversationHeader #branchFamilyPopover { display: none; }

  /* Toolbar collapses to a single overflow control; the rest is in its menu
     (app.js seeds export/share/connect/schedule into #toolbarMoreMenu). */
  .conversationHeader .toolbarActions {
    width: auto;
    flex: 0 0 auto;
    gap: 0;
    flex-wrap: nowrap;
  }
  .conversationHeader .toolbarActions > button:not(#toolbarMore),
  .conversationHeader .toolbarActions .toolbarOverflowTarget,
  .conversationHeader #scheduleContext,
  .conversationHeader #toggleRightPane {
    display: none;
  }
  .conversationHeader .toolbarActions button:not(.paneToggleButton) {
    flex: 0 0 auto;
  }
  .conversationHeader #toolbarMore {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 20px;
    line-height: 1;
    border-radius: 12px;
  }

  /* ---- Status strip: one quiet, non-wrapping line, not a wall of stats. ---- */
  .threadMeta {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding: 7px 12px;
    min-height: 0;
    font-size: 12px;
    border-bottom: 1px solid var(--line-soft);
  }
  .threadMeta::-webkit-scrollbar { display: none; }
  .threadMeta > span { flex: 0 0 auto; white-space: nowrap; }
  /* Keep the actionable run chip and the three numbers that matter; the rest is
     desktop detail that just crowds the phone. */
  .threadMeta #contextPacketStatus,
  .threadMeta #activeSource,
  .threadMeta #activeSchedule { display: none; }

  /* ---- Timeline: a conversation, not a console dump. ---------------------- */
  .timelineArea { min-height: 0; }
  .timeline {
    padding: 14px 14px calc(18px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .event {
    margin: 0 0 14px;
    padding: 0;
  }
  .eventTimestampRail { display: none; }        /* desktop hover rail */
  .event .eventMeta { display: none; }           /* raw evt_ id is dev noise */
  .eventHeader {
    gap: 8px;
    margin-bottom: 4px;
    align-items: baseline;
  }
  .eventRole {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
  }
  .eventTime { font-size: 12px; color: var(--subtle); }
  .eventText {
    font-size: 16px;
    line-height: 1.5;
  }

  /* User turns: a compact accent-tinted bubble, right-aligned, so the eye can
     instantly tell "me" from "the assistant" while scrolling. */
  .event.userEvent {
    align-self: flex-end;
    max-width: 88%;
    background: var(--accent-soft);
    border-radius: 16px 16px 4px 16px;
    padding: 9px 13px;
  }
  .event.userEvent .eventHeader { display: none; }
  .event.userEvent .eventText { color: var(--accent-ink); }

  /* Assistant turns: full reading width, quiet role tag, no box — the content
     is the hero. */
  .event.assistantEvent { align-self: stretch; max-width: 100%; }
  .event.assistantEvent .eventRole { color: var(--accent-ink); }

  /* Tool / system: compact, muted, secondary. */
  .event.toolEvent,
  .event.systemEvent {
    align-self: stretch;
    background: var(--line-soft);
    border-radius: 12px;
    padding: 8px 12px;
  }
  .event.toolEvent .eventText,
  .event.systemEvent .eventText { font-size: 14px; color: var(--muted); }

  /* ---- Composer: a docked bar, safe-area aware, not a floating card. ------ */
  .composer {
    margin: 0;
    border: 0;
    border-top: 1px solid var(--line-soft);
    border-radius: 0;
    box-shadow: none;
    background: var(--conversation-header-background, var(--canvas));
    padding: 8px 10px;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    gap: 8px;
  }
  .composer textarea {
    rows: 2;
    min-height: 40px;
    max-height: 40vh;
    font-size: 16px;             /* >=16px stops iOS zoom-on-focus */
    border-radius: 14px;
    padding: 10px 12px;
  }
  .composer .composerBar {
    gap: 8px;
    align-items: center;
  }
  .composer .modelPill {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .composer .composerActions { flex: 0 0 auto; gap: 6px; }
}

/* Mobile conversation — refinements (iterated against the design canvas). */
@media (max-width: 780px) {
  /* Assistant prose: paragraphs and lists had desktop-scale margins that read
     as a big empty gap on a phone. Tighten the rhythm to reading spacing. */
  .event.assistantEvent .eventText > * { margin-block: 0; }
  .event.assistantEvent .eventText > * + * { margin-top: 9px; }
  .event.assistantEvent .eventText ul,
  .event.assistantEvent .eventText ol { padding-inline-start: 22px; }
  .event.assistantEvent .eventText li + li { margin-top: 4px; }

  /* Status strip: read as one quiet sentence of the numbers that matter.
     The run chip stays a tappable affordance; the rest are plain muted text. */
  .threadMeta { align-items: center; color: var(--muted); }
  .threadMeta .runChip {
    padding: 4px 11px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
  }
  .threadMeta > span { color: var(--muted); font-variant-numeric: tabular-nums; }
  .threadMeta #contextCostStatus { color: var(--ink); font-weight: 600; }

  /* Composer: a tidy single row of controls — model on the left taking the
     slack, Log/Run pinned right. Textarea sits above at a calm default height. */
  .composer .composerBar { justify-content: space-between; width: 100%; }
  .composer textarea {
    height: 46px;
    min-height: 46px;
  }
  .composer textarea:focus { height: auto; }
  .composer .modelPill {
    text-align: left;
    padding: 8px 12px;
    font-size: 13px;
    border-radius: 11px;
  }
  .composer .composerActions button {
    padding: 8px 14px;
    font-size: 14px;
    border-radius: 11px;
  }

  /* The context pin reads more clearly as a small lead accent before the title
     than floating mid-bar; nudge it tight to the title. */
  .conversationTitleGroup .titleRow { gap: 5px; }
  .conversationTitleGroup .pinIcon { color: var(--accent-ink); opacity: 0.9; }
}

/* Mobile conversation — final polish. */
@media (max-width: 780px) {
  /* The pin marker reads ambiguously wedged between the back control and the
     title; drop it on the phone where header space is the scarcest resource. */
  .conversationHeader .titleRow .pinIcon { display: none; }
  /* Compact composer placeholder: the desktop sentence clips at 46px. */
  .composer textarea::placeholder { font-size: 15px; }
}

/* Standing credential authorizations listed in the schedule inspector. */
.scheduleCredentialGrants {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line, rgba(255, 255, 255, 0.1));
}
.scheduleCredentialGrantsLabel {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 6px;
}
.scheduleCredentialGrant {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  padding: 4px 0;
}
.scheduleCredentialGrant button {
  flex: none;
  font-size: 12px;
  padding: 3px 10px;
}

/* TES-127: MFA prompt modal and enrolment card. */
.mfaPromptOverlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 8, 20, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
}
.mfaPrompt {
  background: var(--panel, #16162a);
  border: 1px solid var(--line, rgba(255, 255, 255, 0.12));
  border-radius: 12px;
  padding: 20px;
  width: min(360px, calc(100vw - 48px));
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mfaPromptTitle { font-weight: 700; }
.mfaPromptMessage { font-size: 13px; opacity: 0.85; line-height: 1.45; }
.mfaPromptInput {
  font-size: 20px;
  letter-spacing: 0.2em;
  text-align: center;
  padding: 8px 10px;
  width: 100%;
  box-sizing: border-box;
}
.mfaPromptActions { display: flex; gap: 8px; justify-content: flex-end; }
.mfaEnrolBox { display: flex; flex-direction: column; gap: 8px; }
.mfaSecret {
  font-size: 15px;
  letter-spacing: 0.08em;
  padding: 8px 10px;
  user-select: all;
  word-break: break-all;
}
.mfaOtpauthLink { font-size: 13px; }
.mfaConfirmRow { display: flex; gap: 8px; align-items: center; }
.mfaConfirmRow .mfaPromptInput { width: 140px; }

/* TES-72 step 4. One row per connected account. Kept visually quiet: the
   common case is a single connection, and a list that shouted would make the
   ordinary setup look more complicated than it is. */
.mcpConnectionList {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.mcpConnection {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}

.mcpConnectionWho {
  font-weight: 500;
}

.mcpConnectionShared {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--border, rgba(127, 127, 127, 0.35));
}

.mcpConnection button {
  font-size: 11px;
  padding: 2px 8px;
}

/* TES-199: the waiting state a non-addressee sees instead of approve/deny. */
.accessRequestWaiting {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--surfaceMuted, rgba(127, 127, 127, 0.08));
}
.accessRequestWaitingWho { font-weight: 600; }
.accessRequestWaitingWhy { opacity: 0.75; font-size: 0.9em; }
.accessRequestUses { font-weight: 600; }

/* TES-74/165: per-rule feedback under a guardrail textarea. Green says what the
   sentence will actually do; red says why it cannot be enforced and what to
   write instead. */
.guardrailFeedback {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: -4px;
  font-size: 0.9em;
  line-height: 1.4;
}
.guardrailFeedback > div {
  display: flex;
  gap: 6px;
  align-items: baseline;
}
.guardrailMark { flex: none; font-weight: 700; }
.guardrailOk .guardrailMark { color: var(--good, #2e7d32); }
.guardrailBad .guardrailMark { color: var(--danger, #c62828); }
.guardrailBad { color: var(--danger, #c62828); }
.guardrailBad em { font-style: normal; opacity: 0.85; }

/* TES-142: the five kinds of action, as switches. */
.toolPolicyVerbs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 6px 0;
}

/* Three-level rules (2026-07-29 spec). */
.guardrailNudge {
  display: flex; flex-direction: column; gap: 10px;
  background: color-mix(in srgb, var(--yellow, #e7b13d) 14%, transparent);
  border-radius: 8px; padding: 10px 14px; font-size: 13px;
}
.guardrailNudgeRow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.guardrailNudgeLabel { font-size: 12px; font-weight: 650; }
.guardrailChip {
  border: 1px solid var(--line, #e1e4ef); background: var(--canvas, #fff);
  border-radius: 20px; padding: 4px 12px; font-size: 12.5px; font-weight: 600;
  color: var(--accent-ink, #5548c8); cursor: pointer;
}
.guardrailChip:hover { border-color: var(--accent, #6e62e5); background: var(--accent-soft, #f0eefc); }
.guardrailNudgeSkip {
  border: none; background: none; color: var(--muted, #676e7d);
  font-size: 12.5px; cursor: pointer; text-decoration: underline; padding: 2px 4px;
}
.guardrailTier { border: 1px solid var(--line, #e1e4ef); border-radius: 10px; margin-top: 10px; overflow: hidden; }
.guardrailTierHead {
  display: flex; align-items: center; gap: 8px; padding: 7px 12px;
  background: var(--line-soft, #eef0f7); font-weight: 640; font-size: 12.5px;
}
.guardrailTierBody { padding: 10px 12px; }
.guardrailTierBody textarea { width: 100%; box-sizing: border-box; resize: vertical; }

/* Rule boxes and their compile feedback span the grant form's full row.
   Without this they are grid children of a 3-column form and land in the
   first (narrow) track — a tall skinny stack beside an empty panel. */
.scopeGrantForm .scopeGrantRules,
.scopeGrantForm .guardrailFeedback {
  grid-column: 1 / -1;
}

/* Feedback entries use the width: side-by-side, wrapping, each capped at a
   readable measure instead of one word-wide column. */
.guardrailFeedback {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px 22px;
}
.guardrailFeedback > div {
  flex: 0 1 auto;
  max-width: 62ch;
}

/* The in-window rules stack (spec panel D): every rule that applies to one
   app or sign-in in the ACTIVE window, tagged with the level it comes from. */
.ruleStack {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 6px;
  align-items: center;
}
.ruleStackItem {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink);
  background: var(--line-soft, #eef0f7);
  border-radius: 14px;
  padding: 3px 10px 3px 4px;
  max-width: 62ch;
}
.ruleLvl {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 12px;
  padding: 2px 7px;
  white-space: nowrap;
}
.ruleLvl.always { background: var(--brand-navy, #0e1633); color: #fff; }
.ruleLvl.group { background: var(--accent-soft, #f0eefc); color: var(--accent-ink, #5548c8); }
.ruleLvl.window { background: color-mix(in srgb, var(--accent-blue, #3364dd) 14%, transparent); color: var(--accent-blue, #3364dd); }
.ruleStackEmpty {
  background: color-mix(in srgb, var(--yellow, #e7b13d) 16%, transparent);
  color: var(--ink);
  padding: 3px 10px;
}
.ruleStackAdd {
  border: 1px dashed var(--line, #e1e4ef);
  background: none;
  color: var(--muted, #676e7d);
  border-radius: 14px;
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
}
.ruleStackAdd:hover { border-color: var(--accent, #6e62e5); color: var(--accent-ink, #5548c8); }
.ruleStackForm { display: inline-flex; gap: 6px; align-items: center; }
.ruleStackForm input { font-size: 12.5px; padding: 4px 8px; min-width: 280px; }

/* Account chooser: username leads, supporting detail on a second line. Three
   sign-ins to the same site are only tellable apart if the card says who each
   one signs in AS. */
.credentialChoiceOption {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
}
.credentialChoiceName { font-weight: 640; }
.credentialChoiceDetail { font-size: 12px; opacity: 0.75; }
.credentialChoiceHelp { margin-top: 4px; }

/* TES-65/60: Settings → Server operations surfaces (live workload monitor and
   capacity dashboard). Wide tables scroll inside their own wrapper. */
.runMonitorTableWrap {
  overflow-x: auto;
  border: 1px solid var(--hairline);
  border-radius: 8px;
}

.runMonitorTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  color: var(--muted);
}

.runMonitorTable th,
.runMonitorTable td {
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}

.runMonitorTable tbody tr:last-child td {
  border-bottom: none;
}

.runMonitorTable code {
  font-size: 11px;
}

.storageDashboardRow {
  padding: 8px 12px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  font-size: 12px;
  color: var(--muted);
}

.storageDashboardRow.warn {
  border-color: var(--warning, #b98900);
}

.storageDashboardAlert {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  border: 1px solid var(--warning, #b98900);
}

.storageDashboardAlert.critical {
  border-color: var(--danger, #c0392b);
  color: var(--danger, #c0392b);
}

/* TES-259/260: Server tab operations redesign — health band, operable
   workload rows with a forensics drawer, org limits table. Tones reuse the
   app palette so light/dark theming follows the existing variables. */
.opsHealthBand {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

@media (max-width: 760px) {
  .opsHealthBand { grid-template-columns: repeat(2, 1fr); }
}

.opsTile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 8px);
  background: var(--canvas);
}

.opsTileLabel {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--subtle);
}

.opsTileValue {
  font-size: 19px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.opsTileValue small {
  font-size: 12px;
  font-weight: 500;
  color: var(--subtle);
}

.opsTileNote { font-size: 12px; }

.opsPill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  white-space: nowrap;
  color: var(--muted);
  background: var(--paper);
  border: 1px solid var(--line);
}

.opsPillDot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.opsPill.good { color: var(--status-good-ink); background: color-mix(in srgb, var(--green) 12%, transparent); border-color: transparent; }
.opsPill.warn { color: var(--status-warn-ink); background: color-mix(in srgb, var(--yellow) 18%, transparent); border-color: transparent; }
.opsPill.serious { color: var(--status-danger-ink); background: color-mix(in srgb, var(--red) 12%, transparent); border-color: transparent; }

.opsChip {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 6px;
  margin-left: 6px;
  white-space: nowrap;
}

.opsChip.warn { color: var(--status-warn-ink); border-color: var(--status-warn-ink); }

.opsWho { display: inline-flex; flex-direction: column; gap: 1px; vertical-align: middle; }
.opsWho .opsName { font-weight: 600; color: var(--ink); }
.opsWho .opsMeta { font-size: 11px; color: var(--subtle); }
.opsCellFlex { display: inline-flex; align-items: center; }
.opsWindowTitle { color: var(--accent-ink); font-weight: 600; }

.opsAvatar {
  display: inline-flex;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 10px;
  font-weight: 700;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  flex: none;
}

.opsNum { text-align: right; font-variant-numeric: tabular-nums; }

.opsRowActions { display: inline-flex; gap: 6px; justify-content: flex-end; }

.opsButton,
.opsQuietButton,
.opsDangerButton {
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 7px;
  padding: 3px 9px;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--canvas);
  color: var(--ink);
}

.opsButton:hover { border-color: var(--accent); color: var(--accent-ink); }
.opsQuietButton { border-color: transparent; background: transparent; color: var(--accent-ink); }
.opsDangerButton:hover { border-color: var(--red); color: var(--red); }

.opsDrawer td { background: var(--paper); white-space: normal; }

.opsDrawerGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px 18px;
  padding: 2px 0;
}

.opsDrawerCell { display: flex; flex-direction: column; gap: 1px; }

.opsDrawerKey {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--subtle);
}

.opsDrawerValue {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  color: var(--muted);
  word-break: break-all;
}

.opsTable td { vertical-align: middle; }

/* TES-260: Organizations & limits — defaults bar, use-of-cap values, storage
   meters, override dots, inline edit row. */
.opsDefaults {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 22px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 8px);
  background: var(--paper);
  margin-bottom: 10px;
}

.opsDefaultsLabel {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--subtle);
  align-self: center;
}

.opsField { display: flex; flex-direction: column; gap: 3px; }
.opsField > span:first-child {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--subtle);
}
.opsField input,
.opsField select {
  font-size: 12.5px;
  padding: 5px 8px;
  width: 150px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--canvas);
  color: var(--ink);
}
.opsField .opsHint { font-size: 11px; color: var(--subtle); max-width: 44ch; }

.opsCapVal { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.opsCapVal .opsCapOf { color: var(--subtle); font-weight: 500; }
/* TES-288: names the limit that actually binds when it is not the one edited here. */
.opsCapNote { display: block; margin-top: 2px; font-size: 11px; font-weight: 500; color: var(--status-warn-ink); }

.opsOverrideDot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-left: 6px;
  vertical-align: 1px;
}

.opsMeter { display: inline-flex; flex-direction: column; gap: 3px; min-width: 140px; }
.opsMeterBar {
  position: relative;
  display: block;
  height: 7px;
  border-radius: 4px;
  background: var(--line-soft);
  overflow: hidden;
}
.opsMeterFill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 4px;
  background: var(--accent);
}
.opsMeterFill.warn { background: var(--orange); }
.opsMeterFill.serious { background: var(--red); }
.opsMeterText { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }

.opsEditRow td { background: var(--accent-faint); white-space: normal; }
.opsEditBar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 18px; }
.opsEditBar button { font-size: 12px; padding: 5px 11px; border-radius: 7px; border: 1px solid var(--line); background: var(--canvas); color: var(--ink); cursor: pointer; }
.opsEditBar button:hover { border-color: var(--accent); color: var(--accent-ink); }
.opsEditBar .opsQuietButton { border-color: transparent; background: transparent; color: var(--accent-ink); }

.opsWarnNote { color: var(--status-warn-ink); }

/* Inline code in Settings is instructional normal-size copy, not disabled
   chrome. It must remain readable over both canvas and paper surfaces. */
.settingsPane code {
  color: var(--ink);
}

/* TES-224 — the Access chip and panel: one visible place per window for what
   it can use. The chip follows the branchChip shape so the title row reads as
   one family; the panel reuses the shareDialog shell. */
.accessChip {
  flex: none;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--canvas);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
}

.accessChip:hover {
  border-color: var(--accent-soft);
  color: var(--accent-ink);
}

/* Something is blocked on a person: the chip says so rather than looking idle. */
.accessChip.waiting {
  border-color: color-mix(in srgb, var(--yellow, #e7b13d) 55%, transparent);
  background: color-mix(in srgb, var(--yellow, #e7b13d) 14%, transparent);
  color: var(--ink);
}

.accessPanel {
  width: min(1180px, calc(100vw - 36px));
  max-width: 1180px;
  height: min(840px, calc(100vh - 36px));
  max-height: calc(100vh - 36px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.accessPanelBody {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  max-height: none;
  padding: 16px 20px 24px;
  overflow-y: auto;
}

.accessWorkspaceHeader {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--canvas);
}

.accessWorkspaceHeader > div { display: grid; gap: 2px; }
.accessWorkspaceHeader strong { font-size: 17px; }
.accessWorkspaceHeader span { color: var(--muted); font-size: 12px; }
.accessWorkspaceFooter { padding: 10px 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }

.accessWorkspaceToolbar {
  position: sticky;
  top: -16px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  background: var(--canvas);
  border-bottom: 1px solid var(--line-soft);
}

.accessTabs { display: flex; flex-wrap: wrap; gap: 5px; }
.accessTabs button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.accessTabs button span { min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--line-soft); font-size: 10.5px; }
.accessTabs button.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--accent-ink); font-weight: 650; }

.accessWorkspaceCommands { display: flex; align-items: center; gap: 8px; }
.accessWorkspaceCommands input { width: min(300px, 30vw); }

.accessAddDrawer {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 4%, var(--canvas));
}
.accessAddDrawer[hidden] { display: none; }
.accessAddDrawer > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.accessAddDrawer h3, .accessSectionHeading h3 { margin: 0; font-size: 14px; }
.accessAddDrawer p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.accessCreateActions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }

.accessCatalog { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.accessCatalogGroup { min-width: 0; }
.accessCatalogGroup h4 { margin: 0 0 6px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.accessCatalogResource {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--canvas);
}
.accessCatalogResource > div { display: grid; min-width: 0; gap: 2px; }
.accessCatalogResource strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.accessCatalogResource span { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.accessAuthorizationEditor {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--canvas);
}
.accessAuthorizationEditor[hidden] { display: none; }
.accessAuthorizationEditor label { position: relative; display: grid; gap: 5px; font-size: 12px; }
.accessAuthorizationEditor fieldset { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 0; border: 1px solid var(--line); border-radius: 8px; }
.accessAuthorizationEditor fieldset label { display: flex; align-items: center; gap: 6px; }
.accessAuthorizationEditor textarea { resize: vertical; }
.accessEditorWide, .accessEditorHeading { grid-column: 1 / -1; }
.accessEditorHeading h3 { margin: 0; font-size: 14px; }
.accessEditorHeading p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.fieldSuffix { position: absolute; right: 9px; bottom: 7px; color: var(--muted); }

.accessActiveSection, .accessRequestsSection { display: grid; gap: 9px; }
.accessSectionHeading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.accessSectionHeading span { color: var(--muted); font-size: 12px; }
.accessAuthorizationRow { background: var(--canvas); }
.accessResourceFacts { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 7px; color: var(--muted); font-size: 11.5px; }
.accessResourceFacts strong { color: var(--ink); font-weight: 600; }
.accessRestrictionList { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.accessRestrictionList span { padding: 2px 7px; border-radius: 999px; background: var(--line-soft); color: var(--muted); font-size: 11px; }
.accessEmptyState { grid-column: 1 / -1; padding: 16px; border: 1px dashed var(--line); border-radius: 9px; color: var(--muted); text-align: center; font-size: 12.5px; }

.accessGrantEditor {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(100px, 0.35fr);
  gap: 9px 12px;
  background: color-mix(in srgb, var(--accent-soft) 9%, transparent);
}

.accessGrantEditor .accessRowMain,
.accessGrantEditor .accessRowActions,
.accessGrantEditor .accessGrantLimits {
  grid-column: 1 / -1;
}

.accessGrantEditor label { display: grid; gap: 4px; font-size: 12px; }
.accessGrantEditor label:has(input[type="checkbox"]) { display: flex; align-items: center; }
.accessGrantLimits { display: grid; grid-template-columns: repeat(4, minmax(85px, 1fr)); gap: 8px; }

.accessRow {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}

/* A row the runtime would refuse today reads as muted, never as available. */
.accessRow.inactive {
  opacity: 0.62;
}

.accessRow.pending {
  border-color: color-mix(in srgb, var(--yellow, #e7b13d) 55%, transparent);
  background: color-mix(in srgb, var(--yellow, #e7b13d) 10%, transparent);
}

.accessRowMain {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
}

.accessRowMeta {
  color: var(--muted);
  font-size: 12px;
  margin-top: 3px;
}

.accessKind,
.accessActsAs,
.accessExpiry {
  font-size: 12px;
  color: var(--muted);
}

.accessActsAs {
  font-weight: 600;
}

.accessExpiry.danger {
  color: var(--danger, #c0392b);
  font-weight: 650;
}

.accessUnusable {
  font-size: 11.5px;
  font-weight: 650;
  color: var(--danger, #c0392b);
  border: 1px solid color-mix(in srgb, var(--danger, #c0392b) 40%, transparent);
  border-radius: 999px;
  padding: 1px 8px;
}

.accessNotice {
  background: color-mix(in srgb, var(--yellow, #e7b13d) 16%, transparent);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
}

.accessCardLink {
  border: none;
  background: none;
  color: var(--accent-ink, #5548c8);
  font-weight: 650;
  font-size: 12.5px;
  cursor: pointer;
  padding: 4px 0 0;
}

.ruleStackNote {
  font-size: 11.5px;
  color: var(--muted);
  font-style: italic;
}

/* Deep-linking to a pending card: a brief highlight so the reader lands on it. */
.eventFlash {
  animation: eventFlashPulse 1.6s ease-out;
}

@keyframes eventFlashPulse {
  0% { background-color: color-mix(in srgb, var(--yellow, #e7b13d) 30%, transparent); }
  100% { background-color: transparent; }
}

/* TES-224 write half: the per-row action strip. Buttons only ever render when
   the server said the reader may perform them, so there is no disabled/inert
   state to style -- only the in-flight one. */
.accessRowActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.accessRowActions button {
  font-size: 12.5px;
  padding: 4px 10px;
  border-radius: 7px;
  border: 1px solid var(--border, #d9d6ea);
  background: var(--surface, #fff);
  color: inherit;
  cursor: pointer;
}
.accessRowActions button:hover:not(:disabled) {
  border-color: var(--accent, #6e62e5);
  color: var(--accent-ink, #5548c8);
}
.accessRowActions button:disabled {
  opacity: 0.55;
  cursor: progress;
}
.accessRowActions button.accessDanger:hover:not(:disabled) {
  border-color: var(--danger, #c8442e);
  color: var(--danger, #c8442e);
}
.accessRowError {
  font-size: 12px;
  color: var(--danger, #c8442e);
  flex: 1 1 100%;
}
.accessRowError:empty { display: none; }

@media (max-width: 820px) {
  .accessPanel { width: calc(100vw - 12px); height: calc(100dvh - 12px); max-height: calc(100dvh - 12px); }
  .accessWorkspaceToolbar, .accessAddDrawer > header { align-items: stretch; flex-direction: column; }
  .accessWorkspaceCommands { width: 100%; }
  .accessWorkspaceCommands label { flex: 1; }
  .accessWorkspaceCommands input { width: 100%; }
  .accessCatalog { grid-template-columns: 1fr; }
  .accessAuthorizationEditor { grid-template-columns: 1fr; }
  .accessAuthorizationEditor > * { grid-column: 1; }
  .accessGrantLimits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .accessCreateActions { justify-content: flex-start; }
}

/* TES-132: this gate is intentionally last and important. Component rules such
   as `.navCommand` and `.navigatorActions .iconButton` previously won the
   cascade even though a source-text gate found a later `button` rule. This is
   the release-level computed-size guarantee for phone controls. */
@media (max-width: 780px) {
  button:not([hidden]),
  [role="button"]:not([hidden]) {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  select:not([hidden]),
  input:not([hidden]):not([type="checkbox"]):not([type="radio"]),
  summary,
  label:has(input[type="checkbox"]),
  label:has(input[type="radio"]) {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .conversationHeader #toolbarMore,
  #settingsClose,
  #notificationsBell,
  #settingsButton,
  .mobileSheetClose {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
  }

  .toolbarMoreMenu button {
    min-height: 44px !important;
  }

  /* The import picker becomes one vertically scrollable phone surface. Its
     desktop three-column grid cannot fit at 360px, and at very short heights
     independent scroll panes strand row actions below clipped headers. */
  #importPanel.settingsOverlay {
    overflow: hidden;
  }

  .importSurface {
    width: 100%;
    max-width: 100%;
    height: calc(100dvh - 20px);
    max-height: calc(100dvh - 20px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .importSurfaceHeader {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
    gap: 8px;
    padding: 10px;
  }

  .importSurfaceHeader > div {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  .importSurfaceHeader .importDestination {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
  }

  .importSurfaceHeader .importDestination select {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
  }

  #importSurfaceClose {
    grid-column: 2;
    grid-row: 1;
  }

  .importSurfaceBody,
  .importSurfaceBody:has(.importSurfaceDetail:not([hidden])) {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: visible;
  }

  .importSourceRail {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
    padding: 8px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    overflow: visible;
  }

  .importSourceRail button,
  .importSourceRail .railNote {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .importSurfaceMain,
  .importSurfaceDetail {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    overflow: visible;
  }

  .importSurfaceDetail {
    padding: 10px;
    border-left: 0;
  }

  .importSurfaceBody:has(.importSurfaceDetail:not([hidden])) > .importSourceRail,
  .importSurfaceBody:has(.importSurfaceDetail:not([hidden])) > .importSurfaceMain {
    display: none;
  }

  .importSearchRow,
  .importDiscoveryActions,
  .importSurfaceActions {
    min-width: 0;
    flex-wrap: wrap;
  }

  .importSearchRow input {
    min-width: 0;
  }

  .importDiscoveryActions {
    margin-left: 0;
  }

  .importSessionRow {
    grid-template-columns: minmax(44px, auto) minmax(0, 1fr);
    gap: 6px 8px;
  }

  .importSessionRow .sourceBadges {
    grid-column: 2;
    justify-self: start;
    justify-content: flex-start;
    min-width: 0;
  }

  .importSessionRow > [data-open-capsule] {
    grid-column: 1 / -1;
    width: 100%;
  }

  .importSurfaceFooter {
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: stretch;
    min-width: 0;
    padding: 10px;
  }

  .importSurfaceQueue,
  .importSurfaceActions {
    flex: 1 1 100%;
    width: 100%;
  }

  .importSurfaceSummary {
    flex: 1 1 120px;
    min-width: 0;
  }

  /* Links that perform Settings actions are controls too. Inline anchors do
     not honor min-height, so make their full 44px target explicit on phones. */
  .settingsPane a[href]:not([aria-disabled="true"]),
  :where([role="dialog"], [role="alertdialog"]) a[href]:not([aria-disabled="true"]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px !important;
    min-height: 44px !important;
  }
}