/* ── Fonts: self-hosted IBM Plex Mono (used for the SYMI wordmark and panel
   titles). Self-hosted as woff2 rather than a remote @import: the enforced
   control-UI CSP is `style-src 'self' 'unsafe-inline'` / `font-src 'self'`,
   which blocks fonts.googleapis.com/fonts.gstatic.com. Latin subset only. */
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono/ibm-plex-mono-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono/ibm-plex-mono-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── Fonts: self-hosted Acid Grotesk (static weights) ─────────────────
   Licensed FFF Acid Grotesk webfont build. Ships ExtraLight/Light/
   Regular/Bold only — no Medium(500)/SemiBold(600), so those weights
   fall back via the CSS font-matching algorithm. Mirrors the 4minds
   platform app's typography.css. */
@font-face {
  font-family: 'Acid Grotesk';
  src: url('../fonts/acid-grotesk/AcidGrotesk-ExtraLight.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Acid Grotesk';
  src: url('../fonts/acid-grotesk/AcidGrotesk-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Acid Grotesk';
  src: url('../fonts/acid-grotesk/AcidGrotesk-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Acid Grotesk';
  src: url('../fonts/acid-grotesk/AcidGrotesk-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── Reset & Base ─────────────────────────────────────────────────── */
.symi-root, .symi-root *, .symi-root *::before, .symi-root *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Uniform Light (300) weight throughout Symi — matches the 4minds platform's
   light body treatment. Single authoritative rule so heavier per-element
   weights don't need individual edits; @font-face maps above are untouched. */
.symi-root, .symi-root *, .symi-root *::before, .symi-root *::after { font-weight: 300 !important; }

/* ── Global scrollbar — matches the 4minds platform (src/index.css) ──────
   One authoritative rule for every scroll container inside Symi, so any
   element that doesn't define its own scrollbar chrome falls back to the
   4minds ink treatment instead of the chunky browser default.

   The standard scrollbar-width/color props are gated behind
   @supports not selector(::-webkit-scrollbar) — otherwise Chrome sees
   scrollbar-width:thin and IGNORES the ::-webkit-scrollbar width:4px,
   rendering its own (wider) "thin" bar. Firefox has no ::-webkit pseudo,
   so it picks up the @supports branch. Per-element rules (e.g. the
   response-area hover-reveal) still override where needed. */
@supports not selector(::-webkit-scrollbar) {
  .symi-root * {
    scrollbar-width: thin;
    scrollbar-color: rgba(247, 246, 243, 0.16) transparent;
  }
}
.symi-root *::-webkit-scrollbar { width: 4px; height: 4px; }
.symi-root *::-webkit-scrollbar-track { background: transparent; }
.symi-root *::-webkit-scrollbar-thumb { background: rgba(247, 246, 243, 0.16); border-radius: 2px; }
.symi-root *::-webkit-scrollbar-thumb:hover { background: rgba(247, 246, 243, 0.1); }
.symi-root *::-webkit-scrollbar-thumb:active { background: rgba(247, 246, 243, 0.08); }

.symi-root {
  --bg: #0A0F0A;
  --glass-bg: rgba(255,255,255,0.04);
  --glass-bg-hover: rgba(255,255,255,0.07);
  --glass-border: rgba(255,255,255,0.08);
  --glass-border-strong: rgba(255,255,255,0.14);
  /* Body text — 4minds dark ink (#F7F6F3 = offWhite). Alpha tiers preserved
     for hierarchy (mirrors the platform's text-ink / text-ink/75 usage). */
  --text: rgba(247,246,243,0.92);
  --text-muted: rgba(247,246,243,0.45);
  --text-dim: rgba(247,246,243,0.25);
  /* Brand accents — single source, matching the 4minds platform tokens:
       --accent           #55F7FF (palette.accent, dark-mode accent)
       --accent-secondary #543fed (palette.accentSecondary, brand purple)
     Legacy --accent-cyan / --accent-purple alias these so every existing
     var() usage inherits the new colors. */
  --accent: #55F7FF;
  --accent-secondary: #543fed;
  --accent-cyan: var(--accent);
  --accent-purple: var(--accent-secondary);
  --accent-pink: #f472b6;
  --accent-green: #34d399;
  --accent-blue: #60a5fa;
  --shadow: 0 8px 32px rgba(0,0,0,0.5);
  --blur: blur(24px) saturate(160%);
  /* Right-sidebar background — mirrors the 4minds platform's
     `.dark .sidebar-background` layered gradient. The platform stacks these
     translucent layers over its own dark canvas; our drawers slide over app
     content, so we pair the gradients with a solid dark floor. Set via
     `background: var(--sidebar-bg-color); background-image: var(--sidebar-bg-image);` */
  --sidebar-bg-color: #0b0d16;
  --sidebar-bg-image:
    linear-gradient(#f7f6f30a, #f7f6f30a),
    linear-gradient(to bottom left, #0d0d1505, #270a9005, #8f63e005),
    linear-gradient(to bottom, #15003005, #1e01b005, #70a9ff05);
  --font: 'Acid Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Acid Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-title: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Two consistent letter-spacing tiers across the UI: regular/mixed-case text
     vs. uppercase eyebrow labels & badges. (Logotype/status display text —
     brand names, STANDBY status — keeps its own wider tracking.) */
  --tracking-normal: 0.02em;
  --tracking-caps: 0.08em;
  /* Floating prompt-bar + activity-banner reserve. The response area lifts its
     bottom edge to clear the prompt bar, plus the banner when one is shown.
     These same heights cap the banner's own max-height (see
     .layer2-activity-banner) so the reserved space and the banner can't drift
     apart — no gap above the banner, no overlap. The +8px in the reserve calc
     is the banner's margin-bottom. Retune here and both move together. */
  --prompt-reserve: 130px;   /* prompt bar alone (base .response-area bottom) */
  --l2ab-banner-h: 44px;     /* head-only activity banner (box, excl. 8px margin) */
  --l2ab-commands-h: 120px;  /* activity banner + command list (box, excl. margin) */
}

.symi-root {
  height: 100%;
  width: 100%;
  overflow: clip;
  /* Flex row hosting the three in-flow columns (left / center / right).
     Overlays and modals are position:fixed/absolute so they stay out of flow. */
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 24px;
  --rail-w: 44px; /* width of a collapsed column: a rail holding the signal-icon stack */
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* App background — mirrors the 4minds platform dark .app-background layer
     stack (src/styles/background.css). Layers listed top→bottom:
       layer 4 (top) blue 24px grid @ 3.5%
       layer 3       purple gradient @ 4%, top-right → bottom-left
       layer 2       blue gradient @ 12%, top → bottom
       layer 1 (base) flat #0A0F0A */
  background-color: var(--bg);
  background-image:
    linear-gradient(to right, rgba(0, 144, 255, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 144, 255, 0.035) 1px, transparent 1px),
    linear-gradient(
      to bottom left,
      rgba(13, 13, 21, 0.04) 0%,
      rgba(39, 10, 144, 0.04) 50%,
      rgba(143, 99, 224, 0.04) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(21, 0, 48, 0.12) 0%,
      rgba(30, 1, 176, 0.12) 50%,
      rgba(112, 169, 255, 0.12) 100%
    );
  background-size: 24px 24px, 24px 24px, 100% 100%, 100% 100%;
  background-repeat: repeat, repeat, no-repeat, no-repeat;
  background-position: 0 0;
}

/* ── Background ───────────────────────────────────────────────────── */
/* Legacy decorative backdrop (animated orbs + masked grid) removed in favor
   of the 4minds platform app-background applied on .symi-root above. The
   .bg-orbs / .bg-grid nodes remain in the template markup but render nothing. */
.symi-root .bg-orbs,
.symi-root .bg-grid {
  display: none;
}

/* ── Glass Panel ──────────────────────────────────────────────────── */
.symi-root .glass-panel {
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 14px;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: border-color 0.3s, box-shadow 0.3s;
}

.symi-root .glass-panel:hover {
  border-color: var(--glass-border-strong);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.1), 0 0 0 1px rgba(85,247,255,0.05);
}

.symi-root .glass-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 60%);
  pointer-events: none;
}

.symi-root .panel-sm { padding: 10px 12px; }

.symi-root .panel-label {
  font-size: 14px;
  font-family: var(--font-title);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  color: var(--accent-cyan);
  margin-bottom: 12px;
  opacity: 0.9;
}

/* ── Brand Panel ─────────────────────────────────────────────────── */
.symi-root .brand-panel {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 16px 14px 2px;
  overflow: hidden;
  /* Never let the flex layout compress this header — the column scrolls instead */
  flex-shrink: 0;
  /* No fill — the title box shows only its accent border, no surface tint. */
  background: transparent;
  border-color: rgba(85, 247, 255, 0.5);
}

/* No hover effect — stay flat: no surface, no shadow (overrides .glass-panel:hover). */
.symi-root .brand-panel:hover {
  border-color: rgba(85, 247, 255, 0.5);
  background: transparent;
  box-shadow: none;
}

/* Brand mark — matches the command center glyph (.cmd-brand-glyph). */
.symi-root .brand-glyph {
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1;
  color: var(--accent-cyan);
}

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

.symi-root .brand-name {
  font-family: var(--font-title);
  font-size: 18px;
  /* !important to beat the global .symi-root * font-weight:300 override */
  font-weight: 500 !important;
  letter-spacing: 0.22em;
  background: linear-gradient(90deg, #55F7FF 0%, #B097FF 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: brand-shimmer 6s linear infinite;
  line-height: 1;
}

.symi-root .brand-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: rgba(247, 246, 243, 0.75);
  opacity: 0.6;
  text-transform: uppercase;
}

@keyframes brand-shimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ── Metric Rows ──────────────────────────────────────────────────── */
.symi-root .metric-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}

.symi-root .metric-row:last-child { margin-bottom: 0; }

.symi-root .metric-name {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(247, 246, 243, 0.75);
  width: 38px;
  flex-shrink: 0;
}

.symi-root .metric-bar {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 99px;
  overflow: hidden;
}

.symi-root .metric-fill {
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.symi-root .metric-val {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(247, 246, 243, 0.75);
  width: 40px;
  text-align: right;
  flex-shrink: 0;
}

/* ── Network / Status Rows ────────────────────────────────────────── */
.symi-root .net-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  min-height: 20px;
}
.symi-root .net-row:last-child { margin-bottom: 0; }

.symi-root .net-name {
  font-size: 12px;
  color: var(--text);
  flex: 1;
}
.symi-root .net-name.muted { color: rgba(247, 246, 243, 0.75); }

.symi-root .net-ip {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(247, 246, 243, 0.75);
}

.symi-root .status-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}
.symi-root .dot-green { background: var(--accent-green); box-shadow: 0 0 6px var(--accent-green); }
.symi-root .dot-blue { background: var(--accent-blue);  box-shadow: 0 0 6px var(--accent-blue);  }
.symi-root .dot-yellow { background: var(--accent); box-shadow: 0 0 6px var(--accent); }

.symi-root .pulse {
  animation: pulse-glow 2s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px var(--accent-green); }
  50%       { opacity: 0.5; box-shadow: 0 0 12px var(--accent-green), 0 0 24px var(--accent-green); }
}

.symi-root .divider {
  height: 1px;
  background: var(--glass-border);
  margin: 8px 0;
}

.symi-root .badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  padding: 2px 7px;
  border-radius: 99px;
}
.symi-root .badge-green { background: none; color: var(--accent-green); border: none; padding-left: 0; padding-right: 0; }
.symi-root .badge-blue { background: none; color: var(--accent-blue); border: none; padding-right: 0; }
.symi-root .badge-cyan { background: rgba(85,247,255,0.10);  color: var(--accent-cyan);  border: 1px solid rgba(85,247,255,0.2);  }

/* ── Big Stats ────────────────────────────────────────────────────── */
.symi-root .big-stat {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: var(--tracking-normal);
  margin: 2px 0 2px;
}
.symi-root .stat-sub {
  font-size: 10px;
  color: rgba(247, 246, 243, 0.75);
  letter-spacing: var(--tracking-normal);
}

/* ── Model Select Dropdown ──────────────────────────────────────────── */
.symi-root .model-select {
  width: 100%;
  background: #1a1a2e;
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 5px 8px;
  margin-top: 4px;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-sizing: border-box;
}
.symi-root .model-select:hover {
  border-color: var(--accent-cyan);
}
.symi-root .model-select:focus {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 6px rgba(0, 212, 255, 0.15);
}
.symi-root .model-select:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.symi-root .model-select optgroup {
  font-weight: 600;
  color: var(--text-muted);
}
.symi-root .model-select option {
  background: #1a1a2e;
  color: var(--text);
  padding: 4px;
}

/* ── Custom Select (Glass UI) ────────────────────────────────────────────
 * js/symi-select.js enhances every `.model-select` into a custom listbox
 * (custom trigger + portal menu) matching the 4minds platform SelectDropdown.
 * The native <select> is hidden (kept as the data model) and dressed below.
 * The portal menu (.symi-select-menu) is rendered at document.body, so it is
 * styled unscoped with literal colours instead of scoped CSS variables.
 * ─────────────────────────────────────────────────────────────────────── */

/* Hidden native <select> — kept in the DOM as the source of truth. */
.symi-root .symi-select-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  border: 0;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  pointer-events: none;
}

/* Custom trigger — mirrors the old .model-select box, plus a chevron. */
.symi-root .symi-select-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: rgba(247, 246, 243, 0.04);
  border: 1px solid rgba(247, 246, 243, 0.25);
  border-radius: 6px;
  color: rgba(247, 246, 243, 0.92);
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: left;
  padding: 5px 8px;
  margin-top: 4px;
  cursor: pointer;
  outline: none;
  box-sizing: border-box;
  /* Ease the width change as the trigger swaps between its logo / label /
     search-box states (min/max-width are what actually drive the resize). */
  transition: border-color 0.15s, box-shadow 0.15s,
    min-width 0.2s ease-in-out, max-width 0.2s ease-in-out;
}
.symi-root .symi-select-trigger .symi-select-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.symi-root .symi-select-trigger.is-placeholder .symi-select-label {
  color: rgba(247, 246, 243, 0.5);
}
.symi-root .symi-select-trigger:hover:not(.is-disabled) {
  border-color: var(--accent-cyan);
}
.symi-root .symi-select-trigger.is-open {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 6px rgba(85, 247, 255, 0.15);
}
.symi-root .symi-select-trigger.is-disabled {
  opacity: 0.4;
  cursor: default;
}
.symi-root .symi-select-chevron {
  display: flex;
  flex-shrink: 0;
  color: rgba(247, 246, 243, 0.5);
  transition: transform 0.2s, color 0.2s;
}
.symi-root .symi-select-trigger:hover:not(.is-disabled) .symi-select-chevron {
  color: var(--accent-cyan);
}
.symi-root .symi-select-trigger.is-open .symi-select-chevron {
  transform: rotate(180deg);
  color: var(--accent-cyan);
}
/* Clear ("x") — resets the select to its default (logo) option in one click. */
.symi-root .symi-select-clear {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 2px;
  margin: -2px 0;
  background: transparent;
  border: 0;
  border-radius: 3px;
  color: rgba(247, 246, 243, 0.5);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.symi-root .symi-select-clear:hover {
  color: var(--text);
}

/* Portal menu — appended to document.body (outside .symi-root), so styled
 * unscoped with literal colours instead of the scoped CSS variables. */
.symi-select-menu {
  position: fixed;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  background: #1a1a2e;
  border: 1px solid rgba(85, 247, 255, 0.18);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  font-size: 11px;
  color: rgba(247, 246, 243, 0.92);
}
/* Search field embedded in the trigger: while the menu is open the trigger
   turns into a search box (its selected-value label is hidden) so the user can
   type to filter. Both elements sit inside the flex trigger. */
.symi-select-search-icon {
  display: flex;
  flex: 0 0 auto;
  color: rgba(247, 246, 243, 0.55);
}
.symi-select-search-input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  padding: 0;
  margin: 0;
  color: rgba(247, 246, 243, 0.92);
  font: inherit;
}
.symi-select-search-input::placeholder {
  color: rgba(247, 246, 243, 0.5);
}
.symi-select-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 3px;
}
.symi-select-option {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: rgba(247, 246, 243, 0.72);
  font: inherit;
  font-weight: 300;
  padding: 6px 10px;
  cursor: pointer;
  outline: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.12s, color 0.12s;
}
.symi-select-option:hover,
.symi-select-option.is-focused {
  background: rgba(85, 247, 255, 0.08);
  color: rgba(247, 246, 243, 0.98);
}
.symi-select-option.is-selected {
  background: rgba(85, 247, 255, 0.12);
  color: #55f7ff;
}
.symi-select-option.is-disabled {
  opacity: 0.4;
  cursor: default;
}
.symi-select-empty {
  padding: 8px 10px;
  text-align: center;
  color: rgba(247, 246, 243, 0.5);
  font-weight: 300;
}
/* 4minds logo standing in for an option's text label (e.g. the Symi default).
   block display avoids the inline baseline gap; it inherits currentColor. */
.symi-select-logo {
  display: block;
}

/* ── Toolbar model dropdown ──────────────────────────────────────────────
 * The model selector lives in the prompt action row, just right of the Attach
 * button. Its margin-right:auto groups Attach + model on the left and pushes
 * the action buttons + Send to the right. Size the trigger to match the 34px
 * action buttons instead of the full-width sidebar layout. */
.symi-root .prompt-model-select {
  margin-right: auto;
}
.symi-root .prompt-model-select .symi-select-trigger {
  width: auto;
  min-width: 88px;
  max-width: 200px;
  height: 34px;
  margin-top: 0;
  /* Match the neutral action buttons (Background / History): offwhite 8% fill,
     40% border at 1px, --text label. Regular Acid Grotesk (no mono tracking),
     matching the SYMI GATEWAY box labels (.net-name). */
  background: rgba(247, 246, 243, 0.08);
  border: 1px solid rgba(247, 246, 243, 0.4);
  color: var(--text);
  font-family: var(--font);
  font-size: 12px;
}
/* Hover mirrors .history-btn:hover — accent/40 border only (no fill change,
   no glow), so the trigger reads as one of the action buttons. */
.symi-root .prompt-model-select .symi-select-trigger:hover:not(.is-disabled),
.symi-root .prompt-model-select .symi-select-trigger.is-open {
  border-color: rgba(85, 247, 255, 0.4);
}
.symi-root .prompt-model-select .symi-select-trigger:hover:not(.is-disabled) .symi-select-chevron,
.symi-root .prompt-model-select .symi-select-trigger.is-open .symi-select-chevron {
  color: var(--text);
}
/* Logo-only trigger (default Symi routing): just the 4minds mark + chevron,
   so it needs far less room than a text label. */
.symi-root .prompt-model-select .symi-select-trigger.is-logo {
  min-width: 55px;
}
/* Give the collapsed trigger room to type once it becomes a search box. */
.symi-root .prompt-model-select .symi-select-trigger.is-searching {
  min-width: 200px;
  max-width: 260px;
}

/* ── Agent Status Orb ─────────────────────────────────────────────── */
/* NOTE: The canonical orb styles live in agent-status-orb.css (shared with
   SymiLauncherPanel in the platform). The .symi-root scoped versions below
   are kept for Glass UI which loads style.css inside the .symi-root container. */
.symi-root .agent-status-panel {
  text-align: center;
  /* Float without card background — orb stands on its own. */
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
}
.symi-root .agent-status-panel:hover { border: none; box-shadow: none; }
.symi-root .agent-status-panel::before,
.symi-root .agent-status-panel::after { display: none; }

/* ── Left-column panels: accent box (matches .symframe-card) ──────────
 * The Gateway panel uses the shared accent box treatment:
 * offwhite (#F7F6F3) at 4% fill, accent (#55F7FF) at 25% border.
 * ─────────────────────────────────────────────────────────────────── */
.symi-root #symi-gateway-panel {
  background: rgba(247, 246, 243, 0.04);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(85, 247, 255, 0.25);
  box-shadow: none;
}
.symi-root #symi-gateway-panel:hover { border-color: rgba(85, 247, 255, 0.25); box-shadow: none; }
.symi-root #symi-gateway-panel::before,
.symi-root #symi-gateway-panel::after { display: none; }

.symi-root .aso-orb-wrap {
  width: 120px;
  height: 120px;
  margin: 10px auto 14px;
}

.symi-root .aso-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Orbit guide tracks — faint rings */
.symi-root .aso-track {
  fill: none;
  stroke: rgba(255,255,255,0.07);
  stroke-width: 1;
}

/* Arc segments */
.symi-root .aso-arc {
  fill: none;
  stroke: var(--aso-color);
  stroke-width: 1.8;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px var(--aso-color));
}
.symi-root .aso-arc-dim { opacity: 0.5; }

/* Core halo */
.symi-root .aso-core-halo {
  fill: var(--aso-color);
  opacity: 0.12;
  filter: blur(6px);
}

/* Core dot */
.symi-root .aso-core {
  fill: var(--aso-color);
  filter: drop-shadow(0 0 5px var(--aso-color));
}

/* Rotation groups — transform-origin at SVG center (50,50) */
.symi-root .aso-rot {
  transform-box: fill-box;
  transform-origin: center;
}

/* ── State: idle — nearly still, barely drifting ── */
.symi-root #agent-status-panel[data-state="idle"] { --aso-color: rgba(85,247,255,0.9); }
.symi-root #agent-status-panel[data-state="idle"]   .aso-rot1 { animation: aso-spin  40s linear infinite; }
.symi-root #agent-status-panel[data-state="idle"]   .aso-rot2 { animation: aso-spin  60s linear infinite reverse; }
.symi-root #agent-status-panel[data-state="idle"]   .aso-rot3 { animation: aso-spin  50s linear infinite; }
.symi-root #agent-status-panel[data-state="idle"]   .aso-rot4 { animation: aso-spin  80s linear infinite reverse; }
.symi-root #agent-status-panel[data-state="idle"]   .aso-rot5 { animation: aso-spin  55s linear infinite; }
.symi-root #agent-status-panel[data-state="idle"]   .aso-core { animation: aso-breathe 6s ease-in-out infinite; }
.symi-root #agent-status-panel[data-state="idle"]   .aso-arc  { opacity: 0.35; }

/* ── State: waiting — amber, gentle pulse to signal pending ── */
.symi-root #agent-status-panel[data-state="waiting"] { --aso-color: #f59e0b; }
.symi-root #agent-status-panel[data-state="waiting"] .aso-rot1 { animation: aso-spin  8s linear infinite; }
.symi-root #agent-status-panel[data-state="waiting"] .aso-rot2 { animation: aso-spin 12s linear infinite reverse; }
.symi-root #agent-status-panel[data-state="waiting"] .aso-rot3 { animation: aso-spin 10s linear infinite; }
.symi-root #agent-status-panel[data-state="waiting"] .aso-rot4 { animation: aso-spin 18s linear infinite reverse; }
.symi-root #agent-status-panel[data-state="waiting"] .aso-rot5 { animation: aso-spin 13s linear infinite; }
.symi-root #agent-status-panel[data-state="waiting"] .aso-core { animation: aso-pulse 2s ease-in-out infinite; }

/* ── State: thinking — violet, fast spin ── */
.symi-root #agent-status-panel[data-state="thinking"] { --aso-color: #543fed; }
.symi-root #agent-status-panel[data-state="thinking"] .aso-rot1 { animation: aso-spin 1.1s linear infinite; }
.symi-root #agent-status-panel[data-state="thinking"] .aso-rot2 { animation: aso-spin 0.7s linear infinite reverse; }
.symi-root #agent-status-panel[data-state="thinking"] .aso-rot3 { animation: aso-spin 1.4s linear infinite; }
.symi-root #agent-status-panel[data-state="thinking"] .aso-rot4 { animation: aso-spin 0.5s linear infinite reverse; }
.symi-root #agent-status-panel[data-state="thinking"] .aso-rot5 { animation: aso-spin 1.8s linear infinite; }
.symi-root #agent-status-panel[data-state="thinking"] .aso-core { animation: aso-pulse 0.45s ease-in-out infinite; }

/* ── State: streaming — green, medium flow ── */
.symi-root #agent-status-panel[data-state="streaming"] { --aso-color: #34d399; }
.symi-root #agent-status-panel[data-state="streaming"] .aso-rot1 { animation: aso-spin 2.2s linear infinite; }
.symi-root #agent-status-panel[data-state="streaming"] .aso-rot2 { animation: aso-spin 3.5s linear infinite reverse; }
.symi-root #agent-status-panel[data-state="streaming"] .aso-rot3 { animation: aso-spin 2.8s linear infinite; }
.symi-root #agent-status-panel[data-state="streaming"] .aso-rot4 { animation: aso-spin 4.5s linear infinite reverse; }
.symi-root #agent-status-panel[data-state="streaming"] .aso-rot5 { animation: aso-spin 3.2s linear infinite; }
.symi-root #agent-status-panel[data-state="streaming"] .aso-core { animation: aso-pulse 0.7s ease-in-out infinite; }

/* ── State: done — brief flash, stays green ── */
.symi-root #agent-status-panel[data-state="done"] { --aso-color: #34d399; }
.symi-root #agent-status-panel[data-state="done"] .aso-rot1 { animation: aso-spin 0.4s linear infinite; }
.symi-root #agent-status-panel[data-state="done"] .aso-rot2 { animation: aso-spin 0.3s linear infinite reverse; }
.symi-root #agent-status-panel[data-state="done"] .aso-rot3 { animation: aso-spin 0.5s linear infinite; }
.symi-root #agent-status-panel[data-state="done"] .aso-rot4 { animation: aso-spin 0.25s linear infinite reverse; }
.symi-root #agent-status-panel[data-state="done"] .aso-rot5 { animation: aso-spin 0.6s linear infinite; }
.symi-root #agent-status-panel[data-state="done"] .aso-core { animation: aso-flash 0.4s ease-out forwards; }

/* ERROR state — red/pink, irregular erratic pulse to signal distress */
.symi-root #agent-status-panel[data-state="error"] { --aso-color: #f87171; }
.symi-root #agent-status-panel[data-state="error"] .aso-rot1 { animation: aso-spin  2.1s linear infinite; }
.symi-root #agent-status-panel[data-state="error"] .aso-rot2 { animation: aso-spin  1.4s linear infinite reverse; }
.symi-root #agent-status-panel[data-state="error"] .aso-rot3 { animation: aso-spin  3.3s linear infinite; }
.symi-root #agent-status-panel[data-state="error"] .aso-rot4 { animation: aso-spin  1.8s linear infinite reverse; }
.symi-root #agent-status-panel[data-state="error"] .aso-rot5 { animation: aso-spin  2.7s linear infinite; }
.symi-root #agent-status-panel[data-state="error"] .aso-core { animation: aso-error-pulse 0.6s ease-in-out infinite; }

@keyframes aso-error-pulse {
  0%, 100% { opacity: 1;   transform: scale(1);    }
  50%       { opacity: 0.4; transform: scale(0.75); }
}

