:root {
  /* Light mode (default) — Earthy Botanica design guide */
  color-scheme: light;
  --bg: #f5f5f5;
  --surface: #ffffff;
  /* Code / inset fields (must be defined — used by components that probe `var(--panel)`) */
  --panel: #f0f0f0;
  --border: #e5e5e5;
  --text: #111111;
  --muted: #888888;
  --accent: #6a8558;
  /* Mermaid / node chrome: deeper accent for outlines (tracks --accent + theme) */
  --accent-node-border: color-mix(in srgb, var(--accent) 68%, var(--text));
  --danger: #a84040;
  --ok: #587840;
  --warn: #9a6820;
  --button-fg: #ffffff;

  /* Status badge backgrounds (light mode) */
  --badge-pending-bg: #eef3e8;
  --badge-running-bg: #9e5244;
  --badge-running-fg: #ffffff;
  --badge-success-bg: #ebf4e4;
  --badge-failed-bg: #f9ecea;
  --badge-cancelled-bg: #fbf3e4;

  /* iOS-style switch (track colors; knob stays white) */
  --ios-toggle-off: #e9e9ea;
  --ios-toggle-on: #34c759;
  /* Workflow canvas / catalogue: Messages-style green for iMessage nodes */
  --imessage-node-accent: #34c759;
  /* Workflow canvas: disabled node border + title (see `.workflow-canvas-node--disabled`) */
  --workflow-canvas-node-disabled-chrome: color-mix(in srgb, var(--muted) 52%, var(--border));

  /* Design system: typography + layout tokens (see DESIGN_GUIDE.md) */
  --font-title: 'Segoe UI', 'Plus Jakarta Sans', 'Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  --font-ui: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-data: 'Segoe UI', monospace;
  --font-mono: 'Segoe UI', monospace;
  --font-size-title: 1.25rem;
  --font-size-body: calc(1rem + 1px);
  --font-size-small: 0.78rem;
  --radius-control: 6px;
  --radius-button: var(--radius-control);
  --radius-panel: 10px;
  /* Text fields: uniform across platform (see end-of-file override + DESIGN_GUIDE) */
  --mp-form-input-font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mp-form-input-font-size: 14px;
  --mp-form-input-padding: 5px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark mode — Earthy Botanica design guide */
    color-scheme: dark;
    --bg: #111111;
    --surface: #1c1c1c;
    --panel: #161616;
    --border: #2e2e2e;
    --text: #f0eae0;
    --muted: #666666;
    --accent: #8fa07c;
    --accent-node-border: color-mix(in srgb, var(--accent) 52%, var(--bg));
    --danger: #c47068;
    --ok: #7a9a60;
    --warn: #c4944a;
    --button-fg: #111111;

    /* Status badge backgrounds (dark mode) */
    --badge-pending-bg: #1a2218;
    --badge-running-bg: #9e5244;
    --badge-running-fg: #ffffff;
    --badge-success-bg: #0e1a0a;
    --badge-failed-bg: #2a1414;
    --badge-cancelled-bg: #241808;

    --ios-toggle-off: color-mix(in srgb, var(--border) 55%, var(--panel));
    --ios-toggle-on: #30d158;
    --imessage-node-accent: #30d158;
  }
}

:root[data-theme='light'] {
  /* Manual override — Earthy Botanica design guide */
  color-scheme: light;
  --bg: #f5f5f5;
  --surface: #ffffff;
  --panel: #f0f0f0;
  --border: #e5e5e5;
  --text: #111111;
  --muted: #888888;
  --accent: #6a8558;
  --accent-node-border: color-mix(in srgb, var(--accent) 68%, var(--text));
  --danger: #a84040;
  --ok: #587840;
  --warn: #9a6820;
  --button-fg: #ffffff;

  --badge-pending-bg: #eef3e8;
  --badge-running-bg: #9e5244;
  --badge-running-fg: #ffffff;
  --badge-success-bg: #ebf4e4;
  --badge-failed-bg: #f9ecea;
  --badge-cancelled-bg: #fbf3e4;

  /* iOS-style switch (track colors; knob stays white) */
  --ios-toggle-off: #e9e9ea;
  --ios-toggle-on: #34c759;
  --imessage-node-accent: #34c759;
}

:root[data-theme='dark'] {
  /* Manual override — Earthy Botanica design guide */
  color-scheme: dark;
  --bg: #111111;
  --surface: #1c1c1c;
  --panel: #161616;
  --border: #2e2e2e;
  --text: #f0eae0;
  --muted: #666666;
  --accent: #8fa07c;
  --accent-node-border: color-mix(in srgb, var(--accent) 52%, var(--bg));
  --danger: #c47068;
  --ok: #7a9a60;
  --warn: #c4944a;
  --button-fg: #111111;

  --badge-pending-bg: #1a2218;
  --badge-running-bg: #9e5244;
  --badge-running-fg: #ffffff;
  --badge-success-bg: #0e1a0a;
  --badge-failed-bg: #2a1414;
  --badge-cancelled-bg: #241808;

  --ios-toggle-off: color-mix(in srgb, var(--border) 55%, var(--panel));
  --ios-toggle-on: #30d158;
  --imessage-node-accent: #30d158;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--font-size-body);
  background: var(--bg);
  color: var(--text);
  line-height: calc(1.5em + 1px);
  min-height: 100vh;
}

strong,
b {
  font-weight: 600;
}

a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

a:visited {
  color: var(--accent);
}

a:hover {
  text-decoration: underline;
}

h1,
h2,
h3,
.mp-typ-title,
.nav-brand-text,
.workflow-page-editor-title,
.workflow-page-workflow-heading,
.workflow-page-workflow-empty-title,
.workflows-page-detail-empty-title,
.workflow-builder-wf-title,
.workflow-run-embedded-title,
.prompts-list-title,
.prompts-detail-title,
.prompts-page-detail-empty-title,
.platform-confirm-title,
.ned-session-logs-popup-title {
  font-family: var(--font-title);
  font-weight: 600;
}

/* App shell: top menubar + content body */
.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.app-menubar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  backdrop-filter: blur(14px);
}

.app-nav.app-menubar-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.75rem;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.45rem 0.9rem;
}

.app-menubar-brand-wrap {
  flex-shrink: 0;
}

.app-menubar-brand-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.app-menubar-links {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
}

.app-menubar-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-left: auto;
  min-width: 0;
}

.nav-theme-icon-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 2.35rem;
  height: 2.35rem;
  min-width: 2.35rem;
  min-height: 2.35rem;
  border-radius: var(--radius-button);
}

.nav-theme-icon {
  display: block;
  /* Slightly larger than .sidebar-nav-svg: sun/moon/monitor paths use less of the viewBox than nav arrows. */
  width: 1.45rem;
  height: 1.45rem;
}

/* Don't leave a persistent focus state after mouse click; keep keyboard focus visible. */
.app-menubar button.nav-theme-icon-btn:focus {
  outline: none;
  box-shadow: none;
}

.app-menubar button.nav-theme-icon-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 65%, #fff);
  outline-offset: 2px;
}

.nav-brand {
  display: inline-block;
  text-decoration: none;
  line-height: 1.2;
}

.nav-brand:hover .nav-brand-text {
  filter: brightness(1.12);
}

.nav-brand-text {
  font-weight: 600;
  font-size: 1.28rem;
  letter-spacing: -0.045em;
  line-height: 1.15;
  background: linear-gradient(100deg, var(--accent) 0%, #62d9c1 52%, var(--text) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Workflow builder: flow canvas (nodes + static edges; pan/zoom) */
.workflow-canvas-host {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.workflow-canvas-root {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  padding-bottom: 1rem;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  --workflow-canvas-grid-dot: color-mix(in srgb, var(--border) 70%, var(--muted) 30%);
}

.workflow-canvas-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin-top: 20px;
  margin-bottom: 0.4rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: auto;
  font-family: var(--font-ui);
  font-size: calc(var(--font-size-body) - 1px);
}

.workflow-canvas-head:has(.workflow-canvas-head-overflow) {
  overflow: visible;
}

/* Global `label { font-size: 0.85rem }` and UA `button` font would otherwise shrink toggles vs primary buttons. */
.workflow-canvas-head button {
  font-family: var(--font-ui);
  font-size: inherit;
  font-weight: 500;
}

.workflow-canvas-head label.node-run-toggle {
  font-family: var(--font-ui);
  font-size: inherit;
  font-weight: 400;
}

.workflow-canvas-head label.workflow-canvas-gap-label {
  font-family: var(--font-ui);
  font-size: inherit;
  font-weight: 400;
}

.workflow-canvas-head input.workflow-canvas-grid-gap-input {
  font-family: var(--font-ui);
  font-size: inherit;
  font-weight: 400;
}

.workflow-canvas-head .node-run-toggle__caption {
  font-family: var(--font-ui);
  font-size: inherit;
  font-weight: 400;
}

.workflow-canvas-head .muted {
  font-size: inherit;
}

.workflow-canvas-head-prefix {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 1;
}

/* Workflow editor: inset canvas head so Run Workflow chrome is not clipped. */
.workflows-page-detail-host--edit .workflow-canvas-head {
  overflow: visible;
  padding: 6px 5px 2px;
  box-sizing: border-box;
}

/* Workflow editor: Run Workflow + Add Node — gray border like row neighbors; label stays accent blue */
.workflow-canvas-head-prefix > button:not(.secondary),
.workflow-builder-name-row > button {
  flex-shrink: 0;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--border);
  box-shadow: none;
}

.workflow-canvas-head-prefix > button:not(.secondary):hover,
.workflow-builder-name-row > button:hover {
  background: var(--bg);
  border-color: var(--accent);
  color: var(--accent);
}

/* Workflow canvas head: Run Workflow — liquid glass */
.workflow-canvas-head-prefix > button.workflow-run-trigger[data-meno-workflow-run] {
  margin-left: auto;
  margin-right: 25px;
  position: relative;
  isolation: isolate;
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-button);
  color: color-mix(in srgb, var(--accent) 70%, var(--text));
  background: transparent;
  --run-wf-btn-border-top: color-mix(in srgb, var(--accent) 6%, var(--border));
  --run-wf-btn-border-left: color-mix(in srgb, var(--accent) 7%, var(--border));
  --run-wf-btn-border-right: color-mix(in srgb, var(--accent) 9%, var(--border));
  --run-wf-btn-border-bottom: color-mix(in srgb, var(--accent) 8%, var(--border));
  --run-wf-btn-border-top-hover: color-mix(in srgb, var(--accent) 11%, var(--border));
  border-top: 1px solid var(--run-wf-btn-border-top);
  border-left: 1px solid var(--run-wf-btn-border-left);
  border-right: 1px solid var(--run-wf-btn-border-right);
  border-bottom: 1px solid var(--run-wf-btn-border-bottom);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 40%, transparent),
    inset 0 -8px 20px color-mix(in srgb, var(--accent) 4%, transparent),
    0 4px 24px color-mix(in srgb, var(--accent) 8%, transparent),
    0 1px 4px color-mix(in srgb, var(--accent) 5%, transparent);
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.workflow-canvas-head-prefix > button.workflow-run-trigger[data-meno-workflow-run] > * {
  position: relative;
  z-index: 1;
}

/* Glass fill + blur live on ::before so native borders are not clipped by backdrop-filter. */
.workflow-canvas-head-prefix > button.workflow-run-trigger[data-meno-workflow-run]::before {
  content: '';
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  -webkit-backdrop-filter: blur(20px) saturate(1.8) brightness(1.05);
  backdrop-filter: blur(20px) saturate(1.8) brightness(1.05);
  background-color: color-mix(in srgb, var(--accent) 11%, transparent);
  background-image:
    radial-gradient(
      ellipse 70% 40% at 50% 0%,
      color-mix(in srgb, #fff 50%, transparent) 0%,
      color-mix(in srgb, #fff 10%, transparent) 55%,
      transparent 100%
    ),
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--accent) 14%, transparent) 0%,
      color-mix(in srgb, var(--accent) 5%, transparent) 50%,
      color-mix(in srgb, var(--accent) 10%, transparent) 100%
    );
  transition: background-color 0.18s ease, background-image 0.18s ease, -webkit-backdrop-filter 0.18s ease, backdrop-filter 0.18s ease;
}

.workflow-canvas-head-prefix > button.workflow-run-trigger[data-meno-workflow-run]:hover:not(:disabled) {
  border-top-color: var(--run-wf-btn-border-top-hover);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent),
    inset 0 -10px 24px color-mix(in srgb, var(--accent) 5%, transparent),
    0 6px 32px color-mix(in srgb, var(--accent) 10%, transparent),
    0 2px 6px color-mix(in srgb, var(--accent) 6%, transparent);
}

.workflow-canvas-head-prefix > button.workflow-run-trigger[data-meno-workflow-run]:hover:not(:disabled)::before {
  background-color: color-mix(in srgb, var(--accent) 15%, transparent);
  background-image:
    radial-gradient(
      ellipse 70% 40% at 50% 0%,
      color-mix(in srgb, #fff 50%, transparent) 0%,
      color-mix(in srgb, #fff 10%, transparent) 55%,
      transparent 100%
    ),
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--accent) 18%, transparent) 0%,
      color-mix(in srgb, var(--accent) 7%, transparent) 50%,
      color-mix(in srgb, var(--accent) 13%, transparent) 100%
    );
}

.workflow-canvas-head-prefix > button.workflow-run-trigger[data-meno-workflow-run]:disabled {
  opacity: 0.45;
}

.workflow-canvas-head-prefix > button.workflow-run-trigger[data-meno-workflow-run]:disabled::before {
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
}

.workflow-canvas-head-prefix > button.workflow-run-trigger[data-meno-workflow-run]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
  outline-offset: 2px;
}

:root[data-theme='dark'] .workflow-canvas-head-prefix > button.workflow-run-trigger[data-meno-workflow-run] {
  --run-wf-btn-border-top: color-mix(in srgb, var(--accent) 14%, color-mix(in srgb, var(--text) 16%, var(--border)));
  --run-wf-btn-border-left: color-mix(in srgb, var(--accent) 16%, color-mix(in srgb, var(--text) 20%, var(--border)));
  --run-wf-btn-border-right: color-mix(in srgb, var(--accent) 20%, color-mix(in srgb, var(--text) 14%, var(--border)));
  --run-wf-btn-border-bottom: color-mix(in srgb, var(--accent) 18%, color-mix(in srgb, var(--text) 12%, var(--border)));
  --run-wf-btn-border-top-hover: color-mix(in srgb, var(--accent) 22%, color-mix(in srgb, var(--text) 24%, var(--border)));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .workflow-canvas-head-prefix > button.workflow-run-trigger[data-meno-workflow-run] {
    --run-wf-btn-border-top: color-mix(in srgb, var(--accent) 14%, color-mix(in srgb, var(--text) 16%, var(--border)));
    --run-wf-btn-border-left: color-mix(in srgb, var(--accent) 16%, color-mix(in srgb, var(--text) 20%, var(--border)));
    --run-wf-btn-border-right: color-mix(in srgb, var(--accent) 20%, color-mix(in srgb, var(--text) 14%, var(--border)));
    --run-wf-btn-border-bottom: color-mix(in srgb, var(--accent) 18%, color-mix(in srgb, var(--text) 12%, var(--border)));
    --run-wf-btn-border-top-hover: color-mix(in srgb, var(--accent) 22%, color-mix(in srgb, var(--text) 24%, var(--border)));
  }
}

:root[data-theme='light'] .workflow-canvas-head-prefix > button.workflow-run-trigger[data-meno-workflow-run] {
  --run-wf-btn-border-top: color-mix(in srgb, var(--accent) 6%, var(--border));
  --run-wf-btn-border-left: color-mix(in srgb, var(--accent) 7%, var(--border));
  --run-wf-btn-border-right: color-mix(in srgb, var(--accent) 9%, var(--border));
  --run-wf-btn-border-bottom: color-mix(in srgb, var(--accent) 8%, var(--border));
  --run-wf-btn-border-top-hover: color-mix(in srgb, var(--accent) 11%, var(--border));
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) .workflow-canvas-head-prefix > button.workflow-run-trigger[data-meno-workflow-run] {
    --run-wf-btn-border-top: color-mix(in srgb, var(--accent) 6%, var(--border));
    --run-wf-btn-border-left: color-mix(in srgb, var(--accent) 7%, var(--border));
    --run-wf-btn-border-right: color-mix(in srgb, var(--accent) 9%, var(--border));
    --run-wf-btn-border-bottom: color-mix(in srgb, var(--accent) 8%, var(--border));
    --run-wf-btn-border-top-hover: color-mix(in srgb, var(--accent) 11%, var(--border));
  }
}

/* Workflow canvas head: “⋯” overflow — plain icon, top-aligned */
.workflow-canvas-head-overflow {
  flex-shrink: 0;
  position: relative;
  margin-left: 25px;
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}

.workflow-canvas-head-overflow-name {
  font-family: var(--font-ui);
  font-size: inherit;
  font-weight: 500;
  color: color-mix(in srgb, var(--accent) 70%, var(--text));
  line-height: 1.2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-canvas-head-overflow-menu {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  padding-bottom: 8px;
  margin-bottom: -8px;
}

.workflow-canvas-head-overflow-menu-btn {
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  box-shadow: none;
  color: var(--text-muted, var(--text));
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

.workflow-canvas-head-overflow-menu-btn:hover {
  opacity: 1;
}

.workflow-canvas-head-overflow-menu-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
  outline-offset: 2px;
  border-radius: 4px;
}

.workflow-canvas-head-overflow-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.workflow-canvas-head-overflow--after-run .workflow-canvas-head-overflow-popover {
  left: auto;
  right: 0;
  transform-origin: top right;
}

.workflow-canvas-head-overflow-popover {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  min-width: 200px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.18);
  font-family: var(--font-ui);
  font-size: var(--mp-form-input-font-size);
  opacity: 0;
  transform: translateY(-2px);
  pointer-events: none;
  transition:
    opacity 0.12s ease,
    transform 0.12s ease;
}

.workflow-canvas-head-overflow-menu:hover .workflow-canvas-head-overflow-popover,
.workflow-canvas-head-overflow-menu:focus-within .workflow-canvas-head-overflow-popover,
.workflow-canvas-head-overflow-menu.workflow-canvas-head-overflow-menu--open .workflow-canvas-head-overflow-popover {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

button.workflow-canvas-head-overflow-action,
a.workflow-canvas-head-overflow-action {
  box-sizing: border-box;
  width: 100%;
  min-height: 34px;
  height: auto;
  padding: 6px 10px;
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: color-mix(in srgb, var(--muted) 88%, var(--text));
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  line-height: 1.25;
  text-align: left;
}

a.workflow-canvas-head-overflow-action {
  text-decoration: none;
}

button.workflow-canvas-head-overflow-action .workflow-canvas-head-overflow-action-icon,
a.workflow-canvas-head-overflow-action .workflow-canvas-head-overflow-action-icon {
  flex-shrink: 0;
  font-size: 1.15rem;
}

button.workflow-canvas-head-overflow-action:hover,
a.workflow-canvas-head-overflow-action:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--muted) 10%, transparent);
}

button.workflow-canvas-head-overflow-action:focus-visible,
a.workflow-canvas-head-overflow-action:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--text) 35%, transparent);
  outline-offset: 1px;
}

button.workflow-canvas-head-overflow-action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.workflow-canvas-head-overflow-subwf-row {
  box-sizing: border-box;
  width: 100%;
  padding: 4px 6px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.workflow-canvas-head-overflow-subwf-row .workflow-builder-canvas-subwf-toggle {
  width: 100%;
  justify-content: space-between;
}

.workflow-canvas-head-overflow-popover .workflow-canvas-head-overflow-subwf-row label.node-run-toggle {
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  margin: 0;
}

.workflow-canvas-head-overflow-popover .workflow-canvas-head-overflow-subwf-row .node-run-toggle__caption {
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  line-height: 1.25;
  color: color-mix(in srgb, var(--muted) 88%, var(--text));
}

.workflow-canvas-head-overflow-zoom-item {
  position: relative;
  margin: 0;
}

.workflow-canvas-head-overflow-zoom-teaser {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 10px;
  color: color-mix(in srgb, var(--muted) 88%, var(--text));
  cursor: default;
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  line-height: 1.25;
}

.workflow-canvas-head-overflow-zoom-item:hover .workflow-canvas-head-overflow-zoom-teaser,
.workflow-canvas-head-overflow-zoom-item:focus-within .workflow-canvas-head-overflow-zoom-teaser {
  color: var(--text);
  background: color-mix(in srgb, var(--muted) 10%, transparent);
}

.workflow-canvas-head-overflow-chevron {
  margin-left: auto;
  font-size: 1.15rem;
  opacity: 0.75;
}

.workflow-canvas-head-overflow-zoom-popover {
  position: absolute;
  left: calc(100% + 4px);
  top: 0;
  z-index: 60;
  min-width: 240px;
  max-width: min(92vw, 320px);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateX(-4px);
  pointer-events: none;
  transition:
    opacity 0.12s ease,
    transform 0.12s ease;
}

.workflow-canvas-head-overflow-zoom-item:hover .workflow-canvas-head-overflow-zoom-popover,
.workflow-canvas-head-overflow-zoom-item:focus-within .workflow-canvas-head-overflow-zoom-popover {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.workflow-canvas-grid-toolbar.workflow-canvas-grid-toolbar--overflow-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 0.55rem 0;
  margin: 0;
  width: 100%;
  min-width: 0;
  max-width: none;
}

.workflow-canvas-grid-toolbar.workflow-canvas-grid-toolbar--overflow-panel .workflow-canvas-zoom-btns {
  flex-wrap: wrap;
  justify-content: flex-start;
}

.workflow-canvas-grid-toolbar.workflow-canvas-grid-toolbar--overflow-panel input.workflow-canvas-grid-gap-input {
  width: 100%;
  max-width: none;
  min-width: 0;
}

.workflow-canvas-grid-toolbar.workflow-canvas-grid-toolbar--overflow-panel .workflow-canvas-auto-arrange-btn {
  margin-right: 0;
  width: 100%;
  justify-content: center;
}

.workflow-canvas-head .workflow-canvas-zoom-btns {
  align-items: center;
}

.workflow-canvas-head .workflow-canvas-zoom-btn {
  font-size: calc(1.05rem - 1px);
}

.workflow-canvas-head .workflow-canvas-zoom-fit-btn {
  font-size: calc(0.72rem - 1px);
}

.workflow-canvas-head .workflow-canvas-grid-toolbar {
  font-size: calc(0.8rem - 1px);
}

.workflow-canvas-head .workflow-canvas-grid-toolbar input.workflow-canvas-grid-gap-input {
  font-size: calc(0.8rem - 1px);
}

.workflow-canvas-head-separator {
  width: 1px;
  align-self: stretch;
  min-height: 1.5rem;
  background: var(--border);
  margin: 0 0.15rem 0 0.35rem;
  flex-shrink: 0;
}

.workflow-canvas-zoom-btns {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.workflow-canvas-zoom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 2.65rem;
  padding: 0.4rem 0.55rem;
  font-size: 1.05rem;
  line-height: 1.2;
}

.workflow-canvas-zoom-fit-btn {
  min-width: auto;
  padding: 0.4rem 0.5rem;
  font-size: 0.72rem;
  line-height: 1.2;
  white-space: nowrap;
}

.workflow-canvas-grid-toolbar {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 0.35rem 0.55rem;
  margin-left: auto;
  font-size: 0.8rem;
  flex: 0 0 auto;
  flex-shrink: 0;
  min-width: min-content;
  max-width: none;
  box-sizing: border-box;
}

.workflow-canvas-grid-toolbar .workflow-canvas-grid-toggle {
  flex-shrink: 0;
}

.workflow-canvas-grid-toggle {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.workflow-canvas-grid-toggle .node-run-toggle__caption {
  white-space: nowrap;
}

.workflow-canvas-gap-label {
  font-size: 0.78rem;
  user-select: none;
  white-space: nowrap;
}

/* Toolbar-scoped so this beats later global `input[type='text'] { width: 100% }`. */
.workflow-canvas-grid-toolbar input.workflow-canvas-grid-gap-input {
  box-sizing: border-box;
  width: 3.25rem;
  max-width: 3.25rem;
  min-width: 3.25rem;
  flex-shrink: 0;
  padding: 0.15rem 0.35rem;
  font-size: 0.8rem;
}

.workflow-canvas-grid-toolbar .workflow-canvas-auto-arrange-btn {
  white-space: nowrap;
  flex-shrink: 0;
  min-width: max-content;
  margin-right: 20px;
}

.workflow-canvas-grid-layer {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  pointer-events: none;
  box-sizing: border-box;
  display: none;
  background-color: transparent;
  background-image: radial-gradient(circle, var(--workflow-canvas-grid-dot) 1px, transparent 1px);
  background-size: var(--workflow-canvas-grid-gap, 24px) var(--workflow-canvas-grid-gap, 24px);
  background-position: 0 0;
}

.workflow-canvas-grid-layer.workflow-canvas-grid-layer--visible {
  display: block;
}

.workflow-canvas-stage {
  position: relative;
  border: 0;
  border-radius: 6px;
  background: transparent;
  width: 100%;
  padding-top: 30px;
  padding-bottom: 30px;
  min-height: 12rem;
  max-height: none;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
}

.workflow-canvas-stage:active {
  cursor: grabbing;
}

.workflow-canvas-world {
  position: relative;
  transform-origin: 0 0;
  overflow: visible;
}

.workflow-canvas-svg {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}

.workflow-canvas-edges-layer path.workflow-canvas-edge--data {
  stroke: color-mix(in srgb, var(--muted) 82%, var(--border));
  stroke-width: 2;
  opacity: 0.9;
}

.workflow-canvas-edges-layer path.workflow-canvas-edge--signal {
  stroke: color-mix(in srgb, var(--muted) 88%, var(--border));
  stroke-width: 1.65;
  stroke-dasharray: 2 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.92;
}

.workflow-canvas-edges-layer path.workflow-canvas-edge--error {
  stroke: #dc2626;
  stroke-width: 2;
  opacity: 0.95;
}

/* `platform.flow.*` routing ports (`ok` / `error`): dashed like signal, error keeps red stroke */
.workflow-canvas-edges-layer path.workflow-canvas-edge--error-signal {
  stroke: #dc2626;
  stroke-width: 1.65;
  stroke-dasharray: 2 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.95;
}

.workflow-canvas-svg marker .workflow-canvas-arrow-head--data {
  fill: color-mix(in srgb, var(--muted) 82%, var(--border));
}

.workflow-canvas-svg marker .workflow-canvas-arrow-head--signal {
  fill: color-mix(in srgb, var(--muted) 88%, var(--border));
}

.workflow-canvas-svg marker .workflow-canvas-arrow-head--error {
  fill: #dc2626;
}

.workflow-canvas-nodes-layer {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

/* Labels render in their own layer above edges (z-index 1) and nodes (z-index 2)
   so titles are never clipped by adjacent node cards or connecting lines. */
.workflow-canvas-labels-layer {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  pointer-events: none;
}

/* While the actions popover is being interacted with, lift nodes-layer above
   labels-layer so the popover (inside a wrap, in nodes-layer) paints over titles. */
.workflow-canvas-nodes-layer:has(.workflow-canvas-node-actions-menu:hover),
.workflow-canvas-nodes-layer:has(.workflow-canvas-node-actions-menu:focus-within) {
  z-index: 4;
}

.workflow-canvas-node-wrap {
  position: absolute;
  width: 102px;
  z-index: 2;
  pointer-events: auto;
}

/* Popovers extend past the card; sibling nodes (same z-index) would paint on top.
   Lift the whole wrap while the node action menu is hovered or focused. */
.workflow-canvas-node-wrap:has(.workflow-canvas-node-actions-menu:hover),
.workflow-canvas-node-wrap:has(.workflow-canvas-node-actions-menu:focus-within) {
  z-index: 40;
}

.workflow-canvas-node-wrap.workflow-canvas-node-wrap--running {
  z-index: 45;
}

.workflow-canvas-node-wrap.workflow-canvas-node-wrap--running:has(.workflow-canvas-node-actions-menu:hover),
.workflow-canvas-node-wrap.workflow-canvas-node-wrap--running:has(.workflow-canvas-node-actions-menu:focus-within) {
  z-index: 50;
}

.workflow-canvas-node-actions {
  position: absolute;
  top: -11px;
  right: -8px;
  z-index: 4;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}

.workflow-canvas-node-actions button.workflow-canvas-node-actions-menu-btn {
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--panel);
  color: color-mix(in srgb, var(--muted) 88%, var(--text));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.12s ease,
    color 0.12s ease,
    background 0.12s ease;
  flex-shrink: 0;
}

.workflow-canvas-node-actions button.workflow-canvas-node-actions-menu-btn svg {
  flex-shrink: 0;
}

.workflow-canvas-node-wrap:hover .workflow-canvas-node-actions button.workflow-canvas-node-actions-menu-btn,
.workflow-canvas-node-wrap:focus-within .workflow-canvas-node-actions button.workflow-canvas-node-actions-menu-btn {
  opacity: 1;
  pointer-events: auto;
}

.workflow-canvas-node-actions-menu {
  position: relative;
  pointer-events: none;
}

.workflow-canvas-node-wrap:hover .workflow-canvas-node-actions-menu,
.workflow-canvas-node-wrap:focus-within .workflow-canvas-node-actions-menu {
  pointer-events: auto;
}

.workflow-canvas-node-actions-popover {
  position: absolute;
  top: 30px;
  right: 0;
  z-index: 10;
  min-width: 178px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateY(-2px) scale(var(--workflow-canvas-zoom-inv, 1));
  transform-origin: top right;
  pointer-events: none;
  transition:
    opacity 0.12s ease,
    transform 0.12s ease;
}

.workflow-canvas-node-actions-menu:hover .workflow-canvas-node-actions-popover,
.workflow-canvas-node-actions-menu:focus-within .workflow-canvas-node-actions-popover {
  opacity: 1;
  transform: translateY(0) scale(var(--workflow-canvas-zoom-inv, 1));
  pointer-events: auto;
}

.workflow-canvas-node-actions-popover > button {
  box-sizing: border-box;
  width: 100%;
  min-height: 34px;
  height: auto;
  padding: 6px 10px;
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: color-mix(in srgb, var(--muted) 88%, var(--text));
  cursor: pointer;
  font-size: calc(1em + 1px);
  font-weight: 400;
  line-height: 1.25;
}

.workflow-canvas-node-actions-popover > button svg {
  flex-shrink: 0;
}

.workflow-canvas-node-actions-popover > button:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--muted) 10%, transparent);
}

.workflow-canvas-node-actions-popover > button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--text) 35%, transparent);
  outline-offset: 1px;
}

.workflow-canvas-node-copy:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--muted) 12%, var(--panel));
}

