/* ==========================================================================
   DocuMind — Premium Design System

   1. Tokens (light / dark)
   2. Base
   3. Buttons and controls
   4. Auth pages
   5. App shell and sidebar
   6. Chat: header, empty state, messages, sources, composer
   7. Modals
   8. Command Palette
   9. Responsive
   10. Motion preferences
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* --- Typography --- */
  --font-ui: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* --- Shape --- */
  --radius-sm: 6px;
  --radius-md: 9px;
  --radius-lg: 13px;
  --radius-xl: 18px;
  --radius-pill: 999px;

  /* --- Motion --- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);

  /* --- Layout --- */
  --col: 720px;
  --sidebar-w: 272px;

  color-scheme: light;

  /* --- Light Surface Palette --- */
  --bg: #f1f4f9;
  --surface: #ffffff;
  --sidebar: #eaecf3;
  --sunken: #e2e6f0;
  --line: #d8dce9;
  --line-strong: #bec6d9;

  /* --- Light Text --- */
  /* --text-3 is muted, but it still carries real content (page numbers,
     counts, timestamps), so it is held to 4.5:1 against BOTH --surface and
     --sunken rather than only against white. */
  --text: #0f1829;
  --text-2: #3f4d66;
  --text-3: #62718d;

  /* --- Brand: Electric Iris --- */
  --brand: #4f46e5;
  --brand-solid: #4f46e5;
  --brand-hover: #4338ca;
  --brand-tint: #ede9fe;
  --brand-hover-text: #1e1b4b;
  --ring: rgba(79, 70, 229, 0.24);

  /* --- Accent: Warm Amber (Citations) --- */
  --accent-bg: #fef9ec;
  --accent-line: #d4a017;
  --accent-text: #7a4f06;

  /* --- Danger --- */
  --danger: #b3261e;
  --danger-solid: #b3261e;
  --danger-hover: #8f1e18;
  --danger-tint: #fdecea;

  /* --- Semantic --- */
  --ok: #059669;
  --warn: #d08a1c;

  /* --- Programme badge hues (light) ---
     One triple per hue; the .prog-badge--* rules only ever read these. */
  --badge-dsc-bg: #e0e7ff; --badge-dsc-fg: #3730a3; --badge-dsc-line: #c7d2fe;
  --badge-minor-bg: #fef3c7; --badge-minor-fg: #92400e; --badge-minor-line: #fde68a;
  --badge-dse-bg: #fae8ff; --badge-dse-fg: #86198f; --badge-dse-line: #f5d0fe;
  --badge-ge-bg: #dcfce7; --badge-ge-fg: #166534; --badge-ge-line: #bbf7d0;
  --badge-aec-bg: #cffafe; --badge-aec-fg: #155e75; --badge-aec-line: #a5f3fc;
  --badge-sec-bg: #ffedd5; --badge-sec-fg: #9a3412; --badge-sec-line: #fed7aa;
  --badge-vac-bg: #fce7f3; --badge-vac-fg: #9d174d; --badge-vac-line: #fbcfe8;

  /* --- Effects --- */
  --aside-bg: #0f1829;
  --shadow-pop: 0 20px 60px rgba(12, 20, 45, 0.18), 0 4px 12px rgba(12, 20, 45, 0.08);
  --shadow-card: 0 1px 3px rgba(12, 20, 45, 0.06), 0 4px 12px rgba(12, 20, 45, 0.04);
  --rim-light: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  /* --- Dark Obsidian Palette --- */
  --bg: #090d16;
  --surface: #111827;
  --sidebar: #080c15;
  --sunken: #161f30;
  --line: #1e2a3e;
  --line-strong: #2d3d57;

  /* --- Dark Text --- */
  --text: #e4eaf5;
  --text-2: #a0aec0;
  --text-3: #7a899f;

  /* --- Brand: Bright Iris in dark --- */
  --brand: #818cf8;
  --brand-solid: #4f46e5;
  --brand-hover: #6366f1;
  --brand-tint: #1e1b4b;
  --brand-hover-text: #e0e7ff;
  --ring: rgba(129, 140, 248, 0.28);

  /* --- Accent: Amber --- */
  --accent-bg: #231b06;
  --accent-line: #a07020;
  --accent-text: #fbbf24;

  /* --- Danger --- */
  --danger: #fc8181;
  --danger-solid: #c53030;
  --danger-hover: #e05252;
  --danger-tint: #2d1a1a;

  /* --- Semantic --- */
  --ok: #34d399;
  --warn: #f59e0b;

  /* --- Effects --- */
  --aside-bg: #060910;
  --shadow-pop: 0 20px 60px rgba(0, 0, 0, 0.65), 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
  --rim-light: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Same dark tokens for people whose OS is dark and who haven't chosen a theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --bg: #090d16;
    --surface: #111827;
    --sidebar: #080c15;
    --sunken: #161f30;
    --line: #1e2a3e;
    --line-strong: #2d3d57;

    --text: #e4eaf5;
    --text-2: #a0aec0;
    --text-3: #7a899f;

    --brand: #818cf8;
    --brand-solid: #4f46e5;
    --brand-hover: #6366f1;
    --brand-tint: #1e1b4b;
    --brand-hover-text: #e0e7ff;
    --ring: rgba(129, 140, 248, 0.28);

    --accent-bg: #231b06;
    --accent-line: #a07020;
    --accent-text: #fbbf24;

    --danger: #fc8181;
    --danger-solid: #c53030;
    --danger-hover: #e05252;
    --danger-tint: #2d1a1a;

    --ok: #34d399;
    --warn: #f59e0b;

    --aside-bg: #060910;
    --shadow-pop: 0 20px 60px rgba(0, 0, 0, 0.65), 0 4px 12px rgba(0, 0, 0, 0.45);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
    --rim-light: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

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

[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-ui);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

button { font-family: inherit; }
input, textarea { font-family: inherit; color: inherit; }

a { color: var(--brand); text-decoration: none; font-weight: 500; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Keyboard focus must be unmistakable: a solid ring plus a soft halo, so it
   survives on both the light surface and the dark sidebar. */
/* Keyboard-only shortcut past the sidebar to the composer. Hidden until it
   receives focus, so it never affects the visual layout. */
.skip-link {
  position: absolute;
  left: 12px;
  top: -48px;
  z-index: 1000;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  background: var(--brand-solid, #6366f1);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: top 140ms ease;
}
.skip-link:focus {
  top: 12px;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--ring);
}
/* Elements that draw their own focus treatment (inputs with their own border
   ring, row-style items) keep it and skip the halo. */
.field input:focus-visible,
.composer__input:focus-visible,
.cmd-palette__input:focus-visible {
  outline: none;
  box-shadow: none;
}
.pop-menu__item:focus-visible,
.cmd-palette__item:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

code {
  font-family: var(--font-mono);
  background: var(--sunken);
  padding: 0.1em 0.4em;
  border-radius: 4px;
  font-size: 0.88em;
}

kbd {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 500;
  padding: 1px 6px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--surface);
  color: var(--text-2);
}

/* --------------------------------------------------------------------------
   3. Buttons and controls
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  font-size: 0.91rem;
  font-weight: 600;
  letter-spacing: -0.006em;
  cursor: pointer;
  transition: background-color 150ms var(--ease), border-color 150ms ease,
              color 150ms ease, transform 180ms var(--spring), box-shadow 150ms ease;
}
.btn:active:not(:disabled) { transform: scale(0.96); }
.btn:disabled { cursor: not-allowed; opacity: 0.55; }

.btn-primary {
  background: var(--brand-solid);
  color: #fff;
  box-shadow: var(--rim-light), 0 1px 2px rgba(0, 0, 0, 0.2);
}
.btn-primary:hover:not(:disabled) { background: var(--brand-hover); }

.btn-ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--text);
}
.btn-ghost:hover { background: var(--sunken); }

.btn-danger { background: var(--danger-solid); color: #fff; }
.btn-danger:hover { background: var(--danger-hover); }

.btn-block { width: 100%; }

.btn .btn__spinner {
  display: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
}
.btn.is-loading .btn__label { opacity: 0.75; }
.btn.is-loading .btn__spinner { display: inline-block; animation: spin 700ms linear infinite; }

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

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: background-color 130ms ease, color 130ms ease, transform 180ms var(--spring);
}
.icon-btn:hover { background: var(--sunken); color: var(--text); }
.icon-btn:active { transform: scale(0.9); }
.icon-btn--tiny { width: 28px; height: 28px; }

.theme-toggle svg { display: block; }
.icon-menu { display: none; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }

/* --------------------------------------------------------------------------
   4. Auth pages
   -------------------------------------------------------------------------- */

.auth-page {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
}

.auth-layout {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.auth-aside { display: none; }

.auth-main {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 24px;
}
.auth-main .theme-toggle { position: absolute; top: 16px; right: 16px; }

.auth-shell { width: 100%; max-width: 360px; }

.auth-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--brand);
  margin-bottom: 36px;
}
.auth-mark__glyph { display: flex; }
.auth-mark__name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text);
}

.auth-card h1 {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
  color: var(--text);
}
.auth-sub {
  margin: 0 0 28px;
  color: var(--text-2);
  font-size: 0.97rem;
  line-height: 1.55;
}

.auth-form { display: flex; flex-direction: column; gap: 18px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.field__hint { font-size: 0.8rem; color: var(--text-3); line-height: 1.4; }
.field__hint--error { color: var(--danger); }

.field input {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  font-size: 0.97rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  outline: 2px solid transparent;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.field input:hover { border-color: var(--text-3); }
.field input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--ring);
}
.field input[aria-invalid="true"] { border-color: var(--danger); }
.field input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.2); }

.field__input-group { position: relative; display: flex; }
.field__input-group input { flex: 1; padding-right: 60px; }
.field__toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--brand);
  cursor: pointer;
  padding: 6px 8px;
}
.field__toggle:hover { background: var(--brand-tint); }

/* Live password checklist (register) */
.pw-rules { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 2px; }
.pw-rule {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-3);
  transition: color 140ms ease;
}
.pw-rule::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  transition: background-color 140ms ease, border-color 140ms ease;
}
.pw-rule.is-met { color: var(--text-2); }
.pw-rule.is-met::before { background: var(--ok); border-color: var(--ok); }

.auth-switch { margin: 24px 0 0; font-size: 0.92rem; color: var(--text-2); }

.alert {
  padding: 11px 14px;
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  line-height: 1.45;
  margin-bottom: 20px;
  border: 1px solid transparent;
}
.alert-error {
  background: var(--danger-tint);
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
  border-left: 3px solid var(--danger);
}

/* Brand panel shown beside the form on wide screens */
.auth-aside__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #cfd9ff;
}
.auth-aside__brand span {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: #fff;
}
.auth-aside__body { margin: auto 0; padding: 48px 0; max-width: 440px; }
.auth-aside h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 2.6vw, 2.7rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0 0 16px;
}
.auth-aside p {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.6;
  color: rgba(226, 233, 255, 0.78);
}

/* Illustration of an answer with its cited page. One entrance sequence on load. */
.auth-sample { margin-top: 44px; display: grid; gap: 12px; }
.auth-sample__q {
  justify-self: end;
  padding: 9px 14px;
  font-size: 0.88rem;
  color: #fff;
  background: #3557c4;
  border-radius: 14px 14px 4px 14px;
  animation: sample-in 500ms var(--ease) 200ms both;
}
.auth-sample__a {
  display: grid;
  gap: 10px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
}
.auth-sample__a .bar {
  display: block;
  height: 7px;
  width: var(--w);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.24);
  transform-origin: left;
  animation: bar-in 600ms var(--ease) calc(700ms + var(--i) * 180ms) both;
}
.auth-sample__src {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #f2cf86;
  background: rgba(212, 154, 46, 0.14);
  border: 1px solid rgba(212, 154, 46, 0.55);
  border-left-width: 3px;
  border-radius: 4px;
  animation: sample-in 400ms var(--ease) 1500ms both;
}
@keyframes bar-in { from { transform: scaleX(0); } }
@keyframes sample-in { from { opacity: 0; transform: translateY(6px); } }

/* --------------------------------------------------------------------------
   5. App shell and sidebar
   -------------------------------------------------------------------------- */

.app-page { height: 100vh; height: 100dvh; overflow: hidden; }

.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  height: 100vh;
  height: 100dvh;
  transition: grid-template-columns 240ms var(--ease);
}
.shell.sidebar-collapsed { grid-template-columns: 0px 1fr; }

