/* ══════════════════════════════════════════════════════════════════════════════
   QP-Chat — Design System Stylesheet
   Tokens synced from the Qanatpharma Design System (claude.ai/design,
   project "Qanatpharma Design System"). Brand: indigo #271060 + white,
   Neulis Neue display / Neulis Sans body, hairline borders, near-square controls (pills only on tags/badges),
   whisper-soft shadows, calm motion. Light theme = corporate site default.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
button, input, select, textarea { font-family: inherit; }

/* ── Brand webfonts: Neulis (TypeMates, licensed) served from local_assets ── */
@font-face {
  font-family: "Neulis Sans";
  src: url("/local-fonts/Neulis Sans/NeulisSans-Light.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neulis Sans";
  src: url("/local-fonts/Neulis Sans/NeulisSans-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neulis Sans";
  src: url("/local-fonts/Neulis Sans/NeulisSans-Italic.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Neulis Sans";
  src: url("/local-fonts/Neulis Sans/NeulisSans-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neulis Sans";
  src: url("/local-fonts/Neulis Sans/NeulisSans-SemiBold.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neulis Sans";
  src: url("/local-fonts/Neulis Sans/NeulisSans-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neulis Neue";
  src: url("/local-fonts/Neulis Neue/NeulisNeue-Light.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neulis Neue";
  src: url("/local-fonts/Neulis Neue/NeulisNeue-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neulis Neue";
  src: url("/local-fonts/Neulis Neue/NeulisNeue-SemiBold.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neulis Neue";
  src: url("/local-fonts/Neulis Neue/NeulisNeue-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neulis Neue";
  src: url("/local-fonts/Neulis Neue/NeulisNeue-ExtraBold.otf") format("opentype");
  font-weight: 800; font-style: normal; font-display: swap;
}

/* ════════════════════════════════════════════════════
   QP BRAND TOKENS — Light theme (default)
   Values from the Qanatpharma Design System tokens/ (colors, radii,
   elevation, motion), re-synced 2026-10-16. Legacy names kept so
   component rules did not have to change; DS name noted where it differs.
   ════════════════════════════════════════════════════ */
:root {
  /* ── Indigo ramp (DS --indigo-*; brand #271060 = DS --qp-indigo) ── */
  --qp-purple-950:      #150831;   /* indigo-950 */
  --qp-purple-900:      #1c0b41;   /* indigo-900 */
  --qp-purple-700:      #271060;   /* indigo-800 = --qp-indigo */
  --qp-purple-600:      #3b1f7d;   /* indigo-700 */
  --qp-purple-500:      #6b4fb3;   /* indigo-500 */
  --qp-purple-300:      #9484c9;   /* indigo-400 */
  --qp-purple-200:      #bdb2de;   /* indigo-300 */
  --qp-purple-100:      #ede9f7;   /* indigo-100 */
  --qp-purple-50:       #f6f3fb;   /* indigo-050 */

  /* Legacy aliases (used throughout components) */
  --qp-purple:          var(--qp-purple-700);
  --qp-purple-deep:     var(--qp-purple-900);
  --qp-purple-light:    var(--qp-purple-600);
  --qp-blue:            #007fff;
  --qp-blue-muted:      rgba(0, 127, 255, 0.32);
  --qp-amber:           #b87a00;

  /* ── Semantic surface tokens ── */
  --bg-app:             #ffffff;
  --bg-sidebar:         var(--qp-purple-700);
  --bg-surface:         #ffffff;
  --bg-surface-alt:     var(--qp-purple-50);
  --bg-hover:           var(--qp-purple-100);
  --bg-msg-user:        var(--qp-purple-700);
  --bg-msg-ai:          #ffffff;
  --bg-active:          #dcd5ee;   /* indigo-200 */
  --bg-card:            #ffffff;
  --bg-panel:           var(--qp-purple-50);

  /* ── Borders — DS hairlines are cool neutral, not purple-tinted ── */
  --border:             #d2d2d8;   /* border-default */
  --border-strong:      var(--qp-purple-700);
  --border-light:       #e6e6ea;   /* border-hairline */

  /* ── Text ── */
  --text-primary:       #1f1d26;   /* text-body */
  --text-strong:        var(--qp-purple-700);
  --text-secondary:     #5c5c67;   /* text-muted */
  --text-muted:         #84848f;   /* text-subtle (old #a5a5a5 failed contrast) */
  --text-on-dark:       #ffffff;
  --text-brand:         var(--qp-purple-700);
  --text-brand-muted:   var(--qp-purple-500);

  /* ── Interactive accent (DS: hover = indigo-700, press = indigo-900) ── */
  --accent:             var(--qp-purple-700);
  --accent-hover:       var(--qp-purple-600);
  --accent-active:      var(--qp-purple-900);
  --accent-blue:        #007fff;
  --accent-blue-hover:  #0070e0;
  --focus-ring:         0 0 0 3px rgba(0, 127, 255, 0.32);
  --focus-ring-color:   var(--accent);   /* outline colour of keyboard focus; = --accent in light theme */

  /* ── Source chips ── */
  --chip-src-bg:        var(--qp-purple-100);
  --chip-src-text:      var(--qp-purple-700);
  --chip-fact-bg:       #fbf1de;   /* amber-100 */
  --chip-fact-text:     #8b4500;   /* ponytail: darker than DS amber-500, which fails contrast on amber-100 */

  /* ── Status (DS semantic; amber text kept darker for contrast) ── */
  --green:              #1f6f52;
  --green-bg:           #e3f2ec;
  --amber:              #b45309;
  --amber-bg:           #fbf1de;
  --red:                #cc0000;
  --red-bg:             #fbe8e8;

  /* ── Typography — Neulis Neue display / Neulis Sans text + UI ── */
  --font-primary:       "Neulis Neue", "Hanken Grotesk", "Inter", system-ui, sans-serif;
  --font-secondary:     "Neulis Sans", "Hanken Grotesk", "Inter", system-ui, sans-serif;
  --font-mono:          "JetBrains Mono", "Fira Code", ui-monospace, monospace;
  --tracking-caps:      0.16em;    /* DS eyebrow */
  --tracking-tight:     -0.02em;

  /* ── Layout / effects — DS radii are near-square ── */
  --sidebar-w:          56px;
  --radius-control:     4px;       /* buttons, inputs, selects */
  --radius-sm:          4px;
  --radius-md:          6px;       /* cards, panels */
  --radius-lg:          10px;      /* dialogs, large media */
  --radius-xl:          16px;
  --radius-pill:        999px;     /* tags, badges, status dots only */
  --ease-standard:      cubic-bezier(0.2, 0, 0.2, 1);
  --ease-out:           cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:           140ms;
  --dur-base:           220ms;
  --dur-slow:           420ms;
  --shadow-card:        none;      /* DS: hairline only at rest */
  --shadow-card-hover:  0 4px 14px rgba(41,16,96,.07), 0 1px 3px rgba(0,0,36,.05);
  --shadow-toast:       0 16px 40px rgba(41,16,96,.10), 0 2px 6px rgba(0,0,36,.05);
}

/* ════════════════════════════════════════════════════
   DARK THEME — brand purple ramp, not generic violet
   ════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --bg-app:             #120b26;
  --bg-sidebar:         #0d0721;
  --bg-surface:         #1c1236;
  --bg-surface-alt:     #241844;
  --bg-hover:           #2c1f52;
  --bg-msg-user:        var(--qp-purple-600);
  --bg-msg-ai:          #1c1236;
  --bg-active:          #32255e;
  --bg-card:            #1c1236;
  --bg-panel:           #170e2e;
  --border:             #362a5c;
  --border-strong:      var(--qp-purple-500);
  --border-light:       #413370;
  --text-primary:       #ece8f8;
  --text-strong:        #ffffff;
  --text-secondary:     #a89dd0;
  --text-muted:         #6d5f9e;
  --text-on-dark:       #ffffff;
  --text-brand:         #ffffff;
  --text-brand-muted:   var(--qp-purple-300);
  --accent:             #4b2fa0;
  --accent-hover:       #5f3fc4;
  --accent-blue:        #4da6ff;
  --accent-blue-hover:  #8cc6ff;
  --focus-ring:         0 0 0 3px rgba(77, 166, 255, 0.35);
  /* Dark --accent (#4b2fa0) is only 2.0:1 on --bg-app. --qp-purple-300 (#9484c9) measured:
     5.81:1 on --bg-app (#120b26), 5.62 on --bg-panel, 5.38 on --bg-surface, 4.97 on --bg-surface-alt,
     4.49 on --bg-hover, 4.10 on --bg-active, 5.76 on the undo toast (--qp-purple-950). All >= 3:1. */
  --focus-ring-color:   var(--qp-purple-300);
  --chip-src-bg:        #2b1e55;
  --chip-src-text:      var(--qp-purple-200);
  --chip-fact-bg:       #2d2200;
  --chip-fact-text:     #eb9d3f;
  --green:              #34c98a;
  --green-bg:           #0b2e20;
  --amber:              #eb9d3f;
  --amber-bg:           #2d1f00;
  --red:                #f87171;
  --red-bg:             #2c0a0a;
  --shadow-card:        0 1px 4px rgba(0,0,0,0.4);
  --shadow-card-hover:  0 6px 20px rgba(0,0,0,0.5);
  --shadow-toast:       0 16px 40px rgba(0,0,0,0.5);
}

/* ── App shell ── */
html, body { font-family: var(--font-secondary); }
#app {
  display: flex;
  height: 100vh;
  background: var(--bg-app);
  color: var(--text-primary);
  overflow: hidden;
}

/* ── Sidebar ── */
#sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--bg-sidebar);
  border-right: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 0;
  gap: 0;
  z-index: 100;
  transition: width 0.2s ease, min-width 0.2s ease;
  overflow: hidden;
}

/* ponytail: the icon toolbar is deliberately frozen at its pre-DS look (owner decision 2026-10-16).
   Re-pin every token it reads so global token changes can't reach it. */
#sidebar { --bg-sidebar: #291060; --radius-md: 10px; --red: #d12222; --accent-blue: #367df6; --qp-purple-deep: #1c0a45; }
[data-theme="dark"] #sidebar { --bg-sidebar: #0d0721; --red: #f87171; --accent-blue: #6ea4f8; }

/* ── Expandable sidebar panel ── */
#sidebar.expanded { width: 240px; min-width: 240px; align-items: flex-start; }
#sidebar.expanded .sidebar-nav { align-items: flex-start; }
#sidebar.expanded .sidebar-bottom { align-items: flex-start; }
#sidebar.expanded .nav-item {
  width: 100%; height: auto; justify-content: flex-start;
  gap: 10px; padding: 10px 16px;
}
#sidebar.expanded .nav-item .tooltip {
  position: static; display: inline; visibility: visible;
  opacity: 1; background: none; color: inherit;
  padding: 0; font-size: 13px; box-shadow: none;
  transform: none; pointer-events: auto;
  white-space: nowrap;
}
#sidebar.expanded .nav-item svg { flex-shrink: 0; }
#sidebar.expanded .sidebar-logo { width: 100%; padding: 2px 12px; justify-content: flex-start; }
@media (max-width: 768px) { #sidebar.expanded { width: 100vw; min-width: 100vw; } }
.sidebar-logo {
  width: 40px; height: 40px;
  background: transparent;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.15s;
  padding: 2px;
}
.sidebar-logo:hover { opacity: 0.8; }
.sidebar-logo img {
  width: 36px; height: 36px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; width: 100%; align-items: center; }
.logout-form { margin: 0; display: contents; }
.logout-form .nav-item { background: none; border: 0; cursor: pointer; }
.logout-form .nav-item:focus-visible { outline: 2px solid var(--focus-ring-color); }
.sidebar-bottom { display: flex; flex-direction: column; gap: 2px; width: 100%; align-items: center; padding-bottom: 8px; }

.nav-item {
  position: relative;
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
  color: rgba(255,255,255,0.45);
  border: none; background: transparent;
  text-decoration: none;
}
.nav-item:hover { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.85); }
.nav-item.active {
  background: rgba(255,255,255,0.14);
  color: #ffffff;
  box-shadow: inset -2px 0 0 #ffffff;
}
[data-theme="dark"] .nav-item:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.8); }
[data-theme="dark"] .nav-item.active { background: rgba(255,255,255,0.1); }
.nav-item svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-badge {
  position: absolute; top: 4px; right: 2px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: var(--red, #f87171);
  color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  line-height: 1; border: 2px solid var(--bg-sidebar, #110d20);
}
.nav-gen-dot {
  position: absolute; top: 6px; right: 4px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-blue);
  animation: pulse 1.5s ease-in-out infinite;
}
.nav-item .tooltip {
  position: absolute;
  left: calc(var(--sidebar-w) - 8px);
  top: 50%; transform: translateY(-50%);
  background: var(--qp-purple-deep);
  color: #fff;
  font-size: 12px;
  font-family: var(--font-secondary);
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s 0.2s;
  z-index: 200;
  letter-spacing: 0.01em;
}
.nav-item:hover .tooltip { opacity: 1; }

/* ── Content area ── */
#content {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.tab-panel { display: none; flex: 1; min-height: 0; overflow: hidden; flex-direction: column; height: 100%; }
.tab-panel.active { display: flex; }

/* ── Tab panel sidebar (expanding sidebar between icon-sidebar and content) ── */
.tab-panel-sidebar {
  width: 240px; min-width: 240px;
  background: var(--bg-surface-alt, #f7f6fb);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
}
[data-theme="dark"] .tab-panel-sidebar { background: var(--bg-panel, #161324); }
.tab-panel-header {
  padding: 14px 16px; height: 49px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border);
}
.tab-panel-header h2 {
  font-size: 0.85rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--text-secondary); margin: 0;
}
.tab-panel-items { flex: 1; overflow-y: auto; padding: 8px; }
.tab-panel-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border-radius: var(--radius-md, 8px); cursor: pointer; transition: background 0.12s;
  font-size: 0.9rem; color: var(--text-secondary); border: none; background: transparent; width: 100%; text-align: left;
}
.tab-panel-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.tab-panel-item.active { background: var(--accent); color: var(--text-on-dark, #fff); }
[data-theme="dark"] .tab-panel-item.active { background: var(--bg-active); color: var(--text-on-dark, #fff); }
[data-theme="light"] .tab-panel-sidebar { background: var(--bg-panel); }
[data-theme="light"] .tab-panel-item.active { background: var(--bg-active); color: var(--text-primary); }
.tab-panel-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green, #22c55e); flex-shrink: 0; }
.tab-panel-dot.hidden { visibility: hidden; }
.tab-panel-count { margin-left: auto; font-size: 0.75rem; padding: 1px 6px; border-radius: var(--radius-pill); background: rgba(255,255,255,0.08); color: var(--text-muted); }

/* Status dropdown in tab panel */
.tab-status-dropdown { margin: 4px 8px 8px; }
.tab-status-dropdown select {
  width: 100%; padding: 6px 10px; border-radius: var(--radius-md, 8px);
  border: 1px solid var(--border); background: var(--bg-surface);
  color: var(--text-primary); font-size: 0.82rem; cursor: pointer;
}

/* ── Page header ── */
.page-header {
  height: 52px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 12px;
  flex-shrink: 0;
  background: var(--bg-app);
}
.page-title {
  font-size: 18px; font-weight: 400; color: var(--text-brand);
  font-family: var(--font-primary); letter-spacing: -0.01em;
}
[data-theme="dark"] .page-title { color: var(--text-primary); }
.page-header-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* ── ─────────────── CHAT TAB ─────────────── */
#chat-panel { background: var(--bg-app); }

#chat-header {
  height: 52px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 8px;
  flex-shrink: 0;
  background: var(--bg-app);
}
#chat-session-title {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-primary);
  background: transparent;
  border: none;
  outline: none;
  cursor: text;
  min-width: 0;
  flex: 1;
  font-family: var(--font-primary);
  letter-spacing: 0.01em;
}
#chat-session-title:focus { color: var(--text-strong); }
.icon-btn {
  width: 32px; height: 32px;
  border-radius: var(--radius-md);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.icon-btn:hover { background: var(--bg-hover); color: var(--accent); }
.icon-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

#chat-thread {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  align-self: stretch;
}
#chat-thread::-webkit-scrollbar { width: 4px; }
#chat-thread::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 2px; }

/* Streaming cursor */
.stream-cursor { animation: blink 0.7s step-end infinite; color: var(--accent); }
@keyframes blink { 50% { opacity: 0; } }
.stream-text { white-space: pre-wrap; }

/* Empty state — landing hero. */
.chat-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 1; gap: 14px; text-align: center; color: var(--text-secondary);
  padding: 48px;
  position: relative;
  overflow: hidden;
}
.chat-empty > * { position: relative; z-index: 1; }
.chat-empty-logo { width: 104px; height: auto; margin-bottom: 2px; }
.chat-header-logo { height: 28px; width: auto; align-self: center; margin-right: 4px; }
/* Wordmark shown when the optional branding bundle is absent. */
.chat-empty-logo--text {
  font-family: var(--font-primary); font-weight: 800; font-size: 44px;
  color: var(--text-brand); letter-spacing: var(--tracking-tight);
  line-height: 1; height: auto;
}
.chat-empty h2 {
  font-size: 30px; font-weight: 300; color: var(--text-brand);
  font-family: var(--font-primary); letter-spacing: var(--tracking-tight);
  line-height: 1.15;
}
.chat-empty p { font-size: 15px; max-width: 400px; line-height: 1.65; color: var(--text-secondary); font-weight: 400; }
.chat-empty-pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px; }
.chat-empty-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 18px; border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  font-size: 13px; cursor: pointer; color: var(--text-primary);
  transition: background var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
  font-family: var(--font-secondary); font-weight: 500;
  background: var(--bg-surface-alt);
}
.chat-empty-pill svg { color: var(--text-brand-muted); flex-shrink: 0; }
[data-theme="dark"] .chat-empty-pill { border-color: var(--border-light); color: var(--text-secondary); background: transparent; }
.chat-empty-pill:hover {
  background: var(--qp-purple); color: #fff; border-color: var(--qp-purple);
}
.chat-empty-pill:hover svg { color: #fff; }
[data-theme="dark"] .chat-empty-pill:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-light); }
@media (prefers-reduced-motion: reduce) {
  .chat-empty-pill, .chip, .btn-primary, .btn-secondary, #send-btn { transition: none; }
}

/* Messages */
.msg { display: flex; gap: 10px; align-items: flex-start; }
.msg.user { flex-direction: row-reverse; }
.msg-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; letter-spacing: 0.03em;
}
.msg.ai .msg-avatar { background: var(--qp-purple); color: white; }
[data-theme="dark"] .msg.ai .msg-avatar { background: var(--accent); }
.msg.user .msg-avatar { background: var(--bg-surface-alt); color: var(--text-secondary); border: 1px solid var(--border-light); font-size: 10px; }
.msg-body { max-width: 85%; display: flex; flex-direction: column; gap: 8px; }
.msg.user .msg-body { align-items: flex-end; }
.msg-bubble {
  position: relative;
  padding: 11px 15px;
  border-radius: var(--radius-xl);
  font-size: 14px;
  line-height: 1.65;
  font-family: var(--font-secondary);
  font-weight: 300;
}
.msg-action-btns { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; opacity: 0; transition: opacity 0.15s; }
.msg-bubble:hover .msg-action-btns { opacity: 0.7; }
.msg-action-btns:hover { opacity: 1 !important; }
.msg-copy-btn, .msg-regen-btn, .msg-speak-btn { background: transparent; border: none; color: var(--text-secondary); cursor: pointer; padding: 4px; border-radius: 4px; }
.msg-copy-btn:hover, .msg-regen-btn:hover, .msg-speak-btn:hover { background: rgba(255,255,255,0.1); color: var(--text-primary); }
[data-theme="light"] .msg-copy-btn:hover, [data-theme="light"] .msg-regen-btn:hover, [data-theme="light"] .msg-speak-btn:hover { background: rgba(0,0,0,0.05); }
.msg-feedback { display: flex; gap: 4px; margin-top: 4px; }
.msg-feedback-btn { background: transparent; border: 1px solid var(--border); color: var(--text-secondary); cursor: pointer; padding: 3px 6px; border-radius: 4px; transition: all 0.15s; display: flex; align-items: center; }
.msg-feedback-btn:hover:not(:disabled) { background: rgba(255,255,255,0.08); color: var(--text-primary); border-color: var(--text-muted); }
.msg-feedback-btn.feedback-selected { color: var(--accent); border-color: var(--accent); opacity: 1 !important; }
[data-theme="light"] .msg-feedback-btn:hover:not(:disabled) { background: rgba(0,0,0,0.04); }
.msg.user .msg-bubble {
  background: var(--bg-msg-user);
  color: #fff;
  border-bottom-right-radius: var(--radius-sm);
  font-weight: 400;
}
.msg.ai .msg-bubble {
  background: var(--bg-msg-ai);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-bottom-left-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
}
[data-theme="dark"] .msg.ai .msg-bubble { border-left-color: var(--accent); }
.msg-bubble p { margin: 0 0 8px; }
.msg-bubble p:last-child { margin-bottom: 0; }
.msg-bubble strong { font-weight: 600; color: var(--text-strong); }
[data-theme="dark"] .msg-bubble strong { color: var(--text-primary); }
.msg-bubble em { font-style: italic; color: var(--text-secondary); }
.msg-bubble code {
  background: var(--bg-surface-alt); padding: 1px 5px; border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 12px; color: var(--qp-purple);
  border: 1px solid var(--border);
}
[data-theme="dark"] .msg-bubble code { color: var(--accent); }
.msg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: var(--radius-sm);
  font-size: 11px; font-weight: 400; font-family: var(--font-secondary);
  cursor: pointer; transition: all 0.15s;
  letter-spacing: 0.01em;
}
.chip:hover { border-color: var(--border-strong); }
.chip-src { background: var(--chip-src-bg); color: var(--chip-src-text); border: 1px solid rgba(41,16,96,0.12); }
.chip-fact { background: var(--chip-fact-bg); color: var(--chip-fact-text); border: 1px solid rgba(180,90,0,0.1); }
[data-theme="dark"] .chip-src { border: none; }
[data-theme="dark"] .chip-fact { border: none; }
.chip-icon { font-size: 10px; }
.msg-meta { font-size: 11px; color: var(--text-muted); padding: 0 2px; font-family: var(--font-secondary); }

/* Typing indicator */
.typing-dots { display: flex; gap: 4px; align-items: center; padding: 4px 0; }
.typing-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-muted);
  animation: dot-bounce 1.2s infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dot-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }

/* Source chip wrappers */
.source-chip-wrapper { margin: 4px 0; }
.source-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: transparent;
  color: var(--text-primary); cursor: pointer;
  font-size: 0.82rem; transition: background 0.15s;
  font-family: var(--font-secondary);
}
.source-chip:hover { background: rgba(255,255,255,0.08); }
.source-layer {
  font-size: 0.75rem; color: var(--text-secondary);
  padding: 1px 6px; background: rgba(255,255,255,0.06); border-radius: var(--radius-pill);
}
[data-theme="light"] .source-chip:hover { background: rgba(0,0,0,0.04); }
[data-theme="light"] .source-layer { background: rgba(0,0,0,0.04); }

