/* Lemonade GUI design tokens. DESIGN.md defines the roles and usage rules. */

:root {
  /* ---------- Color roles (dark / Midnight Palette) ---------- */
  --surface-base:   #0E0E0B;
  --surface-1:      #1A1813;
  --surface-2:      #1F1D17;
  --surface-3:      #25221B;
  --surface-raised: #2D2922;
  --surface-glass:  rgba(45, 41, 33, 0.72);
  --surface-overlay: rgba(14, 14, 11, 0.72);
  --surface-titlebar: var(--surface-1);
  --surface-alpha-1: rgba(255, 255, 255, 0.10);
  --surface-alpha-05: rgba(255, 255, 255, 0.05);
  --surface-alpha-02: rgba(255, 255, 255, 0.02);

  --text-primary:   #F2EFE5;
  --text-secondary: #C7C2B5;
  --text-tertiary:  #A8A39A;
  --text-disabled:  #7A776E;
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A8A39A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");

  --accent:         #FCD846;
  --accent-hover:   #FAF972;
  --accent-deep:    #5C4B00;
  --accent-fg:      var(--accent);
  --accent-soft:    rgba(252, 216, 70, 0.14);
  --accent-strong:  rgba(252, 216, 70, 0.24);
  --accent-surface: var(--accent-soft);
  --accent-border:  color-mix(in srgb, var(--accent) 28%, transparent);
  --accent-on:      #000000;
  --accent-focus:   var(--accent);

  --success:        #78A86B;
  --success-soft:   rgba(120, 168, 107, 0.15);
  --warn:           #F2B94F;
  --warn-soft:      rgba(242, 185, 79, 0.15);
  --danger:         #EF8D7F;
  --danger-soft:    rgba(239, 141, 127, 0.15);
  --danger-on:      #FFFFFF;
  --info:           #88BDE9;
  --info-soft:      rgba(136, 189, 233, 0.15);

  --status-ok:      var(--success);
  --status-success: var(--success);
  --status-warning: var(--warn);
  --status-error:   var(--danger);

  --border:         rgba(255, 255, 255, 0.10);
  --border-subtle:  rgba(255, 255, 255, 0.07);
  --border-strong:  rgba(252, 216, 70, 0.18);

  /* ---------- Checkbox ---------- */
  --checkbox-fill:   var(--surface-3);
  --checkbox-border: color-mix(in srgb, var(--text-tertiary) 55%, transparent);
  --checkbox-check:  var(--accent-fg);

  --bg-primary: var(--surface-base);
  --bg-secondary: var(--surface-1);
  --surface-0: var(--surface-base);
  --text-muted: var(--text-tertiary);
  --error: var(--danger);
  --primary-yellow: var(--accent);
  --on-primary: var(--accent-on);

  --warning: var(--warn);
  --warning-soft: var(--warn-soft);

  /* ---------- Capability, provider, backend, and monitoring identity ---------- */
  /* Task colors are intentionally theme-invariant across dark and light. */
  --cap-chat:       #A77C00;
  --cap-omni:       #8064D8;
  --cap-router:     #3289D1;
  --cap-vision:     #B58CFF;
  --cap-code:       #6AD0A3;
  /* Lifted from #665F59, which measured 2.83:1 on --surface-1 and so failed the
     3:1 floor WCAG 1.4.11 sets for non-text UI once it began tinting the list
     row's primary modality glyph. */
  --cap-embedding: #8A8279;
  --cap-reranking:  #FF9D6A;
  --cap-image:      #D8752B;
  --cap-image-edit: #D8752B;
  --cap-audio:      #1693A5;
  --cap-audio-generation: #1693A5;
  --cap-tts:        #B35A9F;
  --cap-model3d:   #65758A;
  --cap-classification: #6A8F3C;

  --provider-hugging-face:    #FF9D00;
  --provider-hugging-face-fg: #FFB84D;
  --provider-modelscope:      #4C8DFF;
  --provider-modelscope-fg:   #7BA9FF;

  --chart-series-1: #E8C66B;
  --chart-series-2: #7BAED4;
  --chart-series-3: #7FB38A;
  --chart-series-4: #B07DF0;
  --chart-series-5: #E07B7B;
  --chart-series-6: #7BC8C8;
  --chart-cache:    #D9A35B;

  /* ---------- Typography ---------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable",
               "Segoe UI", system-ui, "Inter", "Helvetica Neue",
               "Microsoft YaHei UI", "Noto Sans CJK SC", sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  --text-xs:   11px;
  --text-sm:   12.5px;
  --text-md:   13.5px;
  --text-base: 14px;
  --text-lg:   15px;
  --text-xl:   18px;
  --text-2xl:  24px;
  --text-3xl:  32px;

  --type-detail-title-size: clamp(22px, 2vw, 28px);
  --type-pane-title-size:   20px;
  --type-panel-title-size:  var(--text-base);
  --type-body-size:         var(--text-base);
  --type-supporting-size:   var(--text-xs);
  --type-caption-size:      var(--text-xs);
  --type-overline-size:     10px;

  --weight-regular:  400;
  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.01em;
  --tracking-caps:   0.08em;

  /* ---------- Space (4px grid) ---------- */
  --space-0:  0;
  --space-0-5: 2px;
  --space-1:  4px;
  --space-1-5: 6px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-8:  48px;
  --space-10: 64px;
  --space-12: 80px;

  /* ---------- Radii ---------- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-pill: 9999px;
  --control-radius: var(--radius-md);

  /* ---------- Shadows ---------- */
  --shadow-sm:
    0 1px 2px rgba(0, 0, 0, 0.18),
    0 1px 1px rgba(0, 0, 0, 0.12);
  --shadow-md:
    0 4px 12px rgba(0, 0, 0, 0.22),
    0 2px 4px rgba(0, 0, 0, 0.14);
  --shadow-soft: var(--shadow-md);
  --shadow-lg:
    0 18px 48px rgba(0, 0, 0, 0.42),
    0 8px 16px rgba(0, 0, 0, 0.20);
  --shadow-top: 0 -8px 24px rgba(0, 0, 0, 0.24);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --duration-fast:  150ms;
  --duration-base:  220ms;
  --duration-normal: 220ms;
  --duration-slow:  380ms;

  /* ---------- Layout constants ---------- */
  --titlebar-height:    52px;
  --rail-collapsed:     56px;
  --rail-expanded:      248px;
  --workspace-rail:     248px;
  --workspace-list:     304px;
  --workspace-header:   72px;
  --rail-toolbar:       48px;
  --control-height-xs:  28px;
  --control-height-sm:  32px;
  --control-height-md:  36px;
  --control-height-lg:  44px;
  --control-height:     var(--control-height-md);
  --icon-button-size:   34px;
  --composer-min:       96px;
  --max-content-width:  860px;
  --content-form-width: 680px;
  --slide-over-width:   420px;
  --panel-padding-inline: var(--space-5);
  --panel-padding-block:  var(--space-4);

  /* ---------- Responsive breakpoints ----------
   * Note: CSS custom properties cannot be used inside @media queries.
   * These values are documented here for reference; use the raw px
   * values in media query expressions.
   *   @media (max-width: 480px)  → phone
   *   @media (max-width: 768px)  → tablet (already used throughout)
   *   @media (max-width: 1024px) → desktop narrow
   */
  --breakpoint-mobile:  480px;
  --breakpoint-tablet:  768px;
  --breakpoint-desktop: 1024px;
}

/* ---------- Light theme overrides ---------- */
[data-theme="light"] {
  --surface-base:   #fdfbf6;
  --surface-1:      #fdfbf6;
  --surface-2:      #f5f2ec;
  --surface-3:      #fdfbf6;
  --surface-raised: #fdfbf6;
  --surface-glass:  #fdfbf6;
  --surface-overlay: rgba(45, 47, 47, 0.32);
  --surface-titlebar: #efebe1;

  --surface-alpha-1: rgba(0, 0, 0, 0.1);
  --surface-alpha-05: rgba(0, 0, 0, 0.05);
  --surface-alpha-02: rgba(0, 0, 0, 0.02);

  --text-primary:   #000000;
  --text-secondary: #2D2F2F;
  --text-tertiary:  #52525B;
  --text-disabled:  #767676;
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2352525B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");

  --accent:         rgba(252, 216, 70, 0.58);
  --accent-hover:   rgba(252, 216, 70, 0.58);
  --accent-deep:    #5C4B00;
  --accent-fg:      var(--accent-deep);
  --accent-soft:    rgba(252, 216, 70, 0.18);
  --accent-strong:  rgba(252, 216, 70, 0.58);
  --accent-on:      #000000;

  --success:        #2C702F;
  --success-soft:   rgba(60, 101, 49, 0.10);
  --warn:           #ffb74d;
  --warn-soft:      rgba(252, 216, 70, 0.20);
  --danger:         #C62828;
  --danger-soft:    rgba(185, 74, 61, 0.10);
  --info:           #2196F3;
  --info-soft:      rgba(48, 110, 168, 0.10);

  --border:         rgba(0, 0, 0, 0.16);
  --border-subtle:  rgba(92, 75, 0, 0.18);
  --border-strong:  rgba(92, 75, 0, 0.18);

  --checkbox-fill: color-mix(in srgb, #FCD846 12%, transparent);
  --checkbox-check: #A98700;
  /* The dark --accent is opaque; the light one is already 58% alpha, so
     mixing it again would leave the border barely visible. */
  --accent-border:  rgba(92, 75, 0, 0.32);

  /* ---------- Non-task identity and monitoring colors, darkened for the light canvas ----------
   * The dark-theme values are tuned against #16140F and land between 1.5:1 and
   * 2.9:1 on #fdfbf6. These preserve each hue while clearing the 3:1 floor WCAG
   * 1.4.11 sets for non-text UI components (glyphs, marks, chart series). */
  --cap-vision:     #A16DFF;
  --cap-code:       #2C9E6C;
  --cap-reranking:  #F95500;
  --cap-image-edit: #CE752B;

  --provider-hugging-face-fg: #C77800;
  --provider-modelscope-fg:   #4888FF;

  --backend-llamacpp:          #A98700;
  --backend-vllm:              #308BFC;
  --backend-flm:               #1E9D6E;
  --backend-ryzenai:           #E96103;
  --backend-sd-cpp:            #B164FD;
  --backend-whispercpp:        #0093D4;
  --backend-moonshine:         #089BB1;
  --backend-kokoro:            #F44AA3;
  --backend-acestep:           #FD4661;
  --backend-thinksound:        #C47D04;
  --backend-trellis:           #727EF8;
  --backend-collection-omni:   #9876FA;
  --backend-collection-router: #089BB1;
  --backend-collection:        #7B8EA8;

  --chart-series-1: #B28612;
  --chart-series-2: #4A92C8;
  --chart-series-3: #5A9B68;
  --chart-series-4: #A86FEF;
  --chart-series-5: #DD6A6A;
  --chart-series-6: #3A9999;
  --chart-cache:    #C07F27;

  --shadow-sm:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 1px 1px rgba(0, 0, 0, 0.04);
  --shadow-md:
    0 4px 12px rgba(0, 0, 0, 0.08),
    0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-soft: var(--shadow-md);
  --shadow-lg:
    0 18px 48px rgba(0, 0, 0, 0.12),
    0 8px 16px rgba(0, 0, 0, 0.06);
  --shadow-top: 0 -8px 24px rgba(0, 0, 0, 0.10);
}

/* Lemonade component and feature styles. DESIGN.md defines the system. */

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

html, body, #root {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  background: var(--surface-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

button {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  /* Suppress UA focus ring; keyboard focus ring is restored by :focus-visible below */
  outline: 0;
}

input, textarea {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
}

/* ---------- Checkbox ---------- */
input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  display: inline-grid;
  place-content: center;
  width: 16px;
  height: 16px;
  min-width: 16px;
  flex: 0 0 16px;
  margin: 0;
  border: 1px solid var(--checkbox-border);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

input[type="checkbox"]::after {
  content: "";
  width: 4px;
  height: 8px;
  border: solid var(--checkbox-check);
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform var(--duration-fast) var(--ease-out);
}

input[type="checkbox"]:checked {
  background: var(--checkbox-fill);
}

[data-theme="light"] input[type="checkbox"]:checked {
  border-color: #A98700;
}

input[type="checkbox"]:checked::after {
  transform: translateY(-1px) rotate(45deg) scale(1);
}

input[type="checkbox"]:not(:disabled):hover {
  border-color: var(--text-tertiary);
}

input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

/* ---------- Focus rings ---------- */
:focus-visible {
  outline: 2px solid var(--accent-focus);
  outline-offset: 2px;
}

/* Elements that handle their own focus styles */
.slider:focus-visible { outline: none; }

/* ---------- Screen reader only ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--surface-3);
  border-radius: var(--radius-pill);
  border: 2px solid var(--surface-base);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--accent);
  color: var(--accent-on);
  padding: var(--space-2) var(--space-4);
  z-index: 9999;
  border-radius: var(--radius-sm);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  text-decoration: none;
}

.skip-link:focus { top: var(--space-2); }

/* ---------- App shell ---------- */
.app {
  display: grid;
  grid-template-rows: var(--titlebar-height) 1fr;
  height: 100vh;
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
  background: var(--surface-base);
}

.view-slot { display: contents; }
.view-slot[hidden] { display: none; }

.view-error {
  padding: var(--space-6);
  color: var(--text-secondary);
  font-family: var(--font-mono);
}

.view-error h2 {
  margin: 0 0 var(--space-4);
  color: var(--danger);
  font-family: var(--font-sans);
  font-size: var(--type-pane-title-size);
}

.view-error pre {
  color: var(--text-secondary);
  font-size: var(--text-md);
  white-space: pre-wrap;
}

.view-error .workspace-action-button { margin-top: var(--space-4); }

/* ---------- Title bar ---------- */
.titlebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--space-2);
  padding: 0 var(--space-3);
  background: var(--surface-1);
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
  z-index: 10;
}

.titlebar__brand {
  grid-column: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.titlebar__brand-name {
  text-transform: capitalize;
}

.titlebar__brand-logo {
  height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  flex: 0 0 auto;
  color: #F2EFE5;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: none;
}

.titlebar__brand-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  background: url('logo.svg') center / contain no-repeat;
}

[data-theme="light"] .titlebar__brand-logo {
  color: #18181B;
}

.titlebar__search {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 176px;
  height: 32px;
  padding: 0;
  color: var(--text-tertiary);
  transition: width var(--duration-base) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.titlebar__search:focus-within {
  width: 208px;
  color: var(--text-secondary);
}

.titlebar__search-leading-icon {
  flex: 0 0 auto;
}

.titlebar__search-toggle {
  width: 32px;
  height: 32px;
  display: none;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}

.titlebar__search-toggle:hover {
  background: var(--surface-2);
  color: var(--text-primary);
}

.titlebar__search-popover {
  min-width: 0;
  display: flex;
  position: relative;
  flex: 1;
}

.titlebar__search-entry {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: var(--space-1);
  height: 28px;
  border-bottom: 1px solid color-mix(in srgb, var(--text-tertiary) 36%, transparent);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.titlebar__search:focus-within .titlebar__search-entry {
  border-bottom-color: color-mix(in srgb, var(--text-tertiary) 36%, transparent);
  box-shadow: none;
}

.titlebar__search input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-sm);
}

.titlebar__search input::placeholder {
  color: var(--text-tertiary);
}

.titlebar__search kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 2px;
  border: 0;
  color: var(--text-tertiary);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.titlebar__search-results {
  position: absolute;
  z-index: 20;
  top: calc(100% + var(--space-2));
  left: 0;
  width: 100%;
  overflow: hidden;
  padding: var(--space-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
}

.titlebar__search-results button {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
}

.titlebar__search-results button > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}

.titlebar__search-results button strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--weight-semibold);
}

.titlebar__search-results button small {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}

.titlebar__search-results button:hover,
.titlebar__search-results button.is-active {
  background: var(--surface-2);
  color: var(--text-primary);
}

.titlebar__search-results p {
  margin: 0;
  padding: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

.titlebar__nav {
  grid-column: 2;
  min-width: 0;
  display: flex;
  align-self: center;
  justify-self: center;
  align-items: center;
  gap: var(--space-0-5);
  padding: 3px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 4%, transparent);
}

.titlebar__nav button {
  min-width: 72px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 0 10px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  border-radius: var(--radius-pill);
  transition: background var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.titlebar__nav button:hover {
  background: color-mix(in srgb, var(--surface-3) 68%, transparent);
  color: var(--text-primary);
}

.titlebar__nav button.is-active {
  background: var(--surface-3);
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-primary) 6%, transparent),
              var(--shadow-sm);
}

.titlebar__right {
  grid-column: 3;
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.titlebar__utilities {
  position: relative;
}

.titlebar__utilities,
.titlebar__utility-menu {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.titlebar__utility-menu > .titlebar__search,
.titlebar__utility-menu > .titlebar__theme-toggle,
.titlebar__utility-menu > .titlebar__download-toggle {
  flex: 0 0 auto;
}

.titlebar__utilities-toggle {
  width: 32px;
  height: 32px;
  display: none;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--surface-1);
  color: var(--text-secondary);
}

.titlebar__utilities-toggle:hover,
.titlebar__utilities-toggle[aria-expanded="true"] {
  border-color: var(--border-strong);
  background: var(--surface-2);
  color: var(--text-primary);
}

.titlebar--desktop .titlebar__utilities-toggle,
.titlebar--desktop .titlebar__utilities-toggle:hover,
.titlebar--desktop .titlebar__utilities-toggle[aria-expanded="true"] {
  border-color: transparent;
}

.titlebar__utility-label { display: none; }
.titlebar__utility-status,
.titlebar__utility-value { display: none; }

.titlebar__theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: var(--text-base);
  transition: background var(--duration-fast) var(--ease-out);
  line-height: 1;
}
.titlebar__theme-toggle:hover { background: var(--surface-2); }

.titlebar__window-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-button-size);
  height: var(--icon-button-size);
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--text-secondary);
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.titlebar--desktop .titlebar__window-btn--minimize {
  position: relative;
}

.titlebar--desktop .titlebar__window-btn--minimize::before {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: -1px;
  width: 1px;
  height: 25px;
  border-radius: var(--radius-pill);
  background: linear-gradient(
    to bottom,
    transparent 0%,
    color-mix(in srgb, var(--border-strong) 70%, transparent) 50%,
    transparent 100%
  );
  transform: translateY(-50%);
  pointer-events: none;
}

.titlebar__window-btn:hover {
  background: var(--surface-2);
  color: var(--text-primary);
}

.titlebar__window-icon {
  stroke-width: 1.5;
}

.titlebar__window-btn--close:hover {
  background: var(--danger);
  color: var(--danger-on);
}

.titlebar__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-disabled);
  transition: background var(--duration-fast);
  flex-shrink: 0;
}

.titlebar__status-dot--connected {
  background: var(--success);
  box-shadow: 0 0 6px var(--success);
}

.titlebar__status-dot--connecting {
  background: var(--warn);
  animation: pulse 1.2s ease-in-out infinite;
}

/* Model selector pill in titlebar */

@keyframes pulse { 50% { opacity: 0.4; } }

/* ---------- View container ---------- */
.view-container {
  position: relative;
  overflow: hidden;
}

/* ---------- Chat layout ---------- */
.chat {
  display: grid;
  grid-template-columns: var(--rail-collapsed) 1fr;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "rail main"
    "rail composer";
  height: 100%;
  transition: grid-template-columns var(--duration-base) var(--ease-out);
}

.chat.rail-expanded {
  grid-template-columns: var(--rail-expanded) 1fr;
}

/* ---------- Conversation rail ---------- */
.rail {
  grid-area: rail / rail / composer / rail;
  background: var(--surface-1);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.chat.rail-expanded .rail__title { opacity: 1; }

.rail__new-wrap {
  padding: var(--space-2) var(--space-3) var(--space-1);
}

.rail__new {
  width: 100%;
}

.detail-configuration__autotune {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: fit-content;
  color: var(--text-secondary);
  cursor: help;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.detail-configuration__autotune-help {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}

.chat:not(.rail-expanded) .rail__new {
  width: var(--icon-button-size);
}

.chat:not(.rail-expanded) .rail__new .workspace-action-button__label { display: none; }

.rail__list {
  flex: 1;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
}

.chat.rail-expanded .rail__list { opacity: 1; }

.rail__empty {
  padding: var(--space-4) var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-align: center;
}

/* ---------- Chat main pane ---------- */
.chat__main {
  grid-area: main;
  overflow-y: auto;
  position: relative;
}

.chat__inner {
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
}

/* Hero greeting (empty state) */
.hero {
  padding: var(--space-12) 0 var(--space-8);
  text-align: center;
}

.hero__title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-3);
  color: var(--text-primary);
}

.hero__subtitle {
  font-size: var(--text-lg);
  color: var(--text-tertiary);
  margin: 0 auto;
  max-width: 520px;
}

/* Capability chips */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin-top: var(--space-6);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px var(--space-4);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.chip:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.chip:active { transform: scale(0.97); }

.chip__icon { font-size: var(--text-base); line-height: 1; }

/* PR3141 V2: loaded models overview */
.loaded-overview {
  padding: var(--space-5) 0 var(--space-4);
}

.loaded-overview__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.loaded-overview__title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

.loaded-overview__subtitle {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

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

.loaded-overview__row {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 26px 84px 56px;
  align-items: center;
  column-gap: var(--space-3);
  min-height: 78px;
  padding: var(--space-2) 0 var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-1) 74%, transparent);
  overflow: hidden;
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.loaded-overview__row--selectable { cursor: pointer; }

.loaded-overview__row:hover,
.loaded-overview__row:focus-within {
  border-color: var(--border-strong);
  background: color-mix(in srgb, var(--surface-2) 82%, transparent);
}

.loaded-overview__row--selected,
.loaded-overview__row--selected:hover,
.loaded-overview__row--selected:focus-within {
  border-color: var(--accent-fg);
  background: color-mix(in srgb, var(--accent) 4%, var(--surface-1));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-fg) 10%, transparent);
}

.loaded-overview__row--busy { opacity: 0.72; }

.loaded-overview__task {
  --loaded-task-color: var(--text-tertiary);
  grid-column: 1;
  display: grid;
  place-items: center;
  min-width: 0;
  color: var(--loaded-task-color);
}

.loaded-overview__task-icon {
  width: 38px;
  height: 34px;
  display: grid;
  place-items: center;
}

.loaded-overview__task-icon .capability-icon-pair {
  position: relative;
}

.loaded-overview__task-icon .capability-icon-pair > svg + svg {
  position: absolute;
  top: 46%;
  left: 50%;
  width: 42%;
  height: 42%;
  transform: translate(-50%, -50%);
}

.loaded-overview__identity {
  grid-column: 2;
  min-width: 0;
}

.loaded-overview__name-line {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}

.loaded-overview__name {
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.loaded-overview__details-link {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
}

.loaded-overview__details-link:hover,
.loaded-overview__details-link:focus-visible {
  background: var(--surface-3);
  color: var(--accent-fg);
}

.loaded-overview__meta-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  min-width: 0;
  margin-top: 4px;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

.loaded-overview__meta-capability {
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

.loaded-overview__meta-item {
  color: var(--text-tertiary);
  white-space: nowrap;
}

.loaded-overview__meta-line > span + span::before {
  content: '·';
  margin: 0 6px;
  color: var(--text-disabled);
}

.loaded-overview__pin {
  grid-column: 3;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  justify-self: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
}

.loaded-overview__pin:hover,
.loaded-overview__pin:focus-visible {
  background: color-mix(in srgb, var(--text-primary) 8%, transparent);
  color: var(--text-primary);
}

.loaded-overview__pin--active {
  background: color-mix(in srgb, var(--accent-fg) 10%, transparent);
  color: var(--accent-fg);
}

.loaded-overview__selection {
  grid-column: 4;
  display: flex;
  justify-content: center;
}

.loaded-overview__selection-pill {
  min-width: 74px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1;
  white-space: nowrap;
}

.loaded-overview__selection-pill--use {
  border-color: color-mix(in srgb, var(--accent-fg) 44%, transparent);
  background: var(--accent);
  color: var(--accent-on);
  cursor: pointer;
}

.loaded-overview__selection-pill--use:hover:not(:disabled),
.loaded-overview__selection-pill--use:focus-visible {
  border-color: var(--accent-fg);
  background: var(--accent-hover);
}

.loaded-overview__selection-pill--use:disabled { cursor: progress; opacity: 0.55; }

.loaded-overview__selection-pill--selected {
  border-color: var(--border-subtle);
  background: var(--surface-3);
  color: var(--text-disabled);
  cursor: default;
}

.loaded-overview__unload {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 56px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-start-end-radius: var(--radius-lg);
  border-end-end-radius: var(--radius-lg);
  background: transparent;
  color: var(--accent-fg);
  cursor: pointer;
  visibility: visible;
}

.loaded-overview__unload:hover:not(:disabled),
.loaded-overview__unload:focus-visible {
  background: color-mix(in srgb, var(--text-primary) 8%, transparent);
  color: var(--text-primary);
}

.loaded-overview__unload:focus-visible {
  outline: 2px solid var(--accent-focus);
  outline-offset: -2px;
}

.loaded-overview__unload:disabled {
  cursor: progress;
  color: var(--text-disabled);
}

/* Capability badges */
.cap-badge {
  font-size: var(--type-overline-size);
  letter-spacing: 0.04em;
  font-weight: var(--weight-semibold);
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--text-secondary);
  text-transform: none;
}

.cap-badge--chat   { background: color-mix(in srgb, var(--cap-chat) 18%, transparent); color: var(--cap-chat); }
.cap-badge--router { background: color-mix(in srgb, var(--cap-router) 18%, transparent); color: var(--cap-router); }
.cap-badge--vision { background: color-mix(in srgb, var(--cap-vision) 18%, transparent); color: var(--cap-vision); }
.cap-badge--code   { background: color-mix(in srgb, var(--cap-code) 18%, transparent); color: var(--cap-code); }
.cap-badge--embed  { background: color-mix(in srgb, var(--cap-embedding) 18%, transparent); color: var(--cap-embedding); }
.cap-badge--rerank { background: color-mix(in srgb, var(--cap-reranking) 18%, transparent); color: var(--cap-reranking); }
.cap-badge--audio  { background: color-mix(in srgb, var(--cap-audio) 18%, transparent); color: var(--cap-audio); }
.cap-badge--tts    { background: color-mix(in srgb, var(--cap-tts) 18%, transparent); color: var(--cap-tts); }
.cap-badge--image  { background: color-mix(in srgb, var(--cap-image) 18%, transparent); color: var(--cap-image); }
.cap-badge--classify { background: color-mix(in srgb, var(--cap-classification) 18%, transparent); color: var(--cap-classification); }

/* ---------- Conversation thread ---------- */
.thread {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-6) 0;
}

.message {
  display: flex;
  gap: var(--space-3);
  animation: msgIn var(--duration-slow) var(--ease-out);
}

@keyframes msgIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.message__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
}

.message--user .message__avatar {
  background: var(--surface-3);
  color: var(--text-secondary);
}

.message--assistant .message__avatar {
  background: var(--accent-soft);
  color: var(--accent-fg);
}

.message__body { flex: 1; min-width: 0; }

.message__author {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
}

.message__content {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-primary);
}

.message__content p { margin: 0 0 var(--space-3); }
.message__content p:last-child { margin-bottom: 0; }

.message__content pre {
  margin: var(--space-3) 0;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  overflow-x: auto;
  font-size: var(--text-sm);
  line-height: 1.5;
}

.message__content pre code {
  font-family: var(--font-mono);
  background: none;
  padding: 0;
  border-radius: 0;
}

.message__content code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}

.message__content ul, .message__content ol {
  margin: var(--space-2) 0;
  padding-left: var(--space-5);
}

.message__content li { margin-bottom: var(--space-1); }

.message__content blockquote {
  margin: var(--space-3) 0;
  padding: var(--space-2) var(--space-4);
  border-left: 3px solid var(--accent);
  color: var(--text-secondary);
  background: var(--surface-raised);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.message__content table {
  border-collapse: collapse;
  margin: var(--space-3) 0;
  font-size: var(--text-sm);
  max-width: 100%;
  display: block;
  overflow-x: auto;
}

.message__content th, .message__content td {
  border: 1px solid var(--border);
  padding: var(--space-2) var(--space-3);
}

.message__content th {
  background: var(--surface-raised);
  font-weight: var(--weight-semibold);
}

.message__content a {
  color: var(--accent-fg);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.message__metrics {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  display: flex;
  gap: var(--space-3);
}

.message__live-stats {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--accent-fg);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  display: flex;
  gap: var(--space-3);
  opacity: 0.8;
}

/* Thinking / reasoning */
.message__thinking {
  margin-bottom: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-size: var(--text-sm);
}

.message__thinking summary {
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  background: var(--surface-raised);
  user-select: none;
}

.message__thinking summary::marker { color: var(--text-tertiary); }
.message__thinking[open] summary { border-bottom: 1px solid var(--border); }

.message__thinking-content {
  padding: var(--space-2) var(--space-3);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  line-height: 1.35;
  max-height: 240px;
  overflow-y: auto;
  white-space: normal;
  background: var(--surface-raised);
  opacity: 0.9;
}

.message__thinking-content .message__content {
  font-size: inherit;
  line-height: 1.35;
  color: inherit;
}

.message__thinking-content .message__content p { margin: 0 0 6px; }
.message__thinking-content .message__content p:last-child { margin-bottom: 0; }

.message__thinking-content .message__content ul,
.message__thinking-content .message__content ol {
  margin: 4px 0;
  padding-left: 18px;
}

.message__thinking-content .message__content li { margin: 0 0 4px; }
.message__thinking-content .message__content li:last-child { margin-bottom: 0; }
.message__thinking-content .message__content li > p { margin: 0 0 4px; }
.message__thinking-content .message__content li > p:last-child { margin-bottom: 0; }

.message__thinking-content .message__content pre,
.message__thinking-content .code-block {
  margin: 6px 0;
}

.message__thinking-content .message__content blockquote {
  margin: 6px 0;
  padding: 6px 10px;
}

/* Tool calls display */
.message__tool-calls {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.message__tool-call {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  font-size: var(--text-xs);
  overflow: hidden;
}

.message__tool-call summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px var(--space-3);
  cursor: pointer;
  user-select: none;
  list-style: none;
  color: var(--text-secondary);
  transition: background var(--duration-fast) var(--ease-out);
}

.message__tool-call summary::-webkit-details-marker { display: none; }
.message__tool-call summary::marker { display: none; content: ''; }

.message__tool-call summary:hover {
  background: var(--surface-2);
}

.message__tool-call--running summary {
  color: var(--accent-fg);
}

.message__tool-call--error summary {
  color: var(--status-error);
}

.message__tool-call-icon {
  font-size: 12px;
  flex-shrink: 0;
}

.message__tool-call-name {
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.message__tool-call-args {
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message__tool-call-result {
  padding: 6px var(--space-3);
  border-top: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--surface-raised);
}

/* Code block */
.code-block {
  margin: var(--space-3) 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: var(--surface-base);
}

.code-block__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-1);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.code-block__lang {
  font-size: var(--type-overline-size);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  color: var(--text-tertiary);
}

.code-block__copy {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  padding: 4px var(--space-2);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}

.code-block__copy:hover {
  color: var(--text-primary);
  background: var(--surface-3);
}

.code-block__copy.copied { color: var(--success); }
.code-block__copy.copy-failed { color: var(--danger); }

.code-block pre {
  margin: 0;
  padding: var(--space-4);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: var(--leading-snug);
  color: var(--text-primary);
  overflow-x: auto;
  background: transparent;
  border: none;
  border-radius: 0;
}

.code-block pre code {
  font-family: var(--font-mono);
  background: none;
  padding: 0;
}

/* Streaming cursor */
.streaming-cursor {
  vertical-align: text-bottom;
  display: inline-block;
  width: 8px;
  height: 15px;
  background: var(--accent);
  margin-left: 2px;
  animation: blink-cursor 0.8s infinite;
}

.streaming-cursor--leading {
  height: 1em;
  margin-left: 0;
  margin-right: var(--space-1);
}

/* ---------- Composer ---------- */
.composer {
  grid-area: composer;
  padding: var(--space-3) var(--space-6) var(--space-4);
  background: var(--surface-base);
  position: relative;
}

.composer__model-picker {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.composer__toolbar {
  max-width: var(--max-content-width);
  margin: 0 auto var(--space-2);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.composer__toolbar > .composer__tools-toggle { margin-top: 3px; }

.composer__tools-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 5px;
  min-height: 30px;
  font-size: var(--text-xs);
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  line-height: 1;
  color: var(--text-tertiary);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 4px var(--space-3);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}

.composer__tools-toggle:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
}

.composer__tools-toggle--active {
  color: var(--accent-fg);
  border-color: var(--accent-fg);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-1));
}

.composer__mcp-picker {
  position: relative;
  flex: 0 0 auto;
}

.composer__mcp-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + var(--space-2));
  z-index: var(--z-dropdown);
  width: min(420px, calc(100vw - 32px));
  max-height: min(520px, calc(100vh - 180px));
  overflow: auto;
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
}

.composer__mcp-modal {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, #000 54%, transparent);
}

.composer__mcp-menu--modal {
  position: relative;
  left: auto;
  bottom: auto;
  width: min(620px, 100%);
  max-height: min(720px, calc(100vh - 2 * var(--space-4)));
  box-shadow: var(--shadow-lg);
}

.composer__mcp-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0 0 var(--space-2);
  padding: 4px var(--space-1);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}

.composer__mcp-back:hover {
  color: var(--text-primary);
  background: var(--surface-2);
}

.composer__mcp-header,
.composer__mcp-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.composer__mcp-tabs {
  display: flex;
  gap: var(--space-1);
  margin-top: var(--space-3);
  padding: var(--space-1);
  border-radius: var(--radius-md);
  background: var(--surface-1);
}

.composer__mcp-tab {
  flex: 1;
  padding: var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.composer__mcp-tab:hover {
  color: var(--text-primary);
}

.composer__mcp-tab.is-active {
  background: var(--surface-raised);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.composer__mcp-tab:focus-visible {
  outline: 2px solid var(--accent-fg);
  outline-offset: 1px;
}

.composer__mcp-footer {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.composer__mcp-master,
.composer__mcp-server-row,
.composer__mcp-tool {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.composer__mcp-master {
  flex: 1;
}

.composer__mcp-master span,
.composer__mcp-server-text,
.composer__mcp-tool span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.composer__mcp-master strong,
.composer__mcp-server-text strong,
.composer__mcp-tool strong {
  color: var(--text-primary);
  font-size: var(--text-sm);
}

.composer__mcp-master small,
.composer__mcp-server-text small,
.composer__mcp-tool small {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}

.composer__mcp-servers {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.composer__mcp-server {
  padding: var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-1);
}

.composer__mcp-server.is-selected {
  border-color: color-mix(in srgb, var(--accent-fg) 45%, var(--border-subtle));
}

.composer__mcp-status {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--text-muted);
  flex: 0 0 auto;
}

.composer__mcp-status.is-connected {
  background: var(--success);
}

.composer__mcp-tools {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-left: 24px;
}

.composer__mcp-tool {
  min-width: 0;
  padding: 6px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.composer__mcp-tool strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer__mcp-empty,
.composer__mcp-error {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.composer__mcp-error {
  color: var(--danger);
}

.composer__tool-status {
  max-width: var(--max-content-width);
  margin: 0 auto var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--accent-fg);
  font-weight: var(--weight-medium);
  animation: fadeIn var(--duration-normal) var(--ease-out);
}

.composer__tool-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 1s ease-in-out infinite;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.composer__history-notice {
  max-width: var(--max-content-width);
  margin: 0 auto var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  animation: fadeIn var(--duration-normal) var(--ease-out);
}

.composer__history-notice .app-icon { flex-shrink: 0; color: var(--warning); }

.composer__history-notice-copy { flex: 1; min-width: 0; }

.composer__history-notice-action {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--accent-fg);
  font-weight: var(--weight-medium);
  cursor: pointer;
  text-decoration: underline;
}

.composer__history-notice-action:hover { opacity: 0.85; }

.composer__history-notice-dismiss {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  padding: 0;
  color: var(--text-tertiary);
  cursor: pointer;
}

.composer__history-notice-dismiss:hover { color: var(--text-secondary); }

.composer__model-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--weight-medium);
  margin-top: 7px;
}

.composer__bar {
  max-width: var(--max-content-width);
  margin: 0 auto;
  display: flex;
  gap: var(--space-2);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
  align-items: center;
}

[data-theme="light"] .composer__bar {
  background: var(--surface-raised);
}

.composer__bar:focus-within {
  border-color: var(--accent-fg);
  background: var(--surface-2);
}

[data-theme="light"] .composer__bar:focus-within {
  background: var(--surface-raised);
}

.composer__entry--with-settings {
  max-width: var(--max-content-width);
  margin: 0 auto;
  container-type: inline-size;
  container-name: composer-settings;
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}

[data-theme="light"] .composer__entry--with-settings {
  background: var(--surface-raised);
}

.composer__entry--with-settings:focus-within {
  border-color: var(--accent-fg);
  background: var(--surface-2);
}

[data-theme="light"] .composer__entry--with-settings:focus-within {
  background: var(--surface-raised);
}

.composer__entry--with-settings > .composer__image-settings,
.composer__entry--with-settings > .composer__capability-settings {
  max-width: none;
  margin: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
  box-shadow: none;
}

.composer__entry--with-settings > .composer__bar {
  max-width: none;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.composer__entry--with-settings > .composer__bar:focus-within,
[data-theme="light"] .composer__entry--with-settings > .composer__bar,
[data-theme="light"] .composer__entry--with-settings > .composer__bar:focus-within {
  background: transparent;
}

.composer__input {
  flex: 1 1 auto;
  min-width: 0;
  resize: none;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  padding: 8px var(--space-2);
  min-height: 40px;
  max-height: 200px;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-sans);
  border: none;
  outline: none;
}

.composer__input:focus,
.composer__input:focus-visible {
  /* The rounded composer shell already exposes focus via :focus-within.
     Chromium may report its default `medium` outline width even when the
     outline style is `none`, so zero every outline component explicitly. */
  outline-style: none;
  outline-width: 0;
  outline-offset: 0;
  box-shadow: none;
}

.composer__input::placeholder { color: var(--text-tertiary); }

.composer__thinking {
  position: relative;
  flex: 0 0 auto;
}

.composer__thinking-trigger {
  height: 38px;
  min-width: 0;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out),
    opacity var(--duration-fast) var(--ease-out);
}

