/*
ФАЙЛ: mobile-browsers-light-to-dark.css
  Назначение: круговая анимация смены LIGHT <-> DARK для обычных MOBILE-браузеров.
  Область: мобильные браузеры вне Telegram.
  Эффект повторяет BAGID/референс-видео: круг раскрывается/схлопывается из кнопки темы.
*/

html.jukebox-theme-env-mobile-browser.jukebox-theme-animating,
html.jukebox-theme-env-mobile-browser.jukebox-theme-animating body{
  overflow-anchor: none !important;
}

html.jukebox-theme-env-mobile-browser .jukebox-theme-transition-overlay{
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483646 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  background: transparent !important;
  transition: clip-path 0.72s cubic-bezier(0.22, 1, 0.36, 1),
              -webkit-clip-path 0.72s cubic-bezier(0.22, 1, 0.36, 1) !important;
  will-change: clip-path !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

html.jukebox-theme-env-mobile-browser .jukebox-theme-transition-stage{
  position: fixed !important;
  inset: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

html.jukebox-theme-env-mobile-browser .jukebox-theme-transition-clone,
html.jukebox-theme-env-mobile-browser .jukebox-theme-transition-clone *{
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  transition: none !important;
  animation: none !important;
  caret-color: transparent !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

/*
  Реальная страница переключается под полностью закрывающим её snapshot-кругом.
  На этот короткий момент запрещаем обычные CSS-transition интерфейса, но НЕ трогаем
  transition самого кругового overlay.
*/
html.jukebox-theme-env-mobile-browser.jukebox-theme-committing body,
html.jukebox-theme-env-mobile-browser.jukebox-theme-committing #appContainer,
html.jukebox-theme-env-mobile-browser.jukebox-theme-committing #appContainer *,
html.jukebox-theme-env-mobile-browser.jukebox-theme-snapshot #appContainer,
html.jukebox-theme-env-mobile-browser.jukebox-theme-snapshot #appContainer *{
  transition: none !important;
  animation: none !important;
}

/*
  v17 THEME STABILITY FIX
  Общие исправления круговой смены темы для этого режима:
  - мгновенная визуальная реакция кнопки LIGHT/DARK до построения snapshot;
  - постоянный тёмно-серый BAGID placeholder без мигания;
  - стабильные snapshot-дорожки seek/volume без исчезновения и прыжков;
  - фиксированный серый незаполненный volume track в обеих темах.
*/
html.jukebox-theme-env-mobile-browser #themeToggle.jukebox-theme-press-to-dark{
  background: #2a2c31 !important;
  background-color: #2a2c31 !important;
  border-color: #3a3c42 !important;
  color: #f1f1f1 !important;
  transition: none !important;
}

html.jukebox-theme-env-mobile-browser #themeToggle.jukebox-theme-press-to-dark .moon-icon{
  opacity: 0 !important;
}

html.jukebox-theme-env-mobile-browser #themeToggle.jukebox-theme-press-to-dark .sun-icon{
  opacity: 1 !important;
  fill: #ff8c00 !important;
  color: #ff8c00 !important;
}

html.jukebox-theme-env-mobile-browser #themeToggle.jukebox-theme-press-to-light{
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: #ccc !important;
  color: #000000 !important;
  transition: none !important;
}

html.jukebox-theme-env-mobile-browser #themeToggle.jukebox-theme-press-to-light .moon-icon{
  opacity: 1 !important;
  fill: #000000 !important;
  color: #000000 !important;
}

html.jukebox-theme-env-mobile-browser #themeToggle.jukebox-theme-press-to-light .sun-icon{
  opacity: 0 !important;
}

html.jukebox-theme-env-mobile-browser #themeToggle.jukebox-theme-press-to-dark .theme-icon-layer,
html.jukebox-theme-env-mobile-browser #themeToggle.jukebox-theme-press-to-light .theme-icon-layer{
  transition: none !important;
  animation: none !important;
}

html.jukebox-theme-env-mobile-browser #bagSearchInput::placeholder,
html.jukebox-theme-env-mobile-browser .bag-search-input::placeholder{
  color: #7d8593 !important;
  opacity: 1 !important;
  transition: none !important;
}

html.jukebox-theme-env-mobile-browser .jukebox-theme-fake-placeholder{
  color: #7d8593 !important;
  -webkit-text-fill-color: #7d8593 !important;
  opacity: 1 !important;
}

html.jukebox-theme-env-mobile-browser .jukebox-theme-range-snapshot{
  position: relative !important;
  overflow: visible !important;
  background: transparent !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
  transition: none !important;
  animation: none !important;
}

html.jukebox-theme-env-mobile-browser .jukebox-theme-range-track{
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 50% !important;
  height: 6px !important;
  border: 0 !important;
  border-radius: 999px !important;
  transform: translateY(-50%) !important;
  -webkit-transform: translateY(-50%) !important;
  transition: none !important;
  animation: none !important;
  pointer-events: none !important;
}

html.jukebox-theme-env-mobile-browser .jukebox-theme-range-thumb{
  position: absolute !important;
  top: 50% !important;
  width: 16px !important;
  height: 16px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #ff8c00 !important;
  box-shadow: none !important;
  transform: translate(-50%, -50%) !important;
  -webkit-transform: translate(-50%, -50%) !important;
  transition: none !important;
  animation: none !important;
  pointer-events: none !important;
}

html.jukebox-theme-env-mobile-browser:not([data-theme="dark"]) .volume-bar::-webkit-slider-runnable-track{
  background: rgba(0,0,0,0.18) !important;
}

html.jukebox-theme-env-mobile-browser[data-theme="dark"] .volume-bar::-webkit-slider-runnable-track{
  background: rgba(255,255,255,0.22) !important;
}

html.jukebox-theme-env-mobile-browser:not([data-theme="dark"]) .volume-bar::-moz-range-track{
  background: rgba(0,0,0,0.18) !important;
}

html.jukebox-theme-env-mobile-browser[data-theme="dark"] .volume-bar::-moz-range-track{
  background: rgba(255,255,255,0.22) !important;
}