/* ── Run error bubble (failure message in the feed) ──────────────── */
.symi-root .run-error-bubble {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(248, 113, 113, 0.06) !important;
  border-color: rgba(248, 113, 113, 0.25) !important;
}

.symi-root .run-error-icon {
  font-size: 15px;
  flex-shrink: 0;
  margin-top: 1px;
  color: #f87171;
  filter: drop-shadow(0 0 4px rgba(248,113,113,0.5));
}

.symi-root .run-error-text {
  color: #fca5a5 !important;
  font-size: 13px;
  line-height: 1.5;
}

/* ── Run warning bubble (non-fatal amber notice in the feed) ─────── */
.symi-root .run-warning-bubble {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(251, 191, 36, 0.06) !important;
  border-color: rgba(251, 191, 36, 0.25) !important;
}

.symi-root .run-warning-icon {
  font-size: 15px;
  flex-shrink: 0;
  margin-top: 1px;
  color: #fbbf24;
  filter: drop-shadow(0 0 4px rgba(251,191,36,0.5));
}

.symi-root .run-warning-text {
  color: #fde68a !important;
  font-size: 13px;
  line-height: 1.5;
}

.symi-root .run-warning-text a {
  color: #fbbf24;
  text-decoration: underline;
}

/* Model routing change notice bubble */
.symi-root .message.symi-msg .bubble.model-routing-notice-bubble {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.symi-root .model-routing-notice-icon {
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
  color: #63b3ed;
}

.symi-root .model-routing-notice-text {
  display: inline;
  color: #bee3f8 !important;
  font-size: 13px;
  line-height: 1.5;
}

/* Partial/failed stream bubble — dim to indicate incomplete */
.symi-root .stream-failed {
  opacity: 0.6;
  border-color: rgba(248,113,113,0.2) !important;
}
.symi-root .stream-failed::after {
  content: ' [incomplete]';
  font-size: 11px;
  color: #f87171;
  font-family: var(--font-mono);
  opacity: 0.7;
}

/* ── Keyframes ── */
@keyframes aso-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes aso-breathe {
  0%, 100% { transform: scale(1);   opacity: 0.5; }
  50%      { transform: scale(1.2); opacity: 0.8; }
}
@keyframes aso-pulse {
  0%, 100% { transform: scale(1);   }
  50%      { transform: scale(1.6); }
}
@keyframes aso-flash {
  0%   { transform: scale(2.5); opacity: 1; }
  60%  { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}

/* ── Status label & sub-text ── */
.symi-root .aso-label {
  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--aso-color);
  margin-bottom: 5px;
  text-shadow: 0 0 8px var(--aso-color);
  transition: color 0.4s ease, text-shadow 0.4s ease;
}
.symi-root .aso-sub {
  font-size: 10px;
  color: rgba(247, 246, 243, 0.75);
  letter-spacing: var(--tracking-normal);
}

/* ── Layout columns ───────────────────────────────────────────────── */
/* Blended layout (FBP-288 flex shell + feat rail-signals): the three columns
   are in-flow flex items of .symi-root (order: left → center → right). Side
   columns are a fixed 360px wide and animate their flex-basis/width down to the
   rail width when collapsed. Collapse is driven by a `.collapsed` class on the
   <aside> (js/menu.js) and, before first paint, by html.col-left-collapsed /
   html.col-right-collapsed applied from persisted state by js/layout-boot.js
   (reconciled onto the asides by menu.js on load). While a column is a rail its
   live rail-signals stack stands in for its panels — see the rail-signals block
   below. */
.symi-root .metrics-col {
  position: relative;
  height: 100%;
  flex: 0 0 360px;
  width: 360px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 10;
  overflow-y: auto;
  scrollbar-width: none;
  /* Top inset clears the platform's top nav bar so the first panel isn't
     jammed against it; bottom matches for vertical rhythm. The collapsed
     rail resets padding to 0, so this only affects the expanded columns. */
  padding-top: 12px;
  padding-bottom: 16px;
  transition: flex-basis 0.22s ease, width 0.22s ease;
}
.symi-root .metrics-col::-webkit-scrollbar { display: none; }

/* Row order: left → center → right. The center wrapper carries the chat
   response area + prompt bar and takes all remaining width. */
.symi-root .metrics-left {
  order: 1;
  padding-left: 24px;
}
.symi-root .center-col {
  order: 2;
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  height: 100%;
}
.symi-root .metrics-right {
  order: 3;
  padding-right: 24px;
}

/* ── Collapsed rail (feat signal icons in a compact glass bar) ────────
   The column shrinks to a slim bar (--rail-w). Its panels are hidden and the
   live rail-signals icon stack (js/layout.js) stands in for them, wrapped in a
   subtle glass wash that hugs the icons — so the rail is only as tall as its
   content, not the full column. A chevron caps the top of the stack, pointing
   inward, signalling "click to expand"; the whole rail is the click target
   (js/menu.js). Two selector groups drive it: `.collapsed` for the interactive
   toggle, and html.col-*-collapsed for the pre-paint persisted state before
   menu.js has reconciled it. */
.symi-root .metrics-left.collapsed,
.symi-root .metrics-right.collapsed,
html.col-left-collapsed .symi-root .metrics-left,
html.col-right-collapsed .symi-root .metrics-right {
  flex: 0 0 var(--rail-w);
  width: var(--rail-w);
  padding: 0;
  align-items: center;
  overflow: clip;
  cursor: pointer;
}
/* Nudge the collapsed rails slightly inward from the viewport edges (margin sits
   outside the fixed rail width, so the rail keeps its size). */
.symi-root .metrics-left.collapsed,
html.col-left-collapsed .symi-root .metrics-left {
  margin-left: 12px;
}
.symi-root .metrics-right.collapsed,
html.col-right-collapsed .symi-root .metrics-right {
  margin-right: 12px;
}
/* Hide every panel; reveal only the rail-signals stand-in stack. */
.symi-root .metrics-left.collapsed > :not(.rail-signals),
.symi-root .metrics-right.collapsed > :not(.rail-signals),
html.col-left-collapsed .symi-root .metrics-left > :not(.rail-signals),
html.col-right-collapsed .symi-root .metrics-right > :not(.rail-signals) {
  display: none;
}
/* The stack becomes a content-height glass pill with the icons inside. */
.symi-root .metrics-left.collapsed .rail-signals,
.symi-root .metrics-right.collapsed .rail-signals,
html.col-left-collapsed .symi-root .metrics-left .rail-signals,
html.col-right-collapsed .symi-root .metrics-right .rail-signals {
  display: flex;
  margin-top: 12px;
  padding: 12px 0;
  border-radius: 12px;
  background-color: var(--glass-bg);
  transition: background-color 0.15s ease;
}
/* Chevron caps the top of the stack (::before → first flex item). */
.symi-root .metrics-left.collapsed .rail-signals::before,
.symi-root .metrics-right.collapsed .rail-signals::before,
html.col-left-collapsed .symi-root .metrics-left .rail-signals::before,
html.col-right-collapsed .symi-root .metrics-right .rail-signals::before {
  content: "";
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  transition: background-image 0.15s ease;
}
/* Chevron points inward: right on the left rail, left on the right rail. */
.symi-root .metrics-left.collapsed .rail-signals::before,
html.col-left-collapsed .symi-root .metrics-left .rail-signals::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
}
.symi-root .metrics-right.collapsed .rail-signals::before,
html.col-right-collapsed .symi-root .metrics-right .rail-signals::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
}
/* Hover: brighten the wash and switch the chevron to full cyan. */
.symi-root .metrics-left.collapsed:hover .rail-signals,
.symi-root .metrics-right.collapsed:hover .rail-signals,
html.col-left-collapsed .symi-root .metrics-left:hover .rail-signals,
html.col-right-collapsed .symi-root .metrics-right:hover .rail-signals {
  background-color: var(--glass-bg-hover);
}
.symi-root .metrics-left.collapsed:hover .rail-signals::before,
html.col-left-collapsed .symi-root .metrics-left:hover .rail-signals::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2300d4ff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
}
.symi-root .metrics-right.collapsed:hover .rail-signals::before,
html.col-right-collapsed .symi-root .metrics-right:hover .rail-signals::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2300d4ff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
}

/* ── Persistent left rail while EXPANDED (feat) ───────────────────────────────
   The same rail-signals bar that stands in for the collapsed column also shows
   while the left column is expanded, docked in the empty gutter to the left of
   the Agent Status panel. It's taken out of flow (position: absolute) so every
   panel — Agent Status included — keeps its position and nothing shifts over.
   Gated to ≥769px only to exclude the ≤768px mobile-drawer range; in the
   769–1279px band the column force-collapses (js/menu.js), so `:not(.collapsed)`
   already keeps this hidden there without relying on the 1280px threshold — that
   avoids a load-time gap where the panels render but the rail hasn't appeared
   yet. Clicking it collapses the column (js/menu.js). */
@media (min-width: 769px) {
  html:not(.col-left-collapsed) .symi-root .metrics-left:not(.collapsed) .rail-signals {
    display: flex;
    position: absolute;
    left: 24px;
    top: 12px;
    padding: 12px 0;
    border-radius: 12px;
    background-color: var(--glass-bg);
    transition: background-color 0.15s ease;
    z-index: 11;
  }
  /* Chevron caps the stack, pointing outward (left) to signal "click to collapse". */
  html:not(.col-left-collapsed) .symi-root .metrics-left:not(.collapsed) .rail-signals::before {
    content: "";
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
    transition: background-image 0.15s ease;
  }
  html:not(.col-left-collapsed) .symi-root .metrics-left:not(.collapsed) .rail-signals:hover {
    background-color: var(--glass-bg-hover);
  }
  html:not(.col-left-collapsed) .symi-root .metrics-left:not(.collapsed) .rail-signals:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2300d4ff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
  }
  /* Make room for the rail: the brand panel starts to the right of it, so the
     rail occupies vacated space rather than overlaying the panel. */
  html:not(.col-left-collapsed) .symi-root .metrics-left:not(.collapsed) .brand-panel {
    margin-left: 44px;
  }
}

/* ── Mobile: side columns become header-triggered off-canvas drawers ──
   At ≤768px both columns slide in from the edges (window.symiMobileNav in
   js/menu.js); a shared backdrop dims the content behind them. */
.symi-root .symi-mobile-backdrop {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 90;
}
@media (max-width: 768px) {
  .symi-root .metrics-left,
  .symi-root .metrics-right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: min(88vw, 360px);
    flex-basis: auto;
    z-index: 100;
    padding-top: 16px;
    padding-bottom: 16px;
    background: var(--bg);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
    transition: transform 0.24s ease;
  }
  .symi-root .metrics-left {
    left: 0;
    padding-left: 16px;
    padding-right: 12px;
    transform: translateX(-102%);
  }
  .symi-root .metrics-right {
    right: 0;
    padding-left: 12px;
    padding-right: 16px;
    transform: translateX(102%);
  }
  .symi-root .metrics-left.mobile-open,
  .symi-root .metrics-right.mobile-open {
    transform: translateX(0);
  }
  /* Kill the rail affordance on mobile — drawers are header-triggered. */
  .symi-root .metrics-left.collapsed,
  .symi-root .metrics-right.collapsed,
  html.col-left-collapsed .symi-root .metrics-left,
  html.col-right-collapsed .symi-root .metrics-right {
    flex-basis: auto;
    width: min(88vw, 360px);
    overflow-y: auto;
  }
  .symi-root .metrics-left.collapsed > :not(.rail-signals),
  .symi-root .metrics-right.collapsed > :not(.rail-signals),
  html.col-left-collapsed .symi-root .metrics-left > :not(.rail-signals),
  html.col-right-collapsed .symi-root .metrics-right > :not(.rail-signals) {
    display: revert;
  }
  /* Drawer shows the full panels — hide the collapsed-rail stand-in stack. */
  .symi-root .metrics-left.collapsed .rail-signals,
  .symi-root .metrics-right.collapsed .rail-signals,
  html.col-left-collapsed .symi-root .metrics-left .rail-signals,
  html.col-right-collapsed .symi-root .metrics-right .rail-signals {
    display: none;
  }
  .symi-root .symi-mobile-backdrop.visible {
    display: block;
  }
}

/* ── Rail signals ─────────────────────────────────────────────────────
   While a side column is a rail, a vertical stack of small icons stands in
   for its panels. Each icon sits dim at rest, lights up (colour + glow) when
   its element is active, and flashes briefly whenever its value changes.
   Left: activity (orbiting core, colour = the agent panel's --aso-color;
   orbit spins while working, core throbs on error), gateway (radio waves),
   connections (chat bubbles + count), mirror (laptop + count).
   Right: reasoning (sparkle), cards (stack + count), awaiting (hourglass +
   count, amber while background items run). State is mirrored from the panel
   DOM by js/layout.js. */
.symi-root .rail-signals {
  display: none; /* only shown while the column is a collapsed rail */
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 30px;
  flex: 0 0 auto;
  cursor: pointer;
}
.symi-root .rs-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.28);
  transition:
    color 0.35s ease,
    filter 0.35s ease,
    background 0.35s ease;
}
.symi-root .rs-icon svg {
  width: 19px;
  height: 19px;
  overflow: visible;
}
.symi-root .rs-icon .rs-stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.symi-root .rs-icon .rs-fill {
  fill: currentColor;
}
.symi-root .rs-icon .rs-ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  opacity: 0.55;
}
.symi-root .rs-icon .rs-core {
  fill: currentColor;
}
.symi-root .rs-icon .rs-orbit {
  transform-origin: 12px 12px;
}
.symi-root .rs-icon.lit {
  color: var(--rs-lit, var(--accent-cyan, #00d4ff));
  filter: drop-shadow(0 0 5px currentColor);
  background: rgba(255, 255, 255, 0.04);
}
.symi-root .rs-icon.rs-flash {
  animation: rs-flash 0.9s ease-out 1;
}
@keyframes rs-flash {
  0% {
    filter: drop-shadow(0 0 10px currentColor) brightness(1.8);
    transform: scale(1.22);
  }
  100% {
    filter: drop-shadow(0 0 5px currentColor) brightness(1);
    transform: scale(1);
  }
}
.symi-root .rs-activity.lit {
  --rs-lit: var(--rs-color, var(--accent-cyan, #00d4ff));
}
.symi-root .rail-signals[data-state="waiting"] .rs-orbit,
.symi-root .rail-signals[data-state="thinking"] .rs-orbit {
  animation: aso-spin 2.4s linear infinite;
}
.symi-root .rail-signals[data-state="streaming"] .rs-orbit,
.symi-root .rail-signals[data-working="true"] .rs-orbit {
  animation: aso-spin 1s linear infinite;
}
.symi-root .rail-signals[data-working="true"] .rs-core {
  animation: aso-breathe 1.2s ease-in-out infinite;
  transform-origin: 12px 12px;
}
.symi-root .rail-signals[data-state="error"] .rs-core {
  animation: aso-error-pulse 1s ease-in-out infinite;
}
.symi-root .rs-gateway[data-state="online"].lit {
  --rs-lit: #34d399;
}
.symi-root .rs-gateway[data-state="offline"] {
  color: #f87171;
  filter: drop-shadow(0 0 4px rgba(248, 113, 113, 0.6));
}
.symi-root .rs-gateway[data-state="unknown"] {
  color: #fbbf24;
}
.symi-root .rs-conn.lit,
.symi-root .rs-mirror.lit,
.symi-root .rs-cards.lit {
  --rs-lit: #34d399;
}
.symi-root .rs-awaiting.lit {
  --rs-lit: #fbbf24;
}
.symi-root .rail-signals-right[data-live="true"] .rs-spark {
  animation: aso-breathe 1.6s ease-in-out infinite;
  transform-origin: 12px 10.5px;
}
.symi-root .rs-count {
  position: absolute;
  right: -1px; /* stays inside the 30px rail (icon 26px centred = 2px margin) */
  bottom: -1px;
  min-width: 13px;
  height: 13px;
  padding: 0 3px;
  border-radius: 7px;
  background: rgba(10, 14, 24, 0.95);
  border: 1px solid currentColor;
  color: currentColor;
  font-family: var(--mono, ui-monospace, monospace);
  font-style: normal;
  font-size: 8.5px;
  line-height: 11px;
  text-align: center;
  filter: none;
}
.symi-root .rs-count[data-count="0"] {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .symi-root .rail-signals .rs-orbit,
  .symi-root .rail-signals .rs-core,
  .symi-root .rail-signals .rs-spark,
  .symi-root .rail-signals .rs-icon.rs-flash,
  .symi-root .rail-signals[data-state] .rs-orbit,
  .symi-root .rail-signals[data-state] .rs-core,
  .symi-root .rail-signals[data-working="true"] .rs-orbit,
  .symi-root .rail-signals[data-working="true"] .rs-core,
  .symi-root .rail-signals-right[data-live="true"] .rs-spark {
    animation: none !important;
  }
}
/* (Collapsed-rail visibility is defined with the layout block above, keyed on
   both `.collapsed` and html.col-*-collapsed.) */
/* ── Symframe (right-column dynamic display) ──────────────────────── */
/* Phase 1: shell + the existing panels reframed as cards. The aside
   itself stays positioned by .metrics-right; symframe just adds a
   header band on top and unified card chrome around each child panel.
   No JS plumbing yet — Phase 2 introduces the registry + dynamic
   add/update/remove semantics. */
/* The aside is the scroll container (inherits .metrics-col top:24px/bottom:0).
   The border/bg lives on .symframe-inner, which hugs its content — so the box's
   bottom edge scrolls off-screen instead of being pinned to the viewport. */
.symframe {
  display: flex;
  flex-direction: column;
}
.symframe-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Fill the full scroll-container height so the box (and its rounded corners)
     stays pinned to the viewport; the cards region scrolls internally. */
  min-height: 100%;
  max-height: 100%;
  background: rgba(247, 246, 243, 0.04);
  border: 1px solid rgba(85, 247, 255, 0.25);
  border-radius: 12px;
  padding: 14px;
}
/* Collapse button — sits on the symframe title's line, pinned to the right */
.symframe-collapse {
  margin-left: auto;
  padding: 0;
  background: none;
  border: none;
  color: rgba(247, 246, 243, 0.75);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: color 0.15s ease;
}
.symframe-collapse:hover {
  color: var(--accent);
}

.symframe-header {
  display: none;
  padding: 0;
}
.symframe-header-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
/* Right-column collapse control: a chevron that trails the header row (js/menu.js
   collapses the symframe column on click). */
.symi-root .symframe-collapse {
  margin-left: auto;
  padding: 0;
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: color 0.15s ease;
}
.symi-root .symframe-collapse:hover,
.symi-root .symframe-collapse:focus-visible {
  color: var(--accent-cyan);
}
.symframe-title {
  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  color: var(--accent-cyan);
}
.symframe-count {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--tracking-caps);
  color: rgba(247, 246, 243, 0.75);
  opacity: 0.7;
  text-transform: uppercase;
}
.symframe-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--tracking-normal);
  color: rgba(247, 246, 243, 0.75);
  opacity: 0.55;
  margin-top: 4px;
  line-height: 1.4;
}
.symframe-cards {
  flex: 0 0 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  z-index: 1;
}
.symframe-stack {
  position: relative;
  min-height: 0;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.symframe-empty-light {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  border-radius: 999px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at center, rgba(85,247,255,0.55) 0%, rgba(180,200,220,0.35) 45%, rgba(120,160,200,0.1) 75%, transparent 100%);
  box-shadow: 0 0 24px rgba(85,247,255,0.35), 0 0 48px rgba(180,200,220,0.15), inset 0 0 12px rgba(255,255,255,0.12);
  animation: symframe-empty-breathe 3.5s ease-in-out infinite;
  transition: opacity 250ms ease;
}
@keyframes symframe-empty-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(0.85); opacity: 0.6; }
  50% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.symframe-empty-rim {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 10px;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.6);
  transform-origin: center;
  box-shadow: inset 0 0 0 1px rgba(85, 247, 255, 0.1), inset 0 0 24px rgba(85, 247, 255, 0.1), inset 0 0 52px rgba(180, 200, 220, 0.06);
  transition: opacity 400ms ease, transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.symframe-stack:has(.symframe-card-dynamic) .symframe-empty-light {
  animation: none;
  opacity: 0;
}
.symframe-stack:has(.symframe-card-dynamic) .symframe-empty-rim {
  /* Rim glow removed — the glow now lives on the cards themselves. */
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .symframe-empty-rim {
    transform: none;
    transition: none;
  }
  .symframe-empty-light {
    animation: none;
    opacity: 0.8;
  }
  .symframe-stack:has(.symframe-card-dynamic) .symframe-empty-light {
    opacity: 0;
  }
}
/* Card chrome — overrides the per-panel transparent treatment for panels
   that live inside the symframe. Uses `.symi-root .symframe .symframe-card`
   (specificity 030) to reliably win over `.symi-root .xxx-panel` (020). */
.symi-root .symframe .symframe-card {
  position: relative;
  /* 4minds offwhite (#F7F6F3) at 4% fill, accent (#55F7FF) at 25% border */
  background: rgba(247, 246, 243, 0.04);
  border: 1px solid rgba(85, 247, 255, 0.25);
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 2px 8px rgba(0, 0, 0, 0.15);
}
/* Stable activity summaries keep completed work visible without leaving a
   wall of full-size tool and reasoning cards in the Symframe. */
.symi-root .symframe .symframe-card.symframe-card-collapsed {
  padding: 0;
  border-color: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.symi-root .symframe-collapsed-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 12px;
  background: transparent;
  border: none;
  color: var(--text-dim, #9fb0c8);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-normal);
  text-align: left;
  cursor: pointer;
  border-radius: 10px;
}
.symi-root .symframe-collapsed-row:hover {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text, #d8def0);
}
.symi-root .symframe-collapsed-glyph {
  flex-shrink: 0;
  width: 12px;
  text-align: center;
  color: #4ade80;
}
.symi-root .symframe-card-collapsed[data-tool-status="error"] .symframe-collapsed-glyph {
  color: #f87171;
}
.symi-root .symframe-card-collapsed[data-tool-status="blocked"] .symframe-collapsed-glyph,
.symi-root .symframe-card-collapsed[data-tool-status="uncertain"] .symframe-collapsed-glyph {
  color: #fbbf24;
}
.symi-root .symframe-card-collapsed[data-tool-status="thought"] .symframe-collapsed-glyph {
  color: var(--accent-cyan, #4fd1e0);
  opacity: 0.85;
}
.symi-root .symframe-collapsed-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.symi-root .symframe-collapsed-dur {
  flex-shrink: 0;
  opacity: 0.55;
}
.symi-root .symframe-card[data-card-type="rollup"] .symframe-card-body {
  margin-top: 4px;
}
.symi-root .symframe-body-rollup {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.symi-root .symframe-rollup-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 2px 0;
}
.symi-root .symframe-rollup-metric {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.1;
}
.symi-root .symframe-rollup-metric-value {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text, #d8def0);
}
.symi-root .symframe-rollup-metric-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  opacity: 0.55;
}
.symi-root .symframe-rollup-toggle {
  align-self: flex-start;
  background: transparent;
  border: none;
  padding: 2px 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-cyan, #4fd1e0);
  opacity: 0.85;
}
.symi-root .symframe-rollup-toggle:hover {
  opacity: 1;
}
.symi-root .symframe-rollup-steps {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.symi-root .symframe-rollup-steps[hidden] {
  display: none;
}
.symi-root .symframe-rollup-step {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim, #9fb0c8);
}
.symi-root .symframe-rollup-glyph {
  flex-shrink: 0;
  width: 12px;
  text-align: center;
  color: #4ade80;
}
.symi-root .symframe-rollup-step[data-step-status="error"] .symframe-rollup-glyph {
  color: #f87171;
}
.symi-root .symframe-rollup-step[data-step-status="thought"] .symframe-rollup-glyph {
  color: var(--accent-cyan, #4fd1e0);
  opacity: 0.85;
}
.symi-root .symframe-rollup-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.symi-root .symframe-rollup-dur {
  flex-shrink: 0;
  opacity: 0.55;
}

.symi-root .symframe .symframe-card::before,
.symi-root .symframe .symframe-card::after {
  display: none;
}
.symi-root .symframe .symframe-card:hover {
  border-color: rgba(85, 247, 255, 0.18);
}
/* Phase 2: dynamic-card sub-elements (only present on cards added via
   symframe.add(); the sticky panels render their own internals). */
.symframe-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.symframe-card-dismiss {
  background: transparent;
  border: none;
  color: rgba(247, 246, 243, 0.75);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
  transition:
    opacity 0.15s ease,
    color 0.15s ease;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.symframe-card-dismiss:hover {
  opacity: 1;
  color: var(--accent-cyan);
}
.symframe-card-body {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text);
  margin-top: 8px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 320px;
  overflow-y: auto;
}
.symframe-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  flex-wrap: wrap;
}
.symframe-card-action {
  flex: 1 1 auto;
  min-width: 60px;
  padding: 6px 10px;
  border: 1px solid var(--glass-border);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(247, 246, 243, 0.75);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-normal);
  cursor: pointer;
  transition: all 0.15s ease;
}
.symframe-card-action:hover {
  border-color: var(--accent-cyan);
  color: var(--text);
}
.symframe-card-action-primary {
  background: rgba(85, 247, 255, 0.08);
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}
.symframe-card-action-primary:hover {
  background: rgba(85, 247, 255, 0.14);
  box-shadow: 0 0 8px rgba(85, 247, 255, 0.18);
}

/* ── Phase 4: type-specific body renderers ───────────────────────── */

/* Text + markdown: inherit from .symframe-card-body. Add minimal
   markdown rules — most users will want headings and code blocks
   readable but compact. */
.symframe-body-markdown h1,
.symframe-body-markdown h2,
.symframe-body-markdown h3,
.symframe-body-markdown h4 {
  font-size: 12px;
  font-weight: 600;
  margin: 8px 0 4px;
  color: var(--text);
}
.symframe-body-markdown p {
  margin: 4px 0;
}
.symframe-body-markdown ul,
.symframe-body-markdown ol {
  padding-left: 18px;
  margin: 4px 0;
}
.symframe-body-markdown code {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 4px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 3px;
}
.symframe-body-markdown pre {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 5px;
  padding: 8px;
  overflow-x: auto;
  margin: 6px 0;
}
.symframe-body-markdown pre code {
  background: transparent;
  padding: 0;
  font-size: 10px;
}

/* Code body — pre/code wrapper with hljs theme-friendly chrome. */
.symframe-body-code {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 5px;
  padding: 8px 10px;
  margin: 0;
  overflow-x: auto;
  max-height: 320px;
  overflow-y: auto;
}
.symframe-body-code code {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.45;
  color: var(--text);
  background: transparent;
}

/* Email-draft — From/To/Subject header rows + body. */
.symframe-body-email {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.symframe-email-row {
  display: flex;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-normal);
  padding: 2px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
}
.symframe-email-row:last-of-type {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 4px;
  padding-bottom: 4px;
}
.symframe-email-label {
  flex: 0 0 auto;
  color: rgba(247, 246, 243, 0.75);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-size: 9px;
  min-width: 48px;
  opacity: 0.7;
}
.symframe-email-value {
  color: var(--text);
  word-break: break-word;
}
.symframe-email-body {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  margin-top: 4px;
}

/* PDF embed */
.symframe-body-pdf {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.symframe-pdf-iframe {
  width: 100%;
  height: 280px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.2);
}

/* Audio + video shared chrome */
.symframe-body-audio,
.symframe-body-video {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.symframe-audio,
.symframe-video {
  width: 100%;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.2);
}
.symframe-video {
  max-height: 280px;
  object-fit: contain;
}

/* Empty-media placeholder when url is missing */
.symframe-body-empty {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(247, 246, 243, 0.75);
  opacity: 0.6;
  font-style: italic;
}

/* Download link — used by pdf/audio/video renderers */
.symframe-download {
  display: inline-block;
  padding: 4px 8px;
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-normal);
  color: rgba(247, 246, 243, 0.75);
  text-decoration: none;
  transition: all 0.15s ease;
  align-self: flex-start;
}
.symframe-download:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  background: rgba(85, 247, 255, 0.06);
}

