/* ========================================
   DATA ROOM ANALYST — STYLES
   Daxos brand: black bg, white text,
   Source Code Pro headings, Roboto Mono body.
   ======================================== */

:root,
:root[data-theme="dark"] {
  --bg: #000;
  --bg-soft: #0a0a0a;
  --fg: #fff;
  --fg-dim: #aaa;
  --fg-dimmer: #777;
  --accent: #fff;
  --card-bg: #111;
  --card-border: #333;
  --card-border-hover: #666;
  --button-bg: transparent;
  --button-border: #555;
  --button-hover-bg: #fff;
  --button-hover-fg: #000;
  --input-bg: #111;
  --input-border: #444;
  --code-bg: #1a1a1a;
  --code-border: #2a2a2a;
  --user-msg-border: #fff;
  --claude-msg-border: #555;
  --scrollbar-thumb: #333;
  --scrollbar-thumb-hover: #555;
  --addctx-bg: #0d0d10;
  --addctx-border: #2a2a30;
}

:root[data-theme="light"] {
  --bg: #fff;
  --bg-soft: #fafafa;
  --fg: #000;
  --fg-dim: #444;
  --fg-dimmer: #777;
  --accent: #000;
  --card-bg: #f5f5f5;
  --card-border: #ccc;
  --card-border-hover: #666;
  --button-bg: transparent;
  --button-border: #999;
  --button-hover-bg: #000;
  --button-hover-fg: #fff;
  --input-bg: #f5f5f5;
  --input-border: #bbb;
  --code-bg: #eee;
  --code-border: #ddd;
  --user-msg-border: #000;
  --claude-msg-border: #999;
  --scrollbar-thumb: #bbb;
  --scrollbar-thumb-hover: #888;
  --addctx-bg: #f3f3f6;
  --addctx-border: #d8d8e0;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background 0.15s ease, color 0.15s ease;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0 24px 32px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-weight: 600;
  letter-spacing: 0.02em;
}

a { color: var(--fg); }

/* ====== HEADER ====== */
.site-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 0 20px;
  border-bottom: 1px solid var(--card-border);
  margin-bottom: 24px;
  background: linear-gradient(90deg, var(--bg) 0%, var(--bg-soft) 100%);
}
:root[data-theme="light"] .site-header {
  background: linear-gradient(90deg, var(--bg) 0%, var(--bg-soft) 100%);
}
.brand h1 {
  font-size: 22px;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.brand .subtitle {
  margin-top: 6px;
  font-size: 12px;
  color: var(--fg-dim);
  letter-spacing: 0.02em;
}
.theme-toggle {
  background: var(--button-bg);
  color: var(--fg);
  border: 1px solid var(--button-border);
  width: 38px;
  height: 38px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  display: grid;
  place-items: center;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.theme-toggle:hover {
  background: var(--button-hover-bg);
  color: var(--button-hover-fg);
  border-color: var(--button-hover-bg);
}
.theme-toggle .theme-icon-light { display: none; }
:root[data-theme="light"] .theme-toggle .theme-icon-dark { display: none; }
:root[data-theme="light"] .theme-toggle .theme-icon-light { display: inline; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.model-picker-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.model-picker-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-dim);
}
.model-selector {
  font-family: 'Roboto Mono', monospace;
  font-size: 12px;
  padding: 6px 10px;
  background: var(--card-bg);
  color: var(--fg);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  cursor: pointer;
  min-width: 180px;
  transition: border-color 0.15s;
}
.model-selector:hover { border-color: var(--fg); }
.model-selector:focus {
  outline: none;
  border-color: #3b82f6;
}
.model-label-flash { animation: flash 0.4s ease; }
@keyframes flash {
  0% { color: var(--fg); }
  50% { color: #4caf50; }
  100% { color: var(--fg); }
}
.current-model-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--fg-dim);
  background: var(--card-bg);
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid var(--card-border);
  margin-top: 8px;
  margin-bottom: 8px;
}
.current-model-label::before {
  content: '\25C9';
  color: #3b82f6;
}

/* ====== SECTIONS ====== */
main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
section h2 {
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 12px;
  font-weight: 500;
}

/* ====== PROJECTS GRID ====== */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.project-card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  padding: 12px 14px 12px 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  font-family: inherit;
  color: var(--fg);
}
.project-card:hover {
  border-color: var(--card-border-hover);
  transform: translateY(-2px);
}
.project-card.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.project-card.active .pc-meta { color: var(--bg); opacity: 0.75; }
.project-card.active .pc-rating:not([class*="tier-"]) { color: var(--bg); border-color: var(--bg); }
.project-card.active .pc-desc li { color: var(--bg); opacity: 0.88; }
.project-card.active .pc-status { color: var(--bg); opacity: 0.85; }

.pc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.pc-name {
  font-family: 'Source Code Pro', monospace;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  word-break: break-word;
  flex: 1;
  min-width: 0;
}
.pc-rating {
  font-size: 11px;
  font-weight: 600;
  color: var(--fg);
  border: 1px solid var(--card-border);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
  flex-shrink: 0;
  background: transparent;
}
.pc-rating.no-rating {
  color: var(--fg-dimmer);
  border-style: dashed;
}
.pc-desc {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pc-desc li {
  font-size: 11px;
  color: var(--fg-dim);
  line-height: 1.4;
  padding-left: 10px;
  position: relative;
}
.pc-desc li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--fg-dimmer);
}
.pc-status {
  font-size: 10px;
  color: var(--fg-dimmer);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
}
.pc-meta {
  font-size: 10px;
  color: var(--fg-dimmer);
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}
.pc-date {
  margin-top: 6px;
  font-size: 10px;
  color: var(--fg-dim);
  font-family: 'Source Code Pro', monospace;
  letter-spacing: 0.04em;
  border-top: 1px dashed var(--card-border);
  padding-top: 6px;
}
.project-card.active .pc-date {
  color: rgba(255, 255, 255, 0.7);
  border-top-color: rgba(255, 255, 255, 0.2);
}
.pc-date.today {
  color: #10b981;
}
.project-card.active .pc-date.today {
  color: #10b981;
}

