/* ═══════════════════════════════════════════════════════
   LANDING — LIVE TERMINAL DEMO (#terminal-demo)
   Embeds the real GEX + Company Research channel UI inside
   a height-capped terminal frame. Every override is scoped
   under #terminal-demo so channel CSS and landing CSS never
   leak into each other.
═══════════════════════════════════════════════════════ */

#terminal-demo {
    /* Chart heights — the feed CSS reads these tokens.
       Content scrolls inside the viewport, so charts can breathe. */
    --chart-h-lg: 360px;
    --chart-h-md: 300px;
    --chart-h-sm: 230px;
}

/* ── Tabs row (mirrors hero slideshow tab language) ── */
#terminal-demo .demo-tabs {
    display: flex;
    justify-content: center;
    gap: 2px;
    padding: 4px;
    margin: 0 auto 20px;
    width: fit-content;
    max-width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    overflow-x: auto;
    scrollbar-width: none;
}
#terminal-demo .demo-tabs::-webkit-scrollbar { display: none; }

/* ── Terminal frame ── */
#terminal-demo .demo-terminal {
    background: var(--bg-surface);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow:
        0 40px 80px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.03);
}

/* ── Window chrome bar ── */
#terminal-demo .demo-chrome {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--border);
}

#terminal-demo .demo-dots {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
#terminal-demo .demo-dots i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.10);
}

#terminal-demo .demo-chrome-title {
    flex: 1;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-marketing-3);
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#terminal-demo .demo-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--brand);
    padding: 3px 9px;
    background: var(--brand-dim);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-full);
}
#terminal-demo .demo-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand);
    animation: demo-live-pulse 2s ease-in-out infinite;
}
@keyframes demo-live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}
@media (prefers-reduced-motion: reduce) {
    #terminal-demo .demo-live-dot { animation: none; }
}

/* ── Viewport: fixed-height preview, no internal scroll ──
   Inner panes do NOT scroll — the page scrolls. The viewport shows the top of
   real data, fades out at the bottom, and the footnote CTA drives to the
   terminal. Prevents the widget from trapping wheel events. ── */
#terminal-demo .demo-viewport {
    position: relative;
    height: 560px;
    overflow: hidden;
}

#terminal-demo .demo-panel {
    display: none;
    height: 100%;
}
#terminal-demo .demo-panel.active {
    display: flex;
    flex-direction: column;
}

/* The real channel content area — clipped (no inner scroll), page scrolls */
#terminal-demo .research-content {
    flex: 1;
    min-height: 0;
    height: auto;
    overflow: hidden;
    padding: 20px 20px 56px;
}

#terminal-demo #opt-content-area,
#terminal-demo #research-content-area {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    width: 100%;
}

/* ── GEX pane fixes: feed CSS pins panes to 74vh, which fights
      the capped viewport. Let content flow; cap each chart card. ── */
#terminal-demo .opt-chart-pane,
#terminal-demo .opt-details-pane {
    height: auto;
    overflow: visible;
}
#terminal-demo .opt-chart-pane .option-research-chart-card {
    flex: none;
    height: var(--chart-h-md);
    overflow: hidden;
}

/* ── Analyst panel: recreate the .analyst-grid layout locally.
      The feed CSS scopes card layout under .analyst-grid (absent here),
      and analyst.js stamps className="card analyst-ratings-card" on the
      host, so target by ID — never by helper class. ── */
#terminal-demo #card-analyst-ratings {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    margin: 0;
    overflow: hidden;
}
#terminal-demo #card-analyst-ratings .card-body.analyst-body-split {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    gap: 0;
    padding: 0;
    overflow: hidden;
}

/* Demo shows only the detail pane — stream pane + streaming artifacts hidden */
#terminal-demo .analyst-stream-pane {
    display: none !important;
}
#terminal-demo #analyst-date-badge {
    display: none;
}
#terminal-demo .analyst-detail-pane {
    flex: 1 !important;
    max-width: 100% !important;
    border-left: none !important;
    overflow: hidden;
    padding: 16px;
}

/* TSLA logo in detail header */
#terminal-demo .demo-ticker-logo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}
#terminal-demo .detail-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── Institutions panel: roomier chart cards inside the tall viewport ── */
#terminal-demo .fund-chart-card {
    height: 320px;
}

/* ── Bottom fade teaser over the scrollable content ── */
#terminal-demo .demo-fade-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 64px;
    background: linear-gradient(to bottom, rgba(13, 17, 23, 0), var(--bg-surface));
    pointer-events: none;
}

/* ── Footnote row: scope note + CTA ── */
#terminal-demo .demo-footnote {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.02);
}
#terminal-demo .demo-footnote-note {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-marketing-3);
    letter-spacing: 0.02em;
}
#terminal-demo .demo-footnote .cta-btn {
    padding: 9px 18px;
    font-size: 13px;
    flex-shrink: 0;
}

/* ── Loading / error states (shown before render) ── */
#terminal-demo .demo-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    height: 100%;
    min-height: 300px;
    text-align: center;
    padding: 24px;
}
#terminal-demo .demo-status-msg {
    font-size: 14px;
    color: var(--text-marketing-2);
    max-width: 360px;
}
#terminal-demo .demo-status-sub {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-marketing-3);
}
#terminal-demo .demo-retry-btn {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--brand);
    background: var(--brand-dim);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-sm);
    padding: 7px 16px;
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base);
}
#terminal-demo .demo-retry-btn:hover {
    background: rgba(16, 185, 129, 0.16);
}
#terminal-demo .demo-spinner {
    width: 28px;
    height: 28px;
    border: 2px solid var(--border);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: demo-spin 0.8s linear infinite;
}
@keyframes demo-spin {
    to { transform: rotate(360deg); }
}

/* ══════════════ RESPONSIVE ══════════════ */

@media (max-width: 1100px) {
    #terminal-demo .demo-viewport { height: 700px; }
    /* Feed CSS stacks the GEX split to a column here and sets
       chart cards to --chart-h-lg; keep the pane free-flowing. */
    #terminal-demo .opt-chart-pane { min-height: 0; }
}

@media (max-width: 768px) {
    #terminal-demo .demo-viewport { height: 600px; }
    #terminal-demo .demo-chrome-title { display: none; }
    #terminal-demo .demo-chrome { justify-content: space-between; }
    #terminal-demo .research-content { padding: 14px 14px 48px; }
    #terminal-demo .demo-footnote {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    #terminal-demo .demo-footnote .cta-btn { width: 100%; }

    /* Stream pane is hidden — detail pane already full width, no stack needed */
    #terminal-demo .analyst-detail-pane { padding: 12px; }

    #terminal-demo .fund-chart-card { height: 260px; }
}

@media (max-width: 480px) {
    #terminal-demo .demo-viewport { height: 540px; }
    /* 4 tabs don't fit at 480px — keep natural widths, container scrolls */
    #terminal-demo .demo-tabs { width: 100%; justify-content: flex-start; }
    #terminal-demo .fund-chart-card { height: 220px; }
}