/* 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;
  --subtle: #979eb0;
  --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;
  --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;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--window);
  color: var(--ink);
  font-family: Hind, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", 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: not-allowed;
  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 {
  opacity: 0.55;
}

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: #788195;
}

.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 {
  background: rgba(0, 0, 0, 0.06);
}

.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;
}

.settingsOverlay[hidden] {
  display: none;
}

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

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

.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);
}

.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;
}

.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);
  overflow: hidden;
}

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

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

.settingsNavGroup {
  padding: 12px 10px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--subtle);
}

.settingsNavGroup:first-child {
  padding-top: 2px;
}

.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);
  font-weight: 600;
}

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

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

.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 {
  cursor: pointer;
  color: var(--muted);
  border-radius: 4px;
}

.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;
}

.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 {
  padding: 6px 14px;
  border: 1px solid var(--accent, #2f5adf);
  border-radius: 999px;
  background: transparent;
  color: var(--accent, #2f5adf);
  font: inherit;
  font-size: 13px;
  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;
}

.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;
}

.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],
.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, #2f5adf);
  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: wrap;
    gap: 4px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 10px;
  }
  .settingsNavGroup {
    flex-basis: 100%;
    padding: 6px 4px 2px;
  }
  .settingsNavItem {
    width: auto;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
  }
}

.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;
}

.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;
}

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

.notificationRow {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-bottom: 1px solid var(--hairline, #d9dbe3);
  background: none;
  text-align: left;
  cursor: pointer;
  color: var(--ink, #1c1e26);
}

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

.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;
}

.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;
}

.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;
}

.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);
}

.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;
}

.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 {
  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;
}

.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;
}

.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;
}

.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;
}

/* 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;
}

.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);
}

.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;
}

.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;
}

.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;
}

.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(--orange);
  font-size: 12px;
}

.toolToggle input {
  width: auto;
}

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

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

.dangerButton {
  min-width: 54px;
  border-color: #e0aaa7;
  background: #fff8f7;
  color: var(--red);
}

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

.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;
}

.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;
}

.artifactViewerClose {
  flex: 0 0 auto;
}

.artifactViewerFrame {
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--canvas);
}

.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 (max-width: 780px) {
  .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;
  }

  .secretField,
  .adminGrid,
  .inviteCreateForm,
  .inviteLinkRow,
  .membershipEditor,
  .credentialEditor,
  .credentialGrantGrid,
  .mcpEditor {
    grid-template-columns: minmax(0, 1fr);
  }

  .credentialEditor .credentialWide,
  .credentialGrantGrid .checkboxLine,
  .credentialGrantGrid .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;
  }
}


.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;
  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. */
.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;
}

.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;
}

.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);
}

/* 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;
  left: 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);
}
.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;
}
.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: #737d99;
  --line: #2c3350;
  --line-soft: #222842;
  --active: #29305a;
  --accent: #8b80f0;
  --accent-ink: #b0a7ff;
  --accent-soft: #272a4d;
  --accent-faint: #1b2038;
  --paper: #10152a;
  --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"] .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;
}
:root[data-theme="dark"] .conversationPane {
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.35);
}
: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);
}
: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;
  justify-content: space-between;
  gap: 12px;
}

.shareCreateRow input {
  width: 64px;
}

.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); }
}

@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);
}

/* --- 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;
  cursor: pointer;
}

.importSessionRow:hover { background: color-mix(in srgb, currentColor 5%, transparent); }
.importSessionRow.selected { border-color: var(--accent); }
.importSessionRow.imported { opacity: 0.75; }

.importSessionRow > input[type="checkbox"] { margin: 0; }
.importSessionRow .rowMain { min-width: 0; }
.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;
}

.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; }
.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); }

.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;
  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 ---------------------------------------- */
.onboardingSheet {
  display: flex;
  flex-direction: column;
  width: min(560px, 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: 16px 20px 0;
}
.onboardingProgress { display: flex; gap: 6px; }
.onboardingDot {
  width: 22px; height: 5px; 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); }
.onboardingBody { padding: 12px 24px 8px; overflow-y: auto; }
.onboardingBody h2 { margin: 8px 0 6px; font-size: 22px; text-wrap: balance; }
.onboardingLead { margin: 0 0 16px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.onboardingField { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; font-size: 13px; color: var(--muted); }
.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; }
.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;
}