/* 20-design-system.css — QUAD core primitives ported from library/.
 *
 * The `library/` folder is the authoritative design language for this project
 * (pure black + copper, square corners, hairline borders, inset bezel
 * shadows, monospace micro-labels). The app's legacy `.btn-fill` /
 * `.btn-outline` classes are large, uppercase and glow-heavy; the library
 * components are compact, hardware-like and precise.
 *
 * This file introduces the library primitives under a `ql-` (QUAD library)
 * namespace so existing app styles keep working while new surfaces — and
 * migrated ones — can adopt the library language without a flag day.
 *
 * Sources:
 *   library/_shared/tokens.css   → token values (already in :root)
 *   library/_shared/base.css     → reset, focus ring, selection
 *   library/button/style.css     → .ql-btn family
 *   library/input-text/style.css → .ql-input family
 *   library/infokey-word/style.css → .ql-ik-word / .ql-ik-card
 *   library/bipass-card/style.css → .ql-bp family
 */

/* ── base ──────────────────────────────────────────────── */
::selection { background: var(--c-accent-wash); color: var(--c-ink); }

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* Library tokens the app was missing. */
:root {
  --shadow-inset-light: inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 -1px 0 rgba(0, 0, 0, 0.4);
  --shadow-inset-bezel: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.4),
                        inset 1px 0 0 rgba(255, 255, 255, 0.10), inset -1px 0 0 rgba(255, 255, 255, 0.10);
  --shadow-inset-deep: inset 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 -1px 0 rgba(255, 255, 255, 0.08);
  --shadow-outer-soft: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-outer-strong: 0 8px 24px rgba(0, 0, 0, 0.5);
  --border-3: rgba(255, 255, 255, 0.14);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-snap: cubic-bezier(0.8, 0, 1, 1);
  --spring: 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --r-1: 2px;
  --r-2: 4px;
}

/* ── button (.ql-btn ← library/button) ─────────────────── */
.ql-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  font: 700 11px var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid var(--border-2);
  background: rgba(255, 255, 255, 0.02);
  color: var(--c-ink);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border-radius: 0;
  transition: background 150ms var(--ease), color 150ms var(--ease),
              border-color 150ms var(--ease), transform 220ms var(--ease),
              box-shadow 220ms var(--ease);
}
.ql-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, transparent 50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms;
}
.ql-btn:hover {
  background: rgba(204, 144, 80, 0.10);
  border-color: var(--border-accent);
  color: var(--c-ink);
}
.ql-btn:hover::before { opacity: 1; }
.ql-btn:active { transform: translateY(1px); }
.ql-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.ql-btn--primary {
  background: linear-gradient(180deg, #d4a86a 0%, #cc9050 60%, #b87c40 100%);
  color: #000;
  border-color: var(--c-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30),
              inset 0 -1px 0 rgba(0, 0, 0, 0.30),
              0 1px 2px rgba(0, 0, 0, 0.4);
}
.ql-btn--primary:hover {
  background: linear-gradient(180deg, #e0b878 0%, #d4a86a 60%, #cc9050 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.40),
              inset 0 -1px 0 rgba(0, 0, 0, 0.30),
              0 0 0 1px var(--c-accent-glow),
              0 0 16px var(--c-accent-glow);
}
.ql-btn--primary:active { background: linear-gradient(180deg, #b87c40 0%, #cc9050 100%); }

.ql-btn--ghost { background: transparent; border-color: var(--border-2); }
.ql-btn--ghost:hover { background: rgba(255, 255, 255, 0.04); border-color: var(--border-accent); }

.ql-btn--danger {
  color: var(--c-bad);
  border-color: rgba(224, 82, 82, 0.32);
  background: rgba(224, 82, 82, 0.06);
}
.ql-btn--danger:hover {
  background: rgba(224, 82, 82, 0.16);
  border-color: var(--c-bad);
  color: var(--c-bad);
  box-shadow: 0 0 16px rgba(224, 82, 82, 0.20);
}

.ql-btn--sm { height: 24px; padding: 0 10px; font-size: 10px; }
.ql-btn--icon { width: 36px; padding: 0; }
.ql-btn--icon.ql-btn--sm { width: 24px; }

.ql-btn--anim-rise:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--c-accent), 0 6px 16px rgba(204, 144, 80, 0.20); }
.ql-btn--anim-glow:hover { box-shadow: 0 0 24px var(--c-accent-glow), inset 0 0 0 1px var(--c-accent); }
.ql-btn--anim-press:hover { transform: translateY(0); }
.ql-btn--anim-press:active { transform: translateY(2px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5); }

/* ── input (.ql-input ← library/input-text) ────────────── */
.ql-input {
  width: 100%;
  display: block;
  padding: 8px 12px;
  font: 500 14px var(--body);
  color: var(--c-ink);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-2);
  border-radius: 0;
  outline: none;
  transition: background 150ms, border-color 150ms, box-shadow 220ms var(--ease);
  box-shadow: var(--shadow-inset-light);
}
.ql-input::placeholder { color: var(--c-ink-faint); }
.ql-input:hover { background: rgba(255, 255, 255, 0.04); border-color: var(--border-3); }
.ql-input:focus {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--c-accent);
  box-shadow: 0 0 0 1px var(--c-accent), 0 0 12px var(--c-accent-glow), var(--shadow-inset-light);
}
.ql-input:disabled { opacity: 0.3; cursor: not-allowed; }

