/* ═══════════════════════════════════════════════════════════════
   Buzzberg — Mobile Responsive Overhaul
   Desktop rules are UNTOUCHED. This file adds ONLY @media queries.
   Loaded after all inline <style> blocks in base.html.
   ═══════════════════════════════════════════════════════════════ */

/* ── Viewport meta already in base.html ── */

/* ═══════════════════════════════════════════════════════════════
   @991px — Tablet  (Bootstrap lg breakpoint, navbar collapse)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {

    /* ── Navbar: reset absolute centering, stack links vertically ── */
    .navbar .navbar-nav.bz-nav-center {
        position: static !important;
        transform: none !important;
        white-space: nowrap;
    }
    .navbar { height: 48px !important; min-height: 48px; }
    .navbar .container-fluid {
        height: 48px !important;
        flex-wrap: nowrap;
        row-gap: 0;
        align-items: center;
    }
    .navbar .navbar-brand { order: 0; }
    .navbar .collapse.navbar-collapse { display: none !important; }
    .navbar .d-flex.align-items-center.ms-auto {
        order: 2;
        margin-left: auto !important;
        min-width: 0;
        flex-shrink: 0;
    }

    /* Hamburger toggler styling */
    .navbar-toggler {
        border: none !important;
        padding: 4px 8px !important;
        color: #8b949e;
        order: 1;
        margin-left: 8px;
    }
    .navbar-toggler:focus { box-shadow: none !important; }
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(139,148,158,1)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
        width: 22px;
        height: 22px;
    }

    /* ── trade_ideas_v2: hide dock ── */
    body.bz-mobile-nav-open {
        overflow: hidden;
    }
    body.bz-mobile-nav-open .bz-mobile-nav-backdrop {
        opacity: 1;
        pointer-events: auto;
    }
    body.bz-mobile-nav-open .bz-mobile-nav-sheet {
        transform: translateY(var(--bz-mobile-nav-drag, 0px));
    }
    .bz-mobile-nav-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1800;
        background: rgba(4, 8, 14, 0.64);
        backdrop-filter: blur(14px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.22s ease;
    }
    .bz-mobile-nav-sheet {
        --bz-mobile-nav-drag: 0px;
        --bz-mobile-nav-option-height: 78px;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1810;
        height: min(75svh, 680px);
        padding: 10px 12px calc(18px + env(safe-area-inset-bottom));
        background: #000;
        border-top: 1px solid rgba(255,255,255,.06);
        border-radius: 26px 26px 0 0;
        box-shadow: 0 -24px 60px rgba(0,0,0,.72);
        transform: translateY(calc(100% + var(--bz-mobile-nav-drag, 0px)));
        transition: transform 0.28s cubic-bezier(.22,.8,.24,1);
        will-change: transform;
    }
    .bz-mobile-nav-sheet.is-dragging {
        transition: none;
    }
    .bz-mobile-nav-sheet-inner {
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .bz-mobile-nav-handle-wrap {
        display: flex;
        justify-content: center;
        align-items: center;
        align-self: center;
        width: min(200px, 52vw);
        min-height: 56px;
        margin: 0 auto;
        padding: 16px 40px 14px;
        border: none;
        border-radius: 999px;
        background: transparent;
        -webkit-tap-highlight-color: transparent;
    }
    .bz-mobile-nav-handle {
        width: 56px;
        height: 6px;
        border-radius: 999px;
        background: rgba(255,255,255,.18);
    }
    .bz-mobile-nav-handle-wrap:focus {
        outline: none;
    }
    .bz-mobile-nav-handle-wrap:active .bz-mobile-nav-handle {
        background: rgba(255,255,255,.3);
    }
    .bz-mobile-nav-wheel-shell {
        position: relative;
        flex: 1;
        min-height: 0;
        overflow: hidden;
        border-radius: 0;
        background: transparent;
        border: none;
    }
    .bz-mobile-nav-wheel-shell::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 3;
        pointer-events: none;
        background: linear-gradient(180deg,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 0.78) 16%,
            rgba(0, 0, 0, 0) 34%,
            rgba(0, 0, 0, 0) 66%,
            rgba(0, 0, 0, 0.78) 84%,
            rgba(0, 0, 0, 1) 100%);
    }
    .bz-mobile-nav-wheel-focus {
        display: none;
    }
    .bz-mobile-nav-wheel {
        position: relative;
        z-index: 2;
        height: 100%;
        overflow-y: auto;
        overscroll-behavior: contain;
        scroll-snap-type: y mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        touch-action: pan-y;
        padding-inline: 0;
    }
    .bz-mobile-nav-wheel::-webkit-scrollbar {
        display: none;
    }
    .bz-mobile-nav-option {
        width: 100%;
        min-height: 84px;
        border: none;
        background: transparent;
        color: rgba(240,246,252,.24);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 18px;
        font-size: clamp(28px, 6.8vw, 40px);
        line-height: 1;
        font-weight: 700;
        letter-spacing: -0.045em;
        text-align: center;
        user-select: none;
        scroll-snap-align: center;
        transition: color 0.16s ease, opacity 0.16s ease, transform 0.16s ease;
        transform: scale(0.76);
        opacity: 0.44;
    }
    .bz-mobile-nav-option.is-neighbor {
        color: rgba(240,246,252,.58);
        transform: scale(0.9);
        opacity: 0.72;
    }
    .bz-mobile-nav-option.is-active {
        color: #ffffff;
        transform: scale(1.02);
        opacity: 1;
        text-shadow: none;
    }
    .bz-mobile-nav-option.is-distant {
        transform: scale(0.72);
    }
    .bz-mobile-nav-open-btn {
        width: 100%;
        min-height: 56px;
        border: none;
        border-radius: 18px;
        background: linear-gradient(135deg, #58a6ff 0%, #3ecfcf 100%);
        color: #f8fbff;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 0.01em;
        box-shadow: 0 16px 32px rgba(23, 51, 82, 0.34);
    }
    .ti2-dock { display: none !important; }

    .ti2-mobile-source-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        padding: 10px 8px 6px !important;
        max-width: 560px;
        margin: 0 auto;
    }
    .ti2-mobile-source-btn {
        display: grid !important;
        width: 100%;
        min-height: 62px;
        place-content: center;
        justify-items: center;
    }
    .ti2-filter-wrap { padding-top: 0 !important; }
    .ti2-filter-bar {
        display: none !important;
    }
    .ti2-mobile-utility-bar {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 0 8px 8px !important;
        max-width: 560px;
        margin: 0 auto;
    }
    .ti2-mobile-utility-left,
    .ti2-mobile-utility-right {
        gap: 6px;
    }
    .ti2-mobile-utility-right {
        flex-wrap: nowrap;
        justify-content: flex-end;
    }
    .ti2-mobile-utility-bar .ti2-filter-btn {
        min-height: 34px;
        padding: 5px 9px !important;
        border-radius: 10px !important;
        background: #0b0f18 !important;
        border: 1px solid rgba(255,255,255,.08) !important;
        color: #c0cde0 !important;
    }
    .ti2-mobile-feed-dropdown {
        position: relative;
    }
    .ti2-mobile-feed-dropdown .ti2-feed-menu {
        left: auto;
        right: 0;
        min-width: 236px;
        max-width: min(280px, calc(100vw - 16px));
    }
    .ti2-mobile-feed-toggle.active {
        color: #f0f4fa !important;
        background: rgba(63,185,80,.18) !important;
        border-color: rgba(63,185,80,.42) !important;
        box-shadow: inset 0 0 0 1px rgba(63,185,80,.14), 0 0 16px rgba(63,185,80,.10);
    }
    .ti2-mobile-feed-toggle.active .ti2-feed-dot {
        box-shadow: 0 0 8px rgba(63,185,80,.7);
    }
    .ti2-page-filter-trigger { display: inline-flex !important; }
    .ti2-page-filter-trigger.active {
        color: #f0f4fa !important;
        background: rgba(88,166,255,.12) !important;
        border-color: rgba(88,166,255,.35) !important;
    }
    .ti2-page-filter-panel {
        padding: 12px !important;
    }
    .ti2-page-filter-head {
        flex-wrap: wrap;
    }

    /* ── trade_ideas_v2: collapse pulse by default ── */
    .ti2-pulse { display: none !important; }

    /* ── latest: gazette padding ── */
    .gz-content-area { padding: 24px 24px !important; }
    .gz-hl { font-size: 28px !important; }
}


