/* ==========================================================================
   pages/brand-view.css — D2C brand intelligence view (v2.18).
   Tabbed shell shown when a brand is selected from the top-right Brand
   selector. JS in public/js/brandView.js flips inline display between
   none and flex on #brand-view; this file owns visual rules only.
   ========================================================================== */

.brand-view {
  flex: 1;
  flex-direction: column;
  overflow-y: auto;
  padding: 0;
  background: var(--bg);
}

/* When JS shows the view it sets inline display:flex. Tabs + panels need
   the parent to be a column flex container; keep that contract here. */
.brand-view[style*="display:flex"],
.brand-view[style*="display: flex"] {
  display: flex !important;
}

/* ── Header (v2.18 identity strip) ─────────────────────────────
   Two-column layout: .bv-header-left (favicon + text block) on the
   left, .bv-header-right (actions) on the right. The favicon
   element is injected by brandView.js renderHeaderFavicon — either
   an <img class="bv-header-favicon"> or, on image error, a letter
   div class="bv-header-favicon-fallback". */
.bv-header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
}

.bv-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.bv-header-favicon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border);
  padding: 4px;
  object-fit: contain;
  background: var(--bg);
  flex-shrink: 0;
}

.bv-header-favicon-fallback {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #f5f3ff;
  border: 1px solid #ede9fe;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: #6D28D9;
  flex-shrink: 0;
}

.bv-header-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.bv-header-brand-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bv-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* v2.18 — meta row holds the URL, country, and language. Each child
   is rendered conditionally by brandView.js's renderBrandMeta, with
   " · " separators (.bv-meta-sep) interleaved so a missing field
   never collapses to "· undefined". */
.bv-header-meta {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: var(--text-secondary);
  flex-wrap: wrap;
  gap: 0;
}

.bv-meta-sep {
  color: var(--text-muted);
  margin: 0 4px;
}

.bv-brand-url {
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
}
.bv-brand-url:hover {
  color: var(--accent);
  text-decoration: underline;
}

.bv-brand-country,
.bv-brand-language {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.2;
  white-space: nowrap;
}

.bv-scan-btn {
  font-size: 12px;
  padding: 6px 12px;
  height: 32px;
}

/* ── Tabs ─────────────────────────────────────────────────────── */
/* Sticky at the top of #brand-view's scroll container. Height is fixed
   at 49px so .bv-filters can sit flush below at top:49px with zero gap
   — every gap-creating margin/padding-top is intentionally absent. */
.bv-tabs {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0 24px;
  height: 49px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 110;
  flex-shrink: 0;
  overflow-x: auto;
}

.bv-tabs::-webkit-scrollbar { height: 0; }

.bv-tab {
  padding: 10px 14px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 400;
  color: var(--text-secondary);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.bv-tab:hover {
  color: var(--text-secondary);
}

.bv-tab.active {
  color: #6D28D9;
  border-bottom-color: var(--accent);
  font-weight: 500;
}

/* ── Panels ───────────────────────────────────────────────────── */
.bv-panels {
  padding: 24px;
  padding-bottom: 48px;
  flex: 1;
  min-height: 0;
}

.bv-panel {
  display: none;
  padding-bottom: 32px;
}

.bv-panel.active {
  display: block;
}

.bv-coming-soon {
  padding: 48px;
  text-align: center;
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 13px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
}

/* ==========================================================================
   Sidebar brand-mode nav (#sb-brand-nav). Reuses .ni base styling from
   sidebar.css but adds its own labels and active-state hook.
   ========================================================================== */
.sb-brand-nav {
  padding: 8px 0;
  flex: 1;
  overflow-y: auto;
}

.sb-brand-nav .sb-section-label {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 0 16px 6px;
  margin-top: 20px;
}

.sb-brand-nav .sb-section-label:first-child {
  margin-top: 0;
}

.sb-brand-nav .ni {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 8px;
  margin: 0 8px;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
  user-select: none;
  transition: var(--transition);
}

.sb-brand-nav .ni:hover {
  background: var(--surface);
  color: var(--text-primary);
}

.sb-brand-nav .ni.active,
.sb-brand-nav .ni--active {
  background: var(--accent-light);
  color: var(--accent);
  font-weight: 500;
}

/* ==========================================================================
   Overview panel — hero row, priority actions, engine bars, perception.
   ========================================================================== */

.bv-section {
  margin-bottom: 24px;
}
.bv-section:last-child {
  margin-bottom: 0;
}

.bv-section-title {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 12px;
}

/* Card base — no shadow, no gradient. */
.bv-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  background: var(--bg);
}

.bv-card-label {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.bv-big-number {
  font-family: var(--font);
  font-size: 32px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.1;
}

.bv-unit {
  font-size: 16px;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 2px;
}

.bv-sub {
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
  line-height: 1.4;
}

/* Overview Card 1 — mention rate + confidence badge */
.bv-mention-rate {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-family: var(--font);
  font-size: 12px;
}
.bv-mention-rate-label { color: var(--text-muted); }
.bv-mention-rate-value {
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.bv-conf-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.bv-conf-dot { font-size: 10px; line-height: 1; }
.bv-conf-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
}
.bv-conf-badge--high   .bv-conf-dot { color: var(--success); }
.bv-conf-badge--medium .bv-conf-dot { color: var(--warning); }
.bv-conf-badge--low    .bv-conf-dot { color: var(--text-muted); }

.bv-empty {
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-muted);
  padding: 8px 0;
  text-align: center;
}

.bv-error {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-secondary);
  background: var(--bg-elevated);
}

/* ── Hero row (3-up grid) ────────────────────────────────────── */
.bv-hero-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

@media (max-width: 900px) {
  .bv-hero-grid { grid-template-columns: 1fr; }
}

.bv-score-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.bv-grade {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--surface);
  color: var(--text-secondary);
  letter-spacing: 0.04em;
}

.bv-grade--a { background: rgba(22, 163, 74, 0.10); color: var(--success); }
.bv-grade--b { background: rgba(22, 163, 74, 0.08); color: var(--success); }
.bv-grade--c { background: rgba(202, 138, 4, 0.10); color: var(--warning); }
.bv-grade--d { background: rgba(220, 38, 38, 0.08); color: var(--danger); }
.bv-grade--f { background: rgba(220, 38, 38, 0.10); color: var(--danger); }

.bv-sent-bar {
  display: flex;
  height: 6px;
  margin-top: 12px;
  background: var(--surface);
  border-radius: 99px;
  overflow: hidden;
}

.bv-sent-seg { height: 100%; }
.bv-sent-seg--positive { background: var(--success); }
.bv-sent-seg--neutral  { background: var(--text-muted); }
.bv-sent-seg--negative { background: var(--danger); }

.bv-sent-counts {
  font-family: var(--font);
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 8px;
}

.bv-quote {
  margin-top: 10px;
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.bv-card-action {
  margin-top: 14px;
  font-size: 12px;
  padding: 6px 12px;
  height: 32px;
  width: 100%;
}

/* ── Priority Actions ────────────────────────────────────────── */
.bv-priority-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bv-priority-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
}

.bv-priority-icon {
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}

.bv-priority-text {
  flex: 1;
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.4;
  min-width: 0;
}

.bv-priority-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.bv-impact-badge,
.bv-effort-badge {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 99px;
  letter-spacing: 0.02em;
  text-transform: none;
}

.bv-impact-badge--high   { background: rgba(22, 163, 74, 0.08); color: var(--success); }
.bv-impact-badge--medium { background: rgba(202, 138, 4, 0.08); color: var(--warning); }
.bv-impact-badge--low    { background: rgba(0, 0, 0, 0.04);     color: var(--text-secondary); }

.bv-effort-badge {
  background: var(--surface);
  color: var(--text-secondary);
}

.bv-points-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
}

/* ── Engine Performance bars ─────────────────────────────────── */
.bv-engine-bars {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bv-engine-bar {
  display: grid;
  grid-template-columns: 110px 1fr 48px;
  align-items: center;
  gap: 12px;
}

.bv-engine-bar-label {
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bv-engine-bar-track {
  height: 6px;
  background: var(--surface);
  border-radius: 99px;
  overflow: hidden;
}

.bv-engine-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 99px;
  transition: width 0.3s ease;
}

.bv-engine-bar-value {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  text-align: right;
}

/* ── Brand Perception ────────────────────────────────────────── */
.bv-perception-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bv-perception-quote {
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.55;
}

/* "How AI sees your brand" — markdown-rendered snippet. Reuses the
   .bvcdp-md-* classes emitted by renderMarkdown(); those are scoped to
   .bvcdp-response elsewhere, so the box needs its own spacing here.
   font-style:normal counters the container italic so bold/headings read
   as emphasis, not bold-italic. */
.bv-perception-quote .bvcdp-md-p { margin: 0 0 8px; }
.bv-perception-quote .bvcdp-md-p:last-child { margin-bottom: 0; }
.bv-perception-quote .bvcdp-md-list { margin: 0 0 8px; padding-left: 18px; }
.bv-perception-quote .bvcdp-md-list li { margin: 2px 0; }
.bv-perception-quote .bvcdp-md-h2,
.bv-perception-quote .bvcdp-md-h3 {
  font-style: normal;
  font-weight: 600;
  color: var(--text);
  margin: 10px 0 6px;
}
.bv-perception-quote .bvcdp-md-h2 { font-size: 14px; }
.bv-perception-quote .bvcdp-md-h3 { font-size: 13px; }
.bv-perception-quote strong { font-style: normal; font-weight: 600; color: var(--text); }

.bv-perception-attr {
  font-family: var(--font);
  font-size: 11px;
  color: var(--text-muted);
}

.bv-link {
  align-self: flex-start;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  margin-top: 4px;
}

.bv-link:hover { text-decoration: underline; }

/* ── Skeleton loaders ────────────────────────────────────────── */
.bv-skeleton {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  animation: bv-skeleton-pulse 1.2s ease-in-out infinite;
}

.bv-skeleton--label  { width: 40%; height: 12px; margin-bottom: 12px; }
.bv-skeleton--number { width: 60%; height: 32px; margin-bottom: 14px; }
.bv-skeleton--sub    { width: 80%; height: 12px; }
.bv-skeleton--title  { width: 22%; height: 12px; margin-bottom: 12px; }
.bv-skeleton--row    { width: 100%; height: 14px; margin-bottom: 10px; }
.bv-skeleton--row:last-child { margin-bottom: 0; }

@keyframes bv-skeleton-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

/* ==========================================================================
   Mentions tab — stats, filters, table, load-more.
   ========================================================================== */

.bv-mentions-stats {
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.bv-mentions-filters {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.bv-engine-filter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.bv-engine-filter .bv-filter-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 400;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
}

.bv-engine-filter .bv-filter-btn:hover {
  color: var(--text-primary);
}

.bv-engine-filter .bv-filter-btn.active {
  background: var(--accent-light);
  color: var(--accent);
  font-weight: 500;
}

.bv-mentions-search {
  flex: 1;
  min-width: 200px;
  max-width: 320px;
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
  margin-bottom: 0;
}

.bv-mentions-export {
  margin-left: auto;
}

/* ── Table ───────────────────────────────────────────────────── */
.bv-mentions-table-host {
  width: 100%;
}

.bv-mentions-table {
  width: 100%;
}

.bv-mentions-row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1.5fr) minmax(0, 2fr) 80px 60px 110px 80px;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 4px 12px;
  border-bottom: 1px solid var(--border);
  transition: var(--transition);
}

.bv-mentions-row:hover {
  background: var(--surface);
}

.bv-mentions-row--head {
  border-bottom: 2px solid var(--border);
  min-height: 32px;
}

.bv-mentions-row--head:hover {
  background: transparent;
}

.bv-mentions-row--skeleton {
  padding: 10px 12px;
}

.bv-mentions-cell {
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-primary);
  min-width: 0;
}

