/* =============================================================================
   ВИД ВНУТРИ TELEGRAM MINI APP.

   Класс in-telegram ставит tg.js — только когда приложение действительно
   запущено из Телеграма. В обычном браузере ни одно правило отсюда не работает.

   Палитра НЕ наследуется от Телеграма: тема остаётся своя.
   ============================================================================= */

:root {
  --tg-top: 0px;      /* безопасные зоны, их присылает Телеграм */
  --tg-bottom: 0px;
}

/* Своя верхняя панель не нужна: сверху уже системная шапка Телеграма. */
body.in-telegram .topbar { display: none; }

/* Разделы сайта поднимаются на освободившееся место, но не под системную шапку. */
body.in-telegram .chat-section,
body.in-telegram #officeView .chat-section {
  padding-top: calc(var(--tg-top) + 16px);
}
body.in-telegram #officeView .auth-card {
  min-height: calc(100vh - var(--tg-top) - var(--tg-bottom) - 40px);
  padding-top: calc(var(--tg-top) + 16px);
}

/* ---------- Super Business ---------- */
/* Панель по умолчанию скрыта на любой ширине: окно Телеграма узкое. */
body.in-telegram .sb { grid-template-columns: 1fr; }
body.in-telegram .sb-side {
  position: absolute; inset: 0 auto 0 0; width: min(288px, 84vw); z-index: 20;
  transform: translateX(-100%);
  transition: transform .28s cubic-bezier(.2,0,0,1);
  padding-top: var(--tg-top);
}
body.in-telegram .sb.side-open .sb-side { transform: none; box-shadow: 0 0 60px rgba(0,0,0,.7); }
body.in-telegram .sb-scrim {
  display: block; z-index: 15; background: rgba(0,0,0,.55);
  opacity: 0; pointer-events: none; transition: opacity .28s;
}
body.in-telegram .sb.side-open .sb-scrim { opacity: 1; pointer-events: auto; }
body.in-telegram .sb-burger { display: flex; }

/* Своя кнопка «назад» скрыта — её заменяет системная BackButton. */
body.in-telegram .sb-back { display: none; }

/* Окно Телеграма узкое при любой ширине экрана: полоса участников
   прокручивается горизонтально, а не выдавливает заголовок. */
body.in-telegram .sb-crew { max-width: 42%; min-width: 0; }
body.in-telegram .sb-stack {
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
body.in-telegram .sb-stack::-webkit-scrollbar { width: 0; height: 0; }
body.in-telegram .sb-tip { display: none; }
body.in-telegram .sb-count { display: none; }

/* Шапка комнаты уходит из-под системной шапки Телеграма. */
body.in-telegram .sb-head { padding-top: calc(var(--tg-top) + 12px); }
body.in-telegram .sb-floor { padding-top: calc(var(--tg-top) + 96px); }
body.in-telegram .sb-home,
body.in-telegram .sb-guest { padding-top: calc(var(--tg-top) + 96px); }
body.in-telegram .sb-verdict { top: calc(var(--tg-top) + 86px); }

/* Поле ввода не залезает под системную панель снизу. */
body.in-telegram .sb-bar {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--tg-bottom) + 12px);
}
body.in-telegram .sb-user {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--tg-bottom) + 12px);
}

/* Навигация по разделам живёт в боковой панели — в Телеграме она
   единственный способ перейти, поэтому раскрыта сразу. */
body.in-telegram .sb-nav { display: block; }
body.in-telegram .sb-brand .sb-chev { display: none; }

/* Заглушка вместо оплаты: платежи будут через СБП. */
.pay-soon {
  margin-top: 10px; padding: 12px 14px; border-radius: 12px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  font-size: 13px; line-height: 19px; color: #8B90A8; text-align: center;
}
body.view-office .pay-soon,
body.view-support .pay-soon {
  background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.10); color: #6f6d66;
}