/* Direct implementation of Community Light.dc.html for the real Home feed. */
html body.community-active #community-main-area,
html body.community-active #community-feed-shell,
html body.community-active #arena-grid {
    background: #f7f7f5 !important;
}

html body.community-active .community-blips-rail {
    display: flex;
    gap: 12px;
    width: 100%;
    padding: 12px 14px 10px;
    overflow-x: auto;
    box-sizing: border-box;
    background: #ffffff;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

html body.community-active .community-blips-rail[hidden],
html body.community-active.community-room-mode .community-blips-rail {
    display: none !important;
}

html body.community-active .community-blips-rail::-webkit-scrollbar {
    display: none;
}

html body.community-active .community-blip-play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 38px;
    height: 38px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(10, 10, 14, 0.55);
    pointer-events: none;
}

html body.community-active .community-blip-play::after {
    content: '';
    position: absolute;
    left: 15px;
    top: 11px;
    border-style: solid;
    border-width: 8px 0 8px 12px;
    border-color: transparent transparent transparent #ffffff;
}

html body.community-active .community-blip-tile {
    position: relative;
    display: block;
    flex: 0 0 144px;
    width: 144px;
    height: 182px;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(10, 10, 14, 0.11);
    border-radius: 22px;
    background: #dededb;
    color: #ffffff;
    box-shadow: 0 8px 22px rgba(15, 15, 20, 0.10);
    isolation: isolate;
    -webkit-tap-highlight-color: transparent;
}

html body.community-active .community-blip-avatar {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
    border: 0;
    border-radius: inherit;
    background: #e9e9e6;
    box-shadow: none;
}

html body.community-active .community-blip-avatar::after {
    content: "";
    position: absolute;
    inset: 35% 0 0;
    z-index: 1;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.74));
    pointer-events: none;
}

html body.community-active .community-blip-avatar img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

html[data-theme] body.community-active #community-blips-rail .community-blip-tile--mine .community-blip-label,
html body.community-active #community-blips-rail .community-blip-tile--mine .community-blip-label {
    text-align: center;
}

html body.community-active .community-blip-tile--mine .community-blip-avatar {
    border: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at 76% 18%, rgba(255, 255, 255, 0.19), transparent 28%),
        linear-gradient(145deg, #424247 0%, #17171a 72%, #0b0b0d 100%);
}

html body.community-active .community-blip-add {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.46);
    background: rgba(255, 255, 255, 0.16);
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.20);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font: 350 30px/1 system-ui, sans-serif;
}

html body.community-active .community-blip-initial {
    position: relative;
    z-index: 2;
    color: #252529;
    font: 750 26px/1 system-ui, sans-serif;
}

/* The light theme paints every leaf element black with !important
   ([data-theme="light"] * * *, and the #mobile-bytes-panel sweep). The tile
   is dark, so the label has to win on both color and text-fill, with an id
   in the selector and !important, or it reads as black on black. */
html[data-theme] body.community-active #community-blips-rail .community-blip-label,
html body.community-active #community-blips-rail .community-blip-label {
    position: absolute;
    right: 12px;
    bottom: 12px;
    left: 12px;
    z-index: 3;
    display: block;
    overflow: hidden;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font: 700 13px/1.2 system-ui, sans-serif;
    text-align: left;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.68);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Community owns a persistent top shell. Some legacy media/fullscreen scroll
   states animate the shared header; neutralize those states for this surface. */
html body.community-active #mobile-app-header.mobile-app-header {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    transform: none !important;
    translate: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
}

html body.community-active #mobile-app-header.mobile-app-header > * {
    visibility: visible !important;
}

/* Community Light header: the three scopes are one calm segmented control.
   Rooms shares the header (body.rooms-overlay-open), so it gets the same pill. */
html body:is(.community-active, .rooms-overlay-open).community-member-scope #mobile-app-header #community-filter-tabs {
    min-height: 40px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: visible !important;
}

