/* ==========================================================================
   iLearnZed NEWSFEED — MOBILE DESIGN LAYER ("Learning Stream")
   --------------------------------------------------------------------------
   Loads LAST on the newsfeed page and owns the entire <=768px visual system.
   The DOM is untouched (newsfeed.js binds to these classes), so this file
   re-skins rather than restructures. !important is used deliberately: the
   legacy mobile blocks in newsfeed.css / newsfeed-polish.css / the global
   mobile stylesheets are !important-heavy, and this layer must win the
   cascade deterministically.

   Design language:
   - Calm near-white canvas; pure-white full-bleed cards separated by soft
     bands (maximises content width at 360px vs. floating boxed cards).
   - One brand green family (#047a44 text-safe, #00A651 accents).
   - Educational post types are first-class: poll / question / video / image
     each get an icon + label + tint chip (never colour alone).
   - Thumb ergonomics: every tap target >=44px, primary actions bottom-half.
   - Low-end device friendly: no backdrop blur, no entry animations,
     content-visibility on cards, system fonts only.
   ========================================================================== */

@media (max-width: 768px) {

    /* ------------------------------------------------------------------
       1. TOKENS
       ------------------------------------------------------------------ */
    #newsfeed-feed-root {
        --nfm-canvas: #f2f5f3;
        --nfm-card: #ffffff;
        --nfm-hairline: #e6ebe8;
        --nfm-ink: #17241d;
        --nfm-ink-2: #51625a;
        --nfm-ink-3: #6c7d74;
        --nfm-green: #047a44;        /* text-safe on white (5.6:1) */
        --nfm-green-bright: #00A651; /* icons / fills only, not small text */
        --nfm-green-tint: #e9f6f0;
        --nfm-poll: #6d28d9;
        --nfm-poll-tint: #f4eefe;
        --nfm-question: #92500a;
        --nfm-question-tint: #fdf3e2;
        --nfm-video: #9d174d;
        --nfm-video-tint: #fdeef4;
        --nfm-image: #1d4ed8;
        --nfm-image-tint: #ecf2fe;
        --nfm-radius: 14px;
        --nfm-pad: 16px;
        --nfm-shadow: 0 1px 2px rgba(23, 36, 29, 0.05);
    }

    /* ------------------------------------------------------------------
       2. CANVAS & FULL-BLEED SHELL
       ------------------------------------------------------------------ */
    body:has(#newsfeed-feed-root) {
        background: var(--nfm-canvas, #f2f5f3);
        /* The global mobile rules give body overflow-y:auto while html has
           overflow-x:hidden; per spec that stops body's overflow propagating
           to the viewport, so body becomes a scroll container that never
           scrolls — which silently kills every position:sticky descendant
           (the filter rail). html keeps overflow-x:hidden, so horizontal
           clipping is preserved at the viewport. */
        overflow: visible !important;
        /* Defensive: any CSS transform on body captures position:fixed
           descendants (per CSS spec the transformed element becomes the
           containing block for fixed children). The legacy
           mobile-optimizations.css applied transform:translateZ(0) to *every*
           element on mobile — removing that hack is the real fix, but this
           explicit override protects the navbar even on cached production builds. */
        transform: none !important;
        -webkit-transform: none !important;
    }

    /* Same defensive override on html in case that element also has a transform
       from the universal translateZ(0) hack. */
    html:has(#newsfeed-feed-root) {
        transform: none !important;
        -webkit-transform: none !important;
    }

    /* The original in-navbar hamburger STAYS in its place (top-right by the
       logo) and the navbar stays fixed — see setupNewsfeedMobileHeader in
       newsfeed.js. The floating side pill below is a scroll-only convenience,
       not a replacement. */

    #newsfeed-feed-root.main-container,
    #newsfeed-feed-root.main-container.feed-shell {
        padding: 0 !important;
        background: var(--nfm-canvas) !important;
    }

    #newsfeed-feed-root .newsfeed-container,
    #newsfeed-feed-root .newsfeed-container .container {
        padding: 0 !important;
        background: transparent !important;
    }

    /* ------------------------------------------------------------------
       3. QUICK LAUNCHER ROW (Resource Library / AI Tutor / Study Groups)
       ------------------------------------------------------------------ */
    #newsfeed-feed-root .quick-links-bar {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 12px var(--nfm-pad) 4px !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    #newsfeed-feed-root .quick-link-btn {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        min-height: 64px !important;
        padding: 10px 6px !important;
        background: var(--nfm-card) !important;
        border: 1px solid var(--nfm-hairline) !important;
        border-radius: var(--nfm-radius) !important;
        box-shadow: var(--nfm-shadow) !important;
        color: var(--nfm-ink) !important;
        font-size: 11.5px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        text-align: center !important;
        text-decoration: none !important;
        -webkit-tap-highlight-color: transparent;
    }

    #newsfeed-feed-root .quick-link-btn i {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 30px !important;
        height: 30px !important;
        border-radius: 10px !important;
        background: var(--nfm-green-tint) !important;
        color: var(--nfm-green) !important;
        font-size: 13px !important;
        margin: 0 !important;
    }

    #newsfeed-feed-root .quick-link-btn:active {
        background: #f6faf8 !important;
        border-color: var(--nfm-green-bright) !important;
    }

    /* ------------------------------------------------------------------
       4. COMPOSER
       ------------------------------------------------------------------ */
    #newsfeed-feed-root .create-post {
        margin: 8px 0 0 !important;
        padding: 14px var(--nfm-pad) 10px !important;
        background: var(--nfm-card) !important;
        border: 0 !important;
        border-top: 1px solid var(--nfm-hairline) !important;
        border-bottom: 1px solid var(--nfm-hairline) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    #newsfeed-feed-root .create-post-form .avatar-shell.composer-avatar {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border: 1px solid var(--nfm-hairline) !important;
    }

    #newsfeed-feed-root .create-post textarea,
    #newsfeed-feed-root #composer-focus-wrapper textarea {
        min-height: 46px !important;
        padding: 12px 16px !important;
        background: #f4f7f5 !important;
        border: 1px solid transparent !important;
        border-radius: 23px !important;
        color: var(--nfm-ink) !important;
        font-size: 15px !important;
        line-height: 1.4 !important;
        box-shadow: none !important;
    }

    #newsfeed-feed-root .create-post textarea:focus {
        background: #ffffff !important;
        border-color: var(--nfm-green-bright) !important;
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(0, 166, 81, 0.14) !important;
    }

    #newsfeed-feed-root .create-post textarea::placeholder {
        color: var(--nfm-ink-3) !important;
    }

    #newsfeed-feed-root .social-action-btn {
        min-height: 42px !important;
        border-radius: 12px !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
    }

    #newsfeed-feed-root .create-post-btn {
        min-height: 44px !important;
        border-radius: 12px !important;
        font-size: 14.5px !important;
        font-weight: 700 !important;
    }

    /* ------------------------------------------------------------------
       5. SEARCH + STICKY FILTER RAIL
       ------------------------------------------------------------------ */
    /* Sticky filter zone: position:sticky only travels within the element's
       parent, and the chip rail's parent is this short section — so the rail
       itself can never stick. Instead the whole zone sticks with a negative
       top so the search row (~70px) slides under the fixed navbar and only
       the chip rail stays pinned while the learner scrolls the feed. */
    #newsfeed-feed-root .feed-filter-search-zone {
        position: sticky !important;
        top: calc(var(--ilearnzed-navbar-offset, 60px) - 70px) !important;
        z-index: 40 !important;
        margin: 0 !important;
        padding: 12px var(--nfm-pad) 0 !important;
        background: var(--nfm-canvas) !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    /* The zone heading is decoration; the search field + tabs explain
       themselves. Reclaim the vertical space. */
    #newsfeed-feed-root .feed-search-label {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        clip: rect(0 0 0 0) !important;
        white-space: nowrap !important;
    }

    #newsfeed-feed-root .feed-post-search-wrap {
        height: 46px !important;
        background: var(--nfm-card) !important;
        border: 1px solid var(--nfm-hairline) !important;
        border-radius: 23px !important;
        box-shadow: var(--nfm-shadow) !important;
    }

    #newsfeed-feed-root .feed-post-search-wrap:focus-within {
        border-color: var(--nfm-green-bright) !important;
        box-shadow: 0 0 0 3px rgba(0, 166, 81, 0.14) !important;
    }

    #newsfeed-feed-root .feed-post-search-icon {
        left: 16px !important;
        color: var(--nfm-ink-3) !important;
    }

    #newsfeed-feed-root .feed-post-search-input {
        padding: 0 44px 0 42px !important;
        color: var(--nfm-ink) !important;
        font-size: 15px !important;
    }

    #newsfeed-feed-root .feed-post-search-input::placeholder {
        color: var(--nfm-ink-3) !important;
    }

    #newsfeed-feed-root .feed-post-search-clear {
        width: 32px !important;
        height: 32px !important;
        right: 8px !important;
    }

    /* Filter chips: 44px segmented tabs, horizontal scroll with snap.
       Sticky below the fixed navbar so learners can re-filter mid-feed.
       Solid background (no blur — compositing cost on low-end devices). */
    /* Right-edge fade on the zone wrapper — signals more chips to scroll to.
       The bar itself is the scroll container so ::after on it scrolls with it;
       this approach puts the fade on the non-scrolling parent instead. */
    #newsfeed-feed-root .feed-filter-search-zone {
        position: relative !important;
    }
    #newsfeed-feed-root .feed-filter-search-zone::after {
        content: '' !important;
        position: absolute !important;
        top: auto !important;
        bottom: 0 !important;
        right: 0 !important;
        width: 40px !important;
        height: 48px !important; /* matches chip row height */
        background: linear-gradient(to right, transparent, var(--nfm-canvas) 85%) !important;
        pointer-events: none !important;
        z-index: 2 !important;
    }

    #newsfeed-feed-root .feed-filter-search-zone .feed-filter-bar,
    #newsfeed-feed-root .feed-filter-bar {
        position: static !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        margin: 0 calc(-1 * var(--nfm-pad)) !important;
        padding: 8px var(--nfm-pad) 10px !important;
        background: var(--nfm-canvas) !important;
        overflow-x: auto !important;
        overscroll-behavior-x: contain !important;
        /* Snap one chip at a time: each swipe advances exactly one filter,
           hiding the one that was on the left. */
        scroll-snap-type: x mandatory !important;
        scroll-padding-inline-start: var(--nfm-pad) !important;
        scrollbar-width: none !important;
    }

    #newsfeed-feed-root .feed-filter-bar::-webkit-scrollbar {
        display: none;
    }

    /* Each chip is a fixed 90 px wide so exactly 3 fit in the 328 px visible
       area (360 − 32 px bar padding) with a clean 40 px peek of the 4th chip,
       signalling horizontal scrollability.
       calc fallback for browsers without vw in custom properties. */
    #newsfeed-feed-root .feed-filter-chip,
    #newsfeed-feed-root .feed-filter-bar .feed-filter-chip,
    #newsfeed-feed-root .feed-filter-search-zone .feed-filter-bar .feed-filter-chip {
        flex: 0 0 100px !important;
        width: 100px !important;
        display: inline-flex !important;
        align-items: center !important;
        /* flex-start prevents center-clipping: when content overflows a centered
           flex row the container clips from both sides, hiding the first letter.
           flex-start clips only the trailing edge, so ellipsis appears correctly. */
        justify-content: flex-start !important;
        gap: 6px !important;
        min-height: 40px !important;
        padding: 0 12px !important;
        background: var(--nfm-card) !important;
        border: 1.5px solid var(--nfm-hairline) !important;
        border-radius: 20px !important;
        color: var(--nfm-ink-2) !important;
        font-size: 13px !important;
        /* Snap: each swipe advances one chip, the previous one slides off left */
        scroll-snap-align: start !important;
        scroll-snap-stop: always !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    /* Truncate chip label text so fixed-width chips don't overflow */
    #newsfeed-feed-root .feed-filter-chip span,
    #newsfeed-feed-root .feed-filter-bar .feed-filter-chip span,
    #newsfeed-feed-root .feed-filter-search-zone .feed-filter-bar .feed-filter-chip span {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        min-width: 0 !important;
        flex: 1 1 0 !important;
    }

    /* Hide the external-link arrow icon on the Courses chip — it takes up
       ~18 px that the label text needs, causing "ourses" clipping. */
    #newsfeed-feed-root .feed-filter-chip .feed-filter-link-icon {
        display: none !important;
    }

    #newsfeed-feed-root .feed-filter-chip i {
        font-size: 12px !important;
        /* Explicit width normalises all icons to the same footprint so every
           chip's span gets the same remaining flex space (~58px at 100px chip). */
        width: 16px !important;
        text-align: center !important;
        flex-shrink: 0 !important;
        color: var(--nfm-ink-3) !important;
    }

    /* Deep green, not brand-bright green: white 13.5px text needs >=4.5:1,
       which #22c55e/#00A651 fail. Specificity matches the legacy
       zone-scoped rule so this later file wins. */
    #newsfeed-feed-root .feed-filter-chip.active,
    #newsfeed-feed-root .feed-filter-bar .feed-filter-chip.active,
    #newsfeed-feed-root .feed-filter-search-zone .feed-filter-bar .feed-filter-chip.active {
        background: var(--nfm-green) !important;
        border-color: var(--nfm-green) !important;
        color: #ffffff !important;
    }

    #newsfeed-feed-root .feed-filter-chip.active i,
    #newsfeed-feed-root .feed-filter-search-zone .feed-filter-bar .feed-filter-chip.active i {
        color: #ffffff !important;
    }

    #newsfeed-feed-root .feed-filter-chip:focus-visible {
        outline: 2px solid var(--nfm-green-bright) !important;
        outline-offset: 2px !important;
    }

    /* ------------------------------------------------------------------
       6. POST CARDS — full-bleed learning stream
       ------------------------------------------------------------------ */
    #newsfeed-feed-root .post-card {
        margin: 0 0 8px !important;
        padding: 14px var(--nfm-pad) 4px !important;
        background: var(--nfm-card) !important;
        border: 0 !important;
        border-top: 1px solid var(--nfm-hairline) !important;
        border-bottom: 1px solid var(--nfm-hairline) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        /* Perf: skip layout/paint for off-screen cards; kill the entry
           animation (content must never be invisible on slow devices). */
        content-visibility: auto;
        contain-intrinsic-size: auto 380px;
        opacity: 1 !important;
        animation: none !important;
        will-change: auto !important;
        transition: none !important;
    }

    #newsfeed-feed-root .post-header {
        gap: 10px !important;
        margin-bottom: 10px !important;
    }

    #newsfeed-feed-root .post-header .avatar-shell {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        border: 1px solid var(--nfm-hairline) !important;
    }

    #newsfeed-feed-root .post-author {
        color: var(--nfm-ink) !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
    }

    #newsfeed-feed-root .post-time {
        color: var(--nfm-ink-3) !important;
        font-size: 12.5px !important;
        line-height: 1.35 !important;
    }

    #newsfeed-feed-root .post-menu-trigger {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        border-radius: 50% !important;
        background: transparent !important;
        border: 0 !important;
        color: var(--nfm-ink-3) !important;
    }

    #newsfeed-feed-root .post-menu-trigger:active {
        background: #eef2ef !important;
    }

    #newsfeed-feed-root .post-content {
        color: var(--nfm-ink) !important;
        font-size: 15.5px !important;
        line-height: 1.6 !important;
        overflow-wrap: anywhere;
    }

    /* ------------------------------------------------------------------
       7. LEARNING-TYPE CHIPS (icon + label + tint; never colour alone)
       ------------------------------------------------------------------ */
    #newsfeed-feed-root .post-learning-tags {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        margin: 10px 0 2px !important;
    }

    #newsfeed-feed-root .post-learning-tag {
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        min-height: 26px !important;
        padding: 0 10px !important;
        border-radius: 13px !important;
        background: var(--nfm-green-tint) !important;
        border: 0 !important;
        color: var(--nfm-green) !important;
        font-size: 11.5px !important;
        font-weight: 700 !important;
        letter-spacing: 0.01em;
    }

    #newsfeed-feed-root .post-learning-tag.is-poll {
        background: var(--nfm-poll-tint) !important;
        color: var(--nfm-poll) !important;
    }

    #newsfeed-feed-root .post-learning-tag.is-question {
        background: var(--nfm-question-tint) !important;
        color: var(--nfm-question) !important;
    }

    #newsfeed-feed-root .post-learning-tag.is-video {
        background: var(--nfm-video-tint) !important;
        color: var(--nfm-video) !important;
    }

    #newsfeed-feed-root .post-learning-tag.is-image {
        background: var(--nfm-image-tint) !important;
        color: var(--nfm-image) !important;
    }

    /* ------------------------------------------------------------------
       8. MEDIA — edge-to-edge inside the card
       ------------------------------------------------------------------ */
    #newsfeed-feed-root .post-card .post-media,
    #newsfeed-feed-root .post-card .post-video,
    #newsfeed-feed-root .post-card .post-gallery {
        margin: 12px calc(-1 * var(--nfm-pad)) 0 !important;
        width: calc(100% + (2 * var(--nfm-pad))) !important;
        max-width: none !important;
        border-radius: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        background: #0d1411 !important;
    }

    #newsfeed-feed-root .post-card img.post-media {
        background: #eef2ef !important;
    }

    /* ------------------------------------------------------------------
       9. ACTION BAR — Like / Comment / Share
       ------------------------------------------------------------------ */
    #newsfeed-feed-root .post-card .post-actions {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 0 !important;
        margin: 12px calc(-1 * var(--nfm-pad)) 0 !important;
        padding: 4px 6px !important;
        border-top: 1px solid var(--nfm-hairline) !important;
        width: auto !important;
    }

    #newsfeed-feed-root .post-actions .action-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        min-height: 46px !important;
        padding: 0 4px !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 10px !important;
        color: var(--nfm-ink-2) !important;
        font-size: 13.5px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        box-shadow: none !important;
        -webkit-tap-highlight-color: transparent;
    }

    #newsfeed-feed-root .post-actions .action-btn i {
        font-size: 16px !important;
        color: var(--nfm-ink-3) !important;
        flex: 0 0 auto;
    }

    #newsfeed-feed-root .post-actions .action-btn:active {
        background: #f0f4f1 !important;
    }

    #newsfeed-feed-root .post-actions .action-btn .action-label {
        overflow: visible !important;
        text-overflow: clip !important;
        flex: 0 1 auto !important;
    }

    #newsfeed-feed-root .post-actions .action-btn .action-count {
        min-width: 0 !important;
        height: auto !important;
        padding: 0 !important;
        background: transparent !important;
        color: var(--nfm-ink-3) !important;
        font-size: 12.5px !important;
        font-weight: 700 !important;
    }

    /* Engaged state: green text + icon, no background flood (calmer, and
       the count stays legible). */
    #newsfeed-feed-root .post-actions .action-btn.liked,
    #newsfeed-feed-root .post-actions .action-btn.comments-open {
        background: transparent !important;
        border: 0 !important;
        color: var(--nfm-green) !important;
    }

    #newsfeed-feed-root .post-actions .action-btn.liked i,
    #newsfeed-feed-root .post-actions .action-btn.comments-open i,
    #newsfeed-feed-root .post-actions .action-btn.liked .action-count,
    #newsfeed-feed-root .post-actions .action-btn.comments-open .action-count {
        color: var(--nfm-green) !important;
    }

    /* ------------------------------------------------------------------
       10. POLL CARD — formative assessment, made delightful
       ------------------------------------------------------------------ */
    #newsfeed-feed-root .post-poll-card {
        margin: 12px 0 4px !important;
        padding: 14px !important;
        background: #fdfcff !important;
        border: 1px solid #e8e0f8 !important;
        border-radius: var(--nfm-radius) !important;
    }

    #newsfeed-feed-root .post-poll-kicker {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        color: var(--nfm-poll) !important;
        font-size: 11.5px !important;
        font-weight: 800 !important;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 6px !important;
    }

    #newsfeed-feed-root .post-poll-question {
        color: var(--nfm-ink) !important;
        font-size: 15.5px !important;
        font-weight: 700 !important;
        line-height: 1.45 !important;
        margin-bottom: 12px !important;
    }

    #newsfeed-feed-root .post-poll-options {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    #newsfeed-feed-root .post-poll-option {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        min-height: 48px !important;
        padding: 10px 14px !important;
        background: #ffffff !important;
        border: 1.5px solid var(--nfm-hairline) !important;
        border-radius: 12px !important;
        color: var(--nfm-ink) !important;
        font-size: 14px !important;
        text-align: left !important;
        overflow: hidden !important;
        -webkit-tap-highlight-color: transparent;
    }

    #newsfeed-feed-root .post-poll-option:not([disabled]):active {
        border-color: var(--nfm-poll) !important;
        background: var(--nfm-poll-tint) !important;
    }

    #newsfeed-feed-root .post-poll-bar {
        position: absolute !important;
        inset: 0 auto 0 0 !important;
        background: rgba(109, 40, 217, 0.10) !important;
        border-radius: 0 !important;
        z-index: 0 !important;
        transition: width 0.5s ease;
    }

    #newsfeed-feed-root .post-poll-option-main,
    #newsfeed-feed-root .post-poll-option-meta {
        position: relative;
        z-index: 1;
    }

    #newsfeed-feed-root .post-poll-option-main strong {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 26px !important;
        height: 26px !important;
        margin-right: 8px !important;
        border-radius: 50% !important;
        background: var(--nfm-poll-tint) !important;
        color: var(--nfm-poll) !important;
        font-size: 12.5px !important;
    }

    #newsfeed-feed-root .post-poll-option.selected {
        border-color: var(--nfm-poll) !important;
    }

    #newsfeed-feed-root .post-poll-option.is-correct {
        border-color: var(--nfm-green) !important;
        background: var(--nfm-green-tint) !important;
    }

    #newsfeed-feed-root .post-poll-option.is-correct .post-poll-option-main strong {
        background: var(--nfm-green) !important;
        color: #ffffff !important;
    }

    #newsfeed-feed-root .post-poll-option.is-wrong {
        border-color: #dc2626 !important;
        background: #fef2f2 !important;
    }

    #newsfeed-feed-root .post-poll-percent {
        color: var(--nfm-ink) !important;
        font-size: 13.5px !important;
        font-weight: 800 !important;
    }

    #newsfeed-feed-root .post-poll-total {
        margin-top: 10px !important;
        color: var(--nfm-ink-3) !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
    }

    /* ------------------------------------------------------------------
       11. COMMENTS
       ------------------------------------------------------------------ */
    #newsfeed-feed-root .comments {
        margin: 0 calc(-1 * var(--nfm-pad)) !important;
        padding: 12px var(--nfm-pad) 14px !important;
        background: #fafcfa !important;
        border-top: 1px solid var(--nfm-hairline) !important;
    }

    #newsfeed-feed-root .comment {
        background: #f0f4f1 !important;
        border: 0 !important;
        border-radius: 14px !important;
        padding: 10px 14px !important;
    }

    #newsfeed-feed-root .comment-author {
        color: var(--nfm-ink) !important;
        font-size: 13px !important;
        font-weight: 700 !important;
    }

    #newsfeed-feed-root .comment-text {
        color: var(--nfm-ink) !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    #newsfeed-feed-root .comment-form .comment-input {
        min-height: 44px !important;
        padding: 10px 16px !important;
        background: #ffffff !important;
        border: 1px solid var(--nfm-hairline) !important;
        border-radius: 22px !important;
        font-size: 14.5px !important;
        color: var(--nfm-ink) !important;
    }

    #newsfeed-feed-root .comment-form .comment-input:focus {
        border-color: var(--nfm-green-bright) !important;
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(0, 166, 81, 0.14) !important;
    }

    #newsfeed-feed-root .comment-submit-btn {
        min-height: 44px !important;
        border-radius: 22px !important;
    }

    /* ------------------------------------------------------------------
       12a. FLOATING SIDE-TAB MENU PILL
       (newsfeed.js re-parents it to <body> to escape any ancestor transforms)
       ------------------------------------------------------------------ */
    .nfm-side-menu-pill {
        display: none; /* shown only on newsfeed mobile via rule below */
    }

    body:has(#newsfeed-feed-root) .nfm-side-menu-pill,
    body > .nfm-side-menu-pill {
        display: flex !important;
        position: fixed !important;
        right: 0 !important;
        /* 62% keeps the pill in the comfortable lower-thumb zone,
           well below the navbar and filter rail */
        top: 62% !important;
        left: auto !important;
        bottom: auto !important;
        /* Hidden by default: parked off the right edge. newsfeed.js adds
           .is-visible once the learner scrolls past ~160px, sliding it in. */
        transform: translate(120%, -50%) !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: transform 0.26s ease, opacity 0.26s ease !important;
        z-index: 1998 !important; /* just below navbar (2000) and overlay (1999) */

        /* pill shape protruding from right edge */
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        width: 48px !important;
        min-height: 72px !important;
        padding: 16px 10px 16px 14px !important;
        border-radius: 22px 0 0 22px !important;

        /* brand green */
        background: linear-gradient(180deg, #047a44 0%, #00A651 100%) !important;
        border: none !important;
        color: #ffffff !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;

        /* depth / affordance */
        box-shadow: -4px 0 20px rgba(4, 122, 68, 0.32),
                    -1px 0 4px rgba(0, 0, 0, 0.12) !important;
    }

    /* Revealed state — slides in from the right edge once scrolled. */
    body:has(#newsfeed-feed-root) .nfm-side-menu-pill.is-visible,
    body > .nfm-side-menu-pill.is-visible {
        transform: translateY(-50%) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    body:has(#newsfeed-feed-root) .nfm-side-menu-pill i,
    body > .nfm-side-menu-pill i {
        font-size: 17px !important;
        color: #ffffff !important;
        line-height: 1 !important;
    }

    body:has(#newsfeed-feed-root) .nfm-side-menu-pill span,
    body > .nfm-side-menu-pill span {
        font-size: 8.5px !important;
        font-weight: 700 !important;
        color: rgba(255, 255, 255, 0.82) !important;
        letter-spacing: 0.06em !important;
        text-transform: uppercase !important;
        line-height: 1 !important;
        white-space: nowrap !important; /* prevent "MEN U" wrap */
    }

    body:has(#newsfeed-feed-root) .nfm-side-menu-pill:active,
    body > .nfm-side-menu-pill:active {
        transform: translateY(-50%) scaleX(0.9) !important;
        box-shadow: -1px 0 8px rgba(4, 122, 68, 0.25) !important;
    }

    /* ------------------------------------------------------------------
       12. FLOATING OPPORTUNITIES PILL
       (newsfeed.js re-parents it to <body> so position:fixed resolves
        against the viewport — see the transformed-ancestor note there.)
       ------------------------------------------------------------------ */
    /* Selector list mirrors the legacy html./body.is-mobile-device variants in
       newsfeed.css at equal specificity — this file loads later, so it wins
       the tie and the green style applies. */
    .mobile-opportunities-pill,
    body > .mobile-opportunities-pill,
    body.is-mobile-device .mobile-opportunities-pill,
    body.mobile-forced .mobile-opportunities-pill,
    html.is-mobile-device .mobile-opportunities-pill,
    html.mobile-forced .mobile-opportunities-pill {
        display: inline-flex !important;
        position: fixed !important;
        right: calc(14px + env(safe-area-inset-right)) !important;
        bottom: calc(18px + env(safe-area-inset-bottom)) !important;
        top: auto !important;
        left: auto !important;
        z-index: 2147483640 !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        height: 48px !important;
        min-height: 48px !important;
        padding: 0 20px !important;
        border-radius: 24px !important;
        background: linear-gradient(135deg, #047a44 0%, #00713e 100%) !important;
        border: 0 !important;
        color: #ffffff !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        box-shadow: 0 6px 18px rgba(4, 122, 68, 0.35) !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .mobile-opportunities-pill i {
        font-size: 15px !important;
        color: #ffffff !important;
    }

    .mobile-opportunities-pill:active {
        transform: scale(0.96) !important;
        box-shadow: 0 3px 10px rgba(4, 122, 68, 0.3) !important;
    }

    /* ------------------------------------------------------------------
       13. SKELETON LOADER — match the new canvas
       ------------------------------------------------------------------ */
    #newsfeed-feed-root .newsfeed-initial-skeleton {
        background: var(--nfm-canvas) !important;
        padding: 12px var(--nfm-pad) !important;
    }

    #newsfeed-feed-root .skeleton-card,
    #newsfeed-feed-root .skeleton-composer-card {
        background: var(--nfm-card) !important;
        border: 1px solid var(--nfm-hairline) !important;
        border-radius: var(--nfm-radius) !important;
        box-shadow: none !important;
    }

    /* ------------------------------------------------------------------
       14. SMALL-PHONE FINE-TUNE (<=380px: Itel/Tecno class devices)
       ------------------------------------------------------------------ */
    @media (max-width: 380px) {
        #newsfeed-feed-root {
            --nfm-pad: 14px;
        }

        #newsfeed-feed-root .post-content {
            font-size: 15px !important;
        }

        #newsfeed-feed-root .post-actions .action-btn {
            font-size: 12.5px !important;
            gap: 5px !important;
        }

        #newsfeed-feed-root .quick-link-btn {
            font-size: 11px !important;
        }
    }

    /* ------------------------------------------------------------------
       15. REDUCED MOTION
       ------------------------------------------------------------------ */
    @media (prefers-reduced-motion: reduce) {
        #newsfeed-feed-root .post-poll-bar {
            transition: none !important;
        }

        .mobile-opportunities-pill:active {
            transform: none !important;
        }

        body:has(#newsfeed-feed-root) .nfm-side-menu-pill:active,
        body > .nfm-side-menu-pill:active {
            transform: translateY(-50%) !important; /* keep vertical offset, skip scale */
        }

        /* Pill is re-parented to <body>, so the #newsfeed-feed-root * rule above
           never reaches it — disable its slide transition explicitly. */
        body:has(#newsfeed-feed-root) .nfm-side-menu-pill,
        body > .nfm-side-menu-pill {
            transition: none !important;
        }

        #newsfeed-feed-root * {
            animation-duration: 0.01ms !important;
            transition-duration: 0.01ms !important;
        }
    }
}

/* ==========================================================================
   DARK THEME (kept outside the width query so tokens cascade the same way)
   ========================================================================== */
@media (max-width: 768px) {
    [data-theme="dark"] #newsfeed-feed-root {
        --nfm-canvas: #0d1411;
        --nfm-card: #141d18;
        --nfm-hairline: #243029;
        --nfm-ink: #e7efe9;
        --nfm-ink-2: #aebdb4;
        --nfm-ink-3: #8a9a90;
        --nfm-green: #34d399;
        --nfm-green-tint: rgba(52, 211, 153, 0.12);
        --nfm-poll: #b794f6;
        --nfm-poll-tint: rgba(183, 148, 246, 0.12);
        --nfm-question: #fbbf24;
        --nfm-question-tint: rgba(251, 191, 36, 0.12);
        --nfm-video: #f472b6;
        --nfm-video-tint: rgba(244, 114, 182, 0.12);
        --nfm-image: #93c5fd;
        --nfm-image-tint: rgba(147, 197, 253, 0.12);
        --nfm-shadow: none;
    }

    [data-theme="dark"] body:has(#newsfeed-feed-root) {
        background: #0d1411;
    }

    [data-theme="dark"] #newsfeed-feed-root .create-post textarea,
    [data-theme="dark"] #newsfeed-feed-root #composer-focus-wrapper textarea {
        background: #1b2620 !important;
        color: var(--nfm-ink) !important;
    }

    [data-theme="dark"] #newsfeed-feed-root .post-poll-card {
        background: #161f24 !important;
        border-color: #2c3a44 !important;
    }

    [data-theme="dark"] #newsfeed-feed-root .post-poll-option {
        background: #141d18 !important;
        border-color: var(--nfm-hairline) !important;
        color: var(--nfm-ink) !important;
    }

    [data-theme="dark"] #newsfeed-feed-root .comments {
        background: #101813 !important;
    }

    [data-theme="dark"] #newsfeed-feed-root .comment {
        background: #1b2620 !important;
    }

    [data-theme="dark"] #newsfeed-feed-root .comment-form .comment-input {
        background: #1b2620 !important;
        color: var(--nfm-ink) !important;
    }

    [data-theme="dark"] #newsfeed-feed-root .post-actions .action-btn:active {
        background: #1b2620 !important;
    }

    /* ------------------------------------------------------------------
       13. MOBILE MENU PANEL — STICKY HEADER
       The panel (overflow-y: auto) can retain its scroll position between
       opens.  Making the header sticky means the logo + close button is
       ALWAYS pinned to the top of the visible panel area regardless of
       scrollTop — a CSS guarantee that survives any JS timing issue.
       ------------------------------------------------------------------ */
    #mobile-menu-panel .mobile-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 2 !important;
        background: white !important;
    }

    /* ------------------------------------------------------------------
       14. FLOATING PILLS YIELD TO OVERLAYS
       The pills carry a huge z-index so they beat page chrome, which also
       puts them above the share sheet and the nav menu panel. Park them
       while either overlay is open. (Must stay AFTER the pill rules above:
       equal specificity + equal importance means source order decides.)
       ------------------------------------------------------------------ */
    body.share-modal-open .mobile-opportunities-pill,
    body.share-modal-open .nfm-side-menu-pill,
    body:has(#mobile-menu-overlay.show) .mobile-opportunities-pill,
    body:has(#mobile-menu-overlay.show) .nfm-side-menu-pill {
        opacity: 0 !important;
        pointer-events: none !important;
    }
}