/* Base tokens — the default look (incl. the "数字员工工作台" redesign from
   PR #123) is layered later in this file. Skins override these per [data-skin]. */
:root {
  color-scheme: light;
  --bg: #f4f6f8;
  --bg-soft: #eef2f5;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-muted: #f8fafc;
  --fg: #18202a;
  --muted: #627084;
  --faint: #7b8798;
  --border: #cbd4df;
  --border-soft: #dde4ec;
  --brand-accent: #646cea;
  --brand-accent-strong: #4d54d9;
  --brand-accent-bright: #8b91ff;
  --brand-accent-cyan: #62e6ff;
  --brand-accent-pink: #f080f0;
  --accent: #565ee4;
  --accent-strong: var(--brand-accent-strong);
  --accent-soft: rgba(100, 108, 234, 0.12);
  --success: #15803d;
  --success-soft: #e7f7ec;
  --warning: #b7791f;
  --warning-soft: #fff7df;
  --danger: #dc2626;
  --danger-soft: #feecec;
  --on-accent: #ffffff;
  --on-danger: #ffffff;
  --modal-shadow: 0 24px 80px rgba(0, 0, 0, 0.25);
  --modal-backdrop: rgba(10, 14, 18, 0.48);
  --qr-surface: #ffffff;
  --shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
  /* 圆角三档 + full，档位定义见下面第二个 :root（那份才是最终生效的）。 */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 999px;
  --radius-xs: var(--radius-sm);
  --radius-xl: var(--radius-lg);
  --radius: var(--radius-md);
  --button-height: 34px;
  --button-compact-height: 34px;
  --button-padding-x: 15px;
  --dropdown-trigger-width: 118px;
  --dropdown-popover-min-width: 156px;
  --page-title-row-height: 48px;
  --page-title-divider-gap: 14px;
  --section-title-row-height: 36px;
  --section-title-text-height: 24px;
  --section-title-content-gap: 8px;
  --section-title-dot-size: 7px;
  --section-title-font-size: 15px;
  --sidebar-width: 236px;
  --topbar-height: 60px;
  --topbar-control-size: 38px;
  --scrollbar-size: 10px;
  --scrollbar-track: transparent;
  --scrollbar-thumb: color-mix(in srgb, var(--muted) 22%, transparent);
  --scrollbar-thumb-hover: color-mix(in srgb, var(--muted) 42%, transparent);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1018;
  --bg-soft: #0e141d;
  --surface: #111821;
  --surface-raised: #17202c;
  --surface-muted: #0d141d;
  --fg: #cbd4df;
  --muted: #8793a4;
  --faint: #737f90;
  --border: #293443;
  --border-soft: #202a37;
  --accent: var(--brand-accent-bright);
  --accent-strong: #b5b9ff;
  --accent-soft: rgba(139, 145, 255, 0.17);
  --success: #58ca8d;
  --success-soft: rgba(88, 202, 141, 0.16);
  --warning: #dba84a;
  --warning-soft: rgba(219, 168, 74, 0.16);
  --danger: #d9788a;
  --danger-soft: rgba(217, 120, 138, 0.16);
  --on-accent: #111418;
  --on-danger: #111418;
  --modal-shadow: 0 24px 80px rgba(0, 0, 0, 0.52);
  --modal-backdrop: rgba(0, 0, 0, 0.62);
  --qr-surface: #ffffff;
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}

/* Named skins bring their own backdrop — hide PR #123's dark aurora overlay so
   it doesn't tint them (it stays for the default skin's dark mode). */
:root:not([data-skin="default"]):not([data-skin=""]) .aurora { display: none; }

* { box-sizing: border-box; }

* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

*::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

*::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb {
  min-height: 36px;
  border: 3px solid transparent;
  border-radius: var(--radius-full);
  background: var(--scrollbar-thumb);
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  background-clip: padding-box;
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

html.floating-scrollbars-on #app-root,
html.floating-scrollbars-on #app-root * {
  scrollbar-width: none;
}

html.floating-scrollbars-on #app-root::-webkit-scrollbar,
html.floating-scrollbars-on #app-root *::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

.floating-scrollbar-layer {
  position: fixed;
  inset: 0;
  z-index: 1500;
  pointer-events: none;
  contain: layout style size;
}

dialog .floating-scrollbar-layer {
  z-index: 2147483647;
}

.floating-scrollbar {
  position: fixed;
  pointer-events: none;
  opacity: 0;
  transition: opacity 140ms ease;
}

.floating-scrollbar:not([hidden]).is-visible {
  opacity: 0.54;
}

.floating-scrollbar:not([hidden]).is-active {
  opacity: 0.78;
}

.floating-scrollbar-thumb {
  border-radius: var(--radius-full);
  background: var(--scrollbar-thumb);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--surface) 70%, transparent);
}

.floating-scrollbar.is-active .floating-scrollbar-thumb,
.floating-scrollbar:hover .floating-scrollbar-thumb {
  background: var(--scrollbar-thumb-hover);
}

html,
body,
#app-root {
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  min-width: 320px;
  font: 14px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--fg);
  background: var(--bg);
}

a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .chrome-body,
  .sidebar,
  .sidebar-nav a,
  .sidebar-nav a span {
    transition: none !important;
  }
}

.connection-status {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 6px;
  height: var(--topbar-control-size);
  min-height: var(--topbar-control-size);
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--surface) 42%, transparent);
  white-space: nowrap;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: default;
  user-select: none;
}

.connection-status::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--brand-accent-cyan), var(--brand-accent), var(--brand-accent-pink));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.segmented button {
  min-height: 28px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.segmented button.active {
  background: var(--fg);
  color: var(--surface);
}

/* Theme dropdown — custom listbox so each option can show a real Lucide line
   icon (a native <select> can't render SVG). Sits with the other topbar chips. */
.theme-menu { position: relative; }

.theme-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s ease;
}
.theme-menu-btn:hover { border-color: var(--muted); }

.tm-svg { display: block; width: 15px; height: 15px; }
.theme-menu-btn .tm-chev .tm-svg { width: 14px; height: 14px; opacity: 0.6; }
.tm-ic { display: inline-flex; }

.theme-menu-pop {
  position: fixed;
  left: var(--theme-menu-pop-left, 50%);
  top: var(--theme-menu-pop-top, calc(var(--topbar-height) + 8px));
  z-index: 90;
  width: min(216px, calc(100vw - 24px));
  min-width: min(216px, calc(100vw - 24px));
  max-height: min(70vh, var(--theme-menu-pop-max-height, 460px));
  overflow: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--modal-shadow);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 6px);
  transition:
    opacity 110ms ease,
    transform 110ms ease;
}
.theme-menu-pop[hidden] { display: none; }

.theme-menu.open .theme-menu-pop {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
  animation: dashboard-popover-enter 0.35s ease both;
}

.tm-group {
  padding: 7px 8px 2px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}

.tm-group:not(:first-child) {
  margin-top: 3px;
}

.tm-item {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* override the base button{justify-content:center} */
  gap: 9px;
  width: 100%;
  min-height: var(--button-compact-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.tm-item .tm-svg {
  display: block;
  width: 16px;
  height: 16px;
  color: var(--muted);
  flex: 0 0 auto;
  stroke-width: 1.75;
}
.tm-item:hover {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  color: var(--accent-strong);
}
.tm-item.active {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--accent-strong);
}
.tm-item.active:hover {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}
.tm-item.active .tm-svg { color: var(--accent-strong); }

main {
  width: calc(100% + var(--chrome-x));
  /* 不设上限：收起侧栏腾出的宽度交还内容区（看板/表格都按容器弹性布局）。 */
  max-width: none;
  flex: 1;
  min-height: 0;
  margin-right: calc(-1 * var(--chrome-x));
  padding: 12px var(--chrome-x) 24px 0;
  overflow-x: hidden;
  overflow-y: auto;
}
main.overview-root {
  padding-bottom: 0;
}

main:has(.sessions-page) {
  padding-bottom: 0;
  overflow: hidden;
}

main:has(.sessions-page) .sessions-page {
  height: 100%;
  min-height: 0;
  /* rows: 标题 / 运行时统计 / 筛选栏 / 批量操作栏 / 视图舞台(占满剩余) */
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  overflow: hidden;
}

main:has(.sessions-page) .sessions-page:not(:has(#bulk-bar:not([hidden]))) {
  /* 批量操作栏隐藏(display:none 退出 grid)时少一行 */
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

main:has(.sessions-page) .sessions-view-stage {
  min-height: 0;
  overflow: hidden;
}

main:has(.sessions-page) .sessions-view-stage[data-view="table"],
main:has(.sessions-page) .sessions-view-stage[data-view="topics"] {
  overflow: auto;
}

main:has(.sessions-page) .sessions-kanban {
  padding: 0;
}

main:has(.groups-page) {
  padding-bottom: 0;
  overflow: hidden;
}

main:has(.groups-page) .groups-page {
  height: 100%;
  min-height: 0;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
}

main:has(.groups-page) .groups-page:has(> .hint-warn) {
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

main:has(.groups-page) .groups-matrix-section > #g-loading {
  height: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
}

@media (min-width: 721px) {
  main:has(.team-home-page) {
    padding-bottom: 0;
    overflow: hidden;
  }

  main:has(.team-home-page) .team-home-page {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    overflow: hidden;
  }

  main:has(.team-home-page) .team-roster-section {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: var(--section-title-row-height) minmax(0, 1fr);
    overflow: hidden;
  }

  main:has(.team-home-page) .team-roster-card {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    box-sizing: border-box;
  }

  main:has(.team-home-page) #tf-teams {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 4px;
  }

  main:has(.roles-page) {
    padding-bottom: 0;
    overflow: hidden;
  }

  main:has(.roles-page) .roles-page {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
  }

  main:has(.roles-page) .roles-layout {
    height: 100%;
    min-height: 0;
  }

  main:has(.roles-page) .roles-tree-panel,
  main:has(.roles-page) .roles-editor-panel {
    height: 100%;
    min-height: 0;
  }

  main:has(.schedules-page) {
    padding-bottom: 0;
    overflow: hidden;
  }

  main:has(.schedules-page) .schedules-page {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    overflow: hidden;
  }

  main:has(.schedules-page) .schedules-list-section,
  main:has(.schedules-page) .schedules-list-wrap {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  main:has(.schedules-page) .schedules-list {
    height: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

@keyframes dashboard-page-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes dashboard-popover-enter {
  from {
    opacity: 0;
    transform: translate(-50%, 6px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.page {
  display: grid;
  gap: 18px;
  animation: dashboard-page-enter 0.35s ease both;
}

@media (prefers-reduced-motion: reduce) {
  .page,
  .topbar-status-pop {
    animation: none !important;
  }
}

.page-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.page-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  max-width: 100%;
  padding-top: 1px;
  overflow: visible;
}

.page-primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border-radius: var(--radius-full);
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border-soft));
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.page-primary-action:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

.page-heading h1 {
  margin: 0;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: 0;
}

.page-heading p {
  margin: 6px 0 0;
  color: var(--muted);
  max-width: 720px;
}

.eyebrow {
  display: none !important;
}

.panel,
.metric-card,
.bd-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Team pages: reserve a stable 2-line height for the heading lede so switching
   between 我的团队 / 团队管理 (whose descriptions wrap to a different number of
   lines) doesn't shift the sub-nav below it — no more flash on tab switch. */
.tf-lede {
  min-height: 41px;
}

.panel {
  overflow: hidden;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-soft);
}

.panel-header h2 {
  margin: 0;
  font-size: 16px;
  letter-spacing: 0;
}

.panel-header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

/* Keep the "View all →" action on one line; let the title block shrink instead
   (narrow cards like schedules were wrapping the button onto two lines). */
.panel-header > div { min-width: 0; }
.panel-header .btn-link { white-space: nowrap; flex: 0 0 auto; }

.metric-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(140px, 1fr));
  gap: 12px;
}

.metric-card {
  padding: 14px 15px;
}

.metric-card span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.metric-card strong {
  display: block;
  margin-top: 6px;
  font-size: 28px;
  line-height: 1;
  letter-spacing: 0;
}

.metric-card small {
  display: block;
  margin-top: 8px;
  color: var(--faint);
  font-size: 12px;
}

/* Botmux total-RSS breakdown lines (self / external CLI) — tighter + quieter
   than the primary CPU small, and the parenthetical daemon·worker detail stays
   inline/normal-weight (overriding the bold block `.metric-card span` rule). */
.metric-card small.metric-breakdown {
  margin-top: 3px;
  font-size: 11px;
}

.metric-card .metric-breakdown-detail {
  display: inline;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
}

.metric-label-with-help {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.metric-card .metric-label-with-help > span {
  display: inline;
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.resource-strip {
  display: grid;
  grid-template-columns: minmax(132px, 1fr) repeat(4, max-content);
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
  padding: 10px 14px;
  color: inherit;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .16s ease, border-color .16s ease, background-color .16s ease;
}

.resource-strip:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  background: var(--surface-raised);
}

.resource-strip-title,
.resource-strip-metric {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.resource-strip-title {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.resource-strip-title em {
  color: var(--fg);
  font-style: normal;
  text-transform: none;
}

.resource-strip-metric {
  padding-left: 12px;
  border-left: 1px solid var(--border-soft);
  font-variant-numeric: tabular-nums;
}

.resource-strip-metric span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.resource-strip-metric strong {
  color: var(--fg);
  font-size: 13px;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
}

.resource-health-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--faint);
}

.resource-health-dot.ok {
  background: var(--success);
}

.resource-health-dot.warn {
  background: var(--warning);
}

.resource-health-dot.danger {
  background: var(--danger);
}

.resource-strip-metric.ok strong {
  color: var(--success);
}

.resource-strip-metric.warn strong {
  color: var(--warning);
}

.resource-strip-metric.danger strong {
  color: var(--danger);
}

.resource-page {
  isolation: isolate;
  display: grid;
  gap: 16px;
}

.resource-page > .panel,
.resource-page .resource-block {
  position: relative;
  z-index: 10;
}

.resource-page .resource-pressure-block,
.resource-page .resource-pressure {
  z-index: 30;
  overflow: visible;
}

.resource-page .sect-head h2::before {
  width: 3px;
  height: 14px;
  border-radius: var(--radius-full);
}

.resource-page :where(.metric-card, .resource-unavailable-card) {
  transition:
    border-color 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

.resource-page :where(.metric-card, .resource-unavailable-card):hover {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  box-shadow: var(--shadow), inset 0 1px 0 color-mix(in srgb, var(--accent) 12%, transparent);
  transform: translateY(-1px);
}

.resource-metrics {
  position: relative;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
}

.runtime-health-grid,
.runtime-session-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
  padding: 14px;
}

.runtime-pressure-grid {
  padding: 14px;
}

.runtime-health-card,
.runtime-session-card {
  min-width: 0;
}

.runtime-health-card strong {
  font-size: 24px;
}

.runtime-session-card strong {
  overflow: hidden;
  font-size: 17px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.runtime-health-card small,
.runtime-session-card small {
  line-height: 1.4;
}

.runtime-status-pill {
  display: inline-flex !important;
  align-items: center;
  width: fit-content;
  min-height: 24px;
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--muted) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.runtime-status-pill.fresh {
  border-color: color-mix(in srgb, var(--success) 34%, var(--border));
  background: var(--success-soft);
  color: var(--success) !important;
}

.runtime-status-pill.stale {
  border-color: color-mix(in srgb, var(--warning) 42%, var(--border));
  background: var(--warning-soft);
  color: var(--warning) !important;
}

.runtime-status-pill.unsupported {
  border-color: var(--border);
  background: var(--surface-muted);
  color: var(--faint) !important;
}

.runtime-status-pill.unknown {
  border-color: var(--border-soft);
  background: transparent;
  color: var(--muted) !important;
}

.resource-unavailable {
  padding: 14px;
}

.resource-unavailable-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 86px;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface-muted);
}

.resource-unavailable-status {
  width: 10px;
  height: 10px;
  border: 3px solid var(--warning-soft);
  border-radius: 50%;
  background: var(--warning);
}

.resource-unavailable-copy {
  min-width: 0;
}

.resource-unavailable-copy span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.resource-unavailable-copy h2 {
  margin: 0 0 4px;
  color: var(--fg);
  font-size: 17px;
  line-height: 1.2;
}

.resource-unavailable-copy p {
  margin: 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: 13px;
}

.resource-unavailable-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.resource-unavailable-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface);
  font-size: 12px;
  font-weight: 750;
}

.resource-trend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  padding: 14px;
}

.resource-trend-cell {
  position: relative;
  min-width: 0;
  padding: 12px 12px 11px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, var(--accent) 6%), var(--surface));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--border-soft) 52%, transparent);
  overflow: hidden;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}

.resource-trend-cell:hover {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border-soft));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 90%, var(--accent) 10%), var(--surface));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent) 16%, transparent);
  transform: translateY(-1px);
}

.resource-trend-cell b {
  display: block;
  min-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg);
  font-size: 12px;
  font-weight: 780;
  line-height: 18px;
}

.resource-chart {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  margin-top: 10px;
  min-height: 104px;
}

.resource-chart-y {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 5px 0 22px;
  color: var(--faint);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.2;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.resource-chart-plot {
  min-width: 0;
}

.resource-spark-wrap {
  position: relative;
}

.resource-spark {
  display: block;
  width: 100%;
  height: 82px;
  border: 1px solid color-mix(in srgb, var(--border-soft) 74%, transparent);
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-muted) 64%, transparent), transparent);
  overflow: visible;
}

.resource-grid-line {
  stroke: color-mix(in srgb, var(--border-soft) 70%, transparent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.resource-spark-area {
  fill: color-mix(in srgb, var(--accent) 15%, transparent);
}

.resource-spark polyline {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.resource-spark-dot {
  position: absolute;
  z-index: 1;
  width: 5px;
  height: 5px;
  box-sizing: border-box;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--surface);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.resource-chart-x {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding-top: 5px;
  color: var(--faint);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.resource-chart-x span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resource-page [data-resource-expandable] {
  cursor: pointer;
}

.resource-page [data-resource-expandable]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.resource-detail-modal {
  width: min(860px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--modal-shadow);
  color: var(--fg);
  overflow: hidden;
}

.resource-detail-modal::backdrop {
  background: var(--modal-backdrop);
  backdrop-filter: blur(3px);
}

.resource-detail-modal-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: calc(100dvh - 32px);
  overflow: hidden;
}

.resource-detail-modal-head {
  display: grid;
  grid-template-columns: minmax(32px, 1fr) auto minmax(32px, 1fr);
  align-items: center;
  min-height: 54px;
  padding: 12px 18px 8px;
}

.resource-detail-modal-head h3 {
  grid-column: 2;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: var(--section-title-font-size);
  font-weight: 700;
  line-height: var(--section-title-text-height);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resource-detail-modal-head h3::before {
  content: none;
}

.resource-detail-modal-close {
  position: relative;
  grid-column: 3;
  justify-self: end;
  display: grid;
  place-items: center;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
}

.resource-detail-modal-close::before,
.resource-detail-modal-close::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  border-radius: var(--radius-full);
  background: currentColor;
  content: '';
}

.resource-detail-modal-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.resource-detail-modal-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.resource-detail-modal-close:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

.resource-detail-modal-body {
  display: grid;
  align-content: start;
  gap: 16px;
  min-height: 0;
  padding: 4px 18px 18px;
  overflow-y: auto;
}

.resource-detail-summary {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.resource-detail-summary strong {
  color: var(--fg);
  font-size: 28px;
  line-height: 1.1;
}

.resource-detail-summary p,
.resource-detail-empty {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.resource-detail-empty {
  min-height: 128px;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
}

.resource-detail-chart {
  grid-template-columns: 68px minmax(0, 1fr);
  min-height: 320px;
  margin-top: 0;
}

.resource-detail-chart .resource-chart-y {
  padding-bottom: 28px;
  font-size: 11px;
}

.resource-detail-chart .resource-spark {
  height: min(42vh, 320px);
}

.resource-detail-chart .resource-chart-x {
  padding-top: 7px;
  font-size: 10.5px;
}

@media (max-width: 720px) {
  .resource-detail-modal {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
  }

  .resource-detail-modal-card {
    max-height: calc(100dvh - 24px);
  }

  .resource-detail-modal-head,
  .resource-detail-modal-body {
    padding-right: 14px;
    padding-left: 14px;
  }

  .resource-detail-chart {
    grid-template-columns: 52px minmax(0, 1fr);
    min-height: 250px;
  }

  .resource-detail-chart .resource-spark {
    height: min(38vh, 260px);
  }
}

.resource-list-shell {
  min-width: 0;
}

.resource-runtime-list {
  max-height: calc(56px * 8 + 20px);
  overflow-y: auto;
  overscroll-behavior: auto;
  scrollbar-gutter: stable;
  scrollbar-color: color-mix(in srgb, var(--accent) 42%, var(--border)) transparent;
  scrollbar-width: thin;
}

.resource-session-list {
  max-height: calc(58px * 10 + 20px);
}

.resource-runtime-list::-webkit-scrollbar {
  width: 6px;
}

.resource-runtime-list::-webkit-scrollbar-track {
  background: transparent;
}

.resource-runtime-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 32%, var(--border));
}

.resource-list-item {
  min-height: 52px;
  align-items: center;
  overflow: visible;
}

.resource-list-item.is-tracked {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.resource-list-item.is-tracked .overview-list-main strong::after {
  content: "trend";
  display: inline-flex;
  align-items: center;
  height: 18px;
  margin-left: 8px;
  padding: 0 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  vertical-align: 1px;
}

.resource-list-item .overview-list-tail {
  max-width: min(650px, 66%);
  justify-content: flex-end;
  flex: 1 1 auto;
}

.resource-pill-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

.resource-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 190px;
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--surface-muted) 64%, transparent);
  color: var(--fg);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.resource-pill > span {
  flex: none;
  color: var(--faint);
  font-size: 10px;
  font-weight: 800;
}

.resource-pill > b,
.resource-pill .resource-reasons {
  min-width: 0;
  overflow: hidden;
  color: var(--fg);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resource-pill.accent {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent);
}

.resource-pill.accent > b,
.resource-pill.accent .resource-reasons {
  color: var(--accent);
}

.resource-pill.ok {
  border-color: color-mix(in srgb, var(--success) 34%, var(--border-soft));
  background: color-mix(in srgb, var(--success) 9%, transparent);
}

.resource-pill.ok > b {
  color: var(--success);
}

.resource-pill.warn {
  border-color: color-mix(in srgb, var(--warning) 40%, var(--border-soft));
  background: color-mix(in srgb, var(--warning) 10%, transparent);
}

.resource-pill.warn > b {
  color: var(--warning);
}

.resource-pill.off {
  color: var(--faint);
  background: color-mix(in srgb, var(--surface-muted) 78%, transparent);
}

.resource-rank-pill {
  max-width: 280px;
}

.resource-rank-pill .resource-reasons {
  max-width: 200px;
}

.resource-sortbar {
  display: flex;
  align-items: center;
  padding: 0;
}

.resource-sortbar.dashboard-toolbar {
  display: inline-flex;
  min-height: auto;
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.resource-sortbar-inline {
  flex: none;
}

.resource-sortbar .resource-sort-switch {
  flex-wrap: wrap;
  max-width: 100%;
}

.resource-reasons {
  color: var(--accent-strong) !important;
}

@media (max-width: 900px) {
  .resource-strip,
  .resource-metrics,
  .runtime-health-grid,
  .runtime-session-grid,
  .resource-unavailable-card {
    grid-template-columns: 1fr;
  }

  .resource-list-item {
    align-items: flex-start;
    flex-direction: column;
  }

  .resource-list-item .overview-list-main,
  .resource-list-item .overview-list-tail,
  .resource-pill-group {
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
  }

  .resource-unavailable-tags {
    justify-content: flex-start;
  }
}

.overview-list {
  list-style: none;
  margin: 0;
  padding: 10px;
  display: grid;
  gap: 8px;
  min-width: 0;
}

.overview-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  min-height: 46px;
  padding: 9px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 36%, transparent);
  box-sizing: border-box;
  overflow: hidden;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    transform 150ms ease;
}
.overview-list-item:hover {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  transform: translateY(-1px);
}
.overview-list-main { min-width: 0; flex: 1; }
.overview-list-main :is(b, strong) {
  display: block;
  color: var(--fg);
  font-size: 12.5px;
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.overview-list-main span,
.overview-list-meta {
  color: var(--faint);
  font-size: 11px;
}
.overview-list-main span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.overview-list-meta,
.overview-list-status {
  flex: none;
  white-space: nowrap;
}
.overview-list-tail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  min-width: 0;
}
.overview-list-action {
  flex: none;
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--warning) 62%, transparent);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--warning);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    color 150ms ease;
}
.overview-list-action:hover {
  border-color: var(--warning);
  background: color-mix(in srgb, var(--warning) 10%, transparent);
}

.filters {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 14px 16px;
  flex-wrap: wrap;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

button,
.btn-link {
  font: inherit;
}

/* ── Unified form controls ──────────────────────────────────────────────────
   One consistent look for every text input, <select> and <textarea>: themed
   surface, 1px border, var(--radius) corners, a custom dropdown chevron and a
   soft accent focus ring. Native appearance is reset so WebKit search fields and
   selects stop rendering their own mismatched pill/rounded shapes. */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]),
select,
textarea {
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--surface-raised);
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

textarea {
  min-height: 84px;
  resize: vertical;
}

select {
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23808a99' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  cursor: pointer;
}

/* Multi-selects show a list, not a single value — no chevron, full padding. */
select[multiple] {
  background-image: none;
  padding-right: 8px;
}

input:not([type=checkbox]):not([type=radio]):hover:not(:disabled),
select:hover:not(:disabled),
textarea:hover:not(:disabled) {
  border-color: var(--muted);
}

input:not([type=checkbox]):not([type=radio]):focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

input::placeholder,
textarea::placeholder {
  color: var(--faint);
}

input:disabled,
select:disabled,
textarea:disabled {
  opacity: .55;
  cursor: not-allowed;
}

button:focus-visible,
.btn-link:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.filters input[type=search],
.filters input[type=text],
.filters select,
.form-row input[type=text],
.bd-body .bd-row input[type=text],
.oncall-row-body input[type=text] {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--fg);
  background: var(--surface-raised);
}

.filters input[type=search] { min-width: min(260px, 100%); }
.filters select[multiple] { min-height: 72px; padding: 6px 8px; }

.sessions-filters {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(132px, max-content) minmax(132px, max-content) max-content;
  align-items: center;
  gap: 10px 12px;
}

.sessions-filters input[type=search] {
  width: 100%;
  min-width: 0;
}

.sessions-filters select {
  width: 150px;
}

.sessions-view-toggle {
  flex: 0 0 auto;
}

.monitor-room-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--button-height);
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    color 150ms ease,
    transform 150ms ease;
}

.monitor-room-open:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
  transform: translateY(-1px);
}

/* 调试终端按钮：复用监控室按钮的胶囊样式，保持工具栏一致。 */
.debug-terminal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--button-height);
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    color 150ms ease,
    transform 150ms ease;
}

.debug-terminal-btn:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
  transform: translateY(-1px);
}

.filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 4px;
  color: var(--muted);
  font-weight: 700;
  white-space: nowrap;
}

.filter-toggle input {
  margin: 0;
}

.filter-check-group {
  display: grid;
  grid-template-columns: auto repeat(8, max-content);
  align-items: center;
  gap: 6px;
  min-height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
  grid-column: 1 / -1;
}

.filter-check-label {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding-right: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.filter-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.filter-check:hover {
  border-color: var(--accent);
  color: var(--fg);
}

.filter-check input {
  margin: 0;
}

label {
  color: var(--muted);
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-variant-numeric: tabular-nums;
}

th,
td {
  padding: 11px 13px;
  text-align: left;
  border-bottom: 1px solid var(--border-soft);
  white-space: nowrap;
  vertical-align: middle;
}

th {
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

tbody tr:last-child td { border-bottom: 0; }

.schedules-table .schedule-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* ── 首尾列固定的横向滚动矩阵（群组与 Bot）─────────────────────────────
   bot 一多中间的成员列就溢出视口，操作按钮被顶出屏幕。把圆角/阴影挪到
   滚动容器上，表格本体放开宽度横向滚，首列（群）和尾列（操作）sticky 钉住。 */
.table-scroll { overflow-x: auto; }
.matrix-scroll {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.matrix-scroll table {
  width: max-content;
  min-width: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible; /* 基础样式的 overflow:hidden 会把 sticky 列钉死在表格自身 */
}
.matrix-scroll th:first-child,
.matrix-scroll td:first-child { position: sticky; left: 0; z-index: 2; }
.matrix-scroll th:last-child,
.matrix-scroll td:last-child { position: sticky; right: 0; z-index: 2; }
.matrix-scroll th:first-child,
.matrix-scroll th:last-child { z-index: 3; }
/* sticky 单元格必须有不透明底色，否则中间列会从底下透出来 */
.matrix-scroll td:first-child,
.matrix-scroll td:last-child { background: var(--surface); }
/* 暗色主题下表格本体有一层 3% 白的提亮，sticky 格子补同款混色保持一致 */
:root[data-theme="dark"] .matrix-scroll td:first-child,
:root[data-theme="dark"] .matrix-scroll td:last-child {
  background: color-mix(in srgb, #ffffff 3%, var(--surface));
}
/* 暗色主题 th 也是半透明提亮（4% 白）——sticky 表头必须不透明，否则横滚时
   中间列标题会从「群聊」「操作」底下透出来。7% ≈ 表格 3% + th 4% 的叠加效果 */
:root[data-theme="dark"] .matrix-scroll th:first-child,
:root[data-theme="dark"] .matrix-scroll th:last-child {
  background: color-mix(in srgb, #ffffff 7%, var(--surface));
}
.matrix-scroll tr[data-chat]:hover td:first-child,
.matrix-scroll tr[data-chat]:hover td:last-child { background: var(--surface-muted); }
/* 滚动边界提示线 */
.matrix-scroll th:first-child,
.matrix-scroll td:first-child { box-shadow: 1px 0 0 var(--border-soft); }
.matrix-scroll th:last-child,
.matrix-scroll td:last-child { box-shadow: -1px 0 0 var(--border-soft); }

/* ── 慢接口在途的页面级 loading 占位：在内容区水平垂直居中 ── */
.page-loading {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  min-height: 220px;
  padding: 40px 20px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  animation: page-loading-in 0.25s ease-out;
}
.page-loading-compact {
  min-height: 96px;
  padding: 24px 12px;
  gap: 10px;
}
.page-loading-spin {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  border: 2.5px solid var(--border-soft);
  border-top-color: var(--accent);
  animation: page-loading-rotate 0.8s linear infinite;
}
@keyframes page-loading-rotate { to { transform: rotate(360deg); } }
@keyframes page-loading-in { from { opacity: 0; } }
th[data-sort] { cursor: pointer; user-select: none; }
th[data-sort]:hover,
th.sorted { color: var(--fg); background: var(--bg-soft); }
tr[data-id]:hover,
tr[data-chat]:hover { background: var(--surface-muted); cursor: pointer; }
.token-cell {
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.session-location-cell {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#sessions-table {
  max-width: 100%;
}

#sessions-table .sessions-table-text-cell,
#sessions-table .sessions-table-path-cell {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 表格列显隐下拉菜单 ─────────────────────────────────────────────── */
.session-table-columns-th {
  position: relative;
  padding: 0;
}

.session-table-columns-menu {
  position: relative;
  display: inline-block;
}

.session-table-columns-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  user-select: none;
}

.session-table-columns-menu > summary:hover {
  background: rgba(127, 90, 240, 0.12);
}

.session-table-columns-menu > summary::-webkit-details-marker {
  display: none;
}

.session-table-columns-icon svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.session-table-columns-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 50;
  min-width: 160px;
  margin-top: 4px;
  padding: 8px;
  border-radius: 8px;
  background: var(--surface, #fff);
  border: 1px solid rgba(127, 90, 240, 0.2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.session-table-columns-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(127, 90, 240, 0.15);
  font-size: 12px;
  font-weight: 600;
}

.session-table-columns-reset {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(127, 90, 240, 0.25);
  background: transparent;
  cursor: pointer;
}

.session-table-columns-reset:hover {
  background: rgba(127, 90, 240, 0.12);
}

.session-table-columns-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px;
  font-size: 12px;
  cursor: pointer;
  border-radius: 4px;
}

.session-table-columns-item:hover {
  background: rgba(127, 90, 240, 0.08);
}

.session-table-columns-item input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}

button,
.btn-link {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--fg);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

button:hover,
.btn-link:hover {
  border-color: var(--accent);
}

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

.help-icon-button {
  display: inline-grid;
  place-items: center;
  flex: 0 0 var(--help-icon-size, 20px);
  width: var(--help-icon-size, 20px);
  height: var(--help-icon-size, 20px);
  min-width: var(--help-icon-size, 20px);
  min-height: var(--help-icon-size, 20px);
  max-width: var(--help-icon-size, 20px);
  max-height: var(--help-icon-size, 20px);
  padding: 0;
  border-radius: 999px;
  box-sizing: border-box;
  font-size: var(--help-icon-font-size, 11px);
  font-weight: 800;
  line-height: 1;
  cursor: help;
}

button.contrast {
  background: var(--danger);
  color: var(--on-danger);
  border-color: var(--danger);
}

.btn-link.primary,
button.primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
  font-weight: 700;
}

.badge,
.status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0;
  text-decoration: none;
}

.badge {
  background: var(--surface-muted);
  color: var(--muted);
  border: 1px solid var(--border-soft);
}

.session-lock-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin-left: 6px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--warning) 38%, var(--border-soft));
  background: color-mix(in srgb, var(--warning) 10%, var(--surface-muted));
  color: var(--warning);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.cli-claude-code { background: #e8f0ff; color: #234fb4; border-color: #c8d9ff; }
.cli-codex       { background: #fff0df; color: #a14c11; border-color: #ffd8ad; }
.cli-codex-app   { background: #e9f7ff; color: #11638f; border-color: #bde4fa; }
.cli-cursor      { background: #ece9ff; color: #5b4ac7; border-color: #d9d2ff; }
.cli-gemini      { background: #fde7f1; color: #a13268; border-color: #fac8df; }
.cli-opencode    { background: #e7f7ec; color: #176b36; border-color: #bfe8ce; }
.cli-mtr         { background: #e5f5ff; color: #0f6388; border-color: #b8e2f7; }
.cli-hermes      { background: #f0f4e4; color: #546b14; border-color: #d9e9a8; }
.cli-mira        { background: #e8f6f6; color: #12686d; border-color: #b9e4e5; }
.cli-pi          { background: #f1e9ff; color: #6b2bbf; border-color: #dcc9ff; }
.cli-aiden       { background: #fff7d1; color: #8b6508; border-color: #f7df87; }
.cli-coco        { background: #e4f7f2; color: #0c695b; border-color: #b7e4d9; }
.cli-unknown     { background: var(--surface-muted); color: var(--muted); }

:root[data-theme="dark"] .cli-claude-code,
:root[data-theme="dark"] .cli-codex,
:root[data-theme="dark"] .cli-codex-app,
:root[data-theme="dark"] .cli-cursor,
:root[data-theme="dark"] .cli-gemini,
:root[data-theme="dark"] .cli-opencode,
:root[data-theme="dark"] .cli-mtr,
:root[data-theme="dark"] .cli-hermes,
:root[data-theme="dark"] .cli-mira,
:root[data-theme="dark"] .cli-pi,
:root[data-theme="dark"] .cli-aiden,
:root[data-theme="dark"] .cli-coco {
  background: var(--surface-muted);
  color: var(--fg);
  border-color: var(--border);
}

.status-working,
.status-active { background: var(--accent-soft); color: var(--accent-strong); }
.status-idle { background: var(--surface-muted); color: var(--muted); }
.status-dormant {
  box-sizing: border-box;
  background: color-mix(in srgb, var(--muted) 14%, var(--surface));
  color: var(--muted);
}
.status-attention {
  background: color-mix(in srgb, var(--warning) 13%, var(--surface));
  color: var(--warning);
}
.status-closed { background: var(--danger-soft); color: var(--danger); }
.status-analyzing { background: var(--warning-soft); color: var(--warning); }
.status-starting { background: var(--success-soft); color: var(--success); }
.status-limited { background: var(--danger-soft); color: var(--danger); }
.status-stalled { background: var(--danger-soft); color: var(--danger); }

/* ── Sessions board — "control-room signal wall" ─────────────────────────────
   Each column is a signal channel: a LED dot + uppercase channel label in the
   header, and every card inherits the channel color through `--col-signal`.
   The needs-you channel pulses; everything else stays calm. Terminal-native
   typography (mono labels, tabular numerals) over generic SaaS chrome. */
.sessions-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 12px;
  align-items: stretch;
  min-height: 0;
  height: 100%;
  background-image: none;
  border-radius: var(--radius);
  padding: 10px;
  overflow: hidden;
}

.sessions-board[hidden] {
  display: none;
}

/* ── Sessions topic view — group by Lark location, not inferred ancestry ─── */
.sessions-topic-view {
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 12px;
  min-height: 0;
  height: 100%;
  padding: 10px;
  overflow-y: auto;
  box-sizing: border-box;
}

.sessions-topic-view[hidden] {
  display: none;
}

.session-topic-group {
  --topic-signal: var(--border);
  min-width: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.session-topic-group.multi-bot {
  --topic-signal: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border-soft));
}

.session-topic-group.inferred-bot-trigger {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--warning) 72%, transparent), var(--shadow);
}

.session-topic-group > header {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) minmax(280px, auto);
  align-items: center;
  gap: 12px;
  min-height: 74px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--topic-signal) 5%, var(--surface-muted));
}

.session-topic-avatar {
  display: inline-flex;
}

.session-topic-heading {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.session-topic-location,
.session-topic-updated {
  color: var(--muted);
  font-size: 11px;
}

.session-topic-heading h2 {
  margin: 0;
  color: var(--fg);
  font-size: 14px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-topic-heading code {
  max-width: min(58vw, 520px);
  color: var(--faint);
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-topic-summary {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

.topic-chip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface-raised);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.topic-chip.collaboration {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-raised));
  color: var(--accent-strong);
}

.topic-chip.active {
  border-color: color-mix(in srgb, var(--success) 36%, var(--border));
  color: var(--success);
}

.topic-chip.inferred {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--warning) 44%, var(--border));
  color: var(--warning);
}

.session-topic-members {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  align-items: start;
  gap: 10px;
  padding: 10px;
}

.session-topic-members .session-card {
  --col-signal: var(--topic-signal);
}

.sessions-topic-empty {
  min-height: 160px;
  display: grid;
  place-items: center;
  color: var(--muted);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.session-board-column {
  --col-signal: var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.session-board-column > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 72px;
  padding: 12px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-muted);
  box-sizing: border-box;
}

.session-board-column > header > div {
  display: grid;
  align-content: center;
  flex: 1 1 auto;
  gap: 5px;
  min-width: 0;
}

.session-board-column h2 {
  flex: none;
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

/* channel LED */
.session-board-column h2::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--col-signal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--col-signal) 18%, transparent);
  flex: none;
}

.session-board-column p {
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-board-count {
  width: auto;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  padding: 0 7px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--col-signal) 10%, var(--surface-raised));
  border: 1px solid color-mix(in srgb, var(--col-signal) 35%, var(--border));
  color: color-mix(in srgb, var(--col-signal) 75%, var(--fg));
  font-family: var(--mono);
  font-weight: 700;
  line-height: 26px;
  font-variant-numeric: tabular-nums;
}

.session-board-list {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 10px;
  padding: 10px;
  overflow-y: auto;
}

.session-board-empty {
  min-height: 64px;
  display: grid;
  place-items: center;
  color: var(--faint);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: transparent;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.session-board-needs-you {
  --col-signal: var(--danger);
  background: color-mix(in srgb, var(--danger) 4%, var(--surface));
}

/* the one channel that's allowed to breathe */
.session-board-needs-you h2::before {
  animation: board-led-pulse 1.6s ease-in-out infinite;
}

.session-board-todo {
  --col-signal: var(--warning);
}

.session-board-working {
  --col-signal: var(--success);
}

.session-board-idle {
  --col-signal: var(--faint);
}

@keyframes board-led-pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--col-signal) 18%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--col-signal) 30%, transparent); }
}

.session-card {
  --session-board-card-min-height: 132px;
  display: grid;
  gap: 10px;
  align-content: start;
  box-sizing: border-box;
  min-height: var(--session-board-card-min-height);
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

/* Entry animation ONLY on the board's first paint (.board-enter set by JS).
 * SSE-driven re-renders rebuild the DOM — replaying the staggered reveal on
 * every status update made the whole page flash. */
.board-enter .session-board-list .session-card {
  animation: board-card-in 280ms ease backwards;
}

/* stagger the first paint — one orchestrated reveal, then calm */
.board-enter .session-board-list .session-card:nth-child(1) { animation-delay: 30ms; }
.board-enter .session-board-list .session-card:nth-child(2) { animation-delay: 75ms; }
.board-enter .session-board-list .session-card:nth-child(3) { animation-delay: 120ms; }
.board-enter .session-board-list .session-card:nth-child(4) { animation-delay: 165ms; }
.board-enter .session-board-list .session-card:nth-child(n+5) { animation-delay: 210ms; }

@keyframes board-card-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

.session-card:hover {
  border-color: color-mix(in srgb, var(--col-signal) 55%, var(--border));
  transform: translateY(-1px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--col-signal) 12%, rgba(15, 23, 42, 0.10));
}

/* whole-card selection (no checkbox) — accent ring + soft tint */
.session-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, var(--surface-raised));
}

.session-card.locked {
  border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
}

@media (prefers-reduced-motion: reduce) {
  .session-card { animation: none; transition: none; }
  .session-board-needs-you h2::before { animation: none; }
  .session-card:hover { transform: none; }
}

.session-card-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: start;
  gap: 8px;
}

.session-card-title {
  min-width: 0;
}

.session-card-title strong,
.session-card-title span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-card-title strong {
  color: var(--fg);
  font-size: 13px;
}

.session-card-title span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.session-card-meta,
.session-card-time,
.session-card-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  min-width: 0;
}

.session-card-meta {
  color: var(--muted);
  font-size: 12px;
  flex-wrap: nowrap;
}

.session-card-meta > span:not(.badge):not(.session-signal) {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-card-exchange-wrap {
  position: relative;
  min-width: 0;
}

.session-card-exchange {
  display: grid;
  gap: 5px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  cursor: pointer;
}

.session-card-exchange:hover,
.session-card-exchange:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 46%, var(--border));
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.session-card-exchange:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 58%, transparent);
  outline-offset: 2px;
}

.session-card-exchange-line {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  min-width: 0;
}

.session-card-exchange-line > span {
  padding-top: 1px;
  color: var(--faint);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
}

.session-card-exchange-line.bot > span {
  color: var(--accent);
}

.session-card-exchange-line > p {
  display: -webkit-box;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.session-card-exchange-tooltip {
  position: fixed;
  z-index: 10020;
  display: grid;
  gap: 10px;
  width: min(520px, calc(100vw - 24px));
  max-height: min(420px, calc(100vh - 24px));
  padding: 12px 13px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-raised) 96%, transparent);
  color: var(--fg);
  box-shadow: 0 16px 44px rgba(3, 7, 18, 0.34);
  cursor: text;
  overscroll-behavior: contain;
}

.session-card-exchange-tooltip-scroll {
  display: grid;
  gap: 10px;
  max-height: min(394px, calc(100vh - 50px));
  overflow: auto;
  scrollbar-gutter: stable;
}

.session-card-exchange-tooltip-line {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
}

.session-card-exchange-tooltip-line + .session-card-exchange-tooltip-line {
  padding-top: 10px;
  border-top: 1px solid var(--border-soft);
}

.session-card-exchange-tooltip-line > span {
  padding-top: 2px;
  color: var(--faint);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.45;
  text-transform: uppercase;
}

.session-card-exchange-tooltip-line.bot > span {
  color: var(--accent);
}

.session-card-exchange-tooltip-line > p,
.session-card-exchange-md {
  min-width: 0;
  margin: 0;
  color: var(--fg);
  font-size: 12px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  user-select: text;
}

/* Markdown rendered inside the full-exchange overlay. Scoped tight so bot
 * replies read as formatting (bold / code / lists / links) without importing
 * a new palette — dashboard tokens only. Compact block spacing keeps a long
 * reply legible in the scrollable overlay. */
.session-card-exchange-md > :first-child { margin-top: 0; }
.session-card-exchange-md > :last-child { margin-bottom: 0; }
.session-card-exchange-md p { margin: 0 0 6px; }
.session-card-exchange-md ul,
.session-card-exchange-md ol { margin: 0 0 6px; padding-left: 18px; }
.session-card-exchange-md li { margin: 1px 0; }
.session-card-exchange-md li > p { margin: 0; }
.session-card-exchange-md h1,
.session-card-exchange-md h2,
.session-card-exchange-md h3,
.session-card-exchange-md h4,
.session-card-exchange-md h5,
.session-card-exchange-md h6 {
  margin: 8px 0 4px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}
.session-card-exchange-md strong { font-weight: 700; }
.session-card-exchange-md em { font-style: italic; }
.session-card-exchange-md a {
  color: var(--accent);
  text-decoration: underline;
  overflow-wrap: anywhere;
}
/* Markdown images are downgraded to a non-fetching text placeholder (no auto
 * <img> request); the alt becomes an opt-in click-through link for safe schemes. */
.session-card-exchange-img {
  color: var(--muted);
  font-size: 11px;
  overflow-wrap: anywhere;
}
.session-card-exchange-md code {
  padding: 1px 4px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--fg) 10%, transparent);
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
}
.session-card-exchange-md pre {
  margin: 0 0 6px;
  padding: 8px 10px;
  overflow-x: auto;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--fg) 8%, transparent);
}
.session-card-exchange-md pre code {
  padding: 0;
  background: transparent;
  font-size: 11px;
  line-height: 1.5;
}
.session-card-exchange-md blockquote {
  margin: 0 0 6px;
  padding-left: 10px;
  border-left: 2px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  color: var(--muted);
}
.session-card-exchange-md hr {
  margin: 8px 0;
  border: 0;
  border-top: 1px solid var(--border-soft);
}

.session-card-time {
  justify-content: space-between;
  color: var(--muted);
  font-size: 12px;
}

.session-card-status-group,
.drawer-status-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.session-card-status-group .session-lock-badge,
.drawer-status-line .session-lock-badge {
  margin-left: 0;
}

/* 任务态徽标：告诉人「这张卡为什么在待办列」——机器空闲但还有未完成 TODO。
   琥珀色区别于运行态 status（灰/蓝/绿），hasInProgress 时加脉冲圆点。 */
/* 待办徽标：柔和描边 + 透明底（信息态，不喧宾夺主）。色调用偏红的橙红，
   比原来的黄橙更有"该处理"的提示感，又不像红色报错。 */
.session-todo-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: #c2410c;
  background: color-mix(in srgb, #ea580c 12%, transparent);
  border: 1px solid color-mix(in srgb, #ea580c 36%, transparent);
  position: relative;
  cursor: help;
}

.session-todo-badge.pinned {
  color: #c2410c;
  background: color-mix(in srgb, #ea580c 22%, transparent);
  border-color: color-mix(in srgb, #ea580c 55%, transparent);
  cursor: pointer;
}

.session-todo-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ea580c;
  animation: todo-pulse 1.6s ease-in-out infinite;
}

@keyframes todo-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* 悬浮浮层：列出每条 TODO 的状态字形 + 文字。portal 到 body、fixed 定位（卡片/列
   都是 overflow:hidden，绝对定位会被裁）。JS 控制挂载，位置由行内 left/top 给。
   两态：hover 悬浮预览（移开即关）；pinned 点击固定（不自动消失，文字可选中复制）。 */
.session-todo-pop {
  position: fixed;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 220px;
  max-width: 360px;
  padding: 10px 12px;
  border-radius: var(--radius-md, 8px);
  background: var(--surface-raised, #1b1f2a);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  color: var(--fg, #18202a);
  font-family: var(--sans, inherit);
  font-weight: 400;
  letter-spacing: 0;
  white-space: normal;
  animation: todo-pop-in 0.12s ease;
  user-select: none;
}

/* 固定态：文字可选中复制，边框更实以区分「已锁定」。 */
.session-todo-pop.pinned {
  user-select: text;
  border-color: color-mix(in srgb, var(--warning, #f5a623) 45%, var(--border, rgba(255, 255, 255, 0.12)));
}

@keyframes todo-pop-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.session-todo-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted, #9aa3b2);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.1));
}

.session-todo-pop-title {
  flex: 1 1 auto;
  min-width: 0;
}

.session-todo-pop-hint {
  flex: none;
  font-weight: 500;
  font-size: 10px;
  opacity: 0.7;
}

.session-todo-pop-copy {
  flex: none;
  cursor: pointer;
  font-family: var(--sans, inherit);
  font-size: 11px;
  font-weight: 600;
  color: var(--warning, #f5a623);
  background: color-mix(in srgb, var(--warning, #f5a623) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning, #f5a623) 40%, transparent);
  border-radius: var(--radius-sm, 5px);
  padding: 2px 8px;
  line-height: 1.4;
  transition: background 0.1s ease;
}

.session-todo-pop-copy:hover {
  background: color-mix(in srgb, var(--warning, #f5a623) 24%, transparent);
}

.session-todo-pop-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 320px;
  overflow-y: auto;
}

.session-todo-pop-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  line-height: 1.4;
}

.session-todo-pop-glyph {
  flex: none;
  width: 14px;
  text-align: center;
  font-family: var(--mono);
  font-weight: 700;
}

/* 完成项最浅（灰+删除线），未完成项更深、进行中最深加粗——让「还没做的」在视觉上更突出。
   注意用 --fg / --faint（本主题真实存在的 token）；早前误用未定义的 --text/--text-secondary，
   会回退到近白色 #e6e8ee，在浅色模式下几乎看不清。 */
.session-todo-pop-item.st-completed { color: var(--faint, #7b8798); }
.session-todo-pop-item.st-completed .session-todo-pop-text { text-decoration: line-through; }
.session-todo-pop-item.st-completed .session-todo-pop-glyph { color: var(--success, #15803d); }
.session-todo-pop-item.st-in-progress { color: var(--fg, #18202a); font-weight: 700; }
.session-todo-pop-item.st-in-progress .session-todo-pop-glyph { color: var(--warning, #b7791f); }
.session-todo-pop-item.st-pending { color: var(--fg, #18202a); }
.session-todo-pop-item.st-pending .session-todo-pop-glyph { color: var(--muted, #627084); }

.session-signal {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  justify-self: start;
  max-width: 100%;
  min-height: 22px;
  padding: 3px 8px;
  color: var(--danger);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-align: left;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--danger) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
}

.session-card-meta .session-signal,
.kanban-card-meta-row .session-signal {
  flex: none;
  justify-content: center;
  max-width: 52%;
  margin-left: auto;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-family: inherit;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-card-actions {
  padding-top: 2px;
  justify-content: flex-end;
  gap: 6px;
}

.session-card-actions button,
.session-card-actions .btn-link {
  min-height: 30px;
  padding: 0 9px;
  font-size: 12px;
}

.session-card-actions .card-act {
  border-radius: var(--radius-full);
}

.session-card-actions .term-pill {
  border-radius: var(--radius-full);
}

/* ── 看板视图（multica Issues 风格）：横排状态列 + 简洁卡片 ─────────────────── */
.sessions-kanban {
  display: flex;
  align-items: stretch;
  gap: 12px;
  min-height: 0;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 2px 12px;
}

.sessions-kanban[hidden] {
  display: none;
}

.kanban-column {
  /* 弹性等分而非固定 280px：5 列在任何视口宽度下收缩到容器内，
     不再把页面撑出横向滚动条（极窄屏由媒体查询改纵向堆叠兜底）。 */
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  max-height: none;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 72%, transparent);
}

.kanban-column > header {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 12px 8px;
}

.kanban-col-icon {
  display: inline-flex;
  flex: none;
}

.kanban-col-icon svg {
  width: 14px;
  height: 14px;
  display: block;
}

.kanban-column h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.kanban-col-count {
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* 视图控件排布：团队筛选 + 分组维度切换 + 视图切换并排（窄屏自动换行） */
.sessions-view-controls {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}

/* .segmented 自带 display:inline-flex 会盖掉 [hidden] 的 UA 样式——显式补回 */
.sessions-view-controls [hidden] {
  display: none !important;
}

.sessions-view-stage {
  min-width: 0;
}

.sessions-view-stage-enter {
  animation: dashboard-page-enter 0.35s ease both;
}

@media (prefers-reduced-motion: reduce) {
  .sessions-view-stage-enter {
    animation: none !important;
  }
}

/* 团队下拉使用平台 DropdownMenu，和其他短选项下拉保持同一 trigger / popover 规范。 */
.kanban-team-menu {
  --dropdown-trigger-width: 176px;
  width: var(--dropdown-trigger-width);
}

.kanban-team-menu > summary {
  background: var(--surface);
}

.kanban-team-menu .sect-sort-value {
  max-width: calc(var(--dropdown-trigger-width) - 44px);
}

.kanban-team-menu > .sect-sort-pop {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}

.kanban-team-menu[open] {
  z-index: 1302;
}

/* 团队筛选范围统计：让"筛掉了什么"可见 */
.kanban-team-stats {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

/* 团队清单加载中的整板占位（替代裸文本） */
.kanban-loading-state {
  flex: 1;
  min-height: 220px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
}

/* 对方部署的会话卡：来源徽章 + 虚线边框区分快照身份 */
.kanban-remote-badge {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-muted));
  color: var(--accent-strong);
  white-space: nowrap;
  flex: none;
}

.kanban-card-remote {
  border-style: dashed;
}

/* 机器人视角：bot 多时列不再无限压缩——固定列宽 + 容器横向滚动 */
.sessions-kanban.kanban-mode-bot .kanban-column {
  flex: 0 0 264px;
}

/* 整簇拖拽 */
.kanban-cluster > header {
  cursor: grab;
}

.kanban-cluster.dragging {
  opacity: 0.45;
}

/* 同群聚簇容器：虚线框 + 群名头，一眼看出卡片同属一个群 */
.kanban-cluster {
  --kanban-card-min-height: 130px;
  --kanban-cluster-min-height: calc(var(--kanban-card-min-height) + 44px);
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  align-self: start;
  gap: 6px;
  box-sizing: border-box;
  min-width: 0;
  min-height: var(--kanban-cluster-min-height);
  max-width: 100%;
  max-height: none;
  padding: 6px;
  border: 1px dashed color-mix(in srgb, var(--accent) 38%, var(--border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 3%, transparent);
  overflow: visible;
}

.kanban-cluster.collapsed {
  min-height: 0;
  padding-block: 8px;
}

.kanban-cluster > header {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 0 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.kanban-cluster-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kanban-cluster-count {
  flex: none;
  padding: 1px 7px;
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.kanban-cluster > header .kanban-cluster-toggle {
  flex: none;
  width: 24px;
  min-width: 24px;
  max-width: 24px;
  height: 24px;
  min-height: 24px;
  max-height: 24px;
  margin-left: auto;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface-raised);
  color: var(--muted);
  cursor: pointer;
}

.kanban-cluster-avatar,
.kanban-cluster-avatar .orb-avatar {
  flex: none;
  width: 24px;
  height: 24px;
  display: inline-flex;
}

.kanban-cluster-toggle svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 120ms ease;
}

.kanban-cluster.expanded .kanban-cluster-toggle svg {
  transform: rotate(180deg);
}

/* 团队模式列头：bot 头像替代状态图标 */
.kanban-col-avatar {
  display: inline-flex;
  flex: none;
}

.kanban-backlog .kanban-col-icon { color: var(--faint); }
.kanban-todo .kanban-col-icon { color: var(--muted); }
.kanban-in_progress .kanban-col-icon { color: var(--warning); }
.kanban-in_review .kanban-col-icon { color: var(--success); }
.kanban-done .kanban-col-icon { color: var(--accent); }

/* 拖拽视觉：目标列描边、插入位置在目标卡上沿画一条插入线、拖拽源半透明 */
.kanban-column.drag-over {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}

.kanban-card.dragging {
  opacity: 0.45;
}

.kanban-card.drop-before {
  box-shadow: 0 -2px 0 0 var(--accent);
}

.kanban-col-list {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-auto-rows: max-content;
  align-items: start;
  gap: 8px;
  align-content: start;
  padding: 2px 8px 10px;
  overflow-y: auto;
}

.kanban-col-empty {
  padding: 32px 0;
  color: var(--faint);
  font-size: 12px;
  text-align: center;
}

.kanban-col-more {
  padding: 6px 0 2px;
  color: var(--faint);
  font-size: 11px;
  text-align: center;
}

.kanban-card {
  --kanban-card-min-height: 130px;
  position: relative;
  align-self: start;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-height: var(--kanban-card-min-height);
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: max-content;
  align-content: start;
  gap: 6px;
  padding: 12px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 120ms ease, background 120ms ease;
}

.kanban-card:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 4%, var(--surface-raised));
}

.kanban-card.selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-raised));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
}

.kanban-card.locked {
  border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
}

.kanban-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.kanban-card-top {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-height: 24px;
  min-width: 0;
  overflow: hidden;
  padding-right: 0;
}

.kanban-card > * {
  min-width: 0;
  max-width: 100%;
}

/* CLI 徽章别折行（claude-code 之类带连字符的会被 280px 卡片拆成两行） */
.kanban-card-top .badge {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: none;
}

.kanban-card-actions-rail {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex: none;
  flex-wrap: nowrap;
  gap: 3px;
  max-width: 100%;
  min-width: 0;
  margin-left: 0;
  padding-left: 24px;
  /* rail 是 hover 浮层，绝对定位盖在顶行上。默认完全透明、不占视觉（否则常驻的
     渐变背景会把没 hover 的卡片 CLI 徽章也糊掉——见回归）。只有 hover/focus 时
     才浮出：给一层与 hover 态卡片同色的背景 + 左侧渐变淡出，干净盖住徽章而非糊字。 */
  --kanban-rail-bg: color-mix(in srgb, var(--accent) 4%, var(--surface-raised));
  background: transparent;
  z-index: 2;
}

.kanban-card:hover .kanban-card-actions-rail,
.kanban-card:focus-within .kanban-card-actions-rail {
  background: linear-gradient(
    to right,
    transparent 0,
    var(--kanban-rail-bg) 24px,
    var(--kanban-rail-bg) 100%
  );
}

@media (hover: none), (max-width: 720px) {
  /* 触屏/窄屏按钮常显，背景也常显，避免图标浮在徽章上重叠。 */
  .kanban-card-actions-rail {
    background: linear-gradient(
      to right,
      transparent 0,
      var(--kanban-rail-bg) 24px,
      var(--kanban-rail-bg) 100%
    );
  }
}

.kanban-card-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--faint);
  flex: none;
}

.kanban-card-dot[data-status="working"],
.kanban-card-dot[data-status="analyzing"],
.kanban-card-dot[data-status="active"] {
  background: var(--success);
}

.kanban-card-dot[data-status="starting"] {
  background: var(--warning);
}

.kanban-card-dot[data-status="limited"] {
  background: var(--danger);
}

.kanban-card-dot[data-status="idle"] {
  background: var(--success);
}

.kanban-card-dot[data-status="dormant"] {
  background: var(--muted);
}

.kanban-card-dot[data-status="closed"] {
  background: var(--border);
}

/* 操作按钮作为绝对定位浮层出现，不参与卡片排版，避免 hover 时重新挤压标题导致抖动。 */
.kanban-card .kanban-card-act {
  order: 1;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  max-width: 24px;
  max-height: 24px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 120ms ease, visibility 120ms ease;
}

.kanban-card .kanban-card-act svg {
  width: 13px;
  height: 13px;
  stroke-width: 1.55;
}

.kanban-card:hover .kanban-card-act,
.kanban-card:focus-within .kanban-card-act {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

@media (hover: none), (max-width: 720px) {
  .kanban-card .kanban-card-act {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }
}

/* 标题就地编辑输入框：占标题原位，不撑破卡片 */
.kanban-rename-input {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 2px 6px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

.kanban-card-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--fg);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kanban-card-desc {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kanban-card-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.kanban-card-desc-empty {
  visibility: hidden;
}

.kanban-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
  min-width: 0;
}

.kanban-card-owner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--fg);
  font-size: 12px;
}

.kanban-card-owner > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kanban-card-updated {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--faint);
  font-size: 11px;
}

.kanban-card-updated .kanban-card-dot {
  margin-left: 1px;
}

/* ── 页面内终端弹窗（看板卡片点击落点）───────────────────────────────────── */
.term-modal {
  width: min(1320px, calc(100vw - 32px));
  height: min(86vh, 960px);
  max-height: calc(100vh - 32px);
  padding: 0;
  overflow: hidden;
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--modal-shadow);
}

.term-modal[open] {
  display: flex;
  flex-direction: column;
}

.term-modal-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 68px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface);
}

.term-modal-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}

.term-modal-title-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.term-modal-title-main {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.term-modal-title strong {
  font-size: 13px;
  font-weight: 760;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.term-modal-subtitle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.2;
}

.term-modal-subtitle span {
  min-width: 0;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.term-modal-subtitle span + span::before {
  content: "·";
  margin-right: 6px;
  color: var(--faint);
}

/* 终端弹窗标题旁的铅笔：常显小尺寸，与 card-act 一致 */
.term-modal-title .card-act {
  width: 26px;
  height: 26px;
  min-height: 26px;
  flex: none;
  border-radius: var(--radius-full);
}

/* 标题就地编辑输入框：宽度由 JS 按内容实测设定（fitInput），这里只给兜底上限 */
.term-modal-name-input {
  max-width: 60vw;
  margin: 0;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font-size: 13px;
  font-weight: 600;
}

.term-modal-actions {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.term-modal-actions .card-act {
  border-radius: var(--radius-full);
}

.term-modal-body {
  flex: 1;
  min-height: 0;
  display: flex;
  padding: 10px;
  background: color-mix(in srgb, var(--surface-muted) 42%, transparent);
}

.term-modal-frame-shell {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: #000;
}

.term-modal-frame {
  flex: 1;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

.term-modal-loading {
  margin: auto;
  color: var(--faint);
  font-size: 13px;
}

.team-bind-loading {
  min-height: 0;
  padding: 0;
}

/* ── 会话历史弹窗：飞书式左右气泡 ─────────────────────────────────────────── */
.history-modal {
  width: min(860px, 94vw);
  height: min(82vh, 900px);
  max-height: calc(100vh - 24px);
  padding: 0;
  overflow: hidden;
}

.history-modal[open] {
  display: flex;
  flex-direction: column;
}

.history-scope-tag {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 11px;
}

.history-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 14px 16px;
  background: var(--bg-soft);
}

.history-list {
  display: grid;
  gap: 4px;
}

.history-msg {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  max-width: 82%;
}

.history-msg.group-start:not(:first-child) {
  margin-top: 8px;
}

.history-msg-main {
  min-width: 0;
}

.history-msg-meta {
  display: flex;
  gap: 8px;
  margin-bottom: 3px;
  color: var(--faint);
  font-size: 11px;
}

.history-bubble {
  padding: 8px 11px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: var(--surface-raised);
  color: var(--fg);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.history-avatar-user {
  flex: none;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 12px;
}

/* 真人头像（contact API 拿到的）——与首字圆同尺寸 */
.history-avatar-img {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

.history-avatar-bot,
.history-avatar-bot .orb-avatar {
  flex: none;
  width: 24px;
  height: 24px;
  display: inline-flex;
}

.history-avatar-spacer {
  flex: none;
  width: 24px;
  height: 1px;
}

.history-error {
  margin: auto;
  color: var(--faint);
  font-size: 13px;
}

/* 图标方按钮：会话卡片操作行一排，也被详情抽屉 .actions 复用（chat-scope 的
   「打开群聊」走同一个 .card-act）。图标宽度与语言无关，en/zh 都稳定一行，修掉了
   EN 文案更宽把「关闭」挤下行的崩布局。基础按钮外观放在通用 .card-act 选择器上，
   这样抽屉里的裸 <a class="card-act"> 也有按钮态；.session-card-actions 只管布局。
   SVG 走 stroke:currentColor。 */
.card-act svg,
.term-btn svg {
  width: 15px;
  height: 15px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.card-act {
  width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--muted);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease, transform .07s ease;
}
.card-act:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, var(--surface-raised));
}
.card-act.danger:hover {
  color: var(--danger);
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 9%, var(--surface-raised));
}
.card-act.locked {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
  background: color-mix(in srgb, var(--warning) 8%, var(--surface-raised));
}
.card-act:active { transform: scale(0.9); }

/* 终端与可操作 Web 终端分成两个明确入口：钥匙按钮只在有写权限时显示。 */
.term-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.term-pill .term-btn {
  width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--accent);
  border-radius: 50%;
  cursor: pointer;
  transition: background .15s ease, filter .15s ease, transform .07s ease;
}
.term-pill .term-open {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, var(--surface-raised));
}
.term-pill .term-open:hover { background: color-mix(in srgb, var(--accent) 24%, transparent); }
.term-pill .term-write {
  color: var(--on-accent);
  background: var(--accent);
}
.term-pill .term-write:hover { filter: brightness(1.1); }
.term-pill .term-btn:active { transform: scale(0.88); }

/* ── 全局图标 tooltip（icon-tooltip.ts 委托渲染到 body，逃出容器 overflow）────── */
.icon-tip {
  position: fixed;
  z-index: 9999;
  max-width: 260px;
  padding: 5px 9px;
  border-radius: var(--radius-sm);
  background: var(--surface-inverse, #1f2430);
  color: var(--on-inverse, #eef1f7);
  border: 1px solid var(--border-soft);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 600;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 120ms ease, transform 120ms ease;
}
.icon-tip.show {
  opacity: 1;
  transform: translateY(0);
}
/* 小箭头指向触发按钮 */
.icon-tip::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 7px;
  height: 7px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--surface-inverse, #1f2430);
  border: 1px solid var(--border-soft);
}
.icon-tip[data-placement="top"]::after {
  bottom: -4px;
  border-top: none;
  border-left: none;
}
.icon-tip[data-placement="bottom"]::after {
  top: -4px;
  border-bottom: none;
  border-right: none;
}

dialog {
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0;
  background: var(--surface);
  color: var(--fg);
  box-shadow: var(--modal-shadow);
}

dialog::backdrop {
  background: var(--modal-backdrop);
  backdrop-filter: blur(3px);
}

dialog article {
  display: grid;
  gap: 12px;
  padding: 18px;
}
dialog header {
  display: grid;
  gap: 5px;
  margin: 0;
}
dialog h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 720;
  line-height: 1.25;
}
dialog header p {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

#drawer {
  width: min(760px, calc(100vw - 32px));
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--modal-shadow);
}

#drawer article {
  gap: 14px;
  padding: 16px;
}

#drawer header {
  gap: 9px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
}

#drawer .drawer-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

#drawer header h3 {
  min-width: 0;
  margin: 0;
  color: var(--fg);
  font-size: 17px;
  font-weight: 760;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

#drawer .drawer-close-btn {
  flex: none;
  border-radius: var(--radius-full);
}

#drawer p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

#drawer p b {
  color: var(--fg);
  font-weight: 760;
}

#drawer .actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 2px;
}

#drawer .actions > button,
#drawer .actions > .btn-link,
#drawer .actions .term-pill {
  min-height: var(--button-height);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
}

#drawer .actions > button:not(.card-act) {
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--fg);
}

#drawer .actions > button:not(.card-act):hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

#drawer .actions > button.primary {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border-soft));
  background: transparent;
  color: var(--accent);
}

#drawer .actions > button.contrast {
  border-color: color-mix(in srgb, var(--danger) 62%, var(--border-soft));
  background: transparent;
  color: var(--danger);
}

#drawer .actions .card-act {
  border-radius: var(--radius-full);
}

#drawer #insight-area {
  display: grid;
  gap: 10px;
}

dialog code,
td code,
.form-row code {
  padding: 2px 5px;
  border-radius: 5px;
  background: var(--surface-muted);
  color: var(--fg);
  font: 12px/1.3 var(--mono);
}

.actions,
.actions-cell {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.actions { margin: 14px 0; }

:where(dialog, .feishu-login-modal, .team-role-dialog, .wb-delete-dialog, .auth-expired-dialog, .insights-page .modal-panel)
  :where(button:not(.card-act):not(.term-btn):not(.modal-close):not(.feishu-login-close), .btn-link:not(.card-act):not(.term-btn)) {
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
}

:where(dialog, .feishu-login-modal, .team-role-dialog, .wb-delete-dialog, .auth-expired-dialog, .insights-page .modal-panel)
  :where(button.primary, .btn-link.primary) {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border-soft));
  background: transparent;
  color: var(--accent);
}

:where(dialog, .feishu-login-modal, .team-role-dialog, .wb-delete-dialog, .auth-expired-dialog, .insights-page .modal-panel)
  :where(button.primary, .btn-link.primary):hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

:where(dialog, .feishu-login-modal, .team-role-dialog, .wb-delete-dialog, .auth-expired-dialog, .insights-page .modal-panel)
  :where(button.contrast, button.danger) {
  border-color: color-mix(in srgb, var(--danger) 48%, var(--border-soft));
  background: transparent;
  color: var(--danger);
}

:where(dialog, .feishu-login-modal, .team-role-dialog, .wb-delete-dialog, .auth-expired-dialog, .insights-page .modal-panel)
  :where(button.contrast, button.danger):hover:not(:disabled) {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 9%, transparent);
  color: var(--danger);
}

:where(dialog, .feishu-login-modal, .team-role-dialog, .wb-delete-dialog, .auth-expired-dialog, .insights-page .modal-panel) .actions {
  justify-content: flex-end;
  margin: 0;
}

.auth-expired-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--modal-backdrop);
  backdrop-filter: blur(3px);
}

.auth-expired-dialog {
  display: grid;
  gap: 12px;
  width: min(460px, 90vw);
  padding: 18px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--fg);
  box-shadow: var(--modal-shadow);
  text-align: center;
}

.auth-expired-dialog h2 {
  margin: 0;
  color: var(--fg);
  font-size: 17px;
  line-height: 1.25;
}

.auth-expired-dialog p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.auth-expired-dialog button {
  justify-self: center;
}

.auth-expired-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.auth-login-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 18px;
  border-radius: var(--radius-lg);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 13px;
  text-decoration: none;
}

.auth-login-link:hover {
  filter: brightness(.96);
}

.checkbox-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  padding: 7px 0;
  color: var(--fg);
}

/* Keep the checkbox and its title on one line (don't let flex shrink the title
   into a vertical sliver), and drop the help text onto its own line, indented
   under the title for readability. */
.checkbox-row input[type=checkbox] { flex: 0 0 auto; margin: 0; }
.checkbox-row strong { flex: 0 0 auto; }

.checkbox-row small {
  flex: 1 1 100%;
  margin-left: 24px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

#g-drawer form,
#g-drawer fieldset {
  display: grid;
  gap: 12px;
}

#g-drawer .g-create-dialog {
  --g-create-gap: 12px;
  --g-create-inner-gap: 8px;
  gap: 12px;
}

#g-drawer :where(.g-add-bots-dialog, .g-save-profile-dialog, .g-manage-dialog) > header {
  justify-items: center;
  text-align: center;
}

#g-drawer :where(.g-add-bots-dialog, .g-save-profile-dialog, .g-manage-dialog) > header h3 {
  max-width: min(560px, 100%);
  text-align: center;
}

#g-drawer :where(button, .btn-link) {
  box-shadow: none !important;
}

#g-drawer .g-create-dialog > header {
  text-align: center;
}

#g-drawer .g-create-dialog > p,
#g-drawer .g-create-head p {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
}

#g-drawer.groups-create-modal {
  width: min(720px, calc(100vw - 32px));
  overflow: hidden;
  border-color: var(--border-soft);
}

#g-drawer.groups-create-modal .g-create-dialog {
  max-height: calc(100vh - 32px);
  overflow: auto;
}

#g-drawer.groups-create-modal .g-create-head {
  justify-items: center;
  gap: 6px;
  min-height: var(--section-title-row-height);
}

#g-drawer.groups-create-modal .g-create-head h3 {
  margin: 0;
  font-size: var(--section-title-font-size);
  font-weight: 700;
  line-height: var(--section-title-text-height);
}

#g-drawer.groups-create-modal .g-create-form {
  display: grid;
  gap: var(--g-create-gap);
}

#g-drawer.groups-create-modal .g-create-bots {
  gap: var(--g-create-inner-gap);
}

#g-drawer.groups-create-modal .g-bot-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--g-create-inner-gap);
}

#g-drawer.groups-create-modal .g-create-fields {
  display: grid;
  gap: var(--g-create-gap);
}

#g-drawer.groups-create-modal .g-profile-menu {
  width: 100%;
}

#g-drawer.groups-create-modal .g-profile-menu > summary {
  background: var(--surface);
  font-size: 12px;
}

#g-drawer.groups-create-modal .g-profile-menu .sect-sort-value {
  max-width: calc(100% - 44px);
}

#g-drawer.groups-create-modal .g-profile-menu .sect-sort-pop {
  left: 0;
  right: 0;
  min-width: 100%;
  transform: none;
}

#g-drawer.groups-create-modal .g-profile-menu .sect-sort-pop button {
  justify-content: flex-start;
}

#g-drawer.groups-create-modal .g-feed-group-new {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

#g-drawer.groups-create-modal .g-feed-group-new > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

#g-drawer.groups-create-modal .g-create-status:empty {
  display: none;
}

#g-drawer.groups-create-modal .g-create-actions {
  gap: var(--g-create-inner-gap);
  justify-content: flex-end;
  margin: 0;
}

#g-drawer.groups-create-modal .g-create-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

#g-drawer.groups-create-modal .g-create-actions button.primary {
  box-shadow: none;
}

#g-drawer.groups-create-modal .button-spinner {
  width: 13px;
  height: 13px;
  flex: none;
  border: 2px solid color-mix(in srgb, currentColor 34%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: page-loading-rotate 0.8s linear infinite;
}

#g-drawer .form-row {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 70%, transparent);
}

#g-drawer .form-row > span {
  margin: 0;
}

#g-drawer .form-row :where(input, select),
#g-drawer .g-modal-field :where(input, select) {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: var(--button-height);
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border-color: var(--border-soft);
  border-radius: var(--radius-full);
  background-color: var(--surface);
}

#g-drawer .g-modal-field :where(input, select):hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft));
}

#g-drawer .g-modal-field :where(input, select):focus {
  border-color: var(--accent);
  box-shadow: none;
  outline: none;
}

#g-drawer fieldset {
  margin: 0;
  padding: 12px;
  border-color: var(--border-soft);
  background: color-mix(in srgb, var(--surface-muted) 70%, transparent);
}

#g-drawer .g-modal-field legend {
  padding: 0 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

#g-drawer .g-modal-field small {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

#g-drawer :where(button.primary, .btn-link.primary),
.onboarding-dialog button.primary {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border-soft));
  background: transparent;
  color: var(--accent);
}

#g-drawer :where(button.primary, .btn-link.primary):hover:not(:disabled),
.onboarding-dialog button.primary:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

#g-drawer .checkbox-row {
  position: relative;
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  min-height: var(--button-height);
  margin: 0;
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  cursor: pointer;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    color 150ms ease;
}

#g-drawer .checkbox-row::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: var(--radius-full);
  background: var(--border-soft);
  box-shadow: inset 0 0 0 1px var(--border);
}

#g-drawer .checkbox-row:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}

#g-drawer .checkbox-row:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  color: var(--accent-strong);
}

#g-drawer .checkbox-row:has(input:checked)::before {
  background: var(--accent);
  box-shadow: none;
}

#g-drawer .checkbox-row:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

#g-drawer .checkbox-row input[type=checkbox] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

#g-drawer .checkbox-row-main,
#g-drawer .checkbox-row > strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

#g-drawer .checkbox-row-main strong,
#g-drawer .checkbox-row > strong {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#g-drawer .checkbox-row-main small,
#g-drawer .checkbox-row > small {
  flex: none;
  margin: 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1;
  white-space: nowrap;
}

.empty {
  color: var(--muted);
  padding: 18px;
  text-align: center;
}

.plugin-management-page {
  align-content: start;
  width: 100%;
}

.plugin-heading-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.plugin-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 12px;
}

.plugin-summary-card {
  max-width: none;
  margin-bottom: 0;
  padding: 14px 16px;
}

.plugin-management-page .plugin-summary-card,
.plugin-management-page .plugin-card {
  max-width: none;
}

.plugin-summary-card span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.plugin-summary-card strong {
  display: block;
  margin-top: 6px;
  font-size: 26px;
  line-height: 1;
}

.plugin-card-list {
  display: grid;
  gap: 14px;
  width: 100%;
}

.plugin-card {
  width: 100%;
  max-width: none;
  margin-bottom: 0;
  padding: 0;
  overflow: hidden;
}

.plugin-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-soft);
}

.plugin-card-head h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
}

.plugin-title-block {
  min-width: 0;
}

.plugin-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.plugin-card-head p {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.plugin-card-head code {
  font-family: var(--mono);
  color: var(--fg);
}

.plugin-expand-button {
  flex: none;
  min-width: 76px;
  justify-content: center;
}

.plugin-global-setting {
  min-height: 64px;
  margin: 0;
  padding: 12px 18px;
  align-items: center;
  border-bottom: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
}

.plugin-global-setting-copy {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 3px;
}

.plugin-global-setting-copy strong {
  font-size: 13px;
  line-height: 1.35;
}

.plugin-global-setting-copy small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.plugin-global-setting input:focus-visible + .switch {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.plugin-card-summary {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--surface-muted) 38%, transparent);
}

.plugin-capability-summary {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.plugin-capability-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.plugin-capability-chip strong {
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

.plugin-scope-summary {
  flex: none;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.plugin-card-expanded {
  min-width: 0;
}

.plugin-settings-pending {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--muted);
  font-size: 12px;
}

.plugin-enable-panel {
  display: grid;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--surface-muted) 34%, transparent);
}

.plugin-enable-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.plugin-enable-panel-head > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.plugin-enable-panel-head strong {
  font-size: 13px;
  line-height: 1.3;
}

.plugin-enable-panel-head small,
.plugin-enable-panel-head > span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.plugin-enable-panel-head > span {
  flex: none;
  padding-top: 1px;
  font-variant-numeric: tabular-nums;
}

.plugin-enable-list {
  max-height: 272px;
  overflow-y: auto;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  background: var(--surface);
}

.plugin-enable-list .plugin-enable-row {
  min-height: 56px;
  margin: 0;
  padding: 11px 24px;
  align-items: center;
  gap: 12px;
}

.plugin-enable-row + .plugin-enable-row {
  border-top: 1px solid var(--border-soft);
}

.plugin-enable-row:hover {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.plugin-enable-copy {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 3px;
}

.plugin-enable-copy strong {
  font-size: 12.5px;
  line-height: 1.35;
}

.plugin-enable-copy small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.plugin-enable-row .switch {
  margin-top: 0;
}

.plugin-enable-row input:focus-visible + .switch {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.plugin-enable-empty {
  padding: 13px 24px;
  color: var(--muted);
  font-size: 12px;
}

.plugin-action-area {
  display: grid;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--surface-muted) 62%, transparent);
}

.plugin-action-title {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}

.plugin-action-title span {
  color: var(--fg);
  font-size: 12px;
  font-weight: 800;
}

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

.plugin-action-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr);
  gap: 18px;
  align-items: start;
}

.plugin-action-group {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.plugin-action-group + .plugin-action-group {
  padding-left: 18px;
  border-left: 1px solid var(--border-soft);
}

.plugin-action-head {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.plugin-action-head > span:first-child {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.plugin-action-head strong {
  font-size: 13px;
  line-height: 1.25;
}

.plugin-action-meta,
.plugin-action-links {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
}

.plugin-action-meta > span {
  font-family: var(--mono);
}

.plugin-card-body {
  padding: 18px;
}

.plugin-tabs {
  display: grid;
  gap: 14px;
}

.plugin-tab-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(112px, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--surface-muted);
  overflow-x: auto;
}

.plugin-tab-button {
  min-width: 0;
  appearance: none;
  border: 0;
  border-radius: 6px;
  padding: 12px 14px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
}

.plugin-tab-button:hover {
  background: var(--surface);
  color: var(--fg);
}

.plugin-tab-button.is-active {
  background: var(--surface);
  color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.plugin-tab-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.plugin-tab-button strong {
  display: block;
  font-size: 24px;
  line-height: 1;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.plugin-tab-button span {
  display: block;
  margin-top: 6px;
  color: var(--fg);
  font-size: 12px;
  font-weight: 800;
}

.plugin-tab-button small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.plugin-tab-panels {
  min-width: 0;
}

.plugin-tab-panel {
  display: none;
}

.plugin-tab-panel.is-active {
  display: block;
}

.plugin-tab-panel-head {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
}

.plugin-tab-panel-head h3 {
  margin: 0;
  font-size: 14px;
  line-height: 1.3;
}

.plugin-tab-panel-head p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.plugin-card-controls {
  display: flex;
  justify-content: flex-end;
  padding: 11px 18px;
  border-bottom: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--surface-muted) 32%, transparent);
}

.plugin-card-controls .toggle-row {
  width: min(300px, 100%);
  padding: 3px 0;
}

.plugin-pin-toggle {
  color: var(--muted);
}

.plugin-chip,
.plugin-status {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.plugin-chip {
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border-soft);
}

.plugin-info-table {
  border-top: 1px solid var(--border-soft);
}

.plugin-info-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.24fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-soft);
}

.plugin-info-row > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.plugin-info-row > div,
.plugin-service-actions {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.plugin-info-stack {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.plugin-info-stack > div {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.plugin-info-stack > div > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.plugin-inline-code {
  max-width: 100%;
  overflow-wrap: anywhere;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg);
}

.plugin-empty-state {
  padding: 12px 0;
  color: var(--muted);
  font-size: 12px;
}

.plugin-service-url {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
}

.plugin-service-actions {
  align-self: start;
  justify-content: flex-start;
  min-width: 0;
}

.plugin-service-actions .btn-link {
  padding: 6px 12px;
}

.plugin-status-ok { background: var(--success-soft); color: var(--success); }
.plugin-status-idle { background: var(--surface); color: var(--muted); }
.plugin-status-bad { background: var(--danger-soft); color: var(--danger); }
.plugin-status-muted { background: var(--surface); color: var(--muted); }

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

.plugin-warning {
  margin-top: 6px;
  color: var(--danger);
  font-size: 12px;
}

.plugin-link {
  color: var(--accent);
  text-decoration: none;
}

.plugin-link:hover {
  text-decoration: underline;
}

.plugin-dashboard-shell {
  display: grid;
  gap: 16px;
}

.plugin-dashboard-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.plugin-dashboard-back {
  width: fit-content;
}

.plugin-dashboard-heading {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-soft);
}

.plugin-dashboard-kicker {
  margin: 0 0 6px !important;
  color: var(--muted) !important;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
}

.plugin-dashboard-heading code {
  font-family: var(--mono);
  color: var(--fg);
}

.plugin-dashboard-heading p:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.plugin-dashboard-content {
  min-width: 0;
}

.plugin-feedback-dialog {
  width: min(440px, calc(100vw - 32px));
  margin: auto;
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--surface);
  color: var(--fg);
  box-shadow: var(--modal-shadow);
  overflow: hidden;
}

.plugin-feedback-dialog::backdrop {
  background: var(--modal-backdrop);
  backdrop-filter: blur(3px);
}

.plugin-feedback-dialog article {
  display: grid;
  gap: 0;
  margin: 0;
  background: var(--surface);
}

.plugin-feedback-dialog header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 18px 12px;
}

.plugin-feedback-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 16px;
  font-weight: 800;
}

.plugin-feedback-dialog header > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.plugin-feedback-dialog header p,
.plugin-feedback-dialog header h2,
.plugin-feedback-message {
  margin: 0;
}

.plugin-feedback-dialog header p {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.plugin-feedback-dialog header h2 {
  font-size: 17px;
  line-height: 1.35;
}

.plugin-feedback-message {
  padding: 0 18px 18px 60px;
  color: var(--fg);
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.plugin-feedback-dialog footer {
  display: flex;
  justify-content: flex-end;
  padding: 12px 18px;
  border-top: 1px solid var(--border-soft);
  background: var(--surface-muted);
}

@media (max-width: 1180px) {
  .plugin-action-grid {
    grid-template-columns: 1fr;
  }

  .plugin-action-group + .plugin-action-group {
    padding-top: 10px;
    padding-left: 0;
    border-top: 1px solid var(--border-soft);
    border-left: 0;
  }

  .plugin-tab-list {
    grid-template-columns: repeat(3, minmax(100px, 1fr));
  }
}

@media (max-width: 900px) {
  .plugin-summary-grid,
  .plugin-tab-list {
    grid-template-columns: 1fr;
  }

  .plugin-card-head,
  .plugin-action-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .plugin-card-controls {
    width: 100%;
    justify-content: flex-start;
  }

  .plugin-card-summary {
    display: grid;
  }

  .plugin-scope-summary {
    justify-self: start;
  }

  .plugin-heading-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .plugin-enable-panel-head {
    display: grid;
    gap: 5px;
  }

  .plugin-enable-panel-head > span {
    padding-top: 0;
  }

  .plugin-info-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .plugin-feedback-message {
    padding-left: 18px;
  }

}

.form-row {
  display: block;
  margin: 12px 0;
}

.form-row span,
.bd-body .bd-row :where(label, .bd-field) > span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.form-row input[type=text],
.bd-body .bd-row input[type=text] {
  width: 100%;
}

fieldset {
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

fieldset legend {
  padding: 0 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.hint-ok,
.hint-warn {
  padding: 10px 12px;
  border-radius: var(--radius-lg);
  margin: 10px 0;
  font-size: 13px;
}

.hint-ok {
  background: var(--success-soft);
  border: 1px solid color-mix(in srgb, var(--success) 28%, transparent);
  color: var(--success);
}

.hint-warn {
  background: var(--warning-soft);
  border: 1px solid color-mix(in srgb, var(--warning) 28%, transparent);
  color: var(--warning);
}

.hint-warn-inline { color: var(--warning); }

.bulk-bar {
  --bulk-bar-bg: color-mix(in srgb, var(--warning) 10%, var(--bg));
  position: sticky;
  top: 78px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bulk-bar-bg);
  border: 1px solid color-mix(in srgb, var(--warning) 28%, transparent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.bulk-bar[hidden] { display: none; }
/* Mobile table rules are author-level and can override the UA hidden style;
   keep hidden tables invisible across view toggles such as sessions board/table. */
table[hidden] { display: none !important; }
.bulk-bar #bulk-count { font-weight: 800; margin-right: 4px; }

/* ── Session monitor room ───────────────────────────────────────────────── */
.monitor-room-page {
  min-height: calc(100vh - 120px);
  align-content: start;
}

.monitor-room-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.monitor-room-heading-main {
  min-width: 0;
}

.monitor-room-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}

.monitor-room-title-row h1 {
  flex: none;
}

.monitor-room-back {
  flex: none;
}

.monitor-room-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: var(--button-height);
  min-height: var(--button-height);
  padding: 0 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.monitor-room-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.monitor-room-toggle:has(input:checked) {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--accent-soft);
}

.monitor-room-summary {
  min-width: 0;
  overflow: hidden;
  color: var(--faint);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monitor-room-summary:empty {
  display: none;
}

.monitor-room-grid {
  display: grid;
  gap: 14px;
  align-items: start;
  justify-content: center;
}

.monitor-room-grid[data-count="0"] {
  display: block;
}

.monitor-room-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.monitor-room-card-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--border-soft);
}

.monitor-room-card-title {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.monitor-room-card-meta {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.monitor-room-card-meta strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.monitor-room-card-meta small {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 11px;
}

.monitor-room-card-actions {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.monitor-room-card-actions .card-act,
.monitor-room-popover-head .card-act {
  border-radius: var(--radius-full);
}

.monitor-room-frame-wrap {
  position: relative;
  flex: none;
  min-height: 0;
  aspect-ratio: var(--monitor-room-viewport-ratio, 16 / 10);
  overflow: hidden;
  background: #000;
}

.monitor-room-frame {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  background: #000;
  transform-origin: 0 0;
}

.monitor-room-placeholder,
.monitor-room-empty {
  flex: 1;
  min-height: 260px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 26px;
  text-align: center;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-raised) 82%, #000);
}

.monitor-room-placeholder b,
.monitor-room-empty h2 {
  margin: 0;
  color: var(--fg);
  font-size: 16px;
}

.monitor-room-placeholder span,
.monitor-room-empty p {
  margin: 0;
  max-width: 520px;
  line-height: 1.6;
}

.monitor-room-card-empty .monitor-room-frame-wrap {
  background: var(--surface-muted);
}

.monitor-room-popover-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: clamp(14px, 3vw, 34px);
  background: rgba(15, 23, 42, 0.28);
  backdrop-filter: blur(2px);
}

.monitor-room-popover {
  width: min(1480px, 94vw);
  height: min(980px, 88vh);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.26);
  outline: none;
}

.monitor-room-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 9px 10px 9px 12px;
  border-bottom: 1px solid var(--border-soft);
}

.monitor-room-popover-frame {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  background: #000;
}

@media (max-width: 760px) {
  .monitor-room-card {
    min-height: 0;
  }
  .monitor-room-frame-wrap {
    min-height: 0;
  }
  .monitor-room-popover-backdrop {
    padding: 10px;
  }
  .monitor-room-popover {
    width: 100%;
    height: 92vh;
  }
}
.idle-cleanup-bar {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: none;
  margin: 0 0 0 auto;
}
.idle-cleanup-bar.is-open {
  z-index: 1301;
}
.idle-cleanup-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: var(--radius-full);
  background: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 12%, transparent);
}
.idle-cleanup-bar.is-empty .idle-cleanup-dot {
  background: var(--muted);
  box-shadow: none;
}
.idle-cleanup-count,
.idle-cleanup-status,
.idle-cleanup-label {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.idle-cleanup-count {
  gap: 7px;
  min-height: var(--button-compact-height);
  padding: 0 10px;
  border-radius: var(--radius-full);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  color: var(--fg);
  font-size: 11.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.idle-cleanup-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.idle-cleanup-run {
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border-radius: var(--radius-full);
  font-weight: 800;
  transition: transform .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease;
}
.idle-cleanup-run .idle-cleanup-icon {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.idle-cleanup-run:hover:not(:disabled) {
  transform: translateY(-1px);
}
.idle-cleanup-run:active:not(:disabled) {
  transform: scale(.98);
}
.idle-cleanup-status {
  padding: 0 var(--button-padding-x);
  border-radius: var(--radius-full);
  border: 1px solid color-mix(in srgb, var(--success) 24%, var(--border-soft));
  background: color-mix(in srgb, var(--success) 8%, var(--surface));
  color: var(--success);
  font-size: 11.5px;
  font-weight: 800;
}
.idle-cleanup-status:empty {
  display: none;
}
.idle-cleanup-pop {
  --idle-cleanup-segment-active-bg: color-mix(in srgb, var(--muted) 12%, var(--surface));
  --idle-cleanup-segment-active-fg: var(--accent);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1302;
  display: grid;
  gap: 10px;
  width: min(292px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--modal-shadow);
  transform: none;
}
.idle-cleanup-pop-head,
.idle-cleanup-pop-field,
.idle-cleanup-pop-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.idle-cleanup-pop-head {
  justify-content: space-between;
}
.idle-cleanup-pop-title {
  color: var(--fg);
  font-size: 12px;
  font-weight: 800;
}
.idle-cleanup-pop-field {
  justify-content: space-between;
}
.idle-cleanup-threshold-options {
  display: grid;
  box-sizing: border-box;
  align-items: center;
  gap: 2px;
  grid-template-columns: repeat(3, 54px);
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 2px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  box-shadow: none;
}
.idle-cleanup-threshold-options button {
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  height: calc(var(--button-height) - 6px);
  min-height: calc(var(--button-height) - 6px);
  max-height: calc(var(--button-height) - 6px);
  width: 54px;
  min-width: 54px;
  max-width: 54px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  box-shadow: none;
}
.idle-cleanup-threshold-options button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--border-soft) 60%, transparent);
  color: var(--accent-strong);
}
.idle-cleanup-threshold-options button.active,
.idle-cleanup-threshold-options button[aria-pressed="true"] {
  background: var(--idle-cleanup-segment-active-bg);
  color: var(--idle-cleanup-segment-active-fg);
}
.idle-cleanup-threshold-options button.active:hover:not(:disabled),
.idle-cleanup-threshold-options button[aria-pressed="true"]:hover:not(:disabled) {
  background: var(--idle-cleanup-segment-active-bg);
  color: var(--idle-cleanup-segment-active-fg);
}
.idle-cleanup-pop-actions {
  justify-content: flex-end;
}
.idle-cleanup-pop-actions button {
  min-height: var(--button-height);
  min-width: 72px;
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.idle-cleanup-pop-actions button:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}
.idle-cleanup-pop-actions .idle-cleanup-confirm {
  border-color: color-mix(in srgb, var(--danger) 68%, var(--border-soft));
  background: transparent;
  color: var(--danger);
}
.idle-cleanup-pop-actions .idle-cleanup-confirm:hover:not(:disabled) {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: var(--danger);
}
:root[data-theme="dark"] .idle-cleanup-count {
  background: var(--surface);
}
:root[data-theme="dark"] .idle-cleanup-status {
  background: color-mix(in srgb, var(--success) 12%, transparent);
}
@media (max-width: 720px) {
  .idle-cleanup-bar {
    flex: 0 0 auto;
    min-width: 0;
    margin-left: 0;
  }
  .idle-cleanup-run {
    flex: 1 1 118px;
  }
  .idle-cleanup-pop {
    left: 0;
    right: auto;
    transform: none;
  }
}
input.row-select,
#select-all { cursor: pointer; }

.onboarding-dialog {
  width: min(520px, calc(100vw - 32px));
}

.onboarding-card {
  display: grid;
  gap: 12px;
  max-height: calc(100vh - 32px);
  overflow: auto;
}

.onboarding-header {
  text-align: center;
}

.onboarding-status {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.onboarding-status.status-completed { color: var(--success); }
.onboarding-status.status-failed { color: var(--danger); }

.qr-card {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
}

.qr-image {
  width: min(260px, 74vw);
  height: auto;
  border: 10px solid var(--qr-surface);
  border-radius: var(--radius-lg);
  background: var(--qr-surface);
}

.onboarding-link {
  color: var(--accent-strong);
  font-weight: 800;
  text-decoration: none;
}

.onboarding-link:hover {
  text-decoration: underline;
}

.onboarding-form {
  display: grid;
  gap: 12px;
  margin: 0;
}

.onboarding-fieldset {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 70%, transparent);
}

.onboarding-fieldset legend {
  padding: 0 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.onboarding-fieldset select,
.onboarding-fieldset input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: var(--button-height);
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  line-height: normal;
}

.onboarding-fieldset select {
  padding-right: 36px;
  background-position: right 14px center;
}

.onboarding-fieldset :where(select, input):hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft));
}

.onboarding-fieldset :where(select, input):focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.onboarding-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.onboarding-meta {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.6;
}

.form-error {
  margin: 0;
  color: var(--danger);
  font-weight: 700;
  font-size: 13px;
}

.onboarding-steps {
  margin: 10px 0 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
}

.onboarding-steps a {
  color: var(--accent-strong);
  font-weight: 700;
  text-decoration: none;
}

.onboarding-steps a:hover {
  text-decoration: underline;
}

/* ─── 添加机器人 modal ─────────────────────────────────────────────────── */
dialog.onboarding-dialog {
  width: min(520px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: transparent;
  box-shadow: none;
  color: var(--fg);
}

dialog.onboarding-dialog::backdrop {
  background: var(--modal-backdrop);
  backdrop-filter: blur(3px);
}

.onboarding-card {
  --ob-gap: 12px;
  display: grid;
  gap: var(--ob-gap);
  max-height: calc(100vh - 32px);
  padding: 18px;
  overflow: auto;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--modal-shadow);
}

.onboarding-header {
  display: grid;
  gap: 6px;
  text-align: center;
}

.onboarding-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
}

.onboarding-header h3::before {
  display: none;
}

.onboarding-header p {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.onboarding-form {
  display: grid;
  gap: var(--ob-gap);
  margin: 0;
}

.onboarding-field {
  display: grid;
  gap: 6px;
  width: 100%;
  min-width: 0;
  margin: 0;
}

.onboarding-field > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.onboarding-field input[type="text"] {
  box-sizing: border-box;
  width: 100%;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  box-shadow: none;
}

.onboarding-field input[type="text"]:hover:not(:disabled),
.onboarding-field input[type="text"]:focus {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
  outline: none;
  box-shadow: none;
}

.onboarding-menu {
  width: 100%;
  min-width: 0;
}

.onboarding-menu > summary {
  width: 100%;
  min-width: 0;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  box-sizing: border-box;
}

.onboarding-menu .sect-sort-value {
  max-width: 100%;
}

.onboarding-menu .sect-sort-pop {
  left: 0;
  width: 100%;
  min-width: 100%;
  max-height: min(280px, 42vh);
  overflow-y: auto;
  transform: none;
  z-index: 1300;
}

.onboarding-menu[open] {
  position: relative;
  z-index: 1300;
}

.onboarding-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  min-height: var(--button-height);
  margin: 0;
  padding: 0;
}

.onboarding-actions button {
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
}

.onboarding-actions .onboarding-submit {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border-soft));
  background: transparent;
  color: var(--accent);
}

.onboarding-actions .onboarding-submit:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

.onboarding-status {
  min-height: var(--button-height);
  margin: 0;
  padding: 0 var(--button-padding-x);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  width: fit-content;
  max-width: 100%;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.onboarding-meta {
  margin: 0;
  padding: 9px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.onboarding-fieldset {
  display: contents;
}

.oncall-row {
  padding: 10px 0;
  border-top: 1px dashed var(--border);
}

.oncall-row:first-of-type { border-top: none; }

.oncall-row-body {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
  padding-left: 24px;
  flex-wrap: wrap;
}

.oncall-row-body input[type=text] {
  flex: 1;
  min-width: 220px;
  font-family: var(--mono);
  font-size: 12px;
}

.oncall-row-body input[type=text]:disabled,
.bd-body .bd-row input[type=text]:disabled {
  background: var(--surface-muted);
  color: var(--faint);
}

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

#g-drawer .oncall-row {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

#g-drawer .oncall-row:first-of-type {
  border-top: 1px solid var(--border-soft);
}

#g-drawer .oncall-row-body {
  margin-top: 0;
  padding-left: 0;
}

#g-drawer .oncall-row-body input[type=text] {
  height: var(--button-height);
  min-height: var(--button-height);
  border-color: var(--border-soft);
  border-radius: var(--radius-full);
}

#g-drawer .g-manage-dialog {
  gap: 10px;
}

#g-drawer .g-manage-dialog > header {
  margin-bottom: 0;
}

#g-drawer .g-manage-meta {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  min-width: 0;
  margin: -2px 0 2px;
  overflow: hidden;
}

#g-drawer .g-manage-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  min-width: 0;
  max-width: 50%;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

#g-drawer .g-manage-meta b {
  flex: none;
  color: var(--muted);
  font-weight: 700;
}

#g-drawer .g-manage-meta code {
  min-width: 0;
  overflow: hidden;
  padding: 0;
  background: transparent;
  color: var(--fg);
  text-overflow: ellipsis;
  white-space: nowrap;
}

#g-drawer .g-leave-picker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

#g-drawer .g-leave-picker .checkbox-row {
  flex: 0 1 auto;
}

#g-drawer .g-manage-danger-hint {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  box-sizing: border-box;
  width: fit-content;
  max-width: min(460px, 100%);
  min-height: 30px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--warning) 34%, var(--border-soft));
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--warning) 8%, var(--surface));
  color: var(--warning);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  white-space: normal;
}

@media (max-width: 720px) {
  #g-drawer .g-manage-meta {
    flex-wrap: wrap;
  }

  #g-drawer .g-manage-meta > span {
    max-width: 100%;
  }
}

.bd-card {
  max-width: 860px;
  padding: 16px 18px;
  margin-bottom: 14px;
}

.bd-card header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}

.bd-card header strong { font-size: 16px; }
.bd-card header small { color: var(--muted); font-family: var(--mono); font-size: 11px; }
.bd-body .bd-row { margin: 12px 0 8px; }
.bd-body .bd-row :where(label, .bd-field) { display: block; }
.bd-body .bd-row input[type=text] { font-family: var(--mono); font-size: 12px; }
.bd-meta { display: flex; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: 12px; margin: 8px 0; }
.oncall-status.hint-ok { background: transparent; border: none; padding: 0; margin: 0; color: var(--success); }

/* Each bd-card groups several independent defaults (oncall, signature, …);
   bd-section gives every group its own labelled, divided block. */
.bd-section { padding-top: 14px; }
.bd-section + .bd-section { margin-top: 14px; border-top: 1px solid var(--border-soft); }
.bd-section-title {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.bd-section-note { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
/* CLI-data-isolation capability line under the file-sandbox toggle: green when
   the CLI data root is redirected into this bot's private BOT_HOME, muted grey
   when only the base deny-by-default file sandbox applies. */
.bd-section-note[data-read-iso-capability] { margin-top: 8px; padding: 7px 10px; border-radius: 9px; line-height: 1.55; }
.bd-section-note[data-read-iso-capability="yes"] {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--success) 24%, transparent);
}
.bd-section-note[data-read-iso-capability="no"] {
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 6%, transparent);
  border: 1px solid var(--border-soft);
}

/* ── Sandbox directory whitelist tree ── */
.bd-sbx-tree { margin-top: 10px; max-height: 380px; overflow: auto; border: 1px solid var(--border-soft); border-radius: 9px; padding: 8px; font-size: 13px; }
.bd-sbx-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; padding: 2px 0; min-width: 0; }
.bd-sbx-twisty { cursor: pointer; flex: 0 0 14px; text-align: center; color: var(--muted); user-select: none; }
.bd-sbx-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono, monospace); }
.bd-sbx-state { cursor: pointer; flex: 0 0 auto; width: 84px; text-align: center; font-size: 11px; padding: 1px 0; border-radius: 999px; border: 1px solid var(--border-soft); background: transparent; color: var(--muted); }
.bd-sbx-state-inherit { color: var(--muted); border-style: dashed; }
.bd-sbx-state-readWrite { color: #1a7f37; background: color-mix(in srgb, #1a7f37 12%, transparent); border-color: color-mix(in srgb, #1a7f37 40%, transparent); }
.bd-sbx-state-readOnly { color: #9a6700; background: color-mix(in srgb, #9a6700 12%, transparent); border-color: color-mix(in srgb, #9a6700 40%, transparent); }
.bd-sbx-state-deny { color: #cf222e; background: color-mix(in srgb, #cf222e 12%, transparent); border-color: color-mix(in srgb, #cf222e 40%, transparent); }
.bd-sbx-state-none { color: var(--muted); }
.bd-sbx-empty { color: var(--muted); font-size: 12px; padding: 2px 0; }
.bd-sbx-text { margin-top: 10px; width: 100%; box-sizing: border-box; font-family: var(--mono, monospace); font-size: 13px; padding: 8px; border: 1px solid var(--border-soft); border-radius: 9px; resize: vertical; }
.bd-sbx-tester { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.bd-sbx-test-input { flex: 1 1 240px; font-family: var(--mono, monospace); font-size: 13px; padding: 6px 9px; border: 1px solid var(--border-soft); border-radius: 8px; }
.bd-sbx-test-out { font-size: 12px; font-family: var(--mono, monospace); padding: 2px 8px; border-radius: 8px; }

/* ── Version & update card ── */
.update-version { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.update-badge { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.update-badge-new { color: var(--accent-strong); background: var(--accent-soft); }
.update-badge-ok { color: var(--success); background: var(--success-soft); }
.update-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.update-install-list { margin: 6px 0 0; padding-left: 18px; font-size: 12px; line-height: 1.6; }
.update-install-list code { font-size: 11px; }
.update-install-list small { color: var(--muted); }
.cli-runtime-updates { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.cli-runtime-updates > strong { display: block; margin-bottom: 8px; font-size: 12px; color: var(--muted); }
.cli-runtime-updates ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cli-runtime-updates li { min-width: 0; padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: var(--radius-lg); background: var(--surface-muted); }
.cli-runtime-updates li.is-behind { border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft)); }
.cli-runtime-update-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 5px; font-size: 13px; font-weight: 600; }
.cli-runtime-updates li > code { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--muted); }
.cli-runtime-updates li > small { display: block; margin-top: 5px; color: var(--muted); }
.cli-runtime-updates .settings-help { margin: 8px 0 0; }
.update-changelog { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.update-release { border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 8px 12px; background: var(--surface-muted); }
.update-release > summary { cursor: pointer; font-size: 13px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.update-release > summary small { color: var(--muted); font-size: 11px; }
.update-release-body { margin: 8px 0 0; white-space: pre-wrap; word-break: break-word; font-size: 12px; line-height: 1.5; max-height: 320px; overflow: auto; color: var(--fg); }

/* A lighter sub-group inside a bd-section (e.g. 主动开工 lives under 新群 Oncall).
   Separated by a soft top rule + indent so it reads as "part of this block". */
.bd-subsection {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-soft);
}
.bd-subsection-title {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--fg);
}
/* 入群首轮 prompt textarea — themed to match the text inputs (dark surface,
   bordered) rather than the unstyled browser default. */
.bd-subsection textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  resize: vertical;
}

@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: static;
    height: auto;
    /* 窄屏恢复块级流：sidebar 变顶部横向导航条，不需要宽屏那套 flex column 纵向分配。 */
    display: block;
    padding: 12px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .sidebar-nav {
    display: flex;
    overflow-x: auto;
    margin-top: 12px;
    padding-bottom: 2px;
  }
  .sidebar-nav a {
    flex: 0 0 auto;
  }
  .sidebar-nav a.sidebar-plugin-item {
    margin-left: 0;
  }
  .sidebar-foot {
    display: none;
  }
  .topbar {
    position: static;
    align-items: flex-start;
  }
  .metric-grid,
  .overview-grid {
    grid-template-columns: 1fr;
  }
  main {
    width: 100%;
    margin-right: 0;
    padding: 16px;
    overflow-x: hidden;
  }
}

@media (max-width: 860px) {
  .filter-check-group {
    grid-template-columns: auto repeat(4, max-content);
  }
}

@media (max-width: 720px) {
  .topbar {
    flex-direction: column;
    padding: 14px 16px;
  }
  .topbar-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .theme-switch {
    max-width: 100%;
    overflow-x: auto;
  }
  .page-heading {
    flex-direction: column;
    align-items: stretch;
  }
  .page-heading-actions {
    justify-content: flex-start;
  }
  .filters {
    align-items: stretch;
  }
  .sessions-filters {
    grid-template-columns: 1fr;
  }
  .filters input[type=search],
  .filters select,
  .filters button,
  .filter-check-group {
    width: 100%;
  }
  .sessions-filters select {
    width: 100%;
  }
  .sessions-view-toggle {
    display: flex;
    width: 100%;
    max-width: calc(100vw - 32px);
    min-width: 0;
  }
  .sessions-view-toggle button {
    flex: 1 1 0;
    min-width: 0;
  }
  .sessions-board {
    grid-template-columns: 1fr;
  }
  /* 窄屏看板：列改纵向堆叠，高度交还内容 */
  .sessions-kanban {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .kanban-column {
    flex: none;
    height: auto;
    min-height: 280px;
    max-height: none;
  }
  .kanban-col-list {
    overflow-y: auto;
  }
  .term-modal {
    width: calc(100vw - 16px);
    height: calc(100vh - 24px);
  }
  .term-modal-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .term-modal-title,
  .term-modal-actions {
    width: 100%;
  }
  .term-modal-actions {
    justify-content: flex-end;
  }
  .term-modal-subtitle {
    flex-wrap: wrap;
  }
  .term-modal-subtitle span {
    max-width: min(220px, 72vw);
  }
  .term-modal-body {
    padding: 8px;
  }
  .filter-check-group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .filter-check-label {
    grid-column: 1 / -1;
  }

  .filter-check {
    justify-content: flex-start;
  }
  table {
    display: block;
    overflow-x: auto;
  }
  #sessions-table:not([hidden]) {
    display: grid;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  #sessions-table thead {
    display: none;
  }
  #sessions-table tbody {
    display: grid;
    gap: 10px;
    min-width: 0;
  }
  #sessions-table tr {
    display: grid;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
  }
  #sessions-table td {
    display: grid;
    grid-template-columns: minmax(82px, 34%) minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-soft);
    white-space: normal;
  }
  #sessions-table tbody tr:last-child td {
    border-bottom: 1px solid var(--border-soft);
  }
  #sessions-table td:last-child {
    border-bottom: 0;
  }
  #sessions-table td::before {
    content: attr(data-label);
    min-width: 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
  }
  #sessions-table td.empty {
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    padding: 24px 12px;
    border-bottom: 0;
  }
  #sessions-table td.empty::before {
    content: none;
  }
  #sessions-table .token-cell {
    text-align: left;
  }
  #sessions-table .sessions-table-text-cell,
  #sessions-table .sessions-table-path-cell {
    max-width: none;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    word-break: break-word;
  }
  #sessions-table .sessions-table-action-cell button {
    justify-self: start;
  }
  .schedules-table {
    display: block;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .schedules-table thead {
    display: none;
  }
  .schedules-table tbody {
    display: grid;
    gap: 10px;
  }
  .schedules-table tr {
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
  }
  .schedules-table td {
    display: grid;
    grid-template-columns: minmax(84px, 0.36fr) minmax(0, 1fr);
    gap: 10px;
    align-items: baseline;
    min-width: 0;
    padding: 0;
    border-bottom: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .schedules-table td[data-label]::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
    text-transform: uppercase;
  }
  .schedules-table td.actions-cell {
    grid-template-columns: 1fr;
  }
  .schedules-table .schedule-actions {
    gap: 8px;
  }
  .schedules-table .schedule-actions button {
    flex: 1 1 120px;
  }
  .schedules-table tr.schedule-empty-row {
    padding: 0;
  }
  .schedules-table tr.schedule-empty-row td {
    display: block;
    padding: 18px;
    text-align: center;
  }
}

/* ─── Roles Page ─── */
.roles-heading {
  align-items: flex-start;
  gap: 16px;
}
.roles-tabs {
  flex: 0 0 auto;
}
.roles-page .roles-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  height: calc(100vh - 160px);
  min-height: 400px;
}
.roles-page .roles-layout[hidden] { display: none !important; }

/* ─── Tree Panel (left) ─── */
.roles-tree-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.roles-tree-header {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 8px;
}
.roles-tree-header input { flex: 1; }
.roles-profile-create {
  align-items: stretch;
}
.roles-profile-create input {
  min-width: 0;
}
.roles-tree {
  flex: 1;
  overflow-y: auto;
}

/* ─── Group rows ─── */
.roles-group-section {
  border-bottom: 1px solid var(--border-soft);
}
.roles-group-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s;
}
.roles-group-row:hover { background: var(--bg-soft); }
.roles-group-row.selected { background: var(--accent-soft); }
.roles-group-arrow {
  font-size: 11px;
  color: var(--muted);
  width: 14px;
  flex-shrink: 0;
  text-align: center;
}
.roles-group-icon {
  font-size: var(--section-title-font-size);
  flex-shrink: 0;
}
.roles-group-info {
  flex: 1;
  min-width: 0;
}
.roles-group-name {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.roles-group-meta {
  font-size: 11px;
  line-height: 1.35;
  color: var(--muted);
  margin-top: 1px;
}
.roles-group-chevron { display: none; }

/* ─── Bot rows (nested) ─── */
.roles-bot-list {
  /* visible when parent is expanded */
}
.roles-bot-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 20px;
  cursor: pointer;
  border-top: 1px solid var(--border-soft);
  transition: background 0.12s;
}
.roles-bot-row:hover { background: var(--bg-soft); }
.roles-bot-row.selected {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  padding-left: 17px;
}
.roles-bot-indent { width: 14px; flex-shrink: 0; }
.roles-bot-icon {
  font-size: 13px;
  flex-shrink: 0;
  opacity: 0.7;
}
.roles-bot-info {
  flex: 1;
  min-width: 0;
}
.roles-bot-name {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.roles-bot-id {
  font-size: 10px;
  line-height: 1.35;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.roles-bot-badges {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  flex: 0 0 auto;
  max-width: 112px;
}

/* ─── Badges ─── */
.roles-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  font-weight: 600;
  flex-shrink: 0;
}
.roles-badge.has-role {
  background: var(--success-soft);
  color: var(--success);
}
.roles-badge.no-role {
  background: var(--bg-soft);
  color: var(--faint);
}
.roles-badge.has-listener {
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--accent);
}
.roles-profile-match {
  display: inline-flex;
  max-width: 100%;
  margin-top: 5px;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
}
.roles-profile-match.full {
  border-color: color-mix(in srgb, var(--success) 35%, var(--border-soft));
  background: color-mix(in srgb, var(--success) 10%, var(--surface));
  color: var(--success);
}
.roles-profile-match.partial {
  border-color: color-mix(in srgb, var(--warning) 35%, var(--border-soft));
  background: color-mix(in srgb, var(--warning) 12%, var(--surface));
  color: var(--warning);
}
.roles-profile-match.muted {
  font-weight: 600;
  color: var(--muted);
}
.roles-profile-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-soft);
  transition: background 0.12s;
}
.roles-profile-row:hover { background: var(--bg-soft); }
.roles-profile-row.selected {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  padding-left: 9px;
}
.roles-profile-row-main {
  min-width: 0;
  flex: 1;
}
.roles-profile-name {
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Editor Panel (right) ─── */
.roles-editor-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.roles-editor-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 14px;
  padding: 32px;
  text-align: center;
}
.roles-editor-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
  gap: 14px;
  overflow-y: auto;
}

/* ─── Editor breadcrumb ─── */
.roles-editor-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--section-title-font-size);
  font-weight: 600;
}
.roles-breadcrumb-sep {
  color: var(--faint);
  font-weight: 400;
}
#roles-editor-group-name { color: var(--fg); }
#roles-editor-bot-name { color: var(--accent-strong); }
.roles-editor-meta-line {
  font-size: 11px;
  color: var(--faint);
  font-family: var(--mono);
}
.roles-editor-inject {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 -2px;
}
.roles-editor-inject > label {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg);
}
/* Inherit the global themed <select> look (surface bg, border, chevron); only
   nudge it more compact for this inline control. */
.roles-editor-inject > select {
  min-height: 28px;
  padding: 3px 26px 3px 9px;
  font-size: 12px;
}
.roles-editor-inject-hint {
  font-size: 11px;
  color: var(--faint);
  flex: 1 1 240px;
  min-width: 160px;
}
.roles-editor-switch {
  align-self: flex-start;
}
.roles-listener-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}
.roles-listener-editor > .loading-state {
  min-height: 44px;
}
.roles-listener-enabled {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  user-select: none;
}
.roles-listener-enabled input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.roles-listener-enabled .filter-toggle-switch {
  position: relative;
  flex: none;
  width: 31px;
  height: 18px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--muted) 12%, var(--surface));
}
.roles-listener-enabled .filter-toggle-switch::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  background: var(--faint);
  transform: translateY(-50%);
  transition:
    background-color 150ms ease,
    transform 150ms ease;
}
.roles-listener-enabled:has(input:checked) {
  background: color-mix(in srgb, var(--muted) 12%, var(--surface));
  color: var(--accent);
}
.roles-listener-enabled:has(input:checked) .filter-toggle-switch {
  border-color: color-mix(in srgb, var(--accent) 44%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
}
.roles-listener-enabled:has(input:checked) .filter-toggle-switch::after {
  background: var(--accent);
  transform: translate(13px, -50%);
}
.roles-listener-scope-help {
  margin: -6px 0 0;
  max-width: 760px;
  color: var(--faint);
  font-size: 12px;
  line-height: 1.5;
}
.roles-listener-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.roles-listener-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.roles-listener-field input[type="text"] {
  width: 100%;
  min-width: 0;
  height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface-muted);
  color: var(--fg);
  box-sizing: border-box;
}
.roles-listener-field input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.roles-listener-policy-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.roles-listener-policy {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 28%, transparent);
}
.roles-listener-chip,
.roles-listener-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.roles-listener-chip input,
.roles-listener-checkbox input {
  margin: 0;
}
#roles-listener-prompt {
  width: 100%;
  box-sizing: border-box;
  min-height: 180px;
  font-family: var(--mono);
  font-size: 13px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  resize: vertical;
  line-height: 1.55;
  background: var(--surface-muted);
  color: var(--fg);
  tab-size: 2;
}
#roles-listener-prompt:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.roles-listener-preview-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 22%, transparent);
}
.roles-listener-preview-head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}
.roles-listener-preview-head small {
  color: var(--muted);
}
.roles-listener-preview-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}
.roles-listener-preview-actions label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.roles-listener-preview-actions select {
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--fg);
}
.roles-listener-preview-actions button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
}
.roles-listener-preview-actions button.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}
.roles-listener-preview-actions button:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.roles-listener-preview-summary,
.roles-listener-preview-empty,
.roles-listener-preview-error {
  color: var(--muted);
  font-size: 12px;
}
.roles-listener-preview-error {
  color: var(--danger);
}
.roles-listener-preview-list {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}
.roles-listener-preview-item {
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface);
}
.roles-listener-preview-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.roles-listener-preview-meta span {
  max-width: 100%;
  padding: 2px 6px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  color: var(--muted);
  font-size: 11px;
  overflow-wrap: anywhere;
}
.roles-listener-preview-meta span.ok {
  color: var(--success);
}
.roles-listener-preview-meta span.running,
.roles-listener-preview-meta span.triggered {
  color: var(--accent);
}
.roles-listener-preview-meta span.error {
  color: var(--danger);
}
.roles-listener-preview-run-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: -2px 0 6px;
  color: var(--muted);
  font-size: 11px;
}
.roles-listener-preview-run-detail span,
.roles-listener-preview-run-detail strong {
  min-width: 0;
  overflow-wrap: anywhere;
}
.roles-listener-preview-run-detail strong {
  color: var(--danger);
  font-weight: 600;
}
.roles-listener-preview-sender,
.roles-listener-preview-time,
.roles-listener-preview-title {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  margin-bottom: 4px;
  font-size: 12px;
}
.roles-listener-preview-sender span,
.roles-listener-preview-time span,
.roles-listener-preview-title span,
.roles-listener-preview-content-label {
  color: var(--faint);
}
.roles-listener-preview-sender strong,
.roles-listener-preview-time strong,
.roles-listener-preview-title strong {
  min-width: 0;
  color: var(--fg);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.roles-listener-preview-content-label {
  margin: 6px 0 3px;
  font-size: 12px;
}
.roles-listener-preview-item pre {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--fg);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.45;
}
.roles-listener-members {
  display: flex;
  flex-direction: column;
  /* Do not let this box shrink: it is a flex child of the listener editor and
     the whole form (.roles-editor-form) is the scroll container. With the old
     `min-height:0` it collapsed to ~0 on shorter viewports (≲800px tall) and,
     combined with `overflow:hidden`, clipped the member rows entirely — the
     picker looked empty and the wheel had nothing to reveal. Keeping its full
     content height lets the form overflow and scroll normally. */
  flex-shrink: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.roles-listener-members-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--surface-muted) 38%, transparent);
}
.roles-listener-members-head .roles-profile-section-title {
  margin-bottom: 0;
}
.roles-listener-members-head small {
  color: var(--faint);
  font-size: 11px;
  line-height: 1.4;
  text-align: right;
}
.roles-listener-target-tabs {
  align-self: flex-start;
  margin: 10px 12px 0;
}
.roles-listener-filter-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 10px 12px 0;
}
.roles-listener-filter-toolbar input[type="search"] {
  width: 100%;
  min-width: 0;
  height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface-muted);
  color: var(--fg);
  box-sizing: border-box;
}
.roles-listener-filter-toolbar input[type="search"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.roles-listener-clear-search {
  width: var(--button-height);
  min-width: var(--button-height);
  height: var(--button-height);
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
}
.roles-listener-select-all {
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.roles-listener-bulkbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 12px 0;
  padding: 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-muted) 45%, transparent);
}
.roles-listener-bulkbar > span {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.roles-listener-member-list {
  display: grid;
  gap: 8px;
  padding: 10px;
}
.roles-listener-member {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface);
}
.roles-listener-member-select {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
}
.roles-listener-member-select input {
  margin: 0;
}
.roles-listener-member-main {
  min-width: 0;
}
.roles-listener-member-main strong {
  display: block;
  color: var(--fg);
  font-size: 13px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.roles-listener-member-main span {
  display: block;
  margin-top: 2px;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.roles-listener-member-actions {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface-muted);
}
.roles-listener-member-actions button {
  min-height: 26px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.roles-listener-member-actions button.active,
.roles-listener-member-actions button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--muted) 12%, var(--surface));
  color: var(--accent);
}
.roles-listener-member-actions button:disabled,
.roles-listener-select-all:disabled {
  cursor: not-allowed;
  opacity: .55;
}
.roles-profile-detail {
  gap: 16px;
  min-height: 0;
  overflow: hidden;
}
.roles-profile-title {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.roles-profile-grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  min-height: 0;
  overflow: hidden;
}
.roles-profile-bots,
.roles-profile-editor,
.roles-profile-apply {
  min-width: 0;
}
.roles-profile-bots {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.roles-profile-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
.roles-profile-section-title {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.roles-profile-bot-list {
  flex: 1 1 auto;
  min-height: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: auto;
}
.roles-profile-bot-row {
  padding-left: 12px;
}
.roles-profile-bot-row.selected {
  padding-left: 9px;
}
.roles-profile-inline-empty {
  flex: 1 1 auto;
  min-height: 220px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

/* ─── Editor textarea ─── */
#roles-editor-textarea,
#roles-profile-textarea {
  width: 100%;
  box-sizing: border-box;
  flex: 0 0 auto;
  min-height: 220px;
  font-family: var(--mono);
  font-size: 13px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  resize: vertical;
  line-height: 1.55;
  background: var(--surface-muted);
  color: var(--fg);
  tab-size: 2;
}
#roles-profile-textarea {
  flex: 1 1 260px;
  min-height: 180px;
  max-height: min(44vh, 420px);
}
#roles-editor-textarea:focus,
#roles-profile-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ─── Editor footer ─── */
.roles-editor-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.roles-bytecount {
  font-size: 12px;
  color: var(--muted);
  font-family: var(--mono);
}
.roles-bytecount.warn { color: var(--warning); }
.roles-bytecount.over { color: var(--danger); font-weight: 700; }
.roles-editor-actions { display: flex; gap: 8px; }
.roles-profile-editor .roles-editor-actions,
.roles-profile-apply .roles-editor-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}
.roles-profile-apply {
  flex: 0 0 auto;
  max-height: 34%;
  overflow: auto;
  border-top: 1px solid var(--border-soft);
  padding-top: 14px;
}
.roles-profile-apply-controls {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
.roles-profile-apply-controls select {
  min-width: 0;
}
.roles-profile-force {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}
.roles-profile-apply-bot {
  margin-bottom: 6px;
}
.roles-profile-status {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  min-height: 18px;
}

/* ─── Saved flash ─── */
.roles-saved-flash {
  font-size: 12px;
  color: var(--success);
  font-weight: 600;
  animation: roles-fade-out 2s ease forwards;
}
.roles-save-error {
  color: var(--danger);
  animation-duration: 3s;
}
@keyframes roles-fade-out {
  0% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

/* ─── Preview panel ─── */
.roles-preview {
  background: var(--surface-muted);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 14px;
  font-size: 13px;
  max-height: 140px;
  overflow-y: auto;
}
.roles-profile-editor .roles-preview {
  flex: 1 1 auto;
  min-height: 160px;
  max-height: none;
}
.roles-preview pre {
  margin: 8px 0 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
}

.roles-empty {
  padding: 24px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 720px) {
  .roles-page .roles-layout {
    grid-template-columns: 1fr;
    height: auto;
  }
  .roles-heading {
    flex-direction: column;
  }
  .roles-tabs {
    width: 100%;
  }
  .roles-tabs button {
    flex: 1;
  }
  .roles-profile-grid {
    grid-template-columns: 1fr;
  }
  .roles-profile-apply-controls {
    grid-template-columns: 1fr;
  }
  .roles-listener-grid {
    grid-template-columns: 1fr;
  }
  .roles-listener-member {
    grid-template-columns: 1fr;
  }
  .roles-listener-member-actions {
    justify-self: start;
    max-width: 100%;
    overflow-x: auto;
  }
}

.v3-terminal-frame { display: block; width: 100%; height: 460px; border: 0; border-top: 1px solid var(--border); background: #0d1117; }
/* v3 per-node terminal panel (live iframe / replay) */
.v3-terminal-panel { border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: #0d1117; }
.v3-terminal-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.6rem; background: var(--surface); border-bottom: 1px solid var(--border); font-size: 12px; }
.v3-terminal-head .muted { margin-left: 0; }
.v3-terminal-head .btn-link { margin-left: auto; }
.v3-terminal-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--muted); }
.v3-terminal-dot.live { background: #1a73e8; box-shadow: 0 0 0 3px rgba(26,115,232,0.25); }
.v3-terminal-dot.replay { background: #f9ab00; }
.v3-terminal-dot.closed { background: #188038; }
.v3-terminal-empty { padding: 1.5rem 0.75rem; text-align: center; border: 1px dashed var(--border); border-radius: 6px; }

@media (max-width: 720px) {
  .v3-terminal-frame { height: 360px; }
}
/* ════════════════════════════════════════════════════════════════════════════
   数字员工工作台 — 统一视觉层（未来 / 科技 / 数字人）
   设计语言：深色实底、清晰边界、克制面板与标签。
   每个 bot 一颗专属色相的"数字生命球"。强视觉只在品牌区（团队卡），
   工作面（board / 表格 / 表单页）保持密度与可扫描性。
   状态光语义：青=执行中 · 绿=就绪 · 琥珀=需要你 · 红=异常 · 蓝=启动中
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --info: #3f8cff;
  --info-soft: rgba(63, 140, 255, 0.12);
  --brand-accent: #646cea;
  --brand-accent-strong: #4d54d9;
  --brand-accent-bright: #8b91ff;
  --brand-accent-cyan: #62e6ff;
  --brand-accent-pink: #f080f0;
  --accent: #565ee4;
  --accent-strong: var(--brand-accent-strong);
  --accent-soft: rgba(100, 108, 234, 0.12);
  /* 圆角三档 + full：每档 1.4–1.7× 递进，肉眼分得出档位。五级全是 12px 的旧体系
     等于没有尺度——小徽标读成药丸、大面板读成方角。取档按「半径 ≈ 高度 / 3.5」：
     ≤30px 取 sm（徽标 / chip / 分段控件）· 31–47px 取 md（按钮 / 输入框 / 下拉）·
     ≥48px 取 lg（卡片 / 面板 / 浮层 / 弹窗）。full 只给正圆（状态点、分栏握把、
     头像、滚动条 thumb），不许用在矩形上。
     旧的 xs / xl 不再是独立档位，按就近取档并进 sm / lg —— 全站 200+ 处引用照常
     工作，非工作台组件的位移不超过 2px。 */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 999px;
  --radius-xs: var(--radius-sm);
  --radius-xl: var(--radius-lg);
  --radius: var(--radius-md);
  --sidebar-width: 190px;
  --topbar-height: 60px;
  --topbar-control-size: 38px;
  --chrome-x: 32px;
}

:root[data-theme="dark"] {
  --bg: #0b1018;
  --bg-soft: #0e141d;
  --surface: #111821;
  --surface-raised: #17202c;
  --surface-muted: #0d141d;
  --fg: #cbd4df;
  --muted: #8793a4;
  --faint: #737f90;
  --border: #293443;
  --border-soft: #202a37;
  --accent: var(--brand-accent-bright);
  --accent-strong: #b5b9ff;
  --accent-soft: rgba(139, 145, 255, 0.17);
  --success: #58ca8d;
  --success-soft: rgba(88, 202, 141, 0.13);
  --warning: #dba84a;
  --warning-soft: rgba(219, 168, 74, 0.13);
  --danger: #d9788a;
  --danger-soft: rgba(217, 120, 138, 0.13);
  --info: #6f9cff;
  --info-soft: rgba(79, 139, 255, 0.14);
  --on-accent: #051018;
  --on-danger: #1c0508;
  --shadow: 0 14px 40px rgba(0, 0, 0, 0.34);
}

/* 默认工作台使用纯色底；特殊皮肤自行提供背景氛围。 */
.aurora { display: none; position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.aurora i { position: absolute; border-radius: 50%; filter: blur(110px); opacity: 0.30; }
.aurora .a1 { width: 520px; height: 420px; left: -20px; top: -200px; background: #1b4dff; opacity: 0.18; }
.aurora .a2 { width: 520px; height: 440px; right: -90px; top: -80px; background: #00c2d8; opacity: 0.17; }
.aurora .a3 { width: 620px; height: 420px; left: 38%; bottom: -280px; background: #6b3df0; opacity: 0.13; }
:root[data-theme="light"] .aurora { display: none; }

.app-shell {
  position: relative;
  z-index: 1;
  height: 100dvh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chrome-body {
  flex: 1;
  min-height: 0;
  /* 侧边栏悬浮成 fixed 卡片后不再占栅格列：主内容区用 .workspace 的
     margin-left 让出侧栏 + 间隙（见 .workspace），这里只留右/上/下内边距。 */
  display: block;
  padding: 16px var(--chrome-x) 24px 0;
  overflow: hidden;
}

.workspace {
  min-width: 0;
  min-height: 0;
  /* chrome-body 改块级流后没有 grid stretch 给高度：显式撑满，main 的
     flex:1 + overflow-y:auto 才有确定的可滚动高度（移动端在 media query 里
     改回 flex:1，由 flex 分配高度）。 */
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: visible;
  margin-left: calc(var(--sidebar-w, 248px) + 48px);
}

/* ── 悬浮导航卡片：fixed 贴左侧悬浮，主内容区用 margin-left 让位 ──────────── */
.sidebar {
  position: fixed;
  top: calc(var(--topbar-h) + 16px);
  bottom: 16px;
  left: 16px;
  z-index: 15;
  width: var(--sidebar-w, 248px);
  /* flex column：创建按钮常驻顶部，导航区占满剩余高度并在矮屏内部纵向滚动。 */
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--sp-4) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--sh-md);
  overflow-y: auto;
  transition:
    padding 180ms ease,
    border-radius 180ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease;
}

.sidebar-create-actions {
  display: grid;
  gap: 4px;
  flex: 0 0 auto;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-soft);
}
button.sidebar-create-btn {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 36px;
  margin: 0;
  padding: 8px 10px;
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--border-soft));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  box-shadow: none;
  color: var(--accent-strong);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    color 150ms ease;
}
@media (min-width: 981px) {
  button.sidebar-create-btn {
    padding-right: 12px;
    padding-left: 16px;
  }
}
button.sidebar-create-btn svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
button.sidebar-create-btn:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
button.sidebar-create-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* ≤980px 侧边栏折叠为顶部横向 rail 后，只保留页面导航。
   创建会话 / 创建机器人已分别位于对应页面标题区，避免移动端出现两层横向操作轨道。 */
@media (max-width: 980px) {
  .sidebar-create-actions {
    display: none;
  }
}

.sidebar-nav {
  gap: 2px;
  /* 占满 create-actions 之外的剩余高度；min-height:0 让它能收缩到比内容矮，
     从而 overflow-y:auto 在矮屏（异形屏）真正触发纵向滚动而不是被父级裁掉。 */
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 2px;
}
.nav-group-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-4, #b0b6c6);
  text-transform: uppercase;
  letter-spacing: .7px;
  padding: 0 var(--sp-3) var(--sp-2);
  margin-top: var(--sp-4);
}
.nav-group:first-child .nav-group-title {
  margin-top: 0;
}
.sidebar-nav a {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 36px;
  gap: 11px;
  padding: 8px 10px;
  border-radius: var(--radius-lg);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  outline: none;
  isolation: isolate;
  transition:
    background-color 180ms ease,
    color 160ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}
@media (min-width: 981px) {
  .sidebar-nav a {
    padding-right: 12px;
    padding-left: 16px;
  }
}
.sidebar-nav a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--surface-muted);
  opacity: 0;
  transform: scaleX(0.96);
  transform-origin: center;
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    background-color 180ms ease;
}
.sidebar-nav a .sidebar-nav-label {
  position: relative;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: color 160ms ease;
}
.sidebar-nav a svg {
  position: relative;
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition:
    color 160ms ease,
    transform 180ms ease,
    stroke-width 180ms ease;
}
.sidebar-nav a:hover {
  color: var(--fg);
}
.sidebar-nav a:hover::before {
  opacity: 1;
  transform: scaleX(1);
}
.sidebar-nav a.active {
  background: transparent;
  box-shadow: none;
  color: var(--accent-strong);
}
.sidebar-nav a.active::before {
  background: var(--accent-soft);
  opacity: 1;
  transform: scaleX(1);
}
.sidebar-nav a.active svg {
  transform: translateX(1px);
}
/* active 左侧指示条：::before 已被 hover/active 底色占用，指示条走 ::after。
   锚点不得 overflow:hidden，否则 left:-3px 的探出部分会被裁掉。 */
.sidebar-nav a.active::after {
  content: "";
  position: absolute;
  left: -3px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: var(--radius-full);
  background: var(--accent);
}
.sidebar-nav a:focus,
.sidebar-nav a:focus-visible {
  outline: none;
  box-shadow: none;
}
.sidebar-nav a .nav-update-tip {
  align-self: center;
  margin-left: -9px;
  transform: translateY(-7px);
}
.sidebar-nav a .nav-update-dot {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 2px var(--surface);
}

.sidebar-nav a.sidebar-plugin-item {
  margin-left: 12px;
  color: var(--faint);
}

.sidebar-nav a.sidebar-plugin-item svg {
  width: 14px;
  height: 14px;
}

/* ── 顶栏：横向贯穿，左侧品牌固定，右侧操作保持原入口 ───────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: max-content minmax(220px, 1fr) max-content;
  align-items: center;
  column-gap: 16px;
  min-height: var(--topbar-height);
  padding: 0 var(--chrome-x);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(16px);
  border-bottom: 0;
  justify-content: space-between;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12);
}
.topbar::after {
  content: "";
  position: absolute;
  left: var(--chrome-x);
  right: var(--chrome-x);
  bottom: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--border) 58%, transparent) 16%,
    color-mix(in srgb, var(--border) 92%, transparent) 50%,
    color-mix(in srgb, var(--border) 58%, transparent) 84%,
    transparent 100%
  );
}
.topbar-brand-block {
  display: grid;
  min-width: 0;
  padding: 3px 0 4px;
}
.dashboard-version-control {
  position: relative;
  z-index: 2;
  width: max-content;
  margin: -2px 0 0 37px;
}
button.dashboard-version-chip {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  margin: 0;
  padding: 0 7px 0 9px;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--surface) 42%, transparent);
  color: var(--muted);
  box-shadow: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
}
button.dashboard-version-chip::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--brand-accent-cyan), var(--brand-accent), var(--brand-accent-pink));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
button.dashboard-version-chip > span {
  position: relative;
  z-index: 1;
}
button.dashboard-version-chip:hover,
.dashboard-version-control.is-open button.dashboard-version-chip {
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  color: var(--fg);
}
.dashboard-version-state {
  display: grid;
  place-items: center;
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
}
.dashboard-version-state.is-current {
  background: var(--success-soft);
  color: var(--fg);
}
.dashboard-version-state.has-update {
  background: var(--warning-soft);
  color: var(--fg);
}
.dashboard-version-state.is-unknown {
  background: var(--surface-muted);
  color: var(--fg);
}
.dashboard-version-state.is-error {
  background: var(--danger-soft);
  color: var(--fg);
}
.dashboard-version-popover {
  position: fixed;
  z-index: 1601;
  display: flex;
  flex-direction: column;
  width: min(340px, calc(100vw - 32px));
  max-height: calc(100vh - var(--topbar-height) - 16px);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--fg);
  box-shadow: var(--modal-shadow);
}
.dashboard-version-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
}
.dashboard-version-popover-head strong {
  font-size: 14px;
  font-weight: 760;
}
.dashboard-version-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
button.dashboard-version-refresh,
button.dashboard-version-close {
  display: grid;
  place-items: center;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  cursor: pointer;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
}
button.dashboard-version-refresh svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}
button.dashboard-version-refresh:hover:not(:disabled),
button.dashboard-version-close:hover {
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  color: var(--accent-strong);
}
button.dashboard-version-refresh:disabled {
  cursor: wait;
  opacity: 0.65;
}
button.dashboard-version-refresh.is-refreshing svg {
  animation: dashboard-update-spin 700ms linear infinite;
}
.dashboard-version-popover-body {
  display: grid;
  justify-items: center;
  gap: 7px;
  min-height: 0;
  padding: 22px 20px 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
  text-align: center;
}
.dashboard-version-current {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.dashboard-version-current > strong {
  font-family: "Geist Mono", var(--mono);
  font-size: 28px;
  font-weight: 760;
  letter-spacing: -0.04em;
  line-height: 1.2;
}
.dashboard-version-current > span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 800;
}
.dashboard-version-current > span.is-current {
  background: var(--success-soft);
  color: var(--fg);
}
.dashboard-version-current > span.has-update {
  background: var(--warning-soft);
  color: var(--fg);
}
.dashboard-version-current > span.is-unknown {
  background: var(--surface-muted);
  color: var(--fg);
}
.dashboard-version-current > span.is-error {
  background: var(--danger-soft);
  color: var(--fg);
}
.dashboard-version-message {
  max-width: 290px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}
.dashboard-version-message.is-error {
  color: var(--danger);
  overflow-wrap: anywhere;
}
.dashboard-version-current > span.dashboard-version-ring { position: relative; display: inline-flex; place-items: unset; flex: none; width: 44px; height: 44px; border-radius: 0; }
.dashboard-version-ring svg { display: block; width: 44px; height: 44px; }
.dvr-track { fill: none; stroke: color-mix(in srgb, var(--muted) 26%, transparent); stroke-width: 4; }
.dvr-arc { fill: none; stroke: url(#dvr-grad); stroke-width: 4; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 0.4s ease; animation: dvr-breathe 1.8s ease-in-out infinite; }
@keyframes dvr-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.dvr-pct { position: absolute; inset: 0; display: grid; place-items: center; font-family: "Geist Mono", var(--mono); font-size: 11px; font-weight: 700; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; color: var(--accent-strong); }
@media (prefers-reduced-motion: reduce) { .dvr-arc { transition: none; animation: none; opacity: 1; } }
.dashboard-version-release-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  margin-top: 3px;
  padding: 5px 9px;
  border-radius: var(--radius-full);
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
}
.dashboard-version-release-link svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.dashboard-version-release-link:hover {
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  color: var(--accent-strong);
}
.dashboard-version-installs {
  width: 100%;
  margin-top: 5px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--warning) 34%, var(--border-soft));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--warning) 7%, var(--surface));
  color: var(--warning);
  text-align: left;
  font-size: 11px;
  line-height: 1.45;
}
.dashboard-version-installs summary { cursor: pointer; }
.dashboard-version-installs ul {
  margin: 6px 0 0;
  padding-left: 18px;
  overflow-wrap: anywhere;
}
.dashboard-version-rollback {
  width: 100%;
  margin-top: 8px;
  padding-top: 4px;
  border-top: 1px solid var(--border-soft);
  color: var(--muted);
  text-align: left;
}
.dashboard-version-rollback > summary {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 5px 2px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
  list-style: none;
  user-select: none;
}
.dashboard-version-rollback > summary::-webkit-details-marker { display: none; }
.dashboard-version-rollback > summary:hover {
  color: var(--accent-strong);
}
.dashboard-version-rollback > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.dashboard-version-rollback > summary svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}
.dashboard-version-rollback-chevron {
  justify-self: end;
  font-size: 15px;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform 140ms ease;
}
.dashboard-version-rollback[open] .dashboard-version-rollback-chevron {
  transform: rotate(180deg);
}
.dashboard-version-rollback-body {
  display: grid;
  gap: 10px;
  padding: 3px 0 2px;
}
.dashboard-version-rollback-body fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.dashboard-version-rollback-body legend {
  width: 100%;
  margin: 0 0 8px;
  padding: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.dashboard-version-rollback-options {
  display: grid;
  gap: 7px;
}
.dashboard-version-rollback-options label {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 7px 11px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-muted) 42%, transparent);
  color: var(--fg);
  cursor: pointer;
}
.dashboard-version-rollback-options label:hover {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}
.dashboard-version-rollback-options label.is-selected {
  border-color: color-mix(in srgb, var(--warning) 72%, var(--border-soft));
  background: var(--warning-soft);
}
.dashboard-version-rollback-options label:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.dashboard-version-rollback-options input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--warning);
}
.dashboard-version-rollback-options strong {
  min-width: 0;
  overflow: hidden;
  font-family: inherit;
  font-size: 12px;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-version-rollback-options time {
  flex: none;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}
.dashboard-version-rollback-status,
.dashboard-version-rollback-load-error,
.dashboard-version-rollback-risk {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
}
.dashboard-version-rollback-status {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  color: var(--muted);
}
.dashboard-version-rollback-load-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 9px;
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
  color: var(--danger);
}
.dashboard-version-rollback-load-error button {
  flex: none;
  min-height: 26px;
  margin: 0;
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--danger) 42%, var(--border-soft));
  border-radius: var(--radius-full);
  background: transparent;
  color: inherit;
  box-shadow: none;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}
.dashboard-version-rollback-load-error button:disabled { cursor: wait; opacity: 0.65; }
.dashboard-version-rollback-risk {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 8px 9px;
  border-radius: var(--radius-sm);
  background: var(--warning-soft);
  color: var(--warning);
}
.dashboard-version-rollback-risk > svg {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.4;
}
.dashboard-version-rollback-risk a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dashboard-version-rollback-risk a:hover { color: var(--accent-strong); }
.dashboard-version-rollback-risk a:focus-visible {
  border-radius: 2px;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
button.dashboard-version-rollback-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 36px;
  margin: 0;
  padding: 7px 12px;
  border: 1px solid color-mix(in srgb, var(--warning) 58%, var(--border-soft));
  border-radius: var(--radius-full);
  background: var(--warning-soft);
  color: var(--warning);
  box-shadow: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 720;
  line-height: 1;
}
button.dashboard-version-rollback-action:hover:not(:disabled) {
  border-color: var(--warning);
  background: color-mix(in srgb, var(--warning) 12%, var(--surface));
}
button.dashboard-version-rollback-action:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.dashboard-version-popover-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border-soft);
}
button.dashboard-version-secondary,
button.dashboard-version-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 32px;
  margin: 0;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  box-shadow: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 720;
  line-height: 1;
}
button.dashboard-version-secondary {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
}
button.dashboard-version-primary {
  border: 1px solid color-mix(in srgb, var(--accent) 58%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  color: var(--accent-strong);
}
button.dashboard-version-secondary:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  color: var(--accent-strong);
}
button.dashboard-version-primary:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}
button.dashboard-version-primary:disabled {
  cursor: wait;
  opacity: 0.7;
}
.dashboard-update-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-full);
  animation: dashboard-update-spin 700ms linear infinite;
}
@keyframes dashboard-update-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .dashboard-update-spinner,
  button.dashboard-version-refresh.is-refreshing svg { animation: none; }
  .dashboard-version-rollback-chevron { transition: none; }
}
.topbar-left {
  grid-column: 1;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  justify-self: start;
}
.topbar .brand {
  display: flex;
  min-width: 0;
  padding: 0;
  gap: 9px;
  align-items: center;
  color: inherit;
  text-decoration: none;
}
.topbar .brand > span:not(.brand-mark) {
  min-width: 0;
}
.topbar .brand strong,
.topbar .brand-product {
  white-space: nowrap;
}
.topbar .brand-wordmark {
  color: var(--fg);
  background-image:
    linear-gradient(102deg, transparent 44%, color-mix(in srgb, var(--brand-accent-bright) 78%, #fff) 50%, transparent 56%),
    linear-gradient(135deg, var(--brand-accent-cyan) 0%, var(--brand-accent) 52%, var(--brand-accent-pink) 100%);
  font-family: "Geist Mono", var(--mono);
  font-size: 16px;
  font-style: italic;
  font-weight: 650;
  line-height: 28px;
  letter-spacing: 0;
  -webkit-text-fill-color: transparent;
}
.topbar .brand-product {
  color: color-mix(in srgb, var(--muted) 86%, var(--fg));
  background-image:
    linear-gradient(102deg, transparent 44%, color-mix(in srgb, var(--brand-accent-bright) 72%, #fff) 50%, transparent 56%),
    linear-gradient(90deg, color-mix(in srgb, var(--muted) 86%, var(--fg)), color-mix(in srgb, var(--muted) 86%, var(--fg)));
  font-family: "Geist Mono", var(--mono);
  font-size: 16px;
  font-style: italic;
  font-weight: 650;
  line-height: 28px;
  letter-spacing: 0;
}
.topbar .brand-wordmark,
.topbar .brand-product {
  background-repeat: no-repeat;
  background-size: 250% 100%, 100% 100%;
  background-position: 145% 50%, 0 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: topbar-brand-sheen 8s linear infinite;
}
@keyframes topbar-brand-sheen {
  from { background-position: 145% 50%, 0 50%; }
  to { background-position: -45% 50%, 0 50%; }
}
.topbar .brand-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: transparent;
  box-shadow: none;
  color: var(--surface);
}
.topbar .brand-logo-img {
  width: 28px;
  height: 28px;
  display: block;
  object-fit: contain;
  transform: translateY(-1px);
}
.topbar-actions {
  grid-column: 3;
  display: flex;
  align-items: center;
  margin-left: auto;
  gap: 14px;
  flex-wrap: nowrap;
  min-width: 0;
  justify-self: end;
}
.topbar-status-menu {
  position: relative;
  flex: none;
}
body.theme-menu-open .topbar-status-menu {
  pointer-events: none;
}
body.theme-menu-open .topbar-status-menu .connection-status::after {
  transform: translateY(-62%) rotate(45deg);
}
body.theme-menu-open .topbar-status-pop {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 6px);
}
.topbar-status-menu::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 69;
  width: calc(100% + 18px);
  height: 8px;
  transform: translateX(-50%);
}
.topbar-status-menu .connection-status {
  padding-right: 28px;
}
.topbar-status-menu .connection-status::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-62%) rotate(45deg);
  opacity: 0.65;
  transition: transform 140ms ease;
}
body:not(.theme-menu-open) .topbar-status-menu.topbar-status-auto-open .connection-status::after,
body:not(.theme-menu-open) .topbar-status-menu.is-open .connection-status::after {
  transform: translateY(-35%) rotate(225deg);
}
.topbar-status-pop {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  z-index: 70;
  width: 300px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 78px;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--modal-shadow);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 6px);
  transition:
    opacity 140ms ease,
    transform 140ms ease;
}
body:not(.theme-menu-open) .topbar-status-menu.topbar-status-auto-open .topbar-status-pop,
body:not(.theme-menu-open) .topbar-status-menu.is-open .topbar-status-pop {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
  animation: dashboard-popover-enter 0.35s ease both;
}
@media (hover: hover) {
  body:not(.theme-menu-open) .topbar-status-menu:not(.suppress-hover):hover .connection-status::after,
  body:not(.theme-menu-open) .topbar-status-menu:not(.suppress-hover):has(.topbar-status-pop:hover) .connection-status::after {
    transform: translateY(-35%) rotate(225deg);
  }

  body:not(.theme-menu-open) .topbar-status-menu:not(.suppress-hover):hover .topbar-status-pop,
  body:not(.theme-menu-open) .topbar-status-menu:not(.suppress-hover):has(.topbar-status-pop:hover) .topbar-status-pop {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
    animation: dashboard-popover-enter 0.35s ease both;
  }
}
.topbar-attention-notice {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) max-content;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--warning) 34%, var(--border-soft));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--warning) 7%, var(--surface));
  text-decoration: none;
}
.topbar-attention-notice:hover {
  border-color: color-mix(in srgb, var(--warning) 58%, var(--border-soft));
  background: color-mix(in srgb, var(--warning) 10%, var(--surface));
}
.topbar-attention-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--warning);
}
.topbar-attention-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.topbar-attention-copy b,
.topbar-attention-copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-attention-copy b {
  color: var(--warning);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}
.topbar-attention-copy small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
}
.topbar-attention-action {
  color: var(--warning);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.topbar-status-list {
  min-width: 0;
}
.topbar-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 30px;
  padding: 0 8px;
  border-radius: var(--radius-md);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.topbar-status-row b {
  color: var(--fg);
  font-size: 13px;
  font-weight: 800;
}
.topbar-status-row b.status-count-on { color: var(--accent); }
.topbar-status-row-hot {
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 7%, transparent);
}
.topbar-status-row-hot b.status-count-on { color: var(--warning); }
.topbar-status-donut-wrap {
  position: relative;
  width: 72px;
  height: 72px;
  justify-self: end;
}
.topbar-status-donut {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  -webkit-mask: radial-gradient(farthest-side, transparent 62%, #000 63%);
  mask: radial-gradient(farthest-side, transparent 62%, #000 63%);
}
.topbar-status-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  text-align: center;
}
.topbar-status-donut-center b {
  color: var(--fg);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}
.topbar-status-donut-center span {
  max-width: 44px;
  color: var(--faint);
  font-size: 8px;
  font-weight: 700;
  line-height: 1.15;
}
.topbar-tool-group {
  --topbar-tool-icon-size: 16px;
  --topbar-tool-stroke: 1.75;
  --topbar-theme-icon-stroke: calc(var(--topbar-tool-stroke) * 1.5);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.topbar-tool-group .theme-menu {
  display: inline-flex;
}
.topbar-locale-toggle,
.topbar-tool-group .theme-menu-btn,
.topbar-tool-group .topbar-docs-link {
  flex: none;
  width: var(--topbar-control-size);
  height: var(--topbar-control-size);
  min-height: var(--topbar-control-size);
  display: inline-grid;
  place-items: center;
  gap: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  color: var(--fg);
  box-shadow: none;
  text-decoration: none;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    color 150ms ease,
    transform 150ms ease;
}
.topbar-tool-group .theme-menu-btn .tm-current,
.topbar-tool-group .theme-menu-btn .tm-chev,
.topbar-tool-group .topbar-docs-link span {
  display: none;
}
.topbar-locale-toggle {
  font-family: "Geist Mono", var(--mono);
  font-size: 11px;
  font-weight: 760;
  line-height: 1;
  letter-spacing: 0;
}
.topbar-locale-toggle svg,
.topbar-tool-group .theme-menu-btn .tm-svg,
.topbar-tool-group .topbar-docs-link svg {
  display: block;
  width: var(--topbar-tool-icon-size);
  height: var(--topbar-tool-icon-size);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--topbar-tool-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.topbar-tool-group .theme-menu-btn .tm-svg {
  stroke-width: var(--topbar-theme-icon-stroke);
}
.topbar-locale-toggle:hover:not(:disabled),
.topbar-tool-group .theme-menu-btn:hover,
.topbar-tool-group .topbar-docs-link:hover {
  border-color: color-mix(in srgb, var(--muted) 58%, var(--border));
  background: color-mix(in srgb, var(--surface-muted) 78%, transparent);
  color: var(--accent-strong);
  transform: translateY(-1px);
}

.topbar-owner {
  flex: none;
  width: var(--topbar-control-size);
  height: var(--topbar-control-size);
  display: inline-grid;
  place-items: center;
  position: relative;
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  box-shadow: none;
  overflow: hidden;
}
.topbar-owner-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--muted) 80%, transparent);
}
.topbar-owner-placeholder svg {
  width: 16px;
  height: 16px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.topbar-owner-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
/* ── 圆角层级：按钮 / 标签 / 分段控件 ────────────────────────────────────── */
button,
.btn-link {
  border-radius: var(--radius-md);
  padding: 0 var(--button-padding-x);
}
button.primary,
.btn-link.primary {
  background: var(--accent);
  border-color: transparent;
  color: var(--on-accent);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 28%, transparent);
}
button.contrast {
  background: transparent;
  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
  color: var(--danger);
}
button.contrast:hover { background: var(--danger-soft); border-color: var(--danger); }
.segmented { border-radius: var(--radius-md); }
.segmented button { border-radius: var(--radius-sm); }
.segmented button.active {
  background: var(--accent);
  color: var(--on-accent);
}
.badge,
.status {
  border-radius: var(--radius-full);
  text-transform: none;
  font-weight: 700;
}

/* 状态光语义重排：青=执行中 · 蓝=启动 · 绿=就绪 · 琥珀/红=要人管 */
.status-working,
.status-active { background: var(--accent-soft); color: var(--accent); }
.status-analyzing { background: var(--accent-soft); color: var(--accent); }
.status-starting { background: var(--info-soft); color: var(--info); }
.status-idle { background: var(--success-soft); color: var(--success); }
.status-dormant {
  box-sizing: border-box;
  background: color-mix(in srgb, var(--muted) 14%, var(--surface));
  color: var(--muted);
}
.status-attention {
  background: color-mix(in srgb, var(--warning) 13%, var(--surface));
  color: var(--warning);
}
.status-limited { background: var(--danger-soft); color: var(--danger); }
.status-stalled { background: var(--danger-soft); color: var(--danger); }

/* ── 玻璃面板（dark 下生效；light 保持实底）─────────────────────────────── */
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .metric-card,
:root[data-theme="dark"] .bd-card,
:root[data-theme="dark"] .filters {
  background: var(--surface);
  backdrop-filter: none;
  border-color: var(--border-soft);
  background-image: none;
}

/* ── 数字生命球（bot avatar，全站统一）──────────────────────────────────── */
.orb-avatar {
  position: relative;
  /* inline-flex 让球在任意容器（含 grid/inline 上下文）都占满自身尺寸——
     只写 width/height 而不定 display 时，裸 <span> 会退回 inline，宽高被忽略，
     父级 grid 列量成 0 宽，头像整个塌掉（话题/状态板卡片即如此）。 */
  display: inline-flex;
  vertical-align: middle;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex: none;
  background: radial-gradient(circle at 32% 28%, #d8fbff, var(--c1, #5be3ff) 38%, var(--c2, #4f8bff) 72%, #060d1c 105%);
  box-shadow: 0 0 16px color-mix(in srgb, var(--c1, #5be3ff) 32%, transparent), inset 0 0 9px rgba(255, 255, 255, 0.28);
}
.orb-avatar-sm {
  width: 24px;
  height: 24px;
  box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.28);
}
/* 有真实头像时，把渐变球底色换成中性占位，避免"先亮球后头像"的闪烁；
   渐变球只在头像加载失败（onerror 移除 .orb-has-img）时作为兜底重新露出。 */
.orb-avatar.orb-has-img {
  background: var(--surface-muted);
  box-shadow: inset 0 0 0 1px var(--border);
}
/* 真实头像盖在数字生命球上；onerror 时移除自身，露出下面的渐变球兜底。
   不加淡入动画——innerHTML 每次重绘都会重建 <img>，动画会跟着重放，看起来就是
   头像在"刷新"。图本身有 HTTP 缓存 + URL 走 localStorage，重建即同步出图。 */
.orb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
/* 飞书群头像：圆角方形，和圆形的 bot 头像一眼区分开。 */
.orb-avatar.orb-square,
.orb-avatar.orb-square .orb-img { border-radius: var(--radius-md); }
.orb-avatar.orb-square.orb-avatar-sm,
.orb-avatar.orb-square.orb-avatar-sm .orb-img { border-radius: var(--radius-sm); }
/* 群列表名称单元格：群头像 + 群名/ID 横向排列。 */
.g-chat-cell { display: flex; align-items: center; gap: 8px; }
.g-chat-meta { min-width: 0; }
.g-profile-status {
  display: inline-flex;
  align-items: center;
  max-width: 240px;
  margin-top: 5px;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
}
.g-profile-status.full {
  border-color: color-mix(in srgb, var(--success) 35%, var(--border-soft));
  background: color-mix(in srgb, var(--success) 10%, var(--surface));
  color: var(--success);
}
.g-profile-status.partial {
  border-color: color-mix(in srgb, var(--warning) 35%, var(--border-soft));
  background: color-mix(in srgb, var(--warning) 12%, var(--surface));
  color: var(--warning);
}
.g-profile-status.muted { font-weight: 600; }
.g-save-profile-dialog {
  display: grid;
  gap: 12px;
}
.g-save-profile-dialog [hidden] {
  display: none !important;
}
#g-drawer .g-save-profile-dialog .form-row {
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
#g-drawer .g-save-profile-dialog .form-row > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.g-save-profile-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface-muted);
}
.g-save-profile-section-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}
.g-save-profile-section-head > span {
  color: var(--fg);
  font-weight: 700;
}
.g-save-profile-section-head > small {
  color: var(--muted);
  font-size: 12px;
}
.g-save-profile-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.g-save-profile-stats span {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 3px 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
}
.g-save-profile-stats strong {
  color: var(--fg);
}
.g-save-profile-stats .warn {
  color: var(--danger);
  background: var(--danger-soft);
}
.g-save-profile-entry-list {
  display: grid;
  gap: 6px;
  max-height: 170px;
  overflow: auto;
}
.g-save-profile-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.g-save-profile-entry > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.g-save-profile-entry strong,
.g-save-profile-entry code {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.g-save-profile-entry code {
  color: var(--muted);
  background: transparent;
  padding: 0;
}
.g-save-profile-entry.error {
  border-color: color-mix(in srgb, var(--danger) 35%, var(--border-soft));
}
.g-save-profile-entry-status {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.g-save-profile-entry-status.ok {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 12%, var(--surface));
}
.g-save-profile-entry-status.error {
  color: var(--danger);
  background: var(--danger-soft);
}
.g-save-profile-empty {
  color: var(--muted);
  font-size: 13px;
}
.g-save-profile-switch {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
  height: var(--button-height);
  min-height: var(--button-height);
  padding: 2px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  overflow-x: auto;
}
.g-save-profile-switch button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--button-height) - 6px);
  min-height: calc(var(--button-height) - 6px);
  max-height: calc(var(--button-height) - 6px);
  min-width: 0;
  padding: 0 var(--button-padding-x);
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  white-space: nowrap;
}
.g-save-profile-switch button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--border-soft) 60%, transparent);
  color: var(--accent-strong);
}
.g-save-profile-switch button.active {
  background: color-mix(in srgb, var(--muted) 12%, var(--surface));
  color: var(--accent);
  box-shadow: none;
}
.g-save-profile-switch button:disabled {
  opacity: 0.46;
  cursor: not-allowed;
}
#g-drawer .g-save-profile-dialog input[name="profileId"] {
  box-sizing: border-box;
  width: min(420px, 100%);
  height: var(--button-height);
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  box-shadow: none;
}
#g-drawer .g-save-profile-dialog input[name="profileId"]:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--accent-strong);
}
#g-drawer .g-save-profile-dialog input[name="profileId"]:focus,
#g-drawer .g-save-profile-dialog input[name="profileId"]:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  color: var(--fg);
  outline: none;
  box-shadow: none;
}
.g-save-profile-picker {
  display: grid;
  gap: 8px;
  max-height: 220px;
  overflow: auto;
}
.g-save-profile-pick {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  justify-content: stretch;
  min-height: 38px;
  width: 100%;
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  box-shadow: none;
  text-align: left;
}
.g-save-profile-pick.selected {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--accent-strong);
}
.g-save-profile-pick span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.g-save-profile-pick small,
.g-save-profile-summary,
.g-save-profile-status,
.form-row small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}
.g-save-profile-target {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 10px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
}
.g-save-profile-target > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.g-save-profile-target code {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.g-save-profile-target small {
  grid-column: 2;
  color: var(--muted);
  font-size: 12px;
}
.g-save-profile-summary {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
}
.g-save-profile-summary.warn,
.g-save-profile-status.error {
  color: var(--danger);
  background: var(--danger-soft);
}
.g-save-profile-status {
  min-height: 0;
}
.g-save-profile-status:not(:empty) {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}
.g-save-profile-status.ok:not(:empty) {
  border-color: color-mix(in srgb, var(--success) 28%, var(--border-soft));
  background: color-mix(in srgb, var(--success) 8%, var(--surface));
  color: var(--success);
}
.g-save-profile-status.error:not(:empty) {
  border-color: color-mix(in srgb, var(--danger) 34%, var(--border-soft));
  background: color-mix(in srgb, var(--danger) 9%, var(--surface));
  color: var(--danger);
}
.orb-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--bg);
}
.orb-dot-ok { background: var(--success); }
.orb-dot-busy { background: var(--accent); }
.orb-dot-warn { background: var(--warning); }
.orb-dot-off { background: var(--faint); }

/* ── 工作台首页 ─────────────────────────────────────────────────────────── */
.sect-head { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px; min-height: var(--section-title-row-height); margin-top: 0; }
.sect-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--section-title-text-height);
  margin: 0;
  font-size: var(--section-title-font-size);
  font-weight: 700;
  line-height: var(--section-title-text-height);
}
.sect-head h2::before {
  content: "";
  width: var(--section-title-dot-size);
  height: var(--section-title-dot-size);
  flex: none;
  border-radius: var(--radius-full);
  background: var(--accent);
}
.hero-page .sect-head h2::before {
  width: 3px;
  height: 14px;
  border-radius: var(--radius-full);
}
.sect-head span { color: var(--faint); font-size: 12px; }
.sect-head .sect-head-hint {
  align-self: flex-end;
  margin-bottom: 4px;
  line-height: 1.35;
}
.sect-head .sect-head-count {
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  height: var(--section-title-text-height);
  min-height: var(--section-title-text-height);
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.sect-head-controls {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.sect-head-controls .sect-head-action {
  margin-left: 0;
}
.sect-sort-menu {
  position: relative;
  flex: none;
  width: var(--dropdown-trigger-width);
}
.sect-sort-menu > summary {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-height: var(--button-height);
  min-width: 0;
  padding: 0 28px 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  list-style: none;
  cursor: pointer;
  user-select: none;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    color 150ms ease,
    transform 150ms ease;
}
.sect-sort-menu > summary::-webkit-details-marker {
  display: none;
}
.sect-sort-menu > summary::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 14px;
  height: 14px;
  border: 0;
  background: currentColor;
  transform: translateY(-50%);
  transform-origin: center;
  opacity: 0.72;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 5.25 7 8.75l3.5-3.5' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 5.25 7 8.75l3.5-3.5' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}
.sect-sort-menu[open] > summary,
.sect-sort-menu > summary:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}
.sect-sort-menu.is-disabled > summary,
.sect-sort-menu.is-disabled > summary:hover {
  border-color: var(--border-soft);
  background: var(--surface-muted);
  color: var(--faint);
  cursor: not-allowed;
  opacity: 0.62;
}
.sect-sort-menu[open] > summary::after {
  transform: translateY(-50%) rotate(180deg);
}
.sect-head .sect-sort-menu span {
  color: inherit;
  font-size: inherit;
}
.sect-sort-title {
  color: var(--faint);
}
.sect-sort-value {
  max-width: 92px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sect-sort-pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  z-index: 40;
  display: grid;
  gap: 4px;
  min-width: var(--dropdown-popover-min-width);
  padding: 6px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--modal-shadow);
  transform: translateX(-50%);
}
/* 会话筛选里的「来源 / 所在聊天」弹层宽度自适应 + 不折行的规则统一定义在下方
   （.sessions-filters .sect-sort-pop，靠后覆盖），此处不再重复。 */
.sect-sort-pop button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: var(--button-compact-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-align: left;
  cursor: pointer;
  /* 选项不换行：长文案（如「来源：外部接入 (/adopt)」「单聊 · 申晗 · <bot名>」）
     以前会折成多行、显得拥挤。改为单行 + 超长省略号；弹层宽度下方放宽。 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 长列表下拉的过滤框：滚动时钉在弹层顶部（负 margin 盖住弹层 padding）。 */
.sect-sort-pop input.sect-sort-search[type="search"] {
  position: sticky;
  top: -6px;
  z-index: 1;
  box-sizing: border-box;
  width: calc(100% + 12px);
  margin: -6px -6px 0;
  height: var(--button-height) !important;
  min-height: var(--button-height) !important;
  max-height: var(--button-height) !important;
  padding: 0 var(--button-padding-x) !important;
  border: none !important;
  border-bottom: 1px solid var(--border-soft) !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  background: var(--surface) !important;
  background-clip: padding-box;
  color: var(--text);
  font-size: 12px;
  outline: none;
  box-shadow: none;
}
.sect-sort-pop input.sect-sort-search[type="search"]:focus {
  border-bottom-color: var(--accent) !important;
}
.sect-sort-pop .sect-sort-empty {
  margin: 0;
  padding: 8px var(--button-padding-x);
  color: var(--muted);
  font-size: 12px;
}
.sect-sort-pop button[aria-current="true"] {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--accent-strong);
}
.sect-sort-pop button:hover {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  color: var(--accent-strong);
}
.sect-sort-pop button[aria-current="true"]:hover {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--accent-strong);
}
.overview-active-sort-menu {
  width: 156px;
}
.overview-active-sort-menu .sect-sort-value {
  max-width: 116px;
}
.overview-active-sort-menu > .sect-sort-pop {
  width: 100%;
  min-width: 100%;
}
.sect-head-action {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 82px;
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid color-mix(in srgb, var(--accent) 64%, var(--border));
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    color 150ms ease,
    transform 150ms ease;
}
.sect-head-action:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent-strong);
  transform: translateY(-1px);
}

.team-grid {
  --team-card-min-width: 170px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(var(--team-card-min-width), calc((100% - 52px) / 5)), 1fr));
  gap: 13px;
}

.team-section .sect-head {
  column-gap: 10px;
}

.team-section .sect-head-controls {
  align-self: flex-end;
  height: var(--button-height);
  margin-bottom: 1px;
}

.team-section .sect-head-action {
  height: var(--button-height);
  min-height: var(--button-height);
}

/* AI 团队折叠/展开开关：贴着卡片栅格下沿居中，弱化成次级控件 */
.team-toggle {
  justify-self: center;
  margin-top: 6px;
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  box-shadow: none;
}
.team-toggle[hidden] { display: none !important; }
.team-toggle:hover { color: var(--fg); border-color: var(--accent); }
.mate {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 15px 13px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  box-shadow: var(--shadow);
  position: relative;
}
:root[data-theme="dark"] .mate {
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(20px);
  border-color: rgba(255, 255, 255, 0.09);
  background-image: none;
}
.mate-attn {
  border-color: color-mix(in srgb, var(--warning) 42%, transparent);
}
.mate-off { opacity: 0.55; }
.mate-top { display: flex; align-items: center; gap: 11px; }
.mate-console {
  position: absolute;
  top: 11px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  color: var(--faint);
  background: var(--surface-muted);
  border: 1px solid var(--border-soft);
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.mate-console:hover {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
}
:root[data-theme="dark"] .mate-console { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.1); }
.mate-id { min-width: 0; }
.mate-id b { display: block; font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* 只给名字这一行右侧留出 ↗ 按钮宽度：长名字（如「哆啦A(dev)-claude」）提前省略号，
 * 不会滑到绝对定位的按钮底下；cliId 标签在下一行、按钮只占顶部，均不受影响。 */
.mate-console ~ .mate-top .mate-id b { padding-right: 24px; }
.mate-role {
  display: inline-block;
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface-muted);
  border: 1px solid var(--border-soft);
  padding: 1px 9px;
  border-radius: var(--radius-sm);
}
:root[data-theme="dark"] .mate-role { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.1); }
.mate-task {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  min-height: 36px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mate-task b { color: var(--fg); font-weight: 600; }
.mate-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--faint);
}
/* 右侧活跃时间不换行、不被长状态 tag（如「执行中 · N 会话」）挤成两行；
 * 窄卡 + 双长文本时由状态 tag 收缩省略来吸收溢出（时间短、优先保住）。 */
.mate-foot > span { white-space: nowrap; flex: 0 0 auto; }
.mate-foot .tag {
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tag {
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}
.tag-run { color: var(--accent); background: var(--accent-soft); }
.tag-ok { color: var(--success); background: var(--success-soft); }
.tag-warn { color: var(--warning); background: var(--warning-soft); }
.tag-off { color: var(--faint); background: var(--surface-muted); }
:root[data-theme="dark"] .tag-off { background: rgba(255, 255, 255, 0.06); }

.overview-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 14px;
  align-items: start;
}
.overview-main {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.overview-block { display: grid; gap: var(--section-title-content-gap); min-width: 0; }
.overview-panel-head {
  align-items: center;
  margin-top: 0;
}

.overview-panel-head .sect-head-count,
.overview-panel-head .sect-head-hint,
.overview-panel-head .sect-head-controls,
.overview-panel-head > .sect-head-action {
  align-self: center;
  margin-bottom: 0;
}
.overview-side {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.active-sessions-panel,
.schedules-panel {
  display: flex;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.active-sessions-panel > .overview-list,
.schedules-panel > .overview-list {
  flex: 1;
  min-height: 0;
  align-content: start;
  overflow-x: hidden;
  overflow-y: auto;
}

.overview-list-item-schedule .overview-list-main {
  flex: 1 1 140px;
}

.overview-list-item-schedule .overview-list-meta {
  flex: 0 1 min(46%, 170px);
  width: min(46%, 170px);
  min-width: 0;
  max-width: min(46%, 170px);
  overflow: hidden;
  text-overflow: ellipsis;
}

.overview-list-item-schedule .overview-list-meta .ui-overflow-text {
  width: 100%;
}

/* ── 会话看板：工作面收敛（弱玻璃 + 高密度 + 新状态光）───────────────────── */
.sessions-board {
  background-image: none;
  padding: 0;
}
.session-board-column { border-radius: var(--radius-xl); }
:root[data-theme="dark"] .session-board-column {
  background: color-mix(in srgb, var(--surface-muted) 88%, var(--bg));
  border-color: var(--border-soft);
}
:root[data-theme="dark"] .session-board-column > header {
  background: transparent;
  border-color: var(--border-soft);
}
.session-board-column h2 {
  font-family: inherit;
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 13px;
}
.session-board-count { border-radius: var(--radius-full); font-family: inherit; }
.session-board-needs-you { --col-signal: var(--warning); }
.session-board-needs-you { background: color-mix(in srgb, var(--warning) 4%, var(--surface)); }
.session-board-todo { --col-signal: var(--info); }
.session-board-working { --col-signal: var(--accent); }
.session-board-idle { --col-signal: var(--success); }
:root[data-theme="dark"] .session-board-needs-you {
  background: color-mix(in srgb, var(--warning) 7%, var(--surface-muted));
}
.session-card { border-radius: var(--radius-lg); }
:root[data-theme="dark"] .session-card {
  background: color-mix(in srgb, var(--surface) 92%, var(--bg));
  border-color: var(--border-soft);
}
.session-card-top {
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center;
}
.session-signal {
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 10%, transparent);
  border-color: color-mix(in srgb, var(--warning) 32%, transparent);
  font-family: inherit;
  border-radius: var(--radius-sm);
}

/* 表格 hover 行 */
:root[data-theme="dark"] table { background: rgba(255, 255, 255, 0.03); }
:root[data-theme="dark"] th { background: rgba(255, 255, 255, 0.04); }

/* ── 会话筛选条：一行轻量胶囊，不再是一面板 checkbox 墙 ─────────────────── */
.sessions-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.sessions-filters input[type=search] {
  flex: 1 1 240px;
  min-width: 220px;
  max-width: 360px;
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border-radius: var(--radius-full);
  background: var(--surface);
  border: 1px solid var(--border-soft);
}
.sessions-filters .sect-sort-menu {
  width: var(--dropdown-trigger-width);
}
.sessions-filters .sect-sort-menu > summary {
  width: 100%;
  min-width: 0;
}
.sessions-filters .sect-sort-pop {
  /* 「来源 / 所在聊天」选项文案偏长（如「来源：外部接入 (/adopt)」、含 bot 后缀的
     单聊名）：弹层按最长选项自适应、不折行，封顶后省略号；左对齐避免右侧超出视口。
     用 .dashboard-toolbar 前缀匹配上 `.dashboard-toolbar > .sect-sort-menu >
     .sect-sort-pop`（那条把宽度锁成 100%），靠后 + 同等特指度覆盖它。 */
  left: 0;
  transform: none;
  width: max-content;
  min-width: 220px;
  max-width: min(380px, calc(100vw - 48px));
}
.dashboard-toolbar.sessions-filters > .sect-sort-menu > .sect-sort-pop {
  left: 0;
  transform: none;
  width: max-content;
  min-width: 220px;
  max-width: min(380px, calc(100vw - 48px));
}
/* 让选项按 max-content 撑开弹层：默认按钮的 ellipsis 会把 max-content 量成最小宽度，
   这里放开——只有触达 max-width 上限时才由按钮自身 ellipsis 收尾。 */
.sessions-filters .sect-sort-pop button {
  min-width: 0;
  white-space: nowrap;
}
:root[data-theme="dark"] .sessions-filters input[type=search] {
  background-color: var(--surface);
  border-color: var(--border-soft);
}
.sessions-filters input[type=search]:focus {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

/* 「仅活跃」toggle chip：checkbox 隐藏，整块控件就是开关 */
.sessions-filters .filter-toggle {
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border-radius: var(--radius-full);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}
:root[data-theme="dark"] .sessions-filters .filter-toggle {
  background: var(--surface);
  border-color: var(--border-soft);
}
.sessions-filters .filter-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.sessions-filters .filter-toggle span::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 7px;
  background: var(--faint);
  vertical-align: 1px;
}
.sessions-filters .filter-toggle:has(input:checked) {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--accent-soft);
}
.sessions-filters .filter-toggle:has(input:checked) span::before {
  background: var(--accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 60%, transparent);
}

/* CLI 下拉 chip + 弹层 */
.filter-cli {
  position: relative;
  width: var(--dropdown-trigger-width);
  flex: none;
}
.filter-cli summary {
  position: relative;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-height: var(--button-height);
  padding: 0 28px 0 var(--button-padding-x);
  border-radius: var(--radius-full);
  border: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    color 150ms ease,
    transform 150ms ease;
}
.filter-cli summary::-webkit-details-marker { display: none; }
.filter-cli summary::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-58%) rotate(45deg);
  opacity: 0.72;
}
.filter-cli summary b { font-weight: 700; color: var(--fg); }
.filter-cli summary b.cli-filter-active { color: var(--accent); }
.filter-cli summary:hover,
.filter-cli[open] summary {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}
.filter-cli[open] summary::after {
  transform: translateY(-34%) rotate(225deg);
}
.filter-cli-pop {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  left: 0;
  width: 340px;
  min-width: var(--dropdown-trigger-width);
  max-width: calc(100vw - 48px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  box-shadow: var(--modal-shadow);
}
.filter-cli-head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.filter-cli-search {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--button-compact-height);
  padding: 0 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-soft);
  background: var(--surface-raised);
  color: var(--fg);
  font-size: 12px;
}
.filter-cli-search:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border-soft));
}
.filter-cli-bulk {
  display: inline-flex;
  gap: 4px;
  flex: none;
}
.filter-cli-bulk button {
  min-height: var(--button-compact-height);
  padding: 0 9px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-soft);
  background: var(--surface-raised);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.filter-cli-bulk button:hover {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border-soft));
  color: var(--accent-strong);
}
.filter-cli-options {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 320px;
  overflow-y: auto;
}
.filter-cli-empty {
  padding: 8px 4px;
  color: var(--faint);
  font-size: 12px;
}
.filter-cli-pop .filter-check {
  min-height: var(--button-compact-height);
  padding: 0 var(--button-padding-x);
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.filter-cli-pop .filter-check input { position: absolute; opacity: 0; pointer-events: none; }
.filter-cli-pop .filter-check:hover {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  color: var(--accent-strong);
}
.filter-cli-pop .filter-check:has(input:checked) {
  color: var(--accent-strong);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

@media (max-width: 720px) {
  .sessions-filters input[type=search] { flex: 1 1 100%; }
  .filter-cli-pop { left: auto; right: 0; }
}

/* ── Bot 配置 → 数字员工档案（master-detail）────────────────────────────── */
.bd-layout {
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

/* 左：员工名册 */
.bd-roster {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  padding: 8px;
  display: grid;
  gap: 3px;
  position: sticky;
  top: 84px;
}
:root[data-theme="dark"] .bd-roster {
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(18px);
  border-color: rgba(255, 255, 255, 0.09);
}
.bd-roster-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-lg);
  cursor: pointer;
}
.bd-roster-item:hover { background: var(--surface-muted); }
:root[data-theme="dark"] .bd-roster-item:hover { background: rgba(255, 255, 255, 0.06); }
.bd-roster-item.on {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}
.bd-roster-tx { min-width: 0; flex: 1; }
.bd-roster-tx b { display: block; font-size: 13px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-roster-tx b .ui-overflow-text { display: block; font-weight: 600; }
.bd-roster-tx span { display: block; color: var(--faint); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-roster-flag {
  flex: none;
  font-size: 9px;
  font-weight: 700;
  color: var(--warning);
  border: 1px solid color-mix(in srgb, var(--warning) 42%, transparent);
  border-radius: var(--radius-sm);
  padding: 1px 7px;
}

/* 右：档案 */
.bd-profile { max-width: none; padding: 0; background: transparent; border: 0; box-shadow: none; }
:root[data-theme="dark"] .bd-profile { background: transparent; backdrop-filter: none; background-image: none; }
.bd-profile-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin-bottom: 0;
  padding: 16px 18px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  box-shadow: var(--shadow);
}
:root[data-theme="dark"] .bd-profile-head {
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(18px);
  border-color: rgba(255, 255, 255, 0.09);
  background-image: none;
}
.bd-profile-avatar {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--surface-muted) 72%, transparent);
}
.bd-profile-head .orb-avatar {
  width: 48px;
  height: 48px;
}
/* 档案头头像可点击上传（BotAvatarControl）。 */
.bd-avatar-editable { position: relative; }
.bd-avatar-btn {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  border-radius: var(--radius-full);
  cursor: pointer;
}
.bd-avatar-btn:disabled { cursor: progress; }
.bd-avatar-edit-badge {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  font-size: 11px;
  border-radius: var(--radius-full);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow);
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.bd-avatar-editable:hover .bd-avatar-edit-badge,
.bd-avatar-btn:focus-visible .bd-avatar-edit-badge,
.bd-avatar-btn:disabled .bd-avatar-edit-badge { opacity: 1; }
/* 状态气泡挂在头像下方，避免撑坏 58px 头像栏的网格布局。 */
.bd-avatar-status {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 6;
  min-width: 240px;
  max-width: 340px;
  padding: 6px 9px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  box-shadow: var(--shadow);
  line-height: 1.5;
}
.bd-avatar-status .bd-feishu-login { margin-left: 6px; }
.bd-profile-main {
  min-width: 0;
  display: grid;
  align-content: center;
}
.bd-profile-id {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.bd-profile-id strong { display: block; font-size: 18px; }
.bd-profile-title-row {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 30px;
  padding-right: 96px;
}
.bd-profile-title-row[hidden] { display: none; }
.bd-profile-title-content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}
.bd-profile-title-content > strong {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: min(420px, 100%);
  min-height: 26px;
  overflow: hidden;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bd-profile-id .mate-role {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  margin-top: 0;
  padding: 0 10px;
  border-radius: var(--radius-full);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
}
.bd-profile-id code {
  display: block;
  margin-top: 0;
  padding: 0;
  background: transparent;
  color: var(--faint);
  font-size: 10.5px;
}
.bd-profile-appid-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.bd-console-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.bd-console-link:hover { color: var(--accent-strong); text-decoration: underline; }
/* 机器人改名（档案头 ✎ → 行内编辑器） */
.bd-name-edit {
  position: absolute;
  top: 50%;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 86px;
  height: var(--button-height);
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid color-mix(in srgb, var(--accent) 46%, var(--border-soft));
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  flex: none;
  opacity: 1;
  transform: translateY(-50%);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.bd-name-edit:hover {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}
.bd-name-editor { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bd-name-editor[hidden] { display: none; }
.bd-name-input {
  box-sizing: border-box;
  width: min(320px, 100%);
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  box-shadow: none;
  outline: none;
}
.bd-name-input:hover:not(:disabled),
.bd-name-input:focus {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
  box-shadow: none;
}
.bd-name-editor button { font-size: 12px; }
.bd-name-status { display: block; margin-top: 4px; font-size: 11.5px; }
.bd-name-status:empty { display: none; }
/* 「扫码登录飞书」——改名因缺登录态降级时才亮出 */
.bd-feishu-login {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-md);
  border: 1px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  cursor: pointer;
}
.bd-feishu-login:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.bd-feishu-login[hidden] { display: none; }

/* 飞书扫码登录 modal */
.feishu-login-overlay {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: auto;
  background: var(--modal-backdrop);
  backdrop-filter: blur(3px);
}
.feishu-login-modal {
  position: relative;
  display: grid;
  gap: 12px;
  /* margin:auto 让 modal 在极矮视口高于视口时,靠 overlay 的 overflow:auto 也能
     完整滚到顶部。纯 flex 居中(align-items:center)下,超高子元素会上下等量溢出,
     顶部溢出无法滚回(flexbox 通用行为),标题/关闭按钮够不着;auto margin 在负
     可用空间下归 0、子元素落到滚动起点,正常视口仍由 auto margin 居中。 */
  margin: auto;
  width: min(360px, 92vw);
  padding: 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  box-shadow: var(--modal-shadow);
  text-align: center;
}
.feishu-login-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--faint);
  font-size: 15px;
  cursor: pointer;
}
.feishu-login-close:hover { background: color-mix(in srgb, var(--faint) 18%, transparent); color: inherit; }
.feishu-login-title { margin: 0; font-size: 17px; line-height: 1.25; }
.feishu-login-hint { margin: 0; font-size: 12.5px; color: var(--faint); line-height: 1.5; }
.feishu-login-qr { min-height: 40px; display: flex; justify-content: center; }
.feishu-login-actions { margin: 0; }
.bd-profile-meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 7px;
  text-align: left;
  min-width: 0;
}
.bd-profile-meta small {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.bd-profile-meta .bd-meta-ok {
  border-color: color-mix(in srgb, var(--success) 35%, var(--border-soft));
  background: color-mix(in srgb, var(--success) 10%, var(--surface));
  color: var(--success);
}

.bd-tile {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 4px 18px 16px;
}
:root[data-theme="dark"] .bd-tile {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(18px);
  border-color: rgba(255, 255, 255, 0.08);
}
.bd-tile .bd-section { padding-top: 14px; }
.bd-tile .bd-section + .bd-section { margin-top: 14px; border-top: 1px solid var(--border-soft); }
.bd-tile .bd-section-title {
  font-size: 12.5px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--fg);
  display: flex;
  align-items: center;
  gap: 8px;
}
.bd-tile .bd-section-title::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 55%, transparent);
  flex: none;
}
.bd-summary-limits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.skills-page-grid {
  display: grid;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  max-width: 1600px;
}

.skills-page-stack {
  display: grid;
  gap: 18px;
  width: 100%;
  max-width: 1600px;
}

.skills-config-row {
  display: grid;
  grid-template-columns: minmax(220px, 0.55fr) minmax(560px, 1.45fr);
  gap: 18px;
  align-items: stretch;
}

.skills-config-row > .skills-config-block:nth-child(3) {
  grid-column: 1 / -1;
}

.skills-side-rail {
  position: sticky;
  top: 18px;
  z-index: 10;
  display: grid;
  gap: 14px;
  min-width: 0;
}

.skills-side-rail > .bd-card,
.skills-main-panel > .bd-card,
.skills-config-row > .bd-card,
.skills-config-block > .bd-card,
.skills-bot-card {
  max-width: none;
  margin-bottom: 0;
}

.skills-config-block,
.skills-installed-block {
  display: grid;
  gap: var(--section-title-content-gap);
  min-width: 0;
  width: 100%;
}

.skills-config-block {
  grid-template-rows: var(--section-title-row-height) minmax(0, 1fr);
  align-self: stretch;
}

.skills-config-row .sect-head {
  height: var(--section-title-row-height);
  min-height: var(--section-title-row-height);
  flex-wrap: nowrap;
  overflow: visible;
}

.skills-config-row .sect-head h2 .ui-field-title,
.skills-config-row .sect-head h2 .ui-field-title-text {
  color: inherit;
  font: inherit;
  line-height: inherit;
}

.skills-config-row .sect-head h2 .ui-field-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.skills-defaults-panel,
.skills-install-panel {
  padding: 14px;
}

.skills-config-card,
.skills-installed-panel {
  min-width: 0;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.skills-config-card,
.skills-install-panel {
  height: 100%;
}

.skills-install-panel {
  position: relative;
}

.skills-install-anchor {
  min-width: 0;
  scroll-margin-top: 18px;
}

.skills-install-title {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}

.skills-install-title .bd-section-title {
  margin: 0;
}

.skills-inline-target {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border-soft));
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
}

.skills-inline-target button {
  flex: none;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.skills-card-head {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  min-height: var(--section-title-row-height);
  margin: 0 0 var(--section-title-content-gap);
}

.skills-card-head .bd-section-title {
  margin: 0;
}

.skills-card-head .sect-head-count {
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  height: var(--section-title-text-height);
  min-height: var(--section-title-text-height);
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.skills-card-head .sect-head-hint {
  align-self: flex-end;
  margin-bottom: 4px;
  color: var(--faint);
  font-size: 12px;
  line-height: 1.35;
}

.skills-card-head .skills-installed-toolbar {
  margin-left: auto;
}

.skills-help-tip {
  position: relative;
  display: inline-flex;
}

.skills-help-button {
  width: 20px;
  height: 20px;
  min-height: 20px;
  padding: 0;
  border-radius: var(--radius-full);
  color: var(--muted);
}

.skills-help-popover {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 50;
  width: min(520px, calc(100vw - 48px));
  padding: 9px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  background: var(--surface-raised);
  box-shadow: var(--modal-shadow);
  color: var(--fg);
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-line;
  opacity: 0;
  pointer-events: none;
  transform: translate(0, -4px);
  transition: opacity 140ms ease, transform 140ms ease;
}

.skills-help-tip:hover .skills-help-popover,
.skills-help-tip:focus-within .skills-help-popover {
  opacity: 1;
  transform: translate(0, 0);
}

.skills-install-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.skills-install-grid label:first-child,
.skills-install-grid .skills-source-label,
.skills-install-field-wide {
  grid-column: 1 / -1;
}

.skills-install-grid label,
.skills-install-grid .skills-source-label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.skills-install-field-wide {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.skills-install-grid .skills-source-label > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.skills-install-field-wide > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.skills-install-field-wide > small {
  margin-top: -3px;
  color: var(--faint);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.35;
}

.skills-install-grid input,
.skills-attach-row select {
  width: 100%;
  min-width: 0;
}

.skills-source-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

.skills-candidate-list,
.skills-install-bottom-row,
.skills-local-discovery-panel {
  grid-column: 1 / -1;
}

.skills-install-bottom-row {
  display: grid;
  grid-template-columns: minmax(260px, .9fr) minmax(320px, 1.1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.skills-install-bottom-row > .skills-local-discovery-panel {
  grid-column: auto;
}

.skills-scan-strategy {
  display: grid;
  gap: 4px;
  min-height: var(--button-height);
  padding: 8px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 55%, transparent);
}

.skills-scan-toggle {
  display: flex !important;
  align-items: flex-start;
  gap: 9px !important;
  color: var(--fg) !important;
  cursor: pointer;
}

.skills-install-grid .skills-scan-toggle > input[type="checkbox"] {
  width: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  max-height: 16px !important;
  margin: 1px 0 0 !important;
  padding: 0 !important;
  border-radius: 4px !important;
  accent-color: var(--accent);
}

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

.skills-scan-toggle strong {
  color: var(--fg);
  font-size: 11.5px;
}

.skills-scan-toggle small,
.skills-scan-strategy > p {
  margin: 0;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.35;
}

.skills-scan-strategy > p {
  padding-left: 25px;
  color: var(--faint);
}

.skills-advanced-options {
  display: grid;
  gap: 0;
  min-width: 0;
  padding: 0;
}

.skills-advanced-options summary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding-right: 92px;
  cursor: pointer;
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
}

.skills-advanced-marker {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 6px solid currentColor;
  flex: 0 0 auto;
  transform-origin: 45% 50%;
  transition: transform 140ms ease;
}

.skills-advanced-options[open] .skills-advanced-marker {
  transform: rotate(90deg);
}

.skills-install-actions,
.skills-local-discovery-panel,
.skills-candidate-list-head {
  display: flex;
  gap: 8px;
  align-items: center;
}

.skills-install-actions {
  position: static;
  align-self: end;
  justify-content: flex-end;
  min-height: 36px;
  flex-wrap: nowrap;
}

.skills-install-actions button,
.skills-local-discovery-panel button,
.skills-candidate-list-head button {
  min-height: 36px;
  padding: 0 var(--button-padding-x);
  white-space: nowrap;
}

.skills-candidate-list {
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 65%, transparent);
}

.skills-candidate-list-head {
  justify-content: space-between;
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
}

.skills-candidate-row {
  position: relative;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px !important;
  align-items: start;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--fg) !important;
  cursor: pointer;
}

.skills-candidate-row::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: var(--radius-full);
  background: var(--border-soft);
  box-shadow: inset 0 0 0 1px var(--border);
}

.skills-candidate-row:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.skills-candidate-row:has(input:checked)::before {
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.skills-candidate-row input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.skills-candidate-row span {
  display: grid;
  min-width: 0;
}

.skills-candidate-row small {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skills-install-selection-dialog {
  width: min(720px, calc(100vw - 44px));
}

.skills-install-selection-body {
  max-height: 460px;
}

.skills-install-selection-body > .skills-candidate-list {
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.skills-local-discovery-panel {
  justify-content: space-between;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 55%, transparent);
}

.skills-local-discovery-panel div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.skills-local-discovery-panel strong {
  color: var(--fg);
  font-size: 12px;
}

.skills-local-discovery-panel span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.skills-main-panel,
.skills-bot-grid {
  display: grid;
  gap: 10px;
}

.skills-main-panel {
  gap: 18px;
  min-width: 0;
}

.skills-heading-actions {
  min-width: 0;
}

.skills-heading-actions #skills-refresh {
  flex: none;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

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

.skills-metric-strip span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  min-width: 106px;
  padding: 0 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
}

.skills-metric-strip small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.skills-metric-strip strong {
  color: var(--fg);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  font-family: var(--mono);
}

.skills-installed-panel {
  padding: 18px;
  min-width: 0;
}

.skills-section-head {
  display: grid;
  gap: 4px;
  margin-bottom: var(--section-title-content-gap);
}

.skills-section-head-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
}

.skills-section-head > div:first-child {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 3px 10px;
  min-width: 0;
}

.skills-section-head h2 {
  margin: 0;
  font-size: 16px;
}

.skills-section-head p {
  margin: 0 0 1px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.skills-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.skills-row {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0;
  min-height: 162px;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.skills-row:first-child { border-top: 1px solid var(--border-soft); }
.skills-row-body {
  min-width: 0;
  padding: 14px 14px 12px;
}
.skills-row strong {
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.skills-row p {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 6px 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.skills-row small {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.skills-source-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-height: 22px;
  margin-top: 4px;
  padding: 2px 7px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

.skills-card-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: auto;
  border-top: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--surface-muted) 55%, transparent);
}

.skills-card-actions button {
  min-height: 38px;
  padding: 0 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.skills-card-actions button + button {
  border-left: 1px solid var(--border-soft);
}

.skills-card-actions button:hover {
  background: var(--surface-muted);
  color: var(--fg);
}

.skills-card-actions [data-action="remove-skill"]:hover {
  color: var(--danger);
}

.skills-installed-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.skills-pager {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.skills-pager span {
  min-width: 42px;
  text-align: center;
}

.skills-pager-button {
  width: 26px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

.skills-pager-button:hover:not(:disabled) {
  background: var(--surface);
  color: var(--accent-strong);
}

.skills-bots-panel {
  min-width: 0;
  position: relative;
}

.skills-bots-panel h2 {
  margin: 0;
  font-size: 16px;
}

.skills-bot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 320px));
  justify-content: start;
  gap: 12px;
  min-width: 0;
  overflow: visible;
  padding: 0;
}

.skills-bot-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
  gap: 10px;
  padding: 14px;
  min-width: 0;
  overflow: visible;
}

.skills-config-row .skills-bot-card {
  min-width: 0;
}

.skills-policy-panel {
  display: grid;
  grid-template-rows: auto auto;
  gap: 9px;
  min-width: 0;
  min-height: 0;
  overflow: visible;
}

.skills-bot-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 2px;
  align-items: center;
  min-width: 0;
}

.skills-bot-head > .orb-avatar {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  justify-self: center;
}

.skills-bot-title-line {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.skills-bot-head strong {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skills-count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  flex: none;
}

.skills-priority-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 20px;
  gap: 8px;
}

.skills-priority-title {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.25;
}

.skills-priority-title::before {
  display: none;
}

.skills-multi-picker {
  position: relative;
  min-width: 0;
}

.skills-multi-picker-trigger {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 8px 13px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 36%, transparent);
  color: var(--fg);
  text-align: left;
  box-shadow: none;
}

.skills-multi-picker-trigger:hover:not(:disabled),
.skills-multi-picker.open .skills-multi-picker-trigger {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  color: var(--accent-strong);
  transform: none;
}

.skills-multi-picker-trigger-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.skills-multi-picker-trigger-copy b,
.skills-multi-picker-trigger-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skills-multi-picker-trigger-copy b { font-size: 12px; }
.skills-multi-picker-trigger-copy small { color: var(--muted); font-size: 10.5px; font-weight: 600; }

.skills-multi-picker-chevron {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.skills-multi-picker.open .skills-multi-picker-chevron {
  transform: translateY(2px) rotate(225deg);
}

.skills-multi-picker-popover {
  position: fixed;
  z-index: 2147483000;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 9px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--modal-shadow);
}

.skills-multi-picker-head {
  display: grid;
  gap: 7px;
  padding-bottom: 8px;
}

.skills-multi-picker-search {
  position: relative;
  display: block;
}

.skills-multi-picker-search > input[type="search"] {
  box-sizing: border-box;
  width: 100%;
  height: 36px;
  min-height: 36px;
  padding: 0 12px 0 42px !important;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  color: var(--fg);
  font-size: 12px;
  font-weight: 650;
  outline: none;
}

.skills-multi-picker-search > input[type="search"]:focus {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}

.skills-multi-picker-search-icon {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 13px;
  box-sizing: border-box;
  width: 11px;
  height: 11px;
  border: 1.5px solid var(--muted);
  border-radius: 50%;
  transform: translateY(-60%);
  pointer-events: none;
}

.skills-multi-picker-search-icon::after {
  content: '';
  position: absolute;
  right: -4px;
  bottom: -3px;
  width: 5px;
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
  transform-origin: left center;
}

.skills-multi-picker-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 3px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 650;
}

.skills-multi-picker-clear {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-strong);
  font-size: 10.5px;
  box-shadow: none;
}

.skills-multi-picker-clear:hover { color: var(--danger); transform: none; }

.skills-multi-picker-options {
  display: grid;
  align-content: start;
  gap: 3px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 3px;
  scrollbar-color: color-mix(in srgb, var(--accent) 36%, var(--border)) transparent;
  scrollbar-width: thin;
}

.skills-multi-picker-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 42px;
  padding: 7px 9px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--fg);
  text-align: left;
  box-shadow: none;
}

.skills-multi-picker-option:hover,
.skills-multi-picker-option.selected {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  color: var(--accent-strong);
  transform: none;
}

.skills-multi-picker-check {
  position: relative;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface);
}

.skills-multi-picker-option.selected .skills-multi-picker-check {
  border-color: var(--accent);
  background: var(--accent);
}

.skills-multi-picker-option.selected .skills-multi-picker-check::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 5px;
  width: 4px;
  height: 7px;
  border-right: 1.5px solid white;
  border-bottom: 1.5px solid white;
  transform: rotate(45deg);
}

.skills-multi-picker-option-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.skills-multi-picker-option-copy > span {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.skills-multi-picker-option-copy b,
.skills-multi-picker-option-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skills-multi-picker-option-copy b { font-size: 12px; }
.skills-multi-picker-option-copy small { color: var(--muted); font-size: 10.5px; font-weight: 600; }
.skills-multi-picker-option-copy em {
  flex: none;
  color: var(--danger);
  font-size: 9.5px;
  font-style: normal;
  font-weight: 700;
}

.skills-multi-picker-option.dangling .skills-multi-picker-option-copy b { color: var(--danger); }

.skills-multi-picker-empty {
  margin: 0;
  padding: 28px 10px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
}

.skills-multi-picker-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  padding-top: 9px;
  border-top: 1px solid var(--border-soft);
}

.skills-multi-picker-actions button {
  min-height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
}

.skills-policy-summary {
  display: grid;
  gap: 3px;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border-soft));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.skills-policy-summary strong {
  color: var(--fg);
  font-size: 11px;
}

.skills-policy-summary span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skills-attach-row,
.skills-policy-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  min-width: 0;
}

.skills-bot-card .skills-attach-row {
  position: relative;
  z-index: 4;
  margin-top: auto;
}

.skills-bot-card .skills-attach-row .sect-sort-menu[open] {
  z-index: 1000;
}

.skills-bot-card .skills-attach-row .sect-sort-pop {
  z-index: 1001;
}

.skills-policy-controls {
  grid-template-columns: 1fr;
  align-items: stretch;
}

.skills-control-block {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.skills-defaults-panel .skills-control-block + .skills-control-block {
  margin-top: 0;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}

.skills-control-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.skills-choice-group {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.skills-choice-group-compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.skills-choice-group-compact .skills-choice {
  gap: 7px;
  min-height: 84px;
  padding: 11px 12px;
  align-content: start;
}

.skills-choice-group-compact .skills-choice strong {
  font-size: 13px;
}

.skills-choice-group-compact .skills-choice small {
  white-space: pre-line;
  line-height: 1.42;
}

.skills-project-group .skills-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.skills-project-group .skills-choice strong,
.skills-project-group .skills-choice small {
  width: 100%;
  text-align: left;
}

.skills-defaults-panel .skills-choice-group:not(.skills-choice-group-compact) {
  grid-template-columns: 1fr;
}

.skills-choice {
  display: grid;
  gap: 3px;
  width: 100%;
  min-width: 0;
  min-height: 62px;
  padding: 9px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--fg);
  justify-items: start;
  align-content: center;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.skills-choice:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}

.skills-choice:active {
  transform: translateY(1px);
}

.skills-choice strong {
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.3;
}

.skills-choice small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.skills-choice.selected {
  border-color: color-mix(in srgb, var(--accent) 72%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}

.skills-delivery-group .skills-choice {
  grid-template-columns: minmax(96px, 0.32fr) minmax(0, 1fr);
  column-gap: 14px;
  min-height: 62px;
  padding: 11px 14px;
  align-content: start;
}

.skills-delivery-group .skills-choice strong,
.skills-delivery-group .skills-choice small {
  align-self: start;
}

.skills-discovery-dialog {
  width: min(920px, calc(100vw - 44px));
  max-height: min(760px, calc(100vh - 64px));
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--modal-shadow);
  color: var(--fg);
  overflow: hidden;
}

.skills-discovery-dialog::backdrop {
  background: color-mix(in srgb, var(--bg) 48%, transparent);
  backdrop-filter: blur(6px) saturate(1.05);
}

.skills-discovery-dialog article {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0;
  max-height: inherit;
  padding: 0;
}

.skills-discovery-dialog header {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 18px 60px 14px;
  border-bottom: 1px solid var(--border-soft);
  text-align: center;
}

.skills-discovery-dialog h3,
.skills-discovery-dialog p {
  margin: 0;
}

.skills-discovery-dialog h3 {
  color: var(--fg);
  font-size: 17px;
  font-weight: 760;
  line-height: 1.25;
}

.skills-discovery-dialog p {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.skills-discovery-close {
  position: absolute;
  top: 14px;
  right: 16px;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  box-shadow: none;
}

.skills-discovery-close::before,
.skills-discovery-close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1.7px;
  border-radius: var(--radius-full);
  background: currentColor;
  transform-origin: center;
}

.skills-discovery-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.skills-discovery-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.skills-discovery-close:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

.skills-discovery-body {
  display: grid;
  min-height: 0;
  max-height: 520px;
  overflow: hidden;
  padding: 14px;
}

.skills-discovery-layout {
  display: grid;
  grid-template-columns: minmax(178px, 0.42fr) minmax(0, 1fr);
  gap: 14px;
  min-height: 0;
}

.skills-discovery-tabs {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  max-height: 100%;
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 42%, transparent);
  scrollbar-width: thin;
}

.skills-discovery-tabs button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: var(--button-height);
  padding: 0 10px 0 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  text-align: left;
  text-transform: none;
  box-shadow: none;
}

.skills-discovery-tabs button.selected {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--accent);
  box-shadow: none;
}

.skills-discovery-tabs strong {
  overflow: hidden;
  font-size: 12px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skills-discovery-tabs small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  min-height: 22px;
  padding: 0 7px;
  border-radius: var(--radius-full);
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: none;
}

.skills-discovery-tabs button.selected small {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}

.skills-discovery-main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  min-height: 0;
}

.skills-discovery-path {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
}

.skills-discovery-path code {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skills-discovery-group {
  display: grid;
  min-height: 0;
}

.skills-discovery-group[hidden] {
  display: none;
}

.skills-discovery-group header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 0;
  border: 0;
}

.skills-discovery-group strong {
  text-transform: uppercase;
  color: var(--fg);
  font-size: 12px;
}

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

.skills-discovery-list {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  overflow: auto;
  padding-right: 3px;
  scrollbar-width: thin;
}

.skills-discovery-list::-webkit-scrollbar {
  width: 6px;
}

.skills-discovery-list::-webkit-scrollbar-track {
  background: transparent;
}

.skills-discovery-list::-webkit-scrollbar-thumb {
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--accent) 32%, var(--border));
}

.skills-discovery-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  min-height: 66px;
  padding: 11px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  cursor: pointer;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    transform 150ms ease;
}

.skills-discovery-row:hover {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  transform: translateY(-1px);
}

.skills-discovery-row input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.skills-discovery-row::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--border-soft);
  box-shadow: inset 0 0 0 1px var(--border);
}

.skills-discovery-row:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.skills-discovery-row:has(input:checked)::before {
  background: var(--accent);
  box-shadow: none;
}

.skills-discovery-row span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.skills-discovery-row strong {
  overflow: hidden;
  color: var(--fg);
  font-size: 13px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: none;
}

.skills-discovery-row small {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.skills-discovery-row em {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: var(--radius-full);
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

.skills-discovery-row.installed {
  background: color-mix(in srgb, var(--surface-muted) 56%, transparent);
  cursor: default;
}

.skills-discovery-dialog footer {
  justify-content: flex-end;
  gap: 10px;
  margin: 0;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--border-soft);
}

.skills-discovery-dialog footer button,
.skills-discovery-dialog footer button.primary {
  min-height: var(--button-height);
  border: 1px solid color-mix(in srgb, var(--accent) 58%, var(--border-soft));
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--accent);
  box-shadow: none;
}

.skills-discovery-dialog footer button:hover:not(:disabled),
.skills-discovery-dialog footer button.primary:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

@media (max-width: 720px) {
  .skills-discovery-layout {
    grid-template-columns: 1fr;
  }

  .skills-discovery-tabs {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .skills-discovery-tabs button {
    flex: 0 0 auto;
    width: auto;
    min-width: 144px;
  }
}

.skills-policy-controls [data-bot-status] {
  grid-column: 1 / -1;
}

@media (min-width: 1600px) {
  .skills-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1220px) {
  .skills-config-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .skills-config-row > .skills-config-block:nth-child(3),
  .skills-config-row .skills-bots-panel {
    grid-column: 1 / -1;
  }
}

@media (max-width: 980px) {
  .skills-page-grid {
    grid-template-columns: 1fr;
  }
  .skills-config-row {
    grid-template-columns: 1fr;
  }
  .skills-defaults-panel {
    grid-template-columns: 1fr;
  }
  .skills-page .skills-defaults-panel .skills-control-block + .skills-control-block {
    padding-left: 0;
    padding-top: 0;
    border-left: 0;
    border-top: 0;
  }
  .skills-page .skills-install-panel .skills-install-grid {
    grid-template-columns: 1fr;
  }
  .skills-page .skills-install-panel .skills-source-label,
  .skills-page .skills-install-panel .skills-install-path-field,
  .skills-page .skills-install-panel .skills-install-ref-field,
  .skills-page .skills-install-panel .skills-install-actions,
  .skills-page .skills-install-panel .skills-install-bottom-row,
  .skills-page .skills-install-panel .skills-local-discovery-panel {
    grid-column: 1;
    grid-row: auto;
  }
  .skills-page .skills-install-panel .skills-install-actions {
    justify-content: flex-start;
  }
  .skills-config-row .skills-bots-panel {
    grid-column: auto;
  }
  .skills-side-rail {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .skills-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .skills-page-grid,
  .skills-page-stack,
  .skills-config-row,
  .skills-side-rail,
  .skills-main-panel,
  .skills-defaults-panel,
  .skills-install-panel,
  .skills-installed-panel {
    width: 100%;
    max-width: 100%;
  }
  .skills-side-rail,
  .skills-config-row,
  .skills-install-grid,
  .skills-source-control,
  .skills-install-actions,
  .skills-install-bottom-row,
  .skills-local-discovery-panel,
  .skills-candidate-list-head,
  .skills-section-head-row,
  .skills-metric-strip,
  .skills-row,
  .skills-attach-row,
  .skills-policy-controls,
  .skills-choice-group,
  .skills-choice-group-compact {
    grid-template-columns: 1fr;
  }
  .skills-bot-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .skills-heading-actions {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: stretch;
  }
  .skills-heading-actions #skills-refresh {
    width: 100%;
  }
  .skills-metric-strip {
    flex-wrap: wrap;
  }
  .skills-metric-strip span {
    flex: 1 1 min(100%, 140px);
  }
  .skills-help-popover {
    left: 16px;
    right: 16px;
    top: 54px;
    width: auto;
  }
  .skills-install-title,
  .skills-help-tip {
    position: static;
  }
  .skills-list {
    grid-template-columns: 1fr;
  }
  .skills-bot-head {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .skills-multi-picker-popover {
    width: 100%;
  }
  .skills-install-actions,
  .skills-local-discovery-panel,
  .skills-candidate-list-head {
    display: grid;
    justify-items: stretch;
  }
}

@media (max-width: 460px) {
  .skills-install-actions {
    position: static;
    justify-content: flex-start;
    justify-items: start;
  }
}

/* toggle 开关行：checkbox 隐藏，switch 是视觉开关 */
.toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 9px 0;
  cursor: pointer;
  color: var(--fg);
}
.toggle-row input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-row .switch {
  width: 36px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--border);
  position: relative;
  flex: none;
  margin-top: 1px;
  transition: background 140ms ease;
}
.toggle-row .switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--muted);
  transition: left 140ms ease, background 140ms ease;
}
.toggle-row input:checked + .switch {
  background: var(--accent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 28%, transparent);
}
.toggle-row input:checked + .switch::after { left: 18px; background: #fff; }
.toggle-row input:disabled + .switch { opacity: 0.4; }
.toggle-tx { min-width: 0; }
.toggle-tx strong { display: block; font-size: 12.5px; font-weight: 600; }
.toggle-tx small {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 2px;
  color: var(--faint);
  font-size: 11px;
  line-height: 1.5;
  cursor: pointer;
}
.toggle-tx small:hover { color: var(--muted); }
.toggle-tx small.open { -webkit-line-clamp: unset; color: var(--muted); }
/* toggle 行之外的长帮助文字（签名/额度说明）同样默认一行，点开展开 */
.bd-tile small.bd-help {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--faint);
  font-size: 11px;
  line-height: 1.5;
  cursor: pointer;
}
.bd-tile small.bd-help:hover { color: var(--muted); }
.bd-tile small.bd-help.open { -webkit-line-clamp: unset; color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  .toggle-row .switch, .toggle-row .switch::after { transition: none; }
}

.bd-profile-roles {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}
.bd-profile-roles .bd-subsection-title {
  margin: 0 0 4px;
}
.bd-profile-role-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}
.bd-profile-role-entry {
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}
.bd-profile-role-entry > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--button-height);
  box-sizing: border-box;
  padding: 0 12px;
  list-style: none;
  color: var(--fg);
  cursor: pointer;
  font-weight: 700;
}
.bd-profile-role-entry > summary::-webkit-details-marker {
  display: none;
}
.bd-profile-role-entry > summary::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  color: var(--faint);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 140ms ease, color 140ms ease;
}
.bd-profile-role-entry[open] > summary::after {
  color: var(--accent);
  transform: rotate(225deg) translateY(-1px);
}
.bd-profile-role-entry > summary:hover {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  color: var(--accent-strong);
}
.bd-profile-role-id {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bd-profile-role-content {
  padding: 10px;
  border-top: 1px solid var(--border-soft);
  background: var(--surface-muted);
}
.bd-profile-role-content .empty,
.bd-profile-role-content .hint-warn-inline {
  margin: 0;
}
.bd-profile-role-content pre {
  margin: 0;
  padding: 10px;
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: var(--surface-raised);
  color: var(--fg);
  font: 12px/1.5 var(--mono);
}

.bd-tile textarea,
.bd-tile input[type=text],
.bd-tile input[type=number] {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--fg);
  font: 12px/1.5 var(--mono);
}

.bd-feedback-advanced {
  margin-top: 12px;
  border-top: 1px solid var(--border-soft);
  padding-top: 10px;
}
.bd-feedback-advanced > summary {
  width: fit-content;
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  user-select: none;
}
.bd-feedback-advanced > summary:hover { color: var(--fg); }
.bd-feedback-advanced-body { padding-top: 4px; }
.bd-tile textarea.bd-feedback-json {
  min-height: 112px;
  max-height: 320px;
  resize: vertical;
}
.bd-feedback-chat-override {
  margin-top: 16px;
  border-top: 1px solid var(--border-soft);
  padding-top: 14px;
}
.bd-feedback-chat-override > h4 { margin: 0 0 4px; }
.bd-feedback-chat-override > .hint { margin: 0; }
:root[data-theme="dark"] .bd-tile textarea,
:root[data-theme="dark"] .bd-tile input[type=text],
:root[data-theme="dark"] .bd-tile input[type=number] {
  background: rgba(13, 17, 26, 0.55);
  border-color: rgba(255, 255, 255, 0.1);
}

@media (max-width: 980px) {
  .bd-layout { grid-template-columns: 1fr; }
  .bd-roster { position: static; display: flex; overflow-x: auto; }
  .bd-roster-item { flex: 0 0 auto; }
  .bd-profile-head { grid-template-columns: auto minmax(0, 1fr); }
  .bd-profile-meta {
    grid-column: 1 / -1;
    justify-content: flex-start;
    margin-left: 0;
  }
}

/* ── 全站收尾：长尾页面对齐设计语言 ──────────────────────────────────────── */

/* 兜底表单控件基线（零特异性 :where，不会压过上面的胶囊规则）：
   接入点 / 团队 / 弹窗里的裸 input、select、textarea 统一圆角与底色 */
.page :where(input:not([type=checkbox], [type=radio]), select, textarea),
dialog :where(input:not([type=checkbox], [type=radio]), select, textarea) {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--fg);
  padding: 8px 12px;
  font: inherit;
}
:root[data-theme="dark"] .page :where(input:not([type=checkbox], [type=radio]), select, textarea),
:root[data-theme="dark"] dialog :where(input:not([type=checkbox], [type=radio]), select, textarea) {
  background: rgba(13, 17, 26, 0.55);
  border-color: rgba(255, 255, 255, 0.1);
}

/* 筛选条统一（群组 / 定时 / 工作流共用 .filters）：去面板底，控件按 token 圆角化 */
.filters {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.filters input[type=search],
.filters input[type=text],
.filters select {
  min-height: 36px;
  border-radius: var(--radius-md);
  padding: 0 var(--button-padding-x);
  background: var(--surface);
  border: 1px solid var(--border-soft);
}
.filters select {
  padding-right: 30px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2399a3b3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  color: var(--muted);
  font-weight: 600;
  font-size: 12.5px;
  cursor: pointer;
}
:root[data-theme="dark"] .filters input[type=search],
:root[data-theme="dark"] .filters input[type=text],
:root[data-theme="dark"] .filters select {
  background-color: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.09);
}
.filters .filter-toggle {
  min-height: 36px;
  padding: 0 var(--button-padding-x);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
:root[data-theme="dark"] .filters .filter-toggle {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.09);
}
.filters .filter-toggle:has(input:checked) {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--accent-soft);
}
.filters .filter-toggle input { position: absolute; opacity: 0; pointer-events: none; }
/* 文本没包 span 的旧式 toggle（群组/定时页）：状态点画在 label 上 */
.filters .filter-toggle:not(:has(> span))::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 7px;
  background: var(--faint);
}
.filters .filter-toggle:not(:has(> span)):has(input:checked)::before {
  background: var(--accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 60%, transparent);
}

/* 通用 .card（接入点等页面在用）→ 玻璃面板 */
.card {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 16px 18px;
}
:root[data-theme="dark"] .card {
  background: var(--surface);
  backdrop-filter: none;
  border-color: var(--border-soft);
}

/* 角色管理：树面板对齐名册风格 */
:root[data-theme="dark"] .roles-tree-panel,
:root[data-theme="dark"] .roles-editor-panel {
  background: var(--surface);
  backdrop-filter: none;
  border-color: var(--border-soft);
}
.roles-tree-panel,
.roles-editor-panel { border-radius: var(--radius-xl); }
.roles-group-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: var(--muted);
}
.roles-group-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.roles-bot-row.selected {
  background: var(--accent-soft);
  border-left: 0;
  padding-left: 20px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}
.roles-group-row.selected { background: var(--accent-soft); }
.roles-badge { border-radius: var(--radius-sm); }

/* ── 看板列顺序自定义：列头可拖拽 + hover 出现 ‹/› 按钮 ──────────────────── */
.session-board-column > header[draggable] { cursor: grab; }
.session-board-column > header[draggable]:active { cursor: grabbing; }
.session-board-head-right {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
.session-board-move { display: inline-flex; gap: 3px; opacity: 0; transition: opacity 120ms ease; }
.session-board-column > header:hover .session-board-move,
.session-board-move:focus-within { opacity: 1; }
@media (hover: none) {
  .session-board-move { opacity: 1; }
}
.session-board-move button {
  min-height: 22px;
  min-width: 22px;
  padding: 0;
  border-radius: var(--radius-full);
  font-size: 13px;
  line-height: 1;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border-soft);
}
.session-board-move button:hover:not(:disabled) {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.session-board-move button:disabled { opacity: 0.3; }
.session-board-column.dragging { opacity: 0.55; }
.session-board-column.drag-over {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .session-board-move { transition: none; }
}

@media (max-width: 980px) {
  .chrome-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: auto;
    padding: 0;
    overflow: hidden;
  }
  .topbar {
    display: grid;
    grid-template-columns: minmax(0, max-content) minmax(0, 1fr) max-content;
    align-items: center;
    position: sticky;
    top: 0;
    min-height: var(--topbar-height);
    column-gap: 12px;
    padding: 0 16px;
  }
  .topbar::after {
    left: 16px;
    right: 16px;
  }
  .topbar-left {
    grid-column: 1;
    width: auto;
  }
  .topbar-actions {
    grid-column: 3;
    width: auto;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 10px;
  }
  .topbar-tool-group {
    flex-wrap: nowrap;
    gap: 10px;
  }
  .sidebar {
    flex: none;
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    padding: 10px 16px;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(14px);
  }
  .sidebar-nav {
    display: flex;
    gap: 8px;
    min-width: 0;
    margin-top: 0;
    padding: 0 0 2px;
    overflow-x: auto;
    overflow-y: hidden;
  }
  /* 窄屏恢复横向 rail：组容器退化为 contents（锚点直接参与 flex 排列），
     组标题隐藏，保持与改造前一致的横向滚动导航条。 */
  .sidebar-nav .nav-group {
    display: contents;
  }
  .sidebar-nav .nav-group-title {
    display: none;
  }
  .sidebar-nav a {
    flex: 0 0 auto;
  }
  .workspace {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    margin-left: 0;
  }
  .overview-layout { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  :root {
    --topbar-control-size: 34px;
  }
  .topbar {
    column-gap: 8px;
    padding: 0 12px;
  }
  .dashboard-version-control { margin-left: 33px; }
  .dashboard-version-popover {
    width: min(340px, calc(100vw - 24px));
  }
  .topbar-left {
    gap: 10px;
  }
  .overview-list-item-schedule {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }
  .overview-list-item-schedule .overview-list-main,
  .overview-list-item-schedule .overview-list-meta {
    width: 100%;
    max-width: 100%;
  }
  .overview-list-item-schedule .overview-list-main {
    flex: 0 1 auto;
  }
  .topbar .brand {
    gap: 7px;
  }
  .topbar .brand-product {
    display: none;
  }
  .topbar .brand-wordmark {
    font-size: 15px;
  }
  .topbar .brand-mark,
  .topbar .brand-logo-img {
    width: 26px;
    height: 26px;
  }
  .topbar-actions {
    gap: 6px;
  }
  .topbar-tool-group {
    width: auto;
    gap: 6px;
  }
  .connection-status {
    padding: 0 24px 0 10px;
    font-size: 10.5px;
  }
  .topbar-status-menu .connection-status {
    padding-right: 24px;
  }
  .topbar-status-menu .connection-status::after {
    right: 10px;
  }
}

/* ── Dashboard UI baseline rollout ───────────────────────────────────────── */
.page {
  gap: 16px;
}

.page.hero-page {
  /* SectionHeader 标题在 36px 行内居中；10px 让标题文字顶部距 page divider 为 16px，和其它页面 toolbar 对齐。 */
  gap: 10px;
}

.page-heading {
  position: relative;
  align-items: center;
  min-height: var(--page-title-row-height);
  padding-bottom: var(--page-title-divider-gap);
}

.page-heading::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--border) 82%, transparent) 14%,
    color-mix(in srgb, var(--border) 82%, transparent) 86%,
    transparent
  );
}

.page-heading h1 {
  font-size: 24px;
  line-height: 1.12;
  font-weight: 760;
}

.page-heading > :first-child {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 4px 12px;
  min-width: 0;
}

.page-heading > :first-child > h1 {
  flex: none;
}

.page-heading p:not(.eyebrow) {
  max-width: 760px;
  margin: 0 0 2px;
  font-size: 13px;
  line-height: 1.55;
}

.page-heading .tf-lede {
  min-height: 0;
}

.page-heading-actions,
.insight-head-acts {
  align-items: center;
  gap: 10px;
}

.page-heading-actions > button,
.page-heading-actions > .btn-link,
.insight-head-acts > button,
.page-primary-action {
  min-height: 36px;
  border-radius: var(--radius-lg);
}

.page-primary-action {
  padding-inline: var(--button-padding-x);
}

.page > .filters,
.insights-page .insights-filters,
.sessions-page .sessions-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: none;
}

:root[data-theme="dark"] .page > .filters,
:root[data-theme="dark"] .insights-page .insights-filters,
:root[data-theme="dark"] .sessions-page .sessions-filters {
  background: var(--surface);
  border-color: var(--border-soft);
}

.page > .filters input[type=search],
.page > .filters input[type=text],
.page > .filters select,
.insights-page .insights-filters input[type=search],
.insights-page .insights-filters select,
.sessions-page .sessions-filters input[type=search],
.sessions-page .sessions-filters select {
  min-height: 34px;
  border-radius: var(--radius-lg);
  background-color: var(--surface-raised);
}

.page > .filters select:not([multiple]),
.insights-page .insights-filters select:not([multiple]) {
  width: var(--dropdown-trigger-width);
  min-width: var(--dropdown-trigger-width);
}

.sessions-page .sessions-filters input[type=search] {
  min-height: var(--button-height);
  border-radius: var(--radius-full);
  background-color: var(--surface);
}

.sessions-page .sessions-filters {
  min-height: var(--button-height);
  padding: 0;
  border: 0;
  background: transparent;
  gap: 8px;
}

.session-runtime-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -2px 0 12px;
}

.session-runtime-stats span {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 12px;
}

.session-runtime-stats b {
  color: var(--fg);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.sessions-page .sessions-filters:has(.idle-cleanup-bar.is-open) {
  position: relative;
  z-index: 1400;
}

:root[data-theme="dark"] .sessions-page .sessions-filters,
.sessions-page .sessions-filters {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.sessions-page .sessions-filters :where(
  input[type=search],
  .sect-sort-menu > summary,
  .filter-cli summary,
  .filter-toggle,
  .idle-cleanup-run
) {
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  border-radius: var(--radius-full);
  font-size: 12px;
}

.sessions-page .sessions-filters :where(
  input[type=search],
  .sect-sort-menu > summary,
  .filter-cli summary,
  .filter-toggle
) {
  border: 1px solid var(--border-soft);
  background: var(--surface);
}

.sessions-page .sessions-filters input[type=search] {
  appearance: none;
  -webkit-appearance: none;
  line-height: normal;
}

.sessions-page form.sessions-filters > input[type="search"][name="q"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]) {
  flex: 0 1 280px;
  min-width: 200px;
  max-width: 280px;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  box-shadow: none;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    color 150ms ease,
    box-shadow 150ms ease;
  appearance: none;
  -webkit-appearance: none;
}

@media (max-width: 720px) {
  .sessions-page form.sessions-filters > input[type="search"][name="q"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]) {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    max-width: none;
  }
}

.sessions-page form.sessions-filters > input[type="search"][name="q"]::-webkit-search-decoration,
.sessions-page form.sessions-filters > input[type="search"][name="q"]::-webkit-search-cancel-button,
.sessions-page form.sessions-filters > input[type="search"][name="q"]::-webkit-search-results-button,
.sessions-page form.sessions-filters > input[type="search"][name="q"]::-webkit-search-results-decoration {
  appearance: none;
  -webkit-appearance: none;
}

.sessions-page form.sessions-filters > input[type="search"][name="q"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

.sessions-page form.sessions-filters > input[type="search"][name="q"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):focus {
  border-color: var(--accent);
  background: var(--surface);
  color: var(--fg);
  box-shadow: none;
}

.sessions-page form.sessions-filters :where(
  .sect-sort-menu > summary,
  .filter-cli summary
) {
  padding-left: var(--button-padding-x);
  padding-right: calc(var(--button-padding-x) + 14px);
}

.sessions-page form.sessions-filters :where(
  .filter-toggle,
  .idle-cleanup-run
) {
  padding-left: var(--button-padding-x);
  padding-right: var(--button-padding-x);
}

.sessions-page form.sessions-filters :where(.idle-cleanup-run) {
  min-width: 0;
  width: auto;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  justify-content: center;
  white-space: nowrap;
}

.sessions-page .sessions-filters .idle-cleanup-run {
  border: 1px solid var(--danger);
  background: transparent;
  color: var(--danger);
}

.sessions-page .sessions-filters .idle-cleanup-run:hover:not(:disabled) {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: var(--danger);
}

.sessions-page .sessions-filters .filter-toggle {
  gap: 10px;
  padding: 0 var(--button-padding-x);
  color: var(--muted);
}

.sessions-page .sessions-filters .filter-toggle span::before {
  content: none;
  display: none;
}

.sessions-page .sessions-filters .filter-toggle-label {
  line-height: 1;
}

.sessions-page .sessions-filters .filter-toggle-switch {
  position: relative;
  flex: none;
  width: 31px;
  height: 18px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--muted) 12%, var(--surface));
  transition:
    background-color 150ms ease,
    border-color 150ms ease;
}

.sessions-page .sessions-filters .filter-toggle-switch::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  background: var(--faint);
  transform: translateY(-50%);
  transition:
    background-color 150ms ease,
    transform 150ms ease;
}

.sessions-page .sessions-filters .filter-toggle:hover {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border-soft));
  color: var(--accent-strong);
}

.sessions-page .sessions-filters .filter-toggle:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--accent-strong);
}

.sessions-page .sessions-filters .filter-toggle:has(input:checked) .filter-toggle-switch {
  border-color: color-mix(in srgb, var(--accent) 46%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
}

.sessions-page .sessions-filters .filter-toggle:has(input:checked) .filter-toggle-switch::after {
  background: var(--accent);
  transform: translate(13px, -50%);
}

.groups-page .filters label,
.schedules-page .filters label,
.team-page .card label,
.insights-page .ins-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.groups-page .filters label:has(input:checked),
.schedules-page .filters label:has(input:checked),
.team-page .card label:has(input:checked),
.insights-page .ins-toggle:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  color: var(--accent-strong);
}

.page :where(.card, .bd-card, .panel, .metric-card, .roles-tree-panel, .roles-editor-panel, .v3r-graph-card, .v3r-panel) {
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: none;
}

:root[data-theme="dark"] .page :where(.card, .bd-card, .panel, .metric-card, .roles-tree-panel, .roles-editor-panel, .v3r-graph-card, .v3r-panel),
:root[data-theme="dark"] .bd-roster,
:root[data-theme="dark"] .bd-profile-head,
:root[data-theme="dark"] .bd-tile {
  background: var(--surface);
  border-color: var(--border-soft);
  backdrop-filter: none;
  background-image: none;
}

.page :where(.card, .bd-card, .settings-card, .skills-installed-panel, .skills-defaults-panel, .skills-install-panel) > h2:first-child,
.page :where(.bd-section-title, .skills-section-head h2, .roles-profile-section-title) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--section-title-text-height);
  font-size: var(--section-title-font-size);
  font-weight: 700;
  line-height: var(--section-title-text-height);
  letter-spacing: 0;
  text-transform: none;
}

.page :where(.card, .bd-card, .settings-card, .skills-installed-panel, .skills-defaults-panel, .skills-install-panel) > h2:first-child::before,
.page :where(.bd-section-title, .skills-section-head h2, .roles-profile-section-title)::before {
  content: "";
  width: var(--section-title-dot-size);
  height: var(--section-title-dot-size);
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: none;
}

.bd-tile .bd-section-title::before {
  box-shadow: none;
}

.bot-defaults-page .bd-tile .bd-section-title::before,
.bot-defaults-page .bd-section > .bd-section-title::before,
.bot-defaults-page .bd-subsection > .bd-subsection-title::before {
  content: "";
  width: var(--section-title-dot-size);
  height: var(--section-title-dot-size);
  flex: 0 0 var(--section-title-dot-size);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 88%, #fff) 0 22%, transparent 23%),
    linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 38%, var(--border)));
  box-shadow: none;
}

.page :where(.bd-section, .bd-tile, .settings-card, .skills-defaults-panel, .skills-installed-panel) > .bd-section-title {
  margin: 0 0 var(--section-title-content-gap);
}

.skills-install-title .bd-section-title {
  margin: 0;
}

.page :where(.bd-section-title, .bd-subsection-title):has(+ .bd-section-note) {
  display: inline-flex;
  margin-bottom: var(--section-title-content-gap);
  vertical-align: bottom;
}

.page :where(.bd-section-title, .bd-subsection-title) + .bd-section-note {
  display: inline-block;
  max-width: min(760px, 62vw);
  margin: 0 0 var(--section-title-content-gap) 10px;
  vertical-align: bottom;
}

.page :where(.skills-row, .skills-discovery-row, .skills-candidate-row, .roles-group-row, .roles-bot-row, .roles-profile-row, .overview-list-item, .connector-item-card) {
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    transform 150ms ease;
}

.page :where(.skills-row, .skills-discovery-row, .roles-group-row, .roles-bot-row, .roles-profile-row, .connector-item-card):hover {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

table,
.matrix-scroll {
  border-radius: var(--radius-lg);
  box-shadow: none;
}

tbody tr[data-id]:hover,
tbody tr[data-chat]:hover {
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.schedules-page .actions-cell {
  white-space: normal;
}

.schedule-actions button {
  margin: 2px;
}

.schedules-list-section {
  min-width: 0;
}

.schedules-list-wrap {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}

.schedules-list {
  grid-auto-rows: max-content;
  align-content: start;
}

.schedule-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 16px;
  align-items: flex-start;
  align-self: start;
  height: auto;
  min-height: 84px;
  padding: 11px 12px;
}

.schedule-list-row .overview-list-main {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.schedule-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  min-width: 0;
}

.schedule-row-head b {
  flex: 0 1 auto;
  min-width: 0;
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-row-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
  color: var(--faint);
  font-size: 11px;
}

.schedule-row-meta code {
  max-width: min(720px, 100%);
  overflow: hidden;
  text-overflow: ellipsis;
  background: transparent;
  color: var(--faint);
  padding: 0;
}

.schedule-chip-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.schedule-chip-strip span,
.schedule-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-sizing: border-box;
  height: 24px;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
  white-space: nowrap;
}

.schedule-chip-strip span.schedule-chat-chip {
  display: inline-block;
  max-width: min(320px, 100%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 22px;
  text-align: left;
}

.schedule-chip-strip span.schedule-error-chip {
  border-color: color-mix(in srgb, var(--danger) 35%, var(--border-soft));
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
  color: var(--danger);
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: help;
  justify-content: flex-start;
  text-align: left;
}

.schedule-row-head .schedule-state {
  align-self: center;
  min-width: 42px;
  padding: 0 10px;
}

.schedule-state.enabled {
  border-color: color-mix(in srgb, var(--success) 28%, var(--border-soft));
  background: color-mix(in srgb, var(--success) 8%, var(--surface));
  color: var(--success);
}

.schedule-state.paused {
  background: color-mix(in srgb, var(--muted) 10%, var(--surface));
  color: var(--muted);
}

.schedule-list-row .overview-list-tail {
  align-self: center;
  justify-self: end;
  justify-content: flex-end;
  max-width: none;
}

.schedule-list-row .schedule-actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
  justify-content: flex-end;
}

.schedule-list-row .schedule-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  margin: 0;
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border-soft));
  background: transparent;
  color: var(--accent);
}

.schedule-list-row .schedule-actions .schedule-action-button {
  gap: 7px;
  min-width: 82px;
  transform: none;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    color 150ms ease,
    transform 150ms ease;
}

.schedule-list-row .schedule-actions .schedule-action-button::before {
  content: "";
  display: none;
  flex: none;
  width: 10px;
  height: 10px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
}

.schedule-list-row .schedule-actions .schedule-action-button.is-pending::before {
  display: block;
  animation: page-loading-rotate 0.8s linear infinite;
}

.schedule-list-row .schedule-actions .schedule-action-button.is-success {
  border-color: color-mix(in srgb, var(--success) 54%, var(--border-soft));
  background: color-mix(in srgb, var(--success) 9%, var(--surface));
  color: var(--success);
}

.schedule-list-row .schedule-actions .schedule-action-button.is-error {
  border-color: color-mix(in srgb, var(--danger) 54%, var(--border-soft));
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
  color: var(--danger);
}

.schedule-list-row .schedule-actions .schedule-enabled-switch {
  gap: 9px;
  width: 104px;
  min-width: 104px;
  max-width: 104px;
  padding: 0 var(--button-padding-x);
  border-color: var(--border-soft);
  background: var(--surface);
  color: var(--muted);
  transform: none;
}

.schedule-enabled-switch-label {
  min-width: 32px;
  text-align: left;
}

.schedule-enabled-switch-track {
  position: relative;
  flex: none;
  width: 31px;
  height: 18px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--muted) 12%, var(--surface));
  transition:
    border-color 150ms ease,
    background-color 150ms ease;
}

.schedule-enabled-switch-track > span {
  position: absolute;
  top: 50%;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--faint);
  transform: translateY(-50%);
  transition:
    background-color 150ms ease,
    transform 150ms ease;
}

.schedule-list-row .schedule-actions .schedule-enabled-switch.is-on {
  border-color: color-mix(in srgb, var(--accent) 44%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--accent);
}

.schedule-enabled-switch.is-on .schedule-enabled-switch-track {
  border-color: color-mix(in srgb, var(--accent) 44%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
}

.schedule-enabled-switch.is-on .schedule-enabled-switch-track > span {
  background: var(--accent);
  transform: translate(12px, -50%);
}

.schedule-list-row .schedule-actions .schedule-enabled-switch.is-error {
  border-color: color-mix(in srgb, var(--danger) 54%, var(--border-soft));
  color: var(--danger);
}

.schedule-list-row .schedule-actions .schedule-enabled-switch:disabled {
  opacity: 1;
}

.schedule-list-row .schedule-actions button:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
  transform: none;
}

@media (max-width: 1240px) {
  .schedule-list-row {
    grid-template-columns: 1fr;
    row-gap: 10px;
  }

  .schedule-list-row .overview-list-tail {
    justify-self: end;
    width: 100%;
    max-width: 100%;
  }

  .schedule-list-row .schedule-actions {
    width: 100%;
    flex-wrap: wrap;
  }
}

.schedules-list-empty {
  margin: 10px;
  padding: 18px 14px;
  border: 1px dashed var(--border-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 28%, transparent);
}

.schedules-toolbar-spacer {
  flex: 1 1 auto;
  min-width: 8px;
}

.schedules-toolbar-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.groups-matrix-section {
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.groups-list-wrap {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100%;
  min-height: 0;
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  box-shadow: none;
  overflow: hidden;
}

.groups-list {
  grid-auto-rows: max-content;
  align-content: start;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.groups-list-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 12px;
  row-gap: 12px;
  align-self: start;
  min-height: 94px;
  padding: 12px;
  content-visibility: auto;
  contain-intrinsic-size: auto 160px;
}

.groups-list-row > .orb-avatar {
  grid-column: 1;
  align-self: start;
  margin-top: 0;
}

.groups-list-row .overview-list-main {
  grid-column: 2;
  display: grid;
  align-self: start;
  gap: 6px;
  min-width: 0;
}

.groups-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 24px;
  overflow: hidden;
}

.groups-row-head b {
  flex: 0 1 auto;
  min-width: 0;
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.groups-row-count {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  align-self: start;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 24px;
  min-height: 24px;
  padding: 0 8px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
  white-space: nowrap;
}

.groups-list-row .groups-row-meta {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
  max-width: none;
  overflow: hidden;
  color: var(--faint);
  font-size: 11px;
}

.groups-list-row .groups-row-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-sizing: border-box;
  height: 24px;
  min-height: 24px;
  min-width: 0;
  padding: 0 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--faint);
  font-size: 11px;
  font-weight: 700;
  line-height: 22px;
  overflow: hidden;
  white-space: nowrap;
}

.groups-list-row .groups-row-tag:first-child {
  flex: 0 1 auto;
  max-width: none;
}

.groups-list-row .groups-row-owner-tag {
  flex: 0 1 auto;
  max-width: none;
}

.groups-list-row .groups-row-tag > span,
.groups-list-row .groups-row-tag > code {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.groups-list-row .groups-row-tag > code {
  background: transparent;
  color: inherit;
  font-family: var(--mono);
  padding: 0;
}

.groups-bot-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}

.groups-bot-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: 172px;
  box-sizing: border-box;
  height: 24px;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}

.groups-bot-pill i {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.78;
}

.groups-bot-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.groups-bot-state {
  flex: none;
  color: var(--faint);
  font-size: 10px;
  line-height: 1;
}

.groups-bot-in {
  border-color: color-mix(in srgb, var(--success) 26%, var(--border-soft));
  background: color-mix(in srgb, var(--success) 8%, var(--surface));
  color: var(--success);
}

.groups-bot-out {
  background: color-mix(in srgb, var(--muted) 10%, var(--surface));
  color: var(--muted);
}

.groups-bot-error {
  border-color: color-mix(in srgb, var(--danger) 34%, var(--border-soft));
  background: color-mix(in srgb, var(--danger) 9%, var(--surface));
  color: var(--danger);
}

.groups-bot-unknown {
  border-style: dashed;
  color: var(--faint);
}

.groups-row-lower {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
  min-width: 0;
}

.groups-list-row .overview-list-tail {
  align-self: end;
  justify-self: end;
  justify-content: flex-end;
  flex: none;
  flex-wrap: nowrap;
  width: max-content;
  max-width: 332px;
}

.groups-list-empty {
  margin: 10px;
  padding: 18px 14px;
  border: 1px dashed var(--border-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 28%, transparent);
}

.groups-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 8px 12px;
  border-top: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--surface-muted) 42%, var(--surface));
}

.groups-pagination-status {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.groups-pagination-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.groups-pagination-actions button {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
}

.groups-pagination-actions button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  color: var(--accent-strong);
}

.groups-pagination-actions button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .groups-pagination {
    align-items: flex-start;
    flex-direction: column;
  }
  .groups-pagination-actions {
    align-self: stretch;
  }
  .groups-pagination-actions button {
    flex: 1 1 0;
  }
}

.groups-page .groups-list-row .overview-list-tail button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: var(--radius-full);
  font-size: 11.5px;
  font-weight: 700;
}

@media (max-width: 900px) {
  .groups-row-lower {
    align-items: flex-start;
    grid-template-columns: 1fr;
  }
  .groups-list-row .overview-list-tail {
    justify-self: end;
    width: max-content;
    max-width: 100%;
    flex-wrap: nowrap;
  }
}

.groups-page .groups-list-row .add-bots {
  border-color: color-mix(in srgb, var(--accent) 46%, var(--border-soft));
  background: transparent;
  color: var(--accent);
}

.groups-page .groups-list-row .add-bots:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

.groups-page :where(.groups-list-row .save-profile, .groups-list-row .manage-chat) {
  border-color: var(--border-soft);
  background: var(--surface);
  color: var(--muted);
}

.groups-page :where(.groups-list-row .save-profile, .groups-list-row .manage-chat):hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  color: var(--accent-strong);
}

.groups-page .g-chat-cell {
  gap: 10px;
}

.groups-page .g-chat-meta strong {
  color: var(--fg);
  font-size: 12.5px;
}

.groups-page .g-chat-meta small {
  color: var(--faint);
}

.connector-list-card {
  margin-bottom: 0;
}

.connectors-page .cn-form {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 11px 16px;
  align-items: center;
  max-width: 780px;
}

.connectors-page .cn-form > label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.connector-inline-link {
  display: inline-block;
  margin-top: 5px;
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
}

.connector-inline-link:hover {
  text-decoration: underline;
}

.connector-form-hint {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
  padding: 9px 11px;
  font-size: 12px;
  line-height: 1.65;
}

.connector-created-card,
.connector-item-card {
  margin: 10px 0 0;
  padding: 12px 14px;
  background: var(--surface-muted);
}

.team-page .card {
  margin-bottom: 0 !important;
}

.team-page .card + .card {
  margin-top: 0;
}

.team-page .card p:has(input, select, button),
.team-page .card > div[style*="display: flex"] {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.team-page .card h2 {
  margin: 0 0 var(--section-title-content-gap) !important;
}

.team-list-card {
  margin: 0 0 10px;
  padding: 12px 14px;
  background: var(--surface-muted);
}

.team-manage-card {
  padding: 10px 14px;
}

.wb-split {
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-width: 1680px;
}

main:has(.whiteboards-page) {
  padding-bottom: 0;
  overflow: hidden;
}

.whiteboards-page {
  height: 100%;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.whiteboards-page .hint-warn {
  margin: 0;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--warning) 26%, var(--border-soft));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--warning) 7%, var(--surface));
  box-shadow: none;
  font-size: 12px;
  line-height: 1.55;
}

.wb-disabled-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 28px;
  padding: 0 12px;
  max-width: min(980px, 100%);
  border: 1px solid color-mix(in srgb, var(--warning) 34%, var(--border-soft));
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--warning) 8%, var(--surface));
  color: var(--warning);
  cursor: default;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
}

.whiteboards-page .page-heading > :first-child {
  align-items: center;
}

.whiteboards-page .overview-panel-head {
  align-items: center;
}

.whiteboards-page .overview-panel-head .sect-head-count {
  align-self: center;
  margin-bottom: 0;
}

.whiteboards-page .overview-block {
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  min-width: 0;
}

.wb-list-block,
.wb-detail-block {
  min-height: 0;
}

.wb-list-panel,
.wb-detail-panel {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  box-shadow: none;
  height: 100%;
  box-sizing: border-box;
}

.wb-list-panel {
  overflow-x: hidden;
  overflow-y: auto;
}

.wb-detail-panel {
  gap: 14px;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  align-content: stretch;
}

.wb-group {
  display: grid;
  gap: 10px;
  margin: 0;
  min-width: 0;
  max-width: 100%;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border-soft));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 42%, var(--surface));
  box-shadow: none;
}

.wb-group:last-child {
  margin-bottom: 0;
}

.wb-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  min-height: 28px;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  color: var(--fg);
  font-size: 12px;
  font-weight: 760;
  list-style: none;
}

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

.wb-group > summary::before {
  content: "";
  flex: none;
  width: 3px;
  height: 16px;
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 38%, var(--border)));
}

.wb-group-title {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wb-group > summary small {
  flex: none;
}

.wb-group-items {
  display: grid;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  margin-left: 3px;
  padding-left: 10px;
  border-left: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border-soft));
}

.wb-group > summary small,
.wb-scope {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-full);
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.wb-scope {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 48%;
  overflow: hidden;
  line-height: 22px;
  text-overflow: ellipsis;
}

.wb-item {
  display: grid;
  gap: 8px;
  margin: 0;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-sizing: border-box;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    transform 150ms ease;
}

.wb-item:hover {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  transform: translateY(-1px);
}

.wb-item.active {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.wb-item-head,
.wb-item-foot,
.wb-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}

.wb-item-head {
  justify-content: flex-start;
}

.wb-item-foot {
  justify-content: space-between;
}

.wb-item-main {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}

.wb-item-main strong,
.wb-item-main > .wb-id-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wb-item-main strong {
  color: var(--fg);
  font-size: 12.5px;
  font-weight: 650;
}

.wb-item-main > .wb-id-text,
.wb-item-meta {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
}

.wb-item-meta {
  align-items: center;
  font-family: inherit;
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
}

.wb-item-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wb-detail-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  min-height: var(--button-height);
  margin: 0;
  min-width: 0;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border-soft));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 36%, var(--surface));
}

.wb-detail-title {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.wb-detail-head .eyebrow {
  display: none;
}

.wb-detail-head h2 {
  margin: 0;
  color: var(--fg);
  font-size: 17px;
  font-weight: 760;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wb-detail-head code {
  display: block;
  min-width: 0;
  max-width: 100%;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wb-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.wb-meta-card {
  display: grid;
  align-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 62px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 28%, transparent);
}

.wb-meta-card span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

.wb-meta-card strong {
  display: block;
  min-width: 0;
  color: var(--fg);
  font-size: 12.5px;
  font-weight: 680;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wb-admin-info {
  margin: 0;
  color: var(--muted);
}

.wb-admin-info summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  list-style: none;
}

.wb-admin-info summary::-webkit-details-marker {
  display: none;
}

.wb-admin-info summary:hover {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  color: var(--accent-strong);
}

.wb-admin-info code {
  display: block;
  margin-top: 8px;
  white-space: pre-wrap;
  word-break: break-all;
}

.wb-board-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 220px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: none;
}

.wb-board-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--button-height);
  padding: 0 14px;
  border-bottom: 1px solid var(--border-soft);
}

.wb-board-panel-head span {
  color: var(--muted);
  font-size: 12px;
}

.wb-board-panel pre {
  min-height: 0;
  max-height: none;
  overflow: auto;
  margin: 0;
  padding: 16px;
  background: transparent;
  color: var(--fg);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.65;
  white-space: pre-wrap;
}

.wb-detail-head button.danger,
.wb-delete-actions button {
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
  box-shadow: none;
}

.wb-detail-head button.danger {
  border-color: color-mix(in srgb, var(--danger) 52%, var(--border-soft));
  background: transparent;
  color: var(--danger);
}

.wb-detail-head button.danger:hover:not(:disabled) {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
}

.wb-delete-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--modal-backdrop);
  backdrop-filter: blur(3px);
}

.wb-delete-dialog {
  display: grid;
  gap: 12px;
  width: min(520px, 92vw);
  padding: 18px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--fg);
  box-shadow: var(--modal-shadow);
}

.wb-delete-body {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.wb-delete-body > div:last-child {
  min-width: 0;
  flex: 1;
}

.wb-delete-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  color: var(--danger);
  font-weight: 800;
}

.wb-delete-dialog h3 {
  margin: 0 0 5px;
  font-size: 17px;
}

.wb-delete-dialog p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.wb-delete-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
}

.roles-page .roles-layout {
  gap: 14px;
}

.roles-tree-header,
.roles-editor-form {
  background: var(--surface);
}

.roles-tree-header.dashboard-toolbar {
  width: 100%;
  min-height: auto;
  padding: 10px;
  border-bottom: 1px solid var(--border-soft);
}

.roles-tree-header.dashboard-toolbar > input[type="search"],
.roles-tree-header.dashboard-toolbar > input[type="text"] {
  flex: 1 1 180px;
  min-width: 0;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  box-shadow: none;
}

.roles-tree-header.dashboard-toolbar > input[type="search"]:hover,
.roles-tree-header.dashboard-toolbar > input[type="text"]:hover,
.roles-tree-header.dashboard-toolbar > input[type="search"]:focus,
.roles-tree-header.dashboard-toolbar > input[type="text"]:focus {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
  outline: none;
  box-shadow: none;
}

.roles-tree {
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 8px;
  padding: 8px;
}

.roles-group-row,
.roles-bot-row,
.roles-profile-row {
  margin: 6px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 30%, transparent);
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    transform 150ms ease;
}

.roles-group-section,
.roles-profile-row {
  border-bottom: 0;
}

.roles-bot-row {
  border-top: 0;
}

.roles-group-row:hover,
.roles-bot-row:hover,
.roles-profile-row:hover {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  transform: translateY(-1px);
}

.roles-group-row.selected,
.roles-bot-row.selected,
.roles-profile-row.selected {
  border-left: 0;
  padding-left: 12px;
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  box-shadow: none;
}

.roles-bot-row.selected {
  padding-left: 20px;
}

.roles-badge,
.roles-profile-match {
  border-radius: var(--radius-full);
}

.roles-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid transparent;
  font-size: 10.5px;
  font-weight: 700;
}

.roles-badge.has-role {
  border-color: color-mix(in srgb, var(--success) 28%, transparent);
}

.roles-badge.no-role {
  border-color: var(--border-soft);
  background: color-mix(in srgb, var(--muted) 10%, var(--surface));
}

.roles-editor-inject {
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 28%, transparent);
}

.roles-field-label {
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
}

.roles-inline-menu {
  width: 132px;
}

.roles-profile-apply-controls .roles-apply-group-menu {
  width: 100%;
}

.roles-profile-apply-controls .roles-apply-group-menu .sect-sort-value {
  max-width: calc(100% - 44px);
}

.roles-profile-apply-controls .roles-apply-group-menu .sect-sort-pop {
  left: 0;
  min-width: 100%;
  transform: none;
}

.roles-profile-apply-bot {
  position: relative;
  width: fit-content;
  max-width: 100%;
  min-height: var(--button-height);
  margin: 0 6px 6px 0;
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  font-size: 12px;
  font-weight: 700;
}

.roles-profile-apply-bot::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: var(--radius-full);
  background: var(--border-soft);
  box-shadow: inset 0 0 0 1px var(--border);
}

.roles-profile-apply-bot input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.roles-profile-apply-bot:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  color: var(--accent-strong);
}

.roles-profile-apply-bot:has(input:checked)::before {
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.roles-editor-actions button,
.schedule-actions button {
  box-shadow: none;
}

.bd-layout,
.skills-page-grid,
.roles-page .roles-layout,
.wb-split {
  max-width: 1680px;
}

.bd-roster,
.bd-profile-head,
.bd-tile,
.settings-card,
.settings-group-card {
  border-radius: var(--radius-lg);
  box-shadow: none;
}

.bd-roster {
  top: 78px;
}

.bd-roster-item.on,
.skills-choice.selected,
.skills-discovery-tabs button.selected {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  box-shadow: none;
}

.sessions-page .sessions-view-controls,
.sessions-page .page-heading-actions {
  align-items: center;
}

.sessions-page .sessions-view-controls {
  gap: 8px;
}

.sessions-page .page-heading > .sessions-heading-main {
  flex: 1 1 auto;
  align-items: center;
  gap: 4px 8px;
}

.sessions-page .sessions-heading-main > h1 {
  flex: none;
}

.sessions-page .sessions-heading-main .sessions-view-controls {
  flex: 0 1 auto;
  min-width: 0;
}

.sessions-page .sessions-page-actions {
  flex: 0 0 auto;
  margin-left: auto;
}

.sessions-page {
  --sessions-heading-control-height: var(--button-height);
  --sessions-switch-active-bg: color-mix(in srgb, var(--muted) 12%, var(--surface));
  --sessions-switch-active-fg: var(--accent);
  --sessions-groupby-motion: 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sessions-page .sessions-page-actions > .create-session-btn,
.sessions-page .sessions-view-controls > .segmented,
.sessions-page .sessions-view-controls > .kanban-team-menu,
.sessions-page .sessions-view-controls > .kanban-team-menu > summary {
  height: var(--sessions-heading-control-height);
  min-height: var(--sessions-heading-control-height);
  max-height: var(--sessions-heading-control-height);
}

.sessions-page .sessions-view-controls > .kanban-team-menu {
  width: var(--dropdown-trigger-width);
  min-width: var(--dropdown-trigger-width);
}

.sessions-page .sessions-view-controls :where(.segmented button, .kanban-team-menu > summary),
.sessions-page .sessions-page-actions > .create-session-btn {
  font-size: 12px;
  font-weight: 700;
}

.sessions-page .sessions-view-controls :where(.kanban-groupby, .sessions-view-toggle) button.active,
.sessions-page .sessions-view-controls :where(.kanban-groupby, .sessions-view-toggle) button[aria-pressed="true"] {
  background: var(--sessions-switch-active-bg);
  color: var(--sessions-switch-active-fg);
  box-shadow: none;
}

.sessions-page .sessions-view-controls :where(.kanban-groupby, .sessions-view-toggle) button.active:hover,
.sessions-page .sessions-view-controls :where(.kanban-groupby, .sessions-view-toggle) button[aria-pressed="true"]:hover {
  background: var(--sessions-switch-active-bg);
  color: var(--sessions-switch-active-fg);
}

.sessions-page .sessions-page-actions > .create-session-btn {
  min-width: 0;
  width: auto;
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border-soft));
  background: transparent;
  color: var(--accent);
}

.sessions-page .sessions-page-actions > .create-session-btn:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

.sessions-page .sessions-view-controls > .segmented {
  flex: none;
}

.sessions-page .sessions-view-controls > .kanban-groupby {
  box-sizing: border-box;
  min-width: 0;
  max-width: 280px;
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  will-change: max-width, padding, gap, opacity;
  transition:
    max-width var(--sessions-groupby-motion),
    padding var(--sessions-groupby-motion),
    gap var(--sessions-groupby-motion),
    border-color 180ms ease,
    opacity 150ms ease-out 100ms,
    visibility 0s linear 0s;
}

.sessions-page .sessions-view-controls > .kanban-groupby button {
  flex: 0 0 auto;
  min-width: max-content;
  white-space: nowrap;
  transition:
    background-color 220ms ease,
    color 200ms ease,
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sessions-page .sessions-view-controls > .kanban-groupby.is-collapsed {
  max-width: 0;
  padding-right: 0;
  padding-left: 0;
  gap: 0;
  border-color: transparent;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition:
    max-width var(--sessions-groupby-motion),
    padding var(--sessions-groupby-motion),
    gap var(--sessions-groupby-motion),
    border-color 180ms ease,
    opacity 120ms ease-in,
    visibility 0s linear 360ms;
}

@media (prefers-reduced-motion: reduce) {
  .topbar .brand-wordmark,
  .topbar .brand-product {
    animation: none;
  }

  .sessions-page .sessions-view-controls > .kanban-groupby,
  .sessions-page .sessions-view-controls > .kanban-groupby button {
    transition: none;
  }
}

.v3r-wrap {
  gap: 12px;
}

.v3r-panel,
.v3r-graph-card {
  padding: 12px;
}

.v3r-graph-card {
  background: var(--surface);
}

.v3r-node.st-running .v3r-box,
.v3r-dot.cur.live,
.v3r-edge.live,
.v3r-verdict.vd-live,
.insights-page .insights-metrics,
.insights-page .insights-overview-grid,
.insights-page .insight-panel,
.insights-page .hbfill {
  animation: none;
}

.insights-page .insight-tabs,
.insights-page .detailtabbar {
  gap: 6px;
  border-bottom: 0;
  margin-bottom: 14px;
}

.insights-page .itab,
.insights-page .detailtabbar button {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  margin-bottom: 0;
}

.insights-page .itab.on,
.insights-page .detailtabbar button.on {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.insights-page .strow,
.insights-page .srow,
.insights-page .rec,
.insights-page .turnrow,
.insights-page .lrow,
.insights-page .ws-panel {
  border-radius: var(--radius-lg);
}

.page :where(
  button:not(.card-act):not(.term-btn):not(.modal-close):not(.skills-help-button):not(.skills-pager-button):not(.kanban-card-act):not(.railnode):not(.gbar),
  .btn-link:not(.card-act):not(.term-btn)
) {
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border-radius: var(--radius-full);
  font-weight: 650;
  line-height: 1;
  box-shadow: none;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    color 150ms ease,
    transform 150ms ease;
}

.page :where(button.primary, .btn-link.primary) {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: none;
}

.page :where(button.primary, .btn-link.primary):hover {
  border-color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent) 88%, white 12%);
  color: var(--on-accent);
}

.page :where(button.contrast, button.danger) {
  border-color: color-mix(in srgb, var(--danger) 48%, var(--border-soft));
  background: transparent;
  color: var(--danger);
}

.page :where(button.contrast, button.danger):hover {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 9%, transparent);
  color: var(--danger);
}

.page :where(button.ghost, .schedule-actions button, .update-actions button, .roles-editor-actions button:not(.primary):not(.danger), .connector-item-actions button, .connector-url-row button, .connector-copy-button) {
  min-height: var(--button-compact-height);
  padding: 0 var(--button-padding-x);
  border-radius: var(--radius-full);
  border-color: var(--border-soft);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  color: var(--muted);
  font-size: 12px;
}

.page :where(button.ghost, .schedule-actions button, .update-actions button, .roles-editor-actions button:not(.primary):not(.danger), .connector-item-actions button, .connector-url-row button, .connector-copy-button):hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
  transform: translateY(-1px);
}

.page-heading-actions > button:not(.primary),
.page-heading-actions > .btn-link:not(.primary) {
  min-width: 82px;
  min-height: var(--button-height);
  border-radius: var(--radius-full);
  border-color: color-mix(in srgb, var(--accent) 52%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  color: var(--accent);
  font-size: 12px;
}

.page-heading-actions > button:not(.primary):hover,
.page-heading-actions > .btn-link:not(.primary):hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--accent-strong);
  transform: translateY(-1px);
}

.page-heading-actions > .page-primary-action,
.page-heading-actions > button.primary {
  min-height: var(--button-height);
  border-radius: var(--radius-full);
}

.page-heading-actions > .page-primary-action {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border-soft));
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}

.page-heading-actions > .page-primary-action:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

.page :where(.segmented, .skills-discovery-tabs, .detailtabbar, .insight-tabs) {
  align-items: center;
}

.page .segmented {
  border-radius: var(--radius-full);
}

.page .segmented button {
  min-height: calc(var(--button-height) - 4px);
  padding: 0 12px;
  border-radius: var(--radius-full);
}

.page > .dashboard-toolbar,
.dashboard-toolbar {
  --dashboard-toolbar-active-bg: color-mix(in srgb, var(--muted) 12%, var(--surface));
  --dashboard-toolbar-active-fg: var(--accent);
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--button-height);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  flex-wrap: wrap;
}

:root[data-theme="dark"] .page > .dashboard-toolbar,
:root[data-theme="dark"] .insights-page .insights-filters.dashboard-toolbar,
:root[data-theme="dark"] .sessions-page .sessions-filters.dashboard-toolbar {
  border: 0;
  background: transparent;
}

form.dashboard-toolbar {
  width: 100%;
}

nav.dashboard-toolbar {
  width: fit-content;
}

form.dashboard-toolbar > input[type="search"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]),
form.dashboard-toolbar > input[type="text"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]) {
  flex: 1 1 240px;
  min-width: 220px;
  max-width: 360px;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
}

form.dashboard-toolbar > input[type="search"]:hover:not(:disabled),
form.dashboard-toolbar > input[type="text"]:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

form.dashboard-toolbar > input[type="search"]:focus,
form.dashboard-toolbar > input[type="text"]:focus {
  border-color: var(--accent);
  background: var(--surface);
  color: var(--fg);
  box-shadow: none;
}

#sched-filters > input[type="search"]:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

#sched-filters > input[type="search"]:focus,
#sched-filters > input[type="search"]:focus-visible {
  border-color: var(--accent);
  background: var(--surface);
  color: var(--fg);
  box-shadow: none;
  outline: none;
}

.dashboard-toolbar > select:not([multiple]),
.dashboard-toolbar > button,
.dashboard-toolbar > .btn-link,
.dashboard-toolbar > .filter-toggle,
.dashboard-toolbar > .sect-sort-menu,
.dashboard-toolbar > .toolbar-status {
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.dashboard-toolbar > select:not([multiple]) {
  width: var(--dropdown-trigger-width);
  min-width: var(--dropdown-trigger-width);
  padding: 0 calc(var(--button-padding-x) + 18px) 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  background-color: var(--surface);
  color: var(--muted);
}

.page form.dashboard-toolbar > select:not([multiple]) {
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
}

.dashboard-toolbar > .sect-sort-menu {
  width: var(--dropdown-trigger-width);
  min-width: var(--dropdown-trigger-width);
}

.dashboard-toolbar > .sect-sort-menu > summary {
  box-sizing: border-box;
  width: 100%;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 0 calc(var(--button-padding-x) + 18px) 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
}

.dashboard-toolbar > .sect-sort-menu > summary:hover,
.dashboard-toolbar > .sect-sort-menu[open] > summary {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

.dashboard-toolbar:has(> .sect-sort-menu[open]) {
  position: relative;
  z-index: 1300;
}

.dashboard-toolbar > .sect-sort-menu[open] {
  z-index: 1301;
}

.dashboard-toolbar > .sect-sort-menu .sect-sort-value {
  max-width: 100%;
}

.dashboard-toolbar > .sect-sort-menu > .sect-sort-pop {
  left: 50%;
  z-index: 1302;
  width: 100%;
  min-width: 100%;
  max-width: min(320px, 80vw);
  transform: translateX(-50%);
}

.dashboard-toolbar > button,
.dashboard-toolbar > .btn-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--muted);
  text-decoration: none;
}

.dashboard-toolbar > button:hover:not(:disabled),
.dashboard-toolbar > .btn-link:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

.dashboard-toolbar > .page-primary-action,
.dashboard-toolbar > button.primary {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border-soft));
  background: transparent;
  color: var(--accent);
}

.dashboard-toolbar > .page-primary-action:hover:not(:disabled),
.dashboard-toolbar > button.primary:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

.dashboard-toolbar > .toolbar-status {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--muted);
  white-space: nowrap;
}

.dashboard-toolbar > .toolbar-status:empty {
  display: none;
}

.dashboard-toolbar > .toolbar-status.error {
  border-color: color-mix(in srgb, var(--danger) 42%, var(--border-soft));
  color: var(--danger);
}

.dashboard-toolbar .filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.page form.dashboard-toolbar > .filter-toggle {
  gap: 10px;
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.dashboard-toolbar .filter-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.dashboard-toolbar .filter-toggle span::before {
  content: none;
  display: none;
}

.dashboard-toolbar .filter-toggle-label {
  line-height: 1;
}

.dashboard-toolbar .filter-toggle-switch {
  position: relative;
  flex: none;
  width: 31px;
  height: 18px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--muted) 12%, var(--surface));
}

.dashboard-toolbar .filter-toggle-switch::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  background: var(--faint);
  transform: translateY(-50%);
  transition:
    background-color 150ms ease,
    transform 150ms ease;
}

.dashboard-toolbar .filter-toggle:hover {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border-soft));
  color: var(--accent-strong);
}

.dashboard-toolbar:not(.sessions-filters) .filter-toggle:has(input:checked) {
  border-color: var(--border-soft);
  background: var(--dashboard-toolbar-active-bg);
  color: var(--dashboard-toolbar-active-fg);
}

.roles-page .roles-tree-header.dashboard-toolbar > input[type="search"],
.roles-page .roles-tree-header.dashboard-toolbar > input[type="text"] {
  height: var(--button-height) !important;
  min-height: var(--button-height) !important;
  max-height: var(--button-height) !important;
  padding: 0 var(--button-padding-x) !important;
  border-radius: var(--radius-full) !important;
  box-shadow: none !important;
}

.page :where(.roles-subnav, .team-subnav, .connectors-subnav).insight-tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
  height: var(--button-height);
  min-height: var(--button-height);
  margin: 0;
  padding: 2px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  box-shadow: none;
  overflow-x: auto;
}

.page :where(.roles-subnav, .team-subnav, .connectors-subnav).insight-tabs .itab {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--button-height) - 6px);
  min-height: calc(var(--button-height) - 6px);
  max-height: calc(var(--button-height) - 6px);
  padding: 0 var(--button-padding-x);
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
  transition:
    background-color 150ms ease,
    color 150ms ease;
}

.page :where(.roles-subnav, .team-subnav, .connectors-subnav).insight-tabs .itab:hover {
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--border-soft) 60%, transparent);
}

.page :where(.roles-subnav, .team-subnav, .connectors-subnav).insight-tabs .itab.on,
.page :where(.roles-subnav, .team-subnav, .connectors-subnav).insight-tabs .itab[aria-selected="true"],
.page :where(.roles-subnav, .team-subnav, .connectors-subnav).insight-tabs .itab.on:hover,
.page :where(.roles-subnav, .team-subnav, .connectors-subnav).insight-tabs .itab[aria-selected="true"]:hover {
  background: color-mix(in srgb, var(--muted) 12%, var(--surface));
  color: var(--accent);
}

.connectors-subnav-slot {
  display: flex;
  justify-content: flex-start;
}

.roles-page .roles-group-section {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border-soft));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 42%, var(--surface));
  overflow: visible;
}

.roles-page .roles-group-row,
.roles-page .roles-bot-row,
.roles-page .roles-profile-row {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  transform: none;
}

.roles-page .roles-group-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 48px;
  padding: 6px 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.roles-page .roles-group-row::before {
  content: "";
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  width: 3px;
  height: 16px;
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 38%, var(--border)));
}

.roles-page .roles-group-row .roles-group-arrow {
  grid-column: 2;
}

.roles-page .roles-group-row .roles-group-icon {
  grid-column: 3;
  display: none;
}

.roles-page .roles-group-row .roles-group-info {
  grid-column: 3;
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
}

.roles-page .roles-group-row .roles-group-chevron {
  grid-column: 4;
}

.roles-page .roles-bot-list {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin-left: 3px;
  padding-left: 10px;
  border-left: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border-soft));
  overflow: hidden;
  box-sizing: border-box;
}

.roles-page .roles-bot-list:empty {
  display: none;
}

.roles-page .roles-bot-row {
  min-height: 48px;
  padding: 8px 10px;
}

.roles-page .roles-group-row:hover,
.roles-page .roles-bot-row:hover,
.roles-page .roles-profile-row:hover {
  transform: none;
}

.roles-page .roles-group-row.selected,
.roles-page .roles-bot-row.selected,
.roles-page .roles-profile-row.selected {
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border-soft));
}

.roles-page .roles-group-row.selected {
  border: 0;
  background: transparent;
}

.roles-page .roles-bot-row.selected {
  padding-left: 10px;
}

.roles-page .roles-profile-row.selected {
  padding-left: 12px;
}

.roles-page .roles-bot-indent {
  display: none;
}

.roles-editor-head,
.roles-profile-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.roles-editor-head > div:first-child,
.roles-profile-editor-head > span:first-child {
  min-width: 0;
}

.roles-editor-head-actions {
  flex: none;
  justify-content: flex-end;
}

.roles-editor-footer {
  gap: 10px;
  justify-content: space-between;
}

.roles-profile-editor .roles-editor-footer {
  min-height: 18px;
  justify-content: flex-end;
}

.roles-editor-actions button.primary {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border-soft));
  background: transparent;
  color: var(--accent);
  box-shadow: none;
}

.roles-editor-actions button.primary:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

.dashboard-toolbar:not(.sessions-filters) .filter-toggle:has(input:checked) .filter-toggle-switch {
  border-color: color-mix(in srgb, var(--dashboard-toolbar-active-fg) 44%, var(--border-soft));
  background: color-mix(in srgb, var(--dashboard-toolbar-active-fg) 16%, var(--surface));
}

.dashboard-toolbar:not(.sessions-filters) .filter-toggle:has(input:checked) .filter-toggle-switch::after {
  background: var(--dashboard-toolbar-active-fg);
  transform: translate(13px, -50%);
}

.groups-toolbar {
  align-items: center;
}

.groups-toolbar input[type="search"] {
  flex: 1 1 280px;
  max-width: 460px;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    color 150ms ease;
}

.groups-toolbar input[type="search"]:hover:not(:disabled) {
  border-color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface)) !important;
  color: var(--accent-strong);
}

.groups-toolbar input[type="search"]:focus,
.groups-toolbar input[type="search"]:focus-visible {
  border-color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface)) !important;
  color: var(--fg);
  box-shadow: none;
  outline: none;
}

.groups-toolbar-spacer {
  flex: 1 1 auto;
  min-width: 8px;
}

.groups-toolbar-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.groups-toolbar #g-refresh {
  flex: none;
}

.dashboard-toolbar > .spanfilter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--button-height);
  margin: 0;
}

.dashboard-toolbar > .spanfilter:empty {
  display: none;
}

.dashboard-toolbar > .spanfilter > .spanchip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
}

.dashboard-toolbar > .spanfilter > .spanchip:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

.dashboard-toolbar > .spanfilter > .spanchip.on {
  border-color: var(--border-soft);
  background: var(--dashboard-toolbar-active-bg);
  color: var(--dashboard-toolbar-active-fg);
}

.dashboard-toolbar > .spanfilter > .spanchip b {
  color: inherit;
  font-size: inherit;
  font-weight: 800;
}

.dashboard-toolbar > .spanfilter.cli-filter {
  gap: 2px;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 2px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  box-shadow: none;
}

.dashboard-toolbar > .spanfilter.cli-filter > .spanchip {
  height: calc(var(--button-height) - 6px);
  min-height: calc(var(--button-height) - 6px);
  max-height: calc(var(--button-height) - 6px);
  padding: 0 var(--button-padding-x);
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.dashboard-toolbar > .spanfilter.cli-filter > .spanchip:hover {
  border: 0;
  background: color-mix(in srgb, var(--border-soft) 60%, transparent);
  color: var(--accent-strong);
}

.dashboard-toolbar > .spanfilter.cli-filter > .spanchip.on,
.dashboard-toolbar > .spanfilter.cli-filter > .spanchip.on:hover {
  border: 0;
  background: var(--dashboard-toolbar-active-bg);
  color: var(--dashboard-toolbar-active-fg);
}

.dashboard-toolbar .segmented,
.team-subnav.dashboard-toolbar,
.connectors-subnav.dashboard-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  width: fit-content;
  height: var(--button-height);
  min-height: var(--button-height);
  margin: 0;
  padding: 2px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  box-shadow: none;
}

.dashboard-toolbar .segmented button,
.team-subnav.dashboard-toolbar a,
.connectors-subnav.dashboard-toolbar a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--button-height) - 6px);
  min-height: calc(var(--button-height) - 6px);
  padding: 0 var(--button-padding-x);
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  box-shadow: none;
}

.dashboard-toolbar .segmented button.active,
.dashboard-toolbar .segmented button[aria-pressed="true"],
.team-subnav.dashboard-toolbar a.active,
.connectors-subnav.dashboard-toolbar a.active {
  background: var(--dashboard-toolbar-active-bg);
  color: var(--dashboard-toolbar-active-fg);
  box-shadow: none;
}

.dashboard-toolbar .segmented button:hover,
.team-subnav.dashboard-toolbar a:hover,
.connectors-subnav.dashboard-toolbar a:hover {
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--border-soft) 60%, transparent);
}

.dashboard-toolbar .segmented button.active:hover,
.dashboard-toolbar .segmented button[aria-pressed="true"]:hover,
.team-subnav.dashboard-toolbar a.active:hover,
.connectors-subnav.dashboard-toolbar a.active:hover {
  background: var(--dashboard-toolbar-active-bg);
  color: var(--dashboard-toolbar-active-fg);
}

.insights-page .dashboard-toolbar #insight-project {
  width: 190px;
  min-width: 190px;
}

.insights-page .dashboard-toolbar #insight-time {
  width: 132px;
  min-width: 132px;
}

.insights-page .dashboard-toolbar #insight-review-filter {
  width: 136px;
  min-width: 136px;
}

.insights-page .dashboard-toolbar #insight-cli-filter {
  width: 154px;
  min-width: 154px;
}

.sessions-page .sessions-view-controls :is(.kanban-groupby, .sessions-view-toggle) {
  box-sizing: border-box;
  height: var(--button-height);
  min-height: var(--button-height);
  padding: 2px;
  gap: 2px;
  border-color: var(--border-soft);
}

.sessions-page .sessions-view-controls :is(.kanban-groupby, .sessions-view-toggle) button {
  height: calc(var(--button-height) - 6px);
  min-height: calc(var(--button-height) - 6px);
  padding: 0 var(--button-padding-x);
}

.page :where(.actions, .update-actions, .schedule-actions, .roles-editor-actions, .connector-item-actions, .connector-edit-actions, .team-manage-actions, .team-role-actions) {
  align-items: center;
  gap: 8px;
}

.page :where(.connector-item-actions, .team-manage-actions, .roles-editor-actions, .update-actions) {
  min-height: var(--button-height);
}

.team-subnav {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  width: fit-content;
  min-height: var(--button-height);
  margin: 0;
  padding: 2px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
}

.team-subnav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--button-height) - 6px);
  padding: 0 var(--button-padding-x);
  border: 0;
  border-radius: var(--radius-full);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    color 150ms ease;
}

.team-subnav a:hover {
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--border-soft) 60%, transparent);
}

.team-subnav a.active {
  background: color-mix(in srgb, var(--muted) 12%, var(--surface));
  color: var(--accent);
}

.team-card {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.team-card h2 {
  margin: 0 !important;
}

.team-filters {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
  padding: 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 55%, transparent);
  font-size: 13px;
}

.tf-team-h,
.team-identity-row,
.team-pull-row,
.team-inline-form,
.team-manage-head,
.team-manage-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.team-identity-row {
  margin: 0;
}

.team-identity-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
}

.team-identity-label::before {
  content: "";
  width: var(--section-title-dot-size);
  height: var(--section-title-dot-size);
  flex: 0 0 var(--section-title-dot-size);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 88%, #fff) 0 22%, transparent 23%),
    linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 38%, var(--border)));
}

.team-identity-row #tf-owner {
  color: var(--fg);
}

.team-bind-status {
  display: inline-flex;
  align-items: center;
  min-height: var(--button-height);
  padding: 0 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.team-bind-status[hidden] {
  display: none !important;
}

.team-bind-status .ok {
  color: var(--success);
}

.team-bind-status .err {
  color: var(--danger);
}

.tf-team-h {
  cursor: pointer;
}

.tf-team-h b {
  color: var(--fg);
  font-size: 14px;
}

.team-pull-row {
  margin-top: 12px;
}

.team-pull-row .team-group-name-field {
  min-width: 200px;
}

.team-pull-row .tf-gout {
  display: block;
  flex-basis: 100%;
  font-size: 13px;
}

.tf-dep-h {
  margin: 10px 0 2px;
  cursor: pointer;
}

.team-inline-form {
  margin: 0 0 6px;
}

.team-inline-form #tm-newname {
  min-width: 200px;
}

.team-inline-form #tm-hub {
  flex: 1;
  min-width: 240px;
}

.team-inline-form #tm-code {
  min-width: 160px;
}

.team-manage-head b {
  color: var(--fg);
}

.team-manage-actions {
  margin-left: auto;
  gap: 6px;
}

.team-role-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--modal-backdrop);
  backdrop-filter: blur(3px);
}

.team-role-modal[hidden] {
  display: none !important;
}

.team-role-dialog {
  display: grid;
  gap: 12px;
  width: min(560px, 92vw);
  padding: 18px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--fg);
  box-shadow: var(--modal-shadow);
}

.team-role-dialog h2 {
  margin: 0;
  font-size: 17px;
  line-height: 1.25;
  text-align: center;
}

.team-role-dialog textarea {
  width: 100%;
  min-height: 200px;
  padding: 12px;
  box-sizing: border-box;
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  font: 13px/1.5 var(--mono);
}

.team-role-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 0;
}

.team-roster-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.connector-section {
  width: 100%;
  max-width: none;
}

.connectors-page {
  gap: 8px;
}

.connector-list-card {
  padding: 16px;
}

.connectors-page .cn-form :is(input, select, textarea),
.connectors-page .cn-edit-instruction {
  width: 100%;
  box-sizing: border-box;
}

.connectors-page .cn-form textarea,
.connectors-page .cn-edit-instruction {
  font-family: inherit;
  font-size: 13px;
}

.connectors-page #cn-chat {
  margin-top: 6px;
}

.connector-item-head,
.connector-url-row,
.connector-item-actions,
.connector-edit-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.connector-item-head b {
  color: var(--fg);
  font-size: 14px;
}

.connector-item-actions {
  margin-left: auto;
}

.connector-url-row {
  margin-top: 8px;
  font-size: 13px;
}

.connector-url-row code {
  font-size: 12px;
  word-break: break-all;
}

.connector-edit-actions {
  margin-top: 8px;
}

.ui-field-title {
  position: relative;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
  line-height: 1.25;
  vertical-align: middle;
}

.ui-field-title-text {
  min-width: 0;
}

.ui-info-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  flex: none;
  cursor: default;
}

.ui-info-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: 1px solid color-mix(in srgb, var(--muted) 38%, var(--border-soft));
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--muted) 8%, transparent);
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1;
}

.ui-info-pop {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 1400;
  box-sizing: border-box;
  width: max-content;
  max-width: min(360px, calc(100vw - 48px));
  padding: 9px 12px 9px 18px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--modal-shadow);
  color: var(--fg);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  white-space: pre-line;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity 140ms ease, transform 140ms ease;
}

.ui-info-pop::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 42%, var(--border-soft)));
}

.ui-info-pop-floating {
  position: fixed;
  bottom: auto;
  z-index: 2147483647;
  opacity: 1;
  /* Interactive: let the pointer reach the popover so its text is selectable /
     copyable (JS keeps it open while hovered). */
  pointer-events: auto;
  user-select: text;
  cursor: text;
  transform: translate(-50%, -100%);
}

.ui-info-pop-floating.ui-info-pop-bottom {
  transform: translate(-50%, 0);
}

.ui-info-tip:hover .ui-info-mark,
.ui-info-tip:focus .ui-info-mark,
.ui-info-tip:focus-within .ui-info-mark {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border-soft));
  color: var(--accent);
}

.ui-info-tip:hover .ui-info-pop,
.ui-info-tip:focus .ui-info-pop,
.ui-info-tip:focus-within .ui-info-pop {
  opacity: 1;
  transform: translate(-50%, 0);
}

.ui-overflow-text {
  container-type: inline-size;
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.ui-overflow-text.is-overflowing {
  cursor: default;
}

.ui-overflow-scroll {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
  white-space: nowrap;
}

.ui-overflow-text.is-overflowing:hover .ui-overflow-scroll {
  max-width: none;
  overflow: visible;
  animation: ui-overflow-text-pan var(--ui-overflow-duration, 5200ms) ease-in-out infinite alternate;
}

.ui-overflow-popover {
  max-width: min(460px, calc(100vw - 48px));
  padding: 9px 12px 9px 18px;
  border-color: color-mix(in srgb, var(--accent) 18%, var(--border-soft));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: var(--modal-shadow);
  color: var(--fg);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
  white-space: normal;
}

@keyframes ui-overflow-text-pan {
  0%,
  18% {
    transform: translateX(0);
  }
  82%,
  100% {
    transform: translateX(min(0px, calc(100cqw - 100%)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-overflow-text.is-overflowing:hover .ui-overflow-scroll {
    max-width: 100%;
    overflow: hidden;
    animation: none;
    text-overflow: ellipsis;
    transform: none;
  }
}

.skills-defaults-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: max-content;
  align-content: start;
  gap: 12px 14px;
}

.skills-page .skills-defaults-panel {
  grid-template-columns: 1fr;
  align-items: start;
  align-content: space-between;
  gap: 12px;
}

.skills-page .skills-defaults-panel .skills-control-block + .skills-control-block {
  margin-top: 2px;
  padding-top: 0;
  padding-left: 0;
  border-top: 0;
  border-left: 0;
}

.skills-page .skills-install-panel .skills-install-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: row;
  align-items: start;
  gap: 12px 14px;
}

.skills-page .skills-install-panel .skills-source-label {
  grid-column: 1;
  grid-row: 1;
}

.skills-page .skills-install-panel .skills-install-path-field {
  grid-column: 2;
  grid-row: 1;
}

.skills-page .skills-install-panel .skills-install-ref-field {
  grid-column: 1;
  grid-row: 2;
}

.skills-page .skills-install-panel .skills-install-bottom-row {
  display: grid;
  grid-column: 1 / -1;
  grid-row: 3;
  grid-template-columns: minmax(260px, .9fr) minmax(320px, 1.1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.skills-page .skills-install-panel .skills-install-actions {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  justify-content: flex-end;
}

.skills-page .skills-install-panel .skills-local-discovery-panel {
  grid-column: 1 / -1;
  min-width: 0;
  min-height: var(--button-height);
  padding: 8px 10px;
}

.skills-page .skills-install-panel .skills-install-bottom-row .skills-local-discovery-panel div {
  min-width: 0;
}

.skills-page .skills-install-panel .skills-install-bottom-row .skills-local-discovery-panel strong,
.skills-page .skills-install-panel .skills-install-bottom-row .skills-local-discovery-panel span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skills-install-status-row {
  margin: 8px 0 0;
}

.skills-source-feedback {
  display: grid;
  gap: 2px;
  margin-top: 7px;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border-soft));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.skills-source-feedback strong {
  color: var(--accent-strong);
  font-size: 11px;
}

.skills-source-feedback span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.skills-source-feedback.is-unknown {
  border-color: color-mix(in srgb, var(--warning) 35%, var(--border-soft));
  background: color-mix(in srgb, var(--warning) 8%, var(--surface));
}

.skills-source-feedback.is-unknown strong {
  color: var(--warning);
}

.skills-install-diagnostic {
  display: grid;
  gap: 3px;
  margin-top: 8px;
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--warning) 34%, var(--border-soft));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--warning) 8%, var(--surface));
}

.skills-install-diagnostic strong {
  color: var(--warning);
  font-size: 12px;
}

.skills-install-diagnostic span {
  color: var(--fg-muted);
  font-size: 11px;
  line-height: 1.5;
}

@media (max-width: 980px) {
  .skills-page .skills-install-panel .skills-install-bottom-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .skills-inline-target {
    align-items: flex-start;
  }
}

.skills-defaults-panel .bd-section-title {
  margin: 0;
}

.skills-segmented-control {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.skills-segmented {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  height: var(--button-height);
  min-height: var(--button-height);
  padding: 2px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  overflow-x: auto;
}

.skills-segmented button {
  height: calc(var(--button-height) - 6px);
  min-height: calc(var(--button-height) - 6px);
  padding: 0 var(--button-padding-x);
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.skills-segmented button:hover {
  background: color-mix(in srgb, var(--border-soft) 60%, transparent);
  color: var(--accent-strong);
}

.skills-segmented button.active,
.skills-segmented button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--muted) 12%, var(--surface));
  color: var(--accent);
}

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

.skills-install-panel .ui-field-title {
  font: inherit;
}

.skills-install-panel .ui-info-pop {
  bottom: auto;
  top: calc(100% + 8px);
  white-space: pre-line;
  transform: translate(-50%, -4px);
}

.skills-install-panel .ui-info-tip:hover .ui-info-pop,
.skills-install-panel .ui-info-tip:focus .ui-info-pop,
.skills-install-panel .ui-info-tip:focus-within .ui-info-pop {
  transform: translate(-50%, 0);
}

.skills-install-grid input,
.skills-attach-row .sect-sort-menu > summary {
  height: var(--button-height);
  min-height: var(--button-height);
  border-radius: var(--radius-full);
}

.skills-install-grid input {
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  box-shadow: none;
}

.skills-install-grid input::placeholder {
  color: var(--faint);
  font-weight: 600;
}

.skills-install-grid input:hover:not(:disabled),
.skills-install-grid input:focus {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
  outline: none;
  box-shadow: none;
}

.skills-page .skills-install-grid .skills-install-field-wide > input[type="text"] {
  box-sizing: border-box;
  height: var(--button-height) !important;
  min-height: var(--button-height) !important;
  max-height: var(--button-height) !important;
  padding: 0 var(--button-padding-x) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius-full) !important;
  background: var(--surface) !important;
  color: var(--fg);
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: normal !important;
  box-shadow: none !important;
  outline: none;
}

.skills-page .skills-install-grid .skills-install-field-wide > input[type="text"]:hover:not(:disabled),
.skills-page .skills-install-grid .skills-install-field-wide > input[type="text"]:focus {
  border-color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 8%, transparent) !important;
  color: var(--accent-strong);
  box-shadow: none !important;
}

.skills-page .skills-install-grid .skills-source-label .skills-source-control > input[type="text"] {
  box-sizing: border-box;
  height: var(--button-height) !important;
  min-height: var(--button-height) !important;
  max-height: var(--button-height) !important;
  padding: 0 var(--button-padding-x) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius-full) !important;
  background: var(--surface) !important;
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  box-shadow: none !important;
  outline: none;
}

.skills-page .skills-install-grid .skills-source-label .skills-source-control > input[type="text"]:hover:not(:disabled),
.skills-page .skills-install-grid .skills-source-label .skills-source-control > input[type="text"]:focus {
  border-color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 8%, transparent) !important;
  color: var(--accent-strong);
  box-shadow: none !important;
}

.skills-page :where(
  #skills-refresh,
  .skills-install-actions button,
  .skills-local-discovery-panel button,
  .skills-candidate-list-head button,
  .skills-attach-row > button,
  .skills-pager-button,
  .skills-discovery-dialog footer button,
  .skills-card-actions button
) {
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid color-mix(in srgb, var(--accent) 58%, var(--border-soft));
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
}

.skills-page :where(
  #skills-refresh,
  .skills-install-actions button,
  .skills-local-discovery-panel button,
  .skills-candidate-list-head button,
  .skills-attach-row > button,
  .skills-pager-button,
  .skills-discovery-dialog footer button,
  .skills-card-actions button
):hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

.skills-page :where(
  #skills-refresh,
  .skills-install-actions button,
  .skills-local-discovery-panel button,
  .skills-candidate-list-head button,
  .skills-attach-row > button,
  .skills-pager-button,
  .skills-discovery-dialog footer button,
  .skills-card-actions button
):disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.skills-page .skills-install-actions button[data-action="install"] {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border-soft));
  background: transparent;
  color: var(--accent);
  box-shadow: none;
}

.skills-page .skills-install-actions button[data-action="install"]:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

.skills-attach-menu {
  width: 100%;
  min-width: 0;
}

.skills-attach-menu .sect-sort-value {
  max-width: 100%;
}

.skills-attach-menu > .sect-sort-pop {
  left: 0;
  box-sizing: border-box;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  transform: none;
}

.skills-attach-menu > .sect-sort-pop button {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skills-source-badge,
.skills-count-pill,
.team-count-pill,
.team-meta-pill,
.team-status-pill,
.connector-status-pill,
.connector-item-meta span {
  border-radius: var(--radius-full);
}

.skills-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--border-soft);
  background: transparent;
}

.skills-card-actions button,
.skills-card-actions button + button {
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
}

.skills-card-actions button + button {
  border-left: 1px solid var(--border-soft);
}

.skills-card-actions [data-action="remove-skill"] {
  border-color: color-mix(in srgb, var(--danger) 42%, var(--border-soft));
  color: var(--danger);
}

.team-card {
  gap: 12px;
}

.team-card-head {
  display: flex;
  align-items: flex-end;
  gap: 8px 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.team-card-head h2 {
  margin: 0 !important;
}

.team-card-note {
  margin-bottom: 1px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.team-count-pill,
.team-meta-pill,
.team-status-pill,
.connector-status-pill,
.connector-item-meta span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.team-count-pill {
  margin-left: auto;
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.team-status-pill.ok,
.connector-status-pill.ok {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 32%, var(--border-soft));
  background: var(--success-soft);
}

.team-status-pill.err {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 32%, var(--border-soft));
  background: var(--danger-soft);
}

.team-filters.dashboard-toolbar,
.team-inline-form.dashboard-toolbar {
  width: 100%;
}

.team-filters.dashboard-toolbar {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.team-filters.dashboard-toolbar input[type="search"],
.team-inline-form.dashboard-toolbar input[type="text"] {
  height: var(--button-height);
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  box-shadow: none;
}

.team-filters.dashboard-toolbar input[type="search"]:hover,
.team-filters.dashboard-toolbar input[type="search"]:focus,
.team-inline-form.dashboard-toolbar input[type="text"]:hover,
.team-inline-form.dashboard-toolbar input[type="text"]:focus {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
  box-shadow: none;
}

.team-page #tf-search {
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

.team-page #tf-search:hover:not(:disabled),
.team-page #tf-search:focus,
.team-page #tf-search:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--accent-strong);
  box-shadow: none;
  outline: none;
}

.team-filters .team-cli-menu {
  width: var(--dropdown-trigger-width);
  min-width: var(--dropdown-trigger-width);
}

.team-page .card label.team-pill-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  min-width: 0;
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  box-shadow: none;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    color 150ms ease;
}

.team-page .card label.team-pill-field > span {
  flex: none;
  color: var(--muted);
}

.team-page .card label.team-pill-field > input {
  flex: 1 1 140px;
  width: 100%;
  min-width: 0;
  height: calc(var(--button-height) - 2px);
  min-height: calc(var(--button-height) - 2px);
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  color: var(--fg);
  font: inherit;
  line-height: 1;
  box-shadow: none !important;
  outline: 0;
}

.team-page .card label.team-pill-field > input::placeholder {
  color: var(--faint);
  font-weight: 600;
}

.team-page .card label.team-pill-field:hover,
.team-page .card label.team-pill-field:focus-within {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

.team-page .card label.team-pill-field:hover > span,
.team-page .card label.team-pill-field:focus-within > span {
  color: var(--accent-strong);
}

.team-capability-cell .team-cap-field {
  width: 100%;
}

.team-page .card label.filter-toggle,
.team-page .team-check-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.team-page .card label.filter-toggle:has(input:checked),
.team-page .team-check-pill.selected {
  border-color: var(--border-soft);
  background: color-mix(in srgb, var(--muted) 12%, var(--surface));
  color: var(--accent);
}

.team-page .team-check-pill {
  box-sizing: border-box;
  width: 12px;
  min-width: 12px;
  height: 12px;
  min-height: 12px;
  max-height: 12px;
  justify-content: center;
  gap: 0;
  padding: 0;
  border-radius: var(--radius-full);
  background: var(--surface);
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    transform 150ms ease;
}

.team-check-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.team-check-pill .team-check-dot {
  position: relative;
  width: 4px;
  height: 4px;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
}

.team-check-pill.selected {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border-soft));
  background: var(--surface);
}

.team-check-pill.selected .team-check-dot {
  background: var(--accent);
}

.team-page .card label.team-check-pill {
  box-sizing: border-box;
  flex: 0 0 14px;
  width: 14px;
  min-width: 14px;
  max-width: 14px;
  height: 14px;
  min-height: 14px;
  max-height: 14px;
  padding: 0;
  border-radius: var(--radius-full);
  background: var(--surface);
}

.team-page .card label.team-check-pill.selected {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border-soft));
  background: var(--surface);
  color: var(--accent);
}

.team-page .card label.team-check-pill .team-check-dot {
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
}

.tf-team-h,
.tf-dep-h {
  width: 100%;
  min-height: 30px;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--fg);
  text-align: left;
  cursor: pointer;
}

.tf-team-h::before {
  content: "";
  flex: none;
  width: 3px;
  height: 16px;
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 38%, var(--border)));
}

.tf-team-h > b,
.tf-dep-h > b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tf-team-h .team-chevron,
.tf-dep-h .team-chevron {
  order: 20;
  margin-left: auto;
}

.tf-team-h .team-status-pill,
.tf-team-h .team-meta-pill,
.tf-dep-h .tf-rmmember {
  flex: none;
}

.tf-team-h:hover,
.tf-dep-h:hover {
  background: transparent;
  color: var(--accent-strong);
  transform: none;
}

.team-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--muted);
  font-size: 0;
  font-weight: 800;
  line-height: 1;
}

.team-chevron::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transform-origin: center;
}

.tf-team-h[aria-expanded="true"] .team-chevron::before,
.tf-dep-h[aria-expanded="true"] .team-chevron::before {
  transform: rotate(45deg) translate(-1px, -1px);
}

.team-list-card {
  display: grid;
  gap: 10px;
  margin: 0 0 8px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border-soft));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 42%, var(--surface));
}

.team-deployment-block {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin-left: 3px;
  padding: 0 0 0 10px;
  border: 0;
  border-left: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border-soft));
  border-radius: 0;
  background: transparent;
}

.team-roster-list {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin-left: 3px;
  padding-left: 10px;
  border-left: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border-soft));
}

.team-bot-row {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto minmax(180px, 0.6fr) auto;
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  cursor: pointer;
  outline: none;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.team-bot-row:hover {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.team-bot-row.selected {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.team-bot-row:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}

.team-bot-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

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

.team-bot-main span,
.team-capability-cell,
.team-role-cell,
.team-pull-hint {
  color: var(--muted);
  font-size: 12px;
}

.team-capability-cell,
.team-role-cell {
  min-width: 0;
}

.team-pull-row {
  gap: 8px;
}

.team-pull-row .team-group-name-field {
  flex: 1 1 220px;
  min-width: 200px;
  max-width: 360px;
}

.team-inline-output {
  padding: 9px 11px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 64%, transparent);
  color: var(--muted);
  font-size: 13px;
}

.team-inline-output[hidden] {
  display: none !important;
}

.team-join-form #tm-hub {
  flex: 1 1 320px;
  max-width: none;
}

.team-join-form #tm-code {
  flex: 0 1 220px;
}

.team-manage-card {
  padding: 12px;
}

.team-manage-head {
  min-width: 0;
}

.team-manage-actions {
  margin-left: auto;
}

.team-invite-code {
  font-size: 15px;
}

.connectors-page .cn-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  gap: 12px;
  align-items: start;
  max-width: none;
}

.connectors-page .cn-form > * {
  min-width: 0;
}

.connectors-page .connector-list-card {
  width: 100%;
}

.connectors-page .cn-field,
.connectors-page .cn-field-wide {
  display: grid;
  gap: 7px;
  width: 100%;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.connectors-page .cn-field-wide {
  grid-column: 1 / -1;
}

.connectors-page .cn-form .ui-field-title {
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
}

.connectors-page .cn-form :is(input, textarea),
.connectors-page .connector-form-menu > summary,
.settings-field-menu > summary,
.settings-card .maint-time input,
.settings-card .settings-pill-input {
  border-radius: var(--radius-full);
}

.connectors-page .cn-form :is(input, textarea) {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--fg);
  box-shadow: none;
}

.connectors-page .cn-form input,
.connectors-page .connector-form-menu > summary,
.settings-field-menu > summary,
.settings-card .maint-time input,
.settings-card .settings-pill-input {
  height: var(--button-height);
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  font-size: 12px;
  font-weight: 700;
}

.settings-card .maint-time input,
.settings-card .settings-pill-input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--fg);
  line-height: normal;
  outline: none;
  box-shadow: none;
}

.settings-card .settings-pill-input::placeholder {
  color: var(--faint);
  font-weight: 600;
}

.settings-card .maint-time input:hover:not(:disabled),
.settings-card .maint-time input:focus,
.settings-card .settings-pill-input:hover:not(:disabled),
.settings-card .settings-pill-input:focus {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
  outline: none;
  box-shadow: none;
}

.connectors-page .cn-form .cn-field > :where(input:not([type]), input[type="text"]) {
  box-sizing: border-box;
  height: var(--button-height) !important;
  min-height: var(--button-height) !important;
  max-height: var(--button-height) !important;
  padding: 0 var(--button-padding-x) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius-full) !important;
  background: var(--surface) !important;
  color: var(--fg);
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: normal !important;
  box-shadow: none !important;
  outline: none;
}

.connectors-page .cn-form .cn-field > :where(input:not([type]), input[type="text"])::placeholder {
  color: var(--faint);
  font-weight: 600;
}

.connectors-page .cn-form .cn-field > :where(input:not([type]), input[type="text"]):hover:not(:disabled),
.connectors-page .cn-form .cn-field > :where(input:not([type]), input[type="text"]):focus {
  border-color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 8%, transparent) !important;
  color: var(--accent-strong);
  box-shadow: none !important;
}

.connectors-page .cn-form textarea {
  min-height: 92px;
  padding: 10px 12px;
  border-radius: var(--radius-lg);
}

.connectors-page .connector-form-menu,
.settings-field-menu {
  width: 100%;
  min-width: 0;
}

.connectors-page .connector-form-menu > summary {
  box-sizing: border-box;
  width: 100%;
  justify-content: flex-start;
}

.settings-field-menu > summary {
  box-sizing: border-box;
  width: 100%;
  justify-content: flex-start;
}

.connectors-page .connector-form-menu .sect-sort-value,
.settings-field-menu .sect-sort-value {
  max-width: 100%;
}

.connectors-page .connector-form-menu .sect-sort-pop,
.settings-field-menu .sect-sort-pop {
  left: 0;
  box-sizing: border-box;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  transform: none;
}

.settings-field-menu .sect-sort-pop button {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connector-chat-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.connector-inline-link {
  display: inline-flex;
  margin-top: 0;
  text-decoration: none;
}

.connector-inline-link:hover {
  text-decoration: none;
}

.connector-group-picker {
  position: relative;
  width: 100%;
  min-width: 0;
}

.connector-group-picker-trigger {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: var(--button-height);
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  box-shadow: none;
}

.connector-group-picker-trigger > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connector-group-picker-trigger:hover,
.connector-group-picker.open .connector-group-picker-trigger {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  color: var(--accent-strong);
  transform: none;
}

.connector-group-picker-chevron {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.connector-group-picker.open .connector-group-picker-chevron {
  transform: translateY(2px) rotate(225deg);
}

.connector-group-picker-popover {
  position: absolute;
  z-index: 1600;
  top: calc(100% + 7px);
  left: 0;
  box-sizing: border-box;
  display: grid;
  gap: 7px;
  width: 100%;
  min-width: min(360px, calc(100vw - 64px));
  padding: 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--modal-shadow);
}

.connector-group-search {
  position: relative;
  display: block;
}

.connectors-page .cn-form .connector-group-search > input[type="search"] {
  height: 34px;
  min-height: 34px;
  padding: 0 12px 0 34px;
  border-radius: var(--radius-md);
  font-weight: 600;
}

.connector-group-search-icon {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 13px;
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--muted);
  border-radius: 50%;
  transform: translateY(-58%);
  pointer-events: none;
}

.connector-group-search-icon::after {
  content: '';
  position: absolute;
  right: -4px;
  bottom: -3px;
  width: 5px;
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
  transform-origin: left center;
}

.connector-group-options {
  display: grid;
  gap: 3px;
  max-height: 228px;
  overflow-y: auto;
}

.connector-group-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 7px 9px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--fg);
  text-align: left;
  box-shadow: none;
}

.connector-group-option:hover,
.connector-group-option.selected {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  color: var(--accent-strong);
  transform: none;
}

.connector-group-option > span:last-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.connector-group-option b,
.connector-group-option small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connector-group-option b { font-size: 12px; }
.connector-group-option small { color: var(--muted); font-size: 10.5px; font-weight: 600; }

.connector-group-check {
  position: relative;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface);
}

.connector-group-option.selected .connector-group-check {
  border-color: var(--accent);
  background: var(--accent);
}

.connector-group-option.selected .connector-group-check::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 5px;
  width: 4px;
  height: 7px;
  border-right: 1.5px solid white;
  border-bottom: 1.5px solid white;
  transform: rotate(45deg);
}

.connector-group-option-all {
  border-bottom: 1px solid var(--border-soft);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.connector-group-empty {
  margin: 0;
  padding: 18px 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.connector-new-group-config {
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 54%, transparent);
}

.connector-strategy-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.connector-strategy-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 11px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--fg);
  text-align: left;
  box-shadow: none;
}

.connector-strategy-option:hover,
.connector-strategy-option.selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  transform: none;
}

.connector-strategy-option > span:last-child { display: grid; gap: 4px; min-width: 0; }
.connector-strategy-option b { color: var(--fg); font-size: 12px; }
.connector-strategy-option small { color: var(--muted); font-size: 11px; font-weight: 600; line-height: 1.4; }

.connector-strategy-radio {
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
}

.connector-strategy-option.selected .connector-strategy-radio {
  border: 4px solid var(--accent);
}

.connector-topic-message-config {
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 54%, transparent);
}

.connector-topic-message-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.connector-topic-message-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 11px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--fg);
  text-align: left;
  box-shadow: none;
}

.connector-topic-message-option:hover,
.connector-topic-message-option.selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  transform: none;
}

.connector-topic-message-option > span:last-child { display: grid; gap: 4px; min-width: 0; }
.connector-topic-message-option b { color: var(--fg); font-size: 12px; }
.connector-topic-message-option small { color: var(--muted); font-size: 11px; font-weight: 600; line-height: 1.4; }
.connector-topic-message-option.selected .connector-strategy-radio { border: 4px solid var(--accent); }

.connector-topic-message-input { display: grid; gap: 6px; }
.connector-topic-message-input > small {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}
.connector-topic-message-input > small span { color: var(--faint); font-variant-numeric: tabular-nums; }
.connector-topic-message-extractors {
  min-height: 148px;
  resize: vertical;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.5;
}

.connector-topic-message-preview {
  margin: 0;
  padding: 9px 11px;
  border: 1px dashed color-mix(in srgb, var(--accent) 35%, var(--border-soft));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  color: var(--fg);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.45;
}

.connector-dedup-field { display: grid; gap: 7px; }

.connector-new-group-note {
  margin: 0;
  padding: 9px 11px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.45;
}

.cn-optional {
  margin-left: 4px;
  font-weight: 600;
}

.connector-form-hint {
  background: color-mix(in srgb, var(--surface-muted) 70%, transparent);
}

.connector-log-policy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 70%, transparent);
  cursor: pointer;
}
.connector-log-policy input {
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--accent);
}
.connector-log-policy > span { display: grid; gap: 4px; }
.connector-log-policy strong { color: var(--fg); font-size: 12px; }
.connector-log-policy small { color: var(--muted); font-size: 11.5px; font-weight: 600; line-height: 1.45; }

.connector-created-wrap {
  margin-top: 12px;
}

.connector-list-card {
  display: grid;
  align-content: start;
  gap: 10px;
}

.connector-list-card:has(> .connector-list-loading) {
  grid-template-rows: minmax(0, 1fr);
}

.connector-list-loading {
  min-height: 220px;
}

.connector-list-card:has(.connector-list-empty) {
  place-content: center;
  place-items: center;
}

.connector-list-empty {
  margin: 0;
  text-align: center;
}

.connector-created-card,
.connector-item-card {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 14px;
  background: var(--surface);
}

.connector-created-title,
.connector-created-line,
.connector-created-help {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}

.connector-created-title {
  font-size: 13px;
  font-weight: 700;
}

.connector-created-line {
  display: flex;
  gap: 6px;
  align-items: baseline;
  flex-wrap: wrap;
}

.connector-created-line code,
.connector-created-card pre,
.connector-url-row code {
  word-break: break-all;
}

.connector-created-card pre {
  margin: 0;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
  font-size: 12px;
  white-space: pre-wrap;
}

.connector-item-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.connector-item-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  min-width: 0;
}

.connector-item-main {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.connector-item-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

.connector-item-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 2px 0 0;
  flex-wrap: wrap;
}

.connector-url-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.connector-item-title .connector-status-pill {
  box-sizing: border-box;
  height: 22px;
  min-height: 22px;
  min-width: 48px;
  padding: 0 9px;
}

.connector-copy-button {
  justify-self: end;
  white-space: nowrap;
}

.connector-copy-button.copied,
.connector-copy-button.copied:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--success) 48%, var(--border-soft));
  background: var(--success-soft);
  color: var(--success);
  transform: none;
}

.connector-item-note,
.connector-edit-actions span {
  font-size: 12px;
  line-height: 1.45;
}

.cn-edit-box {
  display: grid;
  gap: 8px;
  margin-top: 2px;
}

@media (min-width: 981px) {
  main:has(.connectors-page) {
    padding-bottom: 0;
    overflow: hidden;
  }

  main:has(.connectors-page) .connectors-page {
    height: 100%;
    min-height: 0;
    grid-template-rows: auto auto minmax(0, 1fr);
    overflow: hidden;
  }

  .connectors-page .connector-list-section,
  .connectors-page .connector-list-card {
    min-height: 0;
  }

  .connectors-page .connector-list-section {
    display: grid;
  }

  .connectors-page .connector-list-card {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .connectors-page .connector-list-card > .connector-list-loading {
    height: 100%;
    min-height: 0;
  }
}

.connector-create-modal {
  width: min(840px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--modal-shadow);
  color: var(--fg);
  overflow: hidden;
}

.connector-create-modal::backdrop {
  background: var(--modal-backdrop);
  backdrop-filter: blur(3px);
}

.connector-modal-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: calc(100dvh - 32px);
  overflow: hidden;
}

.connector-modal-header {
  display: grid;
  grid-template-columns: minmax(32px, 1fr) auto minmax(32px, 1fr);
  align-items: center;
  min-height: 54px;
  padding: 12px 18px 8px;
}

.connector-modal-header h3 {
  grid-column: 2;
  margin: 0;
  font-size: var(--section-title-font-size);
  font-weight: 700;
  line-height: var(--section-title-text-height);
}

.connector-modal-header h3::before {
  content: none;
}

.connector-modal-close {
  position: relative;
  grid-column: 3;
  justify-self: end;
  display: grid;
  place-items: center;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--muted);
  font-size: 17px;
  line-height: 1;
}

.connector-modal-close > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  line-height: 1;
  transform: translateY(-0.5px);
}

.connector-modal-close:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

.connector-modal-body {
  min-height: 0;
  padding: 4px 18px 0;
  overflow-y: auto;
}

.connector-modal-body .connector-created-wrap {
  margin-top: 0;
}

.connector-create-modal #cn-verify[open] {
  z-index: 1500;
}

.connector-create-modal #cn-verify .sect-sort-pop {
  top: auto;
  bottom: calc(100% + 8px);
  z-index: 1501;
}

.connector-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px 18px;
}

.connector-modal-actions button {
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
}

.connector-create-message {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.connector-create-message.err {
  color: var(--danger);
}

@media (max-width: 720px) {
  .connector-create-modal {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
  }

  .connector-modal-card {
    max-height: calc(100dvh - 24px);
  }

  .connector-modal-header,
  .connector-modal-actions {
    padding-right: 14px;
    padding-left: 14px;
  }

  .connector-modal-body {
    padding-right: 14px;
    padding-left: 14px;
  }

  .connectors-page .cn-form {
    grid-template-columns: 1fr;
  }

  .connector-strategy-options {
    grid-template-columns: 1fr;
  }

  .connector-topic-message-options {
    grid-template-columns: 1fr;
  }

  .connector-group-picker-popover {
    min-width: 100%;
  }
}

.settings-grid {
  display: grid;
  align-items: stretch;
  gap: 18px;
  max-width: none;
  min-width: 0;
}

.settings-layout {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 20px;
  width: 100%;
  max-width: none;
  min-width: 0;
  align-items: start;
}

.settings-content {
  display: grid;
  gap: 12px;
  min-width: 0;
}

/* ── 粘性锚点导航 ───────────────────────────────────────────────────────── */
.settings-nav {
  position: sticky;
  top: calc(var(--topbar-height, 56px) + 12px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
}

.settings-nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settings-nav-group-label {
  margin: 0 0 4px;
  padding: 0 var(--sp-2);
  font-size: var(--fs-12);
  font-weight: 700;
  color: var(--fg);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.settings-nav-link {
  display: block;
  width: 100%;
  padding: 5px var(--sp-2) 5px calc(var(--sp-2) + 8px);
  border: none;
  border-left: 2px solid transparent;
  background: none;
  color: var(--muted);
  font-size: var(--fs-13);
  text-align: left;
  cursor: pointer;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}

.settings-nav-link:hover {
  color: var(--fg);
  background: var(--surface-muted);
}

.settings-nav-link.is-active {
  color: var(--accent);
  border-left-color: var(--accent);
  font-weight: 600;
}

@media (max-width: 960px) {
  .settings-layout {
    grid-template-columns: 1fr;
  }
  .settings-nav {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding: 0;
  }
  .settings-nav-group {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-1);
  }
  .settings-nav-group-label {
    margin: 0;
    padding: 0;
  }
  .settings-nav-link {
    width: auto;
    padding: 3px 10px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-full);
    font-size: var(--fs-12);
  }
  .settings-nav-link.is-active {
    border-left-color: var(--accent);
  }
}

.settings-module {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.settings-module + .settings-module {
  margin-top: 8px;
}

.settings-module-heading {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 0 2px;
}

.settings-module-heading h2,
.settings-module-heading p {
  margin: 0;
}

.settings-module-heading h2 {
  flex: none;
  color: var(--fg);
  font-size: 15px;
  font-weight: 780;
}

.settings-module-heading p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.settings-page .settings-primary-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  width: 100%;
  max-width: none;
}

.settings-page .settings-primary-grid > .settings-block {
  grid-column: span 2;
}

.settings-page .settings-primary-grid > .settings-block:nth-of-type(5) {
  grid-column: span 4;
}

.settings-page .settings-secondary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: auto;
  width: 100%;
  max-width: none;
}

.settings-group {
  min-width: 0;
  width: 100%;
}

.settings-group-card {
  display: grid;
  align-items: stretch;
  gap: 18px;
  min-width: 0;
  width: 100%;
  max-width: none;
  padding: 16px;
  box-sizing: border-box;
  overflow: visible;
}

.settings-group-main .settings-group-card {
  /* Waterfall (masonry) via CSS multi-column so a tall block (e.g. 实验性配置)
     no longer strands its row-neighbours (本地白板 / 仓库选择) with a big empty
     gap below — short blocks pack directly under the tall one in the next
     column. Blocks are independent (no cross-column state), so pure CSS columns
     are safe here; break-inside:avoid keeps each block whole. Overrides the grid
     display from the shared .settings-group-card rule above.
     `columns: <width> <count>` caps at 3 columns but drops to 2/1 when the
     viewport is too narrow to give each column its min width — otherwise an
     odd-ratio ("异形屏") narrow-but-wide screen would force 3 skinny columns and
     the block content (wide toggle labels / field-row controls) overflows into
     the neighbouring column. */
  display: block;
  columns: 300px 3;
  column-gap: 18px;
}

.settings-group-main .settings-group-card > .settings-block {
  break-inside: avoid;
  /* column layout has no row gap; space blocks with margin instead of grid gap */
  margin: 0 0 18px;
  /* avoid the 1px column-fragment wobble some engines show on avoid blocks */
  display: inline-block;
  width: 100%;
}

/* 瀑布流窄列（~1/3 宽）里，label+控件并排的 field-row 放不下：长标题（如
   「负载进入阈值（load15 / 核数）」）会把 1fr 标题列压到 ~109px，标题文字
   overflow:visible 溢出盖到右侧 input 上。窄列里改单列堆叠（标题在上、控件占满下一行），
   与移动端 field-row 的处理一致，彻底消除标题与控件的重叠。 */
.settings-group-main .settings-group-card .settings-field-row {
  grid-template-columns: 1fr;
  gap: 6px 12px;
  align-items: start;
}
.settings-group-main .settings-group-card .settings-field-row .ui-field-title {
  min-width: 0;
}

.settings-group-main .settings-vc-block {
  grid-column: span 2;
}

.settings-group-meeting .settings-group-card {
  grid-template-columns: 1fr;
}

.settings-group-meeting .settings-vc-block {
  grid-column: 1 / -1;
}

.settings-group-ops .settings-group-card {
  grid-template-columns: minmax(360px, 5fr) minmax(0, 7fr);
}

.settings-group-card > .settings-block {
  min-height: 0;
}

.settings-group-card > .settings-block > .settings-card {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.settings-group-main .settings-card {
  align-content: start;
}

.settings-vc-block .settings-card {
  grid-template-columns: max-content minmax(280px, 1fr);
  align-items: center;
  column-gap: 18px;
}

.settings-vc-block .settings-block-title-row {
  grid-column: 1 / -1;
}

.settings-vc-block .settings-field-row {
  grid-template-columns: auto minmax(190px, 1fr);
}

.settings-vc-block .settings-lark-cli-status,
.settings-vc-block .settings-feishu-login {
  grid-column: 1 / -1;
}

.settings-lark-cli-status {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  min-height: var(--button-height);
  padding: 6px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.35;
}

.settings-lark-cli-status > span {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: var(--radius-full);
  background: currentColor;
}

.settings-lark-cli-status strong {
  min-width: 0;
  font-weight: 700;
}

.settings-lark-cli-status code {
  flex: none;
  padding: 2px 6px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, currentColor 8%, transparent);
  color: inherit;
  font-size: 10.5px;
}

.settings-lark-cli-status.is-ready {
  border-color: color-mix(in srgb, var(--success) 32%, var(--border-soft));
  background: color-mix(in srgb, var(--success) 8%, var(--surface));
  color: var(--success);
}

.settings-lark-cli-status.is-warning {
  border-color: color-mix(in srgb, var(--warning) 34%, var(--border-soft));
  background: color-mix(in srgb, var(--warning) 8%, var(--surface));
  color: var(--warning);
}

.settings-feishu-login {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border-soft));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.settings-feishu-login p {
  max-width: 520px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

.settings-feishu-login img {
  display: block;
  width: min(200px, 60vw);
  height: auto;
  border: 8px solid var(--qr-surface);
  border-radius: var(--radius-lg);
  background: var(--qr-surface);
}

.settings-feishu-login-close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
}

.settings-feishu-login-close::before,
.settings-feishu-login-close::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  border-radius: var(--radius-full);
  background: currentColor;
  content: '';
}

.settings-feishu-login-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.settings-feishu-login-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.settings-feishu-login-close:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--accent);
}

.settings-alert-card,
.settings-status-row {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 900;
  pointer-events: none;
}

.settings-status-row .oncall-status {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  box-shadow: var(--sh-md);
  font-size: var(--fs-12);
  transition: opacity var(--t-norm), transform var(--t-norm);
}

.settings-status-row .oncall-status:empty {
  opacity: 0;
  transform: translateY(4px);
}

.settings-status-row .oncall-status.hint-ok {
  border-color: color-mix(in srgb, var(--success, var(--st-ok)) 40%, var(--border-soft));
  color: var(--success, var(--st-ok));
}

.settings-block {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  min-width: 0;
  width: 100%;
  height: 100%;
}

.settings-block > .sect-head {
  height: var(--section-title-row-height);
  min-height: var(--section-title-row-height);
}

.settings-card {
  display: grid;
  row-gap: 8px;
  column-gap: 12px;
  padding: 16px;
  overflow: visible;
  min-width: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  box-sizing: border-box;
  align-content: start;
}

.settings-page .settings-primary-grid .settings-card {
  align-content: center;
}

.settings-card .bd-section-title {
  margin: 0;
}

.settings-block-title-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-width: 0;
}

.settings-block-title-extra {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 0;
}

.settings-title-note {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  max-width: min(520px, 100%);
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--warning) 26%, transparent);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--warning) 10%, transparent);
  color: var(--warning);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
}

.skills-page .bd-section-title::before,
.skills-page .sect-head h2::before,
.team-page .sect-head h2::before,
.connectors-page .sect-head h2::before {
  width: 3px;
  height: 14px;
  flex: 0 0 3px;
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 38%, var(--border)));
}

.settings-page .bd-section-title::before,
.page.settings-page .settings-card > .bd-section-title::before {
  width: var(--section-title-dot-size);
  height: var(--section-title-dot-size);
  flex: 0 0 var(--section-title-dot-size);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 88%, #fff) 0 22%, transparent 23%),
    linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 38%, var(--border)));
}

.settings-card .toggle-row {
  align-items: center;
  min-height: 42px;
  padding: 8px 0;
  border-top: 1px solid color-mix(in srgb, var(--border-soft) 70%, transparent);
}

.settings-card .toggle-row:first-of-type {
  border-top: 0;
}

.settings-card .toggle-row input:checked + .switch {
  box-shadow: none;
}

.settings-card .toggle-tx strong {
  display: block;
  font-size: 12.5px;
}

.settings-card .toggle-tx {
  min-width: 0;
}

.settings-card .toggle-tx strong {
  overflow-wrap: anywhere;
}

.settings-card .settings-toggle-title {
  font-weight: 700;
}

.settings-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.settings-field-row .ui-field-title {
  min-width: 0;
}

.settings-maintenance-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 12px;
  min-width: 0;
}

.settings-maintenance-update,
.settings-maintenance-restart {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
}

.settings-maintenance-update {
  grid-template-columns: max-content auto;
  align-items: center;
  justify-content: start;
  column-gap: 16px;
}

.settings-maintenance-grid .toggle-row {
  border-top: 0;
}

.settings-card .maint-time label {
  display: grid;
  grid-template-columns: auto minmax(160px, 220px);
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.settings-page .settings-card .maint-time input[type="time"] {
  box-sizing: border-box;
  width: 100%;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full) !important;
  background: var(--surface);
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  box-shadow: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.settings-page .settings-text-input {
  box-sizing: border-box;
  width: 100%;
  height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.settings-page .settings-text-input:disabled { opacity: 0.5; }

.settings-page .settings-subfield {
  display: grid;
  gap: 8px;
  padding: 8px 0 2px;
  min-width: 0;
}
.settings-page .settings-group-prefix-editor .settings-field-row {
  grid-template-columns: 1fr;
  align-items: start;
  gap: 8px;
}
.settings-page .settings-subfield-hint {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  word-break: break-all;
}
.settings-page .settings-codex-notifier-details {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 4px 0 2px;
}
.settings-page .settings-inline-link {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  word-break: break-all;
}
.settings-page .settings-inline-link:disabled { opacity: 0.5; cursor: default; }

.settings-page .settings-card .maint-time input[type="time"]:disabled {
  opacity: 1;
  background: color-mix(in srgb, var(--surface) 86%, var(--surface-muted));
  color: var(--muted);
}

.settings-page .settings-card .maint-time input[type="time"]::-webkit-date-and-time-value {
  min-height: var(--button-height);
  line-height: var(--button-height);
  text-align: left;
}

.settings-page .settings-card .maint-time input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: 0.72;
}

.settings-update-block .settings-card {
  display: flex;
  flex-direction: column;
}

.settings-update-block .update-version {
  min-height: 42px;
  margin: 0;
  align-items: center;
}

.settings-update-block .hint-warn {
  margin: 4px 0 0;
}

.settings-update-block .update-actions {
  justify-content: flex-end;
  align-self: flex-end;
  min-height: 42px;
  margin-top: 0;
}

.update-actions .page-primary-action {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border-soft));
  background: transparent;
  color: var(--accent);
}

.update-actions .page-primary-action:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

.office-load-button {
  border-radius: var(--radius-full);
}

.office-frame-shell {
  box-sizing: border-box;
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: #0b0d12;
}

.office-game-frame {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: inherit;
  background: #0b0d12;
}

main:has(.office-frame-shell) {
  padding-bottom: 0;
  overflow: hidden;
}

input.office-proxy-input[type="text"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]) {
  box-sizing: border-box;
  width: 100%;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  margin-bottom: 12px;
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  box-shadow: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

input.office-proxy-input[type="text"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):hover:not(:disabled),
input.office-proxy-input[type="text"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):focus,
input.office-proxy-input[type="text"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
  box-shadow: none;
  outline: none;
}

@media (max-width: 980px) {
  .page-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .page-heading > :first-child,
  .skills-section-head > div:first-child {
    display: grid;
    align-items: start;
    gap: 4px;
  }

  .page-heading p:not(.eyebrow),
  .skills-section-head p {
    max-width: 100%;
    margin: 0;
  }

  .page :where(.bd-section-title, .bd-subsection-title) + .bd-section-note {
    display: block;
    max-width: 100%;
    margin: 6px 0 0;
  }

  .page-heading-actions,
  .insight-head-acts {
    width: 100%;
    justify-content: flex-start;
  }

  .connectors-page .cn-form,
  .settings-grid,
  .wb-split {
    grid-template-columns: 1fr;
  }

  .settings-page .settings-primary-grid,
  .settings-page .settings-secondary-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .settings-group-main .settings-group-card {
    column-count: 1;
  }

  .settings-group-ops .settings-group-card {
    grid-template-columns: 1fr;
  }

  .settings-group-main .settings-vc-block {
    grid-column: 1 / -1;
  }

  .settings-vc-block .settings-card,
  .settings-vc-block .settings-field-row {
    grid-template-columns: 1fr;
  }

  .settings-lark-cli-status {
    align-items: flex-start;
    flex-wrap: wrap;
    width: 100%;
    border-radius: var(--radius-lg);
  }

  .settings-lark-cli-status code {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .settings-block-title-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .settings-module-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .settings-block-title-extra {
    width: 100%;
    justify-content: flex-start;
    margin-left: 0;
  }

  .settings-title-note {
    max-width: 100%;
    text-align: left;
  }

  .settings-page .settings-primary-grid > .settings-block,
  .settings-page .settings-primary-grid > .settings-block:nth-of-type(5) {
    grid-column: 1 / -1;
  }

  .settings-field-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .settings-maintenance-grid {
    grid-template-columns: 1fr;
  }

  .settings-maintenance-update {
    grid-template-columns: 1fr;
  }

  .connectors-page .cn-form > label,
  .connectors-page .cn-field {
    margin-top: 2px;
  }

  .team-bot-row,
  .connector-url-row,
  .connector-chat-control {
    grid-template-columns: 1fr;
  }

  .team-check-pill,
  .connector-item-actions,
  .team-manage-actions {
    margin-left: 0;
  }
}

/* ── Webhook invocation logs ─────────────────────────────────────────────── */
.webhook-logs-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.webhook-logs-panel {
  height: 100%;
  overflow: hidden;
}

.webhook-log-heading-copy {
  max-width: 760px;
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.webhook-log-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: var(--button-height);
  padding: 0 10px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.webhook-log-live i {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--success);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 12%, transparent);
}

.webhook-log-live.refreshing i {
  animation: webhook-log-pulse 900ms ease-in-out infinite alternate;
}

@keyframes webhook-log-pulse {
  to { opacity: .4; transform: scale(.76); }
}

.webhook-log-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.webhook-log-metric {
  position: relative;
  display: grid;
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding: 13px 15px;
  overflow: hidden;
}

.webhook-log-metric::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--accent);
  opacity: .7;
}

.webhook-log-metric.ok::before { background: var(--success); }
.webhook-log-metric.error::before { background: var(--danger); }
.webhook-log-metric > span,
.webhook-log-metric > small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.webhook-log-metric > strong {
  color: var(--fg);
  font-size: 23px;
  line-height: 1.15;
}
.webhook-log-metric.error > strong { color: var(--danger); }

.webhook-logs-content form.webhook-log-toolbar {
  display: grid;
  grid-template-columns: minmax(340px, 1.6fr) minmax(180px, 0.72fr) minmax(150px, 0.62fr) minmax(170px, 0.72fr) auto;
  gap: 8px;
  margin: 0;
  padding-block: 4px;
}

.webhook-logs-content form.webhook-log-toolbar > input[type="search"] {
  width: 100%;
  min-width: 0;
}

.webhook-logs-content form.webhook-log-toolbar > .webhook-log-filter-menu {
  width: 100%;
  min-width: 0;
}
.webhook-logs-content form.webhook-log-toolbar > .webhook-log-filter-menu > summary {
  box-sizing: border-box;
  width: 100%;
  justify-content: flex-start;
  padding-block: 2px;
}
.webhook-logs-content form.webhook-log-toolbar > .webhook-log-filter-menu .sect-sort-value {
  max-width: calc(100% - 2px);
}
.webhook-logs-content form.webhook-log-toolbar > .webhook-log-filter-menu .sect-sort-pop {
  left: 0;
  width: max(100%, 220px);
  min-width: 100%;
  transform: none;
}
.webhook-log-refresh { white-space: nowrap; }
.webhook-log-error { margin: 0; }

.webhook-log-workspace {
  display: grid;
  grid-template-columns: minmax(350px, 430px) minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  min-height: 520px;
}

.webhook-log-list-panel,
.webhook-log-detail-panel {
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.webhook-log-list-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.webhook-log-panel-head {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border-soft);
}
.webhook-log-panel-head > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.webhook-log-panel-head strong { font-size: 13px; }
.webhook-log-panel-head span { color: var(--muted); font-size: 11.5px; }

.webhook-log-list {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

button.webhook-log-row {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 72px;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  border-radius: 0;
  background: transparent;
  color: var(--fg);
  box-shadow: none;
  text-align: left;
}
button.webhook-log-row:hover,
button.webhook-log-row.active {
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  transform: none;
}
button.webhook-log-row.active {
  box-shadow: inset 3px 0 0 var(--accent);
}

.webhook-log-status-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--faint);
}
.webhook-log-status-dot.ok { background: var(--success); }
.webhook-log-status-dot.error { background: var(--danger); }
.webhook-log-row-main { display: grid; gap: 6px; min-width: 0; }
.webhook-log-row-title,
.webhook-log-row-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.webhook-log-row-title strong {
  min-width: 0;
  overflow: hidden;
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.webhook-log-row-title code {
  flex: none;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 10px;
}
.webhook-log-row-meta {
  color: var(--muted);
  font-size: 10.5px;
}
.webhook-log-row-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.webhook-log-row-result { display: grid; justify-items: end; gap: 5px; }
.webhook-log-row-result b { color: var(--muted); font-size: 12px; }
.webhook-log-row-result b.ok { color: var(--success); }
.webhook-log-row-result b.error { color: var(--danger); }
.webhook-log-row-result small { color: var(--muted); font-size: 10.5px; }
.webhook-log-more { margin: 10px auto; }

.webhook-log-empty {
  display: grid;
  place-content: center;
  place-items: center;
  gap: 7px;
  min-height: 220px;
  padding: 24px;
  color: var(--muted);
  text-align: center;
}
.webhook-log-empty > span { color: var(--accent); font-size: 26px; }
.webhook-log-empty strong { color: var(--fg); font-size: 13px; }
.webhook-log-empty p { max-width: 360px; margin: 0; font-size: 12px; }

.webhook-log-detail-panel {
  overflow-y: auto;
}
.webhook-log-detail-head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 16px;
  border-bottom: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(10px);
}
.webhook-log-detail-head > div { display: grid; gap: 5px; min-width: 0; }
.webhook-log-detail-head h2 { margin: 0; font-size: 17px; }
.webhook-log-detail-head p {
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.webhook-log-result-pill {
  justify-self: start;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 750;
}
.webhook-log-result-pill.ok { background: var(--success-soft); color: var(--success); }
.webhook-log-result-pill.error { background: var(--danger-soft); color: var(--danger); }

.webhook-log-failure {
  display: grid;
  gap: 4px;
  margin: 14px 16px 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--border-soft));
  border-radius: var(--radius-lg);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 12px;
}

.webhook-log-detail-section {
  display: grid;
  gap: 9px;
  margin: 0 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--border-soft);
}
.webhook-log-detail-section:last-child { border-bottom: 0; padding-bottom: 18px; }
.webhook-log-detail-section h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 12.5px;
}
.webhook-log-detail-section h3 small {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
}

.webhook-log-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
.webhook-log-facts > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
}
.webhook-log-facts dt { color: var(--muted); font-size: 10.5px; }
.webhook-log-facts dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.webhook-log-facts code { padding: 0; background: transparent; font-size: 10.5px; }

.webhook-log-target-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
.webhook-log-target-facts > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
}
.webhook-log-target-facts dt { color: var(--muted); font-size: 10.5px; }
.webhook-log-target-facts dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.webhook-log-target-facts code {
  padding: 0;
  background: transparent;
  font-size: 10.5px;
  white-space: normal;
  word-break: break-word;
}

.webhook-log-json {
  box-sizing: border-box;
  max-height: 300px;
  margin: 0;
  padding: 11px 12px;
  overflow: auto;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
  color: var(--fg);
  font-size: 11px;
  line-height: 1.55;
  tab-size: 2;
  white-space: pre-wrap;
  word-break: break-word;
}
.webhook-log-json.full-height {
  max-height: none;
}
.webhook-log-detail-empty { margin: 0; color: var(--muted); font-size: 12px; }

@media (min-width: 981px) {
  main:has(.webhook-logs-page) {
    padding-bottom: 0;
    overflow: hidden;
  }
  main:has(.webhook-logs-page) .webhook-logs-page {
    height: 100%;
    overflow: hidden;
  }
  .webhook-log-workspace {
    flex: 1 1 0;
    min-height: 0;
  }
}

@media (max-width: 1200px) {
  .webhook-logs-content form.webhook-log-toolbar { grid-template-columns: minmax(220px, 1fr) 170px 140px 155px auto; }
  .webhook-log-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .webhook-log-target-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .webhook-log-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .webhook-logs-content form.webhook-log-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .webhook-logs-content form.webhook-log-toolbar > input[type="search"] { grid-column: 1 / -1; }
  .webhook-log-workspace { grid-template-columns: 1fr; }
  .webhook-log-list-panel { max-height: 520px; }
  .webhook-log-detail-panel { max-height: none; }
  .webhook-log-detail-head { position: static; }
}

@media (max-width: 600px) {
  .webhook-log-metrics,
  .webhook-logs-content form.webhook-log-toolbar,
  .webhook-log-facts,
  .webhook-log-target-facts { grid-template-columns: 1fr; }
  .webhook-logs-content form.webhook-log-toolbar > input[type="search"] { grid-column: auto; }
  .webhook-log-live { display: none; }
  .webhook-log-detail-head { grid-template-columns: 1fr; }
  .webhook-log-detail-head > button { justify-self: start; }
}

/* ════════════════════════════════════════════════════════════════════════════
   "2077" CYBERPUNK SKIN
   Distilled from the kaboo webui (frontend/src/styles/cyberpunk.css). The whole
   dashboard is variable-driven, so re-pointing the design tokens under
   :root[data-skin="cyber"] re-skins every component; the rest of this section
   adds the neon flourishes (grid, scanlines, data-rain, glow, sharp corners).
   Placed last in the file so it wins over the light/dark token blocks via source
   order (equal specificity). The light/dark mode is intentionally ignored here —
   2077 ships its own dark neon palette.
   ════════════════════════════════════════════════════════════════════════════ */

:root[data-skin="cyber"] {
  color-scheme: dark;
  --bg: hsl(240 44% 6%);
  --bg-soft: hsl(240 40% 8%);
  --surface: hsl(236 40% 9% / 0.72);
  --surface-raised: hsl(238 42% 12% / 0.84);
  --surface-muted: hsl(236 30% 14% / 0.7);
  --fg: hsl(188 72% 88%);
  --muted: hsl(196 30% 64%);
  --faint: hsl(196 22% 52%);
  --border: hsl(196 82% 44% / 0.5);
  --border-soft: hsl(196 70% 40% / 0.3);
  --accent: hsl(186 100% 56%);
  --accent-strong: hsl(186 100% 72%);
  --accent-soft: hsl(186 100% 52% / 0.16);
  --success: hsl(150 85% 58%);
  --success-soft: hsl(150 85% 50% / 0.16);
  --warning: hsl(56 97% 60%);
  --warning-soft: hsl(56 97% 52% / 0.16);
  --danger: hsl(330 100% 64%);
  --danger-soft: hsl(330 100% 58% / 0.18);
  --on-accent: hsl(240 60% 6%);
  --on-danger: hsl(240 60% 6%);
  --modal-shadow: 0 24px 80px hsl(240 70% 2% / 0.7), 0 0 36px hsl(186 100% 52% / 0.18);
  --modal-backdrop: hsl(240 60% 3% / 0.72);
  --qr-surface: #ffffff;
  --shadow: 0 14px 40px hsl(240 70% 3% / 0.55), 0 0 0 1px hsl(186 100% 52% / 0.06);
  --radius: 4px;
}

:root[data-skin="cyber"] body {
  background-color: hsl(240 46% 5%);
  background-image: linear-gradient(
    180deg,
    hsl(240 44% 6%) 0%,
    hsl(252 46% 4%) 58%,
    hsl(240 48% 5%) 100%
  );
  background-attachment: fixed;
  color: var(--fg);
}

/* Lift the real UI above the fixed FX layer (the FX sits at z-index:0). */
:root[data-skin="cyber"] .app-shell {
  position: relative;
  z-index: 1;
}

/* ── Fixed background FX: neon grid + glow + scanlines + vignette + data-rain ─ */
.cyber-fx {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.cyber-fx-grid {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 78% 112%, hsl(186 100% 52% / 0.18), transparent 44%),
    radial-gradient(ellipse at 16% 104%, hsl(330 100% 58% / 0.16), transparent 42%),
    linear-gradient(0deg, hsl(56 97% 52% / 0.05), transparent 28%),
    repeating-linear-gradient(0deg, hsl(186 100% 52% / 0.05) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, hsl(330 100% 58% / 0.04) 0 1px, transparent 1px 44px);
  opacity: 0.85;
}

.cyber-fx-scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    hsl(186 100% 52% / 0.04) 0 1px,
    transparent 1px 3px
  );
  opacity: 0.6;
}

/* CRT vignette darkens the corners. */
.cyber-fx::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 44%, transparent 55%, hsl(240 70% 3% / 0.6) 100%);
}

.cyber-rain {
  position: absolute;
  inset: 0;
}

.cyber-rain-col {
  position: absolute;
  top: 0;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: var(--mono);
  font-size: var(--sz, 14px);
  line-height: 1;
  letter-spacing: 1px;
  color: hsl(var(--rc, 186 100% 60%));
  opacity: var(--op, 0.4);
  text-shadow: 0 0 6px hsl(var(--rc, 186 100% 60%) / 0.7);
  white-space: nowrap;
  /* bright leading glyph (bottom) → fading trail (top) */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 55%, #fff 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 55%, #fff 100%);
  animation: cyber-rain-fall var(--dur, 8s) linear var(--delay, 0s) infinite;
  will-change: transform;
}

@keyframes cyber-rain-fall {
  from { transform: translateY(-115%); }
  to { transform: translateY(115vh); }
}

@media (prefers-reduced-motion: reduce) {
  .cyber-rain-col { animation: none; opacity: 0.12; }
}

/* ── Chrome: glassy neon sidebar + topbar ───────────────────────────────────*/
:root[data-skin="cyber"] .sidebar {
  background: hsl(240 40% 7% / 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border-right-color: hsl(186 90% 50% / 0.28);
}

:root[data-skin="cyber"] .topbar {
  background: hsl(240 40% 6% / 0.7);
  border-bottom-color: hsl(186 90% 50% / 0.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
}

:root[data-skin="cyber"] .brand-mark {
  background: linear-gradient(135deg, hsl(186 100% 52%), hsl(330 100% 60%));
  color: hsl(240 60% 6%);
  border-radius: 4px;
  box-shadow: 0 0 14px hsl(186 100% 52% / 0.5);
}

:root[data-skin="cyber"] .brand strong {
  font-family: var(--mono);
  letter-spacing: 1px;
  text-shadow: 0 0 12px hsl(186 100% 60% / 0.45);
}

/* ── Navigation: neon active rail ───────────────────────────────────────────*/
:root[data-skin="cyber"] .sidebar-nav a:hover {
  background: hsl(186 100% 52% / 0.08);
  color: var(--accent-strong);
}

:root[data-skin="cyber"] .sidebar-nav a.active {
  background: transparent;
  color: hsl(186 100% 74%);
  box-shadow: none;
}

:root[data-skin="cyber"] .sidebar-nav a.active::before {
  background: linear-gradient(135deg, hsl(186 80% 26% / 0.45), hsl(330 70% 24% / 0.3));
}

/* ── Headings ───────────────────────────────────────────────────────────────*/
:root[data-skin="cyber"] .page-heading h1 {
  font-family: var(--mono);
  text-shadow: 0 0 18px hsl(186 100% 60% / 0.35);
}

:root[data-skin="cyber"] .eyebrow {
  color: var(--warning) !important;
  text-shadow: 0 0 10px hsl(56 97% 60% / 0.4);
}

/* ── Cards & metrics: faint inner neon edge + glowing figures ────────────────*/
:root[data-skin="cyber"] .panel,
:root[data-skin="cyber"] .metric-card,
:root[data-skin="cyber"] .bd-card {
  border-color: hsl(196 82% 44% / 0.4);
  box-shadow: var(--shadow), inset 0 1px 0 hsl(186 100% 60% / 0.07);
}

:root[data-skin="cyber"] .metric-card strong {
  color: var(--accent-strong);
  text-shadow: 0 0 14px hsl(186 100% 60% / 0.4);
}

/* ── Primary actions: neon gradient ─────────────────────────────────────────*/
:root[data-skin="cyber"] .btn-link.primary,
:root[data-skin="cyber"] button.primary {
  background: linear-gradient(135deg, hsl(186 100% 52%), hsl(56 97% 56%));
  color: hsl(240 60% 6%);
  border-color: hsl(186 100% 56%);
  box-shadow: 0 0 16px hsl(186 100% 52% / 0.3);
}

/* ── Segmented switchers (incl. the skin switcher itself) ────────────────────*/
:root[data-skin="cyber"] .segmented {
  border-color: hsl(186 80% 46% / 0.35);
  background: hsl(240 36% 9% / 0.6);
}

:root[data-skin="cyber"] .segmented button.active {
  background: linear-gradient(135deg, hsl(186 100% 52%), hsl(186 100% 62%));
  color: hsl(240 60% 6%);
  box-shadow: 0 0 12px hsl(186 100% 52% / 0.35);
}

:root[data-skin="cyber"] .sessions-page {
  --sessions-switch-active-fg: var(--brand-accent);
}

:root[data-skin="cyber"] .dashboard-toolbar {
  --dashboard-toolbar-active-fg: var(--brand-accent);
}

:root[data-skin="cyber"] .sessions-page .sessions-view-controls :where(.kanban-groupby, .sessions-view-toggle) button.active,
:root[data-skin="cyber"] .sessions-page .sessions-view-controls :where(.kanban-groupby, .sessions-view-toggle) button[aria-pressed="true"] {
  background: var(--sessions-switch-active-bg);
  color: var(--sessions-switch-active-fg);
  box-shadow: none;
}

:root[data-skin="cyber"] .dashboard-toolbar .segmented button.active,
:root[data-skin="cyber"] .dashboard-toolbar .segmented button[aria-pressed="true"],
:root[data-skin="cyber"] .team-subnav.dashboard-toolbar a.active {
  background: var(--dashboard-toolbar-active-bg);
  color: var(--dashboard-toolbar-active-fg);
  box-shadow: none;
}

/* CLI badges: fold the light hard-coded palette into the neon surface tokens
   (mirrors the existing dark-theme treatment). */
:root[data-skin="cyber"] .cli-claude-code,
:root[data-skin="cyber"] .cli-codex,
:root[data-skin="cyber"] .cli-codex-app,
:root[data-skin="cyber"] .cli-cursor,
:root[data-skin="cyber"] .cli-gemini,
:root[data-skin="cyber"] .cli-opencode,
:root[data-skin="cyber"] .cli-mtr,
:root[data-skin="cyber"] .cli-hermes,
:root[data-skin="cyber"] .cli-mira,
:root[data-skin="cyber"] .cli-pi,
:root[data-skin="cyber"] .cli-aiden,
:root[data-skin="cyber"] .cli-coco {
  background: var(--surface-muted);
  color: var(--fg);
  border-color: var(--border);
}

/* Themed form controls in 2077 — inner glow + accent-cyan focus ring. */
:root[data-skin="cyber"] input:not([type=checkbox]):not([type=radio]),
:root[data-skin="cyber"] select,
:root[data-skin="cyber"] textarea {
  background-color: hsl(240 36% 9% / 0.7);
  box-shadow: inset 0 0 12px hsl(186 100% 52% / 0.06);
}
:root[data-skin="cyber"] input:focus,
:root[data-skin="cyber"] select:focus,
:root[data-skin="cyber"] textarea:focus {
  box-shadow: 0 0 0 3px hsl(186 100% 52% / 0.18), 0 0 14px hsl(186 100% 52% / 0.25);
}

/* ════════════════════════════════════════════════════════════════════════════
   2077 MOTION FX — CRT flicker / roll line, HUD frame, random glitches, and the
   KIROSHI NETLINK boot loader. Ported from kaboo's cyberpunk.css. DOM nodes are
   injected by cyber-fx.ts only while the skin is active.
   ════════════════════════════════════════════════════════════════════════════ */

/* CRT flicker + scrolling roll line (inside the behind-content #cyber-fx). */
.cyber-flicker {
  position: absolute;
  inset: 0;
  background: hsl(186 100% 52% / 0.04);
  mix-blend-mode: screen;
  animation: cyber-flicker 0.18s steps(2, end) infinite;
}

@keyframes cyber-flicker {
  0% { opacity: 0.85; }
  100% { opacity: 0.42; }
}

.cyber-rollline {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, hsl(330 100% 64% / 0.5), transparent);
  box-shadow: 0 0 12px hsl(330 100% 64% / 0.4);
  opacity: 0.5;
  animation: cyber-roll 9s linear infinite;
}

@keyframes cyber-roll {
  0% { transform: translateY(-6vh); opacity: 0; }
  8% { opacity: 0.5; }
  60% { opacity: 0.5; }
  72%, 100% { transform: translateY(112vh); opacity: 0; }
}

/* Full-screen HUD corner brackets + NETWATCH tag (above content). */
.cyber-hud {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}

.cyber-hud-corner {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 2px solid hsl(186 100% 60% / 0.55);
  opacity: 0.7;
  filter: drop-shadow(0 0 6px hsl(186 100% 52% / 0.4));
}

.cyber-hud-corner.tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.cyber-hud-corner.tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; }
.cyber-hud-corner.bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; }
.cyber-hud-corner.br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }

.cyber-hud-tag {
  position: absolute;
  left: 16px;
  bottom: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: hsl(56 97% 64% / 0.6);
  text-shadow: 0 0 8px hsl(56 97% 52% / 0.5);
}

/* Random page-glitch overlay (above content); cp-fx-* on <body> drive it. */
.cyber-glitch {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
}

body.cp-fx-tear .cyber-glitch {
  background: linear-gradient(
    180deg,
    transparent 0 46%,
    hsl(330 100% 60% / 0.6) 46% 48%,
    hsl(186 100% 60% / 0.6) 48% 50%,
    hsl(56 96% 58% / 0.45) 50% 52%,
    transparent 52%
  );
  animation: cp-fx-tear 0.4s steps(2, end);
}

@keyframes cp-fx-tear {
  0% { opacity: 0; transform: translateY(0); }
  15% { opacity: 0.9; transform: translateY(-26vh) translateX(-8px); }
  35% { opacity: 0.5; transform: translateY(28vh) translateX(9px); }
  55% { opacity: 0.85; transform: translateY(8vh) translateX(-5px); }
  75% { opacity: 0.4; transform: translateY(-14vh) translateX(6px); }
  100% { opacity: 0; transform: translateY(40vh); }
}

body.cp-fx-invert .cyber-glitch {
  mix-blend-mode: difference;
  background: hsl(186 100% 60%);
  animation: cp-fx-invert 0.22s steps(1, end);
}

@keyframes cp-fx-invert {
  0%, 100% { opacity: 0; }
  25% { opacity: 0.95; }
  50% { opacity: 0.1; }
  75% { opacity: 0.7; }
}

body.cp-fx-blackout .cyber-glitch {
  mix-blend-mode: normal;
  background: hsl(240 40% 2%);
  animation: cp-fx-blackout 0.26s steps(1, end);
}

@keyframes cp-fx-blackout {
  0%, 100% { opacity: 0; }
  18% { opacity: 0.92; }
  34% { opacity: 0.08; }
  52% { opacity: 0.85; }
  70% { opacity: 0; }
}

body.cp-fx-shake main { animation: cp-fx-shake 0.28s steps(1, end); }

@keyframes cp-fx-shake {
  0%, 100% { transform: translate(0, 0) skewX(0deg); }
  15% { transform: translate(-3px, 1px) skewX(0.6deg); }
  30% { transform: translate(4px, -2px) skewX(-0.8deg); }
  45% { transform: translate(-2px, 1px); }
  60% { transform: translate(3px, 0) skewX(0.5deg); }
  80% { transform: translate(-1px, -1px); }
}

body.cp-fx-rgb main { animation: cp-fx-rgb 0.34s steps(2, end); }

@keyframes cp-fx-rgb {
  0%, 100% { filter: none; transform: none; }
  25% {
    filter: drop-shadow(3px 0 hsl(330 100% 60% / 0.7)) drop-shadow(-3px 0 hsl(186 100% 60% / 0.7));
    transform: translateX(-2px);
  }
  50% {
    filter: drop-shadow(-4px 0 hsl(330 100% 60% / 0.6)) drop-shadow(4px 0 hsl(186 100% 60% / 0.6));
    transform: translateX(2px);
  }
  75% {
    filter: drop-shadow(2px 0 hsl(330 100% 60% / 0.7)) drop-shadow(-2px 0 hsl(186 100% 60% / 0.7));
  }
}

body.cp-fx-slice main { animation: cp-fx-slice 0.32s steps(2, end); }

@keyframes cp-fx-slice {
  0%, 100% { transform: none; }
  20% { transform: translateX(-12px) skewX(7deg); }
  40% { transform: translateX(10px) skewX(-5deg); }
  60% { transform: translateX(-6px) skewX(3deg); }
  80% { transform: translateX(4px) skewX(-1deg); }
}

/* ── Boot decrypt loader (plays once when switching into 2077) ───────────────*/
.cyber-boot {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, hsl(252 50% 6%) 0%, hsl(252 60% 3%) 100%),
    repeating-linear-gradient(0deg, hsl(186 100% 52% / 0.06) 0 1px, transparent 1px 3px);
  animation: cyber-boot-fade 3.2s ease forwards;
}

.cyber-boot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 50%, hsl(252 70% 2% / 0.85) 100%);
}

.cyber-boot-grid {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, hsl(186 100% 52% / 0.05) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, hsl(330 100% 58% / 0.04) 0 1px, transparent 1px 40px);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 28%, transparent 74%);
  mask-image: radial-gradient(ellipse at center, #000 28%, transparent 74%);
  animation: cyber-grid-pan 3.2s linear;
}

@keyframes cyber-boot-fade {
  0%, 84% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes cyber-blink { 50% { opacity: 0; } }

@keyframes cyber-grid-pan {
  from { background-position: 0 -40px, -40px 0; opacity: 0.3; }
  to { background-position: 0 0, 0 0; opacity: 1; }
}

.cyber-loader {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-family: var(--mono);
}

.cyber-loader-frame {
  position: relative;
  width: min(440px, 86vw);
  padding: 16px 22px;
  overflow: hidden;
  color: hsl(186 100% 72%);
  background: linear-gradient(135deg, hsl(252 50% 8% / 0.92), hsl(240 60% 5% / 0.94));
  border: 1px solid hsl(186 100% 52% / 0.4);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  box-shadow: 0 0 36px hsl(186 100% 52% / 0.18), inset 0 0 50px hsl(186 100% 52% / 0.06);
  text-shadow: 0 0 8px hsl(186 100% 52% / 0.45);
}

.cyber-loader-frame::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -40%;
  width: 40%;
  height: 2px;
  background: linear-gradient(90deg, transparent, hsl(56 96% 56%), transparent);
  box-shadow: 0 0 10px hsl(56 96% 56% / 0.7);
  animation: cyber-loader-scan 1.6s linear infinite;
}

@keyframes cyber-loader-scan {
  from { left: -40%; }
  to { left: 100%; }
}

.cyber-loader-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid hsl(186 100% 52% / 0.22);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: hsl(56 96% 70%);
}

.cyber-loader-jp { color: hsl(330 100% 70% / 0.7); letter-spacing: 0.28em; }

.cyber-loader-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: clamp(13px, 2.4vw, 16px);
}

.cyber-loader-prompt { color: hsl(56 96% 64%); }

.cyber-loader-text {
  letter-spacing: 0.08em;
  color: hsl(186 100% 80%);
  transition: color 0.2s ease;
}

.cyber-loader-text.done {
  color: hsl(56 96% 80%);
  text-shadow: 0 0 10px hsl(56 96% 56% / 0.6);
}

.cyber-loader-cursor {
  color: hsl(56 96% 70%);
  animation: cyber-blink 1s steps(1, end) infinite;
}

.cyber-loader-stream {
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 2px;
  color: hsl(186 60% 52% / 0.6);
  white-space: nowrap;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .cyber-flicker,
  .cyber-rollline,
  .cyber-glitch,
  .cyber-boot,
  .cyber-boot-grid,
  .cyber-loader-frame::after,
  .cyber-loader-cursor,
  body.cp-fx-shake main,
  body.cp-fx-rgb main,
  body.cp-fx-slice main {
    animation: none;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   FALLOUT SKIN — Pip-Boy phosphor green terminal on near-black.
   ════════════════════════════════════════════════════════════════════════════ */
:root[data-skin="fallout"] {
  color-scheme: dark;
  --bg: hsl(140 32% 5%);
  --bg-soft: hsl(140 30% 7%);
  --surface: hsl(140 26% 8%);
  --surface-raised: hsl(140 26% 11%);
  --surface-muted: hsl(140 22% 13%);
  --fg: hsl(140 84% 80%);
  --muted: hsl(140 28% 56%);
  --faint: hsl(140 22% 44%);
  --border: hsl(140 48% 22%);
  --border-soft: hsl(140 45% 17%);
  --accent: hsl(138 92% 52%);
  --accent-strong: hsl(138 92% 66%);
  --accent-soft: hsl(138 92% 52% / 0.15);
  --success: hsl(120 80% 55%);
  --success-soft: hsl(120 70% 50% / 0.16);
  --warning: hsl(44 96% 56%);
  --warning-soft: hsl(44 96% 52% / 0.16);
  --danger: hsl(8 90% 62%);
  --danger-soft: hsl(8 88% 55% / 0.18);
  --on-accent: hsl(140 40% 6%);
  --on-danger: hsl(140 40% 6%);
  --modal-shadow: 0 24px 80px hsl(140 60% 2% / 0.7), 0 0 30px hsl(138 92% 52% / 0.12);
  --modal-backdrop: hsl(140 50% 2% / 0.7);
  --qr-surface: #ffffff;
  --shadow: 0 14px 40px hsl(140 60% 2% / 0.6);
  --radius: 2px;
}

:root[data-skin="fallout"] .brand strong,
:root[data-skin="fallout"] .page-heading h1 {
  font-family: var(--mono);
  letter-spacing: 0.5px;
}
:root[data-skin="fallout"] .page-heading h1 { text-shadow: 0 0 14px hsl(138 92% 52% / 0.4); }

:root[data-skin="fallout"]     { --surface: hsl(140 26% 8% / 0.7); --surface-raised: hsl(140 26% 11% / 0.82); --surface-muted: hsl(140 22% 13% / 0.64); }

:root[data-skin="fallout"] .app-shell { position: relative; z-index: 0; }

:root[data-skin="fallout"] body {
  background:
    radial-gradient(ellipse at 50% -6%, hsl(138 92% 52% / 0.16), transparent 36%),
    radial-gradient(ellipse at 86% 90%, hsl(96 80% 46% / 0.1), transparent 34%),
    linear-gradient(180deg, hsl(140 36% 6%) 0%, hsl(150 34% 4%) 52%, hsl(140 40% 5%) 100%),
    repeating-linear-gradient(0deg, hsl(138 92% 52% / 0.05) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, hsl(138 92% 52% / 0.04) 0 1px, transparent 1px 44px);
  background-attachment: fixed;
}
:root[data-skin="fallout"] body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url('/assets/skins/fallout-vaultboy.webp') right -1% bottom -8% / auto min(100vh, 1100px) no-repeat;
  opacity: 0.12;
  filter: drop-shadow(0 0 24px hsl(138 92% 52% / 0.35));
}

/* ════════════════════════════════════════════════════════════════════════════
   2077 EASTER EGG — "BREACH PROTOCOL". Over-scroll past the bottom of the page
   to detonate a full-screen RGB-split glitch storm. Driven by cyber-fx.ts.
   Ported from kaboo's CyberpunkBreach.
   ════════════════════════════════════════════════════════════════════════════ */
.cyber-breach {
  position: fixed;
  inset: 0;
  z-index: 100000;
  pointer-events: none;
  overflow: hidden;
}

.cyber-breach-flash {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, hsl(186 100% 52% / 0.5), hsl(330 100% 58% / 0.4));
  mix-blend-mode: screen;
  animation: cyber-breach-flash 4.2s ease-out forwards;
}

.cyber-breach-grid {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, hsl(186 100% 52% / 0.12) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, hsl(330 100% 58% / 0.1) 0 1px, transparent 1px 38px);
  animation: cyber-breach-grid 4.2s steps(8, end) forwards;
}

.cyber-breach-shards { position: absolute; inset: 0; }

.cyber-breach-shard {
  position: absolute;
  left: 0;
  right: 0;
  background: hsl(var(--hue, 186 100% 52%) / 0.4);
  mix-blend-mode: screen;
  opacity: 0;
  animation: cyber-breach-shard var(--dur, 0.4s) steps(2, end) var(--delay, 0s) infinite;
}

.cyber-breach-banner {
  position: absolute;
  left: 0;
  right: 0;
  top: 34%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  text-align: center;
  font-family: var(--mono);
  animation: cyber-breach-caption 4.2s ease forwards;
}

.cyber-breach-tag {
  font-size: clamp(11px, 2vw, 16px);
  letter-spacing: 0.24em;
  color: hsl(186 100% 70%);
  text-shadow: 0 0 12px hsl(186 100% 52% / 0.8);
}

.cyber-breach-caption,
.cyber-breach-sub {
  position: relative;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: hsl(56 96% 84%);
}

.cyber-breach-caption {
  font-size: clamp(20px, 5vw, 54px);
  text-shadow: 0 0 18px hsl(330 100% 58% / 0.9), 0 0 4px hsl(186 100% 70% / 0.85);
}

.cyber-breach-sub {
  font-size: clamp(13px, 2.6vw, 28px);
  color: hsl(186 96% 78%);
  text-shadow: 0 0 12px hsl(186 100% 52% / 0.8);
}

.cyber-breach-caption::before,
.cyber-breach-caption::after,
.cyber-breach-sub::before,
.cyber-breach-sub::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
}

.cyber-breach-caption::before,
.cyber-breach-sub::before {
  color: hsl(330 100% 60%);
  animation: cyber-breach-glitch-a 0.4s steps(2, end) infinite;
}

.cyber-breach-caption::after,
.cyber-breach-sub::after {
  color: hsl(186 100% 56%);
  animation: cyber-breach-glitch-b 0.4s steps(2, end) infinite;
}

.cyber-breach-quake .app-shell {
  animation: cyber-breach-quake 0.76s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes cyber-breach-flash {
  0% { opacity: 0; }
  3% { opacity: 1; }
  18% { opacity: 0.4; }
  100% { opacity: 0; }
}

@keyframes cyber-breach-grid {
  0% { opacity: 0; transform: translateY(-6px); }
  10% { opacity: 1; }
  86% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(6px); }
}

@keyframes cyber-breach-shard {
  0%, 100% { opacity: 0; transform: translateX(0); }
  40% { opacity: 0.85; transform: translateX(var(--shift, 10px)); }
  60% { opacity: 0.5; transform: translateX(calc(var(--shift, 10px) * -0.6)); }
}

@keyframes cyber-breach-glitch-a {
  0%, 100% { transform: translate(-2px, 0); }
  50% { transform: translate(-5px, 1px); }
}

@keyframes cyber-breach-glitch-b {
  0%, 100% { transform: translate(2px, 0); }
  50% { transform: translate(5px, -1px); }
}

@keyframes cyber-breach-caption {
  0%, 16% { opacity: 0; }
  30% { opacity: 1; }
  84% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes cyber-breach-quake {
  10%, 90% { transform: translate(-2px, 1px); }
  20%, 80% { transform: translate(4px, -2px); }
  30%, 50%, 70% { transform: translate(-7px, 2px); }
  40%, 60% { transform: translate(7px, -1px); }
}

@media (prefers-reduced-motion: reduce) {
  .cyber-breach-flash,
  .cyber-breach-shards { display: none; }
  .cyber-breach-grid,
  .cyber-breach-banner { animation: none; opacity: 1; }
  .cyber-breach-caption::before,
  .cyber-breach-caption::after,
  .cyber-breach-sub::before,
  .cyber-breach-sub::after { display: none; }
  .cyber-breach-quake .app-shell { animation: none; }
}

/* ── Skin ↔ PR #123 bridge ───────────────────────────────────────────────────
   PR #123 hardcodes panel/card backgrounds under [data-theme="dark"] (glass look)
   instead of using --surface, so dark skins would all look alike. Re-point the
   prominent surfaces to the active skin's --surface so switching is visible.
   Appended last → wins over the PR's [data-theme="dark"] rules by source order. */
:root:not([data-skin="default"]) .panel,
:root:not([data-skin="default"]) .metric-card,
:root:not([data-skin="default"]) .bd-card,
:root:not([data-skin="default"]) .mate,
:root:not([data-skin="default"]) .session-card,
:root:not([data-skin="default"]) .session-board-column,
:root:not([data-skin="default"]) .filters:not(.dashboard-toolbar) {
  background: var(--surface);
}
:root:not([data-skin="default"]) .session-board-column > header {
  background: var(--surface-muted);
}

/* ════════════════════════════════════════════════════════════════════════
   v3 runs page — "flight recorder" visual language.
   Status hues derive from theme tokens so light/dark/skins all inherit;
   gateWaiting gets its own violet (approval ≠ blocked).  All motion is
   CSS-only and disabled under prefers-reduced-motion.
   (`.v3-terminal-*` above is the codex-owned terminal slot — untouched.)
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --v3r-pending: var(--faint);
  --v3r-running: var(--accent);
  --v3r-done: var(--success);
  --v3r-blocked: var(--warning);
  --v3r-failed: var(--danger);
  --v3r-gate: #7c5cd6;
  /* edge-activation: 分支未选中的中性终态 — 比 pending 更"收起"，绝不能像
     失败（它是 by-design 的非事件） */
  --v3r-skipped: var(--faint);
}
:root[data-theme="dark"] { --v3r-gate: #a78bfa; }

.v3r-title { display: inline-block; margin-left: 0; font-family: var(--mono); font-size: 1.18rem; letter-spacing: 0; }
.v3r-runid { font-family: var(--mono); font-size: 12.5px; }

/* status pill — shared by list rows, panel header, run badge */
.v3r-pill {
  display: inline-flex; align-items: center; gap: .38em;
  padding: .14em .62em; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.5;
  font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--ns, var(--muted)) 14%, transparent);
  color: var(--ns, var(--muted));
  border: 1px solid color-mix(in srgb, var(--ns, var(--muted)) 32%, transparent);
}
.v3r-pill .dot, .v3r-inst .dot {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  background: var(--ns, var(--muted));
}
.st-pending     { --ns: var(--v3r-pending); }
.st-running     { --ns: var(--v3r-running); }
.st-gateWaiting { --ns: var(--v3r-gate); }
.st-done        { --ns: var(--v3r-done); }
.st-skipped     { --ns: var(--v3r-skipped); }
.st-cancelled   { --ns: var(--v3r-skipped); }
.st-blocked     { --ns: var(--v3r-blocked); }
.st-failed      { --ns: var(--v3r-failed); }
/* skipped 整体降透明度 + 虚线盒 — 一眼读出"这条路没走"，与 pending 区分 */
.v3r-node.st-skipped, .v3r-node.st-cancelled { opacity: .55; }
.v3r-node.st-skipped .v3r-box, .v3r-node.st-cancelled .v3r-box { stroke-dasharray: 4 3; }
.rs-running   { --ns: var(--v3r-running); }
.rs-succeeded { --ns: var(--v3r-done); }
.rs-cancelling { --ns: var(--v3r-blocked); }
.rs-cancelled { --ns: var(--v3r-skipped); }
.rs-blocked   { --ns: var(--v3r-blocked); }
.rs-failed    { --ns: var(--v3r-failed); }

.v3r-wrap { display: flex; flex-direction: column; gap: 1rem; align-items: stretch; }
.v3r-graph-card {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background:
    radial-gradient(circle, color-mix(in srgb, var(--fg) 7%, transparent) 1px, transparent 1px) 0 0 / 22px 22px,
    var(--surface);
}
.v3r-graph { max-height: 48vh; overflow: auto; }
.v3r-graph-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  min-width: 100%;
  min-height: 100%;
}
.v3r-graph-stage svg {
  display: block;
  flex: 0 0 auto;
}
.v3r-legend {
  display: flex; flex-wrap: wrap; gap: .9rem; align-items: center;
  padding: .45rem .9rem; border-top: 1px solid var(--border-soft);
  font-size: 11.5px; color: var(--muted);
}
.v3r-legend .lg { display: inline-flex; align-items: center; gap: .35em; }
.v3r-legend .lg::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ns, var(--muted));
}
.v3r-legend .lg-loop::before { content: none; }
.v3r-legend .lg-loop { font-family: var(--mono); }

/* ── graph nodes (SVG) ── */
.v3r-node { cursor: pointer; }
.v3r-node .v3r-box {
  fill: color-mix(in srgb, var(--ns) 9%, var(--surface-raised));
  stroke: color-mix(in srgb, var(--ns) 52%, var(--border));
  stroke-width: 1.2;
  transition: fill .2s ease, stroke .2s ease;
}
.v3r-node:hover .v3r-box { fill: color-mix(in srgb, var(--ns) 16%, var(--surface-raised)); }
.v3r-node.sel .v3r-box { stroke: var(--accent-strong); stroke-width: 2; }
.v3r-node .v3r-nid {
  fill: var(--fg); font-family: var(--mono); font-size: 12px; font-weight: 600;
}
.v3r-node .v3r-nstatus {
  fill: var(--ns); font-size: 10.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.v3r-node.st-running .v3r-box { animation: v3r-breathe 2.2s ease-in-out infinite; }

/* loop capsule: dashed outer frame = composite-container affordance */
.v3r-loopnode .v3r-cap {
  fill: none; stroke: color-mix(in srgb, var(--ns) 45%, var(--border));
  stroke-width: 1.2; stroke-dasharray: 5 4;
}
.v3r-loopnode.sel .v3r-cap { stroke: var(--accent-strong); stroke-dasharray: none; }
.v3r-spin {
  fill: var(--ns); font-size: 13px; font-weight: 700;
  transform-box: fill-box; transform-origin: center;
}
.st-running .v3r-spin { animation: v3r-spin 2.4s linear infinite; }
.v3r-dot.done { fill: var(--ns); }
.v3r-dot.cur  { fill: var(--ns); stroke: color-mix(in srgb, var(--ns) 40%, transparent); stroke-width: 3; }
.v3r-dot.cur.live { animation: v3r-breathe 1.4s ease-in-out infinite; }
.v3r-dot.todo { fill: none; stroke: var(--faint); stroke-width: 1.2; }
.v3r-dot.grant { stroke: var(--accent-strong); stroke-width: 1.6; }
.v3r-dot.grant.done, .v3r-dot.grant.cur { fill: var(--accent-strong); }
.v3r-dots-verdict { font-size: 11px; font-weight: 700; }
.v3r-dots-verdict.ok { fill: var(--v3r-done); }
.v3r-dots-verdict.warn { fill: var(--v3r-blocked); }

/* edges: quiet by default, marching-ants into live nodes */
.v3r-edge { fill: none; stroke: color-mix(in srgb, var(--fg) 26%, transparent); stroke-width: 1.5; }
.v3r-edge.live {
  stroke: var(--v3r-running); stroke-width: 1.8;
  stroke-dasharray: 6 5; animation: v3r-flow 0.9s linear infinite;
}

/* ── node panel ── */
.v3r-panel {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1rem; background: var(--surface);
}
.v3r-panel-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .55rem; }
.v3r-loop-mark { font-size: 17px; font-weight: 700; color: var(--accent); }
.v3r-nodeid { font-family: var(--mono); font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.v3r-crumb { margin: .2rem 0 .55rem; font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: .45em; }
.v3r-crumb .sep { color: var(--faint); }
.v3r-goal {
  margin: .45rem 0; padding: .5rem .7rem; font-size: 12.5px; color: var(--muted);
  border-left: 3px solid var(--border); background: var(--surface-muted);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0; white-space: pre-wrap;
}
.v3r-deps { margin: .4rem 0; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: .4em; flex-wrap: wrap; }
.v3r-dep {
  font-family: var(--mono); font-size: 11.5px; padding: .1em .5em;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-muted);
}
.v3r-err { margin: .4rem 0; font-size: 12.5px; color: var(--v3r-blocked); }
.v3r-term-slot { margin-top: .75rem; }

/* ── loop iteration timeline ── */
.v3r-loop-sec { margin-top: .65rem; }
.v3r-loop-meter {
  display: flex; align-items: center; gap: .7rem; margin-bottom: .55rem;
  font-size: 13px; color: var(--muted);
}
.v3r-loop-meter .num { font-variant-numeric: tabular-nums; }
.v3r-loop-meter .num b { font-family: var(--mono); font-size: 15px; color: var(--fg); }
.v3r-granted-tag {
  font-size: 11px; font-weight: 700; padding: .1em .5em; border-radius: 999px;
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.v3r-rounds {
  display: flex; flex-direction: column; gap: .45rem;
  max-height: 380px; overflow-y: auto; padding: .15rem;
}
.v3r-round {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: .45rem .6rem; background: var(--surface-muted);
}
.v3r-round.cur { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent); }
.v3r-round.vd-exit { border-color: color-mix(in srgb, var(--v3r-done) 50%, var(--border)); }
.v3r-round.vd-exhausted { border-color: color-mix(in srgb, var(--v3r-blocked) 55%, var(--border)); }
.v3r-round-head { display: flex; align-items: center; gap: .45em; margin-bottom: .15rem; }
.v3r-round-head .rn { font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: var(--fg); }
.v3r-verdict { font-size: 11px; font-weight: 700; white-space: nowrap; }
.v3r-verdict.vd-exit { color: var(--v3r-done); }
.v3r-verdict.vd-continue { color: var(--muted); }
.v3r-verdict.vd-exhausted { color: var(--v3r-blocked); }
.v3r-verdict.vd-live { color: var(--v3r-running); animation: v3r-blink 1.6s ease-in-out infinite; }
/* round mini-dag: body instances drawn like real graph nodes (template gives
   the shape; undispatched slots are dashed ghosts) */
.v3r-mini-svg { display: block; }
.v3r-mini .v3r-nid { font-size: 11px; }
.v3r-mini .v3r-mini-dot { fill: var(--ns); }
.v3r-mini.st-running .v3r-mini-dot { animation: v3r-breathe 1.4s ease-in-out infinite; }
.v3r-mini.sel .v3r-box { stroke: var(--accent-strong); stroke-width: 2; }
.v3r-mini.ghost .v3r-box { stroke-dasharray: 3 3; fill: transparent; }
.v3r-mini.ghost .v3r-nid, .v3r-mini.ghost .v3r-mini-dot { opacity: .55; }
/* the strip naming which instance's terminal is mounted below the timeline */
.v3r-inst-strip {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  margin-top: .7rem; padding: .45rem .65rem;
  border: 1px solid var(--border-soft); border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: none;
  background: var(--surface-muted); font-size: 12px; color: var(--muted);
}
.v3r-inst-strip .lbl { font-weight: 700; color: var(--faint); letter-spacing: .04em; }
.v3r-nodeid.sm { font-size: 12.5px; }
#v3-inst-strip:not(:empty) + .v3r-term-slot { margin-top: 0; }
.v3r-cta {
  margin-top: .55rem; padding: .5rem .7rem; font-size: 12.5px;
  color: var(--v3r-blocked); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--v3r-blocked) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--v3r-blocked) 35%, transparent);
}
.v3r-cta code { font-family: var(--mono); }

@keyframes v3r-spin { to { transform: rotate(360deg); } }
@keyframes v3r-flow { to { stroke-dashoffset: -11; } }
@keyframes v3r-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes v3r-blink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  .st-running .v3r-spin, .v3r-edge.live, .v3r-node.st-running .v3r-box,
  .v3r-dot.cur.live, .v3r-verdict.vd-live { animation: none; }
}

/* ── Workflows page baseline ─────────────────────────────────────────────── */
.workflows-page {
  gap: 14px;
}

.v3r-runs-section,
.v3r-graph-section,
.v3r-node-section {
  min-width: 0;
}

.v3r-run-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: var(--button-height);
}

.v3r-run-toolbar .sect-head-action {
  margin-left: 0;
}

.v3r-detail-heading {
  overflow: visible;
}

.v3r-detail-heading::after {
  z-index: 0;
}

.v3r-detail-heading > * {
  position: relative;
  z-index: 1;
}

.page-heading .v3r-title-row {
  align-items: center;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  gap: 8px;
  min-width: 0;
}

.page-heading .v3r-title-row > h1 {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v3r-back-link {
  position: relative;
  z-index: 1;
  flex: none;
  min-width: 0;
  border-color: var(--border-soft);
  background: var(--surface);
  color: var(--muted);
}

.v3r-back-link:hover {
  z-index: 3;
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  color: var(--accent-strong);
}

.v3r-run-status-pill {
  flex: none;
}

.page-heading-actions > button.v3r-cancel-button {
  border-color: color-mix(in srgb, var(--danger) 48%, var(--border-soft));
  background: color-mix(in srgb, var(--danger) 5%, transparent);
  color: var(--danger);
}

.page-heading-actions > button.v3r-cancel-button:hover:not(:disabled) {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 11%, transparent);
  color: var(--danger);
}

.v3r-cancel-notice {
  padding: .62rem .82rem;
  border: 1px solid color-mix(in srgb, var(--warning) 34%, var(--border-soft));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--warning) 8%, var(--surface));
  color: var(--warning);
  font-size: 12px;
}

.v3r-cancel-notice.done {
  border-color: color-mix(in srgb, var(--muted) 28%, var(--border-soft));
  background: color-mix(in srgb, var(--muted) 6%, var(--surface));
  color: var(--muted);
}

.v3r-run-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--button-height);
  height: var(--button-height);
  min-width: var(--button-height);
  min-height: var(--button-height);
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.v3r-run-list {
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 8px;
  min-height: 0;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow-x: hidden;
  overflow-y: auto;
}

.v3r-run-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 34%, transparent);
  color: var(--fg);
  text-decoration: none;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    transform 150ms ease;
}

.v3r-run-card:hover {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  transform: translateY(-1px);
}

.v3r-run-main {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.v3r-run-main small {
  color: var(--faint);
  font-size: 11px;
  font-weight: 600;
}

.v3r-empty {
  margin: 0;
  border: 1px dashed var(--border-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 44%, transparent);
}

.v3r-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  gap: 14px;
  align-items: start;
}

.v3r-graph-card,
.v3r-panel {
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.v3r-graph-card {
  padding: 0;
  overflow: hidden;
}

.v3r-graph {
  min-height: 320px;
  max-height: min(560px, calc(100vh - 260px));
  padding: 12px;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    radial-gradient(circle at center, color-mix(in srgb, var(--border-soft) 70%, transparent) 1px, transparent 1.5px) 0 0 / 24px 24px;
}

.sect-head .v3r-node-status-pill {
  color: var(--ns, var(--muted));
}

.sect-head .sect-head-hint:has(.v3r-node-status-pill) {
  align-self: center;
  margin-bottom: 0;
  line-height: 1;
}

.sect-head .v3r-node-status-pill .dot {
  background: var(--ns, var(--muted));
}

.v3r-legend {
  gap: 8px 14px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--surface-muted) 42%, transparent);
}

.v3r-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.v3r-panel #v3-node-meta {
  display: grid;
  align-content: start;
  gap: 10px;
}

.v3r-panel > .muted {
  min-height: 220px;
  display: grid;
  place-items: center;
  margin: 0;
  color: var(--muted);
}

.v3r-panel-head {
  min-height: var(--button-height);
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.v3r-goal,
.v3r-inst-strip,
.v3r-round,
.v3r-cta {
  border-radius: var(--radius-lg);
}

.v3r-goal {
  margin: 0;
  border: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--surface-muted) 48%, transparent);
}

.v3r-deps {
  margin: 0;
}

.v3r-dep,
.v3r-granted-tag,
.v3r-verdict {
  border-radius: var(--radius-full);
}

.v3r-rounds {
  padding: 2px;
}

.v3-terminal-panel {
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
}

main:has(.workflows-page .v3r-wrap) {
  padding-bottom: 0;
  overflow: hidden;
}

main:has(.workflows-page .v3r-wrap) .workflows-page {
  height: 100%;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

main:has(.workflows-page .v3r-wrap) .v3r-wrap {
  height: 100%;
  min-height: 0;
  align-items: stretch;
}

main:has(.workflows-page .v3r-wrap) .v3r-graph-section,
main:has(.workflows-page .v3r-wrap) .v3r-node-section {
  display: grid;
  grid-template-rows: var(--section-title-row-height) minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}

main:has(.workflows-page .v3r-wrap) .v3r-graph-card {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100%;
  min-height: 0;
}

main:has(.workflows-page .v3r-wrap) .v3r-graph {
  min-height: 0;
  max-height: none;
  overflow: auto;
}

main:has(.workflows-page .v3r-wrap) .v3r-panel {
  height: 100%;
  min-height: 0;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
}

main:has(.workflows-page .v3r-wrap) #v3-node-meta {
  min-height: 0;
  overflow: auto;
}

main:has(.workflows-page .v3r-wrap) .v3r-term-slot {
  min-height: 0;
  overflow: hidden;
}

main:has(.workflows-page .v3r-runs-section) {
  padding-bottom: 0;
  overflow: hidden;
}

main:has(.workflows-page .v3r-runs-section) .workflows-page {
  height: 100%;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

main:has(.workflows-page .v3r-runs-section) .v3r-runs-section {
  display: grid;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

main:has(.workflows-page .v3r-runs-section) .v3r-run-list {
  height: 100%;
}

@media (max-width: 1180px) {
  main:has(.workflows-page .v3r-wrap) {
    padding-bottom: 24px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  main:has(.workflows-page .v3r-wrap) .workflows-page,
  main:has(.workflows-page .v3r-wrap) .v3r-wrap,
  main:has(.workflows-page .v3r-wrap) .v3r-graph-section,
  main:has(.workflows-page .v3r-wrap) .v3r-node-section,
  main:has(.workflows-page .v3r-wrap) .v3r-graph-card,
  main:has(.workflows-page .v3r-wrap) .v3r-panel {
    height: auto;
    overflow: visible;
  }

  .v3r-wrap {
    grid-template-columns: 1fr;
  }

  main:has(.workflows-page .v3r-wrap) .v3r-graph {
    min-height: 320px;
    max-height: min(560px, calc(100vh - 260px));
  }
}

/* ── Insight workbench (owner-only #/insights page) ───────────────────────────
   Visual layer ported from the reference app (agent-session-insights, html.ts
   STYLE) so this page reads as that read-only "工作台", not generic dashboard
   cards. The reference is dark-only with hardcoded hexes; here its variables
   (--panel/--line/--mut/--acc/--good/--warn/--bad) and stray hexes are remapped
   to the dashboard's light/dark design tokens and SCOPED under .insights-page,
   so the workbench look carries over while still respecting the active theme.
   Phase colors match the reference exactly: edit=green research=blue run=amber
   delegate=purple discuss=gray. */
.insights-page {
  --panel: var(--surface);
  --line: var(--border);
  --mut: var(--muted);
  --acc: var(--accent);
  --good: var(--success);
  --warn: var(--warning);
  --bad: var(--danger);
  --ins-inner: var(--surface-muted);
  --ins-recess: var(--bg-soft);
  --ins-faint: var(--faint);
  --ph-edit: var(--success);
  --ph-research: var(--accent);
  --ph-run: var(--warning);
  --ph-delegate: #a06fd6;
  --ph-discuss: var(--muted);
  --ph-unknown: var(--border);
  color: var(--fg);
  font-size: 14px;
  line-height: 1.5;
}
.insights-page {
  --insight-module-gap: 14px;
  --insight-grid-gap: 12px;
}

.insights-page .insight-title-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  min-width: 0;
}

.insights-page .insight-title-line h1 {
  flex: 0 0 auto;
}

.insights-page .insight-title-line .insight-tabs {
  flex: 0 1 auto;
}

.insights-page .insights-filters .insight-head-acts {
  flex: 0 0 auto;
  margin-left: auto;
}

.insights-page .insight-tab-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--button-height);
  min-width: 0;
}

.insight-page-status {
  flex: 0 1 auto;
  min-height: 0;
  margin: 0;
  color: var(--mut);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-align: left;
  white-space: nowrap;
}

.insight-page-status:empty {
  display: none;
}

/* section labels (uppercase eyebrow) — reference h3 */
.insights-page .block h3,
.insights-page .insight-detail h3,
.insights-page .insight-section-label {
  font-size: 12px; color: var(--mut); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; margin: 0 0 10px;
}

/* metric cards (reference .cards/.card/.cv/.cl/.cs) */
.insights-page .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--insight-grid-gap); }
.insights-page .insights-metrics { margin: 0; }
.insights-page .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 12px 14px; }
.insights-page .cv { font-size: 20px; font-weight: 600; line-height: 1.2; }
.insights-page .cl { color: var(--mut); font-size: 12px; margin-top: 4px; }
.insights-page .cs { color: var(--mut); font-size: 11px; margin-top: 2px; }

/* overview blocks (reference .block/.grid2col/.recblock) */
.insights-page .block { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 12px 14px; }
.insights-page .recblock { background: var(--ins-inner); }
.insights-overview-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--insight-grid-gap); margin: 0; }
@media (max-width: 900px) { .insights-overview-grid { grid-template-columns: 1fr; } }

@media (max-width: 640px) {
  .insights-page .insight-tab-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .insights-page .insight-title-line {
    align-items: flex-start;
    flex-direction: column;
  }

  .insights-page .insights-filters .insight-head-acts {
    justify-content: flex-end;
    width: 100%;
    margin-left: 0;
  }

  .insight-page-status {
    text-align: left;
  }
}

/* recommendations (reference .reclist/.rec/.rectop/.recev/.recact) */
.insights-page .reclist { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
.insights-page .insight-detail .reclist { grid-template-columns: 1fr; }
.insights-page .rec {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; border: 1px solid var(--line); border-left: 3px solid var(--mut);
  border-radius: 7px; background: var(--panel); padding: 9px 11px;
}
/* <button class="rec"> carries UA defaults (justify-content + text-align: center)
   that centre the card body. The non-clickable rec (no evidence ⇒ no .rec-clickable,
   which is the only place text-align:left lived) hit exactly that — its impact/actions
   rendered centred. Reset on every rec button so clickable/non-clickable align identically. */
.insights-page button.rec { justify-items: stretch; justify-content: stretch; text-align: left; width: 100%; font: inherit; color: inherit; appearance: none; -webkit-appearance: none; }
.insights-page .recblock .rec { background: var(--ins-recess); }
.insights-page .rec.bad { border-left-color: var(--bad); }
.insights-page .rec.warn { border-left-color: var(--warn); }
.insights-page .rec.info { border-left-color: var(--acc); }
.insights-page .rectop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.insights-page .rectop b { font-size: 13px; line-height: 1.35; }
.insights-page .rectop span { flex: 0 0 auto; color: var(--mut); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; font-size: 11px; white-space: nowrap; }
.insights-page .rec.bad .rectop span { color: var(--bad); border-color: var(--bad); }
.insights-page .rec.warn .rectop span { color: var(--warn); border-color: var(--warn); }
.insights-page .rec.info .rectop span { color: var(--acc); border-color: var(--acc); }
.insights-page .recev { color: var(--fg); font-size: 12px; line-height: 1.45; }
.insights-page .recact { color: var(--mut); font-size: 12px; line-height: 1.45; }

/* top failed tools — horizontal bars (reference .hbrow/.hbtrack/.hbfill/.hbval) */
.insights-page .hbars { display: grid; gap: 4px; }
.insights-page .hbrow { display: grid; grid-template-columns: 116px 1fr 64px; align-items: center; gap: 10px; padding: 4px 4px; border-radius: 6px; }
.insights-page .hblabel { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--mono); }
.insights-page .hbtrack { background: var(--ins-inner); border-radius: 6px; height: 14px; overflow: hidden; }
.insights-page .hbfill { height: 100%; background: linear-gradient(90deg, var(--danger-soft), var(--bad)); border-radius: 6px; min-width: 3px; transform-origin: left; animation: insight-bar-grow .55s ease both; }
.insights-page .hbval { font-size: 12px; color: var(--mut); text-align: right; white-space: nowrap; }
.insights-page .hbval small { color: var(--ins-faint); font-size: 10px; margin-left: 5px; }
.insights-page .ihist-jump { background: transparent; border: 0; color: var(--acc); font: inherit; font-size: 11px; cursor: pointer; padding: 0 0 0 8px; white-space: nowrap; }
.insights-page .ihist-jump:hover { text-decoration: underline; }
.insights-page .hbrow-click { appearance: none; -webkit-appearance: none; border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; }
.insights-page .hbrow-click:hover { background: var(--ins-inner); }

/* top-level tabs (总览 / 会话 / 分布 / 热点) */
.insights-page .insight-tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
  min-height: var(--button-height);
  margin: 0;
  padding: 2px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  box-shadow: none;
  overflow-x: auto;
}
.insights-page .itab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--button-height) - 6px);
  min-height: calc(var(--button-height) - 6px);
  padding: 0 var(--button-padding-x);
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  margin: 0;
  white-space: nowrap;
  box-shadow: none;
  transition:
    background-color 150ms ease,
    color 150ms ease;
}
.insights-page .itab:hover {
  background: color-mix(in srgb, var(--border-soft) 60%, transparent);
  color: var(--accent-strong);
}
.insights-page .itab.on,
.insights-page .itab[aria-selected="true"] {
  background: color-mix(in srgb, var(--muted) 12%, var(--surface));
  color: var(--accent);
}
.insights-page .itab.on:hover,
.insights-page .itab[aria-selected="true"]:hover {
  background: color-mix(in srgb, var(--muted) 12%, var(--surface));
  color: var(--accent);
}
.insights-page .insight-panel[hidden] { display: none; }
.insights-page .insight-panel:not([hidden]) {
  display: grid;
  gap: var(--insight-module-gap);
  min-width: 0;
}
.insights-page :where(#insight-overview, #insight-flow, #insight-dist, #insight-hot, #insight-list-view) {
  display: grid;
  gap: var(--insight-module-gap);
  min-width: 0;
}

/* filter-bar additions: analyzable toggle and clear */
.insights-page .ins-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--mut); cursor: pointer; white-space: nowrap; }
.insights-page .ins-toggle input { cursor: pointer; }
.insights-page .ins-clear {
  background: transparent; color: var(--mut); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 6px 12px; font: inherit; font-size: 12px; cursor: pointer;
}
.insights-page .ins-clear:hover { color: var(--fg); border-color: var(--acc); }

/* distribution histograms + hotspots grids */
.insights-page .ins-hint { margin: 0; font-size: 12px; }
.insights-page .ihist-grid,
.insights-page .hot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--insight-grid-gap); align-items: start; }
.insights-page .ihist-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.insights-page .ihist-head h3 { margin: 0; }
.insights-page .trend-block { grid-column: 1 / -1; }
.insights-page .trend { display: flex; align-items: flex-end; gap: 2px; height: 60px; padding-top: 8px; }
.insights-page .trendbar { flex: 1 1 0; min-width: 2px; min-height: 2px; background: var(--acc); opacity: .8; border-radius: 2px 2px 0 0; transition: height .4s ease; }
.insights-page .trendbar:hover { opacity: 1; }
.insights-page .hot-sessions, .insights-page .hot-note { grid-column: 1 / -1; }
.insights-page .hot-note { margin-top: 0; }
.insights-page .insight-disclosure { margin: 0; color: var(--ins-faint); font-size: 11px; line-height: 1.55; white-space: pre-line; border-top: 1px solid var(--line); padding-top: 10px; }
/* recurrence hotspots (file / command / error) with expandable contributing sessions */
.insights-page .hotlist { display: grid; gap: 2px; }
.insights-page .hotitem.open { background: var(--ins-recess); border-radius: 7px; }
.insights-page .hotrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; width: 100%; appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; padding: 6px 8px; border-radius: 7px; }
.insights-page .hotrow:hover { background: var(--ins-inner); }
.insights-page .hotlabel { font-size: 12px; font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.insights-page .hotmeta { font-size: 11px; color: var(--mut); white-space: nowrap; }
.insights-page .hotmeta .bad { color: var(--bad); }
.insights-page .hotses { font-size: 11px; color: var(--acc); white-space: nowrap; }
.insights-page .hot-sess { display: flex; flex-wrap: wrap; gap: 5px; padding: 2px 8px 9px; }
.insights-page .hot-sesslink { appearance: none; -webkit-appearance: none; border: 1px solid var(--line); background: var(--ins-inner); color: var(--fg); border-radius: 6px; padding: 3px 9px; font-size: 11px; cursor: pointer; max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.insights-page .hot-sesslink:hover { border-color: var(--acc); color: var(--acc); }
/* ⌘K command palette */
.insights-page .insight-head-acts { display: flex; align-items: center; gap: 8px; }
.insights-page .insight-palette,
.insights-page.insight-palette {
  position: fixed;
  inset: 0;
  z-index: 1400;
  pointer-events: none;
}
.insights-page .insight-palette[hidden],
.insights-page.insight-palette[hidden] { display: none; }
.insights-page .insight-palette .modal-backdrop,
.insights-page.insight-palette .modal-backdrop {
  position: fixed;
  inset: 0;
  pointer-events: auto;
  background: transparent;
  backdrop-filter: none;
}
.insights-page .insight-palette.palette-centered .modal-backdrop,
.insights-page.insight-palette.palette-centered .modal-backdrop {
  background: color-mix(in srgb, var(--bg) 42%, transparent);
  -webkit-backdrop-filter: blur(6px) saturate(1.08);
  backdrop-filter: blur(6px) saturate(1.08);
}
.insights-page .palette-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: grid;
  gap: 6px;
  width: min(460px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 32px));
  padding: 6px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--modal-shadow);
  overflow: hidden;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  animation: palette-panel-fade 0.18s ease both;
}
.insights-page .palette-panel.anchored {
  right: auto;
  width: min(420px, calc(100vw - 32px));
  max-height: min(var(--palette-panel-max-height, 560px), calc(100vh - 24px));
  transform: none;
}
.insights-page .palette-input {
  box-sizing: border-box;
  width: 100%;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  outline: none;
  box-shadow: none;
}
.page.insights-page .insight-palette input.palette-input[type="search"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]),
.insights-page.insight-palette input.palette-input[type="search"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]) {
  box-sizing: border-box;
  width: 100%;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  outline: none;
  box-shadow: none;
}
.insights-page .palette-input:hover,
.insights-page .palette-input:focus,
.page.insights-page .insight-palette input.palette-input[type="search"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):hover,
.page.insights-page .insight-palette input.palette-input[type="search"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):focus,
.insights-page.insight-palette input.palette-input[type="search"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):hover,
.insights-page.insight-palette input.palette-input[type="search"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):focus {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
  box-shadow: none;
}
.insights-page .palette-list {
  display: grid;
  gap: 4px;
  max-height: min(420px, var(--palette-list-max-height, 52vh));
  overflow: auto;
  padding: 0;
}
.insights-page .palette-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-align: left;
  cursor: pointer;
  box-shadow: none;
}
.insights-page .palette-item.on,
.insights-page .palette-item:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--accent-strong);
}
.insights-page .pal-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insights-page .pal-sub { flex: 0 0 auto; color: var(--muted); font-size: 11px; white-space: nowrap; }
.insights-page .palette-item.on .pal-sub,
.insights-page .palette-item:hover .pal-sub { color: var(--accent-strong); }
.insights-page .palette-empty { margin: 0; padding: 10px var(--button-padding-x); text-align: center; }
@keyframes palette-panel-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* 行为流 (Flow) tab */
.insights-page .flow-sub { font-size: 12px; margin: 0; }
.insights-page .flow-pipe-block { margin: 0; }
.insights-page .flow-pipe-block > h3,
.insights-page .subagent-block > h3 {
  display: inline-flex;
  align-items: center;
  margin: 0 10px 12px 0;
  vertical-align: bottom;
}
.insights-page .flow-pipe-block > .flow-sub,
.insights-page .subagent-block > .ins-hint {
  display: inline-block;
  margin: 0 0 10px;
  vertical-align: bottom;
}
.insights-page .flow-pipe { display: flex; align-items: stretch; flex-wrap: wrap; gap: 6px; }
.insights-page .flow-node { flex: 1 1 0; min-width: 110px; display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; background: var(--ins-inner); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.insights-page .flow-node strong { font-size: 13px; }
.insights-page .flow-node .flow-n { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.insights-page .flow-node .flow-n em, .insights-page .flow-node .flow-t em { font-style: normal; color: var(--mut); font-weight: 400; font-size: 12px; }
.insights-page .flow-node .flow-t { font-size: 12px; color: var(--mut); font-variant-numeric: tabular-nums; }
.insights-page .flow-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.insights-page .flow-arrow { align-self: center; color: var(--mut); font-size: 16px; flex: 0 0 auto; }
.insights-page .flow-bhead { display: grid; grid-template-columns: 84px 1fr 1fr; gap: 10px; font-size: 11px; color: var(--mut); padding: 0 0 6px; }
.insights-page .flow-bars { display: grid; gap: 8px; }
.insights-page .flow-brow { display: grid; grid-template-columns: 84px 1fr 1fr; gap: 10px; align-items: center; }
.insights-page .flow-blabel { font-size: 12px; display: flex; align-items: center; gap: 6px; }
.insights-page .flow-blabel i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.insights-page .flow-btrack { position: relative; height: 16px; background: var(--ins-recess); border-radius: 5px; overflow: hidden; display: flex; align-items: center; }
.insights-page .flow-bfill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 5px; opacity: .85; }
.insights-page .flow-btrack em { position: relative; font-style: normal; font-size: 11px; color: var(--fg); margin-left: 7px; font-variant-numeric: tabular-nums; }
.insights-page .flow-bfill.phase-research { background: var(--ph-research); }
.insights-page .flow-bfill.phase-edit { background: var(--ph-edit); }
.insights-page .flow-bfill.phase-run { background: var(--ph-run); }
.insights-page .flow-bfill.phase-delegate { background: var(--ph-delegate); }
.insights-page .flow-bfill.phase-discuss { background: var(--ph-discuss); }
.insights-page .flow-rhythm { display: grid; gap: 4px; max-height: 420px; overflow: auto; }
.insights-page .flow-sess { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr) 56px; gap: 10px; align-items: center; width: 100%; appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; padding: 6px 8px; border-radius: 6px; }
.insights-page .flow-sess:hover { background: var(--ins-inner); }
.insights-page .flow-stitle { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.insights-page .flow-sess .mph { flex: 1; height: 11px; }
.insights-page .flow-stime { font-size: 11px; color: var(--mut); text-align: right; font-variant-numeric: tabular-nums; }
/* sub-agent swim-lanes (detail view) */
.insights-page .subagent-block .ins-hint { margin: 0 0 10px; }
.insights-page .sublanes { display: grid; gap: 8px; }
.insights-page .sublane { display: grid; gap: 5px; padding: 9px 12px; background: var(--ins-inner); border: 1px solid var(--line); border-radius: var(--radius-lg); border-left: 3px solid var(--ph-delegate); }
.insights-page .sublane.bad { border-left-color: var(--bad); }
.insights-page .sublane-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.insights-page .sublane-type { flex: 0 0 auto; font-size: 11px; font-weight: 600; color: var(--acc); background: var(--accent-soft); padding: 1px 7px; border-radius: 999px; }
.insights-page .sublane-task { font-size: 12px; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.insights-page .sublane .mph { height: 8px; }
.insights-page .sublane-stats { display: flex; gap: 14px; font-size: 11px; color: var(--mut); font-variant-numeric: tabular-nums; }
.insights-page .sublane-stats .bad { color: var(--bad); }

/* Sessions tab: full-width list ⇆ full-width detail (mirrors ASI 会话, replaces
   the cramped master-detail side panel) */
.insights-page #insight-list-view .insight-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0; }
.insights-page .sesssort {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}
.insights-page .sesssort .sect-sort-menu {
  width: 132px;
  min-width: 132px;
}
.insights-page .sesssort .sect-sort-menu > summary {
  box-sizing: border-box;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 0 calc(var(--button-padding-x) + 18px) 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
}
.insights-page .sesssort .sect-sort-menu > summary:hover,
.insights-page .sesssort .sect-sort-menu[open] > summary {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}
.insights-page .sesssort .sect-sort-menu .sect-sort-value {
  max-width: 100%;
}
.insights-page .sesssort .sect-sort-pop {
  left: 50%;
  z-index: 1302;
  width: 100%;
  min-width: 100%;
  transform: translateX(-50%);
}
.insights-page .sesssort:has(.sect-sort-menu[open]) {
  position: relative;
  z-index: 1300;
}
.insights-page .insight-layout-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 2px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  box-shadow: none;
}
.insights-page .insight-layout-switch button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--button-height) - 6px);
  min-height: calc(var(--button-height) - 6px);
  max-height: calc(var(--button-height) - 6px);
  padding: 0 var(--button-padding-x);
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
}
.insights-page .insight-layout-switch button:hover {
  background: color-mix(in srgb, var(--border-soft) 60%, transparent);
  color: var(--accent-strong);
}
.insights-page .insight-layout-switch button.active,
.insights-page .insight-layout-switch button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--muted) 12%, var(--surface));
  color: var(--accent);
}
.insights-page .ins-back {
  background: transparent; color: var(--mut); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 6px 14px; font: inherit; font-size: 12px; cursor: pointer; margin: 0;
}
.insights-page .ins-back:hover { color: var(--fg); border-color: var(--acc); }
.insights-page #insight-detail-view {
  display: grid;
  gap: var(--insight-module-gap);
}
.insights-page #insight-detail-view .insight-detail {
  display: grid;
  gap: var(--insight-module-gap);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
}
/* full-width rich rows */
.insights-page .slist.wide { max-height: none; overflow: visible; gap: 10px; }
.insights-page .slist.wide .srmain strong { -webkit-line-clamp: 1; font-size: 14px; }
.insights-page .slist.wide .mph { max-width: 440px; height: 8px; }
.insights-page .slist.wide .srmsg { justify-self: end; }
/* dense table layout for the session list */
.insights-page .stable { display: grid; gap: 1px; }
.insights-page .strow { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) 54px 54px 46px 54px 60px 78px; gap: 10px; align-items: center; width: 100%; appearance: none; -webkit-appearance: none; border: 1px solid transparent; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; padding: 8px 12px; border-radius: var(--radius-lg); }
.insights-page .strow:hover { border-color: var(--border-soft); background: var(--ins-inner); }
.insights-page .strow.on { border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft)); background: var(--accent-soft); }
.insights-page .strow.review { border-color: color-mix(in srgb, var(--bad) 42%, var(--border-soft)); }
.insights-page .sthead { font-size: 11px; color: var(--mut); cursor: default; position: sticky; top: 56px; background: var(--panel); border-radius: 0; }
.insights-page .sthead:hover { background: var(--panel); }
.insights-page .stc-title { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.insights-page .stc-title strong { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.insights-page .stc-title small { font-size: 11px; color: var(--mut); }
.insights-page .stc-proj { font-size: 12px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.insights-page .stc-num { font-size: 12px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.insights-page .stc-num.bad { color: var(--bad); }
.insights-page .stc-time { color: var(--mut); }
.insights-page .strow.nostat .stc-msg { grid-column: 3 / 8; font-size: 11px; color: var(--mut); }

/* session detail panel (full-width detail view) */
.insight-detail { min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 12px 14px; }
.insight-list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.insight-list-head h3 { font-size: 13px; margin: 0; }
.insight-list-head span { font-size: 11px; color: var(--mut); }

/* session rows (reference .slist/.srow/.srmain/.srstats) */
.insights-page .slist { display: grid; gap: 8px; max-height: 72vh; overflow: auto; }
.insights-page .srow {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; width: 100%; box-sizing: border-box;
  background: var(--ins-inner); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 9px 11px; color: inherit; text-align: left; cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .12s ease, box-shadow .15s ease;
}
.insights-page .srow:hover { border-color: var(--border-soft); background: var(--ins-recess); transform: translateY(-1px); box-shadow: var(--shadow); }
.insights-page .srow.on { border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft)); background: var(--accent-soft); }
.insights-page .srow.review { border-color: color-mix(in srgb, var(--bad) 42%, var(--border-soft)); }
.insights-page .srmain { display: grid; gap: 5px; min-width: 0; }
.insights-page .srmain strong { font-size: 13px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.insights-page .srmain small { font-size: 11px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.insights-page .srstats { display: flex; flex-wrap: wrap; gap: 6px; }
.insights-page .srstats b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  box-shadow: none;
}
.insights-page .srstats b em { font-style: normal; color: var(--fg); font-weight: 800; margin-left: 0; }
.insights-page .srstats b.bad {
  border-color: color-mix(in srgb, var(--bad) 36%, var(--border-soft));
  background: color-mix(in srgb, var(--bad) 8%, var(--surface));
  color: var(--bad);
}
.insights-page .srstats b.bad em { color: var(--bad); }
.insights-page .srmsg { font-size: 11px; color: var(--mut); }

.insights-page .slist.wide .srow {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 13px 16px;
}
.insights-page .slist.wide .srstats { flex-wrap: nowrap; justify-content: flex-end; align-items: center; }
@media (max-width: 760px) {
  .insights-page .slist.wide .srow { grid-template-columns: 1fr; }
  .insights-page .slist.wide .srstats { justify-content: flex-start; flex-wrap: wrap; }
}

/* phase-mix mini bar (reference .mph) + proportional bar (reference .pmx) */
.insights-page .mph { display: flex; gap: 1px; height: 7px; overflow: hidden; border-radius: 3px; margin-top: 1px; background: var(--ins-recess); }
.insights-page .mph i { display: block; height: 100%; min-width: 1px; }
.insights-page .pmx { display: flex; height: 11px; border-radius: 5px; overflow: hidden; background: var(--ins-inner); }
.insights-page .pmx i { display: block; height: 100%; }
.insights-page i.phase-research { background: var(--ph-research); }
.insights-page i.phase-edit { background: var(--ph-edit); }
.insights-page i.phase-run { background: var(--ph-run); }
.insights-page i.phase-delegate { background: var(--ph-delegate); }
.insights-page i.phase-discuss { background: var(--ph-discuss); }
.insights-page i.phase-unknown { background: var(--ph-unknown); }
.insights-page .leg { font-size: 11px; color: var(--mut); margin-top: 6px; }
.insights-page .ld { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin: 0 4px 0 10px; vertical-align: middle; }

/* detail head (reference .shead/.smeta) */
.insights-page .shead h2 { font-size: 16px; margin: 0 0 4px; }
.insights-page .smeta { color: var(--mut); font-size: 12px; margin: 0 0 12px; }
.insights-page .smeta code { font-family: var(--mono); }
.insights-page .insight-detail-metrics { margin-bottom: 10px; }
.insights-page .insight-meta { font-size: 12px; color: var(--mut); margin: 8px 0; }
.insights-page .insight-empty { color: var(--mut); padding: 24px; text-align: center; }
.insights-page .mut { color: var(--ins-faint); }
.insights-page .note { color: var(--mut); font-size: 12px; margin-top: 8px; }

/* detail tabs: 动作 span / 逐轮对账 (reference .detailtabbar) */
.insights-page .detailtabs { margin-top: 0; }
.insights-page .detailtabbar { display: flex; gap: 6px; align-items: center; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.insights-page .detailtabbar button {
  background: transparent; color: var(--mut); border: 1px solid transparent; border-bottom: 0;
  border-radius: 7px 7px 0 0; padding: 7px 13px; font: inherit; font-size: 12px; cursor: pointer; margin-bottom: -1px;
}
.insights-page .detailtabbar button:hover { color: var(--fg); }
.insights-page .detailtabbar button.on { color: var(--fg); background: var(--panel); border-color: var(--line); font-weight: 600; }
.insights-page .detailtabbar b { font-weight: 500; color: var(--acc); margin-left: 5px; }
.insights-page .insight-tab-panel[hidden] { display: none; }

/* 动作 span — trace (reference .tracebox/.spanlist/.spanrow/.spanst/.spanline) */
.insights-page .tracebox { background: var(--ins-inner); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 10px 12px; }
.insights-page .tracehead { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--mut); font-size: 12px; margin-bottom: 8px; }
.insights-page .tracehead b { color: var(--fg); }
.insights-page .tracebad { color: var(--bad); }
.insights-page .spanlist { display: grid; gap: 5px; max-height: 62vh; overflow: auto; }
.insights-page .spanrow {
  display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 9px;
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: 7px; padding: 7px 9px;
}
.insights-page .spanrow.ph-research { border-left-color: var(--ph-research); }
.insights-page .spanrow.ph-edit { border-left-color: var(--ph-edit); }
.insights-page .spanrow.ph-run { border-left-color: var(--ph-run); }
.insights-page .spanrow.ph-delegate { border-left-color: var(--ph-delegate); }
.insights-page .spanrow.ph-discuss { border-left-color: var(--ph-discuss); }
.insights-page .spanrow.error { background: var(--danger-soft); border-color: var(--bad); border-left-color: var(--bad); }
.insights-page .spanrail { display: flex; flex-direction: column; gap: 3px; color: var(--ins-faint); font-size: 11px; font-family: var(--mono); white-space: nowrap; }
.insights-page .spanrail .sr-turn { color: var(--mut); }
.insights-page .spanbody { display: grid; gap: 4px; min-width: 0; }
.insights-page .spantop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--mut); font-size: 11px; }
.insights-page .spantop b { font-family: var(--mono); color: var(--fg); font-size: 12px; }
.insights-page .spanst { border-radius: 999px; background: var(--ins-inner); border: 1px solid var(--line); padding: 1px 8px; font-size: 10px; font-weight: 700; }
.insights-page .spanst.ok { color: var(--good); border-color: var(--good); }
.insights-page .spanst.error { color: var(--bad); border-color: var(--bad); }
.insights-page .spanst.running { color: var(--warn); border-color: var(--warn); }
.insights-page .spanline { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; align-items: start; }
.insights-page .spanline > span { color: var(--ins-faint); font-size: 11px; text-align: right; line-height: 1.6; }
.insights-page .spanline code, .insights-page .spanline em {
  min-width: 0; overflow-wrap: anywhere; background: var(--bg); border: 1px solid var(--line);
  border-radius: 5px; padding: 3px 7px; font-family: var(--mono); font-size: 11px; line-height: 1.45; color: var(--fg); font-style: normal;
}
.insights-page .spanline em { color: var(--mut); }

/* 逐轮对账 — ledger (reference .ledger/.lrow/.lhead/.lstat) */
.insights-page .ledger { display: grid; gap: 6px; max-height: 62vh; overflow: auto; }
.insights-page .lrow { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: var(--radius-lg); padding: 8px 12px; }
.insights-page .lrow.dom-research { border-left-color: var(--ph-research); }
.insights-page .lrow.dom-edit { border-left-color: var(--ph-edit); }
.insights-page .lrow.dom-run { border-left-color: var(--ph-run); }
.insights-page .lrow.dom-delegate { border-left-color: var(--ph-delegate); }
.insights-page .lrow.dom-discuss { border-left-color: var(--ph-discuss); }
.insights-page .lhead { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.insights-page .lno { color: var(--mut); font-size: 12px; font-family: var(--mono); font-weight: 700; flex: 0 0 auto; }
.insights-page .lphases { display: flex; flex-wrap: wrap; gap: 5px; }
.insights-page .lphase {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.insights-page .lphase::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: var(--mut); }
.insights-page .lphase.phase-research::before { background: var(--ph-research); }
.insights-page .lphase.phase-edit::before { background: var(--ph-edit); }
.insights-page .lphase.phase-run::before { background: var(--ph-run); }
.insights-page .lphase.phase-delegate::before { background: var(--ph-delegate); }
.insights-page .lphase.phase-discuss::before { background: var(--ph-discuss); }
.insights-page .lstat { display: flex; gap: 14px; align-items: center; margin-top: 6px; font-size: 11px; color: var(--mut); flex-wrap: wrap; }
.insights-page .lstat b { color: var(--fg); font-weight: 600; }
.insights-page .lerr { color: var(--bad); font-weight: 600; }
.insights-page .lcontent { display: grid; gap: 6px; margin-top: 8px; min-width: 0; }
.insights-page .lcontent-preview,
.insights-page .lcontent-more { display: grid; gap: 5px; min-width: 0; }
.insights-page .lcontent-line {
  display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 8px; align-items: start;
  background: var(--ins-inner); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; min-width: 0;
}
.insights-page .lcontent-line.error { border-color: rgba(248, 81, 73, .35); background: rgba(248, 81, 73, .07); }
.insights-page .lcontent-line b {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--mut); font-family: var(--mono); font-size: 11px; font-weight: 650;
}
.insights-page .lcontent-line span {
  min-width: 0; color: var(--fg); font-family: var(--mono); font-size: 11px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.insights-page .lcontent details { color: var(--mut); font-size: 11px; }
.insights-page .lcontent summary {
  cursor: pointer; user-select: none; display: inline-flex; width: fit-content;
  border: 1px dashed var(--line); border-radius: 999px; padding: 2px 8px; background: var(--bg);
}
.insights-page .lcontent summary:hover { color: var(--fg); border-color: var(--acc); }
.insights-page .lcontent details[open] .lcontent-more { margin-top: 6px; max-height: 260px; overflow: auto; padding-right: 2px; }
.insights-page .lcontent details[open] .lcontent-line span {
  display: block; max-height: 96px; overflow: auto; white-space: pre-wrap;
}
.insights-page .lcontent-omitted,
.insights-page .lcontent-empty { color: var(--mut); font-size: 11px; }

/* diagnosis-driven: recommendations as evidence entry points + focus/highlight */
.insights-page .rec.rec-clickable {
  cursor: pointer; width: 100%; text-align: left; font: inherit; color: inherit;
  appearance: none; -webkit-appearance: none; transition: border-color .15s, box-shadow .15s, transform .04s;
}
.insights-page .rec.rec-clickable:hover { border-color: var(--acc); }
.insights-page .rec.rec-clickable:active { transform: translateY(1px); }
.insights-page .rec.active { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc) inset; }
.insights-page .rec-cta { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 650; color: var(--acc); }
.insights-page .rec.active .rec-cta::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: var(--acc); }
.insights-page .spanrow.hot { border-left-width: 4px; box-shadow: 0 0 0 1px var(--acc) inset; }
.insights-page .tracehead .ev-toggle {
  cursor: pointer; font: inherit; font-size: 11px; color: var(--mut); background: var(--bg);
  border: 1px dashed var(--line); border-radius: 999px; padding: 2px 10px; white-space: nowrap;
}
.insights-page .tracehead .ev-toggle:hover { color: var(--fg); border-color: var(--acc); }
.insights-page .ev-reason { margin: 0 0 8px; font-size: 12px; color: var(--mut); line-height: 1.45; }

/* per-turn efficiency metrics (read/edit/run/fail/time + dominant phase) */
.insights-page .ldom { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 650; color: var(--fg); flex: 0 0 auto; }
.insights-page .ldom::before { content: ''; width: 7px; height: 7px; border-radius: 999px; background: var(--mut); }
.insights-page .ldom.phase-research::before { background: var(--ph-research); }
.insights-page .ldom.phase-edit::before { background: var(--ph-edit); }
.insights-page .ldom.phase-run::before { background: var(--ph-run); }
.insights-page .ldom.phase-delegate::before { background: var(--ph-delegate); }
.insights-page .ldom.phase-discuss::before { background: var(--ph-discuss); }
.insights-page .lmets { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: auto; align-items: center; }
.insights-page .lmet {
  display: inline-flex; align-items: baseline; gap: 5px; font-size: 11px; color: var(--mut);
  background: var(--ins-inner); border-radius: 6px; padding: 2px 7px; border-left: 2px solid var(--line);
}
.insights-page .lmet i { font-style: normal; }
.insights-page .lmet b { color: var(--fg); font-weight: 700; font-family: var(--mono); }
.insights-page .lmet.zero { opacity: .4; }
.insights-page .lmet.phase-research { border-left-color: var(--ph-research); }
.insights-page .lmet.phase-edit { border-left-color: var(--ph-edit); }
.insights-page .lmet.phase-run { border-left-color: var(--ph-run); }
.insights-page .lmet.phase-delegate { border-left-color: var(--ph-delegate); }
.insights-page .lmet.phase-discuss { border-left-color: var(--ph-discuss); }
.insights-page .lmet-bad { border-left-color: var(--bad); color: var(--bad); }
.insights-page .lmet-bad b { color: var(--bad); }
.insights-page .lmet-dur { border-left-color: var(--acc); }
.insights-page .lrow.hot { border-left-width: 4px; box-shadow: 0 0 0 1px var(--acc) inset; }

/* enriched evidence: intent→result span rows */
.insights-page .span-subj { font-family: var(--mono); font-size: 11px; color: var(--fg); background: var(--ins-recess); border-radius: 5px; padding: 1px 6px; }
.insights-page .span-dur { margin-left: auto; color: var(--mut); font-size: 11px; font-family: var(--mono); flex: 0 0 auto; }
.insights-page .span-outcome { margin-top: 4px; }
.insights-page .span-res { display: inline-flex; align-items: center; font-size: 11px; border-radius: 999px; padding: 1px 8px; border: 1px solid var(--line); }
.insights-page .span-res.rc-bad { color: var(--bad); border-color: var(--bad); background: var(--danger-soft); }
/* evidence groups (失败/慢/返工) */
.insights-page .evidence { display: grid; gap: 12px; }
.insights-page .evgroup { display: grid; gap: 6px; }
.insights-page .evgroup-head { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg); }
.insights-page .evgroup-head b { font-weight: 700; }
.insights-page .evgroup-head span { color: var(--mut); background: var(--ins-inner); border-radius: 999px; padding: 0 8px; font-size: 11px; }
.insights-page .evgroup-failure .evgroup-head b { color: var(--bad); }
.insights-page .evgroup-slow .evgroup-head b { color: var(--warn); }
.insights-page .ev-timeline > summary { cursor: pointer; user-select: none; color: var(--mut); font-size: 12px; padding: 4px 0; list-style-position: inside; }
.insights-page .ev-timeline > summary:hover { color: var(--fg); }
.insights-page .ev-timeline[open] { display: grid; gap: 5px; margin-top: 2px; }
/* 轮次效率 cards */
.insights-page .turnlist { display: grid; gap: 8px; max-height: 62vh; overflow: auto; }
.insights-page .turncard { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--mut); border-radius: var(--radius-lg); padding: 9px 12px; }
.insights-page .turncard.sev-bad { border-left-color: var(--bad); }
.insights-page .turncard.sev-warn { border-left-color: var(--warn); }
.insights-page .turncard.sev-info { border-left-color: var(--acc); }
.insights-page .turncard.hot { box-shadow: 0 0 0 1px var(--acc) inset; }
.insights-page .turncard-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.insights-page .turn-no { color: var(--mut); font-family: var(--mono); font-size: 12px; font-weight: 700; flex: 0 0 auto; }
.insights-page .turn-headline { font-size: 13px; font-weight: 650; color: var(--fg); }
.insights-page .turn-metrics { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.insights-page .tm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.insights-page .tm b { color: var(--fg); font-weight: 800; font-family: var(--mono); }
.insights-page .tm.bad {
  border-color: color-mix(in srgb, var(--bad) 36%, var(--border-soft));
  background: color-mix(in srgb, var(--bad) 8%, var(--surface));
  color: var(--bad);
}
.insights-page .tm.bad b { color: var(--bad); }
.insights-page .turn-ev { margin-top: 8px; }
.insights-page .turn-ev > summary { cursor: pointer; user-select: none; color: var(--mut); font-size: 11px; border: 1px dashed var(--line); border-radius: 999px; padding: 2px 8px; width: fit-content; list-style-position: inside; }
.insights-page .turn-ev > summary:hover { color: var(--fg); border-color: var(--acc); }
.insights-page .turn-ev[open] .spanlist { margin-top: 6px; }
.insights-page .turn-hidden { padding: 6px 2px 0; font-size: 11px; }

/* ── v3: actionable recommendations + compact evidence rows + 详情 drawer + per-turn timeline ── */
.insights-page .rec-impact { font-size: 12px; color: var(--fg); line-height: 1.45; }
.insights-page .rec-actions { margin: 2px 0 0; padding-left: 16px; display: grid; gap: 3px; }
.insights-page .rec-actions li { font-size: 12px; color: var(--fg); line-height: 1.4; }
.insights-page .rec-why { font-size: 11px; color: var(--mut); line-height: 1.4; }

/* compact span row: one dense flex line (.sprow-line) + optional 详情 drawer (.spandetail) */
.insights-page .spanrow { display: block; grid-template-columns: none; padding: 0; overflow: hidden; }
.insights-page .sprow-line { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding: 6px 9px; font-size: 12px; }
.insights-page .sprow-line.clickable { cursor: pointer; }
.insights-page .sprow-line.clickable:hover { background: var(--ins-inner); }
.insights-page .spanrow.open > .sprow-line { background: var(--ins-inner); }
.insights-page .sprow-line.clickable:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.insights-page .span-turn { color: var(--mut); font-family: var(--mono); font-size: 11px; font-weight: 700; flex: 0 0 auto; }
.insights-page .span-what { color: var(--fg); font-weight: 600; flex: 0 0 auto; }
.insights-page .span-tags { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.insights-page .span-tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 9px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.insights-page .span-tag.tg-failure {
  color: var(--bad);
  border-color: color-mix(in srgb, var(--bad) 36%, var(--border-soft));
  background: color-mix(in srgb, var(--bad) 8%, var(--surface));
}
.insights-page .span-tag.tg-slow {
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 36%, var(--border-soft));
  background: color-mix(in srgb, var(--warn) 8%, var(--surface));
}
.insights-page .span-tag.tg-retry {
  color: var(--ph-delegate);
  border-color: color-mix(in srgb, var(--ph-delegate) 36%, var(--border-soft));
  background: color-mix(in srgb, var(--ph-delegate) 8%, var(--surface));
}
.insights-page .span-detail-btn {
  flex: 0 0 auto; cursor: pointer; font: inherit; font-size: 11px; color: var(--mut);
  background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 1px 10px;
}
.insights-page .span-detail-btn:hover { color: var(--fg); border-color: var(--acc); }
.insights-page .spanrow.open .span-detail-btn { color: var(--acc); border-color: var(--acc); }

.insights-page .spandetail { border-top: 1px dashed var(--line); background: var(--ins-recess); padding: 9px 11px; display: grid; gap: 9px; }
.insights-page .span-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 7px 14px; margin: 0; }
.insights-page .span-kv > div { display: grid; gap: 1px; min-width: 0; }
.insights-page .span-kv dt { color: var(--mut); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.insights-page .span-kv dd { margin: 0; color: var(--fg); font-size: 12px; font-family: var(--mono); overflow-wrap: anywhere; }
.insights-page .span-flank { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 11px; color: var(--mut); font-family: var(--mono); }
.insights-page .span-ctx { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.insights-page .span-ctx-label { font-size: 10px; color: var(--mut); text-transform: uppercase; letter-spacing: .04em; flex: 0 0 auto; }

/* operation strip — phase-coloured timeline glyphs (shared by drawer + per-turn rows) */
.insights-page .opstrip { display: inline-flex; gap: 3px; flex-wrap: wrap; align-items: center; }
.insights-page .op { width: 9px; height: 9px; border-radius: 2px; background: var(--ph-discuss); position: relative; opacity: .9; }
.insights-page .op.ph-research { background: var(--ph-research); }
.insights-page .op.ph-edit { background: var(--ph-edit); }
.insights-page .op.ph-run { background: var(--ph-run); }
.insights-page .op.ph-delegate { background: var(--ph-delegate); }
.insights-page .op.ph-discuss { background: var(--ph-discuss); }
.insights-page .op.bad { outline: 1.5px solid var(--bad); outline-offset: 1px; }
.insights-page .op.cur { outline: 2px solid var(--acc); outline-offset: 1px; transform: scale(1.2); z-index: 1; }

/* 动作 span — filter chips + table */
.insights-page .spanfilter:not(.cli-filter) { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.insights-page .spanchip {
  cursor: pointer; font: inherit; font-size: 12px; color: var(--mut);
  background: var(--ins-inner); border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px;
}
.insights-page .spanchip b { color: var(--fg); font-family: var(--mono); margin-left: 4px; }
.insights-page .spanchip:hover { color: var(--fg); border-color: var(--acc); }
.insights-page .spanchip.on { color: var(--fg); border-color: var(--acc); background: var(--accent-soft); }
.insights-page .spanchip.tg-failure.on { border-color: var(--bad); color: var(--bad); }
.insights-page .spanchip.tg-slow.on { border-color: var(--warn); color: var(--warn); }
/* block (not grid): grid items with overflow:hidden collapse their auto-row to the border height */
.insights-page .spantable { display: block; max-height: 60vh; overflow: auto; padding-right: 2px; }
.insights-page .spantable > .spanrow { margin-bottom: 5px; }
.insights-page .spantable > .spanrow:last-child { margin-bottom: 0; }

/* 逐轮对账 — per-turn timeline (all turns; normal collapsed, flagged severity-coloured) */
/* block (not grid): grid items with overflow:hidden collapse their auto-row to the border height */
.insights-page .turnlist { display: block; max-height: 62vh; overflow: auto; padding-right: 2px; }
.insights-page .turnlist > .turnrow { margin-bottom: 8px; }
.insights-page .turnlist > .turnrow:last-child { margin-bottom: 0; }
.insights-page .turn-sum { padding: 0 2px 4px; font-size: 11px; }
/* 会话轨迹 turn-rail */
.insights-page .turnrail-block { background: var(--ins-inner); }
.insights-page .turnrail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.insights-page .turnrail-legend { display: flex; gap: 11px; flex-wrap: wrap; font-size: 11px; color: var(--mut); }
.insights-page .rl-item { display: inline-flex; align-items: center; gap: 4px; }
.insights-page .rl-item i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.insights-page .turnrail { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 10px; }
/* filled phase-color nodes on a serial main line (mirrors reference design) */
.insights-page .railnode { position: relative; min-width: 27px; height: 27px; padding: 0 7px; border: none; border-radius: 7px; background: var(--ph-discuss); color: #fff; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform .1s ease, box-shadow .1s ease; }
.insights-page .railnode > span { text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.insights-page .railnode:hover { transform: translateY(-2px); box-shadow: 0 3px 10px rgba(0, 0, 0, .3); }
.insights-page .railnode.phase-research { background: var(--ph-research); }
.insights-page .railnode.phase-edit { background: var(--ph-edit); }
.insights-page .railnode.phase-run { background: var(--ph-run); }
.insights-page .railnode.phase-delegate { background: var(--ph-delegate); }
.insights-page .railnode.phase-discuss { background: var(--ph-discuss); }
.insights-page .railnode.phase-unknown { background: var(--ph-unknown); }
.insights-page .railnode.hot { outline: 2px solid var(--acc); outline-offset: 1px; }
.insights-page .railnode.dim { opacity: .3; }
.insights-page .railnode .rb { position: absolute; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--ins-inner); }
.insights-page .railnode .rb-fail { top: -3px; right: -3px; background: var(--bad); }
.insights-page .railnode .rb-slow { bottom: -3px; right: -3px; background: var(--warn); }
.insights-page .railnode .rb-rec { top: -3px; left: -3px; background: var(--acc); }
/* 委派分支 — subagent branch dots between main-line nodes */
.insights-page .railbranch { display: inline-flex; align-items: center; gap: 2px; padding: 0 2px; }
.insights-page .rbr-sub { width: 6px; height: 6px; border-radius: 50%; background: #2bb6c4; display: inline-block; }
.insights-page .rl-sep { border-left: 1px solid var(--line); padding-left: 11px; }
/* 工作时序 Gantt */
.insights-page .gantt-block { background: var(--ins-inner); }
.insights-page .gantt-cap { font-size: 11px; color: var(--mut); font-variant-numeric: tabular-nums; }
.insights-page .gantt { margin-top: 10px; }
.insights-page .gtrack { position: relative; height: 34px; background: var(--ins-recess); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.insights-page .gbar { position: absolute; top: 5px; height: 24px; min-width: 2px; padding: 0; border: none; border-radius: 2px; background: var(--ph-discuss); opacity: .8; cursor: pointer; }
.insights-page .gbar:hover { opacity: 1; box-shadow: 0 0 0 1px var(--fg); z-index: 2; }
.insights-page .gbar.phase-research { background: var(--ph-research); }
.insights-page .gbar.phase-edit { background: var(--ph-edit); }
.insights-page .gbar.phase-run { background: var(--ph-run); }
.insights-page .gbar.phase-delegate { background: var(--ph-delegate); }
.insights-page .gbar.phase-discuss { background: var(--ph-discuss); }
.insights-page .gbar.phase-unknown { background: var(--ph-unknown); }
.insights-page .gbar.gbar-slow { top: 1px; height: 32px; }
.insights-page .gbar.gbar-fail { background: var(--bad); box-shadow: 0 0 0 1px var(--bad); opacity: 1; }
/* 上下文曲线 context curve */
.insights-page .ctxcurve-block { background: var(--ins-inner); }
.insights-page .ctxchart { display: flex; gap: 8px; margin-top: 10px; }
.insights-page .ctxyaxis { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; width: 52px; padding-bottom: 16px; font-size: 10px; color: var(--mut); font-variant-numeric: tabular-nums; }
.insights-page .ctxplot { flex: 1; min-width: 0; }
.insights-page .ctxcurve { display: block; width: 100%; height: 72px; background: var(--ins-recess); border: 1px solid var(--line); border-radius: 6px; }
.insights-page .ctxline { fill: none; stroke: var(--acc); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.insights-page .ctxarea { fill: var(--accent-soft); opacity: .4; stroke: none; }
.insights-page .ctxhit { fill: transparent; cursor: crosshair; }
.insights-page .ctxhit:hover { fill: var(--acc); opacity: .12; }
.insights-page .ctxxaxis { display: flex; justify-content: space-between; margin-top: 3px; font-size: 10px; color: var(--mut); font-variant-numeric: tabular-nums; }
/* shared hover tooltip for rail / gantt / context curve */
.insights-page .ins-tip { position: fixed; z-index: 1200; pointer-events: none; max-width: 340px; padding: 5px 9px; font-size: 11px; line-height: 1.5; color: var(--fg); background: var(--panel); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 4px 16px rgba(0, 0, 0, .32); font-variant-numeric: tabular-nums; white-space: nowrap; }
.insights-page .ins-tip[hidden] { display: none; }
.insights-page .turnrow { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--ph-discuss); border-radius: var(--radius-lg); overflow: hidden; }
.insights-page .turnrow.sev-bad { border-left-color: var(--bad); }
.insights-page .turnrow.sev-warn { border-left-color: var(--warn); }
.insights-page .turnrow.sev-info { border-left-color: var(--line); }
.insights-page .turnrow.flagged { background: var(--ins-inner); }
.insights-page .turnrow.hot { box-shadow: 0 0 0 1px var(--acc) inset; }
.insights-page .turnline { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 8px 11px; }
.insights-page .turnrow .turn-headline { font-size: 12px; }
.insights-page .turnrow.sev-info .turn-headline { color: var(--mut); font-weight: 500; }
.insights-page .turn-strip { flex: 1 1 120px; }
.insights-page .turn-mini { font-size: 11px; color: var(--mut); font-family: var(--mono); flex: 0 0 auto; }
.insights-page .turn-expand-btn {
  flex: 0 0 auto; cursor: pointer; font: inherit; font-size: 11px; color: var(--mut);
  background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 1px 10px;
}
.insights-page .turn-expand-btn:hover { color: var(--fg); border-color: var(--acc); }
.insights-page .turnrow.open .turn-expand-btn { color: var(--acc); border-color: var(--acc); }
.insights-page .turn-prompt { display: flex; gap: 8px; padding: 0 11px 8px; font-size: 12px; align-items: flex-start; }
.insights-page .tp-label { flex: 0 0 auto; font-size: 10px; color: var(--mut); text-transform: uppercase; letter-spacing: .04em; border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; margin-top: 2px; }
/* prompt source attribution chip (人 / bot / a2a) — replaces the generic 用户 chip when known */
.insights-page .tp-src { display: inline-flex; align-items: center; gap: 3px; max-width: 16em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: none; letter-spacing: 0; }
.insights-page .tp-src-bot { border-color: var(--ph-delegate); color: var(--ph-delegate); }
.insights-page .tp-src-a2a { border-color: var(--acc); color: var(--acc); }
.insights-page .tp-src-system { border-color: var(--line); color: var(--mut); opacity: .85; }
.insights-page .tp-mentions { font-size: 10px; color: var(--mut); align-self: center; }
/* 系统 sender filter chip is a muted opt-in (codex: system 默认弱化) */
.insights-page .spanchip-sys { color: var(--mut); opacity: .8; }
.insights-page .spanchip-sys.on { opacity: 1; }

/* full-text prompt modal (老滕: 弹窗看全文) — fixed overlay + centred reading panel */
.insights-page .insight-modal { position: fixed; inset: 0; z-index: 1000; }
.insights-page .insight-modal[hidden] { display: none; }
.insights-page .modal-backdrop { position: absolute; inset: 0; background: var(--modal-backdrop); backdrop-filter: blur(3px); }
.insights-page .modal-panel { position: relative; margin: 6vh auto 0; width: min(760px, calc(100% - 32px)); max-height: 84vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--modal-shadow); overflow: hidden; animation: insight-fade-up .18s ease both; }
.insights-page .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border-soft); flex: 0 0 auto; }
.insights-page .modal-who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.insights-page .modal-turnno { font-family: var(--mono); font-size: 11px; color: var(--mut); }
.insights-page .modal-acts { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.insights-page .modal-close { cursor: pointer; font-size: 20px; line-height: 1; color: var(--mut); background: none; border: none; padding: 0 2px; }
.insights-page .modal-close:hover { color: var(--fg); }
.insights-page .modal-body { padding: 14px 16px; overflow: auto; }
.insights-page .modal-md { font-size: 13px; }
.insights-page .modal-raw { font-size: 12px; max-height: none; }
.insights-page .modal-trunc { margin: 10px 0 0; font-size: 11px; }

/* 对话回放 (conversation replay) — Feishu-style chat bubbles + load-more */
.insights-page .convo { display: flex; flex-direction: column; gap: 10px; }
.insights-page .convo-controls { display: flex; flex-direction: column; gap: 8px; }
.insights-page .convo-search { width: 100%; padding: 7px 11px; background: var(--ins-inner); border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--fg); font: inherit; font-size: 13px; }
.insights-page .convo-search:focus { outline: none; border-color: var(--acc); }
.insights-page .convo-filters { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.insights-page .convo-filters .spanfilter { margin-bottom: 0; align-items: center; }
.insights-page .convo-flabel { font-size: 11px; color: var(--mut); margin-right: 2px; align-self: center; }
.insights-page .convothread { display: flex; flex-direction: column; gap: 10px; max-height: 64vh; overflow: auto; padding: 4px 2px; }
.insights-page .cbub { max-width: 82%; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 8px 11px; display: flex; flex-direction: column; gap: 5px; }
.insights-page .cbub-left { align-self: flex-start; border-top-left-radius: 3px; }
.insights-page .cbub-right { align-self: flex-end; border-top-right-radius: 3px; background: var(--accent-soft); border-color: var(--acc); }
.insights-page .cbub.sev-bad { border-left: 3px solid var(--bad); }
.insights-page .cbub.sev-warn { border-left: 3px solid var(--warn); }
.insights-page .cbub-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.insights-page .cbub-turn { font-family: var(--mono); font-size: 10px; color: var(--mut); }
.insights-page .cbub-opcount { font-size: 10px; color: var(--mut); }
.insights-page .cbub-rec { font-size: 10px; color: var(--warn); border: 1px solid var(--warn); border-radius: 999px; padding: 0 6px; max-width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insights-page .cbub-body { font-size: 13px; min-width: 0; }
.insights-page .cbub-body .md-body { font-size: 13px; }
.insights-page .cbub-foot { display: flex; justify-content: flex-end; }
.insights-page .cbub-ops { background: var(--ins-recess); max-width: 88%; }
/* agent narration ("说了什么") inside the agent bubble, above its operations */
.insights-page .cbub-saywrap { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 8px; }
.insights-page .cbub-say { font-size: 13px; color: var(--fg); border-left: 2px solid var(--acc); padding-left: 9px; overflow-wrap: anywhere; word-break: break-word; }
.insights-page .cbub-say .md-body { font-size: 13px; }
.insights-page .cbub-ops-list { display: flex; flex-direction: column; gap: 3px; }
.insights-page .cop-line { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12px; padding: 3px 5px; border-radius: 6px; }
.insights-page .cop-line.clickable { cursor: pointer; }
.insights-page .cop-line.clickable:hover { background: var(--ins-inner); }
.insights-page .cop.open > .cop-line { background: var(--ins-inner); }
.insights-page .cop.bad .span-what { color: var(--bad); }
.insights-page .cop .spandetail { border: 1px solid var(--line); border-radius: 6px; margin-top: 3px; }
.insights-page .convo-more { display: flex; justify-content: center; padding: 6px 0 2px; }
.insights-page p.convo-more { font-size: 11px; }
.insights-page .convo-loadmore { font-size: 12px; padding: 5px 16px; }

/* 文件改动 + 跑过的命令 — work-summary panels at the top of 动作 span */
.insights-page .worksum { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.insights-page .ws-panel { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--ins-recess); padding: 9px 11px; min-width: 0; }
.insights-page .ws-panel h4 { margin: 0 0 7px; font-size: 12px; color: var(--mut); font-weight: 650; }
.insights-page .ws-list { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow: auto; }
.insights-page .ws-row { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.insights-page .ws-path, .insights-page .ws-cmd { font-family: var(--mono); font-size: 11px; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; }
.insights-page .ws-path { direction: rtl; text-align: left; }
.insights-page .ws-row.bad .ws-cmd { color: var(--bad); }
.insights-page .ws-meta { flex: 0 0 auto; display: inline-flex; gap: 6px; align-items: center; color: var(--mut); font-size: 10.5px; font-family: var(--mono); }
.insights-page .ws-stat { flex: 0 0 auto; display: inline-flex; gap: 7px; align-items: baseline; font-family: var(--mono); font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums; }
.insights-page .ws-stat-edits { color: var(--mut); font-weight: 500; }
.insights-page .ws-add { color: var(--success); }
.insights-page .ws-del { color: var(--danger); }
.insights-page .ws-x { color: var(--mut); }
.insights-page .ws-fail { color: var(--bad); }
@media (max-width: 760px) { .insights-page .worksum { grid-template-columns: 1fr; } }
/* prompt 原文: markdown-rendered by default, clamped (展开 lifts the clamp, 原文 shows raw) */
.insights-page .tp-body { flex: 1 1 auto; min-width: 0; display: grid; gap: 4px; }
.insights-page .tp-md { max-height: 7.5em; overflow: auto; }
.insights-page .tp-md.expanded { max-height: 60vh; }
.insights-page .tp-actions { display: flex; gap: 6px; }
.insights-page .tp-toggle { cursor: pointer; font: inherit; font-size: 10px; color: var(--mut); background: none; border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; }
.insights-page .tp-toggle:hover { color: var(--fg); border-color: var(--acc); }
.insights-page .tp-raw { margin: 0; font-family: var(--mono); font-size: 11px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--fg); }
/* markdown body — compact, scoped to .insights-page, dashboard tokens only (no new palette) */
.insights-page .md-body { color: var(--fg); line-height: 1.55; overflow-wrap: anywhere; }
.insights-page .md-body > :first-child { margin-top: 0; }
.insights-page .md-body > :last-child { margin-bottom: 0; }
.insights-page .md-body p { margin: 4px 0; }
.insights-page .md-body h1, .insights-page .md-body h2, .insights-page .md-body h3,
.insights-page .md-body h4, .insights-page .md-body h5, .insights-page .md-body h6 { margin: 7px 0 3px; font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.insights-page .md-body ul, .insights-page .md-body ol { margin: 4px 0; padding-left: 18px; }
.insights-page .md-body li { margin: 1px 0; }
.insights-page .md-body blockquote { margin: 5px 0; padding: 2px 10px; border-left: 3px solid var(--line); color: var(--mut); }
.insights-page .md-body a { color: var(--acc); text-decoration: underline; }
.insights-page .md-body code { font-family: var(--mono); font-size: 11px; background: var(--ins-inner); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
.insights-page .md-body pre { margin: 5px 0; background: var(--ins-inner); border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px; overflow-x: auto; }
.insights-page .md-body pre code { background: none; border: none; padding: 0; font-size: 11px; line-height: 1.5; white-space: pre; }
.insights-page .md-body table { border-collapse: collapse; margin: 5px 0; font-size: 11px; display: block; overflow-x: auto; }
.insights-page .md-body th, .insights-page .md-body td { border: 1px solid var(--line); padding: 3px 8px; text-align: left; }
.insights-page .md-body th { background: var(--ins-inner); }
.insights-page .md-body img { max-width: 100%; height: auto; }
.insights-page .md-body hr { border: none; border-top: 1px solid var(--line); margin: 7px 0; }
.insights-page .turn-advice { padding: 0 11px 8px; font-size: 12px; color: var(--warn); line-height: 1.45; }
.insights-page .turnrow.sev-bad .turn-advice { color: var(--bad); }
.insights-page .turn-detail { border-top: 1px dashed var(--line); background: var(--ins-recess); padding: 9px 11px; display: grid; gap: 8px; }
.insights-page .turn-detail .turn-metrics { margin-top: 0; }

/* raw command/output preview inside a 详情 drawer (owner-only, run-class spans) */
.insights-page .span-io { display: grid; gap: 3px; }
.insights-page .span-io-label { font-size: 10px; color: var(--mut); text-transform: uppercase; letter-spacing: .04em; }
.insights-page .span-io-text {
  margin: 0; font-family: var(--mono); font-size: 11.5px; line-height: 1.5; color: var(--fg);
  background: var(--ins-inner); border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px;
  max-height: 220px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere;
}

/* 逐轮对账 grouped-by-recommendation mode: section header + turns beneath it */
.insights-page .ledgersort { margin-bottom: 10px; }
.insights-page .turn-group { margin-bottom: 16px; }
.insights-page .turn-group:last-child { margin-bottom: 0; }
.insights-page .turn-group > .turnrow { margin-bottom: 8px; }
.insights-page .turn-group > .turnrow:last-child { margin-bottom: 0; }
.insights-page .turn-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px 7px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.insights-page .turn-group-head b { font-size: 12px; color: var(--fg); }
.insights-page .turn-group-head span { font-size: 11px; color: var(--mut); font-family: var(--mono); flex: 0 0 auto; }
.insights-page .turn-group-head.sev-bad b { color: var(--bad); }
.insights-page .turn-group-head.sev-warn b { color: var(--warn); }

/* motion: staggered page-load reveal + grow failure bars */
@keyframes insight-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes insight-bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.insights-page .insights-metrics { animation: insight-fade-up .35s ease both; }
.insights-page .insights-overview-grid { animation: insight-fade-up .35s ease both; animation-delay: .05s; }
.insights-page .insight-panel { animation: insight-fade-up .35s ease both; animation-delay: .1s; }
@media (prefers-reduced-motion: reduce) {
  .insights-page .insights-metrics,
  .insights-page .insights-overview-grid,
  .insights-page .insight-panel,
  .insights-page .hbfill { animation: none; }
  .insights-page .srow { transition: none; }
  .insights-page .srow:hover { transform: none; }
}

/* ─── Dropdown baseline ────────────────────────────────────────────────────
   Workbench SortMenu is the source of truth: surface trigger, soft border,
   capsule shape, compact typography, and light accent hover/selected states. */
.page select:not([multiple]),
dialog select:not([multiple]) {
  box-sizing: border-box;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 0 36px 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background-color: var(--surface);
  background-position: right 14px center;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  line-height: normal;
  cursor: pointer;
  box-shadow: none;
}

.page select:not([multiple]):hover:not(:disabled),
dialog select:not([multiple]):hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft));
  background-color: color-mix(in srgb, var(--accent) 4%, var(--surface));
  color: var(--accent-strong);
}

.page select:not([multiple]):focus,
dialog select:not([multiple]):focus {
  border-color: var(--accent);
  background-color: var(--surface);
  color: var(--fg);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.page select[multiple],
dialog select[multiple] {
  min-height: 92px;
  padding: 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background-color: var(--surface);
  background-image: none;
  color: var(--fg);
  box-shadow: none;
}

.page select[multiple]:hover:not(:disabled),
dialog select[multiple]:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border-soft));
}

:root[data-theme="dark"] .page select:not([multiple]),
:root[data-theme="dark"] dialog select:not([multiple]) {
  background-color: var(--surface);
  border-color: var(--border-soft);
}

:root[data-theme="dark"] .page select[multiple],
:root[data-theme="dark"] dialog select[multiple] {
  background-color: var(--surface);
  border-color: var(--border-soft);
}

.page.insights-page form.dashboard-toolbar > input[type="search"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]) {
  box-sizing: border-box;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  box-shadow: none;
  outline: none;
}

.page.insights-page form.dashboard-toolbar > input[type="search"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):hover:not(:disabled),
.page.insights-page form.dashboard-toolbar > input[type="search"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):focus {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
  box-shadow: none;
}

.page.insights-page form.dashboard-toolbar > .ins-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
}

.page.insights-page form.dashboard-toolbar > .ins-clear:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

/* ─── Bot 配置：平台化表单控件 ───────────────────────────────────────────── */
.bot-defaults-page .bd-detail,
.bot-defaults-page .bd-card.bd-profile {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.bot-defaults-page .bd-layout {
  grid-template-columns: 232px minmax(0, 1fr);
}

.bot-defaults-page .bd-detail {
  min-width: 0;
  container-type: inline-size;
}

:root[data-theme="dark"] .bot-defaults-page .bd-card.bd-profile {
  background: transparent;
  border-color: transparent;
  backdrop-filter: none;
  background-image: none;
}

.bot-defaults-page .bd-profile-chrome {
  position: sticky;
  top: 0;
  z-index: 40;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.bot-defaults-page .bd-profile-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "avatar main"
    "status status";
  align-items: center;
  column-gap: 12px;
  row-gap: 0; /* empty status row must add no vertical space (its own margin spaces it when present) */
  margin-bottom: 0;
  padding: 12px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.bot-defaults-page .bd-profile-head > .bd-profile-avatar { grid-area: avatar; }
.bot-defaults-page .bd-profile-head > .bd-profile-main { grid-area: main; }

/* Avatar status is a full-width in-flow strip on the header's 2nd row — no
   longer absolutely positioned under the small avatar (which overlapped the
   name-status and bled into the tab bar). */
.bot-defaults-page .bd-profile-head > .bd-avatar-status {
  grid-area: status;
  position: static;
  min-width: 0;
  max-width: none;
  margin: 8px 0 0;
  box-shadow: none;
}
.bot-defaults-page .bd-profile-head > .bd-avatar-status:empty { display: none; }

:root[data-theme="dark"] .bot-defaults-page .bd-profile-head {
  border-color: transparent;
  background: transparent;
  backdrop-filter: none;
}

.bot-defaults-page .bd-profile-avatar {
  width: 50px;
  height: 50px;
}

.bot-defaults-page .bd-profile-head .orb-avatar {
  width: 42px;
  height: 42px;
}

.bot-defaults-page .bd-profile-title-row {
  min-height: 28px;
  padding-right: 42px;
}

.bot-defaults-page .bd-profile-title-content > strong {
  min-height: 24px;
  font-size: 16px;
}

.bot-defaults-page .bd-profile-id .mate-role,
.bot-defaults-page .bd-profile-meta small {
  min-height: 24px;
  padding: 0 9px;
  font-size: 10.5px;
}

.bot-defaults-page .bd-name-edit {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  /* icon-only button: an inline SVG pencil (centered by flex on the base rule) */
  font-size: 0;
}

.bot-defaults-page .bd-name-edit > svg {
  display: block;
}

.bot-defaults-page .bd-tab-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  min-height: 44px;
  padding: 0 12px;
  border-top: 1px solid var(--border-soft);
  background: var(--surface-muted);
}

.bot-defaults-page .bd-tabs {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: 2px;
  min-width: 0;
}

.bot-defaults-page .bd-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-width: 0;
  padding: 0 11px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.bot-defaults-page .bd-tab::after {
  position: absolute;
  right: 9px;
  bottom: -1px;
  left: 9px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: transparent;
  content: "";
  transform: scaleX(0.55);
  transition: background-color 150ms ease, transform 180ms ease;
}

.bot-defaults-page .bd-tab:hover {
  color: var(--fg);
}

.bot-defaults-page .bd-tab.active {
  color: var(--accent-strong);
}

.bot-defaults-page .bd-tab.active::after {
  background: var(--accent);
  transform: scaleX(1);
}

.bot-defaults-page .bd-tab:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 66%, transparent);
  outline-offset: -4px;
}

/* 保存成功状态 1.5s 后淡出（StatusSpan 以文案为 key 重挂载以重启动画） */
.bot-defaults-page .oncall-status.hint-ok {
  animation: bd-status-fade 0.3s ease 1.5s forwards;
}

@keyframes bd-status-fade {
  to { opacity: 0; transform: translateY(-2px); }
}

.bot-defaults-page .bd-tab-hint {
  flex: none;
  color: var(--faint);
  font-size: 10.5px;
  line-height: 1.3;
  white-space: nowrap;
}

.bot-defaults-page .bd-tab-panels {
  margin-top: 14px;
}

.bot-defaults-page .bd-tab-panel[hidden] {
  display: none;
}

.bot-defaults-page .bd-tab-panel:not([hidden]) {
  animation: bd-tab-enter 180ms ease-out both;
}

@keyframes bd-tab-enter {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .bot-defaults-page .bd-tab-panel:not([hidden]) {
    animation: none;
  }

  .bot-defaults-page .bd-tab::after {
    transition: none;
  }
}

.bot-defaults-page .bd-tab-grid {
  /* Two-column waterfall (masonry). A plain row-major grid locks each row to
     the tallest tile, so a short tile beside a tall one leaves a dead vertical
     gap below it. At ≥2 columns the JS in the BdTabGrid component measures every
     tile and greedily assigns each to the currently shortest column via inline
     grid-column / grid-row over a fine 1px row track, so a short tile packs
     directly under its neighbour. Tiles stay direct grid children (never
     reparented into per-column wrappers) so their unsaved form drafts survive.
     Default is a single column with normal auto rows (no 1px track, or
     auto-placed tiles would collapse onto 1px rows and overlap); the fine row
     track is only switched on inside the 2-column container query below. */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: auto;
  gap: 14px;
  align-items: start;
}

/* Two columns only once the detail pane is wide enough that each column stays
   comfortable (~500px); below that, one column — avoids the cramped narrow
   cards. Threshold matches the column-count decision in the BdTabGrid JS so CSS
   tracks and JS placement never disagree. Uses the .bd-detail container query
   (container-type: inline-size). The 1px auto-row track that the JS masonry
   spans over is scoped here so the single-column fallback keeps auto rows. */
@container (min-width: 1024px) {
  .bot-defaults-page .bd-tab-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1px;
  }
}

.bot-defaults-page .bd-tab-grid > .bd-tile-wide {
  /* full-bleed tile (e.g. sandbox paths) spans every column */
  grid-column: 1 / -1;
}

.bot-defaults-page .bd-tab-grid > .bd-tile {
  min-width: 0;
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: none;
}

:root[data-theme="dark"] .bot-defaults-page .bd-tab-grid > .bd-tile {
  border-color: var(--border-soft);
  background: var(--surface);
  backdrop-filter: none;
}

.bot-defaults-page .bd-tab-grid .bd-section-title::before,
.bot-defaults-page .bd-tab-grid .bd-section > .bd-section-title::before,
.bot-defaults-page .bd-tab-grid .bd-subsection > .bd-subsection-title::before {
  display: none;
}

.bot-defaults-page .bd-tab-grid :where(.bd-section-title, .bd-subsection-title) {
  gap: 6px;
  font-weight: 650;
}

.bot-defaults-page .bd-tab-grid .bd-section-title {
  font-size: 13px;
}

.bot-defaults-page .bd-tab-grid .bd-subsection-title {
  font-size: 12px;
}

/* Inside a tile, a section note is a descriptive paragraph, not a short inline
   caption. The global rule makes a title-followed-by-note render inline
   (title inline-flex + note inline-block, left-margin) — fine for a short note,
   but a long paragraph (e.g. the sandbox deny-by-default explainer) then wraps
   cramped beside the title. Force them to stack: title on its own line, note
   as a full-width block below it. */
.bot-defaults-page .bd-tab-grid :where(.bd-section-title, .bd-subsection-title):has(+ .bd-section-note) {
  display: block;
  margin-bottom: 4px;
}

.bot-defaults-page .bd-tab-grid :where(.bd-section-title, .bd-subsection-title) + .bd-section-note {
  display: block;
  max-width: none;
  margin: 0 0 8px;
}

/* A .bd-subsection carries a dashed top border to divide it from a sibling
   subsection WITHIN a section. When it is promoted to be a tile's own content
   (e.g. 会话常驻上限 / 启动命令 as standalone tiles), that top divider is
   spurious — the tile border already frames it. Drop it. */
.bot-defaults-page .bd-tab-grid > .bd-tile > .bd-subsection:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.bot-defaults-page .bd-profile-head > .bd-profile-meta {
  align-self: center;
}

.bot-defaults-page .bd-roster {
  top: 0;
}

.bot-defaults-page #bd-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 5px;
}

.bot-defaults-page .bd-roster-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 24px;
  padding: 2px 5px 3px;
  color: var(--faint);
  font-size: 10.5px;
  font-weight: 600;
}

.bot-defaults-page #bd-filters > input[type="search"] {
  box-sizing: border-box;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  box-shadow: none;
  outline: none;
}

.bot-defaults-page #bd-filters > input[type="search"]:hover:not(:disabled),
.bot-defaults-page #bd-filters > input[type="search"]:focus {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
  box-shadow: none;
}

.bot-defaults-page .bd-roster-list {
  display: grid;
  gap: 3px;
  min-width: 0;
}

@media (max-width: 980px) {
  .bot-defaults-page .bd-layout {
    grid-template-columns: 1fr;
  }

  .bot-defaults-page .bd-roster {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    max-height: min(340px, 42vh);
    overflow: hidden;
  }

  .bot-defaults-page .bd-roster-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 3px;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: 2px;
    overscroll-behavior: contain;
  }

  .bot-defaults-page .bd-roster-list .bd-roster-item {
    min-width: 0;
  }

  .bot-defaults-page .bd-profile-chrome {
    position: static;
  }

  .bot-defaults-page .bd-tab-bar {
    align-items: stretch;
    padding-right: 0;
    padding-left: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  .bot-defaults-page .bd-tabs {
    flex: 0 0 auto;
    padding: 0 6px;
  }

  .bot-defaults-page .bd-tab-hint {
    display: none;
  }
}

.bot-defaults-page #bd-refresh { margin-left: 0; }

.bot-defaults-page .bd-name-editor .bd-name-input {
  box-sizing: border-box;
  flex: 1 1 260px;
  width: auto;
  min-width: 180px;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  box-shadow: none;
  outline: none;
}

.bot-defaults-page .bd-profile-id .bd-name-editor {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 2px;
}

.bot-defaults-page .bd-profile-id .bd-name-editor[hidden] {
  display: none;
}

.bot-defaults-page .bd-profile-id .bd-name-editor .bd-name-input {
  box-sizing: border-box;
  flex: 1 1 280px;
  width: auto;
  min-width: 180px;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  box-shadow: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.bot-defaults-page .bd-profile-id .bd-name-editor .bd-name-input:hover:not(:disabled),
.bot-defaults-page .bd-profile-id .bd-name-editor .bd-name-input:focus {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
  box-shadow: none;
}

.bot-defaults-page .bd-profile-id .bd-name-editor input.bd-name-input[type="text"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]) {
  box-sizing: border-box;
  flex: 1 1 280px;
  width: auto;
  min-width: 180px;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  box-shadow: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.bot-defaults-page .bd-profile-id .bd-name-editor input.bd-name-input[type="text"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):hover:not(:disabled),
.bot-defaults-page .bd-profile-id .bd-name-editor input.bd-name-input[type="text"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):focus,
.bot-defaults-page .bd-profile-id .bd-name-editor input.bd-name-input[type="text"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
  box-shadow: none;
  outline: none;
}

.bot-defaults-page .bd-name-editor button {
  flex: none;
}

.bot-defaults-page .bd-name-editor .bd-name-input:hover:not(:disabled),
.bot-defaults-page .bd-name-editor .bd-name-input:focus {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
  box-shadow: none;
}

@media (max-width: 980px) {
  .bot-defaults-page .bd-profile-head {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .bot-defaults-page .bd-profile-head > .bd-profile-meta {
    grid-column: 1 / -1;
    justify-content: flex-start;
    margin-left: 0;
  }
}

.bot-defaults-page .bd-body .bd-row :where(label, .bd-field) {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.bot-defaults-page .bd-body .bd-row {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
}

/* .bd-row (display:grid) and .toggle-row (display:flex) both override the UA
   [hidden] { display:none }, so rows the React code marks hidden (e.g. the
   working-dir 目录 input in repo-picker "off" mode, or the auto-worktree toggle
   outside "default" mode) stayed visible. Restore [hidden] for these rows. */
.bot-defaults-page .bd-body .bd-row[hidden],
.bot-defaults-page .bd-body .toggle-row[hidden] {
  display: none;
}

.bot-defaults-page .bd-body .bd-row + .bd-row,
.bot-defaults-page .bd-body .toggle-row + .bd-row,
.bot-defaults-page .bd-body .bd-row + .toggle-row {
  margin-top: 12px;
}

.bot-defaults-page .bd-body .bd-row :where(label, .bd-field) > span {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.bot-defaults-page .bd-codex-runtime {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--border-soft) 82%, transparent);
}

.bot-defaults-page .bd-runtime-heading {
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.bot-defaults-page .bd-runtime-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
}

.bot-defaults-page .bd-runtime-mode > button {
  min-width: 0;
  min-height: var(--button-height);
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: none;
}

.bot-defaults-page .bd-runtime-mode > button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--accent) 46%, var(--border-soft));
  background: var(--surface);
  color: var(--accent-strong);
}

.bot-defaults-page .bd-runtime-mode > button:hover:not(:disabled),
.bot-defaults-page .bd-runtime-mode > button:focus-visible {
  border-color: var(--accent);
  color: var(--accent-strong);
  outline: none;
}

.bot-defaults-page .bd-runtime-mode > button:active:not(:disabled) {
  transform: scale(.99);
}

.bot-defaults-page .bd-runtime-note {
  margin: -2px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.bot-defaults-page .bd-runtime-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.bot-defaults-page .bd-runtime-fields > :where(label, .bd-field) {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.bot-defaults-page .bd-runtime-fields > :where(label, .bd-field) > span {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.bot-defaults-page .bd-runtime-fields > .bd-runtime-wide {
  grid-column: 1 / -1;
}

.bot-defaults-page .bd-codex-runtime > .oncall-status {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.5;
}

.bot-defaults-page .bd-codex-runtime > .oncall-status:empty {
  display: none;
}

.bot-defaults-page .bd-field-title,
.bot-defaults-page .toggle-tx .bd-field-title,
.bot-defaults-page :where(.bd-section-title, .bd-subsection-title) .bd-field-title,
.bot-defaults-page .bd-body .bd-row .bd-field-title {
  position: relative;
  display: inline-grid;
  grid-template-columns: minmax(0, max-content) auto;
  align-items: center;
  column-gap: 6px;
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
  vertical-align: baseline;
}

.bot-defaults-page .bd-field-title-text {
  display: block;
  width: auto;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-overflow: ellipsis;
}

.bot-defaults-page .bd-info-tip {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin: 0;
  outline: none;
  color: var(--faint);
  cursor: default;
}

.bot-defaults-page .bd-body .bd-row .bd-field-title .bd-field-title-text,
.bot-defaults-page .bd-body .bd-row .bd-field-title .bd-info-tip,
.bot-defaults-page .bd-body .bd-row .bd-field-title .ui-info-mark {
  margin: 0;
}

.bot-defaults-page .bd-body .bd-row .bd-field-title .bd-field-title-text {
  display: block;
}

.bot-defaults-page .bd-body .bd-row .bd-field-title .bd-info-tip {
  display: inline-grid;
}

.bot-defaults-page .bd-info-tip .ui-info-mark {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--border-soft) 92%, transparent);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--surface) 92%, var(--surface-muted));
  color: inherit;
  font-family: inherit;
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
  text-align: center;
}

.bot-defaults-page .bd-info-tip:hover .ui-info-mark,
.bot-defaults-page .bd-info-tip:focus .ui-info-mark,
.bot-defaults-page .bd-info-tip:focus-within .ui-info-mark {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.bot-defaults-page .bd-info-tip:hover,
.bot-defaults-page .bd-info-tip:focus,
.bot-defaults-page .bd-info-tip:focus-within {
  color: var(--accent);
}

.bot-defaults-page :where(.bd-section, .bd-subsection) > .bd-section-note {
  margin: 6px 0 0;
}

.bot-defaults-page :where(.bd-section, .bd-subsection) > .bd-section-note + :where(input, textarea, .bd-row) {
  margin-top: 8px;
}

.bot-defaults-page .bd-runtime-env > .bd-subsection:first-of-type {
  margin-top: 10px;
  padding-top: 0;
  border-top: 0;
}

/* Default-role injection mode selector (once / every) — a compact labelled row
   between the role textarea and its save button. */
.bot-defaults-page .bd-role-inject {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.bot-defaults-page .bd-role-inject > .bd-subsection-title {
  margin: 0;
}

.bot-defaults-page .bd-role-inject-menu {
  min-width: 148px;
}

/* Bot-config toggle-rows all carry a single-line label, so the switch should
   sit vertically centered against it. The base .toggle-row uses
   align-items:flex-start (for multi-line labels elsewhere, e.g. plugin/settings
   pages), which top-aligns the 20px switch above the single text line and looks
   misaligned here. Center them within this page only. */
.bot-defaults-page .toggle-row {
  align-items: center;
}
.bot-defaults-page .toggle-row .switch {
  margin-top: 0;
  transition: background 140ms ease, transform 100ms ease;
}
.bot-defaults-page .toggle-row:active:not(:has(input:disabled)) .switch {
  transform: scale(0.96);
}
.bot-defaults-page .toggle-row input:focus-visible + .switch {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.bot-defaults-page .toggle-row:has(input:disabled) {
  cursor: not-allowed;
}
.bot-defaults-page .toggle-row input:disabled ~ .toggle-tx {
  color: var(--faint);
}

.bot-defaults-page .bd-tile :where(input[type="text"], input[type="number"], textarea) {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--fg);
  box-shadow: none;
  outline: none;
}

.bot-defaults-page .bd-tile :where(input[type="text"], input[type="number"]) {
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
}

.bot-defaults-page .bd-tile textarea {
  min-height: 96px;
  padding: 10px 12px;
  border-radius: var(--radius-lg);
  font: 12px/1.5 var(--mono);
  resize: vertical;
}

.bot-defaults-page .bd-owner-reminder-states {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
}

.bot-defaults-page .bd-owner-reminder-states label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text);
  font-size: 13px;
}

@media (max-width: 620px) {
  .bot-defaults-page .bd-owner-reminder-states { grid-template-columns: 1fr; }
}

.bot-defaults-page .bd-tile input[type="text"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]),
.bot-defaults-page .bd-tile input[type="number"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]) {
  width: 100%;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--fg);
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  box-shadow: none;
  outline: none;
}

.bot-defaults-page .bd-tile :where(input[type="text"], input[type="number"]):hover:not(:disabled),
.bot-defaults-page .bd-tile :where(input[type="text"], input[type="number"]):focus,
.bot-defaults-page .bd-tile textarea:hover:not(:disabled),
.bot-defaults-page .bd-tile textarea:focus {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
  box-shadow: none;
}

.bot-defaults-page .bd-tile input[type="text"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):hover:not(:disabled),
.bot-defaults-page .bd-tile input[type="number"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):hover:not(:disabled),
.bot-defaults-page .bd-tile input[type="text"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):focus,
.bot-defaults-page .bd-tile input[type="number"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):focus {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
  box-shadow: none;
}

.bot-defaults-page .bd-toggle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.bot-defaults-page .bd-toggle-grid .toggle-row {
  min-width: 0;
  height: 100%;
  margin: 0;
}

.bot-defaults-page .bd-grant-defaults {
  margin-top: 16px;
}

.bot-defaults-page .bd-grant-defaults > .actions {
  justify-content: flex-end;
}

.bot-defaults-page .bd-field-error {
  display: block;
  margin-top: 6px;
  color: var(--danger);
  font-size: 11px;
  line-height: 1.5;
}

.bot-defaults-page .bd-grant-defaults input[aria-invalid="true"] {
  border-color: var(--danger);
}

.bot-defaults-page .bd-card-settings {
  display: grid;
  gap: 16px;
  margin-top: 12px;
}

.bot-defaults-page .bd-card-setting-group {
  min-width: 0;
}

.bot-defaults-page .bd-card-setting-group + .bd-card-setting-group {
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--border-soft) 82%, transparent);
}

.bot-defaults-page .bd-card-setting-heading {
  margin: 0 0 8px;
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.bot-defaults-page .bd-card-setting-copy {
  margin: -2px 0 8px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.5;
}

.bot-defaults-page .bd-card-settings .toggle-row {
  min-width: 0;
  margin: 0;
}

.bot-defaults-page .bd-card-settings .toggle-tx small {
  display: block;
  overflow: visible;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.45;
  -webkit-box-orient: initial;
  -webkit-line-clamp: unset;
}

.bot-defaults-page .bd-card-primary-toggle {
  padding: 4px 0;
}

.bot-defaults-page .bd-card-dependent {
  display: grid;
  gap: 7px;
  margin: 8px 0 0 48px;
  padding: 10px 12px;
  border-left: 2px solid color-mix(in srgb, var(--accent) 58%, var(--border-soft));
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.bot-defaults-page .bd-card-dependent[hidden] {
  display: none;
}

.bot-defaults-page .bd-card-dependent .toggle-row {
  padding: 0;
}

.bot-defaults-page .bd-card-mode-note {
  margin: 0 0 0 48px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.5;
}

.bot-defaults-page .bd-card-setting-group > .bd-row {
  margin-top: 0;
}

.bot-defaults-page .bd-card-control-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .bot-defaults-page .toggle-row .switch {
    transition: none;
  }
}

.bot-defaults-page .bd-substitute-target-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.bot-defaults-page .bd-substitute-target-row {
  display: grid;
  grid-template-columns: minmax(92px, 0.75fr) minmax(126px, 1.35fr) minmax(104px, 1fr) var(--button-height);
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.bot-defaults-page .bd-substitute-target-row > :where(.bd-field-menu, input, .bd-substitute-target-name) {
  min-width: 0;
}

.bot-defaults-page .bd-substitute-target-add,
.bot-defaults-page .bd-substitute-target-remove {
  display: inline-grid;
  place-items: center;
  width: var(--button-height);
  min-width: var(--button-height);
  height: var(--button-height);
  min-height: var(--button-height);
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--muted);
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  box-shadow: none;
}

.bot-defaults-page .bd-substitute-target-add {
  justify-self: start;
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 44%, var(--border-soft));
}

.bot-defaults-page .bd-substitute-target-add,
.bot-defaults-page .bd-substitute-target-remove {
  position: relative;
}

.bot-defaults-page .bd-body .bd-substitute-targets :where(.bd-substitute-target-add, .bd-substitute-target-remove) > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  color: inherit;
  font-size: 0;
  line-height: 1;
}

.bot-defaults-page .bd-body .bd-substitute-targets :where(.bd-substitute-target-add, .bd-substitute-target-remove) > span::before,
.bot-defaults-page .bd-body .bd-substitute-targets :where(.bd-substitute-target-add, .bd-substitute-target-remove) > span::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  border-radius: var(--radius-full);
  background: currentColor;
  content: '';
  transform: translate(-50%, -50%);
}

.bot-defaults-page .bd-body .bd-substitute-targets .bd-substitute-target-add > span::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.bot-defaults-page .bd-body .bd-substitute-targets .bd-substitute-target-remove > span::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.bot-defaults-page .bd-body .bd-substitute-targets .bd-substitute-target-remove > span::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.bot-defaults-page .bd-substitute-target-add:hover:not(:disabled),
.bot-defaults-page .bd-substitute-target-remove:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

.bot-defaults-page .bd-substitute-target-remove:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--danger) 60%, var(--border-soft));
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  color: var(--danger);
}

@media (max-width: 720px) {
  .bot-defaults-page .bd-toggle-grid {
    grid-template-columns: 1fr;
  }

  .bot-defaults-page .bd-card-dependent {
    margin-left: 0;
  }

  .bot-defaults-page .bd-runtime-fields {
    grid-template-columns: 1fr;
  }

  .bot-defaults-page .bd-runtime-fields > .bd-runtime-wide {
    grid-column: auto;
  }

  .bot-defaults-page .bd-substitute-target-row {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) var(--button-height);
    grid-template-areas:
      "type id remove"
      "name name remove";
  }

  .bot-defaults-page .bd-substitute-target-type { grid-area: type; }
  .bot-defaults-page .bd-substitute-target-id { grid-area: id; }
  .bot-defaults-page .bd-substitute-target-name { grid-area: name; }
  .bot-defaults-page .bd-substitute-target-remove { grid-area: remove; }
}

.bot-defaults-page .bd-substitute-target-name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.bot-defaults-page .bd-substitute-target-name > input {
  flex: 1 1 auto;
  min-width: 0;
}

.bot-defaults-page .bd-substitute-target-name > input:disabled {
  background: transparent;
  color: var(--text);
  opacity: 1;
  cursor: default;
}

.bot-defaults-page .bd-substitute-target-name-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 26px;
  padding: 4px 16px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
}

:root[data-theme="dark"] .bot-defaults-page .bd-substitute-target-name-chip {
  color: var(--bg);
}

.bot-defaults-page .bd-substitute-target-resolving {
  font-size: 12px;
  color: var(--muted);
}

.bot-defaults-page .bd-substitute-target-resolution-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--border-soft));
  background: color-mix(in srgb, var(--danger) 10%, var(--surface-muted));
  color: var(--danger);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.bot-defaults-page .bd-field-menu {
  width: 100%;
  min-width: 0;
}

.bot-defaults-page .bd-field-menu > summary {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  box-sizing: border-box;
  border-radius: var(--radius-md);
  line-height: 1;
}

.bot-defaults-page .bd-field-menu .sect-sort-value {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  height: 100%;
  margin: 0;
  max-width: 100%;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
}

.bot-defaults-page .bd-field-menu .sect-sort-pop {
  left: 0;
  width: 100%;
  min-width: 100%;
  max-height: min(280px, 42vh);
  overflow-y: auto;
  transform: none;
  z-index: 1300;
}

.bot-defaults-page .bd-field-menu[open] {
  position: relative;
  z-index: 1300;
}

/* ── ModelPickerField：下拉候选 + 自定义输入（defaults 页与 onboarding 共用） ── */
.bd-model-picker {
  display: grid;
  gap: 6px;
  min-width: 0;
}

/* 自定义模式：输入框与返回按钮并排，输入框占满剩余宽度 */
.bd-model-custom {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.bd-model-custom > input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
}

.bd-model-back {
  flex: none;
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
}

/* live 探测进行中：控件下方小转圈（无文案，避免再增 i18n key） */
.bd-model-busy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.bd-model-spinner {
  width: 12px;
  height: 12px;
  flex: none;
  border: 2px solid color-mix(in srgb, currentColor 34%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: page-loading-rotate 0.8s linear infinite;
}

/* 探测结果提示（「已探测 N 个可用模型」） */
.bd-model-detected {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
}

.bot-defaults-page :where(.bd-section, .bd-subsection) > .actions,
.bot-defaults-page .bd-row > .actions {
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  min-height: var(--button-height);
  margin: 10px 0 0;
}

.bot-defaults-page .actions .oncall-status {
  order: -1;
  margin-right: auto;
}

.bot-defaults-page .actions .oncall-status:empty {
  display: none;
}

.bot-defaults-page .actions:not(:has(button)):not(:has(.oncall-status:not(:empty))) {
  display: none;
}

.bot-defaults-page :where(.actions, .bd-name-editor) button,
.bot-defaults-page #bd-refresh,
.bot-defaults-page .page-primary-action,
.bot-defaults-page .bd-feishu-login {
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
}

.bot-defaults-page :where(.actions, .bd-name-editor) button.primary,
.bot-defaults-page #bd-refresh,
.bot-defaults-page .page-primary-action,
.bot-defaults-page .bd-feishu-login {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border-soft));
  background: transparent;
  color: var(--accent);
  box-shadow: none;
}

.bot-defaults-page :where(.actions, .bd-name-editor) button.primary:hover:not(:disabled),
.bot-defaults-page #bd-refresh:hover:not(:disabled),
.bot-defaults-page .page-primary-action:hover:not(:disabled),
.bot-defaults-page .bd-feishu-login:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
  transform: none;
}

.bot-defaults-page .actions button:not(.primary):not(.danger):hover:not(:disabled),
.bot-defaults-page .bd-name-editor button:not(.primary):hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  color: var(--accent-strong);
}

dialog.onboarding-dialog .onboarding-form {
  justify-items: stretch;
  width: 100%;
}

dialog.onboarding-dialog .onboarding-session {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border-soft));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

dialog.onboarding-dialog .onboarding-session :where(p, strong, small) {
  display: block;
  margin: 0;
}

dialog.onboarding-dialog .onboarding-session strong {
  color: var(--fg);
  font-size: 12px;
  line-height: 1.4;
}

dialog.onboarding-dialog .onboarding-session small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

dialog.onboarding-dialog button.onboarding-session-action {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 10px;
  border-color: transparent;
  background: transparent;
  color: var(--accent);
  font-size: 11px;
  box-shadow: none;
}

dialog.onboarding-dialog button.onboarding-session-action:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  color: var(--accent-strong);
}

dialog.onboarding-dialog .onboarding-field {
  width: 100%;
  min-width: 0;
}

dialog.onboarding-dialog .onboarding-field-hint {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
}

dialog.onboarding-dialog .onboarding-field > :where(input[type="text"], input[type="email"], .onboarding-menu) {
  width: 100%;
  min-width: 0;
  max-width: none;
}

dialog.onboarding-dialog .onboarding-field > :where(input[type="text"], input[type="email"]) {
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  box-shadow: none;
}

dialog.onboarding-dialog .onboarding-field > :where(input[type="text"], input[type="email"]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]) {
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  box-shadow: none;
}

dialog.onboarding-dialog .onboarding-field > :where(input[type="text"], input[type="email"]):hover:not(:disabled),
dialog.onboarding-dialog .onboarding-field > :where(input[type="text"], input[type="email"]):focus {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
  outline: none;
  box-shadow: none;
}

dialog.onboarding-dialog .onboarding-field > :where(input[type="text"], input[type="email"]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):hover:not(:disabled),
dialog.onboarding-dialog .onboarding-field > :where(input[type="text"], input[type="email"]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):focus {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
  outline: none;
  box-shadow: none;
}

dialog.onboarding-dialog .onboarding-menu {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  max-width: none;
}

dialog.onboarding-dialog .onboarding-menu > summary {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  box-sizing: border-box;
  line-height: 1;
}

dialog.onboarding-dialog .onboarding-menu .sect-sort-value {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  height: 100%;
  max-width: 100%;
  line-height: 1;
}

dialog.onboarding-dialog .onboarding-menu .sect-sort-pop {
  left: 0;
  width: 100%;
  min-width: 100%;
  transform: none;
}

dialog.onboarding-dialog .onboarding-actions button.onboarding-submit.primary,
dialog.onboarding-dialog .onboarding-actions button.onboarding-submit.primary:hover:not(:disabled),
dialog.onboarding-dialog .onboarding-actions button.onboarding-submit.primary:focus,
dialog.onboarding-dialog .onboarding-actions button.onboarding-submit.primary:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border-soft));
  background: transparent;
  color: var(--accent);
  box-shadow: none;
  text-shadow: none;
}

dialog.onboarding-dialog .onboarding-actions button.onboarding-submit.primary:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

dialog.onboarding-dialog .onboarding-technical {
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 12px;
}

dialog.onboarding-dialog .onboarding-technical > summary {
  cursor: pointer;
  font-weight: 700;
}

dialog.onboarding-dialog .onboarding-technical > code {
  display: block;
  margin-top: 8px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

@media (prefers-reduced-motion: reduce) {
  dialog.onboarding-dialog .qr-card,
  dialog.onboarding-dialog .onboarding-status {
    transition-property: opacity;
  }
}

.insights-page .insight-head-acts {
  display: flex;
  align-items: center;
  gap: 8px;
}

.insights-page .insight-head-acts > button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
}

.insights-page .insight-head-acts > .ins-clear {
  border: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--muted);
}

.insights-page .insight-head-acts > .ins-clear:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

.insights-page .insight-head-acts > button.primary {
  border: 1px solid color-mix(in srgb, var(--accent) 58%, var(--border-soft));
  background: transparent;
  color: var(--accent);
}

.insights-page .insight-head-acts > button.primary:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

.insights-page .insight-heading-actions .insight-palette-trigger {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid color-mix(in srgb, var(--accent) 58%, var(--border-soft));
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
}

.insights-page .insight-heading-actions .insight-palette-trigger:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

/* ─── 创建会话 modal ─────────────────────────────────────────────────────── */
.create-session-btn { white-space: nowrap; }
.create-session-modal {
  --cs-gap: 12px;
  --cs-inner-gap: 8px;
  --cs-padding: 18px;
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  border-color: var(--border-soft);
  background: var(--surface);
  overflow: hidden;
}

.create-session-modal .cs-card {
  display: grid;
  gap: var(--cs-gap);
  max-height: calc(100vh - 32px);
  padding: var(--cs-padding);
  overflow: auto;
}

.create-session-modal .cs-header {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--section-title-row-height);
  margin: 0;
  padding-bottom: var(--cs-gap);
}

.create-session-modal .cs-header h3 {
  display: inline-flex;
  align-items: center;
  min-height: var(--section-title-text-height);
  margin: 0;
  font-size: var(--section-title-font-size);
  font-weight: 700;
  line-height: var(--section-title-text-height);
}

.create-session-modal .cs-header h3::before {
  content: none;
}

.create-session-modal #cs-form {
  display: grid;
  gap: var(--cs-gap);
}

.create-session-modal textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  resize: vertical;
  min-height: 124px;
}
.create-session-modal .cs-composer {
  position: relative;
}
.create-session-modal .cs-mention-menu {
  position: absolute;
  z-index: 3;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  display: grid;
  max-height: 220px;
  padding: 6px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: auto;
}
.create-session-modal .cs-mention-menu > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cs-inner-gap);
  width: 100%;
  min-height: 38px;
  margin: 0;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg);
  text-align: left;
  box-shadow: none;
}
.create-session-modal .cs-mention-menu > button:hover,
.create-session-modal .cs-mention-menu > button.active {
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.create-session-modal .cs-mention-menu > button small {
  min-width: 0;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.create-session-modal .cs-mention-menu > p {
  margin: 0;
  padding: 8px 10px;
  color: var(--muted);
  font-size: 12px;
}
.create-session-modal .cs-image-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: var(--cs-inner-gap);
}
.create-session-modal .cs-image-item {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.create-session-modal .cs-image-item img {
  display: block;
  width: 100%;
  height: 78px;
  border-radius: var(--radius-sm);
  object-fit: contain;
  background: var(--surface-muted);
}
.create-session-modal .cs-image-item figcaption {
  display: grid;
  gap: 2px;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.create-session-modal .cs-image-item figcaption strong {
  color: var(--fg);
  font-size: 11px;
  line-height: 1.25;
}
.create-session-modal .cs-image-item figcaption span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.create-session-modal .cs-image-item > .cs-image-remove {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  margin: 0;
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--fg);
  line-height: 1;
  box-shadow: 0 2px 8px color-mix(in srgb, #000 28%, transparent);
  touch-action: manipulation;
}
.create-session-modal .cs-image-item > .cs-image-remove svg {
  display: block;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.create-session-modal fieldset {
  margin: 0;
  padding: var(--cs-gap);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 70%, transparent);
}
.create-session-modal [hidden] {
  display: none !important;
}
.create-session-modal legend {
  padding: 0 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}
.create-session-modal .cs-content,
.create-session-modal .cs-bots,
.create-session-modal .cs-lead-row {
  display: grid;
  gap: var(--cs-inner-gap);
}

/* Shared searchable bot multi-select (create-session + new-group + add-bots).
   The list has a fixed max-height and scrolls internally so a long roster never
   grows the surrounding dialog past the viewport — the dialog action buttons
   stay reachable regardless of how many bots exist. */
.bot-multi-select {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.bot-multi-select-search {
  width: 100%;
  box-sizing: border-box;
}
.bot-multi-select-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 240px;
  overflow-y: auto;
  padding: 2px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm, 8px);
}
.bot-multi-select-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm, 8px);
  cursor: pointer;
}
.bot-multi-select-row:hover {
  background: var(--surface-hover, rgba(127, 127, 127, 0.12));
}
.bot-multi-select-main {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.bot-multi-select-main strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bot-multi-select-main small {
  color: var(--text-muted, #888);
  flex: 0 0 auto;
}
.bot-multi-select-empty {
  color: var(--text-muted, #888);
  margin: 4px 0;
}
.bot-multi-select-count {
  color: var(--text-muted, #888);
}

.create-session-modal .cs-mode,
.create-session-modal .cs-column {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cs-inner-gap);
}
.create-session-modal .cs-mode legend,
.create-session-modal .cs-column legend {
  flex: 0 0 100%;
}
.create-session-modal .cs-mode label,
.create-session-modal .cs-column label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--cs-inner-gap);
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  min-width: 0;
  margin: 0;
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  cursor: pointer;
  white-space: nowrap;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    color 150ms ease;
}
.create-session-modal :where(.cs-mode label, .cs-column label)::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: var(--radius-full);
  background: var(--border-soft);
  box-shadow: inset 0 0 0 1px var(--border);
}
.create-session-modal :where(.cs-mode label, .cs-column label) span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.create-session-modal .cs-mode label:hover,
.create-session-modal .cs-column label:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}
.create-session-modal :where(.cs-mode label, .cs-column label):has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  color: var(--accent-strong);
}
.create-session-modal :where(.cs-mode label, .cs-column label):has(input:checked)::before {
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.create-session-modal :where(.cs-mode label, .cs-column label):has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.create-session-modal :where(.cs-mode label, .cs-column label) input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.create-session-modal fieldset small {
  display: block;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.create-session-modal .cs-mode small,
.create-session-modal .cs-column small {
  flex: 0 0 100%;
}
.create-session-modal .cs-advanced-field > small {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.create-session-modal .cs-lead-row select {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  margin: 0;
  padding: 0 36px 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background-color: var(--surface);
  background-position: right 14px center;
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  line-height: normal;
}
.create-session-modal .cs-lead-row select:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft));
}
.create-session-modal .cs-lead-row select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.create-session-modal .cs-advanced {
  display: grid;
  gap: var(--cs-gap);
}
.create-session-modal .cs-advanced-title {
  display: inline-flex;
  align-items: center;
  gap: var(--cs-inner-gap);
  min-height: 20px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  transition: color 150ms ease;
}
.create-session-modal .cs-advanced-title::after {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 150ms ease;
}
.create-session-modal .cs-advanced.open .cs-advanced-title::after {
  transform: translateY(2px) rotate(225deg);
}
.create-session-modal .cs-advanced-title:hover {
  color: var(--accent-strong);
}
.create-session-modal .cs-advanced-title:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.create-session-modal .cs-advanced-fields {
  display: grid;
  gap: var(--cs-gap);
}
.create-session-modal .cs-advanced-field {
  display: grid;
  gap: var(--cs-inner-gap);
  margin: 0;
}
.create-session-modal .cs-advanced-field > span {
  display: block;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
dialog.create-session-modal .cs-advanced input.cs-pill-input[type="text"] {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: var(--button-height) !important;
  min-height: var(--button-height) !important;
  max-height: var(--button-height) !important;
  padding: 0 var(--button-padding-x) !important;
  border: 1px solid var(--border-soft) !important;
  /* The legacy global input reset uses chained :not() selectors with high specificity. */
  border-radius: var(--radius-full) !important;
  background: var(--surface) !important;
  background-clip: padding-box;
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  line-height: normal;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
dialog.create-session-modal .cs-advanced input.cs-pill-input[type="text"]:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft));
}
dialog.create-session-modal .cs-advanced input.cs-pill-input[type="text"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.create-session-modal .cs-loading {
  min-height: 96px;
  padding: var(--cs-gap);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 13px;
}
.create-session-modal .cs-actions {
  gap: var(--cs-inner-gap);
  justify-content: flex-end;
  margin: 0;
}
.create-session-modal .cs-actions button {
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
}
.create-session-modal .cs-submit {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border-soft));
  background: transparent;
  color: var(--accent);
}
.create-session-modal .cs-submit:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}
.create-session-modal .cs-warn { color: var(--warning); }
.create-session-modal .cs-keep-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 auto 0 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  user-select: none;
}
.create-session-modal .cs-keep-open input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--accent);
}
.create-session-modal .cs-keep-open:hover {
  color: var(--fg);
}
.create-session-modal .cs-keep-success {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--success) 35%, var(--border-soft));
  border-radius: var(--radius-lg);
  background: var(--success-soft);
  color: var(--success);
  font-size: 12px;
}
.create-session-modal .cs-keep-success a {
  color: inherit;
  font-weight: 700;
}

/* Feishu login QR code inline display */
.st-feishu-qr {
  margin-top: 12px;
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
  text-align: center;
}
.st-feishu-qr-hint { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.st-feishu-qr-img { width: 200px; height: 200px; display: block; margin: 0 auto 12px; }
.st-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  cursor: pointer;
  font-size: 13px;
}
.st-btn:hover { border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft)); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.st-btn-ghost { background: transparent; color: var(--muted); }
.st-larkcli-ok { margin: 8px 0 0; font-size: 12px; color: var(--success); }
.st-larkcli-warn {
  margin: 8px 0 0;
  padding: 8px 12px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--warning) 10%, var(--surface));
  color: var(--warning);
  font-size: 12px;
}
.st-larkcli-warn code {
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--fg) 7%, transparent);
  font-size: 11px;
}

/* Shared action-button primitives. Page-level creation keeps its label, while
   refresh remains compact and is named through its native tooltip/ARIA label. */
button.ui-create-action {
  --ui-create-action-gap: 6px;
  --ui-create-action-padding-x: var(--button-padding-x);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-create-action-gap);
  padding-right: var(--ui-create-action-padding-x);
  padding-left: var(--ui-create-action-padding-x);
  white-space: nowrap;
}

.ui-create-action .ui-action-icon {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}

.ui-create-action-label {
  flex: none;
  min-width: 0;
}

.page-heading-actions > button.ui-refresh-button,
.insights-page .insight-head-acts > button.ui-refresh-button,
.roles-tree-header > button.ui-refresh-button,
#bd-refresh.ui-refresh-button,
#g-refresh.ui-refresh-button,
#skills-refresh.ui-refresh-button,
#roles-refresh.ui-refresh-button,
#roles-profile-refresh.ui-refresh-button,
#insight-refresh.ui-refresh-button {
  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  width: var(--button-height);
  min-width: var(--button-height);
  max-width: var(--button-height);
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 58%, var(--border-soft));
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--accent);
  box-shadow: none;
}

button.ui-refresh-button .ui-action-icon {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.page-heading-actions > button.ui-refresh-button:hover:not(:disabled),
.insights-page .insight-head-acts > button.ui-refresh-button:hover:not(:disabled),
.roles-tree-header > button.ui-refresh-button:hover:not(:disabled),
#bd-refresh.ui-refresh-button:hover:not(:disabled),
#g-refresh.ui-refresh-button:hover:not(:disabled),
#skills-refresh.ui-refresh-button:hover:not(:disabled),
#roles-refresh.ui-refresh-button:hover:not(:disabled),
#roles-profile-refresh.ui-refresh-button:hover:not(:disabled),
#insight-refresh.ui-refresh-button:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
  transform: translateY(-1px);
}

button.ui-refresh-button.is-loading .ui-action-icon {
  animation: ui-refresh-icon-spin 760ms linear infinite;
}

@keyframes ui-refresh-icon-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  button.ui-refresh-button.is-loading .ui-action-icon {
    animation: none;
  }
}

/* ─── 会议角色预设编辑面（settings 页 VC 区块） ─────────────────────────── */
.vc-profiles-section {
  grid-column: 1 / -1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border, rgba(128, 128, 128, 0.25));
}
.vc-profile-card {
  border: 1px solid var(--border, rgba(128, 128, 128, 0.25));
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vc-profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: 10px;
}
.vc-profile-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}
.vc-profile-field > span {
  opacity: 0.75;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.vc-profile-field-head {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
/* 帮助气泡正文：i18n 文案用 \n 分段，按行呈现 */
.vc-profile-help {
  white-space: pre-line;
}
.vc-profiles-freeze {
  margin: 0;
  font-size: 12px;
  opacity: 0.7;
}
.vc-profile-field input[type='text'],
.vc-profile-field textarea {
  font: inherit;
  padding: 6px 8px;
  border: 1px solid var(--border, rgba(128, 128, 128, 0.35));
  border-radius: 6px;
  background: transparent;
  color: inherit;
}
/* 字段内下拉占满列宽，触发文字不再被全局 92px 截断 */
.vc-profile-field .sect-sort-menu {
  width: 100%;
}
.vc-profile-field .sect-sort-value {
  max-width: none;
  flex: 1;
}
/* Agent 下拉弹层：加宽 + 限高滚动，容纳「名字 · CLI + 告警」两行选项 */
.vc-profile-agent-menu > .sect-sort-pop {
  min-width: min(300px, 84vw);
  max-width: 340px;
  max-height: min(320px, 60vh);
  overflow-y: auto;
}
.vc-profile-agent-menu .sect-sort-pop button {
  padding-top: 7px;
  padding-bottom: 7px;
  line-height: 1.4;
  white-space: normal;
}
.vc-agent-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.vc-agent-option-name {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  overflow-wrap: anywhere;
}
.vc-agent-option-cli {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 600;
  opacity: 0.62;
}
.vc-agent-option-warn {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--warning);
}
.vc-profile-instructions textarea {
  resize: vertical;
  min-height: 72px;
}
.vc-profile-count {
  font-style: normal;
  opacity: 0.6;
}
.vc-profile-activity {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.vc-profile-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  cursor: pointer;
}
.vc-profile-hint {
  font-style: normal;
  font-size: 11px;
  opacity: 0.6;
}
.vc-profile-template-catalog {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 92%, var(--accent) 8%);
}
.vc-profile-template-heading {
  display: flex;
  align-items: center;
  gap: 8px;
}
.vc-profile-template-heading > span {
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
}
.vc-profile-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
}
.vc-profile-template-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--surface);
}
.vc-profile-template-card p {
  flex: 1;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
.vc-profile-template-use {
  border: 1px solid var(--accent, #4a7dff);
  border-radius: 6px;
  padding: 4px 9px;
  background: transparent;
  color: var(--accent, #4a7dff);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.vc-profile-template-use:disabled {
  opacity: 0.5;
  cursor: default;
}
.vc-profile-err {
  font-style: normal;
  font-size: 11px;
  color: var(--danger, #d4483b);
}
.vc-profiles-link:disabled {
  opacity: 0.5;
  cursor: default;
}
.vc-profiles-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 12px;
  color: var(--accent, #4a7dff);
  cursor: pointer;
  align-self: flex-start;
}
.vc-profile-remove {
  color: var(--danger, #d4483b);
}
.vc-profiles-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.vc-profiles-save {
  font: inherit;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--accent, #4a7dff);
  background: var(--accent, #4a7dff);
  color: #fff;
  cursor: pointer;
}
.vc-profiles-save:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Compact preset library: cards are summaries; configuration lives in dialogs. */
.vc-profile-library-section,
.vc-profile-template-catalog {
  display: grid;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
}

.vc-profile-library-section + .vc-profile-template-catalog {
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--border-soft);
}

.vc-profile-list-heading,
.vc-profile-template-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.vc-profile-list-heading > div,
.vc-profile-template-heading > div {
  display: grid;
  gap: 4px;
}

.vc-profile-list-heading strong,
.vc-profile-template-heading strong {
  color: var(--fg);
  font-size: 13px;
}

.vc-profile-list-heading p,
.vc-profile-template-heading p {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.5;
}

.vc-profile-add {
  flex: none;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border-soft));
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  font-weight: 700;
}

.vc-profile-card-grid,
.vc-profile-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
  gap: 10px;
}

.vc-profile-summary-card,
.vc-profile-template-card {
  box-sizing: border-box;
  min-width: 0;
  min-height: 164px;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--fg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.035);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.vc-profile-summary-card:hover,
.vc-profile-summary-card:focus-visible,
.vc-profile-template-card:hover,
.vc-profile-template-card:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 10%, transparent);
  outline: none;
  transform: translateY(-1px);
}

.vc-profile-summary-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vc-profile-summary-top {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
}

.vc-profile-summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 13%, var(--surface));
  color: var(--accent);
  font-size: 14px;
  font-weight: 800;
}

.vc-profile-summary-top > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.vc-profile-summary-top strong,
.vc-profile-summary-top code {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vc-profile-summary-top strong { font-size: 12.5px; }
.vc-profile-summary-top code { color: var(--faint); font-size: 10.5px; }
.vc-profile-summary-top > em {
  padding: 2px 7px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  color: var(--warning);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.vc-profile-summary-card > p {
  display: -webkit-box;
  flex: 1;
  min-height: 34px;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.vc-profile-summary-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.vc-profile-summary-meta span,
.vc-profile-template-events span {
  padding: 3px 7px;
  border-radius: var(--radius-full);
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 10px;
}

.vc-profile-default-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
}

.vc-profile-template-card {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  align-items: start;
  gap: 6px 9px;
  text-align: left;
}

.vc-profile-template-card > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  grid-row: 1 / span 2;
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent);
}

.vc-profile-template-card > strong { margin-top: 5px; font-size: 12.5px; }
.vc-profile-template-card > p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.vc-profile-template-card > em {
  grid-column: 2;
  color: var(--accent);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 700;
}

.vc-profile-empty {
  margin: 0;
  padding: 22px;
  border: 1px dashed var(--border-soft);
  border-radius: var(--radius-lg);
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.vc-profile-default-mode-row {
  max-width: 560px;
  margin-top: 4px;
}

.vc-profile-dialog {
  width: min(760px, calc(100vw - 28px));
  max-height: min(88vh, 900px);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: var(--surface);
  color: var(--fg);
  box-shadow: var(--modal-shadow);
}

.vc-profile-dialog::backdrop {
  background: rgba(10, 14, 24, 0.5);
  backdrop-filter: blur(3px);
}

.vc-profile-dialog[open] {
  display: flex;
  flex-direction: column;
}

.vc-profile-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-soft);
}

.vc-profile-dialog-head > div { display: grid; gap: 3px; min-width: 0; }
.vc-profile-dialog-head span { color: var(--accent); font-size: 10.5px; font-weight: 760; }
.vc-profile-dialog-head h3 { margin: 0; overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }

.vc-profile-dialog-close {
  position: relative;
  width: 30px;
  height: 30px;
  flex: none;
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: 50%;
  background: var(--surface);
}
.vc-profile-dialog-close::before,
.vc-profile-dialog-close::after {
  position: absolute;
  top: 50%; left: 50%;
  width: 12px; height: 1.5px;
  background: currentColor;
  content: '';
}
.vc-profile-dialog-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.vc-profile-dialog-close::after { transform: translate(-50%, -50%) rotate(-45deg); }

.vc-profile-dialog-body {
  display: grid;
  gap: 16px;
  min-height: 0;
  padding: 18px;
  overflow-y: auto;
}

.vc-profile-dialog .vc-profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vc-profile-dialog .vc-profile-instructions textarea { min-height: 150px; background: var(--surface-muted); }

.vc-profile-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  padding-top: 4px;
}

.vc-profile-dialog-actions .vc-profile-remove { margin-right: auto; }
.vc-profile-dialog-done,
.vc-profile-dialog-secondary,
.vc-profile-dialog .vc-profile-template-use {
  min-height: 34px;
  padding: 0 14px;
  border-radius: var(--radius-full);
  font-size: 11.5px;
  font-weight: 700;
}
.vc-profile-dialog-done,
.vc-profile-dialog .vc-profile-template-use { border-color: var(--accent); background: var(--accent); color: white; }
.vc-profile-dialog-secondary { border: 1px solid var(--border-soft); background: var(--surface); color: var(--fg); }

.vc-profile-template-description { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.vc-profile-template-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.vc-profile-template-facts > div { display: grid; gap: 4px; padding: 10px; border-radius: 10px; background: var(--surface-muted); }
.vc-profile-template-facts span { color: var(--faint); font-size: 10px; }
.vc-profile-template-facts strong { font-size: 11px; }
.vc-profile-template-prompt { display: grid; gap: 7px; }
.vc-profile-template-prompt > strong,
.vc-profile-template-events > strong { font-size: 12px; }
.vc-profile-template-prompt p { margin: 0; padding: 12px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--surface-muted); color: var(--muted); font-size: 11.5px; line-height: 1.65; white-space: pre-wrap; }
.vc-profile-template-events { display: grid; gap: 8px; }
.vc-profile-template-events > div { display: flex; flex-wrap: wrap; gap: 6px; }

@media (max-width: 680px) {
  .vc-profile-dialog .vc-profile-grid,
  .vc-profile-template-facts { grid-template-columns: 1fr; }
  .vc-profile-list-heading,
  .vc-profile-template-heading { flex-direction: column; }
}

/* Installed Skills library: search stays lightweight; selection affordances
   appear only after the explicit Select action. Mutations update cards in place. */
.skills-installed-header-actions {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
}

.skills-installed-header-actions button {
  min-height: var(--button-compact-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
}

.skills-library-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.skills-installed-search {
  position: relative;
  display: block;
  min-width: 0;
}

.skills-installed-search > .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skills-installed-search input {
  width: 100%;
  min-height: var(--button-height);
  padding-right: 38px;
  border-radius: var(--radius-full);
}

.skills-installed-search [data-action="clear-installed-search"] {
  position: absolute;
  top: 50%;
  right: 7px;
  display: grid;
  place-items: center;
  width: 26px;
  min-width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  transform: translateY(-50%);
}

.skills-installed-search [data-action="clear-installed-search"]:hover {
  background: var(--surface-muted);
  color: var(--fg);
}

.skills-select-all-results {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--button-height);
  padding: 0 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.skills-select-all-results input,
.skills-row-title input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--accent);
}

.skills-filter-count {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.skills-installed-live:empty {
  display: none;
}

.skills-installed-live:not(:empty) {
  min-height: 22px;
  margin: -2px 0 12px;
}

.skills-library-empty {
  display: grid;
  justify-items: center;
  gap: 7px;
  min-height: 176px;
  padding: 36px 18px;
  box-sizing: border-box;
  place-content: center;
  text-align: center;
}

.skills-library-empty strong {
  font-size: 14px;
}

.skills-library-empty p {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
}

.skills-library-empty button {
  margin-top: 5px;
}

.skills-row-title {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

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

.skills-canonical-name {
  color: var(--faint) !important;
  font-family: var(--mono);
  font-size: 10.5px !important;
}

.skills-installed-card {
  transition:
    opacity 190ms ease,
    transform 190ms ease,
    border-color 150ms ease,
    background-color 150ms ease;
}

.skills-installed-card.is-selectable {
  cursor: pointer;
  user-select: none;
}

.skills-installed-card.is-selectable:hover,
.skills-installed-card.is-selectable:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--border-soft));
  outline: none;
}

.skills-installed-card.is-selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent);
}

.skills-installed-card.is-removing {
  pointer-events: none;
  opacity: .5;
  transform: scale(.985);
}

.skills-removing-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.skills-removing-label::before {
  content: "";
  width: 10px;
  height: 10px;
  border: 2px solid color-mix(in srgb, var(--accent) 25%, var(--border-soft));
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: ui-refresh-icon-spin 760ms linear infinite;
}

.skills-bulk-action-bar {
  position: sticky;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 35;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: min(620px, calc(100% - 32px));
  min-height: 62px;
  margin: 2px auto 0;
  padding: 10px 12px 10px 18px;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--border-soft) 84%, var(--accent));
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--surface-raised) 94%, transparent);
  box-shadow: var(--modal-shadow);
  backdrop-filter: blur(16px);
}

.skills-bulk-action-bar > span {
  display: grid;
  gap: 2px;
}

.skills-bulk-action-bar strong {
  font-size: 13px;
}

.skills-bulk-action-bar small {
  color: var(--muted);
  font-size: 11px;
}

.skills-bulk-action-bar button {
  min-height: 42px;
  padding: 0 18px;
  border-radius: var(--radius-full);
  font-weight: 800;
}

.skills-remove-dialog {
  width: min(520px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  background: var(--surface-raised);
  box-shadow: var(--modal-shadow);
  color: var(--fg);
}

.skills-remove-dialog::backdrop {
  background: rgba(9, 12, 20, .48);
  backdrop-filter: blur(3px);
}

.skills-remove-dialog > article {
  display: grid;
  gap: 18px;
  padding: 22px;
}

.skills-remove-dialog header {
  display: grid;
  gap: 8px;
}

.skills-remove-dialog h3,
.skills-remove-dialog p {
  margin: 0;
}

.skills-remove-dialog header p,
.skills-remove-dialog-body > p {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
}

.skills-remove-dialog-body {
  display: grid;
  gap: 10px;
}

.skills-remove-dialog-body > ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 10px 12px 10px 30px;
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
  font-family: var(--mono);
  font-size: 12px;
}

.skills-remove-reference-warning {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--warning) 38%, var(--border-soft));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--warning) 8%, var(--surface));
}

.skills-remove-reference-warning > strong {
  color: var(--warning);
  font-size: 12.5px;
}

.skills-remove-reference-warning p {
  color: var(--muted);
  font-size: 12px;
}

.skills-remove-reference-warning ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.skills-remove-reference-warning li {
  display: grid;
  grid-template-columns: minmax(90px, auto) minmax(0, 1fr);
  gap: 8px;
  font-size: 11.5px;
}

.skills-remove-reference-warning li span {
  min-width: 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* Skill Pack grid */
.skills-pack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.skills-pack-create-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 140px;
  border: 2px dashed var(--border);
  border-radius: 12px;
  background: transparent;
  color: var(--muted, #999);
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 14px;
}
.skills-pack-create-tile:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.skills-pack-create-plus {
  font-size: 28px;
  line-height: 1;
  font-weight: 300;
}

.skills-pack-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--border, #333);
  border-radius: 12px;
  background: var(--surface-raised);
  transition: border-color 0.15s ease;
}
.skills-pack-card:hover {
  border-color: var(--accent);
}

.skills-pack-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.skills-pack-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.skills-pack-title strong {
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.skills-pack-id {
  font-size: 11px;
  color: var(--muted);
  background: var(--surface-muted);
  padding: 1px 6px;
  border-radius: 4px;
  align-self: flex-start;
}

.skills-pack-health {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}
.skills-pack-health-complete {
  background: rgba(46, 204, 113, 0.15);
  color: #2ecc71;
}
.skills-pack-health-missing {
  background: rgba(231, 76, 60, 0.15);
  color: #e74c3c;
}
.skills-pack-health-unassigned {
  background: rgba(241, 196, 15, 0.15);
  color: #f1c40f;
}

.skills-pack-desc {
  font-size: 13px;
  color: var(--muted, #aaa);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.skills-pack-meta {
  display: flex;
  gap: 14px;
  font-size: 12px;
  color: var(--muted, #999);
}
.skills-pack-meta-item strong {
  color: var(--fg);
  font-size: 14px;
  margin-right: 2px;
}

.skills-pack-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.skills-pack-tag {
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 10px;
  background: var(--surface-muted);
  color: var(--muted, #aaa);
}

.skills-pack-refs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.skills-pack-ref-chip {
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
}

.skills-pack-missing {
  font-size: 12px;
  color: #e74c3c;
  background: rgba(231, 76, 60, 0.08);
  padding: 6px 10px;
  border-radius: 6px;
}

.skills-pack-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}
.skills-pack-actions .bd-button.small {
  flex: 1;
  padding: 6px 10px;
  font-size: 12px;
}

/* Bot assignment drag-and-drop */
.skills-bot-assign-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 860px) {
  .skills-bot-assign-layout {
    grid-template-columns: 1fr;
  }
}

.skills-bot-palette {
  position: sticky;
  top: 12px;
  padding: 14px;
  border: 1px solid var(--border, #333);
  border-radius: 12px;
  background: var(--surface-raised);
  max-height: 70vh;
  overflow-y: auto;
}
.skills-bot-palette-hint {
  font-size: 12px;
  color: var(--muted, #999);
  margin: 0 0 12px;
  line-height: 1.4;
}
.skills-bot-palette-group {
  margin-bottom: 14px;
}
.skills-bot-palette-group:last-child {
  margin-bottom: 0;
}
.skills-bot-palette-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted, #888);
  margin-bottom: 6px;
}
.skills-bot-palette-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.skills-draggable-chip {
  cursor: grab;
  user-select: none;
  transition: transform 0.1s ease, opacity 0.1s ease;
}
.skills-draggable-chip:hover {
  transform: translateY(-1px);
}
.skills-draggable-chip:active {
  cursor: grabbing;
  opacity: 0.7;
}

.skills-bot-row.drag-over {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.skills-bot-row.drag-over td {
  border-color: var(--accent);
}

.skills-unassign-dropzone {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  margin: -2px 0 14px;
  padding: 10px 11px;
  border: 1px dashed color-mix(in srgb, var(--danger) 58%, var(--border-soft));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--danger) 7%, var(--surface-raised));
  color: var(--danger);
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.skills-unassign-dropzone.is-active {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 14%, var(--surface-raised));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 32%, transparent);
  transform: translateY(-1px);
}
.skills-unassign-dropzone > span:last-child {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.skills-unassign-dropzone strong {
  color: var(--danger);
  font-size: 12px;
}
.skills-unassign-dropzone small {
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.35;
}
.skills-unassign-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  font-size: 15px;
  font-weight: 800;
}

.skills-assigned-draggable {
  display: inline-flex;
  max-width: 100%;
  margin: 1px 3px 1px 0;
  border-radius: var(--radius-full);
  cursor: grab;
  user-select: none;
  vertical-align: middle;
  transition: box-shadow 120ms ease, opacity 120ms ease, transform 120ms ease;
}
.skills-assigned-draggable:hover {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 24%, transparent);
  transform: translateY(-1px);
}
.skills-assigned-draggable:active,
.skills-assigned-draggable > button:active {
  cursor: grabbing;
}
.skills-assigned-draggable.is-dragging {
  opacity: 0.45;
}
.skills-assigned-draggable > button {
  cursor: grab;
}

.skills-bot-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: max-content;
}
.skills-duplicate-feedback {
  max-width: 180px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  text-align: right;
}

@media (prefers-reduced-motion: reduce) {
  .skills-unassign-dropzone,
  .skills-assigned-draggable {
    transition: none !important;
    transform: none !important;
  }
}

/* Skill pack editor: truncate descriptions, make list scrollable */
.skills-pack-skill-list {
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.skills-pack-skill-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 8px;
  align-items: start;
  padding: 6px 8px;
  border-radius: 6px;
  transition: background 0.1s;
}
.skills-pack-skill-item:hover {
  background: var(--accent-soft);
}
.skills-pack-skill-item input {
  margin-top: 3px;
}
.skills-pack-skill-name {
  font-weight: 600;
  font-size: 13px;
}
.skills-pack-skill-desc {
  grid-column: 2;
  font-size: 11px;
  color: var(--muted, #999);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}

/* Skill library cards: truncate description for even grid */
.skills-installed-card .skill-desc,
.skills-library-card p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Skill / Pack chips */
.skills-pack-chip,
.skills-skill-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.6;
  background: var(--surface-muted);
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.skills-pack-chip {
  background: var(--accent-soft);
  color: var(--accent);
}

/* Draggable chips in palette */
.skills-draggable-chip {
  padding: 4px 12px;
  font-size: 12px;
  border: 1px solid var(--border);
  background: var(--surface-raised);
  cursor: grab;
}
.skills-draggable-chip.skills-pack-chip {
  border-color: rgba(108, 140, 255, 0.3);
}
.skills-draggable-chip:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* Bot palette: drag hint, search, tag filters */
.skills-bot-palette-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(108, 140, 255, 0.08);
  border: 1px solid rgba(108, 140, 255, 0.2);
  border-radius: 8px;
  font-size: 12px;
  color: var(--fg);
  margin: 0 0 14px;
  line-height: 1.4;
}
.skills-drag-icon {
  font-size: 18px;
  color: var(--accent);
  flex-shrink: 0;
}

.skills-bot-palette-search {
  width: 100%;
  padding: 6px 10px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-muted);
  color: var(--fg);
  font-size: 12px;
}
.skills-bot-palette-search:focus {
  outline: none;
  border-color: var(--accent);
}

.skills-bot-palette-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}
.skills-tag-filter {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted, #999);
  cursor: pointer;
  transition: all 0.1s;
}
.skills-tag-filter:hover {
  border-color: var(--accent);
  color: var(--fg);
}
.skills-tag-filter.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Skill pack editor: search + select all */
.skills-pack-include-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.skills-pack-include-head label {
  font-weight: 600;
  white-space: nowrap;
}
.skills-pack-skill-search {
  flex: 1;
  max-width: 240px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-muted);
  color: var(--fg);
  font-size: 12px;
}
.skills-pack-skill-search:focus {
  outline: none;
  border-color: var(--accent);
}
.skills-pack-select-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted, #999);
  cursor: pointer;
  margin-bottom: 8px;
}

/* Wider dialog for pack editor */
.skills-pack-editor {
  width: min(560px, 92vw);
}

@media (max-width: 620px) {
  .skills-installed-block > .sect-head {
    align-items: center;
    flex-wrap: nowrap;
  }

  .skills-installed-block > .sect-head .sect-head-hint {
    display: none;
  }

  .skills-installed-header-actions {
    margin-left: auto;
  }

  .skills-library-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .skills-installed-search {
    grid-column: 1 / -1;
  }

  .skills-select-all-results {
    grid-column: 1 / -1;
    justify-content: center;
    min-height: 44px;
  }

  .skills-filter-count {
    justify-self: start;
  }

  .skills-library-toolbar > .skills-pager {
    justify-self: end;
  }

  .skills-installed-panel {
    padding: 14px;
  }

  .skills-bulk-action-bar {
    width: calc(100% - 20px);
    min-height: 68px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    margin-top: 8px;
    padding: 10px 10px 10px 14px;
  }

  .skills-bulk-action-bar button {
    min-height: 44px;
  }

  .skills-remove-dialog > article {
    padding: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skills-installed-card {
    transition: opacity 100ms linear;
  }

  .skills-removing-label::before {
    animation: none;
  }
}

/* Mobile dashboard shell ----------------------------------------------------
   The desktop shell deliberately owns the viewport and delegates scrolling to
   main/panel containers. Once the sidebar becomes a top tab rail, keep that
   rail constrained to the viewport (otherwise its max-content width removes
   the horizontal scroll range), and let tall control pages participate in the
   main mobile scroll instead of being squeezed into desktop-sized grid rows. */
@media (max-width: 980px) {
  .chrome-body {
    gap: 0;
  }

  .sidebar {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .sidebar-nav {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 720px) {
  main:has(.sessions-page),
  main:has(.groups-page) {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  main:has(.sessions-page) .sessions-page {
    height: auto;
    min-height: 100%;
    grid-template-rows: none;
    overflow: visible;
  }

  main:has(.sessions-page) .sessions-page:not(:has(#bulk-bar:not([hidden]))) {
    grid-template-rows: none;
  }

  main:has(.sessions-page) .sessions-heading-main,
  main:has(.sessions-page) .sessions-view-controls {
    width: 100%;
    min-width: 0;
  }

  main:has(.sessions-page) .sessions-view-toggle {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  main:has(.sessions-page) .sessions-view-toggle button {
    width: auto;
    min-width: 0;
    padding-right: 6px;
    padding-left: 6px;
    white-space: nowrap;
  }

  main:has(.sessions-page) .bulk-bar {
    top: -16px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    box-shadow: 0 0 0 16px var(--bulk-bar-bg), var(--shadow);
  }

  main:has(.sessions-page) .bulk-bar[hidden] {
    display: none;
  }

  main:has(.sessions-page) .bulk-bar #bulk-count {
    grid-column: 1 / -1;
    margin-right: 0;
  }

  main:has(.sessions-page) .bulk-bar button {
    width: 100%;
    min-width: 0;
    padding-right: 8px;
    padding-left: 8px;
    white-space: nowrap;
  }

  main:has(.sessions-page) .sessions-view-stage,
  main:has(.sessions-page) .sessions-view-stage[data-view="table"] {
    min-height: 0;
    overflow: visible;
  }

  main:has(.sessions-page) .sessions-board {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  main:has(.sessions-page) .sessions-topic-view {
    height: auto;
    overflow: visible;
    padding-right: 0;
    padding-left: 0;
  }

  main:has(.sessions-page) .session-topic-group > header {
    grid-template-columns: auto minmax(0, 1fr);
  }

  main:has(.sessions-page) .session-topic-summary {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  main:has(.sessions-page) .session-topic-members {
    grid-template-columns: 1fr;
  }

  main:has(.sessions-page) .session-board-column {
    height: min(70dvh, 640px);
    min-height: 320px;
  }

  main:has(.sessions-page) .sessions-kanban {
    height: auto;
    overflow: visible;
  }

  main:has(.sessions-page) .kanban-column {
    height: min(70dvh, 640px);
    min-height: 320px;
  }

  main:has(.groups-page) .groups-page {
    height: auto;
    min-height: 100%;
    grid-template-rows: none;
    overflow: visible;
  }

  main:has(.groups-page) .groups-page:has(> .hint-warn) {
    grid-template-rows: none;
  }

  main:has(.groups-page) .groups-matrix-section {
    height: min(70dvh, 640px);
    min-height: 320px;
  }
}

/* ── Schedule create/edit form modal（原生 <dialog>） ────────────────────── */
.schedule-form-dialog {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--sh-lg);
  width: min(560px, calc(100vw - 32px));
  max-height: 90dvh;
  overflow-y: auto;
  padding: 24px;
  color: var(--text);
}

.schedule-form-dialog::backdrop {
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(3px);
}

.schedule-form-dialog h2 {
  margin: 0 0 16px;
  font-size: var(--fs-17);
}

.schedule-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.schedule-form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.schedule-form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.schedule-form-field input[type="text"],
.schedule-form-field textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
}

.schedule-form-field textarea {
  resize: vertical;
  min-height: 80px;
}

.schedule-form-help {
  font-size: 11px;
  color: var(--muted);
}

.schedule-form-help-with-count {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.schedule-form-help-with-count span {
  flex: none;
}

.schedule-form-radio-group {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.schedule-form-radio-group label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
}

.schedule-form-placement {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  background: color-mix(in srgb, var(--surface-muted) 46%, transparent);
}

.schedule-form-placement strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}

.schedule-form-toggle {
  flex-direction: row !important;
  align-items: flex-start;
  gap: 8px;
}

.schedule-form-toggle > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.schedule-form-error {
  color: var(--danger);
  font-size: 12px;
  margin: 0;
}

/* 必填星号 */
.schedule-form-label .req {
  color: var(--danger);
  font-style: normal;
  font-weight: 700;
}

/* 内联校验错误 / 下次执行预览 */
.schedule-form-error-inline {
  font-size: 11px;
  color: var(--danger);
}

.schedule-form-preview {
  font-size: 11px;
  color: var(--success, var(--st-ok));
}

/* 快捷模板 chips */
.schedule-templates {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.schedule-template-chip {
  padding: 4px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}

.schedule-template-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.schedule-template-chip.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  font-weight: 600;
}

/* 手动输入 / 返回选择 链接 */
.schedule-form-link {
  align-self: flex-start;
  margin-top: 4px;
  padding: 0;
  border: none;
  background: none;
  color: var(--accent);
  font-size: 11px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* select 与输入框同宽同风格 */
.schedule-form-field select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
}

/* aria-invalid 红框 */
.schedule-form-field input[aria-invalid="true"],
.schedule-form-field select[aria-invalid="true"],
.schedule-form-field textarea[aria-invalid="true"] {
  border-color: var(--danger);
}

.schedule-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

.schedule-form-cancel,
.schedule-form-submit {
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  cursor: pointer;
  border: 1px solid var(--border-soft);
}

.schedule-form-cancel {
  background: transparent;
  color: var(--text);
}

.schedule-form-submit {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.schedule-form-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.schedule-edit-button,
.schedule-delete-button {
  min-width: 56px !important;
}

.schedule-delete-button {
  color: var(--danger) !important;
  border-color: color-mix(in srgb, var(--danger) 48%, var(--border-soft)) !important;
}

/* --- Skills page: cross-link chips, issue strip, focus highlights --- */
/* Chips rendered as <button> for click-through navigation: strip default button chrome */
button.skills-pack-chip,
button.skills-skill-chip,
button.skills-pack-ref-chip,
.skills-usage-chip,
.skills-missing-skill-chip {
  border: none;
  font-family: inherit;
  cursor: pointer;
}
button.skills-pack-chip:hover:not(:disabled),
button.skills-skill-chip:hover:not(:disabled),
button.skills-pack-ref-chip:hover:not(:disabled),
.skills-usage-chip:hover:not(:disabled) {
  filter: brightness(1.2);
  text-decoration: underline;
}
button.skills-pack-chip:disabled,
button.skills-skill-chip:disabled,
button.skills-pack-ref-chip:disabled,
.skills-usage-chip:disabled {
  cursor: default;
  opacity: 0.7;
  text-decoration: none;
}
.skills-chip-missing {
  background: var(--danger-soft);
  color: var(--danger);
}

.skills-usage-chips {
  display: inline-flex;
  gap: 6px;
  margin-top: 4px;
}
.skills-usage-chip {
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 10px;
  background: var(--surface-muted);
  color: var(--muted);
}

.skills-missing-skill-chip {
  font-size: 11px;
  padding: 1px 8px;
  margin: 0 2px;
  border-radius: 10px;
  background: var(--danger-soft);
  color: var(--danger);
}
.skills-missing-skill-chip:hover:not(:disabled) {
  background: var(--danger-soft);
  text-decoration: underline;
}

.skills-issue-strip {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.skills-issue-badge {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 12px;
  border: none;
  font-family: inherit;
  white-space: nowrap;
}
button.skills-issue-badge {
  cursor: pointer;
}
button.skills-issue-badge:hover {
  filter: brightness(1.2);
  text-decoration: underline;
}
.skills-issue-warn {
  background: var(--warning-soft);
  color: var(--warning);
}
.skills-issue-info {
  background: var(--accent-soft);
  color: var(--accent);
}
.skills-issue-ok {
  background: var(--success-soft);
  color: var(--success);
}

.skills-bot-row-focus {
  background: var(--accent-soft);
  outline: 1px solid rgba(108, 140, 255, 0.35);
}

.skills-wizard-target-hint {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
}

/* Review round: pack card highlight + library name-filter chip */
.skills-pack-card-focus {
  outline: 1px solid rgba(108, 140, 255, 0.5);
  background: var(--accent-soft);
}
.skills-library-filter-chip {
  font-size: 12px;
  padding: 2px 10px;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  cursor: pointer;
  background: var(--accent-soft);
  color: var(--accent);
  white-space: nowrap;
}
.skills-library-filter-chip:hover {
  filter: brightness(1.2);
  text-decoration: underline;
}

/* Unknown pack-health state (pack API never loaded) */
.skills-health-unknown {
  background: var(--surface-muted);
  color: var(--muted);
}

/* Neutral chip for unresolvable pack refs (pack data not loaded) */
.skills-chip-unknown {
  background: var(--surface-muted);
  color: var(--muted);
}

/* Actionable rows for referenced-but-not-installed skills under a filter */
.skills-missing-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  margin-bottom: 10px;
  border: 1px dashed var(--border);
  border-radius: 8px;
}
.skills-missing-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.skills-missing-row-name {
  font-weight: 600;
}
.skills-missing-row button {
  margin-left: auto;
  font-size: 12px;
  padding: 2px 10px;
}

/* --- Skills dialogs (install wizard / pack editor / post-install) ---------
   These class names shipped with the pack redesign but never had any CSS, so
   the dialogs rendered as raw UA-styled markup. Styled here against the real
   design tokens so they match the rest of the dashboard in both themes. */
.bd-dialog {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  color: var(--fg);
  padding: 0;
  max-width: min(560px, calc(100vw - 32px));
  width: 100%;
  box-shadow: var(--modal-shadow);
}
.bd-dialog::backdrop {
  background: var(--modal-backdrop);
}
.bd-dialog > form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px;
  margin: 0;
}
.bd-dialog h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 650;
}
.bd-dialog label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
}
.bd-dialog input[type="text"],
.bd-dialog input:not([type]),
.bd-dialog textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--fg);
  font: inherit;
}
.bd-dialog input:focus-visible,
.bd-dialog textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.bd-dialog input:disabled {
  background: var(--surface-muted);
  color: var(--muted);
}

/* Wizard step rail: was rendering as run-together text "1.选择来源2.填写详情" */
.skills-wizard-steps {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted);
}
.skills-wizard-steps span {
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--surface-muted);
  border: 1px solid var(--border-soft);
  white-space: nowrap;
}
.skills-wizard-steps span.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.skills-wizard-source-hint small,
.skills-wizard-summary {
  display: block;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
}
.skills-wizard-summary p {
  margin: 2px 0;
}

.skills-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid var(--border-soft);
  margin-top: 2px;
}
.skills-dialog-actions button,
.bd-button {
  height: var(--button-compact-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  cursor: pointer;
}
.skills-dialog-actions button:hover:not(:disabled),
.bd-button:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.skills-dialog-actions button.primary,
.bd-button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.skills-dialog-actions button.primary:hover:not(:disabled),
.bd-button.primary:hover:not(:disabled) {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}
.skills-dialog-actions button.danger,
.bd-button.danger {
  color: var(--danger);
  border-color: var(--danger);
  background: var(--danger-soft);
}
.skills-dialog-actions button:disabled,
.bd-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.bd-button.small {
  height: 28px;
  padding: 0 12px;
  font-size: 12px;
}

/* Candidate / member pick lists inside dialogs */
.skills-pack-skill-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 260px;
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.skills-pack-skill-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  margin-bottom: 0;
  color: var(--fg);
  cursor: pointer;
}
.skills-pack-skill-item:hover {
  background: var(--accent-soft);
}
.skills-pack-skill-name {
  font-weight: 600;
}
.skills-pack-skill-desc {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.skills-pack-include-head {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}
.skills-pack-skill-search {
  max-width: 220px;
}
.skills-pack-select-all {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  margin: 6px 0;
}
.skills-resolved-preview {
  max-height: 180px;
  overflow: auto;
  font-size: 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  background: var(--surface-muted);
}
.skills-resolved-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 0;
}
.skills-install-selection-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

/* Empty states (pack grid / unavailable) */
.skills-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 16px;
  color: var(--muted);
  text-align: center;
}
.feed-group-auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 20px;
  /* 主题感知的遮罩：暗色下更深、亮色下偏灰蓝，跟 .feishu-login-overlay 一致 */
  background: var(--modal-backdrop, rgb(15 23 42 / 62%));
}

.feed-group-auth-card {
  width: min(520px, 100%);
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 14px;
  /* 用主题 token 而非硬编码白底/深字：暗色主题下随 --surface/--fg 翻深，
     不再是刺眼的白块。--panel 仅在 .insights-page 作用域定义，这里 portal 到
     body 后取不到，故直接用全站通用的 --surface。 */
  background: var(--surface);
  color: var(--fg);
  box-shadow: var(--modal-shadow, 0 24px 70px rgb(0 0 0 / 28%));
}

.feed-group-auth-card h3 { margin-top: 0; color: var(--fg); }
.feed-group-auth-card p { color: var(--muted); }
.feed-group-auth-card label,
.feed-group-auth-card label span { color: var(--fg); }
.feed-group-auth-card label { display: grid; gap: 8px; margin-top: 18px; }
/* 输入框的配色/边框/内距交给全站基础 input 规则(已用 --surface-raised/--fg/
   --border,主题感知),那条规则带 7 个 :not() 守卫、特异性高于本作用域,这里
   只补它不管的布局:占满宽度 + border-box。 */
.feed-group-auth-card input { width: 100%; box-sizing: border-box; }
.feed-group-auth-card input::placeholder { color: var(--faint); opacity: 1; }
.feed-group-auth-card .actions { margin-top: 20px; justify-content: flex-end; }
.feed-group-auth-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin-top: 4px;
  padding: 0 20px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: var(--on-accent);
  background: var(--accent);
  font-weight: 700;
  cursor: pointer;
}

.feed-group-auth-open:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.cs-advanced-fields .cs-feed-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.cs-advanced-fields .cs-feed-group > legend {
  padding: 0;
}

.feed-group-picker {
  position: relative;
  width: 100%;
}

.feed-group-picker > summary {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  min-height: var(--button-height);
  padding: 0 42px 0 var(--button-padding-x);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border-soft));
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  cursor: pointer;
  list-style: none;
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border-soft));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
}

.feed-group-picker > summary::-webkit-details-marker { display: none; }

.feed-group-picker > summary > span,
.feed-group-picker-pop > button {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feed-group-picker > summary::after {
  content: "";
  position: absolute;
  right: 18px;
  width: 8px;
  height: 8px;
  border-style: solid;
  border-width: 0 2px 2px 0;
  border-color: var(--accent-strong);
  transform: translateY(-2px) rotate(45deg);
}

.feed-group-picker[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.feed-group-picker.is-disabled > summary { cursor: not-allowed; opacity: .58; }

.feed-group-picker-pop {
  position: absolute;
  z-index: 120;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  display: grid;
  max-height: min(420px, calc(100vh - 180px));
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--surface-elevated, var(--surface));
  box-shadow: 0 16px 40px rgb(0 0 0 / 28%);
}

.feed-group-picker-new {
  position: sticky;
  z-index: 1;
  top: 0;
  display: grid;
  gap: 6px;
  padding: 4px 4px 10px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-elevated, var(--surface));
}

.feed-group-picker-new > span { color: var(--muted); font-size: 12px; font-weight: 700; }
.feed-group-picker-new > input {
  box-sizing: border-box;
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border-soft);
  border-radius: 9px;
  background: var(--surface);
  color: var(--fg);
}

.feed-group-picker-pop > button {
  min-height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--fg);
  text-align: left;
  cursor: pointer;
}

.feed-group-picker-pop > button:hover,
.feed-group-picker-pop > button[aria-current="true"] {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

/* --- 安装 Skill 表单：主输入优先，高级项折叠 ------------------------------
   旧布局用两列 grid，左列堆 4 个区块、右列只有「仓库内路径」，主按钮被挤到
   右列中部，视觉上与任何字段都不相关。改为单列：来源输入是主角，路径/Ref/
   扫描深度收进折叠区，操作按钮回到表单底部。 */
.skills-install-panel .skills-install-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.skills-install-panel .skills-source-label {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.skills-install-panel .skills-source-control input {
  width: 100%;
  box-sizing: border-box;
}

/* 来源说明：默认收起，保留主输入的留白；点击问号后再展开完整格式。 */
.skills-source-heading {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 18px;
  font-size: 12px;
  color: var(--muted);
}
.skills-source-heading > label {
  font-weight: 700;
}
.skills-source-help-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  min-height: 16px;
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--muted) 7%, transparent);
  color: var(--muted);
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}
.skills-source-help-trigger:hover,
.skills-source-help-trigger:focus-visible,
.skills-source-help-trigger[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--accent);
  outline: none;
}
.skills-source-help-trigger:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.skills-source-help-popover {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 1500;
  box-sizing: border-box;
  width: min(580px, calc(100vw - 72px));
  padding: 16px 18px 16px 24px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  background: var(--surface-raised);
  box-shadow: var(--modal-shadow);
  color: var(--fg);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}
.skills-source-help-popover::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 16px;
  bottom: 16px;
  width: 3px;
  border-radius: var(--radius-full);
  background: var(--accent);
}
.skills-source-help-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
}
.skills-source-help-head > div {
  display: grid;
  gap: 2px;
}
.skills-source-help-head strong {
  color: var(--fg);
  font-size: 13px;
}
.skills-source-help-head span {
  color: var(--muted);
}
.skills-source-help-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-height: 24px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.skills-source-help-close:hover,
.skills-source-help-close:focus-visible {
  background: var(--surface-muted);
  color: var(--fg);
  outline: none;
}
.skills-source-help-list {
  display: grid;
  gap: 12px;
  padding-top: 12px;
}
.skills-source-help-list section {
  display: grid;
  gap: 3px;
}
.skills-source-help-list section > strong {
  color: var(--fg);
  font-size: 12.5px;
}
.skills-source-help-list section > span {
  color: var(--muted);
}
.skills-source-help-list code {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-top: 2px;
  padding: 4px 7px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  color: var(--fg);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: normal;
}

/* 高级选项折叠区 */
.skills-install-advanced {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
}
.skills-install-advanced > summary {
  cursor: pointer;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--muted);
  list-style-position: inside;
}
.skills-install-advanced[open] > summary {
  border-bottom: 1px solid var(--border-soft);
  color: var(--fg);
}
.skills-install-advanced-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  padding: 12px;
}
.skills-install-advanced-body .skills-install-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}
.skills-install-advanced-body .skills-install-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--fg);
  font: inherit;
}
.skills-install-advanced-body small {
  color: var(--muted);
  font-size: 11.5px;
}
.skills-scan-toggle {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
}
.skills-scan-toggle > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* 操作行：次要入口在左，主操作在右下 */
.skills-install-panel .skills-install-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 2px;
}
.skills-local-discovery-link {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 13px;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
}
.skills-install-panel .skills-install-actions .primary {
  height: var(--button-compact-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--accent);
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  cursor: pointer;
}
.skills-install-panel .skills-install-actions .primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.feedback-page { display: grid; gap: 16px; }
.feedback-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.feedback-kpis article { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.feedback-kpis span { color: var(--muted); font-size: 11px; }
.feedback-kpis strong { font-size: 22px; }
.feedback-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.feedback-page .panel { padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.feedback-page .panel h2 { margin: 0 0 14px; font-size: 14px; }
.feedback-bar { display: grid; grid-template-columns: 100px minmax(80px, 1fr) 48px; gap: 10px; align-items: center; min-height: 28px; font-size: 11px; }
.feedback-bar i { display: block; min-width: 2px; height: 8px; border-radius: 5px; background: var(--accent); }
.feedback-bar.negative i { background: var(--danger); }
.feedback-bar b { text-align: right; }
.feedback-deliveries { display: grid; }
.feedback-deliveries > div { display: grid; grid-template-columns: minmax(180px, 1fr) 180px minmax(160px, 1fr) 90px; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); align-items: center; font-size: 11px; }
.feedback-deliveries code { overflow: hidden; text-overflow: ellipsis; }
.feedback-deliveries b { text-align: right; }
.feedback-more { margin-top: 12px; }
@media (max-width: 1100px) { .feedback-kpis { grid-template-columns: repeat(3, 1fr); } .feedback-deliveries > div { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .feedback-kpis, .feedback-grid { grid-template-columns: 1fr; } }

/* ── VC per-bot in-meeting output policy table ─────────────────────────── */
.vc-bot-policy-table { display: flex; flex-direction: column; gap: 2px; }
.vc-bot-policy-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 6px 8px; border-radius: 6px;
}
.vc-bot-policy-row:nth-child(odd) { background: color-mix(in srgb, currentColor 4%, transparent); }
.vc-bot-policy-name {
  flex: 1 1 160px; min-width: 140px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; font-weight: 500;
}
.vc-bot-policy-cell { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; opacity: .92; }
.vc-bot-policy-select { font-size: 12px; padding: 2px 6px; border-radius: 4px; }
.vc-bot-policy-rtv input { accent-color: var(--accent, #4c8dff); }
.vc-bot-policy-effective { font-size: 11px; white-space: nowrap; }
.vc-bot-policy-warn { font-style: normal; margin-left: 6px; cursor: help; opacity: .85; }
/* ⚠ 用 InfoTip(hover 可靠、body 传送门)而非原生 title——原生 title 小元素上常
   触发不了/延迟长。tip 包裹层内联不撑行,弹层多行分条列出。 */
.vc-bot-policy-warn-tip { display: inline-flex; align-items: center; }
.vc-bot-policy-warn-pop { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.vc-bot-policy-search {
  font-size: 12px; padding: 4px 8px; border-radius: 6px;
  border: 1px solid var(--border, #d0d5dd); min-width: 180px; max-width: 260px;
}
.vc-bot-policy-empty { padding: 12px; text-align: center; }
/* Agent Workbench — reader-flavoured terminal surface: no gradients, no decorative
   rules, and independent from the Dashboard card/aurora vocabulary.
   段内三条硬约束，改之前先读：
   ① 实线只给白名单五类（内容区↔固定工具条的功能性边界、chip 的 1px 亮环、脱离
      文档流的浮层外圈、:focus-visible 焦点环、选中态的 accent 内投影），颜色只能
      取 var(--border-keep)；其余一律 border: 0，分层交给 --bg-l0..l3 的色差和留白。
   ② 每一个 border-radius 只能是 var(--radius-sm|md|lg|full) / 0 / 50%，裸像素值
      是漂移 bug，样式契约测试（test/agent-workbench-style.test.ts）会拦。
   ③ 段内零渐变、零装饰阴影；只有浮层用 --shadow-pop。 */
.workbench-route-host,
.workbench-route-host > #root {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* #root inherits the Dashboard route padding (12px 32px 24px 0) plus a -32px
   right margin, which inset the Workbench and left it short of the viewport.
   The Workbench draws its own edges, so clear both inside this host only. */
.workbench-route-host > #root,
.workbench-route-host .agent-workbench-page,
.workbench-route-host .agent-workbench-dock {
  padding: 0;
  margin: 0;
}

/* 配色令牌 = 四层底 + 三档文字 + 语义色。四层底之间的亮度差控制在 1.08–1.5：
   低于 1.02 看不见，高于 1.6 就读成「块」而不是「层」。
   L0 页面底 · L1 侧栏 / 顶栏 · L2 卡片 / 面板 / 浮层 / 按钮组底板 · L3 选中 & 悬浮。
   hover 与 selected 共用 L3，靠 accent 竖条和标题色区分，不再引入第五档灰。
   --term-bg 是第五个特例层：与 L0 同色相再暗一档，且 L0 ↔ term-bg 对比度必须 ≥1.15
   —— 面板不画描边，边界全靠「留白 + 圆角 + 画布底色」表达，这条不达标就等于没有边界。
   三档文字在 L0/L1/L2/L3 四个底上全部 ≥4.5:1（WCAG AA）。
   本块是深色族默认皮肤 slate-blue，没有 data-skin 时也自洽。 */
.agent-workbench-page,
.agent-workbench-dock {
  --bg-l0: #141922;
  --bg-l1: #19212c;
  --bg-l2: #202a36;
  --bg-l3: #333f4e;
  --text-1: #e4ebf2;
  --text-2: #afbecd;
  --text-3: #a2b2c3;
  --accent: #6fcbf7;
  --ok: #63d6a0;
  --warn: #edb95c;
  --err: #f58a94;
  /* 白名单之外一律 border: 0，这一个色只给白名单五类线用（见下面的实线白名单）。 */
  --border-keep: #2e3a48;
  --on-accent: #141922;
  --term-bg: #030407;
  --badge-todo: #e6edf4;
  /* 浮层是唯一保留阴影的东西：它会盖在任意背景上，没有阴影就和背景粘住。
     面板 / 卡片一律无阴影 —— 深色底上的黑阴影只糊边、出不了层次。 */
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, .5);
  color-scheme: dark;

  /* —— 历史令牌 → 上面这套的映射 ——
     段内还有约 50 处样式读 --wb-*，映射之后换皮肤只改上面一段，不会漏掉任何一处，
     也不用把 1200 行样式逐条改写。新写的规则一律直接读新令牌。
     三档线（--wb-border / -strong / --wb-divider）并成一档并已无引用：删线之后剩下的
     都是白名单里的功能线，不需要「更重 / 更轻」的分级；--wb-surface* 同理，分层统一
     由 --bg-l0..l3 表达。两组名字都不再保留。
     语义色的 *-soft 底改成 12% 透明叠加：固定的深色 soft 值换皮肤时会撞色相。 */
  --wb-bg: var(--bg-l0);
  --wb-text: var(--text-1);
  --wb-muted: var(--text-2);
  --wb-faint: var(--text-3);
  --wb-accent: var(--accent);
  --wb-success: var(--ok);
  --wb-success-soft: color-mix(in srgb, var(--ok) 12%, transparent);
  --wb-warning: var(--warn);
  --wb-warning-soft: color-mix(in srgb, var(--warn) 12%, transparent);
  --wb-danger: var(--err);
  --wb-focus: var(--accent);
  /* 圆角改读全站统一的三档 + full（见 :root 的 --radius-*）：原来工作台自带的四级
     令牌（4/8/10/12）尺度差太小、视觉读数差很大，一屏之内四个值肉眼像随机；10 与 12
     的差别更是分不出来，只制造不确定感。工作台段内已无 --wb-radius-* 的引用。 */
  /* 触控目标下限：桌面 28px，(hover: none) 下整体提到 44px。尺寸只写一次，
     媒体查询只改这个令牌的值，避免同一个高度被四处规则反复重定义。 */
  --touch-target: 28px;
  /* 终端渲染风格的三个可继承变量，由 .wb-term-classic / .wb-term-reader 覆盖；
     挂在任意祖先上都生效（继承），iframe 内的取值由 TS 侧读这里再 postMessage 下发。
     默认取 classic（现状渲染）。 */
  --term-pad: 4px 8px 8px 8px;
  --term-line-height: 1;
  --term-font-size: 12px;
  color: var(--text-1);
  background: var(--bg-l0);
  font: 12px/1.4 var(--mono);
}

/* 浅色族：分层方向反转但规则不变 —— L0 最灰、L2 纯白（卡片浮起）、L3 带蓝调向下沉
   （浅色里「被按下」必须变暗才有语义）。--term-bg 是唯一不跟着反转的令牌：终端内容是
   彩色 ANSI，浅底会毁掉前景色可读性，业界通行做法就是留深色画布。 */
:root[data-theme="light"] .agent-workbench-page,
:root[data-theme="light"] .agent-workbench-dock {
  --bg-l0: #e8ecf1;
  --bg-l1: #f3f6f9;
  --bg-l2: #ffffff;
  --bg-l3: #c9d7e8;
  --text-1: #131820;
  --text-2: #3b4855;
  --text-3: #46525f;
  --accent: #0b5f8f;
  --ok: #0f6141;
  --warn: #6b4904;
  --err: #9e2531;
  --border-keep: #c2cdda;
  --on-accent: #ffffff;
  --term-bg: #16202b;
  --badge-todo: #1b2430;
  /* 浅色下阴影带蓝调，纯黑阴影在白底上会发灰。 */
  --shadow-pop: 0 8px 24px rgba(20, 30, 45, .16);
  color-scheme: light;
}

/* 四套皮肤。分工：mode（现有的明暗机制）决定明暗族，data-skin 决定族内配色；
   light-frost 属 light 族，其余三套属 dark 族，跟随系统时在「用户最后选的深色皮肤」
   与 light-frost 之间切换。
   皮肤只重定义上面那组工作台令牌，不动全站任何变量，也不写 data-theme —— 明暗仲裁
   仍归 ui.ts 的 applyTheme 管，工作台再插一手必打架。
   放在浅色块之后：两者特异性相同，显式选中的皮肤要赢过「浅色族」的兜底。 */
:root[data-skin="ink"] .agent-workbench-page,
:root[data-skin="ink"] .agent-workbench-dock {
  /* 完全中性的灰阶外壳，彩色预算只服务状态与身份。L1↔L3 只有 1.46：L3 被 --text-3
     的 AA 4.53 顶死，抬不动，四套里只有这套付这个代价。 */
  --bg-l0: #181818;
  --bg-l1: #212121;
  --bg-l2: #2b2b2b;
  --bg-l3: #3c3c3c;
  --text-1: #ededed;
  --text-2: #b8b8b8;
  --text-3: #a6a6a6;
  --accent: #ff8b63;
  --ok: #3ed598;
  --warn: #efc260;
  --err: #ff8c8f;
  --border-keep: #3f3f3f;
  --on-accent: #181818;
  --term-bg: #030303;
  --badge-todo: #eaeaea;
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, .55);
  color-scheme: dark;
}

:root[data-skin="slate-blue"] .agent-workbench-page,
:root[data-skin="slate-blue"] .agent-workbench-dock {
  /* 默认皮肤：保留产品现有的蓝黑品牌感，只收紧色相、按新分层重排台阶、把 meta
     文字提到 AA。与上面的基准块同值，显式选中时也要能压过浅色兜底。 */
  --bg-l0: #141922;
  --bg-l1: #19212c;
  --bg-l2: #202a36;
  --bg-l3: #333f4e;
  --text-1: #e4ebf2;
  --text-2: #afbecd;
  --text-3: #a2b2c3;
  --accent: #6fcbf7;
  --ok: #63d6a0;
  --warn: #edb95c;
  --err: #f58a94;
  --border-keep: #2e3a48;
  --on-accent: #141922;
  --term-bg: #030407;
  --badge-todo: #e6edf4;
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

:root[data-skin="warm-graphite"] .agent-workbench-page,
:root[data-skin="warm-graphite"] .agent-workbench-dock {
  /* 灰阶往暖里偏（色相约 40°、极低饱和），长时间盯屏比纯中性灰舒服。
     accent 与 --warn 同族，所以 warn 状态在这套里要靠形状而不只是颜色区分。 */
  --bg-l0: #1b1912;
  --bg-l1: #24211a;
  --bg-l2: #2e2b22;
  --bg-l3: #443e34;
  --text-1: #f0ebe1;
  --text-2: #c2baac;
  --text-3: #b3aa9c;
  --accent: #f2a33c;
  --ok: #5fce9b;
  --warn: #eac14f;
  --err: #ff9186;
  --border-keep: #453f35;
  --on-accent: #1b1912;
  --term-bg: #040402;
  --badge-todo: #f2ede3;
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, .55);
  color-scheme: dark;
}

:root[data-skin="light-frost"] .agent-workbench-page,
:root[data-skin="light-frost"] .agent-workbench-dock {
  /* 浅色族唯一的一套。选中台阶做到 1.35（现行浅色只有 1.14，几乎等于没有）。 */
  --bg-l0: #e8ecf1;
  --bg-l1: #f3f6f9;
  --bg-l2: #ffffff;
  --bg-l3: #c9d7e8;
  --text-1: #131820;
  --text-2: #3b4855;
  --text-3: #46525f;
  --accent: #0b5f8f;
  --ok: #0f6141;
  --warn: #6b4904;
  --err: #9e2531;
  --border-keep: #c2cdda;
  --on-accent: #ffffff;
  --term-bg: #16202b;
  --badge-todo: #1b2430;
  --shadow-pop: 0 8px 24px rgba(20, 30, 45, .16);
  color-scheme: light;
}

.agent-workbench-page *,
.agent-workbench-dock * { box-sizing: border-box; }

/* 删线的前置：Dashboard 的全局裸元素规则（`button, .btn-link { border: 1px … }`、
   给所有 select 塞箭头槽的那条）特异性只有 (0,0,1)，会直接漏进工作台 —— 只删
   .wb-* 自己的描边，线不会消失。这条 reset 用 :where() 保持 0 特异性外壳，选择器
   实际权重与那些全局规则相同、位置更靠后，于是稳压一头，而任何 .wb-* 规则（≥0,1,0）
   都能照常覆盖它。 */
:where(.agent-workbench-page, .agent-workbench-dock) :is(button, select, input, textarea) {
  border: 0;
  border-radius: var(--radius-md);
  min-height: 0;
  box-shadow: none;
}

.agent-workbench-page button,
.agent-workbench-page input,
.agent-workbench-page a,
.agent-workbench-dock button,
.agent-workbench-dock input,
.agent-workbench-dock a {
  font: inherit;
}

/* 控件基线：所有按钮和链接一律 10px（md 档）。更小的徽标 / chip 在下面单独降到
   6px，面板级容器升到 14px。过渡放在这里统一给：底色、描边、文字三者一起走
   140ms ease-out，悬浮态不再是瞬间跳变；prefers-reduced-motion 那条 !important
   会整体关掉。 */
.agent-workbench-page button,
.agent-workbench-dock button,
.agent-workbench-page a,
.agent-workbench-dock a {
  border-radius: var(--radius-md);
  transition: background-color .14s ease-out, border-color .14s ease-out, color .14s ease-out;
}

.agent-workbench-page button:focus-visible,
.agent-workbench-page a:focus-visible,
.agent-workbench-page input:focus-visible,
.agent-workbench-dock button:focus-visible,
.agent-workbench-dock a:focus-visible,
.agent-workbench-dock input:focus-visible {
  outline: 2px solid var(--wb-focus);
  outline-offset: -1px;
}

.wb-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The page is a single full-height region: the brand/status bar that used to
   own the first row is gone, and the live/offline dot moved into the session
   list heading. */
.agent-workbench-page {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.wb-desktop-layout {
  display: grid;
  grid-template-columns: var(--wb-rail-width) 6px minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

.wb-desktop-layout.is-rail-collapsed {
  grid-template-columns: var(--wb-rail-width) minmax(0, 1fr);
}

.wb-session-rail {
  display: grid;
  grid-template-rows: 38px 38px minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  /* 分栏不画竖线：会话栏是 L1、终端画布是 term-bg，中间隔一条 6px 透明握把带，
     靠底色差 + 留白分区。原来这里一条 border-right、握把带一整条实色、面板再一圈
     描边，7 个 CSS 像素里挤了三条不同灰度的竖线。 */
  border: 0;
  background: var(--bg-l1);
  overflow: hidden;
}

.wb-session-rail.is-collapsed {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 40px;
}

.wb-rail-expand {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border: 0;
  color: var(--wb-muted);
  background: transparent;
  cursor: pointer;
}

.wb-rail-expand:hover { color: var(--text-1); background: var(--bg-l3); }
.wb-rail-expand:not(button) { cursor: default; }
.wb-rail-vertical-label { writing-mode: vertical-rl; letter-spacing: .14em; font-size: 11px; }
/* 待办计数：近白实心 + L1 深字，不再是一圈红描边。计数徽章只分两档 —— 待办用这套
   实心，中性计数用 --bg-l3 底 + --text-3 字，中间不设第三档。 */
.wb-rail-count {
  position: absolute;
  right: 6px;
  bottom: 8px;
  min-width: 18px;
  padding: 2px 3px;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--bg-l1);
  background: var(--badge-todo);
  font-weight: 600;
  text-align: center;
}

/* 栏头不画下沿线：它落在 L1 上、列表也在 L1 上，靠 12px 留白和字重分层就够。
   窄屏上通栏线的线长 / 屏宽比接近 1，一条线就横断整个视野。 */
.wb-rail-heading {
  display: flex;
  align-items: center;
  /* 左组紧凑排列，只把收起按钮推到最右。原来 space-between 与 .wb-group-dim 自己的
     margin-left:auto 两套分配机制叠加，中间挂出约 90px 死空白。 */
  justify-content: flex-start;
  gap: 8px;
  /* 左 22 与组头箭头、行状态标同一条线：栏头的 live 圆点原来在 12px，比列表里所有
     首字形都往左突出 10px，会话栏左缘于是有 12 / 22 两条参差的线。栏头没有圆角底板、
     不受裁切，但既然是同一列的首字形，就该落在同一条基线上。 */
  padding: 0 12px 0 22px;
  border: 0;
}

/* 「标题 + 计数」是一个短语，不是两端对齐的表格行：计数紧贴标题 6px。 */
.wb-rail-heading > div { display: flex; align-items: center; gap: 6px; letter-spacing: .08em; }
.wb-rail-heading > div > span { color: var(--text-3); }
.wb-rail-heading > button:last-child { margin-left: auto; }
/* Live/last-snapshot state now rides the list heading instead of a page-wide
   status bar. */
.wb-rail-heading .is-online { color: var(--wb-success); }
.wb-rail-heading .is-offline { color: var(--wb-danger); }
.wb-rail-heading button,
.wb-session-search button {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  background: transparent;
  cursor: pointer;
}
/* 图标按钮的可点性靠一小块 hover 底色表达，不靠描边变色。 */
.wb-rail-heading button:hover,
.wb-session-search button:hover { color: var(--text-1); background: var(--bg-l3); }

/* 搜索框改填充式：整圈描边换成 L2 填充，聚焦时才画 2px accent 环（焦点环属白名单）。 */
.wb-session-search {
  display: flex;
  align-items: center;
  gap: 5px;
  /* 左缘对齐：外边距收到 8px，与会话行 / 组头两块 ::before 底板的 8px 内缩线重合
     （列表左侧只留一条容器线）；内边距 14px 让 ⌕ 落在 22px 基线上，且 14 ≥ 圆角
     半径 --radius-md(10)，字形永远咬不到填充块的弧线。 */
  margin: 6px 8px 4px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--text-3);
  background: var(--bg-l2);
}

.wb-session-search:focus-within { outline: 2px solid var(--accent); outline-offset: -2px; }
.wb-session-search input {
  width: 100%;
  min-width: 0;
  height: 26px;
  padding: 0;
  border: 0;
  outline: 0;
  color: var(--wb-text);
  background: transparent;
}
.wb-session-search input::placeholder { color: var(--wb-faint); }

.wb-session-list {
  position: relative;
  min-height: 0;
  overflow: auto;
  outline: 0;
  contain: strict;
}
.wb-session-list:focus-visible { outline: 2px solid var(--wb-focus); outline-offset: -2px; }
.wb-session-list-space { position: relative; width: 100%; }
.wb-session-group,
.wb-session-row { position: absolute; left: 0; width: 100%; }
.wb-session-group {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  align-items: center;
  gap: 4px;
  /* 组头的折叠箭头必须和它下面那些行的状态标共用一条竖直基线，所以左右内边距跟着
     .wb-session-row 走（22 / 14），不再是自己的一份 9px。
     ⚠️ 组头**渲染时永远带 .wb-session-group-toggle**，真正生效的是下面那条
     `.wb-session-group.wb-session-group-toggle`（特异性 0,2,0 压过这里的 0,1,0）。
     改内边距必须两处一起改，只改这里等于什么都没改 —— 上一轮就是这么漏的，
     agent-workbench-style.test.ts 现在按「两条规则的左右内边距必须相等」钉住。 */
  padding: 5px 14px 3px 22px;
  color: var(--text-3);
  font-size: 11px;
  letter-spacing: .09em;
}
.wb-session-group-needs-you { color: var(--wb-danger); }
.wb-session-group-active { color: var(--wb-success); }

.wb-session-row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  /* 左内边距 22 = 高亮底板左缘（::before 的 inset 左 8）+ 圆角半径（--radius-lg 14）。
     原来是 8px，正好等于底板左缘 —— 状态标那一格距底板左缘 0px，字形直接压在圆角
     边界上，选中态那条 2px accent 内影更是从字形上横穿过去，读起来就是「行首被切掉
     一块」。规范的既有结论是「文字左内边距 ≥ 圆角半径」，这里把它补齐。
     右 14 同理留出弧线余量：meta 行的时间戳贴在右内边距上，它的字形底部落在底板下方
     圆角的水平带里，8px 已经只剩 5.6px 净空，再窄就会啃到弧线。
     上下 5（原 6）：省出来的 2px 给标题撑行框用，算式见下面
     `.wb-session-row .wb-session-title`。行总高仍是 54px，虚拟滚动契约不受影响；
     内容在行里是 align-items:center 居中的，少 1px 内边距不改变它的视觉位置。 */
  padding: 5px 14px 5px 22px;
  /* 每行一条通栏横线原本一屏 18 条，还横穿圆角高亮底板，把药丸上下切平。整条删掉，
     行间关系交给留白节奏（项间留白 ÷ 项内行距 ≥ 2.5）+ 分组组头 + 选中底板。
     选中态的 accent 竖条也不再是 border-left（方头、和圆角底板中间夹 5px 缝），
     并进 ::before 的 inset box-shadow，跟着 14px 圆角走。 */
  border: 0;
  color: var(--wb-text);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
/* Hover is the row's only affordance now that the title no longer underlines,
   so it has to be legible on its own: surface-3 is a clear step up from the
   rail's own surface, where surface-2 was almost invisible against it. Hover
   stays neutral grey and selection stays the accent blue plus the left bar, so
   the two states never read as the same thing. */
/* 高亮不再铺满整行：::before 是一块四周留白的圆角底板，行本身始终保持透明。
   四点说明，动之前先读：
   ① inset 是相对行的 padding box 量的，所以底板天然让开左侧 2px 的选中条和底部
      1px 的分隔线，两者不会被圆角切到；
   ② z-index:-1 让底板落到内容之下。.wb-session-list 的 contain:strict 本身就是
      层叠上下文，负层只会压在这个列表自己的（透明）底色之上，掉不到会话栏的
      --wb-surface 背景后面去，所以高亮照常可见；
   ③ 刻意不给 .wb-session-row 加 position/z-index —— .wb-session-copy-link::after
      那层撑满整行的点击区拿它当包含块，动一下整行可点就没了；
   ④ 行高（54 / 84）、padding、grid 列都没动，底板只是画上去的一层，虚拟滚动的
      摆放模型完全不受影响。 */
.wb-session-row::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 2px 8px;
  border-radius: var(--radius-lg);
  background: transparent;
  transition: background-color .14s ease-out;
}
/* hover 与 selected 共用 L3：区分靠形状和颜色（accent 竖条 + accent 标题），
   不靠又一个几乎相同的灰。多一档而不可辨 = 噪声。 */
.wb-session-row:hover::before { background: var(--bg-l3); }
.wb-session-row.is-selected::before {
  background: var(--bg-l3);
  box-shadow: inset 2px 0 0 var(--accent);
}
.wb-session-row.is-selected .wb-session-title { color: var(--accent); }
.wb-session-row-needs-you .wb-session-state-mark { color: var(--wb-danger); }
.wb-session-row-active .wb-session-state-mark { color: var(--wb-success); }
.wb-session-row-recent .wb-session-state-mark { color: var(--wb-faint); }
.wb-session-copy { display: grid; min-width: 0; gap: 4px; }
/* Row-as-link: same cell, but a real anchor so chat-follow opens on the
   user's own trusted click instead of a scripted one. The ::after overlay
   stretches the anchor's hit area across the whole row (state dot and blank
   space included); the action buttons sit above it and keep working.
   The row reads as a list item, not as body copy with a hyperlink in it, so it
   never underlines: hover is carried entirely by .wb-session-row:hover's
   background. Keep the anchor undecorated in every state — the UA underlines
   a[href] by default, and the Dashboard's global chrome adds `… a:hover`
   rules that would otherwise reach in here. */
.wb-session-copy-link { color: inherit; text-decoration: none; cursor: pointer; }
.wb-session-copy-link::after { content: ''; position: absolute; inset: 0; }
.wb-session-copy-link:link,
.wb-session-copy-link:visited,
.wb-session-copy-link:hover,
.wb-session-copy-link:focus,
.wb-session-copy-link:active,
.wb-session-copy-link * { text-decoration: none; }
.wb-session-copy-link:focus-visible { outline: 1px solid currentColor; outline-offset: -1px; }
/* ⚠️ 单行省略号截断 = overflow:hidden，而 hidden 是按**盒子**裁的，连字形一起裁。
   一行文字的内容盒高度就是行框（line-height），字形却按字体自己的 em 盒画：实测
   （Chromium + 中文回退字体）12px 字号下 fontBoundingBoxAscent 11px + Descent 3px
   = 14px，而「查 / 看 / 后」这类汉字的 actualBoundingBoxAscent 就是 11px —— 墨迹
   顶到 em 盒上沿，一格不剩。line-height 只有 1.3（15.6px）时半行距 (15.6−14)/2 =
   0.8px，逐像素扫出来的净空更是只剩 0.13px：字形上沿的横笔画正压在裁切线上。
   换成 em 盒更高的中文字体（PingFang SC ≈ 1.4em = 16.8px > 15.6px）半行距直接变负，
   上沿被整齐削平 —— 线上反馈的「查看」被切就是这个。
   所以本段所有截断文字统一两件事：① 行框放宽到 ≥ 1.4em；② 再各留 1px 上下内边距。
   内边距是关键：它把**裁切框**（padding box）撑得比行框大，净空不再取决于字体度量，
   换任何一套中文字体都还剩 ≥1px。改这些数之前先跑 glyphscan 逐像素体检。 */
.wb-session-title { overflow: hidden; color: var(--wb-text); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.wb-session-meta { display: flex; justify-content: space-between; gap: 6px; min-width: 0; color: var(--text-3); font-size: 11px; }
/* meta 行每一格都是 flex 拉伸项，高度由行里最高的那个（徽标 18px）定；给它们加
   1px 上下内边距只是把行框在**既有高度内**往里缩，meta 行总高不变，不吃预算。 */
.wb-session-meta > span:not(.wb-session-kind) {
  overflow: hidden;
  padding-block: 1px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wb-session-meta time { flex: none; padding-block: 1px; }
.wb-session-reason { color: var(--wb-warning); }
.wb-session-empty { position: absolute; inset: 60px 8px auto; color: var(--wb-faint); text-align: center; }

/* 分栏带整条透明，只留中间一颗握把。原来这 5px 是一条实色带（比会话栏底色还亮，
   读起来是「凸起的亮带」而不是分隔线），注释说已经改成细带 + 握把，代码没跟上。
   握把就是原来那个 ⋮ span（父级 color 已经是 transparent，字形本来就不显示），
   给它固定尺寸当色块用，不新增任何 DOM。 */
.wb-rail-separator {
  z-index: 2;
  display: grid;
  place-items: center;
  width: 6px;
  min-width: 6px;
  padding: 0;
  border: 0;
  color: transparent;
  background: transparent;
  cursor: col-resize;
}
.wb-rail-separator > span {
  display: block;
  width: 3px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--border-keep);
  overflow: hidden;
  transition: background-color .14s ease-out;
}
.wb-rail-separator:hover,
.wb-rail-separator:focus-visible { color: transparent; background: transparent; }
.wb-rail-separator:hover > span,
.wb-rail-separator:focus-visible > span { background: var(--text-3); }

/* Two children, two rows: the header and the pane stack. Leaving the old
   toolbar/chat-contract rows in place pushed the stack into an `auto` track,
   which is why the terminal iframe collapsed to its 150px intrinsic height. */
.wb-workspace {
  position: relative;
  display: grid;
  grid-template-rows: 46px minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--wb-bg);
}
.wb-workspace-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 0 16px;
  /* 保留线①（白名单第 1 类）：线两侧一边会滚动、一边不会，这个语义色差表达不了。
     必须满出血、左右不缩进 —— 缩进的线会读成装饰。 */
  border: 0;
  border-bottom: 1px solid var(--border-keep);
  background: var(--bg-l0);
}
.wb-workspace-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wb-workspace-title > span:last-child { display: grid; min-width: 0; }
/* 工作区头部的会话名与副行：同样是单行省略号截断，同样按裁切框留净空。
   副行 small 只有 10px 字号、行框 14px，是全段最挤的一处（实测上沿净空 0.44px），
   所以除了 1px 内边距还把行框显式提到 1.5。头部高 46px，两行加起来 34.5px，够。 */
.wb-workspace-title strong {
  overflow: hidden;
  max-width: 58vw;
  padding-block: 1px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wb-workspace-title small {
  overflow: hidden;
  padding-block: 1px;
  color: var(--wb-muted);
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wb-bot-mark {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  flex: none;
  border: 0;
  /* 25px 的身份方块按「圆角图标」处理，比徽标再圆一档；描边换成 L3 底。 */
  border-radius: var(--radius-md);
  background: var(--bg-l3);
  color: var(--accent);
  font-weight: 800;
}
/* 标签的 1px 亮环（白名单第 2 类）：在无边框环境里，chip 靠这圈比填充更亮的环
   跳出来，不靠底色。字号不低于 11px。 */
.wb-layout-level {
  flex: none;
  padding: 2px 6px;
  border: 1px solid var(--border-keep);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-size: 11px;
  letter-spacing: .04em;
}

.wb-pane-toolbar {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 4px 7px;
  border: 0;
  background: var(--bg-l2);
  overflow-x: auto;
}
.wb-toolbar-group { display: inline-flex; gap: 2px; padding-right: 5px; border: 0; }
.wb-toolbar-spacer { flex: 1; }
.wb-pane-toolbar button,
.wb-pane-actions button,
.wb-pane-actions a,
.wb-dock-action-grid button,
.wb-dock-action-grid a,
.wb-dock-action-grid span,
.wb-primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 25px;
  padding: 2px 8px;
  /* 次级按钮一律裸排：无描边、无常态底色，只有 hover 才显 L3 底。三个描边框并排的
     视觉重量之和会超过唯一的主行动按钮，主次就此失守。 */
  border: 0;
  border-radius: var(--radius-md);
  color: var(--text-2);
  background: transparent;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.wb-pane-toolbar button:hover,
.wb-pane-actions button:hover,
.wb-pane-actions a:hover,
.wb-dock-action-grid button:hover,
.wb-dock-action-grid a:hover { color: var(--text-1); background: var(--bg-l3); }
.wb-pane-toolbar button.is-active { color: var(--accent); background: var(--bg-l3); }
.wb-pane-toolbar button:disabled,
.wb-pane-actions button:disabled { opacity: .5; cursor: not-allowed; }

.wb-chat-contract {
  display: grid;
  grid-template-columns: 14px max-content minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border: 0;
  color: var(--text-3);
  font-size: 11px;
  overflow: hidden;
}
/* 单行截断同样留净空（理由见 .wb-session-title 那条长注释）。 */
.wb-chat-contract > span:last-child { overflow: hidden; padding-block: 1px; text-overflow: ellipsis; white-space: nowrap; }
.wb-chat-contract .is-open { color: var(--wb-success); }

.wb-pane-region { min-width: 0; min-height: 0; padding: 5px; overflow: hidden; }
.wb-pane,
.wb-pane-split { width: 100%; height: 100%; min-width: 0; min-height: 0; }
/* 终端不再是「工作台里的一块卡片」，而是一块屏幕：描边、圆角、外留白、阴影全部去掉，
   --term-bg 从标题栏以下一路铺到窗口右缘和下缘，最像本机 tmux / iTerm。
   原来的「上圆 12px、下方 4px」是同一圈边上下不一致的病根，注释里给的理由（终端页
   有 4px 内边距）本身就不成立 —— 工作台 iframe 加载的是 /s/<sessionId>，那个页面
   内边距是 0。去掉圆角之后隐患从根上消失。
   第二行（反馈行）改 auto：内容为空时整行折叠，省下 25px 和一条线；有内容时照旧。 */
.wb-pane {
  display: grid;
  grid-template-rows: 34px auto minmax(0, 1fr);
  border: 0;
  border-radius: 0;
  /* 与外壳同一个变量：面板骨架露出来的那几像素也不能是第二种黑。 */
  background: var(--term-canvas-bg, var(--term-bg));
  box-shadow: none;
  overflow: hidden;
}
.wb-pane-split { display: flex; overflow: hidden; }
.wb-pane-split.is-horizontal { flex-direction: row; }
.wb-pane-split.is-horizontal > :first-child { flex: 0 0 calc(var(--wb-split-first) - 3px); }
.wb-pane-split.is-horizontal > :last-child { flex: 0 0 calc(var(--wb-split-second) - 3px); }
.wb-pane-split.is-vertical { flex-direction: column; }
.wb-pane-split.is-vertical > :first-child { flex: 0 0 calc(var(--wb-split-first) - 3px); }
.wb-pane-split.is-vertical > :last-child { flex: 0 0 calc(var(--wb-split-second) - 3px); }
.wb-pane-separator {
  display: grid;
  place-items: center;
  flex: 0 0 6px;
  padding: 0;
  border: 0;
  color: var(--wb-faint);
  background: var(--wb-bg);
}
.wb-pane-split.is-horizontal > .wb-pane-separator { cursor: col-resize; }
.wb-pane-split.is-vertical > .wb-pane-separator { cursor: row-resize; }
.wb-pane-separator:hover,
.wb-pane-separator:focus-visible { color: var(--wb-text); background: var(--wb-accent); }

/* 标题栏贴 L1 上、满出血、无下边线：它与终端画布靠 L1 ↔ term-bg 的色差分层，
   这个对比比 L0 ↔ term-bg 更大，四套配色天然满足。模式标签、风格切换、权限说明
   都挂在它上面，所以它不能删。 */
.wb-pane-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 0 8px;
  border: 0;
  background: var(--bg-l1);
}
.wb-pane-identity,
.wb-pane-actions { display: flex; align-items: center; gap: 6px; min-width: 0; }
.wb-pane-glyph { color: var(--wb-accent); font-weight: 800; }
/* 模式标签的 1px 亮环（白名单第 2 类）。字号从 9px 提到 11px —— 11px 以下不用。 */
.wb-mode-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  border: 1px solid var(--border-keep);
  border-radius: var(--radius-sm);
  font-size: 11px;
  letter-spacing: .06em;
}
/* 语义态只改字色和 12% 底，不改那圈环的颜色：白名单里的线只允许取 --border-keep，
   状态由字色 + 填充说，一处一个说法。 */
.wb-mode-chip.is-controlled,
.wb-mode-chip.is-interactive { color: var(--ok); background: var(--wb-success-soft); }
.wb-mode-chip.is-readonly,
.wb-mode-chip.is-preview { color: var(--warn); background: var(--wb-warning-soft); }
/* 「未知」是真的第三种状态，不是只读的一种说法：接管/释放的回执丢了，这一刻既不
   能说已接管也不能说只读。用中性灰把它和两个确定态区分开，别借用 warn 的黄色—
   那会让人以为界面已经给出了只读这个结论。 */
.wb-mode-chip.is-unknown { color: var(--text-2); background: var(--bg-l3); }
/* 「检查中」= 首屏权威读数还没回来。和「未知」同属「没有结论」，但它是**正在收敛**
   的一拍，不是失败态，所以用同一套中性色、不另起一种视觉语言。 */
.wb-mode-chip.is-checking { color: var(--text-3); background: var(--bg-l3); }
.wb-lease-time { color: var(--text-3); font-size: 11px; white-space: nowrap; }
.wb-pane-feedback {
  overflow: hidden;
  padding: 4px 8px;
  border: 0;
  color: var(--text-2);
  background: var(--bg-l1);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 没有反馈文案时整行让位：grid 的第二轨是 auto，display:none 之后它收成 0。 */
.wb-pane-feedback:empty { display: none; }
/* 终端画布。三件事：
   ① 底色读 --term-canvas-bg：那是**这一刻真正渲染出来的 xterm 底色**，由 TS 侧的
      workbenchTermCanvasStyle() 把 workbenchTermTheme() 的 background 写成内联变量
      （同一份 theme 也在往终端 iframe 里推，所以外壳和画布永远同源同色）。
      只读 --term-bg 的老写法在经典渲染下必然露边：经典 xterm 的底是它自己的
      #1a1b26，皮肤令牌是 #030407 一类，画布外那圈安全边距就成了一道更黑的框。
      变量没设上时回落 --term-bg，与改动前完全一致（网页预览面板走的就是这条）。
   ② 左安全边距 8px 由这层的 padding 给 —— 外壳和 iframe 同底色，视觉上就是终端本色
      铺满，但第 0 列字形不会贴在会话栏色块的交界上被抗锯齿吃掉半个。这条与是否有
      圆角要内切无关：没有圆角要躲，不等于可以归零；
   ③ position: relative 是 .wb-ws-blocked 的定位基准（实时连接被拦时盖在 iframe 上
      的那层提示），别去掉。
   状态条是 CLI 写进终端缓冲区的 TTY 输出，不是工作台自绘 chrome：不加上沿线、不加
   底色，跟着画布走。 */
.wb-pane-frame-shell {
  position: relative;
  min-height: 0;
  padding: var(--term-pad);
  background: var(--term-canvas-bg, var(--term-bg));
  overflow: hidden;
}
.wb-pane-frame { display: block; width: 100%; height: 100%; border: 0; background: var(--term-canvas-bg, var(--term-bg)); }

/* 网页预览面板复用同一套 .wb-pane 骨架，但它装的是普通网页不是终端：底色回到 L2，
   也不需要为字形留安全边距。 */
.wb-web-pane,
.wb-web-pane > .wb-pane-frame-shell { padding: 0; background: var(--bg-l2); }
.wb-web-pane .wb-pane-frame { background: var(--bg-l2); }

/* 终端渲染风格：两套容器 class 只负责几何（行距 / 内边距 / 字号），配色由 TS 侧的
   两套 xterm theme 预设承担。class 挂在工作台根或终端面板上都行 —— 下面三个变量是
   可继承的，落到 .wb-pane-frame-shell 和 iframe 下发通道上都读得到。
   classic = 现状渲染（存量零变化），reader（「阅读」）= 规范里更松的行距与更大的呼吸。
   两套都保留 8px 左安全边距，这条不因风格而失效。
   ⚠️ --term-line-height 是 WORKBENCH_TERM_LINE_HEIGHTS（agent-workbench-appearance.ts）
   的 CSS 侧副本：真正落到 xterm 上的是终端页那行 term.options.lineHeight，这里只做
   声明与查阅。两处必须一字不差，agent-workbench-style.test.ts 按那张表比对。 */
.wb-term-classic {
  --term-pad: 4px 8px 8px 8px;
  --term-line-height: 1;
  --term-font-size: 12px;
}
.wb-term-reader {
  --term-pad: 6px 8px 8px 8px;
  --term-line-height: 1.15;
  --term-font-size: 12px;
}
.wb-pane-empty {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 7px;
  width: 100%;
  height: 100%;
  padding: 20px;
  color: var(--wb-muted);
  text-align: center;
}
.wb-pane-empty > span { color: var(--wb-faint); font-size: 22px; }
.wb-pane-empty p { max-width: 460px; margin: 0; color: var(--wb-faint); }
.wb-pane-empty a { color: var(--wb-accent); }

/* 手机端（尤其飞书 iOS 内嵌浏览器）会拦掉 http 页面里 JS 发起的 ws:// 连接：iframe 照常
   加载，实时通道却永远连不上，终端区域一片黑。这一层盖在 iframe 上说明情况，iframe 不
   卸载，页面自己重连成功后这层就撤掉。底色要不透明，否则下面的黑屏透出来会显得像没盖住。 */
.wb-ws-blocked {
  position: absolute;
  inset: 0;
  z-index: 3;
  /* 这层是不透明的，铺满 .wb-pane-frame-shell。面板已经不带圆角，它跟着收成方角。 */
  border-radius: 0;
  background: var(--bg-l1);
}
.wb-ws-blocked a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--bg-l3);
}
.wb-ws-blocked a:hover { color: var(--accent); }
/* 末尾那句「⋯ 菜单」是补充说明，压一号字，别和上面的正文抢注意力 */
.wb-ws-blocked p:last-of-type { font-size: 11px; }

/* 控制权状态未知（回执丢了、首屏读不到）时**顶替**终端 iframe 的那一屏——不是盖在
   它上面：盖层只吃指针事件，焦点已经在 iframe 里时键盘照旧打得进去（真实 Chromium
   里量过）。所以 TSX 那边直接不挂 iframe，这里铺满整块画布区，复核一回来就撤。 */
.wb-control-unknown {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: 0;
  background: var(--bg-l1);
}
.wb-control-unknown button {
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--bg-l3);
}

/* 首屏控制权还在确认：与「未知」同一种「先不接入终端画面」的处理，只是文案更平静
   （这是正常的等待，不是出了岔子），所以不给重试按钮。 */
.wb-control-checking {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: 0;
  background: var(--bg-l1);
}

.wb-info-drawer {
  position: absolute;
  top: 106px;
  right: 0;
  bottom: 0;
  z-index: 8;
  width: min(330px, 42%);
  /* 脱离文档流的浮层（白名单第 3 类）：它会盖在任意背景上，底色差不可控，
     必须有确定的边缘 + --shadow-pop。 */
  border: 0;
  border-left: 1px solid var(--border-keep);
  /* 抽屉从右边推出来，只有左侧两角露在外面，圆右侧等于圆到屏幕外。 */
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  background: var(--bg-l2);
  box-shadow: var(--shadow-pop);
  overflow: auto;
}
.wb-info-drawer > header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 34px;
  padding: 0 8px;
  /* 抽屉内部「会滚动的内容 ↔ 不滚动的固定头」的功能性边界，白名单第 1 类。 */
  border: 0;
  border-bottom: 1px solid var(--border-keep);
  background: var(--bg-l2);
}
.wb-info-drawer > header button { width: 25px; height: 25px; border: 0; color: var(--text-1); background: transparent; }
.wb-info-drawer > header button:hover { background: var(--bg-l3); }
.wb-info-content { padding: 12px; }
.wb-info-content h2 { margin: 0 0 12px; color: var(--text-1); font-size: 14px; overflow-wrap: anywhere; }
/* 键值表靠留白分行，不靠每行一条线。 */
.wb-info-content dl { display: grid; margin: 0; border: 0; }
.wb-info-content dl > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; padding: 7px 0; border: 0; }
.wb-info-content dt { color: var(--text-3); }
/* 单行截断同样留净空（理由见 .wb-session-title 那条长注释）。 */
.wb-info-content dd { margin: 0; overflow: hidden; padding-block: 1px; color: var(--text-2); text-overflow: ellipsis; white-space: nowrap; }
.wb-info-note { padding-left: 8px; border: 0; color: var(--text-3); }

.wb-no-selection {
  display: grid;
  grid-template-rows: auto;
  place-content: center;
  justify-items: center;
  color: var(--wb-muted);
  text-align: center;
}
.wb-no-selection > span { color: var(--wb-accent); font-size: 34px; }
.wb-no-selection h2 { margin: 8px 0 3px; color: var(--wb-text); font-size: 15px; }
.wb-no-selection p { margin: 0; color: var(--wb-faint); }

/* Drill-down, not tabs: the stack renders exactly one in-flow child — the session
   list at the home level, or .wb-mobile-detail once a session is pushed.
   .wb-mobile-nav was removed from the component, so the old 38px nav row had no
   owner and would have parked that single child on it, leaving the 1fr row
   empty. One row, and the child gets the full height. */
.wb-mobile-stack { display: grid; grid-template-rows: minmax(0, 1fr); min-height: 0; overflow: hidden; }
.wb-mobile-nav { display: grid; grid-template-columns: repeat(3, 1fr); border: 0; background: var(--bg-l1); }
.wb-mobile-nav button { border: 0; color: var(--text-2); background: transparent; }
.wb-mobile-nav button[aria-current="page"] { color: var(--accent); background: var(--bg-l3); }
.wb-mobile-stack .wb-session-rail { width: 100%; border-right: 0; }
.wb-mobile-stack .wb-workspace { grid-template-rows: 46px minmax(0, 1fr); }
.wb-mobile-info { overflow: auto; }

.agent-workbench-dock {
  display: grid;
  grid-template-rows: 40px minmax(220px, 1fr) auto 24px;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.wb-dock-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  /* 顶栏不画下沿线：顶栏是 L1、内容区是 L0，色差已经分了区。 */
  border: 0;
  background: var(--bg-l1);
}
.wb-dock-header > div { display: flex; gap: 4px; align-items: center; }
.wb-dock-header > div > span { color: var(--wb-accent); }
.wb-dock-header .is-online { color: var(--wb-success); }
.wb-dock-header .is-offline { color: var(--wb-danger); }
.agent-workbench-dock .wb-session-rail { width: 100%; border-right: 0; }
/* 保留线①（白名单第 1 类）：内容区 ↔ 固定操作条的功能性边界，满出血。 */
.wb-dock-actions { display: grid; gap: 8px; padding: 12px; border: 0; border-top: 1px solid var(--border-keep); background: var(--bg-l1); }
.wb-dock-selected { display: grid; min-width: 0; }
/* 截断两行同样按裁切框留净空（理由见会话行标题那条）；这一格在 grid 的 auto 轨道
   里，多出来的 2px 由轨道自己吸收，不碰 dock 的 40/220/24 三条固定轨。 */
.wb-dock-selected strong,
.wb-dock-selected span {
  overflow: hidden;
  padding-block: 1px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wb-dock-selected span { color: var(--wb-muted); }
/* 页面唯一的主行动改实心：描边式的主按钮压不住下面三个次级按钮的重量之和。 */
.wb-primary-action {
  min-height: 44px;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--on-accent);
  background: var(--accent);
  font-weight: 600;
}
.wb-primary-action:hover { color: var(--on-accent); background: var(--accent); }
/* 三个次级按钮本来就是一组同类操作，走「全裸同行」：等宽、同高、同色、gap 4px、
   谁都没有底板 —— 这已经读成一组。给它们加容器底会把刚压下去的重量原样抬回来。 */
.wb-dock-action-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.wb-dock-action-grid > * { min-width: 0; min-height: 40px; white-space: normal; text-align: center; }
.wb-dock-action-grid span[aria-disabled="true"] { color: var(--text-3); cursor: not-allowed; }
.wb-dock-actions p { margin: 0; color: var(--text-3); }
.agent-workbench-dock > footer { padding: 6px 12px; border: 0; color: var(--text-3); font-size: 11px; text-align: center; }

@media (max-width: 767px) {
  /* No hard floor: a Feishu side panel can be narrower than 320px, and forcing
     a minimum here just pushed the row's right edge (and its actions) out of
     view instead of letting the layout compress. */
  .agent-workbench-page { min-width: 0; }
  .wb-workspace-title strong { max-width: 62vw; }
  .wb-pane-toolbar { gap: 3px; }
  .wb-pane-toolbar button { padding-inline: 5px; }
  .wb-pane-region { padding: 3px; }
  .wb-pane-titlebar { flex-wrap: wrap; height: auto; min-height: 34px; }
  .wb-lease-time { display: none; }
  .wb-info-content dl > div { grid-template-columns: 78px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .agent-workbench-page *,
  .agent-workbench-dock * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Row-level surface shortcuts. The actions are an overlay rather than a column,
   so the row itself stays two cells: state mark + copy. Kept alongside the base
   rule as the appended section's record of that layout. */
.wb-session-row { grid-template-columns: 14px minmax(0, 1fr); }
.wb-session-row-action {
  width: 20px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--text-2);
  background: transparent;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}
.wb-session-row-action:hover { color: var(--accent); background: var(--bg-l3); }
.wb-session-row-action:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }

/* The Dashboard's global control rule is `input:not(...)` seven times over,
   which outranks any plain `.wb-… input` selector and was re-skinning the
   Workbench search box into a 34px pill with its own background — the floating
   overlay reported from the Feishu client. Match that specificity inside the
   Workbench scope so the flat terminal styling wins without !important. */
.agent-workbench-page input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]),
.agent-workbench-dock input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]) {
  min-height: 0;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--wb-text);
  font: inherit;
  font-size: 12px;
  line-height: 1.4;
  box-shadow: none;
}

/* Panes accumulate left-to-right; each keeps its own scroll and close control. */
.wb-pane-stack {
  display: flex;
  min-width: 0;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
}
.wb-stacked-pane {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 320px;
  min-height: 0;
  border: 0;
}
.wb-stacked-pane > .wb-pane { flex: 1; min-height: 0; }
.wb-pane-close {
  position: absolute;
  top: 4px;
  right: 6px;
  z-index: 2;
  width: 20px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--text-2);
  background: var(--bg-l2);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}
.wb-pane-close:hover { color: var(--text-1); background: var(--bg-l3); }
.wb-pane-placeholder {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--wb-faint);
  font-size: 12px;
}
.wb-pane-placeholder span { font-size: 20px; }

/* The toolbar and chat-contract rows were removed; the workspace is exactly a
   header plus the pane stack, and the stack must land on the 1fr track or the
   terminal iframe falls back to its 150px intrinsic height. */
.wb-workspace { grid-template-rows: 46px minmax(0, 1fr); }
.wb-mobile-stack .wb-workspace { grid-template-rows: 46px minmax(0, 1fr); }

/* The close control floats over the pane's own titlebar; reserve room so it
   never lands on top of the Take control / Open tab actions. */
.wb-stacked-pane .wb-pane-titlebar { padding-right: 32px; }

/* Single terminal fills the workspace: the row button is a toggle, and Feishu —
   not this document — owns any multi-column arrangement. */
.wb-pane-stack { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.wb-pane-stack > .wb-pane { flex: 1; min-height: 0; }
.wb-terminal-toggle {
  border: 0;
  border-radius: var(--radius-md);
  color: var(--text-2);
  background: transparent;
  cursor: pointer;
}
.wb-terminal-toggle:hover { color: var(--text-1); background: var(--bg-l3); }

/* Terminal closed: the rail is the whole product surface, so it takes the full
   width and the workspace column disappears entirely. In the Feishu side panel
   this is the "session list + native chat" arrangement — chat lives in Feishu's
   own column, so we simply stop reserving space we are not drawing into. */
.wb-desktop-layout.is-terminal-closed { grid-template-columns: minmax(0, 1fr); }
.wb-desktop-layout.is-terminal-closed > .wb-rail-separator,
.wb-desktop-layout.is-terminal-closed > .wb-workspace { display: none; }
/* With the terminal closed the rail is the only thing we draw. Cap it so the
   page stops claiming width it does not need — in a Feishu column that surplus
   is what squeezes the native chat next to it. */
.wb-desktop-layout.is-terminal-closed .wb-session-rail {
  width: 100%;
  max-width: var(--wb-rail-width);
}

/* The chat control is an anchor so the client receives a genuine link
   activation; it still has to read as one of the row buttons. */
a.wb-session-row-action { text-decoration: none; }

/* Virtualisation positions every row from a fixed 54px estimate (see
   workbenchListItemHeight in agent-workbench-model.ts — the two numbers must
   move together), so a row that grows — a wrapping title, or action buttons
   pushed to a second line in a narrow rail — desynchronises the scroll model
   from what is painted. That drift is what let the list keep scrolling past its
   own top. Pin the height and let the contents clip instead.
   54 = 6px + 6px padding + 1px bottom border + 41px content, and the content is
   one 15.6px title line + 4px gap + a 14px meta line = 33.6px. Touch layouts
   keep their taller rows; see the 620px block above. */
.wb-session-row {
  height: 54px;
  overflow: hidden;
}
.wb-session-row .wb-session-copy { min-width: 0; overflow: hidden; }

/* Keep wheel momentum inside the list: at the boundary it would otherwise chain
   to the host document, which in the Feishu WebView reads as endless scrolling. */
.wb-session-list { overscroll-behavior: contain; }

/* Terminal closed: use the whole column we were given rather than leaving a
   dead band beside a 300px rail — the session list is the entire product here. */
.wb-desktop-layout.is-terminal-closed .wb-session-rail {
  width: 100%;
  max-width: none;
}

/* Fit the row's contents inside that fixed height: one title line plus one meta
   line; the actions float above them rather than taking a column.
   The title is a single ellipsised line — the base .wb-session-title sets
   white-space: nowrap, and the -webkit-line-clamp:2 that used to sit here was
   inert anyway (clamping needs display:-webkit-box, which was never set), so the
   row has always painted one line. Keep it that way at 54px and let the full
   name come from the element's own title= tooltip.
   行框（第三次修，这次是**竖直方向**）：原来 line-height:1.3 = 15.6px，正好等于
   标题的内容盒高度，而 overflow:hidden 就贴着这个盒子裁 —— 12px 中文字形的墨迹高
   14px 且顶满 em 盒上沿，逐像素扫出来上沿净空只剩 0.13px，「查 / 看」的第一横被
   削平。前两轮改的是 padding-left（左缘），跟这条完全无关，所以没修到。
   现在 1.5（18px）+ 上下各 1px 内边距 → 裁切框 20px，字形上下各留 ≥3px（换 em 盒
   1.4em 的中文字体也还有 1.6px）。
   54px 的虚拟滚动契约没动，靠行内重新分配吸收：
     54 = 5 上内边距 + 42 内容 + 5 下内边距 + 2 余量
     内容 42 = 标题 20（18 行框 + 2 内边距）+ 4 间距 + meta 18
   行的上下内边距从 6 收到 5（本条下面 .wb-session-row 的四值 padding），这 2px 就是
   标题多出来的高度的来源；左右两个数一个没动，左缘那两轮修复原样保留。 */
.wb-session-row .wb-session-title {
  line-height: 1.5;
  padding-block: 1px;
}
.wb-session-row .wb-session-meta {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Row actions are secondary to the title: in a ~600px column three bordered
   boxes read as the loudest thing in the row. Drop to bare labels inside the
   overlay and let each button's own surface appear only on hover/focus, so they
   stay reachable without competing with the session name. Each label is two
   characters of text, so the width follows the copy instead of a fixed square. */
.wb-session-row-action {
  width: auto;
  height: 20px;
  /* The Dashboard's global `button, .btn-link { min-height: 32px }` outranks a
     bare `height` (min-height wins over height in the used-value calculation),
     so the three <button> actions inflated to 32px while the <a> "chat" action
     stayed at 20px — the row's actions rendered top-aligned and bottom-ragged.
     Zero the floor here so `height` is what actually decides the box. */
  min-height: 0;
  padding: 0 6px;
  border: 0;
  background: transparent;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}
.wb-session-row-action:hover,
.wb-session-row-action:focus-visible {
  background: var(--bg-l3);
}

.wb-workspace-controls { display: flex; align-items: center; gap: 6px; }

/* The rail must never push the row wider than the column it was given. */
.wb-session-rail, .wb-session-list { max-width: 100%; overflow-x: hidden; }

/* The Dashboard sets body { min-width: 320px } for its own multi-column pages.
   A Feishu side panel can be narrower than that, and the floor made the whole
   document overflow rather than letting the rail compress. Lift it only while a
   Workbench surface is mounted. */
body:has(.workbench-route-host) { min-width: 0; }

/* Mobile workspace header: title and the terminal toggle cannot always sit on
   one 390px line. Let it wrap and keep the controls reachable. */
@media (max-width: 620px) {
  .wb-workspace-header { flex-wrap: wrap; gap: 4px; padding: 6px 8px; height: auto; }
  .wb-workspace-controls { flex-wrap: wrap; }
  .wb-workspace-title { min-width: 0; flex: 1 1 100%; }
  .wb-layout-level { font-size: 11px; padding: 2px 6px; }
}

/* Mobile: the page switcher belongs under the thumb, not at the top of a phone
   held one-handed. Content first, nav last, and the bar keeps clear of the home
   indicator. Targets go to 44px — the row actions are 20px tall on desktop,
   fine for a mouse and too small for a fingertip. */
@media (max-width: 620px) {
  .wb-mobile-stack {
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "content" "nav";
  }
  .wb-mobile-stack > .wb-mobile-nav {
    grid-area: nav;
    border: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .wb-mobile-stack > :not(.wb-mobile-nav) { grid-area: content; min-height: 0; }
  .wb-mobile-nav button { min-height: 44px; font-size: 12px; }

  .wb-session-row-action { height: 34px; padding: 0 8px; font-size: 12px; }
  .wb-session-search input { height: 34px; font-size: 13px; }
}

/* Mobile drill-down chrome: back control, session name, and a compact segment
   for the surfaces inside one session. */
/* 下钻容器按「盖上来的一张卡」处理：只圆上两角，下面是贴底的导航/终端，圆了会露缝。 */
/* 只保留一层圆角：外层是 bottom-sheet 的形状语义，内层的终端画布直接铺满，不再
   套第二个同心圆角（原来两层 12px 圆角贴在一起，容器自己又没有底色，顶角裁出来
   的是页面底色 —— 首屏顶部就露出两个小缺角）。 */
.wb-mobile-detail {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--bg-l1);
  overflow: hidden;
}
.wb-mobile-detail .wb-pane { border-radius: 0; }
.wb-mobile-detail-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px 8px;
  /* 不画下沿线：这条边界由 L1 ↔ term-bg 的色差表达。 */
  border: 0;
  background: var(--bg-l1);
}
.wb-mobile-back {
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--accent);
  background: transparent;
  font-size: 13px;
  cursor: pointer;
}
.wb-mobile-back:hover { background: var(--bg-l3); }
.wb-mobile-detail-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  /* 同会话行标题：截断靠 hidden，净空靠内边距。这条 bar 的高度由 44px 的返回按钮
     定，标题多 2px 完全在里面，手机端行高不受影响。 */
  padding-block: 1px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--wb-text);
  font-size: 12px;
}
/* 分段控件走「共享底板」：一块容器底 + overflow:hidden，圆角完全由容器裁，
   子项恒为方角 —— 每个元素四角同值仍然成立，不需要 `10px 0 0 10px` 那种四值写法。 */
.wb-mobile-detail-seg { display: flex; flex: 0 0 auto; border: 0; border-radius: var(--radius-md); background: var(--bg-l2); overflow: hidden; }
.wb-mobile-detail-seg button {
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 0;
  color: var(--text-3);
  background: transparent;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
}
.wb-mobile-detail-seg button:hover { background: var(--bg-l3); }
/* 选中段：字色 + 字重 + 2px accent 内底线，不引入第五档灰做 thumb。 */
.wb-mobile-detail-seg button[aria-current="page"] {
  color: var(--text-1);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* Fingertip targets for the row actions on touch layouts.
   行高 84 → 60：84px 里只装「标题 + meta」两行，竖直方向约 24px 是空的。60px 仍是
   两行（12 padding + 18 标题 + 4 + 14 meta + 12 padding），把空掉的那 24px 换成密度
   —— 390×844 下同一块列表区从 5 条变成 8 条。
   ⚠️ 行高是虚拟滚动的硬契约：这个数必须和 workbenchListItemHeight 的触屏分支
   （agent-workbench-model.ts）一字不差，对不上列表就会滚过自己的末尾。 */
@media (max-width: 620px) {
  .wb-session-row-action { height: 44px; padding: 0 10px; font-size: 13px; }
  .wb-session-row { height: 60px; }
  .wb-session-row .wb-session-copy { gap: 4px; }
}

/* P1-17：指尖目标按「指针类型」补齐，不再只按视口宽度。
   44px 那套原先只写在 max-width: 620px 里，横屏 iPad（1024–1366px 且 hover: none）
   于是两头落空，拿到的还是给鼠标做的 18–25px 目标：终端/接管、坞里的三个动作、
   收起后的会话栏，手指都够不着。
   这里刻意不动 .wb-session-row 的行高——虚拟滚动按 workbenchListItemHeight 摆放每
   一行，行高只能跟着那份宽度契约走（54 / 84）。行操作是绝对定位的浮层，把按钮撑到
   44px 不参与任何一行的摆放，所以两者不冲突。 */
@media (hover: none) {
  /* 触控尺寸只在这里改一个令牌，具体元素的下限由 var(--touch-target) 读它。
     下面那几条 44px 的字面量是历史契约（单测按它们钉住指尖目标），保留。 */
  .agent-workbench-page,
  .agent-workbench-dock { --touch-target: 44px; }
  .wb-session-row-action { min-width: 44px; height: 44px; padding: 0 10px; font-size: 13px; }
  .wb-appearance-btn,
  .wb-more-btn { min-width: 44px; min-height: 44px; }
  .wb-pane-toolbar button,
  .wb-pane-actions button,
  .wb-pane-actions a,
  .wb-dock-action-grid button,
  .wb-dock-action-grid a,
  .wb-dock-action-grid span,
  .wb-primary-action { min-height: 44px; padding-inline: 10px; }
  .wb-mobile-detail-seg button { min-height: 44px; }
  /* 收起的会话栏是把列表叫回来的唯一入口（P1-18）：40px 的窄条在触屏上本来就难点，
     栏宽和它所在的网格列要一起放宽，否则按钮撑不满、右边露一道缝。
     终端关着的时候栏本来就铺满整页（.is-terminal-closed，那时它是唯一要画的东西），
     那条更宽的规则不能被这里改窄——否则触屏反而只剩 44px 可点。 */
  .wb-desktop-layout.is-rail-collapsed:not(.is-terminal-closed) { grid-template-columns: 44px minmax(0, 1fr); }
  .wb-session-rail.is-collapsed { width: 44px; }
}

/* Mobile detail already shows the session name and its surface switcher, so the
   workspace's own header would repeat both and cost ~46px of the little height
   a phone terminal has. One bar, not two.

   The header is display:none at this breakpoint, so it is out of flow and takes
   no grid cell at all — .wb-pane-stack is the workspace's only in-flow child.
   The template therefore has to be a single row. A leading auto row would eat
   the stack (it lands on row 1, ~61px) and leave the 1fr row empty, which
   collapses .wb-pane-frame-shell → .wb-pane-frame to 0 height and renders
   no terminal on a phone. */
@media (max-width: 620px) {
  .wb-mobile-detail .wb-workspace-header { display: none; }
  .wb-mobile-detail .wb-workspace { grid-template-rows: minmax(0, 1fr); }
  .wb-mobile-detail-bar { padding: 4px 8px; gap: 6px; }
  .wb-mobile-back { min-height: 40px; padding: 0 6px; }
}

.wb-mobile-preview { display: flex; min-height: 0; overflow: hidden; }
.wb-mobile-preview > .wb-pane { flex: 1; min-height: 0; }

/* 行操作浮层：平时隐藏，悬停/聚焦出现，垂直居中不与时间戳抢位 */
.wb-session-row-actions {
  position: absolute;
  top: 50%;
  /* 和行的右内边距对齐：浮层自己带边和阴影，压在底板圆角上会看出两层圆弧不同心。 */
  right: 14px;
  z-index: 2;
  display: flex;
  gap: 4px;
  padding: 2px 4px;
  /* 脱离文档流的浮层（白名单第 3 类）：底色差不可控，必须有确定的边缘 + 阴影。
     外壳比里面的按钮（10px）再大一档，包住时圆弧才是同心的。 */
  border: 1px solid var(--border-keep);
  border-radius: var(--radius-lg);
  background: var(--bg-l2);
  box-shadow: var(--shadow-pop);
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease-out;
}
.wb-session-row:hover .wb-session-row-actions,
.wb-session-row:focus-within .wb-session-row-actions {
  opacity: 1;
  pointer-events: auto;
}
/* 触屏无 hover：点选中的行显示浮层 */
@media (hover: none) {
  .wb-session-row.is-selected .wb-session-row-actions { opacity: 1; pointer-events: auto; }
}

/* 会话类型徽标（话题 / 群 / 单聊）。挤在 meta 行里，所以行高由 line-height 锁死，
   总高 16px < meta 行本身的高度，不会把虚拟滚动算好的行高撑开。 */
/* chip 的 1px 亮环（白名单第 2 类）：在无边框环境里，chip 靠这圈比填充更亮的环
   跳出来。字号提到 11px，总高仍小于 meta 行本身，撑不开虚拟滚动算好的行高。 */
.wb-session-kind {
  flex: none;
  padding: 0 5px;
  border: 1px solid var(--border-keep);
  border-radius: var(--radius-sm);
  color: var(--text-3);
  font-size: 11px;
  line-height: 16px;
  /* 徽标刻意**不**跟 meta 行其它格一起开 overflow:hidden（见上面那条 :not() 选择
     器）。它是 flex:none + 一两个字的固定文案（话题 / 群 / 单聊），永远没有要截断
     的内容，开了 hidden 等于白架一把裁刀 —— 16px 行框装 11px 中文，遇到 em 盒高的
     中文字体半行距只剩 0.3px，「话」字上沿就被自己这圈框削平了。
     不裁之后，它的字形只受 meta 行那层裁切管，而 1px 亮环天然把内容又让进 1px，
     净空恒 ≥1px。nowrap 仍要保留：两个字的徽标不能折行。 */
  white-space: nowrap;
}
/* meta 行是 space-between 的两栏（描述 | 时间）。插进徽标就变成三栏，自由空间
   会被均分到徽标和描述之间。让描述吃掉剩余空间，恢复「左对齐 + 时间靠右」。 */
.wb-session-kind + span { margin-right: auto; }

/* 定位成功后的短暂确认态 */
.wb-session-row-action.is-locate.is-located { color: var(--ok); }

/* 未读点：时间戳左边一颗 8px 实心圆，accent 蓝在深浅两套主题下都够显眼。
   flex:none 保证 meta 行被挤窄时它不会被压扁成一条线。
   标题颜色刻意不动：标题本来就是 --wb-text + 700，两套主题里都没有「更重」的余地，
   未读全靠这颗点 + 进「待你处理」组 + 行内「有新回复」三件事表达。 */
.wb-unread-dot {
  width: 8px;
  height: 8px;
  flex: none;
  /* 它也是 .wb-session-meta 的直接子 span，会吃到上面那条「截断文字留 1px 上下
     内边距」的规则。这颗点是纯色块不是文字，尺寸只由 width/height 说了算：
     全站 box-sizing:border-box 下 8×8 本来就不会变形，这里显式归零，免得哪天
     谁把 border-box 撤了，圆点被撑成椭圆。 */
  padding: 0;
  border-radius: 50%;
  background: var(--wb-accent);
}
/* meta 行原本靠 space-between 撑成「描述 | 时间」两栏，插进未读点就成了三栏，
   没有类型徽标的行会把点甩到行中间。让第一栏（没有徽标时就是描述本身）吃掉
   剩余空间，点和时间就永远贴在右边。有徽标的行由上面的 .wb-session-kind + span
   规则负责，两条规则互斥，任何一行都只会有一个 auto 外边距。 */
.wb-session-meta > span:first-child:not(.wb-session-kind) { margin-right: auto; }

/* 分组维度下拉：和栏头的收起按钮同一套线条语言（透明底 + 1px 描边 + 24px 高）。
   全站的 select 基线规则（min-height 34px / padding 7px 11px / 右侧 30px 留给箭头）
   特异性只有 0,0,1，这里逐条压掉；箭头沿用那条规则里的默认 SVG，不自绘。
   margin-left:auto 把它推到收起按钮旁边，栏头保持「左标题 · 右控件」。 */
.wb-group-dim {
  height: 24px;
  min-height: 0;
  max-width: 96px;
  padding: 0 16px 0 6px;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--text-2);
  background-color: transparent;
  background-position: right 3px center;
  font: inherit;
  font-size: 11px;
  line-height: 24px;
  cursor: pointer;
}
.wb-group-dim:hover { color: var(--text-1); background-color: var(--bg-l3); }
/* 展开的选项列表由浏览器绘制，只保证它跟随当前主题的底色和字色。 */
.wb-group-dim option { color: var(--text-1); background: var(--bg-l2); }

/* 分组组头 = 折叠开关。它就是原来那个 .wb-session-group 元素本身，只是标签换成了
   <button>，于是全站的按钮基线（min-height 32px / 1px 描边 / raised 底色 / 居中
   文字）会突然罩进来。组头高度是虚拟滚动算好后写死在 style 上的 30px，min-height
   在 used value 上压过 height，不清零就会撑成 32px、和滚动模型差 2px 一路累积。
   选择器故意用两个类：全局的 `.agent-workbench-page button { font: inherit }`
   特异性是 (0,1,1)，单靠 .wb-session-group 的 font-size:10px (0,1,0) 压不住，
   组头字号会被顶回 12px。
   这里一个字都不提 color —— 待你处理的红、进行中的绿由 .wb-session-group-needs-you
   / -active 负责，写了 color 就会被这条更特异的规则洗掉。 */
.wb-session-group.wb-session-group-toggle {
  width: 100%;
  min-height: 0;
  /* 左缘对齐（第二次修）：这条规则比 .wb-session-group 特异性高，组头**实际生效的**
     内边距一直是这里的 `2px`，上一轮改在 .wb-session-group 上的 22px 从来没落到过
     渲染上——组头下面那块 hover 底板（::before，inset 1px 8px、圆角 14）左缘在 8px，
     折叠箭头却坐在 2px，整个字形落在底板**外面**、离会话栏左边缘只剩 3.7px，读起来
     就是「箭头贴边被切」。
     现在四列写成「箭头列 = 行的状态标列」：左内边距 22（= 底板左缘 8 + 圆角 14）后
     箭头占 22–36，与 .wb-session-row 的状态标格逐像素重合；第二列 14px 的组图标落在
     40，正好是行标题的起点。整条列表左侧只剩 22 / 40 两条线。 */
  grid-template-columns: 14px 14px minmax(0, 1fr) auto;
  padding: 5px 14px 3px 22px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 11px;
  /* 1.4 → 1.5：组头自己也是 overflow:hidden，11px 中文在 15.4px 行框里半行距归零，
     组名上沿会被这层裁切削平。组头高 30px、上下内边距 5/3，内容区有 22px，
     16.5px 的行框加组名那 2px 内边距（下一条）也才 18.5px，装得下。 */
  line-height: 1.5;
  letter-spacing: .09em;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
}
/* 组头的 hover 底色和会话行走同一套：::before 是圆角内缩底板，按钮本身保持透明、
   保持方角（它的 overflow:hidden 按方角裁，裁不到内缩的底板）。
   同样用 z-index:-1 落到内容之下，理由见 .wb-session-row::before 的注释。 */
.wb-session-group.wb-session-group-toggle::before {
  content: '';
  position: absolute;
  z-index: -1;
  /* 与会话行底板同一条 8px 内缩线：两块底板左右对齐，列表左侧只剩一条对齐线。 */
  inset: 1px 8px;
  border-radius: var(--radius-lg);
  background: transparent;
  transition: background-color .14s ease-out;
}
.wb-session-group-caret { text-align: center; }
/* 长组名（会话名、仓库名都是自由文本）截断，别压到右边的计数上。
   自己开了 overflow:hidden 就要自己留净空，理由同标题那条。 */
.wb-session-group-toggle > strong {
  min-width: 0;
  overflow: hidden;
  padding-block: 1px;
  text-overflow: ellipsis;
}
/* hover：中性组提亮文字；语义色的两组只加底色，一 hover 就把红/绿洗成前景色会丢语义。 */
.wb-session-group-toggle:hover { color: var(--wb-text); }
.wb-session-group-toggle:hover::before { background: var(--bg-l3); }
.wb-session-group-toggle.wb-session-group-needs-you:hover { color: var(--wb-danger); }
.wb-session-group-toggle.wb-session-group-active:hover { color: var(--wb-success); }

/* 拖动会话栏宽度期间：iframe 不抢指针事件，页面不选中文字 */
.agent-workbench-page.is-rail-dragging { user-select: none; }
.agent-workbench-page.is-rail-dragging iframe { pointer-events: none; }

/* ───────────────────────────────────────────────────────────────────────────
   按钮成组：同组操作 = 一个视觉对象
   分组关系用「共享底板」或「统一裸排」表达，绝不用「每人一块小板」表达。
   一排各自带圆角、各自带底色、中间还留缝的按钮，读起来是几个互不相干的东西，
   而不是同一个对象的几个操作 —— 这是本段要从语法上堵死的形态。
   合法形态只有两种：
   (a) 共享底板 = 下面的 .wb-action-group；
   (b) 全裸同行 = 谁都没有底板、同高同色等距（dock 三个次级按钮、⋯ 菜单项、
       外观面板里的 4 枚色板都走这种，不需要额外的类）。
   单按钮不成组：给一个按钮套一个盒子只是多一块噪声。
   ─────────────────────────────────────────────────────────────────────────── */
.wb-action-group,
.wb-seg {
  display: flex;
  align-items: stretch;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  /* 组落在 L0 / L1 上取 L2；落在 L2 上的组加 .on-l2 往亮走一档，永远与父层拉开一档。 */
  border-radius: var(--radius-lg);
  background: var(--bg-l2);
  box-shadow: none;
  /* 组内子项的圆角全靠它裁 */
  overflow: hidden;
}
.wb-action-group.on-l2,
.wb-seg.on-l2 { background: var(--bg-l3); }
/* 选择器带上 .agent-workbench-* 前缀不是啰嗦：工作台的控件基线是
   `.agent-workbench-page button`（0,1,1），比裸的 `.wb-action-group > *`（0,1,0）更特异，
   不加前缀的话组内子项会被那条规则重新塞回 10px 圆角，「圆角全由容器裁」当场失效。 */
.agent-workbench-page .wb-action-group > *,
.agent-workbench-dock .wb-action-group > *,
.agent-workbench-page .wb-seg-item,
.agent-workbench-dock .wb-seg-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch-target);
  min-height: var(--touch-target);
  padding: 0 10px;
  border: 0;
  /* 恒为 0：两端的圆角由容器裁出来，每个元素仍然四角同值 */
  border-radius: 0;
  color: var(--text-2);
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.wb-action-group > *:hover,
.wb-action-group > *[aria-selected="true"],
.wb-action-group > *[aria-current="page"],
.wb-seg-item:hover,
.wb-seg-item.is-on { background: var(--bg-l3); }
.wb-action-group.on-l2 > *:hover,
.wb-action-group.on-l2 > *[aria-selected="true"],
.wb-action-group.on-l2 > *[aria-current="page"],
.wb-seg.on-l2 > .wb-seg-item:hover,
.wb-seg.on-l2 > .wb-seg-item.is-on { background: var(--bg-l2); }

/* 组内分线是「按需开」，不是默认开：只允许挂在「≥3 项 且 容器高 ≥40px」的组上。
   用伪元素而不是 box-shadow —— 分线必须上下各内缩 10px，满高的线会在组的上下边缘
   顶到容器圆角上，看起来就像组被切成了几块，又回到独立浮块。
   `> * + *` 本身就保证第一项不画线，也就保证线永远不会出现在组的外缘。 */
.wb-action-group.has-dividers > * + * { position: relative; }
.wb-action-group.has-dividers > * + *::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: var(--border-keep);
}

/* 破坏性 / 不可逆动作留在组内，靠字色和字重区分，不靠隔离 —— 距离表达的是「不同类」，
   而这几个操作恰恰是同一类，只是后果轻重不同。轻重是强调问题，强调用字色和字重。
   用 accent 而不是 err：err 已经被「会话状态点 = 需要你处理」占了语义。 */
.wb-action-group .is-danger { color: var(--accent); font-weight: 600; }
.wb-action-group .is-danger:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* 分段控件（阅读 / 经典、跟随系统 / 浅色 / 深色）：容器 24px 高，按自身高度取档 → sm。
   选中段 = 字色 + 600 字重 + 2px accent 内底线，不引入第五档灰做 thumb。
   只有 2 项、或容器高 < 40px 的组一律不画组内分线（白名单第 6 类第 ③④ 条）。 */
.wb-seg,
.wb-action-group.is-segmented {
  height: 24px;
  border-radius: var(--radius-sm);
}
.agent-workbench-page .wb-seg-item,
.agent-workbench-dock .wb-seg-item,
.agent-workbench-page .wb-action-group.is-segmented > *,
.agent-workbench-dock .wb-action-group.is-segmented > * {
  min-width: 40px;
  min-height: 0;
  padding: 0 8px;
  color: var(--text-3);
  font-size: 12px;
}
.wb-seg-item.is-on,
.wb-action-group.is-segmented > *[aria-selected="true"],
.wb-action-group.is-segmented > *[aria-current="page"] {
  color: var(--text-1);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--accent);
}
/* 「跟随系统」比另外两段长，给模式分段一个更宽的下限，三段仍然等宽。 */
.wb-appearance-mode-seg > .wb-seg-item { min-width: 56px; }

/* 触屏露出的操作组：一块随动作数增长的 52n×56 板，不是若干散块。
   每个动作 52 × 56，宽高都超过 44px 的指尖下限；56 = 行卡底板高
   （60px 行高减去上下各 2px inset），与行卡等高。话题行现在比普通行多
   「定位 + 跳转」，容器不能再按旧的固定三个动作写死为 156px，否则第四项溢出。
   组的右缘与行卡的 8px 内缩落在同一条线上：贴屏边会让滑出的这一行比其余每一行都
   多探出 8px，静态图上一眼看得出跑偏。
   选择器只写 `.wb-session-row-actions`：行操作那个 <span> 从来只有这一个类，
   原来写的 `.wb-session-row-actions.wb-action-group` 一次都没匹配上，整段是死的。
   也不能反过来去 TSX 上补 `wb-action-group` —— 那个类在本文件里排得更后、特异性
   相同，会把桌面浮层的 1px 描边和投影一并抹掉（浮层归白名单第 3 类，必须有边有影）。
   `overflow` 与子项的 `border-radius: 0` 本来由 `.wb-action-group` 提供，这里就地
   补上：组的圆角由容器裁，子项四角同值，才读得成一个对象。 */
@media (hover: none) {
  .wb-session-row-actions {
    right: 8px;
    gap: 0;
    width: max-content;
    height: 56px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--bg-l2);
    box-shadow: none;
    overflow: hidden;
  }
  .agent-workbench-page .wb-session-row-actions > *,
  .agent-workbench-dock .wb-session-row-actions > * {
    flex: 1;
    width: 52px;
    min-width: 52px;
    height: 56px;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
  }
}

/* ⋯ 菜单：`⋯` 是单按钮，不套容器底板 —— 给一个按钮加一个盒子只是多一块噪声。
   下拉浮层走白名单第 3 类（1px --border-keep + --shadow-pop）；里面的菜单项走形态
   (b)：全裸列表项，等高等距，谁都没有自己的底板，hover 才显满宽 L3 底。 */
.wb-more { position: relative; display: inline-flex; }
.wb-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch-target);
  min-height: var(--touch-target);
  padding: 0 6px;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--text-2);
  background: transparent;
  line-height: 1;
  cursor: pointer;
}
.wb-more-btn:hover,
.wb-more-btn[aria-expanded="true"] { color: var(--text-1); background: var(--bg-l3); }
.wb-more-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 10;
  min-width: 156px;
  padding: 4px;
  border: 1px solid var(--border-keep);
  border-radius: var(--radius-lg);
  background: var(--bg-l2);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
/* 同样带前缀压过 `.agent-workbench-page button` 的 10px 基线（见上）。 */
.agent-workbench-page .wb-more-item,
.agent-workbench-dock .wb-more-item {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  background: transparent;
  font-size: 12px;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.wb-more-item + .wb-more-item { margin-top: 2px; }
.wb-more-item:hover { color: var(--text-1); background: var(--bg-l3); }
/* 破坏性动作（接管）固定在列表最末，靠字色和字重标识，不加分组线、不额外留缝。 */
.wb-more-item.is-danger { color: var(--accent); font-weight: 600; }

/* ───────────────────────────────────────────────────────────────────────────
   外观面板：主题（4 枚色板）+ 明暗（分段控件）+ 终端渲染（分段控件）
   桌面是下拉浮层，移动是底部 sheet；两处入口、一个状态源。
   ─────────────────────────────────────────────────────────────────────────── */
/* H5 列表页顶栏那枚 ◐：与右邻的收起按钮各是一个单按钮 —— 等高等色、都没有底板，
   也不套共享底板（一个管外观、一个管会话，不是同一组操作）。 */
.wb-appearance-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch-target);
  min-height: var(--touch-target);
  padding: 0 6px;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--text-2);
  background: transparent;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.wb-appearance-btn:hover { color: var(--text-1); background: var(--bg-l3); }

/* 桌面：挂在 ⋯ 按钮下方的下拉浮层（白名单第 3 类）。宽 260px：
   4 枚 28px 色板 + 3×12px 间距 + 2×12px 内边距 = 172px，装得下。 */
.wb-appearance-pop {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 10;
  width: 260px;
  padding: 12px;
  border: 1px solid var(--border-keep);
  border-radius: var(--radius-lg);
  background: var(--bg-l2);
  box-shadow: var(--shadow-pop);
}
/* 移动：同一块内容改底部 sheet。顶角与下钻容器同形、贴屏底不圆下两角 —— 这是
   「一个元素四角同值」唯一的例外。 */
.wb-appearance-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: flex-end;
  background: var(--modal-backdrop, rgba(10, 14, 18, .48));
}
.wb-appearance-sheet {
  width: 100%;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  border: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--bg-l2);
  box-shadow: var(--shadow-pop);
}
.wb-appearance-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--text-1);
  font-size: 13px;
}
.wb-appearance-head button {
  min-width: var(--touch-target);
  min-height: var(--touch-target);
  border: 0;
  border-radius: var(--radius-md);
  color: var(--text-3);
  background: transparent;
  cursor: pointer;
}
.wb-appearance-head button:hover { color: var(--text-1); background: var(--bg-l3); }
/* 两组之间 16px 留白 + 组标题，不画分组线（白名单里没有「面板内分组线」这一类）。 */
.wb-appearance-group { display: grid; gap: 8px; justify-items: start; }
.wb-appearance-group + .wb-appearance-group { margin-top: 16px; }
.wb-appearance-group-label { color: var(--text-3); font-size: 11px; }
.wb-appearance-note { margin: 0; color: var(--text-3); font-size: 11px; line-height: 16px; }

/* 常驻链接弹层：定位/描边/投影完全由 .wb-appearance-pop 那一份负责（同一族浮层，
   不另起一套），这里只排里面的三样东西——只读链接框、复制按钮、说明。
   链接是一长串等宽字符，宽一点才不至于一眼全是省略号。 */
.wb-standing-link-pop { width: 300px; }
.wb-standing-link-body { display: grid; gap: 8px; }
/* 只读文本框而不是 <code>：能整条选中、能用系统的复制手势，是自动复制被浏览器
   策略拦掉时唯一还管用的退路。折行显示——链接有六七十个字符，单行框里只看得见
   开头一截，而这块弹层的用途就是把**完整**链接摆出来。 */
.wb-standing-link-url {
  width: 100%;
  min-height: var(--touch-target);
  padding: 6px 8px;
  border: 1px solid var(--border-keep);
  border-radius: var(--radius-sm);
  color: var(--text-1);
  background: var(--bg-l1);
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
  line-height: 17px;
  word-break: break-all;
  resize: none;
}
.wb-standing-link-copy,
.wb-standing-link-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target);
  padding: 0 12px;
  border: 1px solid var(--border-keep);
  border-radius: var(--radius-sm);
  color: var(--text-1);
  background: var(--bg-l2);
  font-size: 12px;
  cursor: pointer;
}
.wb-standing-link-copy:hover,
.wb-standing-link-open:hover { background: var(--bg-l3); }
/* sheet 里那枚入口占满一行：底部 sheet 的其余控件都是整行节奏。 */
.wb-standing-link-open { width: 100%; }
.wb-standing-link-status { margin: 0; color: var(--text-3); font-size: 12px; }
.wb-standing-link-note { margin-top: 12px; }

/* 4 枚色板走形态 (b)：它们是单选项不是操作按钮，四枚等距同尺寸本身已经读成一组。
   给色板加一块容器底反而会干扰对色相的判读 —— 底色会影响对色相的感知。 */
.wb-skin-swatches { display: flex; gap: 12px; }
.wb-skin-swatch {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
/* 三色缩影：左 2/3 = 该套的 L1、右上 1/3 = L3、右下 1/3 = accent，一眼看出色相和
   accent，不用点进去试。三块纯色由两个伪元素叠出来，刻意不用渐变（段内零渐变）。
   三个色值由 TS 侧按皮肤内联下发（--sw-bg / --sw-raise / --sw-accent）：色板画的是
   「目标皮肤」的颜色，当前页的令牌给不了。 */
.wb-skin-swatch-chip {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--sw-bg);
  overflow: hidden;
}
.wb-skin-swatch-chip::before,
.wb-skin-swatch-chip::after {
  content: '';
  position: absolute;
  right: 0;
  width: 33.33%;
  height: 50%;
}
.wb-skin-swatch-chip::before { top: 0; background: var(--sw-raise); }
.wb-skin-swatch-chip::after { bottom: 0; background: var(--sw-accent); }
/* 选中标识：外圈 2px accent 环（与焦点环同族画法，但常驻） */
.wb-skin-swatch.is-active .wb-skin-swatch-chip { box-shadow: 0 0 0 2px var(--accent); }
.wb-skin-swatch-name { color: var(--text-3); font-size: 11px; line-height: 14px; white-space: nowrap; }
.wb-skin-swatch.is-active .wb-skin-swatch-name { color: var(--text-1); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════
   Toast 系统（toast.tsx）
   全局单例 + 事件发射器，容器 <ToastStack /> 在 app.tsx 挂载一次。
   ═══════════════════════════════════════════════════════════════════ */
.toast-stack {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
  max-width: 100vw;
}
.toast-item {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--fg);
  color: var(--bg);
  padding: 9px 16px;
  border-radius: var(--radius-md);
  font-size: var(--fs-13);
  font-weight: var(--fw-m);
  line-height: var(--lh-title);
  box-shadow: var(--sh-lg);
  animation: toastIn var(--t-norm);
  max-width: min(90vw, 480px);
}
.toast-item.is-leaving {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.toast-message {
  overflow-wrap: break-word;
  min-width: 0;
  white-space: pre-line;
}
/* 深色 chip + 浅色文字的语义配色；info/warning 与 success/error 同族语言 */
.toast-item-success { background: #17352a; color: #7ee2b2; }
.toast-item-error { background: #3d1d22; color: #f2a0aa; }
.toast-item-info { background: #152f4d; color: #86bdf2; }
.toast-item-warning { background: #3d2c12; color: #f0c478; }
:root[data-theme="dark"] .toast-item-success { background: #123528; }
:root[data-theme="dark"] .toast-item-error { background: #3a1c22; }
:root[data-theme="dark"] .toast-item-info { background: #122c49; }
:root[data-theme="dark"] .toast-item-warning { background: #382910; }
.toast-action {
  flex: 0 0 auto;
  background: rgba(255, 255, 255, .15);
  border: none;
  color: inherit;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: var(--fw-m);
  line-height: 1.4;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast);
}
.toast-action:hover { background: rgba(255, 255, 255, .25); }

/* ═══════════════════════════════════════════════════════════════════
   ConfirmModal 系统（confirm-modal.tsx）
   基于原生 <dialog>：::backdrop 充当 mask，dialog 靠 UA margin:auto 居中。
   ═══════════════════════════════════════════════════════════════════ */
.confirm-modal-dialog {
  width: 440px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
  padding: 0;
  border: 0;
  background: var(--surface);
  color: var(--fg);
  border-radius: var(--radius-lg);
  box-shadow: var(--modal-shadow);
  animation: confirmModalIn var(--t-norm);
  overflow: auto;
}
.confirm-modal-dialog::backdrop {
  background: var(--modal-backdrop);
}
@keyframes confirmModalIn {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: none; }
}
.confirm-modal-title {
  margin: 0;
  padding: var(--sp-5) var(--sp-5) 0;
  font-size: var(--fs-17);
  font-weight: var(--fw-s);
  line-height: var(--lh-title);
}
.confirm-modal-message {
  margin: 0;
  padding: var(--sp-4) var(--sp-5);
  color: var(--fg-2);
  font-size: var(--fs-13);
  line-height: var(--lh-body);
  overflow-wrap: break-word;
  white-space: pre-wrap;
}
.confirm-modal-input-row {
  padding: 0 var(--sp-5) var(--sp-4);
}
.confirm-modal-input {
  width: 100%;
}
.confirm-modal-footer {
  padding: 0 var(--sp-5) var(--sp-5);
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
}
/* 按钮：.btn-primary / .btn-danger / .btn-cancel 作用域收在 footer 内，
   稳压全局裸 button 规则（0-0-1）与 dialog 内 :where() 规则（0-0-0）。 */
.confirm-modal-footer .btn-primary,
.confirm-modal-footer .btn-danger,
.confirm-modal-footer .btn-cancel {
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.confirm-modal-footer .btn-cancel {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-2);
}
.confirm-modal-footer .btn-cancel:hover:not(:disabled) {
  border-color: var(--border-strong);
  color: var(--fg);
}
.confirm-modal-footer .btn-primary {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--on-accent);
}
.confirm-modal-footer .btn-primary:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.confirm-modal-footer .btn-danger {
  background: var(--danger);
  border: 1px solid var(--danger);
  color: var(--on-danger);
}
.confirm-modal-footer .btn-danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--danger) 88%, #000);
  border-color: color-mix(in srgb, var(--danger) 88%, #000);
}
.confirm-modal-footer button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .toast-item,
  .confirm-modal-dialog { animation: none; }
  .toast-item.is-leaving { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   Overview（工作台）— Calm Console：注意力即层级
   布局顺序：头部 → 统计条 → 需要你处理 → 进行中 → 数字员工 → 定时任务
   纯 token 驱动，暗色模式自动生效。
   ═══════════════════════════════════════════════════════════════════ */

/* ── 页面头部：标题 + 副标题（在线/待处理/实时同步）+ 操作 ─────────────── */
/* hero-page 仅工作台使用：覆盖 baseline 的「首子元素 flex 横排」，让副标题落在标题下 */
.hero-page .page-heading > :first-child {
  display: block;
  min-width: 0;
}
.overview-subtitle {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-13);
  color: var(--muted);
}
.overview-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-12);
  color: var(--faint);
  white-space: nowrap;
}
.overview-live i {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 16%, transparent);
  animation: overview-live-pulse 2.4s ease-in-out infinite;
}
.overview-live.is-offline { color: var(--warning); }
.overview-live.is-offline i {
  background: var(--warning);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 16%, transparent);
}
@keyframes overview-live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ── 统计条：4 个 stat chip（图标 + 大数字 + 标签 + 迷你 sparkline）────── */
.overview-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
}
.stat-chip {
  --chip-tone: var(--muted);
  --chip-tone-soft: var(--surface-muted);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--sh-sm);
  transition: box-shadow var(--t-fast), transform var(--t-fast), border-color var(--t-fast);
}
.stat-chip:hover {
  box-shadow: var(--sh-md);
  transform: translateY(-1px);
  border-color: var(--border-strong);
}
.stat-chip--need { --chip-tone: var(--st-need); --chip-tone-soft: var(--st-need-soft); }
.stat-chip--work { --chip-tone: var(--st-work); --chip-tone-soft: var(--st-work-soft); }
.stat-chip--active { --chip-tone: var(--muted); --chip-tone-soft: var(--surface-muted); }
.stat-chip--online { --chip-tone: var(--success); --chip-tone-soft: var(--success-soft); }
.stat-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--radius-md);
  color: var(--chip-tone);
  background: var(--chip-tone-soft);
}
.stat-chip-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}
.stat-chip-value {
  font-size: var(--fs-24);
  font-weight: var(--fw-s);
  line-height: var(--lh-tight);
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.stat-chip-suffix {
  margin-left: 2px;
  font-size: var(--fs-12);
  font-weight: var(--fw-m);
  color: var(--faint);
}
.stat-chip-label {
  font-size: var(--fs-12);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-chip-spark {
  width: 72px;
  height: 28px;
  flex: none;
  opacity: 0.9;
}
.stat-chip-spark polygon {
  fill: var(--chip-tone-soft);
  stroke: none;
}
.stat-chip-spark polyline {
  fill: none;
  stroke: var(--chip-tone);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── 需要你处理：琥珀左条卡片队列；无 attention 时是安静的绿色空态 ──────── */
.attn-list {
  display: grid;
  gap: var(--sp-2);
}
.attn-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  padding: var(--sp-3) var(--sp-4);
  background: color-mix(in srgb, var(--st-need) 5%, var(--surface));
  border: 1px solid var(--border);
  border-left: 3px solid var(--st-need);
  border-radius: var(--radius-md);
  box-shadow: var(--sh-sm);
  color: inherit;
  text-decoration: none;
  transition: box-shadow var(--t-fast), transform var(--t-fast), border-color var(--t-fast);
}
.attn-item:hover {
  box-shadow: var(--sh-md);
  transform: translateX(2px);
  border-color: color-mix(in srgb, var(--st-need) 38%, var(--border));
}
.attn-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.attn-main b {
  font-size: var(--fs-13);
  font-weight: var(--fw-s);
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.attn-main span {
  font-size: var(--fs-12);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.attn-action {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 var(--sp-3);
  border-radius: var(--radius-full);
  background: var(--st-need-soft);
  color: var(--st-need);
  font-size: var(--fs-12);
  font-weight: var(--fw-s);
  white-space: nowrap;
}
.attn-empty {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--sh-sm);
  color: var(--muted);
  font-size: var(--fs-13);
}
.attn-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--radius-full);
  background: var(--success-soft);
  color: var(--success);
}

/* ── 进行中：面板内紧凑行，整行点击跳转会话页 ─────────────────────────── */
.active-sessions-panel > .work-list {
  flex: 1;
  min-height: 0;
  align-content: start;
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-2);
  overflow-x: hidden;
  overflow-y: auto;
}
.work-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: inherit;
  text-decoration: none;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.work-item:hover {
  background: var(--surface-hover);
  border-color: var(--border-soft);
}
.work-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.work-main b {
  font-size: var(--fs-13);
  font-weight: var(--fw-s);
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.work-main span {
  font-size: var(--fs-12);
  color: var(--faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.work-status { flex: none; }

/* ── 数字员工卡片：收敛到 token 卡片规范（1px border + sh-sm，hover 浮起）── */
.mate {
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--sh-sm);
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.mate:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
  border-color: var(--border-strong);
}
/* 等你的卡片保持琥珀描边（覆盖上面的 hover border，注意力信号不丢） */
.mate-attn {
  border-color: color-mix(in srgb, var(--st-need) 42%, transparent);
}
.mate-attn:hover {
  border-color: color-mix(in srgb, var(--st-need) 62%, var(--border-strong));
}
/* 旧 dark 玻璃覆盖收敛到纯 token：暗色也走 surface + border，注意力描边生效 */
:root[data-theme="dark"] .mate {
  background: var(--surface);
  border-color: var(--border);
  backdrop-filter: none;
}
:root[data-theme="dark"] .mate:hover {
  border-color: var(--border-strong);
}
:root[data-theme="dark"] .mate-attn {
  border-color: color-mix(in srgb, var(--st-need) 45%, transparent);
}
:root[data-theme="dark"] .mate-attn:hover {
  border-color: color-mix(in srgb, var(--st-need) 62%, var(--border-strong));
}
/* 当前任务：单行截断（原来是 2 行 clamp） */
.mate-task {
  display: block;
  min-height: 0;
  font-size: var(--fs-12);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 定时任务：紧凑行 + 时钟图标 ──────────────────────────────────────── */
.sched-clock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  color: var(--faint);
}

/* ── 排程整块隐藏时，主栏占满 ────────────────────────────────────────── */
.overview-layout--single {
  grid-template-columns: minmax(0, 1fr);
}

/* ── 响应式：统计条 2 列、bot 网格 1 列、列表全宽 ─────────────────────── */
@media (max-width: 980px) {
  .overview-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .team-grid {
    grid-template-columns: 1fr;
  }
  .stat-chip-spark {
    display: none;
  }
  .stat-chip-label {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .overview-live i { animation: none; }
  .stat-chip,
  .attn-item,
  .mate,
  .work-item { transition: none; }
  .stat-chip:hover,
  .attn-item:hover,
  .mate:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   Sessions 页视觉改造（2026-08）
   筛选条收敛 / 看板卡片重设计 / Drawer 操作分组 / 骨架屏 / 列头降噪。
   全部 token 驱动，暗色随 data-theme 自动切换。
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. 筛选条：搜索 + 快捷分段 + 筛选按钮 + 排序 + 清理空闲（ghost） ── */
.sessions-page .sessions-filters.sessions-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 var(--sp-3);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  min-height: 0;
}

.sessions-page .sessions-toolbar input[type="search"][name="q"] {
  flex: 1 1 240px;
  min-width: 180px;
  max-width: 420px;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 0 var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
  font-size: var(--fs-13);
}

.sessions-page .sessions-toolbar .sessions-quick-view {
  flex: none;
  border-radius: var(--radius-full);
  border-color: var(--border-soft);
}

.sessions-page .sessions-toolbar .sessions-quick-view button {
  min-height: 26px;
  padding: 0 var(--sp-3);
}

.sessions-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  height: var(--button-height);
  padding: 0 var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font-size: var(--fs-12);
  font-weight: var(--fw-m);
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}

.sessions-filter-btn:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
}

.sessions-filter-btn.has-active {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.sessions-filter-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sessions-sort-menu .sect-sort-value {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 「清理空闲」降级为 ghost 链接 */
.sessions-page .sessions-toolbar .idle-cleanup-bar {
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.sessions-page .sessions-toolbar .idle-cleanup-run {
  height: var(--button-height);
  min-height: var(--button-height);
  padding: 0 var(--sp-2);
  border: 0;
  background: transparent;
  color: var(--faint);
  font-size: var(--fs-12);
  font-weight: var(--fw-r);
  box-shadow: none;
}

.sessions-page .sessions-toolbar .idle-cleanup-run:hover:not(:disabled) {
  background: transparent;
  color: var(--danger);
}

.sessions-page .sessions-toolbar .idle-cleanup-run .idle-cleanup-icon {
  width: 13px;
  height: 13px;
}

/* ── 2. 高级筛选抽屉 ───────────────────────────────────────────────── */
.sessions-filter-drawer {
  width: min(400px, calc(100vw - 24px));
  max-width: 400px;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
  box-shadow: var(--modal-shadow);
}

.sessions-filter-drawer[open] {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  top: 0;
  bottom: 0;
  margin: 0 0 0 auto;
}

.sessions-filter-drawer::backdrop {
  background: var(--modal-backdrop);
}

.sessions-filter-drawer > header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border-soft);
}

.sessions-filter-drawer > header h3 {
  margin: 0;
  font-size: var(--fs-15);
  font-weight: var(--fw-s);
  color: var(--fg);
}

.sessions-filter-drawer-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--sp-5);
  display: grid;
  gap: var(--sp-4);
  align-content: start;
}

.sessions-filter-field {
  display: grid;
  gap: 6px;
}

.sessions-filter-label {
  font-size: var(--fs-12);
  font-weight: var(--fw-m);
  color: var(--muted);
}

.sessions-filter-field select {
  width: 100%;
  height: var(--button-height);
  padding: 0 var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background-color: var(--surface-raised);
  color: var(--fg);
  font-size: var(--fs-13);
}

.sessions-filter-cli {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
}

.sessions-filter-cli-search {
  height: var(--button-height);
  padding: 0 var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--fg);
  font-size: var(--fs-12);
}

.sessions-filter-cli-bulk {
  display: flex;
  gap: var(--sp-2);
}

.sessions-filter-cli-bulk button {
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast);
}

.sessions-filter-cli-bulk button:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
}

.sessions-filter-cli-list {
  display: grid;
  gap: 2px;
  max-height: 180px;
  overflow-y: auto;
}

.sessions-filter-cli-list .filter-check {
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}

.sessions-filter-cli-list .filter-check:hover {
  background: var(--surface-hover);
}

.sessions-filter-toggles {
  display: grid;
  gap: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border-soft);
}

.sessions-filter-drawer > footer {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--border-soft);
}

.sessions-filter-clear {
  height: var(--button-height);
  padding: 0 var(--sp-3);
  border: 0;
  background: transparent;
  color: var(--faint);
  font-size: var(--fs-12);
  cursor: pointer;
}

.sessions-filter-clear:hover {
  color: var(--danger);
}

.sessions-filter-done {
  height: var(--button-height);
  padding: 0 var(--sp-6);
  border: 1px solid var(--accent);
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--fs-13);
  font-weight: var(--fw-s);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}

.sessions-filter-done:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* ── 3. 看板卡片 v2：状态色条 + 标题 + meta + 预览 + 底部标签操作 ──────── */
.kanban-card {
  gap: 5px;
  padding: 10px 12px 10px 15px;
}

.kanban-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--st-idle);
}

.kanban-card[data-signal="needs-you"]::before { background: var(--st-need); }
.kanban-card[data-signal="working"]::before { background: var(--st-work); }
.kanban-card[data-signal="todo"]::before { background: var(--st-todo); }
.kanban-card[data-signal="idle"]::before { background: var(--st-idle); }
.kanban-card[data-signal="closed"]::before { background: var(--border-strong); }

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

.kanban-card-head .badge {
  flex: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kanban-card-head .session-signal {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kanban-card-meta {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-12);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kanban-card-preview {
  margin: 0;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
}

.kanban-card-foot {
  margin-top: 1px;
}

.kanban-card-term {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: var(--fs-12);
  font-weight: var(--fw-m);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity var(--t-fast), visibility var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.kanban-card-term svg {
  width: 12px;
  height: 12px;
}

.kanban-card-term:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
}

.kanban-card-more {
  margin-left: auto;
  flex: none;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity var(--t-fast), visibility var(--t-fast), background var(--t-fast), color var(--t-fast);
}

.kanban-card-more svg {
  width: 14px;
  height: 14px;
}

.kanban-card-more:hover {
  background: var(--surface-hover);
  color: var(--fg);
}

.kanban-card:hover .kanban-card-term,
.kanban-card:focus-within .kanban-card-term,
.kanban-card:hover .kanban-card-more,
.kanban-card:focus-within .kanban-card-more,
.kanban-card-more.is-open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

@media (hover: none), (max-width: 720px) {
  .kanban-card-term,
  .kanban-card-more {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }
}

/* 卡片「⋯」菜单弹层（portal 到 body，逃出卡片 overflow:hidden） */
.card-menu-pop {
  position: fixed;
  z-index: var(--z-modal);
  min-width: 190px;
  padding: 6px;
  display: grid;
  gap: 2px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: var(--sh-lg);
}

.card-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg);
  font-size: var(--fs-13);
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast);
}

.card-menu-item:hover:not(:disabled) {
  background: var(--surface-hover);
}

.card-menu-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.card-menu-item.danger {
  color: var(--danger);
}

.card-menu-item.danger:hover:not(:disabled) {
  background: var(--danger-soft);
}

.card-menu-icon {
  display: inline-flex;
  flex: none;
  width: 14px;
  color: var(--faint);
}

.card-menu-icon svg {
  width: 14px;
  height: 14px;
}

.card-menu-item.danger .card-menu-icon {
  color: var(--danger);
}

a.card-menu-item {
  text-decoration: none;
  box-sizing: border-box;
}

/* ── 4. 看板列头：状态色点 + 名称 + 计数徽章 ─────────────────────────── */
.kanban-col-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--st-idle);
}

.kanban-col-dot-idle { background: var(--st-idle); box-shadow: 0 0 0 3px var(--st-idle-soft); }
.kanban-col-dot-todo { background: var(--st-todo); box-shadow: 0 0 0 3px var(--st-todo-soft); }
.kanban-col-dot-work { background: var(--st-work); box-shadow: 0 0 0 3px var(--st-work-soft); }
.kanban-col-dot-need { background: var(--st-need); box-shadow: 0 0 0 3px var(--st-need-soft); }
.kanban-col-dot-done { background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }

.kanban-column > header {
  gap: 8px;
  padding: 10px 12px;
}

.kanban-column h2 {
  font-size: var(--fs-13);
  font-weight: var(--fw-s);
}

.kanban-col-count {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ── 5. 状态板列头降噪：色点保留，名称正体，描述小字，信号色对齐 st-* ──── */
.session-board-needs-you { --col-signal: var(--st-need); }
.session-board-working { --col-signal: var(--st-work); }
.session-board-todo { --col-signal: var(--st-todo); }
.session-board-idle { --col-signal: var(--st-idle); }

.session-board-column > header {
  min-height: 0;
  padding: 10px 12px;
  gap: 8px;
}

.session-board-column h2 {
  font-family: var(--font);
  font-size: var(--fs-13);
  font-weight: var(--fw-s);
  letter-spacing: 0;
  text-transform: none;
}

.session-board-column p {
  font-size: 11px;
  color: var(--faint);
}

.session-board-count {
  font-family: inherit;
  font-size: 11px;
}

/* 状态板卡片：状态色条 + hover 显示操作 */
.session-card {
  padding-left: 14px;
}

.session-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--st-idle);
}

.session-card[data-signal="needs-you"]::before { background: var(--st-need); }
.session-card[data-signal="working"]::before { background: var(--st-work); }
.session-card[data-signal="todo"]::before { background: var(--st-todo); }
.session-card[data-signal="idle"]::before { background: var(--st-idle); }
.session-card[data-signal="closed"]::before { background: var(--border-strong); }

.session-card-actions {
  opacity: 0;
  transition: opacity var(--t-fast);
}

.session-card:hover .session-card-actions,
.session-card:focus-within .session-card-actions {
  opacity: 1;
}

@media (hover: none), (max-width: 720px) {
  .session-card-actions {
    opacity: 1;
  }
}

/* ── 6. Drawer：底部固定操作栏（主/次/危险 + 更多） ─────────────────── */
#drawer {
  width: min(560px, calc(100vw - 32px));
  padding: 0;
  overflow: hidden;
}

#drawer article {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: min(86vh, 900px);
  padding: 0;
}

#drawer header {
  flex: none;
  gap: 9px;
  padding: var(--sp-4) var(--sp-5) var(--sp-3);
}

#drawer .drawer-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--sp-3) var(--sp-5);
  display: grid;
  gap: var(--sp-2);
  align-content: start;
}

#drawer .drawer-body #insight-btn {
  justify-self: start;
  height: var(--button-height);
  margin-top: var(--sp-2);
  padding: 0 var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font-size: var(--fs-12);
  cursor: pointer;
}

#drawer .drawer-body #insight-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent-strong);
}

#drawer .drawer-foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--border-soft);
  background: var(--surface-muted);
}

#drawer .drawer-foot-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  min-width: 0;
}

.drawer-btn-primary {
  height: var(--button-height);
  padding: 0 var(--sp-5);
  border: 1px solid var(--accent);
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--fs-13);
  font-weight: var(--fw-s);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}

.drawer-btn-primary:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.drawer-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.drawer-btn-secondary {
  height: var(--button-height);
  padding: 0 var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font-size: var(--fs-13);
  font-weight: var(--fw-m);
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast);
}

.drawer-btn-secondary:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent-strong);
}

.drawer-btn-danger {
  height: var(--button-height);
  padding: 0 var(--sp-4);
  border: 1px solid color-mix(in srgb, var(--danger) 55%, var(--border));
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--danger);
  font-size: var(--fs-13);
  font-weight: var(--fw-m);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}

.drawer-btn-danger:hover:not(:disabled) {
  background: var(--danger-soft);
  border-color: var(--danger);
}

.drawer-more {
  position: relative;
  margin-left: auto;
  flex: none;
}

.drawer-more > summary {
  display: inline-flex;
  align-items: center;
  height: var(--button-height);
  padding: 0 var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: var(--fs-12);
  cursor: pointer;
  list-style: none;
  transition: border-color var(--t-fast), color var(--t-fast);
}

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

.drawer-more > summary:hover,
.drawer-more[open] > summary {
  border-color: var(--accent);
  color: var(--accent-strong);
}

.drawer-more-pop {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  z-index: var(--z-drawer);
  min-width: 180px;
  padding: 6px;
  display: grid;
  gap: 2px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: var(--sh-lg);
}

.drawer-more-pop > button,
.drawer-more-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg);
  font-size: var(--fs-13);
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast);
}

.drawer-more-pop > button:hover:not(:disabled),
.drawer-more-item:hover {
  background: var(--surface-hover);
}

.drawer-more-pop > button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.drawer-more-item {
  padding: 0;
}

.drawer-more-item > #locate-btn {
  width: 100%;
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: var(--fg);
  font-size: var(--fs-13);
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.drawer-more-item > #locate-btn:hover:not(:disabled) {
  background: var(--surface-hover);
}

.drawer-more-item > #locate-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.drawer-more-link {
  text-decoration: none;
  box-sizing: border-box;
}

/* ── 7. 骨架屏：首个快照到达前不闪「空」 ───────────────────────────── */
.sessions-skeleton {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
  height: 100%;
  min-height: 300px;
}

.sessions-skeleton-col {
  display: grid;
  gap: var(--sp-3);
  align-content: start;
  padding: var(--sp-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
}

.skel {
  border-radius: var(--radius-md);
  background: var(--border-soft);
  animation: skel-pulse 1.4s ease-in-out infinite;
}

.skel-head {
  height: 14px;
  width: 42%;
}

.skel-card {
  height: 96px;
}

.skel-card-short {
  height: 72px;
  width: 88%;
}

@keyframes skel-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

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

/* ── 8. 移动端：筛选条收敛为搜索 + 筛选按钮；骨架单列 ────────────────── */
@media (max-width: 720px) {
  .sessions-page .sessions-toolbar .sessions-quick-view,
  .sessions-page .sessions-toolbar .sessions-sort-menu,
  .sessions-page .sessions-toolbar .idle-cleanup-bar {
    display: none;
  }

  .sessions-page .sessions-toolbar input[type="search"][name="q"] {
    flex: 1 1 auto;
    max-width: none;
  }

  .sessions-skeleton {
    grid-template-columns: 1fr;
    height: auto;
  }

  .sessions-filter-drawer {
    width: min(400px, calc(100vw - 24px));
  }
}