/*
ФАЙЛ: telegram-webview-light-to-dark.css
  Назначение: круговая анимация смены LIGHT <-> DARK для TELEGRAM WEBVIEW / Telegram browser.
  Область: Telegram WebView на ПК и мобильных устройствах; сюда же попадают Telegram mobile MiniApp.
  Telegram Desktop MiniApp обслуживается отдельным telegram-pc-miniapp-light-to-dark.css.
  Эффект повторяет BAGID/референс-видео: круг раскрывается/схлопывается из кнопки темы.
*/

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

html.jukebox-theme-env-telegram-webview .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-telegram-webview .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-telegram-webview .jukebox-theme-transition-clone,
html.jukebox-theme-env-telegram-webview .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-telegram-webview.jukebox-theme-committing body,
html.jukebox-theme-env-telegram-webview.jukebox-theme-committing #appContainer,
html.jukebox-theme-env-telegram-webview.jukebox-theme-committing #appContainer *,
html.jukebox-theme-env-telegram-webview.jukebox-theme-snapshot #appContainer,
html.jukebox-theme-env-telegram-webview.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-telegram-webview #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-telegram-webview #themeToggle.jukebox-theme-press-to-dark .moon-icon{
  opacity: 0 !important;
}

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

html.jukebox-theme-env-telegram-webview #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-telegram-webview #themeToggle.jukebox-theme-press-to-light .moon-icon{
  opacity: 1 !important;
  fill: #000000 !important;
  color: #000000 !important;
}

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

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

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

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

html.jukebox-theme-env-telegram-webview .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-telegram-webview .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-telegram-webview .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-telegram-webview:not([data-theme="dark"]) .volume-bar::-webkit-slider-runnable-track{
  background: rgba(0,0,0,0.18) !important;
}

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

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

html.jukebox-theme-env-telegram-webview[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-telegram-webview.jukebox-theme-native-vt::view-transition-group(root),
html.jukebox-theme-env-telegram-webview.jukebox-theme-native-vt::view-transition-image-pair(root),
html.jukebox-theme-env-telegram-webview.jukebox-theme-native-vt::view-transition-old(root),
html.jukebox-theme-env-telegram-webview.jukebox-theme-native-vt::view-transition-new(root){
  animation: none !important;
  mix-blend-mode: normal !important;
  isolation: auto !important;
}

html.jukebox-theme-env-telegram-webview.jukebox-theme-native-vt-to-dark::view-transition-old(root){
  z-index: 1 !important;
}
html.jukebox-theme-env-telegram-webview.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-telegram-webview.jukebox-theme-native-vt-to-light::view-transition-new(root){
  z-index: 1 !important;
}
html.jukebox-theme-env-telegram-webview.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-telegram-webview.jukebox-theme-animating #bagSearchInput,
html.jukebox-theme-env-telegram-webview.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-telegram-webview.jukebox-theme-animating #bagSearchInput::placeholder,
html.jukebox-theme-env-telegram-webview.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-telegram-webview #seekBar,
html.jukebox-theme-env-telegram-webview #volumeBar,
html.jukebox-theme-env-telegram-webview .seek-bar,
html.jukebox-theme-env-telegram-webview .volume-bar{
  transition: none !important;
  animation: none !important;
  filter: none !important;
  box-shadow: none !important;
}

html.jukebox-theme-env-telegram-webview: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-telegram-webview[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-telegram-webview:not([data-theme="dark"]) .volume-bar::-webkit-slider-runnable-track{
  background: rgba(0,0,0,0.18) !important;
}
html.jukebox-theme-env-telegram-webview[data-theme="dark"] .volume-bar::-webkit-slider-runnable-track{
  background: rgba(255,255,255,0.22) !important;
}
html.jukebox-theme-env-telegram-webview:not([data-theme="dark"]) .volume-bar::-moz-range-track{
  background: rgba(0,0,0,0.18) !important;
}
html.jukebox-theme-env-telegram-webview[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-telegram-webview.jukebox-theme-animating #muteBtn,
html.jukebox-theme-env-telegram-webview.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-telegram-webview #themeToggle:active{
  transform: none !important;
  -webkit-transform: none !important;
}

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

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

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

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

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

html.jukebox-theme-env-telegram-webview.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-telegram-webview.jukebox-theme-native-waapi::view-transition-old(root),
html.jukebox-theme-env-telegram-webview.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-telegram-webview.jukebox-theme-animating #bagSearchInput,
html.jukebox-theme-env-telegram-webview.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-telegram-webview.jukebox-theme-animating #bagSearchInput::placeholder,
html.jukebox-theme-env-telegram-webview.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-telegram-webview .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-telegram-webview .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-telegram-webview.jukebox-theme-native-vt-to-dark:not(.jukebox-theme-native-waapi)::view-transition-new(root),
html.jukebox-theme-env-telegram-webview.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-telegram-webview.jukebox-theme-native-vt #themeToggle{
  view-transition-name: none !important;
  transform: none !important;
  -webkit-transform: none !important;
  translate: none !important;
}

html.jukebox-theme-env-telegram-webview.jukebox-theme-animating #bagSearchInput,
html.jukebox-theme-env-telegram-webview.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-telegram-webview.jukebox-theme-animating #bagSearchInput::placeholder,
html.jukebox-theme-env-telegram-webview.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-telegram-webview.jukebox-theme-native-vt-to-light::view-transition-old(root){
  z-index: 1 !important;
  animation: none !important;
}
html.jukebox-theme-env-telegram-webview.jukebox-theme-native-vt-to-light::view-transition-new(root){
  z-index: 2 !important;
}
html.jukebox-theme-env-telegram-webview.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-telegram-webview[data-theme="light"] #langToggle,
html.jukebox-theme-env-telegram-webview[data-theme="light"].jukebox-theme-animating #langToggle{
  border-color: #ccc !important;
  transition-property: transform !important;
}

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

