/* ═══ ПЛЕЕР ЗАПИСЕЙ ═══════════════════════════════════════════════════════════
   Пара к /cabinet/js/player.js. Панель повторяет плеер кабинета курса
   (lms/site/urok.css): один плеер в двух местах не должен выглядеть по-разному.
   Отличия телефонные — крупные кнопки и свой полный экран.

   Панель тёмная в любой теме: она лежит поверх кадра, а кадр всегда тёмный.
   ────────────────────────────────────────────────────────────────────────── */
.nzpl{position:relative;width:100%;border-radius:var(--r-m);overflow:hidden;background:#000;
  aspect-ratio:16/9}
.nzpl video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.nzpl.idle{cursor:none}

/* Большая кнопка на нетронутой записи: до первого нажатия панель не нужна. */
.nzpl-big{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:66px;height:66px;display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;
  color:#fff;background:rgba(8,18,32,.62);box-shadow:0 10px 30px -12px rgba(0,0,0,.8);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.nzpl-big:active{transform:translate(-50%,-50%) scale(.96)}
.nzpl-big[hidden]{display:none}

/* Честное «загружаю»: на медленной сети кадр стоит, и без подписи кажется,
   что плеер сломался. */
.nzpl-wait{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  padding:7px 13px;border-radius:999px;font-size:12.5px;color:#E8EEF7;
  background:rgba(8,18,32,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.nzpl-wait[hidden]{display:none}

.nzpl-p{position:absolute;left:8px;right:8px;bottom:8px;z-index:4;
  padding:6px 9px 4px;border-radius:12px;border:1px solid rgba(255,255,255,.14);
  background:rgba(6,18,34,.72);color:#E8EEF7;
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  transition:opacity .2s var(--ease),transform .2s var(--ease)}
.nzpl-p[hidden]{display:none}
/* Панель ушла — но только пока запись идёт (см. player.js, разбуди). */
.nzpl.idle .nzpl-p{opacity:0;transform:translateY(6px);pointer-events:none}

.nzpl-track{position:relative;height:18px;display:flex;align-items:center;cursor:pointer;touch-action:none}
.nzpl-track i{position:absolute;display:block;pointer-events:none}
.nzpl-rail{left:0;right:0;height:4px;border-radius:2px;background:rgba(255,255,255,.20)}
.nzpl-buf{left:0;width:0;height:4px;border-radius:2px;background:rgba(255,255,255,.32)}
.nzpl-fill{left:0;width:0;height:4px;border-radius:2px;background:#4EA1FF}
.nzpl-knob{left:0;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.45);transition:transform .12s var(--ease)}
.nzpl-track:active .nzpl-knob{transform:scale(1.3)}
.nzpl-track:focus-visible{outline:none}
.nzpl-track:focus-visible .nzpl-rail{box-shadow:0 0 0 2px rgba(255,255,255,.5)}

.nzpl-row{display:flex;align-items:center;gap:2px;margin-top:1px}
/* 40px — палец, а не курсор: этот плеер живёт на телефоне. */
.nzpl-b{display:grid;place-items:center;min-width:40px;height:40px;padding:0 4px;border:0;border-radius:10px;
  background:transparent;color:#E8EEF7;cursor:pointer;opacity:.9}
.nzpl-b:active{background:rgba(255,255,255,.18)}
.nzpl-rate{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.2px}
.nzpl-t{font-family:var(--mono);font-size:11.5px;opacity:.9;font-variant-numeric:tabular-nums;
  white-space:nowrap;padding:0 3px}
.nzpl-sp{margin-left:auto}
/* Иконка показывает, что кнопка сделает сейчас: на паузе — «смотреть». */
.nzpl .i-pause,.nzpl .i-out{display:none}
.nzpl.on .i-play{display:none}
.nzpl.on .i-pause{display:block}
.nzpl.full .i-in,.nzpl.self .i-in{display:none}
.nzpl.full .i-out,.nzpl.self .i-out{display:block}

/* Свой полный экран — когда webview запретил Fullscreen API (телеграм умеет).
   Кадр растягивается на всё окно, панель остаётся нашей. */
.nzpl.self{position:fixed;inset:0;z-index:90;width:100vw;height:100dvh;max-width:none;
  border-radius:0;aspect-ratio:auto}
.nzpl.self video{height:100%;object-fit:contain}
.nzpl.self .nzpl-p{left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px))}

/* Родной полный экран: кадр занимает весь экран целиком. */
.nzpl:fullscreen{border-radius:0;aspect-ratio:auto;width:100vw;height:100vh}
.nzpl:-webkit-full-screen{border-radius:0;width:100vw;height:100vh}