/*
  ФАЙЛ: pc-miniapp.css
  Назначение: отображение сайта-сервиса JUKEBOX в DESKTOP-версии TELEGRAM MINI APP.

  ВАЖНО:
  - файл подключается последним и перекрывает старые правила только для Telegram Desktop MiniApp;
  - обычные desktop-браузеры, обычный WebView, мобильные браузеры и мобильный Telegram не затрагиваются;
  - визуальные исправления Desktop MiniApp для этого режима ведутся только здесь.
*/

/*
  v11 — Telegram Desktop MiniApp: штатный масштаб 1:1.

  Предыдущая версия искусственно уменьшала #appContainer до 0.9090909 и растягивала его до 110dvh.
  Поэтому ручной Zoom +1 в Telegram визуально возвращал интерфейс к правильному размеру, но нижняя
  часть страницы могла обрезаться. Теперь MiniApp сразу рисуется в масштабе 1:1 с реальной геометрией
  viewport: дополнительный ручной Zoom не требуется.
*/
html.tg-desktop-miniapp{
  --site-max-width: 500px !important;
  --site-width: min(500px, calc(100vw - 24px)) !important;
  --site-visual-width: min(500px, calc(100vw - 24px)) !important;

  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.tg-desktop-miniapp body{
  width: 100% !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  overscroll-behavior: none !important;
  scrollbar-gutter: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

html.tg-desktop-miniapp::-webkit-scrollbar,
html.tg-desktop-miniapp body::-webkit-scrollbar,
html.tg-desktop-miniapp #appContainer::-webkit-scrollbar{
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/*
  Главный контейнер Desktop MiniApp: реальный размер viewport без искусственного zoom.
  Старые правила 0.5 / 200% из style.css остаются перекрыты этим файлом.
*/
html.tg-desktop-miniapp #appContainer{
  transform: none !important;
  transform-origin: top center !important;
  width: var(--site-visual-width) !important;
  min-width: 0 !important;
  max-width: var(--site-max-width) !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow: visible !important;
  scrollbar-gutter: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  will-change: auto !important;
}

/*
  Кнопка подключения кошелька возвращается к обычной геометрии.
  Размер русского текста отдельно НЕ меняется: используется штатная типографика JUKEBOX.
*/
html.tg-desktop-miniapp #walletConnectBtn,
html.tg-desktop-miniapp .wallet-col-left #walletConnectBtn.wallet-btn{
  transform: none !important;
  transform-origin: initial !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  will-change: auto !important;
}

html.tg-desktop-miniapp .wallet-col-left{
  overflow: visible !important;
}

/*
  Убираем принудительный корневой scrollbar из style.css (html { overflow-y: scroll })
  и резерв под него. Внутренние прокручиваемые панели JUKEBOX продолжают использовать
  собственную прокрутку из своих CSS-файлов.
*/
html.tg-desktop-miniapp,
html.tg-desktop-miniapp body,
html.tg-desktop-miniapp #appContainer{
  overscroll-behavior-y: none !important;
}


/*
  v10 — Telegram Desktop MiniApp: нормальная геометрия кнопки подключения кошелька.

  В старом style.css для compact-режима остался transform: scale(2) с более специфичным
  селектором. Из-за этого предыдущего transform:none было недостаточно: кнопка и её надпись
  визуально удваивались. Здесь перекрываем старое правило селектором большей специфичности.
  Размер шрифта отдельно не меняется — используется штатный размер JUKEBOX.
*/
html.tg-desktop-miniapp body #walletConnectBtn.wallet-btn,
html.tg-desktop-miniapp body .wallet-col-left #walletConnectBtn.wallet-btn,
html.tg-desktop-miniapp body:not(.wallet-connected) #walletConnectBtn.wallet-btn,
html.tg-desktop-miniapp body:not(.wallet-connected) .wallet-col-left #walletConnectBtn.wallet-btn{
  transform: none !important;
  -webkit-transform: none !important;
  transform-origin: center center !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  will-change: auto !important;
}

