/* Chart Page Styles */

/* Tighter page padding — chart is a full-screen app, maximize vertical space.
   padding-right reserves room for .chart-side-nav (fixed, ~3rem wide, docked
   flush to the viewport's right edge) so it doesn't overlap page content —
   .container itself is full-width (max-width:none) with no room to spare. */
.chart-page.pt-page,
.chart-page .pt-page {
    padding-top: 0.375rem;
    padding-bottom: 0.5rem;
    padding-right: 3.5rem;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ═══ Unified terminal — the single outer glass panel ═══ */
.chart-terminal {
    display: flex;
    flex-direction: column;
    /* Flex-fill: grows to consume all remaining height in .chart-page */
    flex: 1;
    margin-bottom: 0;
    box-sizing: border-box;
}

/* Grid inside the terminal — zero gap, sections butt up with divider borders */
.terminal-grid {
    display: grid;
    flex: 1;
    min-height: 0;
}

/* ─── News card (data-card variant) ─── */

.news-card {
    border-left: 3px solid transparent;
    transition: border-color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.news-card:hover {
    border-left-color: var(--accent);
}

/* Same-story stack: one bordered container holding the lead card and the
   "+N more sources" disclosure, so they read as a single unit */
.news-stack {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 0.625rem;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.news-stack:hover {
    border-color: var(--border-medium);
}

.news-stack .news-card {
    background: none;
    border: none;
    border-left: 3px solid transparent;
    border-radius: 0;
}

.news-stack .news-card:hover {
    background: var(--glass-bg-hover, rgba(255,255,255,0.04));
    border-left-color: var(--accent);
}

.news-stack-sources {
    border-top: 1px solid var(--glass-border);
}

.news-stack-sources > summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    color: var(--text-dim);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.news-stack-sources > summary::-webkit-details-marker {
    display: none;
}

.news-stack-sources > summary::before {
    content: "›";
    display: inline-block;
    transition: transform 0.15s ease;
}

.news-stack-sources[open] > summary::before {
    transform: rotate(90deg);
}

.news-stack-sources > summary:hover .news-stack-count {
    color: var(--text);
}

.news-stack-count {
    flex-shrink: 0;
    font-weight: 600;
}

.news-stack-names {
    min-width: 0;
    opacity: 0.8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.news-stack-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--glass-border);
}

.news-stack-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.4375rem 0.75rem;
    font-size: 0.75rem;
    color: inherit;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.news-stack-item:hover {
    border-left-color: var(--accent);
    background: var(--glass-bg-hover, rgba(255,255,255,0.04));
}

.news-stack-item .rating-badge {
    flex-shrink: 0;
}

.news-stack-headline {
    flex: 1;
    min-width: 0;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Category tabs + Sub tabs — now use .tab-bar / .tab-btn from components.css */

/* Timeframe button row */
.tf-scroll-row {
    flex-wrap: wrap;
}

/* Chart controls row */
.chart-controls-row {
    display: flex;
    align-items: center;
}

/* Every chart control (header actions, toolbar buttons, timeframe picks,
   zoom badge) shares the side rail's 2.25rem (36px) size at all widths, so
   the page reads as one even set of controls and stays easy to tap. */
.chart-control-btn {
    min-width: 2.25rem;
}

.tf-btn {
    height: 2.25rem;
}

#indicatorDropdownWrap {
    display: flex;
}

/* Spin animation for loading states */
@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

/* Tab content fade-in — applied via JS when switching tabs */
@keyframes tabFadeIn {
    from { opacity: 0; transform: translateY(3px); }
    to   { opacity: 1; transform: translateY(0); }
}

.tab-entering {
    animation: tabFadeIn 0.15s ease both;
}

/* ═══ TABLET BREAKPOINT ═══ */
@media (max-width: 1200px) {
    /* Below this width .chart-side-nav is no longer next to the chart at all
       (see its own override further down) -- the chart itself can go back
       to using the full page width instead of leaving room for the rail. */
    .chart-page.pt-page,
    .chart-page .pt-page {
        padding-right: 0.5rem;
    }

    .chart-terminal {
        height: auto;
        min-height: 0;
        border-radius: 0.75rem;
        /* Stacked layout: chart-panel-main has its own overflow:hidden,
           so the outer container can be visible for page scrolling */
        overflow: visible;
    }

    .terminal-grid {
        height: auto;
        min-height: 0;
    }

    /* Chart gets explicit height in stacked layout */
    .chart-panel-main {
        min-height: 31.25rem;
        height: 60vh;
        border-right: none;
    }

    /* Sidebar stacks below chart — restore normal block flow */
    .chart-sidebar-col {
        /* .chart-side-nav switches to position:absolute here (below), scoped
           to this column instead of the full viewport, so it only ever runs
           alongside the data/tabs panel -- not the chart above it. Reserves
           slightly more than the rail's own ~3rem width so there's a visible
           gap between it and the data panel, same as the desktop rail's gap
           against .chart-terminal (3.5rem reserved there too). */
        position: relative;
        padding-right: 3.5rem;
    }

    /* Data panel: auto height */
    .chart-data-panel {
        min-height: 26.25rem;
        height: auto;
        overflow: visible;
    }

    /* Tab content area: switch from flex-scroll to natural block height.
       Reserve at least one screen below the pinned tab bar so a short/empty
       tab (e.g. Social with no posts, or a "no data" state) can't shrink the
       page below the current scroll — otherwise the browser clamps scroll and
       the pinned bar rides back up ("moves a lot"). Bounded to ~one viewport,
       so short tabs just show empty space below their content like a normal
       not-full tab, not the huge blank space of reserving the tallest tab. */
    .chart-tab-content-area {
        overflow-y: visible;
        flex: none;
        height: auto;
        min-height: calc(100dvh - 2rem);
    }
}

/* Tab-bars sticky wrapper.
   Desktop: the tab bars already sit outside the scroll region (only
   .chart-tab-content-area scrolls), so no pinning is needed — `display:
   contents` makes the wrapper layout-transparent so the bars behave as direct
   flex children of .chart-data-panel exactly as before.
   Mobile: the whole page is one scroll (no nested scroll region), so
   switching to a shorter tab shrinks the page and the browser clamps scroll —
   the "whole page jumps" and the tabs scroll out of reach. Pinning the bars to
   the top of the viewport (like Google Finance / Yahoo Finance mobile) keeps
   them always tappable and makes content swap *under* a fixed anchor instead
   of reflowing the page around the user. Opaque page-bg so scrolling content
   doesn't bleed through; z-index keeps it above the fading-in tab content. */
.chart-tabs-sticky {
    display: contents;
}

@media (max-width: 1200px) {
    .chart-tabs-sticky {
        display: block;
        position: sticky;
        top: 0;
        z-index: 20;
    }
}

/* ═══ MOBILE BREAKPOINT ═══ */
@media (max-width: 768px) {
    /* Header row */
    .chart-header-row {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
        gap: 0.375rem;
    }

    .chart-header-row .btn {
        padding: 0 0.5rem;
    }

    /* Chart toolbar — tighter on mobile */

    .chart-toolbar h3 {
        font-size: 0.9rem;
    }

    /* Allow page scroll when touching the chart — vertical swipes go to page,
       horizontal swipes still pan the chart timeline */
    .chart-panel-main,
    .chart-panel-main canvas {
        touch-action: pan-y;
    }

    /* Timeframe row — buttons hidden on mobile, dropdown shown instead */

    /* Chart controls — compact */

    /* Heights come from the base rules; mobile only tightens padding.
       #indicatorDropdownWrap prefix: the base .indicator-btn rule sits later
       in this file and would otherwise win on source order. */
    .chart-control-btn,
    #indicatorDropdownWrap .indicator-btn {
        padding: 0.25rem 0.375rem;
    }

    /* Flex so the <a> sits flush with plain buttons (id + !important to beat
       .mobile-only's display:block !important). */
    #tfDropdownWrap {
        display: flex !important;
    }

    #zoomLevelBadge {
        padding: 0 0.5rem;
        font-size: 0.7rem;
    }

    /* Category tabs — larger touch targets on mobile */
    .tab-bar--segment .tab-btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
        min-height: 2.25rem;
    }

    .tab-bar--segment.tab-bar--sm .tab-btn {
        padding: 0.375rem 0.625rem;
        font-size: 0.72rem;
        min-height: 2rem;
    }

    /* Company Profile — constrain height on mobile */
    #companyDesc {
        max-height: 7.5rem;
        overflow-y: auto;
        font-size: 0.82rem;
        line-height: 1.5;
    }

    /* TF dropdown — content styling only, positioning handled by DropdownManager */
    #tfDropdownWrap .nav-dropdown-content {
        width: auto;
        min-width: 5rem;
        max-width: none;
        max-height: none;
        padding: 0.25rem 0;
        border-radius: 0.5rem;
        border: 1px solid var(--glass-border);
        background: var(--surface-1);
        box-shadow: var(--shadow-md);
    }

    /* Indicators dropdown — content styling only, positioning handled by DropdownManager */
    #indicatorDropdownWrap .nav-dropdown-content {
        width: 17.5rem;
        max-width: 92vw;
        max-height: 60vh;
        padding: 0.75rem;
        border-radius: 0.5rem;
        border: 1px solid var(--glass-border);
        background: var(--surface-1);
        box-shadow: var(--shadow-md);
    }

    #indicatorDropdownWrap .nav-dropdown-content #customLegend {
        grid-template-columns: 1fr;
        gap: 0.375rem;
        font-size: 0.8rem;
    }

    /* Chart terminal on mobile: must not clip scrollable content */
    .chart-terminal {
        overflow: visible;
    }

    /* Chart data panel — auto height on mobile, page scrolls */
    .chart-data-panel {
        min-height: 23.75rem;
        height: auto;
        overflow: visible;
    }

    /* Tab content area on mobile: natural block height, page handles scroll.
       Reserve ~one screen below the pinned tab bar (see 1200px block) so short
       tabs can't collapse the page and force a scroll clamp. */
    .chart-tab-content-area {
        overflow-y: visible;
        flex: none;
        height: auto;
        min-height: calc(100dvh - 2rem);
    }
}

