/**
 * snifffr — modern activity feed (desktop + mobile).
 *
 * Applies to the main feed and the profile feed, which both render through
 * buddypress/activity/entry.php, so one file covers both surfaces.
 *
 * The old feed was BuddyPress legacy: a floated avatar beside a content
 * column, with .img-thumb.feeds capped at 150px (custom.css:4253). That is
 * what made posts read as a small thumbnail stranded in a wide empty card.
 *
 * This is CSS-only on purpose. entry.php is BuddyPress's template, reused by
 * the AJAX loop and the single-activity view, so re-templating it risks the
 * comment flow, the love button and the moderation notice. Everything below
 * is achievable by taking the avatar out of flow and letting the media span
 * the card.
 *
 * Brand: pink #E65C95, ink #332E4D, muted #6b7280.
 */

:root {
    --snf-act-pink: #E65C95;
    --snf-act-pink-deep: #d34a83;
    --snf-act-ink: #332E4D;
    --snf-act-muted: #6b7280;
    --snf-act-line: rgba(51, 46, 77, 0.08);
    --snf-act-radius: 16px;
}

/* ── The card ─────────────────────────────────────────────────────────── */
#buddypress .activity-list li.activity-item {
    position: relative;
    margin: 0 0 14px;
    padding: 0;
    background: #fff;
    border: 1px solid var(--snf-act-line);
    border-radius: var(--snf-act-radius);
    box-shadow: 0 1px 3px rgba(51, 46, 77, 0.05);
    overflow: hidden;
    list-style: none;
}
#buddypress .activity-list li.activity-item::after { content: none; }

/* Avatar out of flow, so the media below can span the full card instead of
   being indented beside it — the single change the old layout could not make. */
#buddypress .activity-list li.activity-item > .activity-avatar {
    position: absolute;
    top: 14px;
    left: 16px;
    width: 40px;
    height: 40px;
    margin: 0;
    float: none;
}
#buddypress .activity-list li.activity-item > .activity-avatar img {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    margin: 0 !important;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(230, 92, 149, 0.28);
}

#buddypress .activity-list li.activity-item > .activity-content {
    margin: 0;
    padding: 0;
    width: auto;
}

/* ── Header: name, action, time ────────────────────────────────────────── */
#buddypress .activity-list .activity-header {
    padding: 15px 16px 11px 68px;   /* 68px clears the absolute avatar */
    min-height: 40px;
}
#buddypress .activity-list .activity-header p {
    margin: 0;
    font-size: 14px;
    line-height: 1.35;
    color: var(--snf-act-muted);
}
#buddypress .activity-list .activity-header p > a:first-child {
    font-size: 15px;
    font-weight: 700;
    color: var(--snf-act-ink) !important;
    text-decoration: none !important;
}
#buddypress .activity-list .activity-header p > a:first-child:hover {
    color: var(--snf-act-pink-deep) !important;
}
/* Timestamp drops to its own line, the way every modern feed reads. */
#buddypress .activity-list .activity-header .time-since {
    display: block;
    margin-top: 1px;
    font-size: 12.5px;
    color: var(--snf-act-muted);
}

/* ── Media: full-bleed, large ──────────────────────────────────────────── */
#buddypress .activity-list .activity-inner { margin: 0; padding: 0; }
#buddypress .activity-list .activity-inner:empty { display: none; }

#buddypress .activity-list .activity-inner .img-thumb.feeds {
    max-width: none !important;
    width: 100%;
    margin: 0 !important;
    background: #f3f4f6;
    line-height: 0;
}
#buddypress .activity-list .activity-inner .img-thumb.feeds a { display: block; }
#buddypress .activity-list .activity-inner .img-thumb.feeds img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    /* Tall portrait uploads are the norm here; cap the height so one post
       cannot fill the whole viewport, but never crop a landscape shot. */
    max-height: 620px !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    margin: 0 !important;
    display: block;
}

/* ── Post text ─────────────────────────────────────────────────────────── */
#buddypress .activity-list .snifffr-act-text {
    padding: 14px 16px 2px;
}
/* The title carries an inline font-size from change_activity_feed(), and the
   old styling was uppercase pink — shouty, and hard to read at length. */
#buddypress .activity-list .snifffr-act-text h2 {
    margin: 0 0 6px;
    font-size: 17px !important;
    line-height: 1.3;
    font-weight: 700;
    text-transform: none !important;
    letter-spacing: normal !important;
}
#buddypress .activity-list .snifffr-act-text h2 a {
    color: var(--snf-act-ink) !important;
    text-decoration: none !important;
}
#buddypress .activity-list .snifffr-act-text h2 a:hover { color: var(--snf-act-pink-deep) !important; }
#buddypress .activity-list .snifffr-act-text p,
#buddypress .activity-list .activity-inner > p {
    margin: 0 0 8px;
    font-size: 15px;
    line-height: 1.5;
    color: #4a4660;
}
#buddypress .activity-list .activity-inner > p { padding: 0 16px; }