/*
  v10 — Telegram Desktop MiniApp: закрытая кнопка Content List всегда стоит у нижнего края
  стартового окна MiniApp. Визуальный нижний отступ равен штатному боковому отступу 12px.

  Правило действует только когда список закрыт; открытая панель продолжает использовать штатную
  анимацию и позиции contentlistbtn.css. Нижний отступ равен 12px, как боковой отступ интерфейса.
*/
html.tg-desktop-miniapp{
  --tg-desktop-miniapp-edge-gap-layout: 12px;
}

html.tg-desktop-miniapp body:not(.tracks-open):not(.tracks-closing) #tracksToggle,
html.tg-desktop-miniapp body:not(.tracks-open):not(.tracks-closing) .tracks-toggle,
html.tg-desktop-miniapp body.tracks-locked-closed:not(.tracks-open):not(.tracks-closing) #tracksToggle,
html.tg-desktop-miniapp body.tracks-zoom-locked:not(.tracks-open):not(.tracks-closing) #tracksToggle{
  position: fixed !important;
  top: auto !important;
  bottom: var(--tg-desktop-miniapp-edge-gap-layout) !important;
  left: 50% !important;
  right: auto !important;
  width: var(--site-visual-width) !important;
  max-width: var(--site-max-width) !important;
  margin: 0 !important;
  transform: translate3d(-50%, 0, 0) !important;
  -webkit-transform: translate3d(-50%, 0, 0) !important;
  transition: none !important;
  will-change: auto !important;
}


/*
  v11 — Telegram Desktop MiniApp: TON Connect без кратковременной полосы прокрутки при анимации открытия.

  TON Connect создаёт собственный modal container поверх страницы. Во время переходного кадра его
  прокручиваемая область может на мгновение показать Chromium scrollbar справа. Прокрутку внутренних
  списков TON Connect не отключаем — скрываем только визуальную полосу у внешнего modal container.
*/
html.tg-desktop-miniapp body.wallet-modal-open,
html.tg-desktop-miniapp body.wallet-modal-open #appContainer,
html.tg-desktop-miniapp [data-tc-wallets-modal-container="true"],
html.tg-desktop-miniapp [data-tc-actions-modal-container="true"],
html.tg-desktop-miniapp [data-tc-modal="true"]{
  scrollbar-gutter: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

html.tg-desktop-miniapp body.wallet-modal-open::-webkit-scrollbar,
html.tg-desktop-miniapp body.wallet-modal-open #appContainer::-webkit-scrollbar,
html.tg-desktop-miniapp [data-tc-wallets-modal-container="true"]::-webkit-scrollbar,
html.tg-desktop-miniapp [data-tc-actions-modal-container="true"]::-webkit-scrollbar,
html.tg-desktop-miniapp [data-tc-modal="true"]::-webkit-scrollbar{
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/*
  v11 — при масштабе 1:1 блок плеера использует обычную геометрию и не должен обрезаться снизу.
  Не задаём ему отдельный zoom/scale; только гарантируем, что собственная рамка не режется контейнером.
*/
html.tg-desktop-miniapp .player-bar,
html.tg-desktop-miniapp .controls{
  flex-shrink: 0 !important;
  overflow: visible !important;
}


/*
  v12 — Telegram Desktop MiniApp: интерфейс остаётся строго 100% / 1:1,
  увеличиваются только графические иконки внутри существующих кнопок.

  Telegram Desktop Chromium визуально рисует SVG/пиктограммы чуть мельче относительно
  той же геометрии сайта в обычном desktop-браузере. Поэтому НЕ масштабируем страницу,
  контейнеры, кнопки или текст — только внутреннюю графику до 120%.
*/
html.tg-desktop-miniapp{
  --tg-desktop-miniapp-icon-scale: 1.2;
}

/* Верхние круглые кнопки: тема и язык. */
html.tg-desktop-miniapp #themeToggle .theme-icon-stack,
html.tg-desktop-miniapp #langToggle #langToggleIconWrap{
  transform: scale(var(--tg-desktop-miniapp-icon-scale)) !important;
  -webkit-transform: scale(var(--tg-desktop-miniapp-icon-scale)) !important;
  transform-origin: center center !important;
}

/* История, пополнение, вывод и профиль — масштабируется только значок, не сама кнопка. */
html.tg-desktop-miniapp .jukebox-action-btn .jukebox-action-icon{
  transform: scale(var(--tg-desktop-miniapp-icon-scale)) !important;
  -webkit-transform: scale(var(--tg-desktop-miniapp-icon-scale)) !important;
  transform-origin: center center !important;
}

/* Поиск BAGID и избранное. */
html.tg-desktop-miniapp #bagSearchBtn svg,
html.tg-desktop-miniapp .bag-search-btn svg,
html.tg-desktop-miniapp #favoritesToggleBtn svg,
html.tg-desktop-miniapp .favorites-toggle-btn svg{
  transform: scale(var(--tg-desktop-miniapp-icon-scale)) !important;
  -webkit-transform: scale(var(--tg-desktop-miniapp-icon-scale)) !important;
  transform-origin: center center !important;
}

/* Основная панель плеера: Play/Pause и Mute. */
html.tg-desktop-miniapp .player-bar .player-btn .icon-svg{
  transform: scale(var(--tg-desktop-miniapp-icon-scale)) !important;
  -webkit-transform: scale(var(--tg-desktop-miniapp-icon-scale)) !important;
  transform-origin: center center !important;
}

/* Нижние кнопки плеера. Масштабируем SVG, оставляя позиционирование .btn-icon нетронутым. */
html.tg-desktop-miniapp #prevBtn .btn-icon svg,
html.tg-desktop-miniapp #nextBtn .btn-icon svg,
html.tg-desktop-miniapp #repeatBtn .icon-svg{
  transform: scale(var(--tg-desktop-miniapp-icon-scale)) !important;
  -webkit-transform: scale(var(--tg-desktop-miniapp-icon-scale)) !important;
  transform-origin: center center !important;
}

