/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Design tokens ── */
:root {
  /* surfaces */
  --bg-app:       #fbfaf8;
  --bg-surface:   #ffffff;
  --rule:         #e7e3db;
  --rule-strong:  #ddd9d1;
  --field-border: #cfd5d2;

  /* text */
  --ink:          #1c211f;
  --ink-body:     #22282a;
  --ink-strong:   #2b312e;
  --ink-muted:    #5c625f;
  --ink-muted-2:  #6c6f6a;
  --ink-faint:    #8a8d87;
  --ink-faintest: #9a9d97;
  --ink-hint:     #a3a69f;

  /* brand */
  --navy:         #194872;
  --navy-tint:    #eef3f7;
  --teal:         #00a0b0;
  --teal-ink:     #00808c;
  --teal-tint:    #e2f2f4;
  --on-teal:      #03222a;

  /* dark (sign-in only) */
  --dark-bg:          #101b25;
  --dark-surface:     #16232f;
  --dark-border:      #2b3b48;
  --dark-focus:       #00a0b0;
  --dark-ink:         #ffffff;
  --dark-ink-muted:   #93a0ab;
  --dark-ink-label:   #8fa0ad;
  --dark-ink-faint:   #6f7f8b;
  --dark-accent:      #4fc4d1;

  /* status */
  --ok:     #2f7d5b;
  --warn:   #a86a1f;
  --err-c:  #9a4a4a;

  /* radii */
  --r-sm:     6px;
  --r-md:     8px;
  --r-lg:     10px;
  --r-pill:   999px;

  /* shadows */
  --shadow-panel: -24px 0 48px -32px rgba(25,72,114,.35);
  --shadow-panel-left: 24px 0 48px -32px rgba(25,72,114,.35);

  /* layout */
  --topbar-h:    60px;
  --filterbar-h: 52px;
  --chrome-h:    112px;
  --col-w:       1000px;
  --gutter:      40px;
  --panel-w:     420px;
  --sidebar-w:   clamp(240px, 20vw, 300px);

  --font: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", "Menlo", "Consolas", monospace;
}

html, body {
  height: 100%;
  font-family: var(--font);
  font-size: 15px;
  color: var(--ink-body);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
}

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

/* ══════════════════════════════════════════
   TOP BAR  (60px)
   ══════════════════════════════════════════ */
.top-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--rule);
  z-index: 200;
}
.top-bar-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
}
.top-bar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.logo-home-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  border-radius: var(--r-sm);
  outline-offset: 3px;
}
.logo-home-link:hover .wordmark { color: var(--teal); }
.logo-mark {
  height: 34px;
  width: 34px;
  border-radius: var(--r-sm);
  object-fit: cover;
  object-position: top;
  flex-shrink: 0;
}
.wordmark {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--navy);
}
.top-bar-divider {
  width: 1px;
  height: 20px;
  background: var(--rule-strong);
  flex-shrink: 0;
}
.meta-label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.top-bar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-link {
  background: none;
  border: none;
  font-family: var(--font);
  font-size: 14px;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 5px 6px;
  border-radius: var(--r-sm);
  transition: color .15s, background .15s;
}
a.nav-link { text-decoration: none; display: inline-block; }
.nav-link:hover {
  color: var(--ink);
  background: var(--bg-app);
}
.nav-link.admin-active {
  color: var(--navy);
  font-weight: 600;
  padding-bottom: 3px;
  border-bottom: 2px solid var(--teal);
  border-radius: 0;
}
.avatar {
  width: 30px; height: 30px;
  border-radius: var(--r-pill);
  background: var(--navy);
  color: #fff;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: .04em;
  flex-shrink: 0;
  user-select: none;
}

/* ══════════════════════════════════════════
   FILTER BAR  (52px)
   ══════════════════════════════════════════ */
.filter-bar {
  position: fixed;
  top: var(--topbar-h);
  left: 0; right: 0;
  height: var(--filterbar-h);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--rule);
  z-index: 190;
}
.filter-bar-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  gap: 16px;
}
.filter-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
  min-width: 0;
}
.filter-chips::-webkit-scrollbar { display: none; }

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-pill);
  background: transparent;
  font-family: var(--font);
  font-size: 13px;
  color: var(--ink-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
  flex-shrink: 0;
}
.filter-chip:hover {
  border-color: var(--ink-muted);
  color: var(--ink);
}
.filter-chip.active {
  border-color: var(--navy);
  background: var(--navy-tint);
  color: var(--navy);
  font-weight: 500;
}
.filter-chip-clear {
  font-size: 11px;
  color: #7d94a8;
  cursor: pointer;
  line-height: 1;
}

.clear-link {
  background: none;
  border: none;
  font-family: var(--font);
  font-size: 13px;
  color: var(--teal-ink);
  cursor: pointer;
  padding: 4px 6px;
  white-space: nowrap;
  flex-shrink: 0;
}
.clear-link:hover { text-decoration: underline; }

.new-conv-btn {
  background: none;
  border: none;
  font-family: var(--font);
  font-size: 13px;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 0 4px;
  height: 30px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color .15s;
}
.new-conv-btn:hover { color: var(--ink); }

/* ══════════════════════════════════════════
   FILTER POPOVERS
   ══════════════════════════════════════════ */
.popover {
  position: fixed;
  top: calc(var(--chrome-h) + 8px);
  z-index: 300;
  background: var(--bg-surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  padding: 16px;
  min-width: 220px;
  animation: popover-in .12s ease;
}
@keyframes popover-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.popover-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.popover input[type="text"],
.popover input[type="date"] {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--field-border);
  border-radius: var(--r-md);
  font-family: var(--font);
  font-size: 14px;
  color: var(--ink);
  background: var(--bg-surface);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.popover input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0,160,176,.12);
}
.popover-date-row { display: flex; flex-direction: column; gap: 8px; }
.popover-date-row .popover-label + .popover-label { margin-top: 2px; }

