/* Hide Telegram-only elements by default on standard web browsers */
#tg-safe-area-logo,
.cart-link.tg-floating-cart {
  display: none !important;
}

html.tg-webapp-mobile {
  height: 100%;
  overflow: hidden;

  /* Собственная шапка мини-аппа: 44px под логотип. */
  --tg-app-header-height: 44px;

  /* Полоса сверху, которую нельзя занимать контентом:
       --safe-top       челка / вырез устройства
       --tg-chrome-top  интерфейс Telegram — крестик и «⋮»

     Значения СКЛАДЫВАЮТСЯ, а не берутся по максимуму: content safe area —
     подмножество device safe area, оно отсчитывается от верха контентной
     области (то есть уже под вырезом), а не от края экрана. В типах Bot API
     это видно по формулировкам: у safeAreaInset — «space to avoid at the top
     of the screen», у contentSafeAreaInset — «at the top of the content area».

     Во fullscreen Telegram рисует крестик и «⋮» поверх страницы, и единственный
     источник их размера — событие content_safe_area_changed; env(safe-area-*)
     внутри мини-аппа не работает вовсе. Обе переменные ведёт SDK и обновляет на
     лету, поэтому пересчёт из JS не нужен. */
  --tg-shell-header-height: calc(
    var(--safe-top) + var(--tg-chrome-top) + var(--tg-app-header-height)
  );

  /* То же снизу: домашний индикатор устройства плюс нижняя панель Telegram,
     если она есть в текущем режиме. */
  --tg-safe-bottom: calc(var(--safe-bottom) + var(--tg-chrome-bottom));
}

html.tg-webapp-mobile body {
  min-height: 100vh;
  min-height: 100dvh;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  display: flex;
  flex-direction: column;
  background: var(--bg-page);
}


html.tg-webapp-mobile body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--tg-shell-header-height);
  background: var(--bg-page);
  z-index: 1001;
  pointer-events: none;
}

html.tg-webapp-mobile body::after {
  display: none;
}

html.tg-webapp-mobile .page-header {
  display: none !important;
}


/* Логотип живёт в собственной шапке — сразу под вырезом устройства и под
   кнопками Telegram, а не с отрицательным сдвигом от общей высоты полосы. */
html.tg-webapp-mobile #tg-safe-area-logo {
  display: flex !important;
  position: fixed;
  top: calc(var(--safe-top) + var(--tg-chrome-top));
  height: var(--tg-app-header-height);
  align-items: center;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1003;
  pointer-events: auto;
}

html.tg-webapp-mobile #tg-safe-area-logo .logo-wrapper {
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

html.tg-webapp-mobile #tg-safe-area-logo .logo-wrapper img {
  width: auto;
  height: 38px;
}


html.tg-webapp-mobile .cart-link.tg-floating-cart {
  display: flex !important;
  position: fixed;
  top: calc(var(--tg-shell-header-height) + 8px);
  right: max(14px, var(--safe-right));
  z-index: 1006;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 8px 20px rgba(12, 15, 20, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    opacity var(--motion-base, 220ms) var(--motion-ease, ease),
    visibility var(--motion-base, 220ms) var(--motion-ease, ease),
    transform var(--motion-base, 220ms) var(--motion-ease, ease);
}

html.tg-webapp-mobile .cart-link.tg-floating-cart .cart-link__img {
  width: 24px;
  height: 24px;
}

html.tg-webapp-mobile .cart-link.tg-floating-cart .cart-count {
  display: inline-flex !important;
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  border: 2px solid #fff;
}


html.tg-webapp-mobile .page {
  height: 100%;
  height: 100dvh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding-top: var(--tg-shell-header-height);
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scroll-behavior: smooth;
  position: relative;
  z-index: 1002;
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}

html.tg-webapp-mobile .page-main {
  flex: 1;
  overflow: visible;
  padding-top: 0;
  background: #ffffff;
}

html.tg-webapp-mobile .page-main-inner {
  padding-top: 20px;
}


html.tg-webapp-mobile .mobile-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1004;
  background: var(--glass-bg, rgba(255, 255, 255, 0.86));
  backdrop-filter: blur(var(--glass-blur, 14px));
  -webkit-backdrop-filter: blur(var(--glass-blur, 14px));
  border-top: 1px solid var(--glass-border, rgba(12, 15, 20, 0.08));
  padding-bottom: var(--tg-safe-bottom);
  /*
   * Высоту пересчитываем вместе с отступом. В базовом правиле она равна
   * nav-height + --safe-bottom, а здесь отступ снизу становится больше на
   * величину собственной нижней области Telegram. Без этой строки коробка меню
   * не растёт, зато внутренний отступ съедает место под иконками, и всё, что
   * отсчитывается от низа экрана, встаёт не туда.
   */
  height: calc(var(--nav-height, 60px) + var(--tg-safe-bottom));
}