.sidebar {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 14px 12px;
  overflow: hidden;
  background: var(--sidebar);
  border-right: 1px solid var(--line);
  transition: padding 240ms var(--ease), border-color 240ms ease, visibility 0s;
}
/* Fixed inner width so content doesn't reflow while the column animates */
.sidebar > * { flex-shrink: 0; width: calc(var(--sidebar-w) - 24px); }
.sidebar > .conversation-list { flex: 1 1 auto; min-height: 0; width: calc(var(--sidebar-w) - 12px); }

.shell.sidebar-collapsed .sidebar {
  padding-left: 0;
  padding-right: 0;
  border-right-color: transparent;
  visibility: hidden;
  transition: padding 240ms var(--ease), border-color 240ms ease, visibility 0s 240ms;
}

.sidebar__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 2px 16px 6px;
}

.brand { display: flex; align-items: center; gap: 9px; color: var(--brand); }
.brand__name {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--text);
}

.btn-new-chat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  margin-bottom: 20px;
  padding: 9px 12px;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  background: var(--brand-solid);
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--rim-light), 0 1px 2px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  transition: background-color 150ms ease, transform 180ms var(--spring), box-shadow 150ms ease;
}
.btn-new-chat:hover { background: var(--brand-hover); }
.btn-new-chat:active { transform: scale(0.96); }

.sidebar__section-label {
  padding: 0 10px;
  margin-bottom: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-3);
}

.conversation-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  margin: 0 -6px;
  padding: 0 6px;
}
.conversation-list__empty { padding: 8px 10px; font-size: 0.86rem; color: var(--text-3); }

.conversation-item {
  position: relative;
  display: flex;
  align-items: center;
  padding-right: 4px;
  border-radius: var(--radius-md);
  transition: background-color 130ms ease;
}
.conversation-item:hover { background: var(--sunken); }
.conversation-item.is-active {
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-card);
}
.conversation-item.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--brand), color-mix(in srgb, var(--brand) 70%, transparent));
}

.conversation-item__open {
  flex: 1;
  min-width: 0;
  padding: 9px 10px 9px 14px;
  text-align: left;
  font-size: 0.86rem;
  font-weight: 400;
  color: var(--text-2);
  background: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 130ms ease;
}
.conversation-item:hover .conversation-item__open { color: var(--text); }
.conversation-item.is-active .conversation-item__open { color: var(--text); font-weight: 600; }

.conversation-item__actions {
  display: flex;
  gap: 1px;
  flex: 0 0 auto;
  opacity: 0;
  transition: opacity 130ms ease;
}
.conversation-item:hover .conversation-item__actions,
.conversation-item:focus-within .conversation-item__actions { opacity: 1; }
.conversation-item__actions .icon-btn:hover { background: var(--line); }

.sidebar__user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 12px 6px 2px;
  border-top: 1px solid var(--line);
}
.sidebar__user-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-solid), color-mix(in srgb, var(--brand-solid) 70%, #7c3aed));
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--brand-tint);
}
.sidebar__user-name {
  flex: 1;
  min-width: 0;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   6. Chat
   -------------------------------------------------------------------------- */

.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100vh;
  height: 100dvh;
  background: var(--bg);
}

.main__header {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 var(--line);
}
.main__header-doc { min-width: 0; }
.main__header-spacer { flex: 1; }

.doc-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 5px 12px 5px 10px;
  font-size: 0.8rem;
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-2);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}
.doc-chip__dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-3);
  transition: background-color 300ms ease;
}
.doc-chip--ready .doc-chip__dot {
  background: var(--ok);
  box-shadow: 0 0 6px var(--ok);
}
.doc-chip--pending .doc-chip__dot { background: var(--warn); animation: pulse 1.6s ease-in-out infinite; }
.doc-chip__state { flex: 0 0 auto; font-weight: 600; color: var(--text); font-family: var(--font-ui); }
.doc-chip__file {
  min-width: 0;
  padding-left: 8px;
  border-left: 1px solid var(--line-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.chat { flex: 1; display: flex; flex-direction: column; min-height: 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
.chat__scroll { flex: 1; overflow-y: auto; padding: 32px 16px 8px; }

/* Empty state */
.empty-state {
  width: min(var(--col), 100%);
  margin: 9vh auto 0;
  text-align: left;
  color: var(--text-2);
  animation: fadeSlideUp 0.5s var(--ease) both;
}
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 3D canvas container for the WebGL sphere */
.empty-state__canvas-wrap {
  margin-bottom: 24px;
  width: 100px;
  height: 100px;
}
#knowledge-sphere-canvas {
  display: block;
  border-radius: 50%;
  cursor: grab;
}

.empty-state__glyph { display: flex; margin-bottom: 20px; color: var(--brand); }
.empty-state__glyph svg { width: 36px; height: 36px; }
.empty-state h2 {
  margin: 0 0 12px;
  font-family: var(--font-ui);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text);
}
.empty-state p { max-width: 56ch; margin: 0 0 32px; font-size: 1rem; line-height: 1.65; color: var(--text-2); }
.empty-state strong { color: var(--text); font-weight: 700; }

/* Suggestion chips — 3D tilt-ready, styled as structured cards */
.empty-state__prompts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.suggestion-chip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 16px;
  text-align: left;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: border-color 160ms ease, color 160ms ease,
              box-shadow 160ms ease, transform 220ms var(--spring);
  transform-style: preserve-3d;
  will-change: transform;
}
.suggestion-chip::after {
  content: "";
  flex: 0 0 auto;
  margin-left: 12px;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid var(--text-3);
  border-right: 1.5px solid var(--text-3);
  transform: rotate(45deg);
  transition: border-color 160ms ease, transform 220ms var(--spring);
}
.suggestion-chip:hover {
  color: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--ring), var(--shadow-card);
}
.suggestion-chip:hover::after {
  border-color: var(--brand);
  transform: rotate(45deg) translate(2px, -2px);
}
.suggestion-chip:active { transform: scale(0.98); }

.messages {
  width: min(var(--col), 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-bottom: 20px;
}

.msg { display: flex; flex-direction: column; gap: 10px; animation: msgIn 0.3s var(--ease) both; }
@keyframes msgIn { from { opacity: 0; transform: translateY(10px); } }
.msg-user { align-items: flex-end; }

.msg-assistant {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 10px;
  position: relative;
}

/* Streaming horizon shimmer: luminous border running across the top of assistant bubble */
@keyframes borderGlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.msg-assistant.is-streaming {
  position: relative;
}
.msg-assistant.is-streaming::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #6366f1, #38bdf8, #10b981, transparent);
  background-size: 200% 100%;
  animation: borderGlow 1.8s linear infinite;
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.7), 0 0 6px rgba(56, 189, 248, 0.5);
  z-index: 5;
}

/* AI avatar badge */
.msg-assistant::before {
  content: "";
  grid-column: 1;
  grid-row: 1;
  width: 30px;
  height: 30px;
  margin-top: 1px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--brand-tint), color-mix(in srgb, var(--brand-solid) 12%, var(--surface)))
              url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect x='9' y='6' width='22' height='28' rx='2' fill='none' stroke='%234f46e5' stroke-width='2.4'/%3E%3Cpath d='M15 15h10M15 21h10M15 27h6' stroke='%234f46e5' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 17px no-repeat;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
.msg-assistant > * { grid-column: 2; }

.msg__bubble { font-size: 0.96rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }

.msg-user .msg__bubble {
  max-width: 82%;
  padding: 11px 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-solid), color-mix(in srgb, var(--brand-solid) 85%, #7c3aed));
  border-radius: 18px 18px 5px 18px;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
}

.msg-assistant .msg__bubble {
  padding: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.68;
  color: var(--text);
}

/* Streaming cursor dot */
.msg-assistant.is-streaming .msg__bubble::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 4px;
  border-radius: 50%;
  background: var(--brand);
  animation: cursorBlink 1s ease-in-out infinite;
  box-shadow: 0 0 6px var(--brand);
}
@keyframes cursorBlink {
  0%, 100% { opacity: 1; } 50% { opacity: 0.3; }
}

.thinking { display: inline-flex; align-items: center; gap: 5px; padding: 10px 0; }
.thinking span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  opacity: 0.4;
  animation: thinkBounce 1.2s ease-in-out infinite;
}
.thinking span:nth-child(1) { animation-delay: 0s; }
.thinking span:nth-child(2) { animation-delay: 0.18s; }
.thinking span:nth-child(3) { animation-delay: 0.36s; }
@keyframes thinkBounce {
  0%, 80%, 100% { transform: translateY(0) scale(1); opacity: 0.4; }
  40% { transform: translateY(-5px) scale(1.15); opacity: 1; box-shadow: 0 0 8px var(--brand); }
}

/* Rendered Markdown inside assistant answers */
.msg-assistant .msg__bubble > :first-child { margin-top: 0; }
.msg-assistant .msg__bubble > :last-child { margin-bottom: 0; }
.msg-assistant .msg__bubble p { margin: 0 0 0.85em; }
.msg-assistant .msg__bubble h3,
.msg-assistant .msg__bubble h4 {
  margin: 1.2em 0 0.45em;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}
.msg-assistant .msg__bubble h3 { font-size: 1.2rem; }
.msg-assistant .msg__bubble h4 { font-size: 1.08rem; }
.msg-assistant .msg__bubble ul,
.msg-assistant .msg__bubble ol { margin: 0.3em 0 0.9em; padding-left: 1.4em; }
.msg-assistant .msg__bubble li { margin: 0.25em 0; padding-left: 0.2em; }
.msg-assistant .msg__bubble li::marker { color: var(--text-3); }
.msg-assistant .msg__bubble strong { font-weight: 600; }
.msg-assistant .msg__bubble code { font-size: 0.85em; }

.markdown-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  margin: 0.7rem 0 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  /* A wide schedule must scroll inside the bubble, never widen the chat column. */
  overscroll-behavior-x: contain;
}
.markdown-table {
  width: max-content;
  min-width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 0.86rem;
  line-height: 1.45;
}
.markdown-table th,
.markdown-table td {
  min-width: 90px;
  /* Keeps a single long cell (a paragraph inside a "Details" column) from
     stretching the whole table to an unreadable width. */
  max-width: 320px;
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
  white-space: normal;
  overflow-wrap: anywhere;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.markdown-table th {
  font-weight: 600;
  /* Headers wrap rather than forcing horizontal scroll: seven nowrap columns
     pushed the table far wider than the message bubble. */
  white-space: normal;
  hyphens: auto;
  background: var(--sunken);
}
.markdown-table tbody tr:hover td { background: var(--bg); }
.markdown-table tr:last-child td { border-bottom: 0; }
.markdown-table th:last-child,
.markdown-table td:last-child { border-right: 0; }

/* Sources: tactile citation cards with 3D tilt & confidence gauge */
.sources { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; font-family: var(--font-ui); }
.sources__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.sources__label svg { color: var(--brand); }
.source-list { display: flex; flex-wrap: wrap; gap: 8px; }

.source-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  font-size: 0.79rem;
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--accent-text);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.005) 100%), var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent-line) 45%, transparent);
  border-left: 3px solid var(--accent-line);
  border-radius: var(--radius-md);
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transform-style: preserve-3d;
  will-change: transform;
  transition: border-color 150ms ease, box-shadow 150ms ease,
              background-color 150ms ease, transform 200ms var(--spring);
}
.source-tab svg { flex: 0 0 auto; color: var(--accent-text); }
.source-tab:hover {
  background: var(--surface);
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--ring), var(--shadow-card), 0 4px 12px rgba(0, 0, 0, 0.2);
}
.source-tab:active { transform: scale(0.96); }

.source-tab__badge {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.78rem;
}
.source-tab__section {
  color: var(--text-3);
  font-weight: 500;
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.source-tab__conf {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: var(--radius-pill);
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ok);
}
.source-tab__conf-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.source-tab__arrow {
  color: var(--text-3);
  transition: transform 160ms var(--spring), color 140ms ease;
}
.source-tab:hover .source-tab__arrow {
  color: var(--brand);
  transform: translateX(2px);
}

/* Inline Citation Pills in assistant markdown */
.inline-citation {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 0 2px;
  padding: 1px 7px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent-text);
  background: var(--accent-bg);
  border: 1px solid color-mix(in srgb, var(--accent-line) 55%, transparent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  vertical-align: baseline;
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: all 160ms var(--spring);
}
.inline-citation:hover {
  background: var(--surface);
  border-color: var(--brand);
  color: var(--brand);
  transform: translateY(-1.5px) scale(1.04);
  box-shadow: 0 3px 10px rgba(99, 102, 241, 0.25);
}
.inline-citation:active {
  transform: scale(0.96);
}

