/* Лента роликов: полноэкранный чёрный слой без карточек и подложек.
   Файл подключается последним и только на страницах с роликами, поэтому каждое правило
   начинается с .reels — иначе светлая тема сайта перекрашивала бы поля просмотрщика. */
body.reels-open{overflow:hidden}
.reels{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#000;color:#fff;overflow:hidden;color-scheme:dark}
.reels::backdrop{background:#000}
.reels-track{height:100%;overflow-y:auto;overscroll-behavior:contain;scroll-snap-type:y mandatory;scrollbar-width:none}
.reels-track::-webkit-scrollbar{display:none}
.reels .reel{position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always;display:flex;align-items:center;justify-content:center}
.reels .reel-stage{position:relative;width:100%;height:100%;overflow:hidden;background:#000}
.reels .reel video{width:100%;height:100%;object-fit:contain;background:#000;display:block}
/* Плашки под подписью нет: вместо неё еле заметное затемнение снизу, иначе белый текст
   теряется на светлом кадре. */
.reels .reel-stage:after{content:"";position:absolute;left:0;right:0;bottom:0;height:24%;z-index:1;background:linear-gradient(transparent,#0000007a);pointer-events:none}
.reels .reel-tap{position:absolute;inset:0;z-index:2;border:0;padding:0;background:transparent;cursor:pointer}
.reels .reel-state{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:74px;height:74px;border-radius:50%;background:#00000073;display:grid;place-items:center;opacity:0;transition:opacity .16s;pointer-events:none}
.reels .reel.is-paused .reel-state{opacity:1}
.reels .reel-state svg{width:28px;margin-left:3px;fill:#fff;stroke:#fff}
.reels .reel-burst{position:absolute;left:50%;top:50%;width:112px;height:112px;transform:translate(-50%,-50%);opacity:0;pointer-events:none}
.reels .reel-burst svg{width:100%;height:100%;fill:#fff;stroke:#fff;filter:drop-shadow(0 4px 14px #0009)}
.reels .reel-rail{position:absolute;right:10px;bottom:calc(84px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:20px;z-index:3}
.reels .reel-action{width:50px;min-height:0;padding:0;display:grid;justify-items:center;gap:5px;border:0;border-radius:0;background:transparent;color:#fff;cursor:pointer;filter:drop-shadow(0 2px 6px #000a)}
.reels .reel-action svg{width:29px;height:29px}
.reels .reel-like.is-on svg{fill:#ff2d55;stroke:#ff2d55}
.reels .reel-count{font-size:12px;line-height:1;min-height:12px;font-variant-numeric:tabular-nums}
.reels .reel-sound.is-off{opacity:.75}
.reels .reel-caption{position:absolute;left:16px;right:74px;bottom:calc(26px + env(safe-area-inset-bottom));z-index:3;font-size:13px;line-height:1.5;text-shadow:0 1px 8px #000c}
.reels .reel-caption p{margin:0;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.reels .reel-caption.is-open p{-webkit-line-clamp:7}
.reels .reel-caption-more{border:0;background:transparent;color:#ffffffc7;font-size:12px;padding:3px 0;cursor:pointer}
.reels .reel-progress{position:absolute;left:0;right:0;bottom:0;height:24px;padding-bottom:env(safe-area-inset-bottom);display:flex;align-items:flex-end;z-index:4;touch-action:none;cursor:pointer}
.reels .reel-progress:before{content:"";position:absolute;left:0;right:0;bottom:env(safe-area-inset-bottom);height:3px;background:#ffffff3d}
.reels .reel-progress i{position:relative;display:block;height:3px;width:0;background:#fff;transition:height .12s}
.reels .reel-progress.is-scrubbing i,.reels .reel-progress.is-scrubbing:before{height:5px}
.reels .reels-close{position:absolute;top:14px;right:12px;z-index:9;width:44px;height:44px;border:0;border-radius:10px;background:#00000059;color:#fff;display:grid;place-items:center;cursor:pointer}
.reels .reels-close svg{width:20px}
.reels .reels-step{position:absolute;right:26px;z-index:5;width:42px;height:42px;border-radius:50%;border:0;background:#ffffff1f;color:#fff;display:none;place-items:center;cursor:pointer;transition:right .2s}
.reels .reels-step svg{width:18px}
.reels .reels-prev{top:calc(50% - 52px);transform:rotate(-90deg)}
.reels .reels-next{top:calc(50% + 10px);transform:rotate(90deg)}
.reels .reels-step:disabled{opacity:.3;cursor:default}
.reels .reels-shade{position:absolute;inset:0;z-index:7;background:transparent;border:0;padding:0}
.reels .reels-comments{position:absolute;left:0;right:0;bottom:0;z-index:8;display:flex;flex-direction:column;height:min(70dvh,560px);background:#12151b;border-radius:18px 18px 0 0;box-shadow:0 -12px 40px #000c}
.reels .reels-comments header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 8px 12px 18px;border-bottom:1px solid #ffffff17}
.reels .reels-comments h2{margin:0;padding:0;font-size:15px;font-weight:600;color:#fff;letter-spacing:0}
.reels .reels-comments header button{width:44px;height:44px;border:0;background:transparent;color:#cfd8e6;display:grid;place-items:center;cursor:pointer}
.reels .reels-comments header button svg{width:20px}
.reels .reels-list{flex:1;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:18px;padding:16px 18px}
.reels .reels-comment{display:flex;gap:10px}
.reels .reels-avatar{flex:none;width:32px;height:32px;border-radius:50%;background:#2a3140;display:grid;place-items:center;font-size:13px;color:#cdd7e6}
.reels .reels-comment-body{min-width:0}
.reels .reels-comment-head{margin:0 0 3px;display:flex;gap:8px;align-items:baseline;font-size:12px;color:#93a0b3}
.reels .reels-comment-head b{color:#fff;font-weight:600}
.reels .reels-comment-text{margin:0;font-size:14px;line-height:1.45;color:#fff;white-space:pre-line;overflow-wrap:anywhere}
.reels .reels-comment-delete{margin-top:6px;padding:0;border:0;background:transparent;color:#93a0b3;font-size:12px;cursor:pointer}
.reels .reels-comment-delete:hover{color:#fff}
.reels .reels-empty{margin:auto;padding:20px;color:#93a0b3;font-size:13px;text-align:center}
.reels .reels-more{margin:0 18px 10px;min-height:42px;border:0;background:transparent;color:#cfd8e6;font-size:13px;cursor:pointer}
.reels .reels-form{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end;padding:12px 18px calc(12px + env(safe-area-inset-bottom));border-top:1px solid #ffffff17;margin:0}
.reels .reels-form textarea{width:100%;min-height:44px;max-height:120px;margin:0;resize:none;padding:11px 15px;border:1px solid #333b49;border-radius:20px;background:#1c2029;color:#fff;font:inherit;font-size:15px;line-height:1.35}
.reels .reels-form textarea::placeholder{color:#8792a5}
.reels .reels-send{width:44px;height:44px;padding:0;border-radius:50%;border:0;background:#b62e36;color:#fff;display:grid;place-items:center;cursor:pointer}
.reels .reels-send:hover{background:#cf3943}
.reels .reels-send svg{width:19px}
.reels .reels-note{grid-column:1/-1;margin:0;font-size:11px;color:#79839a;line-height:1.4}
.reels .reels-toast{position:absolute;left:50%;bottom:calc(120px + env(safe-area-inset-bottom));transform:translate(-50%,10px);z-index:10;max-width:min(420px,88%);margin:0;padding:11px 16px;border-radius:10px;background:#1c2029ee;color:#fff;font-size:13px;line-height:1.45;text-align:center;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.reels .reels-toast.is-on{opacity:1;transform:translate(-50%,0)}
.video-tile .tile-stats{position:absolute;z-index:2;right:12px;bottom:14px;display:flex;gap:12px;font-size:11px;color:#fff}
.video-tile .tile-stats span{display:inline-flex;align-items:center;gap:4px}
.video-tile .tile-stats svg{width:14px;height:14px}
.video-tile[data-liked="1"] [data-tile-likes] svg{fill:#ff2d55;stroke:#ff2d55}
@media(min-width:900px){
 .reels .reel{padding:18px 0}
 .reels .reel-stage{width:auto;height:100%;aspect-ratio:9/16;max-width:100%;border-radius:14px}
 .reels .reel-rail{position:static;align-self:flex-end;margin:0 0 30px 14px;gap:22px}
 .reels .reels-step{display:grid}
 .reels .reels-comments{left:auto;top:0;bottom:0;width:min(400px,36vw);height:100%;border-radius:0;border-left:1px solid #ffffff14}
 .reels.is-commenting .reels-track{padding-right:min(400px,36vw)}
 .reels.is-commenting .reels-step{right:calc(min(400px,36vw) + 26px)}
 .reels .reels-close{top:18px;right:18px}
 .reels.is-commenting .reels-close{right:calc(min(400px,36vw) + 18px)}
}
@media(max-width:899px){
 .reels.is-commenting .reel-rail,.reels.is-commenting .reel-caption{opacity:0;transition:opacity .15s}
}
@media(prefers-reduced-motion:reduce){
 .reels .reel-progress i,.reels .reels-step,.reels .reels-toast{transition:none}
}