styles.css

/*
 * blxcode — focused agent workbench
 * Deep dark surfaces, crisp separators, cool blue active states, and restrained depth.
 */

/*
 * Bundled JetBrains Mono Nerd Font (Mono variant) — shipped locally so the
 * terminal and all monospace UI render identically on every OS, offline, and
 * with Nerd Font glyphs (powerline, dev icons) available. This @font-face
 * intentionally claims the family name "JetBrains Mono" so it overrides any
 * same-named system/CDN font and is picked up by every existing `--font-mono`
 * / xterm reference without further changes. The Mono variant keeps icon
 * glyphs at single cell width so TUI grids stay aligned.
 */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/public/fonts/JetBrainsMonoNerdFontMono-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/public/fonts/JetBrainsMonoNerdFontMono-Bold.woff2") format("woff2");
}

:root {
  font-family: var(--font-mono);
  font-size: var(--app-font-size, 15px);
  line-height: 1.55;
  font-weight: 425;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  color: var(--text);
  background-color: transparent;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ── Global thin scrollbars ──────────────────────────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--border-strong) 94%, var(--accent) 6%) transparent!important;
}

*::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

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

*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--border-strong) 94%, var(--accent) 6%)!important;
  border-radius: 2px;
}

*::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--border-strong) 88%, var(--accent) 12%)!important;
}

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

html {
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: transparent;
}

@keyframes eula-sheet-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes eula-scrim-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes agent-orb-pulse {
  0% {
    box-shadow:
      inset 0 1px 0 var(--overlay-4),
      0 20px 45px var(--scrim-bg),
      0 0 0 8px var(--accent-soft),
      0 0 0 0 var(--accent-soft);
  }
  70% {
    box-shadow:
      inset 0 1px 0 var(--overlay-4),
      0 20px 45px var(--scrim-bg),
      0 0 0 8px var(--accent-soft),
      0 0 0 18px transparent;
  }
  100% {
    box-shadow:
      inset 0 1px 0 var(--overlay-4),
      0 20px 45px var(--scrim-bg),
      0 0 0 8px var(--accent-soft),
      0 0 0 0 transparent;
  }
}

/* App root: fixed custom title bar (decorations:false) above the app body. */
.app-root {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-app);
}

.app-root__body {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
}

.app-statusline {
  flex: 0 0 24px;
  min-height: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.6rem;
  border-top: 1px solid var(--border);
  background: var(--bg-raised);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
}

.app-statusline__slot {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  overflow: hidden;
}

.app-statusline__slot--left {
  justify-self: start;
}

.app-statusline__slot--center {
  justify-self: center;
}

.app-statusline__slot--right {
  justify-self: end;
}

.app-statusline__item {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  height: 18px;
  padding: 0 0.28rem;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  white-space: nowrap;
}

.app-statusline__item svg {
  flex: 0 0 auto;
}

.app-statusline__item span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-statusline__item--accent {
  color: var(--accent-cool);
  font-weight: 600;
}

.app-statusline__item--quiet {
  color: color-mix(in srgb, var(--text-muted) 82%, var(--text-faint));
}

.app-statusline__item--update {
  max-width: min(36vw, 34rem);
}

.app-statusline__item--plan-migration {
  max-width: min(30vw, 24rem);
}

.app-statusline__item--heartbeat {
  max-width: min(30vw, 24rem);
}

.app-statusline__item--update-busy {
  color: var(--accent-cool);
}

.app-statusline__item--update-busy svg,
.app-statusline__item--plan-migration-busy svg,
.app-statusline__item--heartbeat-busy svg {
  animation: app-statusline-spin 0.9s linear infinite;
}

.app-statusline__item--plan-migration-busy {
  color: var(--accent-cool);
}

.app-statusline__item--plan-migration-warn {
  color: var(--danger);
}

.app-statusline__item--heartbeat-busy {
  color: var(--accent-cool);
}

.app-statusline__item--heartbeat-warn {
  color: var(--danger);
}

.app-statusline__item--update-available {
  color: var(--accent);
  font-weight: 600;
}

.app-statusline__item--update-ok {
  color: var(--success);
}

.app-statusline__item--update-warn {
  color: var(--danger);
}

@keyframes app-statusline-spin {
  to {
    transform: rotate(360deg);
  }
}

.heartbeat-service-list {
  display: grid;
  gap: 0.6rem;
}

.heartbeat-service-row {
  display: grid;
  grid-template-columns: minmax(12rem, 1.2fr) minmax(14rem, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
}

.heartbeat-service-row__main,
.heartbeat-service-row__meta {
  min-width: 0;
  display: grid;
  gap: 0.22rem;
}

.heartbeat-service-row__main span,
.heartbeat-service-row__main small,
.heartbeat-service-row__meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.heartbeat-service-row__main small,
.heartbeat-service-row__meta {
  color: var(--text-muted);
  font-size: 0.78rem;
}

.heartbeat-service-row__actions {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  justify-content: flex-end;
}

@media (max-width: 860px) {
  .heartbeat-service-row {
    grid-template-columns: 1fr;
  }

  .heartbeat-service-row__actions {
    justify-content: flex-start;
  }
}

.container {
  margin: 0;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
}

.app-shell {
  height: 100%;
  min-height: 0;
  background: var(--bg-app);
}

.app-shell--boot {
  height: 100%;
  min-height: 0;
  background: linear-gradient(
    165deg,
    var(--bg-raised) 0%,
    var(--bg-app) 38%,
    var(--bg-app) 100%
  );
}

/* --- BLXCode boot screen --- */

@keyframes blx-boot-frame-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes blx-boot-rail {
  0% {
    transform: translateX(-60%) scaleX(0.28);
  }
  45% {
    transform: translateX(20%) scaleX(0.58);
  }
  100% {
    transform: translateX(155%) scaleX(0.34);
  }
}

@keyframes blx-boot-sheen {
  from {
    transform: translateX(-120%);
  }
  to {
    transform: translateX(120%);
  }
}

.blx-boot {
  position: fixed;
  inset: 0;
  z-index: 8500;
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 1rem;
  overflow: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 50% 40%, var(--accent-cool-soft), transparent 32rem),
    linear-gradient(165deg, var(--bg-raised) 0%, var(--bg-app) 44%, var(--bg-app) 100%);
}

.blx-boot--static {
  z-index: 9500;
}

.blx-boot__grid {
  position: absolute;
  inset: 0;
  opacity: 0.32;
  background-image:
    linear-gradient(var(--overlay-1) 1px, transparent 1px),
    linear-gradient(90deg, var(--overlay-1) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at center, black, transparent 72%);
  pointer-events: none;
}

.blx-boot__frame {
  position: relative;
  width: min(100%, 48rem);
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, var(--bg-panel), var(--bg-raised)),
    var(--bg-app);
  box-shadow:
    0 24px 70px var(--scrim-bg),
    inset 0 1px 0 var(--overlay-2);
  animation: blx-boot-frame-enter 0.28s ease-out both;
}

.blx-boot__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border-top: 1px solid var(--accent-cool-soft);
  pointer-events: none;
}

.blx-boot__brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.blx-boot__mark-wrap {
  width: 5.75rem;
  height: 5.75rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--overlay-2);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, var(--overlay-1), var(--overlay-1)),
    var(--bg-app);
  box-shadow: inset 0 1px 0 var(--overlay-2);
}

.blx-boot__mark {
  width: 4.35rem;
  height: 4.35rem;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px var(--scrim-bg));
}

.blx-boot__copy {
  min-width: 0;
}

.blx-boot__eyebrow,
.blx-boot__status {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.45;
}

.blx-boot__eyebrow {
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-cool);
}

.blx-boot__title {
  margin: 0.18rem 0 0.1rem;
  font-size: 1.65rem;
  line-height: 1.15;
  letter-spacing: 0;
}

.blx-boot__status {
  font-size: 0.86rem;
}

.blx-boot__preview {
  display: grid;
  grid-template-columns: minmax(5rem, 0.7fr) minmax(11rem, 2fr) minmax(5rem, 0.9fr);
  gap: 0.45rem;
  min-height: 10rem;
  padding: 0.45rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-app);
}

.blx-boot__preview-sidebar,
.blx-boot__preview-main,
.blx-boot__preview-panel {
  min-width: 0;
  border: 1px solid var(--overlay-2);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  overflow: hidden;
}

.blx-boot__preview-sidebar,
.blx-boot__preview-panel {
  display: flex;
  flex-direction: column;
  gap: 0.48rem;
  padding: 0.6rem;
}

.blx-boot__preview-main {
  display: flex;
  flex-direction: column;
}

.blx-boot__preview-toolbar {
  height: 1.9rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel-header);
}

.blx-boot__preview-workspace {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  padding: 0.6rem;
}

.blx-boot__preview span,
.blx-boot__preview-workspace span {
  position: relative;
  display: block;
  min-height: 0.72rem;
  border-radius: var(--radius-sm);
  background: var(--overlay-2);
  overflow: hidden;
}

.blx-boot__preview-sidebar span:nth-child(1) {
  width: 58%;
}

.blx-boot__preview-sidebar span:nth-child(2) {
  width: 82%;
}

.blx-boot__preview-sidebar span:nth-child(3) {
  width: 68%;
}

.blx-boot__preview-sidebar span:nth-child(4) {
  width: 74%;
}

.blx-boot__preview-panel span:nth-child(1) {
  width: 86%;
}

.blx-boot__preview-panel span:nth-child(2) {
  width: 66%;
}

.blx-boot__preview-panel span:nth-child(3) {
  width: 78%;
}

.blx-boot__preview span::after,
.blx-boot__preview-workspace span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--accent-cool-soft),
    transparent
  );
  animation: blx-boot-sheen 1.9s ease-in-out infinite;
}

.blx-boot__rail {
  height: 0.22rem;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--overlay-2);
}

.blx-boot__rail span {
  display: block;
  width: 45%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--syntax-type), var(--accent), var(--syntax-keyword));
  transform-origin: left center;
  animation: blx-boot-rail 1.35s ease-in-out infinite;
}

@media (max-width: 680px) {
  .blx-boot {
    padding: 0.75rem;
  }

  .blx-boot__brand {
    align-items: flex-start;
  }

  .blx-boot__mark-wrap {
    width: 4.6rem;
    height: 4.6rem;
  }

  .blx-boot__mark {
    width: 3.45rem;
    height: 3.45rem;
  }

  .blx-boot__preview {
    grid-template-columns: 3.25rem minmax(0, 1fr);
  }

  .blx-boot__preview-panel {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blx-boot__frame,
  .blx-boot__rail span,
  .blx-boot__preview span::after,
  .blx-boot__preview-workspace span::after {
    animation: none;
  }
}

/* --- Workbench (sidebar | workspace | right) --- */

.workbench-root {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.workbench-left-slot {
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  align-items: stretch;
  min-height: 0;
  position: relative;
  z-index: 120;
}

.workbench-left-slot--resizing {
  cursor: col-resize;
}

.workbench-splitter--sidebar {
  flex-shrink: 0;
}

.workbench-resize-shield--col {
  cursor: col-resize !important;
}

.workbench-main {
  flex: 1;
  display: flex;
  flex-direction: row;
  min-width: 0;
  min-height: 0;
}

.workbench-sidebar {
  flex-shrink: 0;
  min-width: 200px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg-raised);
  border-right: 1px solid var(--border);
  box-sizing: border-box;
  transition: border-color 0.18s ease;
}

.workbench-sidebar--collapsed {
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  border-right-color: var(--border-strong);
  overflow: visible;
  z-index: 130;
}

.workbench-sidebar--collapsed .workbench-sidebar__nav {
  visibility: visible;
  height: auto;
  overflow: auto;
}

.workbench-sidebar--collapsed .workbench-sidebar__footer {
  visibility: visible;
  height: auto;
  overflow: visible;
  padding: 0.42rem 0;
  border-top: 1px solid var(--border);
}

.workbench-sidebar__header,
.workbench-sidebar__nav,
.workbench-sidebar__footer {
  transition: opacity 0.12s ease;
}

.workbench-sidebar--collapsed .workbench-sidebar__header,
.workbench-sidebar--collapsed .workbench-sidebar__nav,
.workbench-sidebar--collapsed .workbench-sidebar__footer {
  opacity: 1;
}

.workbench-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 40px;
  padding: 0 0.5rem 0 0.65rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel-header);
  box-sizing: border-box;
}

/* Collapsed side gutters — same chrome left & right */
.workbench-gutter-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  width: 100%;
  padding: 0 0.35rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel-header);
  box-sizing: border-box;
  flex-shrink: 0;
}

.workbench-icon-btn {
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0.2rem 0.4rem;
  cursor: pointer;
}

.workbench-icon-btn:hover {
  color: var(--text);
  background: var(--accent-soft);
  border-color: var(--border);
}

.workbench-right-panel-toggle__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

.workbench-right-panel-toggle__icon svg {
  width: 1rem;
  height: 1rem;
  display: block;
}

.workbench-sidebar__title-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  width: 100%;
}

.workbench-sidebar__title {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.workbench-sidebar__add-btn {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}

.workbench-sidebar__add-btn:hover {
  background: var(--overlay-2);
  color: var(--text);
}

.workbench-sidebar__nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.workbench-sidebar__panels {
  flex: 0 1 auto;
  max-height: 75%;
  min-height: 0;
  margin-top: auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.workbench-sidebar__explorer-slot {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.workbench-sidebar__explorer-slot > .sidebar-view-section {
  flex: 1 1 auto;
  min-height: 0;
}

.workbench-sidebar__diff-slot {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.workbench-sidebar__diff-slot > .sidebar-view-section {
  flex: 1 1 auto;
  min-height: 0;
}

.workbench-sidebar__graph-slot {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.workbench-sidebar__graph-slot > .sidebar-view-section {
  flex: 1 1 auto;
  min-height: 0;
}

.workbench-sidebar__resizer {
  flex: 0 0 6px;
  cursor: row-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid transparent;
  touch-action: none;
  user-select: none;
}

.workbench-sidebar__resizer:hover,
.workbench-sidebar__resizer--active {
  background: color-mix(in srgb, var(--overlay-1) 42%, transparent);
  border-bottom-color: color-mix(in srgb, var(--border) 76%, transparent);
}

.workbench-sidebar__resizer-grip {
  width: 24px;
  height: 2px;
  border-radius: 1px;
  background: var(--border);
  opacity: 0.6;
  transition: opacity 0.12s ease, background 0.12s ease;
}

.workbench-sidebar__resizer:hover .workbench-sidebar__resizer-grip,
.workbench-sidebar__resizer--active .workbench-sidebar__resizer-grip {
  background: color-mix(in srgb, var(--border-strong) 88%, var(--accent) 12%);
  opacity: 0.68;
}

.workbench-sidebar--collapsed .workbench-sidebar__panels,
.workbench-sidebar--collapsed .workbench-sidebar__resizer--panels-boundary {
  display: none;
}

.workbench-sidebar__list {
  list-style: none;
  margin: 0;
  padding: 0.35rem 0;
}

.workbench-sidebar__item {
  position: relative;
}

.workbench-sidebar__item[draggable="true"] .workbench-sidebar__row {
  cursor: grab;
}

.workbench-sidebar__item[draggable="true"]:active .workbench-sidebar__row {
  cursor: grabbing;
}

.workbench-sidebar__item--drag-source .workbench-sidebar__row {
  opacity: 0.45;
}

.workbench-sidebar__item--drag-over:not(.workbench-sidebar__item--drag-source) {
  box-shadow: inset 0 2px 0 0 var(--accent);
}

/* Terminal slot dragged onto a workspace row — potential target gets a
   subtle dashed accent; the hover target lights up. */
.workbench-sidebar__item--terminal-drop-target .workbench-sidebar__row {
  outline: 1px dashed color-mix(in srgb, var(--accent) 35%, transparent);
  outline-offset: -2px;
}

.workbench-sidebar__item--terminal-drop-over .workbench-sidebar__row {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  outline: 1.5px dashed var(--accent);
  outline-offset: -2px;
}

/* New-workspace drop zone (sidebar header). Visible only while a
   terminal slot is being dragged. Mirrors EB's
   SidebarNewWorkspaceDropZone (dashed border + plus hint). */
.workbench-sidebar__new-ws-drop {
  margin: 0.4rem 0.5rem 0.35rem;
  padding: 0.55rem 0.5rem;
  border-radius: var(--radius-md);
  border: 1.5px dashed color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  pointer-events: auto;
}

.workbench-sidebar__new-ws-drop--over {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--text);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}

.workbench-sidebar__new-ws-drop__plus {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent);
  width: 1.1rem;
  text-align: center;
}

.workbench-sidebar__new-ws-drop__label {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.workbench-sidebar__row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 0.92rem;
  color: var(--text);
  background: transparent;
  border: none;
  padding: 0.45rem 1.85rem 0.45rem 0.75rem;
  cursor: pointer;
  border-left: 2px solid color-mix(in srgb, var(--workspace-color) 35%, transparent);
  --workspace-color: var(--accent);
}

.workbench-sidebar__terminal-layout {
  flex: 0 0 auto;
  width: 1.12rem;
  height: 1.12rem;
  display: grid;
  gap: 1px;
  padding: 2px;
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--workspace-color) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--workspace-color) 45%, transparent);
  transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.workbench-sidebar__terminal-layout-cell {
  min-width: 0;
  min-height: 0;
  border-radius: 1px;
  background: color-mix(in srgb, var(--workspace-color) 78%, var(--text-bright));
  opacity: 0.72;
}

.workbench-sidebar__row:hover .workbench-sidebar__terminal-layout,
.workbench-sidebar__row--active .workbench-sidebar__terminal-layout {
  background: color-mix(in srgb, var(--workspace-color) 18%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--workspace-color) 65%, transparent);
}

.workbench-sidebar__row:hover .workbench-sidebar__terminal-layout-cell,
.workbench-sidebar__row--active .workbench-sidebar__terminal-layout-cell {
  opacity: 0.95;
}

.workbench-sidebar__badges {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  margin-left: auto;
}

.workbench-sidebar__badge {
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.28rem;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-pill);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-bright);
  letter-spacing: -0.02em;
}

.workbench-sidebar__badge--total {
  background-color: var(--agent-claude);
  box-shadow: 0 0 0 1px var(--scrim-bg);
}

.workbench-sidebar__close {
  position: absolute;
  top: 50%;
  right: 0.4rem;
  transform: translateY(-50%);
  width: 1.1rem;
  height: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font: inherit;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-xs);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 90ms, background 90ms, color 90ms;
}

.workbench-sidebar__item:hover .workbench-sidebar__close,
.workbench-sidebar__close:focus-visible {
  opacity: 1;
}

.workbench-sidebar__close:hover {
  background: var(--overlay-2);
  color: var(--text-bright, var(--text-bright));
}

.workbench-sidebar--collapsed .workbench-sidebar__close {
  display: none;
}

.workbench-sidebar__icon {
  display: none;
}

.workbench-sidebar__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workbench-sidebar--collapsed .workbench-sidebar__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0;
}

.workbench-sidebar--collapsed .workbench-sidebar__item {
  width: 100%;
  display: flex;
  justify-content: center;
}

.workbench-sidebar--collapsed .workbench-sidebar__row {
  width: 2rem;
  height: 2rem;
  justify-content: center;
  padding: 0;
  border-left: 0;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
}

.workbench-sidebar--collapsed .workbench-sidebar__terminal-layout {
  display: none;
}

.workbench-sidebar--collapsed .workbench-sidebar__row:hover {
  border-color: var(--border);
}

.workbench-sidebar--collapsed .workbench-sidebar__row--active {
  border-color: color-mix(in srgb, var(--workspace-color) 75%, var(--border));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--workspace-color) 45%, transparent);
}

.workbench-sidebar--collapsed .workbench-sidebar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: var(--radius-sm);
  color: var(--text);
  background: color-mix(in srgb, var(--workspace-color) 22%, var(--overlay-2));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--workspace-color) 55%, transparent);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0;
}

.workbench-sidebar--collapsed .workbench-sidebar__row--active .workbench-sidebar__icon {
  background: var(--workspace-color);
  color: white;
}

.workbench-sidebar--collapsed .workbench-sidebar__label {
  display: none;
}

.workbench-sidebar__collapsed-actions {
  display: flex;
  justify-content: center;
  padding: 0 0 0.45rem;
}

.workbench-sidebar__collapsed-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}

.workbench-sidebar__collapsed-add:hover,
.workbench-sidebar__collapsed-add:focus-visible {
  background: var(--overlay-2);
  color: var(--text);
  border-color: var(--border-strong);
}

.workbench-sidebar__row:hover {
  background: var(--overlay-1);
}

.workbench-sidebar__row--active {
  background: color-mix(in srgb, var(--workspace-color) 18%, transparent);
  border-left-color: var(--workspace-color);
  color: var(--text);
}

.workbench-sidebar__footer {
  flex-shrink: 0;
  padding: 0.42rem 0.6rem 0.42rem 0.75rem;
  border-top: 1px solid var(--border);
}

.sidebar-footer-brand {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  min-height: 2.35rem;
}

.workbench-sidebar--collapsed .sidebar-footer-brand {
  justify-content: center;
  gap: 0;
}

.workbench-sidebar--collapsed .sidebar-footer-brand__copy {
  display: none;
}

.workbench-sidebar--collapsed .sidebar-ptt-tooltip {
  left: calc(100% + 0.55rem);
  bottom: 0.1rem;
  transform-origin: left bottom;
}

.workbench-sidebar--collapsed .sidebar-ptt-tooltip::after {
  left: -0.36rem;
  bottom: 0.72rem;
  border: 0;
  border-left: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border-strong));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border-strong));
}

.sidebar-footer-brand__copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 0.18rem;
  line-height: 1.05;
  user-select: none;
}

.sidebar-footer-brand__name {
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.02em;
}

.sidebar-footer-brand__version {
  font-size: 0.68rem;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.sidebar-ptt-orb {
  --sidebar-ptt-size: 2rem;
  flex: 0 0 auto;
  position: relative;
  width: var(--sidebar-ptt-size);
  height: var(--sidebar-ptt-size);
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--text);
  background: transparent;
  cursor: pointer;
  isolation: isolate;
}

.sidebar-ptt-orb::after {
  content: "";
  position: absolute;
  inset: -0.38rem;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 50%,
      color-mix(in srgb, var(--accent) 24%, transparent) 0 18%,
      transparent 48%);
  opacity: 0.58;
  filter: blur(0.2rem);
  animation: sidebar-ptt-breathe 2.8s ease-in-out infinite;
  z-index: -2;
}

.sidebar-ptt-orb__aura,
.sidebar-ptt-orb__ring,
.sidebar-ptt-orb__core,
.sidebar-ptt-orb__wave {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.sidebar-ptt-orb__aura {
  background:
    conic-gradient(from 140deg,
      color-mix(in srgb, var(--accent) 78%, transparent),
      color-mix(in srgb, var(--accent-cool) 62%, transparent),
      color-mix(in srgb, var(--success-text) 48%, transparent),
      color-mix(in srgb, var(--accent) 78%, transparent));
  opacity: 0.92;
  animation: sidebar-ptt-spin 4.5s linear infinite;
}

.sidebar-ptt-orb__ring {
  inset: 0.13rem;
  background: var(--bg-panel);
  box-shadow:
    inset 0 0 0 1px var(--border-strong),
    0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent);
}

.sidebar-ptt-orb__core {
  inset: 0.39rem;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 36% 28%,
      color-mix(in srgb, var(--text) 18%, transparent),
      transparent 28%),
    linear-gradient(145deg,
      color-mix(in srgb, var(--accent) 32%, var(--bg-raised)),
      color-mix(in srgb, var(--bg-panel) 80%, var(--accent-cool)));
  color: var(--text);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent),
    inset 0 -0.35rem 0.65rem color-mix(in srgb, var(--bg-app) 54%, transparent);
}

.sidebar-ptt-orb__wave {
  inset: 0.28rem;
  border: 1px solid color-mix(in srgb, var(--accent) 52%, transparent);
  opacity: 0;
  transform: scale(0.8);
}

.sidebar-ptt-orb__wave--one {
  animation: sidebar-ptt-wave 2.4s ease-out infinite;
}

.sidebar-ptt-orb__wave--two {
  animation: sidebar-ptt-wave 2.4s ease-out infinite 1.2s;
}

.sidebar-ptt-orb:hover .sidebar-ptt-orb__ring,
.sidebar-ptt-orb:focus-visible .sidebar-ptt-orb__ring {
  box-shadow:
    inset 0 0 0 1px var(--accent),
    0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.sidebar-ptt-orb:focus-visible {
  outline: 0;
}

/* ───────────────────────────────────────────────────────────────────────
   App-global tooltip (.blx-tooltip). Single, theme-token-only popover style
   shared by tooltip surfaces. Wrap a trigger in `.blx-tip-anchor` to reveal
   it on hover / focus-within. The sidebar voice-orb tooltip reuses these
   visual rules and supplies its own position + trigger.
   ─────────────────────────────────────────────────────────────────────── */
.blx-tip-anchor {
  position: relative;
  display: inline-flex;
}

.blx-tooltip {
  position: absolute;
  z-index: 10000;
  display: block;
  width: max-content;
  max-width: min(16rem, calc(100vw - 2rem));
  white-space: normal;
  overflow-wrap: anywhere;
  padding: 0.62rem 0.7rem 0.66rem;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border-strong));
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 12% 0%,
      color-mix(in srgb, var(--accent) 16%, transparent),
      transparent 45%),
    color-mix(in srgb, var(--bg-panel) 94%, var(--bg-raised));
  box-shadow:
    0 18px 42px var(--scrim-bg),
    inset 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text);
  opacity: 0;
  transform: translateY(0.32rem) scale(0.97);
  transform-origin: left bottom;
  pointer-events: none;
  transition:
    opacity 0.14s ease,
    transform 0.14s ease;
}

.blx-tooltip::after {
  content: "";
  position: absolute;
  width: 0.7rem;
  height: 0.7rem;
  border-right: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border-strong));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border-strong));
  background: color-mix(in srgb, var(--bg-panel) 94%, var(--bg-raised));
  transform: rotate(45deg);
}

.blx-tooltip__eyebrow,
.blx-tooltip__main,
.blx-tooltip__hint {
  display: block;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.blx-tooltip__eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-width: 0;
  color: var(--text-muted);
  font-size: 0.68rem;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.blx-tooltip__spark {
  flex-shrink: 0;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: var(--radius-pill);
  background: var(--accent);
  box-shadow: 0 0 0 0.22rem color-mix(in srgb, var(--accent) 15%, transparent);
}

.blx-tooltip__main {
  margin-top: 0.3rem;
  font-size: 0.86rem;
  font-weight: 650;
  line-height: 1.2;
}

.blx-tooltip__hint {
  margin-top: 0.18rem;
  color: var(--text-muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

/* Placement: centred above (default) / below the anchor. */
.blx-tip-anchor--top > .blx-tooltip {
  left: 50%;
  bottom: calc(100% + 0.5rem);
  transform: translate(-50%, 0.32rem) scale(0.97);
  transform-origin: center bottom;
}

.blx-tip-anchor--top > .blx-tooltip::after {
  left: 50%;
  bottom: -0.38rem;
  margin-left: -0.35rem;
}

.blx-tip-anchor--bottom > .blx-tooltip {
  left: 50%;
  top: calc(100% + 0.5rem);
  transform: translate(-50%, -0.32rem) scale(0.97);
  transform-origin: center top;
}

.blx-tip-anchor--bottom > .blx-tooltip::after {
  left: 50%;
  top: -0.38rem;
  margin-left: -0.35rem;
  border: 0;
  border-left: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border-strong));
  border-top: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border-strong));
}

.blx-tip-anchor--left > .blx-tooltip {
  right: calc(100% + 0.55rem);
  top: 50%;
  transform: translate(0.32rem, -50%) scale(0.97);
  transform-origin: right center;
}

.blx-tip-anchor--left > .blx-tooltip::after {
  right: -0.38rem;
  top: 50%;
  margin-top: -0.35rem;
  border: 0;
  border-right: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border-strong));
  border-top: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border-strong));
}

.blx-tip-anchor:hover > .blx-tooltip,
.blx-tip-anchor:focus-within > .blx-tooltip {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
}

.blx-tip-anchor--left:hover > .blx-tooltip,
.blx-tip-anchor--left:focus-within > .blx-tooltip {
  transform: translate(0, -50%) scale(1);
}

/* Sidebar voice-orb tooltip — reuses `.blx-tooltip` visuals, supplies its own
   left-anchored position + sibling-hover trigger. */
.sidebar-ptt-tooltip {
  left: -0.18rem;
  bottom: calc(100% + 0.7rem);
  width: min(15.5rem, calc(100vw - 2rem));
  max-width: none;
}

.sidebar-ptt-tooltip::after {
  left: 1.08rem;
  bottom: -0.38rem;
}

.sidebar-ptt-orb:hover + .sidebar-ptt-tooltip,
.sidebar-ptt-orb:focus-visible + .sidebar-ptt-tooltip {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.sidebar-ptt-orb--recording::after {
  opacity: 0.92;
  animation-duration: 1.05s;
}

.sidebar-ptt-orb--recording .sidebar-ptt-orb__aura {
  animation-duration: 1.6s;
}

.sidebar-ptt-orb--recording .sidebar-ptt-orb__core {
  color: var(--danger);
  background:
    radial-gradient(circle at 36% 28%,
      color-mix(in srgb, var(--text) 22%, transparent),
      transparent 28%),
    linear-gradient(145deg,
      color-mix(in srgb, var(--danger) 34%, var(--bg-raised)),
      color-mix(in srgb, var(--accent) 24%, var(--bg-panel)));
}

.sidebar-ptt-orb--recording .sidebar-ptt-orb__wave {
  border-color: color-mix(in srgb, var(--danger) 58%, transparent);
  animation-duration: 1.15s;
}

.sidebar-ptt-orb--hint .sidebar-ptt-orb__aura {
  opacity: 0.72;
  filter: saturate(0.78);
}

@keyframes sidebar-ptt-spin {
  to {
    transform: rotate(1turn);
  }
}

@keyframes sidebar-ptt-breathe {
  0%, 100% {
    transform: scale(0.82);
    opacity: 0.42;
  }
  50% {
    transform: scale(1.08);
    opacity: 0.76;
  }
}

@keyframes sidebar-ptt-wave {
  0% {
    opacity: 0;
    transform: scale(0.78);
  }
  16% {
    opacity: 0.48;
  }
  100% {
    opacity: 0;
    transform: scale(1.75);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-ptt-orb::after,
  .sidebar-ptt-orb__aura,
  .sidebar-ptt-orb__wave,
  .sidebar-ptt-tooltip {
    animation: none;
    transition: none;
  }
}

.workspace-context-menu {
  position: fixed;
  z-index: 1000;
  min-width: 11rem;
  padding: 0.25rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  box-shadow: 0 14px 32px var(--scrim-bg);
}

.workspace-context-menu__item {
  display: block;
  width: 100%;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.55rem;
  text-align: left;
  font: inherit;
  font-size: 0.82rem;
  color: var(--text);
  background: transparent;
  cursor: pointer;
}

.workspace-context-menu__item:hover,
.workspace-context-menu__item:focus-visible {
  background: var(--overlay-2);
}

.workspace-context-menu__item--danger {
  color: var(--danger);
}

.workspace-context-menu__item--danger:hover,
.workspace-context-menu__item--danger:focus-visible {
  background: var(--danger-soft);
}

/* Modal scrims: dim + blur so the workbench stays visible behind dialogs. */
.workspace-rename-backdrop,
.harness-scrim,
.blx-sr-dialog__backdrop,
.agent-image-preview-backdrop {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: var(--scrim-bg);
}

.workspace-rename-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
}

.workspace-rename-dialog {
  width: min(92vw, 24rem);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  box-shadow: 0 24px 70px var(--scrim-bg);
  overflow: hidden;
}

.workspace-rename-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2.7rem;
  padding: 0 0.75rem 0 0.95rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel-header);
}

