/*
  Этот файл добавляет финальные исправления fullscreen-режима видео.
  Он подключается ПОСЛЕ player.css и жестко добивает только три вещи:
  1) настоящий fullscreen-контур для видео через video-app-fullscreen,
  2) плотный ряд кнопок без пустот,
  3) скрытие repeat/quality/audio в видеорежиме без сохранения места.
*/

body.video-player-active #repeatBtn,
html.video-app-fullscreen #repeatBtn,
body.video-app-fullscreen #repeatBtn,
#videoInlineQualityWrap,
#videoInlineAudioTrackWrap,
#videoInlineQualityWrap[hidden],
#videoInlineAudioTrackWrap[hidden] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  position: absolute !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  flex: 0 0 0 !important;
}

.controls,
html.video-app-fullscreen .controls,
body.video-app-fullscreen .controls,
html.video-app-fullscreen.fullscreen-video-ui-visible .controls,
body.video-app-fullscreen.fullscreen-video-ui-visible .controls {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  max-width: calc(100vw - 24px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 12px !important;
  column-gap: 12px !important;
  row-gap: 12px !important;
}

.controls > button,
.controls > .video-inline-btn,
.controls > .video-inline-select-wrap,
html.video-app-fullscreen .controls > button,
html.video-app-fullscreen .controls > .video-inline-btn,
html.video-app-fullscreen .controls > .video-inline-select-wrap,
body.video-app-fullscreen .controls > button,
body.video-app-fullscreen .controls > .video-inline-btn,
body.video-app-fullscreen .controls > .video-inline-select-wrap {
  flex: 0 0 54px !important;
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
  margin: 0 !important;
}

#videoInlineFullscreenBtn,
#videoCloseBtn,
html.video-app-fullscreen #videoInlineFullscreenBtn,
html.video-app-fullscreen #videoCloseBtn,
body.video-app-fullscreen #videoInlineFullscreenBtn,
body.video-app-fullscreen #videoCloseBtn {
  position: relative !important;
  inset: auto !important;
  margin: 0 !important;
  pointer-events: auto !important;
  z-index: 10021 !important;
}

html.video-app-fullscreen,
body.video-app-fullscreen {
  background: #000 !important;
}

html.video-app-fullscreen .controls,
body.video-app-fullscreen .controls {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
  transform: translateX(-50%) !important;
}

html.video-app-fullscreen .player-bar,
body.video-app-fullscreen .player-bar {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + 70px) !important;
  transform: translateX(-50%) !important;
}