/* Plain status updates (no media) need breathing room, not a cramped strip. */
#buddypress .activity-list li.activity_update .activity-inner > p:first-child {
    padding-top: 2px;
    font-size: 16px;
}

/* ── Action bar ────────────────────────────────────────────────────────── */
#buddypress .activity-list .activity-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 0;
    padding: 8px 10px;
    border-top: 1px solid var(--snf-act-line);
}
#buddypress .activity-list .activity-meta a.button,
#buddypress .activity-list .activity-meta a.bp-primary-action,
#buddypress .activity-list .activity-meta a.bp-secondary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    margin: 0 !important;
    padding: 8px 14px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--snf-act-muted) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-transform: none !important;
    text-decoration: none !important;
    transition: background 0.15s ease, color 0.15s ease;
}
#buddypress .activity-list .activity-meta a.button:hover {
    background: rgba(230, 92, 149, 0.08) !important;
    color: var(--snf-act-pink-deep) !important;
}
#buddypress .activity-list .activity-meta a.button i { font-size: 15px; }
/* A loved post should be unmistakable at a glance. */
/* snifffr-activity-likes.js toggles .is-loved and leaves aria-pressed at its
   server-rendered value, so .is-loved is the only class that tracks a click. */
#buddypress .activity-list .activity-meta a.snifffr-love.is-loved {
    color: var(--snf-act-pink) !important;
}
#buddypress .activity-list .activity-meta a.snifffr-love.is-loved i { color: var(--snf-act-pink) !important; }
/* Delete is a destructive action: keep it present but quiet, and pushed away
   from the actions people actually use. */
#buddypress .activity-list .activity-meta a.delete-activity {
    margin-left: auto !important;
    font-size: 12.5px !important;
    color: #9ca3af !important;
}
#buddypress .activity-list .activity-meta a.delete-activity:hover {
    background: rgba(217, 43, 75, 0.08) !important;
    color: #d92b4b !important;
}

/* ── "became a member" and other no-content posts ─────────────────────── */
/* These have no media and no body, so the card should read as a one-line
   notice rather than an empty box the size of a photo post. */
#buddypress .activity-list li.new_member .activity-header,
#buddypress .activity-list li.new_avatar .activity-header,
#buddypress .activity-list li.friendship_created .activity-header,
#buddypress .activity-list li.updated_profile .activity-header {
    padding-bottom: 13px;
}

/* ── Comments ──────────────────────────────────────────────────────────── */
/* BuddyPress prints .activity-comments on EVERY item — it is the host for the
   hidden reply form, so it exists even when nobody has commented. A border or
   a background on the container therefore drew a second rule and a grey strip
   under the action bar on posts with no comments. Style only the parts that
   exist when there is actually something to show: the comment list, and the
   form once it has been opened (it is display:none until then, so its border
   does not paint). */
#buddypress .activity-list .activity-comments {
    margin: 0;
    padding: 0 16px;
    background: transparent;
    border-top: 0;
}
#buddypress .activity-list .activity-comments > ul {
    margin: 0;
    padding: 12px 0;
    background: transparent;
    border-top: 1px solid var(--snf-act-line);
}
#buddypress .activity-list .activity-comments ul li { border: 0; }
/* Comment actions: Reply is the action people want, Delete is the one they
   press by mistake. They were rendering identically in pink. Demote Delete
   the same way it is demoted in the post's own action bar. */
#buddypress .activity-list .acomment-options {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 6px;
}
#buddypress .activity-list .acomment-options a {
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}
#buddypress .activity-list .acomment-options a.acomment-reply { color: var(--snf-act-pink) !important; }
#buddypress .activity-list .acomment-options a.acomment-reply:hover { color: var(--snf-act-pink-deep) !important; }
#buddypress .activity-list .acomment-options a.acomment-delete {
    margin-left: auto;
    font-size: 12.5px;
    font-weight: 500;
    color: #9ca3af !important;
}
#buddypress .activity-list .acomment-options a.acomment-delete:hover { color: #d92b4b !important; }

#buddypress .activity-list .ac-form {
    margin: 0;
    padding: 12px 0;
    border-top: 1px solid var(--snf-act-line);
}
#buddypress .activity-list .ac-form .ac-textarea textarea {
    width: 100%;
    border: 1px solid var(--snf-act-line);
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 14px;
    resize: vertical;
}
#buddypress .activity-list .ac-form input[type="submit"] {
    margin-top: 8px;
    padding: 9px 20px;
    border: 0;
    border-radius: 999px;
    background: var(--snf-act-pink);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
#buddypress .activity-list .ac-form input[type="submit"]:hover { background: var(--snf-act-pink-deep); }

/* ── Mobile ────────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    :root { --snf-act-radius: 14px; }
    #buddypress .activity-list li.activity-item { margin-bottom: 10px; }
    #buddypress .activity-list .activity-header { padding: 13px 14px 10px 62px; }
    #buddypress .activity-list li.activity-item > .activity-avatar { top: 12px; left: 14px; }
    #buddypress .activity-list .snifffr-act-text { padding: 12px 14px 2px; }
    #buddypress .activity-list .activity-inner > p { padding: 0 14px; }
    #buddypress .activity-list .activity-inner .img-thumb.feeds img {
        /* On a phone the viewport is the constraint, not a pixel cap. */
        max-height: 78vh !important;
    }
    #buddypress .activity-list .activity-meta { padding: 6px 6px; }
    #buddypress .activity-list .activity-meta a.button { padding: 9px 12px !important; }
    #buddypress .activity-list .activity-comments { padding: 0 14px; }
}