.bv-mentions-cell--head {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.bv-mentions-cell--prompt {
  font-weight: 600;
}

.bv-prompt-text,
.bv-response-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bv-mentions-cell--response .bv-response-text {
  color: var(--text-secondary);
  font-weight: 400;
}

.bv-mentions-cell--check {
  text-align: center;
}

.bv-mentions-cell--date {
  text-align: right;
  color: var(--text-muted);
}

/* Engine cell */
.bv-engine-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.bv-engine-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.bv-engine-name {
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Check / cross marks */
.bv-check {
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}
.bv-check--yes { color: var(--success); }
.bv-check--no  { color: var(--danger); }

/* Sentiment dots */
.bv-sentiment-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  background: var(--text-muted);
}
.bv-sentiment-dot--positive { background: var(--success); }
.bv-sentiment-dot--neutral  { background: var(--text-muted); }
.bv-sentiment-dot--negative { background: var(--danger); }

.bv-sentiment-label {
  font-family: var(--font);
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: capitalize;
}

.bv-mentions-date {
  font-family: var(--font);
  font-size: 11px;
  color: var(--text-muted);
}

.bv-mentions-empty {
  margin-top: 24px;
}

/* Load more */
.bv-load-more {
  display: block;
  margin: 16px auto 0;
  min-width: 140px;
}

/* Narrow screens — collapse the response column away first. */
@media (max-width: 1100px) {
  .bv-mentions-row {
    grid-template-columns: 110px minmax(0, 1.5fr) 70px 60px 100px 70px;
  }
  .bv-mentions-cell--response { display: none; }
}

@media (max-width: 700px) {
  .bv-mentions-row {
    grid-template-columns: 90px minmax(0, 1fr) 50px 50px 70px;
  }
  .bv-mentions-cell--check + .bv-mentions-cell + .bv-mentions-cell--date {
    /* keep date but drop sentiment label width */
  }
}

/* ==========================================================================
   Sentiment tab — rebuild (v2.18). Hero card combines gauge + perception
   side-by-side. Head-to-Head, Timeline (3-line), Known For (2-col), and
   Engine Breakdown table follow. No shadows, no gradients.
   ========================================================================== */

/* ── Section 1: Sentiment Hero ─────────────────────────────── */
.bv-sent-hero {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  padding: 24px;
  align-items: stretch;
}

.bv-sent-hero-left,
.bv-sent-hero-right {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.bv-sent-hero-left {
  align-items: center;
  gap: 14px;
}

@media (max-width: 900px) {
  .bv-sent-hero { grid-template-columns: 1fr; gap: 24px; }
  .bv-sent-hero-left { align-items: flex-start; }
}

/* Gauge — pure SVG ring, 120×120 */
.bv-gauge {
  position: relative;
  width: 120px;
  height: 120px;
}

.bv-gauge-svg {
  width: 120px;
  height: 120px;
  display: block;
}

.bv-gauge-track {
  fill: none;
  stroke: var(--border);
  stroke-width: 6;
  stroke-linecap: round;
}

.bv-gauge-fill {
  fill: none;
  stroke: var(--success);
  stroke-width: 6;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 60px 60px;
  transition: stroke-dasharray 0.4s ease;
}

.bv-gauge-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  pointer-events: none;
}

.bv-gauge-score {
  font-family: var(--font);
  font-size: 28px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1;
}

.bv-gauge-suffix {
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-muted);
}

.bv-gauge-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  font-family: var(--font);
  font-size: 11px;
  color: var(--text-secondary);
}

.bv-gauge-count {
  display: inline-flex;
  align-items: center;
}

.bv-gauge-count-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
  background: var(--text-muted);
}

.bv-gauge-count--positive .bv-gauge-count-dot { background: var(--success); }
.bv-gauge-count--neutral  .bv-gauge-count-dot { background: var(--text-muted); }
.bv-gauge-count--negative .bv-gauge-count-dot { background: var(--danger); }

/* Larger segment bar variant */
.bv-sent-bar--lg {
  height: 8px;
  width: 100%;
  border-radius: 4px;
  background: var(--surface);
}

/* ── Right column: perception ──────────────────────────────── */
.bv-sent-hero-right > .bv-section-title {
  margin-bottom: 10px;
}

.bv-perception-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  align-self: flex-start;
}

.bv-perception-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  /* Transparent 1px border so the JS-applied active borderColor doesn't
     shift layout (active and inactive states have identical box size). */
  border: 1px solid transparent;
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 400;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
}

.bv-perception-tab:hover { color: var(--text-primary); }

/* Engine logo tile inside each tab — same fallback pattern as the
   Mentions table / detail-panel header, sized down for inline-tab use. */
.bv-perception-tab-logo {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--surface);
}
.bv-perception-tab-initial {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1;
}
.bv-perception-tab-img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #fff;
}

/* .active only sets weight here; color / background / border-color are
   set inline by applyPerceptionTabColors() using the engine's brand
   color from ENGINE_COLOR_MAP. */
.bv-perception-tab.active {
  font-weight: 500;
}

.bv-perception-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.bv-perception-quote {
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.55;
  white-space: pre-wrap;
}

.bv-perception-quote mark.bv-hl-pos,
.bv-perception-quote mark.bv-hl-neg {
  font-style: normal;
  padding: 0 2px;
  border-radius: 3px;
}
.bv-perception-quote mark.bv-hl-pos {
  background: rgba(22, 163, 74, 0.12);
  color: var(--success);
}
.bv-perception-quote mark.bv-hl-neg {
  background: rgba(220, 38, 38, 0.12);
  color: var(--danger);
}

.bv-perception-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 8px;
}

.bv-perception-legend {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.bv-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.bv-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.bv-legend-dot--pos { background: var(--success); }
.bv-legend-dot--neg { background: var(--danger); }

.bv-legend-label {
  font-family: var(--font);
  font-size: 11px;
  color: var(--text-secondary);
}

.bv-perception-updated {
  font-family: var(--font);
  font-size: 11px;
  color: var(--text-muted);
}

/* ── Section 2: Head-to-Head ───────────────────────────────── */
.bv-h2h-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
}

.bv-h2h-card {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bv-h2h-divider {
  width: 1px;
  background: var(--border);
  align-self: stretch;
  margin: 0 24px;
  border-left: 1px dashed var(--border);
  background: transparent;
}

.bv-h2h-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bv-h2h-favicon {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  object-fit: contain;
  flex-shrink: 0;
  background: var(--surface);
}

.bv-h2h-name {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.bv-h2h-metrics {
  display: flex;
  gap: 24px;
}

.bv-h2h-metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bv-h2h-metric-label {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.bv-h2h-metric-value {
  font-family: var(--font);
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.1;
}

.bv-h2h-metric-value--accent { color: var(--accent); }
.bv-h2h-metric-value--muted  { color: var(--text-secondary); }
.bv-h2h-cmp--up   { color: var(--danger); }
.bv-h2h-cmp--down { color: var(--success); }
.bv-h2h-cmp--even { color: var(--text-secondary); }

.bv-h2h-known {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bv-h2h-known-label {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.bv-h2h-empty {
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .bv-h2h-grid { grid-template-columns: 1fr; }
  .bv-h2h-divider { width: 100%; height: 1px; border-left: none; border-top: 1px dashed var(--border); margin: 0; }
}

/* ── Section 3: Timeline ───────────────────────────────────── */
.bv-timeline-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.bv-timeline-head .bv-section-title {
  margin-bottom: 0;
}

.bv-timeline-range {
  font-family: var(--font);
  font-size: 11px;
  color: var(--text-muted);
}

.bv-timeline-toggles {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  align-self: flex-start;
}

.bv-timeline-toggle {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 400;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
}

.bv-timeline-toggle:hover { color: var(--text-primary); }

.bv-timeline-toggle.active {
  background: var(--accent-light);
  color: var(--accent);
  font-weight: 500;
}

.bv-chart-card {
  display: flex;
  flex-direction: column;
}

.bv-chart-wrap {
  position: relative;
  width: 100%;
  height: 180px;
}

.bv-chart-canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* ── Section 4: Known For (split) ──────────────────────────── */
.bv-known-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.bv-known-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.bv-known-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.bv-known-dot--pos { background: var(--success); }
.bv-known-dot--neg { background: var(--danger); }

.bv-known-title {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.bv-known-empty,
.bv-known-clear {
  font-family: var(--font);
  font-size: 12px;
}

.bv-known-clear {
  color: var(--success);
}

@media (max-width: 700px) {
  .bv-known-grid { grid-template-columns: 1fr; }
}

/* ── Phrase pills ─────────────────────────────────────────── */
.bv-phrase-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bv-phrase-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font);
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 99px;
  background: var(--surface);
  color: var(--text-secondary);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.bv-phrase-pill--positive {
  background: rgba(22, 163, 74, 0.10);
  color: var(--success);
}

.bv-phrase-pill--negative {
  background: rgba(220, 38, 38, 0.10);
  color: var(--danger);
}

/* ── Section 5: Engine Breakdown table ─────────────────────── */
.bv-engine-card {
  padding: 0;
}

.bv-engine-table {
  width: 100%;
}

.bv-engine-row {
  display: grid;
  grid-template-columns: 1.2fr 0.7fr 1fr 1fr 1fr 0.7fr;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  min-height: 44px;
}

.bv-engine-row:last-child { border-bottom: none; }

.bv-engine-row--head {
  border-bottom: 2px solid var(--border);
  min-height: 32px;
}

.bv-engine-cell {
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-primary);
  min-width: 0;
}

.bv-engine-cell--head {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.bv-engine-cell--sent {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bv-engine-sent-n {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1;
}

.bv-engine-sent-track {
  height: 4px;
  background: var(--surface);
  border-radius: 99px;
  overflow: hidden;
}

.bv-engine-sent-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.3s ease;
}

.bv-engine-sent-fill--positive { background: var(--success); }
.bv-engine-sent-fill--neutral  { background: var(--text-muted); }
.bv-engine-sent-fill--negative { background: var(--danger); }

.bv-engine-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 22px;
  padding: 0 8px;
  border-radius: 99px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
}

.bv-engine-score--green { background: rgba(22, 163, 74, 0.10); color: var(--success); }
.bv-engine-score--amber { background: rgba(202, 138, 4, 0.10); color: var(--warning); }
.bv-engine-score--red   { background: rgba(220, 38, 38, 0.10); color: var(--danger);  }

@media (max-width: 900px) {
  .bv-engine-row {
    grid-template-columns: 1.2fr 0.7fr 1fr 1fr 0.7fr;
  }
  .bv-engine-cell:nth-child(4) { display: none; } /* drop Neutral first on narrow */
}

/* ==========================================================================
   Competitors tab — v2.18 rebuild. Six sections of actionable
   intelligence; all data derives from existing API responses.
   ========================================================================== */

.bv-section-sub {
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-muted);
  margin-top: -6px;
  margin-bottom: 12px;
}

/* ── Section 1: Competitive Overview ───────────────────────── */
.bv-comp-hero {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bv-comp-stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 700px) {
  .bv-comp-stat-row { grid-template-columns: 1fr; }
}

.bv-comp-stat {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  background: var(--bg);
}

.bv-comp-stat-label {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.bv-comp-stat-value {
  font-family: var(--font);
  font-size: 28px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.1;
}

.bv-comp-stat-value--accent { color: var(--accent); }

.bv-comp-stat-suffix {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 6px;
}

.bv-comp-trend {
  display: inline-flex;
  align-items: center;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  margin-left: 8px;
  padding: 2px 6px;
  border-radius: 99px;
}

.bv-comp-trend--up   { background: rgba(22, 163, 74, 0.10); color: var(--success); }
.bv-comp-trend--down { background: rgba(220, 38, 38, 0.10); color: var(--danger); }

/* Brand bar race */
.bv-bar-race-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}

.bv-brand-bar-row {
  display: grid;
  grid-template-columns: 160px 1fr 60px;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
}

.bv-brand-bar-row--client {
  background: var(--accent-light);
}

.bv-brand-bar-label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.bv-brand-bar-favicon {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  object-fit: contain;
  flex-shrink: 0;
  background: var(--surface);
}

.bv-brand-bar-name {
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bv-brand-bar-you {
  display: inline-flex;
  align-items: center;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  background: var(--accent);
  color: #fff;
  padding: 1px 6px;
  border-radius: 99px;
  letter-spacing: 0.04em;
}

.bv-brand-bar-track {
  height: 8px;
  background: var(--surface);
  border-radius: 99px;
  overflow: hidden;
}

.bv-brand-bar-fill {
  height: 100%;
  background: var(--text-muted);
  border-radius: 99px;
  transition: width 0.6s ease;
}

.bv-brand-bar-fill--client { background: var(--accent); }

.bv-brand-bar-pct {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  text-align: right;
}

/* ── Section 2: Why They Rank ──────────────────────────────── */
.bv-why-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bv-why-card {
  border-left: 3px solid var(--danger);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bv-why-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.bv-why-favicon {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  object-fit: contain;
  background: var(--surface);
  flex-shrink: 0;
}

.bv-why-name {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.bv-why-rank {
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-secondary);
  padding: 2px 8px;
  background: var(--surface);
  border-radius: 99px;
}

.bv-why-reasons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bv-why-reason {
  position: relative;
  padding-left: 16px;
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.5;
}

.bv-why-reason::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--text-muted);
}

.bv-why-fix {
  align-self: flex-start;
  border: none;
  background: var(--accent-light);
  color: var(--accent);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
}

.bv-why-fix:hover { background: var(--accent); color: #fff; }

/* ── Section 3: Prompt Battleground table ──────────────────── */
.bv-battle-toggles { margin-bottom: 14px; }

.bv-battle-table-host { width: 100%; }

.bv-battle-table { width: 100%; }

.bv-battle-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) 60px minmax(0, 1.2fr) 100px 100px;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  min-height: 44px;
  transition: var(--transition);
}

.bv-battle-row:hover { background: var(--surface); }

.bv-battle-row--head {
  border-bottom: 2px solid var(--border);
  min-height: 32px;
}

.bv-battle-row--head:hover { background: transparent; }

.bv-battle-cell {
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-primary);
  min-width: 0;
}

.bv-battle-cell--head {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.bv-battle-cell--prompt { font-weight: 500; }

.bv-battle-prompt-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bv-battle-cell--check  { text-align: center; }
.bv-battle-cell--gap    { text-align: right; }

.bv-battle-comp-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
}

.bv-battle-comp-empty,
.bv-battle-gap--muted { color: var(--text-muted); }

.bv-battle-gap {
  font-family: var(--font-mono);
  font-size: 11px;
}

.bv-winner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 99px;
}