.workspace-rename-dialog__head h2 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 650;
  letter-spacing: 0;
  color: var(--text);
}

.workspace-rename-dialog__close {
  display: inline-grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

.workspace-rename-dialog__close:hover,
.workspace-rename-dialog__close:focus-visible {
  color: var(--text);
  border-color: var(--border);
  background: var(--overlay-2);
}

.workspace-rename-dialog__body {
  padding: 0.95rem;
}

.workspace-rename-dialog__body > * + .workspace-rename-dialog__label {
  margin-top: 0.8rem;
}

.workspace-rename-dialog__label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.workspace-rename-dialog__input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.58rem 0.65rem;
  font: inherit;
  color: var(--text);
  background: var(--scrim-bg);
  outline: none;
}

.workspace-rename-dialog__input:focus {
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.workspace-edit-dialog__color-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.workspace-edit-dialog__color-input {
  flex: 0 0 auto;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0.18rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--scrim-bg);
  cursor: pointer;
}

.workspace-edit-dialog__color-row + .memory-color-swatches {
  margin-top: 0.55rem;
}

.workspace-rename-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.45rem;
  padding: 0.75rem 0.95rem 0.9rem;
  border-top: 1px solid var(--border);
}

.workspace-rename-dialog__btn {
  min-width: 5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.48rem 0.7rem;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}

.workspace-rename-dialog__btn--ghost {
  color: var(--text-muted);
  background: transparent;
}

.workspace-rename-dialog__btn--ghost:hover,
.workspace-rename-dialog__btn--ghost:focus-visible {
  color: var(--text);
  background: var(--overlay-2);
}

.workspace-rename-dialog__btn--primary {
  color: white;
  border-color: var(--accent-soft);
  background: var(--accent);
}

.workspace-rename-dialog__btn--primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.workbench-workspace {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: transparent;
}

.workbench-workspace__header {
  flex-shrink: 0;
  min-height: 40px;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel-header);
}

.workbench-workspace__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}

.workbench-workspace__title--muted {
  font-weight: 500;
  color: var(--text-muted);
}

.workbench-workspace__body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 1rem 1.1rem;
}

.workbench-workspace:not(.workbench-workspace--empty) .workbench-workspace__body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0.35rem;
}

.workbench-workspace__placeholder {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.92rem;
}

.workbench-workspace--empty .workbench-workspace__body {
  display: grid;
  place-items: stretch;
  padding: 0;
}

.workbench-empty-editor {
  width: 100%;
  height: 100%;
  padding: clamp(1.35rem, 4vh, 2.35rem);
  /* Tuned in sync with `.app-shell`: the editor backdrop is just a touch
     darker than the surrounding chrome so the empty state still reads as
     a distinct surface without bleeding the wallpaper through. The top glow
     matches the Create-Workspace screen (`.ws-config`). */
  background:
    radial-gradient(ellipse at top, var(--overlay-1), transparent 60%),
    linear-gradient(180deg, var(--bg-app), var(--bg-app)),
    var(--overlay-2);
  backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  box-sizing: border-box;
}

.workbench-empty-editor__lead {
  margin: 0;
  font-size: 0.98rem;
  color: var(--text-muted);
  line-height: 1.45;
  text-align: center;
}

.workbench-empty-editor__logo-wrap {
  margin: clamp(1rem, 3vh, 1.65rem) 0 clamp(0.75rem, 2.4vh, 1.15rem);
  display: flex;
  justify-content: center;
  align-items: center;
}

.workbench-empty-editor__logo {
  width: min(11rem, 52vw);
  max-height: min(11rem, 28vh);
  height: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 10px 28px var(--scrim-bg));
}

.workbench-empty-recent {
  width: min(100%, 44rem);
  margin: 0.65rem auto 1rem;
}

.workbench-empty-editor .workbench-empty-recent-list {
  max-height: min(42vh, 15rem);
  overflow-y: auto;
  padding-right: 0.08rem;
}

.workbench-recent-row {
  display: flex;
  align-items: stretch;
  gap: 0.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.workbench-recent-row .harness-cmd-btn {
  flex: 1;
  min-width: 0;
}

.workbench-empty-recent .workbench-recent-row {
  position: relative;
  display: block;
}

.workbench-empty-recent .workbench-empty-recent-card {
  padding-right: 2.25rem;
}

.workbench-empty-recent .workbench-recent-remove {
  position: absolute;
  top: 50%;
  right: 0.48rem;
  width: 1.35rem;
  height: 1.35rem;
  transform: translateY(-50%);
  opacity: 0;
  transition:
    opacity 120ms ease,
    color 0.12s ease,
    background 0.12s ease;
}

.workbench-empty-recent .workbench-recent-row:hover .workbench-recent-remove,
.workbench-empty-recent .workbench-recent-remove:focus-visible {
  opacity: 1;
}

button.workbench-recent-remove {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition:
    color 0.12s ease,
    background 0.12s ease;
}

button.workbench-recent-remove:hover,
button.workbench-recent-remove:focus-visible {
  color: var(--text-muted);
  background: var(--danger-soft);
  outline: none;
}

button.workbench-recent-remove:focus-visible {
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.harness-sheet--quickopen .harness-cmd-list {
  gap: 0.35rem;
}

.workbench-empty-recent-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.75rem 0.55rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  list-style: none;
}

.workbench-shortcut-wrap {
  margin: 0 auto;
  width: min(100%, 44rem);
  padding: 0.85rem 0 0.25rem;
  border-top: 1px solid var(--overlay-2);
  /* Enable container queries so the keybinding hints can hide when the
     workspace panel is narrow (e.g. split view), independent of viewport. */
  container-type: inline-size;
  container-name: wbshortcuts;
}

/* Prominent, highlighted Create-Workspace call to action above the row. */
.workbench-create-hero {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-align: left;
  margin: 0 auto 0.8rem;
  padding: 0.9rem 1.05rem;
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-raised));
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.12s ease;
}

.workbench-create-hero:hover,
.workbench-create-hero:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 20%, var(--bg-raised));
  outline: none;
}

.workbench-create-hero__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent);
}

.workbench-create-hero__copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.workbench-create-hero__title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
}

.workbench-create-hero__hint {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.workbench-create-hero__keys {
  flex: 0 0 auto;
}

/* When the wrap is narrow, drop the keybinding hints to avoid cramped,
   overlapping kbd chips (e.g. workspace panel in split view). */
@container wbshortcuts (max-width: 30rem) {
  .workbench-shortcut-row__keys,
  .workbench-create-hero__keys,
  .workbench-kbd--utility {
    display: none;
  }
}

.workbench-shortcut-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
}

.workbench-shortcut-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  font-size: 0.7rem;
  color: var(--text-muted);
  text-shadow: 0 1px 2px var(--scrim-bg);
}

.workbench-shortcut-li {
  list-style: none;
  margin: 0;
  padding: 0;
}

button.workbench-shortcut-row--action {
  width: 100%;
  min-height: 5.6rem;
  margin: 0;
  padding: 0.6rem 0.48rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--overlay-2) 68%, transparent), transparent),
    color-mix(in srgb, var(--bg-panel) 76%, transparent);
  font: inherit;
  color: inherit;
  text-align: center;
  cursor: pointer;
  display: grid;
  grid-template-rows: auto minmax(1.1rem, auto) auto;
  align-items: center;
  justify-items: center;
  gap: 0.36rem;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--overlay-4) 26%, transparent),
    0 8px 18px color-mix(in srgb, var(--scrim-bg) 32%, transparent);
  transition:
    border-color 120ms ease,
    background 120ms ease,
    box-shadow 120ms ease,
    transform 120ms ease;
}

button.workbench-shortcut-row--action:hover,
button.workbench-shortcut-row--action:focus-visible {
  border-color: var(--border-strong);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 32%, transparent), transparent),
    color-mix(in srgb, var(--bg-panel) 84%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--overlay-4) 32%, transparent),
    0 12px 24px color-mix(in srgb, var(--scrim-bg) 40%, transparent);
  outline: none;
  transform: translateY(-2px);
}

button.workbench-shortcut-row--action:focus-visible {
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.workbench-shortcut-row--disabled {
  cursor: default;
  opacity: 0.76;
}

.workbench-shortcut-row--disabled:hover,
.workbench-shortcut-row--disabled:focus-visible {
  border-color: color-mix(in srgb, var(--border) 72%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--overlay-2) 68%, transparent), transparent),
    color-mix(in srgb, var(--bg-panel) 76%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--overlay-4) 26%, transparent),
    0 8px 18px color-mix(in srgb, var(--scrim-bg) 32%, transparent);
  transform: none;
}

.workbench-shortcut-row__soon {
  display: inline-flex;
  align-items: center;
  min-height: 1rem;
  padding: 0.12rem 0.34rem;
  border: 1px dashed color-mix(in srgb, var(--border-strong) 70%, transparent);
  border-radius: var(--radius-pill);
  color: var(--text-faint);
  font-size: 0.56rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.harness-sheet.harness-sheet--quickopen {
  width: min(92vw, 56rem);
  min-width: min(92vw, 56rem);
  max-width: 56rem;
}

.harness-quickopen-title {
  margin: 0 0 0.65rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.harness-quickopen-section {
  margin: 0.75rem 0 0.35rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.harness-quickopen-path {
  display: flex;
  gap: 0.45rem;
  margin-top: 0.75rem;
  align-items: stretch;
}

.harness-quickopen-path .harness-filter {
  flex: 1;
  min-width: 0;
}

.harness-quickopen-path__btn {
  flex-shrink: 0;
  padding: 0 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: var(--overlay-2);
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}

.harness-quickopen-path__btn:hover {
  background: var(--overlay-2);
}

.harness-quickopen-wizard {
  margin-top: 0.55rem;
  width: 100%;
  padding: 0.45rem 0.55rem;
  border-radius: var(--radius-md);
  border: 1px dashed var(--overlay-4);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}

.harness-quickopen-wizard:hover {
  background: var(--overlay-1);
}

.workbench-shortcut-row--spacer {
  display: none;
}

.workbench-shortcut-row__lead {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.34rem;
  min-width: 0;
}

.workbench-shortcut-row__icon-wrap {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent-soft) 48%, transparent);
  color: var(--accent);
  opacity: 0.9;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--overlay-4) 30%, transparent);
}

.workbench-shortcut-row__icon-dot {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: var(--radius-pill);
  background: currentColor;
}

.workbench-shortcut-row__label {
  color: var(--text-muted);
  max-width: 8.4rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 620;
}

.workbench-shortcut-row__keys {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  min-width: 0;
  max-width: 100%;
}

.workbench-kbd {
  font: inherit;
  font-size: 0.58rem;
  font-weight: 500;
  line-height: 1;
  color: var(--text);
  background: color-mix(in srgb, var(--overlay-2) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--border-strong) 80%, transparent);
  border-radius: var(--radius-xs);
  padding: 0.14rem 0.24rem;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--border) 70%, transparent);
  white-space: nowrap;
}

.workbench-kbd-gap {
  color: var(--text-faint);
  font-size: 0.6rem;
  padding: 0 0.035rem;
  user-select: none;
}

.workbench-kbd-chord-gap {
  color: var(--text-faint);
  font-size: 0.6rem;
  padding: 0 0.12rem;
  user-select: none;
}

.workbench-shortcut-utility-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 0.55rem;
  list-style: none;
  margin: 0.75rem auto 0;
  padding: 0;
}

.workbench-shortcut-utility-li {
  min-width: 0;
}

.workbench-shortcut-utility {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  min-height: 1.62rem;
  padding: 0.18rem 0.34rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-faint);
  font: inherit;
  font-size: 0.66rem;
  cursor: pointer;
  transition:
    border-color 120ms ease,
    background 120ms ease,
    color 120ms ease;
}

.workbench-shortcut-utility:hover,
.workbench-shortcut-utility:focus-visible {
  border-color: color-mix(in srgb, var(--border) 68%, transparent);
  background: color-mix(in srgb, var(--overlay-1) 72%, transparent);
  color: var(--text-muted);
  outline: none;
}

.workbench-shortcut-utility__lead {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
}

.workbench-shortcut-utility__lead svg {
  flex: 0 0 auto;
  color: var(--text-faint);
}

.workbench-kbd--utility {
  color: var(--text-faint);
  font-size: 0.52rem;
  padding: 0.11rem 0.2rem;
  background: color-mix(in srgb, var(--overlay-1) 76%, transparent);
  border-color: color-mix(in srgb, var(--border) 72%, transparent);
}

@media (max-width: 720px) {
  .workbench-shortcut-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.app-prefs-toggle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.8rem 1.1rem;
}

.app-prefs-toggle-cell {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--overlay-1);
}

.app-prefs-toggle-cell .app-prefs-toggle,
.app-prefs-toggle-cell .app-prefs-radio {
  margin: 0;
  font-size: 0.85rem;
}

.app-prefs-toggle-cell .app-prefs-hint {
  margin: 0 0 0 1.55rem;
}

.app-log-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  min-width: 0;
}

.app-log-panel {
  min-width: 0;
}

.app-log-panel .harness-stack,
.app-log-panel .workbench-plain-input {
  min-width: 0;
}

.app-log-default-path {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.app-log-actions .workbench-mini-btn {
  max-width: 100%;
}

.app-log-actions .harness-btn-inline {
  min-width: 0;
}

.app-log-actions .harness-btn-inline span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-prefs-version {
  margin: 0.35rem 0 0.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.app-prefs-version__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--overlay-1);
  font-size: 0.85rem;
  margin: 0;
}

.app-prefs-version__row dt {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-muted);
  margin: 0;
  font-weight: 500;
}

.app-prefs-version__row dt svg {
  width: 0.9rem;
  height: 0.9rem;
}

.app-prefs-version__row dd {
  margin: 0;
  font-family: var(--font-mono);
  color: var(--text);
  font-size: 0.9rem;
}

.app-prefs-version__row--available {
  border-color: var(--success-border);
  background: var(--success-surface);
}

.app-prefs-version__row--available dd {
  color: var(--success-text);
}

.app-prefs-radio {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.app-prefs-toggle-grid--triple {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 720px) {
  .app-prefs-toggle-grid--triple {
    grid-template-columns: 1fr;
  }
}

.app-prefs-radio input {
  accent-color: var(--accent-control);
}

.workbench-right-slot {
  display: flex;
  flex-direction: row;
  flex-shrink: 1;
  align-items: stretch;
  min-height: 0;
  min-width: 44px;
  max-width: 100%;
  width: auto;
  transition: min-width 0.18s ease, width 0.18s ease;
}

.workbench-right-slot--collapsed {
  width: 44px;
  min-width: 44px;
  max-width: 44px;
}

.workbench-right-rail {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-raised);
  border-left: 1px solid var(--border);
}

/* Wenn das Panel offen ist, übernimmt die Panel-Header-Toolbar die Tabs.
   Die schmale Icon-Rail wird dann ausgeblendet (sonst doppelt sichtbar). */
.workbench-right-rail--hidden {
  display: none;
}

.workbench-right-rail__tabs {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.35rem 0 0.5rem;
  min-height: 0;
  overflow-y: auto;
  box-sizing: border-box;
}

.workbench-right-rail-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  box-sizing: border-box;
}

.workbench-right-rail-tab:hover {
  color: var(--text);
  background: var(--overlay-2);
  border-color: var(--border);
}

.workbench-right-rail-tab--active {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--border);
}

.workbench-right-rail-tab__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

.workbench-right-rail-tab__icon svg {
  width: 1rem;
  height: 1rem;
  display: block;
}

.workbench-right-rail__footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0 0.5rem;
  border-top: 1px solid var(--border);
}

.workbench-right-rail-settings-btn {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
}

.workbench-right-settings-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.workbench-right-slot--resizing,
.workbench-right-slot--resizing * {
  cursor: col-resize !important;
  user-select: none;
}

.workbench-splitter {
  position: relative;
  z-index: 20;
  width: 11px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: col-resize;
  background: transparent;
  touch-action: none;
}

.workbench-splitter::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: var(--border);
  opacity: 0.72;
  transition: opacity 0.16s ease, background-color 0.16s ease;
}

.workbench-splitter__grip {
  position: relative;
  z-index: 1;
  width: 0.22rem;
  height: 2.4rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--text-muted) 54%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--bg-app) 80%, transparent),
    0 0 0 4px color-mix(in srgb, var(--accent) 0%, transparent);
  opacity: 0.52;
  transform: scaleY(0.68);
  transition:
    height 0.2s ease,
    width 0.16s ease,
    opacity 0.16s ease,
    transform 0.2s ease,
    background-color 0.16s ease,
    box-shadow 0.16s ease;
}

.workbench-splitter:hover::before,
.workbench-left-slot--resizing .workbench-splitter::before,
.workbench-right-slot--resizing .workbench-splitter::before {
  background: color-mix(in srgb, var(--border-strong) 86%, var(--accent) 14%);
  opacity: 0.42;
}

.workbench-splitter:hover .workbench-splitter__grip,
.workbench-left-slot--resizing .workbench-splitter__grip,
.workbench-right-slot--resizing .workbench-splitter__grip {
  width: 0.3rem;
  height: 5.8rem;
  background: color-mix(in srgb, var(--text-muted) 62%, var(--accent) 22%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--bg-app) 82%, transparent),
    0 0 0 3px color-mix(in srgb, var(--accent) 8%, transparent),
    0 0 12px color-mix(in srgb, var(--accent) 12%, transparent);
  opacity: 0.74;
  transform: scaleY(1);
}

.workbench-splitter--hidden {
  display: none;
}

.workbench-resize-shield {
  position: fixed;
  inset: 0;
  z-index: 9999;
  cursor: col-resize;
  background: transparent;
}

.workbench-right {
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--bg-raised);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.workbench-right--hidden {
  display: none;
}

.workbench-right__header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 48px;
  padding: 0.42rem 0.55rem;
  border-bottom: 1px solid var(--border);
  background: var(--overlay-2);
  box-sizing: border-box;
}

.workbench-right__body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.workbench-right-tab-panel {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.workbench-right-tab-panel--hidden {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .workbench-sidebar,
  .workbench-right-slot {
    transition: none;
  }
}

/* --- Right panel tabs --- */
.workbench-right__toolbar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  min-height: 34px;
  min-width: 0;
  overflow: hidden;
}

.workbench-right-tabstrip {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
  min-width: 0;
  height: 34px;
  padding: 0.18rem;
  border: 1px solid var(--overlay-2);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg-raised) 84%, var(--bg-app));
  box-shadow: inset 0 1px 0 var(--overlay-1);
  overflow: hidden;
}

.workbench-right-tab {
  flex: 0 0 2rem;
  min-width: 2rem;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
  box-sizing: border-box;
  padding: 0 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition:
    flex-basis 0.2s ease,
    min-width 0.2s ease,
    background 0.14s ease,
    color 0.14s ease,
    border-color 0.14s ease,
    box-shadow 0.14s ease;
}

.workbench-right-tab:hover {
  color: var(--text);
  background: var(--overlay-2);
}

.workbench-right-tab--active {
  color: var(--accent);
  flex: 1 1 8.5rem;
  min-width: 7.5rem;
  border-color: var(--accent-soft);
  background: var(--accent-soft);
  box-shadow:
    inset 0 0 0 1px var(--accent-soft),
    0 0 22px var(--accent-soft);
}

.workbench-right-tab__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.75;
}

.workbench-right-tab__icon svg {
  width: 14px;
  height: 14px;
  display: block;
}

.workbench-right-tab--active .workbench-right-tab__icon {
  opacity: 1;
}

.workbench-right-tab__label {
  max-width: 0;
  opacity: 0;
  white-space: nowrap;
  overflow: hidden;
  transition: max-width 0.18s ease, opacity 0.14s ease;
}

.workbench-right-tab--active .workbench-right-tab__label {
  max-width: 8rem;
  opacity: 1;
}

.workbench-visually-hidden {
  position: absolute;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
}

/* Agent panel */
.workbench-agent-pane {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem;
  box-sizing: border-box;
  background: var(--bg-app);
}

.workbench-agent-pane--drop-active,
.workbench-agent-pane--drop-reject {
  outline: 2px dashed var(--accent-soft);
  outline-offset: -0.45rem;
}

.workbench-agent-pane--drop-reject {
  outline-color: var(--danger-soft);
}

.agent-drop-overlay {
  position: absolute;
  inset: 0.75rem;
  z-index: 40;
  display: grid;
  place-items: center;
  pointer-events: none;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--accent-soft);
  background: var(--overlay-2);
  box-shadow: inset 0 0 0 999px var(--accent-soft);
}

.workbench-agent-pane--drop-reject .agent-drop-overlay {
  border-color: var(--danger-soft);
  box-shadow: inset 0 0 0 999px var(--danger-soft);
}

.agent-drop-overlay span {
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--text);
  padding: 0.48rem 0.72rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--overlay-3);
  background: var(--scrim-bg);
}

.workbench-agent-scope-hint {
  font-size: 0.68rem;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.workbench-muted {
  opacity: 0.85;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.agent-hero {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: start;
  column-gap: 4.25rem;
  row-gap: 0.82rem;
  min-height: 0;
  padding: 1.5rem 1.55rem 1.4rem 1.25rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  background: transparent;
  transition:
    padding 0.22s ease,
    column-gap 0.22s ease,
    row-gap 0.22s ease,
    background 0.22s ease;
}

.agent-hero__orb {
  position: relative;
  isolation: isolate;
  grid-column: 2;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 10rem;
  height: 10rem;
  border-radius: var(--radius-circle);
  padding: 0;
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft);
  color: inherit;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 var(--overlay-3),
    0 20px 45px var(--scrim-bg),
    0 0 0 8px var(--overlay-1);
  transition:
    border-color 0.14s ease,
    box-shadow 0.14s ease,
    width 0.22s ease,
    height 0.22s ease,
    transform 0.14s ease,
    background 0.14s ease;
}

.agent-hero__orb::after {
  content: "";
  position: absolute;
  inset: 0.72rem;
  border-radius: inherit;
  border: 1px solid var(--accent-soft);
  z-index: 0;
  pointer-events: none;
}

.agent-hero__orb:hover,
.agent-hero__orb:focus-visible,
.agent-hero__orb--active {
  border-color: var(--accent-soft);
  background: var(--accent-soft);
  box-shadow:
    inset 0 1px 0 var(--overlay-4),
    0 20px 45px var(--scrim-bg),
    0 0 0 8px var(--accent-soft);
}

.agent-hero__orb:active,
.agent-hero__orb--active {
  transform: translateY(1px);
  animation: agent-orb-pulse 1.05s ease-out infinite;
}

/* Glassy agent-name badge straddling the top edge of the orb. */
.agent-name-badge {
  position: absolute;
  top: -0.55rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  max-width: 9rem;
  padding: 0.18rem 0.66rem;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border));
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent-soft) 72%, var(--scrim-bg));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow:
    inset 0 1px 0 var(--overlay-3),
    0 6px 16px var(--scrim-bg);
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 760;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* When a session role is active the badge stacks the name over a colored
   role sub-line, so it needs column layout and a touch more width. */
.agent-name-badge--has-role {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
  max-width: 12rem;
  padding-top: 0.16rem;
  padding-bottom: 0.2rem;
}

.agent-name-badge__name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.agent-name-badge__role {
  display: block;
  font-size: 0.62rem;
  font-weight: 680;
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.agent-name-badge--live {
  border-color: color-mix(in srgb, var(--accent) 64%, var(--border-strong));
  color: var(--on-accent);
  background: color-mix(in srgb, var(--accent) 80%, var(--scrim-bg));
  animation: agent-name-badge-pulse 1.6s ease-in-out infinite;
}

@keyframes agent-name-badge-pulse {
  0%,
  100% {
    box-shadow:
      inset 0 1px 0 var(--overlay-3),
      0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent);
  }
  50% {
    box-shadow:
      inset 0 1px 0 var(--overlay-3),
      0 0 0 4px color-mix(in srgb, var(--accent) 0%, transparent);
  }
}

.agent-hero__logo {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: var(--radius-sm);
  color: var(--on-accent);
  background: var(--accent-cool);
  font-size: 1.72rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 8px 22px var(--scrim-bg);
}

.drobo-orb {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
}

.drobo-orb__stage {
  position: absolute;
  inset: -1.05rem;
  display: grid;
  place-items: center;
  border-radius: inherit;
}

.drobo-orb__canvas {
  display: block;
  width: 110%;
  height: 110%;
  filter: none;
  pointer-events: none;
  transition: filter 0.5s ease-out;
}

.drobo-orb__stage--thinking .drobo-orb__canvas {
  animation: drobo-thinking-canvas 2.6s ease-in-out infinite;
}

@keyframes drobo-thinking-canvas {
  0% {
    filter:
      saturate(1.38)
      brightness(1.04)
      drop-shadow(0 0 0.72rem color-mix(in srgb, var(--accent-cool) 64%, transparent))
      drop-shadow(0 0 1.24rem color-mix(in srgb, var(--accent-cool) 34%, transparent));
  }

  24% {
    filter:
      saturate(1.58)
      brightness(1.08)
      drop-shadow(0 0 0.86rem color-mix(in srgb, var(--accent) 70%, transparent))
      drop-shadow(0 0 1.42rem color-mix(in srgb, var(--accent) 38%, transparent));
  }

  50% {
    filter:
      saturate(1.7)
      brightness(1.1)
      drop-shadow(0 0 0.96rem color-mix(in srgb, var(--syntax-keyword, var(--accent)) 72%, transparent))
      drop-shadow(0 0 1.55rem color-mix(in srgb, var(--syntax-keyword, var(--accent)) 42%, transparent));
  }

  74% {
    filter:
      saturate(1.56)
      brightness(1.07)
      drop-shadow(0 0 0.86rem color-mix(in srgb, var(--success, var(--accent-cool)) 66%, transparent))
      drop-shadow(0 0 1.38rem color-mix(in srgb, var(--success, var(--accent-cool)) 34%, transparent));
  }

  100% {
    filter:
      saturate(1.38)
      brightness(1.04)
      drop-shadow(0 0 0.72rem color-mix(in srgb, var(--accent-cool) 64%, transparent))
      drop-shadow(0 0 1.24rem color-mix(in srgb, var(--accent-cool) 34%, transparent));
  }
}

@media (prefers-reduced-motion: reduce) {
  .drobo-orb__stage--thinking .drobo-orb__canvas {
    animation: none;
    filter:
      saturate(1.36)
      brightness(1.06)
      drop-shadow(0 0 0.78rem color-mix(in srgb, var(--accent-cool) 58%, transparent))
      drop-shadow(0 0 1.24rem color-mix(in srgb, var(--accent) 34%, transparent));
  }
}

.drobo-orb__fallback {
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 0.16s ease,
    transform 0.16s ease;
}

.drobo-orb__stage--loaded .drobo-orb__fallback {
  opacity: 0;
  transform: scale(0.86);
}

.drobo-orb__stage--failed .drobo-orb__fallback,
.drobo-orb__stage--rust-failed .drobo-orb__fallback {
  opacity: 1;
  transform: scale(1);
}

.drobo-orb__state {
  position: absolute;
  right: 0.72rem;
  bottom: 0.72rem;
  z-index: 3;
  display: inline-grid;
  place-items: center;
  width: 1.72rem;
  height: 1.72rem;
  border-radius: var(--radius-circle);
  color: var(--on-accent);
  background: color-mix(in srgb, var(--accent) 88%, var(--bg-app));
  border: 1px solid color-mix(in srgb, var(--accent-cool) 46%, var(--border));
  box-shadow:
    0 0 0 0.18rem var(--accent-soft),
    0 8px 18px var(--scrim-bg);
}

.drobo-orb__state--transcribing {
  background: color-mix(in srgb, var(--accent-cool) 86%, var(--bg-app));
}

.agent-thinking-stream {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  width: 10rem;
  min-height: 4.35rem;
  max-height: 5.25rem;
  padding: 0.52rem 0.58rem 0.5rem;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--bg-panel) 54%, transparent),
      color-mix(in srgb, var(--bg-app) 70%, transparent)
    );
  box-shadow: none;
  transition:
    min-height 0.22s ease,
    max-height 0.22s ease,
    padding 0.22s ease,
    opacity 0.18s ease,
    transform 0.22s ease;
}

.agent-thinking-stream__head {
  display: flex;
  align-items: center;
  gap: 0.38rem;
  min-width: 0;
  color: var(--text-faint);
  font-size: 0.62rem;
  font-weight: 780;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.agent-thinking-stream__pulse {
  width: 0.42rem;
  height: 0.42rem;
  flex-shrink: 0;
  border-radius: var(--radius-circle);
  background: color-mix(in srgb, var(--accent) 54%, var(--text-faint));
  box-shadow: 0 0 0 0.22rem color-mix(in srgb, var(--accent-soft) 46%, transparent);
  animation: agent-thinking-stream-pulse 1.35s ease-in-out infinite;
}

.agent-thinking-stream__body {
  max-height: 3.22rem;
  margin-top: 0.42rem;
  overflow: auto;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1.42;
  scrollbar-width: none;
  white-space: pre-wrap;
  word-break: break-word;
}

.agent-thinking-stream__body::-webkit-scrollbar {
  display: none;
}

.agent-thinking-stream--idle {
  min-height: 4.65rem;
}

.agent-thinking-stream--idle .agent-thinking-stream__pulse {
  animation: none;
  background: color-mix(in srgb, var(--border-strong) 72%, var(--accent) 28%);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--accent-soft) 28%, transparent);
}

.agent-thinking-stream--idle .agent-thinking-stream__body {
  min-height: 3.2rem;
  max-height: none;
  overflow: hidden;
  white-space: normal;
}

.agent-thinking-stream__idle {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  color: var(--text-muted);
}

.agent-thinking-stream__idle-icon {
  display: inline-grid;
  place-items: center;
  width: 0.82rem;
  height: 0.82rem;
  flex-shrink: 0;
  color: color-mix(in srgb, var(--accent) 62%, var(--text-faint));
  animation: agent-thinking-idle-icon 1.65s ease-in-out infinite;
}

.agent-thinking-stream__speed-card {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0.38rem;
  min-height: 2.85rem;
  overflow: hidden;
}

.agent-thinking-stream__speed-card::before {
  content: "";
  position: absolute;
  inset: 0.15rem 0 1.08rem;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--text-faint) 10%, transparent),
    transparent,
    transparent
  );
  opacity: 0.85;
  pointer-events: none;
}

.agent-thinking-stream__speed-chart {
  position: relative;
  z-index: 1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0.28rem, 1fr);
  align-items: end;
  gap: 0.16rem;
  min-height: 2.08rem;
  padding: 0.16rem 0.05rem 0.1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
}

.agent-thinking-stream__speed-bar {
  display: block;
  min-height: 0.32rem;
  height: var(--speed-height, 12%);
  border-radius: var(--radius-sm) var(--radius-sm) 0.12rem 0.12rem;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--accent-cool) 82%, var(--text)),
      color-mix(in srgb, var(--accent) 78%, var(--bg-panel))
    );
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent);
  transform-origin: bottom;
  animation: agent-thinking-speed-rise 0.5s ease both;
  transition:
    filter 0.14s ease,
    opacity 0.14s ease,
    height 0.24s ease;
}

