/**
 * Карточка плеера на странице файла в дизайне нового лк (ST-1272): само медиа и прокрутка
 * расшифровки рядом с ним.
 *
 * Стили именно здесь, а не классами в разметке: <video> Plyr подменяет своей вёрсткой (.plyr,
 * .plyr__video-wrapper, .plyr__controls), и повесить на неё tailwind-классы неоткуда. Всё
 * ограничено .lk-player — старые страницы плеера живут на своём css/player.css.
 */

/* Высота медиа по макету (мобильный 208px, от sm — 384px). Видео вписывается целиком, поля
   добирает чёрным фоном .plyr__video-wrapper — так же, как нарисовано в макете.
   Высота на обёртке, а не на .plyr: «Свернуть» ставит ей инлайновые 50px (player-page.js),
   и инлайн должен перебивать эту высоту, иначе на месте свёрнутого видео осталась бы пустота.
   Значение — через переменную: её двигают лупы «крупнее/мельче» и, ниже lg, разделитель
   (см. player-page.js).
   Скругление и обрезка тоже здесь, а не на контейнере .lk-player: тому overflow снят ради меню
   шестерёнки (оно выпадает за пределы плеера, см. ниже), а чёрные поля кадра всё равно должны
   лежать в скруглённом прямоугольнике из макета. */
.lk-player .plyr__video-wrapper {
    height: var(--lk-player-media-h, 13rem);
    overflow: hidden;
    border-radius: 1rem;
}

@media (min-width: 640px) {
    .lk-player .plyr__video-wrapper {
        height: var(--lk-player-media-h, 24rem);
    }
}


.lk-player .plyr__video-wrapper video {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

/* Полный экран: кадру нужна вся высота, а наша (24rem по макету) держала бы видео маленьким
   прямоугольником посреди чёрного экрана — так это и выглядело. Правила Plyr для fullscreen
   (.plyr:fullscreen video { height: 100% }) до кадра не доходят: высоту задаёт обёртка, и наш css
   грузится позже. !important — из-за «Свернуть»: тот ставит обёртке инлайновые 50px и
   visibility: hidden, и без него свёрнутое видео разворачивалось бы на весь экран пустотой.
   Селекторы раздельные намеренно: браузер выбрасывает весь список, если хоть один селектор в нём
   ему незнаком, а :fullscreen поддержан не везде — здесь его подстраховывает fallback-класс,
   который Plyr вешает сам. */
.lk-player .plyr:fullscreen .plyr__video-wrapper {
    height: 100% !important;
    visibility: visible !important;
    border-radius: 0;
}

.lk-player .plyr--fullscreen-fallback .plyr__video-wrapper {
    height: 100% !important;
    visibility: visible !important;
    border-radius: 0;
}

.lk-player .plyr--fullscreen-active .plyr__video-wrapper {
    height: 100% !important;
    visibility: visible !important;
    border-radius: 0;
}

/* Акцент Plyr: по умолчанию он голубой (#00b3ff), в лк — фиолетовый. Красит прогресс,
   громкость и активные пункты меню скорости. */
.lk-player {
    --plyr-color-main: #8752fa;
}

/* Большая кнопка Play: в макете это полупрозрачный белый круг 56px с белым треугольником,
   у Plyr по умолчанию — залитый акцентным цветом. 19px отступа вокруг 18px иконки и дают
   макетные 56px. */
.lk-player .plyr__control--overlaid {
    background: rgba(255, 255, 255, 0.35);
    padding: 19px;
    opacity: 1;
}

.lk-player .plyr__control--overlaid:hover,
.lk-player .plyr__control--overlaid:focus {
    background: rgba(255, 255, 255, 0.5);
}

/* У незапущенного видео в макете панели управления нет — только кадр и кнопка. Показываем её
   по наведению и с клавиатуры; после старта Plyr прячет и показывает панель сам. */
.lk-player .plyr--video.plyr--stopped .plyr__controls {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.lk-player .plyr--video.plyr--stopped:hover .plyr__controls,
.lk-player .plyr--video.plyr--stopped:focus-within .plyr__controls {
    opacity: 1;
    pointer-events: auto;
}

/* Свёрнутое видео: кадра больше нет, и панель управления — единственное, что от плеера остаётся
   видно. Plyr прячет её через пару секунд после старта (.plyr--hide-controls), поэтому свёрнутое
   играющее видео пропадало со страницы целиком, тогда как на паузе оставалась полоса с кнопками.
   В свёрнутом виде панель держим на месте всегда — и у играющего, и у остановленного.
   transition снимаем: у Plyr на панели 0.4s на opacity и transform, и панель, скрытая к моменту
   клика по «Свернуть», выезжала снизу уже после того, как кадр пропал, — плеер на глазах
   исчезал и возвращался. Без перехода он просто сразу становится полосой, как на паузе. */
.lk-player--collapsed .plyr--video.plyr--hide-controls .plyr__controls,
.lk-player--collapsed .plyr--video.plyr--stopped .plyr__controls {
    opacity: 1;
    pointer-events: auto;
    transform: none;
    transition: none;
}

/* Меню шестерёнки («Скорость», «Качество»). Общий plyr.css кладёт его слева от кнопки
   (top: 0; right: calc(100% + 5px)) — там оно ложится прямо на дорожку, а у аудио-плеера, вся
   высота которого одна полоса, ещё и не помещается: пункты выглядели обрезанными и по ним нельзя
   было попасть. Роняем меню вниз, под панель управления, — одинаково у видео и у аудио: вверх
   у аудио список скоростей на восемь строк ушёл бы поверх вкладок и шапки карточки, а под
   плеером в колонке пусто у обоих. Рамка и тень поплотнее — на белой карточке дефолтная тень
   Plyr (0 1px 2px) почти не видна. */
.lk-player .plyr__menu__container {
    top: calc(100% + 10px);
    bottom: auto;
    right: -3px;
    border: 1px solid #d6cdf3;
    box-shadow: 0 8px 24px rgba(24, 15, 73, 0.18);
}

/* Плеер вместе с раскрытым меню — поверх соседей по карточке (разделитель колонок позиционирован
   и идёт следом за ним, поэтому иначе перекрыл бы выпавшее вниз меню). */
.lk-player {
    position: relative;
    z-index: 1;
}

/* Прокрутка расшифровки: в макете это тонкая фиолетовая полоска, а нативная в браузере —
   широкая серая. Оформление то же, что у списка языков в шапке (css/lk/language-modal.css). */
.lk-player-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(135, 82, 250, 0.4) #f2f1f7;
}

.lk-player-scroll::-webkit-scrollbar {
    width: 4px;
}

.lk-player-scroll::-webkit-scrollbar-track {
    background: #f2f1f7;
    border-radius: 100px;
}

.lk-player-scroll::-webkit-scrollbar-thumb {
    background: rgba(135, 82, 250, 0.4);
    border-radius: 100px;
}

/* Разделитель колонок: линия #dde1e5 в 2px и белая ручка со стрелками посередине — как в макете.
   Мобильная раскладка (панели друг под другом) — линия поперёк, ручка повёрнута; от lg панели
   встают в ряд, и всё разворачивается на 90°. */
.lk-player-resizer {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-self: stretch;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 1.5rem;
    cursor: row-resize;
    touch-action: none;
}

.lk-player-resizer__line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 100px;
    background: #dde1e5;
    pointer-events: none;
}