/* ── Tool card ────────────────────────────────────────────────────────
   Live "what the agent is doing" card. Pushed on tool start (firing) and
   patched on tool end (done/error) with a duration, then auto-released.
   Ported from personal Symi, re-expressed in 4minds symframe tokens
   (--accent-cyan / --text / --text-dim) instead of the personal --sf-* set. */
.symframe-body-tool {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-mono);
}
.symframe-tool-meta {
  font-size: 10px;
  letter-spacing: var(--tracking-normal);
  color: var(--text);
  word-break: break-word;
}
.symframe-tool-status-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: var(--tracking-normal);
}
.symframe-tool-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--text-dim);
}
.symframe-tool-status-text {
  color: rgba(247, 246, 243, 0.75);
  text-transform: uppercase;
  opacity: 0.8;
}
/* firing → cyan; done → green; blocked/uncertain → amber; error → red. */
.symframe-body-tool[data-tool-status="firing"] .symframe-tool-status-dot {
  background: var(--accent-cyan);
  box-shadow: 0 0 6px rgba(85, 247, 255, 0.6);
  animation: symframe-tool-firing 1.1s ease-in-out infinite;
}
.symframe-body-tool[data-tool-status="firing"] .symframe-tool-status-text {
  color: var(--accent-cyan);
}
.symframe-body-tool[data-tool-status="done"] .symframe-tool-status-dot {
  background: #35d29a;
  box-shadow: 0 0 4px rgba(53, 210, 154, 0.4);
}
.symframe-body-tool[data-tool-status="error"] .symframe-tool-status-dot {
  background: #ff5c72;
  box-shadow: 0 0 4px rgba(255, 92, 114, 0.4);
}
.symframe-body-tool[data-tool-status="error"] .symframe-tool-status-text {
  color: #ff8593;
}
.symframe-body-tool[data-tool-status="blocked"] .symframe-tool-status-dot,
.symframe-body-tool[data-tool-status="uncertain"] .symframe-tool-status-dot {
  background: #f59e0b;
  box-shadow: 0 0 4px rgba(245, 158, 11, 0.45);
}
.symframe-body-tool[data-tool-status="blocked"] .symframe-tool-status-text,
.symframe-body-tool[data-tool-status="uncertain"] .symframe-tool-status-text {
  color: #fbbf24;
}
.symframe-tool-status-reason {
  margin-top: 4px;
  color: var(--text-dim);
  font-size: 10px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
@keyframes symframe-tool-firing {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

/* ── Context meter ────────────────────────────────────────────────────
   Persistent per-session token/window meter. Pushed on each assistant
   message end (running) and settled at agent end. Ported from personal
   Symi, re-expressed in 4minds symframe tokens. */
.symframe-body-context {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: var(--font-mono);
}
.symframe-context-model {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--tracking-normal);
  text-transform: none;
  color: var(--accent-cyan);
  opacity: 1;
  word-break: normal;
}
.symframe-context-tokens {
  font-size: 10px;
  letter-spacing: var(--tracking-normal);
  color: var(--text);
  word-break: break-word;
}
.symframe-context-totals {
  font-size: 9px;
  letter-spacing: var(--tracking-normal);
  color: var(--text-dim);
}
@media (prefers-reduced-motion: reduce) {
  .symframe-body-tool[data-tool-status="firing"] .symframe-tool-status-dot {
    animation: none;
  }
}

/* ── Layer 2 loop island (symframe card type:"layer2") ────────────────
   A live window into an autonomous Layer 2 task: loop rail (Plan → Build →
   Check → Repair → Deliver), headline, goal, activity/thinking line,
   telemetry chips, abnormal-run flags, validation checklist, delivery link,
   and an attention block (approval/question/blocked). Colour = state (green
   done, amber attention, pink stop, dim pending); motion is decoration only
   (disabled under prefers-reduced-motion), state always carried by colour +
   class. Ported from personal Symi, re-expressed in 4minds symframe tokens
   (--text / --text-dim / --font-mono) with literal state hex, matching the
   tool/context card port above instead of the personal --sf-* set. */
.symframe-body-layer2 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* never let long content grow or horizontally overflow the right panel */
  max-width: 100%;
  overflow: hidden;
}
.symframe-body-layer2 * {
  min-width: 0;
}

/* Loop stage rail: Plan → Build → Check → Repair → Deliver */
.l2-rail {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px;
  padding: 4px 0 6px;
}
.l2-stage {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  text-align: center;
}
/* Connector line between stations (drawn on the gap to the left of each stage after the first). */
.l2-stage::before {
  content: "";
  position: absolute;
  top: 6px;
  right: 50%;
  left: -50%;
  height: 2px;
  background: rgba(255, 255, 255, 0.12);
}
.l2-stage:first-child::before {
  display: none;
}
.l2-dot {
  position: relative;
  z-index: 1;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25);
}
.l2-stage-label {
  font-size: 10px;
  line-height: 1.2;
  color: rgba(247, 246, 243, 0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* States */
.l2-stage-done .l2-dot {
  background: #35c46a;
}
.l2-stage-done + .l2-stage::before,
.l2-stage-done::before {
  background: rgba(53, 196, 106, 0.5);
}
.l2-stage-active .l2-dot {
  background: #57e08a;
  animation: l2-pulse 1.4s ease-in-out infinite;
}
.l2-stage-active .l2-stage-label,
.l2-stage-current .l2-stage-label {
  color: var(--text);
  font-weight: 600;
}
.l2-stage-waiting .l2-dot,
.l2-stage-blocked .l2-dot {
  background: #e0a83a;
  animation: l2-pulse 1.6s ease-in-out infinite;
}
.l2-stage-failed .l2-dot,
.l2-stage-cancelled .l2-dot {
  background: #e0577e;
}
/* Pending/skipped stations read as hollow, but the fill must be OPAQUE so the
   connector line behind it doesn't show through the dot. A near-black fill (the
   card interior) occludes the line; a faint inset ring keeps the "empty" look. */
.l2-stage-pending .l2-dot,
.l2-stage-skipped .l2-dot {
  background: #818181;
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.l2-stage-skipped .l2-stage-label,
.l2-stage-pending .l2-stage-label {
  opacity: 0.7;
}
/* Repair badge (×N) */
.l2-badge {
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  padding: 1px 3px;
  border-radius: 6px;
  background: #e0a83a;
  color: #1a1205;
  white-space: nowrap;
}
.l2-rail-repairing .l2-stage[data-stage="repair"] .l2-dot {
  animation: l2-spin 1.1s linear infinite;
  box-shadow: 0 0 0 2px rgba(224, 168, 58, 0.5);
}

.l2-headline {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.l2-goal {
  font-size: 11px;
  color: rgba(247, 246, 243, 0.75);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.l2-attention {
  font-size: 11px;
  line-height: 1.3;
  padding: 4px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.2);
}
.l2-attention-approval,
.l2-attention-question {
  color: #ffb3c8;
  box-shadow: inset 2px 0 0 0 #e0577e;
}
.l2-attention-blocked {
  color: #e6b74e;
  box-shadow: inset 2px 0 0 0 #e0a83a;
}
/* the approval title + the actual command it gates. */
.l2-attention-title {
  font-weight: 600;
}
.l2-attention-cmd {
  display: block;
  margin-top: 3px;
  padding: 3px 5px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text);
  background: rgba(0, 0, 0, 0.28);
  white-space: pre-wrap;
  word-break: break-all;
  overflow-wrap: anywhere;
}
.l2-attention-withheld {
  margin-top: 3px;
  font-style: italic;
  opacity: 0.85;
}
.l2-attention-grant {
  margin-top: 3px;
  font-size: 11px;
  opacity: 0.8;
}

@keyframes l2-pulse {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.25);
    filter: brightness(1.3);
  }
}
@keyframes l2-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Layer 2 island — activity line + telemetry chips + abnormal flags */
.l2-activity {
  font-size: 11px;
  color: rgba(247, 246, 243, 0.75);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.l2-activity.l2-thinking {
  background: linear-gradient(
    90deg,
    var(--text-dim) 0%,
    var(--text) 50%,
    var(--text-dim) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: l2-shimmer 2.2s linear infinite;
}
.l2-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.l2-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  line-height: 1.4;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(247, 246, 243, 0.75);
  white-space: nowrap;
}
.l2-chip-ok {
  color: #57e08a;
  background: rgba(53, 196, 106, 0.14);
}
.l2-chip-warn {
  color: #e6b74e;
  background: rgba(224, 168, 58, 0.14);
}
.l2-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.l2-flag {
  font-size: 10px;
  line-height: 1.4;
  padding: 1px 6px;
  border-radius: 8px;
  color: #ffb3c8;
  background: rgba(224, 87, 126, 0.16);
  white-space: nowrap;
}

@keyframes l2-shimmer {
  to {
    background-position: -200% 0;
  }
}

/* Layer 2 island — validation checklist + delivery */
.l2-validation {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 2px;
}
.l2-verdict {
  font-size: 10px;
  font-weight: 600;
  color: rgba(247, 246, 243, 0.75);
}
.l2-verdict-passed {
  color: #57e08a;
}
.l2-verdict-failed {
  color: #e6b74e;
}
.l2-crit {
  display: grid;
  grid-template-columns: 14px 1fr;
  align-items: start;
  gap: 5px;
  font-size: 11px;
  line-height: 1.35;
  color: rgba(247, 246, 243, 0.75);
}
.l2-crit-icon {
  text-align: center;
  color: rgba(247, 246, 243, 0.4);
}
.l2-crit-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.l2-crit-met .l2-crit-icon {
  color: #57e08a;
}
.l2-crit-met .l2-crit-text {
  color: var(--text);
}
.l2-crit-unmet .l2-crit-icon {
  color: #e0577e;
}
.l2-crit-unknown .l2-crit-icon {
  color: #e6b74e;
}
.l2-crit-evidence {
  grid-column: 2;
  font-size: 10px;
  color: #ffb3c8;
  opacity: 0.85;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.l2-delivery {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11px;
  padding: 4px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.18);
}
.l2-delivery-verified {
  box-shadow: inset 2px 0 0 0 #35c46a;
}
.l2-delivery-preview {
  box-shadow: inset 2px 0 0 0 #e0a83a;
}
.l2-delivery-label {
  color: var(--text);
  font-weight: 600;
}
.l2-delivery-verified .l2-delivery-label {
  color: #57e08a;
}
.l2-delivery-preview .l2-delivery-label {
  color: #e6b74e;
}
.l2-delivery-link {
  color: #9fd0ff;
  text-decoration: none;
  font-weight: 600;
}
.l2-delivery-link:hover {
  text-decoration: underline;
}

/* Layer 2 island — polish (criterion flip-flash) */
.l2-crit-flash {
  animation: l2-flash 0.9s ease-out;
}
@keyframes l2-flash {
  0% {
    background: rgba(53, 196, 106, 0.28);
    transform: translateX(2px);
  }
  100% {
    background: transparent;
    transform: translateX(0);
  }
}

/* Narrow right-panel widths: shrink labels, let the loop rail wrap. */
@media (max-width: 360px) {
  .l2-stage-label {
    font-size: 9px;
  }
}
@media (max-width: 300px) {
  .l2-rail {
    flex-wrap: wrap;
    gap: 6px 4px;
  }
  .l2-stage {
    flex-basis: 30%;
  }
  .l2-stage::before {
    display: none; /* connectors don't survive wrapping cleanly */
  }
}
@media (prefers-reduced-motion: reduce) {
  .l2-stage-active .l2-dot,
  .l2-stage-waiting .l2-dot,
  .l2-stage-blocked .l2-dot,
  .l2-rail-repairing .l2-stage[data-stage="repair"] .l2-dot {
    animation: none;
  }
  .l2-activity.l2-thinking {
    animation: none;
    -webkit-text-fill-color: currentColor;
    background: none;
    color: var(--text);
  }
  .l2-crit-flash {
    animation: none;
  }
}

/* ── Response Area ────────────────────────────────────────────────── */
.symi-root .response-area {
  /* Fills the in-flow center column (.center-col); the side columns own their
     own width via flex, so this just spans its parent. */
  position: absolute;
  top: 2px;
  left: 0;
  right: 0;
  bottom: var(--prompt-reserve);
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* right: 10px — scrollbar is hidden by default (6px wide, transparent thumb)
     and only appears when the user scrolls via mouse wheel, then fades out
     when the pointer leaves the response area (see scrollbar hover rules below).
     scrollbar-gutter: stable already reserves the 6px gutter so content never
     shifts on show/hide — the 10px right padding fills the remaining gap. */
  padding: 0 8px 16px 8px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  /* Always reserve the scrollbar gutter so content never shifts when
     the scrollbar appears on hover */
  scrollbar-gutter: stable;
  /* Transparent reading column — the app-background shows straight through,
     no card fill/border/blur. */
  background: transparent;
  border: none;
}

/* Full-width response content — the response-area's 24px side padding
   provides the left/right inset. */
.symi-root .response-area > * {
  width: 100%;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  flex-shrink: 0;
}

/* ── Message Bubbles ──────────────────────────────────────────────── */
.symi-root .message {
  pointer-events: auto;
  width: 100%;
  max-width: none;
  margin-bottom: 16px;
  animation: waterfall 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
  transform: translateY(-20px);
  /* Allow bubble to fit content — don't impose a forced width on the child */
  display: block;
}

@keyframes waterfall {
  to { opacity: 1; transform: translateY(0); }
}

.symi-root .message.user-msg .bubble {
  /* 4minds accent (#55F7FF) at 16% — matches the platform accent token */
  background: rgba(85, 247, 255, 0.16);
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  display: inline-block;
  float: right;
  max-width: 75%;
  backdrop-filter: blur(12px);
  color: var(--text);
  font-size: 15.5px; /* 20260904: +1 (was 14.5px) */
  clear: both;
  position: relative;
  overflow-wrap: anywhere;
}

/* Attached-files list inside user message bubble */
.symi-root .msg-attached-files {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
/* No accompanying user text — the file list is the whole bubble, so drop the
   gap that would otherwise separate it from the (absent) message text. */
.symi-root .msg-attached-files.no-msg-text {
  margin-top: 0;
}
.symi-root .msg-attached-file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(85,247,255,0.12);
  font-size: 12px;
}
.symi-root .msg-attached-extra {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.symi-root .msg-files-toggle {
  background: none;
  border: none;
  color: rgba(85,247,255,0.55);
  font-size: 11px;
  cursor: pointer;
  padding: 3px 0 0;
  text-align: left;
}
.symi-root .msg-files-toggle:hover {
  color: rgba(85,247,255,0.9);
}

.symi-root .message.symi-msg .bubble {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--text);
  position: relative;
  clear: both;
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

.symi-root .message-clearfix { clear: both; }

.symi-root .typing-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--accent-cyan);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: blink 1s step-end infinite;
  box-shadow: 0 0 4px var(--accent-cyan);
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Floating Prompt Bar ──────────────────────────────────────────── */
.symi-root .prompt-wrap {
  /* Pinned to the bottom of the in-flow center column (.center-col). */
  position: absolute;
  bottom: 28px;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.symi-root .prompt-bar {
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* 4minds offwhite (#F7F6F3) at 4% fill, accent (#55F7FF) at 25% border
     when resting; brightens to 75% on :focus-within. */
  background: rgba(247, 246, 243, 0.04);
  border: 1px solid rgba(85, 247, 255, 0.25);
  border-radius: 8px;
  padding: 14px 16px 12px;
  box-shadow:
    0 0 0 1px rgba(85, 247, 255, 0.08),
    0 8px 40px rgba(0, 0, 0, 0.6),
    0 0 60px rgba(85, 247, 255, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition:
    border-color 0.3s,
    box-shadow 0.3s;
  cursor: text;
}

/* ── Slash command autocomplete dropdown ─────────────────────────── */
@keyframes slash-ac-open {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}
@keyframes slash-ac-close {
  from { opacity: 1; transform: translateY(0);   }
  to   { opacity: 0; transform: translateY(4px); }
}

.slash-autocomplete {
  display: none;
  flex-direction: column;
  margin: -2px -8px 8px;
  padding: 3px;
  background: rgba(10, 14, 23, 0.9);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(85, 247, 255, 0.2);
  border-radius: 10px;
  max-height: 185px;
  overflow-y: auto;
  font-size: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(85,247,255,0.06);
}
.slash-autocomplete::-webkit-scrollbar { width: 4px; height: 4px; }
.slash-autocomplete::-webkit-scrollbar-track { background: transparent; }
.slash-autocomplete::-webkit-scrollbar-thumb {
  background: rgba(247,246,243,0.16);
  border-radius: 2px;
}
.slash-autocomplete::-webkit-scrollbar-thumb:hover { background: rgba(247,246,243,0.1); }
.slash-autocomplete.open {
  display: flex;
  animation: slash-ac-open 0.14s ease-out forwards;
}
.slash-autocomplete.open.closing {
  animation: slash-ac-close 0.1s ease-in forwards;
}
.slash-ac-item {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: baseline;
  gap: 10px;
  padding: 5px 9px;
  border-radius: 6px;
  cursor: pointer;
  color: rgba(247, 246, 243, 0.75);
  transition: background 0.12s, color 0.12s, box-shadow 0.12s;
}
.slash-ac-item:hover {
  background: rgba(85, 247, 255, 0.07);
  color: var(--text);
}
.slash-ac-item.selected {
  background: rgba(85, 247, 255, 0.11);
  color: var(--text-bright);
  box-shadow: inset 2px 0 0 rgba(85, 247, 255, 0.65);
}
.slash-ac-name {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--accent-cyan);
}
.slash-ac-alias {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(247, 246, 243, 0.75);
  opacity: 0.6;
}
.slash-ac-desc {
  font-size: 11px;
  opacity: 0.85;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.slash-ac-header {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: rgba(247, 246, 243, 0.75);
  opacity: 0.7;
  padding: 4px 10px 6px;
  margin-bottom: 2px;
  border-bottom: 1px solid rgba(85, 247, 255, 0.12);
}
.slash-ac-arg {
  grid-template-columns: auto 1fr;
}

/* ── Prompt rows ──────────────────────────────────────────────────── */
.symi-root .prompt-row-main {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.symi-root .prompt-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
  padding-top: 2px;
}

/* Bump the inline 13px SVGs on the action-row text buttons to match the
   larger 12px label / 34px button sizing. (attach/send keep their own 16px.) */
.symi-root .prompt-row-actions .bg-task-btn svg,
.symi-root .prompt-row-actions .history-btn svg,
.symi-root .prompt-row-actions .stop-btn svg,
.symi-root .prompt-row-actions .queue-btn svg,
.symi-root .prompt-row-actions .new-session-btn svg {
  width: 15px;
  height: 15px;
}

/* Explicit, one-shot background action. Normal Send remains inline. */
.symi-root .bg-task-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  height: 34px;
  /* Neutral action button — matches new-session/history (offwhite 8% fill, 40% border) */
  background: rgba(247, 246, 243, 0.08);
  border: 1px solid rgba(247, 246, 243, 0.4);
  border-radius: 8px;
  color: var(--text);
  /* Regular Acid Grotesk, matching the SYMI GATEWAY box labels (.net-name):
     no mono tracking, default weight. */
  font-size: 12px;
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}
/* Neutral hover — mirrors .history-btn / .new-session-btn (offwhite, no purple) */
.symi-root .bg-task-btn:hover {
  border-color: rgba(85, 247, 255, 0.4);
}
/* A background task is already running: the singleton slot is taken, so a new
   start would be refused. Dim the button and drop its hover affordances. */
.symi-root .bg-task-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.symi-root .bg-task-btn:disabled:hover {
  background: rgba(247, 246, 243, 0.08);
  border-color: rgba(247, 246, 243, 0.4);
  box-shadow: none;
}
/* A background task is already running: the singleton slot is taken, so a new
   start would be refused. Dim the button and drop its hover affordances. */
.symi-root .bg-task-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.symi-root .bg-task-btn:disabled:hover {
  background: rgba(247, 246, 243, 0.08);
  border-color: rgba(247, 246, 243, 0.4);
  box-shadow: none;
}

/* Legacy mode styles remain inert for compatibility with cached clients. */
body.layer2-mode .symi-root .prompt-bar {
  border-color: rgba(84, 63, 237, 0.4);
  box-shadow:
    0 0 0 1px rgba(84, 63, 237, 0.22),
    0 8px 40px rgba(0, 0, 0, 0.6),
    0 0 70px rgba(84, 63, 237, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
body.layer2-mode .symi-root .prompt-bar:focus-within {
  border-color: rgba(84, 63, 237, 0.6);
  box-shadow:
    0 0 0 1px rgba(84, 63, 237, 0.32),
    0 8px 40px rgba(0, 0, 0, 0.6),
    0 0 90px rgba(84, 63, 237, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
body.layer2-mode .symi-root .prompt-icon {
  color: #543fed;
  filter: drop-shadow(0 0 4px #543fed);
}
/* Recolor the Agent Status orb (arcs/core/halo read from --aso-color). */
body.layer2-mode .symi-root #agent-status-panel {
  --aso-color: rgba(84, 63, 237, 0.9) !important;
}

/* ── Layer 2 live activity banner (bottom of chat, above composer) ── */
.symi-root .layer2-activity-banner {
  --l2ab-accent: 85, 247, 255;
  width: 100%;
  margin: 0 0 8px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  padding: 8px 14px;
  border-radius: 6px;
  background: rgba(var(--l2ab-accent), 0.06);
  border: 1px solid rgba(var(--l2ab-accent), 0.18);
  color: var(--text-dim, #9fb0c8);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-normal);
  line-height: 1.4;
  /* Capped so the banner can't grow past the space the response area reserves
     for it below (see --l2ab-* and #response-area.has-activity-*). Head-only by
     default; the taller cap applies once a command list is present. */
  max-height: var(--l2ab-banner-h);
  overflow: hidden;
}
.symi-root .layer2-activity-banner:has(.l2ab-cmds) {
  max-height: var(--l2ab-commands-h);
}
.symi-root .layer2-activity-banner[hidden] {
  display: none;
}
.symi-root .l2ab-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.symi-root .l2ab-cmds {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 76px;
  overflow: hidden;
  padding-top: 4px;
  border-top: 1px solid rgba(var(--l2ab-accent), 0.14);
}
.symi-root .l2ab-cmd {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.symi-root .l2ab-cmd-glyph {
  flex-shrink: 0;
  width: 11px;
  text-align: center;
  font-size: 10px;
}
.symi-root .l2ab-cmd-text {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text, #d8def0);
}
.symi-root .l2ab-cmd-running .l2ab-cmd-glyph {
  color: rgb(var(--l2ab-accent));
}
.symi-root .l2ab-cmd-done .l2ab-cmd-glyph {
  color: #4ade80;
}
.symi-root .l2ab-cmd-done .l2ab-cmd-text {
  opacity: 0.9;
}
.symi-root .l2ab-cmd-error .l2ab-cmd-glyph {
  color: #f87171;
}
.symi-root .l2ab-cmd-error .l2ab-cmd-text {
  opacity: 0.75;
}
.symi-root .layer2-activity-banner[data-state="done"] {
  --l2ab-accent: 74, 222, 128;
  opacity: 0.9;
}
.symi-root .layer2-activity-banner[data-state="done"] .l2ab-label {
  font-weight: 600;
}
.symi-root .l2ab-dots {
  flex-shrink: 0;
  color: rgb(var(--l2ab-accent));
  letter-spacing: var(--tracking-caps);
  animation: l2ab-dots 1.4s steps(4, end) infinite;
  overflow: hidden;
  white-space: nowrap;
  width: 1.6em;
}
@keyframes l2ab-dots {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}
.symi-root #response-area.has-activity-banner {
  bottom: calc(var(--prompt-reserve) + var(--l2ab-banner-h) + 8px);
  padding-top: 4px;
}
.symi-root #response-area.has-activity-commands {
  bottom: calc(var(--prompt-reserve) + var(--l2ab-commands-h) + 8px);
}
.symi-root .l2ab-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgb(var(--l2ab-accent));
  box-shadow: 0 0 8px rgba(var(--l2ab-accent), 0.7);
}
.symi-root .l2ab-spin {
  animation: l2ab-pulse 1.4s ease-in-out infinite;
}
@keyframes l2ab-pulse {
  0%,
  100% {
    opacity: 0.4;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}
.symi-root .l2ab-label {
  flex-shrink: 0;
  font-weight: 700;
  color: rgb(var(--l2ab-accent));
  text-transform: none;
}
.symi-root .l2ab-sep {
  flex-shrink: 0;
  opacity: 0.4;
}
.symi-root .l2ab-activity,
.symi-root .l2ab-last {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.symi-root .l2ab-activity {
  color: var(--text, #d8def0);
}
.symi-root .l2ab-last {
  font-style: italic;
  opacity: 0.7;
}
.symi-root .l2ab-pointer {
  flex-shrink: 0;
  color: rgb(var(--l2ab-accent));
  opacity: 0.9;
}
.symi-root .l2ab-bg {
  flex-shrink: 0;
  font-size: 0.85em;
  font-weight: 600;
  letter-spacing: var(--tracking-normal);
  opacity: 0.75;
  color: rgb(var(--l2ab-accent));
}
/* The concrete thing waiting on the user (validation tally / approval title / block reason) for a
   parked/awaiting task — sits after the state label, truncates, tinted with the state accent. */
.symi-root .l2ab-status-detail {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgb(var(--l2ab-accent));
  opacity: 0.85;
}
/* Goal line — the task the banner belongs to, on its own dim row below the status header. */
.symi-root .l2ab-goal {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-dim, #9fb0c8);
  opacity: 0.8;
  padding-left: 16px;
}
.symi-root .layer2-activity-banner[data-state="awaiting"],
.symi-root .layer2-activity-banner[data-state="parked"] {
  --l2ab-accent: 245, 158, 11;
}
.symi-root .layer2-activity-banner[data-state="terminal"] {
  opacity: 0.7;
}
@media (prefers-reduced-motion: reduce) {
  .symi-root .l2ab-spin,
  .symi-root .l2ab-dots {
    animation: none;
  }
}

/* Hover sits between resting (25%) and focus (75%); focus still wins. */
.symi-root .prompt-bar:hover:not(:focus-within) {
  border-color: rgba(85, 247, 255, 0.45);
}

/* Focus only brightens the border — no added glow (keeps the resting shadow). */
.symi-root .prompt-bar:focus-within {
  border-color: rgba(85, 247, 255, 0.75);
}

/* .prompt-icon removed — replaced by upload-attach-btn in row 1 */

.symi-root .prompt-bar textarea {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: var(--tracking-normal);
  caret-color: var(--accent-cyan);
  resize: none;
  overflow-y: hidden;
  min-height: 22px;
  max-height: calc(3 * 1.55 * 14px); /* 3 lines */
  padding: 0;
  margin: 0;
  display: block;
  scrollbar-width: none;
}

.symi-root .prompt-bar textarea::-webkit-scrollbar { display: none; }

.symi-root .prompt-bar textarea::placeholder {
  color: rgba(247, 246, 243, 0.4);
}

.symi-root .send-btn {
  /* Matches .upload-attach-btn: neutral surface (offwhite/8 fill, /40 border)
     with a full-accent (#55F7FF) icon. */
  background: rgba(247, 246, 243, 0.08);
  border: 1px solid rgba(247, 246, 243, 0.4);
  border-radius: 8px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #55f7ff;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background 0.2s,
    border-color 0.2s,
    transform 0.15s,
    color 0.2s,
    opacity 0.2s;
}

.symi-root .send-btn:hover:not(:disabled) {
  border-color: rgba(85, 247, 255, 0.4);
  cursor: pointer;
}

.symi-root .send-btn:disabled {
  /* Clearly inert: muted icon, dimmed surface + border, lowered opacity.
     Cursor stays default (not a disabled cursor). */
  color: rgba(247, 246, 243, 0.35);
  background: rgba(247, 246, 243, 0.04);
  border-color: rgba(247, 246, 243, 0.15);
  opacity: 0.5;
  cursor: default;
}

/* ── File Upload: Drop Overlay ────────────────────────────────────── */
.symi-root .upload-drop-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  border: 2px dashed rgba(85,247,255,0.5);
  border-radius: 16px;
  pointer-events: none;
}
.symi-root .upload-drop-overlay.visible {
  display: flex;
}
.symi-root .upload-drop-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--accent-cyan);
  font-size: 16px;
  font-weight: 500;
}
.symi-root .upload-drop-content svg {
  opacity: 0.8;
  filter: drop-shadow(0 0 12px var(--accent-cyan));
}
.symi-root .upload-drop-hint {
  font-size: 12px;
  color: rgba(247, 246, 243, 0.75);
  font-weight: 400;
}

/* ── File Upload: Attach Button (in actions row, left side) ──────── */
.symi-root .upload-attach-btn {
  /* Neutral button surface (offwhite/8 fill, offwhite/40 border) with a
     full-accent (#55F7FF) icon. Sits just left of the model selector; the
     model selector's own margin-right:auto pushes the rest to the right. */
  background: rgba(247, 246, 243, 0.08);
  border: 1px solid rgba(247, 246, 243, 0.4);
  color: #55f7ff;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 8px;
  transition: background 0.2s, border-color 0.2s;
}
.symi-root .upload-attach-btn:hover {
  border-color: rgba(85, 247, 255, 0.4);
}
.symi-root .upload-attach-btn.has-dataset {
  opacity: 1;
}
.symi-root .prompt-actions-spacer {
  flex: 1;
}

/* ── Mobile "+" actions menu ─────────────────────────────────────────
   Consolidates Background / History / New Session behind a single "+"
   button on phones. Hidden on desktop; the inline buttons stay visible
   there. On mobile (≤560px) the inline three are hidden and this shows. */
.symi-root .prompt-more {
  display: none;
  position: relative;
}
.symi-root .prompt-more-btn {
  background: rgba(247, 246, 243, 0.08);
  border: 1px solid rgba(247, 246, 243, 0.4);
  color: #55f7ff;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 8px;
  transition: background 0.2s, border-color 0.2s;
}
.symi-root .prompt-more-btn:hover {
  border-color: rgba(85, 247, 255, 0.4);
}
.symi-root .prompt-more-btn svg {
  width: 20px;
  height: 20px;
}
.symi-root .prompt-more-menu {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  min-width: 168px;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: rgba(18, 18, 20, 0.96);
  border: 1px solid rgba(247, 246, 243, 0.12);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  z-index: 40;
}
.symi-root .prompt-more.open .prompt-more-menu {
  display: flex;
}
.symi-root .prompt-more-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 10px;
  background: none;
  border: none;
  border-radius: 6px;
  color: rgba(247, 246, 243, 0.75);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-normal);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, color 0.15s;
}
.symi-root .prompt-more-item:hover {
  background: rgba(247, 246, 243, 0.06);
  color: var(--text);
}
.symi-root .prompt-more-item svg {
  flex-shrink: 0;
  color: rgba(247, 246, 243, 0.75);
}

@media (max-width: 560px) {
  .symi-root .prompt-more {
    display: block;
  }
  .symi-root .prompt-row-actions .bg-task-btn,
  .symi-root .prompt-row-actions .history-btn,
  .symi-root .prompt-row-actions .new-session-btn {
    display: none;
  }
}

/* ── File Upload: File Chip Row (inside prompt bar) ─────────────── */
/* Horizontal scrollable strip of file chips, lives inside .prompt-bar. */
.symi-root .upload-file-list {
  display: none;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
}
.symi-root .upload-file-list.visible {
  display: flex;
}
.symi-root .upload-file-list::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
.symi-root .upload-file-list::-webkit-scrollbar-track {
  background: transparent;
}
.symi-root .upload-file-list::-webkit-scrollbar-thumb {
  background: rgba(247,246,243,0.16);
  border-radius: 2px;
}
.symi-root .upload-file-list::-webkit-scrollbar-thumb:hover {
  background: rgba(247,246,243,0.1);
}

/* ── Individual file chip ────────────────────────────────────────── */
.symi-root .upload-file-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  max-width: 180px;
  padding: 5px 6px 5px 10px;
  /* Match the chat-input action buttons (attach / history / background):
     offwhite 8% fill, offwhite 40% border, cyan-accent hover. */
  background: rgba(247, 246, 243, 0.08);
  border: 1px solid rgba(247, 246, 243, 0.4);
  border-radius: 8px;
  font-size: 12px;
  font-family: var(--font);
  color: var(--text);
  cursor: default;
  transition: background 0.2s, border-color 0.2s;
}
.symi-root .upload-file-chip:hover {
  border-color: rgba(85, 247, 255, 0.4);
}
.symi-root .upload-file-icon {
  flex-shrink: 0;
  /* Accent icon ties the chip back to the attach button's cyan glyph. */
  color: var(--accent);
  display: flex;
  align-items: center;
}
.symi-root .upload-file-name {
  min-width: 0;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.symi-root .upload-file-size {
  color: rgba(247, 246, 243, 0.75);
  flex-shrink: 0;
  font-size: 10px;
  white-space: nowrap;
}

/* X button inside each chip */
.symi-root .upload-file-x {
  background: none;
  border: none;
  color: rgba(247, 246, 243, 0.75);
  cursor: pointer;
  padding: 3px;
  border-radius: 4px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}
.symi-root .upload-file-x:hover {
  color: #f7f6f3;
  background: rgba(255, 255, 255, 0.12);
}

/* "Clear all" button at the end of the chip row */
.symi-root .upload-clear-btn {
  background: none;
  border: none;
  color: rgba(247, 246, 243, 0.75);
  cursor: pointer;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 6px;
  flex-shrink: 0;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}
.symi-root .upload-clear-btn:hover {
  color: #ff6b6b;
  background: rgba(255,107,107,0.1);
}

/* ── File chip tooltip (fixed, escapes overflow container) ───────── */
.upload-chip-tooltip {
  position: fixed;
  transform: translate(-50%, calc(-100% - 8px));
  background: rgba(10, 14, 23, 0.96);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 7px;
  padding: 5px 10px;
  font-size: 11px;
  line-height: 1.5;
  color: #e8e6e3;
  pointer-events: none;
  opacity: 0;
  z-index: 9999;
  white-space: nowrap;
  transition: opacity 0.12s;
  box-shadow: 0 4px 16px rgba(0,0,0,0.55);
}
.upload-chip-tooltip.visible {
  opacity: 1;
}
.upload-chip-tooltip .tooltip-name {
  display: block;
  font-weight: 500;
}
.upload-chip-tooltip .tooltip-size {
  display: block;
  opacity: 0.55;
  font-size: 10px;
}

/* ── File Upload: Progress Bar ───────────────────────────────────── */
.symi-root .upload-progress-bar {
  display: none;
  width: 100%;
  max-width: 720px;
  height: 3px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 4px;
}
.symi-root .upload-progress-bar.visible {
  display: block;
}
.symi-root .upload-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-cyan), rgba(85,247,255,0.6));
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* ── File Upload: Status Text ────────────────────────────────────── */
.symi-root .upload-status-text {
  display: none;
  width: 100%;
  max-width: 720px;
  font-size: 11px;
  color: var(--accent-cyan);
  padding: 2px 0;
}
.symi-root .upload-status-text.visible {
  display: block;
}
.symi-root .upload-status-text.error {
  color: #ffb347;
  background: rgba(255,179,71,0.1);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255,179,71,0.25);
}

/* ── File Upload: Project Indicator ──────────────────────────────── */
.symi-root .upload-project-indicator {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--text-secondary, #a0a0a0);
  border-top: 1px solid var(--border-color, rgba(255,255,255,0.08));
}
.symi-root .upload-project-indicator.visible {
  display: flex;
}
.symi-root .upload-project-label {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--accent-color, #7c8aff);
  font-weight: 500;
}
.symi-root .upload-project-icon {
  flex-shrink: 0;
}
.symi-root .upload-project-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  background: transparent;
  color: var(--text-tertiary, #666);
  cursor: pointer;
  border-radius: 3px;
  padding: 0;
  margin-left: 2px;
  transition: color 0.15s, background 0.15s;
}
.symi-root .upload-project-clear:hover {
  color: var(--text-primary, #fff);
  background: rgba(255,255,255,0.08);
}

/* ── File Upload: Chat result message ────────────────────────────── */
.symi-root .upload-result-msg .bubble {
  border-left: 3px solid var(--accent-cyan);
  padding-left: 12px;
}

/* ── New Session Button ───────────────────────────────────────────── */
.symi-root .prompt-divider {
  width: 1px;
  height: 18px;
  background: rgba(255,255,255,0.08);
  flex-shrink: 0;
}

.symi-root .new-session-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  /* Neutral action button — offwhite (#F7F6F3) at 8% fill, 40% border */
  background: rgba(247, 246, 243, 0.08);
  border: 1px solid rgba(247, 246, 243, 0.4);
  border-radius: 8px;
  padding: 8px 12px;
  height: 34px;
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.15s, opacity 0.2s;
}

.symi-root .new-session-btn:hover:not(:disabled) {
  border-color: rgba(85, 247, 255, 0.4);
}

.symi-root .new-session-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.symi-root .new-session-label {
  /* Regular Acid Grotesk, matching the SYMI GATEWAY box labels (.net-name). */
  font-family: var(--font);
  font-size: 12px;
}

/* ── New Session Cleared State ───────────────────────────────────── */
.symi-root .session-cleared {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 60px 20px;
  opacity: 0;
  animation: session-cleared-in 0.5s ease forwards;
}

.symi-root .session-cleared-icon {
  font-size: 28px;
  color: var(--accent);
  animation: session-cleared-glow 2s ease-in-out infinite;
}

/* Mirrors the .pulse / pulse-glow effect next to the Symi title, adapted to a
   text glyph (text-shadow instead of box-shadow) and tinted the cyan accent. */
@keyframes session-cleared-glow {
  0%, 100% { opacity: 1;   text-shadow: 0 0 6px var(--accent); }
  50%      { opacity: 0.5; text-shadow: 0 0 12px var(--accent), 0 0 24px var(--accent); }
}

.symi-root .session-cleared-text {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-caps);
  color: rgba(247, 246, 243, 0.75);
  opacity: 1;
}

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

/* ── Thinking Bubble ──────────────────────────────────────────────── */
.symi-root .thinking-bubble {
  /* Transparent — matches the symi response bubbles (no fill, no border). */
  background: none !important;
  border: none !important;
  padding: 0 40px 0 0 !important;
}

.symi-root .think-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.symi-root .think-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  color: var(--accent-cyan);
  text-shadow: 0 0 8px var(--accent-cyan);
}

