/*
 ============================================================================
 IMMUTABLE STICKY RULES - DO NOT ALTER OR REMOVE WITHOUT EXPLICIT APPROVAL
 ============================================================================
 1. DESKTOP CENTERED PLAYER: @media (min-width: 768px) .reel-viewer-phone and
    .reel-viewer-inner MUST maintain flex centering + overflow: visible.
 2. ACTION RAIL VISIBILITY: .reel-actions (right: -85px) MUST stay 100% visible
    on desktop. .reel-viewer-video keeps overflow: hidden; border-radius: 12px.
 3. DESKTOP ACTION ICONS: .reel-action button MUST use 44px x 44px circular shape
    with 26px icons (fill: none !important; stroke-width: 2 !important;).
 4. POPOVER SHEETS: .reel-more-sheet and .reel-library-sheet MUST pop up inside
    video container (right: 15px / left: 20px), never off-screen to the far left.
 5. MODALS TOPMOST LAYER: #checkout-center and #login-dialog MUST maintain
    z-index: 10000000 !important.
 ============================================================================
*/
.reels-page {
    min-height: 100vh;
}

/*
    Less the bottom nav on a phone.

    A full viewport of minimum height means the page is exactly as tall as the window, and
    the nav floats over its last 56px -- so the final row of reels sat behind it. The body's
    own clearance cannot help while an element inside insists on the full height.

    Only below the breakpoint where the nav is rendered.
*/
@media (max-width: 767.98px) {
    .reels-page {
        min-height: calc(100vh - 56px - env(safe-area-inset-bottom, 0px));
    }
}

/* HIGH Z-INDEX FOR SHARE MODAL & TOAST NOTIFICATIONS ON REELS PAGE */
#post-share-modal {
    z-index: 10000000 !important;
}
#post-share-modal .modal-dialog {
    z-index: 10000001 !important;
}
#toast-container,
.toast-container,
#toasts-container,
.toasts-container,
.toast-element,
.toast-notification,
.toast,
.toast-wrapper,
.jq-toast-wrap {
    z-index: 20000000 !important;
}

.reels-topbar {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 1rem;
}

.reels-feed {
    padding: 1rem;
}

.reels-empty-state {
    align-items: center;
    color: rgba(73, 80, 87, .78);
    display: flex;
    flex-direction: column;
    gap: .6rem;
    justify-content: center;
    min-height: 18rem;
    text-align: center;
    width: 100%;
}

.reels-unavailable-state {
    align-items: center;
    color: rgba(73, 80, 87, .78);
    display: flex;
    flex-direction: column;
    gap: .6rem;
    justify-content: center;
    min-height: 18rem;
    text-align: center;
    width: 100%;
}

.reels-empty-state ion-icon,
.reels-unavailable-state ion-icon {
    color: rgba(73, 80, 87, .42);
    font-size: 2.35rem;
}

.reels-empty-state h6,
.reels-empty-state p,
.reels-unavailable-state h6,
.reels-unavailable-state p {
    margin-bottom: 0;
}

.reels-empty-state p,
.reels-unavailable-state p {
    max-width: 22rem;
}

/* The reel-grid SKELETON shares the exact same column rule as the real grid, so on ANY device
   it shows the same number of cards per row as real reels do (no separate breakpoints to keep
   in sync). */
