/* Tab Biểu đồ (#chart-tab) — mobile ≤768px; desktop không đổi */

@media (min-width: 769px) {
    #chart-tab .chart-mobile-toolbar-hint {
        display: none !important;
    }
}

@media (max-width: 768px) {
    #chart-tab.active {
        height: calc(100dvh - var(--str-tabs-height, 56px)) !important;
        min-height: calc(100dvh - var(--str-tabs-height, 56px)) !important;
        max-height: calc(100dvh - var(--str-tabs-height, 56px)) !important;
        overflow: hidden !important;
        padding: 0 !important;
    }

    #chart-tab .card.chart-wrapper {
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        height: 100% !important;
        max-height: 100% !important;
    }

    #chart-tab #pro-chart-container {
        height: 100% !important;
        min-height: 0 !important;
        touch-action: pan-x pan-y pinch-zoom;
    }

    #chart-tab #global-toolbar-wrapper {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        flex-shrink: 0 !important;
    }

    #chart-tab #active-toolbar-mount {
        width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 4px 6px !important;
        box-sizing: border-box;
    }

    #chart-tab #active-toolbar-mount::-webkit-scrollbar {
        display: none;
    }

    #chart-tab div[id^="stock-toolbar-container"] {
        flex-wrap: nowrap !important;
        width: max-content !important;
        min-width: 100% !important;
        padding: 4px 6px !important;
        gap: 6px !important;
        justify-content: flex-start !important;
    }

    /* Ghi đè pro-chart.css mobile 26px — chỉ trong tab Biểu đồ */
    #chart-tab div[id^="stock-toolbar-container"] button,
    #chart-tab div[id^="stock-toolbar-container"] select,
    #chart-tab div[id^="stock-toolbar-container"] .am5stock-control-button,
    #chart-tab div[id^="stock-toolbar-container"] .toolbar-btn,
    #chart-tab div[id^="stock-toolbar-container"] .tf-btn,
    #chart-tab [id^="symbol-search-btn-"],
    #chart-tab [id^="ai-analyze-btn-"],
    #chart-tab [id^="custom-indicators-btn-"],
    #chart-tab [id^="bg-toggle-btn-"],
    #chart-tab [id^="grid-toggle-btn-"],
    #chart-tab [id^="recenter-chart-btn-"],
    #chart-tab [id^="htf-bias-toggle-btn-"] {
        min-height: 34px !important;
        height: 34px !important;
        padding: 0 8px !important;
        font-size: 11px !important;
        line-height: 1 !important;
        touch-action: manipulation;
    }

    #chart-tab div[id^="finai-fav-toolbar"] {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        max-width: 100% !important;
        -webkit-overflow-scrolling: touch;
    }

    #chart-tab div[id^="finai-fav-toolbar"] button {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        flex-shrink: 0;
    }

    #chart-tab div[id^="finai-fav-toolbar"] svg {
        width: 16px !important;
        height: 16px !important;
    }

    #chart-tab .chart-mobile-toolbar-hint {
        display: block;
        margin: 0;
        padding: 2px 10px 6px;
        font-size: 10px;
        font-weight: 600;
        text-align: center;
        color: var(--str-text-muted, #94a3b8);
        background: var(--str-bg-surface, #141414);
        border-bottom: 1px solid var(--str-border-subtle, rgba(255, 255, 255, 0.08));
    }

    #chart-tab #multi-chart-controls {
        width: 100% !important;
        padding: 6px 10px !important;
        gap: 8px !important;
        justify-content: space-between !important;
        box-sizing: border-box;
        border-top: 1px solid var(--str-border-subtle, rgba(255, 255, 255, 0.08));
    }

    #chart-tab #global-fullscreen-btn {
        min-height: 38px !important;
        padding: 6px 12px !important;
        font-size: 11px !important;
        touch-action: manipulation;
        flex-shrink: 0;
    }

    #chart-tab #layout-select {
        flex: 1;
        min-height: 38px !important;
        font-size: 14px !important;
        padding: 6px 10px !important;
        max-width: none !important;
    }

    /* Nhiều chart: xếp dọc, cuộn */
    #chart-tab #charts-grid {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        gap: 8px !important;
        padding: 4px !important;
        box-sizing: border-box;
    }

    #chart-tab .chart-cell {
        flex: 0 0 auto !important;
        width: 100% !important;
        min-height: min(48dvh, 380px) !important;
        height: min(48dvh, 380px) !important;
        max-height: 56dvh !important;
        border-radius: 8px !important;
        overflow: hidden !important;
    }

    #chart-tab .chart-cell [id^="amcharts-draw-div-"],
    #chart-tab .chart-cell [id^="amcharts-stock-div-"] {
        min-height: 200px !important;
        height: 100% !important;
    }

    /* MTF Bias — không scale nhỏ */
    #chart-tab div[id^="htf-bias-container"] {
        transform: none !important;
        scale: none !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-width: calc(100% - 16px) !important;
        bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
        font-size: 11px !important;
        max-height: 42dvh;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    #chart-tab div[id^="htf-bias-minibar"] {
        transform: none !important;
        left: 8px !important;
        bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
        max-width: calc(100% - 16px) !important;
    }

    #chart-tab .htf-bias-table {
        font-size: 10px !important;
    }

    /* Dropdown / symbol search trong tab chart */
    #chart-tab div[id^="symbol-search-dropdown-"],
    #chart-tab .symbol-search-dropdown,
    #chart-tab div[id^="custom-indicators-menu-"] {
        max-width: calc(100vw - 20px) !important;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
    }

    #chart-tab .am5-modal .am5-modal-content {
        max-width: calc(100vw - 24px) !important;
        max-height: calc(100dvh - 48px) !important;
        overflow: auto !important;
    }
}