/* R2-BUG-03: Inter, self-hosted (SIL Open Font License 1.1, see
   static/fonts/inter/LICENSE.txt). One variable file per style. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter/InterVariable.2bf3d951bf9d.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter/InterVariable-Italic.8d1dc86da258.woff2") format("woff2");
}

/* Breakpoints (DS-01). Media queries can't use custom properties, so use
   these numbers and nothing else:
     phone   max-width: 640px
     tablet  max-width: 900px   (min-width: 901px for "above tablet")
     laptop  max-width: 1120px
   The public landing page also has a small-phone step at 430px. The JS
   uses the same values (matchMedia 640 / 900). */
:root {
  --bg: #0e0f13;
  --panel: #15171d;
  --panel-2: #1c1f27;
  /* R2-UI-05: borders at about 7% white, so a lighter surface reads as
     raised instead of every box getting the same grey outline. */
  --border: rgba(255, 255, 255, 0.075);
  --text: #e7e9ee;
  --muted: #8b919e;
  --accent: #ff7a45;
  --accent-2: #c061ff;
  --link: #7cc7ff;
  --ok: #38d39f;
  --warn: #ffc857;
  --err: #ff5d6c;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Visual polish 1.2: the one type scale. No other font sizes (a test
     in aipipeline/tests_css.py checks main.css), never nested em.
       xs 12  badges, counts, timestamps, hints
       sm 13  secondary text, table meta, chips
       base 14  body, buttons, inputs, menus, nav
       md 16  card titles, chat messages, dialog titles, section headings
       lg 20  page sub-headings
       xl 28  page titles */
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.75rem;
  /* Weights: text, buttons/tabs/nav, titles, page titles. */
  --fw-text: 400;
  --fw-ui: 500;
  --fw-title: 600;
  --fw-page: 700;
  /* 1.3: control heights. md is the default; sm for inline row actions
     and chips that act as buttons; lg only for the main call to action
     in a hero or dialog footer. Controls on one row share a height. */
  --h-sm: 28px;
  --h-md: 36px;
  --h-lg: 40px;
  /* 1.4: a 4 px spacing grid. Cards: 16 px padding; grids: 16 px gap. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-sm: 6px;   /* controls */
  --radius-md: 10px;  /* cards, dialogs, menus, the composer */
  --radius-pill: 999px;  /* pills, badges, avatars */
  --radius-lg: var(--radius-md);
  --focus-ring: 2px solid var(--accent);
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.45);
  --scrollbar-track: rgba(255,255,255,0.035);
  --scrollbar-thumb: #343a46;
  --scrollbar-thumb-hover: #465061;
  /* Status colours (DS-03): one meaning per colour everywhere. */
  --status-success: var(--ok);
  --status-warning: var(--warn);
  --status-error: var(--err);
  --status-info: var(--link);
  --status-neutral: var(--muted);
  /* R2-BUG-02: native controls, scrollbars and pickers render dark, and
     checkboxes, radios and sliders use the accent. */
  color-scheme: dark;
  accent-color: var(--accent);
}

/* A small status pill: <span data-tone="success|warning|error|info|neutral">. */
[data-tone] { --tone: var(--status-neutral); }
[data-tone="success"] { --tone: var(--status-success); }
[data-tone="warning"] { --tone: var(--status-warning); }
[data-tone="error"] { --tone: var(--status-error); }
[data-tone="info"] { --tone: var(--status-info); }

* { box-sizing: border-box; }
html {
  margin: 0;
  padding: 0;
  height: 100%;
  scrollbar-gutter: stable;
}
body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font-sans);
  /* Inter's single-storey a and open digits read better at UI sizes. */
  font-feature-settings: "cv11", "ss01";
  font-size: var(--fs-base);
  font-weight: var(--fw-text);
  background: var(--bg);
  color: var(--text);
}
/* Visual polish 1.2: headings on the scale (page title, sub-heading,
   section/card title, small heading). */
h1 { font-size: var(--fs-xl); font-weight: var(--fw-page); line-height: 1.2; }
h2 { font-size: var(--fs-lg); font-weight: var(--fw-title); line-height: 1.3; }
h3 { font-size: var(--fs-md); font-weight: var(--fw-title); line-height: 1.35; }
h4, h5, h6 { font-size: var(--fs-base); font-weight: var(--fw-title); }
small, .small { font-size: var(--fs-sm); }
/* Numbers that sit in columns or change in place don't jiggle. */
table, time, .badge-cost, .cost-totals, .zoom-readout, .run-started, .file-meta,
.uq-meta, .run-step-row, .notif-time, .api-token-table, .run-rows,
.chip, .pill, .assistant-usage, .node-test-status, .suggestion-card-effect, .run-topbar-meta { font-variant-numeric: tabular-nums; }
button, input, select, textarea { font-family: inherit; font-size: var(--fs-base); }
/* Base look for every text-like control. :where() keeps it at zero
   specificity, so any component rule still wins; it only replaces the
   browser's white default for inputs nothing else styles (R2-BUG-02). */
:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"],
       input[type="password"], input[type="url"], input[type="tel"], input[type="number"],
       input[type="date"], input[type="time"], input[type="datetime-local"], select, textarea) {
  padding: 0.45rem 0.75rem;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--fs-base);
}
:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"],
       input[type="password"], input[type="url"], input[type="tel"], input[type="number"],
       input[type="date"], input[type="time"], input[type="datetime-local"], select) {
  min-height: var(--h-md);
}
:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"],
       input[type="password"], input[type="url"], input[type="tel"], input[type="number"],
       input[type="date"], input[type="time"], input[type="datetime-local"], select, textarea):focus {
  border-color: #59657b;
  outline: 2px solid rgba(124, 199, 255, 0.16);
  outline-offset: 0;
}
:where(input, textarea)::placeholder { color: var(--muted); opacity: 0.85; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.muted { color: var(--muted); }

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

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

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

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

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

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

/* Navigation */
.topnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--text);
}
.brand .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}
.navlinks { display: flex; align-items: center; gap: 1rem; }
.navlinks a { color: var(--text); }
.navlinks .me { color: var(--muted); font-size: var(--fs-base); }

.nav-left, .nav-right { display: flex; align-items: center; gap: 0.75rem; }
.nav-right a { color: var(--text); }

/* Hamburger button */
.nav-toggle {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.nav-toggle:hover { background: rgba(255,255,255,0.04); border-color: #3a3f4b; }
.nav-toggle[aria-expanded="true"] { background: rgba(255,255,255,0.06); border-color: #3a3f4b; }

/* User avatar button */
.user-btn {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  border-radius: var(--radius-pill);
  transition: box-shadow 120ms ease;
}
.user-btn:focus-visible { outline: 2px solid rgba(124,199,255,0.42); outline-offset: 3px; }
.user-avatar {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, rgba(255,122,69,0.95), rgba(192,97,255,0.95));
  color: #1a0f0a;
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
}
.user-avatar.small { width: 28px; height: 28px; font-size: var(--fs-xs); }
.user-btn[aria-expanded="true"] { box-shadow: 0 0 0 2px rgba(124,199,255,0.32); }

/* Pop-out menus shared shell */
/* Placement only; the look is the shared Menu block (R2-UI-02). */
.nav-menu, .user-menu {
  position: fixed;
  top: 56px;
  z-index: 40;
  display: flex;
  flex-direction: column;
}
.nav-menu { left: 1rem; }
.user-menu { right: 1rem; min-width: 260px; }
.nav-menu[hidden], .user-menu[hidden] { display: none; }

/* User menu specifics */
.user-menu-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.user-menu-head strong { display: block; font-size: var(--fs-base); }
.user-menu-head .muted { font-size: var(--fs-xs); word-break: break-all; }
.user-menu-meta { min-width: 0; }
.menu-form { margin: 0; }

@media (max-width: 640px) {
  .nav-menu, .user-menu { left: 0.5rem; right: 0.5rem; min-width: 0; }
}

/* Main links inline on wide screens; the hamburger menu stays for narrow ones. */
.nav-links { display: none; align-items: center; gap: 0.15rem; margin-left: 0.6rem; }
.nav-links a {
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-base);
}
.nav-links a:hover { background: rgba(255,255,255,0.05); text-decoration: none; }
.nav-links a[aria-current="page"] { background: rgba(255,255,255,0.08); box-shadow: inset 0 -2px 0 var(--accent); }
@media (min-width: 901px) {
  .nav-links { display: flex; }
  .nav-toggle { display: none; }
}

/* General layout */
.wrap { max-width: 1100px; margin: 1.5rem auto; padding: 0 1.25rem; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.grid {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1rem;
  box-shadow: 0 1px 0 rgba(255,255,255,0.02);
}
.cards {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 1rem;
  /* Keep sparse lists at the same card width as full lists. `auto-fit`
     collapses unused tracks, making a single admin-assigned pipeline stretch
     across the whole page; `auto-fill` preserves the normal grid columns. */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.cards.catalog-cards {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  justify-content: start;
}
.cards > li[hidden] { display: none; }
/* A search box over a list ([data-list-filter], AGT-05). */
.list-filter { margin: 0 0 1rem; max-width: 420px; }
.list-filter-input {
  width: 100%; padding: 0.5rem 0.7rem; background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit;
}
.list-filter-empty { margin: 0.6rem 0 0; }
.agent-model-line, .cards .agent-key-line { margin: 0 0 0.2rem; font-size: var(--fs-base); }
/* Visual polish 8: "Used in 1 pipeline" and "Details" are one kind of
   Disclosure; "Not used…" matches them. */
.agent-usage { margin: 0; }
.agent-usage ul { margin: var(--space-1) 0 0; padding-left: 1.1rem; display: grid; gap: 2px; font-size: var(--fs-base); }
.agent-usage-none { margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: var(--h-sm); }
/* Review 2.3: agent cards lead with what the agent can do. */
.agent-abilities { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; }
.agent-abilities .chip { margin: 0; }
.card-desc-empty { margin: 0; font-size: var(--fs-base); }
.agent-card-foot { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-1) var(--space-3); margin-top: auto; padding-top: var(--space-1); }
.agent-card-foot .agent-usage, .agent-card-foot .agent-usage-none { margin: 0; }
.agent-details[open] { flex-basis: 100%; }
.agent-details-list { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.2rem 0.75rem; margin: 0.4rem 0 0; padding: 0.5rem 0.65rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--panel-2); }
.agent-details-list dt { color: var(--muted); }
.agent-details-list dd { margin: 0; overflow-wrap: anywhere; }
.stacked-sections {
  display: grid;
  gap: 1rem;
}
/* Cards inside a .cards grid use column flex so a trailing affordance
   (e.g. .row-toggle on the Node library page) sticks to the bottom of
   the card regardless of how long the description above it is. Cards
   in each row line up at the bottom. */
.cards li.card {
  display: flex;
  flex-direction: column;
}
.cards li.card h3 { margin: 0 0 0.35rem; }
.row-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.6rem;
  cursor: pointer;
  user-select: none;
}
/* Generic card-action row — used by every card list (Agents, Tools,
   Functions, Pipelines). Single flex row, sticks to the bottom of the
   card so each row's buttons line up across the grid.
   Two-button rows (Edit + Delete) split half/half via the :first-child +
   :nth-last-child(2) combo, which only matches when there are exactly two
   children. Cards with 3+ actions (e.g. pipeline-card with Open /
   Schedules / Triggers / Delete) keep natural widths and wrap via the
   more-specific .card.pipeline-card .card-actions rule below. */
.card-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.6rem;
  flex-wrap: wrap;
}
.card-actions > .btn:first-child:nth-last-child(2),
.card-actions > .btn:first-child:nth-last-child(2) ~ .btn {
  flex: 1 1 0;
}
/* DS-06: Edit fills the row; Delete lives in the ⋯ menu beside it. */
.card-actions:has(> details.action-menu) > .btn { flex: 1 1 0; }
.card-actions > details.action-menu { flex: 0 0 auto; }
.card.pipeline-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.card.pipeline-card .card-body { display: flex; flex-direction: column; gap: 0.35rem; }
.card.pipeline-card .card-body > :first-child { margin-top: 0; }
.card.pipeline-card .card-body p { margin: 0; }
.card.pipeline-card .card-actions {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding-top: 0.4rem;
}
.pipeline-admin-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.pipeline-admin-meta .badge { margin-left: 0; }
.rows { list-style: none; padding: 0; margin: 0; }
.rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}
/* First cell (the link/name) takes the slack so any trailing meta
   — status pill, timestamp — groups together on the right. */
.rows li > a:first-child { margin-right: auto; }

/* Forms */
form.stacked label, form.stacked p > label {
  display: block;
  color: var(--muted);
  margin-bottom: 6px;
}
form.stacked {
  display: grid;
  gap: var(--space-4);
}
main.wrap > form.stacked {
  max-width: 720px;
  margin-top: 1rem;
  padding: 1rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 0 rgba(255,255,255,0.02);
}
form.stacked p {
  margin: 0;
}
/* Keep numeric inputs visually consistent across browsers. Values remain
   keyboard-editable and retain their min/max/step validation. */
input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Custom single-select control. The native select remains in the form so
   browser submission, validation, and existing change handlers keep working. */
.custom-select {
  position: relative;
  width: 100%;
}
.custom-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.custom-select-trigger {
  width: 100%;
  min-height: var(--h-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.custom-select-trigger:hover:not(:disabled),
.custom-select.is-open .custom-select-trigger {
  border-color: var(--accent);
}
.custom-select-trigger:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 65%, transparent);
  outline-offset: 1px;
}
.custom-select-trigger:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.custom-select-chevron.icon {
  width: 16px;
  height: 16px;
  color: var(--muted);
  transition: transform 120ms ease;
}
.custom-select.is-open .custom-select-chevron { transform: rotate(180deg); }
.custom-select-menu {
  position: absolute;
  z-index: 1000;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  max-height: min(280px, 45vh);
  overflow-y: auto;
  padding: 0.35rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel);
  box-shadow: 0 16px 40px rgba(0,0,0,0.42);
}
.custom-select-menu.is-portaled {
  position: fixed;
  inset: auto;
}
.custom-select-option {
  width: 100%;
  padding: 0.55rem 0.65rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.custom-select-option:hover:not(:disabled),
.custom-select-option:focus-visible {
  outline: none;
  background: rgba(255, 113, 67, 0.12);
}
.custom-select-option.is-selected {
  background: rgba(255, 113, 67, 0.18);
  color: var(--accent);
}
.custom-select-option:disabled { color: var(--muted); cursor: not-allowed; }

/* Shared tooltip treatment. Use data-tooltip instead of the browser's title
   bubble so placement, timing, colour, and typography are consistent. */
[data-tooltip] {
  position: relative;
}
[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  z-index: 2000;
  width: max-content;
  max-width: min(300px, calc(100vw - 2rem));
  padding: 0.5rem 0.65rem;
  border: 1px solid rgba(124, 199, 255, 0.24);
  border-radius: var(--radius-sm);
  background: rgba(18, 20, 27, 0.98);
  color: var(--text);
  box-shadow: 0 14px 34px rgba(0,0,0,0.38);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  /* Not drawn (and taking no room, so it can't widen the page, R2-BUG-04)
     until hover or focus. */
  display: none;
  pointer-events: none;
  transform: translate(-50%, 0);
}
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::before {
  display: block;
}
/* Top-navigation controls have no viewport space above them. */
.topnav [data-tooltip]::before {
  top: calc(100% + 9px);
  bottom: auto;
  transform: translate(-50%, 4px);
}
.topnav [data-tooltip]:hover::before,
.topnav [data-tooltip]:focus-visible::before {
  transform: translate(-50%, 0);
}
/* JavaScript promotes shared tooltips to a body-level fixed layer so they are
   never clipped by scroll panels, modals, or the pipeline canvas. */
.has-portal-tooltips [data-tooltip]::before,
.has-portal-tooltips .assistant-context-icon-toggle::after,
.has-portal-tooltips .assistant-usage-summary::after {
  display: none !important;
}
.viewport-tooltip {
  position: fixed;
  z-index: 100000;
  width: max-content;
  max-width: min(300px, calc(100vw - 16px));
  padding: 0.5rem 0.65rem;
  border: 1px solid rgba(124, 199, 255, 0.24);
  border-radius: var(--radius-sm);
  background: rgba(18, 20, 27, 0.98);
  color: var(--text);
  box-shadow: 0 14px 34px rgba(0,0,0,0.38);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  pointer-events: none;
}
form.stacked input[type="text"],
form.stacked input[type="email"],
form.stacked input[type="password"],
form.stacked input[type="url"],
form.stacked input[type="number"],
form.stacked input[type="file"],
form.stacked select,
form.stacked textarea,
.chat-form textarea,
.chat-form input[type="text"],
.params-tools input,
.param-row input,
.param-row select {
  width: 100%;
  padding: 0.55rem 0.7rem;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
}
form.stacked input:focus,
form.stacked select:focus,
form.stacked textarea:focus,
.chat-form textarea:focus,
.chat-form input[type="text"]:focus,
.params-tools input:focus,
.param-row input:focus,
.param-row select:focus {
  border-color: #59657b;
  outline: 2px solid rgba(124, 199, 255, 0.16);
  outline-offset: 0;
}
/* R2-UI-05: a text area holds prose (a request, a description) in the
   UI font; code, JSON and schema fields (spellcheck off) are monospace. */
form.stacked textarea { font-family: inherit; line-height: 1.45; }
form.stacked textarea[spellcheck="false"],
textarea.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.form-field {
  display: grid;
  gap: 0.35rem;
}
.helptext {
  display: block;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.4;
}
.errorlist {
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0;
  color: #ff9aa4;
  font-size: var(--fs-base);
}
.form-errors {
  padding: 0.7rem 0.85rem;
  border: 1px solid #5a1f29;
  border-radius: var(--radius-md);
  background: rgba(255, 93, 108, 0.08);
}
/* Global checkbox restyle — matches the step-toggle's custom box look so
   every checkbox in the app reads the same: dark square that turns accent-
   orange with a dark checkmark when checked. Per-spot rules with higher
   specificity (e.g. .step-toggle input) still win, so anything that hides
   or wraps the native input keeps working. */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin: 0;
  border: 1px solid #3a4150;
  border-radius: var(--radius-sm);
  background-color: var(--panel-2);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  cursor: pointer;
  vertical-align: middle;
  transition: background-color 120ms ease, border-color 120ms ease;
}
input[type="checkbox"]:hover:not(:disabled) { border-color: #59657b; }
input[type="checkbox"]:focus-visible {
  outline: 2px solid rgba(124, 199, 255, 0.32);
  outline-offset: 1px;
}
input[type="checkbox"]:checked {
  background-color: var(--accent);
  border-color: var(--accent);
  /* Inline SVG checkmark (stroke #1a0f0a, same near-black the step-toggle
     uses for contrast on the orange fill). Embedded as a data URI so the
     check renders without depending on ::after pseudo-element support on
     <input>, which is unreliable across browsers. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 6.5l2.5 2.5L10 3.5' fill='none' stroke='%231a0f0a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
input[type="checkbox"]:indeterminate {
  background-color: var(--accent);
  border-color: var(--accent);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 6h6' fill='none' stroke='%231a0f0a' stroke-width='2' stroke-linecap='round'/></svg>");
}
input[type="checkbox"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.checkbox-field label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  color: var(--text);
}
/* The global rule already sizes + colors this — the field-specific block is
   kept empty to anchor the .checkbox-field hierarchy in case a future tweak
   needs it. */
.checkbox-field input[type="checkbox"] { /* inherits the global look */ }
.form-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}
.form-actions.split {
  justify-content: space-between;
}
[hidden] { display: none !important; }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
/* Visual polish 1.5: one button family.
     .btn               secondary: the dark filled look
     .btn.primary       orange, at most one per view; every Run button
     .btn.ghost         no background: icon buttons and toolbar actions
     .btn.danger        destructive
     .link-btn          a link, only inside running text
   Heights (1.3): md 36 px by default, .small 28 px (inline row actions,
   chips that act as buttons), .large 40 px (the main call to action in a
   hero or dialog footer). .icon-btn makes it square, with an 18 px icon. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--h-md);
  padding: 0 14px;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--fs-base);
  font-weight: var(--fw-ui);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}
.btn:hover { background: #262a33; text-decoration: none; }
.btn:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn .icon { width: 16px; height: 16px; }
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #1a0f0a;
}
.btn.primary:hover { background: #ff8b5d; border-color: #ff8b5d; }
.btn.primary:disabled:hover { background: var(--accent); border-color: var(--accent); }
.btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text);
}
.btn.ghost .icon, .btn.ghost.icon-btn { color: var(--muted); }
.btn.ghost:hover, .btn.ghost[aria-expanded="true"], details[open] > summary.btn.ghost {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}
.btn.ghost:hover .icon, .btn.ghost[aria-expanded="true"] .icon, details[open] > summary.btn.ghost .icon { color: var(--text); }
.btn.danger { color: var(--err); border-color: #3a2228; }
.btn.danger:hover { background: #2a1a1f; }
.btn.small { min-height: var(--h-sm); padding: 0 10px; gap: 4px; white-space: nowrap; }
.btn.large { min-height: var(--h-lg); padding: 0 18px; }
.btn.icon-btn, .icon-btn { width: var(--h-md); min-width: var(--h-md); padding: 0; justify-content: center; line-height: 1; }
.btn.icon-btn.small { width: var(--h-sm); min-width: var(--h-sm); }
.icon-btn .icon { width: 18px; height: 18px; }
.btn.small.icon-btn .icon { width: 16px; height: 16px; }

/* Visual polish 1.6: Badge. Status, counts and short labels ("Completed",
   "v3 live", "3 steps", "Used by 2"): 12 px text, 20 px tall, a pill.
     <span class="badge" data-tone="success|warning|error|info|neutral">
   .chip, .run-state and the older .badge-ok/-info/-warn/-live use it. */
.badge, .chip, .run-state {
  --tone: var(--status-neutral);
  /* inline-block, not flex: badges hold mixed text ("1.0k in / 100 out")
     whose spaces a flex box would drop. */
  display: inline-block;
  height: 20px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--tone) 32%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--tone) 10%, transparent);
  color: var(--tone);
  font-size: var(--fs-xs);
  font-weight: var(--fw-ui);
  line-height: 18px;
  white-space: nowrap;
  vertical-align: middle;
}
.badge[data-tone="success"], .badge-ok, .run-state.run-completed { --tone: var(--status-success); }
.badge[data-tone="warning"], .badge-warn, .run-state.run-cancelled { --tone: var(--status-warning); }
.badge[data-tone="error"], .run-state.run-failed { --tone: var(--status-error); }
.badge[data-tone="info"], .badge-info, .chip-info, .run-state.run-running { --tone: var(--status-info); }
.badge-live { --tone: var(--accent); }
.run-state.run-paused { --tone: var(--accent-2); }
:is(.badge, .chip, .run-state) .icon { width: 14px; height: 14px; margin-right: 4px; vertical-align: -3px; }
a:is(.badge, .chip):hover { text-decoration: none; filter: brightness(1.15); }

/* 1.6: Disclosure. A chevron and a label, the same look for "How it
   works", "Need help?", "Technical details", "Details" and the like:
     <details class="disclosure"><summary>Label</summary>…</details>
   The chevron (chevron-right from the icon set) turns 90° when open. The
   older disclosures, panels and the JSON tree below share the chevron; no
   <details> shows the browser's own marker. */
.disclosure > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--h-sm);
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-ui);
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.disclosure > summary:hover { color: var(--text); }
:is(.builder-create-panel, .inm-existing-files, .op-block, .context-approval-history, .jt) > summary { list-style: none; }
.help-glossary > summary h4 { margin: 0; font: inherit; }
:is(.disclosure, .step-output, .ndm-retry-accordion, .prompt-diff-section, .proposal-details, .builder-create-panel, .inm-existing-files, .op-block, .context-approval-history, .jt) > summary::-webkit-details-marker { display: none; }
:is(.disclosure, .step-output, .ndm-retry-accordion, .prompt-diff-section, .proposal-details, .builder-create-panel, .inm-existing-files, .op-block, .context-approval-history, .jt) > summary::before {
  content: "";
  display: inline-block;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 0 4px 0 0;
  border: 0;
  background: currentColor;
  -webkit-mask: var(--i-chevron-right) center / contain no-repeat;
  mask: var(--i-chevron-right) center / contain no-repeat;
  vertical-align: -3px;
  transform: none;
  transition: transform 120ms ease;
}
.disclosure > summary::before { margin: 0; }
:is(.disclosure, .step-output, .ndm-retry-accordion, .prompt-diff-section, .proposal-details, .builder-create-panel, .inm-existing-files, .op-block, .context-approval-history, .jt)[open] > summary::before {
  transform: rotate(90deg);
}

/* 1.6: Textarea. No resize grip; it grows with the text up to about 8
   lines (never below its rows), then scrolls. Chrome sizes it natively;
   ui_controls.js does it elsewhere. data-fixed-size opts out. */
textarea:not([data-fixed-size]) { resize: none; }
textarea[rows="1"] { --rows: 1; } textarea[rows="2"] { --rows: 2; } textarea[rows="3"] { --rows: 3; } textarea[rows="4"] { --rows: 4; } textarea[rows="5"] { --rows: 5; } textarea[rows="6"] { --rows: 6; } textarea[rows="7"] { --rows: 7; } textarea[rows="8"] { --rows: 8; } textarea[rows="9"] { --rows: 9; } textarea[rows="10"] { --rows: 10; } textarea[rows="11"] { --rows: 11; } textarea[rows="12"] { --rows: 12; } textarea[rows="13"] { --rows: 13; } textarea[rows="14"] { --rows: 14; } textarea[rows="15"] { --rows: 15; } textarea[rows="16"] { --rows: 16; } textarea[rows="17"] { --rows: 17; } textarea[rows="18"] { --rows: 18; } textarea[rows="19"] { --rows: 19; } textarea[rows="20"] { --rows: 20; }
@supports (field-sizing: content) {
  textarea:not([data-fixed-size]) {
    field-sizing: content;
    min-height: calc(var(--rows, 2) * 1.45em + 1rem);
    max-height: calc(max(var(--rows, 2), 8) * 1.45em + 1rem);
    line-height: 1.45;
  }
}

/* Icons inline in a line of text: a small gap after, on the baseline. */
:is(.lead-icon, .proposal-state .icon, .proposal-rename .icon, .proposal-check-title .icon, .proposal-schedule-state .icon,
    .lint-sev .icon, .msg-resolved .icon, .builder-trace-banner .label .icon, #node-panel-saved .icon, .node-chip .icon,
    .ra-num .icon) { width: 1em; height: 1em; margin-right: 4px; vertical-align: -0.15em; }
/* ...and after it: "View detail ↗". */
.builder-trace-banner .detail-link .icon { width: 1em; height: 1em; margin-left: 4px; vertical-align: -0.15em; }
.builder-trace-banner :is(.continue-btn, .cancel-btn) { display: inline-flex; align-items: center; gap: 4px; }
.trace-chip .icon { width: 12px; height: 12px; }

/* 1.1: icon sizes. 16 in buttons and chips, 18 in icon-only buttons, 20
   in the navigation ({% icon "x" 18 %} adds .is-18). */
.icon.is-12 { width: 12px; height: 12px; }
.icon.is-14 { width: 14px; height: 14px; }
.icon.is-16 { width: 16px; height: 16px; }
.icon.is-18 { width: 18px; height: 18px; }
.icon.is-20 { width: 20px; height: 20px; }
.btn.full {
  width: 100%;
  text-align: center;
}
.inline-link {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.inline-link:hover {
  color: var(--link-hover);
  text-decoration: underline;
}
.inline-link:focus-visible {
  outline: 2px solid rgba(124, 199, 255, 0.42);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Auth */
.public-page {
  --landing-nav-h: 74px;
  background: #0e0f13;
}
@supports selector(html:has(body.public-page)) {
  html:has(body.public-page) {
    overflow-y: scroll;
  }
}
.auth-main {
  min-height: calc(100vh - 61px);
  max-width: none;
  margin: 0;
  padding: 0;
}
.auth-page .auth-main {
  min-height: 100vh;
  padding-top: var(--landing-nav-h);
}
.auth-page .auth-shell {
  min-height: calc(100vh - var(--landing-nav-h));
}
.auth-shell {
  width: min(980px, calc(100% - 2rem));
  min-height: calc(100vh - 61px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
  align-items: center;
  gap: 2rem;
  padding: 2rem 0;
}
.auth-shell.compact {
  grid-template-columns: minmax(320px, 460px);
  justify-content: center;
}
.auth-copy {
  max-width: 460px;
}
.auth-copy .eyebrow {
  display: inline-block;
  margin-bottom: 0.85rem;
  color: var(--ok);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.auth-copy h1 {
  margin: 0;
  font-size: 3.25rem;
  line-height: 1;
}
.auth-copy p {
  margin: 1rem 0 0;
  max-width: 36rem;
  color: #b8bfcc;
  font-size: var(--fs-md);
  line-height: 1.6;
}
.auth-card {
  background: linear-gradient(180deg, rgba(28,31,39,0.98), rgba(18,20,27,0.98));
  border: 1px solid #303642;
  border-radius: var(--radius-md);
  padding: 1.2rem;
  box-shadow: 0 18px 44px rgba(0,0,0,0.34);
}
.auth-card-wide {
  width: min(520px, 100%);
}
.auth-card-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.15rem;
}
.auth-card-head h2 {
  margin: 0;
  font-size: var(--fs-lg);
}
.auth-card-head p {
  margin: 0.18rem 0 0;
}
.auth-mark {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, rgba(255,122,69,0.95), rgba(192,97,255,0.95));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 10px 20px rgba(0,0,0,0.28);
}
.auth-form {
  gap: 0.8rem;
}
.auth-message {
  display: grid;
  gap: 0.65rem;
  margin: 0 0 1rem;
  color: var(--text);
  line-height: 1.6;
}
.auth-message p {
  margin: 0;
}
.auth-links,
.auth-switch {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: var(--fs-base);
}
.auth-switch {
  display: block;
  text-align: center;
}

/* Landing */
.landing-page {
  scroll-snap-type: y mandatory;
  scroll-padding-top: var(--landing-nav-h);
}
@supports selector(html:has(body.landing-page)) {
  html:has(body.landing-page) {
    --landing-nav-h: 74px;
    scroll-behavior: smooth;
    scroll-padding-top: var(--landing-nav-h);
    scroll-snap-type: y mandatory;
  }
}
.public-page .topnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  height: var(--landing-nav-h);
  min-height: var(--landing-nav-h);
  padding: 0 1.5rem;
  align-items: center;
  background: rgba(14,15,19,0.78);
  border-bottom-color: rgba(255,255,255,0.08);
  backdrop-filter: blur(18px);
}
.landing-main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: var(--landing-nav-h) 0 0;
}
.landing-slide {
  position: relative;
  isolation: isolate;
  height: calc(100vh - var(--landing-nav-h));
  min-height: 620px;
  box-sizing: border-box;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  padding-left: max(1rem, calc((100% - 1180px) / 2));
  padding-right: max(1rem, calc((100% - 1180px) / 2));
}
.landing-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 26%, rgba(124,199,255,0.12), transparent 30rem),
    radial-gradient(circle at 86% 24%, rgba(255,122,69,0.12), transparent 28rem),
    linear-gradient(180deg, #10141a 0%, #11151a 58%, #0e0f13 100%);
}
.landing-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  padding-top: clamp(2rem, 5vh, 4rem);
  padding-bottom: clamp(2rem, 5vh, 4rem);
}
.landing-hero-copy {
  max-width: 660px;
  padding-bottom: 1.5rem;
}
.landing-hero .eyebrow,
.landing-section-head .eyebrow {
  display: inline-block;
  margin-bottom: 0.9rem;
  color: var(--ok);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.landing-hero h1 {
  margin: 0 0 1.35rem;
  color: #f4f6fb;
  font-size: clamp(3rem, 4vw, 4.8rem);
  line-height: 1.04;
  letter-spacing: 0;
}
.landing-hero p {
  margin: 0;
  max-width: 38rem;
  color: #b8c0cf;
  font-size: var(--fs-md);
  line-height: 1.7;
}
.landing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}
.landing-cta {
  min-height: 44px;
  padding-inline: 1.05rem;
}
/* "Watch the 1-minute demo": to the video under the hero. */
.landing-watch {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.15rem;
  color: #dfe5ef;
  font-weight: var(--fw-ui);
}
/* The icon is a mask, so its circle is a box of its own. */
.landing-watch-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,122,69,0.16);
  color: var(--accent);
}
.landing-watch-mark .icon { width: 14px; height: 14px; }
.landing-watch:hover { color: #fff; text-decoration: none; }
.landing-watch:hover .landing-watch-mark { background: rgba(255,122,69,0.28); }
/* The demo video: a slide of its own, as large as the slide lets it be;
   its heading starts where the video does. */
.landing-video {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(1.5rem, 4vh, 3rem);
  padding-bottom: clamp(1.5rem, 4vh, 3rem);
}
.landing-video-body {
  display: flex;
  flex-direction: column;
  gap: clamp(1.1rem, 3vh, 2rem);
  width: min(100%, calc((100vh - var(--landing-nav-h) - 12.5rem) * 16 / 9));
  min-width: min(100%, 480px);
  margin: 0 auto;
}
.landing-video::before {
  background:
    radial-gradient(circle at 50% 60%, rgba(255,122,69,0.09), transparent 34rem),
    radial-gradient(circle at 14% 18%, rgba(124,199,255,0.12), transparent 28rem),
    linear-gradient(180deg, #0e0f13 0%, #10141a 50%, #0e0f13 100%);
}
.landing-video .landing-section-head h2 { font-size: clamp(2rem, 3.2vw, 3.1rem); }
.landing-video-frame {
  position: relative;
  flex: none;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  background: #0e0f13;
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
}
.landing-video-player { display: block; width: 100%; height: 100%; object-fit: cover; }
.landing-video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 52px;
  padding: 0 1.4rem 0 1.15rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #1a0f0a;
  font-size: var(--fs-md);
  font-weight: 600;
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
  cursor: pointer;
}
.landing-video-play .icon { width: 18px; height: 18px; }
.landing-video-play:hover { filter: brightness(1.08); }
.landing-video-toggle {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  background: rgba(14,15,19,0.72);
  color: #f4f6fb;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.15s ease;
}
.landing-video-toggle:hover, .landing-video-toggle:focus-visible { opacity: 1; }
.landing-video-toggle .icon { width: 16px; height: 16px; }
.landing-video-file {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-pill);
  background: rgba(14,15,19,0.8);
  color: #f4f6fb;
}
@media (prefers-reduced-motion: reduce) {
  html:has(body.landing-page) { scroll-behavior: auto; }
}
.landing-demo {
  min-width: 0;
}
/* R3-LAND-03: one chip per use case above the demo window (links without
   JS, tabs with it). They wrap on wide screens and scroll sideways on
   phones, inside the row, never the page. */