.reels-grid,
.fx-reel-grid-skeletons {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
/* Skeleton-only: clip to a SINGLE row (extra cards collapse into zero-height rows), so the
   loading state shows exactly one row of reels regardless of how many were rendered. */
.fx-reel-grid-skeletons {
    align-content: start;
    grid-template-rows: auto;
    grid-auto-rows: 0;
    overflow: hidden;
}

.reel-grid-card {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    min-width: 0;
    padding: 0;
    text-align: left;
}

.reel-grid-media {
    aspect-ratio: 9 / 16;
    background: #050505;
    border-radius: 8px;
    display: block;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.reel-grid-media img,
.reel-grid-preview {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

/* Non-portrait reels (set by renderGridCard from the reel's dims): contain inside the
   9:16 grid cell so a 4:5/1:1/landscape reel isn't badly cropped (letterboxed instead). */
.reel-grid-media.reel-grid-contain img,
.reel-grid-media.reel-grid-contain .reel-grid-preview {
    object-fit: contain;
}

.reel-grid-media img {
    transition: opacity .18s ease, transform .18s ease;
}

.reel-grid-preview {
    bottom: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    transition: opacity .16s ease;
}

.reel-grid-card.is-previewing .reel-grid-preview {
    opacity: 1;
}

.reel-grid-card.is-previewing .reel-grid-poster {
    opacity: 0;
}

.reel-grid-card:hover .reel-grid-media img,
.reel-grid-card:focus .reel-grid-media img {
    transform: scale(1.035);
}

.reel-grid-placeholder {
    align-items: center;
    background: #060606;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    height: 100%;
    justify-content: center;
    width: 100%;
}

.reel-grid-placeholder ion-icon {
    font-size: 1.9rem;
    opacity: .84;
}

.reel-grid-placeholder span {
    color: rgba(255, 255, 255, .66);
    font-size: .72rem;
    font-weight: 700;
}

.reel-grid-gradient {
    background: linear-gradient(180deg, transparent 52%, rgba(0, 0, 0, .72) 100%);
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.reel-grid-stats {
    align-items: center;
    bottom: .55rem;
    color: #fff;
    display: inline-flex;
    font-size: .85rem;
    font-weight: 600;
    gap: .65rem;
    left: .55rem;
    position: absolute;
    text-shadow: 0 1px 5px rgba(0, 0, 0, .7);
}

.reel-grid-stats span {
    align-items: center;
    display: inline-flex;
    gap: .2rem;
}

.reel-grid-meta {
    align-items: center;
    display: flex;
    gap: .45rem;
    min-width: 0;
    padding-top: .55rem;
}

.reel-grid-avatar img {
    border-radius: 50%;
    height: 1.35rem;
    object-fit: cover;
    width: 1.35rem;
}

.reel-grid-title {
    align-items: center;
    display: inline-flex;
    font-size: .86rem;
    font-weight: 600;
    gap: .12rem;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.reel-grid-username {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reel-grid-title .reel-verified {
    flex: 0 0 auto;
}

.reel-grid-title .reel-grid-verified .ion-icon-wrapper,
.reel-grid-title .reel-grid-verified svg {
    color: currentColor !important;
}

.feed-reels-widget {
    background: #fff;
    padding: .95rem 0 1rem !important;
    width: 100% !important;
}

.feed-reels-widget.is-theme-dark {
    background: transparent;
}

.feed-reels-widget-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: .8rem;
    padding: 0 15px !important;
}

.feed-reels-widget .swiper-wrapper::before {
    content: "";
    flex: 0 0 15px;
    width: 15px;
    flex-shrink: 0;
    display: block;
}

.feed-reels-widget .swiper-wrapper::after {
    content: "";
    flex: 0 0 15px;
    width: 15px;
    flex-shrink: 0;
    display: block;
}

.feed-reels-widget-header h6 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0;
}

.feed-reels-widget-actions {
    align-items: center;
    display: inline-flex;
    gap: .35rem;
}

.feed-reels-widget-actions a {
    font-size: .83rem;
    font-weight: 700;
}

.feed-reels-scroll {
    align-items: center;
    background: rgba(73, 80, 87, .08);
    border: 0;
    border-radius: 50%;
    color: rgba(73, 80, 87, .76);
    display: inline-flex;
    height: 1.8rem;
    justify-content: center;
    margin-bottom: 0;
    padding: 0;
    width: 1.8rem;
}

.feed-reels-scroll:hover,
.feed-reels-scroll:focus {
    background: rgba(73, 80, 87, .13);
    color: rgba(73, 80, 87, .95);
}

.feed-reels-widget.is-theme-dark .feed-reels-scroll {
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .72);
}

.feed-reels-widget.is-theme-dark .feed-reels-scroll:hover,
.feed-reels-widget.is-theme-dark .feed-reels-scroll:focus {
    background: rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .95);
}

.feed-reels-scroll ion-icon {
    font-size: 1.05rem;
}

.feed-reels-track {
    overflow: hidden;
    overscroll-behavior-inline: contain;
    padding-bottom: .15rem;
    scrollbar-width: none;
}

/* Server-rendered first strip: scroll natively (like the Exclusive For You strip) so the
   reels are usable the instant the HTML paints, with no dependency on Swiper/JS. */
/* NOTE: this element also has Swiper's .swiper-container base CSS (overflow:hidden +
   touch-action:pan-y), which blocks horizontal scroll. Override both with !important so
   the native scroll works on BOTH desktop (trackpad/drag/scrollbar) and mobile touch. */
.feed-reels-track.is-native-scroll {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y !important;
}
.feed-reels-track.is-native-scroll .swiper-wrapper {
    transform: none !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    width: max-content !important;    /* grow past the container so it can scroll */
    /* Swiper isn't running in native mode, so the gap between cards must come from CSS. */
    gap: 12px;
    /* 12px LEFT lead-in via padding. The RIGHT lead-in is a margin on the last card
       instead of wrapper padding, because an overflow scroller clips trailing padding at
       the scroll end (so a right padding wouldn't actually show). */
    padding-left: 12px;
    padding-right: 0;
    box-sizing: content-box;
    touch-action: pan-x pan-y !important;
}
/* Cards keep their width (never shrink) so the row overflows and scrolls. */
.feed-reels-track.is-native-scroll .feed-reel-slide.swiper-slide {
    flex: 0 0 auto;
}
/* Right lead-in that survives to the scroll end: 12px after the last card. */
.feed-reels-track.is-native-scroll .swiper-wrapper > .feed-reel-slide:last-child {
    margin-right: 12px;
}
/* Cancel the OLD widget ::before/::after 15px spacer in native-scroll mode — otherwise
   the left edge = padding(12) + spacer(15) + gap(12). The wrapper padding above is the
   only edge lead-in now, so edges match the 12px inter-card gap. */
.feed-reels-track.is-native-scroll .swiper-wrapper::before,
.feed-reels-track.is-native-scroll .swiper-wrapper::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    flex: 0 0 0 !important;
}
.feed-reels-track.is-native-scroll::-webkit-scrollbar { display: none; }

.feed-reels-track .swiper-wrapper {
    align-items: flex-start;
}

.feed-reels-track .feed-reel-slide.swiper-slide {
    flex: 0 0 8.7rem;
    width: 8.7rem;
}

/* Mobile: ~1.5 reel cards per screen (Facebook-style) — 1 full + next half.
   The media keeps its 9/16 aspect-ratio so height scales with the width. */
@media (max-width: 767.98px) {
    .feed-reels-track .feed-reel-slide.swiper-slide {
        flex: 0 0 62vw;
        width: 62vw;
    }
}

.feed-reels-track::-webkit-scrollbar {
    display: none;
}

.feed-reel-card,
.feed-reel-create-card {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: block;
    min-width: 0;
    padding: 0;
    text-align: left;
    width: 100%;
}

.feed-reel-create-card:hover,
.feed-reel-create-card:focus {
    color: inherit;
    text-decoration: none;
}

.feed-reel-media {
    aspect-ratio: 9 / 16;
    background: #050505;
    border-radius: 8px;
    display: block;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.feed-reel-poster,
.feed-reel-preview {
    height: 100%;
    width: 100%;
    /* Default: show the whole frame (contain). Only near-portrait 9:16 reels get
       .is-portrait-reel (set in JS from the real media ratio) and fill (cover). */
    object-fit: contain;
    background: #000;
}
.feed-reel-slide.is-portrait-reel .feed-reel-poster,
.feed-reel-slide.is-portrait-reel .feed-reel-preview,
.feed-reel-card.is-portrait-reel .feed-reel-poster,
.feed-reel-card.is-portrait-reel .feed-reel-preview {
    object-fit: cover;
}

.feed-reel-poster {
    transition: opacity .18s ease, transform .18s ease;
}

.feed-reel-preview {
    bottom: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    transition: opacity .16s ease;
}

.feed-reel-card.is-previewing .feed-reel-preview {
    opacity: 1;
}

/* No cover image -> the preview video (loaded to its first frame) IS the thumbnail, so
   keep it visible instead of a black box. */
.feed-reel-card:not(:has(.feed-reel-poster)) .feed-reel-preview {
    opacity: 1;
}

.feed-reel-card.is-previewing .feed-reel-poster {
    opacity: 0;
}

.feed-reel-card:hover .feed-reel-poster,
.feed-reel-card:focus .feed-reel-poster {
    transform: scale(1.035);
}

/* Locked reel card: blur the real cover into a teaser (Fansly-style) so the viewer
   sees the media hinted-at behind the lock + unlock CTA, instead of a blank card.
   The video URL is withheld server-side, so only this blurred still is exposed. */
.feed-reel-slide.is-locked .feed-reel-poster {
    filter: blur(12px) brightness(.92);
    transform: scale(1.08);
}
.feed-reel-slide.is-locked:hover .feed-reel-poster,
.feed-reel-slide.is-locked:focus-within .feed-reel-poster {
    transform: scale(1.1);
}

.feed-reel-placeholder {
    align-items: center;
    background: #060606;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    height: 100%;
    justify-content: center;
    width: 100%;
}

.feed-reel-placeholder ion-icon {
    font-size: 1.65rem;
    opacity: .86;
}

.feed-reel-placeholder span {
    color: rgba(255, 255, 255, .68);
    font-size: .68rem;
    font-weight: 700;
}

.feed-reel-gradient {
    background: linear-gradient(180deg, transparent 48%, rgba(0, 0, 0, .74) 100%);
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.feed-reel-stats {
    align-items: center;
    bottom: .48rem;
    color: #fff;
    display: inline-flex;
    font-size: .78rem;
    font-weight: 700;
    gap: .58rem;
    left: .48rem;
    position: absolute;
    text-shadow: 0 1px 5px rgba(0, 0, 0, .72);
}

.feed-reel-stats span {
    align-items: center;
    display: inline-flex;
    gap: .18rem;
}

.feed-reel-meta {
    align-items: center;
    display: flex;
    gap: .4rem;
    min-width: 0;
    padding-top: .52rem;
}

.feed-reel-avatar img {
    border-radius: 50%;
    height: 1.28rem;
    object-fit: cover;
    width: 1.28rem;
}

.feed-reel-title {
    align-items: center;
    display: inline-flex;
    font-size: .82rem;
    font-weight: 600;
    gap: .12rem;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.feed-reel-title span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.feed-reel-title .reel-verified {
    flex: 0 0 auto;
}

.feed-reel-title .feed-reel-verified .ion-icon-wrapper,
.feed-reel-title .feed-reel-verified svg {
    color: currentColor !important;
}

.feed-reel-create-media {
    align-items: center;
    aspect-ratio: 9 / 16;
    background: rgba(73, 80, 87, .06);
    border: 1px dashed rgba(73, 80, 87, .28);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    overflow: hidden;
    position: relative;
    transition: background .16s ease, border-color .16s ease, transform .18s ease;
    width: 100%;
}

.feed-reel-create-card:hover .feed-reel-create-media,
.feed-reel-create-card:focus .feed-reel-create-media {
    background: rgba(255, 255, 255, .08);
    border-color: currentColor;
}

.feed-reel-create-icon {
    align-items: center;
    background: currentColor;
    border-radius: 50%;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
    color: inherit;
    display: flex;
    height: 2.45rem;
    justify-content: center;
    transition: transform .18s ease;
    width: 2.45rem;
}

.feed-reel-create-card:hover .feed-reel-create-icon,
.feed-reel-create-card:focus .feed-reel-create-icon {
    transform: scale(1.08);
}

.feed-reel-create-icon ion-icon {
    color: #fff;
    font-size: 1.42rem;
}

.feed-reel-create-title {
    display: block;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.2;
    overflow: hidden;
    padding-top: .52rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.feed-reel-skeleton {
    aspect-ratio: 9 / 16;
    background: linear-gradient(90deg, rgba(128, 128, 128, .12), rgba(128, 128, 128, .22), rgba(128, 128, 128, .12));
    background-size: 220% 100%;
    border-radius: 8px;
    min-height: 13rem;
    animation: feedReelSkeleton 1.15s ease-in-out infinite;
}

.feed-reels-track .feed-reel-skeleton.feed-reel-slide.swiper-slide {
    flex: 0 0 8.7rem;
    width: 8.7rem;
}

/* Mobile: skeleton matches the real reel slide width (62vw) so there's no size jump
   when the reels load. */
@media (max-width: 767.98px) {
    .feed-reels-track .feed-reel-skeleton.feed-reel-slide.swiper-slide {
        flex: 0 0 62vw;
        width: 62vw;
    }
}

@keyframes feedReelSkeleton {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: -100% 0;
    }
}

.reels-grid-loader {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 4rem;
    width: 100%;
}
/* The "load more" skeleton inside the loader must span the FULL width so it shows a whole row
   of reels (desktop: as many as fit; mobile: 2), not a single centered card. */
.reels-grid-loader .fx-reel-grid-skeletons {
    width: 100%;
}

html.reel-viewer-open,
body.reel-viewer-open {
    max-width: 100%;
    overscroll-behavior: none;
    overflow: hidden !important;
    overflow-x: hidden !important;
    width: 100%;
}

.reel-viewer {
    align-items: center;
    background: #000;
    bottom: 0;
    color: #fff;
    display: flex;
    justify-content: center;
    left: 0;
    max-width: 100%;
    overflow: hidden;
    padding: 1.25rem;
    position: fixed;
    right: 0;
    touch-action: pan-y;
    top: 0;
    width: 100%;
    z-index: 2050;
}

body.reel-viewer-open.modal-open .modal-backdrop {
    z-index: 2060;
}

#reel-delete-dialog,
#reel-comment-delete-dialog {
    z-index: 2100;   /* above the reel viewer backdrop (2090) so it's clickable */
}

.reel-viewer-inner {
    align-items: stretch;
    display: flex;
    gap: 1.25rem;
    height: min(92vh, 960px);
    justify-content: center;
    max-width: min(1180px, 100vw - 7rem);
    width: 100%;
}

.reel-viewer-phone {
    aspect-ratio: 9 / 16;   /* fixed 9:16 frame — never changes vertically */
    background: #18191a;   /* app dark — landscape letterbox bars use this, not pure black */
    border-radius: 8px;
    height: 100%;
    max-width: calc((92vh - 2.5rem) * .5625);
    overflow: hidden;
    position: relative;
}

.reel-swipe-stage,
.reel-swipe-preview {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.reel-swipe-stage {
    z-index: 2;
}

.reel-swipe-stage::after {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, transparent 18%),
        linear-gradient(180deg, transparent 48%, rgba(0, 0, 0, .76) 100%);
    bottom: 0;
    content: "";
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

.reel-swipe-preview {
    align-items: center;
    background: #050505;
    color: #fff;
    display: flex;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
}

.reel-swipe-preview-prev {
    transform: translate3d(0, -100%, 0);
}

.reel-swipe-preview-next {
    transform: translate3d(0, 100%, 0);
}

/* swipe preview: ALWAYS contain, same as the player (no crop, no flicker) */
.reel-swipe-preview img,
.reel-swipe-preview-video {
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.reel-swipe-preview-placeholder {
    align-items: center;
    color: rgba(255, 255, 255, .68);
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.reel-swipe-preview-placeholder ion-icon {
    font-size: 2rem;
}

.reel-swipe-preview-placeholder span {
    font-size: .78rem;
    font-weight: 700;
}

.reel-viewer-phone.is-swipe-resetting .reel-swipe-stage,
.reel-viewer-phone.is-swipe-resetting .reel-swipe-preview,
.reel-viewer-phone.is-swipe-committing .reel-swipe-stage,
.reel-viewer-phone.is-swipe-committing .reel-swipe-preview {
    transition: transform .16s ease-out;
}

.reel-viewer-phone::after {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, transparent 18%),
        linear-gradient(180deg, transparent 48%, rgba(0, 0, 0, .76) 100%);
    bottom: 0;
    content: "";
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

/* ALWAYS contain (Facebook style): the whole video is shown, never cropped.
   Portrait/1:1 fill the 9:16 frame; landscape gets black letterbox bars. One
   rule, no JS ratio detection -> no cover<->contain flicker/conflict. */
.reel-viewer-video {
    cursor: pointer;
    height: 100%;
    object-fit: contain;
    width: 100%;
}

/* Native browser fullscreen: video shows its true ratio, black background */
:fullscreen .reel-viewer-video,
:-webkit-full-screen .reel-viewer-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: #000;
}
:fullscreen .reel-viewer-phone,
:-webkit-full-screen .reel-viewer-phone,
:fullscreen .reel-viewer-inner,
:-webkit-full-screen .reel-viewer-inner {
    max-width: none !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    background: #000 !important;
}
:fullscreen.reel-viewer,
:-webkit-full-screen.reel-viewer {
    background: #000 !important;
    padding: 0 !important;
}

/* ===== Native-fullscreen (rotated landscape) chrome =====
   Default: only the back arrow. On tap/pause: avatar+love+comment+save+share
   appear at the bottom. Everything else hidden. */
.reel-viewer-phone.is-fullscreen .reel-top-right,
.reel-viewer-phone.is-fullscreen .reel-bottom-bar,
.reel-viewer-phone.is-fullscreen .reel-overlay-text,
.reel-viewer-phone.is-fullscreen .reel-fullscreen-pill {
    display: none !important;
}
/* Center play/pause + 5s seek controls STILL work in fullscreen (show on tap/pause) */
.reel-viewer-phone.is-fullscreen .reel-center-controls {
    display: flex !important;
}
/* back arrow always visible, top-left */
.reel-viewer-phone.is-fullscreen .reel-top-bar {
    opacity: 1 !important;
    pointer-events: auto !important;
}
/* Fullscreen actions = a dedicated BOTTOM row. Pre-laid-out at the bottom so it
   NEVER flashes at the vertical (right) position. Toggled with display (no flicker). */
.reel-viewer-phone.is-fullscreen .reel-actions {
    display: none !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 1.4rem !important;
    top: auto !important;
    width: 100% !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2rem !important;
    transform: none !important;
    padding: .6rem 1rem !important;
    background: linear-gradient(transparent, rgba(0, 0, 0, .55)) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
.reel-viewer-phone.is-fullscreen.controls-visible .reel-actions,
.reel-viewer-phone.is-fullscreen.is-paused .reel-actions {
    display: flex !important;
}
/* neat spacing for each action in the fullscreen bottom row */
.reel-viewer-phone.is-fullscreen .reel-actions .reel-action,
.reel-viewer-phone.is-fullscreen .reel-actions .reel-author-avatar {
    margin: 0 !important;
}

/* Instagram-style "Full-screen" pill — standalone, centered just under the video.
   Hidden by default; shown only on mobile for landscape videos. */
.reel-fullscreen-pill {
    display: none;
    position: absolute;
    left: 50%;
    top: 60%;                   /* JS overrides `top` to sit just under the video */
    transform: translateX(-50%);
    z-index: 9;
    align-items: center;
    gap: .35rem;
    padding: .35rem .9rem;
    border: none;
    border-radius: 999px;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    pointer-events: auto;
    white-space: nowrap;
}
.reel-fullscreen-pill svg { width: 1rem; height: 1rem; }

/* Locked reels: the lock overlay covers the video, so hide the center 5s/pause/5s
   controls (they looked bad over the lock). */
.reel-viewer-phone:has(.reel-lock-overlay) .reel-center-controls {
    display: none !important;
}

.reel-viewer-progress {
    bottom: 0;
    cursor: default;
    height: 18px;
    left: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    right: 0;
    touch-action: none;
    transition: opacity .12s ease;
    z-index: 4;
}

.reel-viewer-progress.is-scrubbable {
    cursor: pointer;
    pointer-events: auto;
}

.reel-viewer-progress::before {
    background: rgba(255, 255, 255, .22);
    bottom: 0;
    content: "";
    height: 3px;
    left: 0;
    position: absolute;
    right: 0;
    transition: height .14s ease, background .14s ease;
}

.reel-viewer-progress span {
    background: #fff;
    display: block;
    bottom: 0;
    height: 3px;
    left: 0;
    position: absolute;
    transform: scaleX(0);
    transform-origin: left center;
    width: 100%;
}

.reel-viewer-progress span::after {
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, .24);
    content: "";
    height: 10px;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(50%, -50%) scale(.65);
    transition: opacity .14s ease, transform .14s ease;
    width: 10px;
}

.reel-viewer-progress.is-scrubbable:hover::before,
.reel-viewer-progress.is-scrubbing::before {
    background: rgba(255, 255, 255, .34);
    height: 5px;
}

.reel-viewer-progress.is-scrubbable:hover span,
.reel-viewer-progress.is-scrubbing span {
    height: 5px;
}

.reel-viewer-progress.is-scrubbable:hover span::after,
.reel-viewer-progress.is-scrubbing span::after {
    opacity: 1;
    transform: translate(50%, -50%) scale(1);
}

@media (hover: none), (pointer: coarse) {
    .reel-viewer-progress,
    .reel-viewer-progress.is-scrubbable {
        cursor: default;
        pointer-events: none;
    }

    .reel-viewer-progress span::after {
        display: none;
    }
}

html.reel-viewer-touch .reel-viewer-progress,
html.reel-viewer-touch .reel-viewer-progress.is-scrubbable {
    bottom: 1.35rem;
    cursor: default;
    height: 12px;
    left: .95rem;
    opacity: 1;
    pointer-events: none;
    right: .95rem;
    z-index: 8;
}

html.reel-viewer-touch .reel-viewer-progress::before,
html.reel-viewer-touch .reel-viewer-progress span {
    bottom: 4px;
    height: 4px;
}

html.reel-viewer-touch .reel-viewer-progress::before {
    background: rgba(255, 255, 255, .42);
}

html.reel-viewer-touch .reel-viewer-progress span {
    background: rgba(255, 255, 255, .98);
}

html.reel-viewer-touch .reel-viewer-progress span::after {
    display: none;
}

html.reel-viewer-touch .reel-overlay-text {
    bottom: 4.35rem;
}

html.reel-viewer-touch .reel-caption {
    max-height: 4.4rem;
}

.reel-top-controls {
    display: flex;
    gap: .55rem;
    left: .85rem;
    position: absolute;
    top: .85rem;
    z-index: 4;
}

.reel-mobile-close {
    display: none;
}

.reel-play-toggle,
.reel-mute,
.reel-viewer-close,
.reel-comments-close {
    align-items: center;
    background: rgba(18, 18, 18, .46);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    color: #fff;
    display: flex;
    height: 2.25rem;
    justify-content: center;
    padding: 0;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
    width: 2.25rem;
}

.reel-play-toggle:hover,
.reel-play-toggle:focus,
.reel-mute:hover,
.reel-mute:focus,
.reel-viewer-close:hover,
.reel-viewer-close:focus,
.reel-comments-close:hover,
.reel-comments-close:focus {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .24);
    transform: translateY(-1px);
}

.reel-play-toggle ion-icon,
.reel-mute ion-icon,
.reel-viewer-close ion-icon,
.reel-comments-close ion-icon {
    font-size: 1.12rem;
}

/* Custom SVG icons (mute/unmute) — same set as the feed player. */
.reel-mute svg {
    width: 1.2rem;
    height: 1.2rem;
    display: block;
}

.reel-video-loading,
.reel-video-error {
    align-items: center;
    background: rgba(0, 0, 0, .42);
    border-radius: 999px;
    color: #fff;
    display: flex;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
}

.reel-video-loading {
    height: 3.25rem;
    justify-content: center;
    width: 3.25rem;
}
/* Buffering shows just the thumbnail poster (Instagram-style) — hide the spinner
   overlay so it doesn't look bad over the cover image. */
.reel-video-loading {
    display: none !important;
}

.reel-video-error {
    border-radius: 14px;
    flex-direction: column;
    gap: .45rem;
    max-width: 70%;
    padding: 1rem;
    text-align: center;
}

.reel-video-error ion-icon {
    font-size: 1.8rem;
}

.reel-video-error span {
    font-size: .86rem;
    font-weight: 700;
    line-height: 1.25;
}

.reel-viewer-phone.has-video-error .reel-play-toggle {
    display: none !important;
}

.reel-overlay-text {
    bottom: 1.2rem;
    left: 1rem;
    max-width: calc(100% - 5.5rem);
    position: absolute;
    right: 4.5rem;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .65);
    z-index: 2;
}

.reel-user-row {
    align-items: center;
    display: flex;
    gap: .5rem;
    margin-bottom: .5rem;
}

.reel-user-row img {
    border-radius: 50%;
    height: 2rem;
    object-fit: cover;
    width: 2rem;
}

.reel-caption {
    font-size: .92rem;
    line-height: 1.35;
    max-height: 7.5rem;
    overflow: hidden;
    white-space: pre-wrap;
}

.reel-verified {
    display: inline-flex;
    vertical-align: -.12em;
}

.reel-verified .ion-icon-wrapper,
.reel-verified svg {
    display: block;
    height: 1em !important;
    width: 1em !important;
}

.reel-actions {
    bottom: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .48rem;
    position: absolute;
    right: .7rem;
    z-index: 3;
}

.reel-action,
.reel-viewer-nav {
    align-items: center;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #fff;
    display: flex;
    justify-content: center;
}

.reel-action {
    background: transparent;
    border: 0;
    border-radius: 999px;
    flex-direction: column;
    font-size: .68rem;
    font-weight: 700;
    gap: .18rem;
    line-height: 1.1;
    min-height: 0;
    min-width: 2.05rem;
    padding: .08rem 0 .12rem;
    text-shadow: 0 1px 5px rgba(0, 0, 0, .8);
    transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

.reel-action ion-icon {
    background: transparent;
    border-radius: 999px;
    box-sizing: border-box;
    box-shadow: none;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .7));
    font-size: 1.85rem !important;
    height: 2.45rem !important;
    padding: .2rem !important;
    width: 2.45rem !important;
}

.reel-action svg {
    display: block;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .7));
    height: 2.15rem !important;
    margin: .15rem 0 !important;
    width: 2.15rem !important;
}

.reel-action span {
    display: block;
    font-size: .78rem !important;
    font-weight: 700 !important;
    line-height: 1.05;
    min-height: .72rem;
}

.reel-action:hover,
.reel-action:focus {
    background: transparent;
    border-color: transparent;
    transform: translateY(-1px);
}

.reel-action:hover ion-icon,
.reel-action:focus ion-icon {
    background: transparent;
}

.reel-action.is-active {
    background: transparent;
    border-color: transparent;
    color: #fff;
}

.reel-action.is-active ion-icon {
    background: transparent;
}

/* TIP button ($-in-circle) on the action rail — white like the other rail
   icons; keep the stroke white on hover/focus (no pink active state). */
.reel-tip svg {
    stroke: #fff;
    fill: none;
}

.reel-tip:hover svg,
.reel-tip:focus svg {
    stroke: #fff;
}

/* TikTok-style author avatar + follow button above the Like icon */
.reel-author {
    position: relative;
    margin-bottom: .55rem;
}

.reel-author-avatar img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    display: block;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .35);
}

.reel-follow-btn {
    position: absolute;
    left: 50%;
    bottom: -9px;
    transform: translateX(-50%);
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    line-height: 0;
    transition: transform .15s ease;
}

.reel-follow-btn:hover {
    transform: translateX(-50%) scale(1.15);
}