/* ═══════════════════════════════════════════════════════════════
   @768px — Small Tablet
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── Notification panel: reposition ── */
    .notif-panel {
        right: -16px !important;
        width: calc(100vw - 32px) !important;
        max-width: 320px !important;
    }
    .notif-panel::before { right: 24px !important; }

    /* ── trade_ideas_v2: filter bar wraps ── */
    .ti2-filter-bar {
        flex-wrap: wrap !important;
        height: auto !important;
        min-height: 38px;
        padding: 6px 12px !important;
        gap: 6px !important;
    }
    .ti2-mobile-utility-bar {
        padding: 0 12px 8px !important;
    }
    .ti2-filter-right {
        width: 100%;
        margin-left: 0 !important;
        justify-content: flex-start;
        margin-top: 2px;
    }

    /* ── trade_ideas_v2: feed-inner full-width ── */
    .ti2-feed-inner { max-width: 100% !important; padding: 0 4px; }

    /* ── trade_ideas_v2: rows single-column, speaker inline ── */
    .ti2-row {
        grid-template-columns: 1fr !important;
        gap: 4px 0 !important;
        padding: 10px 12px !important;
    }
    .ti2-speaker {
        min-width: 0 !important;
        text-align: left !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
    }
    .ti2-speaker-name { font-size: 12px; }
    .ti2-speaker-role { font-size: 10px; }
    .ti2-yt-header {
        gap: 8px !important;
        margin-bottom: 6px !important;
    }
    .ti2-yt-badge {
        padding: 3px 8px !important;
        font-size: 10px !important;
    }
    .ti2-yt-video-link {
        font-size: 11px !important;
    }

    /* ── search.html: same feed/row treatment ── */
    .sr-filter-bar {
        flex-wrap: wrap !important;
        height: auto !important;
        min-height: 38px;
        padding: 6px 12px !important;
        gap: 6px !important;
    }
    .sr-filter-right {
        width: 100%;
        margin-left: 0 !important;
    }
    .sr-page .ti2-feed-inner { max-width: 100% !important; }
    .sr-page .ti2-row {
        grid-template-columns: 1fr !important;
        gap: 4px 0 !important;
        padding: 10px 12px !important;
    }
    .sr-page .ti2-speaker {
        min-width: 0 !important;
        text-align: left !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
    }

    /* ── search.html: calendar popover reposition ── */
    .sr-cal-pop {
        left: auto !important;
        right: 0 !important;
        transform: none !important;
    }
    .sr-cal-pop::after { left: auto !important; right: 16px !important; }

    /* ── latest.html: hero padding reduce ── */
    .hero-inner { padding: 24px 16px 20px !important; }
    .hero-headline { font-size: clamp(22px, 5vw, 36px) !important; }

    /* ── latest.html: sidebar padding reduce ── */
    .bz-side-col { padding: 16px 12px !important; }
    .bz-main-col { padding: 16px 12px !important; }

    /* ── speakers.html: filter search full-width ── */
    .speaker-card { padding: 12px !important; }

    /* ── speaker_detail.html: header wraps ── */
    .sd-header {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 6px 12px !important;
    }

    /* ── sentiment.html: date form wrap ── */
    .sent-date-form {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    /* ── Channel panel: full width search ── */
    .ti2-ch-bar { flex-wrap: wrap !important; }
    .ti2-ch-search { width: 100% !important; }

    /* ── Substack cards: tighter padding ── */
    .ti2-substack-card { padding: 12px 14px !important; }
    .ti2-reddit-card { padding: 12px 14px !important; }

    /* ── Price tooltip: constrain to viewport ── */
    .ti2-price-tip {
        min-width: 160px !important;
        max-width: calc(100vw - 32px);
        left: 0 !important;
        transform: none !important;
    }
    .ti2-price-tip::after { left: 20px !important; transform: none !important; }
}