/* ── Specificity override ─────────────────────────────────────────────────
   snifffr-desktop-redesign.css carries
     body.snifffr-desktop-beta #buddypress .activity-inner .img-thumb.feeds img
   at (1,4,2) with width:auto !important — written to rescue the thumbnail
   from an avatar-shrink rule. It outranks the (1,4,1) selector above, so on
   desktop the media would have stayed narrow no matter the load order.
   These selectors sit above it deliberately; anything targeting this image
   needs to clear (1,4,2) or it silently loses. */
body.snifffr-desktop-beta #buddypress .activity-list .activity-inner .img-thumb.feeds img,
body.snifffr-mobile-beta #buddypress .activity-list .activity-inner .img-thumb.feeds img,
body #buddypress .activity-list .activity-inner .img-thumb.feeds img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 620px !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    margin: 0 !important;
    display: block !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
}
body.snifffr-desktop-beta #buddypress .activity-list .activity-inner .img-thumb.feeds,
body.snifffr-mobile-beta #buddypress .activity-list .activity-inner .img-thumb.feeds,
body #buddypress .activity-list .activity-inner .img-thumb.feeds {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
}
@media (max-width: 991.98px) {
    body.snifffr-desktop-beta #buddypress .activity-list .activity-inner .img-thumb.feeds img,
    body.snifffr-mobile-beta #buddypress .activity-list .activity-inner .img-thumb.feeds img,
    body #buddypress .activity-list .activity-inner .img-thumb.feeds img {
        max-height: 78vh !important;
    }
}

/* The action bar hits the same trap as the image. snifffr-desktop-redesign.css
   styles these as bordered uppercase pills at
     body.snifffr-desktop-beta #buddypress .activity-meta a.button   (1,3,2)
   which beats the (1,3,1) flat-bar rules above no matter the load order or the
   !important flags — the pills survived and the bar looked half-applied.
   Cleared here at (1,4,2). */
body.snifffr-desktop-beta #buddypress .activity-list .activity-meta {
    display: flex !important;
    align-items: center;
    gap: 6px !important;
    margin: 6px 0 0 !important;
    padding: 8px 10px;
    border-top: 1px solid var(--snf-act-line);
}
body.snifffr-desktop-beta #buddypress .activity-list .activity-meta a.button,
body.snifffr-desktop-beta #buddypress .activity-list .activity-meta a.bp-primary-action,
body.snifffr-desktop-beta #buddypress .activity-list .activity-meta a.bp-secondary-action {
    padding: 8px 14px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 10px !important;
    color: var(--snf-act-muted) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
body.snifffr-desktop-beta #buddypress .activity-list .activity-meta a.button:hover {
    background: rgba(230, 92, 149, 0.08) !important;
    border-color: transparent !important;
    color: var(--snf-act-pink-deep) !important;
}
body.snifffr-desktop-beta #buddypress .activity-list .activity-meta a.delete-activity,
body.snifffr-desktop-beta #buddypress .activity-list .activity-meta a.delete {
    margin-left: auto !important;
    font-size: 12.5px !important;
    color: #9ca3af !important;
}
body.snifffr-desktop-beta #buddypress .activity-list .activity-meta a.delete-activity:hover,
body.snifffr-desktop-beta #buddypress .activity-list .activity-meta a.delete:hover {
    background: rgba(217, 43, 75, 0.08) !important;
    border-color: transparent !important;
    color: #d92b4b !important;
}

/* ── MediaPress photos in the feed ────────────────────────────────────────
   This is the markup behind "added a new photo" and behind a composer post
   with an image attached — both render through
   mediapress/default/buddypress/activity/views/grid-photo.php.

   custom.css:11406 pins that container to a literal `width: 200px` with a
   border and a 6px radius, which is the bordered square in the feed. It is
   seven chained classes — (0,7,0) — so a class-only selector cannot reach
   it; every rule below leads with #buddypress for the ID, which outranks any
   number of classes.

   The matching half of this fix is in PHP: the template was asking for the
   200x200 CROPPED file, so widening the box alone would have produced a
   stretched, still-square blur. See snifffr_activity_photo_src(). */
#buddypress .activity-list .mpp-activity-media-list,
#buddypress .snifffr-mp-activity-item .mpp-activity-media-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    margin: 0;
    padding: 0;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden;
    background: #ece9f1;
}

/* Two or more photos share the width; with exactly three the first one leads
   across the top, which is how every modern feed lays three out. */
