/*
  ФАЙЛ: style.css
  Назначение: базовые глобальные стили страницы и общая геометрия приложения.
  Что редактируется в этом файле:
  - html, body и глобальные CSS-переменные
  - общая ширина страницы, контейнер и сетка: .container, .header
  - базовые отступы, safe-area, скролл, preload-состояние и запрет выделения текста
  - общие цвета страницы и служебные состояния для светлой и тёмной темы
  - фундаментальные размеры и переменные, от которых зависят остальные CSS-файлы
  Примечание: сюда вносить только общесистемные стили, не локальные стили отдельных модулей.
*/

html.preload *, html.preload *::before, html.preload *::after{
  transition: none !important;
  animation: none !important;
}

html[data-theme="dark"] body{
  background-color: #1e1f23;
  color: #f1f1f1;
}

body{
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f6f9;
  color: #222;
  --page-top-offset: calc(env(safe-area-inset-top, 0px) + 36px);
  --tracks-top: 12px;
  --tracks-side: 12px;
  --tracks-bottom: 12px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --tracks-open-ms: 320ms;
  --tracks-close-ms: 190ms;
  --tracks-bounce: cubic-bezier(0.20, 1.25, 0.30, 1);
  --tracks-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --tracks-btn-h: 50px;
  --tracks-search-h: 56px;
  --tracks-gap: 6px;
  --tracks-panel-in: 18px;
  --tracks-drag-dy: 0px;
  --tracks-drag-opacity: 1;
  --tracks-closed-y: calc((100dvh - var(--tracks-top) - var(--tracks-bottom) - var(--safe-b)) - var(--tracks-btn-h));
  --tracks-ty: var(--tracks-closed-y);
  --tracks-item-in-y: 16px;
  --tracks-item-in-scale: 0.985;
  --tracks-item-ms: 420ms;
  --tracks-item-opacity-ms: 220ms;
}

.container{
  max-width: 500px;
  margin: 0 auto;
  padding: 12px;
  padding-top: var(--page-top-offset);
  display: flex;
  flex-direction: column;
  padding-bottom: calc(12px + var(--tracks-btn-h) + 12px + var(--safe-b));
}

.header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

html, body{
  -webkit-touch-callout: none;
}

body.dark{
  background-color: #1e1f23;
  color: #f1f1f1;
}

.header{
  margin-bottom: 50px !important;
}

html, body{
  scrollbar-gutter: auto;
}

.no-select, .no-select *{
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
}