/* ── Autocomplete ── */
.autocomplete-wrap { position: relative; }
.autocomplete-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--bg-surface);
  border: 1px solid var(--field-border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.10);
  max-height: 220px;
  overflow-y: auto;
  z-index: 200;
  padding: 4px 0;
  margin: 0;
  list-style: none;
}
.autocomplete-list.hidden { display: none; }
.autocomplete-item {
  padding: 8px 12px;
  font-size: 13px;
  color: var(--ink-body);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.autocomplete-item:hover,
.autocomplete-item[aria-selected="true"] {
  background: var(--navy-tint);
  color: var(--navy);
}
.autocomplete-empty {
  padding: 10px 12px;
  font-size: 13px;
  color: var(--ink-faint);
  font-style: italic;
}
.autocomplete-item.already-selected {
  opacity: 0.4;
  pointer-events: none;
}

/* Speaker selection pills */
.speaker-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.speaker-pills:empty { margin-bottom: 0; }
.speaker-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 10px;
  background: var(--navy-tint, #e8f0f8);
  color: var(--navy, #194872);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  max-width: 200px;
}
.speaker-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.speaker-pill-remove {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--navy, #194872);
  font-size: 11px;
  line-height: 1;
  padding: 0;
  opacity: 0.6;
}
.speaker-pill-remove:hover { opacity: 1; }

/* ══════════════════════════════════════════
   HISTORY SIDEBAR  (fixed left, constant width)
   ══════════════════════════════════════════ */
.history-sidebar {
  position: fixed;
  top: var(--chrome-h);
  left: 0;
  bottom: 0;
  width: var(--sidebar-w);
  background: var(--bg-surface);
  border-right: 1px solid var(--rule);
  box-shadow: var(--shadow-panel-left);
  z-index: 150;
  display: flex;
  flex-direction: column;
}
.history-header {
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid var(--rule);
  flex-shrink: 0;
}
.history-header .new-conv-btn {
  width: 100%;
  height: auto;
  text-align: left;
  padding: 8px 10px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  font-weight: 500;
}
.history-header .new-conv-btn:hover { background: var(--bg-app); }
.history-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}
.history-empty {
  padding: 16px 10px;
  font-size: 13px;
  color: var(--ink-faint);
}
.history-row {
  display: flex;
  align-items: center;
  width: 100%;
  border-radius: var(--r-md);
  transition: background .15s;
}
.history-row:hover { background: var(--bg-app); }
.history-row.active { background: var(--navy-tint); }
.history-row-open {
  flex: 1;
  min-width: 0;
  text-align: left;
  background: none;
  border: none;
  padding: 10px 10px;
  cursor: pointer;
}
.history-row-title {
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.history-row.active .history-row-title { color: var(--navy); font-weight: 500; }
.history-row-time {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-faint);
}
.history-row-delete {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-right: 6px;
  border: none;
  border-radius: var(--r-sm, 4px);
  background: none;
  color: var(--ink-faint);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s, background .15s, color .15s;
}
.history-row:hover .history-row-delete { opacity: 1; }
.history-row-delete:hover { background: var(--rule); color: var(--err-c); }

.history-footer {
  flex-shrink: 0;
  padding: 8px 12px 12px;
  border-top: 1px solid var(--rule);
}
.see-all-link {
  width: 100%;
  padding: 6px 4px;
  background: none;
  border: none;
  font-size: 12px;
  color: var(--ink-muted);
  cursor: pointer;
  text-align: left;
}
.see-all-link:hover { color: var(--teal-ink); }

@media (max-width: 899px) {
  .history-sidebar { display: none; }
}

/* ══════════════════════════════════════════
   CONTENT AREA
   ══════════════════════════════════════════ */
.content-area {
  padding-top: var(--chrome-h);
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* The sources panel is a permanent column (not an overlay) at >=900px, so
   the content area reserves real layout space for it on both sides. Below
   900px there's no room for a third column — the panel is hidden entirely. */
@media (min-width: 900px) {
  .content-area { padding-left: var(--sidebar-w); padding-right: var(--panel-w); }
  body.no-panel .content-area { padding-right: 0; }
}
.col-main {
  width: 100%;
  max-width: var(--col-w);
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ══════════════════════════════════════════
   MESSAGES
   ══════════════════════════════════════════ */
.messages {
  flex: 1;
  overflow-y: auto;
  padding: 32px var(--gutter) 16px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}
.messages::-webkit-scrollbar { width: 5px; }
.messages::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 3px; }

/* ══════════════════════════════════════════
   WELCOME STATE  (hairline list)
   ══════════════════════════════════════════ */
.welcome-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0 0;
}
.welcome-logo {
  width: 120px;
  height: 120px;
  object-fit: contain;
  margin-bottom: 24px;
}
.welcome-display {
  font-size: 34px;
  font-weight: 300;
  line-height: 1.25;
  color: var(--ink);
  text-align: center;
  max-width: 600px;
  margin-bottom: 10px;
}
.welcome-sub {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-muted-2);
  text-align: center;
  max-width: 520px;
  margin-bottom: 32px;
}
.welcome-examples {
  width: 100%;
  border-top: 1px solid var(--rule);
  list-style: none;
}
.welcome-example {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 2px;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  transition: color .15s;
}
.welcome-example:hover .example-label { color: var(--teal-ink); }
.example-label {
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
  transition: color .15s;
}
.example-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
  margin-left: 16px;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════
   USER MESSAGE  (navy bubble, right-aligned)
   ══════════════════════════════════════════ */
.message-user {
  display: flex;
  justify-content: flex-end;
}
.user-bubble {
  max-width: 520px;
  background: var(--navy);
  color: #fff;
  font-size: 16px;
  line-height: 1.5;
  padding: 12px 16px;
  border-radius: 12px 12px 3px 12px;
}
.msg-filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid rgba(255,255,255,.15);
}
.msg-filter-tag {
  display: inline-block;
  padding: 1px 8px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--r-pill);
  font-size: 12px;
  color: #fff;
}

/* ══════════════════════════════════════════
   ASSISTANT ANSWER
   ══════════════════════════════════════════ */
.answer-attribution {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
}
.answer-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal);
  flex-shrink: 0;
}
.answer-label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* 3-dot loading pulse */
.answer-status {
  margin-top: 6px;
  font-size: 13px;
  color: var(--ink-faint, #8a8d87);
}

.answer-pulse {
  display: flex;
  gap: 4px;
  align-items: center;
  height: 20px;
  padding: 2px 0;
}
.answer-pulse span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ink-hint);
  animation: pulse-dot .8s infinite;
}
.answer-pulse span:nth-child(2) { animation-delay: .15s; }
.answer-pulse span:nth-child(3) { animation-delay: .30s; }
@keyframes pulse-dot {
  0%,100% { opacity: .3; transform: scale(.8); }
  50%      { opacity: 1;  transform: scale(1); }
}