html.video-app-fullscreen #videoPlayerShell,
body.video-app-fullscreen #videoPlayerShell,
html.video-app-fullscreen .video-player-body,
body.video-app-fullscreen .video-player-body {
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

html.video-app-fullscreen .video-player,
body.video-app-fullscreen .video-player {
  display: block !important;
  margin-top: 0 !important;
  margin-right: auto !important;
  margin-bottom: 0 !important;
  margin-left: auto !important;
  align-self: flex-start !important;
}

@media (orientation: portrait) {
  html.video-app-fullscreen #videoPlayerShell,
  body.video-app-fullscreen #videoPlayerShell,
  html.video-app-fullscreen .video-player-body,
  body.video-app-fullscreen .video-player-body {
    width: 100vw !important;
    height: 100vh !important;
  }

  html.video-app-fullscreen .video-player,
  body.video-app-fullscreen .video-player {
    width: 100vw !important;
    height: 100dvh !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    max-height: 100vh !important;
    object-fit: contain !important;
  }

  html.video-app-fullscreen .player-bar,
  body.video-app-fullscreen .player-bar {
    width: min(94vw, 720px) !important;
    max-width: min(94vw, 720px) !important;
  }
}

@media (orientation: landscape) {
  html.video-app-fullscreen #videoPlayerShell,
  body.video-app-fullscreen #videoPlayerShell,
  html.video-app-fullscreen .video-player-body,
  body.video-app-fullscreen .video-player-body {
    width: 100vw !important;
    height: 100vh !important;
  }

  html.video-app-fullscreen .video-player,
  body.video-app-fullscreen .video-player {
    width: 100vw !important;
    height: 100dvh !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    max-height: 100vh !important;
    object-fit: contain !important;
  }

  html.video-app-fullscreen .player-bar,
  body.video-app-fullscreen .player-bar {
    width: min(78vw, 760px) !important;
    max-width: min(78vw, 760px) !important;
  }
}


/* 53.239: fullscreen-video sizing should follow the real screen bounds.
   Видео не резервирует место под нижний UI: панель и кнопки остаются overlay поверх видео.
   Это убирает лишний нижний отступ и позволяет видео занять максимум экрана по своему формату. */
html.video-app-fullscreen #videoPlayerShell,
body.video-app-fullscreen #videoPlayerShell,
html.video-app-fullscreen .video-player-body,
body.video-app-fullscreen .video-player-body {
  width: 100vw !important;
  height: 100dvh !important;
  height: 100vh !important;
  min-height: 100dvh !important;
  min-height: 100vh !important;
}

html.video-app-fullscreen .video-player,
body.video-app-fullscreen .video-player {
  display: block !important;
  width: 100vw !important;
  height: 100dvh !important;
  height: 100vh !important;
  min-height: 100dvh !important;
  min-height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100dvh !important;
  max-height: 100vh !important;
  object-fit: contain !important;
  object-position: top center !important;
  margin: 0 auto !important;
}


/* 53.240: hide mouse cursor after inactivity in fullscreen video on desktop browsers. */
html.video-app-fullscreen.fullscreen-video-cursor-hidden,
body.video-app-fullscreen.fullscreen-video-cursor-hidden,
html.video-app-fullscreen.fullscreen-video-cursor-hidden #videoPlayerShell,
body.video-app-fullscreen.fullscreen-video-cursor-hidden #videoPlayerShell,
html.video-app-fullscreen.fullscreen-video-cursor-hidden .video-player,
body.video-app-fullscreen.fullscreen-video-cursor-hidden .video-player,
html.video-app-fullscreen.fullscreen-video-cursor-hidden .player-bar,
body.video-app-fullscreen.fullscreen-video-cursor-hidden .player-bar,
html.video-app-fullscreen.fullscreen-video-cursor-hidden .controls,
body.video-app-fullscreen.fullscreen-video-cursor-hidden .controls,
html.video-app-fullscreen.fullscreen-video-cursor-hidden .controls *,
body.video-app-fullscreen.fullscreen-video-cursor-hidden .controls * {
  cursor: none !important;
}


/* 53.241: fullscreen top-edge alignment fix for desktop browsers.
   Жестко прижимаем fullscreen video-shell и сам video-элемент к верхней границе viewport,
   чтобы не оставался визуальный зазор сверху и видео не выглядело сдвинутым вниз. */
html.video-app-fullscreen #videoPlayerShell,
body.video-app-fullscreen #videoPlayerShell {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

html.video-app-fullscreen .video-player-body,
body.video-app-fullscreen .video-player-body {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  height: 100vh !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
}

html.video-app-fullscreen .video-player,
body.video-app-fullscreen .video-player {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100dvh !important;
  max-height: 100vh !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: top center !important;
  transform: none !important;
  margin: 0 !important;
}


/* 53.253: mobile browser / Telegram browser / Telegram Mini App fullscreen parity.
   Переносим desktop fullscreen-контур на mobile/Telegram: те же размеры оверлея,
   те же позиции player-bar/controls и тот же реальный viewport через JS vars. */
html.video-app-fullscreen.video-app-fullscreen-mobile-parity,
body.video-app-fullscreen.video-app-fullscreen-mobile-parity {
  background: #000 !important;
}

html.video-app-fullscreen.video-app-fullscreen-mobile-parity #appContainer,
body.video-app-fullscreen.video-app-fullscreen-mobile-parity #appContainer {
  position: fixed !important;
  inset: 0 !important;
  width: var(--video-fs-vw, 100vw) !important;
  height: var(--video-fs-vh, 100dvh) !important;
  min-height: var(--video-fs-vh, 100dvh) !important;
  max-height: var(--video-fs-vh, 100dvh) !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: #000 !important;
}

html.video-app-fullscreen.video-app-fullscreen-mobile-parity #videoPlayerShell,
body.video-app-fullscreen.video-app-fullscreen-mobile-parity #videoPlayerShell,
html.video-app-fullscreen.video-app-fullscreen-mobile-parity .video-player-body,
body.video-app-fullscreen.video-app-fullscreen-mobile-parity .video-player-body {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: var(--video-fs-vw, 100vw) !important;
  height: var(--video-fs-vh, 100dvh) !important;
  min-height: var(--video-fs-vh, 100dvh) !important;
  max-height: var(--video-fs-vh, 100dvh) !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #000 !important;
}

html.video-app-fullscreen.video-app-fullscreen-mobile-parity .video-player,
body.video-app-fullscreen.video-app-fullscreen-mobile-parity .video-player {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: var(--video-fs-vw, 100vw) !important;
  height: var(--video-fs-vh, 100dvh) !important;
  min-height: var(--video-fs-vh, 100dvh) !important;
  max-height: var(--video-fs-vh, 100dvh) !important;
  object-fit: contain !important;
  object-position: top center !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
  background: #000 !important;
}

html.video-app-fullscreen.video-app-fullscreen-mobile-parity .player-bar,
body.video-app-fullscreen.video-app-fullscreen-mobile-parity .player-bar {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + 70px) !important;
  transform: translateX(-50%) !important;
  width: min(calc(var(--video-fs-vw, 100vw) - 24px), 760px) !important;
  max-width: min(calc(var(--video-fs-vw, 100vw) - 24px), 760px) !important;
  z-index: 10020 !important;
}

html.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls,
body.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls,
html.video-app-fullscreen.video-app-fullscreen-mobile-parity.fullscreen-video-ui-visible .controls,
body.video-app-fullscreen.video-app-fullscreen-mobile-parity.fullscreen-video-ui-visible .controls {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
  transform: translateX(-50%) !important;
  width: max-content !important;
  max-width: calc(var(--video-fs-vw, 100vw) - 24px) !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  z-index: 10021 !important;
}