.demo-cases {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0 0 0.85rem;
}
.demo-case-chip {
  flex: 0 0 auto;
  padding: 0.4rem 0.8rem;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.04);
  color: #c8cfdb;
  font: inherit;
  font-size: var(--fs-base);
  line-height: 1.3;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.demo-case-chip:hover {
  border-color: rgba(255,255,255,0.3);
  color: #f4f6fb;
}
.demo-case-chip[aria-selected="true"],
.demo-case-chip[aria-current="true"] {
  border-color: rgba(255,122,69,0.75);
  background: rgba(255,122,69,0.16);
  color: #f4f6fb;
}
.demo-case-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.demo-case-info {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}
.landing-hero .demo-case-outcome {
  max-width: none;
  color: #e3e7ef;
  font-size: var(--fs-md);
  line-height: 1.55;
}
.demo-case-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
}
.landing-hero .demo-case-cost {
  color: #9ca7b8;
  font-size: var(--fs-base);
  line-height: 1.45;
}
.demo-case-start {
  flex: 0 0 auto;
}
.demo-window {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  background: rgba(21,23,29,0.86);
  box-shadow: 0 28px 70px rgba(0,0,0,0.42);
}
.demo-toolbar {
  display: flex;
  gap: 0.45rem;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.035);
}
.demo-toolbar span {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: #ff7a45;
}
.demo-toolbar span:nth-child(2) { background: #ffc857; }
.demo-toolbar span:nth-child(3) { background: #38d39f; }
.demo-stage {
  position: relative;
  min-height: 390px;
  background:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(135deg, rgba(124,199,255,0.08), rgba(192,97,255,0.06) 46%, rgba(255,122,69,0.08));
  background-size: 34px 34px, 34px 34px, auto;
}
/* R3-LAND-01: four nodes in a Z (input, agent / ability, destination),
   placed by their centres in % of the stage, with the SVG lines from
   centre to centre underneath. Nothing else sits on the stage. */
.demo-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.demo-line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.demo-node {
  position: absolute;
  width: 178px;
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-sm);
  /* Opaque, so the lines pass underneath. */
  background: #0e0f13;
  box-shadow: 0 14px 34px rgba(0,0,0,0.3);
  transform: translate(-50%, -50%);
}
.demo-node strong,
.demo-node span {
  display: block;
}
.demo-node strong {
  color: #f4f6fb;
  font-size: var(--fs-base);
}
.demo-node span {
  margin-top: 0.25rem;
  color: #9ca7b8;
  font-size: var(--fs-sm);
}
.demo-node-input {
  left: 26%;
  top: 27%;
  border-color: rgba(124,199,255,0.42);
}
.demo-node-agent {
  left: 74%;
  top: 27%;
  border-color: rgba(255,122,69,0.5);
}
.demo-node-tool {
  left: 26%;
  top: 73%;
  border-color: rgba(56,211,159,0.45);
}
.demo-node-output {
  left: 74%;
  top: 73%;
  border-color: rgba(192,97,255,0.46);
}
.demo-footer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 0.95rem;
  color: #9ca7b8;
  font-size: var(--fs-sm);
}
.demo-live {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.demo-live svg {
  color: var(--accent);
}
.demo-progress {
  height: 6px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.08);
}
.demo-progress span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--ok));
}
/* The bar fills while a use case "runs"; choosing another one re-adds
   .is-running, which starts it again. Still at 42% for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .demo-window.is-running .demo-progress span {
    animation: demo-run 4.5s cubic-bezier(0.3, 0.6, 0.4, 1) both;
  }
}
@keyframes demo-run {
  from { width: 3%; }
  to { width: 100%; }
}
.landing-features,
.landing-operations {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.35rem, 4vh, 2.75rem);
  padding-top: clamp(2rem, 5vh, 3.5rem);
  padding-bottom: clamp(2rem, 5vh, 3.5rem);
}
.landing-features::before {
  background:
    radial-gradient(circle at 18% 28%, rgba(124,199,255,0.15), transparent 30rem),
    radial-gradient(circle at 86% 24%, rgba(255,122,69,0.11), transparent 30rem),
    linear-gradient(180deg, #111820 0%, #10151b 62%, #0e0f13 100%);
}
.landing-operations::before {
  background:
    radial-gradient(circle at 18% 28%, rgba(124,199,255,0.14), transparent 30rem),
    radial-gradient(circle at 84% 20%, rgba(255,122,69,0.13), transparent 30rem),
    linear-gradient(180deg, #111820 0%, #11151a 60%, #0e0f13 100%);
}
.landing-section-head {
  max-width: 820px;
}
.landing-section-head h2 {
  margin: 0;
  max-width: 820px;
  font-size: clamp(2.35rem, 4.1vw, 4rem);
  line-height: 1.04;
  letter-spacing: 0;
}
.landing-section-head p {
  margin: 0.85rem 0 0;
  max-width: 48rem;
  color: #b8c0cf;
  font-size: var(--fs-md);
  line-height: 1.55;
}
.landing-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.landing-feature-grid div {
  min-height: 270px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
  background: rgba(21,23,29,0.78);
}
.landing-feature-grid strong,
.landing-feature-grid span {
  display: block;
}
.landing-feature-grid strong {
  color: #f4f6fb;
  font-size: var(--fs-md);
}
.landing-feature-grid span {
  margin-top: 0.45rem;
  color: #aeb7c7;
  line-height: 1.45;
}
.feature-visual {
  position: relative;
  display: block;
  width: 100%;
  height: 72px;
  margin: 0 0 0.25rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px),
    rgba(255,255,255,0.025);
  background-size: 24px 24px, 24px 24px, auto;
}
.feature-visual span {
  position: absolute;
  display: block;
  margin: 0;
}
.visual-agents span {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(124,199,255,0.45);
  background: rgba(124,199,255,0.12);
}
.visual-agents span:nth-child(1) { left: 18px; top: 20px; }
.visual-agents span:nth-child(2) {
  left: 58px;
  top: 20px;
  border-color: rgba(255,122,69,0.55);
  background: rgba(255,122,69,0.14);
}
.visual-agents span:nth-child(3) {
  left: 98px;
  top: 20px;
  border-color: rgba(56,211,159,0.45);
  background: rgba(56,211,159,0.12);
}
.visual-tools span {
  width: 48px;
  height: 24px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(14,15,19,0.78);
}
.visual-tools span:nth-child(1) { left: 18px; top: 14px; }
.visual-tools span:nth-child(2) { left: 78px; top: 14px; }
.visual-tools span:nth-child(3) { left: 18px; top: 46px; }
.visual-tools span:nth-child(4) {
  left: 78px;
  top: 46px;
  border-color: rgba(255,122,69,0.5);
}
.visual-flow::before,
.visual-flow::after,
.visual-triggers::before,
.visual-triggers::after {
  content: "";
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, rgba(124,199,255,0.2), rgba(255,122,69,0.75));
  transform-origin: left center;
}
.visual-flow::before { left: 46px; top: 28px; width: 70px; transform: rotate(16deg); }
.visual-flow::after { left: 46px; top: 54px; width: 76px; transform: rotate(-17deg); }
.visual-flow span {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(192,97,255,0.48);
  background: rgba(192,97,255,0.12);
}
.visual-flow span:nth-child(1) { left: 18px; top: 25px; }
.visual-flow span:nth-child(2) { right: 32px; top: 10px; }
.visual-flow span:nth-child(3) { right: 32px; bottom: 10px; }
.visual-triggers span {
  width: 9px;
  height: 9px;
  border-radius: var(--radius-pill);
  background: var(--ok);
  box-shadow: 0 0 22px rgba(56,211,159,0.45);
}
.visual-triggers span:nth-child(1) { left: 28px; top: 36px; }
.visual-triggers span:nth-child(2) { left: 88px; top: 20px; background: var(--accent); }
.visual-triggers span:nth-child(3) { left: 148px; top: 52px; background: var(--link); }
.visual-triggers::before { left: 33px; top: 39px; width: 58px; transform: rotate(-15deg); }
.visual-triggers::after { left: 94px; top: 25px; width: 62px; transform: rotate(30deg); }
.visual-trace span {
  left: 18px;
  right: 18px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.08);
}
.visual-trace span:nth-child(1) { top: 18px; }
.visual-trace span:nth-child(2) { top: 36px; width: 62%; background: rgba(124,199,255,0.28); }
.visual-trace span:nth-child(3) { top: 54px; width: 78%; background: rgba(255,122,69,0.28); }
.visual-trace span:nth-child(4) {
  top: 34px;
  left: auto;
  right: 22px;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(56,211,159,0.48);
  border-radius: var(--radius-pill);
  background: rgba(56,211,159,0.12);
}
.visual-costs {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 18px;
}
.visual-costs span {
  position: static;
  width: 28px;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, var(--accent), rgba(255,122,69,0.35));
}
.visual-costs span:nth-child(1) { height: 28px; }
.visual-costs span:nth-child(2) { height: 46px; background: linear-gradient(180deg, var(--ok), rgba(56,211,159,0.3)); }
.visual-costs span:nth-child(3) { height: 62px; background: linear-gradient(180deg, var(--link), rgba(124,199,255,0.28)); }

/* Flash */
.flash {
  position: fixed;
  z-index: 90;
  bottom: 1.25rem;
  right: 1rem;
  width: min(460px, calc(100% - 2rem));
  list-style: none;
  padding: 0;
  margin: 0;
  pointer-events: none;
}
.auth-page .flash {
  position: fixed;
  z-index: 90;
  top: calc(61px + 1rem);
  left: 50%;
  width: min(1100px, calc(100% - 2rem));
  margin: 0;
  transform: translateX(-50%);
}
.flash li {
  padding: 0.6rem 1rem;
  border-radius: var(--radius-md);
  margin-bottom: 0.5rem;
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: 0 14px 34px rgba(0,0,0,0.38);
  animation: flash-toast-life 6s ease forwards;
  pointer-events: auto;
}
.flash li.flash-success { border-color: #1f5a45; }
.flash li.flash-error { border-color: #5a1f29; }
.flash li { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.6rem; }
.flash-close {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: var(--fs-md);
  line-height: 1;
  padding: 0;
}
.flash-close:hover { color: var(--text); }
@keyframes flash-toast-life {
  0%, 72% { opacity: 1; transform: translateY(0); visibility: visible; }
  100% { opacity: 0; transform: translateY(8px); visibility: hidden; }
}

/* Tables */
table.data { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: var(--fs-base); }
.table-scroll {
  /* Contains absolutely positioned bits (.sr-only labels) so they can't
     widen the page past the scroller. */
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  margin-top: 1rem;
  -webkit-overflow-scrolling: touch;
}
.table-scroll:focus-visible {
  outline: 2px solid rgba(124, 199, 255, 0.42);
  outline-offset: 2px;
}
.table-scroll > table {
  margin-top: 0;
}
.table-scroll > table.data {
  width: max-content;
  min-width: 100%;
}
.table-scroll > table.prompt-diff-table {
  min-width: 760px;
}
table.data th, table.data td {
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}
table.data thead { background: var(--panel); }
table.data td.actions-cell { text-align: right; white-space: nowrap; }
.table-scroll > table.data th,
.table-scroll > table.data td {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0.2rem 0.45rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1;
}
.status-pill.ok {
  color: var(--ok);
  background: rgba(56, 211, 159, 0.08);
  border-color: rgba(56, 211, 159, 0.32);
}
.status-pill.muted-pill {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
}
.empty-state {
  display: grid;
  gap: 0.25rem;
  padding: 1rem 0.1rem;
}
.empty-state strong {
  color: var(--text);
}
/* DS-02: one way to say a field may stay empty. */
.optional-tag { color: var(--muted); font-weight: 400; font-size: var(--fs-sm); }
/* PWR-07 */
.node-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.2rem; }
.node-chip {
  display: inline-flex; align-items: center; padding: 0.05rem 0.35rem; border-radius: var(--radius-pill);
  border: 1px solid rgba(124, 199, 255, 0.35); color: var(--link); font-size: var(--fs-xs); line-height: 1.3; white-space: nowrap;
}
/* PWR-06 */
.api-example {
  max-width: 100%; overflow-x: auto; margin: 0.4rem 0 0.8rem; padding: 0.6rem 0.75rem;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--panel-2); font-size: var(--fs-sm);
}
.settings-panel { min-width: 0; }
.api-token-new { margin: 0 0 1rem; padding: 0.75rem 0.9rem; border: 1px solid var(--status-success); border-radius: var(--radius-md); background: rgba(56, 211, 159, 0.08); display: grid; gap: 0.5rem; }
.api-token-value { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.api-token-value code { overflow-wrap: anywhere; font-size: var(--fs-base); }
.api-token-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem; margin: 0 0 1rem; }
.api-token-form label { display: grid; gap: 0.3rem; font-size: var(--fs-base); color: var(--muted); }
.api-token-form input { padding: 0.45rem 0.6rem; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; width: min(18rem, 70vw); }
/* PWR-05 */
.compare-delta { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.compare-delta-up { color: var(--status-warning); }
.compare-delta-down { color: var(--status-success); }
.compare-delta-neutral { color: var(--muted); }
.compare-result, .compare-steps { margin-top: 1rem; }
.compare-steps-table td.num, .compare-steps-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* PWR-04: command palette */
.nav-icon-btn {
  display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); cursor: pointer;
}
.nav-icon-btn:hover, .nav-icon-btn:focus-visible { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.cmdk { position: fixed; inset: 0; z-index: 120; display: grid; justify-items: center; align-items: start; padding: 12vh 16px 16px; }
.cmdk[hidden] { display: none; }
.cmdk-backdrop { position: absolute; inset: 0; background: rgba(5, 7, 12, 0.6); }
.cmdk-card {
  position: relative; width: min(560px, 100%); max-height: 70vh; display: grid; grid-template-rows: auto 1fr auto;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--panel); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); overflow: hidden;
}
.cmdk-card input {
  width: 100%; padding: 0.85rem 1rem; border: 0; border-bottom: 1px solid var(--border);
  background: transparent; color: var(--text); font: inherit; font-size: var(--fs-md); outline: none;
}
.cmdk-list { list-style: none; margin: 0; padding: 0.35rem; overflow-y: auto; }
.cmdk-item { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0.65rem; border-radius: var(--radius-sm); cursor: pointer; }
.cmdk-item.is-active { background: rgba(255, 122, 69, 0.14); }
.cmdk-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-group { flex: 0 0 auto; color: var(--muted); font-size: var(--fs-xs); }
.cmdk-empty { padding: 0.75rem; }
.cmdk-foot { margin: 0; padding: 0.45rem 0.9rem; border-top: 1px solid var(--border); display: flex; gap: 0.3rem; align-items: center; flex-wrap: wrap; }
/* PWR-03 */
.starter-gallery { border: 0; padding: 0; margin: 0; display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.starter-gallery legend { padding: 0; margin-bottom: 0.5rem; font-weight: 600; }
.starter-gallery label.starter-card {
  position: relative; display: grid; gap: 0.25rem; align-content: start; margin: 0;
  padding: 0.7rem 0.8rem 0.7rem 2.1rem; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--panel-2); cursor: pointer;
}
.starter-card:hover { border-color: #3a4150; }
.starter-card:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.starter-card input { position: absolute; left: 0.75rem; top: 0.85rem; margin: 0; }
.starter-name { font-weight: 600; color: var(--text); }
.starter-summary { color: var(--muted); font-size: var(--fs-base); line-height: 1.4; }
.starter-setup { color: var(--warn); font-size: var(--fs-sm); line-height: 1.4; }
.empty-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.6rem 0 0; }
/* PWR-02 */
.pipeline-pick { display: none; }
.pipeline-cards.is-selecting .pipeline-pick {
  display: flex; position: absolute; z-index: 2; top: 0.7rem; left: 0.7rem;
  width: 1.4rem; height: 1.4rem; align-items: center; justify-content: center;
}
.pipeline-cards.is-selecting .pipeline-card .card-body { padding-left: 1.6rem; }
.pipeline-cards.is-selecting .pipeline-card { cursor: pointer; }
.pipeline-cards.is-selecting .pipeline-card.is-picked { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.pipeline-select-toggle[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.bulk-bar {
  position: sticky; bottom: 1rem; z-index: 20; margin: 1rem auto 0; width: fit-content; max-width: 100%;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem;
  padding: 0.6rem 0.8rem; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: rgba(20, 24, 34, 0.97); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}
.bulk-bar[hidden] { display: none; }
.bulk-count { font-weight: 600; margin-right: 0.3rem; }
.runs-compare-bar #runs-compare-go[hidden] { display: none; }
/* PWR-01 */
.version-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.version-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.55rem 0.2rem; border-bottom: 1px solid var(--border); }
.version-row:last-child { border-bottom: 0; }
.version-text { display: grid; gap: 0.1rem; min-width: 0; }
.version-row.is-current .version-text strong { color: var(--ok); }
.pipeline-import-form .btn { cursor: pointer; }
.pipeline-import-form .btn:focus-within { outline: 2px solid rgba(124, 199, 255, 0.42); outline-offset: 2px; }
/* SHR-01 */
.share-signup-help { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0.5rem 0 0; }
.share-advanced { margin-top: 1.1rem; border-top: 1px solid var(--border); padding-top: 0.8rem; }
.share-advanced[open] > summary { margin-bottom: 0.4rem; }
/* SET-01 */
.settings-assistant-model { max-width: 420px; margin-top: 0.8rem; display: grid; gap: 0.35rem; }
.credential-priority-help { max-width: 80ch; }
.credential-test-row td { padding-top: 0; border-top: 0; }
.credential-test-result { display: inline-block; padding-left: 0.6rem; border-left: 3px solid var(--tone, var(--border)); font-size: var(--fs-base); }
.date-format-choice { border: 0; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.35rem; }
.date-format-choice legend { padding: 0; margin-bottom: 0.35rem; }
/* FIL-01 */
.file-folders-choices { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.file-folders-choices label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.file-folders-error { margin: 0.6rem 0 0; color: var(--status-error); }
.file-folders-for { overflow-wrap: anywhere; }
/* An empty card list: one wide card with an icon, a line of help and the
   action that fills it (LIB-01). */
.cards > li.empty-card {
  grid-column: 1 / -1;
  display: grid; justify-items: center; gap: 0.45rem;
  padding: 1.75rem 1rem; text-align: center;
  border: 1px dashed var(--border); border-radius: var(--radius-md);
}
.empty-card .empty-icon {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--panel-2); color: var(--muted); font-size: var(--fs-md); font-weight: 600;
}
.empty-card strong { color: var(--text); }
.empty-card p { max-width: 56ch; margin: 0; }
.empty-card .btn { margin-top: 0.35rem; }
@media (max-width: 640px) {
  .table-scroll {
    margin-inline: 0;
  }
}
.tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--muted);
}