/* Source expand panel */
.source-expand {
  max-height: 0; overflow: hidden;
  transition: max-height 0.25s ease-out;
}
.source-expand.open { max-height: 300px; overflow-y: auto; }
.source-content {
  padding: 8px 12px; margin: 4px 0;
  font-size: 0.82rem; color: var(--text-secondary);
  border-left: 3px solid var(--qp-purple);
  background: rgba(0,0,0,0.15);
  border-radius: 0 8px 8px 0;
  white-space: pre-wrap; word-break: break-word;
  font-family: var(--font-secondary); line-height: 1.65;
}
[data-theme="dark"] .source-content { border-left-color: var(--accent); }
[data-theme="light"] .source-content { background: rgba(0,0,0,0.03); }
.source-expand-title { font-weight: 500; color: var(--qp-purple); margin-bottom: 4px; font-size: 12px; }
[data-theme="dark"] .source-expand-title { color: var(--accent); }

/* Chat input area */
#chat-input-area {
  border-top: 1px solid var(--border);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  align-self: stretch;
  flex-shrink: 0;
  background: var(--bg-app);
}
.mode-selector {
  display: flex; gap: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  overflow: hidden; align-self: flex-start;
}
[data-theme="dark"] .mode-selector { border-color: var(--border); }
.mode-btn {
  padding: 5px 16px; border: none; background: transparent; cursor: pointer;
  font-size: 12px; font-weight: 400; color: var(--text-secondary);
  transition: all 0.15s; font-family: var(--font-secondary); letter-spacing: 0.01em;
}
.mode-btn:not(:last-child) { border-right: 1px solid var(--border-strong); }
[data-theme="dark"] .mode-btn:not(:last-child) { border-right-color: var(--border); }
.mode-btn.active { background: var(--qp-purple); color: white; font-weight: 400; }
[data-theme="dark"] .mode-btn.active { background: var(--accent); }
.mode-btn:not(.active):hover { background: var(--bg-hover); color: var(--qp-purple); }
[data-theme="dark"] .mode-btn:not(.active):hover { color: var(--text-primary); }

.thinking-toggle {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  margin-left: 8px; padding: 4px 10px; border-radius: var(--radius-control);
  font-size: 11px; font-weight: 500; color: var(--text-secondary);
  border: 1px solid transparent; transition: all 0.15s;
  font-family: var(--font-secondary); letter-spacing: 0.01em;
  user-select: none;
}
.thinking-toggle input { display: none; }
.thinking-toggle:hover { color: var(--text-primary); }
.thinking-toggle:has(input:checked) {
  color: var(--accent); border-color: var(--accent);
  background: var(--chip-src-bg);
}

.input-row { display: flex; gap: 8px; align-items: flex-end; }
#chat-input {
  flex: 1;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 11px 15px;
  font-size: 14px;
  color: var(--text-primary);
  resize: none;
  outline: none;
  min-height: 44px;
  max-height: 140px;
  font-family: var(--font-secondary);
  font-weight: 300;
  line-height: 1.55;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-shadow: none;
}
#chat-input:focus {
  border-color: var(--qp-blue);
  box-shadow: var(--focus-ring);
}
[data-theme="dark"] #chat-input:focus { border-color: var(--accent-blue); box-shadow: var(--focus-ring); }
#chat-input::placeholder { color: var(--text-muted); font-weight: 300; }
#send-btn {
  width: 40px; height: 40px; border-radius: var(--radius-control);
  background: var(--qp-purple); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: white; transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); flex-shrink: 0;
}
#send-btn:hover { background: var(--accent-hover); }
[data-theme="dark"] #send-btn { background: var(--accent); }
[data-theme="dark"] #send-btn:hover { background: var(--accent-hover); }
#send-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Attachment button and badges */
.attach-btn {
  width: 40px; height: 40px; border-radius: var(--radius-control);
  background: transparent; border: 1px solid var(--border-light); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); transition: color 0.15s, border-color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.attach-btn:hover { color: var(--accent); border-color: var(--accent); }
.attach-btn:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; }
#mic-btn.recording { color: var(--accent); border-color: var(--accent); animation: mic-pulse 1.2s ease-in-out infinite; }
@keyframes mic-pulse { 50% { opacity: 0.45; } }
[data-theme="dark"] .attach-btn { border-color: var(--border); }
[data-theme="dark"] .attach-btn:hover { color: var(--accent); border-color: var(--accent); }
.attach-btn.uploading { opacity: 0.5; pointer-events: none; animation: pulse-opacity 1s ease-in-out infinite; }
@keyframes pulse-opacity { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.8; } }
.attach-btn svg { stroke: currentColor; }

#attachment-badges {
  display: none; flex-direction: column; gap: 6px; padding: 0 0 8px 0;
}

/* Attachment card (chat input + sent message): file, state line, labelled
   "Add to knowledge base" button. Reading/saving show a spinner and an
   indeterminate bar: the server reports no progress. */
.att-card {
  display: flex; align-items: center; gap: 10px; position: relative; overflow: hidden;
  max-width: 560px; width: 100%;
  border: 1px solid var(--border); background: var(--bg-surface);
  border-radius: var(--radius-md); padding: 8px 8px 8px 10px;
  color: var(--text-primary); font-family: var(--font-secondary); text-align: left;
}
.att-ic {
  width: 32px; height: 38px; flex: none; display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 4px; border-radius: 3px;
  background: var(--bg-surface-alt); border: 1px solid var(--border-light);
  font-size: 8.5px; font-weight: 600; letter-spacing: 0.06em; color: var(--chip-src-text);
}
.att-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.att-name {
  font-size: 13px; font-weight: 500; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.att-meta {
  font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px;
  min-width: 0; flex-wrap: wrap;
}
.att-meta a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.att-meta-ok { color: var(--green); }
.att-meta-err { color: var(--red); }
.att-action { display: flex; flex: none; }
.att-action:empty { display: none; }
.qp-icon { display: inline-flex; flex: none; }
.att-x {
  width: 26px; height: 26px; flex: none; display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--text-muted); border-radius: var(--radius-control);
  cursor: pointer;
}
.att-x:hover { color: var(--text-primary); background: var(--bg-hover); }
.att-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  border-radius: var(--radius-control); border: 1px solid var(--border);
  background: var(--bg-surface); color: var(--text-primary);
  font-family: var(--font-secondary); font-size: 12px; font-weight: 500; white-space: nowrap; cursor: pointer;
}
.att-btn:hover:not(:disabled) { background: var(--bg-hover); }
.att-btn:disabled { opacity: 0.5; cursor: default; }
.att-btn-kb { border-color: var(--accent); background: var(--chip-src-bg); color: var(--chip-src-text); }
[data-theme="dark"] .att-btn-kb { border-color: var(--border-strong); }
.att-btn-primary { border-color: var(--accent); background: var(--accent); color: var(--text-on-dark); }
.att-btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.att-btn:focus-visible, .att-x:focus-visible, .att-meta a:focus-visible {
  outline: none; box-shadow: var(--focus-ring); border-color: var(--accent-blue);
}
.att-spin {
  width: 14px; height: 14px; flex: none; border-radius: 50%;
  border: 2px solid var(--bg-hover); border-top-color: var(--accent-blue);
  animation: att-spin 0.9s linear infinite;
}
@keyframes att-spin { to { transform: rotate(360deg); } }
.att-bar { display: none; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--bg-hover); overflow: hidden; }
.att-card[aria-busy="true"] .att-bar { display: block; }
.att-bar::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 38%; left: -38%;
  background: var(--accent-blue); animation: att-ind 1.4s var(--ease-standard) infinite;
}
@keyframes att-ind { to { left: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .att-spin, .att-bar::after { animation: none; }
  .att-bar::after { left: 0; width: 100%; opacity: 0.4; }
}
@media (max-width: 600px) {
  .att-card { flex-wrap: wrap; }
  .att-action { order: 5; width: 100%; }
  .att-action .att-btn { width: 100%; justify-content: center; height: 32px; }
}

/* Attachment cards in sent user messages */
.msg-attachments { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; width: 100%; }
.msg-attachments .att-card { max-width: 480px; }

/* Zotero push status line (one line, coloured only when it asks) */
.zotero-upload-line { margin-top: 2px; }
.zotero-status {
  display: flex; align-items: flex-start; gap: 8px; max-width: 520px; text-align: left;
  font-size: 12.5px; line-height: 1.45; color: var(--text-secondary);
}
.msg-attachments .zotero-status { max-width: 480px; width: 100%; }
.zotero-status .zs-icon { margin-top: 1px; color: var(--text-muted); }
.zotero-status .zs-text { flex: 1; min-width: 0; }
.zotero-status .zs-text b { font-weight: 500; color: var(--text-primary); }
.zotero-status .zs-text small { display: block; font-size: 12px; color: var(--text-muted); }
.zotero-status .zs-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-muted);
}
.zotero-status .zs-tag {
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid var(--border); color: var(--text-muted); border-radius: var(--radius-pill);
  padding: 1px 6px; margin-left: 6px; vertical-align: 1px;
}
.zotero-status .zs-actions { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.zotero-status.zs-tone-ask { background: var(--amber-bg); border-radius: var(--radius-md); padding: 8px 10px; }
.zotero-status.zs-tone-ask .zs-icon { color: var(--amber); }
.zotero-status.zs-tone-ok .zs-icon { color: var(--green); }
.zotero-status.zs-tone-err .zs-icon { color: var(--red); }

.input-footer { display: flex; gap: 8px; align-items: center; }
.layer-select {
  background: transparent; border: 1px solid var(--border-light); border-radius: var(--radius-sm);
  padding: 3px 8px; font-size: 12px; color: var(--text-secondary);
  cursor: pointer; outline: none; font-family: var(--font-secondary);
  transition: border-color 0.15s;
}
.layer-select:focus { border-color: var(--qp-blue); }
.new-chat-btn {
  font-size: 12px; color: var(--text-secondary);
  background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 3px 10px; cursor: pointer; transition: all 0.15s;
  font-family: var(--font-secondary); font-weight: 400;
}
[data-theme="dark"] .new-chat-btn { color: var(--text-secondary); border-color: var(--border); }
.new-chat-btn:hover { background: var(--qp-purple); color: white; }
[data-theme="dark"] .new-chat-btn:hover { color: var(--text-primary); border-color: var(--border-light); background: var(--bg-hover); }
#thinking-label {
  margin-left: auto;
  font-size: 12px; color: var(--text-secondary);
  background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 3px 10px; cursor: pointer; transition: all 0.15s;
  font-family: var(--font-secondary); font-weight: 400;
}
#web-label, #research-label {
  font-size: 12px; color: var(--text-secondary);
  background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 3px 10px; cursor: pointer; transition: all 0.15s;
  font-family: var(--font-secondary); font-weight: 400;
}
[data-theme="dark"] #thinking-label, [data-theme="dark"] #web-label, [data-theme="dark"] #research-label { color: var(--text-secondary); border-color: var(--border); }
#thinking-label:hover, #web-label:hover, #research-label:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-light); }
#thinking-label.active, #web-label.active, #research-label.active { color: var(--chip-src-text); border-color: var(--chip-src-text); }
#thinking-label:focus-visible, #web-label:focus-visible, #research-label:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; }

/* ── ─────────────── DOCUMENTS TAB ─────────────── */
#docs-panel { overflow: hidden; }
.panel-body { flex: 1; overflow-y: auto; padding: 20px; }
.panel-body::-webkit-scrollbar { width: 4px; }
.panel-body::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 2px; }

.filter-bar {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 12px 20px; border-bottom: 1px solid var(--border);
  background: var(--bg-app); flex-shrink: 0;
}
.filter-input {
  flex: 1; min-width: 200px;
  background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-control);
  padding: 7px 13px; font-size: 13px; color: var(--text-primary);
  outline: none; font-family: var(--font-secondary); font-weight: 300;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.filter-input:focus { border-color: var(--qp-blue); box-shadow: var(--focus-ring); }
[data-theme="dark"] .filter-input:focus { border-color: var(--accent-blue); box-shadow: var(--focus-ring); }
.filter-input::placeholder { color: var(--text-muted); }
.filter-select {
  background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-control);
  padding: 7px 10px; font-size: 13px; color: var(--text-secondary);
  cursor: pointer; outline: none; font-family: var(--font-secondary);
  transition: border-color 0.15s;
}
.filter-select:focus { border-color: var(--qp-blue); }