.composer__thinking-trigger .app-icon {
  flex: 0 0 auto;
}

.composer__thinking-trigger:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.composer__thinking-tooltip {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--space-2));
  z-index: var(--z-dropdown);
  min-height: 32px;
  padding: 4px 5px 4px 10px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
  color: var(--text-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(3px);
  transition:
    opacity var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    visibility var(--duration-fast) var(--ease-out);
}

.composer__thinking-tooltip kbd {
  min-height: 22px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text-tertiary);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
}

.composer__thinking:hover .composer__thinking-tooltip,
.composer__thinking:focus-within .composer__thinking-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.composer__thinking-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--space-2));
  z-index: var(--z-dropdown);
  width: 270px;
  padding: var(--space-2);
  display: grid;
  gap: 2px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
}

.composer__thinking-option {
  width: 100%;
  min-height: 54px;
  padding: 7px 9px 7px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.composer__thinking-option-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.composer__thinking-option-label {
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1.2;
}

.composer__thinking-option-description {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: var(--weight-normal);
  line-height: 1.35;
}

.composer__thinking-option > .app-icon {
  flex: 0 0 auto;
}

.composer__thinking-option:hover,
.composer__thinking-option:focus-visible {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--text-primary) 7%, transparent);
}

.composer__thinking-option.is-selected {
  color: var(--text-primary);
  background: var(--surface-2);
}

.composer__thinking-option.is-selected .app-icon {
  color: var(--accent-fg);
}

.composer__send {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--accent-on);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  transition: background var(--duration-fast) var(--ease-out),
              opacity var(--duration-fast);
  flex-shrink: 0;
}

.composer__send .app-icon { stroke-width: 2; }
.composer__send:hover { background: var(--accent-hover); }
[data-theme="light"] .composer__send:hover { filter: brightness(0.85) saturate(1.5); }
.composer__send:disabled { opacity: 0.3; cursor: default; }

.composer__stop {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--danger);
  color: var(--danger-on);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  flex-shrink: 0;
  transition: opacity var(--duration-fast);
}

.composer__stop:hover { opacity: 0.85; }

.composer__hint {
  text-align: center;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* ---------- Model Manager ---------- */
/* ========== Model Manager ========== */

.manager {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  overflow: hidden;
}

/* Toolbar: search + filter chips */

.manager__search-input {
  width: 100%;
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-8);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  color: var(--text-primary);
  font-size: var(--text-sm);
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}

.manager__search-input::placeholder {
  color: var(--text-disabled);
}

.manager__search-input:focus {
  outline: none;
  border-color: var(--accent-fg);
  background: var(--surface-2);
}

/* Body */

.manager__empty {
  text-align: center;
  padding: var(--space-10) 0;
  color: var(--text-tertiary);
}

/* ── Zone ─────────────────────────────────────────────────── */

.zone {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.zone__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-2); margin-bottom: var(--space-3);
}

.zone__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.zone__dot--running {
  background: var(--success);
  box-shadow: 0 0 8px color-mix(in srgb, var(--success) 50%, transparent);
  animation: dotPulse 2s ease-in-out infinite;
}

.zone__dot--ready {
  background: var(--accent);
}

.zone__dot--available {
  background: var(--text-disabled);
}

@keyframes dotPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.zone__title {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: var(--text-tertiary);
}

.zone__count {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}

.zone__rule {
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}

/* ── HuggingFace Zone ─────────────────────────────────────── */

.zone__dot--hf {
  background: var(--provider-hugging-face);
  box-shadow: 0 0 6px color-mix(in srgb, var(--provider-hugging-face) 40%, transparent);
}

.hf-zone__loading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

.hf-zone__spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--provider-hugging-face);
  border-radius: 50%;
  animation: hfSpin 0.8s linear infinite;
}

@keyframes hfSpin {
  to { transform: rotate(360deg); }
}

.hf-zone__empty {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  color: var(--text-disabled);
  font-size: var(--text-sm);
}

.row--hf {
  border-left: 3px solid color-mix(in srgb, var(--provider-hugging-face) 35%, transparent);
}

.row--hf:hover {
  border-left-color: var(--provider-hugging-face);
}

.row--hf.row--expanded {
  border-color: color-mix(in srgb, var(--provider-hugging-face) 40%, transparent);
  border-left-color: var(--provider-hugging-face);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--provider-hugging-face) 12%, transparent);
}

.row__icon--hf {
  border-color: var(--provider-hugging-face);
  font-size: var(--text-xl);
}

.row__label--hf {
  background: color-mix(in srgb, var(--provider-hugging-face) 10%, transparent);
  color: var(--provider-hugging-face-fg);
}

.row__action--hf-link {
  text-decoration: none;
  color: var(--provider-hugging-face-fg);
  font-size: var(--text-xs);
  background: color-mix(in srgb, var(--provider-hugging-face) 8%, transparent);
  border-color: color-mix(in srgb, var(--provider-hugging-face) 20%, transparent);
}

.row__action--hf-link:hover {
  background: color-mix(in srgb, var(--provider-hugging-face) 16%, transparent);
  color: var(--provider-hugging-face);
  border-color: color-mix(in srgb, var(--provider-hugging-face) 40%, transparent);
}

.row__detail--hf {
  border-top-color: color-mix(in srgb, var(--provider-hugging-face) 15%, transparent);
}

.hf-detail__gguf-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-1);
}

.hf-detail__gguf-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
  width: 100%;
  padding: 6px 10px;
  text-align: left;
  background: var(--surface-0);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--duration-fast), border-color var(--duration-fast);
}

.hf-detail__gguf-btn::before {
  content: '';
  width: 12px;
  height: 12px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  flex: 0 0 auto;
}

.hf-detail__gguf-btn:hover {
  background: var(--surface-2);
  border-color: var(--accent-fg);
}

.hf-detail__gguf-btn--selected {
  background: color-mix(in srgb, var(--accent) 7%, var(--surface-0));
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border-subtle));
}

.hf-detail__gguf-btn--selected::before {
  background: var(--accent-fg);
  border-color: var(--accent-fg);
  box-shadow: inset 0 0 0 3px var(--surface-0);
}

.hf-detail__gguf-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.hf-detail__gguf-name {
  flex: 1 1 auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.hf-detail__gguf-size {
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.hf-detail__gguf-primary-action {
  display: flex;
  justify-content: flex-start;
  margin-top: var(--space-2);
}

/* ── Model Row ────────────────────────────────────────────── */

.row {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
  overflow: hidden;
}

.row:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
}

.row--expanded {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.row--running {
  border-left: 3px solid var(--success);
}

.row--active {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.row__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-3) var(--space-4);
}

.row__content {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4);
  align-items: center;
  min-width: 0;
  text-align: left;
  cursor: pointer;
}

.row__main {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.row__icon {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: var(--radius-md);
  background: var(--surface-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent);
  overflow: hidden;
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}

.row__icon svg {
  opacity: 0.9;
}

.row__icon--running {
  background: var(--success-soft);
}

.row__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: var(--space-0-5);
}

.row__name {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  overflow-wrap: anywhere;
  line-height: var(--leading-snug);
}

.row__sub {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.row__labels {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: 4px;
}

.row__label {
  font-size: var(--type-overline-size);
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--text-secondary);
  white-space: nowrap;
}

.row__right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.row__expand {
  color: var(--text-disabled);
  font-size: 12px;
  margin-left: var(--space-1);
}

/* Status pills */

.row__pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  animation: dotPulse 2s ease-in-out infinite;
}

/* Action buttons */
.row__action {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  padding: 6px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-fg);
  transition: background var(--duration-fast) var(--ease-out);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  line-height: 1;
}

.row__action:hover { background: var(--accent-strong); }

.row__action--unload {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

.row__action--unload:hover {
  background: var(--surface-3);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.row__action--delete {
  background: transparent;
  color: var(--text-tertiary);
  border: 1px solid transparent;
  min-width: auto;
  padding: 4px 8px;
  font-size: var(--text-base);
}

.row__action--delete:hover {
  background: color-mix(in srgb, var(--error) 15%, transparent);
  color: var(--error);
  border-color: color-mix(in srgb, var(--error) 30%, transparent);
}

.row__action--download {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

.row__action--download:hover {
  background: var(--surface-3);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

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

/* Progress bar (download) */
.row__progress {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 140px;
}

.row__progress-bar {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--surface-3);
  overflow: hidden;
}

[data-theme="light"] .row__progress-bar {
  background: var(--surface-alpha-1);
}

.row__progress-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
  transition: width 0.3s var(--ease-out);
}

[data-theme="light"] .row__progress-fill {
  background: #FCD846;
}

.row__progress-text {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--accent-fg);
  min-width: 36px;
  text-align: right;
}

.row__action--cancel {
  background: none;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--text-xs);
  padding: 2px 6px;
  line-height: 1;
  flex-shrink: 0;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.row__action--cancel:hover {
  color: var(--error);
  border-color: var(--error);
}

/* ── Model Detail (expanded) ──────────────────────────────── */

.row__detail {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-alpha-05);
  animation: detailSlide 0.2s var(--ease-out);
}

[data-theme="light"] .row__detail {
  background: var(--surface-alpha-05);
}

@keyframes detailSlide {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.detail__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

.detail__meta,
.detail__source {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.detail__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.detail__label {
  font-size: var(--type-overline-size);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: var(--text-disabled);
}

.detail__value {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.detail__value--mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  word-break: break-all;
  color: var(--text-tertiary);
}

.detail__hf-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--accent-fg);
  margin-top: var(--space-2);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  transition: background var(--duration-fast) var(--ease-out);
  width: fit-content;
}

.detail__hf-link:hover {
  background: var(--accent-strong);
}

.row__detail--live {
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-3);
  margin-top: var(--space-2);
}

/* ---------- Shared forms ---------- */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.form-field__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.connect__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-disabled);
}

.connect__status-dot--connected { background: var(--success); box-shadow: 0 0 6px var(--success); }
.connect__status-dot--connecting { background: var(--warn); animation: pulse 1.2s ease-in-out infinite; }

/* ---------- Buttons ---------- */
.btn {
  min-width: 0;
  height: var(--control-height-sm);
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1-5);
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: var(--control-radius);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.btn--primary {
  border-color: color-mix(in srgb, var(--accent) 72%, transparent);
  background: var(--accent);
  color: var(--accent-on);
}

.btn--primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn--primary:focus-visible { background: var(--accent); color: var(--accent-on); }

.btn--secondary,
.btn--ghost {
  border-color: var(--border-subtle);
  background: var(--surface-2);
  color: var(--text-primary);
}

.btn--secondary:hover:not(:disabled),
.btn--ghost:hover:not(:disabled) {
  border-color: var(--border-strong);
  background: var(--surface-3);
}

.btn--quiet {
  background: transparent;
  color: var(--text-secondary);
}

.btn--quiet:hover:not(:disabled) {
  border-color: var(--border-subtle);
  background: var(--surface-2);
  color: var(--text-primary);
}

.btn--danger {
  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
  background: color-mix(in srgb, var(--danger) 9%, transparent);
  color: var(--danger);
}

.btn--danger:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--danger) 52%, transparent);
  background: color-mix(in srgb, var(--danger) 15%, transparent);
}

.btn--small,
.btn--sm,
.btn--tiny { height: var(--control-height-xs); padding-inline: 9px; }
.btn--toolbar,
.btn--icon-only { width: var(--icon-button-size); padding: 0; }
.btn--toolbar { height: var(--icon-button-size); }
.btn:disabled { opacity: 0.42; cursor: default; }

/* ---------- Capability chips ---------- */

.cap-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.cap-chip {
  --cap-color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: 3px 9px 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
  text-transform: lowercase;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.cap-chip.is-on {
  background: var(--accent-soft);
  border-color: var(--accent-fg);
  color: var(--text-primary);
}

.cap-chip.is-off { opacity: 0.55; }

.cap-chip[disabled] { cursor: default; }
.cap-chip:not([disabled]):hover { border-color: var(--border-strong); }

.cap-chip--chat          { --cap-color: var(--cap-chat); }
.cap-chip--vision        { --cap-color: var(--cap-vision); }
.cap-chip--code          { --cap-color: var(--cap-code); }
.cap-chip--embedding,
.cap-chip--embed         { --cap-color: var(--cap-embedding); }
.cap-chip--reranking,
.cap-chip--rerank        { --cap-color: var(--cap-reranking); }
.cap-chip--image         { --cap-color: var(--cap-image); }
.cap-chip--edit          { --cap-color: var(--cap-image-edit); }
.cap-chip--transcription,
.cap-chip--audio         { --cap-color: var(--cap-audio); }
.cap-chip--tts           { --cap-color: var(--cap-tts); }

/* ---------- Applied list ---------- */

.applied-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-1);
}

.applied-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.6fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--duration-fast) var(--ease-out);
}

.applied-row:last-child { border-bottom: 0; }
.applied-row:hover { background: var(--surface-2); }

.applied-row__model {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.applied-row__model-icon {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  flex: 0 0 auto;
}

.applied-row__model-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.applied-row__recipe {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  min-width: 0;
}

.applied-row__recipe-name {
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}

.applied-row__actions {
  display: flex;
  gap: var(--space-2);
}

/* ---------- Dropdown (Import menu) ---------- */

.dropdown {
  position: relative;
}

.dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.dropdown__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  padding: var(--space-1);
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  z-index: 20;
}

.dropdown__menu[hidden] { display: none; }

.dropdown__item {
  text-align: left;
  padding: 8px var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.dropdown__item:hover {
  background: var(--surface-3);
  color: var(--text-primary);
}

/* ---------- Scrim + Slide-over ---------- */

.scrim {
  position: fixed;
  inset: 0;
  background: var(--surface-overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out);
  z-index: 50;
}

.scrim.is-open {
  opacity: 1;
  pointer-events: auto;
}

.slideover {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--slide-over-width);
  max-width: 90vw;
  height: 100vh;
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  border-left: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform var(--duration-base) var(--ease-out);
  z-index: 51;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.slideover.is-open { transform: translateX(0); }

.slideover__head {
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.slideover__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.slideover__title-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.slideover__title {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

.slideover__title-input {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: var(--space-1) var(--space-2);
  width: 100%;
  font-family: inherit;
}

.slideover__title-input:focus {
  outline: none;
  border-color: var(--accent-fg);
}

.slideover__desc-input {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  padding: var(--space-2);
  font-size: var(--text-sm);
  font-family: inherit;
  resize: vertical;
  margin-top: var(--space-2);
}

.slideover__desc-input:focus {
  outline: none;
  border-color: var(--accent-fg);
}

.slideover__close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--text-tertiary);
  transition: background var(--duration-fast) var(--ease-out);
}

.slideover__close:hover {
  background: var(--surface-3);
  color: var(--text-primary);
}

.slideover__desc {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.slideover__body {
  padding: var(--space-5);
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.slideover__section h3 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: var(--weight-semibold);
}

.slideover__foot {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* ---------- Recipe badge ---------- */

/* ---------- Form controls (slider, select, input) ---------- */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  margin-top: var(--space-3);
}

.field:first-child { margin-top: 0; }

.field__label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: var(--weight-semibold);
}

.field__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.field__row .slider { flex: 1; }
.field__row .select { flex: 1; }

.field__value {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-primary);
  min-width: 56px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--surface-3);
  border-radius: var(--radius-pill);
  outline: none;
  cursor: pointer;
  accent-color: var(--accent-fg);
}

[data-theme="light"] .slider {
  background: var(--surface-2);
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 0;
  box-shadow: 0 0 0 4px transparent;
  transition: box-shadow var(--duration-fast) var(--ease-out);
  cursor: pointer;
}

.slider::-webkit-slider-thumb:hover { box-shadow: 0 0 0 4px var(--accent-soft); }
.slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--accent-strong); }

.slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 0;
  cursor: pointer;
}

.select,
.input,
.textarea {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-primary);
  font-family: var(--font-sans);
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}

.select,
.input {
  display: inline-flex;
  align-items: center;
  height: var(--control-height-sm);
  padding: 0 var(--space-3);
}

.textarea {
  display: block;
  width: 100%;
  min-height: calc(2 * var(--control-height-lg));
  padding: var(--space-3);
  resize: vertical;
  line-height: var(--leading-normal);
}

select,
.select {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--surface-1);
  background-image: var(--select-chevron);
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: var(--space-6);
  cursor: pointer;
}

select:hover,
.select:hover,
.input:hover,
.textarea:hover {
  border-color: var(--border-strong);
  background-color: var(--surface-2);
}

select:focus-visible,
select:focus,
.select:focus-visible,
.select:focus,
.input:focus-visible,
.textarea:focus-visible {
  border-color: var(--accent-fg);
  outline: none;
  background-color: var(--surface-2);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

select:disabled,
.select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

option, select option, optgroup option {
  background-color: var(--surface-2);
  color: var(--text-primary);
  padding: 8px 12px;
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  min-height: 32px;
}

option:hover,
option:focus,
option:active,
option:checked {
  background-color: var(--surface-3);
  color: var(--text-primary);
}

optgroup {
  background-color: var(--surface-1);
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 6px 10px 4px;
}

/* Custom Select Component (Styled Dropdown Popover for Web & Desktop) */
.custom-select {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.custom-select__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  height: var(--control-height-sm);
  padding: 0 var(--space-3);
  background-color: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  cursor: pointer;
  user-select: none;
  transition: border-color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.custom-select--sm .custom-select__trigger {
  height: var(--control-height-xs);
  padding: 0 var(--space-2);
  font-size: var(--text-xs);
  border-radius: var(--radius-md);
}

.custom-select__trigger:hover:not(:disabled) {
  background-color: var(--surface-2);
  border-color: var(--border-strong);
}

.custom-select__trigger:focus-visible,
.custom-select.is-open .custom-select__trigger {
  outline: none;
  border-color: var(--accent-fg);
  background-color: var(--surface-2);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.custom-select.is-disabled .custom-select__trigger {
  opacity: 0.5;
  cursor: not-allowed;
}

.custom-select__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-select__chevron {
  flex-shrink: 0;
  color: var(--text-tertiary);
  transition: transform var(--duration-fast) var(--ease-out);
}

.custom-select.is-open .custom-select__chevron {
  transform: rotate(180deg);
  color: var(--accent-fg);
}

/* Custom Select Popover Menu */
.custom-select__popover {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  min-width: 100%;
  max-height: 240px;
  overflow-y: auto;
  z-index: 1000;
  padding: var(--space-1);
  background-color: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  scrollbar-gutter: stable;
}

.custom-select__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-1-5) var(--space-3);
  background: transparent;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.custom-select__option:hover:not(.is-disabled) {
  background-color: var(--surface-3);
  color: var(--text-primary);
}

.custom-select__option.is-selected {
  background-color: color-mix(in srgb, var(--accent-fg) 16%, var(--surface-2));
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}

.custom-select__option.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.custom-select__checkmark {
  color: var(--accent-fg);
  flex-shrink: 0;
}

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

/* ===================================================================
 * Backend Manager — extended styles
 * =================================================================== */

.backends {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.backends__head {
  padding: var(--space-6) var(--space-8) var(--space-4);
}

.backends__toggle {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}

.backends__toast,
.manager__toast {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  color: var(--text-primary);
  z-index: 100;
  animation: toast-in var(--duration-base) var(--ease-out);
}

.manager__toast--external-model,
.manager__toast--sync {
  width: min(560px, calc(100vw - var(--space-8)));
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  line-height: var(--leading-normal);
}

.manager__toast-message {
  flex: 1;
  min-width: 0;
}

.manager__toast-dismiss,
.manager__toast-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  cursor: pointer;
  font: inherit;
}

.manager__toast-dismiss:hover,
.manager__toast-action:hover {
  background: var(--surface-3);
}

.manager__toast-action {
  flex: 0 0 auto;
  height: 30px;
  padding: 0 var(--space-3);
  background: transparent;
  white-space: nowrap;
}

.manager__toast-dismiss {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  padding: 0;
  background: transparent;
  color: var(--text-tertiary);
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Banner */
.banner {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

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

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

.banner__icon { font-size: 16px; }
.banner__text { flex: 1; color: var(--text-primary); }

/* Matrix table */
.matrix {
  margin: var(--space-5) var(--space-8);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: auto;
  flex: 1;
  background: var(--surface-1);
  position: relative;
  max-width: calc(100% - var(--space-8) * 2);
  box-shadow: inset -22px 0 24px -26px var(--text-primary);
}

.matrix table {
  width: 100%;
  border-collapse: collapse;
  min-width: 920px;
  table-layout: fixed;
}

.matrix th,
.matrix td {
  padding: var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}

.matrix tbody tr:last-child th,
.matrix tbody tr:last-child td { border-bottom: 0; }

.matrix th {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: var(--text-tertiary);
  background: var(--surface-base);
}

.matrix th[scope="row"] {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  text-transform: none;
  letter-spacing: var(--tracking-tight);
  min-width: 100px;
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface-1);
  box-shadow: 1px 0 0 var(--border-subtle);
}

.matrix td:not(.matrix__empty) {
  font-size: var(--text-sm);
}

.matrix__empty {
  color: var(--text-disabled);
  font-style: italic;
  font-size: var(--text-xs);
}

/* Cell within matrix */
.cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-height: 82px;
  justify-content: space-between;
}

.cell + .cell {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.cell__name {
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.cell__name--experimental {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--warn);
}

.cell__experimental-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  color: var(--warn);
  cursor: help;
  opacity: 0.82;
}

.cell__badge {
  font-size: var(--type-overline-size);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  align-self: flex-start;
}

.cell__badge--ok {
  background: var(--success-soft);
  color: var(--success);
}

.cell__badge--available {
  background: var(--accent-soft);
  color: var(--accent-fg);
}

.cell__badge--warn {
  background: var(--warn-soft);
  color: var(--warn);
}

.cell__badge--off {
  background: var(--surface-3);
  color: var(--text-disabled);
}

.cell__sha {
  display: none;
  font-size: var(--type-overline-size);
  color: var(--text-disabled);
  font-family: var(--font-mono);
}

.show-tech .cell__sha { display: block; }

.cell__device-detail {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  margin-top: 2px;
  display: none;
}

.show-tech .cell__device-detail { display: block; }

.cell__actions {
  position: relative;
  z-index: 1;
  display: flex;
  gap: var(--space-1);
  margin-top: var(--space-1);
}

.cell__download-progress {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  width: 100%;
}

.cell__download-progress-track {
  flex: 1;
  min-width: 72px;
  height: 6px;
  border-radius: 3px;
  background: var(--surface-3);
  overflow: hidden;
}

.cell__download-progress-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
  transition: width 0.3s var(--ease-out);
}

.cell__download-progress-text {
  min-width: 34px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent-fg);
}

.cell__download-error {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--danger);
  overflow-wrap: anywhere;
}

/* ===================================================================
 * Slideover hint label
 * =================================================================== */

/* Smaller cap chip variant */
.cap-chip--sm {
  font-size: var(--type-overline-size);
  padding: 1px 6px;
}

/* ---------- Empty state inset ---------- */

.empty-state--inset {
  margin: var(--space-3) 0 0;
  padding: var(--space-8) var(--space-4);
}

/* ---------- Context rails: Models / Backends ---------- */
.manager--with-rail,
.backends--with-rail {
  display: grid;
  grid-template-columns: 284px minmax(0, 1fr);
  grid-template-rows: 1fr;
  height: 100%;
  overflow: hidden;
}

.manager--with-rail.context-rail-collapsed,
.backends--with-rail.context-rail-collapsed {
  grid-template-columns: 56px minmax(0, 1fr);
}

.manager__main {
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
}

.context-rail {
  min-width: 0;
  min-height: 0;
  border-right: 1px solid var(--border-subtle);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 92%, transparent), var(--surface-base));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.context-rail__body {
  padding: var(--space-4);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.context-rail__hint {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
}

.context-rail.is-collapsed .context-rail__title-wrap,
.context-rail.is-collapsed .context-rail__body {
  display: none;
}

.context-rail.is-collapsed .context-rail__head {
  justify-content: center;
  padding-inline: var(--space-2);
}
.auto-run-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.auto-run-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  color: var(--text-secondary);
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.auto-run-card:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
}
.auto-run-card.is-active,
.cell.is-selected {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border-strong));
  background: var(--accent-soft);
}
.auto-run-card__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
}
.auto-run-card__text strong {
  color: var(--text-primary);
  font-size: var(--text-sm);
}
.auto-run-card__text span {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}
.context-rail__notice {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  padding: var(--space-3);
}

.context-rail__notice { color: var(--accent-fg); font-size: var(--text-xs); }

.auto-run-card {
  overflow: hidden;
  position: relative;
}

.auto-run-card:hover .auto-run-card__delete,
.auto-run-card:focus-within .auto-run-card__delete,
.auto-run-card__delete:focus {
  opacity: 1;
}

.auto-run-card__main {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  text-align: left;
}

.auto-run-card__icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--surface-3);
}

@keyframes card-flash {
  0% {
    border-color: var(--accent-fg);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent);
  }
  100% {
    border-color: var(--border-subtle);
    box-shadow: none;
  }
}

/* Overlay button for keyboard + SR selection (#2343).
 * Covers the full cell area; action buttons sit above it via z-index. */

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .chat {
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "composer";
  }
  .rail { display: none; }
  .manager--with-rail, .backends--with-rail { grid-template-columns: 1fr; }
  .context-rail { display: none; }
  .manager__main { height: 100%; }
  .chat__inner { padding: var(--space-5) var(--space-4); overflow-x: hidden; }
  .composer { padding: var(--space-3) var(--space-4); }
  .manager__custom-actions .btn { flex: 1; justify-content: center; }
  .detail__grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .row__right { gap: var(--space-1); }
  .row__progress { min-width: 100px; }
  .hero { padding: var(--space-8) 0 var(--space-6); }
  .hero__title { font-size: var(--text-2xl); }
  .hero__subtitle { font-size: var(--text-base); }
  .chips { gap: var(--space-1); }
  .chip { padding: 8px var(--space-3); font-size: var(--text-xs); }
  .active-models { grid-template-columns: 1fr; }
  .applied-row { grid-template-columns: 1fr; gap: var(--space-2); }
  .backends__head { padding: var(--space-5) var(--space-4) var(--space-3); }
  .matrix { margin: var(--space-3) var(--space-4); }
  .matrix th, .matrix td { padding: var(--space-3); }
}

/* ---------- 480px — phone --------------------------------- */
@media (max-width: 480px) {

  /* ── Composer: keep primary and add actions at 44 px touch targets ── */
  .composer__send,
  .composer__stop,
  .composer__add-trigger {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }

  .composer__thinking-trigger {
    height: 44px;
  }

  /* ── Composer toolbar: allow wrapping on very narrow screens ── */
.composer__toolbar {
    flex-wrap: wrap;
    gap: var(--space-2); max-width: 100%;
  }

  /* ── Composer: safe-area padding so it clears iPhone home indicator ── */
  .composer {
    padding: var(--space-2) var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  }

  /* ── Composer bar: full width, no max-width constraint ── */
  .composer__bar { max-width: 100%; }

  /* ── Model selector: truncate aggressively so bar doesn't overflow ── */
.composer__model-button {

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 50vw;
  }

  /* ── Prevent iOS Safari auto-zoom on input focus (requires font-size >= 16px) ── */
  .composer__model-search input,

  .composer__input,
  input, textarea, select {
    font-size: 16px !important;
  }

  /* ── BackendManager: tighten ── */
  .backends__head { padding: var(--space-4) var(--space-3) var(--space-3); }

  /* ── Connect view: reduce horizontal padding on phone ── */
  .connect { padding: 0 var(--space-4); }

  /* ── Slide-over: full-width on phone ── */
  .slideover { width: 100vw; max-width: 100vw; }

  /* ── Hero greeting: tighten vertical space ── */
  .hero { padding: var(--space-3) 0 var(--space-2); }

  /* ── Filter chips: allow wrapping in ModelManager toolbar ── */

  /* ── Model card: stack vertically on phone ────────────────
        Row-level grid switches from side-by-side to column;
        actions move to a full-width strip at the bottom.    ── */
  .row__summary {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    padding: var(--space-3);
  }
  .row__content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }
  .row__main {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .row__text { min-width: 0; flex: 1 1 0; }
  .row__name { white-space: normal; overflow-wrap: anywhere; }
  .row__right {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .row__action { flex: 1 1 auto; justify-content: center; }

  /* ── Chat: collapse rail column so full width is usable ── */
  .chat,
  .chat.rail-expanded {
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "composer";
  }
  .rail { display: none; }

  /* ── Chat inner: use smaller padding ── */
  .chat__inner { padding: var(--space-4) var(--space-3); }

  /* ── Active-model cards in hero: more compact on phone ── */
  .active-card { padding: var(--space-3); gap: var(--space-2); }
  .active-card__name { font-size: var(--text-sm); }

  /* ── Hero title/subtitle: tighten for mobile ── */
  .hero__title { font-size: var(--text-xl); }
  .hero__subtitle { font-size: var(--text-sm); }

  /* ── Section labels (e.g. "LOADED RIGHT NOW"): smaller ── */
  .section-label { font-size: var(--type-overline-size); margin-bottom: var(--space-2); }

  /* ── Composer pills row: smaller font + tighter padding to reduce chrome ── */
  .composer__toolbar .btn,
  .composer__toolbar .chip,
  .composer__toolbar button {
    font-size: var(--text-xs);
    padding: 4px var(--space-2);
  }

  /* ── Model selector in composer: cap width more aggressively ── */

  /* ── Right controls: slightly tighter gap on phone ── */
.titlebar__right { gap: var(--space-1); }
}

/* ─────────────────────────────────────────────────────────
   MONITOR v2
   ───────────────────────────────────────────────────────── */

.dash2 {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--surface-base);
}

/* ── Top bar ───────────────────────────────────────────── */

.dash2-bar__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: all 0.3s;
}
.dash2-bar__dot[data-connected="true"] {
  background: var(--success);
  box-shadow: 0 0 8px var(--success);
}

.dash2-bar__btn.is-paused { color: var(--accent-fg); border-color: var(--accent-fg); }

.dash2-err {
  padding: var(--space-2) var(--space-5);
  background: var(--danger-soft);
  border-bottom: 1px solid color-mix(in srgb, var(--danger) 25%, transparent);
  color: var(--danger);
  font-size: var(--text-sm);
}

/* ── Scroll area ───────────────────────────────────────── */

.dash2-scroll {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-6, 32px) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-5, 24px);
}

.dash2-scroll:focus-visible {
  outline-offset: -2px;
}

/* ── Cards ─────────────────────────────────────────────── */

.dash2-card {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.dash2-card--summary {
  background: var(--surface-2);
  border-color: var(--border);
}

.dash2-card__h {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.dash2-card__badge {
  font-size: var(--type-overline-size);
  color: var(--text-muted);
  font-weight: var(--weight-regular);
  text-transform: none;
  letter-spacing: 0;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
}

/* ── 2-column grid ─────────────────────────────────────── */

.dash2-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

.dash2-grid-2col > .dash2-card {
  display: flex;
  flex-direction: column;
}

/* ── Hero throughput stats ─────────────────────────────── */

/* ── Area charts ───────────────────────────────────────── */

/* ── Gauges ─────────────────────────────────────────────── */

.dash2-gauges {
  display: flex;
  gap: var(--space-5);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.dash2-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 120px;
  padding-bottom: var(--space-2);
}

.dash2-gauge__svg { display: block; }

.dash2-gauge__threshold line {
  stroke: var(--text-primary);
  stroke-width: 2.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 2px var(--surface-0));
}

.dash2-gauge__center {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 110px; height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-0-5);
}