html.jukebox-theme-env-telegram-webview .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-telegram-webview #themeToggle{
  transition-property: transform !important;
}

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

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

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

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

html.jukebox-theme-env-telegram-webview .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-telegram-webview.jukebox-theme-native-vt-to-dark::view-transition-old(root){
  z-index: 1 !important;
  animation: none !important;
}

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

html.jukebox-theme-env-telegram-webview.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-telegram-webview.jukebox-theme-native-vt-to-light::view-transition-new(root){
  z-index: 1 !important;
  animation: none !important;
}

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

html.jukebox-theme-env-telegram-webview.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 TELEGRAM WEBVIEW / MOBILE MINIAPP STABILITY
   One stylesheet serves Telegram WebView on mobile/desktop and Telegram mobile MiniApp.
   CSS owns the native snapshot lifetime; the circular mask starts only after JS writes the
   final button centre, so the live target theme cannot appear before the circle reaches it.
*/
html.jukebox-theme-env-telegram-webview{
  --jukebox-theme-animation-ms: 720;
}

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

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

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

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

html.jukebox-theme-env-telegram-webview.jukebox-theme-native-preparing::view-transition-old(root),
html.jukebox-theme-env-telegram-webview.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-telegram-webview.jukebox-theme-native-vt:not(.jukebox-theme-native-waapi)::view-transition-group(root){
  animation: jukebox-theme-hold-telegram-webview-v224 720ms linear both !important;
}

html.jukebox-theme-env-telegram-webview.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-telegram-webview.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-telegram-webview.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-telegram-webview.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;
}

/* Telegram Desktop WebView can miss pointerdown and fall through to top.css :active.
   Keep the button geometry static and make the target state win even on mouse-only hosts. */
#themeToggle.theme-btn:active{
  transform: none !important;
  -webkit-transform: none !important;
}

#themeToggle.theme-btn.jukebox-theme-press-to-dark,
#themeToggle.theme-btn.jukebox-theme-press-to-dark:active{
  background: #2a2c31 !important;
  background-color: #2a2c31 !important;
  border-color: #3a3c42 !important;
  color: #f1f1f1 !important;
  transform: none !important;
  transition: none !important;
}

