diff --git a/web/src/components/Layout.tsx b/web/src/components/Layout.tsx
index 5a205bf..a8ab584 100644
--- a/web/src/components/Layout.tsx
+++ b/web/src/components/Layout.tsx
@@ -87,7 +87,7 @@ export function Layout() {
     return null;
   }
   return (
-    <div className="h-full w-full bg-gb-bg text-gb-fg font-mono flex flex-col p-1 md:p-2">
+    <div className="h-full w-full bg-gb-bg text-gb-fg font-mono flex flex-col" style={{ padding: 'max(env(safe-area-inset-top), 0.5rem) max(env(safe-area-inset-right), 0.5rem) max(env(safe-area-inset-bottom), 0.5rem) max(env(safe-area-inset-left), 0.5rem)' }}>
       <div className="flex-1 terminal-border bg-gb-bg-h flex flex-col min-h-0">
         {/* Top bar */}
         <div className="flex items-center justify-between px-2 md:px-3 py-1 border-b border-gb-bg-t bg-gb-bg-s gap-2">
diff --git a/web/src/styles/index.css b/web/src/styles/index.css
index 507145b..a8141e6 100644
--- a/web/src/styles/index.css
+++ b/web/src/styles/index.css
@@ -44,6 +44,8 @@
     line-height: 1.4;
   }
 
+  /* ponytail: safe-area env() can't go in @apply, handle in Layout.tsx inline styles */
+
   * {
     box-sizing: border-box;
   }