/* v18 NATIVE VIEW TRANSITION STABILITY */
/*
  Browser-native theme snapshots are used when supported.
  They preserve the exact rendered pixels of native range controls, SVG icons and
  BAGID input text, so mobile Telegram/WebView does not rebuild those controls
  with different geometry/brightness during the circular wipe.
*/

@keyframes jukebox-theme-vt-expand-v18 {
  from {
    clip-path: circle(0px at var(--jukebox-theme-vt-x) var(--jukebox-theme-vt-y));
    -webkit-clip-path: circle(0px at var(--jukebox-theme-vt-x) var(--jukebox-theme-vt-y));
  }
  to {
    clip-path: circle(var(--jukebox-theme-vt-radius) at var(--jukebox-theme-vt-x) var(--jukebox-theme-vt-y));
    -webkit-clip-path: circle(var(--jukebox-theme-vt-radius) at var(--jukebox-theme-vt-x) var(--jukebox-theme-vt-y));
  }
}

@keyframes jukebox-theme-vt-collapse-v18 {
  from {
    clip-path: circle(var(--jukebox-theme-vt-radius) at var(--jukebox-theme-vt-x) var(--jukebox-theme-vt-y));
    -webkit-clip-path: circle(var(--jukebox-theme-vt-radius) at var(--jukebox-theme-vt-x) var(--jukebox-theme-vt-y));
  }
  to {
    clip-path: circle(0px at var(--jukebox-theme-vt-x) var(--jukebox-theme-vt-y));
    -webkit-clip-path: circle(0px at var(--jukebox-theme-vt-x) var(--jukebox-theme-vt-y));
  }
}

html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt::view-transition-group(root),
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt::view-transition-image-pair(root),
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt::view-transition-old(root),
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt::view-transition-new(root){
  animation: none !important;
  mix-blend-mode: normal !important;
  isolation: auto !important;
}

html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt-to-dark::view-transition-old(root){
  z-index: 1 !important;
}
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt-to-dark::view-transition-new(root){
  z-index: 2 !important;
  animation: jukebox-theme-vt-expand-v18 680ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt-to-light::view-transition-new(root){
  z-index: 1 !important;
}
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt-to-light::view-transition-old(root){
  z-index: 2 !important;
  animation: jukebox-theme-vt-collapse-v18 680ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

/* No intermediate interpolation/brightness/size changes on controls while theme snapshot is captured. */
html.jukebox-theme-env-mobile-browser.jukebox-theme-animating #bagSearchInput,
html.jukebox-theme-env-mobile-browser.jukebox-theme-animating .bag-search-input{
  transition: none !important;
  animation: none !important;
  font-size: 14px !important;
  font-family: Arial, sans-serif !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  filter: none !important;
  box-shadow: none !important;
}

html.jukebox-theme-env-mobile-browser.jukebox-theme-animating #bagSearchInput::placeholder,
html.jukebox-theme-env-mobile-browser.jukebox-theme-animating .bag-search-input::placeholder{
  color: #7d8593 !important;
  -webkit-text-fill-color: #7d8593 !important;
  opacity: 1 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  transition: none !important;
  animation: none !important;
}

html.jukebox-theme-env-mobile-browser #seekBar,
html.jukebox-theme-env-mobile-browser #volumeBar,
html.jukebox-theme-env-mobile-browser .seek-bar,
html.jukebox-theme-env-mobile-browser .volume-bar{
  transition: none !important;
  animation: none !important;
  filter: none !important;
  box-shadow: none !important;
}

html.jukebox-theme-env-mobile-browser:not([data-theme="dark"]) .seek-bar{
  --seek-track-idle: rgba(0,0,0,0.18) !important;
  --seek-track-buffered: rgba(255,0,0,0.90) !important;
  --seek-track-played: #ff8c00 !important;
}
html.jukebox-theme-env-mobile-browser[data-theme="dark"] .seek-bar{
  --seek-track-idle: rgba(255,255,255,0.22) !important;
  --seek-track-buffered: rgba(255,0,0,0.68) !important;
  --seek-track-played: #ff8c00 !important;
}

html.jukebox-theme-env-mobile-browser:not([data-theme="dark"]) .volume-bar::-webkit-slider-runnable-track{
  background: rgba(0,0,0,0.18) !important;
}
html.jukebox-theme-env-mobile-browser[data-theme="dark"] .volume-bar::-webkit-slider-runnable-track{
  background: rgba(255,255,255,0.22) !important;
}
html.jukebox-theme-env-mobile-browser:not([data-theme="dark"]) .volume-bar::-moz-range-track{
  background: rgba(0,0,0,0.18) !important;
}
html.jukebox-theme-env-mobile-browser[data-theme="dark"] .volume-bar::-moz-range-track{
  background: rgba(255,255,255,0.22) !important;
}

/* Keep button geometry fixed while the theme circle is running. Icon-specific Desktop MiniApp 120% scale remains untouched. */
html.jukebox-theme-env-mobile-browser.jukebox-theme-animating #muteBtn,
html.jukebox-theme-env-mobile-browser.jukebox-theme-animating #playPauseBtn{
  transition: none !important;
  animation: none !important;
  translate: none !important;
}



/* v19 THEME CIRCLE PRECISION + STABLE BUTTON/TEXT */
/*
  - theme button has no pressed/scale-down effect; target icon/theme appears immediately;
  - BAGID field keeps its real 10px typography during the transition (no temporary enlargement);
  - native View Transition root circle is animated from JS/WAAPI for exact button-centred coordinates;
  - the theme button is a separate View Transition layer so the old icon cannot flash back;
  - CSS keyframes remain only as fallback for older Chromium.
*/
html.jukebox-theme-env-mobile-browser #themeToggle:active{
  transform: none !important;
  -webkit-transform: none !important;
}

html.jukebox-theme-env-mobile-browser.jukebox-theme-animating #themeToggle,
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt #themeToggle{
  transition: none !important;
  animation: none !important;
}

html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt #themeToggle{
  view-transition-name: jukebox-theme-toggle;
}