html.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls > button,
html.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls > .video-inline-btn,
body.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls > button,
body.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls > .video-inline-btn {
  flex: 0 0 54px !important;
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
}

html.video-app-fullscreen.video-app-fullscreen-mobile-parity .player-bar,
body.video-app-fullscreen.video-app-fullscreen-mobile-parity .player-bar,
html.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls,
body.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls {
  opacity: 0 !important;
  pointer-events: none !important;
}

html.video-app-fullscreen.video-app-fullscreen-mobile-parity.fullscreen-video-ui-visible .player-bar,
body.video-app-fullscreen.video-app-fullscreen-mobile-parity.fullscreen-video-ui-visible .player-bar,
html.video-app-fullscreen.video-app-fullscreen-mobile-parity.fullscreen-video-ui-visible .controls,
body.video-app-fullscreen.video-app-fullscreen-mobile-parity.fullscreen-video-ui-visible .controls {
  opacity: 1 !important;
  pointer-events: auto !important;
}


/* 53.254: mobile/Telegram fullscreen must mirror desktop overlay layout and must not fall back to native video fullscreen chrome. */
@media (max-width: 768px), (pointer: coarse) {
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity {
    background: #000 !important;
    overscroll-behavior: none !important;
    overflow: hidden !important;
  }

  html.video-app-fullscreen.video-app-fullscreen-mobile-parity #appContainer,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity #appContainer,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity #videoPlayerShell,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity #videoPlayerShell,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity .video-player-body,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity .video-player-body {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: var(--video-fs-vw, 100vw) !important;
    height: var(--video-fs-vh, 100dvh) !important;
    min-height: var(--video-fs-vh, 100dvh) !important;
    max-height: var(--video-fs-vh, 100dvh) !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #000 !important;
    overflow: hidden !important;
  }

  html.video-app-fullscreen.video-app-fullscreen-mobile-parity #videoPlayerShell,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity #videoPlayerShell,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity .video-player-body,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity .video-player-body {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  html.video-app-fullscreen.video-app-fullscreen-mobile-parity .video-player,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity .video-player,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity #videoPlayer,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity #videoPlayer {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: block !important;
    width: var(--video-fs-vw, 100vw) !important;
    height: var(--video-fs-vh, 100dvh) !important;
    min-height: var(--video-fs-vh, 100dvh) !important;
    max-height: var(--video-fs-vh, 100dvh) !important;
    max-width: var(--video-fs-vw, 100vw) !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    background: #000 !important;
    z-index: 10010 !important;
  }

  html.video-app-fullscreen.video-app-fullscreen-mobile-parity .player-bar,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity .player-bar,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity.fullscreen-video-ui-visible .player-bar,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity.fullscreen-video-ui-visible .player-bar {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: calc(max(92px, 92px + env(safe-area-inset-bottom, 0px))) !important;
    transform: translateX(-50%) !important;
    width: min(calc(var(--video-fs-vw, 100vw) - 52px), 430px) !important;
    max-width: min(calc(var(--video-fs-vw, 100vw) - 52px), 430px) !important;
    min-width: min(calc(var(--video-fs-vw, 100vw) - 52px), 430px) !important;
    padding: 14px 16px !important;
    gap: 10px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,0.96) !important;
    border: 1px solid rgba(221,221,221,0.98) !important;
    color: #222 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.22) !important;
    z-index: 10020 !important;
  }

  html.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity.fullscreen-video-ui-visible .controls,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity.fullscreen-video-ui-visible .controls {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: max(18px, calc(18px + env(safe-area-inset-bottom, 0px))) !important;
    transform: translateX(-50%) !important;
    display: inline-flex !important;
    width: max-content !important;
    max-width: calc(var(--video-fs-vw, 100vw) - 24px) !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    gap: 14px !important;
    column-gap: 14px !important;
    row-gap: 14px !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    z-index: 10021 !important;
  }

  html.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls > button,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls > .video-inline-btn,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls > .video-inline-select-wrap,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls > button,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls > .video-inline-btn,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls > .video-inline-select-wrap {
    flex: 0 0 54px !important;
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    margin: 0 !important;
  }

  html.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls button,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls button {
    border: 1px solid #ddd !important;
    background: #fff !important;
    color: #222 !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    border-radius: 50% !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.16) !important;
  }

  html.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls button svg,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls button svg {
    width: 28px !important;
    height: 28px !important;
  }

  html.video-app-fullscreen.video-app-fullscreen-mobile-parity .btn-icon,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity .btn-icon {
    font-size: 24px !important;
    color: inherit !important;
  }

  html.video-app-fullscreen.video-app-fullscreen-mobile-parity .player-bar,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity .player-bar,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  html.video-app-fullscreen.video-app-fullscreen-mobile-parity.fullscreen-video-ui-visible .player-bar,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity.fullscreen-video-ui-visible .player-bar,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity.fullscreen-video-ui-visible .controls,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity.fullscreen-video-ui-visible .controls {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  html[data-theme="dark"].video-app-fullscreen.video-app-fullscreen-mobile-parity .player-bar,
  body.dark.video-app-fullscreen.video-app-fullscreen-mobile-parity .player-bar {
    background: rgba(42,44,49,0.96) !important;
    border-color: #3a3c42 !important;
    color: #f1f1f1 !important;
  }

  html[data-theme="dark"].video-app-fullscreen.video-app-fullscreen-mobile-parity .controls button,
  body.dark.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls button {
    background: #2a2c31 !important;
    border-color: #3a3c42 !important;
    color: #f1f1f1 !important;
  }
}