.symi-root .think-dots span {
  display: inline-block;
  color: var(--accent-cyan);
  animation: dot-pulse 1.2s ease-in-out infinite;
  font-size: 14px;
  opacity: 0;
}
.symi-root .think-dots span:nth-child(1) { animation-delay: 0s; }
.symi-root .think-dots span:nth-child(2) { animation-delay: 0.2s; }
.symi-root .think-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dot-pulse {
  0%, 100% { opacity: 0; transform: translateY(0); }
  50%       { opacity: 1; transform: translateY(-3px); }
}

.symi-root .think-bar-wrap {
  height: 2px;
  background: rgba(247,246,243,0.06);
  border-radius: 99px;
  overflow: hidden;
}

.symi-root .think-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
  border-radius: 99px;
  animation: think-scan 1s ease-in-out infinite;
}

@keyframes think-scan {
  0%   { width: 0%;   margin-left: 0%;   opacity: 1; }
  50%  { width: 60%;  margin-left: 20%;  opacity: 1; }
  100% { width: 0%;   margin-left: 100%; opacity: 0; }
}

/* ── Streaming Bubble ─────────────────────────────────────────────── */
.symi-root .stream-bubble {
  position: relative;
}

.symi-root .stream-bubble.streaming {
  width: 100% !important;
  border-color: rgba(85,247,255,0.25) !important;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.5),
    0 0 20px rgba(85,247,255,0.06),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
  animation: stream-pulse 1.8s ease-in-out infinite;
}

@keyframes stream-pulse {
  0%, 100% { box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 20px rgba(85,247,255,0.06), inset 0 1px 0 rgba(255,255,255,0.06); }
  50%       { box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 40px rgba(85,247,255,0.12), inset 0 1px 0 rgba(255,255,255,0.06); }
}

.symi-root .stream-bubble.streaming::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
  opacity: 0.6;
  animation: top-scan 2s linear infinite;
}

@keyframes top-scan {
  0%   { transform: scaleX(0); transform-origin: left; opacity: 0.8; }
  50%  { transform: scaleX(1); transform-origin: left; opacity: 0.6; }
  100% { transform: scaleX(0); transform-origin: right; opacity: 0; }
}

.symi-root .stream-bubble.done {
  width: fit-content;
  max-width: 100%;
  border-color: rgba(255,255,255,0.1) !important;
  transition: border-color 0.8s, box-shadow 0.8s, width 0.3s ease;
}

/* ── Character spawn animation ────────────────────────────────────── */
.symi-root .char-spawn {
  display: inline;
  color: transparent;
  text-shadow: none;
  transition: color 0.12s ease, text-shadow 0.2s ease;
}

.symi-root .char-spawn.char-visible {
  color: var(--text);
  text-shadow: 0 0 8px rgba(85,247,255,0.4);
  animation: char-settle 0.4s ease forwards;
}

@keyframes char-settle {
  0%   { color: var(--accent-cyan); text-shadow: 0 0 12px var(--accent-cyan), 0 0 24px rgba(85,247,255,0.3); }
  40%  { color: rgba(200,240,255,0.95); text-shadow: 0 0 6px rgba(85,247,255,0.2); }
  100% { color: var(--text); text-shadow: none; }
}

/* ── Telemetry footer ─────────────────────────────────────────────── */
.symi-root .telemetry {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.05);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s;
}

.symi-root .telemetry.tele-visible {
  opacity: 1;
  transform: translateY(0);
}

.symi-root .tele-item {
  font-family: var(--font-mono);
  font-size: 9px;
  color: rgba(247, 246, 243, 0.75);
  letter-spacing: var(--tracking-caps);
}

.symi-root .tele-sep {
  color: rgba(247,246,243,0.12);
  font-size: 9px;
}

/* Copy button sits inline at the end of the telemetry states (not pushed to
   the right edge); it reveals on message hover via the shared .msg-copy-btn
   rules. Nudged up a hair to sit optically centered with the 9px meta text. */
.symi-root .telemetry .tele-copy-btn {
  margin-left: 4px;
}

/* ── Send button loading state ────────────────────────────────────── */
.symi-root .send-btn.btn-loading {
  opacity: 0.45;
  cursor: default;
  animation: none;
  transition: none;
}

/* ── Connection status ────────────────────────────────────────────── */
.symi-root .conn-status {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--glass-bg);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border);
  border-radius: 99px;
  padding: 5px 12px;
  pointer-events: none;
}

.symi-root .conn-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--tracking-caps);
  color: rgba(247, 246, 243, 0.75);
}

.symi-root .dot-red { background: #f87171; box-shadow: 0 0 6px #f87171; }

/* ── UI Toggle button ─────────────────────────────────────────────── */
.symi-root .ui-toggle {
  position: absolute;
  top: 16px;
  right: 24px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--glass-bg);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border);
  border-radius: 99px;
  padding: 6px 14px;
  color: rgba(247, 246, 243, 0.75);
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-normal);
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.symi-root .ui-toggle:hover {
  border-color: var(--glass-border-strong);
  color: var(--text);
  box-shadow: 0 0 16px rgba(85,247,255,0.08);
}

/* ── Scrollbar — matches 4minds platform (4px lane, ink thumb) ── */
/* Standard props gated behind @supports so Chrome uses the ::-webkit width
   (unconditional scrollbar-width:thin would make Chrome ignore the 4px).
   Thumb is always visible (matches 4minds), not hover-reveal. */
@supports not selector(::-webkit-scrollbar) {
  .symi-root .response-area { scrollbar-width: thin; scrollbar-color: rgba(247,246,243,0.16) transparent; }
}
.symi-root .response-area::-webkit-scrollbar { width: 4px; height: 4px; }
.symi-root .response-area::-webkit-scrollbar-track { background: transparent; }
.symi-root .response-area::-webkit-scrollbar-thumb { background: rgba(247,246,243,0.16); border-radius: 2px; }
.symi-root .response-area::-webkit-scrollbar-thumb:hover { background: rgba(247,246,243,0.1); }
.symi-root .response-area::-webkit-scrollbar-thumb:active { background: rgba(247,246,243,0.08); }

/* ═══════════════════════════════════════════════════════════════════
   CONTENT TYPES — Markdown, Thinking, Tool Cards, Code
   ═══════════════════════════════════════════════════════════════════ */

/* ── Markdown prose ────────────────────────────────────────────────── */
.symi-root .msg-text {
  font-size: 15.5px; /* 20260904: +1 for readability (was 14.5px) */
  line-height: 1.75;
  color: var(--text);
  word-wrap: break-word;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Paragraph spacing */
.symi-root .msg-text :where(p,
.symi-root ul,
.symi-root ol,
.symi-root pre,
.symi-root blockquote,
.symi-root table) { margin: 0; }
.symi-root .msg-text :where(p + p,
.symi-root p + ul,
.symi-root p + ol,
.symi-root p + pre,
.symi-root p + blockquote,
.symi-root p + table,
.symi-root ul + p,
.symi-root ol + p,
.symi-root pre + p,
.symi-root blockquote + p,
.symi-root table + p) { margin-top: 0.75em; }
.symi-root .msg-text :where(li + li) { margin-top: 0.25em; }

/* Headings */
.symi-root .msg-text :where(h1,
.symi-root h2,
.symi-root h3,
.symi-root h4,
.symi-root h5,
.symi-root h6) {
  font-weight: 600;
  line-height: 1.3;
  color: rgba(247,246,243,0.96);
  margin: 1.1em 0 0.4em;
}
.symi-root .msg-text :where(h1) { font-size: 1.35em; border-bottom: 1px solid var(--glass-border); padding-bottom: 0.3em; }
.symi-root .msg-text :where(h2) { font-size: 1.18em; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 0.2em; }
.symi-root .msg-text :where(h3) { font-size: 1.06em; }
.symi-root .msg-text :where(h4,
.symi-root h5,
.symi-root h6) { font-size: 1em; color: rgba(247,246,243,0.8); }
.symi-root .msg-text :where(h1,
.symi-root h2,
.symi-root h3,
.symi-root h4,
.symi-root h5,
.symi-root h6):first-child { margin-top: 0.3em; }

/* Lists */
.symi-root .msg-text :where(ul,
.symi-root ol) { padding-left: 1.4em; }
.symi-root .msg-text :where(ul) { list-style-type: disc; }
.symi-root .msg-text :where(ol) { list-style-type: decimal; }
.symi-root .msg-text :where(ul ul) { list-style-type: circle; margin-top: 0.25em; }

/* Text formatting */
.symi-root .msg-text :where(strong) { font-weight: 600; color: rgba(247,246,243,0.97); }
.symi-root .msg-text :where(em) { font-style: italic; color: rgba(247,246,243,0.82); }
.symi-root .msg-text :where(del) { text-decoration: line-through; opacity: 0.6; }
.symi-root .msg-text :where(mark) { background: rgba(251,191,36,0.2); color: #fbbf24; border-radius: 2px; padding: 0 3px; }
.symi-root .msg-text :where(sup) { font-size: 0.75em; vertical-align: super; }
.symi-root .msg-text :where(sub) { font-size: 0.75em; vertical-align: sub; }

/* Links */
.symi-root .msg-text :where(a) { color: var(--accent-cyan); text-decoration: none; border-bottom: 1px solid rgba(85,247,255,0.3); }
.symi-root .msg-text :where(a:hover) { border-bottom-color: var(--accent-cyan); }

/* Horizontal rule */
.symi-root .msg-text :where(hr) {
  border: none;
  border-top: 1px solid var(--glass-border);
  margin: 1em 0;
}

/* Blockquote */
.symi-root .msg-text :where(blockquote) {
  border-left: 2px solid rgba(85,247,255,0.3);
  margin: 0.6em 0;
  padding: 6px 14px;
  background: rgba(85,247,255,0.03);
  color: rgba(247, 246, 243, 0.75);
  border-radius: 0 6px 6px 0;
}
.symi-root .msg-text :where(blockquote blockquote) {
  border-left-color: rgba(84,63,237,0.4);
  background: rgba(84,63,237,0.03);
  margin-top: 6px;
}

/* ── Tables ─────────────────────────────────────────────────────────── */
.symi-root .msg-text :where(table) {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 0.75em;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  overflow: hidden;
}

.symi-root .msg-text :where(thead) {
  background: rgba(85,247,255,0.06);
}

.symi-root .msg-text :where(th) {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent-cyan);
  border: 1px solid var(--glass-border);
  padding: 8px 12px;
  text-align: left;
  background: rgba(0,0,0,0.15);
}

.symi-root .msg-text :where(td) {
  border: 1px solid var(--glass-border);
  padding: 7px 12px;
  vertical-align: top;
  color: var(--text);
  line-height: 1.5;
}

.symi-root .msg-text :where(tr:nth-child(even) td) {
  background: rgba(255,255,255,0.015);
}

.symi-root .msg-text :where(tr:hover td) {
  background: rgba(85,247,255,0.03);
}

/* ── Inline code ────────────────────────────────────────────────────── */
.symi-root .inline-code,
.symi-root .msg-text :where(:not(pre) > code) {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  padding: 0.1em 0.4em;
  color: var(--accent-cyan);
}

/* ── Code blocks — full-featured ────────────────────────────────────── */
.symi-root .code-block {
  margin: 0.75em 0;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0,0,0,0.45);
  font-family: var(--font-mono);
}

/* Full-width breakout — code gets the whole column regardless of bubble */
.symi-root .code-block-full {
  width: 100%;
  max-width: 100%;
}

/* ── Header ── */
.symi-root .code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid var(--glass-border);
  gap: 10px;
}

.symi-root .code-header-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.symi-root .code-header-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* Language badge with per-language color */
.symi-root .code-lang-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--lang-color, var(--accent-cyan));
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  text-shadow: 0 0 8px var(--lang-color, var(--accent-cyan));
}

/* Filename */
.symi-root .code-filename {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(247, 246, 243, 0.75);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  padding: 1px 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

/* Line count */
.symi-root .code-lines-count {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: rgba(247, 246, 243, 0.75);
  white-space: nowrap;
}

/* Expand button */
.symi-root .code-expand-btn {
  font-size: 14px;
  background: transparent;
  border: none;
  color: rgba(247, 246, 243, 0.75);
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color 0.2s;
}
.symi-root .code-expand-btn:hover { color: var(--text); }

/* Copy button */
.symi-root .code-copy {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(247, 246, 243, 0.75);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 4px;
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
}
.symi-root .code-copy:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.symi-root .code-copy.copied { color: var(--accent-green); }

/* ── Code body ── */
.symi-root .code-body { overflow: hidden; }
.symi-root .code-body-collapsed { max-height: 400px; overflow: hidden; position: relative; }
.symi-root .code-body-collapsed::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.8));
  pointer-events: none;
}
.symi-root .code-expanded .code-body-collapsed { max-height: none; overflow: auto; }
.symi-root .code-expanded .code-body-collapsed::after { display: none; }

/* Show more button */
.symi-root .code-show-more {
  display: block;
  width: 100%;
  padding: 8px;
  background: rgba(255,255,255,0.03);
  border: none;
  border-top: 1px solid var(--glass-border);
  color: rgba(247, 246, 243, 0.75);
  font-family: var(--font-mono);
  font-size: 10px;
  cursor: pointer;
  letter-spacing: var(--tracking-caps);
  transition: background 0.2s, color 0.2s;
  text-align: center;
}
.symi-root .code-show-more:hover { background: rgba(255,255,255,0.06); color: var(--text); }

/* ── Line numbers ── */
.symi-root .code-pre {
  margin: 0;
  padding: 12px 0;
  overflow-x: auto;
  font-size: 12.5px;
  line-height: 1.65;
}

.symi-root .code-numbered { display: block; }

.symi-root .code-line {
  display: flex;
  min-height: 1.65em;
}

.symi-root .code-line:hover { background: rgba(255,255,255,0.03); }

.symi-root .line-num {
  display: inline-block;
  min-width: 44px;
  padding: 0 12px 0 14px;
  color: rgba(247,246,243,0.2);
  text-align: right;
  user-select: none;
  border-right: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
  font-size: 11px;
  line-height: inherit;
}

.symi-root .line-content {
  display: inline-block;
  padding: 0 16px;
  white-space: pre;
  flex: 1;
}

.symi-root .hljs { background: transparent !important; padding: 0 !important; }

/* ── Thinking block ─────────────────────────────────────────────────── */
.symi-root .msg-thinking { margin: 4px 0 8px; }