/* ── Buttons — QP pills: full-round, semibold, 1px hover lift ── */
.btn-primary {
  background: var(--qp-purple); color: white; border: none; border-radius: var(--radius-pill);
  padding: 8px 18px; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
  font-family: var(--font-secondary); letter-spacing: 0.01em;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:focus-visible { outline: none; box-shadow: var(--focus-ring); }
[data-theme="dark"] .btn-primary { background: var(--accent); }
[data-theme="dark"] .btn-primary:hover { background: var(--accent-hover); }
.btn-secondary {
  background: transparent; color: var(--qp-purple); border: 1.5px solid var(--qp-purple);
  border-radius: var(--radius-control); padding: 7px 16px; font-size: 13px; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
  font-family: var(--font-secondary); font-weight: 600;
  letter-spacing: 0.01em;
}
.btn-secondary:hover { background: var(--qp-purple-50); }
.btn-secondary:focus-visible { outline: none; box-shadow: var(--focus-ring); }
[data-theme="dark"] .btn-secondary { color: var(--text-secondary); border-color: var(--border); }
[data-theme="dark"] .btn-secondary:hover { color: var(--text-primary); background: var(--bg-hover); border-color: var(--border-light); }

.doc-list { display: flex; flex-direction: column; gap: 1px; }
.doc-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: var(--radius-md);
  transition: background 0.15s; cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.doc-row:last-child { border-bottom: none; }
.doc-row:hover { background: var(--bg-hover); }
.doc-icon { font-size: 16px; flex-shrink: 0; opacity: 0.7; }
.doc-info { flex: 1; min-width: 0; }
.doc-title {
  font-size: 14px; font-weight: 400; color: var(--text-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--font-primary);
}
[data-theme="dark"] .doc-title { color: var(--text-primary); }
.doc-meta {
  font-size: 12px; color: var(--text-secondary); margin-top: 3px;
  display: flex; gap: 8px; flex-wrap: wrap; font-family: var(--font-secondary); font-weight: 300;
}
.doc-actions { display: flex; gap: 4px; opacity: 0; transition: opacity 0.15s; }
.doc-row:hover .doc-actions { opacity: 1; }
.doc-action-btn {
  padding: 3px 9px; border-radius: var(--radius-sm); font-size: 11px; color: var(--text-secondary);
  background: transparent; border: 1px solid var(--border-light); cursor: pointer; transition: all 0.15s;
  font-family: var(--font-secondary);
}
.doc-action-btn:hover { color: var(--qp-purple); border-color: var(--qp-purple); background: var(--bg-surface-alt); }
[data-theme="dark"] .doc-action-btn:hover { color: var(--accent); border-color: var(--accent); background: transparent; }

/* ── Badges ── */
.badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px; border-radius: var(--radius-sm);
  font-size: 11px; font-weight: 400; font-family: var(--font-secondary); letter-spacing: 0.02em;
}
.badge-common { background: #ece8f8; color: var(--qp-purple); }
[data-theme="dark"] .badge-common { background: var(--chip-src-bg); color: var(--chip-src-text); }
.badge-private { background: #e8f8f0; color: #166534; }
[data-theme="dark"] .badge-private { background: rgba(16,185,129,0.12); color: #6ee7b7; }
.badge-leadership { background: #fff7e6; color: #92400e; }
[data-theme="dark"] .badge-leadership { background: rgba(245,158,11,0.12); color: var(--amber); }
.badge-public { background: #eef2ff; color: #3730a3; }
[data-theme="dark"] .badge-public { background: rgba(99,102,241,0.12); color: #a5b4fc; }
.badge-source { background: var(--bg-surface-alt); color: var(--text-secondary); border: 1px solid var(--border); }
.badge-green { background: var(--green-bg); color: var(--green); }
.badge-red { background: var(--red-bg); color: var(--red); }
.badge-amber { background: var(--amber-bg); color: var(--amber); }

.status-dot {
  width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex-shrink: 0;
}
.status-dot.green { background: var(--green); }
.status-dot.amber { background: var(--amber); animation: pulse-dot 2s infinite; }
.status-dot.red { background: var(--red); }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ── ─────────────── KNOWLEDGE TAB ─────────────── */
.knowledge-search-area { padding: 36px 24px 20px; max-width: 700px; margin: 0 auto; width: 100%; flex-shrink: 0; }
.knowledge-search-title {
  font-size: 26px; font-weight: 300; margin-bottom: 18px;
  color: var(--text-brand); font-family: var(--font-primary); letter-spacing: var(--tracking-tight);
}
[data-theme="dark"] .knowledge-search-title { color: var(--text-primary); }
.knowledge-search-row { display: flex; gap: 8px; }
.knowledge-input {
  flex: 1;
  background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-md);
  padding: 11px 15px; font-size: 14px; color: var(--text-primary);
  outline: none; font-family: var(--font-secondary); font-weight: 300;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.knowledge-input:focus {
  border-color: var(--qp-blue);
  box-shadow: var(--focus-ring);
}
[data-theme="dark"] .knowledge-input:focus { border-color: var(--accent-blue); box-shadow: var(--focus-ring); }
.knowledge-input::placeholder { color: var(--text-muted); font-weight: 300; }

.knowledge-results { flex: 1; overflow-y: auto; padding: 0 24px 24px; max-width: 700px; margin: 0 auto; width: 100%; }
.knowledge-results::-webkit-scrollbar { width: 4px; }
.knowledge-results::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 2px; }

.intent-badge-row {
  display: flex; gap: 8px; align-items: center; margin-bottom: 16px;
  font-size: 13px; color: var(--text-secondary); font-family: var(--font-secondary);
}
.result-card {
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 15px 18px; margin-bottom: 10px; cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-shadow: var(--shadow-card);
}
.result-card:hover { border-color: var(--qp-purple); box-shadow: var(--shadow-card-hover); }
[data-theme="dark"] .result-card:hover { border-color: var(--accent); }
.result-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.result-card-title { font-size: 13px; font-weight: 500; color: var(--qp-purple); flex: 1; font-family: var(--font-primary); }
[data-theme="dark"] .result-card-title { color: var(--text-primary); }
.result-score { font-size: 11px; color: var(--text-muted); margin-left: auto; font-family: var(--font-mono); }
.result-card-body { font-size: 13px; color: var(--text-secondary); line-height: 1.65; font-family: var(--font-secondary); font-weight: 300; }
.result-card-body em { font-style: normal; background: rgba(41,16,96,0.1); border-radius: 2px; padding: 0 3px; color: var(--qp-purple); }
[data-theme="dark"] .result-card-body em { background: var(--chip-src-bg); color: var(--chip-src-text); }

/* ── ─────────────── ACTIONS TAB ─────────────── */
.tab-nav { display: flex; gap: 0; border-bottom: 1px solid var(--border); padding: 0 20px; flex-shrink: 0; }
.tab-nav-btn {
  padding: 11px 16px; border: none; background: transparent; cursor: pointer;
  font-size: 13px; color: var(--text-secondary); border-bottom: 2px solid transparent;
  margin-bottom: -1px; transition: all 0.15s; font-family: var(--font-secondary); font-weight: 300;
}
.tab-nav-btn:hover { color: var(--qp-purple); }
[data-theme="dark"] .tab-nav-btn:hover { color: var(--text-primary); }
.tab-nav-btn.active { color: var(--qp-purple); border-bottom-color: var(--qp-purple); font-weight: 400; }
[data-theme="dark"] .tab-nav-btn.active { color: var(--accent); border-bottom-color: var(--accent); }

.action-list { display: flex; flex-direction: column; }
.action-row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 20px; border-bottom: 1px solid var(--border);
  transition: background 0.15s; cursor: pointer;
}
.action-row:last-child { border-bottom: none; }
.action-row:hover { background: var(--bg-hover); }
.action-row-body { flex: 1; min-width: 0; }
.action-title {
  font-size: 14px; font-weight: 400; color: var(--text-strong); margin-bottom: 3px;
  font-family: var(--font-primary);
}
[data-theme="dark"] .action-title { color: var(--text-primary); }
.action-meta {
  font-size: 12px; color: var(--text-secondary); display: flex; gap: 8px;
  font-family: var(--font-secondary); font-weight: 300;
}
.action-row-right { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

/* ── ─────────────── CONNECTORS TAB ─────────────── */
.connector-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; padding: 20px; }
.connector-card {
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 20px; box-shadow: none;
  transition: border-color 0.2s;
}
.connector-card:hover { border-color: var(--qp-purple-300); }
.connector-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.connector-logo {
  width: 36px; height: 36px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0; background: var(--bg-surface-alt);
  border: 1px solid var(--border);
}
.connector-name {
  font-size: 15px; font-weight: 400; color: var(--qp-purple);
  font-family: var(--font-primary); letter-spacing: 0.005em;
}
[data-theme="dark"] .connector-name { color: var(--text-primary); }
.connector-status { margin-left: auto; }
.toggle {
  position: relative; width: 36px; height: 20px; cursor: pointer;
}
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-track {
  position: absolute; inset: 0; background: var(--bg-hover); border-radius: 10px;
  transition: background 0.2s; border: 1px solid var(--border-light);
}
.toggle input:checked + .toggle-track { background: var(--qp-purple); border-color: var(--qp-purple); }
[data-theme="dark"] .toggle input:checked + .toggle-track { background: var(--accent); border-color: var(--accent); }
.toggle-thumb {
  position: absolute; left: 2px; top: 2px; width: 14px; height: 14px;
  background: white; border-radius: 50%; transition: transform 0.2s;
  pointer-events: none; box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.toggle input:checked ~ .toggle-thumb { transform: translateX(16px); }

.connector-field { margin-bottom: 11px; }
.connector-label {
  font-size: 12px; color: var(--text-secondary); margin-bottom: 5px; display: block;
  font-family: var(--font-secondary); font-weight: 400; letter-spacing: 0.02em;
}
.connector-input-row { display: flex; gap: 6px; }
.connector-input {
  flex: 1; background: var(--bg-app); border: 1px solid var(--border-light); border-radius: var(--radius-md);
  padding: 7px 11px; font-size: 13px; color: var(--text-primary);
  outline: none; font-family: var(--font-secondary); font-weight: 300;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.connector-input:focus { border-color: var(--qp-blue); box-shadow: var(--focus-ring); }
[data-theme="dark"] .connector-input:focus { border-color: var(--accent-blue); box-shadow: var(--focus-ring); }
.show-hide-btn {
  width: 32px; height: 32px; border-radius: var(--radius-md); border: 1px solid var(--border-light);
  background: var(--bg-app); cursor: pointer; color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: all 0.15s;
}
.show-hide-btn:hover { border-color: var(--qp-purple); color: var(--qp-purple); }
[data-theme="dark"] .show-hide-btn:hover { border-color: var(--accent); color: var(--accent); }
.show-hide-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.connector-footer { display: flex; gap: 8px; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.connector-last-sync { font-size: 11px; color: var(--text-muted); margin-left: auto; font-family: var(--font-secondary); }
.test-result { font-size: 12px; padding: 4px 10px; border-radius: var(--radius-sm); font-family: var(--font-secondary); }
.test-result.success { background: var(--green-bg); color: var(--green); }
.test-result.error { background: var(--red-bg); color: var(--red); }

/* ── ─────────────── SETTINGS TAB ─────────────── */
.settings-body { max-width: 600px; padding: 28px; }
.settings-section { margin-bottom: 36px; }
.settings-section h3 {
  font-size: 13px; font-weight: 500; color: var(--qp-purple);
  margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--border);
  font-family: var(--font-primary); letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
[data-theme="dark"] .settings-section h3 { color: var(--text-secondary); }
.settings-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; gap: 16px; }
.settings-label {
  font-size: 14px; color: var(--text-strong); font-family: var(--font-primary); font-weight: 400;
}
[data-theme="dark"] .settings-label { color: var(--text-primary); }
.settings-desc { font-size: 12px; color: var(--text-secondary); margin-top: 2px; font-family: var(--font-secondary); font-weight: 300; }
.radio-group {
  display: flex; gap: 0;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md); overflow: hidden;
}
[data-theme="dark"] .radio-group { border-color: var(--border); }
.radio-btn {
  flex: 1; padding: 7px 16px; border: none; background: transparent; cursor: pointer;
  font-size: 13px; color: var(--text-secondary); font-family: var(--font-secondary);
  font-weight: 300; transition: all 0.15s; text-align: center; letter-spacing: 0.01em;
}
.radio-btn:not(:last-child) { border-right: 1px solid var(--border-strong); }
[data-theme="dark"] .radio-btn:not(:last-child) { border-right-color: var(--border); }
.radio-btn.active { background: var(--qp-purple); color: white; font-weight: 400; }
[data-theme="dark"] .radio-btn.active { background: var(--accent); }
.radio-btn:not(.active):hover { background: var(--bg-hover); color: var(--qp-purple); }
[data-theme="dark"] .radio-btn:not(.active):hover { color: var(--text-primary); }

.model-select-row { display: flex; gap: 8px; align-items: center; }
.model-select {
  flex: 1; background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-md);
  padding: 7px 10px; font-size: 13px; color: var(--text-primary); outline: none;
  font-family: var(--font-secondary); transition: border-color 0.15s;
}
.model-select:focus { border-color: var(--qp-blue); }
.health-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.health-btn {
  padding: 6px 14px; border-radius: var(--radius-md); background: transparent;
  border: 1px solid var(--border-light); font-size: 12px; color: var(--text-secondary);
  cursor: pointer; font-family: var(--font-secondary); transition: all 0.15s;
}
.health-btn:hover { border-color: var(--qp-purple); color: var(--qp-purple); }
[data-theme="dark"] .health-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ── Scrollbar global ── */
* { scrollbar-width: thin; scrollbar-color: var(--border-light) transparent; }

/* ── Toast container ── */
#toast-container {
  position: fixed; bottom: 36px; right: 24px;
  display: flex; flex-direction: column-reverse; gap: 6px;
  z-index: 999; pointer-events: none;
}
.toast-item {
  background: var(--qp-purple); color: white; border: none;
  border-radius: var(--radius-md);
  padding: 10px 18px; font-size: 13px;
  font-family: var(--font-secondary); font-weight: 300; letter-spacing: 0.01em;
  box-shadow: var(--shadow-toast);
  opacity: 0; transform: translateY(8px);
  transition: all 0.25s ease; pointer-events: auto;
  max-width: 360px; word-break: break-word;
}
.toast-item.show { opacity: 1; transform: translateY(0); }
.toast-item.hide { opacity: 0; transform: translateY(-8px); }
.toast-overflow {
  background: var(--bg-surface); color: var(--text-muted); border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 6px 14px; font-size: 12px;
  font-family: var(--font-secondary); font-weight: 300;
  pointer-events: auto; text-align: center;
}
[data-theme="dark"] .toast-item { background: var(--accent); }

/* ── Session drawer ── */
#session-drawer {
  position: fixed; top: 0; left: var(--sidebar-w); height: 100%;
  width: 264px; background: var(--qp-purple);
  border-right: none; z-index: 90;
  transform: translateX(-100%); transition: transform 0.25s;
  display: flex; flex-direction: column; overflow: hidden;
}
[data-theme="dark"] #session-drawer { background: #18142a; border-right: 1px solid var(--border); }
#session-drawer.open { transform: translateX(0); }
.drawer-header {
  padding: 16px 16px; border-bottom: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; gap: 8px;
}
[data-theme="dark"] .drawer-header { border-bottom-color: var(--border); }
.drawer-title {
  font-size: 13px; font-weight: 400; color: rgba(255,255,255,0.85); flex: 1;
  font-family: var(--font-primary); letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
[data-theme="dark"] .drawer-title { color: var(--text-secondary); }
.drawer-header .icon-btn { color: rgba(255,255,255,0.5); }
.drawer-header .icon-btn:hover { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.9); }
[data-theme="dark"] .drawer-header .icon-btn { color: var(--text-secondary); }
[data-theme="dark"] .drawer-header .icon-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.drawer-list { flex: 1; overflow-y: auto; padding: 8px; }
.drawer-group-label {
  font-size: 10px; color: rgba(255,255,255,0.4); text-transform: uppercase;
  letter-spacing: var(--tracking-caps); padding: 10px 10px 5px;
  font-family: var(--font-secondary); font-weight: 400;
}
[data-theme="dark"] .drawer-group-label { color: var(--text-muted); }
.session-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius-md);
  cursor: pointer; transition: background 0.15s;
}
.session-item:hover { background: rgba(255,255,255,0.1); }
[data-theme="dark"] .session-item:hover { background: var(--bg-hover); }
.session-item-title {
  flex: 1; font-size: 13px; color: rgba(255,255,255,0.7);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--font-secondary); font-weight: 300;
}
[data-theme="dark"] .session-item-title { color: var(--text-secondary); }
.session-item-del { opacity: 0; font-size: 14px; color: rgba(255,255,255,0.4); cursor: pointer; transition: opacity 0.15s; }
[data-theme="dark"] .session-item-del { color: var(--text-muted); }
.session-item:hover .session-item-del { opacity: 1; }
.session-item.active { background: rgba(255,255,255,0.15); }
[data-theme="dark"] .session-item.active { background: var(--bg-hover); }
.session-list { display: flex; flex-direction: column; gap: 4px; padding: 8px; overflow-y: auto; }
.session-new-btn {
  width: 100%; padding: 10px; border: 1px dashed rgba(255,255,255,0.25);
  border-radius: var(--radius-md); background: transparent;
  color: rgba(255,255,255,0.7); cursor: pointer; font-size: 0.9rem;
  font-family: var(--font-secondary);
}
[data-theme="dark"] .session-new-btn { border-color: var(--border); color: var(--text-secondary); }
.session-new-btn:hover { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .session-new-btn:hover { background: var(--bg-hover); }
.session-item-content { flex: 1; padding: 8px 12px; min-width: 0; }
.session-title {
  font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: rgba(255,255,255,0.7); font-family: var(--font-secondary); font-weight: 300;
}
[data-theme="dark"] .session-title { color: var(--text-secondary); }
.session-meta { font-size: 0.75rem; color: rgba(255,255,255,0.4); margin-top: 2px; }
[data-theme="dark"] .session-meta { color: var(--text-muted); }
.session-export-btn {
  background: transparent; border: none; color: rgba(255,255,255,0.4);
  cursor: pointer; padding: 6px; opacity: 0; transition: opacity 0.15s;
  display: flex; align-items: center; justify-content: center;
}
.session-export-btn svg {
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
[data-theme="dark"] .session-export-btn { color: var(--text-muted); }
.session-item:hover .session-export-btn { opacity: 1; }
.session-export-btn:hover { color: var(--accent); }
.session-delete-btn {
  background: transparent; border: none; color: rgba(255,255,255,0.4);
  font-size: 1.2rem; cursor: pointer; padding: 8px; opacity: 0; transition: opacity 0.15s;
}
[data-theme="dark"] .session-delete-btn { color: var(--text-muted); }
.session-item:hover .session-delete-btn { opacity: 1; }
.session-delete-btn:hover { color: #ef4444; }
.session-generating { color: var(--accent-blue); font-size: 8px; margin-right: 6px; animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ── Legacy connector card support (from Slice 18) ── */
.source-card {
  display: block;
  padding: 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-surface);
  box-shadow: var(--shadow-card);
}
.source-card h2 { font-size: 15px; font-weight: 500; color: var(--text-strong); }
[data-theme="dark"] .source-card h2 { color: var(--text-primary); }
.source-card .subtle {
  color: var(--text-secondary); font-size: 13px; line-height: 1.45; margin: 0;
}
.source-card button {
  border: 0; border-radius: var(--radius-md); padding: 7px 14px;
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  background: var(--accent); color: #fff;
}
.source-card button.secondary {
  background: var(--bg-surface-alt); color: var(--text-secondary); border: 1px solid var(--border);
}
.source-card input,
.source-card textarea,
.source-card select {
  width: 100%;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 7px 11px;
  font: inherit; font-size: 13px;
  color: var(--text-primary);
  background: var(--bg-app);
}
.source-card label {
  display: block; margin-bottom: 4px;
  font-size: 12px; color: var(--text-secondary);
  font-family: var(--font-secondary); font-weight: 400; letter-spacing: 0.02em;
}
.field-row { display: grid; gap: 4px; }
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  padding: 20px;
}

/* ── Branded connector cards (Slice 28) ── */
.connector-card {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-surface);
  box-shadow: none;
}
.connector-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.connector-card-header img.connector-brand-icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 10px;
  background: #f4f2fa;
  padding: 5px;
  box-sizing: content-box;
}
[data-theme="dark"] .connector-card-header img.connector-brand-icon { background: var(--bg-surface-alt); }
.connector-card-header h2 {
  margin: 0;
  font-weight: 500;
  font-size: 15px;
}
.connector-description {
  color: var(--text-secondary);
  font-size: 0.85rem;
  line-height: 1.45;
  margin: 8px 0 0;
  min-height: 2.9em;
}
.connector-toggle-row {
  margin-top: 14px;
}
.connector-fields {
  flex: 1;
  margin-top: 4px;
}
.connector-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.connector-actions .save-btn,
.connector-actions .sync-btn {
  margin-top: 0 !important;
  margin-left: 0 !important;
}
.connector-footer {
  margin-top: 8px;
}
.connector-card .sync-info {
  color: var(--text-secondary);
  font-size: 0.8rem;
}
[data-theme="dark"] .connector-card {
  background: var(--bg-surface);
  border-color: var(--border);
}
[data-theme="dark"] .connector-description {
  color: var(--text-secondary);
}
[data-theme="dark"] .connector-card .sync-info {
  color: var(--text-secondary);
}

/* ── ─────────────── MARKDOWN IN CHAT MESSAGES ─────────────── */
.msg.ai .msg-bubble h1, .msg.ai .msg-bubble h2, .msg.ai .msg-bubble h3, .msg.ai .msg-bubble h4 {
  margin: 12px 0 6px; font-weight: 600;
}
.msg.ai .msg-bubble h1 { font-size: 1.3em; }
.msg.ai .msg-bubble h2 { font-size: 1.15em; }
.msg.ai .msg-bubble h3 { font-size: 1.05em; }
.msg.ai .msg-bubble h4 { font-size: 1em; }
.msg.ai .msg-bubble ul, .msg.ai .msg-bubble ol { margin: 8px 0; padding-left: 24px; }
.msg.ai .msg-bubble li { margin: 4px 0; }
.msg.ai .msg-bubble pre { background: rgba(0,0,0,0.3); border-radius: var(--radius-md); padding: 12px; overflow-x: auto; margin: 8px 0; }
.msg.ai .msg-bubble pre code { background: none; border: none; padding: 0; font-size: 0.9em; color: inherit; }
.msg.ai .msg-bubble code { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 0.9em; }
.msg.ai .msg-bubble :not(pre) > code { background: rgba(0,0,0,0.2); padding: 2px 6px; border-radius: 4px; }
.msg.ai .msg-bubble table { border-collapse: collapse; width: 100%; margin: 8px 0; }
.msg.ai .msg-bubble th, .msg.ai .msg-bubble td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; }
.msg.ai .msg-bubble th { background: rgba(0,0,0,0.15); font-weight: 600; }
.msg.ai .msg-bubble hr { border: none; border-top: 1px solid var(--border); margin: 12px 0; }
.msg.ai .msg-bubble a { color: var(--accent-blue); text-decoration: underline; }
.msg.ai .msg-bubble p { margin: 6px 0; }
.msg.ai .msg-bubble p:first-child { margin-top: 0; }
.msg.ai .msg-bubble p:last-child { margin-bottom: 0; }

[data-theme="light"] .msg.ai .msg-bubble pre { background: rgba(0,0,0,0.05); }
[data-theme="light"] .msg.ai .msg-bubble :not(pre) > code { background: rgba(0,0,0,0.08); }
[data-theme="light"] .msg.ai .msg-bubble th { background: rgba(0,0,0,0.05); }

/* ── Keyboard shortcuts overlay ── */
.shortcuts-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.shortcuts-dialog { background: var(--bg-card, #1a1a2e); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; max-width: 480px; width: 90%; max-height: 80vh; overflow-y: auto; }
.shortcuts-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.shortcuts-header h2 { margin: 0; font-size: 1.2em; font-weight: 600; }
.shortcuts-close { background: transparent; border: none; color: var(--text-secondary); font-size: 1.5em; cursor: pointer; padding: 4px 8px; }
.shortcuts-body { display: flex; flex-direction: column; gap: 16px; }
.shortcut-section h3 { font-size: 0.85em; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-secondary); margin: 0 0 8px; }
.shortcut-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.shortcut-row kbd { display: inline-block; background: rgba(255,255,255,0.1); border: 1px solid var(--border); border-radius: 4px; padding: 2px 8px; font-family: inherit; font-size: 0.85em; min-width: 24px; text-align: center; }
.shortcut-row span { margin-left: auto; color: var(--text-secondary); font-size: 0.9em; }
[data-theme="light"] .shortcuts-dialog { background: #fff; }
[data-theme="light"] .shortcut-row kbd { background: rgba(0,0,0,0.05); }

/* ── Upload zone ───────────────────────────────────────────────────── */
.upload-zone { border: 2px dashed var(--border); border-radius: var(--radius-md); transition: border-color 0.2s, background 0.2s; cursor: pointer; }
.upload-zone:hover, .upload-zone.drag-over { border-color: var(--qp-purple); background: rgba(41, 16, 96, 0.05); }
[data-theme="dark"] .upload-zone:hover, [data-theme="dark"] .upload-zone.drag-over { background: var(--bg-hover); }

/* ── Inbox filter pills ───────────────────────────────────────────── */
.filter-pill { padding: 6px 14px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: transparent; color: var(--text-primary); cursor: pointer; font-size: 0.85rem; transition: all 0.15s; }
.filter-pill:hover { background: var(--bg-hover, rgba(255,255,255,0.05)); }
.filter-pill.active { background: var(--qp-purple); color: white; border-color: var(--qp-purple); }

/* ── Inbox cards (v2 prototype) ───────────────────────────────────── */
.inbox-card {
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg, 12px);
  padding: 14px 18px; margin-bottom: 8px; transition: all 0.15s;
}
.inbox-card:hover { background: var(--bg-surface-alt); box-shadow: var(--shadow-card-hover); }
.inbox-card.unread { position: relative; }
.inbox-card.unread::before { content: ""; position: absolute; top: 21px; left: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.inbox-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.inbox-card-header .connector-icon { font-size: 1.1rem; flex-shrink: 0; }
.inbox-card-header .connector-icon img { width: 24px; height: 24px; border-radius: 4px; }
.inbox-card-header .title { font-weight: 500; font-size: 0.92rem; flex: 1; }
.inbox-card-header .layer-badge { font-size: 0.72rem; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--chip-src-bg); color: var(--chip-src-text); }
.inbox-card-header .layer-badge.locked { opacity: 0.6; }
.inbox-card-header .date { font-size: 0.75rem; color: var(--text-muted); }
.inbox-card-header .new-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.inbox-card-preview { font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 10px; line-height: 1.4; }
.inbox-card-warning { font-size: 0.78rem; color: var(--amber); background: var(--amber-bg); border-radius: var(--radius-control); padding: 4px 8px; margin-bottom: 10px; }
.inbox-card-actions { display: flex; gap: 8px; align-items: center; }
.inbox-card-actions .badge-extracted { font-size: 0.78rem; color: var(--text-brand-muted); margin-left: 8px; }
.btn-sm { padding: 5px 14px; border-radius: var(--radius-control); border: none; cursor: pointer; font-size: 0.8rem; transition: background 0.12s; }
.btn-approve { background: var(--green-bg); color: var(--green); font-weight: 600; }
.btn-approve:hover { background: #ddf0e5; }
[data-theme="dark"] .btn-approve:hover { background: #12402d; }
.btn-ignore { background: transparent; border: 1px solid var(--border); color: var(--text-secondary); }
.btn-ignore:hover { background: var(--bg-hover); color: var(--text-primary); }
.btn-scan { background: var(--accent); color: white; padding: 6px 16px; border-radius: var(--radius-control); border: none; cursor: pointer; font-size: 0.82rem; font-weight: 600; }
.btn-scan:hover { background: var(--accent-hover); }
.layer-select {
  padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--bg-surface); color: var(--text-primary); font-size: 0.8rem;
}
.always-private { font-size: 0.78rem; color: var(--text-muted); padding: 4px 8px; font-style: italic; }
.inbox-card-expand { margin: 4px 0 8px; }
.inbox-card-full-content {
  max-height: 400px; overflow-y: auto;
  padding: 12px 14px; margin-top: 6px;
  border-radius: var(--radius-md); background: var(--bg-app);
  border: 1px solid var(--border-light);
  font-size: 0.82rem; line-height: 1.55; color: var(--text-secondary);
  word-break: break-word;
  font-family: var(--font-primary);
}
.inbox-card-full-content p { margin: 0 0 0.6em; }
.inbox-card-full-content h1,
.inbox-card-full-content h2,
.inbox-card-full-content h3,
.inbox-card-full-content h4 {
  color: var(--text); font-weight: 600; margin: 1em 0 0.4em;
}
.inbox-card-full-content h1 { font-size: 1.1rem; }
.inbox-card-full-content h2 { font-size: 1rem; }
.inbox-card-full-content h3 { font-size: 0.92rem; }
.inbox-card-full-content h4 { font-size: 0.86rem; }
.inbox-card-full-content ul,
.inbox-card-full-content ol {
  margin: 0.4em 0 0.6em 1.4em; padding: 0;
}
.inbox-card-full-content li { margin-bottom: 0.25em; }
.inbox-card-full-content code {
  background: var(--bg-hover, rgba(255,255,255,0.06)); padding: 1px 5px; border-radius: 4px;
  font-size: 0.9em; font-family: var(--font-mono, monospace);
}
.inbox-card-full-content pre {
  background: var(--bg-hover, rgba(255,255,255,0.06)); padding: 10px 12px;
  border-radius: var(--radius-md); overflow-x: auto; margin: 0.5em 0;
}
.inbox-card-full-content pre code { background: none; padding: 0; }
.inbox-card-full-content strong { color: var(--text); }
.inbox-card-full-content a { color: var(--qp-blue); text-decoration: underline; }
.inbox-card-full-content hr { border: none; border-top: 1px solid var(--border-light); margin: 0.8em 0; }
.inbox-card.approved { opacity: 0.4; transform: translateX(20px); transition: all 0.3s; }
.inbox-card.dismissed { opacity: 0; max-height: 0; padding: 0; margin: 0; overflow: hidden; transition: all 0.4s; }
.scan-status { font-size: 0.78rem; color: var(--text-muted); }
.content-header { padding: 14px 24px; height: 49px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.content-header h1 { font-family: var(--font-primary); font-size: 1.25rem; font-weight: 400; letter-spacing: -0.01em; margin: 0; }
.content-header .header-right { display: flex; align-items: center; gap: 12px; }
.content-body { flex: 1; overflow-y: auto; padding: 16px 24px; }

/* ── Split view (Drafts v2) ──────────────────────────────────────── */
.split-view { display: flex; flex: 1; overflow: hidden; }
.split-list { width: 340px; min-width: 340px; border-right: 1px solid var(--border); overflow-y: auto; display: flex; flex-direction: column; }
.split-detail { flex: 1; overflow-y: auto; padding: 24px; }
.split-list-header {
  padding: 14px 16px; height: 49px; display: flex; align-items: center;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
  font-weight: 600; font-size: 0.85rem; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
}

/* ── List items (Drafts list) ────────────────────────────────────── */
.list-item {
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background 0.12s;
}
.list-item:hover { background: var(--bg-hover); }
.list-item.active { background: var(--bg-active); }
.list-item-title { font-size: 0.9rem; font-weight: 500; margin-bottom: 4px; }
.list-item-meta { font-size: 0.78rem; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; }
.list-item-meta .type-icon { font-size: 0.85rem; }
.btn-push-gh {
  background: transparent; border: 1px solid var(--border); border-radius: var(--radius-control);
  cursor: pointer; padding: 2px 6px; font-size: 0.75rem; line-height: 1;
  opacity: 0; transition: opacity 0.15s;
}
.list-item:hover .btn-push-gh { opacity: 0.8; }
.btn-push-gh:hover { opacity: 1 !important; background: rgba(34,197,94,0.15); border-color: var(--green); }

/* ── Status badges — tint background + saturated text, pill, sentence case ── */
.status-badge {
  display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill);
  font-size: 0.72rem; font-weight: 600; text-transform: none; letter-spacing: 0.01em;
}
.status-new { background: #efe9f7; color: #281060; }
.status-review { background: var(--amber-bg); color: var(--amber); }
.status-ready { background: var(--green-bg); color: var(--green); }
.status-archived { background: var(--bg-hover); color: var(--text-muted); }
[data-theme="dark"] .status-new { background: #2b1e55; color: var(--qp-purple-200); }

/* ── Draft detail panel ──────────────────────────────────────────── */
.draft-detail-header { margin-bottom: 20px; }
.draft-detail-header h2 { font-size: 1.1rem; font-weight: 600; margin-bottom: 8px; }
.draft-meta-grid {
  display: grid; grid-template-columns: auto 1fr auto 1fr;
  gap: 6px 16px; font-size: 0.82rem; margin-bottom: 16px;
  padding: 12px; background: var(--bg-surface-alt); border-radius: var(--radius-md);
}
.draft-meta-grid .label { color: var(--text-muted); text-transform: uppercase; font-size: 0.72rem; letter-spacing: var(--tracking-caps); }
.draft-meta-grid .value { color: var(--text-primary); }
.draft-body {
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg, 12px);
  padding: 16px 20px; font-size: 0.88rem; line-height: 1.6; white-space: pre-wrap;
  font-family: var(--font-mono); min-height: 200px;
}
.draft-actions { margin-top: 16px; display: flex; gap: 8px; }
.draft-actions button {
  padding: 8px 20px; border-radius: var(--radius-control); border: none; cursor: pointer; font-size: 0.85rem; font-weight: 600;
}
.btn-edit { background: var(--accent); color: white; }
.btn-edit:hover { opacity: 0.85; }
.btn-regen { background: transparent; border: 1px solid var(--border); color: var(--text-primary); }
.btn-regen:hover { background: var(--bg-hover); }
.btn-approve-draft { background: transparent; border: 1px solid var(--green); color: var(--green); }
.btn-approve-draft:hover { background: rgba(34,197,94,0.1); }
.draft-evidence {
  margin-top: 16px; padding: 12px; background: var(--bg-surface-alt);
  border-radius: var(--radius-md); font-size: 0.82rem;
}
.draft-evidence h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-muted); margin-bottom: 8px; }
.evidence-item { padding: 6px 0; border-bottom: 1px solid var(--border); color: var(--text-secondary); }
.evidence-item:last-child { border-bottom: none; }

/* ── Settings sections (v2 prototype) ────────────────────────────── */
.settings-section-panel { display: none; }
.settings-section-panel.active { display: block; }
.settings-card {
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 24px; margin-bottom: 16px;
}
.settings-card h3 { font-size: 0.95rem; font-weight: 600; margin-bottom: 16px; }
.settings-card h4 { font-size: 0.85rem; font-weight: 500; margin-bottom: 8px; color: var(--text-secondary); }
.form-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.form-row:last-child { margin-bottom: 0; }
.form-label { font-size: 0.82rem; color: var(--text-secondary); min-width: 140px; }
.form-input {
  padding: 8px 12px; border-radius: var(--radius-md); border: 1px solid var(--border);
  background: var(--bg-surface-alt); color: var(--text-primary); font-size: 0.85rem;
  flex: 1; max-width: 300px;
}
.form-input:focus { outline: none; border-color: var(--focus-ring-color); }
.form-select {
  padding: 8px 12px; border-radius: var(--radius-md); border: 1px solid var(--border);
  background: var(--bg-surface-alt); color: var(--text-primary); font-size: 0.85rem;
}
.btn-primary {
  padding: 8px 20px; border-radius: var(--radius-control); border: none;
  background: var(--accent); color: white; cursor: pointer; font-size: 0.85rem; font-weight: 600;
}
.btn-primary:hover { opacity: 1; background: var(--accent-hover); }
.btn-secondary {
  padding: 8px 20px; border-radius: var(--radius-control);
  border: 1px solid var(--border); background: transparent;
  color: var(--text-primary); cursor: pointer; font-size: 0.85rem; font-weight: 600;
}
.btn-secondary:hover { background: var(--bg-hover); }
.btn-danger {
  padding: 8px 20px; border-radius: var(--radius-control); border: none;
  background: var(--red); color: white; cursor: pointer; font-size: 0.85rem; font-weight: 600;
}
.btn-danger:hover { opacity: 0.85; }
.toggle-container { display: flex; align-items: center; gap: 10px; }
/* Settings > Transcript Series: one block per rule, connector-row style. */
.series-rule-list { display: flex; flex-direction: column; gap: 10px; }
.series-rule { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; background: var(--bg-surface-alt); }
.series-rule-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.series-rule-name { font-size: 14px; font-weight: 600; color: var(--text-strong); font-family: var(--font-primary); }
[data-theme="dark"] .series-rule-name { color: var(--text-primary); }
.series-rule-meta { font-size: 12px; color: var(--text-muted); font-family: var(--font-secondary); }
.series-rule-controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.series-rule-ctl-label { font-size: 0.82rem; color: var(--text-secondary); }
.series-rule-apply { margin-left: auto; font-size: 0.78rem; padding: 4px 12px; }
.series-rule-panel { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 0.82rem; color: var(--text-secondary); display: flex; flex-direction: column; gap: 3px; }
.series-rule-panel[hidden] { display: none; }
.series-rule-panel-title { font-weight: 600; color: var(--text-primary); }
.series-rule-panel-item { padding-left: 12px; }
.series-rule-panel-fail { font-weight: 600; color: var(--red); }
.series-rule-panel-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.series-rule-panel-actions button { font-size: 0.78rem; padding: 4px 12px; }
.toggle {
  width: 40px; height: 22px; border-radius: var(--radius-pill); background: var(--border);
  position: relative; cursor: pointer; transition: background 0.2s; flex-shrink: 0;
}
.toggle:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; }
.toggle.on { background: var(--accent); }
[data-theme="dark"] .toggle.on { background: var(--accent-hover); }
.toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%; background: white;
  transition: transform 0.2s;
}
.toggle.on::after { transform: translateX(18px); }
.radio-group { display: flex; gap: 12px; margin-bottom: 16px; }
.radio-option {
  display: flex; align-items: center; gap: 8px; padding: 10px 16px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  cursor: pointer; font-size: 0.88rem; transition: all 0.12s;
}
.radio-option input[type="radio"] { accent-color: var(--accent); margin: 0; }
.radio-option.selected { border-color: var(--accent); background: var(--qp-purple-50); }
[data-theme="dark"] .radio-option.selected { background: var(--bg-active); }
.radio-option:not(.selected) { opacity: 0.7; }
.model-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.model-field label { font-size: 0.78rem; color: var(--text-muted); display: block; margin-bottom: 4px; }
.status-line { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 0.85rem; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; }
.status-dot.connected { background: var(--green); }
.status-dot.disconnected { background: var(--red); }
.connector-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 0;
  border-bottom: 1px solid var(--border); font-size: 0.88rem;
}
.connector-row:last-child { border-bottom: none; }
.connector-name { min-width: 120px; font-weight: 500; }
.persona-card {
  background: var(--bg-surface-alt); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 14px; margin-bottom: 8px;
}
.persona-card h4 { font-size: 0.9rem; margin-bottom: 4px; }
.persona-card p { font-size: 0.82rem; color: var(--text-secondary); }
.template-card {
  background: var(--bg-surface-alt); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 14px; margin-bottom: 8px;
}
.template-card h4 { font-size: 0.9rem; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
.template-preview {
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-muted);
  line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.layer-card {
  background: var(--bg-surface-alt); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 16px;
}
.layer-card .layer-name { font-weight: 600; min-width: 90px; }
.layer-card .layer-stats { flex: 1; font-size: 0.82rem; color: var(--text-secondary); }
.layer-card .layer-actions { display: flex; gap: 8px; }
.warning-box {
  background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.3);
  border-radius: var(--radius-md); padding: 12px; font-size: 0.85rem; color: var(--red);
  margin-bottom: 12px;
}
.info-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; font-size: 0.85rem; }
.info-label { color: var(--text-muted); min-width: 140px; }
.info-value { color: var(--text-primary); }
.persona-tag {
  display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill);
  font-size: 0.72rem; background: var(--chip-src-bg); color: var(--chip-src-text);
  margin-right: 4px;
}