/* 53.255: mobile/Telegram fullscreen must visually match the current desktop fullscreen overlay.
   Neutralize the old mobile-parity card layout even if a cached client still leaves the parity class on nodes. */
@media (max-width: 768px), (pointer: coarse) {
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity #appContainer,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity #appContainer,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity #videoPlayerShell,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity #videoPlayerShell,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity .video-player-body,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity .video-player-body {
    width: 100vw !important;
    height: 100dvh !important;
    height: 100vh !important;
    min-height: 100dvh !important;
    min-height: 100vh !important;
    max-height: none !important;
    display: block !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    background: #000 !important;
  }

  html.video-app-fullscreen.video-app-fullscreen-mobile-parity .video-player,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity .video-player,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity #videoPlayer,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity #videoPlayer {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    height: 100vh !important;
    min-height: 100dvh !important;
    min-height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    max-height: 100vh !important;
    object-fit: contain !important;
    object-position: top center !important;
    margin: 0 auto !important;
    padding: 0 !important;
    transform: none !important;
    background: #000 !important;
  }

  html.video-app-fullscreen.video-app-fullscreen-mobile-parity .player-bar,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity .player-bar,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity.fullscreen-video-ui-visible .player-bar,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity.fullscreen-video-ui-visible .player-bar {
    left: 50% !important;
    right: auto !important;
    bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + 70px) !important;
    transform: translateX(-50%) !important;
    width: var(--fs-controls-row-width, min(92vw, 980px)) !important;
    max-width: var(--fs-controls-row-width, min(92vw, 980px)) !important;
    min-width: 0 !important;
    padding: 10px 12px !important;
    gap: 10px !important;
    border-radius: 8px !important;
    background: inherit !important;
    border: 1px solid currentColor !important;
    box-shadow: none !important;
  }

  html.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity.fullscreen-video-ui-visible .controls,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity.fullscreen-video-ui-visible .controls {
    left: 50% !important;
    right: auto !important;
    bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    padding: 0 !important;
    gap: 12px !important;
    column-gap: 12px !important;
    row-gap: 12px !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls button,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls button {
    background: inherit !important;
    border: 1px solid currentColor !important;
    color: inherit !important;
    box-shadow: none !important;
  }
}

/* 53.256: final mobile/Telegram fullscreen geometry must match the current desktop fullscreen.
   Центрируем само видео в fullscreen, возвращаем desktop-позиции player-bar/controls
   и перебиваем как обычный mobile fullscreen, так и старый mobile-parity card layout. */
@media (max-width: 768px), (pointer: coarse) {
  html.video-app-fullscreen #videoPlayerShell,
  body.video-app-fullscreen #videoPlayerShell,
  html.video-app-fullscreen .video-player-body,
  body.video-app-fullscreen .video-player-body,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity #videoPlayerShell,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity #videoPlayerShell,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity .video-player-body,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity .video-player-body {
    position: fixed !important;
    inset: 0 !important;
    width: var(--video-fs-vw, 100vw) !important;
    height: var(--video-fs-vh, 100dvh) !important;
    min-height: var(--video-fs-vh, 100dvh) !important;
    max-height: var(--video-fs-vh, 100dvh) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #000 !important;
  }

  html.video-app-fullscreen .video-player,
  body.video-app-fullscreen .video-player,
  html.video-app-fullscreen #videoPlayer,
  body.video-app-fullscreen #videoPlayer,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity .video-player,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity .video-player,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity #videoPlayer,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity #videoPlayer {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(var(--video-fs-vh, 100dvh) - 220px - env(safe-area-inset-bottom, 0px)) !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: 0 auto !important;
    padding: 0 !important;
    transform: none !important;
    background: #000 !important;
    z-index: 10010 !important;
  }

  html.video-app-fullscreen .player-bar,
  body.video-app-fullscreen .player-bar,
  html.video-app-fullscreen.fullscreen-video-ui-visible .player-bar,
  body.video-app-fullscreen.fullscreen-video-ui-visible .player-bar,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity .player-bar,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity .player-bar,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity.fullscreen-video-ui-visible .player-bar,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity.fullscreen-video-ui-visible .player-bar {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
    transform: translateX(-50%) !important;
    width: min(92vw, 560px) !important;
    max-width: min(92vw, 560px) !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    gap: 10px !important;
    border-radius: 8px !important;
    z-index: 10020 !important;
  }

  html.video-app-fullscreen .controls,
  body.video-app-fullscreen .controls,
  html.video-app-fullscreen.fullscreen-video-ui-visible .controls,
  body.video-app-fullscreen.fullscreen-video-ui-visible .controls,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity.fullscreen-video-ui-visible .controls,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity.fullscreen-video-ui-visible .controls {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    gap: 12px !important;
    column-gap: 12px !important;
    row-gap: 12px !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    z-index: 10021 !important;
  }

  html.video-app-fullscreen .controls > button,
  body.video-app-fullscreen .controls > button,
  html.video-app-fullscreen .controls > .video-inline-btn,
  body.video-app-fullscreen .controls > .video-inline-btn,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls > button,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls > button,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls > .video-inline-btn,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls > .video-inline-btn {
    flex: 0 0 54px !important;
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    margin: 0 !important;
  }
}