/* --------------------------------------------------------------------------
   Dynamic Follow-Up Suggestion Chips
   -------------------------------------------------------------------------- */
.follow-up-suggestions {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: fadeSlideUp 0.32s var(--ease) both;
}
.follow-up-suggestions__header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.follow-up-suggestions__header svg {
  color: var(--brand);
}
.follow-up-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.follow-up-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 14px;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transform-style: preserve-3d;
  will-change: transform;
  transition: border-color 160ms ease, color 160ms ease,
              box-shadow 160ms ease, transform 200ms var(--spring);
}
.follow-up-chip:hover {
  color: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 0 0 2.5px var(--ring), var(--shadow-card);
}
.follow-up-chip svg {
  flex-shrink: 0;
  color: var(--text-3);
  transition: transform 180ms var(--spring), color 160ms ease;
}
.follow-up-chip:hover svg {
  color: var(--brand);
  transform: translateX(2px);
}
.follow-up-chip:active {
  transform: scale(0.96);
}

/* --------------------------------------------------------------------------
   Citation & PDF Inspector Slide-Out Drawer
   -------------------------------------------------------------------------- */
.citation-drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s 0.32s;
}
.citation-drawer.is-open {
  pointer-events: auto;
  visibility: visible;
  transition: visibility 0s 0s;
}

.citation-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(6, 9, 20, 0.65);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}
.citation-drawer.is-open .citation-drawer__scrim {
  opacity: 1;
}

.citation-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(540px, 94vw);
  background: var(--surface);
  border-left: 1px solid var(--line-strong);
  box-shadow: -16px 0 48px rgba(0, 0, 0, 0.6), var(--rim-light);
  display: flex;
  flex-direction: column;
  transform: translateX(105%);
  transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2;
  overflow: hidden;
}
.citation-drawer.is-open .citation-drawer__panel {
  transform: translateX(0);
}

.citation-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  flex-shrink: 0;
}
.citation-drawer__title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.citation-drawer__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent-text);
  background: var(--accent-bg);
  border: 1px solid color-mix(in srgb, var(--accent-line) 60%, transparent);
  border-left: 3px solid var(--accent-line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
}
.citation-drawer__confidence {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text-2);
}
.citation-drawer__confidence-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 6px var(--ok);
  transition: background-color 200ms ease, box-shadow 200ms ease;
}
.citation-drawer__confidence.confidence-high .citation-drawer__confidence-dot {
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
}
.citation-drawer__confidence.confidence-high {
  color: var(--ok);
  border-color: color-mix(in srgb, #10b981 30%, transparent);
}
.citation-drawer__confidence.confidence-med .citation-drawer__confidence-dot {
  background: #f59e0b;
  box-shadow: 0 0 8px #f59e0b;
}
.citation-drawer__confidence.confidence-med {
  color: var(--warn);
  border-color: color-mix(in srgb, #f59e0b 30%, transparent);
}
.citation-drawer__confidence.confidence-low .citation-drawer__confidence-dot {
  background: #6366f1;
  box-shadow: 0 0 8px #6366f1;
}
.citation-drawer__confidence.confidence-low {
  color: var(--brand);
  border-color: color-mix(in srgb, #6366f1 30%, transparent);
}

.citation-drawer__tabs {
  display: flex;
  gap: 6px;
  padding: 8px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--sunken);
  flex-shrink: 0;
}
.citation-drawer__tab {
  flex: 1;
  padding: 8px 14px;
  font-family: var(--font-ui);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: center;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.citation-drawer__tab:hover {
  color: var(--text);
}
.citation-drawer__tab.is-active {
  color: var(--text);
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--shadow-card);
}

.citation-drawer__body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.citation-drawer__pane {
  display: none;
  flex-direction: column;
  flex: 1;
  padding: 20px;
  gap: 18px;
}
.citation-drawer__pane.is-active {
  display: flex;
  animation: paneIn 0.25s var(--ease) both;
}
@keyframes paneIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Excerpt meta card */
.citation-meta-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.005) 100%), var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--rim-light), var(--shadow-card);
  transform-style: preserve-3d;
  will-change: transform;
}
.citation-meta-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 0.86rem;
}
.citation-meta-label {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  min-width: 72px;
}
.citation-meta-val {
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--text);
  word-break: break-word;
}

/* Quote box */
.citation-quote-box {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-card);
  transform-style: preserve-3d;
  will-change: transform;
}
.citation-quote-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.citation-quote-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.citation-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  font-family: var(--font-ui);
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--text-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 140ms ease;
}
.citation-copy-btn:hover {
  background: var(--sunken);
  color: var(--text);
  border-color: var(--line-strong);
}
.citation-copy-btn.is-copied {
  color: var(--ok);
  border-color: var(--ok);
}
.citation-quote-text {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.94rem;
  line-height: 1.7;
  color: var(--text-2);
  white-space: pre-wrap;
  word-break: break-word;
}

.citation-drawer__actions {
  margin-top: auto;
  padding-top: 12px;
}
.citation-drawer__actions .btn {
  width: 100%;
  justify-content: center;
}

/* PDF View Pane with 3D Page Flip */
#pane-pdf {
  padding: 14px;
  height: 100%;
}
.citation-pdf-wrapper {
  position: relative;
  flex: 1;
  min-height: 480px;
  height: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  overflow: hidden;
  background: #111624;
  box-shadow: var(--shadow-card);
  perspective: 1200px;
  transform-style: preserve-3d;
}
#citation-pdf-frame {
  width: 100%;
  height: 100%;
  min-height: 520px;
  border: none;
  background: #fff;
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}
.citation-pdf-wrapper.is-flipping #citation-pdf-frame {
  transform: rotateY(-18deg) scale(0.97);
  opacity: 0.6;
}

/* Knowledge Base Inspector Modal */
.kb-modal__card {
  max-width: 520px;
}
.kb-modal__header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.kb-modal__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  background: var(--brand-tint);
  color: var(--brand);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
.kb-modal__subtitle {
  margin: 3px 0 0;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--text-3);
  text-transform: uppercase;
}
.kb-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.kb-stat-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 13px 15px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transform-style: preserve-3d;
  will-change: transform;
}
.kb-stat-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.kb-stat-value {
  font-family: var(--font-ui);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  word-break: break-word;
}
.kb-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Per-message action toolbar */
.msg__tools {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: -6px;
  padding: 2px 0;
  opacity: 0;
  transition: opacity 160ms ease;
}
.msg-assistant:hover .msg__tools,
.msg__tools:focus-within { opacity: 1; }
.msg__tool {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 9px;
  font-family: var(--font-ui);
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--text-3);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 130ms ease, color 130ms ease,
              border-color 130ms ease, transform 180ms var(--spring);
}
.msg__tool:hover {
  background: var(--sunken);
  color: var(--text);
  border-color: var(--line);
}
.msg__tool:active { transform: scale(0.93); }
.msg__tool.is-done { color: var(--ok); opacity: 1; }
.msg__tool.is-active { color: var(--brand); opacity: 1; }

/* Divider between tool groups */
.msg__tool-sep {
  width: 1px;
  height: 16px;
  background: var(--line);
  margin: 0 3px;
  flex-shrink: 0;
}

.error-banner {
  width: min(var(--col), 100%);
  margin: 0 auto 14px;
  padding: 11px 14px;
  font-size: 0.9rem;
  color: var(--danger);
  background: var(--danger-tint);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  border-left: 3px solid var(--danger);
  border-radius: var(--radius-md);
}

/* Composer — Premium input with glow-on-focus */
.composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: min(var(--col), calc(100% - 32px));
  margin: 8px auto 0;
  padding: 8px 8px 8px 18px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--rim-light), var(--shadow-card);
  transition: border-color 160ms ease, box-shadow 200ms ease;
}
.composer:focus-within {
  border-color: var(--brand);
  box-shadow: var(--rim-light), 0 0 0 3.5px var(--ring), var(--shadow-card);
}

.composer__input {
  flex: 1;
  min-width: 0;
  max-height: 160px;
  padding: 8px 0;
  font-family: var(--font-ui);
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--text);
  background: transparent;
  border: 0;
  outline: 0;
  resize: none;
}
.composer__input::placeholder { color: var(--text-3); }

/* Composer action buttons row */
.composer__actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.composer__icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: background-color 130ms ease, color 130ms ease, transform 180ms var(--spring);
}
.composer__icon-btn:hover { background: var(--sunken); color: var(--text); }
.composer__icon-btn:active { transform: scale(0.9); }
.composer__icon-btn.is-recording { color: var(--danger); animation: recordPulse 1.2s ease infinite; }
/* Voice-input language picker: compact so it sits unobtrusively with the mic. */
.composer__voice-lang {
  height: 28px;
  max-width: 96px;
  padding: 0 4px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-3);
  font-size: 11px;
  cursor: pointer;
}
.composer__voice-lang:hover { color: var(--text); background: var(--sunken); }
.composer__voice-lang:focus-visible { outline: 2px solid var(--accent, #6366f1); outline-offset: 1px; }
@keyframes recordPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(185, 28, 28, 0.3); }
  50% { box-shadow: 0 0 0 6px rgba(185, 28, 28, 0); }
}

.composer__send {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  color: #fff;
  background: var(--brand-solid);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: var(--rim-light), 0 1px 4px rgba(79, 70, 229, 0.35);
  transition: background-color 150ms ease, color 150ms ease,
              transform 200ms var(--spring), box-shadow 150ms ease;
}
.composer__send:not(:disabled):hover {
  background: var(--brand-hover);
  box-shadow: var(--rim-light), 0 2px 8px rgba(79, 70, 229, 0.5);
}
.composer__send:not(:disabled):active { transform: scale(0.9); }
.composer__send:disabled {
  color: var(--text-3);
  background: var(--sunken);
  cursor: not-allowed;
  box-shadow: none;
}

/* Stop-stream button replaces send while streaming */
.composer__stop {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  color: var(--danger);
  background: var(--danger-tint);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 130ms ease, transform 180ms var(--spring);
  animation: stopPulseIn 0.25s var(--spring) both;
}
@keyframes stopPulseIn { from { transform: scale(0.6); opacity: 0; } }
.composer__stop:hover { background: var(--danger-tint); }
.composer__stop:active { transform: scale(0.9); }

.composer__hint {
  margin: 8px 0 14px;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 0.74rem;
  color: var(--text-3);
}

/* --------------------------------------------------------------------------
   7. Modals
   -------------------------------------------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 9, 20, 0.6);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}
.modal:not([hidden]) { animation: fade 160ms ease; }
.modal:not([hidden]) .modal__card { animation: pop 220ms var(--spring); }

.modal__card {
  width: 100%;
  max-width: 420px;
  padding: 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-pop), var(--rim-light);
}
.modal__card h3 {
  margin: 0 0 8px;
  font-family: var(--font-ui);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--text);
}
.modal__card p { margin: 0 0 20px; font-size: 0.9rem; line-height: 1.6; color: var(--text-2); }
.modal__card input {
  width: 100%;
  min-height: 44px;
  margin: 8px 0 22px;
  padding: 10px 13px;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  outline: 2px solid transparent;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.modal__card input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); }
.modal__actions { display: flex; justify-content: flex-end; gap: 8px; }

@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(0.96); } }

/* --------------------------------------------------------------------------
   8. Command Palette
   -------------------------------------------------------------------------- */

.cmd-palette-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(6, 9, 20, 0.65);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  animation: fade 150ms ease;
}

.cmd-palette {
  width: min(560px, calc(100vw - 32px));
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-pop), var(--rim-light);
  overflow: hidden;
  animation: pop 200ms var(--spring);
}

.cmd-palette__input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.cmd-palette__icon { color: var(--text-3); flex-shrink: 0; }
.cmd-palette__input {
  flex: 1;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  background: transparent;
  border: none;
  outline: none;
}
.cmd-palette__input::placeholder { color: var(--text-3); }
.cmd-palette__kbd {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 2px 6px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--bg);
  color: var(--text-3);
  flex-shrink: 0;
}

.cmd-palette__list {
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
}

.cmd-palette__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-2);
  background: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  transition: background-color 120ms ease, color 120ms ease;
}
.cmd-palette__item:hover,
.cmd-palette__item.is-selected {
  background: var(--brand-tint);
  color: var(--brand);
}
.cmd-palette__item-icon { color: var(--text-3); flex-shrink: 0; }
.cmd-palette__item:hover .cmd-palette__item-icon,
.cmd-palette__item.is-selected .cmd-palette__item-icon { color: var(--brand); }
.cmd-palette__item-label { flex: 1; }
.cmd-palette__item-kbd {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text-3);
  background: var(--bg);
}

