Let an application replace the safe-area insets and dock on the bottom bar

Components read the device's safe-area insets straight from env(), which a
browser test cannot fake and an application drawing its own status strip
cannot extend. Every inset the package reads, in its CSS and its views, is
now var(--material-safe-top|bottom|left|right, env(safe-area-inset-…)):
unchanged while the variables are unset.

The app shell's --material-bottom-bar also adds
var(--material-bottom-extra, 0px), so an application that docks something on
the phone's navigation bar (an offline banner) sets its height once and the
snackbar, a fab button and the page's bottom padding clear it.

A guard test fails on any env(safe-area-inset-*) outside such a variable, and
AppShellTest's assertion on the bar height's class follows the new value.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RHoXZSHc8gGpZjFmA5fPc2

tests/Browser/NavigationTest.php

@@ -176,3 +176,31 @@ it('skips to the content', function () {
         ->assertScript("location.hash === '#content'")
         ->assertScript("document.activeElement === document.getElementById('content')");
 });
+
+it('moves an app bar\'s content under a safe area an application sets', function () {
+    $row = "Math.round(document.querySelector('[data-app-bar] [data-app-bar-row]').getBoundingClientRect().top)";
+
+    $page = navigationReady(visit('/material'));
+    $top = (int) $page->script($row);
+
+    $page->script("document.documentElement.style.setProperty('--material-safe-top', '47px')");
+
+    $page->assertScript("{$row} === ".($top + 47))
+        ->assertNoJavaScriptErrors();
+});
+
+it('lifts the snackbar and the page above something docked on the phone\'s bar', function () {
+    $snackbarBottom = "Math.round(parseFloat(getComputedStyle(document.querySelector('[x-data=\"materialSnackbar\"]')).bottom))";
+    $contentPadding = "Math.round(parseFloat(getComputedStyle(document.getElementById('content')).paddingBottom))";
+
+    $page = shellPage(400, 860);
+    $snackbar = (int) $page->script($snackbarBottom);
+    $content = (int) $page->script($contentPadding);
+
+    expect($content)->toBe(64)->and($snackbar)->toBe(80);
+
+    $page->script("document.documentElement.style.setProperty('--material-bottom-extra', '40px')");
+
+    $page->assertScript("{$snackbarBottom} === 120")
+        ->assertScript("{$contentPadding} === 104");
+});