/* 53.257: final mobile fullscreen centering + tight 4-button row.
   Видео в fullscreen на mobile/Telegram держим по центру экрана с небольшим подъёмом,
   а нижний ряд всегда собираем в плотную 4-кнопочную сетку без лишнего промежутка. */
@media (max-width: 768px), (pointer: coarse) {
  html.video-app-fullscreen #videoPlayerShell,
  body.video-app-fullscreen #videoPlayerShell,
  html.video-app-fullscreen .video-player-body,
  body.video-app-fullscreen .video-player-body,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity #videoPlayerShell,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity #videoPlayerShell,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity .video-player-body,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity .video-player-body {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  html.video-app-fullscreen .video-player,
  body.video-app-fullscreen .video-player,
  html.video-app-fullscreen #videoPlayer,
  body.video-app-fullscreen #videoPlayer,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity .video-player,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity .video-player,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity #videoPlayer,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity #videoPlayer {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    inset: auto !important;
    width: var(--video-fs-vw, 100vw) !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: var(--video-fs-vw, 100vw) !important;
    max-height: calc(var(--video-fs-vh, 100dvh) - 168px - env(safe-area-inset-bottom, 0px)) !important;
    transform: translate(-50%, calc(-50% - 18px)) !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #000 !important;
    z-index: 10010 !important;
  }

  html.video-app-fullscreen .player-bar,
  body.video-app-fullscreen .player-bar,
  html.video-app-fullscreen.fullscreen-video-ui-visible .player-bar,
  body.video-app-fullscreen.fullscreen-video-ui-visible .player-bar,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity .player-bar,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity .player-bar,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity.fullscreen-video-ui-visible .player-bar,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity.fullscreen-video-ui-visible .player-bar {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    width: min(calc(var(--video-fs-vw, 100vw) - 34px), 470px) !important;
    max-width: min(calc(var(--video-fs-vw, 100vw) - 34px), 470px) !important;
    min-width: 0 !important;
  }

  html.video-app-fullscreen .controls,
  body.video-app-fullscreen .controls,
  html.video-app-fullscreen.fullscreen-video-ui-visible .controls,
  body.video-app-fullscreen.fullscreen-video-ui-visible .controls,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity.fullscreen-video-ui-visible .controls,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity.fullscreen-video-ui-visible .controls {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    transform: translateX(-50%) !important;
    display: inline-grid !important;
    grid-template-columns: repeat(4, 54px) !important;
    grid-auto-columns: 54px !important;
    width: 252px !important;
    min-width: 252px !important;
    max-width: 252px !important;
    gap: 12px !important;
    column-gap: 12px !important;
    row-gap: 12px !important;
    justify-content: center !important;
    justify-items: center !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 auto !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    z-index: 10021 !important;
  }

  html.video-app-fullscreen .controls > button,
  body.video-app-fullscreen .controls > button,
  html.video-app-fullscreen .controls > .video-inline-btn,
  body.video-app-fullscreen .controls > .video-inline-btn,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls > button,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls > button,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls > .video-inline-btn,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls > .video-inline-btn {
    grid-column: auto !important;
    justify-self: center !important;
    margin: 0 !important;
  }
}


/* 53.258: mobile/Telegram fullscreen hotfix after 53.257 regression.
   Возвращаем устойчивую геометрию fullscreen только для touch/mobile:
   - видео снова остается внутри fullscreen-контейнера, а не уезжает fixed-влево/вверх;
   - центрирование идет по экрану с учетом нижнего UI;
   - нижний ряд из 4 кнопок собирается в ровный компактный блок с одинаковыми промежутками. */