.more-toggle {
  margin-top: 14px;
  background: var(--button-bg);
  color: var(--fg-dim);
  border: 1px dashed var(--button-border);
  padding: 9px 14px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.more-toggle:hover {
  color: var(--fg);
  border-color: var(--fg-dim);
  border-style: solid;
}
.more-toggle.open .more-toggle-arrow { transform: rotate(180deg); }
.more-toggle-arrow { transition: transform 0.15s ease; }

/* ====== SELECTED BAR ====== */
.selected-bar {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  padding: 12px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.selected-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.selected-label {
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
}
.selected-value {
  font-family: 'Source Code Pro', monospace;
  font-weight: 600;
  font-size: 14px;
}
.selected-meta {
  font-size: 12px;
  color: var(--fg-dim);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.selected-meta span strong {
  color: var(--fg);
  font-weight: 500;
  margin-left: 4px;
}

/* ----- Multi-project (ask-all scope > 1) bar layout ----- */
.selected-bar.selected-multi {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.selected-multi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--card-border);
  font-size: 12px;
}
.selected-multi-label {
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  font-weight: 600;
}
.selected-multi-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.spm-row {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  padding: 10px 14px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.spm-row:hover {
  border-color: var(--card-border-hover);
  background: color-mix(in srgb, var(--card-bg) 92%, var(--fg) 8%);
}
.spm-row-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.spm-name {
  font-weight: 600;
  font-size: 13px;
  flex: 1;
  color: var(--fg);
}
.spm-rating {
  font-size: 11px;
  font-family: 'Roboto Mono', monospace;
  color: var(--fg-dim);
  padding: 2px 8px;
  border: 1px solid var(--card-border);
  border-radius: 12px;
}
.spm-row-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: var(--fg-dim);
  flex-wrap: wrap;
}
.spm-row-meta > span { white-space: nowrap; }
.spm-browse {
  margin-left: auto;
  background: var(--button-bg);
  color: var(--fg-dim);
  border: 1px solid var(--button-border);
  font-family: inherit;
  font-size: 11px;
  padding: 4px 10px;
  cursor: pointer;
  border-radius: 4px;
}
.spm-browse:hover {
  color: var(--fg);
  border-color: var(--fg-dim);
}

/* Mobile rules for Multi-project selected bar */
@media (max-width: 640px) {
  .selected-multi-header {
    flex-wrap: wrap;
    gap: 8px;
  }
  .spm-row-head {
    flex-wrap: wrap;
    gap: 8px;
  }
  .spm-name {
    flex: 1 1 100%;
    word-break: break-word;
  }
  .spm-row-meta {
    gap: 8px;
  }
  .spm-row-meta > span {
    white-space: normal;
  }
  /* Tap target >=44px per Apple HIG */
  .spm-browse {
    margin-left: 0;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    margin-top: 4px;
    font-size: 12px;
  }
}

/* ====== ADD CONTEXT ====== */
.add-context-section {
  background: var(--addctx-bg);
  border: 1px solid var(--addctx-border);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
}
.add-context-section[data-collapsed="false"] {
  padding: 0 0 14px 0;
}
.add-context-section[data-collapsed="true"] {
  padding: 0;
}
.add-context-section h2 { margin-bottom: 2px; }

/* Collapsed trigger strip */
.add-context-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--fg);
  font-family: inherit;
  font-size: 13px;
  padding: 12px 16px;
  cursor: pointer;
  border-radius: 6px;
  text-align: left;
  transition: background 0.15s ease;
  min-height: 44px;
}
.add-context-trigger:hover {
  background: var(--addctx-border);
}
.add-context-trigger:focus-visible {
  outline: 2px solid var(--accent, var(--fg));
  outline-offset: -2px;
}
.add-context-trigger:active {
  background: var(--addctx-border);
  transform: translateY(1px);
}
.add-context-trigger-label {
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}
.add-context-trigger-hint {
  flex: 1;
  font-size: 11px;
  color: var(--fg-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.add-context-trigger-chevron {
  font-size: 14px;
  color: var(--fg-dim);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.add-context-section[data-collapsed="false"] .add-context-trigger-chevron {
  transform: rotate(180deg);
}
.add-context-section.drag-pulse .add-context-trigger {
  background: rgba(59, 130, 246, 0.12);
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.5);
}

/* Compact variant — used when section sits below chat as a quiet utility */
.add-context-section-compact {
  padding: 0;
  margin-top: 8px;
  opacity: 0.85;
}
.add-context-section-compact:hover { opacity: 1; }
.add-context-section-compact .add-context-trigger {
  min-height: 32px;
  padding: 6px 12px;
  font-size: 12px;
  gap: 8px;
}
.add-context-section-compact .add-context-trigger-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-dim);
}
.add-context-section-compact .add-context-trigger-hint {
  font-size: 10px;
}
.add-context-section-compact .add-context-trigger-chevron {
  font-size: 11px;
}

/* Collapsible body */
.add-context-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 16px;
  transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.2s ease;
}
.add-context-section[data-collapsed="false"] .add-context-body {
  max-height: 4000px;
  opacity: 1;
  padding: 4px 16px 0 16px;
  overflow: visible;
}
.add-context-input {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--fg);
  font-family: inherit;
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 4px;
  outline: none;
  resize: vertical;
  min-height: 84px;
  transition: border-color 0.15s ease;
}
.add-context-input::placeholder { color: var(--fg-dimmer); }
.add-context-input:focus { border-color: var(--fg-dim); }
.add-context-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.add-context-save {
  background: var(--accent);
  color: var(--bg);
  border: 1px solid var(--accent);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 16px;
  cursor: pointer;
  border-radius: 4px;
  transition: opacity 0.15s ease;
}
.add-context-save:hover { opacity: 0.85; }
.add-context-save:disabled { opacity: 0.4; cursor: not-allowed; }
.add-context-clear {
  background: var(--button-bg);
  color: var(--fg-dim);
  border: 1px solid var(--button-border);
  font-family: inherit;
  font-size: 12px;
  padding: 7px 14px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s ease;
}
.add-context-clear:hover { color: var(--fg); border-color: var(--fg-dim); }
.add-context-summary {
  font-size: 11px;
  color: var(--fg-dim);
  user-select: none;
  padding: 2px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.add-context-summary-line { color: var(--fg-dim); }
.add-context-disclosure-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.add-context-disclosure-btn {
  background: var(--button-bg);
  color: var(--fg-dim);
  border: 1px solid var(--button-border);
  font-family: inherit;
  font-size: 11px;
  padding: 4px 10px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s ease;
}
.add-context-disclosure-btn:hover { color: var(--fg); border-color: var(--fg-dim); }
.add-context-disclosure-btn-warn {
  color: var(--fg);
  border-color: var(--fg-dim);
  opacity: 0.85;
}
.add-context-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0 2px;
  border-top: 1px solid var(--addctx-border);
  max-height: 300px;
  overflow-y: auto;
  transition: max-height 0.2s ease;
}
.add-context-item {
  font-size: 12px;
  color: var(--fg);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  padding: 8px 10px;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.add-context-item-collapsed { opacity: 0.7; }
.add-context-item-meta {
  font-size: 10px;
  color: var(--fg-dimmer);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 4px;
}
.add-context-item-title {
  font-size: 12px;
  color: var(--fg-dim);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.add-context-item-body {
  font-size: 12px;
  color: var(--fg);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.add-context-inline-more {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent, var(--fg));
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  text-decoration: underline;
}
.add-context-inline-more:hover { opacity: 0.8; }
.add-ctx-drop {
  border: 2px dashed var(--card-border);
  border-radius: 8px;
  padding: 18px;
  text-align: center;
  margin-bottom: 4px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.add-ctx-drop.dragging {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.08);
}
.add-ctx-drop:hover {
  border-color: var(--fg);
}
.drop-icon {
  font-size: 24px;
  margin-bottom: 6px;
}
.drop-text {
  font-size: 12px;
  color: var(--fg-dim);
}
.drop-hint {
  opacity: 0.7;
}
.add-ctx-drop-toast {
  font-size: 11px;
  color: var(--fg-dim);
  padding: 4px 0;
  white-space: pre-line;
}

/* Mobile rules for Add Context */
@media (max-width: 640px) {
  .add-context-trigger {
    min-height: 48px;
    padding: 12px 14px;
    gap: 8px;
  }
  .add-context-trigger-label {
    font-size: 13px;
  }
  .add-context-trigger-hint {
    font-size: 10px;
  }
  .add-context-section[data-collapsed="false"] .add-context-body {
    padding: 4px 14px 0 14px;
  }
  .add-context-input {
    min-height: 64px;
    font-size: 16px; /* prevent iOS auto-zoom on focus */
  }
  .add-ctx-drop {
    padding: 14px;
  }
  /* Tap targets >=44px per Apple HIG */
  .add-context-save,
  .add-context-clear {
    min-height: 44px;
    padding: 11px 16px;
    font-size: 13px;
  }
  .ctx-history-btn {
    min-height: 44px;
    padding: 11px 14px;
    font-size: 12px;
  }
}

/* ====== ASK SECTION ====== */
.question-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.q-btn {
  background: var(--button-bg);
  color: var(--fg);
  border: 1px solid var(--button-border);
  padding: 8px 14px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s ease;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.q-btn:hover:not(:disabled) {
  background: var(--button-hover-bg);
  color: var(--button-hover-fg);
  border-color: var(--button-hover-bg);
}
.q-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Category accents — left border thickness, hover tint */
.q-btn.cat-neutral {
  border-left: 3px solid #94a3b8; /* slate-400 */
}
.q-btn.cat-research {
  border-left: 3px solid #3b82f6; /* blue-500 */
}
.q-btn.cat-financial {
  border-left: 3px solid #10b981; /* emerald-500 */
}
.q-btn.cat-governance {
  border-left: 3px solid #f59e0b; /* amber-500 */
}

/* Hover: tint background to match category */
.q-btn.cat-neutral:hover:not(:disabled)    { background: rgba(148, 163, 184, 0.10); color: var(--fg); border-color: #94a3b8; }
.q-btn.cat-research:hover:not(:disabled)   { background: rgba(59, 130, 246, 0.10); color: var(--fg); border-color: #3b82f6; }
.q-btn.cat-financial:hover:not(:disabled)  { background: rgba(16, 185, 129, 0.10); color: var(--fg); border-color: #10b981; }
.q-btn.cat-governance:hover:not(:disabled) { background: rgba(245, 158, 11, 0.10); color: var(--fg); border-color: #f59e0b; }

/* Active in-flight state: pulsing border */
.q-btn.asking {
  animation: asking-pulse 1.2s ease infinite;
}
@keyframes asking-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0); }
}

/* Light theme: invert hover tint slightly */
:root[data-theme="light"] .q-btn.cat-neutral:hover:not(:disabled)    { background: rgba(148, 163, 184, 0.18); }
:root[data-theme="light"] .q-btn.cat-research:hover:not(:disabled)   { background: rgba(59, 130, 246, 0.18); }
:root[data-theme="light"] .q-btn.cat-financial:hover:not(:disabled)  { background: rgba(16, 185, 129, 0.18); }
:root[data-theme="light"] .q-btn.cat-governance:hover:not(:disabled) { background: rgba(245, 158, 11, 0.18); }

.custom-form {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.custom-input {
  flex: 1;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--fg);
  font-family: inherit;
  font-size: 13px;
  padding: 10px 14px;
  border-radius: 4px;
  outline: none;
  transition: border-color 0.15s ease;
  min-width: 0;
}
.custom-input::placeholder { color: var(--fg-dimmer); }
.custom-input:focus { border-color: var(--fg-dim); }

.ask-btn {
  background: var(--accent);
  color: var(--bg);
  border: 1px solid var(--accent);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.ask-btn:hover:not(:disabled) { opacity: 0.85; }
.ask-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.ask-tooltip {
  margin-top: 8px;
  font-size: 11px;
  color: var(--fg-dim);
  font-style: italic;
}

/* ====== CHAT ====== */
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.chat-header h2 { margin: 0; }
.chat-header-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.clear-chat,
.chat-action-btn {
  background: var(--button-bg);
  color: var(--fg-dim);
  border: 1px solid var(--button-border);
  font-family: inherit;
  font-size: 11px;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.clear-chat:hover,
.chat-action-btn:hover { color: var(--fg); border-color: var(--fg-dim); }

/* Sonnet for Quick Facts toggle */
.chat-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--button-bg);
  color: var(--fg-dim);
  border: 1px solid var(--button-border);
  font-family: inherit;
  font-size: 11px;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s ease;
  position: relative;
}
.chat-toggle-btn:hover {
  color: var(--fg);
  border-color: var(--fg-dim);
}
.cqf-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fg-dimmer);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.cqf-state {
  font-weight: 600;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--bg-soft);
  color: var(--fg-dim);
  letter-spacing: 0.04em;
}
/* ON state */
.chat-toggle-btn[data-state="on"] {
  border-color: #f59e0b;
  color: var(--fg);
}
.chat-toggle-btn[data-state="on"] .cqf-dot {
  background: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25);
}
.chat-toggle-btn[data-state="on"] .cqf-state {
  background: rgba(245, 158, 11, 0.18);
  color: #f59e0b;
}

.chat {
  max-height: 60vh;
  overflow-y: auto;
  border: 1px solid var(--card-border);
  border-radius: 6px;
  padding: 16px;
  background: var(--bg-soft);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 160px;
  scroll-behavior: smooth;
}
.chat:empty::before {
  content: "No messages yet. Pick a project and ask a question.";
  color: var(--fg-dimmer);
  font-size: 12px;
  font-style: italic;
}
.chat::-webkit-scrollbar { width: 8px; }
.chat::-webkit-scrollbar-track { background: transparent; }
.chat::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
}
.chat::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

