/* Media-led post reader: the artwork itself sets the frame. */
#post-dialog[open]{--post-aspect:.8;width:min(620px,calc((100dvh - 190px)*var(--post-aspect)),calc(100vw - 24px));max-width:none;height:auto;max-height:calc(100dvh - 24px);padding:0;border:0;border-radius:0;background:#fff;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain;box-shadow:none;color:#161616}
#post-dialog::backdrop,#reel-dialog::backdrop{background:#09090bed;backdrop-filter:blur(5px)}
#post-dialog .post-window,#post-dialog .post-window-body{display:block;height:auto;min-height:0;background:#fff}
#post-dialog .post-window-top{min-height:48px;padding:6px 10px;gap:9px;background:#fff;border:0;position:sticky;top:0;z-index:12}
#post-dialog .post-window-top>img{width:30px;height:30px;padding:2px;border:1px solid #eee}
#post-dialog .post-window-top strong{font-size:12px;color:#181818}
#post-dialog .post-window-top span{font-size:10px;color:#777;max-width:300px}
#post-dialog .dialog-close{width:38px;height:38px;min-width:38px;background:transparent;border-radius:0;color:#171717}
#post-dialog .post-viewer{display:block;height:auto;min-height:0;background:#fff;position:relative;overflow:visible}
#post-dialog .post-media{display:block;width:100%;height:auto;min-height:0;aspect-ratio:var(--post-aspect);padding:0;overflow:hidden;background:#050505;touch-action:pan-y}
#post-dialog .post-media>img,#post-dialog .post-media>video{display:block;width:100%;height:auto;max-height:none;max-width:none;object-fit:contain;aspect-ratio:var(--post-aspect);margin:0;padding:0;border:0}
#post-dialog .post-carousel-controls{position:static;height:24px;min-height:0;border:0;padding:0;gap:5px;background:#fff;display:flex;align-items:center;justify-content:center}
#post-dialog .post-carousel-controls[hidden]{display:none}
#post-dialog .post-carousel-controls>button{position:absolute;top:calc(50% - 24px);height:44px;width:44px;min-width:44px;z-index:5;background:#ffffffb8;backdrop-filter:blur(4px);color:#171717;border-radius:50%;box-shadow:0 2px 8px #0002}
#post-dialog #media-prev{left:8px}#post-dialog #media-next{right:8px}
#post-dialog .post-carousel-controls>button:disabled{visibility:hidden}
#post-dialog .carousel-dots{max-width:80%;height:24px}
#post-dialog .carousel-dots button{height:24px;width:18px}
#post-dialog .carousel-dots button span{width:5px;height:5px;background:#c7c7c7}
#post-dialog .carousel-dots button[aria-current=true] span{background:#333}
#post-dialog .slide-counter{position:absolute;right:11px;top:11px;z-index:4;padding:4px 8px;min-width:0;border-radius:20px;background:#0008;color:white;font-size:10px}
#post-dialog .post-writing{display:block;border:0;min-height:0;background:#fff}
#post-dialog .post-writing .social-actions{border:0;padding:0 7px;height:44px;gap:0;background:#fff}
#post-dialog .icon-control{min-width:44px;height:44px;color:#111}
#post-dialog .icon-control.liked{color:#c13e62}
#post-dialog .post-writing-body{padding:3px 15px 12px;min-height:0;max-height:none;overflow:visible;flex:none;font-size:14px;line-height:1.65;color:#222}
#post-dialog .post-writing-body p{margin-bottom:9px}
#post-dialog .post-writing-tabs{border-top:1px solid #eee;border-bottom:0;padding:0 15px;gap:20px;background:#fff;flex-wrap:wrap}
#post-dialog .post-writing-tabs button{font-size:12px;color:#777;padding:13px 0 10px;min-height:44px}
#post-dialog .post-writing-tabs button[aria-selected=true]{color:#111;border-color:#111}
#post-dialog .post-file-links{padding:8px 15px 16px;color:#777;background:#fff;font-size:11px}
/* Native vertical scroll snapping keeps the next reel visible without cropping the film. */
#reel-dialog[open]{position:fixed;inset:auto;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;padding:0;border:0;border-radius:0;--reel-peek:28px;--reel-copy:66px;width:min(520px,calc((100dvh - 20px - 44px - 28px - 66px)*.5625),100vw);max-width:100vw;height:calc(100dvh - 20px);max-height:none;background:#070707;color:white;overflow:hidden;box-shadow:none}
#reel-content,.reels-shell{height:100%;min-height:0}
.reels-shell{display:grid;grid-template-rows:44px minmax(0,1fr);position:relative;background:#080808}
.reels-heading{display:flex;align-items:center;gap:0;padding:0 5px 0 12px;z-index:15;background:#080808;border:0;color:white}
.reels-heading>div{flex:1;display:flex;gap:9px;align-items:center;min-width:0}
.reels-heading strong{font-size:14px;font-weight:500}.reels-heading span{font-size:10px;color:#aaa;font-variant-numeric:tabular-nums}
.reels-heading button,.reel-sound{height:44px;min-width:44px;border:0;background:none;display:grid;place-items:center;color:white;flex-shrink:0}
.reels-heading button:disabled{opacity:.25;cursor:default}
.reels-shell svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.reels-scroll{min-height:0;height:100%;overflow-x:hidden;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none;touch-action:pan-y;padding:0;background:#080808;outline-offset:-3px}
.reels-scroll::-webkit-scrollbar,#post-dialog::-webkit-scrollbar{display:none}
.reel-card{height:calc(100% - var(--reel-peek));min-height:0;scroll-snap-align:start;scroll-snap-stop:always;display:grid;grid-template-rows:minmax(0,1fr) var(--reel-copy);position:relative;overflow:hidden;background:#080808;color:white}
.reel-stage{position:relative;min-height:0;overflow:hidden;background:#050505}
.reel-stage>video{display:block;width:100%;height:100%;object-fit:contain;background:#050505}
.reel-toggle{position:absolute;inset:0;border:0;border-radius:0;background:transparent;color:white;z-index:2;display:grid;place-items:center;width:100%;height:100%;touch-action:pan-y}
.reel-play-mark{display:grid;place-items:center;width:65px;height:65px;border-radius:50%;background:#0007;opacity:0;transition:opacity .15s}
.reel-play-mark svg{width:30px;height:30px;fill:white;stroke:none;margin-left:4px}
.reel-card.paused .reel-play-mark{opacity:1}
.reel-loading{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);font-size:11px;white-space:nowrap;padding:8px 12px;border-radius:24px;background:#0008;opacity:0;pointer-events:none;z-index:3;transition:opacity .2s .25s}
.reel-card.loading .reel-loading{opacity:1}
.reel-error{position:absolute;inset:0;z-index:10;background:#111c;display:grid;place-content:center;text-align:center;gap:14px;font-size:13px}.reel-error[hidden]{display:none}
.reel-error button{border:1px solid #fff7;background:#fff;color:#111;border-radius:5px;padding:10px 20px;min-height:44px}
.reel-identity{position:absolute;left:12px;bottom:27px;right:55px;display:flex;align-items:center;gap:8px;z-index:4;pointer-events:none;text-shadow:0 1px 4px #000}
.reel-identity>img{width:28px;height:28px;object-fit:contain;background:white;border-radius:50%;padding:3px}
.reel-identity strong{font-size:12px;font-weight:500}
.reel-rail{position:absolute;right:2px;bottom:30px;z-index:5;color:white}
.reel-rail .social-actions{display:flex;flex-direction:column;padding:0;gap:1px;border:0}
.reel-rail .icon-control,.reel-rail .save-control{height:44px;min-width:44px;margin:0;color:white;background:#0002;border-radius:50%;filter:drop-shadow(0 1px 3px #0008)}
.reel-rail .icon-control.liked{color:#ff527a}.reel-rail .icon-control.liked svg{fill:currentColor}
.reel-rail .icon-control.saved svg{fill:white}.reel-rail .reel-sound{background:#0002;border-radius:50%;margin-top:1px}
.reel-seek{position:absolute;left:10px;bottom:0;width:calc(100% - 20px);height:24px;z-index:6;accent-color:#fff;cursor:pointer;background:transparent}
.reel-caption{position:relative;padding:8px 45px 8px 12px;min-height:0;background:#0b0b0b;color:white;border-top:1px solid #fff1}
.reel-caption-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:12px;line-height:20px;color:#eee;overflow-wrap:anywhere}
.reel-caption-text p{margin:0 0 8px}
.reel-more{position:absolute;right:2px;top:6px;min-width:43px;min-height:44px;padding:0 5px;background:none;border:0;color:#bcbcbc;font:inherit;font-size:10px}
.reel-caption-tools{display:none;gap:12px;flex-wrap:wrap;margin-top:14px;border-top:1px solid #fff2;padding-top:5px}
.reel-caption-tools button{background:none;border:0;border-bottom:1px solid #fff5;font-size:11px;color:white;min-height:44px}
.reel-caption.expanded{position:absolute;bottom:0;left:0;right:0;z-index:12;height:auto;max-height:55%;padding:17px 45px 16px 14px;overflow:auto;overscroll-behavior:contain;background:#111f}
.reel-caption.expanded .reel-caption-text{display:block;-webkit-line-clamp:unset;overflow:visible}.reel-caption.expanded .reel-caption-tools{display:flex}
.reels-scroll-cue{position:absolute;bottom:0;left:0;right:0;height:var(--reel-peek);z-index:8;pointer-events:none;display:flex;align-items:center;justify-content:center;gap:6px;font-size:9px;color:#fff;background:linear-gradient(#0002,#000b);text-shadow:0 1px 3px #000}
.reels-scroll-cue[hidden]{display:none}.reels-scroll-cue svg{width:12px;height:12px}
@media(max-width:650px){
 #post-dialog[open]{width:100vw;max-width:100vw;max-height:100dvh;border-radius:0}
 #post-dialog .post-window-top{min-height:48px;padding:5px 8px}
 #post-dialog .post-window-top span{max-width:260px}
 #post-dialog .dialog-close{height:40px;min-width:40px}
 #post-dialog .post-writing-body{font-size:14px;padding:3px 14px 13px}
 #post-dialog .post-writing-tabs{padding-inline:14px}
 #post-dialog .post-file-links{padding-inline:14px}
 #post-dialog .post-carousel-controls>button{height:44px;width:44px}
 #reel-dialog[open]{width:min(100vw,calc((100dvh - 44px - 28px - 66px)*.5625));height:100dvh;max-width:100vw}
 .reel-caption-text{font-size:13px}.reel-identity strong{font-size:13px}
}
@media(prefers-reduced-motion:reduce){.reel-play-mark,.reel-loading{transition:none}.reels-scroll{scroll-behavior:auto}}

.reels-scroll::after{content:"";display:block;height:var(--reel-peek);flex-shrink:0}

.reels-heading{position:relative;inset:auto;height:44px;min-height:44px;width:100%;transform:none;backdrop-filter:none;border-radius:0;box-shadow:none}

@media(max-width:650px){#post-dialog[open]{max-height:min(100dvh,calc(100vw / var(--post-aspect) + 156px))}}

#post-dialog .dialog-close{width:44px;height:44px;min-width:44px}
#post-dialog .post-window-top{padding-block:2px}
.reel-seek{appearance:none;-webkit-appearance:none;height:44px;margin:0;border:0;background:transparent}
.reel-seek::-webkit-slider-runnable-track{height:2px;background:#ffffff78;border-radius:2px}
.reel-seek::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:8px;height:8px;margin-top:-3px;border:0;border-radius:50%;background:#fff}
.reel-seek::-moz-range-track{height:2px;background:#ffffff78;border:0;border-radius:2px}
.reel-seek::-moz-range-thumb{width:8px;height:8px;border:0;border-radius:50%;background:#fff}
.reel-caption-text{font-size:13px}
@media(max-width:650px){.reel-caption-text{font-size:14px}#post-dialog .dialog-close{height:44px;min-width:44px}}