.cmd-palette__section-label {
  padding: 6px 12px 4px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.cmd-palette__footer {
  display: flex;
  gap: 14px;
  padding: 9px 14px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-3);
}
.cmd-palette__footer span {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* --------------------------------------------------------------------------
   9. Responsive
   -------------------------------------------------------------------------- */

@media (min-width: 960px) {
  .auth-layout { grid-template-columns: minmax(420px, 5fr) 6fr; }
  .auth-aside {
    display: flex;
    flex-direction: column;
    padding: 40px 56px;
    background: var(--aside-bg);
  }
  .auth-mark { display: none; }
}

@media (max-width: 820px) {
  :root { --sidebar-w: 284px; }

  .shell,
  .shell.sidebar-collapsed { grid-template-columns: minmax(0, 1fr); }

  .sidebar,
  .shell.sidebar-collapsed .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 40;
    width: var(--sidebar-w);
    max-width: 88vw;
    padding: 14px 12px;
    border-right-color: var(--line);
    visibility: hidden;
    transform: translateX(-102%);
    transition: transform 240ms var(--ease), visibility 0s 240ms;
  }
  .shell.sidebar-open .sidebar {
    visibility: visible;
    transform: none;
    box-shadow: var(--shadow-pop);
    transition: transform 240ms var(--ease), visibility 0s;
  }

  /* Scrim behind the drawer; clicking it closes the drawer (handled in app.js) */
  .shell::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgba(8, 12, 26, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
  }
  .shell.sidebar-open::after { opacity: 1; pointer-events: auto; }

  .chat__scroll { padding-top: 20px; }
  .empty-state { margin-top: 4vh; }
  .empty-state h2 { font-size: 1.85rem; }
  .msg-user .msg__bubble { max-width: 92%; }
  .msg-assistant { grid-template-columns: minmax(0, 1fr); }
  .msg-assistant::before { display: none; }
  .msg-assistant > * { grid-column: 1; }
  .msg__tools { opacity: 1; }
  .markdown-table { font-size: 0.8rem; }
  .markdown-table th, .markdown-table td { padding: 8px 10px; }
  .doc-chip__file { display: none; }
  #expand-sidebar .icon-chevron { display: none; }
  #expand-sidebar .icon-menu { display: block; }
}

@media (hover: none) {
  .conversation-item__actions,
  .msg__tools { opacity: 1; }
  .composer__hint { display: none; }
  .composer { margin-bottom: 14px; }
}

@media (max-width: 480px) {
  .auth-main { align-items: flex-start; padding-top: 72px; }
  .auth-card h1 { font-size: 1.8rem; }
}

/* --------------------------------------------------------------------------
   9. Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
}

/* ==========================================================================
   11. Phase 3 — Workstation capabilities
   Ambient backdrop · knowledge vault · menus · PDF inspector · evidence ·
   voice waveform · prompt editing · toasts · 3D knowledge sphere
   ========================================================================== */

:root { --font-body: "Inter", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

/* Reading typography: Inter with strict spacing (blueprint §1C) */
.msg-assistant .msg__bubble {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.62;
  letter-spacing: -0.011em;
}
.msg-assistant .msg__bubble h3, .msg-assistant .msg__bubble h4, .msg-assistant .msg__bubble h5 { font-family: var(--font-ui); letter-spacing: -0.02em; }

/* --- Ambient mesh backdrop (GPU-friendly: transforms + opacity only) ------ */
.main { position: relative; isolation: isolate; overflow: hidden; }
.main > .chat { position: relative; z-index: 1; }
.main > .main__header { position: relative; z-index: 5; }
.ambient { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; --mx: 0; --my: 0; }
.ambient__orb {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.5; will-change: transform;
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.ambient__orb--a { width: 46vmax; height: 46vmax; left: -12vmax; top: 8vh; background: radial-gradient(circle, rgba(99,102,241,0.30), transparent 68%);
  transform: translate3d(calc(var(--mx) * 34px), calc(var(--my) * 26px), 0); animation: orbDriftA 26s ease-in-out infinite alternate; }
.ambient__orb--b { width: 38vmax; height: 38vmax; right: -14vmax; bottom: -10vmax; background: radial-gradient(circle, rgba(56,189,248,0.20), transparent 68%);
  transform: translate3d(calc(var(--mx) * -46px), calc(var(--my) * -30px), 0); animation: orbDriftB 32s ease-in-out infinite alternate; }
.ambient__orb--c { width: 26vmax; height: 26vmax; right: 24%; top: -12vmax; background: radial-gradient(circle, rgba(16,185,129,0.14), transparent 70%);
  transform: translate3d(calc(var(--mx) * 20px), calc(var(--my) * 40px), 0); animation: orbDriftA 38s ease-in-out infinite alternate-reverse; }
:root[data-theme="light"] .ambient__orb { opacity: 0.32; }
@keyframes orbDriftA { from { margin: 0 0 0 0; } to { margin: 5vmax 3vmax 0 0; } }
@keyframes orbDriftB { from { margin: 0; } to { margin: 0 4vmax 6vmax 0; } }

/* --- Header chips + popover menus ----------------------------------------- */
.hdr-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px;
  font-family: var(--font-ui); font-size: 0.78rem; font-weight: 600; color: var(--text-2);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--rim-light); cursor: pointer; white-space: nowrap;
  transition: border-color 130ms ease, color 130ms ease, transform 180ms var(--spring), background-color 130ms ease;
}
.hdr-chip:hover { color: var(--text); border-color: var(--line-strong); background: var(--sunken); }
.hdr-chip:active { transform: scale(0.96); }
.hdr-chip kbd { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.02em; padding: 1px 5px; color: var(--text-3); background: var(--bg); border: 1px solid var(--line); border-radius: 4px; }
#model-btn-label { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.pop-wrap { position: relative; }
.pop-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; min-width: 230px; max-width: 320px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  box-shadow: var(--rim-light), var(--shadow-pop); animation: pop 160ms var(--ease) both;
}
.pop-menu--right { left: auto; right: 0; }
.pop-menu--up { top: auto; bottom: calc(100% + 6px); }
.pop-menu--wide { min-width: 280px; }

/* The saved-prompt menu lives on the composer, which sits at the very bottom of
   the viewport. Opened downward it has no room and most of its items fall below
   the fold — only the first was visible. It therefore always opens UPWARD, is
   capped to the available height, and scrolls internally when the list is
   longer. ``overscroll-behavior`` stops the page scrolling behind it. */
#promptlib-menu {
  top: auto;
  bottom: calc(100% + 8px);
  max-height: min(340px, 55vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
/* A saved-prompt row: the label picks the prompt, the trailing button deletes it. */
.pop-menu__row { display: flex; align-items: center; gap: 2px; }
.pop-menu__row .pop-menu__item { flex: 1 1 auto; min-width: 0; }
.pop-menu__row .pop-menu__item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop-menu__delete {
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 30px; height: 30px; border: none; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-3); cursor: pointer;
}
.pop-menu__delete:hover { background: var(--danger-tint, rgba(185, 28, 28, 0.12)); color: var(--danger); }
.pop-menu__divider { height: 1px; margin: 6px 4px; background: var(--line); }
.pop-menu[hidden] { display: none; }
.pop-menu__label { padding: 6px 10px 4px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.pop-menu__item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; text-align: left;
  font-family: var(--font-ui); font-size: 0.84rem; font-weight: 500; color: var(--text-2);
  background: none; border: 0; border-radius: var(--radius-md); cursor: pointer;
}
.pop-menu__item svg { flex: 0 0 auto; color: var(--text-3); }
.pop-menu__item:hover { background: var(--sunken); color: var(--text); }
.pop-menu__item:focus-visible { background: var(--sunken); color: var(--text); }
.pop-menu__item:hover svg { color: var(--brand); }
.pop-menu__item.is-current { color: var(--brand); }
.pop-menu__item.is-current::after { content: "✓"; margin-left: auto; font-weight: 700; }

/* --- Knowledge vault (sidebar) -------------------------------------------- */
.vault { padding: 0 12px 6px; }
.vault__label { display: flex; align-items: center; justify-content: space-between; padding-left: 4px; padding-right: 0; }
.vault__add {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px;
  font-family: var(--font-ui); font-size: 0.7rem; font-weight: 600; color: var(--brand);
  background: var(--brand-tint); border: 1px solid transparent; border-radius: var(--radius-pill); cursor: pointer;
  transition: transform 180ms var(--spring), border-color 130ms ease;
}
.vault__add:hover { border-color: var(--brand); }
.vault__add:active { transform: scale(0.94); }
.vault__list { display: flex; flex-direction: column; gap: 4px; max-height: 206px; overflow-y: auto; padding: 2px 0; }
.vault-item {
  position: relative; display: flex; align-items: center; gap: 9px; padding: 8px 8px 8px 10px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--rim-light);
  transition: border-color 140ms ease, background-color 140ms ease, transform 180ms var(--spring), opacity 140ms ease;
}
.vault-item:hover { border-color: var(--line-strong); }
.vault-item:active { transform: scale(0.985); }
.vault-item__check {
  flex: 0 0 auto; width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--line-strong);
  display: grid; place-items: center; color: transparent; transition: all 140ms ease;
}
.vault-item.is-selected .vault-item__check { background: var(--brand); border-color: var(--brand); color: #fff; }
.vault-item:not(.is-selected) { opacity: 0.62; }
.vault-item__body { min-width: 0; flex: 1; }
.vault-item__name { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vault-item__meta { display: block; margin-top: 1px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-3); }
.vault-item__actions { display: flex; gap: 0; opacity: 0; transition: opacity 130ms ease; }
.vault-item:hover .vault-item__actions, .vault-item:focus-within .vault-item__actions { opacity: 1; }
.vault-item.is-indexing .vault-item__meta::after { content: " · indexing…"; color: var(--warn); }
.vault-item.is-uploading { pointer-events: none; }
.vault-item.is-uploading::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: linear-gradient(90deg, transparent, var(--brand), #38bdf8, transparent); background-size: 200% 100%;
  animation: borderGlow 1.4s linear infinite;
}
.vault__hint { margin: 6px 4px 0; font-size: 0.7rem; line-height: 1.4; color: var(--text-3); }

/* --- Document filter chips above the composer ----------------------------- */
.doc-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: min(var(--col), calc(100% - 32px)); margin: 0 auto 2px; }
.doc-filter[hidden] { display: none; }
.doc-filter__label { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); margin-right: 2px; }
.doc-chip-btn {
  display: inline-flex; align-items: center; gap: 6px; max-width: 220px; height: 26px; padding: 0 10px;
  font-family: var(--font-ui); font-size: 0.74rem; font-weight: 600; color: var(--text-2);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-pill); cursor: pointer;
  transition: transform 180ms var(--spring), border-color 130ms ease, color 130ms ease, background-color 130ms ease;
}
.doc-chip-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-chip-btn:hover { border-color: var(--line-strong); }
.doc-chip-btn:active { transform: scale(0.95); }
.doc-chip-btn.is-selected { color: var(--brand); background: var(--brand-tint); border-color: color-mix(in srgb, var(--brand) 45%, transparent); }

/* --- Composer: waveform + attach ----------------------------------------- */
.composer__wave { width: 96px; height: 28px; margin-right: 4px; border-radius: 6px; }
.composer__wave[hidden] { display: none; }
.composer.is-recording { border-color: var(--danger); box-shadow: var(--rim-light), 0 0 0 3.5px color-mix(in srgb, var(--danger) 22%, transparent), var(--shadow-card); }
.composer__icon-btn:disabled { opacity: 0.4; pointer-events: none; }

/* --- 3D knowledge sphere -------------------------------------------------- */
.empty-state__visual { display: flex; justify-content: center; margin: -6px 0 6px; min-height: 0; }
.neural-sphere-wrap { position: relative; width: 240px; height: 240px; margin: 0 auto; }
.neural-sphere-wrap::after { /* soft halo behind the sphere */
  content: ""; position: absolute; inset: 14%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,0.22), transparent 70%); filter: blur(18px);
}
#neural-sphere-canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
#neural-sphere-canvas:active { cursor: grabbing; }
.empty-state { text-align: center; }
.empty-state p { margin-left: auto; margin-right: auto; }
.empty-state__prompts { text-align: left; }