/* Anchor for the scroll-to-latest FAB (positioned relative to chat-section). */
.chat-section { position: relative; }

/* Scroll-to-latest pill: appears at bottom-right of chat when user scrolls up. */
.scroll-to-latest {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 10px;
  background: var(--bg-soft);
  color: var(--fg);
  border: 1px solid var(--addctx-border);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 6px 18px -8px rgba(0,0,0,0.5), 0 2px 6px -2px rgba(0,0,0,0.3);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 220ms cubic-bezier(.2,.7,.3,1.4), background 160ms ease, border-color 160ms ease;
  z-index: 5;
}
.scroll-to-latest.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.scroll-to-latest:hover {
  border-color: var(--fg-dim);
  transform: translateY(-2px);
}
.scroll-to-latest:active { transform: translateY(0) scale(0.96); }
.scroll-to-latest svg { width: 12px; height: 12px; }
.scroll-to-latest .stl-pulse {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; opacity: 0.9;
  animation: stlPulse 1.2s ease-in-out infinite;
}
@keyframes stlPulse {
  0%, 100% { transform: scale(0.7); opacity: 0.5; }
  50%      { transform: scale(1.1); opacity: 1; }
}

/* ====== CHAT MESSAGE BUBBLES (Call Analyst-inspired) ====== */
.msg {
  position: relative;
  padding: 12px 16px;
  border-radius: 12px;
  max-width: 88%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-size: 13px;
  line-height: 1.55;
  animation: msgFadeIn 0.2s ease-out;
}
@keyframes msgFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Claude (assistant) — violet gradient, left side, sparkle avatar */
.msg.claude {
  align-self: flex-start;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.10), rgba(99, 102, 241, 0.05));
  border-left: 3px solid #8b5cf6;
  color: var(--fg);
  padding-left: 38px;
}
:root[data-theme="light"] .msg.claude {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.06), rgba(99, 102, 241, 0.03));
}
.msg.claude::before {
  content: "\2728"; /* sparkle */
  position: absolute;
  left: 10px;
  top: 10px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: #fff;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.35);
}

/* User (Mark) — blue gradient, right side, M avatar */
.msg.user {
  align-self: flex-end;
  margin-left: auto;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(99, 102, 241, 0.10));
  border-left: 3px solid #3b82f6;
  border-radius: 12px;
  text-align: right;
  padding-right: 38px;
  color: var(--fg);
}
:root[data-theme="light"] .msg.user {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.10), rgba(99, 102, 241, 0.05));
}
.msg.user::before {
  content: "M";
  position: absolute;
  right: 10px;
  top: 10px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  font-family: 'Source Code Pro', monospace;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.35);
}

/* Streaming typing cursor — animated blinking pipe at end of growing message.
   app.js drops the .thinking class on first token, so any Claude bubble that
   is not .thinking and not .done gets the cursor mid-stream. BB5 may also
   tag bubbles with explicit .streaming / .done classes. */
.msg.claude:not(.thinking):not(.done) .msg-body::after {
  content: '▊';
  display: inline-block;
  margin-left: 2px;
  color: #8b5cf6;
  animation: cursorBlink 1s steps(2) infinite;
  vertical-align: text-bottom;
}
.msg.claude.streaming .msg-body::after {
  content: '▊';
  display: inline-block;
  margin-left: 2px;
  color: #8b5cf6;
  animation: cursorBlink 1s steps(2) infinite;
  vertical-align: text-bottom;
}
.msg.claude.done .msg-body::after { content: none; }
@keyframes cursorBlink {
  0%, 50%       { opacity: 1; }
  50.01%, 100%  { opacity: 0; }
}

/* Thinking state — pulsing dots while waiting for first token */
.msg.thinking {
  color: var(--fg-dim);
  font-style: italic;
}
.msg.thinking .msg-body {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.msg.thinking .msg-body::after {
  content: '●●●';
  color: #8b5cf6;
  letter-spacing: 3px;
  font-style: normal;
  animation: thinkingDots 1.4s infinite ease-in-out;
}
@keyframes thinkingDots {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(-2px); }
}

