/* ── PAGE WRAP ──────────────────────────────────────────────────────────────── */
.chart-page-wrap {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: #0b0d12;
}

/* ── ACCESS BANNER ──────────────────────────────────────────────────────────── */
.access-banner {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 16px;
    background: rgba(255,160,0,.10);
    border-bottom: 1px solid rgba(255,160,0,.22);
    font-size: 13px;
    color: rgb(var(--tb-color1));
    flex-shrink: 0;
    flex-wrap: wrap;
    text-align: center;
}
.ab-btn {
    background: #ffa000;
    color: #000;
    border: none;
    border-radius: 6px;
    padding: 5px 16px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.ab-btn:hover { background: #ffb300; }

/* ── TRADING LAYOUT ─────────────────────────────────────────────────────────── */
.trading-layout {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: #0b0d12;
    position: relative;
}
.chart-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

/* ── TOOLBAR ────────────────────────────────────────────────────────────────── */
.chart-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px 0 14px;
    height: 44px;
    background: #131722;
    border-bottom: 1px solid rgba(255,255,255,.06);
    flex-shrink: 0;
}
.toolbar-symbol {
    font-size: 13px;
    font-weight: 700;
    color: rgb(var(--tb-color1));
    letter-spacing: .05em;
    margin-right: 2px;
    white-space: nowrap;
}
.live-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #26a69a;
    flex-shrink: 0;
    animation: tb-ai-pulse 2s ease-in-out infinite;
}
.market-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px; border-radius: 20px;
    font-size: 10px; font-weight: 700; letter-spacing: .04em;
    flex-shrink: 0; white-space: nowrap;
}
.market-pill-open   { background: rgba(22,163,74,.12);  color: #16a34a; }
.market-pill-closed { background: rgba(220,38,38,.12);  color: #dc2626; }
.market-pill-pre    { background: rgba(255,193,7,.12);  color: #ffc107; }

.toolbar-divider {
    width: 1px; height: 16px;
    background: rgba(255,255,255,.08);
    margin: 0 4px;
    flex-shrink: 0;
}
.toolbar-spacer { flex: 1; }

/* Timeframe buttons */
.tf-group { display: flex; gap: 1px; }
.tf-btn {
    background: transparent;
    color: rgba(255,255,255,.4);
    border: none; border-radius: 4px;
    padding: 4px 10px;
    font-size: 12px; font-weight: 600;
    font-family: inherit; cursor: pointer;
    transition: color .12s, background .12s;
    letter-spacing: .02em;
}
.tf-btn:hover  { background: rgba(255,255,255,.06); color: rgba(255,255,255,.8); }
.tf-btn.active {
    background: rgba(41,98,255,.18);
    color: #5b9cf6;
}

/* Type toggle (HA / OHLC) */
.type-toggle {
    display: flex;
    background: rgba(255,255,255,.05);
    border-radius: 5px;
    padding: 2px;
    gap: 1px;
}
.type-btn {
    background: transparent;
    color: rgba(255,255,255,.35);
    border: none; border-radius: 3px;
    padding: 3px 9px;
    font-size: 12px; font-weight: 700;
    font-family: inherit; cursor: pointer;
    transition: .12s ease; letter-spacing: .04em;
}
.type-btn.active {
    background: rgba(255,255,255,.1);
    color: rgba(255,255,255,.9);
}

/* Zoom group — right aligned */
.zoom-group {
    display: flex; gap: 1px;
    background: rgba(255,255,255,.05);
    border-radius: 5px;
    padding: 2px;
    flex-shrink: 0;
}
.zoom-btn {
    background: transparent;
    color: rgba(255,255,255,.35);
    border: none; border-radius: 3px;
    padding: 3px 8px;
    font-size: 12px; font-weight: 700;
    font-family: inherit; cursor: pointer;
    transition: .12s ease; line-height: 1;
    white-space: nowrap;
}
.zoom-btn:hover { background: rgba(255,255,255,.08); color: rgba(255,255,255,.8); }

/* ── INDICATOR BAR ──────────────────────────────────────────────────────────── */
.indicator-bar {
    display: flex; align-items: center; gap: 6px;
    padding: 0 12px; height: 28px;
    background: #131722;
    border-bottom: 1px solid rgba(255,255,255,.04);
    flex-shrink: 0; overflow: hidden;
}
.ind-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 4px; padding: 3px 10px;
    font-size: 10px; font-family: inherit;
    white-space: nowrap; line-height: 1;
    cursor: pointer; user-select: none;
    transition: background .15s, border-color .15s;
}
.ind-toggle:hover { background: rgba(255,255,255,.08); }
.ind-toggle.active { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
.ind-toggle .ind-eye {
    width: 14px; height: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; color: rgba(255,255,255,.3);
}
.ind-toggle.active .ind-eye { color: rgba(255,255,255,.7); }
.ind-toggle .ind-name {
    font-weight: 700; font-size: 10px; letter-spacing: .04em;
    color: rgba(255,255,255,.4);
}
.ind-toggle.active .ind-name { color: rgba(255,255,255,.85); }
.ind-chip {
    display: flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.05);
    border-radius: 4px; padding: 3px 9px;
    font-size: 10px; font-family: inherit;
    white-space: nowrap; line-height: 1;
}
.ind-chip-label {
    font-weight: 700; font-size: 10px; letter-spacing: .04em;
}
.ind-chip-sep {
    width: 1px; height: 10px;
    background: rgba(255,255,255,.1);
}
.ind-chip-kv { display: flex; gap: 4px; align-items: center; }
.ind-chip-kv span { color: rgba(255,255,255,.4); font-size: 10px; }
.ind-chip-kv b { color: rgba(255,255,255,.8); font-weight: 600; font-size: 10px; }

/* ── CHART AREA ─────────────────────────────────────────────────────────────── */
.chart-wrap { flex: 1; position: relative; overflow: hidden; }
#chart { width: 100%; height: 100%; }
/* Y-axis drag — grab cursor */
#chart.yaxis-hover    { cursor: grab; }
#chart.yaxis-dragging { cursor: grabbing; }

/* ── CHART LOADING OVERLAY ──────────────────────────────────────────────────── */
.chart-loading {
    position: absolute; inset: 0;
    background: rgba(11,13,18,.8);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 14px; z-index: 20;
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
}
.chart-loading.visible { opacity: 1; pointer-events: all; }
.chart-loading-spinner {
    width: 28px; height: 28px;
    border: 2px solid rgba(255,255,255,.08);
    border-top-color: #26a69a;
    border-radius: 50%;
    animation: chart-spin .7s linear infinite;
}
@keyframes chart-spin { to { transform: rotate(360deg); } }
.chart-loading-text {
    font-size: 12px; font-weight: 600;
    color: rgba(255,255,255,.3); font-family: inherit;
}

/* ── OHLC OVERLAY ───────────────────────────────────────────────────────────── */
.ohlc-overlay {
    position: absolute; top: 10px; left: 12px;
    display: flex; align-items: baseline; gap: 14px;
    pointer-events: none; z-index: 10;
    flex-wrap: wrap;
}
.ohlc-ltp {
    font-size: 26px; font-weight: 700;
    color: rgba(255,255,255,.9);
    font-variant-numeric: tabular-nums; line-height: 1;
}
.ohlc-ltp.up   { color: #26a69a; }
.ohlc-ltp.down { color: #ef5350; }
.ohlc-meta {
    display: flex; gap: 10px;
    font-size: 12px; color: rgba(255,255,255,.4);
    align-items: baseline;
}
.ohlc-meta span { display: flex; gap: 3px; align-items: baseline; }
.ohlc-meta b { color: rgba(255,255,255,.75); font-weight: 500; font-variant-numeric: tabular-nums; }
.change-pill {
    font-size: 12px; font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
}
.change-pill.up   { background: rgba(38,166,154,.15); color: #26a69a; }
.change-pill.down { background: rgba(239,83,80,.15);  color: #ef5350; }

/* ── WATCHLIST COLLAPSE TOGGLE ──────────────────────────────────────────────── */
.wl-toggle {
    position: absolute;
    right: 300px;
    top: 50%;
    transform: translateY(-50%);
    width: 13px; height: 40px;
    background: #131722;
    border: 1px solid rgba(255,255,255,.08);
    border-right: none;
    border-radius: 4px 0 0 4px;
    color: rgba(255,255,255,.3);
    font-size: 12px; font-weight: 700;
    cursor: pointer; z-index: 50;
    display: flex; align-items: center; justify-content: center;
    transition: right .3s cubic-bezier(.4,0,.2,1), color .12s;
    font-family: inherit; line-height: 1; padding: 0;
}
.wl-toggle:hover { color: rgba(255,255,255,.8); }
.trading-layout.wl-collapsed .wl-toggle { right: 0; }

/* ── WATCHLIST ──────────────────────────────────────────────────────────────── */
.watchlist {
    width: 300px; flex-shrink: 0;
    background: #131722;
    border-left: 1px solid rgba(255,255,255,.06);
    display: flex; flex-direction: column; overflow: hidden;
    transition: width .3s cubic-bezier(.4,0,.2,1);
}
.trading-layout.wl-collapsed .watchlist { width: 0; }

.watchlist-header {
    padding: 10px 12px 8px;
    border-bottom: 1px solid rgba(255,255,255,.05);
    flex-shrink: 0;
    background: #131722;
}
.watchlist-title {
    font-size: 9px; font-weight: 700; letter-spacing: .1em;
    color: rgba(255,255,255,.3); text-transform: uppercase;
    margin-bottom: 7px;
}
.watchlist-search {
    width: 100%; box-sizing: border-box;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 5px;
    color: rgba(255,255,255,.8);
    font-family: inherit; font-size: 12px;
    padding: 5px 8px; outline: none;
    transition: border-color .15s;
}
.watchlist-search::placeholder { color: rgba(255,255,255,.25); }
.watchlist-search:focus { border-color: rgba(41,98,255,.4); }

.wl-sor-filter {
    display: flex; gap: 3px; margin-top: 7px;
}
.wl-sor-btn {
    flex: 1;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 4px;
    color: rgba(255,255,255,.35);
    font-family: inherit; font-size: 10px; font-weight: 700;
    padding: 4px 2px; cursor: pointer; line-height: 1;
    transition: .12s ease; white-space: nowrap;
}
.wl-sor-btn:hover { color: rgba(255,255,255,.7); }
.wl-sor-btn.active { color: rgba(255,255,255,.8); border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.08); }
.wl-sor-btn.wl-bullish.active { color: #16a34a; border-color: rgba(22,163,74,.4);  background: rgba(22,163,74,.08); }
.wl-sor-btn.wl-bearish.active { color: #ef5350; border-color: rgba(239,83,80,.4);  background: rgba(239,83,80,.08); }

.watchlist-body {
    flex: 1; overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.1) transparent;
}
.watchlist-body::-webkit-scrollbar { width: 3px; }
.watchlist-body::-webkit-scrollbar-track { background: transparent; }
.watchlist-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }

.watch-item {
    display: flex; align-items: center; padding: 8px 12px;
    min-height: 52px; box-sizing: border-box;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,.03);
    transition: background .12s; gap: 8px;
}
.watch-item:hover  { background: rgba(255,255,255,.04); }
.watch-item.active {
    background: rgba(41,98,255,.08);
    border-left: 2px solid #2962ff;
    padding-left: 10px;
}
.watch-sor-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: rgba(255,255,255,.15); flex-shrink: 0;
    transition: background .4s ease;
    margin-top: 1px;
    align-self: flex-start;
}
.watch-left { flex: 1; min-width: 0; }
.watch-symbol {
    font-size: 12px; font-weight: 700;
    color: rgba(255,255,255,.85);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    letter-spacing: .02em;
}
.watch-name {
    font-size: 10px;
    color: rgba(255,255,255,.3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-top: 2px;
}
.watch-right {
    display: flex; flex-direction: column;
    align-items: flex-end; gap: 3px;
    flex-shrink: 0; font-variant-numeric: tabular-nums;
}
.watch-ltp {
    font-size: 12px; font-weight: 600;
    color: rgba(255,255,255,.8);
    min-width: 60px; text-align: right;
    line-height: 1;
}
.watch-ltp.up   { color: #26a69a; }
.watch-ltp.down { color: #ef5350; }
.watch-chg-pill {
    font-size: 10px; font-weight: 600;
    font-variant-numeric: tabular-nums;
    padding: 2px 5px; border-radius: 3px;
    min-width: 76px; text-align: right;
    line-height: 1;
}
.watch-chg-pill.up   { color: #26a69a; background: rgba(38,166,154,.10); }
.watch-chg-pill.down { color: #ef5350; background: rgba(239,83,80,.10); }
.watch-chg-pill.flat { color: rgba(255,255,255,.3); background: transparent; }

.badge-profit  { background: rgba(255,152,0,.15); color: #FF9800; }

/* ── WL MOBILE HANDLE ───────────────────────────────────────────────────────── */
.wl-mobile-handle { display: none; }

/* ── RESPONSIVE ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    /* Keep watchlist visible on tablet — it becomes a drawer below 768px */
    .wl-toggle { display: none; }
    .ohlc-meta { display: none; }
    .ohlc-ltp  { font-size: 18px; }
}

@media (max-width: 768px) {
    /* ── Layout: chart fills height, watchlist is a bottom drawer ── */
    .trading-layout {
        flex-direction: column;
        position: relative;
        overflow: visible;
    }
    .chart-section {
        flex: 1;
        min-height: 0;
    }

    /* ── Watchlist: collapsed to handle bar, expands as drawer ── */
    .watchlist {
        display: flex !important;
        position: fixed !important;
        bottom: 0; left: 0; right: 0;
        width: 100% !important;
        /* collapsed: only the 40px handle is "above fold" */
        height: 78vh;
        max-height: 78vh;
        border-left: none;
        border-top: 1px solid rgba(255,255,255,.1);
        background: #131722;
        flex-direction: column;
        flex-shrink: 0;
        overflow: hidden;
        border-radius: 14px 14px 0 0;
        z-index: 300;
        /* slide almost all the way out — only the handle peeks above bottom */
        transform: translateY(calc(100% - 40px));
        transition: transform .32s cubic-bezier(.4,0,.2,1);
        box-shadow: 0 -4px 32px rgba(0,0,0,.5);
    }
    .watchlist.mobile-expanded {
        transform: translateY(0);
    }
    .trading-layout.wl-collapsed .watchlist {
        transform: translateY(calc(100% - 40px));
        width: 100% !important;
    }
    .wl-toggle { display: none !important; }

    /* ── Mobile handle: always visible at bottom, triggers the drawer ── */
    .wl-mobile-handle {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 40px;
        min-height: 40px;
        flex-shrink: 0;
        background: #131722;
        border-bottom: 1px solid rgba(255,255,255,.05);
        cursor: pointer;
        border: none; width: 100%;
        font-family: inherit; padding: 5px 12px 2px;
        gap: 3px;
        -webkit-tap-highlight-color: transparent;
    }
    .wl-mobile-handle::before {
        content: '';
        display: block;
        width: 34px; height: 3px;
        background: rgba(255,255,255,.18);
        border-radius: 2px;
        flex-shrink: 0;
    }
    .wl-mobile-handle:active { background: rgba(255,255,255,.04); }

    /* ── Watchlist header: shown when expanded ── */
    .watchlist-header {
        display: flex !important;
    }

    /* ── Watchlist body: vertical list ── */
    .watchlist-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        overflow-x: hidden;
        scroll-snap-type: none;
        scrollbar-width: thin;
        scrollbar-color: rgba(255,255,255,.1) transparent;
        -webkit-overflow-scrolling: touch;
    }
    .watchlist-body::-webkit-scrollbar { width: 3px; }
    .watchlist-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }

    /* ── Watch items: full-width rows ── */
    .watch-item {
        flex-direction: row;
        align-items: center;
        width: 100%; min-width: unset;
        height: auto; min-height: 52px;
        padding: 9px 12px; gap: 8px;
        border-bottom: 1px solid rgba(255,255,255,.03);
        border-right: none;
        scroll-snap-align: none;
    }
    .watch-item.active {
        border-left: 2px solid #2962ff;
        border-top: none;
        background: rgba(41,98,255,.08);
        padding-left: 10px;
    }
    .watch-right { flex-direction: column; align-items: flex-end; }
    .watch-name  { display: block; }
    .watch-symbol   { font-size: 12px; }
    .watch-ltp      { font-size: 12px; min-width: 60px; }
    .watch-chg-pill { font-size: 10px; min-width: 76px; padding: 2px 5px; }

    /* ── Toolbar buttons: larger touch targets ── */
    .tf-btn   { padding: 8px 10px; min-height: 40px; }
    .zoom-btn { padding: 8px 8px;  min-height: 40px; }
    .type-btn { padding: 8px 10px; min-height: 40px; }

    .ohlc-meta { display: none; }
    .ohlc-ltp  { font-size: 20px; }

    /* ── Watchlist overlay (dim the chart when drawer is open) ── */
    .wl-drawer-overlay {
        display: none;
        position: fixed; inset: 0;
        background: rgba(0,0,0,.5);
        z-index: 299;
    }
    .wl-drawer-overlay.visible { display: block; }
}