/* ══════════════════════════════════════════════════
   DOCUMENTS PAGE
   ══════════════════════════════════════════════════ */

/* ── Health stats in tab panel ── */
.doc-health-stats {
  margin: 8px; padding: 10px 12px;
  background: var(--bg-surface-alt); border-radius: var(--radius-md);
  font-size: 0.78rem; color: var(--text-secondary);
}
.doc-health-row {
  display: flex; justify-content: space-between; padding: 3px 0;
}
.doc-health-row span:last-child {
  color: var(--text-primary); font-weight: 500; font-variant-numeric: tabular-nums;
}
.doc-health-warn { color: var(--amber) !important; }
.doc-health-err { color: var(--red) !important; }
.doc-health-muted { color: var(--text-muted); font-size: 0.72rem; }
.doc-health-pending-details { display: block; cursor: pointer; }
.doc-health-pending-details > summary {
  display: flex; justify-content: space-between; list-style: none;
  padding: 3px 0;
}
.doc-health-pending-details > summary::-webkit-details-marker { display: none; }
.doc-health-pending-details > summary::before {
  content: "▸"; display: inline-block; margin-right: 4px;
  transition: transform 0.12s; color: var(--text-muted);
}
.doc-health-pending-details[open] > summary::before { transform: rotate(90deg); }
.doc-health-pending-list {
  margin-top: 6px; padding: 8px 10px;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: 6px; max-height: 280px; overflow-y: auto;
}
.doc-health-pending-row {
  display: flex; gap: 8px; align-items: center;
  font-size: 0.78rem; padding: 5px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
}
.doc-health-pending-row:last-child { border-bottom: none; }
.doc-health-pending-status {
  font-family: var(--font-mono); font-size: 0.68rem;
  padding: 2px 6px; border-radius: 4px;
  flex-shrink: 0; text-transform: uppercase; letter-spacing: var(--tracking-caps);
}
.doc-health-pending-status.pending {
  background: rgba(148, 163, 184, 0.18); color: var(--text-secondary);
}
.doc-health-pending-status.running {
  background: rgba(245, 158, 11, 0.2); color: var(--amber);
}
.doc-health-pending-title {
  flex: 1; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--text-primary); font-weight: 500;
}
.doc-health-pending-meta {
  font-size: 0.7rem; color: var(--text-muted); flex-shrink: 0;
}

/* ── Document list items ── */
.doc-list-item {
  display: block; padding: 12px 16px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background 0.12s; text-decoration: none; color: inherit;
}
.doc-list-item:hover { background: var(--bg-hover); }
.doc-list-item.active { background: var(--bg-active); }
.doc-list-title {
  font-size: 0.88rem; font-weight: 500; margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--text-primary);
}
.doc-list-meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.75rem; color: var(--text-secondary);
}

/* ── Status dots ── */
.doc-status-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; display: inline-block;
}
.doc-status-dot.indexed { background: var(--green); }
.doc-status-dot.stored { background: var(--amber); }
.doc-status-dot.pending { background: var(--text-muted); }
.doc-status-dot.failed { background: var(--red); }
.doc-status-dot.duplicate { background: var(--accent-blue); opacity: 0.5; }

/* ── Status text labels ── */
.doc-status-label {
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-caps);
}
.doc-status-label.indexed { color: var(--green); }
.doc-status-label.stored { color: var(--amber); }
.doc-status-label.pending { color: var(--text-muted); }
.doc-status-label.failed { color: var(--red); }
.doc-status-label.duplicate { color: var(--accent-blue); opacity: 0.7; }

/* ── Document detail ── */
.doc-detail-empty {
  display: flex; align-items: center; justify-content: center; height: 100%;
  color: var(--text-muted); font-size: 0.9rem;
}
.doc-detail-header { margin-bottom: 20px; }
.doc-detail-header h2 { font-size: 1.1rem; font-weight: 600; margin-bottom: 6px; }
.doc-source-line {
  font-size: 0.82rem; color: var(--text-secondary);
  display: flex; align-items: center; gap: 6px;
}

.doc-code-chip, .doc-badge-archived {
  padding: 1px 6px; border-radius: var(--radius-pill); font-size: 0.7rem;
  background: var(--bg-surface-alt); color: var(--text-secondary); white-space: nowrap;
}
.doc-badge-archived { color: var(--text-muted); font-style: italic; }
.doc-scinote-link { margin-left: auto; color: var(--accent); }
.doc-scinote-link:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; }

/* ── Meta grid ── */
.doc-meta-grid {
  display: grid; grid-template-columns: auto 1fr auto 1fr;
  gap: 6px 16px; font-size: 0.82rem; margin-bottom: 20px;
  padding: 12px; background: var(--bg-surface-alt); border-radius: var(--radius-md);
}
.doc-meta-label {
  color: var(--text-muted); text-transform: uppercase;
  font-size: 0.72rem; letter-spacing: var(--tracking-caps);
}
.doc-meta-value { color: var(--text-primary); }
.doc-meta-value a { color: var(--accent-blue); text-decoration: none; }
.doc-meta-value a:hover { text-decoration: underline; }

/* ── Detail action buttons ── */
.doc-detail-actions { display: flex; gap: 8px; margin-bottom: 20px; }
.doc-btn-primary {
  background: var(--accent); color: white;
}
.doc-btn-primary:hover { background: var(--accent-hover); }
.doc-btn-secondary {
  background: transparent; border: 1px solid var(--border) !important; color: var(--text-primary);
}
.doc-btn-secondary:hover { background: var(--bg-hover); }
.doc-btn-danger {
  background: transparent; border: 1px solid var(--red) !important; color: var(--red); font-size: 0.78rem;
}
.doc-btn-danger:hover { background: rgba(248,113,113,0.1); }
.doc-detail-actions button:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; }

/* ── Access editor (owner/admin): who may read the page ── */
.doc-access-editor {
  margin-bottom: 16px; padding: 14px 16px; border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--bg-surface);
}
.doc-access-editor h3 { margin: 0 0 6px; font-size: 0.9rem; color: var(--text-primary); }
.doc-access-hint { margin: 0 0 10px; font-size: 0.78rem; color: var(--text-muted); }
.doc-access-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.doc-access-item {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px;
  border: 1px solid var(--border); border-radius: 999px; font-size: 0.8rem; color: var(--text-primary);
}
.doc-access-remove {
  border: none; background: transparent; color: var(--text-muted); cursor: pointer;
  font-size: 0.95rem; line-height: 1; padding: 2px 6px; border-radius: 999px;
}
.doc-access-remove:hover { color: var(--red); background: var(--bg-hover); }
.doc-access-add { display: flex; gap: 8px; margin-bottom: 10px; }
.doc-access-input {
  flex: 1; min-width: 0; padding: 5px 10px; font-size: 0.82rem; color: var(--text-primary);
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md);
}
.doc-access-local { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--text-primary); margin-bottom: 4px; }
.doc-access-save { display: flex; align-items: center; gap: 10px; }
.doc-access-status { font-size: 0.8rem; color: var(--text-muted); }
.doc-access-editor[hidden] { display: none; }
.doc-access-combo { position: relative; flex: 1; min-width: 0; display: flex; }
.doc-access-suggest {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
  list-style: none; margin: 0; padding: 4px; max-height: 260px; overflow-y: auto;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md);
}
.doc-access-suggest[hidden] { display: none; }
.doc-access-option {
  display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; cursor: pointer;
  border-radius: var(--radius-md); font-size: 0.82rem; color: var(--text-primary);
}
.doc-access-option:hover, .doc-access-option[aria-selected="true"] { background: var(--bg-hover); }
.doc-access-option[aria-selected="true"] { outline: 2px solid var(--accent); outline-offset: -2px; }
.doc-access-option-email { font-size: 0.75rem; color: var(--text-muted); }
.doc-access-move {
  display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--border); font-size: 0.82rem; color: var(--text-primary);
}
.doc-access-move-hint { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.doc-access-select {
  padding: 5px 10px; font-size: 0.82rem; color: var(--text-primary);
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md);
}
.doc-access-status { display: block; margin-top: 8px; }
.doc-access-move button:disabled,
.doc-access-move button:disabled:hover { opacity: 0.5; cursor: default; background: transparent; }
.doc-access-editor button:focus-visible, .doc-access-input:focus-visible,
.doc-access-select:focus-visible,
.doc-access-local input:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; }

/* ── Detail tabs ── */
.doc-detail-tabs {
  display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 16px;
}
.doc-tab {
  padding: 8px 16px; font-size: 0.82rem; color: var(--text-secondary);
  cursor: pointer; border: none; background: transparent;
  border-bottom: 2px solid transparent; transition: all 0.15s;
}
.doc-tab:hover { color: var(--text-primary); }
.doc-tab.active { color: var(--text-brand); border-bottom-color: var(--accent); font-weight: 600; }
[data-theme="dark"] .doc-tab.active { color: var(--text-primary); border-bottom-color: var(--accent-blue); }
.doc-tab-panel { display: none; }
.doc-tab-panel.active { display: block; }

/* ── Parsed text ── */
.doc-parsed-text {
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 16px 20px; font-size: 0.84rem; line-height: 1.6; white-space: pre-wrap;
  font-family: var(--font-mono); max-height: 500px; overflow-y: auto; color: var(--text-secondary);
}

/* ── Transcript summary (rendered, not a scroll box) ── */
.doc-summary { font-size: 0.88rem; line-height: 1.6; color: var(--text-secondary); }
.doc-summary-para { margin: 0 0 10px; }
.doc-summary-section { margin-top: 16px; }
.doc-summary-section h3 { margin: 0 0 4px; font-size: 0.8rem; font-weight: 600; }
.doc-summary-section ul { margin: 0 0 0 18px; padding: 0; }
.doc-summary-section li { margin: 2px 0; }
.doc-summary-decisions h3 { color: var(--accent-blue); }
.doc-summary-actions h3 { color: var(--green); }
.doc-summary-blockers h3 { color: var(--amber); }
.doc-summary-risks h3 { color: var(--red); }

.doc-rendered p { margin: 0 0 0.7em; }
.doc-rendered h1, .doc-rendered h2, .doc-rendered h3, .doc-rendered h4 {
  color: var(--text-primary); font-weight: 600; margin: 1.1em 0 0.4em;
}
.doc-rendered h1 { font-size: 1.1rem; }
.doc-rendered h2 { font-size: 1rem; }
.doc-rendered h3 { font-size: 0.92rem; }
.doc-rendered h4 { font-size: 0.86rem; }
.doc-rendered ul, .doc-rendered ol { margin: 0.4em 0 0.7em 1.4em; padding: 0; }
.doc-rendered li { margin-bottom: 0.25em; }
.doc-rendered code { background: var(--bg-hover); padding: 1px 5px; border-radius: 4px;
  font-size: 0.9em; font-family: var(--font-mono); }
.doc-rendered pre { background: var(--bg-surface); padding: 10px 12px;
  border-radius: var(--radius-md); overflow-x: auto; }
.doc-rendered pre code { background: none; padding: 0; }
.doc-rendered table { border-collapse: collapse; margin: 0.6em 0; font-size: 0.82rem; display: block; overflow-x: auto; }
.doc-rendered th, .doc-rendered td { border: 1px solid var(--border); padding: 4px 8px; text-align: left; vertical-align: top; }
.doc-rendered th { background: var(--bg-surface); font-weight: 600; }
.doc-rendered a { color: var(--qp-blue); text-decoration: underline; }
.doc-rendered hr { border: none; border-top: 1px solid var(--border); margin: 0.9em 0; }

/* ── Chunk cards ── */
.doc-chunk-card {
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 12px 16px; margin-bottom: 8px;
}
.doc-chunk-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; gap: 8px;
}
.doc-chunk-label { font-size: 0.82rem; font-weight: 500; color: var(--text-primary); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-chunk-num {
  font-size: 0.68rem; color: var(--text-muted);
  padding: 1px 6px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.04);
  font-family: var(--font-mono);
}
.doc-chunk-tokens { font-size: 0.72rem; color: var(--text-muted); }
.doc-chunk-badge {
  font-size: 0.68rem; padding: 1px 6px; border-radius: var(--radius-pill);
}
.doc-chunk-badge.indexed { background: rgba(34,197,94,0.15); color: var(--green); }
.doc-chunk-badge.pending { background: rgba(90,84,120,0.2); color: var(--text-muted); }
.doc-chunk-badge.failed { background: rgba(248,113,113,0.15); color: var(--red); }
.doc-chunk-content {
  font-size: 0.8rem; line-height: 1.5; color: var(--text-secondary);
  max-height: 120px; overflow: hidden; white-space: pre-wrap;
}

/* ── Upload zone (documents page) ── */
.doc-upload-zone {
  display: none; border: 2px dashed var(--border-light); border-radius: var(--radius-md);
  padding: 28px; text-align: center; transition: border-color 0.2s, background 0.2s;
  margin: 16px 24px;
}
.doc-upload-zone.visible { display: block; }
.doc-upload-zone.drag-over { border-color: var(--accent); background: var(--chip-src-bg); }
.doc-upload-zone p { color: var(--text-secondary); font-size: 0.88rem; margin-bottom: 14px; }
.doc-upload-zone .upload-icon { font-size: 2rem; margin-bottom: 8px; opacity: 0.5; }
.doc-upload-zone .upload-controls {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
}
.doc-upload-zone .upload-controls label { font-size: 0.82rem; color: var(--text-secondary); }
.doc-upload-zone .upload-controls select {
  background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border);
  border-radius: 6px; padding: 5px 10px; font-size: 0.82rem;
}
.doc-upload-zone .upload-file-list { margin-top: 12px; text-align: left; }
.doc-upload-zone .upload-progress { margin-top: 10px; font-size: 0.82rem; color: var(--text-muted); }
.doc-upload-zone .upload-progress.success { color: var(--green); }
.doc-upload-zone .upload-progress.error { color: var(--red); }

/* ── Search box (documents page) ── */
.doc-search-box {
  flex: 1; padding: 6px 12px; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--bg-surface);
  color: var(--text-primary); font-size: 0.82rem; width: 100%;
}
.doc-search-box:focus { outline: none; border-color: var(--focus-ring-color); box-shadow: var(--focus-ring); }

