/* Preserve browser layout without a Telegram context. */
:root {
  --app-safe-top: env(safe-area-inset-top,0px);
  --app-safe-right: env(safe-area-inset-right,0px);
  --app-safe-bottom: env(safe-area-inset-bottom,0px);
  --app-safe-left: env(safe-area-inset-left,0px);
  --app-viewport-height: 100dvh;
}
/* Conservative overlapping-inset policy: reserve the largest reported edge. */
:root.is-telegram {
  --app-safe-top: max(env(safe-area-inset-top,0px),var(--tg-safe-area-inset-top,0px),var(--tg-content-safe-area-inset-top,0px));
  --app-safe-right: max(env(safe-area-inset-right,0px),var(--tg-safe-area-inset-right,0px),var(--tg-content-safe-area-inset-right,0px));
  --app-safe-bottom: max(env(safe-area-inset-bottom,0px),var(--tg-safe-area-inset-bottom,0px),var(--tg-content-safe-area-inset-bottom,0px));
  --app-safe-left: max(env(safe-area-inset-left,0px),var(--tg-safe-area-inset-left,0px),var(--tg-content-safe-area-inset-left,0px));
  --app-viewport-height: min(100dvh,var(--tg-viewport-stable-height,100dvh));
}
.app-shell {
  height: var(--app-viewport-height);
  padding: max(.75rem,var(--app-safe-top)) max(1rem,var(--app-safe-right)) max(1.1rem,var(--app-safe-bottom)) max(1rem,var(--app-safe-left));
}
.app-shell.has-global-nav { height: calc(var(--app-viewport-height) - 4.5rem - var(--app-safe-bottom)); }
.app-nav {
  /* In partially expanded clients, the visible Telegram viewport can be shorter than the WebView. */
  bottom: max(0px,calc(100dvh - var(--app-viewport-height)));
  padding: .5rem max(.55rem,var(--app-safe-right)) max(.48rem,var(--app-safe-bottom)) max(.55rem,var(--app-safe-left));
}
.sticky-action { padding-bottom: max(.15rem,var(--app-safe-bottom)); }
.guide-dialog {
  top: var(--app-safe-top);
  bottom: calc(100dvh - var(--app-viewport-height) + var(--app-safe-bottom));
  left: var(--app-safe-left);
  right: var(--app-safe-right);
  width: min(32rem,calc(100% - 1.5rem - var(--app-safe-left) - var(--app-safe-right)));
  max-height: calc(var(--app-viewport-height) - 2rem - var(--app-safe-top) - var(--app-safe-bottom));
}
.privacy-notice {
  bottom: max(0px,calc(100dvh - var(--app-viewport-height)));
  padding: max(1rem,var(--app-safe-top)) max(1rem,var(--app-safe-right)) max(1rem,var(--app-safe-bottom)) max(1rem,var(--app-safe-left));
  overflow-y: auto;
}
.privacy-notice>div { max-height: 100%; overflow-y: auto; }
.toast { bottom: calc(5.4rem + var(--app-safe-bottom) + 100dvh - var(--app-viewport-height)); }
.app-shell:not(.has-global-nav)~.toast { bottom: calc(1.1rem + var(--app-safe-bottom) + 100dvh - var(--app-viewport-height)); }
@media (max-width: 25rem) {
  .app-shell { padding-left: max(.75rem,var(--app-safe-left)); padding-right: max(.75rem,var(--app-safe-right)); }
}
@media (min-width: 52rem) {
  .app-shell { height: calc(var(--app-viewport-height) - 4rem); }
  .app-shell.has-global-nav { height: calc(var(--app-viewport-height) - 8.6rem - var(--app-safe-bottom)); }
  .app-nav { bottom: calc(2rem + 100dvh - var(--app-viewport-height)); }
  .toast { bottom: calc(7.4rem + var(--app-safe-bottom) + 100dvh - var(--app-viewport-height)); }
  .app-shell:not(.has-global-nav)~.toast { bottom: calc(3.1rem + var(--app-safe-bottom) + 100dvh - var(--app-viewport-height)); }
}