/* Keep post cards and account sections on one narrow mobile gutter. */
@media (max-width: 767px) {
    :root { --voicer-post-inline-space: 9px; --voicer-mobile-edge: 6px; }

    .voicer-feed > main,
    .voicer-hub > main,
    .voicer-interior > main {
        padding-right: var(--voicer-mobile-edge) !important;
        padding-left: var(--voicer-mobile-edge) !important;
        padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .voicer-feed :is(#voicercontainerpartial, #voicercontainer) > [id^="post-"],
    .voicer-hub .center-flex-container > .card,
    .voicer-hub .voicer-settings .card.card-style {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .voicer-hub #commentReplyModal {
        padding: 9px !important;
    }
    .voicer-hub #commentReplyModal:has(.voicer-settings) {
        padding: 0 !important;
    }
    .voicer-hub .voicer-settings {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
    .voicer-hub .voicer-alert {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 9px;
        padding: 12px;
    }
    .voicer-hub .voicer-alert__avatar { width: 40px; height: 40px; }
    .voicer-hub .voicer-alert__top { display: block; }
    .voicer-hub .voicer-alert__time { display: block; margin-top: 3px; }

    /* The old negative margins let Safari place the next body beside the avatar. */
    .voicer-feed [id^="post-"] > .voicer-feed-post-header .row-12 {
        display: grid;
        grid-template-columns: 50px minmax(0, 1fr) auto;
        align-items: start;
        gap: 8px;
        min-height: 50px;
    }
    .voicer-feed [id^="post-"] > .voicer-feed-post-header .row-12 > div {
        width: auto !important;
        max-width: none !important;
        min-width: 0;
        margin: 0 !important;
        padding: 0 !important;
    }
    .voicer-feed [id^="post-"] > .voicer-feed-post-header .row-12 > .col-avatar img {
        display: block;
        width: 48px;
        height: 48px;
    }
    .voicer-feed [id^="post-"] > .voicer-feed-post-header .row-12 h5 { margin: 0; }
    .voicer-feed .card.card-style-home-page[id^="post-"] > .voicer-feed-post-header { padding-bottom: 3px !important; }
    .voicer-feed .card.card-style-home-page[id^="post-"] > .voicer-feed-post-content { padding-top: 7px !important; }

    /* Public and topic cards float the avatar; begin the description below it. */
    .voicer-interior [id^="post-"] p.voicelink.location { clear: both; margin-top: 8px !important; }
    .voicer-actions-page .voicer-activity-feed [id^="post-"] [id^="content-"],
    .voicer-thread [id^="post-"] [id^="content-"] { margin-top: 8px !important; }

    /* Match the blue selected pill used by Messages. */
    .voicer-feed .voicer-feed-mobile-tabs-wrap { margin-right: 0; margin-left: 0; }
    .voicer-feed .voicer-feed-mobile-tabs { gap: 3px; padding: 5px; border-radius: 999px; background: #f3f7fd; }
    .voicer-feed .voicer-feed-mobile-tabs a,
    .voicer-feed .voicer-feed-mobile-tabs a:last-child { border-radius: 999px; }
    .voicer-feed .voicer-feed-mobile-tabs a.active,
    .voicer-feed .voicer-feed-mobile-tabs a.active:last-child {
        background: #1c66d8 !important;
        color: #fff !important;
        box-shadow: 0 4px 11px rgba(26, 94, 199, .22);
    }
    body.theme-dark .voicer-feed .voicer-feed-mobile-tabs a.active { background: #3478e3 !important; color: #fff !important; }
}