#buddypress .activity-list .mpp-activity-media-list:has(> :nth-child(2)),
#buddypress .snifffr-mp-activity-item .mpp-activity-media-list:has(> :nth-child(2)) {
    grid-template-columns: 1fr 1fr;
}
#buddypress .activity-list .mpp-activity-media-list:has(> :nth-child(3):last-child) > :first-child,
#buddypress .snifffr-mp-activity-item .mpp-activity-media-list:has(> :nth-child(3):last-child) > :first-child {
    grid-column: 1 / -1;
}

/* The cell. `.mpp-media.lock-image` ships `width: fit-content`, which would
   collapse a gated photo back to its natural width inside the grid. */
#buddypress .activity-list .mpp-activity-media,
#buddypress .snifffr-mp-activity-item .mpp-activity-media {
    display: block;
    position: relative;
    width: 100% !important;
    max-width: none !important;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#buddypress .activity-list .mpp-activity-media img,
#buddypress .activity-list .mpp-activity-media .mpp-attached-media-item,
#buddypress .snifffr-mp-activity-item .mpp-activity-media img,
#buddypress .snifffr-mp-activity-item .mpp-activity-media .mpp-attached-media-item {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    /* snifffr-desktop-redesign.css:11037 clips EVERY img inside
       .snifffr-mp-activity-body to a circle, with a lavender ground behind
       it — written for the inline mention avatars BP puts in action text.
       Width was already being overridden here; the clip and the ground were
       not, which is why a full-width photo came out as an oval. */
    clip-path: none !important;
    -webkit-clip-path: none !important;
    background: transparent !important;
    vertical-align: baseline !important;
    /* A tall portrait must not swallow the card; a landscape shot is never
       cropped because it can never reach this. */
    max-height: 620px !important;
    object-fit: cover;
    object-position: center;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
}

/* In a multi-photo grid the tiles have to line up, so they become squares and
   the photo fills its tile instead of setting the row height. */
#buddypress .activity-list .mpp-activity-media-list:has(> :nth-child(2)) .mpp-activity-media,
#buddypress .snifffr-mp-activity-item .mpp-activity-media-list:has(> :nth-child(2)) .mpp-activity-media {
    aspect-ratio: 1 / 1;
}
#buddypress .activity-list .mpp-activity-media-list:has(> :nth-child(2)) .mpp-activity-media img,
#buddypress .snifffr-mp-activity-item .mpp-activity-media-list:has(> :nth-child(2)) .mpp-activity-media img {
    height: 100% !important;
    max-height: none !important;
}
/* The three-photo hero is a banner, not a square. */
#buddypress .activity-list .mpp-activity-media-list:has(> :nth-child(3):last-child) > :first-child,
#buddypress .snifffr-mp-activity-item .mpp-activity-media-list:has(> :nth-child(3):last-child) > :first-child {
    aspect-ratio: 16 / 9;
}

/* Age-gate overlay: it is absolutely positioned against the cell, so it now
   covers the full-width photo instead of a 200px corner. */
#buddypress .activity-list .mpp-activity-media.lock-image::before,
#buddypress .activity-list .mpp-activity-media.lock-video::before,
#buddypress .snifffr-mp-activity-item .mpp-activity-media.lock-image::before,
#buddypress .snifffr-mp-activity-item .mpp-activity-media.lock-video::before {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Video posts keep the player, which is already fluid — just let it fill. */
#buddypress .activity-list .mpp-activity-video-list {
    width: auto !important;
    max-width: none !important;
}
#buddypress .activity-list .mpp-activity-video-list .mejs-container,
#buddypress .activity-list .mpp-activity-video-list video {
    width: 100% !important;
    max-width: 100% !important;
}

@media (max-width: 991.98px) {
    #buddypress .activity-list .mpp-activity-media img,
    #buddypress .activity-list .mpp-activity-media .mpp-attached-media-item,
    #buddypress .snifffr-mp-activity-item .mpp-activity-media img,
    #buddypress .snifffr-mp-activity-item .mpp-activity-media .mpp-attached-media-item {
        max-height: 78vh !important;
    }
}

/* ── Full-bleed, for real ─────────────────────────────────────────────────
   Both redesign sheets pad the card itself — 18px 22px on desktop, 14px on
   mobile, both !important — so the photo kept a gutter and looked like a
   framed inset rather than the edge-to-edge media it was meant to be. The
   padding has to live on the card's CONTENTS, which already carry their own,
   not on the card. Leading with `html` buys the element needed to clear
   (1,3,2) cleanly rather than winning on load order. */
html body.snifffr-desktop-beta #buddypress ul.activity-list > li.activity-item,
html body.activity #buddypress ul.activity-list > li.activity-item,
html body #buddypress ul.activity-list > li.activity-item {
    padding: 0 !important;
    margin: 0 0 14px !important;
    border: 1px solid var(--snf-act-line) !important;
    border-radius: var(--snf-act-radius) !important;
    box-shadow: 0 1px 3px rgba(51, 46, 77, 0.05) !important;
    overflow: hidden !important;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}
@media (min-width: 992px) {
    html body #buddypress ul.activity-list > li.activity-item:hover {
        box-shadow: 0 2px 6px rgba(51, 46, 77, 0.07), 0 10px 24px rgba(51, 46, 77, 0.06) !important;
        transform: translateY(-1px);
    }
}