.agent-thinking-stream__speed-bar:hover {
  filter: brightness(1.18) saturate(1.12);
}

.agent-thinking-stream__speed-empty {
  align-self: end;
  justify-self: center;
  color: var(--text-faint);
  font-size: 0.64rem;
}

.agent-thinking-stream__speed-meta {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.42rem;
  color: var(--text-muted);
  font-size: 0.62rem;
  line-height: 1;
}

.agent-thinking-stream__speed-meta span {
  min-width: 0;
  overflow: hidden;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
}

.agent-thinking-stream__speed-meta strong {
  color: var(--text);
  font-weight: 760;
  font-variant-numeric: tabular-nums;
}

@keyframes agent-thinking-stream-pulse {
  0%,
  100% {
    opacity: 0.58;
    transform: scale(0.86);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes agent-thinking-idle-icon {
  0%,
  100% {
    opacity: 0.48;
    transform: rotate(-8deg) scale(0.9);
  }

  45% {
    opacity: 0.95;
    transform: rotate(8deg) scale(1.06);
  }
}

@keyframes agent-thinking-speed-rise {
  from {
    opacity: 0.24;
    transform: scaleY(0.34);
  }

  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .agent-thinking-stream__pulse,
  .agent-thinking-stream__idle-icon,
  .agent-thinking-stream__speed-bar {
    animation: none;
    opacity: 0.82;
  }
}

.agent-session-stats {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: stretch;
  min-width: 0;
  padding: 0.12rem 0 0;
  overflow: hidden;
  transition:
    padding 0.22s ease,
    opacity 0.18s ease,
    transform 0.22s ease;
}

.agent-session-stats__model {
  width: 100%;
  border: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.46rem;
  min-height: 2rem;
  padding: 0.32rem 0 0.5rem;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.agent-session-stats__model:hover,
.agent-session-stats__model:focus-visible {
  color: var(--text);
  outline: 0;
}

.agent-session-stats__model-icon,
.agent-session-stats__icon {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--accent);
}

.agent-session-stats__model-text {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 0.77rem;
  font-weight: 760;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-session-stats__state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.05rem;
  min-height: 1.25rem;
  padding: 0 0.44rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  background: var(--bg-app);
  font-size: 0.66rem;
  font-weight: 760;
  white-space: nowrap;
}

.agent-session-stats__state--live {
  color: var(--on-accent);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-strong));
  background: color-mix(in srgb, var(--accent) 84%, var(--bg-app));
}

.agent-session-stats__rows {
  display: grid;
  gap: 0.14rem;
  padding-top: 0.48rem;
}

.agent-session-stats__row {
  display: grid;
  grid-template-columns: 1rem minmax(3.8rem, 0.62fr) minmax(0, 1.38fr);
  align-items: center;
  gap: 0.42rem;
  min-height: 1.92rem;
  padding: 0.25rem 0;
  color: var(--text-muted);
}

.agent-session-stats__row--turn {
  grid-template-columns: 1rem minmax(2.6rem, 0.42fr) minmax(0, 1.58fr);
}

.agent-session-stats__label {
  min-width: 0;
  overflow: hidden;
  font-size: 0.71rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-session-stats__value {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-session-stats__value--context,
.agent-session-stats__value--subagents {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.42rem;
}

.agent-session-stats__meter {
  position: relative;
  flex: 0 0 2.65rem;
  width: 2.65rem;
  height: 0.28rem;
  border-radius: var(--radius-pill);
  background: var(--border);
  overflow: hidden;
}

.agent-session-stats__meter-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 0.25s ease;
}

.agent-session-stats__meter-fill--warn {
  background: var(--warning);
}

.agent-session-stats__meter-fill--danger {
  background: var(--danger);
}

.agent-session-stats__subagent-chips {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  min-width: 0;
}

.agent-session-stats__subagent-chip {
  display: inline-block;
  max-width: 5.8rem;
  min-width: 0;
  overflow: hidden;
  padding: 0.1rem 0.28rem;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  color: var(--text-muted);
  font-size: 0.64rem;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-hero--compact {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto;
  align-items: center;
  justify-content: flex-start;
  column-gap: 0.65rem;
  row-gap: 0;
  min-height: 0;
  padding: 0.55rem 0.75rem;
  text-align: left;
}

.agent-hero--compact .agent-hero__orb {
  grid-column: 1;
  grid-row: 1;
  width: 2.35rem;
  height: 2.35rem;
  flex-shrink: 0;
  box-shadow:
    inset 0 1px 0 var(--overlay-3),
    0 6px 14px var(--scrim-bg);
}

.agent-hero--compact .agent-hero__orb::after {
  inset: 0.38rem;
}

/* The tiny compact orb has no room for the name badge. */
.agent-hero--compact .agent-name-badge {
  display: none;
}

.agent-hero--compact .drobo-orb__stage {
  inset: -0.18rem;
}

.agent-hero--compact .drobo-orb__state {
  right: -0.05rem;
  bottom: -0.05rem;
  width: 0.98rem;
  height: 0.98rem;
  box-shadow:
    0 0 0 0.1rem var(--accent-soft),
    0 4px 10px var(--scrim-bg);
}

.agent-hero--compact .drobo-orb__state svg {
  width: 0.68rem;
  height: 0.68rem;
}

.agent-hero--compact .agent-hero__logo {
  width: 1.15rem;
  height: 1.15rem;
  font-size: 0.72rem;
}

.agent-hero--compact .agent-session-stats {
  grid-column: 2;
  grid-row: 1;
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  transform: translateX(0);
}

.agent-hero--compact .agent-session-stats__model {
  display: none;
}

.agent-hero--compact .agent-session-stats__rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 0.42rem;
  padding: 0;
}

.agent-hero--compact .agent-session-stats__row {
  display: none;
}

.agent-hero--compact .agent-session-stats__row--context,
.agent-hero--compact .agent-session-stats__row--costs {
  display: grid;
  grid-template-columns: auto minmax(0, auto) minmax(0, 1fr);
  min-height: 1.72rem;
  gap: 0.34rem;
  padding: 0.2rem 0.48rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg-panel) 52%, transparent);
}

.agent-hero--compact .agent-session-stats__icon svg {
  width: 0.72rem;
  height: 0.72rem;
}

.agent-hero--compact .agent-session-stats__label {
  font-size: 0.66rem;
}

.agent-hero--compact .agent-session-stats__value {
  font-size: 0.68rem;
}

.agent-hero--compact .agent-session-stats__value--context {
  gap: 0.32rem;
}

.agent-hero--compact .agent-session-stats__meter {
  flex-basis: 2.05rem;
  width: 2.05rem;
}

.agent-hero--compact .agent-thinking-stream {
  grid-column: 1 / -1;
  grid-row: 2;
  min-height: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-0.24rem);
}

.workbench-agent-pane--chat-maximized {
  gap: 0.5rem;
}

.agent-section {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-app);
  box-shadow: inset 0 1px 0 var(--overlay-1);
}

.agent-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.68rem 0.75rem 0.55rem;
  border-bottom: 1px solid var(--border);
}

.agent-section__head--toggle {
  font: inherit;
  color: inherit;
  background: transparent;
  border-width: 0 0 1px;
  cursor: pointer;
  text-align: left;
}

.agent-section__head--toggle:hover,
.agent-section__head--toggle:focus-visible {
  background: var(--overlay-1);
}

.agent-section__head h3 {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--text);
}

.agent-section__head span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  color: var(--text-faint);
  font-size: 0.68rem;
  font-weight: 700;
}

.agent-section__chev {
  width: 0.8rem;
  justify-content: center;
  color: var(--accent);
  font-size: 0.82rem;
  line-height: 1;
}

.agent-chat-head__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  flex-shrink: 0;
}

.agent-chat-head__actions--tooltips-suppressed
  .blx-tip-anchor
  > .agent-chat-head__tooltip {
  opacity: 0;
  pointer-events: none;
}

.agent-chat-head__actions--tooltips-suppressed
  .blx-tip-anchor--left
  > .agent-chat-head__tooltip {
  transform: translate(0, -0.32rem) scale(0.97);
}

.agent-chat-head__tip {
  align-items: center;
}

.agent-chat-head__tooltip {
  top: calc(100% + 0.5rem);
  right: 0;
  left: auto;
  bottom: auto;
  flex-shrink: 1;
  min-width: 11rem;
  max-width: min(13.5rem, calc(100vw - 2rem));
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 400;
  transform: translate(0, -0.32rem) scale(0.97);
  transform-origin: right top;
}

.agent-chat-head__tooltip::after {
  top: -0.38rem;
  right: 0.38rem;
  left: auto;
  bottom: auto;
  margin: 0;
  border: 0;
  border-left: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border-strong));
  border-top: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border-strong));
}

.agent-chat-head__tip:hover > .agent-chat-head__tooltip,
.agent-chat-head__tip:focus-within > .agent-chat-head__tooltip {
  transform: translate(0, 0) scale(1);
}

.agent-chat-head__tooltip .blx-tooltip__main,
.agent-chat-head__tooltip .blx-tooltip__hint {
  display: block;
  flex-shrink: 1;
}

.agent-chat-head__tooltip .blx-tooltip__eyebrow {
  display: flex;
  flex-shrink: 1;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.agent-chat-head__tooltip .blx-tooltip__main {
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 650;
  line-height: 1.2;
}

.agent-chat-head__tooltip .blx-tooltip__hint {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.35;
}

.agent-chat-head__icon-btn,
.agent-chat-head__reset {
  display: inline-grid;
  place-items: center;
  width: 1.42rem;
  height: 1.42rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
}

.agent-chat-head__icon-btn:hover,
.agent-chat-head__icon-btn:focus-visible,
.agent-chat-head__reset:hover,
.agent-chat-head__reset:focus-visible {
  color: var(--text);
  border-color: var(--border);
  background: var(--overlay-2);
}

.agent-chat-head__reset:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.agent-chat-head__image-mode {
  display: inline-grid;
  place-items: center;
  width: 1.42rem;
  height: 1.42rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
}

.agent-chat-head__image-mode:hover,
.agent-chat-head__image-mode:focus-visible {
  color: var(--text);
  border-color: var(--border);
  background: var(--overlay-2);
}

.agent-chat-head__image-mode--active {
  color: var(--accent, var(--accent));
  border-color: var(--accent, var(--accent));
  background: var(--overlay-2);
}

.agent-chat-head__image-mode:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.agent-chat-head__image-hint {
  flex-shrink: 0;
  margin: 0;
  font-size: 0.72rem;
  color: var(--accent, var(--accent));
  padding: 0.18rem 0.75rem;
  border-inline: 1px solid var(--border);
  border-radius: 0;
  background: var(--accent-soft);
  border-top: 0;
  border-bottom: 1px solid var(--overlay-2);
}

.agent-chat-line--image .agent-chat-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.agent-chat-image-prompt {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted, var(--text-faint));
}

.agent-chat-image-prompt__label {
  font-weight: 600;
  margin-right: 0.3rem;
}

.agent-chat-image {
  max-width: min(100%, 480px);
  border-radius: var(--radius-md);
  border: 1px solid var(--border, var(--border));
  background: var(--bg-app);
}

.agent-chat-image-missing {
  font-style: italic;
  color: var(--text-muted, var(--text-faint));
  margin: 0;
}

.agent-chat-image-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.agent-chat-image-path {
  font-size: 0.7rem;
  word-break: break-all;
}

.agent-section--tasks {
  flex-shrink: 0;
}

.agent-section--context {
  flex-shrink: 0;
}

/* Compact, discreet tasks bar (collapsed by default). */
.agent-tasks-bar {
  display: flex;
  flex-direction: column;
}

.agent-tasks-bar__summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.42rem 0.55rem;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.agent-tasks-bar__summary:hover,
.agent-tasks-bar__summary:focus-visible {
  background: var(--overlay-1);
  outline: 0;
}

.agent-tasks-bar__count {
  flex-shrink: 0;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
}

.agent-tasks-bar__desc {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-tasks-bar__chev {
  flex-shrink: 0;
  color: var(--text-faint);
  font-size: 0.78rem;
  line-height: 1;
}

.agent-tasks-bar__progress {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.34rem 0.55rem 0.4rem;
  border-top: 1px solid var(--border);
}

.agent-tasks-bar__donut {
  flex-shrink: 0;
  display: block;
}

.agent-tasks-bar__donut-track {
  fill: none;
  stroke: var(--overlay-2);
  stroke-width: 2.4;
}

.agent-tasks-bar__donut-fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.4;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.4s ease;
}

.agent-tasks-bar__progress-label {
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.agent-tasks-bar__runtime {
  margin-left: auto;
  color: var(--text-faint);
  font-size: 0.68rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.agent-tasks-bar__runtime--live {
  color: var(--accent);
}

.agent-task-list {
  list-style: none;
  margin: 0;
  padding: 0.35rem 0.45rem 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.agent-task-list__group-block {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.agent-task-list__group-block + .agent-task-list__group-block {
  margin-top: 0.2rem;
}

.agent-task-list__group {
  list-style: none;
  margin: 0;
  padding: 0;
}

.agent-task-list__group-title {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0.1rem 0.05rem 0.05rem;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.agent-task-list__group-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--accent-cool);
}

.agent-task {
  display: grid;
  grid-template-columns: 0.55rem minmax(0, 1fr);
  gap: 0.38rem;
  align-items: start;
  padding: 0.42rem 0.15rem;
  border-radius: var(--radius-sm);
}

.agent-task--empty {
  grid-template-columns: minmax(0, 1fr);
}

.agent-task--active {
  background: var(--accent-soft);
}

.agent-context-item__mark {
  background: var(--accent);
}

.agent-context-item__remove {
  display: inline-grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-faint);
  background: transparent;
  cursor: pointer;
}

.agent-context-item__remove:hover,
.agent-context-item__remove:focus-visible {
  color: var(--text);
  border-color: var(--border);
  background: var(--overlay-2);
}

.agent-context-image {
  grid-template-columns: 0.8rem minmax(0, 1fr);
}

.agent-context-image__mark {
  background: var(--syntax-type);
}

.agent-context-image__open {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.agent-context-image__open:hover strong,
.agent-context-image__open:focus-visible strong {
  color: var(--accent-cool);
}

.agent-context-image__actions {
  display: flex;
  gap: 0.22rem;
  margin-top: 0.28rem;
}

.agent-context-image__status {
  font-size: 0.56rem;
}

.agent-context-image__status--pending {
  color: var(--accent-cool);
  background: var(--accent-soft);
}

.agent-context-image__status--read {
  color: var(--text-muted);
  background: var(--overlay-2);
}

.agent-image-preview-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 1.4rem;
}

.agent-image-preview-dialog {
  width: min(46rem, 100%);
  max-height: min(42rem, 88vh);
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--overlay-2);
  box-shadow: 0 24px 70px var(--scrim-bg);
  overflow: hidden;
}

.agent-image-preview__head,
.agent-image-preview__actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.agent-image-preview__head {
  justify-content: space-between;
}

.agent-image-preview__head h3 {
  margin: 0;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 800;
}

.agent-image-preview__head p {
  margin: 0.18rem 0 0;
  color: var(--text-muted);
  font-size: 0.68rem;
}

.agent-image-preview__stage {
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 0.85rem;
  overflow: auto;
  background: var(--scrim-bg);
}

.agent-image-preview__stage img {
  display: block;
  max-width: 100%;
  max-height: 64vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

.agent-image-preview__actions {
  justify-content: flex-end;
  border-top: 1px solid var(--border);
  border-bottom: 0;
}

.agent-image-preview__remove {
  color: var(--danger);
  border-color: var(--danger-soft);
}

.agent-task__body {
  min-width: 0;
}

.agent-task__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.agent-task__mark {
  margin-top: 0.32rem;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: var(--radius-circle);
  background: var(--overlay-2);
  box-shadow: 0 0 0 1px var(--overlay-2);
}

.agent-task--active .agent-task__mark {
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-cool-soft);
}

.agent-task strong {
  display: block;
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 760;
  line-height: 1.35;
}

.agent-task small {
  display: block;
  margin-top: 0.1rem;
  color: var(--text-muted);
  font-size: 0.68rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.agent-task__status {
  display: inline-flex;
  align-items: center;
  padding: 0.08rem 0.34rem;
  border-radius: var(--radius-sm);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid var(--overlay-2);
}

.agent-task__status--pending {
  color: var(--text-muted);
  background: var(--overlay-2);
}

.agent-task__status--in-progress {
  color: var(--accent-cool);
  background: var(--accent-soft);
}

.agent-task__status--blocked {
  color: var(--warning);
  background: var(--overlay-2);
}

.agent-task__status--completed {
  color: var(--success);
  background: var(--overlay-2);
}

.agent-task__status--cancelled {
  color: var(--danger);
  background: var(--overlay-2);
}

.workbench-agent-input {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  width: 100%;
  min-height: 3.15rem;
  max-height: 8.5rem;
  padding: 0.58rem 0.65rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--scrim-bg);
  color: var(--text);
  resize: vertical;
  line-height: 1.45;
}

.workbench-agent-input:focus {
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.workbench-agent-input--single {
  min-height: 2.25rem;
  max-height: 2.25rem;
  height: 2.25rem;
  resize: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.workbench-agent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.workbench-mini-btn {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 550;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  padding: 0.42rem 0.65rem;
  cursor: pointer;
}

.workbench-mini-btn:hover {
  border-color: var(--border-strong);
  color: var(--text);
  background: var(--bg-raised);
}

.workbench-mini-btn--primary {
  background: var(--accent);
  color: var(--bg-raised);
  border-color: var(--accent);
  font-weight: 800;
}

.workbench-mini-btn--primary:hover {
  background: var(--accent-hover);
}

.workbench-mini-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}

.workbench-mini-btn:disabled:hover {
  border-color: var(--border);
  color: var(--text-muted);
  background: transparent;
}

.workbench-mini-btn--primary:disabled {
  background: color-mix(in srgb, var(--accent) 42%, transparent);
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  color: color-mix(in srgb, var(--bg-raised) 55%, transparent);
}

.workbench-mini-btn--primary:disabled:hover {
  background: color-mix(in srgb, var(--accent) 42%, transparent);
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
}

.workbench-agent-status {
  flex-shrink: 0;
  margin: 0;
  font-size: 0.75rem;
  color: var(--syntax-keyword);
}

.workbench-agent-scroll {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.workbench-agent-scroll::after {
  content: "";
  position: absolute;
  right: 1px;
  bottom: 0;
  left: 1px;
  z-index: 2;
  height: 2.4rem;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent,
    color-mix(in srgb, var(--bg-app) 82%, transparent) 58%,
    var(--bg-app)
  );
}

.agent-chat-head {
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--bg-app);
  box-shadow: inset 0 1px 0 var(--overlay-1);
}

.agent-chat-session-tabs {
  display: flex;
  flex-shrink: 0;
  gap: 0.18rem;
  overflow-x: auto;
  padding: 0.2rem 0.36rem;
  border-right: 1px solid var(--border);
  border-left: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-app) 94%, var(--overlay-1));
}

.agent-chat-session-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.26rem;
  min-width: 6.5rem;
  max-width: 19rem;
  min-height: 1.56rem;
  padding: 0 0.42rem;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  color: var(--text-muted);
  background: transparent;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
}

.agent-chat-session-tab:hover,
.agent-chat-session-tab:focus-visible {
  color: var(--text);
  border-bottom-color: color-mix(in srgb, var(--border) 58%, transparent);
  background: transparent;
}

.agent-chat-session-tab--active {
  color: var(--text);
  border-bottom-color: color-mix(in srgb, var(--accent) 46%, var(--border));
  background: transparent;
}

.agent-chat-session-tab__status {
  width: 0.32rem;
  height: 0.32rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--text-muted);
}

.agent-chat-session-tab__status--running,
.agent-chat-session-tab__status--needs-input {
  background: var(--warning);
}

.agent-chat-session-tab__status--error {
  background: var(--danger);
}

.agent-chat-session-tab__status--restored {
  background: var(--accent);
}

.agent-chat-session-tab__status--idle {
  background: var(--success);
}

.agent-chat-session-tab__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-chat-session-tab__unread {
  min-width: 0.84rem;
  padding: 0 0.2rem;
  border-radius: 999px;
  color: var(--bg-app);
  background: var(--accent);
  font-size: 0.6rem;
  line-height: 0.84rem;
  text-align: center;
}

.agent-chat-session-tab__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.86rem;
  height: 0.86rem;
  flex: 0 0 auto;
  border: 0;
  border-radius: var(--radius-xs);
  color: var(--text-muted);
  background: transparent;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.agent-chat-session-tab__close:hover,
.agent-chat-session-tab__close:focus-visible {
  color: var(--text);
  background: var(--overlay-2);
}

.workbench-agent-chat-log {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0.35rem 0.45rem 1.45rem;
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0;
  background: var(--bg-app);
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

.workbench-agent-scroll + .agent-composer {
  margin-top: -0.75rem;
  border-top-width: 0;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--bg-app);
  box-shadow: inset 0 -1px 0 var(--overlay-1);
}

.workbench-agent-transcript {
  font-family: inherit;
  font-size: inherit;
  line-height: 1.62;
  margin: 0;
  padding: 0;
  white-space: pre-wrap;
  color: var(--text);
}

.workbench-agent-markdown {
  color: var(--text);
  font-size: inherit;
  line-height: 1.66;
  overflow-wrap: anywhere;
}

.workbench-agent-markdown > :first-child {
  margin-top: 0;
}

.workbench-agent-markdown > :last-child {
  margin-bottom: 0;
}

.workbench-agent-markdown p,
.workbench-agent-markdown ul,
.workbench-agent-markdown ol,
.workbench-agent-markdown pre,
.workbench-agent-markdown blockquote,
.workbench-agent-markdown table {
  margin: 0.42rem 0;
}

.workbench-agent-markdown h1,
.workbench-agent-markdown h2,
.workbench-agent-markdown h3,
.workbench-agent-markdown h4 {
  margin: 0.7rem 0 0.38rem;
  color: var(--text-muted);
  line-height: 1.22;
}

.workbench-agent-markdown h1 {
  font-size: 1rem;
  font-weight: 850;
}

.workbench-agent-markdown h2 {
  font-size: 0.9rem;
  font-weight: 820;
}

.workbench-agent-markdown h3,
.workbench-agent-markdown h4 {
  font-size: 0.8rem;
  font-weight: 780;
}

.workbench-agent-markdown hr {
  margin: 0.65rem 0;
  border: 0;
  border-top: 1px solid var(--overlay-2);
}

.workbench-agent-markdown ul,
.workbench-agent-markdown ol {
  padding-left: 1.08rem;
}

.workbench-agent-markdown li + li {
  margin-top: 0.18rem;
}

.workbench-agent-markdown code {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--accent-cool);
  background: var(--overlay-2);
  border: 1px solid var(--overlay-2);
  border-radius: 0.28rem;
  padding: 0.08rem 0.24rem;
}

.workbench-agent-markdown pre {
  overflow: auto;
  padding: 0.65rem 0.72rem;
  border-radius: 0.5rem;
  background:
    linear-gradient(180deg, var(--overlay-1), var(--overlay-1));
  border: 1px solid var(--overlay-2);
  box-shadow: inset 0 1px 0 var(--overlay-1);
}

.workbench-agent-markdown pre code {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
  color: var(--text-muted);
  line-height: 1.58;
}

/* Collapsible fenced code (`render_markdown_to_html` wraps `<pre>` in `<details>`). */
.workbench-md-fence {
  margin: 0.42rem 0;
  border-radius: 0.5rem;
  border: 1px solid var(--overlay-2);
  background:
    linear-gradient(180deg, var(--overlay-1), var(--overlay-1));
  box-shadow: inset 0 1px 0 var(--overlay-1);
}

.workbench-md-fence__summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0.38rem 0.55rem;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 650;
  color: var(--text-muted);
  user-select: none;
}

.workbench-md-fence__summary-title {
  flex: 1;
  min-width: 0;
}

.workbench-md-fence__summary-lang {
  margin-left: auto;
  flex-shrink: 0;
  font-weight: 650;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: var(--text-muted);
}

.workbench-md-fence__summary::-webkit-details-marker {
  display: none;
}

.workbench-md-fence__summary::before {
  content: "";
  display: inline-block;
  width: 0.38rem;
  height: 0.38rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  opacity: 0.75;
  transition: transform 0.16s ease;
}

.workbench-md-fence[open] > .workbench-md-fence__summary::before {
  transform: rotate(45deg);
}

.workbench-md-fence__body {
  border-top: 1px solid var(--overlay-2);
}

.workbench-md-fence__body pre {
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.workbench-agent-markdown blockquote {
  margin-left: 0;
  padding: 0.1rem 0 0.1rem 0.78rem;
  border-left: 2px solid var(--accent-soft);
  color: var(--text-muted);
  background: linear-gradient(90deg, var(--accent-soft), transparent 55%);
}

.workbench-agent-markdown a {
  color: var(--accent-cool);
  text-decoration-color: var(--text-muted);
}

.workbench-agent-markdown a[href^="blxmemory:"] {
  color: var(--syntax-keyword);
  text-decoration-color: var(--text-muted);
}

.workbench-agent-markdown table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.69rem;
  table-layout: fixed;
  border-radius: 0.42rem;
  overflow: hidden;
  border: 1px solid var(--overlay-2);
}

.workbench-agent-markdown th,
.workbench-agent-markdown td {
  border: 1px solid var(--overlay-2);
  padding: 0.28rem 0.34rem;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.workbench-agent-markdown th {
  color: var(--text-muted);
  background: var(--overlay-2);
  font-weight: 760;
}

.workbench-agent-row {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--syntax-type);
  margin: 0.3rem 0 0.3rem 1.1rem;
  padding: 0.12rem 0 0.12rem 0.65rem;
  border-left: 1px solid var(--success);
  background: transparent;
}

.agent-chat-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.agent-thinking {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.55rem 0 0.2rem;
  padding: 0.45rem 0.7rem;
  border-radius: var(--radius-lg);
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft);
  color: var(--text-muted, var(--text-muted));
  font-size: 0.82rem;
  width: fit-content;
}

.agent-thinking__dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.agent-thinking__dots span {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-circle);
  background: currentColor;
  opacity: 0.35;
  animation: agent-thinking-bounce 1.1s infinite ease-in-out;
}

.agent-thinking__dots span:nth-child(2) {
  animation-delay: 0.18s;
}

.agent-thinking__dots span:nth-child(3) {
  animation-delay: 0.36s;
}

@keyframes agent-thinking-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.35; }
  40% { transform: translateY(-3px); opacity: 1; }
}

.agent-thinking__label {
  letter-spacing: 0.01em;
}

.agent-thinking-title {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--accent);
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.agent-thinking-title:hover:not(:disabled) .agent-thinking-title__label {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.agent-thinking-title:disabled {
  cursor: default;
  opacity: 0.75;
}

.agent-thinking-title__label {
  display: inline-block;
  color: var(--accent);
}

.agent-thinking-title--active .agent-thinking-title__label {
  color: var(--text-muted);
}

.agent-thinking-title__chevron {
  display: inline-flex;
  align-items: center;
  opacity: 0.6;
}

.agent-thinking-title:hover:not(:disabled) .agent-thinking-title__chevron {
  opacity: 0.9;
}

.agent-thinking-card__body {
  margin: 0.4rem 0 0;
  padding: 0.55rem 0.75rem;
  background: var(--overlay-2);
  border: 1px solid var(--overlay-2);
  border-radius: var(--radius-lg);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.55;
  color: var(--text-muted);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 18rem;
  overflow: auto;
}

.agent-chat-line--thinking .agent-chat-body::before {
  background: var(--overlay-2);
  box-shadow: 0 0 0 3px var(--overlay-2);
}

.agent-tool-list {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.agent-tool-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.28rem 0.32rem;
  padding-right: clamp(1rem, 6vw, 3rem);
}

.agent-tool-row {
  position: relative;
  display: block;
  width: min(100%, 26rem);
  max-width: 100%;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  transition:
    background 120ms ease,
    color 120ms ease;
}

.agent-tool-row::before {
  content: "";
  position: absolute;
  inset: 0.28rem auto 0.28rem 0;
  width: 2px;
  border-radius: var(--radius-pill);
  background: var(--overlay-3);
  opacity: 0.72;
  transition:
    background 120ms ease,
    opacity 120ms ease;
}

.agent-tool-row:hover {
  background: var(--overlay-1);
}

.agent-tool-row--pending {
  background: color-mix(in srgb, var(--overlay-1) 74%, transparent);
}

.agent-tool-row--pending::before {
  background: var(--text-muted);
}

.agent-tool-row--ok {
  background: color-mix(in srgb, var(--accent-soft) 12%, transparent);
}

.agent-tool-row--ok::before {
  background: color-mix(in srgb, var(--accent) 70%, var(--overlay-3));
}

.agent-tool-row--fail {
  background: color-mix(in srgb, var(--danger-soft) 62%, transparent);
}

.agent-tool-row--fail::before {
  background: var(--danger);
}

.agent-tool-row__head {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.42rem;
  width: 100%;
  max-width: 100%;
  min-height: 1.65rem;
  padding: 0.2rem 0.5rem 0.2rem 0.62rem;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.agent-tool-row__head:disabled {
  cursor: default;
}

.agent-tool-row__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--accent);
  flex: 0 0 auto;
}

.agent-tool-row--fail .agent-tool-row__icon {
  color: var(--danger);
  background: transparent;
}

.agent-tool-row__label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 0;
  width: fit-content;
  max-width: 100%;
}

.agent-tool-row__arg {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--text-faint, var(--text-muted));
  min-width: 0;
  max-width: min(22rem, 52vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-tool-row__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border-radius: var(--radius-pill);
  color: color-mix(in srgb, var(--accent) 78%, var(--text-muted));
  justify-self: end;
}

.agent-tool-row__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  color: var(--text-faint);
  opacity: 0.74;
  transition:
    color 120ms ease,
    opacity 120ms ease,
    transform 140ms ease;
}

.agent-tool-row:hover .agent-tool-row__chevron,
.agent-tool-row__head:focus-visible .agent-tool-row__chevron {
  color: var(--text-muted);
  opacity: 1;
}

.agent-tool-row__chevron--open {
  transform: rotate(180deg);
}

.agent-tool-row--pending .agent-tool-row__status {
  color: var(--accent-cool);
  animation: agent-tool-spin 1.4s linear infinite;
}

.agent-tool-row--fail .agent-tool-row__status {
  color: var(--danger);
}

.agent-tool-row__detail {
  margin: 0;
  padding: 0.08rem 0.58rem 0.52rem 2rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  line-height: 1.5;
  color: var(--text-muted);
  white-space: pre-wrap;
  word-break: break-word;
}

.agent-tool-detail-list {
  font-family: inherit;
}

.agent-tool-detail-list ul {
  display: grid;
  gap: 0.46rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.agent-tool-detail-list__item {
  display: grid;
  gap: 0.22rem;
  min-width: 0;
  padding-left: 0.62rem;
  border-left: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
}

.agent-tool-detail-list__main {
  display: flex;
  align-items: baseline;
  gap: 0.42rem;
  min-width: 0;
}

.agent-tool-detail-list__title {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-tool-detail-list__kicker,
.agent-tool-detail-list__meta span,
.agent-tool-detail-list__truncated {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: var(--radius-sm);
  color: var(--text-faint);
  background: var(--overlay-1);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 720;
  line-height: 1.45;
}

.agent-tool-detail-list__kicker {
  flex-shrink: 0;
  padding: 0 0.28rem;
  text-transform: lowercase;
}

.agent-tool-detail-list__item p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.66rem;
  line-height: 1.42;
}

.agent-tool-detail-list__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.22rem;
}

