/* ── Agent-Insights page-specific styles ──
   Chrome (topbar/sidebar/bottom-nav/tokens) lives in common.css.
   Subtitle/heading line uses B2 (#4d9eff) per brand-guide §4 Dashboard Secondary.
   ──────────────────────────────── */

/* ── Page (override: tighter padding) ── */
.page-content {
    position: relative;
    padding: 16px 24px;
}
.page-content::before {
    content: '';
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100vh;
    pointer-events: none;
    background:
        radial-gradient(ellipse 50% 60% at 30% 40%, rgba(var(--b2-rgb),0.12) 0%, transparent 70%),
        radial-gradient(ellipse 45% 55% at 70% 55%, rgba(var(--positive-rgb),0.06) 0%, transparent 70%);
    z-index: 0;
}
.page-header {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.page-title { font-size: 28px; font-weight: 800; color: #fff; }
.page-subtitle {
    font-size: 15px; line-height: 1.35; margin-top: 6px;
    color: var(--b2-soft);
    text-shadow: 0 0 8px rgba(var(--b2-rgb), 0.20), 0 0 20px rgba(var(--b2-rgb), 0.08);
}

/* ══════════════════════════════════
   SUB TABS
   ══════════════════════════════════ */

.sub-tabs {
    display: inline-flex; position: relative; margin: 5px 0 21px;
    background: rgba(255,255,255,0.04);
    border: none;
    border-radius: 14px; padding: 3px;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.sub-tabs-slider {
    position: absolute; top: 3px; bottom: 3px;
    border-radius: 11px;
    background: linear-gradient(180deg, rgba(var(--b2-rgb),0.25) 0%, rgba(var(--b2-rgb),0.10) 100%);
    border: 1px solid rgba(var(--b2-rgb),0.30);
    border-top-color: rgba(var(--b2-rgb),0.45);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        0 2px 8px rgba(var(--b2-rgb),0.14);
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
}
.sub-tab {
    position: relative; z-index: 1;
    padding: 6px 20px; font-size: 13px; font-weight: 600;
    border-radius: 11px; text-decoration: none;
    color: var(--text-dim); background: transparent;
    transition: color 0.2s;
}
.sub-tab:hover { color: var(--text-muted); }
.sub-tab.active { color: #fff; }

/* ══════════════════════════════════
   SECTIONS
   ══════════════════════════════════ */

.insight-section { margin-bottom: 35px; }

.section-heading {
    font-size: 18px; font-weight: 800; margin-bottom: 4px;
    display: flex; align-items: center; gap: 8px;
    color: var(--b2);
    text-shadow: 0 0 8px rgba(var(--b2-rgb), 0.20);
}
.section-heading .material-symbols-outlined {
    font-size: 20px;
    color: var(--b2);
}
.section-desc {
    font-size: 13px; margin-bottom: 20px;
    line-height: 1.5;
    color: var(--b2-soft);
    text-shadow: 0 0 8px rgba(var(--b2-rgb),0.18), 0 0 20px rgba(var(--b2-rgb),0.06);
    opacity: 0.92;
}

/* ── Shared ── */
.tone-pos { color: var(--positive); }
.tone-neg { color: var(--negative); }
.tone-flat { color: var(--text-dim); }
.empty-state, .loading-state {
    display: flex; align-items: center; justify-content: center;
    min-height: 120px; color: var(--text-dim); font-size: 14px;
}

/* ── Score Distribution ── */
.dist-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.dist-label { width: 64px; text-align: right; font-size: 11px; font-weight: 600; color: var(--text-dim); flex-shrink: 0; }
.dist-track { flex: 1; height: 18px; border-radius: 5px; background: rgba(255,255,255,0.02); overflow: hidden; position: relative; }
.dist-fill-glass {
    height: 100%; border-radius: 5px; transition: width 0.5s ease;
    background: linear-gradient(180deg, rgba(var(--b2-rgb),0.35) 0%, rgba(var(--b2-rgb),0.12) 50%, rgba(var(--b2-rgb),0.18) 100%);
    border: 1px solid rgba(var(--b2-rgb),0.25);
    border-top-color: rgba(var(--b2-rgb),0.45);
    border-bottom-color: rgba(var(--b2-rgb),0.08);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.3),
        inset 0 -1px 0 rgba(0,0,0,0.15),
        0 2px 10px rgba(var(--b2-rgb),0.14),
        0 0 16px rgba(var(--b2-rgb),0.08);
}
.dist-count {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.8);
}
.dist-note {
    width: 48px; flex-shrink: 0; font-size: 10px; font-weight: 600;
    color: var(--text-dim); text-align: left;
}

/* ── Score Trends ── */
.spark-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px;
}
.spark-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px; padding: 12px;
}
.spark-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.spark-agent { display: flex; align-items: center; gap: 4px; }
.spark-score { font-size: 12px; font-weight: 700; color: var(--accent); }
.spark-canvas { width: 100%; height: 48px; display: block; }
.spark-loading { font-size: 10px; color: var(--text-dim); text-align: center; padding: 2px 0; }