/* Same trap as desktop, one sheet down: the mobile sheet styles the actions
   as uppercase outlined pills at (1,4,2). */
html body.activity #buddypress .activity-list .activity-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 !important;
    padding: 8px 8px;
    border-top: 1px solid var(--snf-act-line);
    flex-wrap: nowrap;
}
html body.activity #buddypress .activity-list .activity-meta a.button,
html body.activity #buddypress .activity-list .activity-meta a.bp-primary-action,
html body.activity #buddypress .activity-list .activity-meta a.bp-secondary-action {
    padding: 9px 12px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 10px !important;
    color: var(--snf-act-muted) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
html body.activity #buddypress .activity-list .activity-meta a.button:hover {
    background: rgba(230, 92, 149, 0.08) !important;
    border-color: transparent !important;
    color: var(--snf-act-pink-deep) !important;
}
html body.activity #buddypress .activity-list .activity-meta a.delete-activity,
html body.activity #buddypress .activity-list .activity-meta a.delete {
    margin-left: auto !important;
    font-size: 12.5px !important;
    color: #9ca3af !important;
}

/* ── Action counts ────────────────────────────────────────────────────────
   No text labels — the icons carry it. The comment count was being thrown
   away in the template (see entry.php); it is back, but as a plain number.
   custom.css:6239 paints every span inside a .bp-primary-action as a solid
   purple badge — BuddyPress's old comment-count chip — which turned the
   count into a dark block sitting in the middle of the bar. */
#buddypress .activity-list .activity-meta .snf-act-count {
    background: none !important;
    color: inherit !important;
    padding: 0 !important;
    margin-left: 3px !important;
}
#buddypress .activity-list .activity-meta .snf-act-count,
#buddypress .activity-list .activity-meta .snifffr-love-count {
    min-width: 16px;
    padding-left: 1px;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    opacity: 0.8;
}
#buddypress .activity-list .activity-meta .snifffr-love-count:empty,
#buddypress .activity-list .activity-meta .snf-act-count:empty { display: none; }

/* ── Member notices ───────────────────────────────────────────────────────
   "became a snifffr member" is the single most common thing in this feed and
   it has no body at all, so on the full card treatment it read as a photo
   post whose photo had failed to load: a line of text, a wide gap, a rule,
   and two buttons floating in white. These get a compact treatment instead —
   the avatar and the line on one row, no empty body, a quieter action row —
   so the posts that DO carry a photo are the ones that take up the space. */
#buddypress .activity-list li.new_member .activity-inner,
#buddypress .activity-list li.new_avatar .activity-inner,
#buddypress .activity-list li.friendship_created .activity-inner,
#buddypress .activity-list li.updated_profile .activity-inner,
#buddypress .activity-list li.last_activity .activity-inner {
    display: none !important;
}
#buddypress .activity-list li.new_member .activity-header,
#buddypress .activity-list li.new_avatar .activity-header,
#buddypress .activity-list li.friendship_created .activity-header,
#buddypress .activity-list li.updated_profile .activity-header {
    padding: 13px 16px 11px 58px;
    min-height: 0;
}
#buddypress .activity-list li.new_member > .activity-avatar,
#buddypress .activity-list li.new_avatar > .activity-avatar,
#buddypress .activity-list li.friendship_created > .activity-avatar,
#buddypress .activity-list li.updated_profile > .activity-avatar {
    top: 12px;
    left: 14px;
    width: 34px;
    height: 34px;
}
#buddypress .activity-list li.new_member > .activity-avatar img,
#buddypress .activity-list li.new_avatar > .activity-avatar img,
#buddypress .activity-list li.friendship_created > .activity-avatar img,
#buddypress .activity-list li.updated_profile > .activity-avatar img {
    width: 34px !important;
    height: 34px !important;
}
#buddypress .activity-list li.new_member .activity-meta,
#buddypress .activity-list li.new_avatar .activity-meta,
#buddypress .activity-list li.friendship_created .activity-meta,
#buddypress .activity-list li.updated_profile .activity-meta {
    padding: 4px 8px;
}
#buddypress .activity-list li.new_member .activity-meta a.button,
#buddypress .activity-list li.new_avatar .activity-meta a.button,
#buddypress .activity-list li.friendship_created .activity-meta a.button,
#buddypress .activity-list li.updated_profile .activity-meta a.button {
    padding: 7px 12px !important;
    font-size: 13px !important;
}

/* ── Avatar size ──────────────────────────────────────────────────────────
   snifffr-desktop-redesign.css pins this image to 48px through six stacked
   selectors, the longest of which —
     body.snifffr-desktop-beta #buddypress li.activity-item .activity-avatar img
   — is (1,3,3). The 40px rule at the top of this sheet is (1,3,2) and lost by
   a single element, so the avatar stayed 48px while the header padding was
   sized for 40px. On the compact member notices that 6px difference is what
   put the avatar under the username. Sized here at (1,3,4), and the header
   padding below is derived from the avatar box so the two cannot drift. */