.ql-input--sm { padding: 6px 8px; font: 500 11px var(--mono); }
.ql-input--mono { font-family: var(--mono); }

/* ── legacy .btn-fill / .btn-outline → library language ───
   The app still has ~55 call sites using the old classes. Rather than
   rewriting every call site, the legacy classes are restyled here to
   match library/button/style.css: square, hairline-bordered, hardware
   bezel, monospace micro-label, precise hover (no lift, no glow bloom).

   Only the VISUAL language changes. Width / padding are left alone
   because many call sites rely on the old `width:100%` and inline
   padding overrides.

   Loaded after the inline <style> in index.html so it wins. */
.btn-fill,
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font: 700 11px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background 150ms var(--ease), color 150ms var(--ease),
              border-color 150ms var(--ease), transform 220ms var(--ease),
              box-shadow 220ms var(--ease);
}

.btn-fill {
  background: linear-gradient(180deg, #d4a86a 0%, #cc9050 60%, #b87c40 100%);
  color: #000;
  border: 1px solid var(--c-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30),
              inset 0 -1px 0 rgba(0, 0, 0, 0.30),
              0 1px 2px rgba(0, 0, 0, 0.4);
}
.btn-fill:hover {
  background: linear-gradient(180deg, #e0b878 0%, #d4a86a 60%, #cc9050 100%);
  transform: none;
  filter: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.40),
              inset 0 -1px 0 rgba(0, 0, 0, 0.30),
              0 0 0 1px var(--c-accent-glow),
              0 0 16px var(--c-accent-glow);
}
.btn-fill:active {
  background: linear-gradient(180deg, #b87c40 0%, #cc9050 100%);
  transform: translateY(1px);
}

.btn-outline {
  background: rgba(255, 255, 255, 0.02);
  color: var(--c-ink);
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow-inset-light);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.btn-outline:hover {
  background: rgba(204, 144, 80, 0.10);
  border-color: var(--border-accent);
  color: var(--c-ink);
  transform: none;
  box-shadow: var(--shadow-inset-light), 0 0 12px var(--c-accent-wash);
}
.btn-outline:active { transform: translateY(1px); }

/* ── toast variants (the app stylesheet has success/error/info only) ── */
.toast.warn::before { background: linear-gradient(90deg, var(--c-warn, #d4a050), #e8c88a); }
.toast.warn .toast-icon { color: var(--c-warn, #d4a050); }
.toast.warn { border-color: rgba(212, 160, 80, 0.32); }

/* ── select (.ql-select ← library/select) ───────────────── */
.ql-select {
  width: 100%;
  display: block;
  padding: 8px 12px;
  font: 500 14px var(--body);
  color: var(--c-ink);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-2);
  border-radius: 0;
  outline: none;
  transition: background 150ms, border-color 150ms, box-shadow 220ms var(--ease);
  box-shadow: var(--shadow-inset-light);
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--c-ink-dim) 50%),
    linear-gradient(135deg, var(--c-ink-dim) 50%, transparent 50%);
  background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 30px;
}
.ql-select:hover { background-color: rgba(255, 255, 255, 0.04); border-color: var(--border-3); }
.ql-select:focus {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: var(--c-accent);
  box-shadow: 0 0 0 1px var(--c-accent), 0 0 12px var(--c-accent-glow), var(--shadow-inset-light);
}
.ql-select:disabled { opacity: 0.3; cursor: not-allowed; }
.ql-select--sm { padding: 6px 8px; font: 500 11px var(--mono); padding-right: 26px; }
.ql-select--mono { font-family: var(--mono); }

.ql-select option {
  background: var(--surface-2, #18181c);
  color: var(--c-ink, #f0eadd);
}

/* ── legacy .settings-input / .settings-select → library bezel ── */
.settings-input,
.settings-select {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-2);
  color: var(--c-ink);
  border-radius: 0;
  box-shadow: var(--shadow-inset-light);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background 150ms, border-color 150ms, box-shadow 220ms var(--ease);
}
.settings-input:hover,
.settings-select:hover { background: rgba(255, 255, 255, 0.04); border-color: var(--border-3); }
.settings-input:focus,
.settings-select:focus {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--c-accent);
  outline: none;
  box-shadow: 0 0 0 1px var(--c-accent), 0 0 12px var(--c-accent-glow), var(--shadow-inset-light);
}

/* ── card (.ql-card ← library/card) ─────────────────────── */
.ql-card {
  padding: 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow-inset-light);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background 150ms, border-color 150ms;
}
.ql-card:hover { background: rgba(255, 255, 255, 0.035); }
.ql-card--glass {
  background: rgba(10, 10, 14, 0.6);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}
.ql-card--accent { border-color: var(--border-accent); background: var(--c-accent-wash); }
.ql-card--locked { opacity: 0.5; cursor: not-allowed; }
.ql-card h3 {
  margin: 0;
  font: 700 13px var(--body);
  color: var(--c-ink);
}
.ql-card p {
  margin: 0;
  font: 500 11px/1.5 var(--body);
  color: var(--c-ink-dim);
}
.ql-card .foot {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}

/* ── tag (.ql-tag ← library/tag) ────────────────────────── */
.ql-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  font: 700 9px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-dim);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-2);
}
.ql-tag--copper {
  color: var(--c-accent-bright);
  background: var(--c-accent-wash);
  border-color: var(--border-accent);
}
.ql-tag--good { color: var(--c-good); background: var(--c-good-wash); border-color: rgba(92, 184, 122, 0.28); }
.ql-tag--warn { color: var(--c-warn); background: rgba(212, 160, 80, 0.10); border-color: rgba(212, 160, 80, 0.28); }
.ql-tag--bad  { color: var(--c-bad);  background: var(--c-bad-wash);  border-color: rgba(224, 82, 82, 0.30); }
.ql-tag--sm { padding: 2px 6px; font-size: 8px; letter-spacing: 0.12em; }
.ql-tag--lg { padding: 5px 11px; font-size: 10px; }
.ql-tag--dot::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}

