:root {
  --tg-top-inset: env(safe-area-inset-top, 0px);
  --app-top-safe-inset: max(var(--tg-top-inset, 0px), env(safe-area-inset-top, 0px));
  --app-keyboard-inset: 0px;
  --app-visual-viewport-top: 0px;
  --chat-vvh: 100dvh;
  --chat-shell-height: 100dvh;
  --chat-shell-stable-height: 100dvh;
  --chat-shell-header-height: 126px;
  --chat-keyboard-offset: 0px;
  --chat-keyboard-content-gap: 0px;
  --chat-keyboard-overlay-inset: 0px;
  --chat-composer-raise: 0px;
  --chat-safe-bottom-active: env(safe-area-inset-bottom, 0px);
  --chat-composer-bottom-gap: calc(12px + env(safe-area-inset-bottom, 0px));
  --chat-composer-browser-gap: 0px;
  --chat-composer-bottom-offset: calc(var(--chat-composer-bottom-gap) + var(--chat-composer-browser-gap));
  --chat-composer-rest-gap: calc(10px + env(safe-area-inset-bottom, 0px));
  --chat-composer-keyboard-gap: 8px;
  --chat-composer-thread-gap: 18px;
  --chat-composer-visible-gap: 18px;
  --chat-shell-content-max-width: 560px;
  --chat-shell-edge-gutter: 16px;
  --chat-composer-height: 56px;
  --chat-composer-zone-height: 56px;
  --chat-thread-bottom-reserve: 74px;
}

body.tg-fullscreen {
  --app-telegram-fullscreen-header-inset: clamp(52px, calc(var(--app-top-safe-inset, 0px) - 29px), 60px);
}

html,
body,
* {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

/* Profile */
#profile,
#profile-transactions {
  position: relative;
}

#welcome .top-bar,
#shop .top-bar,
#chat_history .top-bar,
#profile .top-bar,
#profile-transactions .top-bar,
#notification-section .top-bar,
#guide-section .top-bar,
#help-section .top-bar,
#chat .top-bar {
  padding: calc(8px + max(var(--tg-top-inset, 0px), env(safe-area-inset-top, 0px))) 16px 8px;
  margin: 0 -16px;
  background: rgba(18, 20, 27, calc(0.9 * var(--section-topbar-alpha, 0)));
  border-bottom: 1px solid rgba(255, 255, 255, calc(0.035 * var(--section-topbar-alpha, 0)));
  backdrop-filter: blur(calc(14px * var(--section-topbar-alpha, 0)));
  -webkit-backdrop-filter: blur(calc(14px * var(--section-topbar-alpha, 0)));
  box-shadow: 0 10px 24px rgba(0, 0, 0, calc(0.14 * var(--section-topbar-alpha, 0)));
  transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, backdrop-filter 0.22s ease;
}

body.tg-fullscreen #welcome .top-bar,
body.tg-fullscreen #shop .top-bar,
body.tg-fullscreen #chat_history .top-bar,
body.tg-fullscreen #profile .top-bar,
body.tg-fullscreen #profile-transactions .top-bar,
body.tg-fullscreen #notification-section .top-bar,
body.tg-fullscreen #guide-section .top-bar,
body.tg-fullscreen #help-section .top-bar,
body.tg-fullscreen #feedback-section .top-bar,
body.tg-fullscreen #admin .top-bar,
body.tg-fullscreen #chat .top-bar {
  padding-top: calc(8px + var(--app-telegram-fullscreen-header-inset, var(--tg-top-inset, 0px)));
}

/* Chat headers reserve Telegram/browser top inset on .chat-head-wrap.
   Keep the inner toolbar compact so the inset is not counted twice. */
body.tg-fullscreen #chat .chat-head-wrap > .top-bar,
body.tg-fullscreen #support-chat-section .chat-head-wrap > .top-bar,
body.tg-webapp #chat .chat-head-wrap > .top-bar,
body.tg-webapp #support-chat-section .chat-head-wrap > .top-bar {
  padding-top: 8px;
}

#help-section {
  position: relative;
}

/* Shared app motion: hide staged nodes only after SectionMotion.init() sets html.app-motion-sections-armed (avoids long blank SSR shell while scripts download). */
html.app-motion-js.app-motion-sections-armed body:not(.login-only) .app-motion-section.motion-enabled.active:not(.is-ready) [data-motion-role='text'] {
  opacity: 0;
  transform: translateY(12px) scale(0.985);
}

html.app-motion-js.app-motion-sections-armed body:not(.login-only) .app-motion-section.motion-enabled.active:not(.is-ready) [data-motion-role='panel'] {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(10px);
}

html.app-motion-js.app-motion-sections-armed body:not(.login-only) .app-motion-section.motion-enabled.active:not(.is-ready) [data-motion-role='row'] {
  opacity: 0;
  transform: translateY(13px);
}

html.app-motion-js.app-motion-sections-armed body:not(.login-only) .app-motion-section.motion-enabled.active:not(.is-ready) [data-motion-role='message'] {
  opacity: 0;
  transform: translateY(10px);
}

html.app-motion-js.app-motion-sections-armed body:not(.login-only) .app-motion-section.motion-enabled.active:not(.is-ready) [data-motion-role='control'] {
  opacity: 0;
  transform: translateY(9px) scale(0.988);
}

html.app-motion-js.app-motion-sections-armed body:not(.login-only) .app-motion-section.motion-enabled.active:not(.is-ready) [data-motion-fixed='true'] {
  opacity: 0;
  transform: var(--app-motion-fixed-transform, translateX(-50%));
  filter: none;
}