html body #buddypress .activity-list li.activity-item .activity-avatar > a {
    display: block !important;
    width: 40px !important;
    height: 40px !important;
    line-height: 0 !important;
}
html body #buddypress .activity-list li.activity-item .activity-avatar img {
    width: 40px !important;
    height: 40px !important;
    min-width: 0 !important;
    max-width: 40px !important;
    min-height: 0 !important;
    max-height: 40px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

/* Member notices run one size smaller: 34px avatar at left:14 ends at 48, so
   the header clears at 58. */
html body #buddypress .activity-list li.activity-item.new_member .activity-avatar > a,
html body #buddypress .activity-list li.activity-item.new_avatar .activity-avatar > a,
html body #buddypress .activity-list li.activity-item.friendship_created .activity-avatar > a,
html body #buddypress .activity-list li.activity-item.updated_profile .activity-avatar > a,
html body #buddypress .activity-list li.activity-item.new_member .activity-avatar img,
html body #buddypress .activity-list li.activity-item.new_avatar .activity-avatar img,
html body #buddypress .activity-list li.activity-item.friendship_created .activity-avatar img,
html body #buddypress .activity-list li.activity-item.updated_profile .activity-avatar img {
    width: 34px !important;
    height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
}

/* Breathing room between the love count and the who-loved-it avatars. */
#buddypress .activity-list .activity-meta .snifffr-loved-by { margin-left: 8px; }

/* ══ Profile "Recent activity" ════════════════════════════════════════════
   This feed is a separate custom loop in snifffr-desktop-profile.php and
   snifffr-mobile-profile.php — NOT buddypress/activity/entry.php — which is
   why nothing above reached it, and why it never showed a photo at all:
   bp_activity_entry_content is the only hook MediaPress injects attached
   media on, and the template never fired it. Both templates now fire it and
   carry the activity type as a class; this brings the card across.

   Two rules here have to be fought for:
     custom.css:17788  html body #buddypress .activity-meta.snifffr-mp-activity-meta a.button
                       at (1,3,3) — the uppercase outlined pills again
     snifffr-desktop-redesign.css:11037  .snifffr-dp-body--about .snifffr-mp-activity-body img
                       at (0,2,1), which clips EVERY image in the body to a
                       20px circle. It exists for inline mention avatars, but
                       it would have turned an injected photo into a dot. */

#buddypress .snifffr-mp-activity-list {
    display: block;
}

#buddypress .snifffr-mp-activity-item {
    position: relative;
    display: block;
    gap: 0;
    margin: 0 0 14px;
    padding: 0;
    background: #fff;
    border: 1px solid var(--snf-act-line);
    border-radius: var(--snf-act-radius);
    box-shadow: 0 1px 3px rgba(51, 46, 77, 0.05);
    overflow: hidden;
}

/* Same move as the main feed: the avatar leaves the flow so media can span
   the card instead of being indented beside it. */
#buddypress .snifffr-mp-activity-item > .snifffr-mp-activity-avatar {
    position: absolute;
    top: 14px;
    left: 16px;
    width: 40px;
    height: 40px;
    flex: none;
    overflow: visible;
    background: none;
}
html body #buddypress .snifffr-mp-activity-item > .snifffr-mp-activity-avatar img,
html body #buddypress .snifffr-mp-activity-item > .snifffr-mp-activity-avatar .avatar {
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    margin: 0 !important;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(230, 92, 149, 0.28);
}

#buddypress .snifffr-mp-activity-item > .snifffr-mp-activity-body {
    padding: 0;
    min-width: 0;
}

/* Header: name and action, with the time on its own line below. */
#buddypress .snifffr-mp-activity-item .snifffr-mp-activity-text {
    padding: 15px 16px 0 68px;   /* 68px clears the absolute avatar */
    font-size: 14px !important;
    line-height: 1.35 !important;
    color: var(--snf-act-muted) !important;
}
#buddypress .snifffr-mp-activity-item .snifffr-mp-activity-text a:first-child {
    font-size: 15px;
    font-weight: 700;
    color: var(--snf-act-ink) !important;
}
#buddypress .snifffr-mp-activity-item .snifffr-mp-activity-text a:first-child:hover {
    color: var(--snf-act-pink-deep) !important;
}
#buddypress .snifffr-mp-activity-item .snifffr-mp-activity-time {
    padding: 1px 16px 12px 68px;
    font-size: 12.5px;
    /* The old rule ran this at 10px and 40% opacity — legible as a footnote
       under a 12px line, not under a 15px name. */
    opacity: 1;
    color: var(--snf-act-muted);
}

/* No padding here: a shop item's thumbnail is rendered INSIDE this div by
   change_activity_feed(), and it has to reach the card edge. The children
   carry their own padding instead, the same way .activity-inner does. */