/* Answer body prose */
.answer-body {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-body);
  text-wrap: pretty;
}
.answer-body p { margin-bottom: 16px; }
.answer-body p:last-child { margin-bottom: 0; }
.answer-body h3 {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--navy);
  margin: 24px 0 9px;
}
.answer-body h3:first-child { margin-top: 0; }
.answer-body ul,
.answer-body ol { padding-left: 22px; margin-bottom: 16px; }
.answer-body li { margin-bottom: 6px; }
.answer-body strong { font-weight: 600; color: var(--ink-strong); }
.answer-body em { color: var(--ink-muted-2); font-style: italic; }
.answer-body code {
  font-family: var(--mono);
  font-size: 14px;
  background: var(--teal-tint);
  padding: 1px 5px;
  border-radius: 4px;
}
.answer-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 15px;
}
.answer-body th {
  text-align: left;
  padding: 8px 12px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--rule-strong);
}
.answer-body td {
  padding: 10px 12px;
  color: var(--ink-strong);
  border-bottom: 1px solid var(--rule);
}
.answer-body tr:last-child td { border-bottom: none; }

/* Citation superscripts — numbered markers [1] [2] etc. */
.citation-sup {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--teal-ink);
  background: var(--teal-tint);
  border-radius: 4px;
  padding: 3px 5px;
  margin-left: 5px;
  vertical-align: 2px;
  cursor: pointer;
  display: inline-block;
  line-height: 1;
  transition: background .1s;
  text-decoration: none;
}
.citation-sup:hover { background: #c4e8ec; }

/* Streaming cursor */
.cursor {
  display: inline-block;
  width: 2px; height: 1.1em;
  background: var(--teal);
  animation: blink .7s infinite;
  vertical-align: text-bottom;
  margin-left: 2px;
  border-radius: 1px;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* Answer action row */
.answer-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
}
.answer-action {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color .15s;
}
.answer-action.teal { color: var(--teal-ink); }
.answer-action:hover { color: var(--ink); }
.answer-action.teal:hover { color: var(--navy); }
.answer-action-sep {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-hint);
  user-select: none;
}
.answer-error { font-size: 15px; color: var(--err-c); }

/* ══════════════════════════════════════════
   COMPOSER
   ══════════════════════════════════════════ */
.composer-wrap {
  padding: 12px var(--gutter) 24px;
  background: var(--bg-app);
  flex-shrink: 0;
}
.composer {
  border: 1px solid var(--field-border);
  border-radius: var(--r-lg);
  background: var(--bg-surface);
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.composer:focus-within {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0,160,176,.10);
}
#query-input {
  display: block;
  width: 100%;
  padding: 14px 16px 8px;
  border: none;
  resize: none;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
  background: transparent;
  outline: none;
  min-height: 48px;
  max-height: 130px;
}
#query-input::placeholder { color: var(--ink-faintest); }

.composer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px 10px 16px;
}
.composer-hint {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-hint);
}
.composer-hint kbd {
  display: inline;
  font-family: var(--mono);
  font-size: 11px;
  background: var(--bg-app);
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  padding: 1px 4px;
}

.send-btn {
  height: 34px;
  padding: 0 18px;
  background: var(--teal);
  border: none;
  border-radius: var(--r-pill);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: var(--on-teal);
  cursor: pointer;
  transition: background .15s, transform .1s;
  white-space: nowrap;
  flex-shrink: 0;
}
.send-btn:hover:not(:disabled) {
  background: var(--teal-ink);
  color: #fff;
}
.send-btn:active:not(:disabled) { transform: scale(.97); }
.send-btn:disabled {
  background: var(--field-border);
  color: var(--ink-faint);
  cursor: not-allowed;
}
.send-btn.stop-mode {
  background: var(--bg-surface);
  border: 2px solid var(--navy);
  color: var(--navy);
}
.send-btn.stop-mode:hover {
  background: var(--navy-tint);
}

/* ══════════════════════════════════════════
   SOURCES PANEL  (420px, right, permanent column)
   ══════════════════════════════════════════ */
.sources-panel {
  position: fixed;
  top: var(--chrome-h);
  right: 0;
  bottom: 0;
  width: var(--panel-w);
  background: var(--bg-surface);
  border-left: 1px solid #e0dcd4;
  box-shadow: var(--shadow-panel);
  z-index: 150;
  display: none;
  flex-direction: column;
}
@media (min-width: 900px) {
  .sources-panel { display: flex; }
  body.no-panel .sources-panel { display: none; }
}

.sources-header {
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid var(--rule);
  flex-shrink: 0;
  gap: 10px;
}
.sources-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  flex: 1;
}
.sources-n {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-faint);
}
.sources-close {
  background: none;
  border: none;
  font-size: 16px;
  color: var(--ink-muted);
  cursor: pointer;
  width: 28px; height: 28px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.sources-close:hover { background: var(--bg-app); color: var(--ink); }

.sources-body {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}
.sources-body::-webkit-scrollbar { width: 4px; }
.sources-body::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 3px; }

.sources-empty {
  padding: 32px 20px;
  font-size: 14px;
  color: var(--ink-faint);
  text-align: center;
}


/* Source rows (no cards — plain rows with border) */
.source-row {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 0 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  user-select: none;
  transition: background .1s;
}
.source-row:hover { background: var(--bg-app); }
.source-row.flash {
  background: var(--teal-tint);
  transition: background 0s;
}
.source-row.expanded .source-quote {
  -webkit-line-clamp: unset;
  overflow: visible;
}
.source-expand-hint {
  font-size: 11px;
  font-family: var(--mono);
  color: var(--teal-ink);
  margin-top: 5px;
}
.source-row.expanded .source-expand-hint { display: none; }

.source-num {
  width: 22px; height: 22px;
  background: var(--teal-tint);
  border-radius: var(--r-sm);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--teal-ink);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.source-session-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 3px;
}
.source-kind-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  color: var(--teal-ink);
  background: var(--teal-tint);
  margin-left: 7px;
  vertical-align: middle;
}
/* The badge is an <a> only when source.direct_citation_url is set (see
   addSourceRow in app.js) — a plain <span> otherwise, which this leaves
   untouched. text-decoration: none overrides the browser's default link
   underline; the hover state is the only visual cue it's clickable. */