html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt::view-transition-group(jukebox-theme-toggle),
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt::view-transition-image-pair(jukebox-theme-toggle),
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt::view-transition-old(jukebox-theme-toggle),
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt::view-transition-new(jukebox-theme-toggle){
  animation: none !important;
  mix-blend-mode: normal !important;
}

html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt::view-transition-group(jukebox-theme-toggle){
  z-index: 2147483647 !important;
}

html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt::view-transition-old(jukebox-theme-toggle){
  opacity: 0 !important;
}

html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt::view-transition-new(jukebox-theme-toggle){
  opacity: 1 !important;
}

/* JS animates the root pseudo-element directly. Disable the old CSS keyframe while WAAPI is active. */
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-waapi::view-transition-old(root),
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-waapi::view-transition-new(root){
  animation: none !important;
}

/* Keep BAGID text/placeholder at the exact live size; v18's temporary 14px rule caused the visible zoom. */
html.jukebox-theme-env-mobile-browser.jukebox-theme-animating #bagSearchInput,
html.jukebox-theme-env-mobile-browser.jukebox-theme-animating .bag-search-input{
  font-size: 10px !important;
  line-height: 1.05 !important;
  font-family: Arial, sans-serif !important;
  font-weight: 800 !important;
  transform: none !important;
  -webkit-transform: none !important;
}

html.jukebox-theme-env-mobile-browser.jukebox-theme-animating #bagSearchInput::placeholder,
html.jukebox-theme-env-mobile-browser.jukebox-theme-animating .bag-search-input::placeholder{
  color: #7d8593 !important;
  -webkit-text-fill-color: #7d8593 !important;
  opacity: 1 !important;
  font-size: 10px !important;
  line-height: 1.05 !important;
  font-weight: 700 !important;
  transition: none !important;
  animation: none !important;
}

/* Manual fallback (Telegram WebView / older engines): same timing as the JS engine. */
html.jukebox-theme-env-mobile-browser .jukebox-theme-transition-overlay{
  transition: clip-path 620ms cubic-bezier(0.4, 0, 0.2, 1),
              -webkit-clip-path 620ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

html.jukebox-theme-env-mobile-browser .jukebox-theme-button-proxy{
  transform: none !important;
  -webkit-transform: none !important;
  transition: none !important;
  animation: none !important;
}

/* v19 fallback timing + global no-press geometry */
#themeToggle.theme-btn:active{
  transform: none !important;
  -webkit-transform: none !important;
}

html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt-to-dark:not(.jukebox-theme-native-waapi)::view-transition-new(root),
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt-to-light:not(.jukebox-theme-native-waapi)::view-transition-old(root){
  animation-duration: 620ms !important;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}


/* v20 THEME ORIGIN + GEOMETRY STABILITY
   - theme circle always reveals the NEW theme outward from the real theme-button centre;
   - theme button is no longer a separate View-Transition layer, so it cannot shift horizontally;
   - BAGID field keeps its actual 12px geometry during snapshot capture;
   - DARK -> LIGHT uses the same outward reveal, so the page does not switch early under a collapsing mask.
*/
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt #themeToggle{
  view-transition-name: none !important;
  transform: none !important;
  -webkit-transform: none !important;
  translate: none !important;
}

html.jukebox-theme-env-mobile-browser.jukebox-theme-animating #bagSearchInput,
html.jukebox-theme-env-mobile-browser.jukebox-theme-animating .bag-search-input{
  font-size: 12px !important;
  line-height: 1.08 !important;
  font-family: Arial, sans-serif !important;
  font-weight: 800 !important;
  transform: none !important;
  -webkit-transform: none !important;
  transition: none !important;
  animation: none !important;
}

html.jukebox-theme-env-mobile-browser.jukebox-theme-animating #bagSearchInput::placeholder,
html.jukebox-theme-env-mobile-browser.jukebox-theme-animating .bag-search-input::placeholder{
  color: #7d8593 !important;
  -webkit-text-fill-color: #7d8593 !important;
  opacity: 1 !important;
  font-size: 12px !important;
  line-height: 1.08 !important;
  font-weight: 700 !important;
  transition: none !important;
  animation: none !important;
}

html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt-to-light::view-transition-old(root){
  z-index: 1 !important;
  animation: none !important;
}
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt-to-light::view-transition-new(root){
  z-index: 2 !important;
}
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt-to-light:not(.jukebox-theme-native-waapi)::view-transition-new(root){
  animation: jukebox-theme-vt-expand-v18 620ms cubic-bezier(0.4, 0, 0.2, 1) both !important;
}

/* v22.1 LANGUAGE BUTTON BORDER FIX
   Do not force the DARK border into LIGHT theme.
   LIGHT matches the PLAY button (#ccc); DARK keeps #3a3c42.
   No border-color animation is allowed while the circular theme transition runs.
*/
html.jukebox-theme-env-mobile-browser[data-theme="light"] #langToggle,
html.jukebox-theme-env-mobile-browser[data-theme="light"].jukebox-theme-animating #langToggle{
  border-color: #ccc !important;
  transition-property: transform !important;
}

html.jukebox-theme-env-mobile-browser[data-theme="dark"] #langToggle,
html.jukebox-theme-env-mobile-browser[data-theme="dark"].jukebox-theme-animating #langToggle{
  border-color: #3a3c42 !important;
  transition-property: transform !important;
}

html.jukebox-theme-env-mobile-browser .jukebox-theme-transition-clone #langToggle{
  transition: none !important;
}

/* v22.2 THEME BUTTON BORDER STABILITY */
/*
  The theme button must never pass through a lighter temporary border.
  LIGHT endpoint = #ccc (same as the normal light button border).
  DARK endpoint = #3a3c42.
  Press state wins immediately over the source theme while the circular reveal is prepared.
*/
html.jukebox-theme-env-mobile-browser #themeToggle{
  transition-property: transform !important;
}

html.jukebox-theme-env-mobile-browser[data-theme="light"] #themeToggle{
  border-color: #ccc !important;
}

html.jukebox-theme-env-mobile-browser[data-theme="dark"] #themeToggle{
  border-color: #3a3c42 !important;
}

