fix: iOS PWA status bar overlap issue on mobile devices

- Add PWA detection logic to App.jsx
- Apply dynamic padding to header and sidebar in PWA mode
- Update viewport meta tag for better iOS compatibility
- Change status bar style to black-translucent for PWA
- Add CSS variables for safe area insets with fallback support

This ensures menu button and sidebar content are properly visible
below the iOS status bar when installed as a PWA.

src/index.css

@@ -43,6 +43,22 @@
     --input: 214.3 31.8% 91.4%;
     --ring: 221.2 83.2% 53.3%;
     --radius: 0.5rem;
+    
+    /* Safe area CSS variables */
+    --safe-area-inset-top: env(safe-area-inset-top);
+    --safe-area-inset-right: env(safe-area-inset-right);
+    --safe-area-inset-bottom: env(safe-area-inset-bottom);
+    --safe-area-inset-left: env(safe-area-inset-left);
+  }
+  
+  /* Fallback for older iOS versions */
+  @supports (padding-top: constant(safe-area-inset-top)) {
+    :root {
+      --safe-area-inset-top: constant(safe-area-inset-top);
+      --safe-area-inset-right: constant(safe-area-inset-right);
+      --safe-area-inset-bottom: constant(safe-area-inset-bottom);
+      --safe-area-inset-left: constant(safe-area-inset-left);
+    }
   }
 
   .dark {
@@ -82,12 +98,46 @@
     padding: 0;
   }
 
-  html, body, #root {
+  html, body {
     height: 100%;
     margin: 0;
     padding: 0;
   }
   
+  /* Root element with safe area padding for PWA */
+  #root {
+    min-height: 100vh;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+  
+  /* Apply safe area padding in standalone mode */
+  @supports (padding-top: env(safe-area-inset-top)) {
+    @media (display-mode: standalone) {
+      #root {
+        padding-top: var(--safe-area-inset-top);
+        padding-left: var(--safe-area-inset-left);
+        padding-right: var(--safe-area-inset-right);
+      }
+    }
+  }
+  
+  /* PWA mode detected by JavaScript - more reliable */
+  body.pwa-mode #root {
+    padding-top: calc(env(safe-area-inset-top, 0px) + 20px);
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
+  }
+  
+  /* iOS specific PWA adjustments */
+  @supports (-webkit-touch-callout: none) {
+    body.pwa-mode #root {
+      /* iOS status bar is typically 20-44px */
+      padding-top: max(env(safe-area-inset-top, 44px), 44px);
+    }
+  }
+  
   /* Global transition defaults */
   button, 
   a, 
@@ -577,6 +627,17 @@
     padding-bottom: max(env(safe-area-inset-bottom), 12px);
   }
   
+  /* PWA specific header adjustments for iOS */
+  .pwa-header-safe {
+    padding-top: 16px;
+  }
+  
+  /* When PWA mode is detected by JavaScript */
+  body.pwa-mode .pwa-header-safe {
+    /* Reset padding since #root already handles safe area */
+    padding-top: 12px;
+  }
+  
   @media screen and (max-width: 768px) {
     .chat-input-mobile {
       padding-bottom: calc(60px + max(env(safe-area-inset-bottom), 12px));