#themeToggle.theme-btn.jukebox-theme-press-to-dark .moon-icon{ opacity: 0 !important; }
#themeToggle.theme-btn.jukebox-theme-press-to-dark .sun-icon{
  opacity: 1 !important;
  fill: #ff8c00 !important;
  color: #ff8c00 !important;
}

#themeToggle.theme-btn.jukebox-theme-press-to-light,
#themeToggle.theme-btn.jukebox-theme-press-to-light:active{
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: #ccc !important;
  color: #000000 !important;
  transform: none !important;
  transition: none !important;
}

#themeToggle.theme-btn.jukebox-theme-press-to-light .moon-icon{
  opacity: 1 !important;
  fill: #000000 !important;
  color: #000000 !important;
}
#themeToggle.theme-btn.jukebox-theme-press-to-light .sun-icon{ opacity: 0 !important; }

/* v22.5 TELEGRAM MOBILE WEBVIEW + DESKTOP BUTTON PREVIEW
   Telegram Mobile WebView (not Telegram Mobile MiniApp) uses the DOM-snapshot branch so the
   live LIGHT page remains visible until the DARK circle has completely expanded. Coordinates
   are viewport coordinates from the real button, avoiding Snapshot-Containing-Block drift.
*/
html.jukebox-theme-mobile-webview-host.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-mobile-webview-host.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;
}

/* Classic Telegram Desktop WebView: never show the generic orange pressed state.
   JS applies the opposite theme button state inline in the same input event; these selectors
   provide the same endpoint visuals even on engines that repaint :active unusually early. */
html.jukebox-theme-desktop-webview-host[data-theme="light"] #themeToggle.theme-btn:active{
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: #ccc !important;
  color: #000000 !important;
  transform: none !important;
  -webkit-transform: none !important;
}

html.jukebox-theme-desktop-webview-host[data-theme="dark"] #themeToggle.theme-btn:active{
  background: #2a2c31 !important;
  background-color: #2a2c31 !important;
  border-color: #3a3c42 !important;
  color: #f1f1f1 !important;
  transform: none !important;
  -webkit-transform: none !important;
}

html.jukebox-theme-desktop-webview-host #themeToggle.jukebox-theme-press-to-dark,
html.jukebox-theme-desktop-webview-host #themeToggle.jukebox-theme-press-to-dark:active{
  background: #2a2c31 !important;
  background-color: #2a2c31 !important;
  border-color: #3a3c42 !important;
  color: #f1f1f1 !important;
  transform: none !important;
  -webkit-transform: none !important;
  transition: none !important;
}
html.jukebox-theme-desktop-webview-host #themeToggle.jukebox-theme-press-to-dark .moon-icon{
  opacity: 0 !important;
}
html.jukebox-theme-desktop-webview-host #themeToggle.jukebox-theme-press-to-dark .sun-icon{
  opacity: 1 !important;
  fill: #ff8c00 !important;
  color: #ff8c00 !important;
}

html.jukebox-theme-desktop-webview-host #themeToggle.jukebox-theme-press-to-light,
html.jukebox-theme-desktop-webview-host #themeToggle.jukebox-theme-press-to-light:active{
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: #ccc !important;
  color: #000000 !important;
  transform: none !important;
  -webkit-transform: none !important;
  transition: none !important;
}
html.jukebox-theme-desktop-webview-host #themeToggle.jukebox-theme-press-to-light .moon-icon{
  opacity: 1 !important;
  fill: #000000 !important;
  color: #000000 !important;
}
html.jukebox-theme-desktop-webview-host #themeToggle.jukebox-theme-press-to-light .sun-icon{
  opacity: 0 !important;
}


/* v22.10 TELEGRAM MOBILE RESTORE + DESKTOP WEBVIEW BAGID SNAPSHOT FIX
   Mobile Telegram MiniApp/WebView return to the user-verified v21 native pixel snapshot path.
   Desktop Telegram WebView remains on its working manual DOM-circle path.
*/
html.jukebox-theme-env-telegram-webview{
  --jukebox-theme-animation-ms: 620;
}

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

/* Classic Desktop Telegram WebView snapshot must render the BAGID field exactly like its endpoint.
   Keep a real placeholder instead of converting it into input.value. */