.canvas-embed { width: 100%; height: 100%; border: 0; }
.empty-canvas {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

#messages { flex: 1; overflow-y: auto; margin: 1rem 0; padding-right: 0.25rem; }
.msg {
  padding: 0.65rem 0.8rem;
  border-radius: var(--radius-md);
  margin-bottom: 0.6rem;
  background: var(--panel-2);
  border: 1px solid var(--border);
}
.msg header {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-bottom: 0.25rem;
}
.msg-user { border-color: #2a3742; }
.msg-assistant { border-color: #3a2533; background: #1e1820; }
.msg-progress { border-color: #2a3a30; background: #15211d; color: #b6d8c8; font-size: var(--fs-base); }
.msg-system { opacity: 0.8; font-style: italic; }
.run-status { font-size: var(--fs-base); color: var(--muted); }
.run-failed { color: var(--status-error); }
.run-running { color: var(--status-info); }
.run-completed { color: var(--status-success); }
.run-pending { color: var(--status-neutral); }
.run-skipped { color: var(--muted); font-style: italic; }
.chat-form textarea { resize: vertical; }

/* Pipeline workbench */
.pipeline-workbench {
  width: 100%;
  height: calc(100vh - 61px);
  margin: 0;
  max-width: none;
  --sidebar-width: 380px;
  --sidebar-min-width: 300px;
  --sidebar-max-width: 600px;
}
.workbench-frame {
  height: 100%;
  display: flex;
  flex-direction: column;
  /* Nothing inside (a slid-out drawer, a bubble) may widen the page
     (R2-BUG-04). clip, unlike hidden, leaves vertical overflow alone. */
  overflow-x: clip;
  background: linear-gradient(180deg, rgba(20,22,29,0.96), rgba(12,13,18,0.98));
}
.workbench-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 56px;
  border-bottom: 1px solid var(--border);
  padding: 0.65rem 1rem;
}
.topbar-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.topbar-left h1 {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 600;
  outline: none;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.save-state {
  display: inline-flex;
  align-items: center;
  max-width: 260px;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  font-size: var(--fs-xs);
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.save-state.is-error {
  border-color: rgba(255, 93, 108, 0.45);
  background: rgba(255, 93, 108, 0.08);
  color: #ffb3ba;
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.workbench-body {
  display: grid;
  grid-template-columns: minmax(var(--sidebar-min-width), var(--sidebar-width)) 8px minmax(0, 1fr);
  min-height: 0;
  flex: 1;
}
.workbench-sidebar {
  background: linear-gradient(180deg, rgba(24,26,34,0.96), rgba(16,18,25,0.98));
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.sidebar-resizer {
  position: relative;
  z-index: 8;
  width: 8px;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--border);
  border-right: 1px solid rgba(255,255,255,0.03);
  background: rgba(255,255,255,0.015);
  cursor: col-resize;
}
.sidebar-resizer::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 48px;
  border-radius: var(--radius-pill);
  background: #4a5568;
  transform: translate(-50%, -50%);
  transition: background-color 120ms ease, box-shadow 120ms ease;
}
.sidebar-resizer:hover::before,
.sidebar-resizer:focus-visible::before,
.workbench-body.is-resizing .sidebar-resizer::before {
  background: var(--accent);
  box-shadow: 0 0 12px rgba(255, 122, 69, 0.34);
}
.sidebar-resizer:focus-visible {
  outline: 2px solid rgba(124, 199, 255, 0.42);
  outline-offset: -2px;
}
.workbench-body.is-resizing {
  user-select: none;
  cursor: col-resize;
}
.workbench-body.is-resizing .canvas-wrapper {
  pointer-events: none;
}
/* Builder side panel: page tabs (.tabs, R2-UI-01) with panel padding. */
.sidebar-tabs { margin: 0; padding: 0.25rem 0.5rem 0; }
.tab-btn.tab-btn-pipeline { display: none; }
/* Unread-activity indicator. The dot is hidden by default and revealed when
   the tab button carries .has-unread (set by renderThread on new activity
   while the tab isn't focused; cleared on tab activation). */
.tab-unread-dot {
  display: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px rgba(255, 122, 69, 0.55);
}
.tab-btn.has-unread .tab-unread-dot { display: inline-block; }
.tab-panel { display: none; min-height: 0; }
.tab-panel.is-active { display: flex; flex-direction: column; flex: 1; }
#builder-messages { flex: 1; overflow-y: auto; padding: 0.75rem; }
.assistant-model-picker {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0.65rem 0.75rem 0;
  padding: 0;
}
.assistant-model-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 32px;
}
.assistant-model-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
}
.assistant-model-label {
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-ui);
  white-space: nowrap;
}
.assistant-model-menu {
  position: relative;
}
.assistant-model-trigger {
  width: 100%;
  min-height: var(--h-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid rgba(124, 199, 255, 0.18);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(28,31,39,0.92), rgba(18,20,27,0.94));
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.assistant-model-trigger:hover,
.assistant-model-trigger[aria-expanded="true"] {
  border-color: rgba(124, 199, 255, 0.35);
  background: linear-gradient(180deg, rgba(32,36,46,0.98), rgba(20,23,31,0.98));
}
.assistant-model-trigger:focus-visible {
  outline: 2px solid rgba(124, 199, 255, 0.42);
  outline-offset: 2px;
}
.assistant-model-trigger .icon {
  width: 16px;
  height: 16px;
  color: var(--muted);
}
.assistant-model-options {
  position: absolute;
  z-index: 40;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  max-height: min(420px, 58vh);
  overflow-y: auto;
  padding: 0.45rem;
  border: 1px solid rgba(124, 199, 255, 0.22);
  border-radius: var(--radius-sm);
  background: rgba(18, 20, 27, 0.98);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
}
.assistant-model-option-group + .assistant-model-option-group {
  margin-top: 0.45rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.assistant-model-option-provider {
  padding: 0.25rem 0.4rem 0.35rem;
  color: var(--muted);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.assistant-model-option {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.6rem 0.65rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.assistant-model-option:hover,
.assistant-model-option.is-selected {
  background: rgba(124, 199, 255, 0.08);
}
.assistant-model-option.is-selected {
  box-shadow: inset 0 0 0 1px rgba(124, 199, 255, 0.18);
}
.assistant-model-option-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.assistant-model-option-main strong {
  font-size: var(--fs-base);
}
.assistant-model-option-desc {
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.35;
}
.assistant-model-picker input {
  min-width: 0;
  padding: 0.52rem 0.6rem;
  border: 1px solid #2a303b;
  border-radius: var(--radius-sm);
  background: rgba(18, 20, 27, 0.94);
  color: var(--text);
}
.assistant-model-hint {
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.35;
}
.assistant-context-icon-toggle,
.assistant-usage-summary {
  position: relative;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(124, 199, 255, 0.18);
  border-radius: 50%;
  background: rgba(124, 199, 255, 0.07);
  color: var(--link);
  font-size: var(--fs-base);
  font-weight: 700;
  cursor: help;
}
.assistant-usage-summary[hidden] {
  display: none;
}
/* AST-09: labelled Access setting and cost, instead of bare icons. */
/* The cost is a Badge (info): 12 px, 20 px tall. */
.assistant-usage-summary { display: inline-block; width: auto; height: 20px; padding: 0 8px; border-color: color-mix(in srgb, var(--link) 32%, transparent); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--link) 10%, transparent); font-size: var(--fs-xs); font-weight: var(--fw-ui); line-height: 18px; }
.assistant-access-control { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; color: var(--muted); font-size: var(--fs-xs); }
.assistant-access-control select { width: auto; min-width: 0; padding: 0.15rem 1.6rem 0.15rem 0.45rem; font-size: var(--fs-xs); }
.assistant-context-icon-toggle {
  color: var(--muted);
  cursor: pointer;
}
.assistant-context-icon-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}
.assistant-context-icon-toggle:has(input:checked) {
  border-color: rgba(124, 199, 255, 0.42);
  background: rgba(124, 199, 255, 0.13);
  color: var(--link);
}
.assistant-context-icon {
  width: 15px;
  height: 15px;
  display: inline-grid;
  place-items: center;
}
.assistant-context-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.assistant-context-icon-toggle::before,
.assistant-context-icon-toggle::after,
.assistant-usage-summary::before,
.assistant-usage-summary::after {
  position: absolute;
  right: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 120ms ease, transform 120ms ease;
}
.assistant-context-icon-toggle::before,
.assistant-usage-summary::before {
  content: attr(data-tooltip);
  bottom: calc(100% + 9px);
  z-index: 12;
  width: max-content;
  max-width: min(280px, calc(100vw - 2rem));
  padding: 0.55rem 0.65rem;
  border: 1px solid rgba(124, 199, 255, 0.24);
  border-radius: var(--radius-sm);
  background: rgba(18, 20, 27, 0.98);
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.35;
  box-shadow: 0 14px 34px rgba(0,0,0,0.38);
}
.assistant-context-icon-toggle::after,
.assistant-usage-summary::after {
  content: "";
  bottom: calc(100% + 4px);
  border: 5px solid transparent;
  border-top-color: rgba(18, 20, 27, 0.98);
}
.assistant-context-icon-toggle:hover::before,
.assistant-context-icon-toggle:hover::after,
.assistant-usage-summary:hover::before,
.assistant-usage-summary:hover::after {
  opacity: 1;
  transform: translateY(0);
}
.assistant-context-icon-toggle:focus-within,
.assistant-usage-summary:focus-visible {
  outline: 2px solid rgba(124, 199, 255, 0.42);
  outline-offset: 2px;
}
/* The builder assistant's composer is the shared .composer (visual
   polish 1.6); here only its place in the panel. */
.builder-chat-form { margin: var(--space-3); }
.builder-chat-form.is-locked { opacity: 0.78; }
/* A locked composer never looks active: no focus colour, no spotlight. */
.builder-chat-form.is-locked .composer,
.builder-chat-form.is-locked .composer:focus-within { border-color: var(--border); background: var(--panel-2); }
.builder-chat-form.is-locked.guide-spotlight { outline: none !important; box-shadow: none !important; }
.builder-chat-form textarea:disabled { cursor: not-allowed; }
.builder-chat-form .chat-typing { margin-left: var(--space-1); }
.chat-locked-callout {
  margin: 0.75rem;
  padding: 0.85rem;
  border: 1px solid rgba(255, 177, 66, 0.42);
  border-radius: var(--radius-md);
  background: rgba(255, 177, 66, 0.08);
  color: var(--text);
}
.chat-locked-callout strong {
  display: block;
  margin-bottom: 0.35rem;
  color: #ffd37a;
}
.chat-locked-callout p {
  margin: 0 0 0.7rem;
  color: var(--muted);
  line-height: 1.45;
}
.assistant-usage { margin-top: 0.35rem; }
.assistant-usage > summary {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  padding: 0.05rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: var(--fs-xs);
  cursor: pointer;
  list-style: none;
}
.assistant-usage > summary::-webkit-details-marker { display: none; }
.assistant-usage[open] > summary { margin-bottom: 0.3rem; }
.assistant-usage-line {
  margin-top: 0.45rem;
  color: var(--muted);
  font-size: var(--fs-xs);
}

.params-header {
  padding: 0.75rem;
  border-bottom: 1px solid var(--border);
}
.params-header p { margin: 0 0 0.55rem; font-size: var(--fs-base); }
.params-tools {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
}
.parameter-rows {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.param-row {
  display: grid;
  grid-template-columns: 1fr 105px 1fr auto;
  gap: 0.45rem;
  align-items: center;
}
.param-row .btn { padding: 0.45rem 0.55rem; }

.palette-header {
  padding: 0.75rem;
  border-bottom: 1px solid var(--border);
}
.palette-header h3 { margin: 0; font-size: var(--fs-base); }
.palette-header p { margin: 0.3rem 0 0; font-size: var(--fs-sm); }
.tab-panel[data-panel="nodes"] .palette {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.75rem;
}
.palette { display: flex; flex-direction: column; gap: 0.55rem; }
.palette-section {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.palette-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.palette-section-toggle {
  min-width: 0;
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: left;
  text-transform: uppercase;
}
.palette-section-toggle:hover {
  color: var(--text);
}
.palette-section-toggle:focus-visible,
.palette-section-action:focus-visible {
  outline: 2px solid rgba(124, 199, 255, 0.42);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}
.palette-section-chevron.icon {
  width: 16px;
  height: 16px;
  color: var(--accent);
  transition: transform 0.16s ease;
}
.palette-section.is-collapsed .palette-section-chevron {
  transform: rotate(-90deg);
}
.palette-section-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.palette-section.is-collapsed .palette-section-body {
  display: none;
}
.palette-section-action {
  flex: 0 0 auto;
  padding: 0.18rem 0.45rem;
  border: 1px solid rgba(124, 199, 255, 0.18);
  border-radius: var(--radius-pill);
  background: rgba(124, 199, 255, 0.06);
  color: var(--link);
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-xs);
  line-height: 1.25;
  text-decoration: none;
}
.palette-section-action:hover {
  border-color: rgba(124, 199, 255, 0.35);
  background: rgba(124, 199, 255, 0.1);
  text-decoration: none;
}
.palette-item {
  padding: 0.55rem 0.68rem;
  background: linear-gradient(180deg, rgba(33,36,46,0.95), rgba(25,28,37,0.98));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: grab;
  font-size: var(--fs-base);
}
.palette-item:hover {
  border-color: #4d5568;
  transform: translateY(-1px);
}
.palette-item[data-kind="agent"]    { border-left: 3px solid var(--accent-2); }
.palette-item[data-kind="tool"]     { border-left: 3px solid #3aa6ff; }
.palette-item[data-kind="function"] { border-left: 3px solid #4dd0e1; }
.palette-item[data-kind="input"]    { border-left: 3px solid var(--ok); }
.palette-item[data-kind="output"]   { border-left: 3px solid var(--warn); }

.canvas-wrapper {
  position: relative;
  min-width: 0;
  min-height: 0;
  /* Clip the run-drawer when it's slid off-screen via translateX(100%).
     Without this, the off-screen drawer adds a horizontal scrollbar to the
     whole page. Drawflow already manages its own canvas extents inside
     #drawflow (which is position:absolute; inset:0), so clipping here is
     safe — wires can't render outside the wrapper anyway. */
  overflow: hidden;
  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,0.06), transparent 45%),
    radial-gradient(circle at 84% 82%, rgba(255,122,69,0.08), transparent 38%),
    #0b0e14;
}
.pipeline-create-modes { border: 0; margin: 0 0 1rem; padding: 0; }
.pipeline-create-modes legend { margin-bottom: 0.5rem; font-weight: 600; }
.pipeline-create-form [data-create-panel][hidden] { display: none; }
.canvas-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.45;
  background-image: radial-gradient(rgba(255,255,255,0.18) 0.9px, transparent 0.9px);
  background-size: 32px 32px;
}
#drawflow { position: absolute; inset: 0; }
#drawflow > .drawflow { transform-origin: 0 0; }
.canvas-toolbar {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
  background: rgba(18,20,27,0.88);
  box-shadow: 0 12px 28px rgba(0,0,0,0.28);
  backdrop-filter: blur(8px);
}
.canvas-tool-btn {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
}
.canvas-tool-btn:hover {
  background: #262a33;
}
.canvas-tool-btn:focus-visible {
  outline: 2px solid rgba(124, 199, 255, 0.42);
  outline-offset: 2px;
}
.canvas-tool-btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.canvas-tool-btn svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.zoom-readout {
  min-width: 3.1rem;
  color: var(--muted);
  font-size: var(--fs-sm);
  text-align: center;
}

/* Drawflow nodes */
.drawflow .drawflow-node {
  background: linear-gradient(180deg, rgba(35,38,49,0.96), rgba(24,27,36,0.98));
  border: 1px solid #333a48;
  border-radius: var(--radius-md);
  color: var(--text);
  /* R2-UI-07: one width for every step. */
  width: 230px;
  min-width: 0;
  max-width: calc(100vw - 56px);
  /* min-height set dynamically from JS based on socket count so all the
     input circles stay inside the node footprint. Drawflow's own layout
     (display: flex; align-items: center) is what pins the inputs/outputs
     to the left/right edges — DO NOT override it here. */
  box-shadow: 0 10px 22px rgba(0,0,0,0.38);
}
/* R2-UI-07: icon · title (two lines at most) · status dot · ⚙, then one
   muted meta line. */
.drawflow .drawflow-node .node-head {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.5rem 0.55rem 0.65rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: var(--fs-base);
  min-width: 0;
}
.drawflow .drawflow-node .node-icon {
  --node-tone: var(--accent-2);
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--node-tone) 22%, transparent);
  color: var(--node-tone);
  font-size: var(--fs-base);
}
.drawflow .drawflow-node.kind-input .node-icon { --node-tone: var(--ok); }
.drawflow .drawflow-node.kind-output .node-icon { --node-tone: var(--warn); }
.drawflow .drawflow-node.kind-tool .node-icon { --node-tone: #3aa6ff; }
.drawflow .drawflow-node.kind-function .node-icon { --node-tone: #4dd0e1; }
.drawflow .drawflow-node:is(.kind-conditional, .kind-loop, .kind-try_catch, .kind-delay) .node-icon { --node-tone: #f0b45b; }
.drawflow .drawflow-node.kind-vector_search .node-icon { --node-tone: #2dd4bf; }
.drawflow .drawflow-node .node-head-text { min-width: 0; }
.drawflow .drawflow-node .node-title {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.25;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.drawflow .drawflow-node .node-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
}
.drawflow .drawflow-node.node-state--completed .node-status { background: var(--ok); }
.drawflow .drawflow-node.node-state--running .node-status { background: var(--link); }
.drawflow .drawflow-node.node-state--failed .node-status,
.drawflow .drawflow-node.has-lint-error .node-status { background: var(--err); }
.drawflow .drawflow-node.has-lint-warning .node-status { background: var(--warn); }
.drawflow .drawflow-node .node-body {
  padding: 0.45rem 0.75rem 0.55rem;
  overflow: hidden;
  color: #b3bac8;
  font-size: var(--fs-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Agent input_2 (tools/abilities) is lifted to the TOP of the node by JS
   (positionAgentTopSocket). The class is applied at runtime so old graphs
   keep working until the JS runs. */
.drawflow .drawflow-node.kind-agent .input.agent-top-input {
  position: absolute;
  top: -10px;
  margin: 0;
  /* `left` is set inline by JS based on node width so it stays centered.
     A subtle accent helps the user identify it as the abilities socket. */
  border: 2px solid var(--accent-2);
  background: rgba(192, 97, 255, 0.18);
}
.drawflow .drawflow-node.kind-agent .inputs {
  /* Let input_2 (lifted to the top) escape the column flex stack. */
  overflow: visible;
}
.drawflow .connection .main-path { stroke: #5a6070; stroke-width: 2px; }

/* Typed-edge visualisation.
   - Output socket: colored ring around the dot at the source side.
   - Connection path: same color, but as a soft tint so the line
     doesn't read as a hard "I'm a run-traversed edge" cue.
   See pipeline_builder.js _schemaTypeForUpstream + node_io.output_type_tag
   for the source of these labels. Run-trace's `.traversed` class wins
   over these tints (it sets stroke explicitly with a glow). */
.drawflow .outputs .output {
  position: relative;
}
.drawflow .outputs .output[data-schema-type]::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid transparent;
  pointer-events: none;
  z-index: 1;
}
.drawflow .outputs .output.schema-type-text::after    { border-color: #7cc7ff; }
.drawflow .outputs .output.schema-type-object::after  { border-color: #c061ff; }
.drawflow .outputs .output.schema-type-list::after    { border-color: #f0a754; }
.drawflow .outputs .output.schema-type-any::after     { border-color: #5a6070; }
.drawflow .outputs .output.schema-type-unknown::after { border-color: #3a3f4d; border-style: dashed; }

/* Human-readable socket contracts. Labels stay quiet until hover/connection
   in Standard/Expert, while Guided mode keeps them visible. */
.drawflow .input[data-socket-label]::before,
.drawflow .output[data-socket-label]::before {
  content: attr(data-socket-label);
  position: absolute;
  top: 50%;
  z-index: 5;
  /* Socket columns are zero-width, so auto sizing collapses the badge even
     though its text still paints outside it. Force the generated box to the
     label's intrinsic width and keep padding outside that width. */
  display: block;
  width: max-content;
  min-width: 0;
  max-width: min(240px, 42vw);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0.18rem 0.38rem;
  border: 1px solid rgba(124, 199, 255, 0.22);
  border-radius: var(--radius-sm);
  background: rgba(12, 15, 22, 0.94);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 650;
  line-height: 1.2;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.drawflow .input[data-socket-label]::before { left: 15px; }
.drawflow .output[data-socket-label]::before { right: 15px; }
.drawflow .drawflow-node:hover .input[data-socket-label]::before,
.drawflow .drawflow-node:hover .output[data-socket-label]::before,
.drawflow .drawflow-node.selected .input[data-socket-label]::before,
.drawflow .drawflow-node.selected .output[data-socket-label]::before,
.drawflow .input[data-socket-label]:hover::before,
.drawflow .output[data-socket-label]:hover::before,
body.is-guided-connecting .drawflow .input[data-socket-label]::before {
  opacity: 1;
}
.drawflow .drawflow-node.kind-agent .input.agent-top-input::before {
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
}
.drawflow .input.connection-compatible,
.drawflow .input.connection-possible,
.drawflow .input.connection-incompatible {
  width: 18px;
  height: 18px;
  margin-top: -4px;
}
.drawflow .input.connection-compatible {
  border-color: var(--ok);
  background: rgba(56, 211, 159, 0.28);
  box-shadow: 0 0 0 5px rgba(56, 211, 159, 0.14), 0 0 16px rgba(56, 211, 159, 0.4);
}
.drawflow .input.connection-compatible::before {
  border-color: rgba(56, 211, 159, 0.6);
  color: var(--ok);
}
.drawflow .input.connection-possible {
  border-color: var(--warn);
  background: rgba(240, 167, 84, 0.22);
  box-shadow: 0 0 0 5px rgba(240, 167, 84, 0.1);
}
.drawflow .input.connection-incompatible {
  opacity: 0.22;
  filter: grayscale(1);
}
.drawflow .input[data-connection-help]::after {
  content: attr(data-connection-help);
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 12;
  width: 230px;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(18, 22, 31, 0.98);
  color: var(--text);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-3px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.drawflow .input[data-connection-help]:hover::after {
  opacity: 1;
  transform: translateY(0);
}
.drawflow .input.connection-compatible[data-connection-help]::after { border-color: rgba(56, 211, 159, 0.48); }
.drawflow .input.connection-possible[data-connection-help]::after { border-color: rgba(240, 167, 84, 0.5); }
.drawflow .input.connection-incompatible[data-connection-help]::after { border-color: rgba(255, 93, 108, 0.45); }

.next-node-picker {
  position: absolute;
  z-index: 35;
  width: min(328px, calc(100% - 24px));
  max-height: 380px;
  overflow: hidden;
  border: 1px solid rgba(124, 199, 255, 0.38);
  border-radius: var(--radius-md);
  background: rgba(18, 22, 31, 0.98);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.48);
}
.next-node-picker header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.75rem 0.85rem;
  border-bottom: 1px solid var(--border);
}
.next-node-picker header span {
  color: var(--link);
  font-size: var(--fs-xs);
}
.next-node-options {
  max-height: 320px;
  overflow-y: auto;
  padding: 0.4rem;
}
.next-node-options button {
  display: block;
  width: 100%;
  padding: 0.62rem;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.next-node-options button:hover,
.next-node-options button:focus-visible {
  outline: 0;
  background: rgba(124, 199, 255, 0.1);
}
.next-node-options strong,
.next-node-options small { display: block; }
.next-node-options small {
  margin-top: 0.18rem;
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.35;
}

.connection-repair-card {
  width: min(680px, calc(100vw - 2rem));
}
.mapping-rows {
  display: grid;
  gap: 0.65rem;
  margin-top: 1rem;
}
.mapping-row {
  display: grid;
  grid-template-columns: minmax(135px, 0.8fr) minmax(180px, 1fr) minmax(150px, 1fr);
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
}
.mapping-row label strong,
.mapping-row label span { display: block; }
.mapping-row label span {
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: var(--fs-xs);
}
.mapping-row select,
.mapping-row input {
  width: 100%;
  min-width: 0;
  padding: 0.48rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  color: var(--text);
}
.mapping-error {
  margin: 0.75rem 0 0;
  color: var(--err);
  font-size: var(--fs-sm);
}
.connection-repair-actions {
  flex-wrap: wrap;
}
@media (max-width: 640px) {
  .mapping-row { grid-template-columns: 1fr; }
}

.drawflow .connection.schema-type-text    .main-path { stroke: #5b8eb8; }
.drawflow .connection.schema-type-object  .main-path { stroke: #8a59b8; }
.drawflow .connection.schema-type-list    .main-path { stroke: #b07c45; }
.drawflow .connection.schema-type-any     .main-path { stroke: #5a6070; }
.drawflow .connection.schema-type-unknown .main-path { stroke: #4a4f5e; stroke-dasharray: 6 4; }
/* An agent's abilities: one dashed style in the builder and on the run
   page (R2-BUG-17). */
.drawflow .connection.is-ability .main-path { stroke: #4f7fa3; stroke-dasharray: 5 5; }

.drawflow .drawflow-node.selected {
  background: linear-gradient(180deg, rgba(35,38,49,0.96), rgba(24,27,36,0.98)) !important;
  border-color: #8ea3c8;
  box-shadow: 0 0 0 1px rgba(142,163,200,0.85), 0 12px 26px rgba(0,0,0,0.45);
}

/* Pre-run validation error: pulses when the user tries to run but a node
   (typically the Input) is missing a required value. Auto-clears after ~3s. */
.drawflow .drawflow-node.node-error {
  border-color: #ff6b6b !important;
  animation: nodeErrorPulse 0.9s ease-in-out 0s 3;
}
@keyframes nodeErrorPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 107, 107, 0.55), 0 0 0 0 rgba(255, 107, 107, 0.0); }
  50%      { box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.95), 0 0 28px 6px rgba(255, 107, 107, 0.35); }
}

/* Lint warning: amber pulse for shape mismatches the user can override. */
.drawflow .drawflow-node.node-warning {
  border-color: #f0b429 !important;
  animation: nodeWarnPulse 0.9s ease-in-out 0s 3;
}
@keyframes nodeWarnPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(240, 180, 41, 0.55), 0 0 0 0 rgba(240, 180, 41, 0.0); }
  50%      { box-shadow: 0 0 0 2px rgba(240, 180, 41, 0.95), 0 0 28px 6px rgba(240, 180, 41, 0.35); }
}

/* Persistent lint indicators: live linter applies these on every save
   so they stick around until the underlying issue is resolved. Quieter
   than the on-Run pulse — same hue, no animation. */
.drawflow .drawflow-node.is-unconnected { outline: 2px dashed color-mix(in srgb, var(--status-error) 75%, transparent); outline-offset: 4px; }
.drawflow .drawflow-node.has-lint-error {
  border-color: #ff6b6b !important;
  box-shadow: 0 0 0 1px rgba(255, 107, 107, 0.55);
}
.drawflow .drawflow-node.has-lint-warning {
  border-color: #f0b429 !important;
  box-shadow: 0 0 0 1px rgba(240, 180, 41, 0.55);
}
.drawflow .drawflow-node[data-lint-title] > .drawflow_content_node {
  position: relative;
}
.drawflow .drawflow-node[data-lint-title] > .drawflow_content_node[data-lint-title]::after {
  content: attr(data-lint-title);
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  z-index: 20;
  width: 260px;
  max-width: min(320px, 70vw);
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(240, 180, 41, 0.46);
  border-radius: var(--radius-sm);
  background: rgba(18, 22, 31, 0.98);
  color: var(--text);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.46);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.45;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  white-space: pre-wrap;
}
.drawflow .drawflow-node.has-lint-error[data-lint-title] > .drawflow_content_node[data-lint-title]::after {
  border-color: rgba(255, 93, 108, 0.52);
}
.drawflow .drawflow-node[data-lint-title]:hover > .drawflow_content_node[data-lint-title]::after,
.drawflow .drawflow-node[data-lint-title]:focus-within > .drawflow_content_node[data-lint-title]::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Topbar lint status pill. Sits next to the Run button. The dot's color
   communicates state at a glance; the text gives counts. */
.lint-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0.25rem 0.7rem;
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.lint-pill:hover { background: var(--panel); }
.lint-pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* DS-03: the check pill uses the status tokens. */
.lint-pill-ok    { --tone: var(--status-success); }
.lint-pill-warn  { --tone: var(--status-warning); }
.lint-pill-error { --tone: var(--status-error); }
.lint-pill-ok .lint-pill-dot, .lint-pill-warn .lint-pill-dot, .lint-pill-error .lint-pill-dot {
  background: var(--tone); box-shadow: 0 0 6px color-mix(in srgb, var(--tone) 70%, transparent);
}
.lint-pill-ok, .lint-pill-warn, .lint-pill-error { border-color: color-mix(in srgb, var(--tone) 45%, transparent); }

/* Node type themes */
.drawflow .drawflow-node.kind-input {
  background: linear-gradient(180deg, rgba(34,66,58,0.98), rgba(20,43,38,0.98));
  border-color: #3f7d6c;
}
.drawflow .drawflow-node.kind-input .node-head {
  border-bottom-color: rgba(108, 214, 180, 0.24);
}
.drawflow .drawflow-node.kind-input .node-title {
  color: #d8fff0;
}
.drawflow .drawflow-node.kind-input .node-body {
  color: #9ad7c3;
}

.drawflow .drawflow-node.kind-output {
  background: linear-gradient(180deg, rgba(70,57,31,0.98), rgba(45,35,18,0.98));
  border-color: #8f7340;
}
.drawflow .drawflow-node.kind-output .node-head {
  border-bottom-color: rgba(255, 210, 126, 0.24);
}
.drawflow .drawflow-node.kind-output .node-title {
  color: #fff1d5;
}
.drawflow .drawflow-node.kind-output .node-body {
  color: #d5bc86;
}

.drawflow .drawflow-node.kind-agent {
  background: linear-gradient(180deg, rgba(55,34,74,0.98), rgba(35,21,50,0.98));
  border-color: #7a4bb2;
}
.drawflow .drawflow-node.kind-agent .node-head {
  border-bottom-color: rgba(196, 135, 255, 0.24);
}
.drawflow .drawflow-node.kind-agent .node-title {
  color: #f2deff;
}
.drawflow .drawflow-node.kind-agent .node-body {
  color: #c7a2e8;
}

.drawflow .drawflow-node.kind-tool {
  background: linear-gradient(180deg, rgba(24,60,79,0.98), rgba(17,38,52,0.98));
  border-color: #3f7ca0;
}
.drawflow .drawflow-node.kind-tool .node-head {
  border-bottom-color: rgba(114, 196, 255, 0.24);
}
.drawflow .drawflow-node.kind-tool .node-title {
  color: #dbf3ff;
}
.drawflow .drawflow-node.kind-tool .node-body {
  color: #9ec7de;
}

/* Connector points by type */
.drawflow .drawflow-node.kind-input .outputs .output {
  border-color: #6ce0b8;
  background: rgba(108, 224, 184, 0.18);
}
.drawflow .drawflow-node.kind-output .inputs .input {
  border-color: #ffd27e;
  background: rgba(255, 210, 126, 0.2);
}
.drawflow .drawflow-node.kind-agent .inputs .input,
.drawflow .drawflow-node.kind-agent .outputs .output {
  border-color: #c487ff;
  background: rgba(196, 135, 255, 0.18);
}
.drawflow .drawflow-node.kind-tool .inputs .input,
.drawflow .drawflow-node.kind-tool .outputs .output {
  border-color: #72c4ff;
  background: rgba(114, 196, 255, 0.18);
}

/* Control-flow nodes have two outputs that do different things — color
   each socket to match its semantics so the user can tell at a glance
   which one feeds the body / try / first match versus the
   continuation / catch / else. Tooltips on hover (set by
   decorateControlFlowSockets in pipeline_builder.js) carry the full
   explanation. */
.drawflow .drawflow-node.kind-loop .outputs .output_1 {
  border-color: var(--accent-2);
  background: rgba(192, 97, 255, 0.22);
}
.drawflow .drawflow-node.kind-loop .outputs .output_2 {
  border-color: var(--warn);
  background: rgba(255, 200, 87, 0.22);
}
.drawflow .drawflow-node.kind-try_catch .outputs .output_1 {
  border-color: var(--ok);
  background: rgba(56, 211, 159, 0.22);
}
.drawflow .drawflow-node.kind-try_catch .outputs .output_2 {
  border-color: var(--err);
  background: rgba(255, 93, 108, 0.22);
}
/* Conditional: every additional branch (output_2..N) is an "alternate"
   path, so they share the amber. The first branch — typically the
   primary match — gets the ok-green to read as the happy path. The
   per-output rule comes AFTER the catch-all so it overrides for output_1. */
.drawflow .drawflow-node.kind-conditional .outputs .output {
  border-color: var(--warn);
  background: rgba(255, 200, 87, 0.22);
}
.drawflow .drawflow-node.kind-conditional .outputs .output_1 {
  border-color: var(--ok);
  background: rgba(56, 211, 159, 0.22);
}

/* Selected state by node type (override generic highlight) */
.drawflow .drawflow-node.kind-input.selected {
  background: linear-gradient(180deg, rgba(34,66,58,0.98), rgba(20,43,38,0.98)) !important;
  border-color: #6ce0b8;
  box-shadow: 0 0 0 1px rgba(108,224,184,0.9), 0 12px 26px rgba(0,0,0,0.45);
}
.drawflow .drawflow-node.kind-output.selected {
  background: linear-gradient(180deg, rgba(70,57,31,0.98), rgba(45,35,18,0.98)) !important;
  border-color: #ffd27e;
  box-shadow: 0 0 0 1px rgba(255,210,126,0.92), 0 12px 26px rgba(0,0,0,0.45);
}
.drawflow .drawflow-node.kind-agent.selected {
  background: linear-gradient(180deg, rgba(55,34,74,0.98), rgba(35,21,50,0.98)) !important;
  border-color: #c487ff;
  box-shadow: 0 0 0 1px rgba(196,135,255,0.9), 0 12px 26px rgba(0,0,0,0.45);
}
.drawflow .drawflow-node.kind-tool.selected {
  background: linear-gradient(180deg, rgba(24,60,79,0.98), rgba(17,38,52,0.98)) !important;
  border-color: #72c4ff;
  box-shadow: 0 0 0 1px rgba(114,196,255,0.9), 0 12px 26px rgba(0,0,0,0.45);
}

.checklist { padding-left: 1.1rem; }
.checklist li { margin: 0.35rem 0; }

/* The ⚙ button in a step's header (R2-UI-07). */
.node-config-btn {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-base);
  cursor: pointer;
}
.node-config-btn:hover,
.node-config-btn:focus-visible { background: rgba(255, 255, 255, 0.08); color: var(--text); outline: none; }

/* File-pick modal (and a generic .modal shell other features can reuse) */
.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 1rem;
}
body.modal-open { overflow: hidden; }
.modal[hidden] { display: none; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
}
.modal-card {
  position: relative;
  width: min(560px, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
  overflow: hidden;
}
.modal-card > form {
  min-height: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}
.modal-head, .modal-foot {
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
}
/* Shared modal layout (DS-05): header, tabs and footer keep their size;
   only the body scrolls. */
.modal-head, .modal-foot, .modal-tabs { flex-shrink: 0; }
/* Tabbed dialogs keep one height, so switching tabs doesn't make the
   dialog jump (Automation, agent editor). */
.modal-card:has(.modal-tabs) { height: min(760px, calc(100dvh - 2rem)); }
.modal-head { justify-content: space-between; border-bottom: 1px solid var(--border); }
.modal-head h3 { margin: 0; font-size: var(--fs-md); }
.modal-foot { justify-content: flex-end; gap: 0.5rem; border-top: 1px solid var(--border); }
.modal-body {
  min-height: 0;
  padding: 1rem;
  overflow-y: auto;
  flex: 1 1 auto;
}
.modal-stacked-form {
  min-height: 0;
}
.modal-stacked-form .modal-body {
  display: grid;
  gap: 0.9rem;
}
/* Modal section tabs: page tabs (.tabs, R2-UI-01) with modal padding. */
.modal-tabs { margin: 0; padding: 0.35rem 0.75rem 0; flex: 0 0 auto; }
.modal-tab-panel {
  display: none;
  gap: 0.9rem;
}
.modal-tab-panel.is-active {
  display: grid;
}
.modal-section-intro {
  display: grid;
  gap: 0.2rem;
  margin-bottom: 0.2rem;
}
.modal-section-intro h4 {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-md);
}
.modal-section-intro p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}
.modal-check-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
}
.modal-check-group {
  display: grid;
  gap: 0.65rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.02);
}
.modal-check-group > label {
  color: var(--text);
  font-weight: 600;
}
.modal-check-copy {
  margin: 0.15rem 0 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.35;
}
.modal-check-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}
.modal-check-group li label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--muted);
  line-height: 1.35;
}
form.agent-modal-form textarea {
  font-family: var(--font-sans);
}
form.agent-modal-form textarea::placeholder,
form.agent-modal-form input::placeholder {
  font-family: var(--font-sans);
}
.agent-temperature-row { display: flex; align-items: center; gap: 0.5rem; }
.agent-temperature-row .agent-temperature-slider { flex: 1 1 auto; min-width: 0; accent-color: var(--accent); }
form.stacked .agent-temperature-row input[type="number"] { width: 5.2rem; flex: 0 0 auto; }
.agent-modal-form .grid-2 {
  gap: 0.85rem 1rem;
}
.agent-modal-form .agent-custom-model[hidden] {
  display: none;
}
/* AGT-03: instructions mention an ability that is off. */
.agent-ability-hints:empty { display: none; }
.agent-ability-hints { display: grid; gap: 0.4rem; margin: -0.2rem 0 0.6rem; }
.agent-ability-hint {
  margin: 0; padding: 0.45rem 0.6rem; border-left: 3px solid var(--tone);
  border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.03); font-size: var(--fs-base); line-height: 1.45;
}
.agent-ability-hint .btn { margin-left: 0.4rem; }
/* AGT-02: Try it. */
.agent-try-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.agent-try-result { margin-top: 0.85rem; display: grid; gap: 0.6rem; }
.agent-try-result[hidden] { display: none; }
.agent-try-meta { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.agent-try-meta p { flex-basis: 100%; margin: 0.2rem 0 0; }
.agent-try-output { max-height: 320px; overflow: auto; }
/* Phase 2 #17: the previous answer, while a new one is on its way. */
.agent-try-result { transition: opacity 150ms ease; }
.agent-try-result.is-stale { opacity: 0.45; }
.agent-try-sources { margin-top: var(--space-2); }
.agent-try-error { margin: 0; color: var(--status-error); }
.modal-close {
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: var(--fs-lg);
  line-height: 1;
  cursor: pointer;
  padding: 0 0.25rem;
}
.modal-close:hover { color: var(--text); }

/* Wide variant for the read-only node-detail overlay — system_prompt and
   custom_python code blocks need horizontal room to be useful. */
.modal-card-wide {
  width: min(820px, calc(100vw - 2rem));
}

/* Node detail rows: a label column above each value, with separate styling
   for short values, multi-line prose (.detail-pre), and code (.detail-code). */
/* Visual polish 6: form labels 13 px / 500, their help text muted, and
   24 px between the sections of a step's settings. */
.detail-row { margin-bottom: var(--space-6); }
.detail-row:last-child { margin-bottom: 0; }
.detail-label {
  margin-bottom: 6px;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-ui);
}
.detail-label .muted, .detail-label .small { color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-text); }
.detail-val {
  color: var(--text);
  word-break: break-word;
}
.detail-pre {
  margin: 0;
  padding: 0.65rem 0.8rem;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--text);
  max-height: 260px;
  overflow-y: auto;
}
.schema-preview-object {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel-2);
}
.schema-preview-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.schema-preview-fields { list-style: none; margin: 0; padding: 0; }
.schema-preview-field { padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--border); }
.schema-preview-field:last-child { border-bottom: 0; }
.schema-preview-nested {
  margin: 0.5rem -0.75rem -0.65rem;
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,0.018);
}
.schema-preview-nested > .schema-preview-field {
  padding-left: calc(0.75rem + (var(--schema-depth, 0) + 1) * 1rem);
}
.schema-preview-main { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.schema-preview-main code { color: var(--text); font-weight: 650; }
.schema-type,
.schema-required {
  padding: 0.12rem 0.38rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: var(--fs-xs);
}
.schema-required.is-required { border-color: rgba(255, 113, 67, 0.38); color: var(--accent); }
.schema-preview-field p { margin: 0.35rem 0 0; color: var(--muted); font-size: var(--fs-sm); }

.detail-code {
  margin: 0;
  padding: 0.65rem 0.8rem;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  white-space: pre;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-base);
  color: var(--text);
  max-height: 320px;
}
.detail-list {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--text);
}
.detail-list li { padding: 0.15rem 0; }

.ndm-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 0.75rem;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-base);
  resize: vertical;
}
.ndm-textarea:focus {
  outline: none;
  border-color: var(--accent, #5b9dff);
}
.ndm-text-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0.7rem;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-base);
}
.ndm-text-input:focus {
  outline: none;
  border-color: var(--accent, #5b9dff);
}
/* Structured prompt-spec editor (per-node "What does this agent do?"). */
.prompt-spec .spec-rows {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.4rem;
}
.spec-row {
  display: grid;
  grid-template-columns: auto minmax(140px, 1fr) minmax(170px, 1fr) 1.2fr;
  gap: 0.6rem;
  align-items: center;
  padding: 0.45rem 0.6rem;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.spec-row.spec-row-single {
  grid-template-columns: minmax(140px, 1fr) minmax(170px, 1fr) 1.2fr;
}
.spec-field-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}
.spec-field-wrap .spec-path {
  width: 100%;
  box-sizing: border-box;
  padding: 0.35rem 0.55rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-base);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (max-width: 640px) {
  .spec-row, .spec-row.spec-row-single { grid-template-columns: 1fr; }
}
.map-rows {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0.4rem 0 0.6rem;
}
.map-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(180px, 1.3fr) minmax(140px, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.45rem 0.6rem;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.map-row .map-extra[hidden] { display: none; }
.map-row .map-name,
.map-row .map-extra {
  width: 100%;
  box-sizing: border-box;
  padding: 0.35rem 0.55rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-base);
}
.map-row .map-extra { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.map-row.map-row-fixed { grid-template-columns: minmax(160px, 1.1fr) minmax(180px, 1.3fr) minmax(140px, 1fr); }
.map-name-static { min-width: 0; line-height: 1.3; }
.map-name-static .muted { display: block; }
@media (max-width: 640px) {
  .map-row { grid-template-columns: 1fr; }
}
.spec-row.dragging {
  opacity: 0.45;
  border-style: dashed;
}
.spec-drag-handle {
  cursor: grab;
  user-select: none;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-md);
  padding: 0 0.15rem;
  line-height: 1;
}
.spec-drag-handle:active { cursor: grabbing; }
.spec-drag-handle:hover { color: var(--text); }
.spec-row code {
  background: transparent;
  font-size: var(--fs-base);
}
.spec-row-tick {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  user-select: none;
}
.spec-row-tick input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 0;
}
.spec-heading {
  width: 100%;
  box-sizing: border-box;
  padding: 0.35rem 0.55rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-base);
}
.spec-heading:focus {
  outline: none;
  border-color: var(--accent, #5b9dff);
}
.spec-info {
  margin-top: 0.5rem;
  padding: 0.55rem 0.7rem;
  background: var(--panel-2);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
}
.spec-info strong { color: var(--text); }

.file-pick-list { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.inm-existing-files {
  margin-top: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
}
.inm-existing-files summary {
  padding: 0.65rem 0.75rem;
  cursor: pointer;
  color: var(--text);
  user-select: none;
}
.inm-existing-files .file-pick-list,
.inm-existing-files > p {
  margin: 0;
  padding: 0 0.75rem 0.55rem;
}
.inm-existing-files .file-pick-list {
  max-height: 220px;
  overflow-y: auto;
}
.inm-upload-destination {
  flex: 1 1 220px;
  min-width: 0;
}
.inm-upload-destination > span { display: block; margin-bottom: 0.3rem; }
.file-pick-list li { padding: 0.35rem 0; border-bottom: 1px solid var(--border); }
.file-pick-list li:last-child { border-bottom: 0; }
.file-pick-list label {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.6rem;
  align-items: center;
  cursor: pointer;
}
.fpick-name { word-break: break-word; }
.fpick-meta { font-size: var(--fs-xs); }




.chat-thread {
  flex: 1;
  overflow-y: auto;
  padding: 0.85rem 0.75rem 0.35rem;
  scrollbar-gutter: stable;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-height: 0;
}
.chat-empty { padding: 1rem; text-align: center; }
.assistant-empty-state {
  margin: auto;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  color: var(--muted);
}
.assistant-empty-state strong {
  color: var(--text);
  font-size: var(--fs-md);
}
.assistant-empty-state .assistant-empty-copy {
  font-size: var(--fs-base);
  line-height: 1.4;
}
/* AST-02: starter prompts under the empty chat. */
.assistant-suggestions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin-top: 0.5rem; }
.assistant-suggestions:empty { display: none; }
.suggestion-chip {
  padding: 0.35rem 0.7rem;
  border: 1px solid rgba(124, 199, 255, 0.35);
  border-radius: var(--radius-pill);
  background: rgba(124, 199, 255, 0.06);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.suggestion-chip:hover, .suggestion-chip:focus-visible { background: rgba(124, 199, 255, 0.16); border-color: var(--link); }
.assistant-empty-icon {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(124, 199, 255, 0.22);
  border-radius: var(--radius-md);
  background: radial-gradient(circle at 30% 20%, rgba(82, 224, 184, 0.22), transparent 42%),
              linear-gradient(135deg, rgba(255, 122, 69, 0.22), rgba(124, 199, 255, 0.12));
}
.assistant-empty-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--text);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.workbench-sidebar .chat-thread .msg {
  width: 100%;
  max-width: none;
  margin: 0 auto;
}
.msg-body {
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.msg-progress { opacity: 0.85; }
.msg-progress .msg-body { font-size: var(--fs-base); }
.msg-system { opacity: 0.9; }
.msg-system .msg-body { color: var(--warn, #ffc857); font-size: var(--fs-base); }
.msg-thinking {
  border-color: #2a303b;
  background: rgba(28, 31, 39, 0.62);
}
.msg-thinking .msg-body {
  color: var(--muted);
  font-style: italic;
}
.msg-thinking header { display: flex; justify-content: space-between; align-items: center; }
.assistant-stop-btn { font-size: var(--fs-sm); }
.assistant-queued { margin: 0.4rem 0 0; }
.palette-item-name {
  display: block;
  font-weight: 650;
}
.palette-item-description {
  display: block;
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.35;
}
body[data-builder-guidance="expert"] .palette-item-description {
  display: none;
}
body:not(.builder-show-advanced) .detail-row.is-advanced {
  display: none;
}

.builder-help-card {
  width: min(620px, calc(100vw - 2rem));
}
.builder-help-card .modal-head {
  padding: 1rem 1.15rem;
}
.builder-help-card .modal-head h3 {
  margin: 0;
}
.builder-help-card .modal-body {
  display: grid;
  gap: 1rem;
  padding: 1.1rem 1.15rem;
}
.builder-help-card .modal-body > p {
  margin: 0;
  line-height: 1.5;
}
.builder-help-card .modal-body > label:not(.checkbox-row) {
  display: grid;
  gap: 0.45rem;
  font-weight: 700;
}
.builder-help-card select {
  width: 100%;
  padding: 0.62rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-weight: 500;
}
.builder-help-card .checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
}
.builder-help-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}
.builder-help-links .btn {
  justify-content: center;
  text-align: center;
}
.builder-settings-expanded {
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.025);
}
.builder-settings-expanded h4 {
  margin: 0 0 0.65rem;
  font-size: var(--fs-base);
}
.builder-settings-expanded dl {
  display: grid;
  gap: 0.55rem;
  margin: 0;
}
.builder-settings-expanded dl > div {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 0.65rem;
}
.builder-settings-expanded dt {
  color: var(--text);
  font-weight: 750;
}
.builder-settings-expanded dd {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.4;
}
.builder-settings-expanded > p {
  margin: 0.75rem 0 0;
}

.builder-share-card {
  width: min(760px, calc(100vw - 2rem));
  max-height: min(760px, calc(100vh - 2rem));
}
.builder-share-card .modal-head h3 { margin: 0; }

/* In-builder managers: compact enough to scan, roomy enough to edit without
   turning schedules and webhooks back into full-width destination pages. */
.builder-manager-card { max-height: min(88vh, 860px); }
.builder-manager-body { display: grid; gap: 1rem; }
.builder-manager-list { display: grid; gap: .65rem; }
.builder-manager-row {
  padding: .85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel-2);
}
.builder-manager-summary,
.builder-manager-actions { display: flex; align-items: center; gap: .55rem; }
.builder-manager-summary { justify-content: space-between; }
.builder-manager-summary > div { display: grid; gap: .2rem; min-width: 0; }
.builder-manager-actions { flex-wrap: wrap; margin-top: .7rem; }
.builder-manager-actions form { margin: 0; }
.builder-create-panel,
.builder-inline-edit {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel);
}
.builder-create-panel > summary { padding: .75rem .9rem; font-weight: 700; cursor: pointer; }
.builder-inline-edit { border: 0; background: transparent; }
.builder-inline-edit > summary { list-style: none; cursor: pointer; }
.builder-inline-edit > summary::-webkit-details-marker { display: none; }
.builder-inline-edit[open] { flex-basis: 100%; padding: .5rem; border: 1px solid var(--border); }
.builder-action-modal .modal-schedule-form .modal-foot,
.builder-action-modal .modal-stacked-form .modal-foot { padding-inline: 0; }
.builder-action-errors { padding: .7rem .8rem; color: var(--err); border: 1px solid color-mix(in srgb, var(--err) 45%, transparent); border-radius: var(--radius-md); }
.modal-foot-spacer { flex: 1; }
.builder-details-form .modal-body { display: grid; gap: 1.15rem; padding: 1.35rem; }
.builder-field { display: grid; gap: .45rem; }
.builder-field > label { font-weight: 700; color: var(--text); }
.builder-field > label .muted { font-size: var(--fs-sm); font-weight: 500; margin-left: .25rem; }
/* Text fields only: checkboxes keep the app's 16 px square (Stop 2 #3). */
.builder-field input:not([type="checkbox"]):not([type="radio"]),
.builder-field textarea {
  box-sizing: border-box;
  width: 100%;
  padding: .72rem .8rem;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  line-height: 1.45;
  outline: none;
}
.builder-field textarea { min-height: 112px; resize: vertical; }
.builder-field input:not([type="checkbox"]):not([type="radio"]):hover,
.builder-field textarea:hover { border-color: color-mix(in srgb, var(--muted) 65%, var(--border)); }
.builder-field input:not([type="checkbox"]):not([type="radio"]):focus,
.builder-field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.builder-run-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem; color: var(--text); text-decoration: none;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--panel-2);
}
.builder-run-row:hover { border-color: var(--accent); }
.builder-run-row > span:first-child { display: grid; gap: .2rem; }
.builder-run-row small { color: var(--muted); }
.builder-share-card .modal-head p { margin: 0.2rem 0 0; }
.builder-share-body {
  display: grid;
  gap: 1.25rem;
  overflow-y: auto;
}
.share-invite-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 150px auto;
  align-items: start;
  gap: 0.75rem;
}
.share-invite-grid > .btn {
  align-self: start;
  margin-top: 1.72rem;
  min-height: 2.68rem;
}
.share-invite-grid label {
  display: grid;
  gap: 0.35rem;
  font-weight: 700;
}
.share-invite-grid input,
.share-invite-grid select,
.share-person-row select {
  width: 100%;
  padding: 0.56rem 0.62rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-weight: 500;
}
.share-modal-feedback {
  margin: 0.65rem 0 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid rgba(56, 211, 159, 0.35);
  border-radius: var(--radius-md);
  background: rgba(56, 211, 159, 0.07);
  color: var(--ok);
  font-size: var(--fs-sm);
}
.share-colleagues { display: grid; gap: .45rem; margin-top: .7rem; }
.share-colleague-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.share-colleague-chip {
  padding: .36rem .58rem; color: var(--text); background: var(--panel-2);
  border: 1px solid var(--border); border-radius: var(--radius-pill); cursor: pointer;
}
.share-colleague-chip:hover { border-color: var(--accent); color: var(--accent); }
.share-resource-section { padding-top: 1.1rem; border-top: 1px solid var(--border); }
.share-resource-section h4 { margin: 0; }
.share-resource-heading p { margin: .3rem 0 .85rem; }
.share-credential-grant-form {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: end; gap: .7rem; margin-bottom: .8rem;
}
.share-credential-grant-form label { display: grid; gap: .35rem; font-weight: 700; }
.share-credential-grant-form select {
  width: 100%; padding: .58rem .65rem; color: var(--text); background: var(--panel-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit;
}
.share-credential-list { display: grid; gap: .5rem; }
.share-credential-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: .7rem; padding: .7rem; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .02);
}
.share-credential-row > div { display: grid; gap: .18rem; }
.share-credential-row form { margin: 0; }
.credential-priority-form { display: flex; align-items: center; gap: .4rem; margin: 0; }
.credential-table tbody td,
.secret-table tbody td { vertical-align: middle; }
.credential-priority-form input { width: 4.5rem; padding: .45rem; color: var(--text); background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.credential-priority-form .custom-select { width: 4.5rem; }
.credential-priority-form .custom-select-trigger {
  /* Match a standard .btn exactly: 0.9rem text × 1.2 line-height,
     0.5rem vertical padding on each side, and two 1px borders. Keep the
     multiplication pre-computed because CSS calc multiplication is not
     supported consistently across browsers. */
  height: calc(2.08rem + 2px);
  min-height: 0;
  padding: 0.5rem 0.7rem;
  font-size: var(--fs-base);
  line-height: 1.2;
}
.credential-share-person { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: .6rem 0; border-top: 1px solid var(--border); }
.share-modal-feedback.is-error {
  border-color: rgba(255, 93, 108, 0.4);
  background: rgba(255, 93, 108, 0.07);
  color: var(--err);
}
.share-people-section h4 { margin: 0 0 0.65rem; }
#builder-share-list {
  display: grid;
  gap: 0.5rem;
}
.share-person-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
}
.share-person-row > div strong,
.share-person-row > div span { display: block; }
.share-person-row > div span { margin-top: 0.18rem; }
.share-person-row form {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}
@media (max-width: 640px) {
  .share-invite-grid,
  .share-person-row { grid-template-columns: 1fr; }
  .share-invite-grid > .btn { width: 100%; margin-top: 0; }
  .share-credential-grant-form,
  .share-credential-row { grid-template-columns: 1fr; }
  .share-person-row form { align-items: stretch; }
}
.builder-help-card .modal-foot {
  padding: 0.9rem 1.15rem;
}
@media (max-width: 640px) {
  .builder-help-links { grid-template-columns: 1fr; }
}
.builder-guide-card {
  position: absolute;
  z-index: 18;
  right: 1rem;
  bottom: 1rem;
  width: min(360px, calc(100% - 2rem));
  padding: 1rem;
  border: 1px solid rgba(124, 199, 255, 0.4);
  border-radius: var(--radius-md);
  background: rgba(20, 24, 34, 0.97);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.38);
}
.builder-guide-card h3 {
  margin: 0.25rem 0 0.4rem;
  font-size: var(--fs-md);
}
.builder-guide-card p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.guide-step-label {
  color: var(--link);
  font-size: var(--fs-xs);
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.guide-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.85rem;
}
.drawflow .drawflow-node.guide-highlight {
  box-shadow: 0 0 0 3px rgba(124, 199, 255, 0.7), 0 0 24px rgba(124, 199, 255, 0.28);
}
/* AST-10: the tour points at buttons and panels too. */
.guide-spotlight {
  outline: 2px solid var(--link) !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(124, 199, 255, 0.18);
  border-radius: var(--radius-md);
}