/* ═══════════════════════════════════════════════════════════════
   @576px — Phone
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 576px) {

    /* ── Navbar: compact ── */
    .navbar .navbar-brand img { height: 26px !important; }

    /* Hide username text in user dropdown, show only avatar */
    .navbar #userDropdown > span { display: none !important; }

    /* Search pill: icon-only, hide text + kbd */
    .bz-search-pill { padding: 5px 10px !important; gap: 0 !important; }
    .bz-search-pill kbd { display: none !important; }
    /* Hide "Search" text — it's a text node after the SVG, use font-size trick */
    .bz-search-pill { font-size: 0 !important; }
    .bz-search-pill svg { width: 16px; height: 16px; }
    .bz-mobile-nav-sheet {
        height: min(76svh, 620px);
        padding-left: 12px;
        padding-right: 12px;
    }
    .bz-mobile-nav-handle-wrap {
        width: min(220px, 64vw);
        min-height: 60px;
        padding: 18px 42px 16px;
    }
    .bz-mobile-nav-option {
        min-height: 76px;
        font-size: clamp(24px, 8vw, 34px);
    }
    .bz-mobile-nav-open-btn {
        min-height: 54px;
    }

    /* ── Notification panel: full-width top drawer ── */
    .notif-panel {
        position: fixed !important;
        top: 48px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 0 8px 8px !important;
        max-height: calc(100vh - 48px);
        max-height: calc(100svh - 48px);
        overflow-y: auto;
    }
    .notif-panel::before { display: none !important; }

    /* ── latest.html: gazette modal full-screen ── */
    .gz {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        height: 100svh !important;
        border-radius: 0 !important;
    }
    .gz-content-area { padding: 20px 16px !important; }
    .gz-hl { font-size: 24px !important; }
    .gz-body-text { font-size: 18px !important; line-height: 1.65 !important; }
    .gz-body-text::first-letter { font-size: 48px !important; }
    .gz-bottom-bar { padding: 12px 16px !important; font-size: 9px !important; }

    /* ── latest.html: hero tweaks ── */
    .hero-inner { padding: 20px 14px 18px !important; }
    .hero-headline { font-size: clamp(20px, 5.5vw, 32px) !important; }
    .hero-top { gap: 8px !important; flex-wrap: wrap; }
    .hero-time { margin-left: 0 !important; font-size: 10px !important; }
    .hero-tag { font-size: 9px !important; }
    .hero-ticker-badge { font-size: 12px !important; padding: 4px 10px !important; }
    .hero-dots { right: 14px !important; bottom: 12px !important; }
    .hero-empty { padding: 24px 16px !important; }

    /* ── latest.html: sidebar collapses below main ── */
    .bz-main-grid { padding: 0 6px !important; }
    .bz-main-col { padding: 16px 8px !important; border-right: none !important; }
    .bz-side-col { padding: 8px 8px 16px !important; }

    /* ── latest.html: cards ── */
    .nc { padding: 12px 14px !important; }
    .tc { padding: 12px 14px !important; }
    .sc { padding: 12px !important; }
    .tc-top { gap: 8px !important; }

    /* ── trade_ideas_v2: smaller padding/fonts ── */
    .ti2-mobile-source-grid {
        gap: 5px;
        padding: 8px 6px 6px !important;
    }
    .ti2-mobile-utility-bar {
        gap: 6px;
        padding: 0 6px 8px !important;
    }
    .ti2-mobile-utility-left,
    .ti2-mobile-utility-right {
        gap: 4px;
    }
    .ti2-mobile-utility-bar .ti2-filter-btn {
        min-height: 32px;
        padding: 4px 8px !important;
        font-size: 11px !important;
    }
    .ti2-mobile-source-btn {
        border-radius: 12px;
        min-height: 58px;
        padding: 0 2px;
    }
    .ti2-mobile-source-icon {
        width: 18px;
        height: 18px;
    }
    .ti2-mobile-source-icon svg {
        width: 18px;
        height: 18px;
    }
    .ti2-mobile-source-name { font-size: 10px; }
    .ti2-row { padding: 8px 10px !important; }
    .ti2-thesis { font-size: 14px !important; line-height: 1.5 !important; }
    .ti2-pill { font-size: 12px !important; padding: 1px 8px !important; }
    .ti2-row-time { font-size: 11px !important; }
    .ti2-expand-quote { font-size: 12px !important; padding: 6px 10px !important; }
    .ti2-expand-meta { gap: 10px !important; font-size: 12px !important; }
    .ti2-filter-btn { font-size: 12px !important; }
    .ti2-src-badge { font-size: 11px !important; }
    .ti2-feed-toggle { font-size: 12px !important; }

    /* ── trade_ideas_v2: channel panel tighter ── */
    .ti2-ch-list { max-height: 160px !important; }
    .ti2-ch-item { font-size: 12px !important; }
    .ti2-ch-cat-pill { font-size: 10px !important; }

    /* ── trade_ideas_v2: substack/reddit cards ── */
    .ti2-substack-card { padding: 10px 12px !important; }
    .ti2-substack-title { font-size: 14px !important; }
    .ti2-substack-tldr { font-size: 12px !important; padding: 6px 10px !important; }
    .ti2-reddit-card { padding: 10px 12px !important; }
    .ti2-reddit-title { font-size: 14px !important; }
    .ti2-reddit-points { font-size: 12.5px !important; }

    /* ── trade_ideas_v2: status bar ── */
    .ti2-status-bar { font-size: 10px !important; height: 24px !important; padding: 0 8px !important; }

    /* ── search.html: same row treatment ── */
    .sr-page .ti2-row { padding: 8px 10px !important; }
    .sr-page .ti2-thesis { font-size: 14px !important; }
    .sr-page .ti2-pill { font-size: 12px !important; }
    .sr-query-badge { font-size: 12px !important; }

    /* ── sentiment.html: gauge smaller ── */
    .gauge-wrap svg { max-width: 240px !important; height: auto !important; }
    .sent-date-form input[type="date"] { width: 100% !important; }

    /* ── speakers.html: sort row wraps ── */
    .btn-group-sm > .btn { font-size: 0.75rem !important; padding: 0.2rem 0.5rem !important; }

    /* ── General: container override ── */
    .container { padding-left: 10px !important; padding-right: 10px !important; }

    /* ── Search overlay: full width ── */
    #searchOverlay > div { width: 95vw !important; margin-top: -4vh !important; }
    #searchInput { font-size: 16px !important; padding: 12px 14px !important; }

    /* ── Footer ── */
    footer { font-size: 0.72rem !important; padding: 10px 8px !important; }

    /* ── Tweet embeds: constrain width ── */
    .ti2-tweet-embed { max-width: 100% !important; }
    .ti2-yt-thumb { max-width: 100% !important; }
    .ti2-yt-thumb img { width: 90px !important; height: 51px !important; }

    /* ── Table responsiveness ── */
    .table-responsive { -webkit-overflow-scrolling: touch; }
}