.workflow-canvas-node-delete:hover {
  color: #b91c1c;
  background: color-mix(in srgb, #fecaca 28%, var(--panel));
}

.workflow-canvas-node-add-child:hover {
  color: var(--accent, #6366f1);
  background: color-mix(in srgb, var(--accent, #6366f1) 14%, var(--panel));
}

.workflow-canvas-node-toggle-disabled:hover {
  color: var(--accent, #6366f1);
  background: color-mix(in srgb, var(--accent, #6366f1) 14%, var(--panel));
}

.workflow-canvas-node-actions button.workflow-canvas-node-actions-menu-btn:focus-visible {
  opacity: 1;
  pointer-events: auto;
  outline: 2px solid color-mix(in srgb, var(--text) 35%, transparent);
  outline-offset: 1px;
}

/* Toggle row lives only inside `.workflow-canvas-node-actions-popover` (flex column).
   Do not use absolute positioning here — it overlapped the first popover rows. */

.workflow-canvas-node-toggle-disabled svg {
  flex-shrink: 0;
}

/* Always visible when the node is disabled (class reserved for future / host use) */
.workflow-canvas-node-toggle-disabled--off {
  color: #d97706;
  background: color-mix(in srgb, #fef3c7 40%, var(--panel));
}

.workflow-canvas-node-toggle-disabled:not(.workflow-canvas-node-toggle-disabled--off):hover {
  color: #d97706;
  background: color-mix(in srgb, #fef3c7 40%, var(--panel));
}

.workflow-canvas-node-toggle-disabled:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--text) 35%, transparent);
  outline-offset: 1px;
}

.workflow-canvas-node {
  --workflow-node-border-width: 1px;
  --workflow-node-border-color: var(--border);
  position: relative;
  width: 100%;
  height: 102px;
  padding: 8px;
  box-sizing: border-box;
  text-align: center;
  align-items: center;
  border-radius: 15px;
  border: var(--workflow-node-border-width) solid var(--workflow-node-border-color);
  background: var(--surface);
  color: var(--text);
  cursor: grab;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  user-select: none;
  font-size: calc(0.72rem + 1px);
  font-weight: 400;
}

.workflow-canvas-node-icon {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.workflow-canvas-node-icon svg {
  width: calc(32px * 1.2);
  height: calc(32px * 1.2);
}

.workflow-canvas-node-icon-font {
  font-size: calc(32px * 1.2);
  line-height: 1;
}

.workflow-canvas-node-icon-img {
  display: block;
  width: calc(32px * 1.2);
  height: calc(32px * 1.2);
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.workflow-canvas-node-label {
  position: absolute;
  width: 122px;
  padding: 2px 6px;
  box-sizing: border-box;
  text-align: center;
  font-size: calc(0.72rem + 4px);
  font-weight: 600;
  color: color-mix(in srgb, var(--muted) 82%, var(--text));
  background: color-mix(in srgb, var(--surface) 50%, transparent);
  border-radius: 8px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  text-overflow: ellipsis;
  white-space: normal;
}

.workflow-canvas-node-label--disabled {
  color: var(--workflow-canvas-node-disabled-chrome);
}

.workflow-canvas-node--platform:not(.workflow-canvas-node--terminator):not(.workflow-canvas-node--trigger):not(
    .workflow-canvas-node--platform-llm-family
  ):not(.workflow-canvas-node--llm-family) {
  --workflow-node-border-width: 2px;
  --workflow-node-border-color: color-mix(in srgb, var(--muted) 82%, var(--border));
  border-style: solid;
  border-width: 2px;
  border-color: color-mix(in srgb, var(--muted) 82%, var(--border));
}

.workflow-canvas-node--llm-family {
  border-color: #eab308;
}

.workflow-canvas-node--platform-llm-family {
  --workflow-node-border-width: 2px;
  --workflow-node-border-color: #eab308;
  border-style: solid;
  border-width: 2px;
  border-color: #eab308;
  background: color-mix(in srgb, #eab308 14%, var(--panel));
}

.workflow-canvas-node:active {
  cursor: grabbing;
}

/* ── iOS-style node enable/disable toggle ──────────────────────────────── */
.node-run-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
  user-select: none;
  position: relative;
  margin: 0;
}

.node-run-toggle__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.node-run-toggle__track {
  position: relative;
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: var(--ios-toggle-off);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent);
  transition: background 0.2s ease;
  flex-shrink: 0;
  align-self: center;
}

.node-run-toggle__track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22), 0 1px 1px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.node-run-toggle__input:checked + .node-run-toggle__track {
  background: var(--ios-toggle-on);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ios-toggle-on) 70%, transparent);
}

.node-run-toggle__input:checked + .node-run-toggle__track::after {
  transform: translateX(18px);
}

.node-run-toggle__input:focus-visible + .node-run-toggle__track {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.node-run-toggle__caption {
  font-size: 0.78rem;
  line-height: 1.35;
  font-weight: 400;
  color: var(--text);
  flex: 1 1 auto;
  min-width: 0;
  align-self: center;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
}

.node-config-field .node-config-boolean-toggle {
  margin: 0;
}

.node-config-boolean-label-title {
  font-weight: 500;
}

/* Compact switch (tables, dense toolbars) */
.node-run-toggle--compact .node-run-toggle__track {
  width: 36px;
  height: 20px;
}

.node-run-toggle--compact .node-run-toggle__track::after {
  width: 16px;
  height: 16px;
  top: 2px;
  left: 2px;
}

.node-run-toggle--compact .node-run-toggle__input:checked + .node-run-toggle__track::after {
  transform: translateX(16px);
}

/* Track-only switch (no caption) */
.node-run-toggle--solo {
  gap: 0;
  justify-content: center;
}

.data-table td:has(> .node-run-toggle--solo),
.nc-param-table td:has(> .node-run-toggle--solo) {
  text-align: center;
  vertical-align: middle;
}

.workflow-canvas-root--read-only .workflow-canvas-node,
.workflow-canvas-root--read-only .workflow-canvas-node:active {
  cursor: inherit;
}

.workflow-run-mermaid-preview-canvas {
  display: block;
  width: 100%;
  min-height: 0;
}

.workflow-run-mermaid-preview-canvas .workflow-canvas-root--read-only {
  width: 100%;
}

.workflow-canvas-node-title {
  font-size: calc(0.72rem + 1px);
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
  width: 100%;
}

.workflow-canvas-node-sub {
  font-size: calc(0.68rem + 1px);
  font-weight: 400;
  line-height: 1.25;
  text-align: center;
  width: 100%;
}

.workflow-canvas-node-footer {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  width: 100%;
  margin-top: auto;
  min-height: 0;
}

.workflow-canvas-node--agent .workflow-canvas-node-footer {
  position: absolute;
  bottom: 0.28rem;
  right: 0.38rem;
  width: auto;
  margin-top: 0;
  justify-content: flex-end;
  pointer-events: none;
}


.workflow-canvas-node:has(.workflow-canvas-node-llm-badge) .workflow-canvas-node-footer {
  padding-right: 1.75rem;
}

.workflow-canvas-node-agent-dataset-icon {
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1;
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 20;
  color: color-mix(in srgb, var(--muted) 78%, var(--text));
}

/* Category `llm`: corner marker on canvas nodes */
.workflow-canvas-node-llm-badge {
  position: absolute;
  bottom: 0.28rem;
  right: 0.38rem;
  font-size: 0.54rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  line-height: 1;
  color: color-mix(in srgb, var(--muted) 72%, var(--text));
  pointer-events: none;
  user-select: none;
}

.workflow-canvas-node .workflow-canvas-node-sub.muted {
  font-size: calc(0.68rem + 1px);
  font-weight: 400;
}


.workflow-canvas-node--selected {
  outline: 3px solid var(--accent);
  outline-offset: 0;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}

.workflow-canvas-node--invalid {
  outline: 3px solid #e11d48;
  outline-offset: 0;
}

.workflow-canvas-node--invalid.workflow-canvas-node--selected {
  outline: 3px solid #e11d48;
}

.workflow-canvas-node--failed-session {
  outline: 3px solid #dc2626;
  outline-offset: 0;
}

.workflow-canvas-node-running-badge {
  /* Match `.workflow-canvas-node` box so the spinner centers in the square card, not the wrap (card + label). */
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 102px;
  z-index: 30;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f97316;
  transform: scale(calc(3 * var(--workflow-canvas-zoom-inv, 1)));
  transform-origin: center;
}

.workflow-canvas-node-running-svg {
  display: block;
  animation: workflow-canvas-node-running-spin 0.85s linear infinite;
}

@keyframes workflow-canvas-node-running-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.workflow-canvas-node--condition {
  --workflow-node-border-width: 1px;
  --workflow-node-border-color: color-mix(in srgb, var(--muted) 70%, var(--border));
  clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0% 50%);
  border-radius: 0;
  border-color: transparent;
  background: transparent;
  position: relative;
}

.workflow-canvas-node--condition > * {
  position: relative;
  z-index: 2;
}

.workflow-canvas-node--condition::after {
  content: '';
  position: absolute;
  inset: 0;
  /* No clip-path here — the parent's clip-path already clips this layer.
     Removing the duplicate clip-path eliminates the double anti-aliased edge
     that caused the border to appear too thick at top/bottom and extra-thick at the points. */
  background: var(--workflow-node-border-color);
  pointer-events: none;
  z-index: 0;
}

.workflow-canvas-node--condition::before {
  content: '';
  position: absolute;
  inset: var(--workflow-node-border-width);
  /* clip-path on the fill layer is necessary: it creates the inner hexagon that
     produces a uniform border along the diagonal edges. */
  clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0% 50%);
  background: var(--panel);
  pointer-events: none;
  z-index: 1;
}

.workflow-canvas-node--llm {
  border-color: #eab308;
  background: color-mix(in srgb, #eab308 14%, var(--panel));
}

.workflow-canvas-node--transform {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--muted) 70%, var(--border));
}

/* Neutral platform / transform / default nodes: match canvas surface (no category tint). */
.workflow-canvas-node.workflow-canvas-node--platform-db,
.workflow-canvas-node.workflow-canvas-node--static-data,
.workflow-canvas-node.workflow-canvas-node--transform:not(
    .workflow-canvas-node--llm,
    .workflow-canvas-node--agent,
    .workflow-canvas-node--action,
    .workflow-canvas-node--trigger,
    .workflow-canvas-node--terminator,
    .workflow-canvas-node--sub-workflow,
    .workflow-canvas-node--platform-llm-family,
    .workflow-canvas-node--llm-family,
    .workflow-canvas-node--imessage
  ),
.workflow-canvas-node.workflow-canvas-node--default,
.workflow-canvas-node.workflow-canvas-node--platform:not(
    .workflow-canvas-node--trigger,
    .workflow-canvas-node--terminator,
    .workflow-canvas-node--sub-workflow,
    .workflow-canvas-node--platform-llm-family,
    .workflow-canvas-node--llm-family,
    .workflow-canvas-node--imessage,
    .workflow-canvas-node--llm,
    .workflow-canvas-node--agent,
    .workflow-canvas-node--action
  ) {
  background: var(--surface);
}

.workflow-canvas-node.workflow-canvas-node--static-data {
  border-radius: 15px;
}

/* `platform.db.*`: strong rounding on top and bottom edges only; left/right stay straight.
   `50%/50%` uses ry = 50% of height at each corner, so TL+BL consume the full left edge (no straight side).
   Keep rx = 50% of width (smooth arc across the top/bottom) and ry < 50% of height so a vertical straight strip remains on left and right. */
.workflow-canvas-node.workflow-canvas-node--platform-db {
  border-radius: 15px;
}

.workflow-canvas-node--agent {
  border-width: 2px;
  border-color: color-mix(in srgb, #8b5cf6 55%, var(--border));
  background: color-mix(in srgb, #8b5cf6 10%, var(--panel));
}

.workflow-canvas-node--action {
  --workflow-node-border-width: 1px;
  --workflow-node-border-color: color-mix(in srgb, #0ea5e9 50%, var(--border));
  clip-path: polygon(0% 0%, calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) 100%, 0% 100%);
  border-radius: 0;
  border-color: transparent;
  background: transparent;
  position: relative;
}

.workflow-canvas-node--action > * {
  position: relative;
  z-index: 2;
}

.workflow-canvas-node--action::after {
  content: '';
  position: absolute;
  inset: 0;
  /* No clip-path here — parent already clips this layer to the arrow shape.
     Removing the duplicate eliminates the double anti-aliased edge. */
  background: var(--workflow-node-border-color);
  pointer-events: none;
  z-index: 0;
}

.workflow-canvas-node--action::before {
  content: '';
  position: absolute;
  inset: var(--workflow-node-border-width);
  /* clip-path on the fill layer produces a uniform border along the diagonal arrow edge. */
  clip-path: polygon(0% 0%, calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) 100%, 0% 100%);
  background: color-mix(in srgb, #0ea5e9 8%, var(--panel));
  pointer-events: none;
  z-index: 1;
}

.workflow-canvas-node--default {
  border-color: var(--border);
}

/* Keep these overrides after category classes so transform/llm styles do not revert them. */
.workflow-canvas-node.workflow-canvas-node--platform:not(.workflow-canvas-node--terminator):not(
    .workflow-canvas-node--trigger
  ):not(.workflow-canvas-node--platform-llm-family):not(.workflow-canvas-node--llm-family) {
  --workflow-node-border-width: 2px;
  --workflow-node-border-color: color-mix(in srgb, var(--muted) 82%, var(--border));
  border-style: solid;
  border-width: 2px;
  border-color: color-mix(in srgb, var(--muted) 82%, var(--border));
}

.workflow-canvas-node.workflow-canvas-node--platform-llm-family {
  --workflow-node-border-width: 2px;
  --workflow-node-border-color: #eab308;
  border-style: solid;
  border-width: 2px;
  border-color: #eab308;
  background: color-mix(in srgb, #eab308 14%, var(--panel));
}

/* Sub-workflow (`platform.flow.run_workflow`): border = darker tone of the same green as the fill tint; placed after `.workflow-canvas-node.workflow-canvas-node--platform` so it wins the cascade. */
.workflow-canvas-node.workflow-canvas-node--sub-workflow {
  border-style: solid;
  border-width: 2px;
  border-color: color-mix(in srgb, #22c55e 52%, black);
  --workflow-node-border-width: 2px;
  --workflow-node-border-color: color-mix(in srgb, #22c55e 52%, black);
  background: color-mix(in srgb, #22c55e 12%, var(--panel));
}

/* Workflow boundaries: entry triggers (`trigger`) + explicit terminators (`terminator`) share pill + sky-blue chrome. Placed after category/platform rules so nothing overrides border/fill. */
.workflow-canvas-node--trigger,
.workflow-canvas-node--terminator {
  --workflow-node-border-width: 2px;
  --workflow-node-border-color: color-mix(in srgb, #0ea5e9 52%, var(--border));
  border-radius: 15px;
  border-style: solid;
  border-width: var(--workflow-node-border-width);
  border-color: var(--workflow-node-border-color);
  background: color-mix(in srgb, #0ea5e9 11%, var(--panel));
}

/* Terminator: double concentric border ring (inner border from border-* above + outer ring via box-shadow) */
.workflow-canvas-node--terminator {
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px color-mix(in srgb, #0ea5e9 38%, var(--border));
}

/* Polygon nodes draw their own border via pseudo-elements; keep base border hidden. */
.workflow-canvas-node.workflow-canvas-node--condition,
.workflow-canvas-node.workflow-canvas-node--action {
  border-color: transparent;
}

/* Square node redesign: disable polygon pseudo-element borders for action/condition. */
.workflow-canvas-node--condition::before,
.workflow-canvas-node--condition::after,
.workflow-canvas-node--action::before,
.workflow-canvas-node--action::after {
  content: none !important;
}

.workflow-canvas-node--condition,
.workflow-canvas-node--action {
  clip-path: none !important;
  border-radius: 15px !important;
}

.workflow-canvas-node--condition {
  border-style: solid !important;
  border-color: color-mix(in srgb, var(--muted) 70%, var(--border)) !important;
  background: var(--surface) !important;
}

.workflow-canvas-node--action {
  border-color: color-mix(in srgb, #0ea5e9 50%, var(--border)) !important;
  background: color-mix(in srgb, #0ea5e9 8%, var(--panel)) !important;
}

/* iMessage nodes: Apple Messages green (after base trigger / action rules). */
.workflow-canvas-node.workflow-canvas-node--imessage.workflow-canvas-node--trigger,
.workflow-canvas-node.workflow-canvas-node--imessage.workflow-canvas-node--terminator {
  --workflow-node-border-color: color-mix(in srgb, var(--imessage-node-accent) 52%, var(--border));
  border-color: var(--workflow-node-border-color);
  background: color-mix(in srgb, var(--imessage-node-accent) 11%, var(--panel));
}

.workflow-canvas-node.workflow-canvas-node--imessage.workflow-canvas-node--terminator {
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px color-mix(in srgb, var(--imessage-node-accent) 38%, var(--border));
}

.workflow-canvas-node.workflow-canvas-node--imessage.workflow-canvas-node--action {
  border-color: color-mix(in srgb, var(--imessage-node-accent) 50%, var(--border)) !important;
  background: color-mix(in srgb, var(--imessage-node-accent) 8%, var(--panel)) !important;
}

.workflow-canvas-node.workflow-canvas-node--imessage.workflow-canvas-node--platform:not(
    .workflow-canvas-node--terminator
  ):not(.workflow-canvas-node--trigger) {
  --workflow-node-border-color: color-mix(in srgb, var(--imessage-node-accent) 48%, var(--border));
  border-color: color-mix(in srgb, var(--imessage-node-accent) 48%, var(--border));
  background: color-mix(in srgb, var(--imessage-node-accent) 10%, var(--panel));
}

.workflow-canvas-node.workflow-canvas-node--imessage.workflow-canvas-node--llm,
.workflow-canvas-node.workflow-canvas-node--imessage.workflow-canvas-node--platform-llm-family {
  border-color: color-mix(in srgb, var(--imessage-node-accent) 52%, var(--border));
  background: color-mix(in srgb, var(--imessage-node-accent) 12%, var(--panel));
}

.workflow-canvas-node.workflow-canvas-node--imessage.workflow-canvas-node--transform {
  border-color: color-mix(in srgb, var(--imessage-node-accent) 48%, var(--border));
  background: color-mix(in srgb, var(--imessage-node-accent) 8%, var(--panel));
}

/* After category / iMessage chrome: disabled = neutral gray border (not accent tint); icon toward panel (darker in dark, lighter in light). */
.workflow-canvas-node.workflow-canvas-node--disabled {
  --workflow-node-border-color: var(--workflow-canvas-node-disabled-chrome);
  border-color: var(--workflow-node-border-color) !important;
  opacity: 0.55;
}

.workflow-canvas-node.workflow-canvas-node--terminator.workflow-canvas-node--disabled {
  box-shadow:
    0 0 0 3px var(--bg),
    0 0 0 5px color-mix(in srgb, var(--muted) 44%, var(--border)) !important;
}

.workflow-canvas-node.workflow-canvas-node--disabled .workflow-canvas-node-icon {
  color: color-mix(in srgb, var(--text) 34%, var(--panel));
}

.workflow-run-actions-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  width: 100%;
  margin-top: 40px;
}

.workflow-run-run-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.workflow-run-audit-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.workflow-run-actions-row button.workflow-run-trigger {
  margin-left: 0;
}

.workflow-run-actions-row .workflow-run-text-btn {
  display: inline-flex;
  justify-content: center;
}

button.workflow-run-input-data {
  color: var(--muted);
  font-weight: 400;
}

/* Default Mermaid zoom: fit available width. Mermaid may set fixed px width/height. */
.workflow-run-mermaid-preview svg {
  width: 100% !important;
  height: auto !important;
}

.workflow-run-main-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 1rem;
  align-items: start;
}

.workflow-run-flow-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

/* Run workflow split: remove per-panel borders; use one vertical divider. */
.workflow-run-flow-col {
  padding-right: 0;
  border-right: none;
}

.workflow-run-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 0.9rem;
  flex-shrink: 0;
}

.workflow-run-mermaid-col {
  width: 100%;
  max-width: none;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.workflow-run-mermaid-stack {
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.workflow-run-mermaid-stack .workflow-run-mermaid-preview {
  flex: 0 1 auto;
  min-height: 60px;
  max-height: calc(max(52rem, 100dvh));
}

.workflow-run-mermaid-head {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.75rem 1rem;
  margin: 0 0 0.35rem;
  flex-shrink: 0;
}

.workflow-run-mermaid-head-text {
  flex: 1 1 auto;
  min-width: 0;
}

h2.workflow-run-embedded-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 0.2rem;
  line-height: 1.3;
  color: var(--text);
}

.workflow-run-embedded-description {
  margin: 0;
  max-width: 100%;
  line-height: 1.45;
  white-space: pre-line;
}

.workflow-page-description[data-source='generated'],
.workflow-run-embedded-description[data-source='generated'] {
  font-style: italic;
}

.workflow-page-description {
  margin: 0.25rem 0 0.65rem;
  max-width: 60ch;
  line-height: 1.5;
  white-space: pre-line;
}

.workflow-detail > h1 {
  margin-bottom: 0.25rem;
}

.workflow-run-mermaid-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.workflow-run-history-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin: 0 0 0.5rem;
}

.workflow-run-history-head h2 {
  margin: 0;
  margin-right: 20px;
}

.workflow-run-history-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.workflow-run-mermaid-preview {
  border: none;
  border-radius: 12px;
  padding: 0.5rem;
  background: transparent;
  overflow: auto;
  display: flex;
  justify-content: center;
  min-height: 60px;
  transition: border-color 0.12s ease;
}

.workflow-run-mermaid-col--to-edit {
  cursor: pointer;
}

.workflow-run-mermaid-col--to-edit:hover .workflow-run-mermaid-preview,
.workflow-run-mermaid-col--to-edit:focus-visible .workflow-run-mermaid-preview {
  border-color: var(--accent);
}

.workflow-run-mermaid-col--to-edit:focus {
  outline: none;
}

.workflow-run-mermaid-col--to-edit:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 14px;
}

.workflow-run-mermaid-preview svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/*
 * Mermaid flowchart labels use foreignObject > div with display:inline-block, so text
 * stays left-aligned inside wide shapes (especially rhombuses). Fill the box and center.
 */
.workflow-run-mermaid-preview svg g.node foreignObject > div {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

.workflow-run-mermaid-preview svg g.node foreignObject .nodeLabel {
  text-align: center;
  max-width: 100%;
}

/* Flowchart node shapes: deep accent stroke (follows light/dark + data-theme) */
.workflow-run-mermaid-preview svg g.node > rect,
.workflow-run-mermaid-preview svg g.node > polygon,
.workflow-run-mermaid-preview svg g.node > circle,
.workflow-run-mermaid-preview svg g.node > path,
.workflow-run-mermaid-preview svg g.node .label-container > rect,
.workflow-run-mermaid-preview svg g.node .label-container > path,
.workflow-run-mermaid-preview svg g.node .label-container > polygon {
  stroke: var(--accent-node-border) !important;
}

.workflow-run-history-col {
  width: auto;
  min-width: 0;
}

.workflow-run-history-col.panel {
  margin-top: 0;
  margin-bottom: 0;
  border: none;
  box-shadow: none;
  background: transparent;
  padding-left: 0;
}

@media (max-width: 900px) {
  .workflow-run-main-row {
    grid-template-columns: 1fr;
  }
  .workflow-run-flow-col {
    padding-right: 0;
    border-right: none;
  }
  .workflow-run-history-col.panel {
    padding-left: 0;
  }
  .workflow-run-mermaid-col {
    width: auto;
    max-width: none;
    min-width: 0;
  }
  .workflow-run-history-col {
    width: 100%;
  }
}

:root[data-theme='light'] .nav-brand-text {
  background: linear-gradient(100deg, #0056c8 0%, #009688 48%, #0b1220 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) .nav-brand-text {
    background: linear-gradient(100deg, #0056c8 0%, #009688 48%, #0b1220 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.app-menubar-link {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.1rem;
  padding: 0.38rem 0.58rem;
  border-radius: 7px;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.86rem;
  line-height: 1.2;
  color: var(--muted);
  border: 1px solid transparent;
  white-space: nowrap;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

/* Beat global `a` / `a:visited` accent; keep label + icon gray until selected */
.app-menubar a.app-menubar-link:not(.is-active):link,
.app-menubar a.app-menubar-link:not(.is-active):visited {
  color: var(--muted);
}

.app-menubar a.app-menubar-link:hover,
.app-menubar a.app-menubar-link:focus-visible,
.platform-ide-workbench-nav-host a.workflow-explorer-nav-icon-link:hover,
.platform-ide-workbench-nav-host a.workflow-explorer-nav-icon-link:focus-visible {
  text-decoration: none;
}

.app-menubar-link:hover,
.app-menubar-link:focus-visible {
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text);
  text-decoration: none;
}

.app-menubar-link.is-active {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: transparent;
  box-shadow: none;
}

.app-menubar-link--icon {
  width: 2.1rem;
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

.sidebar-nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
}

.sidebar-nav-svg {
  display: block;
  width: 1rem;
  height: 1rem;
}

.app-menubar-link.is-active .sidebar-nav-svg {
  color: var(--accent);
}

.sidebar-nav-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  min-width: 0;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex: 0 1 auto;
  padding: 0 0.1rem;
}

.sidebar-user-avatar {
  flex-shrink: 0;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 12%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--muted) 35%, var(--border));
}

.sidebar-user-avatar .sidebar-user-avatar-svg {
  display: block;
  width: 54%;
  height: 54%;
}

.sidebar-user-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.sidebar-user-name {
  font-size: 0.78rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-user-hint {
  font-size: 0.68rem;
}

.sidebar-logout {
  flex-shrink: 0;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem;
  min-width: 2rem;
  min-height: 2rem;
}

.sidebar-logout .sidebar-logout-svg {
  display: block;
  width: 1.2rem;
  height: 1.2rem;
}

a.nav-register {
  line-height: 1.2;
  justify-content: center;
  text-align: center;
}

.app-menubar-link.nav-register {
  font-weight: 600;
}

.app-menubar a:hover {
  text-decoration: none;
}

.app-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg);
}

body:has(main#app > .workflows-page-shell) .app-shell,
body:has(main#app > .nc-page) .app-shell,
body:has(main#app > .prompts-page-shell) .app-shell,
body:has(main#app > .settings-shell) .app-shell,
body:has(main#app > .platform-ide-workbench) .app-shell {
  height: 100dvh;
  overflow: hidden;
}

/* Primary IDE routes: section links + account live in the workbench head — hide empty top menubar. */
body.platform-ide-menubar-hidden #app-menubar {
  display: none;
}

body:has(main#app > .workflows-page-shell) .app-body,
body:has(main#app > .nc-page) .app-body,
body:has(main#app > .prompts-page-shell) .app-body,
body:has(main#app > .settings-shell) .app-body,
body:has(main#app > .platform-ide-workbench) .app-body {
  min-height: 0;
  overflow: hidden;
}

main#app {
  padding: 1.25rem;
  max-width: none;
  margin: 0;
  width: 100%;
  flex: 1;
}

main#app:has(> .workflows-page-shell),
main#app:has(> .nc-page),
main#app:has(> .prompts-page-shell),
main#app:has(> .settings-shell),
main#app:has(> .platform-ide-workbench) {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

main#app:has(> .workflows-page-shell) > .workflows-page-shell,
main#app:has(> .nc-page) > .nc-page,
main#app:has(> .prompts-page-shell) > .prompts-page-shell,
main#app:has(> .settings-shell) > .settings-shell,
main#app:has(> .platform-ide-workbench) > .platform-ide-workbench {
  flex: 1;
  min-height: 0;
}

main#app:has(> .platform-ide-workbench) .platform-ide-workbench-body > .workflows-page-shell,
main#app:has(> .platform-ide-workbench) .platform-ide-workbench-body > .nc-page,
main#app:has(> .platform-ide-workbench) .platform-ide-workbench-body > .prompts-page-shell,
main#app:has(> .platform-ide-workbench) .platform-ide-workbench-body > .settings-shell {
  flex: 1;
  min-height: 0;
}

/* Align with settings: no top rule between IDE icon row and section body (shells use full border elsewhere). */
main#app:has(> .platform-ide-workbench) .platform-ide-workbench-body > .workflows-page-shell,
main#app:has(> .platform-ide-workbench) .platform-ide-workbench-body > .prompts-page-shell {
  border-top: none;
}

main#app:has(> .platform-ide-workbench) .platform-ide-workbench-body > .nc-page .nc-explorer-shell {
  border-top: none;
}

/* IDE sections other than Workflows + Settings: drop inner “card” border on the right-hand detail pane */
main#app:has(> .platform-ide-workbench) .platform-ide-workbench-body > .prompts-page-shell .prompts-detail,
main#app:has(> .platform-ide-workbench) .platform-ide-workbench-body > .prompts-page-shell .prompts-page-detail-empty {
  border: none;
}

main#app:has(> .platform-ide-workbench) .platform-ide-workbench-body > .nc-page .nc-modal.nc-modal--inline {
  border: none;
  box-shadow: none;
}

main#app:has(> .platform-ide-workbench) .platform-ide-workbench-body > .workflows-page-shell .policy-page-main .policy-subject-block {
  border: none;
}

.platform-ide-workbench {
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
}

.platform-ide-workbench-head {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 0.5rem;
  padding: 0 0.45rem 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  overflow: visible;
  z-index: 4;
}

.platform-ide-workbench-head-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-left: auto;
  flex-shrink: 0;
  min-width: auto;
  align-self: center;
  padding: 0.35rem 0;
}

.platform-ide-workbench-head-actions .sidebar-nav-footer-row.platform-ide-workbench-user-row {
  width: auto;
  flex: 0 1 auto;
  justify-content: flex-end;
  min-width: 0;
  gap: 0.3rem;
}

.platform-ide-workbench-head-actions .platform-ide-workbench-theme-btn {
  flex-shrink: 0;
}

/* Same visual language as .workflow-explorer-nav-icon-link — borderless icon controls */
.platform-ide-workbench-head-actions button.button.secondary.nav-theme-icon-btn.platform-ide-workbench-theme-btn,
.platform-ide-workbench-head-actions button.button.secondary.sidebar-logout.platform-ide-workbench-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  box-sizing: border-box;
  border: none;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  border-radius: 5px;
  width: 1.45rem;
  height: 1.45rem;
  min-width: 1.45rem;
  min-height: 1.45rem;
  padding: 0;
}

.platform-ide-workbench-head-actions button.button.secondary.nav-theme-icon-btn.platform-ide-workbench-theme-btn:hover,
.platform-ide-workbench-head-actions button.button.secondary.nav-theme-icon-btn.platform-ide-workbench-theme-btn:focus-visible,
.platform-ide-workbench-head-actions button.button.secondary.sidebar-logout.platform-ide-workbench-logout:hover,
.platform-ide-workbench-head-actions button.button.secondary.sidebar-logout.platform-ide-workbench-logout:focus-visible {
  border: none;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--text);
}

.platform-ide-workbench-head-actions button.button.secondary.nav-theme-icon-btn.platform-ide-workbench-theme-btn:focus-visible,
.platform-ide-workbench-head-actions button.button.secondary.sidebar-logout.platform-ide-workbench-logout:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 60%, var(--border));
  outline-offset: 2px;
}

.platform-ide-workbench-head-actions .nav-theme-icon {
  display: block;
  width: 0.92rem;
  height: 0.92rem;
  flex-shrink: 0;
}

.platform-ide-workbench-head-actions .sidebar-logout.platform-ide-workbench-logout {
  margin-left: 0;
}

.platform-ide-workbench-head-actions .sidebar-logout .sidebar-logout-svg {
  display: block;
  width: 0.92rem;
  height: 0.92rem;
  flex-shrink: 0;
}

.platform-ide-workbench-nav-host {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

.platform-ide-workbench-nav-host .workflow-explorer-nav-icons {
  margin-right: 0;
  margin-left: 0;
  gap: 0 0.12rem;
  flex-wrap: wrap;
  align-items: flex-end;
  padding: 0.2rem 0.1rem 0;
}

.platform-ide-workbench-nav-host .workflow-explorer-nav-icon-link {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: auto;
  height: auto;
  min-height: 0;
  margin-bottom: -1px;
  padding: 0.42rem 0.78rem 0.48rem;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  font-weight: 400;
  font-size: 0.86rem;
  line-height: 1.2;
  white-space: nowrap;
  background: transparent;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.platform-ide-workbench-nav-host a.workflow-explorer-nav-icon-link:not(.is-active):link,
.platform-ide-workbench-nav-host a.workflow-explorer-nav-icon-link:not(.is-active):visited {
  color: var(--muted);
}

.platform-ide-workbench-nav-host .workflow-explorer-nav-icon-link:hover,
.platform-ide-workbench-nav-host .workflow-explorer-nav-icon-link:focus-visible {
  color: var(--text);
  text-decoration: none;
}

.platform-ide-workbench-nav-host .workflow-explorer-nav-icon-link:not(.is-active):hover,
.platform-ide-workbench-nav-host .workflow-explorer-nav-icon-link:not(.is-active):focus-visible {
  background: transparent;
}

.platform-ide-workbench-nav-host .workflow-explorer-nav-icon-link.is-active {
  z-index: 1;
  color: var(--text);
  font-weight: 600;
  background: var(--surface);
  border-color: var(--border);
}

/* Dashboard only: active tab matches page (--bg); other sections use white/surface. */
.platform-ide-workbench.platform-ide-section-metrics
  .platform-ide-workbench-nav-host
  a.workflow-explorer-nav-icon-link.is-active[data-ide-nav='metrics'] {
  background: var(--bg);
}

.platform-ide-workbench-nav-host .workflow-explorer-nav-icon-link.is-active .sidebar-nav-svg {
  color: var(--text);
}

.platform-ide-workbench-nav-host .workflow-explorer-nav-icon-wrap .sidebar-nav-svg {
  width: 1rem;
  height: 1rem;
}

.platform-ide-nav-eval-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: flex-end;
  margin-bottom: -1px;
}

/* Reuse workflow canvas overflow popover look; JS toggles [hidden] (not workflow hover). */
.platform-ide-nav-eval-wrap .platform-ide-nav-eval-popover.workflow-canvas-head-overflow-popover {
  top: calc(100% - 2px);
  left: 0;
  right: auto;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: none;
}

.platform-ide-nav-eval-wrap .platform-ide-nav-eval-popover[hidden] {
  display: none !important;
}

.platform-ide-nav-eval-wrap .workflow-canvas-head-overflow-action-icon .sidebar-nav-svg {
  display: block;
  width: 1.15rem;
  height: 1.15rem;
}

.platform-ide-workbench-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
}

.platform-ide-workbench.platform-ide-section-metrics .platform-ide-workbench-body {
  background: var(--bg);
}

body.auth-route #app-menubar {
  display: none;
}

body.auth-route main#app {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: stretch;
  padding: 0;
  min-height: 0;
}

@media (max-width: 840px) {
  .app-nav.app-menubar-nav {
    align-items: flex-start;
    padding: 0.75rem;
  }

  .app-menubar-brand-wrap {
    flex: 1 1 100%;
  }

  .app-menubar-actions {
    flex: 1 1 100%;
    margin-left: 0;
  }

  .app-menubar-links {
    flex: 1 1 auto;
  }

  .sidebar-nav-footer-row {
    flex-wrap: wrap;
  }

  .sidebar-user {
    flex: 1 1 12rem;
  }

  .sidebar-logout {
    margin-left: auto;
  }

  a.nav-register {
    width: auto;
    margin-top: 0;
  }
}

/* Auth screens — match meno-app Login (card + watermark + mono chrome) */
body.auth-route {
  --login-font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}

main#app:has(> .login-page) {
  padding: 0;
}

.login-theme-slot {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 2;
}

.login-theme-slot .nav-theme-icon-btn {
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px);
}

.login-page {
  flex: 1;
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: var(--bg);
  padding: var(--space-4);
}

.login-bg-text {
  position: absolute;
  bottom: -60px;
  right: -40px;
  font-family: var(--font-ui);
  font-size: 28vw;
  font-weight: 700;
  color: var(--border);
  opacity: 0.45;
  letter-spacing: -0.05em;
  line-height: 1;
  user-select: none;
  pointer-events: none;
}

.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--radius-panel);
  overflow: hidden;
  z-index: 1;
}

.login-header {
  padding: var(--space-6) var(--space-6) 1.5rem;
  border-bottom: 1px solid var(--border);
}

.login-wordmark {
  font-family: var(--font-ui);
  font-size: calc(2.5rem + 2px);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--text);
  line-height: 1;
}

.login-tagline {
  font-family: var(--login-font-mono);
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 4px;
}

.login-form {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.login-label {
  font-family: var(--login-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.login-label-note {
  font-weight: 400;
  letter-spacing: 0.06em;
  opacity: 0.85;
  text-transform: none;
}

.login-input {
  font-family: var(--login-font-mono);
  font-size: 16px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: color-mix(in srgb, var(--muted) 12%, var(--surface));
  color: var(--text);
  outline: none;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.login-input:focus {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, color-mix(in srgb, var(--muted) 12%, var(--surface)));
}

.login-error {
  font-family: var(--login-font-mono);
  font-size: 14px;
  color: var(--danger);
  border: 1px solid var(--danger);
  border-radius: 4px;
  padding: var(--space-3);
}

.login-error:empty {
  display: none;
}

.login-submit {
  font-family: var(--login-font-mono);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.1em;
  padding: var(--space-4);
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  border-radius: 4px;
  cursor: pointer;
  transition: filter 0.1s;
  width: 100%;
}

.login-submit:hover:not(:disabled) {
  filter: brightness(0.92);
}

.login-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.login-hint {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6) var(--space-6);
  border-top: 1px solid var(--border);
}

.login-hint-inner {
  font-family: var(--login-font-mono);
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}

.login-hint-actions {
  font-family: var(--login-font-mono);
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  line-height: 1.45;
}

.login-hint-actions a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.login-hint-actions a:hover {
  text-decoration: underline;
}

.login-field-hint {
  margin: 0;
  font-family: var(--login-font-mono);
  font-size: 12px;
  color: var(--muted);
}

/* Workflow list header: primary + secondary */
.workflow-list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.25rem;
  margin-bottom: 1.75rem;
}

.workflow-list-head h1 {
  margin: 0;
}

.workflow-page-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}