@media (max-width: 768px), (pointer: coarse) {
  html.video-app-fullscreen #videoPlayerShell,
  body.video-app-fullscreen #videoPlayerShell,
  html.video-app-fullscreen .video-player-body,
  body.video-app-fullscreen .video-player-body,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity #videoPlayerShell,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity #videoPlayerShell,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity .video-player-body,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity .video-player-body {
    position: fixed !important;
    inset: 0 !important;
    width: var(--video-fs-vw, 100vw) !important;
    height: var(--video-fs-vh, 100dvh) !important;
    min-height: var(--video-fs-vh, 100dvh) !important;
    max-height: var(--video-fs-vh, 100dvh) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    padding-top: max(0px, env(safe-area-inset-top, 0px)) !important;
    padding-right: 0 !important;
    padding-bottom: calc(168px + env(safe-area-inset-bottom, 0px)) !important;
    padding-left: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #000 !important;
  }

  html.video-app-fullscreen .video-player,
  body.video-app-fullscreen .video-player,
  html.video-app-fullscreen #videoPlayer,
  body.video-app-fullscreen #videoPlayer,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity .video-player,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity .video-player,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity #videoPlayer,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity #videoPlayer {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    display: block !important;
    align-self: center !important;
    justify-self: center !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(var(--video-fs-vh, 100dvh) - 184px - env(safe-area-inset-bottom, 0px) - env(safe-area-inset-top, 0px)) !important;
    margin: auto !important;
    padding: 0 !important;
    transform: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #000 !important;
    z-index: 10010 !important;
  }

  html.video-app-fullscreen .player-bar,
  body.video-app-fullscreen .player-bar,
  html.video-app-fullscreen.fullscreen-video-ui-visible .player-bar,
  body.video-app-fullscreen.fullscreen-video-ui-visible .player-bar,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity .player-bar,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity .player-bar,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity.fullscreen-video-ui-visible .player-bar,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity.fullscreen-video-ui-visible .player-bar {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
    transform: translateX(-50%) !important;
    width: min(calc(var(--video-fs-vw, 100vw) - 24px), 472px) !important;
    max-width: min(calc(var(--video-fs-vw, 100vw) - 24px), 472px) !important;
    min-width: 0 !important;
    margin: 0 !important;
    z-index: 10020 !important;
  }

  html.video-app-fullscreen .controls,
  body.video-app-fullscreen .controls,
  html.video-app-fullscreen.fullscreen-video-ui-visible .controls,
  body.video-app-fullscreen.fullscreen-video-ui-visible .controls,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity.fullscreen-video-ui-visible .controls,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity.fullscreen-video-ui-visible .controls {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    transform: translateX(-50%) !important;
    display: grid !important;
    grid-template-columns: repeat(4, 54px) !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 54px !important;
    width: 252px !important;
    min-width: 252px !important;
    max-width: 252px !important;
    justify-content: center !important;
    justify-items: center !important;
    align-items: center !important;
    gap: 12px !important;
    column-gap: 12px !important;
    row-gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 10021 !important;
  }

  html.video-app-fullscreen .controls > button,
  body.video-app-fullscreen .controls > button,
  html.video-app-fullscreen .controls > .video-inline-btn,
  body.video-app-fullscreen .controls > .video-inline-btn,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls > button,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls > button,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls > .video-inline-btn,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls > .video-inline-btn {
    flex: 0 0 54px !important;
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    margin: 0 !important;
    justify-self: center !important;
  }
}


