/* All transient UI uses the space BELOW the complete header, including the
   Telegram safe area. Loaded after page styles so pages cannot forget this rule. */
body {
  --product-overlay-top: calc(var(--app-header-height, 62px) + 12px);
  --product-overlay-bottom: max(12px, calc(var(--telegram-safe-bottom, env(safe-area-inset-bottom, 0px)) + var(--telegram-content-bottom, 0px) + 12px));
  --product-overlay-height: max(0px, calc(100dvh - var(--product-overlay-top) - var(--product-overlay-bottom)));
}
.product-overlay-metrics {
  position: fixed; width: 0; height: 0; visibility: hidden; pointer-events: none;
  padding-top: var(--telegram-webview-top-inset, 0px);
  padding-bottom: calc(var(--telegram-safe-bottom, env(safe-area-inset-bottom, 0px)) + var(--telegram-content-bottom, 0px));
  padding-left: var(--telegram-safe-left, env(safe-area-inset-left, 0px));
  padding-right: var(--telegram-safe-right, env(safe-area-inset-right, 0px));
}
body .product-floating-surface {
  box-sizing: border-box;
  translate: var(--product-overlay-shift-x, 0px) var(--product-overlay-shift-y, 0px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
body .event-output-schema-popover.product-floating-surface { overflow: visible; }
body .event-output-schema-popover > .event-output-schema-content { max-height: inherit; }
body.flow-product #flowNotices {
  top: var(--product-overlay-top);
  bottom: auto;
  max-height: min(520px, var(--product-overlay-height));
}
body :is(.modal-overlay, .link-modal-backdrop, .media-overlay, .user-profile-overlay,
    [data-product-overlay="dialog"]) {
  top: var(--product-overlay-top);
  bottom: var(--product-overlay-bottom);
  box-sizing: border-box;
  padding: 12px;
  overflow: hidden;
}
body :is(.modal-overlay, .link-modal-backdrop, .media-overlay, .user-profile-overlay,
    [data-product-overlay="dialog"]) > :is(.modal-card, .link-modal, .user-profile-modal, img, video, [role="dialog"]) {
  box-sizing: border-box;
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}
body :is(.user-drawer, .user-drawer-backdrop) {
  top: var(--product-overlay-top);
  bottom: var(--product-overlay-bottom);
  height: auto;
  max-height: var(--product-overlay-height);
  box-sizing: border-box;
}
body .telegram-profile-loading.is-active { top: var(--product-overlay-top); }
body #flowStartup:not([data-state="loading"]):not([data-state="leaving"]) {
  padding-top: calc(var(--product-overlay-top) + 12px);
  padding-bottom: calc(var(--product-overlay-bottom) + 12px);
}
/* Pointer gestures are owned by the editor, including surfaces outside the
   canvas. One-finger scrolling is handled by the same editor gesture session. */
body.flow-product,
body.flow-product :is(.product-floating-surface, .modal-overlay, .modal-card,
    .link-modal-backdrop, .link-modal, .sidebar-scroll, .leftbar-scroll,
    .leftbar-panel-scroll, .block-context-combobox-popup, .ac-dropdown) {
  touch-action: none;
}