html.jukebox-theme-env-mobile-browser #themeToggle.jukebox-theme-press-to-light{
  border-color: #ccc !important;
  transition: none !important;
}

html.jukebox-theme-env-mobile-browser #themeToggle.jukebox-theme-press-to-dark{
  border-color: #3a3c42 !important;
  transition: none !important;
}

html.jukebox-theme-env-mobile-browser .jukebox-theme-transition-clone #themeToggle{
  transition: none !important;
}

/* v22.3 DIRECTIONAL THEME ANIMATION */
/*
  This browser-family stylesheet owns the direction of its theme circle:
  LIGHT -> DARK = NEW dark theme expands from the theme button.
  DARK -> LIGHT = OLD dark theme collapses back into the theme button,
  revealing the already-rendered light theme underneath.
*/
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt-to-dark::view-transition-old(root){
  z-index: 1 !important;
  animation: none !important;
}

html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt-to-dark::view-transition-new(root){
  z-index: 2 !important;
}

html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt-to-dark:not(.jukebox-theme-native-waapi)::view-transition-new(root){
  animation: jukebox-theme-vt-expand-v18 620ms cubic-bezier(0.4, 0, 0.2, 1) both !important;
}

html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt-to-light::view-transition-new(root){
  z-index: 1 !important;
  animation: none !important;
}

html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt-to-light::view-transition-old(root){
  z-index: 2 !important;
}

html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt-to-light:not(.jukebox-theme-native-waapi)::view-transition-old(root){
  animation: jukebox-theme-vt-collapse-v18 620ms cubic-bezier(0.4, 0, 0.2, 1) both !important;
}

/* v22.4 MOBILE VIEW-TRANSITION STABILITY
   LIGHT -> DARK: the new dark snapshot expands from the final live theme-button centre.
   DARK -> LIGHT: the old dark snapshot collapses into that same button.
   Native pseudo-element WAAPI is intentionally not used on mobile: CSS owns the full
   snapshot lifetime, preventing the live target theme from appearing before the circle ends.
*/
html.jukebox-theme-env-mobile-browser{
  --jukebox-theme-animation-ms: 720;
}

@keyframes jukebox-theme-hold-mobile-v224{
  from{ opacity: 1; }
  to{ opacity: 1; }
}

html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt::view-transition-group(root){
  z-index: 2147483646 !important;
}

html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt::view-transition-image-pair(root){
  isolation: isolate !important;
}

html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt::view-transition-old(root),
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt::view-transition-new(root){
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  will-change: clip-path !important;
}

/* No animation may start before JS writes the final mobile Snapshot-Containing-Block origin. */
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-preparing::view-transition-old(root),
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-preparing::view-transition-new(root){
  animation: none !important;
}

/* Keep the View-Transition pseudo tree alive even during the ready/origin preparation frame. */
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt:not(.jukebox-theme-native-waapi)::view-transition-group(root){
  animation: jukebox-theme-hold-mobile-v224 720ms linear both !important;
}

html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt-to-dark:not(.jukebox-theme-native-preparing):not(.jukebox-theme-native-waapi)::view-transition-old(root){
  z-index: 1 !important;
  animation: none !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}