/* ── Upload button (documents header) ── */
.btn-upload-docs {
  background: var(--accent); color: white; border: none; border-radius: var(--radius-control);
  padding: 7px 18px; font-size: 0.82rem; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-upload-docs:hover { background: var(--accent-hover); }
.btn-upload-docs svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ── Activity bar spinner ── */
@keyframes spin { to { transform: rotate(360deg); } }
#activity-bar { transition: opacity 0.3s; }

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE (P0 #6)
   Breakpoint: 768px
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* ── Sidebar: hidden by default, overlay when toggled ── */
  #sidebar {
    position: fixed; top: 0; left: 0; height: 100%;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 500;
    box-shadow: none;
  }
  #sidebar.mobile-open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,0.4);
  }
  .nav-item .tooltip { display: none; }

  /* ── Mobile header bar (replaces sidebar visibility) ── */
  #mobile-header {
    display: flex !important;
    position: fixed; top: 0; left: 0; right: 0;
    height: 48px; z-index: 400;
    background: var(--bg-sidebar);
    align-items: center; padding: 0 12px; gap: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  #mobile-header .mobile-logo { height: 24px; filter: brightness(0) invert(1); }
  #mobile-header .mobile-title { color: #fff; font-size: 14px; font-weight: 500; flex: 1; }
  .mobile-hamburger {
    background: transparent; border: none; color: #fff; cursor: pointer; padding: 8px;
  }
  .mobile-hamburger svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; }

  /* Mobile overlay backdrop */
  #mobile-overlay {
    display: none;
    position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 450;
  }
  #mobile-overlay.active { display: block; }

  /* ── Content: full-width, offset for mobile header ── */
  #app { flex-direction: column; }
  #content { margin-top: 48px; }

  /* Tab panel sidebar: collapsible on mobile */
  .tab-panel-sidebar {
    position: fixed; top: 48px; left: 0; right: 0; z-index: 300;
    width: 100% !important; min-width: 100% !important;
    max-height: 60vh; overflow-y: auto;
    transform: translateY(-100%); transition: transform 0.25s ease;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  }
  .tab-panel-sidebar.mobile-tabs-open { transform: translateY(0); }

  /* ── Chat: full width, compact ── */
  #chat-header { padding: 0 12px; height: 44px; }
  #chat-thread { padding: 12px 10px; max-width: 100%; gap: 14px; }
  #chat-input-area { padding: 10px 12px; max-width: 100%; }
  .mode-selector { flex-wrap: wrap; }
  .mode-btn { font-size: 12px; padding: 5px 10px; }
  /* 16px keeps iOS from zooming on focus, but the placeholder then wraps to
     two lines and a 40px box clips the second one. Fit both lines. */
  #chat-input { font-size: 16px; min-height: 68px; }
  .msg-avatar { width: 28px; height: 28px; font-size: 11px; }
  .msg-bubble { padding: 10px 14px; font-size: 0.9rem; max-width: 92%; }
  .chat-empty h2 { font-size: 1.3rem; }
  .chat-empty p { font-size: 0.85rem; padding: 0 8px; }
  .chat-empty-pills { flex-wrap: wrap; gap: 6px; justify-content: center; }

  /* ── Content headers: compact ── */
  .content-header { padding: 10px 14px; height: 44px; }
  .content-header h1 { font-size: 1rem; }
  .content-body { padding: 12px 14px; }

  /* ── Split view: stack vertically ── */
  .split-view { flex-direction: column; }
  .split-list {
    width: 100%; min-width: 100%;
    max-height: 40vh; border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .split-detail { padding: 14px; }
  .split-list-header { padding: 10px 14px; height: 40px; }

  /* ── Inbox cards: full width ── */
  .inbox-card { padding: 12px 14px; }
  .inbox-card-header { flex-wrap: wrap; gap: 6px; }
  .inbox-card-actions { flex-wrap: wrap; gap: 6px; }
  .layer-select { font-size: 12px; }

  /* ── Session drawer: full width ── */
  #session-drawer {
    left: 0; width: 100%;
    top: 48px; height: calc(100% - 48px);
  }

  /* ── Settings/Connectors: single column ── */
  .connector-grid, .settings-grid { grid-template-columns: 1fr !important; }

  /* ── Documents two-column → single ── */
  .doc-split-view { flex-direction: column; }
  .doc-list-panel {
    width: 100% !important; min-width: 100% !important;
    max-height: 40vh; border-right: none;
    border-bottom: 1px solid var(--border);
  }

  /* ── Activity bar: adjust for no sidebar ── */
  #activity-bar { left: 0 !important; }

  /* ── Keyboard shortcuts overlay: full screen ── */
  .shortcuts-dialog { max-width: 95%; padding: 16px; }

  /* ── Tab panels within settings ── */
  .tab-panel-items { padding: 4px; }
  .tab-panel-item { padding: 6px 10px; font-size: 0.8rem; }
}

/* ── Citation side panel — brand card hierarchy ──────────────────────────── */
.citation-panel {
  position: fixed;
  top: 0;
  right: -440px;
  width: 440px;
  height: 100vh;
  background: var(--bg-app);
  border-left: 1px solid var(--border);
  box-shadow: -16px 0 40px rgba(41,16,96,0.10);
  z-index: 100;
  transition: right var(--dur-slow) var(--ease-out);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: none;
}
[data-theme="dark"] .citation-panel { box-shadow: -16px 0 40px rgba(0,0,0,0.5); }
.citation-panel.open { right: 0; pointer-events: auto; }
.citation-panel-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.citation-panel-header::before {
  content: "SOURCE";
  position: absolute;
  top: 8px; left: 22px;
  font-size: 9px; font-weight: 600;
  letter-spacing: var(--tracking-caps);
  color: var(--text-brand-muted);
  font-family: var(--font-secondary);
}
.citation-panel-header h3 {
  margin: 6px 0 0; font-size: 15px; font-weight: 700;
  color: var(--text-brand); font-family: var(--font-primary);
  letter-spacing: var(--tracking-tight); line-height: 1.3;
  overflow-wrap: anywhere;
}
.citation-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 22px;
}
.citation-chunk {
  margin-bottom: 14px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-surface);
  box-shadow: var(--shadow-card);
}
[data-theme="dark"] .citation-chunk { border-left-color: var(--qp-purple-300); }
.citation-passage .chunk-section,
.citation-chunk .chunk-section {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-brand-muted);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-family: var(--font-secondary);
}
.citation-chunk .chunk-content {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--text-primary);
  font-family: var(--font-secondary);
}
.citation-sentence {
  display: inline;
  color: var(--text-secondary);
}
/* Used-in-the-answer marker. Consecutive sentences frequently all hit, so
   this is a soft wash rather than an underline — a row of underlined
   sentences reads as noise, a tinted block reads as one passage. */
.citation-sentence.citation-sentence-hit {
  color: var(--text-strong);
  background: rgba(41, 16, 96, 0.07);
  box-shadow: 0 0 0 2px rgba(41, 16, 96, 0.07);
  border-radius: 2px;
  font-weight: 500;
}
[data-theme="dark"] .citation-sentence.citation-sentence-hit {
  color: #ffffff;
  background: rgba(154, 143, 196, 0.20);
  box-shadow: 0 0 0 2px rgba(154, 143, 196, 0.20);
}
.citation-hint {
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-style: italic;
  margin: 0 0 12px;
  padding: 8px 12px;
  background: var(--bg-surface-alt);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--accent-blue);
}
.citation-web-marker {
  border-left-color: var(--amber);
}
/* Header line under the title: layer and passage count. */
.citation-panel-heading { min-width: 0; flex: 1; }
.citation-panel-meta {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--text-secondary);
  font-family: var(--font-secondary);
}
/* The cited passage: one block, the sentences that answer the question. */
.citation-passage {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.citation-passage-text {
  margin: 0;
  padding-left: 12px;
  border-left: 2px solid var(--qp-indigo);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-primary);
  font-family: var(--font-secondary);
}
[data-theme="dark"] .citation-passage-text { border-left-color: var(--qp-purple-300); }
/* Everything else the retrieval returned sits behind one disclosure. */
.citation-more { margin-top: 12px; font-size: 13px; color: var(--text-secondary); }
.citation-more > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-weight: 500;
  list-style: none;
}
.citation-more > summary::after { content: "\203A"; font-size: 16px; }
.citation-more > summary::-webkit-details-marker { display: none; }
.citation-more .citation-chunk { margin-top: 8px; margin-bottom: 0; }

/* Footer: opens the list of every source in the answer. */
.citation-panel-footer {
  flex-shrink: 0;
  padding: 10px 22px;
  border-top: 1px solid var(--border);
}
.citation-panel-footer[hidden] { display: none; }
.citation-all-sources {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-blue);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.citation-all-sources:focus-visible,
.citation-source-row:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; }
/* Source list: one row per source, the passage opens on click. */
.citation-source-list { list-style: none; margin: 0; padding: 0; }
.citation-source-list li + li { margin-top: 8px; }
.citation-source-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.citation-source-row:hover { border-color: var(--accent-blue); }
.citation-source-num {
  flex: 0 0 24px;
  height: 24px;
  border-radius: 4px;
  background: var(--qp-indigo);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.citation-source-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.citation-source-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.citation-source-meta { font-size: 12px; color: var(--text-secondary); }
.citation-source-cited {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-surface-alt);
  color: var(--text-secondary);
}
/* Chip hover card: a preview of the source behind an inline [N]. */
.citation-hover {
  position: fixed;
  z-index: 150;
  max-width: 300px;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  box-shadow: var(--shadow-card);
  pointer-events: none;
}
.citation-hover[hidden] { display: none; }
.citation-hover-title { font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.35; }
.citation-hover-meta { margin-top: 2px; font-size: 11px; color: var(--text-secondary); }
.citation-hover-snippet { margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--text-secondary); }

/* Citation inline links */
.citation-link { color: var(--accent-blue); text-decoration: none; cursor: pointer; font-weight: 600; }
.citation-link:hover { text-decoration: underline; }

/* Phones: the panel is a bottom sheet over the chat, not a full-width column. */
@media (max-width: 768px) {
  .citation-panel {
    top: auto; right: 0; left: 0; bottom: 0;
    width: 100%; height: 72vh;
    border-left: 0; border-top: 1px solid var(--border);
    border-radius: var(--radius-surface) var(--radius-surface) 0 0;
    transform: translateY(100%);
    transition: transform var(--dur-slow) var(--ease-out);
  }
  .citation-panel.open { transform: none; }
}

/* Dedup confirmation modal */
.qp-modal-backdrop {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6); z-index: 1000;
  display: flex; align-items: center; justify-content: center;
}
.qp-dedup-modal {
  background: var(--bg-surface, #1a1a1a); border: 1px solid var(--border, #333);
  border-radius: var(--radius-lg); padding: 24px; max-width: 960px; width: 90%;
  color: var(--text-primary, #e0e0e0);
}
.qp-dedup-modal h3 { margin: 0 0 8px; font-size: 1.1rem; }
.qp-dedup-similarity {
  color: var(--text-muted, #888); margin: 0 0 16px; font-size: 0.85rem;
}
.qp-dedup-compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px;
}
@media (max-width: 768px) {
  .qp-dedup-compare { grid-template-columns: 1fr; }
}
.qp-dedup-side {
  background: var(--bg-surface-alt, #262626); border-radius: var(--radius-md); padding: 16px;
  border: 1px solid var(--border, #333);
}
.qp-dedup-side h4 {
  margin: 0 0 8px; font-size: 0.9rem; color: var(--chip-src-text);
}
.qp-dedup-title { font-weight: 600; margin: 0 0 8px; }
.qp-dedup-meta {
  font-size: 0.8rem; color: var(--text-muted, #888); margin: 4px 0;
}
.qp-dedup-preview {
  max-height: 360px; overflow-y: auto; font-size: 0.82rem;
  white-space: pre-wrap; color: var(--text-secondary, #aaa);
  padding: 8px; background: var(--bg-app, #0f0f0f); border-radius: 4px;
  font-family: var(--font-mono, monospace); line-height: 1.45;
}
.qp-modal-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
}
/* "Save to which layer?" radio cards; a bottom sheet on phones */
.qp-layer-modal {
  background: var(--bg-surface); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); padding: 22px 22px 18px; width: min(440px, 92%);
  box-shadow: var(--shadow-toast); color: var(--text-primary);
  display: flex; flex-direction: column; max-height: 92vh; overflow-y: auto;
}
.qp-layer-grab { display: none; width: 36px; height: 4px; border-radius: 2px; background: var(--border); margin: 0 auto 12px; }
.qp-layer-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-muted);
}
.qp-layer-modal h2 {
  font-family: var(--font-primary); font-weight: 300; font-size: 24px; line-height: 1.15;
  letter-spacing: var(--tracking-tight); color: var(--text-strong); margin: 8px 0 6px;
}
.qp-layer-file {
  font-size: 12.5px; color: var(--text-secondary); margin-bottom: 16px; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qp-layer-opts { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.qp-layer-opt {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; position: relative;
  border: 1px solid var(--border-light); border-radius: var(--radius-md); cursor: pointer;
}
.qp-layer-opt:hover { background: var(--bg-hover); }
.qp-layer-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.qp-layer-rd {
  width: 16px; height: 16px; flex: none; border-radius: 50%; position: relative;
  border: 1.5px solid var(--border);
}
.qp-layer-opt:has(input:checked) { border-color: var(--accent-blue); background: var(--bg-surface-alt); }
.qp-layer-opt:has(input:checked) .qp-layer-rd { border-color: var(--accent-blue); }
.qp-layer-opt:has(input:checked) .qp-layer-rd::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent-blue);
}
.qp-layer-opt:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.qp-layer-ot { flex: 1; min-width: 0; }
.qp-layer-ot b { display: block; font-weight: 500; font-size: 14px; color: var(--text-primary); }
.qp-layer-ot span { display: block; font-size: 12.5px; line-height: 1.4; color: var(--text-secondary); }
.qp-layer-last {
  font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
  color: var(--text-muted); border: 1px solid var(--border-light); border-radius: var(--radius-pill); padding: 2px 7px;
}
.qp-layer-oi { color: var(--text-secondary); width: 20px; justify-content: center; }
.qp-layer-note { font-size: 12px; color: var(--text-muted); margin-top: 12px; }
.qp-layer-modal .qp-modal-actions { justify-content: flex-end; align-items: center; margin-top: 18px; }
.qp-layer-keys {
  flex: 1 1 100%; order: 2; justify-content: flex-end; margin-top: 2px;
  display: flex; gap: 4px; align-items: center; flex-wrap: wrap; font-size: 11px; color: var(--text-muted);
}
.qp-layer-keys kbd {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--text-secondary); background: var(--bg-surface);
  border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 3px; padding: 1px 5px;
}
@media (max-width: 600px) {
  .qp-layer-backdrop { align-items: flex-end; }
  .qp-layer-modal { width: 100%; max-width: none; border-radius: 14px 14px 0 0; padding: 10px 16px 18px; }
  .qp-layer-grab { display: block; }
  .qp-layer-keys { display: none; }
  .qp-layer-modal .qp-modal-actions button { flex: 1; height: 40px; }
}
.qp-modal-actions button:focus-visible {
  outline: 2px solid var(--accent-blue); outline-offset: 2px;
}

/* Hide mobile header on desktop */
@media (min-width: 769px) {
  #mobile-header { display: none !important; }
  #mobile-overlay { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   UI REFRESH (2026-07) — labelled type chips, dot-pills, overflow menus
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Labelled type chips (inbox cards) ── */
.type-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 10px; border-radius: var(--radius-pill);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.01em;
  font-family: var(--font-secondary); white-space: nowrap; flex-shrink: 0;
}
.type-chip svg { width: 12px; height: 12px; }
.type-chip-document { background: #eceaf6; color: #5340a0; }
.type-chip-email { background: #eef8f2; color: #1f8a5b; }
.type-chip-meeting { background: #fdf4e4; color: #b45309; }
.type-chip-action { background: #eaf1fe; color: #2f6fd8; }
[data-theme="dark"] .type-chip-document { background: #2b1e55; color: var(--qp-purple-200); }
[data-theme="dark"] .type-chip-email { background: var(--green-bg); color: var(--green); }
[data-theme="dark"] .type-chip-meeting { background: var(--amber-bg); color: var(--amber); }
[data-theme="dark"] .type-chip-action { background: #12233f; color: var(--accent-blue); }
.type-chip-task { background: var(--bg-hover); color: var(--accent); }
[data-theme="dark"] .type-chip-task { color: var(--qp-purple-200); }

/* ── Dot-pill status (connectors) ── */
.dot-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px; border-radius: var(--radius-pill);
  font-size: 0.72rem; font-weight: 600; white-space: nowrap;
}
.dot-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.dot-pill-green { background: var(--green-bg); color: var(--green); }
.dot-pill-amber { background: var(--amber-bg); color: var(--amber); }
.dot-pill-grey { background: var(--bg-hover); color: var(--text-muted); }

/* ── Overflow ("...") menu — click-to-toggle popover for demoted actions ── */
.qp-menu-wrap { position: relative; display: inline-flex; }
/* .source-card scope: its generic `button` rule otherwise wins on specificity (connector cards). */
.qp-menu-btn, .source-card .qp-menu-btn {
  width: 30px; height: 30px; padding: 0; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: transparent;
  color: var(--text-secondary); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s; flex-shrink: 0;
}
.qp-menu-btn:hover, .source-card .qp-menu-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.qp-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 4px);
  min-width: 180px; z-index: 300;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-card-hover);
  padding: 4px; flex-direction: column;
}
.qp-menu.open { display: flex; }
.qp-menu button {
  display: block; width: 100%; text-align: left;
  padding: 7px 12px; border: none; background: transparent;
  border-radius: var(--radius-sm); font-size: 0.82rem;
  color: var(--text-primary); cursor: pointer;
  font-family: var(--font-secondary);
}
.qp-menu button:hover { background: var(--bg-hover); }
.qp-menu button.danger { color: var(--red); }
.qp-menu button.warn { color: var(--amber); }
.qp-menu label { padding: 7px 12px; font-size: 0.78rem; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }

/* ── Search box with leading magnifier (documents) ── */
.doc-search-wrap { position: relative; flex: 1; display: flex; align-items: center; }
.doc-search-wrap > svg {
  position: absolute; left: 10px; color: var(--text-muted); pointer-events: none;
}
.doc-search-wrap .doc-search-box { padding-left: 32px; border-radius: var(--radius-md); }

/* ── Installed-model markers in settings selects ── */
.model-select option[data-installed="true"], .form-select option[data-installed="true"] { color: var(--green); }

/* ── Quiet destructive icon-button (documents detail) ── */
.doc-btn-icon-danger {
  margin-left: auto; width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent !important; border-radius: var(--radius-md);
  background: transparent; color: var(--red); cursor: pointer; opacity: 0.7;
  padding: 0;
}
.doc-btn-icon-danger:hover { opacity: 1; background: var(--red-bg); border-color: var(--red) !important; }

/* ── Tinted icon tile (drafts detail header, connectors) ── */
.icon-tile {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: #f4f2fa; color: var(--qp-purple-500);
  display: inline-flex; align-items: center; justify-content: center;
}
[data-theme="dark"] .icon-tile { background: var(--bg-surface-alt); color: var(--qp-purple-300); }

/* Privacy-notice tint is inline (--qp-purple-50); that token is light-only,
   so dark theme needs a surface override. */
[data-theme="dark"] .transcript-privacy-notice { background: var(--bg-surface-alt) !important; }

/* ── Lock note ("Always private", connector privacy) ── */
.lock-note {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.78rem; color: var(--text-muted); font-style: italic; padding: 4px 8px;
}
.lock-note svg { flex-shrink: 0; }

/* ── Tab-panel category icons (inbox/drafts subnav) ── */
.tab-panel-item svg { flex-shrink: 0; color: currentColor; }

/* ── Profile page ── */
.profile-eyebrow {
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--text-brand-muted);
  margin: 0 0 10px;
}
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.profile-grid .full { grid-column: 1 / -1; }
@media (max-width: 768px) { .profile-grid { grid-template-columns: 1fr; } }
.role-pill {
  display: inline-flex; align-items: center;
  padding: 2px 10px; border-radius: var(--radius-pill);
  background: var(--qp-purple-100); color: var(--qp-purple-700);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em;
}
[data-theme="dark"] .role-pill { background: #2b1e55; color: var(--qp-purple-200); }
.avatar-edit-badge {
  position: absolute; right: -2px; bottom: -2px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--bg-surface); border: 1px solid var(--border);
  color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
}

/* ── ─────────────── DASHBOARD (LLM spend) ─────────────── */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.dash-wide { grid-column: 1 / -1; }
@media (min-width: 1000px) { .dash-span2 { grid-column: span 2; } }
.dash-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dash-card-title {
  font-size: 13px; font-weight: 500; color: var(--qp-purple); margin: 0;
  font-family: var(--font-primary); letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
[data-theme="dark"] .dash-card-title { color: var(--text-secondary); }
.dash-note { font-size: 12px; color: var(--text-secondary); margin: 0; font-family: var(--font-secondary); }
.dash-kpi { font-size: 32px; font-family: var(--font-primary); color: var(--text-strong); line-height: 1.1; }
[data-theme="dark"] .dash-kpi { color: var(--text-primary); }
.dash-banner {
  grid-column: 1 / -1; background: var(--amber-bg); color: var(--amber);
  border: 1px solid var(--amber); border-radius: var(--radius-md); padding: 10px 16px; font-size: 13px;
}
.dash-meter {
  position: relative; height: 12px; border-radius: var(--radius-sm);
  background: var(--bg-surface-alt); border: 1px solid var(--border); overflow: hidden;
}
.dash-meter-fill { height: 100%; }
.dash-green { background: var(--green); }
.dash-amber { background: var(--amber); }
.dash-red { background: var(--red); }
.dash-meter-warn { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--amber); }
.dash-meter-legend {
  display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted);
}
.dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; }
.dash-stats > div { display: flex; flex-direction: column; }
.dash-stat { font-size: 22px; font-family: var(--font-primary); color: var(--text-strong); }
[data-theme="dark"] .dash-stat { color: var(--text-primary); }
.dash-trend {
  display: flex; align-items: flex-end; gap: 3px; height: 120px;
  border-bottom: 1px solid var(--border);
}
.dash-trend-bar { flex: 1; background: var(--accent); border-radius: 2px 2px 0 0; opacity: 0.85; }
[data-theme="dark"] .dash-trend-bar { background: var(--qp-purple-300); }
.dash-trend-bar.dash-future { opacity: 0.15; }
.dash-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dash-table th {
  text-align: left; font-weight: 500; color: var(--text-muted); font-size: 11px;
  padding: 6px 8px; border-bottom: 1px solid var(--border);
}
.dash-table td { padding: 7px 8px; border-bottom: 1px solid var(--border-light); color: var(--text-primary); }
.dash-table code { font-family: var(--font-mono); font-size: 12px; }
.dash-pill { font-size: 11px; padding: 1px 6px; border-radius: var(--radius-pill); }
@media (max-width: 640px) {
  .dash-card { overflow-x: auto; }
  .dash-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ── Meeting bot picker (/meeting-bot) ── */
.mb-page { max-width: 960px; display: flex; flex-direction: column; gap: 20px; }
.mb-week-nav { gap: 6px; }
.mb-nav-btn { padding: 4px 10px; }
.mb-week-label { font-size: 13px; color: var(--text-secondary); min-width: 150px; text-align: center; }
.mb-mode { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: 0; }
.mb-mode legend { font-size: 12px; color: var(--text-muted); padding: 0 4px; }
.mb-mode-option { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; text-transform: none; letter-spacing: 0; margin: 0; }
.mb-mode-option input { width: auto; accent-color: var(--accent); }
.mb-mode-option input:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; }
.mb-heading { font-size: 14px; font-weight: 600; color: var(--text-brand); margin: 0 0 8px; }
[data-theme="dark"] .mb-heading { color: var(--text-primary); }
.mb-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.mb-muted { font-size: 12px; color: var(--text-muted); margin: 0; }
.mb-notice { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 14px; font-size: 13px; margin-bottom: 8px; }
.mb-notice a { color: inherit; text-decoration: underline; }
.mb-error { background: var(--red-bg); color: var(--red); border-radius: var(--radius-md); padding: 8px 12px; font-size: 13px; }
.mb-week { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.mb-week table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mb-week th[scope="row"] { width: 72px; vertical-align: top; text-align: left; font-weight: 600; color: var(--text-secondary); padding: 8px 10px; border-top: 1px solid var(--border-light); }
.mb-week td { padding: 8px 10px; border-top: 1px solid var(--border-light); vertical-align: middle; }
.mb-week tr.mb-day-cont th[scope="row"], .mb-week tr.mb-day-cont td { border-top-color: transparent; }
.mb-week .mb-time { font-variant-numeric: tabular-nums; color: var(--text-secondary); margin-right: 8px; }
.mb-week .mb-platform { width: 70px; color: var(--text-secondary); }
.mb-week .mb-actions { text-align: right; white-space: nowrap; }
.mb-week .mb-empty { padding: 14px; color: var(--text-muted); }
.mb-btn { background: transparent; color: var(--accent); border: 1px solid var(--border); border-radius: var(--radius-control); padding: 3px 10px; font-size: 12px; cursor: pointer; margin-left: 4px; font-family: var(--font-secondary); }
.mb-btn:hover { background: var(--bg-hover); }
.mb-btn:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; }
.mb-btn[aria-pressed="true"] { background: var(--accent); color: var(--text-on-dark); border-color: var(--accent); }
.mb-btn.mb-danger { color: var(--red); }
.mb-btn:disabled { opacity: 0.5; cursor: default; }
.mb-chip { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: var(--radius-pill); margin-left: 6px; background: var(--bg-surface-alt); color: var(--text-secondary); }
.mb-chip.mb-ok { background: var(--green-bg); color: var(--green); }
.mb-chip.mb-live { background: var(--amber-bg); color: var(--amber); }
.mb-chip.mb-bad { background: var(--red-bg); color: var(--red); }
.mb-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-md); }
.mb-list li { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 13px; border-top: 1px solid var(--border-light); }
.mb-list li:first-child { border-top: none; }
.mb-list li .mb-grow { flex: 1; }
.mb-link-form { display: flex; flex-direction: column; gap: 6px; max-width: 640px; }
.mb-label { font-size: 12px; color: var(--text-secondary); text-transform: none; letter-spacing: 0; margin: 0; }
.mb-link-form input { padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--bg-surface); color: var(--text-primary); font-size: 13px; }
.mb-link-form input:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 1px; }
@media (max-width: 640px) {
  .mb-week { overflow-x: auto; }
  .mb-week-label { min-width: 0; }
}
/* ── Tasks page (List view; the Board view reuses the shell) ── */
.tasks-page {
  flex: 1; min-height: 0; overflow-y: auto; padding: 16px 24px 48px;
  display: flex; flex-direction: column; gap: 16px; background: var(--bg-app);
}
.tasks-page [hidden] { display: none !important; }
.tasks-summary { font-size: 13px; color: var(--text-secondary); }
.tasks-view-toggle { display: flex; gap: 4px; }
.tasks-view-btn {
  padding: 6px 14px; border-radius: var(--radius-control); border: 1px solid var(--border);
  color: var(--text-brand); font-size: 13px; text-decoration: none; font-family: var(--font-secondary);
}
.tasks-view-btn:hover { background: var(--bg-hover); }
.tasks-view-btn.active { background: var(--accent); border-color: var(--accent); color: var(--text-on-dark); }
.tasks-filters, .tasks-add {
  display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end;
  padding: 12px; background: var(--bg-surface-alt); border-radius: var(--radius-md);
}
.tasks-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-secondary); }
.tasks-field input, .tasks-field select {
  padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-control);
  background: var(--bg-surface); color: var(--text-primary); font-family: inherit; font-size: 14px;
}
.tasks-field input[type="search"], #tasks-add-title { width: 220px; max-width: 100%; }
.tasks-show-done { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-primary); margin-left: auto; }
.tasks-date-wrap { position: relative; display: flex; align-items: center; }
.tasks-date-wrap input { width: 100%; }
.tasks-date-clear {
  position: absolute; right: 30px; top: 50%; transform: translateY(-50%);
  padding: 0 6px; line-height: 20px; border: 0; border-radius: var(--radius-control);
  background: transparent; color: var(--text-secondary); font-size: 14px; cursor: pointer;
}
.tasks-date-clear[hidden] { display: none; }
.tasks-date-clear:hover { color: var(--text-primary); }
.tasks-date-clear:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; }
.tasks-sticky { opacity: 0.55; }
.tasks-sticky-note { font-size: 12px; color: var(--text-secondary); margin-left: 8px; }
.tasks-group { display: flex; flex-direction: column; gap: 6px; }
.tasks-group > summary { cursor: pointer; list-style: none; width: fit-content; }
.tasks-group > summary::-webkit-details-marker { display: none; }
.tasks-group > summary::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px;
  border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted);
  transform: rotate(-45deg); transition: transform 0.12s;
}
.tasks-group[open] > summary::before { transform: rotate(45deg); }
.tasks-group > summary { display: flex; align-items: center; }
.tasks-group > summary:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; }
.tasks-group[open] > summary { margin-bottom: 6px; }
.tasks-group-title {
  margin: 4px 0 0; font-size: 14px; font-weight: 600; color: var(--text-primary);
  display: flex; align-items: center; gap: 8px;
}
.tasks-group-count { color: var(--text-muted); font-weight: 500; }
.tasks-dot { width: 10px; height: 10px; border-radius: var(--radius-pill); background: var(--text-muted); }
.tasks-dot-new { background: var(--qp-purple-500); }
.tasks-dot-in_progress { background: var(--qp-blue); }
.tasks-dot-waiting { background: var(--amber); }
.tasks-dot-done { background: var(--green); }
.tasks-table-wrap { overflow-x: auto; border: 1px solid var(--border-light); border-radius: var(--radius-md); }
.tasks-table { width: 100%; min-width: 860px; border-collapse: collapse; font-size: 14px; }
.tasks-table th {
  text-align: left; padding: 8px 12px; font-weight: 600; font-size: 12px;
  color: var(--text-secondary); background: var(--bg-surface-alt);
}
.tasks-table td { padding: 8px 12px; border-top: 1px solid var(--border-light); vertical-align: top; color: var(--text-primary); }
.tasks-col-task { width: 38%; }
.tasks-col-actions, .tasks-cell-actions { text-align: right; white-space: nowrap; }
.tasks-title-input {
  width: 100%; box-sizing: border-box; padding: 4px 6px; margin-left: -6px; font-weight: 600;
  font-family: inherit; font-size: 14px; color: var(--text-primary);
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-control);
}
.tasks-title-input:hover { border-color: var(--border); }
.tasks-lead { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.tasks-notes { margin-top: 4px; font-size: 12px; color: var(--text-secondary); }
.tasks-notes summary { cursor: pointer; width: fit-content; }
.tasks-notes-input {
  display: block; width: 100%; box-sizing: border-box; margin-top: 4px; padding: 6px 8px;
  font-family: inherit; font-size: 13px; color: var(--text-primary); background: var(--bg-surface);
  border: 1px solid var(--border); border-radius: var(--radius-control); resize: vertical;
}
.tasks-status, .tasks-due-input {
  padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--radius-control);
  background: var(--bg-surface); color: var(--text-primary); font-family: inherit; font-size: 13px;
}
.tasks-due-input.tasks-overdue { color: var(--red); border-color: var(--red); }
textarea.tasks-unsaved { border-color: var(--red); outline: 1px solid var(--red); }
.tasks-due-hint { margin-top: 4px; font-size: 12px; color: var(--text-secondary); font-style: italic; }
.tasks-cell-meeting { color: var(--text-secondary); font-size: 13px; }
.tasks-btn {
  display: inline-block; margin-left: 4px; padding: 5px 10px; border-radius: var(--radius-control);
  border: 1px solid var(--border); background: var(--bg-surface); color: var(--text-secondary);
  font-family: inherit; font-size: 13px; text-decoration: none; cursor: pointer;
}
.tasks-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.tasks-btn:disabled { opacity: 0.6; cursor: default; }
.tasks-btn-primary { background: var(--accent); border-color: var(--accent); color: var(--text-on-dark); }
.tasks-btn-primary:hover { background: var(--accent-hover); color: var(--text-on-dark); }
.tasks-empty { margin: 24px 0; text-align: center; color: var(--text-secondary); font-size: 14px; }
.tasks-view-btn:focus-visible, .tasks-btn:focus-visible, .tasks-title-input:focus-visible,
.tasks-notes summary:focus-visible, .tasks-notes-input:focus-visible, .tasks-status:focus-visible,
.tasks-due-input:focus-visible, .tasks-field input:focus-visible, .tasks-field select:focus-visible,
.tasks-show-done input:focus-visible, #tasks-f-clear:focus-visible {
  outline: 2px solid var(--focus-ring-color); outline-offset: 2px;
}
/* Board */
.tasks-board {
  display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 16px;
  overflow-x: auto; min-width: 0; align-items: start;
}
.tasks-col {
  background: var(--bg-surface-alt); border-radius: var(--radius-md); padding: 12px;
  display: flex; flex-direction: column; gap: 10px; border: 2px solid transparent;
}
.tasks-col.tasks-col-over { border-color: var(--accent); }
.tasks-col-cards { display: flex; flex-direction: column; gap: 10px; min-height: 48px; }
.tasks-card {
  background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-md);
  padding: 12px; display: flex; flex-direction: column; gap: 6px; cursor: grab;
}
.tasks-card.tasks-dragging { opacity: 0.5; }
.tasks-card-head { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.tasks-card-title { font-weight: 600; font-size: 14px; color: var(--text-primary); overflow-wrap: anywhere; }
.tasks-card-meeting { font-size: 12px; color: var(--text-secondary); }
.tasks-card-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-secondary);
}
.tasks-card-due.tasks-overdue { color: var(--red); }
.tasks-card-status { align-self: flex-start; }
.tasks-card:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; }
@media (max-width: 640px) {
  .tasks-page { padding: 12px 16px 48px; }
  .tasks-show-done { margin-left: 0; }
}