/* 53.260 mobile fullscreen final parity: center video vertically in portrait,
   keep landscape video stretched from top to bottom bounds, and make the 4 action
   buttons sit in one tight equal-gap row like desktop fullscreen. */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  html.video-app-fullscreen #videoPlayerShell,
  body.video-app-fullscreen #videoPlayerShell,
  html.video-app-fullscreen .video-player-body,
  body.video-app-fullscreen .video-player-body {
    width: var(--video-fs-vw, 100vw) !important;
    height: var(--video-fs-vh, 100vh) !important;
    min-width: var(--video-fs-vw, 100vw) !important;
    min-height: var(--video-fs-vh, 100vh) !important;
  }

  html.video-app-fullscreen .video-player-body,
  body.video-app-fullscreen .video-player-body {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  html.video-app-fullscreen .video-player,
  body.video-app-fullscreen .video-player {
    width: var(--video-fs-vw, 100vw) !important;
    height: var(--video-fs-vh, 100vh) !important;
    min-width: var(--video-fs-vw, 100vw) !important;
    min-height: var(--video-fs-vh, 100vh) !important;
    max-width: var(--video-fs-vw, 100vw) !important;
    max-height: var(--video-fs-vh, 100vh) !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: 0 auto !important;
    align-self: center !important;
  }

  html.video-app-fullscreen .player-bar,
  body.video-app-fullscreen .player-bar {
    width: min(calc(var(--video-fs-vw, 100vw) - 32px), 420px) !important;
    max-width: min(calc(var(--video-fs-vw, 100vw) - 32px), 420px) !important;
    bottom: calc(max(14px, env(safe-area-inset-bottom, 0px)) + 70px) !important;
  }

  html.video-app-fullscreen .controls,
  body.video-app-fullscreen .controls,
  html.video-app-fullscreen.fullscreen-video-ui-visible .controls,
  body.video-app-fullscreen.fullscreen-video-ui-visible .controls {
    display: grid !important;
    grid-template-columns: repeat(4, 54px) !important;
    justify-content: center !important;
    align-items: center !important;
    width: 252px !important;
    max-width: 252px !important;
    min-width: 252px !important;
    gap: 12px !important;
    column-gap: 12px !important;
    row-gap: 12px !important;
    bottom: max(14px, env(safe-area-inset-bottom, 0px)) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  html.video-app-fullscreen .controls > button,
  body.video-app-fullscreen .controls > button,
  html.video-app-fullscreen .controls > .video-inline-btn,
  body.video-app-fullscreen .controls > .video-inline-btn,
  html.video-app-fullscreen .controls > .video-inline-select-wrap,
  body.video-app-fullscreen .controls > .video-inline-select-wrap {
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    margin: 0 !important;
    justify-self: center !important;
    align-self: center !important;
  }
}

@media (orientation: landscape) and (max-width: 900px),
       (orientation: landscape) and (hover: none) and (pointer: coarse) {
  html.video-app-fullscreen .video-player-body,
  body.video-app-fullscreen .video-player-body {
    align-items: center !important;
    justify-content: center !important;
  }

  html.video-app-fullscreen .video-player,
  body.video-app-fullscreen .video-player {
    width: var(--video-fs-vw, 100vw) !important;
    height: var(--video-fs-vh, 100vh) !important;
    max-width: var(--video-fs-vw, 100vw) !important;
    max-height: var(--video-fs-vh, 100vh) !important;
    object-fit: contain !important;
    object-position: center center !important;
  }
}


/* 53.262: mobile fullscreen bottom row gap hotfix.
   На touch/mobile fullscreen принудительно собираем только 4 видимые video-кнопки
   в один компактный flex-ряд с одинаковым промежутком, чтобы не оставалось большой
   дыры между второй и третьей кнопкой. */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  html.video-app-fullscreen .controls,
  body.video-app-fullscreen .controls,
  html.video-app-fullscreen.fullscreen-video-ui-visible .controls,
  body.video-app-fullscreen.fullscreen-video-ui-visible .controls,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity.fullscreen-video-ui-visible .controls,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity.fullscreen-video-ui-visible .controls {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    transform: translateX(-50%) !important;
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    width: calc((54px * 4) + (10px * 3)) !important;
    min-width: calc((54px * 4) + (10px * 3)) !important;
    max-width: calc((54px * 4) + (10px * 3)) !important;
    gap: 10px !important;
    column-gap: 10px !important;
    row-gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    z-index: 10021 !important;
  }

  html.video-app-fullscreen #repeatBtn,
  body.video-app-fullscreen #repeatBtn,
  html.video-app-fullscreen #videoInlineQualityWrap,
  body.video-app-fullscreen #videoInlineQualityWrap,
  html.video-app-fullscreen #videoInlineAudioTrackWrap,
  body.video-app-fullscreen #videoInlineAudioTrackWrap,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity #repeatBtn,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity #repeatBtn,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity #videoInlineQualityWrap,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity #videoInlineQualityWrap,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity #videoInlineAudioTrackWrap,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity #videoInlineAudioTrackWrap {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }

  html.video-app-fullscreen .controls > button,
  body.video-app-fullscreen .controls > button,
  html.video-app-fullscreen .controls > .video-inline-btn,
  body.video-app-fullscreen .controls > .video-inline-btn,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls > button,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls > button,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls > .video-inline-btn,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls > .video-inline-btn {
    flex: 0 0 54px !important;
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    margin: 0 !important;
  }

  html.video-app-fullscreen #prevBtn,
  body.video-app-fullscreen #prevBtn,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity #prevBtn,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity #prevBtn {
    order: 1 !important;
  }

  html.video-app-fullscreen #nextBtn,
  body.video-app-fullscreen #nextBtn,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity #nextBtn,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity #nextBtn {
    order: 2 !important;
  }

  html.video-app-fullscreen #videoInlineFullscreenBtn,
  body.video-app-fullscreen #videoInlineFullscreenBtn,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity #videoInlineFullscreenBtn,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity #videoInlineFullscreenBtn {
    order: 3 !important;
    margin-left: 0 !important;
  }

  html.video-app-fullscreen #videoCloseBtn,
  body.video-app-fullscreen #videoCloseBtn,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity #videoCloseBtn,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity #videoCloseBtn {
    order: 4 !important;
    margin-left: 0 !important;
  }
}


/* 53.264: mobile/Telegram real fullscreen rotation geometry.
   Portrait keeps the video visually centered with the bottom UI overlaid.
   Landscape makes the video span the full screen height (top-to-bottom) while
   the player bar and round buttons stay over the video as overlay controls. */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  html.video-app-fullscreen #videoPlayerShell,
  body.video-app-fullscreen #videoPlayerShell,
  html.video-app-fullscreen .video-player-body,
  body.video-app-fullscreen .video-player-body,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity #videoPlayerShell,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity #videoPlayerShell,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity .video-player-body,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity .video-player-body {
    position: fixed !important;
    inset: 0 !important;
    width: var(--video-fs-vw, 100vw) !important;
    height: var(--video-fs-vh, 100vh) !important;
    min-width: var(--video-fs-vw, 100vw) !important;
    min-height: var(--video-fs-vh, 100vh) !important;
    max-width: var(--video-fs-vw, 100vw) !important;
    max-height: var(--video-fs-vh, 100vh) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    background: #000 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  html.video-app-fullscreen .video-player,
  body.video-app-fullscreen .video-player,
  html.video-app-fullscreen #videoPlayer,
  body.video-app-fullscreen #videoPlayer,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity .video-player,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity .video-player,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity #videoPlayer,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity #videoPlayer {
    position: absolute !important;
    inset: 0 !important;
    margin: auto !important;
    display: block !important;
    background: #000 !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    z-index: 10010 !important;
  }

  html.video-app-fullscreen .player-bar,
  body.video-app-fullscreen .player-bar,
  html.video-app-fullscreen.fullscreen-video-ui-visible .player-bar,
  body.video-app-fullscreen.fullscreen-video-ui-visible .player-bar,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity .player-bar,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity .player-bar,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity.fullscreen-video-ui-visible .player-bar,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity.fullscreen-video-ui-visible .player-bar {
    z-index: 10020 !important;
  }

  html.video-app-fullscreen .controls,
  body.video-app-fullscreen .controls,
  html.video-app-fullscreen.fullscreen-video-ui-visible .controls,
  body.video-app-fullscreen.fullscreen-video-ui-visible .controls,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity.fullscreen-video-ui-visible .controls,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity.fullscreen-video-ui-visible .controls {
    z-index: 10021 !important;
  }
}