#buddypress .snifffr-mp-activity-item .snifffr-mp-activity-content {
    margin: 0;
    padding: 0;
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: #4a4660 !important;
}
#buddypress .snifffr-mp-activity-item .snifffr-mp-activity-content > p {
    margin: 0;
    padding: 0 16px 12px;
}
#buddypress .snifffr-mp-activity-item .snifffr-act-text {
    padding: 14px 16px 2px;
}
#buddypress .snifffr-mp-activity-item .snifffr-act-text > p {
    margin: 0 0 12px;
}
/* Titles arrive from change_activity_feed() with an inline font-size. */
#buddypress .snifffr-mp-activity-item .snifffr-mp-activity-content h2,
#buddypress .snifffr-mp-activity-item .snifffr-mp-activity-content h2 a,
#buddypress .snifffr-mp-activity-item .snifffr-act-text h2,
#buddypress .snifffr-mp-activity-item .snifffr-act-text h2 a {
    margin: 0 0 4px;
    font-size: 17px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--snf-act-ink) !important;
}

/* Media, full-bleed. The grid rules live with the main feed's — they already
   name .snifffr-mp-activity-item. */
#buddypress .snifffr-mp-activity-item .snifffr-mp-activity-media {
    margin: 0;
    padding: 0;
}
#buddypress .snifffr-mp-activity-item .img-thumb.feeds {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
}
#buddypress .snifffr-mp-activity-item .img-thumb.feeds a { display: block; }
html body #buddypress .snifffr-mp-activity-item .img-thumb.feeds img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 620px !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    margin: 0 !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
}

/* Action bar. */
html body #buddypress .snifffr-mp-activity-item .activity-meta.snifffr-mp-activity-meta {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border-top: 1px solid var(--snf-act-line) !important;
    flex-wrap: nowrap !important;
}
html body #buddypress .snifffr-mp-activity-item .activity-meta.snifffr-mp-activity-meta a.button,
html body #buddypress .snifffr-mp-activity-item .activity-meta.snifffr-mp-activity-meta .button {
    padding: 8px 14px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 10px !important;
    color: var(--snf-act-muted) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
html body #buddypress .snifffr-mp-activity-item .activity-meta.snifffr-mp-activity-meta a.button:hover {
    background: rgba(230, 92, 149, 0.08) !important;
    color: var(--snf-act-pink-deep) !important;
}
html body #buddypress .snifffr-mp-activity-item .activity-meta.snifffr-mp-activity-meta a.snifffr-love.is-loved,
html body #buddypress .snifffr-mp-activity-item .activity-meta.snifffr-mp-activity-meta a.snifffr-love.is-loved i {
    color: var(--snf-act-pink) !important;
}
#buddypress .snifffr-mp-activity-item .snifffr-mp-activity-meta .snifffr-loved-by { margin-left: 8px; }

/* Comments: the divider belongs to the list, not to the container, which is
   always present because it hosts the hidden reply form. */
#buddypress .snifffr-mp-activity-item .snifffr-mp-activity-comments {
    margin: 0;
    padding: 0 16px;
}
#buddypress .snifffr-mp-activity-item .snifffr-mp-activity-comments > ul {
    margin: 0;
    padding: 12px 0;
    border-top: 1px solid var(--snf-act-line);
}
#buddypress .snifffr-mp-activity-item .snifffr-mp-activity-comments ul li { border: 0; }
#buddypress .snifffr-mp-activity-item .acomment-options {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 6px;
}
#buddypress .snifffr-mp-activity-item .acomment-options a.acomment-reply { color: var(--snf-act-pink) !important; }
#buddypress .snifffr-mp-activity-item .acomment-options a.acomment-delete {
    margin-left: auto;
    font-size: 12.5px;
    font-weight: 500;
    color: #9ca3af !important;
}
#buddypress .snifffr-mp-activity-item .acomment-options a.acomment-delete:hover { color: #d92b4b !important; }
/* Do NOT touch display here — the reply form is toggled by
   js/snifffr-profile-comments.js and starts hidden. */
#buddypress .snifffr-mp-activity-item .ac-form {
    margin: 0 !important;
    padding: 12px 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--snf-act-line) !important;
    border-radius: 0 !important;
}

/* Member notices: compact, for the same reason as the main feed. */
#buddypress .snifffr-mp-act--new_member > .snifffr-mp-activity-avatar,
#buddypress .snifffr-mp-act--new_avatar > .snifffr-mp-activity-avatar,
#buddypress .snifffr-mp-act--friendship_created > .snifffr-mp-activity-avatar,
#buddypress .snifffr-mp-act--updated_profile > .snifffr-mp-activity-avatar {
    top: 12px;
    left: 14px;
    width: 34px;
    height: 34px;
}
html body #buddypress .snifffr-mp-act--new_member > .snifffr-mp-activity-avatar img,
html body #buddypress .snifffr-mp-act--new_avatar > .snifffr-mp-activity-avatar img,
html body #buddypress .snifffr-mp-act--friendship_created > .snifffr-mp-activity-avatar img,
html body #buddypress .snifffr-mp-act--updated_profile > .snifffr-mp-activity-avatar img {
    width: 34px !important;
    height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
}
#buddypress .snifffr-mp-act--new_member .snifffr-mp-activity-text,
#buddypress .snifffr-mp-act--new_avatar .snifffr-mp-activity-text,
#buddypress .snifffr-mp-act--friendship_created .snifffr-mp-activity-text,
#buddypress .snifffr-mp-act--updated_profile .snifffr-mp-activity-text {
    padding: 13px 16px 0 58px;
}
#buddypress .snifffr-mp-act--new_member .snifffr-mp-activity-time,
#buddypress .snifffr-mp-act--new_avatar .snifffr-mp-activity-time,
#buddypress .snifffr-mp-act--friendship_created .snifffr-mp-activity-time,
#buddypress .snifffr-mp-act--updated_profile .snifffr-mp-activity-time {
    padding: 1px 16px 10px 58px;
}

