/* =====================================================
   Knowledge — production UI
   ===================================================== */

:root {
  --bg:           #f6f7fb;
  --surface:      #ffffff;
  --surface-2:    #f0f3f9;
  --border:       #e3e7ef;
  --border-soft:  #ecf0f6;
  --text:         #14181f;
  --text-muted:   #5b6373;
  --text-faint:   #8a91a3;
  --accent:       #4262ff;
  --accent-hover: #2f4ee0;
  --accent-soft:  #eef0ff;
  --success:      #1a8754;
  --warn:         #c0392b;
  --warn-soft:    #fdecec;
  --shadow-sm:    0 1px 2px rgba(20, 24, 31, 0.06);
  --shadow:       0 4px 12px rgba(20, 24, 31, 0.08);
  --radius:       12px;
  --radius-sm:    8px;
  --sidebar-w:    240px;
  --sidebar-cw:   60px;
}

/* reset-ish */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { height: 100%; }
body { min-height: 100%; }
/* Ensure the HTML5 [hidden] attribute always hides — author rules like
   `display: flex` on .drawer would otherwise override it, leaving the drawer
   stuck open even after JS sets element.hidden = true. */
[hidden] { display: none !important; }
body {
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  padding-left: var(--sidebar-w);
  transition: padding-left .18s ease;
}
body.sidebar-collapsed { padding-left: var(--sidebar-cw); }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent); }
code { font: 13px/1 ui-monospace, Menlo, Consolas, monospace; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
pre.codebox { background: #0d1220; color: #cfe1ff; padding: 14px 16px; border-radius: 8px; font: 12.5px/1.5 ui-monospace, Menlo, Consolas, monospace; overflow: auto; max-height: 380px; }

/* =====================================================
   SIDEBAR
   ===================================================== */
.sidebar {
  position: fixed; top: 0; left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  background: linear-gradient(180deg, #14181f 0%, #1a2030 100%);
  color: #cfd5e3;
  display: flex; flex-direction: column;
  padding: 18px 12px;
  overflow: hidden auto;
  z-index: 20;
  transition: width .18s ease;
}
.sidebar[data-collapsed="1"] { width: var(--sidebar-cw); }
.sidebar[data-collapsed="1"] .brand-name,
.sidebar[data-collapsed="1"] .side-tab span:not(.badge),
.sidebar[data-collapsed="1"] .side-foot { display: none; }

.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 6px 18px;
}
.brand-mark {
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, #4262ff, #7c5cff);
  color: #fff; font-weight: 800;
  display: grid; place-items: center; font-size: 16px;
}
.brand-name { font-weight: 600; color: #fff; letter-spacing: 0.2px; flex: 1; }
.brand-toggle {
  background: transparent; border: 0; color: #9aa2b8;
  width: 22px; height: 22px; border-radius: 6px; font-size: 16px; line-height: 1;
}
.brand-toggle:hover { background: rgba(255,255,255,0.08); color: #fff; }
.sidebar[data-collapsed="1"] .brand-toggle { transform: rotate(180deg); }

.side-nav { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; }
.side-tab {
  position: relative; /* anchor for the collapsed-mode notification dot */
  display: flex; align-items: center; gap: 12px;
  background: transparent; border: 0; color: #cfd5e3;
  padding: 10px 12px; border-radius: var(--radius-sm);
  text-align: left; font-size: 14px; font-weight: 500;
  /* Some nav items are <a> tags (Doc review links out to verifications.html
     rather than switching an in-page view). The default browser underline
     and accent-blue link colour read as broken against the rest of the
     sidebar buttons, so neutralize both. The .is-active rule below still
     wins for the highlighted tab. */
  text-decoration: none;
}
.side-tab:hover { background: rgba(255,255,255,0.05); color: #fff; text-decoration: none; }
.side-tab.is-active { background: rgba(66,98,255,0.16); color: #fff; }
.side-tab svg { flex: 0 0 18px; }
.badge {
  margin-left: auto;
  background: rgba(255,255,255,0.12); color: #fff;
  font-size: 11px; padding: 1px 7px; border-radius: 999px;
  min-width: 18px; text-align: center;
}
.side-tab.is-active .badge { background: var(--accent); }
.side-foot { color: #6e788e; font-size: 11.5px; padding: 8px 10px; }

/* ============================================================
   Collapsed sidebar — narrow rail (60px) with icon-only nav.
   Goal: every nav item reads as a single centered glyph; badges
   degrade to a small accent-coloured dot in the corner; the
   account row + popover keep working but the popover pops out
   to the right instead of trying to live inside the rail.
   ============================================================ */
.sidebar[data-collapsed="1"] .side-tab {
  justify-content: center;
  gap: 0;
  padding: 10px 0;
}
.sidebar[data-collapsed="1"] .side-tab .badge {
  position: absolute;
  top: 6px; right: 10px;
  width: 8px; height: 8px;
  min-width: 0; padding: 0;
  font-size: 0;
  line-height: 0;
  border-radius: 50%;
  background: var(--accent, #4262ff);
  color: transparent;
}
/* Hide the dot too when the badge is hidden (count=0). Without this the
   absolute-positioned dot leaks past [hidden]. */
.sidebar[data-collapsed="1"] .side-tab .badge[hidden] { display: none; }

.side-section { padding: 8px 10px 4px; }
.side-section-label { color: #8590ad; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
/* Recent threads: flow directly under nav and consume remaining sidebar height,
   scrolling internally when the list grows. Footer stays pinned at bottom. */
.side-threads {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.side-threads-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 4px; flex: 0 0 auto; }
.side-mini {
  background: rgba(255,255,255,0.06); color: #cfd5e3; border: 0;
  width: 22px; height: 22px; border-radius: 6px; font-size: 16px; line-height: 1;
}
.side-mini:hover { background: rgba(255,255,255,0.14); color: #fff; }
.side-threads-list { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.side-threads-empty { color: #6e788e; font-size: 12px; padding: 4px 8px; }
.side-thread {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; border-radius: 6px; cursor: pointer;
  font-size: 12.5px; color: #cfd5e3;
}
.side-thread:hover { background: rgba(255,255,255,0.05); color: #fff; }
.side-thread.is-active { background: rgba(66,98,255,0.20); color: #fff; }
.side-thread .thread-name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.side-thread .thread-actions { opacity: 0; display: inline-flex; gap: 2px; transition: opacity .12s; }
.side-thread:hover .thread-actions { opacity: 1; }
.side-thread .thread-actions button {
  background: transparent; border: 0; color: #9aa2b8;
  width: 18px; height: 18px; border-radius: 4px; font-size: 13px; line-height: 1; padding: 0;
}
.side-thread .thread-actions button:hover { background: rgba(255,255,255,0.10); color: #fff; }
.sidebar[data-collapsed="1"] .side-section { display: none; }

/* Current user block (just above the footer) */
.side-user {
  margin-top: 6px; padding: 8px 6px 4px;
  border-top: 1px solid rgba(255,255,255,0.06);
  position: relative; /* anchor for .side-user-menu */
}
.side-user-row {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  background: transparent; border: 0; color: inherit;
  padding: 6px 6px; margin: -6px -6px 0; /* expand hit area without shifting layout */
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: background 120ms ease;
}
.side-user-row:hover,
.side-user.is-menu-open .side-user-row { background: rgba(255,255,255,0.06); }
.side-user-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, #4262ff, #7c5cff); color: #fff;
  font-weight: 600; font-size: 12px;
  display: grid; place-items: center; flex: 0 0 28px;
}
.side-user-meta { flex: 1; min-width: 0; }
.side-user-name { color: #fff; font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-user-tenant { color: #8590ad; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-user-chevron {
  color: #8590ad; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  transition: transform 150ms ease;
}
.side-user.is-menu-open .side-user-chevron { transform: rotate(180deg); color: #fff; }
.sidebar[data-collapsed="1"] .side-user-meta,
.sidebar[data-collapsed="1"] .side-user-chevron { display: none; }

/* Collapsed-mode polish for the bottom of the sidebar. */
.sidebar[data-collapsed="1"] .brand {
  flex-direction: column; align-items: center; gap: 6px;
  padding: 8px 0 14px;
}
.sidebar[data-collapsed="1"] .side-user {
  padding: 8px 0 4px;
  /* When the sidebar is collapsed, .side-section (Recent threads) is
     `display: none`, which removes the flex stretcher that normally
     pushes .side-user to the bottom of the column. Without this rule
     the account avatar floats up under the last nav icon — which also
     makes the upward-opening popover appear in mid-air, well above the
     button that opened it. `margin-top: auto` re-creates the stretch
     so the avatar stays pinned to the bottom of the rail. */
  margin-top: auto;
}
.sidebar[data-collapsed="1"] .side-user-row {
  justify-content: center;
  padding: 6px 0;
  margin: 0;
}
/* The plan pill / Upgrade-link block doesn't fit in a 60px rail and
   reading "Pro" floating next to nothing else looks accidental. The
   plan is still reachable from the account popover (Upgrade plan +
   pricing badge inside) so hiding it here is a clean trade. */
.sidebar[data-collapsed="1"] .side-plan { display: none; }

/* Popover: when the rail is narrow, opening UP inside it leaves a
   48px-wide menu that gets clipped. Pop OUT to the right instead.
   We switch to `position: fixed` here because .sidebar has
   `overflow: hidden auto` — an absolutely-positioned menu anchored
   past the sidebar's right edge would be clipped by that overflow.
   `position: fixed` resolves against the viewport, so the menu can
   safely float over the main content. Anchored to the bottom of
   the viewport so it sits visually next to the account row. */
.sidebar[data-collapsed="1"] .side-user-menu {
  position: fixed;
  left: calc(var(--sidebar-cw) + 8px);
  right: auto;
  bottom: 16px;
  top: auto;
  min-width: 220px;
  max-width: 260px;
  z-index: 60;
}

/* Account popover menu — opens upward from the user row */
.side-user-menu {
  position: absolute;
  left: 6px; right: 6px;
  bottom: calc(100% - 4px);
  background: #161a23;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.35);
  z-index: 50;
  display: flex; flex-direction: column; gap: 1px;
}
.sum-header {
  padding: 8px 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 4px;
}
.sum-header-name  { color: #fff; font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sum-header-email { color: #8590ad; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sum-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  background: transparent; border: 0;
  color: #cbd2e0;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 13px;
  /* Some items in the popover are <a> tags (Help & docs links out to /help/).
     Strip the default link underline + colour so they read identically to
     the <button> items next to them. */
  text-decoration: none;
  cursor: pointer;
  text-align: left;
}
.sum-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
.sum-item svg   { flex: 0 0 16px; color: #8590ad; }
.sum-item:hover svg { color: #fff; }
.sum-item .badge {
  margin-left: auto;
  background: rgba(255,255,255,0.12); color: #fff;
  font-size: 11px; padding: 1px 7px; border-radius: 999px;
  min-width: 18px; text-align: center;
}
.sum-divider {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 4px 0;
}
.sum-item-danger          { color: #e98b8b; }
.sum-item-danger:hover    { background: rgba(255, 80, 80, 0.10); color: #fff; }
.sum-item-danger svg      { color: #e98b8b; }
.sum-item-danger:hover svg { color: #fff; }

/* Sign-in landing */
.auth-gate {
  position: fixed; inset: 0;
  background: linear-gradient(180deg, #f6f7fb 0%, #ecf0f6 100%);
  display: grid; place-items: center;
  z-index: 100; padding: 24px;
}
.auth-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 32px 28px; max-width: 420px; width: 100%;
  box-shadow: 0 12px 40px rgba(20,24,31,0.08);
  text-align: center;
}
.auth-brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; color: var(--text); font-size: 14px; margin-bottom: 12px;
}
.auth-card h1 { font-size: 20px; margin: 8px 0 6px; }
.auth-sub { color: var(--text-muted); font-size: 13.5px; margin: 0 0 20px; }
.auth-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px; font-weight: 600; text-decoration: none;
  border-radius: 10px;
}
.auth-foot { color: var(--text-faint); font-size: 12.5px; margin-top: 16px; }
/* Back-to-home escape hatch under the primary sign-in button. Discrete
   (text-button style, not a CTA) so it doesn't compete with "Sign in" —
   the goal is "available if needed", not "tempt users to bail." Only
   shown when the visitor arrived via ?from=landing. */
.auth-back {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px;
  color: var(--text-muted); font-size: 13px; font-weight: 500;
  text-decoration: none; padding: 6px 10px; border-radius: 8px;
}
.auth-back:hover { color: var(--text); background: var(--surface-2); }
.auth-back[hidden] { display: none; }
body.signed-out { padding-left: 0; }

/* Members table */
.members-card { padding: 18px; max-width: 1080px; }
.members-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.members-table th, .members-table td {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}
.members-table th { color: var(--text-faint); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.5px; }
.members-table td.muted { color: var(--text-faint); }
.members-table select { padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.pill-ok   { background: #e6f4ec; color: #1a8754; }
.pill-warn { background: #fdecec; color: #c0392b; }
.muted { color: var(--text-faint); }

/* =====================================================
   MAIN
   ===================================================== */
.main {
  padding: 32px 40px 80px;
  max-width: 1080px; width: 100%;
  margin: 0 auto;
}
.view-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 0 18px;
}
.view-head h2 { margin: 0; font-size: 20px; font-weight: 700; }
.view-actions { display: flex; gap: 8px; }

.empty {
  padding: 48px 24px;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  text-align: center;
}

.btn-primary {
  background: var(--accent); color: #fff; border: 0;
  padding: 9px 16px; border-radius: 8px; font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost {
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  padding: 7px 12px; border-radius: 8px; font-weight: 500;
}
.btn-ghost:hover { background: var(--surface-2); }
input[type="text"], input[type="password"], input[type="search"], input[type="number"], textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); transition: border-color .12s, box-shadow .12s;
}
input:focus, textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(66,98,255,.18); }
textarea { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13.5px; resize: vertical; }

/* =====================================================
   SEARCH HERO + CHAT DOCK
   ===================================================== */
:root { --dock-h: 124px; }

/* Search view fills the available height so the welcome hero can center
   and the history grows naturally below it; bottom padding leaves room
   for the fixed input dock so content never hides under it. */
.view[data-view="search"] {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 80px);
  padding-bottom: calc(var(--dock-h) + 24px);
}

.hero {
  text-align: center;
  padding: 32px 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.hero-title { margin: 0; font-size: 32px; font-weight: 700; letter-spacing: -0.4px; }
.hero-sub { color: var(--text-muted); margin: 0; font-size: 15px; max-width: 640px; }
.hero-suggestions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; max-width: 720px; }
.hero-suggestion {
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: 7px 14px; font-size: 13px; color: var(--text-muted); cursor: pointer;
}
.hero-suggestion:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
/* hide hero when an active thread has any messages */
body.is-conversing .hero { display: none; }

/* Sticky thread title bar at the top of the search view */
.thread-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--bg);
  margin: 0 -8px 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
  flex-wrap: wrap;
}
.thread-bar-meta { display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.thread-bar-meta svg { color: var(--accent); flex: 0 0 16px; }
.thread-bar-title { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-bar-count { color: var(--text-faint); font-size: 12.5px; }
.thread-bar-actions { display: inline-flex; gap: 4px; }
.thread-bar-actions button { padding: 4px 10px; font-size: 12.5px; }

/* Fixed bottom dock holding controls + input. Sits inside the main column
   (right of the sidebar) so it doesn't overlap the sidebar when expanded.
   z-index 15 sits ABOVE the main scroll content but BELOW the sidebar
   (z-index 20). This matters in collapsed-sidebar mode: the account
   popover extends out of the sidebar into the main content area, and at
   the old z-index of 25 the dock's opaque background gradient painted
   over the bottom of the popover ("Upgrade plan", "Sign out" hidden).
   Keeping the drawer-scrim at 25 still lets the scrim cover both the
   dock and the sidebar when a source-detail drawer is open. */
.search-dock {
  position: fixed;
  bottom: 0;
  left: var(--sidebar-w);
  right: 0;
  z-index: 15;
  background: linear-gradient(180deg, rgba(246,247,251,0) 0%, var(--bg) 30%, var(--bg) 100%);
  padding: 16px 24px 14px;
  display: flex; flex-direction: column; gap: 8px;
  transition: left .18s ease;
}
body.sidebar-collapsed .search-dock { left: var(--sidebar-cw); }
.search-dock > .dock-controls,
.search-dock > .search-form { max-width: 760px; margin: 0 auto; width: 100%; }
.dock-controls {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
/* Hide the dock unless we're on the Search view */
body:not([data-view="search"]) .search-dock { display: none; }

.search-form {
  position: relative; display: flex; align-items: center; gap: 8px;
  padding: 6px 6px 6px 14px;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 4px 16px rgba(20,24,31,0.08);
  transition: box-shadow .15s, border-color .15s;
}
.search-form:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(66,98,255,.16), 0 4px 16px rgba(20,24,31,0.08); }
.search-icon { color: var(--text-faint); flex: 0 0 20px; }
.search-form input {
  flex: 1; border: 0; outline: 0; background: transparent;
  padding: 12px 6px; font-size: 16px;
}
.search-form input:focus { box-shadow: none; }
#search-btn {
  background: var(--accent); color: #fff; border: 0;
  width: 38px; height: 38px; border-radius: 10px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 38px;
}
#search-btn:hover { background: var(--accent-hover); }
#search-btn:disabled { opacity: 0.6; cursor: progress; }

.search-controls {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  justify-content: center; margin: 14px auto 0; max-width: 720px;
}
/* Compact controls when inside the bottom dock */
.search-dock .dock-controls { font-size: 13px; }
.search-dock .seg-opt { padding: 5px 12px; font-size: 12.5px; }
.search-dock .scope-btn { padding: 6px 10px; font-size: 12.5px; }
.search-dock .ctrl-num input { width: 56px; padding: 5px 7px; font-size: 12.5px; }
.search-dock .ctrl-num { font-size: 12.5px; }
.search-dock .filter-chips .chip { font-size: 11.5px; padding: 3px 9px; }
.seg {
  display: inline-flex; padding: 3px; background: var(--surface-2);
  border-radius: 10px; border: 1px solid var(--border-soft);
}
.seg-opt {
  background: transparent; border: 0; padding: 6px 14px;
  border-radius: 7px; color: var(--text-muted); font-weight: 500;
}
.seg-opt.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.ctrl-num {
  display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted);
  font-size: 13px;
}
.ctrl-num input { width: 64px; padding: 6px 8px; }
.filter-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; max-width: 100%; }
.chip {
  background: var(--accent-soft); color: var(--accent); border: 0;
  padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
}
.chip.chip--project { background: rgba(124,92,255,0.12); color: #5a45cc; }
.chip button { background: transparent; border: 0; color: inherit; font-size: 14px; cursor: pointer; }

/* AI model picker */
.model-wrap { position: relative; display: inline-block; }
.model-btn {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border);
  padding: 6px 10px; border-radius: 8px;
  font-size: 12.5px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
  transition: border-color .12s, background .12s;
}
.model-btn:hover { background: var(--surface-2); }
.model-btn svg:first-child { color: var(--accent); flex: 0 0 14px; }
.model-btn svg:last-child  { color: var(--text-faint); flex: 0 0 10px; }
.model-popover {
  position: absolute; z-index: 50; bottom: calc(100% + 6px); right: 0;
  width: min(280px, 92vw);
  max-height: min(60vh, 420px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 36px rgba(20, 24, 31, 0.16);
  padding: 6px;
}
.model-group-head {
  font-size: 10.5px; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.6px; font-weight: 600;
  padding: 8px 8px 4px;
}
.model-opt {
  width: 100%; text-align: left;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  background: transparent; border: 0;
  color: var(--text); font-size: 13px;
}
.model-opt:hover { background: var(--surface-2); }
.model-opt.is-active { background: var(--accent-soft); }
.model-opt > svg:first-child { color: var(--text-muted); flex: 0 0 14px; }
.model-opt-meta { flex: 1; min-width: 0; }
.model-opt-label { font-weight: 500; line-height: 1.2; }
.model-opt-sub {
  color: var(--text-faint); font-size: 11.5px; line-height: 1.2; margin-top: 2px;
}
.model-tier {
  background: #ffefd6; color: #8a5a00;
  padding: 0 5px; border-radius: 4px;
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.3px;
}
.model-check { color: var(--accent); flex: 0 0 14px; }

/* Scope popover */
.scope-wrap { position: relative; display: inline-block; }
.scope-btn {
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  padding: 7px 12px; border-radius: 8px; font-size: 13.5px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
}
.scope-btn:hover { background: var(--surface-2); }
.scope-btn.is-active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.scope-popover {
  position: absolute; z-index: 50; bottom: calc(100% + 6px); right: 0;
  width: min(360px, 90vw);
  max-height: min(60vh, 480px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 36px rgba(20,24,31,0.14);
  padding: 12px; display: flex; flex-direction: column; gap: 8px;
  text-align: left;
}
.scope-popover input[type="search"] { padding: 7px 10px; }
.scope-section { display: flex; flex-direction: column; gap: 4px; }
.scope-section-head { font-size: 11.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 4px 0; }
.scope-list { max-height: 180px; overflow: auto; display: flex; flex-direction: column; gap: 1px; }
.scope-list .scope-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13.5px;
}
.scope-list .scope-row:hover { background: var(--surface-2); }
.scope-list .scope-row input { flex: 0 0 auto; margin: 0; }
.scope-list .scope-row .scope-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scope-list .scope-row .scope-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; }
.scope-list .scope-row .scope-meta { color: var(--text-faint); font-size: 11.5px; }
.scope-empty { color: var(--text-faint); padding: 6px 8px; font-size: 13px; }
.scope-foot { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; border-top: 1px solid var(--border-soft); }

/* =====================================================
   Projects view
   ===================================================== */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

.project-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px 14px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.project-card:hover {
  border-color: #d8defc;
  box-shadow: 0 8px 24px rgba(20, 24, 31, 0.06), 0 1px 3px rgba(20, 24, 31, 0.04);
  transform: translateY(-1px);
}

/* --- header row: identity + corner tools --- */
.project-card .pc-top {
  display: flex; align-items: flex-start; gap: 10px;
  min-height: 26px;
}
.project-card .pc-identity {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px;
}
.project-card .pc-dot {
  width: 10px; height: 10px; border-radius: 50%;
  flex: 0 0 10px;
  box-shadow: 0 0 0 3px rgba(20, 24, 31, 0.04);
}
.project-card .pc-name {
  font-weight: 600; font-size: 15px;
  letter-spacing: -0.1px;
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.project-card .pc-role-tag {
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.4px;
  padding: 2px 6px; border-radius: 4px;
  flex: 0 0 auto;
}
.project-card .pc-role-owner  { background: #ffefd6; color: #8a5a00; }
.project-card .pc-role-editor { background: #e3eaff; color: #2f4ee0; }
.project-card .pc-role-viewer { background: var(--surface-2); color: var(--text-muted); }

.project-card .pc-tools {
  display: flex; gap: 2px;
  opacity: 0;
  transition: opacity .12s ease;
}
.project-card:hover .pc-tools,
.project-card:focus-within .pc-tools { opacity: 1; }
/* On touch devices :hover doesn't fire reliably — just always show tools. */
@media (hover: none) {
  .project-card .pc-tools { opacity: 1; }
}
.project-card .pc-tool-btn {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  border-radius: 7px;
  transition: background .12s, color .12s, border-color .12s;
}
.project-card .pc-tool-btn:hover {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}
.project-card .pc-tool-btn.pc-tool-danger:hover {
  background: var(--warn-soft);
  color: var(--warn);
  border-color: #f5c2bd;
}

/* --- meta line --- */
.project-card .pc-meta {
  display: flex; align-items: center; gap: 6px;
  color: var(--text-muted); font-size: 12.5px;
  margin-left: 20px;
}
.project-card .pc-meta-item {
  display: inline-flex; align-items: center; gap: 5px;
}
.project-card .pc-meta-item svg { color: var(--text-faint); flex: 0 0 13px; }
.project-card .pc-meta-dot { color: var(--text-faint); }

/* --- description --- */
.project-card .pc-desc {
  color: var(--text-muted);
  font-size: 13px; line-height: 1.45;
  margin: 2px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- action toolbar --- */
.project-card .pc-actions {
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 12px;
  margin-top: auto;
  border-top: 1px solid var(--border-soft);
}
.project-card .pc-actions-row {
  display: flex; flex-wrap: wrap; gap: 6px;
}
/* Primary row: Search + See docs — these are the things you'll do most often.
   Both buttons get equal share of the row so they read as a pair. */
.project-card .pc-actions-row--primary .pc-action { flex: 1 1 0; justify-content: center; }
/* Secondary row: Upload / Members / Share — workspace-management actions
   that aren't part of the daily read flow, visually de-emphasised. */
.project-card .pc-actions-row--secondary { gap: 4px; }
.project-card .pc-action {
  font-size: 12.5px;
  padding: 7px 12px;
  border-radius: 8px;
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 500;
}
.project-card .pc-action svg { flex: 0 0 14px; }
.project-card .pc-action.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid transparent;
}
.project-card .pc-action.btn-ghost:hover {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}
.project-card .pc-action-primary {
  padding: 7px 14px;
  font-weight: 600;
}
/* Secondary action in the primary row ("See docs") — ghost styling but
   tinted with the accent colour so it pairs visually with the primary
   Search button rather than fading into the sub-actions below. */
.project-card .pc-action-secondary {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  font-weight: 600;
}
.project-card .pc-action-secondary:hover {
  background: var(--surface-3, var(--surface-2));
  color: var(--accent, #4262ff);
  border-color: var(--accent, #4262ff);
}
/* Sub-action: smaller, lighter, for the secondary row */
.project-card .pc-action-sub {
  font-size: 12px;
  padding: 5px 10px;
  font-weight: 500;
}

/* Project chips inside library row */
.lib-projects { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.lib-pchip {
  background: var(--surface-2); color: var(--text-muted);
  padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
}
.lib-pchip .lib-pdot { width: 8px; height: 8px; border-radius: 50%; }
.lib-edit-projects { font-size: 11.5px; color: var(--text-faint); background: transparent; border: 0; padding: 1px 4px; }
.lib-edit-projects:hover { color: var(--accent); }

/* Modal (used for create/edit project, assign projects to doc, invite, share) */
.modal-scrim {
  position: fixed; inset: 0;
  background: rgba(20, 24, 31, 0.42);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 60;
  display: flex; align-items: center; justify-content: center;
  animation: modal-fade .12s ease-out;
}
.modal {
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(20, 24, 31, 0.28), 0 2px 6px rgba(20, 24, 31, 0.06);
  width: min(440px, 92vw);
  max-height: min(92vh, 900px);    /* never exceed the viewport */
  padding: 22px 22px 18px;
  display: flex; flex-direction: column; gap: 14px;
  animation: modal-pop .14s cubic-bezier(.2,.9,.3,1.2);
  overflow: hidden;                /* the inner scroll region handles overflow */
}
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-pop  { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }

.modal h3 { margin: 0 0 2px; font-size: 17px; font-weight: 600; }
.modal p.modal-sub { margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.45; }
.modal label { display: block; }
.modal label .lab {
  font-size: 12px; color: var(--text-muted);
  margin-bottom: 6px; display: block;
  font-weight: 500;
}
.modal input[type="text"],
.modal input[type="email"],
.modal input[type="search"],
.modal input[type="password"],
.modal input[type="number"],
.modal input[type="url"],
.modal textarea,
.modal select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  font-size: 14px;
  color: var(--text);
  outline: 0;
  transition: border-color .12s, box-shadow .12s, background .12s;
  appearance: none;
  -webkit-appearance: none;
}
.modal select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235b6373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}
.modal textarea { min-height: 88px; resize: vertical; line-height: 1.45; }
.modal input:hover,
.modal select:hover,
.modal textarea:hover { border-color: #c7cee0; }
.modal input:focus,
.modal select:focus,
.modal textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(66, 98, 255, 0.16);
  background: #fff;
}
.modal .row-end {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 4px; padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}
.modal .row-end .btn-ghost,
.modal .row-end .btn-primary { padding: 8px 16px; font-weight: 500; border-radius: 8px; }
.modal .field-hint { color: var(--text-faint); font-size: 12px; margin-top: 6px; }

/* Branded confirm dialog — replaces native window.confirm() for destructive
   and high-impact actions. Built on the same .modal/.modal-scrim chrome so
   it stays visually consistent with project/agent/invite modals. */
.modal.modal-confirm { width: min(420px, 92vw); padding: 22px 22px 18px; }
.modal-confirm .modal-confirm-head {
  display: flex; align-items: flex-start; gap: 14px;
}
.modal-confirm .modal-confirm-icon {
  flex: 0 0 36px; width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
}
.modal-confirm.is-danger .modal-confirm-icon {
  background: var(--warn-soft); color: var(--warn);
}
.modal-confirm .modal-confirm-icon svg { width: 18px; height: 18px; }
.modal-confirm h3 { margin: 2px 0 4px; }
.modal-confirm p.modal-confirm-body {
  margin: 0; color: var(--text-muted);
  font-size: 13.5px; line-height: 1.55;
  white-space: pre-line; /* honour \n in messages */
}
.btn-danger {
  background: var(--warn, #c0392b); color: #fff; border: 0;
  padding: 9px 16px; border-radius: 8px; font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.btn-danger:hover { background: #a8331f; }
.btn-danger:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, .22);
}

/* Use as the wrapper around the body of any modal that may be tall.
   The h3 / modal-sub stay above, the row-end stays below, and this
   region scrolls. */
.modal-scroll {
  display: flex; flex-direction: column; gap: 14px;
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  /* tiny inset so the inner scrollbar doesn't crash the modal edge */
  margin-right: -6px; padding-right: 6px;
}

/* "(optional)" / "(recommended)" hint inside a label */
.modal label .lab-opt    { color: var(--text-faint); font-weight: 400; margin-left: 4px; }
.modal label .lab-rec    { color: var(--accent);     font-weight: 500; margin-left: 4px; font-size: 11px; }
.modal-error {
  background: var(--warn-soft);
  color: var(--warn);
  border: 1px solid #f5c2bd;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.4;
}

/* =====================================================
   Agents view
   ===================================================== */
.agents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
.agent-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px 14px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.agent-card:hover {
  border-color: #d8defc;
  box-shadow: 0 8px 24px rgba(20, 24, 31, 0.06);
  transform: translateY(-1px);
}
.agent-card .ac-head {
  display: flex; align-items: center; gap: 10px;
}
.agent-card .ac-name {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 15px;
}
.agent-card .ac-name svg { color: var(--accent); flex: 0 0 16px; }
.agent-card .ac-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-card .ac-status-pill {
  background: var(--warn-soft); color: var(--warn);
  padding: 2px 7px; border-radius: 4px; font-size: 10.5px;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px;
}
.agent-card .ac-model {
  background: var(--surface-2); color: var(--text-muted);
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 500;
  flex: 0 0 auto; max-width: 120px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.agent-card .ac-tools {
  display: flex; gap: 2px;
  opacity: 0;
  transition: opacity .12s ease;
}
.agent-card:hover .ac-tools,
.agent-card:focus-within .ac-tools { opacity: 1; }
@media (hover: none) { .agent-card .ac-tools { opacity: 1; } }
.agent-card .ac-tool-btn {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  border-radius: 7px;
  transition: background .12s, color .12s, border-color .12s;
}
.agent-card .ac-tool-btn:hover {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}
.agent-card .ac-tool-btn.ac-tool-danger:hover {
  background: var(--warn-soft);
  color: var(--warn);
  border-color: #f5c2bd;
}
.agent-card .ac-desc {
  margin: 0; color: var(--text-muted);
  font-size: 13px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.agent-card .ac-stats {
  display: flex; align-items: center; gap: 6px;
  color: var(--text-muted); font-size: 12px;
}
.agent-card .ac-stats strong { color: var(--text); font-weight: 600; }
.agent-card .ac-stats-dot { color: var(--text-faint); }
.agent-card .ac-actions {
  display: flex; gap: 6px;
  margin-top: auto; padding-top: 10px;
  border-top: 1px solid var(--border-soft);
}
.agent-card .ac-actions button {
  padding: 6px 12px; font-size: 12.5px;
  display: inline-flex; align-items: center; gap: 6px;
}
.agent-card .ac-actions button svg { flex: 0 0 13px; }
.agent-card .ac-actions .btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid transparent;
}
.agent-card .ac-actions .btn-ghost:hover {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}

/* "Office plugins" card on the Agents view */
.addins-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  margin-top: 24px;
  padding: 18px 22px;
  background: linear-gradient(135deg, #eef0ff, #f6f7fb);
  border: 1px solid #d8defc;
  border-radius: 14px;
}
.addins-card .addins-icon {
  width: 44px; height: 44px; border-radius: 10px;
  background: linear-gradient(135deg, #4f70ff, #7c5cff);
  color: #fff;
  display: grid; place-items: center;
  flex: 0 0 44px;
}
.addins-card .addins-title { font-weight: 600; font-size: 15px; }
.addins-card .addins-desc  { color: var(--text-muted); font-size: 13px; line-height: 1.45; margin-top: 2px; }
.addins-card .addins-actions {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end;
}
.addins-card .addins-actions a { font-size: 12.5px; padding: 6px 12px; text-decoration: none; }
.addins-card .addins-actions .btn-primary { color: #fff; }
@media (max-width: 700px) {
  .addins-card { grid-template-columns: auto 1fr; }
  .addins-card .addins-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* Agent detail modal — tabs + panes */
.ag-tabs {
  display: flex; gap: 2px;
  border-bottom: 1px solid var(--border);
  margin: 4px -22px 0;
  padding: 0 22px;
}
.ag-tab {
  background: transparent; border: 0;
  padding: 10px 14px; font-size: 13px; font-weight: 500;
  color: var(--text-muted); border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .12s, border-color .12s;
}
.ag-tab:hover { color: var(--text); }
.ag-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.ag-pane {
  display: flex; flex-direction: column; gap: 10px;
  padding-top: 12px;
  /* Pane fills the leftover modal space and scrolls when its content
     exceeds it, so the tab bar above and the Close button below stay
     anchored. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* a tiny inset so the scrollbar doesn't visually crash into the modal edge */
  margin-right: -6px; padding-right: 6px;
}

.ag-output {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 12px 14px;
  max-height: 320px; overflow: auto;
}
.ag-output-text { white-space: pre-wrap; font-size: 13.5px; line-height: 1.5; }
.ag-sources {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: var(--text-muted);
}
.ag-src { padding: 2px 0; }

.ag-keys-actions {
  display: flex; gap: 8px; align-items: center;
}
.ag-keys-actions input { flex: 1; }
.ag-keys-list { display: flex; flex-direction: column; gap: 4px; max-height: 280px; overflow: auto; }
.ag-key-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.ag-key-row + .ag-key-row { margin-top: -1px; }
.ag-key-meta { flex: 1; min-width: 0; }
.ag-key-name { font-weight: 500; font-size: 13px; }
.ag-key-prefix { color: var(--text-faint); font-size: 11.5px; font-family: ui-monospace, Menlo, Consolas, monospace; }
.ag-key-fresh {
  background: #fff8e6; border: 1px solid #ffd88a; border-radius: 10px;
  padding: 12px; margin-top: 12px;
}
.ag-key-fresh input {
  font: 13px ui-monospace, Menlo, Consolas, monospace;
  background: var(--surface);
}

.ag-calls-list { display: flex; flex-direction: column; gap: 4px; max-height: 360px; overflow: auto; }
.ag-call-row {
  display: grid; grid-template-columns: auto auto 1fr; gap: 8px; align-items: center;
  padding: 8px 12px;
  border: 1px solid var(--border-soft); border-radius: 8px;
  font-size: 12px;
}
.ag-call-time { color: var(--text-muted); }
.ag-call-meta { color: var(--text-faint); text-align: right; }
.ag-call-error { grid-column: 1 / -1; color: var(--warn); font-size: 11.5px; word-break: break-word; }

/* Advanced collapser inside the agent editor */
.ae-advanced { border: 1px solid var(--border-soft); border-radius: 9px; padding: 10px 12px; }
.ae-advanced[open] { background: var(--surface-2); }
.ae-advanced > summary {
  cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text-muted);
  list-style: none;
}
.ae-advanced > summary::-webkit-details-marker { display: none; }
.ae-advanced > summary::before {
  content: "▸"; display: inline-block; width: 14px; color: var(--text-faint);
  transition: transform .15s;
}
.ae-advanced[open] > summary::before { transform: rotate(90deg); }
.ae-advanced label { margin-top: 10px; }

/* Key limits chips inside the keys list */
.ag-key-limits {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 6px;
}
.ag-key-limits span {
  font-size: 11px; padding: 2px 7px; border-radius: 4px;
  background: var(--surface-2); color: var(--text-muted);
  border: 1px solid var(--border-soft);
}

/* Usage tab — totals grid */
.ag-usage-totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
}
.ag-stat {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 9px;
  padding: 10px 12px;
}
.ag-stat-num { font-size: 18px; font-weight: 600; line-height: 1.1; }
.ag-stat-lbl { font-size: 11px; color: var(--text-faint); margin-top: 3px; text-transform: uppercase; letter-spacing: 0.4px; }

.ag-usage-bars {
  display: flex; align-items: flex-end; gap: 2px;
  height: 56px; padding: 6px 4px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 9px;
}
.ag-bar {
  flex: 1 1 0; min-width: 0;
  height: var(--h, 0%);
  background: linear-gradient(180deg, var(--accent), #7c5cff);
  border-radius: 2px;
  min-height: 1px;
}

.ag-usage-keys { display: flex; flex-direction: column; gap: 4px; }
.ag-usage-key {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  font-size: 12.5px; align-items: center;
}
.ag-usage-key-name   { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-usage-key-prefix { color: var(--text-faint); font: 11px ui-monospace, Menlo, Consolas, monospace; }
.ag-usage-key-meta   { color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* JSON output rendering in the test pane */
.ag-output-text.is-json {
  font: 12.5px/1.5 ui-monospace, Menlo, Consolas, monospace;
  white-space: pre-wrap;
}
.ag-raw {
  margin-top: 10px; padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
}
.ag-raw > summary {
  cursor: pointer; font-size: 12px; color: var(--text-muted);
  list-style: none;
}
.ag-raw > summary::-webkit-details-marker { display: none; }
.ag-raw pre {
  margin: 8px 0 0; max-height: 200px; overflow: auto;
  font: 11.5px/1.45 ui-monospace, Menlo, Consolas, monospace;
  white-space: pre-wrap;
}

.ag-info-row {
  display: flex; gap: 12px; align-items: baseline;
  padding: 6px 0; border-bottom: 1px solid var(--border-soft);
  font-size: 13px;
}
.ag-info-row:last-of-type { border-bottom: 0; }
.ag-info-row .lab { flex: 0 0 120px; }
.ag-prompt {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 8px; padding: 10px 12px;
  font: 12.5px/1.5 ui-monospace, Menlo, Consolas, monospace;
  white-space: pre-wrap; max-height: 180px; overflow: auto;
}

/* Per-project members modal */
.pmember-list {
  display: flex; flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 10px;
  max-height: 320px; overflow: auto;
}
.pmember-empty {
  color: var(--text-faint); font-size: 13px;
  padding: 14px 16px; text-align: center;
}
.pmember {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-soft);
}
.pmember:last-child { border-bottom: 0; }
.pmember-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #4262ff, #7c5cff);
  color: #fff; font-weight: 600; font-size: 12px;
  display: grid; place-items: center; flex: 0 0 32px;
}
.pmember-meta { flex: 1; min-width: 0; }
.pmember-name { font-size: 13.5px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmember-name .pmember-you { color: var(--text-faint); font-weight: 400; font-size: 12px; }
.pmember-email { color: var(--text-faint); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmember-role {
  width: auto !important; padding: 5px 26px 5px 8px !important;
  font-size: 12.5px !important;
}
.pmember-remove {
  background: transparent; border: 1px solid var(--border);
  color: var(--text-muted);
  width: 28px; height: 28px; border-radius: 6px;
  font-size: 16px; line-height: 1;
  display: grid; place-items: center;
  flex: 0 0 28px;
}
.pmember-remove:not(:disabled):hover {
  background: var(--warn-soft); color: var(--warn); border-color: #f5c2bd;
}
.pmember-remove:disabled { opacity: 0.35; cursor: not-allowed; }
.pmember-role:disabled { opacity: 0.6; cursor: not-allowed; }

.pmember-add {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}
.pmember-add-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 8px;
  align-items: center;
}
.pmember-add-row select { min-width: 0; }
.pmember-add-row .btn-primary { padding: 8px 14px; }
.color-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.color-grid .color-opt {
  width: 24px; height: 24px; border-radius: 6px; cursor: pointer; border: 2px solid transparent;
}
.color-grid .color-opt.is-active { border-color: var(--text); }
.proj-checks { display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow: auto; }
.proj-checks label { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; font-size: 13.5px; }
.proj-checks label:hover { background: var(--surface-2); }
.proj-checks input { margin: 0; }

/* =====================================================
   ANSWER + RESULTS
   ===================================================== */
.answer-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 24px auto 0; max-width: 760px;
  box-shadow: var(--shadow-sm);
}
/* Trim trailing whitespace produced by markdown's default block margins so the
   card doesn't look like it has a giant empty gutter at the bottom. */
.answer-text > *:last-child { margin-bottom: 0; }
.answer-text > *:first-child { margin-top: 0; }
.answer-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
}
.answer-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: 0 0 26px;
  background: linear-gradient(135deg, #4262ff, #7c5cff);
  color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(66,98,255,0.30);
}
.answer-label {
  font-weight: 600; font-size: 13px; color: var(--text-muted);
  letter-spacing: 0.2px;
}
.answer-meta { color: var(--text-faint); font-size: 12px; margin-left: auto; }
.answer-text { line-height: 1.55; font-size: 15px; }
.answer-text .src-pill {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent);
  border: 0; cursor: pointer;
  font-weight: 700; font-size: 11px; padding: 0 6px;
  height: 18px; min-width: 18px; border-radius: 6px;
  margin: 0 1px; vertical-align: top; line-height: 18px;
  text-decoration: none;
}
.answer-text .src-pill:hover { background: var(--accent); color: #fff; }

/* Thread bar (active conversation indicator) */
.thread-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 18px auto 12px; max-width: 760px;
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  flex-wrap: wrap;
}
.thread-bar-meta { display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.thread-bar-meta svg { color: var(--accent); flex: 0 0 16px; }
.thread-bar-title { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-bar-count { color: var(--text-faint); font-size: 12.5px; }
.thread-bar-actions { display: inline-flex; gap: 4px; }
.thread-bar-actions button { padding: 4px 10px; font-size: 12.5px; }

/* Thread history (stacked turns) */
.thread-history { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.turn { display: flex; flex-direction: column; gap: 4px; }
/* User question — right-aligned bubble, no badge (ChatGPT/Claude style) */
.turn-question {
  background: linear-gradient(180deg, var(--accent-soft) 0%, #e8edff 100%);
  border: 1px solid #d8defc;
  padding: 10px 14px; border-radius: 16px 16px 4px 16px;
  font-weight: 500; color: var(--text);
  align-self: flex-end;
  max-width: min(85%, 560px);
  word-break: break-word;
}
.turn .answer-card { margin-top: 4px; }
.turn-loading {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px;
  color: var(--text-muted); font-size: 13.5px;
  display: flex; align-items: center; gap: 10px;
}
.turn-loading::before {
  content: ""; width: 12px; height: 12px;
  border: 2px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.results-meta { color: var(--text-muted); font-size: 12.5px; margin: 6px 2px 0; }

/* =====================================================
   Compact source list (grouped by document)
   ===================================================== */
.sources-wrap { margin: 4px 0 0; display: flex; flex-direction: column; gap: 6px; }
.sources-head {
  font-size: 11.5px; font-weight: 600; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin: 0 0 2px;
}
.source-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .12s, box-shadow .12s;
}
.source-group:hover { border-color: var(--accent); }
.source-group-head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
}
.source-group-head:hover { background: var(--surface-2); }
.source-rank {
  flex: 0 0 auto;
  background: var(--accent-soft); color: var(--accent);
  font-size: 11px; font-weight: 700;
  padding: 2px 7px; border-radius: 5px;
  min-width: 22px; text-align: center;
}
.source-group-head .result-icon {
  width: 26px; height: 26px; font-size: 11px;
  flex: 0 0 26px;
}
.source-info { flex: 1; min-width: 0; }
.source-title {
  font-weight: 600; font-size: 14px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.source-meta {
  color: var(--text-muted); font-size: 12px;
  display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap;
  margin-top: 1px;
}
.source-meta .dot { color: var(--text-faint); }
.source-score {
  flex: 0 0 auto;
  background: var(--surface-2); color: var(--text-muted);
  font-size: 11.5px; font-weight: 600;
  padding: 2px 9px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.source-chevron {
  flex: 0 0 auto;
  color: var(--text-faint); font-size: 12px;
  transition: transform .15s;
}
.source-group.is-expanded .source-chevron { transform: rotate(180deg); }

.source-group-body {
  display: none;
  border-top: 1px solid var(--border-soft);
  padding: 4px 4px 6px;
  background: linear-gradient(180deg, #fbfcfe 0%, var(--surface) 100%);
}
.source-group.is-expanded .source-group-body { display: block; }

.source-chunk-row {
  display: block; width: 100%;
  background: transparent; border: 0;
  text-align: left; cursor: pointer;
  padding: 8px 10px; border-radius: 6px;
  transition: background .12s;
  font-family: inherit;
}
.source-chunk-row + .source-chunk-row { border-top: 1px solid var(--border-soft); }
.source-chunk-row:hover { background: var(--accent-soft); }
.source-chunk-meta {
  display: inline-flex; gap: 6px; align-items: center;
  font-size: 11.5px; color: var(--text-muted); margin-bottom: 3px;
}
.source-chunk-rank {
  background: var(--surface-2); color: var(--text-muted);
  font-size: 10.5px; font-weight: 700;
  padding: 1px 6px; border-radius: 4px;
}
.source-chunk-text {
  font-size: 13px; line-height: 1.45; color: var(--text);
  white-space: pre-wrap;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.results { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; display: grid; gap: 10px; }
.result {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
  cursor: pointer; transition: box-shadow .12s, border-color .12s;
}
.result:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.result-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.result-rank {
  background: var(--accent-soft); color: var(--accent);
  font-weight: 700; font-size: 11px; padding: 1px 8px; border-radius: 6px;
  height: 20px; line-height: 18px;
}
.result-icon {
  width: 28px; height: 28px; border-radius: 6px;
  display: grid; place-items: center; flex: 0 0 28px;
  font-size: 14px; color: #fff; font-weight: 700;
}
.icon-pdf  { background: #d24a3d; }
.icon-docx { background: #2b579a; }
.icon-xlsx { background: #217346; }
.icon-pptx { background: #d24726; }
.icon-csv  { background: #6f9c30; }
.icon-image{ background: #7c5cff; }
.icon-text { background: #4d566a; }
.icon-md   { background: #4d566a; }
.icon-markdown { background: #4d566a; }

.result-meta { flex: 1; min-width: 0; }
.result-title { font-weight: 600; font-size: 14.5px; color: var(--text); display: block; }
.result-source { color: var(--text-muted); font-size: 12.5px; margin-top: 2px; }
.result-score {
  background: var(--surface-2); border-radius: 999px; padding: 2px 9px;
  font-size: 11.5px; font-weight: 600; color: var(--text-muted);
}
.result-content {
  color: var(--text); white-space: pre-wrap; font-size: 14px;
  margin-top: 4px;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

/* =====================================================
   FILTER BAR (library) + STATUS PILLS (jobs)
   ===================================================== */
.lib-filters {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.lib-filter-stats { color: var(--text-muted); font-size: 12.5px; margin-left: auto; }

.index-banner {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(180deg, #fff8e6 0%, #fff3d0 100%);
  border: 1px solid #f0d28a;
  border-radius: var(--radius);
  padding: 10px 14px; margin: 0 0 12px;
  color: #7a5b0a; font-size: 13.5px;
}
.index-banner button { margin-left: auto; }

/* result `via` badge */
.result-via {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase;
  padding: 1px 7px; border-radius: 999px; margin-left: 6px;
}
.via-semantic { background: rgba(66,98,255,0.12); color: var(--accent); }
.via-fulltext { background: rgba(124,92,255,0.12); color: #6f4ad8; }
.via-both     { background: rgba(26,135,84,0.12);  color: var(--success); }
.filter-pop-wrap { position: relative; }
.filter-pop-btn { display: inline-flex; align-items: center; gap: 6px; }
.filter-pop-btn.is-active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.filter-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 10.5px;
  height: 16px; min-width: 16px; padding: 0 5px; border-radius: 999px;
}
.filter-pop {
  position: absolute; z-index: 50; top: calc(100% + 6px); left: 0;
  width: min(280px, 90vw);
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 36px rgba(20,24,31,0.14);
  padding: 10px; display: flex; flex-direction: column; gap: 8px;
}
.filter-pop-search { padding: 6px 10px; }
.filter-pop-list { max-height: 220px; overflow: auto; display: flex; flex-direction: column; gap: 1px; }
.filter-pop-list label {
  display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px;
  cursor: pointer; font-size: 13.5px; margin: 0;
}
.filter-pop-list label:hover { background: var(--surface-2); }
.filter-pop-list .filter-empty { color: var(--text-faint); padding: 6px 8px; font-size: 13px; }
.filter-pop-foot { display: flex; gap: 6px; justify-content: flex-end; padding-top: 4px; border-top: 1px solid var(--border-soft); }
.filter-pop-foot button { padding: 5px 12px; font-size: 12.5px; }
.filter-date {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12.5px; color: var(--text-muted); margin: 0;
}
.filter-date input { width: 140px; padding: 6px 8px; font-size: 13px; }

/* status pills (jobs) */
.status-pills { display: flex; gap: 4px; margin: 0 0 12px; }
.status-pill {
  background: var(--surface); color: var(--text-muted); border: 1px solid var(--border);
  padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 500;
}
.status-pill:hover { color: var(--text); }
.status-pill.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* pagination footer */
.page-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px; padding: 8px 4px;
  color: var(--text-muted); font-size: 13px;
}
.page-controls { display: flex; align-items: center; gap: 8px; }
.page-controls button { padding: 5px 12px; font-size: 13px; }
.page-controls button:disabled { opacity: 0.4; cursor: not-allowed; }
.page-size { padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.page-info { font-variant-numeric: tabular-nums; }

/* checkboxes column in library */
.cb-col { width: 32px; text-align: center; }
.lib-table input[type="checkbox"] { cursor: pointer; }

/* checkbox on a job card */
.job-cb { margin-right: 8px; vertical-align: middle; }

/* sticky bulk action bar */
.bulk-bar {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  background: #14181f; color: #fff; border-radius: 12px;
  padding: 8px 12px; display: flex; align-items: center; gap: 8px;
  z-index: 40; box-shadow: 0 16px 40px rgba(20,24,31,0.30);
  animation: bulkIn .18s ease;
}
@keyframes bulkIn { from { transform: translate(-50%, 8px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.bulk-count { font-weight: 600; font-size: 13.5px; padding: 0 6px; }
.bulk-btn {
  background: rgba(255,255,255,0.08); color: #fff; border: 0;
  padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 500;
}
.bulk-btn:hover { background: rgba(255,255,255,0.16); }
.bulk-danger { background: rgba(255,90,90,0.18); }
.bulk-danger:hover { background: rgba(255,90,90,0.32); }

/* =====================================================
   LIBRARY TABLE
   ===================================================== */
.lib-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.lib-table th, .lib-table td { padding: 10px 14px; text-align: left; font-size: 13.5px; border-bottom: 1px solid var(--border-soft); }
.lib-table th { color: var(--text-muted); font-weight: 500; background: var(--surface-2); }
.lib-table tr:last-child td { border-bottom: 0; }
.lib-title { display: flex; align-items: center; gap: 10px; }
.del-btn { background: transparent; border: 1px solid var(--border); color: var(--warn); padding: 4px 10px; border-radius: 6px; font-size: 12px; }
.del-btn:hover { background: var(--warn-soft); border-color: var(--warn-soft); }

/* =====================================================
   UPLOAD
   ===================================================== */
.upload-projects {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 14px; margin-bottom: 12px;
}
.upload-projects-label { color: var(--text-muted); font-size: 13.5px; font-weight: 500; }
.upload-projects-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; }
.upload-projects-chips:empty::before {
  content: 'None — documents stay unassigned';
  color: var(--text-faint); font-size: 13px;
}

.upload-zone {
  background: var(--surface); border: 2px dashed var(--border);
  border-radius: var(--radius); padding: 56px 24px;
  text-align: center; color: var(--text-muted); cursor: pointer;
  transition: border-color .12s, background .12s;
}
.upload-zone:hover, .upload-zone.is-drag {
  border-color: var(--accent); background: var(--accent-soft); color: var(--accent);
}
.upload-zone svg { color: currentColor; opacity: 0.85; }
.upload-zone p { margin: 8px 0; }
.upload-zone .hint { font-size: 12.5px; color: var(--text-faint); }

.paste-block { margin-top: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; }
.paste-block summary { cursor: pointer; color: var(--text-muted); font-size: 14px; padding: 4px 0; }
.paste-form { display: grid; gap: 10px; margin-top: 10px; }
.row-end { display: flex; justify-content: flex-end; }
.status { margin-top: 12px; font-size: 13px; color: var(--text-muted); min-height: 18px; }
.status.error { color: var(--warn); }
.status.ok { color: var(--success); }

/* =====================================================
   JOBS
   ===================================================== */
.jobs-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.job {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px;
}
.job-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.job-title { font-weight: 600; }
.job-head-right { display: inline-flex; align-items: center; gap: 8px; }
.job-action { padding: 4px 12px; font-size: 12.5px; }
.job-status { font-size: 11.5px; padding: 2px 10px; border-radius: 999px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }
.s-queued     { background: #f1f1f5; color: #5b6373; }
.s-processing { background: #fff4d6; color: #8a6a00; }
.s-completed  { background: #e6f5ec; color: var(--success); }
.s-failed     { background: var(--warn-soft); color: var(--warn); }
.progress { height: 6px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.progress > div { height: 100%; background: linear-gradient(90deg, #4262ff, #7c5cff); transition: width .3s ease; }
.job-meta { color: var(--text-muted); font-size: 12.5px; margin-top: 6px; display: flex; gap: 12px; flex-wrap: wrap; }
.job-error { margin-top: 8px; color: var(--warn); font-size: 12.5px; word-break: break-word; }

/* =====================================================
   SETTINGS
   ===================================================== */
.settings-grid { display: grid; gap: 16px; max-width: 720px; }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px;
}
.card h3 { margin: 0 0 6px; font-size: 15px; font-weight: 700; }
.card h4 { margin: 14px 0 6px; font-size: 13px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.card .hint { color: var(--text-muted); font-size: 13px; margin: 0 0 12px; }
.field-row { display: flex; gap: 8px; }
.field-row input { flex: 1; }

/* card action row at the bottom of a card */
.card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

/* key/value grid: two columns, left label muted, right value normal */
.kv-grid { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 13.5px; }
.kv-grid .k { color: var(--text-muted); }
.kv-grid .v { color: var(--text); }
.kv-grid .v.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; }

/* row of metric cards for Usage / Storage / Keys */
.metric-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin: 6px 0 4px; }
.metric {
  background: var(--surface-2, #f6f7fb);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px;
}
.metric .v { font-size: 20px; font-weight: 700; color: var(--text); line-height: 1.1; }
.metric .l { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.04em; }

/* plan pill + status text */
.plan-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plan-pill {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  background: var(--brand-soft, #eaeefe); color: var(--brand, #4262ff);
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em;
}
.plan-status { font-size: 12px; }

/* tiny svg sparkline */
.sparkline-wrap { margin-top: 14px; }
.sparkline-label { font-size: 11.5px; margin-bottom: 4px; }
#usage-sparkline { width: 100%; height: 50px; display: block; }
#usage-sparkline .area { fill: rgba(66, 98, 255, 0.12); }
#usage-sparkline .line { fill: none; stroke: var(--brand, #4262ff); stroke-width: 1.5; }

/* Inline plan picker (shown when "Choose a plan" is clicked). */
.plan-picker {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.plan-picker-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.seg {
  display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
}
.seg-btn {
  background: transparent; border: 0; padding: 5px 14px;
  font-size: 12.5px; color: var(--text-muted); cursor: pointer;
}
.seg-btn.is-active { background: var(--brand, #4262ff); color: #fff; }
.seg-badge {
  display: inline-block; margin-left: 6px;
  padding: 1px 7px; border-radius: 999px;
  background: #16a34a; color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.seg-btn.is-active .seg-badge { background: #fff; color: #16a34a; }

/* Per-plan savings pill (shown when Yearly is selected). */
.plan-option .price-extra {
  display: block; font-size: 11px; color: #16a34a; font-weight: 600;
  margin-top: 2px;
}
.plan-option .price-strike {
  display: inline-block; color: var(--text-muted); text-decoration: line-through;
  font-weight: 400; font-size: 12px; margin-left: 6px;
}
.plan-option .needs-config {
  display: inline-block; font-size: 11px; color: #c0392b;
  margin-top: 4px;
}
.plan-picker-list { display: grid; gap: 8px; }
.plan-option {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface);
}
.plan-option .nm    { font-weight: 600; }
.plan-option .desc  { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.plan-option .price { font-weight: 700; }
.plan-option .price .per { font-weight: 400; font-size: 12px; color: var(--text-muted); }
.plan-option.is-current { outline: 2px solid var(--brand, #4262ff); outline-offset: -1px; }
.plan-option .pick-btn:disabled { opacity: 0.5; cursor: default; }

/* ====================================================================
   Trial / upgrade banner — persistent at the top of every view.
   ==================================================================== */
.upgrade-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  background: linear-gradient(90deg, #eaeefe 0%, #f0e7ff 100%);
  border-bottom: 1px solid #d6dcfe;
  font-size: 13.5px; color: #1f2a44;
  position: sticky; top: 0; z-index: 4;
}
.upgrade-banner.is-urgent {
  background: linear-gradient(90deg, #fef2e0 0%, #fde2c4 100%);
  border-bottom-color: #f5c47a;
  color: #5b3010;
}
.upgrade-banner.is-locked {
  background: linear-gradient(90deg, #fde2e0 0%, #fbc6c0 100%);
  border-bottom-color: #f3a39a;
  color: #6e1717;
}
.upgrade-banner-icon { font-size: 18px; line-height: 1; }
.upgrade-banner-text { flex: 1; }
.upgrade-banner-text strong { font-weight: 700; }
.upgrade-banner-cta {
  background: var(--brand, #4262ff); color: #fff;
  border: 0; border-radius: 6px;
  padding: 6px 14px; font-size: 12.5px; font-weight: 600;
  cursor: pointer;
}
.upgrade-banner-cta:hover { background: #2f4ee0; }
.upgrade-banner-x {
  background: transparent; border: 0; cursor: pointer;
  color: inherit; font-size: 22px; line-height: 1;
  padding: 0 6px; opacity: 0.55;
}
.upgrade-banner-x:hover { opacity: 1; }

/* ====================================================================
   Sidebar plan badge — sits under the user-profile block.
   ==================================================================== */
.side-plan {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px 0;
  font-size: 12px;
}
.side-plan-pill {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: var(--surface-2, #f0f3f9); color: var(--text-muted, #5b6373);
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
}
.side-plan-pill.is-trial    { background: #fef2e0; color: #8a5012; }
.side-plan-pill.is-active   { background: #e7f5ed; color: #1a8754; }
.side-plan-pill.is-past_due { background: #fdecec; color: #c0392b; }
.side-plan-pill.is-readonly,
.side-plan-pill.is-locked   { background: #fdecec; color: #c0392b; }
.side-plan-link {
  margin-left: auto;
  background: transparent; border: 0; color: var(--brand, #4262ff);
  cursor: pointer; font-size: 12px; padding: 0;
}
.side-plan-link:hover { text-decoration: underline; }

/* Quota usage bar — used on metrics inside the Settings cards.
   Shown under the .v number. Grey track, blue fill; turns orange at
   85% and red at 100%. */
.quota-bar {
  position: relative; height: 5px; border-radius: 3px;
  background: var(--surface-2, #f0f3f9);
  overflow: hidden; margin-top: 6px;
}
.quota-bar .fill {
  position: absolute; top: 0; left: 0; bottom: 0;
  background: var(--brand, #4262ff);
  transition: width .2s ease;
}
.quota-bar.is-warn .fill { background: #f59e0b; }
.quota-bar.is-full .fill { background: #e74c3c; }
.quota-cap {
  display: block; font-size: 10.5px; color: var(--text-muted);
  margin-top: 4px; letter-spacing: 0.02em;
}

/* =====================================================
   DRAWER + TOASTS
   ===================================================== */
.drawer {
  position: fixed; top: 0; right: 0; width: min(620px, 96vw); height: 100vh;
  background: var(--surface); border-left: 1px solid var(--border);
  box-shadow: -16px 0 40px rgba(20,24,31,0.10);
  display: flex; flex-direction: column;
  z-index: 30;
  animation: slideIn .2s ease;
  /* Belt-and-suspenders for scroll containment. The drawer is a fixed-
     position flex column at 100vh. min-height:0 lets .drawer-body shrink so
     its overflow:auto can trigger; overflow:hidden on the parent itself
     stops any child that ignores the flex constraint (e.g., an extra-tall
     chunk on Safari) from forcing the whole drawer past viewport edges.
     Without this combo the user reported scroll wasn't working. */
  min-height: 0;
  overflow: hidden;
}
@keyframes slideIn { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

.drawer-head {
  display: flex; gap: 12px; align-items: flex-start; justify-content: space-between;
  padding: 16px 22px 14px; border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(180deg, var(--surface) 0%, #fbfcfe 100%);
  /* Header is fixed-size — never shrink, never grow. Keeps it pinned at top
     so the body below scrolls underneath without the header sliding away. */
  flex: 0 0 auto;
}
.drawer-head-main { min-width: 0; flex: 1; }
.drawer-head-row { display: flex; align-items: center; gap: 10px; }
.drawer-head-row .result-icon { width: 30px; height: 30px; flex: 0 0 30px; font-size: 12px; }
.drawer-head h3 {
  margin: 0; font-size: 16px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.drawer-head-meta {
  margin-top: 6px; padding-left: 40px;
  color: var(--text-muted); font-size: 12.5px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.drawer-head-meta .dot { color: var(--text-faint); margin: 0 2px; }

/* Secondary row in the drawer header: in-context actions (View all / Open
   in Library). Sits below the title block, indented to align with the title
   text (icon column width + gap = 30 + 10 = 40px). Buttons are pill-shaped
   ghost buttons; they read as inline actions, not primary CTAs. */
.drawer-head-actions {
  margin-top: 10px; padding-left: 40px;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.drawer-action {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; font-size: 12px; font-weight: 500;
  color: var(--text-muted); background: var(--surface-2);
  border: 1px solid var(--border-soft); border-radius: 999px;
  cursor: pointer; line-height: 1;
}
.drawer-action svg { width: 12px; height: 12px; }
.drawer-action:hover { background: var(--surface); color: var(--text); border-color: var(--border); }
.drawer-action[aria-pressed="true"] {
  background: rgba(66,98,255,0.10); color: #2c46d8; border-color: rgba(66,98,255,0.25);
}

.drawer-close {
  background: transparent; border: 0; color: var(--text-muted);
  font-size: 26px; line-height: 1; padding: 2px 8px; border-radius: 6px; flex: 0 0 auto;
  cursor: pointer;
}
.drawer-close:hover { background: var(--surface-2); color: var(--text); }
/* Body is the scroll container. flex:1 1 0 + min-height:0 is what makes
   overflow actually work inside the parent flex column. The `0` basis (not
   `auto`) tells the flex item to compute its size purely from the free
   space the parent has, ignoring its own intrinsic content size — without
   it, a tall chunk's natural height could "win" against the 100vh parent
   and push the scrollbar offscreen. overscroll-behavior:contain keeps the
   wheel from accidentally scrolling the page underneath. */
.drawer-body {
  flex: 1 1 0; min-height: 0;
  padding: 18px 22px 28px;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: 14px;
  /* Subtle custom scrollbar so the long-text case feels intentional. */
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.drawer-body::-webkit-scrollbar { width: 10px; }
.drawer-body::-webkit-scrollbar-thumb {
  background: var(--border); border-radius: 8px;
  border: 2px solid var(--surface);
}
.drawer-body::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

.drawer-scrim { position: fixed; inset: 0; background: rgba(20,24,31,0.18); z-index: 25; }

/* chunk cards */
.chunk {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  /* CRITICAL: drawer-body is a flex column. Default flex children can shrink,
     which combined with `overflow: hidden` above squashed every chunk into a
     thin bar showing only its badge — and because flex made all content "fit"
     into 100vh, the body never overflowed so scroll never engaged. Pinning
     flex-shrink to 0 forces each chunk to keep its intrinsic height; total
     content height then exceeds the body and the scrollbar kicks in. */
  flex-shrink: 0;
}
.chunk--neighbor { background: var(--surface-2); border-color: var(--border-soft); }
.chunk--current  {
  background: linear-gradient(180deg, #f8faff 0%, #ffffff 100%);
  border-color: rgba(66,98,255,0.35);
  box-shadow: 0 4px 14px rgba(66,98,255,0.10);
  position: relative;
}
.chunk--current::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, #4262ff, #7c5cff); border-radius: 3px 0 0 3px;
}
.chunk-head {
  padding: 10px 16px 0;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.chunk-badge {
  display: inline-block;
  background: var(--accent-soft); color: var(--accent);
  padding: 2px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.2px;
}
.chunk--neighbor .chunk-badge { background: rgba(0,0,0,0.05); color: var(--text-muted); }
/* Small marker on the cited chunk — only shows in "View all sections" mode
   where there are many neighbor chunks and the user needs to find the one
   the LLM cited. Hidden by the body in the default 3-chunk view because
   the current chunk is already obvious there. */
.chunk-cite-marker {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #2c46d8;
}
.chunk-cite-marker::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #4262ff;
}

/* Inline ellipsis that signals "this chunk continues from a previous one".
   The chunker takes a fixed-character tail from the previous chunk as
   overlap, which lands mid-word — we drop the partial fragment and render
   this marker in its place so the rest reads as a normal sentence. */
.chunk-cont {
  display: inline-block;
  color: var(--text-faint);
  font-weight: 600;
  margin-right: 2px;
}
.chunk-body {
  padding: 10px 16px 14px;
  font-size: 14.5px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
}
.chunk--neighbor .chunk-body { color: var(--text-muted); font-size: 13.5px; }

/* When the chunk body contains structured XLSX/CSV markup, switch off the
   pre-wrap whitespace handling so tables render normally. */
.chunk-body:has(.xlsx-table-wrap) { white-space: normal; }
.chunk-body:has(.xlsx-section)    { white-space: normal; }

.xlsx-sheet {
  font-size: 12px; font-weight: 700; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--text-faint);
  margin: 4px 0 8px;
}
.xlsx-section {
  margin: 12px 0 6px;
  font-weight: 700; color: var(--text);
  padding: 6px 10px;
  background: linear-gradient(180deg, rgba(124,92,255,0.08), rgba(66,98,255,0.04));
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  font-size: 13.5px;
}
.xlsx-table-wrap {
  margin: 6px 0 10px;
  overflow-x: auto;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--surface);
}
.xlsx-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12.5px;
  line-height: 1.4;
}
.xlsx-table th, .xlsx-table td {
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border-soft);
  border-right: 1px solid var(--border-soft);
  vertical-align: top;
  white-space: nowrap;
}
.xlsx-table tr:last-child td { border-bottom: 0; }
.xlsx-table th:last-child, .xlsx-table td:last-child { border-right: 0; }
.xlsx-table thead th {
  background: var(--surface-2);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.2px;
  position: sticky; top: 0;
}
.xlsx-table tbody tr:nth-child(even) td { background: rgba(0,0,0,0.015); }
.xlsx-table tbody tr:hover td { background: var(--accent-soft); }
.chunk--neighbor .xlsx-table { font-size: 11.5px; }
.chunk--neighbor .xlsx-section { font-size: 12.5px; opacity: 0.85; }

/* =====================================================
   MARKDOWN inside the answer card — compact spacing
   ===================================================== */
.answer-text p { margin: 0 0 8px; }
.answer-text p:last-child { margin-bottom: 0; }
.answer-text > :first-child { margin-top: 0; }
.answer-text > :last-child  { margin-bottom: 0; }
.answer-text h3, .answer-text h4, .answer-text h5, .answer-text h6 {
  margin: 14px 0 4px; font-weight: 700; color: var(--text); line-height: 1.35;
}
.answer-text h3 { font-size: 16px; }
.answer-text h4 { font-size: 15px; }
.answer-text h5, .answer-text h6 { font-size: 14px; color: var(--text-muted); }
.answer-text strong { font-weight: 700; color: var(--text); }
.answer-text em { font-style: italic; }
.answer-text code {
  background: var(--surface-2); border: 1px solid var(--border-soft);
  padding: 1px 6px; border-radius: 5px; font-size: 13px; color: var(--text);
}
.answer-text ul, .answer-text ol {
  margin: 4px 0 8px; padding-left: 22px; line-height: 1.5;
}
.answer-text ul ul, .answer-text ol ul,
.answer-text ul ol, .answer-text ol ol {
  margin: 2px 0 4px;
}
.answer-text li { margin: 1px 0; }
.answer-text li > p { margin: 0; }
.answer-text ul.md-ul { list-style: disc; }
.answer-text ol.md-ol { list-style: decimal; }
/* Drop the empty horizontal rules markdown renders for "---" — they look
   like awkward gaps in chat answers. */
.answer-text hr { display: none; }

/* markdown tables inside the answer */
.md-table-wrap { overflow-x: auto; margin: 12px 0 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.md-table { border-collapse: collapse; width: 100%; font-size: 13.5px; line-height: 1.4; }
.md-table th, .md-table td { padding: 8px 12px; border-bottom: 1px solid var(--border-soft); border-right: 1px solid var(--border-soft); vertical-align: top; }
.md-table tr:last-child td { border-bottom: 0; }
.md-table th:last-child, .md-table td:last-child { border-right: 0; }
.md-table thead th { background: var(--surface-2); color: var(--text-muted); font-weight: 600; font-size: 12.5px; }
.md-table tbody tr:nth-child(even) td { background: rgba(0,0,0,0.015); }

/* generic fenced code (non-chart) */
.md-pre { background: #0d1220; color: #cfe1ff; padding: 12px 14px; border-radius: 8px; overflow: auto; font: 13px/1.55 ui-monospace, Menlo, Consolas, monospace; margin: 12px 0; }

/* charts */
.chart {
  margin: 14px 0;
  padding: 14px 16px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.chart svg { width: 100%; height: auto; max-width: 100%; display: block; }
.chart-title { font-size: 13.5px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 8px; }
.chart-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.chart-swatch { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 10px; }
.chart-error {
  background: var(--warn-soft); color: var(--warn);
  padding: 8px 12px; border-radius: 6px; font: 12.5px ui-monospace, Menlo, Consolas, monospace;
}
.chart-pie .chart-pie-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.chart-pie svg { max-width: 240px; flex: 0 0 auto; }
.chart-legend-list { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 4px; }
.chart-legend-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.chart-legend-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.chart-legend-value { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.chart-legend-value .muted { color: var(--text-faint); }

.toasts { position: fixed; bottom: 18px; right: 18px; display: grid; gap: 8px; z-index: 80; }
.toast {
  background: #14181f; color: #fff; padding: 11px 16px; border-radius: 10px;
  font-size: 13.5px; line-height: 1.4;
  box-shadow: 0 12px 32px rgba(20, 24, 31, 0.25);
  animation: toastIn .18s ease;
  max-width: 380px;
  word-wrap: break-word;
}
.toast.success { background: var(--success); }
.toast.error { background: var(--warn); font-weight: 500; }
@keyframes toastIn { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* =====================================================
   RESPONSIVE
   =====================================================
   Two breakpoints in the main app:

   - 1024px (tablet): the sidebar stays visible but content padding shrinks,
     view-head actions wrap below the title instead of fighting it, and the
     settings grid collapses to a single column so cards don't squeeze.

   - 800px (mobile): the sidebar slides off-canvas. A floating hamburger
     button (#mobile-nav-btn, hidden by default elsewhere) appears so the
     user can bring the sidebar back. A scrim sits behind the open sidebar
     to act as a tap-to-dismiss target.
   ===================================================== */

/* Mobile hamburger — hidden by default, shown only at ≤ 800px below.
   Sits fixed top-left so it's reachable with a thumb on phone screens. */
.mobile-nav-btn {
  display: none;
  position: fixed; top: 10px; left: 10px; z-index: 45;
  width: 38px; height: 38px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow);
  align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
}
.mobile-nav-btn:hover { background: var(--surface-2); }
.mobile-nav-btn svg { width: 18px; height: 18px; }

/* Scrim behind the mobile sidebar — fades in/out, also a tap target. */
.mobile-nav-scrim {
  display: none;
  position: fixed; inset: 0; z-index: 40;
  background: rgba(20, 24, 31, 0.42);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* Tablet — sidebar still on screen but content area gets cosier. */
@media (max-width: 1024px) {
  .main { padding: 24px 22px 80px; max-width: none; }
  .view-head { flex-wrap: wrap; row-gap: 10px; }
  .view-head .view-actions { flex-wrap: wrap; }
  .settings-grid { grid-template-columns: 1fr !important; }
  .lib-filters { gap: 8px; flex-wrap: wrap; }
  .hero-title { font-size: 26px; }
}

/* Mobile — sidebar off-canvas, hamburger visible, scrim handles dismiss. */
@media (max-width: 800px) {
  body { padding-left: 0; }
  .sidebar {
    transform: translateX(-100%);
    transition: transform .2s ease;
    z-index: 50;
    box-shadow: 0 0 32px rgba(20,24,31,0.32);
  }
  .sidebar[data-collapsed="0"] { transform: translateX(0); width: var(--sidebar-w); }
  /* On mobile we want the collapsed-rail (60px) trick disabled — the user
     either has the full sidebar open or the sidebar hidden. */
  .sidebar[data-collapsed="1"] { transform: translateX(-100%); width: var(--sidebar-w); }
  .main { padding: 60px 16px 80px; }            /* leave room for the hamburger */
  .hero-title { font-size: 22px; }
  .search-dock { left: 0 !important; padding: 12px 14px; }
  body.sidebar-collapsed .search-dock { left: 0; }

  /* Show the hamburger, but hide it once the user opens the sidebar (the
     sidebar already has a Close affordance via the brand-toggle and any tap
     on the scrim). */
  .mobile-nav-btn { display: inline-flex; }
  .sidebar[data-collapsed="0"] ~ .mobile-nav-btn { display: none; }

  /* Sidebar open ⇒ scrim visible. */
  .sidebar[data-collapsed="0"] ~ .mobile-nav-scrim { display: block; }

  /* The brand-toggle inside the sidebar already collapses it — but on mobile
     we want it to read as "Close" (it now hides the whole sidebar). Keep
     its native styling; the meaning changes naturally because of the
     transform rules above. */
  .brand-toggle { transform: rotate(0deg) !important; }
  .sidebar[data-collapsed="0"] .brand-toggle::before { content: ''; }
}

/* simple skeleton */
.skel { background: linear-gradient(90deg, #eef0f6, #f6f7fb, #eef0f6); background-size: 200% 100%; animation: shimmer 1.2s infinite linear; border-radius: 8px; height: 14px; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.kbd { background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; font: 11.5px ui-monospace, Menlo, Consolas, monospace; color: var(--text-muted); }

/* =====================================================
   First-run wizard (wizard.js)
   Re-uses .modal-scrim + .modal chrome from the project/agent modals.
   ===================================================== */
.wiz-scrim { z-index: 80; }                     /* sit above toasts (which use z-index ~70) */
.modal.wiz-modal {
  width: min(640px, 96vw);
  max-height: min(92vh, 760px);
  padding: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.wiz-head { padding: 18px 22px 12px; border-bottom: 1px solid var(--border-soft); }
.wiz-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wiz-brand { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text); font-size: 14px; }
.wiz-brand-mark {
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--accent); color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: 13px;
}
.wiz-x {
  background: transparent; border: 0; color: var(--text-faint);
  font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 8px;
  border-radius: 6px;
}
.wiz-x:hover { background: var(--surface-2); color: var(--text); }
.wiz-dots { display: flex; gap: 6px; margin-top: 12px; }
.wiz-dot { flex: 1 1 0; height: 4px; border-radius: 2px; background: var(--border-soft); transition: background .15s; }
.wiz-dot.done    { background: var(--accent); }
.wiz-dot.current { background: var(--accent); opacity: .55; }
.wiz-body { padding: 20px 22px; overflow: auto; flex: 1 1 auto; }
.wiz-foot {
  padding: 12px 22px;
  border-top: 1px solid var(--border-soft);
  display: flex; align-items: center; gap: 8px;
}
.wiz-foot .wiz-spacer { flex: 1 1 auto; }
.wiz-h   { font-size: 19px; font-weight: 600; margin: 0 0 6px; color: var(--text); }
.wiz-sub { color: var(--text-muted); font-size: 14px; line-height: 1.5; margin: 0 0 16px; }
.wiz-fineprint { color: var(--text-faint); font-size: 12px; line-height: 1.5; margin: 14px 0 0; }
.wiz-err { color: var(--warn); font-size: 13px; margin-top: 6px; min-height: 18px; }

/* Step 1 — role grid */
.wiz-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 540px) { .wiz-roles { grid-template-columns: 1fr; } }
.wiz-role {
  display: flex; align-items: flex-start; gap: 12px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s, transform .06s;
}
.wiz-role:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.wiz-role.is-selected { border-color: var(--accent); background: var(--accent-soft); }
.wiz-role-ic { flex: 0 0 28px; width: 28px; height: 28px; color: var(--accent); margin-top: 2px; }
.wiz-role-ic svg { width: 24px; height: 24px; }
.wiz-role-label { font-weight: 600; font-size: 14px; color: var(--text); margin-bottom: 3px; }
.wiz-role-blurb { font-size: 12.5px; color: var(--text-muted); line-height: 1.4; }

/* Steps 2-4 — common field/cta */
.wiz-field { display: block; margin-bottom: 12px; }
.wiz-label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 6px; font-weight: 500; }
.wiz-field input[type="text"],
.wiz-field textarea {
  width: 100%; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: 9px;
  font-size: 14px; color: var(--text);
  background: var(--surface); outline: 0;
  transition: border-color .12s, box-shadow .12s;
  font-family: inherit;
}
.wiz-field textarea { resize: vertical; min-height: 60px; line-height: 1.45; }
.wiz-field input:focus,
.wiz-field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.wiz-cta { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; font-weight: 500; border-radius: 9px; }
.wiz-skip { margin-top: 14px; display: inline-block; }

/* Step 3 — drop zone + progress */
.wiz-drop {
  border: 2px dashed var(--border);
  border-radius: 12px;
  padding: 28px 18px;
  text-align: center;
  cursor: pointer;
  transition: border-color .12s, background .12s;
  background: var(--surface-2);
}
.wiz-drop:hover, .wiz-drop.is-hot { border-color: var(--accent); background: var(--accent-soft); }
.wiz-drop-ic { font-size: 28px; color: var(--accent); margin-bottom: 6px; line-height: 1; }
.wiz-drop-line { font-size: 14px; color: var(--text); margin-bottom: 4px; }
.wiz-drop-types { font-size: 12px; color: var(--text-muted); }
.wiz-progress { margin-top: 14px; }
.wiz-bar { background: var(--border-soft); border-radius: 999px; height: 8px; overflow: hidden; }
.wiz-bar span { display: block; height: 100%; background: var(--accent); transition: width .25s; }
.wiz-bar.done span { background: var(--success); }
.wiz-bar-label { font-size: 12.5px; color: var(--text-muted); margin-top: 6px; }
.wiz-bar-label.ok { color: var(--success); font-weight: 500; }

/* Step 4 — answer block */
.wiz-spinner { color: var(--text-muted); font-size: 13px; padding: 10px 0; }
.wiz-empty { color: var(--text-muted); font-size: 13px; padding: 10px 0; }
.wiz-answer { margin-top: 14px; }
.wiz-answer-text {
  background: var(--surface-2);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px; line-height: 1.55;
  color: var(--text);
}
/* Markdown-rendered children: zero out outer margins so the card stays
   tight, keep inner rhythm comfortable. */
.wiz-answer-text > :first-child { margin-top: 0; }
.wiz-answer-text > :last-child  { margin-bottom: 0; }
.wiz-answer-text p  { margin: 0 0 10px; }
.wiz-answer-text h4 { margin: 12px 0 6px; font-size: 14.5px; font-weight: 600; color: var(--text); }
.wiz-answer-text ul { margin: 0 0 10px; padding-left: 22px; }
.wiz-answer-text li { margin: 3px 0; }
.wiz-answer-text strong { font-weight: 600; color: var(--text); }
.wiz-answer-text em { font-style: italic; color: var(--text); }
.wiz-answer-text code {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font: 12.5px ui-monospace, Menlo, Consolas, monospace;
  color: var(--text);
}

/* Inline citation pill: small chip linked to the source list below. */
.wiz-cite-pill {
  display: inline-block;
  min-width: 18px;
  padding: 0 6px;
  margin: 0 2px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  line-height: 18px;
  vertical-align: baseline;
  transition: background .12s, color .12s;
}
.wiz-cite-pill:hover { background: var(--accent); color: #fff; text-decoration: none; }

.wiz-cite-head { font-size: 11.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin: 12px 0 4px; font-weight: 600; }
.wiz-cite-list { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.wiz-cite-list li {
  padding: 6px 8px;
  margin: 2px -8px;          /* pull the highlight bg out to the card edges */
  color: var(--text);
  border-radius: 6px;
  transition: background .25s;
}
.wiz-cite-num { color: var(--accent); font-weight: 600; margin-right: 4px; }

/* Brief flash when the user clicks a citation pill above. */
.wiz-cite-flash { background: var(--accent-soft); }
.wiz-trust {
  margin-top: 14px;
  padding: 8px 12px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.45;
}

/* Step 5 — next cards */
.wiz-next { display: grid; gap: 10px; margin: 4px 0 16px; }
.wiz-next-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  background: var(--surface);
}
.wiz-next-card.highlight {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.wiz-rec-tag {
  position: absolute; top: -10px; right: 14px;
  background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
  letter-spacing: .02em;
}
.wiz-next-title { font-weight: 600; font-size: 14px; color: var(--text); margin-bottom: 4px; }
.wiz-next-blurb { color: var(--text-muted); font-size: 12.5px; line-height: 1.5; margin-bottom: 10px; }
.wiz-next-cta {
  display: inline-block;
  padding: 7px 14px;
  font-size: 13px; font-weight: 500;
  border-radius: 8px;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: var(--surface);
  text-decoration: none;
}
.wiz-next-cta:hover { background: var(--accent); color: #fff; }

/* Sidebar pill (for users who skipped mid-wizard) */
.wiz-pill {
  display: flex; align-items: center; gap: 10px;
  margin: 12px 12px 16px;
  padding: 8px 10px 8px 8px;
  background: var(--accent-soft);
  border: 1px solid #c8d1ff;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12.5px; color: var(--text);
  text-align: left;
  transition: background .12s, border-color .12s;
}
.wiz-pill:hover { background: #dfe5ff; border-color: var(--accent); }
.wiz-pill-ring {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  flex: 0 0 26px;
}
.wiz-pill-ring-inner {
  background: var(--surface);
  width: 20px; height: 20px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 9.5px; font-weight: 600; color: var(--accent);
}
.wiz-pill-text { flex: 1 1 auto; font-weight: 500; }
.wiz-pill-x {
  color: var(--text-faint); font-size: 16px;
  padding: 0 6px; border-radius: 50%;
  line-height: 1;
}
.wiz-pill-x:hover { color: var(--warn); background: rgba(192,57,43,.08); }
.sidebar[data-collapsed="1"] .wiz-pill-text,
.sidebar[data-collapsed="1"] .wiz-pill-x { display: none; }
.sidebar[data-collapsed="1"] .wiz-pill { justify-content: center; padding: 8px; }