/* ═══ TABLET + MOBILE: disable full-screen lock so the page can scroll ═══ */
@media (max-width: 1200px) {
    html.page-fullscreen,
    html.page-fullscreen body {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        /* visible (not auto/hidden) — lets the browser's native viewport
           handle scrolling, keeping position:fixed elements working. */
        overflow: visible;
    }

    html.page-fullscreen main.container {
        overflow: visible;
        min-height: 0;
    }
}

/* ═══ SMALL MOBILE BREAKPOINT ═══ */
@media (max-width: 480px) {

    .tab-bar--segment .tab-btn {
        padding: 0.25rem 0.4375rem;
        font-size: 0.68rem;
    }

    .tab-btn.tf-btn {
        padding: 0.1875rem 0.5rem;
        font-size: 0.68rem;
    }
}

/* ─── Extracted Inline Styles ──────────────────────────────────────────────── */

/* Chart page container — padding-bottom handled by .pt-page */

/* Header row */
.chart-header-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.1875rem;
    flex-shrink: 0;
}

/* Back button — height matched to the ticker header bar's 3.25rem so the
   two sit flush together in .chart-header-row. */
.chart-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    height: 3.25rem;
    box-sizing: border-box;
    border-radius: 0.625rem;
    padding: 0 0.75rem;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Zoom-range % gain/loss badge, next to the ticker name/sector — mirrors
   #visibleRangeChangePct in the Stats tab (see chartDataLayer.js), kept in
   sync from the same updateVisibleRangeChange() call so it's visible up top
   without needing to scroll down to the Stats tab. */
.header-zoom-badge {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.1875rem 0.5rem;
    border-radius: 0.375rem;
    background: var(--glass-bg-strong);
    color: var(--text-dim);
    flex-shrink: 0;
}

.ticker-actions {
    display: flex;
    margin-left: auto;
    gap: 0.375rem;
    flex-shrink: 0;
}

/* The Trade button is an <a> inside a .nav-dropdown wrapper; make the wrapper
   a flex box so the <a> stretches to the row height like the sibling
   Alert/Watch/Group <button>s instead of shrinking to its icon (very visible
   on mobile, where .chart-header-row .btn drops vertical padding). */
.ticker-actions > .nav-dropdown {
    display: flex;
}

/* Pin header actions to the shared 2.25rem (36px) control size -- on mobile
   they're icon-only with no vertical padding and would otherwise collapse to
   the 16px icon. */
.ticker-actions .chart-inline-tag {
    height: 2.25rem;
    min-width: 2.25rem;
    justify-content: center;
}

/* Chart main panel — no glass; border-right is the only divider */
.chart-panel-main {
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    box-sizing: border-box;
}

.chart-panel-main:fullscreen {
    background: var(--bg, #0a0e17);
    padding: 0.75rem;
    border-right: none;
}

/* Chart toolbar */
.chart-toolbar-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chart-toolbar-title {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 1.1rem;
    min-width: max-content;
}

.chart-toolbar-controls {
    display: flex;
    align-items: center;
    flex: 1;
}

/* Chart type toggle — now uses .tab-bar.tab-bar--compact / .tab-btn from components.css */
.chart-type-toggle-group {
    height: 2.25rem;
    flex-shrink: 0;
}

.chart-type-toggle-group .tab-btn {
    min-width: 2rem;
    justify-content: center;
}

/* TF dropdown */
.tf-dropdown-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    text-decoration: none;
    white-space: nowrap;
    font-weight: 700;
}

.tf-dropdown-menu {
    min-width: 5rem;
    width: auto;
    padding: 0.25rem 0;
    left: 0;
    right: auto;
}

/* Zoom badge */
.zoom-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    user-select: none;
}

/* Indicator dropdown */
.indicator-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    text-decoration: none;
}

.indicator-menu {
    width: max-content;
    padding: 0.75rem;
    right: 0;
    left: auto;
}

.indicator-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1.25rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    user-select: none;
}

/* Chart canvas wrapper */
.chart-canvas-wrap {
    position: relative;
    flex: 1;
    width: 100%;
    min-height: 0;
    box-sizing: border-box;
}

.chart-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.chart-full { width: 100%; height: 100%; }