.dash2-gauge__value {
  font-size: 1.2rem;
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.dash2-gauge__unit {
  font-size: 0.6rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.dash2-gauge__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  margin-top: var(--space-2);
  max-width: 100%;
  text-align: center;
  overflow-wrap: anywhere;
}

.dash2-gauge__sub {
  font-size: var(--type-overline-size);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  max-width: 100%;
  text-align: center;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* ── Inference tiles (vertical stack for side panel) ───── */

.dash2-inf {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-5) var(--space-3);
  background: var(--surface-2);
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
}

.dash2-inf__v {
  font-size: 1.6rem;
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.dash2-inf__l {
  font-size: var(--type-overline-size);
  color: var(--text-muted);
  margin-top: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Slot cards with per-slot graphs ────────────────────── */

/* ── Inference stats grid ──────────────────────────────── */

.dash2-inf-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

/* ── Model list ────────────────────────────────────────── */

/* The loaded-models card renders the shared selection list, so it inherits the
   row template rather than restating it. Only the card's own inset differs. */
.workspace-list.dash2-models {
  padding-inline: 0;
}

.dash2-empty {
  color: var(--text-muted);
  font-size: var(--text-sm);
  padding: var(--space-6) var(--space-4);
  text-align: center;
  font-style: italic;
}

/* ── Model capacity ────────────────────────────────────── */

.dash2-caps {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.dash2-cap {
  display: grid;
  grid-template-columns: 100px 1fr 50px;
  align-items: center;
  gap: var(--space-3);
}

.dash2-cap__type {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-transform: capitalize;
}

.dash2-cap__track {
  height: 8px;
  background: var(--surface-3);
  border-radius: 4px;
  overflow: hidden;
}

.dash2-cap__fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s ease-out;
}

.dash2-cap__label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── Session summary ───────────────────────────────────── */

.dash2-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.dash2-summary__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-3) 0;
}

.dash2-summary__val {
  font-size: 1.4rem;
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.dash2-summary__lbl {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Monitor inline-style replacements ───────────────── */

.dash2-hero-metrics {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.dash2-hero-metric {
  display: flex;
  align-items: baseline;
  gap: var(--space-1-5);
}

.dash2-hero-metric__val {
  font-size: 2rem;
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}
.dash2-hero-metric__val--tps    { color: var(--accent-fg); }
.dash2-hero-metric__val--pp     { color: var(--info); }
.dash2-hero-metric__val--stream { color: var(--success); }

.dash2-hero-metric__unit {
  font-size: 13px;
  color: var(--text-tertiary);
}

.dash2-hero-metric__peak {
  font-size: var(--text-xs);
  color: var(--accent-fg);
  opacity: 0.7;
}

.dash2-hero-metric__totals {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.dash2-chart-legend {
  display: flex;
  gap: var(--space-4);
  margin-top: 8px;
}

.dash2-chart-legend__item {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.dash2-chart-legend__swatch {
  width: 10px;
  height: 3px;
  border-radius: 2px;
}
.dash2-chart-legend__swatch--tps { background: var(--accent); }
.dash2-chart-legend__swatch--pp  { background: var(--info); }

.dash2-slot-legend {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: 12px;
}

.dash2-slot-legend__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
/* Idle items: use explicit lower-contrast tokens instead of opacity (opacity compositing fails WCAG contrast) */
.dash2-slot-legend__item--idle .dash2-slot-legend__label { color: var(--text-tertiary); }
.dash2-slot-legend__tps--active { color: var(--text-primary); }
.dash2-slot-legend__tps--idle   { color: var(--text-tertiary); }

.dash2-slot-legend__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dash2-slot-legend__label {
  font-size: 12px;
  color: var(--text-secondary);
}

.dash2-slot-legend__tps {
  font-size: 12px;
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.dash2-slot-legend__kv {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.dash2-mt-auto { margin-top: auto; }

/* ── Monitor responsive ──────────────────────────────── */

@media (max-width: 900px) {
  .dash2-grid-2col { grid-template-columns: 1fr; }
  .dash2-summary { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .dash2-scroll { padding: var(--space-4) var(--space-3); gap: var(--space-4); }
  .dash2-card { padding: var(--space-4); border-radius: 12px; }
  .dash2-gauges { justify-content: center; }
  .dash2-inf-grid { grid-template-columns: 1fr 1fr; }
  .dash2-cap { grid-template-columns: 80px 1fr 40px; }
}

/* ─────────────────────────────────────────────────────────
   LOG VIEWER
   ───────────────────────────────────────────────────────── */

.logs-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--surface-base);
}

/* ── Toolbar ───────────────────────────────────────────── */

.logs-toolbar__count {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ── Status dot ────────────────────────────────────────── */

.logs-status__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.logs-status--connected {
  background: var(--success);
  box-shadow: 0 0 6px var(--success);
}

.logs-status--connecting {
  background: var(--warn);
  animation: pulse-dot 1.2s ease-in-out infinite;
}

.logs-status--error {
  background: var(--danger);
}

.logs-status--disconnected {
  background: var(--text-muted);
}

.logs-status__label {
  font-size: 0.8rem;
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
}

/* ── Search ────────────────────────────────────────────── */

.logs-search {
  width: 100%;
  height: 30px;
  padding: 0 var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-size: 0.8rem;
  color: var(--text-primary);
  transition: border-color 0.15s;
}

.logs-search::placeholder {
  color: var(--text-muted);
}

.logs-search:focus {
  border-color: var(--accent-fg);
  outline: none;
}

/* ── Level selectors ───────────────────────────────────── */

.logs-level {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  cursor: default;
}

.logs-level__label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.logs-level__select {
  height: var(--control-height-xs);
  padding: 0 var(--space-5) 0 var(--space-2);
  background-color: var(--surface-2);
  background-image: var(--select-chevron);
  background-repeat: no-repeat;
  background-position: right var(--space-2) center;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--text-primary);
  cursor: pointer;
}

.logs-level__select option {
  background: var(--surface-2);
  color: var(--text-primary);
}

/* ── Log output ────────────────────────────────────────── */

.logs-output {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: var(--space-2) 0;
  background: var(--surface-base);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.55;
}

.logs-empty {
  padding: var(--space-6);
  text-align: center;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 0.85rem;
}

/* ── Log line ──────────────────────────────────────────── */

.logs-line {
  display: flex;
  align-items: baseline;
  min-width: 100%;
  width: max-content;
  height: 22px;
  padding: 1px var(--space-3);
  gap: var(--space-2);
  border-left: 2px solid transparent;
  box-sizing: border-box;
  overflow: hidden;
}

.logs-line:hover {
  background: var(--surface-alpha-02);
}

.logs-line__time {
  color: var(--text-muted);
  flex-shrink: 0;
  width: 96px;
  font-variant-numeric: tabular-nums;
}

.logs-line__badge {
  flex-shrink: 0;
  width: 28px;
  text-align: center;
  font-weight: var(--weight-semibold);
  font-size: 0.65rem;
  text-transform: uppercase;
  border-radius: 2px;
  padding: 0 2px;
}

.logs-line__tag {
  color: var(--info);
  flex-shrink: 0;
  min-width: 60px;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.logs-line__text {
  flex: 0 0 auto;
  overflow: visible;
  color: var(--text-primary);
  text-overflow: clip;
  white-space: pre;
  word-break: normal;
}

/* Severity colors */
.log-trace { border-left-color: var(--text-muted); }
.log-trace .logs-line__badge { color: var(--text-muted); background: var(--surface-alpha-1); }
.log-trace .logs-line__text { color: var(--text-muted); }

.log-debug { border-left-color: var(--info); }
.log-debug .logs-line__badge { color: var(--info); background: var(--info-soft); }

.log-info { border-left-color: var(--success); }
.log-info .logs-line__badge { color: var(--success); background: var(--success-soft); }

.log-warn { border-left-color: var(--warn); }
.log-warn .logs-line__badge { color: var(--warn); background: var(--warn-soft); }
.log-warn .logs-line__text { color: var(--warn); }

.log-error { border-left-color: var(--danger); }
.log-error .logs-line__badge { color: var(--danger); background: var(--danger-soft); }
.log-error .logs-line__text { color: var(--danger); }

.log-fatal { border-left-color: var(--danger); }
.log-fatal .logs-line__badge { color: var(--danger-on); background: var(--danger); }
.log-fatal .logs-line__text { color: var(--danger); font-weight: var(--weight-semibold); }

/* ── Jump to bottom ────────────────────────────────────── */

.logs-jump {
  position: absolute;
  bottom: var(--space-5);
  left: 50%;
  transform: translateX(-50%);
  box-shadow: var(--shadow-md);
  z-index: 10;
}

/* ── Log viewer responsive ─────────────────────────────── */

@media (max-width: 768px) {
  .logs-line { padding: 1px var(--space-2); }
  .logs-line__time { width: 70px; font-size: 0.7rem; }
  .logs-line__tag { display: none; }
}

@media (max-width: 480px) {
  .logs-line__time { width: 56px; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Interactive options blocks
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.options-block {
  margin: var(--space-3) 0;
  padding: var(--space-3);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.options-block__question {
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-2);
  color: var(--text-primary);
}

.options-block__choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.options-block__btn {
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.options-block__btn:hover {
  background: var(--accent);
  color: var(--accent-on);
  border-color: var(--accent-fg);
}

.options-block__btn:active {
  transform: scale(0.97);
}

.options-block__btn--selected {
  background: var(--accent);
  color: var(--accent-on);
  border-color: var(--accent-fg);
  cursor: default;
}

.options-block__btn--selected:hover {
  background: var(--accent);
  color: var(--accent-on);
  border-color: var(--accent-fg);
}

.options-block__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.options-block__confirmation {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: var(--space-1);
}

.options-block__custom {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.options-block__input {
  flex: 1;
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  font-size: 0.85rem;
  outline: none;
}

.options-block__input:focus {
  border-color: var(--accent-fg);
}

.options-block__submit {
  background: var(--accent);
  color: var(--accent-on);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
  font-size: 0.85rem;
  cursor: pointer;
  font-weight: var(--weight-medium);
}

.options-block__submit:hover {
  opacity: 0.9;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Image attachments in composer
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.composer__images {
  width: 100%;
  max-width: var(--max-content-width);
  min-width: 0;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
}

.composer__image-thumb {
  position: relative;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
}

.composer__image-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.composer__image-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  background: var(--surface-overlay);
  color: var(--danger-on);
  border: none;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
}

.composer__image-thumb:hover .composer__image-remove {
  opacity: 1;
}

.composer__attach {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: var(--space-1);
  display: flex;
  align-items: center;
  transition: color 0.15s;
  flex-shrink: 0;
}

.composer__attach:hover {
  color: var(--text-primary);
}

.composer__attach:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.composer__add {
  position: relative;
  flex: 0 0 auto;
}

.composer__add-trigger {
  width: 38px;
  height: 38px;
  padding: 0;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--text-secondary);
  transition:
    color var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out);
}

.composer__add-trigger .app-icon {
  stroke-width: 2.25;
}

.composer__add-trigger:hover:not(:disabled),
.composer__thinking-trigger:hover:not(:disabled) {
  color: var(--text-primary);
  background: color-mix(
    in srgb,
    var(--text-primary) 7%,
    transparent
  );
}

.composer__add-trigger:focus-visible,
.composer__thinking-trigger:focus-visible {
  color: var(--text-primary);
  background: color-mix(
    in srgb,
    var(--text-primary) 7%,
    transparent
  );
}

.composer__add-trigger[aria-expanded='true'],
.composer__thinking-trigger[aria-expanded='true'] {
  color: var(--text-primary);
  background: color-mix(
    in srgb,
    var(--text-primary) 9%,
    transparent
  );
}

.composer__add-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + var(--space-2));
  z-index: var(--z-dropdown);
  width: min(460px, calc(100vw - 32px));
  max-height: min(620px, calc(100vh - 150px));
  overflow-y: auto;
  padding: var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
}

.composer__add-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}

.composer__add-row:hover:not(:disabled),
.composer__add-row.is-active {
  background: var(--surface-2);
}

.composer__add-row:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.composer__add-icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--text-secondary);
}

.composer__add-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.composer__add-text strong {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.composer__add-text small {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Images in user messages
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.message__images {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.message__image {
  max-width: 200px;
  max-height: 200px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  object-fit: contain;
  cursor: pointer;
  transition: opacity 0.15s;
}

.message__image:hover {
  opacity: 0.85;
}

/* -------------------------------------------------------------------
   Functional hardening additions for capability-aware prototype paths
   ------------------------------------------------------------------- */
.rail__privacy {
  margin: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-1);
}

.rail__privacy-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  cursor: pointer;
}

.rail__privacy-note {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.composer__mode-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  background: var(--surface-1);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.composer__mode-badge--chat { color: var(--success); background: var(--success-soft); }
.composer__mode-badge--image { color: var(--info); background: var(--info-soft); }
.composer__mode-badge--audio,
.composer__mode-badge--tts { color: var(--accent-fg); background: var(--accent-soft); }
.composer__mode-badge--embed,
.composer__mode-badge--rank,
.composer__mode-badge--model { color: var(--text-tertiary); background: var(--surface-2); }

.composer__files {
  max-width: var(--max-content-width);
  margin: 0 auto var(--space-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.composer__file-chip,
.message__file-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  padding: 5px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.composer__file-chip button {
  color: var(--text-tertiary);
  font-weight: var(--weight-bold);
}

.composer__file-chip button:hover { color: var(--danger); }

.message--error .message__avatar {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 28%, transparent);
}

.message--error .message__body {
  border-color: color-mix(in srgb, var(--danger) 22%, transparent);
}

.message--error .markdown-body,
.message--error .message__content {
  color: var(--text-primary);
}

.message__audio {
  margin-top: var(--space-3);
}

.message__audio audio {
  width: min(100%, 420px);
}

.message__images--generated {
  margin-top: var(--space-3);
  margin-bottom: 0;
}

.message__image--generated {
  max-width: min(100%, 512px);
  max-height: 512px;
}

.active-card__status--muted {
  background: var(--surface-3);
  color: var(--text-tertiary);
}

.form-field__hint {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.connect__checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  cursor: pointer;
}

.connect__error,
.connect__notice {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.connect__error {
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  background: var(--danger-soft);
  color: var(--danger);
}

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

.connect__section--directories .connect__notice {
  margin-top: var(--space-1);
}

.dash2-card--notice {
  border-style: dashed;
  background: var(--surface-2);
}

.dash2-card__text {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.banner--error {
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
}

.banner--error .banner__action {
  background: color-mix(in srgb, var(--danger) 18%, transparent);
  color: var(--danger);
}

.banner--error .banner__action:hover { background: color-mix(in srgb, var(--danger) 28%, transparent); }

.cell__message {
  display: block;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

.matrix--empty {
  padding: var(--space-6);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

.hf-zone__empty--error {
  color: var(--danger);
  background: var(--danger-soft);
  border-top: 1px solid color-mix(in srgb, var(--danger) 24%, transparent);
}

.composer__mode-badge--omni, .cap-badge--omni, .cap-chip--omni, .rail__model-badge--omni { color: var(--cap-omni); background: color-mix(in srgb, var(--cap-omni) 18%, transparent); }

.manager__detail-form-panel {
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--surface-base);
  scrollbar-gutter: stable;
  container-type: inline-size;
}

.custom-model-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); padding: var(--space-3); }
.custom-model-form__grid label { display: grid; gap: var(--space-1); color: var(--text-secondary); font-size: var(--text-sm); }
.custom-model-form__field { grid-template-rows: auto var(--control-height-sm) minmax(var(--space-4), auto); }
.custom-model-form__field-spacer { min-width: 0; min-height: 1px; }
.custom-model-form__grid .input, .custom-model-form__grid .select { width: 100%; }
.custom-model-form__grid .textarea { min-height: 192px; font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--leading-relaxed); }
.custom-model-form__wide, .custom-model-form__error, .custom-model-form__actions, .custom-model-form__hint, .custom-model-form__prompt-actions { grid-column: 1 / -1; }
.custom-model-form__hint { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); color: var(--text-secondary); background: var(--surface-2); border: 1px solid var(--border-subtle); font-size: var(--text-sm); }
.custom-model-form__error { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); color: var(--danger); background: var(--danger-soft); border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent); font-size: var(--text-sm); }
.custom-model-form__textarea-field { grid-template-rows: auto minmax(192px, auto) minmax(16px, auto); }
.custom-model-form__prompt-actions span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The detail pane can become narrow independently of the viewport when the
   persisted model-list splitter is wide. Respond to the pane itself, not only
   to the window, so Edit settings never collapses into two unusable columns. */
@container (max-width: 560px) {
  .custom-model-form__grid { grid-template-columns: minmax(0, 1fr); }
}

.omni-component-picker { display: grid; gap: var(--space-1); min-width: 0; color: var(--text-secondary); font-size: var(--text-sm); }
.omni-component-picker__label { color: var(--text-secondary); }
.omni-component-picker__control { position: relative; min-width: 0; }
.omni-component-picker__control input { width: 100%; padding-right: 56px; }
.omni-component-picker__clear { position: absolute; top: 50%; right: 30px; width: 20px; height: 20px; transform: translateY(-50%); border: none; border-radius: var(--radius-pill); background: var(--surface-3); color: var(--text-secondary); cursor: pointer; line-height: 1; }
.omni-component-picker__clear:hover { background: var(--danger-soft); color: var(--danger); }
.omni-component-picker__chevron { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); color: var(--text-tertiary); pointer-events: none; }
.omni-component-picker__menu { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px); max-height: 320px; overflow: auto; padding: var(--space-2); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-lg); }
.omni-component-picker__group + .omni-component-picker__group { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--border-subtle); }
.omni-component-picker__group-label { padding: var(--space-1) var(--space-2); color: var(--text-tertiary); font-size: var(--text-xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.08em; }
.omni-component-picker__option { display: grid; width: 100%; gap: var(--space-0-5); padding: var(--space-2); border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--text-primary); text-align: left; cursor: pointer; }
.omni-component-picker__option:hover, .omni-component-picker__option--selected, .omni-component-picker__option--focused { border-color: var(--accent-soft); background: var(--surface-2); }
.omni-component-picker__option-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--weight-bold); }
.omni-component-picker__option-id { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); font-family: var(--font-mono); font-size: var(--text-xs); }
.omni-component-picker__option-detail, .omni-component-picker__help, .omni-component-picker__empty { color: var(--text-tertiary); font-size: var(--text-xs); }
.omni-component-picker__empty { padding: var(--space-3); line-height: 1.4; }
.omni-component-picker__hf-search { width: 100%; margin-top: var(--space-2); padding: var(--space-2); border: 1px dashed var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-1); color: var(--text-secondary); cursor: pointer; text-align: left; }
.omni-component-picker__hf-search:hover { border-color: var(--accent-fg); background: var(--accent-soft); color: var(--text-primary); }

/* Surgical prototype UI fixes: collapsed rail, copy/retry actions, high-context controls */
.chat:not(.rail-expanded) .rail__list,
.chat:not(.rail-expanded) .rail__privacy {
  display: none;
}

.chat:not(.rail-expanded) .rail__head,
.chat:not(.rail-expanded) .rail__new-wrap {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

.chat:not(.rail-expanded) .rail__new-wrap {
  display: flex;
}

.message__author-row,
.active-card__name-row,
.row__name-wrap,
.applied-row__model-name-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  min-width: 0;
  max-width: 100%;
}

.row__name-wrap,
.applied-row__model-name-wrap {
  display: flex;
}

.row__name-wrap .row__name,
.active-card__name-row .active-card__name,
.applied-row__model-name-wrap .applied-row__model-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.active-card__name-row .active-card__name {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.copy-inline {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-subtle);
  background: var(--surface-1);
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.copy-inline:hover:not(:disabled) {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.copy-inline:disabled {
  opacity: 0.35;
  cursor: default;
}

.copy-inline--copied {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 45%, transparent);
  background: var(--success-soft);
}

.message__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.message__action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px var(--space-2);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  background: var(--surface-1);
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.message__action:hover:not(:disabled) {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.message__action:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Keep the collapsed conversations toggle available and visible. */
.chat:not(.rail-expanded) .rail__head {
  display: flex;
  visibility: visible;
  flex: 0 0 auto;
  min-height: 56px;
}

.chat:not(.rail-expanded) .rail__toggle {
  display: flex;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  color: var(--text-primary);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  position: relative;
  z-index: 2;
}

.chat:not(.rail-expanded) .rail__toggle:hover {
  background: var(--surface-3);
  border-color: var(--border-strong);
}

.chat:not(.rail-expanded) .rail__title {
  display: none;
}

.row__label--custom {
  margin-left: 2px;
  background: var(--accent-soft);
  color: var(--accent-fg);
  flex-shrink: 0;
}

/* ---------- Image mode composer settings ---------- */
.composer__image-settings {
  max-width: var(--max-content-width);
  margin: 0 auto var(--space-2);
  display: grid;
  grid-template-columns: minmax(112px, 1.1fr) repeat(5, minmax(82px, 0.8fr)) minmax(112px, 1.1fr);
  gap: var(--space-2);
  padding: var(--space-3);
  background: color-mix(in srgb, var(--surface-1) 92%, transparent);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
}

.composer__image-setting {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  position: relative;
}

.composer__image-setting span {
  font-size: var(--type-overline-size);
  line-height: 1;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--weight-semibold);
}

.composer__image-setting input,
.composer__image-setting select {
  width: 100%;
  min-height: 36px;
  color: var(--text-primary);
  background: var(--surface-0);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0 var(--space-3);
  font: inherit;
  font-size: var(--text-sm);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out);
}

.composer__image-setting select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23807a6c'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

.composer__image-setting input:focus,
.composer__image-setting select:focus {
  border-color: var(--accent-fg);
  background: var(--surface-2);
}

.composer__image-setting input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.composer__image-setting input[type=number]::-webkit-outer-spin-button,
.composer__image-setting input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.composer__image-setting input:disabled,
.composer__image-setting select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (max-width: 1100px) {
  .composer__image-settings {
    grid-template-columns: repeat(4, minmax(96px, 1fr));
  }
}

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

/* Split-pane chat can be narrow even on a wide desktop viewport. Reflow image
   controls from the width of the composer shell itself, not window width. */
@container composer-settings (max-width: 700px) {
  .composer__image-settings {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-1-5);
    padding: var(--space-2);
  }
}

@container composer-settings (max-width: 460px) {
  .composer__image-settings {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .composer__image-setting input,
  .composer__image-setting select {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }

  .composer__image-setting select {
    padding-right: 24px;
    background-position: right 8px center;
  }
}

/* Live realtime transcription in audio mode */
.composer__mic {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--surface-2);
  color: var(--text-secondary);
  flex-shrink: 0;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              opacity var(--duration-fast);
}

.composer__mic:hover:not(:disabled) {
  color: var(--text-primary);
  border-color: var(--accent-fg);
}

.composer__mic:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.composer__mic--recording {
  background: var(--danger-soft);
  border-color: color-mix(in srgb, var(--danger) 42%, transparent);
  color: var(--danger);
}

.composer__live {
  max-width: var(--max-content-width);
  margin: 0 auto var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  color: var(--text-secondary);
}

.composer__live--error {
  border-color: color-mix(in srgb, var(--danger) 28%, transparent);
  background: var(--danger-soft);
  color: var(--text-primary);
}

.composer__live-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
}

.composer__live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-tertiary);
  flex-shrink: 0;
}

.composer__live-dot--speaking {
  background: var(--danger);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 16%, transparent);
}

.composer__live-meter {
  width: 72px;
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  overflow: hidden;
}

.composer__live-meter span {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width 80ms linear;
}

.composer__live-text {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--text-primary);
  white-space: pre-wrap;
}

.composer__readiness-anchor { width: 100%; }

.composer__readiness {
  width: 100%;
  margin: 0;
  padding: 5px var(--space-3);
  border-radius: var(--radius-pill);
}

.composer__readiness .composer__live-head {
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.composer__readiness-icon { flex-shrink: 0; color: var(--text-tertiary); }

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

.composer__readiness .composer__live-meter { flex-shrink: 0; margin-left: auto; }
.composer__readiness .composer__live-meter span { border-radius: var(--radius-pill); }

.composer__readiness .composer__live-meter .is-indeterminate {
  width: 35%;
  animation: chat-readiness-pulse 1.2s ease-in-out infinite alternate;
}

@keyframes chat-readiness-pulse {
  from { transform: translateX(-100%); }
  to { transform: translateX(285%); }
}

@media (prefers-reduced-motion: reduce) {
  .composer__readiness .composer__live-meter .is-indeterminate { animation: none; }
}

.cap-chip__icon {
  width: 1.15em;
  min-width: 1.15em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cap-color);
  font-size: 0.95em;
  line-height: 1;
}

.input[type='number'] {
  color-scheme: dark;
  appearance: auto;
  -moz-appearance: auto;
}

.input[type='number']::-webkit-outer-spin-button,
.input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: auto;
  opacity: 1;
  margin: 0;
}
.cap-chip--all { --cap-color: var(--accent-fg); }

/* ---------- Integration polish: docs theme, searchable model picker, chat logs ---------- */
[data-theme="light"] .app {
  background: var(--surface-base);
}

[data-theme="dark"] .app,
:root:not([data-theme="light"]) .app {
  background: var(--surface-base);
}

[data-theme="light"] .titlebar,
[data-theme="light"] .titlebar__nav {
  background: var(--surface-titlebar);
}

[data-theme="light"] .titlebar__nav button.is-active {
  background: var(--accent-soft);
  color: var(--text-primary);
}

.capability-icon-pair {
  display: inline-flex;
  align-items: center;
  gap: var(--space-0-5);
  flex: 0 0 auto;
  line-height: 1;
}

.capability-icon-pair > svg + svg {
  opacity: 0.92;
}

.icon-inline,
.composer__tools-toggle svg,
.composer__model-button svg,
.composer__mode-badge svg,
.message__action svg,
.chip__icon svg,
.cap-badge svg,
.message__file-chip svg {
  flex: 0 0 auto;
}

.chat--with-logs {
  /* Logs are a real split pane between History and chat. The separator owns
     its grid column so LogViewer content cannot cover or clip the drag target. */
  grid-template-columns: var(--rail-collapsed) var(--chat-logs-width, 640px) var(--chat-logs-resizer-width, 12px) minmax(0, 1fr);
  grid-template-areas:
    "rail logs logs-resizer main"
    "rail logs logs-resizer composer";
}

.chat--with-logs.rail-expanded {
  grid-template-columns: var(--rail-expanded) var(--chat-logs-width, 640px) var(--chat-logs-resizer-width, 12px) minmax(0, 1fr);
}

/* Reclaim a little horizontal room while logs are open. The content remains
   aligned, but the narrower chat pane does not spend 48 px on outer gutters. */
.chat--with-logs .chat__inner {
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.chat--with-logs .composer {
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.chat__logs {
  grid-area: logs;
  position: relative;
  min-width: 0;
  min-height: 0;
  background: color-mix(in srgb, var(--surface-1) 90%, transparent);
  overflow: hidden;
}

.chat__logs-resizer {
  grid-area: logs-resizer;
  position: relative;
  align-self: stretch;
  min-width: var(--chat-logs-resizer-width, 12px);
  cursor: col-resize;
  z-index: 5;
  touch-action: none;
}

.chat__logs-resizer::after {
  content: "";
  position: absolute;
  left: 50%;
  top: var(--space-3);
  bottom: var(--space-3);
  width: 1px;
  transform: translateX(-50%);
  border-radius: var(--radius-pill);
  background: var(--border-subtle);
  transition: background var(--duration-fast) var(--ease-out),
              width var(--duration-fast) var(--ease-out);
}

.chat__logs-resizer:hover::after,
.chat__logs-resizer:focus-visible::after,
.is-resizing-chat-logs .chat__logs-resizer::after {
  width: 2px;
  background: var(--accent-fg);
}

.chat__logs-resizer:focus-visible {
  outline: 2px solid var(--accent-focus);
  outline-offset: -2px;
}

.is-resizing-chat-logs {
  cursor: col-resize;
  user-select: none;
}

.is-resizing-chat-logs .chat {
  transition: none;
}

.chat__logs .logs-view {
  height: 100%;
  min-height: 0;
}

.chat__logs .logs-view__panel {
  height: calc(100% - 132px);
}

.composer__model-picker {

  position: relative;
}

.composer__model-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: max-content;
  min-width: 220px;
  max-width: min(420px, 46vw);
}

.composer__model-stack > .composer__model-button {
  width: 100%;
  max-width: 100%;
}

.composer__model-button {
  min-width: 220px;
  max-width: min(420px, 46vw);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.composer__model-button:hover,
.composer__model-button[aria-expanded="true"] {
  background: var(--surface-2);
  border-color: var(--border-strong);
}

.composer__model-button-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
}

.composer__model-mode {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1;
  white-space: nowrap;
}

.composer__model-mode--chat { color: var(--cap-chat); }
.composer__model-mode--image { color: var(--cap-image); }
.composer__model-mode--audio { color: var(--cap-audio); }
.composer__model-mode--tts { color: var(--cap-tts); }
.composer__model-mode--omni { color: var(--cap-omni); }
.composer__model-mode--router { color: var(--cap-router); }
.composer__model-mode--audio-gen { color: var(--cap-audio-generation); }
.composer__model-mode--model3d { color: color-mix(in srgb, var(--cap-model3d) 75%, var(--text-primary)); }
.composer__model-mode--embed { color: var(--cap-embedding); }
.composer__model-mode--rank { color: var(--cap-reranking); } .composer__model-mode--classify { color: var(--cap-classification); }
.composer__model-mode--model { color: var(--text-tertiary); }

.composer__model-mode svg {
  color: currentColor;
}

/* Small task icons need more visual weight than the default 1px glyph stroke.
   Keep task identity on the icon even when small task text is contrast-adjusted. */
.cap-badge .app-icon,
.composer__model-mode .app-icon {
  stroke-width: 2;
}

.cap-badge--model3d .app-icon,
.composer__model-mode--model3d .app-icon {
  color: var(--cap-model3d);
}

.composer__model-button-caret {
  margin-left: auto;
  color: var(--text-tertiary);
}

.composer__model-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + var(--space-2));
  width: min(520px, 90vw);
  z-index: 40;
  padding: var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
  box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
}

.composer__model-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  color: var(--text-tertiary);
}

.composer__model-search input {
  flex: 1;
  min-width: 0;
  color: var(--text-primary);
}

.workspace-list.composer__model-results {
  margin-top: var(--space-2);
  max-height: 320px;
  /* The popover frame supplies the outer inset; this is the gap the scrollbar
     needs so it never sits against a row's edge. Reserved either way, so the
     list does not shift as results filter down past the scroll threshold. */
  padding-inline: 0 var(--space-2);
  scrollbar-gutter: stable;
}

.composer__model-empty,
.composer__model-error {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.composer__model-loading-bar {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--accent-fg) 30%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-1));
  color: var(--accent-fg);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.composer__model-button-badge {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-weight: var(--weight-regular);
  flex-shrink: 0;
}

.composer__model-error {
  margin-top: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  color: var(--danger);
  background: var(--danger-soft);
}

.composer__mode-badge--interactive {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  border-style: solid;
}

.composer__mode-badge--interactive:hover,
.composer__mode-badge--interactive:focus-visible,

.composer__tools-toggle:hover,
.composer__tools-toggle:focus-visible {
  transform: translateY(-1px);
  border-color: var(--border-strong);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-fg) 18%, transparent);
}

.composer__tools-toggle:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
  box-shadow: none;
}

.composer__attach,
.composer__thinking,
.composer__mic,
.composer__send,
.composer__stop {
  align-self: center;
}

.composer__file-chip span,
.message__file-chip,
.cap-badge,
.manager__filter-icon,
.hf-zone__empty,
.custom-model-form__error,
.banner__icon {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

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

.message__edit-input {
  width: 100%;
  min-width: min(520px, 100%);
  resize: vertical;
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  color: var(--text-primary);
  line-height: var(--leading-normal);
}

.message__edit-input:focus {
  border-color: var(--accent-fg);
  background: var(--surface-2);
}

.message__edit-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.matrix::after {
  content: "Scroll horizontally for more backends";
  position: sticky;
  left: calc(100% - 210px);
  bottom: var(--space-2);
  float: right;
  margin: var(--space-2);
  padding: 3px var(--space-2);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  background: var(--surface-glass);
  color: var(--text-tertiary);
  font-size: var(--type-overline-size);
  pointer-events: none;
}

.matrix thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.matrix thead th:first-child {
  left: 0;
  z-index: 3;
}

@media (max-width: 768px) {
  .chat.chat--with-logs.rail-expanded,
  .chat.chat--with-logs:not(.rail-expanded) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(220px, 40%) minmax(0, 1fr) auto;
    grid-template-areas:
      "logs"
      "main"
      "composer";
  }

  .chat__logs {
    border-right: 0;
    border-bottom: 1px solid var(--border-subtle);
  }

  .chat__logs-resizer {
    display: none;
  }
}

/* ===== Mobile bottom sheet for conversations ===== */
.bottom-sheet-backdrop {
  display: none;
}

.bottom-sheet {
  display: none;
}

@media (max-width: 768px) {
  .bottom-sheet-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: var(--surface-overlay);
    z-index: 900;
    animation: fadeIn 200ms ease-out;
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .bottom-sheet {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 80vh;
    background: var(--surface-1);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    z-index: 901;
    transform: translateY(100%);
    transition: transform 280ms ease-out;
    box-shadow: var(--shadow-top);
    overflow: hidden;
  }

  .bottom-sheet--open {
    transform: translateY(0);
  }

  .bottom-sheet__handle {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 0 8px;
    cursor: grab;
    touch-action: none;
  }

  .bottom-sheet__handle-pill {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--text-tertiary);
    opacity: 0.5;
  }

  .bottom-sheet__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 0 var(--space-3) var(--space-3);
  }

  .bottom-sheet__header strong {
    color: var(--text-primary);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
  }

  .bottom-sheet__new {
    align-self: stretch;
    margin: 0 var(--space-3) var(--space-2);
  }

  .workspace-list.bottom-sheet__list {
    flex: 1;
    -webkit-overflow-scrolling: touch;
    padding: 0 var(--space-2) var(--space-4);
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* All UI glyphs come from lucide-react or Simple Icons. Keep their native
   viewBox geometry intact and align the root SVG consistently across browsers. */
.app-icon {
  display: block;
  flex: 0 0 auto;
  overflow: visible;
  vertical-align: middle;
}

.app-icon[data-icon='eject'] {
  stroke-width: 2;
}

/* Fix model action icon vertical alignment and bind capability icons to labels. */

.row__action svg {
  display: block;
  flex: 0 0 auto;
}

.row__label--with-icon,
.detail__cap--with-icon {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.row__label--with-icon svg,
.detail__cap--with-icon svg,
.cap-chip__icon svg {
  display: block;
  flex: 0 0 auto;
}

/* Feature parity additions */
.hidden-file-input {
  display: none;
}

.manager__inline-notice {
  margin-bottom: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.row__pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  color: var(--text-tertiary);
  cursor: pointer;
  line-height: 1;
}

.row__pin:hover,
.row__pin--active {
  color: var(--accent-fg);
  border-color: var(--accent-border);
  background: var(--accent-surface);
}

.zone--pinned {
  border-color: var(--accent-border);
}

.custom-model-form__toolbar {
  display: flex;
  padding: var(--space-4) var(--space-4) 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Deep-link parity support additions */

@media (max-width: 640px) {
}

.logs-virtual {
  min-width: max-content;
}

.logs-virtual > div {
  right: auto !important;
  min-width: 100%;
  width: max-content;
}

.logs-line--continuation .logs-line__time,
.logs-line--continuation .logs-line__badge {
  opacity: 0.45;
}

.logs-line--continuation .logs-line__tag {
  color: var(--text-tertiary);
  min-width: 60px;
  max-width: 120px;
  text-align: left;
}

/* Follow-up: tighten speech settings and align Connect panels/cards */

/* ─────────────────────────────────────────────────────────
   Download manager
   ───────────────────────────────────────────────────────── */
.titlebar__status-dot--brand {
  margin-left: var(--space-1);
}

.titlebar__download-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.titlebar__download-toggle:hover,
.titlebar__download-toggle.is-active {
  background: var(--surface-2);
  color: var(--text-primary);
}

.titlebar__download-toggle.has-active-downloads {
  color: var(--accent-fg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 8%, transparent);
}

.titlebar__download-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-on);
  border: 1px solid var(--surface-0, var(--surface-base));
  font-size: var(--type-overline-size);
  font-weight: var(--weight-semibold);
  line-height: 14px;
  font-variant-numeric: tabular-nums;
}

.download-manager {
  position: fixed;
  inset: var(--titlebar-height) 0 0 0;
  z-index: 80;
  pointer-events: auto;
}

.download-manager__panel {
  position: absolute;
  top: var(--space-2);
  right: var(--space-3);
  width: min(440px, calc(100vw - 24px));
  max-height: min(650px, calc(100vh - var(--titlebar-height) - 24px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface-1) 92%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
}

.download-manager__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}

.download-manager__eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-fg);
}

.download-manager__counts {
  margin-top: 2px;
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.download-manager__close,
.download-item__actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--surface-2);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}

.download-manager__close:hover,
.download-item__actions button:hover:not(:disabled) {
  background: var(--surface-3);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.download-item__actions button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.download-manager__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  overflow: auto;
}

.download-manager__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--text-muted);
}

.download-manager__empty strong {
  color: var(--text-primary);
  font-size: var(--text-sm);
}

.download-manager__empty span {
  max-width: 240px;
  font-size: var(--text-xs);
  line-height: 1.5;
}

.download-item {
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-2) 86%, transparent);
}

.download-item--completed { border-color: color-mix(in srgb, var(--success) 22%, var(--border-subtle)); }
.download-item--error { border-color: color-mix(in srgb, var(--danger) 34%, var(--border-subtle)); }
.download-item--paused { border-color: color-mix(in srgb, var(--warn) 28%, var(--border-subtle)); }

.download-item__top {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.download-item__summary {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  text-align: left;
  color: inherit;
}

.download-item__summary > svg {
  margin-top: 2px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.download-item__names {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
}

.download-item__names strong {
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.download-item__names span {
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.download-item__actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.download-item__metric {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.download-item__progress {
  display: grid;
  grid-template-columns: 1fr 42px;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 0 0 22px;
}

.download-item__progress-track {
  height: 7px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--surface-3);
}

.download-item__progress-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--accent);
  transition: width 0.3s var(--ease-out);
}

.download-item__progress span {
  color: var(--accent-fg);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.download-item__details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-3);
  margin: var(--space-3) 0 0 22px;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.download-manager__clear {
  margin: 0 var(--space-3) var(--space-3);
  height: 34px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
}

.download-manager__clear:hover {
  background: var(--surface-3);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

[data-theme="light"] .download-manager__panel {
  background: var(--surface-glass);
}

@media (max-width: 768px) {
  .download-manager { inset: var(--titlebar-height) 0 0 0; }
  .download-manager__panel { right: var(--space-2); width: min(420px, calc(100vw - 16px)); }
  .download-item__top { flex-direction: column; }
  .download-item__actions { width: 100%; justify-content: flex-end; flex-wrap: wrap; }
}

@media (max-width: 480px) {
  .download-manager__panel {
    top: var(--space-2);
    right: var(--space-2);
    left: var(--space-2);
    width: auto;
    max-height: calc(100vh - var(--titlebar-height) - 16px);
    border-radius: 16px;
  }
  .download-item__details { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────
   MCP Gateway panel (ConnectView)
   ───────────────────────────────────────────────────────── */

.mcp-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.mcp-panel__url-copy-row {
  display: flex;
  gap: var(--space-2);
}

.mcp-panel__url-input {
  flex: 1;
  font-family: var(--font-mono, monospace);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  cursor: text;
  user-select: all;
}

.mcp-panel__copy-btn {
  flex-shrink: 0;
}

.mcp-panel__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
}

.mcp-panel__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-tertiary);
  flex-shrink: 0;
}

.mcp-panel__status--connected .mcp-panel__status-dot {
  background: var(--success);
}

.mcp-panel__status--unavailable .mcp-panel__status-dot {
  background: var(--danger);
}

.mcp-panel__status--checking .mcp-panel__status-dot {
  background: var(--accent);
  animation: mcp-pulse var(--duration-slow) ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
  .mcp-panel__status--checking .mcp-panel__status-dot {
    animation: none;
  }
}

@keyframes mcp-pulse {
  from { opacity: 1; }
  to   { opacity: 0.35; }
}

.mcp-panel__tool-name {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════════
   Master-detail model view — #2355 Slice 1
   ═══════════════════════════════════════════════════════════════ */

/* ── Layout shell ─────────────────────────────────────────────── */

/* Responsive nav-rail toggle — hidden on wide viewports (rail always shown) */

/* ── Left navigation rail (new three-pane left column) ────────── */

.model-nav-rail {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-right: 1px solid var(--border-subtle);
  background: var(--surface-1);
  height: 100%;
  overflow: hidden;
  padding: 0;
  box-sizing: border-box;
}

.model-nav-rail__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 0 var(--space-2) var(--space-2);
}

/* 2. Primary nav */
.model-nav-rail__primary {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  flex-shrink: 0;
}

.model-nav-rail__primary.workspace-filter-list {
  padding-bottom: var(--space-3);
}

.model-nav-rail__nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-2) var(--space-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  cursor: pointer;
  text-align: left;
}

.model-nav-rail__nav-item:hover { background: var(--surface-2); color: var(--text-primary); }

.model-nav-rail__nav-item:focus-visible,
.model-nav-rail__section-toggle:focus-visible {
  outline: 2px solid var(--accent-focus);
  outline-offset: 0;
}

.model-nav-rail__nav-item--active {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent-fg) 30%, transparent);
  color: var(--accent-fg);
}

