diff --git a/lib/public/css/base.css b/lib/public/css/base.css
index 1c0180a7..29e90a35 100644
--- a/lib/public/css/base.css
+++ b/lib/public/css/base.css
@@ -285,3 +285,21 @@ html, body {
   color: var(--text);
 }
 
+/* Mobile (lr-2fdd): bottom:80px occludes the bottom-nav / input box / content
+   on narrow viewports (iOS screenshot showed the toast covering content just
+   above the Projects/Chat/Team/More nav). Top-anchor instead — per Andy's
+   steer ("should top align more than bottom align") — clearing the notch /
+   status bar via the safe-area inset. Desktop placement is unchanged. */
+@media (max-width: 768px) {
+  .toast,
+  .sw-update-banner {
+    top: calc(var(--safe-top) + 12px);
+    bottom: auto;
+    transform: translateX(-50%) translateY(-8px);
+  }
+  .toast.visible,
+  .sw-update-banner.visible {
+    transform: translateX(-50%) translateY(0);
+  }
+}
+
diff --git a/lib/public/css/diagnostics.css b/lib/public/css/diagnostics.css
index e6a6f0bb..8ecc0a54 100644
--- a/lib/public/css/diagnostics.css
+++ b/lib/public/css/diagnostics.css
@@ -264,6 +264,14 @@
     right: 16px;
     transform: translateY(8px);
     max-width: none;
+    /* lr-2fdd: bottom:80px (inherited from base .toast) occludes the
+       bottom-nav / input box / content on mobile (iOS screenshot showed
+       the PREFLIGHT WARNING toast covering the UPCOMING card just above
+       the Projects/Chat/Team/More nav). Top-anchor instead, matching the
+       base .toast / .sw-update-banner mobile fix so the whole toast
+       family lands the same way. */
+    top: calc(var(--safe-top) + 12px);
+    bottom: auto;
   }
   .toast-diagnostic.visible {
     transform: translateY(0);