.bv-winner--you  { background: rgba(22, 163, 74, 0.10); color: var(--success); }
.bv-winner--comp { background: rgba(220, 38, 38, 0.10); color: var(--danger); }
.bv-winner--tie  { background: var(--surface);         color: var(--text-secondary); }
.bv-winner--none { background: transparent;            color: var(--text-muted); }

@media (max-width: 900px) {
  .bv-battle-row {
    grid-template-columns: minmax(0, 2fr) 40px 80px 80px;
  }
  .bv-battle-cell:nth-child(3) { display: none; } /* drop competitor name column */
}

/* ── Section 4: SOV donut + heatmap ───────────────────────── */
.bv-sov-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 16px;
}

@media (max-width: 900px) {
  .bv-sov-grid { grid-template-columns: 1fr; }
}

.bv-donut-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bv-donut-wrap {
  position: relative;
  width: 200px;
  height: 200px;
  align-self: center;
}

.bv-donut-canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.bv-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.bv-donut-center-val {
  font-family: var(--font);
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1;
}

.bv-donut-center-label {
  font-family: var(--font);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-top: 4px;
}

.bv-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bv-donut-legend-item {
  display: grid;
  grid-template-columns: 14px 1fr 48px;
  align-items: center;
  gap: 8px;
}

.bv-donut-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.bv-donut-legend-name {
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bv-donut-legend-pct {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: right;
}

/* Heatmap */
.bv-heatmap-card { padding: 0; }

.bv-heatmap { width: 100%; }

.bv-heatmap-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(5, minmax(48px, 1fr));
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-bottom: 1px solid var(--border);
  min-height: 36px;
}

.bv-heatmap-row:last-child { border-bottom: none; }

.bv-heatmap-row--head {
  border-bottom: 2px solid var(--border);
  min-height: 32px;
}

.bv-heatmap-row--client { background: var(--accent-light); }

.bv-heatmap-cell {
  font-family: var(--font);
  font-size: 11px;
  color: var(--text-primary);
  min-width: 48px;
  text-align: center;
  padding: 4px 0;
}

.bv-heatmap-cell--head {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.bv-heatmap-cell--name {
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bv-heatmap-cell--val {
  border-radius: 4px;
  color: var(--text-primary);
}

.bv-heatmap-val {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
}

/* ── Section 5: Competitor cards grid ──────────────────────── */
.bv-comp-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.bv-comp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.bv-comp-card--client {
  border-color: var(--accent);
}

.bv-comp-card-you {
  position: absolute;
  top: 12px;
  right: 12px;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  background: var(--accent);
  color: #fff;
  padding: 2px 8px;
  border-radius: 99px;
  letter-spacing: 0.04em;
}

.bv-comp-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.bv-comp-card-favicon {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  object-fit: contain;
  background: var(--surface);
  flex-shrink: 0;
}

.bv-comp-card-name-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.bv-comp-card-name {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bv-comp-pos {
  align-self: flex-start;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bv-comp-pos--leader     { background: rgba(22, 163, 74, 0.12); color: var(--success); }
.bv-comp-pos--challenger { background: rgba(109, 40, 217, 0.12); color: var(--accent); }
.bv-comp-pos--niche      { background: rgba(202, 138, 4, 0.12); color: var(--warning); }
.bv-comp-pos--emerging   { background: var(--surface);          color: var(--text-secondary); }

.bv-comp-card-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
}

.bv-comp-card-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bv-comp-card-metric-label {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.bv-comp-card-metric-value {
  font-family: var(--font);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.1;
}

.bv-comp-card-metric-value--accent { color: var(--accent); }

.bv-comp-card-known {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bv-comp-card-known-label {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.bv-comp-card-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.bv-comp-track,
.bv-comp-detail {
  flex: 1;
  font-family: var(--font);
  font-size: 11px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
}

.bv-comp-track:hover,
.bv-comp-detail:hover { color: var(--text-primary); border-color: var(--border-hover); }

.bv-comp-track.active {
  background: var(--accent-light);
  color: var(--accent);
  border-color: var(--accent);
}

/* ── Section 6: Competitive Gaps ───────────────────────────── */
.bv-gaps-card {
  padding: 0;
}

.bv-gap-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) auto 56px 90px auto;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  min-height: 48px;
}

.bv-gap-row:last-child { border-bottom: none; }

.bv-gap-prompt {
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-primary);
  min-width: 0;
}

.bv-gap-prompt-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bv-favicon-stack {
  display: inline-flex;
  align-items: center;
}

.bv-favicon-stack-img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--bg);
  object-fit: contain;
  margin-left: -6px;
}

.bv-favicon-stack-img:first-child { margin-left: 0; }

.bv-favicon-stack-more {
  font-family: var(--font);
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 6px;
}

.bv-gap-score {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  text-align: right;
}

.bv-gap-diff { text-align: center; }

.bv-difficulty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bv-difficulty--easy   { background: rgba(22, 163, 74, 0.08); color: var(--success); }
.bv-difficulty--medium { background: rgba(202, 138, 4, 0.08); color: var(--warning); }
.bv-difficulty--hard   { background: rgba(220, 38, 38, 0.08); color: var(--danger); }

.bv-gap-cta {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--accent);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.bv-gap-cta:hover {
  background: var(--accent-light);
  border-color: var(--accent);
}

@media (max-width: 900px) {
  .bv-gap-row {
    grid-template-columns: minmax(0, 1fr) auto 70px auto;
  }
  .bv-gap-score { display: none; }
}

/* ==========================================================================
   Sources tab — v2.18. Top Domains + Content Types, full table with
   filter/search, gap analysis, and a weekly discovery trend chart.
   ========================================================================== */

/* ── Section 1: Top Domains + Content Types ─────────────────── */
.bv-src-top-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
}

@media (max-width: 900px) {
  .bv-src-top-grid { grid-template-columns: 1fr; }
}

.bv-src-bar-card {
  padding: 16px;
}

.bv-src-bar-wrap {
  position: relative;
  width: 100%;
  height: 200px;
}

.bv-src-bar-canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.bv-src-types-card {
  padding: 16px;
}

.bv-src-types-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.bv-src-type-row {
  display: grid;
  grid-template-columns: 16px 1fr 40px;
  align-items: center;
  gap: 8px;
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-primary);
}

.bv-src-type-icon {
  font-size: 12px;
  line-height: 1;
  color: var(--text-muted);
}

.bv-src-type-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bv-src-type-pct {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: right;
}

.bv-src-type-track {
  grid-column: 1 / -1;
  height: 4px;
  background: var(--surface);
  border-radius: 99px;
  overflow: hidden;
  margin-top: -4px;
}

.bv-src-type-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 99px;
  transition: width 0.4s ease;
}

/* ── Section 2: All Sources table ───────────────────────────── */
.bv-src-table-host { width: 100%; }
.bv-src-table {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.bv-src-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1.2fr) 120px 80px 70px 110px;
  cursor: pointer;
  align-items: center;
  /* UI polish — gap was 12px, row padding was 6px 12px; both removed so
     cell-padding is the single source of internal whitespace and the
     leftmost cell isn't heavier than the rest. Cells abut; the
     border-right + uniform cell padding control spacing. */
  gap: 0;
  padding: 0;
  border-bottom: 1px solid var(--border);
  min-height: 44px;
  transition: var(--transition);
}

.bv-src-row:hover { background: rgba(109, 40, 217, 0.05); }

.bv-src-row--head {
  /* UI polish — was 2px; normalized to 1px so the header underline
     matches every other horizontal divider in the table (uniform grid). */
  border-bottom: 1px solid var(--border);
  min-height: 32px;
  cursor: default;
}

.bv-src-row--head:hover { background: transparent; }

/* UI polish — uniform internal padding on every cell so text never
   touches a vertical border and rows aren't cramped (~10px vertical,
   14px horizontal). Cells were previously bare spans with no box-model
   padding; the row's outer padding (now removed) wasn't enough. Same
   values used in the Mentions table below so both tables read as one
   coherent Searchable-style grid. Scoped to the Sources cell classes
   only — head children + body span children listed explicitly. */
.bv-src-cell,
.bv-src-cell--head,
.src-num,
.src-identity,
.src-type,
.src-used,
.src-growth,
.src-action {
  padding: 10px 14px;
}

/* Clean table end — the last data row inherits a bottom border from
   .bv-src-row above; clear it so the table closes flush against the
   surrounding section padding. */
.bv-src-row:last-child {
  border-bottom: none;
}

.bv-src-cell {
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-primary);
  min-width: 0;
}

.bv-src-cell--head {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.bv-src-cell--num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
}

.bv-src-cell--growth,
.bv-src-cell--link { text-align: right; }