.workflow-page-title-row h1 {
  margin: 0;
}

/* ~50% of default .button padding; smaller type — overriden by .workflow-page-toolbar-eq in picker */
.workflow-page-new-btn.button {
  font-size: 0.7rem;
  padding: 0.22rem 0.44rem;
  border-radius: 4px;
  line-height: 1.25;
  font-weight: 600;
}

.workflow-page-backup-btn.button,
.workflow-page-restore-btn.button {
  font-size: 0.7rem;
  padding: 0.22rem 0.44rem;
  border-radius: 4px;
  line-height: 1.25;
  font-weight: 600;
}

.workflow-page-workflow-picker-row .workflow-page-toolbar-eq.button {
  min-width: 7.5rem;
  width: 7.5rem;
  min-height: 2.1rem;
  max-height: 2.1rem;
  height: 2.1rem;
  padding: 0.2rem 0.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.7rem;
  line-height: 1.15;
  font-weight: 600;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: none;
}

.workflow-page-workflow-picker-row .workflow-page-toolbar-eq.button:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.workflow-page-workflow-picker-row .workflow-page-toolbar-eq--icon.button {
  min-width: 2.1rem;
  width: 2.1rem;
  padding: 0;
}

.workflow-page-workflow-picker-row .workflow-page-toolbar-eq--icon.button svg {
  display: block;
}

.workflow-page-workflow-picker-row .workflow-page-toolbar-eq--danger.button {
  background: transparent;
  color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border));
  box-shadow: none;
}

.workflow-page-workflow-picker-row .workflow-page-toolbar-eq--danger.button:hover {
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  border-color: var(--danger);
}

.workflow-page-workflow-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  margin: 0 0 0.35rem;
}

/* Backup/restore list: small ghost action buttons */
.workflow-backup-restore-btn--ghost.button {
  font-size: 0.7rem;
  line-height: 1.15;
  font-weight: 600;
  padding: 0.12rem 0.35rem;
  min-height: 1.6rem;
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  box-shadow: none;
}

.workflow-backup-restore-btn--ghost.button:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.workflow-backup-restore-btn--icon-danger.button {
  padding: 0.12rem 0.32rem;
  min-height: 1.6rem;
  border-radius: 4px;
  background: transparent;
  color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--border));
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.workflow-backup-restore-btn--icon-danger.button:hover {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}

/* Backup/restore dialog: flex column so inner list can scroll (min-height: 0 chain). */
.workflow-backup-restore-panel.platform-confirm-panel {
  display: flex;
  flex-direction: column;
  max-height: min(92vh, 900px);
}

.workflow-backup-restore-panel .platform-confirm-title {
  flex-shrink: 0;
}

.workflow-backup-restore-panel .platform-confirm-actions {
  flex-shrink: 0;
}

.workflow-backup-restore-panel .workflow-backup-restore-message {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.workflow-backup-restore-panel .workflow-backup-restore-message > p {
  flex-shrink: 0;
}

/* Backup/restore: scrollable list (~few tiles tall; load all rows, scroll inside). */
.workflow-backup-restore-panel .workflow-backup-list-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: max(11rem, min(26rem, calc(92vh - 14rem)));
  overflow-y: auto;
  overflow-x: hidden;
  margin-top: 10px;
  padding-right: 2px;
  -webkit-overflow-scrolling: touch;
}

/* Backup/restore: tile layout */
.workflow-backup-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 0;
}

.workflow-backup-tile {
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background: color-mix(in srgb, var(--surface) 92%, var(--accent) 8%);
  border-radius: 10px;
  padding: 10px 10px 9px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.workflow-backup-tile__when {
  font-weight: 700;
  color: var(--text);
  line-height: 1.15;
}

.workflow-backup-tile__note {
  margin-top: 2px;
  padding: 15px 0;
  font-size: 0.78rem;
  line-height: 1.25;
  color: color-mix(in srgb, var(--text) 65%, transparent);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  white-space: normal;
}

.workflow-backup-tile__sep {
  height: 1px;
  background: color-mix(in srgb, var(--border) 70%, transparent);
}

.workflow-backup-tile__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
  justify-content: space-between;
}

.workflow-backup-tile__counts {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.workflow-backup-chip {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: color-mix(in srgb, var(--text) 92%, transparent);
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.1;
  white-space: nowrap;
}

.workflow-backup-tile__actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.workflow-backup-tile__restore {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.workflow-page-workflow-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  width: 100%;
  max-width: 100%;
  padding-top: 15px;
  padding-left: 15px;
}

.workflow-page-workflow-heading {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
}

.workflow-page-workflow-select {
  max-width: 36rem;
}

.workflow-page-workflow-picker-row {
  display: flex;
  /* Many fixed-width toolbar buttons in Edit mode; keep wrap so the workflow
     <select> does not shrink to the chevron-only width (min-width: 0). */
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  width: 100%;
  min-width: 0;
}

.workflow-page-workflow-picker-row .workflow-page-workflow-select {
  /* Size to workflow text instead of stretching/truncating in the toolbar row. */
  flex: 0 1 auto;
  width: fit-content;
  min-width: min(100%, 14rem);
  max-width: min(100%, 56rem);
}

.workflow-page-workflow-picker-row .workflow-page-new-btn {
  flex-shrink: 0;
}

.workflow-page-icon-btn.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: 2rem;
  padding: 0.22rem 0.4rem;
  font-size: 0.7rem;
  line-height: 1;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  font-weight: 600;
  box-shadow: none;
}

.workflow-page-icon-btn.button:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
}

.workflow-page-icon-btn.button[aria-busy='true'] {
  opacity: 0.6;
  pointer-events: none;
}

.workflow-page-icon-btn--danger.button {
  background: transparent;
  color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border));
}

.workflow-page-icon-btn--danger.button:hover {
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  border-color: var(--danger);
}

.workflow-page-toolbar-err {
  margin: 0.35rem 0 0;
  max-width: min(100%, 56rem);
}

.workflow-page-audit-host {
  margin: 0.4rem 0 0;
  max-width: min(100%, 56rem);
}

.workflow-page-audit-host--hidden {
  display: none !important;
}

.workflow-page-workflow-picker-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}

.workflow-page-workflow-picker-actions:empty {
  display: none;
}

.workflow-page-editor-title {
  margin: 0;
  max-width: min(100%, 56rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}

.workflow-page-workflow-under-select-desc {
  margin: 0.3rem 0 0;
  max-width: min(100%, 56rem);
  line-height: 1.68;
  font-size: calc(1rem - 1px);
}

.workflow-page-workflow-under-select-warn {
  margin: 0.35rem 0 0;
  max-width: min(100%, 56rem);
  line-height: 1.55;
  font-size: calc(1rem - 2px);
  color: var(--warn);
}

.workflow-page-workflow-empty {
  margin: 0;
  padding: 2rem 1.35rem;
  text-align: center;
  background: var(--surface);
  border: 1px dashed color-mix(in srgb, var(--border) 85%, var(--muted));
  border-radius: 12px;
  max-width: 36rem;
}

.workflow-page-workflow-empty-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
  color: var(--muted);
  opacity: 0.85;
}

.workflow-page-workflow-empty-title {
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
}

.workflow-page-workflow-empty-hint {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
}

.workflow-page-workflow-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
  margin-top: 1.15rem;
}

.workflow-list-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

/* Workflow detail: Run panel header (Edit / Delete) */
.workflow-run-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.9rem;
  margin-bottom: 0.65rem;
}

.workflow-run-head h2 {
  margin: 0;
}

.workflow-run-head-left,
.workflow-run-head-right {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
}

button.workflow-run-trigger {
  margin-left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.workflow-run-toolbar button.workflow-run-trigger {
  margin-left: 0;
  background: var(--accent);
  color: var(--button-fg);
  border: none;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--accent) 38%, transparent);
}

button.workflow-run-trigger.workflow-run-trigger--secondary {
  margin-left: 0;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  box-shadow: none;
}

button.workflow-run-trigger.workflow-run-trigger--secondary:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
}

button.workflow-run-trigger.workflow-run-trigger--danger-outline {
  margin-left: 0;
  background: transparent;
  color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border));
  box-shadow: none;
}

button.workflow-run-trigger.workflow-run-trigger--danger-outline:hover {
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  border-color: var(--danger);
}

.workflow-run-trigger-icon {
  flex-shrink: 0;
}

.workflow-run-footer {
  margin-top: 0.65rem;
}

.workflow-run-footer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.9rem;
}

button.workflow-run-text-btn {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

button.workflow-run-text-btn:hover {
  text-decoration: underline;
}

.workflow-run-head-left .workflow-run-text-btn {
  font-size: 16px;
}

.workflow-run-head-left .workflow-run-delete {
  color: var(--muted);
  font-weight: 400;
}

.workflow-run-triggerdata-label {
  display: block;
  margin: 0 0 0.35rem;
}

.platform-triggerdata-panel {
  max-width: min(40rem, 100vw - 2.5rem);
}

.platform-triggerdata-textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 12rem;
  margin: 0 0 1rem;
  padding: 10px;
  font-family: "Segoe UI", ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', 'Courier New',
    monospace;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text);
  background: color-mix(in srgb, var(--muted) 12%, var(--surface));
  border: 1px solid var(--border);
  border-radius: 8px;
  resize: vertical;
}

/* Workflows: explorer + editor column */
.workflows-page-shell {
  --workflow-explorer-width: 260px;
  --workflow-explorer-slim-width: 50px;
  display: grid;
  grid-template-columns: var(--workflow-explorer-width) 1px minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  width: 100%;
  min-height: 0;
  height: 100%;
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
}

.workflows-page-shell.workflow-explorer-slim:not(.ide-left-explorer-collapsed) {
  transition: grid-template-columns 0.32s ease;
}

.workflows-page-shell.workflow-explorer-slim.workflow-explorer-slim-collapsed:not(.ide-left-explorer-collapsed) {
  grid-template-columns: var(--workflow-explorer-slim-width) 0px minmax(0, 1fr);
}

.workflows-page-shell.workflow-explorer-slim.workflow-explorer-slim-expanded:not(.ide-left-explorer-collapsed) {
  grid-template-columns: var(--workflow-explorer-width) 1px minmax(0, 1fr);
}

.workflows-page-shell.workflow-explorer-slim.workflow-explorer-slim-collapsed:not(.ide-left-explorer-collapsed)
  .workflow-explorer {
  border-right: 1px solid var(--border);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.workflows-page-shell.workflow-explorer-slim.workflow-explorer-slim-collapsed:not(.ide-left-explorer-collapsed)
  .workflow-explorer:hover {
  background: color-mix(in srgb, var(--accent) 38%, var(--surface));
  border-right-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

.workflows-page-shell.workflow-explorer-slim.workflow-explorer-slim-collapsed:not(.ide-left-explorer-collapsed)
  .workflow-explorer:hover
  .workflow-explorer-slim-label-text {
  color: color-mix(in srgb, var(--accent) 90%, var(--text));
}

.workflows-page-shell.workflow-explorer-slim.workflow-explorer-slim-collapsed:not(.ide-left-explorer-collapsed)
  .workflow-explorer-splitter {
  opacity: 0;
  pointer-events: none;
}

.workflows-page-shell.workflow-explorer-slim.workflow-explorer-slim-expanded:not(.ide-left-explorer-collapsed)
  .workflow-explorer-slim-label {
  display: none;
}

.workflow-explorer-body {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.32s ease, opacity 0.28s ease;
  transform: translateX(0);
  opacity: 1;
}

.workflows-page-shell.workflow-explorer-slim.workflow-explorer-slim-collapsed:not(.ide-left-explorer-collapsed)
  .workflow-explorer-body {
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
}

.workflows-page-shell.workflow-explorer-slim.workflow-explorer-slim-expanded:not(.ide-left-explorer-collapsed)
  .workflow-explorer-body {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.workflow-explorer-slim-label {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  overflow: visible;
  pointer-events: none;
  user-select: none;
  padding: 1rem 0;
  z-index: 2;
}

.workflows-page-shell.workflow-explorer-slim.workflow-explorer-slim-collapsed:not(.ide-left-explorer-collapsed)
  .workflow-explorer-slim-label {
  display: flex;
}

.workflow-explorer-slim-label-text {
  display: block;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;
  overflow: visible;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--accent);
  max-height: min(calc(100vh - 5rem), 520px);
  line-height: 1.25;
  transform: rotate(180deg);
  transform-origin: center center;
}

.workflows-page-shell.workflow-explorer-collapsed,
.workflows-page-shell.ide-left-explorer-collapsed {
  grid-template-columns: minmax(0, 1fr);
}

.workflows-page-shell.workflow-explorer-collapsed .workflow-explorer,
.workflows-page-shell.workflow-explorer-collapsed .workflow-explorer-splitter,
.workflows-page-shell.ide-left-explorer-collapsed .workflow-explorer,
.workflows-page-shell.ide-left-explorer-collapsed .workflow-explorer-splitter {
  display: none;
}

.nc-explorer-shell.ide-left-explorer-collapsed,
.prompts-page-shell.ide-left-explorer-collapsed,
.settings-shell.ide-left-explorer-collapsed {
  grid-template-columns: minmax(0, 1fr);
}

.nc-explorer-shell.ide-left-explorer-collapsed .nc-explorer,
.nc-explorer-shell.ide-left-explorer-collapsed .nc-explorer-splitter,
.prompts-page-shell.ide-left-explorer-collapsed .prompts-page-left,
.prompts-page-shell.ide-left-explorer-collapsed .prompts-page-splitter,
.settings-shell.ide-left-explorer-collapsed .settings-explorer {
  display: none;
}

.workflows-page-main {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: stretch;
  min-width: 0;
  width: 100%;
  min-height: 0;
  padding: 0 0 1rem;
  background: var(--surface);
  overflow: visible;
}

.workflows-page-main:has(> .workflows-page-detail-host--edit) {
  gap: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding-bottom: 0;
}

.workflow-page-workflow-field:has(+ .workflows-page-detail-host--edit) {
  padding-top: 0;
}

.workflows-page-main:has(+ .app-bottom-panel) {
  min-height: 80%;
}

.workflows-page-detail-host {
  min-width: 0;
  width: 100%;
}

.workflows-page-detail-host--edit {
  box-sizing: border-box;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.workflows-page-detail-host--edit .workflow-builder-layout--canvas-edit {
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
  grid-template-columns: minmax(0, 1fr) 1px var(--workflow-config-panel-width, 360px);
  overflow: hidden;
  transition: grid-template-columns 0.32s ease;
}

.workflows-page-detail-host--edit .workflow-builder-layout--canvas-edit.workflow-builder-layout--config-panel-hidden {
  grid-template-columns: minmax(0, 1fr) 0px 0px;
}

.workflows-page-detail-host--edit .workflow-builder-layout--canvas-edit > .workflow-builder-first-section {
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.workflows-page-detail-host--edit .workflow-builder-layout--canvas-edit .workflow-canvas-editor-section {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.workflows-page-detail-host--edit .workflow-builder-layout--canvas-edit .workflow-canvas-host {
  flex: 1 1 auto;
  min-height: 0;
}

.workflows-page-detail-host--edit .workflow-canvas-root {
  padding-bottom: 0;
}

.workflows-page-detail-host--edit .workflow-canvas-stage {
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.workflow-config-panel-splitter {
  position: relative;
  z-index: 2;
  width: 1px;
  min-width: 1px;
  cursor: col-resize;
  background: var(--border);
  touch-action: none;
  transition: opacity 0.28s ease;
}

.workflows-page-detail-host--edit
  .workflow-builder-layout--canvas-edit.workflow-builder-layout--config-panel-hidden
  .workflow-config-panel-splitter {
  opacity: 0;
  pointer-events: none;
}

.workflow-config-panel-splitter::before {
  content: '';
  position: absolute;
  inset: 0 -10px;
}

.workflow-config-panel-splitter:hover,
.workflow-config-panel-splitter:focus-visible,
body.workflow-config-panel-resizing .workflow-config-panel-splitter {
  background: color-mix(in srgb, var(--accent) 42%, var(--border));
}

body.workflow-config-panel-resizing {
  cursor: col-resize;
  user-select: none;
}

.workflows-page-detail-host--edit .workflow-builder-layout--canvas-edit .workflow-builder-config-panel {
  position: static;
  align-self: stretch;
  max-height: none;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
  padding: 10px 1rem 1rem 0.65rem;
  border: none;
  border-radius: 0;
  background: var(--surface);
  min-width: 0;
}

.workflow-builder-right-panel-tabs {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
  gap: 0.15rem;
  margin: 0 0 0.5rem;
  border-bottom: 1px solid var(--border);
}

.workflow-builder-right-panel-tab {
  flex: 1 1 0;
  min-width: 0;
  margin: 0 0 -1px;
  padding: 0.55rem 0.35rem;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 6px 6px 0 0;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--muted);
  cursor: pointer;
  text-align: center;
}

.workflow-builder-right-panel-tab:hover {
  color: var(--text);
}

.workflow-builder-right-panel-tab.is-active {
  border-bottom-color: var(--accent);
  color: var(--text);
  font-weight: 600;
}

.workflow-builder-right-panel-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.workflow-builder-right-panel-pane {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: none;
  flex-direction: column;
  overflow: hidden;
}

.workflow-builder-right-panel-pane[hidden] {
  display: none !important;
}

.workflow-builder-right-panel-pane.workflow-builder-right-panel-pane--active {
  display: flex;
}

.workflow-builder-right-panel-pane--config .workflow-builder-config-head {
  justify-content: flex-end;
  padding: 0 0 0.5rem;
}

.workflow-builder-right-panel-pane--config .workflow-builder-config-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  /* Inset scrollable config so focus rings are not clipped at the scrollport edge. */
  padding-left: 5px;
  padding-right: 5px;
}

.workflow-builder-right-panel-pane--config .workflow-builder-node-run-row {
  padding: 0.85rem 0 0.65rem;
  flex-shrink: 0;
}

.workflow-builder-right-panel-pane--config .ned-cfg-run-row .workflow-builder-config-view-btn {
  width: auto;
  margin: 0 0 0 auto;
  flex-shrink: 0;
  white-space: nowrap;
}

.workflow-builder-right-panel-pane--sessions .workflow-builder-edit-session-stack {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 0;
  gap: 0.5rem;
}

.workflow-builder-right-panel-pane--sessions .workflow-builder-session-list-header {
  justify-content: flex-end;
}

.workflow-builder-right-panel-pane--sessions .workflow-builder-session-list-content {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: auto;
}

/* Session execution cards in the right panel. */
.workflow-builder-right-panel-pane--sessions .execution-session-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.workflow-builder-right-panel-pane--sessions .execution-session-card {
  margin: 0;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--muted) 3%, var(--surface));
  cursor: pointer;
  font-size: 0.78rem;
  line-height: 1.35;
}

.workflow-builder-right-panel-pane--sessions .execution-session-card--failed {
  background: color-mix(in srgb, var(--danger) 4%, var(--surface));
  border-color: color-mix(in srgb, var(--danger) 18%, var(--border));
}

.workflow-builder-right-panel-pane--sessions .execution-session-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.workflow-builder-right-panel-pane--sessions .execution-session-card--selected {
  border-width: 2px;
  border-color: var(--accent);
  padding: calc(0.65rem - 1px) calc(0.75rem - 1px);
}

.workflow-builder-right-panel-pane--sessions .execution-session-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}

.workflow-builder-right-panel-pane--sessions .execution-session-card-date-line {
  line-height: 1.3;
}

.workflow-builder-right-panel-pane--sessions .execution-session-card-time-line {
  font-size: 0.68rem;
  margin-top: 0.12rem;
  line-height: 1.3;
}

.workflow-builder-right-panel-pane--sessions .execution-session-card-status {
  flex-shrink: 0;
}

.workflow-builder-right-panel-pane--sessions .execution-session-card-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem 0.5rem;
  margin: 0 0 0.55rem;
}

.workflow-builder-right-panel-pane--sessions .execution-session-card-meta-row {
  min-width: 0;
}

.workflow-builder-right-panel-pane--sessions .execution-session-card-meta dt {
  margin: 0;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 400;
}

.workflow-builder-right-panel-pane--sessions .execution-session-card-meta dd {
  margin: 0.12rem 0 0;
  font-size: 0.74rem;
  word-break: break-word;
}

.workflow-builder-right-panel-pane--sessions .execution-session-card-id {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 0.55rem;
}

.workflow-builder-right-panel-pane--sessions .execution-session-card-id-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.workflow-builder-right-panel-pane--sessions .execution-session-card-id-link {
  display: block;
  word-break: break-all;
  line-height: 1.35;
  font-weight: 400;
  color: var(--accent);
  text-decoration: none;
}

.workflow-builder-right-panel-pane--sessions .execution-session-card-id-link:hover {
  text-decoration: underline;
}

.workflow-builder-right-panel-pane--sessions .execution-session-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
}

.workflow-builder-right-panel-pane--sessions .execution-session-card-actions .execution-history-cleanup-btn {
  font-size: 0.68rem;
  padding: 0.22rem 0.45rem;
}

.workflow-builder-right-panel-pane--sessions .execution-session-card-actions .execution-history-payload-size {
  margin-left: 0;
  font-size: 0.68rem;
}

.workflow-builder-config-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-shrink: 0;
  margin-top: 0;
  padding: 0.85rem 0 0.65rem;
}

.workflow-builder-config-meta {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex-shrink: 0;
  margin-top: -10px;
  padding: 0 0 0.35rem;
}

.workflow-builder-config-meta-row {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  min-width: 0;
  max-width: 100%;
}

.workflow-builder-config-meta-value {
  font-size: 0.72rem;
  line-height: 1.15;
  color: var(--muted);
  font-weight: 500;
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-builder-config-meta-copy {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  height: 1.15rem;
  margin-left: 10px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  color: color-mix(in srgb, var(--muted) 68%, transparent);
}

.workflow-builder-config-meta-copy:hover:not(:disabled),
.workflow-builder-config-meta-copy:focus-visible:not(:disabled) {
  background: transparent;
  border: 0;
  color: color-mix(in srgb, var(--muted) 82%, var(--text));
}

.workflow-builder-config-meta-copy svg {
  width: 15px;
  height: 15px;
  display: block;
}

.workflow-builder-config-title {
  margin: 0;
  font-size: calc(1.1rem - 2px);
  font-weight: 600;
  flex: 1 1 auto;
  min-width: 0;
}

.workflow-builder-config-head .workflow-builder-config-view-btn {
  width: auto;
  margin: 0;
  flex-shrink: 0;
  white-space: nowrap;
}

.workflow-builder-config-empty {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
}

.workflow-builder-config-panel--has-selection .workflow-builder-config-empty {
  display: none;
}

.workflow-builder-config-empty-inner {
  max-width: 16rem;
  text-align: center;
  transform: translateY(-20px);
}

.workflow-builder-config-empty-icon {
  display: block;
  margin: 0 auto 0.75rem;
  font-size: 2rem;
  color: color-mix(in srgb, var(--muted) 72%, var(--accent));
}

.workflow-builder-config-empty-title {
  margin: 0 0 0.45rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.45;
}

.workflow-builder-config-empty-hint {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
}

.workflow-builder-config-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.workflow-builder-right-panel-pane--config .workflow-builder-config-body > button.button {
  width: auto;
  align-self: flex-end;
  flex-shrink: 0;
  white-space: nowrap;
  margin-bottom: 100px;
}

.workflow-builder-saved-success-toast {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.workflow-builder-saved-success-toast .badge {
  text-transform: none;
  letter-spacing: 0;
}

.workflow-builder-config-panel .node-config-form:not(:empty) {
  margin-top: 0;
}

.workflow-builder-config-panel:not(.workflow-builder-config-panel--has-selection) .workflow-builder-config-body {
  display: none;
}

.workflows-page-detail-host--edit .workflow-builder-layout--canvas-edit .workflow-builder-right:not(.workflow-builder-config-panel) {
  position: static;
  align-self: stretch;
  max-height: none;
  min-height: 0;
  overflow: auto;
  border-left: 1px solid var(--border);
  padding-left: 1rem;
}

.workflow-explorer {
  position: relative;
  min-width: 0;
  min-height: 0;
  background: color-mix(in srgb, var(--surface) 94%, var(--panel));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.workflow-explorer-stack {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.workflow-explorer-main-wrap {
  min-height: 0;
  overflow: auto;
}

.workflow-explorer-inner-splitter {
  flex-shrink: 0;
  height: 1px;
  min-height: 1px;
  cursor: row-resize;
  touch-action: none;
  background: var(--border);
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}

/** Wider drag target without thickening the visible rule (cf. .workflow-explorer-splitter::before). */
.workflow-explorer-inner-splitter::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -6px;
  bottom: -6px;
}

.workflow-explorer-inner-splitter:hover,
.workflow-explorer-inner-splitter:focus-visible,
body.workflow-explorer-inner-resizing .workflow-explorer-inner-splitter {
  background: color-mix(in srgb, var(--accent) 55%, var(--border));
}

body.workflow-explorer-inner-resizing {
  cursor: row-resize;
  user-select: none;
}

.workflow-explorer-sub-wrap {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.workflow-explorer-sub-wrap:not(.is-collapsed) {
  max-height: 30%;
}

.workflow-explorer-sub-wrap.is-collapsed {
  flex-direction: column-reverse;
}

.workflow-explorer-sub-wrap.is-collapsed .workflow-explorer-sub-list {
  display: none;
}

/* Parent workflow with referenced sub-workflows — collapsed by default */
.workflow-explorer-agent-group {
  display: block;
  --workflow-parent-row-inset: 1.1rem;
  /* parent row inset + icon + row gap — child icon aligns with parent label text */
  --workflow-parent-title-inset: calc(var(--workflow-parent-row-inset) + 1rem + 0.35rem);
}

.workflow-explorer-agent-group.is-collapsed .workflow-explorer-children {
  display: none;
}

.workflow-explorer-parent-item {
  display: block;
}

.workflow-explorer-sub-toggle .prompts-list-chevron {
  font-size: 1rem;
  line-height: 1;
  display: block;
}

.workflow-explorer-child-row .workflow-explorer-row-icon {
  color: color-mix(in srgb, var(--text) 80%, var(--muted));
}

.workflow-explorer-sub-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  padding: 0.45rem 0.75rem 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.workflow-explorer-sub-head-label {
  min-width: 0;
}

.workflow-explorer-sub-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.workflow-explorer-sub-toggle:hover,
.workflow-explorer-sub-toggle:focus-visible {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--text);
}

.workflow-explorer-sub-toggle .material-symbols-outlined {
  font-size: 1.15rem;
  line-height: 1;
}

.workflow-explorer-sub-list {
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
}

.workflow-explorer-splitter {
  position: relative;
  z-index: 2;
  width: 1px;
  min-width: 1px;
  cursor: col-resize;
  background: var(--border);
  touch-action: none;
}

.workflow-explorer-splitter::before {
  content: '';
  position: absolute;
  inset: 0 -10px;
}

.workflow-explorer-splitter:hover,
.workflow-explorer-splitter:focus-visible,
body.workflow-explorer-resizing .workflow-explorer-splitter {
  background: color-mix(in srgb, var(--accent) 42%, var(--border));
}

body.workflow-explorer-resizing {
  cursor: col-resize;
  user-select: none;
}

.workflow-explorer-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.65rem 0.75rem 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.workflow-explorer .nc-search-row {
  margin: 10px 0.55rem 0.55rem;
  flex-shrink: 0;
}

.workflow-explorer .nc-search-input {
  width: 100%;
  max-width: none;
}

.workflow-explorer-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: auto;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.workflow-explorer-nav-icons {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: 20px;
  margin-right: 0.12rem;
}

.workflow-explorer-nav-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 5px;
  color: var(--muted);
  text-decoration: none;
  flex-shrink: 0;
}

.workflow-explorer-nav-icon-link:hover,
.workflow-explorer-nav-icon-link:focus-visible {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--text);
}

.workflow-explorer-nav-icon-link.is-active {
  background: color-mix(in srgb, var(--muted) 35%, transparent);
  color: var(--text);
}

.workflow-explorer-nav-icon-wrap .sidebar-nav-svg {
  width: 0.92rem;
  height: 0.92rem;
  display: block;
}

.workflow-page-account-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 86%, var(--text) 6%);
  padding: 0.32rem 0.6rem 0.42rem;
}

.workflow-page-account-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.45rem;
  justify-content: flex-start;
}

.workflow-page-account-footer-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  min-width: 0;
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-page-account-footer .nav-theme-icon-btn.workflow-page-account-footer-theme,
.workflow-page-account-footer .workflow-page-account-footer-logout {
  width: 1.8rem;
  height: 1.8rem;
  min-width: 1.8rem;
  min-height: 1.8rem;
}

.workflow-page-account-footer .nav-theme-icon {
  width: 1.02rem;
  height: 1.02rem;
}

.workflow-page-account-footer .sidebar-logout-svg {
  width: 0.92rem;
  height: 0.92rem;
}

.workflow-explorer-action-btn {
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  width: 1.65rem;
  height: 1.65rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.workflow-explorer-action-btn .material-symbols-outlined {
  font-size: 1.05rem;
  line-height: 1;
}

.workflow-explorer-action-btn:hover,
.workflow-explorer-action-btn:focus-visible {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--text);
}

.workflow-explorer-action-btn.is-pinned {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent);
}

.workflow-explorer-action-btn.is-pinned:hover,
.workflow-explorer-action-btn.is-pinned:focus-visible {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent);
}

.workflow-explorer-list {
  --explorer-chevron-gap: 0.5rem;
  padding: 0 0.35rem 0.75rem;
}

.workflow-explorer-folder {
  margin: 0.15rem 0;
}

.workflow-explorer-folder-summary {
  cursor: pointer;
  list-style: none;
  padding: 0.24rem 0.35rem;
  font-size: 0.83rem;
  font-weight: 400;
  color: var(--text);
  border-radius: 5px;
}

.workflow-explorer-folder-summary::-webkit-details-marker,
.workflow-explorer-folder-summary::marker {
  display: none;
}

.workflow-explorer-folder-summary::before {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-feature-settings: 'liga';
  font-variant-ligatures: normal;
  -webkit-font-feature-settings: 'liga';
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
  content: 'chevron_right';
  display: inline-block;
  width: 1rem;
  margin-right: var(--explorer-chevron-gap, 0.5rem);
  font-size: 1rem;
  line-height: 1;
  color: var(--muted);
  transition: transform 0.12s ease;
  vertical-align: -0.15em;
}

.workflow-explorer-folder[open] .workflow-explorer-folder-summary::before {
  transform: rotate(90deg);
}

.workflow-explorer-folder > .workflow-explorer-row:not(.workflow-explorer-child-row) {
  padding-left: calc(1.1rem + var(--explorer-chevron-gap, 0.5rem));
}

.workflow-explorer-folder > .workflow-explorer-agent-group {
  --workflow-parent-row-inset: calc(1.1rem + var(--explorer-chevron-gap, 0.5rem));
}

.workflow-explorer-folder > .workflow-explorer-agent-group > .workflow-explorer-parent-item > .workflow-explorer-row {
  padding-left: var(--workflow-parent-row-inset);
}

.workflow-explorer-folder.is-drag-over > .workflow-explorer-folder-summary,
.workflow-explorer-folder.is-drag-over {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.workflow-explorer-folder-empty-hint {
  margin: 0.1rem 0.35rem 0.35rem calc(1.1rem + var(--explorer-chevron-gap, 0.5rem));
  font-size: 0.78rem;
}

.workflow-explorer-row-icon--arrange {
  flex: 0 0 auto;
  font-size: 1.05rem;
  color: var(--muted);
  cursor: default;
  user-select: none;
}

.workflow-explorer-row-icon--arrange[draggable='true'] {
  cursor: grab;
}

.workflow-explorer-row-icon--arrange[draggable='true']:active {
  cursor: grabbing;
}

.workflow-explorer--arrange .workflow-explorer-folder-empty-hint {
  display: block;
}

.workflow-explorer-folder-empty-hint {
  display: none;
}

.workflow-explorer-context-menu {
  position: fixed;
  z-index: 12000;
  min-width: 11rem;
  padding: 0.25rem 0;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--text) 18%, transparent);
}

.workflow-explorer-context-menu-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4rem 0.75rem;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.84rem;
  text-align: left;
  cursor: pointer;
}

.workflow-explorer-context-menu-item-icon {
  flex-shrink: 0;
  font-size: 1.125rem;
  line-height: 1;
  color: var(--muted);
}

.workflow-explorer-context-menu-item-label {
  min-width: 0;
  flex: 1 1 auto;
}

.workflow-explorer-context-menu-item--danger .workflow-explorer-context-menu-item-icon {
  color: inherit;
}

.workflow-explorer-context-menu-item:disabled .workflow-explorer-context-menu-item-icon {
  opacity: 0.45;
}

