/* ═══════════════════════════════════════════════════════════════
   MOBILE LAYOUT — Mobile shell structure
   Only active on mobile (< 768px). Desktop untouched.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    /* ── Reset body defaults for mobile shell ── */
    body {
        overflow: hidden;
        overscroll-behavior: none;
    }

    /* ── Topbar ── */
    #topbar {
        height: 44px !important;
        padding: 0 6px !important;
        gap: 4px;
    }

    .header-title-section {
        width: 100%;
        gap: 6px;
    }

    .topbar-group-primary {
        flex-wrap: nowrap !important;
        gap: 6px;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }
    .topbar-group-primary::-webkit-scrollbar { display: none; }

    .topbar-row-break { display: none !important; }
    .topbar-divider { display: none !important; }

    /* ── Show secondary group (More button + Settings only) ── */
    body .topbar-group-secondary {
        display: flex !important;
        flex-shrink: 0;
        gap: 4px;
        margin-left: auto;
    }
    #tbarExtrasWrap,
    #quickAlertBtn,
    #fullscreenBtn,
    #screenshotBtn,
    body .topbar-group-secondary .topbar-divider {
        display: none !important;
    }

    /* ── Show overflow wrap on mobile (desktop is controlled by overflow.js) ── */
    #tbOverflowWrap {
        display: flex !important;
    }

    .symbol-display-btn {
        height: 30px;
        padding: 0 8px;
        font-size: 12px;
        gap: 4px;
    }
    .symbol-caret { display: none; }
    #symbolQuickAddBtn { width: 28px; height: 28px; }

    .topbar-btn {
        height: 30px;
        padding: 3px 6px;
        font-size: 11px;
    }
    .icon-action-btn { width: 28px; height: 28px; }
    .topbar-price-info { display: none; }

    /* ── Replace Indicators text with compact fx icon ── */
    #indicatorBtn > span:first-child { display: none !important; }
    #indicatorBtn i[data-lucide="chevron-down"] { display: none !important; }
    #indicatorBtn .fx-icon {
        display: inline-flex;
        width: 18px;
        height: 18px;
        align-items: center;
        justify-content: center;
    }
    #indicatorBtn {
        width: 30px;
        justify-content: center;
        padding: 3px;
    }

    /* ── Simplify timeframe: show only dropdown trigger ── */
    .tf-fav-btn,
    .tf-fav-btn.tf-fav-active,
    .tf-nav-chev {
        display: none !important;
    }
    #tf-dd-btn {
        display: inline-flex !important;
        width: auto !important;
        padding: 5px 8px;
        gap: 3px;
    }
    .tf-dd-star { display: none !important; }
    .tf-dd-item { padding-right: 12px; }

    /* ── Hide desktop items now in overflow menu ── */
    #alertBtn,
    #replayBtn,
    #chartNameWrap {
        display: none !important;
    }

    /* ── Chart layout area: fill full viewport below topbar ── */
    #chart-layout-area {
        top: 44px !important;
        left: 40px;
        right: 0 !important;
        bottom: 0;
    }

    /* ── Hide desktop-only elements on mobile ── */
    #chart-header { display: none !important; }
    #layout-picker-wrap { display: none !important; }

    /* ── Pane controls: minimal on mobile ── */
    .pane-header { padding: 4px 6px; gap: 4px; }
    .pane-symbol { font-size: 12px; font-weight: 600; }
    .pane-ctrl-min,
    .pane-ctrl-max,
    .pane-ctrl-close { display: none; }

    /* ── Buy/sell widget ── */
    .tv-bs-wrap { display: flex; }

    /* ── Indicators panel: full-screen modal on mobile ── */
    /* Handled by indicator-responsive.css — do not duplicate here */

    /* ── Right sidebar: hidden ── */
    .rsb-wrap { display: none !important; }

    /* ── Floating nav: hide on mobile ── */
    .floating-chart-nav { display: none !important; }
    /* No nav zone needed while the controls are hidden */
    .chart-container { --nav-zone-h: 0px; }
}

/* ── Small mobile (< 480px) ── */
@media (max-width: 479px) {
    #chart-layout-area {
        bottom: 0;
    }

    .chart-row > .chart-pane,
    .chart-row > .chart-pane-main {
        min-height: 200px;
        flex: 1 1 200px !important;
    }
    .live-price-label,
    .axis-label-y { font-size: 9px; padding: 2px 3px; }
}