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

resources/css/components/search.css

@@ -165,8 +165,8 @@
     [data-search][data-full-screen] [data-search-bar] {
         position: fixed;
         inset: 0 0 auto;
-        height: calc(4.5rem + env(safe-area-inset-top));
-        padding-top: env(safe-area-inset-top);
+        height: calc(4.5rem + var(--material-safe-top, env(safe-area-inset-top)));
+        padding-top: var(--material-safe-top, env(safe-area-inset-top));
         padding-inline: 0.25rem;
         border-radius: 0;
     }
@@ -175,7 +175,7 @@
         position: fixed;
         inset: 0;
         max-height: none;
-        padding-top: calc(4.5rem + env(safe-area-inset-top));
+        padding-top: calc(4.5rem + var(--material-safe-top, env(safe-area-inset-top)));
         border-radius: 0;
         box-shadow: none;
     }