html.tg-webapp-mobile .page-footer {
  position: static !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  margin-top: auto;
  padding-top: 20px;
  padding-left: max(20px, var(--safe-left));
  padding-right: max(20px, var(--safe-right));
  
  padding-bottom: calc(var(--nav-height, 60px) + 24px + var(--tg-safe-bottom));
}

html.tg-webapp-mobile .page-footer-inner {
  align-items: flex-start;
  gap: 10px 16px;
}

html.tg-webapp-mobile .page-footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  line-height: 1.35;
}


/* Высоту шторок задаёт сам SDK: --tg-viewport-stable-height — это высота
   видимой области в последнем устойчивом состоянии, она не дёргается во время
   разворачивания мини-аппы и жестов. Запасной 100dvh — для обычного браузера,
   где переменной нет вовсе.

   Оболочку страницы (html/body/.page) это не затрагивает намеренно: её высоту
   задаёт html{height:100%}, а .page — flex-элемент с flex:1, так что свойство
   height у него не участвует в расчёте вообще. Перевести и оболочку можно, но
   это правка геометрии витрины, которую тестировщик уже проверял, — отдельным
   шагом и с проверкой на устройстве. */
html.tg-webapp-mobile .cart-modal-overlay {
  position: fixed;
  inset: 0;
  height: var(--tg-viewport-stable-height, 100dvh);
  z-index: 2000; 
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

html.tg-webapp-mobile .cart-modal {
  width: 100%;
  max-width: 520px;
  max-height: 85dvh;
  margin-bottom: 0;
  padding-bottom: max(18px, var(--tg-safe-bottom));
  border-radius: 20px 20px 0 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
}


html.tg-webapp-mobile .cart-modal::before {
  content: "";
  display: block;
  width: 36px;
  height: 4px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  margin: 8px auto 4px;
  flex-shrink: 0;
}

html.tg-webapp-mobile .cart-toast-container {
  bottom: calc(var(--nav-height, 60px) + 18px + var(--tg-safe-bottom));
  z-index: 9999;
}



/* ------------------------------------------------------------------ */
/* Баланс NICS COIN в мини-аппе. Обычная шапка здесь спрятана, поэтому  */
/* плашка становится плавающей — зеркально плавающей корзине: корзина   */
/* справа, баланс слева, на одной высоте.                               */
/* По умолчанию скрыта, как и остальные элементы «только для Telegram». */
/* ------------------------------------------------------------------ */
.coin-chip.tg-floating-coin {
  display: none !important;
}

html.tg-webapp-mobile .coin-chip.tg-floating-coin {
  display: inline-flex !important;
  position: fixed;
  top: calc(var(--tg-shell-header-height) + 8px);
  left: max(14px, var(--safe-left));
  z-index: 1006;
  height: 40px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 20px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
}

html.tg-webapp-mobile .coin-chip.tg-floating-coin i {
  font-size: 16px;
}

/* ------------------------------------------------------------------ */
/* Плавающий ряд плашек мини-аппы: баланс и город. Обычная шапка здесь  */
/* спрятана, поэтому оба ответа переезжают в фиксированный ряд слева —  */
/* зеркально плавающей корзине справа, на одной с ней высоте.           */
/* ------------------------------------------------------------------ */
.tg-floating-chips {
  display: none;
}

html.tg-webapp-mobile .tg-floating-chips {
  display: flex;
  /* Колонка, а не строка. В строку баланс и город вместе не помещаются между
     краем экрана и логотипом по центру: на 375px там всего около 130px, и
     название города приходилось бы обрезать до «Мос…». Друг под другом обе
     плашки читаются целиком и по-прежнему не задевают ни логотип, ни корзину. */
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  position: fixed;
  top: calc(var(--tg-shell-header-height) + 8px);
  left: max(14px, var(--safe-left));
  z-index: 1006;
  /* Ширину ограничивает половина экрана: дальше начинается логотип. */
  max-width: calc(50vw - 24px);
  /* Плашки перекрывают витрину, но не должны перехватывать по ней касания:
     кликабельны только они сами. */
  pointer-events: none;
}

html.tg-webapp-mobile .tg-floating-chips > * {
  pointer-events: auto;
  max-width: 100%;
}

.city-chip.tg-floating-city {
  display: none !important;
}

html.tg-webapp-mobile .city-chip.tg-floating-city {
  display: inline-flex !important;
  height: 40px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 20px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
  /* Длинное название города сжимается, а не выталкивает баланс за экран. */
  min-width: 0;
}

html.tg-webapp-mobile .city-chip.tg-floating-city .city-chip__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.tg-webapp-mobile .city-chip.tg-floating-city i {
  font-size: 15px;
  flex: 0 0 auto;
}

/* Внутри ряда плашка баланса уже не позиционируется сама — за положение
   отвечает контейнер, иначе обе висели бы в одной точке. */
html.tg-webapp-mobile .tg-floating-chips .coin-chip.tg-floating-coin {
  position: static;
  top: auto;
  left: auto;
  flex: 0 0 auto;
}
/* ------------------------------------------------------------------ */
/* Мини-аппа на компьютере: Telegram рисует свои кнопки окна поверх    */
/* страницы. Место под них резервируем у полосы действий, а не у всей  */
/* шапки — иначе отступ съедал ширину поиска на каждой странице.       */
/* ------------------------------------------------------------------ */
html.tg-webapp:not(.tg-webapp-mobile) .header-inner {
  padding-right: 20px;
}

html.tg-webapp:not(.tg-webapp-mobile) .header-actions {
  margin-right: 116px;
}

/* ------------------------------------------------------------------ */
/* Мини-аппа: баланс в шапке вместо плавающей плашки.                  */
/*                                                                     */
/* Плавающие баланс и город висели поверх страницы на каждой вкладке и */
/* закрывали содержимое. Всё, что всегда сверху и никогда не уезжает,  */
/* мешает ровно тем, что не уезжает. Теперь баланс стоит в шапке       */
/* приложения рядом с логотипом и ведёт себя как её часть.             */
/* ------------------------------------------------------------------ */
.coin-chip.tg-header-coin,
.city-chip.tg-floating-city {
  display: none !important;
}

html.tg-webapp-mobile #tg-safe-area-logo {
  gap: 10px;
  justify-content: center;
}