.model-nav-rail__nav-icon { flex-shrink: 0; }

.model-nav-rail__nav-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-nav-rail__nav-count {
  flex-shrink: 0;
  font-size: var(--type-overline-size);
  font-variant-numeric: tabular-nums;
  color: var(--text-tertiary);
}

.model-nav-rail__nav-item--active .model-nav-rail__nav-count { color: var(--accent-fg); }

/* 3–5. Collapsible filter groups */
.model-nav-rail__section { display: flex; flex-direction: column; gap: var(--space-0-5); }



.model-nav-rail__section-head { margin: 0; }

.model-nav-rail__section-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  width: 100%;
  padding: var(--space-1) var(--space-2);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  font-size: var(--type-overline-size);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.model-nav-rail__section-toggle:hover { color: var(--text-secondary); }

.model-nav-rail__chip-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding: 2px var(--space-2) 0;
}

.model-nav-rail__filter-chip {
  --filter-chip-color: var(--accent-fg);
  min-width: 0;
  min-height: 25px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}

.model-nav-rail__filter-chip .app-icon {
  stroke-width: 2;
}

.model-nav-rail__filter-chip:hover {
  border-color: color-mix(in srgb, var(--filter-chip-color) 48%, var(--border-strong));
  color: var(--text-primary);
}

.model-nav-rail__filter-chip.is-active {
  border-color: color-mix(in srgb, var(--filter-chip-color) 68%, var(--border-subtle));
  background: color-mix(in srgb, var(--filter-chip-color) 12%, var(--surface-2));
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--filter-chip-color) 12%, transparent);
}

.model-nav-rail__task-icon {
  flex: none;
  color: var(--filter-chip-color);
}

.model-nav-rail__backend-chip {
  --filter-chip-color: var(--text-tertiary);
  color: var(--text-secondary);
}

.model-nav-rail__backend-chip.is-active {
  color: var(--text-primary);
}

.model-nav-rail__chip-count {
  color: var(--text-tertiary);
  font-size: var(--type-overline-size);
  font-variant-numeric: tabular-nums;
}

.model-nav-rail__filter-chip.is-active .model-nav-rail__chip-count {
  color: color-mix(in srgb, var(--filter-chip-color) 70%, var(--text-primary));
}

.model-nav-rail__tag-wrap {
  position: relative;
  display: inline-flex;
}

.model-nav-rail__tag-wrap.is-custom .model-nav-rail__tag-chip {
  padding-inline-end: 19px;
}

.model-nav-rail__custom-tag-remove {
  position: absolute;
  inset-inline-end: 3px;
  inset-block-start: 50%;
  width: 15px;
  height: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
}

.model-nav-rail__custom-tag-remove:hover {
  background: var(--danger-soft);
  color: var(--danger);
}

.model-nav-rail__custom-tag-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 27px;
  gap: 5px;
  padding: var(--space-2) var(--space-2) 0;
}

.model-nav-rail__custom-tag-entry input {
  min-width: 0;
  height: 27px;
  padding: 0 8px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: var(--text-xs);
}

.model-nav-rail__custom-tag-entry button {
  width: 27px;
  height: 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--accent-fg);
  cursor: pointer;
}

.model-nav-rail__custom-tag-entry button:disabled {
  color: var(--text-disabled);
  cursor: default;
  opacity: 0.6;
}

.model-nav-rail__filter-chip:focus-visible,
.model-nav-rail__custom-tag-remove:focus-visible,
.model-nav-rail__custom-tag-entry input:focus-visible,
.model-nav-rail__custom-tag-entry button:focus-visible {
  outline: 2px solid var(--accent-focus);
  outline-offset: 0;
}

/* 6. Storage meter */
.model-nav-rail__storage {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2);
  border-top: 1px solid var(--border-subtle);
}

.model-nav-rail__storage-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-xs);
}

.model-nav-rail__storage-label { color: var(--text-tertiary); }
.model-nav-rail__storage-value { color: var(--text-secondary); font-variant-numeric: tabular-nums; }

.model-nav-rail__storage-bar {
  position: relative;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  overflow: hidden;
}

.model-nav-rail__storage-fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--accent-fg);
}

/* ── Model list panel (middle) ────────────────────────────────── */

.model-list-panel {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-subtle);
  background: var(--surface-base);
  height: 100%;
  overflow: hidden;
}

.model-list-panel__search-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
}

.model-list-panel__search-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}

.model-list-panel__search-icon {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  pointer-events: none;
}

.model-list-panel__search-input {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--text-xs);
  height: 32px;
  padding: 0 28px 0 30px;
  box-sizing: border-box;
}

.model-list-panel__search-input:focus {
  outline: 2px solid var(--accent-focus);
  outline-offset: 0;
  border-color: transparent;
}

.model-list-panel__search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: var(--text-base);
  line-height: 1;
  padding: 2px 4px;
}

.model-list-panel__search-clear:hover { color: var(--text-primary); }
.model-list-panel__search-clear:focus-visible { outline: 2px solid var(--accent-focus); border-radius: 2px; }

.model-list-panel__count {
  padding: var(--space-2) var(--space-3) var(--space-1);
  font-size: var(--type-overline-size);
  color: var(--text-tertiary);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Sort control row */
.model-list-panel__sort-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3) var(--space-2);
}

.model-list-panel__sort-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  white-space: nowrap;
  user-select: none;
}

.model-list-panel__sort-select {
  flex: 1;
  min-width: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  height: var(--control-height-xs);
  padding: 0 var(--space-5) 0 var(--space-2);
  background-color: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  background-position: right 6px center;
  transition: border-color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.model-list-panel__sort-select:hover {
  background-color: var(--surface-2);
  border-color: var(--border-strong);
}

.model-list-panel__sort-select:focus-visible,
.model-list-panel__sort-select:focus {
  outline: none;
  border-color: var(--accent-fg);
  background-color: var(--surface-2);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

/* Scrollable list */
.model-list-panel__scroll-area {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  background: var(--surface-base);
}

.model-list-panel__scroll-area .zone--hf {
  border-top: 1px solid var(--border-subtle);
  margin: var(--space-2) 0 0;
  padding: var(--space-2) 0;
}
.model-list-panel__scroll-area .row--hf .row__icon {
  width: 28px;
  height: 28px;
}

.model-list-panel__scroll-area .row--hf .row__summary {
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

.model-list-panel__scroll-area .row--hf .row__content {
  width: 100%;
}

.model-list-panel__scroll-area .row--hf .row__right {
  justify-content: flex-start;
  padding: 0 var(--space-4) var(--space-2);
}

.model-list-panel__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-6);
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  text-align: center;
}

/* ── Model detail panel (right) ───────────────────────────────── */

.model-detail-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--surface-base);
}

.model-detail-panel--empty {
  align-items: center;
  justify-content: center;
}

.model-detail-panel__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  text-align: center;
  max-width: 28rem;
  padding: 0 var(--space-4);
}
.model-detail-panel__placeholder p { margin: 0; }
.model-detail-panel__placeholder-sub {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  line-height: 1.5;
}

.model-detail-panel__name {
  position: relative;
  max-width: 100%;
  font-size: var(--type-detail-title-size);
  line-height: 1.15;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin: 0;
  letter-spacing: var(--tracking-tight);
  overflow-wrap: anywhere;
  outline: none;
}

.model-detail-panel__name:focus-visible {
  outline: none;
}

.model-detail-panel__title-line {
  min-width: 0;
  width: fit-content;
  max-width: 100%;
  display: flex;
  align-items: flex-start;
  justify-self: start;
  gap: 2px;
}

.model-detail-panel__title-line .model-detail-panel__name {
  min-width: 0;
  flex: 0 1 auto;
}

.model-detail-panel__copy-name {
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin-top: -3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.model-detail-panel__copy-name:hover {
  background: var(--surface-2);
  color: var(--text-primary);
}

.model-detail-panel__copy-name--copied {
  color: var(--success);
}

/* Source chip: which registry the weights come from, owner/repo, and quant. */
.model-detail-panel__source {
  min-width: 0;
  max-width: 100%;
}

.model-detail-panel__source > svg {
  flex: 0 0 auto;
}

.model-detail-panel__source-registry {
  flex: 0 0 auto;
  color: var(--text-tertiary);
}

.model-detail-panel__source-checkpoint {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-detail-panel__error {
  font-size: var(--text-xs);
  color: var(--status-error);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* ── HF detail panel variant ────────────────────────────────── */

.model-detail-panel__badge--pipeline {
  background: color-mix(in srgb, var(--provider-hugging-face) 12%, transparent);
  border-color: color-mix(in srgb, var(--provider-hugging-face) 30%, transparent);
  color: var(--provider-hugging-face);
}

.hf-detail__overview {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  overflow-y: auto;
}

.hf-detail__overview-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.hf-detail__overview-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hf-detail__overview-value {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.hf-detail__overview-value--muted {
  color: var(--text-tertiary);
  font-style: italic;
}

/* ── Tab list ─────────────────────────────────────────────────── */

.detail-tabs__tablist {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border-subtle);
  padding: 0 var(--space-4);
  flex-shrink: 0;
  background: var(--surface-1);
}

.detail-tabs__tab {
  padding: var(--space-2) var(--space-3);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  cursor: pointer;
  white-space: nowrap;
}

.detail-tabs__tab:hover { color: var(--text-primary); }
.detail-tabs__tab:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 2px; border-radius: 2px; }

.detail-tabs__tab--active {
  color: var(--accent-fg);
  border-bottom-color: var(--accent-fg);
}

.detail-tabs__panel {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.detail-tabs__panel[hidden] { display: none; }
.detail-tabs__panel--active { display: flex; flex-direction: column; }

/* ── README tab ───────────────────────────────────────────────── */

.detail-readme {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5);
  font-size: var(--text-sm);
  color: var(--text-primary);
  line-height: 1.7;
}

.detail-readme h1, .detail-readme h2, .detail-readme h3 { margin: 1.2em 0 0.4em; }
.detail-readme h1 { font-size: 1.3em; }
.detail-readme h2 { font-size: 1.15em; }
.detail-readme h3 { font-size: 1em; }
.detail-readme p { margin: 0.5em 0; }
.detail-readme pre { background: var(--surface-2); border-radius: var(--radius-md); padding: var(--space-3); overflow-x: auto; font-size: 0.88em; }
.detail-readme code { font-family: var(--font-mono, monospace); font-size: 0.88em; background: var(--surface-2); padding: 1px 4px; border-radius: 3px; }
.detail-readme pre code { background: none; padding: 0; }
.detail-readme a { color: var(--accent-fg); }
.detail-readme table { border-collapse: collapse; width: 100%; font-size: 0.9em; }
.detail-readme th, .detail-readme td { border: 1px solid var(--border-subtle); padding: var(--space-2) var(--space-3); }
.detail-readme th { background: var(--surface-2); font-weight: var(--weight-semibold); }
.detail-readme blockquote { border-left: 3px solid var(--border-strong); padding-left: var(--space-3); color: var(--text-secondary); margin: var(--space-3) 0; }
.detail-readme img { max-width: 100%; height: auto; }

/* Keep the original img node in the DOM for README semantics/tests while
   suppressing the browser's broken-image chrome after a load failure. */
.detail-readme__asset--failed { display: none; }

.detail-readme__asset-fallback {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  margin: var(--space-2) 0;
  padding: var(--space-2) var(--space-3);
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}

.detail-readme--loading,
.detail-readme--empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--text-tertiary);
  text-align: center;
  min-height: 160px;
}

/* ── Files tab ────────────────────────────────────────────────── */

.detail-files {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5);
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.detail-files--loading,
.detail-files--empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--text-tertiary);
  text-align: center;
  min-height: 160px;
}

.detail-files--empty small { font-size: var(--text-xs); }

.detail-files__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.detail-files__table th,
.detail-files__table td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
  height: 40px;
  box-sizing: border-box;
}

.detail-files__table th {
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--border-strong);
  height: 32px;
}

.detail-files__table tbody tr:last-child td { border-bottom: none; }

.detail-files__col-size { text-align: left; white-space: nowrap; }

.detail-files__name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono, monospace);
  font-size: 0.88em;
  color: var(--text-primary);
  word-break: break-all;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.detail-files__name svg { flex-shrink: 0; color: var(--text-tertiary); }

.detail-files__role-badge {
  display: inline-block;
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  white-space: nowrap;
}

.detail-files__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.detail-files__status--present { color: var(--success, var(--accent-fg)); }
.detail-files__status--missing { color: var(--text-tertiary); }

/* ── Responsive: list-first → tap-to-detail on narrow viewports ── */
@media (max-width: 768px) {
  /* Remove grid; each panel takes full width/height */
.manager--detail {
    position: relative;
    overflow: hidden;
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }

  /* Show the nav-rail toggle button */

  /* Hide the nav rail by default; reveal when toggled open */
  .manager--detail .model-nav-rail { display: none; }
.manager--detail.manager--nav-open .model-nav-rail {
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
    width: auto;
    height: auto;
    max-height: calc(100% - var(--space-4));
    display: flex;
    position: absolute;
    inset: auto var(--space-2) var(--space-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
  }

  .manager--detail.manager--nav-open .model-nav-rail.is-collapsed > .model-nav-rail__scroll {
    display: flex;
  }

  /* When the nav rail is open, hide the list beneath it */

  /* Default state: show list only */
.manager--detail .model-list-panel {
    border-right: none;
    height: auto;
  }

  /* Hide detail panel until a model is selected */
  .manager--detail .model-detail-panel,
  .manager--detail .manager__detail-form-panel {
    display: none;
  }

  /* When detail is open: show detail only, hide list */
  .manager--detail.manager--detail-mobile-open .model-list-panel {
    display: none;
  }

  .manager--detail.manager--detail-mobile-open .model-detail-panel,
  .manager--detail.manager--detail-mobile-open .manager__detail-form-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
  }

  /* "Back to models" is only useful on narrow viewports where the list and
     detail are mutually exclusive. Higher specificity than the base
     `display:none` rule (which appears later in the file) so it wins here. */
  .manager--detail .model-detail-panel__back-btn { display: inline-flex; }
}

/* ── Back button (visible on narrow viewports only) ────────────── */
/* Hidden on desktop — the list is always visible in the three-pane layout, so
   "Back to models" is redundant. It is re-enabled inside the ≤700px media
   query below, where the list and detail are mutually exclusive. */
.model-detail-panel__back-btn {
  display: none;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  color: var(--accent-fg);
  background: transparent;
  border: none;
  cursor: pointer;
  border-bottom: 1px solid var(--border-subtle);
  width: 100%;
  text-align: left;
}

.model-detail-panel__back-btn:hover { background: var(--surface-2); }
.model-detail-panel__back-btn:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: -2px; }

.model-detail-panel__close-btn {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--text-tertiary);
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1;
  transition: color 0.12s, background 0.12s;
}
.model-detail-panel__close-btn:hover {
  color: var(--text-primary);
  background: var(--surface-2);
}
.model-detail-panel__close-btn:focus-visible {
  outline: 2px solid var(--accent-focus);
  outline-offset: -2px;
}

/* ── Favorite (star) toggle in the detail header ───────────────── */
.model-detail-panel__fav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  line-height: 1;
}

.model-detail-panel__fav-btn:hover { background: var(--surface-3); color: var(--text-primary); }
.model-detail-panel__fav-btn:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 1px; }

.model-detail-panel__fav-btn--on {
  color: var(--accent-fg);
  border-color: var(--accent-fg);
}
.model-detail-panel__fav-btn--on .app-icon[data-icon='star'] path { fill: currentColor; }
.model-detail-panel__fav-btn--on:hover { color: var(--accent-fg); }

/* Custom Omni collection LLM tool editor */
.custom-model-form__tools {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
}

.custom-model-form__section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.custom-model-form__section-head > div:first-child {
  display: grid;
  gap: var(--space-0-5);
  min-width: 0;
}

.custom-model-form__section-head strong {
  color: var(--text-primary);
  font-size: var(--text-sm);
}

.custom-model-form__section-head span,
.custom-model-form__empty-tools {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

.custom-model-form__section-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-shrink: 0;
}

.custom-model-form__tool-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-base);
}

.custom-model-form__tool-card-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.custom-model-form__tool-card-head strong {
  color: var(--text-primary);
}

.custom-model-form__tool-card-head > div:first-child {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.custom-model-form__tool-card-head small {
  line-height: var(--leading-snug);
}

.custom-model-form__textarea-field--compact {
  grid-template-rows: auto minmax(112px, auto) minmax(16px, auto);
}

.custom-model-form__textarea-field--compact textarea {
  min-height: 112px;
}

@media (max-width: 720px) {
  .custom-model-form__section-head,
  .custom-model-form__section-actions {
    display: grid;
    justify-content: stretch;
  }
  .custom-model-form__tool-card {
    grid-template-columns: 1fr;
  }
}

/* ── Model Tuning tab ─────────────────────────────────────────── */
.detail-tuning {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  color: var(--text-primary);
}

.detail-tuning__intro,
.detail-tuning__effective,
.detail-tuning__editor {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  padding: var(--space-4);
}

.detail-tuning__intro {
  background: color-mix(in srgb, var(--accent-fg) 5%, var(--surface-1));
}

.detail-tuning__title,
.detail-tuning__section-title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}

.detail-tuning__intro p,
.detail-tuning__hint,
.detail-tuning__empty {
  margin: 0;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--text-secondary);
}

.detail-tuning__summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
}

.detail-tuning__summary-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.detail-tuning__summary-label {
  font-size: var(--type-overline-size);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.detail-tuning__summary-card strong {
  font-size: var(--text-xs);
  color: var(--text-primary);
  line-height: 1.35;
}

.detail-tuning__kv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-2);
}

.detail-tuning__kv {
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  justify-content: start;
  align-items: center;
  column-gap: var(--space-3);
  row-gap: 3px;
}

.detail-tuning__kv span {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-tuning__kv code {
  color: var(--text-primary);
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xs);
  background: transparent;
  justify-self: start;
  max-width: 100%;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.detail-tuning__section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.detail-tuning__notice {
  margin: 0;
  max-width: 18rem;
  font-size: var(--text-xs);
  color: var(--accent-fg);
  line-height: 1.4;
}

.detail-tuning__field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-3);
}

.detail-tuning__field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.detail-tuning__field > span {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
}

.detail-tuning__field small {
  color: var(--text-tertiary);
  font-size: var(--type-overline-size);
  line-height: 1.35;
}

.detail-tuning__sampling {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--border-subtle);
}

.detail-tuning__sampling h4 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.detail-tuning__default-baseline {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--accent-fg) 22%, var(--border-subtle));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent-fg) 5%, var(--surface-2));
  color: var(--accent-fg);
}

.detail-tuning__default-baseline > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.detail-tuning__default-baseline strong {
  color: var(--text-primary);
  font-size: var(--text-xs);
}

.detail-tuning__default-baseline span {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  line-height: 1.45;
}

.detail-tuning__intent-map {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.detail-tuning__intent-group {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
}
.detail-tuning__intent-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.detail-tuning__intent-head h4,
.detail-tuning__runtime h4,
.detail-tuning__sampling h4 {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--text-primary);
  font-size: var(--text-sm);
}
.detail-tuning__intent-head > span {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  text-align: right;
}
.detail-tuning__intent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-2);
}
.detail-tuning__intent-card {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
.detail-tuning__intent-card.is-active {
  border-color: var(--accent-fg);
  box-shadow: 0 0 0 1px var(--accent-soft);
}
.detail-tuning__intent-name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}
.detail-tuning__active-chip {
  margin-left: auto;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-fg);
  font-size: var(--type-overline-size);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.detail-tuning__intent-control {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.detail-tuning__intent-input {
  min-width: 0;
  width: 100%;
}
.detail-tuning__intent-output {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-base);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.detail-tuning__intent-card small {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}
.detail-tuning__runtime,
.detail-tuning__sampling {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}
@media (max-width: 700px) {
  .detail-tuning__intent-head { align-items: flex-start; flex-direction: column; }
  .detail-tuning__intent-head > span { text-align: left; }
  .detail-tuning__intent-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 430px) {
  .detail-tuning__intent-grid { grid-template-columns: 1fr; }
}

.detail-tuning__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.detail-tuning__actions .btn[aria-busy='true'] {
  cursor: progress;
  opacity: 0.85;
}

.detail-tuning__field--wide {
  grid-column: 1 / -1;
}

.detail-tuning__control-row {
  align-items: center;
  gap: var(--space-2);
}

.detail-tuning__control-row .field__value {
  min-width: 3.75rem;
  text-align: right;
}

.detail-tuning__default-btn {
  white-space: nowrap;
}

.detail-tuning__args {
  min-height: 4.75rem;
  resize: vertical;
  font-family: var(--font-mono, monospace);
  line-height: 1.45;
}

@media (max-width: 640px) {
  .detail-tuning__control-row {
    flex-wrap: wrap;
  }

  .detail-tuning__control-row .slider {
    flex-basis: 100%;
  }
}
/* -- Model Configuration Tab ---------------------------------------- */
/* Spacing climbs a major-fourth ladder rounded to the token scale: 12px within
 * a control row, 16px between the rows of one control, 24px between the parts
 * of a section, 32px between control groups and between sections. */
/* The detail pane narrows independently of the window, so this panel's
   breakpoints answer to the pane. */
.detail-configuration {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  container-type: inline-size;
  container-name: model-configuration;
}

/* A form reads worst when a single control is stretched across a wide screen,
   so it stops where the rest of the app's prose and controls stop. */
.detail-configuration__section {
  display: flex;
  flex-direction: column;
  max-width: var(--max-content-width);
  gap: var(--space-5);
  padding: 0;
}

.detail-configuration__section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.detail-configuration__section-heading {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin: 0;
}

.detail-configuration__section-copy {
  margin: var(--space-1) 0 0;
  max-width: 42rem;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.detail-configuration__actions {
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
}

.detail-configuration__load-controls {
  display: grid;
  gap: var(--space-6);
}

.detail-configuration__context-card,
.detail-configuration__field {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.detail-configuration__context-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.detail-configuration__control-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.detail-configuration__control-head label,
.detail-configuration__field > span {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.detail-configuration__context-number {
  position: relative;
  width: 9.5rem;
}

.detail-configuration__context-input {
  width: 100%;
  padding-inline-end: 2.75rem;
  font-family: var(--font-mono, monospace);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

/* Keep only Lemonade's separate stepper at the far right. The more specific
 * selector deliberately overrides the generic .input[type='number'] rule. */
.input.detail-configuration__context-input[type='number'] {
  -moz-appearance: textfield !important;
  -webkit-appearance: textfield !important;
  appearance: textfield !important;
}

.input.detail-configuration__context-input[type='number']::-webkit-outer-spin-button,
.input.detail-configuration__context-input[type='number']::-webkit-inner-spin-button {
  display: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  margin: 0 !important;
}

.detail-configuration__number-control {
  position: relative;
  width: 100%;
}

.detail-configuration__number-input {
  width: 100%;
  padding-inline-end: 2.75rem;
}

.input.detail-configuration__number-input[type='number'] {
  -moz-appearance: textfield !important;
  -webkit-appearance: textfield !important;
  appearance: textfield !important;
}

.input.detail-configuration__number-input[type='number']::-webkit-outer-spin-button,
.input.detail-configuration__number-input[type='number']::-webkit-inner-spin-button {
  display: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  margin: 0 !important;
}

.detail-configuration__context-stepper {
  position: absolute;
  z-index: 1;
  inset-block: 4px;
  inset-inline-end: 5px;
  width: 24px;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  padding-inline-start: 5px;
  border-inline-start: 1px solid var(--border-subtle);
}

.detail-configuration__context-stepper button {
  min-width: 0;
  min-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
}

.detail-configuration__context-slider:disabled,
.detail-configuration__axis-slider:disabled,
.detail-configuration__context-stepper button:disabled {
  opacity: .42;
  cursor: not-allowed;
}

.detail-configuration__context-stepper button:hover:not(:disabled),
.detail-configuration__context-stepper button:focus-visible {
  background: var(--surface-2);
  color: var(--text-primary);
  outline: none;
}

.detail-configuration__context-stepper button:disabled {
  opacity: 0.32;
  cursor: default;
}

.detail-configuration__voice-custom {
  width: 100%;
  margin-top: var(--space-1);
}

.detail-configuration__context-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.detail-configuration__slider-row {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  gap: var(--space-3);
}

.detail-configuration__context-row .detail-configuration__context-number {
  flex: 0 0 auto;
}

.detail-configuration__slider-row span,
.detail-configuration__context-card small {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}

.detail-configuration__context-slider {
  width: 100%;
}

.detail-configuration__context-slider::-webkit-slider-thumb,
.detail-configuration__axis-slider::-webkit-slider-thumb {
  width: 24px;
  height: 24px;
  border-radius: 0;
  background: url('logo.svg') center / contain no-repeat;
  filter: drop-shadow(0 2px 5px color-mix(in srgb, #000 45%, transparent));
}

.detail-configuration__context-slider::-webkit-slider-thumb:hover,
.detail-configuration__axis-slider::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 5px var(--accent-soft);
}

.detail-configuration__context-slider:focus-visible::-webkit-slider-thumb,
.detail-configuration__axis-slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 5px var(--accent-strong);
}

.detail-configuration__context-slider::-moz-range-thumb,
.detail-configuration__axis-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 0;
  background: url('logo.svg') center / contain no-repeat;
  filter: drop-shadow(0 2px 5px color-mix(in srgb, #000 45%, transparent));
}

.detail-configuration__selector-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--space-3);
}

/* A value carries no more weight than the other controls' values do; semibold
   is the field headings' job, and the select was competing with its own. */
.detail-configuration__select {
  width: 100%;
  min-height: 36px;
  margin-top: 0;
  border-color: var(--border-subtle);
  background-color: color-mix(in srgb, var(--surface-base) 92%, var(--surface-2));
  color: var(--text-primary);
  font-weight: var(--weight-regular);
}

.detail-configuration__selector-grid .input {
  min-height: 36px;
}

.detail-configuration__select:hover {
  border-color: var(--border-strong);
}

.detail-configuration__select:focus,
.detail-configuration__select:focus-visible,
.detail-configuration__context-input:focus,
.detail-configuration__context-input:focus-visible {
  border-color: var(--accent-fg);
  box-shadow: 0 0 0 2px var(--accent-soft);
  outline: none;
}

/* ── Temperature axis ─────────────────────────────────────────
   The one sampler set by feel rather than by number, so it is drawn along the
   feeling: poles at the ends, the advised range lit in accent, and the two
   shoulders hatched in the caution hue — hatched as well as coloured so the
   advisory survives a palette nobody can tell coral from yellow in. */
.detail-configuration__axis {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: var(--space-3);
}

.detail-configuration__axis-caution {
  color: var(--danger);
  font-size: var(--text-xs);
  text-align: end;
}

.detail-configuration__axis-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.detail-configuration__axis-scale {
  display: grid;
  flex: 1 1 0;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  gap: var(--space-3);
}

/* Qualitative ends of an axis, not values on it: the context slider's numeric
   ticks sit in the same slot and must not be mistaken for these. */
.detail-configuration__axis-pole {
  color: var(--text-tertiary);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The advised range is just the track; only the shoulders are marked, so the
   accent thumb stays the brightest thing on the axis. The hatch runs the whole
   width and the advised range is veiled back over it in the track's own colour,
   so the caution gathers rather than switching on at a line. Two classes to
   outrank the light theme's `.slider` background, which would erase these. */
.slider.detail-configuration__axis-slider {
  --axis-advised-start: 10%;
  --axis-advised-end: 65%;
  --axis-fade: 7%;
  --axis-track: var(--surface-3);
  --axis-caution-tint: color-mix(in srgb, var(--danger) 20%, transparent);
  --axis-caution-line: color-mix(in srgb, var(--danger) 40%, transparent);
  height: 8px;
  background-image:
    linear-gradient(to right,
      transparent 0,
      transparent calc(var(--axis-advised-start) - var(--axis-fade)),
      var(--axis-track) var(--axis-advised-start),
      var(--axis-track) var(--axis-advised-end),
      transparent calc(var(--axis-advised-end) + var(--axis-fade)),
      transparent 100%),
    repeating-linear-gradient(135deg,
      var(--axis-caution-line) 0 2px, var(--axis-caution-tint) 2px 6px);
}

[data-theme="light"] .slider.detail-configuration__axis-slider {
  --axis-track: var(--surface-2);
  --axis-caution-tint: color-mix(in srgb, var(--danger) 12%, transparent);
  --axis-caution-line: color-mix(in srgb, var(--danger) 26%, transparent);
}

.detail-configuration__axis-number {
  position: relative;
  flex: 0 0 auto;
  width: 7rem;
}

.detail-configuration__axis-input {
  font-family: var(--font-mono, monospace);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

/* ── Detailed samplers ────────────────────────────────────────
   Folded by default, but never silently: the closed row carries the flags it
   is holding, so the panel still states what will load. */
.detail-configuration__sampler-details {
  display: grid;
  min-width: 0;
  gap: var(--space-3);
}

.detail-configuration__sampler-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: var(--space-2) 0;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-align: start;
  cursor: pointer;
}

.detail-configuration__sampler-toggle:hover {
  color: var(--text-primary);
}

.detail-configuration__sampler-toggle:focus-visible {
  border-radius: var(--radius-sm);
  outline: 2px solid var(--accent-fg);
  outline-offset: 2px;
}

.detail-configuration__sampler-toggle-label {
  flex: 0 0 auto;
}

.detail-configuration__sampler-caret {
  flex: 0 0 auto;
  color: var(--text-tertiary);
  transition: transform var(--duration-fast) var(--ease-out);
}

.detail-configuration__sampler-toggle[aria-expanded='true'] .detail-configuration__sampler-caret {
  transform: rotate(90deg);
}

.detail-configuration__sampler-folded {
  overflow: hidden;
  flex: 1 1 0;
  min-width: 0;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-weight: var(--weight-regular);
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .detail-configuration__sampler-caret {
    transition: none;
  }
}

.detail-configuration__args-grid {
  display: grid;
  min-width: 0;
  gap: var(--space-2);
}

.detail-configuration__args-block {
  display: grid;
  min-width: 0;
  gap: var(--space-3);
}

/* Three across: the truncation samplers on one row, the two penalties on the
   next, and the template kwargs across the full width below them. */
.detail-configuration__sampler-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
}

.detail-configuration__sampler-grid .input {
  width: 100%;
}

/* `hidden` alone loses to the display above. */
.detail-configuration__sampler-grid[hidden] {
  display: none;
}

.detail-configuration__sampler-field--wide {
  grid-column: 1 / -1;
}

.detail-configuration__running-state {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}

.detail-configuration__running-state svg {
  color: var(--success);
}

.detail-configuration__args-fallback {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}

.detail-configuration__args-fallback code {
  overflow-wrap: anywhere;
  color: var(--text-secondary);
  font-family: var(--font-mono);
}

.detail-configuration__args-field {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.detail-configuration__args-field > span {
  margin-bottom: var(--space-2);
}

/* Constrain grid columns so fields do not stretch too wide */
.detail-configuration .detail-tuning__field-grid {
  grid-template-columns: repeat(auto-fill, minmax(190px, 280px));
}

.detail-configuration .detail-tuning__field--wide {
  max-width: 100%;
}

/* Height is set from the content by AutoGrowTextarea. */
.detail-configuration .detail-tuning__args {
  width: 100%;
  min-height: 0;
  padding: var(--space-3);
  border-color: var(--border-strong);
  overflow-y: hidden;
  background: var(--surface-2);
  color: var(--text-primary);
  resize: none;
}

.detail-configuration .detail-tuning__field small {
  margin-top: var(--space-1);
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}

@container model-configuration (max-width: 520px) {
  .detail-configuration__sampler-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Named poles cost far more room than the context scale's two numbers, so
     they are the first thing to come off the track's row. */
  .detail-configuration__axis-scale {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: var(--space-1);
  }

  .detail-configuration__axis-scale > input {
    grid-row: 2;
    grid-column: 1 / -1;
  }
}

@container model-configuration (max-width: 420px) {
  /* The summary is the reason the section can stay folded; below this there is
     no room to read it, and an ellipsis on its own says nothing. */
  .detail-configuration__sampler-folded {
    display: none;
  }
}

@container model-configuration (max-width: 340px) {
  .detail-configuration__selector-grid,
  .detail-configuration__sampler-grid {
    grid-template-columns: 1fr;
  }

  .detail-configuration__context-row {
    flex-wrap: wrap;
  }

  .detail-configuration__axis-number,
  .detail-configuration__context-row .detail-configuration__context-number {
    width: 100%;
  }

  .detail-configuration__axis-row {
    flex-wrap: wrap;
  }

  .detail-configuration__slider-row {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: var(--space-1);
  }

  .detail-configuration__slider-row > input {
    grid-row: 2;
    grid-column: 1 / -1;
  }
}

/* ── Session Inspector Redesign Styles ──────────────────────── */
.inspect-layout {
  display: grid;
  grid-template-columns: var(--workspace-rail) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
  width: 100%;
  background: var(--surface-0);
  overflow: hidden;
}

/* --- Left Rail --- */
.inspect-rail {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-subtle);
  height: 100%;
}

.inspect-rail__controls {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.inspect-rail__capture-group-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.inspect-rail__capture-label-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
}

.inspect-rail__capture-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}

.inspect-rail__capture-sublabel {
  font-size: var(--type-overline-size);
  color: var(--text-tertiary);
}

.capture-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--type-overline-size);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
}

.capture-badge.capturing {
  color: var(--success);
  background: var(--success-soft);
  border-color: color-mix(in srgb, var(--success) 20%, transparent);
}

.capture-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.capturing .capture-badge__dot {
  animation: lm-pulse 1.8s infinite ease-in-out;
}

@keyframes lm-pulse {
  0% { transform: scale(0.85); opacity: 0.5; }
  50% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(0.85); opacity: 0.5; }
}

.capture-badge.paused {
  color: var(--text-tertiary);
  background: var(--surface-1);
}

.capture-badge.connecting {
  color: var(--info);
  background: var(--info-soft);
  border-color: color-mix(in srgb, var(--info) 20%, transparent);
}

.connecting .capture-badge__dot {
  animation: lm-pulse 1.2s infinite ease-in-out;
}

.capture-badge.unsupported {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: color-mix(in srgb, var(--danger) 20%, transparent);
}

/* Switch control */
.switch-control {
  all: unset;
  cursor: pointer;
  position: relative;
  width: 32px;
  height: 18px;
  background: var(--border-subtle);
  border-radius: var(--radius-pill);
  transition: background var(--duration-fast) var(--ease-out);
}

.switch-control.active {
  background: var(--accent);
}

.switch-control__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: var(--surface-0);
  border-radius: 50%;
  transition: transform var(--duration-fast) var(--ease-out);
}

.switch-control.active .switch-control__thumb {
  transform: translateX(14px);
}

.switch-control:focus-visible {
  outline: 2px solid var(--accent-focus);
  outline-offset: 2px;
}

.inspect-search-input {
  width: 100%;
  min-height: var(--control-height-md);
  padding: 0 var(--space-3);
  border-radius: var(--control-radius);
  border: 1px solid var(--border-subtle);
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: var(--text-sm);
}