/* Today card on the chat landing page */
/* Sits between the chat header and #chat-thread, so no chat path rewrites it.
   Shown on every load; collapsed after a send in this page view (qp-chat.js). */
.today-card {
  box-sizing: border-box; width: calc(100% - 32px); max-width: 720px; text-align: left;
  margin: 16px auto 0; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px 20px; border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); background: var(--bg-surface-alt);
}
.today-card[hidden], .today-card.today-card-collapsed { display: none; }
.today-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.today-card-head h3 { margin: 0; font-size: 17px; color: var(--text-brand); font-family: var(--font-primary); }
.today-card-open { font-size: 14px; font-weight: 600; color: var(--accent); }
.today-card-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.today-tile {
  display: flex; flex-direction: column; gap: 2px; padding: 12px;
  border-radius: var(--radius-md); text-decoration: none; color: var(--text-primary);
}
.today-tile-count { font-size: 24px; font-weight: 700; }
.today-tile-label { font-size: 13px; }
.today-tile { background: color-mix(in srgb, var(--accent) 10%, var(--bg-surface)); }
.today-tile:hover { background: color-mix(in srgb, var(--accent) 18%, var(--bg-surface)); }
.today-tile-count { color: var(--text-brand); }
.today-tile-due { background: color-mix(in srgb, var(--accent) 18%, var(--bg-surface)); }
.today-tile-new { background: color-mix(in srgb, var(--accent) 28%, var(--bg-surface)); }
.today-tile-alert .today-tile-count { color: var(--red); }
.today-card-hide {
  align-self: flex-end; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer;
  border-radius: var(--radius-control); border: 1px solid var(--border);
  background: var(--bg-surface); color: var(--text-secondary);
}
.today-card-hide:hover { background: var(--bg-hover); color: var(--text-primary); }
.today-tile:focus-visible, .today-card-open:focus-visible, .today-card-hide:focus-visible {
  outline: 2px solid var(--focus-ring-color); outline-offset: 2px;
}
@media (max-width: 640px) {
  .today-card-tiles { grid-template-columns: 1fr; }
}

.inbox-search-bar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; padding: 8px 16px; }
.inbox-search-bar .tasks-field input[type="search"] { width: 280px; max-width: 100%; }
.inbox-search-bar input[type="search"]:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 1px; }
.inbox-search-count { font-size: 13px; color: var(--text-secondary); padding-bottom: 8px; }
.inbox-nomatch { margin: 12px 16px; font-size: 14px; color: var(--text-muted); }
.inbox-search-hidden { display: none !important; }

/* Inbox source badge for the meeting bot (Vexa) */
.source-badge-vexa { display: inline-block; width: 24px; height: 24px; line-height: 24px; text-align: center; border-radius: 4px; background: var(--accent); color: var(--text-on-dark, #fff); font-size: 11px; font-weight: 600; }

/* Chat activity block: live steps, thinking text, then a one-line summary (2026-10-23). */
.chat-activity { font-size: 12.5px; color: var(--text-secondary); margin: 0 0 6px; }
.chat-activity > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; }
.chat-activity > summary::-webkit-details-marker { display: none; }
.chat-activity > summary:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; border-radius: 4px; }
.activity-time { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.activity-spinner { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--border);
  border-top-color: var(--accent); animation: activity-spin 0.9s linear infinite; flex: none; }
@keyframes activity-spin { to { transform: rotate(360deg); } }
.activity-steps { list-style: none; margin: 4px 0 0 2px; padding: 0; }
.activity-steps li { padding: 1px 0 1px 16px; position: relative; }
.activity-steps li::before { position: absolute; left: 0; }
.activity-steps li.running::before { content: "\2022"; color: var(--accent); }
.activity-steps li.done::before { content: "\2713"; color: var(--text-muted); }
.activity-steps li.stopped::before { content: "\2715"; color: var(--red); }
.activity-thinking { margin: 4px 0 2px 16px; padding: 6px 10px; max-height: 160px; overflow-y: auto;
  white-space: pre-wrap; font-style: italic; color: var(--text-muted);
  border-left: 2px solid var(--border); }
@media (prefers-reduced-motion: reduce) { .activity-spinner { animation: none; } }

/* /research run pages: brief fields with status pills */
.research-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.research-field { padding: 10px 0; border-top: 1px solid var(--border); }
.research-field-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.research-field-head h4 { margin: 0; }
.brief-grow {
  box-sizing: border-box; width: 100%; min-width: min(320px, 100%); max-width: 1200px;
  field-sizing: content; min-height: 3em; max-height: 24em; overflow-y: auto; resize: vertical; }

/* Offers under an answer (#130): one-shot Deep search, meeting date chips. */
.answer-offer { margin: 6px 0 2px; font-size: 12.5px; color: var(--text-secondary); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.answer-offer-btn { font-size: 12px; color: var(--text-secondary); background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px 10px; cursor: pointer; }
.answer-offer-btn:hover { color: var(--text-primary); border-color: var(--accent); }
.answer-offer-btn:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; }
.answer-offer-btn:disabled { opacity: 0.5; cursor: default; }
.our-work-offer { margin: 2px 0 8px; }
.our-work-btn { font-size: 14px; font-weight: 600; min-height: 36px; padding: 6px 16px; color: var(--text-on-dark); background: var(--accent); border: 1px solid var(--accent); border-radius: var(--radius-sm); cursor: pointer; }
.our-work-btn:hover:not(:disabled) { background: var(--accent-hover); }
.our-work-btn:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; }
.our-work-btn:disabled { opacity: 0.6; cursor: default; }
.msg-stopped { margin: 6px 0 0; font-size: 12.5px; color: var(--text-secondary); }

/* Deep Research clarifying questions: one tab per question (one round). */
.clarify-card { margin: 8px 0 2px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13px; color: var(--text-primary); max-width: 640px; }
.clarify-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.clarify-tab { font-size: 12px; color: var(--text-secondary); background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px 10px; cursor: pointer; }
.clarify-tab.active { color: var(--text-primary); border-color: var(--accent); }
.clarify-tab.answered::after { content: " \2713"; color: var(--accent); }
.clarify-tab:focus-visible, .clarify-panel input:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; }
.clarify-panel p { margin: 0 0 6px; }
.clarify-panel label { display: flex; align-items: center; gap: 6px; padding: 2px 0; cursor: pointer; }
.clarify-panel label.clarify-unavailable { color: var(--text-muted); cursor: not-allowed; }
.clarify-other { width: 100%; margin-top: 4px; font-size: 12.5px; padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: transparent; color: var(--text-primary); }
.clarify-actions { display: flex; gap: 6px; margin-top: 10px; }

/* Wiki view (#90): page list beside the page. */
.wiki-panes { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
.wiki-list { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; max-height: calc(100vh - 120px); overflow-y: auto; }
.wiki-list .form-input { max-width: none; margin-bottom: 8px; }
.wiki-list a { padding: 4px 8px; border-radius: var(--radius-sm); color: var(--text-secondary); text-decoration: none; }
.wiki-list a:hover, .wiki-list a.active { color: var(--text-primary); background: var(--bg-surface-alt); }
.wiki-body { max-width: 860px; line-height: 1.6; }
.wiki-tabs { display: flex; gap: 4px; margin-left: 16px; }
.wiki-tab { padding: 4px 12px; border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 0.9rem; }
.wiki-tab.active { color: var(--text-primary); background: var(--bg-surface-alt); }
.wiki-tab[aria-disabled="true"] { opacity: 0.5; cursor: default; }
.wiki-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.wiki-list a.wiki-chip, .wiki-chip { padding: 2px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 0.8rem; color: var(--text-secondary); text-decoration: none; }
.wiki-list a.wiki-chip.active, .wiki-chip.active { color: var(--text-primary); border-color: var(--accent); }
.wiki-list details { margin-top: 6px; }
.wiki-list summary { cursor: pointer; font-size: 0.8rem; color: var(--text-secondary); padding: 4px 0; }
.wiki-list details a { display: block; }
.wiki-list a.wiki-off, .wiki-list details.wiki-off { display: none; }
.wiki-item-tags { display: none; color: var(--text-secondary); font-size: 0.75rem; }
.wiki-list.searching .wiki-item-tags { display: inline; }
.wiki-crumb { margin: 0 0 6px; }
.wiki-edit-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.wiki-edit-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 12px; }
.wiki-edit-text { width: 100%; max-width: none; font-family: monospace; }
.wiki-edit-preview { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px; overflow: auto; }
.wiki-edit-error { color: var(--red); font-weight: 600; }
.wiki-edit pre, .wiki-edit-entry pre { white-space: pre-wrap; overflow-x: auto; }
.wiki-edit-resolve { display: inline-block; margin-right: 8px; }
@media (max-width: 800px) { .wiki-edit-cols { grid-template-columns: 1fr; } }
.wiki-toc { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 12px; }
@media (max-width: 800px) { .wiki-panes { grid-template-columns: 1fr; } .wiki-list { position: static; } }

/* Web results the answer was given, and the saved reasoning of a reloaded answer */
.msg-sources-considered, .msg-web-links { font-size: 0.72rem; color: var(--text-muted); margin-top: 6px; }
.msg-sources-considered > summary, .msg-web-links > summary { cursor: pointer; }
.msg-sources-considered ul, .msg-web-links ul { margin: 4px 0 0 16px; padding: 0; }
.msg-sources-considered .cited { color: var(--accent); }
.msg-web-links a, .msg-sources-considered a { color: var(--accent); }
.msg-reasoning { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 6px; }
.msg-reasoning > summary { cursor: pointer; }

/* ── Project register (/register): sections, programme cards, drawer, cascade, people picker ── */
.register { display: flex; flex-direction: column; gap: 20px; padding: 24px 32px; }
.register-section { display: flex; flex-direction: column; gap: 20px; }
.register-section[hidden], .register-pop:empty { display: none; }
.register :focus-visible, .register-drawer :focus-visible, .register-seg-i:focus-visible,
#register-new:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; box-shadow: none; }
.register [hidden], .register-drawer [hidden] { display: none !important; }
.register-eyebrow { font-size: 12px; line-height: 1.2; letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--text-secondary); font-weight: 500; }
.register-hint { font-size: 12px; color: var(--text-muted); }
.register-sub { font-size: 12.5px; color: var(--text-secondary); margin: 0; }
.register-nm { font-weight: 500; color: var(--text-primary); }
.register-mail { font-size: 12.5px; color: var(--text-secondary); }
.register-crumb { font-size: 12.5px; color: var(--text-secondary); }
.register-pad { padding: 10px 12px; margin: 0; }
.register-push { margin-left: auto; }
.register-grow { flex: 1; min-width: 0; }
.register-placeholder { padding: 24px 0; }

/* Section switcher (segmented control in the page header) */
.register-seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-control);
  padding: 2px; gap: 2px; background: var(--bg-app); margin-left: 16px; }
.register-seg-i { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px;
  border-radius: 3px; color: var(--text-secondary); font-weight: 500; font-size: 13.5px;
  text-decoration: none; }
.register-seg-i:hover { background: var(--bg-hover); color: var(--text-primary); }
.register-seg-i.register-on { background: var(--accent); color: var(--text-on-dark); }
.register-cnt { display: inline-flex; align-items: center; height: 18px; padding: 0 6px;
  border-radius: var(--radius-pill); background: var(--bg-surface-alt); color: var(--text-secondary);
  font-size: 11px; font-weight: 600; }
.register-cnt:empty { display: none; }
.register-seg-i.register-on .register-cnt { background: color-mix(in srgb, var(--text-on-dark) 18%, transparent);
  color: var(--text-on-dark); }

/* Chips */
.register-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.register-chip { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px;
  border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 500; white-space: nowrap;
  background: var(--bg-surface-alt); color: var(--text-secondary); }
.register-aud { background: var(--chip-src-bg); color: var(--chip-src-text); }
.register-pd { background: var(--red-bg); color: var(--red); }
.register-ext { border: 1px solid var(--border); height: 18px; }
.register-dot { width: 6px; height: 6px; border-radius: var(--radius-pill); background: currentColor; }

/* Overview band (1c): what waits for review, last import */
.register-band { display: flex; align-items: center; gap: 16px; padding: 14px 20px; border-radius: var(--radius-md);
  background: var(--accent); color: var(--text-on-dark); flex-wrap: wrap; }
.register-band-big { font-family: var(--font-primary); font-weight: 300; font-size: 30px; line-height: 1; }
.register-band-col { display: flex; flex-direction: column; }
.register-band-t { font-weight: 500; }
.register-band-mut { font-size: 13px; color: color-mix(in srgb, var(--text-on-dark) 72%, transparent); }
.register-band-btn { display: inline-flex; align-items: center; height: 28px; padding: 0 12px;
  border-radius: var(--radius-control); background: var(--text-on-dark); color: var(--qp-purple-950);
  font: 500 13px var(--font-secondary); text-decoration: none; }
.register .register-band-btn:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--text-on-dark); }
.register-band-sep { width: 1px; align-self: stretch; background: color-mix(in srgb, var(--text-on-dark) 20%, transparent); }
.register-code { font: 500 12px var(--font-mono); color: var(--chip-src-text); }
.register-ctxrow .register-nm { color: var(--text-secondary); font-weight: 400; }
.register-sugg { white-space: nowrap; }

/* Programme cards */
.register-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.register-card-top .register-chips { flex-wrap: nowrap; }
.register-card { border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 18px 20px;
  display: flex; flex-direction: column; gap: 10px; background: var(--bg-card); cursor: pointer;
  transition: box-shadow var(--dur-fast) var(--ease-standard), border-color var(--dur-fast); }
