/* Shared Mini App viewport geometry. Telegram exposes its stable viewport and
   content-safe insets as CSS variables; the runtime values cover older clients. */
:root {
  --ff-app-viewport-height: var(--ff-runtime-viewport-height, var(--tg-viewport-stable-height, 100dvh));
  --ff-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-bottom-nav-offset: 7px;
  --ff-bottom-nav-height: 58px;
  --ff-bottom-nav-content-gap: 19px;
  --ff-bottom-nav-bottom: calc(var(--ff-safe-bottom) + var(--ff-bottom-nav-offset));
  --ff-bottom-nav-clearance: calc(
    var(--ff-bottom-nav-bottom) + var(--ff-bottom-nav-height) + var(--ff-bottom-nav-content-gap)
  );
  --ff-execution-dock-height: 58px;
  --ff-execution-dock-nav-overlap: 2px;
  --ff-execution-dock-content-gap: 53px;
  --ff-execution-dock-bottom: calc(
    var(--ff-bottom-nav-bottom) + var(--ff-bottom-nav-height) - var(--ff-execution-dock-nav-overlap)
  );
  --ff-execution-dock-clearance: calc(
    var(--ff-execution-dock-bottom) + var(--ff-execution-dock-height) + var(--ff-execution-dock-content-gap)
  );
  --ff-execution-dock-stack-height: calc(
    var(--ff-bottom-nav-offset) + var(--ff-bottom-nav-height) - var(--ff-execution-dock-nav-overlap) +
      var(--ff-execution-dock-height) + 1px
  );
}

/* 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;
}

html.miniapp-dashboard,
html.miniapp-dashboard body {
  scroll-padding-bottom: var(--ff-bottom-nav-clearance);
}

html.miniapp-dashboard.terminal-execution-dock-visible,
html.miniapp-dashboard.terminal-execution-dock-visible body {
  scroll-padding-bottom: var(--ff-execution-dock-clearance);
}

/* 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;
}

@media (max-width: 768px) {
  /* Telegram Mini Apps must keep the document as the vertical scroll owner.
     Older terminal layout rules can otherwise leave the active screen sized
     to the viewport while overflow is clipped by a nested shell. */
  html.miniapp-dashboard:not(.modal-open):not(.terminal-market-picker-open) {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: clip !important;
    overflow-y: auto !important;
    touch-action: pan-y !important;
  }

  html.miniapp-dashboard body:not(.modal-open):not(.is-terminal-market-picker-open) {
    position: relative !important;
    height: auto !important;
    min-height: 100% !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
    touch-action: pan-y !important;
  }

  html.miniapp-dashboard body:not(.modal-open):not(.is-terminal-market-picker-open) .app-shell,
  html.miniapp-dashboard body:not(.modal-open):not(.is-terminal-market-picker-open) .content-shell,
  html.miniapp-dashboard body:not(.modal-open):not(.is-terminal-market-picker-open) .app-main {
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow: visible !important;
    touch-action: pan-y !important;
  }

  html.miniapp-dashboard body:not(.modal-open):not(.is-terminal-market-picker-open)
    .view-section[data-view="terminal"].is-active {
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow: visible !important;
    touch-action: pan-y !important;
  }

  html.miniapp-dashboard .view-section[data-view="terminal"].is-active {
    min-height: 100vh !important;
    min-height: var(--ff-app-viewport-height) !important;
  }

  /* Chart canvases capture touch gestures by default. Keep horizontal chart
     interactions, but hand vertical drags back to the app-shell scroller. */
  html.miniapp-dashboard .view-section[data-view="terminal"].is-active:not(.is-market-picker-open) .chart-container {
    touch-action: pan-y !important;
    overscroll-behavior-y: auto !important;
  }

  html.miniapp-dashboard body:not(.is-terminal-market-picker-open) .app-shell {
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: auto !important;
  }

  html.miniapp-dashboard .view-section[data-view="terminal"] .terminal-history-panel {
    scroll-margin-top: 42px;
  }

  html.miniapp-dashboard .view-section[data-view="terminal"].is-trade-history .terminal-history-panel {
    scroll-margin-top: 8px;
  }
}

/* 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;
  }
}