/* Global styles (reset, keyframes, buttons, glass panels, scrollbar)
     are in public/global-styles.css — no longer duplicated here. */

  /* ─── App Layout ──────────────────────────────── */
  .app.svelte-6t5lyo {
    display: flex;
    height: 100vh;
    overflow: hidden;
    position: relative;
    border-radius: 12px;
    --sidebar-width: 283px;
  }

  /* Mobile (iOS Safari): use 100dvh to handle the URL bar collapsing /
   * expanding without viewport jumps. Also extends the shell below the
   * iOS safe-area so the chat doesn't end at the home indicator.
   * Desktop is unchanged.
   *
   * The `100dvh` / fallback choice has to be made with @supports, not by
   * declaration order: CSS takes the LAST valid declaration, and
   * `-webkit-fill-available` is valid in Chrome too — it just resolves to
   * the CONTENT height there, because no ancestor has a definite height.
   * As a plain fallback it collapsed the whole shell to its content height
   * in every Chrome-based browser (Android Chrome, desktop Chrome at a
   * narrow window), stranding the composer mid-screen above a void. */
  body.is-mobile .app.svelte-6t5lyo {
    height: 100vh;
    border-radius: 0;
  }
  @supports (height: 100dvh) {
    body.is-mobile .app.svelte-6t5lyo {
      height: 100dvh;
    }
  }

  /* Full-viewport blur layer — covers everything including sidebar gap */
  .app.svelte-6t5lyo::before {
    content: '';
    position: fixed;
    inset: 0;
    border-radius: 12px;
    background: var(--app-bg-image, linear-gradient(to bottom, rgba(38, 38, 40, 1), rgba(22, 22, 24, 1)));
    background-size: cover;
    background-position: center;
    filter: blur(var(--app-bg-blur, 6px)) brightness(var(--app-bg-brightness, 1));
    z-index: 0;
    pointer-events: none;
  }

  /* Standby spare (pre-claim / mid-claim-load): hide the shell content but keep
     the themed background (::before), so a claimed window appears as a solid
     themed panel following the cursor, then reveals the loaded conversation
     directly — never flashing the empty "New Session" hero. */
  .app.standby.svelte-6t5lyo > :where(.svelte-6t5lyo) {
    visibility: hidden;
  }

  .app.svelte-6t5lyo::after {
    content: '';
    position: fixed;
    inset: 0;
    border-radius: 12px;
    background: none;
    z-index: 0;
    pointer-events: none;
  }

  .app.collapsed.svelte-6t5lyo {
    --sidebar-width: 70px;
  }

  /* ─── Mobile responsive (≤ 480 px) ─────────────────────────
     On iPhone 11 (390×844), the desktop's 283 px fixed sidebar consumes 73% of
     the viewport. Layer mobile rules on top: the .app shell drops its 12 px
     radius (Tauri's vibrancy window — meaningless on a phone), the sidebar
     becomes a 283 px slide-in drawer (translateX) instead of a fixed column,
     and the .main-content takes the full viewport width.
     The sidebar component handles the actual transform + backdrop in its
     own <style> block (see .app.mobile-sidebar-open .sidebar). */
  @media (max-width: 480px) {
    .app.svelte-6t5lyo {
      --sidebar-width: 0px;
      border-radius: 0;
    }
  }

  /* Toggle the two topbar slots: desktop shows the full TopActionBar
   * (window controls + widget strip), mobile shows the simplified
   * MobileTopBar (hamburger + workspace + status + connect). The
   * .topbar-slot is a fixed-position container; the inner component
   * decides its own position via CSS variables. */
  .topbar-slot.svelte-6t5lyo {
    display: contents;
  }
  .topbar-slot.svelte-6t5lyo > * {
    display: block;
  }
  body.is-mobile .topbar-slot.svelte-6t5lyo:not(.topbar-mobile) {
    display: none;
  }
  body.is-mobile .topbar-slot.topbar-mobile.svelte-6t5lyo {
    display: block;
  }

  .main-content.svelte-6t5lyo {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* Clear the fixed sidebar so in-flow content never slides under it, and
       align with the fixed TopActionBar/SessionTabs which already use
       left: var(--sidebar-width). Resolves to 283px open / 70px collapsed
       (see .app / .app.collapsed above). */
    margin-left: var(--sidebar-width);
    padding-top: var(--content-top, 80px);
    transition: margin-left 300ms cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 0;
    position: relative;
    overflow: hidden;
    border-radius: 0;
  }

  /* Mobile: the desktop's 38+32=70px of fixed bars doesn't apply. The
   * MobileTopBar is 56px and there's no SessionTabs strip on phone (the
   * tab carousel lives inside the .conversation-region on mobile —
   * see ConversationArea.svelte mobile rules). Plus safe-area top inset
   * for the iOS status bar. And bottom padding for the bottom-nav
   * (64px) plus safe-area bottom inset for the iOS home indicator. */
  body.is-mobile .main-content.svelte-6t5lyo {
    margin-left: 0;
    padding-top: calc(var(--mobile-header-height, 56px) + var(--safe-top, 0px));
    padding-bottom: calc(var(--mobile-tabbar-height, 64px) + var(--safe-bottom, 0px) + 4px);
  }

  /* Workspace-missing banner — warning surface when a session's project folder
     was moved/renamed/deleted and couldn't be auto-recovered. */
  .workspace-missing-banner.svelte-6t5lyo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    margin: 6px 10px 0;
    background: var(--glass-bg, rgba(255, 180, 80, 0.14));
    border: 1px solid rgba(255, 180, 80, 0.45);
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--text-primary, inherit);
    backdrop-filter: blur(8px);
  }
  .workspace-missing-banner.svelte-6t5lyo code:where(.svelte-6t5lyo) {
    background: rgba(0, 0, 0, 0.25);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 11.5px;
  }
  .workspace-missing-text.svelte-6t5lyo { flex: 1; line-height: 1.35; }

  /* Window-cap notice — neutral themed glass chip. Uses the same --glass-*
     tokens as Modal.svelte so it follows barStyle (crystal/onyx/obsidian/ruby/
     sapphire/amethyst), the legacy terminal overlay, and custom themes — the
     "elements that change accordingly". No amber/warning tint (it's informational). */
  .window-limit-notice.svelte-6t5lyo {
    display: flex;
    align-items: center;
    padding: 8px 14px;
    margin: 6px 10px 0;
    background: var(--glass-elevated-bg);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    font-size: 12.5px;
    color: var(--text-secondary);
    -webkit-backdrop-filter: var(--glass-elevated-blur, blur(12px));
    backdrop-filter: var(--glass-elevated-blur, blur(12px));
  }
  .workspace-missing-pick.svelte-6t5lyo,
  .workspace-missing-dismiss.svelte-6t5lyo {
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: inherit;
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 12px;
  }
  .workspace-missing-pick.svelte-6t5lyo { font-weight: 600; }
  .workspace-missing-dismiss.svelte-6t5lyo { padding: 2px 8px; font-size: 15px; line-height: 1; }
  .workspace-missing-pick.svelte-6t5lyo:hover,
  .workspace-missing-dismiss.svelte-6t5lyo:hover { background: rgba(255, 255, 255, 0.12); }


  .shell.svelte-t9va5u {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px 20px 60px;
  }
  header.svelte-t9va5u {
    margin-bottom: 20px;
  }
  .row.svelte-t9va5u {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    flex-wrap: wrap;
  }
  .eyebrow.svelte-t9va5u {
    margin: 0 0 4px;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent, #f0a020);
  }
  h1.svelte-t9va5u {
    margin: 0;
    font-size: 22px;
    font-weight: 650;
  }
  .meta.svelte-t9va5u {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .meta.svelte-t9va5u span:where(.svelte-t9va5u) {
    font-size: 11px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: var(--text2, #9aa);
    white-space: nowrap;
  }
  .tabs.svelte-t9va5u {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 20px;
    overflow-x: auto;
  }
  .tab.svelte-t9va5u {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text2, #9aa);
    font: inherit;
    font-size: 13px;
    padding: 9px 14px;
    cursor: pointer;
    white-space: nowrap;
  }
  .tab.svelte-t9va5u:hover {
    color: var(--text, #eee);
  }
  .tab.active.svelte-t9va5u {
    color: var(--accent, #f0a020);
    border-bottom-color: var(--accent, #f0a020);
  }
  .panel.svelte-t9va5u {
    min-height: 200px;
  }
  .loading.svelte-t9va5u,
  .load-error.svelte-t9va5u {
    padding: 40px 0;
    font-size: 13px;
  }
  .load-error.svelte-t9va5u {
    color: #ff6b6b;
  }
  footer.svelte-t9va5u {
    margin-top: 40px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 11px;
    color: var(--text2, #9aa);
    text-align: center;
  }


  /* Ork tokens (public/tokens.css): warm near-black ground, cream ink, one
     ember accent. Same language as the desktop app's hero. */
  .shell.svelte-ivc7z3 {
    --ground: #0a0608;
    --ink: #f5f5f0;
    --muted: rgba(245, 245, 240, 0.58);
    --faint: rgba(245, 245, 240, 0.34);
    --edge: rgba(255, 235, 205, 0.11);
    --ember: #e07b39;
    --panel: rgba(22, 16, 15, 0.76);

    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
      radial-gradient(120% 92% at 50% 0%, #1b1211 0%, var(--ground) 58%),
      var(--ground);
    color: var(--ink);
    font-family:
      -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
  }

  .glow.svelte-ivc7z3 {
    position: absolute;
    inset: -26% -12% auto -32%;
    height: 82vh;
    background: radial-gradient(closest-side, rgba(224, 123, 57, 0.17), transparent 72%);
    filter: blur(30px);
    pointer-events: none;
  }

  .grain.svelte-ivc7z3 {
    position: absolute;
    inset: 0;
    opacity: 0.045;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, 0.7) 0.5px, transparent 0.5px);
    background-size: 3px 3px;
  }

  .card.svelte-ivc7z3 {
    position: relative;
    width: min(23.5rem, calc(100vw - 2.5rem));
    padding: 2.6rem 2rem 1.9rem;
    background: var(--panel);
    border: 1px solid var(--edge);
    border-radius: 18px;
    backdrop-filter: blur(20px) saturate(1.1);
    box-shadow:
      0 1px 0 0 rgba(255, 235, 205, 0.06) inset,
      0 32px 72px -22px rgba(0, 0, 0, 0.8);
  }

  .mark.svelte-ivc7z3 { width: 46px; height: 46px; object-fit: contain; margin-bottom: 1.25rem;
          filter: drop-shadow(0 4px 14px rgba(224, 123, 57, 0.24)); }

  h1.svelte-ivc7z3 { margin: 0 0 0.4rem; font-size: 1.3rem; font-weight: 600; letter-spacing: -0.015em; }
  .lede.svelte-ivc7z3 { margin: 0 0 1.4rem; color: var(--muted); font-size: 0.9rem; }

  .stack.svelte-ivc7z3 { display: flex; flex-direction: column; gap: 0.6rem; }

  .rule.svelte-ivc7z3 { display: flex; align-items: center; gap: 0.85rem; margin: 1.1rem 0;
          color: var(--faint); font-size: 0.75rem; }
  .rule.svelte-ivc7z3::before, .rule.svelte-ivc7z3::after { content: ''; flex: 1; height: 1px; background: var(--edge); }

  .btn.svelte-ivc7z3 {
    padding: 0.68rem 1rem; font: inherit; font-weight: 500; letter-spacing: -0.005em;
    color: var(--ink); background: rgba(245, 245, 240, 0.035);
    border: 1px solid var(--edge); border-radius: 10px; cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
  }
  .btn.svelte-ivc7z3:hover:not(:disabled) { background: rgba(245, 245, 240, 0.075); border-color: rgba(245, 245, 240, 0.2); }
  .btn.svelte-ivc7z3:active:not(:disabled) { transform: translateY(1px); }
  .btn.svelte-ivc7z3:disabled { opacity: 0.55; cursor: not-allowed; }
  .btn.svelte-ivc7z3:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
  .btn.primary.svelte-ivc7z3 {
    color: #1a0f08;
    background: linear-gradient(180deg, #f2e2c8, #e6d3b0);
    border-color: transparent; font-weight: 600;
  }
  .btn.primary.svelte-ivc7z3:hover:not(:disabled) { background: linear-gradient(180deg, #f8ead4, #eddbbc); }
  .btn.wide.svelte-ivc7z3 { width: 100%; margin-top: 1.1rem; }
  .btn.ghost.svelte-ivc7z3 { background: rgba(245, 245, 240, 0.03); }

  form.svelte-ivc7z3 { display: flex; flex-direction: column; }
  label.svelte-ivc7z3 { margin: 0 0 0.35rem; font-size: 0.8rem; color: rgba(245, 245, 240, 0.72); }
  input.svelte-ivc7z3 {
    margin-bottom: 0.95rem; padding: 0.62rem 0.75rem; font: inherit; font-size: 0.92rem;
    color: var(--ink); background: rgba(10, 6, 8, 0.62);
    border: 1px solid var(--edge); border-radius: 9px; outline: none;
    transition: border-color 140ms ease, box-shadow 140ms ease;
  }
  input.svelte-ivc7z3::placeholder { color: var(--faint); }
  input.svelte-ivc7z3:focus { border-color: var(--ember); box-shadow: 0 0 0 3px rgba(224, 123, 57, 0.16); }

  /* Policy meter: five ticks, filling as requirements are met. */
  .meter.svelte-ivc7z3 { display: flex; flex-wrap: wrap; gap: 0.3rem 0.7rem; margin: -0.55rem 0 1rem; }
  .tick.svelte-ivc7z3 { width: 5px; height: 5px; border-radius: 50%; background: var(--edge);
          align-self: center; transition: background 160ms ease; }
  .tick.on.svelte-ivc7z3 { background: var(--ember); }
  .tick-label.svelte-ivc7z3 { font-size: 0.68rem; color: var(--faint); transition: color 160ms ease; }
  .tick-label.on.svelte-ivc7z3 { color: rgba(245, 245, 240, 0.72); }

  .row.svelte-ivc7z3 {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin: -0.55rem 0 0.1rem;
  }

  .hint.svelte-ivc7z3 { margin: 1.3rem 0 0; font-size: 0.78rem; color: var(--faint); text-align: center; }
  .link.svelte-ivc7z3 {
    padding: 0; font: inherit; font-size: inherit; color: var(--ember);
    background: none; border: 0; cursor: pointer; text-decoration: underline;
    text-underline-offset: 2px;
  }

  .notice.svelte-ivc7z3 { margin: 0 0 1rem; padding: 0.6rem 0.75rem; font-size: 0.83rem;
            text-align: left; border-radius: 9px; }
  .notice.error.svelte-ivc7z3 { color: #ffb9ad; background: rgba(255, 122, 100, 0.1); border: 1px solid rgba(255, 122, 100, 0.32); }
  .notice.ok.svelte-ivc7z3 { color: #b8e6c8; background: rgba(80, 200, 120, 0.09); border: 1px solid rgba(80, 200, 120, 0.3); }

  @media (prefers-reduced-motion: reduce) {
    .btn.svelte-ivc7z3 { transition: none; }
    .btn.svelte-ivc7z3:active:not(:disabled) { transform: none; }
  }


  .gate.svelte-dy7gv7 {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: #0b0b0d;
  }

  .card.svelte-dy7gv7 {
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(20, 20, 24, 0.92);
    text-align: center;
  }

  form.svelte-dy7gv7 {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
  }

  label.svelte-dy7gv7 {
    font-size: 0.75rem;
    color: #a1a1aa;
  }

  input.svelte-dy7gv7 {
    padding: 9px 11px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #18181b;
    color: inherit;
    font: inherit;
    font-size: 0.875rem;
  }

  input.svelte-dy7gv7:focus-visible {
    outline: 2px solid #a1a1aa;
    outline-offset: 1px;
  }

  /* Password + Review in one row. The input keeps its own border and the button
     sits inside its right edge, so the pair still reads as a single field
     rather than two stacked widgets. */
  .pw-row.svelte-dy7gv7 {
    position: relative;
    display: flex;
    align-items: center;
  }

  .pw-row.svelte-dy7gv7 input:where(.svelte-dy7gv7) {
    flex: 1;
    min-width: 0;
    /* Room for the button, so a long password scrolls under it rather than
       beneath it. */
    padding-right: 74px;
  }

  .reveal.svelte-dy7gv7 {
    position: absolute;
    right: 6px;
    padding: 3px 9px;
    border: 0;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.07);
    color: #a1a1aa;
    font: inherit;
    font-size: 0.75rem;
    line-height: 1.4;
    cursor: pointer;
  }

  .reveal.svelte-dy7gv7:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.13);
    color: inherit;
  }

  .reveal.svelte-dy7gv7:focus-visible {
    outline: 2px solid #a1a1aa;
    outline-offset: 1px;
  }

  .reveal.svelte-dy7gv7:disabled {
    cursor: default;
    opacity: 0.6;
  }

  .rules.svelte-dy7gv7 {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin: 2px 0 4px;
  }

  .rule.svelte-dy7gv7 {
    font-size: 0.6875rem;
    color: #52525b;
  }

  .rule.ok.svelte-dy7gv7 {
    color: #4ade80;
  }

  .rule.svelte-dy7gv7::before {
    content: '○ ';
  }

  .rule.ok.svelte-dy7gv7::before {
    content: '● ';
  }

  .info.svelte-dy7gv7 {
    margin: 0;
    font-size: 0.8125rem;
    color: #4ade80;
  }

  /* (unused) .rule-row {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #52525b;
    font-size: 0.6875rem;
  }*/

  /* (unused) .rule-row::before,
  .rule-row::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
  }*/

  .switch.svelte-dy7gv7 {
    margin: 2px 0 0;
    font-size: 0.75rem;
    color: #71717a;
  }

  .link.svelte-dy7gv7 {
    background: none;
    border: none;
    padding: 0;
    color: #d4d4d8;
    font: inherit;
    font-size: 0.75rem;
    text-decoration: underline;
    cursor: pointer;
  }

  .mark.svelte-dy7gv7 {
    width: 44px;
    height: 44px;
  }

  h1.svelte-dy7gv7 {
    margin: 4px 0 0;
    font-size: 1.25rem;
    font-weight: 600;
  }

  .lede.svelte-dy7gv7 {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #a1a1aa;
  }

  .detail.svelte-dy7gv7 {
    margin: 0;
    font-size: 0.75rem;
    color: #71717a;
    word-break: break-word;
  }

  .error.svelte-dy7gv7 {
    margin: 0;
    font-size: 0.8125rem;
    color: #f87171;
  }

  .btn.svelte-dy7gv7 {
    margin-top: 6px;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
  }

  .btn.svelte-dy7gv7:disabled {
    opacity: 0.55;
    cursor: default;
  }

  .primary.svelte-dy7gv7 {
    width: 100%;
    background: #d4d4d8;
    color: #18181b;
    font-weight: 500;
  }

  .social.svelte-dy7gv7 {
    width: 100%;
    background: transparent;
    color: #e4e4e7;
  }

  .ghost.svelte-dy7gv7 {
    width: 100%;
    background: transparent;
    color: #a1a1aa;
  }

  .wide.svelte-dy7gv7 {
    width: 100%;
  }


  .perm-backdrop.svelte-xusxed {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: block;
    pointer-events: none;
  }

  .perm-dialog.svelte-xusxed {
    position: absolute;
    background: var(--popup-bg);
    -webkit-backdrop-filter: var(--popup-blur);
    backdrop-filter: var(--popup-blur);
    border: 1px solid var(--popup-border-tint, var(--glass-border));
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    min-width: 340px;
    min-height: 250px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    pointer-events: auto;
    animation: svelte-xusxed-scale-in 0.15s ease-out;
  }

  @keyframes svelte-xusxed-scale-in {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
  }

  .perm-body.svelte-xusxed {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* ── Edit/Write diff preview (aud13-20) ── */
  .perm-edit-preview.svelte-xusxed {
    margin-top: 10px;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.14));
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.18);
    overflow: hidden;
  }
  .perm-file-path.svelte-xusxed {
    font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 11px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    color: var(--text-secondary, #a0a098);
  }
  .perm-diff-stats.svelte-xusxed {
    display: flex;
    gap: 12px;
    padding: 6px 12px;
    font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 11px;
    border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
  }
  .perm-stat-removed.svelte-xusxed { color: var(--diff-removed-text, #f87171); }
  .perm-stat-added.svelte-xusxed { color: var(--diff-added-text, #4ade80); }
  .perm-diff.svelte-xusxed {
    max-height: 280px;
    overflow-y: auto;
    font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 11.5px;
    line-height: 1.45;
  }
  .perm-diff-section.svelte-xusxed { padding: 0; }
  .perm-diff-removed.svelte-xusxed { background: var(--diff-removed-bg, rgba(239, 68, 68, 0.08)); }
  .perm-diff-added.svelte-xusxed { background: var(--diff-added-bg, rgba(34, 197, 94, 0.08)); }
  .perm-diff-line.svelte-xusxed {
    padding: 1px 12px 1px 28px;
    white-space: pre-wrap;
    word-break: break-all;
    position: relative;
  }
  .perm-write-note.svelte-xusxed {
    padding: 8px 12px;
    font-size: 11.5px;
    color: var(--text-secondary, #a0a098);
  }
  .perm-write-details.svelte-xusxed { padding: 0 12px 8px; }
  .perm-write-details.svelte-xusxed summary:where(.svelte-xusxed) {
    cursor: pointer;
    color: var(--text-secondary, #a0a098);
    font-size: 11px;
    padding: 4px 0;
  }
  .perm-write-pre.svelte-xusxed {
    max-height: 220px;
    overflow: auto;
    background: rgba(0, 0, 0, 0.32);
    border-radius: 6px;
    padding: 10px 12px;
    font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 11px;
    white-space: pre-wrap;
    word-break: break-all;
  }
  .perm-cmd-pre.svelte-xusxed {
    background: rgba(0, 0, 0, 0.32);
    border-radius: 6px;
    padding: 10px 12px;
    font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 11.5px;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 200px;
    overflow: auto;
  }
  .perm-cmd-focus.svelte-xusxed {
    padding: 8px 12px 0;
    font-size: 11px;
    color: var(--text-secondary, #a0a098);
  }
  .perm-cmd-focus.svelte-xusxed code:where(.svelte-xusxed) {
    color: #facc15;
    background: rgba(250, 204, 21, 0.12);
    padding: 1px 6px;
    border-radius: 4px;
  }

  .perm-tool-row.svelte-xusxed {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 18px 12px;
    cursor: grab;
  }

  .perm-shield.svelte-xusxed {
    opacity: 0.5;
    flex-shrink: 0;
  }

  .perm-tool-name.svelte-xusxed {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: capitalize;
    flex: 1;
  }

  .perm-close.svelte-xusxed {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s;
    padding: 0;
    flex-shrink: 0;
  }

  .perm-close.svelte-xusxed svg {
    width: 14px;
    height: 14px;
  }

  .perm-close.svelte-xusxed:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
  }

  .perm-scroll.svelte-xusxed {
    overflow-y: auto;
    padding: 0 18px 12px;
  }

  .perm-desc.svelte-xusxed {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-bottom: 10px;
  }

  .perm-input.svelte-xusxed {
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    margin-bottom: 8px;
    max-height: 120px;
    overflow-y: auto;
  }

  .perm-input.svelte-xusxed code:where(.svelte-xusxed) {
    font-size: 12px;
    color: var(--text-secondary);
    word-break: break-all;
    line-height: 1.4;
  }

  .perm-reason.svelte-xusxed {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.3;
  }

  .perm-actions.svelte-xusxed {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 10px 18px 14px;
    border-top: 1px solid var(--popup-border-tint, var(--glass-border));
    flex-shrink: 0;
  }

  .perm-btn.svelte-xusxed {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
  }

  .perm-btn.deny.svelte-xusxed {
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
  }

  .perm-btn.deny.svelte-xusxed:hover {
    border-color: var(--glass-border-hover);
    color: var(--text-primary);
    background: var(--white-4, rgba(255, 255, 255, 0.04));
  }

  .perm-btn.approve.svelte-xusxed {
    border: 1px solid var(--popup-border-tint, rgba(255, 255, 255, 0.15));
    background: var(--white-10, rgba(255, 255, 255, 0.1));
    color: var(--text-primary);
  }

  .perm-btn.approve.svelte-xusxed:hover {
    background: var(--white-16, rgba(255, 255, 255, 0.16));
  }

  .perm-btn.always-approve.svelte-xusxed {
    border: 1px solid var(--accent-amber, #f97316);
    background: var(--accent-amber-bg, rgba(255, 200, 50, 0.08));
    color: var(--text-primary);
  }

  .perm-btn.always-approve.svelte-xusxed:hover {
    background: var(--accent-amber-bg-hover, rgba(255, 200, 50, 0.18));
  }


  .mobile-topbar.svelte-19vi6eh {
    display: none;
  }
  body.is-mobile .mobile-topbar.svelte-19vi6eh {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Sit at the top, below the iOS status bar. The status bar inset is
     * read from --safe-top which lib/viewport.ts sets on iOS. */
    position: fixed;
    top: var(--safe-top, 0px);
    left: 0;
    right: 0;
    height: var(--mobile-header-height, 56px);
    padding: 0 8px;
    z-index: var(--z-sticky, 10);
    background: var(--glass-default-bg);
    -webkit-backdrop-filter: blur(var(--mobile-blur-radius, 14px));
    backdrop-filter: blur(var(--mobile-blur-radius, 14px));
    border-bottom: 1px solid var(--glass-border);
  }

  .icon-btn.svelte-19vi6eh {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--mobile-tap-min, 44px);
    height: var(--mobile-tap-min, 44px);
    padding: 0;
    background: transparent;
    color: var(--text-primary, #fff);
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease;
  }

  .icon-btn.svelte-19vi6eh:active {
    background: var(--white-10, rgba(255, 255, 255, 0.10));
  }

  .ws-btn.svelte-19vi6eh {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    min-width: 0;
    height: 36px;
    padding: 0 10px;
    background: transparent;
    color: var(--text-primary, #fff);
    border: 0;
    border-radius: 10px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
    transition: background 0.15s ease;
  }

  .ws-btn.svelte-19vi6eh:active {
    background: var(--white-10, rgba(255, 255, 255, 0.10));
  }

  .ws-icon.svelte-19vi6eh {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--text-secondary, #aaa);
  }

  .ws-label.svelte-19vi6eh {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .status.svelte-19vi6eh {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: -4px;
    margin-right: -4px;
  }

  .dot.svelte-19vi6eh {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--text-muted, #666);
    box-shadow: 0 0 0 2px var(--glass-default-bg, rgba(0, 0, 0, 0.2));
    transition: background 0.3s ease;
  }

  .status.connected.svelte-19vi6eh .dot:where(.svelte-19vi6eh) {
    background: #4ade80;
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.5), 0 0 0 2px var(--glass-default-bg, rgba(0, 0, 0, 0.2));
  }

  .connect-btn.svelte-19vi6eh {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    background: var(--white-10, rgba(255, 255, 255, 0.10));
    color: var(--text-primary, #fff);
    border: 0;
    border-radius: 10px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s ease;
  }

  .connect-btn.svelte-19vi6eh:active {
    background: var(--white-15, rgba(255, 255, 255, 0.15));
  }

  .connect-btn.connected.svelte-19vi6eh {
    background: rgba(74, 222, 128, 0.18);
    color: #b5f1c8;
  }

  .connect-dot.svelte-19vi6eh {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted, #666);
    transition: background 0.3s ease;
  }

  .connect-btn.connected.svelte-19vi6eh .connect-dot:where(.svelte-19vi6eh) {
    background: #4ade80;
  }


  .update-banner.svelte-1bqrjb1 {
    align-items: center;
    background: var(--panel, #1e1e22);
    border: 1px solid var(--border, #333);
    border-radius: 6px;
    color: var(--text, #e8e8ea);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 8px 12px;
  }
  .update-text.svelte-1bqrjb1 { font-size: 12px; line-height: 1.4; }
  .update-notes.svelte-1bqrjb1 { color: var(--text-dim, #9a9aa2); display: block; margin-top: 2px; }
  .update-actions.svelte-1bqrjb1 { display: flex; flex-shrink: 0; gap: 8px; }
  .update-primary.svelte-1bqrjb1,
  .update-dismiss.svelte-1bqrjb1 {
    background: var(--accent, #4a7dd6);
    border: 0;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    padding: 4px 10px;
  }
  .update-dismiss.svelte-1bqrjb1 { background: transparent; color: var(--text-dim, #9a9aa2); }
  .update-primary.svelte-1bqrjb1:disabled,
  .update-dismiss.svelte-1bqrjb1:disabled { cursor: default; opacity: 0.6; }
  .update-banner-error.svelte-1bqrjb1 { border-color: #b4453c; }


  .top-action-bar.svelte-1u0g69x {
    position: fixed;
    top: calc(var(--tabbar-height, 32px) + var(--tabbar-top-gap, 20px));
    left: var(--sidebar-width, 283px);
    right: 0;
    background: transparent;
    height: var(--titlebar-height);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    border-bottom: none;
    flex-shrink: 0;
    user-select: none;
    z-index: var(--z-modal);
    border-radius: var(--radius-none);
    transition: left var(--transition-sidebar), background 0.3s;
  }

  .title-left.svelte-1u0g69x {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  /* Mobile-only hamburger that opens the slide-in sidebar drawer.
     Stays in the bar (doesn't replace the existing widget-drag-area
     which still owns the click target for the rest of the bar's width). */
  .hamburger-btn.svelte-1u0g69x {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0 8px 0 12px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-primary, inherit);
    border-radius: 6px;
    cursor: pointer;
    -webkit-app-region: no-drag;
    z-index: 2;
    transition: background 0.15s ease;
  }
  .hamburger-btn.svelte-1u0g69x:hover {
    background: var(--white-10, rgba(255, 255, 255, 0.08));
  }
  .hamburger-btn.svelte-1u0g69x:active {
    background: var(--white-15, rgba(255, 255, 255, 0.12));
  }

  /* Invisible drag handle fills the entire bar area */
  .widget-drag-area.svelte-1u0g69x {
    position: absolute;
    inset: 0;
    cursor: grab;
    z-index: 0;
  }

  .widget-drag-area.svelte-1u0g69x:active {
    cursor: grabbing;
  }

  /* ── Widget Buttons (compact icon + value) ── */
  .widget-buttons.svelte-1u0g69x {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: var(--space-1);
    z-index: 1;
    transition: none;
    padding: 8px 0;
    overflow: visible;
  }

  .widget-buttons.dragging.svelte-1u0g69x {
    opacity: 0.85;
  }


  .widget-button.svelte-1u0g69x {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: rgba(255, 255, 255, 0.45);
    font-size: var(--text-sm);
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    line-height: 1.4;
    -webkit-app-region: no-drag;
    position: relative;
    z-index: 2;
  }

  .widget-button.svelte-1u0g69x:hover {
    color: rgba(255, 255, 255, 0.9);
  }

  .widget-btn-icon.svelte-1u0g69x {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    opacity: 0.7;
  }

  .widget-btn-value.svelte-1u0g69x {
    font-size: var(--text-sm);
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .widget-button.has-count.svelte-1u0g69x .widget-btn-value:where(.svelte-1u0g69x) {
    color: var(--text-primary);
    font-weight: var(--weight-semibold);
  }

  /* Connect button specific */
  .connect-btn.connected.svelte-1u0g69x {
    color: var(--accent-blue);
  }

  .conn-dot.svelte-1u0g69x {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-red, #ef4444);
    flex-shrink: 0;
    transition: background 0.2s;
  }

  .conn-dot.connected.svelte-1u0g69x {
    background: var(--accent-blue);
    box-shadow: 0 0 6px rgba(59, 130, 246, 0.4);
  }

  /* TTS button specific */
  .tts-btn.svelte-1u0g69x .tts-muted:where(.svelte-1u0g69x) {
    opacity: 0.7;
  }

  /* When no TTS provider is functional (flag off, missing API key, etc.)
     gray out the toggle and prevent click feedback. The disabled attribute
     alone doesn't dim the widget-button class — we need an explicit class. */
  .tts-btn.tts-unavailable.svelte-1u0g69x {
    opacity: 0.45;
    cursor: not-allowed;
  }
  .tts-btn.tts-unavailable.svelte-1u0g69x:hover {
    background: transparent;
    border-color: transparent;
  }


  /* Shared dropdown for tasks & agents */
  .widget-dropdown-wrapper.svelte-1u0g69x {
    position: relative;
    z-index: 2;
  }

  .widget-dropdown.svelte-1u0g69x {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 14px;
    min-width: 220px;
    max-height: 240px;
    overflow-y: auto;
    background: var(--dropdown-bg);
    border-radius: 14px;
    -webkit-backdrop-filter: var(--dropdown-blur);
    backdrop-filter: var(--dropdown-blur);
    padding: 4px 0;
    z-index: var(--z-modal);
    animation: svelte-1u0g69x-slide-down 0.15s ease-out;
  }

  .dropdown-empty.svelte-1u0g69x {
    padding: 8px 12px;
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-align: center;
  }

  .dropdown-item.svelte-1u0g69x {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    font-size: var(--text-sm);
    border-radius: 14px;
    margin: 1px 4px;
    transition: background 0.15s;
  }

  .dropdown-item.svelte-1u0g69x:hover {
    background: var(--white-5);
    cursor: pointer;
  }

  /* Tasks */
  .todo-active.svelte-1u0g69x .widget-btn-value:where(.svelte-1u0g69x) {
    color: var(--text-primary);
    font-weight: var(--weight-semibold);
  }

  .task-status-dot.svelte-1u0g69x {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-muted);
    flex-shrink: 0;
  }

  .task-status-dot.in-progress.svelte-1u0g69x {
    background: var(--accent-primary);
    animation: svelte-1u0g69x-pulse-opacity 1s infinite;
  }

  .task-subject.svelte-1u0g69x {
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dropdown-item.in-progress.svelte-1u0g69x .task-subject:where(.svelte-1u0g69x) {
    color: var(--text-primary);
  }

  .task-status-dot.completed.svelte-1u0g69x {
    background: var(--accent-green);
  }

  .task-subject.completed.svelte-1u0g69x {
    text-decoration: line-through;
    opacity: 0.6;
  }

  .tasks-dropdown.svelte-1u0g69x {
    max-height: 240px;
    overflow-y: auto;
  }

  .notes-dropdown.svelte-1u0g69x {
    min-width: 260px;
    max-height: 320px;
    padding: 0;
  }

  /* Agents */
  .agents-live-dot.svelte-1u0g69x {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-green);
    animation: svelte-1u0g69x-pulse-opacity 1s infinite;
  }

  .agent-item.running.svelte-1u0g69x {
    border-left: 3px solid var(--agent-color);
    background: rgba(139, 92, 246, 0.04);
  }

  .agent-role.svelte-1u0g69x {
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-primary);
    flex-shrink: 0;
  }

  .agent-name.svelte-1u0g69x {
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .agent-status-dot.svelte-1u0g69x {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-green);
    margin-left: auto;
    flex-shrink: 0;
  }

  .agent-status-dot.running.svelte-1u0g69x {
    background: var(--agent-color);
    animation: svelte-1u0g69x-pulse-opacity 1s infinite;
  }

  .agent-status-dot.idle.svelte-1u0g69x {
    background: var(--accent-yellow);
  }

  .agent-item.idle.svelte-1u0g69x {
    border-left: 3px solid var(--accent-yellow);
    opacity: 0.7;
  }

  .agent-status-dot.error.svelte-1u0g69x { background: var(--accent-red); }
  .agent-status-dot.done.svelte-1u0g69x { background: var(--accent-green); opacity: 0.5; }

  @keyframes svelte-1u0g69x-slide-down {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes svelte-1u0g69x-pulse-opacity {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
  }


  .action-bar.svelte-13yzis {
    position: relative;
    flex-shrink: 0;
    padding: 8px 0 32px;
    z-index: var(--z-sticky);
    pointer-events: auto;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .action-bar-inner.svelte-13yzis {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 24px;
    pointer-events: auto;
  }

  /* Wrapper that anchors the live thinking indicator at the bottom of the
     action bar. The LiveActivityTicker inside uses its own .live-ticker CSS
     (margin-left 100px, max-width 720px) which expects to be a direct child
     of a full-width container — so we don't constrain the wrapper width
     here; we only add a small bottom margin so the indicator doesn't sit
     flush against the pill-bar above the input. */
  .live-ticker-anchor.svelte-13yzis {
    margin-bottom: 8px;
  }

  /* Wrapper for GitInfoBar below the input pill. The 4px top margin keeps
     the branch-status visually grouped with the pill above without
     colliding with the pill's bottom border. The max-width matches the
     input pill so the bar sits visually inside the same column. */
  .git-info-row.svelte-13yzis {
    max-width: 720px;
    margin: 4px auto 0;
    padding: 0 24px;
    pointer-events: auto;
  }

  /* Mobile: tighten side padding so the input doesn't waste viewport on
     a 390 px iPhone 11. Also pad for the home-indicator / safe-area
     so the input doesn't overlap the gesture bar. */
  @media (max-width: 480px) {
    .action-bar-inner.svelte-13yzis {
      padding: 0 12px 0 12px;
    }
  }

  /* Mobile shell — pin the action-bar to the bottom of the viewport and
   * lift it above the bottom-nav (handled in App.svelte's .main-content
   * padding-bottom). The sticky positioning here, combined with the
   * .main-content { overflow: hidden } parent, keeps the composer in
   * the visible area when iOS Safari adjusts the viewport for the
   * keyboard. The fallback is: if the keyboard pushes the layout off,
   * the user can still see the textarea by scrolling. */
  @media (max-width: 480px) {
    .action-bar.svelte-13yzis {
      position: sticky;
      bottom: 0;
      z-index: var(--z-sticky);
      background: var(--glass-default-bg);
      -webkit-backdrop-filter: blur(var(--mobile-blur-radius, 14px));
      backdrop-filter: blur(var(--mobile-blur-radius, 14px));
      border-top: 1px solid var(--glass-border);
      padding: 8px 0 calc(env(safe-area-inset-bottom, 0px) + 8px);
    }
  }

  .pill-bar-container.svelte-13yzis {
    position: relative;
    margin-bottom: 8px;
    height: 40px;
    overflow: visible;
  }

  /* Phone: the pill row is an absolutely-positioned drag surface on desktop
   * (`.pill-row` is `position: absolute`, so it shrink-to-fits its content).
   * At 414px the five pills want 510px — 110px of which escaped the
   * container and blew out `.main-content`'s scroll width, which clips at
   * the viewport edge. The Effect/Persona pills, the composer's send button
   * and the Tools rail were all unreachable on a phone.
   *
   * On phone the row goes back into flow and scrolls sideways inside its
   * own box, so every pill stays reachable without widening the page. */
  @media (max-width: 480px) {
    .pill-bar-container.svelte-13yzis {
      display: flex;
      align-items: center;
      overflow: hidden;
    }
    .pill-row.svelte-13yzis {
      position: static;
      top: auto;
      transform: none;
      width: 100%;
      min-width: 0;
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
    .pill-row.svelte-13yzis::-webkit-scrollbar {
      display: none;
    }
    /* Drag-to-reposition is a desktop mouse affordance. On touch it would
     * also sit under the pills as a full-width overlay. */
    .pill-drag-area.svelte-13yzis {
      display: none;
    }
  }

  .pill-drag-area.svelte-13yzis {
    position: absolute;
    inset: 0;
    cursor: grab;
    z-index: 0;
  }

  .pill-drag-area.svelte-13yzis:active {
    cursor: grabbing;
  }

  .pill-row.svelte-13yzis {
    display: flex;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    gap: 0;
    z-index: 1;
    transition: none;
  }

  .pill-row.dragging.svelte-13yzis {
    opacity: 0.85;
  }

  /* ─── Attachment Chips ─────────────────────── */
  .chips-row.svelte-13yzis {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 0 4px;
    margin-bottom: 6px;
    overflow-x: auto;
    max-height: 32px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
  }

  .chips-row.svelte-13yzis::-webkit-scrollbar {
    height: 3px;
  }

  .chips-row.svelte-13yzis::-webkit-scrollbar-track {
    background: transparent;
  }

  .chips-row.svelte-13yzis::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
  }

  .chip.svelte-13yzis {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 6px 3px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 12px;
    color: var(--text-secondary);
    max-width: 220px;
    flex-shrink: 0;
    animation: svelte-13yzis-chip-in 0.2s ease;
  }

  .chip-clickable.svelte-13yzis {
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
  }

  .chip-clickable.svelte-13yzis:hover {
    background: var(--popup-bg, rgba(20, 18, 16, 0.95));
    border-color: var(--popup-border-tint, rgba(255, 255, 255, 0.15));
    color: rgba(255, 255, 255, 0.9);
  }

  .chip.svelte-13yzis svg:where(.svelte-13yzis) {
    flex-shrink: 0;
    opacity: 0.7;
  }

  .chip-paste.svelte-13yzis {
    background: var(--dropdown-bg, rgba(14, 14, 16, 0.65));
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.45);
  }

  .action-bar.svelte-13yzis:not(.bar-black):not(.bar-crimson):not(.bar-navy) .chip-paste:where(.svelte-13yzis) {
    border-color: rgba(255, 255, 255, 0.12);
  }

  /* (unused) .action-bar.bar-crimson .chip-paste {
    border-color: var(--glass-border);
  }*/

  /* (unused) .action-bar.bar-navy .chip-paste {
    border-color: rgba(60, 90, 180, 0.15);
  }*/

  /* (unused) .action-bar.bar-black .chip-paste {
    border-color: rgba(255, 255, 255, 0.08);
  }*/

  .chip-paste.svelte-13yzis svg:where(.svelte-13yzis) {
    opacity: 0.7;
  }

  .chip-folder.svelte-13yzis {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.2);
    color: var(--accent-blue, #6ba3f7);
  }

  .chip-label.svelte-13yzis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: "SF Mono", "Monaco", "Cascadia Code", monospace;
    font-size: 11px;
  }

  .chip-remove.svelte-13yzis {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
    border-radius: 50%;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: all 0.15s;
  }

  .chip-remove.svelte-13yzis:hover {
    background: rgba(239, 68, 68, 0.2);
    color: var(--accent-red, #ef4444);
  }

  @keyframes svelte-13yzis-chip-in {
    from { opacity: 0; transform: scale(0.9) translateY(4px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
  }

  /* ─── Input Area ───────────────────────────── */
  .input-wrapper.svelte-13yzis {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--glass-subtle-bg);
    -webkit-backdrop-filter: var(--glass-subtle-blur);
    backdrop-filter: var(--glass-subtle-blur);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 20px;
    padding: 8px 14px;
    margin-left: 0;
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .input-top-row.svelte-13yzis {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .input-wrapper.svelte-13yzis:focus-within {
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: none;
  }

  .input-wrapper.drag-over.svelte-13yzis {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px var(--accent-primary-glow);
  }

  .message-input.svelte-13yzis {
    flex: 1;
    position: relative;
    z-index: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    resize: none;
    min-height: 22px;
    max-height: 150px;
    margin-top: 0;
    /* Without this the textarea's floor is its placeholder's intrinsic
     * width, so a long placeholder pushed the field wider than the phone
     * viewport and the send button off the right edge. */
    min-width: 0;
  }

  .message-input.svelte-13yzis::placeholder { color: var(--text-muted); }
  .message-input.svelte-13yzis:disabled { opacity: 0.5; }

  .textarea-slot.svelte-13yzis {
    position: relative;
    flex: 1;
    display: flex;
    min-width: 0;
  }

  /* Inline ghost-completion overlay (Claude Code-style): mirrors the textarea's
     typed text (transparent) and appends the suggested suffix in a lighter hue,
     layered behind the transparent textarea. No padding/border here either — the
     global reset gives the textarea none, so inset:0 aligns text pixel-for-pixel. */
  .ghost-mirror.svelte-13yzis {
    position: absolute;
    inset: 0;
    pointer-events: none;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    overflow: hidden;
    z-index: 0;
  }
  .ghost-typed.svelte-13yzis { color: transparent; }
  .ghost-suffix.svelte-13yzis { color: var(--text-muted); }

  .input-actions.svelte-13yzis {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
  }

  .attach-btn.svelte-13yzis {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
    transition: color 0.15s;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
  }

  .attach-btn.svelte-13yzis:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }

  .attach-plus.svelte-13yzis {
    font-size: 18px;
    font-weight: 300;
    line-height: 1;
    user-select: none;
  }

  .send-btn.svelte-13yzis {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
    transition: color 0.15s;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
  }

  .send-btn.has-text.svelte-13yzis {
    color: rgba(255, 255, 255, 0.95);
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.25));
  }

  .send-btn.has-text.svelte-13yzis:hover {
    color: var(--text-primary);
    background: transparent;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.4));
  }

  .send-btn.svelte-13yzis:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }


  /* Both states live in the same stacking layer as the other right-edge
     affordances. Below --z-modal so an actual dialog still covers the bar. */
  .tools-tab.svelte-2xr2i9 {
    position: fixed;
    right: var(--window-edge-gutter, 0px);
    top: 50%;
    transform: translateY(-50%);
    z-index: var(--z-dropdown);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    /* Square-ish tab: just enough to hold the glyph and the vertical label.
       The width is the shared token rather than a consequence of the padding,
       because `--tools-tab-clearance` is derived from it — if the tab were
       free to grow, content clearing it would silently stop clearing it. */
    width: var(--tools-tab-width, 33px);
    box-sizing: border-box;
    padding: 14px 7px;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
    /* Square off the two corners that touch the window edge, so the tab reads
       as docked to it rather than floating. */
    border-right: none;
    border-radius: 10px 0 0 10px;
    background: var(--popup-bg);
    -webkit-backdrop-filter: var(--popup-blur);
    backdrop-filter: var(--popup-blur);
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    /* This element paints over the window's own chrome. Without an explicit
       `no-drag` the pixels it covers stop being a window-drag region — see
       OverlayPopover.svelte:57, which sets the same thing on its full-bleed
       surface. A docked overlay that omits it makes the window unmovable
       wherever it overlaps. */
    -webkit-app-region: no-drag;
  }

  /* Windows keeps a live WS_THICKFRAME resize target in the outermost pixels
     of a frameless window. Docked to `right: 0`, the tab sat exactly on top of
     it and the window stopped resizing from the right edge. */
  body.platform-windows {
    --window-edge-gutter: 5px;
  }

  .tools-tab.svelte-2xr2i9:hover {
    color: var(--text-primary);
    background: var(--white-8, rgba(255, 255, 255, 0.08));
  }

  /* The shared popup is showing this session somewhere in the app. */
  .tools-tab.live.svelte-2xr2i9 {
    color: var(--text-primary);
    background: var(--white-8, rgba(255, 255, 255, 0.08));
  }

  .tools-tab.svelte-2xr2i9 svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }

  .tab-label.svelte-2xr2i9 {
    writing-mode: vertical-rl;
    font-size: 11px;
    letter-spacing: 0.04em;
  }

  /* Docked, not floating: full height from below the tab bar to the window
     bottom. No drag and no resize — the old overlay's positioning maths
     (makeDraggable/makeResizable) only existed to place a free-floating panel,
     and it is all gone with them. */
  .tools-drawer.svelte-2xr2i9 {
    position: fixed;
    /* Clears the frameless titlebar AND the session tab bar, so the drawer
       never covers the tabs you switch sessions with. Shares the token the
       content region uses, so the two cannot drift apart. */
    top: var(--content-top, 80px);
    right: var(--window-edge-gutter, 0px);
    /* MobileBottomNav sits at z-modal and would cover the footer. */
    bottom: var(--mobile-nav-clearance, 0px);
    width: min(460px, 90vw);
    z-index: var(--z-dropdown);
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--popup-border-tint, var(--glass-border));
    background: var(--popup-bg);
    -webkit-backdrop-filter: var(--popup-blur);
    backdrop-filter: var(--popup-blur);
    box-shadow: -12px 0 32px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    /* Same reason as .tools-tab above: the drawer is opaque and fixed, so any
       window-drag region underneath it becomes ungrabbable while it is open. */
    -webkit-app-region: no-drag;
  }

  .tools-header.svelte-2xr2i9 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--popup-border-tint, var(--glass-border));
    flex-shrink: 0;
  }

  .tool-picker.svelte-2xr2i9 {
    position: relative;
    min-width: 0;
  }

  .tool-btn.svelte-2xr2i9 {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 220px;
    padding: 4px 8px;
    border: 1px solid var(--popup-border-tint, var(--glass-border));
    border-radius: 6px;
    background: var(--white-4, rgba(255, 255, 255, 0.04));
    color: var(--text-primary);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
  }

  .tool-btn.svelte-2xr2i9:hover {
    background: var(--white-8, rgba(255, 255, 255, 0.08));
  }

  .tool-btn-icon.svelte-2xr2i9 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    color: var(--text-muted);
  }

  .tool-btn-icon.svelte-2xr2i9 svg {
    width: 13px;
    height: 13px;
  }

  .tool-btn-name.svelte-2xr2i9 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tool-btn.svelte-2xr2i9 svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    color: var(--text-muted);
  }

  .tool-menu.svelte-2xr2i9 {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: var(--z-modal);
    max-height: 340px;
    min-width: 220px;
    overflow-y: auto;
    padding: 4px;
    background: var(--popup-bg);
    -webkit-backdrop-filter: var(--popup-blur);
    backdrop-filter: var(--popup-blur);
    border: 1px solid var(--popup-border-tint, var(--glass-border));
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  }

  .tool-option.svelte-2xr2i9 {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    border: none;
    border-radius: 4px;
    background: none;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 11.5px;
    text-align: left;
    cursor: pointer;
  }

  .tool-option.svelte-2xr2i9:hover {
    background: var(--white-8, rgba(255, 255, 255, 0.08));
    color: var(--text-primary);
  }

  .tool-option.current.svelte-2xr2i9 {
    color: var(--text-primary);
    font-weight: 500;
  }

  .tool-option-icon.svelte-2xr2i9 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--text-muted);
  }

  .tool-option-icon.svelte-2xr2i9 svg {
    width: 13px;
    height: 13px;
  }

  .tool-option-name.svelte-2xr2i9 {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tool-option-count.svelte-2xr2i9 {
    font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 10px;
    color: var(--text-muted);
  }

  .tool-menu-empty.svelte-2xr2i9 {
    margin: 0;
    padding: 8px;
    font-size: 11px;
    color: var(--text-muted);
  }

  .tools-totals.svelte-2xr2i9 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 11px;
  }

  .tot-add.svelte-2xr2i9 { color: var(--diff-added-text, #4ade80); }
  .tot-rem.svelte-2xr2i9 { color: var(--diff-removed-text, #f87171); }
  .tot-files.svelte-2xr2i9 { color: var(--text-muted); }

  .tools-actions.svelte-2xr2i9 {
    margin-left: auto;
    display: flex;
    gap: 2px;
  }

  .tools-btn.svelte-2xr2i9 {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s;
    padding: 0;
    flex-shrink: 0;
  }

  .tools-btn.svelte-2xr2i9:hover {
    background: var(--white-8, rgba(255, 255, 255, 0.08));
    color: var(--text-primary);
  }

  .tools-btn.live.svelte-2xr2i9 {
    color: var(--text-primary);
  }

  .tools-btn.svelte-2xr2i9 svg {
    width: 14px;
    height: 14px;
  }

  .tools-error.svelte-2xr2i9 {
    padding: 8px 14px;
    border-top: 1px solid var(--popup-border-tint, var(--glass-border));
    background: rgba(239, 68, 68, 0.08);
    flex-shrink: 0;
  }

  .tools-error-label.svelte-2xr2i9 {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #fca5a5;
  }

  .tools-error-detail.svelte-2xr2i9 {
    display: block;
    font-size: 10.5px;
    color: var(--text-muted);
    word-break: break-word;
  }

  .tools-footer.svelte-2xr2i9 {
    padding: 8px 14px;
    border-top: 1px solid var(--popup-border-tint, var(--glass-border));
    font-size: 10.5px;
    color: var(--text-muted);
    line-height: 1.4;
    flex-shrink: 0;
  }

  .tools-truncated.svelte-2xr2i9 {
    display: block;
    color: var(--accent-amber, #f97316);
    margin-bottom: 3px;
  }


  .bottom-nav.svelte-1chz269 {
    display: none;
  }
  body.is-mobile .bottom-nav.svelte-1chz269 {
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--mobile-tabbar-height, 64px) + var(--safe-bottom, 0px));
    padding-bottom: var(--safe-bottom, 0px);
    z-index: var(--z-sticky, 10);
    background: var(--glass-default-bg);
    -webkit-backdrop-filter: blur(var(--mobile-blur-radius, 14px));
    backdrop-filter: blur(var(--mobile-blur-radius, 14px));
    border-top: 1px solid var(--glass-border);
    box-shadow: 0 -1px 0 var(--white-5), 0 -8px 24px rgba(0, 0, 0, 0.18);
    z-index: var(--z-modal, 200);
    animation: svelte-1chz269-bottom-nav-in 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }

  @keyframes svelte-1chz269-bottom-nav-in {
    from {
      transform: translateY(100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .bottom-nav.hidden.svelte-1chz269 {
    display: none !important;
  }

  .nav-item.svelte-1chz269 {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: var(--mobile-tap-min, 44px);
    min-width: var(--mobile-tap-min, 44px);
    padding: 4px 4px calc(var(--safe-bottom, 0px) / 2);
    background: transparent;
    border: 0;
    color: var(--text-secondary, #aaa);
    font: inherit;
    font-size: 10.5px;
    line-height: 1;
    letter-spacing: 0.01em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 160ms ease, transform 160ms ease;
    position: relative;
  }

  .nav-item.svelte-1chz269:active {
    transform: scale(0.94);
  }

  .nav-item.active.svelte-1chz269 {
    color: var(--text-primary, #fff);
  }

  .nav-item.active.svelte-1chz269::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 22px;
    border-radius: 999px;
    background: var(--white-10, rgba(255, 255, 255, 0.10));
    z-index: -1;
    transition: opacity 160ms ease, transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .nav-icon.svelte-1chz269 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 22px;
    color: inherit;
  }

  .nav-label.svelte-1chz269 {
    font-weight: 500;
    letter-spacing: 0.02em;
  }


  .hub-root.svelte-7j5ilo {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    color: var(--text-primary, rgba(255, 255, 255, 0.9));
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    overflow: hidden;
  }

  .hub-root.svelte-7j5ilo::before {
    content: '';
    position: fixed;
    inset: 0;
    background: var(--app-bg-image, linear-gradient(to bottom, rgba(38, 38, 40, 1), rgba(22, 22, 24, 1)));
    background-size: cover;
    background-position: center;
    filter: blur(var(--app-bg-blur, 6px)) brightness(var(--app-bg-brightness, 1));
    z-index: -2;
    pointer-events: none;
  }

  .hub-root.svelte-7j5ilo::after {
    content: '';
    position: fixed;
    inset: 0;
    background: var(--popup-bg, rgba(20, 18, 16, 0.75));
    backdrop-filter: var(--popup-blur, blur(24px));
    -webkit-backdrop-filter: var(--popup-blur, blur(24px));
    z-index: -1;
    pointer-events: none;
  }

  /* ─── Header ────────────────────────────────── */
  .hub-header.svelte-7j5ilo {
    display: flex;
    align-items: center;
    height: 38px;
    padding: 0 12px;
    border-bottom: 1px solid var(--popup-border-tint, var(--glass-border, rgba(255, 255, 255, 0.08)));
    flex-shrink: 0;
    -webkit-app-region: drag;
    user-select: none;
  }

  .hub-title.svelte-7j5ilo {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--text-primary, rgba(255, 255, 255, 0.9));
  }

  .hub-subtitle.svelte-7j5ilo {
    font-size: 11px;
    color: var(--text-muted, rgba(255, 255, 255, 0.35));
    margin-left: 8px;
  }

  .header-spacer.svelte-7j5ilo {
    flex: 1;
    -webkit-app-region: drag;
  }

  /* macOS traffic lights */
  .mac-controls.svelte-7j5ilo {
    display: flex;
    gap: 8px;
    -webkit-app-region: no-drag;
  }

  .mac-btn.svelte-7j5ilo {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: opacity 0.15s;
  }

  .mac-btn.svelte-7j5ilo:hover { opacity: 0.85; }
  .mac-btn.close.svelte-7j5ilo { background: #ff5f57; }
  .mac-btn.minimize.svelte-7j5ilo { background: #febc2e; }
  .mac-btn.maximize.svelte-7j5ilo { background: #28c840; }

  /* Windows controls */
  .win-controls.svelte-7j5ilo {
    display: flex;
    height: 100%;
    -webkit-app-region: no-drag;
  }

  .win-btn.svelte-7j5ilo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 100%;
    border: none;
    background: transparent;
    color: var(--text-muted, rgba(255, 255, 255, 0.5));
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
  }

  .win-btn.svelte-7j5ilo:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary, rgba(255, 255, 255, 0.9));
  }

  .win-btn.close-btn.svelte-7j5ilo:hover {
    background: #e81123;
    color: white;
  }

  /* ─── Tab bar ───────────────────────────────── */
  .hub-tabs.svelte-7j5ilo {
    display: flex;
    height: 36px;
    border-bottom: 1px solid var(--popup-border-tint, var(--glass-border, rgba(255, 255, 255, 0.08)));
    padding: 0 8px;
    overflow-x: auto;
    flex-shrink: 0;
    gap: 2px;
  }

  .hub-tab.svelte-7j5ilo {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 12px;
    height: 100%;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text-muted, rgba(255, 255, 255, 0.4));
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    border-radius: 4px 4px 0 0;
  }

  .hub-tab.svelte-7j5ilo:hover {
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    background: rgba(255, 255, 255, 0.04);
  }

  .hub-tab.active.svelte-7j5ilo {
    color: var(--text-primary, rgba(255, 255, 255, 0.9));
    border-bottom-color: var(--accent, #6366f1);
  }

  .tab-icon.svelte-7j5ilo {
    font-size: 13px;
    line-height: 1;
  }

  .tab-label.svelte-7j5ilo {
    font-weight: 500;
  }

  /* ─── Content ───────────────────────────────── */
  .hub-content.svelte-7j5ilo {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .narrow-content.svelte-7j5ilo {
    padding: 0 25%;
  }

  /* Kept-alive tab panels: mounted always, visible only when active.
     `display: none` (not visibility/opacity) so offscreen WebGL and
     ResizeObserver in the brain map correctly report a zero-size box and
     stop their per-frame work. */
  .hub-tab-panel.svelte-7j5ilo {
    display: none;
  }

  .hub-tab-panel-active.svelte-7j5ilo {
    display: block;
  }

  .settings-content.svelte-7j5ilo {
    padding: 0 16.5%;
  }

  .placeholder.svelte-7j5ilo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted, rgba(255, 255, 255, 0.3));
    font-size: 14px;
  }


  .tool-popup-host.svelte-1x2nz8 {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: rgba(20, 18, 16, 0.92);
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    border-radius: 12px;
    overflow: hidden;
  }

  .popup-header.svelte-1x2nz8 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
  }

  .popup-icon.svelte-1x2nz8 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }

  .popup-icon.svelte-1x2nz8 svg {
    width: 16px;
    height: 16px;
  }

  .popup-title.svelte-1x2nz8 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
  }

  .popup-summary.svelte-1x2nz8 {
    font-size: 12px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 300px;
  }

  .popup-duration.svelte-1x2nz8 {
    font-size: 11px;
    color: var(--text-muted);
  }

  .popup-close.svelte-1x2nz8 {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s;
    padding: 0;
    flex-shrink: 0;
    margin-left: auto;
  }

  .popup-close.svelte-1x2nz8 svg {
    width: 14px;
    height: 14px;
  }

  .popup-close.svelte-1x2nz8:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
  }

  .popup-body.svelte-1x2nz8 {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
  }

  .popup-body.svelte-1x2nz8::-webkit-scrollbar {
    width: 4px;
  }

  .popup-body.svelte-1x2nz8::-webkit-scrollbar-track {
    background: transparent;
  }

  .popup-body.svelte-1x2nz8::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
  }


  .changes-popup.svelte-y8zbyn {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: var(--popup-bg);
    -webkit-backdrop-filter: var(--popup-blur);
    backdrop-filter: var(--popup-blur);
    overflow: hidden;
  }

  .changes-header.svelte-y8zbyn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--popup-border-tint, var(--glass-border));
    flex-shrink: 0;
  }

  .session-picker.svelte-y8zbyn {
    position: relative;
    min-width: 0;
  }

  .session-btn.svelte-y8zbyn {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 240px;
    padding: 4px 8px;
    border: 1px solid var(--popup-border-tint, var(--glass-border));
    border-radius: 6px;
    background: var(--white-4, rgba(255, 255, 255, 0.04));
    color: var(--text-primary);
    font-family: inherit;
    font-size: 11.5px;
    cursor: pointer;
  }

  .session-btn.svelte-y8zbyn:hover {
    background: var(--white-8, rgba(255, 255, 255, 0.08));
  }

  .session-btn.svelte-y8zbyn svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    color: var(--text-muted);
  }

  .session-name.svelte-y8zbyn {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .session-menu.svelte-y8zbyn {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: var(--z-dropdown);
    max-height: 320px;
    min-width: 260px;
    overflow-y: auto;
    padding: 4px;
    background: var(--popup-bg);
    -webkit-backdrop-filter: var(--popup-blur);
    backdrop-filter: var(--popup-blur);
    border: 1px solid var(--popup-border-tint, var(--glass-border));
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  }

  .session-option.svelte-y8zbyn {
    display: block;
    width: 100%;
    padding: 6px 8px;
    border: none;
    border-radius: 4px;
    background: none;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 11.5px;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .session-option.svelte-y8zbyn:hover {
    background: var(--white-8, rgba(255, 255, 255, 0.08));
    color: var(--text-primary);
  }

  .session-option.current.svelte-y8zbyn {
    color: var(--text-primary);
    font-weight: 500;
  }

  .session-empty.svelte-y8zbyn {
    margin: 0;
    padding: 8px;
    font-size: 11px;
    color: var(--text-muted);
  }

  .changes-totals.svelte-y8zbyn {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 11px;
  }

  .tot-add.svelte-y8zbyn {
    color: var(--diff-added-text, #4ade80);
  }

  .tot-rem.svelte-y8zbyn {
    color: var(--diff-removed-text, #f87171);
  }

  .tot-files.svelte-y8zbyn {
    color: var(--text-muted);
  }

  .changes-actions.svelte-y8zbyn {
    margin-left: auto;
    display: flex;
    gap: 2px;
  }

  .changes-btn.svelte-y8zbyn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s;
    padding: 0;
    flex-shrink: 0;
  }

  .changes-btn.svelte-y8zbyn:hover {
    background: var(--white-8, rgba(255, 255, 255, 0.08));
    color: var(--text-primary);
  }

  .changes-btn.svelte-y8zbyn svg {
    width: 14px;
    height: 14px;
  }

  .changes-footer.svelte-y8zbyn {
    padding: 8px 14px;
    border-top: 1px solid var(--popup-border-tint, var(--glass-border));
    font-size: 10.5px;
    color: var(--text-muted);
    line-height: 1.4;
    flex-shrink: 0;
  }

  .changes-truncated.svelte-y8zbyn {
    display: block;
    color: var(--accent-amber, #f97316);
    margin-bottom: 3px;
  }


  .task-popup-host.svelte-17meyod {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: rgba(20, 18, 16, 0.92);
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    border-radius: 12px;
    overflow: hidden;
  }

  .popup-header.svelte-17meyod {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
    gap: 8px;
  }

  .header-right.svelte-17meyod {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .save-indicator.svelte-17meyod {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 7px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
    transition: all 0.2s;
    line-height: 1;
  }

  .save-indicator[data-state='saving'].svelte-17meyod {
    background: rgba(59, 130, 246, 0.15);
    color: var(--accent-blue);
  }

  .save-indicator[data-state='saved'].svelte-17meyod {
    background: rgba(34, 197, 94, 0.15);
    color: var(--accent-green);
  }

  .save-indicator[data-state='error'].svelte-17meyod {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
  }

  .status-badge.svelte-17meyod {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
  }

  .status-glyph.svelte-17meyod { font-size: 14px; line-height: 1; }
  .status-text.svelte-17meyod { line-height: 1; }

  .popup-close.svelte-17meyod {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s;
    padding: 0;
    flex-shrink: 0;
  }

  .popup-close.svelte-17meyod svg {
    width: 14px;
    height: 14px;
  }

  .popup-close.svelte-17meyod:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
  }

  .popup-body.svelte-17meyod {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .popup-body.svelte-17meyod::-webkit-scrollbar { width: 4px; }
  .popup-body.svelte-17meyod::-webkit-scrollbar-track { background: transparent; }
  .popup-body.svelte-17meyod::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
  }

  .field-block.svelte-17meyod {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .field-label.svelte-17meyod {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    user-select: none;
  }

  /* Read-only surface for Scheduled entries — deliberately input-shaped so the
     read-only and editable popups don't read as different dialogs. */
  .cron-subject.svelte-17meyod {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.35;
    padding: 8px 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border);
    word-wrap: break-word;
    overflow-wrap: break-word;
    user-select: text;
    cursor: default;
  }

  .cron-prompt.svelte-17meyod {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    padding: 8px 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border);
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-height: 180px;
    overflow-y: auto;
    user-select: text;
    cursor: default;
  }

  .task-subject-input.svelte-17meyod {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.35;
    word-wrap: break-word;
    overflow-wrap: break-word;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 6px 8px;
    margin: 0;
    resize: none;
    font-family: inherit;
    width: 100%;
    transition: all 0.15s;
    min-height: 32px;
  }

  .task-subject-input.svelte-17meyod:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
  }

  .task-subject-input.svelte-17meyod:focus {
    outline: none;
    background: rgba(59, 130, 246, 0.06);
    border-color: var(--accent-blue);
  }

  .task-subject-input.done.svelte-17meyod {
    text-decoration: line-through;
    opacity: 0.7;
  }

  .task-input.svelte-17meyod {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 6px 8px;
    color: var(--text-secondary);
    font-size: 13px;
    font-family: inherit;
    width: 100%;
    transition: all 0.15s;
  }

  .task-input.svelte-17meyod:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
  }

  .task-input.svelte-17meyod:focus {
    outline: none;
    background: rgba(59, 130, 246, 0.06);
    border-color: var(--accent-blue);
    color: var(--text-primary);
  }

  .active-form-input.svelte-17meyod {
    font-size: 12px;
  }

  .task-description-input.svelte-17meyod {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.55;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 8px 10px;
    margin: 0;
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
    width: 100%;
    transition: all 0.15s;
  }

  .task-description-input.svelte-17meyod:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
  }

  .task-description-input.svelte-17meyod:focus {
    outline: none;
    background: rgba(59, 130, 246, 0.06);
    border-color: var(--accent-blue);
    color: var(--text-primary);
  }

  .task-description-input.svelte-17meyod::placeholder,
  .task-subject-input.svelte-17meyod::placeholder,
  .task-input.svelte-17meyod::placeholder {
    color: var(--text-muted);
    opacity: 0.5;
  }

  .hint-row.svelte-17meyod {
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid var(--glass-border);
  }

  .hint.svelte-17meyod {
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0.7;
    letter-spacing: 0.2px;
  }

  .meta-grid.svelte-17meyod {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--glass-border, rgba(255, 255, 255, 0.08));
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    border-radius: 8px;
    overflow: hidden;
    margin-top: 4px;
  }

  .meta-cell.svelte-17meyod {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    background: rgba(14, 14, 16, 0.4);
  }

  .meta-label.svelte-17meyod {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .meta-value.svelte-17meyod {
    font-size: 12px;
    color: var(--text-secondary);
    word-break: break-all;
  }

  .meta-value.mono.svelte-17meyod {
    font-family: 'SF Mono', 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
  }

  .meta-rel.svelte-17meyod {
    color: var(--text-muted);
    opacity: 0.7;
    margin-left: 4px;
  }

  .popup-empty.svelte-17meyod {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    font-size: 13px;
  }

  @media (max-width: 480px) {
    .meta-grid.svelte-17meyod { grid-template-columns: 1fr; }
  }


  .overlay-root.svelte-li2qrj {
    width: 100vw;
    height: 100vh;
    /* BLEED padding insets the pill from the window edge so its drop-shadow has
       room to fade (a pill-sized window clips the shadow to a hard square). */
    padding: 14px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    -webkit-app-region: no-drag;
    overflow: hidden;
  }

  .pill.svelte-li2qrj {
    -webkit-app-region: drag; /* whole pill draggable; buttons opt out below */
    user-select: none;
    width: 108px;
    min-width: 108px;
    height: 36px;
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* logo dead-center; grip & orb symmetric */
    align-items: center;
    justify-items: center;
    padding: 0 12px;
    box-sizing: border-box;
    /* Chrome is pinned, NOT themed. --popup-bg/--glass-border are flat OPAQUE
       values under the terminal themes (phosphor #1a1a1a / #333333, paper
       #ffffff / #cccccc), which turned this pill into a visible solid box
       sitting on the desktop. The pill is persistent floating chrome, so it
       keeps its translucent glass treatment in every theme — the app windows
       are the ones that go terminal-flat. */
    background: rgba(20, 18, 16, 0.78);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    /* Invisible always — the pill is defined by its drop shadow, not an outline. */
    border: 1px solid transparent;
    border-radius: 18px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.32);
  }

  .grip.svelte-li2qrj {
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-template-rows: repeat(3, auto);
    gap: 3px 2px;
    cursor: grab;
  }
  .grip.svelte-li2qrj i:where(.svelte-li2qrj) {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--glass-border-hover, rgba(255, 255, 255, 0.55));
    display: block;
  }

  .glyph.svelte-li2qrj {
    -webkit-app-region: no-drag;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--accent-primary, #f5f5f0);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background 0.12s ease, transform 0.1s ease;
  }
  .glyph.svelte-li2qrj:hover {
    background: rgba(255, 255, 255, 0.1);
  }
  .glyph.svelte-li2qrj:active {
    transform: scale(0.92);
  }
  .glyph-img.svelte-li2qrj {
    width: 22px;
    height: 22px;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
  }

  /* Brand refresh 2026-09: theme variants — dark shows the bare drop, paper
     shows the pre-colored drop-on-black-tile. This window DOES load
     legacy-paper.css (shared index.html), but its white html background is
     excluded via :not(.overlay-mode) — the swap still lives here because
     bindThemeToDom sets html[data-legacy] in the pill window. */
  .glyph-img.logo-light.svelte-li2qrj {
    display: none;
  }

  html[data-legacy='light'] .glyph-img.logo-dark.svelte-li2qrj {
    display: none;
  }

  html[data-legacy='light'] .glyph-img.logo-light.svelte-li2qrj {
    display: block;
  }


  /* Positioned wrapper: anchors the floating sticky bar + FAB. Also carries
     the --msg-gutter CSS variable so it cascades into the library's internals. */
  .conversation-region.svelte-5hfhe0 {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    --msg-gutter: clamp(60px, 9.5vw, 180px);
    /* Clearance for the docked Session Changes tab on the right edge
       (ChangesPanel.svelte). The tab is a fixed, opaque surface parked a few
       px in from the window edge, so without this the viewport's scrollbar —
       which lives flush against that same edge — renders underneath it and
       becomes ungrabbable exactly where it is already hardest to reach. The
       fallback mirrors the token rather than being an independent guess; it
       only applies if tokens.css failed to load, and a wrong value there is
       the same invisible-underlap bug this whole rule exists to prevent. */
    padding-right: var(--tools-tab-clearance, 43px);
    /* Sticky last-user bar height. Reserved as padding-top here so the bar
       (absolute, top:0) floats in that band and BOTH the message content and
       the viewport's scrollbar start below it. */
    --last-user-bar-h: 30px;
    padding-top: var(--last-user-bar-h);
  }

  /* Restored/windowed (non-maximized): natural progression of the outer gutter. */
  html.is-windowed .conversation-region.svelte-5hfhe0 {
    --msg-gutter: clamp(0px, calc(9.5vw - 60px), 180px);
  }

  /* Compact Mode: force the outer gutter to minimal (0). */
  .conversation-region.compact-mode.svelte-5hfhe0 {
    --msg-gutter: 0px;
    padding-left: 10px;
    /* Built ON the clearance, not in place of it. This was a flat 30px, which
       is NARROWER than the docked Changes tab — compact mode therefore put the
       conversation scrollbar back underneath the tab, and since it only bites
       when compact mode happens to be on, it reads as the same fix "not
       working" rather than as a layout regression. */
    padding-right: calc(var(--tools-tab-clearance, 43px) + 6px);
  }

  .conversation-region.drag-over.svelte-5hfhe0 {
    outline: 2px dashed rgba(255, 255, 255, 0.15);
    outline-offset: -4px;
  }

  /* --- Virtual chat container --- */
  .conversation-region.svelte-5hfhe0 .virtual-chat-container {
    flex: 1;
    min-height: 0;
  }

  .conversation-region.svelte-5hfhe0 .virtual-chat-viewport {
    height: 100%;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
  }

  /* Top-align short conversations. The virtual-chat library pins content to the
     BOTTOM via an inline `justify-content: flex-end` on the viewport's sole
     content wrapper (no class, no !important) — so the first message sits at the
     bottom and "floats up" as the turn grows, which reads as flicker while
     streaming. A stylesheet !important beats that inline rule. Once content
     overflows the viewport the library's snap-to-bottom still pins the latest
     (flex-start is irrelevant when content fills the viewport), so long
     transcripts are unaffected. */
  .conversation-region.svelte-5hfhe0 .virtual-chat-viewport > div {
    justify-content: flex-start !important;
  }

  .conversation-region.svelte-5hfhe0 .virtual-chat-viewport::-webkit-scrollbar {
    width: 4px;
  }
  .conversation-region.svelte-5hfhe0 .virtual-chat-viewport::-webkit-scrollbar-track {
    background: transparent;
  }
  .conversation-region.svelte-5hfhe0 .virtual-chat-viewport::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
  }
  .conversation-region.svelte-5hfhe0 .virtual-chat-viewport::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
  }

  /* --- Per-message gutter + vertical spacing ---
     The library measures element heights via ResizeObserver (which includes
     padding but NOT margin). So we use padding for vertical spacing and margin
     for the horizontal gutter.

     The 10px vertical padding gives a clear visual separator between turns
     while staying compact enough for short messages. A faint top-border on
     non-first messages adds a subtle "new turn" cue without taking the
     extra vertical space that a full gap would. */
  .conversation-region.svelte-5hfhe0 .message-item {
    margin: 0 var(--msg-gutter);
    padding: 10px 0;
    overflow: hidden;
    position: relative;
  }

  /* Subtle turn separator — a faint line above each message that ISN'T the
     first. The first message is excluded via the `:not(:first-child)`
     guard so we don't double up with the top spacer. The opacity is low
     enough that short back-to-back messages feel grouped, not separated. */
  .conversation-region.svelte-5hfhe0 .message-item:not(:first-child) {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    padding-top: 12px;
  }

  /* Answer region separator/tint (Commit 3) REMOVED — per the
     Activity-group redesign there is no separator line or tint between
     the activity rows and the answer prose; prose flows directly. */

  .conversation-region.svelte-5hfhe0 .message-item [id^="user-msg-"] {
    scroll-margin-top: 40px;
  }

  /* --- Bottom spacer (footer) --- */
  .conversation-region.svelte-5hfhe0 .bottom-spacer {
    height: 80px;
    flex-shrink: 0;
  }

  /* (Footer live-indicator slot removed — the inline LiveActivityTicker now
     occupies the answer slot during turns, and top-alignment removed the
     bottom-gravity flicker this reserved height was mitigating.) */

  /* --- Session load error (Fix #4) --- */
  .session-load-error.svelte-5hfhe0 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 18vh;
    height: 100%;
    gap: 14px;
  }
  .session-load-error__text.svelte-5hfhe0 {
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    font-size: 15px;
  }
  .session-load-error__retry.svelte-5hfhe0 {
    padding: 8px 18px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary, #fff);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
  }
  .session-load-error__retry.svelte-5hfhe0:hover {
    background: rgba(255, 255, 255, 0.16);
  }

  /* --- Welcome empty state --- */
  .welcome-empty.svelte-5hfhe0 {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Anchor near the TOP of the conversation area, not vertically centered.
       A new session shows this welcome card before the first message streams
       in at the bottom (the virtual chat uses bottom-gravity). Centering the
       welcome card + the old 100px margin on .welcome-prompt pushed it below
       the geometric center, so on tall viewports it read as "pinned to the
       bottom." Top-anchoring keeps the prompt in the upper third — close to
       where the user is looking (the input bar is at the bottom, the first
       response will stream in just above it). */
    justify-content: flex-start;
    padding-top: 15vh;
    height: 100%;
    gap: 12px;
    opacity: 1;
  }

  .welcome-icon.svelte-5hfhe0 {
    width: 240px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 18px;
  }

  /* Brand refresh 2026-09: the new composite is a flat transparent PNG — the
     old radial-gradient ::after shadow was tuned for the round orkv2 logo and
     reads as smudges behind the wordmark, so it's gone. Both theme variants
     render; html[data-legacy] picks which one shows. */
  .welcome-logo.svelte-5hfhe0 {
    width: 240px;
    height: auto;
  }

  .welcome-logo-light.svelte-5hfhe0 {
    display: none;
  }

  html[data-legacy='light'] .welcome-logo-dark.svelte-5hfhe0 {
    display: none;
  }

  html[data-legacy='light'] .welcome-logo-light.svelte-5hfhe0 {
    display: block;
  }

  .welcome-subtitle.svelte-5hfhe0 {
    font-size: 16px;
    /* No negative margin: the trimmed composite has no bottom padding to tuck
       into (the old -35px overlap relied on orkv2_full's transparent bottom). */
    text-align: center;
  }

  .welcome-subtitle.svelte-5hfhe0 .highlight {
    color: var(--accent-primary);
    font-weight: 600;
    line-height: 18px;
    background: var(--popup-bg, black);
    -webkit-backdrop-filter: var(--popup-blur, none);
    backdrop-filter: var(--popup-blur, none);
    border-radius: 20px;
    padding: 0px 10px 2px 10px;
  }

  .welcome-prompt.svelte-5hfhe0 {
    font-size: 17px;
    color: var(--text-primary);
    /* Top spacing is handled by .welcome-empty's padding-top — no per-element margin. */
  }

  /* --- Load more (header snippet) --- */
  .load-more-sentinel.svelte-5hfhe0 {
    display: flex;
    justify-content: center;
    padding: 8px 0;
  }

  .load-more-btn.svelte-5hfhe0 {
    padding: 6px 16px;
    border-radius: 6px;
    border: 1px dashed var(--glass-border);
    background: var(--glass-subtle-bg);
    -webkit-backdrop-filter: var(--glass-subtle-blur);
    backdrop-filter: var(--glass-subtle-blur);
    color: var(--text-muted);
    font-size: 12px;
  }

  /* --- Sticky "last user message" header --- */
  .last-user-bar.right-aligned.svelte-5hfhe0 {
    flex-direction: row-reverse;
    margin: 0 calc(var(--msg-gutter) + 100px) 8px;
  }
  .last-user-bar.right-aligned.svelte-5hfhe0 .last-user-text:where(.svelte-5hfhe0) {
    text-align: right;
  }

  .last-user-bar.svelte-5hfhe0 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    height: var(--last-user-bar-h);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 20px 6px 20px;
    margin: 0 var(--msg-gutter) 8px calc(var(--msg-gutter) + 100px);
    background: rgba(20, 20, 24, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: background 0.15s ease;
    user-select: none;
  }
  .last-user-bar.svelte-5hfhe0:hover {
    background: rgba(28, 28, 34, 0.85);
  }
  .last-user-label.svelte-5hfhe0 {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.4);
    padding: 2px 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
  }
  .last-user-text.svelte-5hfhe0 {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-style: italic;
  }
  .last-user-arrow.svelte-5hfhe0 {
    flex-shrink: 0;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    transition: color 0.15s ease, transform 0.15s ease;
  }
  .last-user-bar.svelte-5hfhe0:hover .last-user-arrow:where(.svelte-5hfhe0) {
    color: rgba(255, 255, 255, 0.7);
    transform: translateY(-2px);
  }

  html[data-legacy="dark"] .last-user-bar.svelte-5hfhe0 {
    background: rgba(20, 20, 24, 0.92);
  }
  html[data-legacy="dark"] .last-user-bar.svelte-5hfhe0:hover {
    background: rgba(28, 28, 34, 0.97);
  }

  /* --- Floating "jump to latest" FAB --- */
  .scroll-bottom-btn.svelte-5hfhe0 {
    position: absolute;
    right: 45px;
    bottom: 20px;
    z-index: 20;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-primary);
    background: var(--glass-subtle-bg);
    -webkit-backdrop-filter: var(--glass-subtle-blur);
    backdrop-filter: var(--glass-subtle-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  }
  .scroll-bottom-btn.svelte-5hfhe0:hover {
    background: var(--glass-highlight);
    border-color: var(--glass-border-hover);
    transform: translateY(-1px);
  }
  .scroll-bottom-btn.svelte-5hfhe0 svg:where(.svelte-5hfhe0) {
    width: 18px;
    height: 18px;
  }
  /* Loading logo — pulsing Ork mark shown while a session's history fetches
     (switch / new / reconnect) OR during the cold-launch gap before the first
     session resolves. Mirrors the Tauri splash (#ork-splash__logo +
     ork-splash-pulse in index.html) — keep these values in sync so both
     spinners stay identical. */
  .session-loading.svelte-5hfhe0 {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  .session-loading__logo.svelte-5hfhe0 {
    width: 64px;
    height: 64px;
    animation: svelte-5hfhe0-ork-session-pulse 1.8s ease-in-out infinite;
  }

  .session-loading__logo.logo-light.svelte-5hfhe0 {
    display: none;
  }

  html[data-legacy='light'] .session-loading__logo.logo-dark.svelte-5hfhe0 {
    display: none;
  }

  html[data-legacy='light'] .session-loading__logo.logo-light.svelte-5hfhe0 {
    display: block;
  }
  @keyframes svelte-5hfhe0-ork-session-pulse {
    0%, 100% { opacity: 0.55; transform: scale(0.96); }
    50%      { opacity: 1;    transform: scale(1.0); }
  }


  .inline-root.svelte-39n3rv {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    padding: 16px;
  }

  .popup-backdrop.svelte-39n3rv {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    z-index: 10000;
  }

  .popup-dialog.svelte-39n3rv {
    position: absolute;
    background: rgba(20, 18, 16, 0.95);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    animation: svelte-39n3rv-popup-in 0.2s ease-out;
  }

  @keyframes svelte-39n3rv-popup-in {
    from { opacity: 0; transform: scale(0.95) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
  }

  .popup-header.svelte-39n3rv {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    cursor: grab;
    user-select: none;
  }

  .header-title.svelte-39n3rv {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
  }

  .close-btn.svelte-39n3rv {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    transition: all 0.15s;
  }
  .close-btn.svelte-39n3rv:hover { background: rgba(255, 255, 255, 0.1); color: var(--text-primary); }

  .popup-body.svelte-39n3rv {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    background: transparent;
  }

  .type-selector.svelte-39n3rv {
    display: flex;
    gap: 6px;
  }

  .type-pill.svelte-39n3rv {
    flex: 1;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
  }
  .type-pill.svelte-39n3rv:hover { background: rgba(255, 255, 255, 0.05); }
  .type-pill.active.svelte-39n3rv {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.4);
    color: var(--text-primary);
  }

  .fb-input.svelte-39n3rv {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
  }
  .fb-input.svelte-39n3rv:focus { border-color: rgba(99, 102, 241, 0.4); }
  .fb-input.svelte-39n3rv::placeholder { color: var(--text-muted); }

  .fb-textarea.svelte-39n3rv {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    resize: vertical;
    min-height: 80px;
    transition: border-color 0.15s;
  }
  .fb-textarea.svelte-39n3rv:focus { border-color: rgba(99, 102, 241, 0.4); }
  .fb-textarea.svelte-39n3rv::placeholder { color: var(--text-muted); }

  .screenshot-preview.svelte-39n3rv {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
  }
  .screenshot-preview.svelte-39n3rv img:where(.svelte-39n3rv) {
    width: 100%;
    max-height: 120px;
    object-fit: cover;
    display: block;
  }
  .remove-screenshot.svelte-39n3rv {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    padding: 4px;
    display: flex;
    transition: background 0.15s;
  }
  .remove-screenshot.svelte-39n3rv:hover { background: rgba(220, 38, 38, 0.8); }

  .meta-info.svelte-39n3rv {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 11px;
    color: var(--text-muted);
    opacity: 0.6;
    padding-top: 4px;
    border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.05));
  }

  .result-msg.svelte-39n3rv {
    font-size: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    text-align: center;
  }
  .result-msg.success.svelte-39n3rv {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.2);
  }
  .result-msg.error.svelte-39n3rv {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
  }

  .popup-footer.svelte-39n3rv {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
  }

  .btn.svelte-39n3rv {
    padding: 6px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
    border: none;
  }
  .btn-ghost.svelte-39n3rv {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
  }
  .btn-ghost.svelte-39n3rv:hover { background: rgba(255, 255, 255, 0.05); color: var(--text-primary); }

  .btn-primary.svelte-39n3rv {
    background: rgba(99, 102, 241, 0.8);
    color: white;
  }
  .btn-primary.svelte-39n3rv:hover:not(:disabled) { background: rgba(99, 102, 241, 1); }
  .btn-primary.svelte-39n3rv:disabled { opacity: 0.4; cursor: not-allowed; }


  .inline-root.svelte-j2m0v1 {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: hidden;
  }

  .popup-layer.svelte-j2m0v1 {
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.15);
  }

  @keyframes svelte-j2m0v1-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .editor-popup.svelte-j2m0v1 {
    position: fixed;
    background: var(--dropdown-bg);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
    backdrop-filter: var(--dropdown-blur);
    -webkit-backdrop-filter: var(--dropdown-blur);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    pointer-events: auto;
    animation: svelte-j2m0v1-popup-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  }

  @keyframes svelte-j2m0v1-popup-in {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
  }

  /* ── Header ── */
  .editor-header.svelte-j2m0v1 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--glass-border);
    cursor: grab;
    flex-shrink: 0;
    user-select: none;
  }

  .editor-header.svelte-j2m0v1:active { cursor: grabbing; }

  .header-name.svelte-j2m0v1 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
  }

  .header-actions.svelte-j2m0v1 {
    display: flex;
    align-items: center;
    gap: 2px;
  }

  .header-action-btn.svelte-j2m0v1 {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.15s;
    padding: 0;
    flex-shrink: 0;
  }

  .header-action-btn.svelte-j2m0v1:hover { background: rgba(255, 255, 255, 0.08); color: var(--text-primary); }

  .close-btn.svelte-j2m0v1 {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.15s;
    padding: 0;
    flex-shrink: 0;
  }

  .close-btn.svelte-j2m0v1 svg { width: 14px; height: 14px; }
  .close-btn.svelte-j2m0v1:hover { background: rgba(255, 255, 255, 0.08); color: var(--text-primary); }

  /* ── Body layout ── */
  .editor-body.svelte-j2m0v1 {
    display: flex;
    flex: 1;
    overflow: hidden;
  }

  /* ── Left sidebar ── */
  .sidebar-list.svelte-j2m0v1 {
    width: 170px;
    min-width: 170px;
    border-right: 1px solid var(--glass-border);
    overflow-y: auto;
    padding: 6px 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  .sidebar-title.svelte-j2m0v1 {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    padding: 4px 12px 6px;
    opacity: 0.6;
  }

  .sidebar-item.svelte-j2m0v1 {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    color: var(--text-muted);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    background: none;
    border: none;
    text-align: left;
    width: 100%;
  }

  .sidebar-item.svelte-j2m0v1:hover { color: var(--text-primary); }

  .sidebar-item.selected.svelte-j2m0v1 { color: var(--text-primary); }

  .item-name.svelte-j2m0v1 { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


  /* ── Right content ── */
  .content-area.svelte-j2m0v1 {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .empty-state.svelte-j2m0v1 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: var(--text-muted);
    font-size: 13px;
    opacity: 0.5;
  }

  /* ── Tab bar ── */
  .tab-bar.svelte-j2m0v1 {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 16px;
    border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
  }

  .tab-btn.svelte-j2m0v1 {
    padding: 8px 14px;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
  }

  .tab-btn.svelte-j2m0v1:hover { color: var(--text-secondary); }

  .tab-btn.active.svelte-j2m0v1 {
    color: var(--text-primary);
    border-bottom-color: var(--text-primary);
  }

  .tab-actions.svelte-j2m0v1 {
    margin-left: auto;
    display: flex;
    gap: 2px;
  }

  .action-link.svelte-j2m0v1 {
    -webkit-appearance: none;
    appearance: none;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 0;
    transition: color 0.15s;
    padding: 0;
  }

  .action-link.svelte-j2m0v1:hover { color: var(--text-primary); background: transparent !important; }
  .action-link.danger.svelte-j2m0v1:hover { color: var(--accent-red); background: transparent !important; }

  /* ── Style row ── */
  .style-row.svelte-j2m0v1 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    flex-shrink: 0;
  }

  .style-label.svelte-j2m0v1 {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
  }

  .style-selector.svelte-j2m0v1 {
    display: flex;
    gap: 4px;
  }

  .style-btn.svelte-j2m0v1 {
    padding: 3px 10px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 11px;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.15s;
  }

  .style-btn.svelte-j2m0v1:hover { color: var(--text-secondary); }

  .style-btn.active.svelte-j2m0v1 {
    color: var(--text-primary);
  }

  .style-btn.svelte-j2m0v1:disabled { opacity: 0.4; cursor: default; }

  .tab-divider.svelte-j2m0v1 {
    height: 1px;
    background: var(--glass-border);
    margin: 0 16px;
  }

  /* ── Tab content ── */
  .tab-content.svelte-j2m0v1 {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
  }

  /* ── MD editor ── */
  .md-editor.svelte-j2m0v1 {
    display: block;
    width: 100%;
    flex: 1;
    min-height: 200px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 12px 14px;
    color: var(--text-primary);
    font-size: 12px;
    font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
    resize: none;
    outline: none;
    line-height: 1.6;
    box-sizing: border-box;
    tab-size: 2;
    transition: border-color 0.2s;
  }

  .md-editor.svelte-j2m0v1:focus {
    border-color: rgba(210, 180, 140, 0.3);
  }

  .md-editor.svelte-j2m0v1::placeholder {
    color: var(--text-muted);
    opacity: 0.5;
    font-family: inherit;
  }

  .md-editor.svelte-j2m0v1::-webkit-scrollbar { cursor: default; }
  .md-editor.svelte-j2m0v1::-webkit-scrollbar-thumb { cursor: default; }
  .md-editor.svelte-j2m0v1::-webkit-scrollbar-track { cursor: default; }

  /* ── MD container (holds both preview and editor) ── */
  .md-container.svelte-j2m0v1 {
    cursor: text;
    background: none;
    border: none;
    font-family: inherit;
    color: inherit;
    width: 100%;
    text-align: left;
  }

  /* ── MD preview (rendered markdown) ── */
  .md-preview.svelte-j2m0v1 {
    flex: 1;
    min-height: 200px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.65;
    color: var(--text-primary);
    overflow-y: auto;
    transition: border-color 0.2s;
  }

  .md-preview.svelte-j2m0v1:hover {
    border-color: var(--glass-border);
  }

  .md-empty.svelte-j2m0v1 {
    color: var(--text-muted);
    opacity: 0.5;
    font-style: italic;
  }

  /* ── Rendered markdown styles inside preview ── */
  .md-preview.svelte-j2m0v1 h1 { font-size: 18px; font-weight: 700; margin: 16px 0 8px; color: var(--text-primary); }
  .md-preview.svelte-j2m0v1 h2 { font-size: 15px; font-weight: 600; margin: 14px 0 6px; color: var(--text-primary); border-bottom: 1px solid var(--glass-border); padding-bottom: 4px; }
  .md-preview.svelte-j2m0v1 h3 { font-size: 14px; font-weight: 600; margin: 12px 0 4px; color: var(--text-primary); }
  .md-preview.svelte-j2m0v1 p { margin: 6px 0; }
  .md-preview.svelte-j2m0v1 ul, .md-preview.svelte-j2m0v1 ol { margin: 4px 0; padding-left: 20px; }
  .md-preview.svelte-j2m0v1 li { margin: 2px 0; }
  .md-preview.svelte-j2m0v1 strong { font-weight: 600; color: var(--text-primary); }
  .md-preview.svelte-j2m0v1 em { font-style: italic; }
  .md-preview.svelte-j2m0v1 code {
    font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
    font-size: 11px;
    background: rgba(255, 255, 255, 0.06);
    padding: 1px 5px;
    border-radius: 4px;
  }
  .md-preview.svelte-j2m0v1 pre {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    padding: 10px 12px;
    margin: 8px 0;
    overflow-x: auto;
  }
  .md-preview.svelte-j2m0v1 pre code {
    background: none;
    padding: 0;
    font-size: 11px;
    line-height: 1.5;
  }
  .md-preview.svelte-j2m0v1 blockquote {
    border-left: 3px solid var(--glass-border);
    margin: 6px 0;
    padding: 4px 12px;
    color: var(--text-secondary);
  }
  .md-preview.svelte-j2m0v1 hr {
    border: none;
    border-top: 1px solid var(--glass-border);
    margin: 12px 0;
  }
  .md-preview.svelte-j2m0v1 a {
    color: var(--accent-primary);
    text-decoration: none;
  }
  .md-preview.svelte-j2m0v1 a:hover {
    text-decoration: underline;
  }
  .md-preview.svelte-j2m0v1 table {
    border-collapse: collapse;
    margin: 8px 0;
    width: 100%;
  }
  .md-preview.svelte-j2m0v1 th, .md-preview.svelte-j2m0v1 td {
    border: 1px solid var(--glass-border);
    padding: 4px 8px;
    font-size: 12px;
  }
  .md-preview.svelte-j2m0v1 th {
    background: rgba(255, 255, 255, 0.04);
    font-weight: 600;
  }

  /* ── Save status indicator ── */
  .save-status.svelte-j2m0v1 {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.3px;
    margin-left: auto;
    text-transform: uppercase;
    transition: opacity 0.2s;
  }

  .save-status.dirty.svelte-j2m0v1 { color: var(--accent-primary); opacity: 0.8; }
  .save-status.saving.svelte-j2m0v1 { color: var(--text-muted); opacity: 0.6; }
  .save-status.saved.svelte-j2m0v1 { color: #4ade80; opacity: 0.8; }

  .edit-btn.svelte-j2m0v1 {
    padding: 4px 14px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 11px;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.15s;
  }

  .edit-btn.svelte-j2m0v1:hover { color: var(--text-primary); }
  .edit-btn.save.svelte-j2m0v1 { color: var(--text-secondary); }
  .edit-btn.save.svelte-j2m0v1:hover { color: var(--text-primary); }

  /* ── Skills grid ── */
  .skills-actions.svelte-j2m0v1 {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
    justify-content: flex-end;
  }
  .skills-actions.svelte-j2m0v1 .action-link:where(.svelte-j2m0v1) {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: all 0.15s;
  }
  .skills-actions.svelte-j2m0v1 .action-link:where(.svelte-j2m0v1):hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.1);
  }
  .skills-grid.svelte-j2m0v1 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  .skill-card.svelte-j2m0v1 {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: inherit;
    transition: all 0.15s;
    position: relative;
  }

  .skill-card.svelte-j2m0v1:hover { border-color: var(--glass-border-hover); background: rgba(255, 255, 255, 0.04); }

  .skill-card.enabled.svelte-j2m0v1 {
    border-color: rgba(80, 200, 120, 0.25);
    background: rgba(80, 200, 120, 0.05);
  }

  .skill-card.svelte-j2m0v1:disabled { opacity: 0.5; cursor: default; }

  .skill-name.svelte-j2m0v1 {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
  }

  .skill-desc.svelte-j2m0v1 {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .skill-toggle.svelte-j2m0v1 {
    position: absolute;
    top: 8px;
    right: 8px;
  }

  .toggle-dot.svelte-j2m0v1 {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    opacity: 0.3;
    transition: all 0.15s;
  }

  .toggle-dot.on.svelte-j2m0v1 {
    background: #50c878;
    opacity: 1;
  }

  .empty-hint.svelte-j2m0v1 {
    font-size: 12px;
    color: var(--text-muted);
    opacity: 0.5;
    grid-column: 1 / -1;
    text-align: center;
    padding: 20px;
  }

  /* ── MCP servers ── */
  .mcp-list.svelte-j2m0v1 {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .mcp-card.svelte-j2m0v1 {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 10px 12px;
    transition: border-color 0.2s, opacity 0.2s;
  }

  .mcp-card.svelte-j2m0v1:not(.enabled) {
    opacity: 0.45;
  }

  .mcp-header.svelte-j2m0v1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .mcp-name.svelte-j2m0v1 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
  }

  .mcp-command.svelte-j2m0v1 {
    font-size: 11px;
    color: var(--text-muted);
    font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
    margin-top: 4px;
    word-break: break-all;
  }

  .mcp-env.svelte-j2m0v1 {
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0.6;
    margin-top: 2px;
  }

  /* Marks a server that came from the global Integrations registry. The toggle
     next to it writes a per-persona override — it does not edit the global. */
  .mcp-badge.svelte-j2m0v1 {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #93c5fd;
    background: rgba(59, 130, 246, 0.16);
    vertical-align: middle;
  }

  .mcp-excluded.svelte-j2m0v1 {
    margin-top: 4px;
    font-size: 10px;
    color: #fbbf24;
    opacity: 0.9;
  }

  .mcp-toggle.svelte-j2m0v1 {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
  }

  /* ── Create form (popup) ── */
  .create-form.svelte-j2m0v1 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 400px;
  }

  .create-label.svelte-j2m0v1 {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    opacity: 0.6;
  }

  .create-input.svelte-j2m0v1 {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--text-primary);
    font-size: 12px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
  }

  .create-input.svelte-j2m0v1:focus { border-color: rgba(255, 255, 255, 0.2); }
  .create-input.svelte-j2m0v1::placeholder { color: var(--text-muted); }

  .create-actions.svelte-j2m0v1 {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 4px;
  }

  /* ── Resize handles ── */
  .resize-handle.svelte-j2m0v1 {
    position: absolute;
    pointer-events: auto;
  }

  .resize-n.svelte-j2m0v1 { top: -4px; left: 10px; right: 10px; height: 8px; cursor: n-resize; }
  .resize-s.svelte-j2m0v1 { bottom: -4px; left: 10px; right: 10px; height: 8px; cursor: s-resize; }
  .resize-e.svelte-j2m0v1 { right: -4px; top: 10px; bottom: 10px; width: 8px; cursor: e-resize; }
  .resize-w.svelte-j2m0v1 { left: -4px; top: 10px; bottom: 10px; width: 8px; cursor: w-resize; }
  .resize-ne.svelte-j2m0v1 { top: -4px; right: -4px; width: 14px; height: 14px; cursor: ne-resize; }
  .resize-nw.svelte-j2m0v1 { top: -4px; left: -4px; width: 14px; height: 14px; cursor: nw-resize; }
  .resize-se.svelte-j2m0v1 { bottom: -4px; right: -4px; width: 14px; height: 14px; cursor: se-resize; }
  .resize-sw.svelte-j2m0v1 { bottom: -4px; left: -4px; width: 14px; height: 14px; cursor: sw-resize; }

  /* ── Scrollbars ── */
  .sidebar-list.svelte-j2m0v1::-webkit-scrollbar,
  .tab-content.svelte-j2m0v1::-webkit-scrollbar {
    width: var(--space-2);
  }

  .sidebar-list.svelte-j2m0v1::-webkit-scrollbar-track,
  .tab-content.svelte-j2m0v1::-webkit-scrollbar-track {
    background: transparent;
  }

  .sidebar-list.svelte-j2m0v1::-webkit-scrollbar-thumb,
  .tab-content.svelte-j2m0v1::-webkit-scrollbar-thumb {
    background: var(--white-10);
    border-radius: var(--radius-xl);
  }

  .sidebar-list.svelte-j2m0v1::-webkit-scrollbar-thumb:hover,
  .tab-content.svelte-j2m0v1::-webkit-scrollbar-thumb:hover {
    background: var(--white-20);
  }


  .plan-backdrop.svelte-732v50 {
    position: fixed;
    inset: 0;
    display: block;
    z-index: var(--z-modal);
    pointer-events: none;
  }

  .exit-plan-panel.svelte-732v50 {
    position: absolute;
    background: rgba(20, 18, 16, 0.95);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    min-width: 440px;
    min-height: 350px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    pointer-events: auto;
    animation: svelte-732v50-fade-in var(--transition-fast);
  }

  @keyframes svelte-732v50-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .plan-header.svelte-732v50 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
    cursor: grab;
  }

  .plan-icon.svelte-732v50 {
    color: var(--accent-primary);
    display: flex;
    flex-shrink: 0;
  }

  .plan-title.svelte-732v50 {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
  }

  .plan-session.svelte-732v50 {
    font-size: var(--text-sm);
    color: var(--text-muted);
  }

  .plan-close.svelte-732v50 {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s;
    padding: 0;
    flex-shrink: 0;
    margin-left: auto;
  }

  .plan-close.svelte-732v50 svg {
    width: 14px;
    height: 14px;
  }

  .plan-close.svelte-732v50:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
  }

  .plan-body.svelte-732v50 {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-6) var(--space-8);
  }

  .plan-desc.svelte-732v50 {
    font-size: var(--text-md);
    color: var(--text-secondary);
    margin-bottom: var(--space-5);
  }

  .plan-summary.svelte-732v50 {
    font-size: var(--text-base);
    color: var(--text-secondary);
    padding: var(--space-4) var(--space-5);
    background: var(--accent-primary-glow);
    border: 1px solid rgba(210, 180, 140, 0.15);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    line-height: 1.5;
  }

  .plan-file.svelte-732v50 {
    font-size: var(--text-base);
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
  }

  .plan-file.svelte-732v50 code:where(.svelte-732v50) {
    font-size: var(--text-sm);
    background: var(--bg-code);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--space-2);
    color: var(--accent-cyan);
  }

  .plan-content.svelte-732v50 {
    margin-bottom: var(--space-4);
  }

  .plan-content.svelte-732v50 strong:where(.svelte-732v50) {
    font-size: var(--text-base);
    color: var(--text-secondary);
    display: block;
    margin-bottom: var(--space-3);
  }

  .plan-preview.svelte-732v50 {
    background: var(--bg-code);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--text-muted);
    max-height: 200px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0;
  }

  .plan-question.svelte-732v50 {
    font-size: var(--text-md);
    color: var(--text-primary);
    font-weight: var(--weight-medium);
    margin-top: var(--space-2);
  }

  .plan-actions.svelte-732v50 {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px 14px;
    border-top: 1px solid var(--glass-border);
    flex-shrink: 0;
  }

  .plan-btn.svelte-732v50 {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
  }

  .plan-btn.deny.svelte-732v50 {
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
  }

  .plan-btn.deny.svelte-732v50:hover {
    border-color: var(--glass-border-hover);
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
  }

  .plan-btn.approve.svelte-732v50 {
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
  }

  .plan-btn.approve.svelte-732v50:hover {
    background: rgba(255, 255, 255, 0.16);
  }


  .notes-popup-host.svelte-1hqw8vt {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: rgba(20, 18, 16, 0.92);
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    border-radius: 12px;
    overflow: hidden;
  }

  .editor-header.svelte-1hqw8vt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
    user-select: none;
  }

  .header-colors.svelte-1hqw8vt {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
  }

  .color-dot.svelte-1hqw8vt {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
    padding: 0;
    background: none;
  }

  .color-dot.svelte-1hqw8vt:hover { transform: scale(1.2); }
  .color-dot.active.svelte-1hqw8vt { border-color: var(--text-primary); }

  .header-title.svelte-1hqw8vt {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    outline: none;
    min-width: 0;
    padding: 2px 4px;
    border-radius: 4px;
    transition: background 0.15s;
  }

  .header-title.svelte-1hqw8vt:hover { background: var(--white-5); }
  .header-title.svelte-1hqw8vt:focus { background: var(--white-10); }

  .tab-btn.svelte-1hqw8vt {
    padding: 4px 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font-size: 11px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .tab-btn.svelte-1hqw8vt:hover { color: var(--text-primary); background: var(--white-5); }
  .tab-btn.active.svelte-1hqw8vt { color: var(--text-primary); background: var(--white-10); }

  .bin-count.svelte-1hqw8vt {
    font-size: 9px;
    background: var(--accent-red);
    color: white;
    border-radius: 8px;
    padding: 0 5px;
    line-height: 16px;
  }

  .btn-icon.svelte-1hqw8vt {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
    padding: 0;
    flex-shrink: 0;
  }

  .btn-icon.svelte-1hqw8vt:hover { background: var(--white-5); color: var(--text-primary); }
  .btn-delete-action.svelte-1hqw8vt:hover { color: var(--accent-red); }

  .close-btn.svelte-1hqw8vt {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.15s;
    padding: 0;
    flex-shrink: 0;
  }

  .close-btn.svelte-1hqw8vt:hover { background: var(--white-5); color: var(--text-primary); }

  .editor-body.svelte-1hqw8vt {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .note-textarea.svelte-1hqw8vt {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 13px;
    font-family: var(--font-mono);
    line-height: 1.6;
    padding: 14px 16px;
    resize: none;
    outline: none;
  }

  .note-textarea.svelte-1hqw8vt::placeholder { color: var(--text-muted); }

  .editor-footer.svelte-1hqw8vt {
    display: flex;
    justify-content: space-between;
    padding: 6px 14px;
    border-top: 1px solid var(--glass-border);
    flex-shrink: 0;
  }

  .meta.svelte-1hqw8vt {
    font-size: 10px;
    color: var(--text-muted);
  }

  .empty-state.svelte-1hqw8vt {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: var(--text-sm);
  }

  .bin-panel.svelte-1hqw8vt {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .bin-header.svelte-1hqw8vt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
  }

  .bin-label.svelte-1hqw8vt {
    font-size: 11px;
    color: var(--text-muted);
  }

  .btn-ghost-sm.svelte-1hqw8vt {
    padding: 3px 8px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    font-size: 10px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
  }

  .btn-ghost-sm.svelte-1hqw8vt:hover { background: var(--white-10); color: var(--text-primary); }
  .btn-ghost-sm.btn-danger.svelte-1hqw8vt:hover { color: var(--accent-red); }

  .bin-list.svelte-1hqw8vt {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
  }

  .bin-item.svelte-1hqw8vt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    transition: background 0.15s;
  }

  .bin-item.svelte-1hqw8vt:hover { background: var(--white-5); }

  .bin-item-info.svelte-1hqw8vt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
  }

  .bin-item-title.svelte-1hqw8vt {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .bin-item-time.svelte-1hqw8vt {
    font-size: 9px;
    color: var(--text-muted);
  }

  .bin-meta.svelte-1hqw8vt {
    flex-shrink: 0;
    margin-right: 6px;
  }

  .bin-expires.svelte-1hqw8vt {
    font-size: 9px;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    background: var(--white-5);
    border: 1px solid var(--glass-border);
    padding: 2px 6px;
    border-radius: 8px;
    letter-spacing: 0.3px;
  }

  .bin-actions.svelte-1hqw8vt {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
  }

  .bin-list.svelte-1hqw8vt::-webkit-scrollbar { width: var(--space-2); }
  .bin-list.svelte-1hqw8vt::-webkit-scrollbar-track { background: transparent; }
  .bin-list.svelte-1hqw8vt::-webkit-scrollbar-thumb { background: var(--white-10); border-radius: var(--radius-xl); }
  .bin-list.svelte-1hqw8vt::-webkit-scrollbar-thumb:hover { background: var(--white-20); }
  .note-textarea.svelte-1hqw8vt::-webkit-scrollbar { width: var(--space-2); }
  .note-textarea.svelte-1hqw8vt::-webkit-scrollbar-track { background: transparent; }
  .note-textarea.svelte-1hqw8vt::-webkit-scrollbar-thumb { background: var(--white-10); border-radius: var(--radius-xl); }
  .note-textarea.svelte-1hqw8vt::-webkit-scrollbar-thumb:hover { background: var(--white-20); }


  /* SOLID background — no backdrop blur. The OS window is opaque, so the themed
     glass tint (a semi-transparent DARK glass color, e.g. ruby rgba(35,5,5,.75))
     must be layered over itself to reach near-full opacity — otherwise it
     composites over the near-black --bg-primary base and collapses to flat
     black for every theme, hiding the hue. Three identical gradient layers push
     effective alpha to ~0.98, so the actual bar-style color (onyx/obsidian/
     ruby/sapphire/amethyst) reads clearly while the window stays solid. */
  .brainstorm-host.svelte-7er0yx {
    --bs-tint: var(--glass-elevated-bg, rgba(20, 18, 16, 0.95));
    background-color: var(--bg-primary, #0a0608);
    background-image:
      linear-gradient(var(--bs-tint), var(--bs-tint)),
      linear-gradient(var(--bs-tint), var(--bs-tint)),
      linear-gradient(var(--bs-tint), var(--bs-tint));
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    font-family: inherit;
  }

  .host-header.svelte-7er0yx {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    user-select: none;
    flex-shrink: 0;
  }
  .header-title.svelte-7er0yx {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 0;
    /* No overflow:hidden — ConciergeAddressing's dropdown opens DOWNWARD as an
       absolutely-positioned child of this group; clipping it made the pill look
       like it did nothing on click. The pill's .name truncates at max-width, so
       the title never bleeds into the model picker. */
  }
  .host-header.svelte-7er0yx .pill-dropdown {
    margin-left: auto;
  }

  .close-btn.svelte-7er0yx {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    transition: all 0.15s;
    flex-shrink: 0;
  }
  .close-btn.svelte-7er0yx:hover { background: rgba(255, 255, 255, 0.1); color: var(--text-primary); }

  .host-body.svelte-7er0yx {
    flex: 1;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
  }

  .empty-state.svelte-7er0yx {
    margin: auto;
    text-align: center;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-muted);
    opacity: 0.7;
    max-width: 360px;
  }

  .msg.svelte-7er0yx {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.55;
    word-wrap: break-word;
    overflow-wrap: anywhere;
  }
  .msg.svelte-7er0yx p:first-child { margin-top: 0; }
  .msg.svelte-7er0yx p:last-child { margin-bottom: 0; }
  .msg.svelte-7er0yx pre { margin: 8px 0; }
  .msg.svelte-7er0yx code { font-size: 12px; }

  .msg.user.svelte-7er0yx {
    align-self: flex-end;
    background: var(--accent-primary-glow);
    border: 1px solid color-mix(in srgb, var(--accent-primary) 30%, transparent);
    color: var(--text-primary);
  }
  .msg.assistant.svelte-7er0yx {
    align-self: flex-start;
    background: var(--glass-highlight, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    color: var(--text-primary);
  }
  .msg.streaming.svelte-7er0yx { opacity: 0.92; }
  .msg.thinking.svelte-7er0yx { color: var(--text-muted); font-style: italic; opacity: 0.7; }

  .error-banner.svelte-7er0yx {
    font-size: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--status-error-bg);
    color: var(--status-error);
    border: 1px solid color-mix(in srgb, var(--status-error) 25%, transparent);
  }

  .composer.svelte-7er0yx {
    padding: 12px 14px;
    border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    flex-shrink: 0;
  }

  /* Pill input — mirrors the main session bar (ActionBar .input-wrapper). */
  .input-wrapper.svelte-7er0yx {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--glass-subtle-bg);
    -webkit-backdrop-filter: var(--glass-subtle-blur);
    backdrop-filter: var(--glass-subtle-blur);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 20px;
    padding: 8px 14px;
    transition: border-color 0.2s ease;
  }
  .input-wrapper.svelte-7er0yx:focus-within {
    border-color: color-mix(in srgb, var(--accent-primary) 45%, transparent);
  }
  .input-wrapper.svelte-7er0yx textarea:where(.svelte-7er0yx) {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    resize: none;
    min-height: 22px;
    max-height: 150px;
    overflow-y: auto;
  }
  .input-wrapper.svelte-7er0yx textarea:where(.svelte-7er0yx)::placeholder { color: var(--text-muted); }
  .input-wrapper.svelte-7er0yx textarea:where(.svelte-7er0yx):disabled { opacity: 0.5; }

  .input-actions.svelte-7er0yx {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
  }

  /* Stage 3 Ask/Command segmented toggle. */
  .addressee-toggle.svelte-7er0yx {
    display: inline-flex;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12));
    border-radius: 8px;
    overflow: hidden;
    margin-right: 2px;
  }
  .addressee-toggle.svelte-7er0yx button:where(.svelte-7er0yx) {
    padding: 4px 8px;
    background: transparent;
    border: none;
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
    font-size: 11px;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
  }
  .addressee-toggle.svelte-7er0yx button:where(.svelte-7er0yx):hover { background: rgba(255, 255, 255, 0.06); }
  .addressee-toggle.svelte-7er0yx button.on:where(.svelte-7er0yx) {
    /* Follow the theme accent (the old var(--accent, #4aa3ff) fallback always
       won — --accent was undefined, so the mode buttons were hardcoded blue
       in every theme). --bg-primary text keeps contrast as the accent flips
       near-white (default) / green (phosphor) / dark-green (paper). */
    background: var(--accent-primary);
    color: var(--bg-primary);
    font-weight: 500;
  }

  /* Act switch — a button[role=switch] in the voice-controls row. ON (default,
     accent) = Ork may act on the project; OFF = chat-only. Mirrors the
     SettingsPanel .toggle-switch idiom (28×15, 10px thumb, translateX 13px). */
  .act-toggle.svelte-7er0yx {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: none; padding: 0;
    font: inherit; font-size: 12px; color: var(--text-muted);
    cursor: pointer; user-select: none; flex-shrink: 0;
  }
  .act-toggle-switch.svelte-7er0yx {
    display: inline-block; position: relative;
    width: 28px; height: 15px; border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: background 0.2s ease, border-color 0.2s ease;
    flex-shrink: 0;
  }
  .act-toggle.on.svelte-7er0yx .act-toggle-switch:where(.svelte-7er0yx) {
    background: color-mix(in srgb, var(--accent-primary) 38%, transparent);
    border-color: color-mix(in srgb, var(--accent-primary) 55%, transparent);
  }
  .act-toggle-thumb.svelte-7er0yx {
    position: absolute; top: 1px; left: 1px;
    width: 10px; height: 10px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    transition: transform 0.2s ease, background 0.2s ease;
  }
  .act-toggle.on.svelte-7er0yx .act-toggle-thumb:where(.svelte-7er0yx) {
    transform: translateX(13px);
    background: var(--accent-primary);
  }
  .act-toggle-label.svelte-7er0yx { font-weight: 600; color: var(--text-secondary, rgba(255, 255, 255, 0.7)); }

  /* "Acting" indicator — shown while a fired act_in_session routes to the main
     agent. Mirrors ToolRow's running-tool idiom (spinner + muted label). */
  .concierge-acting.svelte-7er0yx {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px; border-radius: 12px;
    background: var(--glass-highlight, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
    font-size: 12px; font-style: italic;
  }
  .concierge-acting.svelte-7er0yx .acting-spinner:where(.svelte-7er0yx) {
    width: 12px; height: 12px; border-radius: 50%; flex: none;
    border: 2px solid color-mix(in srgb, var(--accent-primary) 30%, transparent);
    border-top-color: var(--accent-primary);
    animation: svelte-7er0yx-concierge-acting-spin 0.8s linear infinite;
  }
  .concierge-acting.svelte-7er0yx .acting-label:where(.svelte-7er0yx) {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px;
  }
  @keyframes svelte-7er0yx-concierge-acting-spin { to { transform: rotate(360deg); } }

  .send-btn.svelte-7er0yx {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
    transition: color 0.15s;
    padding: 0;
  }
  .send-btn.has-text.svelte-7er0yx {
    color: var(--accent-primary);
    filter: drop-shadow(0 0 4px var(--accent-primary-glow));
  }
  .send-btn.has-text.svelte-7er0yx:hover:not(:disabled) {
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent-primary) 50%, transparent));
  }
  .send-btn.svelte-7er0yx:disabled { opacity: 0.3; cursor: not-allowed; }

  /* ── Stage 2 digest controls (shown only while voice mode is on) ── */
  .voice-controls.svelte-7er0yx {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 14px 0;
    flex-shrink: 0;
  }
  .digest-toggle.svelte-7er0yx {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
  }
  .digest-toggle.svelte-7er0yx input:where(.svelte-7er0yx) {
    width: 14px;
    height: 14px;
    accent-color: var(--accent-primary);
    cursor: pointer;
    margin: 0;
  }
  .digest-now-btn.svelte-7er0yx {
    display: flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    color: var(--text-muted);
    padding: 4px 10px;
    border-radius: 14px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    line-height: 1;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
  }
  .digest-now-btn.svelte-7er0yx:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--accent-primary) 30%, transparent);
  }
  .digest-now-btn.svelte-7er0yx:disabled { opacity: 0.4; cursor: not-allowed; }

  /* "Teach" — opens the wake-word enrollment wizard. Mirrors digest-now-btn's
     glass ghost styling (no default grey). */
  /* (unused) .wake-teach-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    color: var(--text-muted);
    padding: 4px 10px;
    border-radius: 14px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    line-height: 1;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
  }*/
  /* (unused) .wake-teach-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--accent-primary) 30%, transparent);
  }*/
  /* (unused) .wake-teach-btn:disabled { opacity: 0.4; cursor: not-allowed; }*/

  /* ── Voice concierge (Stage 1): the mic button is the orb is the status ── */
  .mic-btn.svelte-7er0yx {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 50%;
    transition: color 0.15s, background 0.15s;
    padding: 0;
    flex-shrink: 0;
  }
  .mic-btn.svelte-7er0yx:hover:not(.listening):not(.speaking) {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
  }
  .mic-btn.listening.svelte-7er0yx {
    color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 16%, transparent);
    animation: svelte-7er0yx-voice-pulse 1.6s ease-in-out infinite;
  }
  .mic-btn.speaking.svelte-7er0yx {
    color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
  }
  /* Wake-word PASSIVE: mic hot but gated — dimmer + a slower, softer pulse
     than .listening so "listening for 'Computer' only" reads at a glance
     (privacy: the always-hot mic must never look idle). */
  .mic-btn.wake-passive.svelte-7er0yx {
    color: var(--text-muted);
    background: color-mix(in srgb, var(--accent-primary) 7%, transparent);
    animation: svelte-7er0yx-voice-pulse 3.2s ease-in-out infinite;
  }
  .mic-btn.has-error.svelte-7er0yx { color: var(--status-error); }
  @keyframes svelte-7er0yx-voice-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-primary) 45%, transparent); }
    50%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent-primary) 0%, transparent); }
  }
  /* Speaking waveform (3 animated bars) shown while a reply plays. */
  .wave.svelte-7er0yx { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
  .wave.svelte-7er0yx i:where(.svelte-7er0yx) {
    display: block; width: 3px; height: 100%; transform-origin: bottom;
    background: var(--accent-primary); border-radius: 2px;
    animation: svelte-7er0yx-voice-bar 0.9s ease-in-out infinite;
  }
  .wave.svelte-7er0yx i:where(.svelte-7er0yx):nth-child(2) { animation-delay: 0.15s; }
  .wave.svelte-7er0yx i:where(.svelte-7er0yx):nth-child(3) { animation-delay: 0.3s; }
  @keyframes svelte-7er0yx-voice-bar {
    0%, 100% { transform: scaleY(0.3); }
    50%      { transform: scaleY(1); }
  }
  /* Wake sensitivity slider — compact inline range, only in wake mode. */
  .wake-sens.svelte-7er0yx {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; color: var(--text-muted);
    padding: 2px 6px; border-radius: 8px;
    background: color-mix(in srgb, var(--accent-primary) 5%, transparent);
  }
  .wake-sens-label.svelte-7er0yx { white-space: nowrap; }
  .wake-sens-value.svelte-7er0yx { white-space: nowrap; min-width: 2ch; text-align: right; }
  .wake-sens.svelte-7er0yx input[type='range']:where(.svelte-7er0yx) {
    width: 70px; height: 3px; accent-color: var(--accent-primary);
    cursor: pointer;
  }
  /* Wake-word status notes — the passive one is the privacy indicator: it must
     be visible whenever the mic is hot-and-gated, not only on hover. */
  .wake-passive-note.svelte-7er0yx {
    display: flex; align-items: center; gap: 8px;
    font-size: 11.5px; color: var(--text-muted);
    padding: 6px 10px; border-radius: 10px;
    background: color-mix(in srgb, var(--accent-primary) 6%, transparent);
    align-self: flex-start; margin-top: 4px;
  }
  .wake-passive-note.svelte-7er0yx .wake-dot:where(.svelte-7er0yx) {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent-primary);
    animation: svelte-7er0yx-voice-pulse 3.2s ease-in-out infinite;
    flex-shrink: 0;
  }
  .wake-unavailable-note.svelte-7er0yx {
    font-size: 11.5px; color: var(--text-muted);
    padding: 6px 10px; border-radius: 10px;
    background: rgba(255, 177, 80, 0.08);
    border: 1px solid rgba(255, 177, 80, 0.25);
    align-self: flex-start; margin-top: 4px;
  }
  /* Ghost partial transcript — not yet sent. Real user bubble replaces it on final.
     (Streaming fallback only — the offline Parakeet path emits no live partials.) */
  .msg.ghost.svelte-7er0yx {
    opacity: 0.5;
    font-style: italic;
    border: 1px dashed color-mix(in srgb, var(--accent-primary) 30%, transparent);
  }
  /* "Listening…" hint while voice mode is active but no transcript is ready yet.
     Shown throughout the offline Parakeet path (per-utterance finals only) and
     briefly at the start of the streaming path before the first partial lands. */
  .msg.listening.svelte-7er0yx {
    opacity: 0.6;
    font-style: italic;
    border: 1px dashed color-mix(in srgb, var(--accent-primary) 20%, transparent);
  }
  .voice-error.svelte-7er0yx {
    align-self: center;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--status-error-bg);
    color: var(--status-error);
    border: 1px solid color-mix(in srgb, var(--status-error) 25%, transparent);
  }



  .sidebar.svelte-19955gj {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 283px;
    background: var(--glass-default-bg);
    -webkit-backdrop-filter: var(--glass-default-blur);
    backdrop-filter: var(--glass-default-blur);
    border-right: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
    z-index: var(--z-stacked);
    /* The sidebar's own frame (top/bottom/side padding) is a window drag region,
       so the empty "margin" around the content drags the window just like the top
       tab bar. Interactive regions opt back out below: .sidebar-content (nav +
       sessions), .sidebar-footer, and the macOS traffic lights. The logo strip
       (.sidebar-header) is draggable; its buttons opt out individually.
       Compositor-level -webkit-app-region only (no data-tauri-drag-region here —
       the attribute would hijack mousedown on the whole sidebar incl. content). */
    -webkit-app-region: drag;
    transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1), background 0.3s;
    overflow-y: auto;
    overflow-x: hidden;
    white-space: nowrap;
    padding: 20px 4px 20px 8px;
  }

  /* Sidebar header (logo strip) is a window drag region, like the top tab bar.
     The logo + toggle-arrow buttons opt out (no-drag) so they stay clickable.
     See .sidebar-header / .sidebar-logo-btn / .toggle-arrow-btn below. */

  .sidebar.collapsed.svelte-19955gj {
    width: 70px;
  }

  /* ─── Mobile responsive (≤ 480 px) ─────────────────────────
     On iPhone 11 (390×844), the 283 px fixed sidebar can't be a column —
     the chat area needs the full viewport. Convert the sidebar to a slide-in
     drawer that translates off-screen by default and only animates in when
     the .app shell has the .mobile-sidebar-open class (toggled by
     TopActionBar's hamburger). The backdrop dim is rendered via .app's
     ::after in App.svelte's <style> — this component just handles the
     sidebar's own transform + width override. */
  @media (max-width: 480px) {
    .sidebar.svelte-19955gj {
      width: 283px;
      transform: translateX(-100%);
      transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    .sidebar.collapsed.svelte-19955gj {
      width: 283px;       /* ignore .collapsed width on mobile — drawer is overlay */
    }
    /* (unused) .app.mobile-sidebar-open .sidebar {
      transform: translateX(0);
      box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
    }*/
  }

  .sidebar.collapsed.svelte-19955gj .sidebar-label:where(.svelte-19955gj) {
    opacity: 0;
    visibility: hidden;
    width: 0;
    margin-left: 0;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }

  .sidebar.svelte-19955gj:not(.collapsed) .sidebar-label:where(.svelte-19955gj) {
    transition: opacity 0.2s ease 0.1s, visibility 0.2s ease 0.1s;
  }

  .sidebar.collapsed.svelte-19955gj .sessions-page:where(.svelte-19955gj) {
    display: none;
  }

  /* Scrollbar */
  .sidebar.svelte-19955gj::-webkit-scrollbar {
    width: 4px;
  }

  .sidebar.svelte-19955gj::-webkit-scrollbar-track {
    background: transparent;
  }

  .sidebar.svelte-19955gj::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 10px;
  }

  .sidebar.svelte-19955gj::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.22);
  }


  /* Window drag strip — see the markup note. Positioned against the sidebar's
     padding box, so it spans the full width and starts at the window's top
     edge; it deliberately covers both `.sidebar`'s frame padding and
     `.sidebar-header`'s own padding so the grab surface is continuous. */
  .sidebar-drag-strip.svelte-19955gj {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: var(--content-top, 80px);
    z-index: 10;
    -webkit-app-region: drag;
    user-select: none;
  }

  /* Header */
  .sidebar-header.svelte-19955gj {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 0 20px;
    position: relative;
    z-index: 11;
    /* Window drag region — mirrors the top tab bar. Compositor-level drag via
       -webkit-app-region (the Hub header uses the same mechanism); the
       data-tauri-drag-region attribute on the element is kept too. The two
       buttons inside opt out below so they remain clickable. */
    -webkit-app-region: drag;
    user-select: none;

    /* Hard-aligns the nav's first row to the content region's first row, so
       the sidebar nav starts on the same line as the conversation rather than
       floating wherever the header's own content happens to end.

       Derived, not hand-tuned: `.sidebar-nav` adds a 4px top pad below the
       header, so the header is sized to `--content-top` minus that. Both sides
       read the same token, so changing the bar heights moves both together and
       they cannot drift. A min-height, not a height — a taller header (long
       persona name, wrapped subtitle) still grows rather than clipping. */
    box-sizing: border-box;
    min-height: calc(var(--content-top, 80px) - 4px);
  }

  body.platform-windows .sidebar-header.svelte-19955gj { padding-top: 10px; }
 body.platform-windows .toggle-arrow-btn.svelte-19955gj { top: calc(50% - 4px); }

  .toggle-arrow-btn.svelte-19955gj {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 4px 8px 4px 0;
    opacity: 0.35;
    cursor: pointer;
    color: inherit;
    -webkit-app-region: no-drag;
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease, color 200ms ease;
  }

  .toggle-arrow-btn.svelte-19955gj:hover {
    opacity: 1;
    color: rgba(255, 255, 255, 0.85);
  }

  .sidebar.collapsed.svelte-19955gj .toggle-arrow-btn:where(.svelte-19955gj) {
    right: 8px;
    transform: translateY(-50%) translateX(20px);
  }

  .sidebar.svelte-19955gj:not(.collapsed) .toggle-arrow-btn:where(.svelte-19955gj) {
    transform: translateY(-50%) rotate(180deg);
  }

  /* macOS traffic lights */
  .window-controls-macos.svelte-19955gj {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 55px;
    height: 12px;
    padding: 6px 0 6px 0;
    margin-top: -10px;
    position: relative;
    z-index: 11;
    -webkit-app-region: no-drag;
  }

  .traffic-light.svelte-19955gj {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    background: transparent;
    color: transparent;
    padding: 0;
  }

  .traffic-light.svelte-19955gj svg:where(.svelte-19955gj) { opacity: 0; transition: opacity 0.15s ease; }
  .traffic-close.svelte-19955gj { background: var(--traffic-close, #ff5f57); }
  .traffic-minimize.svelte-19955gj { background: var(--traffic-minimize, #febc2e); }
  .traffic-maximize.svelte-19955gj { background: var(--traffic-maximize, #28c840); }
  .traffic-light.svelte-19955gj:hover svg:where(.svelte-19955gj) { opacity: 1; }
  .traffic-close.svelte-19955gj:hover { background: var(--traffic-close-hover, #ff3b30); color: rgba(0, 0, 0, 0.5); }
  .traffic-minimize.svelte-19955gj:hover { background: var(--traffic-minimize-hover, #f5a623); color: rgba(0, 0, 0, 0.5); }
  .traffic-maximize.svelte-19955gj:hover { background: var(--traffic-maximize-hover, #1aab29); color: rgba(0, 0, 0, 0.5); }

  /* macOS: remove traffic light space on Windows (sidebar shifts up naturally) */
  body.platform-windows .window-controls-macos.svelte-19955gj { display: none; }


  .sidebar-logo-btn.svelte-19955gj {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0 0 0 4px;
    flex-shrink: 0;
    flex-grow: 0;
    overflow: hidden;
    transition: opacity 0.15s;
    -webkit-app-region: no-drag;
  }

  .sidebar-logo-btn.svelte-19955gj:hover {
    opacity: 0.85;
    transform: scale(1.05);
  }

  .sidebar-logo-icon.svelte-19955gj {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
  }

  /* Brand refresh 2026-09: theme variants — dark shows the bare drop + white
     wordmark, paper shows the pre-colored drop-on-black-tile + black wordmark. */
  .sidebar-logo-icon.logo-light.svelte-19955gj,
  .sidebar-logo-rk.logo-light.svelte-19955gj {
    display: none;
  }

  html[data-legacy='light'] .sidebar-logo-icon.logo-dark.svelte-19955gj,
  html[data-legacy='light'] .sidebar-logo-rk.logo-dark.svelte-19955gj {
    display: none;
  }

  html[data-legacy='light'] .sidebar-logo-icon.logo-light.svelte-19955gj,
  html[data-legacy='light'] .sidebar-logo-rk.logo-light.svelte-19955gj {
    display: block;
  }

  .sidebar-logo-rk.svelte-19955gj {
    height: 35px;
    width: auto;
    flex-shrink: 0;
    margin-left: 2px;
    opacity: 1;
    transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1), visibility 300ms;
  }

  .sidebar.collapsed.svelte-19955gj .sidebar-logo-rk:where(.svelte-19955gj) {
    opacity: 0;
    visibility: hidden;
    width: 0;
    margin-left: 0;
    overflow: hidden;
  }


  .sidebar-label.svelte-19955gj {
    font-size: inherit;
    font-weight: 500;
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: opacity 300ms ease, visibility 300ms ease, margin-left 300ms ease;
  }

  .sub-panel-title.svelte-19955gj {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
  }

  .back-btn.svelte-19955gj {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.15s;
    flex-shrink: 0;
  }

  .back-btn.svelte-19955gj:hover {
    background: transparent;
    color: var(--text-primary);
  }

  /* Sub-panel (Settings / Schedule) */
  .sidebar-content.svelte-19955gj {
    flex: 1;
    position: relative;
    overflow: hidden;
    -webkit-app-region: no-drag;
  }

  .sidebar-sub-panel.svelte-19955gj {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    min-width: 0;
    padding: 0 4px 0 0;
  }

  .sidebar.svelte-19955gj::-webkit-scrollbar {
    width: 4px;
  }

  .sidebar.svelte-19955gj::-webkit-scrollbar-track {
    background: transparent;
  }

  .sidebar.svelte-19955gj::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
  }

  .sidebar.svelte-19955gj::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
  }

  .sidebar.hide-scrollbar.svelte-19955gj::-webkit-scrollbar-thumb {
    background: transparent;
  }

  .sub-panel-header.svelte-19955gj {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 8px;
  }

  .header-icon-btn.svelte-19955gj {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: color 0.15s;
    margin-left: auto;
  }

  .header-icon-btn.svelte-19955gj:first-of-type {
    margin-left: auto;
  }

  .header-icon-btn.svelte-19955gj:last-of-type {
    margin-left: 0;
  }

  .header-icon-btn.svelte-19955gj:hover {
    color: var(--text-primary);
  }

  /* Nav */
  .sidebar-nav.svelte-19955gj {
    flex: 1;
    /* `auto`, not `hidden`. This is a column flex box, so its children default
       to flex-shrink:1 and get compressed when the viewport is short. With
       `hidden` the compressed rows are silently discarded with no scrollbar —
       which is how the bottom nav row became unreachable. Match
       `.sidebar-sub-panel`, which scrolls for the same reason.

       `overflow-x: hidden` is deliberate and must stay. `.nav-item` is
       `width:100%` + `margin-left:8px`, so every row overflows by 8px; the
       old `overflow:hidden` hid it, and switching to `overflow-y:auto` alone
       surfaced it as a horizontal scrollbar. Fix the row width instead of
       letting the nav scroll sideways. */
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 0;
  }

  .nav-item.svelte-19955gj {
    /* Never compress a nav row to make it fit — scroll instead. Paired with
       `overflow-y: auto` above so an 8th item stays reachable on a short
       window rather than vanishing. */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0px 8px 0px 0px;
    margin-left: 8px;
    border-radius: 10px;
    color: var(--text-secondary);
    cursor: pointer;
    border: none;
    background: transparent;
    font-size: 15px;
    font-family: inherit;
    font-weight: 500;
    width: 100%;
    text-align: left;
    transition: color 0.15s ease;
  }

  .nav-item.svelte-19955gj:hover {
    color: var(--text-primary);
  }

  /* Text glyph for nav rows that have no bitmap icon. Sized to the same
     footprint as the sibling <img> icons (agents uses 40x40) so the label
     baseline lines up across rows instead of drifting one row taller. */
  .nav-glyph.svelte-19955gj {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    font-size: 20px;
    line-height: 1;
    opacity: 0.85;
  }

  .nav-item.svelte-19955gj:active {
    transform: none;
  }

  .nav-item.active.svelte-19955gj {
    color: var(--text-primary);
  }

  .nav-item.svelte-19955gj img:where(.svelte-19955gj) {
    width: 33px;
    height: 33px;
    flex-shrink: 0;
    opacity: 0.4;
    margin: 0;
    margin-right: 7px;
    transition: opacity 0.15s ease, filter 0.15s ease;
  }

  .nav-item.svelte-19955gj img:where(.svelte-19955gj) {
    object-fit: contain;
    filter: brightness(0.7);
  }

  .nav-item.svelte-19955gj:hover img:where(.svelte-19955gj) {
    opacity: 0.85;
  }

  .nav-item.svelte-19955gj:hover img:where(.svelte-19955gj) {
    filter: brightness(1);
  }

  .nav-item.active.svelte-19955gj img:where(.svelte-19955gj) {
    opacity: 1;
  }

  .nav-item.active.svelte-19955gj img:where(.svelte-19955gj) {
    filter: brightness(1);
  }

  .sidebar.collapsed.svelte-19955gj .nav-item:where(.svelte-19955gj) {
    gap: 0;
  }

  /* ─── Sessions Page (sub-panel) ──────────────── */
  .sessions-page.svelte-19955gj {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 0;
    overflow-y: auto;
    overflow-x: hidden;
    min-width: 0;
    max-height: 100%;
  }

  .sessions-page.svelte-19955gj .onboarding-text:where(.svelte-19955gj) {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0 14px 6px;
    opacity: 0.6;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-width: 0;
    flex-shrink: 0;
  }

  /* Session search */
  .session-search-row.svelte-19955gj {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 4px 4px;
    padding: 7px 10px;
    border: none;
    border-radius: 8px;
  }

  .session-search-icon.svelte-19955gj {
    opacity: 0.4;
    flex-shrink: 0;
  }

  .session-search-input.svelte-19955gj {
    flex: 1;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 12px;
    font-family: inherit;
    outline: none;
  }

  .session-search-input.svelte-19955gj::placeholder {
    color: var(--text-muted);
  }

  .session-search-status.svelte-19955gj {
    font-size: 11px;
    color: var(--text-muted);
    padding: 4px 14px;
  }

  .session-search-results.svelte-19955gj {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 4px;
  }

  .session-search-result.svelte-19955gj {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: inherit;
    transition: color 0.15s;
  }

  .session-search-result.svelte-19955gj:hover {
    color: var(--text-primary);
  }

  .session-search-result-name.svelte-19955gj {
    font-size: 12px;
    color: var(--text-primary);
    font-weight: 500;
  }

  .session-search-result-snippet.svelte-19955gj {
    font-size: 10px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* New group input */
  .new-group-input-row.svelte-19955gj {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
  }

  .new-group-input.svelte-19955gj {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    font-size: 12px;
    font-family: inherit;
    outline: none;
  }

  .new-group-input.svelte-19955gj:focus {
    border-color: rgba(255, 255, 255, 0.3);
  }

  .new-group-confirm.svelte-19955gj,
  .new-group-cancel.svelte-19955gj {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
  }

  .new-group-confirm.svelte-19955gj:hover { color: var(--text-primary); }
  .new-group-confirm.svelte-19955gj:disabled { opacity: 0.3; cursor: not-allowed; }
  .new-group-cancel.svelte-19955gj:hover { color: #f87171; }

  /* Group sections */
  .session-group-section.svelte-19955gj {
    border-radius: 8px;
    transition: background 0.15s;
  }

  .group-header.svelte-19955gj {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s;
  }

  .group-header.svelte-19955gj:hover {
    background: rgba(255, 255, 255, 0.04);
  }

  .group-chevron.svelte-19955gj {
    width: 14px;
    height: 14px;
    opacity: 0.4;
    transition: transform 0.2s ease, opacity 0.15s;
    flex-shrink: 0;
  }

  .group-chevron.expanded.svelte-19955gj {
    transform: rotate(180deg);
    opacity: 0.6;
  }

  /* Folder arrow flashes blue while any session in the group is running */
  .group-chevron.running.svelte-19955gj {
    color: var(--accent-blue);
    opacity: 1;
    animation: svelte-19955gj-session-running-flash 1.4s ease-in-out infinite;
  }

  .group-name.svelte-19955gj {
    flex: 1;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .group-count.svelte-19955gj {
    font-size: 10px;
    color: var(--text-muted);
  }

  .group-actions.svelte-19955gj {
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.15s;
  }

  .group-header.svelte-19955gj:hover .group-actions:where(.svelte-19955gj) {
    opacity: 1;
  }

  .group-rename-input.svelte-19955gj {
    flex: 1;
    padding: 2px 6px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 12px;
    font-family: inherit;
    outline: none;
  }

  .group-sessions.svelte-19955gj {
    padding: 0 4px;
  }

  /* Session items */
  .sidebar-session-item.svelte-19955gj {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: var(--text-secondary);
    padding: 8px 8px;
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.15s ease, opacity 0.15s;
    position: relative;
    user-select: none;
  }

  .sidebar-session-item.svelte-19955gj:hover {
    color: var(--text-primary);
  }

  .sidebar-session-item.active.svelte-19955gj {
    color: var(--text-primary);
  }

  .sidebar-session-item.confirming.svelte-19955gj {
    background: rgba(239, 68, 68, 0.1);
  }

  .sidebar-session-item.dragging.svelte-19955gj {
    opacity: 0.4;
  }

  .sidebar-session-item.reordering.svelte-19955gj {
    opacity: 0;
  }

  .session-indicator.svelte-19955gj {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--text-secondary);
    opacity: 0.3;
    transition: opacity 0.15s ease, transform 0.15s ease;
  }

  .sidebar-session-item.svelte-19955gj:hover .session-indicator:where(.svelte-19955gj) {
    opacity: 0.5;
  }

  .sidebar-session-item.active.svelte-19955gj .session-indicator:where(.svelte-19955gj) {
    opacity: 0.8;
    transform: scale(1.3);
    background: var(--accent-blue);
  }

  /* Session dot flashes blue while its agent loop turn is in progress */
  .session-indicator.running.svelte-19955gj {
    background: var(--accent-blue);
    opacity: 1;
    transform: scale(1.35);
    box-shadow: 0 0 6px rgba(59, 130, 246, 0.4);
    animation: svelte-19955gj-session-running-flash 1.4s ease-in-out infinite;
  }

  @keyframes svelte-19955gj-session-running-flash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
  }

  .sidebar-session-name.svelte-19955gj {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sidebar-session-actions.svelte-19955gj {
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 150ms ease, visibility 150ms ease;
  }

  .sidebar-session-item.svelte-19955gj:hover .sidebar-session-actions:where(.svelte-19955gj),
  .sidebar-session-item.renaming.svelte-19955gj .sidebar-session-actions:where(.svelte-19955gj) {
    opacity: 1;
  }

  .sidebar-session-action.svelte-19955gj {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    opacity: 0.6;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: color 0.15s, opacity 0.15s;
  }

  .sidebar-session-action.svelte-19955gj:hover {
    color: var(--text-primary);
    opacity: 1;
  }

  .sidebar-session-action.save.svelte-19955gj {
    color: var(--text-primary);
    opacity: 0.8;
  }

  .sidebar-rename-input.svelte-19955gj {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    padding: 2px 6px;
    outline: none;
    min-width: 0;
  }

  .sidebar-rename-input.svelte-19955gj:focus {
    border: none;
  }

  .sidebar-session-item.renaming.svelte-19955gj {
    color: var(--text-primary);
  }

  /* Move-to-group popup */
  .move-popup.svelte-19955gj {
    position: fixed;
    min-width: 180px;
    background: var(--popup-bg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    z-index: 99999;
    animation: svelte-19955gj-slide-down 0.15s ease-out;
  }

  .move-popup-title.svelte-19955gj {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 10px 6px;
  }

  .move-popup-item.svelte-19955gj {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s, color 0.1s;
  }

  .move-popup-item.svelte-19955gj:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
  }

  @keyframes svelte-19955gj-slide-down {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Footer */
  .sidebar-footer.svelte-19955gj {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 16px;
    margin-top: auto;
    -webkit-app-region: no-drag;
  }

  .sidebar-footer.svelte-19955gj .nav-item:where(.svelte-19955gj) {
    gap: 12px;
  }

  .sidebar-footer.svelte-19955gj .sidebar-label:where(.svelte-19955gj) {
    font-size: inherit;
  }

  /* Trash Bin */
  .trash-section.svelte-19955gj {
    margin-top: 8px;
    border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
    padding-top: 8px;
  }

  .trash-header.svelte-19955gj {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    cursor: pointer;
    color: var(--text-secondary, rgba(255,255,255,0.5));
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    user-select: none;
    transition: color 0.15s;
  }

  .trash-header.svelte-19955gj:hover {
    color: var(--text-primary, rgba(255,255,255,0.85));
  }

  .trash-label.svelte-19955gj {
    flex: 1;
  }

  .trash-count.svelte-19955gj {
    color: var(--text-secondary, rgba(255,255,255,0.45));
    font-size: 10px;
    font-weight: 600;
  }

  .trash-chevron.svelte-19955gj {
    transition: transform 0.2s;
    opacity: 0.5;
  }

  .trash-chevron.expanded.svelte-19955gj {
    transform: rotate(180deg);
  }

  .trash-items.svelte-19955gj {
    padding: 4px 8px 8px;
  }

  .trash-item.svelte-19955gj {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    border-radius: 6px;
    margin-bottom: 2px;
    transition: background 0.1s;
  }

  .trash-item.svelte-19955gj:hover {
    background: var(--hover-bg, rgba(255,255,255,0.04));
  }

  .trash-item-name.svelte-19955gj {
    flex: 1;
    font-size: 12px;
    color: var(--text-secondary, rgba(255,255,255,0.5));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  .trash-item-actions.svelte-19955gj {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
  }

  .trash-action.svelte-19955gj {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    color: var(--text-secondary, rgba(255,255,255,0.4));
    transition: background 0.1s, color 0.1s;
  }

  .trash-action.svelte-19955gj:hover {
    background: var(--hover-bg, rgba(255,255,255,0.08));
    color: var(--text-primary, rgba(255,255,255,0.85));
  }

  .trash-action.restore.svelte-19955gj:hover {
    color: var(--accent-color, #6ee7b7);
  }

  .trash-action.delete.svelte-19955gj:hover {
    color: var(--danger-color, #f87171);
  }

  .empty-trash-btn.svelte-19955gj {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 6px;
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary, rgba(255,255,255,0.4));
    font-size: 11px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.1s, color 0.1s, border-color 0.1s;
  }

  .empty-trash-btn.svelte-19955gj:hover {
    background: rgba(248, 113, 113, 0.08);
    color: var(--danger-color, #f87171);
    border-color: rgba(248, 113, 113, 0.2);
  }

  .empty-trash-btn.confirming.svelte-19955gj {
    background: rgba(248, 113, 113, 0.14);
    color: var(--danger-color, #f87171);
    border-color: rgba(248, 113, 113, 0.35);
  }

  .trash-notice.svelte-19955gj {
    font-size: 10.5px;
    line-height: 1.45;
    color: var(--text-secondary, rgba(255,255,255,0.5));
    background: var(--accent-dim, rgba(255,255,255,0.04));
    border-radius: 6px;
    padding: 6px 8px;
    margin: 4px 0 8px;
    /* Root .sidebar sets white-space: nowrap (inherited) -> opt back in to wrap. */
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .trash-empty.svelte-19955gj {
    font-size: 11px;
    font-style: italic;
    color: var(--text-secondary, rgba(255,255,255,0.35));
    padding: 6px 8px;
  }


  .popover-root.svelte-1kvtjs3 {
    width: 100vw;
    height: 100vh;
    /* BLEED padding gives the popover card's drop-shadow room to fade (the
       window is card + 14px halo on every side), matching the pill. Flex-center
       the card so the window's center == the card's center → positioning the
       window centered on the pill truly centers the card (no manual offset). */
    padding: 14px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-app-region: no-drag;
    overflow: hidden;
  }


  .ob-backdrop.svelte-vabsgi {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-10);
    background: rgba(10, 4, 6, 0.62);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    animation: svelte-vabsgi-ob-fade var(--transition-default);
    pointer-events: auto;
  }

  .ob-card.svelte-vabsgi {
    width: 100%;
    max-width: 540px;
    height: min(640px, 86vh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    pointer-events: auto;
    position: relative;
    background: var(--glass-elevated-bg);
    -webkit-backdrop-filter: var(--glass-elevated-blur);
    backdrop-filter: var(--glass-elevated-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-2xl);
    box-shadow: var(--glass-shadow);
    animation: svelte-vabsgi-ob-scale var(--transition-default);
  }

  @keyframes svelte-vabsgi-ob-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes svelte-vabsgi-ob-scale { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }

  /* Header */
  .ob-header.svelte-vabsgi {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-10) var(--space-12) var(--space-6);
    border-bottom: 1px solid var(--glass-border);
  }
  .ob-titles.svelte-vabsgi { flex: 1; min-width: 0; }
  .ob-title.svelte-vabsgi {
    margin: 0 0 var(--space-4);
    font-size: var(--text-2xl);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    letter-spacing: -0.01em;
  }
  /* Step indicator — clean text stepper, no pill/"circle" borders.
     Matches Ork's muted uppercase-label aesthetic (cf. .section-title). */
  .ob-steps.svelte-vabsgi {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  .ob-step-sep.svelte-vabsgi {
    width: 14px;
    height: 1px;
    background: var(--glass-border);
    flex-shrink: 0;
  }
  .ob-step.svelte-vabsgi {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    transition: color var(--transition-fast);
  }
  .ob-step.active.svelte-vabsgi {
    color: var(--text-primary);
    font-weight: var(--weight-semibold);
  }
  .ob-step.done.svelte-vabsgi {
    color: var(--text-secondary);
  }

  .ob-close.svelte-vabsgi {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    padding: 0;
  }
  .ob-close.svelte-vabsgi svg { width: 14px; height: 14px; }
  .ob-close.svelte-vabsgi:hover { background: rgba(255, 255, 255, 0.08); color: var(--text-primary); }

  /* Body */
  .ob-body.svelte-vabsgi {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-10) var(--space-12);
  }

  /* Welcome mark — logo + VoxDrop credit, centered */
  .ob-welcome-mark.svelte-vabsgi {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
  }
  /* Full Ork lockup = circle + rk wordmark (mirrors Sidebar.svelte), scaled up for the hero */
  .ob-logo-lockup.svelte-vabsgi {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }
  .ob-logo-circle.svelte-vabsgi {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 50%;
  }
  .ob-logo-rk.svelte-vabsgi {
    height: 54px;
    width: auto;
    flex-shrink: 0;
  }
  .ob-byline.svelte-vabsgi {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
  }
  /* Inline text link (opens in system browser via open_external) */
  .ob-link.svelte-vabsgi {
    display: inline;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--transition-fast);
  }
  .ob-link.svelte-vabsgi:hover {
    color: var(--text-primary);
  }
  .ob-lede.svelte-vabsgi {
    margin: 0 0 var(--space-6);
    font-size: var(--text-md);
    line-height: 1.55;
    color: var(--text-secondary);
  }
  .ob-bullets.svelte-vabsgi {
    list-style: none;
    margin: 0 0 var(--space-6);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  .ob-bullets.svelte-vabsgi li:where(.svelte-vabsgi) {
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--text-secondary);
    padding-left: var(--space-6);
    position: relative;
  }
  .ob-bullets.svelte-vabsgi li:where(.svelte-vabsgi)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--accent-highlight);
  }
  .ob-bullets.svelte-vabsgi strong:where(.svelte-vabsgi) { color: var(--text-primary); font-weight: var(--weight-semibold); }
  .ob-hint.svelte-vabsgi {
    margin: var(--space-6) 0 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.5;
  }

  /* Field labels + inputs (mirror SettingsPanel) */
  .ob-field-label.svelte-vabsgi {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: var(--space-6) 0 var(--space-2);
  }
  .ob-field-label.svelte-vabsgi:first-child { margin-top: 0; }
  .ob-optional.svelte-vabsgi { text-transform: none; letter-spacing: 0; opacity: 0.7; }

  .key-input.svelte-vabsgi {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.04);
    border: none;
    border-radius: 10px;
    padding: var(--space-3) var(--space-4);
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--text-base);
  }
  .key-input.svelte-vabsgi::placeholder { color: var(--text-muted); opacity: 0.6; }
  .key-input.svelte-vabsgi:focus { outline: none; background: rgba(255, 255, 255, 0.07); }

  .key-input-row.svelte-vabsgi { display: flex; gap: var(--space-2); align-items: stretch; }
  .key-input-row.svelte-vabsgi .key-input:where(.svelte-vabsgi) { flex: 1; min-width: 0; }
  .show-toggle.svelte-vabsgi {
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.04);
    border: none;
    border-radius: 10px;
    padding: 0 var(--space-5);
    color: var(--text-muted);
    font-family: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
  }
  .show-toggle.svelte-vabsgi:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.07); }

  /* Provider select (copied from SettingsPanel for visual parity) */
  .key-select-wrapper.svelte-vabsgi { position: relative; }
  .key-select-btn.svelte-vabsgi {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.04);
    border: none;
    border-radius: 10px;
    padding: var(--space-3) var(--space-4);
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--text-base);
    cursor: pointer;
    text-align: left;
  }
  .key-select-btn.svelte-vabsgi:hover { background: rgba(255, 255, 255, 0.07); }
  .key-select-name.svelte-vabsgi { flex: 1; }
  .key-select-btn.svelte-vabsgi .chevron:where(.svelte-vabsgi) { margin-left: auto; font-size: 10px; color: var(--text-muted); }
  .provider-dot.svelte-vabsgi {
    width: var(--space-3);
    height: var(--space-3);
    border-radius: var(--radius-full);
    flex-shrink: 0;
  }
  .free-tag.svelte-vabsgi {
    font-size: 9px;
    padding: 1px 6px;
    border-radius: var(--radius-full);
    background: rgba(34, 197, 94, 0.14);
    color: var(--accent-green);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.4px;
  }

  .select-clickaway.svelte-vabsgi {
    position: fixed;
    inset: 0;
    z-index: var(--z-dropdown);
    background: transparent;
    border: none;
    cursor: default;
    padding: 0;
  }
  .key-select-menu.svelte-vabsgi {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: var(--z-toast);
    background: rgba(14, 14, 16, 0.7);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 4px;
    box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    animation: svelte-vabsgi-ob-fade 0.1s ease-out;
  }
  .select-menu-item.svelte-vabsgi {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    border: none;
    background: none;
    color: var(--text-secondary);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    border-radius: 10px;
    transition: all var(--transition-fast);
    text-align: left;
  }
  .select-menu-item.svelte-vabsgi:hover { background: rgba(255, 255, 255, 0.06); color: var(--text-primary); }
  .select-menu-item.active.svelte-vabsgi { background: rgba(210, 180, 140, 0.12); color: var(--text-primary); }
  .select-menu-item.svelte-vabsgi .check:where(.svelte-vabsgi) { margin-left: auto; color: var(--accent-primary); font-size: 11px; }

  /* Get-a-key external button */
  .get-key-btn.svelte-vabsgi {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-4);
    padding: var(--space-2) var(--space-5);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
  }
  .get-key-btn.svelte-vabsgi:hover { border-color: var(--glass-border-hover); color: var(--text-primary); background: rgba(255, 255, 255, 0.06); }
  .get-key-btn.svelte-vabsgi svg { width: 11px; height: 11px; }

  /* Key status feedback */
  .key-status.svelte-vabsgi {
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: 10px;
    font-size: var(--text-sm);
    line-height: 1.45;
  }
  .key-status.ok.svelte-vabsgi { background: rgba(34, 197, 94, 0.1); color: var(--accent-green); }
  .key-status.err.svelte-vabsgi { background: rgba(239, 68, 68, 0.1); color: var(--accent-red); }
  .key-status.warn.svelte-vabsgi { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }

  /* Basics — clean divider list: no icon columns, no grey card fills */
  .ob-cards.svelte-vabsgi { display: flex; flex-direction: column; }
  .ob-card-row.svelte-vabsgi {
    padding: var(--space-5) 0;
    border-bottom: 1px solid var(--glass-border);
  }
  .ob-card-row.svelte-vabsgi:first-child { padding-top: 0; }
  .ob-card-row.svelte-vabsgi:last-child { border-bottom: none; padding-bottom: 0; }
  .ob-card-title.svelte-vabsgi { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-primary); margin-bottom: var(--space-2); }
  .ob-card-text.svelte-vabsgi { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.5; }

  /* Skip warning popover */
  .skip-warning.svelte-vabsgi {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-10);
    background: rgba(10, 4, 6, 0.5);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: svelte-vabsgi-ob-fade var(--transition-fast);
  }
  .skip-warning-card.svelte-vabsgi {
    width: 100%;
    max-width: 420px;
    padding: var(--space-10);
    border-radius: var(--radius-xl);
    border: 1px solid var(--glass-border);
    background: var(--glass-elevated-bg);
    -webkit-backdrop-filter: var(--glass-elevated-blur);
    backdrop-filter: var(--glass-elevated-blur);
    box-shadow: var(--glass-shadow);
    text-align: center;
  }
  .skip-warning-title.svelte-vabsgi { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-primary); margin-bottom: var(--space-3); }
  .skip-warning-text.svelte-vabsgi { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.5; margin: 0 0 var(--space-6); }
  .skip-warning-actions.svelte-vabsgi { display: flex; gap: var(--space-3); justify-content: center; }

  /* Footer */
  .ob-footer.svelte-vabsgi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-12) var(--space-10);
    border-top: 1px solid var(--glass-border);
  }
  .ob-footer-left.svelte-vabsgi { display: flex; gap: var(--space-3); }

  .ob-btn.svelte-vabsgi {
    padding: var(--space-3) var(--space-8);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: none;
  }
  /* Ghost / secondary — transparent outline (mirrors PermissionDialog .perm-btn.deny).
     No flat grey fills — glass + border only. */
  .ob-btn.ghost.svelte-vabsgi {
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
  }
  .ob-btn.ghost.svelte-vabsgi:hover { border-color: var(--glass-border-hover); color: var(--text-primary); background: rgba(255, 255, 255, 0.04); }

  /* Primary — glass white-tint (mirrors PermissionDialog .perm-btn.approve). Not a solid
     fill: translucent + border + primary text, so it reads as glass, not grey/white. */
  .ob-btn.primary.svelte-vabsgi {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--glass-border-hover);
    color: var(--text-primary);
    font-weight: var(--weight-medium);
  }
  .ob-btn.primary.svelte-vabsgi:hover { background: rgba(255, 255, 255, 0.16); }
  .ob-btn.primary.svelte-vabsgi:disabled { opacity: 0.35; cursor: not-allowed; }


  .question-backdrop.svelte-1qnbk1w {
    position: fixed;
    inset: 0;
    display: block;
    z-index: var(--z-dropdown);
    pointer-events: none;
  }

  .question-panel.svelte-1qnbk1w {
    position: absolute;
    background: rgba(20, 18, 16, 0.95);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    min-width: 380px;
    min-height: 300px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    pointer-events: auto;
    animation: svelte-1qnbk1w-slide-up 0.2s ease-out;
  }

  @keyframes svelte-1qnbk1w-slide-up {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .question-header.svelte-1qnbk1w {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
    cursor: grab;
  }

  .question-icon.svelte-1qnbk1w {
    font-size: 16px;
  }

  .question-text.svelte-1qnbk1w {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
  }

  .question-close.svelte-1qnbk1w {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s;
    padding: 0;
    flex-shrink: 0;
  }

  .question-close.svelte-1qnbk1w svg {
    width: 14px;
    height: 14px;
  }

  .question-close.svelte-1qnbk1w:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
  }

  .question-body.svelte-1qnbk1w {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
  }

  .question-item.svelte-1qnbk1w {
    margin-bottom: 16px;
  }

  .question-item.svelte-1qnbk1w:last-child {
    margin-bottom: 0;
  }

  .question-body-text.svelte-1qnbk1w {
    font-size: 13px;
    color: var(--text-primary);
    margin-bottom: 8px;
  }

  .question-options.svelte-1qnbk1w {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
  }

  .option-btn.svelte-1qnbk1w {
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg-light);
    color: var(--text-secondary);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
  }

  .option-btn.svelte-1qnbk1w:hover {
    border-color: var(--glass-border-hover);
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
  }

  .option-btn.selected.svelte-1qnbk1w {
    border-color: var(--accent-primary);
    color: var(--text-primary);
    background: rgba(210, 180, 140, 0.15);
  }

  .custom-label.svelte-1qnbk1w {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 6px;
  }

  .question-input.svelte-1qnbk1w {
    width: 100%;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-default);
    background: var(--glass-bg-input);
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
  }

  .question-input.svelte-1qnbk1w:focus {
    border-color: var(--accent-primary);
  }

  .question-footer.svelte-1qnbk1w {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 16px 14px;
    border-top: 1px solid var(--glass-border);
    flex-shrink: 0;
  }

  .cancel-btn.svelte-1qnbk1w {
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid var(--glass-border);
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
  }

  .cancel-btn.svelte-1qnbk1w:hover {
    border-color: var(--glass-border-hover);
    color: var(--text-primary);
  }

  .submit-btn.svelte-1qnbk1w {
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
  }

  .submit-btn.svelte-1qnbk1w:hover {
    background: rgba(255, 255, 255, 0.16);
  }


  .ask-backdrop.svelte-16c3vvg {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: block;
    pointer-events: none;
  }
  .ask-dialog.svelte-16c3vvg {
    position: fixed;
    background: var(--popup-bg, rgba(20, 18, 16, 0.86));
    backdrop-filter: var(--popup-blur, blur(48px));
    -webkit-backdrop-filter: var(--popup-blur, blur(48px));
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.16));
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
    color: var(--text-primary, #f5f5f0);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: svelte-16c3vvg-ask-fade-in 0.16s ease-out both;
    pointer-events: auto;
  }
  @keyframes svelte-16c3vvg-ask-fade-in {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
  }
  .ask-body.svelte-16c3vvg {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .ask-header.svelte-16c3vvg {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px 12px;
    cursor: grab;
    border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
  }
  .ask-progress.svelte-16c3vvg {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent-blue, #3b82f6);
    background: var(--accent-blue-bg, rgba(59, 130, 246, 0.12));
    border: 1px solid rgba(59, 130, 246, 0.3);
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
  }
  .ask-icon.svelte-16c3vvg { opacity: 0.7; flex-shrink: 0; }
  .ask-title.svelte-16c3vvg {
    font-size: 13px;
    font-weight: 600;
    flex: 1;
  }
  .ask-close.svelte-16c3vvg {
    background: transparent;
    border: 0;
    color: var(--text-secondary, #a0a098);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ask-close.svelte-16c3vvg:hover { background: var(--white-5, rgba(255, 255, 255, 0.08)); color: var(--text-primary, #f5f5f0); }
  .ask-scroll.svelte-16c3vvg {
    flex: 1;
    overflow-y: auto;
    padding: 4px 18px 12px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .ask-question.svelte-16c3vvg {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 0;
  }
  .q-header.svelte-16c3vvg {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .q-header-row.svelte-16c3vvg {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }
  .q-multiselect-badge.svelte-16c3vvg {
    font-size: 10px;
    font-weight: 700;
    color: var(--accent-blue, #3b82f6);
    background: var(--accent-blue-bg, rgba(59, 130, 246, 0.12));
    border: 1px solid rgba(59, 130, 246, 0.35);
    padding: 2px 8px;
    border-radius: 10px;
  }
  .q-multiselect-hint.svelte-16c3vvg {
    font-size: 10px;
    opacity: 0.5;
    font-style: italic;
  }
  .q-pill.svelte-16c3vvg {
    align-self: flex-start;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent-blue, #3b82f6);
    background: var(--accent-blue-bg, rgba(59, 130, 246, 0.12));
    border: 1px solid rgba(59, 130, 246, 0.35);
    padding: 2px 8px;
    border-radius: 4px;
  }
  .q-prompt.svelte-16c3vvg {
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-primary, #f5f5f0);
  }
  .q-body.svelte-16c3vvg {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 4px;
  }
  .q-options.svelte-16c3vvg {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .q-option.svelte-16c3vvg {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12));
    background: var(--white-4, rgba(255, 255, 255, 0.04));
    border-radius: 8px;
    color: var(--text-primary, #f5f5f0);
    cursor: pointer;
    text-align: left;
    font: inherit;
    transition: background 0.12s ease, border-color 0.12s ease;
  }
  .q-option.svelte-16c3vvg:hover { background: var(--white-8, rgba(255, 255, 255, 0.1)); }
  .q-option.svelte-16c3vvg:focus-visible {
    outline: none;
    border-color: var(--accent-blue, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
  }
  .q-option-picked.svelte-16c3vvg {
    background: var(--accent-blue-tint, rgba(59, 130, 246, 0.18));
    border-color: rgba(59, 130, 246, 0.45);
  }
  .q-key-hint.svelte-16c3vvg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9.5px;
    font-weight: 700;
    color: var(--text-secondary, #a0a098);
    background: var(--white-6, rgba(255, 255, 255, 0.06));
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
    border-radius: 4px;
    margin-top: 1px;
  }
  .q-option-picked.svelte-16c3vvg .q-key-hint:where(.svelte-16c3vvg) {
    color: white;
    background: var(--accent-blue, #3b82f6);
    border-color: var(--accent-blue, #3b82f6);
  }
  .q-option-text.svelte-16c3vvg {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
  }
  .q-radio.svelte-16c3vvg, .q-checkbox.svelte-16c3vvg {
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--text-secondary, #a0a098);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--text-primary, #f5f5f0);
  }
  .q-radio-checked.svelte-16c3vvg, .q-checkbox-checked.svelte-16c3vvg {
    background: var(--accent-blue, #3b82f6);
    border-color: var(--accent-blue, #3b82f6);
  }
  .q-checkbox.svelte-16c3vvg {
    border-radius: 3px;
  }
  .q-option-label.svelte-16c3vvg {
    font-size: 12.5px;
    line-height: 1.35;
    flex: 1;
  }
  .q-option-desc.svelte-16c3vvg {
    font-size: 11px;
    opacity: 0.6;
    margin-top: 2px;
    display: block;
  }
  .q-option-other.svelte-16c3vvg {
    font-style: italic;
    opacity: 0.85;
  }
  .q-freetext.svelte-16c3vvg {
    width: 100%;
  }
  .q-freetext-input.svelte-16c3vvg {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.16));
    background: var(--white-4, rgba(255, 255, 255, 0.04));
    border-radius: 8px;
    color: var(--text-primary, #f5f5f0);
    font-size: 12.5px;
    font: inherit;
  }
  .q-freetext-input.svelte-16c3vvg:focus {
    outline: none;
    border-color: var(--accent-blue, #3b82f6);
    background: var(--accent-blue-bg, rgba(59, 130, 246, 0.08));
  }
  .q-other-link.svelte-16c3vvg {
    background: transparent;
    border: 0;
    color: var(--text-secondary, #a0a098);
    font-size: 11px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    padding: 2px 0;
    align-self: flex-start;
  }
  .q-other-link.svelte-16c3vvg:hover { color: var(--text-primary, #f5f5f0); }
  .ask-actions.svelte-16c3vvg {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px 16px;
    border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    justify-content: flex-end;
  }
  .ask-hint.svelte-16c3vvg {
    flex: 1;
    font-size: 10.5px;
    opacity: 0.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ask-btn.svelte-16c3vvg {
    border: 0;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    background: var(--glass-border, rgba(255, 255, 255, 0.12));
    color: var(--text-primary, #f5f5f0);
    font: inherit;
  }
  .ask-btn.svelte-16c3vvg:disabled { opacity: 0.4; cursor: not-allowed; }
  .ask-btn.cancel.svelte-16c3vvg { background: transparent; }
  .ask-btn.cancel.svelte-16c3vvg:hover { background: var(--white-5, rgba(255, 255, 255, 0.08)); }
  .ask-btn.submit.svelte-16c3vvg {
    background: var(--accent-blue, #3b82f6);
    color: white;
  }
  .ask-btn.submit.svelte-16c3vvg:hover:not(:disabled) { background: var(--accent-blue-dark, #2563eb); }
  .popup-resize-handle.svelte-16c3vvg {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 16px;
    height: 16px;
    cursor: nwse-resize;
  }


  .inline-root.svelte-ou8lxv {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: hidden;
  }

  .popup-layer.svelte-ou8lxv { position: fixed; inset: 0; z-index: 999; pointer-events: none; }

  .editor-popup.svelte-ou8lxv {
    position: fixed;
    background: var(--dropdown-bg);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
    backdrop-filter: var(--dropdown-blur);
    -webkit-backdrop-filter: var(--dropdown-blur);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    pointer-events: auto;
    animation: svelte-ou8lxv-popup-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  }

  @keyframes svelte-ou8lxv-popup-in {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
  }

  /* ── Header ── */
  .editor-header.svelte-ou8lxv {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--glass-border);
    cursor: grab;
    flex-shrink: 0;
    user-select: none;
  }
  .editor-header.svelte-ou8lxv:active { cursor: grabbing; }

  .header-icon.svelte-ou8lxv { color: var(--text-muted); opacity: 0.5; display: flex; align-items: center; }
  .header-name.svelte-ou8lxv { font-size: 14px; font-weight: 600; color: var(--text-primary); }

  .header-agent-dot.svelte-ou8lxv {
    width: 5px; height: 5px; border-radius: 50%; background: #22c55e; flex-shrink: 0;
  }
  .header-agent-dot.running.svelte-ou8lxv { background: #f97316; animation: svelte-ou8lxv-pulse 1.5s infinite; }

  @keyframes svelte-ou8lxv-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

  .header-stats.svelte-ou8lxv { font-size: 11px; color: var(--text-muted); }

  .close-btn.svelte-ou8lxv {
    width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
    border: none; background: none; color: var(--text-muted); cursor: pointer;
    border-radius: 6px; transition: all 0.15s; padding: 0; flex-shrink: 0; margin-left: auto;
  }
  .close-btn.svelte-ou8lxv svg { width: 14px; height: 14px; }
  .close-btn.svelte-ou8lxv:hover { background: rgba(255, 255, 255, 0.08); color: var(--text-primary); }

  /* ── Body ── */
  .editor-body.svelte-ou8lxv { display: flex; flex: 1; overflow: hidden; }

  /* ── Content area ── */
  .content-area.svelte-ou8lxv { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

  /* ── Tab bar ── */
  .tab-bar.svelte-ou8lxv {
    display: flex; align-items: center; gap: 0;
    padding: 0 16px; border-bottom: 1px solid var(--glass-border); flex-shrink: 0;
  }

  .tab-btn.svelte-ou8lxv {
    padding: 8px 14px; border: none; border-bottom: 2px solid transparent;
    background: none; color: var(--text-muted); font-size: 12px; font-weight: 500;
    font-family: inherit; cursor: pointer; transition: all 0.15s;
  }
  .tab-btn.svelte-ou8lxv:hover { color: var(--text-secondary); }
  .tab-btn.active.svelte-ou8lxv { color: var(--text-primary); border-bottom-color: var(--text-primary); }

  .tab-actions.svelte-ou8lxv { margin-left: auto; display: flex; gap: 2px; }
  .action-link.svelte-ou8lxv {
    width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
    border: none; background: transparent; color: var(--text-muted); cursor: pointer;
    transition: color 0.15s; padding: 0;
  }
  .action-link.svelte-ou8lxv:hover { color: var(--text-primary); }
  .action-link.danger.svelte-ou8lxv:hover { color: var(--accent-red); }

  /* ── Delete confirmation ── */
  .delete-confirm.svelte-ou8lxv {
    position: absolute; bottom: 12px; left: 12px; right: 12px;
    background: rgba(30, 10, 10, 0.95); border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px; padding: 10px 12px; z-index: 10;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
  }
  .delete-confirm-text.svelte-ou8lxv { font-size: 11px; color: var(--text-secondary); flex: 1; }
  .delete-confirm-actions.svelte-ou8lxv { display: flex; gap: 6px; flex-shrink: 0; }
  .delete-confirm-btn.svelte-ou8lxv {
    border: none; border-radius: 4px; padding: 4px 10px; font-size: 11px;
    font-family: inherit; cursor: pointer; transition: opacity 0.15s;
  }
  .delete-confirm-btn.cancel.svelte-ou8lxv { background: rgba(255, 255, 255, 0.08); color: var(--text-muted); }
  .delete-confirm-btn.cancel.svelte-ou8lxv:hover { opacity: 0.8; }
  .delete-confirm-btn.confirm.svelte-ou8lxv { background: #ef4444; color: white; }
  .delete-confirm-btn.confirm.svelte-ou8lxv:hover { background: #dc2626; }

  .tab-divider.svelte-ou8lxv { height: 1px; background: var(--glass-border); margin: 0 16px; }

  /* ── Tab content ── */
  .tab-content.svelte-ou8lxv {
    flex: 1; overflow-y: auto; padding: 12px 16px;
    display: flex; flex-direction: column; gap: 10px;
    position: relative;
  }

  .section-label.svelte-ou8lxv {
    font-size: 10px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--text-muted);
  }

  /* ── Nav header (back button) ── */
  .nav-header.svelte-ou8lxv {
    display: flex; align-items: center; gap: 6px;
    padding-bottom: 8px; border-bottom: 1px solid var(--glass-border);
    margin-bottom: 4px; flex-shrink: 0;
  }

  .back-btn.svelte-ou8lxv {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 6px;
    border: none; background: transparent; color: var(--text-secondary);
    cursor: pointer; transition: color 0.15s; padding: 0; flex-shrink: 0;
  }
  .back-btn.svelte-ou8lxv:hover { color: var(--text-primary); }

  .nav-title.svelte-ou8lxv { font-size: 12px; font-weight: 600; }

  /* ── Module Overview ── */
  .overview-summary.svelte-ou8lxv {
    display: flex; align-items: baseline; gap: 4px; font-size: 12px; margin-bottom: 2px;
  }
  .overview-count.svelte-ou8lxv { font-weight: 600; color: var(--text-primary); }
  .overview-sep.svelte-ou8lxv { color: var(--text-muted); opacity: 0.3; }
  .overview-stat.svelte-ou8lxv { color: var(--text-secondary); }

  /* ── Module Accordions ── */
  .module-accordions.svelte-ou8lxv { display: flex; flex-direction: column; }
  .mem-accordion.svelte-ou8lxv { margin-bottom: 1px; }
  .mem-accordion-header.svelte-ou8lxv {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 7px 4px; border: none; background: none;
    color: var(--text-muted); font-size: 12px; font-weight: 500;
    font-family: inherit; cursor: pointer; transition: color 0.15s;
  }
  .mem-accordion-header.svelte-ou8lxv:hover { color: var(--text-primary); }
  .mem-accordion-label.svelte-ou8lxv { text-align: left; }
  .mem-accordion-desc.svelte-ou8lxv {
    flex: 1; font-size: 10px; color: var(--text-muted); opacity: 0.4;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    text-align: left; font-weight: 400;
  }
  .mem-accordion-count.svelte-ou8lxv { font-size: 10px; opacity: 0.4; }
  .mem-accordion-chevron.svelte-ou8lxv {
    opacity: 0.3; transition: transform 0.2s ease; flex-shrink: 0;
  }
  .mem-accordion-chevron.open.svelte-ou8lxv { transform: rotate(180deg); opacity: 0.6; }
  .mem-accordion-body.svelte-ou8lxv {
    padding: 0 0 4px 24px;
    display: flex; flex-direction: column; gap: 1px;
  }
  .mem-entry-row.svelte-ou8lxv {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 4px; cursor: pointer; transition: color 0.15s;
    color: var(--text-secondary);
  }
  .mem-entry-row.svelte-ou8lxv:hover { color: var(--text-primary); }
  .mem-entry-text.svelte-ou8lxv {
    flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0;
  }
  .mem-entry-heading.svelte-ou8lxv {
    font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .mem-entry-preview.svelte-ou8lxv {
    font-size: 10px; color: var(--text-muted); opacity: 0.6;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .mem-entry-age.svelte-ou8lxv { font-size: 10px; flex-shrink: 0; opacity: 0.4; }
  .mem-search-row.svelte-ou8lxv {
    display: flex; gap: 6px; padding: 4px 0 6px;
  }
  .mem-search-input.svelte-ou8lxv {
    flex: 1; border: none; border-bottom: 1px solid var(--glass-border);
    background: transparent; color: var(--text-primary); font-size: 11px;
    font-family: inherit; outline: none; padding: 3px 0;
  }
  .mem-search-input.svelte-ou8lxv::placeholder { color: var(--text-muted); }
  .mem-search-filter.svelte-ou8lxv {
    border: none; background: transparent; color: var(--text-muted);
    font-size: 10px; font-family: inherit; outline: none; cursor: pointer;
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 4px center;
    padding-right: 16px; padding: 3px 16px 3px 4px;
  }
  .mem-search-filter.svelte-ou8lxv option:where(.svelte-ou8lxv) { background: var(--dropdown-bg); color: var(--text-primary); }
  .search-header.svelte-ou8lxv { border-top: 1px solid var(--glass-border); margin-top: 4px; padding-top: 8px; }

  /* ── Create memory section ── */
  .create-section.svelte-ou8lxv {
    border-bottom: 1px solid var(--glass-border);
    margin-bottom: 12px;
  }
  .create-header.svelte-ou8lxv {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 8px 4px; border: none; background: none;
    color: var(--text-muted); font-size: 12px; font-weight: 500;
    font-family: inherit; cursor: pointer; transition: color 0.15s;
  }
  .create-header.svelte-ou8lxv:hover { color: var(--text-primary); }
  .create-chevron.svelte-ou8lxv {
    opacity: 0.3; transition: transform 0.2s ease; margin-left: auto;
  }
  .create-chevron.open.svelte-ou8lxv { transform: rotate(180deg); opacity: 0.6; }
  .create-body.svelte-ou8lxv {
    padding: 0 4px 10px;
    display: flex; flex-direction: column; gap: 4px;
  }
  .category-label.svelte-ou8lxv {
    font-size: 10px; color: var(--text-muted); text-transform: uppercase;
    letter-spacing: 0.5px; opacity: 0.6;
  }

  /* ── Entry Detail ── */
  .entry-detail-view.svelte-ou8lxv { display: flex; flex-direction: column; gap: 10px; flex: 1; }

  .entry-heading.svelte-ou8lxv { font-size: 16px; font-weight: 600; color: var(--text-primary); margin: 0; line-height: 1.3; }
  .summary-line.svelte-ou8lxv { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
  .summary-sep.svelte-ou8lxv { color: var(--text-muted); opacity: 0.4; font-size: 10px; }
  .summary-type.svelte-ou8lxv { font-size: 10px; }
  .entry-tier-label.svelte-ou8lxv { font-size: 10px; color: var(--text-muted); text-transform: capitalize; }
  .tag-chip.svelte-ou8lxv {
    font-size: 10px; color: var(--text-muted);
    padding: 2px 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.04);
  }
  .entry-content.svelte-ou8lxv {
    font-size: 12px; color: var(--text-secondary); line-height: 1.6;
    margin: 0; flex: 1;
    overflow-y: auto; max-height: 300px; padding: 10px;
    background: rgba(255, 255, 255, 0.02); border-radius: 8px;
    border: 1px solid var(--glass-border);
  }
  /* Rendered markdown inside an entry */
  .entry-content.svelte-ou8lxv p { margin: 0 0 8px; }
  .entry-content.svelte-ou8lxv p:last-child { margin-bottom: 0; }
  .entry-content.svelte-ou8lxv h1,
  .entry-content.svelte-ou8lxv h2,
  .entry-content.svelte-ou8lxv h3,
  .entry-content.svelte-ou8lxv h4 {
    font-size: 13px; font-weight: 600; color: var(--text-primary);
    margin: 12px 0 6px; line-height: 1.3;
  }
  .entry-content.svelte-ou8lxv h1:first-child,
  .entry-content.svelte-ou8lxv h2:first-child,
  .entry-content.svelte-ou8lxv h3:first-child { margin-top: 0; }
  .entry-content.svelte-ou8lxv ul,
  .entry-content.svelte-ou8lxv ol { margin: 0 0 8px; padding-left: 18px; }
  .entry-content.svelte-ou8lxv li { margin: 2px 0; }
  .entry-content.svelte-ou8lxv code {
    font-size: 11px; padding: 1px 5px; border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
  }
  .entry-content.svelte-ou8lxv a { color: var(--text-secondary); text-decoration: underline; }
  .entry-content.svelte-ou8lxv blockquote {
    margin: 0 0 8px; padding: 4px 10px; border-left: 2px solid var(--glass-border);
    color: var(--text-muted);
  }
  .entry-content.svelte-ou8lxv hr {
    border: none; border-top: 1px solid var(--glass-border); margin: 10px 0;
  }
  .entry-footer.svelte-ou8lxv {
    display: flex; gap: 16px; padding-top: 8px;
    border-top: 1px solid var(--glass-border); flex-shrink: 0;
  }
  .meta-row.svelte-ou8lxv { display: flex; align-items: center; gap: 6px; }
  .meta-label.svelte-ou8lxv { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; }
  .meta-value.svelte-ou8lxv { font-size: 11px; color: var(--text-secondary); }

  /* ── Edit form ── */
  .edit-form.svelte-ou8lxv { display: flex; flex-direction: column; gap: 8px; flex: 1; }
  .edit-heading.svelte-ou8lxv {
    width: 100%; font-size: 14px; font-weight: 600; padding: 6px 0;
    border: none; border-bottom: 1px solid var(--glass-border);
    background: transparent; color: var(--text-primary); font-family: inherit;
    box-sizing: border-box; outline: none;
  }
  .edit-textarea.svelte-ou8lxv {
    width: 100%; flex: 1; font-size: 12px; padding: 8px 0;
    border: none; border-bottom: 1px solid var(--glass-border);
    background: transparent; color: var(--text-primary); font-family: inherit;
    resize: none; line-height: 1.6; box-sizing: border-box; outline: none;
  }
  .edit-actions.svelte-ou8lxv { display: flex; justify-content: flex-end; gap: 8px; }
  .edit-btn.svelte-ou8lxv {
    padding: 4px 14px; border: none; background: transparent;
    color: var(--text-muted); font-size: 11px; font-family: inherit; cursor: pointer;
  }
  .edit-btn.svelte-ou8lxv:hover { color: var(--text-primary); }
  .edit-btn.save.svelte-ou8lxv { color: var(--text-secondary); }
  .edit-btn.save.svelte-ou8lxv:hover { color: var(--text-primary); }

  /* Evolve tab */
  .interview-view.svelte-ou8lxv { display: flex; flex-direction: column; gap: 10px; flex: 1; }
  .interview-header.svelte-ou8lxv { display: flex; flex-direction: column; gap: 6px; }
  .interview-progress.svelte-ou8lxv { font-size: 10px; color: var(--text-muted); opacity: 0.5; text-align: right; }
  .interview-progress-bar.svelte-ou8lxv { height: 2px; background: rgba(255, 255, 255, 0.04); border-radius: 1px; overflow: hidden; }
  .interview-progress-fill.svelte-ou8lxv { height: 100%; background: var(--text-secondary); border-radius: 1px; transition: width 0.3s ease; }
  .interview-gap-label.svelte-ou8lxv { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; }
  .interview-question.svelte-ou8lxv { font-size: 13px; color: var(--text-primary); line-height: 1.5; margin: 0; }
  .interview-textarea.svelte-ou8lxv {
    width: 100%; font-size: 12px; padding: 8px 0;
    border: none; border-bottom: 1px solid var(--glass-border);
    background: transparent; color: var(--text-primary); font-family: inherit;
    resize: vertical; line-height: 1.5; box-sizing: border-box; outline: none;
  }
  .interview-textarea.svelte-ou8lxv::placeholder { color: var(--text-muted); }
  .interview-actions.svelte-ou8lxv { display: flex; justify-content: flex-end; gap: 8px; }
  .interview-saved.svelte-ou8lxv { font-size: 10px; color: var(--text-muted); opacity: 0.4; text-align: right; }
  .gap-list.svelte-ou8lxv { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
  .gap-row.svelte-ou8lxv { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--glass-border); }
  .gap-row.svelte-ou8lxv:last-child { border-bottom: none; }
  .gap-info.svelte-ou8lxv { display: flex; align-items: center; gap: 6px; }
  .gap-type.svelte-ou8lxv { font-size: 11px; font-weight: 500; }
  .gap-question.svelte-ou8lxv { font-size: 10px; color: var(--text-muted); opacity: 0.5; padding-left: 22px; }
  .train-start-btn.svelte-ou8lxv {
    width: 100%; padding: 8px 0; border: none; background: transparent;
    color: var(--text-secondary); font-size: 12px; font-weight: 500;
    font-family: inherit; cursor: pointer; transition: color 0.15s;
  }
  .train-start-btn.svelte-ou8lxv:hover { color: var(--text-primary); }
  .train-complete.svelte-ou8lxv { display: flex; align-items: center; gap: 8px; padding: 16px 0; }
  .train-check.svelte-ou8lxv { color: #22c55e; font-size: 16px; }
  .train-complete-text.svelte-ou8lxv { font-size: 12px; color: var(--text-secondary); }

  /* Review */
  .review-list.svelte-ou8lxv { display: flex; flex-direction: column; gap: 1px; }
  .review-row.svelte-ou8lxv {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 4px; font-size: 11px;
  }
  .review-heading.svelte-ou8lxv { flex: 1; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .review-age.svelte-ou8lxv { font-size: 10px; color: var(--text-muted); opacity: 0.4; flex-shrink: 0; }
  .review-btn.svelte-ou8lxv {
    width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
    border: none; background: transparent; color: var(--text-muted); font-size: 11px;
    font-family: inherit; cursor: pointer; border-radius: 3px; transition: color 0.15s; padding: 0;
  }
  .review-btn.svelte-ou8lxv:hover { color: var(--text-primary); }
  .review-btn.danger.svelte-ou8lxv:hover { color: #ef4444; }

  /* Connections */
  .connection-list.svelte-ou8lxv { display: flex; flex-direction: column; gap: 6px; }
  .connection-card.svelte-ou8lxv { border-bottom: 1px solid var(--glass-border); }
  .connection-card.svelte-ou8lxv:last-child { border-bottom: none; }
  .connection-pair.svelte-ou8lxv {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 0; font-size: 11px; cursor: pointer;
    transition: color 0.15s; color: var(--text-secondary);
  }
  .connection-pair.svelte-ou8lxv:hover { color: var(--text-primary); }
  .conn-name.svelte-ou8lxv { font-weight: 500; }
  .conn-link.svelte-ou8lxv { color: var(--text-muted); opacity: 0.3; }
  .conn-hint.svelte-ou8lxv { font-size: 10px; color: var(--text-muted); opacity: 0.4; margin-left: auto; }
  .connection-expand.svelte-ou8lxv { padding: 0 0 6px; display: flex; flex-direction: column; gap: 4px; }
  .conn-input.svelte-ou8lxv {
    width: 100%; font-size: 11px; padding: 4px 0;
    border: none; border-bottom: 1px solid var(--glass-border);
    background: transparent; color: var(--text-primary); font-family: inherit;
    resize: vertical; line-height: 1.5; box-sizing: border-box; outline: none;
  }
  .conn-input.svelte-ou8lxv::placeholder { color: var(--text-muted); }
  .connection-actions.svelte-ou8lxv { display: flex; justify-content: flex-end; gap: 6px; }

  /* Topics */
  .topic-list.svelte-ou8lxv { display: flex; flex-direction: column; gap: 2px; }
  .topic-row.svelte-ou8lxv {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 0; font-size: 11px;
  }
  .topic-name.svelte-ou8lxv { color: var(--text-secondary); }
  .topic-count.svelte-ou8lxv { font-size: 10px; color: var(--text-muted); opacity: 0.4; }

  .cortex-wrapper.svelte-ou8lxv {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  .cortex-intro.svelte-ou8lxv {
    font-size: 11px; color: var(--text-muted); line-height: 1.5;
    margin: 0 0 8px; opacity: 0.6;
    white-space: normal; word-wrap: break-word; overflow-wrap: break-word;
  }

  /* ── Knowledge Map ── */
  .section-label.svelte-ou8lxv { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; margin-top: 14px; }
  .section-label.svelte-ou8lxv:first-child { margin-top: 0; }

  /* Neural network */
  /* (Neural network / constellation / timeline / tags-cloud / health / recent-feed
     styles removed — Cortex visuals now live in NeuralMap.svelte) */

  /* tag-chip is used in the entry-detail view for entry tags */
  .tag-chip.svelte-ou8lxv {
    font-size: 10px; color: var(--text-muted);
    padding: 2px 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.04);
  }

  /* ── Engine tab ── */
  .engine-tab.svelte-ou8lxv { align-items: stretch; }
  .engine-grid.svelte-ou8lxv {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    margin-top: 4px;
  }
  .engine-cell.svelte-ou8lxv { min-width: 0; }
  .engine-cell.svelte-ou8lxv .section-label:where(.svelte-ou8lxv) { margin-top: 0; }

  .storage-line.svelte-ou8lxv {
    display: flex; justify-content: space-between; align-items: center;
    padding: 3px 0; font-size: 11px;
  }
  .storage-label.svelte-ou8lxv { color: var(--text-muted); }
  .storage-value.svelte-ou8lxv { color: var(--text-secondary); }

  .activity-list.svelte-ou8lxv { display: flex; flex-direction: column; gap: 1px; max-height: 200px; overflow-y: auto; }
  .activity-row.svelte-ou8lxv {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 8px; border-radius: 4px; font-size: 11px;
  }
  .activity-row.svelte-ou8lxv:hover { background: rgba(255, 255, 255, 0.03); }
  .activity-icon.svelte-ou8lxv {
    width: 16px; height: 16px; border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.06); font-size: 10px;
    color: var(--text-muted); flex-shrink: 0;
  }
  .activity-summary.svelte-ou8lxv { flex: 1; color: var(--text-secondary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .activity-time.svelte-ou8lxv { font-size: 10px; color: var(--text-muted); opacity: 0.5; flex-shrink: 0; }

  .analysis-desc.svelte-ou8lxv {
    font-size: 10px; color: var(--text-muted); opacity: 0.5;
    margin: 6px 0 0; line-height: 1.4;
  }
  .analysis-status.svelte-ou8lxv {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    font-size: 11px; color: var(--text-secondary); margin-bottom: 4px;
  }
  .status-dot.svelte-ou8lxv { width: 5px; height: 5px; border-radius: 50%; background: #22c55e; flex-shrink: 0; }
  .status-dot.running.svelte-ou8lxv { background: #f97316; animation: svelte-ou8lxv-pulse 1.5s infinite; }
  .status-text.svelte-ou8lxv { color: var(--text-secondary); }
  .agent-time.svelte-ou8lxv { font-size: 10px; color: var(--text-muted); }
  .run-btn.svelte-ou8lxv {
    display: flex; align-items: center; justify-content: center; gap: 4px;
    width: 100%; padding: 5px 10px; border: none;
    background: transparent;
    color: var(--text-muted); font-size: 11px; font-family: inherit; cursor: pointer;
    transition: color 0.15s;
  }
  .run-btn.svelte-ou8lxv:hover { color: var(--text-primary); }
  .run-btn.svelte-ou8lxv:disabled { cursor: default; opacity: 0.7; }
  .spin-icon.svelte-ou8lxv { animation: svelte-ou8lxv-spin-cw 1s linear infinite; }
  @keyframes svelte-ou8lxv-spin-cw { to { transform: rotate(360deg); } }
  .agent-results.svelte-ou8lxv {
    display: flex; align-items: center; justify-content: center; gap: 4px;
    margin-top: 6px; font-size: 10px; color: var(--text-muted);
  }
  .result-stat.svelte-ou8lxv { color: var(--text-secondary); }
  .result-sep.svelte-ou8lxv { opacity: 0.3; }

  .category-row.svelte-ou8lxv { display: flex; gap: 4px; margin-bottom: 8px; flex-wrap: wrap; }
  .cat-btn.svelte-ou8lxv {
    display: flex; align-items: center; gap: 4px; padding: 3px 8px;
    border: none; background: transparent; color: var(--text-muted);
    font-size: 11px; font-family: inherit; cursor: pointer;
  }
  .cat-btn.svelte-ou8lxv:hover { color: var(--text-secondary); }
  .cat-btn.active.svelte-ou8lxv { color: var(--text-primary); }
  .cat-dot.svelte-ou8lxv { width: 6px; height: 6px; border-radius: 50%; }

  .store-project.svelte-ou8lxv {
    width: 100%; font-size: 12px; padding: 4px 0;
    border: none; border-bottom: 1px solid var(--glass-border);
    background: transparent; color: var(--text-primary); font-family: inherit;
    box-sizing: border-box; outline: none; margin-bottom: 6px;
  }
  .store-project.svelte-ou8lxv::placeholder { color: var(--text-muted); }
  .store-textarea.svelte-ou8lxv {
    width: 100%; font-size: 12px; padding: 6px 0;
    border: none; border-bottom: 1px solid var(--glass-border);
    background: transparent; color: var(--text-primary); font-family: inherit;
    resize: vertical; line-height: 1.5; box-sizing: border-box; outline: none;
  }
  .store-textarea.svelte-ou8lxv::placeholder { color: var(--text-muted); }
  .store-actions.svelte-ou8lxv { display: flex; justify-content: flex-end; margin-top: 6px; }

  .empty-hint.svelte-ou8lxv { font-size: 10px; color: var(--text-muted); opacity: 0.5; padding: 6px; text-align: left; }

  /* ── Resize handles ── */
  .resize-handle.svelte-ou8lxv { position: absolute; pointer-events: auto; }
  .resize-n.svelte-ou8lxv { top: -4px; left: 10px; right: 10px; height: 8px; cursor: n-resize; }
  .resize-s.svelte-ou8lxv { bottom: -4px; left: 10px; right: 10px; height: 8px; cursor: s-resize; }
  .resize-e.svelte-ou8lxv { right: -4px; top: 10px; bottom: 10px; width: 8px; cursor: e-resize; }
  .resize-w.svelte-ou8lxv { left: -4px; top: 10px; bottom: 10px; width: 8px; cursor: w-resize; }
  .resize-ne.svelte-ou8lxv { top: -4px; right: -4px; width: 14px; height: 14px; cursor: ne-resize; }
  .resize-nw.svelte-ou8lxv { top: -4px; left: -4px; width: 14px; height: 14px; cursor: nw-resize; }
  .resize-se.svelte-ou8lxv { bottom: -4px; right: -4px; width: 14px; height: 14px; cursor: se-resize; }
  .resize-sw.svelte-ou8lxv { bottom: -4px; left: -4px; width: 14px; height: 14px; cursor: sw-resize; }

  /* ── Scrollbars ── */
  .tab-content.svelte-ou8lxv::-webkit-scrollbar { width: var(--space-2); }
  .tab-content.svelte-ou8lxv::-webkit-scrollbar-track { background: transparent; }
  .tab-content.svelte-ou8lxv::-webkit-scrollbar-thumb { background: var(--white-10); border-radius: var(--radius-xl); }
  .tab-content.svelte-ou8lxv::-webkit-scrollbar-thumb:hover { background: var(--white-20); }


  /* ── Popup layer ── */
  .popup-layer.svelte-bychjx {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 9000);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  .editor-popup.svelte-bychjx {
    position: fixed;
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    border: 1px solid var(--glass-border);
    background: var(--dropdown-bg);
    backdrop-filter: var(--dropdown-blur);
    -webkit-backdrop-filter: var(--dropdown-blur);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    pointer-events: auto;
    animation: svelte-bychjx-popup-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  }

  @keyframes svelte-bychjx-popup-in {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
  }

  /* ── Header ── */
  .editor-header.svelte-bychjx {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--glass-border);
    cursor: grab;
    user-select: none;
    flex-shrink: 0;
  }

  .editor-header.svelte-bychjx:active { cursor: grabbing; }

  .header-name.svelte-bychjx {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
  }

  .header-stats.svelte-bychjx {
    font-size: 11px;
    color: var(--text-muted);
    flex: 1;
  }

  .close-btn.svelte-bychjx {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
  }

  .close-btn.svelte-bychjx:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
  }

  /* ── Resize handles ── */
  .resize-handle.svelte-bychjx {
    position: absolute;
    z-index: 10;
  }

  .resize-e.svelte-bychjx { top: 0; right: -3px; width: 6px; height: 100%; cursor: e-resize; }
  .resize-s.svelte-bychjx { bottom: -3px; left: 0; width: 100%; height: 6px; cursor: s-resize; }
  .resize-se.svelte-bychjx { bottom: -3px; right: -3px; width: 12px; height: 12px; cursor: se-resize; }
  .resize-w.svelte-bychjx { top: 0; left: -3px; width: 6px; height: 100%; cursor: w-resize; }
  .resize-n.svelte-bychjx { top: -3px; left: 0; width: 100%; height: 6px; cursor: n-resize; }
  .resize-nw.svelte-bychjx { top: -3px; left: -3px; width: 12px; height: 12px; cursor: nw-resize; }
  .resize-ne.svelte-bychjx { top: -3px; right: -3px; width: 12px; height: 12px; cursor: ne-resize; }
  .resize-sw.svelte-bychjx { bottom: -3px; left: -3px; width: 12px; height: 12px; cursor: sw-resize; }

  /* ── Inline root ── */
  .inline-root.svelte-bychjx {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: hidden;
  }

  /* ── Body ── */
  .editor-body.svelte-bychjx {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  /* ── List view ── */
  .list-view.svelte-bychjx {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px;
  }

  .list-filter.svelte-bychjx {
    padding: 0 0 8px;
  }

  .filter-select.svelte-bychjx {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    background: var(--dropdown-bg);
    backdrop-filter: var(--dropdown-blur);
    -webkit-backdrop-filter: var(--dropdown-blur);
    color: var(--text-secondary);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
  }

  .filter-select.svelte-bychjx:focus {
    border-color: var(--glass-border);
    background: var(--dropdown-bg);
  }

  .filter-select.svelte-bychjx option:where(.svelte-bychjx) {
    background: var(--dropdown-bg);
    color: var(--text-secondary);
  }

  .list-section.svelte-bychjx {
    margin-bottom: 12px;
  }

  .list-section-header.svelte-bychjx {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 4px 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
  }

  .section-dot.svelte-bychjx {
    width: 6px;
    height: 6px;
    border-radius: 50%;
  }

  .active-dot.svelte-bychjx { background: var(--accent-green, #4ade80); }
  .inactive-dot.svelte-bychjx { background: var(--text-muted); opacity: 0.4; }

  .section-title.svelte-bychjx { flex: 1; }

  .list-empty.svelte-bychjx {
    padding: 8px 10px;
    font-size: 11px;
    color: var(--text-muted);
    opacity: 0.6;
  }

  .agent-row.svelte-bychjx {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    width: 100%;
    text-align: left;
    font-family: inherit;
    transition: background 0.15s;
    min-width: 0;
  }

  .agent-row.svelte-bychjx:hover {
    background: var(--glass-hover, rgba(255,255,255,0.04));
    border-color: var(--glass-border);
  }

  .agent-row.inactive.svelte-bychjx { opacity: 0.6; }

  .row-dot.svelte-bychjx {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .row-info.svelte-bychjx {
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }

  .row-name.svelte-bychjx {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .row-task.svelte-bychjx {
    display: block;
    font-size: 11px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .row-meta.svelte-bychjx {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
  }

  .row-session.svelte-bychjx {
    font-size: 10px;
    color: var(--text-muted);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .row-stats.svelte-bychjx {
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0.7;
    white-space: nowrap;
  }

  /* ── Detail view ── */
  .detail-view.svelte-bychjx {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .detail-header.svelte-bychjx {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
  }

  .back-btn.svelte-bychjx {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 11px;
    font-family: inherit;
    flex-shrink: 0;
  }

  .back-btn.svelte-bychjx:hover {
    background: var(--glass-hover, rgba(255,255,255,0.04));
    color: var(--text-primary);
  }

  .detail-title-row.svelte-bychjx {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
  }

  .status-dot.svelte-bychjx {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .detail-name.svelte-bychjx {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .detail-badge.svelte-bychjx {
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
  }

  /* ── Detail tabs ── */
  .detail-tabs.svelte-bychjx {
    display: flex;
    gap: 0;
    padding: 0 14px;
    border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
  }

  .tab-btn.svelte-bychjx {
    padding: 8px 14px;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    transition: color 0.15s, border-color 0.15s;
  }

  .tab-btn.svelte-bychjx:hover { color: var(--text-secondary); }

  .tab-btn.active.svelte-bychjx {
    color: var(--text-primary);
    border-bottom-color: var(--accent-primary);
  }

  /* ── Detail content ── */
  .detail-content.svelte-bychjx {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
  }

  .info-grid.svelte-bychjx {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .info-item.svelte-bychjx {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .info-item.full-width.svelte-bychjx {
    grid-column: 1 / -1;
  }

  .info-label.svelte-bychjx {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
  }

  .info-value.svelte-bychjx {
    font-size: 12px;
    color: var(--text-secondary);
    word-break: break-word;
    overflow-wrap: break-word;
    line-height: 1.5;
  }

  .result-text.svelte-bychjx {
    max-height: 200px;
    overflow-y: auto;
    padding: 8px;
    border-radius: 6px;
    background: var(--glass-hover, rgba(255,255,255,0.03));
    font-family: monospace;
    font-size: 11px;
    white-space: pre-wrap;
  }

  .empty-detail.svelte-bychjx {
    padding: 24px;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
  }

  /* ── Logs list ── */
  .logs-list.svelte-bychjx {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .log-entry.svelte-bychjx {
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--glass-hover, rgba(255,255,255,0.03));
    min-width: 0;
    overflow: hidden;
  }

  .log-header.svelte-bychjx {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-muted);
    flex-wrap: wrap;
    min-width: 0;
  }

  .log-from.svelte-bychjx, .log-to.svelte-bychjx {
    color: var(--text-secondary);
    font-weight: 500;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .log-arrow.svelte-bychjx { opacity: 0.3; flex-shrink: 0; }

  .log-type.svelte-bychjx {
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(255,255,255,0.06);
    flex-shrink: 0;
  }

  .log-time.svelte-bychjx {
    margin-left: auto;
    flex-shrink: 0;
    opacity: 0.6;
  }

  .log-content.svelte-bychjx {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 4px;
    line-height: 1.5;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
  }

  /* ── Raw JSON ── */
  .raw-json.svelte-bychjx {
    padding: 12px;
    border-radius: 8px;
    background: var(--glass-hover, rgba(255,255,255,0.03));
    overflow: auto;
    max-height: 100%;
  }

  .raw-json.svelte-bychjx pre:where(.svelte-bychjx) {
    font-size: 11px;
    color: var(--text-secondary);
    font-family: monospace;
    white-space: pre-wrap;
    word-break: break-word;
  }


  .session-tabs.svelte-1dhxjiv {
    position: fixed;
    top: 0;
    left: var(--sidebar-width, 283px);
    right: 0;
    height: calc(var(--tabbar-height, 40px) + var(--tabbar-top-gap, 20px));
    padding-top: var(--tabbar-top-gap, 20px);
    display: flex;
    align-items: flex-end;
    background: transparent;
    z-index: var(--z-modal);
    transition: left var(--transition-sidebar, 300ms cubic-bezier(0.4, 0, 0.2, 1));
    flex-shrink: 0;
    user-select: none;
    overflow: visible;

    /* The whole strip is a window drag region, so the empty lead above the
       tab pills (and the gaps between/beyond them) moves the window.
       Compositor-level only — `data-tauri-drag-region` on an ancestor would
       hijack mousedown for every tab inside it. Everything interactive opts
       out with `no-drag` below: .tab, .tab-actions, .tab-popup-wrapper,
       .scroll-arrow. `.strip-overlay` is pointer-events:none, so it never
       intercepts the region. */
    -webkit-app-region: drag;
  }

  /* Phone: the strip is a fixed bar pinned to the top of the window, above
   * the desktop titlebar. On a phone that space belongs to the MobileTopBar,
   * and because the strip sat at `--z-modal` it painted straight over the
   * hamburger, workspace name and connect button.
   *
   * Drop it back into the flow instead: `.main-content` already reserves the
   * header's height via padding-top, so the strip lands directly under it
   * and the open tabs stay reachable. The 20px top gap is a desktop artifact
   * (the strip sits below the titlebar there) and goes away on phone. */
  @media (max-width: 480px) {
    .session-tabs.svelte-1dhxjiv {
      position: static;
      top: auto;
      left: auto;
      right: auto;
      height: var(--tabbar-height, 40px);
      padding-top: 0;
      z-index: auto;
      -webkit-app-region: no-drag;
    }
  }

  .strip-overlay.svelte-1dhxjiv {
    position: absolute;
    inset: 0;
    background: var(--glass-subtle-bg);
    -webkit-backdrop-filter: var(--glass-subtle-blur);
    backdrop-filter: var(--glass-subtle-blur);
    pointer-events: none;
    z-index: 0;
    clip-path: inset(0);
  }

  .scroll-arrow.svelte-1dhxjiv {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 100%;
    border: none;
    background: transparent;
    color: var(--text-muted, rgba(255, 255, 255, 0.45));
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    position: relative;
    z-index: 1;
    transition: color 0.15s;
    -webkit-app-region: no-drag;
  }

  .scroll-arrow.svelte-1dhxjiv:hover {
    color: var(--text-primary, rgba(255, 255, 255, 0.9));
  }

  .tab-actions.svelte-1dhxjiv {
    display: flex;
    align-items: flex-end;
    height: 32px;
    flex-shrink: 0;
    gap: 0;
    z-index: 2;
    padding-left: 4px;
    /* Opt out of the strip's window drag region so the gaps between these
       buttons stay clickable rather than moving the window. */
    -webkit-app-region: no-drag;
  }

  .tabs-scroll.svelte-1dhxjiv {
    display: flex;
    align-items: flex-end;
    flex: 1;
    height: 32px;
    align-self: flex-end;
    overflow-x: auto;
    overflow-y: visible;
    gap: 0;
    min-width: 0;
    scrollbar-width: none;
    position: relative;
    z-index: 1;
  }

  .tabs-scroll.svelte-1dhxjiv::-webkit-scrollbar {
    display: none;
  }

  .tab.svelte-1dhxjiv {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 100px;
    max-width: 200px;
    height: 34px;
    padding: 0 10px;
    margin: 0;
    border-radius: 20px 20px 0 0;
    background: transparent;
    color: var(--text-muted, rgba(255, 255, 255, 0.45));
    font-size: var(--text-md, 13px);
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    -webkit-app-region: no-drag;
    z-index: 5;
    overflow: visible;
  }

  .tab.svelte-1dhxjiv:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    border-radius: 20px;
  }

  .tab.active.svelte-1dhxjiv {
    background: transparent;
    color: var(--text-primary, rgba(255, 255, 255, 0.9));
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px 20px 0 0;
    z-index: 6;
  }

  /* The dragged tab rides the active-tab cutout for its body (the cutout tracks
     it every move), so it carries NO background/border/shadow/blur of its own —
     those would render as a theme-colored pill floating behind the title. Keep
     only what moves the tab and lifts it above its siblings. */
  .tab.dragging.svelte-1dhxjiv {
    color: var(--text-primary);
    transform: translate(var(--drag-x, 0px), -2px);
    transition: none;
    z-index: 50;
    cursor: grabbing;
    will-change: transform;
  }

  /* Prevent hover highlight from bleeding into active tab's concave corners */
  .tab.svelte-1dhxjiv:hover:has(+ .tab.active:where(.svelte-1dhxjiv)) {
    background: radial-gradient(circle at 100% 100%, rgba(255, 255, 255, 0.03) 4px, rgba(255, 255, 255, 0.06) 20px);
  }

  .tab.active.svelte-1dhxjiv + .tab:where(.svelte-1dhxjiv):hover {
    background: radial-gradient(circle at 0% 100%, rgba(255, 255, 255, 0.03) 4px, rgba(255, 255, 255, 0.06) 20px);
  }

  .tab-labels.svelte-1dhxjiv {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
    line-height: 1.3;
  }

  .tab-name.svelte-1dhxjiv {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Inline rename input (double-click the tab name). Mirrors the sidebar's
     .sidebar-rename-input: borderless, transparent, inherits the tab font so
     the switch from span → input is visually seamless. */
  .tab-rename-input.svelte-1dhxjiv {
    width: 100%;
    min-width: 0;
    background: transparent;
    border: none;
    border-radius: 3px;
    color: var(--text-primary, rgba(255, 255, 255, 0.9));
    font-size: inherit;
    font-family: inherit;
    line-height: 1.3;
    padding: 1px 4px;
    margin: 0 -4px;
    outline: none;
  }

  .tab-rename-input.svelte-1dhxjiv:focus {
    background: rgba(255, 255, 255, 0.08);
  }

  .tab-pin.svelte-1dhxjiv {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: none;
    border-radius: 2px;
    background: transparent;
    color: var(--text-muted, rgba(255, 255, 255, 0.25));
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    opacity: 0;
    font-size: 9px;
    line-height: 1;
    transition: opacity 0.1s, color 0.1s;
  }

  .tab.svelte-1dhxjiv:hover .tab-pin:where(.svelte-1dhxjiv) {
    opacity: 0.6;
  }

  .tab-pin.pin-active.svelte-1dhxjiv {
    opacity: 1;
    color: var(--accent, #6366f1);
  }

  .tab-pin.svelte-1dhxjiv:hover {
    color: var(--text-primary, rgba(255, 255, 255, 0.9));
  }

  .tab.pinned.svelte-1dhxjiv {
    color: var(--text-primary, rgba(255, 255, 255, 0.85));
  }

  .tab.pinned.svelte-1dhxjiv .tab-pin:where(.svelte-1dhxjiv) {
    opacity: 1;
  }

  .drop-indicator.svelte-1dhxjiv {
    width: 2px;
    height: 28px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 1px;
    box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
    align-self: flex-end;
    margin-bottom: 3px;
    z-index: 10;
  }

  .tab-group-label.svelte-1dhxjiv {
    font-size: 9px;
    font-weight: 600;
    color: var(--text-muted, rgba(255, 255, 255, 0.4));
    padding: 1px 5px;
    flex-shrink: 0;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tab-close.svelte-1dhxjiv {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: none;
    border-radius: var(--radius-sm, 3px);
    background: transparent;
    color: var(--text-muted, rgba(255, 255, 255, 0.35));
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.1s, color 0.1s, background 0.1s;
  }

  .tab.svelte-1dhxjiv:hover .tab-close:where(.svelte-1dhxjiv) {
    opacity: 1;
  }

  .tab-close.svelte-1dhxjiv:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary, rgba(255, 255, 255, 0.9));
  }

  .tab-action-btn.svelte-1dhxjiv {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: var(--radius-md, 6px);
    background: transparent;
    color: var(--text-muted, rgba(255, 255, 255, 0.45));
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    -webkit-app-region: no-drag;
    align-self: flex-end;
    margin-bottom: 7px;
    position: relative;
    z-index: 1;
    transition: color 0.15s;
  }

  .tab-action-btn.svelte-1dhxjiv:hover {
    color: var(--text-primary, rgba(255, 255, 255, 0.9));
  }

  .tab-popup-wrapper.svelte-1dhxjiv {
    position: relative;
    flex-shrink: 0;
    -webkit-app-region: no-drag;
    align-self: flex-end;
    margin-bottom: 1px;
    z-index: 2;
  }

  .tab-popup.svelte-1dhxjiv {
    position: fixed;
    min-width: 200px;
    max-height: 240px;
    overflow-y: auto;
    background: rgba(14, 14, 16, 0.65);
    border-radius: 14px;
    padding: 4px;
    box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    z-index: 99999;
    animation: svelte-1dhxjiv-slide-down 0.15s ease-out;
  }

  .popup-item.svelte-1dhxjiv {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 12px;
    border: none;
    background: transparent;
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    font-size: var(--text-sm, 11px);
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s, color 0.1s;
  }

  .popup-item.svelte-1dhxjiv:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary, rgba(255, 255, 255, 0.9));
  }

  .popup-empty.svelte-1dhxjiv {
    padding: 8px 12px;
    font-size: var(--text-sm, 11px);
    color: var(--text-muted, rgba(255, 255, 255, 0.4));
    text-align: center;
  }

  .popup-session-name.svelte-1dhxjiv {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .popup-active.svelte-1dhxjiv {
    color: var(--text-primary, rgba(255, 255, 255, 0.9));
  }

  .popup-active-indicator.svelte-1dhxjiv {
    color: var(--accent, #6366f1);
    font-size: 8px;
    flex-shrink: 0;
  }

  .popup-pin-indicator.svelte-1dhxjiv {
    font-size: 9px;
    flex-shrink: 0;
    opacity: 0.6;
  }

  @keyframes svelte-1dhxjiv-slide-down {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* ── Windows window controls ── */
  .window-controls-windows.svelte-1dhxjiv {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    height: var(--tabbar-height, 40px);
    align-items: center;
    z-index: 10;
    -webkit-app-region: no-drag;
  }

  body.platform-windows .window-controls-windows.svelte-1dhxjiv { display: flex; }

  .window-spacer.svelte-1dhxjiv {
    display: none;
    flex-shrink: 0;
    width: 138px;
    height: 100%;
  }

  body.platform-windows .window-spacer.svelte-1dhxjiv { display: block; }

  .win-btn.svelte-1dhxjiv {
    width: 46px;
    height: 100%;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s;
    padding: 0;
  }

  .win-btn.svelte-1dhxjiv:hover {
    color: rgba(255, 255, 255, 0.9);
  }


  .settings-panel.svelte-1odje5v {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 4px 8px 4px 0;
    width: 100%;
    min-width: 0;
  }

  .settings-section.svelte-1odje5v {
    margin-bottom: 14px;
    min-width: 0;
  }

  /* Collapsible section header — clickable title bar with a rotating chevron.
     .section-title is now a bare heading wrapper; the visual chrome lives on
     the button so the whole header is the click target. */
  .section-title.svelte-1odje5v {
    margin-bottom: 0;
  }

  .section-header-btn.svelte-1odje5v {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 6px 10px;
    margin-bottom: 8px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
  }

  .section-header-btn.svelte-1odje5v:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
  }

  .section-chevron.svelte-1odje5v {
    flex-shrink: 0;
    opacity: 0.45;
    transition: transform 0.15s ease, opacity 0.15s ease;
  }

  .section-header-btn.svelte-1odje5v:hover .section-chevron:where(.svelte-1odje5v) {
    opacity: 0.8;
  }

  .section-chevron.open.svelte-1odje5v {
    transform: rotate(90deg);
    opacity: 0.8;
  }

  .section-body.svelte-1odje5v {
    min-width: 0;
  }

  .provider-dot.svelte-1odje5v {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .setting-row.svelte-1odje5v {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.05);
  }

  .setting-label.svelte-1odje5v {
    font-size: 12px;
    color: var(--text-secondary);
  }

  .setting-value.svelte-1odje5v {
    font-size: 11px;
    color: var(--text-muted);
    font-family: 'SF Mono', 'Fira Code', monospace;
  }

  .empty-hint.svelte-1odje5v {
    font-size: 12px;
    color: var(--text-muted);
  }

  /* TTS section */
  .settings-blurb.svelte-1odje5v {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0 0 12px;
    line-height: 1.4;
  }

  .settings-row.svelte-1odje5v {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    cursor: pointer;
  }

  .settings-row-label.svelte-1odje5v {
    font-size: 13px;
    color: var(--text-primary);
  }

  .settings-row-help.svelte-1odje5v {
    font-size: 11px;
    color: var(--text-muted);
    margin: 4px 0 12px;
    line-height: 1.4;
  }

  .settings-row-help-positive.svelte-1odje5v {
    color: #4ade80;
  }

  .settings-row-help-error.svelte-1odje5v {
    color: #f87171;
  }

  .settings-subsection-label.svelte-1odje5v {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin: 14px 0 6px;
    font-weight: 600;
  }

  .settings-input.svelte-1odje5v {
    width: 100%;
    padding: 8px 10px;
    font-size: 12px;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    font-family: inherit;
    box-sizing: border-box;
  }

  .settings-input.svelte-1odje5v:focus {
    outline: none;
    border-color: var(--accent-color, #60a5fa);
  }

  .settings-action-row.svelte-1odje5v {
    display: flex;
    gap: 8px;
    margin-top: 14px;
  }

  /* TTS provider dropdown rows — name above blurb inside the menu item.
     Wider than the compact single-line items used in API Keys. */
  .tts-picker-row.svelte-1odje5v {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .tts-picker-name.svelte-1odje5v {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
  }

  .tts-picker-blurb.svelte-1odje5v {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.35;
    white-space: normal;
  }

  .settings-primary-btn.svelte-1odje5v {
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: var(--accent-color, #60a5fa);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
  }

  .settings-primary-btn.svelte-1odje5v:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .settings-secondary-btn.svelte-1odje5v {
    padding: 7px 14px;
    font-size: 12px;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
  }

  .settings-secondary-btn.svelte-1odje5v:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* API Keys */
  .credential-list.svelte-1odje5v {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
  }

  .credential-card.svelte-1odje5v {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    border-radius: 6px;
    border: none;
    background: transparent;
    transition: border-color 0.15s;
  }

  .credential-info.svelte-1odje5v {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
  }
  .health-badge.svelte-1odje5v {
    font-size: 9px;
    padding: 1px 5px;
    border-radius: var(--radius-sm, 6px);
    font-weight: var(--weight-semibold, 600);
    flex-shrink: 0;
    cursor: help;
  }
  .health-badge.warn.svelte-1odje5v {
    background: var(--status-warning-bg, rgba(245, 158, 11, 0.15));
    color: var(--status-warning, #f59e0b);
  }
  .health-badge.error.svelte-1odje5v {
    background: var(--status-error-bg, rgba(239, 68, 68, 0.15));
    color: var(--status-error, #ef4444);
  }

  .credential-name.svelte-1odje5v {
    font-size: 12px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .credential-actions.svelte-1odje5v {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
  }

  .cred-action-btn.svelte-1odje5v {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s;
    font-family: inherit;
    display: flex;
    align-items: center;
  }

  .cred-action-btn.svelte-1odje5v:hover {
    color: var(--text-primary);
  }

  .cred-action-btn.delete.svelte-1odje5v:hover {
    color: var(--text-primary);
  }

  .credential-card.svelte-1odje5v:has(.confirming:where(.svelte-1odje5v)) {
    background: rgba(239, 68, 68, 0.08);
    border-radius: 6px;
  }

  .add-key-btn.svelte-1odje5v {
    font-size: 13px;
    padding: 4px 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit;
    transition: color 0.15s;
    width: 100%;
  }

  .add-key-btn.svelte-1odje5v:hover {
    color: var(--text-primary);
  }

  .add-key-form.svelte-1odje5v {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border-radius: 14px;
    background: transparent;
  }

  .key-input.svelte-1odje5v {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: none;
    border-radius: 10px;
    padding: 6px 10px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 12px;
  }

  .key-input.svelte-1odje5v::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
  }

  .key-input.svelte-1odje5v:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.07);
  }

  /* Custom select dropdown — glass morphism */
  .key-select-wrapper.svelte-1odje5v {
    position: relative;
  }

  .key-select-btn.svelte-1odje5v {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: none;
    border-radius: 10px;
    padding: 6px 10px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    text-align: left;
  }

  .key-select-btn.svelte-1odje5v:hover {
    background: rgba(255, 255, 255, 0.07);
  }

  .key-select-btn.svelte-1odje5v .chevron:where(.svelte-1odje5v) {
    margin-left: auto;
    font-size: 10px;
    color: var(--text-muted);
  }

  .key-select-menu.svelte-1odje5v {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    min-width: 160px;
    background: rgba(14, 14, 16, 0.65);
    border-radius: 14px;
    padding: 4px;
    box-shadow: var(--glass-shadow);
    z-index: var(--z-toast);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    animation: svelte-1odje5v-fade-in 0.1s ease-out;
  }

  .select-menu-item.svelte-1odje5v {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    border: none;
    background: none;
    color: var(--text-secondary);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    border-radius: 14px;
    transition: all 0.1s;
    text-align: left;
  }

  .select-menu-item.svelte-1odje5v:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
  }

  .select-menu-item.active.svelte-1odje5v {
    background: rgba(210, 180, 140, 0.12);
    color: var(--text-primary);
  }

  .select-menu-item.svelte-1odje5v .check:where(.svelte-1odje5v) {
    margin-left: auto;
    color: var(--accent-primary);
    font-size: 11px;
  }

  /* Model cascade dropdown (provider → model sublist), used by the Started
     and Background model pickers. Mirrors the action-bar ModelPillBar layout. */
  .model-cascade-menu.svelte-1odje5v {
    max-height: 320px;
    overflow-y: auto;
  }

  .model-cascade-menu.svelte-1odje5v .provider-row:where(.svelte-1odje5v) {
    font-weight: var(--weight-semibold, 600);
    color: var(--text-primary);
  }

  .model-cascade-menu.svelte-1odje5v .provider-dot:where(.svelte-1odje5v) {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .model-cascade-menu.svelte-1odje5v .expand-icon:where(.svelte-1odje5v) {
    margin-left: auto;
    font-size: 10px;
    color: var(--text-muted);
    transition: transform 0.15s;
  }

  .model-cascade-menu.svelte-1odje5v .expand-icon.expanded:where(.svelte-1odje5v) {
    transform: rotate(90deg);
  }

  .model-cascade-menu.svelte-1odje5v .model-sublist:where(.svelte-1odje5v) {
    padding-left: 14px;
    margin-left: 6px;
    border-left: 1px solid var(--glass-border);
  }

  .model-cascade-menu.svelte-1odje5v .model-row-item:where(.svelte-1odje5v) {
    font-size: 11px;
    color: var(--text-muted);
    padding: 4px 8px;
  }

  .model-cascade-menu.svelte-1odje5v .model-row-item:where(.svelte-1odje5v):hover {
    color: var(--text-primary);
  }

  .model-cascade-menu.svelte-1odje5v .model-row-item.active:where(.svelte-1odje5v) {
    color: var(--text-primary);
  }

  .model-cascade-menu.svelte-1odje5v .model-dot:where(.svelte-1odje5v) {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .model-cascade-menu.svelte-1odje5v .model-status:where(.svelte-1odje5v) {
    font-size: 10px;
    color: var(--text-muted);
    font-style: italic;
    padding: 4px 10px;
    opacity: 0.8;
  }

  .model-cascade-menu.svelte-1odje5v .model-status-error:where(.svelte-1odje5v) {
    color: var(--accent-yellow, #f59e0b);
    font-style: normal;
  }

  .key-error.svelte-1odje5v {
    font-size: 11px;
    color: var(--accent-red);
  }

  .key-form-actions.svelte-1odje5v {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    align-items: center;
  }

  .form-hint.svelte-1odje5v {
    font-size: 10px;
    color: var(--text-muted);
    margin-right: auto;
  }

  .action-link.svelte-1odje5v {
    font-size: 11px;
    padding: 2px 4px;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit;
    transition: color 0.15s;
  }

  .action-link.svelte-1odje5v:hover {
    color: var(--text-primary);
  }

  .action-link.svelte-1odje5v:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }

  @keyframes svelte-1odje5v-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Background selection */
  .bg-grid.svelte-1odje5v {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 5px;
    margin-bottom: 8px;
  }

  .bg-option.svelte-1odje5v {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 5px;
    border-radius: 6px;
    border: none;
    background: none;
    cursor: pointer;
    transition: color 0.15s;
    font-family: inherit;
  }

  .bg-option.svelte-1odje5v:hover .bg-name:where(.svelte-1odje5v) {
    color: var(--text-primary);
  }

  .bg-option.active.svelte-1odje5v .bg-name:where(.svelte-1odje5v) {
    color: var(--text-primary);
  }

  .bg-preview.svelte-1odje5v {
    width: 100%;
    height: 36px;
    border-radius: 3px;
    object-fit: cover;
  }

  .bg-preview-default.svelte-1odje5v {
    background: linear-gradient(to bottom, rgba(38, 38, 40, 1), rgba(22, 22, 24, 1));
  }

  .bg-preview-navy.svelte-1odje5v {
    background: linear-gradient(to bottom, rgba(20, 30, 60, 1), rgba(10, 15, 40, 1));
  }

  .bg-name.svelte-1odje5v {
    font-size: 10px;
    color: var(--text-muted);
  }

  /* Theme preset list */
  .bar-style-list.svelte-1odje5v {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 4px 0;
  }

  .bar-style-option.svelte-1odje5v {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 11px;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.15s;
    width: calc(33.33% - 8px);
  }

  /* Glass dot — translucent blur, no dark fill */
  .glass-dot.svelte-1odje5v {
    background: rgba(255, 255, 255, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }

  .bar-style-option.svelte-1odje5v:hover {
    color: var(--text-primary);
  }

  .bar-dot.svelte-1odje5v {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border: 2px solid transparent;
    transition: border-color 0.15s ease;
  }

  .bar-style-option.svelte-1odje5v:hover .bar-dot:where(.svelte-1odje5v) {
    border-color: rgba(255, 255, 255, 0.4);
  }

  .bar-style-option.active.svelte-1odje5v .bar-dot:where(.svelte-1odje5v) {
    border-color: var(--text-primary);
  }

  .bar-style-name.svelte-1odje5v {
    font-size: 11px;
    font-weight: 500;
    opacity: 0.5;
    transition: opacity 0.15s ease;
  }

  .bar-style-option.svelte-1odje5v:hover .bar-style-name:where(.svelte-1odje5v) {
    opacity: 0.8;
  }

  .bar-style-option.active.svelte-1odje5v .bar-style-name:where(.svelte-1odje5v) {
    opacity: 1;
  }

  /* Custom theme divider */
  .bar-custom-divider.svelte-1odje5v {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 8px;
  }

  .divider-line.svelte-1odje5v {
    flex: 1;
    height: 1px;
    background: var(--glass-border, rgba(255, 255, 255, 0.12));
  }

  .divider-label.svelte-1odje5v {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
  }

  /* Custom theme row */
  .bar-custom-grid.svelte-1odje5v {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 4px 0;
    /* Match bar-style-list so Hue aligns with Crystal */
    padding-left: 8px;
  }

  .bar-custom-col.svelte-1odje5v {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: calc(33.33% - 8px - 16px);
    flex-shrink: 0;
    color: var(--text-secondary);
  }

  .bar-custom-col-slider.svelte-1odje5v {
    flex: 1;
    min-width: 0;
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }

  /* Under the Paper (light terminal) theme the bar-style/Custom controls AND the
     Background picker are inert (Paper isn't coupled to them): dim the block, lock
     interaction, and surface a "why" tooltip. Reused by the Background wrapper.
     The wrapper keeps pointer-events so the native title tooltip still fires. */
  .paper-disabled.svelte-1odje5v {
    opacity: 0.45;
    cursor: not-allowed;
  }
  .paper-disabled.svelte-1odje5v > :where(.svelte-1odje5v) {
    pointer-events: none;
  }

  .custom-color-label.svelte-1odje5v {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
  }

  /* Swatch triggers are now real buttons, so the UA resets have to be undone
     while keeping the visual identical to the old <label> + hidden input.
     Deliberately does NOT set padding — .accent-preset already supplies its
     own, and these two rules would otherwise depend on source order. */
  .cp-trigger.svelte-1odje5v {
    border: none;
    background: transparent;
  }

  /* Widen the hit target past the swatch without changing layout. */
  .custom-color-label.cp-trigger.svelte-1odje5v::after {
    content: '';
    position: absolute;
    inset: -4px;
  }

  .custom-preview.svelte-1odje5v {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border: 2px solid transparent;
    transition: border-color 0.15s;
  }

  .custom-color-label.svelte-1odje5v:hover .custom-preview:where(.svelte-1odje5v) {
    border-color: rgba(255, 255, 255, 0.4);
  }

  .custom-darkness-slider.svelte-1odje5v {
    width: 100%;
    height: 36px;
    margin: 0 auto;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    outline: none;
    cursor: pointer;
  }

  .custom-darkness-slider.svelte-1odje5v::-webkit-slider-runnable-track {
    height: 4px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 2px;
  }

  .custom-darkness-slider.svelte-1odje5v::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--text-primary);
    border: none;
    cursor: pointer;
    margin-top: -5px;
  }

  /* Blur slider */
  .blur-slider-row.svelte-1odje5v {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding-right: 12px;
  }

  .brightness-slider-row.svelte-1odje5v {
    margin-top: 10px;
  }

  .blur-label.svelte-1odje5v {
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
    width: 58px;
  }

  .blur-slider.svelte-1odje5v {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 3px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
    outline: none;
    cursor: pointer;
  }

  .blur-slider.svelte-1odje5v::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--text-primary);
    cursor: pointer;
    border: none;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.2);
  }

  .blur-slider.svelte-1odje5v::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
  }

  .blur-slider-row.disabled.svelte-1odje5v {
    opacity: 0.3;
    pointer-events: none;
  }

  .bg-actions.svelte-1odje5v {
    display: flex;
    gap: 6px;
    align-items: center;
  }

  .hidden-input.svelte-1odje5v {
    display: none;
  }

  /* Workspace */
  .workspace-row.svelte-1odje5v {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 8px 4px;
    cursor: pointer;
  }

  .workspace-row.svelte-1odje5v:hover .workspace-path:where(.svelte-1odje5v),
  .workspace-row.svelte-1odje5v:hover .workspace-placeholder:where(.svelte-1odje5v) {
    color: var(--text-primary);
  }

  .workspace-row.svelte-1odje5v:hover .workspace-icon:where(.svelte-1odje5v) {
    opacity: 1;
  }

  .workspace-icon.svelte-1odje5v {
    flex-shrink: 0;
    color: var(--text-muted);
    opacity: 0.6;
  }

  .workspace-path.svelte-1odje5v {
    flex: 1;
    font-size: 11px;
    font-family: 'SF Mono', 'Fira Code', monospace;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
    padding-right: 5px;
  }

  .workspace-placeholder.svelte-1odje5v {
    font-size: 12px;
    color: var(--text-muted);
    opacity: 0.6;
  }

  .workspace-clear.svelte-1odje5v {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
    padding: 0;
  }

  .workspace-row.svelte-1odje5v:hover .workspace-clear:where(.svelte-1odje5v) {
    opacity: 1;
  }

  .workspace-clear.svelte-1odje5v:hover {
    color: var(--text-primary);
  }

  .workspace-hint.svelte-1odje5v {
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0.5;
    margin-top: 4px;
    padding-left: 10px;
  }

  .settings-section-about.svelte-1odje5v {
    margin-top: auto;
    border: none;
  }

  .section-title-about.svelte-1odje5v {
    border: none;
    background: transparent;
  }

  .setting-row-about.svelte-1odje5v {
    border: none;
    background: transparent;
  }

  /* Replay-onboarding: plain text link — no fill, no border, no padding box. */
  .about-replay-btn.svelte-1odje5v {
    background: transparent;
    border: none;
    padding: 0;
  }

  /* Credits — attribution for bundled speech models (CC-BY-4.0 Parakeet et al.). */
  .about-credits-row.svelte-1odje5v {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }
  .about-credits.svelte-1odje5v {
    margin: 0;
    line-height: 1.45;
    font-size: 12px;
    opacity: 0.85;
  }

  /* Context section — no border, no background */
  .settings-section-context.svelte-1odje5v {
    margin-bottom: 8px;
  }

  .setting-row-context.svelte-1odje5v {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 10px;
    border: none;
    background: transparent;
  }

  .context-label-group.svelte-1odje5v {
    display: flex;
    flex-direction: column;
    gap: 1px;
    /* min-width:0 + white-space:normal: this flex item resolves to inherited
       white-space:nowrap, which made the long "Reasoning footers" hint overflow
       its box (and wreck the row's space-between) instead of wrapping. Same trap
       as the NSP radio-text (ork-nsp-feature): nowrap blocks wrapping at the
       white-space level, so min-width:0 ALONE is a no-op — both are required. */
    min-width: 0;
    white-space: normal;
  }

  .context-hint.svelte-1odje5v {
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0.5;
    overflow-wrap: anywhere;
  }

  /* Pill switch toggle */
  .toggle-switch.svelte-1odje5v {
    width: 28px;
    height: 15px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
  }

  .toggle-switch.svelte-1odje5v:hover {
    border-color: rgba(255, 255, 255, 0.2);
  }

  .toggle-switch.on.svelte-1odje5v {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
  }

  .toggle-thumb.svelte-1odje5v {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--text-muted);
    opacity: 0.5;
    transition: transform 0.2s, background 0.2s, opacity 0.2s;
  }

  .toggle-switch.on.svelte-1odje5v .toggle-thumb:where(.svelte-1odje5v) {
    transform: translateX(13px);
    background: var(--text-primary);
    opacity: 1;
  }

  /* Accent color picker */
  .accent-presets.svelte-1odje5v {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    padding: 4px 0;
  }

  .accent-preset.svelte-1odje5v {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 4px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 10px;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.15s;
    position: relative;
    /* Let 1fr tracks shrink to fit the sidebar instead of forcing label min-content */
    min-width: 0;
  }

  .accent-preset.svelte-1odje5v:hover {
    color: var(--text-primary);
  }

  .accent-preset.active.svelte-1odje5v {
    color: var(--text-primary);
  }

  .accent-dot.svelte-1odje5v {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: border-color 0.15s;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3);
  }

  .accent-preset.svelte-1odje5v:hover .accent-dot:where(.svelte-1odje5v) {
    border-color: rgba(255, 255, 255, 0.3);
  }

  .accent-preset.active.svelte-1odje5v .accent-dot:where(.svelte-1odje5v) {
    border-color: var(--text-primary);
  }

  .accent-name.svelte-1odje5v {
    font-size: 9px;
    opacity: 0.6;
    transition: opacity 0.15s;
  }

  .accent-preset.svelte-1odje5v:hover .accent-name:where(.svelte-1odje5v),
  .accent-preset.active.svelte-1odje5v .accent-name:where(.svelte-1odje5v) {
    opacity: 1;
  }

  /* Pearl's swatch previews the accent it actually applies, which is
     theme-dependent: cream on Phosphor, black on Paper (see theme-applier.ts
     PEARL_ON_PHOSPHOR / PEARL_ON_PAPER). */
  .accent-dot.accent-dot-pearl.svelte-1odje5v {
    background: #f5f5f0;
  }
  html[data-legacy='light'] .accent-dot.accent-dot-pearl.svelte-1odje5v {
    background: #1a1a1a;
  }

  /* Legacy terminal theme picker */
  .legacy-row.svelte-1odje5v {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 0;
  }

  .legacy-presets.svelte-1odje5v {
    display: flex;
    gap: 8px;
  }

  /* Bare row — no chip background or border; the selection reads purely
     from the accent color of the icon + label. */
  .legacy-option.svelte-1odje5v {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 11px;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.15s;
    flex: 1;
  }

  .legacy-option.svelte-1odje5v:hover {
    color: var(--text-primary);
  }

  .legacy-option.active.svelte-1odje5v {
    color: var(--accent-primary);
  }

  .legacy-icon.svelte-1odje5v {
    font-size: 16px;
    line-height: 1;
  }

  .legacy-name.svelte-1odje5v {
    font-size: 10px;
    font-weight: 500;
    opacity: 0.7;
    transition: opacity 0.15s;
  }

  .legacy-option.svelte-1odje5v:hover .legacy-name:where(.svelte-1odje5v) {
    opacity: 1;
  }

  .legacy-option.active.svelte-1odje5v .legacy-name:where(.svelte-1odje5v) {
    opacity: 1;
  }

  .legacy-hint.svelte-1odje5v {
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0.5;
    text-align: center;
  }

  /* New Session Preferences */
  .nsp-intro.svelte-1odje5v {
    font-size: 11px;
    color: var(--text-muted);
    opacity: 0.75;
    line-height: 1.5;
    margin: 0 10px 10px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .nsp-intro.svelte-1odje5v strong:where(.svelte-1odje5v) {
    color: var(--text-secondary);
    font-weight: 600;
  }

  .nsp-group.svelte-1odje5v {
    padding: 0 10px;
    margin-bottom: 10px;
  }

  .nsp-group-head.svelte-1odje5v {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .nsp-group-title.svelte-1odje5v {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
  }

  .nsp-inherit-hint.svelte-1odje5v {
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0.55;
    margin: 3px 0 6px;
    line-height: 1.4;
  }

  .radio-group.svelte-1odje5v {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0; /* break the flex min-width:auto chain so .radio-text can shrink+wrap */
    transition: opacity 0.15s;
  }
  .radio-group.disabled.svelte-1odje5v {
    opacity: 0.4;
    pointer-events: none;
  }
  /* Desbuttonized radio list: no chrome (border/background/glow), just an
     accent dot + text. Label, separator, and description flow inline and wrap to
     a max of 2 lines — the continuation lines land under the text, past the dot. */
  .radio-row.svelte-1odje5v {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    width: 100%;
    min-width: 0; /* allow this flex item (and .radio-text inside) to shrink so text wraps */
    padding: 3px 9px 3px 0; /* no left indent — dots flush with the group edge */
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: color 0.15s;
  }
  .radio-row.svelte-1odje5v:hover {
    color: var(--text-primary);
  }
  .radio-row.active.svelte-1odje5v {
    color: var(--text-primary);
  }
  .radio-row.svelte-1odje5v:disabled {
    cursor: not-allowed;
  }

  .radio-dot.svelte-1odje5v {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    margin-top: 2px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    background: transparent;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  }
  .radio-row.svelte-1odje5v:hover .radio-dot:where(.svelte-1odje5v) {
    border-color: rgba(255, 255, 255, 0.4);
  }
  .radio-dot.on.svelte-1odje5v {
    border-color: var(--accent-primary, rgba(210, 180, 140, 0.9));
    background: var(--accent-primary, rgba(210, 180, 140, 0.95));
    box-shadow: inset 0 0 0 2.5px rgba(20, 20, 22, 0.92);
  }

  .radio-text.svelte-1odje5v {
    /* Box IS bounded to the row width (flex:1 1 0 + min-width:0; confirmed via
       debug — markers were bounded, text was single-line + clipped at the edge).
       The real blocker was the <button> UA default `white-space: nowrap` that
       inherits down here, keeping the inline label/sep/hint on one line no matter
       the available width. white-space:normal (below) overrides it; max-height +
       overflow cap at 4 lines. Mirrors the sibling .nsp-intro. */
    flex: 1 1 0;
    min-width: 0;
    display: block;
    white-space: normal; /* Bug A FIX: override inherited <button> UA nowrap so the description wraps */
    font-size: 11px;
    line-height: 1.5;
    overflow-wrap: break-word;
    max-height: 6em; /* 4 lines at 1.5 line-height (em = 11px); fits even the longest behavior desc (~113 chars) */
    overflow: hidden;
  }
  .radio-label.svelte-1odje5v {
    font-size: 11px;
    font-weight: 700;
    color: inherit;
  }
  .radio-sep.svelte-1odje5v {
    color: var(--text-muted);
    opacity: 0.45;
    /* Svelte strips leading/trailing whitespace inside the text node, so the
       visible "Off - No" gaps come from horizontal padding, not literal spaces. */
    padding: 0 4px;
  }
  .radio-hint.svelte-1odje5v {
    color: var(--text-muted);
    opacity: 0.85;
  }
  .radio-row.svelte-1odje5v:hover .radio-hint:where(.svelte-1odje5v) {
    color: var(--text-secondary);
    opacity: 1;
  }

  /* Persona dropdown reuses the .key-select-* glass styles; this wrapper just
     marks it for the click-outside handler and keeps it full-width. */
  .persona-select-wrapper.svelte-1odje5v {
    width: 100%;
  }


  .none.svelte-1gcm41d {
    color: var(--text2, #8a8a8a);
    font-size: 13px;
    padding: 20px 0;
  }
  code.svelte-1gcm41d {
    background: rgba(255, 255, 255, 0.07);
    padding: 1px 5px;
    border-radius: 4px;
  }


  .none.svelte-g64sm1 {
    color: var(--text2, #8a8a8a);
    font-size: 13px;
    padding: 20px 0;
  }
  code.svelte-g64sm1 {
    background: rgba(255, 255, 255, 0.07);
    padding: 1px 5px;
    border-radius: 4px;
  }


  .none.svelte-1hmwkfm {
    color: var(--text2, #8a8a8a);
    font-size: 13px;
    padding: 20px 0;
  }
  code.svelte-1hmwkfm {
    background: rgba(255, 255, 255, 0.07);
    padding: 1px 5px;
    border-radius: 4px;
  }


  .none.svelte-1g0e16f {
    color: var(--text2, #8a8a8a);
    font-size: 13px;
    padding: 20px 0;
  }
  code.svelte-1g0e16f {
    background: rgba(255, 255, 255, 0.07);
    padding: 1px 5px;
    border-radius: 4px;
  }


  .none.svelte-1p31vd1 {
    color: var(--text2, #8a8a8a);
    font-size: 13px;
    padding: 20px 0;
    line-height: 1.6;
  }
  .partial.svelte-1p31vd1 {
    padding: 9px 12px;
    font-size: 12px;
    color: #f0a020;
    background: rgba(240, 160, 32, 0.08);
    border-left: 2px solid #f0a020;
    border-radius: 0 6px 6px 0;
    margin-bottom: 20px;
  }
  .sub-none.svelte-1p31vd1 {
    font-size: 12px;
    color: var(--text2, #8a8a8a);
    margin: 8px 0 0;
  }
  .spacer.svelte-1p31vd1 {
    height: 14px;
  }
  code.svelte-1p31vd1 {
    background: rgba(255, 255, 255, 0.07);
    padding: 1px 5px;
    border-radius: 4px;
  }


  .none.svelte-1fsln0f {
    color: var(--text2, #8a8a8a);
    font-size: 13px;
    padding: 20px 0;
  }
  code.svelte-1fsln0f {
    background: rgba(255, 255, 255, 0.07);
    padding: 1px 5px;
    border-radius: 4px;
  }


  .none.svelte-rrdvcj {
    color: var(--text2, #8a8a8a);
    font-size: 13px;
    padding: 20px 0;
  }
  .caveat.svelte-rrdvcj {
    margin-top: 22px;
    padding: 11px 13px;
    font-size: 12px;
    color: var(--text2, #8a8a8a);
    background: rgba(255, 255, 255, 0.03);
    border-left: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 0 6px 6px 0;
  }
  code.svelte-rrdvcj {
    background: rgba(255, 255, 255, 0.07);
    padding: 1px 5px;
    border-radius: 4px;
  }


  .none.svelte-1ka32ky {
    color: var(--text2, #8a8a8a);
    font-size: 13px;
    padding: 20px 0;
  }
  code.svelte-1ka32ky {
    background: rgba(255, 255, 255, 0.07);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 12px;
  }


  .none.svelte-qd8sss {
    color: var(--text2, #8a8a8a);
    font-size: 13px;
    padding: 20px 0;
  }
  code.svelte-qd8sss {
    background: rgba(255, 255, 255, 0.07);
    padding: 1px 5px;
    border-radius: 4px;
  }
  .spacer.svelte-qd8sss {
    height: 14px;
  }


  .notes-panel.svelte-1e6gn61 {
    width: 280px;
    max-height: 360px;
    display: flex;
    flex-direction: column;
  }

  .notes-header.svelte-1e6gn61 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 6px;
    border-bottom: 1px solid var(--glass-border);
  }

  .notes-label.svelte-1e6gn61 {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-secondary);
  }

  .notes-count.svelte-1e6gn61 {
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    background: var(--white-5);
    padding: 1px 6px;
    border-radius: 8px;
    line-height: 14px;
  }

  .header-spacer.svelte-1e6gn61 { flex: 1; }

  .btn-add.svelte-1e6gn61 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
  }

  .btn-add.svelte-1e6gn61:hover {
    color: var(--text-primary);
    background: var(--white-10);
  }

  /* Search */
  .search-row.svelte-1e6gn61 {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--glass-border);
    position: relative;
  }

  .search-icon.svelte-1e6gn61 {
    color: var(--text-muted);
    flex-shrink: 0;
  }

  .search-input.svelte-1e6gn61 {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 12px;
    font-family: inherit;
    outline: none;
    padding: 2px 0;
    min-width: 0;
  }

  .search-input.svelte-1e6gn61::placeholder { color: var(--text-muted); }

  .search-clear.svelte-1e6gn61 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
    padding: 0;
  }

  .search-clear.svelte-1e6gn61:hover {
    color: var(--text-primary);
    background: var(--white-10);
  }

  /* Empty state */
  .notes-empty.svelte-1e6gn61 {
    padding: 24px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
  }

  .empty-line.svelte-1e6gn61 {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
  }

  .empty-sub.svelte-1e6gn61 {
    font-size: 10px;
    color: var(--text-muted);
  }

  /* List */
  .notes-list.svelte-1e6gn61 {
    overflow-y: auto;
    max-height: 300px;
    padding: 2px 0;
  }

  .note-row.svelte-1e6gn61 {
    display: flex;
    align-items: center;
    padding: 0 6px 0 4px;
  }

  .note-item.svelte-1e6gn61 {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    cursor: pointer;
    border-radius: 6px;
    min-width: 0;
    transition: background 0.12s;
  }

  .note-item.svelte-1e6gn61:hover {
    background: var(--white-5);
  }

  .note-dot.svelte-1e6gn61 {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px var(--dropdown-bg);
  }

  .note-title.svelte-1e6gn61 {
    flex: 1;
    font-size: 12px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -0.1px;
  }

  .note-time.svelte-1e6gn61 {
    font-size: 9px;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    flex-shrink: 0;
    letter-spacing: 0.2px;
  }

  .note-rename-input.svelte-1e6gn61 {
    flex: 1;
    background: var(--white-10);
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 12px;
    font-family: inherit;
    padding: 2px 6px;
    outline: none;
    min-width: 0;
  }

  .note-actions.svelte-1e6gn61 {
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.12s;
    flex-shrink: 0;
  }

  .note-row.svelte-1e6gn61:hover .note-actions:where(.svelte-1e6gn61) {
    opacity: 1;
  }

  .btn-hover.svelte-1e6gn61 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.12s;
    padding: 0;
  }

  .btn-hover.svelte-1e6gn61:hover {
    color: var(--text-primary);
    background: var(--white-10);
  }

  .btn-delete.svelte-1e6gn61:hover {
    color: var(--accent-red);
  }

  /* Scrollbar */
  .notes-list.svelte-1e6gn61::-webkit-scrollbar { width: 6px; }
  .notes-list.svelte-1e6gn61::-webkit-scrollbar-track { background: transparent; }
  .notes-list.svelte-1e6gn61::-webkit-scrollbar-thumb { background: var(--white-10); border-radius: 3px; }
  .notes-list.svelte-1e6gn61::-webkit-scrollbar-thumb:hover { background: var(--white-20); }


  .command-palette.svelte-11dfegi {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: var(--popup-bg);
    border: 1px solid var(--glass-border);
    border-radius: 10px 10px 0 0;
    box-shadow: var(--glass-shadow);
    backdrop-filter: var(--popup-blur);
    -webkit-backdrop-filter: var(--popup-blur);
    max-height: 280px;
    overflow-y: auto;
    z-index: var(--z-overlay);
    padding: var(--space-2) 0;
  }

  /* Glass themes (data-legacy absent): dark frosted tint over blur(14px) —
     the .last-user-bar recipe. The blur reaches the conversation behind
     because the palette is rendered OUTSIDE the input-wrapper's
     backdrop-filter (that property makes the wrapper a backdrop root, which
     previously trapped the palette's own blur — see ActionBar.svelte).
     Terminal themes keep the flat tokens above. */
  html:not([data-legacy]) .command-palette.svelte-11dfegi {
    background: rgba(20, 20, 24, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  /* Crystal: pure glass — no color, just the blur. Reverts the dark tint
     above so Crystal keeps its native "blur only, zero darkening" look
     (tokens.css :root) instead of reading like Onyx. The higher-specificity
     selector wins over the rule above; the blur is inherited from it. */
  html[data-bar-style="crystal"]:not([data-legacy]) .command-palette.svelte-11dfegi {
    background: transparent;
  }

  .command-item.svelte-11dfegi {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: var(--space-4) 14px;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    text-align: left;
    font-size: var(--text-md);
    transition: background 0.1s;
  }

  .command-item.svelte-11dfegi:hover,
  .command-item.selected.svelte-11dfegi {
    background: var(--white-10);
    color: var(--text-primary);
  }

  .command-name.svelte-11dfegi {
    font-weight: var(--weight-semibold);
    color: var(--accent-primary);
    min-width: 100px;
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 12px;
  }

  .command-desc.svelte-11dfegi {
    flex: 1;
    font-size: var(--text-base);
    color: var(--text-muted);
  }

  .command-item.selected.svelte-11dfegi .command-desc:where(.svelte-11dfegi) {
    color: var(--text-secondary);
  }


  /* Borderless wrapper, sits in the answer's content column. */
  .reasoning-group.svelte-m220fn {
    margin: 4px 0 4px 100px;
    max-width: 720px;
    min-width: 0;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  /* ── Flat activity rows (Activity-group redesign) ──────────── */
  .rg-act-group.svelte-m220fn {
    margin: 6px 0;
  }

  /* Transparent header row: icon + label + chevron-after-label.
     No background, no border, no right-pinned status dots. */
  .rg-act-header.svelte-m220fn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 2px 0;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    background: none;
    color: var(--text-muted);
    font: inherit;
    font-size: 13.5px;
    cursor: pointer;
    text-align: left;
    transition: color 0.15s;
  }
  .rg-act-header.svelte-m220fn:hover {
    color: var(--text-secondary);
  }
  .rg-act-header.svelte-m220fn:focus-visible {
    outline: 2px solid var(--accent-primary-glow, rgba(115, 200, 240, 0.5));
    outline-offset: 1px;
  }

  .rg-act-icon.svelte-m220fn {
    flex-shrink: 0;
    opacity: 0.9;
  }

  .rg-act-label.svelte-m220fn {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .rg-chev.svelte-m220fn {
    flex-shrink: 0;
    margin-left: 2px;
    transition: transform 0.15s ease;
  }
  .rg-chev.open.svelte-m220fn {
    transform: rotate(180deg);
  }

  /* ── Shared .thinking-body treatment ────────────────────────── */
  /* Declared :global so any surface rendering the model's private
     reasoning can adopt the class (ReasoningGroup here, ReasoningPart
     in the AI SDK parts pipeline). Lives in a component <style> block
     because svelte.css is the only global sheet index.html actually
     loads — the treatment vanished after it was moved out of this file
     into styles/global.css (1ed0b336), which was never referenced by
     any page (now deleted).
     Muted plain paragraph, indented under the header label — no
     border, no background, no monospace, no forced italic. Reads as
     a quiet aside, not a headline. Content is markdown-rendered
     HTML ({@html}), so no white-space: pre-wrap — the <p> rhythm
     rules below handle spacing. */
  .thinking-body {
    margin: 6px 0 4px 24px;
    max-width: 68ch;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-muted);
    overflow-wrap: anywhere;
    /* Inline scroll: bound the height so a long thinking trace doesn't push
       Subsequent activity rows off-screen. 12em ≈ ~162px at the default
       Font size (≈ ~7-8 lines / ~500 chars at 68ch). When content exceeds,
       The user scrolls inside the card — same shape pattern used by the
       LiveActivityTicker thought-line fade (LiveActivityTicker.svelte:195). */
    max-height: 12em;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.5em), transparent);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 1.5em), transparent);
  }
  /* The mask is a "there is more below" affordance, so it is only honest
     while the card is scrolled away from the bottom. Pinned to the bottom
     it fades out the last 1.5em — which, on a card that auto-scrolls with
     the stream, is exactly the newest tokens the user is watching arrive.
     Also covers the no-overflow case: nothing to scroll to, nothing to
     hint at, and the fade would just dim the final line. */
  .thinking-body.pinned {
    -webkit-mask-image: none;
            mask-image: none;
  }
  /* Paragraph/code rhythm inside .thinking-body. */
  .thinking-body.svelte-m220fn p { margin: 0.4em 0; }
  .thinking-body.svelte-m220fn p:first-child { margin-top: 0; }
  .thinking-body.svelte-m220fn p:last-child { margin-bottom: 0; }
  .thinking-body.svelte-m220fn code { opacity: 0.85; }

  /* ── Narration bubble wrapper ──────────────────────────────── */
  .rg-narration-bubble.svelte-m220fn {
    /* Counter the parent's margin-left (100px) so narrations share the
       Same horizontal column as the user prompt and the final answer
       (column 90px content, after the 90px label gutter). Without this
       Pull-back, every narration sat at column 190px and felt indented
       Compared to the assistant's own final answer (which has no
       margin-left). */
    margin-left: -100px;
  }

  /* ── Legacy OFF-state styles ────────────────────────────────── */
  .rg-header.svelte-m220fn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 4px 10px;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-muted);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    text-align: left;
  }
  .rg-header-text.svelte-m220fn {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .rg-header-caret.svelte-m220fn {
    flex-shrink: 0;
    width: 10px;
    text-align: center;
    font-size: 10px;
  }

  /* Abort marker */
  .rg-abort-row.svelte-m220fn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 0 6px;
    font-size: 13px;
    font-style: italic;
    color: var(--accent-red);
  }
  .rg-abort-glyph.svelte-m220fn {
    font-size: 12px;
    line-height: 1;
  }


  .summary-card.svelte-1fy4nvn {
    position: relative;
    margin: 6px 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    animation: svelte-1fy4nvn-card-in 0.2s ease;
  }

  @keyframes svelte-1fy4nvn-card-in {
    from { opacity: 0; transform: translateY(-2px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .summary-card-inner.svelte-1fy4nvn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 28px 6px 10px;
    cursor: pointer;
    user-select: none;
  }

  .summary-icon.svelte-1fy4nvn {
    color: var(--accent-amber, #f97316);
    flex-shrink: 0;
    opacity: 0.7;
  }

  .summary-label.svelte-1fy4nvn {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
  }

  .summary-preview.svelte-1fy4nvn {
    flex: 1;
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .summary-time.svelte-1fy4nvn {
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0.5;
    flex-shrink: 0;
  }

  .chevron.svelte-1fy4nvn {
    color: var(--text-muted);
    flex-shrink: 0;
    transition: transform 0.2s;
  }

  .chevron-up.svelte-1fy4nvn {
    transform: rotate(180deg);
  }

  .summary-expanded.svelte-1fy4nvn {
    padding: 0 10px 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    margin-top: 2px;
  }

  .summary-content.svelte-1fy4nvn {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-secondary);
    max-height: 200px;
    overflow-y: auto;
  }

  .summary-content.svelte-1fy4nvn p {
    margin: 0 0 4px;
  }

  .summary-content.svelte-1fy4nvn p:last-child {
    margin-bottom: 0;
  }

  .summary-content.svelte-1fy4nvn ul, .summary-content.svelte-1fy4nvn ol {
    margin: 4px 0;
    padding-left: 18px;
  }

  .summary-content.svelte-1fy4nvn code {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 11px;
    background: rgba(255, 255, 255, 0.06);
    padding: 1px 3px;
    border-radius: 3px;
  }

  .summary-footer.svelte-1fy4nvn {
    display: flex;
    gap: 8px;
    margin-top: 4px;
  }

  .summary-meta.svelte-1fy4nvn {
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0.5;
  }

  .summary-dismiss.svelte-1fy4nvn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
    padding: 0;
    opacity: 0;
    transition: opacity 0.15s;
  }

  .summary-card.svelte-1fy4nvn:hover .summary-dismiss:where(.svelte-1fy4nvn) {
    opacity: 0.6;
  }

  .summary-dismiss.svelte-1fy4nvn:hover {
    opacity: 1 !important;
    color: var(--text-primary);
  }


  /* ============================================================
     Every color routes through an --insights-* token, so the whole
     tab re-tints with the user's theme (bar style + legacy themes)
     without a single hard-coded hex. Layout, spacing and typography
     follow the reference dashboard; only the palette is ours.
     ============================================================ */
  .insights-root.svelte-ifu0sm {
    padding: var(--space-lg, 24px);
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
    font-family: var(--insights-font-sans);
    color: var(--insights-text-primary);
    font-feature-settings: 'tnum';
    line-height: 1.4;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
  }

  .dash-header.svelte-ifu0sm { margin-bottom: -4px; }
  .dash-header.svelte-ifu0sm h2:where(.svelte-ifu0sm) {
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 3px;
    display: flex;
    align-items: center;
    gap: var(--space-sm, 8px);
  }
  /* Functional accent bar before the title — semantic anchor, not decoration */
  .dash-header.svelte-ifu0sm h2:where(.svelte-ifu0sm)::before {
    content: '';
    display: block;
    width: 3px;
    height: 19px;
    background: var(--insights-accent);
    border-radius: 1px;
  }
  .dash-header.svelte-ifu0sm p:where(.svelte-ifu0sm) {
    font-size: 0.85rem;
    color: var(--insights-text-secondary);
    margin: 0 0 0 11px;
  }

  /* ── Summary banner ── */
  .summary-banner.svelte-ifu0sm {
    background: var(--insights-bg-shell);
    border: 1px solid var(--insights-border-default);
    border-radius: var(--insights-radius-md, 6px);
    padding: 18px 20px;
  }
  .summary-copy.svelte-ifu0sm { min-width: 0; }
  .summary-text.svelte-ifu0sm {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--insights-text-primary);
  }
  .summary-text--muted.svelte-ifu0sm { color: var(--insights-text-secondary); }
  .summary-text--error.svelte-ifu0sm { color: var(--insights-status-warning); }

  /* ── KPI row — gap:1px over the divider color paints one hairline
        layer; each cell paints its own background. ── */
  .kpi-row.svelte-ifu0sm {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1px;
    background: var(--insights-border-default);
    border: 1px solid var(--insights-border-default);
    border-radius: var(--insights-radius-md, 6px);
    overflow: hidden;
  }
  .kpi.svelte-ifu0sm {
    background: var(--insights-bg-cell);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 96px;
  }
  .kpi-top.svelte-ifu0sm {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
  }
  .kpi-label.svelte-ifu0sm {
    font-size: 0.68rem;
    color: var(--insights-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    white-space: nowrap;
  }
  .kpi-value.svelte-ifu0sm {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.1;
  }
  .kpi-caption.svelte-ifu0sm {
    font-size: 0.72rem;
    color: var(--insights-text-tertiary);
  }

  /* Trend arrows — direction carries meaning, so color is secondary.
     'none' means "no baseline to compare against", not "flat". */
  .trend.svelte-ifu0sm {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-family: var(--insights-font-mono);
    font-size: 0.7rem;
    white-space: nowrap;
  }
  .trend[data-dir='up'].svelte-ifu0sm { color: var(--insights-status-success); }
  .trend[data-dir='down'].svelte-ifu0sm { color: var(--insights-status-critical); }
  .trend[data-dir='flat'].svelte-ifu0sm { color: var(--insights-text-secondary); }
  .trend[data-dir='none'].svelte-ifu0sm { color: var(--insights-text-tertiary); }
  .trend-arrow.svelte-ifu0sm { font-size: 0.85rem; line-height: 1; }

  /* ── Dashboard grid ── */
  .dash-grid.svelte-ifu0sm {
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr;
    gap: 14px;
    align-items: start;
  }
  .dash-col.svelte-ifu0sm {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
  }

  .card.svelte-ifu0sm {
    background: var(--insights-bg-shell);
    border: 1px solid var(--insights-border-default);
    border-radius: var(--insights-radius-md, 6px);
    padding: 16px;
    min-width: 0;
  }
  .card--grow.svelte-ifu0sm { flex: 1; }
  .card-head.svelte-ifu0sm {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 14px;
  }
  .card-head.svelte-ifu0sm h3:where(.svelte-ifu0sm) {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--insights-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
  }
  .card-sub.svelte-ifu0sm {
    font-size: 0.7rem;
    color: var(--insights-text-tertiary);
    white-space: nowrap;
  }
  .empty.svelte-ifu0sm {
    font-size: 0.8rem;
    color: var(--insights-text-secondary);
    margin: 0;
  }/* ── Bar rows (shared by top-tools / provider / period) ── */
  .bar-list.svelte-ifu0sm {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
  .bar-row.svelte-ifu0sm {
    display: grid;
    grid-template-columns: minmax(60px, 96px) 1fr auto;
    align-items: center;
    gap: 10px;
    font-size: 0.8rem;
  }
  .bar-row--stacked.svelte-ifu0sm {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
  }
  .row-head.svelte-ifu0sm {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
  }
  .bar-label.svelte-ifu0sm {
    color: var(--insights-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--insights-font-mono);
    font-size: 0.76rem;
  }
  .bar-track.svelte-ifu0sm {
    display: block;
    height: 6px;
    background: var(--insights-border-muted);
    border-radius: 3px;
    overflow: hidden;
  }
  .bar-fill.svelte-ifu0sm {
    display: block;
    height: 100%;
    min-width: 2px;
    background: var(--insights-accent);
    border-radius: 3px;
    transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .bar-fill--tone.svelte-ifu0sm { background: var(--insights-status-warning); }
  .bar-value.svelte-ifu0sm {
    color: var(--insights-text-secondary);
    text-align: right;
    font-family: var(--insights-font-mono);
    font-size: 0.76rem;
  }

  /* ── Dual-axis week chart ── */
  .chart-legend.svelte-ifu0sm {
    display: flex;
    gap: 14px;
    margin-bottom: 10px;
  }
  .legend-item.svelte-ifu0sm {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
    color: var(--insights-text-secondary);
  }
  .swatch.svelte-ifu0sm {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    display: inline-block;
    flex-shrink: 0;
  }
  .swatch--sessions.svelte-ifu0sm { background: var(--insights-accent); }
  .swatch--tokens.svelte-ifu0sm { background: var(--insights-status-success); }

  .dual-axis.svelte-ifu0sm {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: stretch;
    gap: 8px;
    height: 168px;
  }
  .axis.svelte-ifu0sm {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: var(--insights-font-mono);
    font-size: 0.65rem;
    color: var(--insights-text-tertiary);
  }
  /* Each axis hugs the plot it labels: left labels right-align into the
     chart, right labels left-align out of it. Without this both columns
     center and the top tick drifts away from the bar it measures. */
  .axis--left.svelte-ifu0sm { align-items: flex-end; text-align: right; }
  .axis--right.svelte-ifu0sm { align-items: flex-start; text-align: left; }
  .column-field.svelte-ifu0sm {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    align-items: end;
    border-bottom: 1px solid var(--insights-border-muted);
  }
  .column.svelte-ifu0sm {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
  }
  .column-bars.svelte-ifu0sm {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    min-height: 0;
  }
  .column-bar.svelte-ifu0sm {
    width: 42%;
    min-height: 1px;
    border-radius: 2px 2px 0 0;
    transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .column-bar--sessions.svelte-ifu0sm { background: var(--insights-accent); }
  .column-bar--tokens.svelte-ifu0sm { background: var(--insights-status-success); }
  .column-label.svelte-ifu0sm {
    text-align: center;
    font-family: var(--insights-font-mono);
    font-size: 0.62rem;
    color: var(--insights-text-tertiary);
    padding-top: 5px;
  }

  /* ── Donut ── */
  .donut-wrap.svelte-ifu0sm {
    display: flex;
    align-items: center;
    gap: 18px;
  }
  .donut.svelte-ifu0sm {
    position: relative;
    width: 116px;
    height: 116px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .donut-hole.svelte-ifu0sm {
    position: absolute;
    inset: 26%;
    border-radius: 50%;
    background: var(--insights-bg-shell);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
  }
  .donut-total.svelte-ifu0sm {
    font-family: var(--insights-font-mono);
    font-size: 1.05rem;
    font-weight: 600;
  }
  .donut-cap.svelte-ifu0sm {
    font-size: 0.62rem;
    color: var(--insights-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .donut-legend.svelte-ifu0sm {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1;
  }
  .donut-legend.svelte-ifu0sm li:where(.svelte-ifu0sm) {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 7px;
    font-size: 0.74rem;
  }
  .donut-legend-name.svelte-ifu0sm {
    color: var(--insights-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .donut-legend-val.svelte-ifu0sm {
    font-family: var(--insights-font-mono);
    color: var(--insights-text-secondary);
  }/* ── Heatmap — five buckets of the accent ramp ── */
  .heatmap-rows.svelte-ifu0sm {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .heatmap-row.svelte-ifu0sm {
    display: grid;
    grid-template-columns: 26px 1fr;
    align-items: center;
    gap: 7px;
  }
  .heatmap-day.svelte-ifu0sm {
    font-family: var(--insights-font-mono);
    font-size: 0.62rem;
    color: var(--insights-text-tertiary);
  }
  .heatmap-cells.svelte-ifu0sm {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    gap: 2px;
  }
  .heatmap-cell.svelte-ifu0sm {
    display: block;
    aspect-ratio: 1;
    border-radius: 2px;
    background: var(--insights-bg-cell);
    border: 1px solid var(--insights-border-muted);
  }
  /* Opacity ramp over the accent hue: re-tints with the theme, and keeps
     the buckets distinguishable in a monochrome palette too. */
  .heatmap-cell[data-level='1'].svelte-ifu0sm { background: var(--insights-accent); opacity: 0.25; }
  .heatmap-cell[data-level='2'].svelte-ifu0sm { background: var(--insights-accent); opacity: 0.45; }
  .heatmap-cell[data-level='3'].svelte-ifu0sm { background: var(--insights-accent); opacity: 0.7; }
  .heatmap-cell[data-level='4'].svelte-ifu0sm { background: var(--insights-accent); opacity: 1; }

  .heatmap-scale.svelte-ifu0sm {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
  }
  .heatmap-ramp.svelte-ifu0sm {
    display: flex;
    gap: 2px;
    flex: 1;
  }
  .heatmap-ramp.svelte-ifu0sm .heatmap-cell:where(.svelte-ifu0sm) { aspect-ratio: auto; height: 8px; flex: 1; }
  .heatmap-scale-label.svelte-ifu0sm {
    font-family: var(--insights-font-mono);
    font-size: 0.62rem;
    color: var(--insights-text-tertiary);
  }

  /* ── Detail row ── */
  .detail-grid.svelte-ifu0sm {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
    align-items: start;
  }

  .ratio-track.svelte-ifu0sm {
    display: block;
    height: 8px;
    background: var(--insights-bg-cell);
    border-radius: 4px;
    overflow: hidden;
  }
  .ratio-fill.svelte-ifu0sm {
    height: 100%;
    border-radius: 4px;
    background: var(--insights-accent);
    transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .ratio-fill[data-tier='success'].svelte-ifu0sm { background: var(--insights-status-success); }
  .ratio-fill[data-tier='warning'].svelte-ifu0sm { background: var(--insights-status-warning); }
  .ratio-fill[data-tier='critical'].svelte-ifu0sm { background: var(--insights-status-critical); }
  .ratio-meta.svelte-ifu0sm {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin: 10px 0 0;
    flex-wrap: wrap;
  }
  .ratio-num.svelte-ifu0sm {
    font-family: var(--insights-font-mono);
    font-size: 1.2rem;
    font-weight: 700;
  }
  .ratio-num[data-tier='success'].svelte-ifu0sm { color: var(--insights-status-success); }
  .ratio-num[data-tier='warning'].svelte-ifu0sm { color: var(--insights-status-warning); }
  .ratio-num[data-tier='critical'].svelte-ifu0sm { color: var(--insights-status-critical); }
  .ratio-detail.svelte-ifu0sm { font-size: 0.76rem; color: var(--insights-text-secondary); }

  .cache-tags.svelte-ifu0sm { display: flex; gap: 6px; flex-wrap: wrap; }
  .cache-tag.svelte-ifu0sm {
    font-family: var(--insights-font-mono);
    font-size: 0.68rem;
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--insights-bg-cell);
  }
  .cache-tag--read.svelte-ifu0sm { color: var(--insights-status-success); }
  .cache-tag--write.svelte-ifu0sm { color: var(--insights-status-warning); }

  .session-list.svelte-ifu0sm {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .session-row.svelte-ifu0sm {
    display: grid;
    grid-template-columns: 1fr auto 74px;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--insights-border-muted);
    font-size: 0.82rem;
  }
  .session-row.svelte-ifu0sm:last-child { border-bottom: none; }
  .session-name.svelte-ifu0sm {
    color: var(--insights-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .session-meta.svelte-ifu0sm,
  .session-time.svelte-ifu0sm {
    font-family: var(--insights-font-mono);
    font-size: 0.74rem;
    color: var(--insights-text-secondary);
    white-space: nowrap;
  }
  .session-time.svelte-ifu0sm { color: var(--insights-text-tertiary); text-align: right; }

  /* ── Footer ── */
  .dash-footer.svelte-ifu0sm {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 13px 16px;
    background: var(--insights-bg-shell);
    border: 1px solid var(--insights-border-default);
    border-radius: var(--insights-radius-md, 6px);
    font-size: 0.78rem;
    color: var(--insights-text-secondary);
  }
  .dash-footer-label.svelte-ifu0sm {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--insights-text-primary);
  }
  .dash-footer-item.svelte-ifu0sm { display: inline-flex; align-items: center; gap: 5px; }
  .dash-footer.svelte-ifu0sm strong:where(.svelte-ifu0sm) {
    color: var(--insights-text-primary);
    font-family: var(--insights-font-mono);
  }
  .dot.svelte-ifu0sm { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
  .dot--sessions.svelte-ifu0sm { background: var(--insights-accent); }
  .dot--tokens.svelte-ifu0sm { background: var(--insights-status-success); }

  /* ── Responsive collapse ── */
  @media (max-width: 1100px) {
    .dash-grid.svelte-ifu0sm { grid-template-columns: 1fr 1fr; }
    .dash-col.svelte-ifu0sm:last-child { grid-column: 1 / -1; }
    .kpi-row.svelte-ifu0sm { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 768px) {
    .dash-grid.svelte-ifu0sm { grid-template-columns: 1fr; }
    .dash-col.svelte-ifu0sm:last-child { grid-column: auto; }
    .kpi-row.svelte-ifu0sm { grid-template-columns: repeat(2, 1fr); }
    .donut-wrap.svelte-ifu0sm { flex-direction: column; align-items: stretch; }
    .donut.svelte-ifu0sm { margin: 0 auto; }
    .session-row.svelte-ifu0sm { grid-template-columns: 1fr auto; }
    .session-meta.svelte-ifu0sm { display: none; }
  }
  @media (max-width: 480px) {
    .kpi-row.svelte-ifu0sm { grid-template-columns: 1fr; }
  }


  .message.svelte-189mczp {
    display: grid;
    grid-template-columns: 90px 1fr 90px;
    gap: 0 10px;
    position: relative;
    padding: 2px 0;
  }

  .message.svelte-189mczp {
    animation: svelte-189mczp-message-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .message.streaming.svelte-189mczp {
    animation: svelte-189mczp-message-stream-in 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }

  @keyframes svelte-189mczp-message-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes svelte-189mczp-message-stream-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* ── Gutter Labels ── */
  /* The label tracks the content's first-line BASELINE (align-self: baseline
     on both the label and .message-content), so the header stays aligned to
     the first line regardless of font face/size or the first element's top
     margin. Center-of-line alignment can't be font-independent — each font
     parks its glyphs at a different spot in its line box — but a baseline is a
     property of the font itself, so aligning baselines is font-safe and needs
     no per-role nudges. */
  .message-label.svelte-189mczp {
    align-self: baseline;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
  }

  .message-label.label-left.svelte-189mczp {
    text-align: right;
  }

  .message-label.label-right.svelte-189mczp {
    text-align: left;
  }

  .label-dot.svelte-189mczp {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    vertical-align: middle;
    margin: 0 4px;
  }

  .label-dot.assistant.svelte-189mczp {
    background: var(--accent-amber, #f97316);
  }

  .label-dot.user.svelte-189mczp {
    background: var(--accent-blue, #3b82f6);
  }

  .label-dot.orchestrator.svelte-189mczp {
    background: #a855f7; /* distinct purple — clearly not user/assistant */
  }

  .label-dot.error.svelte-189mczp {
    background: var(--accent-red, #f87171);
  }

  .label-name.svelte-189mczp {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
  }

  .label-time.svelte-189mczp {
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0.6;
    margin-left: 4px;
  }

  .streaming-indicator.svelte-189mczp {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 2px;
    vertical-align: middle;
  }

  .streaming-indicator.svelte-189mczp .dot:where(.svelte-189mczp) {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent-primary);
    animation: svelte-189mczp-pulse 1.4s infinite ease-in-out;
  }

  .streaming-indicator.svelte-189mczp .dot:where(.svelte-189mczp):nth-child(2) { animation-delay: 0.2s; }
  .streaming-indicator.svelte-189mczp .dot:where(.svelte-189mczp):nth-child(3) { animation-delay: 0.4s; }

  @keyframes svelte-189mczp-pulse {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1); }
  }

  /* ── Content ── */
  .message-content.svelte-189mczp {
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-primary);
    min-width: 0;
    align-self: baseline;
  }

  .message-user.svelte-189mczp .message-content:where(.svelte-189mczp) {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 6px 14px;
    max-width: 85%;
    justify-self: end;
  }

  /* ── Compact Layout (both sides left-aligned) ── */
  .message.compact.svelte-189mczp {
    grid-template-columns: 90px 1fr;
  }

  .message.compact.svelte-189mczp .label-right:where(.svelte-189mczp) {
    display: none;
  }

  .message.compact.svelte-189mczp .label-left:where(.svelte-189mczp) {
    justify-content: flex-end;
  }

  .message-user.compact.svelte-189mczp .message-content:where(.svelte-189mczp) {
    justify-self: start;
  }

  .message-user.compact.svelte-189mczp .message-label.label-left:where(.svelte-189mczp) {
    display: block;
  }

  .message-system.svelte-189mczp {
    grid-template-columns: 1fr;
  }

  .message-system.svelte-189mczp .message-content:where(.svelte-189mczp) {
    color: var(--accent-primary, #c4a882);
    font-size: 12px;
    white-space: pre-wrap;
    padding: 8px 0;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
  }

  /* ─── Error message (Bug fix 2026-09-21: surface API errors red) ─── */
  /* The agent loop emits role:'error' messages when an upstream provider
     rejects a request after the retry budget is exhausted. Render as a
     centered red notice — distinct from .message-system (sandstone) and
     .message-thought. The class mirrors the .tool-interrupted-label tone
     so a stopped turn reads consistently everywhere. */
  .message-error.svelte-189mczp {
    grid-template-columns: 1fr;
  }
  .message-error.svelte-189mczp .message-content:where(.svelte-189mczp) {
    color: var(--accent-red, #f87171);
    font-size: 12px;
    white-space: pre-wrap;
    padding: 8px 0;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    font-weight: 500;
  }

  /* ─── File Reference Pills ────────────────── */
  .message-content.svelte-189mczp .file-ref {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px 2px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-family: "SF Mono", "Monaco", "Cascadia Code", monospace;
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    cursor: default;
    transition: background 0.15s;
  }

  .message-content.svelte-189mczp .file-ref:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  .message-content.svelte-189mczp .file-ref svg {
    flex-shrink: 0;
    opacity: 0.6;
  }

  /* ─── Turn stats footer ("Thought for 12s · 3 tools") ─── */
  .message-stats.svelte-189mczp {
    margin-top: 6px;
    font-size: 11px;
    font-style: italic;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    opacity: 0.8;
  }

  /* ─── Inline long-user-message clamp (replaces PastePopup) ─── */
  /* (empty) .message-text {
    /* transparent wrapper; inherits .message-content font/size/line-height *\/
  }*/
  .message-text.clamped.svelte-189mczp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
  }
  .message-text.fade.svelte-189mczp {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.4em), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 1.4em), transparent);
  }
  /* The full row stays the click target (generous hit area), but only the
     "show more" text highlights on hover — no background, no button look. */
  .expand-toggle.svelte-189mczp {
    display: block;
    width: 100%;
    margin: 2px 0 0;
    padding: 0;
    border: none;
    background: none;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.2;
    cursor: pointer;
    text-align: right;
    transition: color 0.15s;
  }
  .expand-toggle.svelte-189mczp:hover {
    color: var(--text-secondary);
  }

  /* ─── System Message ─────────────────────────── */

  /* ─── Markdown Content Styles ─────────────────── */
  .assistant-content.svelte-189mczp h1,
  .assistant-content.svelte-189mczp h2,
  .assistant-content.svelte-189mczp h3,
  .assistant-content.svelte-189mczp h4 {
    color: var(--text-primary);
    margin: 16px 0 8px;
    font-weight: 600;
  }

  .assistant-content.svelte-189mczp h1 { font-size: 18px; }
  .assistant-content.svelte-189mczp h2 { font-size: 16px; }
  .assistant-content.svelte-189mczp h3 { font-size: 15px; }
  .assistant-content.svelte-189mczp h4 { font-size: 14px; }

  .assistant-content.svelte-189mczp p { margin: 8px 0; }
  .assistant-content.svelte-189mczp strong {
    /* Agent-output bold text picks up the user's accent color so the
     * Popups (ask_to_user, permission) and the agent's text share a
     * coherent visual language. Defaults to --text-primary when the user
     * hasn't picked a custom accent. */
    color: var(--accent-primary, var(--text-primary));
    font-weight: 600;
  }

  .assistant-content.svelte-189mczp code {
    /* Inline code chips pick up the user's accent color (background + text)
     * so they stay consistent with the bold/<strong> highlights just above.
     * `--accent-primary` is the live accent (theme-applier.ts sets it as an
     * inline style from the Settings accent picker); `--accent-primary-glow`
     * is the same color at low alpha for the chip background — it follows
     * the user-selected accent without hardcoding a specific gem hue.
     * Falls back to --bg-tertiary when no accent is configured (Pearl default
     * sets accent-primary to off-white which would render as invisible text
     * on the glow — only use the glow when we have a real color). */
    background: color-mix(in srgb, var(--accent-primary) 14%, transparent);
    color: var(--accent-primary);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
    font-family: "SF Mono", "Monaco", "Cascadia Code", monospace;
  }

  .assistant-content.svelte-189mczp a { color: var(--accent-blue); text-decoration: none; }
  .assistant-content.svelte-189mczp a:hover { text-decoration: underline; }

  .assistant-content.svelte-189mczp .code-block {
    background: rgba(14, 14, 16, 0.65);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12));
    border-radius: 10px;
    margin: 8px 0;
    overflow: hidden;
  }

  .assistant-content.svelte-189mczp .code-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .assistant-content.svelte-189mczp .code-lang {
    font-size: 11px;
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    color: var(--text-muted);
    text-transform: lowercase;
  }

  .assistant-content.svelte-189mczp .code-copy-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
    display: flex;
    align-items: center;
  }

  .assistant-content.svelte-189mczp .code-block:hover .code-copy-btn {
    opacity: 0.7;
  }

  .assistant-content.svelte-189mczp .code-copy-btn:hover {
    color: var(--text-primary);
    opacity: 1 !important;
  }

  .assistant-content.svelte-189mczp .code-copy-btn.copied {
    color: var(--accent-green);
    opacity: 1 !important;
  }

  .assistant-content.svelte-189mczp .code-block pre {
    padding: 6px 10px;
    overflow-x: auto;
    margin: 0;
  }

  .assistant-content.svelte-189mczp .code-block code {
    background: none;
    padding: 0;
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-secondary);
    font-family: "SF Mono", "Monaco", "Cascadia Code", monospace;
  }

  .assistant-content.svelte-189mczp .code-block:has(> pre > code:empty) {
    /* Belt-and-braces for any future empty-code-block leak. The
       markdown pipeline (normalizeMarkdown in lib/markdown.ts) already
       strips paired empty fences at the source — if a future regression
       ever bypasses that path (e.g. a streaming path that doesn't go
       through normalize), the empty `pre > code` would still render as
       a ~40px empty box. Collapsing it to zero height costs nothing for
       the non-empty case (`:has` only matches when code is :empty) and
       visibly removes the worst-case "where did this empty box come
       from" UX issue. Defensive CSS, scoped to the assistant content. */
    min-height: 0;
    padding: 0;
    margin: 0;
    border: none;
  }

  .assistant-content.svelte-189mczp .code-block:has(> pre > code:empty) > .code-header {
    /* Hide the orphan code-header (with its `text` language pill + copy
       button) when the body is empty — there's nothing to copy, so the
       header just advertises an empty box. */
    display: none;
  }

  .assistant-content.svelte-189mczp table {
    /* Scrollable table (Grok-style): render as a block so a wide table scrolls
       horizontally within the message column instead of overflowing and getting
       clipped when the window is narrowed. Only the table scrolls — surrounding
       text is not a table, so it still wraps normally. */
    display: block;
    max-width: 100%;
    overflow-x: auto;
    /* separate (not collapse) so the table's own border + border-radius define
       rounded outer corners; overflow-x clips the cell grid to that curve. */
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    margin: 10px 0;
    font-size: 13px;
    /* Transparent — the table blends into the message bubble instead of reading
       as a grey/white card. Structure comes from the border + grid lines, not a
       background fill. */
    background: transparent;
  }

  /* Transparent fill on every table sub-element so no UA default or theme
     bleed paints a grey/white block in any theme. */
  .assistant-content.svelte-189mczp thead,
  .assistant-content.svelte-189mczp tbody,
  .assistant-content.svelte-189mczp tr {
    background: transparent;
  }

  .assistant-content.svelte-189mczp th,
  .assistant-content.svelte-189mczp td {
    background: transparent;
    padding: 6px 10px;
    border-bottom: 1px solid var(--glass-border);
    border-right: 1px solid var(--glass-border);
    text-align: left;
  }

  /* Drop the trailing inner edge on the last column / last row so the table's
     outer border is the single clean line at each edge. */
  .assistant-content.svelte-189mczp th:last-child,
  .assistant-content.svelte-189mczp td:last-child {
    border-right: none;
  }
  .assistant-content.svelte-189mczp tr:last-child td {
    border-bottom: none;
  }

  .assistant-content.svelte-189mczp th {
    /* No background fill — the header stays readable via bold weight and the
       row's bottom grid line, with no grey/white tint. */
    font-weight: 600;
    color: var(--text-secondary);
  }

  /* Model output can include a raw <button> (or other form control) as live
     HTML, injected via {@html} in .message-text. Svelte doesn't scope {@html}
     content, so no rule targets it and it falls back to the browser's <button>
     defaults — a grey rgb(240,240,240) fill + black outset border — reading as a
     grey/white block. Strip those UA defaults so any emitted control blends into
     the message (transparent, inherits text style). This was the real "grey
     table": a <button class="tg-toggle"> the model emitted in its answer. */
  .assistant-content.svelte-189mczp button,
  .assistant-content.svelte-189mczp input {
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    text-align: inherit;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
  }

  .assistant-content.svelte-189mczp ul,
  .assistant-content.svelte-189mczp ol {
    padding-left: 20px;
    margin: 8px 0;
  }

  .assistant-content.svelte-189mczp li { margin: 4px 0; }

  .assistant-content.svelte-189mczp hr {
    border: none;
    border-top: 1px solid var(--glass-border);
    margin: 16px 0;
  }

  .assistant-content.svelte-189mczp .insight-block {
    background: rgba(210, 180, 140, 0.08);
    border: 1px solid rgba(210, 180, 140, 0.2);
    border-radius: 8px;
    padding: 12px;
    margin: 10px 0;
  }

  .assistant-content.svelte-189mczp .insight-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
  }

  .assistant-content.svelte-189mczp .insight-title {
    font-weight: 600;
    font-size: 13px;
    color: var(--accent-primary);
  }

  .assistant-content.svelte-189mczp .candidate-card {
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 12px;
    margin: 10px 0;
  }

  .assistant-content.svelte-189mczp .candidate-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }

  .assistant-content.svelte-189mczp .candidate-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
  }

  .assistant-content.svelte-189mczp .candidate-status {
    font-size: 12px;
    font-weight: 500;
  }

  .assistant-content.svelte-189mczp .candidate-details-toggle {
    font-size: 11px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 0;
  }

  .assistant-content.svelte-189mczp .candidate-details-content {
    font-size: 13px;
    color: var(--text-secondary);
    border-top: 1px solid var(--glass-border);
    padding-top: 8px;
    margin-top: 4px;
  }

  /* ─── Hover action bar (Copy + Read aloud) ─── */
  /* Assistant messages only. Fades in on row hover; reserves space so the
     layout never shifts when the buttons appear. Transparent icon buttons —
     no grey fills (matches the .code-copy-btn idiom and the no-default-grey
     rule); accent on hover, green while a copy just succeeded. */
  .message-actions.svelte-189mczp {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: 4px;
    height: 22px;
    opacity: 0;
    transition: opacity 0.15s ease;
  }
  .message.svelte-189mczp:hover .message-actions:where(.svelte-189mczp),
  .message-actions.visible.svelte-189mczp {
    opacity: 1;
  }
  .msg-action.svelte-189mczp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 22px;
    padding: 0;
    border: none;
    background: none;
    color: var(--text-muted);
    border-radius: 5px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
  }
  .msg-action.svelte-189mczp:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
  }
  .msg-action.copied.svelte-189mczp {
    color: var(--accent-green);
  }
  .msg-action.svelte-189mczp svg:where(.svelte-189mczp) {
    width: 14px;
    height: 14px;
    pointer-events: none;
  }



  .tasks-panel.svelte-1xehf8i {
    padding: 6px 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* ── Onboarding ── */
  .onboarding-text.svelte-1xehf8i {
    font-size: 11px; color: var(--text-muted); line-height: 1.5;
    margin: 0 14px 6px; opacity: 0.6;
    white-space: normal; word-wrap: break-word; overflow-wrap: break-word;
    min-width: 0; flex-shrink: 0;
  }

  /* ── Header ── */
  .panel-header.svelte-1xehf8i {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px 8px;
  }

  .panel-title.svelte-1xehf8i {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .panel-count.svelte-1xehf8i {
    font-size: 10px;
    color: var(--text-primary);
    font-weight: 600;
    min-width: 14px;
    text-align: center;
  }

  .btn-add.svelte-1xehf8i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    margin-left: auto;
    transition: color 0.15s;
  }

  .btn-add.svelte-1xehf8i:hover {
    color: var(--text-primary);
  }

  /* ── Filter Dropdown ── */
  .filter-dropdown-wrapper.svelte-1xehf8i {
    position: relative;
    padding: 0 14px 8px;
  }

  .filter-trigger.svelte-1xehf8i {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 0;
    border: none;
    background: none;
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-family: inherit;
    cursor: pointer;
    transition: color 0.15s;
  }

  .filter-trigger.svelte-1xehf8i:hover {
    color: var(--text-secondary);
  }

  .filter-label.svelte-1xehf8i {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
  }

  .filter-chevron.svelte-1xehf8i {
    opacity: 0.5;
    flex-shrink: 0;
    transition: transform 0.15s;
  }

  .filter-dropdown.svelte-1xehf8i {
    position: absolute;
    top: calc(100% + 4px);
    left: 14px;
    min-width: 160px;
    max-width: 220px;
    max-height: 200px;
    overflow-y: auto;
    background: rgba(14, 14, 16, 0.65);
    border-radius: 14px;
    padding: 4px;
    box-shadow: var(--glass-shadow);
    z-index: var(--z-toast);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: svelte-1xehf8i-fade-in 0.1s ease-out;
  }

  .filter-option.svelte-1xehf8i {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    border: none;
    background: none;
    color: var(--text-secondary);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    border-radius: 14px;
    transition: all 0.1s;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .filter-option.svelte-1xehf8i:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
  }

  .filter-option.active.svelte-1xehf8i {
    background: rgba(210, 180, 140, 0.12);
    color: var(--text-primary);
  }

  @keyframes svelte-1xehf8i-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* ── Summary Line ── */
  .summary-line.svelte-1xehf8i {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 14px 8px;
    font-size: var(--text-xs);
    color: var(--text-muted);
  }

  .sum-active.svelte-1xehf8i {
    color: var(--accent-blue);
  }

  .sum-pending.svelte-1xehf8i {
    color: var(--text-muted);
  }

  .sum-done.svelte-1xehf8i {
    color: var(--accent-green);
  }

  .sum-scheduled.svelte-1xehf8i {
    color: var(--accent-amber, #f59e0b);
  }

  .sum-sep.svelte-1xehf8i {
    opacity: 0.4;
  }

  /* ── Create Form ── */
  .create-form.svelte-1xehf8i {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 14px 8px;
    border-bottom: 1px solid var(--glass-border);
  }

  .subject-input.svelte-1xehf8i {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-primary);
    font-size: var(--text-md);
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
  }

  .subject-input.svelte-1xehf8i::placeholder { color: var(--text-muted); }
  .subject-input.svelte-1xehf8i:focus { border-color: var(--glass-border-hover); }

  .desc-input.svelte-1xehf8i {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-family: inherit;
    outline: none;
    resize: vertical;
    min-height: 32px;
    transition: border-color 0.15s;
  }

  .desc-input.svelte-1xehf8i::placeholder { color: var(--text-muted); }
  .desc-input.svelte-1xehf8i:focus { border-color: var(--glass-border-hover); }

  .btn-submit.svelte-1xehf8i {
    align-self: flex-end;
    padding: 4px 12px;
    border: none;
    border-radius: var(--radius-md);
    background: none;
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-family: inherit;
    cursor: pointer;
    transition: color 0.15s;
  }

  .btn-submit.svelte-1xehf8i:hover { color: var(--text-primary); }
  .btn-submit.svelte-1xehf8i:disabled { opacity: 0.3; cursor: not-allowed; }

  /* ── Schedule Toggle ── */
  .schedule-toggle.svelte-1xehf8i {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
  }

  .schedule-toggle.svelte-1xehf8i input[type="checkbox"]:where(.svelte-1xehf8i) {
    appearance: none;
    width: 14px;
    height: 14px;
    border: 1px solid var(--glass-border);
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
    position: relative;
    transition: background 0.15s, border-color 0.15s;
  }

  .schedule-toggle.svelte-1xehf8i input[type="checkbox"]:where(.svelte-1xehf8i):checked {
    background: var(--accent-amber, #f59e0b);
    border-color: var(--accent-amber, #f59e0b);
  }

  .schedule-toggle.svelte-1xehf8i input[type="checkbox"]:where(.svelte-1xehf8i):checked::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #000;
    font-weight: 700;
  }

  .toggle-label.svelte-1xehf8i {
    font-size: var(--text-sm);
    color: var(--text-muted);
  }

  .interval-row.svelte-1xehf8i {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .interval-label.svelte-1xehf8i {
    font-size: var(--text-sm);
    color: var(--text-muted);
    white-space: nowrap;
  }

  .interval-input.svelte-1xehf8i {
    width: 56px;
    padding: 4px 6px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-family: inherit;
    outline: none;
    text-align: center;
    -moz-appearance: textfield;
  }

  .interval-input.svelte-1xehf8i::-webkit-inner-spin-button,
  .interval-input.svelte-1xehf8i::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .interval-input.svelte-1xehf8i:focus { border-color: var(--glass-border-hover); }

  .unit-select.svelte-1xehf8i {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-family: inherit;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    padding-right: 20px;
  }

  .unit-select.svelte-1xehf8i:focus { border-color: var(--glass-border-hover); }

  /* ── Empty State ── */
  .empty-state.svelte-1xehf8i {
    padding: 16px 14px;
    font-size: var(--text-base);
    color: var(--text-muted);
    opacity: 0.6;
    text-align: center;
  }

  /* ── Task List ── */
  .task-list.svelte-1xehf8i {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: calc(100vh - 280px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
  }

  .task-list.svelte-1xehf8i::-webkit-scrollbar { width: 3px; }
  .task-list.svelte-1xehf8i::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
  }
  .task-list.svelte-1xehf8i::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
  }

  .task-group.svelte-1xehf8i {
    margin-bottom: 2px;
  }

  .group-label.svelte-1xehf8i {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 14px 2px;
    opacity: 0.6;
  }

  /* ── Task Row ── */
  .task-row.svelte-1xehf8i {
    display: flex;
    align-items: center;
  }

  .task-item.svelte-1xehf8i {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    padding: 5px 14px;
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    text-align: left;
    width: 100%;
  }

  .task-item.completed.svelte-1xehf8i {
    opacity: 0.45;
  }

  .task-item.completed.svelte-1xehf8i .task-subject:where(.svelte-1xehf8i) {
    text-decoration: line-through;
  }

  /* ── Status Dot ── */
  .dot.svelte-1xehf8i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-muted);
    flex-shrink: 0;
  }

  .dot.running.svelte-1xehf8i {
    background: var(--accent-blue);
    box-shadow: 0 0 6px rgba(59, 130, 246, 0.4);
    animation: svelte-1xehf8i-pulse-dot 2s infinite;
  }

  .dot.done.svelte-1xehf8i {
    background: var(--accent-green);
  }

  .dot.scheduled.svelte-1xehf8i {
    background: var(--accent-amber, #f59e0b);
    box-shadow: 0 0 4px rgba(245, 158, 11, 0.3);
  }

  /* ── Task Subject ── */
  .task-subject.svelte-1xehf8i {
    font-size: var(--text-md);
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    transition: color 0.15s;
  }

  .task-row.svelte-1xehf8i:hover .task-subject:where(.svelte-1xehf8i) {
    color: var(--text-primary);
  }

  .task-row.svelte-1xehf8i:hover .task-item.completed:where(.svelte-1xehf8i) .task-subject:where(.svelte-1xehf8i) {
    color: var(--text-secondary);
  }

  /* ── Session Tag ── */
  .session-tag.svelte-1xehf8i {
    font-size: var(--text-xs);
    color: var(--text-muted);
    border: none;
    border-left: 1px solid var(--glass-border);
    background: none;
    padding: 0 0 0 6px;
    margin-left: 4px;
    white-space: nowrap;
    flex-shrink: 0;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: color 0.15s;
    font-family: inherit;
  }
  .session-tag.svelte-1xehf8i:hover {
    color: var(--text-primary);
  }

  /* ── Delete Button ── */
  .btn-delete.svelte-1xehf8i {
    opacity: 0;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 11px;
    padding: 4px 8px;
    cursor: pointer;
    border-radius: 4px;
    transition: opacity 0.15s, color 0.15s;
    flex-shrink: 0;
  }

  .task-row.svelte-1xehf8i:hover .btn-delete:where(.svelte-1xehf8i) {
    opacity: 0.4;
  }

  .btn-delete.svelte-1xehf8i:hover {
    opacity: 1 !important;
    color: var(--accent-red);
  }

  @keyframes svelte-1xehf8i-pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }

  /* ── Cron Row ── */
  .cron-row.svelte-1xehf8i .task-item:where(.svelte-1xehf8i) {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
  }

  .cron-meta.svelte-1xehf8i {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
  }

  .cron-interval.svelte-1xehf8i,
  .cron-fires.svelte-1xehf8i,
  .cron-countdown.svelte-1xehf8i {
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0.7;
  }

  .cron-interval.svelte-1xehf8i {
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    padding: 0 4px;
  }

  .cron-fires.svelte-1xehf8i {
    font-variant-numeric: tabular-nums;
  }

  .cron-countdown.svelte-1xehf8i {
    color: var(--accent-amber, #f59e0b);
    opacity: 0.8;
  }


  .tool-call-list.svelte-lg2g0w {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
  }

  .tool-call-list.svelte-lg2g0w::-webkit-scrollbar {
    width: 4px;
  }

  .tool-call-list.svelte-lg2g0w::-webkit-scrollbar-track {
    background: transparent;
  }

  .tool-call-list.svelte-lg2g0w::-webkit-scrollbar-thumb {
    background: var(--glass-border);
    border-radius: 10px;
  }

  /* ── Row chrome: deliberately identical to ChangesBody's .changes-file* ── */

  .tool-call.svelte-lg2g0w {
    border-bottom: 1px solid var(--glass-border);
  }
  .tool-call.svelte-lg2g0w:last-child {
    border-bottom: none;
  }
  .tool-call.open.svelte-lg2g0w {
    background: var(--white-4, rgba(255, 255, 255, 0.02));
  }

  .tool-call-head.svelte-lg2g0w {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: none;
    border: none;
    color: inherit;
    font-family: inherit;
    font-size: 11.5px;
    text-align: left;
    cursor: pointer;
  }

  .tool-call-head.svelte-lg2g0w:hover {
    background: var(--white-4, rgba(255, 255, 255, 0.04));
  }

  .changes-caret.svelte-lg2g0w {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform 0.15s;
  }

  .changes-caret.open.svelte-lg2g0w {
    transform: rotate(90deg);
  }

  .call-subject.svelte-lg2g0w {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    color: var(--text-primary);
    font-weight: 500;
  }

  .call-stats.svelte-lg2g0w {
    font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    color: var(--text-secondary);
    flex-shrink: 0;
  }

  .call-time.svelte-lg2g0w {
    color: var(--text-muted);
    font-size: 10.5px;
    flex-shrink: 0;
    min-width: 62px;
    text-align: right;
  }

  /* Same 32px gutter as .changes-file-body, so the two expansions line up. */
  .tool-call-body.svelte-lg2g0w {
    position: relative;
    padding: 2px 12px 12px 32px;
  }

  .call-body-actions.svelte-lg2g0w {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 4px;
  }

  .call-popout.svelte-lg2g0w {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
    padding: 0;
  }

  .call-popout.svelte-lg2g0w:hover {
    background: var(--white-8, rgba(255, 255, 255, 0.08));
    color: var(--text-primary);
  }

  .call-popout.svelte-lg2g0w svg {
    width: 13px;
    height: 13px;
  }

  .tool-call-empty.svelte-lg2g0w {
    margin: 0;
    padding: 24px 16px;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
  }


  .recap-block.svelte-1me3sgm {
    display: flex;
    gap: 0;
    margin: 8px 0;
    animation: svelte-1me3sgm-message-in 0.3s ease;
  }

  @keyframes svelte-1me3sgm-message-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .recap-accent.svelte-1me3sgm {
    width: 3px;
    border-radius: 3px;
    background: var(--accent-amber, #f97316);
    flex-shrink: 0;
    margin: 4px 8px 4px 0;
    opacity: 0.7;
  }

  .recap-body.svelte-1me3sgm {
    flex: 1;
    min-width: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 8px 12px;
  }

  .recap-header.svelte-1me3sgm {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
  }

  .recap-header.svelte-1me3sgm:hover .recap-title:where(.svelte-1me3sgm) {
    color: var(--text-primary);
  }

  .recap-icon.svelte-1me3sgm {
    color: var(--accent-amber, #f97316);
    flex-shrink: 0;
    opacity: 0.8;
  }

  .recap-title.svelte-1me3sgm {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.3px;
  }

  .recap-time.svelte-1me3sgm {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: 4px;
  }

  .chevron.svelte-1me3sgm {
    margin-left: auto;
    color: var(--text-muted);
    transition: transform 0.2s;
  }

  .chevron-up.svelte-1me3sgm {
    transform: rotate(180deg);
  }

  .recap-content.svelte-1me3sgm {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary);
  }

  .recap-content.svelte-1me3sgm p {
    margin: 0 0 6px;
  }

  .recap-content.svelte-1me3sgm p:last-child {
    margin-bottom: 0;
  }

  .recap-content.svelte-1me3sgm ul, .recap-content.svelte-1me3sgm ol {
    margin: 4px 0;
    padding-left: 20px;
  }

  .recap-content.svelte-1me3sgm li {
    margin: 2px 0;
  }

  .recap-content.svelte-1me3sgm code {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 12px;
    background: rgba(255, 255, 255, 0.06);
    padding: 1px 4px;
    border-radius: 3px;
  }

  .recap-footer.svelte-1me3sgm {
    display: flex;
    gap: 12px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
  }

  .recap-meta.svelte-1me3sgm {
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0.6;
  }

  .recap-collapsed-preview.svelte-1me3sgm {
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
  }

  .show-more-btn.svelte-1me3sgm {
    display: inline;
    font-size: 11px;
    color: var(--accent-primary);
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
    margin-left: 4px;
  }

  .show-more-btn.svelte-1me3sgm:hover {
    text-decoration: underline;
  }


  .orb.svelte-oznf76 {
    -webkit-app-region: no-drag;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .orb-shape.svelte-oznf76 {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    box-sizing: border-box;
    position: relative;
    transition: background 0.15s ease, box-shadow 0.15s ease;
  }

  /* idle — hollow muted ring */
  .state-idle.svelte-oznf76 .orb-shape:where(.svelte-oznf76) {
    background: transparent;
    border: 2px solid var(--glass-border-hover, rgba(255, 255, 255, 0.35));
  }
  /* thinking — cool blue pulsing dot */
  .state-thinking.svelte-oznf76 .orb-shape:where(.svelte-oznf76) {
    background: var(--accent-blue, #3b82f6);
    box-shadow: 0 0 8px var(--accent-blue, #3b82f6);
    animation: svelte-oznf76-orb-pulse 1.6s ease-in-out infinite;
  }
  /* working-tool — spinning arc */
  .state-working-tool.svelte-oznf76 .orb-shape:where(.svelte-oznf76) {
    background: conic-gradient(var(--accent-blue, #3b82f6) 0deg 110deg, transparent 110deg 360deg);
    -webkit-mask: radial-gradient(circle, transparent 40%, #000 42%);
    mask: radial-gradient(circle, transparent 40%, #000 42%);
    animation: svelte-oznf76-orb-spin 1s linear infinite;
  }
  /* needs-you — amber, exclamation (sticky until resolved) */
  .state-needs-you.svelte-oznf76 .orb-shape:where(.svelte-oznf76) {
    background: var(--status-warning, #f59e0b);
    box-shadow: 0 0 10px var(--status-warning, #f59e0b);
    animation: svelte-oznf76-orb-pulse 1s ease-in-out infinite;
  }
  .state-needs-you.svelte-oznf76 .orb-shape:where(.svelte-oznf76)::after {
    content: '!';
    position: absolute;
    inset: 0;
    color: #1a1205;
    font-size: 11px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
  }
  /* done — green check (flashes, then reverts to idle) */
  .state-done.svelte-oznf76 .orb-shape:where(.svelte-oznf76) {
    background: var(--status-success, #22c55e);
    box-shadow: 0 0 10px var(--status-success, #22c55e);
  }
  .state-done.svelte-oznf76 .orb-shape:where(.svelte-oznf76)::after {
    content: '✓';
    position: absolute;
    inset: 0;
    color: #04210f;
    font-size: 11px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
  }
  /* error — red X */
  .state-error.svelte-oznf76 .orb-shape:where(.svelte-oznf76) {
    background: var(--status-error, #ef4444);
    box-shadow: 0 0 10px var(--status-error, #ef4444);
  }
  .state-error.svelte-oznf76 .orb-shape:where(.svelte-oznf76)::after {
    content: '✕';
    position: absolute;
    inset: 0;
    color: #2a0606;
    font-size: 9px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
  }

  @keyframes svelte-oznf76-orb-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.78); opacity: 0.7; }
  }
  @keyframes svelte-oznf76-orb-spin {
    to { transform: rotate(360deg); }
  }


  .changes-body.svelte-thszlv {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
  }

  .changes-empty.svelte-thszlv {
    padding: 24px 16px;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
  }

  .changes-error.svelte-thszlv {
    color: var(--status-error, #f87171);
  }

  .changes-file.svelte-thszlv {
    border-bottom: 1px solid var(--glass-border);
  }
  .changes-file.svelte-thszlv:last-child {
    border-bottom: none;
  }

  .changes-file-head.svelte-thszlv {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: none;
    border: none;
    color: inherit;
    font-family: inherit;
    font-size: 11.5px;
    text-align: left;
    cursor: pointer;
  }

  .changes-file-head.svelte-thszlv:hover {
    background: var(--white-4, rgba(255, 255, 255, 0.04));
  }

  .changes-caret.svelte-thszlv {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform 0.15s;
  }

  .changes-caret.open.svelte-thszlv {
    transform: rotate(90deg);
  }

  .file-path.svelte-thszlv {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  }

  .file-dir.svelte-thszlv {
    color: var(--text-muted);
  }
  .file-base.svelte-thszlv {
    color: var(--text-primary);
    font-weight: 500;
  }

  .file-stats.svelte-thszlv {
    font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    color: var(--text-secondary);
    flex-shrink: 0;
  }

  .file-count.svelte-thszlv {
    color: var(--text-muted);
    font-size: 10.5px;
    flex-shrink: 0;
    min-width: 62px;
    text-align: right;
  }

  .changes-file-body.svelte-thszlv {
    padding: 2px 12px 12px 32px;
  }

  .changes-nodiff.svelte-thszlv {
    margin: 4px 0 10px;
    font-size: 10.5px;
    color: var(--text-muted);
    font-style: italic;
  }

  .changes-event.svelte-thszlv {
    margin-bottom: 10px;
  }
  .changes-event.svelte-thszlv:last-child {
    margin-bottom: 0;
  }

  .changes-event-head.svelte-thszlv {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
  }

  .changes-event-label.svelte-thszlv {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .changes-uncertain.svelte-thszlv {
    font-size: 9.5px;
    color: var(--accent-amber, #f97316);
    background: var(--accent-amber-bg, rgba(255, 200, 50, 0.08));
    padding: 1px 6px;
    border-radius: 4px;
    cursor: help;
  }


  .pin-toggle.svelte-5gr2n7 {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s;
    padding: 0;
    flex-shrink: 0;
  }

  .pin-toggle.svelte-5gr2n7 svg {
    width: 14px;
    height: 14px;
    fill: transparent;
    transition: fill 0.15s, color 0.15s;
  }

  .pin-toggle.svelte-5gr2n7:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
  }

  .pin-toggle.pinned.svelte-5gr2n7 {
    color: var(--accent-blue, #3b82f6);
  }

  .pin-toggle.pinned.svelte-5gr2n7 svg {
    fill: currentColor;
  }


  .popup-backdrop.svelte-15qx8ot {
    position: fixed;
    inset: 0;
    display: block;
    z-index: var(--z-stacked);
    pointer-events: none;
  }

  .popup-dialog.svelte-15qx8ot {
    position: absolute;
    background: var(--popup-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    backdrop-filter: var(--popup-blur);
    -webkit-backdrop-filter: var(--popup-blur);
    min-width: 400px;
    min-height: 300px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    pointer-events: auto;
    animation: svelte-15qx8ot-popup-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  }

  @keyframes svelte-15qx8ot-popup-in {
    from { opacity: 0; transform: scale(0.95) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
  }

  .popup-header.svelte-15qx8ot {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-8);
    border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
    cursor: grab;
  }

  .popup-icon.svelte-15qx8ot {
    color: var(--accent-primary);
    flex-shrink: 0;
  }

  .popup-title.svelte-15qx8ot {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    flex: 1;
  }

  .popup-meta.svelte-15qx8ot {
    font-size: var(--text-sm);
    color: var(--text-muted);
  }

  .popup-close.svelte-15qx8ot {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s;
    padding: 0;
    flex-shrink: 0;
    margin-left: auto;
  }

  .popup-close.svelte-15qx8ot svg {
    width: 14px;
    height: 14px;
  }

  .popup-close.svelte-15qx8ot:hover {
    background: var(--white-10);
    color: var(--text-primary);
  }

  .popup-body.svelte-15qx8ot {
    padding: var(--space-8);
    overflow-y: auto;
    flex: 1;
    background: transparent;
  }

  .popup-body.svelte-15qx8ot::-webkit-scrollbar {
    width: 4px;
  }

  .popup-body.svelte-15qx8ot::-webkit-scrollbar-track {
    background: transparent;
  }

  .popup-body.svelte-15qx8ot::-webkit-scrollbar-thumb {
    background: var(--white-10);
    border-radius: var(--radius-xl);
  }

  .paste-content.svelte-15qx8ot {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    font-family: "SF Mono", "Monaco", "Cascadia Code", monospace;
  }


  .tool-detail-view.svelte-hanal8 {
    display: contents;
  }

  /* Section chrome. The rest of this block is inherited from the extraction —
     see the file header for why it moved out of ToolPopupHost. */
  .detail-section.svelte-hanal8 {
    margin-bottom: 16px;
  }

  .detail-section.svelte-hanal8:last-child {
    margin-bottom: 0;
  }

  .section-label.svelte-hanal8 {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 8px;
  }

  .detail-pending.svelte-hanal8 {
    font-size: 12px;
    color: var(--text-muted);
  }

  /* ─── Injected-HTML styles (via {@html}, so must be :global) ─── */
  /* These classes had no CSS defined anywhere, so the browser fell back to
     UA <pre> defaults (white-space: pre → no wrap → horizontal overflow).
     Mirrors the .code-block pattern from Message.svelte, adapted for the
     popup's compact 800px width and dark glass surface. */

  .tool-detail-view .detail-pre {
    margin: 0;
    padding: 10px 12px;
    background: rgba(14, 14, 16, 0.55);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    font-family: "SF Mono", "Monaco", "Cascadia Code", "Fira Code", monospace;
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--text-secondary, rgba(255, 255, 255, 0.82));
    /* Wrap long lines instead of sideways-scrolling. */
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    overflow-x: auto;
    tab-size: 2;
  }

  .tool-detail-view .detail-pre.bash-cmd {
    color: var(--text-primary, #fff);
    white-space: pre-wrap;
  }

  .tool-detail-view .detail-pre.bash-cmd .prompt {
    color: var(--accent-green, #22c55e);
    user-select: none;
  }

  .tool-detail-view .detail-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 6px;
    font-family: "SF Mono", "Monaco", monospace;
  }

  .tool-detail-view .detail-subject {
    font-size: 12.5px;
    color: var(--text-primary, #fff);
    font-weight: 500;
    margin-bottom: 6px;
    word-break: break-word;
  }

  .tool-detail-view .file-path {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: "SF Mono", "Monaco", monospace;
    font-size: 11.5px;
    color: var(--accent-blue, #61afef);
    margin-bottom: 8px;
    word-break: break-all;
  }

  .tool-detail-view .badge-replace-all {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 7px;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--accent-orange, #d19a66);
    background: rgba(209, 154, 102, 0.12);
    border: 1px solid rgba(209, 154, 102, 0.3);
    border-radius: 4px;
  }

  /* Generic key/value table for unknown tools */
  .tool-detail-view .kv-table {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .tool-detail-view .kv-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
  }

  .tool-detail-view .kv-key {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
  }

  .tool-detail-view .kv-value {
    font-family: "SF Mono", "Monaco", monospace;
    font-size: 11.5px;
    color: var(--text-secondary, rgba(255, 255, 255, 0.82));
    word-break: break-word;
  }

  .tool-detail-view .nested-json {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
  }

  /* Diff view (Edit tool).
   *
   * These are `:global` because `createUnifiedDiff` injects this markup as raw
   * HTML — the compiler never sees these class names. They are NOT scoped to
   * `.tool-popup-host` so the Changes panel renders identically. */
  .diff-view {
    margin: 6px 0 0;
    background: var(--diff-surface-bg);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    overflow: hidden;
    font-family: "SF Mono", "Monaco", monospace;
    font-size: 11.5px;
    line-height: 1.6;
  }

  .diff-line {
    display: flex;
    align-items: baseline;
    padding: 0 8px;
    white-space: pre-wrap;
    word-break: break-word;
  }

  .diff-line .diff-ln {
    color: var(--text-muted);
    user-select: none;
    margin-right: 6px;
    flex-shrink: 0;
    opacity: 0.7;
  }

  .diff-line .diff-marker {
    width: 14px;
    flex-shrink: 0;
    user-select: none;
    text-align: center;
  }

  .diff-line.diff-add {
    background: var(--diff-added-bg);
    color: var(--diff-added-text);
  }

  .diff-line.diff-remove {
    background: var(--diff-removed-bg);
    color: var(--diff-removed-text);
  }

  .diff-line.diff-context {
    background: var(--diff-context-bg);
  }

  /* Side-by-side diff (Changes panel).
   *
   * A grid, not two floating columns: each row is a grid row, so the two sides
   * stay aligned even when one is longer than the other — which is the case the
   * view exists to show. `.split-row` also needs a hairline between rows; the
   * unified view gets that for free from line-height, a grid row does not. */
  .split-diff {
    display: grid;
    font-family: "SF Mono", "Monaco", monospace;
    font-size: 11.5px;
    line-height: 1.6;
  }

  .split-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid transparent;
  }

  .split-row + .split-row {
    border-top-color: var(--diff-row-rule, rgba(255, 255, 255, 0.05));
  }

  .split-head {
    border-top: 0;
    border-bottom: 1px solid var(--glass-border);
  }

  .split-head .split-cell {
    font-family: inherit;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    opacity: 0.75;
  }

  .split-cell {
    display: flex;
    align-items: baseline;
    padding: 0 8px;
    min-width: 0;
    white-space: pre-wrap;
    word-break: break-word;
  }

  /* The gutter between the two panes. Sits on the right of the left cell so
   * the two panes read as one surface rather than two cards. */
  .split-cell .diff-ln {
    color: var(--text-muted);
    user-select: none;
    opacity: 0.7;
    flex-shrink: 0;
    min-width: 3.2em;
    text-align: right;
    margin-right: 8px;
  }

  .split-text {
    flex: 1;
    min-width: 0;
  }

  .split-old {
    border-right: 1px solid var(--glass-border);
  }

  .split-tone-change.split-old {
    background: var(--diff-removed-bg);
    color: var(--diff-removed-text);
  }

  .split-tone-change.split-new {
    background: var(--diff-added-bg);
    color: var(--diff-added-text);
  }

  .split-tone-plain {
    background: var(--diff-context-bg);
  }

  /* Filler cells. Deliberately unstyled rather than transparent: an explicit
   * background is what stops the neighbouring column's tint from reading as if
   * it bled across the divider. */
  .split-tone-gap {
    background: var(--diff-surface-bg);
  }

  /* Output section */
  .tool-detail-view .result-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 8px;
  }

  .tool-detail-view .result-content {
    margin: 0;
    padding: 10px 12px;
    background: rgba(14, 14, 16, 0.55);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    font-family: "SF Mono", "Monaco", "Cascadia Code", "Fira Code", monospace;
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--text-secondary, rgba(255, 255, 255, 0.82));
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    overflow-x: auto;
    tab-size: 2;
  }

  .tool-detail-view .result-content.result-error {
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.06);
    color: #fca5a5;
  }

  .tool-detail-view .result-markdown {
    padding: 10px 12px;
    background: rgba(14, 14, 16, 0.55);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-secondary, rgba(255, 255, 255, 0.82));
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .tool-detail-view .result-markdown.result-error {
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.06);
    color: #fca5a5;
  }

  /* Syntax-highlight spans inherit color from the parent */
  .tool-detail-view .result-content .syntax-keyword,
  .tool-detail-view .detail-pre .syntax-keyword { color: #c678dd; }
  .tool-detail-view .result-content .syntax-string,
  .tool-detail-view .detail-pre .syntax-string { color: #98c379; }
  .tool-detail-view .result-content .syntax-number,
  .tool-detail-view .detail-pre .syntax-number { color: #d19a66; }
  .tool-detail-view .result-content .syntax-comment,
  .tool-detail-view .detail-pre .syntax-comment { color: #5c6370; font-style: italic; }


  .pill-bar.svelte-b7aa2u {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: 0 var(--space-2);
    margin-left: 0;
    margin-right: 0px;
  }

  /* Phone: `.pill-bar` is a flex item of the horizontally-scrolling
   * `.pill-row` (see ActionBar.svelte). Without `flex: 0 0 auto` the row
   * would shrink the bar to the viewport and the pills inside it would
   * squash instead of scrolling. The model name is the only pill that can
   * get long, so it is the only one that gets an ellipsis. */
  @media (max-width: 480px) {
    .pill-bar.svelte-b7aa2u {
      flex: 0 0 auto;
    }
    .model-pill-text.svelte-b7aa2u .pill-value:where(.svelte-b7aa2u) {
      display: block;
      max-width: 34vw;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .pill-dropdown.svelte-b7aa2u {
    position: relative;
  }

  .pill-text.svelte-b7aa2u {
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.45);
    font-size: var(--text-base);
    font-family: inherit;
    cursor: pointer;
    padding: 3px 8px;
    transition: all 0.15s;
    white-space: nowrap;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    line-height: 1;
  }
  .pill-title.svelte-b7aa2u {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.4);
    line-height: 1;
  }
  .pill-value.svelte-b7aa2u {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-base);
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.15;
  }
  .pill-text.svelte-b7aa2u:hover .pill-value:where(.svelte-b7aa2u) {
    color: rgba(255, 255, 255, 0.85);
  }
  /* Persona pill is inert under Assist behavior (backend drops the persona).
     Dim only — no pointer-events:none, so the title tooltip still shows. */
  .pill-text.disabled.svelte-b7aa2u {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .model-pill-text.svelte-b7aa2u {
    align-items: center;
  }
  /* Auto-failover indicator (transient, ~6s): the active key rotated after a rate
     limit. Brief amber accent on the pill text — not a permanent bar element. */
  .model-pill-text.rotated.svelte-b7aa2u {
    color: #fbbf24;
    text-shadow: 0 0 6px rgba(245, 158, 11, 0.45);
  }

  .pill-text.svelte-b7aa2u:hover {
    color: rgba(255, 255, 255, 0.9);
  }

  .pill-dropdown.open.svelte-b7aa2u .pill-text:where(.svelte-b7aa2u) {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.75);
  }

  .pill-divider.svelte-b7aa2u {
    color: var(--text-muted);
    opacity: 0.3;
    font-size: 10px;
    user-select: none;
  }

  .quota-chip.svelte-b7aa2u {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    background: rgba(127, 127, 127, 0.14);
    color: var(--text-muted);
    border: 1px solid rgba(127, 127, 127, 0.2);
    cursor: help;
  }
  .quota-chip.exhausted.svelte-b7aa2u {
    background: rgba(239, 68, 68, 0.16);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.4);
  }
  .health-chip.svelte-b7aa2u {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid transparent;
  }
  .health-chip.warn.svelte-b7aa2u {
    background: var(--status-warning-bg, rgba(245, 158, 11, 0.15));
    color: var(--status-warning, #f59e0b);
    border-color: rgba(245, 158, 11, 0.4);
  }
  .health-chip.error.svelte-b7aa2u {
    background: var(--status-error-bg, rgba(239, 68, 68, 0.16));
    color: var(--status-error, #f87171);
    border-color: rgba(239, 68, 68, 0.4);
  }

  /* Per-model API-key affordance + cascading key list (replaces the bar key chip). */
  .model-row.svelte-b7aa2u {
    display: block;
  }
  .key-affordance.svelte-b7aa2u {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: 6px;
    padding: 0 4px;
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.4;
    cursor: pointer;
    user-select: none;
    opacity: 0.5;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
  }
  .model-item.svelte-b7aa2u:hover .key-affordance:where(.svelte-b7aa2u) {
    opacity: 0.85;
  }
  .key-affordance.svelte-b7aa2u:hover,
  .key-affordance.expanded.svelte-b7aa2u {
    opacity: 1;
    color: var(--accent-yellow, #f59e0b);
    background: rgba(245, 158, 11, 0.1);
  }
  .key-sublist.svelte-b7aa2u {
    margin: 2px 0 4px 14px;
    padding-left: 8px;
    border-left: 1px solid var(--glass-border);
  }
  .key-item.svelte-b7aa2u {
    font-size: 11px;
    padding: 3px 8px;
    color: var(--text-muted);
  }
  .key-item.svelte-b7aa2u:hover {
    color: var(--text-primary);
  }
  .key-item.active.svelte-b7aa2u {
    color: var(--text-primary);
  }
  .key-active.svelte-b7aa2u {
    margin-left: auto;
    color: var(--accent-yellow, #f59e0b);
    font-size: 11px;
  }

  .pill-menu.svelte-b7aa2u {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    min-width: 180px;
    max-height: 400px;
    overflow-y: auto;
    background: var(--dropdown-bg);
    border-radius: 14px;
    padding: 4px;
    box-shadow: var(--glass-shadow);
    z-index: var(--z-toast);
    -webkit-backdrop-filter: var(--dropdown-blur);
    backdrop-filter: var(--dropdown-blur);
    animation: fade-in 0.1s ease-out;
  }

  .provider-menu.svelte-b7aa2u {
    min-width: 240px;
    max-height: 500px;
  }

  .provider-search.svelte-b7aa2u {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    padding: 4px 6px;
    margin-bottom: 2px;
    background: var(--dropdown-bg);
    border-bottom: 1px solid var(--glass-border);
    border-radius: 14px 14px 0 0;
  }

  .provider-search-input.svelte-b7aa2u {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 12px;
    font-family: inherit;
    padding: 5px 8px;
    outline: none;
    transition: border-color 0.15s;
  }

  .provider-search-input.svelte-b7aa2u::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
  }

  .provider-search-input.svelte-b7aa2u:focus {
    border-color: rgba(210, 180, 140, 0.4);
  }

  .provider-search-clear.svelte-b7aa2u {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 11px;
    padding: 2px 4px;
    margin-left: 4px;
    border-radius: 4px;
    line-height: 1;
    transition: color 0.15s;
  }

  .provider-search-clear.svelte-b7aa2u:hover {
    color: var(--text-primary);
  }

  .effort-menu.svelte-b7aa2u {
    min-width: 120px;
  }

  .behavior-menu.svelte-b7aa2u {
    min-width: 210px;
  }

  .profile-menu.svelte-b7aa2u {
    min-width: 200px;
  }

  .menu-divider.svelte-b7aa2u {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 4px 8px;
  }

  .menu-item-off.svelte-b7aa2u {
    color: var(--text-tertiary, #888);
  }

  .menu-item-off[disabled].svelte-b7aa2u {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .menu-empty.svelte-b7aa2u {
    padding: 12px 8px;
    text-align: center;
    color: var(--text-muted);
    font-size: 11px;
  }

  .menu-item.svelte-b7aa2u {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 6px 8px;
    border: none;
    background: none;
    color: var(--text-secondary);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    border-radius: 14px;
    transition: all 0.1s;
    text-align: left;
  }

  .menu-item.svelte-b7aa2u:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
  }

  .menu-item.active.svelte-b7aa2u {
    background: rgba(210, 180, 140, 0.12);
    color: var(--text-primary);
  }

  .provider-header.svelte-b7aa2u {
    font-weight: 500;
  }

  .expand-icon.svelte-b7aa2u {
    font-size: 10px;
    color: var(--text-muted);
    transition: transform 0.15s;
    margin-left: auto;
  }

  .expand-icon.expanded.svelte-b7aa2u {
    transform: rotate(90deg);
  }

  .model-sublist.svelte-b7aa2u {
    padding-left: 12px;
    border-left: 1px solid var(--glass-border);
    margin-left: 8px;
    margin-bottom: 2px;
  }

  .model-item.svelte-b7aa2u {
    font-size: 11px;
    padding: 4px 8px;
    color: var(--text-muted);
  }

  .model-item.svelte-b7aa2u:hover {
    color: var(--text-primary);
  }

  .model-item.active.svelte-b7aa2u {
    color: var(--text-primary);
  }

  /* Trailing affordances (live tag, key, favorite) are fixed-size; let the model
     label shrink+truncate so they're always visible — never pushed off the row by
     a long model name. */
  .model-item.svelte-b7aa2u .menu-label:where(.svelte-b7aa2u) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .model-dot.svelte-b7aa2u {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .model-refresh.svelte-b7aa2u {
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 4px;
    border-radius: 4px;
    line-height: 1;
  }

  .model-refresh.svelte-b7aa2u:hover {
    color: var(--text-primary);
  }

  .model-status.svelte-b7aa2u {
    font-size: 10px;
    color: var(--text-muted);
    font-style: italic;
    padding: 2px 8px;
    opacity: 0.8;
  }

  .model-status-error.svelte-b7aa2u {
    color: var(--accent-yellow, #f59e0b);
    font-style: normal;
  }

  .model-status-hint.svelte-b7aa2u {
    color: var(--text-muted, #888);
    font-style: italic;
    cursor: default;
  }

  .model-tag.svelte-b7aa2u {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    font-size: 9px;
    color: var(--text-muted);
    border: 1px solid var(--glass-border);
    border-radius: 3px;
    padding: 0 3px;
    margin-left: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }

  .favorite-star.svelte-b7aa2u {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: auto;
    padding: 0;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    opacity: 0.35;
    border-radius: 4px;
    transition: opacity 0.15s, color 0.15s, transform 0.1s;
    user-select: none;
    flex-shrink: 0;
  }

  .model-item.svelte-b7aa2u:hover .favorite-star:where(.svelte-b7aa2u) {
    opacity: 0.7;
  }

  .favorite-star.svelte-b7aa2u:hover {
    opacity: 1 !important;
    color: var(--accent-yellow, #f59e0b);
    transform: scale(1.15);
  }

  .favorite-star.starred.svelte-b7aa2u {
    opacity: 1;
    color: var(--accent-yellow, #f59e0b);
    text-shadow: 0 0 6px rgba(245, 158, 11, 0.4);
  }

  .menu-label.svelte-b7aa2u {
    flex: 1;
  }

  .menu-icon.svelte-b7aa2u {
    flex-shrink: 0;
  }

  /* Two-line layout: icon + a column of label + subtitle (Behavior tier menu). */
  .menu-text.svelte-b7aa2u {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
  }

  .menu-text.svelte-b7aa2u .menu-label:where(.svelte-b7aa2u) {
    flex: 0 0 auto;
  }

  .menu-subtitle.svelte-b7aa2u {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 400;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .menu-desc.svelte-b7aa2u {
    font-size: 10px;
    color: var(--text-muted);
    margin-left: auto;
    text-align: right;
    white-space: nowrap;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .edit-icon.svelte-b7aa2u {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.15s, color 0.15s;
    flex-shrink: 0;
    margin-left: auto;
  }

  .menu-item.svelte-b7aa2u:hover .edit-icon:where(.svelte-b7aa2u) {
    opacity: 0.4;
  }

  .edit-icon.svelte-b7aa2u:hover {
    opacity: 1 !important;
    color: var(--text-primary);
  }


  .account-panel.svelte-1jj9gab {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 4px 0 10px;
  }

  .section.svelte-1jj9gab {
    margin-bottom: 6px;
  }

  .section-header.svelte-1jj9gab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 14px 4px;
  }

  .section-title.svelte-1jj9gab {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
  }

  .section-divider.svelte-1jj9gab {
    height: 1px;
    background: var(--glass-border);
    margin: 6px 14px;
  }

  .save-link.svelte-1jj9gab {
    font-size: 11px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.15s;
    font-family: inherit;
  }

  .save-link.svelte-1jj9gab:hover {
    color: var(--text-primary);
  }

  .delete-link.svelte-1jj9gab {
    color: rgba(255, 100, 100, 0.6);
  }

  .delete-link.svelte-1jj9gab:hover {
    color: rgba(255, 100, 100, 0.9);
  }

  .header-actions.svelte-1jj9gab {
    display: flex;
    gap: 10px;
  }

  /* Usage */
  .usage-grid.svelte-1jj9gab {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 0 14px;
  }

  .usage-card.svelte-1jj9gab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 7px 6px;
  }

  .usage-value.svelte-1jj9gab {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
  }

  .usage-label.svelte-1jj9gab {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  /* Contact */
  .contact-fields.svelte-1jj9gab {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 14px;
  }

  .contact-row.svelte-1jj9gab {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .contact-row.svelte-1jj9gab svg:where(.svelte-1jj9gab) {
    opacity: 0.55;
    flex-shrink: 0;
    transition: opacity 0.15s;
  }

  .contact-row.svelte-1jj9gab:focus-within svg:where(.svelte-1jj9gab) {
    opacity: 1;
  }

  /* Bare text field — no chip background or border; the icon carries the
     row identity and brightens on focus. */
  .contact-row.svelte-1jj9gab input:where(.svelte-1jj9gab) {
    flex: 1;
    background: transparent;
    border: none;
    padding: 7px 2px;
    color: var(--text-primary);
    font-size: 12px;
    font-family: inherit;
    outline: none;
  }

  .contact-row.svelte-1jj9gab input:where(.svelte-1jj9gab):focus {
    color: var(--text-primary);
  }

  .contact-row.svelte-1jj9gab input:where(.svelte-1jj9gab)::placeholder {
    color: var(--text-muted);
  }

  .contact-display.svelte-1jj9gab {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 14px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s;
  }

  .contact-display.svelte-1jj9gab:hover {
    opacity: 0.9;
  }

  .contact-display-row.svelte-1jj9gab {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 12px;
  }

  .contact-display-row.svelte-1jj9gab svg:where(.svelte-1jj9gab) {
    opacity: 0.4;
    flex-shrink: 0;
  }

  .custom-label.svelte-1jj9gab {
    color: var(--text-muted);
  }

  .contact-placeholder.svelte-1jj9gab {
    padding: 6px 14px;
    cursor: pointer;
    opacity: 0.45;
    transition: opacity 0.15s;
  }

  .contact-placeholder.svelte-1jj9gab:hover {
    opacity: 0.7;
  }

  .contact-placeholder.svelte-1jj9gab .placeholder-text:where(.svelte-1jj9gab) {
    color: var(--text-muted);
    font-size: 12px;
    font-style: italic;
  }

  /* Custom fields */
  .custom-fields.svelte-1jj9gab {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 14px;
  }

  .custom-field-row.svelte-1jj9gab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
  }

  .custom-field-label.svelte-1jj9gab {
    font-size: 11px;
    color: var(--text-muted);
    min-width: 60px;
  }

  .custom-field-value.svelte-1jj9gab {
    font-size: 12px;
    color: var(--text-secondary);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .custom-field-edit.svelte-1jj9gab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
  }

  .field-label-input.svelte-1jj9gab {
    width: 90px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 6px 8px;
    color: var(--text-primary);
    font-size: 12px;
    font-family: inherit;
    outline: none;
  }

  .field-value-input.svelte-1jj9gab {
    flex: 1;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 6px 8px;
    color: var(--text-primary);
    font-size: 12px;
    font-family: inherit;
    outline: none;
  }

  .field-label-input.svelte-1jj9gab::placeholder,
  .field-value-input.svelte-1jj9gab::placeholder {
    color: var(--text-muted);
  }

  .field-actions.svelte-1jj9gab {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
  }

  .add-link-btn.svelte-1jj9gab {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 14px 0;
    padding: 4px 0;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 11px;
    font-family: inherit;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.15s;
  }

  .add-link-btn.svelte-1jj9gab:hover {
    opacity: 0.8;
    color: var(--text-secondary);
  }

  /* Plan */
  .plan-btn.svelte-1jj9gab {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 14px;
    padding: 6px 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: not-allowed;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    opacity: 0.5;
  }

  .coming-soon.svelte-1jj9gab {
    margin-left: auto;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
  }

  /* Onboarding replay */
  .onboarding-btn.svelte-1jj9gab {
    display: flex;
    align-items: center;
    gap: 8px;
    width: calc(100% - 28px);
    margin: 0 14px;
    padding: 4px 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.15s;
  }

  .onboarding-btn.svelte-1jj9gab svg:where(.svelte-1jj9gab) {
    opacity: 0.7;
    flex-shrink: 0;
  }

  .onboarding-btn.svelte-1jj9gab:hover {
    opacity: 0.85;
    color: var(--text-secondary);
  }


  .live-ticker.svelte-9zk07x {
    /* Same width model as .thinking-group: under the answer content (100px),
       capped at 720px, min-width:0 so it shrinks cleanly on narrow widths. */
    margin: 4px 0 8px 100px;
    max-width: 720px;
    min-width: 0;
    align-self: flex-start;
    min-height: 30px;          /* reserve height so the answer slot never collapses to 0 */
  }
  .ticker-line.svelte-9zk07x {
    /* Flows in normal order (not absolute): a thought can wrap to several lines,
       so the line must be able to grow. The {#key} swap uses an in-transition
       only (no out), so the old line is removed before the new one mounts — no
       overlap, no doubled height during the swap. */
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 10px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
  }
  .ticker-dot.svelte-9zk07x {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-primary);
    flex-shrink: 0;
    animation: svelte-9zk07x-ticker-pulse 1.2s ease-in-out infinite;
  }
  .ticker-text.svelte-9zk07x {
    /* Don't grow to fill the row — the elapsed label should sit immediately
       After the text (gap: 8px), not be pushed all the way to the right
       Edge by `flex: 1 1 0`. Long text (a long narration beat) truncates
       With an ellipsis rather than expanding the ticker. */
    flex: 0 1 auto;
    min-width: 0;
    max-width: 600px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-style: italic;
  }
  /* A tool is an action, not reasoning — render plain (non-italic), slightly stronger. */
  .ticker-line.tool.svelte-9zk07x .ticker-text:where(.svelte-9zk07x) {
    font-style: normal;
    color: var(--text-primary);
  }
  .ticker-elapsed.svelte-9zk07x {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--text-muted);
    font-family: 'SF Mono', 'Fira Code', monospace;
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
  }
  @keyframes svelte-9zk07x-ticker-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.7); }
  }
  /* Abort marker — red, static dot + red non-italic text. Mirrors the
     .tool-interrupted-label tone and ReasoningGroup's .rg-abort-row so a
     stopped turn reads consistently everywhere (Bug #5). */
  .ticker-line.aborted.svelte-9zk07x .ticker-dot:where(.svelte-9zk07x) {
    background: var(--accent-red);
    animation: none;
  }
  .ticker-line.aborted.svelte-9zk07x .ticker-text:where(.svelte-9zk07x) {
    font-style: normal;
    color: var(--accent-red);
  }
  /* API retry error — same red treatment as aborted, plus a slower pulse so
     the user sees the ticker is still alive (still retrying) while the
     red text communicates the failure. Cleared as soon as the retry budget
     is exhausted (the App.svelte error handler emits a persistent role:'error'
     message) or the next turn starts. */
  .ticker-line.error.svelte-9zk07x .ticker-dot:where(.svelte-9zk07x) {
    background: var(--accent-red);
  }
  .ticker-line.error.svelte-9zk07x .ticker-text:where(.svelte-9zk07x) {
    font-style: normal;
    color: var(--accent-red);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }


  .git-info-bar.svelte-gaef48 {
    position: relative;  /* anchor for the popover's position:absolute */
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 4px 0;
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.2;
    color: var(--text-muted);
    overflow: visible;  /* allow popover to escape the bar's bounds */
    white-space: nowrap;
    user-select: none;
    flex-wrap: nowrap;
  }

  .g-item.svelte-gaef48 {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Button reset for the clickable branch — looks identical to the previous
     span when not hovered. */
  button.g-branch.svelte-gaef48 {
    background: none;
    border: none;
    padding: 2px 4px;
    margin: -2px -4px;
    font: inherit;
    color: inherit;
    cursor: pointer;
    border-radius: 6px;
    max-width: 50%;
    transition: background-color 0.15s ease;
  }

  button.g-branch.svelte-gaef48:hover {
    background: var(--accent-primary-glow, rgba(255, 255, 255, 0.08));
  }

  .g-branch-name.svelte-gaef48 {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .g-chevron.svelte-gaef48 {
    flex-shrink: 0;
    margin-left: 2px;
    opacity: 0.6;
    transition: transform 0.15s ease;
  }

  .g-chevron.rotated.svelte-gaef48 {
    transform: rotate(180deg);
  }

  .g-sep.svelte-gaef48 {
    opacity: 0.4;
    flex-shrink: 0;
  }

  .g-changes.dirty.svelte-gaef48 {
    color: var(--status-warning, var(--accent-amber, #f59e0b));
    font-weight: 500;
  }

  .g-commits.svelte-gaef48,
  .g-changes.svelte-gaef48 {
    flex-shrink: 0;
  }

  /* ── Branch popover ─────────────────────────────────────────────── */
  .git-branch-popover.svelte-gaef48 {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 6px;
    min-width: 240px;
    max-width: 320px;
    max-height: 360px;
    overflow-y: auto;
    background: var(--glass-subtle-bg, rgba(20, 20, 20, 0.92));
    -webkit-backdrop-filter: var(--glass-subtle-blur, blur(12px));
    backdrop-filter: var(--glass-subtle-blur, blur(12px));
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
    border-radius: 12px;
    padding: 6px;
    z-index: 100;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .g-section-label.svelte-gaef48 {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    opacity: 0.7;
    padding: 6px 8px 4px;
  }

  .g-section-divider.svelte-gaef48 {
    height: 1px;
    background: var(--border-subtle, rgba(255, 255, 255, 0.08));
    margin: 6px 4px;
  }

  /* Worktree section */
  .g-section-toggle.svelte-gaef48 {
    display: flex;
    align-items: baseline;
    gap: 6px;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    font: inherit;
  }

  .g-section-toggle.svelte-gaef48:hover .g-section-hint:where(.svelte-gaef48) {
    color: var(--text-primary, inherit);
  }

  .g-section-hint.svelte-gaef48 {
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0.6;
    padding: 6px 8px 4px;
  }

  .g-wt-form.svelte-gaef48 {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 6px 8px 8px;
  }

  .g-wt-input.svelte-gaef48 {
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    font-size: 11px;
    padding: 4px 6px;
    border-radius: 4px;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.12));
    background: var(--bg-input, rgba(0, 0, 0, 0.2));
    color: inherit;
  }

  .g-wt-check.svelte-gaef48 {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    color: var(--text-muted);
  }

  .g-wt-create.svelte-gaef48 {
    font: inherit;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.12));
    background: var(--bg-hover, rgba(255, 255, 255, 0.06));
    color: inherit;
    cursor: pointer;
  }

  .g-wt-create.svelte-gaef48:disabled {
    opacity: 0.4;
    cursor: default;
  }

  .g-wt-note.svelte-gaef48 {
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0.6;
    line-height: 1.35;
  }

  .g-branch-item.svelte-gaef48 {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 6px 8px;
    border-radius: 6px;
    color: inherit;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.1s ease;
  }

  .g-branch-item.svelte-gaef48:hover:not(:disabled):not(.current) {
    background: var(--accent-primary-glow, rgba(255, 255, 255, 0.08));
  }

  .g-branch-item.svelte-gaef48:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .g-branch-item.current.svelte-gaef48 {
    background: var(--accent-primary-glow, rgba(255, 255, 255, 0.06));
    color: var(--text-primary, #fff);
    cursor: default;
  }

  .g-branch-remote.svelte-gaef48 .g-branch-item-name:where(.svelte-gaef48) {
    opacity: 0.85;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 11px;
  }

  .g-branch-item-name.svelte-gaef48 {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .g-current-badge.svelte-gaef48 {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent-primary, #fff);
    background: var(--accent-primary-glow, rgba(255, 255, 255, 0.1));
    padding: 2px 6px;
    border-radius: 4px;
    flex-shrink: 0;
  }

  .g-spinner.svelte-gaef48 {
    flex-shrink: 0;
    opacity: 0.6;
    animation: svelte-gaef48-g-pulse 1s ease-in-out infinite;
  }

  @keyframes svelte-gaef48-g-pulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
  }

  .g-loading.svelte-gaef48,
  .g-empty.svelte-gaef48,
  .g-error.svelte-gaef48 {
    padding: 12px 8px;
    font-size: 11px;
    text-align: center;
    color: var(--text-muted);
    opacity: 0.7;
  }

  .g-error.svelte-gaef48 {
    color: var(--status-warning, var(--accent-amber, #f59e0b));
    opacity: 1;
  }

  .g-checkout-error.svelte-gaef48 {
    margin-top: 6px;
    padding: 8px 10px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .g-error-text.svelte-gaef48 {
    font-size: 11px;
    color: var(--status-warning, var(--accent-amber, #f59e0b));
    line-height: 1.4;
    word-break: break-word;
  }

  .g-steering-note.svelte-gaef48 {
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0.8;
    font-style: italic;
  }


  .commands-tab.svelte-1596ngw {
    padding: 24px 25%;
    color: var(--text-primary, rgba(255, 255, 255, 0.9));
  }
  .cmd-content.svelte-1596ngw {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 720px;
    margin: 0 auto;
  }

  .card.svelte-1596ngw {
    background: transparent;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    border-radius: 10px;
    padding: 16px 18px;
  }
  .card-head.svelte-1596ngw {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
  }
  .card.svelte-1596ngw h3:where(.svelte-1596ngw) {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
  }
  .hint.svelte-1596ngw {
    margin: 0 0 14px;
    font-size: 12px;
    color: var(--text-muted, rgba(255, 255, 255, 0.45));
    line-height: 1.5;
  }
  code.svelte-1596ngw {
    background: rgba(255, 255, 255, 0.08);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 11px;
  }
  .platform-tag.svelte-1596ngw, .saved-tag.svelte-1596ngw {
    margin-left: 6px;
    font-size: 10px;
    padding: 1px 7px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
  }
  .saved-tag.svelte-1596ngw { color: #4ade80; }

  .shell-row.svelte-1596ngw {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
  }
  .shell-row.svelte-1596ngw label:where(.svelte-1596ngw) {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    min-width: 180px;
  }
  .timeout-label.svelte-1596ngw { max-width: 160px; }
  .field-label.svelte-1596ngw {
    font-size: 11px;
    color: var(--text-muted, rgba(255, 255, 255, 0.5));
  }
  select.svelte-1596ngw, input[type='number'].svelte-1596ngw, input.search.svelte-1596ngw {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
    color: var(--text-primary, rgba(255, 255, 255, 0.9));
    border-radius: 6px;
    padding: 7px 9px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
  }
  select.svelte-1596ngw:focus, input.svelte-1596ngw:focus {
    border-color: var(--accent, #6366f1);
  }

  .search.svelte-1596ngw {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 14px;
  }

  .group-title.svelte-1596ngw {
    margin: 16px 0 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted, rgba(255, 255, 255, 0.4));
  }
  .group-sub.svelte-1596ngw {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    margin-left: 4px;
  }

  .cmd-row.svelte-1596ngw {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.06));
  }
  .cmd-main.svelte-1596ngw { flex: 1; min-width: 0; }
  .cmd-line.svelte-1596ngw {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .cmd-name.svelte-1596ngw {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, rgba(255, 255, 255, 0.95));
  }
  .badge.svelte-1596ngw {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 7px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
  }
  .badge-prompt.svelte-1596ngw { background: rgba(99, 102, 241, 0.18); color: #a5b4fc; }
  .badge-script.svelte-1596ngw { background: rgba(34, 197, 94, 0.18); color: #86efac; }
  .badge-builtin.svelte-1596ngw { background: rgba(255, 255, 255, 0.06); }
  .cmd-desc.svelte-1596ngw {
    font-size: 12px;
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
    margin-top: 3px;
  }
  .cmd-body.svelte-1596ngw {
    margin: 6px 0 0;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    font-size: 11px;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    white-space: pre-wrap;
    overflow-x: auto;
  }

  .cmd-actions.svelte-1596ngw {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
  }
  .primary-btn.svelte-1596ngw {
    background: var(--accent, #6366f1);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
  }
  .primary-btn.svelte-1596ngw:hover { filter: brightness(1.1); }
  .ghost-btn.svelte-1596ngw {
    background: transparent;
    color: var(--text-muted, rgba(255, 255, 255, 0.55));
    border: none;
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 11px;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.15s;
  }
  .ghost-btn.svelte-1596ngw:hover:not(:disabled) { color: var(--text-primary, rgba(255, 255, 255, 0.95)); }
  .ghost-btn.svelte-1596ngw:disabled { opacity: 0.5; cursor: default; }
  .ghost-btn.danger.svelte-1596ngw:hover:not(:disabled) { color: #fca5a5; }

  .run-result.svelte-1596ngw {
    margin-top: 16px;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.3);
    overflow: hidden;
  }
  .run-result.error.svelte-1596ngw { border-color: rgba(232, 17, 35, 0.4); }
  .run-head.svelte-1596ngw {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    font-family: ui-monospace, monospace;
    font-size: 12px;
    border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.06));
  }
  .run-result.svelte-1596ngw pre:where(.svelte-1596ngw) {
    margin: 0;
    padding: 10px;
    font-size: 11px;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 320px;
    overflow-y: auto;
    color: var(--text-secondary, rgba(255, 255, 255, 0.8));
  }

  .muted.svelte-1596ngw { color: var(--text-muted, rgba(255, 255, 255, 0.4)); font-size: 13px; }
  .error.svelte-1596ngw { color: #fca5a5; font-size: 13px; }


  .peek.svelte-wesdn {
    width: 280px;
    max-height: 196px;
    overflow: hidden;
    background: var(--popup-bg, rgba(20, 18, 16, 0.82));
    backdrop-filter: var(--popup-blur, blur(48px));
    -webkit-backdrop-filter: var(--popup-blur, blur(48px));
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12));
    border-radius: 14px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
    color: var(--text-primary, #f5f5f0);
    padding: 10px 12px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 8px;
    animation: svelte-wesdn-peek-fade-in 0.13s ease-out both;
  }
  @keyframes svelte-wesdn-peek-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .peek-head.svelte-wesdn {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .dot.svelte-wesdn {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--glass-border-hover, rgba(255, 255, 255, 0.35));
  }
  .dot.state-thinking.svelte-wesdn, .dot.state-working-tool.svelte-wesdn { background: var(--accent-blue, #3b82f6); }
  .dot.state-needs-you.svelte-wesdn { background: var(--status-warning, #f59e0b); }
  .dot.state-done.svelte-wesdn { background: var(--status-success, #22c55e); }
  .dot.state-error.svelte-wesdn { background: var(--status-error, #ef4444); }
  .peek-title.svelte-wesdn {
    font-size: 12px;
    font-weight: 600;
    opacity: 0.95;
  }
  .peek-action.svelte-wesdn {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent-blue, #3b82f6);
  }
  .peek-text.svelte-wesdn {
    font-size: 12px;
    line-height: 1.4;
    opacity: 0.85;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    word-break: break-word;
  }
  .peek-empty.svelte-wesdn {
    font-size: 12px;
    opacity: 0.5;
    font-style: italic;
  }
  .approval-card.svelte-wesdn {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    background: var(--status-warning-bg, rgba(245, 158, 11, 0.15));
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 10px;
  }
  .approval-tool.svelte-wesdn {
    font-size: 12px;
    font-weight: 700;
  }
  .approval-msg.svelte-wesdn {
    font-size: 11px;
    line-height: 1.35;
    opacity: 0.85;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    word-break: break-word;
  }
  .approval-diff.svelte-wesdn {
    margin-top: 2px;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    border-radius: 6px;
    font-size: 10.5px;
    font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    line-height: 1.4;
    overflow: hidden;
  }
  .approval-diff-file.svelte-wesdn {
    font-size: 10px;
    opacity: 0.7;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .approval-diff-stats.svelte-wesdn {
    display: flex;
    gap: 8px;
    margin-bottom: 4px;
  }
  .approval-diff-stats.svelte-wesdn .stat-removed:where(.svelte-wesdn) { color: #f87171; }
  .approval-diff-stats.svelte-wesdn .stat-added:where(.svelte-wesdn) { color: #4ade80; }
  .approval-diff-preview.svelte-wesdn {
    overflow: hidden;
  }
  .approval-diff-preview.svelte-wesdn .preview-line:where(.svelte-wesdn) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .approval-diff-preview.svelte-wesdn .preview-line.removed:where(.svelte-wesdn) { color: #fca5a5; }
  .approval-diff-preview.svelte-wesdn .preview-line.added:where(.svelte-wesdn) { color: #86efac; }
  .approval-cmd.svelte-wesdn {
    margin: 0;
    white-space: pre-wrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }


  .personas-panel.svelte-7e5n8b {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 0;
    min-width: 100%;
  }

  .personas-scroll.svelte-7e5n8b {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 0 8px;
    min-height: 0;
  }

  /* ── Section add button (+) ── */
  .section-add-btn.svelte-7e5n8b {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 3px;
    opacity: 0.5;
    transition: all 0.15s;
    padding: 0;
    flex-shrink: 0;
  }

  .section-add-btn.svelte-7e5n8b:hover {
    opacity: 1;
    color: var(--text-primary);
    background: var(--glass-hover);
  }

  /* ── Section header ── */
  .section-header.svelte-7e5n8b {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 8px 4px;
  }

  .section-title.svelte-7e5n8b {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    opacity: 0.5;
    flex: 1;
  }

  /* ── Persona rows ── */
  .persona-list.svelte-7e5n8b {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 10px;
    min-width: 0;
  }

  .persona-row.svelte-7e5n8b {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 7px 8px;
    border-radius: 8px;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    cursor: pointer;
  }

  .row-header.svelte-7e5n8b {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .row-name.svelte-7e5n8b {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .row-name.svelte-7e5n8b:hover {
    color: var(--text-primary);
  }

  .active-row.svelte-7e5n8b .row-name:where(.svelte-7e5n8b) {
    color: var(--text-primary);
  }

  .row-actions.svelte-7e5n8b {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
  }

  .star-btn.svelte-7e5n8b,
  .edit-btn.svelte-7e5n8b {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s;
    padding: 0;
    opacity: 0;
  }

  .persona-row.svelte-7e5n8b:hover .star-btn:where(.svelte-7e5n8b),
  .persona-row.svelte-7e5n8b:hover .edit-btn:where(.svelte-7e5n8b) {
    opacity: 0.5;
  }

  .star-btn.svelte-7e5n8b:hover,
  .edit-btn.svelte-7e5n8b:hover {
    opacity: 1 !important;
    color: var(--text-primary);
  }

  .star-btn.starred.svelte-7e5n8b {
    opacity: 1;
    color: var(--accent-primary);
  }

  .row-desc.svelte-7e5n8b {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.35;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-height: calc(11px * 1.35 * 3);
    overflow: hidden;
    min-width: 0;
  }

  /* ── Onboarding ── */
  .onboarding-text.svelte-7e5n8b {
    font-size: 11px; color: var(--text-muted); line-height: 1.5;
    margin: 0 14px 8px; opacity: 0.6;
    white-space: normal; word-wrap: break-word; overflow-wrap: break-word;
    min-width: 0; flex-shrink: 0;
  }


  .panel.svelte-1kiitv9 { display: flex; flex-direction: column; gap: 10px; padding: 12px; height: 100%; overflow-y: auto; }

  /* Full-width segmented control. Each segment flexes equally and is allowed
     to shrink, so the row can never overflow the ~288px sidebar column — the
     failure mode that pushed the refresh button out of reach. */
  .segmented.svelte-1kiitv9 {
    display: flex;
    gap: 2px;
    padding: 2px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.06));
    border-radius: 8px;
    flex-shrink: 0;
  }
  .segment.svelte-1kiitv9 {
    flex: 1 1 0;
    min-width: 0;
    padding: 5px 4px;
    font-size: 11.5px;
    font-weight: 500;
    font-family: inherit;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .segment.svelte-1kiitv9:hover { color: var(--text-primary); }
  .segment.active.svelte-1kiitv9 {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  }

  .section-head.svelte-1kiitv9 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .section-title.svelte-1kiitv9 { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
  .toolbar.svelte-1kiitv9 { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
  .select.svelte-1kiitv9 {
    background: var(--dropdown-bg, #1a1a1f); color: var(--text-primary);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    border-radius: 6px; padding: 5px 8px; font-size: 12px;
    /* A <select> sizes to its widest <option> by default, which overflowed the
       ~288px column and pushed the whole toolbar sideways. These two reset
       that intrinsic width so it can shrink with the panel. */
    min-width: 0; max-width: 100%;
  }

  .hint.svelte-1kiitv9 { font-size: 11.5px; line-height: 1.6; color: var(--text-muted); margin: 0; }

  .conflict.svelte-1kiitv9 { display: flex; flex-direction: column; gap: 4px; }
  .conflict-label.svelte-1kiitv9 {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--text-muted);
  }

  /* Which agents were probed. `.hit` = config file found with servers;
     `.miss` = no config file at all. Neutral = file found but empty. */
  .source-chips.svelte-1kiitv9 { display: flex; flex-wrap: wrap; gap: 4px; }
  .chip.svelte-1kiitv9 {
    font-size: 10px; padding: 2px 7px; border-radius: 999px;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    color: var(--text-muted); white-space: nowrap; cursor: default;
  }
  .chip.hit.svelte-1kiitv9 { border-color: rgba(120, 200, 140, 0.45); color: #8fd6a4; }
  .chip.miss.svelte-1kiitv9 { opacity: 0.38; }
  .btn.svelte-1kiitv9 {
    background: rgba(255, 255, 255, 0.06); color: var(--text-primary);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    border-radius: 6px; padding: 5px 10px; font-size: 12px; cursor: pointer;
  }
  .btn.svelte-1kiitv9:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); }
  .btn.svelte-1kiitv9:disabled { opacity: 0.45; cursor: not-allowed; }
  .btn.primary.svelte-1kiitv9 { border-color: rgba(255, 255, 255, 0.18); }
  .btn.small.svelte-1kiitv9 { padding: 3px 8px; font-size: 11px; }
  .btn.danger.svelte-1kiitv9 { color: #f87171; }
  .icon-btn.svelte-1kiitv9 { background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 15px; }
  .icon-btn.svelte-1kiitv9:hover { color: var(--text-primary); }
  .list.svelte-1kiitv9 { display: flex; flex-direction: column; gap: 6px; }
  .entry-card.svelte-1kiitv9 {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.06));
    border-radius: 8px; overflow: hidden;
  }
  .entry-card.expanded.svelte-1kiitv9 { border-color: rgba(255, 255, 255, 0.15); }
  .entry-card.skipped.svelte-1kiitv9 { opacity: 0.55; }
  .entry-card.selectable.svelte-1kiitv9 { display: flex; gap: 8px; align-items: flex-start; padding: 8px; cursor: pointer; }
  .selectable-body.svelte-1kiitv9 { flex: 1; min-width: 0; }
  .entry-head.svelte-1kiitv9 { width: 100%; text-align: left; background: transparent; border: none; padding: 8px; cursor: pointer; color: inherit; }
  .entry-head.static.svelte-1kiitv9 { cursor: default; }
  .entry-title.svelte-1kiitv9 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .name.svelte-1kiitv9 { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
  .entry-sub.svelte-1kiitv9 {
    font-size: 11px; color: var(--text-muted); margin-top: 3px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .danger-text.svelte-1kiitv9 { color: #f87171; white-space: normal; }
  .badge.svelte-1kiitv9 {
    font-size: 10px; padding: 1px 6px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.07); color: var(--text-muted);
  }
  .badge.ok.svelte-1kiitv9 { background: rgba(34, 197, 94, 0.16); color: #4ade80; }
  .badge.warn.svelte-1kiitv9 { background: rgba(245, 158, 11, 0.16); color: #fbbf24; }
  .badge.danger.svelte-1kiitv9 { background: rgba(239, 68, 68, 0.16); color: #f87171; }
  .entry-body.svelte-1kiitv9 { padding: 8px; border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.06)); display: flex; flex-direction: column; gap: 6px; }
  .sub-label.svelte-1kiitv9 { font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px; }
  .secret-row.svelte-1kiitv9 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .secret-meta.svelte-1kiitv9 { display: flex; align-items: center; gap: 5px; min-width: 190px; }
  .secret-key.svelte-1kiitv9 { font-size: 11px; color: var(--text-primary); font-family: ui-monospace, monospace; }
  .secret-input.svelte-1kiitv9 {
    flex: 1; min-width: 150px; background: var(--dropdown-bg, #1a1a1f);
    color: var(--text-primary); border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    border-radius: 6px; padding: 5px 8px; font-size: 12px;
  }
  .row-actions.svelte-1kiitv9 { display: flex; gap: 6px; margin-top: 4px; }
  .banner.svelte-1kiitv9 { font-size: 11.5px; padding: 7px 9px; border-radius: 6px; }
  .banner.error.svelte-1kiitv9 { background: rgba(239, 68, 68, 0.12); color: #f87171; }
  .banner.notice.svelte-1kiitv9 { background: rgba(59, 130, 246, 0.12); color: #93c5fd; }
  .banner.warn.svelte-1kiitv9 { background: rgba(245, 158, 11, 0.12); color: #fbbf24; }
  /* Empty states are text, not a slab. The previous grey-filled, dashed box
     read as a disabled control and, at this column width, clipped its own
     copy — the words ran under the panel edges. */
  .empty.svelte-1kiitv9 {
    display: flex; flex-direction: column; gap: 6px; align-items: center;
    padding: 20px 6px; text-align: center;
    min-width: 0; overflow-wrap: anywhere;
  }
  .empty-title.svelte-1kiitv9 { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
  .empty-body.svelte-1kiitv9 { font-size: 11.5px; color: var(--text-muted); line-height: 1.65; }
  .empty-body.svelte-1kiitv9 code:where(.svelte-1kiitv9) {
    background: rgba(255, 255, 255, 0.06); padding: 1px 4px; border-radius: 3px;
    font-size: 10.5px;
  }
  .hook-line.svelte-1kiitv9 { font-size: 11px; color: var(--text-muted); }
  .hook-line.svelte-1kiitv9 code:where(.svelte-1kiitv9) { background: rgba(255, 255, 255, 0.06); padding: 1px 4px; border-radius: 3px; }


  .grid.svelte-66qhl6 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin-bottom: 22px;
  }
  .tile.svelte-66qhl6 {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 2px solid;
    border-radius: 8px;
    padding: 12px 14px;
  }
  .label.svelte-66qhl6 {
    margin: 0 0 6px;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text2, #8a8a8a);
  }
  .value.svelte-66qhl6 {
    margin: 0;
    font-size: 24px;
    font-weight: 620;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
  }
  .sub.svelte-66qhl6 {
    margin: 5px 0 0;
    font-size: 11px;
    color: var(--text2, #8a8a8a);
  }


  .agents-panel.svelte-dwkbx6 {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 0;
    min-width: 100%;
  }

  .agents-scroll.svelte-dwkbx6 {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 0 8px;
    min-height: 0;
  }

  /* ── Spawn bar ── */
  .spawn-bar.svelte-dwkbx6 {
    padding: 4px 8px 2px;
  }

  .spawn-btn.svelte-dwkbx6 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 7px 12px;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
  }

  .spawn-btn.svelte-dwkbx6:hover {
    background: var(--glass-hover, rgba(255, 255, 255, 0.04));
    border-color: var(--glass-border-hover, rgba(255, 255, 255, 0.15));
    color: var(--text-primary);
  }

  /* ── Section divider ── */
  .section-divider.svelte-dwkbx6 {
    height: 1px;
    background: var(--glass-border);
    margin: 8px 8px 4px;
  }

  /* ── Clear finished ── */
  .clear-finished-row.svelte-dwkbx6 {
    display: flex;
    justify-content: flex-end;
    padding: 2px 12px 0;
  }

  .clear-finished-btn.svelte-dwkbx6 {
    background: none;
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
  }

  .clear-finished-btn.svelte-dwkbx6:hover {
    color: var(--text-secondary);
    border-color: var(--text-muted);
  }

  /* ── Loading ── */
  .loading-state.svelte-dwkbx6 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 16px;
    color: var(--text-muted);
    font-size: 12px;
  }

  .spinner.svelte-dwkbx6 {
    width: 20px;
    height: 20px;
    border: 2px solid var(--glass-border);
    border-top-color: var(--text-muted);
    border-radius: 50%;
    animation: svelte-dwkbx6-spin 0.8s linear infinite;
  }

  @keyframes svelte-dwkbx6-spin {
    to { transform: rotate(360deg); }
  }

  /* ── Empty state ── */
  .empty-state.svelte-dwkbx6 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 32px 16px;
    text-align: center;
    width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: break-word;
  }

  .empty-icon.svelte-dwkbx6 {
    color: var(--text-muted);
    opacity: 0.4;
    margin-bottom: 4px;
  }

  .empty-title.svelte-dwkbx6 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
  }

  .empty-desc.svelte-dwkbx6 {
    font-size: 11px;
    color: var(--text-muted);
    max-width: 100%;
    width: 100%;
    text-align: center;
    line-height: 1.5;
    word-break: break-word;
    overflow-wrap: break-word;
    padding: 0 12px;
    box-sizing: border-box;
  }

  /* ── Session filter ── */
  .session-filter.svelte-dwkbx6 {
    padding: 4px 8px;
    position: relative;
  }

  /* ── Stats row (plain text, no button styling) ── */
  .stats-row.svelte-dwkbx6 {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    font-size: 11px;
    color: var(--text-muted);
    flex-wrap: wrap;
  }

  .stat.svelte-dwkbx6 {
    white-space: nowrap;
  }

  .stat-sep.svelte-dwkbx6 {
    opacity: 0.3;
  }

  /* ── Collapsible sections ── */
  .section.svelte-dwkbx6 {
    padding: 0 4px;
  }

  .section-toggle.svelte-dwkbx6 {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 6px 4px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-family: inherit;
    width: 100%;
    text-align: left;
  }

  .section-toggle.svelte-dwkbx6:hover {
    color: var(--text-secondary);
  }

  .chevron.svelte-dwkbx6 {
    transition: transform 0.2s ease;
    flex-shrink: 0;
  }

  .chevron.rotated.svelte-dwkbx6 {
    transform: rotate(-90deg);
  }

  .section-label.svelte-dwkbx6 {
    flex: 1;
  }

  .section-empty.svelte-dwkbx6 {
    padding: 8px 10px;
    font-size: 11px;
    color: var(--text-muted);
    opacity: 0.6;
  }

  /* Section header row — toggle + inline action (e.g. "Clear" on Inactive) */
  .section-header-row.svelte-dwkbx6 {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .section-header-row.svelte-dwkbx6 .section-toggle:where(.svelte-dwkbx6) {
    flex: 1;
  }

  .clear-inactive-btn.svelte-dwkbx6 {
    background: none;
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
    font-family: inherit;
    transition: color 0.15s, border-color 0.15s;
  }

  .clear-inactive-btn.svelte-dwkbx6:hover:not(:disabled) {
    color: var(--text-secondary);
    border-color: var(--text-muted);
  }

  .clear-inactive-btn.svelte-dwkbx6:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  /* Collapsed "Finished" sub-section toggle (standalone agents + teams) */
  .finished-toggle.svelte-dwkbx6 {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px 3px 16px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 10px;
    font-weight: 500;
    font-family: inherit;
    width: 100%;
    text-align: left;
    opacity: 0.8;
  }

  .finished-toggle.svelte-dwkbx6:hover {
    color: var(--text-secondary);
    opacity: 1;
  }

  .finished-label.svelte-dwkbx6 {
    flex: 1;
  }

  /* ── Agent cards ── */
  .agent-card.svelte-dwkbx6 {
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--glass-hover, rgba(255,255,255,0.03));
    margin: 2px 4px;
    min-width: 0;
    overflow: hidden;
  }

  .agent-card.inactive.svelte-dwkbx6 {
    opacity: 0.6;
  }

  .agent-header.svelte-dwkbx6 {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }

  .status-dot.svelte-dwkbx6 {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .agent-name.svelte-dwkbx6 {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex-shrink: 1;
  }

  .agent-badge.svelte-dwkbx6 {
    font-size: 10px;
    font-weight: 500;
    margin-left: auto;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .agent-task.svelte-dwkbx6 {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 3px;
    line-height: 1.4;
    word-break: break-word;
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .agent-activity.svelte-dwkbx6 {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
    line-height: 1.4;
    word-break: break-word;
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .agent-result.svelte-dwkbx6 {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
    line-height: 1.4;
    word-break: break-word;
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .agent-meta.svelte-dwkbx6 {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0.7;
    flex-wrap: wrap;
  }

  .meta-sep.svelte-dwkbx6 {
    opacity: 0.3;
  }

  /* ── Team cards ── */
  .team-card.svelte-dwkbx6 {
    margin: 2px 4px;
    border-radius: 8px;
    background: var(--glass-hover, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--glass-border);
    overflow: hidden;
  }

  .team-header.svelte-dwkbx6 {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    width: 100%;
    text-align: left;
    font-family: inherit;
    transition: background 0.15s;
  }

  .team-header.svelte-dwkbx6:hover {
    background: var(--glass-hover, rgba(255, 255, 255, 0.04));
  }

  .team-icon.svelte-dwkbx6 {
    font-size: 12px;
    flex-shrink: 0;
  }

  .team-name.svelte-dwkbx6 {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
  }

  .team-progress.svelte-dwkbx6 {
    font-size: 10px;
    font-weight: 500;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .team-chevron.svelte-dwkbx6 {
    flex-shrink: 0;
  }

  .team-agents.svelte-dwkbx6 {
    padding: 2px 0 4px;
    border-top: 1px solid var(--glass-border);
  }

  /* ── Inbox messages ── */
  .inbox-msg.svelte-dwkbx6 {
    padding: 6px 10px;
    margin: 2px 4px;
    border-radius: 6px;
    background: var(--glass-hover, rgba(255,255,255,0.02));
    min-width: 0;
    overflow: hidden;
  }

  .inbox-header.svelte-dwkbx6 {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--text-muted);
    flex-wrap: wrap;
    min-width: 0;
  }

  .inbox-from.svelte-dwkbx6, .inbox-to.svelte-dwkbx6 {
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
    font-weight: 500;
  }

  .inbox-arrow.svelte-dwkbx6 {
    opacity: 0.3;
    flex-shrink: 0;
  }

  .inbox-type.svelte-dwkbx6 {
    font-size: 9px;
    padding: 1px 4px;
    border-radius: 3px;
    background: rgba(255,255,255,0.06);
    flex-shrink: 0;
  }

  .inbox-time.svelte-dwkbx6 {
    margin-left: auto;
    flex-shrink: 0;
    opacity: 0.6;
  }

  .inbox-content.svelte-dwkbx6 {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
    line-height: 1.4;
    word-break: break-word;
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ── Notification stack ── */
  .notification-stack.svelte-dwkbx6 {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: var(--z-toast, 1000);
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    pointer-events: none;
  }


  .brain-panel.svelte-i2hnps {
    padding: 12px 14px;
    overflow-y: auto;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }

  .loading-state.svelte-i2hnps { display: flex; align-items: center; justify-content: center; height: 100px; }
  .loading-text.svelte-i2hnps { font-size: 13px; color: var(--text-muted); }
  .onboarding-text.svelte-i2hnps {
    font-size: 11px; color: var(--text-muted); line-height: 1.5;
    margin: 0 0 10px; opacity: 0.6;
    white-space: normal; word-wrap: break-word; overflow-wrap: break-word;
    min-width: 0; flex-shrink: 0;
  }
  .brain-section.svelte-i2hnps { margin-bottom: 12px; }
  .empty-hint.svelte-i2hnps { font-size: 11px; color: var(--text-muted); opacity: 0.5; }

  /* ── Section headers ── */
  .section-header.svelte-i2hnps { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
  .section-title.svelte-i2hnps {
    font-size: 10px; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.5px;
  }

  /* ── Summary ── */
  .summary-line.svelte-i2hnps { display: flex; align-items: baseline; gap: 4px; font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
  .sum-memories.svelte-i2hnps { font-weight: 600; color: var(--text-primary); }
  .sum-stat.svelte-i2hnps { color: var(--text-secondary); }
  .sum-sep.svelte-i2hnps { color: var(--text-muted); opacity: 0.3; }

  .dist-bar.svelte-i2hnps { display: flex; height: 3px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, 0.04); margin-bottom: 4px; }
  .dist-segment.svelte-i2hnps { height: 100%; transition: width 0.3s ease; }

  /* ── Overview extras ── */
  .overview-extras.svelte-i2hnps { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--text-muted); margin-top: 3px; }
  .extra-item.svelte-i2hnps { display: flex; align-items: center; gap: 3px; }
  .extra-dot.svelte-i2hnps { width: 4px; height: 4px; border-radius: 50%; flex-shrink: 0; }
  .extra-faded.svelte-i2hnps { opacity: 0.5; }

  /* ── Search ── */
  .search-row.svelte-i2hnps { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px solid var(--glass-border); }
  .search-icon.svelte-i2hnps { flex-shrink: 0; color: var(--text-muted); }
  .search-input.svelte-i2hnps { flex: 1; border: none; background: transparent; color: var(--text-primary); font-size: 12px; font-family: inherit; outline: none; }
  .search-input.svelte-i2hnps::placeholder { color: var(--text-muted); }
  .search-clear.svelte-i2hnps { font-size: 11px; color: var(--text-muted); cursor: pointer; transition: color 0.15s; }
  .search-clear.svelte-i2hnps:hover { color: var(--text-primary); }
  .search-results.svelte-i2hnps { padding-top: 6px; display: flex; flex-direction: column; gap: 1px; }

  /* ── Memory Modules (accordion) ── */
  .modules-section.svelte-i2hnps { flex: 1; overflow-y: auto; }
  .modules-list.svelte-i2hnps { display: flex; flex-direction: column; }

  .module-group.svelte-i2hnps { margin-bottom: 2px; }

  .module-row.svelte-i2hnps {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 4px;
    border: none;
    background: none;
    color: var(--text-muted);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.15s;
  }

  .module-row.svelte-i2hnps:hover { color: var(--text-primary); }

  .module-name.svelte-i2hnps {
    flex: 1;
    font-weight: 500;
    text-align: left;
  }

  .module-count.svelte-i2hnps {
    font-size: 10px;
    opacity: 0.4;
  }

  .module-chevron.svelte-i2hnps {
    opacity: 0.3;
    transition: transform 0.2s ease;
    flex-shrink: 0;
  }

  .module-chevron.open.svelte-i2hnps {
    transform: rotate(180deg);
    opacity: 0.6;
  }

  .module-entries.svelte-i2hnps {
    padding: 0 0 4px 22px;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  .load-more.svelte-i2hnps {
    display: flex; justify-content: center; padding: 4px 0;
    color: var(--text-muted); cursor: pointer; opacity: 0.4; transition: opacity 0.15s;
  }
  .load-more.svelte-i2hnps:hover { opacity: 0.8; }

  /* ── Controller row ── */
  .controller-row.svelte-i2hnps {
    font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
  }


  .sec.svelte-iy322k {
    margin: 0 0 30px;
  }
  h2.svelte-iy322k {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 620;
  }
  .eyebrow.svelte-iy322k {
    margin: 0 0 10px;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text2, #8a8a8a);
  }
  .note.svelte-iy322k {
    margin: 0 0 12px;
    font-size: 12px;
    color: var(--text2, #8a8a8a);
  }


  .tier-dot.svelte-1c48xy0 {
    display: inline-block;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .tier-hot.svelte-1c48xy0 {
    background: #f97316;
    animation: svelte-1c48xy0-pulse 1.5s infinite;
  }

  .tier-warm.svelte-1c48xy0 {
    background: #eab308;
    box-shadow: 0 0 4px #eab308;
  }

  .tier-cold.svelte-1c48xy0 {
    background: #6b7280;
  }

  @keyframes svelte-1c48xy0-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }


  .neural-map.svelte-88gphp {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .neural-map-body.svelte-88gphp {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  .graph-area.svelte-88gphp {
    flex: 1;
    min-width: 0;
    position: relative;
    overflow: hidden;
  }

  .inspector-panel.svelte-88gphp {
    width: 180px;
    min-width: 140px;
    max-width: 220px;
    overflow: hidden;
    border-left: 1px solid rgba(56, 189, 248, 0.08);
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.15);
  }

  /* Responsive: hide sidebar when very narrow */
  @container (max-width: 500px) {
    .inspector-panel.svelte-88gphp {
      display: none;
    }
  }

  .neural-map-footer.svelte-88gphp {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    border-top: 1px solid rgba(56, 189, 248, 0.06);
    flex-shrink: 0;
  }

  .footer-stats.svelte-88gphp {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .footer-stat.svelte-88gphp {
    font-size: 9px;
    color: var(--text-muted);
    opacity: 0.5;
  }

  .footer-sep.svelte-88gphp {
    font-size: 9px;
    color: var(--text-muted);
    opacity: 0.15;
  }

  .footer-health.svelte-88gphp {
    display: flex;
    align-items: center;
    gap: 3px;
  }

  .health-dot.svelte-88gphp {
    width: 4px;
    height: 4px;
    border-radius: 50%;
  }

  .health-dot.hot.svelte-88gphp { background: #34d399; }
  .health-dot.warm.svelte-88gphp { background: #fbbf24; }
  .health-dot.cold.svelte-88gphp { background: #94a3b8; }


  /* Mirrors ModelPillBar.svelte's model dropdown for visual consistency.
     Opens DOWNWARD (the picker lives in the window header, not a bottom bar). */
  .pill-dropdown.svelte-1wo3rp6 { position: relative; }

  .pill-text.svelte-1wo3rp6 {
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    padding: 3px 8px;
    transition: all 0.15s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .pill-text.svelte-1wo3rp6:hover { color: rgba(255, 255, 255, 0.9); }
  .pill-dropdown.open.svelte-1wo3rp6 .pill-text:where(.svelte-1wo3rp6) { background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.85); }

  .provider-icon.svelte-1wo3rp6 {
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px; border-radius: 3px; font-size: 9px; font-weight: 700;
    color: var(--text-primary, #fff);
  }

  .pill-menu.svelte-1wo3rp6 {
    position: absolute; top: calc(100% + 6px); left: 0;
    min-width: 240px; max-height: 460px; overflow-y: auto;
    background: var(--dropdown-bg); border-radius: 14px; padding: 4px;
    box-shadow: var(--glass-shadow); z-index: var(--z-toast);
    -webkit-backdrop-filter: var(--dropdown-blur); backdrop-filter: var(--dropdown-blur);
    animation: fade-in 0.1s ease-out;
  }

  .provider-search.svelte-1wo3rp6 {
    position: sticky; top: 0; z-index: 1; display: flex; align-items: center;
    padding: 4px 6px; margin-bottom: 2px; background: var(--dropdown-bg);
    border-bottom: 1px solid var(--glass-border); border-radius: 14px 14px 0 0;
  }
  .provider-search-input.svelte-1wo3rp6 {
    flex: 1; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--glass-border);
    border-radius: 8px; color: var(--text-primary); font-size: 12px; font-family: inherit;
    padding: 5px 8px; outline: none; transition: border-color 0.15s;
  }
  .provider-search-input.svelte-1wo3rp6::placeholder { color: var(--text-muted); opacity: 0.6; }
  .provider-search-input.svelte-1wo3rp6:focus { border-color: rgba(210, 180, 140, 0.4); }
  .provider-search-clear.svelte-1wo3rp6 {
    background: none; border: none; color: var(--text-muted); cursor: pointer;
    font-size: 11px; padding: 2px 4px; margin-left: 4px; border-radius: 4px; line-height: 1;
  }
  .provider-search-clear.svelte-1wo3rp6:hover { color: var(--text-primary); }

  .menu-empty.svelte-1wo3rp6 { padding: 12px 8px; text-align: center; color: var(--text-muted); font-size: 11px; }

  .menu-item.svelte-1wo3rp6 {
    display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 8px;
    border: none; background: none; color: var(--text-secondary); font-size: 12px;
    font-family: inherit; cursor: pointer; border-radius: 14px; transition: all 0.1s; text-align: left;
  }
  .menu-item.svelte-1wo3rp6:hover { background: rgba(255, 255, 255, 0.06); color: var(--text-primary); }
  .menu-item.active.svelte-1wo3rp6 { background: rgba(210, 180, 140, 0.12); color: var(--text-primary); }
  .provider-header.svelte-1wo3rp6 { font-weight: 500; }
  .expand-icon.svelte-1wo3rp6 { font-size: 10px; color: var(--text-muted); transition: transform 0.15s; margin-left: auto; }
  .expand-icon.expanded.svelte-1wo3rp6 { transform: rotate(90deg); }
  .model-sublist.svelte-1wo3rp6 { padding-left: 12px; border-left: 1px solid var(--glass-border); margin-left: 8px; margin-bottom: 2px; }
  .model-item.svelte-1wo3rp6 { font-size: 11px; padding: 4px 8px; color: var(--text-muted); }
  .model-item.svelte-1wo3rp6:hover { color: var(--text-primary); }
  .model-item.active.svelte-1wo3rp6 { color: var(--text-primary); }
  .model-dot.svelte-1wo3rp6 { display: inline-block; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
  .model-refresh.svelte-1wo3rp6 { font-size: 12px; color: var(--text-muted); cursor: pointer; padding: 0 4px; border-radius: 4px; line-height: 1; }
  .model-refresh.svelte-1wo3rp6:hover { color: var(--text-primary); }
  .model-status.svelte-1wo3rp6 { font-size: 10px; color: var(--text-muted); font-style: italic; padding: 2px 8px; opacity: 0.8; }
  .model-status-error.svelte-1wo3rp6 { color: var(--accent-yellow, #f59e0b); font-style: normal; }
  .model-tag.svelte-1wo3rp6 { font-size: 9px; color: var(--text-muted); border: 1px solid var(--glass-border); border-radius: 3px; padding: 0 3px; margin-left: 6px; text-transform: uppercase; letter-spacing: 0.3px; }
  .menu-label.svelte-1wo3rp6 { flex: 1; }


  /* Self-contained bubble layout — BrainstormHost's scoped .msg rules do NOT
     reach this child component, so each bubble must carry its own role styling.
     Mirrors BrainstormHost's .msg/.msg.user/.msg.assistant (which style the
     streaming/ghost/transient messages rendered directly in the host). */
  .msg.svelte-byeurp {
    position: relative;
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.55;
    word-wrap: break-word;
    overflow-wrap: anywhere;
  }
  .msg.svelte-byeurp p:first-child { margin-top: 0; }
  .msg.svelte-byeurp p:last-child { margin-bottom: 0; }
  .msg.svelte-byeurp pre { margin: 8px 0; }
  .msg.svelte-byeurp code { font-size: 12px; }

  .msg.user.svelte-byeurp {
    align-self: flex-end;
    background: var(--accent-primary-glow);
    border: 1px solid color-mix(in srgb, var(--accent-primary) 30%, transparent);
    color: var(--text-primary);
  }
  .msg.assistant.svelte-byeurp {
    align-self: flex-start;
    background: var(--glass-highlight, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    color: var(--text-primary);
  }
  .msg-actions.svelte-byeurp {
    display: flex; gap: 2px; margin-top: 4px; opacity: 0;
    transition: opacity 0.12s ease;
  }
  .msg.svelte-byeurp:hover .msg-actions:where(.svelte-byeurp),
  .msg-actions.visible.svelte-byeurp { opacity: 1; }
  .msg-action.svelte-byeurp {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; padding: 0; border-radius: 5px;
    background: transparent; border: none; color: var(--text-secondary, rgba(255, 255, 255, 0.55));
    cursor: pointer;
  }
  .msg-action.svelte-byeurp svg:where(.svelte-byeurp) { width: 13px; height: 13px; }
  .msg-action.svelte-byeurp:hover { background: rgba(255, 255, 255, 0.08); color: var(--text-primary, inherit); }
  .msg-action.copied.svelte-byeurp { color: var(--accent-primary); }


  .cp-backdrop.svelte-1hbf06h {
    position: fixed;
    inset: 0;
    padding: 0;
    border: none;
    background: transparent;
    cursor: default;
    z-index: var(--z-overlay);
  }

  .cp-popup.svelte-1hbf06h {
    position: fixed;
    width: 232px;
    padding: 10px;
    box-sizing: border-box;
    border-radius: var(--radius-lg);
    background: var(--popup-bg);
    -webkit-backdrop-filter: var(--popup-blur);
    backdrop-filter: var(--popup-blur);
    border: 1px solid var(--popup-border-tint);
    box-shadow: var(--glass-shadow);
    color: var(--text-primary);
    font-size: 11px;
    z-index: var(--z-modal);
  }

  .cp-sv.svelte-1hbf06h {
    position: relative;
    width: 100%;
    height: 156px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: crosshair;
    touch-action: none;
  }
  .cp-sv.svelte-1hbf06h:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 1px;
  }
  .cp-sv-white.svelte-1hbf06h {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, #fff, transparent);
  }
  .cp-sv-black.svelte-1hbf06h {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #000, transparent);
  }
  /* A div, not a button: tokens.css kills `button { box-shadow }` in the
     terminal themes, and this ring is the only thing separating the dot from
     a swatch of the same colour. */
  .cp-sv-thumb.svelte-1hbf06h {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid var(--text-primary);
    border-radius: var(--radius-full);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
    transform: translate(-50%, -50%);
    pointer-events: none;
  }

  .cp-hue.svelte-1hbf06h {
    position: relative;
    width: 100%;
    height: 12px;
    margin-top: 10px;
    border-radius: var(--radius-sm);
    cursor: ew-resize;
    touch-action: none;
  }
  .cp-hue.svelte-1hbf06h:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 1px;
  }
  .cp-hue-thumb.svelte-1hbf06h {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    border: 2px solid var(--text-primary);
    border-radius: var(--radius-full);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
    transform: translate(-50%, -50%);
    pointer-events: none;
  }

  .cp-row.svelte-1hbf06h {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
  }
  .cp-chip.svelte-1hbf06h {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    /* Matches .custom-preview / .accent-dot so the chip reads as the same object. */
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3);
  }
  .cp-hex.svelte-1hbf06h {
    flex: 1;
    min-width: 0;
    padding: 4px 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-primary);
    background: var(--glass-input-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    text-transform: lowercase;
  }
  .cp-hex.invalid.svelte-1hbf06h {
    border-color: var(--status-error, #ef4444);
  }
  .cp-hex.svelte-1hbf06h:focus {
    outline: none;
    border-color: var(--accent-primary);
  }


  .addressing.svelte-1m5wup3 { position: relative; display: flex; align-items: center; }

  .pill.svelte-1m5wup3 {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 9px 3px 7px; border-radius: 999px;
    background: var(--glass-highlight, rgba(255, 255, 255, 0.06));
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12));
    color: var(--text-primary, inherit);
    font-size: 12px; line-height: 1; cursor: pointer;
    transition: background 0.12s ease;
  }
  .pill.svelte-1m5wup3:hover { background: var(--glass-bg-hover, rgba(255, 255, 255, 0.1)); }

  .dot.svelte-1m5wup3 { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); }
  /* --accent was never defined — the blue fallback won in every theme. */
  .dot.active.svelte-1m5wup3 { background: var(--accent-primary); }

  .name.svelte-1m5wup3 { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .caret.svelte-1m5wup3 { opacity: 0.6; transition: transform 0.12s ease; }
  .caret.up.svelte-1m5wup3 { transform: rotate(180deg); }

  .backdrop.svelte-1m5wup3 { position: fixed; inset: 0; z-index: 40; }

  .dropdown.svelte-1m5wup3 {
    position: absolute; top: calc(100% + 5px); left: 0; z-index: 50;
    min-width: 190px; max-width: 280px; padding: 4px;
    /* Themed glass — matches the BrainstormModelPicker dropdown. Was
       var(--glass-bg-strong, …) (an UNDEFINED token) → fell back to a hardcoded
       opaque grey that ignored the gemstone theme and read grey/white. */
    background: var(--dropdown-bg);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12));
    border-radius: 14px;
    box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: var(--dropdown-blur);
    backdrop-filter: var(--dropdown-blur);
  }

  .item.svelte-1m5wup3 {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 6px 8px; border-radius: 7px;
    background: transparent; border: none; color: var(--text-secondary, rgba(255, 255, 255, 0.6));
    font-size: 12px; text-align: left; cursor: pointer;
  }
  .item.svelte-1m5wup3:hover { background: rgba(255, 255, 255, 0.06); }
  .item.active.svelte-1m5wup3 { background: var(--glass-highlight, rgba(255, 255, 255, 0.08)); }

  .item-dot.svelte-1m5wup3 { width: 7px; height: 7px; border-radius: 50%; background: transparent; border: 1px solid rgba(255, 255, 255, 0.3); flex: none; }
  .item-dot.on.svelte-1m5wup3 { background: var(--accent-primary); border-color: var(--accent-primary); }

  .item-name.svelte-1m5wup3 { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .badge.svelte-1m5wup3 {
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; flex: none;
    background: var(--accent-primary); color: var(--bg-primary);
    font-size: 10px; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center;
  }


  .scroll.svelte-1iohdyn {
    overflow: auto;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
  }
  table.svelte-1iohdyn {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
  }
  th.svelte-1iohdyn {
    position: sticky;
    top: 0;
    background: #14161c;
    text-align: left;
    padding: 8px 10px;
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text2, #8a8a8a);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    white-space: nowrap;
  }
  td.svelte-1iohdyn {
    padding: 7px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.045);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  tbody.svelte-1iohdyn tr:where(.svelte-1iohdyn):last-child td:where(.svelte-1iohdyn) {
    border-bottom: none;
  }
  tbody.svelte-1iohdyn tr:where(.svelte-1iohdyn):hover td:where(.svelte-1iohdyn) {
    background: rgba(255, 255, 255, 0.025);
  }


  .tool-burst.svelte-324ws0 {
    margin: 4px 0;
  }

  /* Flat header row — no background, no border, aligned with chat text. */
  .burst-header.svelte-324ws0 {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 2px 0;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    background: none;
    color: var(--text-muted, #8a8a8a);
    font-family: inherit;
    font-size: 13.5px;
    cursor: pointer;
    text-align: left;
    transition: color 0.15s;
  }
  .burst-header.svelte-324ws0:hover {
    color: var(--text-secondary);
  }
  .burst-header.svelte-324ws0:focus-visible {
    outline: 2px solid var(--accent-primary-glow, rgba(115, 200, 240, 0.5));
    outline-offset: 1px;
  }

  .bolt.svelte-324ws0 {
    flex-shrink: 0;
    opacity: 0.9;
  }
  /* User-locked: the bolt icon itself flashes while any call runs. */
  .bolt.running.svelte-324ws0 {
    animation: svelte-324ws0-burst-pulse 1s ease-in-out infinite;
  }

  .burst-label.svelte-324ws0 {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .burst-label.running.svelte-324ws0 {
    /* Present-tense pulse only in burst-fallback mode (tense + ellipsis). */
    animation: svelte-324ws0-burst-pulse 1.6s ease-in-out infinite;
  }

  .chev.svelte-324ws0 {
    flex-shrink: 0;
    transition: transform 0.15s ease;
    margin-left: 2px;
  }
  .chev.open.svelte-324ws0 {
    transform: rotate(180deg);
  }

  /* Tree body — 1px vertical connector line + bullet rows + Done row. */
  .tree.svelte-324ws0 {
    position: relative;
    list-style: none;
    margin: 8px 0 4px 24px;
    padding: 0 0 0 18px;
  }
  .tree.svelte-324ws0::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 9px;
    bottom: 8px;
    width: 1px;
    background: var(--border, #2e2e2e);
  }
  .tree.svelte-324ws0 li:where(.svelte-324ws0) {
    position: relative;
  }
  .tree.svelte-324ws0 li:where(.svelte-324ws0)::before {
    content: '';
    position: absolute;
    left: -16px;
    top: 10px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #4d4d4d;
  }

  .tree-item.svelte-324ws0 {
    display: flex;
    align-items: baseline;
    gap: 8px;
    width: 100%;
    padding: 3px 0;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    background: none;
    color: var(--text-muted, #8a8a8a);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    transition: color 0.1s;
  }
  .tree-item.svelte-324ws0:hover {
    color: var(--text-secondary);
  }
  .tree-item.error.svelte-324ws0 {
    color: var(--accent-red);
  }
  .tree-item.interrupted.svelte-324ws0 {
    color: var(--text-muted, #8a8a8a);
    font-style: italic;
    opacity: 0.7;
  }

  .tree-verb.svelte-324ws0 {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tree-duration.svelte-324ws0 {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--text-muted, #8a8a8a);
    opacity: 0.8;
  }

  /* Calls beyond the first 5: capped scroll container (≈3 rows) so long
     groups never build massive inline lists. "+N more" removes the cap. */
  .tree-scroll.capped.svelte-324ws0 {
    max-height: 66px;
    overflow-y: auto;
  }

  /* ── Per-family nesting ───────────────────────────────────────────────
     A group header sits on the burst's own tree line; its calls nest one
     level deeper with a second connector. Same muted palette and no card
     chrome as the flat rows, so nesting reads as indentation rather than
     as a new visual object. */
  .tree-group.svelte-324ws0 {
    list-style: none;
  }

  .tree-group-header.svelte-324ws0 {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 3px 0;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    background: none;
    color: var(--text-muted, #8a8a8a);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: color 0.1s;
  }
  .tree-group-header.svelte-324ws0:hover {
    color: var(--text-secondary);
  }
  .tree-group-header.running.svelte-324ws0 {
    color: var(--text-secondary);
  }

  .group-chev.svelte-324ws0 {
    flex-shrink: 0;
    margin-left: -2px;
    transition: transform 0.15s ease;
  }
  .group-chev.open.svelte-324ws0 {
    transform: rotate(180deg);
  }

  .tree-group-label.svelte-324ws0 {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tree-group-count.svelte-324ws0 {
    flex-shrink: 0;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted, #8a8a8a);
    opacity: 0.75;
  }

  /* Second-level connector, indented from the burst's own line. */
  .tree-nested.svelte-324ws0 {
    margin: 2px 0 4px 14px;
  }

  .tree-more-row.svelte-324ws0 {
    list-style: none;
  }
  .tree-more.svelte-324ws0 {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    background: none;
    padding: 3px 0;
    color: var(--text-muted, #8a8a8a);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: color 0.1s;
  }
  .tree-more.svelte-324ws0:hover {
    color: var(--text-secondary);
  }

  /* Single burst-level terminal row — muted by default; GREEN only when
     every call completed cleanly AND returned a result (see `allCompleted`). */
  .tree-done.svelte-324ws0 {
    color: var(--text-muted, #8a8a8a);
    font-size: 13px;
    padding: 5px 0 2px;
  }
  .tree-done.svelte-324ws0 .check:where(.svelte-324ws0) {
    color: var(--text-secondary);
    margin-right: 6px;
  }
  .tree-done.done-ok.svelte-324ws0,
  .tree-done.done-ok.svelte-324ws0 .check:where(.svelte-324ws0) {
    color: var(--accent-green, #22c55e);
  }

  @keyframes svelte-324ws0-burst-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
  }


  .message-parts.svelte-w1swk2 {
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Tight gap between parts of the same message so the message reads as
       one continuous block while still being one-component-per-part for
       future styling flexibility. */
  }


  .ork-account.svelte-1v6xuox {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .card.svelte-1v6xuox {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    border-radius: 10px;
  }

  .muted.svelte-1v6xuox {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-muted, #a1a1aa);
  }

  .error.svelte-1v6xuox {
    margin: 0;
    font-size: 12px;
    color: var(--color-error, #f87171);
  }

  .actions.svelte-1v6xuox {
    display: flex;
    gap: 8px;
  }

  .signed-in.svelte-1v6xuox {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .row.svelte-1v6xuox {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .dot.svelte-1v6xuox {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-success, #4ade80);
    flex: none;
  }

  .email.svelte-1v6xuox {
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }


  .backdrop.svelte-dl7k5z {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
  }
  .modal.svelte-dl7k5z {
    width: 520px;
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    background: var(--popup-bg, rgba(28, 26, 32, 0.92));
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12));
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    color: var(--text-primary, rgba(255, 255, 255, 0.9));
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  }
  .modal-head.svelte-dl7k5z {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
  }
  .modal-head.svelte-dl7k5z h3:where(.svelte-dl7k5z) { margin: 0; font-size: 14px; font-weight: 600; }
  .x-btn.svelte-dl7k5z {
    background: transparent;
    border: none;
    color: var(--text-muted, rgba(255, 255, 255, 0.5));
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
  }
  .x-btn.svelte-dl7k5z:hover { color: var(--text-primary, rgba(255, 255, 255, 0.9)); }

  .form.svelte-dl7k5z {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .field.svelte-dl7k5z { display: flex; flex-direction: column; gap: 5px; }
  .label.svelte-dl7k5z {
    font-size: 11px;
    color: var(--text-muted, rgba(255, 255, 255, 0.5));
    letter-spacing: 0.3px;
  }
  input.svelte-dl7k5z, textarea.svelte-dl7k5z {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
    color: var(--text-primary, rgba(255, 255, 255, 0.9));
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    resize: vertical;
  }
  .name-input.svelte-dl7k5z, textarea.svelte-dl7k5z {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  }
  input.svelte-dl7k5z:focus, textarea.svelte-dl7k5z:focus { border-color: var(--accent, #6366f1); }
  input.error.svelte-dl7k5z, textarea.error.svelte-dl7k5z { border-color: rgba(248, 113, 113, 0.6); }
  .err.svelte-dl7k5z { font-size: 11px; color: #fca5a5; min-height: 14px; }
  .preview.svelte-dl7k5z { font-size: 11px; color: var(--text-muted, rgba(255, 255, 255, 0.45)); }
  .preview.svelte-dl7k5z code:where(.svelte-dl7k5z) {
    background: rgba(255, 255, 255, 0.08);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 11px;
  }

  .type-toggle.svelte-dl7k5z { display: flex; gap: 8px; }
  .type-btn.svelte-dl7k5z {
    flex: 1;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    border-radius: 7px;
    padding: 9px 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .type-btn.svelte-dl7k5z:hover { background: rgba(255, 255, 255, 0.08); }
  .type-btn.active.svelte-dl7k5z {
    border-color: var(--accent, #6366f1);
    background: rgba(99, 102, 241, 0.14);
    color: var(--text-primary, rgba(255, 255, 255, 0.95));
  }
  .type-sub.svelte-dl7k5z { font-size: 10px; color: var(--text-muted, rgba(255, 255, 255, 0.45)); font-weight: 400; }

  .server-err.svelte-dl7k5z {
    font-size: 12px;
    color: #fca5a5;
    background: rgba(232, 17, 35, 0.12);
    border: 1px solid rgba(232, 17, 35, 0.3);
    border-radius: 6px;
    padding: 7px 10px;
  }

  .modal-foot.svelte-dl7k5z {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
  }
  .primary-btn.svelte-dl7k5z {
    background: var(--accent, #6366f1);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
  }
  .primary-btn.svelte-dl7k5z:disabled { opacity: 0.5; cursor: default; }
  .primary-btn.svelte-dl7k5z:not(:disabled):hover { filter: brightness(1.1); }
  .ghost-btn.svelte-dl7k5z {
    background: transparent;
    color: var(--text-muted, rgba(255, 255, 255, 0.55));
    border: none;
    border-radius: 6px;
    padding: 7px 14px;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.15s;
  }
  .ghost-btn.svelte-dl7k5z:hover:not(:disabled) { color: var(--text-primary, rgba(255, 255, 255, 0.95)); }
  .ghost-btn.svelte-dl7k5z:disabled { opacity: 0.5; cursor: default; }


  .actions.svelte-e3x5fl {
    display: flex;
    gap: 6px;
    margin-top: 2px;
  }
  .btn.svelte-e3x5fl {
    flex: 1 1 0;
    padding: 6px 4px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.14));
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary, #f5f5f0);
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
  }
  .btn.svelte-e3x5fl:hover { background: rgba(255, 255, 255, 0.14); }
  .btn.svelte-e3x5fl:disabled { opacity: 0.5; cursor: default; }
  .btn.approve.svelte-e3x5fl {
    background: var(--status-success-bg, rgba(34, 197, 94, 0.2));
    border-color: rgba(34, 197, 94, 0.45);
  }
  .btn.approve.svelte-e3x5fl:hover { background: rgba(34, 197, 94, 0.32); }
  .btn.deny.svelte-e3x5fl {
    background: var(--status-error-bg, rgba(239, 68, 68, 0.16));
    border-color: rgba(239, 68, 68, 0.4);
  }
  .btn.deny.svelte-e3x5fl:hover { background: rgba(239, 68, 68, 0.28); }


  /* ── Backdrop ── */
  .dialog-backdrop.svelte-inuu06 {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 200);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  /* ── Popup ── */
  .dialog-popup.svelte-inuu06 {
    display: flex;
    flex-direction: column;
    width: 520px;
    max-width: 90vw;
    max-height: 80vh;
    border-radius: 14px;
    border: 1px solid var(--glass-border);
    background: var(--dropdown-bg);
    backdrop-filter: var(--dropdown-blur);
    -webkit-backdrop-filter: var(--dropdown-blur);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
    animation: svelte-inuu06-popup-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
  }

  @keyframes svelte-inuu06-popup-in {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
  }

  /* ── Header ── */
  .dialog-header.svelte-inuu06 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
  }

  .dialog-title.svelte-inuu06 {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
  }

  .close-btn.svelte-inuu06 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
  }

  .close-btn.svelte-inuu06:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
  }

  /* ── Tabs ── */
  .dialog-tabs.svelte-inuu06 {
    display: flex;
    gap: 0;
    padding: 0 16px;
    border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
  }

  .tab-btn.svelte-inuu06 {
    padding: 8px 16px;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    transition: color 0.15s, border-color 0.15s;
  }

  .tab-btn.svelte-inuu06:hover {
    color: var(--text-secondary);
  }

  .tab-btn.active.svelte-inuu06 {
    color: var(--text-primary);
    border-bottom-color: var(--accent-primary);
  }

  /* ── Content ── */
  .dialog-content.svelte-inuu06 {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* ── Error banner ── */
  .error-banner.svelte-inuu06 {
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--status-error-bg, rgba(239, 68, 68, 0.15));
    color: var(--accent-red);
    font-size: 11px;
    font-weight: 500;
    border: 1px solid rgba(239, 68, 68, 0.2);
  }

  /* ── Form elements ── */
  .form-group.svelte-inuu06 {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .form-row.svelte-inuu06 {
    display: flex;
    gap: 12px;
  }

  .flex-1.svelte-inuu06 {
    flex: 1;
  }

  .form-label.svelte-inuu06 {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }

  .required.svelte-inuu06 {
    color: var(--accent-red);
  }

  .form-input.svelte-inuu06,
  .form-textarea.svelte-inuu06,
  .form-select.svelte-inuu06 {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    background: var(--glass-hover, rgba(255, 255, 255, 0.03));
    color: var(--text-primary);
    font-size: 12px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
  }

  .form-input.svelte-inuu06:focus,
  .form-textarea.svelte-inuu06:focus,
  .form-select.svelte-inuu06:focus {
    border-color: var(--accent-primary);
  }

  .model-readout.svelte-inuu06 {
    padding: 8px 10px;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    background: var(--glass-hover, rgba(255, 255, 255, 0.03));
    color: var(--text-primary);
    font-size: 12px;
    box-sizing: border-box;
  }

  .model-readout-hint.svelte-inuu06 {
    color: var(--text-muted);
    opacity: 0.7;
    margin-left: 6px;
  }

  .form-input.svelte-inuu06::placeholder,
  .form-textarea.svelte-inuu06::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
  }

  .form-textarea.svelte-inuu06 {
    resize: vertical;
    min-height: 60px;
    line-height: 1.5;
  }

  .form-select.svelte-inuu06 {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A8477' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
  }

  .form-select.svelte-inuu06 option:where(.svelte-inuu06) {
    background: var(--dropdown-bg);
    color: var(--text-secondary);
  }

  .compact.svelte-inuu06 {
    padding: 6px 8px;
    font-size: 11px;
  }

  .form-textarea.compact.svelte-inuu06 {
    min-height: 40px;
  }

  /* ── Team agents list ── */
  .team-agents-list.svelte-inuu06 {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
  }

  .team-agent-row.svelte-inuu06 {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px;
    border-radius: 8px;
    background: var(--glass-hover, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--glass-border);
  }

  .row-number.svelte-inuu06 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--white-10, rgba(255, 255, 255, 0.1));
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 600;
    flex-shrink: 0;
    margin-top: 4px;
  }

  .row-fields.svelte-inuu06 {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }

  .remove-btn.svelte-inuu06 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 4px;
    transition: background 0.15s, color 0.15s;
  }

  .remove-btn.svelte-inuu06:hover:not(:disabled) {
    background: var(--status-error-bg, rgba(239, 68, 68, 0.15));
    color: var(--accent-red);
  }

  .remove-btn.svelte-inuu06:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }

  /* ── Add agent button ── */
  .add-agent-btn.svelte-inuu06 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px dashed var(--glass-border);
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 11px;
    font-family: inherit;
    transition: border-color 0.15s, color 0.15s;
  }

  .add-agent-btn.svelte-inuu06:hover:not(:disabled) {
    border-color: var(--glass-border-hover, rgba(255, 255, 255, 0.15));
    color: var(--text-secondary);
  }

  .add-agent-btn.svelte-inuu06:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  /* ── Footer ── */
  .dialog-footer.svelte-inuu06 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--glass-border);
    flex-shrink: 0;
  }

  .btn.svelte-inuu06 {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
  }

  .btn.svelte-inuu06:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

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

  .btn-secondary.svelte-inuu06:hover:not(:disabled) {
    background: var(--glass-hover, rgba(255, 255, 255, 0.04));
  }

  .btn-primary.svelte-inuu06 {
    background: var(--accent-primary);
    color: var(--text-primary);
    border-color: var(--accent-primary);
  }

  .btn-primary.svelte-inuu06:hover:not(:disabled) {
    opacity: 0.9;
  }

  .btn-spinner.svelte-inuu06 {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: svelte-inuu06-spin 0.6s linear infinite;
  }

  @keyframes svelte-inuu06-spin {
    to { transform: rotate(360deg); }
  }

  /* ── Decomposition panel ──
     Renders the LLM-produced breakdown after a successful standalone spawn.
     Uses the same surface tokens as the rest of the dialog so the panel
     reads as a continuation of the form, not a separate modal. */
  .decomposition-panel.svelte-inuu06 {
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
    border-radius: 8px;
    margin: 16px;
    padding: 14px 16px 12px;
    background: rgba(255, 255, 255, 0.03);
    max-height: 50vh;
    overflow-y: auto;
  }

  .decomposition-header.svelte-inuu06 {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
  }

  .decomposition-icon.svelte-inuu06 {
    font-size: 18px;
    color: var(--accent, #60a5fa);
    line-height: 1.2;
  }

  .decomposition-title.svelte-inuu06 {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .decomposition-title.svelte-inuu06 strong:where(.svelte-inuu06) {
    font-size: 14px;
  }
  .decomposition-sub.svelte-inuu06 {
    font-size: 11px;
    color: var(--text-muted, rgba(255, 255, 255, 0.55));
  }

  .btn-close.svelte-inuu06 {
    background: transparent;
    border: none;
    color: var(--text-muted, rgba(255, 255, 255, 0.55));
    cursor: pointer;
    font-size: 16px;
    padding: 0 4px;
    line-height: 1;
  }
  .btn-close.svelte-inuu06:hover {
    color: var(--text-primary, rgba(255, 255, 255, 0.9));
  }

  .decomposition-list.svelte-inuu06 {
    list-style: none;
    padding: 0;
    margin: 8px 0 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .decomposition-row.svelte-inuu06 {
    background: var(--surface-secondary, #1a1a2e);
    border: 1px solid var(--border-color, #2a2a3e);
    border-radius: 6px;
    padding: 8px 10px;
    border-left: 3px solid var(--accent, #60a5fa);
  }

  .decomposition-row-header.svelte-inuu06 {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
  }
  .row-number.svelte-inuu06 {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 11px;
    color: var(--accent, #60a5fa);
    background: rgba(96, 165, 250, 0.12);
    border-radius: 3px;
    padding: 1px 6px;
    min-width: 22px;
    text-align: center;
  }
  .row-subject.svelte-inuu06 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #e5e5e5);
    flex: 1;
  }
  .decomposition-row-body.svelte-inuu06 {
    font-size: 12px;
    color: var(--text-secondary, #888);
    line-height: 1.45;
    margin-left: 30px;
  }
  .decomposition-criteria.svelte-inuu06 {
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-secondary, #888);
    font-style: italic;
  }
  .criteria-label.svelte-inuu06 {
    font-style: normal;
    color: var(--accent, #60a5fa);
    margin-right: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 10px;
    font-weight: 600;
  }

  .decomposition-footer.svelte-inuu06 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .decomposition-hint.svelte-inuu06 {
    font-size: 11px;
    color: var(--text-muted, rgba(255, 255, 255, 0.55));
  }

  /* ── Auto-decompose toggle styling ── */
  .form-row--inline.svelte-inuu06 { padding-top: 0; }
  .checkbox-label.svelte-inuu06 {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary, #e5e5e5);
  }
  .checkbox-label.svelte-inuu06 input[type="checkbox"]:where(.svelte-inuu06) {
    margin-top: 3px;
    accent-color: var(--accent, #60a5fa);
  }
  .checkbox-text.svelte-inuu06 {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .checkbox-hint.svelte-inuu06 {
    font-size: 11px;
    color: var(--text-muted, rgba(255, 255, 255, 0.55));
    font-weight: 400;
  }


  .notification.svelte-ok5nms {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    border: 1px solid var(--glass-border);
    background: var(--dropdown-bg);
    backdrop-filter: var(--dropdown-blur);
    -webkit-backdrop-filter: var(--dropdown-blur);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: auto;
    min-width: 260px;
    max-width: 320px;
  }

  .notification.visible.svelte-ok5nms {
    opacity: 1;
    transform: translateX(0);
  }

  .notif-content.svelte-ok5nms {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .notif-header.svelte-ok5nms {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }

  .notif-icon.svelte-ok5nms {
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
  }

  .notif-name.svelte-ok5nms {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
  }

  .notif-status.svelte-ok5nms {
    font-size: 10px;
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .notif-meta.svelte-ok5nms {
    font-size: 10px;
    color: var(--text-muted);
  }

  .notif-actions.svelte-ok5nms {
    display: flex;
    gap: 6px;
    margin-top: 2px;
  }

  .notif-btn.svelte-ok5nms {
    padding: 4px 10px;
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
  }

  .notif-btn.svelte-ok5nms:hover {
    background: var(--glass-hover, rgba(255, 255, 255, 0.04));
    color: var(--text-primary);
  }

  .view-btn.svelte-ok5nms {
    border-color: var(--accent-primary);
    color: var(--text-primary);
  }

  .view-btn.svelte-ok5nms:hover {
    background: var(--accent-primary-glow);
  }


  .agent-card.svelte-12q36uk {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--glass-hover, rgba(255, 255, 255, 0.03));
    border: 1px solid transparent;
    margin: 2px 4px;
    min-width: 0;
    overflow: hidden;
    cursor: pointer;
    width: calc(100% - 8px);
    text-align: left;
    font-family: inherit;
    color: inherit;
    transition: background 0.15s, border-color 0.15s;
  }

  .agent-card.svelte-12q36uk:hover {
    background: var(--glass-hover, rgba(255, 255, 255, 0.06));
    border-color: var(--glass-border);
  }

  .agent-card.inactive.svelte-12q36uk {
    opacity: 0.6;
  }

  .dismiss-btn.svelte-12q36uk {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
    padding: 0 2px;
    margin-left: 4px;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
    flex-shrink: 0;
    line-height: 1;
  }

  .agent-card.svelte-12q36uk:hover .dismiss-btn:where(.svelte-12q36uk) {
    opacity: 0.6;
  }

  .dismiss-btn.svelte-12q36uk:hover {
    opacity: 1 !important;
    color: var(--accent-red, #ef4444);
  }

  .dismiss-btn.svelte-12q36uk:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }

  .agent-header.svelte-12q36uk {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }

  .status-dot.svelte-12q36uk {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .agent-name.svelte-12q36uk {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex-shrink: 1;
  }

  .agent-badge.svelte-12q36uk {
    font-size: 10px;
    font-weight: 500;
    margin-left: auto;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .agent-task.svelte-12q36uk {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.4;
    word-break: break-word;
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .agent-activity.svelte-12q36uk {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.4;
    word-break: break-word;
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .agent-meta.svelte-12q36uk {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0.7;
    flex-wrap: wrap;
  }

  .meta-sep.svelte-12q36uk {
    opacity: 0.3;
  }

  .team-badge.svelte-12q36uk {
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
    font-weight: 500;
  }


  .detail-panel.svelte-1gppjx3 {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    min-height: 0;
  }

  /* ── Header ── */
  .detail-header.svelte-1gppjx3 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px;
    border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
  }

  .back-btn.svelte-1gppjx3 {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 11px;
    font-family: inherit;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
  }

  .back-btn.svelte-1gppjx3:hover {
    background: var(--glass-hover, rgba(255, 255, 255, 0.04));
    color: var(--text-primary);
  }

  .title-row.svelte-1gppjx3 {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
  }

  .status-dot.svelte-1gppjx3 {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .agent-name.svelte-1gppjx3 {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  .status-badge.svelte-1gppjx3 {
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* ── Scroll ── */
  .detail-scroll.svelte-1gppjx3 {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* ── Sections ── */
  .detail-section.svelte-1gppjx3 {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .section-label.svelte-1gppjx3 {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
  }

  .task-text.svelte-1gppjx3 {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
    word-break: break-word;
    overflow-wrap: break-word;
    padding: 8px;
    border-radius: 8px;
    background: var(--glass-hover, rgba(255, 255, 255, 0.03));
  }

  .activity-text.svelte-1gppjx3 {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* ── Stats grid ── */
  .stats-grid.svelte-1gppjx3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
  }

  .stat-item.svelte-1gppjx3 {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 8px;
    border-radius: 6px;
    background: var(--glass-hover, rgba(255, 255, 255, 0.03));
  }

  .stat-label.svelte-1gppjx3 {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-muted);
  }

  .stat-value.svelte-1gppjx3 {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
  }

  /* ── Action Log ── */
  .log-list.svelte-1gppjx3 {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 250px;
    overflow-y: auto;
  }

  .log-entry.svelte-1gppjx3 {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 11px;
    line-height: 1.4;
    min-width: 0;
  }

  .log-entry.svelte-1gppjx3:hover {
    background: var(--glass-hover, rgba(255, 255, 255, 0.02));
  }

  .log-icon.svelte-1gppjx3 {
    flex-shrink: 0;
    font-size: 10px;
    width: 14px;
    text-align: center;
    line-height: 1.5;
  }

  .log-time.svelte-1gppjx3 {
    flex-shrink: 0;
    color: var(--text-muted);
    opacity: 0.6;
    font-size: 10px;
    font-family: var(--font-mono);
  }

  .log-desc.svelte-1gppjx3 {
    color: var(--text-secondary);
    word-break: break-word;
    overflow-wrap: break-word;
    min-width: 0;
  }

  /* ── Result ── */
  .result-text.svelte-1gppjx3 {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.5;
    word-break: break-word;
    overflow-wrap: break-word;
    padding: 8px;
    border-radius: 8px;
    background: var(--glass-hover, rgba(255, 255, 255, 0.03));
    max-height: 200px;
    overflow-y: auto;
    white-space: pre-wrap;
    font-family: var(--font-mono);
  }

  /* ── Abort ── */
  .abort-section.svelte-1gppjx3 {
    padding-top: 4px;
  }

  .abort-btn.svelte-1gppjx3 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    background: var(--status-error-bg, rgba(239, 68, 68, 0.15));
    color: var(--accent-red);
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
  }

  .abort-btn.svelte-1gppjx3:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.25);
  }

  .abort-btn.svelte-1gppjx3:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .btn-spinner.svelte-1gppjx3 {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(239, 68, 68, 0.3);
    border-top-color: var(--accent-red);
    border-radius: 50%;
    animation: svelte-1gppjx3-spin 0.6s linear infinite;
  }

  @keyframes svelte-1gppjx3-spin {
    to { transform: rotate(360deg); }
  }


  .entry-row.svelte-qz7xjn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 6px;
    cursor: pointer;
    gap: 8px;
    border-radius: 6px;
    transition: color 0.15s;
  }

  .entry-row.svelte-qz7xjn:hover .heading-text:where(.svelte-qz7xjn) {
    color: var(--text-primary);
  }

  .entry-meta.svelte-qz7xjn {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
  }

  .type-dot.svelte-qz7xjn {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .heading-text.svelte-qz7xjn {
    font-size: 12px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.15s;
  }

  .age.svelte-qz7xjn {
    font-size: 10px;
    color: var(--text-muted);
    flex-shrink: 0;
  }


  .inspector.svelte-gyeytt {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 8px;
    height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(56, 189, 248, 0.15) transparent;
  }

  .inspector.svelte-gyeytt::-webkit-scrollbar { width: 3px; }
  .inspector.svelte-gyeytt::-webkit-scrollbar-track { background: transparent; }
  .inspector.svelte-gyeytt::-webkit-scrollbar-thumb { background: rgba(56, 189, 248, 0.15); border-radius: 3px; }

  /* ── Header ── */
  .insp-header.svelte-gyeytt {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4px;
  }

  .insp-title-row.svelte-gyeytt {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
  }

  .insp-dot.svelte-gyeytt {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .insp-name.svelte-gyeytt {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .insp-close.svelte-gyeytt {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    border-radius: 4px;
    flex-shrink: 0;
    transition: all 0.15s;
  }

  .insp-close.svelte-gyeytt:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
  }

  /* ── Meta ── */
  .insp-meta.svelte-gyeytt {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
  }

  .meta-badge.svelte-gyeytt {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(56, 189, 248, 0.06);
    border: 1px solid rgba(56, 189, 248, 0.1);
    font-size: 8px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }

  .meta-badge.tier-hot.svelte-gyeytt { color: #34d399; border-color: rgba(52, 211, 153, 0.2); background: rgba(52, 211, 153, 0.06); }
  .meta-badge.tier-warm.svelte-gyeytt { color: #fbbf24; border-color: rgba(251, 191, 36, 0.2); background: rgba(251, 191, 36, 0.06); }
  .meta-badge.tier-cold.svelte-gyeytt { color: #94a3b8; border-color: rgba(148, 163, 184, 0.15); background: rgba(148, 163, 184, 0.06); }

  /* ── Stats ── */
  .insp-stats.svelte-gyeytt {
    display: flex;
    gap: 10px;
    padding: 4px 0;
    border-top: 1px solid var(--glass-border);
    border-bottom: 1px solid var(--glass-border);
  }

  .stat-item.svelte-gyeytt {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  .stat-value.svelte-gyeytt {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
  }

  .stat-label.svelte-gyeytt {
    font-size: 8px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }

  /* ── Dates ── */
  .insp-dates.svelte-gyeytt {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  .date-label.svelte-gyeytt {
    font-size: 8px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }

  .date-value.svelte-gyeytt {
    font-size: 9px;
    color: var(--text-secondary);
  }

  /* ── Section ── */
  .insp-section.svelte-gyeytt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
    min-height: 0;
  }

  .section-label.svelte-gyeytt {
    font-size: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    flex-shrink: 0;
  }

  .label-count.svelte-gyeytt {
    font-weight: 400;
    opacity: 0.4;
  }

  .section-entities.svelte-gyeytt {
    padding-top: 6px;
    border-top: 1px solid rgba(56, 189, 248, 0.08);
  }

  .section-tags.svelte-gyeytt {
    padding-top: 6px;
    border-top: 1px solid rgba(56, 189, 248, 0.08);
  }

  /* ── Connected list ── */
  .connected-list.svelte-gyeytt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    flex: 1;
    max-height: 200px;
  }

  .connected-item.svelte-gyeytt {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 4px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 9px;
    font-family: inherit;
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.15s;
    text-align: left;
    width: 100%;
    overflow: hidden;
  }

  .connected-item.svelte-gyeytt:hover {
    color: var(--text-primary);
    background: rgba(56, 189, 248, 0.06);
  }

  .conn-dot.svelte-gyeytt {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .conn-name.svelte-gyeytt {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .conn-type.svelte-gyeytt {
    font-size: 7px;
    color: var(--text-muted);
    opacity: 0.4;
    flex-shrink: 0;
  }

  /* ═══ Overview ═══ */

  .overview-header.svelte-gyeytt {
    display: flex;
    align-items: center;
    gap: 5px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(56, 189, 248, 0.1);
  }

  .overview-icon.svelte-gyeytt {
    color: #38bdf8;
    opacity: 0.5;
  }

  .overview-title.svelte-gyeytt {
    font-size: 10px;
    font-weight: 600;
    color: #38bdf8;
    letter-spacing: 0.3px;
  }

  .overview-stats.svelte-gyeytt {
    display: flex;
    gap: 10px;
    padding: 4px 0;
  }

  .ov-stat.svelte-gyeytt {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  .ov-value.svelte-gyeytt {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
  }

  .ov-label.svelte-gyeytt {
    font-size: 8px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }

  /* ── Hub list ── */
  .hub-list.svelte-gyeytt {
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-height: 160px;
    overflow-y: auto;
  }

  .hub-item.svelte-gyeytt {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 3px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 9px;
    font-family: inherit;
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.15s;
    text-align: left;
    width: 100%;
  }

  .hub-item.svelte-gyeytt:hover {
    color: var(--text-primary);
    background: rgba(56, 189, 248, 0.06);
  }

  .hub-dot.svelte-gyeytt {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .hub-name.svelte-gyeytt {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hub-count.svelte-gyeytt {
    font-size: 8px;
    color: var(--text-muted);
    opacity: 0.4;
    flex-shrink: 0;
  }

  /* ── Entity list ── */
  .entity-list.svelte-gyeytt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
    max-height: 200px;
    overflow-y: auto;
  }

  .entity-item.svelte-gyeytt {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 4px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 9px;
    font-family: inherit;
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.15s;
    text-align: left;
    width: 100%;
    overflow: hidden;
  }

  .entity-item.svelte-gyeytt:hover {
    color: var(--text-primary);
    background: rgba(56, 189, 248, 0.06);
  }

  .entity-dot.svelte-gyeytt {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .entity-name.svelte-gyeytt {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .entity-mentions.svelte-gyeytt {
    font-size: 8px;
    color: var(--text-muted);
    opacity: 0.4;
    flex-shrink: 0;
  }

  .more-hint.svelte-gyeytt {
    font-size: 8px;
    color: var(--text-muted);
    opacity: 0.3;
    padding: 2px 3px;
  }

  /* ── Tag cloud ── */
  .tag-cloud.svelte-gyeytt {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-top: 4px;
    max-height: 120px;
    overflow-y: auto;
  }

  .tag-chip.svelte-gyeytt {
    padding: 1px 5px;
    border: 1px solid rgba(103, 232, 249, 0.15);
    border-radius: 3px;
    background: rgba(103, 232, 249, 0.04);
    color: #67e8f9;
    font-size: 8px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
  }

  .tag-chip.svelte-gyeytt:hover {
    color: #22d3ee;
    border-color: rgba(103, 232, 249, 0.3);
    background: rgba(103, 232, 249, 0.08);
  }

  .empty-hint.svelte-gyeytt {
    font-size: 9px;
    color: var(--text-muted);
    opacity: 0.3;
    text-align: center;
    padding: 12px 0;
  }


  .graph-controls.svelte-1hydojy {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-bottom: 1px solid rgba(56, 189, 248, 0.06);
    flex-shrink: 0;
  }

  .search-box.svelte-1hydojy {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
    padding: 3px 7px;
    border-radius: 5px;
    border: 1px solid rgba(56, 189, 248, 0.1);
    background: rgba(56, 189, 248, 0.03);
    transition: border-color 0.15s;
  }

  .search-box.svelte-1hydojy:focus-within {
    border-color: rgba(56, 189, 248, 0.25);
  }

  .search-icon.svelte-1hydojy {
    color: #38bdf8;
    opacity: 0.4;
    flex-shrink: 0;
  }

  .search-input.svelte-1hydojy {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 10px;
    font-family: inherit;
    outline: none;
    min-width: 0;
    padding: 2px 0;
  }

  .search-input.svelte-1hydojy::placeholder {
    color: var(--text-muted);
    opacity: 0.4;
  }

  .search-clear.svelte-1hydojy {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    border-radius: 3px;
    flex-shrink: 0;
  }

  .search-clear.svelte-1hydojy:hover {
    color: var(--text-primary);
    background: rgba(56, 189, 248, 0.1);
  }

  .zoom-pills.svelte-1hydojy {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
  }

  .zoom-pill.svelte-1hydojy {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 3px 7px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    font-size: 9px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
  }

  .zoom-pill.svelte-1hydojy:hover {
    color: var(--text-secondary);
    background: rgba(56, 189, 248, 0.04);
  }

  .zoom-pill.active.svelte-1hydojy {
    color: #38bdf8;
    border-color: rgba(56, 189, 248, 0.2);
    background: rgba(56, 189, 248, 0.08);
  }

  .action-buttons.svelte-1hydojy {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
    margin-left: auto;
  }

  .action-btn.svelte-1hydojy {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    transition: all 0.15s;
  }

  .action-btn.svelte-1hydojy:hover {
    color: var(--text-secondary);
    background: rgba(56, 189, 248, 0.04);
  }

  .action-btn.active.svelte-1hydojy {
    color: #38bdf8;
    border-color: rgba(56, 189, 248, 0.2);
    background: rgba(56, 189, 248, 0.08);
  }


  .graph-container.svelte-1cmee6l {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: transparent;
    border: 1px solid rgba(56, 189, 248, 0.06);
  }

  .graph-svg.svelte-1cmee6l {
    display: block;
    cursor: grab;
  }

  .graph-svg.svelte-1cmee6l:active {
    cursor: grabbing;
  }

  .node-tooltip.svelte-1cmee6l {
    position: absolute;
    pointer-events: none;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 6px;
    background: rgba(10, 10, 14, 0.94);
    border: 1px solid rgba(56, 189, 248, 0.2);
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 12px rgba(56, 189, 248, 0.08);
    white-space: nowrap;
    animation: svelte-1cmee6l-tooltip-in 0.15s ease-out;
  }

  .tooltip-dot.svelte-1cmee6l {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .tooltip-label.svelte-1cmee6l {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
  }

  .tooltip-type.svelte-1cmee6l {
    font-size: 9px;
    color: #38bdf8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.7;
  }

  @keyframes svelte-1cmee6l-tooltip-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .graph-stats.svelte-1cmee6l {
    position: absolute;
    bottom: 8px;
    left: 10px;
    font-size: 9px;
    color: var(--text-muted);
    opacity: 0.4;
    pointer-events: none;
    display: flex;
    gap: 4px;
    align-items: center;
  }

  .stat-sep.svelte-1cmee6l {
    opacity: 0.3;
  }


  /* sr-only: visually hide but keep available to assistive tech
     (used by the filter-status aria-live region above). */
  .sr-only.svelte-1ej736j {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .graph-filters.svelte-1ej736j {
    padding: 6px 8px;
    border-bottom: 1px solid rgba(56, 189, 248, 0.06);
    background: rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
  }

  .filters-header.svelte-1ej736j {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
  }

  .filters-title.svelte-1ej736j {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
  }

  .clear-btn.svelte-1ej736j {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 9px;
    font-family: inherit;
    cursor: pointer;
    padding: 2px 5px;
    border-radius: 3px;
    transition: all 0.15s;
  }

  .clear-btn.svelte-1ej736j:hover {
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.06);
  }

  .filter-section.svelte-1ej736j {
    margin-bottom: 6px;
  }

  .filter-section.svelte-1ej736j:last-child {
    margin-bottom: 0;
  }

  .filter-label.svelte-1ej736j {
    font-size: 9px;
    color: var(--text-muted);
    opacity: 0.6;
    display: block;
    margin-bottom: 3px;
  }

  .type-toggles.svelte-1ej736j {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
  }

  .type-toggle.svelte-1ej736j {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    color: var(--text-muted);
    font-size: 9px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
  }

  .type-toggle.svelte-1ej736j:hover {
    color: var(--text-secondary);
    background: rgba(56, 189, 248, 0.04);
  }

  .type-toggle.active.svelte-1ej736j {
    color: var(--text-primary);
    border-color: var(--type-color);
    background: rgba(56, 189, 248, 0.06);
  }

  .type-dot.svelte-1ej736j {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .type-name.svelte-1ej736j {
    white-space: nowrap;
  }

  .toggle-row.svelte-1ej736j {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
  }

  .toggle-label.svelte-1ej736j {
    font-size: 9px;
    color: var(--text-muted);
    opacity: 0.6;
  }

  /* Visually hidden but accessible checkbox: gives the <label> a real control
     and removes the need for click/keyboard handlers on the visual toggle. */
  .toggle-switch-input.svelte-1ej736j {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    /* sv-153: clip-path:inset(50%) isn't supported on older browsers;
       clip:rect + width:1px + height:1px shrinks the input visually but
       without z-index it can still overlay the visible .toggle-switch
       span and intercept pointer events. Force z-index 0 so the visible
       toggle (which gets z-index:1 via its own rules) stays on top. */
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    z-index: 0;
  }

  .toggle-switch.svelte-1ej736j {
    width: 26px;
    height: 14px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(56, 189, 248, 0.1);
    position: relative;
    transition: all 0.2s;
    cursor: pointer;
  }

  .toggle-switch.on.svelte-1ej736j {
    background: rgba(56, 189, 248, 0.15);
    border-color: rgba(56, 189, 248, 0.3);
  }

  .toggle-thumb.svelte-1ej736j {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: transform 0.2s, background 0.2s;
  }

  .toggle-switch.on.svelte-1ej736j .toggle-thumb:where(.svelte-1ej736j) {
    transform: translateX(12px);
    background: #38bdf8;
  }

  .slider-row.svelte-1ej736j {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3px;
  }

  .slider-value.svelte-1ej736j {
    font-size: 9px;
    color: #38bdf8;
    font-weight: 600;
  }

  .slider.svelte-1ej736j {
    width: 100%;
    height: 3px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(56, 189, 248, 0.1);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
  }

  .slider.svelte-1ej736j::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #38bdf8;
    cursor: pointer;
    transition: background 0.15s;
  }

  .slider.svelte-1ej736j::-webkit-slider-thumb:hover {
    background: #7dd3fc;
  }

  .slider.svelte-1ej736j::-moz-range-thumb {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #38bdf8;
    cursor: pointer;
    border: none;
  }


  .subagent-event-part.svelte-vg2zlv {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    margin: 2px 0;
    background: var(--bg-tertiary, rgba(255,255,255,0.03));
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-secondary);
  }

  .subagent-event-part.subagent-status-error.svelte-vg2zlv {
    border-color: rgba(239, 68, 68, 0.4);
  }

  .subagent-icon.svelte-vg2zlv {
    color: var(--text-muted);
  }

  .subagent-label.svelte-vg2zlv {
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .subagent-name.svelte-vg2zlv {
    font-weight: 600;
    color: var(--text-primary);
  }

  .subagent-status.svelte-vg2zlv {
    font-family: "SF Mono", "Monaco", "Cascadia Code", monospace;
    font-size: 11px;
    color: var(--text-muted);
    padding: 0 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
  }

  .subagent-summary.svelte-vg2zlv {
    color: var(--text-muted);
    font-style: italic;
  }


  .text-part.svelte-1dzugtl {
    /* Inherit font from the parent .message-content so size/line-height match
       the existing message bubble. This component is a thin wrapper. */
    word-wrap: break-word;
    overflow-wrap: anywhere;
  }

  /* Keep inline code readable — pick up the user's accent color so inline
     code chips stay consistent with the bold/<strong> highlights in the
     same message (Message.svelte:592). Mirrors the rule above; both must
     change together if either is tuned. */
  .text-part.svelte-1dzugtl code {
    background: color-mix(in srgb, var(--accent-primary) 14%, transparent);
    color: var(--accent-primary);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
    font-family: "SF Mono", "Monaco", "Cascadia Code", monospace;
  }


  /* .thinking-body is defined as :global(.thinking-body) in
     ReasoningGroup.svelte's <style> block (it compiles into the loaded
     svelte.css) and shared between ReasoningPart.svelte (per-part
     variant in the AI SDK parts pipeline) and ReasoningGroup.svelte
     (streaming drawer). Adding the
     class here so both surfaces get the same italic + monospace + left-
     border treatment without divergent styling. The component-local
     .reasoning-header / .caret / .reasoning-label below stay per-component
     because they differ from the new header row in ReasoningGroup. */
  .reasoning-part.svelte-o6bivm {
    margin: 4px 0;
  }

  .reasoning-header.svelte-o6bivm {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 0;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
  }

  .reasoning-header.svelte-o6bivm:hover {
    color: var(--text-secondary);
  }

  .caret.svelte-o6bivm {
    display: inline-block;
    width: 12px;
    text-align: center;
  }


  .command-result-part.svelte-kkzs2m {
    margin: 6px 0;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
    border-radius: 8px;
    background: var(--bg-secondary, rgba(255, 255, 255, 0.03));
    overflow: hidden;
  }

  .command-result-part.command-error.svelte-kkzs2m {
    border-color: rgba(239, 68, 68, 0.4);
  }

  .command-header.svelte-kkzs2m {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 10px;
    border: none;
    background: none;
    color: var(--text-primary);
    font-size: 12px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
  }

  .command-header.svelte-kkzs2m:hover {
    background: rgba(255, 255, 255, 0.04);
  }

  .command-icon.svelte-kkzs2m {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    color: var(--accent-green, #22c55e);
  }

  .command-error.svelte-kkzs2m .command-icon:where(.svelte-kkzs2m) {
    color: var(--accent-red, #ef4444);
  }

  .command-name.svelte-kkzs2m {
    flex: 1;
    font-weight: 600;
    font-family: "SF Mono", "Monaco", "Cascadia Code", monospace;
  }

  .command-meta.svelte-kkzs2m {
    font-size: 11px;
    color: var(--text-muted);
  }

  .caret.svelte-kkzs2m {
    color: var(--text-muted);
  }

  .command-output.svelte-kkzs2m {
    border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.06));
    padding: 8px 12px;
  }

  .command-error-message.svelte-kkzs2m {
    color: var(--accent-red, #ef4444);
    font-size: 12px;
    margin-bottom: 6px;
  }

  .command-output-text.svelte-kkzs2m {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-family: "SF Mono", "Monaco", "Cascadia Code", monospace;
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
  }


  .governance-part.svelte-ycjwz4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0;
    padding: 6px 12px;
    border-left: 3px solid var(--accent-amber, #f97316);
    background: rgba(249, 115, 22, 0.08);
    border-radius: 0 6px 6px 0;
    font-size: 13px;
    color: var(--text-secondary);
  }

  .governance-user_override.svelte-ycjwz4 {
    border-left-color: var(--accent-green, #22c55e);
    background: rgba(34, 197, 94, 0.08);
  }

  .governance-rejection.svelte-ycjwz4 {
    border-left-color: var(--accent-red, #ef4444);
    background: rgba(239, 68, 68, 0.08);
  }

  .governance-circuit_breaker.svelte-ycjwz4 {
    border-left-color: var(--accent-amber, #f97316);
    background: rgba(249, 115, 22, 0.08);
  }

  .governance-compaction.svelte-ycjwz4 {
    border-left-color: var(--accent-blue, #3b82f6);
    background: rgba(59, 130, 246, 0.08);
  }

  .gov-icon.svelte-ycjwz4 {
    font-weight: bold;
    font-size: 14px;
  }

  .gov-message.svelte-ycjwz4 {
    flex: 1;
  }


  .image-part.svelte-1j8b61r {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 6px 0;
    max-width: 360px;
  }

  .image-anchor.svelte-1j8b61r {
    display: block;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12));
  }

  .image-thumb.svelte-1j8b61r {
    display: block;
    width: 100%;
    height: auto;
    max-height: 320px;
    object-fit: contain;
    background: var(--bg-tertiary);
  }

  .image-caption.svelte-1j8b61r {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
  }

  .image-source.svelte-1j8b61r {
    font-size: 11px;
    color: var(--text-muted);
    font-family: "SF Mono", "Monaco", "Cascadia Code", monospace;
  }

  .image-invalid.svelte-1j8b61r {
    font-size: 12px;
    color: var(--text-muted);
    padding: 6px 12px;
    background: rgba(239, 68, 68, 0.08);
    border-radius: 4px;
  }


  .graph-node.svelte-1qqf7do {
    transition: opacity 0.2s ease;
  }

  .node-circle.svelte-1qqf7do {
    transition: stroke-width 0.15s ease, opacity 0.2s ease;
  }

  .graph-node.svelte-1qqf7do:not(.dimmed):not(.highlighted):hover .node-circle:where(.svelte-1qqf7do) {
    stroke-width: 1.5;
    stroke: rgba(255, 255, 255, 0.7);
  }

  .graph-node.svelte-1qqf7do:not(.dimmed):not(.highlighted):hover .node-label:where(.svelte-1qqf7do) {
    opacity: 0.95 !important;
  }

  .highlighted.svelte-1qqf7do .node-circle:where(.svelte-1qqf7do) {
    stroke: rgba(255, 255, 255, 0.8);
    stroke-width: 1.5;
  }

  .selected.svelte-1qqf7do .node-circle:where(.svelte-1qqf7do) {
    stroke: rgba(255, 255, 255, 0.95);
    stroke-width: 2;
  }

  .dragging.svelte-1qqf7do .node-circle:where(.svelte-1qqf7do) {
    stroke: rgba(255, 255, 255, 0.9);
    stroke-width: 1.8;
  }

  .dimmed.svelte-1qqf7do {
    pointer-events: none;
  }

  @keyframes svelte-1qqf7do-pulse-glow {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 0.65; }
  }

  .pulse-node.svelte-1qqf7do .node-circle:where(.svelte-1qqf7do) {
    animation: svelte-1qqf7do-pulse-glow 3s ease-in-out infinite;
  }


  .graph-edge.svelte-1ghhtlf {
    transition: opacity 0.2s ease, stroke-width 0.15s ease, stroke 0.2s ease;
    pointer-events: none;
  }