/* --- Message chrome: ids, edit, smart-regenerate menu, table tools -------- */
.msg-user { position: relative; }
.msg__user-tools { display: flex; gap: 2px; opacity: 0; transition: opacity 150ms ease; margin-top: -4px; }
.msg-user:hover .msg__user-tools, .msg__user-tools:focus-within { opacity: 1; }
.msg__tool--regen-group { display: inline-flex; align-items: center; position: relative; }
.msg__tool--caret { padding: 0 5px; margin-left: -4px; }
.msg-menu-anchor { position: relative; display: inline-flex; }
.msg-menu-anchor .pop-menu { top: auto; bottom: calc(100% + 6px); left: 0; }
.msg__edit { width: min(560px, 100%); display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--surface); border: 1px solid var(--brand); border-radius: var(--radius-lg); box-shadow: 0 0 0 3px var(--ring), var(--shadow-card); animation: pop 160ms var(--ease) both; }
.msg__edit textarea { width: 100%; min-height: 64px; resize: vertical; padding: 4px 2px; font-family: var(--font-ui); font-size: 0.94rem; line-height: 1.5; color: var(--text); background: transparent; border: 0; outline: 0; }
.msg__edit-row { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.msg__edit-note { margin-right: auto; font-size: 0.72rem; color: var(--text-3); display: inline-flex; align-items: center; gap: 5px; }
.md-table-tools { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin: 6px 0 4px; }
.md-table-tools button {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px;
  font-family: var(--font-ui); font-size: 0.72rem; font-weight: 600; color: var(--text-3);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer;
  transition: color 130ms ease, border-color 130ms ease, transform 180ms var(--spring);
}
.md-table-tools button:hover { color: var(--brand); border-color: var(--brand); }
.md-table-tools button:active { transform: scale(0.94); }
.md-table-tools button.is-done { color: var(--ok); border-color: var(--ok); }
.msg__docs { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 4px; }
.source-tab__doc { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-3); max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg__tool.is-liked { color: var(--ok); opacity: 1; }
.msg__tool.is-disliked { color: var(--danger); opacity: 1; }
.stopped-note { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }

/* --- Citation drawer: PDF.js inspector ------------------------------------ */
.citation-drawer__tab-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 4px; padding: 0 5px; font-family: var(--font-mono); font-size: 10.5px; color: var(--brand); background: var(--brand-tint); border-radius: 9px; }
#pane-pdf { padding: 12px 14px 14px; gap: 10px; }
.pdf-toolbar { display: flex; align-items: center; gap: 6px; }
.pdf-toolbar__page { min-width: 74px; text-align: center; font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-2); }
.pdf-toolbar__spacer { flex: 1; }
.pdf-toolbar__hl { display: inline-flex; align-items: center; gap: 5px; margin-right: 4px; font-size: 0.72rem; font-weight: 600; color: var(--accent-text); }
.pdf-toolbar__hl[hidden] { display: none; }
.citation-pdf-wrapper { min-height: 0; overflow: hidden; background: var(--sunken); }
.pdf-stage { position: absolute; inset: 0; overflow: auto; padding: 14px; display: flex; flex-direction: column; align-items: center; }
.pdf-page {
  position: relative; flex: 0 0 auto; background: #fff; box-shadow: 0 10px 34px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.3);
  transform-origin: left center; transform: perspective(1200px) rotateY(0deg);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}
.pdf-page.is-flipping { transform: perspective(1200px) rotateY(-18deg) scale(0.97); opacity: 0.55; }
.pdf-page canvas { display: block; max-width: none; }
.pdf-hl-layer { position: absolute; inset: 0; pointer-events: none; }
.pdf-hl {
  position: absolute; border-radius: 3px; background: rgba(250, 204, 21, 0.42); mix-blend-mode: multiply;
  box-shadow: 0 0 0 1px rgba(202, 138, 4, 0.35); animation: hlIn 0.5s var(--ease) both;
}
@keyframes hlIn { from { opacity: 0; transform: scaleX(0.92); } }
.pdf-status { margin-top: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
.pdf-status:empty { display: none; }
#citation-pdf-frame { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; }
#citation-pdf-frame[hidden] { display: none; }

/* --- Evidence tab ---------------------------------------------------------- */
.evidence-intro { margin: 0; font-size: 0.82rem; line-height: 1.5; color: var(--text-3); }
.evidence-list { display: flex; flex-direction: column; gap: 10px; }
.evidence-card {
  display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; cursor: pointer; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--rim-light), var(--shadow-card);
  transition: border-color 140ms ease, transform 180ms var(--spring); animation: fadeSlideUp 0.35s var(--ease) both;
}
.evidence-card:hover { border-color: var(--brand); }
.evidence-card:active { transform: scale(0.99); }
.evidence-card__head { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
.evidence-card__rank { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; color: var(--brand); background: var(--brand-tint); }
.evidence-card__section { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evidence-card__score { display: flex; align-items: center; gap: 6px; color: var(--text-2); }
.evidence-bar { width: 54px; height: 4px; border-radius: 2px; background: var(--sunken); overflow: hidden; }
.evidence-bar > i { display: block; height: 100%; border-radius: 2px; background: var(--ok); transform-origin: left; animation: bar-in 0.6s var(--ease) both; }
.evidence-bar > i.med { background: var(--warn); } .evidence-bar > i.low { background: var(--danger); }
.evidence-card__text { margin: 0; font-size: 0.82rem; line-height: 1.55; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; }
.evidence-card.is-open .evidence-card__text { -webkit-line-clamp: unset; }
.evidence-card__foot { display: flex; gap: 12px; }
.evidence-card__foot button { padding: 0; font-family: var(--font-ui); font-size: 0.74rem; font-weight: 600; color: var(--brand); background: none; border: 0; cursor: pointer; }
.evidence-card__foot button:hover { text-decoration: underline; }

/* --- Command palette additions -------------------------------------------- */
.cmd-palette__list { max-height: min(56vh, 460px); }
.cmd-palette__item-meta { margin-left: auto; padding-left: 12px; max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.02em; color: var(--text-3); }
.cmd-palette__item-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cmd-palette__item-snippet { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.74rem; color: var(--text-3); }
.cmd-palette__empty { padding: 26px 16px; text-align: center; font-size: 0.86rem; color: var(--text-3); }
.cmd-palette__item mark { background: color-mix(in srgb, var(--accent-line) 35%, transparent); color: inherit; border-radius: 2px; }

/* --- Drop overlay + toasts ------------------------------------------------- */
.drop-overlay { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(6, 9, 20, 0.6); backdrop-filter: blur(8px); animation: fade 140ms ease; }
.drop-overlay[hidden] { display: none; }
.drop-overlay__card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px 44px; text-align: center; color: var(--text); background: var(--surface); border: 2px dashed var(--brand); border-radius: var(--radius-xl); box-shadow: var(--shadow-pop); }
.drop-overlay__card svg { color: var(--brand); }
.drop-overlay__card span { font-size: 0.86rem; color: var(--text-3); }
.toast-stack { position: fixed; z-index: 95; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { max-width: 340px; padding: 10px 14px; font-size: 0.84rem; font-weight: 500; color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); border-left: 3px solid var(--brand); border-radius: var(--radius-md); box-shadow: var(--rim-light), var(--shadow-pop); animation: pop 200ms var(--ease) both; }
.toast--error { border-left-color: var(--danger); } .toast--ok { border-left-color: var(--ok); }

@media (max-width: 820px) {
  .hdr-chip span, .hdr-chip kbd { display: none; }
  #model-btn .hdr-chip span, #model-btn span { display: inline; max-width: 90px; }
  .neural-sphere-wrap { width: 190px; height: 190px; }
  .msg__user-tools { opacity: 1; }
  .vault-item__actions { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ambient__orb { animation: none !important; transition: none !important; }
  .pdf-page, .pdf-hl, .evidence-card { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   12. Phase 5 — Motion polish
   Pointer spotlight, 3D message entrances, magnetic chips, glowing focus
   rings, staggered sidebar reveals. Purely additive: every rule here is
   either a new selector or a later, equal-specificity refinement.
   ========================================================================== */

/* --- Pointer spotlight that follows the cursor across the app ----------- */
.app-page .main::after {
  content: "";
  position: fixed;
  z-index: 0;
  width: 760px;
  height: 760px;
  margin: -380px 0 0 -380px;
  left: var(--spot-x, 50%);
  top: var(--spot-y, 40%);
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 13%, transparent), transparent 60%);
  transition: opacity 500ms ease;
}
.app-page.is-pointer .main::after { opacity: 1; }

/* --- Time-aware greeting ribbon ---------------------------------------- */
.empty-state__greeting {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 6px 13px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  border-radius: var(--radius-pill);
  animation: ribbonIn 620ms var(--spring) both;
}
.empty-state__greeting::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 var(--ring);
  animation: ribbonPing 2.6s var(--ease) infinite;
}
@keyframes ribbonIn { from { opacity: 0; transform: translateY(10px) scale(0.9); } }
@keyframes ribbonPing { 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* --- 3D entrance for chat messages -------------------------------------- */
.msg {
  animation: msg3d 520ms var(--spring) both;
  transform-origin: bottom center;
}
@keyframes msg3d {
  from { opacity: 0; transform: translateY(26px) rotateX(-16deg) scale(0.97); }
}
.msg-user { transform-origin: bottom right; }
.msg-assistant { transform-origin: bottom left; }

/* --- Magnetic suggestion chips + sheen --------------------------------- */
.suggestion-chip {
  transition: transform 340ms var(--spring), box-shadow 300ms ease, border-color 240ms ease, color 200ms ease;
}
.suggestion-chip:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 14px 28px rgba(12, 20, 45, 0.16);
}
.suggestion-chip { overflow: hidden; }
.suggestion-chip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 40%, color-mix(in srgb, var(--brand) 22%, transparent) 50%, transparent 60%);
  transform: translateX(-110%);
  pointer-events: none;
}
.suggestion-chip:hover::before { animation: chipSheen 780ms var(--ease); }
@keyframes chipSheen { to { transform: translateX(110%); } }

/* --- Staggered reveal for sidebar rows ---------------------------------- */
.vault-item,
.conversation-item {
  animation: rowIn 480ms var(--ease) both;
  animation-delay: calc(var(--i, 0) * 34ms);
}
@keyframes rowIn { from { opacity: 0; transform: translateX(-14px); } }

.sidebar__user-avatar {
  box-shadow: 0 0 0 2px var(--sidebar), 0 0 0 4px transparent;
  transition: box-shadow 320ms ease, transform 320ms var(--spring);
}
.sidebar__user:hover .sidebar__user-avatar {
  transform: scale(1.06);
  box-shadow: 0 0 0 2px var(--sidebar), 0 0 0 4px var(--brand);
}

/* --- Composer: lift + halo on focus ------------------------------------ */
.composer {
  transition: transform 400ms var(--spring), box-shadow 320ms ease, border-color 240ms ease;
}
.composer:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(12, 20, 45, 0.14), 0 0 0 4px color-mix(in srgb, var(--brand) 10%, transparent);
}
.composer__send { transition: transform 320ms var(--spring), box-shadow 300ms ease, opacity 200ms ease; }
.composer__send:not(:disabled):hover { transform: translateY(-2px) scale(1.06); }
.composer__icon-btn { transition: transform 320ms var(--spring), color 200ms ease, background-color 200ms ease; }
.composer__icon-btn:hover { transform: translateY(-2px) rotate(-6deg); }

/* --- Drawer / modal: 3D scale-in --------------------------------------- */
.citation-drawer__panel { transform-origin: right center; }
.modal__card { animation: card3d 420ms var(--spring) both; }
@keyframes card3d { from { opacity: 0; transform: translateY(18px) scale(0.94) rotateX(-8deg); } }

/* --- Primary buttons: glow lift ---------------------------------------- */
.btn-primary { transition: transform 300ms var(--spring), box-shadow 300ms ease, background-color 200ms ease; }
.btn-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 16px 34px var(--ring); }

/* --- Header chips ------------------------------------------------------- */
.hdr-chip { transition: transform 300ms var(--spring), background-color 200ms ease, color 200ms ease; }
.hdr-chip:hover { transform: translateY(-2px); }

/* Reduced motion is honoured in full: no entrance animation, no hover or focus
   translation, no infinite loops (cursor pulse, sheen, aurora). Colour and
   opacity feedback is kept, so nothing becomes uncommunicative. */