.agent-tool-detail-list__meta span,
.agent-tool-detail-list__truncated {
  padding: 0 0.24rem;
}

.agent-tool-detail-list__truncated {
  margin-top: 0.46rem;
}

.tool-row-paths {
  list-style: none;
  margin: 0;
  padding: 0.08rem 0.58rem 0.52rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

.tool-row-path-btn {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: none;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: transparent;
  transition: color 120ms ease, text-decoration-color 120ms ease;
}

.tool-row-path-btn:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

.agent-tool-row__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  padding: 0 0.32rem;
  height: 0.95rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--text);
  background: var(--overlay-2);
  border: 0;
  flex: 0 0 auto;
}

.agent-tool-row--merged.agent-tool-row--pending .agent-tool-row__count {
  color: var(--text-muted);
  background: var(--overlay-2);
}

.agent-tool-row--merged.agent-tool-row--ok .agent-tool-row__count {
  color: var(--text);
  background: color-mix(in srgb, var(--accent-soft) 62%, var(--overlay-2));
}

.agent-tool-row--merged.agent-tool-row--fail .agent-tool-row__count {
  color: var(--danger);
  background: var(--overlay-2);
}

.agent-chat-actions {
  display: flex;
  align-items: center;
  gap: 0.32rem;
  margin-top: 0.36rem;
  opacity: 0.55;
  transition: opacity 140ms ease;
}

.agent-chat-line--agent:hover .agent-chat-actions {
  opacity: 1;
}

.agent-chat-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 1px solid var(--overlay-2);
  border-radius: 0.4rem;
  background: var(--overlay-1);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.agent-chat-action:hover {
  background: var(--overlay-2);
  border-color: var(--text-muted);
  color: var(--text-muted);
}

.agent-chat-action:focus-visible {
  outline: 2px solid var(--overlay-2);
  outline-offset: 1px;
}

.agent-chat-usage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.32rem;
  padding: 0.42rem 0.6rem 0.32rem;
  margin-top: 0.18rem;
  border-top: 1px solid var(--overlay-1);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-faint, var(--text-muted));
}

.agent-chat-usage strong {
  color: var(--text-muted);
  font-weight: 600;
}

.agent-chat-usage__turns {
  color: var(--text-muted);
  font-weight: 600;
}

.agent-chat-usage__sep {
  color: var(--text-muted);
}

.agent-tool-row__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.9rem;
  height: 0.9rem;
  color: var(--text-faint, var(--text-muted));
  flex: 0 0 auto;
}

.agent-tool-row__sublist {
  list-style: none;
  margin: 0;
  padding: 0 0.52rem 0.48rem 1.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

.agent-tool-row__sub {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 0.42rem;
  font-size: 0.66rem;
  color: var(--text-muted);
}

.agent-tool-row__sub-index {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-faint, var(--overlay-2));
}

.agent-tool-row__sub-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.9rem;
  height: 0.9rem;
  color: color-mix(in srgb, var(--accent) 78%, var(--text-muted));
}

.agent-tool-row__sub--pending .agent-tool-row__sub-status {
  color: var(--accent-cool);
  animation: agent-tool-spin 1.4s linear infinite;
}

.agent-tool-row__sub--fail .agent-tool-row__sub-status {
  color: var(--danger);
}

.agent-tool-row__sub-arg {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--text-faint, var(--overlay-2));
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-subagent-group > strong {
  font-size: 0.72rem;
}

.agent-subagent-card {
  margin-top: 0.28rem;
  font-size: 0.7rem;
  color: var(--text-muted);
}

.agent-subagent-card__summary {
  display: inline-flex;
  align-items: baseline;
  gap: 0.42rem;
  cursor: pointer;
  list-style: none;
  padding: 0.12rem 0;
}

.agent-subagent-card__summary::-webkit-details-marker {
  display: none;
}

.agent-subagent-card__name {
  font-weight: 600;
  color: var(--text-muted);
}

.agent-subagent-card__status {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-faint, var(--text-muted));
  text-transform: lowercase;
}

.agent-subagent-card__pulse {
  display: inline-flex;
  gap: 0.18rem;
  align-self: center;
  margin-left: 0.18rem;
}

.agent-subagent-card__pulse > span {
  width: 0.28rem;
  height: 0.28rem;
  border-radius: var(--radius-circle);
  background: var(--accent-cool);
  animation: agent-subagent-pulse 1.1s ease-in-out infinite;
}

.agent-subagent-card__pulse > span:nth-child(2) {
  animation-delay: 0.18s;
}

.agent-subagent-card__pulse > span:nth-child(3) {
  animation-delay: 0.36s;
}

@keyframes agent-subagent-pulse {
  0%, 80%, 100% { opacity: 0.25; }
  40% { opacity: 1; }
}

.agent-subagent-card__thinking {
  margin: 0.18rem 0 0.24rem 0.9rem;
  font-size: 0.66rem;
  color: var(--text-muted);
}

.agent-subagent-card__thinking summary {
  cursor: pointer;
  list-style: none;
  font-style: italic;
  color: var(--accent-cool);
}

.agent-subagent-card__thinking summary::-webkit-details-marker {
  display: none;
}

.agent-subagent-card__thinking--done summary {
  color: var(--text-muted);
}

.agent-subagent-card__thinking-body {
  margin: 0.18rem 0 0 0;
  padding: 0.32rem 0.48rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  line-height: 1.45;
  color: var(--text-muted);
  background: var(--overlay-2);
  border-left: 2px solid var(--overlay-2);
  white-space: pre-wrap;
  word-break: break-word;
}

.agent-subagent-card__live-text {
  margin: 0.18rem 0 0.24rem 0.9rem;
  padding: 0.28rem 0.46rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  line-height: 1.5;
  color: var(--text-muted);
  background: var(--overlay-1);
  border-radius: 0.32rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.agent-subagent-card__summary-text {
  margin: 0.18rem 0 0.24rem 0.9rem;
  font-size: 0.68rem;
  line-height: 1.45;
  color: var(--text-muted);
  white-space: pre-wrap;
}

.agent-subagent-card__tools {
  list-style: none;
  margin: 0;
  padding: 0 0 0 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  color: var(--text-muted);
}

.agent-subagent-card__tools > li {
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
}

.agent-subagent-card__tools-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2rem;
  padding: 0 0.26rem;
  height: 0.82rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--accent-cool-soft);
  border: 1px solid var(--success);
}

.timeline-tree {
  margin-left: calc(var(--timeline-depth, 0) * 1rem);
}

.timeline-tree__children {
  margin-left: calc((var(--timeline-depth, 0) + 1) * 1rem);
  padding-left: 0.75rem;
  border-left: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

.timeline-tree__children:empty {
  display: none;
}

.agent-tool-row__sub-detail {
  grid-column: 1 / -1;
  margin: 0.12rem 0 0 1.32rem;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  line-height: 1.45;
  color: var(--text-muted);
  white-space: pre-wrap;
  word-break: break-word;
}

@keyframes agent-tool-spin {
  to {
    transform: rotate(360deg);
  }
}

.agent-chat-line {
  position: relative;
  display: grid;
  grid-template-columns: 1.35rem minmax(0, 1fr);
  column-gap: 0.62rem;
  margin: 0;
  padding: 0.52rem 0;
  background: transparent;
  border: 0;
}

.agent-chat-index-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.18rem;
  padding-top: 0.04rem;
}

.agent-chat-index {
  color: var(--text-faint);
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1.35;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.agent-chat-tts-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  padding: 0;
  border: 1px solid var(--overlay-4);
  border-radius: 0.28rem;
  background: var(--overlay-1);
  color: var(--accent);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.agent-chat-tts-btn:hover {
  background: var(--accent-cool-soft);
  border-color: var(--accent-soft);
  color: var(--accent-cool);
}

.agent-chat-tts-btn:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 1px;
}

.agent-chat-body {
  position: relative;
  min-width: 0;
  padding-left: 0.74rem;
  border-left: 1px solid var(--overlay-5);
}

.agent-chat-body::before {
  content: "";
  position: absolute;
  left: -0.2rem;
  top: 0.32rem;
  width: 0.36rem;
  height: 0.36rem;
  border-radius: var(--radius-circle);
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.agent-chat-line strong {
  display: block;
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 850;
  margin-bottom: 0.18rem;
}

.agent-chat-line p {
  margin: 0;
  color: var(--text-muted);
  font-size: inherit;
  line-height: 1.5;
}

.agent-chat-line--user {
  margin-left: 0;
}

.agent-chat-line--user strong {
  color: var(--warning);
}

.agent-chat-line--user .agent-chat-body {
  border-left-color: var(--accent-soft);
}

.agent-chat-line--user .agent-chat-body::before {
  background: var(--accent-cool);
}

.agent-chat-line--tool strong {
  color: var(--success);
}

.agent-chat-line--tool .agent-chat-body {
  border-left-color: var(--success);
}

.agent-chat-line--tool .agent-chat-body::before {
  background: var(--syntax-type);
  box-shadow: 0 0 0 3px var(--accent-cool-soft);
}

.agent-compose {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: end;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.agent-compose .workbench-agent-actions {
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.agent-mode-toolbar {
  flex-shrink: 0;
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.18rem;
  width: min(100%, 24rem);
  padding: 0.16rem;
  border: 1px solid var(--overlay-4);
  border-radius: var(--radius-sm);
  background: var(--overlay-1);
}

.agent-mode-toolbar__btn {
  min-width: 0;
  min-height: 1.75rem;
  padding: 0 0.48rem;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 760;
  white-space: nowrap;
  cursor: pointer;
}

.agent-mode-toolbar__btn:hover:not(:disabled) {
  color: var(--text);
  background: var(--overlay-2);
}

.agent-mode-toolbar__btn--active {
  color: var(--text);
  border-color: var(--accent-soft);
  background: var(--accent-soft);
}

.agent-mode-toolbar__btn:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.agent-cancel-btn:disabled,
.agent-send-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (max-width: 960px) {
  .agent-compose {
    grid-template-columns: minmax(0, 1fr);
  }

  .agent-compose .workbench-agent-actions {
    justify-content: stretch;
  }

  .agent-compose .workbench-mini-btn {
    flex: 1;
  }
}

/* Embedded browser dock — kein Außen‑Padding; nur die Toolbar ist leicht eingepolstert */
.workbench-browser-dock {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  gap: 0;
  padding: 0;
  box-sizing: border-box;
}

.workbench-browser-tabstrip {
  flex-shrink: 0;
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
  gap: 0.2rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.22rem 0.3rem 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel-header);
  box-sizing: border-box;
}

.workbench-browser-page-tab {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex-shrink: 0;
  max-width: 12rem;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border: 1px solid transparent;
  border-bottom: none;
  overflow: hidden;
}

.workbench-browser-page-tab--active {
  border-color: var(--border);
  border-bottom-color: transparent;
  background: var(--bg-raised);
  margin-bottom: -1px;
}

.workbench-browser-page-tab__main {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-align: left;
  padding: 0.28rem 0.4rem;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.workbench-browser-page-tab--active .workbench-browser-page-tab__main {
  color: var(--text);
}

.workbench-browser-page-tab__close {
  flex-shrink: 0;
  border-width: 0 0 0 1px;
  border-radius: 0;
  padding: 0 0.35rem;
  min-width: 1.5rem;
  font-size: 0.95rem;
  line-height: 1;
}

.workbench-browser-new-tab-btn {
  flex-shrink: 0;
  align-self: center;
  padding: 0.22rem 0.5rem;
  margin-left: 0.1rem;
  font-weight: 700;
}

.workbench-browser-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
  flex-shrink: 0;
  padding: 0.35rem 0.4rem;
  border-bottom: 1px solid var(--border);
  box-sizing: border-box;
}

.workbench-browser-url {
  flex: 1;
  min-width: 140px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 0.25rem 0.45rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text);
}

.workbench-browser-host {
  flex: 1;
  min-height: 0;
  width: 100%;
  border-radius: 0;
  border: none;
  display: flex;
  flex-direction: column;
  background: repeating-linear-gradient(
    -45deg,
    var(--bg-raised),
    var(--bg-raised) 8px,
    var(--overlay-1) 8px,
    var(--overlay-1) 16px
  );
}

.workbench-browser-embed-pending {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--syntax-type);
}

.workbench-browser-frame-area {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Inaktive Tabs: aus dem Layout nehmen, aber DOM-Node (iframe) erhalten
   → kein Reload beim Tab-Wechsel, Scroll-/Form-State bleibt. */
.workbench-browser-frame-area--hidden {
  display: none;
}

/* Mehrere iframes belegen ihren Tab-Slot vollständig. */
.workbench-browser-host > .workbench-browser-frame-area {
  width: 100%;
  height: 100%;
}

.workbench-browser-new-tab {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  padding: 1rem;
  box-sizing: border-box;
  text-align: center;
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
}

.workbench-browser-new-tab-hint {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
  max-width: 22rem;
  line-height: 1.45;
}

.workbench-browser-new-tab-shortcuts-title {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}

.workbench-browser-shortlinks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
  max-width: 24rem;
}

.workbench-browser-shortlink {
  font-size: 0.73rem;
  padding-inline: 0.55rem;
}

.workbench-browser-iframe {
  flex: 1;
  min-height: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: var(--bg-panel);
  display: block;
}

.harness-overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: flex-start center;
  z-index: 9200;
  padding: clamp(2rem, 8vh, 4rem) 1rem 2rem;
  box-sizing: border-box;
}

.harness-overlay--modal {
  pointer-events: auto;
}

/* Center the sheet in both axes (default overlays anchor to the top). */
.harness-overlay--centered {
  place-items: center;
  padding: 1rem;
}

.harness-scrim {
  position: absolute;
  inset: 0;
  border: none;
  padding: 0;
  cursor: pointer;
}

.harness-sheet {
  position: relative;
  z-index: 1;
}

.harness-sheet--palette {
  margin-top: 4vh;
  width: min(92vw, 28rem);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-panel);
  box-shadow: 0 22px 50px var(--scrim-bg);
  padding: 0.65rem;
}

.harness-sheet.harness-sheet--command-palette {
  width: min(92vw, 56rem);
  min-width: min(92vw, 56rem);
  max-width: 56rem;
  padding: 0.9rem;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--overlay-2) 70%, transparent), transparent 42%),
    var(--bg-panel);
  box-shadow:
    0 26px 70px var(--scrim-bg),
    inset 0 1px 0 color-mix(in srgb, var(--overlay-4) 36%, transparent);
}

.harness-filter {
  width: 100%;
  margin-bottom: 0;
}

.harness-palette-filter-wrap {
  position: relative;
  margin-bottom: 0.45rem;
}

.harness-palette-filter__icon {
  position: absolute;
  left: 0.72rem;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  color: var(--text-muted);
  pointer-events: none;
  opacity: 0.82;
}

.harness-palette-filter-wrap .harness-filter--with-icon {
  padding-left: 2.35rem;
  padding-right: 0.9rem;
}

.harness-sheet--command-palette .harness-palette-filter-wrap {
  margin-bottom: 0.75rem;
}

.harness-sheet--command-palette .harness-filter {
  padding-top: 0.68rem;
  padding-bottom: 0.68rem;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--bg-panel) 86%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--overlay-4) 28%, transparent);
}

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

.harness-sheet--command-palette .harness-cmd-list {
  gap: 0.38rem;
  padding: 0.1rem 0;
}

.harness-cmd-btn {
  width: 100%;
  padding: 0.45rem 0.55rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  text-align: left;
  cursor: pointer;
  background: transparent;
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  transition:
    border-color 120ms ease,
    background 120ms ease,
    transform 120ms ease;
}

.harness-sheet--command-palette .harness-cmd-btn {
  min-height: 3rem;
  padding: 0.62rem 0.72rem;
  border-radius: var(--radius-md);
  gap: 0.7rem;
}

.harness-cmd-btn__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  margin-top: 0.05rem;
  color: var(--accent);
  opacity: 0.88;
}

.harness-cmd-btn__text {
  min-width: 0;
  flex: 1;
}

.harness-cmd-btn:hover .harness-cmd-btn__icon {
  opacity: 1;
}

.harness-cmd-btn--active .harness-cmd-btn__icon {
  opacity: 1;
}

.harness-cmd-btn:hover {
  background: var(--overlay-1);
  border-color: color-mix(in srgb, var(--border-strong) 76%, transparent);
}

.harness-cmd-btn--active {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--border));
  background: color-mix(in srgb, var(--accent-soft) 58%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--overlay-4) 28%, transparent),
    0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
  outline: none;
}

.harness-sheet--command-palette .harness-cmd-btn:hover,
.harness-sheet--command-palette .harness-cmd-btn--active {
  transform: translateY(-1px);
}

.harness-cmd-title {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text);
}

.harness-cmd-sub {
  display: block;
  font-size: 0.7rem;
  color: var(--text-muted);
}

.harness-sheet-hint {
  margin: 0.4rem 0 0;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.harness-sheet--command-palette .harness-sheet-hint {
  margin-top: 0.7rem;
  padding-top: 0.65rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
}

.harness-sheet--agent-onboarding {
  width: min(31rem, calc(100vw - 2rem));
  box-sizing: border-box;
  padding: 1rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 42%),
    var(--bg-panel);
  box-shadow:
    0 24px 70px var(--scrim-bg),
    0 0 0 1px var(--overlay-1);
  color: var(--text);
}

.agent-onboarding__head {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  margin-bottom: 0.9rem;
}

.agent-onboarding__icon {
  display: inline-grid;
  width: 2.1rem;
  height: 2.1rem;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
}

.agent-onboarding__title-wrap {
  min-width: 0;
}

.agent-onboarding__lead {
  margin: 0.22rem 0 0;
  line-height: 1.4;
}

.agent-onboarding__body {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.agent-onboarding__field {
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
}

.workbench-plain-input.agent-onboarding__input--error {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 20%, transparent);
}

.agent-onboarding__error {
  color: var(--danger);
  font-size: 0.74rem;
  line-height: 1.35;
}

.agent-onboarding__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
}

.harness-sheet--settings {
  margin-top: 3vh;
  width: min(96vw, 46rem);
  max-height: 88vh;
  overflow: auto;
  padding: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-panel);
  box-shadow: 0 22px 50px var(--scrim-bg);
}

.harness-settings-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--border);
  gap: 0.5rem;
}

.harness-settings-title {
  margin: 0;
  font-size: 1rem;
  font-family: var(--font-mono);
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.harness-settings-title__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: var(--accent);
}

.harness-settings-title__text {
  min-width: 0;
}

.harness-settings-close {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.harness-btn-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
}

.harness-btn-inline svg {
  flex-shrink: 0;
  opacity: 0.92;
}

.harness-settings-grid {
  display: grid;
  grid-template-columns: 11.5rem minmax(0, 1fr);
  gap: 0;
  min-height: 14rem;
}

.harness-settings-cats {
  padding: 0.45rem;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  background: var(--bg-raised);
}

.harness-cat-btn {
  padding: 0.45rem 0.55rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  text-align: left;
  font-size: 0.78rem;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.42rem;
  width: 100%;
}

.harness-cat-btn__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  opacity: 0.88;
}

.harness-cat-btn__label {
  min-width: 0;
}

.harness-cat-active .harness-cat-btn__icon {
  color: var(--accent);
  opacity: 1;
}

.harness-cat-btn:hover {
  color: var(--text);
  border-color: var(--border);
}

.harness-cat-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.harness-settings-detail {
  padding: 1.4rem clamp(1rem, 3vw, 1.75rem) 2rem;
  overflow: auto;
}

.harness-pane {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
  max-width: none;
}

.harness-pane-header {
  display: flex;
  align-items: flex-start;
  gap: 0.72rem;
  min-width: 0;
  margin: 0 0 0.1rem;
}

.harness-pane-header__copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  padding-top: 0.08rem;
}

.harness-pane-title {
  margin: 0;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  color: var(--text);
}

.harness-pane-description {
  max-width: 52rem;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.harness-inline-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  width: fit-content;
  max-width: min(54rem, 100%);
  padding: 0.58rem 0.72rem;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius: 7px;
  background: color-mix(in srgb, var(--accent-soft) 36%, var(--bg-panel));
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.harness-inline-notice__icon {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--accent);
  margin-top: 0.04rem;
}

.harness-pane-title__icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background: var(--accent-soft);
  color: var(--accent-cool, var(--accent));
}

.harness-pane-title__icon svg {
  width: 1.05rem;
  height: 1.05rem;
}

.harness-pane-title__text {
  min-width: 0;
}

.harness-pane-subhead {
  margin: 0 0 0.7rem;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  color: var(--text);
}

.harness-pane-subhead__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.4rem;
  background: var(--accent-soft);
  color: var(--accent-cool, var(--accent));
  opacity: 1;
}

.harness-pane-subhead__icon svg {
  width: 0.9rem;
  height: 0.9rem;
}

.harness-pane-subhead__text {
  min-width: 0;
}

.harness-field-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 500;
}

.harness-field-label__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-cool, var(--accent));
  opacity: 0.9;
}

.harness-field-label__icon svg {
  width: 0.92rem;
  height: 0.92rem;
}

.harness-field-label__text {
  min-width: 0;
}

.harness-pane p {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.harness-error-text {
  margin: 0.45rem 0 0;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--text-muted);
  white-space: pre-wrap;
}

.harness-subpane {
  margin: 0;
  padding: 1.05rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--bg-raised, var(--overlay-2));
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

@media (max-width: 720px) {
  .harness-settings-detail {
    padding: 1rem 0.9rem 1.5rem;
  }
  .harness-pane {
    gap: 1rem;
  }
  .harness-subpane {
    padding: 0.85rem 0.9rem;
  }
  .harness-pane-title {
    font-size: 0.86rem;
  }
}

.memory-preset-list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.memory-preset-row,
.memory-preset-add {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  gap: 0.45rem;
  align-items: center;
}

.memory-preset-add {
  margin-top: 0.6rem;
  grid-template-columns: 2.4rem minmax(0, 1fr) auto auto;
}

.memory-preset-row__name {
  min-width: 0;
}

.memory-preset-row__delete {
  width: 2rem;
  justify-content: center;
}

.harness-provider-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.harness-provider-picker {
  position: relative;
}

.harness-provider-trigger {
  width: 100%;
  min-height: 2.35rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text);
  padding: 0.35rem 0.45rem;
  font: inherit;
  cursor: pointer;
}

.harness-provider-trigger:focus,
.harness-provider-option:focus {
  outline: 1px solid var(--accent);
  outline-offset: 1px;
}

.harness-provider-trigger__main,
.harness-provider-option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.harness-provider-trigger__brand,
.harness-provider-option__brand {
  width: 1.2rem;
  height: 1.2rem;
  flex: 0 0 1.2rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--overlay-2);
  overflow: hidden;
}

.harness-provider-trigger__img,
.harness-provider-option__img {
  width: 0.76rem;
  height: 0.76rem;
  display: block;
}

.harness-provider-trigger__caret {
  color: var(--text-muted);
  font-size: 0.72rem;
}

.harness-provider-menu {
  position: absolute;
  z-index: 12;
  top: calc(100% + 0.28rem);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  padding: 0.2rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: var(--bg-raised);
  box-shadow: 0 12px 26px var(--scrim-bg);
}

.harness-provider-option {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 0.45rem 0.5rem;
  text-align: left;
  font: inherit;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.harness-provider-option:hover,
.harness-provider-option--active {
  background: var(--accent-soft);
  color: var(--accent);
}

.harness-locale-picker .harness-provider-trigger__brand,
.harness-locale-picker .harness-provider-option__brand {
  width: 1.42rem;
  height: 1.05rem;
  flex: 0 0 1.42rem;
  border-radius: var(--radius-xs);
}

.harness-locale-picker .harness-provider-trigger__img,
.harness-locale-picker .harness-provider-option__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Thinking / quality level pickers (Lucide icons, not brand logos) */
.harness-level-picker .harness-provider-trigger__brand,
.harness-level-picker .harness-provider-option__brand {
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 1.35rem;
  background: color-mix(in srgb, var(--accent-cool, var(--accent)) 14%, var(--bg-panel));
  border: 1px solid color-mix(in srgb, var(--accent-cool, var(--accent)) 38%, var(--border));
  color: var(--accent-cool, var(--accent));
}

.harness-level-picker .harness-provider-trigger__brand svg,
.harness-level-picker .harness-provider-option__brand svg {
  width: 0.92rem;
  height: 0.92rem;
  stroke: currentColor;
  fill: none;
}

.harness-level-picker .harness-provider-option:hover .harness-provider-option__brand,
.harness-level-picker .harness-provider-option--active .harness-provider-option__brand,
.harness-level-picker .harness-provider-option:focus .harness-provider-option__brand {
  background: color-mix(in srgb, var(--accent) 22%, var(--bg-raised));
  border-color: var(--accent);
  color: var(--text);
}

.harness-stack {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0;
  font-size: 0.82rem;
}

.workbench-plain-textarea {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text);
  padding: 0.45rem;
  width: 100%;
}

.workbench-plain-pre {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  background: var(--scrim-bg);
  border-radius: var(--radius-sm);
  padding: 0.45rem;
  overflow: auto;
  max-height: 12rem;
}

.harness-row-gap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.harness-row-gap--space {
  justify-content: space-between;
}

.harness-hooks {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.harness-hooks__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.harness-hooks__list--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.7rem;
}

.harness-hooks__item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  background: var(--bg-panel);
  transition: border-color 140ms ease, background 140ms ease;
}

.harness-hooks__item:hover {
  border-color: var(--border-strong);
  background: var(--overlay-1);
}

.harness-hooks__main {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.harness-hooks__brand {
  width: 1.85rem;
  height: 1.85rem;
  flex: 0 0 1.85rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--hook-brand-bg);
  border: 1px solid var(--border);
  overflow: hidden;
}

.harness-hooks__img {
  width: 1rem;
  height: 1rem;
  display: block;
}

.harness-hooks__fallback {
  display: grid;
  place-items: center;
  color: var(--hook-brand-fg);
}

.harness-hooks__copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.harness-hooks__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  width: 100%;
}

.harness-hooks__name {
  display: block;
  min-width: 0;
  text-transform: lowercase;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
}

.harness-hooks__status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem;
  border-radius: var(--radius-sm);
  cursor: default;
  border: 1px solid var(--danger-border-soft);
  color: var(--danger-text-soft);
  background: var(--danger-surface);
  font-size: 0.72rem;
}

.harness-hooks__status--ok {
  border-color: var(--success-border);
  color: var(--success-text);
  background: var(--success-surface);
}

.workbench-plain-input {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text);
  padding: 0.55rem 0.7rem;
  width: 100%;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.workbench-plain-input:focus {
  outline: none;
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

select.workbench-plain-input,
select.ws-config__field,
select.ptt-select,
select.mm__sort {
  appearance: none;
  -webkit-appearance: none;
  color-scheme: dark;
  background-color: var(--bg-panel);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 1rem) calc(50% - 0.06rem),
    calc(100% - 0.72rem) calc(50% - 0.06rem);
  background-repeat: no-repeat;
  background-size: 0.28rem 0.28rem, 0.28rem 0.28rem;
  border-color: var(--border);
  border-radius: var(--radius-md);
  padding-right: 2.25rem;
}

select.workbench-plain-input:hover,
select.ws-config__field:hover,
select.ptt-select:hover,
select.mm__sort:hover {
  border-color: var(--border-strong);
}

select.workbench-plain-input:disabled,
select.ws-config__field:disabled,
select.ptt-select:disabled,
select.mm__sort:disabled {
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.72;
}

@media (max-width: 720px) {
  .harness-settings-grid {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .harness-settings-cats {
    flex-direction: row;
    overflow-x: auto;
    white-space: nowrap;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}

@media (prefers-reduced-motion: reduce) {
  .workbench-right-tab,
  .harness-overlay {
    transition: none;
    animation: none;
  }
}

/* --- EULA overlay --- */
.eula-root {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  box-sizing: border-box;
}

.eula-scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim-bg);
  backdrop-filter: blur(4px);
  animation: eula-scrim-enter 0.25s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  .eula-scrim,
  .eula-sheet {
    animation: none;
  }
}

.eula-sheet--compact {
  max-height: min(70vh, 22rem);
}

.eula-sheet {
  position: relative;
  width: min(100%, 40rem);
  max-height: min(88vh, 42rem);
  display: flex;
  flex-direction: column;
  padding: 0;
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  color: var(--text);
  border: 1px solid var(--border-strong);
  box-shadow: 0 12px 40px var(--scrim-bg), 0 0 0 1px var(--overlay-1);
  overflow: hidden;
  animation: eula-sheet-enter 0.28s ease-out both;
}

/* top “title bar” stripe like a panel tab */
.eula-sheet::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--syntax-type),
    var(--accent) 45%,
    var(--syntax-keyword) 100%
  );
  opacity: 0.85;
  pointer-events: none;
}

.eula-scroll {
  position: relative;
  flex: 1;
  overflow: auto;
  padding: 0.875rem 1.25rem 1rem;
}

.eula-scroll.eula-md {
  padding-top: 1.15rem;
}

/* Markdown-rendered EULA (`content/eula/*.md`) */
.eula-md {
  font-variant-ligatures: none;
}

.eula-md > p:first-child {
  margin: 0 0 0.35rem;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--syntax-keyword);
}

.eula-md > p:first-child em {
  font-style: normal;
}

.eula-md h1 {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(1.25rem, 3.2vw, 1.45rem);
  line-height: 1.28;
  letter-spacing: -0.03em;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
  margin-bottom: 0;
}

.eula-md h1 + p {
  margin: 0.55rem 0 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.65;
  font-family: var(--font-mono);
  font-weight: 425;
}

.eula-md hr {
  border: none;
  border-bottom: 1px solid var(--border);
  margin: 1rem 0 1rem;
}

.eula-md h2 {
  margin: 1rem 0 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--syntax-type);
}

.eula-md p {
  margin: 0 0 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.72;
  color: var(--text-muted);
  font-weight: 425;
}

.eula-md strong {
  font-weight: 600;
  color: var(--text);
}

.eula-md blockquote {
  margin: 1rem 0 0;
  padding: 0.65rem 0 0 0.75rem;
  border-left: 2px solid var(--accent);
  border-top: none;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.62;
  color: var(--text-faint);
  background: linear-gradient(
    90deg,
    var(--accent-soft),
    transparent 70%
  );
}

.eula-md blockquote p {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}


.eula-actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
  padding: 0.65rem 1.1rem 0.85rem;
  border-top: 1px solid var(--border);
  background: var(--bg-panel-header);
}

.eula-btn {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 550;
  padding: 0.45rem 0.95rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease,
    color 0.12s ease;
}

.eula-btn:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.eula-btn--ghost {
  color: var(--text-muted);
  background: transparent;
  border-color: var(--border);
}

.eula-btn--ghost:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--bg-raised);
}

.eula-btn--primary {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}

.eula-btn--primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.eula-btn:active {
  opacity: 0.92;
}