.inspect-search-input:focus {
  border-color: var(--border-strong);
  background: var(--surface-2);
}

.inspect-rail__filters {
  gap: var(--space-1);
  overflow-x: auto;
  padding-bottom: 2px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible;
}

.filter-chip {
  all: unset;
  cursor: pointer;
  font-size: var(--text-xs);
  min-height: var(--control-height-xs);
  padding: 0 var(--space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--control-radius);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.filter-chip:hover {
  background: var(--surface-2);
}

.filter-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-on);
  font-weight: var(--weight-bold);
}

.inspect-rail__list {
  flex: 1;
}

.trace-row__status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.trace-row__status-dot.ok { background: var(--success); }
.trace-row__status-dot.slow { background: var(--warn); }
.trace-row__status-dot.error { background: var(--danger); }

.trace-row__status-label {
  font-size: 9px;
  font-weight: var(--weight-bold);
  color: var(--text-tertiary);
}

.inspect-empty-state {
  margin: auto;
  padding: var(--space-6);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.inspect-empty-state__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
}

.inspect-empty-state h5 {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.inspect-empty-state__hint {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  max-width: 220px;
}

.inspect-rail__footer {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  gap: var(--space-2);
}

.inspect-rail__footer .workspace-action-button { flex: 1 1 0; }

.inspect-footer-btn {
  all: unset;
  cursor: pointer;
  flex: 1;
  text-align: center;
  padding: var(--space-2) 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}

.inspect-footer-btn.outline {
  background: var(--surface-1);
  color: var(--text-secondary);
}

.inspect-footer-btn.outline:hover {
  background: var(--surface-2);
}

.inspect-footer-btn.primary-simulate {
  background: var(--accent);
  color: var(--accent-on);
  border-color: var(--accent);
  font-weight: var(--weight-bold);
}

.inspect-footer-btn.primary-simulate:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* --- Right Detail Pane --- */
.inspect-detail {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0; background: var(--surface-base);
}

.inspect-detail__header {
  padding: var(--space-5) var(--space-6) 0;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--surface-0);
}

.inspect-detail__identity {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.inspect-detail__mobile-back { display: none; }

.inspect-detail__status {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.detail-tab__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
}

.detail-kind-badge {
  font-size: var(--type-overline-size);
  font-weight: var(--weight-bold);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}

.detail-kind-badge.llm { color: var(--info); background: var(--info-soft); }
.detail-kind-badge.embedding { color: var(--success); background: var(--success-soft); }
.detail-kind-badge.reranker { color: var(--warn); background: var(--warn-soft); }

.detail-model-name {
  margin: 0;
  font-size: 19px;
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}

.detail-operation {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

/* Metric Strip */
.inspect-metrics-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-2);
}

@media (min-width: 901px) and (max-width: 1100px) {
  .inspect-metrics-strip {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 720px) {
  .inspect-metrics-strip {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 480px) {
  .inspect-metrics-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

.metric-card {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.metric-card__label {
  font-size: var(--type-overline-size);
  font-weight: var(--weight-semibold);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}

.metric-card__val {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  font-family: var(--font-mono, monospace);
  color: var(--text-primary);
}

.metric-card__unit {
  font-size: var(--text-xs);
  font-weight: var(--weight-normal);
  color: var(--text-secondary);
  margin-left: 2px;
}

.metric-card.highlight {
  border-color: var(--accent-strong);
  background: var(--accent-soft);
}

.metric-card.highlight .metric-card__val {
  color: var(--accent-fg);
}

.metric-card.highlight .metric-card__unit {
  color: inherit;
  opacity: 0.8;
}

.metric-badge .metric-card__unit {
  font-size: 8px;
  font-weight: var(--weight-normal);
  color: var(--text-secondary);
  opacity: 0.8;
}

.iteration-metric-pill .metric-card__unit {
  font-size: var(--type-overline-size);
  font-weight: var(--weight-normal);
  color: var(--text-tertiary);
}

/* Detail Tabs */
.detail-tabs-list {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

.detail-tab {
  all: unset;
  cursor: pointer;
  padding: var(--space-3) 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-tertiary);
  border-bottom: 2px solid transparent;
  transition: color var(--duration-fast) ease, border var(--duration-fast) ease;
}

.detail-tab:hover {
  color: var(--text-secondary);
}

.detail-tab.active {
  color: var(--accent-fg);
  border-bottom-color: var(--accent);
}

/* Tab Content Scroll Body */
.inspect-detail__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5) var(--space-6);
}

.tab-pane {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.fade-in {
  animation: inspectFadeIn 220ms ease-out;
}

@keyframes inspectFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Health Banner */
.health-banner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-5);
  border: 1px solid;
}

.health-banner.ok {
  background: var(--success-soft);
  border-color: color-mix(in srgb, var(--success) 28%, transparent);
}

.health-banner.ok .health-banner__icon { color: var(--success); font-weight: bold; }

.health-banner.warn {
  background: var(--warn-soft);
  border-color: color-mix(in srgb, var(--warn) 30%, transparent);
}

.health-banner.warn .health-banner__icon { color: var(--warn); font-weight: bold; }

.health-banner.danger {
  background: var(--danger-soft);
  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
}

.health-banner.danger .health-banner__icon { color: var(--danger); font-weight: bold; }

.health-banner__icon {
  font-size: var(--text-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-1);
}

.health-banner__text {
  flex: 1;
}

.health-banner__text strong {
  font-size: var(--text-sm);
  color: var(--text-primary);
  display: block;
}

.health-banner__text p {
  margin: 2px 0 0;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.health-banner__cta {
  all: unset;
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  background: var(--surface-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.health-banner__cta:hover {
  background: var(--surface-2);
}

/* Waterfall CSS */
.overview-section {
  margin-bottom: var(--space-6);
}

.overview-section h4 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}

.waterfall-container {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.waterfall-row {
  display: grid;
  grid-template-columns: 120px 1fr 60px;
  align-items: center;
  gap: var(--space-4);
}

.waterfall-row__label {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.waterfall-bar-track {
  background: var(--surface-2);
  height: 10px;
  border-radius: var(--radius-pill);
  position: relative;
  overflow: hidden;
}

.waterfall-bar {
  height: 100%;
  border-radius: var(--radius-pill);
  transition: width 0.3s ease, margin 0.3s ease;
}

.waterfall-bar.queue { background: var(--info); }
.waterfall-bar.prefill { background: var(--accent); }
.waterfall-bar.decode { background: var(--success); }

.waterfall-row__val {
  font-size: var(--text-xs);
  font-family: var(--font-mono, monospace);
  color: var(--text-secondary);
  text-align: right;
}

/* Attributes Grid */
.attributes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.attribute-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.attribute-card__key {
  font-size: var(--type-overline-size);
  font-weight: var(--weight-semibold);
  color: var(--text-tertiary);
}

.attribute-card__val {
  font-size: var(--text-xs);
  color: var(--text-primary);
}

.attribute-card__val.mono {
  font-family: var(--font-mono, monospace);
  word-break: break-all;
}

/* Messages tab toolbar */
.messages-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}

.messages-toolbar__left {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.messages-toolbar__title {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--text-secondary);
  letter-spacing: var(--tracking-caps);
}

.toolbar-segmented {
  display: flex;
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-0-5);
}

.toolbar-segmented button {
  all: unset;
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
}

.toolbar-segmented button.active {
  background: var(--surface-2);
  color: var(--text-primary);
}

/* Split Button Dropdown */
.split-button {
  position: relative;
  display: flex;
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  overflow: visible;
  background: var(--accent);
  color: var(--accent-on);
}

.split-button__action {
  all: unset;
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--accent-on);
  padding: var(--space-2) var(--space-3);
  border-right: 1px solid color-mix(in srgb, var(--accent-on) 15%, transparent);
}

.split-button__caret {
  all: unset;
  cursor: pointer;
  font-size: var(--text-xs);
  color: var(--accent-on);
  padding: var(--space-2) var(--space-2);
}

.split-button:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  min-width: 180px;
  z-index: 50;
  padding: var(--space-1);
}

.dropdown-menu button {
  all: unset;
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  text-align: left;
}

.dropdown-menu button:hover {
  background: var(--accent-soft);
  color: var(--text-primary);
}

/* Messages List cards */
.messages-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.message-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.message-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-subtle);
  transition: background 150ms ease;
}

.message-card__header:hover {
  background: var(--surface-3);
}

.message-card.collapsed .message-card__header {
  border-bottom: none;
}

.message-card__role {
  font-size: var(--type-overline-size);
  font-weight: var(--weight-bold);
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
}

.message-card__role.system { color: var(--warn); background: var(--warn-soft); }
.message-card__role.user { color: var(--info); background: var(--info-soft); }
.message-card__role.assistant { color: var(--success); background: var(--success-soft); }

.redacted-pill {
  font-size: 8px;
  font-weight: var(--weight-bold);
  color: var(--danger);
  background: var(--danger-soft);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  padding: 1px var(--space-2);
  border-radius: var(--radius-pill);
}

.tokens-badge {
  font-size: var(--type-overline-size);
  color: var(--text-tertiary);
}

.message-card__copy-btn {
  all: unset;
  cursor: pointer;
  margin-left: auto;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.message-card__copy-btn:hover {
  color: var(--text-primary);
}

.message-card__body {
  padding: var(--space-4);
}

.raw-text-body {
  margin: 0;
  white-space: pre-wrap;
  font-family: var(--font-mono, monospace);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.reasoning-block {
  margin-top: var(--space-4);
  padding: var(--space-3);
  border: 1px dashed var(--border-strong);
  background: var(--surface-2);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.reasoning-block__header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-tertiary);
  font-family: inherit;
  font-weight: var(--weight-bold);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-size: var(--type-overline-size);
  cursor: pointer;
}

.reasoning-block__header:focus-visible {
  outline: 2px solid var(--accent-focus);
  outline-offset: var(--space-1);
}

.reasoning-block__chevron {
  display: inline-flex;
  transition: transform var(--duration-fast) var(--ease-out);
}

.reasoning-block__chevron.is-collapsed { transform: rotate(-90deg); }

.reasoning-block__body {
  margin-top: var(--space-2);
  white-space: pre-wrap;
  font-family: var(--font-mono, monospace);
  line-height: var(--leading-relaxed);
}

/* --- Replay & Compare CSS --- */
.inspect-detail__body--replay {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

#panel-replay {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.replay-header-params {
  display: flex;
  gap: var(--space-5);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  align-items: stretch;
  flex-shrink: 0;
}

.replay-prompt-box {
  display: flex;
  flex-direction: column;
  flex: 2 1 300px;
  min-width: 250px;
  height: 100%;
}

.replay-sliders-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2) var(--space-4);
  flex: 1.2 2 200px;
  min-width: 180px;
}

.slider-row-compact {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
}

.slider-row-compact label {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.slider-row-compact .val-display {
  font-size: var(--text-xs);
  color: var(--text-primary);
  font-weight: var(--weight-bold);
}

.slider-row-compact input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.replay-actions-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  justify-content: flex-end;
  flex: 0 0 160px;
}

.replay-actions-subrow {
  display: flex;
  gap: var(--space-2);
}

.replay-actions-subrow button {
  flex: 1;
}

.system-prompt-textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  color: var(--text-primary);
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  resize: vertical;
  flex: 1;
  min-height: 0;
}

.replay-results-section {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

@media (max-width: 900px) {
  .replay-header-params {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
  }
  .replay-prompt-box {
    width: 100%;
    min-width: 0;
  }
  .replay-sliders-grid {
    grid-template-columns: 1fr;
    width: 100%;
    min-width: 0;
  }
  .replay-actions-column {
    flex-direction: row;
    width: 100%;
    flex: none;
    gap: var(--space-2);
  }
  .replay-actions-column > button {
    flex: 2;
  }
  .replay-actions-subrow {
    display: contents;
  }
  .replay-actions-subrow button {
    flex: 1;
  }
}

.comparison-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  height: 100%;
  min-height: 0;
}

.comparison-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: 100%;
  min-height: 0;
}

.comparison-col__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-1);
  min-height: 24px;
}

.comparison-col h5 {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--text-secondary);
  letter-spacing: var(--tracking-caps);
}

.metric-ministrip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.metric-badge {
  display: inline-flex;
  font-size: 9px;
  font-weight: var(--weight-semibold);
  color: var(--text-tertiary);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  align-items: center;
  gap: var(--space-1);
}

.delta-chip {
  display: inline-flex;
  font-size: 9px;
  font-weight: var(--weight-bold);
  padding: 0 4px;
  border-radius: var(--radius-sm);
}

.delta-chip.better { color: var(--success); background: var(--success-soft); }
.delta-chip.worse { color: var(--danger); background: var(--danger-soft); }

.comparison-output-box {
  flex: 1;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  background: var(--surface-1);
  min-height: 0;
  font-size: var(--text-sm);
  color: var(--text-primary);
  line-height: var(--leading-relaxed);
  overflow-y: auto;
  white-space: pre-wrap;
}

.comparison-output-box.replay {
  background: var(--surface-base);
  border-color: var(--border-strong);
}

.replay-loading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
}

.spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spinner-rot 0.8s linear infinite;
}

@keyframes spinner-rot {
  to { transform: rotate(360deg); }
}

.replay-btn {
  all: unset;
  cursor: pointer;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-align: center;
}

.replay-btn.primary {
  background: var(--accent);
  color: var(--accent-on);
}

.replay-btn.primary:disabled {
  background: var(--border-subtle);
  color: var(--text-disabled);
  cursor: not-allowed;
}

.replay-btn.outline {
  background: var(--surface-1);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

.protocol-selector-segmented {
  display: flex;
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1px;
}

.protocol-selector-segmented button {
  all: unset;
  cursor: pointer;
  font-size: var(--type-overline-size);
  font-weight: var(--weight-bold);
  color: var(--text-tertiary);
  padding: 3px var(--space-2);
  border-radius: var(--radius-sm);
}

.protocol-selector-segmented button.active {
  background: var(--surface-2);
  color: var(--text-primary);
}

.curl-box {
  position: relative;
  padding: var(--space-4);
}

.curl-box pre {
  margin: 0;
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  overflow-x: auto;
  white-space: pre-wrap;
}

.improve-container {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--space-5);
  flex: 1;
  min-height: 0;
}

.improve-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  height: 100%;
}

.improve-inputs-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-4);
}

.critique-input-control {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: var(--text-sm);
}

.meta-prompt-preview-container {
  display: flex;
  flex-direction: column;
}

.preview-toggle-btn {
  all: unset;
  cursor: pointer;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-decoration: underline;
  text-align: left;
  margin-bottom: var(--space-2);
}

.preview-toggle-btn:hover {
  color: var(--text-secondary);
}

.improve-btn {
  all: unset;
  cursor: pointer;
  background: var(--accent);
  color: var(--accent-on);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  border-radius: var(--radius-md);
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
}

.improve-btn:hover {
  background: var(--accent-hover);
}

.improve-btn:disabled {
  background: var(--border-subtle);
  color: var(--text-disabled);
  cursor: not-allowed;
}

.improve-btn.outline {
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}

.improve-btn.outline:hover {
  background: var(--surface-2);
  color: var(--text-primary);
}

/* Critique Ledger */
.critique-ledger {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.critique-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--duration-fast), background var(--duration-fast);
}

.critique-card:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
}

.critique-card[aria-expanded="true"] {
  border-color: var(--accent, var(--border-strong));
  background: var(--surface-2);
}

.critique-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.critique-category-icon {
  font-size: var(--text-sm);
  display: inline-flex;
  align-items: center;
}

.critique-severity-pill {
  font-size: var(--type-overline-size);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.05em;
}

.critique-severity-pill.high {
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
}

.critique-severity-pill.medium {
  background: var(--warn-soft);
  color: var(--warning);
  border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
}

.critique-severity-pill.low {
  background: var(--success-soft);
  color: var(--success);
  border: 1px solid color-mix(in srgb, var(--success) 30%, transparent);
}

.critique-finding {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}

.critique-rationale {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--surface-alpha-02);
  border-left: 3px solid var(--border-strong);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  line-height: var(--leading-normal);
  animation: inspectFadeIn 180ms ease-out;
}

.critique-rationale.high {
  border-left-color: var(--danger);
}

.critique-rationale.medium {
  border-left-color: var(--warning);
}

.critique-rationale.low {
  border-left-color: var(--success);
}

/* Diff Workspace */
.diff-workspace {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-2);
  flex: 1;
  min-height: 0;
}

.diff-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  align-items: stretch;
  flex: 1;
  min-height: 0;
}

.diff-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: 100%;
}

.diff-col h5 {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-tertiary);
  letter-spacing: var(--tracking-caps);
}
.diff-box {
  flex: 1;
  height: 100%;
  min-height: 0;
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  color: var(--text-primary);
  overflow-y: auto;
  overflow-x: auto;
  white-space: pre-wrap;
  position: relative;
}

.diff-box textarea {
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  resize: none;
  outline: none;
  padding: 0;
}

/* Critique Category Groups */
.critique-category-group {
  margin-bottom: var(--space-5);
}

.critique-category-group-header {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--text-tertiary);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: var(--space-1);
}

.diff-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  margin-top: var(--space-2);
}

.attention-badge {
  background: var(--warn-soft);
  color: var(--warn);
  border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
  font-size: var(--type-overline-size);
  font-weight: var(--weight-bold);
  padding: 4px var(--space-2);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-1);
  align-self: flex-start;
}

.iteration-metrics {
  display: flex;
  gap: var(--space-3);
}

.iteration-metric-pill {
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  padding: 4px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.improvement-results-panel {
  border: 1px solid var(--border-subtle);
  background: var(--surface-base);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  animation: inspectFadeIn 280ms ease-out;
}

.replay-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  padding: var(--space-4);
  color: var(--text-tertiary);
}

.replay-empty-state__icon {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-2);
  color: var(--text-disabled);
}

.replay-empty-state__title {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
}

.replay-empty-state__desc {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  max-width: 220px;
  margin: 0;
  line-height: var(--leading-normal);
}

/* Global status toast notification */
.inspect-toast-status {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  color: var(--text-primary);
  z-index: 2000;
  animation: inspectToastFade 220ms ease-out;
}

@keyframes inspectToastFade {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* --- Layout Responsiveness (≤ 900px) --- */
@media (max-width: 900px) {
  .inspect-layout {
    grid-template-columns: 1fr;
    grid-template-rows: 44vh minmax(0, 1fr);
  }

  .inspect-rail {
    height: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
  }

  .inspect-detail {
    height: 100%;
  }

  .improve-inputs-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Accessibility Audited Fixes --- */

/* A11Y-01: Restore focus outlines for unset interactive controls in Session Inspector */
/* Selection lists are excluded: .workspace-list-row owns its own focus ring,
   and matching [role="option"] here gave telemetry rows a 2px offset that no
   other list had. */
.inspect-layout button:focus-visible,
.inspect-layout select:focus-visible,
.inspect-layout textarea:focus-visible,
.inspect-layout input:focus-visible,
.inspect-layout [role="tab"]:focus-visible {
  outline: 2px solid var(--accent-focus);
  outline-offset: 2px;
}

/* A11Y-07: Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .capturing .capture-badge__dot {
    animation: none !important;
  }
  .spinner {
    animation: none !important;
    border-top-color: transparent !important;
    border-style: double !important;
  }
}

/* --- Request Composer Modal --- */
.inspect-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--surface-glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 200;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: inspectFadeIn 200ms ease-out;
}

.inspect-modal-content {
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 90vw;
  max-width: 600px;
  max-height: 90vh;
  overflow: hidden;
  animation: inspectModalSlideUp 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.inspect-modal-content--full-height {
  height: 90vh;
  width: calc(100vw - 48px);
}

@keyframes inspectModalSlideUp {
  from { transform: translateY(16px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.inspect-modal-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface-2);
}

.inspect-modal-header h4 {
  margin: 0;
  font-size: var(--text-base);
  color: var(--text-primary);
  font-weight: var(--weight-bold);
}

.close-modal-btn {
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  cursor: pointer;
  padding: var(--space-1);
}

.close-modal-btn:hover {
  color: var(--text-primary);
}

.inspect-modal-body {
  padding: var(--space-5);
  overflow-y: auto;
  max-height: calc(90vh - 120px);
}

.inspect-modal-footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  background: var(--surface-2);
}

/* Model Search results */
.model-search-wrapper {
  position: relative;
}

.model-search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  max-height: 200px;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
  z-index: 210;
  padding: var(--space-1);
  display: flex;
  flex-direction: column;
}

.model-search-item {
  all: unset;
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  text-align: left;
}

.model-search-item:hover {
  background: var(--accent-soft);
  color: var(--text-primary);
}

/* Messages builder lists */
.add-msg-btn {
  background: transparent;
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  cursor: pointer;
}

.add-msg-btn:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

.modal-messages-list {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--surface-2);
}

.modal-message-row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  background: var(--surface-1);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}

.message-role-select {
  padding: var(--space-1) var(--space-5) var(--space-1) var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background-color: var(--surface-2);
  background-position: right 6px center;
  color: var(--text-primary);
  font-size: var(--text-xs);
  flex-shrink: 0;
}

.message-content-textarea {
  flex-grow: 1;
  resize: vertical;
  min-height: 38px;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: transparent;
  border: none;
  padding: 0;
}

.message-content-textarea:focus {
  outline: none;
}

.delete-msg-btn {
  background: transparent;
  color: var(--text-disabled);
  font-size: var(--text-xs);
  cursor: pointer;
  padding: var(--space-1);
  flex-shrink: 0;
}

.delete-msg-btn:hover {
  color: var(--danger);
}

/* --- Flex Utility Classes --- */
.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.justify-between {
  justify-content: space-between;
}

.align-center {
  align-items: center;
}

/* Spacing gaps */
.gap-4 { gap: var(--space-1); }
.gap-6 { gap: var(--space-2); }
.gap-8 { gap: var(--space-2); }
.gap-12 { gap: var(--space-3); }
.gap-14 { gap: var(--space-4); }
.gap-16 { gap: var(--space-4); }

@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Redesign Inspection Cleanup Classes */
.close-modal-btn, .delete-msg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.parameter-grid {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.parameter-grid__item {
  flex: 1 1 200px;
}

.message-card__header-toggle {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  padding: 0;
  cursor: pointer;
  flex-grow: 1;
  text-align: left;
}

.message-card__caret {
  margin-right: var(--space-2);
  display: inline-flex;
  align-items: center;
  transition: transform 150ms ease;
}

.message-card__caret.collapsed {
  transform: rotate(-90deg);
}

.comparison-output-box.streaming {
  min-height: 150px;
  max-height: 300px;
  background: var(--surface-base);
  border-color: var(--border-strong);
}

.cursor-blink {
  display: inline-block;
  width: 2px;
  height: 14px;
  background: var(--accent);
  margin-left: 2px;
  vertical-align: middle;
  animation: blink 1s step-end infinite;
}

.dropdown-menu button.selected {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: var(--weight-bold);
}

.messages-raw-payload {
  flex-grow: 1;
  overflow: auto;
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  word-break: break-all;
}

/* ---------- Generated audio + 3D modalities ---------- */
.cap-badge--audio-gen { background: color-mix(in srgb, var(--cap-audio-generation) 16%, transparent); color: var(--cap-audio-generation); }
.cap-badge--model3d { background: color-mix(in srgb, var(--cap-model3d) 17%, transparent); color: color-mix(in srgb, var(--cap-model3d) 75%, var(--text-primary)); }
.composer__mode-badge--audio-gen { color: var(--cap-audio-generation); background: color-mix(in srgb, var(--cap-audio-generation) 12%, transparent); }
.composer__mode-badge--model3d { color: var(--cap-model3d); background: color-mix(in srgb, var(--cap-model3d) 12%, transparent); }

.composer__capability-settings {
  max-width: var(--max-content-width);
  margin: 0 auto var(--space-2);
  display: grid;
  grid-template-columns: repeat(5, minmax(92px, 1fr));
  gap: var(--space-2);
  padding: var(--space-3);
  background: color-mix(in srgb, var(--surface-1) 92%, transparent);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
}

.composer__audio-generation-settings {
  grid-template-columns: repeat(4, minmax(92px, 0.75fr)) minmax(130px, 1fr);
}

.composer__model3d-settings {
  grid-template-columns: minmax(150px, 1.1fr) minmax(180px, 1.5fr) repeat(3, minmax(112px, 0.8fr));
}

.composer__openmoss-settings {
  grid-template-columns: minmax(150px, 0.8fr) minmax(260px, 2fr);
}

.composer__openmoss-description {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  min-width: 0;
}

.composer__openmoss-description > span {
  display: flex;
  align-items: baseline;
  gap: var(--space-1-5);
  font-size: var(--type-overline-size);
  line-height: 1;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--weight-semibold);
}

.composer__openmoss-description > span small {
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--weight-normal);
}

.composer__openmoss-description input {
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0 var(--space-3);
  color: var(--text-primary);
  background: var(--surface-0);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: var(--text-sm);
  outline: none;
}

.composer__openmoss-description input:focus {
  border-color: var(--accent-fg);
  background: var(--surface-2);
}

.composer__openmoss-description input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.composer__openmoss-status {
  grid-column: 1 / -1;
  min-height: 18px;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

.composer__openmoss-status--error { color: var(--danger); }

.composer__image-setting small {
  position: absolute;
  align-self: flex-end;
  margin: 28px 8px 0 0;
  color: var(--text-tertiary);
  pointer-events: none;
}

.composer__audio-lyrics {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
}

.composer__audio-lyrics > span {
  font-size: var(--type-overline-size);
  line-height: 1;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--weight-semibold);
}

.composer__audio-lyrics > span small {
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--weight-normal);
}

.composer__audio-lyrics textarea {
  width: 100%;
  min-height: 82px;
  resize: vertical;
  padding: var(--space-3);
  color: var(--text-primary);
  background: var(--surface-0);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  outline: none;
}

.composer__audio-lyrics textarea:focus { border-color: var(--accent-fg); background: var(--surface-2); }
.composer__audio-lyrics textarea:disabled { opacity: 0.55; cursor: not-allowed; }

.message__model3d {
  width: min(100%, 720px);
  margin-top: var(--space-3);
}

.model3d-viewer {
  display: block;
  position: relative;
  width: 100%;
  height: 420px;
  min-height: 420px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  background: var(--surface-0);
}

.model3d-viewer canvas {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  cursor: grab;
}

.model3d-viewer canvas:active { cursor: grabbing; }

.model3d-viewer--loading,
.model3d-viewer--error {
  display: grid;
  place-items: center;
  padding: var(--space-6);
  color: var(--text-secondary);
  text-align: center;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.model3d-viewer--error { color: var(--danger); }

.message__model3d-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.message__model3d-actions .message__action {
  text-decoration: none;
}

.message__action--primary {
  color: var(--accent-fg);
  border-color: color-mix(in srgb, var(--accent-fg) 36%, var(--border-subtle));
  background: var(--accent-soft);
}

.message__model3d-note,
.message__model3d-error {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.message__model3d-error { color: var(--danger); }

@media (max-width: 1100px) {
  .composer__capability-settings,
  .composer__audio-generation-settings,
  .composer__openmoss-settings,
  .composer__model3d-settings {
    grid-template-columns: repeat(3, minmax(110px, 1fr));
  }
}

@media (max-width: 720px) {
  .composer__capability-settings,
  .composer__audio-generation-settings,
  .composer__openmoss-settings,
  .composer__model3d-settings {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .composer__image-setting--model,
  .composer__openmoss-description,
  .composer__audio-lyrics { grid-column: 1 / -1; }
  .model3d-viewer { height: 320px; min-height: 320px; }
  .model3d-viewer canvas { min-height: 320px; }
}

/* Generated-audio and 3D settings can become narrow while the desktop
   viewport stays wide when the logs splitter moves right. Reflow from the
   composer shell itself, just like image mode, so controls never overflow. */
@container composer-settings (max-width: 760px) {
  .composer__capability-settings,
  .composer__audio-generation-settings,
  .composer__model3d-settings {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-1-5);
    padding: var(--space-2);
  }

  .composer__openmoss-settings {
    grid-template-columns: minmax(120px, 0.8fr) minmax(0, 2fr);
    gap: var(--space-1-5);
    padding: var(--space-2);
  }
}

@container composer-settings (max-width: 500px) {
  .composer__capability-settings,
  .composer__audio-generation-settings,
  .composer__openmoss-settings,
  .composer__model3d-settings {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .composer__image-setting--model,
  .composer__openmoss-description,
  .composer__audio-lyrics {
    grid-column: 1 / -1;
  }
}

@container composer-settings (max-width: 360px) {
  .composer__openmoss-settings {
    grid-template-columns: minmax(0, 1fr);
  }

  .composer__openmoss-description {
    grid-column: 1;
  }
}

.message__audio-download {
  align-self: flex-start;
  margin-top: var(--space-2);
  text-decoration: none;
}

.cap-chip--audio-generation { --cap-color: var(--cap-audio-generation); }
.cap-chip--model3d { --cap-color: var(--cap-model3d); }

/* ── Unified workspace system ─────────────────────────────────
   Product views use the same rail → content hierarchy. The rail owns
   navigation and filters; the content pane owns one primary task. */

.workspace-rail {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface-1);
  border-right: 1px solid var(--border-subtle);
}

.workspace-rail__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--rail-toolbar);
  padding: 0 var(--space-2);
}

.workspace-rail__context {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  overflow: hidden;
  color: var(--text-tertiary);
}

.workspace-rail__title {
  overflow: hidden;
  font-size: var(--type-overline-size);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  letter-spacing: var(--tracking-caps);
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.workspace-rail__toggle {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: auto;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-tertiary);
}

.workspace-rail__toggle:hover,
.workspace-rail__toggle:focus-visible {
  border-color: var(--border-subtle);
  background: var(--surface-2);
  color: var(--text-primary);
}

.workspace-rail__mobile-close,
.workspace-mobile-menu-button,
.workspace-mobile-rail-backdrop {
  display: none;
}

.workspace-rail.is-collapsed > :not(.workspace-rail__header) { display: none; }
.workspace-rail.is-collapsed .workspace-rail__header {
  justify-content: center;
  padding-inline: var(--space-2);
}
.workspace-rail.is-collapsed .workspace-rail__context { display: none; }
.workspace-rail.is-collapsed .workspace-rail__toggle {
  margin-left: 0;
  border-color: var(--border-subtle);
  background: var(--surface-2);
  color: var(--text-primary);
}

.workspace-pane__header h1,
.workspace-pane__header h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--type-pane-title-size);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
}

.workspace-pane__header p {
  margin: var(--space-1) 0 0;
  color: var(--text-tertiary);
  font-size: var(--type-supporting-size);
  line-height: var(--leading-snug);
}

.workspace-eyebrow,
.workspace-control-group__label {
  color: var(--text-tertiary);
  font-size: var(--type-overline-size);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.workspace-rail__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-3);
}

.workspace-rail__footer {
  flex-shrink: 0;
  padding: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.workspace-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  padding: var(--space-3);
}

@media (min-width: 769px) {
  .workspace-rail > .workspace-nav,
  .workspace-catalog-layout .workspace-rail > .workspace-filter-list {
    min-height: 0;
    overflow-y: auto;
  }

  .workspace-rail > .workspace-nav {
    flex: 1 1 auto;
  }

  .workspace-catalog-layout .workspace-rail > .workspace-filter-list {
    flex: 0 1 auto;
  }
}

.workspace-nav button {
  width: 100%;
  min-height: 52px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  text-align: left;
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.workspace-nav button:hover {
  background: var(--surface-2);
  color: var(--text-primary);
}

.workspace-nav button.is-active {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent-fg) 32%, var(--border-subtle));
  color: var(--text-primary);
}

.workspace-nav__icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-tertiary);
}

.workspace-nav button.is-active .workspace-nav__icon {
  background: color-mix(in srgb, var(--accent-fg) 16%, var(--surface-2));
  color: var(--accent-fg);
}

.workspace-nav__copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
}

.workspace-nav__copy strong {
  overflow: hidden;
  color: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-nav__copy small {
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: var(--type-overline-size);
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-nav__chevron,
.workspace-nav__count {
  color: var(--text-disabled);
}

.workspace-filter-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  box-sizing: border-box;
  margin: 0;
  padding: var(--space-3) var(--space-2) var(--space-3);
  list-style: none;
}

.workspace-filter-list__item {
  width: 100%;
  min-height: var(--control-height-md);
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  text-align: left;
}

.workspace-filter-list__item:hover {
  background: var(--surface-2);
  color: var(--text-primary);
}

.workspace-filter-list__item.is-active {
  border-color: color-mix(in srgb, var(--accent-fg) 30%, transparent);
  background: var(--accent-soft);
  color: var(--accent-fg);
}

.workspace-filter-list__icon { color: var(--text-tertiary); }
.workspace-filter-list__item.is-active .workspace-filter-list__icon { color: var(--accent-fg); }

.workspace-filter-list__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-filter-list__count {
  color: var(--text-tertiary);
  font-size: var(--type-overline-size);
  font-variant-numeric: tabular-nums;
}

.workspace-filter-list__item.is-active .workspace-filter-list__count { color: var(--accent-fg); }

.workspace-filter-list__note {
  margin: var(--space-1) 0 0;
  padding-inline: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--type-caption-size);
  line-height: var(--leading-snug);
}

.workspace-pane {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--surface-base);
}

.workspace-pane__header {
  min-height: var(--workspace-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--panel-padding-inline);
  background: transparent;
}

.workspace-pane__header > div:first-child { min-width: 0; }

.workspace-pane__heading {
  min-width: 0;
  flex: 1 1 auto;
}

.workspace-pane__header-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  flex: 0 0 auto;
}

.workspace-pane__header-icon {
  width: var(--control-height-md);
  height: var(--control-height-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  color: var(--text-tertiary);
}

.workspace-pane__scroll {
  min-height: 0;
  overflow-y: auto;
}

.workspace-control-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.workspace-status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
}

.workspace-status > span:last-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.workspace-status strong { font-size: var(--text-xs); font-weight: var(--weight-medium); }
.workspace-status small { overflow: hidden; color: var(--text-tertiary); font-size: var(--type-overline-size); text-overflow: ellipsis; white-space: nowrap; }

/* Connect */
.connect--workspace {
  display: grid;
  grid-template-columns: var(--workspace-rail) minmax(0, 1fr);
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.connect--workspace.workspace--rail-collapsed,
.logs-workspace.workspace--rail-collapsed,
.workspace-catalog-layout.workspace--rail-collapsed {
  grid-template-columns: var(--rail-collapsed) minmax(0, 1fr);
}

.inspect-layout.workspace--rail-collapsed { grid-template-columns: var(--rail-collapsed) minmax(0, 1fr); }

.connect__main {
  display: grid;
  grid-template-rows: var(--workspace-header) minmax(0, 1fr);
}

.connect__layout {
  padding: var(--space-5);
}

.connect__section,
.connect--workspace .mcp-panel {
  width: min(880px, 100%);
  margin: 0;
  padding: 0;
}

.connect__section-head {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-3);
}

.connect__section-head--search { justify-content: flex-start; }

.connect__form,
.connect__directory-grid,
.connect__hint {
  width: min(var(--content-form-width), 100%);
}