/* ── settings chip → library tag ────────────────────────── */
.settings-chip {
  font: 700 9px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-2);
  color: var(--c-ink-dim);
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background 150ms, border-color 150ms, color 150ms;
}
.settings-chip:hover {
  background: var(--c-accent-wash);
  border-color: var(--border-accent);
  color: var(--c-ink);
}

/* ── settings row → library data row ───────────────────── */
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
.settings-row:last-child { border-bottom: none; }
.settings-row label { font: 500 11px var(--body); color: var(--c-ink-dim); }
.settings-row span { font: 500 11px var(--body); color: var(--c-ink); text-align: right; }

/* ── settings skill item → library list row ────────────── */
.settings-skill-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.settings-skill-item:last-child { border-bottom: none; }

/* ── mode switcher (side tab) → library/segmented ───────── */
.mode-carousel { gap: 0; }
.mode-carousel-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border-2);
  border-right-width: 0;
  background: rgba(255, 255, 255, 0.02);
  color: var(--c-ink-dim);
  cursor: pointer;
  font: 700 10px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 150ms, color 150ms, border-color 150ms;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.mode-carousel-item:last-child { border-right-width: 1px; }
.mode-carousel-item:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-2);
  color: var(--c-ink);
}
.mode-carousel-item.active {
  color: var(--c-accent);
  background: linear-gradient(180deg, rgba(204, 144, 80, 0.18) 0%, rgba(204, 144, 80, 0.10) 100%);
  border-color: var(--border-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}
.mode-carousel-item .material-symbols-rounded { font-size: 15px; }

/* ── side tab config body → library context panel ──────── */
.side-tab-config-body,
.reasoning-slider-section {
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--border-2);
  border-top: none;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--shadow-inset-deep);
}
.side-tab-config-body .config-group-label,
.reasoning-slider-section .config-group-label {
  font: 700 10px var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
}
.side-tab-config-body .config-group-value {
  font: 700 10px var(--mono);
  letter-spacing: 0.10em;
  color: var(--c-accent);
  background: var(--c-accent-wash);
  padding: 2px 10px;
  border: 1px solid var(--border-accent);
}
.side-tab-config-body .premium-select {
  background: var(--bg);
  color: var(--c-ink);
  border: 1px solid var(--border-2);
  padding: 6px 10px;
  font: 500 12px var(--body);
}
.side-tab-config-body .premium-select:focus {
  border-color: var(--c-accent);
  outline: none;
  box-shadow: 0 0 0 1px var(--c-accent), 0 0 12px var(--c-accent-glow);
}