html.tg-webapp-mobile .coin-chip.tg-header-coin {
  display: inline-flex !important;
  position: static;
  height: 30px;
  padding: 0 11px;
  border-radius: 15px;
  font-size: 13px;
  box-shadow: none;
}

html.tg-webapp-mobile .coin-chip.tg-header-coin i {
  font-size: 15px;
}

/* Город на телефоне не показываем совсем: он справочный, отгрузка всё
   равно одна, а место в узкой полосе дороже этой подписи. */
html.tg-webapp-mobile .city-chip {
  display: none !important;
}

/* ------------------------------------------------------------------ */
/* Шапка мини-аппы: логотип слева, баланс и корзина справа.            */
/*                                                                     */
/* Над содержимым страницы больше не висит ничего. Плавающие элементы  */
/* мешали ровно тем, что не уезжали при прокрутке: корзина накрывала   */
/* правый верхний угол карточки профиля вместе с шестерёнкой настроек. */
/* ------------------------------------------------------------------ */
html.tg-webapp-mobile #tg-safe-area-logo {
  left: 0;
  right: 0;
  transform: none;
  width: 100%;
  box-sizing: border-box;
  padding: 0 max(12px, var(--safe-right)) 0 max(12px, var(--safe-left));
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--bg-page, #f2f2f4);
}

html.tg-webapp-mobile .tg-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.cart-link.tg-header-cart {
  display: none !important;
}

/* position: relative, а не static — иначе счётчик уезжает за экран.
   Счётчик внутри кнопки лежит absolute и цепляется за ближайшего
   позиционированного предка. При static им становился не сам значок корзины, а
   шапка целиком: счётчик улетал в её правый верхний угол, где на 375px его
   срезало и сверху (top −5px), и справа (right 380px при ширине окна 375).
   Замерено в браузере — с relative он встаёт на своё место: top 0, right 367. */
html.tg-webapp-mobile .cart-link.tg-header-cart {
  display: inline-flex !important;
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 12px;
}

html.tg-webapp-mobile .cart-link.tg-header-cart .cart-link__img {
  width: 20px;
  height: 20px;
}