.settings-card {
  max-width: 720px;
  margin: 2rem auto;
  padding: 1.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel);
}
.settings-card h1 { margin: 0.15rem 0 0.35rem; }
.settings-card header { margin-bottom: 1.25rem; }
.guidance-options {
  display: grid;
  gap: 0.65rem;
  padding: 0;
  border: 0;
}
.guidance-options legend {
  margin-bottom: 0.55rem;
  font-weight: 700;
}
.guidance-option {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.guidance-option:has(input:checked) {
  border-color: rgba(124, 199, 255, 0.65);
  background: rgba(124, 199, 255, 0.07);
}
.guidance-option strong,
.guidance-option small { display: block; }
.guidance-option small {
  margin-top: 0.2rem;
  color: var(--muted);
  line-height: 1.4;
}
.msg-thinking .msg-body::after {
  content: ".";
  display: inline-block;
  width: 3ch;
  text-align: left;
  animation: thinking-dots 1.2s steps(3, end) infinite;
}
@keyframes thinking-dots {
  0% { content: "."; }
  33% { content: ".."; }
  66% { content: "..."; }
  100% { content: "."; }
}

.step-output {
  margin-top: 0.4rem;
}
.step-output > summary {
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-xs);
  color: var(--muted);
  padding: 0.2rem 0;
  user-select: none;
}
.step-output > summary::-webkit-details-marker { display: none; }
.step-output > summary:hover { color: var(--text); }
.step-output pre {
  margin: 0.35rem 0 0;
  padding: 0.55rem 0.7rem;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  line-height: 1.45;
  max-height: 320px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.proposal-card {
  margin-top: 0.55rem;
  padding: 0.8rem;
  background: rgba(22, 27, 31, 0.82);
  border: 1px solid rgba(108, 224, 184, 0.28);
  border-radius: var(--radius-md);
}
.proposal-card[data-proposal-state="applied"] {
  background: rgba(25, 37, 33, 0.72);
}
.proposal-card[data-proposal-state="dismissed"] {
  background: rgba(24, 25, 31, 0.72);
  border-color: rgba(255,255,255,0.14);
}
.proposal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
}
.proposal-badge {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6ce0b8;
  font-weight: 700;
}
.proposal-state {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0.15rem 0.45rem;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-pill);
  color: #f4c76a;
  background: rgba(244, 199, 106, 0.08);
  font-size: var(--fs-xs);
  line-height: 1.15;
  white-space: nowrap;
}
/* AST-11: the pill's tone says what the state means: needs you (warning),
   done (success), set aside (neutral). */
.proposal-state[data-tone] {
  color: var(--tone);
  background: color-mix(in srgb, var(--tone) 10%, transparent);
  border-color: color-mix(in srgb, var(--tone) 32%, transparent);
}
.proposal-card[data-proposal-state="applied"] .proposal-foot button,
.proposal-card[data-proposal-state="dismissed"] .proposal-foot button {
  opacity: 0.85;
}
/* AST-04: the plan in plain words, and the canvas preview. */
.proposal-plan { margin: 0 0 0.55rem; padding-left: 1.3rem; display: grid; gap: 0.25rem; font-size: var(--fs-base); }
.proposal-details .proposal-summary { margin-top: 0.5rem; }
.drawflow-node.is-preview-new { outline: 2px dashed var(--ok); outline-offset: 3px; }
.drawflow-node.is-preview-new::before {
  content: ""; position: absolute; top: -12px; left: -12px; width: 20px; height: 20px;
  border-radius: var(--radius-pill); z-index: 3;
  background: var(--ok) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306140f' stroke-width='3' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>") center / 12px 12px no-repeat;
}
.drawflow-node.is-preview-changed { outline: 2px solid var(--warn); outline-offset: 3px; }
.drawflow-node.is-preview-changed::before {
  content: ""; position: absolute; top: -12px; left: -12px; width: 20px; height: 20px;
  border-radius: var(--radius-pill); z-index: 3;
  background: var(--warn) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1503' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/></svg>") center / 11px 11px no-repeat;
}
.drawflow-node.is-preview-removed {
  opacity: 0.4; outline: 2px dashed var(--err); outline-offset: 3px;
  filter: grayscale(0.7);
}
.drawflow-node.is-preview-removed::before {
  content: ""; position: absolute; top: -12px; left: -12px; width: 20px; height: 20px;
  border-radius: var(--radius-pill); z-index: 3;
  background: var(--err) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d0508' stroke-width='3' stroke-linecap='round'><path d='M5 12h14'/></svg>") center / 12px 12px no-repeat;
}
.drawflow-node.is-preview-removed .node-title { text-decoration: line-through; }
.drawflow .connection.is-preview-new .main-path { stroke: var(--ok) !important; stroke-dasharray: 7 5; }
.drawflow .connection.is-preview-removed .main-path { stroke: var(--err) !important; stroke-dasharray: 4 5; opacity: 0.55; }
.proposal-preview-legend { display: inline-flex; gap: 0.6rem; font-size: var(--fs-sm); font-weight: 600; }
.proposal-preview-legend > span { display: inline-flex; align-items: center; gap: 0.25rem; }
.proposal-preview-legend .is-new { color: var(--ok); }
.proposal-preview-legend .is-changed { color: var(--warn); }
.proposal-preview-legend .is-removed { color: var(--err); }
.proposal-preview-banner {
  position: absolute; left: 50%; top: 0.85rem; transform: translateX(-50%); z-index: 8;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  /* left:50% would otherwise shrink-wrap it to half the canvas. */
  width: max-content; max-width: calc(100% - 1.7rem); padding: 0.5rem 0.65rem;
  border: 1px solid rgba(56, 211, 159, 0.45); border-radius: var(--radius-md);
  background: rgba(16, 24, 22, 0.96); box-shadow: 0 12px 30px rgba(0,0,0,0.4); font-size: var(--fs-base);
}
.is-previewing-proposal .canvas-toolbar { visibility: hidden; }
/* AST-12: problems the check would report after Apply. */
.proposal-check {
  margin: 0 0 0.6rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--tone) 40%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--tone) 8%, transparent);
  font-size: var(--fs-base);
}
.proposal-check > strong { color: var(--tone); display: block; margin-bottom: 0.35rem; }
.proposal-check ul { margin: 0 0 0.45rem; padding-left: 1.1rem; display: grid; gap: 0.35rem; }
.proposal-check li { display: grid; gap: 0.15rem; }
.proposal-check li.is-fixed .proposal-check-title { color: var(--ok); }
.proposal-check-fixes { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.15rem; }
/* AST-07: new nodes after Apply, and the applied card's ⋯ menu. */
.drawflow-node.is-just-added { outline: 2px solid var(--ok); outline-offset: 3px; transition: outline-color 0.6s ease; }
.proposal-more .action-menu-list { min-width: 15rem; }
.proposal-summary {
  margin: 0 0 0.55rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid rgba(108, 224, 184, 0.16);
  border-radius: var(--radius-sm);
  background: rgba(108, 224, 184, 0.07);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 650;
  line-height: 1.35;
}
.proposal-rationale {
  margin: 0 0 0.5rem;
  font-size: var(--fs-base);
  line-height: 1.45;
}
.proposal-note {
  margin: 0 0 0.65rem;
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.4;
}
.proposal-details {
  margin: 0 0 0.65rem;
}
.proposal-details > summary {
  margin: 0 0 0.35rem;
  color: var(--muted);
  cursor: pointer;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.06em;
  list-style: none;
  text-transform: uppercase;
}
.proposal-details > summary::-webkit-details-marker { display: none; }
.proposal-ops {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.proposal-ops li {
  padding: 0.45rem 0.55rem;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.16);
  font-size: var(--fs-sm);
  line-height: 1.4;
}
.proposal-ops code {
  background: rgba(0,0,0,0.25);
  padding: 0 0.35rem;
  border-radius: var(--radius-sm);
  margin-right: 0.35rem;
  font-size: var(--fs-xs);
}
/* Phase 2 #5: applied, but the check stops runs: say so above the fix. */
.proposal-blocked-note { display: flex; align-items: flex-start; gap: var(--space-2); margin: var(--space-2) 0 0; padding: var(--space-2) var(--space-3); border: 1px solid rgba(255, 93, 108, 0.45); border-radius: var(--radius-md); background: rgba(255, 93, 108, 0.08); font-size: var(--fs-sm); line-height: 1.45; }
.proposal-blocked-note .icon { flex: none; margin-top: 2px; color: var(--err); }
.proposal-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-start;
}
.proposal-foot .btn {
  min-height: 34px;
  padding: 0.4rem 0.7rem;
  font-size: var(--fs-sm);
  line-height: 1.25;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.context-approval-card {
  margin-top: 0.55rem;
  padding: 0.7rem 0.8rem;
  background: rgba(124, 199, 255, 0.06);
  border: 1px solid rgba(124, 199, 255, 0.26);
  border-radius: var(--radius-md);
}
.context-approval-card .proposal-badge {
  color: var(--link);
}
.context-approval-card.is-approved,
.context-approval-card.is-dismissed {
  background: rgba(255,255,255,0.035);
  border-color: rgba(255,255,255,0.12);
}
.context-approval-card.is-approved .proposal-badge {
  color: var(--ok);
}
.context-approval-card.is-dismissed .proposal-badge {
  color: var(--muted);
}
.context-approval-history {
  margin-top: 0.45rem;
}
.context-approval-history > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.35;
}
.context-approval-history .context-approval-list {
  margin-top: 0.55rem;
}
.context-approval-list {
  list-style: none;
  margin: 0 0 0.55rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.context-approval-list li {
  font-size: var(--fs-sm);
  line-height: 1.4;
  padding-left: 1rem;
  position: relative;
}
.context-approval-list li::before {
  content: "•";
  position: absolute;
  left: 0.2rem;
  color: var(--muted);
}

/* Lint card — pre-run check results. Mirrors proposal-card structure so
   it sits comfortably in the same chat thread. Severity is reflected in
   each row's accent color (red for error, amber for warning). */
.lint-card {
  margin-top: 0.55rem;
  padding: 0.7rem 0.8rem;
  background: rgba(240, 180, 41, 0.06);
  border: 1px solid rgba(240, 180, 41, 0.28);
  border-radius: var(--radius-md);
}
.lint-card[data-lint-state="overridden"] { opacity: 0.7; }
.lint-card[data-lint-state="resolved"] { opacity: 0.75; border-color: rgba(56, 211, 159, 0.3); }
.lint-state-pill.is-resolved { color: var(--ok); }
.lint-row-resolved { border-left: 3px solid rgba(56, 211, 159, 0.6); cursor: default; }
.lint-row-resolved .lint-title { color: var(--muted); font-weight: 500; }
.lint-sev-resolved { background: rgba(56, 211, 159, 0.14); color: var(--ok); }
.msg-resolved { margin: 0.3rem 0 0; color: var(--ok); font-size: var(--fs-sm); }
.msg.is-resolved .msg-body { color: var(--muted); }
.lint-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.45rem;
}
.lint-badge {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #f0b429;
}
.lint-state-pill {
  font-size: var(--fs-xs);
  color: var(--muted);
}
.lint-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.lint-row {
  display: flex;
  gap: 0.55rem;
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius-md);
  background: rgba(0,0,0,0.2);
  cursor: pointer;
}
.lint-row:hover { background: rgba(0,0,0,0.3); }
.lint-row-error  { border-left: 3px solid #ff6b6b; }
.lint-row-warning { border-left: 3px solid #f0b429; }
.lint-sev {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.05rem 0.4rem;
  border-radius: var(--radius-sm);
  align-self: flex-start;
  white-space: nowrap;
}
.lint-sev-error   { background: rgba(255, 107, 107, 0.18); color: #ff8b8b; }
.lint-sev-warning { background: rgba(240, 180, 41, 0.18); color: #f0b429; }
.lint-text { flex: 1; min-width: 0; }
.lint-title { font-size: var(--fs-base); font-weight: 600; line-height: 1.35; }
.lint-detail {
  margin-top: 0.18rem;
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--muted);
}
.lint-fix-row {
  margin-top: 0.45rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.lint-fix-btn, .lint-show-btn, .lint-config-btn {
  font-size: var(--fs-xs);
  padding: 0.25rem 0.6rem;
  white-space: nowrap;
}
/* Run with a blocking check error: what stops it, before any input. */
.rim-blocked { display: grid; gap: var(--space-3); }
.rim-blocked-lead { margin: 0; line-height: 1.45; }
.rim-blocked-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.rim-blocked-list li { display: grid; gap: 2px; padding: var(--space-2) var(--space-3); border: 1px solid rgba(255, 93, 108, 0.45); border-radius: var(--radius-md); background: rgba(255, 93, 108, 0.08); }
.rim-blocked-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.lint-foot {
  display: flex;
  justify-content: flex-end;
}
/* Creation ops carry extra structure (chips, descriptions, optional code or
   schema previews). The plain ops above stay one-line; these can expand. */
.op-chip {
  display: inline-block;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.05rem 0.4rem;
  border-radius: var(--radius-sm);
  background: rgba(192, 97, 255, 0.15);
  color: var(--accent-2);
  margin: 0 0.3rem 0 0;
  vertical-align: 1px;
}
.op-desc {
  margin: 0.18rem 0 0.25rem;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.op-meta {
  margin-top: 0.2rem;
  font-size: var(--fs-xs);
}
.op-block {
  margin-top: 0.3rem;
}
.op-block > summary {
  cursor: pointer;
  font-size: var(--fs-xs);
  color: var(--muted);
}
.op-block > summary:hover {
  color: var(--text);
}
.op-block pre {
  margin: 0.3rem 0 0;
  padding: 0.5rem 0.6rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  line-height: 1.4;
  max-height: 280px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* The Input dialog stacks its segmented controls above their panes. */
.inm-seg { margin-bottom: 0.85rem; }

.inm-pane[hidden] { display: none; }
.inm-label { display: block; margin-bottom: 0.35rem; font-size: var(--fs-sm); }
.inm-input {
  width: 100%;
  padding: 0.55rem 0.7rem;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  margin-bottom: 0.9rem;
  box-sizing: border-box;
}
.inm-ask-fields[hidden] { display: none; }
.inm-ask-fields > p { margin: 0 0 0.75rem; }
.inm-source { display: flex; width: fit-content; }
#inm-file-pane .checkbox-row { margin-bottom: 0.8rem; }

/* Run dialog: one field per Input that asks for its value. */
.rim-fields { display: flex; flex-direction: column; gap: 1rem; }
.rim-field label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.rim-fields .rim-field textarea,
.rim-fields .rim-field select {
  width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0.7rem;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-family: var(--font-sans);
}
.rim-field textarea { min-height: 4.5rem; resize: vertical; }
.rim-field textarea:focus,
.rim-field select:focus {
  border-color: #59657b;
  outline: 2px solid rgba(124, 199, 255, 0.16);
}
.rim-field.has-error textarea,
.rim-field.has-error select { border-color: var(--err); }
.rim-recent { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin-top: 0.45rem; }
.rim-recent-chip {
  appearance: none;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  border-radius: var(--radius-pill);
  padding: 0.15rem 0.6rem;
  font-size: var(--fs-xs);
  cursor: pointer;
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rim-recent-chip:hover { border-color: var(--accent); }
.rim-file-row { display: flex; gap: 0.5rem; align-items: center; }
.rim-file-row select { flex: 1 1 auto; min-width: 0; }
.rim-hint { margin: 0; }

.key-agent-list { margin: 0.2rem 0 0.9rem; padding-left: 1.2rem; }
.rim-error { margin: 0; color: var(--err); font-size: var(--fs-base); }
#inm-text,
#inm-test-payload,
#vsm-query-template {
  width: 100%;
  padding: 0.55rem 0.7rem;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--fs-base);
  line-height: 1.45;
  resize: vertical;
  min-height: 140px;
  box-sizing: border-box;
}
#inm-test-payload { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
#inm-text:focus,
#inm-test-payload:focus,
#vsm-query-template:focus {
  border-color: #59657b;
  outline: 2px solid rgba(124, 199, 255, 0.16);
}
#vsm-query-template { min-height: 80px; }
#vsm-max-results {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
}
#vsm-max-results:focus {
  border-color: #59657b;
  outline: 2px solid rgba(124, 199, 255, 0.16);
}
.inm-upload-row {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0.6rem;
}
.inm-upload-row .um-credential {
  flex: 1 1 220px;
  min-width: 0;
}

/* ---------- Run trace (run_detail page + builder live overlay) ---------- */

/* run_detail uses the workbench frame with a full-width canvas and the
   drawer floating as an absolute overlay on the right. Floating it (rather
   than reserving a grid column) means the close button can actually slide
   it off-screen and reclaim the full canvas width — and `overflow: hidden`
   on the parent stops the off-screen drawer from creating a page-wide
   horizontal scrollbar. */
.run-trace-frame .workbench-body {
  grid-template-columns: 1fr;
  position: relative;
  overflow: hidden;
}
.run-trace-frame .workbench-body .canvas-wrapper { order: 1; }
.run-trace-frame {
  display: block;
  min-width: 0;
}
.run-trace-frame .workbench-topbar {
  min-width: 0;
}
.run-trace-frame .topbar-left {
  min-width: 0;
  flex-wrap: wrap;
}
.run-trace-frame .topbar-left h1 {
  min-width: 0;
}
.run-trace-frame .workbench-body {
  /* Tall by default; drag the corner to resize (the canvas refits). */
  height: clamp(420px, 64vh, 1100px);
  min-height: 280px;
  resize: vertical;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.run-trace-frame .canvas-wrapper {
  height: 100%;
  min-height: 0;
}
.run-trace-frame .canvas-wrapper[hidden],
.run-steps[hidden] { display: none; }
/* Read-only view: nothing to configure here. */
.run-trace-frame .node-config-btn { display: none; }

.run-view-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.9rem;
  padding: 0.55rem 1rem;
}
.run-steps {
  height: 100%;
  overflow: auto;
  padding: 0.75rem 1rem;
  box-sizing: border-box;
}
@media (min-width: 901px) {
  .run-trace-frame .workbench-body:has(.run-drawer.is-open) .run-steps { padding-right: calc(min(420px, 90vw) + 1rem); }
}
.run-step-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.run-step-row {
  appearance: none;
  width: 100%;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto 4.5rem 4.5rem;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.run-step-row:hover, .run-step-row:focus-visible { border-color: #59657b; }
.run-step-row .rs-order { color: var(--muted); font-variant-numeric: tabular-nums; }
.run-step-row .rs-name { display: flex; flex-direction: column; min-width: 0; }
.run-step-row .rs-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-step-row .run-state { margin-left: 0; }
.run-step-row .rs-dur, .run-step-row .rs-cost { color: var(--muted); font-size: var(--fs-base); text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .run-step-row { grid-template-columns: 1.5rem minmax(0, 1fr) auto; }
  .run-step-row .rs-dur, .run-step-row .rs-cost { display: none; }
}

.run-state {
  margin-left: 0.6rem;
  text-transform: capitalize;
}
/* DS-03: run states use the status tokens. */

.badge { margin-left: 0.5rem; }
/* Run-page header chip showing live token + cost totals. Numeric content
   uses tabular figures so the digits don't wobble between poll ticks. */
.badge-cost {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* Per-node trace state — applied on top of any .drawflow-node.
   NOTE: do NOT set `position: relative` here. Drawflow positions nodes with
   `position: absolute` + inline left/top; overriding that collapses every
   node to the canvas corner. The .trace-chip below uses `position: absolute`
   which already anchors to the node's absolute box without needing a
   `position: relative` override. */
.drawflow-node.node-state--pending { opacity: 0.65; }
.drawflow-node.node-state--running {
  box-shadow: 0 0 0 2px var(--link), 0 0 24px rgba(124,199,255,0.35);
  animation: trace-pulse 1.4s ease-in-out infinite;
}
.drawflow-node.node-state--completed {
  box-shadow: 0 0 0 2px var(--ok);
}
.drawflow-node.node-state--failed {
  box-shadow: 0 0 0 2px var(--err), 0 0 22px rgba(255,93,108,0.35);
}
.drawflow-node.node-state--skipped { opacity: 0.45; }
@keyframes trace-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--link), 0 0 14px rgba(124,199,255,0.25); }
  50%      { box-shadow: 0 0 0 2px var(--link), 0 0 28px rgba(124,199,255,0.55); }
}

/* RUN-02: ability usage after a run. */
.ability-chip {
  position: absolute;
  bottom: -11px;
  right: 10px;
  padding: 0.05rem 0.45rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  font-size: var(--fs-xs);
  white-space: nowrap;
  pointer-events: none;
}
.ability-chip[data-used="1"] { color: var(--ok); border-color: rgba(56, 211, 159, 0.45); }
.trace-chip {
  position: absolute;
  top: -10px;
  right: -10px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  font-size: var(--fs-xs);
  display: inline-grid;
  place-items: center;
  font-weight: 600;
  z-index: 2;
  pointer-events: none;
}
.trace-chip[data-status="running"]   { background: rgba(124,199,255,0.18); color: var(--link); border-color: var(--link); }
.trace-chip[data-status="completed"] { background: rgba(56,211,159,0.18);  color: var(--ok);   border-color: var(--ok); }
.trace-chip[data-status="failed"]    { background: rgba(255,93,108,0.22);  color: var(--err);  border-color: var(--err); }
.trace-chip[data-status="skipped"]   { background: var(--panel-2);          color: var(--muted); }

/* Traversed edges — Drawflow renders SVG <path>s inside .connection.
   Color the actual <path> rather than the SVG container. */
/* Wins over the type tints (same specificity, later in the file). */
.drawflow .connection.traversed .main-path {
  stroke: var(--ok);
  stroke-width: 4px;
  filter: drop-shadow(0 0 6px rgba(56,211,159,0.45));
}

/* Side drawer for step inspection — absolutely positioned overlay so the
   close button can fully slide it off-screen. */
.run-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--node-panel-w, min(420px, 90vw));
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(24,26,34,0.96), rgba(16,18,25,0.98));
  box-shadow: -18px 0 36px rgba(0,0,0,0.4);
  min-height: 0;
  transform: translateX(100%);
  /* Closed means gone: hidden once it has slid out, so neither keyboard
     focus nor a scrolled wrapper can leave a sliver of it on screen (BUG-19). */
  visibility: hidden;
  transition: transform 220ms ease, visibility 0s linear 220ms;
  z-index: 6;
}
.run-drawer.is-open { transform: translateX(0); visibility: visible; transition: transform 220ms ease; }
/* Keep the canvas toolbar (undo, zoom, fit) clear of an open drawer
   (a side panel from tablet width up; on phones it is a bottom sheet). */
@media (min-width: 641px) {
  .canvas-wrapper:has(.run-drawer.is-open) .canvas-toolbar {
    right: calc(var(--node-panel-w, min(420px, 90vw)) + 0.85rem);
    /* A narrow canvas beside the panel: wrap the toolbar, don't cut it. */
    max-width: calc(100% - var(--node-panel-w, min(420px, 90vw)) - 1.7rem);
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}
.run-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
}
.run-drawer-head h3 {
  margin: 0;
  font-size: var(--fs-md);
}
.run-drawer-body {
  padding: 0.9rem 1rem 1.4rem;
  overflow: auto;
  flex: 1;
}
.run-drawer-body h4 {
  margin: 1rem 0 0.4rem;
  font-size: var(--fs-base);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.run-drawer-body pre.json {
  background: var(--panel-2);
  border: 1px solid var(--border);
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 360px;
  overflow: auto;
}
.trace-meta {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 0.35rem 0.85rem;
  margin: 0 0 0.6rem;
  font-size: var(--fs-base);
}
.trace-meta dt { color: var(--muted); }
.trace-meta dd { margin: 0; }

.drawer-actions {
  display: flex;
  gap: 0.5rem;
  margin: 0.4rem 0 0.85rem;
  flex-wrap: wrap;
}

/* Per-failed-step "Ask assistant" debug thread. Lives at the bottom of the
   run-drawer body for any step.status === "failed". Visually distinct from
   the input/output panels (slight accent border) so it reads as an
   interactive control rather than another data block. */
.debug-chat-heading {
  margin-top: 1.1rem !important;
  color: var(--link) !important;
}
.debug-chat {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.7rem 0.8rem 0.8rem;
  border: 1px solid rgba(124,199,255,0.22);
  border-radius: var(--radius-md);
  background: rgba(124,199,255,0.04);
}
.debug-chat-thread {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
}
.debug-chat-empty {
  margin: 0;
  font-size: var(--fs-sm);
}
.debug-msg {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.debug-msg-label {
  font-size: var(--fs-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.debug-msg-body {
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  font-size: var(--fs-base);
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.debug-msg-user .debug-msg-body {
  background: rgba(124,199,255,0.08);
  border-color: rgba(124,199,255,0.28);
  align-self: flex-end;
  max-width: 90%;
}
.debug-msg-assistant .debug-msg-body {
  background: var(--panel-2);
}
.debug-msg-thinking .debug-msg-body {
  color: var(--muted);
  font-style: italic;
}
.debug-thinking-dots::after {
  content: ".";
  display: inline-block;
  width: 3ch;
  text-align: left;
  animation: debug-dots 1.2s steps(3, end) infinite;
}
@keyframes debug-dots {
  0% { content: "."; }
  33% { content: ".."; }
  66% { content: "..."; }
  100% { content: "."; }
}
.debug-chat-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.debug-chat-presets .link-btn {
  margin-left: 0;
  font-size: var(--fs-sm);
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  text-decoration: none;
  background: var(--panel-2);
}
.debug-chat-presets .link-btn:hover {
  border-color: rgba(124,199,255,0.45);
}
.debug-chat-input {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
}
.debug-chat-textarea {
  flex: 1;
  resize: vertical;
  min-height: 2.4rem;
  max-height: 8rem;
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: inherit;
  font: inherit;
  font-size: var(--fs-base);
}
.debug-chat-textarea:focus {
  outline: none;
  border-color: rgba(124,199,255,0.55);
}
.debug-chat-send {
  flex: 0 0 auto;
}
/* Highlighted action bar pinned to the top of the drawer when the run is
   paused on this node (Continue / Re-run from here). */
.drawer-actions-primary {
  margin: -0.2rem 0 1rem;
  padding: 0.7rem 0.8rem;
  background: rgba(124,199,255,0.06);
  border: 1px solid rgba(124,199,255,0.2);
  border-radius: var(--radius-md);
}
.drawer-actions-primary .btn.primary {
  border-color: var(--ok);
  color: var(--ok);
  background: rgba(56,211,159,0.08);
}
.drawer-actions-primary .btn.primary:hover {
  background: rgba(56,211,159,0.18);
}
.btn-small { min-height: var(--h-sm); padding: 0 10px; }

.link-btn {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--link);
  cursor: pointer;
  font-size: var(--fs-xs);
  padding: 0;
  margin-left: 0.5rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 400;
}
.link-btn:hover { color: var(--text); }
.run-drawer-body h4 { display: flex; align-items: center; }

/* Expanded view modal — bigger than the standard 560px modal-card */
.expand-modal-card {
  width: min(960px, calc(100vw - 2rem));
  max-height: calc(100vh - 3rem);
}
.expand-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.expand-content {
  margin: 0;
  background: var(--panel-2);
  border: 1px solid var(--border);
  padding: 0.9rem 1rem;
  border-radius: var(--radius-md);
  font-size: var(--fs-base);
  overflow-wrap: anywhere;
  max-height: calc(100vh - 10rem);
  overflow: auto;
}

/* Run-detail final/error cards sit below the canvas */
.run-trace-frame .run-final,
.run-trace-frame .run-error,
.run-trace-frame .run-cancelled-card {
  margin: 1rem;
  min-width: 0;
  overflow: hidden;
}
.run-trace-frame .run-final pre,
.run-trace-frame .run-error pre {
  max-width: 100%;
  margin: 0.75rem 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  overflow-x: auto;
  line-height: 1.45;
}

/* Cancelled run: neutral, not an error (BUG-20). */
.run-cancelled-card { border-color: rgba(255, 200, 87, 0.3); }
.run-cancelled-card h3 { margin: 0 0 0.35rem; }
.run-cancelled-card p { margin: 0; }
.run-cancelled-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.run-partial > .muted { margin: 0.2rem 0 0; }

/* Builder live overlay: a small floating card shown while a run is active */
.builder-trace-banner {
  position: absolute;
  left: 0.85rem;
  bottom: 0.85rem;
  max-width: calc(100% - 1.7rem);
  z-index: 5;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  padding: 0.35rem 0.75rem 0.35rem 0.85rem;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-pill);
  background: rgba(18,20,27,0.88);
  backdrop-filter: blur(8px);
  font-size: var(--fs-sm);
  color: var(--text);
  box-shadow: 0 12px 28px rgba(0,0,0,0.28);
}
.builder-trace-banner .pip {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--link);
  box-shadow: 0 0 8px var(--link);
  animation: trace-pulse 1.4s ease-in-out infinite;
}
.builder-trace-banner.is-done .pip   { background: var(--ok);  box-shadow: 0 0 8px var(--ok);  animation: none; }
.builder-trace-banner.is-failed .pip { background: var(--err); box-shadow: 0 0 8px var(--err); animation: none; }
.builder-trace-banner.is-paused .pip { background: #f5b85a; box-shadow: 0 0 8px #f5b85a; animation: none; }
.builder-trace-banner.is-cancelled .pip { background: var(--muted); box-shadow: none; animation: none; }
.builder-trace-banner .continue-btn {
  color: var(--ok);
  border: 1px solid rgba(56,211,159,0.35);
  font-weight: 600;
}
.builder-trace-banner .continue-btn:hover {
  background: rgba(56,211,159,0.12);
  color: var(--ok);
}
.builder-trace-banner .cancel-btn {
  color: var(--err);
  border: 1px solid rgba(255,93,108,0.3);
}
.builder-trace-banner .cancel-btn:hover {
  background: rgba(255,93,108,0.12);
  color: var(--err);
}

/* Run-cluster (Step toggle + Run button) — visually grouped so the build/run
   controls read as one unit, separated from secondary actions. */
.run-group {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.run-group .run-btn { margin: 0; }

/* Step-mode toggle in the topbar. Native checkbox is hidden and replaced
   with a custom box drawn via .step-toggle-box so the control matches the
   rounded, dark surfaces. */
.step-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  background: transparent;
  transition: background-color 120ms ease, color 120ms ease;
}
.step-toggle:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.step-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.step-toggle-box {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: 1px solid #3a4150;
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  display: inline-grid;
  place-items: center;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.step-toggle-box::after {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid #1a0f0a;
  border-bottom: 2px solid #1a0f0a;
  transform: rotate(-45deg) translate(1px, -1px) scale(0);
  transition: transform 120ms ease;
}
.step-toggle:has(input:checked) {
  color: var(--text);
}
.step-toggle:has(input:checked) .step-toggle-box {
  background: var(--accent);
  border-color: var(--accent);
}
.step-toggle:has(input:checked) .step-toggle-box::after {
  transform: rotate(-45deg) translate(1px, -1px) scale(1);
}
.step-toggle:focus-within {
  outline: 2px solid rgba(124, 199, 255, 0.32);
  outline-offset: 1px;
}
.builder-trace-banner button {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: var(--fs-sm);
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-md);
}
.builder-trace-banner button:hover { color: var(--text); background: var(--panel-2); }
.builder-trace-banner a { color: var(--link); text-decoration: none; font-weight: 500; }
.builder-trace-banner a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  /* Drawer covers the canvas full-width on narrow screens. */
  .run-trace-frame .run-drawer { width: 100%; max-width: 100%; }
}
/* MOB-04: on phones step details are a bottom sheet over at most 60% of
   the canvas, so the graph stays in view; it opens only on a tap (RUN-05). */
@media (max-width: 640px) {
  .run-drawer,
  .run-trace-frame .run-drawer {
    top: auto; left: 0; right: 0; bottom: 0;
    width: 100%; max-width: 100%; height: 60%; max-height: 60%;
    border-left: 0; border-top: 1px solid var(--border); border-radius: var(--radius-md) var(--radius-md) 0 0;
    box-shadow: 0 -18px 36px rgba(0, 0, 0, 0.45);
    background: var(--panel);
    transform: translateY(100%);
  }
  .run-drawer.is-open { transform: translateY(0); }
  .run-trace-frame .workbench-body:has(.run-drawer.is-open) .run-steps { padding-bottom: 62vh; }
  .run-drawer-head { position: relative; padding-top: 1.1rem; }
  .run-drawer-head::before {
    content: ""; position: absolute; top: 0.4rem; left: 50%; width: 36px; height: 4px;
    border-radius: var(--radius-pill); background: var(--border); transform: translateX(-50%);
  }
}

@media (max-width: 1120px) {
  .pipeline-workbench {
    --sidebar-width: min(380px, 42vw);
    --sidebar-min-width: 300px;
  }
  .param-row { grid-template-columns: 1fr 95px 1fr auto; }
}

@media (max-width: 900px) {
  /* MOB-03: the links are behind the menu button here, so the bell and
     avatar stay on the same row as the logo. */
  .topnav {
    gap: 0.85rem;
  }
  .public-page .topnav {
    align-items: center;
    flex-direction: row;
    height: var(--landing-nav-h);
    min-height: var(--landing-nav-h);
    padding: 0 0.9rem;
  }
  .navlinks {
    width: 100%;
    gap: 0.65rem;
    flex-wrap: wrap;
  }
  .auth-shell {
    grid-template-columns: 1fr;
    align-content: center;
    gap: 1.25rem;
  }
  .auth-copy h1 {
    font-size: 2.25rem;
  }
  .auth-copy p {
    font-size: var(--fs-md);
  }
  .auth-card {
    padding: 1rem;
  }
  .auth-links {
    flex-direction: column;
  }
  .public-page {
    --landing-nav-h: 66px;
  }
  .landing-main {
    width: 100%;
    max-width: none;
  }
  .landing-page {
    scroll-padding-top: 66px;
  }
  @supports selector(html:has(body.landing-page)) {
    html:has(body.landing-page) {
      --landing-nav-h: 66px;
      scroll-padding-top: var(--landing-nav-h);
    }
  }
  .landing-slide {
    height: auto;
    min-height: calc(100vh - var(--landing-nav-h));
    overflow: visible;
  }
  .landing-hero {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 3rem 0;
  }
  .landing-hero h1 {
    font-size: clamp(2.55rem, 9vw, 4rem);
  }
  .landing-demo {
    order: -1;
  }
  .demo-stage {
    min-height: 360px;
  }
  .landing-features,
  .landing-operations {
    padding: 3.5rem 0;
  }
  /* Tablets and phones: as tall as its content, not a whole screen. */
  .landing-video { min-height: 0; padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .landing-video-body { width: 100%; min-width: 0; }
  .landing-feature-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .landing-feature-grid div {
    min-height: 150px;
  }
  .feature-visual {
    height: 68px;
  }
  main.wrap > form.stacked {
    padding: 0.85rem;
  }
  .pipeline-workbench {
    height: calc(100dvh - 61px);
    min-height: 0;
    --sidebar-width: 100%;
    --sidebar-min-width: 0px;
    --sidebar-max-width: 100%;
  }
  .workbench-frame {
    height: 100%;
    min-height: 0;
  }
  .workbench-topbar {
    align-items: stretch;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 0.6rem;
    min-height: 0;
    overflow: visible;
    padding: 0.6rem 0.7rem;
  }
  .topbar-left {
    flex: 0 0 auto;
    width: 100%;
    gap: 0.5rem;
    row-gap: 0.45rem;
  }
  .topbar-left h1 {
    flex: 1 1 auto;
  }
  .save-state {
    max-width: 34vw;
    min-height: 26px;
  }
  .lint-pill {
    flex: 0 0 auto;
    min-height: 28px;
    padding-inline: 0.55rem;
  }
  .lint-pill-text {
    max-width: 28vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar-actions {
    flex: 0 0 auto;
    width: calc(100vw - 1.4rem);
    min-height: 38px;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.2rem;
    scrollbar-width: none;
  }
  .topbar-actions::-webkit-scrollbar {
    display: none;
  }
  .topbar-actions > .btn,
  .topbar-actions > .run-group {
    flex: 0 0 auto;
  }
  .topbar-actions .btn,
  .topbar-actions .step-toggle {
    white-space: nowrap;
  }
  .workbench-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }
  .sidebar-resizer { display: none; }
  .workbench-sidebar {
    display: contents;
  }
  .tab-btn.tab-btn-pipeline { display: inline-flex; }
  .sidebar-tabs {
    order: 1;
    position: relative;
    flex: 0 0 auto;
    overflow-x: auto;
    padding: 0.45rem 0.7rem 0;
    border-top: 1px solid rgba(255,255,255,0.04);
    background: rgba(18, 20, 27, 0.98);
    scrollbar-width: none;
  }
  .sidebar-tabs::-webkit-scrollbar {
    display: none;
  }
  .sidebar-tabs .tab-btn {
    flex: 0 0 auto;
  }
  .workbench-sidebar .tab-panel {
    order: 2;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(24,26,34,0.96), rgba(16,18,25,0.98));
  }
  .workbench-sidebar .chat-thread {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
  .workbench-sidebar .builder-chat-form {
    margin-bottom: max(0.75rem, env(safe-area-inset-bottom));
  }
  .tab-panel[data-panel="nodes"] .palette {
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }
  .canvas-wrapper[data-panel="pipeline"] {
    order: 2;
    display: none;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
  }
  .canvas-wrapper[data-panel="pipeline"].is-active { display: block; }
  .canvas-toolbar {
    top: 0.6rem;
    right: 0.6rem;
  }
  .tab-panel[data-panel="nodes"] .palette { max-height: none; }
  .param-row { grid-template-columns: 1fr; }
  .builder-chat-form { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .topnav {
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
  }
  .wrap {
    margin: 1rem auto 0;
    padding: 0 0.875rem max(2rem, env(safe-area-inset-bottom));
  }
  .page-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .cards,
  .cards.catalog-cards {
    grid-template-columns: 1fr;
    padding-bottom: 1rem;
  }
  .nav-left,
  .nav-right {
    min-width: 0;
  }
  .brand {
    min-width: 0;
  }
  .brand-text {
    display: inline;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar-left {
    flex-wrap: wrap;
  }
  .topbar-left h1 {
    flex-basis: 100%;
  }
  .save-state {
    max-width: 42vw;
  }
  .lint-pill-text {
    max-width: 36vw;
  }
  .topbar-actions {
    gap: 0.4rem;
  }
  .topbar-actions .btn:not(.icon-btn) { padding-inline: 0.72rem; }
  .run-group { gap: var(--space-1); }
  .step-toggle {
    gap: 0.35rem;
    padding: 0.28rem 0.5rem;
    font-size: var(--fs-sm);
  }
  .canvas-wrapper {
    min-height: 0;
    height: auto;
    flex-basis: auto;
  }
  .canvas-toolbar {
    left: 0.6rem;
    right: auto;
    max-width: calc(100vw - 1.2rem);
  }
  .canvas-tool-btn {
    width: 30px;
    height: 30px;
  }
  .zoom-readout {
    min-width: 2.7rem;
    font-size: var(--fs-xs);
  }
  .workbench-sidebar {
    max-height: none;
  }
  .sidebar-tabs {
    z-index: 3;
  }
  .drawflow .drawflow-node {
    width: 200px;
    min-width: 0;
  }
  .drawflow .drawflow-node .node-head {
    gap: 0.45rem;
    padding: 0.52rem 0.62rem;
    font-size: var(--fs-sm);
  }
  .drawflow .drawflow-node .node-body {
    padding: 0.46rem 0.62rem 0.52rem;
    font-size: var(--fs-xs);
  }
}

/* ===========================================================
   Schedules, notifications, live-run UI
   =========================================================== */

.page-head-actions { display: inline-flex; flex-wrap: wrap; align-items: stretch; gap: 0.5rem; max-width: 100%; }
/* A form in the row (Import) sizes like its neighbours. */
.page-head-actions > form.inline-form { display: flex; }
.page-head-actions > form.inline-form > .btn { display: inline-flex; align-items: center; }

.admin-assignment-status,
.admin-assignment-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.admin-assignment-status {
  margin: 1rem 0;
}
.admin-assignment-banner {
  justify-content: space-between;
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid rgba(124,199,255,0.22);
  background: rgba(124,199,255,0.07);
}
.admin-assignment-banner > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.inline-role-form {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.inline-role-form select,
.share-form select {
  width: auto;
  min-width: 120px;
}
.share-owner-card h3,
.share-owner-card p {
  margin-top: 0;
}
.pipeline-read-only .drawflow .drawflow-node {
  cursor: default;
}
.pipeline-read-only .node-config-btn {
  display: none !important;
}
.pipeline-read-only #tab-nodes,
.pipeline-read-only [data-panel="nodes"],
.pipeline-read-only .palette {
  display: none !important;
}

.badge-info { text-decoration: none; }
.badge-info:hover { text-decoration: none; filter: brightness(1.1); }
.badge-live {
  animation: badge-live-pulse 1.6s ease-in-out infinite;
}
@keyframes badge-live-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

.run-cancelled { color: var(--status-warning); }
.run-paused    { color: var(--accent-2); }

table.data .row-actions {
  display: inline-flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}
form.inline-form { display: inline-block; margin: 0; }

/* Schedule form — reuse the stacked-form input styling but in a sectioned
   layout so the user sees the form as four chunks (What/When/Behavior/End/
   Notifications) rather than one tall wall. */
.schedule-form fieldset {
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem 1rem;
  margin: 0 0 1rem;
}
.schedule-form fieldset legend {
  padding: 0 0.4rem;
  color: var(--muted);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.schedule-form p { margin: 0.6rem 0; display: flex; flex-direction: column; gap: 0.3rem; }
.schedule-form label { color: var(--muted); font-size: var(--fs-base); }
.schedule-form input[type="text"],
.schedule-form input[type="number"],
.schedule-form input[type="date"],
.schedule-form input[type="time"],
.schedule-form select,
.schedule-form textarea {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.55rem;
  font: inherit;
}
.schedule-form input[type="checkbox"] { margin-right: 0.35rem; }
.schedule-form fieldset p label[for$="checkbox"],
.schedule-form fieldset p label:has(input[type="checkbox"]) {
  display: inline-flex;
  align-items: center;
  margin-right: 1rem;
  color: var(--text);
}
.schedule-form .form-actions {
  display: flex; gap: 0.5rem; margin-top: 0.5rem;
}
.schedule-form .err { color: var(--err); font-size: var(--fs-sm); }
.schedule-form .small { font-size: var(--fs-xs); }

/* Notification bell + badge */
.notif-bell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 36px; height: 36px;
  border-radius: var(--radius-pill);
  color: var(--muted);
  margin-right: 0.4rem;
  transition: background 0.15s ease, color 0.15s ease;
}
.notif-bell:hover {
  background: rgba(255,255,255,0.04);
  color: var(--text);
  text-decoration: none;
}
.notif-bell[aria-current="page"] { background: rgba(124,199,255,0.12); color: var(--text); }
.notif-badge {
  position: absolute;
  top: 2px; right: 2px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--err);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Notifications (NAV-03): a list with a clear unread dot, and the bell's dropdown. */
.notif-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--border); }
/* R2-BUG-12: status · title and detail · time · actions, the same on
   every row so the columns line up. */
.notif-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 7.5rem 8.5rem;
  gap: 0.75rem;
  align-items: start;
  padding: 0.75rem 0.25rem;
  border-bottom: 1px solid var(--border);
}
.notif-status {
  position: relative;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--tone) 14%, transparent);
  color: var(--tone);
  font-size: var(--fs-md);
}
.notif-row.is-unread .notif-status::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--bg);
  border-radius: 50%;
  background: var(--accent);
}
.notif-main { min-width: 0; padding-top: 0.3rem; }
.notif-title { display: block; font-weight: 500; overflow-wrap: anywhere; }
.notif-row.is-unread .notif-title { font-weight: 700; }
.notif-row.notif-failure .notif-title { color: var(--status-error); }
.notif-row .notif-body { margin: 0.2rem 0 0; color: var(--muted); font-size: var(--fs-base); white-space: pre-wrap; overflow-wrap: anywhere; }
.notif-source {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-right: 0.4rem;
  padding: 0 0.45rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text);
  font-size: var(--fs-xs);
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: 0.05em;
}
.notif-time { padding-top: 0.45rem; text-align: right; white-space: nowrap; }
.notif-row .notif-actions { display: flex; justify-content: flex-end; gap: 0.4rem; padding-top: 0.15rem; }
.notif-menu-gap { width: 2.1rem; flex: 0 0 auto; }
.notif-action-gap { flex: 1; }
@media (max-width: 640px) {
  .notif-row { grid-template-columns: 32px minmax(0, 1fr); }
  .notif-time { grid-column: 2; padding-top: 0; text-align: left; }
  .notif-row .notif-actions { grid-column: 2; justify-content: flex-start; }
  .notif-menu-gap, .notif-action-gap { display: none; }
}
.nav-right { position: relative; }
.notif-panel {
  position: fixed; z-index: 70;
  width: min(360px, calc(100vw - 1.5rem)); max-height: min(70vh, 480px); overflow: auto;
}
.notif-panel-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0.3rem 0.4rem 0.5rem; }
.notif-panel-actions { display: inline-flex; gap: 0.75rem; align-items: baseline; }
/* Mark all as read (a button) and See all (a link) look alike. */
.notif-panel .notif-panel-link { appearance: none; padding: 0; border: 0; background: none; color: var(--link); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-ui); text-decoration: none; cursor: pointer; }
.notif-panel .notif-panel-link:hover { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.notif-panel-list { list-style: none; margin: 0; padding: 0; }
.notif-panel-item a { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 0.6rem; padding: 0.45rem 0.4rem; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; }
/* A small status icon per row (failed: red x, completed: green check);
   unread ones carry a dot, as on the Notifications page. */
.notif-panel-status { position: relative; display: grid; place-items: center; width: 16px; height: 20px; color: var(--tone); }
.notif-panel-status .icon { width: 16px; height: 16px; }
.notif-panel-item.is-unread .notif-panel-status::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -4px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--panel-2);
  border-radius: 50%;
  background: var(--accent);
}
.notif-panel-text { display: grid; gap: 0.1rem; font-size: var(--fs-base); }
.notif-panel-text strong { font-weight: 500; }


