feat: PiP mute indicator, export history, activity log, unverified device warning

- PiP call window: mute overlay using MutationObserver on EC iframe's
  [data-testid="incall_mute"] button (data-kind="primary" = muted),
  same pattern as screenshare detection in CallControl.ts

- P2-4 Export Room History: new tab in room settings — Plain Text / JSON /
  HTML formats, optional date range, progress counter, paginated via
  paginateEventTimeline, blob download; E2EE-aware (skips failed decryptions)

- P2-6 Room Activity Log: new tab in room settings — filterable log of
  m.room.member, m.room.power_levels, m.room.name/topic/avatar/server_acl
  events with human-readable descriptions, relative timestamps, Load More
  pagination

- P2-10 Unverified Device Warning: warnOnUnverifiedDevices setting (default
  off); Warning.Container banner above composer in encrypted rooms with
  unverified devices; toggle in Settings → General → Privacy

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

src/app/hooks/useCallSpeakers.ts

@@ -58,3 +58,80 @@ export const useCallSpeakers = (callEmbed: CallEmbed): Set<string> => {
 
   return speakers;
 };
+
+/**
+ * Returns true when the local user's microphone is muted in the Element Call
+ * iframe.  The state is read directly from the EC mute button DOM using the
+ * same MutationObserver / `data-kind` pattern that CallControl.ts uses for the
+ * screenshare button:
+ *
+ *   [data-testid="incall_mute"][data-kind="primary"]  → mic is muted
+ *   [data-testid="incall_mute"][data-kind="secondary"] → mic is active
+ *
+ * This is used by the PiP overlay so the viewer can see at a glance whether
+ * their microphone is muted while navigated away from the call room.
+ */
+export const useRemoteAllMuted = (callEmbed: CallEmbed | undefined): boolean => {
+  const [muted, setMuted] = useState(false);
+
+  useEffect(() => {
+    if (!callEmbed) return undefined;
+
+    const getDoc = (): Document | undefined =>
+      callEmbed.iframe.contentDocument ?? callEmbed.iframe.contentWindow?.document ?? undefined;
+
+    const getMuteBtn = (): HTMLElement | null =>
+      getDoc()?.querySelector('[data-testid="incall_mute"]') ?? null;
+
+    /** Read the current button state and update React state. */
+    const syncState = (): void => {
+      const btn = getMuteBtn();
+      // data-kind="primary" means the button is in its "active/on" primary style,
+      // which EC uses for muted state (consistent with screenshare active = primary).
+      setMuted(btn?.getAttribute('data-kind') === 'primary');
+    };
+
+    let observer: MutationObserver | undefined;
+
+    const attachObserver = (): void => {
+      const btn = getMuteBtn();
+      if (!btn) return;
+
+      observer?.disconnect();
+      observer = new MutationObserver(syncState);
+      observer.observe(btn, {
+        attributes: true,
+        attributeFilter: ['data-kind'],
+      });
+      // Read the current state immediately once we have a button to observe.
+      syncState();
+    };
+
+    // If the button is already present, start observing immediately.
+    attachObserver();
+
+    // If not yet present (iframe still loading), watch the document body for
+    // the button to appear — mirrors the styleRetryObserver pattern in CallEmbed.
+    let bodyObserver: MutationObserver | undefined;
+    if (!getMuteBtn()) {
+      const doc = getDoc();
+      if (doc) {
+        bodyObserver = new MutationObserver(() => {
+          if (getMuteBtn()) {
+            bodyObserver?.disconnect();
+            bodyObserver = undefined;
+            attachObserver();
+          }
+        });
+        bodyObserver.observe(doc.body, { childList: true, subtree: true });
+      }
+    }
+
+    return () => {
+      observer?.disconnect();
+      bodyObserver?.disconnect();
+    };
+  }, [callEmbed]);
+
+  return muted;
+};