.workflow-explorer-context-menu-item:hover:not(:disabled) {
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

.workflow-explorer-context-menu-item:disabled {
  opacity: 0.45;
  cursor: default;
}

.workflow-explorer-context-menu-item--danger {
  color: var(--danger, #c62828);
}

.workflow-folder-pick-select {
  width: 100%;
  box-sizing: border-box;
  margin-top: 0.25rem;
  font: inherit;
}

.workflow-folder-pick-new {
  margin-top: 0.5rem;
}

.workflow-folder-pick-new input {
  width: 100%;
  box-sizing: border-box;
  margin-top: 0.25rem;
  font: inherit;
}

.workflow-explorer-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.8rem;
  padding: 0.2rem 0.35rem 0.2rem calc(1.1rem + (var(--workflow-explorer-depth, 0) * 1rem));
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.84rem;
  text-align: left;
  cursor: pointer;
}

/* After .workflow-explorer-row — child icon aligns with parent label text */
.workflow-explorer-row.workflow-explorer-child-row {
  padding-left: var(--workflow-parent-title-inset, calc(1.1rem + 1rem + 0.35rem));
}

.workflow-explorer-row:hover {
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

/* Left-panel explorer lists: light blue selected row */
.workflow-explorer-row.is-active,
.workflow-explorer-parent-item.is-selected > .workflow-explorer-row,
.prompts-list-item.is-selected .prompts-list-btn,
.prompts-list-section-item.is-selected .workflow-explorer-row,
.nc-explorer-row.is-active,
.settings-explorer-row.is-active,
.kb-entry-list-item.is-active,
.eval-run-item.is-active,
.eval-explorer-dashboard-nav-btn.is-active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.workflow-explorer-row.is-active .workflow-explorer-row-label,
.workflow-explorer-parent-item.is-selected > .workflow-explorer-row .workflow-explorer-row-label,
.prompts-list-item.is-selected .prompts-list-title,
.prompts-list-section-item.is-selected .workflow-explorer-row-label,
.nc-explorer-row.is-active .nc-explorer-row-label,
.settings-explorer-row.is-active,
.kb-entry-list-item.is-active .kb-entry-list-title,
.eval-run-item.is-active .eval-run-item-id,
.eval-explorer-dashboard-nav-btn.is-active {
  font-weight: 600;
  color: color-mix(in srgb, var(--accent) 72%, var(--text));
}

.workflow-explorer-row-icon {
  width: 1rem;
  font-size: 1rem;
  color: var(--muted);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.workflow-explorer-row-icon .sidebar-nav-svg {
  width: 1rem;
  height: 1rem;
  display: block;
}

.workflow-explorer-row-icon-default,
.workflow-explorer-row-icon-running,
.workflow-explorer-row-icon-error {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
}

.workflow-explorer-row-icon-running {
  color: color-mix(in srgb, var(--accent) 80%, var(--text));
}

.workflow-explorer-row-icon-running[hidden],
.workflow-explorer-row-icon-error[hidden],
.workflow-explorer-row-icon-default[hidden] {
  display: none;
}

.workflow-explorer-row-icon-running .workflow-canvas-node-running-svg {
  width: 14px;
  height: 14px;
  display: block;
}

.workflow-explorer-row-error-bullet {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--danger);
  display: block;
}

.workflow-explorer-row-status-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  width: 14px;
  height: 14px;
  color: color-mix(in srgb, var(--accent) 80%, var(--text));
}

.workflow-explorer-row-status-badge[hidden] {
  display: none;
}

.workflow-explorer-row-status-badge .workflow-canvas-node-running-svg {
  width: 14px;
  height: 14px;
  display: block;
}

.workflow-explorer-row-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflows-editor-column {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  overflow-x: hidden;
  overflow-y: auto;
}

.app-bottom-panel {
  min-width: 0;
  flex-shrink: 0;
  height: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
  background: var(--bg);
}

.app-bottom-panel-tabs {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  min-height: 2.15rem;
  padding: 0 0.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.app-bottom-panel-resize-handle {
  display: none;
  height: 0.35rem;
  margin-top: -0.175rem;
  cursor: ns-resize;
  flex-shrink: 0;
}

.app-bottom-panel-resize-handle:hover {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
}

.app-bottom-panel-tab {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  padding: 0.45rem 0.65rem;
  font-size: 0.82rem;
  min-height: 2.1rem;
}

.app-bottom-panel-tab.is-active {
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.app-bottom-panel-tab--future {
  margin-left: auto;
  color: var(--muted);
}

.app-bottom-panel-tab-body {
  min-height: 0;
  overflow: visible;
  padding: 0.75rem;
}

.app-bottom-panel .workflow-builder-edit-session-stack {
  margin-top: 0;
}

.app-bottom-panel .workflow-builder-node-list-section {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.app-bottom-panel .workflow-builder-node-list-summary {
  display: none;
}

.workflow-page-workflow-picker-row {
  position: relative;
}

.workflow-overflow-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% - 0.2rem);
  right: 0.35rem;
  min-width: 15rem;
  padding: 0.35rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.workflow-overflow-menu-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.workflow-overflow-menu-item-icon {
  flex-shrink: 0;
  font-size: 1.125rem;
  line-height: 1;
  color: var(--muted);
}

.workflow-overflow-menu-item-label {
  min-width: 0;
  flex: 1 1 auto;
}

.workflow-overflow-menu-item--danger .workflow-overflow-menu-item-icon,
.workflow-overflow-menu-item--primary .workflow-overflow-menu-item-icon {
  color: inherit;
}

.workflow-overflow-menu-item:disabled .workflow-overflow-menu-item-icon {
  opacity: 0.45;
}

.workflow-overflow-menu-item:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.workflow-overflow-menu-item--danger {
  color: var(--danger);
}

.workflow-overflow-menu-item--primary {
  color: var(--accent);
}

.workflow-overflow-menu-separator {
  height: 1px;
  margin: 0.3rem 0;
  background: var(--border);
}

.workflow-quick-open-overlay {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: max(4rem, 12vh) 1rem 1rem;
  background: rgba(0, 0, 0, 0.24);
}

.workflow-quick-open-panel {
  width: min(42rem, calc(100vw - 2rem));
  max-height: min(34rem, calc(100vh - 6rem));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
}

.workflow-quick-open-label {
  padding: 0.85rem 0.9rem 0.35rem;
  font-size: var(--font-size-small);
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.workflow-quick-open-input {
  width: auto;
  max-width: none;
  margin: 0 0.8rem;
  font-size: var(--mp-form-input-font-size);
}

.workflow-quick-open-hint {
  padding: 0.45rem 0.9rem 0.6rem;
  color: var(--muted);
  font-size: var(--font-size-small);
  border-bottom: 1px solid var(--border);
}

.workflow-quick-open-list {
  min-height: 8rem;
  overflow: auto;
  padding: 0.35rem;
}

.workflow-quick-open-item {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  padding: 0.45rem 0.55rem;
  text-align: left;
}

.workflow-quick-open-item.is-active,
.workflow-quick-open-item:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.workflow-quick-open-item-main {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
}

.workflow-quick-open-item-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.workflow-quick-open-item-folder {
  flex-shrink: 0;
  color: var(--muted);
  font-size: var(--font-size-small);
}

.workflow-quick-open-item-desc {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: var(--font-size-small);
}

.workflow-quick-open-empty {
  padding: 0.9rem;
}

@media (max-width: 52rem) {
  .workflows-page-shell {
    grid-template-columns: 1fr;
  }

  .workflow-explorer-splitter {
    display: none;
  }

  .workflow-explorer {
    border-right: 0;
    border-bottom: 1px solid var(--border);
    max-height: 16rem;
  }
}

.workflows-page-detail-empty {
  background: var(--surface);
  border: 1px dashed color-mix(in srgb, var(--border) 85%, var(--muted));
  border-radius: 12px;
  padding: 2rem 1.35rem;
  text-align: center;
}

.workflows-page-detail-empty-title {
  margin: 0 0 0.45rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
}

.workflows-page-detail-empty-hint {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  max-width: 22rem;
  margin-inline: auto;
}

.policy-page-main {
  overflow: auto;
  padding: 20px;
}

.policy-detail-header {
  margin-bottom: 1.25rem;
}

.policy-detail-meta {
  margin: 0.15rem 0 0;
  font-size: 0.9rem;
}

.policy-subject-block {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
  background: color-mix(in srgb, var(--surface) 96%, var(--border));
}

.policy-subject-title {
  margin: 0 0 0.65rem;
  font-size: 1rem;
  font-weight: 600;
}

.policy-subject-line {
  margin: 0.35rem 0;
  font-size: 0.92rem;
  line-height: 1.45;
}

.policy-registry-desc {
  white-space: pre-wrap;
}

.policy-tools-heading {
  margin: 0.75rem 0 0.4rem;
  font-size: 0.88rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}

.policy-tool-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.policy-tool-row {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.55rem 0.65rem;
  margin-bottom: 0.45rem;
  background: var(--surface);
}

.policy-tool-source {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  min-width: 5.5rem;
}

.policy-tool-id {
  font-size: 0.82rem;
}

.policy-tool-label {
  font-weight: 500;
  margin-top: 0.2rem;
}

.policy-tool-blurb {
  font-size: 0.88rem;
  margin-top: 0.25rem;
  line-height: 1.4;
}

/* Agent prompts split view: list + editor */
.prompts-page-shell {
  --prompts-left-width: 260px;
  display: grid;
  grid-template-columns: var(--prompts-left-width) 1px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  column-gap: 0;
  row-gap: 0;
  align-items: stretch;
  width: 100%;
  height: 100%;
  max-height: none;
  min-height: 0;
  box-sizing: border-box;
  border: 1px solid var(--border);
  background: var(--surface);
}

@media (max-width: 52rem) {
  .prompts-page-shell {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, auto) 0 minmax(0, 1fr);
  }

  .prompts-page-splitter {
    display: none;
  }

  .prompts-page-left {
    border-bottom: 1px solid var(--border);
    max-height: 16rem;
  }
}

.prompts-page-left {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  background: color-mix(in srgb, var(--surface) 94%, var(--panel));
}

.prompts-page-splitter {
  position: relative;
  z-index: 2;
  width: 1px;
  min-width: 1px;
  cursor: col-resize;
  background: var(--border);
  touch-action: none;
}

.prompts-page-splitter::before {
  content: '';
  position: absolute;
  inset: 0 -10px;
}

.prompts-page-splitter:hover,
.prompts-page-splitter:focus-visible,
body.prompts-page-resizing .prompts-page-splitter {
  background: color-mix(in srgb, var(--accent) 42%, var(--border));
}

body.prompts-page-resizing {
  cursor: col-resize;
  user-select: none;
}

.prompts-page-left-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  padding: 0.65rem 0.75rem 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.prompts-page-left-head-title {
  min-width: 0;
}

.prompts-page-left .nc-search-row {
  margin: 10px 0.55rem 0.55rem;
}

.prompts-page-left .nc-search-input {
  width: 100%;
  max-width: none;
}

.prompts-page-right {
  min-width: 0;
  min-height: 0;
  display: flex;
  overflow: hidden;
  padding: 0.75rem 0.75rem 1rem;
}

.prompts-page-list {
  --explorer-chevron-gap: 0.5rem;
  padding: 0 0.35rem 0.75rem;
}

.prompts-list-folder {
  margin: 0.15rem 0;
}

.prompts-list-folder-summary {
  cursor: pointer;
  list-style: none;
  padding: 0.24rem 0.35rem;
  font-size: 0.84rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--text);
  border-radius: 5px;
}

.prompts-list-folder-summary::-webkit-details-marker,
.prompts-list-folder-summary::marker {
  display: none;
}

.prompts-list-folder-summary::before {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-feature-settings: 'liga';
  font-variant-ligatures: normal;
  -webkit-font-feature-settings: 'liga';
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
  content: 'chevron_right';
  display: inline-block;
  width: 1rem;
  margin-right: var(--explorer-chevron-gap, 0.5rem);
  font-size: 1rem;
  line-height: 1;
  color: var(--muted);
  transition: transform 0.12s ease;
  vertical-align: -0.15em;
}

.prompts-list-folder[open] .prompts-list-folder-summary::before {
  transform: rotate(90deg);
}

.prompts-list-folder-summary:hover {
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

.prompts-list-item {
  display: block;
}

.prompts-list-folder .prompts-list-btn {
  padding-left: calc(1.75rem + var(--explorer-chevron-gap, 0.5rem));
}

.prompts-list-btn {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  min-height: 1.85rem;
  padding: 0.45rem 0.5rem 0.45rem 1.1rem;
  border-radius: 5px;
  color: var(--text);
  font: inherit;
  font-size: 0.84rem;
  cursor: pointer;
}

.prompts-list-row {
  display: flex;
  align-items: center;
  gap: var(--explorer-chevron-gap, 0.5rem);
  min-width: 0;
}

.prompts-list-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  color: var(--muted);
}

/* Match workflow explorer row icon sizing. */
.prompts-list-icon .sidebar-nav-svg {
  width: 1rem;
  height: 1rem;
}

.prompts-list-item.is-selected .prompts-list-icon,
.prompts-list-section-item.is-selected .prompts-list-icon {
  color: color-mix(in srgb, var(--text) 80%, var(--muted));
}

.prompts-list-btn:hover {
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

.prompts-list-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.84rem;
  font-weight: 400;
  color: var(--text);
  line-height: 1.45;
}

.prompts-list-sub {
  margin-top: 0.15rem;
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prompts-list-sub code {
  font-size: 0.75rem;
}

/* Parent prompt with section children — indented wrapper */
.prompts-list-agent-group {
  display: block;
  /* Parent title inset: btn padding + chevron + row gap (folder uses wider btn pad). */
  --prompts-parent-title-inset: calc(1.1rem + 1rem + var(--explorer-chevron-gap, 0.5rem));
}

.prompts-list-folder .prompts-list-agent-group {
  --prompts-parent-title-inset: calc(1.75rem + var(--explorer-chevron-gap, 0.5rem) + 1rem + var(--explorer-chevron-gap, 0.5rem));
}

.prompts-list-agent-group.is-collapsed .prompts-list-sections {
  display: none;
}

.prompts-list-expand-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: color-mix(in srgb, var(--text) 80%, var(--muted));
  cursor: pointer;
}

.prompts-list-expand-btn:hover {
  background: color-mix(in srgb, var(--text) 6%, transparent);
  color: color-mix(in srgb, var(--text) 88%, var(--muted));
}

.prompts-list-chevron {
  font-size: 1.125rem;
  transition: transform 0.12s ease;
}

/* chevron_down ligature is missing from our Material Symbols build; rotate chevron_right instead */
.prompts-list-chevron--expanded {
  transform: rotate(90deg);
}

.prompts-list-row > .prompts-list-icon,
.prompts-list-section-item .prompts-list-icon {
  color: color-mix(in srgb, var(--text) 80%, var(--muted));
}

/* Section rows: chat icon left edge aligns with parent title (after chevron). */
.prompts-list-section-row.workflow-explorer-row {
  padding-left: var(--prompts-parent-title-inset);
}

.prompts-detail {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.prompts-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}

.prompts-detail-title {
  margin: 0 0 0.25rem;
}

.prompts-detail-meta {
  margin: 0;
}

.prompts-detail-model-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
}

.prompts-detail-model-label {
  flex: 0 0 auto;
  margin: 0;
  font-size: 0.9rem;
}

.prompts-detail-model-select {
  flex: 1 1 12rem;
  max-width: 28rem;
  min-width: 0;
}

.prompts-detail-updated {
  margin: 0;
  text-align: right;
  white-space: nowrap;
}

.prompts-detail-textarea {
  max-width: 100%;
  flex: 1;
  min-height: 0;
  padding: 10px;
  line-height: 1.68;
  overflow: auto;
  resize: none;
}

.prompts-detail-prompt-wrap {
  max-width: 100%;
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.prompts-detail-prompt-wrap .prompts-detail-textarea {
  flex: 1;
  min-height: 0;
}

.prompts-detail-prompt-wrap.is-preview .prompts-detail-textarea {
  display: none !important;
}

.prompts-detail-prompt-wrap.is-edit .prompts-detail-md-preview {
  display: none !important;
}

.prompts-detail-md-preview {
  flex: 1;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  overflow: auto;
  padding: 20px;
  line-height: 1.68;
  font-family: var(--font-data);
  font-size: 0.85rem;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--bg);
  box-sizing: border-box;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.prompts-detail-md-preview--modal-readonly {
  flex: 1;
  min-height: 0;
}

.agent-prompt-modal-detail .prompts-detail-md-preview--modal-readonly {
  min-height: 12rem;
}

.prompts-detail-md-preview-empty {
  margin: 0;
}

.prompts-detail-md-preview > :first-child {
  margin-top: 0;
}

.prompts-detail-md-preview > :last-child {
  margin-bottom: 0;
}

.prompts-detail-md-preview h1,
.prompts-detail-md-preview h2,
.prompts-detail-md-preview h3,
.prompts-detail-md-preview h4 {
  font-family: var(--font-title);
  color: var(--text);
  margin: 1.1em 0 0.45em;
  line-height: 1.25;
  font-weight: 600;
}

.prompts-detail-md-preview h1 {
  font-size: 1.25rem;
}

.prompts-detail-md-preview h2 {
  font-size: 1.1rem;
}

.prompts-detail-md-preview h3 {
  font-size: 1rem;
}

.prompts-detail-md-preview h4 {
  font-size: 0.95rem;
}

.prompts-detail-md-preview p {
  margin: 0.55em 0;
}

.prompts-detail-md-preview ul,
.prompts-detail-md-preview ol {
  margin: 0.55em 0;
  padding-left: 1.35rem;
}

.prompts-detail-md-preview li {
  margin: 0.25em 0;
}

.prompts-detail-md-preview blockquote {
  margin: 0.65em 0;
  padding: 0.35rem 0 0.35rem 0.85rem;
  border-left: 3px solid color-mix(in srgb, var(--accent) 55%, var(--border));
  color: color-mix(in srgb, var(--text) 88%, var(--muted));
}

.prompts-detail-md-preview a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prompts-detail-md-preview img {
  max-width: 100%;
  height: auto;
}

.prompts-detail-md-preview hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1rem 0;
}

.prompts-detail-md-preview code {
  font-family: var(--font-data);
  font-size: 0.92em;
  padding: 0.12em 0.35em;
  border-radius: 4px;
  background: color-mix(in srgb, var(--muted) 14%, transparent);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.prompts-detail-md-preview pre {
  margin: 0.65em 0;
  padding: 0.75rem 1rem;
  overflow-x: auto;
  border-radius: var(--radius-control);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 70%, var(--bg));
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.prompts-detail-md-preview pre code {
  padding: 0;
  background: none;
  font-size: 0.88em;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.prompts-detail-md-preview table {
  border-collapse: collapse;
  margin: 0.65em 0;
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
}

.prompts-detail-md-preview th,
.prompts-detail-md-preview td {
  border: 1px solid var(--border);
  padding: 0.4rem 0.55rem;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.prompts-detail-md-preview th {
  background: color-mix(in srgb, var(--surface) 80%, var(--bg));
  font-weight: 600;
}

.prompts-detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  justify-content: flex-end;
}

.prompts-detail-char-count {
  margin-right: auto;
  font-size: 0.9rem;
  white-space: nowrap;
}

.prompts-detail-actions button {
  min-width: 7.5rem;
  padding: 0.6rem 1.1rem;
  font-size: 0.95rem;
}

.prompts-page-detail-empty {
  background: var(--surface);
  border: 1px dashed color-mix(in srgb, var(--border) 85%, var(--muted));
  border-radius: 12px;
  padding: 2rem 1.35rem;
  text-align: center;
  flex: 1;
}

/* ── Prompt detail: horizontal editor + Q&A split (Agent Prompts page only) ── */

.prompts-page-shell .prompts-detail {
  flex-direction: row !important;
  padding: 0;
  overflow: hidden;
}

/* Workflow node editor modal reuses .prompts-detail — keep vertical stack layout. */
.agent-prompt-modal-detail.prompts-detail {
  flex-direction: column;
  padding: 1rem;
  overflow: visible;
}

.prompts-detail-editor {
  flex: 3;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  overflow: auto;
}

.prompts-detail-inner-splitter {
  width: 1px;
  background: var(--border);
  flex: 0 0 1px;
  cursor: col-resize;
}

.prompts-detail-head-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  flex-shrink: 0;
}

/* ── Version history dropdown ─────────────────────────────────────── */

.prompts-version-history-wrap {
  position: relative;
}

.prompts-version-history-btn {
  font-size: 0.85rem;
  padding: 0.3rem 0.75rem;
}

.prompts-version-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 200;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--text) 12%, transparent);
  min-width: 22rem;
  max-width: 32rem;
  max-height: 22rem;
  overflow-y: auto;
}

.prompts-version-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.prompts-version-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--border);
}

.prompts-version-item:last-child {
  border-bottom: none;
}

.prompts-version-meta {
  font-size: 0.82rem;
  color: var(--muted);
}

.prompts-version-by {
  font-weight: 600;
  color: var(--text);
}

.prompts-version-preview {
  font-size: 0.8rem;
  color: var(--muted);
  font-family: var(--font-data);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.5;
}

.prompts-version-restore-btn {
  font-size: 0.8rem;
  padding: 0.2rem 0.6rem;
  align-self: flex-start;
  margin-top: 0.15rem;
}

/* ── Prompt Lab Q&A panel ─────────────────────────────────────────── */

.prompts-lab-panel {
  flex: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background: color-mix(in srgb, var(--surface) 60%, var(--bg));
  gap: 0.75rem;
}

.prompts-lab-head {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.prompts-lab-faq-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.prompts-lab-faq-chip {
  font-size: 0.8rem;
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-button);
}

.prompts-lab-answer-wrap {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--bg);
  padding: 0.75rem;
}

.prompts-lab-answer-empty,
.prompts-lab-answer-loading {
  margin: 0;
  font-size: 0.88rem;
}

.prompts-lab-answer {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  font-size: 0.85rem;
}

.prompts-lab-input-row {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
}

.prompts-lab-input {
  flex: 1;
  resize: none;
  font-size: 0.88rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  font-family: inherit;
  min-height: 0;
}

.prompts-lab-send-btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-control);
}

.prompts-page-detail-empty-title {
  margin: 0 0 0.45rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
}

.prompts-page-detail-empty-hint {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  max-width: 22rem;
  margin-inline: auto;
}

h1 {
  font-size: 1.35rem;
  margin: 0 0 1rem;
}

h2 {
  font-size: 1.1rem;
  margin: 1.25rem 0 0.5rem;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  padding: 1rem;
  margin-bottom: 1rem;
}

.panel,
.panel *,
[class*="-panel"],
[class*="-panel"] * {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.panel::-webkit-scrollbar,
.panel *::-webkit-scrollbar,
[class*="-panel"]::-webkit-scrollbar,
[class*="-panel"] *::-webkit-scrollbar {
  display: none;
}

.workflow-builder-first-section {
  margin-top: 0;
}

.workflow-builder-name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 0.5rem;
}

.workflow-builder-canvas-subwf-tools {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

button.workflow-builder-workflow-info-btn.secondary {
  min-width: 2.1rem;
  width: 2.1rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
}

button.workflow-builder-workflow-info-btn.secondary:hover,
button.workflow-builder-workflow-info-btn.secondary:focus-visible {
  border: none;
}

.workflow-builder-workflow-info-icon.material-symbols-outlined {
  font-size: calc(1.25rem - 1px);
  line-height: 1;
}

.workflow-builder-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

button.workflow-builder-back-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
  text-align: start;
  text-decoration: none;
}

.workflow-builder-back-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.workflow-builder-back-icon svg {
  display: block;
  width: 1.35rem;
  height: 1.35rem;
}

.workflow-builder-workflow-header {
  margin: 0 0 0.75rem;
  padding: 0 0 0.75rem;
  border-bottom: 1px solid var(--border);
}

h1.workflow-builder-wf-title {
  margin: 0 0 0.35rem;
  font-size: 1.2rem;
  line-height: 1.3;
  color: var(--text);
}

.workflow-builder-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}

.execution-detail-back-row {
  margin-top: 20px;
  transform: none;
  margin-bottom: 0.75rem;
}

.execution-detail-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(0.8rem, 2.4vw, 1.6rem);
  background: color-mix(in srgb, var(--bg) 45%, transparent);
  backdrop-filter: blur(2px);
  overflow: auto;
}

.execution-detail-modal {
  position: relative;
  width: min(98vw, 1296px);
  max-height: calc(100dvh - clamp(1.6rem, 4.8vw, 3.2rem));
  overflow: auto;
  padding: 2.6rem 1rem 0.4rem;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--border) 85%, var(--text) 15%);
  box-shadow: 0 24px 50px color-mix(in srgb, #000 22%, transparent);
}

.execution-detail-close-btn {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  width: 2.3rem;
  height: 2.3rem;
  padding: 0;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.execution-detail-close-btn:hover {
  color: var(--accent);
}

.workflow-builder-head-nav {
  margin: 0;
}

.workflows-split-back-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}

.workflows-split-back-nav {
  margin: 0;
}

.workflow-builder-parent-second {
  margin-top: 0.75rem;
}

.workflow-builder-parent-multi {
  margin-top: 0.35rem;
}

.workflow-builder-parent-multi > label {
  display: block;
  margin-bottom: 0.35rem;
}

.workflow-builder-parent-rows {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.workflow-builder-parent-multi-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  position: relative;
}

.workflow-builder-parent-multi-row .workflow-builder-parent-pick-btn {
  flex: 1;
  min-width: 0;
  justify-content: flex-start;
  text-align: left;
}

.workflow-builder-parent-sel-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.workflow-builder-parent-multi-add {
  margin-top: 0.45rem;
}

.workflow-builder-parent-remove {
  flex-shrink: 0;
  padding: 0.2rem 0.55rem;
}

.workflow-builder-add-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

.workflow-builder-add-header h2 {
  margin: 0;
}

.workflow-builder-add-header-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 auto;
  min-width: 0;
}

.workflow-builder-add-header-title-row h2 {
  flex: 1 1 auto;
  min-width: 0;
}

.workflow-builder-add-header-change-type-btn {
  flex-shrink: 0;
  font-size: 0.78rem;
  padding: 0.2rem 0.55rem;
  line-height: 1.2;
}

.workflow-builder-add-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

button.workflow-builder-cancel-btn {
  color: var(--muted);
  font-weight: 400;
}

button.workflow-builder-cancel-btn:hover {
  text-decoration: underline;
}

/* New Node / Edit Node panel as modal (see workflow-builder.js). */
.workflow-builder-node-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(8, 12, 18, 0.58);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

:root[data-theme='light'] .workflow-builder-node-modal-backdrop {
  background: rgba(15, 22, 34, 0.38);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) .workflow-builder-node-modal-backdrop {
    background: rgba(15, 22, 34, 0.38);
  }
}

/* Add/Edit Node: node-type picker stacks above the node modal (z 10002). */
.workflow-builder-node-type-picker-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10003;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  background: rgba(8, 12, 18, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

:root[data-theme='light'] .workflow-builder-node-type-picker-backdrop {
  background: rgba(15, 22, 34, 0.22);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) .workflow-builder-node-type-picker-backdrop {
    background: rgba(15, 22, 34, 0.22);
  }
}

.workflow-builder-node-type-picker-panel {
  width: min(655px, 92vw);
  height: 100%;
  max-height: 100vh;
  overflow: hidden;
  background: var(--surface);
  color: var(--text);
  border-left: 1px solid var(--border);
  box-shadow: -18px 0 45px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.workflow-builder-node-type-picker-search-wrap {
  margin: 0 0 0.5rem;
}

.workflow-builder-node-type-picker-search {
  width: 100%;
  box-sizing: border-box;
}

.workflow-builder-node-type-picker-list {
  flex: 1;
  min-height: 0;
}

.workflow-builder-node-picker-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.workflow-builder-node-picker-search {
  width: 100%;
  box-sizing: border-box;
}

.workflow-builder-node-type-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.workflow-builder-node-type-field > label {
  margin: 0;
}

.workflow-builder-node-type-pick-row {
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
  position: relative;
}

.workflow-builder-node-type-pick-btn {
  flex: 1;
  justify-content: flex-start;
  text-align: left;
}

.workflow-builder-node-type-sel-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Parent (port) picker from merge / NED — above node edit dialog (10002) and node-type picker (10003). */
.workflow-builder-parent-port-picker-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10005;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  background: rgba(8, 12, 18, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

:root[data-theme='light'] .workflow-builder-parent-port-picker-backdrop {
  background: rgba(15, 22, 34, 0.22);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) .workflow-builder-parent-port-picker-backdrop {
    background: rgba(15, 22, 34, 0.22);
  }
}

.workflow-builder-parent-port-picker-panel {
  width: min(504px, 92vw);
  height: 100%;
  max-height: 100vh;
  overflow: hidden;
  background: var(--surface);
  color: var(--text);
  border-left: 1px solid var(--border);
  box-shadow: -18px 0 45px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

/* Workflow builder: Node List drawer + LLM assistant (right-side). */
.workflow-builder-node-list-backdrop,
.workflow-builder-llm-assistant-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  background: rgba(8, 12, 18, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

:root[data-theme='light'] .workflow-builder-node-list-backdrop,
:root[data-theme='light'] .workflow-builder-llm-assistant-backdrop {
  background: rgba(15, 22, 34, 0.22);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) .workflow-builder-node-list-backdrop,
  :root:not([data-theme='dark']) .workflow-builder-llm-assistant-backdrop {
    background: rgba(15, 22, 34, 0.22);
  }
}

.workflow-builder-node-list-panel,
.workflow-builder-llm-assistant-panel {
  height: 100%;
  max-height: 100vh;
  overflow: hidden;
  background: var(--surface);
  color: var(--text);
  border-left: 1px solid var(--border);
  box-shadow: -18px 0 45px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.workflow-builder-node-list-panel {
  width: min(605px, 92vw);
}

.workflow-builder-llm-assistant-panel {
  /* Keep default sizing; bubble text is tuned separately. */
  font-size: 1rem;
  position: relative;
  width: min(504px, 92vw);
}

.workflow-builder-node-list-head,
.workflow-builder-llm-assistant-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.workflow-builder-node-list-head h2,
.workflow-builder-llm-assistant-head h2 {
  margin: 0;
}

.workflow-builder-llm-assistant-events {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-right: 0.15rem;
  margin: 0.25rem 0 0.75rem;
}

.workflow-builder-llm-event-row-wrap {
  position: relative;
}

.workflow-builder-llm-chat {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
  margin: 0 0 0.8rem;
}

.workflow-builder-llm-chat--reverted {
  opacity: 0.55;
}

.workflow-builder-llm-chat-time {
  display: block;
  font-size: 0.72rem;
  color: var(--muted, #888);
  margin-bottom: 0.1rem;
  text-align: center;
}

.workflow-builder-llm-chat-meta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  position: relative;
}

.workflow-builder-llm-event-row-wrap + .workflow-builder-llm-event-row-wrap .workflow-builder-llm-chat-meta-row {
  margin-top: 20px;
}

.workflow-builder-llm-chat-meta-row .workflow-builder-llm-chat-time {
  margin-bottom: 0;
}

.workflow-builder-llm-chat-meta-row .workflow-builder-llm-event-restore {
  position: absolute;
  right: 0;
}

.workflow-builder-llm-msg {
  width: 90%;
  text-align: left;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2, rgba(127, 127, 127, 0.08));
  color: inherit;
  font: inherit;
  font-size: calc(1em - 1px);
  cursor: pointer;
  display: block;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.workflow-builder-llm-msg:hover {
  border-color: var(--accent, #3b82f6);
}

.workflow-builder-llm-msg--question {
  align-self: flex-end;
  text-align: right;
}

.workflow-builder-llm-msg--answer {
  align-self: flex-start;
}

/* 2 lines for question (2-sentence summary), 3 lines for answer. */
.workflow-builder-llm-msg--question,
.workflow-builder-llm-msg--answer {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.workflow-builder-llm-msg--question {
  -webkit-line-clamp: 3;
  line-clamp: 3;
  /* Light gray in light mode; slightly brighter than background in dark. */
  background: color-mix(in srgb, var(--panel) 70%, var(--surface));
  border: none;
  color: var(--muted);
}

:root[data-theme='dark'] .workflow-builder-llm-msg--question {
  background: color-mix(in srgb, var(--surface) 86%, var(--bg));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .workflow-builder-llm-msg--question {
    background: color-mix(in srgb, var(--surface) 86%, var(--bg));
  }
}

.workflow-builder-llm-msg--question:hover {
  border-color: transparent;
}

.workflow-builder-llm-msg--answer {
  -webkit-line-clamp: 3;
  line-clamp: 3;
  /* Tighten answer bubble height slightly (requested -3px). */
  padding: calc(0.55rem - 1.5px) 0.65rem;
}

.workflow-builder-llm-event-restore {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent, #3b82f6);
  cursor: pointer;
}

.workflow-builder-llm-event-restore:hover {
  text-decoration: underline;
}

.workflow-builder-llm-event-restore:disabled {
  opacity: 0.6;
  cursor: default;
  text-decoration: none;
}

.workflow-builder-llm-assistant-foot {
  border-top: 1px solid var(--border);
  padding-top: 0.65rem;
  margin-top: auto;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.workflow-builder-llm-assistant-status-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.workflow-builder-llm-assistant-ta {
  width: 100%;
  box-sizing: border-box;
  min-height: 2.75rem;
  max-height: 40vh;
  resize: none;
  font: inherit;
  font-size: calc(1em - 1px);
  line-height: 1.4;
  padding: 0.5rem 0.55rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: inherit;
}

.workflow-builder-llm-assistant-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex: 0 0 auto;
}

.workflow-builder-llm-assistant-status {
  /* Status bar text: keep original size, cap width to 75%. */
  width: 75%;
  flex: 1 1 auto;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--muted, #888);
  padding-top: 5px;
  min-height: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-wrap;
}

.workflow-builder-llm-assistant-status[data-status-kind='generating'] {
  color: var(--warn);
}

.workflow-builder-llm-assistant-status[data-status-kind='error'] {
  color: var(--danger);
}

.workflow-builder-llm-assistant-panel[data-busy='1'] {
  opacity: 0.72;
}

.workflow-builder-llm-assistant-panel[data-busy='1'] *:not(button.workflow-builder-llm-assistant-send-btn) {
  pointer-events: none;
}

.workflow-builder-llm-assistant-panel[data-busy='1'] button.workflow-builder-llm-assistant-send-btn {
  pointer-events: auto;
}

button.workflow-builder-llm-assistant-send-btn {
  width: 2.35rem;
  height: 2.35rem;
  min-width: 2.35rem;
  min-height: 2.35rem;
  padding: 0;
  border-radius: var(--radius-button);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #000;
  border: none;
}

button.workflow-builder-llm-assistant-send-btn svg {
  display: block;
  width: 1.05rem;
  height: 1.05rem;
}

button.workflow-builder-llm-assistant-send-btn[data-mode='stop'] svg {
  width: 2.1rem;
  height: 2.1rem;
}

.workflow-builder-llm-detail-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(8, 12, 18, 0.45);
  backdrop-filter: blur(4px);
}

.workflow-builder-llm-detail-panel {
  width: 80vw;
  max-width: 80vw;
  height: 90vh;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.35);
}

.workflow-builder-llm-detail-panel pre {
  margin: 0;
  padding: 0.75rem 1rem;
  overflow: auto;
  flex: 1;
  font-size: 0.78rem;
  line-height: 1.2;
  white-space: pre-wrap;
  word-break: break-word;
}

.workflow-builder-llm-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--border);
}

.workflow-builder-node-list-tabs.settings-tabs {
  margin: 0.25rem 0 0.75rem;
  padding-bottom: 0.75rem;
}

.workflow-builder-node-list {
  overflow: auto;
  min-height: 0;
  padding-right: 0.15rem;
}

.workflow-builder-node-modal-panel {
  width: 100%;
  max-width: 40rem;
  max-height: calc(100vh - 2.5rem);
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0.25rem 0.35rem 0.5rem;
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.08),
    0 22px 50px rgba(0, 0, 0, 0.28);
}