@media (prefers-reduced-motion: reduce) {
  .msg, .vault-item, .conversation-item, .modal__card, .empty-state__greeting,
  .prog-item, .prog-view, .citation-drawer__panel, .evidence-card {
    animation: none !important;
  }
  .composer:focus-within, .suggestion-chip:hover, .composer__send:hover,
  .composer__icon-btn:hover, .btn-primary:hover, .hdr-chip:hover, .icon-btn:active,
  .vault__add:active, .doc-chip-btn:active, .prog-item:active, .evidence-card:active,
  .conversation-item, .vault-item {
    transform: none !important;
  }
  .sidebar__user:hover .sidebar__user-avatar { transform: none !important; }
  .md-table-tools button:active, .composer__stop:active, .icon-btn:active { transform: none !important; }

  /* Infinite / looping motion. */
  .suggestion-chip::before,
  .suggestion-chip:hover::before { animation: none !important; display: none; }
  .thinking span { animation: none !important; opacity: 0.5; }

  /* Long, looping decorative movement. */
  .app-page .main::after { display: none; }
}

/* --------------------------------------------------------------------------
   Programme course-structure view, picker, choice chips, source toggle
   -------------------------------------------------------------------------- */

.prog-view {
  margin: 0.4rem 0 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}
/* A flex header, not a <head> - named for what it is. */
.prog-view__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 14px 16px 10px;
}
.prog-view__titlewrap { min-width: 0; flex: 1 1 260px; }
.prog-view__title { font-weight: 700; font-size: 1.02rem; line-height: 1.3; color: var(--text); overflow-wrap: anywhere; }
.prog-view__meta { margin-top: 3px; font-size: 0.78rem; color: var(--text-3); }
.prog-view__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.prog-btn {
  font: inherit; font-size: 0.78rem; font-weight: 600;
  padding: 6px 12px; min-height: 32px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  background: transparent; color: var(--text-2); cursor: pointer;
}
.prog-btn:hover { background: var(--sunken); color: var(--text); }

.prog-tabs {
  display: flex; gap: 6px; padding: 0 16px 10px; overflow-x: auto;
  scrollbar-width: thin; border-bottom: 1px solid var(--line);
}
.prog-tab {
  flex: 0 0 auto; font: inherit; font-size: 0.82rem; font-weight: 600;
  padding: 7px 14px; min-height: 34px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: var(--sunken); color: var(--text-2); cursor: pointer;
}
.prog-tab:hover { color: var(--text); }
.prog-tab.is-active { background: var(--brand-solid); border-color: var(--brand-solid); color: #fff; }
.prog-tab:focus-visible, .prog-btn:focus-visible, .prog-item:focus-visible, .choice-chip:focus-visible,
.sources__more:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.prog-view__body { padding: 12px 16px 16px; display: grid; gap: 18px; }
.prog-year[hidden] { display: none; }
.prog-year__label { margin: 0 0 8px; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.prog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.prog-sem { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg); overflow: hidden; }
.prog-sem__head {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 9px 12px; background: var(--sunken); font-weight: 700; font-size: 0.86rem;
}
.prog-sem__credits { font-weight: 600; font-size: 0.74rem; color: var(--text-3); }
.prog-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 10px; align-items: start;
  padding: 9px 12px; border-top: 1px solid var(--line); font-size: 0.86rem; line-height: 1.4;
}
.prog-row__paper { overflow-wrap: anywhere; color: var(--text); }
.prog-row__cr { font-size: 0.74rem; color: var(--text-3); white-space: nowrap; padding-top: 2px; }
.prog-badge {
  display: inline-block; min-width: 54px; text-align: center; padding: 2px 8px; border-radius: var(--radius-pill);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
  background: var(--sunken); color: var(--text-2); border: 1px solid var(--line);
}
/* Each badge hue is defined once as three tokens (light values in :root, dark
   values below) and every badge rule reads them. A theme is therefore declared
   in one place instead of being copied as a full second rule set - which is how
   .prog-badge--major/--other/--sbc previously kept their light colours in dark
   mode, because only the first selector of each comma group was theme-scoped. */
.prog-badge--dsc, .prog-badge--major { background: var(--badge-dsc-bg); color: var(--badge-dsc-fg); border-color: var(--badge-dsc-line); }
.prog-badge--minor, .prog-badge--other { background: var(--badge-minor-bg); color: var(--badge-minor-fg); border-color: var(--badge-minor-line); }
.prog-badge--dse { background: var(--badge-dse-bg); color: var(--badge-dse-fg); border-color: var(--badge-dse-line); }
.prog-badge--ge { background: var(--badge-ge-bg); color: var(--badge-ge-fg); border-color: var(--badge-ge-line); }
.prog-badge--aec { background: var(--badge-aec-bg); color: var(--badge-aec-fg); border-color: var(--badge-aec-line); }
.prog-badge--sec, .prog-badge--sbc { background: var(--badge-sec-bg); color: var(--badge-sec-fg); border-color: var(--badge-sec-line); }
.prog-badge--vac { background: var(--badge-vac-bg); color: var(--badge-vac-fg); border-color: var(--badge-vac-line); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --badge-dsc-bg: #1e1b4b; --badge-dsc-fg: #c7d2fe; --badge-dsc-line: #3730a3; --badge-minor-bg: #2a1d06; --badge-minor-fg: #fcd34d; --badge-minor-line: #78350f; --badge-dse-bg: #2e0f33; --badge-dse-fg: #f0abfc; --badge-dse-line: #701a75; --badge-ge-bg: #052e16; --badge-ge-fg: #86efac; --badge-ge-line: #166534; --badge-aec-bg: #082f36; --badge-aec-fg: #67e8f9; --badge-aec-line: #155e75; --badge-sec-bg: #2a1305; --badge-sec-fg: #fdba74; --badge-sec-line: #7c2d12; --badge-vac-bg: #2d0a1c; --badge-vac-fg: #f9a8d4; --badge-vac-line: #831843; }
}
:root[data-theme="dark"] { --badge-dsc-bg: #1e1b4b; --badge-dsc-fg: #c7d2fe; --badge-dsc-line: #3730a3; --badge-minor-bg: #2a1d06; --badge-minor-fg: #fcd34d; --badge-minor-line: #78350f; --badge-dse-bg: #2e0f33; --badge-dse-fg: #f0abfc; --badge-dse-line: #701a75; --badge-ge-bg: #052e16; --badge-ge-fg: #86efac; --badge-ge-line: #166534; --badge-aec-bg: #082f36; --badge-aec-fg: #67e8f9; --badge-aec-line: #155e75; --badge-sec-bg: #2a1305; --badge-sec-fg: #fdba74; --badge-sec-line: #7c2d12; --badge-vac-bg: #2d0a1c; --badge-vac-fg: #f9a8d4; --badge-vac-line: #831843; }
:root[data-theme="light"] { --badge-dsc-bg: #e0e7ff; --badge-dsc-fg: #3730a3; --badge-dsc-line: #c7d2fe; --badge-minor-bg: #fef3c7; --badge-minor-fg: #92400e; --badge-minor-line: #fde68a; --badge-dse-bg: #fae8ff; --badge-dse-fg: #86198f; --badge-dse-line: #f5d0fe; --badge-ge-bg: #dcfce7; --badge-ge-fg: #166534; --badge-ge-line: #bbf7d0; --badge-aec-bg: #cffafe; --badge-aec-fg: #155e75; --badge-aec-line: #a5f3fc; --badge-sec-bg: #ffedd5; --badge-sec-fg: #9a3412; --badge-sec-line: #fed7aa; --badge-vac-bg: #fce7f3; --badge-vac-fg: #9d174d; --badge-vac-line: #fbcfe8; }
.prog-raw { margin: 8px 0 0; padding: 10px 12px; white-space: pre-wrap; font-size: 0.8rem; background: var(--sunken); border-radius: var(--radius-md); }

/* "Which one do you mean?" variants */
.choice-item { list-style: none; margin: 6px 0; }
.choice-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  text-align: left; font: inherit; font-size: 0.88rem; padding: 10px 14px; min-height: 44px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface);
  color: var(--text); cursor: pointer;
}
.choice-chip:hover { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-hover-text); }
.choice-chip__page { flex: 0 0 auto; font-size: 0.74rem; color: var(--text-3); }

/* Source list: "show more" toggle */
.source-tab[hidden] { display: none; }
.sources__more {
  margin-top: 8px; font: inherit; font-size: 0.78rem; font-weight: 600; padding: 6px 12px; min-height: 32px;
  border: 1px dashed var(--line-strong); border-radius: var(--radius-pill); background: transparent;
  color: var(--text-2); cursor: pointer;
}
.sources__more:hover { background: var(--sunken); color: var(--text); }

/* Programme picker */
.prog-modal__card { width: min(560px, calc(100vw - 24px)); max-height: min(78vh, 680px); display: flex; flex-direction: column; }
.prog-list { margin: 10px 0; overflow-y: auto; flex: 1 1 auto; display: grid; gap: 6px; align-content: start; grid-auto-rows: max-content; min-height: 160px; }
.prog-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: baseline;
  text-align: left; width: 100%; font: inherit; padding: 10px 12px; min-height: 44px;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface); color: var(--text); cursor: pointer;
}
.prog-item:hover { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-hover-text); }
.prog-item:hover .prog-item__page { color: var(--brand-hover-text); }
.prog-item__main { font-weight: 600; font-size: 0.88rem; line-height: 1.4; overflow-wrap: anywhere; }
/* Kept only so a stale class name cannot resurrect the broken two-line
   layout; the full name now renders as a single wrapping line. */
.prog-item__minor { display: none; }
.prog-item:hover .prog-item__page { color: var(--brand-hover-text); }
.prog-item__page { grid-column: 2; grid-row: 1; font-size: 0.74rem; color: var(--text-3); align-self: center; }
.prog-empty { padding: 24px 8px; text-align: center; color: var(--text-3); font-size: 0.9rem; }
.prog-modal__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 0.8rem; color: var(--text-3); }