/* ── DataChaos toggle → library/segmented ──────────────── */
.dc-toggle {
  display: flex;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--border-2);
  background: rgba(255, 255, 255, 0.02);
  box-shadow: var(--shadow-inset-deep);
}
.dc-opt {
  flex: 1;
  padding: 6px 4px;
  border: none;
  border-right: 1px solid var(--border-2);
  background: transparent;
  color: var(--c-ink-dim);
  cursor: pointer;
  font: 700 10px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 150ms, color 150ms;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.dc-opt:last-child { border-right: none; }
.dc-opt:hover { color: var(--c-ink); background: rgba(255, 255, 255, 0.04); }
.dc-opt.active {
  color: var(--c-accent);
  background: linear-gradient(180deg, rgba(204, 144, 80, 0.18) 0%, rgba(204, 144, 80, 0.10) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}
.dc-opt.disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
.dc-hint { font: 500 11px/1.4 var(--body); color: var(--c-ink-dim); margin-top: 6px; min-height: 16px; }
.dc-key-wrap { display: flex; gap: 6px; margin-top: 8px; align-items: center; }
.dc-key-wrap input.ql-input {
  flex: 1;
  width: auto;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-2);
  color: var(--c-ink);
  padding: 6px 10px;
  font: 500 11px var(--mono);
  outline: none;
  box-shadow: var(--shadow-inset-light);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.dc-key-wrap input.ql-input:hover { background: rgba(255, 255, 255, 0.04); border-color: var(--border-3); }
.dc-key-wrap input.ql-input:focus {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--c-accent);
  box-shadow: 0 0 0 1px var(--c-accent), 0 0 12px var(--c-accent-glow), var(--shadow-inset-light);
}
.dc-key-wrap input::placeholder { color: var(--c-ink-faint); font-size: 10px; }

/* ── side tab (config panel) → library/context-panel ───── */
.side-tab {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-left: 1px solid var(--border-2);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.5);
  transition: transform 220ms var(--ease);
}
.side-tab-label {
  font: 700 10px var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
}
.side-tab-header { border-bottom: 1px solid var(--border); }
/* Each section is a library/composer-plus-popover glass cell. */
.side-tab-section {
  margin-bottom: 8px;
  padding: 10px;
  background: rgba(15,18,30,0.6);
  border: 1px solid var(--border-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 8px 24px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  gap: 8px;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}
.side-tab-section .mode-carousel,
.side-tab-section .model-carousel,
.side-tab-section .dc-toggle {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  overflow: visible;
  padding-bottom: 0;
}
.side-tab-section .mode-carousel-item,
.side-tab-section .model-carousel-item,
.side-tab-section .dc-opt {
  border: 1px solid var(--border-2) !important;
  border-right-width: 1px !important;
  border-radius: 0 !important;
  background: rgba(255,255,255,0.04) !important;
  color: var(--c-ink-dim) !important;
  display: grid !important;
  place-items: center !important;
  gap: 4px !important;
  padding: 8px !important;
  min-height: 44px;
  font: 500 11px var(--mono) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: background 150ms, color 150ms, border-color 150ms !important;
}
.side-tab-section .mode-carousel-item:hover,
.side-tab-section .model-carousel-item:hover,
.side-tab-section .dc-opt:hover {
  background: var(--c-accent-wash) !important;
  border-color: var(--border-accent) !important;
  color: var(--c-ink) !important;
}
.side-tab-section .mode-carousel-item.active,
.side-tab-section .model-carousel-item.active,
.side-tab-section .dc-opt.active {
  background: var(--c-accent) !important;
  border-color: var(--c-accent) !important;
  color: #000 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), 0 0 0 1px var(--c-accent) !important;
}
.side-tab-section .mode-carousel-item .material-symbols-rounded,
.side-tab-section .model-carousel-item .material-symbols-rounded { font-size: 16px !important; }
.side-tab-section .dc-hint {
  font: 500 11px var(--body);
  color: var(--c-ink-dim);
}
.side-tab-section .dc-toggle { grid-template-columns: repeat(3, 1fr); }
.side-tab-section .dc-key-wrap { width: 100%; }

.side-tab-action-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 0;
  border: 1px solid var(--border-2);
  background: rgba(255, 255, 255, 0.02);
  color: var(--c-ink);
  cursor: pointer;
  font: 500 13px var(--body);
  transition: background 150ms var(--ease), border-color 150ms var(--ease),
              color 150ms var(--ease), box-shadow 220ms var(--ease);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-inset-light);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.side-tab-action-btn:hover {
  background: var(--c-accent-wash);
  border-color: var(--border-accent);
  color: var(--c-ink);
  box-shadow: var(--shadow-inset-light), 0 0 16px var(--c-accent-wash);
}
.side-tab-action-btn .material-symbols-rounded { font-size: 20px; }