.lk-player-resizer__handle {
    position: relative;
    display: inline-flex;
    width: 1.5rem;
    height: 1.5rem;
    color: #d2d2d6;
    transform: rotate(90deg);
    pointer-events: none;
}

.lk-player-resizer__handle > svg {
    width: 100%;
    height: 100%;
}

@media (min-width: 1024px) {
    /* Высота — как у видео, а не как у карточки: в макете линия идёт ровно вдоль кадра
       (top-[53px] при высоте 359 против 384 у видео), и ручка приходится на его середину.
       Отступ сверху — шапка панели плеера: её собственные 24px плюс строка «Свернуть» с
       отбивом, те самые 52px. */
    /* Ширина — как зазор между колонками в макете (gap-5, 20px): там разделитель нарисован
       поверх зазора и места не занимает, а у нас это обычный флекс-элемент. Поэтому в ряду
       колонок gap снимаем, и весь зазор — сам разделитель; ручка в 24px чуть шире него и
       заходит на панели, ровно как в макете. */
    .lk-player-card {
        gap: 0;
    }

    .lk-player-resizer {
        align-self: flex-start;
        margin-top: 3.25rem;
        width: 1.25rem;
        height: 24rem;
        cursor: col-resize;
    }

    .lk-player-resizer__handle {
        flex: 0 0 auto;
    }

    .lk-player-resizer__line {
        left: 50%;
        right: auto;
        top: 0;
        bottom: 0;
        width: 2px;
        height: auto;
        transform: translateX(-50%);
    }

    .lk-player-resizer__handle {
        transform: none;
    }
}

/* Ширина колонок, когда её подвинули ручкой. Переменную ставит player-page.js на карточке, и
   действует она только на десктопе: ниже lg панели идут колонкой, и flex-basis стал бы высотой.
   Селектор с [data-player-page] — чтобы перебить lg:basis-1/2 из tailwind, он идёт следом. */
@media (min-width: 1024px) {
    [data-player-page] [data-player-col="media"] {
        flex: 0 0 var(--lk-player-split, 50%);
    }

    [data-player-page] [data-player-col="text"] {
        flex: 1 1 0%;
    }
}

/* Кнопка «Скачать» — компонент карточки списка, и до 1024px его собственные правила
   (css/lk/responsive.css) уводят .lk-file-card__download-wrap в конец строки (order: 4) и
   растягивают на всю ширину: в карточке файла она стоит там последней, отдельной строкой.
   На странице плеера панель своя, и в макете «Скачать» стоит слева от «Поделиться» — порядок
   задаёт разметка, поэтому чужой order здесь снимаем. */