/* Message meta / role label — tight Source Code Pro caption */
.msg-role {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dimmer);
  margin-bottom: 4px;
  font-family: 'Source Code Pro', monospace;
}

/* Message body — Roboto Mono for streaming text body */
.msg-body {
  font-family: 'Roboto Mono', monospace;
  font-size: 13px;
  line-height: 1.55;
}
.msg-body > *:first-child { margin-top: 0; }
.msg-body > *:last-child  { margin-bottom: 0; }
.msg-body p { margin: 0 0 8px 0; font-size: 13px; }
.msg-body p:last-child { margin-bottom: 0; }
.msg-body h1, .msg-body h2, .msg-body h3, .msg-body h4 {
  margin: 12px 0 6px 0;
  font-family: 'Source Code Pro', monospace;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.msg-body h1 { font-size: 15px; }
.msg-body h2 { font-size: 14px; }
.msg-body h3 { font-size: 13px; }
.msg-body h4 { font-size: 13px; }
.msg-body ul, .msg-body ol { margin: 4px 0; padding-left: 24px; }
.msg-body li { margin-bottom: 2px; }
.msg-body strong { color: #06b6d4; }
.msg-body em { font-style: italic; color: var(--fg-dim); }
.msg-body code {
  background: rgba(139, 92, 246, 0.12);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 11px;
  font-family: 'Source Code Pro', monospace;
}
:root[data-theme="light"] .msg-body code {
  background: rgba(139, 92, 246, 0.10);
}
.msg-body pre {
  background: var(--card-bg);
  padding: 10px;
  border-radius: 6px;
  overflow-x: auto;
  font-size: 11px;
  border-left: 3px solid #8b5cf6;
}
.msg-body pre code {
  background: transparent;
  border: none;
  padding: 0;
  font-size: 11px;
}
.msg-body table {
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 11px;
  width: 100%;
}
.msg-body th, .msg-body td {
  border: 1px solid var(--card-border);
  padding: 4px 8px;
  text-align: left;
}
.msg-body th {
  background: var(--card-bg);
  font-weight: 600;
}
.msg-body blockquote {
  border-left: 2px solid var(--fg-dimmer);
  padding-left: 10px;
  color: var(--fg-dim);
  font-style: italic;
  margin: 6px 0;
}
.msg-body a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--fg-dimmer);
}
.msg-body hr {
  border: none;
  border-top: 1px solid var(--card-border);
  margin: 12px 0;
}

/* ====== FOOTER ====== */
.site-footer {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--card-border);
  font-size: 11px;
  color: var(--fg-dimmer);
  text-align: center;
  letter-spacing: 0.05em;
}

/* ====== RATING TIER BADGES ====== */
.pc-rating.tier-hero {
  background: #10b981;
  color: #fff;
  border-color: #10b981;
}
.pc-rating.tier-solid {
  background: #06b6d4;
  color: #fff;
  border-color: #06b6d4;
}
.pc-rating.tier-watchlist {
  background: #f59e0b;
  color: #fff;
  border-color: #f59e0b;
}
.pc-rating.tier-pass {
  background: #f43f5e;
  color: #fff;
  border-color: #f43f5e;
}
.pc-rating.tier-none {
  background: transparent;
  color: var(--fg-dimmer);
  border-color: var(--card-border);
  border-style: dashed;
}
/* When card is active (selected), keep tier color but boost contrast outline */
.project-card.active .pc-rating.tier-hero,
.project-card.active .pc-rating.tier-solid,
.project-card.active .pc-rating.tier-watchlist,
.project-card.active .pc-rating.tier-pass {
  box-shadow: 0 0 0 2px var(--bg);
}

/* ====== TYPE TAGS (source / search-result types) ====== */
.type-tag {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-family: 'Source Code Pro', monospace;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  border: 1px solid transparent;
  margin-right: 4px;
  vertical-align: 1px;
}
.type-tag.transcript    { background: rgba(59, 130, 246, 0.15); color: #3b82f6; border-color: rgba(59, 130, 246, 0.3); }
.type-tag.safe          { background: rgba(16, 185, 129, 0.15); color: #10b981; border-color: rgba(16, 185, 129, 0.3); }
.type-tag.mnda          { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; border-color: rgba(139, 92, 246, 0.3); }
.type-tag.review_log,
.type-tag.review-log    { background: rgba(245, 158, 11, 0.15); color: #f59e0b; border-color: rgba(245, 158, 11, 0.3); }
.type-tag.memo          { background: rgba(6, 182, 212, 0.15);  color: #06b6d4; border-color: rgba(6, 182, 212, 0.3); }
.type-tag.deck          { background: rgba(236, 72, 153, 0.15); color: #ec4899; border-color: rgba(236, 72, 153, 0.3); }
.type-tag.briefing      { background: rgba(20, 184, 166, 0.15); color: #14b8a6; border-color: rgba(20, 184, 166, 0.3); }
.type-tag.rating_entry,
.type-tag.rating-entry  { background: rgba(120, 120, 120, 0.15); color: var(--fg-dim); border-color: var(--card-border); }
.type-tag.neutral       { background: rgba(120, 120, 120, 0.15); color: var(--fg-dim); border-color: var(--card-border); }

/* ====== RESPONSIVE ====== */
@media (max-width: 1024px) {
  .projects-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .header-actions { gap: 6px; }
  .user-chip { font-size: 10px; padding: 3px 6px; }
  .model-selector { min-width: 140px; font-size: 11px; padding: 5px 8px; }
  .model-picker-label { font-size: 9px; }
}
@media (max-width: 640px) {
  body { padding: 0 14px 24px; }
  .site-header { padding: 18px 0 14px; }
  .brand h1 { font-size: 18px; }
  .brand .subtitle { font-size: 11px; }
  .projects-grid { grid-template-columns: 1fr; }
  .selected-bar {
    flex-direction: column;
    align-items: flex-start;
  }
  .selected-meta { gap: 8px 14px; }
  .custom-form { flex-direction: column; }
  .ask-btn { width: 100%; }
  .chat { max-height: 50vh; padding: 12px; }
  .msg { max-width: 100%; }
}

/* ====== AUTH GATE ====== */
.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg);
  display: grid;
  place-items: center;
  padding: 24px;
}
.auth-gate-content {
  max-width: 360px;
  width: 100%;
  text-align: center;
}
.auth-gate h2 {
  font-family: 'Source Code Pro', monospace;
  font-size: 24px;
  margin: 0 0 6px;
  letter-spacing: 0.05em;
}
.auth-gate-subtitle {
  font-size: 12px;
  color: var(--fg-dim);
  margin: 0 0 24px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.auth-form {
  display: flex;
  gap: 8px;
  flex-direction: column;
}
.auth-input {
  font-family: 'Roboto Mono', monospace;
  font-size: 14px;
  padding: 12px 14px;
  background: var(--card-bg);
  color: var(--fg);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  outline: none;
  transition: border-color 0.15s;
}
.auth-input:focus {
  border-color: #3b82f6;
}
.auth-submit {
  font-family: 'Source Code Pro', monospace;
  font-size: 13px;
  padding: 12px 14px;
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--fg);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.auth-submit:hover {
  background: var(--fg);
  color: var(--bg);
}
.auth-error {
  margin-top: 12px;
  font-size: 12px;
  color: #f43f5e;
  animation: shake 0.3s ease;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* ====== GENERIC MODAL ====== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: 24px;
}
.modal[hidden] { display: none; }
.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
}
:root[data-theme="light"] .modal-overlay { background: rgba(255,255,255,0.7); }
.modal-content {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 28px;
  max-width: 520px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
}
.modal-content-narrow {
  max-width: 380px;
}
.modal-close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: transparent;
  border: none;
  color: var(--fg);
  font-size: 22px;
  cursor: pointer;
  width: 28px;
  height: 28px;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
.modal h2 {
  margin: 0 0 6px;
  font-size: 18px;
  font-family: 'Source Code Pro', monospace;
}
.modal .subtitle {
  font-size: 12px;
  color: var(--fg-dim);
  margin: 0 0 18px;
}
.modal label {
  display: block;
  margin-bottom: 14px;
  font-size: 12px;
}
.modal label span {
  display: block;
  margin-bottom: 4px;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
}
.modal input[type="text"],
.modal input[type="number"] {
  width: 100%;
  font-family: 'Roboto Mono', monospace;
  font-size: 13px;
  padding: 10px 12px;
  background: var(--card-bg);
  color: var(--fg);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  box-sizing: border-box;
}
.modal input:focus {
  outline: none;
  border-color: #3b82f6;
}
.modal small {
  font-size: 10px;
  color: var(--fg-dim);
  display: block;
  margin-top: 2px;
}

/* primary button (used for Create, Continue) */
.primary-btn {
  font-family: 'Source Code Pro', monospace;
  font-size: 12px;
  padding: 10px 16px;
  background: #3b82f6;
  color: #fff;
  border: 1px solid #3b82f6;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.primary-btn:hover {
  background: #2563eb;
  border-color: #2563eb;
}
.primary-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Compact primary variant — used in header rows (e.g. + New Project)
   so it matches the visual weight of .action-btn / .more-toggle siblings. */
.primary-btn-compact {
  font-family: 'Source Code Pro', monospace;
  font-size: 12px;
  padding: 7px 12px;
  background: var(--card-bg);
  color: var(--fg);
  border: 1px solid #3b82f6;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  height: 32px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.primary-btn-compact:hover {
  background: #3b82f6;
  color: #fff;
}
.primary-btn-compact:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Generic action-btn (used in modals + headers next to primary-btn) */
.action-btn {
  background: var(--button-bg);
  color: var(--fg-dim);
  border: 1px solid var(--button-border);
  font-family: inherit;
  font-size: 12px;
  padding: 8px 14px;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s ease;
}
.action-btn:hover {
  color: var(--fg);
  border-color: var(--fg-dim);
}

/* New project drop section + file list */
.np-drop-section {
  margin: 14px 0;
}
.np-drop-section > span {
  display: block;
  margin-bottom: 6px;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
}
.np-file-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  font-size: 11px;
  font-family: 'Roboto Mono', monospace;
}
.np-file-list li {
  padding: 4px 8px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
}
.np-error {
  color: #f43f5e;
  font-size: 12px;
  margin: 8px 0;
}

/* Projects grid actions */
.projects-grid-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
/* Force matched height on siblings (+ New Project, + More projects) */
.projects-grid-actions > button {
  height: 32px;
  line-height: 1;
  padding: 7px 12px;
  font-size: 12px;
  margin-top: 0;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}

/* User chip */
.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  font-size: 11px;
  font-family: 'Source Code Pro', monospace;
}
.user-chip-name { color: var(--fg); }
.user-chip-edit {
  background: transparent;
  border: none;
  color: var(--fg-dim);
  cursor: pointer;
  padding: 0 2px;
}
.user-chip-edit:hover { color: var(--fg); }

/* User name gate form layout */
#userNameForm {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#userNameInput {
  width: 100%;
  font-family: 'Roboto Mono', monospace;
  font-size: 13px;
  padding: 10px 12px;
  background: var(--card-bg);
  color: var(--fg);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  box-sizing: border-box;
}
#userNameInput:focus {
  outline: none;
  border-color: #3b82f6;
}

