/* ═══════════════════════════════════════════════════════════════════════════
   Stocgle Chat — Phase 12-20 Block Component Styles
   
   Loaded AFTER chat.css — inherits all CSS variables from it.
   Contains ONLY styles for typed UI blocks (hero_card, verdict_card,
   scorecard_grid, chart_*, comparison_table, timeline, metric_grid, etc.)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Ensure shadow-card variable is available */
:root {
  --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.06);
}


/* ══════════════════════════════════════════════════════════════════════════
   Phase 12: Premium Block Components
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Annotated Metric Grid ────────────────────────────────────────────── */
.metric-grid-block {
  margin-top: 14px;
}
.mg-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.mg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  width: 100%;
}
.mg-card {
  padding: 12px 14px;
  background: #f8fafc;
  border-radius: 10px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  transition: transform .12s, box-shadow .12s;
}
.mg-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
/* Sentiment-colored left border */
.mg-border-positive { border-left-color: #16a34a; }
.mg-border-negative { border-left-color: #dc2626; }
.mg-border-neutral  { border-left-color: #94a3b8; }
.mg-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.2px;
  margin-bottom: 4px;
}
.mg-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.mg-trend {
  font-size: 13px;
  font-weight: 600;
}
.mg-trend-up   { color: #16a34a; }
.mg-trend-down { color: #dc2626; }
.mg-trend-flat { color: #94a3b8; }
.mg-annotation {
  font-size: 11.5px;
  margin-top: 4px;
  font-weight: 500;
  line-height: 1.3;
}
.mg-positive { color: #16a34a; }
.mg-negative { color: #dc2626; }
.mg-neutral  { color: #64748b; }

/* ── Sortable Data Table ──────────────────────────────────────────────── */
.dt-block {
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
}
.dt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
}
.dt-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.dt-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.dt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  white-space: nowrap;
}
.dt-table th,
.dt-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.dt-table th {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: #f8fafc;
  position: sticky;
  top: 0;
  z-index: 1;
}
.dt-sortable {
  cursor: pointer;
  user-select: none;
  transition: color .15s;
}
.dt-sortable:hover {
  color: var(--primary);
}
.sort-icon {
  font-size: 10px;
  opacity: 0.5;
}
.dt-table td {
  color: var(--text);
}
.dt-table tbody tr:hover {
  background: #f1f5f9;
}
.dt-table tbody tr:last-child td {
  border-bottom: none;
}
.dt-link {
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px dotted var(--primary);
}
.dt-link:hover {
  border-bottom-style: solid;
}
.dt-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  background: #f8fafc;
  font-size: 12px;
  color: var(--text-muted);
}
.dt-pages {
  display: flex;
  gap: 4px;
}
.dt-page-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: none;
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  transition: all .12s;
}
.dt-page-btn:hover {
  background: #e2e8f0;
}
.dt-page-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* ── Callout Blocks ───────────────────────────────────────────────────── */
.callout {
  margin-top: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  border-left: 4px solid;
  font-size: 13.5px;
  line-height: 1.5;
}
.callout-warning {
  background: #fffbeb;
  border-left-color: #f59e0b;
  color: #92400e;
}
.callout-risk {
  background: #fef2f2;
  border-left-color: #dc2626;
  color: #991b1b;
}
.callout-strength {
  background: #f0fdf4;
  border-left-color: #16a34a;
  color: #166534;
}
.callout-insight {
  background: #eff6ff;
  border-left-color: #3b82f6;
  color: #1e40af;
}
.callout-info {
  background: #f8fafc;
  border-left-color: #94a3b8;
  color: #475569;
}
.callout-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  margin-bottom: 4px;
}
.callout-title {
  font-weight: 600;
}
.callout-content {
  font-weight: 400;
}

/* ── Block entrance animation ─────────────────────────────────────────── */
@keyframes blockFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.metric-grid-block,
.dt-block,
.callout {
  animation: blockFadeIn 0.3s ease-out both;
}
.snippet {
  animation: blockFadeIn 0.25s ease-out both;
}

/* ══════════════════════════════════════════════════════════════════════════
   Phase 13: Hero Card + Verdict Card
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Hero Card ───────────────────────────────────────────────────────────── */
.hero-card {
  margin-top: 14px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  box-shadow: var(--shadow-card);
  animation: blockFadeIn 0.35s ease-out both;
}
.hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.hero-identity {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hero-symbol {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.5px;
  line-height: 1;
}
.hero-name {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1.2;
}
.hero-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.hero-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  background: #e2e8f0;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.hero-tag-sector {
  background: #dbeafe;
  color: #1e40af;
}
.hero-tag-cap {
  background: #f3e8ff;
  color: #6b21a8;
}
.hero-price-block {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.hero-price {
  font-size: 26px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}
.hero-change {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
}
.hero-up {
  color: #16a34a;
  background: rgba(22, 163, 74, 0.08);
}
.hero-down {
  color: #dc2626;
  background: rgba(220, 38, 38, 0.08);
}

/* 52-week range bar */
.hero-range {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.hero-range-labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 11px;
  color: var(--text-muted);
}
.hero-range-title {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.hero-range-track {
  position: relative;
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
  margin: 8px 0;
}
.hero-range-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, #dc2626 0%, #f59e0b 50%, #16a34a 100%);
  border-radius: 3px;
  opacity: 0.3;
  width: 100%;
}
.hero-range-dot {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  background: var(--primary);
  border: 2.5px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
  transition: left 0.3s ease;
}
.hero-range-values {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

/* Stats row */
.hero-stats {
  display: flex;
  gap: 16px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.hero-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hero-stat-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.hero-stat-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

/* ── Verdict Card ────────────────────────────────────────────────────────── */
.verdict-card {
  margin-top: 14px;
  padding: 18px 20px;
  border-radius: 12px;
  border: 1px solid var(--border);
  border-left: 5px solid;
  box-shadow: var(--shadow-card);
  animation: blockFadeIn 0.35s ease-out both;
}
.verdict-positive {
  border-left-color: #16a34a;
  background: linear-gradient(135deg, #f0fdf4 0%, #f8fafc 100%);
}
.verdict-negative {
  border-left-color: #dc2626;
  background: linear-gradient(135deg, #fef2f2 0%, #f8fafc 100%);
}
.verdict-mixed {
  border-left-color: #f59e0b;
  background: linear-gradient(135deg, #fffbeb 0%, #f8fafc 100%);
}
.verdict-body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.verdict-text-col {
  flex: 1;
  min-width: 0;
}
.verdict-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
/* Phase 20: Circular score badge */
.verdict-score-badge {
  position: relative;
  width: 90px;
  height: 90px;
  flex-shrink: 0;
}
.verdict-score-value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
}
.verdict-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}
.verdict-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 12px;
}
.verdict-factors {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.verdict-factor {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(0,0,0,0.03);
  border: 1px solid var(--border);
  color: var(--text);
}
.vf-icon {
  font-size: 12px;
  font-weight: 700;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.vf-positive .vf-icon {
  color: #16a34a;
  background: rgba(22, 163, 74, 0.1);
}
.vf-negative .vf-icon {
  color: #dc2626;
  background: rgba(220, 38, 38, 0.1);
}
.vf-neutral .vf-icon {
  color: #64748b;
  background: rgba(100, 116, 139, 0.1);
}

/* ── Responsive adjustments for Phase 13 blocks ──────────────────────────── */
@media (max-width: 500px) {
  .hero-card { padding: 14px; }
  .hero-top { flex-direction: column; gap: 12px; }
  .hero-price-block { align-items: flex-start; text-align: left; }
  .hero-price { font-size: 22px; }
  .hero-symbol { font-size: 18px; }
  .hero-stats { gap: 12px; }
  .verdict-card { padding: 14px 16px; }
  .verdict-title { font-size: 14px; }
  .verdict-factors { gap: 6px; }
  .verdict-factor { font-size: 11.5px; padding: 4px 8px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Phase 14: Scorecard Grid — Investment Checklist
   ══════════════════════════════════════════════════════════════════════════ */

.scorecard-block {
  margin-top: 14px;
  animation: blockFadeIn 0.35s ease-out both;
}
.sc-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.sc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  gap: 10px;
}
.sc-card {
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  position: relative;
  transition: transform .12s, box-shadow .12s;
  overflow: hidden;
}
.sc-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
/* Signal-based top accent */
.sc-positive { border-top: 3px solid #16a34a; }
.sc-negative { border-top: 3px solid #dc2626; }
.sc-neutral  { border-top: 3px solid #f59e0b; }

.sc-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.sc-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sc-icon-positive { background: rgba(22, 163, 74, 0.1); color: #16a34a; }
.sc-icon-negative { background: rgba(220, 38, 38, 0.1); color: #dc2626; }
.sc-icon-neutral  { background: rgba(245, 158, 11, 0.1); color: #d97706; }

.sc-signal {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.sc-sig-positive { background: rgba(22, 163, 74, 0.12); color: #16a34a; }
.sc-sig-negative { background: rgba(220, 38, 38, 0.12); color: #dc2626; }
.sc-sig-neutral  { background: rgba(245, 158, 11, 0.12); color: #d97706; }

.sc-category {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}
.sc-status {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.2;
}

/* Score progress bar */
.sc-score-bar {
  height: 4px;
  background: #e5e7eb;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 4px;
}
.sc-score-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.6s ease-out;
}
.sc-fill-positive { background: linear-gradient(90deg, #16a34a, #4ade80); }
.sc-fill-negative { background: linear-gradient(90deg, #dc2626, #f87171); }
.sc-fill-neutral  { background: linear-gradient(90deg, #f59e0b, #fbbf24); }

.sc-score-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  text-align: right;
}

/* ══════════════════════════════════════════════════════════════════════════
   Phase 15: Radar Chart — Multi-Dimensional Score Profile
   ══════════════════════════════════════════════════════════════════════════ */

.radar-block {
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  animation: blockFadeIn 0.35s ease-out both;
}
.radar-header {
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--border);
  background: #f8fafc;
}
.radar-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.radar-subtitle {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 2px;
  font-weight: 500;
}
/* Side-by-side: chart + dimension breakdown */
.radar-content {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.radar-chart-col {
  flex: 0 0 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border-right: 1px solid var(--border);
}
.radar-canvas {
  max-width: 260px;
  max-height: 260px;
  width: 100% !important;
  height: auto !important;
}
.radar-details-col {
  flex: 1;
  min-width: 0;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Company color labels for comparison */
.radar-company-labels {
  display: flex;
  gap: 16px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.radar-cl {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
/* Dimension rows */
.radar-dim-list { display: flex; flex-direction: column; gap: 8px; }
.radar-dim-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.radar-dim-row-alt { margin-top: -4px; }
.radar-dim-label {
  width: 110px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}
.radar-dim-bar-wrap {
  flex: 1;
  height: 7px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
  min-width: 50px;
}
.radar-dim-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s ease-out;
}
.radar-dim-val {
  width: 32px;
  text-align: right;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.radar-dim-qual {
  width: 68px;
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 2px 6px;
  border-radius: 4px;
}
.radar-q-excellent { color: #065f46; background: #d1fae5; }
.radar-q-good      { color: #166534; background: #dcfce7; }
.radar-q-avg       { color: #854d0e; background: #fef9c3; }
.radar-q-below     { color: #9a3412; background: #ffedd5; }
.radar-q-poor      { color: #991b1b; background: #fee2e2; }

/* ── Responsive adjustments for Phase 14-15 blocks ────────────────────────── */
@media (max-width: 640px) {
  .radar-content { flex-direction: column; }
  .radar-chart-col {
    flex: none;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 12px;
  }
  .radar-canvas { max-width: 220px; max-height: 220px; }
  .radar-details-col { padding: 12px 14px; }
  .radar-dim-label { width: 90px; font-size: 11px; }
  .radar-dim-qual { width: 60px; font-size: 9.5px; }
}
@media (max-width: 500px) {
  .sc-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .sc-card { padding: 10px; }
  .sc-status { font-size: 12px; }
  .sc-icon { width: 26px; height: 26px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Phase 16: Enhanced Charts (Line, Bar, Doughnut)
   ══════════════════════════════════════════════════════════════════════════ */

.cht-block {
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  animation: blockFadeIn 0.35s ease-out both;
}
.cht-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: #f8fafc;
  gap: 12px;
  flex-wrap: wrap;
}
.cht-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.cht-body {
  padding: 16px;
  position: relative;
  height: 220px;
}
.cht-canvas {
  width: 100% !important;
  height: 100% !important;
}

/* Period toggle buttons */
.cht-periods {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.cht-period-btn {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  transition: all .12s;
}
.cht-period-btn:hover {
  background: #f1f5f9;
  color: var(--text);
  border-color: #d1d5db;
}
.cht-period-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* Doughnut chart layout */
.cht-doughnut-block .cht-body {
  height: auto;
  padding: 0;
}
.cht-doughnut-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
}
.cht-doughnut-canvas-wrap {
  width: 160px;
  height: 160px;
  flex-shrink: 0;
}
.cht-doughnut-canvas {
  width: 160px !important;
  height: 160px !important;
}
.cht-doughnut-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.cht-doughnut-leg {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.cht-doughnut-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cht-doughnut-label {
  color: var(--text);
  font-weight: 500;
  flex: 1;
}
.cht-doughnut-val {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 12px;
}

/* ── Responsive adjustments for Phase 16 charts ──────────────────────────── */
@media (max-width: 500px) {
  .cht-body { height: 180px; padding: 12px; }
  .cht-header { padding: 10px 14px; }
  .cht-periods { gap: 2px; }
  .cht-period-btn { padding: 3px 7px; font-size: 10px; }
  .cht-doughnut-wrap { flex-direction: column; gap: 14px; padding: 14px; }
  .cht-doughnut-canvas-wrap { width: 140px; height: 140px; }
  .cht-doughnut-canvas { width: 140px !important; height: 140px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Phase 17: Comparison Table                                                */
/* ═══════════════════════════════════════════════════════════════════════════ */

.cmp-block {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  margin: 12px 0;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.cmp-header {
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--border);
}
.cmp-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.cmp-table-wrap {
  overflow-x: auto;
}
.cmp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.cmp-table thead {
  background: #f9fafb;
}
.cmp-th-metric {
  text-align: left;
  padding: 10px 14px;
  font-weight: 600;
  color: var(--text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
.cmp-th-sym {
  text-align: center;
  padding: 10px 14px;
  border-bottom: 2px solid var(--border);
  min-width: 110px;
}
.cmp-sym {
  font-weight: 700;
  font-size: 14px;
  color: var(--primary);
}
.cmp-name {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.cmp-td-metric {
  padding: 10px 14px;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid #f0f0f0;
  white-space: nowrap;
}
.cmp-td {
  text-align: center;
  padding: 10px 14px;
  border-bottom: 1px solid #f0f0f0;
  color: var(--text);
  position: relative;
}
.cmp-winner {
  background: #eff6ff;
  color: #0369a1;
  font-weight: 700;
}
.cmp-win-badge {
  display: inline-block;
  margin-left: 5px;
  font-size: 11px;
  color: #0ea5e9;
  font-weight: 700;
}
.cmp-table tbody tr:hover {
  background: #f9fafb;
}
.cmp-table tbody tr:last-child td,
.cmp-table tbody tr:last-child .cmp-td-metric {
  border-bottom: none;
}

/* ── Responsive adjustments for Phase 17 comparison table ──────────────── */
@media (max-width: 500px) {
  .cmp-th-sym { min-width: 80px; padding: 8px 8px; }
  .cmp-td, .cmp-td-metric { padding: 8px; font-size: 12px; }
  .cmp-name { max-width: 80px; }
  .cmp-header { padding: 10px 14px 8px; }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Phase 18: Timeline                                                        */
/* ═══════════════════════════════════════════════════════════════════════════ */

.tl-block {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  margin: 12px 0;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.tl-header {
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--border);
}
.tl-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.tl-events {
  padding: 16px 18px 12px;
}
.tl-event {
  display: flex;
  gap: 14px;
  min-height: 60px;
}
.tl-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20px;
  flex-shrink: 0;
}
.tl-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--primary);
  background: var(--surface);
  flex-shrink: 0;
  margin-top: 4px;
}
.tl-dot-announcement {
  border-color: #3b82f6;
  background: #eff6ff;
}
.tl-dot-trade {
  border-color: #f59e0b;
  background: #fffbeb;
}
.tl-line {
  width: 2px;
  flex: 1;
  background: #e5e7eb;
  margin: 4px 0;
}
.tl-content {
  flex: 1;
  padding-bottom: 16px;
}
.tl-date {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 4px;
  letter-spacing: 0.2px;
}
.tl-card {
  background: #f9fafb;
  border: 1px solid #f0f0f0;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}
.tl-card-type {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}
.tl-card-type svg {
  color: var(--text-muted);
  flex-shrink: 0;
}
.tl-card-title {
  font-size: 13px;
  color: var(--text);
  line-height: 1.45;
}
.tl-event-first .tl-dot {
  width: 14px;
  height: 14px;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15);
}
.tl-event-first .tl-dot-announcement {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.tl-event-first .tl-dot-trade {
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}
.tl-event:last-child .tl-content {
  padding-bottom: 4px;
}

/* ── Responsive adjustments for Phase 18 timeline ──────────────────────── */
@media (max-width: 500px) {
  .tl-events { padding: 12px 14px 8px; }
  .tl-event { gap: 10px; }
  .tl-card { padding: 8px 10px; }
  .tl-card-title { font-size: 12px; }
  .tl-connector { width: 16px; }
  .tl-dot { width: 10px; height: 10px; }
  .tl-event-first .tl-dot { width: 12px; height: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Phase 19: Progressive SSE Streaming — Early Blocks                       */
/* ═══════════════════════════════════════════════════════════════════════════ */

.early-blocks {
  animation: earlyBlocksFadeIn 0.35s ease-out;
}
.early-blocks > * {
  animation: earlyBlockSlideUp 0.3s ease-out both;
}
.early-blocks > *:nth-child(1) { animation-delay: 0s; }
.early-blocks > *:nth-child(2) { animation-delay: 0.08s; }
.early-blocks > *:nth-child(3) { animation-delay: 0.16s; }
.early-blocks > *:nth-child(4) { animation-delay: 0.24s; }
.early-blocks > *:nth-child(5) { animation-delay: 0.32s; }
.early-blocks > *:nth-child(n+6) { animation-delay: 0.4s; }

@keyframes earlyBlocksFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes earlyBlockSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Phase 20: Action Bar — Share + Export                                     */
/* ═══════════════════════════════════════════════════════════════════════════ */

.action-link.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  transition: all .15s;
}
.action-link.share-btn:hover {
  background: #f1f5f9;
  color: var(--text);
  border-color: #d1d5db;
}

.export-dropdown {
  position: relative;
  display: inline-block;
}
.action-link.export-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  transition: all .15s;
}
.action-link.export-btn:hover {
  background: #f1f5f9;
  color: var(--text);
  border-color: #d1d5db;
}
.export-menu {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  min-width: 160px;
  z-index: 50;
  overflow: hidden;
}
.export-menu-open {
  display: block;
  animation: exportMenuIn 0.15s ease-out;
}
.export-option {
  display: block;
  width: 100%;
  padding: 8px 14px;
  border: none;
  background: none;
  text-align: left;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  transition: background .1s;
}
.export-option:hover {
  background: #f3f4f6;
}
@keyframes exportMenuIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Phase 21: Side-by-Side Hero Cards (Comparison Layout)                     */
/* ═══════════════════════════════════════════════════════════════════════════ */

.hero-cards-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}
.hero-cards-row .hero-card {
  margin-top: 0;
}
@media (max-width: 640px) {
  .hero-cards-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Phase 21: Head-to-Head Horizontal Bar Chart (Comparison)                  */
/* ═══════════════════════════════════════════════════════════════════════════ */

.h2h-block {
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  animation: blockFadeIn 0.35s ease-out both;
}
.h2h-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: #f8fafc;
}
.h2h-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.h2h-legend {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 12px 18px 4px;
}
.h2h-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}
.h2h-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.h2h-rows {
  padding: 8px 18px 16px;
}
.h2h-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.h2h-row:last-child { margin-bottom: 0; }
.h2h-label {
  width: 100px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-align: right;
  flex-shrink: 0;
}
.h2h-bars {
  flex: 1;
  display: flex;
  gap: 3px;
}
.h2h-bar-left, .h2h-bar-right {
  height: 22px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 0 8px;
  min-width: 36px;
  transition: width 0.5s ease-out;
}
.h2h-bar-left {
  background: #3b82f6;
  color: #fff;
  justify-content: flex-end;
}
.h2h-bar-right {
  background: #f59e0b;
  color: #fff;
  justify-content: flex-start;
}
.h2h-bar-winner {
  box-shadow: 0 0 0 2px rgba(0,0,0,0.08);
}
@media (max-width: 500px) {
  .h2h-label { width: 70px; font-size: 11px; }
  .h2h-bar-left, .h2h-bar-right { font-size: 10px; height: 18px; min-width: 28px; }
  .h2h-rows { padding: 8px 12px 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Phase 21: Strengths & Risks Lists                                         */
/* ═══════════════════════════════════════════════════════════════════════════ */

.sr-block {
  margin-top: 14px;
  animation: blockFadeIn 0.35s ease-out both;
}
.sr-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.sr-col {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
}
.sr-col-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}
.sr-col-strengths .sr-col-header {
  background: #f0fdf4;
  color: #166534;
}
.sr-col-risks .sr-col-header {
  background: #fef2f2;
  color: #991b1b;
}
.sr-col-header svg { flex-shrink: 0; }
.sr-list {
  padding: 12px 16px;
}
.sr-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 8px;
}
.sr-item:last-child { margin-bottom: 0; }
.sr-icon-ok {
  color: #16a34a;
  flex-shrink: 0;
  margin-top: 2px;
  font-weight: 700;
  font-size: 14px;
}
.sr-icon-warn {
  color: #dc2626;
  flex-shrink: 0;
  margin-top: 2px;
  font-weight: 700;
  font-size: 14px;
}
@media (max-width: 640px) {
  .sr-cols { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Phase 21: Enhanced Data Table — Rank Badges & Score Pills                 */
/* ═══════════════════════════════════════════════════════════════════════════ */

.dt-rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}
.dt-rank-1 { background: linear-gradient(135deg, #f59e0b, #d97706); }
.dt-rank-2 { background: linear-gradient(135deg, #94a3b8, #64748b); }
.dt-rank-3 { background: linear-gradient(135deg, #c2916e, #a16207); }
.dt-rank-default { background: #e2e8f0; color: #475569; }

.dt-score-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  min-width: 42px;
  justify-content: center;
}
.dt-score-high { background: #dcfce7; color: #166534; }
.dt-score-mid  { background: #fef9c3; color: #854d0e; }
.dt-score-low  { background: #fce7f3; color: #9f1239; }

.dt-company-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dt-company-logo {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #f1f5f9;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  flex-shrink: 0;
  overflow: hidden;
}
.dt-company-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dt-company-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.dt-company-name {
  font-weight: 600;
  color: var(--text);
  font-size: 13px;
  white-space: nowrap;
}
.dt-company-link {
  font-weight: 600;
  color: var(--text);
  font-size: 13px;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.12s;
}
.dt-company-link:hover {
  color: var(--primary);
}
.dt-company-sym {
  font-size: 11px;
  color: var(--primary);
  font-weight: 500;
  text-decoration: none;
}
.dt-company-sym:hover {
  text-decoration: underline;
}

/* Grade badge (A+, B, C etc.) */
.dt-grade-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 22px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
}
.dt-grade-a { background: #dcfce7; color: #166534; }
.dt-grade-b { background: #dbeafe; color: #1e40af; }
.dt-grade-c { background: #fef9c3; color: #854d0e; }
.dt-grade-d { background: #fce7f3; color: #9f1239; }

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Phase 20: Dark Mode Toggle                                                */
/* ═══════════════════════════════════════════════════════════════════════════ */

.dark-toggle {
  margin-left: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Phase 20: Block Entrance Animations                                       */
/* ═══════════════════════════════════════════════════════════════════════════ */

.hero-card,
.verdict-card,
.scorecard-block,
.radar-block,
.cht-block,
.cmp-block,
.tl-block,
.metric-row,
.callout {
  animation: blockEnter 0.35s ease-out both;
}
@keyframes blockEnter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Phase 20: Dark Mode                                                       */
/* ═══════════════════════════════════════════════════════════════════════════ */

:root.dark {
  --bg: #0f0f0f;
  --surface: #1a1a1a;
  --border: #2d2d2d;
  --text: #e5e5e5;
  --text-muted: #9ca3af;
  --primary: #38bdf8;
  --primary-hover: #0ea5e9;
  --user-bubble: #262626;
  --assistant-bubble: #1a1a1a;
  --shadow: 0 1px 3px rgba(0,0,0,.3);
  --shadow-card: 0 4px 12px rgba(0,0,0,.25);
}

/* Dark overrides for specific components */
:root.dark .feedback-btn:hover,
:root.dark .action-link.copy-btn:hover,
:root.dark .action-link.share-btn:hover,
:root.dark .action-link.export-btn:hover {
  background: #2d2d2d;
  color: var(--text);
  border-color: #404040;
}
:root.dark .export-option:hover {
  background: #2d2d2d;
}

/* Hero card dark */
:root.dark .hero-card {
  background: #1f1f1f;
}
:root.dark .hero-stat-label {
  color: var(--text-muted);
}

/* Verdict card dark */
:root.dark .verdict-positive { background: #052e16; border-color: #166534; }
:root.dark .verdict-negative { background: #2a0a0a; border-color: #7f1d1d; }
:root.dark .verdict-neutral  { background: #1a1a1a; border-color: #404040; }

/* Scorecard dark */
:root.dark .sc-card {
  background: #1f1f1f;
  border-color: #2d2d2d;
}
:root.dark .sc-positive { border-left-color: #34d399; }
:root.dark .sc-negative { border-left-color: #f87171; }
:root.dark .sc-neutral  { border-left-color: #6b7280; }

/* Chart block dark */
:root.dark .cht-block,
:root.dark .radar-block,
:root.dark .cmp-block,
:root.dark .tl-block {
  background: #1f1f1f;
  border-color: #2d2d2d;
}
:root.dark .cht-header,
:root.dark .cmp-header,
:root.dark .tl-header,
:root.dark .radar-header {
  border-bottom-color: #2d2d2d;
  background: #1a1a1a;
}
:root.dark .radar-chart-col { border-right-color: #2d2d2d; }
:root.dark .radar-dim-bar-wrap { background: #333; }
:root.dark .radar-company-labels { border-bottom-color: #2d2d2d; }
:root.dark .radar-q-excellent { color: #6ee7b7; background: #064e3b; }
:root.dark .radar-q-good      { color: #86efac; background: #14532d; }
:root.dark .radar-q-avg       { color: #fde68a; background: #422006; }
:root.dark .radar-q-below     { color: #fdba74; background: #431407; }
:root.dark .radar-q-poor      { color: #fca5a5; background: #450a0a; }

/* Comparison table dark */
:root.dark .cmp-table thead { background: #1f1f1f; }
:root.dark .cmp-td-metric,
:root.dark .cmp-td { border-bottom-color: #2d2d2d; }
:root.dark .cmp-winner { background: #0c2d48; color: #38bdf8; }
:root.dark .cmp-table tbody tr:hover { background: #262626; }

/* Timeline dark */
:root.dark .tl-card { background: #262626; border-color: #333; }
:root.dark .tl-dot { background: #1a1a1a; }
:root.dark .tl-line { background: #333; }
:root.dark .tl-dot-announcement { border-color: #60a5fa; background: #1e3a5f; }
:root.dark .tl-dot-trade { border-color: #fbbf24; background: #3b2f10; }

/* Chart periods dark */
:root.dark .cht-period-btn { background: #262626; color: var(--text-muted); border-color: #333; }
:root.dark .cht-period-btn.cht-active { background: var(--primary); color: #000; }

/* Metric grid dark */
:root.dark .metric-row { border-bottom-color: #2d2d2d; }
:root.dark .annot-tag-warn { background: rgba(251, 191, 36, 0.15); }
:root.dark .annot-tag-ok { background: rgba(52, 211, 153, 0.15); }

/* Callout dark */
:root.dark .callout-warn { background: #3b2f10; border-color: #92400e; }
:root.dark .callout-info { background: #1e3a5f; border-color: #1e40af; }
:root.dark .callout-ok   { background: #052e16; border-color: #166534; }

/* Scrollbar dark */
:root.dark .messages::-webkit-scrollbar-thumb { background: #404040; }
:root.dark .messages::-webkit-scrollbar-track { background: #1a1a1a; }

/* Input dark */
:root.dark .input-wrap { background: #262626; border-color: #333; }
:root.dark .input-wrap:focus-within { border-color: var(--primary); }
:root.dark #input { color: var(--text); }
:root.dark #input::placeholder { color: #6b7280; }

/* Sources dark */
:root.dark .source-chip { background: #262626; border-color: #333; }
:root.dark .source-chip:hover { background: #333; }

/* Related questions dark */
:root.dark .related-item { background: #262626; border-color: #333; }
:root.dark .related-item:hover { background: #333; border-color: #404040; }

/* Sidebar dark */
:root.dark .sidebar-history { background: var(--surface); }
:root.dark .history-item { border-bottom-color: #2d2d2d; }
:root.dark .history-item:hover { background: #262626; }

/* Thinking card dark */
:root.dark .thinking-card { background: #1f1f1f; border-color: #2d2d2d; }

/* Metric grid dark */
:root.dark .mg-card { background: #1f1f1f; border-color: #2d2d2d; }
:root.dark .mg-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.2); }

/* Scorecard dark */
:root.dark .scorecard-block { background: transparent; }
:root.dark .sc-card { background: #1f1f1f; }
:root.dark .sc-score-bar { background: #2d2d2d; }

/* Data table dark */
:root.dark .data-tbl thead { background: #1f1f1f; }
:root.dark .data-tbl th { border-bottom-color: #2d2d2d; color: var(--text-muted); }
:root.dark .data-tbl td { border-bottom-color: #2d2d2d; }
:root.dark .data-tbl tbody tr:hover { background: #262626; }
:root.dark .dt-table th { background: #1f1f1f; }
:root.dark .dt-table tbody tr:hover { background: #262626; }
:root.dark .dt-header { background: #1f1f1f; }
:root.dark .dt-pagination { background: #1f1f1f; }

/* Head-to-head dark */
:root.dark .h2h-block { background: #1f1f1f; border-color: #2d2d2d; }
:root.dark .h2h-header { background: #1f1f1f; border-bottom-color: #2d2d2d; }

/* Strengths/risks dark */
:root.dark .sr-col { background: #1f1f1f; border-color: #2d2d2d; }
:root.dark .sr-col-strengths .sr-col-header { background: #052e16; color: #4ade80; }
:root.dark .sr-col-risks .sr-col-header { background: #2a0a0a; color: #f87171; }
:root.dark .sr-list { background: #1a1a1a; }

/* Rank badges dark */
:root.dark .dt-rank-default { background: #333; color: #9ca3af; }
:root.dark .dt-company-logo { background: #262626; border-color: #333; }
:root.dark .dt-score-high { background: rgba(22,163,74,0.2); color: #4ade80; }
:root.dark .dt-score-mid { background: rgba(245,158,11,0.2); color: #fbbf24; }
:root.dark .dt-score-low { background: rgba(220,38,38,0.2); color: #f87171; }