html.jukebox-theme-desktop-webview-host .jukebox-theme-transition-clone #bagSearchInput.jukebox-theme-desktop-webview-bag-snapshot,
html.jukebox-theme-desktop-webview-host .jukebox-theme-transition-clone .bag-search-input.jukebox-theme-desktop-webview-bag-snapshot{
  font-size: 12px !important;
  line-height: 1.08 !important;
  font-family: Arial, sans-serif !important;
  font-weight: 800 !important;
  opacity: 1 !important;
  filter: none !important;
  box-shadow: none !important;
  transform: none !important;
  -webkit-transform: none !important;
  transition: none !important;
  animation: none !important;
}
html.jukebox-theme-desktop-webview-host .jukebox-theme-transition-clone #bagSearchInput.jukebox-theme-desktop-webview-bag-snapshot::placeholder,
html.jukebox-theme-desktop-webview-host .jukebox-theme-transition-clone .bag-search-input.jukebox-theme-desktop-webview-bag-snapshot::placeholder{
  color: #7d8593 !important;
  -webkit-text-fill-color: #7d8593 !important;
  opacity: 1 !important;
  font-size: 12px !important;
  line-height: 1.08 !important;
  font-family: Arial, sans-serif !important;
  font-weight: 700 !important;
  transition: none !important;
  animation: none !important;
}

/* v22.11 TELEGRAM MOBILE SNAPSHOT LIFETIME + DESKTOP WEBVIEW BAGID FREEZE
   Mobile Telegram MiniApp/WebView keep the native pixel snapshot alive for the full custom circle.
   Classic Desktop Telegram WebView keeps its manual circle; only its BAGID snapshot is replaced by a
   non-native frozen visual box so old Qt/Chromium cannot brighten or resize the placeholder mid-transition.
*/
html.jukebox-theme-desktop-webview-host .jukebox-theme-transition-clone .jukebox-theme-desktop-webview-bag-frozen{
  transition: none !important;
  animation: none !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
  -webkit-transform: none !important;
}

html.jukebox-theme-desktop-webview-host .jukebox-theme-transition-clone .jukebox-theme-desktop-webview-bag-frozen-hint{
  transition: none !important;
  animation: none !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
  -webkit-transform: none !important;
}

/* v22.13 TELEGRAM MOBILE NATIVE PRE-CLIP + DESKTOP WEBVIEW BAG PIXEL SNAPSHOT
   Mobile Telegram keeps the v22.11 direct final button centre, but the NEW dark snapshot is
   clipped to zero from its very first native View-Transition paint. WAAPI then expands it.
   Desktop Telegram WebView still uses the manual DOM circle; its BAGID input is rasterized into
   a canvas snapshot in JS so clipped-layer font rasterisation cannot brighten or resize it.
*/
html.jukebox-theme-desktop-webview-host .jukebox-theme-desktop-webview-bag-canvas,
html.jukebox-theme-desktop-webview-host .jukebox-theme-desktop-webview-bag-source-cover{
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  -webkit-transform: none !important;
  transition: none !important;
  animation: none !important;
  image-rendering: auto !important;
}


/* v22.18 DESKTOP TELEGRAM WEBVIEW BAGID + SCROLLBAR
   The manual circle uses a normal DOM box/span snapshot of the BAGID field instead of canvas/native input.
   This keeps the exact computed endpoint background and text rasterization with no brightness flash. */
html.jukebox-theme-desktop-webview-host .jukebox-theme-desktop-webview-bag-frozen-box,
html.jukebox-theme-desktop-webview-host .jukebox-theme-desktop-webview-bag-source-cover,
html.jukebox-theme-desktop-webview-host .jukebox-theme-desktop-webview-bag-frozen-text{
  opacity: 1 !important;
  filter: none !important;
  transition: none !important;
  animation: none !important;
  text-shadow: none !important;
}
html.jukebox-theme-desktop-webview-host,
html.jukebox-theme-desktop-webview-host body{
  overflow-y: auto !important;
  scrollbar-gutter: auto !important;
  overflow-x: hidden !important;
}
html.jukebox-theme-desktop-webview-host body{
  width: 100vw !important;
  min-width: 100vw !important;
  max-width: 100vw !important;
}