.connect__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.connect__hint {
  margin: 0 0 var(--space-4);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.connect__directory-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.connect__actions,
.connect__quick-fill {
  width: auto;
}

.connect__quick-fill { margin-bottom: var(--space-3); }

.connect__provider-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.connect__add-provider {
  grid-column: 1;
  justify-self: start;
}

.connect__provider-list { margin-top: var(--space-4); }
.connect__provider-actions { width: auto; justify-content: flex-end; }
.connect__provider-actions .input { width: min(220px, 34vw); }

.connect__empty {
  padding: var(--space-4) 0;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

/* Apps */
.apps-workspace .workspace-catalog__grid { align-items: stretch; }

.app-card__logo {
  flex: none;
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

.app-card__logo--tile {
  background: #fff;
  border-radius: var(--radius-md);
}

.app-card__logo--fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1c1c1c;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.app-card__identity {
  min-width: 0;
  display: grid;
  gap: var(--space-0-5);
}

.app-card__name {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-card__description {
  flex: 1;
  margin: var(--space-3) 0 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.app-card__footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.app-card__actions {
  width: auto;
}

.app-card__category {
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.apps__empty,
.apps__error {
  padding: var(--space-4) 0;
  font-size: var(--text-sm);
}

.apps__empty { color: var(--text-tertiary); }
.apps__error { color: var(--danger); }

@media (max-width: 900px) {
  .connect__directory-grid,
  .connect__provider-form { grid-template-columns: 1fr; }
  .connect__add-provider { grid-column: auto; }
  .workspace-resource-row { align-items: start; }
  .workspace-resource-row__actions { grid-column: 2 / -1; justify-content: flex-start; }
}

/* Logs */
.logs-workspace {
  display: grid;
  grid-template-columns: var(--workspace-rail) minmax(0, 1fr);
}

.logs-rail__status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.logs-rail__body { display: flex; flex-direction: column; gap: var(--space-3); }
.logs-rail__search { display: flex; flex-direction: column; gap: var(--space-1); }
.logs-rail__search .logs-search { width: 100%; }
.logs-rail__body .logs-level { align-items: stretch; flex-direction: column; gap: var(--space-1); }
.logs-rail__body .logs-level__select { width: 100%; height: var(--control-height); }

.logs-sources { gap: var(--space-0-5); }
.logs-sources .workspace-control-group__label { margin-bottom: var(--space-1); }

.logs-rail__actions { display: grid; gap: var(--space-2); }
.logs-rail__actions .logs-btn { width: 100%; }

.logs-main {
  position: relative;
  display: grid;
  grid-template-rows: var(--workspace-header) minmax(0, 1fr);
}

.logs-main__tools { display: flex; align-items: center; gap: var(--space-2); }
.workspace-action-button.logs-filter-toggle,
.workspace-action-button.logs-rail__mobile-close { display: none; }
.monitor-subpanel__title-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.monitor-subpanel__title-row > div { min-width: 0; }
/* Catalog layout — shared contract for tabs with a filter rail and card grid
   (Backends, Apps) */
.workspace-catalog-layout {
  display: grid;
  grid-template-columns: var(--workspace-rail) minmax(0, 1fr);
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
}

.workspace-catalog-layout__main {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.workspace-catalog-layout__content {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: var(--space-2) var(--panel-padding-inline) var(--space-6);
}

/* Backends */
.backends--workspace .backends__head { padding: 0 var(--panel-padding-inline); }
.backends__rail-footer { display: grid; gap: var(--space-3); }
.backends__rail-footer .backends__toggle { justify-content: flex-start; }
.backends__runtime-meta { display: flex; flex-direction: column; gap: var(--space-0-5); }
.backends__runtime-meta strong { font-size: var(--text-xs); font-weight: var(--weight-medium); }
.backends__runtime-meta small { color: var(--text-tertiary); font-size: var(--type-overline-size); line-height: var(--leading-snug); }

.backends--workspace .matrix {
  min-height: 0;
  margin: var(--space-4);
  border-radius: var(--radius-md);
  box-shadow: none;
}

.backends__filter-empty {
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-2);
  margin: var(--space-4);
  color: var(--text-tertiary);
  text-align: center;
}
.backends__filter-empty strong { color: var(--text-primary); font-size: var(--text-sm); }
.backends__filter-empty span { max-width: 320px; font-size: var(--text-xs); }
.backends__filter-empty + .workspace-catalog-layout__content { display: none; }

.backends--workspace .matrix th,
.backends--workspace .matrix td { padding: var(--space-3); }
.backends--workspace .cell { gap: var(--space-2); }

/* Shared catalog: sectioned card grid */
.workspace-catalog {
  display: grid;
  gap: var(--space-6);
}

.workspace-catalog__section {
  display: grid;
  gap: var(--space-3);
}

.workspace-catalog__heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-3);
}

.workspace-catalog__heading h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.workspace-catalog__heading p {
  margin: var(--space-1) 0 0;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

.workspace-catalog__heading > span {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.workspace-catalog__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-3);
  align-items: start;
}

.workspace-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--space-4);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.workspace-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}

.workspace-card__name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--text-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.backend-card__logo {
  flex: 1;
  height: 48px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

.backend-card__logo--dark {
  background: #000;
}

.backend-card__logo img {
  max-width: 100%;
  max-height: 30px;
  object-fit: contain;
}

.backend-card__logo-name {
  overflow: hidden;
  color: #1c1c1c;
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.backend-card__logo--dark .backend-card__logo-name { color: #fff; }
.backend-card__logo--image-only .backend-card__logo-name { display: none; }

.backend-card__footer,
.backend-card__actions {
  display: flex;
  align-items: center;
}

.backend-card__variants {
  display: grid;
}

.backend-card__variant {
  display: grid;
  gap: var(--space-1-5, 6px);
  min-width: 0;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border-subtle);
}

.backend-card__variant:first-child {
  border-top: 0;
}

.backend-card__variant:last-child {
  padding-bottom: 0;
}

.backend-card__variant-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.backend-card__variant-name {
  display: flex;
  align-items: center;
  gap: var(--space-1-5, 6px);
  margin: 0;
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}

.backend-card .cell__experimental-icon { color: var(--text-tertiary); }

.backend-card .cell__badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-1-5, 6px);
  padding: 0;
  background: none;
  border-radius: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: normal;
  text-transform: none;
}

.backend-card .cell__badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.backend-card__variant-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

.backend-card__version {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

/* Optically center the icon on the digits: flex centering uses the full line
   box, whose descender space the mono digits never occupy. */
.backend-card__version .app-icon { transform: translateY(-1.5px); }

a.backend-card__version {
  text-decoration: none;
}

a.backend-card__version:hover,
a.backend-card__version:focus-visible {
  color: var(--text-primary);
  text-decoration: underline;
}

.backend-card__footer {
  gap: var(--space-2);
  margin-top: var(--space-1);
}

/* Uninstall repeats on every installed row; keep it neutral at rest so the
   danger color only signals on intent, not across the whole catalog. */
.backend-card .btn--danger:not(:hover):not(:focus-visible) {
  border-color: var(--border-subtle);
  background: none;
  color: var(--text-tertiary);
}

.backend-card__footer:empty {
  display: none;
}

.backend-card__actions { gap: var(--space-2); }

.backend-card__note {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.backend-card__note--error { color: var(--danger); }

.backend-card__variant--unsupported .backend-card__variant-name,
.backend-card__variant--unsupported .backend-card__variant-meta,
.backend-card__variant--unsupported .backend-card__version {
  color: var(--text-disabled);
}

.backend-card__variant--unsupported a.backend-card__version:hover,
.backend-card__variant--unsupported a.backend-card__version:focus-visible {
  color: var(--text-secondary);
}

@media (max-width: 680px) {
  .workspace-catalog-layout__content { padding: var(--space-2) var(--space-4) var(--space-5); }
  .workspace-catalog__grid { grid-template-columns: 1fr; }
  .workspace-catalog__heading { align-items: flex-start; flex-direction: column; gap: var(--space-1); }
  .backend-card__variant-head { gap: var(--space-2); }
  .backend-card__footer { align-items: flex-start; flex-direction: column; }
  .backend-card__actions { flex-wrap: wrap; }
}

/* Monitor */
.monitor-performance {
  display: block;
}

.monitor-main {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.monitor-header__actions,
.monitor-header__server,
.monitor-header__server > span:last-child {
  display: flex;
  align-items: center;
}
.monitor-header__actions { flex: 0 0 auto; gap: var(--space-3); }
.monitor-header > div:first-child { flex: 1 1 auto; }
.monitor-header__server { gap: var(--space-2); }
.monitor-header__server > span:last-child { flex-direction: column; align-items: flex-start; }
.monitor-header__server strong { font-size: var(--text-xs); font-weight: var(--weight-medium); white-space: nowrap; }
.monitor-header__server small { color: var(--text-tertiary); font-size: var(--type-overline-size); }
.monitor-performance .dash2-scroll { min-height: 0; padding: var(--space-4); gap: var(--space-4); }
.monitor-performance .dash2-card {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  box-shadow: none;
}
.monitor-performance .dash2-card__h { margin-bottom: var(--space-4); font-size: var(--text-xs); }
.monitor-performance .dash2-hero-metric__val { font-size: var(--text-2xl); }

.monitor-workspace {
  display: grid;
  grid-template-columns: var(--workspace-rail) minmax(0, 1fr);
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.monitor-workspace.workspace--rail-collapsed {
  grid-template-columns: var(--rail-collapsed) minmax(0, 1fr);
}

.monitor-content,
.monitor-section {
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.monitor-section[hidden] { display: none; }

.monitor-subpanel {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--border-subtle);
  background: var(--surface-1);
}

.monitor-subpanel__header {
  min-height: var(--workspace-header);
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  padding: var(--space-3) var(--space-4);
}

.monitor-subpanel__header h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--type-panel-title-size);
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  letter-spacing: var(--tracking-tight);
}

.monitor-subpanel__header p {
  margin: var(--space-1) 0 0;
  color: var(--text-tertiary);
  font-size: var(--type-supporting-size);
  line-height: var(--leading-snug);
}

.monitor-subpanel__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-3);
}

.monitor-subpanel__footer {
  flex-shrink: 0;
  padding: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.inspect-layout--embedded {
  grid-template-columns: 300px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

.logs-workspace--embedded {
  grid-template-columns: 280px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

.logs-workspace--embedded .logs-rail__body { padding: var(--space-3); }
.context-rail__section-head { display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); color: var(--text-tertiary); font-size: var(--type-overline-size); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.context-rail__section-head small { font-size: var(--type-overline-size); font-weight: var(--weight-regular); }

/* Existing split panes join the same visual grammar. */
.chat > .rail,
.model-nav-rail,
.model-list-panel,
.inspect-rail,
.context-rail { background: var(--surface-1); }

.inspect-rail__filters .filter-chip { text-align: center; }

@media (max-width: 1100px) {
  :root { --workspace-list: 286px; }
  .titlebar__nav button { min-width: 42px; padding-inline: var(--space-2); }
  .titlebar__nav .nav-label { display: none; }
  .titlebar__brand-name { display: none; }
  .workspace-nav__copy small { display: none; }
  .workspace-nav button { min-height: 44px; }
  .workspace-pane__header { padding-inline: var(--space-4); }
  .workspace-catalog-layout__content, .backends--workspace .backends__head { padding-inline: var(--space-4); }
  .inspect-layout--embedded { grid-template-columns: 280px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .logs-workspace--embedded { grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .titlebar.titlebar--desktop {
    column-gap: var(--space-1);
    padding-inline: var(--space-2);
  }

  .titlebar--desktop .titlebar__brand {
    margin-inline-start: var(--space-1);
  }

  .titlebar--desktop .titlebar__right,
  .titlebar--desktop .titlebar__utilities,
  .titlebar--desktop .titlebar__utility-menu {
    gap: var(--space-1);
  }

  .titlebar--desktop .titlebar__window-btn {
    width: 32px;
    height: 32px;
  }
}

@media (max-width: 820px) {
  .titlebar--desktop .titlebar__nav {
    transform: translateX(clamp(-44px, calc((100vw - 820px) * 0.2), 0px));
  }
}

@media (max-width: 768px) {
  .connect--workspace,
  .logs-workspace,
  .workspace-catalog-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  .connect--workspace.workspace--rail-collapsed,
  .logs-workspace.workspace--rail-collapsed,
  .workspace-catalog-layout.workspace--rail-collapsed {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  .connect--workspace .workspace-rail,
  .logs-workspace .workspace-rail,
  .workspace-catalog-layout .workspace-rail {
    border-right: 0;
    border-bottom: 1px solid var(--border-subtle);
  }

  .connect--workspace .workspace-rail__header,
  .logs-workspace .workspace-rail__header,
  .workspace-catalog-layout .workspace-rail__header,
  .connect--workspace .workspace-rail__footer,
  .logs-workspace .workspace-rail__footer,
  .workspace-catalog-layout .workspace-rail__footer,
  .logs-workspace .workspace-rail__body { display: none; }

  .connect--workspace .workspace-nav,
  .workspace-catalog-layout .workspace-filter-list {
    flex-direction: row;
    overflow-x: auto;
    padding: var(--space-2);
  }

  .connect--workspace .workspace-rail.is-collapsed > .workspace-nav,
  .workspace-catalog-layout .workspace-rail.is-collapsed > .workspace-filter-list {
    display: flex;
  }

  .connect--workspace .workspace-nav button,
  .workspace-catalog-layout .workspace-filter-list__item { width: auto; min-width: 44px; grid-template-columns: 18px; }
  .connect--workspace .workspace-nav__copy,
  .connect--workspace .workspace-nav__chevron,
  .workspace-catalog-layout .workspace-filter-list__label,
  .workspace-catalog-layout .workspace-filter-list__count { display: none; }
  .workspace-pane__header p { display: none; }
  .monitor-workspace,
  .monitor-workspace.workspace--rail-collapsed {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  .monitor-workspace > .workspace-rail {
    border-right: 0;
    border-bottom: 1px solid var(--border-subtle);
  }

  .monitor-workspace .workspace-rail__header { display: none; }

  .monitor-workspace .monitor-nav,
  .monitor-workspace .workspace-rail.is-collapsed > .monitor-nav {
    display: flex;
    flex-direction: row;
    gap: var(--space-1);
    overflow-x: auto;
    padding: var(--space-2);
  }

  .monitor-workspace .monitor-nav button {
    width: auto;
    min-width: 44px;
    min-height: 40px;
    grid-template-columns: 28px;
  }

  .monitor-workspace .monitor-nav .workspace-nav__copy,
  .monitor-workspace .monitor-nav .workspace-nav__chevron { display: none; }

  .workspace-catalog-layout__main {
    overflow-y: auto;
  }

  .workspace-catalog-layout__content {
    flex: none;
    min-height: auto;
    overflow: visible;
  }

  .backends--workspace .matrix {
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
  }

  .inspect-layout--embedded {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }

  .inspect-layout--embedded .inspect-rail,
  .inspect-layout--embedded .inspect-detail {
    grid-column: 1;
    grid-row: 1;
  }

  .inspect-layout--embedded .inspect-detail { display: none; }
  .inspect-layout--embedded.inspect-layout--detail-open .inspect-rail { display: none; }
  .inspect-layout--embedded.inspect-layout--detail-open .inspect-detail { display: flex; }
  .inspect-layout--embedded .inspect-detail__mobile-back { display: inline-flex; align-self: flex-start; }
  .inspect-layout--embedded .inspect-detail__mobile-back .app-icon { transform: rotate(180deg); }
  .inspect-layout--embedded .inspect-detail__header { padding: var(--space-3) var(--space-3) 0; }

  .logs-workspace--embedded {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }

  .logs-workspace--embedded .logs-main {
    grid-column: 1;
    grid-row: 1;
  }

  .logs-workspace--embedded .logs-rail { display: none; }

  .logs-workspace--embedded.logs-workspace--filters-open .logs-rail {
    display: flex;
    position: absolute;
    inset: var(--space-2);
    z-index: 70;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
  }

  .logs-workspace--embedded .workspace-action-button.logs-filter-toggle,
  .logs-workspace--embedded .workspace-action-button.logs-rail__mobile-close { display: inline-flex; }

}

@media (max-width: 768px) {
  .chat.rail-expanded,
  .chat:not(.rail-expanded) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "main"
      "composer";
  }

  .chat .rail.workspace-rail { display: none; }

}

@media (min-width: 769px) and (max-width: 1320px) {
  .titlebar__search,
  .titlebar__search:focus-within {
    width: 32px;
    flex-basis: 32px;
  }

  .titlebar__search-leading-icon { display: none; }
  .titlebar__search-toggle { display: inline-flex; }
  .titlebar__search-popover { display: none; }

  .titlebar__search.is-open .titlebar__search-popover {
    width: min(320px, calc(100vw - 24px));
    display: block;
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    z-index: 80;
    padding: var(--space-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: var(--shadow-lg);
  }

  .titlebar__search.is-open .titlebar__search-entry { width: 100%; }

  .titlebar__search.is-open .titlebar__search-results {
    position: static;
    width: 100%;
    max-height: min(420px, calc(100vh - var(--titlebar-height) - 80px));
    margin-top: var(--space-1);
    overflow-y: auto;
  }

  /* Apps uses the shared titlebar search as its primary pane search. Keep the
     actual field visible at the standard Playwright/desktop width instead of
     collapsing it behind the search icon. */
  .titlebar__search.is-context-visible,
  .titlebar__search.is-context-visible:focus-within {
    width: 176px;
    flex-basis: 176px;
  }

  .titlebar__search.is-context-visible .titlebar__search-leading-icon {
    display: block;
  }

  .titlebar__search.is-context-visible .titlebar__search-toggle {
    display: none;
  }

  .titlebar__search.is-context-visible .titlebar__search-popover,
  .titlebar__search.is-context-visible.is-open .titlebar__search-popover {
    position: relative;
    inset: auto;
    width: auto;
    display: flex;
    flex: 1;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .titlebar__search.is-context-visible.is-open .titlebar__search-results {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    width: 100%;
    max-height: min(420px, calc(100vh - var(--titlebar-height) - 80px));
    margin-top: 0;
    overflow-y: auto;
  }
}

@media (min-width: 769px) and (max-width: 1320px) {
  .titlebar--desktop .titlebar__search.is-context-visible,
  .titlebar--desktop .titlebar__search.is-context-visible:focus-within {
    width: 32px;
    flex-basis: 32px;
  }

  .titlebar--desktop .titlebar__search.is-context-visible .titlebar__search-leading-icon {
    display: none;
  }

  .titlebar--desktop .titlebar__search.is-context-visible .titlebar__search-toggle {
    display: inline-flex;
  }

  .titlebar--desktop .titlebar__search.is-context-visible .titlebar__search-popover {
    display: none;
  }

  .titlebar--desktop .titlebar__search.is-context-visible.is-open .titlebar__search-popover {
    width: min(320px, calc(100vw - 24px));
    display: block;
    position: absolute;
    inset: auto 0 auto auto;
    top: calc(100% + var(--space-2));
    z-index: 80;
    padding: var(--space-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: var(--shadow-lg);
  }

  .titlebar--desktop .titlebar__search.is-context-visible.is-open .titlebar__search-entry {
    width: 100%;
  }

  .titlebar--desktop .titlebar__search.is-context-visible.is-open .titlebar__search-results {
    position: static;
    width: 100%;
    max-height: min(420px, calc(100vh - var(--titlebar-height) - 80px));
    margin-top: var(--space-1);
    overflow-y: auto;
  }
}

@media (max-width: 768px) {
  .titlebar__brand { display: none; }
  .titlebar__right { justify-self: end; }

  .titlebar__status-dot--brand { display: none; }

  .titlebar__utilities-toggle { display: inline-flex; }

  .titlebar__utility-menu {
    width: min(320px, calc(100vw - 24px));
    display: none;
    position: fixed;
    top: calc(var(--titlebar-height) + var(--space-2));
    right: var(--space-3);
    z-index: 80;
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-0-5);
    padding: var(--space-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: var(--shadow-lg);
  }

  .titlebar__utilities.is-open .titlebar__utility-menu { display: flex; }

  .titlebar__utility-menu .titlebar__search,
  .titlebar__utility-menu .titlebar__search:focus-within {
    width: 100%;
    height: 44px;
    padding: 0 var(--space-3);
  }

  .titlebar__utility-menu .titlebar__search-results {
    top: calc(100% + var(--space-1));
  }

  .titlebar__utility-menu .titlebar__theme-toggle,
  .titlebar__utility-menu .titlebar__download-toggle {
    width: 100%;
    height: 44px;
    justify-content: flex-start;
    gap: var(--space-3);
    padding: 0 var(--space-3);
    border-color: transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
  }
  .titlebar__utility-menu .titlebar__theme-toggle:hover,
  .titlebar__utility-menu .titlebar__download-toggle:hover {
    border-color: transparent;
    background: var(--surface-2);
    color: var(--text-primary);
  }

  .titlebar__utility-status {
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-secondary);
  }

  .titlebar__utility-status .titlebar__status-dot {
    margin-inline: 8px 4px;
  }
  .titlebar__utility-label,
  .titlebar__utility-value { display: inline; }

  .titlebar__utility-value {
    margin-left: auto;
    color: var(--text-tertiary);
    font-size: var(--text-xs);
  }

  .titlebar__utility-menu .titlebar__download-badge {
    position: static;
    margin-left: auto;
    border-color: transparent;
  }
}

@media (max-width: 768px) {

  .empty-state--inset {
    margin-top: 0;
    padding: var(--space-5) var(--space-3);
  }

  .workspace-mobile-menu-button {
    width: 32px;
    height: 32px;
    display: inline-flex;
    position: fixed;
    top: 10px;
    left: var(--space-3);
    z-index: 40;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    background: var(--surface-1);
    color: var(--text-secondary);
    box-shadow: var(--shadow-sm);
  }

  .workspace-mobile-menu-button:hover,
  .workspace-mobile-menu-button:focus-visible,
  .workspace-mobile-menu-button[aria-expanded="true"] {
    border-color: var(--border-strong);
    background: var(--surface-3);
    color: var(--text-primary);
  }

  .workspace-mobile-menu-button[aria-expanded="true"] { z-index: 902; }

  .workspace-mobile-rail-backdrop {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 60;
    border: 0;
    background: var(--surface-overlay);
  }

  .workspace-rail.mobile-context-panel {
    display: none;
  }

  .workspace-rail.mobile-context-panel.is-mobile-open {
    width: auto;
    max-height: calc(100% - var(--space-4));
    display: flex;
    position: absolute;
    inset: auto var(--space-2) var(--space-2);
    z-index: 61;
    overflow: hidden;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--surface-1);
    box-shadow: var(--shadow-lg);
  }

  .workspace-rail.mobile-context-panel.is-mobile-open .workspace-rail__header {
    display: flex;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-subtle);
  }

  .workspace-rail.mobile-context-panel > .workspace-nav,
  .workspace-rail.mobile-context-panel > .workspace-filter-list {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    padding: var(--space-3);
  }

  .workspace-rail.mobile-context-panel .workspace-nav button,
  .workspace-rail.mobile-context-panel .workspace-filter-list__item {
    width: 100%;
  }

  .workspace-rail.mobile-context-panel .workspace-nav button {
    min-height: 52px;
    grid-template-columns: 28px minmax(0, 1fr) auto;
  }

  .workspace-rail.mobile-context-panel .workspace-filter-list__item {
    min-height: 36px;
    grid-template-columns: 18px minmax(0, 1fr) auto;
  }

  .workspace-rail.mobile-context-panel .workspace-nav__copy,
  .workspace-rail.mobile-context-panel .workspace-nav__chevron,
  .workspace-rail.mobile-context-panel .workspace-filter-list__label,
  .workspace-rail.mobile-context-panel .workspace-filter-list__count,
  .workspace-rail.mobile-context-panel .workspace-rail__footer {
    display: flex;
  }

  .workspace-rail.mobile-context-panel .workspace-nav__copy small {
    display: block;
  }

  .workspace-rail.mobile-context-panel .workspace-rail__footer {
    flex-direction: column;
  }

  .workspace-rail.mobile-context-panel .backends__rail-footer {
    display: grid;
  }

  .workspace-rail.mobile-context-panel .workspace-rail__toggle {
    display: none;
  }

  .workspace-rail__mobile-close {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: auto;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    color: var(--text-secondary);
  }

  .workspace-rail__mobile-close:hover,
  .workspace-rail__mobile-close:focus-visible {
    color: var(--text-primary);
    border-color: var(--border-strong);
  }

  .connect--workspace,
  .monitor-workspace,
  .workspace-catalog-layout {
    position: relative;
  }

  .connect--workspace,
  .monitor-workspace,
  .workspace-catalog-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }

  .model-nav-rail .model-nav-rail__scroll {
    overscroll-behavior: contain;
    padding: var(--space-3);
  }

  .model-nav-rail .model-nav-rail__primary.workspace-filter-list {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .manager--detail.manager--detail-mobile-open > .workspace-mobile-menu-button {
    display: none;
  }

  .manager--detail.manager--nav-open .model-nav-rail .workspace-rail__header {
    display: flex;
  }

  .manager--detail.manager--nav-open .model-list-panel {
    display: flex;
  }
}

@media (max-width: 480px) {
  .titlebar {
    grid-template-columns: minmax(44px, 1fr) auto minmax(32px, 1fr);
    column-gap: var(--space-1);
    padding-inline: var(--space-1);
  }

  .titlebar__nav {
    gap: 2px;
    padding: 3px;
  }

  .titlebar__nav button {
    width: 32px;
    min-width: 32px;
    height: 30px;
    gap: 0;
    padding: 0;
  }

  .titlebar.titlebar--desktop {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    column-gap: 2px;
    padding-inline: var(--space-1);
  }

  .titlebar--desktop .titlebar__nav {
    gap: 0;
    padding: 2px;
  }

  .titlebar--desktop .titlebar__nav button {
    width: 30px;
    min-width: 30px;
  }

  .titlebar--desktop .titlebar__right,
  .titlebar--desktop .titlebar__utilities,
  .titlebar--desktop .titlebar__utility-menu {
    gap: 2px;
  }

  .titlebar--desktop .titlebar__window-btn {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 300px) {
  .titlebar__nav button {
    width: 28px;
    min-width: 28px;
  }
}

/* ── Simplified custom model management ─────────────────────── */
.custom-model-form__mode-switch {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.custom-model-form__mode-switch button {
  min-height: 30px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: calc(var(--radius-md) - 3px);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  cursor: pointer;
}

.custom-model-form__mode-switch button:hover {
  color: var(--text-primary);
}

.custom-model-form__mode-switch button.is-active {
  background: var(--surface-raised);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.custom-model-form__editing-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-fg);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.custom-model-form__grid label,
.custom-model-form__field,
.custom-model-form__textarea-field,
.custom-model-form__textarea-field--compact {
  grid-template-rows: none;
  align-content: start;
}

.custom-model-form__inline-example {
  display: none;
  min-width: 0;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

.custom-model-form__field:focus-within > .custom-model-form__inline-example {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}

.custom-model-form__inline-example code {
  overflow: hidden;
  color: var(--accent-fg);
  font-family: var(--font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-model-form__advanced {
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
}

.custom-model-form__advanced > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.custom-model-form__advanced > summary::-webkit-details-marker {
  display: none;
}

.custom-model-form__advanced > summary::after {
  content: '+';
  color: var(--text-tertiary);
  font-size: var(--text-lg);
  font-weight: var(--weight-regular);
}

.custom-model-form__advanced[open] > summary::after {
  content: '−';
}

.custom-model-form__advanced > summary small {
  margin-left: auto;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
}

.custom-model-form__advanced-body {
  display: grid;
  gap: var(--space-3);
  padding: 0 var(--space-3) var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.custom-model-form__advanced-body > :first-child {
  margin-top: var(--space-3);
}

.custom-model-form__prompt-actions {
  justify-content: flex-start;
  padding: 0;
}

/* Saved custom collections intentionally expose Settings + Files only. */
.custom-collection-settings {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
}

.custom-collection-settings__intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.custom-collection-settings__intro .btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  box-sizing: border-box;
  min-height: 28px;
  line-height: 1;
  white-space: nowrap;
}

.custom-collection-settings__edit-button {
  width: max-content;
  min-width: max-content;
  max-width: none;
  padding-inline: var(--space-3);
  overflow: visible;
}

.custom-collection-settings__edit-button > span {
  display: inline-block;
  white-space: nowrap;
}

.custom-collection-settings__intro h3,
.custom-collection-settings__section h4 {
  margin: 0;
  color: var(--text-primary);
}

.custom-collection-settings__intro p {
  margin: var(--space-1) 0 0;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

.custom-collection-settings__section {
  display: grid;
  gap: var(--space-2);
}

.custom-collection-settings__components {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.custom-collection-settings__component,
.custom-collection-settings__summary {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-1);
}

.custom-collection-settings__component {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: var(--space-3);
}

.custom-collection-settings__component span,
.custom-collection-settings__summary span {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}

.custom-collection-settings__component strong {
  overflow: hidden;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-collection-settings__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3);
}

.custom-collection-settings__summary strong {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

@media (max-width: 720px) {
  .custom-model-form__toolbar,
  .custom-collection-settings__intro {
    align-items: stretch;
  }

  .custom-model-form__mode-switch,
  .custom-model-form__io-actions {
    width: 100%;
  }

  .custom-model-form__mode-switch button,
  .custom-model-form__io-actions .btn {
    flex: 1;
  }

  .custom-model-form__advanced > summary small {
    display: none;
  }

  .custom-collection-settings__intro {
    flex-direction: column;
  }

  .custom-collection-settings__components {
    grid-template-columns: 1fr;
  }
}

.detail-tuning__kv small {
  line-height: 1.25;
  grid-column: 1 / -1;
  color: var(--text-tertiary);
  font-size: var(--type-overline-size);
}

.detail-tuning__intent-card--selectable {
  width: 100%;
  appearance: none;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.detail-tuning__intent-card--selectable:hover {
  border-color: var(--border-strong);
  background: var(--surface-3);
}

.detail-tuning__intent-card--selectable.is-selected {
  border-color: var(--accent-fg);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.detail-tuning__context-slider {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.detail-tuning__context-slider-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.detail-tuning__context-slider-head output {
  color: var(--text-primary);
  font-family: var(--font-mono);
  white-space: nowrap;
}

.detail-tuning__context-slider-row {
  display: grid;
  grid-template-columns: auto minmax(100px, 1fr) auto minmax(92px, 112px) auto;
  align-items: center;
  gap: var(--space-2);
}

.detail-tuning__context-bound {
  min-width: 2.5rem;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: var(--type-overline-size);
  text-align: center;
}

.detail-tuning__context-number {
  min-width: 0;
  width: 100%;
  font-family: var(--font-mono);
}

.detail-tuning__context-slider > small {
  color: var(--text-tertiary);
  font-size: var(--type-overline-size);
  line-height: 1.35;
}

@media (max-width: 700px) {
  .detail-tuning__context-slider-row {
    grid-template-columns: auto minmax(80px, 1fr) auto;
  }
  .detail-tuning__context-number,
  .detail-tuning__context-slider-row .detail-tuning__default-btn {
    grid-column: span 1;
  }
}

/* ── Remote model providers ─────────────────────────── */
.model-nav-rail__section-label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-1) var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--type-overline-size);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.model-nav-rail__provider-list {
  list-style: none;
  margin: 0;
  padding: 2px var(--space-2) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
}

.model-nav-rail__provider-option {
  width: 100%;
  min-height: 25px;
  box-sizing: border-box;
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.model-nav-rail__provider-option:hover {
  color: var(--text-primary);
}

.model-nav-rail__provider-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.registry-zones {
  display: flex;
  flex-direction: column;
}

.zone__dot--modelscope {
  background: var(--provider-modelscope);
  box-shadow: 0 0 6px color-mix(in srgb, var(--provider-modelscope) 40%, transparent);
}

.row--remote.row--huggingface {
  border-left: 3px solid color-mix(in srgb, var(--provider-hugging-face) 35%, transparent);
}

.row--remote.row--modelscope {
  border-left: 3px solid color-mix(in srgb, var(--provider-modelscope) 35%, transparent);
}

.row--remote.row--huggingface:hover,
.row--remote.row--huggingface.row--active {
  border-left-color: var(--provider-hugging-face);
}

.row--remote.row--modelscope:hover,
.row--remote.row--modelscope.row--active {
  border-left-color: var(--provider-modelscope);
}

.row__icon--huggingface {
  border-color: var(--provider-hugging-face);
  color: var(--provider-hugging-face-fg);
}

.row__icon--modelscope {
  border-color: var(--provider-modelscope);
  color: var(--provider-modelscope-fg);
}

.row__label--huggingface {
  background: color-mix(in srgb, var(--provider-hugging-face) 10%, transparent);
  color: var(--provider-hugging-face-fg);
}

.row__label--modelscope {
  background: color-mix(in srgb, var(--provider-modelscope) 12%, transparent);
  color: var(--provider-modelscope-fg);
}

.model-list-panel__scroll-area .zone--registry {
  border-top: 1px solid var(--border-subtle);
  margin: var(--space-2) 0 0;
  padding: var(--space-2) 0;
}

.model-list-panel__scroll-area .row--remote .row__icon {
  width: 28px;
  height: 28px;
}

.model-list-panel__scroll-area .row--remote .row__summary {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
}

.model-list-panel__scroll-area .row--remote .row__content {
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.model-list-panel__scroll-area .row--remote .row__right {
  justify-content: flex-end;
  padding: 0;
}

.model-detail-panel--modelscope .hf-detail__source-label {
  color: var(--provider-modelscope);
}

.model-detail-panel--modelscope .model-detail-panel__badge--pipeline {
  background: color-mix(in srgb, var(--provider-modelscope) 12%, transparent);
  border-color: color-mix(in srgb, var(--provider-modelscope) 30%, transparent);
  color: var(--provider-modelscope);
}

.zone--modelscope .hf-zone__spinner {
  border-top-color: var(--provider-modelscope);
}

.row--modelscope .row__action--hf-link,
.row--modelscope .detail__hf-link {
  color: var(--provider-modelscope-fg);
  background: color-mix(in srgb, var(--provider-modelscope) 8%, transparent);
  border-color: color-mix(in srgb, var(--provider-modelscope) 22%, transparent);
}

.row--modelscope .row__action--hf-link:hover,
.row--modelscope .detail__hf-link:hover {
  color: var(--provider-modelscope);
  background: color-mix(in srgb, var(--provider-modelscope) 16%, transparent);
  border-color: color-mix(in srgb, var(--provider-modelscope) 42%, transparent);
}

/* Backend argument tuning */
.cell__args-button.is-active {
  border-color: var(--accent-fg);
  background: var(--accent-soft);
  color: var(--accent-fg);
}

.cell__args-state {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px 7px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-tertiary);
  font-size: var(--type-overline-size);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.cell__args-state--optimized {
  border-color: color-mix(in srgb, var(--accent-fg) 42%, var(--border-subtle));
  background: var(--accent-soft);
  color: var(--accent-fg);
}

.backend-args-scrim {
  position: fixed;
  inset: 0;
  z-index: 68;
  background: var(--surface-overlay);
  backdrop-filter: blur(2px);
}

.backend-args-dialog {
  position: fixed;
  z-index: 69;
  top: 50%;
  left: 50%;
  width: min(460px, calc(100vw - 32px));
  transform: translate(-50%, -50%);
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  background: var(--surface-1);
  box-shadow: var(--shadow-lg);
}

.backend-args-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.backend-args-dialog__head h2 {
  margin: 2px 0 0;
  color: var(--text-primary);
  font-size: var(--text-lg);
}

.backend-args-dialog__eyebrow {
  color: var(--text-tertiary);
  font-size: var(--type-overline-size);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.backend-args-dialog__copy,
.backend-args-dialog__hint,
.backend-args-dialog__notice {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
}

.backend-args-dialog__notice {
  padding: var(--space-2) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--accent-fg) 42%, var(--border-subtle));
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--accent-fg);
}

.backend-args-dialog__textarea {
  width: 100%;
  min-height: 144px;
  resize: vertical;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.55;
}

.backend-args-dialog__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-2);
}

.backend-args-dialog__spacer { flex: 1; }

@media (max-width: 560px) {
  .backend-args-dialog {
    top: auto;
    bottom: 12px;
    transform: translateX(-50%);
    padding: var(--space-4);
  }

  .backend-args-dialog__actions { flex-wrap: wrap; }
  .backend-args-dialog__spacer { display: none; }
}

/* Bidirectional MCP management */
.mcp-panel__card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-1); }
.mcp-panel__card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.mcp-panel__card-header h3 { margin: 0 0 4px; color: var(--text-primary); font-size: var(--text-md); }
.mcp-panel__card-header p { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.45; }
.mcp-panel__tool-disclosure { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-2); }
.mcp-panel__tool-disclosure > summary { display: flex; align-items: center; min-height: 36px; padding: 0 var(--space-3); color: var(--text-primary); font-size: var(--text-sm); font-weight: var(--weight-semibold); cursor: pointer; list-style: none; }
.mcp-panel__tool-disclosure > summary::-webkit-details-marker { display: none; }
.mcp-panel__tool-disclosure > summary::after { width: 7px; height: 7px; margin-left: auto; border-right: 1.5px solid var(--text-tertiary); border-bottom: 1.5px solid var(--text-tertiary); content: ''; transform: rotate(45deg) translateY(-2px); transition: transform var(--duration-fast) var(--ease-out); }
.mcp-panel__tool-disclosure[open] > summary::after { transform: rotate(225deg) translateY(-2px); }
.mcp-panel__tool-disclosure > .mcp-panel__tool-list { padding: 0 var(--space-2) var(--space-2); }
.mcp-panel__tool-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.mcp-panel__tool-row { min-width: 0; padding: var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-2); }
.mcp-panel__tool-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); min-width: 0; }
.mcp-panel__tool-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); font-family: var(--font-mono, monospace); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.mcp-panel__tool-meta { flex: 0 0 auto; color: var(--text-tertiary); font-size: var(--text-xs); white-space: nowrap; }
.mcp-panel__tool-title { display: block; margin-top: 4px; color: var(--text-secondary); font-size: var(--text-sm); }
.mcp-panel__tool-description { margin: 6px 0 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.45; }
@media (max-width: 720px) {
  .mcp-panel__tool-heading { align-items: flex-start; flex-direction: column; gap: var(--space-1); }
  .mcp-panel__tool-meta { white-space: normal; }
}
.mcp-panel__admin-auth { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-2); }
.mcp-panel__admin-auth > div:first-child { display: grid; gap: 3px; }
.mcp-panel__admin-auth label { color: var(--text-primary); font-weight: var(--weight-semibold); }
.mcp-panel__admin-auth p { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.45; }
.mcp-panel__admin-auth-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); align-items: center; }
.mcp-panel__host-unavailable { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.mcp-panel__host-unavailable p { margin: 0; }
.mcp-panel__admin-auth-controls input { width: 100%; min-width: 0; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface-1); color: var(--text-primary); font: inherit; }
.mcp-panel__status-dot.is-connected { background: var(--success); }
.mcp-server-list { display: grid; gap: var(--space-2); }
.mcp-server-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-2); }
.mcp-server-card__main { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-2); }
.mcp-server-card__main > .mcp-panel__status-dot { margin-top: 5px; }
.mcp-server-card__main div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mcp-server-card__main code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
.mcp-server-card__main small { color: var(--text-tertiary); }
.mcp-server-card__actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); }
.mcp-server-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-2); }
.mcp-server-form label { min-width: 0; display: flex; flex-direction: column; gap: 5px; color: var(--text-secondary); font-size: var(--text-sm); }
.mcp-server-form input, .mcp-server-form textarea, .mcp-server-form select { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface-1); color: var(--text-primary); font: inherit; }
.mcp-server-form textarea { resize: vertical; font-family: var(--font-mono, monospace); }
.mcp-server-form__wide { grid-column: 1 / -1; }
.mcp-server-form__note { grid-column: 1 / -1; margin: 0; color: var(--text-tertiary); font-size: var(--text-xs); }
.mcp-server-form label > small { color: var(--text-tertiary); font-size: var(--text-xs); line-height: 1.4; }
.mcp-server-form__transport { min-width: 0; margin: 0; padding: 0; border: 0; }
.mcp-server-form__transport > legend { margin-bottom: 6px; color: var(--text-secondary); font-size: var(--text-sm); }
.mcp-transport-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.mcp-transport-option { display: grid !important; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-2) !important; min-height: 74px; padding: var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-1); cursor: pointer; transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out); }
.mcp-transport-option:hover { border-color: var(--border-strong); }
.mcp-transport-option.is-selected { border-color: color-mix(in srgb, var(--brand) 65%, var(--border-subtle)); background: color-mix(in srgb, var(--brand) 7%, var(--surface-1)); }
.mcp-transport-option > input { width: auto; margin: 3px 0 0; accent-color: var(--brand); }
.mcp-transport-option > span { display: grid; gap: 4px; min-width: 0; }
.mcp-transport-option strong { color: var(--text-primary); font-size: var(--text-sm); }
.mcp-transport-option small { color: var(--text-tertiary); font-size: var(--text-xs); line-height: 1.45; }
.mcp-server-form__advanced { padding: var(--space-2) var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-1); }
.mcp-server-form__advanced > summary { color: var(--text-secondary); font-size: var(--text-sm); font-weight: var(--weight-semibold); cursor: pointer; }
.mcp-server-form__advanced[open] > summary { margin-bottom: var(--space-2); }
.mcp-server-form__advanced > p { margin: var(--space-2) 0 0; color: var(--text-tertiary); font-size: var(--text-xs); line-height: 1.45; }
.mcp-server-form__checkbox { display: grid !important; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-2) !important; color: var(--text-primary) !important; }
.mcp-server-form__checkbox > input { margin: 0; }
.mcp-server-card__heading { display: flex !important; flex-direction: row !important; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.mcp-server-card__heading > span { flex: 0 0 auto; color: var(--text-tertiary); font-size: var(--text-xs); }
.mcp-server-form__actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); }
@media (max-width: 720px) { .mcp-server-form, .mcp-panel__admin-auth-controls, .mcp-transport-options { grid-template-columns: 1fr; } .mcp-server-form__wide { grid-column: auto; } .mcp-panel__card-header { flex-direction: column; } }

