Add a mobile-responsive layout and mirrored call controls

- Sidebar (channel list + nickname) becomes an off-canvas drawer below
  860px, opened via a new fixed top bar (hamburger + live status) and
  closed by tapping the backdrop or picking a channel.
- Mic/deafen/share get an always-visible bottom control bar so they're
  reachable mid-call without opening the drawer; updateMicButton/
  updateDeafenButton and their click wiring now target both the
  sidebar and mirror buttons via shared NodeLists instead of single
  elements.
- Per-user volume popup (previously hover-only) now also toggles on
  tap, and repositions below the row instead of to the side, which
  would overflow a narrow drawer.
- Screen-share tiles stack full-width, touch targets are enlarged,
  and the spatial map panel shrinks to leave room for the stage.

Also includes the working tree's prior swap of the spatial view from
Konva to Cytoscape.js (drag, scroll-to-zoom, fit-to-view, distance
edges) — not authored in this change, carried along since it was
already uncommitted.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

public/index.html

@@ -17,6 +17,17 @@
 </script>
 </head>
 <body>
+<!-- mobile top bar: hamburger opens the channel drawer, shows live status -->
+<header id="mobile-topbar">
+  <button id="btn-menu" title="Channels">&#9776;</button>
+  <span id="mobile-title">gibbz voice</span>
+  <span class="status-row" id="mobile-status-row">
+    <span class="status-indicator" id="mobile-status-dot"></span>
+    <span id="mobile-status-text">Disconnected</span>
+  </span>
+</header>
+<div id="sidebar-backdrop"></div>
+
 <div id="app">
   <!-- server rail -->
   <nav id="rail">
@@ -71,13 +82,21 @@
     <div id="spatial-wrap">
       <div class="spatial-label">
         <span>SPATIAL AUDIO</span>
-        <span class="hint">drag <b>your</b> avatar &mdash; others hear you shift; you hear them relative to position</span>
+        <span class="hint">drag your avatar to move; drag peers for local positioning &bull; scroll to zoom</span>
+        <button id="btn-spatial-fit" class="spatial-action-btn" title="Fit all users in view">&#x26F6; Fit View</button>
       </div>
       <div id="spatial"></div>
     </div>
   </main>
 </div>
 
+<!-- mobile bottom bar: always-reachable call controls, mirror the sidebar's -->
+<div id="mobile-controls">
+  <button class="ctl mirror-mic" title="Toggle mic (M)">&#127908;</button>
+  <button class="ctl mirror-deafen" title="Toggle deafen (D)">&#128064;</button>
+  <button class="ctl mirror-share" title="Share your screen (S)">&#128421;&#65039;</button>
+</div>
+
 <!-- settings modal -->
 <div id="modal-backdrop" class="hidden">
   <div id="settings-modal" role="dialog" aria-modal="true">