diff --git a/packages/ui/src/styles/mobile.css b/packages/ui/src/styles/mobile.css
index d8b380c0..9a5eb3bd 100644
--- a/packages/ui/src/styles/mobile.css
+++ b/packages/ui/src/styles/mobile.css
@@ -389,7 +389,9 @@
 }
 
 @media (display-mode: standalone) {
-  /* Home indicator overlay */
+  /* Home indicator overlay — a slim gradient that blends the bottom edge
+     into the background. Height is kept small (max 8px) so the composer
+     padding above it does not create a thick visual "chin". */
   :root.device-mobile:not(.desktop-runtime) body::after,
   :root.device-tablet:not(.desktop-runtime) body::after,
   :root.mobile-pointer:not(.desktop-runtime) body::after {
@@ -398,13 +400,11 @@
     bottom: 0;
     left: 0;
     right: 0;
-    height: var(--oc-safe-area-bottom-visual, var(--oc-safe-area-bottom, env(safe-area-inset-bottom, 0)));
+    height: clamp(4px, calc(var(--oc-safe-area-bottom, env(safe-area-inset-bottom, 0)) * 0.25), 8px);
     background: linear-gradient(
       to top,
       var(--background) 0%,
-      var(--background) 30%,
-      rgba(from var(--background) r g b / 0.8) 60%,
-      rgba(from var(--background) r g b / 0.3) 85%,
+      var(--background) 40%,
       transparent 100%
     );
     z-index: 1000;
@@ -419,21 +419,7 @@
       background: linear-gradient(
         to top,
         var(--background) 0%,
-        var(--background) 30%,
-        rgba(21, 19, 19, 0.8) 60%,  /* Dark theme fallback */
-        rgba(21, 19, 19, 0.3) 85%,
-        transparent 100%
-      );
-    }
-
-    /* Light theme fallback */
-    :root body::after {
-      background: linear-gradient(
-        to top,
-        var(--background) 0%,
-        var(--background) 30%,
-        rgba(248, 247, 243, 0.8) 60%,  /* Light theme fallback */
-        rgba(248, 247, 243, 0.3) 85%,
+        var(--background) 40%,
         transparent 100%
       );
     }
@@ -716,7 +702,7 @@
   }
 
   :root:not(.oc-capacitor-app):not(.oc-browser-keyboard-open) .oc-mobile-composer {
-    padding-bottom: calc(0.75rem + var(--oc-safe-area-bottom-visual, 0px)) !important;
+    padding-bottom: calc(0.75rem + max(16px, var(--oc-safe-area-bottom, env(safe-area-inset-bottom, 0px)))) !important;
   }
 
   /* Fullscreen composer: ChatInput pins the form to the visual viewport from