/* ===== Mobile override: bottom nav, no right rail, center full width ===== */
@media (max-width: 720px) {

    /* 1) Collapse to a single column so center can be 100% */
    .app {
        grid-template-columns: 1fr !important;
    }

    /* 2) Hide the right rail */
    .right {
        display: none !important;
    }

    /* 3) Make center span the full width and leave space for the bottom nav */
    .center {
        grid-column: 1 / -1 !important;
        /* space for bottom bar + iOS safe area */
        padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* 4) Turn the left nav into a fixed bottom bar */
    .nav {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 56px !important;
        width: 100% !important;
        background: var(--bg) !important; /* ensure it isn't transparent */
        border-top: 1px solid var(--border) !important;
        z-index: 9999 !important;
        /* neutralize desktop styles that made it tall/sticky */
        padding: 0 !important;
        margin: 0 !important;
    }

        /* Lay out the nav items horizontally */
        .nav .stack {
            display: flex !important;
            flex-direction: row !important;
            justify-content: space-around !important;
            align-items: center !important;
            gap: 8px !important;
            height: 100% !important;
            padding: 0 12px !important;
        }

        /* Optional: hide large-only pieces in the compact bar */
        .nav .brand,
        .nav .compose {
            display: none !important;
        }

        .nav a,
        .nav button {
            padding: 10px 12px !important;
            font-size: 16px !important;
            border-radius: 12px !important;
            background: transparent !important;
        }

    .post {
        grid-template-columns: 32px 1fr 0px;
        gap: 6px;
        padding: 12px 10px;
       
    }
    .post .avatar, .tweet .avatar, .reply .avatar {
        width: 32px;
        height: 32px;
        border-width: 0
    }
}
@media (max-width: 720px) {
    .center {
        border-left: 0 !important;
        border-right: 0 !important;
    }
}
/* === GRNDCRW feed: make posts full-width without avatars === */

/* 1) Hide avatars inside posts */
.post .avatar {
    display: none !important;
}

/* 2) Collapse the avatar column and keep a single content column */
.post {
    /* original: grid-template-columns: 56px 1fr 0px; */
    grid-template-columns: 1fr !important; /* single column */
    /* keep vertical spacing between rows only (no column gap) */
    gap: 12px !important;
}

    /* 3) Ensure all post parts span the full width */
    .post .head,
    .post .text,
    .post .media,
    .post .meta,
    .post .counts {
        grid-column: 1 / -1 !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    /* 4) Fix media edge alignment (remove the left pull) */
    .post .media {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

/* 5) If you also render tweet-style items, mirror the change there */
.tweet .avatar {
    display: none !important;
}

.tweet {
    /* original: grid-template-columns: 56px 1fr 0px; */
    grid-template-columns: 1fr !important;
    gap: 12px !important;
}

    .tweet .head,
    .tweet .text,
    .tweet .bar {
        grid-column: 1 / -1 !important;
    }

/* 6) Mobile breakpoint safeguard (their CSS redefines columns at <=980px) */
@media (max-width:980px) {
    .post,
    .tweet {
        grid-template-columns: 1fr !important; /* override their mobile rule too */
    }
}