html body:is(.community-active, .rooms-overlay-open).community-member-scope #mobile-app-header #community-filter-tabs .community-filter-strip {
    gap: 3px !important;
    align-items: stretch !important;
    min-height: 40px !important;
    padding: 3px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.28) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
    backdrop-filter: blur(18px) saturate(160%) !important;
    box-shadow: 0 6px 18px rgba(10, 10, 14, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    overflow: hidden !important;
}

html body:is(.community-active, .rooms-overlay-open).community-member-scope #mobile-app-header #community-filter-tabs button {
    min-height: 34px !important;
    padding: 0 7px !important;
    border-radius: 999px !important;
    color: #6b6b72 !important;
    -webkit-text-fill-color: #6b6b72 !important;
    transition: color 150ms ease, background-color 150ms ease, box-shadow 150ms ease !important;
}

html body:is(.community-active, .rooms-overlay-open).community-member-scope #mobile-app-header #community-filter-tabs button[aria-selected="true"] {
    background: #ffffff !important;
    color: #0a0a0a !important;
    -webkit-text-fill-color: #0a0a0a !important;
    box-shadow: 0 1px 4px rgba(10, 10, 14, 0.12) !important;
}

html body:is(.community-active, .rooms-overlay-open).community-member-scope #mobile-app-header #community-filter-tabs .community-filter-label {
    max-width: calc(100% - 22px) !important;
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
}

html body:is(.community-active, .rooms-overlay-open).community-member-scope #mobile-app-header #community-filter-tabs .community-underline {
    display: none !important;
}

html body:is(.community-active, .rooms-overlay-open).community-member-scope #mobile-app-header .community-scope-badge {
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    border: 0 !important;
    background: #151517 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: none !important;
    font-size: 9px !important;
}

html body.community-active #arena-grid {
    width: 100% !important;
    padding: 8px 14px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    box-sizing: border-box !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 14px 15px !important;
    border: 1px solid rgba(10, 10, 14, 0.07) !important;
    border-radius: 24px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card + .bloc-card.mobile-community-card {
    margin-top: 0 !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card + .bloc-card.mobile-community-card::before,
html body.community-active #arena-grid .bloc-card.mobile-community-card::after {
    content: none !important;
    display: none !important;
}

html body.community-active #arena-grid .mobile-community-card-meta-wrap {
    display: block !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-meta-row {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) auto auto !important;
    grid-template-rows: 20px 16px !important;
    gap: 1px 10px !important;
    width: 100% !important;
    min-height: 38px !important;
    margin: 0 0 11px !important;
    padding: 0 !important;
    align-items: center !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card .profile-avatar {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    background: #e6e6e3 !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-author {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: end !important;
    color: #0a0a0a !important;
    -webkit-text-fill-color: #0a0a0a !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 650 !important;
    letter-spacing: -0.02em !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-timestamp {
    grid-column: 3 !important;
    grid-row: 1 / 3 !important;
    align-self: center !important;
    color: #6b6b72 !important;
    -webkit-text-fill-color: #6b6b72 !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 450 !important;
}

html body.community-active #arena-grid .mobile-community-room-source.mobile-community-room-source--meta,
html body.community-active #arena-grid .mobile-community-app-context {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    align-self: start !important;
    max-width: 190px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #5f5f66 !important;
    -webkit-text-fill-color: #5f5f66 !important;
    font-size: 11.5px !important;
    line-height: 1.2 !important;
    font-weight: 450 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-message {
    display: block !important;
    width: 100% !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-message p {
    margin: 0 !important;
    padding: 0 !important;
    color: #0a0a0a !important;
    -webkit-text-fill-color: #0a0a0a !important;
    font-size: 14.5px !important;
    line-height: 1.38 !important;
    font-weight: 500 !important;
    letter-spacing: -0.02em !important;
}

/* Media runs edge to edge inside the card. The card pads 15px each side, so
   the stage pulls back out by that much and lets the card's own corners clip
   it: one frame, not a rounded photo inside a rounded box. Height is capped
   with cover so a tall screenshot can't take the whole feed; the detail view
   still shows the full image. */
html body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-media-stage,
html body.community-active #arena-grid .bloc-card.mobile-community-card.has-community-media .mobile-community-media-stage {
    width: calc(100% + 32px) !important;
    max-width: none !important;
    margin: 0 -16px 12px !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    display: block !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-media-stage .bloc-card-media-preview,
html body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-media-stage img,
html body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-media-stage video,
html body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-media-stage iframe,
html body.community-active #arena-grid .bloc-card.mobile-community-card.has-community-media .mobile-community-media-stage .bloc-card-media-preview,
html body.community-active #arena-grid .bloc-card.mobile-community-card.has-community-media .mobile-community-media-stage img,
html body.community-active #arena-grid .bloc-card.mobile-community-card.has-community-media .mobile-community-media-stage video,
html body.community-active #arena-grid .bloc-card.mobile-community-card.has-community-media .mobile-community-media-stage iframe {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-media-stage img,
html body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-media-stage video,
html body.community-active #arena-grid .bloc-card.mobile-community-card.has-community-media .mobile-community-media-stage img,
html body.community-active #arena-grid .bloc-card.mobile-community-card.has-community-media .mobile-community-media-stage video {
    height: auto !important;
    max-height: 420px !important;
    object-fit: cover !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-actions {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body.community-active #arena-grid .mobile-community-actions > .bytes-tv-mobile-hero-rail {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 16px !important;
}

html body.community-active #arena-grid .community-feed-reply-preview {
    margin: 12px 0 0 !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(10, 10, 14, 0.07) !important;
}

html[data-theme^="dark"] body.community-active #community-main-area,
html[data-theme^="dark"] body.community-active #community-feed-shell,
html[data-theme^="dark"] body.community-active #arena-grid {
    background: #09090b !important;
}