.workflow-builder-add-panel--modal.panel {
  margin-bottom: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.workflow-builder-nodes-section {
  margin-top: 0.75rem;
}

.workflow-builder-node-list-section {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.2rem 0.75rem 0.65rem;
  background: var(--surface);
}

.workflow-builder-node-list-summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  margin: 0.35rem 0 0.5rem;
  padding: 0.1rem 0;
}

.workflow-builder-node-list-section .workflow-builder-node-list-summary::-webkit-details-marker,
.workflow-builder-node-list-section .workflow-builder-node-list-summary::marker {
  display: none;
}

.workflow-builder-node-list-section .workflow-builder-node-list-summary {
  position: relative;
  padding-left: 1.25rem;
}

.workflow-builder-node-list-section .workflow-builder-node-list-summary::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--muted);
  transition: transform 0.12s ease;
}

.workflow-builder-node-list-section[open] .workflow-builder-node-list-summary::before {
  transform: rotate(90deg);
}

.workflow-builder-edit-session-stack {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

.workflows-page-detail-host--edit .workflow-builder-edit-session-stack {
  margin-top: 0;
}

.workflow-builder-session-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.workflow-builder-session-heading {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  flex: 1;
  min-width: 0;
}

.workflow-builder-session-cleanup-all-btn {
  flex-shrink: 0;
}

.workflow-builder-session-list-content {
  min-width: 0;
  overflow-x: auto;
}


.workflow-builder-layout {
  display: grid;
  /* Match workflow-run layout: allow both panes to shrink to avoid horizontal overflow. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 1rem;
  align-items: start;
  width: 100%;
}

.workflow-builder-layout > * {
  /* Critical: without this, wide children (e.g. Mermaid SVG) can widen the whole page. */
  min-width: 0;
}

.workflow-builder-layout.workflow-builder-layout--single {
  grid-template-columns: 1fr;
}

.workflow-builder-layout.workflow-builder-layout--single .flow-node {
  cursor: default;
}

.workflow-builder-layout.workflow-builder-layout--single .flow-node:hover {
  border-color: transparent;
  background: transparent;
}

.workflow-builder-layout.workflow-builder-layout--single .flow-node:focus,
.workflow-builder-layout.workflow-builder-layout--single .flow-node:focus-visible {
  outline: none;
}

@media (max-width: 980px) {
  .workflow-builder-layout {
    grid-template-columns: 1fr;
  }
}

.workflow-builder-right {
  position: sticky;
  top: 0.75rem;
}

/* ── Node Catalogue (nc-*) ───────────────────────────────────────────────────
   Shape colors match workflow canvas (mount-workflow-canvas.ts / main.css
   .workflow-canvas-node--* rules). Update both places together.
   ─────────────────────────────────────────────────────────────────────────── */

.nc-page {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding-bottom: 100px;
}

.nc-page--explorer {
  padding-bottom: 0;
}

.nc-explorer-shell {
  --nc-explorer-width: 280px;
  display: grid;
  grid-template-columns: var(--nc-explorer-width) 1px minmax(0, 1fr);
  min-height: 0;
  border: 1px solid var(--border);
  background: var(--surface);
}

.nc-explorer-splitter {
  position: relative;
  z-index: 2;
  width: 1px;
  min-width: 1px;
  cursor: col-resize;
  background: var(--border);
  touch-action: none;
}

.nc-explorer-splitter::before {
  content: '';
  position: absolute;
  inset: 0 -10px;
}

.nc-explorer-splitter:hover,
.nc-explorer-splitter:focus-visible,
body.nc-explorer-resizing .nc-explorer-splitter {
  background: color-mix(in srgb, var(--accent) 42%, var(--border));
}

body.nc-explorer-resizing {
  cursor: col-resize;
  user-select: none;
}

.nc-page--explorer > .nc-explorer-shell {
  flex: 1;
  min-height: 0;
}

.nc-explorer {
  min-width: 0;
  border-right: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 94%, var(--panel));
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.nc-explorer-head {
  padding: 0.65rem 0.75rem 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.nc-page--eval-layer .nc-explorer-head {
  color: var(--accent);
}

.nc-explorer-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
}

.nc-explorer-head-title {
  min-width: 0;
}

button.nc-explorer-llm-variants-icon-btn.button {
  flex-shrink: 0;
  padding: 0;
  min-width: 1.75rem;
  min-height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  border: 0 !important;
  box-shadow: none !important;
}

button.nc-explorer-llm-variants-icon-btn.button svg {
  display: block;
}

.nc-modal.nc-modal--llm-variants-floating {
  width: clamp(520px, 72vw, 920px);
  max-height: 90vh;
}

.nc-explorer .nc-search-row {
  margin: 10px 0.55rem 0.55rem;
}

.nc-explorer .nc-search-input {
  width: 100%;
  max-width: none;
}

.nc-explorer-list {
  --explorer-chevron-gap: 0.5rem;
  padding: 0 0.35rem 0.75rem;
  flex: 1 1 0;
  overflow-y: auto;
  min-height: 0;
}

.nc-explorer-folder {
  margin: 0.15rem 0;
}

.nc-explorer-folder-summary {
  cursor: pointer;
  list-style: none;
  padding: 0.24rem 0.35rem;
  font-size: 0.83rem;
  font-weight: 400;
  color: var(--text);
  border-radius: 5px;
}

.nc-explorer-folder-summary::-webkit-details-marker,
.nc-explorer-folder-summary::marker {
  display: none;
}

.nc-explorer-folder-summary::before {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-feature-settings: 'liga';
  font-variant-ligatures: normal;
  -webkit-font-feature-settings: 'liga';
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
  content: 'chevron_right';
  display: inline-block;
  width: 1rem;
  margin-right: var(--explorer-chevron-gap, 0.5rem);
  font-size: 1rem;
  line-height: 1;
  color: var(--muted);
  transition: transform 0.12s ease;
  vertical-align: -0.15em;
}

.nc-explorer-folder[open] .nc-explorer-folder-summary::before {
  transform: rotate(90deg);
}

.nc-explorer-folder > .nc-explorer-row {
  padding-left: calc(1.1rem + var(--explorer-chevron-gap, 0.5rem));
}

.nc-explorer-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--explorer-chevron-gap, 0.5rem);
  min-height: 1.8rem;
  padding: 0.2rem 0.35rem 0.2rem 1.1rem;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.84rem;
  text-align: left;
}

.nc-explorer-row:hover {
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

.nc-explorer-row-icon {
  width: 1rem;
  height: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  flex-shrink: 0;
}

.nc-explorer-row-icon svg {
  width: 1rem;
  height: 1rem;
}

.nc-explorer-row-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nc-explorer-empty {
  padding: 0.75rem;
}

.nc-explorer-row--with-check {
  padding-left: 0.35rem;
  cursor: default;
}

.eval-explorer-dashboard-nav {
  padding: 0.3rem 0.55rem 0.1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border, #333) 60%, transparent);
  margin-bottom: 0.3rem;
}

.eval-explorer-dashboard-nav-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.55rem;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--text-muted, #aaa);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
}

.eval-explorer-dashboard-nav-btn::before {
  content: '⊞';
  font-size: 0.9rem;
}

.eval-explorer-dashboard-nav-btn:hover {
  background: color-mix(in srgb, var(--accent, #7c3aed) 15%, transparent);
  color: var(--text, #fff);
}


/* ── Eval sub-nav (stacked row under primary IDE icons) + layer view ───────── */

/* Seeds expandable section in Layer 4 explorer */
.eval-seeds-section {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border, rgba(255,255,255,0.08));
  min-height: 0;
  flex-shrink: 0;
}
.eval-seeds-section:not(.is-collapsed) {
  flex: 1 1 0;
  min-height: 120px;
}
.eval-seeds-section-head {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.5rem 0.3rem 0.75rem;
  flex-shrink: 0;
  user-select: none;
}
.eval-seeds-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted, #888);
  flex: 1;
}
.eval-seeds-section-body {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.eval-seeds-section.is-collapsed .eval-seeds-section-body {
  display: none;
}

/* ─────────────────────────────────────────────────────────────────────────── */

.eval-explorer-check-label {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0 0.2rem;
  cursor: pointer;
}

.nc-explorer-row-btn {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  border: 0;
  padding: 0.15rem 0.25rem;
  border-radius: 4px;
  font: inherit;
  font-size: 0.84rem;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}

.nc-detail-container {
  min-width: 0;
  min-height: 0;
  padding: 0.75rem 0.75rem 1rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Node Types main panel: editor fills column (see .nc-modal.nc-modal--inline) */
.nc-detail-container > .nc-modal.nc-modal--inline {
  flex: 1;
  min-height: 0;
  box-shadow: none;
  animation: none;
}

.nc-detail-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-4);
  margin: 0;
}

.nc-detail-card-icon {
  flex-shrink: 0;
}

.nc-detail-card-title {
  margin: 0 0 0.35rem;
  font-size: 1.2rem;
  font-weight: 600;
}

.nc-detail-card-id {
  margin: 0 0 0.75rem;
}

.nc-detail-card-desc {
  margin: 0 0 0.75rem;
  line-height: 1.55;
}

.nc-detail-card-meta {
  margin: 0;
}

.nc-detail-card-actions {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 52rem) {
  .nc-explorer-shell,
  .settings-shell {
    grid-template-columns: 1fr;
  }

  .nc-explorer,
  .settings-explorer {
    border-right: 0;
    border-bottom: 1px solid var(--border);
    max-height: 18rem;
  }

  .nc-detail-card {
    grid-template-columns: 1fr;
  }

  .nc-detail-card-actions {
    justify-content: flex-start;
  }
}

/* ── Search ───────────────────────────────────────────────────────────────── */

.nc-search-row {
  position: relative;
  margin-top: 10px;
  margin-bottom: 20px;
}

.nc-search-icon {
  position: absolute;
  left: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
  display: flex;
  align-items: center;
}

.nc-search-input {
  box-sizing: border-box;
  width: calc(100% - 10px);
  max-width: 470px;
  font-family: var(--mp-form-input-font-family) !important;
  font-size: var(--mp-form-input-font-size) !important;
  padding: var(--mp-form-input-padding) var(--mp-form-input-padding) var(--mp-form-input-padding) 1.75rem !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  border-radius: var(--radius-control);
}

/* ── Filter bars ──────────────────────────────────────────────────────────── */

.nc-app-filter-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: var(--space-3);
  border-top: 1px solid var(--border);
  margin-top: var(--space-2);
  padding-top: var(--space-3);
}

.nc-explorer .nc-app-filter-wrap {
  margin: 0 0.55rem 0.55rem;
  padding-top: 0;
  border-top: 0;
}

.nc-explorer .nc-app-filter-select {
  flex: 1;
  min-width: 0;
  width: 100%;
  max-width: none;
}

.nc-filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  overflow-x: auto;
  padding: 0.15rem 0 0.3rem;
  scrollbar-width: none;
}

.nc-filter-bar::-webkit-scrollbar { display: none; }

.nc-filter-bar--brand {
  padding-top: 0.25rem;
}

.nc-filter-label {
  font-size: var(--font-size-small);
  font-weight: 600;
  color: var(--muted);
  flex-shrink: 0;
  white-space: nowrap;
  min-width: 5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.nc-chips {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: nowrap;
}

/* ── Chips ────────────────────────────────────────────────────────────────── */

/* Reset global button styles for chips */
.nc-chip,
.nc-chip:hover,
.nc-chip:focus {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cat-color, var(--border)) 40%, var(--border));
  /* Subtle category-colored background; falls back to transparent for "All" chip */
  background: color-mix(in srgb, var(--cat-color, transparent) 10%, transparent);
  color: var(--text);
  font-size: var(--font-size-small);
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
  text-decoration: none;
}

.nc-chip:hover {
  border-color: var(--cat-color, var(--accent));
  background: color-mix(in srgb, var(--cat-color, var(--accent)) 16%, transparent);
}

.nc-chip.active {
  border-color: var(--cat-color, var(--accent));
  color: var(--cat-color, var(--accent));
  background: color-mix(in srgb, var(--cat-color, var(--accent)) 22%, transparent);
}

/* Dot removed — color is now expressed through the chip background */
.nc-chip-dot {
  display: none;
}

/* ── Grouped grid ─────────────────────────────────────────────────────────── */

.nc-grid-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.nc-grid-empty {
  color: var(--muted);
  padding: 2rem 0;
  text-align: center;
}

.nc-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Section header: label + separator on same row */
.nc-group-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.nc-group-label {
  font-size: var(--font-size-small);
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  flex-shrink: 0;
}

.nc-group-sep {
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Grid of node shapes within each group */
.nc-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 15px;
  align-items: start;
}

/* All node types now render as square tiles (consistent grid sizing). */

/* ── Node tiles (square + icon + label below) ────────────────────────────── */

.nc-node-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.nc-node-label {
  display: block;
  width: 100%;
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  text-overflow: ellipsis;
  white-space: normal;
  font-size: calc(var(--font-size-small) + 1px);
  font-weight: 600;
  color: color-mix(in srgb, var(--muted) 82%, var(--text));
}

.nc-tile,
.nc-tile:hover,
.nc-tile:focus {
  --nc-tile-border-color: var(--border);
  --nc-tile-border-width: 1px;
  --nc-tile-bg: var(--surface);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 106px;
  height: 106px;
  padding: 8px;
  border-radius: 10px;
  border: var(--nc-tile-border-width) solid var(--nc-tile-border-color);
  background: var(--nc-tile-bg);
  cursor: pointer;
  color: var(--text);
  transition: box-shadow 0.15s, filter 0.12s;
  position: relative;
}

.nc-tile:hover {
  filter: brightness(1.06);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.14);
}

.nc-tile:active {
  filter: brightness(0.96);
}

.nc-tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 0;
}

.nc-tile-icon svg {
  width: 28px;
  height: 28px;
}

