fix(css): fill mobile safe-area zones with background color

Use fixed ::before and ::after pseudo-elements to render the
background color in safe-area inset zones, preventing transparent
gaps on notched mobile devices while maintaining body padding for
content flow.

src/index.css

@@ -134,6 +134,26 @@ html.mobile {
   --safe-bottom: env(safe-area-inset-bottom, 0px);
 }
 
+html.mobile body::before,
+html.mobile body::after {
+  content: "";
+  position: fixed;
+  left: 0;
+  right: 0;
+  z-index: 9999;
+  background: var(--background);
+}
+
+html.mobile body::before {
+  top: 0;
+  height: var(--safe-top);
+}
+
+html.mobile body::after {
+  bottom: 0;
+  height: var(--safe-bottom);
+}
+
 html.mobile body {
   padding-top: var(--safe-top);
   padding-bottom: var(--safe-bottom);