/* Native <select> — strip the OS chrome and paint our own chevron so dropdowns
   match the rest of the rounded, dark surfaces. The popup list itself is still
   browser-rendered; setting color/background on <option> covers Chromium and
   Firefox in dark mode. */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.45rem 2rem 0.45rem 0.7rem;
  font: inherit;
  line-height: 1.3;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%238b919e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 12px 8px;
  transition: border-color 120ms ease, background-color 120ms ease;
}
select:hover { border-color: #3a4150; }
select:focus,
select:focus-visible {
  border-color: #59657b;
  outline: 2px solid rgba(124, 199, 255, 0.16);
  outline-offset: 0;
}
select::-ms-expand { display: none; }
select option,
select optgroup {
  background-color: var(--panel);
  color: var(--text);
}
select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
/* Compact selects (tighter rows in the param panel, lint controls, etc.) */
.param-row select,
select.small {
  padding: 0.32rem 1.7rem 0.32rem 0.55rem;
  background-position: right 0.5rem center;
  font-size: var(--fs-base);
}

/* HTTP Request node config form — built-in function modal. Uses the */
/* same .stacked layout as the other modal forms; these two helpers add  */
/* a 2-column row and an inline checkbox-with-label row.                  */
.modal-body .grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.modal-body .checkbox-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-direction: row;
}
.modal-body .checkbox-row input[type="checkbox"] { margin: 0; }
.modal-body .small { font-size: var(--fs-sm); }
.modal-body .builtin-secret-picker {
  font-size: var(--fs-sm);
  padding: 0.25rem 1.6rem 0.25rem 0.5rem;
}

/* Upstream-key chip palette — surfaces what {placeholders} the current
   node can interpolate from its parents. Sits inside integration node
   forms; click a chip to insert at the focused field's caret. */
.modal-body .chip-palette {
  margin: 0.4rem 0 0.6rem;
  padding: 0.55rem 0.65rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  background: rgba(127, 127, 127, 0.04);
}
.modal-body .chip-palette-empty {
  background: transparent;
  border-style: dotted;
}
.modal-body .chip-palette-hint {
  display: block;
  margin-bottom: 0.35rem;
}
.modal-body .chip-group {
  margin-top: 0.35rem;
}
.modal-body .chip-group-label {
  display: block;
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-bottom: 0.2rem;
}
.modal-body .chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.modal-body .chip-insert {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--bg, #fff);
  color: var(--text);
  border-radius: var(--radius-pill);
  padding: 0.15rem 0.55rem;
  font-size: var(--fs-xs);
  cursor: pointer;
  line-height: 1.4;
}
.modal-body .chip-insert:hover {
  border-color: var(--accent, #5b6cff);
  background: rgba(91, 108, 255, 0.08);
}
.modal-body .chip-insert code {
  background: transparent;
  font-size: var(--fs-xs);
  padding: 0;
}

/* Conditional-node config — branch fieldset + rule row layout */
.cf-branch {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.75rem;
  margin-bottom: 0.75rem;
}
.cf-branch legend { padding: 0 0.4rem; font-size: var(--fs-base); color: var(--muted); }
.cf-rule {
  display: grid;
  grid-template-columns: 1fr 8rem 1fr auto;
  gap: 0.4rem;
  align-items: center;
  margin-bottom: 0.4rem;
}
.cf-rule input, .cf-rule select { padding: 0.3rem 0.5rem; font-size: var(--fs-base); }


/* Smart secret field — used by integration node forms to bind a
   secret-typed config value (webhook_url, connection_url, ...) to a
   user's Secret slug via a typed dropdown. "Type a value" button
   toggles to a free-text input for advanced / one-off URLs. */
.secret-field {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.4rem;
  align-items: center;
}
.secret-field-pane { min-width: 0; }
.secret-field-pane select,
.secret-field-pane input { width: 100%; }
.secret-field-toggle { white-space: nowrap; }

/* "Save as template" row in builtin node modals. */
.builtin-template-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--border);
  margin-top: 0.5rem;
}

/* Retry-policy accordion in the node detail modal. Lives under whatever the
   per-kind form rendered, separated by a top border so it reads as a distinct
   section. */
.ndm-retry-accordion {
  margin-top: 0.9rem;
  border-top: 1px solid var(--border);
  padding-top: 0.7rem;
}
.ndm-retry-accordion > summary {
  cursor: pointer;
  padding: 0.3rem 0;
  list-style: none;
  font-size: var(--fs-base);
}
.ndm-retry-accordion > summary::-webkit-details-marker { display: none; }
.ndm-retry-accordion .retry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.7rem 1rem;
  margin-top: 0.5rem;
}
.ndm-retry-accordion .retry-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: var(--fs-base);
  color: var(--text);
}
.ndm-retry-accordion .retry-grid input,
.ndm-retry-accordion .retry-grid select {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.55rem;
  font-size: var(--fs-base);
}

/* RunAttempt list in the trace drawer — one row per attempt, slim. */
.run-attempts {
  margin: 0.6rem 0 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.run-attempts-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.7rem;
  font-size: var(--fs-base);
  border-bottom: 1px solid var(--border);
}
.run-attempts-row:last-child { border-bottom: 0; }
.run-attempts-row .ra-num { font-weight: 600; color: var(--muted); }
.run-attempts-row.ra-succeeded { background: rgba(76, 200, 110, 0.06); }
.run-attempts-row.ra-failed { background: rgba(220, 90, 90, 0.07); }
.run-attempts-row .ra-meta {
  font-family: var(--mono, ui-monospace, "SF Mono", monospace);
  font-size: var(--fs-xs);
  color: var(--muted);
}
.run-attempts-row .ra-err {
  display: block;
  font-family: var(--mono, ui-monospace, "SF Mono", monospace);
  font-size: var(--fs-xs);
  color: #d8645a;
  margin-top: 0.15rem;
}

/* Input modal — webhook banner. Shows whenever the pipeline has any
   enabled webhook attached, regardless of the Input node's mode. */
.inm-webhook-banner {
  background: rgba(124, 199, 255, 0.08);
  border: 1px solid rgba(124, 199, 255, 0.32);
  color: var(--text);
  border-radius: var(--radius-md);
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.9rem;
  font-size: var(--fs-base);
  line-height: 1.45;
}
.inm-webhook-banner ul.inm-webhook-list {
  margin: 0.45rem 0 0;
  padding-left: 1.2rem;
}
.inm-envelope-details { margin: 0.5rem 0 0.8rem; }
.inm-envelope-details pre.json-sample {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.8rem;
  margin: 0.4rem 0;
  overflow-x: auto;
  font-size: var(--fs-xs);
}

/* Topbar pill badge — shows the count next to "Webhooks". */
.btn .pill {
  display: inline-block;
  background: rgba(124, 199, 255, 0.18);
  color: var(--text);
  border-radius: var(--radius-pill);
  padding: 0 0.45rem;
  margin-left: 0.3rem;
  font-size: var(--fs-xs);
  line-height: 1.4;
  font-weight: 600;
}

/* Inline "Test send" form on the webhook list page. Lives in a
   colspan-7 row beneath the webhook it belongs to. */
.webhook-test-row td {
  background: var(--panel-2);
  border-top: 1px solid var(--border);
  padding: 0.9rem 1.1rem;
}
.webhook-test-form { display: flex; flex-direction: column; gap: 0.7rem; }
.webhook-test-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}
.webhook-test-grid label { display: flex; flex-direction: column; gap: 0.25rem; }
.webhook-test-grid textarea {
  width: 100%;
  padding: 0.5rem 0.65rem;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: ui-monospace, monospace;
  font-size: var(--fs-base);
  resize: vertical;
  box-sizing: border-box;
}
.webhook-test-grid textarea:focus {
  border-color: #59657b;
  outline: 2px solid rgba(124, 199, 255, 0.16);
}
.webhook-test-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.webhook-test-result {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.4rem;
}
.webhook-test-result .error { color: #c0392b; }

/* ---------- File upload modal (Files page) ---------- */
.um-credential {
  width: 100%;
  padding: 0.55rem 0.7rem;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
}
.dropzone {
  /* Dotted (not dashed) and bright enough to stand out on --panel-2. */
  border: 2px dotted var(--muted);
  border-radius: var(--radius-md);
  background: var(--panel-2);
  padding: 1.8rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
  outline: none;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
}
.dropzone:hover,
.dropzone:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(255, 122, 69, 0.05);
}
.dropzone.is-drag {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(255, 122, 69, 0.1);
}
.dropzone.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.dropzone.is-disabled:hover,
.dropzone.is-disabled:focus-visible {
  border-color: var(--muted);
  color: var(--muted);
  background: var(--panel-2);
}
.dropzone-inner { pointer-events: none; }  /* clicks bubble to the zone itself */
.dropzone-icon {
  display: block;
  width: 46px;
  height: 46px;
  margin: 0 auto 0.55rem;
  /* SVG paints use currentColor so the icon inherits the dropzone color
     and follows hover/drag state without needing extra selectors. */
}
.dropzone-title {
  margin: 0 0 0.15rem;
  font-weight: 600;
  color: var(--text);
}

.upload-queue {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.uq-row {
  display: grid;
  grid-template-columns: 22px 1fr auto auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
}
.uq-row.uq-uploading { border-color: var(--border); }
.uq-row.uq-ok { border-color: rgba(56, 211, 159, 0.45); }
.uq-row.uq-err { border-color: rgba(255, 93, 108, 0.55); }

.uq-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}
.uq-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: uq-spin 700ms linear infinite;
}
@keyframes uq-spin { to { transform: rotate(360deg); } }
.uq-tick { color: var(--ok); font-weight: 700; }
.uq-cross { color: var(--err); font-weight: 700; }

.uq-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.uq-meta { font-size: var(--fs-base); }
.uq-msg { font-size: var(--fs-base); }
.uq-msg-err { color: var(--err); }

.um-summary {
  margin: 0.9rem 0 0;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  border: 1px solid var(--border);
  background: var(--panel-2);
}
.um-summary-ok { border-color: rgba(56, 211, 159, 0.45); color: var(--ok); }
.um-summary-mixed { border-color: rgba(255, 200, 87, 0.45); color: var(--warn); }

/* ---------- Cost-intelligence dashboard ---------- */
/* Window picker — a tight row of pill buttons that drive the ?days= filter.
   Sits in .page-head-actions so it lines up with the other top-right actions
   on .wrap pages. */

.cost-totals {
  display: grid;
  /* Up to eight tiles (Chat since review 3.5, Search storage since
     R2-UX-01): rows of four on a wide page, so labels don't wrap. */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0 1.5rem;
  /* R2-UX-03: every tile in a row has the same height. */
  align-items: stretch;
}
@media (max-width: 600px) {
  .cost-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* COST-01 */
.cost-budget { margin: 1rem 0; display: grid; gap: 0.6rem; }
.cost-budget-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem 1rem; }
.cost-budget-head h2 { margin: 0; font-size: var(--fs-md); }
.cost-budget-figures { color: var(--tone); font-variant-numeric: tabular-nums; font-weight: 600; }
.cost-budget-bar { height: 8px; border-radius: var(--radius-pill); background: var(--panel-2); overflow: hidden; }
.cost-budget-bar > span { display: block; height: 100%; background: var(--tone); border-radius: inherit; }
.cost-budget-edit > summary { cursor: pointer; color: var(--link); font-size: var(--fs-base); }
.cost-budget-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem 1rem; margin: 0.6rem 0 0.3rem; }
.cost-budget-form label { display: grid; gap: 0.3rem; font-size: var(--fs-base); color: var(--muted); }
.cost-budget-form input { padding: 0.45rem 0.6rem; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; width: 9rem; }
.cost-budget-percent { display: inline-flex; align-items: center; gap: 0.35rem; }
.cost-budget-percent input { width: 5rem; }
.cost-table-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem 0.75rem; margin: 0 0 0.6rem; }
.cost-chart-empty { padding: 1.25rem 0.1rem; }
.cost-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.cost-card-label {
  font-size: var(--fs-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cost-card-value {
  font-size: var(--fs-lg);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

table.data.costs-table td.num,
table.data.costs-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
table.data.costs-table .cost-amount { font-weight: 600; }
table.data.costs-table th.num.small,
table.data.costs-table td.num.small { font-size: var(--fs-base); }

/* Bar chart — pure CSS, no chart lib. Each bar is a flex item whose height
   percentage is set inline by the script. Title attribute carries the
   tooltip so we don't have to ship a tooltip component. */
.cost-chart-card { margin-bottom: 1.5rem; }
/* Visual polish 10: the chart fits its card at every width (no sideways
   scroll): bars share the width, the y-axis shows the highest day, every
   bar has a tooltip and only some days are labelled (cost_chart.js). */
.cost-chart-scroll { max-width: 100%; overflow: hidden; }
.cost-chart {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-2);
  height: 200px;
  padding: var(--space-2) 0 24px;
}
.cost-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: -0.5em 0;
  color: var(--muted);
  font-size: var(--fs-xs);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cost-plot {
  position: relative;
  min-width: 0;
  border-bottom: 1px solid var(--border);
  /* A faint line at the highest day. */
  background: linear-gradient(var(--border), var(--border)) top / 100% 1px no-repeat;
}
.cost-bars { display: flex; align-items: flex-end; gap: clamp(1px, 0.4vw, 4px); height: 100%; }
.cost-bar {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  max-width: 48px;
  background: linear-gradient(180deg, var(--accent), rgba(255,122,69,0.5));
  border-radius: 3px 3px 0 0;
  cursor: default;
  transition: filter 120ms ease;
}
.cost-bar:hover { filter: brightness(1.2); }
.cost-bar-empty { height: 2px !important; background: var(--panel-2); }
/* Phase 2 #3: a day stacked by source (Usage); the legend names them. */
.cost-bar.is-stacked { display: flex; flex-direction: column-reverse; background: none; }
.cost-seg { display: block; flex: 0 1 0; min-height: 1px; }
.cost-bar.is-stacked .cost-seg:nth-last-child(2) { border-radius: 3px 3px 0 0; }
.cost-seg[data-part="runs"], .cost-swatch[data-part="runs"] { background: var(--accent); }
.cost-seg[data-part="chat"], .cost-swatch[data-part="chat"] { background: var(--link); }
.cost-seg[data-part="builder"], .cost-swatch[data-part="builder"] { background: var(--accent-2); }
.cost-seg[data-part="try"], .cost-swatch[data-part="try"] { background: var(--ok); }
.cost-legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0 0 var(--space-2); padding: 0; list-style: none; color: var(--muted); font-size: var(--fs-xs); }
.cost-legend li { display: inline-flex; align-items: center; gap: 6px; }
.cost-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.cost-bar-date {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--fs-xs);
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cost-bar-date.is-end { left: auto; right: 0; transform: none; }
.cost-bar-date.is-start { left: 0; transform: none; }

/* Per-node breakdown card. List, not table, because each row has a nested
   "alternatives" sub-list and a table would force every model swap into a
   fixed column layout that doesn't read as well. */
.cost-nodes-card { margin-bottom: 1.5rem; }
.cost-node-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.cost-node {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.75rem 0.9rem;
  background: var(--panel-2);
}
.cost-node-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}
.cost-node-title { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.cost-node-totals { text-align: right; }
.cost-node-amount {
  font-size: var(--fs-md);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.cost-node-alts {
  margin: 0.6rem 0 0;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--border);
}
.cost-alt-list {
  list-style: none;
  padding: 0;
  margin: 0.35rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.cost-alt {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) auto auto;
  gap: 0.75rem;
  align-items: baseline;
  font-size: var(--fs-base);
  font-variant-numeric: tabular-nums;
}
.cost-alt-amount { color: var(--muted); }
.cost-alt-savings {
  color: var(--ok);
  font-weight: 600;
  text-align: right;
}

/* AI suggestion card. The button kicks off a single LLM round-trip; status
   text replaces itself with the prose response (preserving newlines via
   white-space below). */
.cost-suggest-card { margin-bottom: 2rem; }
.cost-suggest-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.5rem 0 0;
}
.cost-suggest-output {
  margin-top: 0.85rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(192, 97, 255, 0.35);
  background: rgba(192, 97, 255, 0.06);
  border-radius: var(--radius-md);
}
.cost-suggest-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.4rem;
}
.cost-suggest-output p {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.5;
}
.um-summary-err { border-color: rgba(255, 93, 108, 0.55); color: var(--err); }

/* ---------- Run prompt-diff ---------- */
/* Runs list checkbox column + the sticky compare CTA bar. */
.runs-table th.runs-compare-col,
.runs-table td.runs-compare-col {
  width: 36px;
  text-align: center;
}
.runs-table .runs-number-col {
  width: 3.5rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
/* RUN-06: filters and clickable rows. */
.runs-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 0.75rem; margin: 0.5rem 0 0; }
.runs-filters label { display: grid; gap: 0.25rem; color: var(--muted); font-size: var(--fs-sm); }
.runs-table tr.run-row { cursor: pointer; }
.runs-table tr.run-row:hover td { background: rgba(255, 255, 255, 0.025); }
.runs-table .runs-input-col { max-width: 18rem; color: var(--muted); }
.runs-compare-pick {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}
.runs-compare-bar {
  position: sticky;
  bottom: 12px;
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0.9rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.runs-compare-bar button[disabled] { opacity: 0.55; cursor: not-allowed; }

/* Diff page header — two side-by-side run summaries. */
.compare-overview .compare-overview-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.compare-side {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.75rem 0.9rem;
  background: var(--panel-2);
}
.compare-side h3 {
  margin: 0 0 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.compare-tag {
  display: inline-block;
  min-width: 22px;
  padding: 0 6px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #18121d;
  font-weight: 700;
  text-align: center;
  font-size: var(--fs-base);
}
.compare-side-b .compare-tag { background: var(--accent-2); color: #fff; }
.compare-side dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.2rem 0.7rem; margin: 0; }
.compare-side dt { color: var(--muted); font-size: var(--fs-base); }
.compare-side dd { margin: 0; font-size: var(--fs-base); word-break: break-word; }
.compare-summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0.8rem 0 0;
}
.compare-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  color: var(--muted);
}

/* Per-step block. */
.prompt-diff-block { margin-top: 1rem; }
.prompt-diff-block--noprompt { opacity: 0.78; }
.prompt-diff-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}
.prompt-diff-head h3 { margin: 0; font-size: var(--fs-md); }
.prompt-diff-status { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }

.prompt-diff-section {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-top: 0.6rem;
  background: var(--panel-2);
}
.prompt-diff-section > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.55rem 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
}
.prompt-diff-section > summary::-webkit-details-marker { display: none; }
.prompt-diff-section--changed { border-color: rgba(255, 200, 87, 0.5); }
.prompt-diff-section--changed > summary { color: var(--warn); }
.section-label { flex: 1 0 auto; }