/* ═══════════════════════════════════════════════════════════════
   @480px — Small Phone (iPhone SE, etc.)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

    /* ── trade_ideas_v2: minimum tweaks ── */
    .ti2-thesis { font-size: 13.5px !important; }
    .ti2-pill { font-size: 11px !important; padding: 0px 7px !important; line-height: 22px !important; }
    .ti2-pills { gap: 4px !important; }
    .ti2-row { padding: 7px 8px !important; }
    .ti2-filter-bar { padding: 4px 8px !important; }
    .ti2-filter-btn { padding: 3px 5px !important; font-size: 11px !important; }
    .ti2-mobile-source-btn { min-height: 58px; }
    .ti2-mobile-source-name { font-size: 10px; }
    .ti2-mobile-utility-bar {
        padding: 0 6px 8px !important;
    }
    .ti2-mobile-utility-bar .ti2-filter-btn {
        padding: 4px 7px !important;
        font-size: 10.5px !important;
    }

    /* ── latest.html: hero headline smaller ── */
    .hero-headline { font-size: 20px !important; margin-bottom: 12px !important; }
    .hero-live { font-size: 9px !important; }
    .hero-tag { padding: 3px 7px !important; }

    /* ── latest.html: cards ── */
    .nc-t { font-size: 13px !important; }
    .nc-desc { font-size: 12px !important; }
    .tc-ticker { font-size: 14px !important; }
    .tc-thesis { font-size: 12px !important; }

    /* ── Search results ── */
    .sr-page .ti2-thesis { font-size: 13.5px !important; }
    .sr-page .ti2-pill { font-size: 11px !important; }

    /* ── Gazette ── */
    .gz-hl { font-size: 20px !important; }
    .gz-body-text { font-size: 16px !important; }
    .gz-body-text::first-letter { font-size: 40px !important; }
}