.source-badge-link {
  text-decoration: none;
  cursor: pointer;
}
.source-badge-link:hover {
  background: var(--teal-ink);
  color: #fff;
}
.source-meta-line {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.source-quote {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.catalog-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  font-size: 14px;
  color: var(--teal-ink);
  border-bottom: 1px solid var(--rule);
}
.catalog-badge::before { content: "📋"; }

/* ══════════════════════════════════════════
   UTILITY
   ══════════════════════════════════════════ */
.hidden { display: none !important; }

/* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */
@media (max-width: 1199px) {
  .top-bar-inner,
  .filter-bar-inner { padding: 0 24px; }
  .messages,
  .composer-wrap { padding-left: 24px; padding-right: 24px; }
}

@media (max-width: 679px) {
  :root {
    --topbar-h: 56px;
    --filterbar-h: 44px;
    --chrome-h: 100px;
    --gutter: 18px;
  }
  .wordmark { font-size: 15px; }
  .meta-label, .top-bar-divider { display: none; }
  .messages { padding: 20px 18px 12px; gap: 20px; }
  .composer-wrap { padding: 8px 18px 16px; }
  /* the composer on a phone: no keyboard hint (there is no Shift key), a one-line placeholder (app.js), the Ask button on the right */
  #query-input { padding: 12px 14px 4px; min-height: 44px; }
  .composer-hint { display: none; }
  .composer-footer { justify-content: flex-end; padding: 4px 10px 10px 14px; }
  .answer-body { font-size: 16px; }
  .answer-body h3 { font-size: 16px; }
  .welcome-display { font-size: 26px; }
}

/* ══════════════════════════════════════════
   SIGN IN PAGE  (dark, no card)
   ══════════════════════════════════════════ */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dark-bg);
  font-family: var(--font);
  padding: 32px 24px;
}
.login-stack {
  width: 400px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.login-logo-chip {
  background: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 24px 60px -30px rgba(16,27,37,.6);
}
.login-logo-chip img {
  height: 104px;
  width: auto;
  display: block;
}
.login-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--dark-ink);
  text-align: center;
  margin-bottom: 6px;
  letter-spacing: -.01em;
}
.login-subtitle {
  font-size: 14px;
  color: var(--dark-ink-muted);
  text-align: center;
  margin-bottom: 32px;
  line-height: 1.5;
}
.login-form { width: 100%; }
.login-form .form-group { margin-bottom: 14px; }

.login-field-label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dark-ink-label);
  margin-bottom: 7px;
}
.login-form input[type="email"],
.login-form input[type="text"] {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  background: var(--dark-surface);
  border: 1px solid var(--dark-border);
  border-radius: var(--r-md);
  color: var(--dark-ink);
  font-family: var(--font);
  font-size: 16px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.login-form input::placeholder { color: var(--dark-ink-faint); }
.login-form input:focus {
  border-color: var(--dark-focus);
  box-shadow: 0 0 0 3px rgba(0,160,176,.2);
}
.login-btn {
  width: 100%;
  height: 48px;
  background: var(--teal);
  border: none;
  border-radius: var(--r-md);
  color: var(--on-teal);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 6px;
  transition: background .15s, transform .1s;
}
.login-btn:hover:not(:disabled) {
  background: var(--teal-ink);
  color: #fff;
  transform: translateY(-1px);
}
.login-btn:active:not(:disabled) { transform: none; }
.login-btn:disabled { opacity: .5; cursor: not-allowed; }

.login-error {
  width: 100%;
  background: rgba(154,74,74,.2);
  border: 1px solid rgba(154,74,74,.4);
  border-radius: var(--r-md);
  color: #f8a5a5;
  font-size: 14px;
  padding: 10px 14px;
  margin-bottom: 14px;
  display: none;
}
.login-error.visible { display: block; }

.login-step-hint {
  font-size: 14px;
  color: var(--dark-ink-muted);
  margin-bottom: 20px;
  line-height: 1.5;
  text-align: center;
}
.login-link-btn {
  background: none;
  border: none;
  color: var(--dark-accent);
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.login-link-btn:hover { opacity: .8; }

/* 6-box OTP input */
.otp-boxes {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 20px;
}
.otp-box {
  width: 60px;
  height: 60px;
  border: 1px solid var(--dark-border);
  border-radius: var(--r-md);
  background: var(--dark-surface);
  font-family: var(--mono);
  font-size: 24px;
  color: var(--dark-ink);
  text-align: center;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  caret-color: var(--teal);
}
.otp-box:focus {
  border-color: var(--dark-focus);
  box-shadow: 0 0 0 3px rgba(0,160,176,.2);
}

.login-resend {
  font-size: 13px;
  color: var(--dark-ink-faint);
  text-align: center;
  margin-top: 16px;
}
.resend-accent { color: var(--dark-accent); }
.login-footer {
  margin-top: 28px;
  font-size: 12px;
  color: var(--dark-ink-faint);
  text-align: center;
}

/* ══════════════════════════════════════════
   ADMIN PAGES
   ══════════════════════════════════════════ */
.admin-page {
  padding: calc(var(--chrome-h) + 32px) var(--gutter) 40px;
  max-width: 1100px;
  margin: 0 auto;
}
/* Admin pages that have only a top-bar (no filter-bar) */
.admin-page.no-filterbar {
  padding-top: calc(var(--topbar-h) + 32px);
}

.admin-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 28px;
}
.admin-page-title {
  font-size: 30px;
  font-weight: 300;
  line-height: 1.2;
  color: var(--ink);
}
.admin-page-sub {
  font-size: 15px;
  color: var(--ink-muted);
  margin-top: 4px;
}
.admin-page-actions { display: flex; gap: 10px; }

.btn-primary-pill {
  height: 36px;
  padding: 0 18px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--teal);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: var(--on-teal);
  cursor: pointer;
  transition: background .15s;
}
.btn-primary-pill:hover { background: var(--teal-ink); color: #fff; }

.btn-secondary-pill {
  height: 36px;
  padding: 0 18px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-pill);
  background: transparent;
  font-family: var(--font);
  font-size: 14px;
  color: var(--ink-muted);
  cursor: pointer;
  transition: all .15s;
}
.btn-secondary-pill:hover { border-color: var(--ink-muted); color: var(--ink); }