.register-card:hover { box-shadow: var(--shadow-card-hover); border-color: var(--border); }
.register-card.register-sel { border-color: var(--accent); box-shadow: var(--shadow-card-hover); }
.register-card-top, .register-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.register-card-foot { font-size: 13px; }
.register-card-name { all: unset; cursor: pointer; font-family: var(--font-primary); font-weight: 300;
  font-size: 24px; letter-spacing: -0.014em; line-height: 1.1; color: var(--text-strong);
  border-radius: var(--radius-sm); overflow-wrap: anywhere; }
.register-card-name:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; }
.register-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--border-light); padding-top: 12px; margin-top: 2px; }
.register-stats div { display: flex; flex-direction: column; gap: 2px; }
.register-stats b { font-family: var(--font-primary); font-weight: 400; font-size: 20px;
  color: var(--text-primary); line-height: 1; }
.register-stats span { font-size: 11.5px; color: var(--text-secondary); }
.register-lnk { color: var(--accent-blue); font-weight: 500; text-decoration: none; }
.register-lnk:hover { color: var(--accent-blue-hover); text-decoration: underline; }
.register-newcard { border: 1px dashed var(--border-strong); border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--text-secondary);
  font: 500 14px var(--font-secondary); min-height: 180px; background: transparent; cursor: pointer; }
.register-newcard:hover { background: var(--bg-surface-alt); color: var(--text-primary); }

/* Drawer */
.register-scrim { position: fixed; inset: 0; z-index: 200;
  background: color-mix(in srgb, var(--qp-purple-950) 22%, transparent); }
[data-theme="dark"] .register-scrim { background: color-mix(in srgb, var(--bg-sidebar) 60%, transparent); }
.register-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(600px, 100vw); z-index: 201;
  background: var(--bg-surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-toast);
  display: flex; flex-direction: column; color: var(--text-primary); font-family: var(--font-secondary); }
.register-dr-h { padding: 20px 24px 16px; border-bottom: 1px solid var(--border-light); display: flex;
  align-items: flex-start; justify-content: space-between; gap: 12px; }
.register-dr-title { font-family: var(--font-primary); font-weight: 300; font-size: 26px;
  letter-spacing: -0.014em; color: var(--text-strong); margin: 4px 0 0; overflow-wrap: anywhere; }
.register-dr-b { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 24px; display: flex;
  flex-direction: column; gap: 16px; }
.register-dr-f { padding: 14px 24px; border-top: 1px solid var(--border-light); display: flex;
  align-items: center; gap: 8px; }
.register-two { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; }
.register-field { display: flex; flex-direction: column; gap: 6px; }
.register-lbl { font-size: 12.5px; font-weight: 500; color: var(--text-secondary); }
.register-inp { min-height: 34px; padding: 0 10px; border: 1px solid var(--border);
  border-radius: var(--radius-control); background: var(--bg-app); color: var(--text-primary);
  font: 14px var(--font-secondary); box-sizing: border-box; width: 100%; }
.register-ta { padding: 8px 10px; min-height: 64px; line-height: 1.5; resize: vertical; }
.register-segctl { display: inline-flex; align-self: flex-start; border: 1px solid var(--border);
  border-radius: var(--radius-control); padding: 2px; gap: 2px; background: var(--bg-app); }
.register-segctl-i { position: relative; display: inline-flex; }
.register-segctl-i input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.register-segctl-i span { display: flex; align-items: center; height: 28px; padding: 0 12px;
  border-radius: 3px; color: var(--text-secondary); font-weight: 500; font-size: 13px; }
.register-segctl-i input:checked + span { background: var(--accent); color: var(--text-on-dark); }
.register-segctl-i input:focus-visible + span { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; }
.register-switch-row { display: flex; align-items: center; gap: 8px; min-height: 34px; }
.register-switch { appearance: none; width: 34px; height: 20px; border-radius: var(--radius-pill);
  background: var(--border); position: relative; margin: 0; cursor: pointer; flex: none;
  transition: background var(--dur-fast); }
.register-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: var(--radius-pill); background: var(--bg-app); transition: left var(--dur-fast); }
.register-switch:checked { background: var(--red); }
.register-switch:checked::after { left: 16px; }
.register-ibtn { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-control); color: var(--text-secondary); font-size: 18px; border: none;
  background: transparent; cursor: pointer; flex: none; }
.register-ibtn:hover { background: var(--bg-hover); color: var(--text-primary); }
.register-danger { color: var(--red); background: transparent; border: 1px solid transparent;
  border-radius: var(--radius-control); height: 32px; padding: 0 12px; font: 500 13px var(--font-secondary);
  cursor: pointer; }
.register-danger:hover { background: var(--red-bg); }

/* Member tabs and lists */
.register-members { display: flex; flex-direction: column; gap: 12px; }
.register-mtabs { display: flex; gap: 20px; border-bottom: 1px solid var(--border-light); }
.register-mtab { display: inline-flex; align-items: center; gap: 6px; padding: 0 0 10px; border: none;
  border-bottom: 2px solid transparent; background: none; color: var(--text-secondary);
  font: 500 13.5px var(--font-secondary); cursor: pointer; }
.register-mtab.register-on { color: var(--text-strong); border-bottom-color: var(--text-strong); }
.register-mpanel { display: flex; flex-direction: column; gap: 10px; position: relative; }
.register-mbar { display: flex; gap: 8px; align-items: center; }
.register-mbar .register-inp { flex: 1; }
.register-anchor { position: relative; flex: 1; min-width: 0; }
/* Pickers overlay the member list, anchored under their trigger (1a, 1c). */
.register-pop { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 10; }
.register-pop .register-menu { max-height: min(460px, calc(100vh - 160px)); }
.register-mbar .register-kind { flex: none; width: auto; }
.register-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border-light);
  border-radius: var(--radius-md); background: var(--bg-card); }
.register-row { display: flex; align-items: center; gap: 10px; padding: 9px 16px; min-height: 42px;
  border-bottom: 1px solid var(--border-light); }
.register-row:last-child { border-bottom: 0; }
.register-rm .register-nm { text-decoration: line-through; color: var(--text-muted); }
.register-arch .register-nm { color: var(--text-muted); }
/* Inherited children of a node item (drawer) and of a member parent (tree chip): read-only. */
.register-inh { padding: 0 16px 6px 32px; border-bottom: 1px solid var(--border-light); }
.register-inh:last-child { border-bottom: 0; }
.register-row:has(+ .register-inh) { border-bottom: 0; }
.register-inh .register-list { border: 0; background: transparent; }
.register-inh-row { min-height: 30px; padding: 3px 0; }
.register-inh summary { cursor: pointer; padding: 6px 0; }
.register-inh summary:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; }
.register-inh-chip { background: transparent; color: var(--text-muted); border: 1px dashed var(--border); }
.register-switch { flex: none; min-height: 28px; padding: 0 10px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary);
  font: inherit; font-size: 12px; cursor: pointer; }
.register-switch[aria-checked="true"] { background: var(--accent); border-color: var(--accent);
  color: var(--text-on-dark); }
.register-ini { width: 26px; height: 26px; flex: none; border-radius: var(--radius-sm);
  background: var(--chip-src-bg); color: var(--chip-src-text); display: flex; align-items: center;
  justify-content: center; font-size: 11px; font-weight: 600; }
.register-ini-x { background: var(--bg-surface-alt); color: var(--text-secondary); }

/* Menus: cascade and people picker */
.register-menu { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-toast); display: flex; flex-direction: column; overflow: hidden; }
.register-menu-search { display: flex; align-items: center; gap: 10px; padding: 8px 8px 4px; }
.register-panes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); min-height: 0; }
.register-pane { padding: 4px 0; overflow-y: auto; min-width: 0;
  max-height: min(340px, calc(100vh - 300px)); }
.register-pane + .register-pane { border-left: 1px solid var(--border-light); }
.register-results, .register-plist { max-height: min(340px, calc(100vh - 300px)); overflow-y: auto;
  padding: 4px 0; min-height: 0; }
.register-mh, .register-mgrp { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 8px 12px 6px; }
.register-pane .register-mh .register-hint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0; }
.register-mfoot > span { display: inline-flex; align-items: center; gap: 4px; }
.register-mfoot .register-kbd { opacity: 1; border-color: var(--border); background: var(--bg-surface); }
.register-mi { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 12px;
  margin: 0 4px; border-radius: var(--radius-control); font-size: 13.5px; color: var(--text-primary);
  cursor: pointer; }
.register-mi .register-grow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.register-mi:hover { background: var(--bg-surface-alt); }
.register-mi.register-path { background: var(--bg-surface-alt); color: var(--text-strong); }
.register-mi:focus, .register-mi.register-kf { background: var(--bg-hover); color: var(--text-strong);
  outline: 2px solid var(--focus-ring-color); outline-offset: -2px; }
.register-mi.register-added, .register-mi[aria-disabled="true"] { color: var(--text-muted); cursor: default; }
.register-mi.register-whole { color: var(--accent-blue); font-weight: 500; }
.register-n, .register-chev { font-size: 11.5px; color: var(--text-muted); }
.register-check { font-size: 11.5px; color: var(--green); white-space: nowrap; }
.register-person { min-height: 40px; }
/* The row Enter acts on shows the Enter key (1a, 1c). */
.register-person.register-kf:not([aria-disabled="true"])::after,
.register-mi[data-level="1"]:not([aria-disabled="true"]):focus::after,
.register-mi[data-level="2"]:not([aria-disabled="true"]):focus::after,
.register-results .register-mi:not([aria-disabled="true"]):focus::after {
  content: "\21b5" / ""; display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border: 1px solid var(--border);
  border-radius: 3px; font: 600 11px var(--font-mono); color: var(--text-secondary); }
.register-mfoot { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 9px 12px;
  border-top: 1px solid var(--border-light); background: var(--bg-panel); font-size: 12px;
  color: var(--text-secondary); }
.register-hl { background: var(--amber-bg); color: inherit; border-radius: 2px; padding: 0 1px; }

/* Tree section */
.register-panel { border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--bg-card); }
.register-imp { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 24px; align-items: center;
  padding: 20px 24px; }
.register-imp-text { display: flex; flex-direction: column; gap: 8px; }
.register-imp-text .register-sub { max-width: 60ch; }
.register-imp-title { font-family: var(--font-primary); font-weight: 400; font-size: 19px;
  color: var(--text-strong); margin: 0; }
.register-impstats { display: grid; grid-template-columns: repeat(4, 112px); border-left: 1px solid var(--border-light); }
.register-impstats > div { padding: 0 20px; display: flex; flex-direction: column; gap: 6px;
  border-right: 1px solid var(--border-light); }
.register-impstats > div:last-child { border-right: 0; }
.register-stat-n { font-family: var(--font-primary); font-weight: 300; font-size: 30px; line-height: 1;
  letter-spacing: var(--tracking-tight); color: var(--text-strong); }
.register-stat-red { color: var(--red); }
.register-stat-mute { color: var(--text-secondary); }
.register-stat-l { font-size: 12px; color: var(--text-secondary); }
.register-imp-eyebrow, .register-imp-btns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.register-imp-btns { margin-top: 4px; }
.register-eyebrow-blue { color: var(--accent-blue); }
.register-imp-status:empty { display: none; }
.register-imp-status { margin: 0; }
.register-spin {
  display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -2px;
  border-radius: 50%; border: 2px solid var(--border-light); border-top-color: currentColor;
  animation: att-spin 0.9s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .register-spin { display: none; } }
.register-impdiff:empty { display: none; }
.register-impdiff { display: flex; flex-direction: column; gap: 8px; max-height: 240px; overflow-y: auto; }
.register-impdiff-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.register-impdiff-list li { display: flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; }
.register-toolbar { display: flex; align-items: center; gap: 12px; }
.register-tree-search { max-width: 420px; }
.register-tree summary { list-style: none; cursor: pointer; }
.register-tree summary::-webkit-details-marker { display: none; }
.register-tree summary::before { content: "\203a"; display: inline-block; width: 14px; color: var(--text-muted);
  transition: transform var(--dur-fast); }
.register-tree details[open] > summary::before { transform: rotate(90deg); }
.register-tree summary, .register-texp, .register-tleaf { display: flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 16px; border-bottom: 1px solid var(--border-light); font-size: 13.5px; }
.register-tproj > summary { padding-left: 38px; }
/* A project without experiments has no chevron: indent its name to the summary text. */
.register-tleaf { padding-left: 60px; }
.register-texp { padding-left: 74px; }
/* 1b column grid: Node | Programmes | Import | actions; the fixed right columns line up
   across levels. */
.register-tn, .register-thead { display: grid; grid-template-columns: minmax(0,1fr) 200px 110px 48px;
  align-items: center; gap: 12px; flex: 1; min-width: 0; }
.register-tcell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.register-tn .register-chips { overflow: hidden; }
.register-thead { min-height: 34px; padding: 0 16px 0 38px; border-bottom: 1px solid var(--border-light);
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); }
.register-segbtn .register-cnt { margin-left: 4px; }
.register-segbtn.register-on .register-cnt { background: color-mix(in srgb, var(--text-on-dark) 18%, transparent);
  color: var(--text-on-dark); }
.register-tn-dep .register-nm { color: var(--text-secondary); }
/* Row actions (1b): small ghost buttons, the programme menu opens under its button. */
.register-tacts { display: flex; justify-content: flex-end; align-items: center; min-width: 0; }
.register-rowanchor { flex: none; }
.register-rowbtn { height: 20px; min-width: 28px; padding: 0 8px; line-height: 1; border: 1px solid var(--border);
  border-radius: var(--radius-control); background: var(--bg-surface); color: var(--text-primary);
  font: 500 12.5px var(--font-secondary); cursor: pointer; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.register-rowbtn:hover { background: var(--bg-hover); }
.register-pop-r { left: auto; right: 0; min-width: 220px; }
.register-pop-r .register-menu { max-height: 260px; overflow-y: auto; padding: 4px 0; }
.register-pop-r .register-mi { border: 0; background: none; text-align: left; font: inherit;
  font-size: 13.5px; width: calc(100% - 8px); }
/* A row whose own name matches the filter is tinted, as in 1b. */
.register-tree summary:has(> .register-tn > .register-tcell .register-hl),
.register-texp:has(.register-hl), .register-tleaf:has(.register-hl) {
  background: color-mix(in srgb, var(--accent) 8%, transparent); }

/* Toast */
.register-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 300;
  padding: 10px 14px; border-radius: var(--radius-md); background: var(--qp-purple-950); color: var(--text-on-dark);
  font-size: 13px; box-shadow: var(--shadow-toast); opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base); }
.register-toast-on { opacity: 1; }
/* Review section (1b): meeting queue | focused meeting | series + keyboard */
.register-segbtn { height: 28px; padding: 0 12px; border: none; border-radius: 3px; background: transparent;
  color: var(--text-secondary); font: 500 13px var(--font-secondary); cursor: pointer; }
.register-segbtn.register-on { background: var(--accent); color: var(--text-on-dark); }
.register-filter { height: 26px; padding-right: 2px; }
.register-filter .register-ibtn { width: 22px; height: 22px; font-size: 15px; color: inherit; }
.register-rv { display: grid; grid-template-columns: 288px minmax(0, 1fr) 288px; min-height: 480px;
  border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--bg-card);
  overflow: hidden; }
.register-queue { background: var(--bg-panel); border-right: 1px solid var(--border-light);
  padding: 12px 10px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.register-qi { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border-radius: var(--radius-control); border: 1px solid transparent; cursor: pointer; }
.register-qi:hover { background: var(--bg-surface-alt); }
.register-qi.register-on { background: var(--bg-surface); border-color: var(--border); }
.register-qi.register-done { opacity: .6; }
.register-qi:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; }
.register-qtop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.register-qtop .register-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.register-cnt-open { background: var(--chip-src-bg); color: var(--chip-src-text); }
.register-focus { padding: 20px 28px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.register-progrow { display: flex; align-items: center; gap: 12px; }
.register-prog { flex: 1; height: 4px; border-radius: var(--radius-pill); background: var(--bg-surface-alt);
  overflow: hidden; }
.register-prog-fill { display: block; height: 100%; background: var(--accent);
  transition: width var(--dur-base) var(--ease-standard); }
.register-stalewhy { color: var(--amber); }
.register-body { color: var(--text-primary); }
.register-undo-ok { font-weight: 600; }
.register-mhead { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; }
.register-mtitle { font-family: var(--font-primary); font-weight: 300; font-size: 26px;
  letter-spacing: -0.016em; line-height: 1.1; color: var(--text-strong); margin: 0; overflow-wrap: anywhere; }
.register-topic { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 6px 14px;
  align-items: center; padding: 12px 14px; border: 1px solid var(--border-light);
  border-radius: var(--radius-md); background: var(--bg-card); }
.register-topic.register-kf { border-color: var(--accent-blue); }
.register-topic:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; }
.register-topic.register-done { background: var(--bg-panel); }
.register-topic.register-done .register-ttitle { color: var(--text-secondary); }
.register-tidx { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); }
.register-ttitle { font-weight: 500; font-size: 15px; color: var(--text-strong); overflow-wrap: anywhere; }
.register-trow { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.register-trow .register-tact { margin-left: auto; }
.register-tact { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; min-width: 0; }
.register-tmeta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.register-psel { width: auto; min-width: 168px; max-width: 200px; min-height: 30px; font-size: 13px; }
.register-sm { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; font-size: 13px; }
.register-sm:disabled { opacity: .5; cursor: not-allowed; }
.register-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  padding: 0 4px; box-sizing: border-box; border: 1px solid currentColor; border-radius: 3px;
  font: 600 10.5px var(--font-mono); opacity: .75; }
.register-rc { font-size: 11.5px; color: var(--text-secondary); padding: 0 6px; height: 20px;
  display: inline-flex; align-items: center; border: 1px dashed var(--border); border-radius: var(--radius-pill); }
.register-st-proposed { background: var(--chip-src-bg); color: var(--chip-src-text); }
.register-st-stale { background: var(--amber-bg); color: var(--amber); }
.register-st-accepted { background: var(--green-bg); color: var(--green); }
.register-st-rejected { background: var(--bg-surface-alt); color: var(--text-secondary); }
.register-st-parked { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--chip-src-text); }
.register-note { font-size: 12.5px; font-weight: 500; color: var(--red); }
.register-side { border-left: 1px solid var(--border-light); padding: 20px; display: flex;
  flex-direction: column; gap: 20px; }
.register-seriesbox { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px;
  display: flex; flex-direction: column; gap: 10px; }
.register-keys { display: flex; flex-direction: column; gap: 2px; }
.register-keys .register-eyebrow { margin-bottom: 6px; }
.register-keys .register-hint { margin: 10px 0 0; }
.register-sc { display: flex; align-items: center; justify-content: space-between; padding: 5px 0;
  font-size: 13px; color: var(--text-primary); }
.register-undo { position: fixed; left: 50%; bottom: 72px; transform: translateX(-50%); z-index: 300;
  display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 14px; border-radius: var(--radius-md);
  background: var(--qp-purple-950); color: var(--text-on-dark); font-size: 13px; box-shadow: var(--shadow-toast);
  border: 1px solid var(--border); }
.register-undo[hidden] { display: none; }
.register-undo-btn { height: 28px; padding: 0 12px; border-radius: var(--radius-control); cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--text-on-dark) 50%, transparent); background: transparent;
  color: var(--text-on-dark); font: 500 13px var(--font-secondary); }
.register-undo-btn:hover { background: color-mix(in srgb, var(--text-on-dark) 14%, transparent); }
.register-undo-btn { display: inline-flex; align-items: center; gap: 6px; }
/* The toast is --qp-purple-950 in both themes; the ring colour is 5.76:1 on it in dark but the light
   --accent is not, so a --text-on-dark inner ring sits under the outline. */
.register-undo-btn:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--text-on-dark); }
.register-rowundo { height: 26px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--radius-control);
  background: transparent; color: var(--accent-blue); font: 500 12.5px var(--font-secondary); cursor: pointer; }
.register-rowundo:hover { background: var(--bg-hover); }
/* Topic rename (owner 2026-10-29): inline title field, then the glossary / re-extract offer. */
.register-row-wrap { flex-wrap: wrap; }
.register-titleline { display: flex; align-items: flex-start; gap: 4px; min-width: 0; }
.register-titleline > .register-rename { flex: 1; }
.register-pencil { width: 24px; height: 24px; flex: none; }
.register-pencil:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 1px; }
.register-renamed { flex: none; align-self: center; margin-left: 4px; font-size: 12.5px; font-weight: 500;
  color: var(--accent-blue); }
.register-rename-msg { flex-basis: 100%; }
.register-rename-offer:focus:not(:focus-visible) { outline: none; }
.register-rename, .register-rename-gl, .register-rename-rx { display: flex; flex-wrap: wrap;
  align-items: center; gap: 8px; }
.register-rename .register-inp { flex: 1; min-width: 160px; }
.register-rename-offer { flex-basis: 100%; display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px; border: 1px solid var(--border-light); border-radius: var(--radius-md);
  background: var(--bg-surface); }
.register-rename-gl .register-inp { flex: 1; min-width: 120px; }
.register-topic > .register-rename-offer { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .register { padding: 16px; }
  .register-two, .register-imp { grid-template-columns: minmax(0,1fr); }
  .register-panes { grid-template-columns: minmax(0,1fr); }
  .register-impstats { grid-template-columns: repeat(2, 1fr); border-left: 0; }
  .register-rv { grid-template-columns: minmax(0,1fr); }
  .register-queue, .register-side { border: 0; border-bottom: 1px solid var(--border-light); }
  .register-topic { grid-template-columns: minmax(0,1fr); }
  .register-tn, .register-thead { grid-template-columns: minmax(0,1fr) auto; }
  .register-tn > :nth-child(2), .register-thead > :nth-child(2),
  .register-tn > :nth-child(3), .register-thead > :nth-child(3) { display: none; }
  .register-tact, .register-trow { grid-column: auto; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .register-card, .register-switch, .register-switch::after, .register-toast, .register-prog-fill,
  .register-tree summary::before { transition: none; }
}

/* ════════════════════════════════════════════════════
   QURIE co-scientist (/qurie) — port of docs/qurie-prototype. Tokens only, no colour literals
   (test_research_qurie_ui.py checks this block). The run band stays indigo in both themes.
   ════════════════════════════════════════════════════ */
.research-head-sub { color: var(--text-muted); font-size: 12px; }
.research-head-link {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: var(--radius-control); padding: 5px 10px;
  text-decoration: none; transition: border-color var(--dur-fast), color var(--dur-fast);
}
.research-head-link:hover { color: var(--text-primary); border-color: var(--text-muted); }
.research-head-link svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; }
.research-demo-flag {
  display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; color: var(--amber);
  background: var(--amber-bg); padding: 2px 9px; border-radius: var(--radius-pill);
}
.research-scroll { flex: 1; min-height: 0; overflow-y: auto; background: var(--bg-app); color: var(--text-primary); }
.research-wrap { max-width: 1180px; margin: 0 auto; padding: 32px 28px; }
.research-wrap--top { padding-bottom: 0; }
.research-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-muted);
}
.research-h2, .research-band-title, .research-q-title, .research-paper-body h1, .research-fw-gh h3 {
  font-family: var(--font-primary); font-weight: 300; letter-spacing: var(--tracking-tight);
  color: var(--text-strong); margin: 4px 0 0; text-wrap: balance;
}
.research-h2 { font-size: 24px; }
.research-lede { color: var(--text-secondary); font-size: 14px; max-width: 64ch; margin: 6px 0 20px; }
.research-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.research-scroll :focus-visible, .research-tabbar :focus-visible {
  outline: 2px solid var(--focus-ring-color); outline-offset: 2px;
}

