@media (max-width: 1080px) {
    .facenimal-community-shell {
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-width: 640px;
        width: 100%;
    }

    .facenimal-community-groups-panel {
        display: none;
    }

    .facenimal-community-composer-groups-toggle {
        display: inline-flex;
    }

    /* Note: the composer create button now hides at ≤780px (composer.css),
       consistently with the notifications bell — no early hide at 1080px. */

    .facenimal-community-modal.facenimal-community-mobile-groups-modal {
        padding: 0;
        place-items: stretch;
    }

    .facenimal-community-mobile-groups-modal .facenimal-community-modal-panel {
        border: 0;
        border-radius: 0;
        display: flex;
        flex-direction: column;
        height: 100dvh;
        margin: 0;
        max-height: 100dvh;
        max-width: none;
        overflow: hidden;
        padding: calc(14px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom));
    }

    .facenimal-community-mobile-groups-list {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        gap: 8px;
        max-height: none;
        min-height: 0;
        overflow-y: auto;
        padding: 8px 2px;
    }

    .facenimal-community-mobile-groups-modal .facenimal-community-group-filter {
        background: #f8fafc;
        border: 1px solid #e4e7ec;
        white-space: normal;
    }
}

@media (max-width: 640px) {
    .facenimal-community-feed {
        max-width: 100%;
        width: 100%;
    }

    .facenimal-community-card {
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .facenimal-community-post {
        padding-left: 0;
        padding-right: 0;
    }

    .facenimal-community-post > .facenimal-community-post-head,
    .facenimal-community-post > .facenimal-community-post-content,
    .facenimal-community-post > .facenimal-community-share-context {
        margin-left: 14px;
        margin-right: 14px;
    }

    .facenimal-community-single-post > .facenimal-community-post-head {
        margin-left: 0;
        margin-right: 0;
    }

    .facenimal-community-post > .facenimal-community-post-actions {
        padding-left: 10px;
        padding-right: 10px;
    }

    .facenimal-community-post > .facenimal-community-post-edit-form {
        margin-left: 14px;
        margin-right: 14px;
    }

    .facenimal-community-post > .facenimal-community-post-gallery {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

    .facenimal-community-post > .facenimal-community-shared-post {
        border-left: 0;
        border-radius: 0;
        border-right: 0;
        margin-left: 0;
        margin-right: 0;
    }

    .facenimal-community-carousel-nav {
        display: none;
    }

    .facenimal-community-composer {
        padding: 7px 12px;
        top: 0px;
    }

    .facenimal-community-composer-head {
        align-items: center;
        gap: 5px;
    }

    .facenimal-community-composer-actions-head {
        gap: 5px;
    }

    .facenimal-community-composer-user {
        display: none;
    }

    .facenimal-community-composer > .facenimal-community-composer-head > .facenimal-community-user-avatar-link {
        display: none;
    }

    .facenimal-community-composer-head .facenimal-community-avatar,
    .facenimal-community-create-toggle,
    .facenimal-community-composer-quick-photo,
    .facenimal-community-composer-groups-toggle,
    .facenimal-community-composer-more-toggle {
        height: 38px;
        width: 38px;
    }

    .facenimal-community-modal {
        padding: calc(76px + env(safe-area-inset-top)) 12px calc(86px + env(safe-area-inset-bottom));
        place-items: center;
    }

    .facenimal-community-modal-panel {
        max-height: calc(100dvh - 170px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        padding: 14px;
    }

    .facenimal-community-share-modal,
    .facenimal-community-save-modal {
        align-items: end;
        box-sizing: border-box;
        min-height: 100dvh;
        padding: calc(8px + env(safe-area-inset-top)) 10px calc(8px + env(safe-area-inset-bottom));
        place-items: end center;
    }

    .facenimal-community-share-modal .facenimal-community-share-modal-panel,
    .facenimal-community-save-modal .facenimal-community-save-modal-panel {
        margin: 0;
        max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        max-width: none;
        padding: 12px;
        overscroll-behavior: contain;
        width: 100%;
    }

    .facenimal-community-share-modal .facenimal-community-share-modal-panel {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .facenimal-community-share-modal .facenimal-community-share-form {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        gap: 10px;
        min-height: 0;
    }

    .facenimal-community-share-modal .facenimal-community-share-textarea {
        font-size: 16px;
        line-height: 1.35;
        margin-bottom: 2px;
        min-height: 48px;
        max-height: 128px;
        resize: vertical;
        transform: scale(0.875);
        transform-origin: left top;
        width: 114.2857%;
        -webkit-text-size-adjust: 100%;
    }

    .facenimal-community-share-modal .facenimal-community-share-preview {
        flex: 1 1 auto;
        max-height: min(42dvh, 320px);
        min-height: 0;
        overflow: auto;
    }

    .facenimal-community-create-panel.is-floating {
        border-radius: 16px 16px calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-bottom));
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        box-sizing: border-box;
        left: 10px !important;
        max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
        max-width: none !important;
        padding: 10px;
        position: fixed !important;
        right: 10px !important;
        top: auto !important;
        width: auto !important;
    }

    .facenimal-community-create-panel .facenimal-community-create-panel-item {
        min-height: 62px;
    }

    .facenimal-community-photo-preview-grid,
    .facenimal-community-edit-media-grid,
    .facenimal-community-edit-media-combined-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}
@media (min-width: 1081px) {
    .facenimal-community-shell {
        align-items: flex-start;
        display: grid;
        gap: 18px;
        grid-template-columns: 320px minmax(0, 640px);
        justify-content: center;
        margin: 0 auto;
        max-width: min(100%, 976px);
        width: auto;
    }

    .facenimal-community-shell .facenimal-community-feed {
        display: block;
        margin: 0;
        max-width: none;
        width: 100%;
    }

    .facenimal-community-groups-panel {
        display: block;
    }

    .facenimal-community-composer-groups-toggle {
        display: none;
    }
}
/* Responsive feed shell: left rail, feed, and future right rail. */
.facenimal-community-shell {
    box-sizing: border-box;
    display: block;
    margin: 0 auto;
    max-width: min(100%, 1150px);
    width: 100%;
}

.facenimal-community-shell .facenimal-community-feed {
    display: block;
    margin: 0;
    max-width: none;
    min-width: 0;
    width: 100%;
}

.facenimal-community-right-panel[hidden] {
    display: none;
}

@media (max-width: 1159px) {
    .facenimal-community-groups-panel,
    .facenimal-community-right-panel {
        display: none;
    }

    .facenimal-community-composer-groups-toggle {
        display: inline-flex;
    }
}

@media (min-width: 1160px) {
    .facenimal-community-shell {
        align-items: flex-start;
        display: grid;
        gap: 16px;
        grid-template-areas:
            "composer composer"
            "groups feed";
        grid-template-columns: 320px minmax(0, 640px);
        justify-content: center;
        max-width: min(100%, 976px);
    }

    .facenimal-community-shell > .facenimal-community-composer {
        grid-area: composer;
        min-width: 0;
    }

    .facenimal-community-groups-panel {
        display: block;
        grid-area: groups;
        min-width: 0;
    }

    .facenimal-community-shell .facenimal-community-feed {
        grid-area: feed;
    }

    .facenimal-community-composer-groups-toggle {
        display: none;
    }
}

@media (min-width: 1460px) {
    .facenimal-community-shell:has(.facenimal-community-right-panel:not([hidden])) {
        grid-template-areas: "groups feed right";
        grid-template-columns: 320px minmax(0, 680px) 320px;
        max-width: min(100%, 1336px);
    }

    .facenimal-community-shell:has(.facenimal-community-right-panel:not([hidden])) .facenimal-community-right-panel {
        display: block;
        grid-area: right;
        min-width: 0;
    }
}

@media (max-width: 780px) {
    body.facenimal-community-post-modal-open .facenimal-profile > .facenimal-profile-hero {
        display: none;
    }

    /* The whole visible screen, and measured in one unit. These used to reserve
       55px and 122px for the bars behind them, which is what showed as a strip of
       feed under the composer — and they mixed `100vh` with the panel's `100dvh`,
       which are not the same height on iOS: `vh` is the tall viewport with the
       browser's toolbars hidden, so the reservation was wrong by however much
       Safari happened to be showing. Writing a post is the whole screen's job. */
    #facenimal-community-post-modal,
    #facenimal-profile-post-modal {
        bottom: 0;
        height: 100dvh;
        min-height: 100dvh;
        padding: 0;
        place-items: stretch;
        top: 0;
    }

    #facenimal-community-post-modal .facenimal-community-modal-panel,
    #facenimal-profile-post-modal .facenimal-community-modal-panel {
        background: #fff;
        border: 0;
        border-radius: 0;
        display: flex;
        flex-direction: column;
        height: 100dvh;
        margin: 0;
        max-height: 100dvh;
        max-width: none;
        overflow: hidden;
        padding: env(safe-area-inset-top) 12px env(safe-area-inset-bottom);
        position: relative;
    }

    #facenimal-community-post-modal .facenimal-community-modal-head,
    #facenimal-profile-post-modal .facenimal-community-modal-head {
        border-bottom: 1px solid #e4e7ec;
        flex: 0 0 auto;
        height: 50px;
        justify-content: center;
        margin: 0 -12px 10px;
        padding: 0 58px;
    }

    #facenimal-community-post-modal .facenimal-community-modal-head h2,
    #facenimal-profile-post-modal .facenimal-community-modal-head h2 {
        display: block;
        font-size: 15px;
        font-weight: 900;
        text-align: center;
    }

    #facenimal-community-post-modal .facenimal-community-modal-close,
    #facenimal-profile-post-modal .facenimal-community-modal-close {
        background: #f8fafc;
            border: 1px solid #d0d5dd;
            color: #344054;
            font-size: 25px;
            height: 38px;
            left: 8px;
            position: absolute;
            top: calc(10px + env(safe-area-inset-top));
            width: 38px;
            font-weight: 500;
    }

    #facenimal-community-post-modal form,
    #facenimal-profile-post-modal form {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }

    #facenimal-community-post-modal .facenimal-community-composer-author,
    #facenimal-profile-post-modal .facenimal-community-composer-author {
        flex: 0 0 auto;
        margin-bottom: 8px;
    }

    #facenimal-community-post-modal .facenimal-community-post-textarea,
    #facenimal-profile-post-modal .facenimal-community-post-textarea {
        background: #f8fafc;
        border-radius: 17px;
        flex: 0 0 auto;
        font-size: 16px;
        margin: auto 0 0;
        max-height: 124px;
        min-height: 38px;
        padding: 8px 12px;
        width: 100%;
    }

    #facenimal-community-post-modal .facenimal-community-photo-control,
    #facenimal-profile-post-modal .facenimal-community-photo-control {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        margin-top: 8px;
        min-height: 0;
        overflow: hidden;
    }

    #facenimal-community-post-modal .facenimal-community-photo-preview,
    #facenimal-profile-post-modal .facenimal-community-photo-preview {
        background: transparent;
        border: 0;
        flex: 1 1 auto;
        max-height: none;
        min-height: 0;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    #facenimal-community-post-modal .facenimal-community-photo-preview:not([hidden]),
    #facenimal-profile-post-modal .facenimal-community-photo-preview:not([hidden]) {
        margin-bottom: 8px;
    }

    #facenimal-community-post-modal .facenimal-community-photo-preview::-webkit-scrollbar,
    #facenimal-profile-post-modal .facenimal-community-photo-preview::-webkit-scrollbar {
        display: none;
    }

    #facenimal-community-post-modal .facenimal-community-photo-preview-grid,
    #facenimal-profile-post-modal .facenimal-community-photo-preview-grid {
        display: flex;
        gap: 8px;
        height: 100%;
        min-height: 0;
        width: max-content;
    }

    #facenimal-community-post-modal .facenimal-community-photo-preview-item,
    #facenimal-profile-post-modal .facenimal-community-photo-preview-item {
        align-self: stretch;
        flex: 0 0 min(82vw, 420px);
        scroll-snap-align: center;
    }

    #facenimal-community-post-modal .facenimal-community-photo-preview-item img,
    #facenimal-profile-post-modal .facenimal-community-photo-preview-item img {
        height: 100%;
        object-fit: contain;
    }

    #facenimal-community-post-modal .facenimal-community-photo-preview-body,
    #facenimal-profile-post-modal .facenimal-community-photo-preview-body {
        display: none;
    }

    #facenimal-community-post-modal .facenimal-community-photo-preview.has-video-preview,
    #facenimal-profile-post-modal .facenimal-community-photo-preview.has-video-preview {
        position: relative;
    }

    #facenimal-community-post-modal .facenimal-community-photo-preview.has-video-preview .facenimal-community-photo-preview-body,
    #facenimal-profile-post-modal .facenimal-community-photo-preview.has-video-preview .facenimal-community-photo-preview-body {
        display: block;
        position: absolute;
        right: 8px;
        top: 8px;
        z-index: 2;
    }

    #facenimal-community-post-modal .facenimal-community-photo-preview.has-video-preview .facenimal-community-photo-preview-label,
    #facenimal-community-post-modal .facenimal-community-photo-preview.has-video-preview .facenimal-community-photo-name,
    #facenimal-profile-post-modal .facenimal-community-photo-preview.has-video-preview .facenimal-community-photo-preview-label,
    #facenimal-profile-post-modal .facenimal-community-photo-preview.has-video-preview .facenimal-community-photo-name {
        display: none;
    }

    #facenimal-community-post-modal .facenimal-community-photo-preview.has-video-preview .facenimal-community-photo-remove,
    #facenimal-profile-post-modal .facenimal-community-photo-preview.has-video-preview .facenimal-community-photo-remove {
        align-items: center;
        background: rgba(16, 24, 40, .78);
        border: 1px solid rgba(255, 255, 255, .78);
        border-radius: 999px;
        color: transparent;
        display: inline-flex;
        font-size: 0;
        height: 30px;
        justify-content: center;
        padding: 0;
        width: 30px;
    }

    #facenimal-community-post-modal .facenimal-community-photo-preview.has-video-preview .facenimal-community-photo-remove::before,
    #facenimal-profile-post-modal .facenimal-community-photo-preview.has-video-preview .facenimal-community-photo-remove::before {
        color: #fff;
        content: '×';
        font-size: 20px;
        line-height: 1;
    }

    #facenimal-community-post-modal .facenimal-community-video-preview,
    #facenimal-profile-post-modal .facenimal-community-video-preview {
        max-height: 100%;
        object-fit: contain;
    }

    #facenimal-community-post-modal .facenimal-community-composer-actions,
    #facenimal-profile-post-modal .facenimal-community-composer-actions {
        align-items: center;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 8px;
        flex: 0 0 auto;
        margin-top: 0;
        padding: 8px 0 4px;
    }

    #facenimal-community-post-modal .facenimal-community-group-select-button,
    #facenimal-community-post-modal .facenimal-community-photo-button,
    #facenimal-profile-post-modal .facenimal-community-group-select-button,
    #facenimal-profile-post-modal .facenimal-community-photo-button {
        background: #ecfdf3;
        border-color: #8fd8a8;
        color: #006400;
        display: inline-flex;
        flex: 0 0 42px;
        height: 42px;
        visibility: visible;
        width: 42px;
    }

    #facenimal-community-post-modal .facenimal-community-photo-hint,
    #facenimal-profile-post-modal .facenimal-community-photo-hint {
        display: none;
    }

    #facenimal-community-post-modal .facenimal-community-post-submit,
    #facenimal-profile-post-modal .facenimal-community-post-submit {
        height: 42px;
        margin-left: auto;
        min-height: 42px;
        position: static;
        width: 42px;
    }
}