/* Admin table */
.admin-table-wrap {
  background: var(--bg-surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow-x: auto;
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
}
.admin-table thead tr { border-bottom: 1px solid var(--rule-strong); }
.admin-table th {
  padding: 11px 16px;
  text-align: left;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 400;
  background: var(--bg-app);
}
.admin-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-strong);
  font-size: 15px;
  vertical-align: middle;
}
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover td { background: var(--bg-app); }

/* WordPress tab — list-row layout (2026-09-16 redesign), replacing the
   <table> above entirely. Grew out of a real problem: the old table's
   Actions column needed to carry up to 5 buttons (Approve & Ingest,
   Reject, Change Zoom link, Unlink, Use Zoom Instead), and every attempt
   to just make that column wider — a fixed width, forcing the whole page
   wider, pinning it with position:sticky — either scrolled it off-screen
   or painted it over the other columns. The actual fix wasn't a wider
   column, it was fewer buttons: one primary action plus a kebab menu for
   the rest (see .wp-kebab/.wp-menu below), which is what made the old
   1600px-wide page and table-layout:fixed hacks unnecessary — this fits
   comfortably in the base 1100px .admin-page. */
.wp-list {
  background: var(--bg-surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  /* NOT overflow:hidden: a row's "more actions" menu drops down from the row, and in a short list (one failed video) the clip cut it after
     the second entry, hiding Reject (found 30 Oct 2026). The rounded corners are drawn by the header and the last row instead. */
  overflow: visible;
}
.wp-list-head { border-top-left-radius: var(--r-lg); border-top-right-radius: var(--r-lg); }
.wp-list .wp-row:last-child { border-bottom-left-radius: var(--r-lg); border-bottom-right-radius: var(--r-lg); }
.wp-list-head {
  display: grid;
  grid-template-columns: 28px minmax(0,1fr) 100px 140px 100px 190px;
  gap: 20px;
  align-items: center;
  padding: 10px 20px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--bg-app);
  border-bottom: 1px solid var(--rule-strong);
}
.wp-row {
  display: grid;
  grid-template-columns: 28px minmax(0,1fr) 100px 140px 100px 190px;
  gap: 20px;
  align-items: start;
  padding: 16px 20px;
  border-bottom: 1px solid var(--rule);
}
.wp-row > * { padding-top: 2px; }
.wp-row:last-child { border-bottom: none; }
.wp-row:hover { background: var(--bg-app); }

.col-date { font-size: 13px; color: var(--ink-muted); }