/* Sidebar column — transparent, flex column, overflow hidden */
.chart-sidebar-col {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    min-height: 0;
    height: 100%;
    box-sizing: border-box;
}

.chart-data-panel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

/* Stats tab panel — compact fit so all core content is visible without scrolling */
.stats-tab-panel {
    display: none;
    flex-direction: column;
    /* No flex: 1 or overflow here — chart-tab-content-area is the scroll container */
}

/* Restore the 10px breathing room these card boxes were designed for
   (see .stats-tab-panel comment above) without loosening the panel's own
   4px gap between its dense price/range rows. About now carries
   .overview-section itself, so this one selector covers every box. */
.stats-tab-panel .overview-section {
    margin-top: 0.375rem;
}

/* ── Compact overrides scoped to stats panel ── */

/* Price headline: bigger for sidebar */
.stats-tab-panel .price-value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
}

.stats-tab-panel .price-unit {
    font-size: 0.8rem;
}

/* price-header-col is now a 2-col grid via inline style;
   ensure price-display stays baseline-aligned */
.stats-tab-panel .price-display {
    align-items: baseline;
}

/* Change row: left-column of row 2 */
.stats-tab-panel .price-change-row {
    font-size: 0.88rem;
    gap: 0.25rem;
    margin-top: 0;
    align-self: center;
}

/* Range bars: tighter gaps and dividers */
.stats-tab-panel .ranges-col {
    margin-top: 0;
}

.stats-tab-panel .range-group:first-child {
    padding-top: 0;
}

.stats-tab-panel .range-label {
    min-width: 2.375rem;
}

/* Earnings badge row */
.stats-tab-panel .earnings-upcoming {
    margin-top: 0;
}

.stats-tab-panel .earnings-countdown {
    padding: 1px 0.3125rem;
}

/* Market badge + timestamp */
.stats-tab-panel .market-badge {
    font-size: 0.7rem;
    padding: 0.125rem 0.375rem;
}

.stats-tab-panel .last-updated {
    font-size: 0.68rem;
}

/* Primary category tab bar inside the data panel — inherits tab-bar--segment styles */
.chart-cat-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    flex-shrink: 0;
    /* scrollbar visibility inherited from .tab-bar--segment in components.css */
}

/* Sub-tab row (e.g. Earnings / Income / Dividends) — inherits tab-bar--segment.tab-bar--sm styles */
.chart-sub-tabs {
    flex-shrink: 0;
    overflow-x: auto;
    flex-wrap: nowrap;
    /* scrollbar visibility inherited from .tab-bar--segment in components.css */
}

/* Edge-fade hint: when tabs overflow off-screen, fade the bar's content at
   the scrollable edge(s) so it's clear there's more to swipe to. Classes are
   toggled by updateTabFades() in chartUI.js based on scroll position. */
.chart-cat-tabs.tabs-fade-right,
.chart-sub-tabs.tabs-fade-right {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
}
.chart-cat-tabs.tabs-fade-left,
.chart-sub-tabs.tabs-fade-left {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 22px), transparent);
    mask-image: linear-gradient(to left, #000 calc(100% - 22px), transparent);
}
.chart-cat-tabs.tabs-fade-left.tabs-fade-right,
.chart-sub-tabs.tabs-fade-left.tabs-fade-right {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 22px, #000 calc(100% - 22px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 22px, #000 calc(100% - 22px), transparent);
}

/* Tab content scroll area — the single stable scroll region for all tab panels */
.chart-tab-content-area {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--border-medium) transparent;
    /* Block (not flex) — grid/flex children scroll cleanly without min-height hacks */
}

.price-header-col { display: flex; flex-direction: column; }

.price-display {
    display: flex;
    gap: 0.375rem;
}

.price-value {
    color: var(--text);
}

.price-unit {
    color: var(--text-dim);
    font-weight: 500;
}

.market-badge {
    font-weight: 600;
    border-radius: 0.375rem;
    background: var(--glass-bg-strong);
    color: var(--text-dim);
}

.last-updated {
    font-size: 0.7rem;
    color: var(--text-dim);
}

.price-change-row {
    display: flex;
    align-items: center;
    font-weight: 500;
    margin-top: 0.125rem;
}

.price-change-val {
    color: var(--text-dim);
    transition: color 0.2s ease;
}

/* Range bars */
.ranges-col {
    display: flex;
    flex-direction: column;
}

.range-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-top: 0.625rem;
    border-top: 1px solid var(--glass-bg-strong);
}

.range-group:first-child {
    padding-top: 0;
    border-top: none;
}

.range-bar-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.range-label {
    font-weight: 600;
}

.range-label-left { text-align: right; }
.range-label-right { text-align: left; }

.range-track {
    flex: 1;
    background: var(--border-medium);
    position: relative;
    overflow: hidden;
}

.range-fill {
    position: absolute;
    left: 0%;
    top: 0;
    bottom: 0;
    width: 0%;
    background: var(--accent);
    border-radius: 0.25rem;
    transition: all 0.5s ease;
}

/* Earnings upcoming */
.earnings-upcoming {
    display: none;
    flex-direction: column;
    border-top: 1px solid var(--glass-bg-strong);
}

#upcomingEarningsAiModalBody strong {
    color: var(--text);
}

.earnings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.earnings-countdown {
    font-size: 0.7rem;
    color: var(--text-dark);
    background: var(--accent);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Tab content grids */
.tab-content-grid {
    display: grid;
    gap: 0.375rem;
    grid-template-columns: repeat(auto-fill, minmax(5.625rem, 1fr));
    min-width: 0;
    box-sizing: border-box;
}

.overview-about-card {
    position: relative;
    padding-right: 1.625rem;
}

.overview-about-text {
    color: var(--text-dim);
    margin: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    cursor: pointer;
}

.overview-about-text.expanded {
    max-height: none;
}

.overview-about-chevron {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    color: var(--text-faint);
    cursor: pointer;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.overview-about-chevron.rotated {
    transform: rotate(180deg);
}

.overview-section {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 0.75rem;
    padding: 0.625rem 0.625rem 0.6875rem;
}

.overview-section-header {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.4375rem;
    border-bottom: 1px solid var(--glass-bg-strong);
}

.overview-section-header svg {
    flex-shrink: 0;
}

.overview-section-header .tab-section-label {
    margin: 0;
    /* Bright/white title text — matches the .section-title/.card-header-title
       icon+title convention already used on Profile/Home, not the dim
       uppercase micro-label look .tab-section-label defaults to elsewhere
       (list dividers, badges, etc. — this override only touches section
       headers built with .overview-section-header). */
    color: var(--text);
    font-size: 0.78rem;
    text-transform: none;
    letter-spacing: normal;
}

.overview-section-grid {
    display: grid;
    min-width: 0;
}

.tab-content-flow {
    display: none;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

/* Options OI walls */
.oi-walls-container {
    display: none;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.375rem;
    background: var(--glass-bg-input);
    border: 1px solid var(--glass-bg-strong);
    border-radius: 0.5rem;
    padding: 0.5rem 0.625rem;
    margin-bottom: 0.75rem;
}

.oi-wall-label {
    font-size: 0.72rem;
    color: var(--text-dim);
    margin-bottom: 0.125rem;
    white-space: nowrap;
}

.oi-wall-price-green {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--positive-strong);
    white-space: nowrap;
}

.oi-wall-price-red {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--negative-strong);
    white-space: nowrap;
}

.oi-wall-oi {
    font-size: 0.68rem;
    color: var(--text-dim);
    margin-top: 1px;
    white-space: nowrap;
}

.oi-wall-center {
    text-align: center;
    color: var(--text-dim);
    font-size: 0.78rem;
    padding: 0 0.375rem;
    flex-shrink: 0;
}

/* Options header row — prevent date/max-pain from wrapping */
#contentOptions > .flex-between {
    font-size: 0.8rem;
    gap: 0.5rem;
    margin-bottom: 0.625rem !important;
}