.reel-follow-btn svg {
    display: block;
    width: 22px;
    height: 22px;
    margin: 0;
    filter: none;
}

.reel-action.is-active span {
    color: rgba(255, 255, 255, .9);
}

.reel-action:disabled,
.reel-action.is-busy {
    cursor: default;
    opacity: .68;
}

.reel-mute.is-muted {
    background: rgba(18, 18, 18, .46);
    border-color: rgba(255, 255, 255, .16);
}

.reel-viewer-nav {
    border-radius: 999px;
    height: 2.4rem;
    position: fixed;
    width: 2.4rem;
    z-index: 3;
}

.reel-viewer-close {
    position: fixed;
    right: 1.25rem;
    top: 1.25rem;
    z-index: 3;
}

.reel-viewer-nav {
    right: 4.75rem;
}

.reel-viewer-prev {
    top: calc(50% - 3.25rem);
}

.reel-viewer-next {
    top: calc(50% + .5rem);
}

.reel-viewer-nav ion-icon {
    font-size: 1.26rem;
}

.reel-viewer.is-navigating .reel-viewer-nav {
    opacity: .55;
    pointer-events: none;
}

.reel-viewer-comments {
    background: #111;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    color: #fff;
    display: flex;
    flex: 0 1 360px;
    flex-direction: column;
    min-width: 280px;
    overflow: hidden;
}

.reel-viewer-comments.is-closed {
    display: none;
}

.reel-viewer-comments-header {
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    padding: 1rem;
}

.reel-viewer-comments-header strong {
    flex: 1 1 auto;
}

.reel-comments-count {
    color: rgba(255, 255, 255, .8);
    font-weight: 700;
}

.reel-comments-close {
    flex: 0 0 2.25rem;
}

.reel-comments-list {
    flex: 1 1 auto;
    overscroll-behavior: contain;
    overflow-y: auto;
    padding: .35rem 1rem;
}

.reel-comment-form {
    align-items: stretch;
    border-top: 1px solid rgba(255, 255, 255, .1);
    display: flex;
    gap: .5rem;
    padding: 1rem;
}

.reel-comment-form input,
.reel-comment-form button {
    height: 2.15rem;
}

.reel-comment-form input {
    min-width: 0;
}

.reel-comment-form button {
    align-items: center;
    display: inline-flex;
}

.reel-comment {
    align-items: flex-start;
    display: flex;
    gap: .5rem;
    max-height: 16rem;
    overflow: hidden;
    padding: .65rem 0;
    transition: opacity .18s ease, transform .18s ease, max-height .22s ease, padding .22s ease;
}

.reel-comment img {
    border-radius: 50%;
    height: 2rem;
    object-fit: cover;
    width: 2rem;
}

.reel-comment.is-removing {
    max-height: 0;
    opacity: 0;
    padding-bottom: 0;
    padding-top: 0;
    pointer-events: none;
    transform: translateX(.5rem);
}

.reel-comment-body {
    flex: 1;
    min-width: 0;
}

.reel-comment-author {
    color: rgba(255, 255, 255, .62);
}

.reel-comment-author:hover,
.reel-comment-author:focus {
    color: rgba(255, 255, 255, .86);
}

.reel-comment-message {
    color: rgba(255, 255, 255, .88);
    white-space: pre-wrap;
    word-break: break-word;
}

.reel-comment-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: .35rem;
}

.reel-comment-action {
    align-items: center;
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, .52);
    display: inline-flex;
    font-size: .78rem;
    font-weight: 700;
    gap: .25rem;
    opacity: 1;
    padding: 0;
}

.reel-comment-action:hover,
.reel-comment-action:focus {
    color: rgba(255, 255, 255, .82);
}

.reel-comment-action:disabled,
.reel-comment-action.is-busy {
    cursor: default;
    opacity: .5;
}

.reel-create-panel {
    border: 1px solid rgba(127, 127, 127, .25);
    border-radius: 8px;
    padding: 1rem;
}

/*
    Three layers of padding met on a phone -- the page's, the panel's, and the card's -- and
    between them the fields were squeezed into a narrow column with wide empty margins either
    side. Each layer looked reasonable alone; together they took most of a 360px screen. The
    panel gives up most of its share on small screens, where the space is worth more to the
    content than to the frame.
*/
@media (max-width: 575.98px) {
    .reel-create-panel {
        padding: .625rem;
    }
}

.reels-page .btn,
.reel-create-page .btn {
    font-size: .78rem;
    line-height: 1.25;
    margin-bottom: 0;
    padding: .42rem .9rem;
}

.reel-preview-wrapper {
    border-radius: 16px;
    min-height: 420px;
    overflow: hidden;
}

.reel-preview-stage {
    background: #f6f7fb;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 16px;
}

