fix: bottom nav overlap and safe area handling in referral network

- Raise portal z-index to z-50 so it covers MobileBottomNav
- Use TG SDK bottom safe area (JS) via CSS variable instead of unreliable env()
- Fix TicketNotificationBell regression: conditional inline style for fullscreen only
- Add bottom safe area padding to detail panel scroll areas

src/hooks/useHeaderHeight.ts

@@ -6,8 +6,14 @@ import { UI } from '@/config/constants';
  * Telegram MiniApp safe area insets in fullscreen mode.
  *
  * Desktop: 56px (h-14). Mobile: 64px (h-16) + safe area + TG header when fullscreen.
+ * bottomSafeArea: TG SDK bottom inset (home indicator etc.), 0 outside TG.
  */
-export function useHeaderHeight(): { mobile: number; desktop: number } {
+export function useHeaderHeight(): {
+  mobile: number;
+  desktop: number;
+  bottomSafeArea: number;
+  isMobileFullscreen: boolean;
+} {
   const { isFullscreen, safeAreaInset, contentSafeAreaInset, platform, isMobile } =
     useTelegramSDK();
   const isMobileFullscreen = isFullscreen && isMobile;
@@ -21,5 +27,9 @@ export function useHeaderHeight(): { mobile: number; desktop: number } {
       telegramHeaderHeight
     : UI.MOBILE_HEADER_HEIGHT_PX;
 
-  return { mobile, desktop: UI.DESKTOP_HEADER_HEIGHT_PX };
+  const bottomSafeArea = isMobileFullscreen
+    ? Math.max(safeAreaInset.bottom, contentSafeAreaInset.bottom)
+    : 0;
+
+  return { mobile, desktop: UI.DESKTOP_HEADER_HEIGHT_PX, bottomSafeArea, isMobileFullscreen };
 }