/* Feed POC styles — Phase 3 (TikTok-style full-bleed layout).
   - body.is-feed locks document scroll (overrides global body { padding-bottom: 65px })
   - .feed-stage covers the viewport (position: fixed; inset: 0)
   - .feed-vid__media uses object-fit: cover (no black letterbox bars)
   - All overlays anchored to the BOTTOM of the frame:
       * bottom-left: author row + caption + chips
       * right-rail (above footer): share button + three-dot menu
       * footer-nav: 5 icons at the very bottom
*/

/* ============================================================
   SCROLL LOCK — only fires on /feed pages (body.is-feed).
   Overrides the global body { padding-bottom: 65px } from style.css ~20648.
   ============================================================ */
html:has(body.is-feed),
body.is-feed {
    overflow: hidden !important;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: 0 !important;
    padding-bottom: 0 !important;
    background: #000;
}

/* ============================================================
   STAGE & FRAME
   Full-viewport, no doc scroll. Phone-frame on desktop, full-bleed on mobile.
   ============================================================ */
.feed-stage {
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at 30% 0%, #1a1f3a 0%, #0a0e1a 60%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.feed-frame {
    position: relative;
    width: 100%;
    max-width: 420px;
    height: 100vh;
    height: 100dvh;
    background: #000;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.feed-frame::-webkit-scrollbar { display: none; }

/* Floating logo overlay — sits above the stage, links to /.
   The video frame is max-width:420px and centered, so on desktop a left:16px
   anchor leaves the logo orphaned at the screen edge. We anchor instead to
   the frame's top-left corner via clamp(16px, calc(50% - 210px + 12px)) —
   on phone-width viewports this evaluates to 16px (current mobile behaviour);
   on desktop it sits just inside the video frame's top-left, overlaying it
   like a Reels/Shorts logo. */
.feed-logo,
.feed-back {
    position: fixed;
    top: 14px;
    left: max(16px, calc(50% - 210px + 12px));
    z-index: 200;
}
.feed-logo {
    opacity: 0.92;
    transition: opacity .2s, transform .2s;
    transform-origin: left center;
}
.feed-logo:hover { opacity: 1; transform: scale(1.04); }
.feed-logo img {
    height: 26px;
    width: auto;
    display: block;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.6));
}
.feed-logo[hidden] { display: none; }

/* Back chevron — shown only when the visitor came from another page on the
   same site (toggled by the inline script in feed.php). Same anchor as the
   logo so it occupies the same slot. Reels/Stories-style frosted glass chip. */
.feed-back {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    transition: background .18s ease, transform .18s ease;
}
.feed-back:hover { background: rgba(0, 0, 0, 0.6); color: #fff; transform: scale(1.05); text-decoration: none; }
.feed-back i { font-size: 20px; line-height: 1; }
.feed-back[hidden] { display: none; }

/* ============================================================
   PER VIDEO — fills the frame; content goes ABOVE absolutely-positioned overlays.
   ============================================================ */
.feed-vid {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background: #000;
    overflow: hidden;
}

.feed-vid__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* TikTok-style fill — may crop, no black bars. */
    object-fit: cover;
    background: #000;
    display: block;
    z-index: 1;
}

/* Subtle gradient at the bottom so overlays remain readable over bright video. */
.feed-vid::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 280px;
    z-index: 2;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 70%, rgba(0,0,0,0.85) 100%);
    pointer-events: none;
}

/* ============================================================
   BOTTOM-LEFT OVERLAY — author + caption + chips, stacked.
   Sits above the footer nav (56px tall).
   ============================================================ */
.feed-vid__bottom {
    position: absolute;
    left: 12px;
    right: 70px;          /* leave room for the right-rail */
    bottom: 68px;         /* above the 56px footer-nav, with 12px breathing room */
    z-index: 6;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}

.feed-author-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.feed-author {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #fff;
    flex: 1;
    min-width: 0;
}

.feed-author__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid #fff;
    background: #333;
    flex-shrink: 0;
}