/* ── Router editor ───────────────────────────────── */
.manager__detail-form-panel--router { overflow: hidden; }
.router-editor {
  width: 100%;
  color: var(--text-primary);
}
.router-editor__rule-actions button,
.router-node__child-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
}
.router-editor__rule-actions button:hover:not(:disabled),
.router-node__child-actions button:hover:not(:disabled) { color: var(--text-primary); background: var(--surface-2); }
.router-editor__toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-2) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-1);
}
.router-editor .workspace-detail-panel__title-row > .router-editor__toolbar {
  flex: 0 1 360px;
  align-self: flex-start;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  border: 0;
  background: transparent;
}
.router-editor__toolbar-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  min-width: 0;
}
.router-editor__toolbar-row--files { justify-content: flex-end; }
.router-editor__saved-select { min-width: 0; flex: 1 1 180px; }
.router-editor__saved-select .router-select,
.router-editor__saved-select .router-select__trigger { width: 100%; }
.router-editor__tabs { display: flex; padding: 0 var(--space-5); border-bottom: 1px solid var(--border-subtle); background: var(--surface-1); }
.router-editor__tabs button { height: 38px; padding: 0 var(--space-3); border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text-tertiary); font-size: var(--text-sm); cursor: pointer; }
.router-editor__tabs button:hover { color: var(--text-primary); }
.router-editor__tabs button.is-active { color: var(--text-primary); border-bottom-color: var(--accent-fg); }
.router-editor__body { min-height: 0; overflow-y: auto; padding: var(--space-4) var(--space-5) var(--space-6); scrollbar-gutter: stable; }
.router-editor__message,
.router-editor__validation { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3); margin-bottom: var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); font-size: var(--text-xs); line-height: var(--leading-relaxed); }
.router-editor__section,
.router-editor__json-panel { margin-bottom: var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); background: var(--surface-1); overflow: hidden; }
.router-editor__section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.router-editor__section-head h3 { margin: 0; font-size: var(--text-md); }
.router-editor__section-head p { margin: 3px 0 0; color: var(--text-tertiary); font-size: var(--text-xs); }
.router-editor__section-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.router-editor__count { padding: 3px 8px; border-radius: var(--radius-pill); color: var(--accent-fg); background: color-mix(in srgb, var(--accent-fg) 10%, transparent); font-size: var(--text-xs); white-space: nowrap; }
.router-editor__strategy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); padding: var(--space-4); }
.router-editor__strategy-option { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-3); min-width: 0; padding: var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-base); color: var(--text-secondary); text-align: left; cursor: pointer; }
.router-editor__strategy-option:hover { border-color: color-mix(in srgb, var(--accent-fg) 42%, var(--border-subtle)); background: var(--surface-2); }
.router-editor__strategy-option.is-active { border-color: color-mix(in srgb, var(--accent-fg) 70%, var(--border-subtle)); background: color-mix(in srgb, var(--accent-fg) 7%, var(--surface-1)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-fg) 18%, transparent); color: var(--text-primary); }
.router-editor__strategy-option > .app-icon { margin-top: 1px; color: var(--accent-fg); }
.router-editor__strategy-option > span { display: grid; gap: 4px; min-width: 0; }
.router-editor__strategy-option strong { font-size: var(--text-sm); }
.router-editor__strategy-option small { color: var(--text-tertiary); font-size: var(--text-xs); line-height: var(--leading-relaxed); }
.router-editor__form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); padding: var(--space-4); }
.router-editor__form-grid label,
.router-editor__field,
.router-node__details label,
.router-node__compact-field,
.router-editor__default-model { display: grid; gap: 5px; min-width: 0; color: var(--text-secondary); font-size: var(--text-xs); }
.router-editor__form-grid label > span,
.router-editor__field > span,
.router-node__details label > span,
.router-node__compact-field > span { display: flex; justify-content: space-between; gap: var(--space-2); }
.router-editor__form-grid small,
.router-editor__default-model small { color: var(--text-tertiary); font-weight: var(--weight-normal); }
.router-editor__wide { grid-column: 1 / -1; }
.router-editor__prompt { min-height: 112px; resize: vertical; }
.router-editor .input,
.router-editor .select {
  min-width: 0;
}
.router-select { position: relative; min-width: 0; }
.router-select__trigger {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  height: var(--control-height-sm);
  padding: 0 var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-base);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.router-select__trigger:hover,
.router-select__trigger.is-open { border-color: color-mix(in srgb, var(--accent-fg) 55%, var(--border-subtle)); }
.router-select__trigger.is-open { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-fg) 12%, transparent); }
.router-select__trigger > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.router-select__trigger .is-placeholder { color: var(--text-tertiary); }
.router-select__trigger .app-icon { color: var(--text-tertiary); flex-shrink: 0; }
.router-select__popover {
  position: fixed;
  z-index: 260;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
  max-height: min(320px, 40vh);
  padding: var(--space-1);
}
.router-select__option {
  width: 100%;
  display: block;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}
.router-select__option:hover { background: var(--surface-2); color: var(--text-primary); }
.router-select__option.is-selected { background: color-mix(in srgb, var(--accent-fg) 7%, var(--surface-1)); color: var(--text-primary); }
.router-select__option.is-disabled { opacity: 0.45; cursor: default; pointer-events: none; }
.router-editor .textarea {
  min-height: 90px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
}
.router-editor .input[readonly] { color: var(--text-tertiary); background: var(--surface-2); }
.router-editor__candidate-search { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) var(--space-4) var(--space-2); padding: 0 var(--space-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--text-tertiary); background: var(--surface-base); }
.router-editor__candidate-search:focus-within { border-color: var(--accent-fg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-fg) 13%, transparent); }
.router-editor__candidate-search input { min-width: 0; min-height: var(--control-height-sm); flex: 1; border: 0; padding: 0; box-shadow: none; background: transparent; color: var(--text-primary); }
.router-editor__candidate-search input:focus { box-shadow: none; }
.router-editor__candidate-list { display: grid; max-height: 250px; overflow-y: auto; margin: 0 var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }
.router-editor__candidate { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-subtle); cursor: pointer; }
.router-editor__candidate:last-child { border-bottom: 0; }
.router-editor__candidate:hover { background: var(--surface-2); }
.router-editor__candidate.is-selected { background: color-mix(in srgb, var(--accent-fg) 6%, var(--surface-1)); }
.router-editor__candidate-main { display: grid; min-width: 0; }
.router-editor__candidate-main strong,
.router-editor__candidate-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.router-editor__candidate-main strong { font-size: var(--text-sm); }
.router-editor__candidate-main small { color: var(--text-tertiary); font-size: var(--type-overline-size); }
.router-editor__candidate-recipe { color: var(--text-tertiary); font-size: var(--type-overline-size); }
.router-editor__default-model { grid-template-columns: minmax(0, 1fr) minmax(180px, 45%); align-items: center; padding: var(--space-3) var(--space-4) var(--space-4); }
.router-editor__default-model > span { display: grid; }
.router-editor__classifier-list,
.router-editor__rule-list {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.router-editor__classifier-list { max-height: min(58vh, 620px); }
.router-editor__rule-list { max-height: 326px; align-content: start; padding: var(--space-2); background: var(--surface-1); }
.router-editor__rules-workspace {
  display: grid;
  /* Keep the rule rail intentionally compact so the graph remains the primary workspace. */
  grid-template-columns: minmax(200px, 220px) minmax(0, 1fr);
  min-height: 430px;
  border-top: 1px solid var(--border-subtle);
}
.router-editor__rule-list { border-right: 1px solid var(--border-subtle); }
.router-editor__rule-summary {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px;
  min-height: 58px;
  padding: var(--space-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-base);
  overflow: hidden;
  transition: border-color 120ms ease, background 120ms ease, opacity 120ms ease;
}
.router-editor__rule-summary:hover { border-color: color-mix(in srgb, var(--accent-fg) 28%, var(--border-subtle)); }
.router-editor__rule-summary.is-selected { border-color: color-mix(in srgb, var(--accent-fg) 58%, var(--border-subtle)); background: color-mix(in srgb, var(--accent-fg) 5%, var(--surface-base)); }
.router-editor__rule-summary.is-dragging { opacity: .52; }
.router-editor__rule-summary-main {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.router-editor__rule-summary-main:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 1px; }
.router-editor__rule-summary-copy { min-width: 0; display: grid; gap: 2px; }
.router-editor__rule-summary-copy strong,
.router-editor__rule-summary-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.router-editor__rule-summary-copy strong { color: var(--text-primary); font-size: var(--text-xs); }
.router-editor__rule-summary-copy small { color: var(--text-tertiary); font-size: var(--type-overline-size); }
.router-editor__rule-summary .router-editor__rule-actions { margin-left: 0; }
.router-editor__default-rule {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
  min-height: 46px;
  padding: var(--space-2) var(--space-3);
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-tertiary);
}
.router-editor__default-rule > span:last-child { min-width: 0; display: grid; gap: 1px; }
.router-editor__default-rule strong { color: var(--text-secondary); font-size: var(--text-xs); }
.router-editor__default-rule small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--type-overline-size); }
.router-editor__rule-builder { min-width: 0; background: var(--surface-base); }
.router-editor__rule-builder-head {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-1);
}
.router-editor__rule-builder-label {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  white-space: nowrap;
  flex-shrink: 0;
}
.router-editor__rule-id-input {
  width: 120px;
  flex-shrink: 0;
  font-size: var(--text-xs);
  padding: 3px var(--space-2);
  height: 28px;
}
.router-editor__rule-route-select {
  flex: 1 1 0;
  min-width: 0;
  max-width: 220px;
  font-size: var(--text-xs);
  padding: 0px var(--space-2);
  height: 28px;
}
.router-editor__rule-builder-empty { min-height: 430px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); color: var(--text-tertiary); text-align: center; }
.router-editor__rule-builder-empty .app-icon { color: var(--accent-fg); }
.router-editor__rule-builder-empty strong { color: var(--text-secondary); font-size: var(--text-sm); }
.router-editor__rule-builder-empty span { font-size: var(--text-xs); }
.router-editor__classifier,
.router-editor__rule { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-base); overflow: hidden; }
.router-editor__rule { transition: border-color 120ms ease, opacity 120ms ease, box-shadow 120ms ease; }
.router-editor__rule.is-dragging { opacity: .55; border-color: color-mix(in srgb, var(--accent-fg) 55%, var(--border-subtle)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-fg) 10%, transparent); }
.router-editor__card-head { display: flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-subtle); background: var(--surface-2); }
.router-editor__card-head > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); }
.router-editor__card-head > .workspace-action-button { margin-left: auto; }
.router-editor__drag-handle { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 24px; border-radius: var(--radius-sm); color: var(--text-tertiary); cursor: grab; user-select: none; }
.router-editor__drag-handle:hover { color: var(--text-primary); background: var(--surface-3); }
.router-editor__drag-handle:active { cursor: grabbing; }
.router-editor__rule-order { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; color: var(--accent-fg); background: color-mix(in srgb, var(--accent-fg) 12%, transparent); font-size: var(--type-overline-size); font-weight: var(--weight-bold); }
.router-editor__rule-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  /* Match WorkspaceListRow: keep the right edge reserved for the hover action
     so revealing Delete never reflows the row. */
  padding-inline-end: 28px;
}
.router-editor__rule-actions button { width: 24px; height: 26px; border-radius: var(--radius-sm); }
.router-editor__rule-stepper {
  display: grid;
  grid-template-rows: repeat(2, 13px);
  width: 18px;
  height: 26px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.router-editor__rule-actions .router-editor__rule-stepper-button {
  width: 18px;
  height: 13px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
}
.router-editor__rule-actions .router-editor__rule-stepper-button:hover:not(:disabled) {
  background: var(--surface-3);
  color: var(--text-primary);
}
/* Same right-edge hover action used by WorkspaceListRow: the delete target is
   an overlay, not a permanently occupied icon slot inside the action cluster. */
.router-editor__rule-actions .router-editor__rule-remove {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 28px;
  height: auto;
  padding: 0;
  border: 0;
  border-start-end-radius: var(--radius-md);
  border-end-end-radius: var(--radius-md);
  background: transparent;
  color: var(--text-tertiary);
  visibility: hidden;
  transition: color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.router-editor__rule-summary:hover .router-editor__rule-remove,
.router-editor__rule-summary:focus-within .router-editor__rule-remove {
  visibility: visible;
}
.router-editor__rule-actions .router-editor__rule-remove:hover:not(:disabled) {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--text-primary) 8%, transparent);
}
@media (hover: none), (pointer: coarse) {
  .router-editor__rule-actions .router-editor__rule-remove { visibility: visible; }
}
.router-editor__rule-actions button:disabled,
.router-node__child-actions button:disabled { opacity: .28; cursor: default; }
.router-editor__rule-meta { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-3); padding: var(--space-3); }
.router-editor__rule-meta label { display: grid; gap: 5px; color: var(--text-secondary); font-size: var(--text-xs); }
.router-editor__concepts { display: grid; gap: var(--space-2); }
.router-editor__concept-list {
  display: grid;
  gap: var(--space-2);
  max-height: 300px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: var(--space-1);
  scrollbar-gutter: stable;
}
.router-editor__mini-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.router-editor__concept { display: grid; grid-template-columns: minmax(110px, .7fr) minmax(180px, 1.5fr) var(--control-height-sm); gap: var(--space-2); }
.router-editor__outputs { margin: 0 var(--space-3) var(--space-3); border-top: 1px solid var(--border-subtle); }
.router-editor__outputs summary { padding: var(--space-3) 0 var(--space-2); color: var(--text-tertiary); font-size: var(--text-xs); cursor: pointer; }
.router-editor__json-panel pre { min-height: 420px; max-height: calc(100vh - 330px); overflow: auto; margin: 0; padding: var(--space-4); color: var(--text-secondary); background: var(--surface-base); font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.55; tab-size: 2; }
.router-editor__empty { padding: var(--space-4); color: var(--text-tertiary); font-size: var(--text-xs); text-align: center; }
.router-editor__validation { display: block; color: var(--danger); background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 30%, var(--border-subtle)); }
.router-editor__validation strong { display: flex; align-items: center; gap: var(--space-2); }
.router-editor__validation ul { margin: var(--space-2) 0 0 20px; padding: 0; }
.router-editor__message--error { color: var(--danger); background: var(--danger-soft); }
.router-editor__message--success { color: var(--success); background: var(--success-soft); }
.router-editor__copy-button.is-copied {
  border-color: color-mix(in srgb, var(--success) 42%, var(--border-subtle));
  color: var(--success);
  background: var(--success-soft);
}
/* Recursive condition tree. */
.router-node { min-width: 0; }
.router-node--leaf { padding: var(--space-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-1); }
.router-node--group { margin: 0 var(--space-3) var(--space-3); border: 1px solid color-mix(in srgb, var(--accent-fg) 20%, var(--border-subtle)); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--accent-fg) 2%, var(--surface-1)); overflow: hidden; }
.router-node__group-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-subtle); }
.router-node__operator { display: flex; align-items: center; gap: var(--space-2); color: var(--text-tertiary); font-size: var(--text-xs); }
.router-node__operator select { min-height: 28px; }
.router-node__group-actions { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.router-node__children { display: grid; gap: var(--space-2); padding: var(--space-2); }
.router-node__child { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: var(--space-1); min-width: 0; }
.router-node__child-actions { display: flex; flex-direction: column; align-items: center; gap: 1px; padding-top: 2px; }
.router-node__child-actions button { width: 24px; height: 24px; border-radius: var(--radius-sm); }
.router-node__leaf-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.router-node__type-field select { min-width: 155px; }
.router-node__grow { flex: 1 1 190px; }
.router-node__number { width: 120px; }
.router-node__mono { font-family: var(--font-mono); }
.router-node__details { display: grid; gap: var(--space-2); margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px dashed var(--border-subtle); }
.router-node__details--classifier { grid-template-columns: repeat(4, minmax(100px, 1fr)); }
.router-node__details--metadata { grid-template-columns: minmax(120px, 1fr) minmax(120px, .8fr) minmax(140px, 1.4fr); }
.router-node__grow-field { min-width: 0; }

@media (max-width: 900px) {
  .router-editor__toolbar,
  .router-editor__tabs,
  .router-editor__body { padding-left: var(--space-3); padding-right: var(--space-3); }
  .router-editor .workspace-detail-panel__title-row { flex-wrap: wrap; }
  .router-editor .workspace-detail-panel__title-row > .router-editor__toolbar { flex: 1 1 100%; }
  .router-editor__toolbar { flex-wrap: wrap; }
  .router-editor__saved-select { flex: 1 1 180px; }
  .router-editor__saved-select .router-select,
  .router-editor__saved-select .router-select__trigger { width: 100%; }
  .router-editor__form-grid,
  .router-editor__rule-meta,
  .router-editor__strategy { grid-template-columns: 1fr; }
  .router-editor__wide { grid-column: auto; }
  .router-node__details--classifier,
  .router-node__details--metadata { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .router-editor__section-head,
  .router-node__group-head { flex-direction: column; align-items: stretch; }
  .router-editor__section-actions,
  .router-node__group-actions { justify-content: flex-start; }
  .router-editor__default-model { grid-template-columns: 1fr; }
  .router-editor__candidate-recipe { display: none; }
  .router-editor__form-grid--classifier,
  .router-node__details--classifier,
  .router-node__details--metadata { grid-template-columns: 1fr; }
  .router-editor__concept { grid-template-columns: 1fr 28px; }
  .router-editor__concept input:first-child { grid-column: 1 / -1; }
}
.router-node__wrap-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-1); margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px dashed var(--border-subtle); color: var(--text-tertiary); font-size: var(--type-overline-size); }
.router-node__wrap-actions button { min-width: 34px; height: 24px; padding: 0 6px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-secondary); font-size: var(--type-overline-size); cursor: pointer; }
.router-node__wrap-actions button:hover { border-color: color-mix(in srgb, var(--accent-fg) 40%, var(--border-subtle)); color: var(--accent-fg); }

/* Searchable model dropdown used by router model-backed signals. */
.router-model-picker { position: relative; min-width: 0; }
.router-model-picker__trigger {
  width: 100%;
  min-height: var(--control-height-md);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-base);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.router-model-picker__trigger:hover,
.router-model-picker__trigger.is-open { border-color: color-mix(in srgb, var(--accent-fg) 55%, var(--border-subtle)); }
.router-model-picker__trigger.is-open { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-fg) 12%, transparent); }
.router-model-picker__trigger > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.router-model-picker__trigger .is-placeholder { color: var(--text-tertiary); }
.router-model-picker__trigger .app-icon { color: var(--text-tertiary); }
.router-model-picker__popover {
  z-index: 260;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.router-model-picker__search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-tertiary);
  background: var(--surface-2);
}
.router-model-picker__search input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-primary);
  font-size: var(--text-sm);
}
.router-model-picker__options { max-height: 250px; overflow-y: auto; padding: var(--space-1); scrollbar-gutter: stable; }
.router-model-picker__option {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
}
.router-model-picker__option:hover,
.router-model-picker__option.is-active { background: var(--surface-2); color: var(--text-primary); }
.router-model-picker__option.is-selected { background: color-mix(in srgb, var(--accent-fg) 7%, var(--surface-1)); color: var(--text-primary); }
.router-model-picker__option > span { display: grid; min-width: 0; }
.router-model-picker__option strong,
.router-model-picker__option small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.router-model-picker__option strong { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.router-model-picker__option small { color: var(--text-tertiary); font-size: var(--type-overline-size); }
.router-model-picker__option .app-icon { color: var(--accent-fg); }
.router-model-picker__empty,
.router-model-picker__stale { padding: var(--space-3); color: var(--text-tertiary); font-size: var(--text-xs); line-height: var(--leading-relaxed); }
.router-model-picker__stale { border-top: 1px solid var(--border-subtle); background: color-mix(in srgb, var(--warning) 6%, var(--surface-1)); }

/* Router editor success toast. Keeps Save & register feedback visible while the editor is scrolled. */
.router-editor__toast {
  position: fixed;
  z-index: 240;
  right: var(--space-5);
  bottom: var(--space-5);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  width: min(390px, calc(100vw - 32px));
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--success) 32%, var(--border-subtle));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--success) 8%, var(--surface-raised));
  box-shadow: var(--shadow-lg);
  color: var(--text-primary);
  font-size: var(--text-sm);
}
.router-editor__toast > .app-icon { color: var(--success); }
.router-editor__toast button { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-tertiary); cursor: pointer; }
.router-editor__toast button:hover { color: var(--text-primary); background: var(--surface-2); }
.router-confirm-dialog__body { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-3); }
.router-confirm-dialog__body p { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.router-confirm-dialog__icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--danger-soft); color: var(--danger); }

/* Visual rule graph, adapted from the earlier drag/drop pipeline for the router editor. */
.router-graph { border-top: 1px solid var(--border-subtle); background: var(--surface-1); }
.router-graph__workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  grid-template-areas: 'canvas toolbox';
  min-height: 330px;
}
.router-graph__workspace.is-toolbox-collapsed { grid-template-columns: minmax(0, 1fr) 42px; }
.router-graph__toolbox {
  grid-area: toolbox;
  min-width: 0;
  border-left: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--surface-2) 76%, var(--surface-1));
}
.router-graph__toolbox.is-collapsed { width: 42px; }
.router-graph__toolbox-toggle {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.router-graph__toolbox-toggle:hover { color: var(--text-primary); background: var(--surface-2); }
.router-graph__toolbox.is-collapsed .router-graph__toolbox-toggle { justify-content: center; padding: 0; }
.router-graph__toolbox-content { max-height: 430px; overflow-y: auto; padding: var(--space-3); scrollbar-gutter: stable; }
.router-graph__toolbox-title { margin: 0 0 var(--space-2); color: var(--text-tertiary); font-size: var(--type-overline-size); font-weight: var(--weight-bold); letter-spacing: .05em; text-transform: uppercase; }
.router-graph__gates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-1); margin-bottom: var(--space-3); }
.router-graph__tools { display: grid; gap: var(--space-1); margin-bottom: var(--space-3); }
.router-graph__tool {
  min-width: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-base);
  color: var(--text-secondary);
  cursor: grab;
  text-align: left;
}
.router-graph__tool:hover { border-color: color-mix(in srgb, var(--accent-fg) 38%, var(--border-subtle)); background: var(--surface-1); color: var(--text-primary); }
.router-graph__tool:active { cursor: grabbing; }
.router-graph__tool--gate { display: grid; justify-items: center; gap: 2px; padding: var(--space-2) var(--space-1); text-align: center; color: var(--accent-fg); }
.router-graph__tool--all { color: var(--accent-fg); }
.router-graph__tool--any { color: var(--success); }
.router-graph__tool--not { color: var(--danger); }
.router-graph__tool--gate strong { color: currentColor; font-size: var(--text-xs); }
.router-graph__tool--gate small { color: var(--text-tertiary); font-size: 9px; }
.router-graph__gate-shape { display: block; overflow: visible; }
.router-graph__gate-shape path,
.router-graph__gate-shape circle { fill: currentColor; fill-opacity: .08; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.router-graph__gate-shape line { stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.router-graph__tool--condition { position: relative; padding: 7px 8px 7px 12px; font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.router-graph__tool--condition::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent-fg); opacity: .72; }
.router-graph__tool--classifier::before { background: var(--success); }
.router-graph__tool--classifier > span { color: var(--text-tertiary); }
.router-graph__toolbox-search { display: flex; align-items: center; gap: var(--space-1); margin-bottom: var(--space-2); padding: 0 var(--space-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--text-tertiary); background: var(--surface-base); }
.router-graph__toolbox-search:focus-within { border-color: var(--accent-fg); }
.router-graph__toolbox-search input { width: 100%; min-width: 0; height: 30px; border: 0; outline: 0; background: transparent; color: var(--text-primary); font-size: var(--text-xs); }
.router-graph__toolbox-empty { color: var(--text-tertiary); font-size: var(--text-xs); }

.router-graph__canvas-shell { grid-area: canvas; min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.router-graph__toolbar { display: flex; align-items: center; gap: var(--space-1); min-width: 0; min-height: 38px; padding: 0 var(--space-2); border-bottom: 1px solid var(--border-subtle); background: var(--surface-2); }
.router-graph__toolbar button,
.router-graph__operator-actions button,
.router-graph__inspector-head button {
  min-height: 26px;
  padding: 0 var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-tertiary);
  font-size: var(--type-overline-size);
  cursor: pointer;
}
.router-graph__toolbar button:hover:not(:disabled),
.router-graph__operator-actions button:hover,
.router-graph__inspector-head button:hover { background: var(--surface-3); color: var(--text-primary); }
.router-graph__toolbar button:disabled { opacity: .35; cursor: default; }
.router-graph__toolbar button.is-danger:hover { color: var(--danger); background: var(--danger-soft); }
.router-graph__toolbar button.router-graph__expand {
  min-width: 30px;
  padding-inline: 7px;
  border-color: transparent;
  background: transparent;
  color: var(--primary-yellow);
  box-shadow: none;
}
.router-graph__toolbar button.router-graph__expand .app-icon { stroke-width: 2; }
.router-graph__toolbar button.router-graph__expand:hover:not(:disabled) {
  border-color: transparent;
  background: var(--surface-3);
  color: var(--primary-yellow);
}
.router-graph__toolbar button.router-graph__expand:focus-visible {
  outline: 2px solid var(--accent-focus);
  outline-offset: 2px;
}
.router-graph__toolbar-spacer { flex: 1; }
.router-graph__toolbar-hint { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-tertiary); font-size: var(--type-overline-size); }
.router-graph__zoom-label { min-width: 44px; }
.router-graph__rejection { display: inline-flex; align-items: center; gap: 4px; color: var(--danger); font-size: var(--type-overline-size); }

.router-graph__canvas {
  position: relative;
  min-height: 290px;
  overflow: hidden;
  touch-action: none;
  background-color: var(--surface-base);
  background-image: radial-gradient(circle, color-mix(in srgb, var(--text-tertiary) 18%, transparent) 1px, transparent 1px);
  background-size: 18px 18px;
  cursor: grab;
}
.router-graph__canvas.is-panning { cursor: grabbing; }
.router-graph__canvas-transform { position: absolute; top: 0; left: 0; width: max-content; min-width: 280px; transform-origin: 0 0; }
.router-graph__empty { min-height: 290px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-5); color: var(--text-tertiary); text-align: center; }
.router-graph__empty strong { color: var(--text-secondary); font-size: var(--text-sm); }
.router-graph__empty > span:not(.router-graph__empty-icon) { max-width: 380px; font-size: var(--text-xs); line-height: var(--leading-relaxed); }
.router-graph__empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 1px solid color-mix(in srgb, var(--accent-fg) 28%, var(--border-subtle)); border-radius: 50%; background: color-mix(in srgb, var(--accent-fg) 8%, var(--surface-1)); color: var(--accent-fg); }

.router-graph__group { --router-gate-color: var(--accent-fg); min-width: 260px; padding: var(--space-2); border: 1px solid color-mix(in srgb, var(--router-gate-color) 28%, var(--border-subtle)); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--router-gate-color) 3%, var(--surface-1)); box-shadow: var(--shadow-sm); }
.router-graph__group--all { --router-gate-color: var(--accent-fg); }
.router-graph__group--any { --router-gate-color: var(--success); }
.router-graph__group--not { --router-gate-color: var(--danger); }
.router-graph__group.is-selected { border-color: color-mix(in srgb, var(--router-gate-color) 72%, var(--border-subtle)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--router-gate-color) 11%, transparent); }
.router-graph__group-head { display: flex; align-items: center; gap: var(--space-2); min-height: 34px; padding: 0 var(--space-1) var(--space-2); }
.router-graph__gate { appearance: none; font: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 70px; height: 30px; padding: 0 8px 0 5px; border: 1px solid color-mix(in srgb, var(--router-gate-color) 38%, var(--border-subtle)); border-radius: var(--radius-pill); color: var(--router-gate-color); background: color-mix(in srgb, var(--router-gate-color) 9%, var(--surface-1)); font-size: var(--type-overline-size); font-weight: var(--weight-bold); }
.router-graph__group-copy { flex: 1; color: var(--text-tertiary); font-size: var(--type-overline-size); }
.router-graph__operator-actions { display: inline-flex; gap: 2px; }
.router-graph__operator-actions button.is-active { color: var(--router-gate-color); background: color-mix(in srgb, var(--router-gate-color) 10%, var(--surface-2)); }
.router-graph__children { position: relative; display: grid; gap: var(--space-2); padding: var(--space-2) 0 0 var(--space-4); border-left: 1px solid color-mix(in srgb, var(--router-gate-color) 25%, var(--border-subtle)); }
.router-graph__branch { position: relative; display: grid; grid-template-columns: minmax(190px, 1fr) 24px; align-items: center; gap: var(--space-1); }
.router-graph__branch::before { content: ''; position: absolute; left: calc(var(--space-4) * -1); top: 50%; width: var(--space-4); border-top: 1px solid color-mix(in srgb, var(--router-gate-color) 25%, var(--border-subtle)); }
.router-graph__leaf { min-width: 0; display: grid; gap: 2px; padding: var(--space-2) var(--space-3); border: 1px solid var(--border-subtle); border-left: 3px solid var(--accent-fg); border-radius: var(--radius-md); background: var(--surface-base); color: var(--text-secondary); text-align: left; cursor: pointer; }
.router-graph__leaf:hover { border-color: color-mix(in srgb, var(--accent-fg) 42%, var(--border-subtle)); background: var(--surface-1); }
.router-graph__leaf.is-selected { border-color: color-mix(in srgb, var(--accent-fg) 70%, var(--border-subtle)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-fg) 10%, transparent); }
.router-graph__leaf--classifier { border-left-color: var(--success); }
.router-graph__leaf--metadata { border-left-color: var(--warning); }
.router-graph__leaf-type { font-size: var(--type-overline-size); font-weight: var(--weight-bold); color: var(--text-secondary); }
.router-graph__leaf-summary { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-tertiary); font-size: var(--type-overline-size); }
.router-graph__remove { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-tertiary); cursor: pointer; }
.router-graph__remove:hover { color: var(--danger); background: var(--danger-soft); }
.router-graph__drop-zone { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 30px; padding: 4px var(--space-2); border: 1px dashed color-mix(in srgb, var(--accent-fg) 28%, var(--border-subtle)); border-radius: var(--radius-md); color: var(--text-tertiary); background: color-mix(in srgb, var(--accent-fg) 2%, transparent); font-size: var(--type-overline-size); transition: 100ms ease; }
.router-graph__drop-zone.is-over { border-style: solid; border-color: var(--accent-fg); color: var(--accent-fg); background: color-mix(in srgb, var(--accent-fg) 9%, var(--surface-1)); transform: scale(1.01); }
.router-graph__empty .router-graph__drop-zone { width: min(330px, 100%); margin-top: var(--space-2); }

.router-graph__inspector { border-top: 1px solid var(--border-subtle); background: var(--surface-1); }
.router-graph__inspector-head { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-subtle); background: var(--surface-2); }
.router-graph__inspector-head > div { display: grid; gap: 1px; }
.router-graph__inspector-head strong { font-size: var(--text-xs); }
.router-graph__inspector-head small { color: var(--text-tertiary); font-size: var(--type-overline-size); }
.router-graph__inspector-body { padding: var(--space-3); }
.router-graph__inspector-body .router-node--group { margin: 0; }

@media (max-width: 980px) {
  .router-editor__rules-workspace { grid-template-columns: minmax(200px, 220px) minmax(0, 1fr); }
  .router-graph__workspace { grid-template-columns: minmax(0, 1fr) 180px; }
  .router-graph__toolbar-hint { display: none; }
}
@media (max-width: 720px) {
  .router-editor__rules-workspace { grid-template-columns: 1fr; }
  .router-editor__rule-list { max-height: 260px; border-right: 0; border-bottom: 1px solid var(--border-subtle); }
  .router-graph__workspace,
  .router-graph__workspace.is-toolbox-collapsed { grid-template-columns: 1fr; grid-template-areas: 'canvas' 'toolbox'; }
  .router-graph__toolbox { border-left: 0; border-top: 1px solid var(--border-subtle); }
  .router-graph__toolbox.is-collapsed { width: auto; }
  .router-graph__toolbox-content { max-height: 220px; }
  .router-graph__gates { grid-template-columns: repeat(3, minmax(90px, 1fr)); }
  .router-graph__canvas { min-height: 260px; }
  .router-editor__toast { right: 16px; bottom: 16px; }
}