#contentOptions > .flex-between span[style*="font-weight:bold"],
#contentOptions > .flex-between #optExpiryDate,
#contentOptions > .flex-between #optMaxPain {
    white-space: nowrap;
}

/* Options grid */
.options-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
    gap: 1.25rem;
    overflow-y: auto;
    padding-right: 0.625rem;
}

.options-header-calls {
    color: var(--positive-strong);
    text-align: center;
    border-bottom: 2px solid var(--positive-strong);
    padding-bottom: 0.3125rem;
    margin-top: 0;
}

.options-header-puts {
    color: var(--negative-strong);
    text-align: center;
    border-bottom: 2px solid var(--negative-strong);
    padding-bottom: 0.3125rem;
    margin-top: 0;
}

/* Whale flow header */
.whale-header {
    color: var(--accent);
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

/* Modal form spacing */
.modal-field { margin-bottom: 0.9375rem; text-align: left; }
.modal-field-lg { margin-bottom: 1.25rem; text-align: left; }
.modal-actions { display: flex; gap: 0.625rem; margin-bottom: 0.9375rem; }

/* Vertical divider */
.v-divider {
    width: 1px;
    background: var(--border-medium);
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   REDESIGNED DATA CONTAINER SYSTEM
   Card-based layouts for all chart data tabs
   ═══════════════════════════════════════════════════════════════════════ */

/* --- Stagger Fade-In Animation --- */
@keyframes cardFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.stagger-fade-in > * {
    animation: cardFadeIn 0.3s ease both;
}
.stagger-fade-in > *:nth-child(1)  { animation-delay: 0s; }
.stagger-fade-in > *:nth-child(2)  { animation-delay: 0.03s; }
.stagger-fade-in > *:nth-child(3)  { animation-delay: 0.06s; }
.stagger-fade-in > *:nth-child(4)  { animation-delay: 0.08s; }
.stagger-fade-in > *:nth-child(5)  { animation-delay: 0.1s; }
.stagger-fade-in > *:nth-child(6)  { animation-delay: 0.12s; }
.stagger-fade-in > *:nth-child(7)  { animation-delay: 0.14s; }
.stagger-fade-in > *:nth-child(8)  { animation-delay: 0.16s; }
.stagger-fade-in > *:nth-child(9)  { animation-delay: 0.18s; }
.stagger-fade-in > *:nth-child(10) { animation-delay: 0.2s; }

/* --- Section Label (replaces h4 section-header in tabs) --- */
.tab-section-label {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 0.375rem;
    padding: 0;
}

/* --- Data Card (base for analyst/insider/SEC/dividend/whale cards) --- */
.data-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 0.625rem;
    padding: 0.375rem 0.5rem;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.data-card:hover {
    border-color: var(--border-medium);
    background: var(--glass-bg-hover, rgba(255,255,255,0.04));
}

/* --- Shared data-tab card layout (_cardHtml() in chartUILightweight.js) ---
   Row 1: title (wraps)          | headline value
   (optional body text, e.g. news summary)
   Row 2: badges + meta          | secondary detail            */
.dc-top,
.dc-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.625rem;
}

.dc-bottom {
    align-items: center;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-dim);
}

.dc-title {
    min-width: 0;
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1.35;
    color: var(--text);
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dc-title-extra {
    font-weight: 400;
    font-size: 0.78rem;
    color: var(--text-dim);
}

.dc-value {
    flex-shrink: 0;
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1.35;
    color: var(--text);
    white-space: nowrap;
}

.dc-body {
    margin-top: 0.1875rem;
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--text-dim);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dc-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    min-width: 0;
}

.dc-right {
    min-width: 0;
    text-align: right;
}

/* Badges inside cards never shrink/wrap mid-label ("8-" / "K"). */
.dc .rating-badge,
.dc .sec-form-badge,
.dc .social-sub-badge {
    flex-shrink: 0;
    white-space: nowrap;
}

.data-card-meta {
    font-size: 0.72rem;
    color: var(--text-dim);
    margin-top: 0.125rem;
}

/* --- Rating Badge (Buy/Sell/Hold colored pills) --- */
.rating-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1875rem 0.625rem;
    border-radius: 0.375rem;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: 0.3px;
}

.rating-badge-strong-buy {
    background: rgba(16, 185, 129, 0.15);
    color: var(--positive);
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.rating-badge-buy {
    background: var(--positive-bg);
    color: var(--positive-strong);
    border: 1px solid var(--positive-border);
}

.rating-badge-hold {
    background: rgba(156, 163, 175, 0.12);
    color: var(--text-muted);
    border: 1px solid rgba(156, 163, 175, 0.2);
}

.rating-badge-sell {
    background: rgba(248, 113, 113, 0.12);
    color: var(--negative);
    border: 1px solid rgba(248, 113, 113, 0.2);
}

.rating-badge-strong-sell {
    background: rgba(239, 68, 68, 0.15);
    color: var(--negative-strong);
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.rating-badge-neutral {
    background: rgba(var(--neon-blue-rgb), 0.1);
    color: var(--neon-blue);
    border: 1px solid rgba(var(--neon-blue-rgb), 0.2);
}

/* --- Price Target Pill --- */
/* Analyst note didn't restate a price target — say so explicitly rather
   than leaving a blank gap where the pill would be. */
/* --- Consensus Strip (proportional buy/hold/sell bar) --- */
.consensus-strip-container {
    margin-bottom: 0.375rem;
}

.consensus-strip-bar {
    display: flex;
    width: 100%;
    height: 0.375rem;
    border-radius: 0.1875rem;
    overflow: hidden;
    margin: 0.3125rem 0 0.3125rem;
}

.consensus-strip-bar > span {
    transition: width 0.5s ease;
    min-width: 0;
}

.consensus-strip-buy    { background: var(--positive-strong); }
.consensus-strip-hold   { background: var(--text-muted); }
.consensus-strip-sell   { background: var(--negative-strong); }

.consensus-strip-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: var(--text-dim);
}

.consensus-strip-labels span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.consensus-dot {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    display: inline-block;
}

/* --- Price Target Range Visual --- */
/* Same box recipe as .overview-section (background/border/radius/padding
   unified) — this predates that class and was a near-duplicate box style
   with slightly different values; margin-bottom stays since this one isn't
   used inside a flex column with its own gap like .overview-section is. */
.pt-range-container {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 0.75rem;
    padding: 0.625rem 0.625rem 0.6875rem;
    margin-bottom: 0.375rem;
}

.pt-range-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.25rem;
    font-size: 0.72rem;
}

