/* Mobile-only compaction: less empty space around containers. Remove the <link> to revert. */
@media (max-width: 576px) {
    .container, .container-fluid { padding-left: 8px; padding-right: 8px; }
    .feed-container { padding: 8px; }
    .feed-item { padding: 10px; margin-bottom: 8px; }
    .quoted-note { padding: 8px; }
    .feed-author { margin-bottom: 6px; }
}

/* Mobile layout (logged in): fixed top bar, fixed feed tabs, feed fills the rest of the screen.
   Delete this block to revert to the previous behaviour. */
@media (max-width: 991px) {
    :root { --mb-h: 44px; --nav-h: 49px; --tabs-h: 44px; }
    body.user-logged-in { padding-top: var(--mb-h); --thread-top: calc(var(--mb-h) + var(--nav-h)); }
    body.user-logged-in .container.mt-4 { margin-top: 0 !important; }

    /* Top bar: fixed, solid, larger tap targets; same colour as the buttons row so they read as one band */
    .mobile-menu-bar {
        position: fixed; height: var(--mb-h); padding: 0 6px; box-sizing: border-box; z-index: 1030;
        background: #212529;
    }
    .mobile-menu-bar { justify-content: space-evenly; }
    .mobile-menu-icons { display: contents; }
    .mobile-menu-btn, .mobile-icon-btn { width: 44px; height: 44px; justify-content: center; }
    .mobile-menu-btn i, .mobile-icon-btn i { font-size: 1.5rem; }

    /* Profile, Notifications, Messages and Settings now live in the top bar (Edit Profile stays in the side menu) */
    .mobile-sidebar button[onclick="viewMyProfileInFeed()"],
    .mobile-sidebar button[onclick="checkNotifications()"],
    .mobile-sidebar button[onclick="showDMs()"],
    .mobile-sidebar button[onclick="showSettings()"] { display: none !important; }

    .card:has(> .card-header > .feed-nav-buttons) { border-top: 0; }

    /* Section buttons: fixed under the top bar, one scrollable row */
    .card-header:has(> .feed-nav-buttons) {
        position: sticky; top: var(--mb-h); z-index: 1020; height: var(--nav-h);
        display: flex; align-items: center; padding: 0 8px; border-radius: 0; background: #212529;
    }
    .card-header:has(> .feed-nav-buttons) + .card-body { padding: 8px; }
    .feed-nav-buttons { flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: none; }
    .feed-nav-buttons::-webkit-scrollbar { display: none; }
    .feed-nav-buttons .btn { flex: 0 0 auto; }

    /* Posts / Replies tabs of the main feed: fixed under the section buttons (profile view tabs are left as they were) */
    .card-body > .feed-switcher {
        position: sticky; top: calc(var(--mb-h) + var(--nav-h)); z-index: 1010; flex-wrap: nowrap; gap: 8px;
        height: var(--tabs-h); box-sizing: border-box; padding: 4px 0 6px; margin-bottom: 0 !important; background: #212529;
    }
    .card-body > .feed-switcher .feed-tab { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 0 6px; }

    /* The page scrolls (not a 600px box), so the feed fills the remaining space; sticky needs no clipped ancestor */
    .feed-container { max-height: none; overflow: visible; }

    /* Things that stick or scroll to a position must clear the fixed stack */
    #newNotesPill { top: calc(var(--mb-h) + var(--nav-h) + var(--tabs-h) + 8px) !important; }
    #threadView .conversation-note { scroll-margin-top: 190px; }

    /* Optional (Settings): the icon bar (menu, profile, bell, messages, cog) at the bottom; section buttons stay at the top */
    body.nav-bottom { --mb-h: 56px; --nav-h: 56px; padding-top: 0; padding-bottom: calc(var(--mb-h) + env(safe-area-inset-bottom)); --thread-top: var(--nav-h); }
    body.nav-bottom .mobile-menu-bar {
        top: auto; bottom: 0; left: 0; right: 0; height: calc(var(--mb-h) + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid rgba(255,255,255,.12);
    }
    body.nav-bottom .mobile-menu-bar { align-items: center; }
    body.nav-bottom .card-header:has(> .feed-nav-buttons) { top: 0; padding-top: 4px; }
    body.nav-bottom .card-body > .feed-switcher { top: var(--nav-h); }
    body.nav-bottom #newNotesPill { top: calc(var(--nav-h) + var(--tabs-h) + 8px) !important; }
    body.nav-bottom #threadView .conversation-note { scroll-margin-top: 146px; }

    /* Optional (Settings): Back buttons on the right, within thumb reach */
    body.back-right button[onclick="goBack()"] { display: block; margin-left: auto; }
    body.back-right .plist-bar { flex-direction: row-reverse; }
    body.back-right .thread-bar > button { order: 2; margin-left: auto; } /* conversation view */
    body.back-right .article-detail-view > .d-flex:first-child { flex-direction: row-reverse; } /* article view: Back right, share left */

    /* Feed edge fade: where the visible area starts and ends, below the fixed bars (see the fade rule at the end) */
    body.user-logged-in { --fade-top: calc(var(--mb-h) + var(--nav-h)); --fade-bot: 0px; }
    body.user-logged-in:has(.card-body > .feed-switcher:not([style*="display: none"])) { --fade-top: calc(var(--mb-h) + var(--nav-h) + var(--tabs-h)); }
    body.nav-bottom { --fade-top: var(--nav-h); --fade-bot: calc(var(--mb-h) + env(safe-area-inset-bottom)); }
    body.nav-bottom:has(.card-body > .feed-switcher:not([style*="display: none"])) { --fade-top: calc(var(--nav-h) + var(--tabs-h)); }
}

/* Smaller floating compose button, kept clear of the bottom icon bar */
@media (max-width: 768px) {
    body.user-logged-in #floatingComposeBtn { width: 54px; height: 54px; bottom: 20px; left: 16px; }
    body.user-logged-in #floatingComposeBtn img { width: 36px !important; height: 36px !important; max-width: 36px !important; max-height: 36px !important; }
    body.user-logged-in #composeOverlay { z-index: 1035; } /* above the fixed icon bar (1030) */
    body.user-logged-in #floatingComposeBtn i { font-size: 22px !important; }
    body.user-logged-in.nav-bottom #floatingComposeBtn { bottom: calc(var(--mb-h) + env(safe-area-inset-bottom) + 14px); }
}

/* A view opened from a quote card already has the purple Back / Reload bar (same goBack), so hide the view's own duplicate Back button (all screen sizes) */
.qc-return ~ .mb-3:has(> button[onclick="goBack()"]),
.qc-return ~ * .mb-3:has(> button[onclick="goBack()"]),
.qc-return ~ button[onclick="goBack()"],
.qc-return ~ * button[onclick="goBack()"] { display: none !important; }

/* Feed items fade out over their first / last 56px as they scroll under the top edge and past the bottom edge (a mask driven by scroll position;
   browsers without scroll-driven animations skip it). --fade-top / --fade-bot are set in the mobile block above. */
@property --fo { syntax: '<length-percentage>'; inherits: false; initial-value: -56px; }
@property --fi { syntax: '<length-percentage>'; inherits: false; initial-value: calc(100% + 56px); }
@supports (animation-timeline: view()) and (mask-composite: intersect) {
    @keyframes feed-fade-out { from { --fo: -56px; } to { --fo: 100%; } }
    @keyframes feed-fade-in { from { --fi: 0px; } to { --fi: calc(100% + 56px); } }
    .feed-item:not(.fade-out) {
        mask-image: linear-gradient(to bottom, transparent var(--fo), #000 calc(var(--fo) + 56px)), linear-gradient(to bottom, #000 calc(var(--fi) - 56px), transparent var(--fi));
        mask-composite: intersect;
        mask-clip: no-clip;
        animation: feed-fade-out linear, feed-fade-in linear;
        animation-timeline: view(block var(--fade-top, 0px) var(--fade-bot, 0px)), view(block var(--fade-top, 0px) var(--fade-bot, 0px));
        animation-range-start: exit -56px, entry 0%;
        animation-range-end: exit 100%, entry calc(100% + 56px);
    }
}