body.reels-page{overflow:hidden;background:#08090c}
body.reels-page :is(.sidebar,.topbar,.mobile-nav){display:none!important}
body.reels-page .shell{display:block;min-height:0;height:100dvh}
body.reels-page #content{position:fixed;inset:0;z-index:20;margin:0;padding:0!important;max-width:none;width:100%;height:100dvh;background:#08090c;color:white;overflow:hidden}
body.reels-page .reel-stream{width:100%;height:100%;max-width:none;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:#08090c;overflow-x:hidden;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior-y:contain;scrollbar-width:none}
body.reels-page .reel-stream::-webkit-scrollbar{display:none}
body.reels-page .reel{width:100%;height:100%;min-height:100%;position:relative;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden}
body.reels-page .reel video{display:block;width:100%;height:100%;max-height:none;object-fit:contain;background:#08090c}
body.reels-page .reel:after{content:"";position:absolute;inset:55% 0 0;pointer-events:none;background:linear-gradient(transparent,#0009);z-index:1}
.reels-back{position:fixed;top:calc(14px + env(safe-area-inset-top));left:calc(14px + env(safe-area-inset-left));z-index:25;display:grid;place-items:center;width:44px;height:44px;border:1px solid #ffffff2e;border-radius:50%;background:#12172390;color:white;backdrop-filter:blur(12px)}
.reel-toggle{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:grid;place-items:center;background:transparent;color:white;padding:0;border:0}
.reel-toggle svg{width:62px;height:62px;padding:16px;background:#1118278c;border-radius:50%}
.reel-toggle span{font-size:14px;background:#111827dc;padding:20px;border-radius:14px}
.reel-sound{position:absolute;right:calc(14px + env(safe-area-inset-right));top:calc(18px + env(safe-area-inset-top));z-index:3;color:white;background:#12172390;border:1px solid #ffffff2e;border-radius:22px;padding:9px 14px;font-size:12px;backdrop-filter:blur(12px)}
body.reels-page .reel-overlay{z-index:3;bottom:calc(28px + env(safe-area-inset-bottom));left:max(18px,env(safe-area-inset-left));right:85px}
body.reels-page .reel-overlay p{max-height:84px;font-size:14px;overflow:auto;pointer-events:auto}
body.reels-page .reel-actions{z-index:3;right:max(15px,env(safe-area-inset-right));bottom:calc(35px + env(safe-area-inset-bottom));gap:18px}
body.reels-page .reel-actions button{min-width:44px;min-height:44px;color:white}
body.reels-page .reel-actions button.on{color:#79adff}
.reels-tail{min-height:84px;padding:24px;text-align:center;display:grid;place-items:center;scroll-snap-align:end;color:#b8c4d8;font-size:13px}
.reels-tail button{color:white;border:1px solid #ffffff40;border-radius:12px;padding:12px}
.reels-empty{height:100%;display:grid;place-items:center;color:#e0e7f5;padding:70px 16px}
body.reels-page #content>.empty,body.reels-page #content>.loading{padding-top:100px;color:#e0e7f5}
body.reels-page #toast{z-index:30;bottom:24px}
@media(min-width:800px){body.reels-page .reel video{max-width:580px;margin:auto}body.reels-page .reel-overlay{left:max(28px,calc(50% - 260px));right:max(85px,calc(50% - 210px))}body.reels-page .reel-actions{right:max(22px,calc(50% - 330px))}}
/* Live backdrop sampled from the same video: no second media/audio stream. */
body.reels-page .reel{isolation:isolate;background:#18202b}
body.reels-page .reel .reel-backdrop{position:absolute;inset:-6%;width:112%;height:112%;max-width:none;object-fit:cover;filter:blur(30px) brightness(.66) saturate(1.12);z-index:-2;pointer-events:none}
body.reels-page .reel:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#09101e30,transparent 40%,#070c163d)}
body.reels-page .reel video{position:relative;background:transparent;z-index:0}
body.reels-page .reel:after{inset:60% 0 0;background:linear-gradient(transparent,#060b1666)}
body.reels-page .reel-actions button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border-radius:50%;text-shadow:0 2px 5px #0008}
body.reels-page .reel-overlay .avatar{border:1px solid #ffffff50;box-shadow:0 2px 12px #0003}
@media(min-width:800px){
 body.reels-page .reel{--reel-panel-height:calc(100dvh - 48px);--reel-panel-width:min(560px,calc((100dvh - 48px)*.5625),calc(100vw - 176px));padding:24px 0}
 body.reels-page .reel video{width:var(--reel-panel-width);height:var(--reel-panel-height);max-width:none;margin:0 auto;border-radius:22px;box-shadow:0 14px 65px #0005;outline:1px solid #ffffff20}
 body.reels-page .reel-toggle{inset:24px auto auto 50%;transform:translateX(-50%);width:var(--reel-panel-width);height:var(--reel-panel-height);border-radius:22px}
 body.reels-page .reel-sound{top:40px;right:calc(50% - var(--reel-panel-width)/2 + 16px);background:#151c2b99}
 body.reels-page .reel-overlay{left:calc(50% - var(--reel-panel-width)/2 + 20px);right:calc(50% - var(--reel-panel-width)/2 + 20px);bottom:46px;padding:18px 14px 14px;border-radius:15px;background:linear-gradient(transparent,#0a10258c);text-shadow:0 2px 6px #0008}
 body.reels-page .reel-overlay .row{gap:10px}
 body.reels-page .reel-overlay p{font-size:13px;line-height:1.5;margin-top:10px;max-height:72px}
 body.reels-page .reel-actions{right:auto;left:calc(50% + var(--reel-panel-width)/2 + 18px);bottom:42px;gap:10px;padding:12px 8px;border:1px solid #ffffff26;border-radius:30px;background:#10172566;backdrop-filter:blur(20px);box-shadow:0 8px 30px #0002}
 body.reels-page .reel-actions button{width:44px;min-height:48px;font-size:11px}
 body.reels-page .reel-actions button:hover{background:#ffffff19}
 body.reels-page .reel-actions svg{width:25px;height:25px}
 body.reels-page .reel:after{inset:65% calc(50% - var(--reel-panel-width)/2) 24px;border-radius:0 0 22px 22px}
 .reels-back{top:24px;left:24px;background:#111a2b70}
}