.feed-author__handle {
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.feed-author__badge {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

.feed-follow-btn {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.85);
    padding: 4px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, transform .15s;
    flex-shrink: 0;
    line-height: 1.4;
}
.feed-follow-btn:hover { background: rgba(255,255,255,0.15); }
.feed-follow-btn:active { transform: scale(0.94); }
.feed-follow-btn.is-following {
    background: rgba(54,179,126,0.85);
    border-color: rgba(54,179,126,0.85);
}

.feed-caption {
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
    word-break: break-word;
    color: #fff;
}
/* Captions with > 5 words render two spans: __truncated (visible by default)
   and __full (hidden until "see more" is clicked). The JS swaps the [hidden]
   attribute on each. */
.feed-caption__truncated[hidden],
.feed-caption__full[hidden] { display: none; }

.feed-caption__more {
    color: rgba(255,255,255,0.85);
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    margin-left: 4px;
    white-space: nowrap;
}
.feed-caption__more:hover { color: #fff; text-decoration: underline; }

.feed-vid__chips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.feed-link-card {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.25);
    padding: 4px 10px 4px 4px;
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    transition: background .15s, transform .15s;
}
.feed-link-card:hover {
    background: rgba(255,255,255,0.28);
    color: #fff;
    transform: translateY(-1px);
}
.feed-link-card__icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    object-fit: cover;
    padding: 2px;
    box-sizing: border-box;
}

.feed-category-pill {
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.25);
    padding: 4px 12px;
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    transition: background .15s;
}
.feed-category-pill:hover {
    background: rgba(255,255,255,0.28);
    color: #fff;
}

/* ============================================================
   RIGHT RAIL — share + three-dot, vertical stack just above footer-nav.
   ============================================================ */