/* --- Auth gate & login modal (Better Auth) --- */
.auth-gate-busy {
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-gate-busy-msg {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.auth-login-sheet {
  max-width: min(420px, 94%);
  max-height: min(640px, 88vh);
  padding: 1rem 1.15rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.auth-login-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}

.auth-login-tabs {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.auth-login-tab {
  flex: 1;
  min-width: 0;
}

.auth-login-body {
  min-height: 7rem;
  overflow: auto;
}

.auth-login-form {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.auth-login-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.auth-login-field input {
  font: inherit;
  font-size: 0.95rem;
  padding: 0.45rem 0.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-app);
  color: var(--text);
}

.auth-login-submit {
  margin-top: 0.25rem;
  width: 100%;
  justify-content: center;
}

.auth-login-lead {
  margin: 0 0 0.75rem;
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.45;
}

/* Gerätecode-Darstellung: groß, zentriert, 4-er-Blöcke + Copy. */
.auth-device-code-card {
  position: relative;
  margin: 0.95rem 0 0;
  padding: 2.2rem 1.1rem 1.15rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background:
    radial-gradient(
      ellipse 120% 80% at 50% -20%,
      var(--overlay-2),
      transparent 55%
    ),
    var(--scrim-bg);
  text-align: center;
  box-shadow: inset 0 1px 0 var(--overlay-2);
}

.auth-device-code-copy {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--scrim-bg);
  color: var(--accent);
  cursor: pointer;
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease;
}

.auth-device-code-copy:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-hover);
}

.auth-device-code-copy:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.auth-device-code-label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.auth-device-code-chunks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  margin: 0.75rem 0 0;
  gap: 0;
}

.auth-device-code-chunk {
  font-family: ui-monospace, monospace;
  font-size: clamp(1.85rem, 6vw, 2.5rem);
  font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--text);
  line-height: 1.08;
}

.auth-device-code-sep {
  font-family: ui-monospace, monospace;
  font-weight: 500;
  font-size: clamp(1.2rem, 3.6vw, 1.55rem);
  color: var(--accent);
  opacity: 0.8;
  user-select: none;
  align-self: center;
  margin: 0 0.06em;
}

.auth-device-open-browser {
  margin-top: 1rem !important;
}

.auth-login-polling {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
}

.auth-login-error {
  margin: 0;
  font-size: 0.86rem;
  color: var(--danger);
}

input,
button {
  outline: none;
}

/* --- Workspace terminal grid + wizard --- */
.ws-term-grid {
  /* flex-basis 0 so height comes from the pane, not intrinsic grid content;
     otherwise 1fr rows stay content-sized until something (e.g. sidebar) reflows. */
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  align-content: stretch;
  position: relative;
}

.ws-term-grid > .ws-term-slot {
  min-height: 0;
  height: 100%;
}

.workspace-surface {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.workspace-surface--hidden {
  display: none;
}

.workspace-center-tabs {
  flex: 0 0 auto;
  min-width: 0;
  padding: 0.32rem 0.35rem 0;
  border-bottom: 1px solid var(--overlay-2);
  background:
    linear-gradient(180deg, var(--overlay-1), var(--overlay-2)),
    color-mix(in srgb, var(--bg-raised) 84%, var(--bg-app));
}

.workspace-center-tabs__strip {
  display: flex;
  align-items: center;
  gap: 0.18rem;
  min-width: 0;
  overflow-x: auto;
}

.workspace-center-tab {
  flex: 0 1 13rem;
  min-width: 2.35rem;
  max-width: 15rem;
  height: 32px;
  display: flex;
  align-items: center;
  gap: 0.38rem;
  padding: 0 0.35rem 0 0.55rem;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0;
  overflow: hidden;
}

.workspace-center-tab:hover {
  color: var(--text);
  background: var(--overlay-2);
}

.workspace-center-tab--active {
  color: var(--accent);
  border-color: var(--accent-soft);
  background: var(--accent-soft);
  box-shadow: inset 0 1px 0 var(--overlay-1);
}

.workspace-center-tab__icon,
.workspace-center-tab__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.workspace-center-tab__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-center-tab__close {
  width: 18px;
  height: 18px;
  margin-left: auto;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
}

.workspace-center-tab__close:hover,
.workspace-center-tab__close:focus-visible {
  color: var(--text);
  background: var(--overlay-3);
}

.workspace-center-tab-body {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  position: relative;
  display: flex;
}

.workspace-center-tab-body--split {
  gap: 4px;
}

.workspace-center-split-resizer {
  position: relative;
  z-index: 2;
  flex: 0 0 7px;
  align-self: stretch;
  margin: 0 -2px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: col-resize;
}

.workspace-center-split-resizer span {
  position: absolute;
  inset: 0 3px;
  background: var(--border);
  opacity: 0.45;
  transition: background 120ms ease, opacity 120ms ease;
}

.workspace-center-split-resizer:hover span,
.workspace-center-split-resizer--active span {
  background: color-mix(in srgb, var(--border-strong) 78%, var(--accent) 18%);
  opacity: 0.64;
}

.workspace-center-split-shield {
  position: absolute;
  inset: 0;
  z-index: 20;
  cursor: col-resize;
  background: transparent;
}

.workspace-center-panel {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.workspace-center-panel.workspace-center-panel--hidden {
  display: none;
}

.workspace-center-panel--scroll {
  overflow: auto;
}

.workspace-center-panel--kanban {
  overflow: hidden;
}

.workspace-terminal-board--canvas {
  overflow: auto;
  background:
    radial-gradient(circle at 50% 12%, var(--overlay-2), transparent 34%),
    var(--bg-app);
}

.workspace-terminal-board--swarm {
  flex: 0 0 0 !important;
  width: 0;
  min-width: 0;
  max-width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.ws-term-grid--canvas {
  min-width: 1280px;
  min-height: 860px;
  overflow: hidden;
}

.ws-term-slot--canvas-node {
  z-index: 3;
  padding-top: 26px;
  border: 1px solid color-mix(in srgb, var(--border-strong) 72%, var(--accent) 18%);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--bg-panel) 92%, var(--accent-soft));
  box-shadow:
    0 18px 48px var(--scrim-bg),
    0 0 0 1px var(--overlay-1),
    0 0 26px color-mix(in srgb, var(--accent-soft) 54%, transparent);
}

.ws-canvas-node__drag {
  position: absolute;
  inset: 0 2.4rem auto 0.55rem;
  height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--text-muted);
  font-size: 0.66rem;
  font-weight: 700;
  cursor: grab;
  z-index: 7;
}

.ws-canvas-node__drag:active {
  cursor: grabbing;
}

.ws-canvas-node__resize {
  position: absolute;
  right: 0.28rem;
  bottom: 0.28rem;
  z-index: 9;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  color: var(--text-muted);
  cursor: nwse-resize;
}

.ws-canvas-node__resize:hover {
  border-color: var(--accent);
  color: var(--text-bright);
  background: var(--accent-soft);
}

.ws-canvas-pane-wrap {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
}

.ws-canvas-port {
  position: absolute;
  z-index: 8;
  height: 18px;
  min-width: 18px;
  padding: 0 0.28rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--bg-raised);
  color: var(--text-muted);
  font: inherit;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  cursor: crosshair;
  box-shadow: 0 0 0 2px var(--bg-panel);
}

.ws-canvas-port:hover,
.ws-canvas-port--active {
  color: var(--text-bright);
  border-color: var(--accent);
  background: var(--accent-soft);
}

.ws-canvas-port--stdin {
  left: -0.85rem;
  top: calc(50% - 9px);
}

.ws-canvas-port--stdout {
  right: -0.85rem;
  top: calc(50% - 9px);
}

.ws-canvas-port--pane {
  top: 1.8rem;
}

.ws-canvas-port--agent-command {
  right: -1.15rem;
  top: calc(50% - 9px);
}

.ws-canvas-port--agent-observe {
  left: -1.15rem;
  top: calc(50% - 9px);
}

.ws-canvas-edges,
.workspace-swarm__edges {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}

.ws-canvas-edge,
.workspace-swarm__edge {
  fill: none;
  stroke: color-mix(in srgb, var(--accent) 54%, var(--border-strong));
  stroke-width: 2px;
  stroke-linecap: round;
  opacity: 0.64;
}

.ws-canvas-edge--auto,
.workspace-swarm__edge {
  stroke-dasharray: 8 10;
  opacity: 0.42;
}

.ws-canvas-edge--raw {
  stroke: color-mix(in srgb, var(--warning) 64%, var(--accent));
}

.ws-canvas-edge--structured {
  stroke: color-mix(in srgb, var(--accent-cool) 72%, var(--accent));
}

.ws-canvas-edge-actions {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}

.ws-canvas-edge-chip {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  padding: 0.18rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-panel);
  box-shadow: 0 12px 28px var(--scrim-bg);
  pointer-events: auto;
}

.ws-canvas-edge-chip button,
.workspace-swarm__inspector button {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--overlay-2);
  color: var(--text);
  font: inherit;
  font-size: 0.64rem;
  font-weight: 800;
  cursor: pointer;
}

.ws-canvas-agent-hub {
  --role-accent: var(--accent);
  position: absolute;
  left: 500px;
  top: 54px;
  z-index: 4;
  width: 176px;
  min-height: 128px;
  display: grid;
  place-items: center;
  gap: 0.45rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--role-accent) 70%, var(--border));
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--bg-panel) 84%, var(--role-accent) 10%);
  box-shadow:
    0 22px 60px var(--scrim-bg),
    0 0 42px color-mix(in srgb, var(--role-accent) 26%, transparent);
  color: var(--text);
}

.ws-canvas-agent-hub__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--role-accent) 18%, var(--bg-raised));
  color: var(--role-accent);
}

.ws-canvas-agent-hub__text {
  min-width: 0;
  display: grid;
  gap: 0.12rem;
  text-align: center;
}

.ws-canvas-agent-hub__text strong,
.workspace-swarm__hub strong,
.workspace-swarm__node strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-canvas-agent-hub__text span,
.workspace-swarm__hub span,
.workspace-swarm__node span {
  color: var(--text-muted);
  font-size: 0.68rem;
}

.ws-canvas-agent-hub__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem;
}

.ws-canvas-agent-hub__actions button {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--overlay-2);
  color: var(--text);
  font: inherit;
  font-size: 0.62rem;
  font-weight: 800;
  cursor: pointer;
}

.ws-canvas-agent-hub__actions button:hover {
  border-color: var(--role-accent);
  color: var(--text-bright);
  background: color-mix(in srgb, var(--role-accent) 16%, var(--overlay-2));
}

.workspace-swarm-panel {
  overflow: hidden;
  background: var(--bg-app);
}

.workspace-swarm {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 44%, var(--overlay-3), transparent 28%),
    var(--bg-app);
}

.workspace-swarm__hub {
  --role-accent: var(--accent);
  position: absolute;
  left: 50%;
  top: 43%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  color: var(--text);
  cursor: grab;
  user-select: none;
}

.workspace-swarm__hub:active,
.workspace-swarm__node:active {
  cursor: grabbing;
}

.workspace-swarm__hub-core {
  position: relative;
  width: 104px;
  height: 88px;
  display: grid;
  place-items: center;
  border: 2px solid color-mix(in srgb, var(--role-accent) 76%, var(--border));
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--bg-panel) 86%, var(--role-accent) 10%);
  color: var(--role-accent);
  box-shadow:
    0 20px 52px var(--scrim-bg),
    0 0 48px color-mix(in srgb, var(--role-accent) 24%, transparent);
}

.workspace-swarm__node {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 4;
  width: 130px;
  display: grid;
  justify-items: center;
  gap: 0.3rem;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: grab;
  user-select: none;
}

.workspace-swarm__node-icon {
  position: relative;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-xl);
  background: var(--bg-panel);
  color: var(--text-muted);
  box-shadow: 0 12px 32px var(--scrim-bg);
}

.workspace-swarm__node--running .workspace-swarm__node-icon,
.workspace-swarm__node--selected .workspace-swarm__node-icon {
  border-color: color-mix(in srgb, var(--success) 70%, var(--accent));
  color: var(--success);
  box-shadow:
    0 14px 34px var(--scrim-bg),
    0 0 28px color-mix(in srgb, var(--success) 24%, transparent);
}

.workspace-swarm__led {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-circle);
  background: var(--success);
  box-shadow: 0 0 0 2px var(--bg-panel), 0 0 16px var(--success);
}

.workspace-swarm__inspector {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
  z-index: 5;
  width: min(560px, calc(100% - 2rem));
  min-height: 156px;
  display: grid;
  gap: 0.65rem;
  padding: 0.85rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  box-shadow: 0 22px 60px var(--scrim-bg);
}

.workspace-swarm__inspector header,
.workspace-swarm__inspector footer {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.workspace-swarm__inspector pre {
  min-height: 58px;
  max-height: 96px;
  margin: 0;
  overflow: auto;
  padding: 0.55rem;
  border-radius: var(--radius-md);
  background: var(--bg-app);
  color: var(--text);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 0.68rem;
  line-height: 1.38;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 2;
}

.workspace-swarm__badge {
  padding: 0.22rem 0.45rem;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.64rem;
  font-weight: 900;
}

.workspace-swarm__danger {
  color: var(--danger) !important;
}

.workspace-swarm__empty {
  align-self: center;
  justify-self: center;
  color: var(--text-muted);
}

.harness-settings-grid--docked {
  flex: 1 1 0;
  min-height: 0;
  height: 100%;
  /* Same top glow as the Create-Workspace screen (`.ws-config`) over the
     app base, so Settings shares the workbench backdrop. Theme-token based. */
  background:
    radial-gradient(ellipse at top, var(--overlay-1), transparent 60%),
    var(--bg-app);
}

.harness-settings-grid--docked .harness-settings-detail {
  min-height: 0;
}

.file-preview {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--overlay-2);
}

.file-preview__header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.65rem;
  min-height: 42px;
  padding: 0.45rem 0.65rem;
  border-bottom: 1px solid var(--border);
  background: var(--scrim-bg);
}

.file-preview__title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text);
}

.file-preview__title span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-preview__icon {
  flex-shrink: 0;
  color: var(--accent);
}

.file-preview__status,
.file-preview__notice {
  margin: 0.8rem;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.file-preview__status--error {
  color: var(--text-muted);
}

.file-preview__notice {
  flex: 0 0 auto;
  margin-bottom: 0;
  padding: 0.48rem 0.58rem;
  border: 1px solid var(--overlay-2);
  border-radius: var(--radius-sm);
  background: var(--overlay-2);
  color: var(--text-muted);
}

.file-preview__content {
  flex: 1 1 0;
  min-height: 0;
  margin: 0;
  padding: 0.75rem 0.85rem;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.55;
  white-space: pre;
  color: var(--text-muted);
  background: transparent;
}

.file-preview__title-block {
  flex: 1 1 16rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

.file-preview__name {
  font-weight: 500;
  color: var(--text);
}

.file-preview__meta {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
}

.file-preview__path {
  min-width: 0;
  max-width: min(32rem, 100%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.78;
}

.file-preview__meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.05rem 0.42rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--overlay-1, transparent);
}

.file-preview__meta-label {
  opacity: 0.7;
}

.file-preview__meta-value {
  color: var(--text);
}

.file-preview__actions {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.file-preview__actions .workbench-mini-btn {
  min-width: 0;
  flex: 0 1 auto;
}

.file-preview__actions .harness-btn-inline {
  min-width: 0;
}

.file-preview__actions .harness-btn-inline span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-preview__stage {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 0.85rem;
}

@media (max-width: 760px) {
  .file-preview__header {
    align-items: stretch;
    gap: 0.55rem;
  }

  .file-preview__title-block,
  .file-preview__actions {
    flex-basis: 100%;
  }

  .file-preview__actions {
    justify-content: flex-start;
  }

  .file-preview__actions .workbench-mini-btn {
    flex: 1 1 8.5rem;
  }
}

@media (max-width: 520px) {
  .file-preview__header {
    padding: 0.5rem;
  }

  .file-preview__meta {
    gap: 0.35rem;
  }

  .file-preview__meta-chip {
    max-width: 100%;
  }

  .file-preview__actions .workbench-mini-btn {
    flex-basis: calc(50% - 0.25rem);
    padding-inline: 0.5rem;
  }
}

.file-preview__stage--text,
.file-preview__stage--code,
.file-preview__stage--markdown,
.file-preview__stage--mermaid {
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  flex-direction: column;
}

.file-preview__stage--text,
.file-preview__stage--code {
  padding: 0;
}

/* --- Code preview + editor: CodeMirror 6 host (its own gutter, folding,
   syntax highlighting and selection; preview is the same editor, read-only) --- */

.code-view__cm {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.code-view__cm .cm-editor {
  height: 100%;
}

.code-view__cm .cm-editor.cm-focused {
  outline: none;
}

/* --- Header editor chips + dirty marker --- */

.file-preview__dirty-dot {
  margin-left: 0.35rem;
  color: var(--accent);
  font-size: 0.7rem;
  line-height: 1;
}

.file-preview__state-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.05rem 0.4rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  color: var(--text-muted);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.file-preview__state-chip--edit {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--accent);
}

.file-preview__state-chip--dirty {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--accent);
}

.code-context-menu {
  position: fixed;
  z-index: 1100;
  min-width: 16rem;
  max-width: 22rem;
  padding: 0.25rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-panel);
  box-shadow: 0 16px 40px var(--scrim-bg);
  font-size: 0.78rem;
  color: var(--text);
  user-select: none;
  -webkit-user-select: none;
}

.code-context-menu__section + .code-context-menu__section {
  margin-top: 0.25rem;
  padding-top: 0.25rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}

.code-context-menu__section-head {
  padding: 0.3rem 0.55rem 0.15rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.code-context-menu__empty {
  padding: 0.4rem 0.55rem;
  color: var(--text-muted);
  font-style: italic;
}

.code-context-menu__list,
.code-context-menu__sublist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.code-context-menu__group + .code-context-menu__group {
  margin-top: 0.15rem;
}

.code-context-menu__group-head {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.55rem 0.1rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text);
  opacity: 0.75;
}

.code-context-menu__badge {
  padding: 0 0.32rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent);
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.code-context-menu__sublist {
  padding-left: 0.5rem;
}

.code-context-menu__item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.55rem;
  text-align: left;
  font: inherit;
  font-size: 0.78rem;
  color: var(--text);
  background: transparent;
  cursor: pointer;
}

.code-context-menu__item:hover,
.code-context-menu__item:focus-visible {
  background: var(--overlay-2);
}

.terminal-context-menu {
  position: fixed;
  z-index: 1100;
  min-width: 11rem;
  padding: 0.25rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-panel);
  box-shadow: 0 16px 40px var(--scrim-bg);
  font-size: 0.78rem;
  color: var(--text);
  user-select: none;
  -webkit-user-select: none;
}

.terminal-context-menu__item {
  display: flex;
  align-items: center;
  width: 100%;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.55rem;
  text-align: left;
  font: inherit;
  font-size: 0.78rem;
  color: var(--text);
  background: transparent;
  cursor: pointer;
}

.terminal-context-menu__item:hover:not(:disabled),
.terminal-context-menu__item:focus-visible:not(:disabled) {
  background: var(--overlay-2);
}

.terminal-context-menu__item:disabled {
  opacity: 0.45;
  cursor: default;
}

.file-preview__image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 4px 24px var(--scrim-bg));
}

.file-preview__image-svg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  filter: drop-shadow(0 4px 24px var(--scrim-bg));
}

.file-preview__image-svg svg {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

.file-preview__video {
  max-width: 100%;
  max-height: 100%;
  background: var(--term-bg);
  border-radius: var(--radius-md);
  box-shadow: 0 6px 28px var(--scrim-bg);
}

.file-preview__markdown {
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
  padding: 1rem 1.25rem 1.75rem;
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--text);
}

/* Policy doc hero banner (LICENSE / CONTRIBUTING / SECURITY / …)
   Sits above the markdown body. The accent strip + tinted background
   makes the document's role obvious at a glance. */
.file-preview__stage--policy {
  --policy-accent: var(--accent);
  --policy-accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --policy-accent-strong: color-mix(in srgb, var(--accent) 70%, transparent);
}
.file-preview__stage--policy-license { --policy-accent: var(--success, var(--accent)); }
.file-preview__stage--policy-contributing { --policy-accent: var(--accent); }
.file-preview__stage--policy-contributors { --policy-accent: color-mix(in srgb, var(--accent) 80%, var(--text)); }
.file-preview__stage--policy-code-of-conduct { --policy-accent: var(--info, var(--accent)); }
.file-preview__stage--policy-security { --policy-accent: var(--danger); }
.file-preview__stage--policy-authors { --policy-accent: var(--accent); }
.file-preview__stage--policy-changelog { --policy-accent: var(--accent); }
.file-preview__stage--policy-readme { --policy-accent: var(--accent); }
.file-preview__stage--policy-support { --policy-accent: var(--info, var(--accent)); }
.file-preview__stage--policy-agents { --policy-accent: var(--accent); }
.file-preview__stage--policy-claude { --policy-accent: color-mix(in srgb, var(--agent-claude) 55%, var(--accent)); }
.file-preview__stage--policy-codex { --policy-accent: var(--accent); }
.file-preview__stage--policy-gemini { --policy-accent: color-mix(in srgb, var(--agent-gemini) 45%, var(--accent)); }

.file-preview__policy-hero {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0;
  padding: 0.95rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--policy-accent) 18%, transparent) 0%,
      color-mix(in srgb, var(--policy-accent) 6%, transparent) 100%
    ),
    var(--bg-panel-header);
  border-left: 3px solid var(--policy-accent);
}

.file-preview__policy-hero__icon {
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--policy-accent) 22%, var(--bg-panel));
  color: var(--policy-accent);
  border: 1px solid color-mix(in srgb, var(--policy-accent) 50%, transparent);
}

.file-preview__policy-hero__text {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.file-preview__policy-hero__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: var(--text);
  line-height: 1.2;
}

.file-preview__policy-hero__subtitle {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--text-muted);
}

/* Slightly tighter top padding on the markdown body when a hero is present
   so the title/subtitle visually anchor to the body content. */
.file-preview__stage--policy .file-preview__markdown {
  padding-top: 0.85rem;
}

.file-preview__markdown h1,
.file-preview__markdown h2,
.file-preview__markdown h3,
.file-preview__markdown h4,
.file-preview__markdown h5,
.file-preview__markdown h6 {
  margin-top: 1.4em;
  margin-bottom: 0.5em;
  line-height: 1.25;
}

.file-preview__markdown h1 { font-size: 1.6em; }
.file-preview__markdown h2 { font-size: 1.35em; }
.file-preview__markdown h3 { font-size: 1.15em; }
.file-preview__markdown h4 { font-size: 1.05em; }

.file-preview__markdown p,
.file-preview__markdown ul,
.file-preview__markdown ol,
.file-preview__markdown blockquote {
  margin: 0.55em 0;
}

.file-preview__markdown ul,
.file-preview__markdown ol {
  padding-left: 1.4em;
}

.file-preview__markdown a {
  color: var(--accent);
  text-decoration: underline;
}

.file-preview__markdown code {
  font-family: var(--font-mono);
  background: var(--overlay-2);
  padding: 0.08em 0.32em;
  border-radius: var(--radius-sm);
  font-size: 0.88em;
}

.file-preview__markdown pre {
  background: var(--overlay-2);
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-md);
  overflow: auto;
  font-size: 0.82em;
  line-height: 1.5;
}

.file-preview__markdown pre code {
  background: transparent;
  padding: 0;
  border-radius: 0;
}

.file-preview__markdown blockquote {
  border-left: 3px solid var(--accent);
  padding: 0.2em 0.8em;
  color: var(--text-muted);
  background: var(--overlay-1, transparent);
}

.file-preview__markdown table {
  border-collapse: collapse;
  margin: 0.8em 0;
  font-size: 0.86em;
}

.file-preview__markdown th,
.file-preview__markdown td {
  border: 1px solid var(--border);
  padding: 0.32em 0.55em;
}

.file-preview__markdown img {
  max-width: 100%;
  height: auto;
}

.file-preview__markdown .file-preview__mermaid-inline {
  background: transparent;
  padding: 0.4rem;
  margin: 0.8em 0;
  text-align: center;
}

.file-preview__mermaid-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100%;
  padding: 1.25rem;
}

.file-preview__mermaid-node {
  background: transparent;
  font-family: var(--font-mono);
}

.file-preview__notice--error {
  color: var(--danger);
  border-color: var(--danger);
}

.ws-term-grid__resize {
  position: absolute;
  z-index: 6;
  border: 0;
  padding: 0;
  background: transparent;
  opacity: 0;
}

.ws-term-grid__resize:hover,
.ws-term-grid__resize:focus-visible {
  opacity: 1;
  background: color-mix(in srgb, var(--accent-soft) 34%, transparent);
}

.ws-term-grid__resize--col {
  top: 0;
  bottom: 0;
  width: 10px;
  margin-left: -5px;
  cursor: col-resize;
}

.ws-term-grid__resize--row {
  left: 0;
  right: 0;
  height: 10px;
  margin-top: -5px;
  cursor: row-resize;
}

.ws-term-slot {
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-self: stretch;
}

.ws-term-pane-grid {
  min-width: 0;
  min-height: 0;
}

.ws-term-slot--hidden {
  display: none;
}

/* Three slot DnD states mirror EB's TerminalSlotView:
   --drag-source  → the slot being picked up (dimmed, dashed accent)
   --drag-potential → idle peers in the same workspace during a drag
   --drag-over    → the hover target (ring + slight scale-up + banner) */
.ws-term-slot {
  position: relative;
  transition: transform 150ms ease, box-shadow 150ms ease, opacity 150ms ease;
}

.ws-term-slot--drag-source {
  opacity: 0.4;
  transform: scale(0.98);
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
}

.ws-term-slot--drag-potential {
  outline: 1px dashed color-mix(in srgb, var(--accent) 30%, transparent);
  outline-offset: -1px;
  background-color: color-mix(in srgb, var(--accent) 4%, transparent);
}

.ws-term-slot--drag-over {
  transform: scale(1.01);
  outline: 2px dashed color-mix(in srgb, var(--accent) 80%, transparent);
  outline-offset: -1px;
  box-shadow:
    0 0 24px 0 color-mix(in srgb, var(--accent) 20%, transparent);
}

.ws-term-grid--drag-active .ws-term-slot:not(.ws-term-slot--drag-source) .ws-term-cell__xterm {
  pointer-events: none;
}

.ws-term-grid--drag-active {
  overflow: visible;
}

.ws-term-slot__drop-hint {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 90%, var(--bg-panel));
  color: var(--bg-panel);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  pointer-events: none;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent);
  z-index: 6;
}

/* Cursor-following preview card (EB's DragOverlay equivalent). Always
   rendered at the WorkbenchShell layer so it floats above sidebar +
   right panel without clipping. */
.ws-term-drag-preview {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--bg-raised) 92%, transparent);
  border: 1px solid var(--accent);
  box-shadow:
    0 12px 32px color-mix(in srgb, var(--accent) 25%, var(--scrim-bg)),
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
  backdrop-filter: blur(6px);
  transform: rotate(-1.5deg);
  overflow: hidden;
}

.ws-term-drag-preview--dropping {
  transition: opacity 180ms ease, transform 180ms ease;
  opacity: 0;
  transform: rotate(0deg) scale(0.96);
}

.ws-term-drag-preview__head {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.ws-term-drag-preview__grip {
  color: var(--accent);
  display: inline-flex;
}

.ws-term-drag-preview__title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  color: var(--text);
}

.ws-term-drag-preview__badge {
  flex-shrink: 0;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--accent);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

.ws-term-drag-preview__body {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* Cursor-following preview for file / diff / commit drags into the agent
   context drop zone. Mirrors .ws-term-drag-preview but with a per-kind accent
   so File, Diff and Commit each read at a glance. --ctx-accent is overridden
   per variant below. */
.context-drag-preview {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 9px 11px;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--bg-raised) 92%, transparent);
  border: 1px solid var(--ctx-accent, var(--accent));
  box-shadow:
    0 12px 32px color-mix(in srgb, var(--ctx-accent, var(--accent)) 25%, var(--scrim-bg)),
    inset 0 0 0 1px color-mix(in srgb, var(--ctx-accent, var(--accent)) 30%, transparent);
  backdrop-filter: blur(6px);
  transform: rotate(-1.5deg);
  overflow: hidden;
}

.context-drag-preview--file {
  --ctx-accent: var(--accent);
}

.context-drag-preview--folder {
  --ctx-accent: var(--success, #4a9d6a);
}

.context-drag-preview--diff {
  --ctx-accent: var(--warning, #d6a02a);
}

.context-drag-preview--commit {
  --ctx-accent: var(--info, #8b7bd8);
}

.context-drag-preview__head {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.context-drag-preview__icon {
  color: var(--ctx-accent, var(--accent));
  display: inline-flex;
  flex-shrink: 0;
}

.context-drag-preview__title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  color: var(--text);
}

.context-drag-preview__badge {
  flex-shrink: 0;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--ctx-accent, var(--accent));
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--ctx-accent, var(--accent)) 18%, transparent);
}

.context-drag-preview__body {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.context-drag-preview__subtitle {
  font-size: 0.68rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Document-level cursor while a slot drag is in flight. EB sets
   document.body.style.cursor = 'grabbing'; we do the same via a class
   so the user gets a consistent cue across the whole window. */
body.blxcode-dragging-terminal,
body.blxcode-dragging-terminal * {
  cursor: grabbing !important;
}

.ws-term-cell__head--draggable {
  cursor: grab;
}

.ws-term-cell__head--draggable:active {
  cursor: grabbing;
}

.ws-term-cell__drag-handle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
  opacity: 0.55;
  color: var(--text-muted);
  cursor: grab;
  pointer-events: none;
  z-index: 1;
}

.ws-term-cell__drag-handle:active {
  cursor: grabbing;
}

.ws-term-cell__head--draggable:hover .ws-term-cell__drag-handle {
  opacity: 0.9;
  color: var(--text);
}

.ws-term-cell {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(180deg, var(--bg-panel), var(--bg-raised)),
    var(--bg-panel);
  backdrop-filter: blur(8px);
  overflow: hidden;
}

.ws-term-cell--active {
  border-color: var(--accent);
  box-shadow:
    inset 0 0 0 1px var(--accent-soft),
    0 0 0 1px var(--accent-soft);
}

.ws-term-cell--active.ws-term-cell--agent-claude {
  border-color: color-mix(in srgb, var(--agent-claude) 92%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--agent-claude) 42%, transparent),
    0 0 0 1px color-mix(in srgb, var(--agent-claude) 20%, transparent);
}

.ws-term-cell--active.ws-term-cell--agent-codex {
  border-color: color-mix(in srgb, var(--agent-codex) 92%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--agent-codex) 42%, transparent),
    0 0 0 1px color-mix(in srgb, var(--agent-codex) 20%, transparent);
}

.ws-term-cell--active.ws-term-cell--agent-gemini {
  border-color: color-mix(in srgb, var(--agent-gemini) 92%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--agent-gemini) 42%, transparent),
    0 0 0 1px color-mix(in srgb, var(--agent-gemini) 20%, transparent);
}

.ws-term-cell--active.ws-term-cell--agent-opencode {
  border-color: color-mix(in srgb, var(--agent-copilot) 92%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--agent-copilot) 42%, transparent),
    0 0 0 1px color-mix(in srgb, var(--agent-copilot) 20%, transparent);
}

.ws-term-cell--active.ws-term-cell--agent-cursor {
  border-color: color-mix(in srgb, var(--agent-cursor) 92%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--agent-cursor) 42%, transparent),
    0 0 0 1px color-mix(in srgb, var(--agent-cursor) 20%, transparent);
}

.ws-term-cell--active .ws-term-cell__head {
  border-color: var(--accent-soft);
  background: var(--bg-panel-header);
}

