.media-preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; margin-top: 14px; }
.media-preview-tile { position: relative; min-height: 72px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #0d0d11; }
.media-preview-tile img, .media-preview-tile video { display: block; width: 100%; height: 86px; object-fit: cover; }
.media-preview-tile > span { position: absolute; right: 6px; bottom: 6px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; background: rgba(0,0,0,.7); font-size: 11px; }
.media-selection-note { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; }
.media-gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-top: 12px; overflow: hidden; border-radius: 14px; }
.media-gallery.has-multiple { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.media-gallery-tile { min-width: 0; min-height: 0; overflow: hidden; border: 0; border-radius: 10px; background: #08080b; }
.media-gallery-tile .post-image, .media-gallery-tile .post-video { display: block; width: 100%; height: min(46vw, 340px); min-height: 150px; object-fit: cover; }
.media-gallery:not(.has-multiple) .media-gallery-tile .post-image, .media-gallery:not(.has-multiple) .media-gallery-tile .post-video { height: auto; max-height: 600px; object-fit: contain; }

/* Keep long captions and metadata inside their own blocks on narrow screens. */
.post-card .post-head > div:nth-child(2), .channel-post .post-head > div:nth-child(2) { flex: 1 1 auto; min-width: 0; display: grid; gap: 3px; }
.post-card .user-name, .post-card .handle, .channel-post .handle, .post-content { overflow-wrap: anywhere; word-break: break-word; }
.post-card > .post-content, .channel-post > .post-content { display: block; clear: both; white-space: pre-wrap; }
.post-card > .media-gallery, .channel-post > .media-gallery { clear: both; }
.post-actions { flex-wrap: wrap; row-gap: 6px; }
.comment-row > div, .bubble { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.comment-row p, .bubble > span { white-space: pre-wrap; }

.push-background-copy { max-width: 620px; margin: 6px 0 4px; font-size: 12px; line-height: 1.4; }
@media (max-width: 520px) { .media-gallery.has-multiple .media-gallery-tile .post-image, .media-gallery.has-multiple .media-gallery-tile .post-video { height: 42vw; min-height: 112px; } }
body.light-theme .media-preview-tile, body.light-theme .media-gallery-tile { background: #f0edf5; }