:root{
  --pad-h:16px;          /* горизонтальные отступы мобилки */
  --pad-top:16px;        /* верх мобилка */
  --pad-bottom:16px;     /* низ мобилка */
  --radius:16px;
}
/* десктоп: прибиваем к верху */
@media (min-width: 1024px){
  :root{
    --pad-h:24px;
    --pad-top:0px;       /* верх = 0 */
    --pad-bottom:24px;   /* небольшой низ */
    --radius:16px;
  }
}

html,body{margin:0;height:100%; background:#0b0b0b; color:#fff;}
body.page-reels-lite{
  height:100dvh;
  overflow:hidden;
  -webkit-overflow-scrolling:auto;
}

.reels-lite{
  position:relative;
  min-height:100svh;
  padding:
    max(var(--pad-top),    env(safe-area-inset-top))
    max(var(--pad-h),      env(safe-area-inset-right))
    max(var(--pad-bottom), env(safe-area-inset-bottom))
    max(var(--pad-h),      env(safe-area-inset-left));
  display:flex; align-items:center; justify-content:center;

  touch-action:none;
  overscroll-behavior:none;
  -ms-touch-action:none;
}

.reels-lite .frame{
  position:relative;
  width:100%;
  height:calc(100svh - (var(--pad-top) + var(--pad-bottom)));
  display:flex; align-items:center; justify-content:center;
}

/* Рамка видео + клип скруглений */
.video-wrap{
  position:relative;
  height:100%;
  aspect-ratio:9/16;
  display:block;
  overflow:hidden;                 /* <- чтобы все оверлеи были внутри скругления */
  border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.video-wrap video{
  height:100%;
  width:auto;
  aspect-ratio:9/16;
  object-fit:cover;
  background:#000;
  border-radius:var(--radius);
  touch-action:none;
}

/* overlay-кнопки */
.video-wrap .btn{
  position:absolute; top:12px; z-index:40; width:36px; height:36px; border-radius:999px;
  border:1px solid rgba(255,255,255,.25); background:rgba(0,0,0,.55); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 3px 16px rgba(0,0,0,.35);
}
.video-wrap .btn.mute{ left:12px; }
.video-wrap .btn.close{ right:12px; }

/* стрелки: слева, по центру видео */
.video-wrap .vnav{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:8px; z-index:40;
}
.video-wrap .vnav .nav{
  width:36px; height:36px; border-radius:999px; border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.55); color:#fff; display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}

/* подпись — над таймлайном */
.video-wrap .caption{
  position:absolute; left:50%; bottom:64px; transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55));
  padding:10px 14px; border-radius:12px; font-weight:600; text-align:center;
  max-width:calc(100% - 24px); z-index:42;
}

/* ===== ТАЙМЛАЙН — яркий, кликабельный, всегда виден ===== */
.video-wrap .timeline{
  position:absolute;
  left:50%;
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 12px);
  transform:translateX(-50%);
  z-index: 50;                 /* выше всех оверлеев */
  pointer-events: auto;        /* кликабелен */
}
.video-wrap .timeline .tl-track{
  position:relative;
  height:8px;                  /* толще — заметней */
  width: calc(100% - 24px);
  max-width: 560px;
  border-radius: 999px;
  background: #ffffff73;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.35) inset,
    0 1px 6px rgba(0,0,0,.35);
  overflow:hidden;
}
.timeline .tl-buffer{
  position:absolute; left:0; top:0; height:100%;
  background: rgba(255,255,255,.65);
}
.timeline .tl-progress{
  position:absolute; left:0; top:0; height:100%;
  background:#fff;
}
.timeline .tl-thumb{
  position:absolute; top:50%;
  transform: translate(-6px, -50%);
  width:12px; height:12px; border-radius:999px; background:#fff;
  box-shadow:0 0 0 2px rgba(0,0,0,.35);
}

/* скрытые данные */
.reels-lite .data{display:none;}