/* ── Global model settings ─────────────────────────────────── */
.global-model-settings {
  width: 100%;
  color: var(--text-primary);
}
.global-model-settings__body {
  min-height: 0;
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: var(--space-4);
  padding: var(--space-5);
  scrollbar-gutter: stable;
}
.connect__section > .global-model-settings__body {
  width: min(var(--content-form-width), 100%);
  padding: 0;
  overflow: visible;
}
.connect__section--directories > .global-model-settings__body {
  margin-top: var(--space-5);
}
.global-settings-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
}
.global-settings-card__head,
.global-settings-card__head > div,
.global-settings-update-action,
.global-settings-pin-add {
  display: flex;
  align-items: center;
}
.global-settings-card__head { justify-content: space-between; gap: var(--space-3); }
.global-settings-card__head > div { gap: var(--space-2); min-width: 0; }
.global-settings-card__head h3 { margin: 0; font-size: var(--text-base); }
.global-settings-card__head > span { color: var(--text-tertiary); font-size: var(--text-xs); text-align: right; }
.global-settings-card__description,
.global-settings-empty,
.global-settings-notice { margin: 0; color: var(--text-secondary); font-size: var(--text-xs); line-height: 1.5; }
.global-settings-grid { display: grid; gap: var(--space-3); }
.global-settings-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.global-settings-field { display: grid; gap: var(--space-2); min-width: 0; color: var(--text-secondary); font-size: var(--text-xs); }
.global-settings-field > span,
.global-settings-field > label { font-weight: var(--weight-semibold); }
.global-settings-field > .select,
.global-settings-field .input,
.global-settings-pin-add > .select {
  width: 100%;
  min-width: 0;
}
.global-settings-number { position: relative; }
.global-settings-number .input { padding-right: 72px; }
.global-settings-number strong {
  position: absolute;
  top: 50%;
  right: 40px;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  pointer-events: none;
}
.global-settings-toggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  cursor: pointer;
}
.global-settings-toggle input { margin-top: 3px; }
.global-settings-toggle span { display: grid; gap: 3px; }
.global-settings-toggle strong { font-size: var(--text-sm); }
.global-settings-toggle small { color: var(--text-tertiary); font-size: var(--text-xs); line-height: 1.45; }
.global-settings-pin-add { gap: var(--space-2); }
.global-settings-pin-add select { flex: 1 1 auto; }
.global-settings-pinned-list { display: grid; gap: var(--space-2); }
.global-settings-pinned-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
.global-settings-pinned-row > span { display: grid; min-width: 0; }
.global-settings-pinned-row strong,
.global-settings-pinned-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.global-settings-pinned-row strong { font-size: var(--text-sm); }
.global-settings-pinned-row small { color: var(--text-tertiary); font-size: var(--text-xs); }
.global-settings-pinned-row > button { width: 28px; height: 28px; }
.global-settings-read-modes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}
.global-settings-read-modes button {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
}
.global-settings-read-modes button:hover { border-color: color-mix(in srgb, var(--accent-fg) 40%, var(--border-subtle)); }
.global-settings-read-modes button.is-active {
  border-color: var(--accent-fg);
  background: var(--accent-soft);
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-fg) 24%, transparent);
}
.global-settings-read-modes strong { font-size: var(--text-sm); }
.global-settings-read-modes small { color: var(--text-tertiary); font-size: var(--text-xs); line-height: 1.4; }
.global-settings-update-action { justify-content: space-between; gap: var(--space-3); }
.global-settings-update-action > div { display: grid; gap: 3px; }
.global-settings-update-action strong { font-size: var(--text-sm); }
.global-settings-update-action small { color: var(--text-tertiary); font-size: var(--text-xs); }
.global-settings-notice { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent-fg); }

@media (max-width: 900px) {
  .global-model-settings__body { padding-left: var(--space-3); padding-right: var(--space-3); }
  .global-settings-read-modes { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .global-settings-grid--two{ grid-template-columns: 1fr; }
  .global-settings-card__head,
  .global-settings-update-action,
  .global-settings-pin-add { align-items: stretch; flex-direction: column; }
  .global-settings-card__head > span { text-align: left; }
}

/* Shared list and detail panes */
.workspace-three-panel {
  --workspace-rail-width: var(--workspace-rail);
  --detail-chip-gap: 6px;
  --detail-title-metadata-gap: 8px;
  --detail-title-row-gap: 14px;
  --detail-metadata-actions-gap: 19px;
  --detail-section-space: 25px;
  --detail-gutter: 33px;
  --detail-type-metadata: 10.5px;
  --detail-type-action: 14px;
  --detail-type-title: 25px;
  display: grid;
  grid-template-columns: var(--workspace-rail-width) var(--workspace-list-panel-width) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  position: relative;
  transition: grid-template-columns 240ms var(--ease-out);
}

.workspace-three-panel.workspace--rail-collapsed,
.workspace-three-panel.context-rail-collapsed {
  --workspace-rail-width: var(--rail-collapsed);
}



.workspace-two-panel {
  --detail-chip-gap: 6px;
  --detail-title-metadata-gap: 8px;
  --detail-title-row-gap: 14px;
  --detail-metadata-actions-gap: 19px;
  --detail-section-space: 25px;
  --detail-gutter: 33px;
  --detail-type-metadata: 10.5px;
  --detail-type-action: 14px;
  --detail-type-title: 25px;
  display: grid;
  grid-template-columns: var(--workspace-list-panel-width) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.workspace-two-panel .workspace-panel-resizer {
  left: calc(var(--workspace-list-panel-width) - 5px);
}

.workspace-panel-resizer {
  position: absolute;
  left: calc(var(--workspace-rail-width) + var(--workspace-list-panel-width) - 5px);
  top: 0;
  bottom: 0;
  width: 10px;
  cursor: col-resize;
  z-index: 6;
  touch-action: none;
}

.workspace-panel-resizer::after {
  content: "";
  position: absolute;
  left: 4px;
  top: var(--space-3);
  bottom: var(--space-3);
  width: 2px;
  border-radius: var(--radius-pill);
  background: transparent;
  transition: background var(--duration-fast) var(--ease-out);
}

.workspace-panel-resizer:hover::after,
.workspace-panel-resizer:focus-visible::after,
.is-resizing-workspace-panel .workspace-panel-resizer::after {
  background: var(--accent-fg);
}

.workspace-panel-resizer:focus-visible {
  outline: 2px solid var(--accent-focus);
  outline-offset: -2px;
}

.is-resizing-workspace-panel {
  cursor: col-resize;
  user-select: none;
}

.workspace-list-panel {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface-base);
  border-right: 1px solid var(--border-subtle);
}

.workspace-list-panel__header {
  min-height: var(--workspace-header);
  padding: var(--detail-section-space) var(--detail-gutter);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  flex: 0 0 auto;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-base);
}

.workspace-list-panel__heading {
  min-width: 0;
  display: grid;
  gap: var(--detail-title-metadata-gap);
}

.workspace-list-panel__heading h1 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--detail-type-title);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.workspace-list-panel__subtitle {
  color: var(--text-tertiary);
  font-size: var(--type-supporting-size);
  line-height: 1.2;
}

.workspace-list-panel__actions {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  flex: 0 0 auto;
}



.workspace-list-panel__actions .workspace-action-group {
  gap: var(--space-0-5);
}

.workspace-list-panel__actions .workspace-action-button {
  width: var(--icon-button-size);
  height: var(--icon-button-size);
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: var(--text-tertiary);
}

.workspace-list-panel__actions .workspace-action-button:hover:not(:disabled),
.workspace-list-panel__actions .workspace-action-button:focus-visible {
  border-color: var(--border-subtle);
  background: var(--surface-2);
  color: var(--accent-fg);
}

/* ── Shared list ───────────────────────────────────────────────────
   The model catalog, remote registry results, chat history, the composer's
   model picker, captured requests, and Monitor's loaded-models readout all
   render this row. Two columns: a lead glyph for the primary modality, and a
   body of two lines — title, then either an in-flight status or the secondary
   glyphs and facts, ending in the anchor. The action overlays the right edge
   at full height. Only the body flexes, so nothing reflows between states. */

.workspace-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: var(--space-1) var(--space-2);
  list-style: none;
  overflow-y: auto;
  /* Rows degrade against the list, not the viewport, so a resized panel and a
     collapsed rail reach the same thresholds. */
  container-type: inline-size;
  container-name: workspace-list;
}

/* A section inside a list. Same grammar as the registry zone heads, so the
   catalog's own sections and the provider results read as one system. */
.workspace-list-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.workspace-list-group + .workspace-list-group { margin-top: var(--space-3); }

/* The heading itself is `.zone__head` — the same one the registry results use. */
.workspace-list-group .zone__head {
  padding-inline: var(--space-2);
  margin-bottom: var(--space-1);
}

.workspace-list-group__items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.workspace-list-row {
  --workspace-list-row-bg: transparent;
  /* The action's width, reserved at the end of the title so the two never
     collide, and used again by the action itself. One value, one place. */
  --workspace-list-row-action: var(--icon-button-size);
  position: relative;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: var(--space-2);
  row-gap: 2px;
  align-items: center;
  min-height: 52px;
  padding: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--workspace-list-row-bg);
  cursor: pointer;
  text-align: left;
  user-select: none;
  overflow: hidden;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

/* Hover, selection, and disabled all drive one custom property, so these rules
   are ordered by precedence rather than by specificity alone. Selection has to
   outrank hover: a row must never look unselected just because the pointer is
   still resting on it after the click.

   Both states are translucent, so they read as the same lift over whichever
   surface the list is sitting on. The five lists do not share a ground — the
   catalog scrolls over --surface-base, the chat and telemetry rails are
   --surface-1, and the composer's picker floats on --surface-raised — so an
   opaque value tuned against one of them disappears against another, and the
   light theme collapses --surface-base and --surface-1 onto the same color. */
.workspace-list-row:hover { --workspace-list-row-bg: var(--surface-alpha-05); }

.workspace-list-row:focus-visible {
  outline: 2px solid var(--accent-focus);
  outline-offset: 0;
}

/* Selection is persistent state; hover is the transient "you can act on this"
   affordance. An already-selected row has nothing left to offer the pointer —
   clicking it again does nothing — so it does not react at all, and hover stays
   with the rows you could actually move to. The row's action button keeps its
   own hover feedback, because that target does still do something. */
.workspace-list-row--selected,
.workspace-list-row--selected:hover {
  --workspace-list-row-bg: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent-fg) 30%, transparent);
}

/* Selected metadata sits on the accent wash rather than the plain surface, so
   it steps up one level to hold its contrast. */
.workspace-list-row--selected .workspace-list-row__meta { color: var(--text-secondary); }

.workspace-list-row--disabled {
  cursor: default;
  opacity: 0.55;
}

.workspace-list-row--disabled:hover { --workspace-list-row-bg: transparent; }

/* A selected row that is briefly busy keeps its selection while it waits. */
.workspace-list-row--selected.workspace-list-row--disabled:hover {
  --workspace-list-row-bg: var(--accent-soft);
}

.workspace-list-row__lead {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  color: var(--workspace-list-row-cap, var(--text-tertiary));
}

/* The title gets its line to itself. It is the row's identity and the thing
   being scanned, so nothing shares its measure. The end padding keeps the
   action from ever covering the title's tail — reserving space on a
   left-aligned, ellipsised run costs nothing visible, where reserving it on a
   right-aligned label reads as misalignment. */
.workspace-list-row__title {
  grid-column: 2;
  grid-row: 1;
  padding-inline-end: var(--workspace-list-row-action);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-list-row__meta {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  min-width: 0;
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--text-tertiary);
}

.workspace-list-row__sep {
  flex: 0 0 auto;
  color: var(--text-disabled);
}

/* Between flex children the meta line's own gap spaces the separator. Inside a
   run of facts there is no gap to borrow, so it carries its own. */
.workspace-list-row__primary .workspace-list-row__sep,
.workspace-list-row__status-text .workspace-list-row__sep {
  margin-inline: 0.32em;
}

.workspace-list-row__primary {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-list-row__primary--mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.workspace-list-row__glyphs {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
  color: var(--text-tertiary);
}

.workspace-list-row__glyphs > span { display: inline-flex; }

/* The anchor sits at the end of the meta line, at the row's true right edge.
   On the title line it competed with the one thing that must never be crowded;
   here it shares a line with the metadata it ranks alongside. */
.workspace-list-row__anchor {
  margin-inline-start: auto;
  flex: 0 1 auto;
  max-width: 50%;
  padding-inline-end: var(--space-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
}

/* Hovering hands the right edge to the action. Visibility rather than display,
   so the anchor keeps reserving its own width and the meta line cannot reflow. */
.workspace-list-row:hover .workspace-list-row__anchor,
.workspace-list-row:focus-within:not(.workspace-list-row--pointer-action) .workspace-list-row__anchor { visibility: hidden; }

/* Dot and words are one unit. Split across the grid — dot in the trailing
   column, words in the meta line — the mark sat diagonally away from the thing
   it marked, so a color was doing work that words were already doing better. */
.workspace-list-row__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  flex: 0 1 auto;
  min-width: 0;
}

.workspace-list-row__status-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-list-row__status--attention .workspace-list-row__status-text { color: var(--status-warning); }
.workspace-list-row__status--error .workspace-list-row__status-text     { color: var(--status-error); }
.workspace-list-row__status--busy .workspace-list-row__status-text {
  color: var(--accent-fg);
  font-variant-numeric: tabular-nums;
}

.workspace-list-row__status::before {
  flex: 0 0 auto;
  content: '';
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-disabled);
}

.workspace-list-row__status--live::before { background: var(--status-ok); }
.workspace-list-row__status--attention::before { background: var(--status-warning); }
.workspace-list-row__status--error::before { background: var(--status-error); }
.workspace-list-row__status--busy::before { background: var(--accent-fg); }


.workspace-list-row__status--live::before { animation: dotPulse 2s ease-in-out infinite; }
.workspace-list-row__status--busy::before { animation: dotPulse 1.4s ease-in-out infinite; }

/* Full row height at the right edge, so the target is worth aiming at instead
   of a glyph tucked into a corner. It overlays rather than holding a column:
   a column reserved on every row is what stopped the anchor short of the edge. */
.workspace-list-row__action {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: var(--workspace-list-row-action);
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-start-end-radius: var(--radius-md);
  border-end-end-radius: var(--radius-md);
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  visibility: hidden;
  transition: color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}

.workspace-list-row:hover .workspace-list-row__action,
.workspace-list-row:focus-within:not(.workspace-list-row--pointer-action) .workspace-list-row__action,
.workspace-list-row__action--latched { visibility: visible; }

.workspace-list-row__action:hover {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--text-primary) 8%, transparent);
}

/* Active state may be transient; only `latched` also controls visibility. */
.workspace-list-row__action--latched,
.workspace-list-row__action--active { color: var(--accent-fg); }
/* A favorited row keeps the normal hover-only affordance, but the visible star
   uses the same active treatment as the Favorite control in ModelDetailPanel. */
.workspace-list-row__action--active .app-icon[data-icon='star'] {
  color: var(--accent-fg);
}
.workspace-list-row__action--active .app-icon[data-icon='star'] path {
  fill: currentColor;
}

.workspace-list-row__progress {
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  height: 2px;
  background: var(--accent-fg);
}

/* Degrade by priority: the name, modality, anchor, and status hold at every
   width; only priority-5 metadata gives way. Thresholds are on the list's
   content box, so a 304px panel measures 288 and a 248px rail measures 232. */
@container workspace-list (max-width: 260px) {
  .workspace-list-row__glyphs > :nth-child(n + 3) { display: none; }
}

@container workspace-list (max-width: 210px) {
  .workspace-list-row__glyphs { display: none; }
}

/* Coarse pointers cannot hover, so the action takes the edge outright rather
   than waiting for a gesture that never arrives — which is exactly the latched
   state. Reuse it: returning the button to flow would auto-place it into an
   implicit third grid row and grow every row in every list. */
@media (hover: none), (pointer: coarse) {
  .workspace-list-row__action { visibility: visible; }
  .workspace-list-row__anchor { visibility: hidden; }
}

@media (max-width: 480px) {
  .workspace-list-row { --workspace-list-row-action: var(--control-height-lg); }
}

.workspace-detail-panel {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface-base);
  container-type: inline-size;
}

.workspace-detail-panel__header {
  padding: var(--detail-section-space) var(--detail-gutter);
  display: flex;
  flex-direction: column;
  gap: var(--detail-metadata-actions-gap);
  flex: 0 0 auto;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-base);
}

.workspace-detail-panel__title-row {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--detail-title-row-gap);
}

.workspace-detail-panel__leading {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  color: var(--accent-fg);
}

.workspace-detail-panel__identity {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  gap: var(--detail-title-metadata-gap);
}

.workspace-detail-panel__title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--detail-type-title);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.workspace-detail-panel__metadata {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--detail-chip-gap);
}

.workspace-detail-panel__description {
  max-width: 62rem;
  padding: var(--detail-metadata-actions-gap) var(--detail-gutter) 0;
  flex: 0 0 auto;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.workspace-detail-panel__description--identity {
  max-width: 70ch;
  padding: 0;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}

.workspace-detail-panel__description > :first-child { margin-top: 0; }
.workspace-detail-panel__description > :last-child { margin-bottom: 0; }

.workspace-detail-panel__action-bar {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  background: transparent;
}

.workspace-detail-panel__action-bar .workspace-action-button:not(.workspace-action-button--icon-only) {
  height: var(--detail-gutter);
  padding-inline: var(--detail-title-row-gap);
  gap: var(--detail-title-metadata-gap);
  font-size: var(--detail-type-action);
}

.workspace-action-group {
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--detail-title-metadata-gap, var(--space-2));
  flex-wrap: wrap;
}

.workspace-action-group__spacer {
  flex: 1 1 auto;
}

.workspace-action-button__label {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.workspace-resource-list {
  width: 100%;
  border-top: 1px solid var(--border-subtle);
}

.workspace-resource-row {
  width: 100%;
  min-height: 64px;
  padding: var(--space-3) 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  text-align: left;
}

.workspace-resource-row--interactive {
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.workspace-resource-row--interactive:hover {
  background: var(--surface-1);
  color: var(--text-primary);
}

.workspace-resource-row__leading {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  color: var(--accent-fg);
}

.workspace-resource-row__body {
  min-width: 0;
  display: grid;
  gap: var(--space-0-5);
}

.workspace-resource-row__title {
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.workspace-resource-row__description,
.workspace-resource-row__metadata {
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  text-overflow: ellipsis;
}

.workspace-resource-row__metadata {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1-5);
  font-family: var(--font-mono);
}

.workspace-resource-row__actions {
  min-width: 0;
  display: flex;
  justify-content: flex-end;
}

.workspace-resource-row__chevron {
  color: var(--text-disabled);
  transition: color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.workspace-resource-row--interactive:hover .workspace-resource-row__chevron {
  color: var(--text-secondary);
  transform: translateX(2px);
}

.workspace-metadata-chip {
  min-width: 0;
  min-height: var(--detail-section-space);
  padding: 3px var(--detail-title-metadata-gap);
  display: inline-flex;
  align-items: center;
  gap: var(--detail-chip-gap);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--detail-type-metadata);
  font-weight: var(--weight-medium);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
}

.workspace-metadata-chip--low {
  background: color-mix(in srgb, var(--surface-1) 52%, transparent);
  color: var(--text-tertiary);
}

[data-theme="light"] .workspace-metadata-chip--low {
  background: var(--surface-alpha-05);
}

.workspace-metadata-chip--medium {
  background: color-mix(in srgb, var(--surface-2) 74%, transparent);
  color: var(--text-secondary);
}

.workspace-metadata-chip--high {
  background: color-mix(in srgb, var(--accent-fg) 14%, transparent);
  color: var(--accent-fg);
  font-weight: var(--weight-semibold);
}

.workspace-metadata-chip--success.workspace-metadata-chip--high {
  background: color-mix(in srgb, var(--status-ok) 13%, transparent);
  color: var(--status-ok);
}

.workspace-metadata-chip--warning.workspace-metadata-chip--high {
  background: color-mix(in srgb, var(--warning) 13%, transparent);
  color: var(--warning);
}

a.workspace-metadata-chip:hover,
button.workspace-metadata-chip:hover {
  border-color: transparent;
  background: var(--surface-3);
  color: var(--text-primary);
}

[data-theme="light"] a.workspace-metadata-chip--low:hover,
[data-theme="light"] button.workspace-metadata-chip--low:hover {
  background: var(--surface-alpha-1);
}

.workspace-metadata-chip:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 2px; }

.workspace-detail-panel__close {
  width: var(--control-height-sm);
  height: var(--control-height-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: var(--radius-md);
  color: var(--text-tertiary);
}

.workspace-detail-panel__close:hover { background: var(--surface-2); color: var(--text-primary); }

.workspace-detail-panel__title-row > .model-detail-panel__close-btn,
.workspace-detail-panel__title-row > .slideover__close {
  position: static;
  inset: auto;
  flex: 0 0 auto;
}

.workspace-detail-panel__back {
  display: none;
}

.workspace-detail-panel__back-icon { transform: rotate(180deg); }

.workspace-detail-panel--empty {
  align-items: center;
  justify-content: center;
}

.workspace-detail-panel__empty-copy {
  width: min(360px, calc(100% - 48px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-tertiary);
  text-align: center;
}

.workspace-detail-panel__empty-icon {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  color: var(--text-tertiary);
}

.workspace-detail-panel__empty-copy h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.workspace-detail-panel__empty-copy p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

@media (max-width: 768px) {
  .workspace-panel-resizer { display: none; }
}

@media (max-width: 768px) {
  .workspace-three-panel,
  .workspace-two-panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }
}

/* Models master-detail */
.model-list-panel__count.sr-only { padding: 0; }

.model-detail-panel__actions .workspace-action-button,
.model-detail-panel__actions .model-detail-panel__fav-btn,
.model-detail-panel__actions .workspace-action-button--danger {
  width: auto;
  padding-inline: var(--detail-title-row-gap);
}

.recipes > .slideover--recipe {
  position: relative;
  inset: auto;
  grid-column: 3;
  grid-row: 1;
  width: auto;
  max-width: none;
  height: 100%;
  transform: none;
  z-index: auto;
  border-left: 0;
  background: var(--surface-base);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.recipes > .scrim { display: none; }
/* Shared creation-editor grammar */
.custom-model-editor__title {
  margin: 0;
  font-size: var(--detail-type-title);
  line-height: 1.15;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}

.custom-model-editor .workspace-detail-panel__description p {
  margin: 0;
}

.custom-model-form__body {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  overflow-y: auto;
  padding: var(--space-3) var(--detail-gutter) var(--detail-section-space);
  scrollbar-gutter: stable;
}

.custom-model-form__body .custom-model-form__toolbar {
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-start;
}

.custom-model-form__body .custom-model-form__grid {
  padding: 0;
}

@media (max-width: 1100px) {
  .workspace-list-panel__header,
  .workspace-detail-panel__header { padding-left: var(--detail-section-space); padding-right: var(--detail-section-space); }
  .workspace-detail-panel__description { padding-left: var(--detail-section-space); padding-right: var(--detail-section-space); }
  .custom-model-form__body { padding-left: var(--detail-section-space); padding-right: var(--detail-section-space); }
}

@media (max-width: 768px) {
  .recipes--with-rail { grid-template-columns: minmax(0, 1fr); }
  .recipes > .slideover--recipe {
    position: fixed;
    top: 0;
    right: 0;
    grid-column: auto;
    grid-row: auto;
    width: min(100%, var(--slide-over-width));
    max-width: 100vw;
    height: 100vh;
    transform: translateX(100%);
    z-index: 51;
    border-left: 1px solid var(--border-strong);
    box-shadow: var(--shadow-lg);
  }
  .recipes > .slideover--recipe.is-open { transform: translateX(0); }
  .recipes > .scrim { display: block; }
  .workspace-list-panel__header { padding-inline: var(--space-3); }
  .workspace-list-panel__actions .btn { padding-inline: var(--space-2); }
}

.composer__effective-settings {
  padding: 4px;
  width: 30px;
  gap: 0;
}

/* Effective settings modal */
.effective-settings {
  max-width: 640px;
}

.effective-settings__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.effective-settings__model {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
}

.effective-settings__model strong {
  color: var(--text-primary);
  font-size: var(--text-base);
  word-break: break-all;
}

.effective-settings__meta {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

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

.effective-settings__section-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--type-panel-title-size);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.effective-settings__rows {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.effective-settings__row {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) minmax(0, 1.4fr) 9rem;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.effective-settings__row:first-child {
  border-top: none;
}

.effective-settings__row-label {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.effective-settings__row-value {
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  word-break: break-word;
}

.effective-settings__source {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--type-caption-size);
  padding: 1px var(--space-2);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  color: var(--text-secondary);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
}

.effective-settings__source--chat-add .app-icon {
  stroke-width: 2;
}

.effective-settings__source--generic {
  color: var(--text-tertiary);
}

.effective-settings__command {
  margin: 0;
  padding: var(--space-3);
  background: var(--surface-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}

.effective-settings__note {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--type-supporting-size);
}

.effective-settings__note-copy {
  min-width: 0;
}

.effective-settings__empty {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

.effective-settings__error {
  margin: 0;
  color: var(--danger);
  font-size: var(--text-sm);
}

.effective-settings__sampling {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.effective-settings__sampling-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-1);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.effective-settings__sampling-field .input {
  width: 100%;
  font-family: var(--font-mono);
}

.effective-settings__danger {
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--warn) 28%, var(--border-subtle));
  border-radius: var(--radius-md);
  background: var(--warn-soft);
}

.effective-settings__ack {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.effective-settings__ack span {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
}

.effective-settings__editor {
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.effective-settings__textarea {
  min-height: calc(2 * var(--control-height-lg));
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.effective-settings__hint {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--type-supporting-size);
}

.effective-settings__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

.effective-settings__override-flag {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  color: var(--warn);
  font-size: var(--text-sm);
}

.effective-settings__notice {
  margin: var(--space-2) 0 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

/* message-card toggler cleanroom styles */
.message-card__toggle-segmented {
  display: inline-flex;
  padding: 1px;
  background: var(--surface-3);
  border: 1px solid var(--border-subtle);
  margin-right: var(--space-2);
}

.message-card__toggle-segmented button {
  font-size: var(--type-overline-size);
  padding: var(--space-0-5) var(--space-1-5);
  font-weight: var(--weight-semibold);
}

/* Router connection topology: local models and provider-backed endpoints. */
.router-editor__source-badge {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  min-height: 22px;
  padding: 0 var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  font-size: var(--type-overline-size);
  font-weight: var(--weight-medium);
  line-height: 1;
  white-space: nowrap;
}
.router-editor__source-badge--internal {
  border-color: color-mix(in srgb, var(--success) 32%, var(--border-subtle));
  color: var(--success);
  background: color-mix(in srgb, var(--success) 8%, transparent);
}
.router-editor__source-badge--external {
  border-color: color-mix(in srgb, var(--accent-fg) 38%, var(--border-subtle));
  color: var(--accent-fg);
  background: color-mix(in srgb, var(--accent-fg) 8%, transparent);
}
.router-editor__source-badge--unresolved {
  border-color: color-mix(in srgb, var(--warning) 38%, var(--border-subtle));
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 8%, transparent);
}
.router-editor__connections {
  display: grid;
  gap: var(--space-2);
  margin: 0 var(--space-4) var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}
.router-editor__connections > .router-editor__mini-head {
  align-items: center;
}
.router-editor__connections > .router-editor__mini-head > span {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.router-editor__connection-list {
  display: grid;
  gap: var(--space-2);
  max-height: 258px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: var(--space-1);
  scrollbar-gutter: stable;
}
.router-editor__connection {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1.25fr) minmax(150px, auto);
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  min-height: 58px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-base);
}
.router-editor__connection--internal,
.router-editor__connection--unresolved {
  grid-template-columns: minmax(180px, 1fr) minmax(150px, auto);
}
.router-editor__connection-main,
.router-editor__connection-endpoint {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.router-editor__connection-source {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  min-width: 0;
}
.router-editor__connection-main > div {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.router-editor__connection-main strong,
.router-editor__connection-endpoint > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.router-editor__connection-main strong {
  color: var(--text-primary);
  font-size: var(--text-sm);
}
.router-editor__connection-source small,
.router-editor__connection-endpoint small {
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: var(--type-overline-size);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.router-editor__connection-endpoint > span {
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}
.router-editor__connection-endpoint > .workspace-action-button {
  justify-self: start;
  margin-top: var(--space-1);
}
.router-editor__connection-trailing {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}
.router-editor__default-badge {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 0 var(--space-1-5);
  border-radius: 999px;
  color: var(--accent-fg);
  background: color-mix(in srgb, var(--accent-fg) 10%, transparent);
  font-size: var(--type-overline-size);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}
.router-editor__endpoint-editor {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto auto;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.router-editor__endpoint-editor .input {
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.router-collection-settings__scope-note {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}
.router-collection-settings__connections {
  display: grid;
  gap: var(--space-2);
}
.router-collection-settings__connection {
  display: grid;
  grid-template-columns: minmax(190px, 1.1fr) minmax(130px, .6fr) minmax(220px, 1.3fr);
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-1);
}
.router-collection-settings__identity,
.router-collection-settings__source,
.router-collection-settings__endpoint {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.router-collection-settings__identity > div {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.router-collection-settings__identity strong,
.router-collection-settings__endpoint > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.router-collection-settings__identity small,
.router-collection-settings__source small,
.router-collection-settings__endpoint small {
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: var(--type-overline-size);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.router-collection-settings__endpoint > span {
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}
.router-collection-settings__endpoint > .workspace-action-button {
  justify-self: start;
  margin-top: var(--space-1);
}

@media (max-width: 980px) {
  .router-editor__connection,
  .router-collection-settings__connection {
    grid-template-columns: minmax(0, 1fr) minmax(130px, .7fr);
  }
  .router-editor__connection--internal,
  .router-editor__connection--unresolved {
    grid-template-columns: minmax(0, 1fr) minmax(130px, .7fr);
  }
  .router-editor__connection-endpoint,
  .router-collection-settings__endpoint {
    grid-column: 1;
    grid-row: 2;
  }
  .router-editor__connection-trailing {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

@media (max-width: 620px) {
  .router-editor__candidate {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .router-editor__candidate > .router-editor__source-badge {
    grid-column: 2;
    justify-self: start;
  }
  .router-editor__connection,
  .router-collection-settings__connection {
    grid-template-columns: 1fr;
  }
  .router-editor__connection--internal,
  .router-editor__connection--unresolved {
    grid-template-columns: 1fr;
  }
  .router-editor__connection-endpoint,
  .router-collection-settings__endpoint {
    grid-column: 1;
    grid-row: auto;
  }
  .router-editor__connection-trailing {
    grid-column: 1;
    grid-row: auto;
    justify-content: space-between;
  }
  .router-editor__connection-source {
    justify-items: start;
    text-align: left;
  }
  .router-editor__endpoint-editor {
    grid-template-columns: 1fr 1fr;
  }
  .router-editor__endpoint-editor .input {
    grid-column: 1 / -1;
  }
}

.router-editor__endpoint-editor {
  grid-template-columns: auto auto;
}
.router-editor__endpoint-editor .input,
.router-editor__insecure-opt-in {
  grid-column: 1 / -1;
}
.router-editor__insecure-opt-in {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: max-content;
  color: var(--warning);
  font-size: var(--text-xs);
  cursor: pointer;
}
.router-editor__insecure-opt-in input {
  margin: 0;
}

/* Router graph expanded view: full-modal 3-column layout.
   toolbox | canvas | inspector
   Toolbox is reordered to the left via grid-area so the canvas
   has the full center, and the inspector gets a clean right panel. */
.router-editor__graph-modal {
  /* Override inspect-modal-body defaults so the graph fills the modal content.
     The 1500px cap lives on .inspect-modal-content--full-height (the modal
     content) so the body fills it fully with no empty space on the right. */
  width: 100%;
  flex: 1 1 0;
  min-height: 0;
  max-height: none;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.router-editor__graph-modal .router-graph {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: row;
  border-top: 0;
  overflow: hidden;
}

/* Workspace becomes just the canvas shell — toolbox breaks out to its own column */
.router-editor__graph-modal .router-graph__workspace {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: row;
}

/* Toolbox on the left; order:-1 pulls it before canvas-shell in visual order */
.router-editor__graph-modal .router-graph__toolbox {
  flex: 0 0 auto;
  order: -1;
  border-left: 0;
  border-right: 1px solid var(--border-subtle);
  width: 210px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.router-editor__graph-modal .router-graph__toolbox.is-collapsed {
  width: 42px;
}
.router-editor__graph-modal .router-graph__toolbox-content {
  flex: 1 1 0;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}

/* Canvas shell expands to fill all remaining horizontal space */
.router-editor__graph-modal .router-graph__canvas-shell {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
.router-editor__graph-modal .router-graph__canvas,
.router-editor__graph-modal .router-graph__empty {
  min-height: 0;
  height: 100%;
}

/* Inspector slides in from the right — only rendered when a node is selected,
   so the canvas naturally expands to fill the gap when inspector is absent.
   It claims the larger share of the modal's extra width (grow 2 vs the
   workspace's 1) since editing deeply nested nodes is the priority here. */
.router-editor__graph-modal .router-graph__inspector {
  flex: 2 1 560px;
  min-width: 320px;
  border-top: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface-1);
}

/* Draggable divider between the graph workspace and the node inspector.
   Only rendered in the expanded modal, so it lives under that scope. */
.router-editor__graph-modal .router-graph__resizer {
  flex: 0 0 12px;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: col-resize;
  border-left: 1px solid var(--border-subtle);
  border-right: 1px solid var(--border-subtle);
  background: var(--surface-1);
  touch-action: none;
  user-select: none;
}
.router-editor__graph-modal .router-graph__resizer:hover,
.router-graph.is-resizing .router-graph__resizer {
  background: var(--surface-2);
}
.router-graph__resizer-grip {
  display: flex;
  color: var(--text-tertiary);
  pointer-events: none;
}
.router-editor__graph-modal .router-graph__resizer:hover .router-graph__resizer-grip,
.router-graph.is-resizing .router-graph__resizer-grip {
  color: var(--accent-fg);
}
/* Suppress the col-resize→text cursor flip and stray selection during a drag. */
.router-graph.is-resizing,
.router-graph.is-resizing * {
  cursor: col-resize !important;
  user-select: none;
}
.router-editor__graph-modal .router-graph__inspector-head {
  flex-shrink: 0;
}
/* Block scroll container: scrolls vertically for tall trees and horizontally
   for deep ones. min-content tracks (below) plus a min-content floor on the
   root node let the tree stretch to fill when it fits and grow past the panel
   (scrolling) when nesting gets deep. */
.router-editor__graph-modal .router-graph__inspector-body {
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
  padding: var(--space-4);
}
.router-editor__graph-modal .router-graph__inspector-body .router-node {
  min-width: auto;
}
.router-editor__graph-modal .router-graph__inspector-body > .router-node {
  min-width: min-content;
}
.router-editor__graph-modal .router-graph__inspector-body .router-node__child {
  grid-template-columns: 26px minmax(min-content, 1fr);
}

/* Compact at-rest Favorite indicator for model rows. */
.model-list-panel__row-title {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
}

.model-list-panel__row-title-text {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Fixed at the title row's right edge so model-name length never moves it. */
.model-list-panel__favorite-indicator {
  position: absolute;
  inset-inline-end:
    calc(var(--space-1) - var(--workspace-list-row-action));
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  color: var(--accent-fg);
  pointer-events: none;
}

.model-list-panel__favorite-indicator path {
  fill: none;
}

/* The full-size Favorite affordance owns the hover state. Keep only one star
   visible while it temporarily replaces the backend anchor. */
.workspace-list-row:hover .model-list-panel__favorite-indicator {
  visibility: hidden;
}

/* PR3141 V2: loaded models responsive */
@media (max-width: 768px) {
  .loaded-overview__header { align-items: flex-start; flex-direction: column; gap: var(--space-1); }
  .loaded-overview__row { grid-template-columns: 52px minmax(0, 1fr) 26px 76px 52px; column-gap: var(--space-2); }
  .loaded-overview__pin { grid-column: 3; }
  .loaded-overview__selection { grid-column: 4; }
  .loaded-overview__unload { width: 52px; }
}

@media (max-width: 480px) {
  .loaded-overview { padding-top: var(--space-4); }
  .loaded-overview__row { grid-template-columns: 46px minmax(0, 1fr) 26px 70px 48px; column-gap: var(--space-1-5); min-height: 74px; padding-inline-start: var(--space-2); }
  .loaded-overview__task-icon { width: 34px; height: 30px; }
  .loaded-overview__name { font-size: var(--text-sm); }
  .loaded-overview__meta-line { font-size: 10px; }
  .loaded-overview__selection-pill { min-width: 66px; height: 30px; font-size: var(--text-xs); padding-inline: var(--space-2); }
  .loaded-overview__unload { width: 48px; }
}

:root{--lemonade-full-styles-loaded:1;}