.pt-range-track {
    position: relative;
    height: 0.3125rem;
    background: var(--border-medium);
    border-radius: 0.1875rem;
    margin: 0.5rem 0 0.3125rem;
}

.pt-range-fill {
    position: absolute;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--negative-strong) 0%, #38bdf8 50%, var(--positive-strong) 100%);
    border-radius: 0.1875rem;
    opacity: 0.6;
}

.pt-range-marker {
    position: absolute;
    top: 50%;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid var(--surface-1);
    z-index: 2;
}

.pt-range-marker-mean {
    background: #38bdf8;
    box-shadow: 0 0 6px rgba(56, 189, 248, 0.4);
}

.pt-range-marker-current {
    background: var(--accent);
    box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.4);
    width: 0.625rem;
    height: 0.625rem;
}

.pt-range-value-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

.metric-card {
    background: var(--glass-bg-input, rgba(255, 255, 255, 0.02));
    border: 1px solid var(--glass-border);
    border-radius: 0.5rem;
    padding: 0.5rem 0.375rem 0.4375rem;
    text-align: center;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}

.metric-card:hover {
    border-color: var(--border-medium);
    background: var(--glass-bg-hover, rgba(255, 255, 255, 0.04));
    transform: translateY(-1px);
}

.metric-card-value {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.125rem;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.metric-card-label {
    font-size: 0.62rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* --- SEC Form Type Badge --- */
.sec-form-badge {
    display: inline-flex;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.sec-form-10k { background: rgba(59, 130, 246, 0.12); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.2); }
.sec-form-10q { background: rgba(139, 92, 246, 0.12); color: #a78bfa; border: 1px solid rgba(139, 92, 246, 0.2); }
.sec-form-8k  { background: rgba(245, 158, 11, 0.12); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.2); }
.sec-form-default { background: rgba(156, 163, 175, 0.1); color: #9ca3af; border: 1px solid rgba(156, 163, 175, 0.2); }

/* --- RSI Gauge --- */
.rsi-gauge {
    position: relative;
    width: 100%;
    max-width: 12.5rem;
    margin: 0 auto 0.5rem;
}

.rsi-gauge-track {
    height: 0.5rem;
    border-radius: 0.25rem;
    background: linear-gradient(90deg, var(--positive-strong) 0%, var(--positive-strong) 30%, #6b7280 30%, #6b7280 70%, var(--negative-strong) 70%, var(--negative-strong) 100%);
    position: relative;
}

.rsi-gauge-needle {
    position: absolute;
    top: -3px;
    width: 0.25rem;
    height: 0.875rem;
    background: white;
    border-radius: 0.125rem;
    transform: translateX(-50%);
    box-shadow: 0 0 4px rgba(255,255,255,0.5);
}

/* --- Income Statement Visual Bars --- */
.income-bar {
    height: 0.25rem;
    border-radius: 0.125rem;
    margin-top: 0.25rem;
    transition: width 0.5s ease;
}

/* --- Data card list wrapper --- */
.data-card-list {
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
}

/* --- News card timestamp --- */
.news-timestamp {
    font-size: 0.68rem;
    color: var(--text-dim);
    white-space: nowrap;
    flex-shrink: 0;
}

/* --- Mobile adjustments for new cards --- */
@media (max-width: 768px) {
    .metric-card {
        padding: 0.625rem;
    }

    .metric-card-value {
        font-size: 0.95rem;
    }

    .data-card {
        padding: 0.625rem 0.75rem;
    }

    .pt-range-container {
        padding: 0.75rem;
    }

    .consensus-strip-labels {
        font-size: 0.65rem;
    }
}

/* ═══ WATCHLIST TAB ═══ */

.watchlist-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    flex-shrink: 0;
}

/* ═══ RIGHT-SIDE OVERLAY QUICK-NAV ═══
   Docked flush to the viewport's right edge as a persistent icon toolbar --
   TradingView's left-side drawing-tools rail is the reference (full height,
   icons packed from the top, no floating/centered capsule). z-index stays
   below .ai-fab (99999/100000) so the assistant FAB still renders on top if
   their footprints ever overlap near the bottom-right corner. */
.chart-side-nav {
    position: fixed;
    right: 0;
    z-index: 500;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.375rem;
    padding: 0.75rem 0.375rem;
    background: var(--surface-1);
    border-left: 1px solid var(--glass-border);
}

/* Scope the rail to .chart-sidebar-col (made position:relative above, in
   the 1200px breakpoint block) instead of the full viewport -- on the
   stacked mobile layout the chart sits above that column, so the
   viewport-fixed rule above would otherwise run alongside the chart too,
   not just the data panel it's meant to navigate. Scrolls away with the
   column's own content instead of staying pinned, which is fine since
   nothing here relies on it staying visible while scrolling.
   MUST come after the base .chart-side-nav rule above: equal specificity,
   same properties -- source order decides the winner, media query or not. */
@media (max-width: 1200px) {
    .chart-side-nav {
        position: absolute;
        right: 0;
        /* Top rounded (nothing above it here -- .chart-panel-main is a
           separate section above), bottom flat since it runs down to
           .chart-terminal's own bottom edge with nothing to round off
           against (matches the top-rounded/bottom-flat "attaches below"
           look elsewhere in the app, e.g. .market-tab-bar). */
        border-radius: 0.75rem 0.75rem 0 0;
    }
}

.chart-side-nav-divider {
    height: 1px;
    margin: 0.375rem 0.25rem 0.5rem;
    background: var(--glass-border);
    flex-shrink: 0;
}

/* Icon-only, flat toolbar buttons (no per-button pill/shadow/blur) -- the
   label lives in `title` (native tooltip). Also doubles as the
   .nav-dropdown trigger button for categories with sub-tabs, so it needs
   to look identical either way. */
/* Filled resting tile (same --surface-5/6 as .btn-secondary) so the rail's
   buttons read as the same 36px controls as the header/toolbar buttons,
   rather than bare icons that look smaller. */
.chart-side-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border-radius: 0.375rem;
    border: none;
    color: var(--text);
    cursor: pointer;
    transition: background 0.15s;
}

/* Active category (set by syncChartSideNavActive in chartUILightweight.js):
   same --glass-bg-active fill as .tab-btn.active plus a --primary accent bar
   on the rail's inner edge (the vertical twin of .tab-bar--segment's
   underline), so it doesn't compete with the icons' own category colors. */
.chart-side-nav-btn.active {
    position: relative;
}

.chart-side-nav-btn.active::before {
    content: '';
    position: absolute;
    left: -0.375rem;
    top: 0.375rem;
    bottom: 0.375rem;
    width: 0.1875rem;
    border-radius: 0 0.1875rem 0.1875rem 0;
    background: var(--primary);
}

.chart-side-nav .nav-dropdown-item.active {
    background: var(--glass-bg-active) !important; /* beats the inline background:none */
    color: var(--text);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--primary);
}

/* .nav-dropdown wrappers sit inline in the flex column same as plain buttons */
.chart-side-nav .nav-dropdown {
    display: block;
}

.watchlist-nav-title {
    display: flex;
    align-items: center;
    gap: 0.3125rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-secondary);
}