html[data-theme^="dark"] body.community-active #arena-grid .bloc-card.mobile-community-card {
    border-color: rgba(255, 255, 255, 0.09) !important;
    background: #151517 !important;
}

/* ------------------------------------------------------------------------
   Flat feed: no post containers. The card used to do three jobs, separate
   posts, group a post's parts, and frame the media. Each job moves to
   something else so the feed stays compact without the box:
   - separation: one hairline between posts, 12px above and below;
   - grouping:   a 38px avatar column on the left and one shared left edge
                 for name, text, media and actions beside it (the spine);
   - media:      its own rounded object inside the content column.
   These rules sit last in the sheet so they beat the card rules above. */
html body.community-active #community-main-area,
html body.community-active #community-feed-shell,
html body.community-active #arena-grid {
    background: #ffffff !important;
}

html body.community-active #arena-grid {
    padding: 0 0 24px !important;
    gap: 0 !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    column-gap: 12px !important;
    row-gap: 0 !important;
    align-items: start !important;
    padding: 12px 16px 10px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(10, 10, 14, 0.07) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card > * {
    grid-column: 2 !important;
    min-width: 0 !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card > .mobile-community-card-meta-wrap {
    grid-column: 1 / -1 !important;
}

/* Name row: avatar in the left column, name starts on the spine (38 + 12). */
html body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-meta-row {
    gap: 1px 12px !important;
    margin: 0 0 8px !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-message {
    margin: 0 0 10px !important;
}

/* Media is its own object again, inside the column. */
html body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-media-stage,
html body.community-active #arena-grid .bloc-card.mobile-community-card.has-community-media .mobile-community-media-stage {
    width: 100% !important;
    margin: 0 0 10px !important;
    border-radius: 16px !important;
    background: #f1f1ef !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-actions {
    margin: 2px 0 0 !important;
}

html body.community-active #arena-grid .community-feed-reply-preview {
    margin: 10px 0 0 !important;
    padding-top: 10px !important;
}

html[data-theme^="dark"] body.community-active #community-main-area,
html[data-theme^="dark"] body.community-active #community-feed-shell,
html[data-theme^="dark"] body.community-active #arena-grid {
    background: #09090b !important;
}

html[data-theme^="dark"] body.community-active #arena-grid .bloc-card.mobile-community-card {
    background: transparent !important;
    border-bottom-color: rgba(255, 255, 255, 0.09) !important;
}

html[data-theme^="dark"] body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-media-stage {
    background: #151517 !important;
}

