/* ─────────────────────────────────────────────────────────────
   TradeVisionary mobile layer
   App-style bottom tab bar + touch-first polish for every page.
   Loaded after the page's own styles; desktop is untouched.
   ───────────────────────────────────────────────────────────── */

:root { --tabbar-h: 58px; }

/* Tab bar + sheet exist in the DOM on all viewports; only shown on mobile */
.tv-tabbar, .tv-sheet, .tv-sheet-backdrop { display: none; }

@media (max-width: 768px) {

    /* ── Layout: make room for the fixed tab bar ── */
    body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }

    /* ── Bottom tab bar ── */
    .tv-tabbar {
        display: flex;
        position: fixed; bottom: 0; left: 0; right: 0;
        height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
        padding: 0 0.25rem env(safe-area-inset-bottom, 0px);
        background: var(--nav-bg, rgba(18,18,18,0.97));
        -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
        border-top: 1px solid var(--border, #333);
        z-index: 420;
    }
    .tv-tab {
        flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 3px; color: var(--text2, #a0a0a0); font-size: 0.58rem; font-weight: 600;
        letter-spacing: 0.02em; text-decoration: none; background: none; border: none;
        font-family: inherit; cursor: pointer; padding: 0;
        -webkit-tap-highlight-color: transparent; user-select: none;
    }
    .tv-tab svg { width: 22px; height: 22px; flex-shrink: 0; }
    .tv-tab.active { color: var(--accent, #3b82f6); }
    .tv-tab:active { opacity: 0.7; }

    /* Center "Trade" action — raised FAB like leading trading apps */
    .tv-tab-fab {
        width: 48px; height: 48px; border-radius: 50%;
        background: var(--gradient-hero, linear-gradient(135deg,#3b82f6,#a855f7));
        display: flex; align-items: center; justify-content: center;
        margin-top: -20px; color: #fff;
        box-shadow: 0 6px 18px rgba(59,130,246,0.45), 0 0 0 4px var(--bg, #121212);
    }
    .tv-tab-fab svg { width: 24px; height: 24px; }
    .tv-tab.tv-tab-center { gap: 4px; }
    .tv-tab.tv-tab-center.active .tv-tab-fab { box-shadow: 0 6px 18px rgba(59,130,246,0.65), 0 0 0 4px var(--bg, #121212); }

    /* ── "More" bottom sheet ── */
    .tv-sheet-backdrop {
        display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.55);
        z-index: 430; opacity: 0; pointer-events: none; transition: opacity 0.22s ease;
    }
    .tv-sheet-backdrop.open { opacity: 1; pointer-events: auto; }
    .tv-sheet {
        display: block; position: fixed; left: 0; right: 0; bottom: 0;
        background: var(--bg2, #1a1a1a); border: 1px solid var(--border, #333); border-bottom: none;
        border-radius: 18px 18px 0 0; z-index: 440;
        padding: 0.5rem 1rem calc(1.1rem + env(safe-area-inset-bottom, 0px));
        transform: translateY(102%); transition: transform 0.26s cubic-bezier(.32,.72,.34,1);
        max-height: 75vh; overflow-y: auto;
    }
    .tv-sheet.open { transform: translateY(0); }
    .tv-sheet-grab { width: 38px; height: 4px; border-radius: 2px; background: var(--border, #333); margin: 0.4rem auto 0.9rem; }
    .tv-sheet-title { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text2, #a0a0a0); margin: 0.5rem 0 0.4rem; }
    .tv-sheet-item {
        display: flex; align-items: center; gap: 0.8rem; width: 100%;
        padding: 0.8rem 0.4rem; background: none; border: none; border-bottom: 1px solid var(--border, #333);
        color: var(--text, #e8e8e8); font-size: 0.92rem; font-weight: 500; font-family: inherit;
        text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
    }
    .tv-sheet-item:last-of-type { border-bottom: none; }
    .tv-sheet-item:active { background: var(--bg3, #212121); }
    .tv-sheet-item svg { width: 20px; height: 20px; color: var(--text2, #a0a0a0); flex-shrink: 0; }
    .tv-sheet-item .sub { margin-left: auto; font-size: 0.7rem; color: var(--text2, #a0a0a0); }

    /* ── Top navigation: compact app header ── */
    .dash-nav { padding: 0.55rem 0.9rem; gap: 0.6rem; }
    .dash-nav-links { display: none; }            /* bottom bar replaces page links */
    .dash-nav .auth-logo { font-size: 1rem; }
    .nav-user { max-width: 92px; overflow: hidden; text-overflow: ellipsis; }

    /* Homepage nav (different markup) */
    nav.nav { padding: 0.55rem 0.9rem; }
    nav.nav .status-text { display: none; }        /* keep the live dot, drop the label */
    nav.nav .nav-brand span { font-size: 0.95rem; }

    /* ── Touch-first controls ── */
    input, select, textarea { font-size: 16px !important; } /* stops iOS focus zoom */
    .btn-copy, .btn-primary-sm, .tier-btn, .follow-btn, .tv-tour-next, .cta-bar a.btn {
        min-height: 42px; display: inline-flex; align-items: center; justify-content: center;
    }
    .btn-x { min-width: 38px; min-height: 38px; font-size: 1.05rem; }
    .ctx-help-btn { min-width: 22px; min-height: 22px; }

    /* ── Tables: smooth horizontal scroll + pinned first column ── */
    .trades-table, .table-scroll {
        overflow-x: auto; -webkit-overflow-scrolling: touch;
        scrollbar-width: thin; position: relative;
        border-radius: 8px;
        /* right-edge fade hints there's more to scroll */
        mask-image: linear-gradient(to right, #000 calc(100% - 18px), rgba(0,0,0,0.35));
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), rgba(0,0,0,0.35));
    }
    .trades-table table, .table-scroll table { min-width: 560px; }
    .trades-table th:first-child, .trades-table td:first-child {
        position: sticky; left: 0; z-index: 2; background: var(--bg, #121212);
    }
    .table-scroll th:first-child, .table-scroll td:first-child {
        position: sticky; left: 0; z-index: 2; background: var(--bg2, #1a1a1a);
    }

    /* ── Cards & grids ── */
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 0.55rem; }
    .stat-card { padding: 0.75rem; border-radius: 12px; }
    .stat-val { font-size: 1.05rem; }
    .dash-main { padding: 0.9rem; }
    .dash-section { margin-bottom: 1.4rem; }
    .section, .referral-box { padding: 1rem; border-radius: 12px; }
    .two-col { grid-template-columns: 1fr; }

    /* Watchlist search dropdown: full-bleed under the input */
    .symbol-search-results { max-width: none; max-height: 46vh; }
    .ssr-item { padding: 0.75rem; }

    /* Context-help popovers: don't overflow the viewport */
    .ctx-help-pop { max-width: min(86vw, 320px); }

    /* Page heroes scale down */
    .arena-hero h1 { font-size: 1.45rem; }
    .arena-hero p { font-size: 0.85rem; }
    .bot-hero h1 { font-size: 1.55rem; }
    .bot-equity-big { font-size: 1.5rem; }
    .cta-bar { flex-direction: column; align-items: stretch; text-align: center; }
    .cta-bar a.btn { width: 100%; }

    /* Welcome banner stacks */
    .welcome-inner { flex-wrap: wrap; }

    /* ── Homepage ── */
    .container { padding: 0 0.85rem; }
    #heroSection .hero-inner { padding: 1.4rem 0.9rem 1.25rem; }
    #heroSection .hero-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.85rem 0.5rem; max-width: 340px; margin-left: auto; margin-right: auto; }
    #heroSection .hero-stat .v { font-size: 1.2rem; }
    .hero-ctas { flex-direction: column; align-items: stretch; }
    .hero-cta-main, .hero-cta-alt { text-align: center; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; }
    .tips-body { grid-template-columns: 1fr !important; }

    /* Modals/sheets clear the tab bar */
    .signup-gate-card, .bot-modal-card { max-height: calc(100vh - var(--tabbar-h) - 2rem); }

    /* Tour card never hides behind the tab bar */
    #tvTourCard { max-width: calc(100vw - 1.5rem); }
}

/* Slightly larger phones / small tablets: keep the tab bar */
@media (min-width: 769px) and (max-width: 920px) {
    .dash-nav-links a { padding: 0.4rem 0.5rem; font-size: 0.76rem; }
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
    .tv-sheet, .tv-sheet-backdrop { transition: none; }
}