.watchlist-nav-count {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 1px 0.375rem;
    border-radius: 0.625rem;
    background: var(--glass-bg-strong);
    color: var(--text-dim);
    min-width: 1rem;
    text-align: center;
}

.watchlist-nav-list {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    gap: 0.125rem;
    flex: 1;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--border-medium) transparent;
}

.watchlist-nav-list::-webkit-scrollbar {
    width: 0.1875rem;
}
.watchlist-nav-list::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 0.1875rem;
}

.watchlist-nav-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4375rem 0.5rem;
    border-radius: 0.4375rem;
    text-decoration: none;
    transition: background 0.15s ease;
    cursor: pointer;
    min-height: 2.25rem;
    flex-shrink: 0;
}

.watchlist-nav-item:hover {
    background: var(--glass-bg-strong);
}

.watchlist-nav-item--active {
    background: rgba(var(--primary-rgb), 0.15);
    border: 1px solid rgba(var(--primary-rgb), 0.3);
}

.watchlist-nav-item--active .watchlist-nav-sym {
    color: var(--accent);
}

/* Single-row layout: left = sym+name, right = price+chg stacked */
.watchlist-nav-sym-col {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    gap: 0.375rem;
}

/* Left side: ticker symbol + company name inline */
.watchlist-nav-left {
    display: flex;
    align-items: center;
    gap: 0.3125rem;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

/* Right side: change % then price, inline */
.watchlist-nav-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 0.375rem;
    flex-shrink: 0;
}

.watchlist-nav-sym {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    min-width: 0;
}

/* Company name shown inline after ticker symbol */
.watchlist-nav-name {
    font-size: 0.67rem;
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    flex: 1;
    min-width: 0;
}

.watchlist-nav-price {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
}

.watchlist-nav-chg {
    font-size: 0.7rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
    text-align: right;
}

.watchlist-nav-chg.chg-up { color: var(--positive-strong); }
.watchlist-nav-chg.chg-dn { color: var(--negative-strong); }

.watchlist-nav-loading {
    padding: 0.25rem 0.375rem;
}

.watchlist-nav-empty {
    font-size: 0.75rem;
    color: var(--text-dim);
    padding: 0.375rem 0.375rem;
    line-height: 1.6;
}

/* ═══ HALT NOTICE BANNER (Stats Tab) ═══ */

.halt-notice-banner {
    border-radius: 0.625rem;
    overflow: hidden;
    animation: tabFadeIn 0.3s ease both;
}

.halt-notice-inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-left: 3px solid var(--negative-strong);
    border-radius: 0.625rem;
    animation: haltPulse 3s ease-in-out infinite;
}

@keyframes haltPulse {
    0%, 100% { border-left-color: var(--negative-strong); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
    50% { border-left-color: var(--negative); box-shadow: 0 0 12px 0 rgba(239, 68, 68, 0.1); }
}

.halt-notice-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--negative-strong);
    letter-spacing: 0.3px;
}

.halt-notice-detail {
    font-size: 0.72rem;
    color: var(--text-dim);
    line-height: 1.4;
    margin-top: 0.125rem;
}

.halt-notice-view-btn {
    margin-left: auto;
    flex-shrink: 0;
    padding: 0.3125rem 0.875rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--negative-strong);
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
    white-space: nowrap;
}

.halt-notice-view-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    transform: translateX(2px);
}

@media (max-width: 480px) {
    .halt-notice-inner {
        padding: 0.625rem 0.75rem;
        gap: 0.5rem;
    }

    .halt-notice-view-btn {
        padding: 0.25rem 0.625rem;
        font-size: 0.68rem;
    }
}

/* ═══ VOLATILITY NOTICE BANNER (amber variant) ═══ */

.volatility-notice .halt-notice-inner {
    background: rgba(var(--accent-rgb), 0.08);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    border-left: 3px solid var(--accent);
    animation: volPulse 3s ease-in-out infinite;
}

@keyframes volPulse {
    0%, 100% { border-left-color: #f59e0b; box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
    50% { border-left-color: #fbbf24; box-shadow: 0 0 12px 0 rgba(245, 158, 11, 0.1); }
}

/* ═══ SOCIAL ═══ */
/* Cards themselves use the shared .dc layout; these style the blogger
   sentiment strip's source row and the subreddit badge. */

.social-card-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.68rem;
    color: var(--text-dim);
}

.social-sub-badge {
    display: inline-flex;
    padding: 1px 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.62rem;
    font-weight: 600;
    background: rgba(255, 69, 0, 0.1);
    color: #ff6b35;
    border: 1px solid rgba(255, 69, 0, 0.15);
}

/* ═══════════════════════════════════════════════════════════════════════
   2026-10 redesign — shared design kit (matches home/market/pricing/help)
   ───────────────────────────────────────────────────────────────────────
   Still a full-screen app page. Ticker header carries identity + live price;
   below it two red-edged cards: the chart (48px toolbar) and the data
   sidebar (48px underline category tabs, 48px sub-tab row, scrolling body).
   Brand red is chrome only — prices/changes use --positive / --negative.
   Spacing: 16px between/inside cards, 48px bars, 28px controls.
   ═══════════════════════════════════════════════════════════════════════ */
.chart-page.pt-page,
.chart-page .pt-page {
    --ck-head-h: 3rem;
    --ck-ctl-h: 1.75rem;
    gap: 1rem;
    padding: 1rem 4rem 1rem 1.5rem;
}

/* ── Ticker header ── */
.tk-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    margin: 0;
    min-height: 3.5rem;
}
.tk-back.chart-back-btn {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: 0.375rem;
    background: none;
    color: var(--text-dim);
}
.tk-back:hover { color: var(--text); border-color: rgba(var(--primary-rgb), 0.6); background: rgba(var(--primary-rgb), 0.1); }
.tk-id { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.tk-id > :first-child { width: 2.5rem; height: 2.5rem; flex: 0 0 2.5rem; border-radius: 0.5rem; }
.tk-id-text { min-width: 0; }
.tk-sym {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: var(--text);
}
.tk-name {
    max-width: 28rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
    font-size: 0.8125rem;
}
#headerName:not(:empty)::after { content: ' · '; }
.tk-px {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    padding-left: 1rem;
    border-left: 1px solid var(--glass-border);
    font-variant-numeric: tabular-nums;
}
.tk-price { font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; line-height: 1.1; color: var(--text); }
.tk-chg { font-size: 0.9375rem; font-weight: 600; white-space: nowrap; }
#liveChangePct::before { content: '('; }
#liveChangePct::after { content: ')'; }
.tk-px .market-badge {
    align-self: center;
    padding: 0.125rem 0.5rem;
    border-radius: 0.625rem;
    background: var(--glass-bg-strong);
    color: var(--text-dim);
    font-size: 0.6875rem;
    font-weight: 600;
}
.tk-px-meta { display: inline-flex; gap: 0.5rem; color: var(--text-muted); font-size: 0.75rem; }
.tk-px-meta .last-updated { font-size: inherit; color: inherit; }
#priceCloseLine { color: var(--text-dim); }
.tk-head .ticker-actions { margin-left: auto; gap: 0.5rem; }
.tk-head .ticker-actions .chart-inline-tag { height: 2.25rem; gap: 0.375rem; padding: 0 0.875rem; }

/* ── Terminal: two cards side by side ── */
.chart-terminal {
    background: none;
    border: 0;
    border-radius: 0;
    overflow: visible;
    min-height: 34rem;
}
.terminal-grid {
    grid-template-columns: minmax(0, 1fr) clamp(20rem, 26vw, 26.25rem);
    gap: 1rem;
    overflow: visible;
}
.chart-panel-main,
.chart-data-panel {
    position: relative;
    background: var(--surface-1);
    border: 1px solid var(--glass-border);
    border-radius: 0.5rem;
    overflow: hidden;
}
.chart-panel-main::before,
.chart-data-panel::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    z-index: 6;
    pointer-events: none;
    background: linear-gradient(90deg,
        rgba(var(--primary-rgb), 1),
        rgba(var(--primary-rgb), 0.72) 25%,
        rgba(var(--primary-rgb), 0.5) 50%,
        rgba(var(--primary-rgb), 0.72) 75%,
        rgba(var(--primary-rgb), 1));
}
.chart-panel-main { border-right: 1px solid var(--glass-border); padding-bottom: 0; }
.chart-sidebar-col { overflow: visible; }