.symi-root .thinking-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  color: rgba(247, 246, 243, 0.75);
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-normal);
  transition: color 0.2s;
}
.symi-root .thinking-toggle:hover { color: rgba(247, 246, 243, 0.75); }
.symi-root .thinking-icon { color: var(--accent-purple); }
.symi-root .thinking-chevron { font-size: 9px; transition: transform 0.2s; }

.symi-root .thinking-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.symi-root .thinking-body.thinking-open { max-height: 600px; overflow-y: auto; }

.symi-root .thinking-text {
  margin-top: 6px;
  padding: 10px 14px;
  border: 1px dashed rgba(84,63,237,0.25);
  border-radius: 8px;
  background: rgba(84,63,237,0.04);
  font-size: 12px;
  line-height: 1.65;
  color: rgba(247, 246, 243, 0.75);
  white-space: pre-wrap;
  font-family: var(--font-mono);
}

/* ── Tool call card ─────────────────────────────────────────────────── */
.symi-root .msg-tool-card {
  margin: 4px 0;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255,255,255,0.02);
}

.symi-root .tool-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  color: rgba(247, 246, 243, 0.75);
  font-size: 12px;
  transition: background 0.2s;
}
.symi-root .tool-header:hover { background: rgba(255,255,255,0.03); }
.symi-root .tool-icon { font-size: 13px; flex-shrink: 0; }
.symi-root .tool-name { flex: 1; font-family: var(--font-mono); font-size: 11px; color: var(--text); }
.symi-root .tool-chevron { font-size: 9px; color: rgba(247, 246, 243, 0.75); }

.symi-root .tool-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  border-top: 0 solid var(--glass-border);
}
.symi-root .tool-body.tool-open { max-height: 320px; overflow-y: auto; border-top-width: 1px; }

.symi-root .tool-input {
  margin: 0;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(247, 246, 243, 0.75);
  white-space: pre-wrap;
  word-break: break-all;
  background: rgba(0,0,0,0.25);
}

/* ── Tool result ────────────────────────────────────────────────────── */
.symi-root .msg-tool-result {
  margin: 2px 0 6px;
  border: 1px solid rgba(52,211,153,0.14);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(52,211,153,0.02);
}

.symi-root .result-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 11px;
  color: rgba(247, 246, 243, 0.75);
}
.symi-root .result-icon { color: var(--accent-green); font-size: 12px; }
.symi-root .result-label { font-family: var(--font-mono); letter-spacing: var(--tracking-caps); flex: 1; }

.symi-root .result-expand {
  font-family: var(--font-mono);
  font-size: 9px;
  background: transparent;
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  color: rgba(247, 246, 243, 0.75);
  cursor: pointer;
  padding: 2px 8px;
  transition: color 0.2s;
}
.symi-root .result-expand:hover { color: var(--text); }

.symi-root .result-preview { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; border-top: 0 solid rgba(52,211,153,0.14); }
.symi-root .result-open { max-height: 260px; overflow-y: auto; border-top-width: 1px; }

.symi-root .result-text {
  margin: 0;
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(247, 246, 243, 0.75);
  white-space: pre-wrap;
  word-break: break-all;
  background: rgba(0,0,0,0.2);
}

/* ── Message image ──────────────────────────────────────────────────── */
.symi-root .msg-image img {
  max-width: 100%;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
  margin: 4px 0;
}

/* ── Meta row (timestamp + copy button) ─────────────────────────────── */
/* Sits outside/below the bubble. clear: both drops it under the floated
   bubble; alignment follows the message side (right for user, left for symi). */
.symi-root .msg-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  clear: both;
  margin-top: 4px;
}
.symi-root .message.user-msg .msg-meta { justify-content: flex-end; padding-top: 4px; }
.symi-root .message.symi-msg .msg-meta { justify-content: flex-start; }
/* User messages: copy button sits to the left of the timestamp */
.symi-root .message.user-msg .msg-copy-btn { order: -1; }

/* ── Copy button ────────────────────────────────────────────────────── */
.symi-root .msg-copy-btn {
  background: none;
  border: none;
  border-radius: 0;
  color: rgba(247, 246, 243, 0.75);
  cursor: pointer;
  padding: 0;
  opacity: 0;
  transition: opacity 0.2s, color 0.2s;
  display: flex;
  align-items: center;
  line-height: 1;
}
/* Reveal the copy button when hovering the message row */
.symi-root .message:hover .msg-copy-btn,
.symi-root .msg-copy-visible { opacity: 1; }
.symi-root .msg-copy-btn:hover { color: var(--text); }
.symi-root .msg-copy-btn.copied { color: var(--accent-green); }

/* ── Timestamp ──────────────────────────────────────────────────────── */
.symi-root .msg-timestamp {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: rgba(247, 246, 243, 0.75);
  letter-spacing: var(--tracking-normal);
}


/* ── Task lists ─────────────────────────────────────────────────────── */
.symi-root .msg-text :where(li.task-item) {
  list-style: none;
  margin-left: -1.4em;
  padding-left: 0.2em;
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.symi-root .task-cb {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--glass-border-strong);
  border-radius: 3px;
  background: transparent;
  flex-shrink: 0;
  position: relative;
  top: 2px;
  cursor: default;
}

.symi-root .task-cb:checked {
  background: var(--accent-cyan);
  border-color: var(--accent-cyan);
}

.symi-root .task-cb:checked::after {
  content: '';
  position: absolute;
  top: 1px; left: 3px;
  width: 5px; height: 8px;
  border: 2px solid #000;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.symi-root .task-done > * { opacity: 0.55; }
.symi-root .task-done .task-cb + span,
.symi-root .task-done .task-cb ~ * { text-decoration: line-through; }

/* ── Table overflow wrapper ──────────────────────────────────────────── */
.symi-root .msg-text :where(table) {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}
/* Allow cells to wrap when content isn't too wide */
.symi-root .msg-text :where(th,
.symi-root td) {
  white-space: normal;
  min-width: 80px;
}

/* ── Details / Summary (collapsible sections) ─────────────────────────── */
.symi-root .msg-text :where(details) {
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 0;
  margin: 0.6em 0;
  overflow: hidden;
  background: rgba(255,255,255,0.02);
}

.symi-root .msg-text :where(summary) {
  padding: 8px 14px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: rgba(247, 246, 243, 0.75);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
  transition: background 0.2s;
}
.symi-root .msg-text :where(summary):hover { background: rgba(255,255,255,0.03); }
.symi-root .msg-text :where(summary)::before {
  content: '▸';
  font-size: 9px;
  color: var(--accent-cyan);
  transition: transform 0.2s;
}
.symi-root .msg-text :where(details[open] summary)::before {
  transform: rotate(90deg);
}
.symi-root .msg-text :where(details) > *:not(summary) {
  padding: 0 14px 10px;
}

/* ── Spacing improvements ────────────────────────────────────────────── */
.symi-root .bubble-content + .bubble-content { margin-top: 0.5em; }

.symi-root .msg-text :where(h1 + p,
.symi-root h2 + p,
.symi-root h3 + p) { margin-top: 0.4em; }
.symi-root .msg-text :where(p:last-child,
.symi-root ul:last-child,
.symi-root ol:last-child) { margin-bottom: 0; }

/* Separator after heading when followed by block content */
.symi-root .msg-text :where(h2,
.symi-root h3) {
  padding-top: 0.3em;
}

/* Better nested list indent */
.symi-root .msg-text :where(ul ul,
.symi-root ol ol,
.symi-root ul ol,
.symi-root ol ul) {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
  padding-left: 1.2em;
}

/* ── Keyboard shortcut styling ───────────────────────────────────────── */
.symi-root .msg-text :where(kbd) {
  font-family: var(--font-mono);
  font-size: 0.8em;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-bottom: 2px solid rgba(255,255,255,0.15);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--text);
}

/* ── Abbr tooltip ────────────────────────────────────────────────────── */
.symi-root .msg-text :where(abbr[title]) {
  border-bottom: 1px dotted var(--text-muted);
  cursor: help;
  text-decoration: none;
}

/* ── Scrollbar — matches 4minds platform (4px lane, ink thumb) ── */
/* Standard props gated behind @supports so Chrome uses the ::-webkit width
   (unconditional scrollbar-width:thin would make Chrome ignore the 4px).
   Thumb is always visible (matches 4minds), not hover-reveal. */
@supports not selector(::-webkit-scrollbar) {
  .symi-root .response-area { scrollbar-width: thin; scrollbar-color: rgba(247,246,243,0.16) transparent; }
}
.symi-root .response-area::-webkit-scrollbar { width: 4px; height: 4px; }
.symi-root .response-area::-webkit-scrollbar-track { background: transparent; }
.symi-root .response-area::-webkit-scrollbar-thumb { background: rgba(247,246,243,0.16); border-radius: 2px; }
.symi-root .response-area::-webkit-scrollbar-thumb:hover { background: rgba(247,246,243,0.1); }
.symi-root .response-area::-webkit-scrollbar-thumb:active { background: rgba(247,246,243,0.08); }

/* ══════════════════════════════════════════════════════════════════════
   COMMAND MENU SYSTEM
   ══════════════════════════════════════════════════════════════════════ */

/* ── Group accent colours ─────────────────────────────────────────── */
.symi-root {
  --cmd-chat:      #55F7FF;
  --cmd-control:   #60a5fa;
  --cmd-agent:     #543fed;
  --cmd-settings:  #f59e0b;
  --cmd-resources: #34d399;
}

/* ── Menu Trigger Button ──────────────────────────────────────────── */
.symi-root .menu-trigger {
  /* Pinned to the right edge of the SYMI brand panel (flex row). */
  margin-left: auto;
  flex-shrink: 0;
  z-index: 50;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(247, 246, 243, 0.08);
  border: 1px solid rgba(247, 246, 243, 0.4);
  border-radius: 8px;
  color: rgba(247, 246, 243, 0.92);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.symi-root .menu-trigger:hover {
  color: var(--accent-cyan);
  border-color: rgba(85,247,255,0.35);
}
.symi-root .menu-trigger:active { transform: scale(0.93); }
.symi-root .menu-trigger:focus,
.symi-root .menu-trigger:focus-visible { outline: none; }

/* Icon swap: grid → close */
.symi-root .menu-icon-close { display: none; }
.symi-root .menu-trigger.menu-open .menu-icon-grid { display: none; }
.symi-root .menu-trigger.menu-open .menu-icon-close { display: block; color: var(--accent-cyan); }
.symi-root .menu-trigger.menu-open {
  color: var(--accent-cyan);
  border-color: rgba(85,247,255,0.4);
  box-shadow: 0 0 16px rgba(85,247,255,0.2);
}

/* ── Full-Screen Overlay ──────────────────────────────────────────── */
.symi-root .cmd-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 16px;
  overflow-y: auto;
  /* Hidden state */
  opacity: 0;
  pointer-events: none;
  transform: scale(0.97);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.symi-root .cmd-overlay.open {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

/* Backdrop — transparent so the app background shows through.
   The command center replaces the columns (hidden via .symi-root.cmd-open)
   rather than floating over a blurred veil. */
.symi-root .cmd-backdrop {
  position: absolute;
  inset: 0;
  background: transparent;
}

/* View-replacement: when the command center is open, hide the three in-flow
   columns so the center content stands alone over the app background. */
.symi-root.cmd-open .metrics-left,
.symi-root.cmd-open .center-col,
.symi-root.cmd-open .metrics-right,
.symi-root.cmd-open .metrics-col.symframe,
.symi-root.page-open .metrics-left,
.symi-root.page-open .center-col,
.symi-root.page-open .metrics-right,
.symi-root.page-open .metrics-col.symframe {
  display: none;
}

/* Shell (content on top of backdrop) */
.symi-root .cmd-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1080px;
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── Header Bar ───────────────────────────────────────────────────── */
.symi-root .cmd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--glass-border);
}
.symi-root .cmd-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.symi-root .cmd-brand-glyph {
  font-size: 18px;
  color: var(--accent-cyan);
  text-shadow: 0 0 12px var(--accent-cyan);
  animation: aso-breathe 3s ease-in-out infinite;
}
.symi-root .cmd-brand-name {
  font-family: var(--font-title);
  font-size: 18px;
  /* !important to beat the global .symi-root * font-weight:300 override */
  font-weight: 500 !important;
  letter-spacing: 0.22em;
  background: linear-gradient(90deg, #55F7FF 0%, #B097FF 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: brand-shimmer 6s linear infinite;
  line-height: 1;
}
.symi-root .cmd-brand-sep {
  font-size: 16px;
  color: rgba(247, 246, 243, 0.75);
  margin: 0 2px;
}
.symi-root .cmd-brand-sub {
  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--accent-cyan);
}
.symi-root .cmd-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  color: rgba(247, 246, 243, 0.75);
  cursor: pointer;
  transition: color 0.15s ease;
}
.symi-root .cmd-close-btn:hover {
  color: var(--text);
}
/* Extra breathing room between the hoisted controls / Pop-out and the X. */
.symi-root .page-overlay-actions .cmd-close-btn {
  margin-left: 8px;
}

/* ── Command Grid ─────────────────────────────────────────────────── */
.symi-root .cmd-grid {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto auto;
  gap: 14px;
  width: 100%;
}

.symi-root .cmd-group--chat { grid-column: 1; grid-row: 1 / 3; }
.symi-root .cmd-group--control { grid-column: 2; grid-row: 1; }
.symi-root .cmd-group--agent { grid-column: 3; grid-row: 1; }
.symi-root .cmd-group--settings { grid-column: 2; grid-row: 2; }
.symi-root .cmd-group--resources { grid-column: 3; grid-row: 2; }

/* ── Mobile off-canvas sidebars (≤768px) ────────────────────────────
   The left (metrics-left) and right (symframe) columns leave the flex flow
   and become edge drawers, toggled by the hamburger + shield in the React
   header via window.symiMobileNav (see menu.js initMobileNav). The center
   column takes the full width; a shared backdrop dims the content. */
.symi-root .symi-mobile-backdrop {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 90;
}
@media (max-width: 768px) {
  .symi-root .metrics-left,
  .symi-root .metrics-right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: min(88vw, 360px);
    flex-basis: auto;
    z-index: 100;
    padding-top: 16px;
    padding-bottom: 16px;
    /* Opaque equivalent of the main app background: same layered gradient
       wash flattened over the solid #0A0F0A floor so the drawer reads as a
       solid version of .symi-root's canvas (no content shows through). */
    background-color: var(--bg);
    background-image:
      linear-gradient(to right, rgba(0, 144, 255, 0.035) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(0, 144, 255, 0.035) 1px, transparent 1px),
      linear-gradient(to bottom left, rgba(13,13,21,0.04) 0%, rgba(39,10,144,0.04) 50%, rgba(143,99,224,0.04) 100%),
      linear-gradient(to bottom, rgba(21,0,48,0.12) 0%, rgba(30,1,176,0.12) 50%, rgba(112,169,255,0.12) 100%);
    background-size: 24px 24px, 24px 24px, 100% 100%, 100% 100%;
    background-repeat: repeat, repeat, no-repeat, no-repeat;
    box-shadow: 0 0 40px rgba(0,0,0,0.5);
    transition: transform 0.24s ease;
  }
  .symi-root .metrics-left {
    left: 0;
    padding-left: 16px;
    padding-right: 12px;
    transform: translateX(-102%);
  }
  .symi-root .metrics-right {
    right: 0;
    padding-left: 12px;
    padding-right: 16px;
    transform: translateX(102%);
  }
  .symi-root .metrics-left.mobile-open,
  .symi-root .metrics-right.mobile-open {
    transform: translateX(0);
  }
  /* Kill the rail affordance on mobile — drawers are header-triggered. */
  .symi-root .metrics-col.collapsed {
    flex-basis: auto;
    width: min(88vw, 360px);
    overflow-y: auto;
  }
  .symi-root .metrics-col.collapsed > * { display: revert; }
  .symi-root .metrics-col.collapsed::after { display: none; }
  .symi-root .symi-mobile-backdrop.visible { display: block; }

  /* 16px side padding for the chat log + composer (they're absolutely
     positioned within .center-col, so inset the edges directly). */
  .symi-root .response-area {
    left: 16px;
    right: 16px;
    padding-left: 0;
    padding-right: 0;
  }
  .symi-root .prompt-wrap {
    left: 16px;
    right: 16px;
  }
}

/* ── Responsive: collapse the fixed 3-column grid as width shrinks ──── */
/* Tablet: two flexible columns, CHAT spans the top so it stays prominent. */
@media (max-width: 900px) {
  .symi-root .cmd-shell {
    padding: 0 24px;
  }
  .symi-root .cmd-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .symi-root .cmd-group--chat { grid-column: 1 / 3; grid-row: auto; }
  .symi-root .cmd-group--control { grid-column: auto; grid-row: auto; }
  .symi-root .cmd-group--agent { grid-column: auto; grid-row: auto; }
  .symi-root .cmd-group--settings { grid-column: auto; grid-row: auto; }
  .symi-root .cmd-group--resources { grid-column: auto; grid-row: auto; }
}

/* Phone: single column stack; the CONTROL sub-grid drops to 2 columns. */
@media (max-width: 560px) {
  .symi-root .cmd-shell {
    padding: 0 16px;
    gap: 16px;
  }
  .symi-root .cmd-grid {
    grid-template-columns: 1fr;
  }
  .symi-root .cmd-group--chat { grid-column: 1; }
  .symi-root .cmd-items--grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Keep the shared page-overlay header padding (and its inset divider) in step
   with the command center shell as the viewport narrows. */
@media (max-width: 900px) {
  .symi-root .page-overlay-header {
    padding-left: 24px;
    padding-right: 24px;
  }
  .symi-root .page-overlay-header::after {
    left: 24px;
    right: 24px;
  }
}
@media (max-width: 560px) {
  .symi-root .page-overlay-header {
    padding-left: 16px;
    padding-right: 16px;
  }
  .symi-root .page-overlay-header::after {
    left: 16px;
    right: 16px;
  }
}

/* ── Group Card ───────────────────────────────────────────────────── */
.symi-root .cmd-group {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* Stagger-reveal when overlay opens */
  opacity: 0;
  transform: translateY(14px);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.symi-root .cmd-overlay.open .cmd-group {
  animation: cmd-card-in 0.32s ease forwards;
}
.symi-root .cmd-overlay.open .cmd-group:nth-child(1) { animation-delay:  30ms; }
.symi-root .cmd-overlay.open .cmd-group:nth-child(2) { animation-delay:  80ms; }
.symi-root .cmd-overlay.open .cmd-group:nth-child(3) { animation-delay: 130ms; }
.symi-root .cmd-overlay.open .cmd-group:nth-child(4) { animation-delay: 180ms; }
.symi-root .cmd-overlay.open .cmd-group:nth-child(5) { animation-delay: 230ms; }

@keyframes cmd-card-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Per-group accent borders & hover glow */
.symi-root .cmd-group--chat:hover { border-color: rgba(85,247,255,0.35);   box-shadow: 0 0 20px rgba(85,247,255,0.06); }
.symi-root .cmd-group--control:hover { border-color: rgba(96,165,250,0.35);  box-shadow: 0 0 20px rgba(96,165,250,0.06); }
.symi-root .cmd-group--agent:hover { border-color: rgba(84,63,237,0.35); box-shadow: 0 0 20px rgba(84,63,237,0.06); }
.symi-root .cmd-group--settings:hover { border-color: rgba(245,158,11,0.35);  box-shadow: 0 0 20px rgba(245,158,11,0.06); }
.symi-root .cmd-group--resources:hover { border-color: rgba(52,211,153,0.35);  box-shadow: 0 0 20px rgba(52,211,153,0.06); }

/* ── Group Header ─────────────────────────────────────────────────── */
.symi-root .cmd-group-hd {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--glass-border);
}
.symi-root .cmd-group-svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.symi-root .cmd-group-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
}

/* Accent colours on group labels and icons */
.symi-root .cmd-group--chat      .cmd-group-hd { color: var(--cmd-chat); }
.symi-root .cmd-group--control   .cmd-group-hd { color: var(--cmd-control); }
.symi-root .cmd-group--agent     .cmd-group-hd { color: var(--cmd-agent); }
.symi-root .cmd-group--settings  .cmd-group-hd { color: var(--cmd-settings); }
.symi-root .cmd-group--resources .cmd-group-hd { color: var(--cmd-resources); }

/* ── Items List ───────────────────────────────────────────────────── */
.symi-root .cmd-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

/* 3-column sub-grid for CONTROL (6 items) */
.symi-root .cmd-items--grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

/* ── Individual Item ──────────────────────────────────────────────── */
.symi-root .cmd-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(85, 247, 255, 0.25);
  background: rgba(247, 246, 243, 0.04);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, transform 0.15s;
}
.symi-root .cmd-item:hover {
  background: rgba(255,255,255,0.06);
  transform: translateY(-1px);
}
/* Per-group item hover accent */
.symi-root .cmd-group--chat      .cmd-item:hover { border-color: rgba(85,247,255,0.3);   }
.symi-root .cmd-group--control   .cmd-item:hover { border-color: rgba(96,165,250,0.3);  }
.symi-root .cmd-group--agent     .cmd-item:hover { border-color: rgba(84,63,237,0.3); }
.symi-root .cmd-group--settings  .cmd-item:hover { border-color: rgba(245,158,11,0.3);  }
.symi-root .cmd-group--resources .cmd-item:hover { border-color: rgba(52,211,153,0.3);  }

.symi-root .cmd-item--disabled {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}
.symi-root .cmd-item--disabled .cmd-item-desc {
  font-style: italic;
  color: rgba(247, 246, 243, 0.3);
}

.symi-root .cmd-item-icon {
  font-size: 16px;
  flex-shrink: 0;
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
}
.symi-root .cmd-group--chat      .cmd-item-icon { color: var(--cmd-chat); }
.symi-root .cmd-group--control   .cmd-item-icon { color: var(--cmd-control); }
.symi-root .cmd-group--agent     .cmd-item-icon { color: var(--cmd-agent); }
.symi-root .cmd-group--settings  .cmd-item-icon { color: var(--cmd-settings); }
.symi-root .cmd-group--resources .cmd-item-icon { color: var(--cmd-resources); }

.symi-root .cmd-item-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.symi-root .cmd-item-name {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.symi-root .cmd-item-desc {
  font-size: 10px;
  color: rgba(247, 246, 243, 0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.symi-root .cmd-item-badge {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  padding: 2px 6px;
  border-radius: 99px;
  background: rgba(85,247,255,0.12);
  color: var(--accent-cyan);
  border: 1px solid rgba(85,247,255,0.25);
  flex-shrink: 0;
}

/* ── History button ─────────────────────────────────────────────────── */
.symi-root .history-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  height: 34px;
  /* Neutral action button — offwhite (#F7F6F3) at 8% fill, 40% border */
  background: rgba(247, 246, 243, 0.08);
  border: 1px solid rgba(247, 246, 243, 0.4);
  border-radius: 8px;
  color: var(--text);
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-caps);
  font-weight: 300;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.symi-root .history-btn:hover {
  border-color: rgba(85, 247, 255, 0.4);
}
.symi-root .history-btn-label {
  font-size: 12px;
}

/* ── History overlay + drawer ───────────────────────────────────────── */
/* Same Safari compositor fix as .page-overlay — use display:none when
   closed so the full-screen overlay doesn't block wheel events. */
.symi-root .history-overlay {
  /* fixed (not absolute) so that in the platform — where .container has a
     transform — the containing block becomes .container (the full panel incl.
     header) and this escapes .content's overflow:clip. Standalone has no
     transformed ancestor, so fixed resolves to the viewport = same as before. */
  position: fixed; inset: 0; z-index: 1100;
  display: none;
  background: transparent;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.symi-root .history-overlay.open { display: block; opacity: 1; pointer-events: auto; }

.symi-root .history-drawer {
  /* fixed so it overlays the panel header too (see .history-overlay note). */
  position: fixed; top: 0; right: -440px; height: 100%; width: 420px;
  z-index: 1101;
  background: var(--sidebar-bg-color);
  background-image: var(--sidebar-bg-image);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  display: flex; flex-direction: column;
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.symi-root .history-drawer.open { right: 0; }

.symi-root .history-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 18px 6px;
  flex-shrink: 0;
}
.symi-root .history-drawer-title {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: var(--tracking-caps); color: rgba(85,247,255,0.9);
}
.symi-root .history-close-btn {
  background: none; border: none; color: rgba(247,246,243,0.75);
  font-size: 16px; cursor: pointer; padding: 0; line-height: 1;
  transition: color 0.15s;
}
.symi-root .history-close-btn:hover { color: rgba(247,246,243,1); }

.symi-root .history-drawer-body {
  flex: 1; overflow-y: auto; padding: 12px 0;
}
.symi-root .history-drawer-body::-webkit-scrollbar { width: 4px; height: 4px; }
.symi-root .history-drawer-body::-webkit-scrollbar-track { background: transparent; }
.symi-root .history-drawer-body::-webkit-scrollbar-thumb { background: rgba(247,246,243,0.16); border-radius: 2px; }
.symi-root .history-drawer-body::-webkit-scrollbar-thumb:hover { background: rgba(247,246,243,0.1); }

.symi-root .history-loading {
  padding: 24px 18px;
  color: rgba(247, 246, 243, 0.75);
  font-size: 12px; font-family: var(--font-mono);
  text-align: center;
}

/* ── Session list items ─────────────────────────────────────────────── */
.symi-root .history-session-item {
  padding: 12px 18px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.15s;
  position: relative;
}
.symi-root .history-session-item:hover { background: rgba(85,247,255,0.07); }
.symi-root .history-session-item:last-child { border-bottom: none; }

.symi-root .history-session-meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 5px;
}
.symi-root .history-session-date {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  color: rgba(85,247,255,0.8); letter-spacing: var(--tracking-caps);
}
.symi-root .history-session-count {
  font-family: var(--font-mono); font-size: 9px;
  color: rgba(247, 246, 243, 0.75); letter-spacing: var(--tracking-normal);
}
.symi-root .history-session-preview {
  font-size: 12px; color: rgba(247, 246, 243, 0.75);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.4;
}
.symi-root .history-session-badge {
  display: inline-block; margin-bottom: 4px;
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: var(--tracking-caps); padding: 2px 6px; border-radius: 99px;
}
.symi-root .history-session-badge.live {
  background: rgba(85,247,255,0.12); color: var(--accent-cyan);
  border: 1px solid rgba(85,247,255,0.25);
  border-radius: 6px;
}
.symi-root .history-session-badge.archived {
  background: rgba(247, 246, 243, 0.04);
  border: 1px solid rgba(247, 246, 243, 0.25);
  border-radius: 6px;
  color: rgba(247, 246, 243, 0.75);
}

/* ── Favourite star button ───────────────────────────────────────────── */
.symi-root .history-fav-btn {
  background: transparent;
  border: none;
  padding: 0 4px 2px 0;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  color: rgba(247,246,243,0.75);
  transition: color 0.15s;
  flex-shrink: 0;
}
.symi-root .history-fav-btn:hover { color: rgba(255,215,0,0.6); }
.symi-root .history-fav-btn.active { color: rgba(255,215,0,0.95); }

/* ── Section headings (FAVOURITES / RECENT) ─────────────────────────── */
.symi-root .history-section-heading {
  padding: 6px 18px 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  color: rgba(247, 246, 243, 0.75);
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  border-top: 1px solid rgba(255,255,255,0.04);
}

/* ── Load session button ──────────────────────────────────────────────── */
.symi-root .history-session-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  align-items: center;
  justify-content: flex-end;
}
.symi-root .history-load-btn {
  padding: 5px 14px;
  height: 28px;
  flex: 1;
  background: rgba(85, 247, 255, 0.08);
  border: 1px solid rgba(85, 247, 255, 0.2);
  border-radius: 6px;
  color: rgba(85, 247, 255, 1);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  cursor: pointer;
  transition: all 0.15s;
}
.symi-root .history-load-btn:hover {
  background: rgba(85, 247, 255, 0.15);
  border-color: rgba(85, 247, 255, 0.4);
  color: rgba(85, 247, 255, 1);
}
.symi-root .history-delete-btn {
  padding: 5px 10px;
  height: 28px;
  flex-shrink: 0;
  background: rgba(255, 80, 80, 0.06);
  border: 1px solid rgba(255, 80, 80, 0.2);
  border-radius: 6px;
  color: rgba(255, 100, 100, 1);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  cursor: pointer;
  transition: all 0.15s;
}
.symi-root .history-delete-btn:hover {
  background: rgba(255, 80, 80, 0.13);
  border-color: rgba(255, 80, 80, 0.4);
  color: rgba(255, 100, 100, 1);
}
.symi-root .history-delete-btn.armed {
  background: rgba(255, 80, 80, 0.18);
  border-color: rgba(255, 80, 80, 0.6);
  color: rgba(255, 120, 120, 1);
}
.symi-root .history-delete-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Archive viewer banner ──────────────────────────────────────────── */
.symi-root .archive-banner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; margin: 0 0 8px;
  background: rgba(85,247,255,0.1);
  border-bottom: 1px solid rgba(85,247,255,0.2);
  flex-shrink: 0;
}
.symi-root .archive-banner-label {
  order: 1;
  font-family: var(--font-mono); font-size: 10px;
  color: rgba(85,247,255,0.8); letter-spacing: var(--tracking-caps);
}
.symi-root .archive-banner-back {
  order: 0;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  color: rgba(85,247,255,0.9); cursor: pointer;
  background: none; border: none; padding: 3px 8px;
  border: 1px solid rgba(160,160,160,0.3); border-radius: 6px;
  transition: all 0.15s;
}
.symi-root .archive-banner-back:hover { background: rgba(85,247,255,0.15); }