/* Side-by-side diff table. The grid is two pairs of (gutter, text). */
.prompt-diff-table {
  width: 100%;
  border-collapse: collapse;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-base);
  table-layout: fixed;
}
.prompt-diff-table .col-no { width: 44px; }
.prompt-diff-table .col-text { width: calc(50% - 44px); }
.prompt-diff-table td {
  padding: 1px 8px;
  vertical-align: top;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.prompt-diff-table .diff-no {
  text-align: right;
  color: var(--muted);
  user-select: none;
  background: rgba(255, 255, 255, 0.02);
}
.prompt-diff-table .diff-text {
  white-space: pre-wrap;
  word-break: break-word;
}
.diff-row--equal { background: transparent; }
.diff-row--remove .diff-text--left,
.diff-row--change .diff-text--left {
  background: rgba(255, 93, 108, 0.18);
  color: #ffd2d6;
}
.diff-row--add .diff-text--right,
.diff-row--change .diff-text--right {
  background: rgba(56, 211, 159, 0.18);
  color: #b8f3da;
}
.diff-row--remove .diff-text--right,
.diff-row--add .diff-text--left {
  background: rgba(255, 255, 255, 0.015);
}
.prompt-diff-identical {
  margin: 0;
  padding: 0.6rem 0.8rem;
  border-top: 1px solid var(--border);
  background: var(--panel);
  max-height: 260px;
  overflow: auto;
}

@media (max-width: 640px) {
  .landing-page {
    scroll-snap-type: none;
  }
  @supports selector(html:has(body.landing-page)) {
    html:has(body.landing-page) {
      scroll-snap-type: none;
    }
  }
  .public-page .topnav {
    gap: 0.5rem;
    padding: 0 0.75rem;
  }
  .public-page .nav-right {
    gap: 0.45rem;
  }
  .public-page .nav-right a:not(.btn) {
    font-size: var(--fs-base);
  }
  .public-page .nav-right .btn {
    padding: 0.45rem 0.65rem;
  }
  .landing-main {
    width: 100%;
    max-width: none;
  }
  .public-page {
    --landing-nav-h: 62px;
  }
  .landing-page {
    scroll-padding-top: var(--landing-nav-h);
  }
  @supports selector(html:has(body.landing-page)) {
    html:has(body.landing-page) {
      --landing-nav-h: 62px;
      scroll-padding-top: var(--landing-nav-h);
    }
  }
  .landing-slide {
    min-height: calc(100vh - var(--landing-nav-h));
    scroll-snap-align: start;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .landing-hero {
    gap: 1.35rem;
    padding-top: 1.5rem;
    padding-bottom: 2rem;
  }
  .landing-hero-copy {
    max-width: none;
    padding-bottom: 0;
  }
  .landing-hero h1 {
    font-size: clamp(2.1rem, 10vw, 2.85rem);
    line-height: 1.08;
  }
  .landing-hero p {
    font-size: var(--fs-md);
    line-height: 1.55;
  }
  .landing-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .landing-cta {
    width: 100%;
  }
  .landing-demo {
    order: 0;
  }
  .demo-cases {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    padding-bottom: 0.3rem;
  }
  .demo-toolbar {
    padding: 0.55rem 0.7rem;
  }
  .demo-stage {
    min-height: 260px;
  }
  .demo-node {
    width: 122px;
    padding: 0.55rem 0.6rem;
  }
  .demo-node strong {
    font-size: var(--fs-sm);
  }
  .demo-node span {
    font-size: var(--fs-xs);
  }
  .demo-footer {
    grid-template-columns: auto 1fr auto;
    gap: 0.55rem;
    padding: 0.65rem 0.7rem;
    font-size: var(--fs-xs);
  }
  .landing-section-head h2,
  .landing-video .landing-section-head h2 {
    font-size: clamp(2rem, 10vw, 3rem);
  }
  .landing-video { min-height: 0; }
  .landing-video-frame { border-radius: var(--radius-md); }
  .landing-video-toggle { right: 8px; bottom: 8px; width: 32px; height: 32px; }
  .landing-video-play { min-height: 44px; padding: 0 1.1rem 0 0.9rem; font-size: var(--fs-base); }
  .landing-feature-grid div {
    padding: 0.9rem;
  }
}

@media (max-width: 430px) {
  .public-page .topnav {
    padding: 0 0.6rem;
  }
  .public-page .brand-text {
    max-width: 8.5rem;
  }
  .public-page .nav-right {
    gap: 0.35rem;
  }
  .public-page .nav-right a:not(.btn) {
    font-size: var(--fs-sm);
  }
  .public-page .nav-right .btn {
    padding: 0.42rem 0.55rem;
  }
  .landing-hero h1 {
    font-size: clamp(2rem, 10.5vw, 2.65rem);
  }
  .landing-actions {
    grid-template-columns: 1fr;
  }
  .demo-stage {
    min-height: 230px;
  }
  .demo-node {
    width: 108px;
  }
}

/* ---------- Builder: toasts, dialogs, inspector, empty state, conflict ---------- */
.builder-toasts {
  position: fixed;
  right: 1rem;
  /* Above the Getting started card while it shows (P2.12). */
  bottom: calc(1.25rem + var(--builder-guide-space, 0px));
  /* Above dialogs (.modal is 80), so a toast is never hidden behind one. */
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: min(520px, calc(100% - 2rem));
  pointer-events: none;
}
.builder-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem 0.6rem 0.9rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  border-left-width: 4px;
  background: rgba(20, 24, 34, 0.97);
  color: var(--text);
  font-size: var(--fs-base);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
  animation: builder-toast-in 160ms ease-out;
}
.builder-toast.is-leaving { opacity: 0; transform: translateY(6px); transition: opacity 160ms, transform 160ms; }
.builder-toast-info { border-left-color: #7cc7ff; }
.builder-toast-success { border-left-color: #6ce0b8; }
.builder-toast-warning { border-left-color: #f0b429; }
.builder-toast-error { border-left-color: #ff6b6b; }
.builder-toast-text { flex: 1; min-width: 0; }
.builder-toast-action {
  background: transparent; border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius-md); padding: 0.25rem 0.55rem; font-size: var(--fs-sm); cursor: pointer;
}
.builder-toast-close {
  background: transparent; border: 0; color: var(--muted); font-size: var(--fs-md);
  line-height: 1; cursor: pointer; padding: 0 0.2rem;
}
.builder-toast-close:hover, .builder-toast-action:hover { color: var(--text); background: rgba(255,255,255,0.05); }
@keyframes builder-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .builder-toast { animation: none; }
  .builder-toast.is-leaving { transition: none; }
}
/* One-column builder with Chat open: toasts sit above the chat box, so a
   toast about a message (e.g. "too many messages") never hides Send. */
@media (max-width: 900px) {
  body:has(.tab-panel[data-panel="chat"].is-active #builder-chat-form) .builder-toasts { bottom: 7.25rem; }
}

.builder-dialog { display: block; }
.builder-dialog-card { max-width: 440px; }
.builder-dialog-card .modal-body p { margin: 0 0 0.6rem; }
.builder-dialog-input {
  width: 100%; padding: 0.55rem 0.7rem; background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-md); font-size: var(--fs-base);
}


.canvas-empty-state {
  position: absolute;
  z-index: 16;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, calc(100% - 2rem));
  padding: 1.1rem 1.2rem;
  border: 1px dashed rgba(124, 199, 255, 0.45);
  border-radius: var(--radius-md);
  background: rgba(20, 24, 34, 0.9);
  text-align: center;
  pointer-events: none;
}
.canvas-empty-state.is-placed { transform: translateX(-50%); }
.canvas-empty-state h3 { margin: 0 0 0.35rem; font-size: var(--fs-md); }
.canvas-empty-state p { margin: 0 0 0.7rem; color: var(--muted); font-size: var(--fs-base); line-height: 1.5; }
.canvas-empty-state .btn { pointer-events: auto; }
.canvas-empty-actions { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }

.builder-conflict-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid rgba(240, 180, 41, 0.5);
  background: rgba(240, 180, 41, 0.12);
  color: var(--text);
  font-size: var(--fs-base);
}
.builder-conflict-banner strong { color: #f0b429; }
.builder-conflict-banner .conflict-actions { display: flex; gap: 0.45rem; margin-left: auto; }

.lint-pill-failed { border-color: rgba(255, 255, 255, 0.25); }
/* Only an Input so far: nothing to check yet (neither a pass nor a problem). */
.lint-pill-idle .lint-pill-dot { background: var(--muted); box-shadow: none; }
.lint-pill-failed .lint-pill-dot { background: var(--muted); box-shadow: none; }

.canvas-tool-btn:disabled { opacity: 0.4; cursor: default; }
.canvas-toolbar .toolbar-sep { width: 1px; height: 18px; background: var(--border); margin: 0 0.2rem; }

/* Legend for the coloured socket dots (builder help dialog). Colours match
   the .schema-type-* rules on outputs above. */
.socket-legend ul {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  font-size: var(--fs-base);
}
.socket-legend li { display: flex; align-items: center; gap: 0.45rem; }
.socket-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #5a6070;
  background: var(--panel);
}
.socket-swatch-text    { border-color: #7cc7ff; }
.socket-swatch-object  { border-color: #c061ff; }
.socket-swatch-list    { border-color: #f0a754; }
.socket-swatch-any     { border-color: #5a6070; }
.socket-swatch-unknown { border-color: #3a3f4d; border-style: dashed; }
.socket-swatch-data    { border-color: #e2c45a; background: rgba(226, 196, 90, 0.2); }
.socket-swatch-hollow  { border-color: var(--muted); background: transparent; }
.socket-swatch-filled  { border-color: var(--muted); background: var(--muted); }

/* CAN-01/CAN-09: a defined colour for steps' inputs (Drawflow paints them
   #ff0 by default), and hollow dots until something is connected. */
.drawflow .drawflow-node .inputs .input { border-color: #e2c45a; background: rgba(226, 196, 90, 0.35); }
.has-socket-state .drawflow-node .inputs .input:not(.is-connected),
.has-socket-state .drawflow-node .outputs .output:not(.is-connected) { background: #10131a !important; }
.canvas-legend-btn { display: inline-flex; align-items: center; gap: 6px; width: auto; padding: 0 10px; font-size: var(--fs-sm); }
.canvas-legend-btn .icon { width: 16px; height: 16px; }
.canvas-legend-btn.is-active { color: var(--link); border-color: rgba(124, 199, 255, 0.5); }
.canvas-legend {
  position: absolute; z-index: 5; top: 4.1rem; right: 0.85rem;
  width: min(300px, calc(100% - 1.7rem)); padding: 0.6rem 0.75rem;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: rgba(20, 24, 34, 0.96); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  font-size: var(--fs-sm);
}
.canvas-legend ul { list-style: none; margin: 0 0 0.4rem; padding: 0; display: grid; gap: 0.25rem; }
.canvas-legend li { display: flex; align-items: center; gap: 0.45rem; }
.canvas-legend p { margin: 0.25rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
@media (min-width: 641px) {
  .canvas-wrapper:has(.run-drawer.is-open) .canvas-legend { right: calc(var(--node-panel-w, min(420px, 90vw)) + 0.85rem); }
}
/* NAV-05: the Help dialog. */
.builder-help-body { display: grid; gap: 1.1rem; }
.help-section h4 { margin: 0 0 0.4rem; font-size: var(--fs-base); }
.help-section p { margin: 0 0 0.6rem; }
.help-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.shortcut-list { display: grid; gap: 0.35rem; margin: 0; }
.shortcut-list > div { display: grid; grid-template-columns: minmax(9rem, auto) 1fr; gap: 0.75rem; align-items: baseline; }
.shortcut-list dt { white-space: nowrap; }
.shortcut-list dd { margin: 0; color: var(--muted); font-size: var(--fs-base); }
kbd { display: inline-block; min-width: 1.4em; padding: 0.05rem 0.35rem; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: var(--radius-sm); background: var(--panel-2); font: 600 0.75rem var(--font-sans); text-align: center; }
.help-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.help-glossary > summary { cursor: pointer; }
.help-glossary > summary h4 { display: inline; }
.help-glossary dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 0.9rem; margin: 0.6rem 0 0; }
.help-glossary dt { font-weight: 600; }
.help-glossary dd { margin: 0; color: var(--muted); font-size: var(--fs-base); }

/* The schedule form partial rendered on its own page (not in a modal). */
.schedule-page-form .modal-body { max-height: none; overflow: visible; padding: 0; }
.schedule-page-form .modal-foot { padding: 1rem 0 0; border-top: 0; }

/* Run trace: merged inputs shown per step before. */
.trace-input-section h5 { margin: 0.6rem 0 0.25rem; font-size: var(--fs-sm); color: var(--muted); font-weight: 600; }
.trace-input-section pre.json { margin-top: 0; }
.trace-raw { margin-top: 0.5rem; }
.trace-raw summary { cursor: pointer; }

/* Agent card: key status and model on one wrapping line. */
.agent-key-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
}
.agent-key-line .inline-form { display: inline-flex; margin: 0; }
/* A long "Uses your default key (…)" wraps beside "Key:", not below it. */
.agent-key-line > span[data-tooltip] { flex: 1 1 10rem; min-width: 0; }

/* ---------- Rich output (static/js/rich_text.js) ----------
   Rendered markdown and JSON trees for model output. Prose uses the UI
   font; only code and the raw view are monospace. */
.md { line-height: 1.55; overflow-wrap: anywhere; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p, .md ul, .md ol, .md blockquote, .md pre, .md .md-table-wrap { margin: 0 0 0.65rem; }
.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 { margin: 0.9rem 0 0.4rem; line-height: 1.3; }
.md h1 { font-size: var(--fs-lg); }
.md h2 { font-size: var(--fs-md); }
.md h3 { font-size: var(--fs-md); }
.md h4, .md h5, .md h6 { font-size: var(--fs-base); }
.md ul, .md ol { padding-left: 1.4rem; }
.md li + li { margin-top: 0.2rem; }
.md li > ul, .md li > ol { margin: 0.2rem 0 0; }
.md a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.md code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-sm);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.05rem 0.3rem;
}
.md pre.md-code {
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem;
  overflow-x: auto;
  white-space: pre;
}
.md pre.md-code code { background: none; border: 0; padding: 0; }
.md blockquote { border-left: 3px solid var(--border); padding-left: 0.75rem; color: var(--muted); }
.md hr { border: 0; border-top: 1px solid var(--border); margin: 0.8rem 0; }
.md-table-wrap { overflow-x: auto; }
.md table { border-collapse: collapse; font-size: inherit; }
.md th, .md td { border: 1px solid var(--border); padding: 0.3rem 0.55rem; text-align: left; vertical-align: top; }
.md th { background: rgba(255,255,255,0.04); }

.rich-output { min-width: 0; }
/* Structured JSON (phase 2 #1): records as cards, one record as label /
   value rows; the JSON is behind Raw. */
.structured-output { display: grid; gap: var(--space-2); min-width: 0; line-height: 1.5; overflow-wrap: anywhere; }
.so-heading { margin: 0; color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-ui); }
.so-count { display: inline-block; min-width: 1.4em; padding: 0 0.35em; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.06); text-align: center; }
.so-cards { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.so-card { display: grid; gap: var(--space-1); min-width: 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.02); }
.so-card-title { display: grid; gap: 1px; margin: 0; font-weight: var(--fw-title); }
.so-card-title a { color: var(--link); text-decoration: none; }
.so-card-title a:hover { text-decoration: underline; }
.so-card-site { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-text); }
.so-fields { display: grid; gap: var(--space-1); margin: 0; }
/* Label beside the value; in a narrow panel (the builder's Activity) the
   value wraps under its label. */
.so-field { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); }
.so-field > dt { flex: 0 0 7rem; color: var(--muted); font-size: var(--fs-sm); }
.so-field > dd { flex: 1 1 14rem; min-width: 0; margin: 0; }
.so-field > dd a, .so-list a { color: var(--link); }
.so-field > dd > .so-cards, .so-field > dd > .so-fields { margin-top: 2px; }
.so-list { margin: 0; padding-left: 1.2rem; }
.so-empty { color: var(--muted); }

/* Raw, Copy, Download, Open in new tab: ghost icon buttons (visual
   polish 5); Raw is a toggle. */
.rich-output-bar { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px; margin-bottom: var(--space-2); }
.rich-btn[aria-pressed="true"], .rich-btn[aria-pressed="true"]:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.rich-btn[aria-pressed="true"] .icon { color: var(--accent); }
/* An output's header row: the title, the run's badge, the output's
   buttons on the right (Use view Result, run page Final output). */
.output-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-3); }
.output-head > h2, .output-head > h3 { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-title); }
.output-head .badge { margin: 0; }
.output-actions { display: inline-flex; margin-left: auto; }
.output-actions:empty { display: none; }
.output-actions .rich-output-bar { margin: 0; }
.rich-output-rendered[hidden], .rich-output-raw[hidden] { display: none; }
.rich-output-raw {
  margin: 0;
  padding: 0.6rem 0.75rem;
  background: rgba(0,0,0,0.28);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-sm);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 480px;
  overflow: auto;
}
.jt > summary { cursor: pointer; color: var(--muted); font-size: var(--fs-sm); }
.jt-obj { margin: 0.3rem 0 0 0.9rem; display: grid; gap: 0.25rem; }
.jt-row { display: grid; grid-template-columns: minmax(5rem, max-content) 1fr; gap: 0.6rem; }
.jt-row dt { color: var(--muted); font-size: var(--fs-base); overflow-wrap: anywhere; }
.jt-row dd { margin: 0; min-width: 0; }
.jt-list { margin: 0.3rem 0 0; padding-left: 1.6rem; }
.jt-str { white-space: pre-wrap; overflow-wrap: anywhere; }
.jt-num, .jt-bool { color: var(--link); font-family: ui-monospace, monospace; }
.jt-null, .jt-empty { color: var(--muted); font-style: italic; }
.debug-msg-body .md, .msg-body .md { white-space: normal; }
@media (max-width: 900px) {
  /* Run page: few actions, so wrap them instead of scrolling sideways. */
  .run-trace-frame .topbar-actions { flex-wrap: wrap; overflow: visible; width: auto; }
}

/* ---------- Worker offline banner (RUN-03) ---------- */
.worker-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.75rem;
  padding: 0.6rem 1rem;
  background: rgba(255, 93, 108, 0.12);
  border-bottom: 1px solid rgba(255, 93, 108, 0.45);
  color: var(--text);
  font-size: var(--fs-base);
}
.worker-banner[hidden], .worker-banner-hint[hidden] { display: none; }
.worker-banner-text { font-weight: 600; flex: 1 1 18rem; }
.worker-banner-hint { color: var(--muted); font-size: var(--fs-base); flex: 1 1 18rem; }
.worker-banner-close {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: var(--fs-lg);
  cursor: pointer;
  margin-left: auto;
}
.worker-banner-close:hover { color: var(--text); }

/* ---------- Activity log (BUG-01) ---------- */
.msg.msg-level-error {
  border-color: rgba(255, 93, 108, 0.55);
  background: rgba(255, 93, 108, 0.08);
  opacity: 1;
  font-style: normal;
}
.msg.msg-level-error header strong { color: var(--err); }
.msg.msg-level-error .msg-body { color: var(--text); font-style: normal; }
.msg.is-historical { opacity: 0.55; }
.msg.is-historical:hover { opacity: 0.85; }
.activity-log-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.run-btn.is-running { background: rgba(124, 199, 255, 0.12); border-color: rgba(124, 199, 255, 0.45); color: var(--link); }
.run-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ---------- Action menu (⋯) — shared ---------- */
.action-menu { position: relative; display: inline-block; }
.action-menu > summary { list-style: none; cursor: pointer; }
.action-menu > summary::-webkit-details-marker { display: none; }
/* Placement only; the look is the shared Menu block (R2-UI-02). */
.action-menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  display: flex;
  flex-direction: column;
}
/* Inside a scrolling table the list floats above the page so the
   table's overflow doesn't clip it (ui_controls.js positions it). */
.action-menu-list.is-floating { position: fixed; right: auto; z-index: 60; }

/* .table-fit: fill the width and let .cell-wrap cells wrap instead of
   sizing the table to its content (which scrolls sideways). */
.table-scroll > table.data.table-fit { width: 100%; }
/* Table cells that may wrap (names) inside the nowrap scroll tables. */
.table-scroll > table.data td.cell-wrap,
table.data td.cell-wrap {
  white-space: normal;
  overflow-wrap: anywhere;
  min-width: 9rem;
}

.run-drawer-stale {
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid rgba(255,200,87,0.35);
  border-radius: var(--radius-md);
  background: rgba(255,200,87,0.08);
  color: var(--warn);
  font-size: var(--fs-base);
}

/* ---------- Palette search, recent, quick add (CAN-02) ---------- */
.palette-search { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); }
.palette-search input { width: 100%; }
.palette-search p { margin: 0.4rem 0 0; }
.palette.is-searching .palette-section-body[hidden] { display: block !important; }
.palette .palette-section.is-search-miss { display: none; }
.quick-add {
  position: absolute; z-index: 12; width: 300px; padding: 0.45rem;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--panel);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
.quick-add input { width: 100%; }
.quick-add-list { list-style: none; margin: 0.35rem 0 0; padding: 0; max-height: 220px; overflow: auto; }
.quick-add-list li { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.35rem 0.5rem; border-radius: var(--radius-md); cursor: pointer; font-size: var(--fs-base); }
.quick-add-list li small { color: var(--muted); font-size: var(--fs-xs); }
.quick-add-list li.is-active, .quick-add-list li:hover { background: var(--panel-2); }
.quick-add-hint { margin: 0.3rem 0.2rem 0; }

/* ---------- Builder header (NAV-04, MOB-01) ---------- */
.builder-crumbs { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--muted); font-size: var(--fs-base); }
.builder-crumbs a { color: var(--muted); }
.builder-crumbs a:hover { color: var(--text); }
.crumb-current { min-width: 0; overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
.builder-more-menu [role="menuitem"].only-narrow { display: none; }
@media (max-width: 640px) {
  .workbench-topbar .topbar-secondary { display: none; }
  .builder-more-menu [role="menuitem"].only-narrow { display: flex; }
}
/* R2-BUG-05: the header stays one row at any name length. The name takes
   whatever is left and ends in an ellipsis (full name in its tooltip);
   every pill and button keeps its size and never wraps. */
.workbench-topbar .btn,
.workbench-topbar .lint-pill,
.workbench-topbar .save-state,
.workbench-topbar .run-state,
.workbench-topbar .badge { white-space: nowrap; }
.workbench-topbar .topbar-actions > *,
.workbench-topbar .topbar-left > :not(h1) { flex-shrink: 0; }
/* Run, Starting… and Running… share one width, so nothing jumps. */
.run-btn { min-width: 6.6rem; }
@media (min-width: 901px) {
  .workbench-topbar { flex-wrap: nowrap; }
  .workbench-topbar .topbar-left { flex: 1 1 auto; }
  .workbench-topbar .topbar-left h1 { flex: 0 1 auto; min-width: 3rem; }
  .workbench-topbar .topbar-actions { flex: 0 0 auto; }
}
.save-state-icon { display: none; }
.lint-pill-count { display: none; }
.save-state[data-state="saved"] .save-state-icon::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background: var(--ok);
  -webkit-mask: var(--i-check) center / contain no-repeat;
  mask: var(--i-check) center / contain no-repeat;
  vertical-align: -2px;
}
.save-state[data-state="dirty"] .save-state-icon::before { content: "●"; color: var(--warn); font-size: var(--fs-xs); }
.save-state[data-state="error"] .save-state-icon::before { content: "!"; color: var(--err); font-weight: 800; }
.save-state[data-state="saving"] .save-state-icon {
  width: 11px; height: 11px; border: 2px solid var(--muted); border-top-color: transparent;
  border-radius: 50%; animation: uq-spin 0.8s linear infinite;
}
/* Run page: the title row truncates the pipeline name; the meta row
   (start time, trigger, cost) sits under it, so actions never wrap. */
.run-topbar .topbar-left { flex-direction: column; align-items: stretch; gap: 0.25rem; flex-wrap: nowrap; }
.run-title-row { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.run-title-row h1 { flex: 0 1 auto; min-width: 0; }
.run-title-pipeline { color: var(--muted); font-weight: var(--fw-ui); text-decoration: none; }
.run-title-pipeline:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.run-title-row > :not(h1) { flex-shrink: 0; }
.run-meta-row { display: flex; align-items: center; gap: 0.5rem; min-width: 0; overflow: hidden; }
.run-meta-row > * { flex-shrink: 0; white-space: nowrap; }
.run-topbar .topbar-actions .inline-form { margin: 0; display: inline-flex; }
@media (max-width: 900px) {
  .run-meta-row { flex-wrap: wrap; overflow: visible; }
}
/* Below about 1280 px: the save state is just its icon and the check pill
   a dot plus a count. The words stay for screen readers and tooltips. */
@media (max-width: 1280px) {
  .save-state:not([data-state="readonly"]) {
    width: 26px; height: 26px; min-height: 0; padding: 0; justify-content: center;
    font-size: var(--fs-sm); line-height: 1;
  }
  .save-state:not([data-state="readonly"]) .save-state-icon { display: inline-grid; place-items: center; }
  .save-state:not([data-state="readonly"]) .save-state-text,
  .lint-pill-text {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .lint-pill { min-height: 26px; padding-inline: 0.5rem; }
  .lint-pill-count { display: inline; font-weight: 700; font-variant-numeric: tabular-nums; }
  .lint-pill-count:empty { display: none; }
}

/* ---------- Card heads and run rows ---------- */
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.card-head h2 { margin-bottom: 0.5rem; }
/* Recent runs: one fixed grid so badges and times line up. */
.run-rows li { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem 5.5rem; align-items: center; }
.run-rows li > .run-state { justify-self: start; }
.run-rows li > .muted:last-child { text-align: right; }
.run-row-name { display: flex; min-width: 0; white-space: nowrap; margin-right: 0 !important; }
/* The pipeline name gives way; the run number always shows (R2-BUG-13). */
.run-row-pipeline { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.run-row-number { flex: 0 0 auto; }

/* ---------- Home (review 2.1) ---------- */
.home { display: grid; gap: var(--space-8); max-width: 880px; margin: 0 auto; }
.home > * { min-width: 0; }
.home-greeting { margin: var(--space-1) 0 calc(-1 * var(--space-2)); font-size: var(--fs-xl); font-weight: var(--fw-page); }
/* Visual polish 3: the composer (Chat's) with the picker chip on the left
   of its toolbar and Chat / Automate it on the right. */
.home-ask-form { margin: 0; }
.home-ask-hint { margin: var(--space-2) var(--space-1) 0; }
.home-try { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: var(--space-2) var(--space-1) 0; }
.home-try-chip { display: inline-flex; align-items: center; height: var(--h-sm); padding: 0 var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-pill); background: transparent; color: var(--text); font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.home-try-chip:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); }
.home-attention { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--border)); border-radius: var(--radius-md); background: color-mix(in srgb, var(--warn) 7%, transparent); }
.home-attention-icon { display: inline-flex; color: var(--warn); }
.home-attention-icon .icon { width: 16px; height: 16px; }
.home-attention-text { flex: 1; min-width: 0; font-size: var(--fs-base); }
.home-attention-link { padding: 0; border: 0; background: none; color: var(--text); font: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--text) 35%, transparent); text-underline-offset: 3px; }
.home-attention-link:hover, .home-attention-link:focus-visible { color: var(--link); }
.home-inline-form { display: inline; margin: 0; }
/* Section headings: the same as Chat's list groups ("Today"). */
.home-section-title, .chat-list-group { margin: 0 0 var(--space-3); color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-ui); letter-spacing: 0.06em; text-transform: uppercase; }
.chat-list-group { margin: var(--space-3) 0 var(--space-1); padding: 0 var(--space-2); }
/* Jump back in: one-line titles, so the cards in a row are one height. */
.home-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.home-card { display: flex; align-items: center; gap: var(--space-3); height: 100%; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--panel); color: var(--text); text-decoration: none; }
.home-card:hover, .home-card:focus-visible { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); text-decoration: none; }
.home-card-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: var(--h-md); height: var(--h-md); border-radius: var(--radius-sm); background: var(--panel-2); color: var(--accent); }
.home-card-icon .icon { width: 18px; height: 18px; }
.home-card-body { display: grid; gap: 2px; min-width: 0; }
.home-card-title { overflow: hidden; font-size: var(--fs-md); font-weight: var(--fw-title); text-overflow: ellipsis; white-space: nowrap; }
.home-card-meta { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--muted); font-size: var(--fs-sm); line-height: 20px; white-space: nowrap; }
.home-card-meta .run-state { flex: none; margin: 0; }
.home-card-meta .run-state + .home-card-when::before { content: "·"; margin-right: 6px; }
.home-card-when { flex: none; }
.home-card-meta.is-detail { display: block; white-space: normal; }
.home-month { margin: 0; }
.home-month-link { margin-left: var(--space-2); white-space: nowrap; }
.home-tips { padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--panel); }
.home-tips > .home-section-title { padding-right: var(--space-8); }
.home-tips .checklist { margin-bottom: 0; }
.checklist { margin: 0; padding: 0; list-style: none; }
.checklist li { display: flex; align-items: flex-start; gap: var(--space-2); margin: 6px 0; }
.checklist .step-mark { display: inline-flex; flex: none; justify-content: center; width: 16px; margin-top: 2px; }
.checklist .step-mark .icon { width: 16px; height: 16px; }
.checklist li[data-state="done"] { color: var(--muted); }
.checklist li[data-state="done"] .step-mark { color: var(--ok); }
.checklist li[data-state="done"] a, .checklist li[data-state="done"] .inline-link { color: inherit; }
.checklist li[data-state="todo"] .step-mark { opacity: 0.45; }
.checklist .step-optional { color: var(--muted); }
/* Two Jump back in cards with one name: what each is about. */
.home-card-preview { display: block; overflow: hidden; color: var(--muted); font-size: var(--fs-sm); text-overflow: ellipsis; white-space: nowrap; }
/* No AI key yet: step 1 stands out and carries the button. */
.checklist li.is-next { flex-wrap: wrap; align-items: center; padding: var(--space-2) var(--space-3); border: 1px solid rgba(255, 200, 87, 0.35); border-radius: var(--radius-md); background: rgba(255, 200, 87, 0.06); }
.checklist li.is-next .step-mark { margin-top: 0; opacity: 1; color: var(--warn); }
.checklist li.is-next .step-text { flex: 1 1 16rem; min-width: 0; }
/* What Chat and Automate need, said under the box before anyone types. */
.home-no-key { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: var(--space-2) 0 0; padding: var(--space-2) var(--space-3); border: 1px solid rgba(255, 200, 87, 0.35); border-radius: var(--radius-md); background: rgba(255, 200, 87, 0.06); font-size: var(--fs-base); }
.home-no-key[hidden] { display: none; }
.home-no-key-text { flex: 1 1 16rem; min-width: 0; }
@media (max-width: 640px) {
  .home-attention { flex-wrap: wrap; }
  /* The picker chip shows its icon; the name is in its tooltip. */
  .home-ask-form .picker-name { display: none; }
}

/* ---------- Home: Getting started (BUG-12) ---------- */
.getting-started { position: relative; }
.getting-started-hide { position: absolute; top: var(--space-3); right: var(--space-3); margin: 0; }
/* All set: one muted line, "Show tips" and × (visual polish 3). */
.getting-started.is-complete { display: flex; align-items: flex-start; gap: var(--space-2); padding: 0; border: 0; background: none; }
.getting-started.is-complete .getting-started-hide { position: static; order: 2; }
.getting-started-done { flex: 1; min-width: 0; }
.getting-started-done > summary { display: inline-flex; align-items: center; gap: 6px; min-height: var(--h-sm); color: var(--muted); font-size: var(--fs-sm); list-style: none; cursor: pointer; }
.getting-started-done > summary::-webkit-details-marker { display: none; }
.getting-started-check .icon { display: block; width: 16px; height: 16px; color: var(--ok); }
.getting-started-toggle { color: var(--link); }
.getting-started-done > summary:hover .getting-started-toggle { text-decoration: underline; }
.getting-started-done:not([open]) .when-open, .getting-started-done[open] .when-closed { display: none; }
.getting-started-done[open] { padding: 0 var(--space-4) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--panel); }
.getting-started-done[open] > summary { margin: var(--space-1) 0 var(--space-1); }

/* ---------- Settings: grouped action rows (BUG-16) ---------- */
.settings-subsection { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.settings-subsection h3 { margin: 0 0 0.75rem; font-size: var(--fs-md); }
/* Review 2.2: palette preferences (moved from the Library). */
.palette-prefs { column-width: 320px; column-gap: 1.75rem; margin-top: 0.5rem; }
.palette-prefs-group { margin: 0 0 1rem; padding: 0; border: 0; min-width: 0; }
.palette-prefs-group legend { break-after: avoid; padding: 0; margin-bottom: 0.35rem; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.palette-pref { display: flex; align-items: flex-start; gap: 0.55rem; padding: 0.3rem 0; cursor: pointer; break-inside: avoid; }
.palette-pref input { margin-top: 0.2rem; flex: none; }
.palette-pref-name { display: block; font-size: var(--fs-base); }
.palette-pref-desc { display: block; font-size: var(--fs-xs); color: var(--muted); line-height: 1.35; }
.settings-action { display: grid; gap: 0.35rem; justify-items: start; margin: 0 0 1rem; }
.settings-action .helptext { margin: 0; }

.nowrap { white-space: nowrap; }
.num-short { font-variant-numeric: tabular-nums; }

/* ---------- Webhooks (BUG-23) ---------- */
.node-webhook-note { display: block; margin: 0.25rem 0; color: var(--link); font-size: var(--fs-xs); }
.webhook-curl { margin-top: 0.5rem; }
.webhook-curl pre { margin: 0.4rem 0; padding: 0.55rem 0.65rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(0,0,0,0.25); white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-xs); }
/* The whole address, wrapped: a cut-off URL can't be copied by eye. */
.builder-webhook-url { display: block; overflow-wrap: anywhere; font-size: var(--fs-sm); }
.builder-manager-row.is-new { border-color: rgba(56, 211, 159, 0.55); box-shadow: 0 0 0 1px rgba(56, 211, 159, 0.35); }
.builder-action-status { margin: 0 0 0.6rem; padding: 0.45rem 0.6rem; border-radius: var(--radius-sm); background: rgba(56, 211, 159, 0.1); color: var(--ok); font-size: var(--fs-base); }

/* ---------- Schedules (BUG-09) ---------- */
.schedule-sub { display: block; margin-top: 0.15rem; }
/* Review 2.1: a schedule that paused itself after failing. */
.schedule-auto-paused { margin: 0.3rem 0 0; max-width: 15rem; color: var(--warn); line-height: 1.35; white-space: normal; }
.schedule-state { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
.schedules-table td { vertical-align: middle; }
.schedules-table .run-state { margin-right: 0.35rem; }

/* Small neutral labels (steps, scheduled, webhook, owner). */
.chip { text-decoration: none; }

/* ---------- Pipelines list (NAV-01; visual polish 4) ---------- */
/* One toolbar of 36 px controls: search, sort, Select, Grid/List. */
.pipeline-list-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
}
.pipeline-list-tools input[type="search"] {
  flex: 1 1 16rem;
  min-width: 0;
  min-height: var(--h-md);
  padding: 0 var(--space-3);
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
}
.pipeline-list-tools .custom-select { flex: 0 0 12rem; width: 12rem; min-width: 0; }
/* Cards: the title (two lines at most) with small type icons and ⋯, the
   description (two lines), then one meta row at the bottom. Cards in a
   row are one height. */
.card.pipeline-card { position: relative; gap: 0; }
.card.pipeline-card:hover { border-color: #3a4150; }
.card.pipeline-card .card-body { flex: 1; gap: var(--space-2); }
.pipeline-card-head { display: flex; align-items: flex-start; gap: var(--space-2); }
.pipeline-card-head h3 {
  display: -webkit-box;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: var(--fs-md);
  font-weight: var(--fw-title);
  line-height: 1.4;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
/* The whole card opens the pipeline; the ⋯ menu and icons sit above. */
.pipeline-card-link { color: inherit; text-decoration: none; }
.pipeline-card-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-md); }
.pipeline-card-link:focus-visible { outline: none; }
.pipeline-card .action-menu,
.pipeline-card .chip,
.pipeline-card .badge,
.pipeline-card-kind,
.pipeline-card time,
.pipeline-card-approve { position: relative; z-index: 2; }
.pipeline-card-extra { display: inline-flex; flex: none; flex-wrap: wrap; align-items: center; gap: 2px; padding-top: 1px; }
.pipeline-card-extra:empty { display: none; }
.pipeline-card-kind { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-sm); color: var(--muted); }
.pipeline-card-kind .icon { width: 16px; height: 16px; }
a.pipeline-card-kind:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); text-decoration: none; }
.pipeline-card-head .action-menu { flex: none; margin: -2px -4px 0 0; }
.pipeline-card-desc {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
/* Inline text, so it wraps between items but never inside one ("Updated
   4 h ago" stays whole); each "·" sticks to the item before it and never
   starts a line. A name too long for the card ends in "…". */
.pipeline-card-meta {
  margin-top: auto !important;
  padding-top: var(--space-2);
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 22px;
}
.pipeline-card-meta > span { white-space: nowrap; }
.pipeline-card-state .run-state, .pipeline-card-state .badge { margin: 0 4px 0 0; }
.pipeline-card-lastrun:empty { display: none; }
.pipeline-card-meta > .pipeline-card-updated { white-space: normal; }
.pipeline-card-updated > span { white-space: nowrap; }
.pipeline-card-by, .pipeline-card-owner { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }
:is(.pipeline-card-state:has(.pipeline-card-never), .pipeline-card-lastrun:not(:empty), .pipeline-card-steps)::after,
.pipeline-card-updated > :has(+ .pipeline-card-owner)::after { content: "\00a0·"; }
.pipeline-cards .card[hidden] { display: none; }
/* List layout for people with many pipelines (R2-BUG-14): one fixed set
   of columns for every row and the header, so they line up. The head and
   the meta row dissolve into the row's grid. Below 901 px a row looks
   like a small card. */
.pipeline-list-head { display: none; }
.pipeline-cards.is-list { --pipeline-cols: minmax(200px, 2fr) 120px 150px 80px minmax(120px, 1fr) 140px 48px; grid-template-columns: 1fr; gap: var(--space-2); }
.pipeline-cards.is-list .card.pipeline-card { padding: 10px 14px; }
.pipeline-cards.is-list .pipeline-card-desc { display: none; }
@media (min-width: 901px) {
  .pipeline-cards.is-list .pipeline-list-head {
    display: grid;
    grid-template-columns: var(--pipeline-cols);
    align-items: center;
    gap: var(--space-3);
    padding: 0 15px;  /* the cards' padding and border */
    color: var(--muted);
    font-size: var(--fs-xs);
    font-weight: var(--fw-ui);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .pipeline-cards.is-list .pipeline-card .card-body {
    display: grid;
    grid-template-columns: var(--pipeline-cols);
    align-items: center;
    gap: var(--space-3);
  }
  .pipeline-cards.is-list .pipeline-card-head,
  .pipeline-cards.is-list .pipeline-card-meta { display: contents; }
  .pipeline-cards.is-list .pipeline-card-head h3 { display: block; order: 1; text-overflow: ellipsis; white-space: nowrap; }
  /* Two badges ("Completed", "Not published") wrap inside the column. */
  .pipeline-cards.is-list .pipeline-card-state { display: flex; flex-wrap: wrap; gap: 4px; order: 2; justify-self: start; min-width: 0; white-space: normal; }
  .pipeline-cards.is-list .pipeline-card-state :is(.run-state, .badge) { margin: 0; }
  .pipeline-cards.is-list .pipeline-card-lastrun { display: block; order: 3; }
  .pipeline-cards.is-list .pipeline-card-steps { order: 4; justify-self: start; }
  .pipeline-cards.is-list .pipeline-card-extra { display: inline-flex; order: 5; justify-self: start; }
  .pipeline-cards.is-list .pipeline-card-updated { order: 6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pipeline-cards.is-list .pipeline-card-updated > span { display: inline; }
  .pipeline-cards.is-list .pipeline-card .action-menu { order: 7; justify-self: end; margin: 0; }
  .pipeline-cards.is-list .pipeline-card-meta > *::after { content: none; }
  /* The column titles name the times: "2 h ago", not "Last run 2 h ago". */
  .pipeline-cards.is-list .pipeline-card-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}
@media (max-width: 640px) {
  .pipeline-list-tools .custom-select { flex: 1 1 10rem; width: auto; }
}
/* An open menu sits above neighbouring cards and their own ⋯ buttons. */
.action-menu[open], .pipeline-card .action-menu[open] { z-index: 30; }
/* Fixed-height dialogs: grid bodies pack their content at the top instead
   of stretching rows to fill the space. */
.modal-body, .modal-stacked-form .modal-body, .builder-manager-body { align-content: start; }


/* MOB-02: shared responsive tables. <table class="data table-cards"> shows
   each row as a card on phones: the title cell first, then "label  value"
   lines (labels come from the column headers, see ui_controls.js), then
   the actions. Kept last so it wins over the table width rules above. */
@media (max-width: 640px) {
  .table-scroll:has(> table.table-cards) { overflow: visible; }
  table.data.table-cards, table.data.table-cards tbody { display: block; width: 100%; min-width: 0; }
  table.data.table-cards thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  table.data.table-cards tr {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.15rem;
    margin: 0 0 0.6rem; padding: 0.65rem 0.8rem;
    border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--panel);
  }
  /* The label sits in a fixed left gutter, so a cell may hold any mix of
     text and elements. */
  .table-scroll > table.data.table-cards td,
  table.data.table-cards td {
    display: block; position: relative; min-width: 0; max-width: none;
    padding: 0.15rem 0 0.15rem 7rem; border: 0;
    white-space: normal; overflow-wrap: anywhere; text-align: left;
  }
  table.data.table-cards td::before {
    content: attr(data-label); position: absolute; left: 0; top: 0.25rem; width: 6.5rem;
    color: var(--muted); font-size: var(--fs-xs); line-height: 1.3;
  }
  table.data.table-cards td.is-card-title,
  table.data.table-cards td[colspan],
  table.data.table-cards td[data-label=""] { padding-left: 0; }
  table.data.table-cards td.is-card-title::before,
  table.data.table-cards td[colspan]::before,
  table.data.table-cards td[data-label=""]::before { content: none; display: none; }
  table.data.table-cards td.is-card-title { order: -1; font-weight: 600; font-size: var(--fs-md); }
  table.data.table-cards td.actions-cell { padding: 0.35rem 0 0; text-align: right; }
  table.data.table-cards td.actions-cell::before { content: none; display: none; }
  table.data.table-cards td:empty { display: none; }
}


/* DS-03: Activity notes take their colour from what happened (data-tone,
   set in pipeline_builder.js): red for failures, amber for check warnings,
   green for "all good" or resolved, neutral for plain notes. Upright text. */
.msg.msg-system { opacity: 1; font-style: normal; border-left: 3px solid var(--tone, var(--border)); }
.msg.msg-system .msg-body { color: var(--text); font-style: normal; }
.msg.msg-system[data-tone="neutral"] .msg-body { color: var(--muted); }
.msg.msg-system[data-tone="success"] header strong { color: var(--status-success); }
.msg.msg-system[data-tone="warning"] header strong { color: var(--status-warning); }
.msg.msg-system[data-tone="error"] header strong { color: var(--status-error); }
.msg.is-resolved .msg-body { color: var(--muted); }

/* ---------- Tabs, segmented controls, filter chips (R2-UI-01) ----------
   Every tab-like control is one of three components:
   1. .tabs > .tab                  switch sections of a page (underline)
   2. .seg-group > .seg-btn         switch views of the same data
   3. .filter-chips > .filter-chip  narrow a list (rounded, with counts)
   Settings and the Files sidebar use .subnav (a vertical page nav).
   "Selected" is always the accent; blue is for links only. A selected
   chip or segment is tinted, never filled, so it cannot pass for the
   view's one primary button (DS-06). */
.tabs {
  display: flex;
  align-items: flex-end;
  gap: 0.25rem;
  margin: 0 0 1.25rem;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 40px;
  padding: 0 0.75rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.tab::after {
  content: "";
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: transparent;
}
.tab:hover { color: var(--text); text-decoration: none; }
.tab:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: -3px; border-radius: var(--radius-sm); }
.tab.is-active, .tab[aria-current="page"] { color: var(--text); }
.tab.is-active::after, .tab[aria-current="page"]::after { background: var(--accent); }
.tab .pill { font-size: var(--fs-xs); }

.seg-group {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
}
.seg-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 0.8rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-base);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.seg-btn:hover:not(.is-active) { color: var(--text); text-decoration: none; }
.seg-btn .icon { width: 16px; height: 16px; }
.seg-icons .seg-btn { width: 32px; padding: 0; }
.seg-btn.is-active {
  background: color-mix(in srgb, var(--accent) 16%, var(--panel));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--text);
}

.filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0 0 1rem; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 30px;
  padding: 0 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-base);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.filter-chip:hover { color: var(--text); border-color: #3a4150; text-decoration: none; }
.filter-chip.is-active {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--text);
}
.filter-chip-count {
  min-width: 1.3rem;
  padding: 0 0.35rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.07);
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.3rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.filter-chip.is-active .filter-chip-count { background: color-mix(in srgb, var(--accent) 26%, transparent); color: var(--text); }