/* ── Chart toolbar (48px) ── */
.chart-toolbar-row {
    flex-wrap: nowrap;
    gap: 0.75rem;
    min-height: var(--ck-head-h);
    margin: 0;
    padding: 0.375rem 0.5rem 0.375rem 1rem;
    border-bottom: 1px solid var(--glass-border);
}
.chart-toolbar-controls { gap: 0.5rem; flex-wrap: wrap; justify-content: flex-start; }
.chart-controls-row { gap: 0.5rem; }

/* segmented groups: timeframes + chart type */
.tf-scroll-row,
.chart-type-toggle-group {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: auto;
    padding: 2px;
    border: 1px solid var(--glass-border);
    border-radius: 0.5rem;
    background: var(--surface-2);
}
.tf-scroll-row .tab-btn.tf-btn,
.chart-type-toggle-group .tab-btn {
    height: calc(var(--ck-ctl-h) - 2px);
    min-height: 0;
    min-width: 0;
    padding: 0 0.5625rem;
    border: 0;
    border-radius: 0.375rem;
    background: none;
    box-shadow: none;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
}
.tf-scroll-row .tab-btn.tf-btn:hover,
.chart-type-toggle-group .tab-btn:hover { color: var(--text); background: var(--glass-bg-hover); }
.tf-scroll-row .tab-btn.tf-btn.active,
.chart-type-toggle-group .tab-btn.active { color: var(--text); background: rgba(var(--primary-rgb), 0.16); }
.tf-scroll-row .zoom-badge {
    height: calc(var(--ck-ctl-h) - 2px);
    min-width: 0;
    margin-left: 0.25rem;
    padding: 0 0.5rem;
    border: 0;
    border-left: 1px solid var(--glass-border);
    border-radius: 0;
    background: none;
    color: var(--text-muted);
    font-size: 0.6875rem;
}
#indicatorDropdownWrap .indicator-btn,
.chart-toolbar .chart-control-btn {
    height: var(--ck-ctl-h);
    font-size: 0.75rem;
}
.chart-toolbar .chart-control-btn {
    width: var(--ck-ctl-h);
    padding: 0;
    justify-content: center;
    border: 1px solid transparent;
    background: none;
    color: var(--text-muted);
}
.chart-toolbar .chart-control-btn:hover { color: var(--text); border-color: var(--border-strong); background: var(--glass-bg-hover); }
.chart-toolbar .v-divider { height: 1.25rem; margin: 0 0.25rem 0 auto; }
.chart-toolbar .header-zoom-badge {
    padding: 0;
    background: none;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.chart-toolbar .header-zoom-badge::after { content: ' this range'; color: var(--text-muted); font-weight: 500; }

/* ── Data sidebar ── */
.chart-cat-tabs.tab-bar--segment {
    display: flex;
    gap: 0;
    height: var(--ck-head-h);
    flex: 0 0 var(--ck-head-h);
    padding: 0 0.5rem;
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--glass-border);
    border-radius: 0;
    background: none;
    scrollbar-width: none;
}
.chart-cat-tabs::-webkit-scrollbar { display: none; }
.chart-cat-tabs .tab-btn {
    flex: 0 0 auto;
    height: 100%;
    min-height: 0;
    gap: 0.375rem;
    padding: 0 0.625rem;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
}
.chart-cat-tabs .tab-btn svg { opacity: 0.75; }
.chart-cat-tabs .tab-btn:hover { color: var(--text); background: none; }
.chart-cat-tabs .tab-btn.active { color: var(--text); background: none; box-shadow: inset 0 -2px 0 var(--primary); }
.chart-cat-tabs .tab-btn.active svg { opacity: 1; }

.chart-sub-tabs.tab-bar--segment {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-height: var(--ck-head-h);
    padding: 0 1rem;
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--glass-border);
    border-radius: 0;
    background: none;
    scrollbar-width: none;
}
.chart-sub-tabs:empty { display: none; }
.chart-sub-tabs::-webkit-scrollbar { display: none; }
.chart-sub-tabs .tab-btn {
    flex: 0 0 auto;
    height: var(--ck-ctl-h);
    min-height: 0;
    padding: 0 0.75rem;
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    background: none;
    box-shadow: none;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}
.chart-sub-tabs .tab-btn:hover { color: var(--text); border-color: var(--border-strong); }
.chart-sub-tabs .tab-btn.active { color: var(--text); border-color: rgba(var(--primary-rgb), 0.6); background: rgba(var(--primary-rgb), 0.14); }

.chart-tab-content-area { padding: 0; }
.chart-tab-content-area > :not(.stats-tab-panel) { padding: 1rem; }

