/* =========================================================
   Instagram-style reels: full-bleed video, no boxed header,
   author/caption overlaid at the bottom, like/comment/share/save
   as a vertical icon rail over the video (right side).
   Loaded last so it wins over the older .facebook-reel-* rules,
   which no longer apply since the markup uses new class names.
   ========================================================= */

.ig-reels-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
    list-style: none;
}

.ig-reel-card {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 16px;
    overflow: hidden;
}

.ig-reel-media {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    max-height: 80vh;
    margin: 0 auto;
    background: #000;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .18);
    overflow: hidden;
}
.ig-reel-media video {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
    object-fit: cover;
    background: #000;
}

/* "..." more menu, top-right overlay */
.ig-reel-more {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 6;
}
.ig-reel-more summary {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, .38);
    color: #fff;
    cursor: pointer;
    list-style: none;
}
.ig-reel-more summary::-webkit-details-marker { display: none; }
.ig-reel-more-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 170px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .25);
}
.ig-reel-more-menu form,
.ig-reel-more-menu a { display: block; }
.ig-reel-more-menu button,
.ig-reel-more-menu a {
    width: 100%;
    min-height: 42px;
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px solid var(--line, #eef0f3);
    background: #fff;
    color: #344054;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}
.ig-reel-more-menu form:last-child button,
.ig-reel-more-menu a:last-child { border-bottom: 0; }
.ig-reel-more-menu .danger-text { color: #b42318; }

/* Right-side action rail: like / comment / share / save */
.ig-reel-rail {
    position: absolute;
    right: 8px;
    bottom: 16px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    color: #fff;
}
.ig-rail-btn { min-width: 0; }
.ig-reel-rail button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    border: 0;
    background: transparent;
    color: #fff;
    padding: 0;
    cursor: pointer;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55));
}
.ig-reel-rail button svg { display: block; width: 24px !important; height: 24px !important; }
.ig-reel-rail button span {
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}
.ig-reel-rail form[data-like-form].is-done button svg {
    fill: #ff3040;
    stroke: #ff3040;
}
.ig-reel-rail form[data-save-form].is-done button svg {
    fill: #fff;
}
.ig-reel-card:has(.comment-inline-form.is-done) .js-scroll-comment svg {
    fill: #fff;
}
.share-popover button[data-share-open].is-shared svg {
    fill: #5b9dff;
    stroke: #5b9dff;
}

.ig-reel-rail .share-popover {
    position: relative;
}
.ig-reel-rail .share-options {
    position: absolute !important;
    top: auto !important;
    bottom: calc(100% + 10px) !important;
    right: -6px !important;
    left: auto !important;
    min-width: 190px !important;
}

/* Bottom overlay: avatar, name, follow, caption, meta */
.ig-reel-bottom {
    position: absolute;
    left: 0;
    right: 62px;
    bottom: 0;
    z-index: 4;
    padding: 34px 12px 14px;
    background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
    color: #fff;
}
.ig-reel-author {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    max-width: 100%;
}
.ig-reel-avatar {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sv-blue, #2563eb), var(--sv-purple, #7c3aed));
    color: #fff;
    font-weight: 800;
    font-size: 12.5px;
    border: 1.5px solid rgba(255, 255, 255, .8);
}
.ig-reel-author strong {
    font-size: 14px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ig-reel-follow {
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
}
.ig-reel-follow button {
    padding: 5px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .85);
    background: transparent;
    color: #fff;
    font-weight: 700;
    font-size: 12.5px;
    cursor: pointer;
}
.ig-reel-caption {
    margin: 6px 0 0;
    font-size: 13.5px;
    line-height: 1.4;
    color: #f5f5f5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ig-reel-meta {
    margin-top: 6px;
    font-size: 11.5px;
    color: rgba(255, 255, 255, .78);
}