.subnav { display: grid; gap: 2px; align-content: start; }
.subnav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 36px;
  padding: 0 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: var(--fs-base);
  font-weight: 500;
  text-decoration: none;
}
.subnav-link:hover { background: rgba(255, 255, 255, 0.04); color: var(--text); text-decoration: none; }
.subnav-link.is-active { background: rgba(255, 255, 255, 0.07); color: var(--text); }
.subnav-link.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 3px;
  background: var(--accent);
}
.settings-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
  margin-top: 1rem;
}
.settings-layout > .subnav { position: sticky; top: 1rem; }
@media (max-width: 900px) {
  .settings-layout { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  /* On narrow screens the sub-nav is a scrolling row of page tabs. */
  .settings-layout > .subnav {
    position: static;
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .settings-layout > .subnav .subnav-link { flex: 0 0 auto; min-height: 40px; border-radius: 0; background: none; white-space: nowrap; }
  .settings-layout > .subnav .subnav-link.is-active::before { left: 0.75rem; right: 0.75rem; top: auto; bottom: 0; width: auto; height: 2px; }
}

/* R2-EDIT-01: a hidden canvas is shown invisibly for one synchronous
   measurement of the node cards (see measureNodeSizes). */
.canvas-wrapper.is-measuring { display: block !important; visibility: hidden !important; }

/* R2-BUG-06: the optional rename offered with a proposal. */
.proposal-rename { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.6rem; font-size: var(--fs-base); cursor: pointer; }
.proposal-rename.is-done { color: var(--ok); cursor: default; }
/* Review 1.3: the applied card's schedule state. */
.proposal-schedule-state { align-self: center; max-width: 100%; font-size: var(--fs-sm); }
/* A chip is one 20 px line: the saved schedule ends in an ellipsis (its
   words are the tooltip) instead of wrapping out of the pill; the unsaved
   one, with its Set it button, wraps as a whole. */
.proposal-schedule-state.is-set { color: var(--ok); overflow: hidden; text-overflow: ellipsis; }
.proposal-schedule-state:not(.is-set) { height: auto; white-space: normal; }
.proposal-schedule-state .link-btn { padding: 0; font-size: inherit; }
#rim-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Files page (R2-UI-03) ----------
   Folders are a .subnav; files are rows (or cards in grid view) of
   type badge · name + meta · folder chips · "Used by" · status dot · ⋯.
   Clicking a row opens the detail panel. */
.files-page-head { margin-bottom: 1rem; }
.files-page-head h1 { margin-bottom: 0.25rem; }
.files-page-head p { margin: 0; }
.files-manager {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
  margin-top: 1.25rem;
}
.files-folder-sidebar { position: sticky; top: 72px; display: grid; gap: 0.25rem; }
.files-folder-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.9rem;
  padding: 0 0 0.15rem 0.75rem;
}
.files-toolbar-label {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.folder-add-button {
  width: 28px;
  min-width: 0;
  height: 28px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.folder-add-button:hover,
.folder-add-button:focus-visible { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.folder-add-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.folder-list-empty { margin: 0; padding: 0.4rem 0.75rem; }
/* Folder rows are .subnav-link, so selected is the same subtle surface and
   accent bar as Settings. */
.folder-row { gap: 0.6rem; padding-right: 0.35rem; }
.folder-row-link {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: inherit;
  text-decoration: none;
}
.folder-row-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.folder-row-link:hover { color: inherit; text-decoration: none; }
.folder-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-row-count {
  flex: 0 0 auto;
  min-width: 22px;
  padding: 0 0.35rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.35rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.folder-row.is-active .folder-row-count { color: var(--text); }
.folder-row.is-drag-over {
  background: color-mix(in srgb, var(--ok) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 55%, transparent);
}
.folder-row-icon,
.folder-inline-icon { flex: 0 0 18px; color: var(--muted); }
.folder-row-icon svg,
.folder-inline-icon svg,
.folder-delete-button svg {
  width: 17px;
  height: 17px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.folder-delete-button {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  opacity: 0;
  transition: color 120ms ease, background-color 120ms ease, opacity 120ms ease;
}
.folder-row:hover .folder-delete-button,
.folder-row:focus-within .folder-delete-button,
.folder-delete-button:focus-visible { opacity: 1; }
.folder-delete-button:hover,
.folder-delete-button:focus-visible { color: var(--err); background: rgba(255, 93, 108, 0.11); outline: none; }
.folder-inline-create {
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.3rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
}
.folder-inline-create[hidden] { display: none; }
.folder-inline-create input[type="text"] {
  width: 100%;
  height: 28px;
  padding: 0.2rem 0;
  color: var(--text);
  background: transparent;
  border: 0;
  font-size: var(--fs-base);
}
.folder-inline-create input[type="text"]:focus { outline: 0; }
.folder-inline-create.is-saving { opacity: 0.65; }
.folder-inline-create.has-error { border-color: var(--err); }
.folder-inline-error { grid-column: 1 / -1; color: var(--err); font-size: var(--fs-xs); }

.files-main-panel { min-width: 0; }
.files-main-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 0.6rem; }
.files-main-head h2 { display: flex; align-items: baseline; gap: 0.5rem; margin: 0 0 0.2rem; font-size: var(--fs-md); }
.files-count { font-size: var(--fs-base); font-weight: 500; font-variant-numeric: tabular-nums; }
.files-main-head p { margin: 0; }

.file-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.file-row {
  position: relative;
  display: grid;
  grid-template-columns: 14px 52px minmax(0, 1fr) minmax(0, 13rem) 6.5rem 10px 34px;
  align-items: center;
  column-gap: 0.75rem;
  min-height: 60px;
  padding: 0.5rem 0.5rem 0.5rem 0.25rem;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-base);
  cursor: pointer;
  transition: background-color 120ms ease;
}
.file-row:hover,
.file-row.is-selected { background: rgba(255, 255, 255, 0.035); }
.file-row.is-selected { box-shadow: inset 2px 0 0 var(--accent); }
.file-row:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: -2px; }
.file-row.is-dragging { opacity: 0.45; }
.drag-grip { color: var(--muted); opacity: 0; cursor: grab; transition: opacity 120ms ease; }
.drag-grip svg { width: 14px; height: 14px; display: block; fill: currentColor; }
.file-row:hover .drag-grip,
.file-row:focus-visible .drag-grip { opacity: 1; }
/* Visual polish 9: the file type (PDF, MD…) is a Badge in its kind's colour. */
.file-icon {
  --file-tone: var(--muted);
  display: inline-block;
  justify-self: start;
  min-width: 40px;
  height: 20px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--file-tone) 32%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--file-tone) 10%, transparent);
  color: var(--file-tone);
  font-size: var(--fs-xs);
  font-weight: var(--fw-ui);
  line-height: 18px;
  text-align: center;
  white-space: nowrap;
}
.file-icon[data-kind="pdf"] { --file-tone: #ff6b6b; }
.file-icon[data-kind="doc"] { --file-tone: #5b9dff; }
.file-icon[data-kind="sheet"] { --file-tone: #3ccf8e; }
.file-icon[data-kind="slides"] { --file-tone: #ff9f43; }
.file-icon[data-kind="text"] { --file-tone: #aab2bf; }
.file-icon[data-kind="code"] { --file-tone: #c084fc; }
.file-icon[data-kind="image"] { --file-tone: #2dd4bf; }
.file-icon[data-kind="audio"] { --file-tone: #f472b6; }
.file-main { min-width: 0; display: grid; gap: 0.1rem; }
.file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.file-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.file-folders { min-width: 0; display: flex; flex-wrap: wrap; gap: 0.25rem; }
.file-folder-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  max-width: 100%;
  height: 22px;
  padding: 0 0.15rem 0 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: var(--fs-xs);
  white-space: nowrap;
  overflow: hidden;
}
.tag-remove {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
}
.tag-remove:hover { color: var(--err); background: rgba(255, 93, 108, 0.12); }
.file-usage { justify-self: start; min-width: 0; }
.file-used { font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-ui); cursor: pointer; }
.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--tone);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 18%, transparent);
  justify-self: center;
}
.file-row .action-menu { justify-self: end; }
.file-empty {
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  padding: 2.5rem 1rem;
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.file-empty .empty-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel-2);
  color: var(--muted);
}
.file-empty .empty-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Grid view: one card per file. */
.file-list.is-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.75rem;
  border-top: 0;
}
.file-list.is-grid .file-row {
  grid-template-columns: 52px minmax(0, 1fr) 34px;
  grid-template-areas: "icon main menu" "folders folders folders" "usage usage dot";
  align-items: start;
  row-gap: 0.55rem;
  min-height: 0;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel);
}
.file-list.is-grid .file-row:hover,
.file-list.is-grid .file-row.is-selected { background: var(--panel-2); }
.file-list.is-grid .drag-grip { display: none; }
.file-list.is-grid .file-icon { grid-area: icon; }
.file-list.is-grid .file-main { grid-area: main; }
.file-list.is-grid .file-folders { grid-area: folders; }
.file-list.is-grid .file-usage { grid-area: usage; }
.file-list.is-grid .status-dot { grid-area: dot; justify-self: end; align-self: center; }
.file-list.is-grid .action-menu { grid-area: menu; }
.file-list.is-grid .file-empty { grid-column: 1 / -1; border: 1px dashed var(--border); border-radius: var(--radius-md); }

/* Detail panel. */
.file-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  /* 100% of the viewport without the reserved scrollbar gutter (100vw
     would include it and poke out on phones). */
  width: 400px;
  max-width: 100%;
  overflow-y: auto;
  padding: 1.25rem;
  border-left: 1px solid var(--border);
  background: var(--panel);
  box-shadow: -18px 0 40px rgba(0, 0, 0, 0.35);
}
.file-panel[hidden] { display: none; }
.file-panel-close { position: absolute; top: 0.75rem; right: 0.75rem; }
.file-detail-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.1rem; padding-right: 2rem; }
.file-icon-lg { flex: 0 0 auto; }
.file-detail-name { margin: 0; font-size: var(--fs-md); overflow-wrap: anywhere; }
.file-detail-facts { display: grid; gap: 0.5rem; margin: 0 0 1.25rem; }
.file-detail-facts > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.75rem; }
.file-detail-facts dt { color: var(--muted); font-size: var(--fs-base); }
.file-detail-facts dd { margin: 0; font-size: var(--fs-base); overflow-wrap: anywhere; }
.file-detail-facts .status-dot { display: inline-block; margin-right: 0.35rem; vertical-align: middle; }
.file-detail-section { padding: 1rem 0; border-top: 1px solid var(--border); }
.file-detail-section h3 {
  margin: 0 0 0.55rem;
  color: var(--muted);
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.file-detail-folders { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.65rem; }
.file-detail-folders .muted { margin: 0; }
.file-detail-uses { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; font-size: var(--fs-base); }
.file-detail-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.file-detail-actions form { margin: 0; }

/* Drop files anywhere on the page. */
.page-drop-overlay {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(8, 9, 12, 0.72);
  pointer-events: none;
}
.page-drop-overlay[hidden] { display: none; }
.page-drop-card {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  padding: 2.5rem 3rem;
  border: 2px dashed color-mix(in srgb, var(--accent) 70%, transparent);
  border-radius: var(--radius-md);
  background: var(--panel);
  text-align: center;
}
.page-drop-card svg { width: 44px; height: 44px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* No key: dropping only opens the upload dialog, which says why. */
.page-drop-overlay.is-disabled .page-drop-card { border-color: var(--border); }
.page-drop-overlay.is-disabled .page-drop-card svg { stroke: var(--muted); }

@media (max-width: 1120px) {
  .file-row { grid-template-columns: 14px 52px minmax(0, 1fr) minmax(0, 9rem) auto 10px 34px; }
}
@media (max-width: 900px) {
  .files-manager { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .files-folder-sidebar { position: static; }
}
@media (max-width: 640px) {
  .file-list:not(.is-grid) .file-row {
    grid-template-columns: 52px minmax(0, 1fr) 10px 34px;
    grid-template-areas: "icon main dot menu" ". folders folders folders" ". usage usage usage";
    row-gap: 0.35rem;
  }
  .file-list:not(.is-grid) .drag-grip { display: none; }
  .file-list:not(.is-grid) .file-icon { grid-area: icon; }
  .file-list:not(.is-grid) .file-main { grid-area: main; }
  .file-list:not(.is-grid) .file-folders { grid-area: folders; }
  .file-list:not(.is-grid) .file-usage { grid-area: usage; }
  .file-list:not(.is-grid) .status-dot { grid-area: dot; }
  .file-list:not(.is-grid) .action-menu { grid-area: menu; }
  .file-folders:not(:has(.file-folder-tag)),
  .file-usage:not(:has(.file-used)) { display: none; }
  .files-main-head { flex-wrap: wrap; align-items: flex-start; }
}

/* ---------- Menu (R2-UI-02) ----------
   One look for every popup list of actions or links: the ⋯ menus, the
   account menu, the main menu on phones and the bell's panel. 32 px items
   with a 16 px icon, a shortcut hint on the right, a separator before
   destructive items. Behaviour (keyboard, icons, separators) is menus.js. */
.action-menu-list,
.user-menu,
.nav-menu,
.notif-panel {
  min-width: 200px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  background: var(--panel-2);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
}
.action-menu-list form,
.user-menu form { margin: 0; }
:is(.action-menu-list, .user-menu, .nav-menu) [role="menuitem"] {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 32px;
  padding: 0 0.6rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.25;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
:is(.action-menu-list, .user-menu, .nav-menu) [role="menuitem"]::before {
  content: "";
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  background: currentColor;
  opacity: 0.75;
  -webkit-mask: var(--icon) center / 16px 16px no-repeat;
  mask: var(--icon) center / 16px 16px no-repeat;
}
:is(.action-menu-list, .user-menu, .nav-menu) [role="menuitem"]:not([data-icon])::before { background: none; }
/* An icon on every row or on none (menus.js marks a menu that can't). */
:is(.action-menu-list, .user-menu, .nav-menu).is-plain [role="menuitem"]::before { display: none; }
:is(.action-menu-list, .user-menu, .nav-menu) [role="menuitem"][hidden] { display: none; }
:is(.action-menu-list, .user-menu, .nav-menu) [role="menuitem"]:is(:hover, :focus),
.notif-panel-item a:is(:hover, :focus) {
  background: rgba(255, 255, 255, 0.07);
  outline: none;
  text-decoration: none;
}
:is(.action-menu-list, .user-menu, .nav-menu) [role="menuitem"].danger { color: var(--err); }
:is(.action-menu-list, .user-menu, .nav-menu) [role="menuitem"].danger:is(:hover, :focus) {
  background: color-mix(in srgb, var(--err) 13%, transparent);
}
/* Two-line items (a label and a muted line under it). */
:is(.action-menu-list, .user-menu) [role="menuitem"]:has(> small) {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  column-gap: 0.6rem;
  padding-block: 6px;
  white-space: normal;
}
:is(.action-menu-list, .user-menu) [role="menuitem"] > small {
  grid-column: 2;
  margin-top: 0.1rem;
  color: var(--muted);
  font-size: var(--fs-xs);
}
.menu-sep { height: 1px; margin: 4px 6px; background: rgba(255, 255, 255, 0.08); }
.menu-kbd {
  margin-left: auto;
  padding-left: 1.25rem;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}
.notif-panel-item a { border-radius: var(--radius-sm); }
.user-menu { min-width: 260px; }
@media (max-width: 640px) {
  .nav-menu, .user-menu { min-width: 0; }
}

/* R2-BUG-07: what each plan step does, at a glance. */
.proposal-plan .plan-step { padding-left: 0.1rem; }
.plan-mark {
  display: inline-grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  margin-right: 0.4rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--tone) 16%, transparent);
  color: var(--tone);
  font-size: var(--fs-xs);
  vertical-align: -0.2em;
}
.plan-step.is-remove { --tone: var(--err); }
.plan-step.is-add { --tone: var(--ok); }
.plan-step.is-change { --tone: var(--warn); }
.plan-step.is-connect { --tone: var(--muted); }

/* A 1em icon from the shared set: <span class="icon" data-icon="pencil">
   (static/css/icons.css). Sized by .is-16/18/20 or by the control. */
.icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  pointer-events: none;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

/* R2-BUG-09: one details panel (the old run drawer) for the selected step,
   with Settings and Last run tabs. */
.node-panel .run-drawer-head { align-items: flex-start; gap: 0.75rem; }
.node-panel-heading { min-width: 0; display: grid; gap: 0.15rem; }
.node-panel-kind {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.node-panel-heading h3 { overflow-wrap: anywhere; }
.node-panel-tabs { flex: 0 0 auto; margin: 0; padding: 0 0.5rem; }
.node-panel .tab:disabled { opacity: 0.45; cursor: not-allowed; }
.node-panel-pane[hidden] { display: none; }
.node-panel-settings {
  flex: 1;
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding: 0.9rem 1rem 1.4rem;
  overflow: auto;
}
.node-panel-subtitle { margin: 0; color: var(--muted); font-size: var(--fs-base); }
.node-panel-issues { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; font-size: var(--fs-base); }
.node-panel-issues li { padding-left: 0.6rem; border-left: 3px solid var(--tone); color: var(--text); }
.node-panel-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.node-panel-hint { margin: 0; }

/* R2-BUG-10: an agent's abilities under its step in the Steps view. */
.run-step-abilities {
  list-style: none;
  margin: 0.15rem 0 0.2rem 2.6rem;
  padding: 0;
  display: grid;
  gap: 0.2rem;
  color: var(--muted);
  font-size: var(--fs-sm);
}
.run-step-abilities strong { color: var(--text); font-weight: 500; }
.rs-ability-mark { color: var(--muted); }

/* R2-BUG-11: a step's output in the Activity log, four lines high until
   "Show more". Prose in the text font; only JSON is monospace. */
.step-preview { margin-top: 0.3rem; font-size: var(--fs-base); line-height: 1.45; }
.step-preview.is-long:not(.is-expanded) {
  max-height: calc(4 * 1.45em);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
  mask-image: linear-gradient(180deg, #000 70%, transparent);
}
.step-preview .md > :first-child { margin-top: 0; }
.step-preview .md > :last-child { margin-bottom: 0; }
.step-preview-more { margin-top: 0.2rem; font-size: var(--fs-sm); }


/* R2-UI-07: below 60% zoom a step shows its icon and title only, the
   title scaled up so it stays readable on screen (canvas_view.js sets
   --canvas-zoom and .is-compact). */
#drawflow.is-compact .drawflow-node .node-body,
#drawflow.is-compact .drawflow-node .node-chips { display: none; }
#drawflow.is-compact .drawflow-node .node-head { border-bottom: 0; grid-template-columns: auto minmax(0, 1fr) auto auto; }
/* Scaled up to stay readable, but never so far that a title breaks into
   single letters when a huge graph is zoomed right out. */
#drawflow.is-compact .drawflow-node .node-title { font-size: min(calc(12px / var(--canvas-zoom, 1)), 36px); }
#drawflow.is-compact .drawflow-node .node-icon,
#drawflow.is-compact .drawflow-node .node-config-btn {
  width: min(calc(24px * 0.6 / var(--canvas-zoom, 1)), 48px);
  height: min(calc(24px * 0.6 / var(--canvas-zoom, 1)), 48px);
  font-size: min(calc(14px * 0.6 / var(--canvas-zoom, 1)), 28px);
}

/* R2-BUG-18: the upload dialog's fields. */
.um-field { display: grid; gap: 0.3rem; margin-bottom: 0.75rem; }
.um-field[hidden] { display: none; }
.um-credential-note { margin: -0.35rem 0 0.9rem; }
.um-formats { margin: 0 0 0.9rem; }
.um-formats summary { cursor: pointer; }
.um-formats p { margin: 0.35rem 0 0; }

/* R2-BUG-19: shown on an empty canvas while the assistant drafts. */
.canvas-drafting {
  position: absolute;
  left: 50%;
  bottom: 4.5rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: rgba(18, 20, 27, 0.9);
  color: var(--muted);
  font-size: var(--fs-base);
  transform: translateX(-50%);
  pointer-events: none;
}
.canvas-drafting[hidden] { display: none; }
.canvas-drafting-spinner {
  width: 13px;
  height: 13px;
  border: 2px solid var(--muted);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: uq-spin 0.8s linear infinite;
}

/* R2-EDIT-02: the assistant's suggestions, one card each. */
.suggestion-cards {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.suggestion-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.35rem 0.75rem;
  align-items: start;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(22, 27, 31, 0.82);
}
.suggestion-card.is-applied { border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.suggestion-card-main { display: grid; gap: 0.2rem; min-width: 0; }
.suggestion-card-title { font-size: var(--fs-base); font-weight: 600; }
.suggestion-card-why { color: var(--muted); font-size: var(--fs-base); line-height: 1.4; }
.suggestion-card-effect {
  justify-self: end;
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  color: var(--ok);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.suggestion-card-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.suggestion-card-state {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--ok);
  font-size: var(--fs-sm);
}
.suggestion-cards-dismissed { margin: 0.4rem 0 0; }

/* R2-EDIT-03: a proposal that replaces most steps saves a version first. */
.proposal-replace {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin: 0 0 0.55rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--warn) 9%, transparent);
  font-size: var(--fs-base);
  line-height: 1.45;
}
.proposal-replace .icon { flex: none; margin-top: 0.2em; color: var(--warn); }
.proposal-replace.is-done { border-color: var(--border); background: transparent; color: var(--muted); }
.proposal-replace.is-done .icon { color: var(--muted); }
.proposal-replace .link-btn { margin: 0; padding: 0; font-size: inherit; vertical-align: baseline; }

/* R2-EDIT-04: insert a step on an edge, and where quick-add will put it. */
.edge-add-btn {
  position: absolute;
  z-index: 6;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  background: var(--panel-2);
  color: var(--accent);
  font-size: var(--fs-base);
  cursor: pointer;
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
.edge-add-btn[hidden] { display: none; }
.edge-add-btn:hover,
.edge-add-btn:focus-visible { background: var(--accent); color: #fff; }
.quick-add-context { margin: 0.1rem 0.15rem 0.4rem; }
.quick-add-context[hidden] { display: none; }

/* R2-EDIT-05: test one step from its panel. */
.node-test {
  display: grid;
  gap: 0.45rem;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
}
.node-test[hidden] { display: none; }
.node-test-title { margin: 0; font-size: var(--fs-base); }
.node-test-field { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.node-test-field label { font-size: var(--fs-sm); color: var(--muted); }
.node-test textarea {
  width: 100%;
  min-height: 5.5rem;
  max-height: 16rem;
  resize: vertical;
  font: inherit;
  font-size: var(--fs-base);
}
.node-test-warning {
  display: flex;
  gap: 0.4rem;
  align-items: flex-start;
  margin: 0;
  color: var(--warn);
}
.node-test-warning[hidden] { display: none; }
.node-test-warning .icon { flex: none; margin-top: 0.2em; }
.node-test-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.node-test-actions .btn { display: inline-flex; align-items: center; gap: 0.35rem; }
.node-test-result {
  display: grid;
  gap: 0.45rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
  min-width: 0;
}
.node-test-result[hidden] { display: none; }
.node-test-result[data-state="error"] { border-color: color-mix(in srgb, var(--err) 45%, transparent); }
.node-test-status { display: flex; align-items: center; gap: 0.45rem; margin: 0; font-size: var(--fs-base); }
.node-test-status[data-tone="success"] .icon { color: var(--ok); }
.node-test-status[data-tone="error"] { color: var(--err); align-items: flex-start; }
.node-test-status[data-tone="error"] .icon { flex: none; margin-top: 0.2em; }
.node-test-output { min-width: 0; max-height: 22rem; overflow: auto; font-size: var(--fs-base); }
.node-test-output pre { white-space: pre-wrap; word-break: break-word; }

/* R2-EDIT-06: the step panel is the inspector. Its default width, the
   resize handle on its left edge, and step settings docked in it. */
.canvas-wrapper { --node-panel-w: min(400px, 90vw); }
.node-panel-resizer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -5px;
  z-index: 3;
  width: 10px;
  cursor: col-resize;
  touch-action: none;
}
.node-panel-resizer::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: #4a5568;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 120ms ease, background-color 120ms ease;
}
.node-panel:hover .node-panel-resizer::before { opacity: 1; }
.node-panel-resizer:hover::before,
.node-panel-resizer:focus-visible::before,
.canvas-wrapper.is-resizing-panel .node-panel-resizer::before { opacity: 1; background: var(--accent); }
.node-panel-resizer:focus-visible { outline: none; }
.canvas-wrapper.is-resizing-panel { cursor: col-resize; user-select: none; }
.canvas-wrapper.is-resizing-panel .run-drawer { transition: none; }
@media (max-width: 640px) { .node-panel-resizer { display: none; } }

.node-panel-config[hidden] { display: none; }
.node-panel-config .modal-card.is-docked {
  width: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  animation: none;
  display: block;
  overflow: visible;
}
.modal-card.is-docked > .modal-head { display: none; }
.modal-card.is-docked > .modal-body,
.modal-card.is-docked > form > .modal-body {
  padding: 0;
  max-height: none;
  overflow: visible;
}
.modal-card.is-docked .modal-foot {
  position: static;
  margin: 0.75rem 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  justify-content: flex-start;
}
.modal-card.is-docked .modal-foot[hidden],
.modal-card.is-docked .modal-foot [data-close],
.modal-card.is-docked .modal-foot .btn.primary,
.modal-card.is-docked .modal-foot-spacer { display: none; }
.node-panel-saved { margin: -0.25rem 0 0; }
.node-panel-saved[hidden] { display: none; }
.node-panel-saved[data-state="saved"] { color: var(--ok); }
.node-panel-help {
  flex: 1;
  overflow: auto;
  padding: 0.9rem 1rem 1.4rem;
  font-size: var(--fs-base);
  line-height: 1.5;
}
.node-panel-help-kind p { margin: 0 0 0.6rem; }
.node-panel-help h4 { margin: 1rem 0 0.4rem; font-size: var(--fs-base); color: var(--muted); }
.node-panel-tips { margin: 0 0 0.75rem; padding-left: 1.1rem; display: grid; gap: 0.35rem; color: var(--muted); }
.node-panel-tips strong { color: var(--text); }
.node-panel-help .link-btn { margin-left: 0; font-size: var(--fs-base); }
/* Docked in the narrow panel, the dialog's multi-column rows stack. */
.modal-card.is-docked .spec-row,
.modal-card.is-docked .spec-row.spec-row-single,
.modal-card.is-docked .map-row,
.modal-card.is-docked .map-row.map-row-fixed { grid-template-columns: minmax(0, 1fr); }
.modal-card.is-docked .cf-rule { grid-template-columns: minmax(0, 1fr) 6.5rem minmax(0, 1fr) auto; }

/* R2-UI-04: one card pattern (agents, Library). Header with icon, title
   and ⋯; a description only when there is one; meta lines; the whole card
   opens Edit (the title button stretches over it, controls stay on top). */
.catalog-card { position: relative; display: flex; flex-direction: column; gap: 0.4rem; }
.catalog-card:has(.card-open):hover { border-color: #3a4150; }
.catalog-card > h3, .catalog-card .card-title { margin: 0; }
.card-head { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.card-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-md);
  background: var(--panel-2);
  color: var(--muted);
  font-size: var(--fs-base);
}
/* Two lines at most; the full name is the tooltip when it's cut. */
.card-title {
  display: -webkit-box;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: var(--fs-md);
  line-height: 1.3;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.card-open {
  all: unset;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.card-open::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
/* A button lays its text out on its own, so the clamp goes on it too. */
.card-title .card-open { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.catalog-card:has(.card-open:focus-visible) { outline: 2px solid var(--link); outline-offset: 2px; }
.catalog-card .card-menu,
.catalog-card details,
.catalog-card form,
.catalog-card a,
.catalog-card [data-tooltip]:not(.card-title),
.catalog-card button:not(.card-open),
.catalog-card label { position: relative; z-index: 1; }
.card-head .card-menu { flex: none; margin-left: auto; }
/* An open menu can reach over the card below: lift its card above the rest,
   and the menu above the card's own controls (a long key name under it). */
.catalog-card:has(details[open]) { z-index: 5; }
.catalog-card details[open] { z-index: 6; }
.card-desc { margin: 0; color: var(--muted); font-size: var(--fs-base); line-height: 1.45; }
.card-meta { margin: 0; color: var(--muted); font-size: var(--fs-base); line-height: 1.45; }
.card-meta .tag { margin-right: 0.35rem; }

/* R2-UI-04: no boxes inside boxes. Schedule and trigger forms use section
   labels; the "New …" form and inline edits in Automation sit on the
   dialog itself. */
.schedule-form fieldset {
  border: 0;
  background: none;
  border-radius: 0;
  padding: 0;
  margin: 0 0 1.25rem;
}
.schedule-form fieldset legend { padding: 0; margin: 0 0 0.25rem; }
.builder-create-panel { border: 0; border-radius: 0; background: none; }
.builder-create-panel > summary { padding: 0.35rem 0; color: var(--link); font-weight: 600; }
.builder-create-panel[open] > summary { margin-bottom: 0.5rem; }
.builder-create-panel[open] { padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); margin-bottom: 0.75rem; }
.builder-inline-edit[open] { border: 0; padding: 0.5rem 0 0; }

/* R2-UI-05: polish that spans pages. */
/* Forms read best at about 640 px; side-by-side fields keep a 16 px gap
   (and stack on phones). */
.settings-panel form.stacked,
main.wrap > form.stacked { max-width: 640px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 640px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }
/* Dense UI at 14 px: menus and list rows. */
.action-menu-list [role="menuitem"] { font-size: var(--fs-base); }
.rows li, .run-rows li { font-size: var(--fs-base); }
/* Popovers and menus: a soft shadow, and a 150 ms fade in (dialogs too). */
.action-menu-list { box-shadow: var(--shadow-pop); }
@media (prefers-reduced-motion: no-preference) {
  details.action-menu[open] > .action-menu-list { animation: fade-in 150ms ease-out; }
  .modal:not([hidden]) > .modal-card:not(.is-docked) { animation: fade-in 150ms ease-out; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
/* One toast corner on phones too: the bottom, full width. */
@media (max-width: 640px) {
  .flash, .builder-toasts { left: 1rem; right: 1rem; width: auto; }
}
.chip .icon { ; }
/* Loading placeholders (run page). */
.skeleton-row,
.skeleton-node {
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.04) 100%);
  background-size: 200% 100%;
  border-radius: var(--radius-md);
}
@media (prefers-reduced-motion: no-preference) {
  .skeleton-row, .skeleton-node { animation: skeleton-shimmer 1.2s ease-in-out infinite; }
}
@keyframes skeleton-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.run-step-list .skeleton-row { list-style: none; height: 44px; margin: 0 0 0.5rem; }
.run-canvas-loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  pointer-events: none;
}
.run-canvas-loading[hidden] { display: none; }
.skeleton-node { width: 150px; height: 64px; }
@media (max-width: 640px) { .skeleton-node:nth-child(n+3) { display: none; } }

/* R2-UI-06: the New pipeline dialog. Three cards to choose how to start,
   examples as whole clickable cards (no radio dot), and one height for
   the area below so the dialog doesn't jump. */
.create-mode-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.pipeline-create-modes .create-mode-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.2rem;
  margin: 0;
  padding: 0.75rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.pipeline-create-modes .create-mode-card:hover { border-color: #3a4150; }
.create-mode-card input,
.starter-gallery .starter-card input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}
.pipeline-create-modes .create-mode-card:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--panel-2));
  box-shadow: inset 0 0 0 1px var(--accent);
}
.create-mode-card:has(input:focus-visible),
.starter-card:has(input:focus-visible) { outline: 2px solid var(--link); outline-offset: 2px; }
.create-mode-icon { color: var(--accent); font-size: var(--fs-md); line-height: 1; margin-bottom: 0.2rem; }
.create-mode-title { font-weight: 600; font-size: var(--fs-base); }
.create-mode-line { color: var(--muted); font-size: var(--fs-sm); line-height: 1.35; }
/* Visual polish 12: the dialog sizes to the chosen way to start (no empty
   area under Describe); the examples scroll inside a capped list. */
.pipeline-create-panels { min-height: 0; }
.pipeline-create-panels .starter-gallery { max-height: min(22rem, 50vh); overflow-y: auto; padding-right: 2px; }
@media (max-width: 560px) {
  .create-mode-cards { grid-template-columns: 1fr; }
  .pipeline-create-modes .create-mode-card { grid-template-columns: auto 1fr; column-gap: 0.6rem; }
  .create-mode-icon { grid-row: span 2; align-self: center; margin: 0; }
}
.starter-gallery label.starter-card { padding: 0.7rem 0.8rem; }
.starter-setup {
  justify-self: start;
  margin-top: 0.15rem;
  padding: 0.05rem 0.45rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--warn) 14%, transparent);
  color: var(--warn);
  font-size: var(--fs-xs);
  font-weight: 600;
}

/* R2-UX-02: a split button (the main action, and a ▾ menu of the other
   ways to do it), and the Pipelines section tabs. */
.split-btn { display: inline-flex; align-items: stretch; }
.split-btn > .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.split-btn .split-btn-menu > summary.split-btn-toggle {
  height: 100%;
  padding-inline: 0.55rem;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 1px solid rgba(0, 0, 0, 0.25);
  list-style: none;
}
.split-btn .split-btn-toggle::-webkit-details-marker { display: none; }
.section-tabs { margin-top: -0.25rem; }

/* R2-UX-03: the budget tile, the chart heading, and a pipeline name that
   ellipsizes instead of making the table scroll sideways. */
.cost-budget-tile .cost-budget-bar { margin-top: 0.2rem; }
.cost-budget-tile .cost-budget-of { font-size: var(--fs-base); font-weight: 500; }
.cost-budget-open { margin: auto 0 0; align-self: flex-start; font-size: var(--fs-base); }
.cost-card-note { margin-top: auto; }
.cost-chart-title { margin: 0 0 0.6rem; font-size: var(--fs-md); }
.cost-pipeline-name {
  display: block;
  max-width: 34ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Tablets: "Inspect" makes way (the name links to the same page). */
@media (min-width: 641px) and (max-width: 900px) {
  .cost-pipeline-name { max-width: 22ch; }
  table.data.costs-table th:last-child,
  table.data.costs-table td.actions-cell { display: none; }
}
@media (max-width: 640px) {
  .cost-pipeline-name { max-width: none; white-space: normal; }
}

/* R2-UX-04: the run page's assistant answer, under the header. */
.run-explain {
  margin: 0.5rem 1rem 0.75rem;
  padding: 0.8rem 1rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel);
}
.run-explain[hidden] { display: none; }
.run-explain[data-state="error"] { border-color: color-mix(in srgb, var(--err) 40%, transparent); }
.run-explain-head { display: flex; align-items: center; gap: 0.75rem; }
.run-explain-head strong { display: inline-flex; align-items: center; gap: 0.45rem; }
.run-explain-head .icon { color: var(--accent); }
.run-explain-status { margin-left: auto; font-variant-numeric: tabular-nums; }
.run-explain-head .modal-close { margin-left: 0.25rem; }
.run-explain-body { margin-top: 0.6rem; max-height: 22rem; overflow: auto; font-size: var(--fs-base); line-height: 1.55; }
.run-explain-body .md > :first-child { margin-top: 0; }
.run-explain-body .md > :last-child { margin-bottom: 0; }
.run-explain-error { margin: 0; color: var(--err); }
.run-explain-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.75rem; }
.run-explain-foot[hidden] { display: none; }
.run-explain-foot .link-btn { margin-left: auto; font-size: var(--fs-base); }
.run-explain-placeholder { display: grid; gap: 0.45rem; }
.run-explain-placeholder span {
  height: 0.8rem;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.04) 100%);
  background-size: 200% 100%;
}
.run-explain-placeholder span:nth-child(2) { width: 85%; }
.run-explain-placeholder span:nth-child(3) { width: 60%; }
@media (prefers-reduced-motion: no-preference) {
  .run-explain-placeholder span { animation: skeleton-shimmer 1.2s ease-in-out infinite; }
}

