/* The frame belongs to the creator, not the viewer's current theme. */
.framed-post{--bg:var(--post-frame,#fff);background:var(--post-frame,#fff);border:1px solid #2731260b;border-radius:22px;padding:16px 18px 18px;overflow:hidden}
.framed-post .post-header{padding:0 0 13px}
.framed-post .post-photo-wrap{border-radius:15px;background:transparent}
.framed-post .post-photo{width:100%;height:auto;max-height:none;aspect-ratio:4/5;object-fit:cover}
.framed-post.rec-post .post-photo,.framed-post.story-post .post-photo{aspect-ratio:9/16;object-fit:cover}
.framed-post .post-actions{padding:15px 0 10px;gap:16px;background:var(--post-frame)}
.framed-post .post-caption{padding:0;background:var(--post-frame)}
.framed-post .comments-link{margin-left:0;background:var(--post-frame)}
.creator-frame-modal{background:var(--bg)}
.capture-review-frame{padding:18px;border-radius:22px;background:var(--post-frame,#fff)}
.capture-review-frame .draft-thumb{display:block;width:100%;height:auto;max-height:none;margin:0;border-radius:14px;object-fit:contain;background:transparent}
.rec-review .draft-thumb{aspect-ratio:9/16;object-fit:cover}
.reels-list>.framed-post{width:100%;max-width:460px;margin:0 auto}
.reels-list>.reel-card{width:100%;max-width:460px;height:auto;min-height:0;aspect-ratio:9/16;margin:0 auto}
@media(max-width:600px){
 .framed-post{padding:12px 12px 16px;border-radius:19px;margin-right:7px}
 .framed-post .post-header{gap:6px;padding-bottom:12px}
 .framed-post .post-photo-wrap{border-radius:13px}
 .framed-post .post-actions{gap:12px}
 .framed-post .post-action{font-size:10px;gap:4px}
 .framed-post .post-action svg{width:21px;height:21px}
 .framed-post .post-time{font-size:8px}
 .framed-post .post-header .user-name{font-size:11px}
 .framed-post .post-header .user-location{font-size:8px}
 .capture-review-frame{padding:16px}
}
@media(max-width:360px){.framed-post{padding:10px}.framed-post .post-actions{gap:9px}.framed-post .post-action svg{width:19px;height:19px}.framed-post .post-time{display:none}}

/* Story viewport fits both narrow screens and short desktop windows at 9:16. */
.modal.story-modal{width:min(400px,calc(85dvh * 9 / 16),calc(100vw - 30px));height:auto;min-height:0;max-height:none;aspect-ratio:9/16;flex-shrink:0}