.bv-src-source {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.bv-src-favicon {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  object-fit: contain;
  background: var(--surface);
  flex-shrink: 0;
}

.bv-src-domain {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Type pills */
.bv-src-type-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 99px;
  letter-spacing: 0.02em;
  text-transform: none;
  background: var(--surface);
  color: var(--text-secondary);
}

.bv-src-type-pill--editorial   { background: rgba(109, 40, 217, 0.10); color: var(--accent); }
.bv-src-type-pill--corporate   { background: rgba(8, 145, 178, 0.10);  color: #0891b2; }
.bv-src-type-pill--video       { background: rgba(220, 38, 38, 0.10);  color: var(--danger); }
.bv-src-type-pill--review      { background: rgba(202, 138, 4, 0.10);  color: var(--warning); }
.bv-src-type-pill--social      { background: rgba(22, 163, 74, 0.10);  color: var(--success); }
.bv-src-type-pill--ranked-list { background: rgba(219, 39, 119, 0.10); color: #db2777; }

/* Growth indicators */
.bv-src-growth {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  min-width: 28px;
  justify-content: center;
}

.bv-src-growth--new   { background: rgba(22, 163, 74, 0.10); color: var(--success); }
.bv-src-growth--up    { color: var(--success); }
.bv-src-growth--down  { color: var(--danger); }
.bv-src-growth--muted { color: var(--text-muted); }

/* Source view link */
.bv-src-view {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}

.bv-src-view:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .bv-src-row { grid-template-columns: 36px minmax(0, 1.2fr) 90px 60px 90px; }
  .bv-src-cell--growth { display: none; } /* drop growth first on narrow */
}

/* ── v2.19.1 — enriched source rows (favicon/thumbnail + title + type) ── */
/* The row keeps the .bv-src-row grid; these style its new span children. */
.src-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
}
.src-used {
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-primary);
}
.src-type,
.src-growth,
.src-action {
  min-width: 0;
}
.src-growth {
  text-align: right;
}
.src-action {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.src-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.src-media { flex-shrink: 0; }
.src-favicon {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  object-fit: contain;
}
.src-yt-thumb {
  width: 80px;
  height: 45px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}
.src-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.src-domain {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.src-title {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
}
.src-type-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
}
.src-type-youtube     { background: #fef2f2; color: #b91c1c; }
.src-type-review      { background: #fffbeb; color: #92400e; }
.src-type-social      { background: #eff6ff; color: #1d4ed8; }
.src-type-editorial   { background: #f0fdf4; color: #166534; }
.src-type-corporate   { background: #f5f3ff; color: #6D28D9; }
.src-type-ranked_list { background: #fff7ed; color: #c2410c; }
.src-type-web         { background: #f3f4f6; color: #6b7280; }

.src-view-btn {
  font-size: 12px;
  font-weight: 500;
  color: #6D28D9;
  text-decoration: none;
  white-space: nowrap;
}
.src-view-btn:hover { text-decoration: underline; }

.src-growth-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}
.src-new {
  background: #f0fdf4;
  color: #166534;
  padding: 2px 8px;
  border-radius: 10px;
}

/* ── Section 3: Gap Analysis ────────────────────────────────── */
.bv-src-gap-card {
  padding: 0;
}

.bv-src-gap-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) auto auto 56px auto;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  min-height: 48px;
}

.bv-src-gap-row:last-child { border-bottom: none; }

.bv-src-gap-source {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.bv-src-gap-cites {
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.bv-src-gap-never {
  display: inline-flex;
  align-items: center;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 99px;
  background: rgba(220, 38, 38, 0.10);
  color: var(--danger);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.bv-src-gap-score {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  text-align: right;
}

@media (max-width: 900px) {
  .bv-src-gap-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }
  .bv-src-gap-cites,
  .bv-src-gap-score { display: none; }
}

/* ── Section 4: Source Discovery Trend ──────────────────────── */
.bv-src-trend-wrap {
  position: relative;
  width: 100%;
  height: 150px;
}

/* ==========================================================================
   Topics tab — v2.18. Topic Overview (rankings + treemap), Deep Dive
   (expandable cards), Topic Gaps, Prompt Health by Topic.
   ========================================================================== */

/* ── Section 1: Topic Overview ─────────────────────────────── */
.bv-tp-overview-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 16px;
}

@media (max-width: 900px) {
  .bv-tp-overview-grid { grid-template-columns: 1fr; }
}

/* Rankings table */
.bv-tp-rank-card { padding: 0; }
.bv-tp-rank-table { width: 100%; }

.bv-tp-rank-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) 80px 80px 80px 110px;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  min-height: 40px;
}

.bv-tp-rank-row:last-child { border-bottom: none; }

.bv-tp-rank-row--head {
  border-bottom: 2px solid var(--border);
  min-height: 32px;
}

.bv-tp-rank-cell {
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-primary);
  min-width: 0;
}

.bv-tp-rank-cell--head {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.bv-tp-rank-cell--name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bv-tp-pos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 22px;
  padding: 0 8px;
  border-radius: 99px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
}

.bv-tp-pos--good  { background: rgba(22, 163, 74, 0.12); color: var(--success); }
.bv-tp-pos--mid   { background: rgba(202, 138, 4, 0.12); color: var(--warning); }
.bv-tp-pos--bad   { background: rgba(220, 38, 38, 0.12); color: var(--danger); }
.bv-tp-pos--muted { background: var(--surface);         color: var(--text-muted); }

.bv-tp-status {
  display: inline-flex;
  align-items: center;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 99px;
}

.bv-tp-status--leading     { background: rgba(22, 163, 74, 0.10); color: var(--success); }
.bv-tp-status--competitive { background: rgba(109, 40, 217, 0.10); color: var(--accent); }
.bv-tp-status--needs-work  { background: rgba(202, 138, 4, 0.10);  color: var(--warning); }
.bv-tp-status--critical    { background: rgba(220, 38, 38, 0.10);  color: var(--danger); }

/* Treemap */
.bv-tp-tree-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bv-tp-treemap {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 220px;
}

.bv-tp-tree-cell {
  position: relative;
  min-height: 60px;
  min-width: 100px;
  flex-basis: 0;
  padding: 12px;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
  font-family: var(--font);
  transition: opacity 0.15s ease;
}

.bv-tp-tree-cell:hover { opacity: 0.92; }

.bv-tp-tree-name {
  font-size: 12px;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.bv-tp-tree-vis {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  margin-top: 2px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

@media (max-width: 900px) {
  .bv-tp-rank-row { grid-template-columns: minmax(0, 1.4fr) 60px 60px 60px 90px; }
}

/* ── Section 2: Topic Deep Dive (expandable cards) ─────────── */
.bv-tp-card-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bv-tp-card {
  padding: 0;
  overflow: hidden;
}

.bv-tp-card-header {
  width: 100%;
  background: transparent;
  border: none;
  display: grid;
  grid-template-columns: 16px minmax(0, 1.5fr) 110px 1fr 60px 80px;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  font-family: var(--font);
  color: var(--text-primary);
  text-align: left;
  transition: var(--transition);
}

.bv-tp-card-header:hover {
  background: var(--surface);
}

.bv-tp-toggle {
  color: var(--text-muted);
  font-size: 11px;
  width: 16px;
  text-align: center;
}

.bv-tp-card-name {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bv-tp-meter {
  height: 6px;
  background: var(--surface);
  border-radius: 99px;
  overflow: hidden;
}

.bv-tp-meter-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 99px;
  transition: width 0.4s ease;
}

.bv-tp-vis {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  text-align: right;
}

.bv-tp-prompts-n {
  font-family: var(--font);
  font-size: 11px;
  color: var(--text-muted);
  text-align: right;
}

.bv-tp-body {
  display: none;
  padding: 0 16px 12px;
  border-top: 1px solid var(--border);
}

.bv-tp-card.is-open .bv-tp-body { display: block; }

.bv-tp-prompt-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) 40px 40px 40px 60px 100px;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  min-height: 36px;
}

.bv-tp-prompt-row:last-of-type { border-bottom: none; }

.bv-tp-prompt-row--head {
  border-bottom: 1px solid var(--border);
  padding-top: 10px;
}

.bv-tp-prompt-cell {
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-primary);
  min-width: 0;
}

.bv-tp-prompt-cell--head {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.bv-tp-prompt-cell--dot,
.bv-tp-prompt-cell--status { text-align: center; }

.bv-tp-prompt-cell--why { text-align: right; }

.bv-tp-prompt-txt {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bv-tp-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
}

.bv-tp-dot--on  { background: #10A37F; }
/* For Claude / Perplexity dots we color by column position via :nth-child below. */
.bv-tp-prompt-row > .bv-tp-prompt-cell:nth-child(3) .bv-tp-dot--on { background: #D97757; } /* Claude col */
.bv-tp-prompt-row > .bv-tp-prompt-cell:nth-child(4) .bv-tp-dot--on { background: #6366F1; } /* Perplexity col */

.bv-tp-prompt-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 22px;
  border-radius: 99px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
}

.bv-tp-prompt-status--improving { background: rgba(22, 163, 74, 0.10); color: var(--success); }
.bv-tp-prompt-status--dropping  { background: rgba(220, 38, 38, 0.10); color: var(--danger); }
.bv-tp-prompt-status--critical  { background: rgba(220, 38, 38, 0.12); color: var(--danger); }
.bv-tp-prompt-status--stable    { background: var(--surface);          color: var(--text-muted); }

.bv-tp-why {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 11px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.bv-tp-why:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.bv-tp-why-detail {
  padding: 10px 12px;
  margin: 0 0 8px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border);
}

.bv-tp-why-engine {
  font-family: var(--font);
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.bv-tp-why-quote {
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-primary);
  line-height: 1.5;
}

.bv-tp-add {
  margin-top: 10px;
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--accent);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  width: 100%;
  transition: var(--transition);
}

.bv-tp-add:hover {
  background: var(--accent-light);
  border-color: var(--accent);
}

@media (max-width: 900px) {
  .bv-tp-card-header {
    grid-template-columns: 16px minmax(0, 1fr) 90px 50px 60px;
  }
  .bv-tp-card-header .bv-tp-meter { display: none; }
}

/* ── Section 3: Topic Gaps ────────────────────────────────── */
.bv-tp-gaps-card { padding: 0; }

.bv-tp-gap-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) 70px minmax(0, 1.1fr) 60px minmax(0, 1.6fr) auto;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  min-height: 52px;
}

.bv-tp-gap-row:last-child { border-bottom: none; }

.bv-tp-gap-name {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bv-tp-gap-vis {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--danger);
}

.bv-tp-gap-comp {
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.bv-tp-gap-score {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  text-align: right;
}

.bv-tp-gap-action {
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 900px) {
  .bv-tp-gap-row {
    grid-template-columns: minmax(0, 1fr) 60px 60px auto;
  }
  .bv-tp-gap-comp,
  .bv-tp-gap-action { display: none; }
}

/* ── Section 4: Prompt Health by Topic ─────────────────────── */
.bv-tp-health-card { padding: 0; }

.bv-tp-health-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) minmax(0, 1.2fr) 120px;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  min-height: 44px;
}

.bv-tp-health-row:last-child { border-bottom: none; }

.bv-tp-health-row--head {
  border-bottom: 2px solid var(--border);
  min-height: 32px;
}

.bv-tp-health-cell {
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-primary);
  min-width: 0;
}

.bv-tp-health-cell--head {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.bv-tp-health-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bv-tp-health-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 99px;
}

.bv-tp-health-chip--improving { background: rgba(22, 163, 74, 0.10); color: var(--success); }
.bv-tp-health-chip--stable    { background: var(--surface);          color: var(--text-secondary); }
.bv-tp-health-chip--dropping  { background: rgba(202, 138, 4, 0.10); color: var(--warning); }
.bv-tp-health-chip--critical  { background: rgba(220, 38, 38, 0.10); color: var(--danger); }

.bv-tp-health-bar-track {
  flex: 1;
  height: 6px;
  background: var(--surface);
  border-radius: 99px;
  overflow: hidden;
  display: inline-block;
  width: calc(100% - 44px);
  vertical-align: middle;
}

.bv-tp-health-bar-fill {
  height: 100%;
  background: var(--success);
  border-radius: 99px;
  transition: width 0.4s ease;
}

.bv-tp-health-bar-val {
  display: inline-block;
  width: 36px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-left: 6px;
  vertical-align: middle;
}

.bv-tp-health-cell--trend { text-align: right; }

.bv-tp-trend {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
}

.bv-tp-trend--improving { background: rgba(22, 163, 74, 0.10); color: var(--success); }
.bv-tp-trend--dropping  { background: rgba(220, 38, 38, 0.10); color: var(--danger); }
.bv-tp-trend--stable    { background: var(--surface);          color: var(--text-secondary); }

@media (max-width: 900px) {
  .bv-tp-health-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 90px;
  }
  .bv-tp-health-cell--trend { display: none; }
}

/* ==========================================================================
   Optimize tab — v2.18. AI Visibility Score Breakdown, Priority Action
   Plan, Content Gap Analyzer, Answer Simulator, Schema Checklist.
   ========================================================================== */

/* ── Section 1: Score Breakdown ─────────────────────────────── */
.bv-opt-score-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
}

.bv-opt-pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 900px) {
  .bv-opt-pillar-grid { grid-template-columns: 1fr; }
}