/* Видео fullscreen и стрелка Content List. */
html.tg-desktop-miniapp #videoInlineFullscreenBtn .video-fullscreen-icon,
html.tg-desktop-miniapp #tracksToggle .tracks-chevron{
  transform: scale(var(--tg-desktop-miniapp-icon-scale)) !important;
  -webkit-transform: scale(var(--tg-desktop-miniapp-icon-scale)) !important;
  transform-origin: center center !important;
}


/*
  v13 — Telegram Desktop MiniApp: legacy compact/zoom mode is disabled at the source.

  JavaScript no longer adds tg-desktop-miniapp-compact, therefore historical rules from style.css
  (zoom:0.5, width:200%, scale(2)) do not participate in layout at all. This file keeps only the
  real 1:1 viewport geometry and the separate 120% icon treatment from v12.
*/
html.tg-desktop-miniapp #appContainer{
  transform: none !important;
  -webkit-transform: none !important;
}

/*
  v14 — Telegram Desktop MiniApp: compensate only Telegram Desktop host page zoom.

  Telegram Desktop Chromium opens this MiniApp visually about one browser zoom step larger (~110%).
  The legacy JUKEBOX compact mode remains disabled. We only apply the inverse 1/1.1 layout zoom to
  #appContainer so the resulting page is visually 100%, while the v12 icon-only 120% rules remain
  independent and continue to affect only icon graphics.

  Geometry is expanded by the same 1.1 factor before the inverse zoom, so the visual width/height
  remain equal to the MiniApp viewport and the player is not clipped at the bottom.
*/
html.tg-desktop-miniapp{
  --tg-desktop-host-zoom-compensation: 0.9090909091;
  --site-max-width: 550px !important;
  --site-width: min(550px, calc(110vw - 26.4px)) !important;
  --site-visual-width: min(550px, calc(110vw - 26.4px)) !important;
}

html.tg-desktop-miniapp #appContainer{
  zoom: var(--tg-desktop-host-zoom-compensation) !important;
  transform: none !important;
  -webkit-transform: none !important;
  width: var(--site-visual-width) !important;
  max-width: var(--site-max-width) !important;
  height: 110dvh !important;
  min-height: 110dvh !important;
  max-height: 110dvh !important;
  transform-origin: top center !important;
  overflow: visible !important;
}

/* Keep the closed Content List visually 12px from the MiniApp bottom after host-zoom compensation. */
html.tg-desktop-miniapp{
  --tg-desktop-miniapp-edge-gap-layout: 13.2px;
}