html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt-to-dark:not(.jukebox-theme-native-preparing):not(.jukebox-theme-native-waapi)::view-transition-new(root){
  z-index: 2 !important;
  animation: jukebox-theme-vt-expand-v18 720ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt-to-light:not(.jukebox-theme-native-preparing):not(.jukebox-theme-native-waapi)::view-transition-new(root){
  z-index: 1 !important;
  animation: none !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}

html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt-to-light:not(.jukebox-theme-native-preparing):not(.jukebox-theme-native-waapi)::view-transition-old(root){
  z-index: 2 !important;
  animation: jukebox-theme-vt-collapse-v18 720ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

/* v22.5 MOBILE DOM-SNAPSHOT STABILITY
   Ordinary mobile browsers no longer use native root View Transition pseudos.
   The real page stays in the source theme while a pixel-stable DOM snapshot expands/collapses
   from the live theme-button centre. The overlay itself is animated by JS/WAAPI, therefore CSS
   transitions are disabled here to avoid a second competing animation and mobile jerks.
*/
html.jukebox-theme-env-mobile-browser.jukebox-theme-dom-fallback .jukebox-theme-transition-overlay{
  transition: none !important;
  -webkit-transition: none !important;
  will-change: clip-path !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  contain: paint !important;
}

html.jukebox-theme-env-mobile-browser.jukebox-theme-dom-fallback .jukebox-theme-transition-stage{
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

/* v22.10 MOBILE RESTORE — verified v21 native pixel-snapshot engine
   JS owns the circular clip on ::view-transition-new/old(root) via WAAPI.
   No DOM clone or extra group animation is used when native View Transitions exist,
   so seek/volume, PLAY/MUTE and all player geometry remain the browser's exact pixels.
   LIGHT -> DARK expands; DARK -> LIGHT collapses back into the theme button.
*/
html.jukebox-theme-env-mobile-browser{
  --jukebox-theme-animation-ms: 620;
}

html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt.jukebox-theme-native-waapi::view-transition-image-pair(root){
  isolation: isolate !important;
}
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt.jukebox-theme-native-waapi::view-transition-old(root),
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt.jukebox-theme-native-waapi::view-transition-new(root){
  animation: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}



/* v22.19 MOBILE FIRST-PAINT STABILITY
   WAAPI owns the circle. Do not pre-clip it with stale CSS coordinates. During the
   LIGHT -> DARK preparation microtask the target snapshot is only hidden; JS attaches
   the final-origin circle first, then reveals the target snapshot in the same turn. */
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt.jukebox-theme-native-waapi::view-transition-group(root),
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt.jukebox-theme-native-waapi::view-transition-image-pair(root),
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt.jukebox-theme-native-waapi::view-transition-old(root),
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt.jukebox-theme-native-waapi::view-transition-new(root){
  animation: none !important;
  mix-blend-mode: normal !important;
}
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt-to-dark::view-transition-old(root){ z-index:1 !important; opacity:1 !important; }
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt-to-dark::view-transition-new(root){ z-index:2 !important; opacity:1 !important; }
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt-to-light::view-transition-new(root){ z-index:1 !important; opacity:1 !important; }
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt-to-light::view-transition-old(root){ z-index:2 !important; opacity:1 !important; }
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-preparing.jukebox-theme-native-vt-to-dark::view-transition-new(root){
  opacity:0 !important;
}

/* v22.20 MOBILE GENERATED-SNAPSHOT ORIGIN
   The circular mask is owned by JS/WAAPI. Its origin is read from the browser-generated
   jukebox-theme-toggle View Transition group after transition.ready, so browser toolbar /
   visualViewport settling cannot move the first real circle away from the button. */
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt.jukebox-theme-native-waapi::view-transition-group(root),
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt.jukebox-theme-native-waapi::view-transition-image-pair(root),
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt.jukebox-theme-native-waapi::view-transition-old(root),
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt.jukebox-theme-native-waapi::view-transition-new(root){
  animation: none !important;
  mix-blend-mode: normal !important;
}


/* v22.21 ORDINARY MOBILE — GENERATED BUTTON ORIGIN + OPAQUE ROOT SNAPSHOTS
   A later v20 compatibility rule disabled view-transition-name on the theme button, so v22.20
   could not actually read the generated button group in ordinary mobile browsers and fell back
   to browser-chrome offset guesses. Re-enable the named group only for this environment. */
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt #themeToggle{
  view-transition-name: jukebox-theme-toggle !important;
}
html.jukebox-theme-env-mobile-browser[data-theme="light"]{
  background-color: #f4f6f9 !important;
}
html.jukebox-theme-env-mobile-browser[data-theme="dark"]{
  background-color: #1e1f23 !important;
}
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt-to-dark::view-transition-old(root){
  background-color: #f4f6f9 !important;
}
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt-to-dark::view-transition-new(root){
  background-color: #1e1f23 !important;
}
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt-to-light::view-transition-old(root){
  background-color: #1e1f23 !important;
}
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt-to-light::view-transition-new(root){
  background-color: #f4f6f9 !important;
}


/* v22.22 ORDINARY MOBILE — ROOT-MATRIX ORIGIN + SOURCE HOLD
   The first real switches must not depend on a cold named theme-button VT group.
   JS maps the captured pointer centre through the generated root matrix instead.
   Keep the source LIGHT canvas opaque while DARK expands so the already-committed
   live dark page cannot leak through outside the circle. */
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt #themeToggle{
  view-transition-name: none !important;
}
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt-to-dark::view-transition-group(root),
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt-to-dark::view-transition-image-pair(root){
  background: #f4f6f9 !important;
  background-color: #f4f6f9 !important;
}
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt-to-dark::view-transition-old(root){
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

/* v22.23 ORDINARY MOBILE — persistent prewarmed SCB origin probe.
   The 2px probe is measurement-only. Its generated VT geometry is mapped into the root
   snapshot, while the real theme button remains inside root and never gets a cold named layer. */
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt::view-transition-group(jukebox-theme-origin-probe),
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt::view-transition-image-pair(jukebox-theme-origin-probe),
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt::view-transition-old(jukebox-theme-origin-probe),
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt::view-transition-new(jukebox-theme-origin-probe){
  animation: none !important;
  transition: none !important;
  opacity: 0 !important;
  mix-blend-mode: normal !important;
  pointer-events: none !important;
}


/* v22.27 MOBILE DARK->LIGHT FIRST-FRAME GATE
   Keep the NEW light snapshot invisible only while JS attaches the OLD-dark collapse
   animation. It is revealed on circleAnimation.ready, underneath the still-full dark snapshot. */
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-preparing.jukebox-theme-native-vt-to-light::view-transition-new(root){
  opacity: 0 !important;
}
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-preparing.jukebox-theme-native-vt-to-light::view-transition-old(root){
  opacity: 1 !important;
}

/* v22.29 MOBILE BAGID PERMANENT FIRST-PAINT HINT
   Ordinary mobile browsers and classic Telegram Mobile WebView receive the early
   jukebox-mobile-static-bag class before first paint. Keep the native ::placeholder
   permanently transparent there and render one stable regular-text hint for the whole
   empty-input lifetime; no pseudo/native handoff means no reload blink or 1-2px baseline jump. */
html.jukebox-mobile-static-bag #bagSearchInput::placeholder{
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  opacity: 0 !important;
}
html.jukebox-mobile-static-bag .bag-search-mobile-placeholder{
  position: absolute !important;
  left: 12px !important;
  right: 70px !important;
  top: 0 !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  z-index: 2 !important;
  box-sizing: border-box !important;
  font-family: Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  color: #7d8593 !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}
html.jukebox-mobile-static-bag[data-theme="dark"] .bag-search-mobile-placeholder{
  color: #9aa2ae !important;
}
html.jukebox-mobile-static-bag .bag-search-mobile-placeholder::before{
  content: "Enter BAGID or .bag URL";
}
html.jukebox-mobile-static-bag[data-lang="ru"] .bag-search-mobile-placeholder::before{
  content: "Введите BAGID или .bag URL";
}
html.jukebox-mobile-static-bag #bagSearchInput.wallet-ui-disabled ~ .bag-search-mobile-placeholder,
html.jukebox-mobile-static-bag #bagSearchInput:disabled ~ .bag-search-mobile-placeholder{
  opacity: .45 !important;
}
html.jukebox-mobile-static-bag #bagSearchInput:not(:placeholder-shown) ~ .bag-search-mobile-placeholder{
  display: none !important;
}

/* v22.29 MOBILE DARK->LIGHT DOM COLLAPSE
   Reverse mobile theme transitions use a real dark DOM snapshot, not native VT teardown. */
html.jukebox-theme-env-mobile-browser.jukebox-theme-dom-fallback .jukebox-theme-transition-overlay{
  transition: none !important;
  -webkit-transition: none !important;
  will-change: clip-path !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  contain: paint !important;
}