/* R2-UX-05: what the run was about, at a glance. */
.run-input-chip {
  max-width: min(28rem, 100%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  color: var(--text);
}
.run-input-chip .muted { color: var(--muted); }
.topbar-actions .split-btn .inline-form { display: flex; }
.topbar-actions .split-btn .inline-form .btn { height: 100%; }
.split-btn > .inline-form > .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.split-btn:not(:has(.split-btn-menu)) > .inline-form > .btn { border-radius: var(--radius-sm); }

/* R2-UX-01: File search / Vector search pick folders first. */
.folder-pick-list { margin-bottom: 0.6rem; }
.folder-pick-list .fpick-name { display: inline-flex; align-items: center; gap: 0.4rem; }
.folder-pick-list .fpick-name .icon { color: var(--muted); }
.file-pick-list label.is-disabled { opacity: 0.55; cursor: not-allowed; }
.single-file-pick { margin-top: 0.4rem; }
.single-file-pick[open] > summary { margin-bottom: 0.4rem; }
.vsm-search-in { margin-top: 1rem; }

/* R2-UX-01: what happens to a key's files when it is deleted. */
.key-delete-files { margin: 0.75rem 0; padding: 0.75rem 0.85rem; border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--warn) 7%, transparent); }
.key-delete-files p { margin: 0 0 0.5rem; }
.key-delete-files p:last-child { margin-bottom: 0; }

/* R2-UX-01: the search index's size and daily cost, under the Files intro,
   and as a tile on Costs. */
.search-storage { margin-top: 0.5rem; font-size: var(--fs-base); }
.files-page-head .search-storage-row { margin: 0.15rem 0; color: var(--muted); }
.search-storage-row strong { color: var(--text); font-weight: 600; }
.search-storage-help { margin-top: 0.3rem; }
.files-page-head .search-storage-help p { max-width: 64ch; margin: 0.35rem 0 0; color: var(--muted); font-size: var(--fs-sm); }

/* ---------- Chat (review Phase 3) ---------- */
.chat-main { width: 100%; max-width: none; margin: 0; padding: 0; }
.chat-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); height: calc(100dvh - 61px - var(--no-key-bar-h, 0px)); }

/* Visual polish 2.4: the sidebar. New chat (md, primary), one-line rows
   with the full title as a tooltip and their own ⋯ on hover; chatbot chats
   start with a workflow icon. */
/* Never sideways: rows are as wide as the sidebar, and long titles end
   in an ellipsis before the row's ⋯. */
.chat-sidebar { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; min-height: 0; padding: var(--space-3); overflow-x: hidden; overflow-y: auto; border-right: 1px solid var(--border); background: var(--panel); }
.chat-sidebar-head { display: grid; gap: var(--space-2); }
.chat-new { width: 100%; }
.chat-search { width: 100%; }
.chat-list ul, .chat-search-results ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; list-style: none; margin: 0; padding: 0; }
.chat-list-row { position: relative; display: flex; align-items: center; min-width: 0; border-radius: var(--radius-sm); }
/* --row-bg is opaque (the sidebar is --panel), so ⋯ can fade what's under it. */
.chat-list-row:hover, .chat-list-row:focus-within { --row-bg: var(--panel-2); background: var(--row-bg); }
.chat-list-row.is-current { --row-bg: color-mix(in srgb, var(--accent) 16%, var(--panel)); background: var(--row-bg); }
.chat-list-item { display: flex; flex: 1; align-items: center; gap: 6px; min-width: 0; min-height: 32px; padding: 0 var(--space-2); border-radius: var(--radius-sm); color: var(--text); font-size: var(--fs-base); text-decoration: none; }
.chat-list-item:hover { text-decoration: none; }
.chat-list-kind.icon { width: 16px; height: 16px; color: var(--muted); }
.chat-list-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-list-by { flex: 0 1 auto; max-width: 45%; margin-left: auto; overflow: hidden; font-size: var(--fs-xs); text-overflow: ellipsis; white-space: nowrap; }
/* Titles use the row's full width. ⋯ floats over its end and shows on
   hover or focus, fading the end of a long title under it. */
.chat-list-row .chat-row-menu {
  position: absolute;
  top: 2px;
  right: 2px;
  padding-left: 20px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: linear-gradient(to right, transparent, var(--row-bg, var(--panel-2)) 18px);
  opacity: 0;
}
.chat-list-row:is(:hover, :focus-within) .chat-row-menu, .chat-row-menu[open] { opacity: 1; }
@media (hover: none) { .chat-row-menu { opacity: 1; } }
.chat-list-row .chat-title-input { flex: 1; min-width: 0; min-height: 32px; font-size: var(--fs-base); font-weight: var(--fw-text); }
.chat-list-row:has(> .chat-title-input) .chat-row-menu { display: none; }
.chat-list-empty { padding: 0 var(--space-2); }

.chat-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chat-pane > .team-no-key { margin: var(--space-3) var(--space-4) 0; }
.chat-shared-note { margin: var(--space-1) var(--space-4) 0; }

/* Visual polish 2.2: the header. Title 16 px; on the right, one row of
   36 px controls in 14 px text: the picker, "Turn this into an
   automation" (its icon only on narrow screens) and ⋯. */
.chat-head { display: flex; align-items: center; gap: var(--space-2) var(--space-3); min-height: 60px; padding: var(--space-3) var(--space-6); border-bottom: 1px solid var(--border); }
.chat-head-main { display: grid; flex: 1 1 auto; gap: 2px; min-width: 0; }
.chat-title { margin: 0; overflow: hidden; font-size: var(--fs-md); font-weight: var(--fw-title); line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.chat-title[tabindex] { cursor: text; }
.chat-head .chat-title-input { width: 100%; min-width: 0; font-size: var(--fs-md); font-weight: var(--fw-title); }
.chat-who { margin: 0; overflow: hidden; font-size: var(--fs-sm); text-overflow: ellipsis; white-space: nowrap; }
.chat-visibility-chip { flex: none; }
.chat-head-right { display: flex; flex: 0 1 auto; align-items: center; gap: var(--space-1); min-width: 0; }
.chat-picker { display: flex; min-width: 0; }
.chat-head-actions { display: flex; flex: none; align-items: center; gap: var(--space-1); }
.chat-sidebar-toggle { display: none; }

/* The picker popover (picker.js): small group headings, one row per
   choice with its icon, name and a one-line description, a check on the
   selected row, a search field when there are many. */
.picker { display: inline-flex; min-width: 0; }
.picker-trigger { gap: var(--space-2); min-width: 0; max-width: 280px; }
.picker-trigger .icon { width: 16px; height: 16px; }
.picker-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-trigger .picker-chevron { color: var(--muted); }
.picker-chip .picker-trigger { padding: 0 10px; border-color: var(--border); border-radius: var(--radius-pill); background: var(--panel-2); }
.picker-chip .picker-trigger:hover { background: #262a33; }
.picker-pop { position: fixed; z-index: 70; display: flex; flex-direction: column; width: max-content; min-width: 280px; max-width: min(380px, calc(100vw - 16px)); max-height: 420px; padding: 6px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--panel); box-shadow: var(--shadow-pop); }
.picker-pop[hidden] { display: none; }
.picker-search { display: flex; flex: none; align-items: center; gap: var(--space-2); margin: 0 0 6px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel-2); color: var(--muted); }
.picker-search .icon { width: 16px; height: 16px; }
.picker-search input { flex: 1; min-width: 0; min-height: 34px; padding: 0; border: 0; background: transparent; }
.picker-search input:focus-visible { outline: none; }
.picker-search:focus-within { outline: var(--focus-ring); outline-offset: 0; }
.picker-list { margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.picker-heading { padding: var(--space-2) 10px var(--space-1); color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-ui); letter-spacing: 0.06em; text-transform: uppercase; }
.picker-option { display: grid; grid-template-columns: 16px minmax(0, 1fr) 16px; align-items: center; gap: 10px; padding: var(--space-2) 10px; border-radius: var(--radius-sm); cursor: pointer; }
.picker-option:hover, .picker-option:focus { background: rgba(255, 255, 255, 0.06); outline: none; }
.picker-option:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }
.picker-option-icon.icon { width: 16px; height: 16px; color: var(--muted); }
.picker-option-text { display: grid; min-width: 0; }
.picker-option-name { overflow: hidden; font-size: var(--fs-base); font-weight: var(--fw-ui); text-overflow: ellipsis; white-space: nowrap; }
.picker-option-desc { overflow: hidden; color: var(--muted); font-size: var(--fs-sm); text-overflow: ellipsis; white-space: nowrap; }
.picker-check.icon { width: 16px; height: 16px; color: var(--accent); visibility: hidden; }
.picker-option.is-selected .picker-check { visibility: visible; }
.picker-option[hidden], .picker-heading[hidden] { display: none; }
/* data-picker="field" (the Use view's options): a full-width control that
   looks like the select it stands for, and a list as wide as it, without
   icons. */
.picker-field { display: flex; width: 100%; }
.picker-field .picker-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: none; min-height: var(--h-md); padding: 0.45rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel-2); color: var(--text); font: inherit; font-size: var(--fs-base); text-align: left; cursor: pointer; }
.picker-field .picker-trigger:hover { border-color: #59657b; }
.picker-field .picker-trigger[aria-expanded="true"], .picker-field .picker-trigger:focus-visible { border-color: #59657b; outline: 2px solid rgba(124, 199, 255, 0.16); outline-offset: 0; }
.picker-pop.is-field { min-width: 0; max-width: none; }
.picker-pop.is-field .picker-option { grid-template-columns: minmax(0, 1fr) 16px; }
.picker-empty { margin: var(--space-2) 10px; font-size: var(--fs-sm); }

/* Visual polish 2.3: messages. Answers and questions read at 16 px. */
.chat-thread { display: flex; flex: 1; flex-direction: column; gap: var(--space-6); min-height: 0; padding: var(--space-6) var(--space-6) var(--space-4); overflow-y: auto; }
.chat-thread > * { width: 100%; max-width: 760px; margin-inline: auto; }
.chat-empty { margin-block: auto; color: var(--muted); text-align: center; }
.chat-empty h2 { margin: 0 0 var(--space-2); color: var(--text); font-size: var(--fs-lg); }
.chat-empty p { margin: 0 auto; max-width: 52ch; }
.chat-bubble { width: fit-content; max-width: 85%; margin-left: auto; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--panel-2); font-size: var(--fs-md); line-height: 1.5; overflow-wrap: anywhere; }
.chat-answer { font-size: var(--fs-md); line-height: 1.6; overflow-wrap: anywhere; }
.chat-answer > :first-child { margin-top: 0; }
.chat-answer > :last-child { margin-bottom: 0; }
.chat-answer pre { overflow-x: auto; }
.chat-answer table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 0 0 var(--space-3); font-size: var(--fs-base); }
/* Phase 2 #11: tables read as tables (Chat renders markdown without .md). */
.chat-answer th, .chat-answer td { padding: 0.4rem 0.65rem; border: 1px solid var(--border); text-align: left; vertical-align: top; }
.chat-answer th { background: rgba(255, 255, 255, 0.05); font-weight: var(--fw-title); }
.chat-answer tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.025); }
.chat-answer .md-table-wrap { overflow-x: auto; }
/* The files sent with a question, under its bubble. */
.chat-sent-files { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-1); margin-top: var(--space-1); }
.chat-sent-file { cursor: default; }
/* "Writing…", "Searching the web…", "Running… step 2 of 3". */
.chat-typing { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.chat-answer + .chat-typing { margin-top: var(--space-2); }
.chat-spinner { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: chat-pulse 1.1s ease-in-out infinite; }
@keyframes chat-pulse { 0%, 100% { opacity: 0.35; transform: scale(0.75); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .chat-spinner { animation: none; opacity: 0.85; } }
/* "Stopped." and errors are small inline badges; Stopped sits in the row
   under the answer, with Copy, Regenerate and the run. */
.chat-actions .chat-stopped { margin-left: 6px; }
.chat-error { display: inline-flex; align-items: flex-start; gap: 6px; margin: var(--space-2) 0 0; padding: 4px 10px; border: 1px solid color-mix(in srgb, var(--err) 35%, transparent); border-radius: var(--radius-md); background: color-mix(in srgb, var(--err) 10%, transparent); color: color-mix(in srgb, var(--err) 65%, var(--text)); font-size: var(--fs-sm); line-height: 1.45; }
.chat-error .icon { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--err); }
.chat-note { margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--fs-sm); }
/* Sources: three chips (the site's name), "+2" for the rest. */
.chat-sources { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-3); }
.source-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; height: var(--h-sm); padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--panel-2); color: var(--muted); font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-ui); text-decoration: none; white-space: nowrap; cursor: pointer; }
.source-chip span { overflow: hidden; text-overflow: ellipsis; }
.source-chip .icon { width: 14px; height: 14px; }
a.source-chip:hover, .source-chip.is-more:hover { border-color: color-mix(in srgb, var(--link) 45%, var(--border)); color: var(--text); text-decoration: none; }
/* Under each answer: Copy, Regenerate, the run (chatbots) and the cost. */
.chat-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-top: var(--space-2); margin-left: -6px; }
.chat-answer-run.badge { margin-left: 6px; }
.chat-cost { margin-left: var(--space-2); font-size: var(--fs-xs); }

/* Visual polish 2.1: the composer (Chat, a chatbot's Use view and Home).
   One rounded box: the text, then a toolbar row (tools and chips on the
   left, the round send/stop button on the right). */
.chat-composer { padding: var(--space-2) var(--space-6) var(--space-4); }
.chat-composer > * { max-width: 760px; margin-inline: auto; }
.chat-no-key[hidden] { display: none; }
.chat-no-key .no-key-callout, .chat-no-key .team-no-key { margin: 0 0 var(--space-2); }
.chat-error a { color: var(--link); }
/* The attach dialog: a drop zone like Files', the status above the options. */
.chat-attach-drop { display: block; margin-bottom: var(--space-3); padding: 1.25rem 1rem; }
.chat-attach-drop .dropzone-title, .chat-attach-drop .small { display: block; }
.chat-attach-drop.has-file { border-style: solid; border-color: var(--accent); }
.chat-attach-drop:not(.is-disabled):focus-within { border-color: var(--accent); outline: var(--focus-ring); outline-offset: 2px; }
.chat-automate.is-disabled { opacity: 0.5; cursor: not-allowed; }
.chat-attach-status { margin: 0 0 var(--space-3); }
.chat-attach-body .no-key-callout, .chat-attach-body .team-no-key { margin: 0 0 var(--space-3); }
.chat-status { margin: 0 auto var(--space-2); font-size: var(--fs-sm); }
.chat-status[data-tone="error"] { color: var(--err); }
.composer { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--panel); transition: border-color 120ms ease; }
.composer:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.composer textarea.composer-input { display: block; width: 100%; min-height: calc(1.5em + 12px); max-height: calc(8 * 1.5em + 12px); padding: 6px var(--space-2); border: 0; border-radius: 0; background: transparent; color: var(--text); font-size: var(--fs-md); line-height: 1.5; box-shadow: none; outline: none; }
.composer textarea.composer-input[rows="2"] { min-height: calc(2 * 1.5em + 12px); }
.composer-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-2); }
.composer-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); min-width: 0; }
.composer-actions { display: flex; flex: none; align-items: center; gap: var(--space-2); }
.composer-tool.is-on, .composer-tool.is-on:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.composer-tool.is-on .icon { color: var(--accent); }
.composer-chips { display: contents; }
.composer-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 240px; height: var(--h-sm); padding: 0 var(--space-1) 0 10px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--panel-2); color: var(--text); font-size: var(--fs-sm); }
.composer-chip > .icon { width: 16px; height: 16px; color: var(--muted); }
.composer-chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer-chip-note { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }
.composer-chip.is-locked { padding-right: 10px; border-style: dashed; }
.composer-chip-x { display: inline-grid; flex: none; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.composer-chip-x:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); }
.composer-chip-x .icon { width: 14px; height: 14px; }
.composer-send { display: flex; flex: none; align-items: center; }
.composer-round { display: inline-grid; place-items: center; width: var(--h-md); height: var(--h-md); padding: 0; border: 0; border-radius: 50%; background: var(--accent); color: #1a0f0a; cursor: pointer; }
.composer-round:hover { background: #ff8b5d; }
.composer-round:disabled { background: var(--panel-2); color: var(--muted); cursor: default; }
.composer-round.is-stop { background: var(--text); color: var(--bg); }
.composer-round .icon { width: 18px; height: 18px; }
.composer-round.is-stop .icon { width: 16px; height: 16px; }
.composer-round[hidden] { display: none; }

/* The attach dialog: one part at a time (paperclip menu). */
.chat-attach-body section[hidden] { display: none; }
.chat-attach-body select, .chat-attach-body input[type=file] { width: 100%; }
.chat-attach-body .checkbox-row { display: flex; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-3); }
.chat-attach-body .checkbox-row input { margin-top: 0.2rem; }
.attach-folder-list { display: grid; gap: var(--space-1); max-height: 280px; margin: 0; padding: 0; overflow-y: auto; border: 0; }
.attach-folder { display: flex; align-items: center; gap: 10px; min-height: var(--h-md); padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; }
.attach-folder:has(input:checked) { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.attach-folder .icon { width: 16px; height: 16px; color: var(--muted); }
.attach-folder-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-folder-count { flex: none; color: var(--muted); font-size: var(--fs-sm); }
.attach-folder.is-empty .attach-folder-count { color: var(--warn); }
.attach-folder-note { margin: var(--space-2) 0 0; color: var(--warn); }

@media (max-width: 900px) {
  .chat-automate { width: var(--h-md); padding: 0; }
  .chat-automate-label { display: none; }
}
@media (max-width: 760px) {
  .chat-layout { grid-template-columns: minmax(0, 1fr); }
  .chat-sidebar { position: fixed; top: 61px; bottom: 0; left: 0; z-index: 30; width: min(85vw, 300px); transform: translateX(-105%); transition: transform 0.18s ease; box-shadow: var(--shadow-pop); }
  .chat-layout.is-sidebar-open .chat-sidebar { transform: none; }
  .chat-sidebar-toggle { display: inline-flex; }
  .chat-head { gap: var(--space-2); padding-inline: var(--space-3); }
  .chat-thread, .chat-composer { padding-inline: var(--space-3); }
}
@media (max-width: 640px) {
  /* Phones: the picker shows its icon (the name is in its tooltip). */
  .chat-picker .picker-name { display: none; }
}

/* Review 3.5: the budget dialog says what happens at 100%. */
.cost-budget-pause { margin: 0.25rem 0 0; font-size: var(--fs-base); }

/* Review 3.4: Chat from an agent card and the agent editor; the admin note on Home. */
.card-head .agent-chat-btn { flex: none; }
.agent-show-in-chat { margin: 0.25rem 0 0; }
.agent-show-in-chat .modal-check-copy { display: block; }
.home-admin-note { margin: 0.5rem 0.2rem 0; padding: 0.4rem 0.6rem; border: 1px dashed var(--border); border-radius: var(--radius-md); color: var(--muted); }

/* ---------- Teams (review Phase 4) ---------- */
/* The space switcher, left of the main links. */
.space-switcher { margin-left: 0.4rem; }
.space-switcher-btn {
  display: inline-flex; align-items: center; gap: 0.35rem; max-width: 14rem;
  padding: 0.3rem 0.6rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--panel-2); color: var(--text); font-size: var(--fs-base); font-weight: 500;
}
.space-switcher-btn:hover, .space-switcher[open] > .space-switcher-btn { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.space-switcher-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.space-switcher-caret.icon { width: 16px; height: 16px; color: var(--muted); }
.space-switcher-list { left: 0; right: auto; min-width: 240px; max-width: min(320px, calc(100vw - 24px)); }
.space-switcher-form { display: flex; flex-direction: column; }
.space-switcher-item[aria-current="true"] { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.space-switcher-item-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.space-switcher-item-role { flex: none; margin-left: auto; padding-left: 0.75rem; color: var(--muted); font-size: var(--fs-xs); }
.space-switcher-actions { margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
@media (max-width: 480px) {
  .topnav .brand-text { display: none; }
  .space-switcher { margin-left: 0.1rem; }
  .space-switcher-btn { max-width: 9.5rem; }
}
/* Create team and Team settings. */
/* Review fix 23: like the other single forms, in the middle of the page. */
.team-create { max-width: 560px; margin-inline: auto; }
.team-member-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.team-member-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap;
  padding: 0.55rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--panel);
}
.team-member-who { min-width: 0; overflow-wrap: anywhere; }
.team-members-title { margin: 1.5rem 0 0.6rem; font-size: var(--fs-md); }
.team-role-chip[data-role="owner"] { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); }

/* Team settings: invites and members (review Phase 4b). */
.team-invite-panel { display: grid; gap: 0.75rem; padding: 0.9rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--panel); }
.team-invite-form { display: grid; gap: 0.35rem; }
.team-invite-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.team-invite-row input[type="text"] { flex: 1 1 16rem; min-width: 0; }
.team-default-role { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding-top: 0.6rem; border-top: 1px solid var(--border); }
.team-default-role-form { display: inline-flex; gap: 0.4rem; align-items: center; }
.team-member-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.team-member-actions form { margin: 0; }
.team-roles-help { margin-top: 1rem; font-size: var(--fs-base); }
.team-roles-help ul { margin: 0.5rem 0 0; padding-left: 1.2rem; display: grid; gap: 0.3rem; }
.team-delete { margin-top: 1.5rem; }
.team-invite-page { max-width: 560px; margin-inline: auto; }

/* Team settings: Keys & secrets (review Phase 4c). */
.team-secrets-head { margin-top: 1.75rem; }
.team-secrets-head h3 { margin: 0; }
.team-added-by { display: block; margin-top: 0.15rem; font-weight: 400; }

/* A team without an AI key (review Phase 4c): one notice everywhere. */
.team-no-key { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin: 0 0 1rem; padding: 0.7rem 0.9rem; border: 1px solid var(--warn-border, var(--border)); border-left: 3px solid var(--warn, #e0a030); border-radius: var(--radius-md); background: var(--panel); }
.team-no-key-text { flex: 1 1 16rem; min-width: 0; }

/* No AI provider key yet (credentials/keycheck.py): a slim bar under the
   top nav on Home, Chat, Agents, Files and Library. */
.no-key-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-2) var(--space-4); border-bottom: 1px solid rgba(255, 200, 87, 0.35); background: rgba(255, 200, 87, 0.08); color: var(--text); font-size: var(--fs-base); }
.no-key-bar-icon { display: inline-flex; color: var(--warn); }
.no-key-bar-text { flex: 1 1 18rem; min-width: 0; }
.no-key-bar-dismiss { display: inline-flex; margin: 0; }
.no-key-bar-close { display: inline-flex; align-items: center; justify-content: center; width: var(--h-sm); height: var(--h-sm); padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); cursor: pointer; }
.no-key-bar-close:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
/* The same warning inside a dialog, a panel or an empty state. */
.no-key-callout { margin: 0 0 var(--space-3); }
.no-key-callout .btn { margin-top: 0; }
.no-key-callout p:last-child { margin-bottom: 0; }

/* Copy to team (review Phase 4c): pick the files again, matched by name. */
.files-head-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.ctt-card { max-width: 640px; }
.ctt-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.6rem; margin: 0.75rem 0; }
.ctt-field { display: grid; gap: 0.25rem; min-width: 0; }
.ctt-field select { width: 100%; }
.ctt-list-title { margin: 0.75rem 0 0.4rem; font-size: var(--fs-base); }
.ctt-list { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; gap: 0.35rem; max-height: 16rem; overflow-y: auto; }
.ctt-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.2rem 0.75rem; align-items: center; padding: 0.45rem 0.6rem; border: 1px solid var(--border); border-radius: var(--radius-md); }
.ctt-row-main { display: grid; min-width: 0; }
.ctt-name, .ctt-where { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctt-status { color: var(--muted); text-align: right; }
.ctt-row[data-state="ready"] .ctt-status { color: var(--text); }
.ctt-row[data-state="done"] .ctt-status { color: var(--success, #3fb950); }
.ctt-row[data-state="error"] .ctt-status { color: var(--danger, #f85149); }
.ctt-progress { grid-column: 1 / -1; width: 100%; height: 0.35rem; }
.ctt-drop.is-dragover { border-color: var(--accent); }
@media (max-width: 520px) { .ctt-row { grid-template-columns: minmax(0, 1fr); } .ctt-status { text-align: left; } }

/* Team chats (review Phase 4c): private or "Team can read". */

.team-key-impact-title { margin: 0.9rem 0 0.35rem; font-size: var(--fs-base); }
.team-key-impact { margin: 0 0 0.75rem; padding-left: 1.2rem; display: grid; gap: 0.3rem; }

/* Move / Copy to team (review Phase 4d). */
.transfer-card { max-width: 620px; }
.transfer-plan { display: grid; gap: 0.75rem; margin-top: 0.75rem; }
.transfer-section h4 { margin: 0 0 0.3rem; font-size: var(--fs-base); }
.transfer-section ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.25rem; }
.transfer-section.is-warn h4 { color: var(--warn); }

/* Team activity log (review Phase 4e). */
.team-activity { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.team-activity-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--border); }
.team-activity-what { min-width: 0; overflow-wrap: anywhere; }
.team-activity-when { white-space: nowrap; }
.team-activity-pages { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.75rem; }

/* Builder: who changed it last, and who else is editing (review Phase 4e). */
.builder-updated-by { display: inline-flex; align-items: center; gap: 0.3rem; flex: 0 1 auto; min-width: 0;
  white-space: nowrap; max-width: 18rem; }
.builder-updated-text { overflow: hidden; text-overflow: ellipsis; }
.builder-presence { white-space: nowrap; border-color: var(--accent); }
/* Review fix 22: the name keeps its room; below 1400 px "Updated by" is a
   clock with the same words in a tooltip. */
@media (min-width: 901px) {
  .workbench-topbar .topbar-left h1 { flex: 0 0 auto; max-width: min(22rem, 30vw); min-width: 6rem; }
  .workbench-topbar .builder-updated-by { flex: 0 1 auto; min-width: 1.1rem; }
}
@media (max-width: 1400px) { .builder-updated-text { display: none; } }
@media (max-width: 640px) { .builder-updated-by { display: none; } }

/* Team budget (review Phase 4e). */
.team-budget { margin-top: 1.25rem; }
.team-budget .cost-budget-bar { margin: 0.25rem 0 0.75rem; }
.team-budget-action { border: 0; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.team-budget-action legend { margin-bottom: 0.25rem; }
.team-budget-action .checkbox-row { display: flex; align-items: center; gap: 0.5rem; }
.team-budget-paused { color: var(--danger, #f85149); }
.cost-members { margin-top: 1.25rem; }
/* A schedule's last run (status and time) may wrap in narrow tables. */
.table-scroll > table.data td.schedule-last-run-cell { white-space: normal; min-width: 6.5rem; }
.team-copy-out { margin-top: 1.25rem; }
.team-copy-out .checkbox-row { display: flex; align-items: flex-start; gap: 0.5rem; }
/* Copy to team: a row's own file picker, and rows that ask. */
.ctt-row-side { display: inline-flex; align-items: center; gap: 0.6rem; justify-content: flex-end; flex-wrap: wrap; }
.ctt-row[data-state="ask"] .ctt-status { color: var(--warn); }
.ctt-row[data-state="done"] .ctt-choose { display: none; }
@media (max-width: 520px) { .ctt-row-side { justify-content: flex-start; } }
.key-searching { display: block; color: var(--warn); font-size: var(--fs-base); }

/* Draft and publish (review Phase 5). */
.publish-chip { white-space: nowrap; cursor: pointer; }
.publish-btn .pill { margin-left: 0.25rem; }
.builder-publish-bar,
.builder-publish-intro {
  display: flex;
  align-items: center;
  gap: 0.5rem 0.75rem;
  flex-wrap: wrap;
  padding: 0.55rem 1rem;
  border-bottom: 1px solid var(--border);
  background: rgba(99, 140, 255, 0.08);
  color: var(--text);
  font-size: var(--fs-base);
}
.builder-publish-bar[hidden], .builder-publish-intro[hidden] { display: none; }
.builder-publish-bar > span:first-child, .builder-publish-intro > span:first-child { flex: 1 1 18rem; min-width: 0; }
.builder-publish-bar.is-error { border-bottom-color: rgba(240, 180, 41, 0.5); background: rgba(240, 180, 41, 0.12); }
.builder-publish-bar.is-error strong { color: #f0b429; }
.publish-bar-actions { display: flex; gap: 0.45rem; margin-left: auto; }
.version-actions { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; }
.builder-publish-setting .checkbox-row { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.team-publish-role { margin-top: 1.25rem; }
.team-publish-role .radio-stack { border: 0; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
@media (max-width: 1100px) { .publish-chip { display: none; } }

/* The Use view (review Phase 5). */
.use-head { align-items: flex-start; }
.use-title { min-width: 0; }
.use-title h1 { margin: 0.15rem 0 0.25rem; overflow-wrap: anywhere; }
.use-description { margin: 0 0 0.35rem; color: var(--text); max-width: 60rem; overflow-wrap: anywhere; }
.use-meta { margin: 0; }
.use-meta .badge { margin: 0 4px 0 0; }
.use-view .builder-publish-bar { border: 1px solid var(--border); border-radius: var(--radius-md); margin: 0 0 1rem; }
.use-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); gap: 1rem; align-items: start; }
.use-main, .use-side { display: grid; gap: 1rem; min-width: 0; }
.use-section-title { font-size: var(--fs-md); margin: 0 0 var(--space-3); }
.use-form { display: grid; gap: var(--space-3); }
.use-form > .use-section-title { margin: 0; }
.use-form [data-use-no-inputs] { margin: 0; }
.use-field { display: grid; gap: 0.3rem; }
.use-field textarea, .use-field select { width: 100%; max-width: 100%; }
.use-form-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.use-result-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.use-result .rich-output { max-width: 100%; overflow-x: auto; }
.use-run-failed { margin: 0; }
.use-run-list, .use-schedule-list, .use-steps { list-style: none; margin: 0; padding: 0; }
/* Run, status and time line up from row to row. */
.use-run-row { display: grid; grid-template-columns: 4.5rem 6.5rem minmax(0, 1fr); align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--border); }
.use-run-row .run-state { justify-self: start; margin: 0; }
.use-run-row:last-child { border-bottom: 0; }
.use-schedule-row { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.4rem 0; }
.use-schedule-row > span { display: grid; min-width: 0; overflow-wrap: anywhere; }
/* How it works / Need help?: card disclosures with the shared chevron. */
.disclosure.is-card > summary { display: flex; min-height: 0; color: var(--text); font-size: var(--fs-md); font-weight: var(--fw-title); }
.disclosure.is-card[open] > summary { margin-bottom: var(--space-3); }
.use-steps { counter-reset: use-step; margin-top: 0.6rem; display: grid; gap: 0.35rem; }
.use-step { position: relative; padding: 0.45rem 0.6rem 0.45rem 2.1rem; border: 1px solid var(--border); border-radius: var(--radius-md); overflow-wrap: anywhere; }
.use-step::before { counter-increment: use-step; content: counter(use-step); position: absolute; left: 0.6rem; top: 0.45rem; color: var(--muted); font-size: var(--fs-base); }
.use-step + .use-step::after { content: ""; position: absolute; left: 0.62rem; top: -0.8rem; width: 12px; height: 12px; background: var(--muted); -webkit-mask: var(--i-arrow-down) center / contain no-repeat; mask: var(--i-arrow-down) center / contain no-repeat; }
.use-step-kind { color: var(--muted); font-size: var(--fs-sm); margin-right: 0.25rem; }
.use-step-detail { display: block; }
.use-help-thread { display: grid; gap: 0.5rem; margin: 0.5rem 0; }
.use-help-q, .use-help-a { margin: 0; overflow-wrap: anywhere; }
.use-help-form { display: grid; gap: 0.4rem; }
.use-help-form textarea { width: 100%; }
.pipeline-unpublished { font-size: var(--fs-xs); vertical-align: middle; }
@media (max-width: 900px) { .use-grid { grid-template-columns: minmax(0, 1fr); } }
.use-meta + .use-meta, .use-head + .use-grid { margin-top: 0.25rem; }
.use-view .card { min-width: 0; }
/* Review fix 19: header buttons don't wrap. */
.files-head-actions .btn { white-space: nowrap; }
/* Review fix 24: trying a function in its editor. */
.function-test { margin: 0.25rem 0 0.75rem; }
.function-test summary { cursor: pointer; }
.function-test-actions { display: flex; align-items: center; gap: 0.5rem; margin: 0.25rem 0; }
.function-test-output { max-height: 16rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.6rem; }
.function-test-output.is-error { border-color: rgba(240, 180, 41, 0.6); }
/* User options in the Use view (review Phase 5, 5c). */
.use-options { border: 0; margin: 0; padding: 0; display: grid; gap: 0.85rem; min-width: 0; }
.use-options legend { padding: 0; margin-bottom: 0.25rem; }
.use-option input, .use-option select, .use-option textarea { width: 100%; max-width: 100%; }
/* User options in the step panel (review Phase 5, 5c). */
.node-options { display: grid; gap: 0.5rem; margin-top: 0.75rem; }
.node-option { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.5rem 0.6rem; display: grid; gap: 0.35rem; }
.node-option .checkbox-row { display: flex; align-items: flex-start; gap: 0.45rem; overflow-wrap: anywhere; }
.node-option-spec { display: grid; gap: 0.3rem; }
.node-option-spec input, .node-option-spec select, .node-option-spec textarea { width: 100%; max-width: 100%; }
.node-option-range { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
/* Choices: rows of Label and Value (Stop 2 #6). */
.option-choices-box { display: grid; gap: 0.3rem; justify-items: start; }
.option-choices-title { font-weight: 600; }
.option-choices { display: grid; gap: 0.3rem; width: 100%; }
.option-choice { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) minmax(0, 1fr) 1.75rem; gap: 0.3rem; align-items: center; width: 100%; }
.option-choice-head { font-size: var(--fs-xs); color: var(--muted); }
.node-option-spec .option-choice input { min-width: 0; }
.option-choice-grip, .option-choice-remove { border: 0; background: none; color: var(--muted); padding: 0; height: 1.75rem; border-radius: var(--radius-sm); cursor: pointer; line-height: 1; }
.option-choice-grip { cursor: grab; touch-action: none; font-size: var(--fs-md); }
.option-choice-remove { font-size: var(--fs-md); }
.option-choice-grip:hover, .option-choice-remove:hover,
.option-choice-grip:focus-visible, .option-choice-remove:focus-visible { color: var(--text); background: var(--panel-2); }
.option-choice.is-dragging { opacity: 0.6; }
.option-choice.is-dragging .option-choice-grip { cursor: grabbing; }
.option-choices-note { margin: 0; }
/* A chatbot pipeline's Use view (review Phase 5, 5d). */
.chat-lock-head { display: grid; gap: var(--space-1); padding: 0 0 var(--space-3); overflow-wrap: anywhere; }
.chat-lock-name { margin: 0; font-size: var(--fs-md); }
.chat-lock-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.chat-lock-meta .badge { margin: 0; }
.chat-lock-options, .chat-lock-how { margin-top: var(--space-3); border-top: 1px solid var(--border); padding-top: var(--space-2); }
.chat-lock-options form { display: grid; gap: 10px; margin-top: 6px; }
.chat-answer-run { font-size: var(--fs-sm); }

/* Visual polish 11: Settings intros are one size, 14 px muted. */
.settings-panel > p.muted, .settings-panel > p.muted.small, .team-keys-intro p { font-size: var(--fs-base); }
/* 1.3: inline row actions in tables are sm (28 px); ⋯ there is a ghost
   icon button. */
table.data td .btn:not(.icon-btn) { min-height: var(--h-sm); padding: 0 10px; }
table.data td .action-menu { vertical-align: middle; }
table.data td .action-menu > summary.icon-btn { width: var(--h-sm); min-width: var(--h-sm); min-height: var(--h-sm); background: transparent; border-color: transparent; color: var(--muted); }
table.data td .action-menu > summary.icon-btn:hover, table.data td .action-menu[open] > summary.icon-btn { background: rgba(255, 255, 255, 0.06); color: var(--text); }
table.data td .action-menu > summary.icon-btn .icon { width: 16px; height: 16px; }

/* Visual polish 1.6: the focus ring. A visible 2 px orange outline on
   every focusable control, last in the file so it wins. Text fields hug
   it; menus keep their highlight and add it inside; the composer shows
   focus on its box instead (.composer:focus-within). */
:is(a, button, summary, select, input, textarea, [tabindex]):focus-visible,
.btn:focus-visible, .node-config-btn:focus-visible, .folder-delete-button:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}
:is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea):focus-visible {
  outline-offset: 0;
}
:is(.action-menu-list, .user-menu, .nav-menu) [role="menuitem"]:focus-visible,
.notif-panel-item a:focus-visible, .custom-select-option:focus-visible, .tab:focus-visible, .file-row:focus-visible {
  outline: var(--focus-ring);
  outline-offset: -2px;
}
.card.pipeline-card:has(.pipeline-card-link:focus-visible),
.catalog-card:has(.card-open:focus-visible),
.create-mode-card:has(input:focus-visible),
.starter-card:has(input:focus-visible) { outline: var(--focus-ring); outline-offset: 2px; }
.composer textarea:focus-visible { outline: none; }