/* The memory indicator in the side-tab footer is a button now. */
.side-tab-memory-status {
  font: 700 10px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-accent);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
  transition: color 150ms;
}
.side-tab-memory-status:hover { color: var(--c-accent-bright); }

/* ── settings surface → library card language ───────────── */
.settings-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow-inset-light);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background 150ms var(--ease), border-color 150ms var(--ease);
}
.settings-card:hover {
  background: rgba(255, 255, 255, 0.035);
  border-color: var(--border-accent);
}
.settings-section-title {
  font: 700 10px var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-dim);
}

/* ── icon button (.ql-icbtn ← library/icon-button) ──────── */
.ql-icbtn {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-2);
  border-radius: 0;
  color: var(--c-ink-dim);
  cursor: pointer;
  position: relative;
  transition: background 150ms, border-color 150ms, color 150ms, transform 220ms var(--ease);
  box-shadow: var(--shadow-inset-light);
}
.ql-icbtn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, transparent 50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms;
}
.ql-icbtn:hover {
  color: var(--c-ink);
  border-color: var(--border-accent);
  background: rgba(255, 255, 255, 0.04);
}
.ql-icbtn:hover::before { opacity: 1; }
.ql-icbtn:active { transform: translateY(1px); }
.ql-icbtn .material-symbols-rounded { font-size: 15px; line-height: 1; }
.ql-icbtn--accent { color: var(--c-accent); }
.ql-icbtn--accent:hover {
  color: var(--c-accent-bright);
  border-color: var(--c-accent);
  background: var(--c-accent-wash);
}

/* ── send button (.ql-send ← library/send-button) ───────── */
.ql-send {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  background: linear-gradient(180deg, #d4a86a 0%, #cc9050 60%, #b87c40 100%);
  border: 1px solid var(--c-accent);
  color: #000;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30),
              inset 0 -1px 0 rgba(0, 0, 0, 0.30),
              0 1px 2px rgba(0, 0, 0, 0.4);
  transition: background 150ms, box-shadow 220ms var(--ease), transform 220ms var(--ease);
}
.ql-send:hover {
  background: linear-gradient(180deg, #e0b878 0%, #d4a86a 60%, #cc9050 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.40),
              0 0 0 1px var(--c-accent-glow),
              0 0 16px var(--c-accent-glow);
}
.ql-send:active { transform: translateY(1px); }
.ql-send:disabled { opacity: 0.35; cursor: not-allowed; }
.ql-send .material-symbols-rounded { font-size: 18px; }

/* ── dock button (.ql-db ← library/dock-button) ─────────── */
.ql-db {
  width: 56px;
  height: 56px;
  display: inline-grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-2);
  color: var(--c-ink-dim);
  cursor: pointer;
  position: relative;
  transition: background 150ms, border-color 150ms, color 150ms, transform 220ms var(--ease);
  box-shadow: var(--shadow-inset-light);
}
.ql-db::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, transparent 50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms;
}
.ql-db:hover, .ql-db.is-hover {
  color: var(--c-ink);
  border-color: var(--border-accent);
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-1px);
}
.ql-db:hover::before, .ql-db.is-hover::before { opacity: 1; }
.ql-db.is-active {
  color: var(--c-accent);
  border-color: var(--c-accent);
  background: rgba(204, 144, 80, 0.10);
}
.ql-db .material-symbols-rounded { font-size: 22px; }

/* ── panel / card (.ql-panel ← library demo card) ──────── */.ql-panel {
  padding: 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow-inset-light);
}

/* ── micro label (.ql-lbl) ─────────────────────────────── */
.ql-lbl {
  font: 700 10px var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
}

/* ── inline title (.ql-title) ──────────────────────────── */
.ql-title {
  font: 700 11px var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink);
}

/* ── hairline divider (.ql-rule) ───────────────────────── */
.ql-rule {
  height: 1px;
  background: var(--border);
  border: 0;
  margin: 12px 0;
}

