/**
 * Shared visual tokens for Chart Dialogue and chart tools (settings panel).
 * Loaded before chart-chat.css so both can use var(...).
 */
:root {
    /* Layout: top-right action cluster */
    --chart-actions-top: max(16px, env(safe-area-inset-top));
    --chart-actions-right: max(16px, env(safe-area-inset-right));
    --chart-action-gap: 52px;

    /* Surfaces */
    --chart-surface-panel: rgba(8, 10, 15, 0.92);
    --chart-surface-control: rgba(15, 26, 46, 0.8);
    --chart-surface-pill: rgba(255, 255, 255, 0.05);

    /* Accent (gold) */
    --chart-border-accent: rgba(255, 180, 70, 0.18);
    --chart-border-accent-strong: rgba(255, 180, 70, 0.35);
    --chart-accent-muted: rgba(255, 180, 70, 0.2);
    --chart-accent-text: rgba(255, 180, 70, 0.9);
    --chart-accent-glow: rgba(251, 191, 36, 0.98);

    /* Text */
    --chart-text-eyebrow: rgba(251, 191, 36, 0.78);
    --chart-text-primary: rgba(226, 232, 240, 0.9);
    --chart-text-muted: rgba(203, 213, 225, 0.84);
    --chart-text-context: rgba(203, 213, 225, 0.72);
    --chart-text-subtle: rgba(148, 163, 184, 0.72);
    --chart-text-dim: rgba(226, 232, 240, 0.56);
    --chart-text-meta: rgba(148, 163, 184, 0.68);

    /* Assistant message surface (Chart Dialogue) */
    --chart-surface-assistant: rgba(15, 26, 46, 0.76);
    --chart-border-message: rgba(255, 180, 70, 0.1);

    /* Panel shadow */
    --chart-shadow-panel: 0 20px 60px rgba(0, 0, 0, 0.55);
    --chart-shadow-control: 0 12px 40px rgba(0, 20, 50, 0.35);
}

@media (max-width: 1023px) {
    :root {
        /*
         * Single mobile header band: safe area + comfort inset, then a 44px row (hamburger / title / gear).
         * Use these vars for hamburger, #chart-tools, .mobile-section-header, tooltips, stage, identity padding.
         */
        --mobile-header-content-top: calc(env(safe-area-inset-top) + 8px);
        --mobile-header-row-height: 44px;
        /* Chart Dialogue: reserve space for #mobile-section-chart-subtitle (“checking…”) so content never overlaps. */
        --mobile-chart-subtitle-reserve: 16px;
        --chart-actions-top: var(--mobile-header-content-top);
        --chart-actions-right: max(10px, env(safe-area-inset-right));
        /* Settings panel sits left of this vertical icon rail (gear + stacked actions). */
        --chart-actions-rail-width: 44px;
        --chart-actions-rail-gap: 8px;
    }
}