@media (max-width: 991.98px) {
    #buddypress .snifffr-mp-activity-item { margin-bottom: 10px; }
    #buddypress .snifffr-mp-activity-item > .snifffr-mp-activity-avatar { top: 12px; left: 14px; }
    #buddypress .snifffr-mp-activity-item .snifffr-mp-activity-text { padding: 13px 14px 0 62px; }
    #buddypress .snifffr-mp-activity-item .snifffr-mp-activity-time { padding: 1px 14px 10px 62px; }
    #buddypress .snifffr-mp-activity-item .snifffr-mp-activity-content { padding: 0 14px 10px; }
    #buddypress .snifffr-mp-activity-item .snifffr-mp-activity-comments { padding: 0 14px; }
    html body #buddypress .snifffr-mp-activity-item .img-thumb.feeds img {
        max-height: 78vh !important;
    }
}

/* ── "Read more" ──────────────────────────────────────────────────────────
   snifffr-activity-clamp.php inserts this button as a SIBLING of
   .activity-inner — deliberately, because it has to sit outside the region
   being clamped, so it cannot live inside the padded text wrapper with the
   words it belongs to.

   It used to take its indent from the card's own padding. This sheet moved
   that padding off the card and onto .activity-inner's children — which is
   what lets a photo run edge to edge — and the button, being a sibling
   rather than a child, was left behind flush against the card edge while
   its text sat 16px in.

   Margin, not padding, so the hover underline tracks the word rather than
   the gutter. */
#buddypress .activity-list .activity-content > .snifffr-act-readmore {
    margin: 6px 16px 12px;
}
@media (max-width: 991.98px) {
    #buddypress .activity-list .activity-content > .snifffr-act-readmore {
        margin: 6px 14px 10px;
    }
}
/* ── Age gate on the redesigned cards ─────────────────────────────────────
   The server no longer emits a real URL for a gated image — blurImage() now
   returns a placeholder when no pre-generated blur exists — so this block is
   presentation, not the control. It matters anyway: the blur and the caption
   are the only thing telling a viewer WHY they cannot see the photo, and the
   card rebuild moved these images into containers the original rules were
   never written against.

   Scoped to the media containers, never .activity-avatar — a blurred avatar
   gets its own small treatment and should not wear a full caption overlay. */
#buddypress .activity-list .activity-inner .lock-image,
#buddypress .activity-list .activity-inner .lock-video,
#buddypress .snifffr-mp-activity-item .snifffr-mp-activity-content .lock-image,
#buddypress .snifffr-mp-activity-item .snifffr-mp-activity-media .lock-image,
#buddypress .snifffr-mp-activity-item .snifffr-mp-activity-content .lock-video,
#buddypress .snifffr-mp-activity-item .snifffr-mp-activity-media .lock-video {
    position: relative !important;
    overflow: hidden !important;
}
#buddypress .activity-list .activity-inner .lock-image img,
#buddypress .activity-list .activity-inner .lock-video img,
#buddypress .snifffr-mp-activity-item .snifffr-mp-activity-content .lock-image img,
#buddypress .snifffr-mp-activity-item .snifffr-mp-activity-media .lock-image img,
#buddypress .snifffr-mp-activity-item .snifffr-mp-activity-content .lock-video img,
#buddypress .snifffr-mp-activity-item .snifffr-mp-activity-media .lock-video img {
    filter: blur(14px) !important;
    /* Scale past the edge so the blur does not feather into a visible
       hairline of the original around the border. */
    transform: scale(1.08) !important;
    pointer-events: none !important;
}
/* No `content` here on purpose — custom.css sets it per state, "Verify Age to
   View Image" for prem0 and "Image Is Under Review." otherwise, and declaring
   it would flatten the two into one message. */
#buddypress .activity-list .activity-inner .lock-image::before,
#buddypress .activity-list .activity-inner .lock-video::before,
#buddypress .snifffr-mp-activity-item .snifffr-mp-activity-content .lock-image::before,
#buddypress .snifffr-mp-activity-item .snifffr-mp-activity-media .lock-image::before,
#buddypress .snifffr-mp-activity-item .snifffr-mp-activity-content .lock-video::before,
#buddypress .snifffr-mp-activity-item .snifffr-mp-activity-media .lock-video::before {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: auto !important;
    z-index: 5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px;
    padding: 12px !important;
    background: rgba(51, 46, 77, 0.55) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-align: center !important;
}