.app-motion-section.motion-enabled .app-motion-item {
  --app-motion-y: 12px;
  --app-motion-scale: 1;
  --app-motion-blur: 0px;
  --app-motion-duration: var(--motion-base);
  --app-motion-easing: var(--motion-ease-soft);
  opacity: 0;
  transform: translateY(var(--app-motion-y)) scale(var(--app-motion-scale));
  filter: blur(var(--app-motion-blur));
  transition:
    opacity var(--app-motion-duration) var(--app-motion-easing),
    transform var(--app-motion-duration) var(--app-motion-easing),
    filter var(--app-motion-duration) var(--app-motion-easing);
  transition-delay: var(--motion-item-delay, 0ms);
  pointer-events: none;
  will-change: transform, opacity, filter;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}

.app-motion-section.motion-enabled .app-motion-item[data-motion-fixed='true'] {
  transform: var(--app-motion-fixed-transform, translateX(-50%));
  filter: none;
  transition:
    opacity var(--app-motion-duration) var(--app-motion-easing),
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
  will-change: opacity, transform;
}

.app-motion-section.motion-enabled .app-motion-item.is-visible,
.app-motion-section.motion-enabled .app-motion-item.is-inview {
  opacity: 1;
  transform: none;
  filter: none;
  pointer-events: auto;
}

.app-motion-section.motion-enabled .app-motion-item[data-motion-fixed='true'].is-visible,
.app-motion-section.motion-enabled .app-motion-item[data-motion-fixed='true'].is-inview {
  opacity: 1;
  transform: var(--app-motion-fixed-transform, translateX(-50%));
  filter: none;
  pointer-events: auto;
}

.app-motion-section.motion-enabled .help-contact-card.app-motion-item.is-visible:hover,
.app-motion-section.motion-enabled .help-contact-card.app-motion-item.is-inview:hover,
.app-motion-section.motion-enabled .help-feedback-card.app-motion-item.is-visible:hover,
.app-motion-section.motion-enabled .help-feedback-card.app-motion-item.is-inview:hover {
  transform: scale(0.99);
  color: #f4f6ff;
  text-decoration: none;
}

.app-motion-section.motion-enabled .help-contact-card.app-motion-item.is-visible:active,
.app-motion-section.motion-enabled .help-contact-card.app-motion-item.is-inview:active,
.app-motion-section.motion-enabled .help-feedback-card.app-motion-item.is-visible:active,
.app-motion-section.motion-enabled .help-feedback-card.app-motion-item.is-inview:active {
  transform: scale(0.97);
  color: #f4f6ff;
  text-decoration: none;
}

.app-motion-section.motion-enabled[data-motion-variant='full'] [data-motion-role='text'] {
  --app-motion-y: 12px;
  --app-motion-scale: 0.985;
  --app-motion-duration: var(--motion-base);
  --app-motion-easing: var(--motion-ease-enter);
}

.app-motion-section.motion-enabled[data-motion-variant='full'] [data-motion-role='panel'] {
  --app-motion-y: 18px;
  --app-motion-blur: 10px;
  --app-motion-duration: var(--motion-base);
}

.app-motion-section.motion-enabled[data-motion-variant='full'] [data-motion-role='row'] {
  --app-motion-y: 13px;
  --app-motion-duration: var(--motion-base);
}

.app-motion-section.motion-enabled[data-motion-variant='full'] [data-motion-role='message'] {
  --app-motion-y: 10px;
  --app-motion-duration: var(--motion-base);
}

.app-motion-section.motion-enabled[data-motion-variant='full'] [data-motion-role='control'] {
  --app-motion-y: 9px;
  --app-motion-scale: 0.988;
  --app-motion-duration: var(--motion-base);
  --app-motion-easing: var(--motion-ease-enter);
}

.app-motion-section.motion-enabled[data-motion-variant='fast'] [data-motion-role='text'] {
  --app-motion-y: 8px;
  --app-motion-scale: 0.996;
  --app-motion-duration: var(--motion-fast);
  --app-motion-easing: var(--motion-ease-enter);
}

.app-motion-section.motion-enabled[data-motion-variant='fast'] [data-motion-role='panel'] {
  --app-motion-y: 12px;
  --app-motion-duration: var(--motion-fast);
}

.app-motion-section.motion-enabled[data-motion-variant='fast'] [data-motion-role='row'] {
  --app-motion-y: 10px;
  --app-motion-duration: var(--motion-fast);
}

.app-motion-section.motion-enabled[data-motion-variant='fast'] [data-motion-role='message'] {
  --app-motion-y: 8px;
  --app-motion-duration: var(--motion-fast);
}

.app-motion-section.motion-enabled[data-motion-variant='fast'] [data-motion-role='control'] {
  --app-motion-y: 8px;
  --app-motion-duration: var(--motion-fast);
  --app-motion-easing: var(--motion-ease-enter);
}

@media (prefers-reduced-motion: reduce) {
  html.app-motion-js.app-motion-sections-armed body:not(.login-only) .app-motion-section.motion-enabled.active:not(.is-ready) [data-motion-role] {
    opacity: 1;
    transform: none;
    filter: none;
  }

  html.app-motion-js.app-motion-sections-armed body:not(.login-only) .app-motion-section.motion-enabled.active:not(.is-ready) [data-motion-fixed='true'] {
    transform: var(--app-motion-fixed-transform, translateX(-50%));
  }

  .app-motion-section.motion-enabled .app-motion-item {
    opacity: 1;
    transform: none;
    filter: none;
    transition: opacity var(--motion-fast) linear !important;
    transition-delay: 0ms !important;
    pointer-events: auto;
  }

  .app-motion-section.motion-enabled .app-motion-item[data-motion-fixed='true'] {
    transform: var(--app-motion-fixed-transform, translateX(-50%));
  }
}