/* No-evidence answer: a first-class empty state, not a bare reply */
.no-evidence {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; margin: 2px 0;
  border: 1px solid var(--line); border-left: 3px solid var(--warn, #f59e0b);
  border-radius: var(--radius-md); background: var(--surface);
}
.no-evidence__icon {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%;
  background: var(--sunken); color: var(--text-2);
}
.no-evidence__body { min-width: 0; }
.no-evidence__title { margin: 0 0 2px; font-weight: 650; font-size: 0.92rem; color: var(--text); }
.no-evidence__hint { margin: 0; font-size: 0.85rem; line-height: 1.55; color: var(--text-2); }
.no-evidence__actions { margin-top: 10px; }
.no-evidence__actions .btn { min-height: 34px; }

/* Usage insights */
.insights-modal__card { width: min(560px, calc(100vw - 24px)); max-height: min(80vh, 720px); overflow-y: auto; }
.insights-modal__note {
  margin: 12px 0 0; padding: 10px 12px; font-size: 0.82rem; line-height: 1.5;
  color: var(--text-2); background: var(--sidebar);
  border: 1px solid var(--line); border-radius: var(--radius-md);
}

/* Mobile polish */
@media (max-width: 820px) {
  .prog-grid { grid-template-columns: minmax(0, 1fr); }
  .prog-view__header, .prog-tabs, .prog-view__body { padding-left: 12px; padding-right: 12px; }
  #prog-btn span { display: none; }
  .hdr-chip, .conversation-item, .vault__add, .btn { min-height: 40px; }
  .composer { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .modal__card { max-height: 88vh; }
}
@media (max-width: 480px) {
  .prog-row { grid-template-columns: minmax(0, 1fr) auto; }
  .prog-row .prog-badge { grid-column: 1 / -1; justify-self: start; }
  .source-tab__section { max-width: 40vw; }

  /* The composer packs attach + voice-language + mic + counter + send into one
     row. On a phone that is too many controls for the width, so the
     secondary ones (the live voice waveform and the character counter, both
     progressive enhancements) step aside and the language picker is trimmed to
     its flag-sized footprint. Attach, mic and send — the controls that actually
     do something — stay comfortably tappable. */
  .composer__wave,
  .composer__char-count { display: none; }
  .composer__voice-lang { max-width: 62px; }
  .composer__icon-btn { width: 40px; height: 40px; }
  .composer__send { width: 44px; height: 44px; }
  .composer__actions { gap: 4px; }
}
@media (prefers-reduced-motion: reduce) { .prog-tab, .prog-btn, .choice-chip, .prog-item { transition: none; } }


/* ========================================================================
   Evidence-quality badge (#11)
   Communicates how well the retrieved evidence supports an answer. It is
   deliberately labelled "evidence", not confidence-in-correctness, and the
   colour is never the only signal (a text label is always shown).
   ======================================================================== */
.confidence {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  font-family: var(--font-ui);
  font-size: 0.76rem;
  line-height: 1.3;
  border: 1px solid var(--line);
  background: var(--sunken);
  color: var(--text-2);
  max-width: 62ch;
}
.confidence svg { flex: 0 0 auto; }
.confidence__label { font-weight: 650; letter-spacing: -0.01em; white-space: nowrap; }
.confidence__detail { color: var(--text-3); font-weight: 450; }

.confidence--high { border-color: color-mix(in srgb, var(--emerald, #10b981) 42%, var(--line)); }
.confidence--high svg, .confidence--high .confidence__label { color: var(--emerald, #10b981); }
.confidence--medium { border-color: color-mix(in srgb, var(--amber, #f59e0b) 42%, var(--line)); }
.confidence--medium svg, .confidence--medium .confidence__label { color: var(--amber, #f59e0b); }
.confidence--low { border-color: color-mix(in srgb, var(--danger, #ef4444) 38%, var(--line)); }
.confidence--low svg, .confidence--low .confidence__label { color: var(--danger, #ef4444); }

/* A border-left accent gives a second, non-colour-dependent cue. */
.confidence--high { border-left: 3px solid var(--emerald, #10b981); }
.confidence--medium { border-left: 3px solid var(--amber, #f59e0b); }
.confidence--low { border-left: 3px solid var(--danger, #ef4444); }

@media (prefers-reduced-motion: no-preference) {
  .confidence { animation: confidenceIn 220ms ease both; }
}
@keyframes confidenceIn {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}

/* ========================================================================
   Upload progress (#17)
   A determinate bar driven by /api/documents/{id}/progress. The percentage
   is also written as text so the state is not conveyed by width alone.
   ======================================================================== */
.vault-item__progress {
  grid-column: 1 / -1;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.vault-item__bar {
  position: relative;
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--sunken);
  overflow: hidden;
}
.vault-item__bar > span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2, var(--brand)));
  transition: width 240ms cubic-bezier(0.34, 1.2, 0.64, 1);
}
.vault-item__pct {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--text-3);
  min-width: 3.2em;
  text-align: right;
}
.vault-item.is-failed { border-color: color-mix(in srgb, var(--danger, #ef4444) 45%, var(--line)); }
.vault-item.is-failed .vault-item__meta { color: var(--danger, #ef4444); }

/* Windows high-contrast / forced-colors: rely on the system palette and keep
   every state distinguishable without custom colours. */
@media (forced-colors: active) {
  .confidence, .vault-item__bar { border: 1px solid CanvasText; }
  .confidence__label { color: CanvasText; }
  .vault-item__bar > span { background: Highlight; }
}

@media (prefers-reduced-motion: reduce) {
  .confidence { animation: none !important; }
  .vault-item__bar > span { transition: none !important; }
}
/* --- Add-by-URL modal (#18) ------------------------------------------- */
.modal__hint {
  margin: -6px 0 14px;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text-3);
}
.modal__error {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--danger, #ef4444);
  background: color-mix(in srgb, var(--danger, #ef4444) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger, #ef4444) 30%, var(--line));
}
.modal__card input[aria-invalid="true"] {
  border-color: var(--danger, #ef4444);
}

/* The vault header now holds two actions; keep them from wrapping awkwardly. */
.vault__label { gap: 6px; flex-wrap: wrap; }

@media (forced-colors: active) {
  .modal__error { border: 1px solid CanvasText; color: CanvasText; }
}

/* ==========================================================================
   13. UI/UX Improvements — Phase 6
   Glassmorphic header, conversation management, vault enhancements,
   code block headers, enhanced tables, onboarding cards, retrieval stepper,
   citation tooltips, split-screen mode.
   ========================================================================== */

/* --- Glassmorphic App Header -------------------------------------------- */
.main__header {
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--line) 40%, transparent);
  position: sticky;
  top: 0;
  z-index: 10;
}

/* --- Model Pill Status Dot ---------------------------------------------- */
.model-status-dot {
  display: inline-block;
  width: 6.5px;
  height: 6.5px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
  margin-right: 5px;
  flex-shrink: 0;
  animation: pulse 2.5s ease-in-out infinite;
}

/* --- Assistant Avatar Glyph --------------------------------------------- */
.msg-assistant {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.msg__avatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-top: 2px;
  border-radius: 9px;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--line));
  box-shadow: 0 1px 2px color-mix(in srgb, var(--brand) 18%, transparent);
}
.msg-assistant .msg__bubble {
  min-width: 0;
  flex: 1 1 auto;
  /* Contains wide content (tables, code, long URLs) so it can never widen the
     chat column and push the answer off-screen. */
  overflow-wrap: anywhere;
  max-width: 100%;
}

/* Anything inside an answer that can be wider than the bubble must scroll
   internally instead of stretching its container. */
.msg__bubble > .markdown-table-wrap,
.msg__bubble > .md-table-tools {
  max-width: 100%;
}

/* --- Conversation Pin Button -------------------------------------------- */
.conversation-item__actions .icon-btn--pin {
  transition: color 130ms ease, transform 180ms var(--spring);
}
.conversation-item__actions .icon-btn--pin:hover {
  color: var(--warn);
}
.conversation-item.is-pinned .icon-btn--pin {
  color: var(--warn);
  opacity: 1;
}
.conversation-item.is-pinned .icon-btn--pin svg {
  fill: var(--warn);
}

/* --- Temporal Conversation Groups -------------------------------------- */
.conversation-group__label {
  padding: 10px 10px 3px;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: 0.02em;
}
.conversation-group__label:first-child {
  padding-top: 2px;
}

/* --- Conversation Sidebar Search --------------------------------------- */
.sidebar__search {
  position: relative;
  margin: 0 0 8px;
}
.sidebar__search-input {
  width: 100%;
  height: 32px;
  padding: 0 10px 0 30px;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.sidebar__search-input::placeholder { color: var(--text-3); font-size: 0.78rem; }
.sidebar__search-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--ring);
}
.sidebar__search-icon {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  pointer-events: none;
}

/* --- Vault File Type Badges & Metadata --------------------------------- */
.vault-item__type-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 28px;
  height: 18px;
  padding: 0 5px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  color: var(--brand);
  background: var(--brand-tint);
  border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent);
}
.vault-item__size {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--text-3);
  white-space: nowrap;
}

/* File-type colour variants: PDF red, URL blue, DOCX teal, XLSX/CSV green, MD/TXT neutral. */
.vault-item__type-badge--pdf {
  color: #e5484d;
  background: color-mix(in srgb, #e5484d 12%, transparent);
  border-color: color-mix(in srgb, #e5484d 32%, transparent);
}
.vault-item__type-badge--url {
  color: #3b82f6;
  background: color-mix(in srgb, #3b82f6 12%, transparent);
  border-color: color-mix(in srgb, #3b82f6 32%, transparent);
}
.vault-item__type-badge--docx {
  color: #14b8a6;
  background: color-mix(in srgb, #14b8a6 12%, transparent);
  border-color: color-mix(in srgb, #14b8a6 32%, transparent);
}
.vault-item__type-badge--xlsx,
.vault-item__type-badge--csv {
  color: #22c55e;
  background: color-mix(in srgb, #22c55e 12%, transparent);
  border-color: color-mix(in srgb, #22c55e 32%, transparent);
}
.vault-item__type-badge--md,
.vault-item__type-badge--txt {
  color: var(--text-2);
  background: var(--sunken);
  border-color: var(--line);
}

/* Live ingestion status dot on each vault row. */
.vault-status {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ok) 22%, transparent);
}
.vault-status--indexing,
.vault-status--queued {
  background: var(--brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 22%, transparent);
  animation: vault-status-pulse 1.4s ease-in-out infinite;
}
.vault-status--failed {
  background: var(--danger);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 22%, transparent);
}
@keyframes vault-status-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.82); }
}
@media (prefers-reduced-motion: reduce) {
  .vault-status--indexing,
  .vault-status--queued { animation: none; }
}

/* --- Vault Bulk Actions ------------------------------------------------ */
.vault__bulk-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 2px 6px;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  color: var(--text-3);
}
.vault__bulk-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.vault__bulk-btn {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  height: 22px;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 130ms ease;
}
.vault__bulk-btn:hover {
  color: var(--brand);
  background: var(--brand-tint);
  border-color: var(--brand);
}
.vault__doc-count {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--text-3);
  margin-left: auto;
}

/* --- Code Block Language Header with Copy Button ----------------------- */
.code-block-wrap {
  margin: 0.7rem 0 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
}
.code-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: var(--sunken);
  border-bottom: 1px solid var(--line);
}
.code-block-lang {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.code-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-3);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 130ms ease;
}
.code-copy-btn:hover {
  color: var(--text);
  background: var(--surface);
  border-color: var(--line-strong);
}
.code-copy-btn.is-copied {
  color: var(--ok);
  border-color: var(--ok);
}
.code-block-wrap pre {
  margin: 0;
  padding: 12px 14px;
  overflow-x: auto;
  font-size: 0.84rem;
  line-height: 1.55;
}
.code-block-wrap pre code {
  background: transparent;
  padding: 0;
  border-radius: 0;
}

/* --- Enhanced Markdown Tables ------------------------------------------ */
.markdown-table-wrap {
  position: relative;
  /* Hard cap: a wide schedule scrolls WITHIN this box. Without it, the
     table's ``width: max-content`` stretched the message column and pushed the
     answer past the right edge of the window. */
  max-width: 100%;
  width: 100%;
  overflow-x: auto;
}
.markdown-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--sunken);
}
.markdown-table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--sunken) 35%, transparent);
}
.markdown-table-wrap::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 24px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 80%, transparent));
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
}
.markdown-table-wrap.has-scroll::after {
  opacity: 1;
}
.md-table-tools {
  gap: 6px;
}
.md-table-tools .table-export-csv {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 40%, transparent);
}
.md-table-tools .table-export-csv:hover {
  background: color-mix(in srgb, var(--ok) 10%, transparent);
}

/* --- Empty State Prompt Chips adhere to native .suggestion-chip styles --- */

/* --- Retrieval Reasoning Stepper -------------------------------------- */
.retrieval-stepper {
  margin: 6px 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
  animation: fadeSlideUp 0.35s var(--ease) both;
}
.retrieval-stepper__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-2);
  background: var(--sunken);
  border: none;
  cursor: pointer;
  transition: background-color 130ms ease, color 130ms ease;
}
.retrieval-stepper__toggle:hover {
  background: var(--line);
  color: var(--text);
}
.retrieval-stepper__toggle svg {
  color: var(--brand);
  flex: 0 0 auto;
}
.retrieval-stepper__chevron {
  margin-left: auto;
  color: var(--text-3);
  transition: transform 200ms var(--ease);
}
.retrieval-stepper.is-open .retrieval-stepper__chevron {
  transform: rotate(180deg);
}
.retrieval-stepper__body {
  display: none;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
}
.retrieval-stepper.is-open .retrieval-stepper__body {
  display: block;
  animation: fadeSlideUp 0.25s var(--ease) both;
}
.stepper-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  font-size: 0.78rem;
  color: var(--text-2);
  line-height: 1.5;
}
.stepper-step::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--brand);
}
.stepper-step:last-child { padding-bottom: 2px; }
.stepper-step strong {
  color: var(--text);
  font-weight: 600;
}
.stepper-step__time {
  margin-left: auto;
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-3);
}

/* --- Inline Citation Hover Tooltip ------------------------------------- */
.inline-citation {
  position: relative;
}
.citation-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  width: max-content;
  max-width: 320px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease, transform 160ms var(--ease);
  transform: translateX(-50%) translateY(4px);
}
.inline-citation:hover .citation-tooltip {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.citation-tooltip__section {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 4px;
}
.citation-tooltip__text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-2);
}
.citation-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--surface);
}

/* --- Document Filter Bar Enhancement ---------------------------------- */
.doc-filter__clear {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 22px;
  padding: 0 7px;
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-3);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color 130ms ease, border-color 130ms ease;
}
.doc-filter__clear:hover {
  color: var(--danger);
  border-color: var(--danger);
}
.doc-filter__count {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--text-3);
}

/* --- Character Count Styling ------------------------------------------ */
.composer__char-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
  min-width: 3em;
  text-align: right;
  transition: color 200ms ease;
}
.composer__char-count.is-near-limit {
  color: var(--warn);
}
.composer__char-count.is-at-limit {
  color: var(--danger);
  font-weight: 600;
}