.symi-root .history-transcript {
  flex: 1; overflow-y: auto; padding: 8px 12px;
}
.symi-root .history-transcript::-webkit-scrollbar { width: 4px; height: 4px; }
.symi-root .history-transcript::-webkit-scrollbar-track { background: transparent; }
.symi-root .history-transcript::-webkit-scrollbar-thumb { background: rgba(247,246,243,0.16); border-radius: 2px; }
.symi-root .history-transcript::-webkit-scrollbar-thumb:hover { background: rgba(247,246,243,0.1); }

.symi-root .history-msg {
  margin-bottom: 12px; font-size: 12.5px; line-height: 1.5;
}
.symi-root .history-msg-role {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: var(--tracking-caps); margin-bottom: 3px;
}
.symi-root .history-msg-role.user { color: var(--accent-cyan); }
.symi-root .history-msg-role.assistant { color: rgba(247,246,243,0.6); }
.symi-root .history-msg-text {
  color: rgba(247, 246, 243, 0.75); padding: 6px 10px;
  background: rgba(255,255,255,0.025);
  border-radius: 6px; border-left: 2px solid rgba(255,255,255,0.08);
  white-space: pre-wrap; word-break: break-word;
}
.symi-root .history-msg.assistant .history-msg-text {
  border-left-color: rgba(160,160,160,0.3);
}
.symi-root .history-msg.user .history-msg-text {
  border-left-color: rgba(85,247,255,0.25);
}

.symi-root .history-empty {
  padding: 32px 18px; text-align: center;
  color: rgba(247, 246, 243, 0.75); font-size: 12px; font-family: var(--font-mono);
}

/* ── Archive toast ──────────────────────────────────────────────────────
   Top-center status pill shown after /new. Anchors to the glass root, the
   same containing block as .response-area (top:2px). The "NEW SESSION
   STARTED" empty-state sits at the top of the response area (60px pad + ~34px
   icon + 10px gap + 12px text), so its text bottom lands ~121px down; top:184px
   drops the pill clearly below it. It drops in from a slightly-raised start.
   Glass treatment (blur + veil) to match the panels; cyan accent on the icon
   + the "View history" link. */
.symi-root .session-archive-toast {
  position: absolute;
  top: 184px; left: 50%;
  transform: translateX(-50%) translateY(-12px);
  z-index: 1200;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 15px;
  background: rgba(10, 15, 24, 0.82);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(85, 247, 255, 0.3);
  border-radius: 99px;
  font-size: 11.5px; font-family: var(--font-mono); letter-spacing: var(--tracking-normal);
  color: rgba(247, 246, 243, 0.75);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.45),
    0 0 16px rgba(85, 247, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  white-space: nowrap;
}
.symi-root .session-archive-toast svg {
  color: var(--accent-cyan);
  flex-shrink: 0;
}
.symi-root .session-archive-toast.show {
  opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.symi-root #session-archive-link {
  color: var(--accent-cyan); cursor: pointer; font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(85, 247, 255, 0.35);
  padding-bottom: 1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.symi-root #session-archive-link:hover {
  color: rgba(85, 247, 255, 1);
  border-bottom-color: rgba(85, 247, 255, 0.85);
}

/* ── Queue button ───────────────────────────────────────────────────── */
.symi-root .queue-btn {
  display: none; /* hidden until streaming starts */
  align-items: center;
  gap: 5px;
  padding: 0 11px;
  height: 34px;
  background: rgba(85, 247, 255, 0.08);
  border: 1px solid rgba(85, 247, 255, 0.2);
  border-radius: 8px;
  color: rgba(85, 247, 255, 0.8);
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-caps);
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
  white-space: nowrap;
}
.symi-root .queue-btn.visible { display: flex; }
.symi-root .queue-btn:hover {
  background: rgba(85, 247, 255, 0.15);
  border-color: rgba(85, 247, 255, 0.4);
  box-shadow: 0 0 12px rgba(85, 247, 255, 0.12);
}

/* Active state — item is queued */
.symi-root .queue-btn.has-queue {
  background: rgba(85, 247, 255, 0.14);
  border-color: rgba(85, 247, 255, 0.45);
  color: #55f7ff;
  box-shadow: 0 0 14px rgba(85, 247, 255, 0.1);
}

.symi-root .queue-cancel-x {
  display: none;
  margin-left: 2px;
  font-size: 10px;
  opacity: 0.6;
  line-height: 1;
  padding: 1px 3px;
  border-radius: 3px;
  transition: opacity 0.15s, background 0.15s;
}
.symi-root .queue-btn.has-queue .queue-cancel-x { display: inline; }
.symi-root .queue-cancel-x:hover { opacity: 1; background: rgba(255,255,255,0.1); }

/* ── Stop button ────────────────────────────────────────────────────── */
.symi-root .stop-btn {
  display: none; /* hidden until streaming starts */
  align-items: center;
  gap: 5px;
  padding: 0 11px;
  height: 34px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.22);
  border-radius: 8px;
  color: rgba(239, 68, 68, 0.85);
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-caps);
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
  white-space: nowrap;
}
.symi-root .stop-btn.visible { display: flex; }
.symi-root .stop-btn:hover {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.5);
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.14);
  color: rgba(239, 68, 68, 1);
}
.symi-root .stop-btn-label {
  font-size: 12px;
}

/* ── Page Navigation Overlay ────────────────────────────────────────── */
/* When closed, use `display: none` instead of just `opacity: 0` so that
   Safari's compositor removes this element from the scrolling tree.
   Without this, the `inset: 0; z-index: 1050` overlay sits above the
   `z-index: 5` response-area in the compositor's scroll chain and
   swallows wheel events — even though it has `pointer-events: none`.
   Chrome tolerates this; Safari does not. */
.symi-root .page-overlay {
  position: absolute;
  inset: 0;
  z-index: 1050;
  display: none;
  flex-direction: column;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.symi-root .page-overlay.open {
  display: flex;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.symi-root .page-overlay-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px 32px;
  background: transparent;
  flex-shrink: 0;
}
/* Divider matches the command center's — inset 32px on each side so it
   spans the shell content width, not the full padded box. */
.symi-root .page-overlay-header::after {
  content: "";
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 0;
  border-bottom: 1px solid var(--glass-border);
}

.symi-root .page-overlay-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Controls lifted out of a panel's toolbar (count + refresh/edit/etc.) and
   placed to the left of the Pop-out / X buttons in the shared header. */
.symi-root .page-overlay-hoisted {
  display: flex;
  align-items: center;
  gap: 10px;
}

.symi-root .page-overlay-title {
  /* Styling comes from the shared .cmd-brand-sub class; this element also
     carries #page-overlay-title so the router can set its text. */
  text-transform: uppercase;
}

.symi-root .page-popout-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 11px; height: 28px;
  background: rgba(85,247,255,0.06);
  border: 1px solid rgba(85,247,255,0.15);
  border-radius: 8px;
  color: rgba(85,247,255,0.6);
  font-size: 10px; font-family: var(--font-mono); letter-spacing: var(--tracking-caps);
  cursor: pointer; text-decoration: none; flex-shrink: 0;
  transition: all 0.15s;
}
.symi-root .page-popout-btn:hover {
  background: rgba(85,247,255,0.12);
  border-color: rgba(85,247,255,0.35);
  color: rgba(85,247,255,0.9);
}

.symi-root .page-overlay-frame {
  flex: 1;
  border: none;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 32px;
  background: transparent;
}

/* ══════════════════════════════════════════════════════════════════════════
   NATIVE SETTINGS PANELS (Config, Debug, Logs)
   ══════════════════════════════════════════════════════════════════════════ */

.symi-root #native-settings-container,
.symi-root #native-logs-container {
  display: none;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 32px 24px;
}

.symi-root .settings-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

/* ── Toolbar ────────────────────────────────────────────────────────── */
.symi-root .settings-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(85, 247, 255, 0.25);
  background: transparent;
  flex-shrink: 0;
  min-height: 44px;
}

.symi-root .settings-toolbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.symi-root .settings-toolbar-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  color: rgba(247, 246, 243, 0.75);
}

.symi-root .settings-toolbar-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(84, 63, 237, 0.6);
  letter-spacing: var(--tracking-normal);
}

.symi-root .settings-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Buttons ────────────────────────────────────────────────────────── */
.symi-root .settings-btn {
  padding: 4px 12px;
  height: 28px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: rgba(247, 246, 243, 0.6);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-normal);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.symi-root .settings-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(247, 246, 243, 0.9);
}
.symi-root .settings-btn--primary {
  background: var(--accent-secondary);
  border-color: var(--accent-secondary);
  color: var(--text);
  font-weight: 600;
}
.symi-root .settings-btn--primary:hover {
  background: #6650f5;
  border-color: #6650f5;
  color: var(--text);
}
.symi-root .settings-btn--active {
  background: #6650f5;
  border-color: #6650f5;
  color: var(--text);
}
.symi-root .settings-btn--danger {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.25);
  color: rgba(239, 68, 68, 0.9);
}
.symi-root .settings-btn--danger:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.45);
}
/* Refresh buttons in the command center toolbars. */
.symi-root #config-refresh-btn,
.symi-root #generic-refresh-btn {
  background: rgba(247, 246, 243, 0.04);
  border: 1px solid rgba(247, 246, 243, 0.25);
  color: rgba(247, 246, 243, 0.75);
}
.symi-root #config-refresh-btn:hover,
.symi-root #generic-refresh-btn:hover {
  background: rgba(247, 246, 243, 0.08);
  border-color: rgba(247, 246, 243, 0.4);
  color: rgba(247, 246, 243, 0.9);
}

/* ── Search / filter input ──────────────────────────────────────────── */
.symi-root .settings-search {
  padding: 4px 10px;
  height: 28px;
  width: 140px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 10px;
  outline: none;
  transition: border-color 0.15s;
}
.symi-root .settings-search:focus {
  border-color: rgba(84, 63, 237, 0.4);
}
.symi-root .settings-search::placeholder {
  color: rgba(247, 246, 243, 0.25);
}

/* ── Checkbox label ─────────────────────────────────────────────────── */
.symi-root .settings-checkbox-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(247, 246, 243, 0.75);
  cursor: pointer;
  white-space: nowrap;
}
.symi-root .settings-checkbox-label input[type="checkbox"] {
  accent-color: var(--accent-purple);
  width: 12px;
  height: 12px;
}

/* ── Content area ───────────────────────────────────────────────────── */
.symi-root .settings-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px 0;
}
.symi-root .settings-content::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
.symi-root .settings-content::-webkit-scrollbar-track {
  background: transparent;
}
.symi-root .settings-content::-webkit-scrollbar-thumb {
  background: rgba(247, 246, 243, 0.16);
  border-radius: 2px;
}
.symi-root .settings-content::-webkit-scrollbar-thumb:hover {
  background: rgba(247, 246, 243, 0.1);
}

/* ── State messages ─────────────────────────────────────────────────── */
.symi-root .settings-loading,
.symi-root .settings-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(247, 246, 243, 0.75);
  letter-spacing: var(--tracking-normal);
}

/* ══════════════════════════════════════════════════════════════════════
   DATA CARDS — generic renderer (channels, sessions, cron, usage, agents)
   ══════════════════════════════════════════════════════════════════════ */

.symi-root .data-card {
  background: rgba(247, 246, 243, 0.04);
  border: 1px solid rgba(85, 247, 255, 0.25);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.symi-root .data-card:last-child {
  margin-bottom: 0;
}

.symi-root .data-card-header {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  color: rgba(247, 246, 243, 0.75);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.symi-root .data-card-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.symi-root .data-card-row:last-child {
  border-bottom: none;
}

.symi-root .data-card-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(247, 246, 243, 0.75);
  min-width: 72px;
  flex-shrink: 0;
}

.symi-root .data-card-value {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(247, 246, 243, 0.75);
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

.symi-root .data-card-row--expandable .data-card-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.symi-root .data-card-row--expandable {
  cursor: pointer;
  user-select: none;
}
.symi-root .data-card-row--expandable:hover {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px;
}
.symi-root .data-card-row--expandable[data-expanded="true"] {
  align-items: flex-start;
}
.symi-root .data-card-row--expandable[data-expanded="true"] .data-card-value {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: break-word;
}
.symi-root .data-card-expand-icon {
  flex-shrink: 0;
  font-size: 13px;
  color: rgba(247, 246, 243, 0.55);
  transition: transform 0.2s ease, color 0.15s ease;
  margin-left: 6px;
}
.symi-root .data-card-row--expandable:hover .data-card-expand-icon {
  color: rgba(247, 246, 243, 0.85);
}
.symi-root .data-card-row--expandable[data-expanded="true"] .data-card-expand-icon {
  transform: rotate(180deg);
  color: rgba(247, 246, 243, 0.85);
}

.symi-root .data-card-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: var(--tracking-normal);
  padding: 2px 7px;
  border-radius: 4px;
  color: rgba(247, 246, 243, 0.9);
  white-space: nowrap;
  flex-shrink: 0;
}

.symi-root .data-card-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 3px 0;
}

/* ── Session filename in data-card-header ────────────────────────── */
.symi-root .session-filename {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  color: rgba(247, 246, 243, 0.75);
  font-weight: 400;
  letter-spacing: var(--tracking-normal);
}

/* ── Skills panel — summary bar, skill name, footer ─────────────── */
.symi-root .skills-summary {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(247, 246, 243, 0.75);
  letter-spacing: var(--tracking-caps);
  margin-bottom: 10px;
  padding: 0 2px;
}
.symi-root .skill-icon {
  flex-shrink: 0;
  color: var(--accent-cyan);
}
.symi-root .skill-name,
.symi-root .agent-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: rgba(247, 246, 243, 0.75);
  font-weight: 500;
  margin-right: 6px;
}
.symi-root .skills-meta {
  font-family: var(--font-mono);
  font-size: 9px;
  color: rgba(247, 246, 243, 0.75);
  letter-spacing: var(--tracking-normal);
  margin-top: 12px;
  padding: 0 2px;
  word-break: break-all;
}

/* ── Metric detail sub-line (GB / total shown below the bar row) ─── */
.symi-root .metric-detail {
  font-family: var(--font-mono);
  font-size: 9px;
  color: rgba(247, 246, 243, 0.75);
  text-align: right;
  margin-top: -3px;
  margin-bottom: 6px;
  letter-spacing: var(--tracking-normal);
}
.symi-root .metric-detail:last-child {
  margin-bottom: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   CONFIG PANEL — tree view
   ══════════════════════════════════════════════════════════════════════ */

.symi-root .settings-section {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  margin-bottom: 8px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.symi-root .settings-section:hover {
  border-color: rgba(255, 255, 255, 0.1);
}

.symi-root .settings-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.symi-root .settings-section-header:hover {
  background: rgba(255, 255, 255, 0.04);
}

.symi-root .settings-section-arrow {
  font-size: 10px;
  color: rgba(247, 246, 243, 0.3);
  transition: transform 0.15s;
  width: 10px;
  text-align: center;
}
.symi-root .settings-section.collapsed .settings-section-arrow {
  transform: rotate(-90deg);
}

.symi-root .settings-section-key {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-cyan);
  letter-spacing: var(--tracking-normal);
}

.symi-root .settings-section-body {
  padding: 8px 14px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.7;
  overflow-x: auto;
}
.symi-root .settings-section.collapsed .settings-section-body {
  display: none;
}

.symi-root .cfg-key {
  color: rgba(85, 247, 255, 0.8);
}
.symi-root .cfg-colon {
  color: rgba(247, 246, 243, 0.3);
}
.symi-root .cfg-str {
  color: rgba(52, 211, 153, 0.9);
  word-break: break-all;
}
.symi-root .cfg-num {
  color: rgba(244, 114, 182, 0.9);
}
.symi-root .cfg-bool {
  color: rgba(84, 63, 237, 0.9);
}
.symi-root .cfg-null {
  color: rgba(247, 246, 243, 0.3);
  font-style: italic;
}
.symi-root .cfg-bracket {
  color: rgba(247, 246, 243, 0.25);
}
.symi-root .cfg-row {
  padding-left: 1em;
}
.symi-root .cfg-redacted {
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: rgba(239, 68, 68, 0.7);
  letter-spacing: var(--tracking-caps);
  margin-left: 8px;
}

/* ── Config editor ──────────────────────────────────────────────────── */
.symi-root .config-editor-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 12px;
  height: 100%;
}
.symi-root .config-editor {
  flex: 1;
  min-height: 300px;
  padding: 14px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  resize: none;
  outline: none;
  tab-size: 2;
}
.symi-root .config-editor::-webkit-scrollbar { width: 4px; height: 4px; }
.symi-root .config-editor::-webkit-scrollbar-track { background: transparent; }
.symi-root .config-editor::-webkit-scrollbar-thumb { background: rgba(247, 246, 243, 0.16); border-radius: 2px; }
.symi-root .config-editor::-webkit-scrollbar-thumb:hover { background: rgba(247, 246, 243, 0.1); }
.symi-root .config-editor:focus {
  border-color: rgba(84, 63, 237, 0.35);
}
.symi-root .config-editor-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.symi-root .config-editor-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(247, 246, 243, 0.75);
}

/* ══════════════════════════════════════════════════════════════════════════
   CONNECTIONS PANEL
   ══════════════════════════════════════════════════════════════════════════ */

.symi-root .connections-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Accent box (matches .symframe-card). */
  background: rgba(247, 246, 243, 0.04);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(85, 247, 255, 0.25);
  box-shadow: none;
}
.symi-root .connections-panel:hover { border-color: rgba(85, 247, 255, 0.25); box-shadow: none; }
.symi-root .connections-panel::before,
.symi-root .connections-panel::after { display: none; }

.symi-root .conn-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background: rgba(247, 246, 243, 0.04);
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.25s ease;
  text-align: left;
  color: var(--text);
  font-family: inherit;
}
.symi-root .conn-btn:hover {
  /* Accent hover — matches the model routing buttons */
  background: rgba(85,247,255,0.08);
  border-color: rgba(85,247,255,0.4);
}
.symi-root .conn-btn:active {
  transform: translateX(2px) scale(0.99);
}

.symi-root .conn-btn[data-state="connected"] {
  border-color: rgba(52, 211, 153, 0.25);
  background: rgba(52, 211, 153, 0.04);
}
.symi-root .conn-btn[data-state="connected"]:hover {
  border-color: rgba(52, 211, 153, 0.4);
  background: rgba(52, 211, 153, 0.08);
}
.symi-root .conn-btn[data-state="error"] {
  border-color: rgba(248, 113, 113, 0.25);
  background: rgba(248, 113, 113, 0.04);
}
.symi-root .conn-btn[data-state="pending"] {
  border-color: rgba(85, 247, 255, 0.25);
  background: rgba(85, 247, 255, 0.04);
}

.symi-root .conn-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}
.symi-root .conn-icon svg {
  width: 18px;
  height: 18px;
}

.symi-root .conn-icon-slack {
  background: linear-gradient(135deg, rgba(74, 21, 75, 0.3), rgba(54, 197, 171, 0.2));
  border: 1px solid rgba(224, 30, 90, 0.2);
  color: #E01E5A;
}
.symi-root .conn-btn[data-state="connected"] .conn-icon-slack {
  box-shadow: 0 0 12px rgba(224, 30, 90, 0.2);
}

.symi-root .conn-icon-email {
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.2), rgba(84, 63, 237, 0.2));
  border: 1px solid rgba(96, 165, 250, 0.2);
  color: var(--accent-blue);
}
.symi-root .conn-btn[data-state="connected"] .conn-icon-email {
  box-shadow: 0 0 12px rgba(96, 165, 250, 0.2);
}

.symi-root .conn-icon-hubspot {
  background: linear-gradient(135deg, rgba(255, 122, 89, 0.25), rgba(255, 90, 50, 0.15));
  border: 1px solid rgba(255, 122, 89, 0.3);
  color: #FF7A59;
}
.symi-root .conn-btn[data-state="connected"] .conn-icon-hubspot {
  box-shadow: 0 0 12px rgba(255, 122, 89, 0.25);
}

.symi-root .conn-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.symi-root .conn-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: var(--tracking-normal);
}
.symi-root .conn-btn-status {
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 500;
  color: rgba(247, 246, 243, 0.75);
  letter-spacing: var(--tracking-normal);
}
.symi-root .conn-btn[data-state="connected"] .conn-btn-status {
  color: var(--accent-green);
}
.symi-root .conn-btn[data-state="error"] .conn-btn-status {
  color: #f87171;
}
.symi-root .conn-btn[data-state="pending"] .conn-btn-status {
  color: var(--accent);
}

.symi-root .conn-state {
  flex-shrink: 0;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.symi-root .conn-state .conn-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-dim);
  transition: all 0.3s ease;
}
.symi-root .conn-btn[data-state="connected"] .conn-state .conn-dot {
  background: var(--accent-green);
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.5);
  animation: conn-pulse 2s ease-in-out infinite;
}
.symi-root .conn-btn[data-state="error"] .conn-state .conn-dot {
  background: #f87171;
  box-shadow: 0 0 8px rgba(248, 113, 113, 0.4);
}
.symi-root .conn-btn[data-state="pending"] .conn-state .conn-dot {
  background: var(--accent);
  box-shadow: 0 0 8px rgba(85, 247, 255, 0.5);
  animation: conn-blink 1s ease-in-out infinite;
}

@keyframes conn-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(0.9); }
}
@keyframes conn-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.symi-root .conn-notif {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: linear-gradient(135deg, #f43f5e, #ec4899);
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
  color: white;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(244, 63, 94, 0.4);
  animation: notif-bounce 0.4s ease;
}
.symi-root .conn-notif:not(:empty) {
  display: flex;
}
@keyframes notif-bounce {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* ── Connection Drawer (right sidebar, mirrors .history-drawer) ──────── */
/* Same Safari compositor fix as .history-overlay — use display:none when
   closed so the full-screen overlay doesn't block wheel events. */
.symi-root .conn-modal-overlay {
  /* fixed (not absolute) so — like .history-overlay — it escapes the platform
     .content overflow:clip and covers the panel header too. */
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.symi-root .conn-modal-overlay.open {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

.symi-root .conn-modal {
  /* fixed so it overlays the panel header too (mirrors .history-drawer). */
  position: fixed;
  top: 0;
  right: -440px;
  height: 100%;
  width: 420px;
  max-width: 90%;
  z-index: 9001;
  display: flex;
  flex-direction: column;
  background: var(--sidebar-bg-color);
  background-image: var(--sidebar-bg-image);
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
.symi-root .conn-modal-overlay.open + .conn-modal {
  right: 0;
}

.symi-root .conn-modal-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 24px 18px 6px;
  flex-shrink: 0;
}
.symi-root .conn-modal-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.symi-root .conn-modal-icon svg {
  width: 24px;
  height: 24px;
}
.symi-root .conn-modal-icon.slack {
  background: linear-gradient(135deg, rgba(74, 21, 75, 0.4), rgba(54, 197, 171, 0.3));
  border: 1px solid rgba(224, 30, 90, 0.3);
  color: #E01E5A;
}
.symi-root .conn-modal-icon.email {
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.3), rgba(160, 160, 160, 0.3));
  border: 1px solid rgba(96, 165, 250, 0.3);
  color: var(--accent-blue);
}
.symi-root .conn-modal-icon.msteams {
  background: linear-gradient(135deg, rgba(98, 100, 167, 0.4), rgba(160, 160, 160, 0.3));
  border: 1px solid rgba(98, 100, 167, 0.35);
  color: #6264A7;
}
.symi-root .conn-modal-title {
  flex: 1;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: var(--tracking-normal);
}
.symi-root .conn-modal-close {
  background: none;
  border: none;
  color: rgba(247, 246, 243, 0.75);
  font-size: 16px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.15s;
}
.symi-root .conn-modal-close:hover {
  color: rgba(247, 246, 243, 1);
}
.symi-root .conn-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
.symi-root .conn-modal-body::-webkit-scrollbar { width: 4px; height: 4px; }
.symi-root .conn-modal-body::-webkit-scrollbar-track { background: transparent; }
.symi-root .conn-modal-body::-webkit-scrollbar-thumb { background: rgba(247,246,243,0.16); border-radius: 2px; }
.symi-root .conn-modal-body::-webkit-scrollbar-thumb:hover { background: rgba(247,246,243,0.1); }
.symi-root .conn-modal-status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  margin-bottom: 16px;
}
.symi-root .conn-modal-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-dim);
}
.symi-root .conn-modal-status.connected .conn-modal-status-dot {
  background: var(--accent-green);
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.5);
}
.symi-root .conn-modal-status.disconnected .conn-modal-status-dot {
  background: var(--text-dim);
}
.symi-root .conn-modal-status-text {
  flex: 1;
  font-size: 13px;
  color: var(--text);
}
.symi-root .conn-modal-status-badge {
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: var(--tracking-caps);
}
.symi-root .conn-modal-status.connected .conn-modal-status-badge {
  background: rgba(52, 211, 153, 0.15);
  color: var(--accent-green);
}
.symi-root .conn-modal-status.disconnected .conn-modal-status-badge {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(247, 246, 243, 0.75);
}
.symi-root .conn-modal-info {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(247, 246, 243, 0.75);
  margin-bottom: 16px;
}
.symi-root .conn-modal-info code {
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-cyan);
}
.symi-root .conn-modal-config {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(247, 246, 243, 0.75);
  overflow-x: auto;
  white-space: pre;
}
.symi-root .conn-modal-footer {
  padding: 16px 20px 20px;
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}
.symi-root .conn-modal-docs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent-cyan);
  text-decoration: none;
  cursor: pointer;
  padding: 8px 14px;
  background: rgba(85, 247, 255, 0.1);
  border: 1px solid rgba(85, 247, 255, 0.2);
  border-radius: 8px;
  transition: all 0.2s ease;
}
.symi-root .conn-modal-docs:hover {
  background: rgba(85, 247, 255, 0.15);
  border-color: rgba(85, 247, 255, 0.35);
}