/* ═══════════════════════════════════════════════════════════════
   Touch & scrollbar refinements for all mobile sizes
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    /* Thinner scrollbars */
    .ti2-feed::-webkit-scrollbar { width: 4px !important; }
    .ti2-pulse::-webkit-scrollbar { width: 3px !important; }

    /* Prevent horizontal overflow on body */
    html, body { overflow-x: hidden; }

    /* Ensure touch scrolling */
    .ti2-feed { -webkit-overflow-scrolling: touch; }

    /* ── trade_ideas_v2: layout fills viewport properly ── */
    .ti2-layout { height: auto !important; min-height: calc(100vh - 48px); min-height: calc(100svh - 48px); }
    .ti2-center { min-height: 0; }
}


/* ═══════════════════════════════════════════════════════════════
   Weekly Report — phone layout
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
    .wr-stats-row { grid-template-columns: 1fr; }
    .wr-header { flex-direction: column; align-items: flex-start; }
    .wr-nav { width: 100%; justify-content: space-between; }
    .wr-table th:nth-child(4),
    .wr-table td:nth-child(4) { display: none; }
    .wr-table th, .wr-table td { padding: 8px 8px; font-size: 13px; }
    .wr-archive-list { gap: 6px; }
}


/* ═══════════════════════════════════════════════════════════════
   Landscape phone (short height)
   ═══════════════════════════════════════════════════════════════ */
@media (max-height: 500px) and (max-width: 991px) {
    .hero-breaking { min-height: 140px !important; }
    .hero-inner { padding: 16px 14px !important; }
    .gz { height: 100vh !important; height: 100svh !important; }
}