.ws-term-cell--active.ws-term-cell--agent-claude .ws-term-cell__head {
  border-color: color-mix(in srgb, var(--agent-claude) 55%, transparent);
}

.ws-term-cell--active.ws-term-cell--agent-codex .ws-term-cell__head {
  border-color: color-mix(in srgb, var(--agent-codex) 55%, transparent);
}

.ws-term-cell--active.ws-term-cell--agent-gemini .ws-term-cell__head {
  border-color: color-mix(in srgb, var(--agent-gemini) 55%, transparent);
}

.ws-term-cell--active.ws-term-cell--agent-opencode .ws-term-cell__head {
  border-color: color-mix(in srgb, var(--agent-copilot) 55%, transparent);
}

.ws-term-cell--active.ws-term-cell--agent-cursor .ws-term-cell__head {
  border-color: color-mix(in srgb, var(--agent-cursor) 55%, transparent);
}

/* Pulse the titlebar of any terminal that has unread notifications so the
 * user can see, before clicking, which slot the notify came from. Click
 * (focus) the cell to acknowledge — the unread is then cleared and this
 * class drops automatically. The pulse keeps running even on the focused
 * cell for the brief moment between disk-clear write and the next poll,
 * but the focused-and-unread combination is also covered by the
 * `--active` styles above which take priority on `border-color`. */
.ws-term-cell--has-unread .ws-term-cell__head {
  border-color: var(--text-muted);
  background: var(--overlay-2);
  animation: ws-term-head-pulse 1.4s ease-in-out infinite;
}

.ws-term-cell--has-unread.ws-term-cell--agent-claude .ws-term-cell__head {
  border-color: var(--text-muted);
  box-shadow: 0 0 0 1px var(--overlay-2);
}

.ws-term-cell--has-unread.ws-term-cell--agent-codex .ws-term-cell__head {
  border-color: var(--text-muted);
  box-shadow: 0 0 0 1px var(--overlay-2);
}

.ws-term-cell--has-unread.ws-term-cell--agent-gemini .ws-term-cell__head {
  border-color: var(--text-muted);
  box-shadow: 0 0 0 1px var(--overlay-2);
}

.ws-term-cell--has-unread.ws-term-cell--agent-opencode .ws-term-cell__head {
  border-color: var(--text-muted);
  box-shadow: 0 0 0 1px var(--overlay-2);
}

.ws-term-cell--has-unread.ws-term-cell--agent-cursor .ws-term-cell__head {
  border-color: var(--text-muted);
  box-shadow: 0 0 0 1px var(--overlay-2);
}

@keyframes ws-term-head-pulse {
  0%, 100% {
    box-shadow: 0 1px 3px var(--scrim-bg), 0 0 0 1px var(--overlay-2);
  }
  50% {
    box-shadow: 0 1px 3px var(--scrim-bg), 0 0 0 3px var(--overlay-2);
  }
}

.ws-term-cell__head {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 8px 8px 4px;
  min-height: 2.1rem;
  padding: 0.4rem 0.7rem 0.4rem 0.95rem;
  font-size: 0.72rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--overlay-2);
  box-shadow: 0 1px 3px var(--scrim-bg);
  user-select: none;
}

.ws-term-cell__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 650;
  letter-spacing: 0;
  color: var(--text);
}

.ws-term-cell__badge {
  flex-shrink: 0;
  padding: 0.05rem 0.35rem;
  border-radius: var(--radius-sm);
  font-size: 0.62rem;
  background: var(--overlay-2);
  color: var(--text-muted);
}

.ws-term-cell__tool {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0;
  color: var(--text-faint);
  background: transparent;
  cursor: pointer;
}

.ws-term-cell__tool:hover,
.ws-term-cell__tool:focus-visible {
  color: var(--text);
  border-color: var(--border);
  background: var(--overlay-2);
}

.ws-term-cell__tool--danger:hover,
.ws-term-cell__tool--danger:focus-visible {
  color: var(--danger);
  border-color: var(--text-muted);
  background: var(--danger-soft);
}

.terminal-usage {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
}

.terminal-usage__button--active {
  color: var(--text);
  border-color: var(--border);
  background: var(--overlay-2);
}

.terminal-usage__popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1200;
  width: min(21rem, calc(100vw - 2rem));
  padding: 0.72rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-panel);
  box-shadow: 0 18px 48px var(--scrim-bg);
  color: var(--text);
  user-select: none;
  -webkit-user-select: none;
}

.terminal-usage__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.65rem;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.08em;
}

.terminal-usage__refresh {
  display: inline-grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
}

.terminal-usage__refresh:hover:not(:disabled),
.terminal-usage__refresh:focus-visible:not(:disabled) {
  color: var(--text);
  border-color: var(--border);
  background: var(--overlay-2);
}

.terminal-usage__refresh:disabled {
  opacity: 0.45;
  cursor: default;
}

.terminal-usage__provider {
  margin: -0.25rem 0 0.55rem;
  color: var(--text-faint);
  font-size: 0.66rem;
}

.terminal-usage__rows {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.terminal-usage__row {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.terminal-usage__row-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  color: var(--text-muted);
  font-size: 0.78rem;
}

.terminal-usage__row-top span:last-child {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.terminal-usage__meter {
  overflow: hidden;
  height: 0.32rem;
  border-radius: var(--radius-pill);
  background: var(--overlay-5);
}

.terminal-usage__meter-fill {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--agent-claude), var(--accent));
}

.ws-term-cell--agent-codex .terminal-usage__meter-fill {
  background: linear-gradient(90deg, var(--agent-codex), var(--accent-cool));
}

.ws-term-cell--agent-gemini .terminal-usage__meter-fill {
  background: linear-gradient(90deg, var(--agent-gemini), var(--accent));
}

.terminal-usage__reset,
.terminal-usage__updated,
.terminal-usage__status {
  color: var(--text-faint);
  font-size: 0.68rem;
}

.terminal-usage__status {
  padding: 0.2rem 0 0.35rem;
}

.terminal-usage__updated {
  margin-top: 0.7rem;
}

.ws-term-cell__slot {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  min-width: 1.45rem;
  height: 1.05rem;
  padding: 0 0.22rem;
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.05rem;
  color: var(--text);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent-soft) 72%, transparent), transparent 74%),
    color-mix(in srgb, var(--bg-panel-header) 82%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 7%, transparent);
  font-variant-numeric: tabular-nums;
  cursor: text;
  max-width: 9rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ws-term-cell__slot-edit {
  flex-shrink: 0;
  min-width: 4rem;
  max-width: 9rem;
  height: 1.05rem;
  padding: 0 0.22rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.05rem;
  color: var(--text-bright);
  background: var(--bg-panel-header);
  outline: none;
}

.ws-term-cell__boot-fail {
  margin: 0;
  padding: 0.35rem 0.5rem;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--danger);
  border-bottom: 1px solid var(--border);
  background: var(--overlay-2);
}

.ws-term-cell__xterm {
  flex: 1;
  min-height: 0;
  min-width: 0;
  margin: 0 8px 8px;
  border-radius: var(--radius-sm);
  background: var(--overlay-2);
  overflow: hidden;
}

.ws-term-cell__xterm .xterm {
  height: 100%;
  width: 100%;
  background: var(--term-surface) !important;
}

.ws-term-cell__xterm .xterm-viewport,
.ws-term-cell__xterm .xterm-screen {
  width: 100% !important;
  background: transparent !important;
}


.harness-sheet--wizard {
  margin-top: 3vh;
  width: min(96vw, 52rem);
  max-height: 90vh;
  overflow: auto;
  padding: 1rem 1.1rem 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: var(--bg-panel);
  box-shadow: 0 22px 50px var(--scrim-bg);
}

/* Close-terminals confirmation dialog — styled to match the right panel
   workbench design (raised body, overlay-2 header, mono headings, accent
   glow on the primary action, danger-tinted alert glyph). */
.harness-sheet--close-terminals {
  margin-top: 8vh;
  width: min(92vw, 27rem);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-raised);
  box-shadow:
    0 24px 70px var(--scrim-bg),
    0 0 0 1px var(--overlay-1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.blx-close-terminals__head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0.42rem 0.85rem;
  border-bottom: 1px solid var(--border);
  background: var(--overlay-2);
}

.blx-close-terminals__head .harness-settings-title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.blx-close-terminals__head .harness-settings-title__icon {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-sm);
  color: var(--danger);
  background: var(--danger-soft);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
}

.blx-close-terminals__body {
  margin: 0;
  padding: 1rem 1rem 1.1rem;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg-raised);
}

.blx-close-terminals__actions {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.85rem;
  border-top: 1px solid var(--border);
  background: var(--overlay-2);
}

.blx-close-terminals__actions .workbench-mini-btn--primary:not(:disabled) {
  box-shadow:
    inset 0 0 0 1px var(--accent-soft),
    0 0 22px var(--accent-soft);
}

.wz-head {
  margin-bottom: 0.75rem;
}

.wz-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
}

.wz-sub {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.wz-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 720px) {
  .wz-layout {
    grid-template-columns: 1fr;
  }
}

.wz-label {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin: 0.5rem 0 0.2rem;
}

.wz-input {
  width: 100%;
}

.wz-error {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  color: var(--danger);
}

/* --- Virtual directory browser (cwd input dropdown) --- */
.wz-cwd-wrap {
  position: relative;
}

/* `position: fixed` damit das Popup nicht vom `overflow: auto` der Sheet
   abgeschnitten wird. top/left/width werden vom Wizard zur Laufzeit aus
   dem Input-Rect gesetzt. */
.wz-cwd-browser {
  position: fixed;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  max-height: 18rem;
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 22px var(--scrim-bg);
  overflow: hidden;
}

.wz-cwd-browser__toolbar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.45rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel-header);
}

.wz-cwd-browser__path {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
}

.wz-cwd-browser__hidden {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  color: var(--text-muted);
  user-select: none;
  cursor: pointer;
}

.wz-cwd-browser__list {
  list-style: none;
  margin: 0;
  padding: 0.2rem 0;
  overflow: auto;
  min-height: 0;
}

.wz-cwd-browser__list li {
  margin: 0;
  padding: 0;
}

.wz-cwd-browser__item {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 0.82rem;
  color: var(--text);
  background: transparent;
  border: none;
  padding: 0.32rem 0.7rem;
  cursor: pointer;
}

.wz-cwd-browser__item:hover,
.wz-cwd-browser__item:focus-visible {
  background: var(--accent-soft);
  color: var(--text);
  outline: none;
}

.wz-cwd-browser__item--hidden {
  color: var(--text-faint);
  font-style: italic;
}

.wz-cwd-browser__empty {
  padding: 0.6rem 0.7rem;
  font-size: 0.74rem;
  color: var(--text-faint);
  font-style: italic;
}

.wz-templates-title {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.wz-template-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
}

.wz-template-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.45rem 0.25rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--overlay-1);
  cursor: pointer;
  color: var(--text-muted);
  font: inherit;
}

.wz-template-card:hover {
  background: var(--overlay-1);
}

.wz-template-card--active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-soft);
  color: var(--text);
}

.wz-template-card__n {
  font-size: 1rem;
  font-weight: 600;
}

.wz-template-card__lbl {
  font-size: 0.65rem;
  text-align: center;
}

.wz-fleet {
  display: grid;
  grid-template-columns: 1fr minmax(10rem, 14rem);
  gap: 1rem;
}

.wz-fleet__title {
  grid-column: 1 / -1;
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

.wz-fleet-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

.wz-danger {
  color: var(--danger) !important;
}

.wz-agent-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.wz-agent-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--overlay-1);
}

.wz-agent-row__meta {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.wz-agent-row__sub {
  font-size: 0.68rem;
  color: var(--text-faint);
}

.wz-agent-row__ctl {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.wz-stepper {
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--overlay-1);
  color: var(--text);
  cursor: pointer;
  font: inherit;
}

.wz-stepper-val {
  min-width: 1.2rem;
  text-align: center;
  font-size: 0.82rem;
}

.wz-fleet__side {
  padding: 0.65rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--overlay-1);
  align-self: start;
}

.wz-util-title {
  margin: 0 0 0.35rem;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.wz-util-slots {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.wz-util-note {
  margin: 0.45rem 0 0;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.wz-footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border);
}

.wz-footer__grow {
  flex: 1;
}


/* ============================================================
   Inline workspace configurator
   Single-column, centered "setup card" inside the workspace pane.
   ============================================================ */
.ws-config {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 2.85rem 2rem 1.5rem;
  overflow: auto;
  background: radial-gradient(
    ellipse at top,
    var(--overlay-1),
    transparent 60%
  );
}

.ws-config__shell {
  flex: 1 1 auto;
  width: 100%;
  max-width: 44rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.32rem;
}

/* --- step indicator --- */
.ws-config__steps {
  list-style: none;
  margin: 0 0 1.05rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-size: 0.78rem;
}

.ws-config__step {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  transition: color 120ms, background 120ms, border-color 120ms;
}

.ws-config__step--active {
  color: var(--text-bright, var(--text-bright));
  background: var(--overlay-1);
  border-color: var(--border-strong);
}

.ws-config__step--done {
  color: var(--text-bright, var(--text-bright));
  opacity: 0.85;
}

.ws-config__step-num {
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  background: var(--overlay-2);
  color: var(--text-muted);
  font-weight: 700;
  font-size: 0.72rem;
}

.ws-config__step--active .ws-config__step-num {
  background: var(--text-bright, var(--text-bright));
  color: var(--bg-app);
}

.ws-config__step--done .ws-config__step-num {
  background: var(--overlay-2);
  color: var(--text-bright, var(--text-bright));
}

.ws-config__step-sep {
  width: 1.5rem;
  height: 1px;
  background: var(--border);
  list-style: none;
}

/* --- heading --- */
.ws-config__title {
  margin: 0;
  text-align: center;
  font-size: 1.78rem;
  font-weight: 600;
  letter-spacing: 0;
}

.ws-config__sub {
  margin: -0.35rem 0 0.85rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* --- form groups --- */
.ws-config__group {
  display: flex;
  flex-direction: column;
  gap: 0.48rem;
}

.ws-config__label {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 600;
  line-height: 1.1;
}

.ws-config__label svg {
  flex: 0 0 auto;
  color: var(--accent);
  opacity: 0.9;
}

.ws-config__field {
  width: 100%;
  background: var(--bg-panel);
  color: var(--text-bright, var(--text-bright));
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.65rem 0.85rem;
  font-size: 0.92rem;
  font-family: inherit;
  outline: none;
  transition: border-color 120ms, box-shadow 120ms, background 120ms;
}

.ws-config__field::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
}

.ws-config__field:focus {
  border-color: var(--border-strong);
  background: var(--bg-panel);
  box-shadow: 0 0 0 3px var(--overlay-1);
}

/* Native <select> popup options: the OS/WebView renders these outside the
   control, so they must be themed explicitly (otherwise white-on-white in
   dark themes). Uses theme tokens so every theme is honoured across the
   workspace wizard, settings, and voice/model native selects. */
.ws-config__field option,
.workbench-plain-input option,
.ptt-select option,
.mm__sort option {
  background-color: var(--bg-panel);
  color: var(--text);
}

.ws-config__field option:checked,
.workbench-plain-input option:checked,
.ptt-select option:checked,
.mm__sort option:checked {
  background-color: var(--bg-panel-header);
  color: var(--text-bright);
}

.ws-config__cwd {
  position: relative;
  display: flex;
  align-items: center;
}

.ws-config__cwd-icon {
  position: absolute;
  left: 0.7rem;
  color: var(--text-muted);
  display: inline-flex;
  pointer-events: none;
}

.ws-config__field--cwd {
  padding-left: 2.1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
}

.ws-config__error {
  margin: 0;
  font-size: 0.78rem;
  color: var(--danger);
}

.ws-config__hint {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* --- session role picker --- */
.ws-config__role-picker {
  position: relative;
}

.ws-config__role-trigger {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.65rem;
  appearance: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-panel);
  color: var(--text-bright, var(--text));
  padding: 0.55rem 0.75rem;
  font: inherit;
  text-align: left;
  cursor: pointer;
  outline: none;
  transition: border-color 120ms, box-shadow 120ms, background 120ms;
}

.ws-config__role-trigger:hover,
.ws-config__role-trigger:focus-visible,
.ws-config__role-trigger--open {
  border-color: var(--border-strong);
  background: var(--bg-panel);
  box-shadow: 0 0 0 3px var(--overlay-1);
}

.ws-config__role-trigger > svg {
  flex: 0 0 auto;
  color: var(--text-muted);
}

.ws-config__role-trigger-copy,
.ws-config__role-option-main {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.16rem;
}

.ws-config__role-title {
  overflow: hidden;
  color: var(--text-bright, var(--text));
  font-size: 0.88rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-config__role-desc {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.73rem;
  line-height: 1.28;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ws-config__role-meta {
  overflow: hidden;
  color: var(--text-faint);
  font-size: 0.68rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-config__role-menu {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  z-index: 10000;
  display: flex;
  width: 100%;
  max-height: 20rem;
  flex-direction: column;
  gap: 0.12rem;
  overflow: auto;
  padding: 0.25rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  box-shadow: 0 8px 22px var(--scrim-bg);
}

.ws-config__role-option {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 0.55rem;
  appearance: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  padding: 0.48rem 0.55rem;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ws-config__role-option:hover,
.ws-config__role-option:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 24%, transparent);
  background: var(--overlay-1);
  outline: none;
}

.ws-config__role-option--active {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
  background: color-mix(in srgb, var(--accent) 11%, transparent);
}

.ws-config__role-option > svg {
  flex: 0 0 auto;
  margin-top: 0.12rem;
  color: var(--accent);
}

.ws-config__role-hint {
  margin-top: 0.35rem;
  line-height: 1.35;
}

/* --- workspace presets --- */
.ws-config__presets-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}

.ws-config__presets-sub {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.ws-config__presets-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.35rem;
}

.ws-config__preset-empty {
  width: 100%;
  min-height: 5.9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem;
  border: 1px dashed color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--overlay-1) 62%, transparent), transparent),
    color-mix(in srgb, var(--bg-panel) 78%, transparent);
  color: var(--text-muted);
  text-align: center;
}

.ws-config__preset-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-panel);
  color: var(--accent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--overlay-4) 35%, transparent);
}

.ws-config__preset-empty-title {
  color: var(--text-muted);
  font-size: 0.78rem;
}

.ws-config__preset-empty-btn {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  color: var(--text);
  padding: 0.32rem 0.72rem;
  font: inherit;
  font-size: 0.76rem;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}

.ws-config__preset-empty-btn:hover,
.ws-config__preset-empty-btn:focus-visible {
  border-color: var(--border-strong);
  background: var(--overlay-1);
  color: var(--text-bright);
  outline: none;
}

.ws-config__preset {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2, var(--surface));
  overflow: hidden;
}

.ws-config__preset-launch {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.6rem;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 0.78rem;
  cursor: pointer;
}

.ws-config__preset-launch:hover {
  background: var(--overlay-2, color-mix(in srgb, var(--accent) 12%, transparent));
}

.ws-config__preset-name {
  font-weight: 620;
}

.ws-config__preset-meta {
  font-size: 0.68rem;
  color: var(--text-muted);
}

.ws-config__preset-del {
  border: 0;
  border-left: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  padding: 0 0.42rem;
  font-size: 0.7rem;
  cursor: pointer;
}

.ws-config__preset-del:hover {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 14%, transparent);
}

.ws-config__preset--new {
  padding: 0.32rem 0.7rem;
  border-style: dashed;
  color: var(--text-muted);
  font-size: 0.78rem;
  cursor: pointer;
}

.ws-config__preset--new:hover {
  color: var(--text);
  border-color: var(--border-strong, var(--border));
}

.ws-config__preset-newrow {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.4rem;
}

.ws-config__preset-newinput {
  flex: 1;
}

/* --- per-slot names (fleet step) --- */
.ws-config__slot-names {
  display: flex;
  flex-direction: column;
  gap: 0.48rem;
  margin-top: 0.72rem;
}

.ws-config__slot-names-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.5rem 0.55rem;
  width: 100%;
}

.ws-config__slot-name-card {
  min-width: 0;
  min-height: 2.36rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  padding: 0.34rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--overlay-1) 70%, transparent), transparent),
    var(--bg-panel);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--overlay-4) 30%, transparent);
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.ws-config__slot-name-card:focus-within {
  border-color: var(--border-strong);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 20%, transparent), transparent),
    var(--bg-panel);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--overlay-4) 34%, transparent),
    0 0 0 3px var(--overlay-1);
}

.ws-config__slot-name-index {
  display: inline-grid;
  place-items: center;
  width: 1.62rem;
  height: 1.45rem;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: var(--radius-sm);
  background: var(--overlay-1);
  color: var(--text-faint);
  font-size: 0.66rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ws-config__slot-name-input {
  min-width: 0;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--text-bright, var(--text));
  outline: none;
  font-family: inherit;
  font-size: 0.78rem;
  line-height: 1.4;
}

.ws-config__slot-name-input::placeholder {
  color: var(--text-muted);
  opacity: 0.72;
}

/* Per-agent CLI model select in the fleet step. */
.ws-config__agent-model {
  width: auto;
  min-width: 7rem;
  max-width: 12rem;
  font-size: 0.74rem;
  padding: 0.26rem 0.4rem;
}

/* --- recent working directories --- */
.ws-config__recent {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.62rem;
}

.ws-config__recent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
}

.ws-config__recent-label,
.ws-config__recent-note {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.ws-config__recent-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.ws-config__recent-label svg {
  color: var(--text-faint);
}

.ws-config__recent-count {
  color: var(--text-faint);
}

.ws-config__recent-note {
  flex: 0 0 auto;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--text-faint);
}

.ws-config__recent-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem 0.55rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ws-config__recent-item {
  min-width: 0;
}

.ws-config__recent-card {
  width: 100%;
  min-height: 3.42rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.68rem;
  padding: 0.55rem 0.68rem;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--overlay-1) 72%, transparent), transparent),
    var(--bg-panel);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--overlay-4) 35%, transparent);
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}

.ws-config__recent-card:hover,
.ws-config__recent-card:focus-visible {
  border-color: var(--border-strong);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 24%, transparent), transparent),
    var(--bg-panel);
  outline: none;
  transform: translateY(-1px);
}

.ws-config__recent-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  color: var(--text-muted);
}

.ws-config__recent-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.08rem;
}

.ws-config__recent-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-bright);
  font-size: 0.82rem;
  font-weight: 650;
}

.ws-config__recent-path {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-faint);
  font-size: 0.72rem;
}

.ws-config__recent-terminals {
  min-width: 1.3rem;
  color: var(--text-faint);
  font-size: 0.72rem;
  font-weight: 650;
  text-align: right;
}

@media (max-width: 720px) {
  .ws-config__recent-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.2rem;
  }

  .ws-config__recent-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- layout preview row --- */
.ws-config__layout-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
  gap: 0.55rem;
}

.ws-config__layout-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 0.5rem 0.5rem;
  background: var(--bg-elevated, var(--overlay-1));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-bright, var(--text-bright));
  cursor: pointer;
  transition: border-color 120ms, background 120ms, transform 120ms;
}

.ws-config__layout-card:hover {
  background: var(--overlay-1);
  border-color: var(--border-strong);
}

.ws-config__layout-card--active {
  border-color: var(--text-bright, var(--text-bright));
  background: var(--overlay-2);
}

.ws-config__layout-mini {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  gap: 2px;
  /* grid-template-columns / -rows are set inline per preset
     to reflect the actual rows×cols layout. */
}

.ws-config__layout-cell {
  background: var(--text-muted);
  border-radius: 1px;
  opacity: 0.55;
  min-width: 0;
  min-height: 0;
}

.ws-config__layout-card--active .ws-config__layout-cell {
  background: var(--text-bright, var(--text-bright));
  opacity: 1;
}

.ws-config__layout-num {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-bright, var(--text-bright));
}

/* --- fleet step --- */
.ws-config__fleet {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.ws-config__fleet-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.ws-config__fleet-spacer { flex: 1; }

.ws-config__fleet-meter {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.ws-config__chip {
  font: inherit;
  font-size: 0.78rem;
  padding: 0.35rem 0.7rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-bright, var(--text-bright));
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}

.ws-config__chip:hover {
  background: var(--overlay-1);
  border-color: var(--border-strong);
}

.ws-config__chip--danger {
  color: var(--danger);
  border-color: var(--text-muted);
}

.ws-config__chip--danger:hover {
  background: var(--overlay-2);
}

.ws-config__agent-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.ws-config__agent-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.8rem;
  background: var(--bg-elevated, var(--overlay-1));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.ws-config__agent-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.ws-config__agent-meta strong { font-weight: 600; font-size: 0.92rem; }

.ws-config__agent-sub {
  font-size: 0.76rem;
  color: var(--text-muted);
}

.ws-config__agent-ctl {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.ws-config__stepper {
  width: 1.7rem;
  height: 1.7rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-bright, var(--text-bright));
  font-size: 0.95rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ws-config__stepper:hover {
  background: var(--overlay-1);
  border-color: var(--border-strong);
}

.ws-config__stepper-val {
  min-width: 1.5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* --- footer actions --- */
.ws-config__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.ws-config__actions-spacer { flex: 1; }

.ws-config__btn {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-bright, var(--text-bright));
  cursor: pointer;
  transition: background 120ms, border-color 120ms, opacity 120ms;
}

.ws-config__btn--ghost:hover {
  background: var(--overlay-1);
  border-color: var(--border-strong);
}

.ws-config__btn--primary {
  background: var(--text-bright, var(--text-bright));
  color: var(--bg-app);
  border-color: var(--text-bright, var(--text-bright));
  font-weight: 600;
}

.ws-config__btn--primary:hover:not(:disabled) {
  background: var(--text-muted);
}

.ws-config__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* --- directory browser popup (refined) --- */
.wz-cwd-browser__tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-bright, var(--text-bright));
  cursor: pointer;
}

.wz-cwd-browser__tool:hover {
  background: var(--overlay-2);
  border-color: var(--border);
}

.wz-cwd-browser__path {
  flex: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wz-cwd-browser__newrow {
  display: flex;
  gap: 0.3rem;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--overlay-1);
}

.wz-cwd-browser__newinput {
  flex: 1;
  background: var(--bg-panel);
  color: var(--text-bright, var(--text-bright));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.5rem;
  font: inherit;
  font-size: 0.8rem;
  outline: none;
}

.wz-cwd-browser__newinput:focus {
  border-color: var(--border-strong);
}

.wz-cwd-browser__newbtn {
  font: inherit;
  font-size: 0.78rem;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--text-bright, var(--text-bright));
  color: var(--bg-app);
  cursor: pointer;
  font-weight: 600;
}

.wz-cwd-browser__newbtn--ghost {
  background: transparent;
  color: var(--text-muted);
  font-weight: 400;
}

.wz-cwd-browser__newbtn:hover {
  filter: brightness(0.95);
}

.wz-cwd-browser__err {
  margin: 0;
  padding: 0.3rem 0.6rem;
  font-size: 0.75rem;
  color: var(--danger);
  background: var(--overlay-2);
  border-bottom: 1px solid var(--border);
}

.wz-cwd-browser__item-icon {
  display: inline-flex;
  margin-right: 0.45rem;
  color: var(--text-muted);
  vertical-align: middle;
}

.workbench-right-memory {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  min-width: 0;
}

.workbench-right-plans {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  min-width: 0;
}

@media (max-width: 980px) {
  .workbench-right__header {
    padding: 0.35rem 0.4rem;
  }

  .workbench-right__toolbar {
    gap: 0.35rem;
  }

  .workbench-right-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 0.3rem;
  }

  .workbench-right-tab--active {
    flex: 1 1 0;
    min-width: 0;
  }

  .workbench-right-tab__label,
  .workbench-right-tab--active .workbench-right-tab__label {
    max-width: 0;
    opacity: 0;
  }

  .workbench-memory-files {
    grid-template-columns: minmax(9.5rem, 11rem) minmax(0, 1fr);
  }
}

.workbench-right-memory__empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: clamp(1rem, 4vh, 2rem) 1.25rem;
  text-align: center;
}

.workbench-right-memory__empty-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

.workbench-right-memory__empty-lead {
  margin: 0;
  max-width: 22rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.workbench-right-memory__create-btn {
  margin-top: 0.4rem;
  padding: 0.45rem 0.95rem;
  font: inherit;
  font-size: 0.85rem;
  color: var(--text);
  background: var(--overlay-2);
  border: 1px solid var(--overlay-4);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.workbench-right-memory__create-btn:hover {
  background: var(--overlay-3);
  border-color: var(--text-muted);
}

.workbench-right-memory__create-btn:focus-visible {
  outline: 2px solid var(--accent, var(--accent-hover));
  outline-offset: 2px;
}

.workbench-right-memory__placeholder {
  flex: 1;
}

/* ===================================================================
 * Memory panel (notes / graph / search / agents)
 * =================================================================== */
.workbench-memory {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  position: relative;
  color: var(--text);
  font-size: 0.85rem;
}

.workbench-memory__tabs {
  display: flex;
  gap: 0.15rem;
  padding: 0.4rem 0.5rem 0;
  border-bottom: 1px solid var(--overlay-2);
}

.workbench-memory__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.65rem;
  font: inherit;
  font-size: 0.78rem;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}
.workbench-memory__tab:hover { color: var(--text); }
.workbench-memory__tab--active {
  color: var(--text-muted);
  border-bottom-color: var(--accent, var(--accent-hover));
}

.workbench-memory__actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.workbench-memory__action {
  width: 1.9rem;
  height: 1.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.workbench-memory__action:hover {
  color: var(--text);
  background: var(--overlay-1);
  border-color: var(--overlay-2);
}
.workbench-memory__action--active {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent-soft);
}
.workbench-memory__action:disabled {
  opacity: 0.65;
  cursor: wait;
}

.workbench-memory__error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0.4rem 0.5rem 0;
  padding: 0.4rem 0.55rem;
  background: var(--overlay-2);
  border: 1px solid var(--overlay-2);
  border-radius: 5px;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.workbench-memory__error-dismiss {
  background: transparent;
  border: none;
  color: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.2rem;
}

.workbench-pointers-notice {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.5rem 0.55rem;
  padding: 0.55rem 0.65rem;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--accent, var(--accent-hover)) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, var(--accent-hover)) 15%, transparent);
  border-radius: var(--radius-lg);
  font-size: 0.8rem;
}

.workbench-pointers-notice__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--accent, var(--accent-hover));
}

.workbench-pointers-notice p {
  flex: 1;
  min-width: 0;
  margin: 0;
  line-height: 1.35;
}

.workbench-pointers-notice__setup {
  padding: 0;
  color: var(--accent, var(--accent-hover));
  background: transparent;
  border: none;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.workbench-pointers-notice__setup:hover,
.workbench-pointers-notice__setup:focus-visible {
  text-decoration: underline;
}

.workbench-pointers-notice__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.55rem;
  height: 1.55rem;
  padding: 0;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.workbench-pointers-notice__close:hover,
.workbench-pointers-notice__close:focus-visible {
  color: var(--text);
  background: var(--overlay-2);
}

.workbench-memory__body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.workbench-memory__placeholder {
  position: absolute;
  inset: 2.4rem 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  text-align: center;
  background: var(--bg-app);
  backdrop-filter: blur(2px);
  pointer-events: none;
}
.workbench-memory__placeholder-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}
.workbench-memory__placeholder-lead {
  margin: 0;
  max-width: 22rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.workbench-memory-bootstrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.4rem;
}