/* ── Docs Viewer Modal (scrollable markdown viewer) ────────────────────── */

.symi-root .docs-viewer-overlay {
  position: fixed;
  inset: 0;
  z-index: 9100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease;
}
.symi-root .docs-viewer-overlay.open {
  opacity: 1;
  visibility: visible;
}

.symi-root .docs-viewer {
  position: relative;
  width: 92%;
  max-width: 820px;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, rgba(15, 15, 25, 0.98), rgba(10, 10, 18, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.7),
    0 0 1px rgba(255, 255, 255, 0.1);
  transform: scale(0.96) translateY(12px);
  transition: transform 0.25s ease;
  overflow: hidden;
}
.symi-root .docs-viewer-overlay.open .docs-viewer {
  transform: scale(1) translateY(0);
}

.symi-root .docs-viewer-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
.symi-root .docs-viewer-title {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: var(--tracking-normal);
}
.symi-root .docs-viewer-close {
  width: 34px;
  height: 34px;
  border: none;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  color: rgba(247, 246, 243, 0.75);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.symi-root .docs-viewer-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
}

.symi-root .docs-viewer-body {
  padding: 20px 28px 28px;
  overflow-y: auto;
  flex: 1 1 auto;
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
}
.symi-root .docs-viewer-loading,
.symi-root .docs-viewer-error {
  color: rgba(247, 246, 243, 0.75);
  font-style: italic;
  padding: 8px 0;
}
.symi-root .docs-viewer-error {
  color: var(--accent-red, #f87171);
  font-style: normal;
}

.symi-root .docs-viewer-body h1,
.symi-root .docs-viewer-body h2,
.symi-root .docs-viewer-body h3,
.symi-root .docs-viewer-body h4 {
  color: var(--text);
  font-weight: 600;
  line-height: 1.3;
  margin-top: 1.4em;
  margin-bottom: 0.5em;
}
.symi-root .docs-viewer-body h1 {
  font-size: 22px;
  margin-top: 0;
}
.symi-root .docs-viewer-body h2 {
  font-size: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 6px;
}
.symi-root .docs-viewer-body h3 {
  font-size: 15px;
  color: var(--accent-cyan);
}
.symi-root .docs-viewer-body h4 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: rgba(247, 246, 243, 0.75);
}
.symi-root .docs-viewer-body p {
  margin: 0.6em 0;
}
.symi-root .docs-viewer-body ul,
.symi-root .docs-viewer-body ol {
  margin: 0.5em 0;
  padding-left: 1.4em;
}
.symi-root .docs-viewer-body li {
  margin: 0.25em 0;
}
.symi-root .docs-viewer-body a {
  color: var(--accent-cyan);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.symi-root .docs-viewer-body a:hover {
  color: var(--text);
}
.symi-root .docs-viewer-body code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--accent-cyan);
}
.symi-root .docs-viewer-body pre {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 12px 14px;
  overflow-x: auto;
  margin: 0.8em 0;
}
.symi-root .docs-viewer-body pre code {
  background: none;
  border: none;
  padding: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.55;
}
.symi-root .docs-viewer-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.8em 0;
  font-size: 13px;
}
.symi-root .docs-viewer-body th,
.symi-root .docs-viewer-body td {
  text-align: left;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.symi-root .docs-viewer-body th {
  background: rgba(255, 255, 255, 0.04);
  font-weight: 600;
  color: var(--text);
}
.symi-root .docs-viewer-body blockquote {
  border-left: 3px solid rgba(85, 247, 255, 0.4);
  margin: 0.8em 0;
  padding: 0.3em 0 0.3em 14px;
  color: rgba(247, 246, 243, 0.75);
}
.symi-root .docs-viewer-body hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 1.4em 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   SUBAGENTS PANEL
   ══════════════════════════════════════════════════════════════════════════ */

.symi-root .subagents-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  /* Float without card background (overridden to card by .symi-root .symframe .symframe-card when inside symframe). */
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
}
.symi-root .subagents-panel:hover { border: none; box-shadow: none; }
.symi-root .subagents-panel::before,
.symi-root .subagents-panel::after { display: none; }

.symi-root .subagents-count {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--accent-cyan);
  margin-left: 6px;
  font-weight: 600;
}

/* Quick Deploy */
.symi-root .quick-deploy-section {
  margin-bottom: 10px;
}
.symi-root .quick-deploy-label {
  font-size: 9px;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  color: rgba(247, 246, 243, 0.75);
  margin-bottom: 8px;
}
.symi-root .quick-deploy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.symi-root .quick-deploy-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
}
.symi-root .quick-deploy-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.7;
}
.symi-root .quick-deploy-btn:hover {
  background: rgba(85, 247, 255, 0.06);
  border-color: rgba(85, 247, 255, 0.2);
  color: var(--accent-cyan);
}
.symi-root .quick-deploy-btn:hover svg {
  opacity: 1;
}
.symi-root .quick-deploy-btn.selected {
  background: rgba(85, 247, 255, 0.1);
  border-color: rgba(85, 247, 255, 0.3);
  color: var(--accent-cyan);
}
.symi-root .quick-deploy-btn.selected svg {
  opacity: 1;
}

/* Staging Box */
.symi-root .staging-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.015);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 8px;
  margin-bottom: 12px;
  min-height: 38px;
}
.symi-root .staging-chips {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 22px;
  align-items: center;
}
.symi-root .staging-empty {
  font-size: 10px;
  color: rgba(247, 246, 243, 0.75);
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-normal);
}
.symi-root .staging-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: rgba(85, 247, 255, 0.1);
  border: 1px solid rgba(85, 247, 255, 0.2);
  border-radius: 12px;
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--accent-cyan);
  cursor: default;
}
.symi-root .staging-chip-remove {
  cursor: pointer;
  opacity: 0.6;
  font-size: 12px;
  line-height: 1;
}
.symi-root .staging-chip-remove:hover {
  opacity: 1;
}
.symi-root .staging-deploy-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: rgba(85, 247, 255, 0.12);
  border: 1px solid rgba(85, 247, 255, 0.25);
  border-radius: 8px;
  color: var(--accent-cyan);
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.symi-root .staging-deploy-btn svg {
  width: 13px;
  height: 13px;
}
.symi-root .staging-deploy-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.symi-root .staging-deploy-btn:not(:disabled):hover {
  background: rgba(85, 247, 255, 0.2);
  border-color: rgba(85, 247, 255, 0.4);
}

/* Active subagents */
.symi-root .subagents-active-label {
  font-size: 9px;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  color: rgba(247, 246, 243, 0.75);
  margin-bottom: 6px;
}
.symi-root .subagents-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
  max-height: 240px;
  overflow-y: auto;
}
.symi-root .subagents-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 0;
}
.symi-root .subagents-empty-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.35;
}
.symi-root .subagents-empty-icon svg {
  width: 24px;
  height: 24px;
}
.symi-root .subagents-empty-text {
  font-size: 11px;
  font-family: var(--font-mono);
  color: rgba(247, 246, 243, 0.75);
  letter-spacing: var(--tracking-normal);
}

/* Individual subagent item */
.symi-root .subagent-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.symi-root .subagent-item:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
}
.symi-root .subagent-item[data-status="running"] {
  border-color: rgba(85, 247, 255, 0.2);
  background: rgba(85, 247, 255, 0.03);
}
.symi-root .subagent-item[data-status="completed"] {
  border-color: rgba(52, 211, 153, 0.3);
  background: rgba(52, 211, 153, 0.03);
}
.symi-root .subagent-item[data-status="error"] {
  border-color: rgba(248, 113, 113, 0.2);
}

.symi-root .subagent-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.symi-root .subagent-item[data-status="running"] .subagent-icon {
  color: rgba(85, 247, 255, 0.9);
}
.symi-root .subagent-item[data-status="completed"] .subagent-icon {
  color: rgba(52, 211, 153, 0.9);
}
.symi-root .subagent-item[data-status="error"] .subagent-icon {
  color: rgba(248, 113, 113, 0.9);
}
.symi-root .subagent-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.symi-root .subagent-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.symi-root .subagent-task {
  font-size: 10px;
  font-family: var(--font-mono);
  color: rgba(247, 246, 243, 0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.symi-root .subagent-runtime {
  flex-shrink: 0;
  font-size: 10px;
  font-family: var(--font-mono);
  color: rgba(247, 246, 243, 0.75);
  letter-spacing: var(--tracking-normal);
}

/* Spawn button */
.symi-root .subagent-spawn-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px;
  background: rgba(84, 63, 237, 0.08);
  border: 1px dashed rgba(84, 63, 237, 0.25);
  border-radius: 8px;
  color: rgba(84, 63, 237, 0.85);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
}
.symi-root .subagent-spawn-btn svg {
  width: 14px;
  height: 14px;
}
.symi-root .subagent-spawn-btn:hover {
  background: rgba(84, 63, 237, 0.12);
  border-color: rgba(84, 63, 237, 0.35);
  color: var(--accent-purple);
}

/* ── Subagent Drawer (right sidebar, mirrors .history-drawer) ─────────── */
.symi-root .subagent-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.symi-root .subagent-modal-overlay.open {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

.symi-root .subagent-modal {
  position: fixed;
  top: 0;
  right: -480px;
  height: 100%;
  width: 460px;
  max-width: 90%;
  z-index: 9001;
  display: flex;
  flex-direction: column;
  background: var(--sidebar-bg-color);
  background-image: var(--sidebar-bg-image);
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
.symi-root .subagent-modal-overlay.open + .subagent-modal {
  right: 0;
}

.symi-root .subagent-modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 24px 18px 6px;
  flex-shrink: 0;
}
.symi-root .subagent-modal-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(84, 63, 237, 0.12);
  border-radius: 8px;
  color: var(--accent-purple);
}
.symi-root .subagent-modal-icon svg {
  width: 16px;
  height: 16px;
}
.symi-root .subagent-modal-title {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: var(--tracking-normal);
}
.symi-root .subagent-modal-close {
  background: none;
  border: none;
  color: rgba(247, 246, 243, 0.75);
  font-size: 16px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.15s;
}
.symi-root .subagent-modal-close:hover {
  color: rgba(247, 246, 243, 1);
}

.symi-root .subagent-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.symi-root .subagent-modal-body::-webkit-scrollbar { width: 4px; height: 4px; }
.symi-root .subagent-modal-body::-webkit-scrollbar-track { background: transparent; }
.symi-root .subagent-modal-body::-webkit-scrollbar-thumb { background: rgba(247,246,243,0.16); border-radius: 2px; }
.symi-root .subagent-modal-body::-webkit-scrollbar-thumb:hover { background: rgba(247,246,243,0.1); }

.symi-root .subagent-form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.symi-root .subagent-form-label {
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  color: rgba(247, 246, 243, 0.75);
  text-transform: uppercase;
}
/* Inputs/textarea mirror the Model Routing API-key input (.model-apikey-input):
   offwhite 4% fill, 25% border, 6px radius, mono 11px, cyan focus glow. The
   <select>s carry the shared `.model-select` class so js/symi-select.js
   enhances them into the same custom trigger + portal menu used in routing. */
.symi-root .subagent-form-input,
.symi-root .subagent-form-textarea {
  width: 100%;
  padding: 9px 10px;
  background: rgba(247, 246, 243, 0.04);
  border: 1px solid rgba(247, 246, 243, 0.25);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
/* Taller enhanced-select trigger to match the taller subagent inputs. */
.symi-root .subagent-modal .symi-select-trigger {
  padding: 9px 10px;
  margin-top: 0;
}
.symi-root .subagent-form-input:focus,
.symi-root .subagent-form-textarea:focus {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 6px rgba(85, 247, 255, 0.15);
}
.symi-root .subagent-form-input::placeholder,
.symi-root .subagent-form-textarea::placeholder {
  color: rgba(247, 246, 243, 0.75);
}
.symi-root .subagent-form-textarea {
  min-height: 80px;
  resize: vertical;
}

.symi-root .subagent-modal-footer {
  padding: 14px 20px 18px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
}
.symi-root .subagent-modal-cancel {
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: rgba(247, 246, 243, 0.75);
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
}
.symi-root .subagent-modal-cancel:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}
.symi-root .subagent-modal-spawn {
  padding: 8px 18px;
  background: rgba(84, 63, 237, 0.15);
  border: 1px solid rgba(160, 160, 160, 0.3);
  border-radius: 8px;
  color: var(--accent-purple);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
}
.symi-root .subagent-modal-spawn:hover {
  background: rgba(84, 63, 237, 0.25);
  border-color: rgba(84, 63, 237, 0.5);
}
/* Matches the Symi config Edit button (.settings-btn--primary); sized to the
   Cancel button (padding 8px 16px, no fixed height). */
.symi-root .subagent-modal-submit {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--accent-secondary);
  border: 1px solid var(--accent-secondary);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-normal);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.symi-root .subagent-modal-submit:hover {
  background: #6650f5;
  border-color: #6650f5;
  color: var(--text);
}
.symi-root .subagent-modal-submit svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}


/* ══════════════════════════════════════════════════════════════════════════
   SCHEDULING PANEL
   ══════════════════════════════════════════════════════════════════════════ */

.symi-root .scheduling-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  /* Float without card background (overridden to card by .symi-root .symframe .symframe-card when inside symframe). */
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
}
.symi-root .scheduling-panel:hover { border: none; box-shadow: none; }
.symi-root .scheduling-panel::before,
.symi-root .scheduling-panel::after { display: none; }

.symi-root .schedule-count {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--accent-green);
  margin-left: 6px;
  font-weight: 600;
}

.symi-root .schedule-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
  max-height: 260px;
  overflow-y: auto;
}

/* Empty state */
.symi-root .schedule-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 0;
}
.symi-root .schedule-empty-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.35;
}
.symi-root .schedule-empty-icon svg {
  width: 24px;
  height: 24px;
}
.symi-root .schedule-empty-text {
  font-size: 11px;
  font-family: var(--font-mono);
  color: rgba(247, 246, 243, 0.75);
  letter-spacing: var(--tracking-normal);
}

/* Schedule items */
.symi-root .schedule-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.symi-root .schedule-item:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
}
.symi-root .schedule-item[data-active="true"] {
  border-color: rgba(52, 211, 153, 0.15);
}
.symi-root .schedule-item[data-active="false"] {
  opacity: 0.5;
}

/* Toggle dot */
.symi-root .schedule-toggle {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text-dim);
  border: 2px solid rgba(255,255,255,0.1);
  transition: all 0.2s ease;
  cursor: pointer;
}
.symi-root .schedule-item[data-active="true"] .schedule-toggle {
  background: var(--accent-green);
  border-color: rgba(52, 211, 153, 0.3);
  box-shadow: 0 0 6px rgba(52, 211, 153, 0.3);
}
.symi-root .schedule-toggle:hover {
  border-color: rgba(255,255,255,0.3);
}

.symi-root .schedule-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.symi-root .schedule-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.symi-root .schedule-next {
  font-size: 10px;
  font-family: var(--font-mono);
  color: rgba(247, 246, 243, 0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.symi-root .schedule-interval {
  flex-shrink: 0;
  font-size: 10px;
  font-family: var(--font-mono);
  color: rgba(247, 246, 243, 0.75);
  letter-spacing: var(--tracking-normal);
  padding: 3px 8px;
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
}

/* Add schedule button */
.symi-root .schedule-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px;
  background: rgba(52, 211, 153, 0.08);
  border: 1px dashed rgba(52, 211, 153, 0.25);
  border-radius: 8px;
  color: rgba(52, 211, 153, 0.85);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
}
.symi-root .schedule-add-btn svg {
  width: 14px;
  height: 14px;
}
.symi-root .schedule-add-btn:hover {
  background: rgba(52, 211, 153, 0.12);
  border-color: rgba(52, 211, 153, 0.35);
  color: var(--accent-green);
}

/* ── Schedule Drawer (right sidebar, mirrors .history-drawer) ─────────── */
.symi-root .schedule-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.symi-root .schedule-modal-overlay.open {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

.symi-root .schedule-modal {
  position: fixed;
  top: 0;
  right: -480px;
  height: 100%;
  width: 460px;
  max-width: 90%;
  z-index: 9001;
  display: flex;
  flex-direction: column;
  background: var(--sidebar-bg-color);
  background-image: var(--sidebar-bg-image);
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
.symi-root .schedule-modal-overlay.open + .schedule-modal {
  right: 0;
}

.symi-root .schedule-modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 24px 18px 6px;
  flex-shrink: 0;
}
.symi-root .schedule-modal-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(52, 211, 153, 0.12);
  border-radius: 8px;
  color: var(--accent-green);
}
.symi-root .schedule-modal-icon svg {
  width: 16px;
  height: 16px;
}
.symi-root .schedule-modal-title {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: var(--tracking-normal);
}
.symi-root .schedule-modal-close {
  background: none;
  border: none;
  color: rgba(247, 246, 243, 0.75);
  font-size: 16px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.15s;
}
.symi-root .schedule-modal-close:hover {
  color: rgba(247, 246, 243, 1);
}

.symi-root .schedule-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.symi-root .schedule-modal-body::-webkit-scrollbar { width: 4px; height: 4px; }
.symi-root .schedule-modal-body::-webkit-scrollbar-track { background: transparent; }
.symi-root .schedule-modal-body::-webkit-scrollbar-thumb { background: rgba(247,246,243,0.16); border-radius: 2px; }
.symi-root .schedule-modal-body::-webkit-scrollbar-thumb:hover { background: rgba(247,246,243,0.1); }

.symi-root .schedule-form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.symi-root .schedule-form-label {
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  color: rgba(247, 246, 243, 0.75);
  text-transform: uppercase;
}
/* Inputs/textarea mirror the Model Routing API-key input (.model-apikey-input);
   the Period <select> is enhanced by symi-select.js via the model-select class. */
.symi-root .schedule-form-input,
.symi-root .schedule-form-textarea {
  width: 100%;
  padding: 9px 10px;
  background: rgba(247, 246, 243, 0.04);
  border: 1px solid rgba(247, 246, 243, 0.25);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.symi-root .schedule-form-input:focus,
.symi-root .schedule-form-textarea:focus {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 6px rgba(85, 247, 255, 0.15);
}
.symi-root .schedule-form-input::placeholder,
.symi-root .schedule-form-textarea::placeholder {
  color: rgba(247, 246, 243, 0.75);
}
.symi-root .schedule-form-textarea {
  min-height: 80px;
  resize: vertical;
}
/* Taller enhanced-select trigger to match the taller schedule inputs. */
.symi-root .schedule-modal .symi-select-trigger {
  padding: 9px 10px;
  margin-top: 0;
}

/* Custom-options rows stack; gap gives space above the Period label. */
.symi-root .schedule-form-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Number stepper (mirrors the platform StepperInput: input with stacked
   chevron up/down buttons pinned to the right edge). */
.symi-root .schedule-stepper {
  position: relative;
}
.symi-root .schedule-stepper-input {
  padding-right: 26px;
  appearance: textfield;
  -moz-appearance: textfield;
}
.symi-root .schedule-stepper-input::-webkit-outer-spin-button,
.symi-root .schedule-stepper-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.symi-root .schedule-stepper-btns {
  position: absolute;
  top: 1px;
  bottom: 1px;
  right: 6px;
  width: 20px;
  display: flex;
  flex-direction: column;
}
.symi-root .schedule-stepper-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  color: rgba(247, 246, 243, 0.75);
  cursor: pointer;
  transition: color 0.15s;
}
.symi-root .schedule-stepper-btn:first-child { border-radius: 0 5px 0 0; }
.symi-root .schedule-stepper-btn:last-child { border-radius: 0 0 5px 0; }
.symi-root .schedule-stepper-btn:hover {
  color: var(--accent-cyan);
}
.symi-root .schedule-stepper-btn svg { display: block; }

/* Interval presets */
.symi-root .schedule-interval-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.symi-root .schedule-interval-btn {
  padding: 6px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(247, 246, 243, 0.08);
  border-radius: 8px;
  color: rgba(247, 246, 243, 0.75);
  font-size: 11px;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: all 0.2s ease;
}
.symi-root .schedule-interval-btn:hover {
  background: rgba(52, 211, 153, 0.08);
  border-color: rgba(52, 211, 153, 0.2);
  color: var(--accent-green);
}
.symi-root .schedule-interval-btn.selected {
  background: rgba(85, 247, 255, 0.08);
  border-color: rgba(85, 247, 255, 0.4);
  color: var(--accent-cyan);
}

.symi-root .schedule-modal-footer {
  padding: 14px 20px 18px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
}
/* Matches the Spawn Subagent Cancel button. */
.symi-root .schedule-modal-cancel {
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: rgba(247, 246, 243, 0.75);
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
}
.symi-root .schedule-modal-cancel:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}
.symi-root .schedule-modal-save {
  padding: 8px 18px;
  background: rgba(52, 211, 153, 0.15);
  border: 1px solid rgba(52, 211, 153, 0.3);
  border-radius: 8px;
  color: var(--accent-green);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
}
.symi-root .schedule-modal-save:hover {
  background: rgba(52, 211, 153, 0.25);
  border-color: rgba(52, 211, 153, 0.5);
}
/* Matches the Symi config Edit button (.settings-btn--primary). */
.symi-root .schedule-modal-submit {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--accent-secondary);
  border: 1px solid var(--accent-secondary);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-normal);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.symi-root .schedule-modal-submit:hover {
  background: #6650f5;
  border-color: #6650f5;
  color: var(--text);
}
.symi-root .schedule-modal-submit svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ── Reasoning Panel ───────────────────────────────────────────────── */
.symi-root .reasoning-panel {
  display: flex;
  flex-direction: column;
  min-height: 120px;
  max-height: 420px;
  flex-shrink: 0;
  /* Float without card background (overridden to card by .symi-root .symframe .symframe-card when inside symframe). */
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
}
.symi-root .reasoning-panel:hover { border: none; box-shadow: none; }
.symi-root .reasoning-panel::before,
.symi-root .reasoning-panel::after { display: none; }

.symi-root .reasoning-live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-cyan);
  margin-left: 6px;
  vertical-align: middle;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.symi-root .reasoning-live-dot.active {
  opacity: 1;
  animation: pulse 1.2s ease-in-out infinite;
}

.symi-root .reasoning-feed {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 2px;
}
.symi-root .reasoning-feed::-webkit-scrollbar { width: 4px; height: 4px; }
.symi-root .reasoning-feed::-webkit-scrollbar-track { background: transparent; }
.symi-root .reasoning-feed::-webkit-scrollbar-thumb { background: rgba(247, 246, 243, 0.16); border-radius: 2px; }
.symi-root .reasoning-feed::-webkit-scrollbar-thumb:hover { background: rgba(247, 246, 243, 0.1); }

/* Empty state */
.symi-root .reasoning-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 0 12px;
  color: rgba(247, 246, 243, 0.75);
}
.symi-root .reasoning-empty-icon {
  width: 28px;
  height: 28px;
  opacity: 0.4;
}
.symi-root .reasoning-empty-icon svg {
  width: 100%;
  height: 100%;
}
.symi-root .reasoning-empty-text {
  font-size: 11px;
  font-family: var(--font-mono);
  opacity: 0.5;
  text-align: center;
}

/* Run separator */
.symi-root .reasoning-run-sep {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 2px;
}
.symi-root .reasoning-run-sep::before,
.symi-root .reasoning-run-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
}
.symi-root .reasoning-run-sep-label {
  font-size: 9px;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  color: rgba(247, 246, 243, 0.75);
  white-space: nowrap;
}

/* Individual reasoning entry */
.symi-root .reasoning-entry {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  transition: border-color 0.2s;
}
.symi-root .reasoning-entry:hover {
  border-color: rgba(255, 255, 255, 0.09);
}

/* Entry header row: badge + label */
.symi-root .reasoning-entry-header {
  display: flex;
  align-items: center;
  gap: 6px;
}
.symi-root .reasoning-entry-badge {
  font-size: 9px;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  padding: 1px 5px;
  border-radius: 4px;
  flex-shrink: 0;
}
/* Thinking badge — cyan tint */
.symi-root .reasoning-entry-badge.badge-think {
  background: rgba(85, 247, 255, 0.1);
  color: var(--accent-cyan);
  border: 1px solid rgba(85, 247, 255, 0.18);
}
/* Tool call badge — purple tint */
.symi-root .reasoning-entry-badge.badge-tool {
  background: rgba(84, 63, 237, 0.12);
  color: var(--accent-purple);
  border: 1px solid rgba(84, 63, 237, 0.2);
}
/* Tool result badge — green tint */
.symi-root .reasoning-entry-badge.badge-result {
  background: rgba(52, 211, 153, 0.1);
  color: var(--accent-green);
  border: 1px solid rgba(52, 211, 153, 0.18);
}
/* Narration badge — dim white tint */
.symi-root .reasoning-entry-badge.badge-narration {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(247, 246, 243, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
/* Agent status badge — amber tint */
.symi-root .reasoning-entry-badge.badge-agent {
  background: rgba(251, 191, 36, 0.1);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.18);
}
/* Context sources badge — teal tint */
.symi-root .reasoning-entry-badge.badge-sources {
  background: rgba(20, 184, 166, 0.1);
  color: #2dd4bf;
  border: 1px solid rgba(20, 184, 166, 0.18);
}
/* Sources list inside reasoning panel */
.symi-root .reasoning-sources-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0 0;
}
.symi-root .reasoning-source-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
  font-family: var(--font-mono);
  color: rgba(247, 246, 243, 0.75);
  opacity: 0.8;
  padding: 1px 0;
}
.symi-root .reasoning-source-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.symi-root .reasoning-source-score {
  flex-shrink: 0;
  font-size: 9px;
  color: #2dd4bf;
  opacity: 0.7;
}
.symi-root .reasoning-source-more {
  font-size: 9px;
  font-family: var(--font-mono);
  color: rgba(247, 246, 243, 0.75);
  opacity: 0.5;
  padding: 2px 0 0;
}