/* v22.19 TELEGRAM MOBILE FIRST-PAINT STABILITY
   Keep the already-stable native pixel snapshots, but remove the stale CSS pre-clip that
   could use the launch viewport for the first real switches. JS attaches the final-origin
   WAAPI circle before this target snapshot becomes visible. Desktop Telegram WebView does
   not use this native branch. */
html.jukebox-theme-env-telegram-webview.jukebox-theme-native-vt.jukebox-theme-native-waapi::view-transition-group(root),
html.jukebox-theme-env-telegram-webview.jukebox-theme-native-vt.jukebox-theme-native-waapi::view-transition-image-pair(root),
html.jukebox-theme-env-telegram-webview.jukebox-theme-native-vt.jukebox-theme-native-waapi::view-transition-old(root),
html.jukebox-theme-env-telegram-webview.jukebox-theme-native-vt.jukebox-theme-native-waapi::view-transition-new(root){
  animation: none !important;
  mix-blend-mode: normal !important;
}
html.jukebox-theme-env-telegram-webview.jukebox-theme-native-vt-to-dark::view-transition-old(root){ z-index:1 !important; opacity:1 !important; }
html.jukebox-theme-env-telegram-webview.jukebox-theme-native-vt-to-dark::view-transition-new(root){ z-index:2 !important; opacity:1 !important; }
html.jukebox-theme-env-telegram-webview.jukebox-theme-native-vt-to-light::view-transition-new(root){ z-index:1 !important; opacity:1 !important; }
html.jukebox-theme-env-telegram-webview.jukebox-theme-native-vt-to-light::view-transition-old(root){ z-index:2 !important; opacity:1 !important; }
html.jukebox-theme-env-telegram-webview.jukebox-theme-native-preparing.jukebox-theme-native-vt-to-dark::view-transition-new(root){
  opacity:0 !important;
}

/* v22.20 TELEGRAM MOBILE GENERATED-SNAPSHOT ORIGIN
   Mobile Telegram MiniApp/WebView uses the browser-generated named theme-button snapshot
   as the circle origin. Desktop Telegram WebView still uses its existing manual DOM circle. */
html.jukebox-theme-env-telegram-webview.jukebox-theme-native-vt.jukebox-theme-native-waapi::view-transition-group(root),
html.jukebox-theme-env-telegram-webview.jukebox-theme-native-vt.jukebox-theme-native-waapi::view-transition-image-pair(root),
html.jukebox-theme-env-telegram-webview.jukebox-theme-native-vt.jukebox-theme-native-waapi::view-transition-old(root),
html.jukebox-theme-env-telegram-webview.jukebox-theme-native-vt.jukebox-theme-native-waapi::view-transition-new(root){
  animation: none !important;
  mix-blend-mode: normal !important;
}


/* v22.21 DESKTOP TELEGRAM WEBVIEW — TON CONNECT VIEWPORT SCROLLBAR */
html.jukebox-theme-desktop-webview-host.wallet-modal-open,
html.jukebox-theme-desktop-webview-host.wallet-modal-open body{
  overflow: hidden !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  scrollbar-gutter: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
html.jukebox-theme-desktop-webview-host.wallet-modal-open::-webkit-scrollbar,
html.jukebox-theme-desktop-webview-host.wallet-modal-open body::-webkit-scrollbar{
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* v22.21 TELEGRAM MOBILE — OPAQUE ROOT SNAPSHOTS
   body background can be propagated to the browser canvas and therefore remain transparent in
   a root View-Transition snapshot. Make both source and target snapshots explicitly opaque so
   the already-committed live target theme cannot leak through before the circle finishes. */
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host)[data-theme="light"]{
  background-color: #f4f6f9 !important;
}
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host)[data-theme="dark"]{
  background-color: #1e1f23 !important;
}
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-theme-native-vt-to-dark::view-transition-old(root){
  background-color: #f4f6f9 !important;
}
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-theme-native-vt-to-dark::view-transition-new(root){
  background-color: #1e1f23 !important;
}
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-theme-native-vt-to-light::view-transition-old(root){
  background-color: #1e1f23 !important;
}
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-theme-native-vt-to-light::view-transition-new(root){
  background-color: #f4f6f9 !important;
}


