/* Isolated native Telegram fullscreen overrides. Ordinary web stays unchanged. */
html.crm-tg-native-fullscreen #root {
  min-height: var(--tg-viewport-stable-height, 100dvh);
  padding-top: var(--crm-tg-safe-top, 0px);
  /* Use the exact same horizontal gradient for the status-bar safe area
     and the CRM hero. A diagonal gradient paints each element differently
     because their heights differ, leaving a visible seam on iPhone. */
  background:
    linear-gradient(90deg, #2f95ff 0%, #7a42f4 58%, #31c9e8 100%)
      top left / 100% var(--crm-tg-safe-top, 0px) no-repeat,
    #fff;
}

html.crm-tg-native-fullscreen .hero {
  background: linear-gradient(90deg, #2f95ff 0%, #7a42f4 58%, #31c9e8 100%);
}

html.crm-tg-native-fullscreen .app,
html.crm-tg-native-fullscreen .screen {
  min-height: calc(var(--tg-viewport-stable-height, 100dvh) - var(--crm-tg-safe-top, 0px));
}

html.crm-tg-native-fullscreen .bottomNav {
  height: calc(82px + var(--crm-tg-safe-bottom, 0px));
  padding-bottom: var(--crm-tg-safe-bottom, 0px);
}

html.crm-tg-native-fullscreen .floatingButton {
  bottom: calc(96px + var(--crm-tg-safe-bottom, 0px));
}