/* Overview: kit blocks (16px padding, row dividers, small caps labels) */
.stats-tab-panel { gap: 0; padding: 0; }
.stats-tab-panel .halt-notice-banner { margin: 0.75rem 1rem 0; }
.stats-tab-panel .overview-section,
.stats-tab-panel .overview-section.overview-about-card {
    margin: 0;
    padding: 1rem;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--border-subtle);
    border-radius: 0;
}
.stats-tab-panel .overview-section:last-child { border-bottom: 0; }
.stats-tab-panel .overview-section-header {
    margin: 0 0 0.75rem;
    padding: 0;
    border: 0;
}
.stats-tab-panel .overview-section-header svg { display: none; }
.stats-tab-panel .overview-section-header .tab-section-label {
    color: var(--text-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.stats-tab-panel .ranges-col { gap: 0.875rem; }
.stats-tab-panel .range-group { padding-top: 0; gap: 0.375rem; }
.stats-tab-panel .chart-meta-row { font-size: 0.8125rem; color: var(--text-muted); margin: 0; }
.stats-tab-panel .range-label { font-size: 0.75rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.stats-tab-panel .range-track { height: 0.375rem; border-radius: 3px; }
.stats-tab-panel .earnings-upcoming { padding-top: 0; gap: 0.375rem; }
.stats-tab-panel .earnings-date { font-size: 0.875rem; font-weight: 600; color: var(--text); }
.stats-tab-panel .earnings-countdown { font-size: 0.75rem; }
.stats-tab-panel .overview-about-card { padding-right: 2rem; }
.stats-tab-panel .overview-about-text { font-size: 0.8125rem; line-height: 1.55; max-height: 6.25rem; }
.stats-tab-panel .overview-about-chevron { right: 1rem; bottom: 1rem; }
.stats-tab-panel .overview-section-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.stats-tab-panel .metric-card {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 0.125rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--glass-border);
    border-radius: 0.375rem;
    background: var(--surface-2);
    text-align: left;
}
.stats-tab-panel .metric-card:hover { transform: none; border-color: var(--border-strong); }
.stats-tab-panel .metric-card-label { margin: 0; font-size: 0.6875rem; color: var(--text-muted); text-transform: none; letter-spacing: 0; }
.stats-tab-panel .metric-card-value { font-size: 0.9375rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* List cards in the other tabs (news, insiders, analysts, SEC…) */
.chart-tab-content-area .data-card {
    padding: 0.75rem;
    border: 1px solid var(--glass-border);
    border-radius: 0.375rem;
    background: var(--surface-2);
}
.chart-tab-content-area .data-card:hover { border-color: rgba(var(--primary-rgb), 0.5); background: var(--surface-2); transform: none; box-shadow: none; }

/* ── Side rail: flat buttons, red active tint (bar from the base rule) ── */
.chart-side-nav { box-shadow: none; }
.chart-side-nav-btn { background: none; }
.chart-side-nav-btn:hover { background: var(--glass-bg-hover); }
.chart-side-nav-btn.active { background: rgba(var(--primary-rgb), 0.14); }

/* ── Stacked (tablet/phone) ── */
@media (max-width: 1200px) {
    .chart-page.pt-page,
    .chart-page .pt-page { padding: 1rem 1rem 2rem; }
    .terminal-grid { grid-template-columns: minmax(0, 1fr); }
    .chart-panel-main { border-bottom: 1px solid var(--glass-border); }
    .chart-tabs-sticky { background: var(--surface-1); }
}
@media (max-width: 768px) {
    .chart-page.pt-page,
    .chart-page .pt-page { padding: 0.75rem 0.75rem 2rem; gap: 0.75rem; }
    .tk-head { gap: 0.5rem 0.75rem; }
    .tk-sym { font-size: 1.25rem; }
    /* Grid layout: top = back | ticker + company | price over change;
       bottom = market badge over "Updated" on the left, action buttons on the
       right. .tk-px dissolves so its pieces can be placed individually. */
    .tk-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.125rem 0.625rem; }
    .tk-back { grid-area: 1 / 1 / 3 / 2; }
    .tk-id { grid-area: 1 / 2 / 3 / 3; min-width: 0; }
    .tk-name { max-width: none; }
    /* Company name only: the sector string is too long for a phone */
    #headerSector, #headerName:not(:empty)::after { display: none; }
    .tk-px { display: contents; }
    .tk-price { grid-area: 1 / 3; justify-self: end; align-self: end; font-size: 1.5rem; }
    .tk-chg { grid-area: 2 / 3; justify-self: end; align-self: start; font-size: 0.875rem; }
    .tk-px .market-badge { grid-area: 3 / 1 / 4 / 3; justify-self: start; align-self: end; margin-top: 0.5rem; }
    .tk-px-meta { grid-area: 4 / 1 / 5 / 3; justify-self: start; align-self: start; white-space: nowrap; font-size: 0.6875rem; }
    .tk-head .ticker-actions { grid-area: 3 / 2 / 5 / 4; justify-self: end; width: auto; margin: 0.5rem 0 0; gap: 0.375rem; }
    /* Snapshot is a desktop nicety; the freed width keeps the toolbar on one tidy row */
    .chart-toolbar .chart-control-btn[title="Snapshot"] { display: none; }
    .tk-head .ticker-actions .chart-inline-tag { width: 2.25rem; padding: 0; }
    .chart-toolbar .header-zoom-badge::after { content: ''; }
    .stats-tab-panel .overview-section-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Empty / unavailable states inside the sidebar: body-size muted text */
.chart-tab-content-area > div > p.text-dim,
.chart-tab-content-area > div > div > p.text-dim,
.chart-tab-content-area > div > div > span.text-dim,
.chart-tab-content-area > div > div > span.text-danger { margin: 0; font-size: 0.8125rem; color: var(--text-muted); }
@media (max-width: 768px) {
}

/* Options: kit-sized Calls/Puts headings */
.chart-tab-content-area .options-header-calls,
.chart-tab-content-area .options-header-puts { margin: 0 0 0.5rem; padding-bottom: 0.375rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; text-align: left; border-bottom-width: 1px; }
@media (max-width: 768px) {
    .chart-toolbar-row, .chart-toolbar-controls, .chart-controls-row { gap: 0.375rem; }
    .chart-toolbar-row { padding: 0.375rem; }
}

/* One accent: category tabs are text-only (like Market/Help); the icon-only
   rail keeps its icons but drops the per-category colors for one neutral
   tone (hover brightens, active goes white on the red tint). !important beats
   the inline fill=/style= colors on the SVGs. */
.chart-cat-tabs .tab-btn svg { display: none; }
.chart-side-nav-btn svg { color: var(--text-muted) !important; fill: currentColor !important; transition: color 0.15s; }
.chart-side-nav-btn:hover svg { color: var(--text-dim) !important; }
.chart-side-nav-btn.active svg { color: var(--text) !important; }

/* Mouse clicks leave no focus box on tabs; keyboard focus gets an inset red ring */
.chart-cat-tabs .tab-btn:focus:not(:focus-visible),
.chart-sub-tabs .tab-btn:focus:not(:focus-visible),
.chart-side-nav-btn:focus:not(:focus-visible) { outline: none; }
.chart-cat-tabs .tab-btn:focus-visible,
.chart-sub-tabs .tab-btn:focus-visible,
.chart-side-nav-btn:focus-visible { outline: 2px solid var(--primary-light); outline-offset: -2px; }

/* Rails are anchored to the viewport (the page container no longer keeps a
   transform after its enter animation, see base.css): start under the nav. */
.chart-side-nav { top: calc(var(--marquee-h, 0px) + 3.4375rem); height: calc(100vh - var(--marquee-h, 0px) - 3.4375rem); }
@media (max-width: 1200px) { .chart-side-nav { top: 0; height: 100%; } }

/* Infinite-scroll sentinel under the news list (loadNews / _loadMoreNews) */
.news-sentinel {
    min-height: 1.5rem;
    padding: 0.375rem 0;
    font-size: 0.72rem;
    text-align: center;
}

/* ── Research › Bulls & Bears ── */
.bb-card { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 12px; padding: 1.25rem; }
.bb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; }
.bb-title { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; font-weight: 600; color: var(--text); margin-bottom: 0.75rem; }
.bb-icon { flex: none; }
/* Bear sits at the right edge of its header, mirrored so it faces the bull */
.bb-bears .bb-title { justify-content: space-between; }
.bb-bears .bb-icon { transform: scaleX(-1); }
.bb-col p { margin: 0 0 0.875rem; font-size: 0.85rem; line-height: 1.6; color: var(--text); overflow-wrap: anywhere; }
@media (max-width: 700px) { .bb-grid { grid-template-columns: 1fr; } }