/* v22.30 MOBILE DARK->LIGHT LIVE UNDERLAY + BAGID COLOR LOCK
   Reverse transition keeps the exact native OLD dark pixel snapshot, but never shows the NEW
   light root snapshot. The clipped OLD snapshot therefore reveals the already-rendered live
   LIGHT page directly. No DOM clone means player ranges/buttons keep their exact geometry,
   and removing the View-Transition tree at the end has no snapshot->live visual handoff.
   The permanent mobile BAGID hint uses one identical neutral color in both themes so it cannot
   brighten while data-theme changes underneath the circle. */
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt-to-light::view-transition-group(root),
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt-to-light::view-transition-image-pair(root){
  background: transparent !important;
  background-color: transparent !important;
}
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt-to-light::view-transition-new(root){
  z-index: 1 !important;
  opacity: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  animation: none !important;
  mix-blend-mode: normal !important;
}
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt-to-light::view-transition-old(root){
  z-index: 2 !important;
  opacity: 1 !important;
  background: #1e1f23 !important;
  background-color: #1e1f23 !important;
  mix-blend-mode: normal !important;
}
html.jukebox-mobile-static-bag .bag-search-mobile-placeholder,
html.jukebox-mobile-static-bag[data-theme="dark"] .bag-search-mobile-placeholder{
  color: #7d8593 !important;
  -webkit-text-fill-color: #7d8593 !important;
  filter: none !important;
  text-shadow: none !important;
  transition: none !important;
  animation: none !important;
}

/* v22.33 MOBILE NATIVE VT RESTORE + CONTROL SNAPSHOT LOCK
   Return both theme directions to the native pixel-snapshot engine. The NEW target root remains
   opaque under DARK->LIGHT, while seek/volume/mute/BAGID hint are lifted into independent named
   groups and kept pixel-stable until the circle finishes. The real theme button is also named so
   JS can read its exact generated Snapshot-Containing-Block centre instead of a stale probe. */
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt #themeToggle{
  view-transition-name: jukebox-theme-toggle !important;
}
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt #seekBar{
  view-transition-name: jukebox-theme-seek !important;
}
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt #volumeBar{
  view-transition-name: jukebox-theme-volume !important;
}
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt #muteBtn{
  view-transition-name: jukebox-theme-mute !important;
}
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt .bag-search-mobile-placeholder{
  view-transition-name: jukebox-theme-bag-hint !important;
}

html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt::view-transition-group(jukebox-theme-seek),
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt::view-transition-image-pair(jukebox-theme-seek),
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt::view-transition-old(jukebox-theme-seek),
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt::view-transition-new(jukebox-theme-seek),
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt::view-transition-group(jukebox-theme-volume),
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt::view-transition-image-pair(jukebox-theme-volume),
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt::view-transition-old(jukebox-theme-volume),
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt::view-transition-new(jukebox-theme-volume),
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt::view-transition-group(jukebox-theme-mute),
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt::view-transition-image-pair(jukebox-theme-mute),
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt::view-transition-old(jukebox-theme-mute),
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt::view-transition-new(jukebox-theme-mute),
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt::view-transition-group(jukebox-theme-bag-hint),
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt::view-transition-image-pair(jukebox-theme-bag-hint),
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt::view-transition-old(jukebox-theme-bag-hint),
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt::view-transition-new(jukebox-theme-bag-hint){
  animation: none !important;
  transition: none !important;
  mix-blend-mode: normal !important;
}
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt::view-transition-group(jukebox-theme-seek),
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt::view-transition-group(jukebox-theme-volume),
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt::view-transition-group(jukebox-theme-mute),
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt::view-transition-group(jukebox-theme-bag-hint){
  z-index: 2147483645 !important;
}
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt::view-transition-old(jukebox-theme-seek),
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt::view-transition-old(jukebox-theme-volume),
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt::view-transition-old(jukebox-theme-mute),
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt::view-transition-old(jukebox-theme-bag-hint){
  opacity: 1 !important;
}
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt::view-transition-new(jukebox-theme-seek),
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt::view-transition-new(jukebox-theme-volume),
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt::view-transition-new(jukebox-theme-mute),
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt::view-transition-new(jukebox-theme-bag-hint){
  opacity: 0 !important;
}

html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt-to-light::view-transition-group(root),
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt-to-light::view-transition-image-pair(root){
  background: #f4f6f9 !important;
  background-color: #f4f6f9 !important;
}
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt-to-light::view-transition-new(root){
  z-index: 1 !important;
  opacity: 1 !important;
  background: #f4f6f9 !important;
  background-color: #f4f6f9 !important;
  mix-blend-mode: normal !important;
}
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt-to-light::view-transition-old(root){
  z-index: 2 !important;
  opacity: 1 !important;
  background: #1e1f23 !important;
  background-color: #1e1f23 !important;
  mix-blend-mode: normal !important;
}

/* v22.34 MOBILE ROOT-SNAPSHOT CONTROLS + FRESH PRESS ORIGIN
   Keep native player controls and the permanent BAGID hint inside the ROOT snapshot.
   Separate named VT groups can rasterize disabled range controls as blank and force
   the disabled BAGID hint from opacity .45 to opacity 1. The theme button also stays
   inside ROOT; JS maps the fresh tap centre through this transition's root matrix. */
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt #themeToggle,
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt #seekBar,
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt #volumeBar,
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt #muteBtn,
html.jukebox-theme-env-mobile-browser.jukebox-theme-native-vt .bag-search-mobile-placeholder{
  view-transition-name: none !important;
}

html.jukebox-theme-env-mobile-browser.jukebox-theme-animating .bag-search-mobile-placeholder{
  transform: none !important;
  -webkit-transform: none !important;
  filter: none !important;
  text-shadow: none !important;
  transition: none !important;
  animation: none !important;
}

/* v22.35 MOBILE BAGID OPAQUE ENDPOINT + ORDINARY-MOBILE ORIGIN POLICY
   The disabled permanent BAGID hint no longer relies on element opacity during native VT.
   These are the previously verified pre-blended endpoint colours from v22.31, rendered at
   opacity:1 so root-snapshot compositing cannot temporarily brighten the text. Ordinary-mobile
   circle geometry is supplied directly by the fresh button centre in JS; no CSS origin fallback. */