.wp-row-title { min-width: 0; }
.wp-tag-row { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.wp-tag {
  display: inline-flex; align-items: center; font-size: 11px; font-weight: 500; color: var(--ink-muted);
  background: var(--bg-app); border: 1px solid var(--rule-strong); border-radius: var(--r-sm); padding: 2px 7px;
}
.wp-tag.members { color: var(--err-c); background: #faeaea; border-color: transparent; }

.wp-ready-stack { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }

.wp-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; position: relative; }
.btn-wp-primary {
  padding: 7px 13px; border-radius: var(--r-md); border: 1px solid var(--teal);
  background: var(--teal-tint); font-family: var(--font); font-size: 12.5px; font-weight: 600;
  color: var(--teal-ink); white-space: nowrap; cursor: pointer;
}
.btn-wp-primary:hover { background: var(--teal); color: #fff; }
.btn-wp-primary.danger { border-color: #c57070; background: #faeaea; color: var(--err-c); }
.btn-wp-primary.danger:hover { background: var(--err-c); color: #fff; }

.wp-kebab {
  width: 30px; height: 30px; border-radius: var(--r-md); border: 1px solid var(--rule-strong);
  background: var(--bg-surface); display: flex; align-items: center; justify-content: center;
  color: var(--ink-muted); flex-shrink: 0; cursor: pointer; padding: 0;
}
.wp-kebab:hover { border-color: var(--teal-ink); color: var(--teal-ink); }
.wp-kebab.open { border-color: var(--teal); color: var(--teal-ink); background: var(--teal-tint); }
/* Rendered even for rows with no menu items, just invisible — keeps its
   30px + gap reserved so the primary button doesn't shift sideways
   depending on whether this row happens to have one. */
.wp-kebab-empty { visibility: hidden; cursor: default; }

.wp-menu {
  position: absolute; top: 38px; right: 0; min-width: 180px; background: var(--bg-surface);
  border: 1px solid var(--rule-strong); border-radius: var(--r-md); box-shadow: 0 8px 24px -8px rgba(28,33,31,.25);
  padding: 6px; z-index: 20;
}
.wp-menu-item {
  display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: var(--r-sm);
  font-family: var(--font); font-size: 13px; color: var(--ink); background: none; border: none; cursor: pointer;
}
.wp-menu-item:hover { background: var(--bg-app); }
.wp-menu-item.danger { color: var(--err-c); }
.wp-menu-item.danger:hover { background: #faeaea; }

.td-name { font-weight: 500; color: var(--navy); }
.td-mono { font-family: var(--mono); font-size: 13px; color: var(--ink-muted); }

.badge-role {
  font-size: 13px;
  font-weight: 500;
  color: var(--navy);
}
.badge-role.admin { color: var(--navy); }

.badge-status {
  font-family: var(--mono);
  font-size: 12px;
}
.badge-status.ok    { color: var(--ok); }
.badge-status.warn  { color: var(--warn); }
.badge-status.err   { color: var(--err-c); }
.badge-status.active   { color: var(--ok); }
.badge-status.inactive { color: var(--err-c); }

.table-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.btn-action {
  padding: 4px 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--rule-strong);
  background: var(--bg-surface);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-muted);
  cursor: pointer;
  transition: all .15s;
}
.btn-action:hover { border-color: var(--teal-ink); color: var(--teal-ink); }
.btn-action.danger:hover { border-color: #c57070; color: var(--err-c); }

/* Modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fade-in .15s ease;
}
@keyframes fade-in { from {opacity:0} to {opacity:1} }

.modal {
  background: var(--bg-surface);
  border-radius: var(--r-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
  width: 100%;
  max-width: 460px;
  padding: 32px;
  position: relative;
  animation: modal-in .15s ease;
}
@keyframes modal-in {
  from { opacity:0; transform: translateY(-12px); }
  to   { opacity:1; transform: none; }
}
.modal-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 24px;
}
.modal-close {
  position: absolute;
  top: 16px; right: 18px;
  background: none;
  border: none;
  font-size: 18px;
  color: var(--ink-muted);
  cursor: pointer;
  width: 28px; height: 28px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.modal-close:hover { background: var(--bg-app); }

.modal .form-group { margin-bottom: 16px; }
.modal label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.modal input,
.modal select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--field-border);
  border-radius: var(--r-md);
  font-family: var(--font);
  font-size: 14px;
  color: var(--ink);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  background: var(--bg-surface);
}
.modal input:focus,
.modal select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0,160,176,.10);
}
.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 24px;
}
.btn-modal-cancel {
  height: 36px;
  padding: 0 18px;
  background: var(--bg-app);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-pill);
  font-family: var(--font);
  font-size: 14px;
  color: var(--ink-muted);
  cursor: pointer;
  transition: all .15s;
}
.btn-modal-cancel:hover { background: var(--rule); color: var(--ink); }

.btn-modal-save {
  height: 36px;
  padding: 0 18px;
  background: var(--teal);
  border: none;
  border-radius: var(--r-pill);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: var(--on-teal);
  cursor: pointer;
  transition: background .15s;
}
.btn-modal-save:hover { background: var(--teal-ink); color: #fff; }
.btn-modal-save:disabled { opacity: .5; cursor: not-allowed; }

.modal-error {
  background: rgba(154,74,74,.08);
  border: 1px solid rgba(154,74,74,.25);
  border-radius: var(--r-md);
  color: var(--err-c);
  font-size: 13px;
  padding: 9px 12px;
  margin-bottom: 14px;
  display: none;
}
.modal-error.visible { display: block; }

/* ── Domain access control page ─────────────────────────────────────────── */
.access-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 32px;
}
@media (max-width: 860px) {
  .access-panels { grid-template-columns: 1fr; }
}

.access-panel-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  gap: 7px;
}
.access-panel-title::before { font-size: 14px; }
.access-panel-deny::before  { content: "🚫"; }
.access-panel-allow::before { content: "✅"; }

.access-panel-error {
  background: rgba(154,74,74,.08);
  border: 1px solid rgba(154,74,74,.25);
  border-radius: var(--r-md);
  color: var(--err-c);
  font-size: 13px;
  padding: 9px 12px;
  margin-bottom: 12px;
  display: none;
}
.access-panel-error.visible { display: block; }

.domain-add-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.domain-input {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--field-border);
  border-radius: var(--r-md);
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
  background: var(--bg-surface);
  outline: none;
}
.domain-input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-tint);
}
.deny-pill {
  background: #8b2e2e !important;
}
.deny-pill:hover { background: #6e2222 !important; }

/* ── Data sources admin page ─────────────────────────────────────────────── */

.data-tab-strip {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 24px;
}
.data-tab {
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color .15s;
  margin-bottom: -1px;
}
.data-tab:hover { color: var(--ink); }
.data-tab.active {
  color: var(--teal-ink);
  border-bottom-color: var(--teal);
}
.data-tab:disabled {
  opacity: .4;
  cursor: not-allowed;
}
.data-tab-panel { display: none; }
.data-tab-panel.active { display: block; }

/* Data source status badges */
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  margin-bottom: 4px;
}
.ds-badge:last-child { margin-bottom: 0; }
.ds-badge.pending   { color: var(--warn);  background: #fdf3e3; }
.ds-badge.approved  { color: var(--navy);  background: var(--navy-tint); }
.ds-badge.ingesting { color: var(--teal-ink); background: var(--teal-tint); }
.ds-badge.ingested  { color: var(--ok);    background: #e8f5ee; }
.ds-badge.rejected  { color: var(--err-c); background: #faeaea; }
/* Not a real DB status — status stays "approved" (retry-eligible) after a
   failed ingest attempt, see statusBadge()'s own comment in admin-data.html
   for why. Same red as .rejected, since it's the same "needs attention"
   signal, just a different underlying cause. */
.ds-badge.failed    { color: var(--err-c); background: #faeaea; }

/* WordPress-tab readiness badge (RAG): green = Vimeo caption confirmed
   ready, amber = covered by a Zoom link only, red = needs mapping, grey =
   not checked yet. Reuses the same color tokens as the status badges above
   for visual consistency rather than inventing a second palette. */
.ds-badge.ready        { color: var(--ok);    background: #e8f5ee; }
.ds-badge.needs-mapping { color: var(--warn);  background: #fdf3e3; }
.ds-badge.not-ready     { color: var(--err-c); background: #faeaea; }
.ds-badge.unchecked     { color: var(--ink-faint); background: var(--bg-app); }

/* Link-to-Zoom picker — the top-ranked (title-similarity) result gets a
   highlighted row to match its "Most likely" badge below. */
.link-zoom-result-row.top-match { background: #e8f5ee; border-left: 3px solid var(--ok); padding-left: 9px !important; }
.link-zoom-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.link-zoom-badges .ds-badge { margin-bottom: 0; }

@keyframes ds-spin { to { transform: rotate(360deg); } }
.ds-badge.ingesting::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: ds-spin .7s linear infinite;
}

/* Scan button + toolbar */
.data-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.data-toolbar-right { display: flex; gap: 8px; align-items: center; }
.data-stats { font-size: 13px; color: var(--ink-faint); }

.btn-scan {
  padding: 7px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--rule-strong);
  background: var(--bg-surface);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
  cursor: pointer;
  transition: all .15s;
}
.btn-scan:hover { border-color: var(--teal); color: var(--teal-ink); }
.btn-scan:disabled { opacity: .5; cursor: not-allowed; }

.ds-select {
  height: 32px;
  padding: 0 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--rule-strong);
  background: var(--bg-surface);
  font-family: var(--font);
  font-size: 13px;
  color: var(--ink-muted);
  cursor: pointer;
}
.ds-select:focus { border-color: var(--teal); outline: none; }

/* One meaning of an acronym on the Acronyms tab (an acronym with two senses shows two) */
.acronym-meaning {
  display: inline-block;
  padding: 2px 9px;
  margin: 1px 2px 1px 0;
  border-radius: 999px;
  border: 1px solid var(--rule-strong);
  background: var(--bg-surface);
  font-size: 12.5px;
  color: var(--ink);
}

/* "Hide rejected" tickbox beside a panel's status filter */
.ds-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  font-size: 13px;
  color: var(--ink-muted);
  cursor: pointer;
  user-select: none;
}
.ds-check input { cursor: pointer; accent-color: var(--teal); }

/* Filter bar + bulk selection */
.data-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.data-filter-bar-spacer { flex: 1; }

.ds-bulk-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 14px;
  background: var(--teal-tint);
  border: 1px solid var(--teal);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--teal-ink);
}
.ds-bulk-bar[hidden] { display: none; }

.ds-batch-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: var(--teal-tint);
  border: 1px solid var(--teal);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--teal-ink);
}
.ds-batch-progress[hidden] { display: none; }
.ds-batch-progress-track {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,.6);
  border-radius: 3px;
  overflow: hidden;
}
.ds-batch-progress-fill {
  height: 100%;
  background: var(--teal-ink);
  border-radius: 3px;
  transition: width .3s ease;
  width: 0%;
}

