/* =========================================================
   PR⭕️—вес — Telegram fullscreen layer v2.11.26

   Fullscreen is a layout capability, not a redesign.
   The home-reference coordinate system and hero geometry remain unchanged.
   Safe-area spacing is applied outside that coordinate system.
   ========================================================= */

:root {
  --proves-viewport-height: var(--tg-viewport-height, 100dvh);
  --proves-viewport-stable-height: var(--tg-viewport-stable-height, 100dvh);

  --proves-tg-safe-top: var(--tg-safe-area-inset-top, 0px);
  --proves-tg-safe-right: var(--tg-safe-area-inset-right, 0px);
  --proves-tg-safe-bottom: var(--tg-safe-area-inset-bottom, 0px);
  --proves-tg-safe-left: var(--tg-safe-area-inset-left, 0px);

  --proves-tg-content-safe-top: var(--tg-content-safe-area-inset-top, 0px);
  --proves-tg-content-safe-right: var(--tg-content-safe-area-inset-right, 0px);
  --proves-tg-content-safe-bottom: var(--tg-content-safe-area-inset-bottom, 0px);
  --proves-tg-content-safe-left: var(--tg-content-safe-area-inset-left, 0px);

  /* System safe area and Telegram content safe area may overlap.
     Use the larger inset per edge; never add them together. */
  --proves-safe-top: max(
    var(--proves-tg-safe-top),
    var(--proves-tg-content-safe-top),
    env(safe-area-inset-top, 0px)
  );
  --proves-safe-right: max(
    var(--proves-tg-safe-right),
    var(--proves-tg-content-safe-right),
    env(safe-area-inset-right, 0px)
  );
  --proves-safe-bottom: max(
    var(--proves-tg-safe-bottom),
    var(--proves-tg-content-safe-bottom),
    env(safe-area-inset-bottom, 0px)
  );
  --proves-safe-left: max(
    var(--proves-tg-safe-left),
    var(--proves-tg-content-safe-left),
    env(safe-area-inset-left, 0px)
  );
}

html,
body,
#root {
  min-height: var(--proves-viewport-stable-height);
}

body {
  min-height: var(--proves-viewport-stable-height);
}

.app {
  min-height: var(--proves-viewport-stable-height);
}

/* Safe-area padding is outside .home-reference-wrap, so the reference image,
   hero and all absolute hotspots preserve their shared coordinate system. */
.content {
  padding-top: var(--proves-safe-top);
  padding-right: calc(12px + var(--proves-safe-right));
  padding-bottom: calc(
    var(--nav-height) +
    var(--proves-safe-bottom) +
    14px
  );
  padding-left: calc(12px + var(--proves-safe-left));
}

.bottom-nav {
  left: var(--proves-safe-left);
  right: var(--proves-safe-right);
  bottom: 0;
  width: auto;
  max-width: var(--content-max);
  margin-right: auto;
  margin-left: auto;
  transform: none;
  min-height: calc(
    var(--nav-height) +
    var(--proves-safe-bottom)
  );
  padding-bottom: calc(7px + var(--proves-safe-bottom));
}

/* Keep dialogs inside the current Telegram viewport, including notches and
   Telegram's own fullscreen controls. */
.modal-backdrop {
  padding-top: calc(18px + var(--proves-safe-top));
  padding-right: calc(18px + var(--proves-safe-right));
  padding-bottom: calc(18px + var(--proves-safe-bottom));
  padding-left: calc(18px + var(--proves-safe-left));
}

.modal {
  max-height: calc(
    var(--proves-viewport-height) -
    var(--proves-safe-top) -
    var(--proves-safe-bottom) -
    36px
  );
}

.standalone {
  min-height: var(--proves-viewport-stable-height);
  padding-top: calc(36px + var(--proves-safe-top));
  padding-right: calc(10px + var(--proves-safe-right));
  padding-bottom: calc(36px + var(--proves-safe-bottom));
  padding-left: calc(10px + var(--proves-safe-left));
}

/* Runtime-patch overlays and embedded browser are part of the deployed app.
   Replace their 100dvh assumptions without altering their internal UI. */
.proves-internal-overlay,
.proves-internal-browser-overlay {
  min-height: var(--proves-viewport-stable-height);
}

.proves-overlay-shell {
  min-height: var(--proves-viewport-stable-height);
  padding-bottom: calc(24px + var(--proves-safe-bottom));
}

.proves-overlay-header {
  padding-top: calc(6px + var(--proves-safe-top));
  padding-right: calc(8px + var(--proves-safe-right));
  padding-left: calc(8px + var(--proves-safe-left));
}

.proves-browser-shell {
  min-height: var(--proves-viewport-stable-height);
  height: var(--proves-viewport-stable-height);
  padding-right: var(--proves-safe-right);
  padding-bottom: var(--proves-safe-bottom);
  padding-left: var(--proves-safe-left);
}

/* Keep fixed layers stable while Telegram is animating the viewport. */
html.proves-telegram-fullscreen,
html.proves-telegram-fullscreen body,
html.proves-telegram-fullscreen #root {
  min-height: var(--proves-viewport-stable-height);
}