/* Onflow Ads — Telegram Mini App layer (CSS).
 *
 * Loaded on every page, but active ONLY under `html.tg-mini` — a class that
 * tg-webapp.js adds when the page is actually running inside Telegram. In a
 * normal browser none of these rules apply, so the public website is unchanged.
 *
 * Goal: when the bot opens a website page as a Web App, it should feel like a
 * native Telegram Mini App — not "the website in a frame". We strip the
 * marketing shell, fit the Telegram viewport + safe areas, and let the hardware
 * Back button replace in-page back links.
 */

/* Fit the Telegram viewport exactly (tg-webapp.js keeps --tg-vh in sync). */
html.tg-mini,
html.tg-mini body {
  min-height: var(--tg-vh, 100vh);
}

html.tg-mini body {
  overflow-x: hidden;                         /* never a horizontal scrollbar in-app */
  overscroll-behavior-y: contain;             /* stop the page rubber-banding the app closed */
  -webkit-overflow-scrolling: touch;
  /* Respect the notch / Telegram's bottom bar. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Strip the marketing shell — a Mini App has no site nav/footer/marketing panel
 * of its own. Covers all three page families:
 *   - marketing pages: an inline-styled fixed <nav> straight in the body
 *   - every page: the global header main.js injects as <header class="nav" id="nav">
 *   - auth pages (signup/signin): the brand marketing aside (.auth__aside)
 *   - the site footer (in-body or injected)                                    */
html.tg-mini header.nav,
html.tg-mini #nav,
html.tg-mini body > nav,
html.tg-mini body > header,
html.tg-mini header.site-header,
html.tg-mini .site-header,
html.tg-mini .auth__aside,
html.tg-mini body > footer,
html.tg-mini footer.footer,
html.tg-mini .site-footer,
html.tg-mini [data-tg-hide] {
  display: none !important;
}

/* The native Back button replaces every in-page "← Back" / "Back to home". */
html.tg-mini .dash-back,
html.tg-mini .auth__back,
html.tg-mini .tg-hide-in-app {
  display: none !important;
}

/* With the nav gone, drop the top offset pages reserve for the fixed header and
 * let the content column use the full width. */
html.tg-mini body { padding-top: 0 !important; }
html.tg-mini .auth,
html.tg-mini .auth__main { width: 100% !important; min-height: 0 !important; }
html.tg-mini .auth { display: block !important; }

/* Late-mounting widgets that don't belong inside Telegram: cookie/consent
 * banners and the support chat bubble. */
html.tg-mini .crisp-client,
html.tg-mini #crisp-chatbox,
html.tg-mini [class*="consent"],
html.tg-mini [id*="consent"],
html.tg-mini [class*="cookie-banner"],
html.tg-mini [id*="cookie-banner"] {
  display: none !important;
}

/* A comfortable top inset now that the fixed site nav is gone, honouring the
 * device safe area. Applied to the usual page wrappers only, so content isn't
 * jammed against the Telegram header. */
html.tg-mini main,
html.tg-mini .page,
html.tg-mini .dash-wrap,
html.tg-mini .container {
  padding-top: max(env(safe-area-inset-top, 0px), 12px);
}

/* Slightly roomier primary tap targets for touch. */
html.tg-mini .btn {
  min-height: 44px;
}

/* iOS (Safari and Telegram's webview alike) auto-zooms the page when a focused
 * field's font is under 16px — jarring inside a Mini App, where pinch-zoom-out
 * isn't always possible. Hold every field at 16px minimum while in-app. */
html.tg-mini input,
html.tg-mini select,
html.tg-mini textarea {
  font-size: max(16px, 1em);
}

/* Show elements meant only for the in-app view (opt-in with .tg-only-in-app). */
.tg-only-in-app { display: none; }
html.tg-mini .tg-only-in-app { display: revert; }