fix: stabilize mini app login and safe area

src/GmRelay.Web/wwwroot/app.css

@@ -1,5 +1,5 @@
 /* ============================================
-   GM-Relay Design System v1.9.2
+   GM-Relay Design System v1.9.3
    Dark RPG Dashboard Theme
    ============================================ */
 
@@ -69,6 +69,21 @@
 
     /* Sidebar */
     --sidebar-width: 260px;
+
+    /* Telegram Mini App safe areas */
+    --gm-tg-safe-top: var(--tg-safe-area-inset-top, env(safe-area-inset-top, 0px));
+    --gm-tg-safe-right: var(--tg-safe-area-inset-right, env(safe-area-inset-right, 0px));
+    --gm-tg-safe-bottom: var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
+    --gm-tg-safe-left: var(--tg-safe-area-inset-left, env(safe-area-inset-left, 0px));
+    --gm-tg-content-safe-top: var(--tg-content-safe-area-inset-top, 0px);
+    --gm-tg-content-safe-right: var(--tg-content-safe-area-inset-right, 0px);
+    --gm-tg-content-safe-bottom: var(--tg-content-safe-area-inset-bottom, 0px);
+    --gm-tg-content-safe-left: var(--tg-content-safe-area-inset-left, 0px);
+    --gm-mini-app-top-inset: calc(var(--gm-tg-safe-top, 0px) + var(--gm-tg-content-safe-top, 0px));
+    --gm-mini-app-bottom-inset: calc(var(--gm-tg-safe-bottom, 0px) + var(--gm-tg-content-safe-bottom, 0px));
+    --gm-mini-app-left-inset: calc(var(--gm-tg-safe-left, 0px) + var(--gm-tg-content-safe-left, 0px));
+    --gm-mini-app-right-inset: calc(var(--gm-tg-safe-right, 0px) + var(--gm-tg-content-safe-right, 0px));
+    --gm-tg-viewport-height: 100dvh;
 }
 
 /* === Reset & Base === */
@@ -845,6 +860,7 @@ select option {
 /* === Telegram Mini App entry === */
 .mini-app-page {
     min-height: 100vh;
+    min-height: var(--gm-tg-viewport-height, 100dvh);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -882,6 +898,21 @@ select option {
     max-width: 720px;
 }
 
+body.telegram-mini-app {
+    min-height: var(--gm-tg-viewport-height, 100dvh);
+}
+
+body.telegram-mini-app .mini-app-page {
+    padding-top: calc(1rem + var(--gm-mini-app-top-inset, 0px));
+    padding-right: calc(1rem + var(--gm-mini-app-right-inset, 0px));
+    padding-bottom: calc(1rem + var(--gm-mini-app-bottom-inset, 0px));
+    padding-left: calc(1rem + var(--gm-mini-app-left-inset, 0px));
+}
+
+body.telegram-mini-app .content {
+    padding-bottom: calc(1.5rem + var(--gm-mini-app-bottom-inset, 0px));
+}
+
 /* === Mobile Sessions Cards (instead of table) === */
 .session-card-mobile {
     display: none;
@@ -970,12 +1001,24 @@ select option {
 
     .telegram-mini-app .content {
         padding: 0.75rem;
+        padding-bottom: calc(0.75rem + var(--gm-mini-app-bottom-inset, 0px));
     }
 
     .telegram-mini-app .page-container {
         padding: 0.75rem;
     }
 
+    body.telegram-mini-app .nav-header {
+        padding-top: calc(1.25rem + var(--gm-mini-app-top-inset, 0px));
+        padding-left: calc(1rem + var(--gm-mini-app-left-inset, 0px));
+        padding-right: calc(0.75rem + var(--gm-mini-app-right-inset, 0px));
+    }
+
+    body.telegram-mini-app .nav-toggle {
+        top: calc(0.75rem + var(--gm-mini-app-top-inset, 0px));
+        left: calc(0.75rem + var(--gm-mini-app-left-inset, 0px));
+    }
+
     h2 {
         font-size: 1.25rem;
     }