.bv-opt-pillar {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bv-opt-pillar-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bv-opt-pillar-icon {
  font-size: 16px;
  line-height: 1;
}

.bv-opt-pillar-label {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.bv-opt-pillar-score {
  font-family: var(--font);
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.1;
}

.bv-opt-pillar-track {
  height: 6px;
  background: var(--surface);
  border-radius: 99px;
  overflow: hidden;
}

.bv-opt-pillar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 99px;
  transition: width 0.4s ease;
}

/* Readiness "Pending" state — backend sets pillars.readiness.pending=true
   when EEAT + Bot Monitor caches are empty (never scanned). Pillar card
   shows "Pending" text in place of "0/100" and the track is rendered in
   a muted tone with no fill, so users don't read an uncomputed pillar
   as a genuine zero. See public/js/pillarFormat.js. */
.bv-opt-pillar--pending .bv-opt-pillar-score {
  color: var(--text-muted);
  font-weight: 500;
}
.bv-opt-pillar-track--pending {
  background: var(--border);
  opacity: 0.5;
}

/* Hero pillar sub-line "Run Intelligence scan" hint — appears under the
   "Visibility / Readiness / Authority" pillar summary when readiness is
   pending. Small muted line, no inline styles. */
.bv-pillar-pending-hint {
  font-family: var(--font);
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

.bv-opt-pillar-note {
  font-family: var(--font);
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.bv-opt-pillar-fixes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bv-opt-pillar-fix {
  position: relative;
  padding-left: 14px;
  font-family: var(--font);
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.bv-opt-pillar-fix::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--text-muted);
}

/* Grade badge + explanation */
.bv-opt-grade-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.bv-opt-grade {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  flex-shrink: 0;
}

.bv-opt-grade--a { border-color: var(--success); color: var(--success); }
.bv-opt-grade--b { border-color: #65a30d;        color: #65a30d; }
.bv-opt-grade--c { border-color: var(--warning); color: var(--warning); }
.bv-opt-grade--d { border-color: #ea580c;        color: #ea580c; }
.bv-opt-grade--f { border-color: var(--danger);  color: var(--danger); }

.bv-opt-grade-explain {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bv-opt-grade-score {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.bv-opt-grade-note {
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-secondary);
}

/* ── Section 2: Priority Action Plan ────────────────────────── */
.bv-opt-actions-layout {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  align-items: start;
}

@media (max-width: 700px) {
  .bv-opt-actions-layout { grid-template-columns: 1fr; }
}

.bv-opt-actions-sidebar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 60px;
}

@media (max-width: 700px) {
  .bv-opt-actions-sidebar {
    flex-direction: row;
    flex-wrap: wrap;
    position: static;
  }
}

.bv-opt-cat {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 400;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  transition: var(--transition);
}

.bv-opt-cat:hover {
  background: var(--surface);
  color: var(--text-primary);
}

.bv-opt-cat.active {
  background: var(--accent-light);
  color: var(--accent);
  font-weight: 500;
}

.bv-opt-actions-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bv-opt-action {
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: var(--transition);
}

.bv-opt-action:hover { background: var(--surface); }

.bv-opt-action--high   { border-left-color: var(--success); }
.bv-opt-action--medium { border-left-color: var(--warning); }
.bv-opt-action--low    { border-left-color: var(--border); }

.bv-opt-action.is-done {
  opacity: 0.5;
}

.bv-opt-action.is-done .bv-opt-action-title { text-decoration: line-through; }

.bv-opt-action-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.bv-opt-action-pri {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  min-width: 28px;
}

.bv-opt-action-cat {
  display: inline-flex;
  align-items: center;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 99px;
  text-transform: capitalize;
  letter-spacing: 0.02em;
  background: var(--surface);
  color: var(--text-secondary);
}

.bv-opt-action-cat--content     { background: rgba(109, 40, 217, 0.08); color: var(--accent); }
.bv-opt-action-cat--technical   { background: rgba(8, 145, 178, 0.08);  color: #0891b2; }
.bv-opt-action-cat--authority   { background: rgba(202, 138, 4, 0.08);  color: var(--warning); }
.bv-opt-action-cat--competitive { background: rgba(220, 38, 38, 0.08);  color: var(--danger); }

.bv-opt-action-effort {
  display: inline-flex;
  align-items: center;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 99px;
}

.bv-opt-action-effort--quick-win { background: rgba(22, 163, 74, 0.08); color: var(--success); }
.bv-opt-action-effort--medium    { background: rgba(202, 138, 4, 0.08); color: var(--warning); }
.bv-opt-action-effort--complex   { background: rgba(220, 38, 38, 0.08); color: var(--danger); }

.bv-opt-action-title {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.bv-opt-action-explain {
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.bv-opt-action-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 4px;
}

.bv-opt-action-instr {
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-muted);
  flex: 1;
  min-width: 200px;
}

.bv-opt-action-btns {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.bv-opt-action-done,
.bv-opt-action-decline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
}

.bv-opt-action-done:hover {
  background: var(--accent-light);
  color: var(--accent);
  border-color: var(--accent);
}

.bv-opt-action-done.is-done {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.bv-opt-action-decline:hover {
  background: var(--surface);
  color: var(--text-primary);
}

/* Smart-suggestion engine additions (v2.18 rebuild). */
.bv-card-datasource {
  font-family: var(--font);
  font-size: 11px;
  color: var(--text-muted);
  margin: 8px 0;
  padding: 6px 10px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--border);
  display: flex;
  align-items: center;
  gap: 6px;
}

.bv-card-datasource-icon {
  font-style: normal;
  font-size: 12px;
  line-height: 1;
}

.bv-card-instruction {
  font-family: var(--font);
  font-size: 12px;
  color: var(--accent);
  margin-top: 8px;
  line-height: 1.5;
}

.bv-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.bv-learn-more {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 12px;
  margin-left: auto;
  cursor: pointer;
  padding: 4px 8px;
  transition: var(--transition);
}

.bv-learn-more:hover { color: var(--accent); }

/* Content gap — missing-prompt list inside each gap card. */
.bv-opt-cg-prompts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bv-opt-cg-prompt-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bv-opt-cg-prompt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 12px;
}

.bv-opt-cg-prompt-txt {
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.bv-opt-cg-prompt-comp {
  font-size: 10px;
  color: var(--danger);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Section 3: Content Gap Analyzer ────────────────────────── */
.bv-opt-cg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.bv-opt-cg-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.bv-opt-cg-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.bv-opt-cg-name {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.bv-opt-cg-vis {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--danger);
}

.bv-opt-cg-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bv-opt-cg-stat,
.bv-opt-cg-coverage,
.bv-opt-cg-sev {
  display: inline-flex;
  align-items: center;
  font-family: var(--font);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 99px;
  background: var(--surface);
  color: var(--text-secondary);
}

.bv-opt-cg-coverage--strong  { background: rgba(22, 163, 74, 0.10); color: var(--success); }
.bv-opt-cg-coverage--partial { background: rgba(202, 138, 4, 0.10); color: var(--warning); }
.bv-opt-cg-coverage--missing { background: rgba(220, 38, 38, 0.10); color: var(--danger); }

.bv-opt-cg-sev--critical { background: rgba(220, 38, 38, 0.12); color: var(--danger); }
.bv-opt-cg-sev--high     { background: rgba(202, 138, 4, 0.10); color: var(--warning); }
.bv-opt-cg-sev--medium   { background: var(--surface);          color: var(--text-secondary); }

.bv-opt-cg-rec {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bv-opt-cg-rec-label {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.bv-opt-cg-rec-text {
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-primary);
}

.bv-opt-cg-rec-words {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

.bv-opt-cg-cta {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--accent);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  align-self: flex-start;
}

.bv-opt-cg-cta:hover {
  background: var(--accent-light);
  border-color: var(--accent);
}

/* ── Section 4: Answer Simulator ────────────────────────────── */
.bv-opt-sim-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bv-opt-sim-input-row {
  display: flex;
  gap: 8px;
}

.bv-opt-sim-input {
  flex: 1;
  height: 44px;
  margin-bottom: 0;
  font-size: 14px;
}

.bv-opt-sim-submit {
  height: 44px;
  padding: 0 18px;
  font-size: 13px;
  flex-shrink: 0;
}

.bv-opt-sim-engines {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bv-opt-sim-tog {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
}

.bv-opt-sim-tog:hover { color: var(--text-primary); border-color: var(--border-hover); }

.bv-opt-sim-tog.active {
  background: var(--accent-light);
  color: var(--accent);
  border-color: var(--accent);
}

.bv-opt-sim-results { min-height: 0; }

.bv-opt-sim-loading {
  text-align: center;
  padding: 20px;
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-muted);
}

.bv-opt-sim-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 900px) {
  .bv-opt-sim-grid { grid-template-columns: 1fr; }
}

.bv-opt-sim-result {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg);
}

.bv-opt-sim-result-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bv-opt-sim-engine {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  flex: 1;
}

.bv-opt-sim-body {
  font-family: var(--font);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-primary);
  white-space: pre-wrap;
}

.bv-opt-sim-more {
  background: transparent;
  border: none;
  color: var(--accent);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  align-self: flex-start;
}

.bv-opt-sim-more:hover { text-decoration: underline; }

.bv-opt-sim-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.bv-opt-sim-meta-label,
.bv-opt-sim-meta-comp {
  font-family: var(--font);
  font-size: 11px;
  color: var(--text-secondary);
}

.bv-opt-sim-meta-comp { color: var(--text-muted); }

.bv-opt-sim-summary {
  margin-top: 10px;
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
}

/* ── Section 5: Schema & Technical Fixes checklist ─────────── */
.bv-opt-schema-card {
  padding: 0;
}

.bv-opt-check {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid var(--border);
}

.bv-opt-check:last-child { border-bottom: none; }

.bv-opt-check--done    { border-left-color: var(--success); }
.bv-opt-check--missing { border-left-color: var(--danger); }
.bv-opt-check--partial { border-left-color: var(--warning); }

.bv-opt-check--done { color: var(--text-muted); }

.bv-opt-check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
}

.bv-opt-check--done    .bv-opt-check-icon { background: rgba(22, 163, 74, 0.10); color: var(--success); }
.bv-opt-check--missing .bv-opt-check-icon { background: rgba(220, 38, 38, 0.10); color: var(--danger); }
.bv-opt-check--partial .bv-opt-check-icon { background: rgba(202, 138, 4, 0.10); color: var(--warning); }

.bv-opt-check-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.bv-opt-check-title {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.bv-opt-check--done .bv-opt-check-title { color: var(--text-muted); text-decoration: line-through; }

.bv-opt-check-desc {
  font-family: var(--font);
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.bv-opt-check-fix {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--accent);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
}

.bv-opt-check-fix:hover {
  background: var(--accent-light);
  border-color: var(--accent);
}

.bv-opt-check--done .bv-opt-check-fix { display: none; }

/* ==========================================================================
   Agent tab — v2.18. Two-column layout with context sidebar (left) and
   chat interface (right). All interaction is delegated; no inline handlers.
   ========================================================================== */

.bv-agent-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  height: calc(100vh - 200px);
  min-height: 480px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

@media (max-width: 900px) {
  .bv-agent-layout {
    grid-template-columns: 1fr;
    height: auto;
  }
}

/* ── Left: context panel ───────────────────────────────────── */
.bv-agent-left {
  border-right: 1px solid var(--border);
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg-elevated);
}

@media (max-width: 900px) {
  .bv-agent-left { border-right: none; border-bottom: 1px solid var(--border); }
}

.bv-agent-ctx-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bv-agent-ctx-title {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.bv-agent-ctx-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bv-agent-ctx-favicon {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  object-fit: contain;
  background: var(--surface);
}

.bv-agent-ctx-name {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bv-agent-ctx-loading {
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-muted);
  padding: 12px 0;
}

.bv-agent-ctx-scan {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-secondary);
}

.bv-agent-ctx-scan-label {
  color: var(--text-muted);
}

.bv-agent-ctx-scan-val {
  font-weight: 500;
  color: var(--text-primary);
}

.bv-agent-ctx-section {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-top: 8px;
}

.bv-agent-ctx-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bv-agent-ctx-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-secondary);
  padding: 2px 0;
}

.bv-agent-ctx-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  font-weight: 600;
}

.bv-agent-ctx-icon--yes { color: var(--success); }
.bv-agent-ctx-icon--no  { color: var(--text-muted); }

.bv-agent-ctx-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Shortcut buttons */
.bv-agent-shortcut {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  margin-bottom: 4px;
  transition: var(--transition);
}

.bv-agent-shortcut:hover {
  background: var(--surface);
  color: var(--text-primary);
  border-color: var(--border-hover);
}

.bv-agent-shortcut-icon {
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}

.bv-agent-shortcut-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bv-agent-ctx-footer {
  margin-top: auto;
  padding-top: 12px;
  font-family: var(--font);
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
  border-top: 1px solid var(--border);
}

/* ── Right: chat ───────────────────────────────────────────── */
.bv-agent-chat {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.bv-agent-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.bv-agent-title {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.bv-agent-sub {
  font-family: var(--font);
  font-size: 11px;
  color: var(--text-muted);
}

.bv-agent-clear {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 11px;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
}

.bv-agent-clear:hover {
  background: var(--surface);
  color: var(--text-primary);
}

.bv-agent-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
}

/* Messages */
.bv-msg {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.bv-msg--user {
  flex-direction: row-reverse;
}

.bv-msg-bubble-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 80%;
}

.bv-msg--user .bv-msg-bubble-wrap {
  align-items: flex-end;
  max-width: 70%;
}

.bv-msg-bubble {
  padding: 10px 14px;
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.bv-msg--user .bv-msg-bubble {
  background: var(--accent);
  color: #ffffff;
  border-radius: 12px 12px 2px 12px;
}

.bv-msg--agent .bv-msg-bubble {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: 12px 12px 12px 2px;
}

.bv-msg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #ffffff;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bv-msg-time {
  font-family: var(--font);
  font-size: 10px;
  color: var(--text-muted);
}

.bv-msg--user .bv-msg-time { text-align: right; }

/* Typing indicator */
.bv-typing {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
}

.bv-typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  display: inline-block;
  animation: bvTyping 1.2s infinite;
}

.bv-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.bv-typing-dot:nth-child(3) { animation-delay: 0.4s; }

.bv-typing-label {
  font-family: var(--font);
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 4px;
}

@keyframes bvTyping {
  0%, 60%, 100% { opacity: 0.3; transform: scale(1); }
  30%           { opacity: 1;   transform: scale(1.2); }
}

/* Input area */
.bv-agent-input-area {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
}

.bv-agent-input-wrap {
  position: relative;
}

.bv-agent-textarea {
  width: 100%;
  min-height: 44px;
  max-height: 120px;
  resize: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 44px 10px 12px;
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s ease;
}

.bv-agent-textarea:focus {
  border-color: var(--accent);
}

.bv-agent-textarea::placeholder {
  color: var(--text-muted);
}

.bv-agent-send {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #ffffff;
  border: none;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
}

.bv-agent-send:hover:not(:disabled) {
  background: var(--accent-hover);
}