.symi-root .reasoning-entry-name {
  font-size: 11px;
  font-family: var(--font-mono);
  color: rgba(247, 246, 243, 0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

/* Thinking body */
.symi-root .reasoning-think-body {
  font-size: 10px;
  font-family: var(--font-mono);
  color: rgba(247, 246, 243, 0.75);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 120px;
  overflow-y: auto;
  padding: 4px 2px 0;
  opacity: 0.75;
}
.symi-root .reasoning-think-body::-webkit-scrollbar { width: 4px; height: 4px; }
.symi-root .reasoning-think-body::-webkit-scrollbar-track { background: transparent; }
.symi-root .reasoning-think-body::-webkit-scrollbar-thumb { background: rgba(247, 246, 243, 0.16); border-radius: 2px; }
.symi-root .reasoning-think-body::-webkit-scrollbar-thumb:hover { background: rgba(247, 246, 243, 0.1); }

/* Tool detail — compact JSON preview, collapsible */
.symi-root .reasoning-tool-preview {
  font-size: 10px;
  font-family: var(--font-mono);
  color: rgba(247, 246, 243, 0.75);
  opacity: 0.65;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 2px 0 0;
}
.symi-root .reasoning-tool-detail {
  display: none;
  font-size: 10px;
  font-family: var(--font-mono);
  color: rgba(247, 246, 243, 0.75);
  white-space: pre-wrap;
  word-break: break-all;
  padding: 4px 2px 0;
  opacity: 0.65;
  max-height: 100px;
  overflow-y: auto;
}
.symi-root .reasoning-entry.expanded .reasoning-tool-detail { display: block; }
.symi-root .reasoning-entry.expanded .reasoning-tool-preview { display: none; }

/* Result row */
.symi-root .reasoning-result-meta {
  font-size: 10px;
  font-family: var(--font-mono);
  color: rgba(247, 246, 243, 0.75);
  padding: 2px 0 0;
}

/* ── Lazy-load sentinel ──────────────────────────────────────────── */
.symi-root .load-more-sentinel {
  text-align: center;
  padding: 12px 0;
  font-size: 12px;
  color: rgba(247, 246, 243, 0.75);
  opacity: 0.7;
}

/* ── Symipulse Panel ────────────────────────────────────────────── */
.symi-root .symipulse-panel {
  cursor: pointer;
  transition:
    max-height 0.3s ease,
    border-color 0.3s;
}

.symi-root .symipulse-feed {
  max-height: 3.2em;
  overflow: hidden;
  transition: max-height 0.3s ease;
  font-size: 11px;
  line-height: 1.5;
  color: rgba(247, 246, 243, 0.75);
  font-family: var(--font-mono);
}

.symi-root .symipulse-panel.expanded .symipulse-feed {
  max-height: 300px;
  overflow-y: auto;
}
.symi-root .symipulse-panel.expanded .symipulse-feed::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
.symi-root .symipulse-panel.expanded .symipulse-feed::-webkit-scrollbar-track {
  background: transparent;
}
.symi-root .symipulse-panel.expanded .symipulse-feed::-webkit-scrollbar-thumb {
  background: rgba(247, 246, 243, 0.16);
  border-radius: 2px;
}
.symi-root .symipulse-panel.expanded .symipulse-feed::-webkit-scrollbar-thumb:hover {
  background: rgba(247, 246, 243, 0.1);
}

.symi-root .symipulse-entry {
  padding: 3px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.symi-root .symipulse-entry:last-child {
  border-bottom: none;
}

.symi-root .symipulse-entry-time {
  color: rgba(247, 246, 243, 0.75);
  font-size: 10px;
  flex-shrink: 0;
}

.symi-root .symipulse-entry-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(247, 246, 243, 0.75);
}

.symi-root .symipulse-panel.expanded .symipulse-entry {
  white-space: normal;
  word-break: break-word;
}
.symi-root .symipulse-panel.expanded .symipulse-entry-text {
  white-space: normal;
  overflow: visible;
}

.symi-root .symipulse-live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-green);
  margin-left: 6px;
  vertical-align: middle;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.symi-root .symipulse-live-dot.active {
  opacity: 1;
  animation: pulse 1.2s ease-in-out infinite;
}
.symi-root .symipulse-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  color: rgba(247, 246, 243, 0.75);
}

/* S2 (cannot_complete): honest terminal guidance — a real-world gate, not a failure. Neutral amber, no alarm red. */
.l2-attention-cannot {
  color: var(--sf-amber-tint, #e6b74e);
  box-shadow: inset 2px 0 0 0 var(--sf-amber-tint, #e0a83a);
}
.l2-attention-steps {
  margin: 4px 0 0;
  padding-left: 18px;
  color: var(--sf-text, #d8def0);
  opacity: 0.9;
}
.l2-attention-steps li {
  margin-top: 2px;
}
/* S1 (approval-ux): the approval title + the actual command it gates. */
.l2-attention-title {
  font-weight: 600;
}
.symi-root .symipulse-empty-text {
  font-size: 11px;
  font-family: var(--font-mono);
  opacity: 0.5;
}

/* ── Agent working indicator ─────────────────────────────────────── */
.symi-root .aso-working {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.symi-root .aso-working.active {
  display: flex;
  opacity: 1;
}
.symi-root .aso-working-asterisk {
  display: inline-block;
  font-size: 12px;
  color: var(--aso-color, rgba(85, 247, 255, 0.75));
  animation: aso-spin 1.5s linear infinite;
  filter: drop-shadow(0 0 4px var(--aso-color, rgba(85, 247, 255, 0.75)));
}
.symi-root .aso-working-text {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(247, 246, 243, 0.75);
}

/* ── Model info (below agent status orb) ─────────────────────────── */
.symi-root .aso-model-info {
  text-align: center;
  margin-top: 6px;
  font-size: 10px;
  color: rgba(247, 246, 243, 0.75);
}
.symi-root .aso-model-label {
  font-weight: 500;
  letter-spacing: var(--tracking-normal);
}
.symi-root .aso-model-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  background: none;
  border: none;
  color: rgba(247, 246, 243, 0.75);
}

/* ── Debug Panel ─────────────────────────────────────────────────── */
.symi-root .debug-panel {
  max-height: 300px;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.symi-root .debug-panel.collapsed {
  max-height: 28px;
}
.symi-root .debug-panel.collapsed .debug-entries {
  display: none;
}
.symi-root .debug-panel.collapsed .debug-toggle-arrow {
  transform: rotate(0deg);
}
.symi-root .debug-toggle-arrow {
  display: inline-block;
  font-size: 9px;
  margin-left: 4px;
  transition: transform 0.2s ease;
  transform: rotate(90deg);
}
.symi-root .debug-panel .panel-label {
  cursor: pointer;
  user-select: none;
}
.symi-root .debug-entries {
  max-height: 260px;
  overflow-y: auto;
  padding: 4px 6px;
  font-family: "SF Mono", "Fira Code", monospace;
  font-size: 10px;
  line-height: 1.4;
}
.symi-root .debug-entry {
  padding: 2px 0;
  color: rgba(247, 246, 243, 0.75);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Patch Indicator Button ────────────────────────────────────────── */
.symi-root .patch-indicator-btn {
  position: absolute;
  top: 20px;
  left: 66px;
  z-index: 50;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--glass-bg);
  backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  color: rgba(247, 246, 243, 0.75);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.symi-root .patch-indicator-btn:hover {
  color: var(--accent-purple);
  border-color: rgba(84,63,237,0.35);
  box-shadow: 0 0 12px rgba(84,63,237,0.15);
}
.symi-root .patch-indicator-btn:active { transform: scale(0.93); }
.symi-root .patch-indicator-btn.active {
  color: var(--accent-purple);
  border-color: rgba(84,63,237,0.4);
  box-shadow: 0 0 14px rgba(84,63,237,0.2);
}
.symi-root .patch-indicator-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--accent-purple);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  line-height: 16px;
  text-align: center;
}

/* ── Patch Indicator Overlay Panel ─────────────────────────────────── */
.symi-root .patch-indicator-panel {
  position: absolute;
  top: 66px;
  left: 20px;
  z-index: 49;
  width: 340px;
  max-height: calc(100vh - 140px);
  background: rgba(12, 12, 24, 0.92);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--glass-border-strong);
  border-radius: 12px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
.symi-root .patch-indicator-panel.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.symi-root .patch-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--glass-border);
  flex-shrink: 0;
}
.symi-root .patch-panel-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text);
}
.symi-root .patch-panel-close {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: rgba(247, 246, 243, 0.75);
  cursor: pointer;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.symi-root .patch-panel-close:hover {
  color: var(--text);
  background: rgba(255,255,255,0.06);
}
.symi-root .patch-panel-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 6px 0;
  max-height: 320px;
}
.symi-root .patch-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  transition: opacity 0.2s ease, background 0.15s;
}
.symi-root .patch-row:hover {
  background: rgba(255,255,255,0.03);
}
.symi-root .patch-row.patch-disabled {
  opacity: 0.5;
}
.symi-root .patch-row.patch-empty {
  justify-content: center;
  color: rgba(247, 246, 243, 0.75);
  font-size: 12px;
  padding: 20px 14px;
}
.symi-root .patch-toggle {
  flex-shrink: 0;
  min-width: 36px;
  height: 22px;
  padding: 0 6px;
  border: 1px solid var(--glass-border);
  border-radius: 11px;
  background: rgba(255,255,255,0.05);
  color: rgba(247, 246, 243, 0.75);
  font-size: 9px;
  font-weight: 700;
  font-family: var(--font-mono);
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
}
.symi-root .patch-toggle.on {
  background: rgba(84,63,237,0.2);
  border-color: rgba(84,63,237,0.4);
  color: var(--accent-purple);
}
.symi-root .patch-toggle:hover {
  border-color: var(--glass-border-strong);
}
.symi-root .patch-info {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.symi-root .patch-label {
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.symi-root .patch-meta {
  font-size: 10px;
  color: rgba(247, 246, 243, 0.75);
  margin-top: 1px;
}
.symi-root .patch-type-badge {
  flex-shrink: 0;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--glass-border);
  font-size: 9px;
  font-weight: 600;
  font-family: var(--font-mono);
  color: rgba(247, 246, 243, 0.75);
  letter-spacing: var(--tracking-normal);
}
.symi-root .patch-delete-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: rgba(247, 246, 243, 0.75);
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.symi-root .patch-delete-btn:hover {
  color: #f87171;
  background: rgba(248,113,113,0.1);
}
.symi-root .patch-panel-footer {
  flex-shrink: 0;
  padding: 10px 14px;
  border-top: 1px solid var(--glass-border);
  text-align: center;
}
.symi-root .patch-remove-all-btn {
  width: 100%;
  padding: 6px 16px;
  border: 1px solid rgba(248,113,113,0.25);
  border-radius: 6px;
  background: rgba(248,113,113,0.06);
  color: #f87171;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.symi-root .patch-remove-all-btn:hover {
  background: rgba(248,113,113,0.12);
  border-color: rgba(248,113,113,0.4);
}
.symi-root .patch-remove-all-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ── Inline sources panel ──────────────────────────────────────────── */
.symi-root .msg-sources {
  margin: 6px 0 4px 2px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  overflow: hidden;
  width: 92%;
}
.symi-root .msg-sources-header {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding: 6px 10px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-dim, rgba(255,255,255,0.5));
  font-size: 11px;
  text-align: left;
  transition: background 0.12s;
}
.symi-root .msg-sources-header:hover {
  background: rgba(255, 255, 255, 0.05);
}
.symi-root .msg-sources-icon {
  font-size: 8px;
  opacity: 0.6;
}
.symi-root .msg-sources-label {
  font-weight: 600;
  color: var(--text-dim, rgba(255, 255, 255, 0.55));
}
.symi-root .msg-sources-count {
  opacity: 0.6;
}
.symi-root .msg-sources-chevron {
  margin-left: auto;
  opacity: 0.5;
  font-size: 14px;
}

.l2-actions {
  display: grid;
  gap: 5px;
  margin-top: 6px;
  padding-top: 7px;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
}

.l2-actions-title {
  font-size: var(--sf-text-xs, 10px);
  font-weight: 700;
  letter-spacing: var(--tracking-normal);
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.78);
}

.l2-action {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 6px;
  align-items: start;
  min-width: 0;
  font-size: 11px;
  line-height: 1.32;
}

.l2-action-dot {
  width: 7px;
  height: 7px;
  margin-top: 4px;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.7);
}

.l2-action-body {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.l2-action-main {
  color: rgba(226, 232, 240, 0.92);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.l2-action-summary,
.l2-action-files {
  color: rgba(148, 163, 184, 0.86);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.l2-action-files {
  font-family: var(--sf-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 10px;
  color: rgba(186, 230, 253, 0.86);
}

.l2-action-meta {
  color: rgba(148, 163, 184, 0.78);
  font-size: 10px;
  white-space: nowrap;
}

/* Inline "Running" tag beside the live step's title (replaces the detached right-aligned meta). */
.l2-action-running-tag {
  margin-left: 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: var(--tracking-normal);
  text-transform: uppercase;
  color: var(--sf-green-peak, #57e08a);
}

.l2-action-running .l2-action-dot {
  background: var(--sf-green-peak, #57e08a);
  animation: l2-pulse 1.4s ease-in-out infinite;
}

.l2-action-succeeded .l2-action-dot {
  background: var(--sf-green-strong, #35c46a);
}

.l2-action-failed .l2-action-dot {
  background: var(--sf-pink-strong, #e0577e);
}

.l2-action-blocked .l2-action-dot {
  background: var(--sf-amber-tint, #e0a83a);
}

.l2-action-cancelled .l2-action-dot {
  background: rgba(148, 163, 184, 0.7);
}

.l2-events {
  display: grid;
  gap: 4px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
}
.symi-root .msg-sources-list {
  padding: 2px 8px 8px;
}
.symi-root .msg-sources-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 6px;
  font-size: 11px;
}
.symi-root .msg-sources-item-clickable {
  cursor: pointer;
  transition: background 0.12s;
}
.symi-root .msg-sources-item-clickable:hover { background: rgba(255,255,255,0.06); }
.symi-root .msg-sources-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text, rgba(255,255,255,0.8));
}
.symi-root .msg-sources-score {
  flex-shrink: 0;
  color: var(--accent-green, #4ade80);
  font-size: 10px;
  opacity: 0.8;
}
/* ── Source modal ──────────────────────────────────────────────────── */
.msg-source-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  .l2-activity.l2-thinking,
  .l2-action-running .l2-action-dot {
    animation: none;
  }
  .l2-activity.l2-thinking {
    -webkit-text-fill-color: currentColor;
    background: none;
    color: var(--text, #fff);
  }
}
.msg-source-modal {
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 20px;
  max-width: 560px;
  width: 90vw;
  max-height: 70vh;
  overflow-y: auto;
  color: rgba(247,246,243,0.85);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.msg-source-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.msg-source-modal-close {
  background: none; border: none; cursor: pointer;
  color: rgba(247,246,243,0.5); font-size: 18px; line-height: 1;
  padding: 0 4px;
}
.msg-source-modal-close:hover { color: #fff; }
.msg-source-modal-nav { display: flex; align-items: center; gap: 8px; font-size: 12px; opacity: 0.6; }
.msg-source-modal-prev, .msg-source-modal-next {
  background: none; border: none; cursor: pointer;
  color: rgba(247,246,243,0.7); font-size: 16px; padding: 0 4px;
}
.msg-source-modal-prev:hover, .msg-source-modal-next:hover { color: #fff; }
.msg-source-modal-title { font-weight: 600; font-size: 14px; }
.msg-source-modal-score { font-size: 11px; color: #4ade80; opacity: 0.8; }
.msg-source-modal-content {
  white-space: pre-wrap;
  font-size: 12px;
  line-height: 1.6;
  opacity: 0.75;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 10px;
}
/* Workspace Mirror — tenant-scoped roots and enrollment controls. */
.symi-root .mirror-panel {
  display: flex;
  flex-direction: column;
  gap: 9px;
  /* Accent box (matches .symframe-card). */
  background: rgba(247, 246, 243, 0.04);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(85, 247, 255, 0.25);
  box-shadow: none;
}
.symi-root .mirror-panel:hover { border-color: rgba(85, 247, 255, 0.25); box-shadow: none; }
.symi-root .mirror-panel::before,
.symi-root .mirror-panel::after { display: none; }
.symi-root .mirror-roots,
.symi-root .mirror-devices {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.symi-root .mirror-root,
.symi-root .mirror-device {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--text);
  font: 10px/1.4 var(--font-mono);
}
.symi-root .mirror-root div {
  min-width: 0;
}
.symi-root .mirror-device span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.symi-root .mirror-device em {
  flex: 0 0 auto;
}
.symi-root .mirror-device-card {
  padding: 5px 0;
  border-top: 1px solid var(--glass-border);
}
.symi-root .mirror-device-head {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font: 10px/1.4 var(--font-mono);
}
.symi-root .mirror-device-head strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.symi-root .mirror-device-platform {
  color: rgba(247, 246, 243, 0.75);
  font-size: 9px;
}
.symi-root .mirror-device-state {
  flex: 0 0 auto;
  padding: 2px 7px;
  border: 1px solid var(--glass-border);
  border-radius: 99px;
  color: rgba(247, 246, 243, 0.75);
  font: 700 8px/1.4 var(--font-mono);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.symi-root .mirror-device-state.connected {
  color: var(--accent-green);
  background: rgba(52, 211, 153, 0.12);
  border-color: rgba(52, 211, 153, 0.25);
}
.symi-root .mirror-device-state.blocked {
  color: #f87171;
  background: rgba(248, 113, 113, 0.14);
  border-color: rgba(248, 113, 113, 0.3);
}
.symi-root .mirror-device-disconnect,
.symi-root .mirror-device-block,
.symi-root .mirror-device-reconnect {
  flex: 0 0 auto;
  padding: 2px 7px;
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  background: var(--glass-bg);
  color: rgba(247, 246, 243, 0.75);
  font: 9px/1.4 var(--font-mono);
  cursor: pointer;
}
.symi-root .mirror-device-block {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.3);
}
/* Inline confirm for a destructive device action (Disconnect/Block). Replaces the browser-native
   window.confirm() modal: the card's action buttons are swapped for this prompt + Cancel/Confirm, kept in the
   panel's glass/mono aesthetic. `.danger` red-tints the irreversible Block variant. State is module JS
   (mirror-panel.js pendingConfirm) so it survives the 30s poll / gateway:connected re-render. */
.symi-root .mirror-device-confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 5px;
  padding: 6px 7px;
  border: 1px solid color-mix(in srgb, var(--accent-cyan) 35%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent-cyan) 8%, var(--glass-bg));
}
.symi-root .mirror-device-confirm.danger {
  border-color: rgba(248, 113, 113, 0.35);
  background: rgba(248, 113, 113, 0.08);
}
.symi-root .mirror-device-confirm-prompt {
  flex: 1 1 150px;
  min-width: 0;
  color: var(--text-muted);
  font: 9px/1.4 var(--font-mono);
}
.symi-root .mirror-device-confirm-actions {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 5px;
}
.symi-root .mirror-device-confirm-cancel,
.symi-root .mirror-device-confirm-yes {
  flex: 0 0 auto;
  padding: 3px 9px;
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  background: var(--glass-bg);
  color: var(--text-dim);
  font: 9px/1.4 var(--font-mono);
  cursor: pointer;
}
.symi-root .mirror-device-confirm-cancel:hover,
.symi-root .mirror-device-confirm-yes:hover {
  color: var(--accent-cyan);
  border-color: color-mix(in srgb, var(--accent-cyan) 45%, transparent);
}
.symi-root .mirror-device-confirm-yes {
  color: var(--accent-cyan);
  border-color: color-mix(in srgb, var(--accent-cyan) 45%, transparent);
}
.symi-root .mirror-device-confirm.danger .mirror-device-confirm-yes {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.4);
}
.symi-root .mirror-device-confirm.danger .mirror-device-confirm-yes:hover {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.6);
}
.symi-root .mirror-device-confirm-cancel:focus-visible,
.symi-root .mirror-device-confirm-yes:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--accent-cyan) 55%, transparent);
  outline-offset: 2px;
}
.symi-root .mirror-paths {
  margin-top: 5px;
}
.symi-root .mirror-path {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 3px;
}
.symi-root .mirror-path span {
  color: rgba(247, 246, 243, 0.75);
  font: 8px/1.4 var(--font-mono);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.symi-root .mirror-path code {
  overflow-wrap: anywhere;
  color: rgba(247, 246, 243, 0.75);
  font: 9px/1.4 var(--font-mono);
}
.symi-root .mirror-root strong,
.symi-root .mirror-root span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.symi-root .mirror-root span,
.symi-root .mirror-device em {
  color: var(--text-muted);
  font: 8px/1.4 var(--font-mono);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}
.symi-root .mirror-empty {
  color: var(--text-muted);
  font: 10px/1.5 var(--font-mono);
  letter-spacing: var(--tracking-normal);
}
/* Collapsible disclosure for the Layer 2 workspace flood and the Computers list. The section label now
   lives in <summary>; its body holds the rows (spaced like the parent list). State is driven by JS
   (see mirror-panel.js sectionOpen) — CSS only styles the open/closed affordance. */
.symi-root .mirror-section,
.symi-root .mirror-section-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.symi-root .mirror-section-summary {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  user-select: none;
  list-style: none; /* hide Firefox default disclosure triangle */
  color: var(--text-muted);
  font: 600 10px/1.4 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}
.symi-root .mirror-section-summary::-webkit-details-marker {
  display: none; /* hide Safari/Chrome default disclosure triangle */
}
.symi-root .mirror-section-summary::before {
  content: "▸";
  display: inline-block;
  font-size: 10px;
  line-height: 1;
  transition: transform 0.15s ease;
}
.symi-root .mirror-section[open] > .mirror-section-summary::before {
  transform: rotate(90deg);
}
.symi-root .mirror-section-summary:hover {
  color: var(--accent-cyan);
}
/* No computers connected yet → the summary is a plain static label, not a
   disclosure control: no hover, no pointer, no triangle (JS also blocks toggle). */
.symi-root .mirror-section.is-empty > .mirror-section-summary {
  cursor: default;
}
.symi-root .mirror-section.is-empty > .mirror-section-summary:hover {
  color: var(--text-muted);
}
.symi-root .mirror-section.is-empty > .mirror-section-summary::before {
  display: none;
}
.symi-root .mirror-section-summary:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--accent-cyan) 55%, transparent);
  outline-offset: 2px;
  border-radius: 3px;
}
.symi-root .mirror-root button,
.symi-root .mirror-connect-btn {
  border: 1px solid rgba(247, 246, 243, 0.25);
  border-radius: 6px;
  background: rgba(247, 246, 243, 0.04);
  color: rgba(247, 246, 243, 0.75);
  padding: 5px 8px;
  font: 9px var(--font-mono);
  cursor: pointer;
}
.symi-root .mirror-root button:hover,
.symi-root .mirror-connect-btn:hover {
  border-color: rgba(85, 247, 255, 0.4);
  color: var(--text);
}
.symi-root .mirror-root button:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}
.symi-root .mirror-connect-btn {
  width: 100%;
}
.symi-root .mirror-status {
  min-height: 12px;
  color: rgba(247, 246, 243, 0.75);
  font: 10px/1.5 var(--font-mono);
  letter-spacing: var(--tracking-normal);
  overflow-wrap: anywhere;
}
/* When there is no status message, collapse the row entirely (and its flex gaps) so a sparse panel — e.g. zero
   connected computers — doesn't leave a large dead space between the devices list and the connect output. */
.symi-root .mirror-status:empty {
  display: none;
}
.symi-root .mirror-status-error {
  color: #f87171;
}
.symi-root .mirror-connect-out:empty {
  display: none;
}
.symi-root .mirror-connect-title {
  color: var(--text-muted);
  font: 10px/1.5 var(--font-mono);
  letter-spacing: var(--tracking-normal);
  margin-bottom: 8px;
}
.symi-root .mirror-download-script {
  display: block;
  box-sizing: border-box;
  width: 100%;
  border: 1px solid rgba(247, 246, 243, 0.25);
  border-radius: 6px;
  background: rgba(247, 246, 243, 0.04);
  color: rgba(247, 246, 243, 0.75);
  padding: 5px 8px;
  font: 9px var(--font-mono);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.symi-root .mirror-download-script:hover {
  border-color: rgba(85, 247, 255, 0.4);
  color: var(--text);
}
.symi-root .mirror-connect-code {
  color: var(--text-muted);
  font: 10px/1.5 var(--font-mono);
  letter-spacing: var(--tracking-normal);
  margin-top: 9px;
}
.symi-root .mirror-connect-code code {
  color: var(--accent-cyan);
  user-select: text;
}
.symi-root .mirror-connect-meta {
  color: var(--text-dim);
  font: 9px/1.5 var(--font-mono);
  letter-spacing: var(--tracking-normal);
  margin-top: 4px;
}
/* Easy/Advanced install tabs. A two-segment control: Easy = download the install script, Advanced = raw
   terminal command. The active tab is tracked in module JS (survives re-render), reflected here via
   aria-selected. */
.symi-root .mirror-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 7px;
}
.symi-root .mirror-tab {
  flex: 1 1 0;
  border: 1px solid var(--glass-border-strong);
  border-radius: 6px;
  background: var(--glass-bg);
  color: var(--text-dim);
  padding: 5px 8px;
  font: 9px var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  cursor: pointer;
}
.symi-root .mirror-tab:hover {
  color: var(--accent-cyan);
  border-color: color-mix(in srgb, var(--accent-cyan) 45%, transparent);
}
.symi-root .mirror-tab:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--accent-cyan) 55%, transparent);
  outline-offset: 2px;
}
.symi-root .mirror-tab[aria-selected="true"] {
  color: var(--accent-cyan);
  border-color: color-mix(in srgb, var(--accent-cyan) 55%, transparent);
  background: color-mix(in srgb, var(--accent-cyan) 12%, var(--glass-bg));
}
.symi-root .mirror-tabpanel[hidden] {
  display: none;
}
.symi-root .mirror-advanced-cmd {
  display: block;
  color: var(--text-muted);
  font: 10px/1.5 var(--font-mono);
  letter-spacing: var(--tracking-normal);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  user-select: text;
}

/* ── Reduced motion: drop the column collapse/expand animation. ── */
@media (prefers-reduced-motion: reduce) {
  .symi-root .metrics-col {
    transition: none;
  }
}