.nc-tile-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.nc-tile--trigger {
  --nc-tile-border-width: 2px;
  --nc-tile-border-color: color-mix(in srgb, #0ea5e9 52%, var(--border));
  --nc-tile-bg: color-mix(in srgb, #0ea5e9 11%, var(--panel));
}
.nc-tile--terminator {
  --nc-tile-border-width: 2px;
  --nc-tile-border-color: color-mix(in srgb, #0ea5e9 52%, var(--border));
  --nc-tile-bg: color-mix(in srgb, #0ea5e9 11%, var(--panel));
}
.nc-tile--action {
  --nc-tile-border-color: color-mix(in srgb, #0ea5e9 50%, var(--border));
  --nc-tile-bg: color-mix(in srgb, #0ea5e9 8%, var(--panel));
}
.nc-tile--condition {
  --nc-tile-border-color: color-mix(in srgb, var(--muted) 70%, var(--border));
  --nc-tile-bg: var(--surface);
}
.nc-tile--transform {
  --nc-tile-border-color: color-mix(in srgb, var(--muted) 70%, var(--border));
  --nc-tile-bg: var(--surface);
  border-style: dashed;
  border-width: 1.5px;
}
.nc-tile--llm {
  --nc-tile-border-width: 2px;
  --nc-tile-border-color: #eab308;
  --nc-tile-bg: color-mix(in srgb, #eab308 14%, var(--panel));
}
.nc-tile--agent {
  --nc-tile-border-width: 2px;
  --nc-tile-border-color: color-mix(in srgb, #8b5cf6 55%, var(--border));
  --nc-tile-bg: color-mix(in srgb, #8b5cf6 10%, var(--panel));
}
.nc-tile--database {
  --nc-tile-border-width: 2px;
  --nc-tile-border-color: color-mix(in srgb, #06b6d4 45%, var(--border));
  --nc-tile-bg: color-mix(in srgb, #06b6d4 8%, var(--panel));
}
.nc-tile--default {
  --nc-tile-border-color: var(--border);
  --nc-tile-bg: var(--surface);
}

/* platform.* nodes: muted solid border (overrides category style for non-trigger/terminator) */
.nc-tile--platform:not(.nc-tile--trigger):not(.nc-tile--terminator):not(.nc-tile--sub-workflow):not(.nc-tile--llm-family) {
  --nc-tile-border-width: 2px;
  --nc-tile-border-color: color-mix(in srgb, var(--muted) 82%, var(--border));
  --nc-tile-bg: var(--surface);
  border-style: solid;
}

.nc-tile--sub-workflow {
  --nc-tile-border-width: 2px;
  --nc-tile-border-color: color-mix(in srgb, #22c55e 52%, black);
  --nc-tile-bg: color-mix(in srgb, #22c55e 12%, var(--panel));
}

.nc-tile--llm-family {
  --nc-tile-border-width: 2px;
  --nc-tile-border-color: #eab308;
  --nc-tile-bg: color-mix(in srgb, #eab308 14%, var(--panel));
}

.nc-tile--platform-llm-family {
  --nc-tile-border-width: 2px;
  --nc-tile-border-color: #eab308;
  --nc-tile-bg: color-mix(in srgb, #eab308 14%, var(--panel));
  border-style: solid;
}

.nc-tile.nc-tile--imessage.nc-tile--trigger,
.nc-tile.nc-tile--imessage.nc-tile--terminator {
  --nc-tile-border-color: color-mix(in srgb, var(--imessage-node-accent) 52%, var(--border));
  --nc-tile-bg: color-mix(in srgb, var(--imessage-node-accent) 11%, var(--panel));
}
.nc-tile.nc-tile--imessage.nc-tile--action {
  --nc-tile-border-color: color-mix(in srgb, var(--imessage-node-accent) 50%, var(--border));
  --nc-tile-bg: color-mix(in srgb, var(--imessage-node-accent) 8%, var(--panel));
}
.nc-tile.nc-tile--imessage.nc-tile--platform:not(.nc-tile--trigger):not(.nc-tile--terminator):not(
    .nc-tile--sub-workflow
  ):not(.nc-tile--llm-family) {
  --nc-tile-border-color: color-mix(in srgb, var(--imessage-node-accent) 48%, var(--border));
  --nc-tile-bg: color-mix(in srgb, var(--imessage-node-accent) 10%, var(--panel));
}
.nc-tile.nc-tile--imessage.nc-tile--llm,
.nc-tile.nc-tile--imessage.nc-tile--platform-llm-family {
  --nc-tile-border-color: color-mix(in srgb, var(--imessage-node-accent) 52%, var(--border));
  --nc-tile-bg: color-mix(in srgb, var(--imessage-node-accent) 12%, var(--panel));
}
.nc-tile.nc-tile--imessage.nc-tile--transform {
  --nc-tile-border-color: color-mix(in srgb, var(--imessage-node-accent) 48%, var(--border));
  --nc-tile-bg: color-mix(in srgb, var(--imessage-node-accent) 8%, var(--panel));
}

.nc-tile--platform-db,
.nc-tile--static-data {
  border-radius: 10px;
}

.nc-icon-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.nc-icon-preview {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}

.nc-icon-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.nc-icon-edit {
  font-weight: 600;
}

.nc-icon-preview-font {
  font-size: 1.6rem;
  line-height: 1;
}

.nc-icon-actions {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.nc-icon-links {
  display: inline-flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-left: auto;
  text-align: right;
}

.nc-icon-pick-btn {
  width: 2.15rem;
  height: 2.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
}

.nc-icon-pick-btn img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.nc-icon-default-text-btn {
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 0.78rem;
  color: var(--muted);
  cursor: pointer;
}

.nc-icon-default-text-btn:hover:not(:disabled) {
  color: var(--text);
}

.nc-icon-default-text-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.nc-tile-font-icon {
  font-size: 28px;
  line-height: 1;
}

.nc-icon-picker-typed-btn,
.nc-icon-picker-grid-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: flex-start;
  padding: 0.45rem 0.55rem;
}

.nc-icon-picker-typed-btn {
  width: 100%;
  border-color: color-mix(in srgb, var(--text) 18%, var(--border));
}

/* Base — reset global button styles */
.nc-shape,
.nc-shape:hover,
.nc-shape:focus {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  color: var(--text);
  font-size: var(--font-size-small);
  font-weight: 500;
  font-family: var(--font-ui);
  line-height: 1.25;
  padding: 0.5rem 0.6rem;
  word-break: break-word;
  transition: box-shadow 0.15s, filter 0.12s;
  position: relative;
  text-decoration: none;
}

.nc-shape:hover {
  filter: brightness(1.12);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
}

.nc-shape:active {
  filter: brightness(0.96);
}

/* ── Condition — hexagon (matches canvas polygon) */
.nc-shape--condition {
  background: transparent; /* pseudo-elements handle fill/border; transparent avoids double-painting */
  border: none;
  clip-path: polygon(14px 0%, calc(100% - 14px) 0%, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0% 50%);
  min-height: 52px;
  width: 100%;
  position: relative;
}

/* Border layer — fills clipped shape. No clip-path: parent already clips it,
   removing the duplicate eliminates double anti-aliasing at the edges. */
.nc-shape--condition::before {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--muted) 70%, var(--border));
  z-index: 0;
  pointer-events: none;
}

/* Fill layer — inset + inner clip-path produces uniform border on diagonal edges too. */
.nc-shape--condition::after {
  content: '';
  position: absolute;
  inset: 1.5px;
  clip-path: polygon(12.5px 0%, calc(100% - 12.5px) 0%, 100% 50%, calc(100% - 12.5px) 100%, 12.5px 100%, 0% 50%);
  background: var(--panel);
  z-index: 1;
  pointer-events: none;
}

.nc-shape--condition .nc-shape-label {
  position: relative;
  z-index: 2;
}

/* ── Action — arrow/chevron (matches canvas polygon) */
.nc-shape--action {
  background: transparent;
  border: none;
  clip-path: polygon(0% 0%, calc(100% - 14px) 0%, 100% 50%, calc(100% - 14px) 100%, 0% 100%);
  min-height: 52px;
  width: 100%;
  position: relative;
}

/* Border layer — no clip-path, parent clips it (eliminates double anti-aliasing). */
.nc-shape--action::before {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, #0ea5e9 50%, var(--border));
  z-index: 0;
  pointer-events: none;
}

/* Fill layer — inner clip-path produces uniform border along the diagonal arrow edge. */
.nc-shape--action::after {
  content: '';
  position: absolute;
  inset: 1.5px;
  clip-path: polygon(0% 0%, calc(100% - 12.5px) 0%, 100% 50%, calc(100% - 12.5px) 100%, 0% 100%);
  background: color-mix(in srgb, #0ea5e9 8%, var(--panel));
  z-index: 1;
  pointer-events: none;
}

.nc-shape--action .nc-shape-label {
  position: relative;
  z-index: 2;
  padding-right: 12px;
}

/* ── Trigger — pill, sky-blue */
.nc-shape--trigger {
  background: color-mix(in srgb, #0ea5e9 11%, var(--panel));
  border: 2px solid color-mix(in srgb, #0ea5e9 52%, var(--border));
  border-radius: 9999px;
  min-height: 48px;
  width: 100%;
}

/* ── Terminator — pill, sky-blue, double concentric border ring */
.nc-shape--terminator {
  background: color-mix(in srgb, #0ea5e9 11%, var(--panel));
  border: 2px solid color-mix(in srgb, #0ea5e9 52%, var(--border));
  border-radius: 9999px;
  min-height: 48px;
  width: 100%;
  /* Double ring: 3px gap (bg color) then 2px outer ring */
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px color-mix(in srgb, #0ea5e9 38%, var(--border));
}

/* ── Transform — dashed border, muted */
.nc-shape--transform {
  background: var(--surface);
  border: 1.5px dashed color-mix(in srgb, var(--muted) 70%, var(--border));
  border-radius: var(--radius-panel);
  min-height: 48px;
  width: 100%;
}

/* ── LLM — amber/yellow border */
.nc-shape--llm {
  background: color-mix(in srgb, #eab308 14%, var(--panel));
  border: 2px solid #eab308;
  border-radius: var(--radius-panel);
  min-height: 52px;
  width: 100%;
}

/* ── Agent — purple border */
.nc-shape--agent {
  background: color-mix(in srgb, #8b5cf6 10%, var(--panel));
  border: 2px solid color-mix(in srgb, #8b5cf6 55%, var(--border));
  border-radius: var(--radius-panel);
  min-height: 52px;
  width: 100%;
}

/* ── Database — cylinder rounding (elliptical top/bottom caps) */
.nc-shape--database {
  background: color-mix(in srgb, #06b6d4 8%, var(--panel));
  border: 2px solid color-mix(in srgb, #06b6d4 45%, var(--border));
  border-radius: 50% / 30%;
  min-height: 48px;
  width: 100%;
}

/* ── Default / other */
.nc-shape--default {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  min-height: 48px;
  width: 100%;
}

/* Shape label */
.nc-shape-label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  padding: 0 var(--space-1);
}

/* ── Title-bar shape indicator ────────────────────────────────────────────── */

.nc-title-shape {
  display: inline-block;
  flex-shrink: 0;
  width: 28px;
  height: 18px;
  border: 1.5px solid var(--border);
  border-radius: 3px;
  background: var(--panel);
  position: relative;
}

.nc-title-shape--condition {
  clip-path: polygon(4px 0%, calc(100% - 4px) 0%, 100% 50%, calc(100% - 4px) 100%, 4px 100%, 0% 50%);
  background: color-mix(in srgb, var(--muted) 40%, var(--border));
  border: none;
}

.nc-title-shape--action {
  clip-path: polygon(0% 0%, calc(100% - 4px) 0%, 100% 50%, calc(100% - 4px) 100%, 0% 100%);
  background: color-mix(in srgb, #0ea5e9 40%, var(--border));
  border: none;
}

.nc-title-shape--trigger,
.nc-title-shape--terminator {
  border-color: color-mix(in srgb, #0ea5e9 52%, var(--border));
  background: color-mix(in srgb, #0ea5e9 11%, var(--panel));
  border-radius: 999px;
}

.nc-title-shape--terminator {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px color-mix(in srgb, #0ea5e9 35%, var(--border));
}

.nc-title-shape--transform {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--muted) 70%, var(--border));
  background: var(--surface);
}

.nc-title-shape--llm {
  border-color: #eab308;
  background: color-mix(in srgb, #eab308 14%, var(--panel));
}

.nc-title-shape--agent {
  border-color: color-mix(in srgb, #8b5cf6 55%, var(--border));
  background: color-mix(in srgb, #8b5cf6 10%, var(--panel));
}

.nc-title-shape--database {
  border-color: color-mix(in srgb, #06b6d4 45%, var(--border));
  background: color-mix(in srgb, #06b6d4 8%, var(--panel));
  border-radius: 50% / 30%;
}

/* ── Canvas shape overrides (mirrors workflow canvas per-nodeTypeId rules) ─── */

/* platform.* nodes: muted solid border (overrides category style for non-trigger/terminator) */
.nc-shape--platform:not(.nc-shape--trigger):not(.nc-shape--terminator):not(.nc-shape--sub-workflow):not(.nc-shape--llm-family) {
  border-style: solid;
  border-width: 2px;
  border-color: color-mix(in srgb, var(--muted) 82%, var(--border));
  background: var(--surface);
}

/* platform.db.* — cylinder shape (elliptical top/bottom rounding).
   Note: has no effect on clip-path shapes (action/condition) where clip-path wins. */
.nc-shape--platform-db {
  border-radius: 50% / 30%;
}

/* platform.static_data — match platform.db.* cylinder shape */
.nc-shape--static-data {
  border-radius: 50% / 30%;
  clip-path: none !important;
}

/* platform.flow.run_workflow — sub-workflow: border darkened from same accent as fill */
.nc-shape--sub-workflow {
  border: 2px solid color-mix(in srgb, #22c55e 52%, black) !important;
  background: color-mix(in srgb, #22c55e 12%, var(--panel)) !important;
  clip-path: none !important;
}

/* *.llm.* (non-agent) — amber border, overrides platform muted border */
.nc-shape--llm-family {
  border: 2px solid #eab308 !important;
  background: color-mix(in srgb, #eab308 14%, var(--panel)) !important;
}

/* ── Node ID row in modal header ─────────────────────────────────────────── */

.nc-modal-id-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.nc-modal-id-text {
  font-size: var(--font-size-small);
  font-family: var(--font-data);
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 320px;
}

.nc-modal-copy-btn {
  flex-shrink: 0;
  width: 1.4rem;
  height: 1.4rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none !important;
  color: var(--muted);
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: color 0.1s, background 0.1s;
}

.nc-modal-copy-btn:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--muted) 12%, transparent);
}

/* ── Modal backdrop ───────────────────────────────────────────────────────── */

.nc-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(0.75rem, 3vw, 2rem);
  background: rgba(8, 12, 18, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow-y: auto;
  animation: nc-modal-bg-in 0.15s ease-out;
}

@keyframes nc-modal-bg-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Modal panel ──────────────────────────────────────────────────────────── */

.nc-modal {
  position: relative;
  width: clamp(500px, 60vw, 900px);
  height: 80vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
  animation: nc-modal-slide 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  outline: none;
  overflow: hidden;
}

.nc-modal.nc-modal--inline {
  width: 100%;
  height: 100%;
  max-width: none;
}

@keyframes nc-modal-slide {
  from { opacity: 0; transform: translateY(0.6rem) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Agent prompt modal (lib/agent-prompt-modal.js). Above .nc-modal-backdrop (10020); below .platform-confirm-backdrop (10030). */
.agent-prompt-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10025;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(0.75rem, 3vw, 2rem);
  background: rgba(8, 12, 18, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow-y: auto;
}

.agent-prompt-modal-panel {
  position: relative;
  width: 70vw;
  max-width: 70vw;
  height: 80vh;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
  outline: none;
  overflow: hidden;
}

.agent-prompt-modal-toolbar {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.agent-prompt-modal-toolbar-left {
  flex: 1;
  min-width: 0;
}

.agent-prompt-modal-title {
  font-size: var(--font-size-title);
  font-weight: 600;
  margin: 0 0 var(--space-1);
  color: var(--text);
  font-family: var(--font-ui);
}

.agent-prompt-modal-sub {
  margin: 0;
  font-size: var(--font-size-small);
  line-height: 1.45;
}

.agent-prompt-modal-dismiss {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none !important;
  color: var(--muted);
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: color 0.1s, background 0.1s;
}

.agent-prompt-modal-dismiss:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--muted) 12%, transparent);
}

.agent-prompt-modal-body {
  padding: var(--space-4);
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Telegram bot menu commands (lib/telegram-commands-modal.js). Between agent prompt (10025) and confirm (10030). */
.telegram-commands-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10027;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(0.75rem, 3vw, 2rem);
  background: rgba(8, 12, 18, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow-y: auto;
}

.telegram-commands-modal-panel {
  position: relative;
  width: min(36rem, 100%);
  max-height: min(85vh, 32rem);
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
  outline: none;
  overflow: hidden;
}

.telegram-commands-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.telegram-commands-modal-title {
  font-size: var(--font-size-title);
  font-weight: 600;
  margin: 0;
  color: var(--text);
  font-family: var(--font-ui);
}

.telegram-commands-modal-dismiss {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none !important;
  color: var(--muted);
  border-radius: var(--radius-control);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
}

.telegram-commands-modal-dismiss:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--muted) 12%, transparent);
}

.telegram-commands-modal-intro {
  margin: 0;
  padding: var(--space-3) var(--space-4) 0;
  font-size: var(--font-size-small);
  line-height: 1.45;
}

.telegram-commands-modal-intro kbd {
  font-family: var(--font-mono, 'Segoe UI', ui-monospace, monospace);
  font-size: 0.85em;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 70%, var(--muted));
}

.telegram-commands-modal-list {
  padding: var(--space-3) var(--space-4);
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.telegram-commands-modal-card {
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  background: color-mix(in srgb, var(--surface) 92%, var(--muted));
}

.telegram-commands-modal-row {
  display: grid;
  grid-template-columns: minmax(5rem, 8rem) 1fr auto;
  gap: var(--space-2);
  align-items: center;
}

.telegram-commands-modal-row .telegram-commands-modal-cmd {
  font-family: var(--font-mono, 'Segoe UI', ui-monospace, monospace);
}

.telegram-commands-modal-macro-label {
  display: block;
  margin: var(--space-2) 0 var(--space-1);
  font-size: var(--font-size-small);
  color: var(--muted);
}

.telegram-commands-modal-macro {
  width: 100%;
  min-height: 5rem;
  resize: vertical;
  font-family: var(--font-mono, 'Segoe UI', ui-monospace, monospace);
  font-size: var(--font-size-small);
}

.telegram-commands-modal-status {
  margin: 0;
  padding: 0 var(--space-4);
  min-height: 1.25rem;
  font-size: var(--font-size-small);
}

.telegram-commands-modal-status.ok {
  color: var(--success, #2d8a54);
}

.telegram-commands-modal-status.error {
  color: var(--danger);
}

.telegram-commands-modal-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.telegram-commands-modal-actions-spacer {
  flex: 1;
  min-width: var(--space-2);
}

/* ── Modal header ─────────────────────────────────────────────────────────── */

.nc-modal-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.nc-modal-title-group {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nc-modal-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.nc-modal-title {
  font-size: var(--font-size-title);
  font-weight: 600;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-family: var(--font-ui);
}

/* Category badge below title */
.nc-modal-cat-badge {
  display: inline-block;
  font-size: var(--font-size-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--nc-badge-color, var(--muted)) 60%, var(--border));
  color: var(--nc-badge-color, var(--muted));
  background: color-mix(in srgb, var(--nc-badge-color, var(--muted)) 12%, transparent);
  width: fit-content;
}

.nc-modal-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  padding-top: 0.1rem;
}

/* Save button in header — secondary style, compact */
.nc-modal-save-btn {
  font-size: var(--font-size-small);
  padding: 0.3rem 0.75rem;
}

/* X close — no border, just icon */
.nc-modal-close {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none !important;
  color: var(--muted);
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: color 0.1s, background 0.1s;
}

.nc-modal-close:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--muted) 12%, transparent);
}

/* ── Modal tabs — underline style only, NOT button-looking ────────────────── */

.nc-modal-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  padding: 0 var(--space-4);
  flex-shrink: 0;
  background: var(--surface);
}

/* Explicit resets to override global `button` style */
.nc-modal-tab {
  padding: 0.55rem var(--space-3);
  font-size: var(--font-size-body);
  font-weight: 600;
  font-family: var(--font-ui);
  color: var(--muted);
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}

.nc-modal-tab:hover {
  color: var(--text);
  background: transparent !important;
}

.nc-modal-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent) !important;
  background: transparent !important;
}

/* ── Modal body & panels ──────────────────────────────────────────────────── */

.nc-modal-body {
  padding: var(--space-4);
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.nc-modal-panel {
  display: none;
}

.nc-modal-panel.active {
  display: block;
}

/* ── Edit form layout ─────────────────────────────────────────────────────── */

.nc-edit-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Each section has top spacing from the previous one */
.nc-form-section {
  margin-bottom: var(--space-6);
}

.nc-form-section:last-of-type {
  margin-bottom: var(--space-4);
}

.nc-form-section-head {
  font-size: var(--font-size-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}

.nc-edit-fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
}

@media (max-width: 600px) {
  .nc-edit-fields { grid-template-columns: 1fr; }
}

.nc-edit-full {
  width: 100%;
  min-width: 0;
  margin-bottom: var(--space-3);
}

.nc-edit-schema-textarea {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-height: 4.5rem;
  max-height: min(40vh, 20rem);
  resize: vertical;
  overflow: auto;
  white-space: pre;
  tab-size: 2;
}

.nc-edit-meta {
  margin: 0 0 var(--space-2);
}

.nc-form-msg {
  margin: var(--space-2) 0 0;
}

/* ── Config params table ──────────────────────────────────────────────────── */

.nc-adv-ui-wrap {
  margin-bottom: var(--space-3);
}

.nc-param-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-2);
}

.nc-param-table th,
.nc-param-table td {
  text-align: left;
  padding: 0.2rem var(--space-2);
  border-bottom: 1px solid var(--border);
  font-size: var(--font-size-small);
}

.nc-param-table th {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 6%, transparent);
}

/* ── Schema tab ───────────────────────────────────────────────────────────── */

.nc-schema-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

@media (max-width: 600px) {
  .nc-schema-cols { grid-template-columns: 1fr; }
}

.nc-schema-label {
  font-weight: 700;
  color: var(--muted);
  margin: 0 0 var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.nc-schema-pre {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  padding: var(--space-3);
  overflow: auto;
  max-height: 22rem;
  margin: 0;
  white-space: pre;
  color: var(--text);
}

/* ── Zod tab ──────────────────────────────────────────────────────────────── */

.nc-zod-content {
  line-height: 1.55;
}

/* ── Audit subhead/list (used by renderSchemaAuditHuman) ──────────────────── */

.node-type-audit-subhead {
  font-size: var(--font-size-body);
  font-weight: 600;
  margin: var(--space-4) 0 var(--space-2);
}

.node-type-audit-subhead:first-of-type {
  margin-top: var(--space-2);
}

.node-type-audit-subhead-sm {
  font-size: var(--font-size-small);
  font-weight: 600;
  margin: var(--space-3) 0 var(--space-1);
}

.node-type-audit-block { margin-bottom: var(--space-2); }

.node-type-audit-list {
  margin: var(--space-1) 0 var(--space-2);
  padding-left: 1.15rem;
}

.node-type-audit-list li { margin-bottom: 0.2rem; }

.node-type-audit-desc {
  font-size: var(--font-size-small);
  opacity: 0.92;
}

/* ── Legacy wrapper ───────────────────────────────────────────────────────── */

.node-catalogue-page {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

button,
.button {
  background: var(--accent);
  color: var(--button-fg);
  border: none;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-button);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

button[aria-busy='true'],
.button[aria-busy='true'] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: wait;
}

.button-busy-spinner {
  flex-shrink: 0;
  width: 0.9rem;
  height: 0.9rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  opacity: 0.92;
  animation: badge-spin 0.65s linear infinite;
}

.workflow-builder-filter-stack {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.workflow-builder-filter-stack .workflow-builder-node-list-tabs.settings-tabs {
  margin: 0.15rem 0 0;
  padding-bottom: 0.4rem;
}

.workflow-builder-filter-stack .workflow-builder-node-list-tabs.settings-tabs:first-child {
  margin-top: 0;
}

.workflow-builder-filter-stack .workflow-builder-app-tabs {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0.35rem;
  align-items: center;
}

.workflow-builder-app-tabs-hint,
.workflow-builder-category-tabs-hint {
  font-size: 0.82rem;
  margin-right: 0.15rem;
  flex-shrink: 0;
}

button.node-type-item {
  display: flex;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  font-weight: 500;
}

/* <a> buttons should not inherit link color (incl. visited) */
a.button:not(.secondary),
a.button:not(.secondary):visited {
  color: var(--button-fg);
  text-decoration: none;
}

/* Secondary: explicit contrast for native buttons and <a class="button secondary"> */
button.secondary,
.button.secondary {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}

button.secondary:hover,
.button.secondary:hover {
  background: var(--bg);
  border-color: var(--accent);
  color: var(--text);
}

/* Restrict DB tool arguments — toolbar button (mountAllowedArgsDbTablesUI, node-config-form.js) */
button.secondary.node-config-allowed-args-restrict-btn.node-config-allowed-args-restrict-btn--compact {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.3rem 0.55rem;
}
button.secondary.node-config-allowed-args-restrict-btn.node-config-allowed-args-restrict-btn--full {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.35rem 0.65rem;
}
button.secondary.node-config-allowed-args-restrict-btn:not(.restrict-btn--has-rules) {
  color: var(--muted);
}
button.secondary.node-config-allowed-args-restrict-btn.restrict-btn--has-rules {
  color: var(--ok);
}
button.secondary.node-config-allowed-args-restrict-btn.restrict-btn--has-rules:hover,
button.secondary.node-config-allowed-args-restrict-btn.restrict-btn--has-rules:focus-visible {
  color: var(--ok);
}
button.secondary.node-config-allowed-args-restrict-btn:not(.restrict-btn--has-rules):hover,
button.secondary.node-config-allowed-args-restrict-btn:not(.restrict-btn--has-rules):focus-visible {
  color: var(--muted);
}

.app-menubar button.sidebar-logout.secondary,
.app-menubar button.nav-theme-icon-btn.secondary {
  border: none;
  background: transparent;
  padding: 0;
  color: var(--muted);
}

.app-menubar button.sidebar-logout.secondary:hover,
.app-menubar button.nav-theme-icon-btn.secondary:hover {
  border: none;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
}

/* Nav links (accent color) must not recolor secondary outline buttons */
.app-menubar a.button.secondary,
.workflow-list-actions a.button.secondary {
  color: var(--text);
  text-decoration: none;
}

button.danger {
  background: var(--danger);
  color: #fff;
}

button.danger:hover {
  filter: brightness(1.08);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

label {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0.5rem 0 0.2rem;
}

input[type='text'],
input[type='email'],
input[type='password'],
input[type='number'],
input[type='search'],
input[type='url'],
input[type='tel'],
input[type='date'],
input[type='datetime-local'],
input[type='time'],
input[type='month'],
select,
textarea,
.form-input {
  width: 100%;
  max-width: 32rem;
  font-family: var(--mp-form-input-font-family);
  font-size: var(--mp-form-input-font-size);
  padding: var(--mp-form-input-padding);
  font-weight: 400;
  line-height: 1.25;
  border-radius: var(--radius-control);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
}

input[type='text']:disabled,
input[type='email']:disabled,
input[type='password']:disabled,
input[type='number']:disabled,
input[type='search']:disabled,
input[type='url']:disabled,
input[type='tel']:disabled,
input[type='date']:disabled,
input[type='datetime-local']:disabled,
input[type='time']:disabled,
input[type='month']:disabled,
select:disabled,
textarea:disabled,
.form-input:disabled {
  background: color-mix(in srgb, var(--muted) 12%, var(--surface));
  cursor: not-allowed;
}

/* Picker buttons stand in for <select> in workflow builder panels. */
button.workflow-builder-parent-pick-btn.secondary,
button.workflow-builder-node-type-pick-btn.secondary {
  font-family: var(--mp-form-input-font-family);
  font-size: var(--mp-form-input-font-size);
  padding: var(--mp-form-input-padding);
  font-weight: 400;
  line-height: 1.25;
}

input[type='text']:focus,
input[type='email']:focus,
input[type='password']:focus,
input[type='number']:focus,
input[type='search']:focus,
input[type='url']:focus,
input[type='tel']:focus,
input[type='date']:focus,
input[type='datetime-local']:focus,
input[type='time']:focus,
input[type='month']:focus,
select:focus,
textarea:focus,
button:focus,
.button:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

textarea {
  min-height: 140px;
  font-family: var(--mp-form-input-font-family);
  font-size: var(--mp-form-input-font-size);
}

.error {
  color: var(--danger);
  margin: 0.5rem 0;
}

.workflow-builder-subworkflow-warn {
  color: var(--warn);
  margin: 0.5rem 0;
  font-size: 0.875rem;
}

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

.flow-list li {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

table.execution-history {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(0.88rem - 1px);
  table-layout: fixed;
}

table.execution-history col.execution-history-col-date {
  width: 10rem;
}

table.execution-history col.execution-history-col-duration {
  width: 7rem;
}

table.execution-history col.execution-history-col-tokens {
  width: 9.5rem;
}

table.execution-history col.execution-history-col-cost {
  width: 4.5rem;
}

table.execution-history col.execution-history-col-status {
  width: 8.5rem;
}

.execution-history-date-cell .execution-history-date-line {
  line-height: 1.25;
}

.execution-history-date-cell .execution-history-time-line {
  font-size: calc(0.78rem - 1px);
  line-height: 1.25;
  margin-top: 0.1rem;
}

table.execution-history td.execution-history-tokens-cell {
  font-size: calc(0.78rem - 1px);
  white-space: nowrap;
}

table.execution-history th,
table.execution-history td {
  text-align: left;
  vertical-align: top;
  padding: 10px 0.5rem 0.45rem 0.5rem;
  border-bottom: 1px solid var(--border);
}

table.execution-history td.execution-history-cost-cell {
  font-size: calc(0.78rem - 1px);
  white-space: nowrap;
}

table.execution-history thead th {
  font-size: calc(0.78rem - 1px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 400;
}

table.execution-history .badge {
  font-weight: 400;
}

table.execution-history td:last-child {
  white-space: nowrap;
}

table.execution-history tr.execution-history-row--selected td {
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}

.execution-history-cleanup-btn {
  font-size: 0.78rem;
  padding: 0.2rem 0.55rem;
}

.execution-history-payload-size {
  margin-left: 0.5rem;
  font-size: 0.78rem;
}

.payload-size-warn {
  color: var(--warn);
}

table.execution-history a.execution-history-id {
  display: inline-block;
  max-width: 100%;
  word-break: break-all;
  line-height: 1.35;
  font-weight: 400;
  color: var(--accent);
  text-decoration: none;
}

table.execution-history a.execution-history-id:hover {
  text-decoration: underline;
}

table.execution-logs {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(0.88rem - 1px);
  table-layout: fixed;
}

table.execution-logs col.execution-logs-col-time {
  width: 16rem;
}

table.execution-logs col.execution-logs-col-source {
  width: 7rem;
}

table.execution-logs col.execution-logs-col-level {
  width: 6rem;
}

table.execution-logs th,
table.execution-logs td {
  text-align: left;
  vertical-align: middle;
  padding: 0.45rem 0.5rem;
  border-bottom: 1px solid var(--border);
}

table.execution-logs thead th {
  font-size: calc(0.78rem - 1px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 400;
}

.execution-logs-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin: 0.25rem 0 0.85rem;
}

.execution-logs-level-tabs.settings-tabs {
  margin: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.execution-logs-search {
  flex: 1 1 14rem;
  max-width: 22rem;
  margin-left: auto;
}

.execution-logs-search input[type='search'] {
  max-width: none;
  width: 100%;
}

/* Workflow builder: VS Code–style explorer tree for nodes */
.flow-preview-tree {
  margin-top: 0.35rem;
  padding: 10px 20px 10px 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  font-size: 13px;
  line-height: 22px;
}

.flow-tree-node-group {
  min-width: 0;
}

.flow-tree-branch {
  min-width: 0;
}

.flow-tree-branch-label {
  padding: 0 4px 0 calc(var(--flow-tree-pad, 2px) + 18px);
  font-size: 11px;
  line-height: 20px;
  text-transform: lowercase;
  letter-spacing: 0.02em;
}

.flow-tree-empty {
  padding: 0 4px 2px calc(var(--flow-tree-pad, 2px) + 18px);
  font-size: 12px;
  line-height: 20px;
}

.flow-node-list-item.flow-tree-row {
  min-height: 22px;
  padding: 3px 4px 3px calc(var(--flow-tree-pad, 2px) + 2px);
  border-bottom: none;
  box-sizing: border-box;
}

.flow-preview-tree .flow-node-list-item.flow-tree-row {
  display: grid;
  grid-template-columns:
    18px
    1.35rem
    minmax(0, 1fr)
    minmax(0, 12rem)
    minmax(0, 10rem)
    auto;
  align-items: center;
  column-gap: 0.35rem;
}

.flow-tree-row:hover {
  background: color-mix(in srgb, var(--muted) 8%, transparent);
}

.flow-tree-row.flow-tree-row--selected {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
}

.flow-tree-row.flow-tree-row--selected:hover {
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
}

.flow-tree-row.flow-tree-row--warn-blocking {
  box-shadow: inset 2px 0 0 0 #e11d48;
}

.flow-tree-row.flow-tree-row--warn-nonblocking {
  box-shadow: inset 2px 0 0 0 #ca8a04;
}

.flow-tree-row.flow-tree-row--node-disabled {
  opacity: 0.78;
}

/* DAG: second+ incoming path to the same node (e.g. platform.in_set_condition) */
.flow-tree-row.flow-tree-row--merge-link {
  font-style: italic;
}

.flow-tree-twisty {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 2px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.flow-tree-twisty:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--muted) 10%, transparent);
}

.flow-tree-twisty--spacer {
  pointer-events: none;
}

.flow-tree-twisty-icon {
  display: block;
}

.flow-node-type-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  color: var(--muted);
}

.flow-preview-tree .flow-node-type-icon-svg {
  width: 14px;
  height: 14px;
}

.flow-node-type-icon-svg {
  display: block;
}

.flow-node-line {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
  min-width: 0;
}

.flow-node-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  min-width: 0;
}

.flow-node-row-left {
  min-width: 0;
}

.flow-preview-tree .flow-tree-row > .flow-node--tree-name {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  justify-self: stretch;
}

.flow-preview-tree .flow-node-tree-col {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  overflow: hidden;
}

/* ~20px between executor_ref column and node_id column (includes grid column-gap). */
.flow-preview-tree .flow-node-tree-col--node-id {
  padding-left: calc(20px - 0.35rem);
  box-sizing: border-box;
}

/* Ghost icon buttons: beat global `button { background: var(--accent) }` in any layout. */
button.flow-node-copy {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border: none;
  border-radius: 3px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  opacity: 0.65;
}

.flow-tree-row:hover .flow-node-copy {
  opacity: 1;
}

button.flow-node-copy:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--muted) 10%, transparent);
}

button.flow-node-copy:focus,
button.flow-node-copy:focus-visible {
  outline: none;
}

.flow-node-copy-icon {
  display: block;
}

.flow-preview-tree .flow-node-row-left {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.flow-tree-node-title {
  font-weight: 500;
  color: var(--text);
}

.flow-node-row-id {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 400;
  color: color-mix(in srgb, var(--muted) 85%, var(--bg));
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow-preview-tree .flow-node-row-id--tree {
  margin-left: 0;
  margin-right: 0;
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  text-align: left;
  display: block;
  white-space: nowrap;
  word-break: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--muted);
}

.flow-preview-tree .flow-node-row-executor-ref--tree {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  text-align: left;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.flow-preview-tree .flow-node-tree-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  justify-self: end;
  margin-left: 30px;
}

.flow-preview-tree .flow-node-tree-actions .flow-node-delete {
  flex-shrink: 0;
}

.flow-node-line > .flow-node:not(.flow-node--tree-name) {
  flex: 1;
  min-width: 0;
}

.flow-node-delete {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border: none;
  border-radius: 3px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  opacity: 0.65;
}

.flow-tree-row:hover .flow-node-delete {
  opacity: 1;
}

.flow-node-delete:hover {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}

.flow-node-add-child {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border: none;
  border-radius: 3px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  opacity: 0.65;
}

.flow-tree-row:hover .flow-node-add-child {
  opacity: 1;
}

.flow-node-add-child:hover:not(:disabled) {
  color: var(--accent, #6366f1);
  background: color-mix(in srgb, var(--accent, #6366f1) 10%, transparent);
}

.flow-node-add-child:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.flow-node-add-child-icon {
  display: block;
}

.flow-node-delete-icon {
  display: block;
}

.flow-preview-tree .flow-node--tree-name {
  text-align: left;
  background: transparent;
  border: none;
  padding: 1px 4px;
  border-radius: 2px;
  cursor: pointer;
  color: var(--text);
  font: inherit;
  line-height: inherit;
}

.flow-preview-tree .flow-node--tree-name:hover {
  background: transparent;
}

.flow-preview-tree .flow-tree-row--selected .flow-node--tree-name {
  background: transparent;
}

.badge {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
}

.badge-pending {
  background: var(--badge-pending-bg);
  color: var(--muted);
}
.badge-running {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--badge-running-bg);
  color: var(--badge-running-fg);
}

.badge-spinner {
  flex-shrink: 0;
  width: 0.65rem;
  height: 0.65rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  opacity: 0.9;
  animation: badge-spin 0.65s linear infinite;
}

@keyframes badge-spin {
  to {
    transform: rotate(360deg);
  }
}
.badge-success {
  background: var(--badge-success-bg);
  color: var(--ok);
}
.badge-failed {
  background: var(--badge-failed-bg);
  color: var(--danger);
}
.badge-cancelled {
  background: var(--badge-cancelled-bg);
  color: var(--warn);
}
.badge-muted {
  background: var(--badge-pending-bg);
  color: var(--muted);
  opacity: 0.75;
}

.step-row {
  cursor: pointer;
}

.step-row:hover {
  background: rgba(255, 255, 255, 0.03);
}

.step-detail {
  margin-top: 0.5rem;
  padding: 0.75rem;
  background: var(--bg);
  border-radius: 6px;
  font-size: calc(0.8rem - 1px);
}

.step-detail-io-title {
  margin: 0.5rem 0 0.25rem;
  font-size: calc(0.85rem - 1px);
  font-weight: 400;
}

.step-detail-io-title:first-child {
  margin-top: 0;
}

.step-detail-io-section + .step-detail-io-section {
  margin-top: 0.5rem;
}

.step-detail-io-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.step-detail-io-head .step-detail-io-title {
  margin: 0.5rem 0 0.25rem;
}

button.step-detail-copy {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

button.step-detail-copy:hover {
  color: var(--text);
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.03);
}

button.step-detail-copy:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button.step-detail-copy[data-copied='1'] {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 55%, var(--border));
  background: color-mix(in srgb, var(--ok) 10%, transparent);
}

.step-detail-io {
  height: 20vh;
  max-height: 20vh;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  scrollbar-width: none;
}

.step-detail-io::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.step-detail-io.step-detail-io--show-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.step-detail-io.step-detail-io--show-scrollbar::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.step-detail-io.step-detail-io--show-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.step-detail-io.step-detail-io--show-scrollbar::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 5px;
}

.step-detail-io-pre {
  margin: 0;
  padding: 10px;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: calc(0.8rem - 1px);
}

.mono {
  font-family: var(--font-data);
  white-space: pre-wrap;
  word-break: break-word;
}

table.steps {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(0.88rem - 1px);
}

table.steps th,
table.steps td {
  text-align: left;
  vertical-align: top;
  padding: 10px 0.35rem 0.45rem 0.35rem;
  border-bottom: 1px solid var(--border);
}

table.steps tr.step-row td:nth-child(6),
table.steps tr.step-row td:nth-child(7) {
  font-size: calc(0.78rem - 1px);
  white-space: nowrap;
}

table.steps thead th {
  font-weight: 400;
  color: var(--muted);
  font-size: calc(0.78rem - 1px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

table.steps .badge {
  font-weight: 400;
}

table.steps td.step-ts-cell {
  line-height: 1.25;
}

table.steps td.step-ts-cell .step-ts-date,
table.steps td.step-ts-cell .step-ts-time {
  display: block;
}

table.steps td.step-ts-cell .step-ts-time {
  font-size: calc(0.76rem - 1px);
  color: var(--muted);
  margin-top: 0.08rem;
}

.step-detail-token-line {
  margin: 0 0 0.5rem;
}

.catalogue-grid {
  display: grid;
  gap: 0.75rem;
}

.catalogue-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem;
  background: var(--surface);
}

.catalogue-card code {
  font-size: 0.8rem;
  color: var(--accent);
}

.muted {
  color: var(--muted);
  font-size: 0.85rem;
}

/* --- Meno Platform design system utilities (DESIGN_GUIDE.md) --- */
.mp-typ-title {
  font-size: var(--font-size-title);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.mp-typ-body {
  font-family: var(--font-ui);
  font-size: var(--font-size-body);
  font-weight: 400;
  line-height: 1.5;
}

.mp-typ-small {
  font-family: var(--font-ui);
  font-size: var(--font-size-small);
  font-weight: 400;
  line-height: 1.45;
}

.mp-font-ui {
  font-family: var(--font-ui);
}

.mp-font-data {
  font-family: var(--font-data);
}

/* Settings (credentials + user variables) */
.settings-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 0;
  height: 100%;
  max-height: 100%;
  background: var(--surface);
}

.settings-explorer {
  min-width: 0;
  border-right: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 94%, var(--panel));
  overflow: auto;
}

.settings-explorer-head {
  padding: 0.65rem 0.75rem 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.settings-explorer-list {
  --explorer-chevron-gap: 0.5rem;
  padding: 0 0.35rem 0.75rem;
}

.settings-explorer-folder {
  margin: 0.15rem 0;
}

.settings-explorer-folder-summary {
  cursor: pointer;
  list-style: none;
  padding: 0.24rem 0.35rem;
  font-size: 0.83rem;
  font-weight: 400;
  color: var(--text);
  border-radius: 5px;
}

.settings-explorer-folder-summary::-webkit-details-marker,
.settings-explorer-folder-summary::marker {
  display: none;
}

.settings-explorer-folder-summary::before {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-feature-settings: 'liga';
  font-variant-ligatures: normal;
  -webkit-font-feature-settings: 'liga';
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
  content: 'chevron_right';
  display: inline-block;
  width: 1rem;
  margin-right: var(--explorer-chevron-gap, 0.5rem);
  font-size: 1rem;
  line-height: 1;
  color: var(--muted);
  transition: transform 0.12s ease;
  vertical-align: -0.15em;
}

.settings-explorer-folder[open] .settings-explorer-folder-summary::before {
  transform: rotate(90deg);
}

.settings-explorer-row {
  width: 100%;
  display: flex;
  align-items: center;
  min-height: 1.8rem;
  padding: 0.2rem 0.35rem 0.2rem 1.1rem;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.84rem;
  text-align: left;
}

/* Rows inside settings folders — match workflow explorer child indent */
.settings-explorer-folder > .settings-explorer-row {
  padding-left: calc(1.1rem + var(--explorer-chevron-gap, 0.5rem));
}

.settings-explorer-row:hover {
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

.settings-stack {
  min-width: 0;
  padding: 0.75rem 0.75rem 1rem;
  overflow: auto;
}

.settings-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.settings-tab-btn {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-button);
  font-weight: 600;
  cursor: pointer;
}

.settings-tab-btn:hover {
  border-color: var(--accent);
}

.settings-tab-btn.active {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: var(--accent);
}

.cred-groups-host {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 0.25rem;
}

.cred-groups-host > .cred-group {
  margin-top: 0;
}

.settings-stack {
  margin-top: 0.25rem;
}

.settings-stack {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.settings-category {
  margin-top: 0;
}

.settings-category-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 0.35rem;
  color: var(--text);
}

.settings-category-desc {
  margin: 0 0 0.75rem;
  max-width: 40rem;
}

.settings-section.panel {
  margin-top: 0;
  border: none;
}

.settings-stack .settings-category > .panel {
  border: none;
}

.settings-panel-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
  color: var(--text);
}

.settings-subsection {
  margin-top: 1.25rem;
}

.settings-subsection:first-of-type {
  margin-top: 0.5rem;
}

.settings-llm-defaults select.form-input {
  padding: calc(var(--mp-form-input-padding) + 2px);
}

.settings-llm-defaults .settings-llm-default-save {
  margin-top: 10px;
}

.settings-subsection-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  color: var(--text);
}

.channel-guardrail-row .channel-guardrail-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  max-width: 36rem;
}

.channel-guardrail-toggle-text strong {
  font-weight: 600;
}

.settings-group-title {
  font-size: 0.95rem;
  margin: 0 0 0.5rem;
  color: var(--text);
  font-weight: 600;
}

.cred-group {
  margin-top: 1rem;
  padding: 0.75rem 0.9rem 0.5rem;
  border: none;
  border-radius: 0;
  background: transparent;
}

.cred-group:first-of-type {
  margin-top: 0;
}

.cred-group .settings-group-title {
  margin-top: 0;
}

.health-subsection {
  margin-top: 1.25rem;
}

.health-subsection:first-of-type {
  margin-top: 0;
}

.health-list li {
  display: grid;
  grid-template-columns: 0.9rem minmax(12rem, 1fr) 4.25rem 5.25rem minmax(0, 1fr);
  align-items: center;
  justify-content: initial;
}

.health-list .health-bullet {
  font-size: 2.3rem;
  line-height: 1;
  transform: translateY(-1px);
}

.health-list .health-bullet.ok {
  color: #22c55e;
}

.health-list .health-bullet.fail {
  color: var(--danger);
}

.health-list .health-bullet.idle {
  color: #9ca3af;
}

/* Settings → Telegram webhook: title + connection dot (green / red / gray) */
.telegram-webhook-setup {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.telegram-webhook-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.telegram-webhook-title-row .settings-group-title {
  margin: 0;
}

.webhook-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(127, 127, 127, 0.35);
}

.webhook-status-dot--unknown {
  background: #9ca3af;
}

.webhook-status-dot--ok {
  background: #22c55e;
}

.webhook-status-dot--error {
  background: #ef4444;
}

.health-list .health-id {
  min-width: 0;
}

.health-list .health-id code {
  font-size: calc(1rem + 2px);
  font-weight: 600;
}

.health-list .health-latency {
  justify-self: start;
  white-space: nowrap;
}

.health-list .health-msg {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.health-list .health-badge {
  justify-self: start;
}

.cred-row {
  display: grid;
  /* Label column capped; actions column only as wide as input + buttons (no stretched “dead zone”) */
  grid-template-columns: minmax(10rem, min(22rem, 34%)) auto;
  column-gap: 0.65rem;
  row-gap: 0.35rem;
  align-items: center;
  justify-content: start;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.cred-row .form-label {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  align-self: center;
  min-width: 0;
}

.cred-row .cred-actions {
  grid-column: 2;
  grid-row: 1;
  margin-top: 0;
  justify-content: flex-start;
  min-width: 0;
  width: auto;
}

.cred-row .form-row-hint {
  grid-column: 2;
  grid-row: 2;
  margin: 0.1rem 0 0;
}

.cred-row > .flash-msg {
  grid-column: 1 / -1;
  margin-top: 0.35rem;
}

@media (max-width: 720px) {
  .cred-row {
    grid-template-columns: 1fr;
  }

  .cred-row .form-label {
    grid-column: 1;
    grid-row: 1;
  }

  .cred-row .cred-actions {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
  }

  .cred-row .form-row-hint {
    grid-column: 1;
    grid-row: 3;
  }

  .cred-row .cred-actions .form-input,
  .cred-row .cred-actions input {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}

.cred-group .cred-row:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0.25rem;
}

.cred-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 0.4rem;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.cred-actions .form-input,
.cred-actions input {
  max-width: 20rem;
  flex: 1 1 12rem;
}

.cred-row .cred-actions .form-input,
.cred-row .cred-actions input {
  width: 16rem;
  max-width: min(22rem, 100%);
  flex: 0 1 auto;
  min-width: 9rem;
}

.form-row-hint,
.form-row-hint.muted {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
}

.form-row-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
}

.form-row-inline .form-input,
.form-row-inline input {
  flex: 1 1 10rem;
  max-width: 18rem;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin-top: 0.75rem;
}

.data-table th,
.data-table td {
  text-align: left;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.data-table th {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.data-table .var-cell {
  word-break: break-word;
  max-width: 24rem;
}

button.sm,
.button.sm {
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
}

.ok.flash-msg {
  color: var(--ok);
  font-size: 0.85rem;
  margin: 0.25rem 0 0;
}

/* Small toast / pill notification (top-right). */
.toast-pill {
  position: fixed;
  top: 1rem;
  left: 50%;
  right: auto;
  z-index: 2147483647; /* always above any modal/backdrop */
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(0, 0, 0, 0.2);
  transform: translateX(-50%);
  animation: toast-pill-in 0.12s ease-out;
}

.toast-pill--ok {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 55%, var(--border));
  background: color-mix(in srgb, var(--ok) 10%, var(--surface));
}

.toast-pill--error {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 55%, var(--border));
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
}

@keyframes toast-pill-in {
  from {
    opacity: 0;
    transform: translate(-50%, -4px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* Generic "ok" text (used in Settings status hints). */
.ok {
  /* Use a darker green for text on dark surfaces. */
  color: #1aa35a;
}

:root[data-theme='light'] .ok {
  color: var(--ok);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) .ok {
    color: var(--ok);
  }
}

code.small {
  font-size: 0.75rem;
}

/* System confirm dialog (see lib/confirm-dialog.js) */
.platform-confirm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10030; /* must exceed .nc-modal-backdrop (10020) so dialogs appear above node modals */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(8, 12, 18, 0.58);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: platform-confirm-backdrop-in 0.18s ease-out;
}

:root[data-theme='light'] .platform-confirm-backdrop {
  background: rgba(15, 22, 34, 0.38);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) .platform-confirm-backdrop {
    background: rgba(15, 22, 34, 0.38);
  }
}

@keyframes platform-confirm-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.platform-confirm-panel {
  width: 100%;
  max-width: 26rem;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.35rem 1.45rem 1.2rem;
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.08),
    0 22px 50px rgba(0, 0, 0, 0.28);
  animation: platform-confirm-panel-in 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes platform-confirm-panel-in {
  from {
    opacity: 0;
    transform: translateY(0.5rem) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.platform-confirm-title {
  margin: 0 0 0.6rem;
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--text);
}

.platform-confirm-message {
  margin: 0 0 1.2rem;
  font-size: 0.94rem;
  color: var(--muted);
  line-height: 1.55;
  white-space: pre-line;
}

.platform-confirm-toggle {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 1.2rem;
  cursor: pointer;
  user-select: none;
}

.platform-confirm-toggle .node-run-toggle__caption {
  font-size: 0.9rem;
  color: var(--text);
}

.platform-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 1.2rem;
}

.platform-confirm-actions button {
  min-width: 5.25rem;
}

.platform-confirm-primary:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button.danger.platform-confirm-primary:focus {
  outline-color: var(--danger);
}

/* ── Node Edit Dialog (ned-*) ─────────────────────────────────────────── */

.ned-dialog-panel {
  width: 95vw;
  height: 95vh;
  display: flex;
  flex-direction: column;
  /* Min height for JSON / I/O panes (see .ned-cfg-inner textarea, .ned-io-host .step-detail-io) */
  --ned-field-min-h: 20vh;
  --ned-io-pane-fill: color-mix(in srgb, var(--muted) 12%, var(--surface));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08), 0 24px 56px rgba(0, 0, 0, 0.32);
  overflow: hidden;
}

/* Header */
.ned-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 1rem 0.7rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  min-width: 0;
  overflow-x: auto;
  flex-wrap: nowrap;
}
.ned-header-title-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  align-items: stretch;
}
.ned-header-title-row {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  min-width: 0;
}
.ned-header-node-type-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  margin-top: 0.08rem;
}
.ned-header-node-type-icon .flow-node-type-icon-svg {
  width: 2.5rem;
  height: 2.5rem;
}
.ned-header-title-text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  align-items: stretch;
}
.ned-header-title-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.ned-header-title-line .ned-dialog-title {
  flex: 1 1 auto;
  min-width: 0;
}
.ned-header-change-type-btn {
  flex-shrink: 0;
  font-size: 0.78rem;
  padding: 0.2rem 0.55rem;
  line-height: 1.2;
}
.ned-dialog-title {
  margin: 0;
  font-size: calc(1.05rem + 2px);
  font-weight: 650;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ned-dialog-node-description {
  margin: 0;
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.35;
  font-weight: 500;
}
.ned-header-meta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 0.55rem;
  min-width: 0;
  max-width: none;
}
.ned-header-meta-row {
  flex-wrap: nowrap;
}
.ned-header-meta-field {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  min-width: 0;
}
.ned-header-meta-label {
  flex-shrink: 0;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--muted) 92%, var(--text));
}
.ned-header-id-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  min-width: 0;
  max-width: none;
  flex: 0 1 auto;
}
.ned-header-id-wrap .ned-header-meta-id {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.25;
  font-weight: 500;
  min-width: 0;
  max-width: min(52rem, 72vw);
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ned-header-id-copy {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  margin-left: 10px;
  padding: 0;
  border-radius: 5px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  color: var(--muted);
  transition:
    background 0.12s,
    border-color 0.12s,
    color 0.12s;
}
.ned-header-id-copy:hover:not(:disabled) {
  background: color-mix(in srgb, var(--text) 8%, transparent);
  border-color: var(--border);
  color: var(--text);
}
.ned-header-id-copy svg {
  display: block;
}
.ned-header-id-copy[data-copied='1'] {
  color: var(--ok, #22c55e);
}
.ned-header-category-tag {
  flex: 0 0 auto;
  font-size: 0.68rem;
  line-height: 1.2;
  padding: 0.14em 0.42em;
  border-radius: 5px;
  font-weight: 500;
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--muted) 22%, transparent);
  white-space: nowrap;
  max-width: min(14rem, 28vw);
  overflow: hidden;
  text-overflow: ellipsis;
}
.ned-header-type-tag {
  flex: 0 0 auto;
  font-size: 0.68rem;
  line-height: 1.2;
  padding: 0.14em 0.42em;
  border-radius: 5px;
  font-weight: 500;
  color: var(--accent, #6366f1);
  background: color-mix(in srgb, var(--accent, #6366f1) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #6366f1) 28%, transparent);
  white-space: nowrap;
  max-width: min(36rem, 48vw);
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Google Material Symbols (see fonts link in index.html) — match Google’s stylesheet + axes from Material Symbols docs */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  font-variant-ligatures: normal;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}

/* Icon picker: keep glyphs on the icon font even if a parent sets UI / mono fonts */
.ned-icon-picker-backdrop .material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-feature-settings: 'liga';
  font-variant-ligatures: normal;
  -webkit-font-feature-settings: 'liga';
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}

.ned-close-btn {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--muted);
  transition: color 0.13s;
}
.ned-close-btn:hover {
  color: var(--text);
}
.ned-close-btn:focus-visible {
  outline: 2px solid var(--accent, #6366f1);
  outline-offset: 2px;
}
.ned-close-btn .ned-close-btn__icon {
  font-size: 1.85rem;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

/* Session bar */
.ned-session-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
  font-size: 0.82rem;
}
.ned-session-bar label {
  color: var(--muted);
  white-space: nowrap;
  font-weight: 500;
}
.ned-session-sel {
  flex: 1;
  min-width: 0;
  font-size: 0.82rem;
}
.ned-refresh-btn {
  flex-shrink: 0;
  width: 1.9rem;
  height: 1.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  color: var(--muted);
  transition: background 0.13s, border-color 0.13s, color 0.13s;
}
.ned-refresh-btn:hover {
  background: color-mix(in srgb, var(--accent, #6366f1) 10%, transparent);
  border-color: var(--border);
  color: var(--accent, #6366f1);
}

/* 3-column body */
.ned-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.ned-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
/* Input / output each ~10% narrower than an equal third; config column absorbs the space (3:4:3). */
.ned-col-input,
.ned-col-output {
  flex: 3 1 0;
  min-width: 0;
}
.ned-col-config {
  flex: 4 1 0;
  min-width: 0;
}
.ned-col-input {
  border-right: 1px solid var(--border);
  background: var(--ned-io-pane-fill);
}
.ned-col-output {
  border-left: 1px solid var(--border);
  background: var(--bg);
}
/* Output column: two equal sub-sections stacked vertically */
.ned-output-section {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.ned-output-history {
  border-bottom: 2px solid var(--border);
  background: var(--ned-io-pane-fill);
}
.ned-col-config {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border: 3px solid color-mix(in srgb, var(--border) 58%, black 42%);
  box-sizing: border-box;
  padding-left: 30px;
  padding-right: 30px;
}
.ned-col-config > .ned-col-heading {
  border-bottom: none;
  justify-content: space-between;
  align-items: center;
}

/* Run toggle (left) + icon picker / Default (right) in node edit config column */
.ned-cfg-run-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  box-sizing: border-box;
}

.ned-cfg-run-row .node-run-toggle {
  flex: 1 1 auto;
  min-width: 0;
}

.ned-icon-controls {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  margin-top: -0.05rem; /* visually aligns icon with heading label */
}

.ned-cfg-run-row .ned-icon-controls {
  flex-shrink: 0;
  margin-top: 0;
}
.ned-col-heading {
  display: flex;
  align-items: center;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.45rem 0.5rem 0.4rem 0.85rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 0.4rem;
}
.ned-col-heading span {
  flex: 1;
}
/* Diff summary for test output vs session history (below OUTPUT — TEST RESULT heading) */
.ned-live-diff-row {
  flex-shrink: 0;
  padding: 0.3rem 0.85rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.ned-live-out-diff-hint {
  margin: 0;
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  line-height: 1.35;
  word-break: break-word;
}
.ned-live-out-diff-hint--diff {
  color: var(--error, #ef4444);
}
.ned-live-out-diff-hint--match {
  color: color-mix(in srgb, var(--ok) 68%, black 32%);
}
/* Copy button sitting in the column heading */
.ned-heading-copy-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  padding: 0;
  border-radius: 5px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  color: var(--muted);
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.ned-heading-copy-btn svg {
  flex-shrink: 0;
  display: block;
}
.ned-heading-copy-btn--hidden {
  display: none;
}
.ned-heading-copy-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--text) 8%, transparent);
  border-color: var(--border);
  color: var(--text);
}
.ned-heading-copy-btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.ned-heading-copy-btn[data-copied='1'] {
  color: var(--ok, #22c55e);
}
/* Hide the inner io-head (title + copy) inside ned hosts — copy lives in the column heading now */
.ned-io-host .step-detail-io-head {
  display: none;
}
/* For split input, show per-section heads so "Input 1 (from X)" labels remain visible */
.ned-io-host--split .step-detail-io-section .step-detail-io-head {
  display: flex;
}

/* I/O host: column flex; each .step-detail-io scrolls and is at least --ned-field-min-h tall */
.ned-io-host {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 0.55rem 0.65rem;
  font-size: 0.78rem;
}
.ned-io-host .step-detail-io {
  flex: 1 1 auto;
  min-height: var(--ned-field-min-h, 20vh);
  height: auto;
  max-height: none;
  overflow-y: auto;
}
/* Single input: section + box grow to use full input column height; scroll inside the box */
.ned-io-host:not(.ned-io-host--split) .step-detail-io-section {
  flex: 1 1 auto;
  min-height: 0;
}
.ned-io-host:not(.ned-io-host--split) .step-detail-io {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}
.ned-col-input .ned-io-host .step-detail-io,
.ned-output-history .ned-io-host .step-detail-io {
  background: var(--ned-io-pane-fill);
}
/* Test output vs session history: border hints from shallow compare */
.ned-io-host.ned-test-out-match .step-detail-io {
  border-color: #00ff88;
  border-width: 2px;
}
.ned-io-host.ned-test-out-diff .step-detail-io {
  border-color: var(--error, #ef4444);
  border-width: 2px;
}
.ned-io-host.ned-test-out-na .step-detail-io {
  border-color: color-mix(in srgb, var(--muted) 45%, var(--border));
}
.ned-io-host .step-detail-io-section {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.ned-io-host .step-detail-io-title {
  font-size: 0.72rem;
}

/* NED input/output: one logical line per row; horizontal scroll instead of soft-wrapping long JSON. */
.ned-io-host .step-detail-io-pre {
  white-space: pre;
  word-break: normal;
  overflow-wrap: normal;
}

/* Node config fields (NED, add-node panel, sidebar edit): 15px from bottom of each field block to the next field label. */
.node-config-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.node-config-field--code {
  width: 100%;
  max-width: none;
  margin-bottom: 30px;
}

.node-config-code-editor {
  position: relative;
  width: 100%;
  max-width: none;
  min-height: 12rem;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: light-dark(#f2f2f2, color-mix(in srgb, white 5%, var(--panel)));
  resize: vertical;
  overflow: hidden;
}

.node-config-code-editor-toolbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  padding: 0 8px 8px;
  pointer-events: none;
}

.node-config-code-editor-toolbar button {
  pointer-events: auto;
  margin-bottom: 0;
  font-size: 0.72rem;
  padding: 0.2rem 0.55rem;
  line-height: 1.3;
}

.node-config-code-zoom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 0.25rem 0.4rem !important;
}

.node-config-code-zoom-btn svg {
  display: block;
}

.node-config-code-editor-highlight,
.node-config-code-editor .node-config-code-textarea {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 2.25rem;
  width: 100%;
  height: 100%;
  margin: 0;
  max-width: none;
  min-height: 0;
  box-sizing: border-box;
  border: none;
  border-radius: 0;
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 0.82rem !important;
  line-height: 1.45 !important;
  padding: 10px !important;
  tab-size: 2;
  white-space: pre;
  overflow: auto;
  background: transparent;
}

.node-config-code-editor-highlight {
  pointer-events: none;
  color: var(--text);
}

.node-config-code-editor-highlight code {
  font: inherit;
}

.node-config-code-editor .node-config-code-textarea {
  resize: none;
  color: transparent;
  caret-color: var(--text);
  outline: none;
}

.node-config-code-editor .node-config-code-textarea:focus {
  outline: none;
}

.node-config-code-editor:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.ned-dialog-panel .ned-cfg-inner .node-config-code-editor {
  min-height: max(12rem, var(--ned-field-min-h, 20vh));
}
.ned-dialog-panel .ned-cfg-inner .node-config-code-editor .node-config-code-textarea {
  min-height: 0;
}

.node-config-code-editor--zoom {
  min-height: 100%;
  height: 100%;
  resize: none;
}

.node-config-code-editor--zoom .node-config-code-editor-highlight,
.node-config-code-editor--zoom .node-config-code-textarea {
  bottom: 0;
}

.node-config-code-zoom-popup-panel .ned-session-logs-popup-body.node-config-code-zoom-popup-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 0;
}

.node-config-code-zoom-popup-body .node-config-code-editor--zoom {
  flex: 1;
  min-height: 12rem;
  margin-top: 20px;
}

.node-config-code-zoom-debug-panel {
  flex-shrink: 0;
  margin: 0.65rem 0 0;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-control);
  font-size: calc(1rem - 2px);
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.node-config-code-zoom-debug-panel--ok {
  background: color-mix(in srgb, var(--accent) 14%, light-dark(#f6faf3, var(--panel)));
  color: var(--text);
}

.node-config-code-zoom-debug-panel--issue {
  background: color-mix(in srgb, var(--warn) 16%, light-dark(#fffbf3, var(--panel)));
  color: var(--text);
}

.node-config-code-zoom-debug-panel--request-error {
  background: color-mix(in srgb, var(--error, #ef4444) 12%, light-dark(#fff6f6, var(--panel)));
  color: var(--error, #ef4444);
}

.node-config-code-zoom-debug-panel:not([hidden]) {
  margin-top: 20px;
  padding-top: 0.85rem;
}

.node-config-code-zoom-debug-panel--loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  color: var(--muted);
}

.node-config-code-popup-backdrop {
  z-index: 10008;
}

.node-config-code-zoom-popup-panel,
.node-config-code-debug-popup-panel {
  width: 80vw;
  max-width: 80vw;
  height: 80vh;
  max-height: 80vh;
  padding: 20px;
  box-sizing: border-box;
}

.node-config-code-zoom-popup-panel {
  background: transparent;
  border: none;
  box-shadow: none;
}

.node-config-code-zoom-popup-panel .ned-session-logs-popup-head {
  background: var(--surface);
  border-radius: var(--radius-control) var(--radius-control) 0 0;
  border: none;
  border-bottom: none;
}

.node-config-code-zoom-head-sep {
  flex-shrink: 0;
  height: 0;
  margin: 0;
  border: none;
  border-top: 1px solid var(--border);
}

.node-config-code-zoom-head-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.node-config-code-zoom-debug-btn {
  font-size: 0.78rem;
  padding: 0.25rem 0.65rem;
}

.node-config-code-zoom-save-btn {
  font-size: 0.78rem;
  padding: 0.25rem 0.75rem;
  line-height: 1.3;
}

.node-config-code-zoom-popup-panel .node-config-code-editor {
  background: transparent;
}

.node-config-code-zoom-popup-panel .ned-session-logs-popup-body,
.node-config-code-debug-popup-panel .ned-session-logs-popup-body {
  padding: 0;
}

.node-config-code-zoom-popup-panel .node-config-code-editor {
  border: none;
}

.node-config-code-zoom-popup-panel .node-config-code-editor:focus-within {
  outline: none;
}

.node-config-code-debug-popup-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.node-config-code-debug-loading {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 0;
  margin-top: 20px;
  color: var(--muted);
}

.node-config-code-debug-loading-text {
  font-size: calc(0.9rem - 2px);
}

.node-config-code-debug-spinner {
  flex-shrink: 0;
  width: 1.35rem;
  height: 1.35rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  opacity: 0.92;
  animation: badge-spin 0.65s linear infinite;
}

/* Override .ned-node-help-bubble-md { font-size: inherit } so markdown uses a compact size. */
.node-config-code-debug-popup-body .node-config-code-debug-md.ned-node-help-bubble-md.prompts-detail-md-preview {
  flex: none;
  min-height: 0;
  padding: 0;
  margin: 20px 0 0;
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  font-size: calc(1rem - 2px);
  line-height: 1.5;
}

.node-config-code-debug-popup-body .node-config-code-debug-md.prompts-detail-md-preview h1 {
  font-size: calc(1.25rem - 2px);
}

.node-config-code-debug-popup-body .node-config-code-debug-md.prompts-detail-md-preview h2 {
  font-size: calc(1.1rem - 2px);
}

.node-config-code-debug-popup-body .node-config-code-debug-md.prompts-detail-md-preview h3 {
  font-size: calc(1rem - 2px);
}

.node-config-code-debug-popup-body .node-config-code-debug-md.prompts-detail-md-preview h4 {
  font-size: calc(0.95rem - 2px);
}

.node-config-code-debug-popup-body .node-config-code-debug-md.prompts-detail-md-preview p,
.node-config-code-debug-popup-body .node-config-code-debug-md.prompts-detail-md-preview li {
  font-size: inherit;
}

.node-config-code-debug-popup-body .node-config-code-debug-md.prompts-detail-md-preview code {
  font-size: 0.92em;
}

.node-config-code-debug-popup-body .node-config-code-debug-error {
  margin-top: 20px;
  font-size: calc(1rem - 2px);
}

.nce-keyword {
  color: #8250df;
  font-weight: 600;
}
.nce-string {
  color: #0a6e2e;
}
.nce-comment {
  color: var(--muted);
  font-style: italic;
}
.nce-number {
  color: #b45309;
}
.nce-fn {
  color: #0550ae;
}

:root[data-theme='dark'] .nce-keyword {
  color: #d2a8ff;
}
:root[data-theme='dark'] .nce-string {
  color: #7ee787;
}
:root[data-theme='dark'] .nce-number {
  color: #f2cc60;
}
:root[data-theme='dark'] .nce-fn {
  color: #79c0ff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .nce-keyword {
    color: #d2a8ff;
  }
  :root:not([data-theme='light']) .nce-string {
    color: #7ee787;
  }
  :root:not([data-theme='light']) .nce-number {
    color: #f2cc60;
  }
  :root:not([data-theme='light']) .nce-fn {
    color: #79c0ff;
  }
}

button.node-config-day-picker-btn {
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 0.2rem 0.7rem;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
  background: var(--surface);
  color: var(--muted);
}
button.node-config-day-picker-btn.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--button-fg);
  font-weight: 700;
}

.node-config-agent-tools-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
  width: 100%;
}
/* Node config: primary accent actions (+ Tools, + Field, + Output, etc.) */
button.secondary.node-config-primary-action-btn,
.node-config-agent-tools-toolbar .node-config-agent-tools-add-btn {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.3rem 0.55rem;
  background: var(--accent);
  border-color: var(--accent);
  color: var(--button-fg);
}
button.secondary.node-config-primary-action-btn:hover,
button.secondary.node-config-primary-action-btn:focus-visible,
.node-config-agent-tools-toolbar .node-config-agent-tools-add-btn:hover,
.node-config-agent-tools-toolbar .node-config-agent-tools-add-btn:focus-visible {
  background: color-mix(in srgb, var(--accent) 88%, #000);
  border-color: color-mix(in srgb, var(--accent) 88%, #000);
  color: var(--button-fg);
}
.node-config-agent-tools-toolbar .node-config-allowed-args-restrict-btn--compact {
  margin-left: auto;
}
.node-config-agent-tools-tool-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
  width: 100%;
  min-width: 0;
}
.node-config-agent-tools-tool-row .node-config-agent-tools-select {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  max-width: none;
  box-sizing: border-box;
}
.node-config-agent-tools-tool-row .node-config-agent-tools-remove-btn {
  flex-shrink: 0;
  padding: 0.2rem 0.55rem;
  font-size: 1rem;
  line-height: 1.1;
}

/* Separator above Advanced when Agent prompt bar precedes it (mountNodeConfigForm). */
.node-config-advanced-top-rule {
  border-top: 1px solid light-dark(var(--border-color, #ddd), rgba(255, 255, 255, 0.1));
  margin-top: 2px;
  margin-bottom: 0;
  padding: 0;
  flex-shrink: 0;
}
.node-config-advanced-top-rule + .node-config-advanced {
  border-top: none;
  margin-top: 0;
}

/* Workflow node config: “Agent prompts…” + hint (appendWorkflowLlmAgentPromptBar). Stack hint under the button. */
.workflow-builder-agent-prompt-bar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}
.workflow-builder-agent-prompt-bar-hint {
  line-height: 1.4;
  max-width: 100%;
}

/* ── Advanced collapsible section ───────────────────────── */
.node-config-advanced {
  border-top: 1px solid light-dark(var(--border-color, #ddd), rgba(255,255,255,0.1));
  margin-top: 4px;
  padding-top: 2px;
}

.node-config-advanced-summary {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: light-dark(var(--muted, #888), rgba(255,255,255,0.45));
  cursor: pointer;
  padding: 6px 0;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 5px;
}

.node-config-advanced-summary::-webkit-details-marker { display: none; }

.node-config-advanced-summary::before {
  content: '▶';
  font-size: 0.58rem;
  transition: transform 0.15s;
  display: inline-block;
}

details[open].node-config-advanced .node-config-advanced-summary::before {
  transform: rotate(90deg);
}

.node-config-advanced-summary:hover {
  color: light-dark(var(--text, #333), #fff);
}

/* Fields inside advanced use same gap as the outer form */
.node-config-advanced > .node-config-field {
  margin-top: 12px;
}

.node-config-field-label .node-config-field-label-name {
  font-weight: 700;
  color: light-dark(var(--text), #fff);
}

/* Add / edit panels: space the schema block from type/parent rows above (NED uses .ned-cfg-inner gap instead). */
.panel > .node-config-form:not(:empty) {
  margin-top: 15px;
}

/* Config column body: scrolls; footer is a sibling on .ned-col-config (see .ned-footer-btns). */
.ned-cfg-inner {
  padding: 0.85rem 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.ned-cfg-inner.ned-cfg-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* Node edit dialog: inset scrollable config so focus rings are not clipped at the scrollport edge. */
.ned-dialog-panel .ned-cfg-inner {
  padding-left: 5px;
  padding-right: 5px;
}

/* Spacing before the schema block is handled by .ned-cfg-inner gap; avoid stacking with legacy margin. */
.ned-col-config > .ned-footer-btns {
  margin-top: 0;
}

/* Node edit dialog: JSON / long text areas get a usable min height; single-line inputs stay compact */
.ned-dialog-panel .ned-cfg-inner textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--ned-field-min-h, 20vh);
  overflow-y: auto;
  resize: vertical;
}
.ned-dialog-panel .ned-cfg-inner input:not([type='checkbox']):not([type='radio']):not([type='hidden']),
.ned-dialog-panel .ned-cfg-inner select {
  box-sizing: border-box;
  width: 100%;
}

/* Field map editor: one row per mapping (works in NED dialog and workflow add/edit panels). */
.node-config-fieldmap-rows {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.node-config-fieldmap-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}
.node-config-fieldmap-row button {
  flex-shrink: 0;
}
/* Override full-width form controls inside NED config column only. */
.ned-dialog-panel .ned-cfg-inner .node-config-fieldmap-row select {
  width: auto;
  max-width: min(38%, 13rem);
  flex: 0 1 auto;
}
.ned-dialog-panel .ned-cfg-inner .node-config-fieldmap-row input[type='text'] {
  width: auto;
  flex: 1 1 0;
  min-width: 0;
}

/* Same row control sizing in workflow add/edit panels (`.node-config-form` is not always inside `.ned-cfg-inner`). */
.node-config-form .node-config-fieldmap-row select {
  width: auto;
  max-width: min(38%, 13rem);
  flex: 0 1 auto;
}
.node-config-form .node-config-fieldmap-row input[type='text'] {
  width: auto;
  flex: 1 1 0;
  min-width: 0;
}

/* Human Router branches: equal-width port + description (avoid <select> shrinking to selected label). */
.node-config-form .node-config-fieldmap-row.node-config-hr-branch-row,
.ned-dialog-panel .ned-cfg-inner .node-config-fieldmap-row.node-config-hr-branch-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}
.node-config-form .node-config-fieldmap-row.node-config-hr-branch-row select,
.ned-dialog-panel .ned-cfg-inner .node-config-fieldmap-row.node-config-hr-branch-row select {
  width: 100%;
  max-width: none;
  min-width: 0;
  flex: none;
  box-sizing: border-box;
}
.node-config-form .node-config-fieldmap-row.node-config-hr-branch-row input[type='text'],
.ned-dialog-panel .ned-cfg-inner .node-config-fieldmap-row.node-config-hr-branch-row input[type='text'] {
  width: 100%;
  max-width: none;
  min-width: 0;
  flex: none;
  box-sizing: border-box;
}

/* Restrict DB tool arguments — native <dialog> (mountAllowedArgsDbTablesUI, node-config-form.js) */
dialog.node-config-allowed-args-dialog {
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  padding: 0;
  max-width: min(36rem, 96vw);
  background: var(--surface);
  color: var(--text);
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.08),
    0 22px 50px rgba(0, 0, 0, 0.28);
}
dialog.node-config-allowed-args-dialog::backdrop {
  background: rgba(8, 12, 18, 0.58);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
:root[data-theme='light'] dialog.node-config-allowed-args-dialog::backdrop {
  background: rgba(15, 22, 34, 0.38);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) dialog.node-config-allowed-args-dialog::backdrop {
    background: rgba(15, 22, 34, 0.38);
  }
}
.node-config-allowed-args-dialog-panel {
  padding: 0.85rem 1rem 1rem;
}
dialog.node-config-allowed-args-dialog .node-config-allowed-args-dialog-title {
  margin: 0 0 0.5rem;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
}
dialog.node-config-allowed-args-dialog .node-config-allowed-args-dialog-desc {
  margin: 0 0 0.65rem;
  font-size: 0.74rem;
  line-height: 1.4;
  color: var(--muted);
}
.node-config-allowed-args-dialog-catalog {
  font-size: 0.7rem;
  margin-bottom: 0.45rem;
  min-height: 1rem;
}
.node-config-allowed-args-dialog-rows {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 0.65rem;
  max-height: min(50vh, 22rem);
  overflow: auto;
}
.node-config-allowed-args-dialog-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem 0.65rem;
  padding: 0.45rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: color-mix(in srgb, var(--panel) 55%, var(--surface));
}
button.node-config-allowed-args-table-pick-btn {
  width: 14rem;
  flex-shrink: 0;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0.28rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
button.node-config-allowed-args-table-pick-btn:hover,
button.node-config-allowed-args-table-pick-btn:focus-visible {
  border-color: var(--accent);
  outline: none;
}

/* Table picker dialog */
dialog.node-config-table-picker-dialog {
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  padding: 0;
  width: min(44rem, 96vw);
  background: var(--surface);
  color: var(--text);
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.1),
    0 22px 50px rgba(0, 0, 0, 0.32);
}
dialog.node-config-table-picker-dialog::backdrop {
  background: rgba(8, 12, 18, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.node-config-table-picker-panel {
  display: flex;
  flex-direction: column;
  max-height: min(72vh, 36rem);
  padding: 0.75rem 0.85rem 0.85rem;
  gap: 0.5rem;
}
.node-config-table-picker-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
}
.node-config-table-picker-search {
  width: 100%;
  box-sizing: border-box;
  font-size: 0.82rem;
  padding: 0.35rem 0.55rem;
}
.node-config-table-picker-list {
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.node-config-table-picker-source-header {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  padding: 0.45rem 0.65rem 0.2rem;
  background: color-mix(in srgb, var(--panel) 60%, var(--surface));
  position: sticky;
  top: 0;
}
button.node-config-table-picker-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  border-radius: 0;
  padding: 0.38rem 0.65rem;
  font-size: 0.8rem;
  color: var(--text);
  cursor: pointer;
  font-weight: 400;
}
button.node-config-table-picker-item:last-child {
  border-bottom: none;
}
button.node-config-table-picker-item:hover,
button.node-config-table-picker-item:focus-visible {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  outline: none;
}
.node-config-table-picker-empty {
  font-size: 0.78rem;
  color: var(--muted);
  padding: 0.75rem 0.65rem;
  text-align: center;
}
.node-config-allowed-args-dialog-toggle-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.65rem;
}
dialog.node-config-allowed-args-dialog label.node-config-allowed-args-dialog-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin: 0;
  font-size: 0.72rem;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  color: var(--text);
}
button.secondary.node-config-allowed-args-dialog-row-remove {
  flex-shrink: 0;
  margin-left: auto;
  padding: 0.25rem 0.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}
button.secondary.node-config-allowed-args-dialog-row-remove:hover,
button.secondary.node-config-allowed-args-dialog-row-remove:focus-visible {
  color: #e05050;
  border-color: #e05050;
}
.node-config-allowed-args-dialog-add-row {
  font-size: 0.72rem;
  margin-bottom: 0.75rem;
}
.node-config-allowed-args-dialog-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.45rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--border);
  margin-top: 0.25rem;
}
button.secondary.node-config-allowed-args-dialog-footer-btn {
  font-size: 0.78rem;
}
button.node-config-allowed-args-dialog-save {
  font-size: 0.78rem;
  font-weight: 600;
}

/* Field map — Show JSON dialog */
.node-config-fieldmap-json-backdrop {
  position: fixed;
  inset: 0;
  z-index: 12040;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--bg, #0f172a) 55%, rgba(0, 0, 0, 0.72));
}
.node-config-fieldmap-json-panel {
  width: min(42rem, 100%);
  max-height: min(78vh, 36rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 1.1rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.node-config-fieldmap-json-head {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.node-config-fieldmap-json-hint {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.4;
}
.node-config-fieldmap-json-ta {
  flex: 1 1 auto;
  min-height: 12rem;
  width: 100%;
  max-width: none; /* override global textarea { max-width: 32rem } */
  box-sizing: border-box;
  font-family: "Segoe UI", ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.75rem;
  line-height: 1.45;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--muted) 12%, var(--surface));
  color: var(--text);
  resize: vertical;
}
.node-config-fieldmap-json-err {
  margin: 0;
  min-height: 1.1em;
  font-size: 0.72rem;
  color: var(--error, #ef4444);
}
.node-config-fieldmap-json-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.45rem;
  padding-top: 0.15rem;
}

/* Empty / loading states */
.ned-empty-state {
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
  padding: 1.5rem 0.75rem;
  line-height: 1.55;
}
.ned-loading {
  opacity: 0.6;
}

/* Footer buttons in config column (sibling of .ned-cfg-scroll; stays visible while form scrolls). */
.ned-footer-btns {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0;
  padding-top: 0.75rem;
  padding-bottom: 0.65rem;
  border-top: 1px solid var(--border);
}
.ned-footer-right {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}
.ned-test-node-footer-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  background: #f97316;
  color: #fff;
  border: 1px solid #ea6c0a;
}
.ned-test-node-footer-btn:hover:not(:disabled) {
  background: #ea6c0a;
  border-color: #d55f06;
}
.ned-test-node-footer-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Node help / logs footers: layout only; colors + hover from button.secondary (workflow-builder.js) */
.ned-node-help-footer-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}
.ned-node-help-footer-btn svg {
  flex-shrink: 0;
}

.ned-session-logs-footer-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}
.ned-session-logs-footer-btn svg {
  flex-shrink: 0;
}

/* Session logs popup (stacked over node edit dialog, workflow-builder.js) */
.ned-session-logs-popup-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10006;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.45);
}
.ned-session-logs-popup-panel {
  display: flex;
  flex-direction: column;
  width: min(920px, 96vw);
  max-height: min(88vh, 720px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.ned-session-logs-popup-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--border);
}
.node-config-code-zoom-popup-panel .ned-session-logs-popup-head {
  border-bottom: none;
}
.ned-session-logs-popup-title {
  flex: 1;
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
  min-width: 0;
}
.ned-session-logs-popup-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.ned-session-logs-popup-close:hover {
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text);
}
.ned-session-logs-popup-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0.65rem 0.85rem 0.85rem;
}
.ned-session-logs-popup-stack-head {
  margin-top: 0.5rem;
}
.ned-session-logs-popup-body > .ned-session-logs-popup-stack-head:first-child {
  margin-top: 0;
}
.ned-session-logs-popup-io {
  margin-bottom: 0.35rem;
}

/* Node help chat popup (stacked over node edit dialog, above session logs popup) */
.ned-node-help-popup-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10007;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  padding: 0;
  background: rgba(0, 0, 0, 0.45);
}
/* Full-height drawer on the right; overrides shared .ned-session-logs-popup-panel sizing */
.ned-session-logs-popup-panel.ned-node-help-popup-panel {
  width: min(520px, 100vw);
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  border-radius: 12px 0 0 12px;
  border-right: none;
  box-shadow: -6px 0 32px rgba(0, 0, 0, 0.28);
}
.ned-node-help-chat {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--border);
}
.ned-node-help-bubble-wrap {
  max-width: 92%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
}
.ned-node-help-bubble-wrap--assistant {
  align-self: flex-start;
}
.ned-node-help-bubble-wrap--user {
  align-self: flex-end;
}
.ned-node-help-bubble-copy {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
}
.ned-node-help-bubble-copy:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--muted) 12%, transparent);
}
.ned-node-help-bubble-copy:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent, #6366f1) 55%, var(--border));
  outline-offset: 2px;
}
.ned-node-help-bubble-copy__icon {
  font-size: 1.05rem;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
.ned-node-help-bubble-copy--copied {
  color: var(--success, #2d8a54);
}
.ned-node-help-bubble-copy--copied .ned-node-help-bubble-copy__icon {
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
.ned-node-help-bubble {
  max-width: 100%;
  padding: 10px;
  border-radius: 12px;
  font-size: 0.9rem;
  line-height: 1.45;
  white-space: normal;
  word-break: break-word;
  box-sizing: border-box;
}
/* Compact markdown inside chat bubbles (reuse prompts-detail-md-preview typography). */
.ned-node-help-bubble-md.prompts-detail-md-preview {
  flex: none;
  min-height: 0;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  font-size: inherit;
  line-height: inherit;
  overflow: visible;
  max-width: 100%;
}
.ned-node-help-bubble-md.prompts-detail-md-preview p {
  margin: 0.35em 0;
}
.ned-node-help-bubble-md.prompts-detail-md-preview > :first-child {
  margin-top: 0;
}
.ned-node-help-bubble-md.prompts-detail-md-preview > :last-child {
  margin-bottom: 0;
}
.ned-node-help-bubble--user .ned-node-help-bubble-md.prompts-detail-md-preview,
.ned-node-help-bubble--user .ned-node-help-bubble-md.prompts-detail-md-preview h1,
.ned-node-help-bubble--user .ned-node-help-bubble-md.prompts-detail-md-preview h2,
.ned-node-help-bubble--user .ned-node-help-bubble-md.prompts-detail-md-preview h3,
.ned-node-help-bubble--user .ned-node-help-bubble-md.prompts-detail-md-preview h4,
.ned-node-help-bubble--user .ned-node-help-bubble-md.prompts-detail-md-preview li {
  color: inherit;
}
.ned-node-help-bubble--user .ned-node-help-bubble-md.prompts-detail-md-preview a {
  color: color-mix(in srgb, var(--accent, #6366f1) 72%, #1e3a8a);
}
.ned-node-help-bubble--user .ned-node-help-bubble-md.prompts-detail-md-preview code {
  background: color-mix(in srgb, var(--accent, #6366f1) 12%, var(--border));
}
.ned-node-help-bubble--user .ned-node-help-bubble-md.prompts-detail-md-preview blockquote {
  border-left-color: color-mix(in srgb, var(--accent, #6366f1) 45%, var(--border));
  color: color-mix(in srgb, var(--accent, #6366f1) 88%, var(--muted));
}
.ned-node-help-bubble--user .ned-node-help-bubble-md.prompts-detail-md-preview pre {
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  border-color: var(--border);
}
.ned-node-help-bubble--user {
  background: transparent;
  color: var(--accent, #6366f1);
  border: 1px solid color-mix(in srgb, var(--border) 92%, var(--muted));
}
.ned-node-help-bubble--assistant {
  background: color-mix(in srgb, var(--surface) 92%, var(--text));
  color: var(--text);
  border: 1px solid var(--border);
}
.ned-node-help-compose {
  flex-shrink: 0;
  display: flex;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem 0.75rem;
  align-items: flex-end;
}
.ned-node-help-textarea {
  flex: 1;
  min-height: 2.6rem;
  max-height: 9rem;
  resize: vertical;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--muted) 12%, var(--surface));
  color: var(--text);
  font: inherit;
  line-height: 1.4;
}
.ned-node-help-send-btn {
  flex-shrink: 0;
  padding: 0.45rem 0.85rem;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--accent, #6366f1) 55%, var(--border));
  background: var(--accent, #6366f1);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.ned-node-help-send-btn:hover:not(:disabled) {
  filter: brightness(1.05);
}
.ned-node-help-send-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* "Edit node" button in the right sidebar */
.ned-open-btn {
  width: 100%;
  margin-top: 0.6rem;
  margin-bottom: 0.5rem;
}

/* Pencil edit button in node list rows */
.flow-node-edit-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 5px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s, border-color 0.12s, color 0.12s;
}
.flow-node-list-item:hover .flow-node-edit-btn,
.flow-tree-row--selected .flow-node-edit-btn,
.flow-node-list-item:hover .flow-node-add-child,
.flow-tree-row--selected .flow-node-add-child {
  opacity: 1;
}
.flow-node-edit-btn:hover {
  background: color-mix(in srgb, var(--accent, #6366f1) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent, #6366f1) 30%, transparent);
  color: var(--accent, #6366f1);
}

/* Multi-input split: stack sections at natural height; scroll the column (avoid flex-shrink overlap). */
.ned-io-host--split {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
.ned-io-host--split .step-detail-io-section {
  flex: 0 0 auto;
  flex-shrink: 0;
}
.ned-io-section--half {
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--border);
  padding: 0.55rem 0.65rem;
}
.ned-io-section--half:last-child {
  border-bottom: none;
}
.ned-io-section--half .step-detail-io {
  flex: 0 1 auto;
  min-height: var(--ned-field-min-h, 20vh);
  max-height: 40vh;
  height: auto;
  overflow-y: auto;
}

/* Run workflow button in session bar */
.ned-run-workflow-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3em 0.75em;
  border-radius: 6px;
  border: none;
  background: var(--accent, #6366f1);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.13s, background 0.13s;
  white-space: nowrap;
}
.ned-run-workflow-btn:hover:not(:disabled) {
  opacity: 0.88;
}
.ned-run-workflow-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Responsive: collapse IO panels on small screens */
@media (max-width: 820px) {
  .ned-dialog-panel {
    width: 100%;
    height: 100dvh;
    border-radius: 0;
  }
  .ned-col-input,
  .ned-col-output {
    display: none;
  }
}

/* ── Eval Dashboard ─────────────────────────────────────────────────────────── */

.eval-dashboard {
  flex: 1;
  min-height: 0;
  width: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.eval-dashboard-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.85rem;
  letter-spacing: -0.01em;
  color: var(--text);
}

.eval-dashboard-panels {
  display: flex;
  gap: 1rem;
  align-items: stretch;
  flex: 1;
  min-height: 0;
}

.eval-dashboard-section {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--surface, #16161e);
}

.eval-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.eval-dashboard-header span {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.eval-dashboard-section > #replay-result-area,
.eval-dashboard-section > #judge-progress-area {
  padding: 0.85rem 1rem 0;
  flex-shrink: 0;
}

.eval-dashboard-section > #replay-history,
.eval-dashboard-section > #judge-history {
  padding: 0 0 0.5rem;
  flex: 1;
  overflow-y: auto;
}

/* Run button */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: none;
  border-radius: var(--radius-button);
  background: var(--accent);
  color: var(--button-fg);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.3em 0.8em;
  transition: opacity 0.12s;
}
.btn:hover:not(:disabled) { opacity: 0.85; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn--sm { font-size: 0.78rem; padding: 0.25em 0.65em; }

/* Replay result inline */
.eval-replay-result {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}
.eval-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2em 0.55em;
  border-radius: 4px;
  font-family: monospace;
  letter-spacing: 0.03em;
}
.eval-badge--ok { background: var(--badge-success-bg); color: var(--ok); }
.eval-badge--fail { background: var(--badge-failed-bg); color: var(--danger); }
.eval-stat { font-size: 0.82rem; font-weight: 500; }
.eval-run-id { color: var(--muted); font-family: monospace; font-size: 0.75rem; margin-left: auto; }

.eval-failures { margin-top: 0.4rem; font-size: 0.82rem; }
.eval-failures summary { cursor: pointer; color: var(--danger); }
.eval-failures ul { margin: 0.3rem 0 0 1rem; padding: 0; }
.eval-failures li { margin-bottom: 0.2rem; line-height: 1.4; }

/* Progress bar */
.eval-progress-wrap {
  height: 5px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}
.eval-progress-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.25s ease;
}
.eval-progress-label {
  font-size: 0.8rem;
  margin: 0;
  color: var(--muted);
}

.eval-errors-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-error, #f87171);
  font-size: inherit;
  cursor: pointer;
  text-decoration: underline;
}
.eval-errors-link:hover { opacity: 0.8; }

.eval-errors-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.eval-errors-popup {
  background: var(--surface, #1e1e2e);
  border: 1px solid var(--border, #333);
  border-radius: 8px;
  width: min(560px, 90vw);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.eval-errors-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border, #333);
  font-weight: 600;
  font-size: 0.9rem;
}
.eval-errors-popup-close {
  background: none;
  border: none;
  color: var(--text-muted, #aaa);
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
  padding: 0 0.2rem;
}
.eval-errors-popup-close:hover { color: var(--text, #fff); }
.eval-errors-popup-body {
  overflow-y: auto;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.eval-errors-popup-row {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border, #333) 50%, transparent);
}
.eval-errors-popup-row:last-child { border-bottom: none; padding-bottom: 0; }
.eval-errors-node-type { font-size: 0.78rem; color: var(--text-muted, #aaa); }
.eval-errors-message { margin: 0; font-size: 0.83rem; color: var(--color-error, #f87171); word-break: break-word; }

/* Judge detail popup */
.eval-judge-detail-popup { width: min(680px, 92vw); }
.eval-judge-detail-body { gap: 0; padding: 0; }
.eval-judge-detail-entry { padding: 0.85rem 1rem; }
.eval-judge-detail-entry-header { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; }
.eval-judge-detail-fixture { font-size: 0.75rem; }
.eval-judge-detail-reason { margin: 0 0 0.5rem; font-size: 0.85rem; }
.eval-judge-detail-divider { border: none; border-top: 1px solid color-mix(in srgb, var(--border, #333) 50%, transparent); margin: 0; }
.eval-judge-detail-prompt-block { margin-top: 0.25rem; }
.eval-judge-detail-prompt-label { font-size: 0.75rem; margin-bottom: 0.35rem; }
.eval-judge-detail-prompt {
  margin-top: 0;
  font-size: 0.72rem;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--panel);
  border: 1px solid var(--border, #333);
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  max-height: 280px;
  overflow-y: auto;
  color: var(--text);
}
.eval-score-pill { font-weight: 700; font-size: 0.85rem; }
.eval-score-pill[data-score="5"] { color: #22c55e; }
.eval-score-pill[data-score="4"] { color: #4ade80; }
.eval-score-pill[data-score="3"] { color: #fbbf24; }
.eval-score-pill[data-score="2"] { color: #fb923c; }
.eval-score-pill[data-score="1"], .eval-score-pill[data-score="0"] { color: #f87171; }
.eval-score-card:hover { border-color: var(--accent, #7c3aed); }

/* Replay detail panel */
.eval-replay-detail { border-top: 1px solid var(--border); }
.eval-replay-detail:empty { border-top: none; }
.eval-replay-detail-table { width: 100%; }
.eval-dashboard-section > #replay-detail.eval-replay-detail:has(.eval-replay-detail-split) {
  flex: 1;
  min-height: min(58vh, 480px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0.45rem 0.65rem 0.75rem;
}
.eval-replay-detail-split.eval-judge-split {
  flex: 1;
  min-height: 0;
}
.eval-replay-fixture-table-wrap {
  overflow: auto;
  margin-top: 0.35rem;
}

/* Score cards */
.eval-score-cards {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border);
}
.eval-score-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.4rem 0.55rem;
  width: 148px;
  flex-shrink: 0;
  background: var(--surface);
  overflow: hidden;
}
.eval-score-card-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 0.2rem;
  font-family: monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eval-score-card-score {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.1;
}
.eval-score-card-score[data-score="5"] { color: #22c55e; }
.eval-score-card-score[data-score="4"] { color: #4ade80; }
.eval-score-card-score[data-score="3"] { color: #fbbf24; }
.eval-score-card-score[data-score="2"],
.eval-score-card-score[data-score="1"],
.eval-score-card-score[data-score="0"] { color: #f87171; }
.eval-score-card-score.eval-live-card-score--na {
  color: var(--muted);
}
.eval-score-card-max { font-size: 0.9rem; font-weight: 400; }
.eval-score-card-trend { font-size: 0.8rem; margin-top: 0.15rem; }
.eval-score-card-meta { font-size: 0.75rem; margin-top: 0.15rem; }

.eval-trend-up   { color: var(--ok); }
.eval-trend-down { color: var(--danger); }
.eval-trend-stable { color: var(--muted); }

/* History tables */
.eval-no-history {
  font-size: 0.82rem;
  margin: 0;
  padding: 1.5rem 1rem;
  color: var(--muted);
}
.eval-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.81rem;
}
.eval-history-table thead tr {
  border-bottom: 1px solid var(--border);
}
.eval-history-table th {
  text-align: left;
  padding: 0.55rem 1rem;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.eval-history-table td {
  padding: 0.6rem 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  vertical-align: middle;
}
.eval-history-table tbody tr:last-child td { border-bottom: none; }
.eval-history-table tbody tr:hover td {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.eval-history-table tbody tr.eval-row--selected td {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.eval-run-id-cell { font-family: monospace; font-size: 0.78rem; color: var(--muted); }
.eval-date-cell { color: var(--muted); font-size: 0.78rem; }
.eval-cell--ok { color: var(--ok); font-weight: 600; }
.eval-cell--fail { color: var(--danger); font-weight: 600; }

.eval-seed-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.35rem;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 92%, var(--surface));
}
.eval-seed-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.eval-seed-call-site {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eval-seed-row-meta {
  font-size: 0.7rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.01em;
}
.eval-seed-desc {
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eval-seed-badge {
  font-size: 0.68rem;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  background: var(--border);
  font-family: monospace;
}
.eval-seed-delete {
  flex-shrink: 0;
  margin: -0.1rem -0.15rem 0 0;
}
.eval-seeds-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  line-height: 0;
}
.eval-seeds-icon-btn .material-symbols-outlined {
  font-size: 1.15rem;
  line-height: 1;
}
.eval-seeds-icon-btn:hover,
.eval-seeds-icon-btn:focus-visible {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--text);
}
.eval-seeds-icon-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 1px;
}
.eval-seeds-icon-btn--danger {
  color: color-mix(in srgb, var(--danger, #e5484d) 72%, var(--muted));
}
.eval-seeds-icon-btn--danger:hover,
.eval-seeds-icon-btn--danger:focus-visible {
  color: var(--danger, #e5484d);
  background: color-mix(in srgb, var(--danger, #e5484d) 12%, transparent);
}
.eval-seeds-inline-icon {
  font-size: 1rem;
  line-height: 0;
  vertical-align: -0.2em;
  margin: 0 0.05rem;
  opacity: 0.85;
}
.eval-seeds-header-actions {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex-shrink: 0;
}
#live-seeds-list {
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
  padding: 0.15rem 0 0.25rem;
}

/* Live seed dialogs (history + manual) */
.eval-seed-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
}
.eval-seed-modal.is-open {
  display: flex;
}
.eval-seed-modal-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.52);
  cursor: pointer;
}
.eval-seed-modal-shell {
  position: relative;
  z-index: 1;
  width: min(540px, 100%);
  max-height: min(88vh, 720px);
  overflow: auto;
  padding: 0.85rem 1rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
/* Execution history modal: header stays put; only the list scrolls */
.eval-seed-modal-shell--history {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.eval-seed-modal-shell--history .eval-history-picker--modal {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.eval-seed-modal-shell--history .eval-history-picker--modal #history-picker-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding-right: 0.25rem;
  background: transparent;
}
.eval-seed-modal-head {
  margin: 0 0 0.65rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--border);
}
.eval-seed-modal-title {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
}
.eval-history-picker-title {
  font-size: 0.8rem;
  line-height: 1.35;
  padding-right: 0.35rem;
}
.eval-history-picker--modal {
  margin-top: 0;
  max-height: none;
  border: none;
  padding: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 0;
}
.eval-history-picker--modal #history-picker-list {
  max-height: min(62vh, 480px);
  overflow-y: auto;
  padding-right: 0.15rem;
  background: transparent;
}
.eval-add-seed-form--modal {
  margin-top: 0;
  border: none;
  padding: 0.75rem 0 0;
  background: transparent;
  border-radius: 0;
}

.eval-add-seed-form {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}
.eval-seed-input {
  background: color-mix(in srgb, var(--muted) 12%, var(--surface));
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  padding: 10px;
  font-size: 0.82rem;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  resize: vertical;
}
.eval-seed-input:focus { outline: none; border-color: var(--accent, #7c3aed); }
.eval-seed-textarea { font-family: monospace; }
.eval-add-seed-actions {
  display: flex;
  gap: 0.4rem;
  justify-content: flex-end;
}
.eval-live-summary {
  display: flex;
  gap: 1rem;
  padding: 0.4rem 0 0.6rem;
  flex-wrap: wrap;
}
.eval-live-summary .eval-stat {
  font-size: 0.8rem;
  color: var(--muted);
}
.eval-live-summary .eval-stat strong {
  color: var(--text);
}
.eval-live-detail-table { width: 100%; }
.eval-live-run-split {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 0;
}
.eval-live-run-table-wrap {
  flex: 1 1 42%;
  min-height: 0;
  overflow: auto;
}
.eval-live-run-row-detail {
  flex: 1 1 58%;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 8px;
  padding: 0.55rem 0.65rem;
  background: var(--surface, rgba(0, 0, 0, 0.15));
}
.eval-live-run-row-detail-placeholder {
  margin: 0;
  padding: 0.35rem 0;
  font-size: 0.82rem;
}
.eval-live-result-row {
  cursor: pointer;
}
.eval-live-result-row:hover {
  background: var(--hover-bg, rgba(255, 255, 255, 0.04));
}
.eval-live-result-row.is-selected {
  background: var(--selected-bg, rgba(255, 255, 255, 0.08));
}
.eval-live-result-row:focus-visible {
  outline: 2px solid var(--accent, #7c3aed);
  outline-offset: -2px;
}
.eval-live-row-detail-inner {
  font-size: 0.82rem;
}
.eval-live-row-detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.6rem;
  margin-bottom: 0.35rem;
}
.eval-live-row-detail-callsite {
  font-size: 0.85rem;
}
.eval-live-row-detail-meta {
  margin: 0.15rem 0 0.4rem;
  font-size: 0.78rem;
}
.eval-live-row-detail-block {
  margin-top: 0.65rem;
}
.eval-live-row-detail-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #888);
  margin-bottom: 0.25rem;
}
.eval-live-row-detail-score {
  margin: 0 0 0.35rem;
}
.eval-live-row-detail-pre {
  margin: 0;
  padding: 10px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--muted) 12%, var(--surface));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.06));
  font-size: 0.75rem;
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 14rem;
  overflow: auto;
}
.eval-live-row-detail-block:last-child .eval-live-row-detail-pre {
  max-height: 18rem;
}
.eval-history-picker {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem;
  margin-top: 0.5rem;
  background: var(--surface);
  max-height: 320px;
  overflow-y: auto;
}
.eval-history-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.4rem;
}
.eval-history-picker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
}
.eval-history-picker-row:last-child { border-bottom: none; }
.eval-history-picker-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.eval-history-picker-date {
  font-size: 0.72rem;
}
.eval-history-promote-btn {
  flex-shrink: 0;
}
.eval-history-promote-btn--done {
  color: var(--muted);
  border-color: var(--border);
  background: transparent;
  opacity: 0.85;
  cursor: default;
}
.btn--xs {
  padding: 0.1rem 0.45rem;
  font-size: 0.72rem;
  border-radius: 4px;
}
.btn--danger {
  background: transparent;
  border-color: var(--danger, #f87171);
  color: var(--danger, #f87171);
}
.btn--danger:hover { background: var(--danger, #f87171); color: #fff; }
.btn--primary {
  background: var(--accent, #7c3aed);
  border-color: var(--accent, #7c3aed);
  color: #fff;
}
.btn--primary:hover { opacity: 0.85; }

/* Eval layer detail panel (right side) */
.nc-detail-container:has(> .eval-detail-panel) {
  padding: 0;
  overflow: hidden;
}
.eval-detail-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.eval-detail-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0.35rem 0.75rem;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
  flex-shrink: 0;
}
.eval-detail-top {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
  overflow: auto;
  flex-shrink: 0;
}
.eval-detail-top:empty { display: none; }
.eval-detail-bottom {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0.75rem 1rem;
}
.eval-detail-bottom:has(.eval-live-run-split) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0.55rem 0.75rem 0.75rem;
}
.eval-detail-bottom:has(.eval-live-run-split) .eval-live-run-split {
  flex: 1;
  min-height: 0;
}
.eval-detail-bottom:has(.eval-replay-detail-split) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0.55rem 0.75rem 0.75rem;
}
.eval-detail-bottom:has(.eval-replay-detail-split) .eval-replay-detail-split {
  flex: 1;
  min-height: 0;
}

/* Layer 3 — judge cards + inline detail strip */
.eval-judge-split {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  min-height: 0;
}
.eval-detail-bottom.eval-judge-split {
  overflow: hidden;
  padding: 0.45rem 0.65rem 0.75rem;
}
.eval-dashboard-section .eval-judge-split {
  min-height: min(58vh, 480px);
}
.eval-judge-cards-wrap.eval-score-cards {
  flex: 0 0 auto;
  max-height: none;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  border-top: none;
  padding: 0.35rem 0.25rem 0.15rem;
}
.eval-judge-card-detail {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 8px;
  padding: 0.45rem 0.55rem;
  background: var(--surface, rgba(0, 0, 0, 0.15));
}
.eval-judge-card-detail-placeholder {
  margin: 0;
  font-size: 0.82rem;
}
.eval-judge-inline-detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  margin-bottom: 0.4rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border, #333) 55%, transparent);
}
.eval-judge-inline-detail-id {
  font-size: 0.72rem;
  word-break: break-all;
}
.eval-judge-inline-detail-body .eval-judge-detail-entry {
  padding-left: 0;
  padding-right: 0;
}
.eval-score-card.is-selected {
  border-color: var(--accent, #7c3aed);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #7c3aed) 50%, transparent);
}

/* Compact run list items in eval explorer (match .nc-explorer-row selection) */
.eval-run-item {
  padding: 0.45rem 0.75rem;
  cursor: pointer;
  border-radius: 0;
  border-bottom: none;
}
.nc-explorer-list > .eval-run-item + .eval-run-item {
  border-top: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}
.eval-run-item:hover {
  background: color-mix(in srgb, var(--text) 6%, transparent);
}
.eval-run-item-id {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
}
.eval-run-item-stats { font-size: 0.75rem; }
.eval-run-item-date {
  font-size: 0.72rem;
  margin-top: 0.1rem;
  color: var(--text-muted, #888);
}

/* Run summary row in detail top */
.eval-run-summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
}
.eval-run-summary-date { margin-left: auto; color: var(--text-muted, #888); font-size: 0.8rem; }

/* Text fields + native selects: Segoe UI, 14px, 5px padding — wins over component-scoped rules and non-!important inline font/size. */
input:not([type='checkbox']):not([type='radio']):not([type='button']):not([type='submit']):not([type='reset']):not([type='image']):not([type='file']):not([type='hidden']):not([type='range']):not([type='color']):not(.nc-search-input),
select,
textarea,
.form-input,
button.workflow-builder-parent-pick-btn.secondary,
button.workflow-builder-node-type-pick-btn.secondary {
  font-family: var(--mp-form-input-font-family) !important;
  font-size: var(--mp-form-input-font-size) !important;
  padding: var(--mp-form-input-padding) !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
}

/* Native <select> list popup rows (supported in Chromium/WebKit/Firefox to varying degrees). */
select option,
select optgroup {
  font-family: var(--mp-form-input-font-family) !important;
  font-size: var(--mp-form-input-font-size) !important;
  font-weight: 400 !important;
}

select option {
  padding: var(--mp-form-input-padding) !important;
}

/* Custom dropdown / listbox rows — same typography + padding as text fields. */
.workflow-overflow-menu-item,
.workflow-quick-open-item,
button.node-type-item,
button.workflow-canvas-head-overflow-action,
a.workflow-canvas-head-overflow-action,
.workflow-canvas-node-actions-popover > button,
.eval-history-picker-row,
[role='listbox'] [role='option'] {
  font-family: var(--mp-form-input-font-family) !important;
  font-size: var(--mp-form-input-font-size) !important;
  padding: var(--mp-form-input-padding) !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
}

/* ============================================================
   Knowledge Base page
   ============================================================ */

/* Shell layout: reuses prompts-page-shell grid, add KB-specific
   left-width default and collapsed behaviour */
.kb-shell {
  --prompts-left-width: 300px;
}

/* Left panel */
.kb-left-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--mp-border);
}

.kb-shell .prompts-page-left {
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
}

.kb-shell .kb-entry-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.kb-reindex-status-row {
  flex-shrink: 0;
  padding: 0 12px 6px;
}

.kb-reindex-status {
  font-size: 0.75rem;
}

.kb-search-input {
  flex: 1;
  min-width: 0;
}

/* Entry list — match workflow explorer row selection */
.kb-entry-list {
  list-style: none;
  margin: 0;
  padding: 0 0.35rem 0.75rem;
  overflow-y: auto;
  flex: 1;
}

.kb-entry-list-empty {
  padding: 0.65rem 0.75rem;
  color: var(--muted);
  font-size: 0.84rem;
}

.kb-entry-list-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.8rem;
  padding: 0.2rem 0.35rem 0.2rem 0.5rem;
  margin: 0.05rem 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text);
  font-size: 0.84rem;
  cursor: pointer;
}

.kb-entry-list-item:hover {
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

.kb-entry-list-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  color: var(--muted);
}

.kb-entry-list-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.kb-source-badge {
  font-size: 0.7rem;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--mp-tag-bg, rgba(128,128,128,0.15));
  color: var(--mp-muted);
}

.kb-no-embed {
  color: var(--mp-warning, #d97706);
  font-size: 0.8rem;
}

/* Right panel */
.kb-right {
  overflow-y: auto;
  padding: 0;
}

.kb-empty-state {
  padding: 24px 20px;
}

.kb-detail {
  padding: 20px;
  max-width: 800px;
}

.kb-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.kb-detail-head-actions {
  display: flex;
  gap: 8px;
}

.kb-detail-timestamps {
  margin-bottom: 16px;
}

.kb-detail-new-title {
  margin: 0 0 16px;
}

/* Q&A panel */
.kb-ask-input {
  width: 100%;
  resize: vertical;
  min-height: 72px;
  margin-bottom: 12px;
}

.kb-ask-result {
  margin-top: 20px;
  border-top: 1px solid var(--mp-border);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kb-ask-answer-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mp-muted);
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.kb-ask-answer-text {
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0;
  white-space: pre-wrap;
}

.kb-ask-confidence {
  font-size: 0.7rem;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 10px;
  text-transform: none;
  letter-spacing: 0;
}

.kb-confidence-high { background: rgba(22,163,74,0.12); color: #16a34a; }
.kb-confidence-mid  { background: rgba(217,119,6,0.12);  color: #d97706; }
.kb-confidence-low  { background: rgba(220,38,38,0.1);   color: #dc2626; }

.kb-ask-sources-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mp-muted);
  margin: 0 0 8px;
}

.kb-ask-source-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 0.85rem;
}

.kb-ask-source-row:hover {
  background: var(--mp-hover-bg);
}

.kb-ask-source-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kb-ask-source-score {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--mp-muted);
}

.kb-detail-form .form-row {
  margin-bottom: 14px;
}

.kb-content-area {
  font-family: var(--mp-mono-font, monospace);
  font-size: 0.85rem;
  resize: vertical;
  min-height: 120px;
}

.kb-metadata-area {
  font-family: var(--mp-mono-font, monospace);
  font-size: 0.8rem;
  resize: vertical;
}

.kb-status {
  font-size: 0.85rem;
  margin: 0;
}

.kb-status.ok {
  color: var(--mp-success, #16a34a);
}

.kb-status.error {
  color: var(--mp-error, #dc2626);
}

/* Collapsed left panel */
.kb-shell.ide-left-explorer-collapsed .kb-left {
  display: none;
}

/* ── Entity Facts ──────────────────────────────────────────────────────── */

.ef-shell {
  --prompts-left-width: 260px;
}

.ef-shell .prompts-page-left {
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
}

.ef-entity-list {
  list-style: none;
  margin: 0;
  padding: 0 0.35rem 0.75rem;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.ef-entity-list-empty {
  padding: 0.65rem 0.75rem;
  color: var(--muted);
  font-size: 0.84rem;
}

.ef-entity-list-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.1rem;
  padding: 0.28rem 0.35rem 0.28rem 0.5rem;
  margin: 0.05rem 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text);
  font-size: 0.84rem;
  cursor: pointer;
}

.ef-entity-list-item:hover {
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

.ef-entity-list-item.is-active {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}

.ef-entity-list-item.is-active .ef-entity-name {
  color: var(--accent);
}

.ef-entity-list-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  font-size: 1rem;
  color: var(--muted);
}

.ef-entity-list-item.is-active .ef-entity-list-icon {
  color: var(--accent);
}

.ef-right {
  overflow-y: auto;
  padding: 0;
}
.ef-right:has(> .ef-facts-panel) {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ef-shell.ide-left-explorer-collapsed .ef-left {
  display: none;
}

/* Entity row label — stacks name + domain in list item */
.ef-entity-row-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: normal; /* allow domain line to wrap if needed */
}
.ef-entity-name {
  font-size: 0.84rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ef-entity-domain {
  font-size: 0.73rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Legacy — keep in case referenced elsewhere */
.ef-entity-row {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.ef-entity-counts {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  align-items: center;
}

/* Empty state inside detail column */
.ef-empty-state {
  padding: 24px 20px;
  font-size: 0.875rem;
}
.ef-count {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 10px;
}
.ef-count--confirmed {
  background: color-mix(in srgb, var(--mp-success, #16a34a) 12%, transparent);
  color: var(--mp-success, #16a34a);
}
.ef-count--pending {
  background: color-mix(in srgb, var(--mp-warning, #d97706) 12%, transparent);
  color: var(--mp-warning, #d97706);
}

/* Fact list */
.ef-facts-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
}
.ef-facts-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ef-facts-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Filter tabs */
.ef-filters {
  display: flex;
  gap: 2px;
  flex-wrap: nowrap;
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.ef-filters::-webkit-scrollbar { display: none; }
.ef-filter-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 4px 8px;
  font-size: 0.78rem;
  white-space: nowrap;
  cursor: pointer;
  color: var(--muted);
  transition: color 0.15s, border-color 0.15s;
}
.ef-filter-btn:hover { color: var(--text); }
.ef-filter-btn.is-active {
  color: var(--text);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

/* Fact rows */
.ef-fact-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 0 0 10px;
}
.ef-fact-list .ef-empty-state {
  padding: 1.25rem;
}
.ef-fact-row {
  border-bottom: 1px solid color-mix(in srgb, var(--border) 35%, transparent);
}
.ef-fact-row:last-child {
  border-bottom: none;
}
.ef-fact-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 1.25rem 10px 0;
  min-height: 2.75rem;
}
.ef-fact-line::before {
  content: '';
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--muted) 70%, var(--text));
  align-self: center;
}
.ef-fact-row--confirmed .ef-fact-line::before {
  background: var(--mp-success, #16a34a);
}
.ef-fact-row--pending .ef-fact-line::before {
  background: color-mix(in srgb, var(--muted) 55%, var(--text));
}
.ef-fact-row--needs_revision .ef-fact-line::before {
  background: var(--mp-warning, #d97706);
}
.ef-fact-row--revised .ef-fact-line::before {
  background: var(--accent);
}
.ef-fact-text {
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;
  margin: 0;
  line-height: 1.55;
  cursor: default;
}
.ef-fact-row--pending .ef-fact-text { color: color-mix(in srgb, var(--text) 88%, var(--muted)); }
.ef-fact-row--needs_revision .ef-fact-text { color: color-mix(in srgb, var(--mp-warning, #d97706) 70%, var(--text)); }
.ef-fact-hint {
  font-size: 0.8rem;
  font-style: italic;
  margin: 0;
  padding: 0 1.25rem 10px;
}
.ef-fact-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: nowrap;
}
.ef-delete-fact-btn {
  min-width: 2rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* Status badges */
.ef-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ef-badge--pending {
  background: color-mix(in srgb, var(--mp-muted, #6b7280) 12%, transparent);
  color: var(--mp-muted, #6b7280);
}
.ef-badge--confirmed {
  background: color-mix(in srgb, var(--mp-success, #16a34a) 12%, transparent);
  color: var(--mp-success, #16a34a);
}
.ef-badge--needs-revision {
  background: color-mix(in srgb, var(--mp-warning, #d97706) 12%, transparent);
  color: var(--mp-warning, #d97706);
}
.ef-badge--revised {
  background: color-mix(in srgb, var(--mp-accent, #2563eb) 12%, transparent);
  color: var(--mp-accent, #2563eb);
}

/* Diff block */
.ef-fact-diff {
  margin: 0 1.25rem 10px;
  background: var(--mp-surface-2, #f9fafb);
  border-radius: 6px;
  overflow: hidden;
  font-size: 0.85rem;
}
.ef-diff-row {
  display: flex;
  gap: 10px;
  padding: 8px 12px;
}
.ef-diff-row--old { background: color-mix(in srgb, #ef4444 6%, transparent); }
.ef-diff-row--new { background: color-mix(in srgb, #16a34a 6%, transparent); }
.ef-diff-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  opacity: 0.5;
  width: 44px;
  flex-shrink: 0;
  padding-top: 1px;
}
.ef-diff-text { flex: 1; line-height: 1.5; }

/* Modal */
.ef-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.ef-modal {
  background: var(--surface);
  border-radius: 12px;
  padding: 24px;
  width: 520px;
  max-width: calc(100vw - 32px);
  max-height: 80vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.ef-modal-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}
.ef-modal-fact-preview {
  font-size: 0.875rem;
  background: color-mix(in srgb, var(--muted) 8%, var(--surface));
  border-radius: 6px;
  padding: 10px 12px;
  margin: 0;
  line-height: 1.5;
  border-left: 3px solid var(--border);
}
.ef-modal-hint { min-height: 72px; }
.ef-modal-result { display: flex; flex-direction: column; gap: 0; border-radius: 6px; overflow: hidden; }
.ef-modal-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.ef-modal-status { font-size: 0.82rem; }

/* Add fact line range row */
.ef-line-range-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ef-line-range-row .form-label { margin: 0; white-space: nowrap; }
.ef-line-range-row input { width: 80px; }

/* ── Entity detail panel ─────────────────────────────────────────────────── */

.ef-detail-wrap {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 800px;
}

.ef-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.ef-detail-domain {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ef-detail-header-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.ef-detail-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.ef-detail-section:last-child {
  border-bottom: none;
}

.ef-section-title {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
  color: var(--muted);
}

.ef-section-desc {
  font-size: 0.85rem;
  margin: 0;
}

.ef-save-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ef-inline-status {
  font-size: 0.82rem;
}

/* Sources list */
.ef-sources-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ef-sources-empty {
  font-size: 0.85rem;
  margin: 0;
}

.ef-source-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.ef-source-type {
  width: 110px;
  flex-shrink: 0;
}

.ef-source-path {
  flex: 1;
  font-size: 0.82rem;
  font-family: var(--mp-mono, monospace);
}

.ef-source-remove {
  flex-shrink: 0;
  padding: 0 8px;
}

/* Extract section */
.ef-model-section .prompts-detail-model-row {
  margin-bottom: 0;
}

.ef-extract-section {
  border-bottom: none;
}

.ef-extract-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
}

.ef-extract-status {
  font-size: 0.85rem;
  line-height: 1.5;
}

.ef-extract-status.ok {
  color: var(--mp-success, #16a34a);
}

.ef-extract-status.error {
  color: var(--mp-error, #dc2626);
}

.ef-extract-results {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 0.82rem;
}

.ef-extract-results li {
  margin-bottom: 2px;
}

/* ── Knowledge card section ─────────────────────────────────────────────── */

.ef-card-section {
  border-bottom: none;
}

.ef-card-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ef-card-empty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.ef-card-editor-wrap {
  display: flex;
  flex-direction: column;
}

.ef-card-textarea {
  min-height: 420px;
  max-width: 100%;
  resize: vertical;
  font-family: var(--font-mono, monospace);
  font-size: 0.8rem;
  line-height: 1.6;
}

.ef-card-preview {
  min-height: 200px;
}

/* Facts header back button */
.ef-delete-fact-btn {
  margin-left: auto;
  opacity: 0.5;
}

.ef-delete-fact-btn:hover {
  opacity: 1;
}

/* AI Metrics dashboard */
.ai-metrics-page {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 1.25rem;
}
.ai-metrics-page::-webkit-scrollbar {
  display: none;
}

.ai-metrics-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.ai-metrics-head h1 {
  margin: 0;
}

.ai-metrics-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.ai-metrics-range-btns {
  display: flex;
  gap: 0.2rem;
}

.ai-metrics-range-btn {
  background: var(--panel);
  color: var(--text);
  opacity: 0.65;
}

.ai-metrics-range-btn.is-active {
  background: var(--accent);
  color: var(--button-fg);
  opacity: 1;
}

.ai-metrics-granularity-select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  color: var(--text);
  font-size: 0.78rem;
  padding: 0.25em 0.6em;
  cursor: pointer;
}

.ai-metrics-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}

.ai-metrics-tab {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0.45rem 0.85rem;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.85rem;
  transition: color 0.1s;
}

.ai-metrics-tab:hover {
  color: var(--text);
}

.ai-metrics-tab.is-active {
  color: var(--accent);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--accent);
}

.ai-metrics-chart-panel {
  padding: 1rem 1rem 0.5rem;
}

.ai-metrics-loading {
  min-height: 1.2rem;
}

.ai-metrics-chart-wrap {
  position: relative;
  height: 280px;
}

.ai-metrics-autorefresh-btn {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
}
.ai-metrics-autorefresh-btn.is-active {
  background: var(--accent);
  color: var(--button-fg);
  border-color: var(--accent);
}

.ai-metrics-retry-btn {
  margin-left: 0.5rem;
}

.ai-metrics-panels-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 0.75rem;
  min-width: 0;
}

.ai-metrics-breakdown-panel,
.ai-metrics-model-panel {
  padding: 1rem;
  min-width: 0;
}

.ai-metrics-breakdown-title {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
  opacity: 0.8;
}

.ai-bd-scroll {
  overflow-x: auto;
}

.ai-bd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.ai-bd-th {
  padding: 0.45rem 0.75rem;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 0.78rem;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  opacity: 0.7;
}

.ai-bd-th:hover,
.ai-bd-th.is-sorted {
  opacity: 1;
}

.ai-bd-sort-arrow {
  font-size: 0.7rem;
  opacity: 0.9;
}
.ai-bd-sort-arrow--idle {
  opacity: 0.25;
}

.ai-bd-th--right {
  text-align: right;
}

.ai-bd-row:hover td {
  background: var(--surface-alt, rgba(0,0,0,0.04));
}

.ai-bd-td {
  padding: 0.45rem 0.75rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-bd-td--right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ai-bd-total-row td {
  border-top: 2px solid var(--border);
  border-bottom: none;
  background: var(--panel);
}


.ai-model-provider-bars {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}

.ai-model-provider-row {
  display: grid;
  grid-template-columns: 7rem 1fr 4rem 2.5rem;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
}

.ai-model-provider-name {
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-model-provider-bar-wrap {
  background: var(--border);
  border-radius: 99px;
  height: 8px;
  overflow: hidden;
}

.ai-model-provider-bar {
  height: 100%;
  border-radius: 99px;
  transition: width 0.3s ease;
  min-width: 2px;
}

.ai-model-provider-cost {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ai-model-provider-pct {
  text-align: right;
  color: var(--muted);
  font-size: 0.75rem;
}

.ai-model-provider-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.4rem;
  flex-shrink: 0;
}


.ef-line-input {
  width: 72px;
}