/* pills: brief tags, sensitivity labels; states: ADR-0021 run queue */
.research-pill {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600;
  padding: 2px 9px; border-radius: var(--radius-pill); line-height: 1.6; white-space: nowrap;
}
.research-pill--given, .research-pill--public { background: var(--green-bg); color: var(--green); }
.research-pill--inferred { background: var(--amber-bg); color: var(--amber); }
.research-pill--missing { background: var(--bg-surface-alt); color: var(--text-muted); border: 1px solid var(--border); }
.research-pill--restricted { background: var(--bg-surface-alt); color: var(--text-brand); border: 1px solid var(--border); }
.research-pill--internal { background: var(--chip-src-bg); color: var(--chip-src-text); }
.research-state {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 1px 7px; border-radius: var(--radius-pill); display: inline-block;
  background: var(--bg-surface-alt); color: var(--text-muted);
}
.research-state--running { background: color-mix(in srgb, var(--accent-blue) 16%, transparent); color: var(--accent-blue); }
.research-state--done { background: var(--green-bg); color: var(--green); }
.research-state--failed, .research-state--refused { background: var(--red-bg); color: var(--red); }

/* buttons */
.research-btn {
  font-size: 14px; font-weight: 500; border-radius: var(--radius-control); padding: 9px 18px;
  border: 1px solid transparent; display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; text-decoration: none; font-family: inherit;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.research-btn--primary { background: var(--accent); color: var(--text-on-dark); }
.research-btn--primary:hover { background: var(--accent-hover); }
.research-btn--blue { background: var(--accent-blue); color: var(--text-on-dark); }
.research-btn--blue:hover { background: var(--accent-blue-hover); }
.research-btn--ghost { background: transparent; color: var(--text-primary); border-color: var(--border); }
.research-btn--ghost:hover { border-color: var(--text-muted); }
.research-btn--sm { padding: 5px 12px; font-size: 12px; }
.research-btn:disabled { background: var(--bg-surface-alt); color: var(--text-muted); border-color: var(--border); cursor: not-allowed; }
.research-link-btn { background: none; border: none; font: inherit; font-size: 13px; color: var(--text-secondary); cursor: pointer; padding: 4px 0; }
.research-link-btn:hover { color: var(--text-primary); }

/* overview */
.research-ov-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.research-band { background: var(--qp-purple-700); color: var(--text-on-dark); margin-top: 18px; }
.research-band-inner {
  max-width: 1180px; margin: 0 auto; padding: 30px 28px;
  display: grid; grid-template-columns: 1fr 420px; gap: 30px; align-items: stretch;
}
.research-band-main { display: flex; flex-direction: column; gap: 16px; }
.research-band .research-eyebrow { color: color-mix(in srgb, var(--text-on-dark) 68%, transparent); }
.research-band-title { font-size: 26px; color: var(--text-on-dark); max-width: 22ch; margin-bottom: 2px; }
.research-run-brief {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 6px; font-size: 13px;
  color: color-mix(in srgb, var(--text-on-dark) 68%, transparent);
}
.research-run-brief b { color: var(--text-on-dark); font-weight: 500; }
.research-band-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.research-stage {
  position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 300px;
  border: 1px solid color-mix(in srgb, var(--text-on-dark) 20%, transparent);
  background: var(--qp-purple-900); color: var(--text-on-dark);
}
.research-stage--sm { min-height: 220px; }
.research-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.research-stage-cap { position: absolute; left: 16px; right: 16px; bottom: 14px; }
.research-stage-big { font-family: var(--font-primary); font-weight: 300; font-size: 21px; }
.research-stage--sm .research-stage-big { font-size: 17px; }
.research-stage-sm { font-size: 12px; margin-top: 2px; color: color-mix(in srgb, var(--text-on-dark) 68%, transparent); }
.research-pulse {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-blue);
  margin-right: 8px; animation: research-pulse 1.6s infinite;
}
@keyframes research-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-blue) 50%, transparent); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* step tracker (dark inside the band, light on the Ongoing tab) */
.research-tracker {
  border: 1px solid color-mix(in srgb, var(--text-on-dark) 20%, transparent); border-radius: var(--radius-lg);
  background: var(--qp-purple-900); display: flex; flex-direction: column; overflow: hidden;
  --trk-ink: var(--text-on-dark); --trk-muted: color-mix(in srgb, var(--text-on-dark) 68%, transparent);
  --trk-line: color-mix(in srgb, var(--text-on-dark) 20%, transparent); --trk-bg: var(--qp-purple-900);
}
.research-tracker--light {
  border-color: var(--border-light); background: var(--bg-card);
  --trk-ink: var(--text-strong); --trk-muted: var(--text-secondary); --trk-line: var(--border-light); --trk-bg: var(--bg-card);
}
.research-tracker-h { padding: 13px 16px; border-bottom: 1px solid var(--trk-line); display: flex; align-items: center; gap: 10px; }
.research-tracker-ttl { flex: 1; font-size: 13px; font-weight: 600; color: var(--trk-ink); }
.research-tracker-meta { font-size: 11px; color: var(--trk-muted); font-variant-numeric: tabular-nums; }
.research-steps { list-style: none; margin: 0; padding: 6px 0; }
.research-step { display: flex; gap: 12px; padding: 9px 16px; position: relative; }
.research-step::before {
  content: ""; position: absolute; left: 23px; top: 0; bottom: 0; width: 1px; background: var(--trk-line);
}
.research-step:first-child::before { top: 18px; }
.research-step:last-child::before { bottom: auto; height: 18px; }
.research-step-mk {
  width: 16px; height: 16px; border-radius: 50%; flex: none; margin-top: 2px; position: relative;
  border: 2px solid var(--trk-line, var(--border)); background: var(--trk-bg, var(--bg-card));
}
.research-step--done .research-step-mk, .research-logstep--done .research-step-mk { background: var(--accent-blue); border-color: var(--accent-blue); }
.research-step--running .research-step-mk, .research-logstep--running .research-step-mk { border-color: var(--accent-blue); animation: research-pulse 1.6s infinite; }
.research-step--failed .research-step-mk, .research-step--refused .research-step-mk { background: var(--red); border-color: var(--red); }
.research-step-body { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.research-step-nm { font-size: 13px; font-weight: 500; color: var(--trk-ink); }
.research-step--queued .research-step-nm { color: var(--trk-muted); font-weight: 400; }
.research-step-act { font-size: 12px; color: var(--trk-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.research-step-rt { font-size: 11px; color: var(--trk-muted, var(--text-muted)); font-variant-numeric: tabular-nums; flex: none; }
.research-tracker:not(.research-tracker--light) .research-state--queued { background: transparent; color: var(--trk-muted); border: 1px solid var(--trk-line); }
.research-tracker:not(.research-tracker--light) .research-state--running { color: var(--text-on-dark); background: color-mix(in srgb, var(--accent-blue) 30%, transparent); }
.research-tracker:not(.research-tracker--light) .research-state--done { color: var(--text-on-dark); background: color-mix(in srgb, var(--text-on-dark) 14%, transparent); }

/* project cards */
.research-proj-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 14px; }
.research-proj-card {
  display: block; border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 16px;
  background: var(--bg-card); color: var(--text-primary); text-decoration: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
a.research-proj-card:hover { border-color: var(--border); box-shadow: var(--shadow-card-hover); }
.research-proj-card--static { opacity: 0.85; }
.research-proj-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.research-proj-top .research-eyebrow { margin-left: auto; }
.research-proj-title { font-family: var(--font-primary); font-size: 16px; font-weight: 400; color: var(--text-strong); margin: 10px 0 6px; line-height: 1.25; }
.research-proj-meta { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.research-minibar { height: 4px; border-radius: 2px; background: var(--border-light); overflow: hidden; margin-top: 12px; }
.research-minibar i { display: block; height: 100%; background: var(--accent-blue); }

/* project tabs */
.research-tabbar {
  display: flex; gap: 2px; align-items: center; border-bottom: 1px solid var(--border-light);
  padding: 0 16px 0 28px; background: var(--bg-app); overflow-x: auto; flex-shrink: 0;
}
.research-tabbar a {
  font-size: 14px; color: var(--text-secondary); padding: 13px 16px; position: relative;
  white-space: nowrap; text-decoration: none;
}
.research-tabbar a:hover { color: var(--text-primary); }
.research-tabbar a.is-active { color: var(--text-brand); font-weight: 500; }
.research-tabbar a.is-active::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--accent-blue);
}
.research-tabbar .research-tabbar-back { margin-left: auto; font-size: 13px; color: var(--text-muted); }

/* brief tab */
.research-rec-h {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-bottom: 18px;
  border-bottom: 1px solid var(--border-light); margin-bottom: 24px;
}
.research-rec-date { font-size: 13px; color: var(--text-secondary); }
.research-digest { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); background: var(--bg-surface-alt); padding: 2px 8px; border-radius: var(--radius-sm); }
.research-brief-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 40px; }
.research-bf-top { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.research-bf-nm, .research-sfield-nm {
  font-size: 11px; font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted);
}
.research-bf-val { font-size: 15px; line-height: 1.5; }
.research-bf-val--empty { color: var(--text-muted); font-style: italic; }
.research-rounds-wrap { margin-top: 26px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.research-rounds { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.research-round { font-size: 12px; color: var(--text-secondary); background: var(--bg-surface-alt); border: 1px solid var(--border-light); border-radius: var(--radius-pill); padding: 3px 11px; }

/* ongoing tab */
.research-ong { display: grid; grid-template-columns: 380px 1fr; gap: 24px; align-items: start; }
.research-col { display: flex; flex-direction: column; gap: 16px; }
.research-log { border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--bg-card); overflow: hidden; }
.research-log-h { padding: 12px 16px; border-bottom: 1px solid var(--border-light); }
.research-log-ttl { font-size: 13px; font-weight: 600; color: var(--text-strong); }
.research-logstep { border-bottom: 1px solid var(--border-light); --trk-line: var(--border); --trk-bg: var(--bg-card); }
.research-logstep:last-child { border-bottom: none; }
.research-logstep summary { list-style: none; cursor: pointer; padding: 11px 16px; display: flex; align-items: center; gap: 12px; }
.research-logstep summary::-webkit-details-marker { display: none; }
.research-logstep .research-step-mk { width: 14px; height: 14px; margin-top: 0; }
.research-logstep--queued .research-step-mk { opacity: 0.5; }
.research-logstep-nm { flex: 1; font-size: 14px; color: var(--text-strong); }
.research-logstep--queued .research-logstep-nm { color: var(--text-muted); }
.research-chev { width: 14px; height: 14px; stroke: var(--text-muted); fill: none; stroke-width: 2; stroke-linecap: round; transition: transform var(--dur-fast); flex: none; }
details[open] > summary .research-chev { transform: rotate(90deg); }
.research-logstep-detail { padding: 2px 16px 14px 42px; font-size: 13px; color: var(--text-secondary); }
.research-artefacts { margin-top: 8px; }
.research-artefact {
  display: inline-flex; font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary);
  background: var(--bg-surface-alt); border: 1px solid var(--border-light); border-radius: var(--radius-sm);
  padding: 3px 8px; margin: 3px 6px 3px 0;
}
.research-slurm {
  font-family: var(--font-mono); font-size: 12px; line-height: 1.8; margin-top: 8px; padding: 12px 14px;
  border-radius: var(--radius-md); background: var(--qp-purple-950); color: var(--qp-purple-100); overflow-x: auto;
}
.research-slurm-k { color: var(--qp-purple-300); margin-left: 4px; }

/* finished work */
.research-fw-intro { display: flex; align-items: center; gap: 12px; }
.research-fw-group { margin-bottom: 34px; scroll-margin-top: 16px; }
.research-fw-gh { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.research-fw-gh h3 { font-size: 20px; }
.research-fw-cnt { font-size: 12px; color: var(--text-muted); }
.research-panel { border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--bg-card); overflow: hidden; }
.research-panel-h { padding: 13px 16px 11px; border-bottom: 1px solid var(--border-light); }
.research-panel-title { font-family: var(--font-primary); font-size: 16px; color: var(--text-strong); margin-top: 5px; line-height: 1.3; }
.research-panel-meta { font-size: 12px; color: var(--text-muted); margin-top: 5px; display: flex; flex-wrap: wrap; gap: 3px 12px; align-items: center; }
.research-panel-body { position: relative; background: var(--bg-surface-alt); }
.research-panel-body--center { display: flex; justify-content: center; }
.research-panel-body--card { background: var(--bg-card); padding: 14px 12px; }
.research-viewer { width: 100%; height: 300px; position: relative; }
.research-viewer--umap { height: 440px; width: 460px; max-width: 100%; }
.research-viewer-msg { padding: 20px; color: var(--text-secondary); font-size: 13px; margin: 0; }
.research-vtools { position: absolute; top: 10px; right: 10px; display: flex; gap: 4px; z-index: 6; }
.research-vtools button {
  font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: var(--radius-control); cursor: pointer;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text-primary);
}
.research-vtools button[aria-pressed="true"] { background: var(--accent); color: var(--text-on-dark); border-color: var(--accent); }
.research-select {
  font: inherit; font-size: 12px; border: 1px solid var(--border); border-radius: var(--radius-control);
  padding: 3px 8px; background: var(--bg-card); color: var(--text-primary); margin-left: 4px;
}
.research-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 10px 16px; border-top: 1px solid var(--border-light); }
.research-legend:empty { display: none; }
.research-li { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-secondary); }
.research-li--bar { flex: 1; min-width: 160px; }
.research-li--toggle { background: none; border: none; font: inherit; font-size: 11px; cursor: pointer; padding: 2px 0; }
.research-li--toggle[aria-pressed="false"] { opacity: 0.4; }
.research-sw { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.research-sw--dot { border-radius: 50%; background: var(--sw); }
.research-sw--open { background: var(--bg-card); border: 1.5px solid var(--sw); }
.research-cbar { height: 8px; border-radius: 2px; flex: 1; min-width: 80px; }
.research-cbar--plddt { background: linear-gradient(90deg, var(--red), var(--amber), var(--green), var(--accent-blue)); }
.research-cbar--expr { background: linear-gradient(90deg, var(--bg-hover), var(--accent-blue)); }
.research-panel-foot { padding: 9px 16px; border-top: 1px solid var(--border-light); font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.research-tip {
  position: fixed; pointer-events: none; background: var(--qp-purple-950); color: var(--text-on-dark);
  font-family: var(--font-mono); font-size: 11px; padding: 4px 8px; border-radius: var(--radius-sm);
  opacity: 0; transition: opacity 0.1s; z-index: 70; white-space: nowrap;
}
.research-tip.is-on { opacity: 1; }
.research-myo { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.research-myo-ylab { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10px; color: var(--text-secondary); text-align: center; padding: 14px 0; }
.research-myo-cell { flex: 1 1 220px; min-width: 200px; }
.research-myo svg { display: block; font-family: var(--font-secondary); }

/* result tab (lab-book entry) */
.research-paper { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 34px; align-items: start; }
.research-paper-body h1 { font-size: 30px; line-height: 1.12; margin: 10px 0 8px; }
.research-authors { font-size: 13px; color: var(--text-secondary); margin-bottom: 4px; }
.research-runline {
  font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; font-family: var(--font-mono);
  padding-bottom: 18px; border-bottom: 1px solid var(--border-light); margin-bottom: 18px;
}
.research-export-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 8px; }
.research-paper-h {
  font-family: var(--font-secondary); font-size: 14px; font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--text-muted); margin: 26px 0 10px;
}
.research-paper-body p { font-size: 15.5px; line-height: 1.7; margin: 0 0 14px; max-width: 68ch; }
.research-paper-body .research-refs { font-size: 13px; color: var(--text-secondary); }
.research-fig { border: 1px solid var(--border-light); border-radius: var(--radius-md); overflow: hidden; margin: 16px 0; background: var(--bg-card); }
.research-fig-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; background: var(--bg-surface-alt); }
.research-fig-h .research-btn { margin-left: auto; }
.research-fig-ttl { font-family: var(--font-primary); font-weight: 300; font-size: 16px; color: var(--text-strong); }
.research-fig-cap { font-size: 12px; color: var(--text-secondary); padding: 9px 14px; border-top: 1px solid var(--border-light); line-height: 1.5; }
.research-fig-cap b { color: var(--text-strong); font-weight: 600; }
.research-codecell { border: 1px solid var(--border-light); border-radius: var(--radius-md); margin: 14px 0; overflow: hidden; background: var(--bg-surface-alt); }
.research-codecell summary {
  list-style: none; cursor: pointer; padding: 8px 14px; display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary);
}
.research-codecell summary::-webkit-details-marker { display: none; }
.research-codecell summary .research-chev { margin-left: auto; }
.research-codecell-in { color: var(--accent-blue); font-weight: 600; }
.research-codecell pre {
  margin: 0; padding: 12px 16px; border-top: 1px solid var(--border-light); overflow-x: auto;
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6;
  background: var(--qp-purple-950); color: var(--qp-purple-100);
}
.research-codecell pre.research-codecell-out { background: var(--bg-card); color: var(--text-secondary); font-size: 12px; }
.research-margin { position: sticky; top: 16px; font-size: 12px; color: var(--text-secondary); }
.research-mblock { padding: 11px 0; border-bottom: 1px solid var(--border-light); }
.research-mblock:first-child { padding-top: 0; }
.research-ml { font-size: 10px; font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.research-mv { line-height: 1.5; }
.research-foot-note { font-size: 12px; color: var(--text-muted); text-align: center; padding: 26px 0 8px; border-top: 1px solid var(--border-light); margin-top: 30px; }

/* brief intake */
.research-intake-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
.research-q-stage { min-height: 360px; }
.research-q-card { animation: research-q-in var(--dur-slow) var(--ease-out); }
@keyframes research-q-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.research-q-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; }
.research-q-count { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); text-transform: uppercase; }
.research-q-bar { height: 3px; flex: 1; background: var(--border-light); border-radius: 2px; overflow: hidden; }
.research-q-bar i { display: block; height: 100%; background: var(--accent-blue); transition: width var(--dur-slow) var(--ease-out); }
.research-q-title { font-size: 32px; line-height: 1.1; margin: 12px 0 10px; max-width: 18ch; }
.research-q-hint { color: var(--text-secondary); font-size: 15px; max-width: 52ch; margin: 0 0 22px; }
.research-q-field {
  width: 100%; font: inherit; font-size: 16px; line-height: 1.5; color: var(--text-primary); background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 15px; resize: vertical; min-height: 92px;
}
.research-q-field:focus { border-color: var(--accent-blue); outline: none; box-shadow: var(--focus-ring); }
.research-sugg { margin-top: 14px; border: 1px dashed var(--border); border-radius: var(--radius-md); padding: 12px 14px; background: var(--bg-surface-alt); }
.research-sugg-lab { margin-bottom: 6px; }
.research-sugg-txt { font-size: 14px; line-height: 1.5; }
.research-sugg-acts { display: flex; gap: 8px; margin-top: 10px; }
.research-mini {
  font: inherit; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-control); cursor: pointer;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text-primary);
}
.research-mini:hover { border-color: var(--text-muted); }
.research-q-nav { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.research-q-skip { margin-left: auto; }
.research-sheet { border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--bg-card); position: sticky; top: 0; overflow: hidden; }
.research-sheet-h { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--border-light); }
.research-sheet-h .research-eyebrow { flex: 1; }
.research-sheet-btn {
  font: inherit; font-size: 11px; padding: 3px 8px; border-radius: var(--radius-control); cursor: pointer;
  border: 1px solid var(--border); background: none; color: var(--text-secondary);
}
.research-sheet-btn:hover { color: var(--text-primary); border-color: var(--text-muted); }
.research-sheet-list { list-style: none; margin: 0; padding: 0; max-height: 62vh; overflow-y: auto; }
.research-sfield {
  display: block; width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: none;
  border-bottom: 1px solid var(--border-light); padding: 11px 16px; cursor: pointer; transition: background var(--dur-fast);
}
.research-sheet-list li:last-child .research-sfield { border-bottom: none; }
.research-sfield:hover { background: var(--bg-surface-alt); }
.research-sfield.is-current { background: var(--bg-hover); }
.research-sfield-top { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.research-sfield-nm { flex: 1; }
.research-sfield-req { font-size: 9px; color: var(--text-muted); text-transform: uppercase; }
.research-sfield-val {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 13px; line-height: 1.45;
}
.research-sfield-val.is-empty { color: var(--text-muted); font-style: italic; }
.research-confirm { max-width: 760px; margin: 0 auto; }
.research-confirm h2:focus { outline: none; }
.research-confirm dl { display: grid; grid-template-columns: 170px 1fr; gap: 6px 24px; margin: 26px 0; }
.research-confirm dt { font-size: 11px; font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); padding-top: 4px; }
.research-confirm dd { margin: 0; font-family: var(--font-primary); font-weight: 300; font-size: 17px; line-height: 1.45; color: var(--text-strong); }
.research-gate { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--green-bg); color: var(--green); font-size: 13px; margin: 22px 0; }
.research-gate--blocked { background: var(--amber-bg); color: var(--amber); }
.research-confirm-acts { display: flex; gap: 12px; margin: 8px 0 12px; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  .research-pulse, .research-step--running .research-step-mk, .research-logstep--running .research-step-mk,
  .research-q-card { animation: none; }
}
@media (max-width: 860px) {
  .research-wrap, .research-band-inner { padding-left: 16px; padding-right: 16px; }
  .research-band-inner, .research-ong, .research-paper, .research-intake-grid, .research-brief-grid { grid-template-columns: 1fr; }
  .research-sheet { position: static; order: -1; }
  .research-margin { position: static; order: -1; display: flex; flex-wrap: wrap; gap: 16px; }
  .research-mblock { border: none; padding: 0; flex: 1 1 150px; }
  .research-q-title { font-size: 26px; }
  .research-tabbar { padding-left: 8px; }
  .research-head-link span, .research-head-sub { display: none; }
}

/* SharePoint version families on the connected-folders table. */
.sp-versions-list { font-size: 13px; }
.sp-versions-list ul { margin: 6px 0; padding-left: 18px; }
.sp-versions-list li { margin: 4px 0; }
.sp-versions-list .sp-versions-note { font-size: 12px; color: var(--text-muted); }

#model-load-banner {
  position: fixed;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 32px);
  margin: 0;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-size: 13px;
  box-shadow: var(--shadow-md, 0 2px 8px rgba(0, 0, 0, .2));
  z-index: 500;
}
#model-load-banner[hidden] { display: none; }
@media (max-width: 768px) { #model-load-banner { top: 56px; } }