/* Active project accent + banner */
.active-project-accent {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 50;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--active-color, #3b82f6), transparent);
  animation: accentSlide 1s ease;
}
@keyframes accentSlide {
  0% { transform: translateX(-50%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
.active-project-banner {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--card-bg);
  border-bottom: 1px solid var(--card-border);
  border-left: 4px solid var(--active-color, #3b82f6);
  padding: 6px 12px;
  margin: -1px 0 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-family: 'Source Code Pro', monospace;
}
.apb-label {
  text-transform: uppercase;
  color: var(--fg-dim);
  letter-spacing: 0.06em;
  font-size: 8px;
}
.apb-name {
  font-weight: 600;
  color: var(--fg);
}
.apb-rating, .apb-files {
  color: var(--fg-dim);
  font-size: 10px;
}

/* Active project card highlighting (tier-colored override) */
.project-card.active {
  border-color: var(--active-color, #3b82f6) !important;
  border-width: 2px !important;
  box-shadow: 0 0 0 1px var(--active-color, #3b82f6),
              0 0 12px -2px var(--active-color, #3b82f6);
  transform: translateY(-1px);
}

/* Tier color CSS variables — wired by JS via setProperty('--active-color', ...) on document.documentElement */

/* Context history panel */
.context-history-section {
  margin-top: 16px;
}
.ctx-history-btn {
  font-size: 11px;
  padding: 5px 10px;
}
.ctx-history-panel {
  margin-top: 8px;
  border: 1px solid var(--card-border);
  border-radius: 6px;
  background: var(--card-bg);
  max-height: 60vh;
  overflow-y: auto;
}
.ctx-history-header {
  position: sticky;
  top: 0;
  background: var(--card-bg);
  border-bottom: 1px solid var(--card-border);
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}
.ctx-history-list {
  padding: 8px;
}
.ctx-entry {
  border-left: 2px solid var(--card-border);
  padding: 8px 12px;
  margin-bottom: 8px;
  background: var(--bg);
  border-radius: 4px;
  font-size: 12px;
}
.ctx-entry.hidden-by-me {
  opacity: 0.5;
}
.ctx-entry.flagged {
  border-left-color: #f59e0b;
}
.ctx-entry-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.ctx-entry-meta strong {
  color: #3b82f6;
}
.ctx-entry-actions {
  display: flex;
  gap: 4px;
}
.ctx-entry-actions button {
  font-size: 10px;
  padding: 2px 6px;
  background: transparent;
  color: var(--fg-dim);
  border: 1px solid var(--card-border);
  border-radius: 3px;
  cursor: pointer;
}
.ctx-entry-actions button:hover {
  color: var(--fg);
  border-color: var(--fg);
}
.ctx-entry-actions button[data-action="remove"]:hover {
  color: #f43f5e;
  border-color: #f43f5e;
}
.ctx-entry-actions button[data-action="flag"]:hover {
  color: #f59e0b;
  border-color: #f59e0b;
}
.ctx-entry-preview {
  color: var(--fg-dim);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 100px;
  overflow: hidden;
}
.ctx-entry-summary {
  margin-top: 8px;
  padding: 8px;
  background: rgba(59,130,246,0.08);
  border-left: 2px solid #3b82f6;
  font-style: italic;
  color: var(--fg);
}

/* ----- Sources button on project card + sources modal ----- */
.pc-files-btn {
  margin-top: 6px;
  font-size: 10px;
  color: var(--fg-dim);
  background: transparent;
  border: 1px solid transparent;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
  font-family: 'Roboto Mono', monospace;
  transition: all 0.15s;
}
.pc-files-btn:hover {
  background: var(--card-bg);
  border-color: var(--card-border);
  color: var(--fg);
}
.project-card.active .pc-files-btn {
  color: var(--bg);
}
.project-card.active .pc-files-btn:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.3);
  color: var(--bg);
}

.sources-list {
  max-height: 60vh;
  overflow-y: auto;
  font-family: 'Roboto Mono', monospace;
  font-size: 11px;
}
.source-row {
  display: grid;
  grid-template-columns: 80px 1fr 90px;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--card-border);
  align-items: baseline;
}
.source-row:hover {
  background: var(--card-bg);
}
.source-type-tag {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid var(--card-border);
  text-align: center;
  color: var(--fg-dim);
}
.source-type-tag.transcript    { color: #3b82f6; border-color: rgba(59,130,246,0.3); background: rgba(59,130,246,0.08); }
.source-type-tag.safe          { color: #10b981; border-color: rgba(16,185,129,0.3); background: rgba(16,185,129,0.08); }
.source-type-tag.mnda          { color: #8b5cf6; border-color: rgba(139,92,246,0.3); background: rgba(139,92,246,0.08); }
.source-type-tag.review_log    { color: #f59e0b; border-color: rgba(245,158,11,0.3); background: rgba(245,158,11,0.08); }
.source-type-tag.memo          { color: #06b6d4; border-color: rgba(6,182,212,0.3); background: rgba(6,182,212,0.08); }
.source-type-tag.deck          { color: #ec4899; border-color: rgba(236,72,153,0.3); background: rgba(236,72,153,0.08); }
.source-type-tag.data_room_file { color: #14b8a6; border-color: rgba(20,184,166,0.3); background: rgba(20,184,166,0.08); }

.source-name {
  font-weight: 500;
  word-break: break-word;
  color: var(--fg);
}
.source-date {
  text-align: right;
  color: var(--fg-dim);
  font-size: 10px;
}
.sources-modal-meta {
  font-size: 11px;
  color: var(--fg-dim);
  margin-bottom: 12px;
}

/* ----- Chat history modal ----- */
.history-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}
.history-list {
  max-height: 60vh;
  overflow-y: auto;
  font-family: 'Roboto Mono', monospace;
  font-size: 12px;
}
.history-entry {
  border-left: 3px solid var(--card-border);
  padding: 10px 14px;
  margin-bottom: 10px;
  background: var(--card-bg);
  border-radius: 0 6px 6px 0;
  cursor: pointer;
  transition: border-color 0.15s;
}
.history-entry:hover { border-left-color: #3b82f6; }
.history-entry-meta {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--fg-dim);
  margin-bottom: 6px;
}
.history-entry-q {
  font-weight: 500;
  color: var(--fg);
}
.history-entry-response {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--card-border);
  font-family: 'Roboto Mono', monospace;
  font-size: 12px;
  color: var(--fg);
  white-space: pre-wrap;
}
.history-entry-response[hidden] { display: none; }
.history-entry-own { border-left-color: #3b82f6; background: rgba(59,130,246,0.05); }
.history-entry-own-tag { font-size: 9px; padding: 1px 5px; background: #3b82f6; color: #fff; border-radius: 3px; margin-left: 4px; font-weight: 700; }

/* ====== ASK ALL PROJECTS ====== */
.ask-all-banner {
  margin: 0 0 16px 0;
}
.ask-all-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 24px;
  font-family: 'Source Code Pro', monospace;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.1);
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.ask-all-btn:hover {
  background: #1d4ed8;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
}
.ask-all-btn:active {
  background: #1e40af;
  transform: translateY(1px);
}
.ask-all-icon {
  font-size: 20px;
  color: #fff;
  filter: none;
}
.ask-all-hint {
  font-weight: 400;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 8px;
  font-family: 'Roboto Mono', monospace;
}

:root[data-theme="light"] .ask-all-btn {
  background: #1d4ed8;
}
:root[data-theme="light"] .ask-all-btn:hover {
  background: #1e3a8a;
}
:root[data-theme="light"] .ask-all-btn:active {
  background: #1e3a8a;
}

.ask-all-chips { margin: 14px 0; }
.ask-all-chips-label { font-size: 11px; color: var(--fg-dim); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.05em; }
.ask-all-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.aa-select-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 16px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--addctx-border);
}
.aa-select-btn {
  background: var(--button-bg);
  color: var(--fg-dim);
  border: 1px solid var(--button-border);
  font-family: inherit;
  font-size: 11px;
  padding: 5px 12px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s ease;
}
.aa-select-btn:hover {
  color: var(--fg);
  border-color: var(--fg-dim);
}
.aa-select-count {
  margin-left: auto;
  font-size: 11px;
  color: var(--fg-dim);
  font-family: 'Roboto Mono', monospace;
}
.ask-all-chip {
  padding: 6px 10px;
  font-size: 11px;
  border: 1px solid #3b82f6;
  background: rgba(59,130,246,0.15);
  color: #3b82f6;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  font-family: 'Source Code Pro', monospace;
  transition: all 0.15s;
}
.ask-all-chip.deselected {
  background: transparent;
  color: var(--fg-dim);
  border-color: var(--card-border);
}
.ask-all-chip:hover { transform: translateY(-1px); }

#askAllModal textarea#askAllQuestion {
  width: 100%;
  font-family: 'Roboto Mono', monospace;
  font-size: 13px;
  padding: 10px 12px;
  background: var(--card-bg);
  color: var(--fg);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  box-sizing: border-box;
  resize: vertical;
}
#askAllModal textarea#askAllQuestion:focus {
  outline: none;
  border-color: #3b82f6;
}

/* Ask-all per-project response cards (LEGACY, kept for backwards compat) */
.aa-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
@media (max-width: 768px) { .aa-cards { grid-template-columns: 1fr; } }
.aa-card { padding: 10px; border-left: 3px solid #3b82f6; background: var(--card-bg); border-radius: 0 6px 6px 0; }
.aa-card-title { font-size: 11px; font-weight: 600; color: #3b82f6; margin-bottom: 6px; font-family: 'Source Code Pro', monospace; text-transform: uppercase; }
.aa-card-body { font-size: 12px; line-height: 1.5; }
.aa-card-error { border-left-color: #f43f5e; }
.aa-synth { border-top: 1px dashed var(--card-border); padding-top: 12px; }

/* Ask-all UNIFIED (current): single answer + transient status line */
.aa-status {
  font-size: 11px;
  color: var(--fg-dim);
  font-family: 'Source Code Pro', monospace;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-left: 2px solid #8b5cf6;
  background: rgba(139, 92, 246, 0.05);
  border-radius: 0 4px 4px 0;
  letter-spacing: 0.02em;
}
.aa-answer { font-size: 13px; line-height: 1.55; }

/* ----- Evidence badge (sources actually sent to the model) ----- */
.evidence-wrap {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.evidence-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--fg-dim);
  border: 1px solid var(--addctx-border);
  border-radius: 12px;
  padding: 3px 10px;
  margin-top: 6px;
  cursor: pointer;
  background: transparent;
  font-family: 'Source Code Pro', monospace;
  letter-spacing: 0.01em;
  user-select: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.evidence-badge:hover {
  color: var(--fg);
  border-color: var(--fg-dim);
}
.evidence-badge:focus-visible {
  outline: none;
  border-color: var(--fg);
}
.evidence-badge[aria-expanded="true"] {
  border-color: var(--fg-dim);
  color: var(--fg);
}
.evidence-badge-caret {
  font-size: 9px;
  line-height: 1;
  opacity: 0.7;
}
.evidence-detail {
  max-height: 320px;
  overflow-y: auto;
  padding: 8px 12px;
  background: var(--bg-soft);
  border: 1px solid var(--addctx-border);
  border-radius: 4px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--fg-dim);
  font-family: 'Source Code Pro', monospace;
  width: 100%;
  box-sizing: border-box;
}
.evidence-detail[hidden] { display: none; }
.evidence-detail ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.evidence-detail li {
  padding: 4px 0;
  border-bottom: 1px dotted var(--addctx-border);
  word-break: break-word;
}
.evidence-detail li:last-child { border-bottom: 0; }
.evidence-detail-name { color: var(--fg); }
.evidence-detail-meta { color: var(--fg-dimmer); }
.evidence-detail-subtitle {
  margin-bottom: 6px;
  color: var(--fg-dimmer);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 10px;
}
.evidence-detail-keywords {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dotted var(--addctx-border);
  color: var(--fg-dimmer);
  font-size: 10px;
}
.evidence-detail-dropped {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dotted var(--addctx-border);
  color: var(--fg-dimmer);
  font-size: 10px;
  font-style: italic;
}
/* Section headers inside expanded detail */
.evidence-detail-section-header {
  margin-top: 10px;
  margin-bottom: 4px;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
}
.evidence-detail-section-header:first-child { margin-top: 0; }
/* Source row: click to expand long paths */
.evidence-detail-row { cursor: pointer; }
.evidence-detail-row.expanded .evidence-detail-name {
  white-space: normal;
  word-break: break-all;
}
.evidence-detail-row:focus-visible {
  outline: 1px solid var(--fg-dim);
  outline-offset: 1px;
}
/* Collapsible section (Dropped for budget) */
.evidence-detail-collapsible { margin-top: 6px; }
.evidence-detail-collapsible-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}
.evidence-detail-collapsible-head:focus-visible {
  outline: 1px solid var(--fg-dim);
  outline-offset: 1px;
}
.evidence-detail-collapsible-caret {
  font-size: 9px;
  line-height: 1;
  opacity: 0.7;
  margin-left: 6px;
}
.evidence-detail-collapsible-body { margin-top: 4px; }
.evidence-detail-collapsible-body[hidden] { display: none; }
/* Tinted drop-count chips on the collapsed pill.
   Muted backgrounds with thin 1px borders. Subtle, not aggressive. */
.evidence-chip {
  display: inline-block;
  font-size: 10px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-family: 'Source Code Pro', monospace;
  letter-spacing: 0.01em;
}
.evidence-chip-budget {
  background: rgba(217, 119, 6, 0.10);
  border-color: rgba(217, 119, 6, 0.35);
  color: #d97706;
}
.evidence-chip-dup {
  background: rgba(37, 99, 235, 0.10);
  border-color: rgba(37, 99, 235, 0.35);
  color: #60a5fa;
}
.evidence-chip-noise {
  background: rgba(244, 63, 94, 0.10);
  border-color: rgba(244, 63, 94, 0.35);
  color: #f43f5e;
}
/* Plain-text inline summary on the collapsed pill (e.g. "4 duplicates merged").
   Lighter visual weight than the tinted chips; reads like prose. */
.evidence-badge-inline {
  font-size: 11px;
  color: var(--fg-dimmer);
  font-family: 'Source Code Pro', monospace;
  letter-spacing: 0.01em;
}
/* "Why the budget caps things" explainer block at the top of the detail panel.
   Tinted left border to signal "read me first" without shouting. */
.evidence-explainer {
  padding: 8px 12px;
  margin-bottom: 12px;
  background: var(--bg-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 4px 4px 0;
  font-size: 11px;
  color: var(--fg-dim);
  line-height: 1.6;
}
.evidence-explainer p {
  margin: 0 0 6px 0;
}
.evidence-explainer p:last-child { margin-bottom: 0; }
.evidence-explainer strong {
  color: var(--fg);
  font-weight: 600;
}
/* Large section headers used by the plain-English rewrite of the detail panel.
   Replaces the older .evidence-detail-section-header inside the new layout. */
.evidence-section-header-large {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 12px 0 6px 0;
}
.evidence-section-header-large:first-child { margin-top: 0; }
/* Plain-English blurb that sits between a section header and its data list. */
.evidence-section-blurb {
  margin: 0 0 6px 0;
  color: var(--fg-dim);
  line-height: 1.5;
  font-size: 11px;
}
.evidence-section-blurb p {
  margin: 0 0 4px 0;
}
.evidence-section-blurb p:last-child { margin-bottom: 0; }
/* Ranking-signal block (under the "Ranking signal" header). Same look as blurb. */
.evidence-ranking-signal {
  margin: 0 0 4px 0;
  color: var(--fg-dim);
  line-height: 1.5;
  font-size: 11px;
}
.evidence-ranking-signal p {
  margin: 0 0 4px 0;
}
.evidence-ranking-signal p:last-child { margin-bottom: 0; }

/* ----- Citation warnings -----
 * Amber-tinted panel rendered below a Claude message when validateCitations
 * flags one or more cited sources that don't match the source bundle
 * shipped to the model. See appendCitationWarnings() in app.js.
 */
.citation-warning {
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 4px;
  font-size: 11px;
  color: var(--fg);
}
.citation-warning-header {
  font-weight: 600;
  color: #f59e0b;
  margin-bottom: 4px;
  font-size: 12px;
}
.citation-warning-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.citation-warning-list li {
  padding: 2px 0;
  color: var(--fg-dim);
}
.citation-warning-list code {
  background: rgba(245, 158, 11, 0.12);
  padding: 1px 4px;
  border-radius: 3px;
  color: var(--fg);
}
.citation-warning-hint {
  margin-top: 6px;
  color: var(--fg-dim);
  font-style: italic;
}

/* ===== Source TOC explorer modal (Browse sources) ===== */
.apb-action-btn {
  margin-left: auto;
  background: var(--button-bg);
  color: var(--fg-dim);
  border: 1px solid var(--button-border);
  font-family: inherit;
  font-size: 11px;
  padding: 4px 10px;
  cursor: pointer;
  border-radius: 4px;
}
.apb-action-btn:hover {
  color: var(--fg);
  border-color: var(--fg-dim);
}
.modal-content-wide { max-width: 900px; }
.sources-modal-filter {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 16px 0;
}
.sources-filter-input {
  flex: 1;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--fg);
  padding: 6px 10px;
  font-family: inherit;
  font-size: 12px;
  border-radius: 4px;
}
.sources-filter-select {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--fg);
  padding: 6px 8px;
  font-family: inherit;
  font-size: 12px;
  border-radius: 4px;
}
.sources-modal-count {
  font-size: 11px;
  color: var(--fg-dim);
  font-family: 'Roboto Mono', monospace;
}
.sources-list {
  max-height: 65vh;
  overflow-y: auto;
  border: 1px solid var(--addctx-border);
  border-radius: 4px;
}
.src-row {
  padding: 10px 14px;
  border-bottom: 1px solid var(--addctx-border);
  font-size: 11px;
}
.src-row:hover { background: var(--bg-soft); }
.src-row-head {
  display: grid;
  grid-template-columns: 60px 1fr 70px 110px 90px;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}
.src-idx { color: var(--fg-dimmer); font-family: 'Roboto Mono', monospace; }
.src-title { font-weight: 600; }
.src-imp {
  font-size: 10px;
  background: var(--bg-soft);
  padding: 1px 6px;
  border-radius: 8px;
  color: var(--fg-dim);
  text-align: center;
}
.src-type { font-size: 10px; color: var(--fg-dim); font-family: 'Roboto Mono', monospace; }
.src-date { font-size: 10px; color: var(--fg-dim); font-family: 'Roboto Mono', monospace; }
.src-summary {
  color: var(--fg-dim);
  font-size: 11px;
  line-height: 1.5;
  margin: 4px 0;
}
.src-key-facts {
  margin: 4px 0;
  padding-left: 20px;
  font-size: 11px;
  color: var(--fg);
}
.src-key-facts li {
  padding: 1px 0;
}
.src-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.src-topic-chip {
  font-size: 10px;
  padding: 1px 6px;
  background: var(--addctx-bg);
  border: 1px solid var(--addctx-border);
  border-radius: 8px;
  color: var(--fg-dim);
}
.sources-empty {
  padding: 24px;
  text-align: center;
  color: var(--fg-dim);
  font-size: 12px;
}

/* ===== Two-tier evidence badge source rows =====
   Used by appendEvidenceBadge to render Tier 1 (TOC) and Tier 2 (Verbatim)
   source lists. Each row shows a colored tier dot, [N/M] index, title,
   importance pill, type, and date. Click a row to expand inline detail. */
.evidence-source-list {
  display: flex;
  flex-direction: column;
  margin: 0 0 8px 0;
}
.evidence-source-row {
  display: grid;
  grid-template-columns: 14px 60px 1fr 60px 110px 90px;
  gap: 8px;
  padding: 4px 8px;
  font-size: 11px;
  font-family: 'Roboto Mono', 'Source Code Pro', monospace;
  cursor: pointer;
  border-bottom: 1px dotted var(--addctx-border);
  align-items: center;
}
.evidence-source-row:hover {
  background: var(--bg-soft);
}
.evidence-source-row:focus-visible {
  outline: 1px solid var(--fg-dim);
  outline-offset: -1px;
}
.evidence-source-row.expanded {
  background: var(--bg-soft);
}
.evidence-source-tier-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.evidence-source-tier-dot-verbatim { background: #10b981; } /* green */
.evidence-source-tier-dot-toc      { background: #f59e0b; } /* amber */
.evidence-source-idx {
  color: var(--fg-dimmer);
}
.evidence-source-title {
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.evidence-source-row.expanded .evidence-source-title {
  white-space: normal;
  word-break: break-word;
}
.evidence-source-imp {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--bg-soft);
  color: var(--fg-dim);
  text-align: center;
  border: 1px solid var(--addctx-border);
}
.evidence-source-type,
.evidence-source-date {
  color: var(--fg-dimmer);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.evidence-source-detail {
  padding: 8px 24px;
  background: var(--bg-soft);
  font-size: 11px;
  border-left: 2px solid var(--addctx-border);
  margin-bottom: 4px;
  color: var(--fg-dim);
  line-height: 1.5;
}
.evidence-source-detail[hidden] { display: none; }
.evidence-source-detail strong {
  color: var(--fg);
  font-weight: 600;
}
.evidence-source-detail ul {
  margin: 4px 0;
  padding-left: 20px;
  list-style: disc;
  display: block;
}
.evidence-source-detail ul li {
  border-bottom: none;
  padding: 1px 0;
}
.evidence-source-detail > div,
.evidence-source-detail > strong {
  display: block;
  margin: 4px 0;
}
.evidence-source-show-all {
  font-size: 10px;
  padding: 4px 8px;
  margin: 4px 0 12px 0;
  color: var(--fg-dim);
  cursor: pointer;
  user-select: none;
  font-family: 'Source Code Pro', monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.evidence-source-show-all:hover { color: var(--fg); }
.evidence-source-show-all:focus-visible {
  outline: 1px solid var(--fg-dim);
  outline-offset: 1px;
}

/* ----- Deep dive mode ----- */
.ask-mode-btn {
  background: var(--button-bg);
  color: var(--fg-dim);
  border: 1px solid var(--button-border);
  font-family: inherit;
  font-size: 11px;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 4px;
  margin-left: 12px;
}
.ask-mode-btn:hover { color: var(--fg); border-color: var(--fg); }
.dd-explainer {
  color: var(--fg-dim);
  font-size: 12px;
  margin-bottom: 16px;
  line-height: 1.5;
}
.dd-stats {
  background: var(--bg-soft);
  border: 1px solid var(--addctx-border);
  border-radius: 4px;
  padding: 12px 16px;
  margin: 12px 0;
}
.dd-stat-row {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  font-size: 12px;
}
.dd-stat-label { color: var(--fg-dim); }
.dd-cost {
  border-top: 1px solid var(--addctx-border);
  margin-top: 6px;
  padding-top: 8px;
  font-weight: 600;
  color: var(--fg);
}
.dd-question label {
  display: block;
  font-size: 12px;
  color: var(--fg-dim);
  margin-bottom: 4px;
}
.dd-question textarea {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--fg);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 12px;
  border-radius: 4px;
  resize: vertical;
}
.dd-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
}

/* ----- Model used badge -----
 * Small pill under a Claude message showing which model answered.
 * Default = grey. Sonnet quick-fact route = amber. Auto-downgrade = blue.
 */
.model-used-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 12px;
  background: var(--bg-soft);
  border: 1px solid var(--addctx-border);
  color: var(--fg-dim);
  margin-top: 6px;
  margin-right: 6px;
  cursor: help;
}
.model-used-badge .mub-icon { font-size: 12px; }
.model-used-badge-sonnet {
  border-color: rgba(245, 158, 11, 0.5);
  color: var(--fg);
  background: rgba(245, 158, 11, 0.06);
}
.model-used-badge-sonnet .mub-icon { color: #f59e0b; }
.model-used-badge-downgraded {
  border-color: rgba(96, 165, 250, 0.4);
  background: rgba(96, 165, 250, 0.06);
}

/* ====== PROJECT HEALTH BADGE ====== */
.pc-health {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 3px 8px;
  font-size: 10px;
  font-family: 'Source Code Pro', monospace;
  letter-spacing: 0.04em;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  background: transparent;
  color: var(--fg-dim);
  cursor: pointer;
  user-select: none;
  align-self: flex-start;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.pc-health:hover {
  border-color: var(--card-border-hover);
  color: var(--fg);
}
.pc-health:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.pc-health-dot { font-size: 10px; line-height: 1; }
.pc-health-text { font-weight: 600; }
.pc-health-frac { color: var(--fg-dimmer); }
.pc-health-loading { opacity: 0.5; }
.pc-health-green { border-color: rgba(16, 185, 129, 0.5); color: #10b981; }
.pc-health-amber { border-color: rgba(245, 158, 11, 0.5); color: #f59e0b; }
.pc-health-red { border-color: rgba(244, 63, 94, 0.55); color: #f43f5e; }
.pc-health-green .pc-health-frac,
.pc-health-amber .pc-health-frac,
.pc-health-red .pc-health-frac { color: var(--fg-dim); }
.project-card.active .pc-health {
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--bg);
}
.project-card.active .pc-health-frac { color: var(--bg); opacity: 0.7; }

/* Corner indicator: visible only when project.review_required is true */
.pc-review-corner {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f43f5e;
  color: #fff;
  font-family: 'Source Code Pro', monospace;
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--bg);
  pointer-events: none;
}

/* ====== HEALTH MODAL ====== */
.hm-stats { margin-top: 4px; }
.hm-headline {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--card-border);
  border-radius: 6px;
  margin-bottom: 12px;
  font-family: 'Source Code Pro', monospace;
  font-size: 13px;
}
.hm-headline .hm-dot { font-size: 14px; }
.hm-headline .hm-score { font-weight: 700; letter-spacing: 0.04em; }
.hm-headline .hm-frac { color: var(--fg-dim); font-size: 11px; }
.hm-headline-green { border-color: rgba(16, 185, 129, 0.5); }
.hm-headline-amber { border-color: rgba(245, 158, 11, 0.5); }
.hm-headline-red { border-color: rgba(244, 63, 94, 0.55); }
.hm-review-flag {
  margin-left: auto;
  padding: 2px 8px;
  border: 1px solid #f43f5e;
  border-radius: 999px;
  color: #f43f5e;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hm-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.hm-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 4px;
}
.hm-stat-label {
  font-size: 10px;
  color: var(--fg-dimmer);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.hm-stat-val {
  font-family: 'Source Code Pro', monospace;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
}
.hm-section-heading {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-dim);
  margin: 16px 0 8px;
  font-weight: 600;
}
.hm-top-list,
.hm-flag-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hm-top-list li,
.hm-flag-list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  padding: 4px 8px;
  border-bottom: 1px dashed var(--card-border);
}
.hm-top-imp {
  font-family: 'Source Code Pro', monospace;
  font-weight: 700;
  color: var(--fg);
  min-width: 28px;
}
.hm-top-title,
.hm-flag-title { color: var(--fg-dim); word-break: break-word; }
.hm-flag-chip {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border: 1px solid rgba(244, 63, 94, 0.5);
  color: #f43f5e;
  border-radius: 999px;
  margin-left: 4px;
}
.hm-empty {
  font-size: 11px;
  color: var(--fg-dimmer);
  font-style: italic;
  margin: 4px 0;
}
.hm-table-wrap {
  margin-top: 12px;
  max-height: 360px;
  overflow: auto;
  border: 1px solid var(--card-border);
  border-radius: 4px;
}
.hm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  font-family: 'Source Code Pro', monospace;
}
.hm-table th,
.hm-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--card-border);
  text-align: left;
  vertical-align: top;
}
.hm-table thead th {
  position: sticky;
  top: 0;
  background: var(--card-bg);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-dim);
  z-index: 1;
}
.hm-table tbody tr:hover { background: var(--card-bg); }
.hm-td-title { color: var(--fg); word-break: break-word; max-width: 360px; }
.hm-td-num { text-align: right; color: var(--fg); white-space: nowrap; }