html.jukebox-mobile-static-bag:not([data-theme="dark"]) #bagSearchInput.wallet-ui-disabled ~ .bag-search-mobile-placeholder,
html.jukebox-mobile-static-bag:not([data-theme="dark"]) #bagSearchInput:disabled ~ .bag-search-mobile-placeholder{
  color: #bec3cb !important;
  -webkit-text-fill-color: #bec3cb !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}
html.jukebox-mobile-static-bag[data-theme="dark"] #bagSearchInput.wallet-ui-disabled ~ .bag-search-mobile-placeholder,
html.jukebox-mobile-static-bag[data-theme="dark"] #bagSearchInput:disabled ~ .bag-search-mobile-placeholder{
  color: #494d55 !important;
  -webkit-text-fill-color: #494d55 !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}

/* v22.36 MOBILE BAGID BITMAP LOCK + FRESH ORDINARY ORIGIN PROBE
   The permanent mobile BAGID hint is drawn once into a DPR-aware canvas and that bitmap
   is what native View Transition captures. Chromium therefore cannot re-rasterize the Arial
   glyphs with a temporarily brighter antialiasing pass during the circular wipe. The rule is
   keyed by jukebox-mobile-static-bag, so it also covers Telegram Mobile MiniApp/WebView while
   leaving all PC/Desktop environments untouched. Ordinary-mobile origin measurement itself is
   handled by the fresh per-transition 2x2 generated probe in theme-light-to-dark.js. */
html.jukebox-mobile-static-bag .bag-search-mobile-placeholder.jukebox-bag-hint-bitmap-ready::before{
  content: "" !important;
}

html.jukebox-mobile-static-bag .bag-search-mobile-placeholder .jukebox-mobile-bag-hint-bitmap{
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
  transform: none !important;
  -webkit-transform: none !important;
  transition: none !important;
  animation: none !important;
  pointer-events: none !important;
  image-rendering: auto !important;
}


/* v22.45 MOBILE BAGID ROOT-ONLY + TRUE LEFT-BUTTON ORIGIN
   Final mobile BAGID rule: the bitmap is part of ROOT only. Disable every older named
   BAGID View-Transition group so no second text snapshot can be generated above ROOT.
   The bitmap itself is synchronously redrawn for OLD/NEW ROOT captures by JS. */
html.jukebox-mobile-static-bag .bag-search-mobile-placeholder,
html.jukebox-mobile-static-bag .bag-search-mobile-placeholder .jukebox-mobile-bag-hint-bitmap{
  view-transition-name: none !important;
}
html.jukebox-mobile-static-bag .bag-search-mobile-placeholder.jukebox-bag-hint-bitmap-ready{
  opacity: 1 !important;
  visibility: visible !important;
}
html.jukebox-mobile-static-bag.jukebox-theme-bag-live-hidden .bag-search-mobile-placeholder .jukebox-mobile-bag-hint-bitmap{
  visibility: visible !important;
}

/* v22.46 MOBILE BAGID — SINGLE TEXT SOURCE
   The permanent mobile hint is the only visible BAGID placeholder. Older animation rules
   temporarily restored the native input ::placeholder while the canvas hint was still visible,
   producing two identical text layers and the slight brightness increase reported on all mobile hosts.
   jukebox-mobile-static-bag is set only for mobile UA before first paint, so Desktop/PC is untouched. */
html.jukebox-mobile-static-bag #bagSearchInput::placeholder,
html.jukebox-mobile-static-bag.jukebox-theme-animating #bagSearchInput::placeholder,
html.jukebox-mobile-static-bag.jukebox-theme-native-vt #bagSearchInput::placeholder,
html.jukebox-mobile-static-bag.jukebox-theme-native-preparing #bagSearchInput::placeholder,
html.jukebox-mobile-static-bag.jukebox-theme-committing #bagSearchInput::placeholder{
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  opacity: 0 !important;
  text-shadow: none !important;
  filter: none !important;
}

/* v22.47 ORDINARY MOBILE — THEME BUTTON HIT-TEST CENTRE
   The SVG/icon layers must never become the PointerEvent target. offsetX/offsetY are used
   to reconstruct the exact 44x44 button centre after long mobile-browser idle; if an SVG
   child owns the hit-test those offsets are relative to the icon instead of the button. */
html.jukebox-theme-env-mobile-browser #themeToggle .theme-icon-stack,
html.jukebox-theme-env-mobile-browser #themeToggle .theme-icon-layer,
html.jukebox-theme-env-mobile-browser #themeToggle .theme-icon-svg,
html.jukebox-theme-env-mobile-browser #themeToggle svg,
html.jukebox-theme-env-mobile-browser #themeToggle path,
html.jukebox-theme-env-mobile-browser #themeToggle circle,
html.jukebox-theme-env-mobile-browser #themeToggle line{
  pointer-events: none !important;
}



/* v22.48 ORDINARY MOBILE — PERMANENT TRUE BUTTON-CENTRE VT MARKER
   The visible circle no longer depends on PointerEvent/client/visualViewport coordinates.
   This 2x2 element is permanently centred inside #themeToggle and owns its VT name before
   every transition, so its generated group and ROOT are captured in the same fresh SCB.
   The generated marker is fully invisible; it is measurement-only. */
html.jukebox-theme-env-mobile-browser #themeToggle{
  position: relative !important;
}
html.jukebox-theme-env-mobile-browser #themeToggle .jukebox-ordinary-theme-origin-marker{
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 2px !important;
  height: 2px !important;
  margin-left: -1px !important;
  margin-top: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  pointer-events: none !important;
  opacity: 0.001 !important;
  background: rgb(1,1,1) !important;
  contain: strict !important;
  transform: none !important;
  view-transition-name: jukebox-ordinary-theme-origin-center !important;
}
html.jukebox-theme-env-mobile-browser::view-transition-group(jukebox-ordinary-theme-origin-center),
html.jukebox-theme-env-mobile-browser::view-transition-image-pair(jukebox-ordinary-theme-origin-center),
html.jukebox-theme-env-mobile-browser::view-transition-old(jukebox-ordinary-theme-origin-center),
html.jukebox-theme-env-mobile-browser::view-transition-new(jukebox-ordinary-theme-origin-center){
  animation: none !important;
  transition: none !important;
  opacity: 0 !important;
  mix-blend-mode: normal !important;
  pointer-events: none !important;
}


