/* Keep the document inside the visual viewport without disabling deliberate pinch zoom. */
html {
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  overscroll-behavior-x: none;
}

/* The market picker owns its nested vertical scroller. `touch-action: none`
   on the body stops iOS Telegram from ever handing the gesture to that
   descendant, even when the descendant itself declares `pan-y`. Keep the
   document locked with overflow while allowing the intended one-finger pan,
   and reserve the fixed bottom navigation's complete footprint. */
body.is-terminal-market-picker-open {
  --ff-picker-viewport-height: var(
    --ff-app-viewport-height,
    var(--ff-runtime-viewport-height, var(--tg-viewport-stable-height, 100dvh))
  );
  --ff-picker-safe-bottom: max(
    env(safe-area-inset-bottom, 0px),
    var(--tg-safe-area-inset-bottom, 0px),
    var(--tg-content-safe-area-inset-bottom, 0px),
    var(--ff-runtime-safe-bottom, 0px)
  );
  --ff-picker-nav-clearance: var(
    --ff-bottom-nav-clearance,
    calc(var(--ff-picker-safe-bottom) + 84px)
  );
  overflow: hidden !important;
  touch-action: pan-y !important;
}

body.is-terminal-market-picker-open
  .view-section[data-view="terminal"].is-market-picker-open
  .terminal-grid {
  height: calc(var(--ff-picker-viewport-height) - var(--ff-picker-nav-clearance)) !important;
  min-height: 0 !important;
  max-height: calc(var(--ff-picker-viewport-height) - var(--ff-picker-nav-clearance)) !important;
  padding-bottom: 0 !important;
}

body.is-terminal-market-picker-open
  .view-section[data-view="terminal"].is-market-picker-open
  .asset-section-list {
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  scroll-padding-bottom: 16px;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Preserve the existing brand faces for Latin glyphs while using a native
   Devanagari face for Hindi text instead of an arbitrary sans-serif fallback. */
html[lang^="hi"] body {
  --font-devanagari: "Noto Sans Devanagari", "Nirmala UI", "Kohinoor Devanagari", Mangal, sans-serif;
  --font-body: "Friday Roboto", "FF Roboto", Roboto, var(--font-devanagari);
  --font-display: "Friday Alumni Sans", "FF Alumni", var(--font-devanagari);
  --font-cyrillic-display: "Friday Alumni Sans", "FF Alumni", var(--font-devanagari);
  --font-ui: "Friday Roboto", "FF Roboto", Roboto, var(--font-devanagari);
  --ff-nonbrand-heading: "Friday Inter", Inter, var(--font-devanagari);
  font-family: var(--font-body) !important;
}

/* Dynamic offer cards re-render in place; do not let scroll anchoring move the page. */
[data-configurator] {
  overflow-anchor: none;
}

a[href],
button,
summary,
[role="button"],
input:not([type="range"]),
select,
textarea {
  touch-action: manipulation;
}

/* iOS zooms the whole page when a focused text control renders below 16px. */
@media (max-width: 820px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select,
  textarea,
  [contenteditable="true"] {
    font-size: 16px !important;
  }

  .view-section[data-view="terminal"] #terminalAccountSelect {
    font-size: 16px !important;
  }
}

@media (min-width: 821px) {
  html {
    scrollbar-gutter: stable;
  }
}

/* Touch reliability: passive UI layers must never intercept the next action. */
.toast-stack,
.toast {
  pointer-events: none !important;
}

.language-switch:not([open]) > .language-switch-menu {
  display: none !important;
  pointer-events: none !important;
}

.language-switch[open] > .language-switch-menu {
  pointer-events: auto;
}

.view-section[data-view="terminal"] .asset-category-tabs {
  overscroll-behavior-inline: contain;
  touch-action: pan-x pan-y;
}

/* Keep the glyph compact while giving small help controls a 44px hit target. */
.view-section[data-view="home"] .hero-stats .stat-info-button,
.view-section[data-view="terminal"] .terminal-field-help-button,
.view-section[data-view="terminal"] .terminal-price-info-button,
body:not(.backtest-mode) .view-section[data-view="accounts"] .account-ledger-open {
  overflow: visible !important;
}

.view-section[data-view="terminal"] .terminal-field-help-button,
body:not(.backtest-mode) .view-section[data-view="accounts"] .account-ledger-open {
  position: relative !important;
}

.view-section[data-view="home"] .hero-stats .stat-info-button::after,
.view-section[data-view="terminal"] .terminal-field-help-button::after,
.view-section[data-view="terminal"] .terminal-price-info-button::after,
body:not(.backtest-mode) .view-section[data-view="accounts"] .account-ledger-open::after {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  content: "";
  transform: translate(-50%, -50%);
}

@media (hover: none), (pointer: coarse) {
  .button:hover,
  .segment:hover,
  .toggle-button:hover,
  .nav-button:hover,
  .icon-button:hover,
  .home-utility-button:hover,
  .asset-select-card:hover,
  .asset-category-tab:hover,
  #purchaseModal.purchase-checkout-modal .modal-actions .purchase-cta-continue:hover:not(:disabled) {
    transform: none !important;
  }

  .view-section[data-view="terminal"] .terminal-account-switch {
    position: relative !important;
  }

  .view-section[data-view="terminal"] #terminalAccountSelect {
    grid-column: 2 / 4 !important;
    grid-row: 1 !important;
    height: 38px !important;
    min-height: 38px !important;
    align-self: center !important;
  }

  .view-section[data-view="terminal"] .terminal-account-switch::after {
    position: relative !important;
    z-index: 2 !important;
    pointer-events: none !important;
  }
}