.reel-canvas {
    aspect-ratio: 9 / 16;
    background: #000;
    border-radius: 18px;
    box-shadow: 0 22px 50px rgba(0, 0, 0, .22), 0 2px 10px rgba(0, 0, 0, .10);
    margin: 0 auto;
    max-width: 330px;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.reel-canvas::before {
    content: "";
    display: block;
    padding-top: 177.78%;
}

.reel-canvas > * {
    left: 0;
    position: absolute;
    right: 0;
}

.reel-canvas video,
.reel-canvas img {
    display: block;
    height: 100%;
    inset: 0;
    object-fit: contain;   /* create preview: original ratio, no crop (like post video) */
    position: absolute;
    width: 100%;
}

.reel-canvas.is-empty,
.reel-canvas.is-no-media {
    background: radial-gradient(circle at 25% 10%, rgba(209,0,84, .35), rgba(0, 0, 0, 0) 55%),
        radial-gradient(circle at 75% 90%, rgba(155, 61, 255, .35), rgba(0, 0, 0, 0) 55%),
        #0b0b10;
}

.reel-canvas:not(.is-empty) .reel-preview-empty {
    display: none;
}

.reel-preview-empty {
    color: rgba(255, 255, 255, .85);
    padding: 18px 16px;
    pointer-events: none;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.reel-preview-empty__title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.reel-preview-empty__sub {
    color: rgba(255, 255, 255, .68);
    font-size: .82rem;
    line-height: 1.25;
}

.reel-preview-top-controls {
    display: flex;
    gap: .5rem;
    left: .75rem;
    pointer-events: none;
    position: absolute;
    right: auto;
    top: .75rem;
    z-index: 6;
}

.reel-upload-zone-hidden {
    display: none !important;
}

.reel-thumb-title {
    font-size: 1.05rem;
}

.reel-thumb-tabs {
    flex-wrap: wrap;
}

.reel-thumb-tab {
    border: 1px solid rgba(138, 150, 163, .4);
    background: transparent;
    color: inherit;
    font-weight: 600;
    font-size: .78rem;
    padding: .35rem .55rem;
    margin-left: -1px;
    cursor: pointer;
    white-space: nowrap;
}

.reel-thumb-tab:first-child {
    border-radius: .4rem 0 0 .4rem;
    margin-left: 0;
}

.reel-thumb-tab:last-child {
    border-radius: 0 .4rem .4rem 0;
}

.reel-thumb-tab.active {
    background: rgba(138, 150, 163, .28);
}

.reel-thumb-arrow {
    width: 2.1rem;
    height: 2.1rem;
    border: 1px solid rgba(138, 150, 163, .4);
    background: transparent;
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: -1px;
}

.reel-thumb-arrow:first-child {
    border-radius: .4rem 0 0 .4rem;
}

.reel-thumb-arrow:last-child {
    border-radius: 0 .4rem .4rem 0;
}

.reel-thumb-arrow:disabled {
    opacity: .4;
    cursor: default;
}

.reel-thumb-strip {
    display: flex;
    gap: .45rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: .3rem;
    scrollbar-width: none;
}

.reel-thumb-strip::-webkit-scrollbar {
    display: none;
}

.reel-thumb-tile {
    position: relative;
    flex: 0 0 auto;
    /* fixed height; width is set inline by JS from the video's real ratio so
       landscape thumbnails show WIDE (original ratio), not cropped to portrait —
       matches the post thumbnail chooser (.pt-frame). */
    height: 170px;
    width: 96px;   /* fallback until JS sets the ratio-based width */
    border-radius: .55rem;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid transparent;
    padding: 0;
    background: rgba(138, 150, 163, .15);
}

.reel-thumb-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Selected thumbnail: fixed Facebook blue (does not follow the theme) */
.reel-thumb-tile.selected {
    border-color: #d10054;
}

.reel-thumb-tile.selected::after {
    content: '\2713';
    position: absolute;
    top: 5px;
    left: 5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #d10054;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

/* Compact preview: only as wide as the 9:16 canvas needs */
.reel-preview-wrapper {
    background: transparent !important;
    box-shadow: none !important;
    min-height: 0 !important;
    width: 100%;
    max-width: 348px;
    margin: 0 auto;
}

.reel-preview-stage {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* Live preview above the filmstrip (Choose frame) */
.reel-frame-preview {
    /* Show the frame in the video's REAL ratio (like the post chooser): fixed
       height, width auto — landscape shows wide, not cropped to a portrait box. */
    width: auto;
    max-width: 100%;
    height: 220px;
    object-fit: contain;
    border-radius: .55rem;
    border: 3px solid var(--primary, #d10054);
    background: rgba(138, 150, 163, .15);
    display: block;
}

.reel-thumb-panel-frame {
    max-width: 100%;
    overflow: hidden;
}

.reel-schedule-button {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.reel-schedule-modal {
    border-radius: 1rem;
    border: none;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .25);
}

.reel-schedule-modal .modal-title {
    display: flex;
    align-items: center;
}

.reel-schedule-modal input[type="datetime-local"] {
    border-radius: .5rem;
}

.reel-schedule-modal .reel-schedule-clear {
    text-decoration: none;
}

/* Facebook-style filmstrip scrubber (Choose frame) */
.reel-frame-panel {
    position: relative;
    padding-top: 1.35rem;
}

.reel-frame-time {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-50%);
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}

.reel-frame-scrubber {
    position: relative;
    height: 96px;
    border-radius: .45rem;
    overflow: hidden;
    cursor: ew-resize;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    background: rgba(138, 150, 163, .15);
}

.reel-frame-filmstrip {
    display: flex;
    width: 100%;
    height: 100%;
}

.reel-frame-filmstrip img {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    display: block;
}

.reel-frame-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 12px;
    transform: translateX(-50%);
    border: 2px solid #fff;
    border-radius: 7px;
    background: rgba(255, 255, 255, .12);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .45);
    pointer-events: none;
}

/* progress: blue while uploading, GREEN at 100% — hardcoded (theme vars render
   grey on this page). Tick = green circle + white check. */
.reel-upload-progress-bar { background: #1d9bf0 !important; }
.reel-upload-progress-label { color: #1d9bf0 !important; }
.reel-upload-progress.complete .reel-upload-progress-bar {
    background: #28a745 !important;
}
.reel-upload-progress.complete .reel-upload-progress-label {
    color: #28a745 !important;
    min-width: auto;
    white-space: nowrap;
}
/* FxSvg checkmark-circle: green circle, WHITE check */
.reel-upload-progress.complete .reel-upload-progress-label svg { color: #28a745 !important; }
.reel-upload-progress.complete .reel-upload-progress-label svg circle { fill: #28a745 !important; }
.reel-upload-progress.complete .reel-upload-progress-label svg path { stroke: #fff !important; }

/* ---- Video meta line: name + resolution & duration pills ---- */
.reel-video-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; }
.reel-video-meta-name {
    font-size: .7rem !important;
    font-weight: 600;
    opacity: .85;
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* rounded pills with the site's global theme border */
.reel-video-meta-res,
.reel-video-meta-duration-wrap {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(0, 0, 0, .1);   /* global light border */
    padding: 2px 8px;
    border-radius: 6px;
    font-size: .68rem;
    font-weight: 600;
    white-space: nowrap;
}
body.fx-theme-dark .reel-video-meta-res,
body.fx-theme-dark .reel-video-meta-duration-wrap {
    border-color: rgba(255, 255, 255, .12);   /* global dark border */
}

.reel-upload-progress {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 0 .9rem .6rem;
}

.reel-upload-progress-track {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: rgba(138, 150, 163, .25);
    overflow: hidden;
}

.reel-upload-progress-bar {
    height: 100%;
    width: 0;
    border-radius: 2px;
    background: var(--primary, #d10054);
    transition: width .15s ease;
}

.reel-video-delete-button {
    width: 2.1rem;
    height: 2.1rem;
    border: 1px solid rgba(220, 53, 69, .5);
    border-radius: .45rem;
    background: transparent;
    color: #dc3545;                 /* red trash icon, always */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 auto;
}
.reel-video-delete-button svg,
.reel-video-delete-button svg path,
.reel-video-delete-button ion-icon {
    color: #dc3545 !important;
    stroke: #dc3545;
}

.reel-video-delete-button:hover {
    color: #dc3545;
    border-color: #dc3545;
    background: rgba(220, 53, 69, .1);
}

.reel-upload-progress-label ion-icon {
    color: var(--success, #28a745);
    vertical-align: -2px;
    margin-right: 2px;
}

.reel-upload-progress-label {
    min-width: 2.6rem;
    text-align: right;
}

.reel-preview-control {
    align-items: center;
    background: rgba(18, 18, 18, .42);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
    color: #fff;
    cursor: pointer;
    display: flex;
    height: 2.05rem;
    justify-content: center;
    padding: 0;
    pointer-events: auto;
    width: 2.05rem;
}

.reel-preview-control ion-icon {
    font-size: 1rem;
}

.reel-preview-actions {
    bottom: 3.7rem;
    display: flex;
    flex-direction: column;
    gap: .42rem;
    left: auto;
    pointer-events: none;
    position: absolute;
    right: .55rem;
    z-index: 5;
}

.reel-preview-action {
    align-items: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    font-size: .66rem;
    font-weight: 700;
    gap: .12rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}

.reel-preview-action ion-icon {
    background: rgba(18, 18, 18, .34);
    border-radius: 50%;
    box-sizing: border-box;
    font-size: .98rem;
    height: 1.82rem;
    padding: .42rem;
    width: 1.82rem;
}

.reel-preview-action small {
    font-size: .62rem;
    line-height: 1;
}

.reel-preview-overlay {
    bottom: 2.05rem;
    color: #fff;
    left: .8rem;
    max-width: calc(100% - 4.7rem);
    pointer-events: none;
    position: absolute;
    right: 4rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
    z-index: 4;
}

.reel-preview-user-row {
    align-items: center;
    display: flex;
    gap: .45rem;
    margin-bottom: .42rem;
}

.reel-preview-avatar {
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 50%;
    display: block;
    flex: 0 0 auto;
    height: 1.8rem;
    overflow: hidden;
    width: 1.8rem;
}

.reel-preview-avatar img {
    display: block;
    height: 100%;
    object-fit: cover;
    position: static;
    width: 100%;
}

.reel-preview-username {
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.1;
}

.reel-preview-caption {
    font-size: .78rem;
    line-height: 1.25;
    max-height: 3.1rem;
    overflow: hidden;
    white-space: pre-wrap;
    word-break: break-word;
}

.reel-preview-sound {
    align-items: center;
    color: rgba(255, 255, 255, .72);
    display: flex;
    font-size: .72rem;
    gap: .22rem;
    margin-top: .28rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reel-preview-progress {
    bottom: .75rem;
    height: 8px;
    left: .75rem;
    pointer-events: none;
    position: absolute;
    right: .75rem;
    z-index: 6;
}

.reel-preview-progress::before,
.reel-preview-progress span {
    border-radius: 999px;
    bottom: 3px;
    content: "";
    height: 3px;
    left: 0;
    position: absolute;
}

.reel-preview-progress::before {
    background: rgba(255, 255, 255, .42);
    right: 0;
}

.reel-preview-progress span {
    background: rgba(255, 255, 255, .98);
    width: 28%;
}

.reel-legibility {
    pointer-events: none;
    z-index: 2;
}

.reel-legibility--top {
    background: linear-gradient(to bottom, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
    height: 120px;
    top: 0;
}

.reel-legibility--bottom {
    background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
    bottom: 0;
    height: 140px;
}

.reel-preview-wrapper .card-footer {
    padding-bottom: 12px;
    padding-top: 10px;
}

.reel-orientation-warning {
    align-items: flex-start;
    background: rgba(255, 193, 7, .12);
    border: 1px solid rgba(255, 193, 7, .35);
    border-radius: 8px;
    color: inherit;
    display: flex;
    gap: .65rem;
    padding: .75rem;
}

.reel-orientation-warning-icon {
    align-items: center;
    background: rgba(255, 193, 7, .18);
    border-radius: 8px;
    color: #f0ad00;
    display: flex;
    flex: 0 0 2rem;
    height: 2rem;
    justify-content: center;
    width: 2rem;
}

.reel-orientation-warning-icon ion-icon {
    font-size: 1.25rem;
}

.reel-upload-zone.dropzone {
    min-height: auto !important;
}

.reel-upload-zone.is-disabled {
    align-items: center;
    cursor: default;
    display: flex;
    justify-content: center;
    min-height: 86px !important;
    opacity: .55;
    pointer-events: none;
    text-align: center;
}

.reel-upload-zone .upload-zone-disabled-message {
    color: inherit;
    font-size: .9rem;
    font-weight: 600;
    padding: .75rem;
}

.reel-upload-zone .video-preview-item {
    border-radius: 14px;
    height: 120px;
    width: 120px;
}

.reel-upload-zone .video-preview-item .video-preview {
    border-radius: 14px;
    object-fit: cover;
}

.reel-upload-zone .video-encoding-overlay {
    font-size: .66rem;
    left: 8px;
    max-width: calc(100% - 16px);
    min-height: 26px;
    padding: 6px 8px;
    top: 8px;
}

.reel-upload-zone .video-preview-placeholder {
    padding: 12px;
}

.reel-upload-zone .video-preview-placeholder-icon {
    height: 40px;
    margin-bottom: 6px;
    width: 40px;
}

.reel-upload-zone .video-preview-placeholder-title {
    font-size: .68rem;
    max-width: 90px;
}

.reel-upload-zone .video-preview-placeholder-subtitle {
    display: none;
}

.reel-upload-zone .dz-preview {
    display: inline-block;
    margin: .6rem;
    min-height: unset;
    position: relative;
    vertical-align: top;
}

.reel-upload-badge {
    background: rgba(0, 0, 0, .58);
    border-radius: 999px;
    bottom: 8px;
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    left: 8px;
    letter-spacing: 0;
    line-height: 1;
    padding: 5px 8px;
    pointer-events: none;
    position: absolute;
    text-transform: uppercase;
    z-index: 12;
}

.reel-upload-zone .dz-preview.dz-image-preview {
    background: transparent !important;
}

.reel-upload-zone .dz-image {
    background: transparent;
    border-radius: 14px;
    height: 120px;
    overflow: hidden;
    width: 120px;
}

.reel-upload-zone .dz-image img {
    height: 100%;
    object-fit: cover;
    transition: transform .16s ease;
    width: 100%;
}

.reel-upload-zone.dropzone .dz-preview:hover .dz-image img {
    -webkit-filter: none !important;
    filter: none !important;
    transform: scale(1.02);
}

.reel-upload-zone .dz-details,
.reel-upload-zone .dz-filename,
.reel-upload-zone .dz-size {
    display: none !important;
}

@media (max-width: 767.98px) {
    .reels-feed {
        padding: .75rem;
    }

    .reels-grid,
    .fx-reel-grid-skeletons {
        gap: .75rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* MOBILE SKELETON LOADER FIX: Show only 1 clean row (2 cards) & hide overflow stacked layers */
    .fx-reel-grid-skeletons {
        overflow: hidden !important;
        grid-template-rows: auto !important;
        grid-auto-rows: 0 !important;
        max-height: 280px !important;
    }

    .fx-reel-grid-skeletons .fx-reel-grid-skeleton:nth-child(n+3) {
        display: none !important;
    }

    /* Reels player = top:0 down to 60px-from-bottom, leaving the bottom 60px for the
       fixed bottom nav (which is opaque + above the feed, so no next-reel peek there). */
    .reel-viewer {
        top: 0;
        bottom: 56px !important;
        box-sizing: border-box;
        height: auto !important;
        overflow: hidden !important;
        padding: 0;
        overscroll-behavior: none;
        touch-action: pan-y;
        width: 100%;
    }

    .reel-viewer-inner {
        height: 100% !important;
        max-width: 100%;
        overflow: hidden !important;
        position: relative;
        touch-action: pan-y;
        width: 100%;
    }

    .reel-viewer-phone {
        border-radius: 0;
        height: 100% !important;
        max-width: none;
        overflow: hidden !important;
        touch-action: pan-y;
        width: 100%;
    }

    /*
        Size is fixed here; the FIT is not.

        object-fit carried !important, which beats the inline style the renderer writes from
        the reel's saved dimensions -- so on a phone every reel was letterboxed regardless of
        its shape, and the cover/contain decision never reached the screen at all. The width
        and height still need forcing; the fit does not, and must not.

        The base .reel-viewer-video rule above still declares contain, so a reel the player
        has not decided on yet is letterboxed rather than cropped -- the safe way round.
    */
    .reel-viewer-video {
        width: 100% !important;
        height: 100% !important;
    }

    /* Swipe stage/preview fill the player — inset:0 is correct now
       since the parent .reel-viewer already stops 56px above the bottom. */
    .reel-swipe-stage,
    .reel-swipe-preview {
        bottom: 0 !important;
        overflow: hidden !important;
    }

    /* Full-screen pill: mobile + landscape video only, and ONLY once JS has
       positioned it just under the video (is-positioned) — so it never flashes
       mid-video at the default top first. */
    .reel-viewer-phone.is-landscape .reel-fullscreen-pill.is-positioned {
        display: inline-flex;
    }

    /* Never in landscape. The phone is already showing the video across the full
       width, so the pill has nothing left to offer and would simply sit on top of
       it. The max-width media query around this block still matches once the phone
       is turned (a 668px-wide screen is under 768px), so orientation has to be
       stated separately -- otherwise the pill stayed over the video after rotating.
       JS applies the same rule when positioning, so the two cannot disagree. */
    @media (orientation: landscape) {
        .reel-fullscreen-pill,
        .reel-viewer-phone.is-landscape .reel-fullscreen-pill.is-positioned {
            display: none !important;
        }
    }

    .reel-top-controls {
        left: 1rem;
        position: absolute;
        top: 1rem;
    }

    .reel-viewer > .reel-viewer-close,
    .reel-viewer-close-floating {
        display: none;
        left: 1rem;
        position: fixed;
        right: auto;
        top: 1rem;
        z-index: 4;
    }

    .reel-mobile-close {
        display: flex !important;
    }

    .reel-actions {
        bottom: 4.35rem;
        flex: 0 0 auto;
        gap: .42rem;
        margin-bottom: 0;
        position: absolute;
        right: .75rem;
    }

    .reel-action {
        min-height: 2.42rem;
        min-width: 2.05rem;
    }

    .reel-action ion-icon {
        height: 1.86rem;
        padding: .43rem;
        width: 1.86rem;
    }

    .reel-play-toggle,
    .reel-mute,
    .reel-viewer-close,
    .reel-comments-close {
        height: 2.12rem;
        width: 2.12rem;
    }

    .reel-play-toggle ion-icon,
    .reel-mute ion-icon,
    .reel-viewer-close ion-icon,
    .reel-comments-close ion-icon {
        font-size: 1.04rem;
    }

    .reel-overlay-text {
        bottom: 4.35rem;
        max-width: calc(100% - 5.8rem);
        right: 4.8rem;
    }

    .reel-viewer-progress {
        bottom: 1.35rem;
        height: 12px;
        left: .95rem;
        right: .95rem;
    }

    .reel-viewer-progress::before,
    .reel-viewer-progress span {
        bottom: 4px;
        height: 4px;
    }

    .reel-viewer-nav {
        display: none;
    }

    .reel-viewer-comments {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        bottom: 0;
        display: flex;
        flex: 0 0 auto;
        left: 0;
        max-height: 70%;
        min-width: 0;
        position: absolute;
        right: 0;
        touch-action: pan-y;
        z-index: 5;
    }

    /* No slide, and nothing here to hide it: the base rule's
       `.reel-viewer-comments.is-closed { display: none }` already does that, and
       mobile has no reason to differ.

       The panel used to sit at translateY(105%) and animate up over .22s. Now that
       the open state is `position: fixed` with `transform: none`, those two
       descriptions of where it is disagree during the transition -- the browser
       animates a transform the open rule has already cancelled, which is the
       flicker. Without the animation the panel simply appears when asked for. */

    .reel-viewer.comments-open::before {
        background: rgba(0, 0, 0, .34);
        bottom: 0;
        content: "";
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 4;
    }

    .reel-viewer-comments-header {
        padding: .85rem 1rem;
    }

    .reel-comment-form {
        padding: .75rem 1rem 1rem;
    }

    .reel-comment-form input {
        font-size: 16px;
    }

    html.reel-keyboard-open,
    body.reel-keyboard-open {
        background: #000;
        overflow: hidden !important;
    }

    body.reel-keyboard-open::before {
        background: #000;
        bottom: 0;
        content: "";
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 2049;
    }

    .reel-viewer.keyboard-open {
        background: #000;
    }

    .reel-viewer.keyboard-open.comments-open::before {
        background: #000;
    }

    /* The input row is lifted by the panel's OPEN TRANSFORM, not by its own.

       position: fixed does not help here: .reel-viewer-comments carries
       `transform: translateY(0)` when open, and a transformed ancestor becomes the
       containing block for fixed descendants -- so a fixed child is still trapped
       inside the panel and still clipped by its overflow: hidden. That is why every
       attempt to move the form on its own did nothing visible.

       So the PANEL moves instead, by adding the keyboard's height to the transform
       it already uses. Its own overflow cannot clip its own edge, and the input row
       goes up with it. The height shrinks by the same amount so the top edge stays
       where it was and only the bottom comes up. */
    /* The comments panel is its own fixed sheet, exactly like the 3-dot options
       panel above -- fixed to the viewport at bottom: 0, with a z-index over the
       mobile nav.

       This is what every earlier attempt was working around. As a child of
       .reel-viewer the panel could never leave that box: the viewer is pinned
       `bottom: 56px !important; height: calc(...) !important` by a late, more
       specific rule, and the panel is clipped by the viewer's overflow and by its
       own. Nothing set on the panel could move it past those. Taking it out of
       that box -- the same way .reel-more-sheet already does -- removes the
       problem rather than fighting it.

       bottom: 0 means the keyboard never covers it: the browser scrolls a fixed
       element at the bottom of the viewport up with the keyboard, which is the
       behaviour the 3-dot sheet already relies on. */
    .reel-viewer-comments.is-open,
    .reel-viewer.comments-open .reel-viewer-comments {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        /* One higher than .reel-sheet.reel-more-sheet's 99999999. They were equal,
           and with equal z-index the later element in the DOM wins -- the sheet is
           rendered after the panel, so the panel went under it. This is not a race
           to the top: the two are siblings in the same stacking context and the
           panel simply has to be the one on top. */
        z-index: 100000000 !important;
        /* Both height AND max-height, pinned to the VIEWPORT the way the 3-dot
           sheet is. max-height alone let the panel collapse to its content -- an
           empty comment list gave a short strip rather than a 70% sheet, which is
           what "you set max-height but not height" was pointing at.

           dvh first, then vh as the fallback for browsers without it: dvh follows
           the browser chrome as it collapses, which is what keeps the sheet the
           right size on a phone. */
        /* vh, not dvh. dvh follows the browser's URL bar, which collapses the
           moment the comment input is focused -- so the panel's height changed by
           the bar's height at the same moment its bottom moved for the keyboard,
           and the top edge jumped. vh is fixed to the largest viewport and does
           not move when the chrome does. */
        height: 80vh !important;
        max-height: 80vh !important;
        /* NOT overflow-y: auto, unlike the 3-dot sheet it is otherwise copied from.
           That sheet is a single scrolling list; this panel has a fixed header and
           input row around a list that scrolls itself, so making the panel scroll
           too would nest two scrollers and let the header and input row slide out
           of view. The list keeps `flex: 1 1 auto; min-height: 0` and does the
           scrolling; the panel stays put. */
        overflow: hidden !important;
        touch-action: pan-y !important;
        margin: 0 !important;
        border-top-left-radius: 1.2rem !important;
        border-top-right-radius: 1.2rem !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        box-shadow: 0 -12px 45px rgba(0, 0, 0, .45) !important;
        transform: none !important;
    }

    /* There is deliberately no keyboard lift for the comment sheet.

       Several approaches were tried and none held on the target device: the panel is
       inside .reel-viewer, which is pinned by a late !important rule and is a
       stacking context, and the height of the keyboard is measured differently on
       iOS and Android. The JS that attempted it has been removed rather than left
       looking functional; the keyboard covers the input row, as it did before. */

    /* The list takes the slack and scrolls; the header and the composer keep
       their own size.

       NOT scoped to .keyboard-open. The composer disappearing is a plain flex
       problem that exists whenever the list is taller than the panel: a flex
       child will not shrink below its content unless min-height: 0 says it may,
       so the list pushed the form out of the bottom of the panel. The keyboard
       only made it obvious by shrinking the panel. Scoping the fix to the
       keyboard state meant it also depended on that class actually being applied
       at the moment it mattered, which is one more thing to go wrong. */
    .reel-viewer-comments {
        display: flex;
        flex-direction: column;
    }

    .reel-comments-list {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .reel-viewer-comments-header,
    .reel-comment-form {
        flex: 0 0 auto;
    }

    .reel-create-page .btn {
        padding: .38rem .78rem;
    }
}

/* === Reels v3: actions column cap, avatar rings, "..." menu ======== */
.reel-actions {
    max-height: 55%;
    justify-content: flex-end;
    overflow: visible;
}

/* Animated theme-colored ring around the author avatar (logged-in viewers) */
.reel-author-avatar {
    position: relative;
    display: block;
    border-radius: 50%;
}

/* ONE border ring around the avatar. Before follow = white (slightly see-through);
   after follow only the COLOR changes to our pink — no second border. */
.reel-author-avatar::before {
    content: "";
    position: absolute;
    inset: -1.5px;                 /* 1.5px ring around the round avatar */
    border-radius: 50%;
    /* pink brand gradient ring (gorgeous) — sits behind the round avatar image */
    background: linear-gradient(135deg, #ff5fae, #d10054);
    border: none;
    animation: none;
}

.reel-author-avatar img {
    position: relative;
    z-index: 1;
    border: none;   /* the ring is the only border — no double border */
}

.reel-author-avatar.is-guest::before {
    display: none;
}

/* Followed creator: same ring, now our pink (color change only) */
.reel-author-avatar.is-following::before {
    border-color: #d10054;
    background: none;
    animation: none;
}

@keyframes fx-ring-spin {
    to { transform: rotate(360deg); }
}

/* "+" -> white ✓ once followed */
.reel-follow-btn.is-followed {
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .3);
}

.reel-follow-tick {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: #22c55e;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

/* "..." options panel */
.reel-more-wrap {
    position: relative;
}

.reel-more-menu {
    position: absolute;
    right: 2.4rem;
    bottom: 0;
    min-width: 235px;
    background: rgba(22, 22, 28, .96);
    border-radius: .8rem;
    padding: .35rem;
    z-index: 12;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
    max-height: 320px;
    overflow-y: auto;
}

.reel-more-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    border: none;
    background: transparent;
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    text-align: left;
    padding: .5rem .7rem;
    border-radius: .5rem;
    cursor: pointer;
    transition: background-color .15s ease;
}

.reel-more-item:hover {
    background: rgba(255, 255, 255, .09);
}

.reel-more-item ion-icon {
    font-size: 1.05rem;
    flex: 0 0 auto;
    background: transparent;
    padding: 0;
    height: auto;
    width: auto;
    box-shadow: none;
}

.reel-more-item.is-active {
    color: #22c55e;
}

/* Follow "+" badge: half-overlapping the avatar bottom edge, centered */
.reel-actions {
    align-items: center;
}

.reel-author {
    align-self: center;
    width: auto;
}

.reel-follow-btn {
    bottom: -8px;
    z-index: 3;
}

/* /reels?player=1: hide the explore page until the full-screen viewer opens */
.fx-reels-instant .reels-topbar,
.fx-reels-instant .reels-feed {
    visibility: hidden;
}

/* ============================================================
   Reels viewer v4 — FB-style controls (tap to show), top bar,
   center 5s seek group, bottom time+mute+progress bar
   ============================================================ */

/* Legacy top-left control cluster no longer used */
.reel-top-controls { display: none !important; }

/* ==========================================================================
   REELS PLAYER TOP BAR & LIBRARY FIX (Update 652)
   ========================================================================== */

/* Top bar: ALWAYS 100% fixed at top, untransformed during vertical swipe */
.reel-top-bar,
.reel-viewer-phone .reel-top-bar,
.reel-viewer-phone.is-swipe-dragging .reel-top-bar,
.reel-viewer-phone.is-swipe-committing .reel-top-bar,
.reel-viewer-phone.is-swipe-resetting .reel-top-bar {
    position: absolute !important;
    top: 0.8rem !important;
    left: 0.8rem !important;
    right: 0.8rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    z-index: 99999 !important;
    pointer-events: auto !important;
    transform: none !important;
    -webkit-transform: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.reel-top-bar .reel-top-right {
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    pointer-events: auto !important;
}

/* Top bar buttons (Back, Search, 3-Dots): base z-index 1, subtle drop-shadow only */
.reel-top-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.4rem !important;
    height: 2.4rem !important;
    background: transparent !important;
    border: none !important;
    border-radius: 50% !important;
    color: #ffffff !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    transition: transform 0.16s ease !important;
    text-decoration: none !important;
    position: relative !important;
    z-index: 1 !important;
}

.reel-top-btn:hover,
.reel-top-btn:active {
    background: transparent !important;
    transform: scale(1.1) !important;
    color: #ffffff !important;
}

.reel-top-btn ion-icon,
.reel-top-btn svg {
    font-size: 1.35rem !important;
    width: 1.35rem !important;
    height: 1.35rem !important;
    color: #ffffff !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.75)) !important;
}

/* ==========================================================================
   REELS PLAYER TOP BAR & YOUR LIBRARY OVERLAY FIX (Update 654)
   ========================================================================== */

/* Top bar buttons stay at base z-index 100 */
.reel-top-bar,
.reel-top-btn,
.reel-mobile-close,
.reel-search-btn,
.reel-library-btn {
    z-index: 100 !important;
}

/* Your Library sheet & backdrop overlay ON TOP (z-index 999999) so top row icons are UNDER it */
.reel-sheet.reel-library-sheet,
.reel-library-panel {
    z-index: 999999 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
}

.reel-sheet-backdrop {
    z-index: 99998 !important;
}

/* Hide top bar ONLY when the top "Your Library" sheet itself is open */
.reel-viewer-phone.reel-library-open .reel-top-bar,
.reel-library-open .reel-top-bar {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    transition: opacity 0.18s ease, visibility 0.18s ease !important;
}
.reel-library-title {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    padding: .3rem .6rem .5rem;
}
.reel-library-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .6rem;
    border-radius: .5rem;
    color: #fff;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
}
.reel-library-item:hover { background: rgba(255, 255, 255, .1); color: #fff; text-decoration: none; }
.reel-library-item ion-icon { font-size: 1.1rem; }

/* ---- Center controls: 5s back / play / 5s forward ---- */
.reel-center-controls {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 1.3rem;
    z-index: 7;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}

.reel-viewer-phone.controls-visible .reel-center-controls,
.reel-viewer-phone.is-paused .reel-center-controls {
    opacity: 1;
    pointer-events: auto;
}

/* Center play/pause (moderate, Fansly-like) */
.reel-play-toggle {
    width: 3.1rem !important;
    height: 3.1rem !important;
    background: rgba(0, 0, 0, .45) !important;
    border: none !important;
    border-radius: 50% !important;
    color: #fff;
    /* Match the feed player: hover changes ONLY the colour (no move/scale). */
    transition: background .15s ease !important;
}
.reel-play-toggle svg {
    width: 1.7rem;
    height: 1.7rem;
    display: block;
}
/* Big center button: no colour change on hover or focus, matching the feed player.
   The shared hover rule above still has to be overridden so it never moves. */
.reel-play-toggle:hover,
.reel-play-toggle:focus {
    border: none !important;
    transform: none !important;
}
.reel-play-toggle ion-icon { font-size: 1.5rem !important; }

/* 5-second seek buttons */
.reel-seek {
    position: relative;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, .35);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .16s ease, transform .16s ease;
}
.reel-seek:hover { background: rgba(0, 0, 0, .55); transform: scale(1.05); }
/* Reels under 30s: never show the skip (5s/10s) buttons at all. */
.reel-viewer-phone.reel-no-seek .reel-seek { display: none !important; }
.reel-seek ion-icon { font-size: 1.3rem; }
.reel-seek svg { width: 1.3rem; height: 1.3rem; }
.reel-seek-fwd ion-icon { transform: scaleX(-1); }
.reel-seek-num {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -46%);
    font-size: .55rem;
    font-weight: 800;
}

/* ---- Actions column: equal icon sizes, bottom 2rem all devices ---- */
.reel-actions {
    bottom: 2rem !important;
    align-items: center;
}

.reel-action ion-icon,
.reel-action svg,
.reel-more ion-icon {
    width: 1.55rem !important;
    height: 1.55rem !important;
    font-size: 1.55rem !important;
    margin: .12rem 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    /*
        No ring on the 3-dot at the foot of the column.

        app.css draws a 2px white circle around .fx-bottom-more-btn svg, which is right for
        the button in the header -- alone over the video, it needs the ring to read as a
        button. The rail's 3-dot matches that selector too, and the circle made it the one
        bordered icon in a column of six: wider and heavier than the heart and the share
        above it, which is the whole reason this block sets an equal size in the first place.

        Reset here rather than narrowing the rule in app.css, because this file is loaded
        after it on the reels pages and would override any fix made there anyway.
    */
    border: none !important;
    border-radius: 0 !important;
}

/* The "..." options button now matches the other action icons */
.reel-more-wrap { display: flex; }
.reel-more.reel-action {
    padding: .08rem 0 .12rem !important;
    min-width: 2.05rem;
}
/* The bottom "..." dots (a wide 3-circle SVG) were rendering much bigger/wider
   than the TOP "..." (ion-icon, 1.2rem). Size the bottom dots to match the top. */
.reel-more.reel-action svg,
.reel-more.reel-action ion-icon {
    width: 1.2rem !important;
    height: 1.2rem !important;
    font-size: 1.2rem !important;
}

/* ---- Bottom bar: time + mute row, then progress ---- */
.reel-bottom-bar {
    position: absolute;
    left: .95rem;
    right: .95rem;
    bottom: 1rem;
    z-index: 8;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}

.reel-viewer-phone.controls-visible .reel-bottom-bar,
.reel-viewer-phone.is-paused .reel-bottom-bar,
.reel-viewer-phone.is-long-video .reel-bottom-bar {
    opacity: 1;
    pointer-events: auto;
}

.reel-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .35rem;
}

.reel-time {
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .7);
}

.reel-bottom-row .reel-mute {
    width: 2.1rem !important;
    height: 2.1rem !important;
    background: transparent !important;
    border: none !important;
}
.reel-bottom-row .reel-mute ion-icon { font-size: 1.4rem !important; filter: drop-shadow(0 1px 4px rgba(0,0,0,.6)); }

/* Progress now lives in the bottom bar (flow, not absolute) */
.reel-bottom-bar .reel-viewer-progress,
html.reel-viewer-touch .reel-bottom-bar .reel-viewer-progress,
html.reel-viewer-touch .reel-bottom-bar .reel-viewer-progress.is-scrubbable {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    height: 14px;
    opacity: 1;
    pointer-events: auto;
}

/* --- v4 fixes: top-bar order (force LTR), lift overlay when controls show --- */
.reel-top-bar,
.reel-bottom-row {
    direction: ltr;
}

/* Name + caption block and the right action column slide up smoothly while
   the bottom bar (time + mute + seek) is visible, so nothing overlaps. */
.reel-overlay-text,
.reel-actions {
    transition: transform .22s ease;
}

.reel-viewer-phone.controls-visible .reel-overlay-text,
.reel-viewer-phone.is-paused .reel-overlay-text,
.reel-viewer-phone.is-long-video .reel-overlay-text {
    transform: translateY(-3.1rem);
}

.reel-viewer-phone.controls-visible .reel-actions,
.reel-viewer-phone.is-paused .reel-actions,
.reel-viewer-phone.is-long-video .reel-actions {
    transform: translateY(-2.6rem);
}

/* --- v4 fix #2: keep the mobile back button INSIDE the top bar (left) --- */
/* (the shared .reel-viewer-close rule forces position:fixed right — undo it here) */
.reel-top-bar .reel-mobile-close.reel-top-btn {
    position: static !important;
    right: auto !important;
    top: auto !important;
    left: auto !important;
}

/* Bottom bar: thin progress always visible for >60s videos, but the
   time+mute row only appears on tap/pause. */
.reel-bottom-bar {
    opacity: 1 !important;
    pointer-events: none;
}

.reel-bottom-row {
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}

.reel-viewer-phone.controls-visible .reel-bottom-row,
.reel-viewer-phone.is-paused .reel-bottom-row {
    opacity: 1;
    pointer-events: auto;
}

/* Progress bar is fully REMOVED until we know the duration, so it never
   flashes for short reels during load. `is-progress-ready` is added by JS
   only once the video duration is known. */
.reel-bottom-bar .reel-viewer-progress {
    display: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}

/* LONG reels (> 1 min): bar is present; shown by default + on tap/pause. */
.reel-viewer-phone.is-long-video .reel-bottom-bar .reel-viewer-progress {
    display: block;
    opacity: 0;
    pointer-events: none;
}
.reel-viewer-phone.is-long-video.controls-visible .reel-bottom-bar .reel-viewer-progress,
.reel-viewer-phone.is-long-video.is-paused .reel-bottom-bar .reel-viewer-progress,
.reel-viewer-phone.is-long-video .reel-bottom-bar .reel-viewer-progress {
    opacity: 1;
    pointer-events: auto;
}

/* SHORT reels (<= 1 min): bar exists ONLY while tapped (controls-visible) or
   paused — otherwise it is display:none, so there is nothing to flash. */
.reel-viewer-phone.is-short-video.controls-visible .reel-bottom-bar .reel-viewer-progress,
.reel-viewer-phone.is-short-video.is-paused .reel-bottom-bar .reel-viewer-progress {
    display: block;
    opacity: 1;
    pointer-events: auto;
}

/* Lift the name/actions only when the full controls (time+mute) are shown,
   NOT permanently for long videos (their thin bar sits at the very edge). */
.reel-viewer-phone.is-long-video .reel-overlay-text,
.reel-viewer-phone.is-long-video .reel-actions {
    transform: none;
}

.reel-viewer-phone.controls-visible .reel-overlay-text,
.reel-viewer-phone.is-paused .reel-overlay-text {
    transform: translateY(-3.1rem);
}

.reel-viewer-phone.controls-visible .reel-actions,
.reel-viewer-phone.is-paused .reel-actions {
    transform: translateY(-2.6rem);
}

/* --- v4 fix #3: top buttons transparent, overlay bottom, library panel --- */
.reel-top-btn {
    background: transparent !important;
    border: none !important;
}
.reel-top-btn:hover { background: transparent !important; }

html.reel-viewer-touch .reel-overlay-text {
    bottom: 2rem;
}

/* Your Library panel — Facebook style */
.reel-library-panel {
    min-width: 270px;
    max-width: 88vw;
    padding: .8rem .7rem;
}
.reel-library-head { padding: 0 .3rem .3rem; }
.reel-library-title { font-size: 1.05rem; font-weight: 800; color: #fff; }

.reel-library-recent { margin: .5rem 0 .7rem; }
.reel-library-recent-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 .3rem .45rem;
}
.reel-library-recent-head span { font-size: .82rem; font-weight: 700; color: #fff; }
.reel-library-recent-head a { font-size: .78rem; font-weight: 700; color: #4aa3ff; text-decoration: none; }

.reel-library-recent-strip {
    display: flex;
    gap: .4rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 .3rem;
}
.reel-library-recent-strip::-webkit-scrollbar { display: none; }
.reel-library-recent-empty { color: rgba(255,255,255,.6); font-size: .78rem; padding: .6rem .3rem; }

.reel-library-thumb {
    flex: 0 0 auto;
    width: 66px;
    height: 96px;
    border-radius: .5rem;
    overflow: hidden;
    background: rgba(255,255,255,.08);
    display: block;
}
.reel-library-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel-library-thumb-ph {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; color: rgba(255,255,255,.5);
}

/* List rows with circular icon badges */
.reel-library-item {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .55rem .3rem;
}
.reel-library-ico {
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.reel-library-ico ion-icon { font-size: 1.15rem; }

/* --- Mobile bottom nav: balance Home (was big) vs Bell (was small) --- */
.mobile-bottom-nav.fx-glass-nav .fxm-home > svg {
    width: 26px !important;
    height: 26px !important;
}
.mobile-bottom-nav.fx-glass-nav .fxm-bell > svg {
    width: 29px !important;
    height: 29px !important;
    stroke-width: 1.7;
}

/* ============================================================
   Reels bottom sheets (options + Your Library) — 90% of the
   video width, professional list, slide-up. Backdrop dims video.
   ============================================================ */
.reel-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 30;
}

.reel-sheet {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 31;
    background: rgba(28, 28, 32, .99);
    padding: .7rem .8rem calc(1rem + env(safe-area-inset-bottom));
    max-height: 78%;
    overflow-y: auto;
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease;
}

/* More sheet (bottom 3-dot): slides up FROM THE BOTTOM */
.reel-more-sheet {
    bottom: 0;
    top: auto;
    border-radius: 1.1rem 1.1rem 0 0;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, .55);
    transform: translateY(24px);
}

/* Library sheet (top 3-dot): drops down FROM THE TOP */
.reel-library-sheet {
    top: 0;
    bottom: auto;
    border-radius: 0 0 1.1rem 1.1rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .55);
    transform: translateY(-24px);
}

.reel-sheet.is-open { opacity: 1; transform: none; }

.reel-sheet-handle {
    width: 40px;
    height: 4px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .28);
    margin: .1rem auto .7rem;
}

.reel-sheet-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    padding: 0 .3rem .5rem;
}

.reel-sheet-list {
    display: flex;
    flex-direction: column;
    /* Theme-aware border: white-ish in dark, black-ish in light. */
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 18px;
    padding: 5px;
}
body.fx-theme-dark .reel-sheet-list {
    border-color: rgba(255, 255, 255, .28);
}
body.fx-theme-light .reel-sheet-list {
    border-color: rgba(0, 0, 0, .28);
}

.reel-sheet-item {
    display: flex;
    align-items: center;
    gap: .85rem;
    width: 100%;
    border: none;
    background: transparent;
    color: #fff;
    text-align: left;
    text-decoration: none;
    padding: .6rem .3rem;
    border-radius: .7rem;
    cursor: pointer;
    transition: background-color .14s ease;
}
.reel-sheet-item:hover { background: rgba(255, 255, 255, .08); color: #fff; text-decoration: none; }

.reel-sheet-ico {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.reel-sheet-ico ion-icon { font-size: 1.25rem; }

.reel-sheet-label { font-size: .95rem; font-weight: 600; }
.reel-sheet-item.is-active .reel-sheet-label,
.reel-sheet-item.is-active .reel-sheet-ico ion-icon { color: #22c55e; }

/* Recent-saved strip inside the library sheet */
.reel-library-sheet .reel-library-recent { margin: .3rem 0 .8rem; }
.reel-library-sheet .reel-library-recent-head { display: flex; align-items: center; justify-content: space-between; padding: 0 .3rem .5rem; }
.reel-library-sheet .reel-library-recent-head span { font-size: .85rem; font-weight: 700; color: #fff; }
.reel-library-sheet .reel-library-recent-head a { font-size: .8rem; font-weight: 700; color: #4aa3ff; text-decoration: none; }
.reel-library-sheet .reel-library-recent-strip { display: flex; gap: .45rem; overflow-x: auto; scrollbar-width: none; padding: 0 .3rem; }
.reel-library-sheet .reel-library-recent-strip::-webkit-scrollbar { display: none; }
.reel-library-sheet .reel-library-thumb { flex: 0 0 auto; width: 72px; height: 104px; border-radius: .6rem; overflow: hidden; background: rgba(255,255,255,.08); display: block; }
.reel-library-sheet .reel-library-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel-library-sheet .reel-library-recent-empty { color: rgba(255,255,255,.6); font-size: .8rem; padding: .6rem .3rem; }

/* Bottom "..." action icon = same size as the top-bar icons */
.reel-more ion-icon { font-size: 1.2rem !important; }

/* Seek number sits cleanly centred inside the refresh ring */
.reel-seek ion-icon { font-size: 1.85rem; }
.reel-seek-num {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: .58rem;
    font-weight: 800;
    line-height: 1;
    pointer-events: none;
}

/* ---- v4 fix #4: thinner progress, bolder equal-size FB icons ---- */

/* Thin progress bar */
.reel-bottom-bar .reel-viewer-progress { height: 10px; }
.reel-bottom-bar .reel-viewer-progress::before,
.reel-bottom-bar .reel-viewer-progress span,
html.reel-viewer-touch .reel-bottom-bar .reel-viewer-progress::before,
html.reel-viewer-touch .reel-bottom-bar .reel-viewer-progress span {
    height: 2px !important;
}

/* All action-column icons: same size, a bit bigger + bolder (FB style) */
.reel-action ion-icon,
.reel-action svg,
.reel-more ion-icon {
    width: 1.85rem !important;
    height: 1.85rem !important;
    font-size: 1.85rem !important;
    margin: .1rem 0 !important;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .55));
}

/* All stroked SVGs (comment, seek, top-bar): uniform stroke-width 1.5 */
.reel-action svg[stroke],
.reel-action svg[stroke] path,
.reel-seek svg,
.reel-seek svg path,
.reel-top-btn svg,
.reel-top-btn svg path {
    stroke-width: 1.5 !important;
}
/* Tip icon is a touch lighter */
.reel-tip svg[stroke],
.reel-tip svg[stroke] path,
.reel-tip svg,
.reel-tip svg path {
    stroke-width: 1.3 !important;
}

/* Center 5s/10s seek: FB-style circular arrow + centred number */
.reel-seek { width: 3.2rem; height: 3.2rem; }
.reel-seek svg {
    width: 1.75rem;
    height: 1.75rem;
}
.reel-seek-fwd svg { transform: none; }
.reel-seek-num {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -46%);
    font-size: .6rem;
    font-weight: 800;
    line-height: 1;
    pointer-events: none;
}

/* Bigger, bolder top-bar icons too */
.reel-top-btn ion-icon { font-size: 1.5rem; }
.reel-top-btn svg { width: 1.5rem; height: 1.5rem; }

/* ============================================================
   Uniform viewer icons (all custom SVG, stroke-width 1.5, same size)
   ============================================================ */
.reel-action svg,
.reel-top-btn svg,
.reel-seek svg {
    width: 1.7rem !important;
    height: 1.7rem !important;
    stroke-width: 1.5 !important;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .55));
}
/* Tip icon lighter (1.3) — after the uniform rule so it wins */
.reel-tip svg { stroke-width: 1.3 !important; }

/* Three-dots (top library + bottom more) slightly larger, same as each other */
.reel-library-btn svg,
.reel-more svg {
    width: 1.9rem !important;
    height: 1.9rem !important;
}

/* Active states (filled) for like + save — theme color.
   Target the PATH too (the inline fill="none" lives on the <svg>, so the path
   needs an explicit fill to actually turn solid). Like = red, Save = accent. */
.reel-react.is-active svg,
.reel-react.is-active svg path,
.reel-bookmark.is-active svg,
.reel-bookmark.is-active svg path {
    fill: #ff2d55 !important;
    stroke: #ff2d55 !important;
}
.reel-bookmark.is-active svg,
.reel-bookmark.is-active svg path {
    fill: #d10054 !important;
    stroke: #d10054 !important;
}

/* Seek number stays centred over the custom arrow */
.reel-seek svg { width: 1.7rem !important; height: 1.7rem !important; }
.reel-seek-num {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -46%);
    font-size: .58rem;
    font-weight: 800;
    line-height: 1;
    pointer-events: none;
}

/* Reel caption: clamp to 2 lines + "see more" */
.reel-caption {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    cursor: pointer;
    position: relative;
}
/* clamped caption: JS trims the text and appends an inline " … more" span so the
   title text is SHORTER (not overlaid). No -webkit-line-clamp when JS handles it. */
.reel-caption.has-more:not(.is-expanded) {
    -webkit-line-clamp: unset;
    display: block;
}
.reel-caption .reel-caption-more-inline {
    font-weight: 700;
    color: #fff;
    cursor: pointer;
}
.reel-caption.is-expanded {
    display: block;
    -webkit-line-clamp: unset;
    /* Expanded caption shows at most ~5 lines; anything longer scrolls INSIDE the
       box (touch/wheel), with NO visible scrollbar. 5 lines ≈ 5 * 1.35em line-height. */
    max-height: calc(1.35em * 5);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Allow native vertical panning inside the caption so its own scroll wins over
       the reel swipe gesture (paired with the JS swipe-guard). */
    touch-action: pan-y;
    overscroll-behavior: contain;
    /* Hide the scrollbar (Firefox + IE) — the WebKit rule is below. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.reel-caption.is-expanded::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}
.reel-caption-more {
    display: inline-block;
    margin-top: .15rem;
    color: rgba(255, 255, 255, .92);
    font-weight: 700;
    font-size: .82rem;
    cursor: pointer;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}

/* Modals opened while the full-screen reel viewer (z-index:2050) is open must
   clear it. SCOPED to `body.reel-viewer-open` so normal site modals are never
   affected. Raise the backdrop above the viewer AND raise EVERY `.modal` above
   that backdrop — otherwise reel-viewer modals (delete/checkout/login) get
   buried under the backdrop ("dim, can't click"). */
body.reel-viewer-open .modal-backdrop.show { z-index: 2090 !important; }
body.reel-viewer-open .modal { z-index: 2100 !important; }
body.reel-viewer-open #login-dialog { z-index: 2100 !important; }


/* Locked feed reel: lock icon + Unlock badge over the blurred cover */
.feed-reel-lock {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    pointer-events: none;
}
.feed-reel-lock-icon {
    font-size: 1.9rem;
    color: #fff;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5));
}
.feed-reel-lock-btn {
    background: #d10054;
    color: #fff;
    /* Smaller + wrapping so the full label (Follow to unlock / Unlock video · $10)
       is readable instead of clipped. */
    font-size: .62rem;
    line-height: 1.15;
    font-weight: 700;
    padding: .26rem .6rem;
    border-radius: 12px;
    max-width: 90%;
    text-align: center;
    white-space: normal;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}

/* --- User-specified small overrides (kept last so they win the cascade) --- */
.reel-actions {
    bottom: 1rem !important;
    align-items: center;
}
html.reel-viewer-touch .reel-overlay-text {
    bottom: 1rem;
}
.reel-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .1rem;
}

/* ==========================================================================
   REELS PLAYER SHEETS & SWIPE GUARD (Update 656)
   ========================================================================== */

/* Top sheet (Your Library) height & scrollable fix so no bottom items are cut off/hidden */
.reel-sheet.reel-library-sheet {
    max-height: 85vh !important;
    height: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    padding-bottom: 1.5rem !important;
}

/* Bottom 3-dot options panel: Positioned at fixed bottom:0, z-index 99999999 to COMPLETELY COVER / OVERLAY the mobile bottom navbar underneath it */
.reel-sheet.reel-more-sheet {
    z-index: 99999999 !important;
    pointer-events: auto !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
    color: #121212 !important;
    border-top-left-radius: 1.2rem !important;
    border-top-right-radius: 1.2rem !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    border-bottom: none !important;
    box-shadow: 0 -12px 45px rgba(0, 0, 0, 0.45) !important;
    max-height: 75vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
}

.reel-sheet-backdrop {
    z-index: 99999998 !important;
}

.reel-sheet.reel-more-sheet .reel-sheet-handle {
    background: #c8c8c8 !important;
}

/* Secondary rounded container border wrapping all menu items inside bottom 3-dot panel */
.reel-sheet.reel-more-sheet .reel-sheet-list {
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    border-radius: 0.85rem !important;
    background: #ffffff !important;
    padding: 0.25rem !important;
    margin: 0.5rem 0.8rem 1.2rem !important;
    overflow: hidden !important;
}

.reel-sheet.reel-more-sheet .reel-sheet-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 0 !important;
    padding: 0.65rem 0.85rem !important;
}

.reel-sheet.reel-more-sheet .reel-sheet-item:last-child {
    border-bottom: none !important;
}

.reel-sheet.reel-more-sheet .reel-sheet-title,
.reel-sheet.reel-more-sheet .reel-sheet-item,
.reel-sheet.reel-more-sheet .reel-sheet-label,
.reel-sheet.reel-more-sheet button,
.reel-sheet.reel-more-sheet a {
    color: #121212 !important;
}

.reel-sheet.reel-more-sheet .reel-sheet-item:hover,
.reel-sheet.reel-more-sheet .reel-sheet-item:active {
    background: rgba(0, 0, 0, 0.06) !important;
}

/*
    Dark on the sheet's white background -- but as a STROKE, never as a fill.

    Every icon in this sheet is an outline: a speedometer, an HD badge, a bookmark, two
    overlapping sheets, all drawn as paths with fill="none" in the markup. Painting them
    #121212 filled every one of those outlines in solid black, so the whole column came out
    as nine black blobs with no readable shape -- the ring of "Interested" became a disc, the
    HD badge a rectangle, the copy icon a square.

    This selector carries two classes, so it outranks the .reel-fb-ico svg rules that set
    fill: none, and the !important meant nothing there could win it back.

    The colour has to be on the stroke, which is what these icons are actually drawn with.
    Anything genuinely filled asks for it on its own element -- the dot inside the report
    icon, for instance, sets fill="currentColor" in the markup and follows the colour below.
*/
.reel-sheet.reel-more-sheet ion-icon,
.reel-sheet.reel-more-sheet svg,
.reel-sheet.reel-more-sheet .reel-sheet-ico {
    color: #121212 !important;
    fill: none !important;
    stroke: #121212 !important;
    filter: none !important;
}

/* ============================================================
   REELS PLAYER UNIFIED Z-INDEX & SHEET ISOLATION SYSTEM (Update 675)
   ============================================================ */

/* 1. CLOSED STATES: Backdrop and sheets non-interactive & hidden when closed */
.fx-top-library-sheet.d-none,
.fx-top-library-sheet:not(.is-open),
.reel-sheet.reel-library-sheet.d-none,
.reel-sheet.reel-library-sheet:not(.is-open) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: -100 !important;
    transform: translateY(-100%) !important;
}

.fx-bottom-fb-sheet.d-none,
.fx-bottom-fb-sheet:not(.is-open),
.reel-sheet.reel-fb-more-sheet.d-none,
.reel-sheet.reel-fb-more-sheet:not(.is-open) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: -100 !important;
    transform: translateY(100%) !important;
}

.reel-sheet-backdrop.d-none,
.reel-sheet-backdrop:not(.is-open) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: -100 !important;
}

/* 2. OPEN BACKDROP: Active only when a sheet is open */
.reel-sheet-backdrop.is-open:not(.d-none) {
    display: block !important;
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 9000000 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.65) !important;
    transform: none !important;
}

/* 3. Base top bar & buttons when NO sheet is open */
.reel-top-bar {
    z-index: 10000 !important;
    position: absolute !important;
    top: 0.8rem !important;
    left: 0.8rem !important;
    right: 0.8rem !important;
    transform: none !important;
    pointer-events: auto !important;
}

.reel-top-btn,
.reel-mobile-close,
.reel-search-btn,
.fx-top-library-btn,
.reel-library-btn {
    z-index: 10001 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* 4. Mobile bottom nav & player viewport with real Mobile Chrome dvh / safe-area support */
@media (max-width: 767.98px) {
    .reel-swipe-stage,
    .reel-swipe-preview {
        bottom: 56px !important;
        bottom: calc(0px + env(safe-area-inset-bottom, 0px)) !important;
        overflow: hidden !important;
    }

    /* The 56px gap is for the mobile nav -- but while a panel is open the nav is
       hidden, so the gap is empty space and the comments sheet ends up floating
       56px above the bottom of the screen. reel-sheet-open is on the body then,
       and this rule already excludes it, so the plain `.reel-viewer` below is what
       applies: it goes to bottom: 0 and the sheet sits on the screen edge. */
    body.reel-viewer-open:not(.fx-sheet-open):not(.reel-sheet-open) .reel-viewer,
    body.reels-page-active:not(.fx-sheet-open):not(.reel-sheet-open) .reel-viewer {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 56px !important;
        bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
        height: calc(100vh - 56px) !important;
        height: calc(100dvh - 56px - env(safe-area-inset-bottom, 0px)) !important;
        background: #000000 !important;
        z-index: 2050 !important;
    }

    /* A panel is open: the nav is hidden, so there is nothing to leave room for and
       the viewer runs to the bottom of the screen. Without this the sheet floated
       56px up, over an empty strip where the nav used to be.

       No z-index here, deliberately. Dropping it is what stops .reel-viewer being a
       stacking context, which is what lets the panel inside it paint above the rest
       of the page. */
    body.reel-sheet-open .reel-viewer,
    body.fx-sheet-open .reel-viewer {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        background: #000000 !important;
    }

    body.reel-viewer-open:not(.fx-sheet-open):not(.reel-sheet-open) .reel-actions,
    body.reels-page-active:not(.fx-sheet-open):not(.reel-sheet-open) .reel-actions,
    body.reel-viewer-open:not(.fx-sheet-open):not(.reel-sheet-open) .reel-overlay-text,
    body.reel-viewer-open:not(.fx-sheet-open):not(.reel-sheet-open) .reel-bottom-bar,
    body.reel-viewer-open:not(.fx-sheet-open):not(.reel-sheet-open) .reel-viewer-details,
    body.reels-page-active:not(.fx-sheet-open):not(.reel-sheet-open) .reel-overlay-text,
    body.reels-page-active:not(.fx-sheet-open):not(.reel-sheet-open) .reel-bottom-bar,
    body.reels-page-active:not(.fx-sheet-open):not(.reel-sheet-open) .reel-viewer-details {
        bottom: 0.8rem !important;
        z-index: 2060 !important;
    }

    body.reel-viewer-open:not(.fx-sheet-open):not(.reel-sheet-open) #fx-mobile-bottom-nav-wrap,
    body.reel-viewer-open:not(.fx-sheet-open):not(.reel-sheet-open) .fixed-bottom,
    body.reel-viewer-open:not(.fx-sheet-open):not(.reel-sheet-open) .mobile-bottom-nav,
    body.reels-page-active:not(.fx-sheet-open):not(.reel-sheet-open) #fx-mobile-bottom-nav-wrap,
    body.reels-page-active:not(.fx-sheet-open):not(.reel-sheet-open) .fixed-bottom,
    body.reels-page-active:not(.fx-sheet-open):not(.reel-sheet-open) .mobile-bottom-nav,
    body:has(#reels-feed):not(.fx-sheet-open):not(.reel-sheet-open) #fx-mobile-bottom-nav-wrap,
    body:has(#reels-feed):not(.fx-sheet-open):not(.reel-sheet-open) .fixed-bottom,
    body:has(#reels-feed):not(.fx-sheet-open):not(.reel-sheet-open) .mobile-bottom-nav {
        transform: none !important;
        -webkit-transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 56px !important;
        background: #0d0e11 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
        z-index: 99999 !important;
    }
}

/* 5. Mobile bottom nav WHEN BOTTOM SHEET IS OPEN: Completely hidden & suppressed */
/* The nav is hidden while a panel is open.

   Not ideal -- the bar visibly disappears -- but the alternative was worse. Moving
   the panels out to <body> to escape .reel-viewer's stacking context also moved
   them outside this.$feed, and all ~70 of the player's handlers are delegated from
   there, so nothing inside them responded to a tap at all. Hiding the nav costs a
   visible bar; reparenting cost the panels their behaviour. */
body.reel-comments-open #fx-mobile-bottom-nav-wrap,
body.reel-comments-open .fixed-bottom,
body.reel-comments-open .mobile-bottom-nav,
body.fx-bottom-fb-open #fx-mobile-bottom-nav-wrap,
body.fx-bottom-fb-open .fixed-bottom,
body.fx-bottom-fb-open .mobile-bottom-nav {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

#reels-player {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: #000000 !important;
    z-index: 9999999 !important;
}

@media (min-width: 768px) {
    body.reel-viewer-open .reel-viewer,
    body.reels-page-active .reel-viewer,
    .reel-viewer.is-open {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: #000000 !important;
        z-index: 99999 !important;
        overflow: hidden !important;
    }

    body:not(.reel-viewer-open):not(.reels-page-active) .reel-viewer:not(.is-open) {
        display: none !important;
    }

    .reel-viewer-inner {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        margin: 0 auto !important;
        height: 88vh !important;
        max-height: 88vh !important;
        width: auto !important;
        max-width: calc(100vw - 160px) !important;
        transition: all 0.3s ease !important;
    }

    .reel-viewer-phone {
        position: relative !important;
        height: 88vh !important;
        max-height: 88vh !important;
        width: auto !important;
        aspect-ratio: auto !important;
        max-width: calc(100vw - 200px) !important;
        border-radius: 12px !important;
        overflow: visible !important;
        background: transparent !important;
        margin: 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        transition: all 0.3s ease !important;
    }

    .reel-swipe-stage {
        position: relative !important;
        height: 88vh !important;
        max-height: 88vh !important;
        /*
         * width: max-content, not auto.
         *
         * MEASURED, not guessed (the earlier attempts 2343/2346/2347/2348 all reasoned
         * about this box instead of measuring it, and all four failed).
         *
         * The stage is a BLOCK-LEVEL child of .reel-viewer-phone. For a block box,
         * `width: auto` means FILL THE PARENT -- it does not shrink to fit its contents.
         * The phone is `width: auto` too, and up the chain .reel-viewer-inner and
         * .reel-viewer are as well, so nothing in the chain has an intrinsic width: the
         * only element that knows the real width is the VIDEO, whose width comes from its
         * own aspect ratio at height: 88vh. That number never propagated back up, so the
         * stage simply took the full width available.
         *
         * Every other child of the stage is position:absolute against it --
         * .reel-lock-overlay (inset: 0), .reel-actions (right: -85px), .reel-overlay-text
         * (left/right) and the top bar -- so they all resolved against that too-wide box
         * and drifted right together: the lock panel, the search and 3-dot buttons, the
         * creator name and the caption. One cause, four visible symptoms.
         *
         * max-content sizes the stage to its in-flow content, which is exactly the video.
         * The stage and the video then describe the same box, and the absolutely
         * positioned children land where they were always meant to.
         */
        width: max-content !important;
        max-width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 12px !important;
        overflow: visible !important;
    }

    /*
     * The lock overlay, pinned to the stage.
     *
     * position: absolute ONLY. No top/right/bottom/left -- that is the whole point, and
     * it is what the user verified in the browser.
     *
     * app.css gives the overlay `inset: 0`, which stretches it to the full width of its
     * containing block. Re-asserting those four insets here (as update 2351 did) keeps it
     * stretched and puts the panel right back where it was; commenting them out is what
     * made it correct. Without them the overlay is a shrink-to-fit absolutely positioned
     * box that sits at its static position -- over the video -- and `text-align: center`
     * centres its contents.
     *
     * The !important on position alone is still needed: app.css declares the overlay
     * without !important while this page's desktop rules are almost entirely !important,
     * so the overlay was the one element in this area with no defence.
     */
    .reel-lock-overlay {
        position: absolute !important;
        text-align: center;
    }

    /* 1. HIDE TOP & BOTTOM SWIPE VIDEO PEEKING ON DESKTOP */
    .reel-swipe-preview,
    .reel-swipe-preview-prev,
    .reel-swipe-preview-next {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    /*
        Video shows in its original ratio without a 9:16 forced box.

        NO object-fit HERE. The rule used to end with object-fit: cover !important, which
        contradicted its own comment and, more to the point, overrode the fit the player had
        already worked out from the reel's saved dimensions -- an !important declaration
        beats the inline style the renderer writes. So every reel filled the frame on the
        desktop no matter its shape, and a 1122x792 video lost a slice off each side.

        The fit belongs to isPlayerCoverRatio() in reels-renderer.js, which fills the frame
        for 9:16 and taller and letterboxes everything shorter. Leaving it unset here lets
        that decision through.
    */
    .reel-viewer-video {
        position: relative !important;
        height: 88vh !important;
        max-height: 88vh !important;
        width: auto !important;
        /*
         * A shape to hold BEFORE the video has loaded.
         *
         * `width: auto` on a <video> resolves from its INTRINSIC width, and a video has
         * none until loadedmetadata fires. Until then the element is effectively zero
         * wide, the stage's `width: max-content` measures that zero, and the whole player
         * collapses to a sliver in the centre -- the action rail and the creator name
         * stacked on nothing, which is what the desktop shows for the first moment of
         * every reel. It then snaps into place once metadata arrives.
         *
         * `auto 9 / 16` -- the two-value form, and the distinction matters. With `auto`
         * present, the ratio is used ONLY while the element has no intrinsic ratio of its
         * own; the moment metadata loads, the video's real ratio takes over. A bare
         * `aspect-ratio: 9 / 16` would win permanently and force every landscape reel into
         * a portrait box, which is a worse bug than the one being fixed here. The player
         * corrects object-fit after load but never touches width, so CSS has to be the
         * side that yields.
         *
         * 9/16 is the shape reels are authored in and the default the rest of the player
         * already assumes.
         *
         * object-fit is deliberately NOT set here; it still belongs to
         * isPlayerCoverRatio() in reels-renderer.js, per the note above.
         */
        aspect-ratio: auto 9 / 16;
        max-width: calc(100vw - 260px) !important;
        background: #000000 !important;
        border-radius: 12px !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8) !important;
        transition: all 0.3s ease !important;
        overflow: hidden !important;
    }

    /* 2. LARGE & CLEAR ACTION RAIL ICONS ON THE RIGHT SIDE OF THE VIDEO */
    .reel-actions {
        position: absolute !important;
        right: -85px !important;
        bottom: 20px !important;
        top: auto !important;
        left: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 1.1rem !important;
        z-index: 9900 !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 60px !important;
    }

    .reel-action {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 50px !important;
        color: #ffffff !important;
        text-align: center !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .reel-action button,
    .reel-action a,
    .reel-action-btn,
    .reel-action-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        max-width: 44px !important;
        max-height: 44px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.22) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
        color: #ffffff !important;
        transition: transform 0.2s ease, background 0.2s ease !important;
        margin: 0 auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
    }

    .reel-action ion-icon,
    .reel-action svg,
    .reel-action-btn ion-icon,
    .reel-action-btn svg,
    .reel-action-icon ion-icon,
    .reel-action-icon svg {
        --size: 26px !important;
        font-size: 26px !important;
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        min-height: 26px !important;
        max-width: 26px !important;
        max-height: 26px !important;
        display: block !important;
        color: #ffffff !important;
        fill: none !important;
        stroke: #ffffff !important;
        margin: auto !important;
        opacity: 1 !important;
        stroke-width: 2 !important;
        visibility: visible !important;
    }

    .reel-action:hover button,
    .reel-action:hover a,
    .reel-action:hover .reel-action-btn,
    .reel-action:hover .reel-action-icon {
        transform: scale(1.1) !important;
        background: rgba(255, 255, 255, 0.38) !important;
    }

    .reel-action span,
    .reel-action-count {
        font-size: 13px !important;
        font-weight: 700 !important;
        color: #ffffff !important;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9) !important;
        margin-top: 4px !important;
        display: block !important;
        line-height: 1.2 !important;
    }

    /* Author Avatar, Name, Follow & Caption at Bottom Left of Video */
    /*
        The caption uses the width of the video, because on this breakpoint the action rail
        does not overlap it.

        The 90px kept clear on the right was sized for the phone, where the rail sits ON the
        video and text running under it would be unreadable. Here the rail is pushed out to
        right: -85px -- entirely outside the frame, in the black beside it -- so that reserve
        was holding back a fifth of the width against nothing, and a two-word name like
        "Jacqueline Oficial" wrapped onto two lines with the whole right-hand side of the
        video empty beside it.

        20px each side now, matching the left. If the rail is ever brought back inside the
        frame at this width, this has to go back with it.
    */
    .reel-overlay-text {
        position: absolute !important;
        bottom: 20px !important;
        left: 20px !important;
        right: 20px !important;
        max-width: calc(100% - 40px) !important;
        z-index: 10 !important;
        text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9) !important;
        pointer-events: auto !important;
    }

    /* 3. SCALE VIDEO CONTAINER WHEN COMMENTS PANEL OPENS */
    .reel-viewer.comments-open .reel-viewer-inner {
        max-width: calc(100vw - 120px) !important;
    }

    .reel-viewer.comments-open .reel-viewer-phone {
        max-width: calc(100vw - 580px) !important;
    }

    .reel-viewer.comments-open .reel-viewer-video {
        max-width: calc(100vw - 640px) !important;
    }

    /* Comments panel: OFF by default, opens to the right of actions on comment click */
    .reel-viewer-comments {
        display: none !important;
        overscroll-behavior: contain !important;
    }

    .reel-viewer-comments.is-open,
    .reel-viewer.comments-open .reel-viewer-comments {
        display: flex !important;
        flex-direction: column !important;
        width: 380px !important;
        height: 88vh !important;
        max-height: 88vh !important;
        border-radius: 12px !important;
        margin-left: 95px !important;
        position: relative !important;
        z-index: 20 !important;
        background: #18191a !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
        transform: none !important;
        flex-shrink: 0 !important;
        overscroll-behavior: contain !important;
    }

    /* 4. FIXED POSITION FOR CLOSE (X) & NAV ARROWS 20px FROM RIGHT EDGE */
    .reel-viewer > .reel-viewer-close,
    .reel-viewer-close-floating {
        display: flex !important;
        position: fixed !important;
        top: 20px !important;
        right: 20px !important;
        left: auto !important;
        z-index: 999999 !important;
        width: 44px !important;
        height: 44px !important;
        background: rgba(255, 255, 255, 0.15) !important;
        border-radius: 50% !important;
        color: #ffffff !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.5rem !important;
        backdrop-filter: blur(8px) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
    }

    .reel-viewer-prev {
        display: flex !important;
        position: fixed !important;
        right: 20px !important;
        top: calc(50% - 26px) !important;
        left: auto !important;
        z-index: 999999 !important;
        width: 44px !important;
        height: 44px !important;
        background: rgba(255, 255, 255, 0.15) !important;
        border-radius: 50% !important;
        color: #ffffff !important;
        align-items: center !important;
        justify-content: center !important;
        backdrop-filter: blur(8px) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
    }

    .reel-viewer-next {
        display: flex !important;
        position: fixed !important;
        right: 20px !important;
        top: calc(50% + 26px) !important;
        left: auto !important;
        z-index: 999999 !important;
        width: 44px !important;
        height: 44px !important;
        background: rgba(255, 255, 255, 0.15) !important;
        border-radius: 50% !important;
        color: #ffffff !important;
        align-items: center !important;
        justify-content: center !important;
        backdrop-filter: blur(8px) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
    }

    /* 5. 3-DOT MORE SHEET POPOVER POSITIONED NEXT TO 3-DOT ICON ON DESKTOP */
    .reel-sheet,
    .reel-more-sheet,
    .fx-bottom-fb-sheet {
        position: absolute !important;
        top: 55px !important;
        right: 15px !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        width: 320px !important;
        max-width: 320px !important;
        border-radius: 16px !important;
        background: #242526 !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        box-shadow: 0 12px 36px rgba(0, 0, 0, 0.8) !important;
        z-index: 999999 !important;
        overflow: hidden !important;
        overscroll-behavior: contain !important;
    }

    .reel-library-sheet,
    .fx-top-library-sheet {
        position: absolute !important;
        top: 55px !important;
        left: 20px !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: 360px !important;
        max-width: calc(100% - 40px) !important;
        border-radius: 16px !important;
        background: #242526 !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        box-shadow: 0 12px 36px rgba(0, 0, 0, 0.8) !important;
        z-index: 999999 !important;
        overscroll-behavior: contain !important;
    }

    /* DISMISS CROSS (X) ICON AT TOP RIGHT OF DESKTOP SHEETS */
    .reel-sheet-close-desktop {
        display: flex !important;
        position: absolute !important;
        top: 12px !important;
        right: 14px !important;
        width: 28px !important;
        height: 28px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.15) !important;
        color: #ffffff !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        font-size: 1.2rem !important;
        line-height: 1 !important;
        z-index: 100 !important;
        transition: background 0.2s ease !important;
    }

    .reel-sheet-close-desktop:hover {
        background: rgba(255, 255, 255, 0.3) !important;
    }
}

.mobile-bottom-nav .fxm-item.active::after {
    content: "" !important;
    position: absolute !important;
    top: -7px !important;
    left: 5% !important;
    right: 20% !important;
    width: 85% !important;
    height: 2px !important;
    border-radius: 0 0 4px 4px !important;
    background: var(--primary, #d10054) !important;
    background-color: #d10054 !important;
    z-index: 99 !important;
    transform: none !important;
    display: block !important;
}

/* 6. TOP SHEET ("Your Library") - 100% ISOLATED STYLE */
.fx-top-library-sheet.is-open:not(.d-none),
.reel-sheet.reel-library-sheet.is-open:not(.d-none) {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 99999999 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    max-height: 85vh !important;
    height: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overscroll-behavior-y: contain !important;
    padding-bottom: 2rem !important;
    background: #18191a !important;
    color: #ffffff !important;
    border-bottom-left-radius: 1.2rem !important;
    border-bottom-right-radius: 1.2rem !important;
    box-shadow: 0 10px 45px rgba(0, 0, 0, 0.6) !important;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Hide top bar ONLY when top "Your Library" sheet itself is open */
.reel-viewer-phone.fx-top-library-open .reel-top-bar,
.reel-viewer-phone.reel-library-open .reel-top-bar,
.fx-top-library-open .reel-top-bar,
.reel-library-open .reel-top-bar {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* 7. BOTTOM SHEET (Facebook Reels Options) - 100% ISOLATED STYLE */
.fx-bottom-fb-sheet.is-open:not(.d-none),
.reel-sheet.reel-more-sheet.reel-fb-more-sheet.is-open:not(.d-none) {
    position: fixed !important;
    top: 3.8rem !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: calc(100vh - 3.8rem) !important;
    height: calc(100dvh - 3.8rem) !important;
    max-height: calc(100vh - 3.8rem) !important;
    max-height: calc(100dvh - 3.8rem) !important;
    background: #f0f2f5 !important;
    color: #050505 !important;
    border-top-left-radius: 1rem !important;
    border-top-right-radius: 1rem !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border: none !important;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5) !important;
    z-index: 99999999 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.fx-bottom-fb-handle,
.reel-sheet.reel-more-sheet.reel-fb-more-sheet .reel-sheet-handle {
    width: 40px !important;
    height: 4px !important;
    background: #bcc0c4 !important;
    border-radius: 2px !important;
    margin: 10px auto 6px !important;
    flex: 0 0 auto !important;
}

.fx-bottom-fb-scroll-area,
.reel-fb-scroll-area {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overscroll-behavior-y: auto !important;
    padding: 6px 10px 30px !important;
    margin: 0 !important;
}

.reel-fb-group {
    background: #ffffff !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden !important;
    padding: 2px 0 !important;
}

.reel-fb-group:last-child {
    margin-bottom: 0 !important;
}

/* 8. Requested SVG Icon Styling for Top Library & Bottom 3-Dot Buttons */
.fx-top-library-btn svg,
.reel-library-btn svg,
.fx-bottom-more-btn svg,
.reel-more svg {
    width: 1.5rem !important;
    height: 1.5rem !important;
    padding: 2px !important;
    border: 2px solid #fff !important;
    border-radius: 999px !important;
}

.fx-bottom-more-btn.reel-action svg,
.fx-bottom-more-btn.reel-action ion-icon,
.reel-more.reel-action svg,
.reel-more.reel-action ion-icon {
    width: 1.5rem !important;
    height: 1.5rem !important;
    font-size: 1.5rem !important;
    border: none !important;
    padding: 0 !important;
}

.reel-fb-item {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    padding: 12px 16px !important;
    background: transparent !important;
    border: none !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
}

.reel-fb-item:hover,
.reel-fb-item:active {
    background: #e4e6eb !important;
}

.reel-fb-item.is-muted {
    opacity: 0.55 !important;
    cursor: default !important;
}

.reel-fb-ico {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    color: #050505 !important;
    flex: 0 0 auto !important;
}

.reel-fb-ico svg {
    width: 24px !important;
    height: 24px !important;
    fill: none !important;
    stroke: #050505 !important;
    stroke-width: 2.2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    filter: none !important;
}

.reel-fb-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.reel-fb-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #050505 !important;
    line-height: 1.2 !important;
}

.reel-fb-subtitle {
    font-size: 12.5px !important;
    font-weight: 400 !important;
    color: #65676b !important;
    line-height: 1.2 !important;
}

/* CHECKOUT / UNLOCK / TIP / LOGIN MODALS ALWAYS ON TOP OF REELS VIEWER (z-index 99999) */
#checkout-center,
#login-dialog,
.modal.is-clean-checkout,
.modal.is-tip-checkout,
#checkout-center.show,
#login-dialog.show {
    z-index: 10000000 !important;
}

@media (max-width: 767.98px) {
    .reel-viewer-video {
        width: 100% !important;
        height: 100% !important;
        background: #18191A !important;
    }
}

.reel-fullscreen-pill {
    display: none;
    position: absolute;
    left: 50%;
    top: 60%;
    transform: translateX(-50%);
    z-index: 9;
    align-items: center;
    gap: .35rem;
    padding: .35rem .9rem;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    pointer-events: auto;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Reel grid: the video standing in as its own still frame.

   .reel-grid-preview is opacity:0 by default -- it only fades in on hover. When a
   reel has NO cover image (bulk uploads with no generated poster), the card now
   uses that same video as the still frame, so it has to be visible at rest.
   Without this it would be an invisible element over an empty tile.
   --------------------------------------------------------------------------- */
.reel-grid-preview.reel-grid-preview-poster {
    opacity: 1;
}


/* ============================================================================
   Reels sheet: sub-pages, feedback undo bar, clear mode
   ---------------------------------------------------------------------------
   Clear mode had no styles at all -- the handler toggled .clear-mode-active and
   nothing anywhere responded to it, so the only visible result was a toast
   claiming it had been enabled.
   ========================================================================= */

/* ---- Sub-pages (Quality, Playback speed, Report) ----------------------- */

.reel-sheet-subhead {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 4px 12px;
}

.reel-sheet-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.reel-sheet-back:hover {
    background: rgba(255, 255, 255, .08);
}

body.fx-theme-light .reel-sheet-back:hover {
    background: rgba(0, 0, 0, .06);
}

.reel-sheet-back svg {
    width: 22px;
    height: 22px;
}

.reel-sheet-subtitle {
    font-size: 17px;
    font-weight: 700;
}

/* The radio marker sits at the trailing edge, so the row reads label-first like
   every other list in the sheet. */
.reel-sheet-option,
.reel-report-reason {
    justify-content: space-between;
}

.reel-sheet-radio {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border: 2px solid currentColor;
    border-radius: 50%;
    opacity: .4;
    position: relative;
}

/* Selected uses the site theme colour and is FILLED, not just outlined -- an
   outline-only marker is hard to tell from the unselected ones at a glance. */
.reel-sheet-option.is-selected .reel-sheet-radio,
.reel-report-reason.is-selected .reel-sheet-radio {
    opacity: 1;
    border-color: var(--primary, #d10054);
    background: var(--primary, #d10054);
}

.reel-sheet-option.is-selected .reel-sheet-radio::after,
.reel-report-reason.is-selected .reel-sheet-radio::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: #fff;
}

/* ---- Report page ------------------------------------------------------- */

.reel-report-form {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.reel-report-details {
    margin: 10px 0;
    border-radius: 10px;
    resize: vertical;
}

/* ---- Sheet sizing: everything fits, nothing scrolls -------------------- */
/* The sheet is as tall as its contents, not as tall as the screen.
   ---------------------------------------------------------------
   It was pinned top: 3.8rem AND bottom: 0 with height: calc(100dvh - 3.8rem), so it
   always filled the viewport regardless of how much was in it -- and once the list was
   trimmed to nine entries, the bottom third was empty grey. Anchored to the bottom edge
   only, with the height left to the content. */
.fx-bottom-fb-sheet.is-open:not(.d-none),
.reel-sheet.reel-more-sheet.reel-fb-more-sheet.is-open:not(.d-none) {
    top: auto !important;
    height: auto !important;
    /* Still bounded, so an unusually long sub-page cannot run off the top of the
       screen; it simply never reaches this on the lists we have. */
    max-height: calc(100dvh - 3.8rem) !important;
}

/* The sheet fits its content -- no scroll. The 75vh cap plus overflow above was
   what made the list scrollable in the first place; with the tightened padding
   and type below, every entry is visible at once and the only vertical gesture
   left is drag-to-dismiss. */
.reel-sheet.reel-more-sheet {
    max-height: none !important;
    overflow: visible !important;
}


/* The sheet is short enough to show every entry at once, so it should not scroll
   at all -- a list that scrolls hides the fact that it has ended, and the earlier
   attempt to bound its height only produced a scroll that would go down but not
   back up. Padding and type are tightened instead so the whole list fits, and the
   drag-to-dismiss gesture stays the only vertical interaction. */
.reel-fb-scroll-area,
.reel-sheet-page {
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior: contain;
}

.fx-bottom-fb-scroll-area {
    padding: 6px 10px 14px !important;
}

.reel-fb-group {
    margin-bottom: 8px !important;
    padding: 0 !important;
}

.reel-fb-item {
    gap: 12px !important;
    padding: 9px 14px !important;
}

.reel-fb-ico {
    width: 24px !important;
    height: 24px !important;
}

/* The icons are drawn at stroke-width 2 on a 24px grid; the old 2.2 override made
   every glyph heavier than the site's own icon set. */
.reel-fb-ico svg {
    width: 22px !important;
    height: 22px !important;
    stroke-width: 2 !important;
}

.reel-fb-title {
    font-size: 14.5px !important;
}

.reel-fb-subtitle {
    font-size: 12px !important;
}

/* Sub-pages have a header and can be longer, so they keep their own tighter rhythm. */
.reel-sheet-subhead {
    padding: 2px 2px 8px;
}

.reel-sheet-subtitle {
    font-size: 16px;
}


/* Sheet headers: back arrow pinned left, title optically centred.
   The button is taken out of the flow so the title centres on the sheet rather than on
   the space left over beside the button -- otherwise it sits noticeably right of centre. */
.reel-sheet-subhead {
    position: relative;
    justify-content: center;
}

.reel-sheet-subhead .reel-sheet-back {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* The library sheet drops from the top, so its header needs the same treatment and a
   little breathing room under the drag handle. */
.reel-library-head {
    padding: 2px 2px 10px;
}

.reel-library-sheet .reel-sheet-back {
    color: inherit;
}

/* ---- Feedback undo bar ------------------------------------------------- */

/* Above the mobile bottom navigation, which is z-index 99999. */
.reel-feedback-bar {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 16px;
    z-index: 100000;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 10px;
    background: rgba(32, 32, 32, .96);
    color: #fff;
    font-size: 15px;
    line-height: 1.35;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}

.reel-feedback-text {
    flex: 1 1 auto;
}

.reel-feedback-undo {
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: #5aa7ff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

/* ---- Clear mode -------------------------------------------------------- */

/* Hide every overlay so the video can be watched unobstructed -- including the
   top bar's title and buttons. The back control and the exit button are the
   deliberate exceptions: without a way out the only escape would be tapping the
   video, which is play/pause. */
.reel-viewer-phone.clear-mode-active .reel-actions,
.reel-viewer-phone.clear-mode-active .reel-viewer-meta,
.reel-viewer-phone.clear-mode-active .reel-viewer-caption,
.reel-viewer-phone.clear-mode-active .reel-viewer-author,
.reel-viewer-phone.clear-mode-active .reel-overlay-text,
.reel-viewer-phone.clear-mode-active .reel-progress-wrap,
.reel-viewer-phone.clear-mode-active .reel-viewer-next,
.reel-viewer-phone.clear-mode-active .reel-viewer-prev,
.reel-viewer-phone.clear-mode-active .reel-top-right,
.reel-viewer-phone.clear-mode-active .reel-top-bar > *:not(.reel-mobile-close) {
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}

/* No background plate: a bare glyph over the video, like the rest of the
   overlay controls. Raised clear of the mute button that sits bottom-right. */
.reel-clear-exit {
    position: absolute;
    right: 14px;
    bottom: 65px;
    z-index: 60;
    display: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6));
    cursor: pointer;
}

.reel-viewer-phone.clear-mode-active .reel-clear-exit {
    display: inline-flex;
}

.reel-clear-exit svg {
    width: 24px;
    height: 24px;
}

/* Landscape: the way back must always be there.

   In fullscreen the rule above keeps the top bar visible, but a viewer who
   simply TURNS THE PHONE is not in fullscreen, and the bar then follows the
   normal auto-hide behaviour -- leaving a full-width video with no visible
   way back to the portrait view. The back button stays put in landscape
   whatever the controls are doing; tapping it closes the viewer, which is
   the instant return to how things were. */
@media (orientation: landscape) {
    .reel-viewer-phone .reel-top-bar {
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 14 !important;
    }

    .reel-viewer-phone .reel-top-bar .reel-viewer-close {
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}


/* ============================================================
   THE 3-DOT MENU ON A FEED REEL CARD

   Sits over the card's top-right corner. It has to be a sibling of the card rather than a
   child, because the card is itself a <button> and a button cannot contain another one --
   so the slide is the positioning context, not the card.
   ============================================================ */
.feed-reel-slide {
    position: relative;
}

.feed-reel-menu {
    position: absolute;
    top: 6px;
    right: 6px;
    /* Above the card and its gradient, below any modal the menu opens. */
    z-index: 6;
}

.feed-reel-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .42);
    color: #fff;
    cursor: pointer;
    /* A thumbnail can be light or dark; the plate keeps the dots readable over both. */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background .15s ease;
}

.feed-reel-menu-btn:hover,
.feed-reel-menu-btn:focus {
    background: rgba(0, 0, 0, .66);
    outline: none;
}

.feed-reel-menu-btn svg {
    width: 16px;
    height: 16px;
}

.feed-reel-menu-list {
    position: absolute;
    top: 32px;
    right: 0;
    z-index: 7;
    min-width: 170px;
    padding: 6px 0;
    border: 1px solid rgba(138, 150, 163, .22);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
}

.feed-reel-menu-item {
    display: block;
    width: 100%;
    padding: 9px 14px;
    border: 0;
    background: transparent;
    color: #050505;
    font-size: 14px;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.feed-reel-menu-item:hover,
.feed-reel-menu-item:focus {
    background: rgba(0, 0, 0, .05);
    outline: none;
}

.feed-reel-menu-item--danger {
    color: #dc3545;
}

.feed-reel-menu-divider {
    display: block;
    height: 1px;
    margin: 6px 0;
    background: rgba(138, 150, 163, .22);
}

body.fx-theme-dark .feed-reel-menu-list {
    border-color: rgba(255, 255, 255, .12);
    background: #242526;
}

body.fx-theme-dark .feed-reel-menu-item {
    color: #e4e6eb;
}

body.fx-theme-dark .feed-reel-menu-item:hover,
body.fx-theme-dark .feed-reel-menu-item:focus {
    background: rgba(255, 255, 255, .08);
}

body.fx-theme-dark .feed-reel-menu-divider {
    background: rgba(255, 255, 255, .12);
}

/* The last cards in a strip would open their menu off the right edge of the screen, where
   it cannot be read or reached. Those flip to open leftwards instead. */
.swiper-slide:nth-last-child(-n+2) .feed-reel-menu-list {
    right: auto;
    left: 0;
}


/* ============================================================
   SUBSCRIPTION SCOPE: what the subscription actually opens
   ============================================================

   "Subscribe to unlock" beside one locked reel reads like a price for THAT reel. A compact
   row of icon + count chips answers it at a glance -- the numbers are plainly bigger than
   one reel -- without the paragraph of text the first attempt used, which swamped the panel
   and competed with the button it was meant to support.

   Deliberately quiet: the chips sit at reduced opacity on a soft pill ground so the
   Subscribe button stays the loudest thing in the lock. They inform; they do not sell.
   ============================================================ */
.reel-sub-scope {
    /* Stated outright for the same reason as .fx-sub-scope in app.css -- the row sits
       inside the lock overlay's own flex context and must not inherit its alignment. */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center;
    text-align: center;
    gap: .4rem;
    margin: .1rem 0 .15rem;
}

.reel-sub-chips {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    flex-wrap: wrap;
}

.reel-sub-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .22rem .55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .13);
    color: #fff;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.reel-sub-chip svg {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    opacity: .9;
}

.reel-sub-chip-n {
    font-variant-numeric: tabular-nums;
}

.reel-sub-note {
    color: rgba(255, 255, 255, .72);
    font-size: .7rem;
    line-height: 1.35;
    text-align: center;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}