.feed-vid__rail {
    position: absolute;
    right: 12px;
    bottom: 68px;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.feed-rail-btn {
    background: rgba(0, 0, 0, 0.45);
    border: 0;
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background .15s, transform .15s;
    font-size: 22px;
    text-decoration: none;
}
.feed-rail-btn:hover { background: rgba(0, 0, 0, 0.65); color: #fff; }
.feed-rail-btn:active { transform: scale(0.92); }
.feed-rail-btn.is-liked { color: #ff3b5c; }
.feed-rail-btn.is-liked:hover { color: #ff3b5c; }

/* "More" button (three-dot menu) — hidden until we have something to put in it.
   Markup stays in place in feed.php + feed.js's renderVideoSection so re-enabling
   is just removing this rule. */
.feed-rail-btn[data-action="more"] { display: none; }

/* Category pill (#category placeholder) — hidden until feed_videos has a real
   category column + data. Markup stays in feed.php + feed.js's renderVideoSection
   so re-enabling is just removing this rule. */
.feed-category-pill { display: none; }


/* ============================================================
   PROGRESS BAR — sits on top of the footer-nav, bottom border of the video.
   ============================================================ */
.feed-vid__progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 56px;
    height: 3px;
    z-index: 7;
    background: rgba(255, 255, 255, 0.25);
    pointer-events: none;
}
.feed-vid__progress-fill {
    height: 100%;
    width: 0;
    background: #fff;
}

/* ============================================================
   FOOTER NAV — fixed at the very bottom of the phone-frame.
   ============================================================ */
.feed-vid__footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 7;
    background: rgba(15, 16, 31, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 8px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.feed-nav-btn {
    background: transparent;
    border: 0;
    color: #fff;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 24px;
    transition: transform .15s, opacity .15s;
    text-decoration: none;
    opacity: 0.85;
}
.feed-nav-btn:hover { opacity: 1; color: #fff; }
.feed-nav-btn:active { transform: scale(0.92); }
.feed-nav-btn.is-active { opacity: 1; color: #fff; }

/* ============================================================
   DOUBLE-TAP HEART POP — purely visual placebo.
   ============================================================ */
.feed-heart-pop {
    position: absolute;
    z-index: 8;
    color: #ff3b5c;
    font-size: 80px;
    pointer-events: none;
    animation: feed-heart-pop 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    text-shadow: 0 4px 16px rgba(255,59,92,0.6);
    transform-origin: center;
}
@keyframes feed-heart-pop {
    0%   { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    25%  { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
    60%  { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.85); opacity: 0; }
}

/* ============================================================
   EMPTY / LOADER / END / TOAST.
   ============================================================ */
.feed-empty {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #6f7d95;
    text-align: center;
    padding: 40px 20px;
    background: #0a0e1a;
}
.feed-empty i { font-size: 64px; opacity: 0.4; margin-bottom: 16px; }
.feed-empty h2 { font-size: 18px; margin: 0 0 6px; color: #c5d0e8; }
.feed-empty p { font-size: 14px; margin: 0; }

.feed-loader {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: none;
}
.feed-loader__spin {
    width: 28px; height: 28px;
    border: 3px solid rgba(255,255,255,0.15);
    border-top-color: #566ffe;
    border-radius: 50%;
    animation: feed-spin 0.7s linear infinite;
}
@keyframes feed-spin { to { transform: rotate(360deg); } }

.feed-end {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6f7d95;
    font-size: 13px;
    gap: 6px;
    scroll-snap-align: none;
}
.feed-end i { font-size: 18px; color: #36b37e; }

.feed-toast {
    position: fixed;
    bottom: 78px;        /* above the footer nav so it's never hidden */
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 12px 20px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    backdrop-filter: blur(10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s, transform .25s;
    z-index: 300;
    max-width: 90vw;
    text-align: center;
}
.feed-toast.is-showing {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ============================================================
   iOS install modal — shown when an iOS visitor taps the install
   icon in the footer nav. Mirrors FikFap's UX.
   ============================================================ */
.feed-install-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}
.feed-install-modal[hidden] { display: none; }

.feed-install-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: feed-install-fade .2s ease forwards;
}
.feed-install-modal__panel {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 20px;
    padding: 24px 22px 26px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
    animation: feed-install-slideup .25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    box-sizing: border-box;
}

.feed-install-modal__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: #6f7d95;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
}
.feed-install-modal__close:hover { background: #f1f4f9; color: #183b56; }

.feed-install-modal__title {
    font-size: 22px;
    font-weight: 700;
    color: #183b56;
    margin: 4px 0 18px;
}

.feed-install-modal__card {
    background: linear-gradient(135deg, #ffffff 0%, #f0f3ff 100%);
    border: 1px solid #e2eef1;
    border-radius: 16px;
    padding: 20px 16px;
}

.feed-install-modal__subtitle {
    font-size: 17px;
    font-weight: 700;
    color: #183b56;
    text-align: center;
    margin: 0 0 18px;
}

.feed-install-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.feed-install-step {
    flex: 0 0 auto;
    width: 84px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.feed-install-step__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #e8eeff;
    color: #566ffe;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 10px;
}

.feed-install-step__icon--brand {
    background: #000;
    overflow: hidden;
    padding: 0;
}
.feed-install-step__icon--brand img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.feed-install-step__label {
    font-size: 11.5px;
    font-weight: 600;
    color: #183b56;
    text-align: center;
    line-height: 1.25;
}

.feed-install-arrow {
    color: #c5d0e8;
    font-size: 24px;
    flex: 0 0 auto;
}

@keyframes feed-install-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes feed-install-slideup {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

@media (max-width: 380px) {
    .feed-install-step { width: 70px; }
    .feed-install-step__icon { width: 48px; height: 48px; font-size: 20px; }
}

/* ============================================================
   MOBILE — full-bleed, no phone-frame chrome (already 100dvh on mobile via main rules).
   ============================================================ */
@media (max-width: 600px) {
    .feed-stage {
        background: #000;
    }
    .feed-frame {
        max-width: 100%;
        border-radius: 0;
        box-shadow: none;
    }
}

/* ============================================================
   SHARED MODAL BASE — duplicated from style.css since /feed skips it.
   Keep in sync with the .last-visited-modal* rules in style.css.
   ============================================================ */
.last-visited-modal {
    display: none; position: fixed; z-index: 10000; left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgb(0 0 0 / .6); backdrop-filter: blur(5px);
    animation: rb-fade-in 0.3s ease;
}
@keyframes rb-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rb-slide-up { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.last-visited-modal-content {
    background-color: #fff; margin: 5% auto; padding: 0; border-radius: 16px;
    width: 90%; max-width: 650px; max-height: 75vh; overflow: hidden;
    box-shadow: 0 10px 40px rgb(0 0 0 / .2);
    animation: rb-slide-up 0.4s cubic-bezier(.4,0,.2,1);
}
.last-visited-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 25px; border-bottom: 2px solid #e2eef1;
    background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
}
.last-visited-header h3 {
    margin: 0; font-size: 20px; font-weight: 700; color: #183b56;
    display: flex; align-items: center; gap: 10px;
}
.last-visited-header h3 i { color: #566ffe; }
.last-visited-close {
    background: none; border: none; color: #999; font-size: 32px; font-weight: 300;
    cursor: pointer; transition: all 0.3s ease; padding: 0;
    width: 32px; height: 32px; line-height: 28px; border-radius: 50%;
}
.last-visited-close:hover { color: #f44; background: #fff0f0; transform: rotate(90deg); }

/* The login-prompt CTA uses .btn-grad on the public site. style.css is not
   loaded here, so re-create just the gradient look it relies on. */
.btn-grad {
    background: linear-gradient(135deg, #566ffe 0%, #db74ff 100%);
    border: none;
}

/* ============================================================
   SEARCH MODAL — mirrors style.css:20646 .header__search-mobile block.
   /feed renders global_search_modal.php so logged-out users can search.
   ============================================================ */
.header__search-mobile {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    background: rgb(0 0 0 / .5); backdrop-filter: blur(5px);
    z-index: 10001; display: flex; align-items: center; justify-content: center;
    padding: 20px; opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease;
}
.header__search-mobile.active { opacity: 1; pointer-events: auto; }
.mobile-search-container {
    position: relative; display: flex; flex-direction: column; align-items: center;
    gap: 15px; padding: 40px 30px; width: 100%; max-width: 500px; max-height: 90vh;
    background: #fff; border-radius: 24px; box-shadow: 0 20px 60px rgb(0 0 0 / .3);
    opacity: 0; transform: scale(.9) translateY(-20px);
    transition: all 0.4s cubic-bezier(.4,0,.2,1);
}
.header__search-mobile.active .mobile-search-container { opacity: 1; transform: scale(1) translateY(0); }
.mobile-search-container form { width: 100%; display: flex; align-items: center; gap: 10px; }
.mobile-search-container input {
    flex: 1; padding: 15px 20px; border: 2px solid #566ffe; border-radius: 50px;
    background: #fff; color: #333; font-size: 16px; outline: none;
    box-shadow: 0 4px 20px rgb(86 111 254 / .3); transition: all 0.3s ease;
}
.mobile-search-container input:focus { box-shadow: 0 6px 30px rgb(86 111 254 / .5); transform: scale(1.02); }
.mobile-search-submit {
    width: 50px; height: 50px; border: none; border-radius: 50%;
    background: #566ffe; color: #fff; font-size: 20px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s ease; box-shadow: 0 4px 15px rgb(86 111 254 / .4);
}
.mobile-search-submit:hover { background: #4461e8; transform: scale(1.1); }
.mobile-search-close {
    position: absolute; top: -15px; right: -15px;
    width: 40px; height: 40px; border: 2px solid #fff; border-radius: 50%;
    background: #566ffe; color: #fff; font-size: 20px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s ease; box-shadow: 0 4px 12px rgb(0 0 0 / .2); z-index: 1;
}
.mobile-search-close:hover { background: #4461e8; transform: rotate(90deg) scale(1.15); }
.popular-tags { width: 100%; margin-top: 20px; text-align: left; }
.popular-tags-title {
    font-size: 13px; font-weight: 600; color: #666; margin-bottom: 12px;
    text-transform: uppercase; letter-spacing: .5px;
}
.tags-container { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-chip {
    display: inline-flex; align-items: center; padding: 8px 16px;
    background: #f0f2ff; color: #566ffe; border: 1px solid #e0e5ff;
    border-radius: 20px; font-size: 13px; font-weight: 500;
    text-decoration: none; transition: all 0.2s ease;
}
.tag-chip:hover {
    background: #566ffe; color: #fff; border-color: #566ffe;
    transform: translateY(-2px); box-shadow: 0 4px 12px rgb(86 111 254 / .3);
}

/* ============================================================
   LIKED-VIDEOS DRAWER — opened from the heart/bookmark nav button.
   Reuses the shared .last-visited-modal frame; only the body is custom.
   ============================================================ */
#rb-feed-likes-modal .last-visited-modal-content { max-width: 480px; }
.rb-feed-likes-body {
    max-height: calc(80vh - 80px);
    overflow-y: auto;
    padding: 0;
}
.rb-feed-likes-loading,
.rb-feed-likes-empty {
    text-align: center;
    padding: 40px 24px;
    color: #6f7d95;
    font-size: 14px;
    line-height: 1.5;
}
.rb-feed-likes-loading i,
.rb-feed-likes-empty i {
    font-size: 38px;
    color: #c5d0ee;
    display: block;
    margin-bottom: 12px;
}
.rb-feed-likes-loading i { animation: feed-spin 0.9s linear infinite; }
@keyframes feed-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.rb-feed-likes-empty p { margin: 0; }

.rb-feed-likes-list {
    display: flex;
    flex-direction: column;
}
.rb-feed-likes-item {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px 16px;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.15s ease;
    border-bottom: 1px solid #f0f4ff;
}
.rb-feed-likes-item:last-child { border-bottom: none; }
.rb-feed-likes-item:hover {
    background: #f7f9ff;
    text-decoration: none;
    color: inherit;
}
.rb-feed-likes-thumb {
    width: 48px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
    background: #000;
    flex-shrink: 0;
    display: block;
}
.rb-feed-likes-thumb--blank {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #eef2ff 0%, #f7e9ff 100%);
    color: #566ffe;
    font-size: 22px;
}
.rb-feed-likes-info {
    flex: 1;
    min-width: 0;
}
.rb-feed-likes-handle {
    font-size: 13.5px;
    font-weight: 700;
    color: #183b56;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rb-feed-likes-caption {
    font-size: 13px;
    color: #6f7d95;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}