[data-player-page] .lk-file-card__download-wrap {
    order: 0;
    width: auto;
}

/* Расшифровка скроллится внутри панели и ниже lg: в планшетном и мобильном макетах у неё своя
   полоса, нарисованная вдоль текста, — на десктопе высоту и прокрутку задают утилиты в
   _text_panel. Ограничение в dvh, а не в vh: на мобильных vh считается по экрану без учёта
   съезжающей адресной строки, и панель вылезала бы за него. */
@media (max-width: 1023.98px) {
    .lk-player-scroll {
        max-height: 60vh;
        max-height: 60dvh;
        overflow-y: auto;
    }
}

/* Верх карточки на вкладке AI-отчётов: 24px, как во всех трёх макетах отчётов. Утилитами не
   выходит — от sm карточка берёт sm:p-3, а медиа-запросы в собранном tailwind стоят после
   базовых правил и перебивают любой базовый pt-*. Селектор с [data-player-page] — чтобы взять
   верх над утилитой той же специфичности. */
[data-player-page] .lk-player-card--research {
    padding-top: 1.5rem;
}

/* Два разделителя вкладки AI-отчётов: под кадром (пока колонки сложены) и между колонками (от lg).
   Показываем каждый на своей раскладке здесь же — утилиты lg:hidden/max-lg:hidden не годятся:
   этот файл подключается после tailwind, и display из .lk-player-resizer их перебивает. */
.lk-player-resizer--columns {
    display: none;
}

@media (min-width: 1024px) {
    .lk-player-resizer--stacked {
        display: none;
    }

    .lk-player-resizer--columns {
        display: flex;
    }
}

/* Колонка с текстом тянется по высоте карточки, а прокрутка внутри неё занимает весь остаток
   после тулбара. Иначе скроллер кончается там же, где текст: полоса обрывалась на середине, а
   ниже до низа карточки шёл её собственный белый фон — высоту там задаёт соседняя колонка с
   плеером и «Содержанием». min-height: 0 обязателен: без него flex-элемент не сжимается ниже
   своего содержимого и прокрутка не включается. Верхнюю границу по-прежнему держит
   lg:max-h-[calc(100vh-260px)] из разметки — на случай, если карточка выше экрана. */
@media (min-width: 1024px) {
    [data-player-page] [data-player-col="text"] {
        align-self: stretch;
    }

    [data-player-page] [data-player-col="text"] .lk-player-scroll {
        flex: 1 1 auto;
        min-height: 0;
    }
}

/* Декоративный градиент лейаута — violet-300 на 320px сверху (layouts/lk.php) — на странице плеера
   гасим: в макетах фон за вкладками ровный #f8f7ff, а градиент подкрашивал его до #f0edff, и
   неактивные вкладки на нём почти сливались с фоном. Своим фоном его не перекрыть: .lk-page уже
   макетной ширины, и по бокам от неё градиент остался бы виден. Правило живёт здесь, а не в
   лейауте: этот файл грузится только страницей плеера (InteractivePlayerPageAsset регистрируется в
   _page.php), так что чужих страниц оно не касается. Селектор перечисляет утилиты того самого
   div'а — если их там поменяют, градиент просто вернётся. */
body.lk-body > .absolute.inset-x-0.top-0.h-80.bg-gradient-to-b {
    display: none;
}

/* Полоса разделов «Файлы»/«Встречи» под шапкой (lk/widgets/tabs) залита --lk-violet-bg (#f8f3ff) —
   на фоне страницы (#f8f7ff) её край не читается, и шапка сливается с телом страницы. В макете
   заливка там заметно плотнее: #f0ebfb (в экспорте огрублена до bg-violet-100), и по её нижней
   скруглённой кромке видно, где шапка кончается. Красим только здесь, из стилей самой страницы:
   полоса общая для всего лк, а поправить надо страницу плеера. */
.lk-tabs {
    background-color: #f0ebfb;
}

/* Слово, которое звучит прямо сейчас, внутри активной реплики (караоке-подсветка, см.
   js/player-page.js). Абзац под ней залит --lk-violet-bg (#f8f3ff), поэтому слову нужен заметно
   плотнее тон — иначе на светлой подложке его не видно.
   Стиль именно здесь, а не tailwind-классом: span'ы со словами создаёт скрипт, а tailwind
   собирает классы только из php-вьюх и frontend/web/js (tailwind.config.js) — из assets модуля он
   их не увидит и правило просто не сгенерирует.
   Подложка нарисована box-shadow, а не padding: padding раздвинул бы строку на каждом слове, и
   текст дёргался бы на каждом обновлении времени. */
[data-player-page] .lk-player-word-active {
    background-color: rgba(135, 82, 250, 0.22);
    border-radius: 3px;
    box-shadow: 0 0 0 2px rgba(135, 82, 250, 0.22);
}