/* ── infokey word (.ql-ik-word ← library/infokey-word) ── */
.ql-ik-word {
  position: relative;
  cursor: help;
  color: var(--c-ink);
  text-decoration: underline solid var(--c-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness 220ms var(--spring);
}
.ql-ik-word:hover,
.ql-ik-word.is-hover { text-decoration-thickness: 3px; }
.ql-ik-word.is-pinned { text-decoration-thickness: 3px; }

.ql-ik-card {
  position: absolute;
  z-index: 10;
  max-width: 320px;
  padding: 10px 12px;
  background: rgba(10, 10, 14, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-accent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  font: 500 12px var(--body);
  color: var(--c-ink);
  line-height: 1.5;
}

/* ── bipass card (.ql-bp ← library/bipass-card) ─────────── */
.ql-bp {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 240px;
  padding: 6px;
  background: rgba(15, 18, 30, 0.85);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow-inset-bezel), 0 12px 32px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  pointer-events: none;
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
}
.ql-bp.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.ql-bp-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 10px;
  font: 500 12px var(--body);
  color: var(--c-ink);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: left;
  transition: background 150ms, border-color 150ms, color 150ms;
}
.ql-bp-opt:hover { background: var(--c-accent-wash); border-color: var(--border-accent); }
.ql-bp-opt.is-recommended { background: var(--c-accent-wash); border-color: var(--border-accent); }
.ql-bp-opt.is-recommended.is-active,
.ql-bp-opt.is-active { background: var(--c-accent); color: #000; border-color: var(--c-accent); }
.ql-bp-tag { font: 700 9px var(--mono); color: var(--c-accent-bright); letter-spacing: 0.16em; }
.ql-bp-opt.is-recommended.is-active .ql-bp-tag { color: #000; }
.ql-bp-opt:not(.is-recommended) .ql-bp-tag { display: none; }

.ql-bp-custom {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--border-2);
  margin-top: 2px;
}
.ql-bp-input {
  background: var(--bg);
  border: 1px solid var(--border-2);
  color: var(--c-ink);
  font: 500 11px var(--mono);
  padding: 6px 8px;
  outline: none;
}
.ql-bp-input:focus { border-color: var(--c-accent); }
.ql-bp-go {
  background: var(--c-accent);
  color: #000;
  border: 1px solid var(--c-accent);
  font: 700 9px var(--mono);
  letter-spacing: 0.16em;
  padding: 0 10px;
  cursor: pointer;
  transition: background 150ms;
}
.ql-bp-go:hover { background: var(--c-accent-bright); }

/* ── status dot (.ql-dot) ──────────────────────────────── */
.ql-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--c-ink-muted);
}
.ql-dot--ok { background: var(--c-good); box-shadow: 0 0 8px rgba(92, 184, 122, 0.5); }
.ql-dot--warn { background: var(--c-warn); box-shadow: 0 0 8px rgba(212, 160, 80, 0.5); }
.ql-dot--bad { background: var(--c-bad); box-shadow: 0 0 8px rgba(224, 82, 82, 0.5); }
.ql-dot--accent { background: var(--c-accent); box-shadow: 0 0 8px var(--c-accent-glow); }

/* ── scrollbar (library/scrollbar) ─────────────────────── */
.ql-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--border-3) transparent;
}
.ql-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.ql-scroll::-webkit-scrollbar-track { background: transparent; }
.ql-scroll::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border: 1px solid var(--border);
}
.ql-scroll::-webkit-scrollbar-thumb:hover { background: var(--border-accent); }

/* ── message bubble (.ql-msg ← library/message-bubble) ────
 * The library has exactly two bubble styles:
 *   .msg--user      → right-aligned, copper wash, 2px accent left edge
 *   .msg--assistant → left-aligned, plain text, no chrome
 * The app had a third, louder variant (glowing gradient panel). The
 * library language is quieter and hardware-like, so the user bubble is
 * reduced to a flat copper wash and the assistant bubble loses its glow.
 * ───────────────────────────────────────────────────────── */
.ql-msg {
  font: 500 14px/1.7 var(--body);
  padding: 10px 14px;
  max-width: 80%;
  margin: 0;
  position: relative;
}

.ql-msg--user {
  align-self: flex-end;
  background: var(--c-accent-wash);
  border: 1px solid var(--border-accent);
  border-left: 2px solid var(--c-accent);
  color: var(--c-ink);
  transition: background 150ms, border-color 150ms;
}
.ql-msg--user:hover { background: rgba(204, 144, 80, 0.16); }