.ds-checkbox-col { width: 36px; text-align: center; }
.ds-checkbox-col input[type="checkbox"] { cursor: pointer; }
.ds-checkbox-col input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .3; }

/* File name column */
.ds-file-name { font-family: var(--mono); font-size: 12px; color: var(--ink-muted); }
.ds-session-name { font-size: 14px; font-weight: 500; color: var(--ink); }
.ds-meta { font-size: 12px; color: var(--ink-faint); margin-top: 2px; }

/* ══════════════════════════════════════════
   ADD TO HOME SCREEN BANNER  (iOS Safari only)
   ══════════════════════════════════════════ */
.a2hs-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: var(--bg-surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: 0 12px 32px -12px rgba(25,72,114,.35);
  max-width: 420px;
  margin: 0 auto;
}
.a2hs-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
}
.a2hs-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-body);
}
.a2hs-text strong {
  font-size: 13.5px;
  color: var(--ink-strong);
}
.a2hs-share-icon {
  display: inline-flex;
  vertical-align: middle;
  color: var(--teal-ink);
  margin: 0 1px;
}
.a2hs-dismiss {
  margin-left: auto;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--ink-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--r-sm);
}
.a2hs-dismiss:hover { background: var(--rule); }

/* ── Sync All (Data page) ──────────────────────────────────────────── */
.btn-sync-all {
  padding: 9px 20px;
  border-radius: var(--r-md);
  border: 1px solid var(--navy);
  background: var(--navy);
  color: #fff;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
}
.btn-sync-all:hover { background: #123a5e; border-color: #123a5e; }
.btn-sync-all:disabled { opacity: .6; cursor: progress; }
.sync-all-info { margin: -12px 0 20px; font-size: 13px; color: var(--ink-faint); }
.sync-all-line.warn { color: var(--warn); }
.sync-all-toggle {
  margin-left: 10px; padding: 0; border: 0; background: none;
  font: inherit; color: var(--teal-ink); cursor: pointer; text-decoration: underline;
}
.sync-all-steps {
  list-style: none; margin: 10px 0 0; padding: 12px 14px;
  background: var(--bg-surface); border: 1px solid var(--rule); border-radius: var(--r-md);
  display: grid; gap: 6px;
}
.sync-all-steps[hidden], .sync-all-toggle[hidden] { display: none; }
.sync-step { display: grid; grid-template-columns: 18px minmax(150px, 230px) 1fr; gap: 8px; align-items: baseline; color: var(--ink-muted); }
.sync-step.waiting { color: var(--ink-hint); }
.sync-step.running { color: var(--ink); }
.sync-step.done .sync-step-icon { color: var(--ok); }
.sync-step.error { color: var(--err-c); }
.sync-step-detail { color: var(--ink-faint); }
.sync-step.error .sync-step-detail { color: var(--err-c); }

/* Automatic ingestion box on the Data page */
.auto-ingest { border: 1px solid var(--rule-strong, #d9dfe1); border-radius: var(--r-md, 6px); padding: 10px 14px; margin: 0 0 14px; background: var(--bg-surface, #fff); }
.auto-ingest-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.auto-ingest-title { font-weight: 600; font-size: 13px; }
.auto-ingest-state { font-size: 12px; padding: 1px 8px; border-radius: 10px; background: var(--rule, #e5e9ea); color: var(--ink-muted); }
.auto-ingest-state.on { background: #dcefe3; color: #1f6b3d; }
.auto-ingest-line { font-size: 13px; color: var(--ink-muted); margin-top: 4px; }
.auto-ingest-panel { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.auto-ingest-panel[hidden] { display: none; }     /* a class's display beats the hidden attribute: without this the Settings and Details panels never closed */
.auto-ingest-cats { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.auto-ingest-note { font-size: 12px; color: var(--ink-muted); margin: 0; max-width: 70ch; }
.auto-ingest-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.auto-ingest-msg { font-size: 12px; }
.auto-ingest-preview { font-size: 13px; border-top: 1px solid var(--rule, #e5e9ea); padding-top: 8px; }
.auto-ingest-preview ul { margin: 6px 0; padding-left: 20px; max-height: 220px; overflow-y: auto; }
.auto-ingest-cat { font-size: 11px; color: var(--ink-muted); margin-left: 6px; }

/* ── "Who is here" card on the admin Users page (2026-10-16) ── */
.presence {
  background: var(--bg-surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 20px 24px 22px;
  margin-bottom: 28px;
}
.presence-head {
  display: flex; flex-wrap: wrap; gap: 14px 40px; align-items: flex-end;
  padding-bottom: 18px; border-bottom: 1px solid var(--rule);
}
.presence-stat { display: flex; flex-direction: column; gap: 2px; min-width: 120px; }
.presence-stat .num { font-size: 40px; font-weight: 300; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.presence-stat .lbl { font-size: 13px; font-weight: 500; color: var(--ink-strong); display: flex; align-items: center; gap: 7px; }
.presence-stat .sub { font-size: 12px; color: var(--ink-faint); }
.presence-stat.live .num { color: var(--teal-ink); }
.presence-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--teal); display: inline-block; flex: none; }
.presence-stat.live.on .presence-dot { box-shadow: 0 0 0 0 rgba(0,160,176,.5); animation: presence-pulse 2s infinite; }
.presence-stat.live:not(.on) .presence-dot { background: var(--ink-hint); }
@keyframes presence-pulse { 70% { box-shadow: 0 0 0 9px rgba(0,160,176,0); } 100% { box-shadow: 0 0 0 0 rgba(0,160,176,0); } }
@media (prefers-reduced-motion: reduce) { .presence-stat.live.on .presence-dot { animation: none; } }
.presence-updated { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--ink-faintest); text-align: right; }
.presence-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; padding-top: 18px; }
@media (max-width: 860px) { .presence-body { grid-template-columns: 1fr; } .presence-updated { margin-left: 0; text-align: left; } }
.presence h3 { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 10px; }
.presence-group + .presence-group { margin-top: 16px; }
.presence-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.presence-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px;
  border: 1px solid var(--rule); border-radius: var(--r-pill); background: var(--bg-app);
  font-size: 13px; color: var(--ink-strong); max-width: 100%;
}
.presence-chip .av {
  width: 26px; height: 26px; border-radius: 50%; background: var(--navy-tint); color: var(--navy);
  display: grid; place-items: center; font-size: 11px; font-weight: 600; flex: none;
}
.presence-chip .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.presence-chip .when { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); white-space: nowrap; }
.presence-chip.live { border-color: var(--teal); background: var(--teal-tint); }
.presence-chip.live .av { background: var(--teal); color: var(--on-teal); }
.presence-chip.admin .av { outline: 2px solid var(--navy); outline-offset: 1px; }
.presence-more { font-size: 12px; color: var(--ink-faint); align-self: center; }
.presence-empty { font-size: 13px; color: var(--ink-faint); margin: 0; }
.presence-chart svg { width: 100%; height: auto; display: block; }
.presence-chart .bar { fill: var(--teal); opacity: .32; }
.presence-chart .bar.hi { fill: var(--teal); opacity: .7; }
.presence-chart .bar.now { fill: var(--teal-ink); opacity: 1; }
.presence-chart .axis { stroke: var(--rule-strong); stroke-width: 1; }
.presence-chart text { font-family: var(--mono); font-size: 9px; fill: var(--ink-faint); }
.presence-note { font-size: 12px; color: var(--ink-faint); margin: 8px 0 0; }

/* "What AIPAKA knows": the description of the material, on the welcome screen (2026-10-16). Hairline rows like the
   example list it replaces. */
.know { width: 100%; text-align: left; }
.know-heading {
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 10px;
}
.know-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.know-row { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 4px 20px; padding: 16px 2px; border-bottom: 1px solid var(--rule); }
.know-tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-ink);
  padding-top: 4px;
}
.know-title { font-size: 16px; font-weight: 600; color: var(--ink); margin: 0 0 3px; }
.know-text { font-size: 14px; line-height: 1.55; color: var(--ink-muted-2); margin: 0 0 8px; }
.know-tries { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.know-try {
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  font: inherit; font-size: 14px; line-height: 1.45; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px;
  transition: color .15s, text-decoration-color .15s;
}
.know-try::before { content: "\201C"; color: var(--ink-faint); }
.know-try::after  { content: "\201D"; color: var(--ink-faint); }
.know-try:hover, .know-try:focus-visible { color: var(--teal-ink); text-decoration-color: var(--teal); outline: none; }
.know-foot { font-size: 13px; line-height: 1.55; color: var(--ink-faint); margin: 14px 2px 8px; }
@media (max-width: 640px) { .know-row { grid-template-columns: 1fr; } .know-tag { padding-top: 0; } }

/* ── "Question allowance" card on the admin Users page (2026-10-23): who has used how much, and the limits ── */
.allowance { background: var(--bg-surface); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 20px 24px 22px; margin-bottom: 28px; }
.allowance h2 { margin: 0 0 4px; font-size: 18px; font-weight: 600; color: var(--ink-strong); }
/* the two cards on the Users page are closed until clicked (2 Nov 2026) */
details.allowance > summary { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; cursor: pointer; list-style: none; padding-right: 28px; position: relative; }
details.allowance > summary::-webkit-details-marker { display: none; }
details.allowance > summary h2 { margin: 0; }
details.allowance > summary .allowance-hint { font-size: 13px; color: var(--ink-muted); }
details.allowance > summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--ink-muted); border-bottom: 2px solid var(--ink-muted); transform: rotate(45deg); transition: transform .15s; }
details.allowance[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
details.allowance > summary:hover h2 { color: var(--teal-ink); }
details.allowance > summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; border-radius: 6px; }
details.allowance[open] > summary { margin-bottom: 14px; }
details.allowance:not([open]) { padding-bottom: 18px; }
.allowance .allowance-sub { font-size: 13px; color: var(--ink-muted); margin: 0 0 14px; max-width: 70ch; }
.allowance-general { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; padding: 12px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-size: 14px; color: var(--ink-strong); }
.allowance-general .tag { font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.allowance-form { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; padding: 14px 0 4px; }
.allowance-form[hidden] { display: none; }
.allowance-form label { display: block; font-size: 12px; color: var(--ink-muted); margin-bottom: 4px; }
.allowance-form input { height: 34px; width: 140px; border: 1px solid var(--field-border); border-radius: 8px; padding: 0 10px; font: inherit; font-size: 14px; background: var(--bg-surface); color: var(--ink); }
.allowance-form input.wide { width: 240px; }
.allowance-form input.narrow { width: 90px; }
.allowance-help { font-size: 12px; color: var(--ink-faint); margin: 8px 0 0; flex-basis: 100%; }
.allowance-msg { font-size: 13px; margin: 8px 0 0; min-height: 18px; }
.allowance-msg.err { color: var(--err-c); }
.allowance-msg.ok { color: var(--ok); }
.allowance h3 { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin: 18px 0 8px; }
.allowance .admin-table td { padding: 10px 12px; font-size: 14px; }
.allowance .admin-table th { padding: 9px 12px; font-size: 11px; }
.allowance-bar { height: 6px; background: var(--rule); border-radius: 3px; width: 110px; overflow: hidden; margin-top: 5px; }
.allowance-bar span { display: block; height: 100%; background: var(--teal); }
.allowance-bar.warn span { background: var(--warn); }
.allowance-bar.full span { background: var(--err-c); }
.allowance .num { font-variant-numeric: tabular-nums; }
.allowance .muted { color: var(--ink-faint); font-size: 12px; }
.allowance .btn-link { background: none; border: none; color: var(--teal-ink); cursor: pointer; font: inherit; font-size: 13px; padding: 0 8px 0 0; text-decoration: underline; }
.allowance .btn-link.danger { color: var(--err-c); }
.allowance-chip { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--teal-tint); color: var(--teal-ink); margin-left: 6px; }
.allowance-empty { font-size: 14px; color: var(--ink-faint); padding: 8px 0; }