feat: voice messages, offline queue, delivery ticks, volume slider, admin + scaling

- Voice messages: MediaRecorder → encrypted attachment, custom waveform
  player via OfflineAudioContext, 60s limit + live mic-level meter
- Offline message queue: localStorage outbox, exponential backoff retries,
  optimistic pending bubble with retry/discard
- Delivery indicator: message_deliveries table + RLS (reciprocal receipts),
  ✓ / ✓✓ / ✓✓-blue tick states, group-aware (all members must ack)
- Per-participant volume slider in calls via right-click tile menu,
  persisted to localStorage, applied to attached audio elements
- Group call scaling: grid up to 12 tiles with pagination,
  active-speaker auto-promotion in fullscreen
- Push notifications scaffolding: service worker, VAPID subscription
  registration, notify-push edge function skeleton
- Backup recovery code: 24-char base32 code (~120 bits entropy) as
  alternative decrypt path, restore UI with mode toggle
- Admin panel: conversations list, audit log (admin_audit_log table +
  admin_log_action RPC), audit entry on user flag toggle
- Search v2: sender filter, attachment-only toggle, date range
- Reactions pop animation (scale 0.4→1.15→1 on count change)
- Message list windowing (150 default, expand via IntersectionObserver)
- Stub cleanup: removed dead ScreenshareStub from CallParticipantTile

Fixes:
- Focus-triggered flicker: dropped window.focus listeners in three spots,
  throttled visibilitychange/online wake-refreshes to 30s, keep existing
  data visible during background re-syncs (no more spinner on every click)
- Voice attachment audio element collapsed to 0px on peer side — now
  forces 280px min-width on bubble

Migrations (push required):
  20260421000001_message_deliveries.sql
  20260421000002_admin_audit_log.sql

Server TODO:
  VAPID keys + notify-push edge function deploy

design_handoff_chatapp/components/app.jsx

@@ -188,7 +188,7 @@ const ChatApp = ({ variant, showCall, showProfile, isDark, onToggleDark }) => {
 
         <div className="app-body">
           {variant.layout === 'rail' ? (
-            <div className="rail-layout">
+            <div className={`rail-layout ${activeTab !== 'chats' ? 'page-mode' : ''}`}>
               {/* Icon rail left */}
               <div className="icon-rail">
                 <div className="rail-brand" title="Netralax"><Icon.Logo /></div>
@@ -213,7 +213,8 @@ const ChatApp = ({ variant, showCall, showProfile, isDark, onToggleDark }) => {
                   {isDark ? <Icon.Sun /> : <Icon.Moon />}
                 </button>
               </div>
-              {/* Chatlist + user profile at bottom */}
+              {/* Chatlist + user profile at bottom — only on chats tab */}
+              {activeTab === 'chats' && (
               <div className="chat-list rail-chatlist">
                 <div className="chat-list-header">
                   <div className="chat-list-title">Chats</div>
@@ -235,8 +236,13 @@ const ChatApp = ({ variant, showCall, showProfile, isDark, onToggleDark }) => {
                   <button className="icon-btn" title="Einstellungen"><Icon.Settings /></button>
                 </div>
               </div>
-              {/* Chat area (unchanged below) */}
-              <div className="chat-area">
+              )}
+              {/* Chat area OR page content */}
+              <div className={`chat-area ${activeTab !== 'chats' ? 'has-page' : ''}`}>
+                {activeTab === 'friends' && <FriendsPageContent />}
+                {activeTab === 'admin' && <AdminPageContent />}
+                {activeTab === 'settings' && <SettingsPageContent isDark={isDark} onToggleDark={onToggleDark} />}
+                {activeTab === 'chats' && <>
                 {!(callScreen === 'active' && callMode !== 'fullscreen') && (
                 <div className="chat-header">
                   <Avatar chat={activeChat} />
@@ -290,6 +296,7 @@ const ChatApp = ({ variant, showCall, showProfile, isDark, onToggleDark }) => {
                   </div>
                   <button className="composer-btn"><Icon.Send /></button>
                 </div>
+                </>}
               </div>
             </div>
           ) : (
@@ -329,6 +336,10 @@ const ChatApp = ({ variant, showCall, showProfile, isDark, onToggleDark }) => {
           </div>
 
           <div className="main-area">
+            {activeTab === 'friends' && <div className="chat-area has-page" style={{width: '100%'}}><FriendsPageContent /></div>}
+            {activeTab === 'admin' && <div className="chat-area has-page" style={{width: '100%'}}><AdminPageContent /></div>}
+            {activeTab === 'settings' && <div className="chat-area has-page" style={{width: '100%'}}><SettingsPageContent isDark={isDark} onToggleDark={onToggleDark} /></div>}
+            {activeTab === 'chats' && <>
             <div className="chat-list">
               <div className="chat-list-header">
                 <div className="chat-list-title">Chats</div>
@@ -382,13 +393,14 @@ const ChatApp = ({ variant, showCall, showProfile, isDark, onToggleDark }) => {
                 <button className="composer-btn"><Icon.Send /></button>
               </div>
             </div>
+            </>}
           </div>
             </>
           )}
         </div>
 
-        {/* Call screen switcher — only in Clean Rail */}
-        {variant.layout === 'rail' && (
+        {/* Call screen switcher — only in Clean Rail, only on chats tab */}
+        {variant.layout === 'rail' && activeTab === 'chats' && (
           <div className="screen-switcher">
             <button className={callScreen === 'none' ? 'active' : ''} onClick={() => setCallScreen('none')}>Chat</button>
             <button className={callScreen === 'incoming' ? 'active' : ''} onClick={() => setCallScreen('incoming')}>Incoming</button>