.ql-msg--assistant {
  align-self: flex-start;
  background: transparent;
  border: 0;
  padding-left: 0;
  color: var(--c-ink);
}

/* ── response body (.ql-body ← library/body-text) ────────
 * The library reads at 500 14px/1.55. The app was at 15px/1.68 with
 * `white-space: pre-wrap`, which turned marked's inter-block newlines
 * into visible blank lines. The library uses normal whitespace and
 * lets the block margins do the spacing.
 * ───────────────────────────────────────────────────────── */
.ql-body {
  font: 500 14px/1.55 var(--body);
  color: var(--c-ink);
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}
.ql-body > :first-child { margin-top: 0; }
.ql-body > :last-child { margin-bottom: 0; }

.ql-body p { margin: 0 0 10px; }
.ql-body h1, .ql-body h2, .ql-body h3, .ql-body h4 {
  font-family: var(--body);
  color: var(--c-ink);
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 18px 0 8px;
}
.ql-body h1 { font: 700 22px/1.15 var(--body); }
.ql-body h2 { font: 600 16px/1.25 var(--body); }
.ql-body h3 {
  font: 700 10px/1.2 var(--mono);
  color: var(--c-ink-muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-2);
}
.ql-body h4 { font: 600 14px/1.25 var(--body); }

.ql-body strong { color: var(--c-ink); font-weight: 700; }
.ql-body em { font-style: italic; color: var(--c-ink-dim); }

.ql-body a {
  color: var(--c-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--border-accent);
  transition: color 150ms, border-color 150ms;
}
.ql-body a:hover { color: var(--c-accent-bright); border-bottom-color: var(--c-accent); }

.ql-body ul, .ql-body ol { margin: 0 0 10px; padding-left: 22px; }
.ql-body li { margin: 4px 0; line-height: 1.55; }
.ql-body li::marker { color: var(--c-accent); }

.ql-body blockquote {
  margin: 12px 0;
  padding: 8px 14px;
  border-left: 2px solid var(--c-accent-dim);
  background: var(--c-accent-wash);
  color: var(--c-ink-dim);
  font-style: italic;
}

.ql-body hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-accent-dim), transparent);
  margin: 16px 0;
}

.ql-body img { max-width: 100%; border: 1px solid var(--border-2); }

/* ── inline code (.ql-code ← library/code) ──────────────── */
.ql-body code, .ql-code {
  font: 500 12px var(--mono);
  color: var(--c-accent-bright);
  background: var(--c-accent-wash);
  border: 1px solid var(--border-accent);
  padding: 1px 4px;
}

/* ── code block (.ql-code-block ← library/code) ─────────── */
.ql-code-block {
  width: 100%;
  font: 500 12px/1.5 var(--mono);
  color: var(--c-ink);
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border-2);
  padding: 12px;
  margin: 12px 0;
  position: relative;
  white-space: pre-wrap;
  overflow-x: auto;
  box-shadow: var(--shadow-inset-deep);
}
.ql-code-block code { font: inherit; color: inherit; background: transparent; border: 0; padding: 0; }