/* --- Split-Screen Mode (Desktop >=1280px) ----------------------------- */
@media (min-width: 1280px) {
  .shell.split-screen .main {
    display: grid;
    grid-template-columns: 1fr minmax(380px, 480px);
    grid-template-rows: auto 1fr;
  }
  .shell.split-screen .main__header {
    grid-column: 1 / -1;
  }
  .shell.split-screen .chat {
    grid-column: 1;
    grid-row: 2;
  }
  .shell.split-screen .citation-drawer {
    position: relative;
    grid-column: 2;
    grid-row: 2;
    visibility: visible;
    pointer-events: auto;
    z-index: 1;
  }
  .shell.split-screen .citation-drawer__scrim {
    display: none;
  }
  .shell.split-screen .citation-drawer__panel {
    position: relative;
    transform: none;
    width: 100%;
    border-left: 1px solid var(--line);
    box-shadow: none;
  }
}

/* --- Ingestion Progress Stages ---------------------------------------- */
.vault-item__stage {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand);
  animation: pulse 1.6s ease-in-out infinite;
}

/* --- Mobile adjustments for new features ------------------------------ */
@media (max-width: 820px) {
  .category-card__icon { width: 30px; height: 30px; font-size: 0.9rem; }
  .category-card { padding: 11px 13px; font-size: 0.84rem; }
  .retrieval-stepper__toggle { font-size: 0.72rem; }
  .citation-tooltip { display: none; }
  .sidebar__search-input { height: 32px; }
  .vault__bulk-actions { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .category-card::before { display: none; }
  .category-card:hover { transform: none !important; }
  .retrieval-stepper__body { animation: none !important; }
}

/* --- Interactive Doc Chip ---------------------------------------------- */
.doc-chip {
  cursor: pointer;
  transition: all 140ms ease;
}
.doc-chip:hover {
  background: var(--surface);
  border-color: var(--brand);
  box-shadow: 0 0 10px rgba(129, 140, 248, 0.12);
}

/* --- Empty State Quick-Action Pills ----------------------------------- */
.empty-state__quick-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
.quick-action-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all 140ms cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}
.quick-action-pill svg {
  flex-shrink: 0;
  color: var(--brand);
  transition: transform 140ms ease;
}
.quick-action-pill:hover {
  background: var(--brand-tint);
  border-color: var(--brand);
  color: var(--text);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(129, 140, 248, 0.18);
}
.quick-action-pill:hover svg {
  transform: scale(1.12);
}
.quick-action-pill:active {
  transform: translateY(0);
}

/* --- Floating Jump-to-Bottom Button ----------------------------------- */
.scroll-down-btn {
  position: sticky;
  bottom: 14px;
  align-self: center;
  margin: 10px auto 4px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  background: rgba(17, 24, 39, 0.92);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--text-2);
  font-family: var(--font-ui);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 10px rgba(129, 140, 248, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 20;
  transition: all 160ms cubic-bezier(0.16, 1, 0.3, 1);
  animation: scrollDownFloat 2.2s ease-in-out infinite alternate;
}
@keyframes scrollDownFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-3px); }
}
.scroll-down-btn svg {
  color: var(--brand);
  transition: transform 140ms ease;
}
.scroll-down-btn:hover {
  background: var(--surface-2);
  border-color: var(--brand);
  color: var(--text);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 14px rgba(129, 140, 248, 0.3);
}
.scroll-down-btn:hover svg {
  transform: translateY(2px);
}
.scroll-down-btn[hidden] {
  display: none !important;
}

/* --- Keyboard Shortcuts Cheat Sheet ------------------------------------ */
.shortcuts-modal__card {
  max-width: 480px;
  width: 92vw;
}
.shortcuts-grid {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 16px 0 14px;
}
.shortcut-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--text-2);
}
.shortcut-key {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2.5px 8px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xs);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.4);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--brand);
  letter-spacing: 0.02em;
}

/* --- Message Stats Tag (Word count & estimated read time) -------------- */
.msg__stats-tag {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-3);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  user-select: none;
  letter-spacing: 0.02em;
}

/* --- In-Chat Message Search Bar ---------------------------------------- */
.chat-search {
  position: relative;
  z-index: 15;
  padding: 8px 16px;
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: slideDownSearch 160ms ease-out both;
}
@keyframes slideDownSearch {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.chat-search[hidden] {
  display: none !important;
}
.chat-search__inner {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 640px;
  margin: 0 auto;
  padding: 5px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  transition: border-color 140ms ease;
}
.chat-search__inner:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand-tint);
}
.chat-search__inner svg {
  color: var(--text-3);
  flex-shrink: 0;
}
.chat-search__inner input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 0.84rem;
  color: var(--text);
}
.chat-search__inner input::placeholder {
  color: var(--text-3);
}
.chat-search__count {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-3);
  white-space: nowrap;
}
.chat-search__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: all 120ms ease;
}
.chat-search__btn:hover {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--text);
}
.chat-search__btn--close:hover {
  background: color-mix(in srgb, var(--danger, #ef4444) 15%, transparent);
  color: var(--danger, #ef4444);
}
mark.chat-search-highlight {
  background: rgba(245, 158, 11, 0.35);
  color: inherit;
  border-radius: 2px;
  padding: 0 2px;
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.4);
}
mark.chat-search-highlight--active {
  background: rgba(245, 158, 11, 0.85);
  color: #000;
  font-weight: 600;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.9);
}

/* --- Prompt Save Modal ------------------------------------------------- */
.modal__label {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 6px;
}
#prompt-save-modal textarea {
  border-radius: var(--radius-md);
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 0.88rem;
  line-height: 1.5;
}
#prompt-save-modal textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand-tint);
}
/* ------------------------------------------------------------------
   Data sources panel (PDFs, URLs, spreadsheets, database connections)

   A single management surface for every source type. It reuses the
   existing design tokens (surface, line, brand, danger, ok, warn) so it
   reads as part of the app rather than a second design language.
   ------------------------------------------------------------------ */
.ds-modal {
  max-width: 940px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.ds-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 22px 14px;
  border-bottom: 1px solid var(--line);
}
.ds-head__text h3 { margin: 0 0 4px; }
.ds-head__text p {
  margin: 0;
  font-size: 0.84rem;
  color: var(--text-2);
  line-height: 1.5;
}
.ds-head__close { margin-left: auto; }
.ds-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--sunken);
}
.ds-toolbar__spacer { flex: 1 1 auto; }
.ds-toolbar .btn { min-height: 34px; padding: 6px 11px; font-size: 0.82rem; }
.ds-body {
  padding: 16px 22px 22px;
  overflow-y: auto;
  flex: 1 1 auto;
}
.ds-note {
  margin: 0 0 14px;
  padding: 9px 12px;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-md);
  background: var(--accent-bg);
  color: var(--accent-text);
  font-size: 0.8rem;
  line-height: 1.5;
}
.ds-empty {
  padding: 34px 16px;
  text-align: center;
  color: var(--text-2);
  font-size: 0.88rem;
}
.ds-empty strong { display: block; margin-bottom: 6px; color: var(--text); }

.ds-group + .ds-group { margin-top: 22px; }
.ds-group__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3, var(--text-2));
}
.ds-group__count {
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--sunken);
  color: var(--text-2);
  font-size: 0.68rem;
  letter-spacing: 0;
}

.ds-list { display: grid; gap: 8px; }
.ds-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease);
}
.ds-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-card); }
.ds-card.is-failed { border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }
.ds-card.is-disabled { opacity: 0.72; }
.ds-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  background: var(--sunken);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ds-card__badge--xl { background: #dcfce7; color: #166534; }
.ds-card__badge--db { background: #e0e7ff; color: #3730a3; }
.ds-card__badge--url { background: #cffafe; color: #155e75; }
.ds-card__badge--pdf { background: var(--danger-tint); color: var(--danger); }
.ds-card__main { min-width: 0; }
.ds-card__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  font-weight: 650;
  font-size: 0.92rem;
  color: var(--text);
  overflow-wrap: anywhere;
}
.ds-card__sub {
  margin-top: 3px;
  font-size: 0.78rem;
  color: var(--text-2);
  overflow-wrap: anywhere;
}
.ds-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 7px;
  font-size: 0.74rem;
  color: var(--text-2);
}
.ds-card__meta span { white-space: nowrap; }
.ds-card__error {
  margin-top: 7px;
  padding: 6px 9px;
  border-radius: var(--radius-sm);
  background: var(--danger-tint);
  color: var(--danger);
  font-size: 0.76rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.ds-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
}
.ds-card__actions .btn { min-height: 30px; padding: 4px 9px; font-size: 0.76rem; }
.ds-card__actions .icon-btn--tiny { width: 30px; height: 30px; }

.ds-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 2px 6px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--sunken);
  color: var(--text-2);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.02em;
}
.ds-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.ds-status--ready { border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); background: #ecfdf5; color: var(--ok); }
.ds-status--queued,
.ds-status--validating,
.ds-status--connected { border-color: var(--line-strong); color: var(--brand); background: var(--brand-tint); }
.ds-status--indexing,
.ds-status--refreshing { border-color: var(--line-strong); color: var(--brand); background: var(--brand-tint); }
.ds-status--indexing::before,
.ds-status--refreshing::before,
.ds-status--validating::before { animation: ds-pulse 1.1s ease-in-out infinite; }
.ds-status--failed { border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); background: var(--danger-tint); color: var(--danger); }
.ds-status--disabled { border-color: var(--line); background: var(--sunken); color: var(--text-2); }
@keyframes ds-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.8); }
}

/* Shared layout inside the wizard modals */
.ds-wizard { max-width: 620px; }
.ds-wizard .modal__hint { margin-bottom: 12px; }
.ds-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  padding: 3px;
  border-radius: var(--radius-md);
  background: var(--sunken);
}
.ds-tab {
  flex: 1 1 0;
  padding: 7px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.ds-tab.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-card); }
.ds-field { display: block; margin-bottom: 10px; }
.ds-field > span {
  display: block;
  margin-bottom: 4px;
  font-size: 0.76rem;
  font-weight: 650;
  color: var(--text-2);
}
.ds-field input,
.ds-field select {
  width: 100%;
  min-height: 38px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
}
.ds-field input:focus,
.ds-field select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); }
.ds-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ds-row--3 { grid-template-columns: 2fr 1fr; }
.ds-result {
  margin: 10px 0 0;
  padding: 9px 11px;
  border-radius: var(--radius-md);
  font-size: 0.8rem;
  line-height: 1.5;
}
.ds-result--ok { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.ds-result--bad { background: var(--danger-tint); color: var(--danger); border: 1px solid #f5c2c0; }
.ds-check-list {
  max-height: 210px;
  overflow-y: auto;
  margin: 4px 0 12px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.ds-check {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 5px 6px;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  cursor: pointer;
}
.ds-check:hover { background: var(--sunken); }
.ds-check input { margin: 2px 0 0; }
.ds-check small { display: block; color: var(--text-2); font-size: 0.74rem; }
.ds-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 14px;
}
.ds-actions-row .ds-actions-row__left { margin-right: auto; }

.ds-preview { max-width: 860px; width: 100%; }
.ds-preview__table-wrap {
  max-height: 46vh;
  overflow: auto;
  margin: 10px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.ds-table { border-collapse: collapse; width: 100%; font-size: 0.78rem; }
.ds-table th,
.ds-table td {
  padding: 6px 9px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-table th {
  position: sticky;
  top: 0;
  background: var(--sunken);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}
.ds-table td.ds-table__rowno { font-family: var(--font-mono); color: var(--text-2); }
.ds-table tr:nth-child(even) td { background: color-mix(in srgb, var(--sunken) 45%, transparent); }
.ds-warn {
  margin: 6px 0;
  padding: 6px 9px;
  border-left: 3px solid var(--warn);
  background: var(--accent-bg);
  color: var(--accent-text);
  font-size: 0.76rem;
  line-height: 1.45;
}
.ds-spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 6px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: ds-spin 700ms linear infinite;
  vertical-align: -2px;
}
@keyframes ds-spin { to { transform: rotate(360deg); } }

@media (max-width: 720px) {
  .ds-card { grid-template-columns: auto 1fr; }
  .ds-card__actions { grid-column: 1 / -1; justify-content: flex-start; }
  .ds-row,
  .ds-row--3 { grid-template-columns: 1fr; }
  .ds-modal { max-height: 94vh; }
}
@media (prefers-reduced-motion: reduce) {
  .ds-status::before,
  .ds-spinner { animation: none; }
}