/* Style blocks that load after this sheet (mobile.html, post-Codex passes)
   restate the card grid as 46px columns, an 8px gap and a 36px avatar. The
   [data-post-id] attribute lifts these one notch so the spine stays at
   16 + 38 + 12 = 66px for the name, the text and the media alike. */
html body.community-active #arena-grid .bloc-card.mobile-community-card[data-post-id] {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    column-gap: 12px !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card[data-post-id] .mobile-community-meta-row {
    grid-template-columns: 38px minmax(0, 1fr) auto auto !important;
    column-gap: 12px !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card[data-post-id] .profile-avatar {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
}

/* The avatar and name share a link wrapper with its own 8px gap; match the
   spine gap so the name lands on the same edge as the text below it. */
html body.community-active #arena-grid .bloc-card.mobile-community-card[data-post-id] .mobile-community-app-link {
    gap: 12px !important;
    column-gap: 12px !important;
}

/* Vertical rhythm on the spine: the name row is exactly the avatar's 38px,
   then 8px to the text, 10px to the media, 6px to the actions. The later
   passes stretch the row to 46px and stack three margins under it. */
html body.community-active #arena-grid .bloc-card.mobile-community-card[data-post-id] {
    padding: 12px 16px 10px !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card[data-post-id] > .mobile-community-card-meta-wrap {
    margin: 0 !important;
    padding: 0 !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card[data-post-id] .mobile-community-meta-row {
    grid-template-rows: 20px 18px !important;
    min-height: 38px !important;
    height: auto !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card[data-post-id] > .mobile-community-message {
    margin: 0 0 10px !important;
    padding: 0 !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card[data-post-id] > .mobile-community-media-stage {
    margin: 0 0 10px !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card[data-post-id] > .mobile-community-actions {
    margin: 0 !important;
}

/* Name row: one line, centred on the avatar. The second line only exists
   when a post carries app context; an empty second track was leaving about
   40px between the name and the text on the phone. */
html body.community-active #arena-grid .bloc-card.mobile-community-card[data-post-id] .mobile-community-meta-row {
    grid-template-rows: 38px !important;
    grid-auto-rows: auto !important;
    align-items: center !important;
    margin: 0 0 6px !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card[data-post-id] .profile-avatar {
    grid-row: 1 !important;
    align-self: center !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card[data-post-id] .mobile-community-author {
    grid-row: 1 !important;
    align-self: center !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card[data-post-id] .mobile-community-timestamp {
    grid-row: 1 !important;
    align-self: center !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card[data-post-id] .mobile-community-app-context {
    grid-row: 2 !important;
    grid-column: 2 / -1 !important;
    margin-top: 2px !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card[data-post-id] .mobile-community-app-context:empty {
    display: none !important;
}

/* ------------------------------------------------------------------------
   Post detail with media: the picture first and full width, then the
   author row, the text, the actions and the replies under it. The thread
   grid becomes a plain column here; the named-row placement in mobile.html
   only applies to grid, so order does the sequencing. */
html body #enter-modal.post-detail-page.media-detail-active .post-detail-thread-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 0 calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 0 !important;
}

html body #enter-modal.post-detail-page.media-detail-active .post-detail-thread-grid > .enter-post-body.is-media {
    order: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #000000 !important;
}

html body #enter-modal.post-detail-page.media-detail-active .enter-detail-media-stage,
html body #enter-modal.post-detail-page.media-detail-active .enter-detail-media-stage [data-embed-scope],
html body #enter-modal.post-detail-page.media-detail-active .enter-detail-media-stage .bloc-card-media-preview {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #000000 !important;
}

html body #enter-modal.post-detail-page.media-detail-active .enter-detail-media-stage img,
html body #enter-modal.post-detail-page.media-detail-active .enter-detail-media-stage video,
html body #enter-modal.post-detail-page.media-detail-active .enter-detail-media-stage iframe,
html body #enter-modal.post-detail-page.media-detail-active .enter-detail-media-stage .bloc-card-media-preview > img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 82vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

html body #enter-modal.post-detail-page.media-detail-active .enter-detail-media-stage img,
html body #enter-modal.post-detail-page.media-detail-active .enter-detail-media-stage .bloc-card-media-preview > img {
    object-fit: cover !important;
}

html body #enter-modal.post-detail-page.media-detail-active .enter-detail-media-stage video {
    object-fit: contain !important;
    background: #000000 !important;
}

/* Author row and text under the picture, on the 16px gutter. */
html body #enter-modal.post-detail-page.media-detail-active .post-detail-thread-grid > .enter-post-hero.is-media {
    order: 1 !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 14px 16px 0 !important;
}

html body #enter-modal.post-detail-page.media-detail-active .enter-post-hero.is-media .enter-post-author {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body #enter-modal.post-detail-page.media-detail-active .enter-post-hero.is-media .enter-post-avatar {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
}

html body #enter-modal.post-detail-page.media-detail-active .enter-post-hero.is-media .enter-post-headline {
    margin: 10px 0 0 !important;
    padding: 0 !important;
    max-width: none !important;
    width: 100% !important;
}