.workbench-memory-bootstrap__card {
  width: min(22rem, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  text-align: center;
}

.workbench-memory-bootstrap__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  color: var(--text-muted);
  background: var(--overlay-1);
  border: 1px solid var(--overlay-2);
  border-radius: var(--radius-lg);
}

.workbench-memory-bootstrap__card h3 {
  margin: 0;
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 650;
}

.workbench-memory-bootstrap__card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.workbench-memory-bootstrap__card code {
  max-width: 100%;
  overflow: hidden;
  padding: 0.18rem 0.45rem;
  color: var(--text-muted);
  background: var(--overlay-1);
  border: 1px solid var(--overlay-2);
  border-radius: 5px;
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workbench-memory-bootstrap__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2rem;
  padding: 0.35rem 0.7rem;
  color: var(--text);
  background: var(--overlay-2);
  border: 1px solid var(--overlay-3);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.workbench-memory-bootstrap__button:hover,
.workbench-memory-bootstrap__button:focus-visible {
  background: var(--overlay-3);
}

.workbench-memory-bootstrap__divider {
  width: min(18rem, 80%);
  height: 1px;
  background: var(--overlay-2);
}

/* --- Files view ----------------------------------------------------- */
.workbench-memory-files {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(13rem, 15.5rem) minmax(0, 1fr);
  min-height: 0;
}

.workbench-memory-files--collapsed {
  grid-template-columns: 3.8rem minmax(0, 1fr);
}

.workbench-memory-files__tree {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--overlay-2);
  background: var(--overlay-1);
}

.workbench-memory-files--resizing {
  cursor: col-resize;
  user-select: none;
}

.workbench-memory-files__col-resizer {
  position: relative;
  cursor: col-resize;
  background: transparent;
  transition: background 0.12s ease;
}

.workbench-memory-files__col-resizer::before {
  content: "";
  position: absolute;
  inset: 0 -3px;
}

.workbench-memory-files__col-resizer:hover,
.workbench-memory-files__col-resizer--active {
  background: var(--accent-soft);
}

.workbench-memory-files__tree-spacer {
  flex: 1 1 auto;
  min-height: 2rem;
  cursor: default;
}

.workbench-memory-files__tree--collapsed {
  align-items: center;
}

.workbench-memory-files__tree--collapsed .workbench-memory-files__scope-head {
  justify-content: center;
  width: 100%;
  padding: 0.35rem 0 0.1rem;
}

.workbench-memory-files__tree--collapsed .workbench-memory-files__scope-head span,
.workbench-memory-files__tree--collapsed .workbench-memory-files__scope-add,
.workbench-memory-files__tree--collapsed .workbench-memory-files__scope-actions {
  display: none;
}

.workbench-memory-files__new {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  padding: 0.45rem 0.5rem;
  border-bottom: 1px solid var(--overlay-1);
}

.workbench-memory-files__new--collapsed {
  flex-direction: column;
  align-items: center;
  padding: 0.45rem 0.35rem;
}

.workbench-memory-files__summary {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  color: var(--text-muted);
  font-size: 0.68rem;
  line-height: 1;
  white-space: nowrap;
}

.workbench-memory-files__center-btn {
  padding: 0;
  width: 1.55rem;
  height: 1.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.workbench-memory-files__center-btn:hover,
.workbench-memory-files__center-btn:focus-visible {
  color: var(--text);
  background: var(--overlay-2);
  border-color: var(--overlay-3);
}

.workbench-memory-files__new-input {
  flex: 1;
  min-width: 0;
  padding: 0.3rem 0.45rem;
  font: inherit;
  font-size: 0.78rem;
  color: inherit;
  background: var(--overlay-1);
  border: 1px solid var(--overlay-3);
  border-radius: var(--radius-sm);
}
.workbench-memory-files__new-input:focus {
  outline: none;
  border-color: var(--accent, var(--accent-hover));
}
.workbench-memory-files__collapse-btn {
  padding: 0;
  width: 1.8rem;
  height: 1.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  background: var(--overlay-1);
  border: 1px solid var(--overlay-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.workbench-memory-files__collapse-btn:hover {
  background: var(--overlay-3);
}

.workbench-memory-files__list {
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
}
/* Dual-scope sidebar sections */
.workbench-memory-files__scope-section {
  display: flex;
  flex-direction: column;
}
.workbench-memory-files__scope-head {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0.5rem 0.15rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  user-select: none;
}
.workbench-memory-files__scope-head span {
  flex: 1;
}
.workbench-memory-files__scope-actions {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.12rem;
}
.workbench-memory-files__scope-add {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.workbench-memory-files__scope-head:hover .workbench-memory-files__scope-add,
.workbench-memory-files__scope-head:focus-within .workbench-memory-files__scope-add,
.workbench-memory-files__scope-add:focus-visible {
  opacity: 1;
}
.workbench-memory-files__scope-add:hover {
  background: var(--overlay-2);
  color: var(--text);
}
/* "Create Global Memory" placeholder */
.workbench-memory-files__global-init {
  padding: 0.4rem 0.5rem;
}
.workbench-memory-files__global-init-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  width: 100%;
  padding: 0.35rem 0.5rem;
  background: none;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 0.75rem;
  text-align: left;
  transition: color 0.15s, border-color 0.15s;
}
.workbench-memory-files__global-init-btn:hover {
  color: var(--color-text);
  border-color: var(--color-text-muted);
}
.workbench-memory-files__group-head {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin: 0.55rem 0.2rem 0.1rem;
  padding: 0;
  list-style: none;
  border-left: 2px solid var(--memory-category-color, transparent);
  padding-left: 0.15rem;
}
.workbench-memory-files__group-head:first-child {
  margin-top: 0.15rem;
}
.workbench-memory-files__group-head--active .workbench-memory-files__group-index {
  color: var(--text-muted);
}
.workbench-memory-files__group-head--sidebar-hidden .workbench-memory-files__group-index {
  color: var(--text-muted);
  font-style: italic;
}
.workbench-memory-files__group-chevron {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.workbench-memory-files__group-chevron--open {
  transform: rotate(90deg);
}
.workbench-memory-files__group-chevron:hover {
  background: var(--overlay-1);
  color: var(--text-muted);
}
.workbench-memory-files__group-index {
  flex: 1;
  min-width: 0;
  padding: 0.28rem 0.35rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.workbench-memory-files__group-index:hover {
  background: var(--overlay-1);
  color: var(--text);
}
.workbench-memory-files__group-add {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.workbench-memory-files__group-head:hover .workbench-memory-files__group-add,
.workbench-memory-files__group-head:focus-within .workbench-memory-files__group-add,
.workbench-memory-files__group-add:focus-visible {
  opacity: 1;
}
.workbench-memory-files__group-add:hover {
  background: var(--overlay-2);
  color: var(--text);
}

.workbench-memory-files__folder-group {
  list-style: none;
  padding: 0.15rem 0.35rem 0.1rem 1.55rem;
}

.workbench-memory-files__folder-group-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.22rem 0.35rem;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.72rem;
  text-align: left;
  cursor: pointer;
}

.workbench-memory-files__folder-group-head:hover {
  color: var(--text);
  background: var(--overlay-1);
  border-color: var(--overlay-2);
}

.workbench-memory-files__folder-group-chevron {
  display: inline-flex;
  flex: 0 0 auto;
  transition: transform 0.15s ease;
}

.workbench-memory-files__folder-group-chevron--open {
  transform: rotate(90deg);
}

.workbench-memory-files__folder-group-head strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-weight: 650;
}

.workbench-memory-files__item {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.1rem 0.35rem;
}

.workbench-memory-files__item--nested {
  padding-left: 2.35rem;
}

.workbench-memory-files__item--collapsed {
  justify-content: center;
  padding: 0.22rem 0.2rem;
}

.workbench-memory-files__item--active {
  background: var(--accent-soft);
}
.workbench-memory-files__name {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.3rem 0.4rem;
  font: inherit;
  font-size: 0.8rem;
  color: inherit;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.workbench-memory-files__name:hover {
  background: var(--overlay-1);
}
.workbench-memory-files__name-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.workbench-memory-files__folder {
  flex: 0 1 auto;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.7rem;
  color: var(--text-muted);
}
.workbench-memory-files__action {
  padding: 0.2rem 0.35rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.workbench-memory-files__action:hover {
  background: var(--overlay-2);
  color: var(--text);
}
.workbench-memory-files__action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.workbench-memory-files__note-flags {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  flex-shrink: 0;
}

.workbench-memory-files__note-flag {
  padding: 0.05rem 0.28rem;
  border: 1px solid var(--overlay-2);
  border-radius: var(--radius-xs);
  color: var(--text-muted);
  font-size: 0.62rem;
  line-height: 1.2;
}

.workbench-memory-files__note-flag--stale {
  color: var(--danger);
  border-color: var(--danger-soft);
}

.workbench-memory-files__badge {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--text);
  background: linear-gradient(180deg, var(--accent-soft), var(--accent-soft));
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius-pill);
  cursor: pointer;
  box-shadow: inset 0 1px 0 var(--overlay-1);
}

.workbench-memory-files__badge:hover {
  background: linear-gradient(180deg, var(--accent-soft), var(--accent-soft));
  border-color: var(--accent-soft);
}

.workbench-memory-files__badge--category {
  color: var(--text);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--memory-category-color) 34%, transparent), color-mix(in srgb, var(--memory-category-color) 20%, transparent));
  border-color: color-mix(in srgb, var(--memory-category-color) 62%, var(--overlay-3));
}

.workbench-memory-files__badge--category:hover {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--memory-category-color) 42%, transparent), color-mix(in srgb, var(--memory-category-color) 26%, transparent));
  border-color: var(--memory-category-color);
}

.memory-context-menu {
  z-index: 1200;
}

.memory-category-dialog__body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.memory-category-dialog__color-row {
  display: grid;
  grid-template-columns: 2.45rem minmax(0, 1fr);
  gap: 0.45rem;
  align-items: center;
}

.memory-category-dialog__color-input,
.memory-preset-row__color {
  width: 2.25rem;
  height: 2.1rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
}

.memory-color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.memory-color-swatch {
  width: 1.45rem;
  height: 1.45rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--overlay-2);
  background: var(--memory-swatch);
  cursor: pointer;
}

.memory-category-dialog__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text-muted);
  font-size: 0.78rem;
}

.pointers-dialog {
  width: min(42rem, calc(100vw - 2rem));
  padding: 0;
  overflow: hidden;
}

.pointers-dialog__head {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: start;
  padding: 1rem 1.1rem 0.9rem;
  border-bottom: 1px solid var(--overlay-2);
  background: linear-gradient(180deg, var(--overlay-1), transparent);
}

.pointers-dialog__title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  color: var(--accent, var(--accent-hover));
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent, var(--accent-hover)) 15%, transparent);
  border-radius: var(--radius-lg);
}

.pointers-dialog__head h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
}

.pointers-dialog__head p {
  margin: 0.25rem 0 0;
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.pointers-dialog__agents {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0;
  padding: 0.85rem 1.1rem;
  list-style: none;
}

.pointers-dialog__agent {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.7rem;
  background: color-mix(in srgb, var(--overlay-1) 55%, transparent);
  border: 1px solid var(--overlay-2);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.pointers-dialog__agent:hover,
.pointers-dialog__agent:focus-within {
  background: var(--overlay-1);
  border-color: var(--overlay-3);
}

.pointers-dialog__checkbox {
  flex: 0 0 auto;
  width: 0.95rem;
  height: 0.95rem;
  accent-color: var(--accent, var(--accent-hover));
}

.pointers-dialog__brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0.35rem;
  background: var(--hook-brand-bg);
  border: 1px solid var(--overlay-2);
  border-radius: var(--radius-lg);
}

.pointers-dialog__brand img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pointers-dialog__meta {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 0.1rem;
}

.pointers-dialog__label {
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 600;
}

.pointers-dialog__target {
  overflow: hidden;
  color: var(--text-muted);
  font-family: ui-monospace, "JetBrains Mono", "Fira Code", monospace;
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pointers-dialog__status {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 0.25rem;
  padding: 0.16rem 0.45rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--overlay-2);
  font-size: 0.68rem;
  font-weight: 650;
  line-height: 1.2;
}

.pointers-dialog__status--installed {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 10%, transparent);
  border-color: color-mix(in srgb, var(--success) 18%, transparent);
}

.pointers-dialog__status--missing {
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 10%, transparent);
  border-color: color-mix(in srgb, var(--warning) 18%, transparent);
}

.pointers-dialog__status--pending {
  color: var(--text-muted);
  background: var(--overlay-1);
}

.pointers-dialog__actions {
  padding: 0.85rem 1.1rem;
  background: color-mix(in srgb, var(--overlay-1) 40%, transparent);
  border-top: 1px solid var(--overlay-2);
}
.workbench-memory-files__rename-form {
  flex: 1;
  display: flex;
  gap: 0.2rem;
  padding: 0.2rem 0.3rem;
}
.workbench-memory-files__rename-input {
  flex: 1;
  min-width: 0;
  padding: 0.25rem 0.4rem;
  font: inherit;
  font-size: 0.78rem;
  color: inherit;
  background: var(--overlay-1);
  border: 1px solid var(--overlay-2);
  border-radius: var(--radius-sm);
}
.workbench-memory-files__rename-input:focus {
  outline: none;
  border-color: var(--accent, var(--accent-hover));
}

/* --- Editor pane ---------------------------------------------------- */
.workbench-memory-editor {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.workspace-center-panel--memory {
  display: flex;
  min-height: 0;
  overflow: hidden;
}

.workspace-center-panel--memory > .workbench-memory {
  flex: 1;
}

.workbench-memory-editor__empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.82rem;
}
.workbench-memory-editor__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.55rem;
  border-bottom: 1px solid var(--overlay-1);
  font-size: 0.75rem;
}
.workbench-memory-editor__path {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
}
.workbench-memory-editor__flag {
  color: var(--text-muted);
  font-size: 0.7rem;
}
.workbench-memory-editor__preview-btn {
  padding: 0.2rem 0.55rem;
  font: inherit;
  font-size: 0.72rem;
  color: inherit;
  background: var(--overlay-1);
  border: 1px solid var(--overlay-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.workbench-memory-editor__preview-btn:hover {
  background: var(--overlay-2);
}
.workbench-memory-editor__textarea {
  flex: 1;
  min-height: 0;
  padding: 0.6rem 0.75rem;
  font: inherit;
  font-family: ui-monospace, "JetBrains Mono", "Fira Code", monospace;
  font-size: 0.8rem;
  line-height: 1.5;
  color: inherit;
  background: transparent;
  border: none;
  resize: none;
  outline: none;
}
.workbench-memory-editor__preview {
  flex: 1;
  min-height: 0;
  padding: 0.6rem 0.85rem;
  overflow-y: auto;
  font-size: 0.85rem;
  line-height: 1.55;
}
.workbench-memory-editor__preview h1,
.workbench-memory-editor__preview h2,
.workbench-memory-editor__preview h3 { margin: 0.6em 0 0.3em; }
.workbench-memory-editor__preview a { color: var(--accent, var(--accent-hover)); }
.workbench-memory-editor__preview a[href^="blxmemory:"] {
  color: var(--text-muted);
  text-decoration-color: var(--text-muted);
}
.workbench-memory-editor__preview code {
  font-family: ui-monospace, monospace;
  background: var(--overlay-2);
  padding: 0.1em 0.3em;
  border-radius: var(--radius-xs);
  font-size: 0.85em;
}

.workbench-memory-editor__toolbar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  justify-content: flex-end;
  padding: 0.35rem 0.55rem 0 0.55rem;
}
.workbench-memory-editor__toolbar--readonly {
  justify-content: space-between;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--overlay-1);
}
.workbench-memory-editor__readonly {
  color: var(--text-muted);
  font-size: 0.7rem;
}
.workbench-memory-editor__backlinks {
  border-top: 1px solid var(--overlay-2);
  padding: 0.4rem 0.55rem 0.55rem;
  font-size: 0.78rem;
}
.workbench-memory-editor__backlinks-title {
  margin: 0 0 0.3rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.workbench-memory-editor__backlinks-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.workbench-memory-editor__backlink {
  background: none;
  border: none;
  padding: 0.2rem 0.3rem;
  color: var(--accent, var(--accent-hover));
  font: inherit;
  font-size: 0.78rem;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-xs);
}
.workbench-memory-editor__backlink:hover { background: var(--accent-soft); }
.workbench-memory-files__rename {
  flex: 1;
  display: flex;
  gap: 0.2rem;
  padding: 0.2rem 0.3rem;
}
.workbench-memory-files__action--danger:hover {
  background: var(--overlay-2);
  color: var(--text-muted);
}
.workbench-memory__tab-icon {
  display: inline-flex;
  align-items: center;
}

/* --- Graph view ---------------------------------------------------- */
.workbench-memory-graph {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0.5rem 0.55rem;
  position: relative;
}
.workbench-memory-graph__canvas {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.workbench-memory-graph__stage {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 50% 45%, var(--accent-soft), var(--overlay-1) 42%, var(--scrim-bg));
  border: 1px solid var(--overlay-1);
  border-radius: var(--radius-md);
}

.workbench-memory-graph__canvas--preview .workbench-memory-graph__stage {
  min-height: 8rem;
}

.workspace-center-panel--memory .workbench-memory-graph__canvas--preview {
  flex-direction: row;
  align-items: stretch;
}

.workspace-center-panel--memory
  .workbench-memory-graph__canvas--preview
  .workbench-memory-graph__stage {
  min-height: 0;
}

.workspace-center-panel--memory
  .workbench-memory-graph__canvas--preview
  .workbench-memory-graph-preview {
  flex: 0 0 clamp(20rem, 28vw, 34rem);
  max-height: none;
  min-height: 0;
}

@media (max-width: 980px) {
  .workspace-center-panel--memory .workbench-memory-graph__canvas--preview {
    flex-direction: column;
  }

  .workspace-center-panel--memory
    .workbench-memory-graph__canvas--preview
    .workbench-memory-graph__stage {
    min-height: 8rem;
  }

  .workspace-center-panel--memory
    .workbench-memory-graph__canvas--preview
    .workbench-memory-graph-preview {
    flex-basis: auto;
    max-height: min(42vh, 20rem);
  }
}

.workbench-memory-graph__3d {
  position: absolute;
  inset: 0;
  min-height: 240px;
}
.workbench-memory-graph__svg {
  height: 100%;
  width: 100%;
  background: transparent;
  border: 0;
  cursor: grab;
  user-select: none;
  touch-action: none;
  display: block;
}
.workbench-memory-graph__svg:active {
  cursor: grabbing;
}
.workbench-memory-graph__toolbar {
  display: flex;
  gap: 0.35rem;
  padding: 0 0 0.4rem 0;
  align-items: center;
}
.workbench-memory-graph__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  background: var(--overlay-1);
  color: var(--text-muted);
  border: 1px solid var(--overlay-2);
  border-radius: var(--radius-sm);
  padding: 0;
  font-size: 0.72rem;
  cursor: pointer;
}
.workbench-memory-graph__btn:hover {
  background: var(--overlay-2);
}
.workbench-memory-graph__btn--active {
  color: var(--text-muted);
  border-color: var(--accent-soft);
  background: var(--accent-soft);
}
.workbench-memory-graph__warning {
  margin: 0 0 0.4rem;
  color: var(--text-muted);
  font-size: 0.72rem;
}
.workbench-memory-graph__empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.82rem;
}
.workbench-memory-graph__legend {
  padding: 0.4rem 0.2rem 0;
  font-size: 0.72rem;
  color: var(--text-muted);
}
.workbench-memory-graph-preview {
  position: relative;
  flex: 0 0 auto;
  max-height: min(42vh, 20rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--overlay-2);
  border: 1px solid var(--overlay-3);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px var(--scrim-bg);
  backdrop-filter: blur(18px);
}
.workbench-memory-graph-preview__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid var(--overlay-2);
}
.workbench-memory-graph-preview__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 650;
}
.workbench-memory-graph-preview__actions {
  display: flex;
  gap: 0.3rem;
  flex: 0 0 auto;
}
.workbench-memory-graph-preview__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--overlay-2);
  background: var(--overlay-1);
  color: var(--text-muted);
  cursor: pointer;
}
.workbench-memory-graph-preview__btn:hover {
  background: var(--overlay-2);
  color: var(--text-muted);
}
.workbench-memory-graph-preview__body {
  padding: 0.75rem 0.85rem 0.9rem;
  overflow: auto;
  font-size: 0.78rem;
}
.workbench-memory-graph-preview__body > div > :first-child {
  margin-top: 0;
}
.workbench-memory-graph-preview__loading {
  margin: 0;
  color: var(--text-muted);
}

/* --- Agent context handoff (graph preview + terminal titlebar) ----- */
.workbench-handoff-anchor {
  position: relative;
  display: inline-flex;
}
.workbench-handoff-menu {
  position: absolute;
  top: calc(100% + 0.36rem);
  right: 0;
  min-width: 13rem;
  max-width: min(20rem, calc(100vw - 2rem));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-raised) 94%, transparent), var(--bg-panel));
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow:
    0 12px 30px color-mix(in srgb, var(--scrim-bg) 84%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--text) 7%, transparent);
  padding: 0.32rem;
  z-index: 40;
  font-size: 0.78rem;
  backdrop-filter: blur(10px);
}
.workbench-handoff-menu__head {
  padding: 0.28rem 0.48rem 0.38rem;
  color: var(--text-muted);
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}
.workbench-handoff-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.workbench-handoff-menu__item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  min-height: 1.85rem;
  padding: 0.38rem 0.54rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.workbench-handoff-menu__item:hover,
.workbench-handoff-menu__item:focus-visible {
  color: var(--text);
  background: color-mix(in srgb, var(--accent-soft) 48%, var(--overlay-2));
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
  outline: none;
}
.workbench-handoff-menu__item svg {
  color: var(--text-faint);
}
.workbench-handoff-menu__item:hover svg,
.workbench-handoff-menu__item:focus-visible svg {
  color: var(--accent);
}
.workbench-handoff-menu__empty {
  padding: 0.4rem 0.5rem;
  color: var(--text-muted);
}
.workbench-handoff-menu__separator {
  height: 1px;
  margin: 0.38rem 0.08rem;
  background: var(--border);
}
.blx-toast-host {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 9400;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  max-width: min(22rem, calc(100vw - 2rem));
  pointer-events: none;
}
.blx-toast {
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-md);
  font-size: 0.78rem;
  line-height: 1.35;
  border: 1px solid var(--overlay-3);
  box-shadow: 0 6px 18px var(--scrim-bg);
  animation: blx-toast-in 0.22s ease-out;
  pointer-events: auto;
}
.blx-toast--success {
  color: var(--text-muted);
  background: var(--overlay-2);
  border-color: var(--text-muted);
}
.blx-toast--error {
  color: var(--text-muted);
  background: var(--overlay-2);
  border-color: var(--text-muted);
}
.blx-toast--info {
  color: var(--text-muted);
  background: var(--overlay-2);
  border-color: var(--accent);
}
.blx-toast--loading {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--text-muted);
  background: var(--overlay-2);
  border-color: var(--accent);
}
.blx-toast--loading::before {
  content: "";
  flex: 0 0 auto;
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--accent) 32%, transparent);
  border-top-color: var(--accent);
  animation: blx-toast-spin 0.72s linear infinite;
}
@keyframes blx-toast-in {
  from {
    opacity: 0;
    transform: translateY(0.35rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes blx-toast-spin {
  to {
    transform: rotate(360deg);
  }
}
.app-prefs-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.45rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
  cursor: pointer;
}
.app-prefs-toggle input {
  accent-color: var(--accent-control);
}
.app-prefs-hint {
  margin: 0.2rem 0 0 1.35rem;
  font-size: 0.72rem;
  color: var(--text-hint);
  line-height: 1.35;
}

.memory-settings-toggle {
  align-items: center;
}

.memory-settings-toggle__input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.memory-settings-toggle__input:focus-visible + .blx-switch {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-soft);
}

/* --- Search view --------------------------------------------------- */
.workbench-memory-search {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.workbench-memory-search__input {
  margin: 0.5rem 0.55rem;
  padding: 0.4rem 0.6rem;
  font: inherit;
  font-size: 0.82rem;
  color: inherit;
  background: var(--overlay-1);
  border: 1px solid var(--overlay-3);
  border-radius: 5px;
}
.workbench-memory-search__input:focus {
  outline: none;
  border-color: var(--accent, var(--accent-hover));
}
.workbench-memory-search__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0.55rem 0.45rem;
}
.workbench-memory-search__filter {
  padding: 0.18rem 0.55rem;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  background: var(--overlay-1);
  border: 1px solid var(--overlay-3);
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.workbench-memory-search__filter:hover {
  background: var(--overlay-2);
  border-color: var(--text-muted);
  color: var(--text);
}
.workbench-memory-search__filter--active {
  color: var(--text-muted);
  background: linear-gradient(180deg, var(--accent-soft), var(--accent-soft));
  border-color: var(--accent-soft);
}
.workbench-memory-search__results {
  flex: 1;
  margin: 0;
  padding: 0 0.55rem 0.55rem;
  list-style: none;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.workbench-memory-search__hit {
  display: flex;
  align-items: stretch;
  gap: 0.25rem;
  padding: 0;
  background: var(--overlay-1);
  border: 1px solid var(--overlay-2);
  border-radius: 5px;
  overflow: hidden;
}
.workbench-memory-search__hit:hover {
  background: var(--overlay-2);
  border-color: var(--overlay-3);
}
.workbench-memory-search__hit-graph {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  padding: 0;
  border: none;
  border-left: 1px solid var(--overlay-2);
  background: var(--overlay-1);
  color: var(--accent, var(--accent-hover));
  cursor: pointer;
}
.workbench-memory-search__hit-graph:hover {
  background: var(--accent-soft);
  color: var(--text-muted);
}
.workbench-memory-search__hit-path {
  font-size: 0.74rem;
  color: var(--text-muted);
}
.workbench-memory-search__hit-snippet {
  font-size: 0.8rem;
  color: var(--text);
  margin-top: 0.15rem;
  white-space: pre-wrap;
}

/* --- Agents view --------------------------------------------------- */
.workbench-memory-agents {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0.55rem;
}
.workbench-memory-agents__lead {
  margin: 0 0 0.6rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.45;
}
.workbench-memory-agents__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  overflow-y: auto;
}
.workbench-memory-agents__item,
.workbench-memory-agents__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.55rem;
  background: var(--overlay-1);
  border: 1px solid var(--overlay-2);
  border-radius: 5px;
}
.workbench-memory-agents__name {
  flex: 1;
  min-width: 0;
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.workbench-memory-agents__status {
  font-size: 0.72rem;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-pill);
}
.workbench-memory-agents__status--installed {
  color: var(--text-muted);
  background: var(--overlay-2);
}
.workbench-memory-agents__status--missing {
  color: var(--text-muted);
  background: var(--overlay-1);
}
.workbench-memory-agents__btn {
  padding: 0.25rem 0.55rem;
  font: inherit;
  font-size: 0.74rem;
  color: inherit;
  background: var(--overlay-1);
  border: 1px solid var(--overlay-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.workbench-memory-agents__btn:hover {
  background: var(--overlay-3);
}
.workbench-memory-agents__btn--ghost {
  background: transparent;
  border-color: var(--text-muted);
}
.workbench-memory-search__hit-btn {
  flex: 1;
  min-width: 0;
  display: block;
  text-align: left;
  background: none;
  border: none;
  padding: 0.4rem 0.55rem;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.workbench-memory-graph__nodes,
.workbench-memory-graph__edges { pointer-events: auto; }
.workbench-memory-graph__node { cursor: pointer; }
.workbench-memory-graph__node--hub {
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--accent-warm) 36%, transparent));
}

/* ============================================================ */
/* Voice subsystem                                              */
/* ============================================================ */

/* Hidden audio element used for TTS playback */
.voice-orb__audio { display: none; }

.voice-orb { position: relative; }
.voice-orb--transcribing { opacity: 0.7; }
.voice-orb--transcribing svg { animation: voice-spin 1s linear infinite; }

@keyframes voice-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Voice settings pane */
.voice-pane__section {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
}

.voice-pane__section h3 {
  margin: 0 0 0.2rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.voice-pane__section--speech {
  gap: 0.55rem;
}

.voice-pane__field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.voice-pane__field > label {
  font-size: 0.8rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.voice-pane__quality-row,
.voice-pane__gender-row,
.voice-pane__radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.voice-pane__choice {
  appearance: none;
  min-height: 1.75rem;
  padding: 0.28rem 0.62rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-raised);
  color: var(--text-muted);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

.voice-pane__choice--active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--bg-app);
}

.voice-pane__hint {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--text-muted);
}

.voice-pane__hint--small {
  font-size: 0.72rem;
}

.voice-pane__hint--aws-only {
  visibility: hidden;
  min-height: 1.25rem;
}

.voice-pane__hint--aws-only.voice-pane__hint--visible {
  visibility: visible;
}

.voice-pane__voice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.45rem;
}

.voice-pane__voice-grid--six {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.voice-pane__voice-grid--disabled {
  opacity: 0.48;
  pointer-events: none;
}

.voice-pane__voice-card {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  min-height: 2.65rem;
  padding: 0.38rem 0.48rem;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg-raised);
}

.voice-pane__voice-card--active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-soft);
}

.voice-pane__voice-card--disabled {
  opacity: 0.72;
}

.voice-pane__voice-pick {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.voice-pane__voice-pick strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.82rem;
  font-weight: 600;
}

.voice-pane__voice-gender {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.voice-pane__voice-preview {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-panel);
  color: var(--text-muted);
  cursor: pointer;
}

.voice-pane__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
}

.voice-pane__loading,
.voice-pane__status {
    color: var(--text);
    font-size: 0.85rem;
}

/* ===========================================================================
   Skills & Rules right-panel tabs (see src/workbench/skills_rules_panel/)
   =========================================================================== */
.blx-sr-pane {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background: var(--bg-panel);
}

/* Header ------------------------------------------------------------------ */
.blx-sr-pane__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-panel-header);
    gap: 0.6rem;
    flex-shrink: 0;
}
.blx-sr-pane__title-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}
.blx-sr-pane__title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 0.4rem;
    background: var(--accent-soft);
    color: var(--accent-cool);
}
.blx-sr-pane__title {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text);
}
.blx-sr-pane__actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Pill tabs --------------------------------------------------------------- */
.blx-sr-tabs {
    display: flex;
    gap: 0.3rem;
    padding: 0.6rem 0.85rem 0.45rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-panel);
    flex-shrink: 0;
}
.blx-sr-tab {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    border-radius: 0.45rem;
    padding: 0.32rem 0.65rem;
    font-size: 0.74rem;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.blx-sr-tab:hover:not(.blx-sr-tab--active) {
    background: var(--overlay-1);
    color: var(--text);
}
.blx-sr-tab--active {
    background: var(--accent-soft);
    color: var(--accent-cool);
    border-color: var(--accent-soft);
}
.blx-sr-tab__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 16px;
    padding: 0 0.35rem;
    border-radius: var(--radius-pill);
    font-size: 0.65rem;
    font-weight: 600;
    background: var(--overlay-2);
    color: var(--text);
    letter-spacing: 0;
    text-transform: none;
}
.blx-sr-tab--active .blx-sr-tab__count {
    background: var(--accent-soft);
    color: var(--accent-cool-soft);
}

