/* ==========================================================================
   Chart Container + OHLC + Loading Overlay
   ========================================================================== */

/* CHART AREA — position is now managed by #chart-layout-area grid */
.chart-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--chart-bg);
    cursor: crosshair;
    /* Height reserved just above the X-axis for the floating nav controls.
       The renderer splits the bottom chrome into this nav zone + the axis
       strip (core.js: layout.navZoneH / layout.axisHeight). Set to 0 on
       mobile where the floating nav is hidden. */
    --nav-zone-h: 36px;
}

#ohlc {
    position: static;
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--ui-fg);
    font-size: 12px;
    font-family: monospace;
    font-weight: 500;
    white-space: nowrap;
}

/* ── Chart loading overlay ─────────────────────────────────── */
.chart-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: var(--chart-bg, #131722);
    transition: opacity 0.3s ease;
    pointer-events: none; /* never block chart interaction — crosshair/drag work through the overlay */
}

.clo-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255,255,255,0.08);
    border-top-color: #2196F3;
    border-radius: 50%;
    animation: clo-spin 0.75s linear infinite;
}

@keyframes clo-spin {
    to { transform: rotate(360deg); }
}

.clo-text {
    font-size: 12px;
    color: rgba(255,255,255,0.35);
    letter-spacing: 0.03em;
}



/* chart-container fills pane-0 below the header */
.chart-pane-main > .chart-container {
    position: absolute !important;
    top: 28px !important;   /* 28px pane-header */
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}
/* chart-container fills extra panes below the header (same offset as pane-0) */
.chart-pane > .chart-container {
    position: absolute !important;
    top: 28px !important;   /* 28px pane-header */
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}