html body #enter-modal.post-detail-page.media-detail-active .post-detail-thread-grid > .post-detail-engagement {
    order: 2 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 16px 6px !important;
}

html body #enter-modal.post-detail-page.media-detail-active .post-detail-thread-grid > .post-detail-replies-head {
    order: 3 !important;
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}

html body #enter-modal.post-detail-page.media-detail-active .post-detail-thread-grid > .post-detail-inline-replies {
    order: 4 !important;
    width: 100% !important;
}

/* The close chevron floats over the picture, so it needs its own scrim. */
html body #enter-modal.post-detail-page.media-detail-active .enter-close {
    background: rgba(10, 10, 14, 0.5) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
}

html body #enter-modal.post-detail-page.media-detail-active .enter-close i {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* ------------------------------------------------------------------------
   Add a blip: the owner's empty viewer is a full-screen invitation. The
   viewer and the blip composer are full screen, so the bottom nav goes
   away while either is open. */
html body:has(#mobile-blips-viewer[style*="display: block"]) #bottom-nav,
html body:has(#new-custom-modal.story-mode[style*="display: block"]) #bottom-nav {
    display: none !important;
}

html body #mobile-blips-viewer .blip-empty {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: min(100%, 360px);
    padding: 40px 28px;
    text-align: center;
    color: #ffffff;
}

html body #mobile-blips-viewer .blip-empty__glow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 420px;
    height: 420px;
    transform: translate(-50%, -58%);
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--primary-color, #4f7cff) 26%, transparent) 0%, transparent 62%);
    pointer-events: none;
}

html body #mobile-blips-viewer .blip-empty__kicker {
    position: relative;
    margin-bottom: 26px;
    font: 500 10.5px/1 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.55) !important;
}

html body #mobile-blips-viewer .blip-empty__ring {
    position: relative;
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 18px 40px rgba(0, 0, 0, 0.45);
}

html body #mobile-blips-viewer .blip-empty__ring i {
    font-size: 36px;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body #mobile-blips-viewer .blip-empty__title {
    position: relative;
    margin-top: 26px;
    font: 700 26px/1.1 -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
    letter-spacing: -0.03em;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body #mobile-blips-viewer .blip-empty__copy {
    position: relative;
    max-width: 290px;
    margin-top: 10px;
    font: 450 15px/1.45 -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.68) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.68) !important;
    text-wrap: pretty;
}

html body #mobile-blips-viewer .blip-empty__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 220px;
    height: 54px;
    margin-top: 30px;
    padding: 0 28px;
    border: 0;
    border-radius: 999px;
    background: #ffffff !important;
    color: #0a0a0a !important;
    -webkit-text-fill-color: #0a0a0a !important;
    font: 650 15.5px/1 -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
    letter-spacing: -0.02em;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
    -webkit-tap-highlight-color: transparent;
}

html body #mobile-blips-viewer .blip-empty__cta i,
html body #mobile-blips-viewer .blip-empty__cta span {
    color: #0a0a0a !important;
    -webkit-text-fill-color: #0a0a0a !important;
}

html body #mobile-blips-viewer .blip-empty__cta:active {
    transform: scale(0.98);
}