/* ── table (.ql-table ← library) ─────────────────────────── */
.ql-body table { border-collapse: collapse; margin: 12px 0; width: 100%; font-size: 13px; }
.ql-body th {
  background: var(--c-accent-wash);
  color: var(--c-accent);
  text-align: left;
  padding: 7px 10px;
  border: 1px solid var(--border-2);
  font: 700 10px var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ql-body td { padding: 7px 10px; border: 1px solid var(--border-2); color: var(--c-ink-dim); }

/* ── legacy .msg / .response-content → library bubbles ────
 * The app builds bubbles with `class="msg user|bot"`. Restyling those
 * selectors migrates every call site at once (addMessage, streaming,
 * history replay) without touching a single line of app.js.
 * ───────────────────────────────────────────────────────── */
.msg {
  font: 500 14px/1.7 var(--body);
  padding: 10px 14px;
  max-width: min(85%, 780px);
  margin: 0;
  position: relative;
  animation: fadeUp 0.3s cubic-bezier(0.34, 1.3, 0.64, 1) both;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.msg.user {
  align-self: flex-end;
  background: var(--c-accent-wash);
  border: 1px solid var(--border-accent);
  border-left: 2px solid var(--c-accent);
  color: var(--c-ink);
  transition: background 150ms, border-color 150ms;
}
.msg.user:hover { background: rgba(204, 144, 80, 0.16); }
.msg.bot {
  align-self: flex-start;
  background: transparent;
  border: none;
  max-width: 100%;
  padding: 2px 0 2px 14px;
  box-shadow: -14px 0 26px -20px rgba(204, 144, 80, 0.9);
  border-left: 2px solid var(--c-accent-dim);
  margin-left: 6px;
}
body.nothing-light .msg.user {
  background: rgba(240, 234, 225, 0.95);
  border-color: rgba(0, 0, 0, 0.1);
}

/* The response body itself. `white-space: normal` is the fix for the
 * stray blank lines: marked puts a "\n" between every block, and
 * `pre-wrap` was rendering those newlines as visible gaps. */
.response-content, .streaming-content, .response-streaming {
  font: 500 14px/1.55 var(--body);
  color: var(--c-ink);
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  position: relative;
  contain: layout style;
  line-height: 1.55;
}
.response-content p, .streaming-content p, .response-streaming p { margin: 0 0 10px; }
.response-content > :last-child, .streaming-content > :last-child, .response-streaming > :last-child { margin-bottom: 0; }
.response-content h1, .response-content h2, .response-content h3, .response-content h4,
.streaming-content h1, .streaming-content h2, .streaming-content h3, .streaming-content h4,
.response-streaming h1, .response-streaming h2, .response-streaming h3, .response-streaming h4 {
  font-family: var(--body);
  color: var(--c-ink);
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 18px 0 8px;
}
.response-content h1, .streaming-content h1, .response-streaming h1 { font: 700 22px/1.15 var(--body); }
.response-content h2, .streaming-content h2, .response-streaming h2 { font: 600 16px/1.25 var(--body); }
.response-content h3, .streaming-content h3, .response-streaming h3 {
  font: 700 10px/1.2 var(--mono);
  color: var(--c-ink-muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-2);
}
.response-content h4, .streaming-content h4, .response-streaming h4 { font: 600 14px/1.25 var(--body); }
/* `.msg.bot strong` (specificity 0,1,1) sets a rainbow gradient with
 * `color: transparent`. The library wants plain ink, so the response
 * body needs the extra class to win. */
.msg .response-content strong, .msg .streaming-content strong, .msg .response-streaming strong {
  color: var(--c-ink);
  font-weight: 700;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  filter: none;
}
.response-content em, .streaming-content em, .response-streaming em { font-style: italic; color: var(--c-ink-dim); }
.response-content a, .streaming-content a, .response-streaming a {
  color: var(--c-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--border-accent);
  transition: color 150ms, border-color 150ms;
}
.response-content a:hover, .streaming-content a:hover, .response-streaming a:hover { color: var(--c-accent-bright); border-bottom-color: var(--c-accent); }
.response-content ul, .response-content ol,
.streaming-content ul, .streaming-content ol,
.response-streaming ul, .response-streaming ol { margin: 0 0 10px; padding-left: 22px; }
.response-content li, .streaming-content li, .response-streaming li { margin: 4px 0; line-height: 1.55; }
.response-content li::marker, .streaming-content li::marker, .response-streaming li::marker { color: var(--c-accent); }
.response-content blockquote, .streaming-content blockquote, .response-streaming blockquote {
  margin: 12px 0;
  padding: 8px 14px;
  border-left: 2px solid var(--c-accent-dim);
  background: var(--c-accent-wash);
  color: var(--c-ink-dim);
  font-style: italic;
}
.response-content hr, .streaming-content hr, .response-streaming hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-accent-dim), transparent);
  margin: 16px 0;
}
.response-content img, .streaming-content img, .response-streaming img { max-width: 100%; border: 1px solid var(--border-2); }

/* The app's own `.msg pre` / `.msg code` rules are louder than the
 * library; the library code block is a flat inset panel. */
.response-content code, .streaming-content code, .response-streaming code {
  font: 500 12px var(--mono);
  color: var(--c-accent-bright);
  background: var(--c-accent-wash);
  border: 1px solid var(--border-accent);
  padding: 1px 4px;
}
.response-content pre, .streaming-content pre, .response-streaming pre {
  font: 500 12px/1.5 var(--mono);
  color: var(--c-ink);
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border-2);
  padding: 12px;
  margin: 12px 0;
  overflow-x: auto;
  white-space: pre;
  box-shadow: var(--shadow-inset-deep);
}
.response-content pre code, .streaming-content pre code, .response-streaming pre code {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
}

/* ── empty / stopped placeholder ─────────────────────────── */
.msg-empty {
  font: 500 11px/1.4 var(--mono);
  color: var(--c-ink-muted);
  padding: 2px 0;
  font-style: italic;
}