/* v22.21 DESKTOP WEBVIEW TON CONNECT OUTER MODAL SCROLLBAR VISUAL */
html.jukebox-theme-desktop-webview-host [data-tc-wallets-modal-container="true"],
html.jukebox-theme-desktop-webview-host [data-tc-actions-modal-container="true"],
html.jukebox-theme-desktop-webview-host [data-tc-modal="true"]{
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  scrollbar-gutter: auto !important;
}
html.jukebox-theme-desktop-webview-host [data-tc-wallets-modal-container="true"]::-webkit-scrollbar,
html.jukebox-theme-desktop-webview-host [data-tc-actions-modal-container="true"]::-webkit-scrollbar,
html.jukebox-theme-desktop-webview-host [data-tc-modal="true"]::-webkit-scrollbar{
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}


/* v22.22 TELEGRAM MOBILE — SOURCE LIGHT SNAPSHOT HOLD
   Do not alter the already-correct generated-button origin. Only keep an opaque
   source-light snapshot behind the expanding DARK circle. Desktop Telegram WebView
   is explicitly excluded and remains byte-for-behaviour unchanged. */
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-theme-native-vt-to-dark::view-transition-group(root),
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-theme-native-vt-to-dark::view-transition-image-pair(root){
  background: #f4f6f9 !important;
  background-color: #f4f6f9 !important;
}
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-theme-native-vt-to-dark::view-transition-old(root){
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}


/* v22.27 TELEGRAM MOBILE DARK->LIGHT FIRST-FRAME GATE
   Desktop Telegram WebView is excluded. On mobile Telegram, hide the NEW light snapshot
   only during compositor preparation so no full-light frame can flash before OLD dark is ready. */
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-theme-native-preparing.jukebox-theme-native-vt-to-light::view-transition-new(root){
  opacity: 0 !important;
}
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-theme-native-preparing.jukebox-theme-native-vt-to-light::view-transition-old(root){
  opacity: 1 !important;
}

/* v22.29 TELEGRAM MOBILE DARK->LIGHT DOM COLLAPSE
   All Telegram mobile hosts (MiniApp + classic WebView), excluding Desktop WebView,
   use the same GPU-stable real DOM snapshot for the reverse collapse direction only. */
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).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-telegram-webview:not(.jukebox-theme-desktop-webview-host).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.30 TELEGRAM MOBILE DARK->LIGHT LIVE UNDERLAY
   Mobile MiniApp/WebView only (Desktop Telegram WebView is explicitly excluded): hide the NEW
   light root snapshot for the whole reverse transition and collapse the exact OLD dark native
   snapshot over the already-live LIGHT page. This restores the reverse circle without DOM-clone
   control shifts and removes the final native snapshot handoff that looked like an F5 flash. */
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-theme-native-vt-to-light::view-transition-group(root),
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-theme-native-vt-to-light::view-transition-image-pair(root){
  background: transparent !important;
  background-color: transparent !important;
}
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).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-telegram-webview:not(.jukebox-theme-desktop-webview-host).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.33 TELEGRAM MOBILE NATIVE VT RESTORE + CONTROL SNAPSHOT LOCK
   Mobile MiniApp/WebView only. Desktop Telegram WebView is excluded. Keep the native root circle,
   use the generated real theme-button group for exact origin, and isolate seek/volume/mute/BAGID
   hint into stable named snapshots so mobile Chromium cannot redraw them at 0/100% mid-transition. */
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-theme-native-vt #themeToggle{
  view-transition-name: jukebox-theme-toggle !important;
}
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-theme-native-vt #seekBar{
  view-transition-name: jukebox-theme-seek !important;
}
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-theme-native-vt #volumeBar{
  view-transition-name: jukebox-theme-volume !important;
}
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-theme-native-vt #muteBtn{
  view-transition-name: jukebox-theme-mute !important;
}
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-theme-native-vt .bag-search-mobile-placeholder{
  view-transition-name: jukebox-theme-bag-hint !important;
}