html body #mobile-blips-viewer .blip-empty__note {
    position: relative;
    margin-top: 16px;
    font: 500 10.5px/1 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.4) !important;
}

/* The viewer inherits the app's mono face; the invitation reads in the
   sans the feed uses. The small + in the corner duplicates the big button
   on this screen, so it steps aside until a blip exists. */
html body #mobile-blips-viewer .blip-empty__title,
html body #mobile-blips-viewer .blip-empty__copy,
html body #mobile-blips-viewer .blip-empty__cta,
html body #mobile-blips-viewer .blip-empty__cta span {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif !important;
}

html body #mobile-blips-viewer:has(.blip-empty) #mobile-blips-drop-btn {
    display: none !important;
}

/* ------------------------------------------------------------------------
   Blip viewing: the three marks from the Moments cinema across the foot of
   the film, on their own shadows, no discs. The caption rides above them. */
html body #mobile-blips-viewer .blip-actions {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 20px calc(env(safe-area-inset-bottom, 0px) + 10px);
    pointer-events: auto;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
}

html body #mobile-blips-viewer .blip-actions__btn {
    flex: 1 1 0;
    min-width: 0;
    height: 48px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    background: none !important;
    color: #f4f4f2 !important;
    -webkit-text-fill-color: #f4f4f2 !important;
    filter: drop-shadow(0 1px 8px rgba(6, 6, 10, 0.9));
    -webkit-tap-highlight-color: transparent;
    transition: color 160ms ease, transform 160ms ease;
}

html body #mobile-blips-viewer .blip-actions__btn i {
    font-size: 21px;
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

html body #mobile-blips-viewer .blip-actions__btn:active {
    transform: scale(0.9);
}

html body #mobile-blips-viewer .blip-actions__btn.is-on,
html body #mobile-blips-viewer .blip-actions__btn.is-on i {
    color: #ff4a15 !important;
    -webkit-text-fill-color: #ff4a15 !important;
}

html body #mobile-blips-viewer .blip-actions__count {
    font: 600 12px/1 -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

html body #mobile-blips-viewer .blip-actions__count:empty {
    display: none;
}

html body #mobile-blips-viewer #mobile-blips-caption-wrap {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 72px) !important;
}

/* A blip is a picture or a video. The composer's embed-link mode and its
   More options (platforms, schedule, season) do not apply to one. */
html body #new-custom-modal.story-mode #bytes-source-mode,
html body #new-custom-modal.story-mode #bytes-more-options {
    display: none !important;
}

/* The three top-right controls in the viewer are frosted squares; the app
   draws round marks everywhere else. */
html body #mobile-blips-viewer #mobile-blips-drop-btn,
html body #mobile-blips-viewer #mobile-blips-menu-btn,
html body #mobile-blips-viewer #mobile-blips-close-btn {
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: rgba(10, 10, 14, 0.35) !important;
}

/* The rail marks sit on the film, not on frosted tiles; the install banner
   has no business over a full-screen blip. */
html body #mobile-blips-viewer .blip-actions__btn {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}

html body:has(#mobile-blips-viewer[style*="display: block"]) #pwa-install-banner {
    display: none !important;
}

/* The cinema's marks in the blip rail: 21px strokes in the button's colour,
   lit orange once acted on, exactly as .mcin__act draws them. */
html body #mobile-blips-viewer .blip-actions__btn svg {
    width: 21px;
    height: 21px;
    display: block;
}

html body #mobile-blips-viewer .blip-actions__btn svg,
html body #mobile-blips-viewer .blip-actions__btn svg * {
    stroke: currentColor !important;
}

html body #mobile-blips-viewer .blip-actions__btn svg [fill="none"] {
    fill: none !important;
}

html body #mobile-blips-viewer .blip-actions__btn svg {
    color: inherit !important;
}

html body #mobile-blips-viewer .blip-actions__btn.is-on svg {
    color: #ff4a15 !important;
}

/* Press and hold pauses the blip; iOS must not answer the hold with its
   own image callout or a text selection. */
html body #mobile-blips-viewer,
html body #mobile-blips-viewer * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}