/* Comments stay below the video, normal (non-overlay) flow */
.ig-reel-card > .comments-list,
.ig-reel-card > .comment-inline-form {
    padding-inline: 4px;
}
.ig-reel-card > .comments-list:not(.comments-collapsed) {
    margin-top: 10px;
}

@media (min-width: 761px) {
    .ig-reels-list { gap: 20px; }
    .ig-reel-media { max-width: 460px; }
}

/* Mobile: small breathing gap from the screen edge, rounded corners kept */
@media (max-width: 760px) {
    .ig-reels-list {
        gap: 12px;
        padding-inline: 6px;
    }
    .ig-reel-media {
        max-height: none;
        aspect-ratio: 9 / 16;
    }
    .ig-reel-card > .comments-list,
    .ig-reel-card > .comment-inline-form {
        padding-inline: 6px;
    }
}

/* Center mute/unmute indicator, shown briefly on single tap */
.ig-reel-mute-indicator {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
}
.ig-reel-mute-indicator:empty { display: none; }
.ig-reel-mute-indicator svg {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .5));
}
.ig-reel-mute-indicator.is-showing {
    animation: ig-mute-pop .7s ease forwards;
}
@keyframes ig-mute-pop {
    0% { opacity: 0; transform: scale(.6); }
    18% { opacity: 1; transform: scale(1.08); }
    30% { transform: scale(1); }
    75% { opacity: 1; }
    100% { opacity: 0; }
}

/* Double/triple-tap heart burst */
.ig-reel-heart-layer {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
}
.ig-heart-particle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30px;
    height: 30px;
    transform: translate(-50%, -50%) scale(0);
    animation-name: ig-heart-burst;
    animation-duration: 2200ms;
    animation-timing-function: cubic-bezier(.22, .7, .3, 1);
    animation-fill-mode: forwards;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35));
}
.ig-heart-particle svg { display: block; width: 100%; height: 100%; }
@keyframes ig-heart-burst {
    0% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px) * .2), -50%) scale(0) rotate(var(--rot, 0deg)); }
    12% { opacity: 1; transform: translate(calc(-50% + var(--dx, 0px) * .4), calc(-50% - 20px)) scale(var(--scale, 1)) rotate(var(--rot, 0deg)); }
    70% { opacity: 1; }
    100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% - 200px)) scale(var(--scale, 1)) rotate(var(--rot, 0deg)); }
}

/* =========================================================
   Mobile bottom nav — plain, solid, full-width fixed bar like
   Instagram's real tab bar (no blur/no floating margins: those
   caused a ghosting/duplicate render glitch on scroll).
   ========================================================= */