html, body{
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

html{
  overflow-y: auto;
}

body, .container, .header{
  box-sizing: border-box;
}

html{
  overflow-y: auto;
}

.container{
  width: min(500px, calc(100vw - 24px));
  max-width: 500px;
  box-sizing: border-box;
}

:root{
  --site-side-gap: 12px;
  --site-max-width: 500px;
  --site-width: min(var(--site-max-width), calc(100vw - (var(--site-side-gap) * 2)));
}

.container{
  width: var(--site-width) !important;
  max-width: var(--site-max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--site-side-gap) !important;
  padding-right: var(--site-side-gap) !important;
  box-sizing: border-box !important;
}

:root{
  --site-side-gap: 12px;
  --site-max-width: 500px;
  --site-visual-width: min(var(--site-max-width), calc(100vw - (var(--site-side-gap) * 2)));
}

.container{
  width: var(--site-visual-width) !important;
  max-width: var(--site-max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

.header{
  width: var(--site-visual-width) !important;
  max-width: var(--site-max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

html{
  scrollbar-gutter: auto;
}

body, .container, .header{
  box-sizing: border-box;
}

body, textarea{
  font-family: Arial, sans-serif !important;
}

html, body, textarea{
  font-family: Arial, sans-serif !important;
}




/* keep wallet connect button label visually unscaled like in desktop browser */
html.tg-desktop-miniapp.tg-desktop-miniapp-compact #walletConnectBtn,
html.tg-desktop-miniapp.tg-desktop-miniapp-compact .wallet-col-left #walletConnectBtn.wallet-btn{
  transform: scale(2) !important;
  transform-origin: left center !important;
  width: 70% !important;
  min-width: 70% !important;
  max-width: 70% !important;
  will-change: transform !important;
}

/* keep the left wallet column stable after inverse button scale */
html.tg-desktop-miniapp.tg-desktop-miniapp-compact .wallet-col-left{
  overflow: visible !important;
}

html.tg-desktop-miniapp body.wallet-modal-open,
html.tg-desktop-miniapp body.tracks-open,
html.tg-desktop-miniapp body.playlists-open{
  overflow: hidden !important;
  overflow: clip !important;
}



/* v137.53.97 Telegram Desktop Mini App compact 70 via appContainer + no internal scroll */
html.tg-desktop-miniapp,
html.tg-desktop-miniapp body{
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-width: 100vw !important;
  min-height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  margin: 0 !important;
  overflow: hidden !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  overflow: clip !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,
html.tg-desktop-miniapp .container::-webkit-scrollbar{
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

html.tg-desktop-miniapp #appContainer,
html.tg-desktop-miniapp .container{
  overflow: visible !important;
  max-height: none !important;
}

html.tg-desktop-miniapp.tg-desktop-miniapp-compact #appContainer{
  transform: scale(0.5) !important;
  transform-origin: top center !important;
  will-change: transform !important;
}

/* wallet button label should stay visually desktop-sized */
html.tg-desktop-miniapp.tg-desktop-miniapp-compact #walletConnectBtn,
html.tg-desktop-miniapp.tg-desktop-miniapp-compact .wallet-col-left #walletConnectBtn.wallet-btn{
  transform: scale(2) !important;
  transform-origin: left center !important;
}

/* compensate button inverse scale in layout */
html.tg-desktop-miniapp.tg-desktop-miniapp-compact .wallet-col-left{
  overflow: visible !important;
}

html.tg-desktop-miniapp body.wallet-modal-open,
html.tg-desktop-miniapp body.tracks-open,
html.tg-desktop-miniapp body.playlists-open{
  overflow: hidden !important;
  overflow: clip !important;
}



/* v137.53.100 Telegram Desktop Mini App: use layout zoom instead of transform to avoid internal scroll */
html.tg-desktop-miniapp,
html.tg-desktop-miniapp body{
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-width: 100vw !important;
  min-height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  margin: 0 !important;
  overflow: hidden !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  overflow: clip !important;
  overscroll-behavior: none !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,
html.tg-desktop-miniapp .container::-webkit-scrollbar{
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* kill old transform-based compact mode */
html.tg-desktop-miniapp.tg-desktop-miniapp-compact #appContainer{
  transform: none !important;
  width: 200% !important;
  min-width: 200% !important;
  max-width: 200% !important;
  min-height: 200vh !important;
  zoom: 0.5 !important;
  transform-origin: top center !important;
  overflow: visible !important;
}


/* keep container itself from producing a second scrollbar */
html.tg-desktop-miniapp #appContainer,
html.tg-desktop-miniapp .container{
  overflow: visible !important;
  max-height: none !important;
}


/* v137.53.271 mobile sheet pull-to-refresh guard */
html.tracks-open,
body.tracks-open,
html.tracks-closing,
body.tracks-closing,
html.favorites-open,
body.favorites-open,
html.favorites-closing,
body.favorites-closing,
html.history-open,
body.history-open,
html.history-closing,
body.history-closing{
  overflow: hidden !important;
  overscroll-behavior: none !important;
  overscroll-behavior-y: none !important;
}

#tracksPanel,
#tracks,
#favoritesPanel,
#favoritesList,
#historyPanel,
#historyList,
.history-list{
  overscroll-behavior: contain !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch;
}


/* v22.18 DESKTOP SCROLLBAR WITHOUT RESERVED SIDE GUTTERS
   Do not reserve left/right scrollbar strips. Center desktop layout against 100vw so a
   real scrollbar appearing after zoom/reload does not nudge the interface. */
@media (min-width: 769px){
  html, body{
    scrollbar-gutter: auto !important;
    overflow-x: hidden !important;
  }
  html{
    overflow-y: auto !important;
  }
  body{
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
  }
}