feat(ui): phone layout with a bottom tab bar and one panel sheet at a time

At 720px and narrower the globe stays full screen and a bottom tab bar (Layers,
Cameras, Context, Search, More) opens one bottom sheet at a time, presenting the
existing rail and dock panels in place. Sheets borrow panels without persisting
or sharing them and put back what they changed. Cockpit, recording and clean
view close the sheet; scene playback keeps STOP reachable. Focus moves into the
sheet and back to its tab, the required attribution stays visible above the
voice control and any sheet, and the page uses safe-area insets. Wider
viewports are unchanged.

Adapted from the phone tab-shell proposed in #203 by @blearymoth.

src/ui/panelChrome.js

@@ -46,6 +46,7 @@ export class PanelChrome {
     readInitialShare,
     readScrollRestoreOwner,
     readDisplayScrollTop,
+    readSharedCollapsed = () => undefined,
   }) {
     Object.assign(this, elements, operations, {
       readHud,
@@ -54,6 +55,7 @@ export class PanelChrome {
       readInitialShare,
       readScrollRestoreOwner,
       readDisplayScrollTop,
+      readSharedCollapsed,
     });
     this._disposed = false;
     this._lifetime = new UiLifetime();
@@ -149,6 +151,9 @@ export class PanelChrome {
   }
 
   _collapsePanelOnEscape(event, panelId) {
+    // In a phone sheet, Escape closes the sheet (mobileShell.js), not a panel.
+    if (globalThis.document?.body?.hasAttribute?.('data-mobile-sheet'))
+      return false;
     return collapsePanelOnEscape(event, {
       panel: document.getElementById(panelId),
       onChange: (collapsed, options) =>
@@ -250,7 +255,10 @@ export class PanelChrome {
       disclosure: panel.querySelector(`[data-dock-toggle-target="${panelId}"]`),
       openDelayMs,
       closeDelayMs,
-      isActive: () => !this._disposed,
+      // A phone sheet holds its trays open; the tab bar closes them.
+      isActive: () =>
+        !this._disposed &&
+        !globalThis.document?.body?.hasAttribute?.('data-mobile-sheet'),
       onChange: (collapsed, options) =>
         this.setPanelCollapsed(panelId, collapsed, options),
       onEscape: (event) => this._collapsePanelOnEscape(event, panelId),
@@ -380,7 +388,11 @@ export class PanelChrome {
         panelEl.classList.contains('cyber-accordion-collapsed')
           ? false
           : panelEl.classList.contains('collapsed');
-      const entry = { id: spec.id, collapsed };
+      // A panel the phone shell only borrowed for a sheet shares its own state.
+      const entry = {
+        id: spec.id,
+        collapsed: this.readSharedCollapsed(spec.id) ?? collapsed,
+      };
       if (spec.pinnable)
         entry.pinned = panelEl.classList.contains('dock-pinned');
       specs.push(entry);
@@ -439,7 +451,9 @@ export class PanelChrome {
       !restore &&
       !nextCollapsed &&
       document.documentElement?.dataset.uiTheme === 'cyber' &&
-      panelEl.parentElement === this._rightPanelStack
+      panelEl.parentElement === this._rightPanelStack &&
+      // Phone sheets show several rail panels at once.
+      !document.body?.classList?.contains('mobile-shell')
     ) {
       for (const peer of this._rightPanelStack.children) {
         if (