/* Body -------------------------------------------------------------------- */
.blx-sr-pane__body {
    flex: 1;
    overflow-y: auto;
    padding: 0.7rem 0.7rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.blx-sr-pane__body > * {
    flex-shrink: 0;
}
.blx-sr-search {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.45rem;
    min-height: 34px;
    padding: 0 0.65rem;
    border: 1px solid var(--border);
    border-radius: 0.45rem;
    background: var(--bg-raised);
    color: var(--text-muted);
}
.blx-sr-search:focus-within {
    border-color: var(--accent-soft);
    box-shadow: 0 0 0 2px var(--accent-soft);
}
.blx-sr-search__icon {
    display: inline-flex;
    color: var(--text-faint);
}
.blx-sr-search__input {
    min-width: 0;
    height: 32px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 0.78rem;
}
.blx-sr-search__input::placeholder {
    color: var(--text-faint);
}
.blx-sr-category-filter {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem 0.65rem;
    overflow: visible;
}
.blx-sr-category-filter .blx-sr-tab {
    justify-content: center;
    min-width: 0;
    padding-inline: 0.45rem;
}
.blx-sr-category-filter .blx-sr-tab > span:not(.blx-sr-tab__count) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.blx-sr-pane__hint,
.blx-sr-pane__err {
    margin: 0;
    padding: 0.55rem 0.7rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    border-radius: 0.4rem;
    background: var(--overlay-1);
    border: 1px solid var(--border);
}
.blx-sr-pane__err {
    background: var(--overlay-2);
    color: var(--danger);
    border-color: var(--text-muted);
}

/* Empty state ------------------------------------------------------------- */
.blx-sr-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.6rem;
    padding: 2rem 1rem;
    border: 1px dashed var(--border-strong);
    border-radius: 0.6rem;
    background: var(--overlay-1);
}
.blx-sr-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-circle);
    background: var(--accent-soft);
    color: var(--accent-cool);
}
.blx-sr-empty__text {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.82rem;
}

/* Card -------------------------------------------------------------------- */
.blx-sr-card {
    border: 1px solid var(--border);
    border-radius: 0.55rem;
    background: var(--bg-raised);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: border-color 140ms ease, background 140ms ease,
        box-shadow 140ms ease, transform 140ms ease;
}
.blx-sr-card:hover:not(.blx-sr-card--open) {
    border-color: var(--border-strong);
    background: var(--overlay-2);
}
.blx-sr-card--open {
    border-color: var(--accent-soft);
    background: var(--accent-soft);
    box-shadow: 0 0 0 1px var(--accent-cool-soft);
}
.blx-sr-card--open:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.blx-sr-card--composer {
    border-style: dashed;
}
.blx-sr-card--off {
    opacity: 0.7;
}
.blx-sr-card--off .blx-sr-card__title {
    color: var(--text-muted);
}

.blx-sr-card__row {
    all: unset;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.75rem;
    cursor: pointer;
    width: 100%;
}
.blx-sr-card__row:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    border-radius: 0.45rem;
}
.blx-sr-card__row--static {
    cursor: default;
}

.blx-sr-card__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--text-faint);
    transition: transform 160ms ease, color 140ms ease;
}
.blx-sr-card--open .blx-sr-card__chevron {
    transform: rotate(90deg);
    color: var(--accent-cool);
}

.blx-sr-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 0.4rem;
    background: var(--overlay-1);
    color: var(--text-muted);
    border: 1px solid var(--border);
}
.blx-sr-card--open .blx-sr-card__icon {
    background: var(--accent-soft);
    color: var(--accent-cool);
    border-color: var(--accent-soft);
}

.blx-sr-card__main {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}
.blx-sr-card__title-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}
.blx-sr-card__title {
    min-width: 0;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.blx-sr-card__title-input {
    min-width: 0;
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--accent-soft);
    color: var(--text);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    padding: 0.05rem 0 0.12rem;
}
.blx-sr-card__title-input::placeholder {
    color: var(--text-faint);
}
.blx-sr-card__title-input:focus {
    outline: none;
    border-bottom-color: var(--accent-soft);
}
.blx-sr-card__summary {
    font-size: 0.76rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.blx-sr-card--open .blx-sr-card__summary {
    white-space: normal;
}

.blx-sr-card__badge {
    font-size: 0.6rem;
    padding: 0.12rem 0.4rem;
    border-radius: 0.3rem;
    background: var(--overlay-2);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: 1px solid var(--border);
    font-weight: 600;
    flex-shrink: 0;
}
.blx-sr-card__badge[data-kind="core"] {
    background: var(--accent-soft);
    color: var(--accent-cool);
    border-color: var(--accent-soft);
}
.blx-sr-card__badge[data-kind="rule"] {
    background: var(--accent-soft);
    color: var(--accent-cool);
    border-color: var(--accent-soft);
}
.blx-sr-card__category-line {
    display: inline-flex;
    min-width: 0;
    max-width: 100%;
}
.blx-sr-card__category {
    flex-shrink: 0;
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0.1rem 0.35rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--overlay-1);
    color: var(--text-muted);
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1.35;
}
.blx-sr-card--open .blx-sr-card__category {
    border-color: var(--accent-soft);
    color: var(--accent-cool);
}
.blx-sr-card__main > .blx-sr-card__category-line {
    margin-top: 0.05rem;
}
.blx-sr-card__body > .blx-sr-card__category-line {
    padding-top: 0.1rem;
    justify-content: flex-start;
}
.blx-sr-card__badge[data-kind="git"] {
    background: var(--overlay-2);
    color: var(--text-muted);
    border-color: var(--text-muted);
}
.blx-sr-card__badge[data-kind="npm"] {
    background: var(--overlay-2);
    color: var(--danger);
    border-color: var(--text-muted);
}
.blx-sr-card__badge[data-kind="local"] {
    background: var(--overlay-2);
    color: var(--warning);
    border-color: var(--text-muted);
}
.blx-sr-card__badge[data-kind="agent"] {
    background: var(--accent-cool-soft);
    color: var(--syntax-type);
    border-color: var(--success);
}

.blx-sr-card__warn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0.4rem 0.75rem;
    font-size: 0.72rem;
    color: var(--warning);
    background: var(--overlay-2);
    border-top: 1px solid var(--overlay-2);
}

/* Expanded body (email-client style reader) ------------------------------- */
.blx-sr-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.75rem 0.9rem 0.85rem;
    border-top: 1px solid var(--border);
    background: var(--bg-app);
    animation: blx-sr-expand 180ms ease-out;
}
@keyframes blx-sr-expand {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.blx-sr-card__hint {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-faint);
    font-style: italic;
}
.blx-sr-card__md {
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--text);
    max-height: 320px;
    overflow-y: auto;
    padding-right: 0.25rem;
}
.blx-sr-card__md h1,
.blx-sr-card__md h2,
.blx-sr-card__md h3,
.blx-sr-card__md h4 {
    margin: 0.6rem 0 0.3rem;
    color: var(--text);
    font-weight: 600;
}
.blx-sr-card__md h1 { font-size: 0.95rem; }
.blx-sr-card__md h2 { font-size: 0.88rem; }
.blx-sr-card__md h3 { font-size: 0.82rem; }
.blx-sr-card__md p { margin: 0.35rem 0; }
.blx-sr-card__md ul,
.blx-sr-card__md ol { padding-left: 1.2rem; margin: 0.35rem 0; }
.blx-sr-card__md code {
    background: var(--overlay-2);
    padding: 0.05rem 0.3rem;
    border-radius: 0.25rem;
    font-size: 0.78rem;
}
.blx-sr-card__md pre {
    background: var(--scrim-bg);
    padding: 0.6rem 0.7rem;
    border-radius: 0.4rem;
    overflow-x: auto;
    border: 1px solid var(--border);
}
.blx-sr-card__md pre code { background: transparent; padding: 0; }
.blx-sr-card__md a { color: var(--accent); text-decoration: none; }
.blx-sr-card__md a:hover { text-decoration: underline; }
.blx-sr-card__editor {
    width: 100%;
    min-height: 260px;
    max-height: 360px;
    resize: vertical;
    overflow-y: auto;
    background: var(--scrim-bg);
    border: 1px solid var(--border);
    border-radius: 0.45rem;
    color: var(--text);
    font: inherit;
    font-size: 0.8rem;
    line-height: 1.55;
    padding: 0.65rem 0.75rem;
}
.blx-sr-card__editor:focus {
    outline: none;
    border-color: var(--accent-soft);
    box-shadow: 0 0 0 2px var(--accent-soft);
}
.blx-sr-card__error {
    margin: -0.1rem 0 0;
    color: var(--danger);
    font-size: 0.76rem;
}
.blx-sr-card__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
    padding-top: 0.3rem;
    border-top: 1px dashed var(--border);
}

/* shadcn-style switch ---------------------------------------------------- */
.blx-switch {
    --switch-w: 30px;
    --switch-h: 17px;
    --thumb: 13px;
    position: relative;
    display: inline-flex;
    align-items: center;
    width: var(--switch-w);
    height: var(--switch-h);
    background: var(--overlay-3);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background 160ms ease, box-shadow 160ms ease;
    border: 1px solid var(--border);
    flex-shrink: 0;
}
.blx-switch:hover { background: var(--overlay-4); }
.blx-switch:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--accent-soft);
}
.blx-switch__thumb {
    position: absolute;
    top: 50%;
    left: 1px;
    width: var(--thumb);
    height: var(--thumb);
    border-radius: var(--radius-circle);
    background: var(--text-muted);
    transform: translateY(-50%);
    transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1),
        background 160ms ease;
    box-shadow: 0 1px 2px var(--scrim-bg);
}
.blx-switch--on {
    background: var(--accent);
    border-color: var(--accent);
}
.blx-switch--on:hover { background: var(--accent-hover); }
.blx-switch--on .blx-switch__thumb {
    transform: translate(calc(var(--switch-w) - var(--thumb) - 4px), -50%);
    background: var(--text-bright);
}

/* Buttons ----------------------------------------------------------------- */
.blx-sr-btn {
    background: var(--overlay-1);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 0.4rem;
    padding: 0.32rem 0.65rem;
    font-size: 0.74rem;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.blx-sr-btn:hover:not(:disabled) {
    background: var(--overlay-2);
    border-color: var(--border-strong);
}
.blx-sr-btn:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}
.blx-sr-btn:disabled {
    opacity: 0.5;
    cursor: progress;
}
.blx-sr-btn--primary {
    background: var(--accent-soft);
    border-color: var(--accent-soft);
    color: var(--accent-cool);
}
.blx-sr-btn--primary:hover:not(:disabled) {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-cool-soft);
}
.blx-sr-btn--icon {
    padding: 0.32rem;
    width: 28px;
    height: 28px;
    justify-content: center;
    color: var(--text-muted);
}
.blx-sr-btn--icon:hover:not(:disabled) {
    color: var(--text);
}
.blx-sr-btn--ghost {
    background: transparent;
    border-color: var(--border);
    color: var(--text-muted);
}
.blx-sr-btn--ghost:hover:not(:disabled) {
    background: var(--overlay-1);
    color: var(--text);
}
.blx-sr-btn--danger {
    background: var(--overlay-2);
    border-color: var(--text-muted);
    color: var(--danger);
}
.blx-sr-btn--danger:hover:not(:disabled) {
    background: var(--overlay-2);
    border-color: var(--text-muted);
    color: var(--text-muted);
}

/* Install dialog */
.blx-sr-dialog__backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
}
.blx-sr-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(440px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    background: var(--text-muted);
    border: 1px solid var(--overlay-3);
    border-radius: 0.6rem;
    box-shadow: 0 12px 40px var(--scrim-bg);
    display: flex;
    flex-direction: column;
    z-index: 100;
    overflow: hidden;
}
.blx-sr-dialog__header {
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--overlay-2);
}
.blx-sr-dialog__header h2 {
    margin: 0;
    font-size: 0.95rem;
}
.blx-sr-dialog__body {
    padding: 0.75rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    overflow-y: auto;
}
.blx-sr-dialog__row {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.blx-sr-dialog__row label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text);
}
.blx-sr-dialog__row input {
    background: var(--scrim-bg);
    border: 1px solid var(--overlay-3);
    border-radius: 0.35rem;
    color: inherit;
    padding: 0.4rem 0.55rem;
    font-size: 0.85rem;
}
.blx-sr-dialog__row input:focus {
    outline: none;
    border-color: var(--text-muted);
    box-shadow: 0 0 0 2px var(--overlay-2);
}
.blx-sr-dialog__segmented {
    display: inline-flex;
    border: 1px solid var(--overlay-3);
    border-radius: 0.4rem;
    overflow: hidden;
}
.blx-sr-seg {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 0.3rem 0.7rem;
    font-size: 0.78rem;
    cursor: pointer;
}
.blx-sr-seg + .blx-sr-seg {
    border-left: 1px solid var(--overlay-3);
}
.blx-sr-seg--active {
    background: var(--accent-soft);
    color: var(--text-bright);
}
.blx-sr-dialog__err {
    margin: 0;
    color: var(--danger);
    font-size: 0.78rem;
}
.blx-sr-dialog__footer {
    padding: 0.6rem 0.9rem;
    border-top: 1px solid var(--overlay-2);
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
}

/* Sidebar view sections (Explorer + Git graph) */
.sidebar-view-section {
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 0 0 auto;
}

/* Slot wrappers in `.workbench-sidebar__panels` control the section height now. */
.sidebar-view-section--sb-explorer,
.sidebar-view-section--sb-graph {
  flex: 0 0 auto;
}

.sidebar-view-section--sb-explorer.sidebar-view-section--open,
.sidebar-view-section--sb-graph.sidebar-view-section--open {
  flex: 1 1 auto;
  min-height: 0;
}

.sidebar-view-section__head {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 22px;
  padding: 0 0.35rem 0 0.25rem;
  background: var(--bg-panel-header);
  gap: 0.15rem;
}

.sidebar-view-section__head:hover .sidebar-view-section__toolbar,
.sidebar-view-section__head:focus-within .sidebar-view-section__toolbar {
  opacity: 1;
}

/* Project Files and git toolbars keep their actions visible at all times,
   not only on hover. */
.sidebar-view-section--sb-explorer .sidebar-view-section__toolbar,
.sidebar-view-section--sb-diff .sidebar-view-section__toolbar,
.sidebar-view-section--sb-graph .sidebar-view-section__toolbar {
  opacity: 1;
}

/* Wrapper that carries the tooltip for a possibly-disabled toolbar button —
   a disabled button receives no hover events, so its own title never shows. */
.sidebar-view-section__icon-btn-wrap {
  display: inline-flex;
}

.sidebar-view-section__sync-spin {
  display: inline-flex;
  animation: sidebar-view-section-spin 0.8s linear infinite;
}

@keyframes sidebar-view-section-spin {
  to {
    transform: rotate(360deg);
  }
}

.sidebar-view-section__toggle {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: transparent;
  border: none;
  padding: 0.2rem 0.15rem;
  cursor: pointer;
  text-align: left;
}

.sidebar-view-section__toggle:hover,
.sidebar-view-section__toggle:focus-visible {
  color: var(--text);
}

.sidebar-view-section__chev {
  flex-shrink: 0;
  width: 0.85rem;
  font-size: 0.62rem;
  opacity: 0.85;
}

.sidebar-view-section__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-view-section__toolbar {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.sidebar-view-section__icon-btn {
  font: inherit;
  font-size: 0.72rem;
  line-height: 1;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  padding: 0.15rem 0.3rem;
  cursor: pointer;
}

.sidebar-view-section__icon-btn:hover,
.sidebar-view-section__icon-btn:focus-visible {
  color: var(--text);
  background: var(--bg-hover);
  border-color: var(--border);
}

.sidebar-view-section__icon-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.sidebar-view-section__icon-btn:disabled:hover {
  color: var(--text-muted);
  background: transparent;
  border-color: transparent;
}

.sidebar-view-section__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.sidebar-view-section__body--collapsed {
  display: none;
}

.sidebar-view-section__empty {
  margin: 0;
  padding: 0.45rem 0.65rem 0.55rem;
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.project-explorer__tree {
  list-style: none;
  margin: 0;
  padding: 0;
}

.project-explorer__row {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  min-height: 22px;
  /* Extra right padding keeps the hover actions (New File / New Folder) clear
     of the body scrollbar so it can't sit on top of them and swallow clicks.
     The row background fills the padding, so the row still reads full-width. */
  padding: 0.1rem 0.75rem 0.1rem 0;
  font-size: 0.78rem;
  color: var(--text);
  cursor: default;
  box-sizing: border-box;
}

.project-explorer__row--hidden {
  opacity: 0.45;
}

.project-explorer__row:hover {
  background: var(--overlay-2);
}

.project-explorer__row--file {
  cursor: default;
}

.project-explorer__row--dir {
  cursor: pointer;
}

.project-explorer__draft-row {
  cursor: text;
}

.project-explorer__draft-input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 0.78rem;
  color: var(--text);
  background: var(--bg-raised);
  border: 1px solid var(--border-focus);
  border-radius: var(--radius-xs);
  padding: 0.05rem 0.3rem;
  outline: none;
}

.project-explorer__draft-input::placeholder {
  color: var(--text-muted);
}

.project-explorer__draft-error {
  margin: 0.15rem 0 0.25rem 1.65rem;
  font-size: 0.72rem;
  color: var(--accent-warm);
}

.sidebar-view-section__icon-btn--pressed {
  color: var(--text);
  background: var(--bg-hover);
  border-color: var(--border);
}

.project-explorer__chev-btn {
  flex-shrink: 0;
  width: 1rem;
  font: inherit;
  font-size: 0.62rem;
  color: var(--text-muted);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

.project-explorer__chev-btn--spacer {
  cursor: default;
  opacity: 0.35;
}

.project-explorer__chev--spacer {
  display: inline-block;
  width: 1rem;
}

.project-explorer__icon {
  flex-shrink: 0;
  display: inline-flex;
  opacity: 0.85;
}

.project-explorer__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Persistent selection — accent-tinted so it stays distinct from the
   mouse-following :hover background. Declared after the :hover rule so a
   selected row keeps its mark even while hovered. */
.project-explorer__row--selected,
.project-explorer__row--selected:hover {
  background: var(--accent-soft);
  color: var(--text);
}

.project-explorer__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.05rem;
  flex-shrink: 0;
  margin-left: 0.2rem;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.project-explorer__row:hover .project-explorer__actions,
.project-explorer__row:focus-within .project-explorer__actions {
  opacity: 1;
}

.project-explorer__action {
  flex-shrink: 0;
  width: 1.05rem;
  height: 1.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  padding: 0;
  cursor: pointer;
}

.project-explorer__action:hover,
.project-explorer__action:focus-visible {
  color: var(--text);
  background: var(--overlay-3);
  border-color: var(--border);
}

.git-graph__list {
  list-style: none;
  margin: 0;
  padding: 0.1rem 0 0.35rem;
  --git-graph-lane-step: 12px;
  --git-graph-gutter-pad: 8px;
  --git-lane-0: #6ea1ff;
  --git-lane-1: #d7b428;
  --git-lane-2: #b07cff;
  --git-lane-3: #4dbd87;
  --git-lane-4: #f28b82;
  --git-lane-5: #56b6c2;
  --git-lane-6: #c678dd;
  --git-lane-7: #e5a76b;
}

.git-graph__row {
  position: relative;
  font-size: 0.78rem;
  color: var(--text);
}

.git-graph__row--selected > .git-graph__line {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  outline: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: -1px;
}

.git-graph__row--hovered > .git-graph__line {
  background: var(--overlay-2);
}

.git-graph__line {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 22px;
  padding-right: 0.65rem;
}

.git-graph__gutter {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--git-graph-gutter-pad) * 2 + var(--git-graph-lanes, 1) * var(--git-graph-lane-step));
  min-width: 32px;
  user-select: none;
}

.git-graph__lane,
.git-graph__edge,
.git-graph__node {
  position: absolute;
  pointer-events: none;
}

.git-graph__lane {
  left: calc(var(--git-graph-gutter-pad) + var(--lane) * var(--git-graph-lane-step));
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-1px);
  background: color-mix(in srgb, var(--lane-color) 72%, transparent);
}

.git-graph__edge {
  left: calc(var(--git-graph-gutter-pad) + var(--lane) * var(--git-graph-lane-step));
  top: 50%;
  width: calc(var(--edge-width) * var(--git-graph-lane-step));
  height: 9px;
  border-top: 2px solid color-mix(in srgb, var(--lane-color) 78%, transparent);
  border-left: 2px solid color-mix(in srgb, var(--lane-color) 78%, transparent);
  border-top-left-radius: 7px;
}

.git-graph__node {
  left: calc(var(--git-graph-gutter-pad) + var(--lane) * var(--git-graph-lane-step));
  top: 50%;
  width: 9px;
  height: 9px;
  transform: translate(-50%, -50%);
  border-radius: var(--radius-circle);
  background: var(--lane-color);
  border: 1px solid var(--bg-panel);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--lane-color) 60%, transparent);
}

.git-graph__node--selected {
  background: var(--git-lane-1);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--git-lane-1) 45%, transparent);
}

.git-graph__commit-btn {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 22px;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  margin-left: calc(
    var(--git-graph-gutter-pad) + var(--text-lane, 0) * var(--git-graph-lane-step) + 0.58rem
  );
  padding: 0 0.2rem 0 0.1rem;
  cursor: pointer;
}

.git-graph__commit-btn:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: -1px;
}

.git-graph__subject {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}

.git-graph__ref {
  flex-shrink: 0;
  font-size: 0.62rem;
  padding: 0.05rem 0.35rem;
  border-radius: var(--radius-xs);
  background: var(--overlay-2);
  color: var(--accent-cool);
  border: 1px solid var(--overlay-2);
}

.git-graph__expanded {
  margin-left: calc(
    var(--git-graph-gutter-pad) + var(--text-lane, 0) * var(--git-graph-lane-step) + 0.68rem
  );
  padding: 0 0.65rem 0.25rem 0;
}

.git-graph__expanded-meta {
  display: flex;
  gap: 0.4rem;
  min-width: 0;
  padding: 0.05rem 0 0.12rem;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.git-graph__expanded-meta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.git-graph__files {
  list-style: none;
  margin: 0;
  padding: 0;
}

.git-graph__file {
  display: flex;
  align-items: center;
  min-height: 21px;
  gap: 0.35rem;
  min-width: 0;
}

.git-graph__file-status {
  flex: 0 0 1rem;
  width: 1rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--accent-cool);
}

.git-graph__file-status--added {
  color: var(--success);
}

.git-graph__file-status--deleted {
  color: var(--danger);
}

.git-graph__file-status--renamed,
.git-graph__file-status--copied {
  color: var(--accent);
}

.git-graph__file-path {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.git-graph__file-dir {
  color: var(--text-muted);
}

.git-graph__file-name {
  color: var(--text);
}

.git-graph__file-stats {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

.git-graph__stat--add {
  color: var(--success);
}

.git-graph__stat--del {
  color: var(--danger);
}

.git-graph__details-empty {
  margin: 0;
  padding: 0.15rem 0 0.25rem;
  color: var(--text-muted);
  font-size: 0.72rem;
}

.git-graph__hover-card {
  position: fixed;
  z-index: 10000;
  left: 0.75rem;
  top: 0.75rem;
  width: min(420px, calc(100vw - 32px));
  max-width: min(92vw, 420px);
  max-height: min(70vh, 520px);
  overflow: auto;
  padding: 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  color: var(--text);
  box-shadow: 0 16px 40px color-mix(in srgb, var(--scrim-bg) 68%, transparent);
}

.git-graph__hover-head,
.git-graph__hover-foot,
.git-graph__hover-stats,
.git-graph__hover-refs {
  display: flex;
  align-items: center;
  min-width: 0;
}

.git-graph__hover-head {
  gap: 0.35rem;
}

.git-graph__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 1.25rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--radius-xs);
  background: var(--overlay-3);
  color: var(--text);
  font-size: 0.62rem;
  font-weight: 700;
}

.git-graph__hover-author {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.git-graph__hover-time {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 0.72rem;
}

.git-graph__hover-subject,
.git-graph__hover-body {
  margin: 0.45rem 0 0;
  line-height: 1.35;
}

.git-graph__hover-subject {
  font-weight: 600;
}

.git-graph__hover-body {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-muted);
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.git-graph__hover-stats {
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.55rem;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.git-graph__hover-refs {
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.45rem;
}

.git-graph__hover-foot {
  gap: 0.45rem;
  margin-top: 0.55rem;
}

.git-graph__sha {
  font-family: var(--font-mono);
  color: var(--accent-cool);
}

.git-graph__hover-loading {
  color: var(--text-muted);
  font-size: 0.72rem;
}

.git-graph__github {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
  border: none;
  border-radius: var(--radius-xs);
  background: var(--overlay-2);
  color: var(--text);
  font: inherit;
  font-size: 0.72rem;
  padding: 0.2rem 0.35rem;
  cursor: pointer;
}

.git-graph__github:hover,
.git-graph__github:focus-visible {
  background: var(--overlay-3);
  outline: 1px solid var(--accent);
}
.workbench-plans {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    color: var(--blx-fg);
}

.workbench-plans__error {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    background: var(--danger-soft);
    border-bottom: 1px solid var(--danger-soft);
    font-size: 0.78rem;
    color: var(--text-muted);
}

.workbench-plans__error-dismiss {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 0.2rem;
}

.workbench-plans__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--blx-fg-muted);
}

.workbench-plans__placeholder-title {
    font-weight: 600;
    margin: 0;
}

.workbench-plans__placeholder-lead {
    margin: 0;
    font-size: 0.85rem;
}

.workbench-plans-manage {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: 0;
    flex: 1 1 auto;
    height: 100%;
    min-width: 0;
}

@media (max-width: 52rem) {
    .workbench-plans-manage {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(10rem, 38vh) 1fr;
    }

    .workbench-plans-manage--collapsed {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(3.8rem, auto) 1fr;
    }
}

.workbench-plans-manage__tree {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    border-right: 1px solid var(--overlay-2);
    background: var(--overlay-1);
}

.workbench-plans-manage__tree--collapsed {
    align-items: center;
}

.workbench-plans-manage__new {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.45rem 0.5rem;
    border-bottom: 1px solid var(--overlay-1);
}

.workbench-plans-manage__new--collapsed {
    flex-direction: column;
    align-items: center;
    padding: 0.45rem 0.35rem;
}

.workbench-plans-manage__new-input {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--blx-bg-elev, var(--bg-panel));
    border: 1px solid var(--blx-border-subtle, var(--bg-panel-header));
    border-radius: var(--radius-sm);
    color: var(--blx-fg);
    padding: 0.25rem 0.4rem;
    font-size: 0.8rem;
}

.workbench-plans-manage__new-btn,
.workbench-plans-manage__refresh {
    padding: 0 0.6rem;
    font: inherit;
    color: inherit;
    background: var(--overlay-2);
    border: 1px solid var(--overlay-3);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.workbench-plans-manage__new-btn:hover,
.workbench-plans-manage__refresh:hover {
    background: var(--overlay-3);
}

.workbench-plans-manage__collapse-btn {
    padding: 0;
    width: 1.8rem;
    height: 1.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    background: var(--overlay-1);
    border: 1px solid var(--overlay-3);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.workbench-plans-manage__collapse-btn:hover {
    background: var(--overlay-3);
}

.workbench-plans-manage__list {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-y: auto;
    flex: 1 1 auto;
}

.workbench-plans-manage__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.3rem 0.4rem;
    padding: 0.42rem 0.55rem;
    border-bottom: 1px solid var(--overlay-2);
    font-size: 0.8rem;
    transition: background 0.1s ease;
}

.workbench-plans-manage__row--collapsed {
    display: flex;
    justify-content: center;
    padding: 0.22rem 0.2rem;
}

.workbench-plans-manage__row:hover {
    background: var(--overlay-2);
}

.workbench-plans-manage__row--active {
    background: var(--overlay-2);
}

.workbench-plans-manage__row--active:hover {
    background: var(--overlay-2);
}

.workbench-plans-manage__row-main {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    padding: 0.1rem 0;
}

.workbench-plans-manage__row-title {
    font-weight: 600;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workbench-plans-manage__row-summary {
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.workbench-plans-manage__row-action {
    background: transparent;
    border: 0;
    color: var(--blx-fg-muted);
    cursor: pointer;
    padding: 0.35rem;
    border-radius: var(--radius-xs);
    align-self: center;
}

.workbench-plans-manage__row-action:hover {
    color: var(--blx-fg);
    background: var(--overlay-1);
}

.workbench-plans-manage__badge {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--text);
    background: linear-gradient(180deg, var(--accent-soft), var(--accent-soft));
    border: 1px solid var(--accent-soft);
    border-radius: var(--radius-pill);
    cursor: pointer;
    box-shadow: inset 0 1px 0 var(--overlay-1);
}

.workbench-plans-manage__badge:hover {
    background: linear-gradient(180deg, var(--accent-soft), var(--accent-soft));
    border-color: var(--accent-soft);
}

.workbench-plans-manage__row--active .workbench-plans-manage__badge {
    background: linear-gradient(180deg, var(--overlay-2), var(--overlay-2));
    border-color: var(--text-muted);
}

.workbench-plans-manage__rename {
    grid-column: 1 / -1;
    display: flex;
    gap: 0.25rem;
    align-items: center;
    padding-top: 0.25rem;
}

.workbench-plans-manage__rename-input {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--blx-bg-elev, var(--bg-panel));
    border: 1px solid var(--blx-border-subtle, var(--bg-panel-header));
    border-radius: var(--radius-xs);
    color: var(--blx-fg);
    padding: 0.2rem 0.35rem;
    font-size: 0.78rem;
}

.workbench-plans-manage__rename-btn {
    background: transparent;
    border: 1px solid var(--blx-border-subtle, var(--bg-panel-header));
    border-radius: var(--radius-xs);
    color: inherit;
    cursor: pointer;
    padding: 0.15rem 0.4rem;
    font-size: 0.78rem;
}

.workbench-plans-manage__editor {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    border-left: 1px solid var(--blx-border-subtle, var(--bg-panel-header));
}

.workbench-plans-manage__editor-empty {
    margin: auto;
    color: var(--blx-fg-muted);
    font-size: 0.9rem;
    padding: 1rem;
}

.workbench-plans-manage__toolbar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--blx-border-subtle, var(--bg-panel-header));
    font-size: 0.78rem;
}

.workbench-plans-manage__path {
    color: var(--blx-fg-muted);
    font-family: var(--blx-font-mono, monospace);
}

.workbench-plans-manage__protected {
    color: var(--warning);
    font-size: 0.72rem;
}

.workbench-plans-manage__spacer {
    flex: 1 1 auto;
}

.workbench-plans-manage__btn {
    background: transparent;
    border: 1px solid var(--blx-border-subtle, var(--bg-panel-header));
    border-radius: var(--radius-sm);
    color: var(--blx-fg);
    cursor: pointer;
    padding: 0.2rem 0.6rem;
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.workbench-plans-manage__btn--primary {
    background: var(--overlay-2);
    border-color: var(--text-muted);
}

.workbench-plans-manage__btn--primary:hover {
    background: var(--overlay-2);
}

.workbench-plans-manage__textarea {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    background: var(--blx-bg-elev, var(--bg-panel));
    color: var(--blx-fg);
    border: 0;
    padding: 0.6rem 0.8rem;
    font-family: var(--blx-font-mono, monospace);
    font-size: 0.85rem;
    resize: none;
    outline: none;
}

.workbench-plans-manage__preview {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.6rem 0.8rem;
}