@media (max-width: 760px) {
    nav.mobile-icon-nav.instagram-mobile-nav {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        border-radius: 0 !important;
        background: #ffffff !important;
        border: 0 !important;
        border-top: 1px solid #e5e7eb !important;
        box-shadow: 0 -6px 20px rgba(15, 23, 42, .06) !important;
        padding: 6px 6px !important;
        padding-bottom: max(6px, env(safe-area-inset-bottom)) !important;
    }
    html[data-theme="dark"] nav.mobile-icon-nav.instagram-mobile-nav {
        background: var(--sv-surface, #161829) !important;
        border-top-color: rgba(255, 255, 255, .1) !important;
    }
    nav.mobile-icon-nav.instagram-mobile-nav a {
        position: relative;
        border-radius: 12px !important;
    }
    nav.mobile-icon-nav.instagram-mobile-nav a.is-active {
        background: transparent !important;
    }
    nav.mobile-icon-nav.instagram-mobile-nav a.is-active svg {
        stroke: var(--sv-blue, #2563eb) !important;
        fill: rgba(37, 99, 235, .12) !important;
    }
    nav.mobile-icon-nav.instagram-mobile-nav a svg {
        width: 24px !important;
        height: 24px !important;
    }

    /* "+" (Add) button: flattened to match the other four — no
       raised gradient circle, same color/size/layout as siblings. */
    nav.mobile-icon-nav.instagram-mobile-nav label.nav-create {
        position: relative !important;
        top: 0 !important;
        transform: none !important;
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        border-radius: 12px !important;
        background: transparent !important;
        box-shadow: none !important;
        color: var(--sv-text-secondary, #6b7280) !important;
    }
    nav.mobile-icon-nav.instagram-mobile-nav label.nav-create svg {
        width: 24px !important;
        height: 24px !important;
        padding: 0 !important;
        border-radius: 0 !important;
        background: none !important;
        box-shadow: none !important;
        stroke: var(--sv-text-secondary, #6b7280) !important;
        fill: none !important;
        color: inherit !important;
    }
    nav.mobile-icon-nav.instagram-mobile-nav label.nav-create small {
        display: block !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        color: var(--sv-text-secondary, #6b7280) !important;
    }
}

/* =========================================================
   Premium feed post card (home feed) — same visual language as
   the Instagram-style reels above: rounded media, icon action
   row with persisted fill state, clean "..." menu instead of a
   row of inline Edit/Delete/Report buttons. Text/caption stays
   exactly where it already was in the markup (above the media),
   only the framing around it is upgraded.
   ========================================================= */
.ig-post-card {
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 8px 26px rgba(15, 23, 42, .08);
}
html[data-theme="dark"] .ig-post-card {
    background: var(--sv-surface, #161829);
}

.ig-post-head {
    position: relative;
    padding: 14px 46px 10px 14px;
    min-height: 70px;
    box-sizing: border-box;
}
/* Fixed row height (above) is only reliable if the name/time block
   can never grow taller than one line — otherwise a long name wraps
   to two lines on some posts, the row grows to fit it, and everything
   centered in the row (avatar, follow button) visibly shifts down
   compared to posts with short names. */
.ig-post-head > div {
    min-width: 0;
}
.ig-post-head > div > strong,
.ig-post-head > div > small {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ig-post-avatar {
    width: 42px !important;
    height: 42px !important;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .12);
}
.ig-post-follow {
    border-radius: 999px !important;
}

.ig-post-more {
    position: absolute;
    top: 18px;
    right: 10px;
}
/* Absolute positioning here is what caused the inconsistency: it's
   pinned at a fixed pixel offset from .ig-post-head's own top-left
   corner, completely unaware of where the follow button's flex box
   actually ends — so depending on how much space the avatar/name took
   up on a given post, the two could end up overlapping or far apart.
   For the normal (non-overlay) header, drop it into the flex row
   instead — it becomes just another item after the follow button, so
   there's always exactly one `gap` between them, never more, never
   less, never an overlap. (position:relative — not static — so its own
   dropdown menu below still anchors to it correctly.) */
.ig-post-head:not(.ig-post-head-overlay) .ig-post-more {
    position: relative;
    top: auto;
    right: auto;
    margin-left: auto;
    flex: 0 0 auto;
}
.ig-post-more summary {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--sv-text-secondary, #6b7280);
    cursor: pointer;
    list-style: none;
}
.ig-post-more summary:hover { background: rgba(37, 99, 235, .08); }
.ig-post-more summary::-webkit-details-marker { display: none; }
.ig-post-more-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 190px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .2);
    z-index: 20;
}
html[data-theme="dark"] .ig-post-more-menu { background: var(--sv-surface, #161829); }
.ig-post-more-menu > form > button,
.ig-post-more-menu > details > summary {
    width: 100%;
    min-height: 42px;
    padding: 10px 14px;
    border: 0;
    background: none;
    color: var(--sv-text-primary, #14162b);
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    list-style: none;
}
.ig-post-more-menu .danger-text { color: #b42318; }
.ig-post-more-menu details[open] summary { border-bottom: 1px solid var(--line, #eef0f3); }
.ig-post-more-menu details > form { padding: 10px 14px 14px; display: grid; gap: 8px; }

.ig-post-caption {
    padding: 0 14px 8px;
    margin: 0;
}

.ig-post-media {
    margin: 0 0 2px;
    background: #0f172a;
    overflow: hidden;
}
.ig-post-media .post-media,
.ig-post-media .post-audio {
    border-radius: 0;
}

.ig-post-stats {
    display: flex;
    gap: 14px;
    padding: 10px 14px 2px;
    font-size: 13px;
    color: var(--sv-text-secondary, #6b7280);
}

.ig-feed-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 6px 16px 10px;
}
.ig-feed-actions svg {
    width: 24px !important;
    height: 24px !important;
}
.ig-feed-icon-btn {
    position: relative;
}
/* The comment icon is a <button> directly carrying this class (no
   wrapping form/div like like/share/save have), so it needs the
   "button.ig-feed-icon-btn" variant too — otherwise it falls back to
   the browser's default button chrome (a plain white/grey box). */
.ig-feed-icon-btn button,
button.ig-feed-icon-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 6px 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--sv-text-primary, #14162b);
    cursor: pointer;
}
.ig-feed-icon-btn button:hover,
button.ig-feed-icon-btn:hover { background: rgba(37, 99, 235, .07); }
.ig-feed-icon-btn button span,
button.ig-feed-icon-btn span {
    font-size: 13px;
    font-weight: 700;
}
.ig-feed-icon-btn[data-like-form].is-done button svg {
    fill: #ff3040;
    stroke: #ff3040;
}
.ig-feed-icon-btn[data-like-form].is-done button span {
    color: #ff3040;
}
.ig-feed-comment.is-done button svg,
.ig-feed-share.is-done button svg {
    fill: var(--sv-blue, #2563eb);
    stroke: var(--sv-blue, #2563eb);
}
.ig-feed-save {
    margin-left: 0;
}
.ig-feed-save.is-done button svg {
    fill: var(--sv-text-primary, #14162b);
    stroke: var(--sv-text-primary, #14162b);
}

/* =========================================================
   Premium full-screen story viewer.
   ========================================================= */
.ig-story-viewer {
    display: flex;
    justify-content: center;
    padding: 12px;
}
.ig-story-viewer-card {
    width: 100%;
    max-width: 420px;
}
.ig-story-media {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    max-height: 82vh;
    background: #000;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 14px 40px rgba(15, 23, 42, .25);
}
.ig-story-media video,
.ig-story-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
    display: block;
}
.ig-story-progress-group {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    z-index: 5;
    display: flex;
    gap: 4px;
}
.ig-story-progress-track {
    flex: 1 1 0;
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .35);
    overflow: hidden;
}
.ig-story-progress-track.is-complete .ig-story-progress-fill {
    width: 100%;
}
.ig-story-progress-fill {
    width: 0%;
    height: 100%;
    background: #fff;
}
.ig-story-nav {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 32%;
    z-index: 2;
}
.ig-story-nav-prev { left: 0; }
.ig-story-nav-next { right: 0; }
.ig-story-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 14px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .65), rgba(0, 0, 0, 0));
}
.ig-story-author {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
    min-width: 0;
}
.ig-story-avatar {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sv-blue, #2563eb), var(--sv-purple, #7c3aed));
    background-size: cover;
    background-position: center;
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    border: 1.5px solid rgba(255, 255, 255, .85);
}
.ig-story-author strong {
    display: block;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ig-story-author small { color: rgba(255, 255, 255, .8); font-size: 11.5px; }
.ig-story-top-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ig-story-delete-form button,
.ig-story-close {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .38);
    color: #fff;
    cursor: pointer;
    text-decoration: none;
}
.ig-story-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    margin: 0;
    padding: 26px 14px 14px;
    background: linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0));
    color: #fff;
    font-size: 13.5px;
}
.ig-story-info {
    padding: 12px 4px 0;
}
.ig-story-meta {
    display: block;
    color: var(--sv-text-secondary, #6b7280);
    margin-bottom: 8px;
}
.ig-story-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ig-story-reactions form button {
    border: 1px solid var(--line, #e5e7eb);
    border-radius: 999px;
    padding: 7px 14px;
    background: #fff;
    font-weight: 700;
    cursor: pointer;
}
.story-seen-list {
    margin-top: 12px;
}

/* =========================================================
   Immersive feed post (image/video posts): header + action
   rail overlaid on the media itself, exactly like reels, so
   the media can be edge-to-edge without extra header/footer
   bars eating vertical space.
   ========================================================= */
.ig-post-media-wrap {
    position: relative;
}
.ig-post-immersive .ig-post-media {
    margin: 0;
}

.ig-post-head-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 46px 24px 12px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
    color: #fff;
}
.ig-post-head-overlay .ig-post-avatar {
    border-color: rgba(255, 255, 255, .85);
}
.ig-post-head-overlay strong { color: #fff; }
.ig-post-head-overlay small { color: rgba(255, 255, 255, .78); }
.ig-post-head-overlay .ig-post-follow {
    border: 1px solid rgba(255, 255, 255, .85);
    background: transparent;
    color: #fff;
}
.ig-post-head-overlay .ig-post-follow.is-active {
    background: rgba(255, 255, 255, .18);
}
.ig-post-head-overlay .ig-post-more {
    top: 10px;
}
.ig-post-head-overlay .ig-post-more summary {
    background: rgba(0, 0, 0, .38);
    color: #fff;
}

.ig-feed-actions-rail {
    position: absolute;
    right: 8px;
    bottom: 14px;
    z-index: 4;
    flex-direction: column;
    justify-content: flex-start;
    gap: 12px;
    padding: 0;
    color: #fff;
}
.ig-feed-actions-rail .ig-feed-icon-btn button,
.ig-feed-actions-rail button.ig-feed-icon-btn {
    flex-direction: column;
    gap: 3px;
    color: #fff;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55));
}
.ig-feed-actions-rail .ig-feed-icon-btn button:hover,
.ig-feed-actions-rail button.ig-feed-icon-btn:hover { background: transparent; }
.ig-feed-actions-rail .ig-feed-icon-btn button span,
.ig-feed-actions-rail button.ig-feed-icon-btn span {
    font-size: 11.5px;
}
.ig-feed-actions-rail .share-options {
    position: absolute !important;
    top: auto !important;
    bottom: calc(100% + 10px) !important;
    right: -6px !important;
    left: auto !important;
}
.ig-post-immersive .ig-post-caption {
    padding-top: 10px;
}

/* Full-width, all-corners-curved media/card — bleeds close to
   the true viewport edge independent of whatever ambient
   padding the surrounding containers have (that padding has
   been fought over by a dozen legacy stylesheets; this sidesteps
   the guesswork entirely). A few px are kept so the border-radius
   still reads as a curve instead of being clipped square. */
@media (max-width: 900px) {
    .ig-post-card,
    .ig-reel-card {
        width: calc(100vw - 8px) !important;
        max-width: calc(100vw - 8px) !important;
        margin-left: calc(50% - 50vw + 4px) !important;
        margin-right: calc(50% - 50vw + 4px) !important;
        border-radius: 14px !important;
    }
    .ig-reel-media,
    .ig-post-media,
    .ig-post-media-wrap {
        width: 100% !important;
        max-width: none !important;
    }
    .ig-reel-media { border-radius: 14px !important; }
    .ig-post-media img.post-media,
    .ig-post-media video.post-media {
        width: 100% !important;
        max-width: none !important;
    }
}

/* The old 6-reaction-type row (Like/Love/Wow/Support/Clap/Fire) is
   superseded by the single Like icon in .ig-feed-actions. Legacy CSS
   only hid it below 760px, but our card/media treatment now runs up
   to 900px — in that gap the old row and the new icon row rendered
   stacked on top of each other. Hide it everywhere, unconditionally. */
.ig-post-card .reaction-row {
    display: none !important;
}

/* =========================================================
   Upload previews (post composer / reel upload / story) and
   the story trim slider.
   ========================================================= */
.media-upload-preview:empty { display: none; }
.media-upload-preview {
    margin: 8px 0;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    max-height: 420px;
    display: flex;
    justify-content: center;
}
.media-upload-preview img,
.media-upload-preview video {
    max-width: 100%;
    max-height: 420px;
    display: block;
}

.story-trim-controls {
    display: grid;
    gap: 6px;
    margin: 8px 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--sv-bg, #f8fafc);
    border: 1px solid var(--line, #e5e7eb);
}
.story-trim-controls[hidden] {
    display: none;
}
.story-trim-controls small {
    color: var(--sv-text-secondary, #6b7280);
    font-size: 12px;
    font-weight: 700;
}
.story-trim-controls input[type="range"] {
    width: 100%;
}

.emoji-picker-wrap {
    position: relative;
    display: inline-block;
    margin: 4px 0;
}
.emoji-picker-toggle {
    width: 34px;
    height: 34px;
    border: 1px solid var(--line, #e5e7eb);
    border-radius: 50%;
    background: #fff;
    font-size: 16px;
    cursor: pointer;
}
.emoji-picker-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2px;
    width: 260px;
    max-height: 260px;
    overflow-y: auto;
    padding: 8px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--line, #e5e7eb);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
}
.emoji-picker-panel[hidden] {
    display: none;
}
.emoji-picker-category {
    grid-column: 1 / -1;
    margin: 6px 0 0;
    padding: 4px 2px 2px;
    font-size: 11px;
    font-weight: 800;
    color: var(--sv-text-secondary, #6b7280);
    text-transform: uppercase;
    letter-spacing: .03em;
    border-top: 1px solid var(--line, #eef0f3);
}
.emoji-picker-category:first-child {
    margin-top: 0;
    border-top: 0;
}
.emoji-picker-panel button {
    border: 0;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    padding: 6px;
    border-radius: 8px;
    cursor: pointer;
}
.emoji-picker-panel button:hover {
    background: rgba(37, 99, 235, .08);
}

.sv-story-card {
    position: relative;
}
.story-count-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--sv-blue, #2563eb), var(--sv-purple, #7c3aed));
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}

/* Keep the top nav pinned to the viewport while scrolling posts/reels/
   video — sticky still depended on this element's scroll container
   being exactly the page, which some legacy layout rule kept breaking.
   position:fixed has no such dependency: it's always relative to the
   viewport, full stop, same as the (already-fixed) bottom nav. Only the
   content area should scroll, so main.shell.app-shell gets a top
   padding to make room for the now-out-of-flow nav (app.js sets the
   exact pixel value; this is just a safe fallback). */
@media (max-width: 999px) {
    nav.topbar.auth-topbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 500 !important;
    }
    main.shell.app-shell {
        padding-top: 60px !important; /* fallback only — app.js sets the real total (topbar + tabs) height inline */
    }
    /* Fixed (not sticky) for the same reason as the top nav above —
       one less thing for legacy layout rules to break. Flexbox instead
       of the legacy CSS-grid version: a handful of conflicting grid-
       column rules elsewhere were fighting over this row's column
       sizing, and depending on which one won, tabs could compress into
       each other instead of scrolling. flex:0 0 auto on each tab makes
       that impossible — a tab can never shrink below its own content,
       so once six of them don't fit, the row scrolls instead of the
       tabs overlapping. */
    .mobile-feed-tabs {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: 54px; /* fallback only — app.js sets the real topbar height inline */
        z-index: 60 !important;
        margin: 0 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }
    /* Shorter tabs — the previous 72px-tall row ate too much vertical
       space on a screen that's already fixed/pinned. */
    .mobile-feed-tabs a {
        flex: 0 0 auto !important;
        min-width: 62px !important;
        min-height: 50px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        grid-template-rows: unset !important;
        gap: 2px !important;
        padding: 0 8px 6px !important;
    }
    /* Do NOT resize .tab-icon's own width/height — each tab's icon is
       drawn with ::before/::after pseudo-elements at hardcoded pixel
       offsets calibrated for a 26x26 box (see 20-feed.css). Shrinking
       the box without touching those offsets let the pseudo-element
       shapes spill outside it and overlap the label/neighboring tabs.
       Scaling the whole box as a unit keeps their relative layout
       intact; the negative margin claws back the visual space saved. */
    .mobile-feed-tabs .tab-icon {
        transform: scale(.78);
        margin: -3px 0 -5px;
    }
    .mobile-feed-tabs a span {
        font-size: 18px !important;
    }
}

/* Sponsored card interleaved between reels */
.ig-reel-ad-card .ig-reel-media img,
.ig-reel-ad-card .ig-reel-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ig-reel-ad-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 4;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.ig-reel-ad-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    padding: 30px 16px 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0));
    color: #fff;
}
.ig-reel-ad-info strong {
    display: block;
    font-size: 16px;
}
.ig-reel-ad-info p {
    margin: 4px 0 12px;
    font-size: 13.5px;
    color: rgba(255, 255, 255, .85);
}
.ig-reel-ad-cta {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 999px;
    background: #fff;
    color: #14162b;
    font-weight: 800;
    font-size: 13.5px;
    text-decoration: none;
}

/* Smaller, plainer follow button on posts — the bold blue/purple
   gradient pill was too loud sitting next to a name. */
.feed-follow-btn {
    /* Fixed width (not just padding) so "Follow" and "Following ✓" take
       up the exact same footprint — otherwise the gap to the "..." menu
       next to it shrinks or grows depending on which text is showing. */
    width: 78px !important;
    height: 22px !important;
    min-height: 0 !important;
    max-height: 22px !important;
    line-height: 1 !important;
    padding: 0 !important;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    font-size: 10px !important;
    font-weight: 700 !important;
    background: transparent !important;
    border: 1px solid var(--sv-blue, #2563eb) !important;
    color: var(--sv-blue, #2563eb) !important;
    box-shadow: none !important;
}
.feed-follow-btn span {
    font-size: inherit !important;
    line-height: 1 !important;
}
.ig-post-head:not(.ig-post-head-overlay) .post-follow-form {
    align-self: center;
    line-height: 0;
}
.feed-follow-btn.is-active {
    border-color: var(--line, #d0d5dd) !important;
    color: var(--sv-text-secondary, #6b7280) !important;
    background: transparent !important;
}
.ig-post-head-overlay .feed-follow-btn {
    border-color: rgba(255, 255, 255, .85) !important;
    color: #fff !important;
}
.ig-post-head-overlay .feed-follow-btn.is-active {
    border-color: rgba(255, 255, 255, .5) !important;
    color: rgba(255, 255, 255, .8) !important;
}

/* Tighten the top nav's right-side icon cluster so there's no dead
   space between the icons and the screen edge. */
@media (max-width: 999px) {
    nav.topbar.auth-topbar .topbar-right {
        gap: 4px !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        padding-right: 0 !important;
    }
    nav.topbar.auth-topbar {
        padding-right: 8px !important;
    }
    nav.topbar.auth-topbar .topbar-right .round-action {
        width: 34px !important;
        height: 34px !important;
    }
}

/* Chat list rows: name and status/preview text should share the same
   font family (only size/weight should differ) instead of picking up
   the browser's mismatched defaults for <strong>/<small>/<em>. */
.chat-person-row strong,
.chat-person-row small {
    font-family: var(--sv-font, inherit);
}
.chat-person-row strong {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--sv-text-primary, #14162b);
}
.chat-person-row small {
    font-size: 12.5px;
    font-weight: 500;
    font-style: normal;
    color: var(--sv-text-secondary, #6b7280);
}