/* v22.52 MOBILE IDLE DARK-SURFACE STABILITY
   Ordinary mobile browsers and Telegram Mobile WebView only. Several closed full-screen
   UI backdrops remain in the DOM with opacity:0 while still owning backdrop-filter/blur(0)
   compositor surfaces. Some Android Chromium/WebView builds can present that dormant surface
   as a faint grey veil after a few quiet minutes until the next touch repaints it.
   Release backdrop compositing while those overlays are explicitly hidden. MiniApp and Desktop
   are intentionally excluded; when an overlay opens (aria-hidden=false), its original blur rules
   become active unchanged. */
html.jukebox-theme-env-mobile-browser .tracks-overlay[aria-hidden="true"],
html.jukebox-theme-env-mobile-browser .dropdown-overlay[aria-hidden="true"],
html.jukebox-theme-env-mobile-browser .history-overlay[aria-hidden="true"],
html.jukebox-theme-env-mobile-browser .wallet-profile-overlay[aria-hidden="true"],
html.jukebox-theme-env-mobile-browser .wallet-modal-overlay[aria-hidden="true"],
html.jukebox-theme-env-mobile-browser .video-quality-modal-overlay[hidden],
html.jukebox-theme-mobile-webview-host .tracks-overlay[aria-hidden="true"],
html.jukebox-theme-mobile-webview-host .dropdown-overlay[aria-hidden="true"],
html.jukebox-theme-mobile-webview-host .history-overlay[aria-hidden="true"],
html.jukebox-theme-mobile-webview-host .wallet-profile-overlay[aria-hidden="true"],
html.jukebox-theme-mobile-webview-host .wallet-modal-overlay[aria-hidden="true"],
html.jukebox-theme-mobile-webview-host .video-quality-modal-overlay[hidden]{
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  will-change: auto !important;
}

/* v22.53 MOBILE IDLE — COMPOSITOR KEEPALIVE
   Keep one imperceptible same-colour 4x4 surface moving by half a CSS pixel. This prevents a
   completely static mobile page from dropping the active compositor surface during idle.
   It exists only in mobile environment classes, accepts no input and owns no VT group. */
@keyframes jukebox-mobile-compositor-keepalive-v2253{
  from{ transform: translate3d(0,0,0); }
  to{ transform: translate3d(.5px,0,0); }
}
html.jukebox-theme-env-mobile-browser .jukebox-mobile-compositor-keepalive,
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host) .jukebox-mobile-compositor-keepalive{
  position: fixed !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 4px !important;
  height: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  opacity: .002 !important;
  background: #1e1f23 !important;
  contain: strict !important;
  will-change: transform !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  view-transition-name: none !important;
  z-index: 2147482001 !important;
  animation: jukebox-mobile-compositor-keepalive-v2253 720ms linear infinite alternate !important;
}

/* v22.53 ORDINARY MOBILE + TELEGRAM MOBILE WEBVIEW — fully closed full-screen overlays
   must leave layout/compositing. Closing animations are preserved; display:none starts only
   after the related open/closing state has ended. Telegram MiniApp is deliberately excluded. */
html.jukebox-theme-env-mobile-browser body:not(.tracks-open):not(.tracks-closing) .tracks-overlay[aria-hidden="true"],
html.jukebox-theme-env-mobile-browser body:not(.favorites-open):not(.favorites-closing) .dropdown-overlay[aria-hidden="true"],
html.jukebox-theme-env-mobile-browser:not(.history-open):not(.history-closing) .history-overlay[aria-hidden="true"],
html.jukebox-theme-env-mobile-browser:not(.wallet-profile-open) .wallet-profile-overlay[aria-hidden="true"],
html.jukebox-theme-env-mobile-browser:not(.wallet-modal-open) .wallet-modal-overlay[aria-hidden="true"],
html.jukebox-theme-env-mobile-browser .video-quality-modal-overlay[hidden],
html.jukebox-theme-mobile-webview-host body:not(.tracks-open):not(.tracks-closing) .tracks-overlay[aria-hidden="true"],
html.jukebox-theme-mobile-webview-host body:not(.favorites-open):not(.favorites-closing) .dropdown-overlay[aria-hidden="true"],
html.jukebox-theme-mobile-webview-host:not(.history-open):not(.history-closing) .history-overlay[aria-hidden="true"],
html.jukebox-theme-mobile-webview-host:not(.wallet-profile-open) .wallet-profile-overlay[aria-hidden="true"],
html.jukebox-theme-mobile-webview-host:not(.wallet-modal-open) .wallet-modal-overlay[aria-hidden="true"],
html.jukebox-theme-mobile-webview-host .video-quality-modal-overlay[hidden]{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  will-change: auto !important;
  transform: none !important;
  -webkit-transform: none !important;
}

/* v22.53 ALL MOBILE — theme button itself owns pointer/touch hit testing.
   This makes offsetX/offsetY button-relative in Telegram Mobile too, so the real event can
   reconstruct the exact centre when a warm origin cache is unavailable. */
html.jukebox-theme-env-mobile-browser #themeToggle .theme-icon-stack,
html.jukebox-theme-env-mobile-browser #themeToggle .theme-icon-layer,
html.jukebox-theme-env-mobile-browser #themeToggle .theme-icon-svg,
html.jukebox-theme-env-mobile-browser #themeToggle svg,
html.jukebox-theme-env-mobile-browser #themeToggle svg *,
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host) #themeToggle .theme-icon-stack,
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host) #themeToggle .theme-icon-layer,
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host) #themeToggle .theme-icon-svg,
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host) #themeToggle svg,
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host) #themeToggle svg *{
  pointer-events: none !important;
}