html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-theme-native-vt::view-transition-group(jukebox-theme-seek),
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-theme-native-vt::view-transition-image-pair(jukebox-theme-seek),
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-theme-native-vt::view-transition-old(jukebox-theme-seek),
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-theme-native-vt::view-transition-new(jukebox-theme-seek),
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-theme-native-vt::view-transition-group(jukebox-theme-volume),
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-theme-native-vt::view-transition-image-pair(jukebox-theme-volume),
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-theme-native-vt::view-transition-old(jukebox-theme-volume),
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-theme-native-vt::view-transition-new(jukebox-theme-volume),
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-theme-native-vt::view-transition-group(jukebox-theme-mute),
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-theme-native-vt::view-transition-image-pair(jukebox-theme-mute),
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-theme-native-vt::view-transition-old(jukebox-theme-mute),
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-theme-native-vt::view-transition-new(jukebox-theme-mute),
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-theme-native-vt::view-transition-group(jukebox-theme-bag-hint),
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-theme-native-vt::view-transition-image-pair(jukebox-theme-bag-hint),
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-theme-native-vt::view-transition-old(jukebox-theme-bag-hint),
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).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-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-theme-native-vt::view-transition-group(jukebox-theme-seek),
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-theme-native-vt::view-transition-group(jukebox-theme-volume),
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-theme-native-vt::view-transition-group(jukebox-theme-mute),
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-theme-native-vt::view-transition-group(jukebox-theme-bag-hint){
  z-index: 2147483645 !important;
}
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-theme-native-vt::view-transition-old(jukebox-theme-seek),
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-theme-native-vt::view-transition-old(jukebox-theme-volume),
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-theme-native-vt::view-transition-old(jukebox-theme-mute),
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-theme-native-vt::view-transition-old(jukebox-theme-bag-hint){
  opacity: 1 !important;
}
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-theme-native-vt::view-transition-new(jukebox-theme-seek),
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-theme-native-vt::view-transition-new(jukebox-theme-volume),
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-theme-native-vt::view-transition-new(jukebox-theme-mute),
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-theme-native-vt::view-transition-new(jukebox-theme-bag-hint){
  opacity: 0 !important;
}

html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-theme-native-vt-to-light::view-transition-group(root),
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-theme-native-vt-to-light::view-transition-image-pair(root){
  background: #f4f6f9 !important;
  background-color: #f4f6f9 !important;
}
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).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-telegram-webview:not(.jukebox-theme-desktop-webview-host).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 TELEGRAM MOBILE ROOT-SNAPSHOT CONTROLS + FRESH PRESS ORIGIN
   MiniApp/WebView only; Desktop Telegram WebView stays untouched. Native range controls,
   mute and the permanent BAGID hint remain in ROOT instead of separate named snapshots.
   This prevents blank range/button captures and preserves the hint's real disabled opacity.
   The theme button is not a named group either; JS maps each fresh tap through ROOT. */
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-theme-native-vt #themeToggle,
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-theme-native-vt #seekBar,
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-theme-native-vt #volumeBar,
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-theme-native-vt #muteBtn,
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-theme-native-vt .bag-search-mobile-placeholder{
  view-transition-name: none !important;
}

html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).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 TELEGRAM MOBILE BAGID OPAQUE ENDPOINT
   MiniApp/Mobile WebView only. Keep the verified v22.34 circle/origin path unchanged, but render
   the disabled permanent BAGID hint with the same pre-blended opaque endpoint colours used by
   ordinary mobile. This removes alpha re-compositing brightness changes inside the root snapshot. */
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-mobile-static-bag:not([data-theme="dark"]) #bagSearchInput.wallet-ui-disabled ~ .bag-search-mobile-placeholder,
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).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-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).jukebox-mobile-static-bag[data-theme="dark"] #bagSearchInput.wallet-ui-disabled ~ .bag-search-mobile-placeholder,
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host).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;
}