/* ── Hot Movers ── */
.hot-movers-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hot-movers-col h3 {
    font-size: 13px; font-weight: 700; margin-bottom: 8px;
    display: flex; align-items: center; gap: 6px;
}
.hot-movers-col h3 .arrow-up { color: var(--positive); }
.hot-movers-col h3 .arrow-down { color: var(--negative); }
.hot-mover-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; margin-bottom: 4px;
    border-radius: 8px; background: rgba(255,255,255,0.02);
    transition: background 0.15s;
}
.hot-mover-item:hover { background: rgba(255,255,255,0.05); }
.hot-mover-rank {
    width: 22px; height: 22px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800;
    background: rgba(255,255,255,0.06); color: var(--text-dim);
    flex-shrink: 0;
}
.hot-mover-agent {
    flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0;
}
.hot-mover-bar {
    width: 80px; height: 4px; border-radius: 2px;
    background: rgba(255,255,255,0.04); overflow: hidden; flex-shrink: 0;
}
.hot-mover-bar-fill { height: 100%; border-radius: 2px; transition: width 0.4s ease; }
.hot-mover-val {
    width: 64px; text-align: right; flex-shrink: 0;
    font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* ── Momentum Quadrants ── */
.quadrant-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.quadrant-cell {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px; padding: 14px;
}
.quadrant-accel-up  { border-color: rgba(45,212,191,0.18); }
.quadrant-cool      { border-color: rgba(45,212,191,0.10); }
.quadrant-recover   { border-color: rgba(251,113,133,0.10); }
.quadrant-breakdown { border-color: rgba(251,113,133,0.18); }
.quadrant-header {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 4px;
}
.quadrant-arrow {
    font-size: 18px; font-weight: 800; line-height: 1;
}
.quadrant-arrow.tone-pos      { color: var(--positive); text-shadow: 0 0 8px rgba(45,212,191,0.45); }
.quadrant-arrow.tone-pos-soft { color: rgba(45,212,191,0.75); }
.quadrant-arrow.tone-neg-soft { color: rgba(251,113,133,0.75); }
.quadrant-arrow.tone-neg      { color: var(--negative); text-shadow: 0 0 8px rgba(251,113,133,0.45); }
.quadrant-label {
    font-size: 13px; font-weight: 700; color: #fff;
}
.quadrant-count {
    margin-left: auto;
    font-size: 11px; font-weight: 700;
    padding: 2px 8px; border-radius: 999px;
    background: rgba(255,255,255,0.06); color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}
.quadrant-caption {
    font-size: 11px; color: var(--text-dim);
    margin-bottom: 10px; line-height: 1.4;
}
.quadrant-cards {
    display: flex; flex-direction: column; gap: 6px;
}
.quadrant-empty {
    font-size: 11px; color: var(--text-dim);
    padding: 16px 0; text-align: center;
}
.quadrant-card {
    background: rgba(255,255,255,0.02);
    border-radius: 8px; padding: 8px 10px;
    display: grid; grid-template-columns: minmax(0, 1fr) 80px; gap: 10px;
    align-items: center;
    transition: background 0.15s;
}
.quadrant-card:hover { background: rgba(255,255,255,0.05); }
.quadrant-card-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; min-width: 0;
}
.quadrant-card-agent {
    display: flex; align-items: center; gap: 4px;
    min-width: 0; overflow: hidden;
}
.quadrant-card-val {
    font-size: 11px; font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.quadrant-card-canvas {
    width: 80px; height: 32px; display: block;
}

/* ── Return Heatmap ── */
.heatstrip-table { width: 100%; border-collapse: separate; border-spacing: 4px; }
.heatstrip-table th {
    font-size: 11px; font-weight: 600; color: var(--text-dim);
    padding: 8px 10px; text-align: center;
}
.heatstrip-table th:first-child { text-align: left; }
.heatstrip-label {
    font-size: 12px; font-weight: 700; color: #fff;
    max-width: 180px; white-space: nowrap;
    padding: 8px 10px;
}
.heatstrip-cell {
    display: inline-block; width: 100%; padding: 8px 6px;
    border-radius: 6px; text-align: center;
    font-size: 11px; font-weight: 700; line-height: 1.3;
    border: 1px solid rgba(255,255,255,0.06);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
    transition: transform 0.15s, box-shadow 0.15s;
}
.heatstrip-cell:hover {
    transform: scale(1.08); z-index: 2; position: relative;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 4px 12px rgba(0,0,0,0.3);
}

/* ── Coin Returns ── */
.coin-heat-table { width: 100%; border-collapse: separate; border-spacing: 4px; }
.coin-heat-table th {
    font-size: 11px; font-weight: 600; color: var(--text-dim);
    padding: 8px 10px; text-align: center;
}
.coin-heat-table th:first-child { text-align: left; }
.coin-heat-label {
    font-size: 12px; font-weight: 700; color: #fff;
    padding: 8px 10px; white-space: nowrap;
}
.coin-heat-cell {
    display: inline-block; width: 100%; padding: 8px 6px;
    border-radius: 6px; text-align: center;
    font-size: 11px; font-weight: 700; line-height: 1.3; color: #fff;
    border: 1px solid rgba(255,255,255,0.06);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
    transition: transform 0.15s, box-shadow 0.15s;
}
.coin-heat-cell:hover {
    transform: scale(1.08); position: relative; z-index: 2;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 4px 12px rgba(0,0,0,0.3);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .sidebar { display: none; }
    .bottom-nav { display: flex; }
    .page-content { margin-left: 0; padding: 12px; padding-bottom: 80px; overflow-x: hidden; }
    .spark-grid { grid-template-columns: repeat(2, 1fr); }
    .hot-movers-wrap { grid-template-columns: 1fr; }
    .quadrant-grid { grid-template-columns: 1fr; }
}
@media (max-width: 360px) {
    .spark-grid { grid-template-columns: 1fr; }
}