@media (orientation: portrait) and (max-width: 900px),
       (orientation: portrait) and (hover: none) and (pointer: coarse) {
  html.video-app-fullscreen #videoPlayerShell,
  body.video-app-fullscreen #videoPlayerShell,
  html.video-app-fullscreen .video-player-body,
  body.video-app-fullscreen .video-player-body,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity #videoPlayerShell,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity #videoPlayerShell,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity .video-player-body,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity .video-player-body {
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-right: 0 !important;
    padding-bottom: calc(154px + env(safe-area-inset-bottom, 0px)) !important;
    padding-left: 0 !important;
  }

  html.video-app-fullscreen .video-player,
  body.video-app-fullscreen .video-player,
  html.video-app-fullscreen #videoPlayer,
  body.video-app-fullscreen #videoPlayer,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity .video-player,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity .video-player,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity #videoPlayer,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity #videoPlayer {
    width: var(--video-fs-vw, 100vw) !important;
    max-width: var(--video-fs-vw, 100vw) !important;
    height: auto !important;
    max-height: calc(var(--video-fs-vh, 100vh) - 154px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (orientation: landscape) and (max-width: 900px),
       (orientation: landscape) and (hover: none) and (pointer: coarse) {
  html.video-app-fullscreen #videoPlayerShell,
  body.video-app-fullscreen #videoPlayerShell,
  html.video-app-fullscreen .video-player-body,
  body.video-app-fullscreen .video-player-body,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity #videoPlayerShell,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity #videoPlayerShell,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity .video-player-body,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity .video-player-body {
    padding: 0 !important;
  }

  html.video-app-fullscreen .video-player,
  body.video-app-fullscreen .video-player,
  html.video-app-fullscreen #videoPlayer,
  body.video-app-fullscreen #videoPlayer,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity .video-player,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity .video-player,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity #videoPlayer,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity #videoPlayer {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: var(--video-fs-vh, 100vh) !important;
    min-height: var(--video-fs-vh, 100vh) !important;
    max-height: var(--video-fs-vh, 100vh) !important;
  }

  html.video-app-fullscreen .player-bar,
  body.video-app-fullscreen .player-bar,
  html.video-app-fullscreen.fullscreen-video-ui-visible .player-bar,
  body.video-app-fullscreen.fullscreen-video-ui-visible .player-bar,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity .player-bar,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity .player-bar,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity.fullscreen-video-ui-visible .player-bar,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity.fullscreen-video-ui-visible .player-bar {
    width: min(calc(var(--video-fs-vw, 100vw) - 28px), 520px) !important;
    max-width: min(calc(var(--video-fs-vw, 100vw) - 28px), 520px) !important;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html.video-app-fullscreen .controls,
  body.video-app-fullscreen .controls,
  html.video-app-fullscreen.fullscreen-video-ui-visible .controls,
  body.video-app-fullscreen.fullscreen-video-ui-visible .controls,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity .controls,
  html.video-app-fullscreen.video-app-fullscreen-mobile-parity.fullscreen-video-ui-visible .controls,
  body.video-app-fullscreen.video-app-fullscreen-mobile-parity.fullscreen-video-ui-visible .controls {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }
}


/* 53.290: fullscreen video stays centered in all clients while using the real fullscreen viewport size. */
html.video-app-fullscreen #videoPlayerShell,
body.video-app-fullscreen #videoPlayerShell,
html.video-app-fullscreen .video-player-body,
body.video-app-fullscreen .video-player-body{
  width: var(--video-fs-vw, 100vw) !important;
  height: var(--video-fs-vh, 100dvh) !important;
  min-height: var(--video-fs-vh, 100dvh) !important;
  max-height: var(--video-fs-vh, 100dvh) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #000 !important;
}

html.video-app-fullscreen .video-player,
body.video-app-fullscreen .video-player{
  width: var(--video-fs-vw, 100vw) !important;
  height: var(--video-fs-vh, 100dvh) !important;
  min-height: var(--video-fs-vh, 100dvh) !important;
  max-width: var(--video-fs-vw, 100vw) !important;
  max-height: var(--video-fs-vh, 100dvh) !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: 0 auto !important;
  background: #000 !important;
}