.bv-agent-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.bv-agent-hint {
  font-family: var(--font);
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
  text-align: center;
}

.bv-agent-charcount {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  text-align: right;
  margin-top: 2px;
  min-height: 12px;
}

/* ==========================================================================
   Visibility tab — v2.18. Hero (3 cards), Trend chart, Engine
   Performance, Topic Visibility, Full Visibility table, Visibility Gaps.
   ========================================================================== */

/* ── Section 1: Hero ──────────────────────────────────────── */
.bv-vis-hero {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 900px) {
  .bv-vis-hero { grid-template-columns: 1fr; }
}

.bv-vis-hero-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}

.bv-vis-score-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Compact grade badge for hero card. */
.bv-opt-grade--sm {
  width: 32px;
  height: 32px;
  font-size: 16px;
  border-width: 2px;
}

.bv-score-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
}

.bv-score-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.6s ease;
}

.bv-vis-trend {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}

.bv-vis-trend--up   { color: var(--success); }
.bv-vis-trend--down { color: var(--danger); }

/* Card 2 — citation rate row with mini donut. */
.bv-vis-citation-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.bv-vis-citation-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.bv-vis-breakdown {
  font-family: var(--font);
  font-size: 11px;
  color: var(--text-muted);
}

.bv-mini-donut-wrap {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  position: relative;
}

.bv-mini-donut {
  width: 60px !important;
  height: 60px !important;
}

/* Card 3 — AI Reach: engine dots + best/weakest lines. */
.bv-vis-engine-dots {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.bv-vis-engine-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border);
  display: inline-block;
  opacity: 0.35;
  transition: opacity 0.15s ease;
}

.bv-vis-engine-dot.is-active { opacity: 1; }

.bv-vis-eng-line {
  font-family: var(--font);
  font-size: 11px;
  color: var(--text-secondary);
}

.bv-vis-eng-line--muted { color: var(--text-muted); }

/* ── Section 2: Trend chart ───────────────────────────────── */
.bv-vis-trend-wrap {
  position: relative;
  width: 100%;
  height: 200px;
}

/* ── Section 3: Engine Performance ─────────────────────────── */
.bv-vis-engine-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 900px) {
  .bv-vis-engine-grid { grid-template-columns: 1fr; }
}

.bv-vis-engine-row {
  display: grid;
  grid-template-columns: 130px 1fr 110px;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}

.bv-vis-engine-label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.bv-vis-engine-name {
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bv-vis-engine-val-block {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.bv-vis-engine-trend {
  display: inline-flex;
  align-items: center;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 99px;
}

.bv-vis-engine-trend--up     { background: rgba(22, 163, 74, 0.08);  color: var(--success); }
.bv-vis-engine-trend--down   { background: rgba(220, 38, 38, 0.08);  color: var(--danger); }
.bv-vis-engine-trend--stable { background: var(--surface);           color: var(--text-muted); }

/* Engine comparison table */
.bv-vis-engine-table-card { padding: 0; }
.bv-vis-engine-table { width: 100%; }

.bv-vis-engine-table .bv-vis-engine-row {
  grid-template-columns: minmax(0, 1.6fr) 70px 80px 60px 70px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  min-height: 40px;
}

.bv-vis-engine-table .bv-vis-engine-row:last-child { border-bottom: none; }

.bv-vis-engine-table .bv-vis-engine-row--head {
  border-bottom: 2px solid var(--border);
  min-height: 32px;
}

.bv-vis-engine-cell {
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-primary);
  min-width: 0;
}

.bv-vis-engine-cell--head {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.bv-vis-engine-cell:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bv-best-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 99px;
  background: var(--accent-light);
  color: var(--accent);
  margin-left: 6px;
}

/* ── Section 4: Topic Visibility ───────────────────────────── */
.bv-vis-topic-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 900px) {
  .bv-vis-topic-grid { grid-template-columns: 1fr; }
}

.bv-vis-topic-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bv-vis-topic-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bv-vis-topic-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.bv-vis-topic-name {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bv-vis-topic-pct {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}

.bv-topic-vis-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--border);
  overflow: hidden;
}

.bv-topic-vis-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.4s ease;
}

.bv-vis-topic-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.bv-vis-topic-count {
  font-family: var(--font);
  font-size: 11px;
  color: var(--text-muted);
}

/* Top prompts table on the right */
.bv-vis-top-prompts {
  display: flex;
  flex-direction: column;
}

.bv-vis-top-prompt-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) 50px auto 24px;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.bv-vis-top-prompt-row:last-child { border-bottom: none; }

.bv-vis-top-prompt-text {
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bv-vis-top-prompt-pct {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  text-align: right;
}

.bv-vis-top-prompt-engines {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.bv-prompt-engine-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  background: var(--text-muted);
}

/* ── Section 5: Full Visibility Table ─────────────────────── */
.bv-vis-table-host { width: 100%; }
.bv-vis-table      { width: 100%; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }

.bv-vis-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) 70px 70px 80px 70px 80px 60px;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  min-height: 44px;
  transition: var(--transition);
  cursor: pointer;
}

.bv-vis-row:hover { background: var(--surface); }
.bv-vis-row:last-child { border-bottom: none; }

.bv-vis-row--head {
  border-bottom: 1px solid var(--border);
  min-height: 32px;
  cursor: default;
}

.bv-vis-row--head:hover { background: transparent; }

.bv-vis-cell {
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-primary);
  min-width: 0;
}

.bv-vis-cell--head {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.bv-vis-cell--prompt { font-weight: 500; }

.bv-vis-prompt-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bv-vis-cell--check   { text-align: center; }
.bv-vis-cell--overall { text-align: right; font-family: var(--font-mono); }

.bv-vis-cell--cited     { color: var(--success); font-weight: 500; }
.bv-vis-cell--not-cited { color: var(--danger); }
.bv-vis-cell--nodata    { color: var(--text-muted); }

.bv-vis-mark {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
}

/* Expanded detail row */
.bv-vis-row-detail {
  padding: 12px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}

.bv-vis-detail-engine {
  font-family: var(--font);
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.bv-vis-detail-quote {
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-primary);
  line-height: 1.55;
}

.bv-vis-status-filter { margin-left: 4px; }

@media (max-width: 1100px) {
  .bv-vis-row { grid-template-columns: minmax(0, 1.6fr) 60px 60px 70px 60px 70px 50px; }
}

@media (max-width: 900px) {
  .bv-vis-row { grid-template-columns: minmax(0, 1.4fr) 50px 50px 70px 60px; }
  .bv-vis-row > .bv-vis-cell:nth-child(4) { display: none; } /* drop Perplexity first */
  .bv-vis-row > .bv-vis-cell:nth-child(5) { display: none; } /* then Gemini */
}

/* ── Section 6: Visibility Gaps ───────────────────────────── */
.bv-vis-gaps-card { padding: 0; }

.bv-vis-gap-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 96px 56px 110px;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  min-height: 48px;
}

.bv-vis-gap-row:last-child { border-bottom: none; }

/* Column header row for the "Where you're invisible" table. */
.bv-vis-gap-row--head {
  min-height: 32px;
  border-bottom: 1px solid var(--border);
}
.bv-vis-gap-row--head:hover { background: transparent; }
.bv-vis-gap-head-cell {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
/* Align header cells to match their data columns. */
.bv-vis-gap-row--head .bv-vis-gap-head-cell:nth-child(2) { justify-self: start; }
.bv-vis-gap-row--head .bv-vis-gap-head-cell:nth-child(3) { justify-self: center; }
.bv-vis-gap-row--head .bv-vis-gap-head-cell:nth-child(4) { justify-self: end; text-align: right; }

.bv-vis-gap-prompt {
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bv-vis-gap-zero {
  display: inline-flex;
  align-items: center;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 99px;
  background: rgba(220, 38, 38, 0.10);
  color: var(--danger);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.bv-gap-priority {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--accent);
  text-align: right;
}

/* Per-cell grid alignment — scoped to this table only so .bv-favicon-stack
   and .bv-gap-cta (also used by the Competitors-tab .bv-gap-row table)
   stay untouched there. */
.bv-vis-gap-zero                       { justify-self: start; }
.bv-vis-gap-row .bv-favicon-stack      { justify-self: center; }
.bv-vis-gap-row .bv-gap-priority       { justify-self: end; text-align: right; }
.bv-vis-gap-row .bv-gap-cta            { justify-self: end; }

@media (max-width: 900px) {
  .bv-vis-gap-row { grid-template-columns: minmax(0, 1fr) 80px 90px; }
  .bv-vis-gap-row .bv-favicon-stack { display: none; }
  .bv-vis-gap-row .bv-gap-priority  { display: none; }
}

/* ==========================================================================
   Brand-view filter bar — sticks below .bv-tabs (which is itself sticky
   at top:0). Date range + unbranded toggle + CSV export.
   ========================================================================== */

.bv-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding: 0 24px;
  height: 44px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 49px;
  z-index: 109;
}

.bv-filter-left,
.bv-filter-right {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.bv-date-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.bv-date-tab {
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
}

.bv-date-tab:hover {
  background: var(--surface);
  color: var(--text-primary);
}

.bv-date-tab.active {
  background: var(--accent-light);
  color: var(--accent);
  font-weight: 500;
}

.bv-unbranded-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.bv-toggle-label {
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-secondary);
}

.bv-toggle-btn {
  width: 36px;
  height: 20px;
  border-radius: 99px;
  background: var(--border);
  border: none;
  cursor: pointer;
  position: relative;
  transition: background 0.2s ease;
  padding: 0;
  flex-shrink: 0;
}

.bv-toggle-btn[aria-checked="true"] {
  background: var(--accent);
}

.bv-toggle-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg);
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.2s ease;
}

.bv-toggle-btn[aria-checked="true"] .bv-toggle-thumb {
  transform: translateX(16px);
}

.bv-export-btn {
  height: 30px;
  padding: 0 12px;
  font-size: 12px;
}

@media (max-width: 700px) {
  .bv-filters {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 16px;
  }
  .bv-filter-right { justify-content: space-between; }
}

/* v2.18 — brand view takes full width, hides other views */
#brand-view {
  position: absolute;
  top: 64px;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(100% - 64px);
  z-index: 50;
  overflow-y: auto;
  background: var(--bg);
}

/* v2.18 — prevent bleed through on scroll */
#brand-view {
  background: var(--bg) !important;
}

/* v2.19 — Brand Alias Registry (Settings tab) */
.aliases-section {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.aliases-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px;
}
.aliases-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 16px;
  line-height: 1.5;
}
.aliases-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  min-height: 36px;
}
.alias-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg);
  font-size: 13px;
}
.alias-type-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.alias-type-name      { background: #f5f3ff; color: #6D28D9; }
.alias-type-domain    { background: #eff6ff; color: #1d4ed8; }
.alias-type-shortname { background: #f0fdf4; color: #166534; }
.alias-type-product   { background: #fff7ed; color: #c2410c; }
/* v2.21 — Tracked Competitors source badge + chip extras.
   Source colors mirror the .alias-type-* palette: 'manual' uses the
   accent purple (user-curated, important), 'auto' uses neutral
   slate (system-suggested, easy to remove). */
.alias-source-manual  { background: #f5f3ff; color: #6D28D9; }
.alias-source-auto    { background: #f1f5f9; color: #475569; }
.competitor-favicon   { width: 16px; height: 16px; border-radius: 3px; object-fit: cover; flex-shrink: 0; }
.competitor-name      { color: var(--text-muted); font-size: 12px; margin-left: 4px; }
.alias-text { color: var(--text-secondary); font-weight: 500; }
.alias-delete-btn {
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
}
.alias-delete-btn:hover { color: #dc2626; }
.aliases-empty {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}
.aliases-add-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.aliases-input {
  flex: 1;
  height: 38px;
  border: 1px solid var(--border-hover);
  border-radius: 8px;
  padding: 0 12px;
  font-size: 13px;
  color: var(--text-primary);
}
.aliases-input:focus {
  border-color: #6D28D9;
  box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.08);
  outline: none;
}
.aliases-type-select {
  height: 38px;
  border: 1px solid var(--border-hover);
  border-radius: 8px;
  padding: 0 10px;
  font-size: 13px;
  color: var(--text-secondary);
  background: var(--bg);
  cursor: pointer;
}
.aliases-add-btn {
  height: 38px;
  padding: 0 16px;
  background: #6D28D9;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.aliases-add-btn:hover { background: #5b21b6; }

/* v2.20 — Brand Facts (Hallucination Detection). Mirrors alias-chip /
   list / input / select / button styles; new classes only for the
   2-input row, the 5 fact-type badge colours, the inline edit
   affordances, and the validation error message. */
.facts-add-row {
  display: grid;
  grid-template-columns: 1fr 1fr 140px auto;
  gap: 8px;
  align-items: center;
}
.facts-error {
  font-size: 12px;
  color: #b91c1c;
  margin: 8px 0 0;
}

/* Fact-type badge colour modifiers — chained with .alias-type-badge
   which provides the base shape. Same hardcoded-tint style as the
   sibling .alias-type-* rules above. */
.fact-type-founding_year { background: #fef3c7; color: #92400e; }
.fact-type-location      { background: #ecfeff; color: #155e75; }
.fact-type-price         { background: #f0fdf4; color: #166534; }
.fact-type-team_size     { background: #ede9fe; color: #5b21b6; }
.fact-type-custom        { background: #f3f4f6; color: #6b7280; }

/* Inline edit affordances within a fact chip. */
.fact-edit-btn,
.fact-save-btn,
.fact-cancel-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 4px;
}
.fact-edit-btn   { color: var(--text-muted); }
.fact-save-btn   { color: var(--success); }
.fact-cancel-btn { color: var(--text-muted); }
.fact-edit-btn:hover   { color: #6D28D9; }
.fact-save-btn:hover   { color: #166534; }
.fact-cancel-btn:hover { color: #b91c1c; }

.alias-chip.is-editing { flex-wrap: wrap; gap: 6px; }
.fact-edit-input {
  height: 28px;
  padding: 0 8px;
  font-size: 12px;
  border: 1px solid var(--border-hover);
  border-radius: 6px;
  min-width: 120px;
  flex: 1 1 120px;
  color: var(--text-primary);
}
.fact-edit-input:focus {
  border-color: #6D28D9;
  box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.08);
  outline: none;
}

@media (max-width: 600px) {
  .facts-add-row { grid-template-columns: 1fr; }
}

/* ── v2.20 / Phase B — AI Crawler Tracking section ───────────────────── */
.crawler-token-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.crawler-token-empty {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.crawler-token-generate-btn {
  /* Inherits .aliases-add-btn (accent purple). Override flex defaults so
     it sits left-aligned under the explainer rather than stretching. */
  align-self: flex-start;
}

.crawler-token-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.crawler-token-value {
  flex: 1;
  min-width: 240px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  word-break: break-all;
  user-select: all;      /* one-tap manual selection if clipboard API fails */
  line-height: 1.4;
}

.crawler-token-copy-btn,
.crawler-token-regen-btn {
  height: 38px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  white-space: nowrap;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.crawler-token-copy-btn:hover {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
}

/* Regenerate is a destructive-flavoured action (it invalidates the
   current token). The window.confirm() is the actual interlock; the
   danger-coloured hover state is the visual hint. */
.crawler-token-regen-btn:hover {
  background: var(--danger-bg);
  border-color: var(--danger);
  color: var(--danger);
}

/* ── v2.20 / Phase B3 — Cloudflare Worker install guide ──────────────── */
.crawler-install {
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.crawler-install[open] {
  background: var(--bg);
}

.crawler-install-summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  list-style: none;             /* remove default disclosure marker */
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.crawler-install-summary::-webkit-details-marker { display: none; }
.crawler-install-summary::before {
  content: '▸';
  color: var(--text-muted);
  font-size: 11px;
  transition: transform 0.15s ease;
  display: inline-block;
}
.crawler-install[open] > .crawler-install-summary::before {
  transform: rotate(90deg);
}

.crawler-install-body {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.crawler-install-platform-note {
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--accent-light);
  border-left: 3px solid var(--accent);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  margin: 0;
  line-height: 1.5;
}

.crawler-install-script {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-muted);
}

.crawler-install-script-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
}

.crawler-install-script-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.crawler-install-copy-btn {
  height: 30px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.crawler-install-copy-btn:hover {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
}

.crawler-install-script-pre {
  margin: 0;
  padding: 12px 14px;
  max-height: 360px;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre;
  tab-size: 2;
}

.crawler-install-steps {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.7;
}
.crawler-install-steps li { margin-bottom: 6px; }
.crawler-install-steps li:last-child { margin-bottom: 0; }
.crawler-install-steps code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
}

.crawler-install-verify-note {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* ════════════ LLM Conversations (brand-view Mentions tab) ════════════
   Prefixed bvc-/bvcdp- to avoid colliding with the standalone
   conversations page styles in sentiment.css (which also uses .conv-*). */
.bvc-wrap { display: flex; flex-direction: column; height: 100%; position: relative; }

.bvc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 12px;
}
.bvc-title { font-size: 16px; font-weight: 700; color: var(--text-primary); margin: 0 0 2px; }
.bvc-sub   { font-size: 13px; color: var(--text-muted); margin: 0; }
.bvc-header-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bvc-search {
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 12px;
  font-size: 13px;
  width: 220px;
  outline: none;
  color: var(--text-primary);
}
.bvc-search:focus { border-color: #6D28D9; }
.bvc-filter {
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 10px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg);
  cursor: pointer;
  outline: none;
}
.bvc-export-btn {
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg);
  cursor: pointer;
}
.bvc-export-btn:hover { border-color: #6D28D9; color: #6D28D9; }

.bvc-table {
  flex: 1;
  overflow-y: auto;
  border-top:    1px solid var(--border);
  border-right:  1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-left:   1px solid var(--border);
  border-radius: 12px;
}
.bvc-thead {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) 96px 80px 90px 100px 100px 92px;
  /* UI polish — row-level padding removed; cell-padding (below) is the
     single source of internal whitespace. padding-left: 36px matches
     the indent now living on .bvc-group-rows so header columns line up
     with body columns at the nested-row position. */
  padding: 0 0 0 36px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  /* Collapse the doubled hairline at the top: pull the thead up by 1px
     so its background overlaps the table's border-top, leaving a single
     visible line (the thead's own border-bottom). */
  margin-top: -1px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  position: sticky;
  top: 0;
  z-index: 10;
}

.bvc-group { border-bottom: 1px solid var(--border); }
.bvc-group:last-child { border-bottom: none; }
.bvc-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  cursor: pointer;
  background: var(--bg);
}
.bvc-group-header:hover { background: var(--bg-elevated); }
.bvc-chevron {
  font-size: 14px;
  color: var(--text-muted);
  transition: transform 0.15s;
  flex-shrink: 0;
}
.bvc-group.bvc-expanded .bvc-chevron { transform: rotate(90deg); }
.bvc-group-prompt {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bvc-group-date  { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.bvc-group-count {
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--surface);
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.bvc-details-btn {
  font-size: 12px;
  color: #6D28D9;
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 500;
  white-space: nowrap;
  padding: 4px 8px;
}
.bvc-details-btn:hover { background: #f5f3ff; border-radius: 6px; }

.bvc-group-rows { display: none; }
.bvc-group.bvc-expanded .bvc-group-rows {
  display: block;
  /* UI polish — body-row indent (was 36px on .bvc-row's padding-left)
     moved here so .bvc-row itself carries no outer padding and column
     tracks align with .bvc-thead (which has a matching 36px left
     padding above). Visually nests response rows under the group
     chevron, same as before. */
  padding-left: 36px;
}

.bvc-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) 96px 80px 90px 100px 100px 92px;
  align-items: center;
  /* UI polish — row-level padding removed (was 10px 20px 10px 36px);
     cell-padding (below) is the single source of internal whitespace.
     The left indent lives on .bvc-group-rows now (see above). */
  padding: 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  font-size: 13px;
}
.bvc-row:hover { background: var(--bg-elevated); }
/* Clear the last row's bottom border inside each expanded group so
   the row hairline doesn't double with the group's own border-bottom. */
.bvc-group-rows .bvc-row:last-child { border-bottom: none; }

/* UI polish — subtle vertical cell dividers for the Mentions
   (LLM Conversations) table. Same hairline (var(--border)) as the
   existing horizontal dividers — no new color token. Header (.bvc-thead)
   and body (.bvc-row) share the .bvc-col-* column classes, so a single
   :not(:last-child) selector targets both consistently. Scoped to
   .bvc-thead + .bvc-row only — group headers / detail panel / other
   tables untouched. padding-right was previously here; removed —
   uniform cell padding (rule below) now provides breathing on both
   sides of the divider. */
.bvc-thead > *:not(:last-child),
.bvc-row   > *:not(:last-child) {
  border-right: 1px solid var(--border);
}

/* UI polish — uniform internal padding on every cell in the Mentions
   table (~10px vertical, 14px horizontal). Matches the Sources table's
   cell-padding rule above so both tables read as one coherent
   Searchable-style grid. Applies to header + body cells via the shared
   .bvc-col-* classes. Scoped to these seven classes only. */
.bvc-col-response,
.bvc-col-mentioned,
.bvc-col-cited,
.bvc-col-position,
.bvc-col-mentions,
.bvc-col-sources,
.bvc-col-created {
  padding: 10px 14px;
}

.bvc-col-response { display: flex; align-items: center; gap: 8px; min-width: 0; }

/* Mentions/Sources/Created column cells — explicit start-aligned flex
   so the avatar containers and short timestamp text anchor to the same
   left edge as their (default-left) headers. Without these rules the
   data spans rendered as bare `display: inline` and inline defaults
   drifted visually vs the header text in the same column class.
   MENTIONED?/CITED?/POSITION are intentionally left untouched — their
   badges/ordinals already render consistently. */
.bvc-col-mentions,
.bvc-col-sources,
.bvc-col-created {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.bvc-engine-dot { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; }

/* Engine logo tile (Mentions table). Colored background + initial sit
   underneath the favicon img; on img load the favicon covers the
   letter; on img error the inline onerror hides the img and the
   colored tile + initial remain visible. */
.bvc-engine-logo {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.bvc-engine-initial {
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  line-height: 1;
}
.bvc-engine-img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #fff;
}
.bvc-preview {
  color: var(--text-secondary);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bvc-unavailable { color: var(--text-muted); }

.bvc-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 20px;
}
.bvc-badge-yes { background: #f0fdf4; color: #166534; }
.bvc-badge-no  { background: #fef2f2; color: #b91c1c; }

.bvc-avatars { display: flex; align-items: center; }
.bvc-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  margin-left: -4px;
  object-fit: cover;
  background: var(--surface);
}
.bvc-avatar:first-child { margin-left: 0; }
.bvc-avatar-more {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--bg);
  margin-left: -4px;
  font-size: 9px;
  font-weight: 600;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bvc-time { font-size: 11px; color: var(--text-muted); }

.bvc-loadmore {
  display: block;
  margin: 14px auto;
  padding: 8px 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
}
.bvc-loadmore:hover:not(:disabled) { border-color: #6D28D9; color: #6D28D9; }
.bvc-loadmore:disabled { opacity: 0.6; cursor: default; }

.bvc-empty, .bvc-error {
  padding: 48px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}
.bvc-skeleton-row {
  display: flex;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}

/* ── v2.20 — Hallucinations Detected (Overview alert card) ──── */
.bv-halluc-card { border-left: 3px solid var(--danger); }
.bv-halluc-headline {
  font-size: 13px;
  color: var(--text);
  margin: 4px 0 12px;
  line-height: 1.4;
}
.bv-halluc-list { display: flex; flex-direction: column; gap: 8px; }
.bv-halluc-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  line-height: 1.4;
}
.bv-halluc-sev {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}
.bv-halluc-sev--high   { background: var(--danger); }
.bv-halluc-sev--medium { background: var(--warning); }
.bv-halluc-sev--low    { background: var(--text-muted); }
.bv-halluc-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bv-halluc-fact { color: var(--text); font-weight: 600; }
.bv-halluc-vs   { color: var(--text-secondary); font-size: 11px; }
.bv-halluc-more {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* ── v2.20 — Mentions row contradiction badge ───────────────── */
.bvc-halluc-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--danger);
  background: var(--danger-bg);
  padding: 2px 8px;
  border-radius: 99px;
  white-space: nowrap;
}

/* ── Mentions row multi-run reliability badge ("X/Y" runs) ────
   Shows beside the Position ordinal when totalRuns > 1, giving
   the user a quick read on how reliably the brand was mentioned
   across the 3-run sampler (e.g. "2/3" vs "3/3"). Hidden for
   single-run legacy citations where the badge would be uninfo. */
.bvc-runs-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--surface);
  padding: 2px 8px;
  border-radius: 99px;
  white-space: nowrap;
}

/* ── Mentions row sentiment pill — shows how the AI framed the brand
   in this response (positive/neutral/negative). Hidden when sentiment
   is null or 'not_mentioned' (the ✗ No badge already conveys that). */
.bvc-sentiment-pill {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.bvc-sentiment-pill--positive { color: var(--success); background: var(--success-bg); }
.bvc-sentiment-pill--neutral  { color: var(--text-secondary); background: var(--surface); }
.bvc-sentiment-pill--negative { color: var(--danger); background: var(--danger-bg); }

/* ── v2.20 — Detail panel "Contradictions" section ──────────── */
.bvcdp-halluc-item {
  border-left: 3px solid var(--danger);
  background: var(--danger-bg);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 8px;
}
.bvcdp-halluc-sev--medium { border-left-color: var(--warning); background: var(--warning-bg); }
.bvcdp-halluc-sev--low    { border-left-color: var(--text-muted); background: var(--bg-muted); }
.bvcdp-halluc-fact { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.bvcdp-halluc-vs   { font-size: 12px; color: var(--text); margin: 2px 0; }
.bvcdp-halluc-label { color: var(--text-muted); font-weight: 500; margin-right: 4px; }
.bvcdp-halluc-why  { font-size: 11px; color: var(--text-secondary); margin-top: 6px; }

/* ── Detail panel (slides in from the right; lives on <body>) ── */
.bvc-detail-panel {
  position: fixed;
  top: 0;
  right: -66vw;
  width: 66vw;
  min-width: 600px;
  max-width: 1200px;
  height: 100vh;
  background: var(--bg);
  border-left: 1px solid var(--border);
  z-index: 1200;
  transition: right 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.08);
}
.bvc-detail-panel.bvc-panel-open { right: 0; }
.bvc-detail-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 1199;
}
.bvc-detail-overlay.bvc-overlay-show { display: block; }

.bvcdp-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 10;
}
.bvcdp-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.bvcdp-back:hover { background: var(--surface); }
.bvcdp-engine {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}
.bvcdp-engine-dot { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; }

/* Detail-panel engine logo tile — mirrors the Mentions table's
   .bvc-engine-logo pattern, sized down for the header (16px → 20px
   tile vs the table's 22px). Colored background + initial behind the
   favicon img; on img error the inline onerror hides the img and the
   tile + initial remain visible. */
.bvcdp-engine-logo {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.bvcdp-engine-initial { font-size: 10px; font-weight: 600; color: #fff; line-height: 1; }
.bvcdp-engine-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; }
.bvcdp-export {
  font-size: 12px;
  color: var(--text-secondary);
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
}

.bvcdp-body {
  display: grid;
  grid-template-columns: 1fr 200px;
  height: calc(100vh - 52px);
  overflow: hidden;
}
.bvcdp-main { padding: 20px; overflow-y: auto; border-right: 1px solid var(--border); }
.bvcdp-prompt {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.4;
  margin: 0 0 14px;
}
.bvcdp-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.bvcdp-date-pill {
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--surface);
  padding: 4px 10px;
  border-radius: 20px;
}
.bvcdp-vis-pill { font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 20px; }
.bvcdp-vis-yes { background: #f0fdf4; color: #166534; }
.bvcdp-vis-no  { background: #fef2f2; color: #b91c1c; }

/* Detail-panel multi-run reliability pill — same neutral pill as
   the date pill above; shown only when totalRuns > 1. */
.bvcdp-runs-pill {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--surface);
  padding: 4px 10px;
  border-radius: 20px;
}

/* Context-quote callout — surfaces the exact sentence the brand
   was mentioned in (from the multi-run sampler's contextQuote).
   Accent border left signals "this is the key spot"; brand names
   inside the text are <mark>-wrapped by convHighlightBrands. */
.bvcdp-context-callout {
  border-left: 3px solid var(--accent);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 16px;
}
.bvcdp-context-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.bvcdp-context-text {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}
.bvcdp-context-text p { margin: 0; }

/* ── Detail-panel sentiment pill (mirrors the row sentiment pill but
   sized to match the existing date/vis pills in the meta row). */
.bvcdp-sentiment-pill {
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: capitalize;
}
.bvcdp-sentiment-pill--positive { color: var(--success); background: var(--success-bg); }
.bvcdp-sentiment-pill--neutral  { color: var(--text-secondary); background: var(--surface); }
.bvcdp-sentiment-pill--negative { color: var(--danger); background: var(--danger-bg); }

/* ── Sentiment "why" caption — keyPhrase (italicised quote) +
   sentimentReason (one-line rationale). Lives inside the context
   callout, below the mention sentence. */
.bvcdp-sentiment-note {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.bvcdp-sentiment-key {
  color: var(--text);
  margin-right: 6px;
}
.bvcdp-sentiment-reason { color: var(--text-secondary); }

/* ── Detection sidebar block (M-M1) — confidence + the detector's
   one-sentence rationale. Same shape as the .bvcdp-section pattern
   used by Brands / Hallucinations / Sources. */
.bvcdp-detection-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 6px;
}
.bvcdp-detection-label {
  color: var(--text-muted);
  font-weight: 500;
}
.bvcdp-detection-val {
  color: var(--text);
  font-weight: 600;
}
.bvcdp-detection-note {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
}

.bvcdp-mentions { display: flex; align-items: center; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.bvcdp-mentions-label { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.bvcdp-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 12px;
  color: var(--text-secondary);
}
.bvcdp-chip-fav { width: 14px; height: 14px; border-radius: 2px; }

.bvcdp-response {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
  white-space: normal;
  word-break: break-word;
}
.bvcdp-mark { background: #fef9c3; border-radius: 2px; padding: 0 2px; }
.bvcdp-unavailable { color: var(--text-muted); }

/* Markdown-rendered AI response body (renderMarkdown in brandView.js). */
.bvcdp-response .bvcdp-md-p { margin: 0 0 12px; }
.bvcdp-response .bvcdp-md-p:last-child { margin-bottom: 0; }
.bvcdp-response .bvcdp-md-h2 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  margin: 18px 0 8px;
}
.bvcdp-response .bvcdp-md-h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  margin: 14px 0 6px;
}
.bvcdp-response > .bvcdp-md-h2:first-child,
.bvcdp-response > .bvcdp-md-h3:first-child { margin-top: 0; }
.bvcdp-response .bvcdp-md-list { margin: 0 0 12px; padding-left: 20px; }
.bvcdp-response .bvcdp-md-list li { margin: 2px 0; }
.bvcdp-response strong { color: var(--text); font-weight: 600; }
.bvcdp-md-code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--bg-muted);
  color: var(--accent);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
}

.bvcdp-sidebar { overflow-y: auto; padding: 16px 12px; }
.bvcdp-section { margin-bottom: 20px; }
.bvcdp-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.bvcdp-section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: 10px;
}
.bvcdp-section-head .bvcdp-section-title { margin-bottom: 0; }
.bvcdp-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
}
.bvcdp-brand {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.bvcdp-brand:hover { background: #f5f3ff; }
.bvcdp-brand-fav { width: 16px; height: 16px; border-radius: 3px; }
.bvcdp-empty { font-size: 12px; color: var(--text-muted); margin: 0; }

.bvcdp-source {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
}
.bvcdp-source:hover .bvcdp-source-title { color: #6D28D9; }
.bvcdp-source-fav { width: 16px; height: 16px; border-radius: 3px; flex-shrink: 0; margin-top: 2px; }
.bvcdp-source-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bvcdp-source-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bvcdp-source-url {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ───────────────────────── Per-Source Detail (bv-srcd-*) ──────────── */

.bv-srcd-view { display: block; }

.src-detail-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: #6D28D9;
}
.src-detail-btn:hover {
  background: var(--surface);
  text-decoration: none;
}

.bv-srcd-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  margin-bottom: 16px;
}
.bv-srcd-favicon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--surface);
  object-fit: contain;
}
.bv-srcd-head-text {
  flex: 1;
  min-width: 0;
}
.bv-srcd-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bv-srcd-sub {
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.bv-srcd-head-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.bv-srcd-visit {
  font-size: 12px;
}

.bv-srcd-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.bv-srcd-stat {
  flex: 1 1 140px;
  min-width: 120px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}
.bv-srcd-stat-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.bv-srcd-stat-value {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  margin-top: 4px;
}

.bv-srcd-engine-card {
  margin-bottom: 16px;
  padding: 16px 18px;
}
.bv-srcd-engine-wrap {
  position: relative;
  height: 200px;
  width: 100%;
}
.bv-srcd-engine-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.bv-srcd-resp-card {
  margin-bottom: 16px;
  padding: 16px 18px;
}
.bv-srcd-resp-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}
.bv-srcd-resp {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--bg);
}
.bv-srcd-resp-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.bv-srcd-resp-engine {
  font-size: 11px;
  font-weight: 600;
  color: #6D28D9;
  background: rgba(109, 40, 217, 0.08);
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}
.bv-srcd-resp-query {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
  word-break: break-word;
}
.bv-srcd-resp-quote {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 6px;
  line-height: 1.5;
  word-break: break-word;
}

/* ── Brands Mentioned card (per-source competitor positioning) ───── */

.bv-srcd-brands-card {
  margin-bottom: 16px;
  padding: 16px 18px;
}
.bv-srcd-brands-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  margin-bottom: 12px;
}
.bv-srcd-brand-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bv-srcd-brand-row {
  display: grid;
  grid-template-columns: 20px 1fr 36px 48px;
  align-items: center;
  gap: 10px;
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-primary);
}
.bv-srcd-brand-row--self {
  background: rgba(109, 40, 217, 0.04);
  border-radius: 8px;
  padding: 4px 8px;
  margin: 0 -8px;
}
.bv-srcd-brand-fav {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  object-fit: contain;
}
.bv-srcd-brand-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.bv-srcd-brand-name--self {
  color: #6D28D9;
  font-weight: 600;
}
.bv-srcd-brand-you {
  font-size: 10px;
  font-weight: 600;
  color: #6D28D9;
  background: rgba(109, 40, 217, 0.10);
  padding: 1px 6px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  flex-shrink: 0;
}
.bv-srcd-brand-count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: right;
}
.bv-srcd-brand-share {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-align: right;
}
.bv-srcd-brand-share--high { color: var(--success); }
.bv-srcd-brand-share--mid  { color: var(--warning); }
.bv-srcd-brand-share--low  { color: var(--danger); }
.bv-srcd-brand-track {
  grid-column: 1 / -1;
  height: 4px;
  background: var(--surface);
  border-radius: 99px;
  overflow: hidden;
  margin-top: -6px;
}
.bv-srcd-brand-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 99px;
  transition: width 0.4s ease;
}

/* ───────────────────────── Your Position (overview SoV card) ────── */

.bv-pos-section { /* no extra rules — inherits .bv-section spacing */ }

.bv-pos-card {
  position: relative;
  padding: 22px 24px 20px;
  overflow: hidden;
}
.bv-pos-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: #6D28D9;
}

.bv-pos-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.bv-pos-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
}
.bv-pos-micro {
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.bv-pos-headline {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin-bottom: 22px;
}
.bv-pos-headline-line + .bv-pos-headline-line { margin-top: 2px; }
.bv-pos-headline-sub  { color: var(--text-secondary); }
.bv-pos-headline-rank {
  color: #6D28D9;
  font-weight: 500;
}
.bv-pos-headline-close {
  color: var(--success);
  font-weight: 500;
}

.bv-pos-rows {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.bv-pos-row {
  display: grid;
  grid-template-columns: 16px 132px 1fr 40px;
  align-items: center;
  gap: 14px;
}
@media (max-width: 900px) {
  .bv-pos-row { grid-template-columns: 14px 96px 1fr 36px; }
}

/* Rank sits in its own grid column; the grid gap handles spacing. */
.bv-pos-rank {
  display: inline-block;
  width: 12px;
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  text-align: left;
}
.bv-pos-name {
  font-size: 13px;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bv-pos-track {
  height: 10px;
  background: var(--surface);
  border-radius: 99px;
  overflow: hidden;
  min-width: 0;
}
.bv-pos-fill {
  height: 100%;
  background: #E0DEEF;
  border-radius: 99px;
  transition: width 0.6s ease;
}

.bv-pos-pct {
  font-size: 13px;
  color: var(--text-secondary);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* CLIENT (you) row — purple-tinted container, accent bar, dark text. */
.bv-pos-row--you {
  background: #F3F1FD;
  margin: 0 -12px;
  padding: 9px 12px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px #E0DEEF;
}
.bv-pos-row--you .bv-pos-name {
  color: #26215C;
  font-weight: 500;
}
.bv-pos-row--you .bv-pos-rank {
  color: #6D28D9;
}
.bv-pos-row--you .bv-pos-track {
  background: var(--bg);
}
.bv-pos-fill--you {
  background: #6D28D9;
}
.bv-pos-row--you .bv-pos-pct {
  color: #26215C;
  font-weight: 500;
}
.bv-pos-you-pill {
  font-size: 9px;
  font-weight: 500;
  color: #6D28D9;
  background: var(--bg);
  padding: 2px 7px;
  border-radius: 99px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bv-pos-msg {
  font-size: 13px;
  color: var(--text-muted);
  padding: 8px 0;
}