Merge upstream v4.12.3 (Element Call 0.20.1) into lotus

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

.gitea/workflows/ci.yml

@@ -62,3 +62,35 @@ jobs:
             gzip_size=$(gzip -c "$f" | wc -c | awk '{printf "%.1f kB", $1/1024}')
             echo "| $name | $size | $gzip_size |" >> $GITHUB_STEP_SUMMARY
           done
+
+  # ── Desktop build trigger ──────────────────────────────────────────────
+  # Gated on `build` succeeding so a broken push (e.g. failing `npm ci` or
+  # `npm run build`) never bumps the cinny-desktop submodule and kicks off the
+  # slow Tauri release builds, which would only error out downstream. Only
+  # runs on a real push to lotus — not on pull_request CI runs.
+  trigger-desktop:
+    name: Trigger Desktop Build
+    needs: build
+    if: ${{ github.event_name == 'push' && github.ref == 'refs/heads/lotus' }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Bump cinny submodule
+        env:
+          TOKEN: ${{ secrets.RELEASE_TOKEN }}
+        run: |
+          CINNY_SHA="${{ github.sha }}"
+          git clone "https://x-access-token:$TOKEN@code.lotusguild.org/LotusGuild/cinny-desktop.git" desktop
+          cd desktop
+          git config user.email "ci@lotusguild.org"
+          git config user.name "Lotus CI"
+          git submodule update --init cinny
+          git -C cinny fetch origin
+          git -C cinny checkout "$CINNY_SHA"
+          git add cinny
+          if git diff --cached --quiet; then
+            echo "Submodule already at $CINNY_SHA, nothing to do"
+          else
+            git commit -m "chore: bump cinny submodule to ${CINNY_SHA:0:8}"
+            git push origin main
+            echo "Pushed — cinny-desktop release.yml will start via on:push trigger"
+          fi

.gitea/workflows/trigger-desktop.yml

@@ -1,41 +0,0 @@
-name: Trigger Desktop Build
-
-on:
-  push:
-    branches: [lotus]
-
-jobs:
-  trigger:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Bump cinny submodule in cinny-desktop
-        env:
-          TOKEN: ${{ secrets.RELEASE_TOKEN }}
-        run: |
-          CINNY_SHA="${{ github.sha }}"
-          git clone "https://x-access-token:$TOKEN@code.lotusguild.org/LotusGuild/cinny-desktop.git" desktop
-          cd desktop
-          git config user.email "ci@lotusguild.org"
-          git config user.name "Lotus CI"
-          git submodule update --init cinny
-          git -C cinny fetch origin
-          git -C cinny checkout "$CINNY_SHA"
-          git add cinny
-          if git diff --cached --quiet; then
-            echo "Submodule already at $CINNY_SHA"
-          else
-            git commit -m "chore: bump cinny submodule to ${CINNY_SHA:0:8}"
-            git push origin main
-          fi
-
-      - name: Dispatch cinny-desktop release build
-        env:
-          TOKEN: ${{ secrets.ACTIONS_TOKEN }}
-        run: |
-          HTTP=$(curl -s -o /tmp/resp.txt -w "%{http_code}" -X POST \
-            "https://code.lotusguild.org/api/v1/repos/LotusGuild/cinny-desktop/actions/workflows/release.yml/dispatches" \
-            -H "Authorization: token $TOKEN" \
-            -H "Content-Type: application/json" \
-            -d '{"ref":"main"}')
-          echo "HTTP $HTTP: $(cat /tmp/resp.txt)"
-          [ "$HTTP" = "204" ] || [ "$HTTP" = "200" ] || { echo "Dispatch failed"; exit 1; }

.github/workflows/docker-pr.yml

@@ -22,11 +22,11 @@ jobs:
         uses: docker/setup-qemu-action@c7c53464625b32c7a7e944ae62b3e17d2b600130 # v3.7.0
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@8d2750c68a42422c14e847fe6c8ac0403b4cbd6f # v3.12.0
+        uses: docker/setup-buildx-action@d7f5e7f509e45cec5c76c4d5afdd7de93d0b3df5 # v4.1.0
 
       - name: Login to Docker Hub #Do not update this action from a outside PR
         if: github.event.pull_request.head.repo.fork == false
-        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.0
+        uses: docker/login-action@650006c6eb7dba73a995cc03b0b2d7f5ca915bee # v4.2.0
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
@@ -34,7 +34,7 @@ jobs:
 
       - name: Login to the Github Container registry #Do not update this action from a outside PR
         if: github.event.pull_request.head.repo.fork == false
-        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.0
+        uses: docker/login-action@650006c6eb7dba73a995cc03b0b2d7f5ca915bee # v4.2.0
         with:
           registry: ghcr.io
           username: ${{ github.actor }}
@@ -43,14 +43,14 @@ jobs:
 
       - name: Extract metadata (tags, labels) for Docker, GHCR
         id: meta
-        uses: docker/metadata-action@c299e40c65443455700f0fdfc63efafe5b349051 # v5.10.0
+        uses: docker/metadata-action@80c7e94dd9b9319bd5eb7a0e0fe9291e23a2a2e9 # v6.1.0
         with:
           images: |
             ajbura/cinny
             ghcr.io/${{ github.repository }}
 
       - name: Build Docker image (no push)
-        uses: docker/build-push-action@bcafcacb16a39f128d818304e6c9c0c18556b85f # v7.1.0
+        uses: docker/build-push-action@f9f3042f7e2789586610d6e8b85c8f03e5195baf # v7.2.0
         with:
           context: .
           platforms: linux/amd64

.github/workflows/prod-deploy.yml

@@ -70,27 +70,27 @@ jobs:
       - name: Set up QEMU
         uses: docker/setup-qemu-action@c7c53464625b32c7a7e944ae62b3e17d2b600130 # v3.7.0
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@8d2750c68a42422c14e847fe6c8ac0403b4cbd6f # v3.12.0
+        uses: docker/setup-buildx-action@d7f5e7f509e45cec5c76c4d5afdd7de93d0b3df5 # v4.1.0
       - name: Login to Docker Hub #Do not update this action from a outside PR
-        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.0
+        uses: docker/login-action@650006c6eb7dba73a995cc03b0b2d7f5ca915bee # v4.2.0
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
       - name: Login to the Github Container registry #Do not update this action from a outside PR
-        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.0
+        uses: docker/login-action@650006c6eb7dba73a995cc03b0b2d7f5ca915bee # v4.2.0
         with:
           registry: ghcr.io
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
       - name: Extract metadata (tags, labels) for Docker, GHCR
         id: meta
-        uses: docker/metadata-action@c299e40c65443455700f0fdfc63efafe5b349051 # v5.10.0
+        uses: docker/metadata-action@80c7e94dd9b9319bd5eb7a0e0fe9291e23a2a2e9 # v6.1.0
         with:
           images: |
             ${{ secrets.DOCKER_USERNAME }}/cinny
             ghcr.io/${{ github.repository }}
       - name: Build and push Docker image
-        uses: docker/build-push-action@bcafcacb16a39f128d818304e6c9c0c18556b85f # v7.1.0
+        uses: docker/build-push-action@f9f3042f7e2789586610d6e8b85c8f03e5195baf # v7.2.0
         with:
           context: .
           platforms: linux/amd64,linux/arm64

.gitignore

@@ -5,3 +5,4 @@ devAssets
 
 .DS_Store
 .ideapackage-lock.json
+public/decorations/

LOTUS_BUGS.md

@@ -1,72 +1,487 @@
 # Lotus Chat — Bug Report & Technical Audit
+
 **Date:** June 2026
 
-This document tracks identified bugs, edge cases, and architectural discrepancies.
+This document tracks identified bugs, edge cases, and architectural discrepancies found during the audit of the Lotus Chat codebase. Recommended fixes are provided for each item.
 
 ---
 
-## ✅ Resolved Issues (Recently Fixed)
+## 🚩 Critical & UI Bugs
 
-*   **GIF Sending Bypasses E2EE**: Fixed in `RoomInput.tsx`.
-*   **Scheduled Messages Bypass E2EE**: Fixed in `scheduledMessages.ts`.
-*   **Drag-and-Drop Overlay Persistence**: Fixed in `useFileDrop.ts`.
-*   **Stale Member List in Verification Banner**: Fixed in `useDeviceVerificationStatus.ts`.
-*   **Incomplete Python Comment Highlighting**: Fixed in `syntaxHighlight.ts`.
-*   **Search Button Hidden in E2EE Rooms**: Fixed in `RoomViewHeader.tsx`.
-*   **TDS Design Law Violations (Hardcoded Hex)**: Fixed in `GifPicker.tsx` and `VoiceMessageRecorder.tsx`.
-*   **Recent Emoji Sort Order**: Fixed in `recent-emoji.ts` (recency order, not frequency).
-*   **Encrypted Search Misses Historic Events**: Fixed in `useLocalMessageSearch.ts`.
-*   **Presence Updater Base URL Hack**: Fixed in `usePresenceUpdater.ts`.
-*   **Presence Badge Accessibility**: Fixed in `Presence.tsx` (`aria-label` on badge).
-*   **Presence Updater Wipes Custom Status**: Fixed in `usePresenceUpdater.ts` (removed `status_msg: ''`).
-*   **Manifest Main Icon Paths 404**: Fixed in `public/manifest.json` (`./public/android/` → `./res/android/`). Shortcut icon was already correct.
+### 12. PiP Mute Icon Misidentifies Whose Mic Is Muted
+
+- **File:** `cinny/src/app/components/CallEmbedProvider.tsx`
+- **Status:** **FIXED ⚠️ UNTESTED** — needs verification in a live call with at least one other participant who mutes/unmutes
+- **Issue:** The muted-mic badge in the Picture-in-Picture window used `useRemoteAllMuted` (fires when ANY remote participant is muted) and rendered in the bottom-left corner — the conventional position for "YOUR" mic status. Users read it as their own mic being muted.
+- **Root Cause:** `PipMuteOverlay` was triggering on remote-mute events while displaying in a position that implies local-user status.
+- **Fix Applied:**
+  - **Bottom-left badge** now shows only when the LOCAL user's mic is muted (checked via `!controlState.microphone` from `useCallControlState`). Includes "You" label to make it unambiguous. Uses `color.Critical.Main`.
+  - **Top-right badge** (new) shows "All muted" in `color.Warning.Main` when all remote participants are muted — positioned and labeled so it's clearly about other people, not the local user.
+  - Both badges use `aria-label` / `title` for accessibility.
 
 ---
 
-## 🛡️ Critical Security & Logic
+### 1. No Camera Focus During Screenshare
 
-### 1. Edit History Broken for E2EE
-**File:** `src/app/features/room/message/EditHistoryModal.tsx`
-**Status:** **OPEN**
+- **File:** `cinny/src/app/features/call/CallControls.tsx`
+- **Status:** **OPEN**
+- **Issue:** Automatic screenshare spotlighting forces primary display override, preventing users from manually focusing on camera feeds.
+- **Root Cause:** Current spotlighting logic prioritizes active screenshare streams over manual participant selections, effectively ignoring or overriding user-initiated focus states.
+- **Proposed Fix:** Introduce a manual 'Focus' state that takes precedence over automatic screenshare spotlighting, implemented via a toggle/click UI on participant tiles. Update the video renderer to respect this manual override.
 
-*   **Issue:** The modal fetches edit history via raw `fetch`. The returned events are not decrypted.
-*   **Impact:** In encrypted rooms, the edit history shows ciphertext or "(no text)" for all previous versions.
-*   **Recommended Fix:** After fetching raw events, check if they are encrypted. Use `mx.decryptEventIfNeeded(event)` for each event in the chunk before rendering.
+### 2. Chat Background Animation Flickering
 
-### 2. Service Worker Ephemeral Sessions
-**File:** `src/sw.ts`
-**Status:** **OPEN**
+- **File:** `cinny/src/app/features/lotus/chatBackground.ts`
+- **Status:** **FIXED ⚠️ UNTESTED** — needs verification on a real device with an animated background active
+- **Issue:** Animated background properties cause visible flickering on message text and the composer area, particularly on browsers/GPUs susceptible to repaint-induced artifacts.
+- **Root Cause:** Animation triggers excessive repaints or layout recalculations on descendant elements, likely due to animating non-GPU accelerated properties on parent containers without proper rendering context isolation.
+- **Fix Applied:** `getChatBg()` now injects `willChange: 'background-position'` and `contain: 'paint'` for any animated variant. This promotes the element to its own compositor layer and isolates repaints from descendants. Background-position animation is already GPU-hinted on modern browsers; `contain: paint` prevents descendant elements from being invalidated during each frame.
 
-*   **Issue:** Access tokens are stored in an in-memory `sessions` Map within the SW.
-*   **Impact:** Closing all app tabs wipes the sessions. Background tasks (like future push notification handling or media pre-fetching) will fail.
-*   **Recommended Fix:** Persist the session info (accessToken/baseUrl) in IndexedDB within the Service Worker so it survives app restarts.
+### 3. Avatar Decorations in Element Call
+
+- **File:** `cinny/src/app/components/avatar-decoration/AvatarDecoration.tsx`
+- **Status:** **OPEN**
+- **Issue:** Avatar decorations are failing to render within the call/room interface member lists.
+- **Root Cause:** Likely a mismatch between the expected `member` object structure required by the `AvatarDecoration` component and the data actually provided by the call/room UI components. Matrix event data for decorations might not be propagating correctly to these UI member objects.
+- **Proposed Fix:** Analyze the data propagation chain from Matrix events to the member object in `cinny/src/app/components/call` and `room`, ensuring that decoration-related properties are correctly mapped and passed to the `AvatarDecoration` component.
+
+### 4. DM and Group Message Calls
+
+- **File:** `cinny/src/app/components/CallEmbedProvider.tsx`
+- **Status:** **PARTIALLY FIXED ⚠️ UNTESTED** — Volume control added. Remaining: ringtone selection, suppression during active calls.
+- **Issue:** Incoming call ringtone is hardcoded, lacks volume control, and is suppressed if the user is already in an active call.
+- **Root Cause:** Ringing logic is tightly coupled to `RTCNotification` events in `CallEmbedProvider.tsx`, using a hardcoded audio file path. It lacks an abstraction for sound management or user-configurable settings for ringtones/volumes.
+- **Fix Applied:** Added `ringtoneVolume` setting (0–100, default 70). `IncomingCall` reads this setting and applies `audioElement.volume = ringtoneVolume / 100` before `play()`. Slider added to Settings → General → Calls section.
+- **Remaining:** (a) Ringtone selection (still hardcoded to `call.ogg`); (b) Suppression during active calls — not investigated.
+
+### 5. Seasonal Themes and Chat Backgrounds Design
+
+- **File:** `cinny/src/app/hooks/useTheme.ts`, `cinny/src/app/features/lotus/chatBackground.ts`
+- **Status:** **OPEN**
+- **Issue:** Basic CSS or random moving lines are insufficient for high-fidelity wallpaper/theming. They lack professional design theory, coherence, and aesthetic depth.
+- **Root Cause:** Current implementation relies on basic CSS, lacks advanced design theory, and does not leverage modern, performant CSS wallpaper techniques.
+- **Proposed Fix (Extreme Depth Redesign):**
+  - **Research-Backed Implementation:** Implement advanced design techniques (layered `oklch` gradients, `backdrop-filter` for refractive "liquid glass" effects, GPU-accelerated `transform` animations) to create living, breathing backgrounds.
+  - **Performance Optimization:** Ensure all animations strictly use compositor-thread properties (`transform`, `opacity`) and apply `contain: paint` / `will-change: transform` to prevent layout thrashing/flickering.
+  - **Design Resources (Examples/Inspiration):**
+    - [Uiverse.io Patterns](https://uiverse.io/patterns)
+    - [MagicPattern CSS Backgrounds](https://www.magicpattern.design/tools/css-backgrounds)
+    - [Prismic Blog: CSS Background Effects](https://prismic.io/blog/css-background-effects)
+    - [CSS-Pattern.com](https://css-pattern.com) (Pure CSS pattern library)
+    - [BGJar](https://bgjar.com) (Performance-focused generators)
+  - **Goal:** Treat each theme/background as a week-long development sprint to ensure professional polish, WCAG AA contrast compliance for overlaying UI, and seamless integration with the Lotus TDS.
+
+### 6. Exclusive Background vs. Seasonal Choice
+
+- **File:** `cinny/src/app/state/settings.ts`
+- **Status:** **FIXED ⚠️ UNTESTED** — needs verification: (a) pick a background, confirm seasonal theme auto-clears; (b) pick a seasonal theme, confirm background auto-clears; (c) set both via old localStorage data and reload, confirm SeasonalEffect guard suppresses the overlay
+- **Issue:** Concurrent application of both Chat Backgrounds and Seasonal Themes causes visual clutter and high GPU usage.
+- **Root Cause:** These are currently handled as independent settings in the `settingsAtom` and applied simultaneously without mutual exclusion.
+- **Fix Applied:** Mutual exclusion enforced at two layers: (1) `General.tsx` — ChatBgGrid clears seasonalThemeOverride→'off' when any non-'none' background is picked; SeasonalBgGrid clears chatBackground→'none' when any real seasonal theme is selected. (2) `SeasonalEffect.tsx` — runtime guard returns null if `chatBackground !== 'none'`, protecting against legacy persisted state.
+
+### 7. Tiny Touch Targets in Composer Toolbar
+
+- **File:** `cinny/src/app/features/room/RoomInput.tsx`
+- **Status:** **FIXED ⚠️ UNTESTED** — needs verification on a real mobile device: open composer, confirm all toolbar buttons are tappable without mis-taps
+- **Issue:** Toolbar buttons have hit areas smaller than the WCAG-recommended 44x44px for touch, hindering mobile accessibility.
+- **Fix Applied:** Added `touchTarget = { minWidth: '44px', minHeight: '44px' }` computed from `mobileOrTablet()` and applied as `style={touchTarget}` to all 8 composer toolbar `IconButton` elements (attach, format, sticker, emoji, GIF, location, poll, schedule, send).
+
+### 8. Horizontal Overflow in Room Settings
+
+- **File:** `cinny/src/app/components/page/style.css.ts`
+- **Status:** **FIXED ⚠️ UNTESTED** — needs verification: open Room Settings on a narrow mobile screen, confirm nav panel fills full width and no horizontal scrollbar appears
+- **Issue:** Wide tables and input elements in room settings cause horizontal overflow on mobile viewports.
+- **Fix Applied:** Added `@media (max-width: 750px) { width: '100%' }` to both `'400'` and `'300'` size variants of the `PageNav` vanilla-extract recipe in `style.css.ts`.
+
+### 9. Modal Float-Style Responsiveness
+
+- **File:** Multiple modal files
+- **Status:** **FIXED ⚠️ UNTESTED** — needs verification by opening each modal on a real mobile device
+- **Issue:** Modals appear as floating boxes on mobile, creating navigation and readability challenges.
+- **Fix Applied:** Created `useModalStyle(desktopMaxWidth)` hook (`src/app/hooks/useModalStyle.ts`) that returns fullscreen styles on mobile (no border-radius, no max-width, `height: 100%`) and desktop box styles otherwise. Applied to all 22+ modal files: `LeaveRoomPrompt`, `LeaveSpacePrompt`, `ReportRoomModal`, `ReportUserModal`, `DeviceVerification`, `InviteUserPrompt`, `LogoutDialog`, `DeviceVerificationSetup`, `DeviceVerificationReset`, `JoinAddressPrompt`, `JumpToTime`, `EditHistoryModal`, `ForwardMessageDialog`, `RemindMeDialog`, `CreateRoomModal`, `CreateSpaceModal`, `ScheduleMessageModal`, `PollCreator`, `AddExistingModal`, `RoomEncryption`, `RoomUpgrade`, `Modal500`, `ReadReceiptAvatars`, `RoomTopicViewer`.
+- **Note:** `UIAFlowOverlay` already fullscreen via `<Overlay>` — no change needed. `JoinRulesSwitcher`/`RoomNotificationSwitcher` are dropdowns, not modals.
+
+### 10. Composer Keyboard Obscurity
+
+- **File:** `src/index.css`
+- **Status:** **FIXED ⚠️ UNTESTED** — needs verification on iOS Safari specifically (the worst offender); on Android Chrome `100dvh` has been standard since Chrome 108
+- **Issue:** The chat composer is often partially or fully obscured by the virtual keyboard on mobile.
+- **Fix Applied:** Added `height: 100dvh` (dynamic viewport height) to `html` alongside the existing `height: 100%` fallback. `dvh` updates when the software keyboard appears, ensuring the layout shrinks correctly and the composer stays visible.
+
+### 11. Inline Jotai atom creation
+
+- **File:** `cinny/src/app/hooks/useSpaceHierarchy.ts`
+- **Status:** **FALSE POSITIVE — CLOSED**
+- **Issue:** Inline Jotai atom creation in a hook risks re-rendering components unnecessarily.
+- **Resolution:** `useState(() => atom(...))` IS the correct Jotai pattern for local stable atom references. The factory function form of `useState` ensures the atom is created only once per component mount. No change warranted.
 
 ---
 
-## 📱 PWA & Mobile Issues
+## 📦 Barrel File Audit
 
-### 1. No PWA Precaching (Offline Mode Broken)
-**File:** `src/sw.ts`, `vite.config.js`
-**Status:** **OPEN**
+| File Path                                   | Note                       | Status |
+| :------------------------------------------ | :------------------------- | :----- |
+| `cinny/src/app/plugins/call/index.ts`       | Extensive `export *` usage | OPEN   |
+| `cinny/src/app/plugins/text-area/index.ts`  | Extensive `export *` usage | OPEN   |
+| `cinny/src/app/components/message/index.ts` | Extensive `export *` usage | OPEN   |
 
-*   **Issue:** The Service Worker is missing the `self.__WB_MANIFEST` injection point and `precacheAndRoute` call.
-*   **Impact:** The app does not work offline and fails PWA installation requirements in most browsers.
-*   **Recommended Fix:** Add `precacheAndRoute(self.__WB_MANIFEST)` to `sw.ts` and ensure `vite.config.js` has a valid `injectionPoint`.
+---
 
-### 2. PiP Resize Impossible on Mobile
-**File:** `src/app/components/CallEmbedProvider.tsx`
-**Status:** **OPEN**
+## 🔍 Technical & Performance Refinements
 
-*   **Issue:** Resizing the PiP window uses `onMouseDown` handlers which do not trigger on touch devices.
-*   **Impact:** Mobile users cannot resize the PiP window.
-*   **Recommended Fix:** Implement `onTouchStart` handlers for the resize corners, mapping touch coordinates to the same resize logic.
+| Category                | Issue Description                                                                                                                                        | File Path                                       | Status                                                                                                                                                                                                                                                                                                                |
+| :---------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| State Sync              | Fire-and-forget network call to set offline presence during `pagehide` event may not complete reliably, potentially causing UI drift in presence status. | `cinny/src/app/hooks/usePresenceUpdater.ts`     | OPEN                                                                                                                                                                                                                                                                                                                  |
+| State Sync              | Fire-and-forget network call `setPresence().catch(...)` suppresses errors, meaning the app may falsely assume presence update success.                   | `cinny/src/app/hooks/usePresenceUpdater.ts`     | OPEN                                                                                                                                                                                                                                                                                                                  |
+| Memory Leak             | Decrypted Media Memory Leak (Gallery & Lightbox) due to missing virtualization and blob revocation.                                                      | `cinny/src/app/features/room/MediaGallery.tsx`  | PARTIALLY FIXED ⚠️ UNTESTED — Blob revocation was already correct; added `enabled` param to `useDecryptedMediaUrl` and `useNearViewport(300px)` to each `GalleryTile` to gate decryption until near-viewport, reducing burst on pagination. True virtualization (windowing) deferred — requires significant refactor. |
+| Data Persistence        | Scheduled Messages are ephemeral (lost on refresh) due to fragile `localStorage` parsing.                                                                | `cinny/src/app/state/scheduledMessages.ts`      | FIXED — now uses `atomWithStorage` + `createJSONStorage` (Jotai's built-in persistence with error-safe JSON parsing)                                                                                                                                                                                                  |
+| Memory Leak             | Potential memory leak due to uncleaned `handleMouseMove` listener in `usePan`.                                                                           | `cinny/src/app/hooks/usePan.ts`                 | FALSE POSITIVE — `usePan` already uses `attachedRef` to track listeners and cleans them up in an unmount `useEffect`. No change needed.                                                                                                                                                                               |
+| Asset Optimization      | Large unoptimized media asset (213KB) found in `public/res`.                                                                                             | `public/res/Lotus.png`                          | OPEN                                                                                                                                                                                                                                                                                                                  |
+| Data Persistence        | Non-atomic `localStorage` updates in session management can lead to inconsistent state.                                                                  | `cinny/src/app/state/sessions.ts`               | OPEN                                                                                                                                                                                                                                                                                                                  |
+| Data Persistence        | Lack of cross-tab synchronization for `localStorage` updates in session management risks race conditions.                                                | `cinny/src/app/state/sessions.ts`               | OPEN                                                                                                                                                                                                                                                                                                                  |
+| Network Resilience      | `uploadContent` lacks retry logic, failing immediately upon network error.                                                                               | `cinny/src/app/utils/matrix.ts`                 | OPEN                                                                                                                                                                                                                                                                                                                  |
+| Network Resilience      | `rateLimitedActions` uses basic retry logic without exponential backoff, which may exacerbate 429 issues.                                                | `cinny/src/app/utils/matrix.ts`                 | FIXED — fallback delay now uses capped exponential backoff (`min(1000 * 2^retryCount, 30_000)ms`) when server doesn't send `Retry-After`; server header still takes precedence via `getRetryAfterMs()`.                                                                                                               |
+| Matrix Event Robustness | `useMatrixEventRenderer` handles unknown events gracefully by returning `null`, which may hide potentially important unrendered data.                    | `cinny/src/app/hooks/useMatrixEventRenderer.ts` | OPEN                                                                                                                                                                                                                                                                                                                  |
+| Data Contract           | `MatrixError` instantiation with `UploadResponse` might be brittle.                                                                                      | `cinny/src/app/utils/matrix.ts`                 | OPEN                                                                                                                                                                                                                                                                                                                  |
+| Type Safety             | `addRoomIdToMDirect` uses `as any` cast for `AccountDataEvent.Direct`, bypassing type contract validation.                                               | `cinny/src/app/utils/matrix.ts`                 | OPEN                                                                                                                                                                                                                                                                                                                  |
+| Robustness              | `rateLimitedActions` relies on `MatrixError.httpStatus` which might not exist on all error variants.                                                     | `cinny/src/app/utils/matrix.ts`                 | FALSE POSITIVE — `MatrixError.httpStatus` is defined as `readonly httpStatus?: number` in `matrix-js-sdk/lib/http-api/errors.d.ts`. It is optional (not on all instances) but the `?.` optional chain already guards against undefined. No change needed.                                                             |
+| Type Contract           | Custom types in `cinny/src/types/matrix` mirror SDK types instead of using them, risking drift and contract mismatches.                                  | `cinny/src/types/matrix/`                       | OPEN                                                                                                                                                                                                                                                                                                                  |
 
-### 3. Double Background Animation (GPU Waste)
-**File:** `src/app/pages/client/SidebarNav.tsx`, `src/app/features/room/RoomView.tsx`
-**Status:** **OPEN**
+## 🏗️ Architectural & Hygiene Audit
 
-*   **Issue:** When Glassmorphism is enabled, the chat background is mirrored to `document.body` while the `RoomView` also renders it.
-*   **Impact:** Two identical animations (e.g., Digital Rain) run simultaneously, doubling GPU usage on mobile.
-*   **Recommended Fix:** When Glassmorphism is active, make the `RoomView` background transparent and rely on the `document.body` background.
+| Category | Issue Description                                                | File Path | Status |
+| :------- | :--------------------------------------------------------------- | :-------- | :----- |
+| Hygiene  | No stale development notes or TypeScript strictness issues found | N/A       | OPEN   |
 
+---
 
+## 🏗️ TDS Compliance & Styling Issues
+
+| Issue Description                                                                            | File Path                                                                                                                                                                                                                                                                                                                                    |
+| :------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Hardcoded inline style `cursor: 'pointer'`                                                   | `cinny/src/app/plugins/react-custom-html-parser.tsx`                                                                                                                                                                                                                                                                                         |
+| Hardcoded color `#00D4FF`, `#FFB300` ✅ **VERIFIED COMPLIANT**                               | `cinny/src/app/components/event-readers/EventReaders.tsx`                                                                                                                                                                                                                                                                                    |
+| Hardcoded color `#EE1D52`, `#9146ff`, `#ff4500`, `#cb3837`, `#f48024` ⚠️ **BRAND EXCEPTION** | `cinny/src/app/components/url-preview/UrlPreviewCard.tsx` + `UrlPreview.css.tsx` — official third-party brand colors in SVG logos and site badge backgrounds; cannot convert to CSS variables without inventing new tokens (violates TDS rule 3)                                                                                             |
+| Massive number of hardcoded `backgroundColor` values ⚠️ **PATTERN CONTENT EXCEPTION**        | `cinny/src/app/features/lotus/chatBackground.ts` — each background's base color is aesthetic content that defines the pattern identity; converting requires inventing 40+ CSS variables (violates TDS rule 3) or using CSS4 `relative-color-syntax` in inline styles (insufficient browser support); these are visual content, not UI chrome |
+| Hardcoded colors `#00FF88`, `#FF6B00` ✅ **VERIFIED COMPLIANT**                              | `cinny/src/app/features/call/CallControls.tsx`                                                                                                                                                                                                                                                                                               |
+| Hardcoded fallback hexes in toast colors ✅ **FIXED**                                        | `cinny/src/app/features/toast/LotusToastContainer.tsx`                                                                                                                                                                                                                                                                                       |
+
+---
+
+## 🌐 Localization, Accessibility & Performance
+
+| Category      | Issue Description                                                                                                                                                   | File Path                                                      | Status                                                                                                                                                                                                   |
+| :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Localization  | Hardcoded UI string: "Chat Room"                                                                                                                                    | `src/app/components/create-room/CreateRoomTypeSelector.tsx`    | OPEN                                                                                                                                                                                                     |
+| Localization  | Hardcoded UI string: "Messages, photos, and videos."                                                                                                                | `src/app/components/create-room/CreateRoomTypeSelector.tsx`    | OPEN                                                                                                                                                                                                     |
+| Localization  | Hardcoded UI string: "Voice Room"                                                                                                                                   | `src/app/components/create-room/CreateRoomTypeSelector.tsx`    | OPEN                                                                                                                                                                                                     |
+| Localization  | Hardcoded UI string: "Live audio and video conversations."                                                                                                          | `src/app/components/create-room/CreateRoomTypeSelector.tsx`    | OPEN                                                                                                                                                                                                     |
+| Localization  | Hardcoded UI string: "Download"                                                                                                                                     | `src/app/components/image-viewer/ImageViewer.tsx`              | OPEN                                                                                                                                                                                                     |
+| Localization  | Hardcoded UI string: "Open Location"                                                                                                                                | `src/app/components/message/MsgTypeRenderers.tsx`              | OPEN                                                                                                                                                                                                     |
+| Localization  | Hardcoded UI string: "Thread"                                                                                                                                       | `src/app/components/message/Reply.tsx`                         | OPEN                                                                                                                                                                                                     |
+| Localization  | Hardcoded UI string: "View"                                                                                                                                         | `src/app/components/message/content/ImageContent.tsx`          | OPEN                                                                                                                                                                                                     |
+| Localization  | Hardcoded UI string: "Spoiler"                                                                                                                                      | `src/app/components/message/content/ImageContent.tsx`          | OPEN                                                                                                                                                                                                     |
+| Localization  | Hardcoded UI string: "Retry"                                                                                                                                        | `src/app/components/message/content/ImageContent.tsx`          | OPEN                                                                                                                                                                                                     |
+| Localization  | Hardcoded UI string: "Close"                                                                                                                                        | `src/app/components/DeviceVerification.tsx`                    | OPEN                                                                                                                                                                                                     |
+| Localization  | Hardcoded UI string: "Accept"                                                                                                                                       | `src/app/components/DeviceVerification.tsx`                    | OPEN                                                                                                                                                                                                     |
+| Localization  | Hardcoded UI string: "They Match"                                                                                                                                   | `src/app/components/DeviceVerification.tsx`                    | OPEN                                                                                                                                                                                                     |
+| Localization  | Hardcoded UI string: "Okay"                                                                                                                                         | `src/app/components/DeviceVerification.tsx`                    | OPEN                                                                                                                                                                                                     |
+| Localization  | Hardcoded UI string: "Join Server"                                                                                                                                  | `src/app/components/url-preview/UrlPreviewCard.tsx`            | OPEN                                                                                                                                                                                                     |
+| Localization  | Hardcoded UI string: "Invite"                                                                                                                                       | `src/app/components/invite-user-prompt/InviteUserPrompt.tsx`   | OPEN                                                                                                                                                                                                     |
+| Localization  | Hardcoded UI string: "Files"                                                                                                                                        | `src/app/components/upload-board/UploadBoard.tsx`              | OPEN                                                                                                                                                                                                     |
+| Localization  | Hardcoded UI string: "Send"                                                                                                                                         | `src/app/components/upload-board/UploadBoard.tsx`              | OPEN                                                                                                                                                                                                     |
+| Localization  | Hardcoded UI string: "Upload Failed"                                                                                                                                | `src/app/components/upload-board/UploadBoard.tsx`              | OPEN                                                                                                                                                                                                     |
+| Localization  | Hardcoded UI string: "Password"                                                                                                                                     | `src/app/components/uia-stages/PasswordStage.tsx`              | OPEN                                                                                                                                                                                                     |
+| Bundle Size   | Large unoptimized media asset (213KB)                                                                                                                               | `public/res/Lotus.png`                                         | OPEN                                                                                                                                                                                                     |
+| Matrix Logic  | Inefficient repeated `mx.getRoom()` calls in component render loops                                                                                                 | `src/app/features/lobby/Lobby.tsx`                             | OPEN                                                                                                                                                                                                     |
+| Matrix Logic  | Inefficient repeated `mx.getRoom()` calls in component render loops                                                                                                 | `src/app/components/emoji-board/EmojiBoard.tsx`                | OPEN                                                                                                                                                                                                     |
+| Performance   | Numerous event handlers (e.g., handleUserClick, handleReplyClick) lack `useCallback`, leading to unnecessary re-renders of message components.                      | `cinny/src/app/features/room/RoomTimeline.tsx`                 | OPEN                                                                                                                                                                                                     |
+| Performance   | The `submit` function and file handling callbacks (e.g., handleSendUpload) are re-created on every render, causing re-renders of the editor and toolbar components. | `cinny/src/app/features/room/RoomInput.tsx`                    | OPEN                                                                                                                                                                                                     |
+| Accessibility | `button` for edit history lacks `aria-label`                                                                                                                        | `cinny/src/app/components/message/content/FallbackContent.tsx` | FIXED ⚠️ UNTESTED — added `aria-label="View edit history"`                                                                                                                                               |
+| Accessibility | `button` for reaction lacks `aria-label`                                                                                                                            | `cinny/src/app/components/message/Reaction.tsx`                | **FIXED ⚠️ UNTESTED** — `Reaction` component now computes `aria-label="{shortcode} reaction, N people"` internally using `getShortcodeFor`; custom (mxc://) emoji falls back to "custom emoji reaction". |
+| Accessibility | `button` for ThreadIndicator lacks `aria-label`                                                                                                                     | `cinny/src/app/components/message/Reply.tsx`                   | FIXED ⚠️ UNTESTED — added `aria-label="View thread"`                                                                                                                                                     |
+| Accessibility | `button` for ReplyLayout lacks `aria-label`                                                                                                                         | `cinny/src/app/components/message/Reply.tsx`                   | FIXED ⚠️ UNTESTED — added `aria-label="Jump to original message"`                                                                                                                                        |
+
+---
+
+## 🔧 Infrastructure, DevEx & Type Safety
+
+| Category       | Issue Description                                                                                            | File Path                                            | Status |
+| :------------- | :----------------------------------------------------------------------------------------------------------- | :--------------------------------------------------- | :----- |
+| Dependencies   | `lodash` pinned to non-existent version `4.18.1`                                                             | `cinny/package.json`                                 | OPEN   |
+| Dependencies   | Various pinned versions of `@atlaskit`, `matrix-js-sdk`                                                      | `cinny/package.json`                                 | OPEN   |
+| Dependencies   | `matrix-js-sdk` pinned to Release Candidate (`41.6.0-rc.0`)                                                  | `cinny/package.json`                                 | OPEN   |
+| Dependencies   | Unstable/experimental versions for build tools (`vite` 8.0.14, `typescript` 6.0.3, `eslint` 9.39.4)          | `cinny/package.json`                                 | OPEN   |
+| CI/CD          | `package-manager-cache` set to `false`                                                                       | `cinny/.github/workflows/build-pull-request.yml`     | OPEN   |
+| CI/CD          | Inefficient sequential execution in deployment                                                               | `cinny/.github/workflows/prod-deploy.yml`            | OPEN   |
+| CI/CD          | Aggressive 1-minute timeout for Netlify deploy                                                               | `cinny/.github/workflows/prod-deploy.yml`            | OPEN   |
+| DevEx          | Stale upstream bug tracker link/donations/CLA                                                                | `cinny/CONTRIBUTING.md`                              | OPEN   |
+| DevEx          | Alignment issue between README and CONTRIBUTING                                                              | `cinny/README.md`                                    | OPEN   |
+| Testing        | No evident automated testing configuration/files                                                             | `cinny/src/`                                         | OPEN   |
+| Type Safety    | Extensive use of `as any` type assertions                                                                    | `cinny/src/`                                         | OPEN   |
+| Security       | Hardcoded public CDN URL; consider moving to environment variable                                            | /root/code/cinny/scripts/syncDecorations.mjs         | OPEN   |
+| Architecture   | Modifying node_modules directly is brittle; use patch-package instead                                        | /root/code/cinny/scripts/patch-folds.mjs             | OPEN   |
+| Robustness     | Missing security headers (HSTS, CSP, etc.) and inefficient asset serving using rewrites instead of try_files | /root/code/cinny/contrib/nginx/cinny.domain.tld.conf | OPEN   |
+| Robustness     | Incomplete documentation/placeholder path in Caddyfile                                                       | /root/code/cinny/contrib/caddy/caddyfile             | OPEN   |
+| Matrix SDK     | Inefficient listener management (`setMaxListeners: 150`) and incomplete SDK state transition handling.       | `src/client/initMatrix.ts`                           | OPEN   |
+| PWA Robustness | Service worker lacks caching strategy for application assets, resulting in no offline capability.            | `cinny/src/sw.ts`                                    | OPEN   |
+| PWA Integrity  | `manifest: false` in `vite.config.js` might prevent correct PWA installation if not handled externally.      | `cinny/vite.config.js`                               | OPEN   |
+| PII Leakage    | Potential PII exposure via console.error (parameter e likely contains event data).                           | `cinny/src/app/plugins/call/CallEmbed.ts`            | OPEN   |
+| PII Leakage    | Potential PII exposure via console.warn (parameter imgError/videoError/thumbError object).                   | `cinny/src/app/features/room/msgContent.ts`          | OPEN   |
+| PII Leakage    | Potential PII exposure via console.error (parameter e likely contains event data).                           | `cinny/src/app/features/room/RoomInput.tsx`          | OPEN   |
+
+## 🏗️ Architectural & Resilience Audit
+
+| Category                 | Issue Description                                                                                                                                                                                            | File Path                                               | Status |
+| :----------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------ | :----- |
+| Element Call Integration | Lacks robust iframe failure monitoring beyond initial 'preparing' event; can result in a permanently hung 'Loading...' state with no user-visible error or recovery path.                                    | `src/app/plugins/call/CallEmbed.ts`                     | OPEN   |
+| Component Resilience     | `RoomTimeline` has no `ErrorBoundary` wrapper — a single malformed event crashing the renderer takes down the entire timeline with no fallback UI.                                                           | `src/app/features/room/RoomTimeline.tsx`                | OPEN   |
+| Component Resilience     | `RoomInput` has no `ErrorBoundary` wrapper — a crash in the composer leaves users unable to send messages.                                                                                                   | `src/app/features/room/RoomInput.tsx`                   | OPEN   |
+| Fallback Logic           | No explicit empty/error fallback for Matrix SDK data calls in `RoomTimeline`; relies purely on SDK internal error propagation, meaning silent failures show a blank timeline.                                | `src/app/features/room/RoomTimeline.tsx`                | OPEN   |
+| Dependency               | Potential for complex dependency chains due to deep nesting in `src/app/features/` and `src/app/hooks/`.                                                                                                     | `src/app/`                                              | OPEN   |
+| Hydration/Race Condition | The SyncState listener registered by useSyncState may miss the initial 'PREPARED' event if the client initializes synchronously from IndexedDB before the effect runs, leading to an infinite loading state. | `cinny/src/app/pages/client/ClientRoot.tsx`             | OPEN   |
+| Structure                | High number of small, highly coupled utility hooks (`src/app/hooks/`) may obscure dependency graphs.                                                                                                         | `src/app/hooks/`                                        | OPEN   |
+| Dead Code                | Potential for unused CSS modules or UI components in `src/app/features/`.                                                                                                                                    | `src/app/`                                              | OPEN   |
+| Security                 | Sensitive session data (access tokens, device ID) stored in `localStorage` is vulnerable to XSS.                                                                                                             | `src/app/state/sessions.ts`                             | OPEN   |
+| Privacy                  | Sensitive user status messages and expiry timestamps are persisted in `localStorage`.                                                                                                                        | `src/app/features/settings/account/Profile.tsx`         | OPEN   |
+| Privacy                  | Unsent composer drafts stored in `localStorage` without encryption could leak info on shared devices.                                                                                                        | `src/app/features/room/RoomInput.tsx`                   | OPEN   |
+| Persistence              | Scheduled messages relying on fragile `localStorage` parsing are prone to data loss on session expiry or error.                                                                                              | `src/app/state/scheduledMessages.ts`                    | OPEN   |
+| Bundle Bloat             | Inefficient `lodash` import; risks including entire library instead of necessary utilities.                                                                                                                  | `cinny/package.json`                                    | OPEN   |
+| Bundle Bloat             | Large `matrix-js-sdk` (RC version) dependency; high potential for tree-shaking overhead.                                                                                                                     | `cinny/package.json`                                    | OPEN   |
+| Build-Time Overhead      | `lotusDenoise` plugin performs heavy, sequential `fs` operations during `closeBundle`, significantly slowing build times.                                                                                    | `cinny/vite.config.js`                                  | OPEN   |
+| Build-Time Overhead      | Complex manual `viteStaticCopy` configuration requiring multiple renames and path manipulations; risks redundant processing.                                                                                 | `cinny/vite.config.js`                                  | OPEN   |
+| Architectural Debt       | Redundant style variant logic in `SpacingVariant` could be simplified.                                                                                                                                       | `cinny/src/app/components/message/layout/layout.css.ts` | OPEN   |
+| Overhead Analysis        | Potential CSS bloat from `DropTarget` composition across multiple recipes (`SidebarItem`, `SidebarFolder`).                                                                                                  | `cinny/src/app/components/sidebar/Sidebar.css.ts`       | OPEN   |
+
+## 🏗️ Git Workflow & History Audit
+
+| Category | Issue Description                                                                                       | File Path   | Status |
+| :------- | :------------------------------------------------------------------------------------------------------ | :---------- | :----- |
+| Workflow | Monolithic "Fix all bugs" commits (e.g., `10f6544e`, `aa48c9ef`) make `git bisect` difficult.           | Git History | OPEN   |
+| Workflow | Inconsistent commit message prefixes (e.g., `fix`, `feat`, `docs`, `assets`).                           | Git History | OPEN   |
+| Workflow | Use of `fix` or `feat` for large-scale changes affecting multiple disparate systems (e.g., `938ead79`). | Git History | OPEN   |
+
+---
+
+## 🎨 Native UI/UX Consistency — Lotus vs. Cinny Baseline
+
+> Audit of every Lotus-custom UI feature against Cinny's native folds design-system conventions. "Native pattern" means the `folds` component library, vanilla-extract tokens (`color.*`, `config.radii.*`, `config.space.*`), and established Cinny component patterns. 52 findings, organized by severity.
+
+---
+
+### 🔴 Major — Broken Styling / Functional Regressions
+
+#### N1. `ProfileDecoration` Save Button — Undefined `--accent-cyan` Variable (border invisible on all non-TDS themes)
+
+- **File:** `src/app/features/settings/account/ProfileDecoration.tsx`, lines 191–213
+- **Status:** **FIXED** — replaced raw `<button>` with `<Button size="400" variant="Success" fill="Solid" radii="300">`, removed undefined `--accent-cyan` reference
+- **Issue:** The save button is a raw `<button>` with `border: '1px solid var(--accent-cyan)'` and `color: 'var(--accent-cyan)'`. The variable `--accent-cyan` (without the `--lt-` prefix) is never defined in any theme file — the correct prefixed form is `--lt-accent-cyan`. On all non-TDS themes the border is **invisible** and the text has no color.
+- **Root Cause:** Missing `--lt-` prefix. Additionally, the raw `<button>` should be a folds `<Button>` to match every other save button in the same `Profile.tsx` settings panel (e.g., `ProfileDisplayName` save at `Profile.tsx:303`).
+- **Fix:** Replace raw `<button>` with `<Button size="400" variant="Success" fill="Solid" radii="300">`. Remove the `--accent-cyan` reference.
+
+#### N2. `UserPrivateNotes` Textarea — Undefined `--border-interactive` Variable (border invisible on all themes)
+
+- **File:** `src/app/components/user-profile/UserRoomProfile.tsx`, lines 246–265
+- **Status:** **FIXED** — replaced undefined CSS vars with `color.SurfaceVariant.ContainerLine`, `config.radii.R300`, `config.space.S200/S300`
+- **Issue:** The notes textarea sets `border: '1px solid var(--border-interactive)'`. This variable is never defined anywhere in the codebase — the correct equivalents are `--bg-surface-border` (`src/index.css`) or `color.SurfaceVariant.ContainerLine` (folds token). The border is **invisible on all themes**.
+- **Root Cause:** Invented CSS variable name. Also uses raw pixel sizing (`borderRadius: '6px'`, `padding: '8px 10px'`, `fontSize: '14px'`) instead of folds tokens.
+- **Fix:** Replace inline style with `border: \`1px solid ${color.SurfaceVariant.ContainerLine}\``, `borderRadius: config.radii.R300`, `padding: config.space.S200`.
+
+#### N3. `LotusToastContainer` — Z-Index Places Toasts Below Night Light Overlay and All Modals
+
+- **File:** `src/app/features/toast/LotusToastContainer.tsx`, lines 184–211; `src/app/pages/App.tsx`
+- **Status:** **FIXED** — raised toast `zIndex` from `9997` to `10001` (above Night Light at 9998 and modals at 9999)
+- **Issue:** The toast container uses hardcoded `zIndex: 9997`. The Night Light overlay is at `z-index: 9998`. The folds `Overlay`/`Dialog` components used for all modals resolve to `z-index: 9999`. Result: (a) toasts render **under** the Night Light tint and take on the warm orange filter; (b) any open modal covers toasts entirely, making notifications invisible.
+- **Root Cause:** The toast container does not use the `folds` `OverlayContainerProvider` portal that manages z-index correctly — it is a plain `position: fixed` div injected directly in `App.tsx`.
+- **Fix:** Either route the toast portal through `OverlayContainerProvider` (matching how all other floating UI works), or raise `zIndex` above all overlay layers (10001+). Also audit Night Light's z-index (9998) relative to toasts.
+
+#### N4. `PollContent` Vote Buttons — Entirely Outside the Folds Design System
+
+- **File:** `src/app/components/message/content/PollContent.tsx`, lines 250–358
+- **Status:** **OPEN**
+- **Issue:** Each poll answer is a native `<button>` with ~15 hardcoded inline style properties using undefined CSS variables (`--accent-cyan`, `--accent-cyan-dim`, `--accent-cyan-border`). Checkbox/radio indicators, percentage spans, and the poll label use raw pixel font sizes (`0.68rem`, `0.78rem`, `0.88rem`) and hardcoded `borderRadius: '8px'`. None of these variables exist in any theme — the entire component will render unstyled on non-TDS themes. All other interactive message content (audio, file, image) uses folds `Chip` or `Button` variants.
+- **Root Cause:** Custom implementation that bypasses folds primitives entirely.
+- **Fix:** Rewrite using folds `Button` or `Chip` for answers; replace `--accent-cyan*` with `color.Secondary.*` folds tokens; use `Text size="T300"` for labels.
+
+---
+
+### 🟠 Moderate — Interaction Pattern or Visual Deviations
+
+| #   | Area                       | File                                      | Lines             | Issue                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Native Pattern                                                                                                                                                                                                 |
+| :-- | :------------------------- | :---------------------------------------- | :---------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| N5  | Read Receipts              | `ReadReceiptAvatars.tsx`                  | 62–137            | Trigger button is raw `<button>` with `onMouseEnter`/`onMouseLeave` JS style mutation for hover state — **FIXED**: hover/focus emphasis moved to co-located `ReadReceiptAvatars.css.ts` (`:hover`/`:focus-visible`), no JS `.style` mutation                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | All interactive elements use `useHover` from `react-aria` and folds variant system for hover; direct `.style` mutation used nowhere else on buttons                                                            |
+| N6  | Read Receipts              | `ReadReceiptAvatars.tsx` & `Message.tsx`  | 32–56 / 268–283   | Two code paths open `EventReaders`: avatar-pill path uses `useModalStyle(360)` for mobile fullscreen; context-menu path (`MessageReadReceiptItem`) does not — on mobile the context menu path opens a fixed-size non-fullscreen modal for the same content                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | All modals that share a layout variant use `useModalStyle` consistently; `MessageReadReceiptItem` was not updated when `useModalStyle` was added                                                               |
+| N7  | Delivery Status            | `Message.tsx`                             | 89–148            | `DeliveryStatus` renders Unicode glyphs (`⟳ ✓ ✕`) in a `<span>` with `fontSize: '10px'` instead of folds `<Icon>` components — **FIXED**: replaced with `Icons.Check/Cross/Send` via `<Icon size="100">`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `Icons.Check`, `Icons.Cross`, etc. are used for all other status glyphs; folds `Text` size tokens for all supplementary text                                                                                   |
+| N8  | GIF Picker                 | `GifPicker.tsx`                           | 83–124            | GIF picker container uses fully bespoke inline styles (`borderRadius: '12px'`, `boxShadow: '0 8px 32px rgba(0,0,0,0.4)'`, raw `rgba` border) — two separate style sets for TDS and non-TDS paths — **FIXED**: non-TDS path now uses folds tokens (`color.Surface.Container`, `config.radii.R400`, `color.Surface.ContainerLine`, `color.Other.Shadow`), dropping the undefined `var(--bg-surface)`; the TDS branch keeps its `--lt-*` glow chrome (valid TDS styling)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `EmojiBoard` has no caller-applied container styling; folds components handle their own surface internally via design tokens                                                                                   |
+| N9  | GIF Button                 | `RoomInput.tsx`                           | 1076–1087         | GIF toolbar button renders `<Text size="T200">` with hand-rolled `fontWeight`/`fontSize`/`letterSpacing` instead of `<Icon>` — **WON'T FIX (deliberate)**: folds has no GIF icon, and "GIF" is a widely-recognized text affordance (Slack/Discord/Element all use a text label). Converting to an arbitrary icon would be less clear, not more.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | All 8 other toolbar buttons (`Smile`, `Sticker`, `Location`, `Poll`, etc.) use `<Icon src={...} />` exclusively                                                                                                |
+| N10 | Send Animation             | `Message.tsx` + `Animations.css.ts`       | 979–998 / 60–71   | `MsgAppearClass` and `MentionHighlightPulse` both animate `transform: scale` on the same `MessageBase` DOM node — on self-sent mention messages both classes apply simultaneously and fight over the `transform` property — **FIXED**: `mentionPulseKeyframes` now animates only `box-shadow` (dropped the imperceptible `scale(1.003)`), so the appear-scale and the mention glow no longer contend for `transform`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | Pre-existing `highlightAnime` only animates `backgroundColor`; no prior `transform` animation on `MessageBase`                                                                                                 |
+| N11 | AvatarDecoration           | `AvatarDecoration.tsx`                    | 5 / 38–41         | Fixed 8px inset on all sides regardless of avatar size — at folds size `"200"` (~32px) the decoration bleeds 50% of the avatar diameter, clipping against `overflow: hidden` parent containers in member lists. **Inset issue still OPEN.** _Related regression fixed in `useAvatarDecoration.ts`_: the decoration fetch cached **all** failures (including transient 429/5xx) as "no decoration" permanently for the session, so a single rate-limited burst (member list / timeline mount many avatars at once) would make decorations vanish until a full reload. Now only a genuine 404 is cached; transient errors retry on the next mount.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | Folds `Avatar` and `PresenceRingAvatar` do not emit overflow outside their bounding box                                                                                                                        |
+| N12 | MediaGallery Drawer        | `MediaGallery.tsx`                        | 651–661           | Drawer uses `position: 'fixed'` with hardcoded `width: '320px'` as inline styles on a `<Box>` — **FIXED**: moved positioning/width into co-located `MediaGallery.css.ts` using `toRem(320)` + a `max-width: 750px` full-screen media query (mirrors `MembersDrawer`); border/header now use `config.borderWidth`/`config.space` tokens. Added Escape-to-close on the panel (previously only the lightbox handled Escape). **Full chrome redesign (round 2)** to match native conventions: panel + header switched from `Surface` to `Background` variant (matching `MembersDrawer`/Saved Messages); header now `Text size="H4"` + plain close `IconButton` (dropped the bespoke tooltip-wrapped button); tabs moved to a bordered toolbar strip with the `variant={active?'Primary':'Secondary'} fill={active?'Solid':'Soft'}` pattern from `PolicyListViewer` and now show per-tab counts; the centered "lines + label" month divider replaced with a left-aligned group label (Cinny group-label pattern); thumbnail tiles moved hover/focus styling to CSS `:hover`/`:focus-visible` (no JS hover state) and into `MediaGallery.css.ts`; file rows + grid tokenized. **Docking fix (round 3)** — the core of the finding: the gallery was a `position: fixed` overlay floating over the timeline, mounted from `RoomViewHeader`. It is now a **docked flex sibling** in the room layout row, exactly like `MembersDrawer`: open state lifted to a `mediaGalleryAtom` (mirrors `bookmarksPanelAtom`), rendered in `Room.tsx` with a vertical `Line` separator on desktop and `key={room.roomId}` to reset per room; the CSS is static-width on desktop and only `position: fixed; inset: 0` full-screen on mobile (identical strategy to `MembersDrawer.css`). It now shares the row with the timeline instead of overlapping it. | `MembersDrawer` uses a vanilla-extract class with `width: toRem(266)` and is placed by the layout system, not `position: fixed`. 54px width discrepancy also breaks visual rhythm if both panels could be open |
+| N13 | ScheduledMessagesTray      | `ScheduledMessagesTray.tsx`               | 108–126           | Collapsible tray header is `<Box as="button">` with `cursor: 'pointer'` inline style and no folds variant — no hover state, no focus ring — **FIXED**: replaced with folds `<Button variant="Secondary" fill="None" radii="0">` using `before`/`after` icon props (gains design-system hover/focus)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | All clickable header/toggle elements in the room view use folds `<Button>` or `<IconButton>` with explicit variants for hover/focus; `<Box as="button">` with no variant is used nowhere else                  |
+| N14 | ForwardMessageDialog       | `ForwardMessageDialog.tsx`                | 137–154           | Dialog uses `<Modal>` but has no `<Header>` component and no close `<IconButton>` — only way to close is clicking outside — **FIXED**: added a folds `<Header variant="Surface" size="500">` with the title + close `<IconButton radii="300">`, matching every other modal                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Every other modal using `<Modal>` or `<Box role="dialog">` includes a `<Header>` with a close `<IconButton>` in the top-right (EditHistoryModal, LeaveRoomPrompt, ScheduleMessageModal, RemindMeDialog, etc.)  |
+| N15 | ScheduleMessageModal       | `ScheduleMessageModal.tsx`                | 180–193           | Modal root is `<Box as="form" role="dialog">` with manually assembled `borderRadius: config.radii.R400`/`boxShadow` — **FIXED**: shell is now `<Dialog as="form" variant="Surface">`; removed inline surface styles                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `ForwardMessageDialog` uses folds `<Modal size="400">` with `R500` radius; the R400 vs R500 mismatch is visible when both dialogs appear in the same session                                                   |
+| N16 | Presence Picker            | `SettingsTab.tsx`                         | 118–144           | Presence trigger dot is raw `<button>` with `position: absolute; bottom: 2; right: 2` inline and no folds focus ring; no tooltip — **FIXED**: wrapped the trigger in a folds `TooltipProvider` (shows "Status: …"); replaced the undefined `var(--bg-surface)` with `color.Background.Container`. Kept the absolute-positioned `<button>` (it overlays the avatar corner; a full `IconButton` would be too large for the dot).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | Every other sidebar icon button uses folds `IconButton` with `SidebarItemTooltip` and `TooltipProvider`                                                                                                        |
+| N17 | Presence Picker            | `SettingsTab.tsx`                         | 80–86             | `PresencePicker` `FocusTrap` missing `escapeDeactivates: stopPropagation` and `isKeyForward`/`isKeyBackward` — **FIXED**: added all three options, matching the theme selector / sort menus                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | Every other `PopOut`+`FocusTrap`+`Menu` combo supplies both (theme selector `General.tsx:143–160`, `SettingsSelect`, sort menus) — without it Escape bubbles past the trap and arrow-key navigation is absent  |
+| N18 | Profile Selects            | `Profile.tsx`                             | 547–575 / 816–848 | `ProfileStatus` auto-clear and `ProfileTimezone` selectors are native `<select>` elements with hardcoded `colorScheme: 'dark'` — will render in dark mode on light themes                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | General.tsx uses folds `SettingsSelect<T>` (`Button`+`PopOut`+`Menu`) for all dropdowns; `colorScheme: 'dark'` breaks light/custom theme appearance                                                            |
+| N19 | Presence Labels            | `useUserPresence.ts` vs `SettingsTab.tsx` | 55–62 / 36–42     | `PresenceBadge` tooltip shows "Active / Busy / Away"; `PresencePicker` options read "Online / Idle / Do Not Disturb / Invisible" — a DND user shows tooltip "Busy", not "Do Not Disturb" — **FIXED**: aligned `usePresenceLabel` reader vocabulary to the setter (online→"Online", unavailable→"Idle", offline→"Offline")                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Within the same Lotus feature set the user-facing vocabulary is inconsistent between the setter UI and the reader tooltip                                                                                      |
+| N20 | Notification Presets       | `Notifications.tsx`                       | 57–107            | Gaming/Work/Sleep preset buttons are bare `<button>` elements with Lotus-specific CSS vars (`--border-interactive-normal`, `--bg-surface-low`) not defined in all themes — **FIXED**: converted to folds `<Button variant="Secondary" fill="Soft" radii="300">` (auto height) wrapping the emoji/label/description column; undefined vars removed                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | Grouped preset/action buttons elsewhere use folds `Chip variant="Primary/Secondary" outlined radii="Pill"` (e.g., Composer Toolbar toggles in `General.tsx:1100–1113`)                                         |
+| N21 | Notification Sound Selects | `SystemNotification.tsx`                  | 111–305           | Message sound, invite sound, and quiet-hours time pickers are bare `<select>`/`<input type="time">` with `colorScheme: 'dark'` workaround                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | All other dropdowns in settings use the `Button`+`PopOut`+`Menu`+`MenuItem` folds pattern; the native select renders OS-styled on all platforms                                                                |
+| N22 | DM Preview Virtualizer     | `RoomNavItem.tsx` / `Direct.tsx`          | 608–627 / 232     | DM preview adds a second text row to each DM item, making it taller than 38px, but `useVirtualizer` in `Direct.tsx` still uses `estimateSize: () => 38` — causes layout jump/overlap on initial render — **FIXED**: bumped `estimateSize` to 52 (the two-line DM-row height) so the initial estimate matches the common case; `measureElement` still corrects each row exactly                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | Non-DM rooms in Home.tsx also estimate 38px; DM items with a preview are now a different height, creating two visual densities in the same nav column                                                          |
+| N23 | RoomServerACL              | `RoomServerACL.tsx`                       | 100–115 / 298–309 | Server-name text input is a raw `<input type="text">` with inline style object; "Allow IP literal addresses" is a raw `<input type="checkbox">` with `style={{ width: 16, height: 16 }}` — **FIXED**: text input → folds `<Input variant={error?'Critical':'Secondary'}>`; checkbox → folds `<Checkbox variant="Primary">`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | All other text/boolean controls in room settings use folds `Input` and `Checkbox` components (`RoomAddress.tsx:163`, `RoomAddress.tsx:330`)                                                                    |
+| N24 | PolicyListViewer           | `PolicyListViewer.tsx`                    | 245–264           | Room-ID add input is a raw `<input type="text">` with manually replicated folds token values — **FIXED**: replaced with folds `<Input variant={error?'Critical':'Secondary'} size="400" radii="300">`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Native pattern: folds `<Input variant="Secondary" size="300" radii="300">` — no inline style needed                                                                                                            |
+| N25 | ExportRoomHistory Inputs   | `ExportRoomHistory.tsx`                   | 258–292           | Both date range pickers are raw `<input type="date">` with inline styles — **FIXED**: replaced with folds `<Input type="date" variant="Secondary" size="400" radii="300">`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Native pattern: folds `Input` component; `<input type="date">` renders OS-native date picker, unstyled relative to the rest of the settings panel                                                              |
+| N26 | RoomShareInvite QR         | `RoomShareInvite.tsx`                     | 66–73             | QR code `<img>` has no `onError` handler and no loading state — broken-image placeholder shown when the external API is unreachable — **FIXED**: added `loading="lazy"` + `onError` that swaps to a folds "QR code unavailable" placeholder card                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | Cinny avatar components and MediaGallery use `onError` handlers; this is the only settings element making a request to a third-party server with no graceful degradation                                       |
+
+---
+
+### 🟡 Minor — Cosmetic / Token Discipline
+
+| #       | Area                               | File                                   | Lines             | Issue                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | Native Pattern                                                                                                                                                                     |
+| :------ | :--------------------------------- | :------------------------------------- | :---------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| N27     | GIF Picker                         | `GifPicker.tsx`                        | 103–110           | `FocusTrap` omits `returnFocusOnDeactivate: false` — focus returns to GIF button on dismiss instead of staying in the editor — **FIXED**: added `returnFocusOnDeactivate: false` (matches EmojiBoard)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `EmojiBoard` in `RoomInput.tsx:978` explicitly sets `returnFocusOnDeactivate={false}`; GIF picker dismiss behaviour is inconsistent with emoji picker                              |
+| N28     | Character Counter                  | `RoomInput.tsx`                        | 1159–1174         | Composer character counter rendered with `color: 'var(--tc-surface-low)'` and raw pixel padding — a CSS variable not used anywhere else in the codebase — **FIXED**: removed undefined var and raw opacity; now `<Text priority="300">` with `config.space.S100` padding                                                                                                                                                                                                                                                                                                                                                                                                                    | Use `color.*` folds tokens or `priority="300"` on a `Text` component                                                                                                               |
+| N29     | PollCreator Modal                  | `PollCreator.tsx`                      | 103–116           | Modal root is `<Box as="form" role="dialog" aria-modal="true">` with manually assembled surface styles instead of folds `<Dialog variant="Surface">` — **FIXED**: shell is now `<Dialog as="form" variant="Surface">`; removed inline surface styles                                                                                                                                                                                                                                                                                                                                                                                                                                        | `MessageDeleteItem` and `MessageReportItem` in `Message.tsx:506,635` use `<Dialog variant="Surface">` inside `OverlayCenter > FocusTrap`                                           |
+| N30     | Playback Speed Chip                | `AudioContent.tsx`                     | 163–189           | Speed chip uses `variant="SurfaceVariant" radii="Pill"` while adjacent Play/Pause chip uses `variant="Secondary" radii="300"` — mismatched shape and variant within the same `leftControl` row — **FIXED**: changed speed chip to `variant="Secondary" radii="300"`                                                                                                                                                                                                                                                                                                                                                                                                                         | Controls grouped in the same row should share variant and radii                                                                                                                    |
+| N31     | Collapsible Message Toggle         | `MsgTypeRenderers.tsx`                 | 97–105            | "Read more ↓" / "Show less ↑" uses `<Button size="300" variant="Secondary" fill="None">` — visually a padded form button — **FIXED**: replaced with the native flush inline-button pattern (`background:none;border:none;padding:0`) + `<Text size="T200">` tinted `color.Primary.Main`, matching `(edited)` in FallbackContent                                                                                                                                                                                                                                                                                                                                                             | Inline text toggles in message content (e.g. `(edited)` in `FallbackContent.tsx:74`) use bare `<button>` with `background: none; border: none; padding: 0` to stay flush with text |
+| N32     | ReadReceiptAvatars Pill            | `ReadReceiptAvatars.tsx`               | 95–103            | Pill border is `'1px solid rgba(0,212,255,0.30)'` hardcoded raw rgba string; `borderRadius: '999px'` not a folds radii token; padding in raw pixels — **FIXED**: replaced with `config.borderWidth.B300`, `config.radii.Pill`, `config.space.S100/S200`                                                                                                                                                                                                                                                                                                                                                                                                                                     | Use `color.*` folds tokens and `config.radii.Pill` / `config.space.S*`                                                                                                             |
+| ~~N33~~ | ~~ReadReceiptAvatars Class~~       | ~~`ReadReceiptAvatars.tsx`~~           | ~~67~~            | ~~`className="receipt-pill-btn"` references a class never defined~~ — **FIXED**: removed dead className                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | All custom CSS goes through co-located vanilla-extract `*.css.ts` files                                                                                                            |
+| N34     | EventReaders Header Size           | `EventReaders.tsx`                     | 70                | `Header size="600"` (56px tall) while all peer message-action modals use `size="500"` (48px) — **FIXED**: changed to `size="500"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `EditHistoryModal`, `LeaveRoomPrompt`, `MessageDeleteItem`, `MessageReportItem` all use `size="500"`; `size="600"` is reserved for full-page panel headers                         |
+| N35     | EventReaders Close Button          | `EventReaders.tsx`                     | 96                | Close `IconButton` missing explicit `radii="300"` prop — **FIXED**: added `radii="300"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | Every peer modal close button explicitly sets `radii="300"` (EditHistoryModal:184, LeaveRoomPrompt:75, MessageDeleteItem:517)                                                      |
+| N36     | EventReaders Header Border         | `EventReaders.tsx`                     | 72–77             | Lotus-mode header sets `borderBottom: '1px solid var(--lt-border-color)'` as a CSS shorthand string — **FIXED**: changed to `borderBottomWidth: config.borderWidth.B300`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | Native modals use `borderBottomWidth: config.borderWidth.B300` to avoid overriding the border-color set by the folds variant system                                                |
+| N37     | EventReaders Timestamp             | `EventReaders.tsx`                     | 143–151           | Lotus path sets `fontSize: '0.72rem'` inline — a raw relative unit between folds `T200` and `T100` scale steps — **FIXED**: removed raw `fontSize`, added `priority="300"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | Use folds `Text size="T200" priority="300"` for subdued secondary text                                                                                                             |
+| N38     | BookmarksPanel Header              | `BookmarksPanel.tsx`                   | 155–196           | Header uses `variant="Surface"` and close button uses `size="300" radii="300"`; also has a SurfaceVariant search bar strip with no equivalent in any native drawer — **FIXED (full redesign)**: rebuilt the whole "Saved Messages" panel to match the canonical `MembersDrawer` — co-located `BookmarksPanel.css.ts` (`toRem(266)` + `max-width:750px` full-screen media query, replacing the old `position:absolute; zIndex:100` mobile "modal" that had no backdrop/escape), `variant="Background"` header, room **avatars** on each item (was a generic hash icon), `priority` tokens replacing all raw `opacity` hacks, the `borderLeft:3px` accent removed, and Escape-to-close added. | `MembersDrawer` header uses `variant="Background"` and default-size close button; the extra search+count strip creates a structurally different component family                   |
+| N39     | Forward Menu Icon                  | `Message.tsx`                          | 1150              | Forward context menu item's `after` icon has no `size="100"` prop — **FIXED**: added `size="100"` to the `ArrowRight` icon                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | Every other after-icon in the same menu block explicitly uses `size="100"` (Reply, Reaction, Edit, Remind Me, Bookmark); missing size causes the Forward icon to render larger     |
+| N40     | ProfileDecoration Remove Button    | `ProfileDecoration.tsx`                | 185               | "Remove" link is a raw `<button>` with `background: 'none'; color: 'var(--tc-surface-low-contrast)'` — an undefined CSS variable — **FIXED**: replaced with `<Button variant="Critical" fill="None" size="300" radii="300">`                                                                                                                                                                                                                                                                                                                                                                                                                                                                | Use folds `<Button variant="Critical" fill="None">` or a `Text`-styled inline link                                                                                                 |
+| N41     | PresenceBadge / UserNotes Saving   | `UserRoomProfile.tsx`                  | 240–244           | "Saving…" indicator is `<Text opacity={0.5}>` without a spinner — **FIXED**: now shows a folds `<Spinner variant="Success" fill="Solid" size="100">` beside the "Saving…" text                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Every other save operation in `Profile.tsx` shows a folds `<Spinner variant="Success" fill="Solid" size="300">` alongside the save button                                          |
+| N42     | Character Counter Convention       | `UserRoomProfile.tsx` vs `Profile.tsx` | 243 / 479–490     | `UserPrivateNotes` shows remaining count `"N left"`, appears only under 100; `ProfileStatus` shows `"current / 64"` always with color progression                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Two Lotus features in the same settings flow use different counter conventions; neither matches a pre-existing Cinny pattern                                                       |
+| N43     | Night Light Slider                 | `General.tsx`                          | 554–565           | Night Light intensity slider is a raw `<input type="range">` with no `accentColor` token — renders in browser-default blue on all themes — **FIXED**: added `accentColor: color.Primary.Main`; the intensity label `opacity` hack also replaced with `priority="300"`                                                                                                                                                                                                                                                                                                                                                                                                                       | The Gate Threshold slider at `General.tsx:1456` at minimum sets `accentColor: 'var(--accent-orange)'`; the Night Light slider does neither                                         |
+| N44     | Mention Highlight & Boot Button    | `General.tsx`                          | 597–677           | `<input type="color">` for mention highlight uses raw pixel dimensions (`width: '36px'`, `height: '28px'`, `borderRadius: '4px'`); Reset and Boot buttons are bare `<button>` with Lotus CSS vars — **PARTIALLY FIXED**: the mention-highlight Reset button (renders on all themes) is now a folds `<Button variant="Secondary" fill="Soft">`, removing the undefined `--border-interactive-normal` var. The Boot button is **deliberately kept** as-is: it only renders when `lotusTerminal` is active, i.e. exactly when the `--accent-orange*` TDS vars are defined. The `<input type="color">` itself is tracked separately as N69.                                                     | Adjacent settings controls use folds `IconButton`/`Button`; there is no other `<input type="color">` in the Cinny settings UI                                                      |
+| N45     | SettingsSelect vs SelectTheme      | `General.tsx`                          | 126 vs 197        | `SettingsSelect` trigger uses `variant="Secondary"` while `SelectTheme` uses `variant="Primary" outlined fill="Soft"` for the same `Button`+`PopOut` dropdown pattern — adjacent rows in the same Appearance section have different visual weight — **FIXED**: `SelectTheme` trigger changed to `variant="Secondary"` to match `SettingsSelect`                                                                                                                                                                                                                                                                                                                                             | Dropdown triggers should share the same variant within the same settings section                                                                                                   |
+| N46     | RoomInsights SectionHeader         | `RoomInsights.tsx`                     | 24–37             | `SectionHeader` adds `textTransform: 'uppercase'`, `letterSpacing: '0.06em'`, `opacity: 0.6` to `Text size="L400"` — **FIXED**: simplified to `<Text size="L400" priority="300">`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Every other settings panel uses bare `<Text size="L400">Label</Text>` with no transforms (`General.tsx:52–72`, `ExportRoomHistory.tsx:220,246`)                                    |
+| N47     | RoomInsights Chart Radii           | `RoomInsights.tsx`                     | 350–356 / 415–436 | Bar chart uses `borderRadius: 3` and histogram bars use `borderRadius: '2px 2px 0 0'` as raw pixel integers — **FIXED**: replaced with `config.radii.R300`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | All other rounded corners use `config.radii.*` tokens                                                                                                                              |
+| N48     | RoomInsights Font Size             | `RoomInsights.tsx`                     | 448               | Hour-axis labels set `style={{ fontSize: 9 }}` as a raw pixel integer — overrides the folds `Text size="T200"` applied on the same element — **FIXED**: removed raw `style={{ fontSize: 9 }}`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Use only folds `Text` size props; never override with raw `fontSize`                                                                                                               |
+| N49     | RoomInsights Emoji Icons           | `RoomInsights.tsx`                     | 41–65 / 292–295   | `StatTile` uses literal Unicode emoji (`🖼️ 🎬 🎵 📎`) in `<Text size="H4">` as icons — **FIXED**: `StatTile` now takes an `icon: IconSrc` and renders `<Icon>` using `Icons.Photo/VideoCamera/Headphone/File`                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | All other iconographic elements use `<Icon src={Icons.*} />` from folds — emoji rendering varies between Windows/macOS/Linux and cannot be tinted by the theme                     |
+| N50     | RoomInsights Warning Banner        | `RoomInsights.tsx`                     | 168–192           | Disclaimer banner uses raw `<Box style={{ border: color.Warning.Main, background: color.Warning.Container }}>` — **FIXED**: replaced with `<SequenceCard variant="SurfaceVariant">` with `<Icon>` colored via `color.Warning.Main`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Settings panel informational cards use `<SequenceCard variant="SurfaceVariant">` throughout RoomServerACL, ExportRoomHistory, PolicyListViewer                                     |
+| N51     | ExportRoomHistory Progress         | `ExportRoomHistory.tsx`                | 311–314           | Export progress shows as a plain `Text` string ("Exporting… N messages") — **WON'T FIX (deliberate)**: unlike `BackupRestore` (which has a known total to drive a determinate `ProgressBar`), export has no known total — it counts messages as they stream. The operation already shows a folds `Spinner` in the button plus a live count, which is the correct affordance for an indeterminate task.                                                                                                                                                                                                                                                                                      | `BackupRestore.tsx:72,90` uses a folds `<ProgressBar variant="Secondary" size="300">` for the same kind of long async operation                                                    |
+| N52     | MessageQuickReactions Empty Return | `Message.tsx`                          | 160               | `if (recentEmojis.length === 0) return <span />;` — injects an invisible DOM node into the hover action bar flex container — **FIXED**: changed to `return null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | Universal convention for empty renders in Cinny is `return null`; 144+ instances across the codebase; the empty `<span>` can affect flex spacing                                   |
+
+---
+
+### Round 2 — Additional Feature Areas
+
+#### 🔴 Additional Major Findings
+
+**N53 — PTT Badge (Lotus Terminal path): Raw `<div>` tree with `--lt-*` CSS vars instead of folds `<Chip>`**
+
+- **File:** `src/app/features/call/CallControls.tsx`, lines 242–282
+- **Status:** **OPEN**
+- **Issue:** When `lotusTerminal` is true the PTT badge renders as a bare `<Box>` with inline styles referencing `--lt-accent-green-dim`, `--lt-accent-green-border`, `--lt-accent-green` — variables absent outside TDS mode — hardcoded rem padding, `borderRadius: '99px'` (non-token), a raw monospace `fontFamily` string, non-token `letterSpacing`, and a raw `animation:` CSS string for the live-pulse dot. The live `●` dot is a raw `<span>` with inline style.
+- **Root Cause:** Two entirely separate component trees for the same badge depending on a theme boolean. The non-terminal path (lines 284–301) uses the correct `<Chip variant="Success"|"Warning" fill="Soft" radii="400" outlined>`.
+- **Fix:** Remove the terminal branch. The standard `<Chip>` path already exists and TDS theming can be applied via the CSS variable layer without a separate component tree.
+
+**N54 — PiP Mute Overlay Badges: Raw `<div>` instead of folds `<Badge>`/`<Chip>`**
+
+- **File:** `src/app/components/CallEmbedProvider.tsx`, lines 438–477
+- **Status:** **FIXED** — replaced hardcoded `borderRadius`/`padding`/`fontSize` with `config.radii.R300`, `config.space.S100/S200` tokens; replaced raw `<span>` text with folds `<Text size="T200">`; color now applied to the `Icon`/`Text` via `color.Critical/Warning.Main`. The dark translucent scrim (`rgba(0,0,0,0.65)`) is **deliberately retained**: these badges overlay arbitrary video, where a theme `Chip`/`Badge` surface token would not guarantee legibility. They are also non-interactive (`pointerEvents: 'none'`), so an interactive `Chip` (a `<button>`) is semantically wrong.
+- **Issue:** Both the "You muted" (bottom-left) and "All muted" (top-right) PiP badges are raw `<div>` elements with hardcoded `background: 'rgba(0,0,0,0.65)'`, `backdropFilter: 'blur(4px)'`, `borderRadius: '6px'`, `padding: '3px 7px'`, `fontSize: '12px'`. Color is set as `color: color.Critical.Main` directly on the wrapper `<div>`, not via a folds `variant` prop. Text is `<span style={{ fontSize: '11px', fontWeight: 600 }}>`.
+- **Root Cause:** `CallView.tsx` line 127 uses `<Badge variant="Critical" fill="Solid" size="400">` in the same file for the "N Live" indicator — the native pattern exists and is unused here.
+
+**N55 — Chat Background / Seasonal Theme Selected State Uses `color.Critical.Main` (Error Red)**
+
+- **File:** `src/app/features/settings/general/General.tsx`, lines 1660–1661 and 1726–1728
+- **Status:** **FIXED** — replaced all 4 instances of `color.Critical.Main` with `color.Primary.Main` in `General.tsx`
+- **Issue:** The selected-state border for both `ChatBgGrid` and `SeasonalBgGrid` is `border: \`2px solid ${color.Critical.Main}\``and the label color is also`color.Critical.Main`. `color.Critical.Main` is the semantic token for **destructive/error states** — it is used for "Leave Room", "Delete Message", "Report Room" in the same file. A normal selection indicator rendered in error red is semantically wrong and visually alarming.
+- **Root Cause:** Wrong semantic token for an active/selected state.
+- **Fix:** Replace `color.Critical.Main` with `color.Primary.Main` (or `color.Success.Main` to match how other settings selections are styled) for both the border and label color.
+
+**N56 — Report Modal Category Dropdown: Native `<select>` Instead of folds `Chip`+`PopOut`+`Menu`**
+
+- **File:** `src/app/features/room/ReportRoomModal.tsx` lines 138–163; `src/app/features/room/ReportUserModal.tsx` lines 144–169
+- **Status:** **FIXED** — extracted a shared `ReportCategorySelect` component (`src/app/features/room/ReportCategorySelect.tsx`) using the folds `Button` trigger + `PopOut` + `FocusTrap` + `Menu` + `MenuItem` pattern (with `escapeDeactivates`/arrow-key nav, matching `OrderButton`); both modals now use it instead of the native `<select>`.
+- **Issue:** Both report modals render the "Category" field as `<Box as="select">` with hand-rolled inline styles (padding, border, background, color, fontSize, fontFamily). No other selector in the message-action modal context uses `<select>` — the established pattern for all dropdowns in both message modals and search filters is `Chip onClick → setMenuAnchor → PopOut → FocusTrap → Menu → MenuItem` (reference: `OrderButton` in `SearchFilters.tsx` lines 63–114).
+
+---
+
+#### 🟠 Additional Moderate Findings
+
+| #   | Area                                                                         | File                                          | Lines                 | Issue                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | Native Pattern                                                                                                                                                                                                      |
+| :-- | :--------------------------------------------------------------------------- | :-------------------------------------------- | :-------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| N57 | PiP Fullscreen Button                                                        | `CallEmbedProvider.tsx`                       | 929–951               | PiP fullscreen toggle is a raw `<button>` with `background: 'rgba(0,0,0,0.65)'`, `color: '#fff'`, `fontSize: '13px'`, Unicode ⛶/⊡ glyph — no focus ring, no tooltip — **FIXED (token discipline)**: `borderRadius`/`padding`/gap replaced with `config.radii.R300` + `config.space.*` tokens (also on the "Return to call" label). The dark scrim and `#fff` text are **deliberately kept** for legibility over arbitrary video; the glyph stays because folds has no fullscreen icon. `aria-label`/`title` tooltip already present.                                                             | `Controls.tsx` fullscreen button uses `<IconButton variant="Surface" fill="Soft" radii="400" size="400" outlined>` with `<TooltipProvider>`; hardcoded `#fff` fails on light themes                                 |
+| N58 | Screenshare Confirm Popup                                                    | `CallControls.tsx`                            | 303–360               | "Share your screen?" popup is a raw `<Box>` with `--bg-surface`/`--bg-surface-border` vars (undefined outside TDS), `borderRadius: '0.75rem'`, `boxShadow: '0 8px 32px rgba(...)'`, no `FocusTrap`                                                                                                                                                                                                                                                                                                                                                                                               | Cinny's confirmation dialogs use folds `<Menu>` + `<FocusTrap>` + `<PopOut>`; the non-FocusTrap popup is not keyboard-accessible                                                                                    |
+| N59 | ML Noise Suppression Panel                                                   | `General.tsx`                                 | 1303–1487             | Sub-panel uses `var(--border-color)`, `var(--bg-card)`, `var(--bg-input)` (undefined in folds default theme), raw `<details>`/`<summary>` (UA-styled), `accentColor: 'var(--accent-orange)'` (TDS-only)                                                                                                                                                                                                                                                                                                                                                                                          | All other settings sub-sections use `<SettingTile>` rows inside `<SequenceCard>`; no other settings component uses `<details>`                                                                                      |
+| N60 | Knock Badge on Members Button                                                | `RoomViewHeader.tsx`                          | 744–782               | Knock count badge wrapped in extra `<div style={{ position: 'relative' }}>` with hardcoded `fontSize: '9px'`, `minWidth: '14px'`, `height: '14px'`, `padding: '0 3px'` overriding folds `size="200"` — **FIXED**: removed wrapper div, put `position: 'relative'` directly on the `IconButton`, `<Badge size="400">` with `toRem(3)` insets and `<Text size="L400">` — now matches the Pinned Messages badge pattern exactly                                                                                                                                                                     | Pinned Messages badge (same header, lines 651–677) uses `position: 'relative'` directly on `<IconButton>` + `toRem()` for inset; no extra wrapper div                                                               |
+| N61 | Knock Member Rows                                                            | `MembersDrawer.tsx`                           | 441–487               | Knock requester rows use raw `<Box>` with manually duplicated padding; no `<MenuItem>` wrapper → no hover/focus/active states — **WON'T FIX (deliberate)**: unlike a `MemberItem` (a clickable navigation row), a knock row contains two action buttons (Approve / Deny) and is **not itself clickable**. Wrapping it in `<MenuItem>` (a `<button>`) would nest interactive controls inside a button — invalid HTML/ARIA. The row has no interactive state to express.                                                                                                                           | Every joined/invited member uses `<MemberItem>` which wraps `<MenuItem variant="Background" radii="400">` with baked-in spacing and all interactive states                                                          |
+| N62 | Unverified Device Banner                                                     | `RoomInput.tsx`                               | 860–883               | Warning callout above composer uses inline `background: color.Warning.Container`, `borderLeft: '3px solid color.Warning.Main'` — a custom left-border accent pattern not present anywhere else in the folds system — **FIXED**: replaced the `borderLeft: '3px'` accent with a standard full `border` using `color.Warning.ContainerLine` + `config.borderWidth.B300`; removed the `opacity` hacks (folds `OnContainer` already meets contrast)                                                                                                                                                  | Warning indicators in the same codebase use `<Chip variant="Warning">` or `<Badge variant="Warning">`; the 3px left-border card pattern has no folds equivalent                                                     |
+| N63 | Report Modals — Box Instead of Dialog                                        | `ReportRoomModal.tsx` / `ReportUserModal.tsx` | 97–110 / 103–116      | Both modals render as `<Box as="form" role="dialog">` with inline `background`/`borderRadius`/`boxShadow`; use `config.radii.R400` (rounder) vs native `Dialog` which uses `R300` — **FIXED**: both shells are now `<Dialog as="form" variant="Surface">`; removed inline surface styles (Dialog provides background/radius/shadow)                                                                                                                                                                                                                                                              | Native `MessageReportItem` at `Message.tsx:634` and all other Cinny message-action modals use `<Dialog variant="Surface">`                                                                                          |
+| N64 | EditHistoryModal — `<Modal>` vs `<Dialog>`                                   | `EditHistoryModal.tsx`                        | 166                   | Uses `<Modal variant="Surface" size="500">` while sibling message-action modals (`DeleteMessageItem:505`, `MessageReportItem:634`) all use `<Dialog variant="Surface">` — different widths and internal padding                                                                                                                                                                                                                                                                                                                                                                                  | `<Dialog variant="Surface">` is the established modal shell for all message-triggered dialogs                                                                                                                       |
+| N65 | EditHistoryModal — No "Load More"                                            | `EditHistoryModal.tsx`                        | 253–259               | When `hasMore` is true the modal shows passive `<Text>"Showing the 50 most recent edits"</Text>` with no action; older edits are inaccessible — **FIXED**: implemented real pagination — edits accumulate across `next_batch` fetches (de-duped by event id, re-sorted by ts), with a folds `<Button>Load more</Button>` (spinner while loading) replacing the passive text                                                                                                                                                                                                                      | `RoomActivityLog.tsx:425` and `MessageSearch.tsx:129` both render a folds `<Button size="300" variant="Secondary">Load more</Button>` to fetch the next page                                                        |
+| N66 | DateRangeButton — Native `<input type="date">`                               | `SearchFilters.tsx`                           | 558–589               | "From" and "To" date fields are raw `<input type="date">` with inline style overrides including `fontSize: '0.82rem'` — **FIXED**: replaced both with folds `<Input type="date" variant="SurfaceVariant" size="300" radii="300">`; removed now-unused `color` import                                                                                                                                                                                                                                                                                                                             | `SelectRoomButton` (same file, line 224) and `SelectSenderButton` (line 424) both use folds `<Input size="300" radii="300">`; the date inputs are the only native browser inputs in the search filter row           |
+| N67 | SeasonalEffect / NightLight Z-Index Order                                    | `SeasonalEffect.tsx` / `App.tsx`              | 759 / 62–77           | `SeasonalEffect` mounts at `zIndex: 9999`; `NightLightOverlay` at `zIndex: 9998`. Seasonal particles render **above** Night Light so they are never tinted. `SeasonalEffect` also shares `z-index: 9999` with the skip-to-content link in `ClientLayout.tsx` — **FIXED**: lowered `SeasonalEffect` overlay to `zIndex: 9997` (below Night Light at 9998 and modals at 9999), so Night Light now tints the particles and dialogs are never obscured                                                                                                                                               | Expected UX: Night Light tints all visible content including effects; requires either a higher Night Light z-index or a lower SeasonalEffect z-index                                                                |
+| N68 | Syntax Highlighting — `--lt-accent-*` Vars in Non-TDS Themes                 | `syntaxHighlight.ts`                          | 313–323               | `tokenStyle()` returns `var(--lt-accent-cyan/green/orange/purple, hardcoded-fallback)` — `--lt-*` vars only exist in TDS mode; fallbacks are Monokai dark colors that have poor contrast on light themes and no relationship to the existing `--prism-*` variables in `ReactPrism.css` — **FIXED**: `tokenStyle()` now maps to the `--prism-*` family (keyword/selector/boolean/atrule/comment) which has proper light/dark/TDS palettes; comment uses `--prism-comment` instead of an opacity hack                                                                                              | `ReactPrism.css` uses `--prism-keyword`, `--prism-selector` etc. which switch correctly between light and dark palettes; syntax highlighting should use the same variable family                                    |
+| N69 | Mention Highlight — `<input type="color">` Instead of `HexColorPickerPopOut` | `General.tsx`                                 | 644–675               | Raw `<input type="color">` with hardcoded pixel dimensions; OS-native color picker chrome renders completely differently from the rest of settings UI — **FIXED**: replaced with `<HexColorPickerPopOut>` + `<HexColorPicker>` (react-colorful) behind a folds `<Button>` trigger showing a color swatch; the picker's built-in `onRemove` replaces the separate Reset button                                                                                                                                                                                                                    | `PowersEditor.tsx:125–143` establishes `<HexColorPickerPopOut picker={<HexColorPicker ...>}>` as the codebase's color-picking pattern; Reset button should be `<Button size="300" variant="Secondary" radii="300">` |
+| N70 | ChatBgGrid / SeasonalBgGrid — Raw `<button>` Elements                        | `General.tsx`                                 | 1648–1689 / 1711–1742 | Both pickers use raw HTML `<button>` elements with hardcoded `width: toRem(76)`, `height: toRem(50/56)`, `borderRadius: toRem(8)`, `border: 2px solid rgba(...)` — no focus ring via folds, no `variant` prop, no hover state from the design system — **FIXED**: chrome (radius, border, hover, **keyboard `:focus-visible` ring**, selected state via `data-selected`) moved to a shared `BgSwatch.css.ts` using `config`/`color` tokens; only the per-swatch size + live preview background remain inline (these are inherently custom preview tiles, not folds `MenuItem`/`Chip` candidates) | Native Cinny theme pickers use folds `<MenuItem>` or `<Chip>` which respond to theme and provide focus/hover states automatically                                                                                   |
+
+---
+
+#### 🟡 Additional Minor Findings
+
+| #   | Area                                          | File                                          | Lines             | Issue                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | Native Pattern                                                                                                                                                                                         |
+| :-- | :-------------------------------------------- | :-------------------------------------------- | :---------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| N71 | Call Prescreen Text                           | `CallView.tsx`                                | 63–85             | `ChannelFullMessage` and `AlreadyInCallMessage` use `<Text style={{ color: color.Critical/Warning.Main }}>` inline instead of folds `<Badge variant="Critical/Warning">` — **WON'T FIX (deliberate)**: these are full, centered explanatory **sentences** ("Channel Full (N/M) — Wait for someone to leave…"), not short labels. A `Badge` is for compact chips like "N Live"; wrapping a sentence in one is visually wrong. They already use folds `color.*` tokens. The sibling `LivekitServerMissingMessage`/`NoPermissionMessage` use the same (un-flagged) pattern. | The "N Live" badge directly above (line 127) correctly uses `<Badge variant="Critical" fill="Solid" size="400">`                                                                                       |
+| N72 | Mute MenuItem Icon                            | `RoomNavItem.tsx`                             | 454–466           | "Mute" `<MenuItem>` places bell-mute icon as a raw child node instead of using the `before` prop — **FIXED**: moved `Icons.BellMute` to `before` prop                                                                                                                                                                                                                                                                                                                                                                                                                    | Every other `<MenuItem>` in both `RoomNavItemMenu` and `RoomMenu` places its leading icon in the `before` prop                                                                                         |
+| N73 | Pending Requests Header                       | `MembersDrawer.tsx`                           | 415–422           | "Pending Requests" section header is bare `<Text>` with inline padding instead of `className={css.MembersGroupLabel}` — **FIXED**: now uses `className={css.MembersGroupLabel}` like every other section header                                                                                                                                                                                                                                                                                                                                                          | Power-level group labels at lines 506–519 use `className={css.MembersGroupLabel}` for all other section headers in the same virtualizer list                                                           |
+| N74 | Emoji Prefix Span                             | `RoomNavItem.tsx`                             | 730–736           | Emoji prefix rendered as raw `<span style={{ fontSize: '1.15em', lineHeight: 1 }}>` inside a `<Text>` node — **FIXED**: removed the emoji-splitting span; the room name (including any leading emoji) now renders directly inside `<Text>`                                                                                                                                                                                                                                                                                                                               | All other nav item text uses folds `<Text size="Inherit">` or similar — no raw `<span>` with em-based font-size override exists elsewhere in the sidebar                                               |
+| N75 | Room Name Override / Star Indicators          | `RoomNavItem.tsx`                             | 741–757           | Pencil and star indicator icons are embedded inside the name `<Box as="span">`, giving them the same visual baseline as the room name text — **WON'T FIX (deliberate)**: an inline favorite-star / local-name marker adjacent to the name is a deliberate, common design (cf. Element/Slack pinned-name markers). Moving them to the far right would collide with the unread/notification indicators already there and risks layout regressions. Low value, real regression risk.                                                                                        | Native sidebar status indicators (unread count, notification mode icon) are placed to the far right of the item, never inside the name text span group                                                 |
+| N76 | Report Modals — Extra Cancel Button           | `ReportRoomModal.tsx` / `ReportUserModal.tsx` | 189–191 / 195–197 | Both custom report modals include a "Cancel" `<Button>` in the footer row — **FIXED**: removed the Cancel button; dismissal is via the header `×` / click-outside, matching `MessageReportItem`                                                                                                                                                                                                                                                                                                                                                                          | Native `MessageReportItem` (`Message.tsx:675–691`) has no Cancel button — dismissal is via `×` header button or click-outside only                                                                     |
+| N77 | Search Filter Inline Lambdas                  | `SearchFilters.tsx`                           | 480, 625          | `SelectSenderButton` and `DateRangeButton` trigger chips use inline `onClick` arrow functions — **WON'T FIX (deliberate)**: purely a code-style nit with zero user-facing or behavioural impact. Inline arrow handlers are idiomatic React and used throughout this very file; extracting them yields no functional benefit.                                                                                                                                                                                                                                             | `OrderButton` (line 58) and `SelectRoomButton` (line 195) both extract a named `const handleOpenMenu: MouseEventHandler<HTMLButtonElement>` handler — bypassing the type annotation in the inline form |
+| N78 | HasLink Chip Active Color                     | `SearchFilters.tsx`                           | 755               | `HasLink` active state uses `variant="Primary"` (blue); all boolean scope-toggle chips in the same bar use `variant="Success"` (green) with `outlined` — **FIXED**: changed to `variant={containsUrl ? 'Success' : 'SurfaceVariant'} outlined={!!containsUrl}`                                                                                                                                                                                                                                                                                                           | `variant="Success" outlined` is the established active-state pattern for boolean toggles in the filter bar                                                                                             |
+| N79 | Server Notice Chip Radii                      | `RoomViewHeader.tsx`                          | 570               | `<Chip size="400" radii="Pill">` — `Pill` radii on a room-type label — **FIXED**: changed to `radii="300"`                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Room/space type labels in lobby (`RoomItem.tsx:83`, `SpaceItem.tsx:63`) use `radii="300"`; `radii="Pill"` is for filter/tag chips only                                                                 |
+| N80 | Server Support Contact Layout                 | `About.tsx`                                   | 172–239           | Homeserver support contacts rendered as raw `<Box direction="Column">` with `<Text as="a">` pairs — custom label/link layout — **WON'T FIX (deliberate)**: a contact is `role → {matrix_id?, email?, …}` (one-to-many links per role), which doesn't map onto `SettingTile`'s single `title`/`description`/`after` slots without contortion. The current layout already uses folds `Box`/`Text`/`SequenceCard` + tokens and `Text as="a"` (a valid folds pattern); no undefined vars or raw HTML chrome.                                                                 | All other `<SequenceCard>` content in `About.tsx` and `General.tsx` uses `<SettingTile title="..." description="..." after={...}>` as the content unit                                                 |
+| N81 | Background Picker Grid — No Responsive Layout | `General.tsx`                                 | 1707–1742         | Fixed `width: toRem(76)` flex-wrap cells with no `minWidth` floor or CSS grid `auto-fill` — SeasonalBgGrid's 13 items produce a visually lopsided orphan last row at any viewport width                                                                                                                                                                                                                                                                                                                                                                                  | Cinny's native grids use `grid-template-columns: repeat(auto-fill, minmax(N, 1fr))` or equivalent for responsive fill                                                                                  |
+| N82 | Join/Leave Sounds Auto-Preview                | `General.tsx`                                 | 1592–1609         | Selecting a sound in the dropdown immediately plays a preview, but no UI affordance (button label, description text, or "▶ Preview" button) communicates this to the user                                                                                                                                                                                                                                                                                                                                                                                                | Settings tiles with side effects on selection (theme picker, chat background) show a live visual preview or a dedicated control explaining the side effect                                             |
+
+---
+
+### Round 3 — Rich Topic Editor, RemindMe Dialog, Composer Toolbar, Voice Recorder, Uploads, Location, Mention Highlight
+
+#### 🔴 Additional Major Findings
+
+**N83 — Rich Topic Formatting Toolbar: Raw `<button>` Elements with Fully Inline Styles**
+
+- **File:** `src/app/features/common-settings/general/RoomProfile.tsx`, lines 335–358
+- **Status:** **FIXED** — replaced raw `<button>` elements with `<Button size="300" radii="300" variant="Secondary" fill="Soft">` with styled `<Text>` children for B/I/S/code labels
+- **Issue:** The four formatting buttons (B, I, S, `` ` ``) in the room topic editor are plain HTML `<button>` elements with entirely inline styles: manual `border`, `borderRadius`, `background`, `color`, `cursor`, `fontSize`, `fontWeight`, `fontStyle`, `fontFamily`, `lineHeight`. They bypass the folds design token system completely — no `variant`, `size`, or `radii` props, no theme-reactive hover/focus states.
+- **Root Cause:** Custom addition without referencing folds primitives.
+- **Fix:** Replace with `<IconButton type="button" size="300" radii="300" variant="Surface" fill="Soft">` matching the emoji-picker trigger immediately above them at line 285, which already uses the correct pattern.
+
+**N84 — Topic Preview in Room Settings Renders Plain Text Instead of `formatted_body`**
+
+- **File:** `src/app/features/common-settings/general/RoomProfile.tsx`, lines 457–461
+- **Status:** **FIXED** — read-mode topic now checks `topic.format === 'org.matrix.custom.html'` and renders `parse(sanitizeCustomHtml(topic.formatted_body))`, matching `RoomTopicViewer` and all other display sites
+- **Issue:** The read-mode topic display wraps `topic.topic` (the plain-text field) in `<Linkify>` and never reads `formatted_body`. However `buildTopicContent()` (lines 82–89) intentionally stores both `topic` and `formatted_body` under `org.matrix.custom.html`. After the user saves a formatted topic, the preview panel immediately shows the stripped plain-text version — the formatting appears to disappear within the same settings panel.
+- **Root Cause:** The existing `RoomTopicViewer` component (`src/app/components/room-topic-viewer/RoomTopicViewer.tsx:24–51`) already checks `topic.format === 'org.matrix.custom.html'` and pipes `formatted_body` through `sanitizeCustomHtml`. This component is used everywhere else (`RoomIntro`, `LobbyHero`, `RoomItem`, `Invites`, etc.) but not in Room Settings.
+- **Fix:** Replace the inline plain-text render with `<RoomTopicViewer topic={roomTopic}>` to match all other display sites.
+
+---
+
+#### 🟠 Additional Moderate Findings
+
+| #   | Area                               | File                       | Lines              | Issue                                                                                                                                                                                                                                                                                                                                                                                                                                                | Native Pattern                                                                                                                                                                                                                     |
+| :-- | :--------------------------------- | :------------------------- | :----------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| N85 | RemindMe Dialog Shell              | `RemindMeDialog.tsx`       | 69–81              | Dialog shell is `<Box role="dialog">` with `background`, `borderRadius`, `boxShadow`, `overflow` all set as inline styles using token lookups. Corner radius is `config.radii.R400` which differs from the `R300` embedded in `<Dialog variant="Surface">` — **FIXED**: shell replaced with `<Dialog variant="Surface" style={modalStyle}>`; removed the inline `background`/`borderRadius`/`boxShadow`/`overflow` and the now-unused `color` import | All small message-action dialogs (`LeaveRoomPrompt`, `LogoutDialog`, `JoinAddressPrompt`, `PowerChip`, `DeleteMessageItem`) use `<Dialog variant="Surface" style={modalStyle}>` as the shell                                       |
+| N86 | RemindMe Preset Buttons            | `RemindMeDialog.tsx`       | 111–117            | The four preset time choices (20 min, 1 hr, 3 hr, tomorrow) use `<MenuItem size="300" radii="300">` — `MenuItem` is a navigation primitive tied to `menu`/`menubar` ARIA roles; placing it inside `role="dialog"` is an invalid ARIA combination — **FIXED**: each preset is now a folds `<Button variant="Secondary" fill="Soft" radii="300">`, resolving the invalid `menuitem`-in-`dialog` ARIA                                                   | Dialog action choices use `<Button>` (delete/leave/logout dialogs) or `<Chip>` (selection choices). No other dialog in the codebase uses `MenuItem` for action items                                                               |
+| N87 | Composer Toolbar Toggle Pattern    | `General.tsx`              | 1100–1114          | Per-button toolbar toggles (Format, Emoji, Sticker, GIF, Location, Poll, Voice, Schedule) use `<Chip variant="Primary"/"Secondary" radii="Pill">` in a wrap grid — a compact chip-toggle grid inside a `SettingTile`, different from every adjacent row                                                                                                                                                                                              | The three sibling tiles in the same `Editor()` function (ENTER for Newline, Markdown, Formatting Toolbar) all use `<SettingTile after={<Switch variant="Primary">}>`. 15+ other binary settings in the file use the Switch pattern |
+| N88 | Voice Recorder Recording State     | `VoiceMessageRecorder.tsx` | 195, 206, 240, 276 | Recording container background is `var(--bg-surface-variant)`, the live pulse dot is `var(--tc-danger-normal)`, waveform bars are `var(--tc-primary-normal)` — custom Lotus CSS vars that may not exist in folds themes, falling back to transparent/black — **FIXED**: replaced with `color.SurfaceVariant.Container`, `color.Critical.Main`, `color.Primary.Main`                                                                                  | Native message components use JS-accessible `color.*` tokens that are always populated regardless of theme class                                                                                                                   |
+| N89 | Voice Recorder Preview Audio       | `VoiceMessageRecorder.tsx` | 282–283            | Preview state renders bare `<audio src={previewUrl} controls>` — native browser element with inconsistent cross-browser chrome — **FIXED**: replaced with `<audio ref>` + folds `<IconButton>` play/pause toggle; `onEnded` resets playing state                                                                                                                                                                                                     | Native audio messages use folds `Attachment`/`AttachmentContent` layout wrappers; pre-send preview should use `<IconButton>` play/pause controls                                                                                   |
+| N90 | Mention Highlight Contrast Formula | `App.tsx`                  | 36–40              | Auto-computed text color (black/white) uses simplified luma `(0.299r + 0.587g + 0.114b)/255 > 0.5` — not WCAG 2.1 relative luminance (which requires gamma linearization) — **FIXED**: replaced with WCAG 2.1 relative luminance formula using `((c+0.055)/1.055)^2.4` gamma linearization; threshold moved from 0.5 to 0.179                                                                                                                        | Folds `color.*.OnContainer` tokens are manually curated to pass WCAG AA 4.5:1 contrast ratios; custom computation must match this guarantee                                                                                        |
+
+---
+
+#### 🟡 Additional Minor Findings
+
+| #   | Area                               | File                     | Lines   | Issue                                                                                                                                                                                                                | Native Pattern                                                                                                                                                   |
+| :-- | :--------------------------------- | :----------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| N91 | Upload Card Caption Input          | `UploadCardRenderer.tsx` | 356–376 | Caption input is raw `<input type="text">` with hardcoded inline CSS using Lotus-specific vars not in folds — **FIXED**: replaced with folds `<Input variant="Secondary" size="300" radii="300">`                    | Other text inputs in the UI use folds `<Input size="300" radii="300">` with folds-token props for all sizing and color                                           |
+| N92 | Location "Open Location" Button    | `MsgTypeRenderers.tsx`   | 534–547 | "Open Location" action link uses `<Chip as="a">` — compact badge-sized element — **FIXED**: replaced with `<Button as="a" variant="Secondary" fill="Solid" radii="300" size="400">` matching FileContent pattern     | `FileContent.tsx` uses `<Button variant="Secondary" fill="Solid" radii="300" size="400">` for "Open File"/"Open PDF"                                             |
+| N93 | Location Coordinates Text          | `MsgTypeRenderers.tsx`   | 532     | `<Text size="T300" style={{ opacity: 0.65 }}>` — hardcoded non-standard opacity — **FIXED**: replaced with `<Text size="T300" priority="300">`                                                                       | Secondary text uses folds `priority` prop; `0.65` is outside the token scale                                                                                     |
+| N94 | Mention Highlight Border Invisible | `App.tsx`                | 41      | `--mention-highlight-border` is set to the same value as `--mention-highlight-bg` — the border is invisible — **FIXED**: border is now `rgba(r,g,b,0.5)` — same hue as the background at 50% opacity, always visible | In folds, `color.*.ContainerLine` is always a lighter/muted sibling of `color.*.Container`, providing the 1px outline that gives mention chips visual definition |

LOTUS_FEATURES.md

@@ -10,20 +10,22 @@ Last updated: June 2026.
 1. [Branding & Identity](#branding--identity)
 2. [LotusGuild Terminal Design System (TDS) v1.2](#lotusguild-terminal-design-system-tds-v12)
 3. [Animated Chat Backgrounds (P5-4)](#animated-chat-backgrounds-p5-4)
-4. [Glassmorphism Sidebar (P5-3)](#glassmorphism-sidebar-p5-3)
-5. [Night Light / Blue Light Filter (P5-5)](#night-light--blue-light-filter-p5-5)
-6. [Voice / Video Call Improvements](#voice--video-call-improvements)
-7. [Per-Message Read Receipts](#per-message-read-receipts)
-8. [Delivery Status Indicators](#delivery-status-indicators)
-9. [Messaging Enhancements](#messaging-enhancements)
-10. [Presence](#presence)
-11. [UX & Composer](#ux--composer)
-12. [Room Customization](#room-customization)
-13. [Moderation](#moderation)
-14. [Notifications](#notifications)
-15. [Server Integration](#server-integration)
-16. [Infrastructure](#infrastructure)
-17. [Key Custom Files](#key-custom-files)
+4. [Seasonal Theme Overlays (P5-12)](#seasonal-theme-overlays-p5-12)
+5. [Avatar Decorations (P5-13/P5-14)](#avatar-decorations-p5-13p5-14)
+6. [Glassmorphism Sidebar (P5-3)](#glassmorphism-sidebar-p5-3)
+7. [Night Light / Blue Light Filter (P5-5)](#night-light--blue-light-filter-p5-5)
+8. [Voice / Video Call Improvements](#voice--video-call-improvements)
+9. [Per-Message Read Receipts](#per-message-read-receipts)
+10. [Delivery Status Indicators](#delivery-status-indicators)
+11. [Messaging Enhancements](#messaging-enhancements)
+12. [Presence](#presence)
+13. [UX & Composer](#ux--composer)
+14. [Room Customization](#room-customization)
+15. [Moderation](#moderation)
+16. [Notifications](#notifications)
+17. [Server Integration](#server-integration)
+18. [Infrastructure](#infrastructure)
+19. [Key Custom Files](#key-custom-files)
 
 ---
 
@@ -47,6 +49,7 @@ Last updated: June 2026.
 A CRT terminal aesthetic applied globally when the TDS theme is active.
 
 **Visual effects:**
+
 - Scanline overlay via repeating `linear-gradient` pseudo-element
 - Vignette via radial-gradient overlay
 - Phosphor glow on text and accents via `text-shadow` / `box-shadow`
@@ -61,14 +64,17 @@ A CRT terminal aesthetic applied globally when the TDS theme is active.
 | `--lt-text` | `#c4d9ee` | Body text |
 
 **Typography & chrome:**
+
 - Monospace font stack applied to all UI elements
 - Terminal-style scrollbars (thin, accent-colored track)
 
 **Decorative patterns:**
+
 - Custom hex-grid CSS background pattern
 - Circuit-board CSS background pattern (switchable)
 
 **Boot sequence:**
+
 - Matrix-style boot messages on the welcome page; press Escape to skip
 - Implemented in `src/lotus-boot.ts`
 
@@ -88,6 +94,7 @@ A full light-palette counterpart to the dark TDS theme.
 | `--lt-text` | `#111827` | Body text |
 
 **Differences from dark mode:**
+
 - CRT effects (scanlines, vignette, phosphor glow) are disabled
 - Scoped to `html[data-theme="light"] body.lotusTerminalBodyClass` to avoid bleed into non-TDS themes
 - `ThemeManager.tsx` is responsible for setting the `data-theme` attribute on the `<html>` element when theme changes
@@ -143,6 +150,16 @@ Strips all `animation` properties from the returned style object when either `pa
 
 A "Pause Background Animations" toggle is exposed in **Settings → Appearance**. The preference is persisted and read by `getChatBg()` at render time.
 
+### Animation Improvements (June 2026)
+
+All five animated backgrounds were rewritten for smoother, more organic motion:
+
+- **Digital Rain** — added a phosphor glow flicker (`animRainGlowKeyframe`, 2.1 s) layered on top of the column scroll; stripe opacity increased for better visibility
+- **Star Drift** — each of the three dot layers now moves by exactly its own tile width/height per cycle (`−130 px`, `−190 px`, `−260 px`), eliminating the visible seam on loop
+- **Grid Pulse** — independent brightness oscillation (`animGridBrightnessKeyframe`, 3.3 s) runs alongside the size breathe (4 s) at a prime period ratio so they never synchronise
+- **Aurora Flow** — four gradient layers now have individual `backgroundSize` values (`200%`, `250%`, `300%`, `220%`); the keyframe drives each layer through a distinct 5-stop path, replacing the robotic single back-and-forth
+- **Fireflies** — glow pulse (`animFirefliesGlowKeyframe`, 2.3 s `filter: brightness`) and opacity blink (`animFirefliesBlinkKeyframe`, 1.7 s) added on top of the position drift; prime periods create unsynchronised bioluminescence
+
 ### Files
 
 - `src/app/styles/Animations.css.ts` — vanilla-extract keyframe definitions
@@ -150,11 +167,115 @@ A "Pause Background Animations" toggle is exposed in **Settings → Appearance**
 
 ---
 
+## Seasonal Theme Overlays (P5-12)
+
+Decorative CSS-only overlays that activate automatically on holidays and events. Manually overrideable in **Settings → Appearance → Seasonal Theme**.
+
+### Themes
+
+| Theme                | Window        | Effect                                                                                             |
+| -------------------- | ------------- | -------------------------------------------------------------------------------------------------- |
+| 🎆 New Year          | Dec 31–Jan 2  | Radial firework bursts in gold, red, cyan, purple; gold shimmer sweep                              |
+| 🏮 Lunar New Year    | Jan 22–Feb 5  | Floating paper lanterns bobbing; silk texture; gold shimmer accent                                 |
+| 💖 Valentine's Day   | Feb 10–15     | ♥ hearts floating upward; soft pink ambient glow                                                   |
+| 🍀 St. Patrick's Day | Mar 15–18     | ☘ clovers drifting down; gold metallic shimmer top border                                          |
+| 🃏 April Fool's      | Apr 1         | Glitch overlay: RGB channel separation, hue-rotate spikes, scanline sweep, "SIGNAL LOST" watermark |
+| 🌱 Earth Day         | Apr 20–23     | 🌿🍃 leaf emoji drift; sage green ambient tint; vine accent on left edge                           |
+| 🍂 Autumn            | Sep 21–Oct 31 | Warm orange/amber leaf shapes rotating and falling                                                 |
+| 👾 Arcade Day        | Sep 12        | CRT scanlines; blinking pixel corner decorations; "INSERT COIN" prompt                             |
+| 🚀 Deep Space Week   | Oct 4–10      | Warp-speed star streaks radiating from screen centre; nebula purple/blue ambient                   |
+| 🎃 Halloween         | Oct 15–Nov 1  | Purple and orange glowing particles; SVG spider web in top-left corner; dark purple tint           |
+| ❄️ Christmas         | Dec 10–Jan 2  | White dot snowfall in multiple layers at varied speeds                                             |
+
+### Implementation
+
+- `SeasonalEffect` component mounted in `App.tsx` at `z-index: 9997` (below night light, above content)
+- Auto-detection via `getActiveSeason(now: Date)` — themes checked in priority order (New Year > Valentine's > … > Autumn)
+- `seasonalThemeOverride` setting: `'auto' | 'off' | <theme-name>` — persisted in `settingsAtom`
+- All particle animations gated on `prefers-reduced-motion: reduce` — ambient overlays (tints, textures, shimmer) remain active
+
+### Files
+
+- `src/app/components/seasonal/SeasonalEffect.tsx` — theme detection, date ranges, all overlay components
+- `src/app/components/seasonal/Seasonal.css.ts` — vanilla-extract keyframes (fall, leaf, float-up, bob, glitch, burst, warp, scanline, shimmer, etc.)
+
+---
+
+## Avatar Decorations (P5-13/P5-14)
+
+Animated APNG overlay frames that float around user avatars, inspired by Discord's Avatar Decorations feature. Each decoration extends 8px beyond the avatar border on all sides, with a transparent center hole that reveals the avatar beneath. Other Lotus Chat users see your selected decoration in real time — stored in the Matrix profile via MSC4133.
+
+### Decoration Library
+
+99 hand-curated, original-IP decorations (no licensed character artwork) organized into 9 categories:
+
+| Category | Count | Highlights                                                    |
+| -------- | ----- | ------------------------------------------------------------- |
+| Gaming   | 13    | Slither 'n Snack, Joystick, Space Invaders, Gaming Headsets   |
+| Cyber    | 9     | Cybernetic, Glitch, Digital Sunrise, Futuristic UI (3 colors) |
+| Space    | 8     | Black Hole, Constellations, Solar Orbit, Aurora               |
+| Fantasy  | 22    | Kitsune, Phoenix, Glowing Runes, D&D dice, Crystal Balls      |
+| Elements | 7     | Fire, Water, Air, Earth, Lightning, Ki Energy                 |
+| Japanese | 6     | Kabuto, Oni Mask, Sakura Warrior, Straw Hat                   |
+| Nature   | 12    | **Lotus Flower**, Koi Pond, Sakura, Fall Leaves, Fireflies    |
+| Spooky   | 13    | Candlelight, Witch Hat, Ghosts, Jack-o'-Lantern               |
+| Cozy     | 11    | Cozy Cat, Fox Hat (3 colors), Cat Ears, Frog Hat              |
+
+All decoration files are 256×256 APNGs. They animate natively in all modern browsers via `<img>` elements.
+
+### Architecture
+
+**Profile storage — MSC4133:**
+Decoration preference is stored in the public Matrix profile field `io.lotus.avatar_decoration` (a slug string, e.g. `lotus_flower`). Any Lotus Chat user viewing your profile sees your current decoration.
+
+**CDN:**
+Files are self-hosted on the Lotus Nextcloud instance. Direct access: `https://drive.lotusguild.org/public.php/dav/files/{token}/cinny-decorations/{slug}.png`. `<img>` elements load cross-origin freely — no CORS headers needed.
+
+**Module-level cache with in-flight deduplication:**
+`useAvatarDecoration(userId)` fetches the profile field once per user per session. A `Map<userId, slug|null>` cache prevents redundant requests; a second `pending` waiters map ensures multiple components requesting the same userId simultaneously share one HTTP request rather than firing duplicates.
+
+**Wrapping pattern:**
+`AvatarDecoration` renders a `position: relative; display: inline-flex` wrapper div. The decoration `<img>` is `position: absolute` with `top/left/right/bottom: -8px`, extending equally on all sides while the `z-index: 10` keeps it above the avatar. `onError` hides the image if the CDN file is absent. This wrapper sits outside `PresenceRingAvatar` so the presence ring and decoration layer are fully independent.
+
+### Placement — Where Decorations Render
+
+| Location                | File                                                                 |
+| ----------------------- | -------------------------------------------------------------------- |
+| Message timeline        | `src/app/features/room/message/Message.tsx`                          |
+| Members drawer          | `src/app/features/room/MembersDrawer.tsx`                            |
+| `@mention` autocomplete | `src/app/components/editor/autocomplete/UserMentionAutocomplete.tsx` |
+| Inbox / notifications   | `src/app/pages/client/inbox/Notifications.tsx`                       |
+
+### Settings — Decoration Picker
+
+**Settings → Account → Avatar Decoration** shows a scrollable grid of all decorations, grouped by category. Each cell is a 52×52px button with a live preview of the APNG. The currently selected decoration gets a 2px cyan border. "No Decoration" clears the field. Changes are saved only when the "Save" button is clicked (visible only when a change is pending). After save, `invalidateDecorationCache(userId)` forces other components to re-fetch.
+
+### Catalog Sync Script
+
+After deleting decoration files from the Nextcloud share, run:
+
+```bash
+npm run sync:decorations
+```
+
+The script (`scripts/syncDecorations.mjs`) sends HTTP HEAD requests to the CDN URL for every slug in `avatarDecorations.ts` and automatically removes entries for files that returned 404. Empty categories are pruned automatically. Review with `git diff`.
+
+### Files
+
+- `src/app/features/lotus/avatarDecorations.ts` — full catalog (`DECORATION_CATEGORIES`, `ALL_DECORATIONS`, `decorationUrl()`, `DECORATION_CDN`)
+- `src/app/hooks/useAvatarDecoration.ts` — profile fetch, module-level cache, `invalidateDecorationCache()`
+- `src/app/components/avatar-decoration/AvatarDecoration.tsx` — wrapper component with APNG overlay
+- `src/app/features/settings/account/ProfileDecoration.tsx` — settings UI (picker grid, save button)
+- `scripts/syncDecorations.mjs` — CDN sync script to prune deleted decorations from the catalog
+
+---
+
 ## Glassmorphism Sidebar (P5-3)
 
 An optional frosted-glass sidebar style toggled in **Settings → Appearance**.
 
 **Implementation:**
+
 - `SidebarGlass` vanilla-extract class applies `background: rgba(3, 5, 8, 0.55)` and `backdropFilter: blur(12px)` to the sidebar element
 - `SidebarNav.tsx` uses a `useEffect` to mirror the active chat background onto `document.body` when the glassmorphism setting is enabled, so the blur filter has meaningful content to work through
 - Degrades gracefully on browsers without `backdrop-filter` support (falls back to the semi-transparent background)
@@ -166,6 +287,7 @@ An optional frosted-glass sidebar style toggled in **Settings → Appearance**.
 A warm orange overlay rendered over the entire UI to reduce blue light emission.
 
 **Implementation:**
+
 - `NightLightOverlay` component mounted directly in `App.tsx`
 - CSS: `position: fixed; inset: 0; pointer-events: none; z-index: 9998`
 - Orange tint color with configurable opacity
@@ -225,9 +347,101 @@ Camera starts disabled on join. The `cameraOnJoin` setting is explicitly opt-in
 
 `M` key triggers `toggleSound()` in `CallControls.tsx`, toggling the deafen state without requiring a mouse click.
 
-### Noise Suppression Toggle
+### AFK Auto-Mute in Voice (P5-11)
 
-A `noiseSuppression` URL parameter is passed to the Element Call widget URL, allowing the noise suppression feature to be toggled from within Lotus settings.
+Automatically mutes the microphone after a configurable period of microphone-on silence.
+
+**Implementation:**
+
+- `useAfkAutoMute(callEmbed)` hook opens a separate monitoring-only `getUserMedia` stream (independent of Element Call's stream) and analyzes it via `AudioContext` + `AnalyserNode`
+- RMS level is sampled every 500ms; if it stays below threshold while the mic is on, the silence timer starts
+- After the configured timeout (`afkTimeoutMinutes` setting), `callEmbed.control.setMicrophone(false)` mutes the mic and an in-app toast is shown
+- Monitoring stream and `AudioContext` are fully cleaned up on unmount (no resource leak)
+- Activated inside `CallControls` via `useAfkAutoMute(callEmbed)` — no changes required to `CallEmbed` or Element Call
+
+**Settings (Settings → Calls):**
+
+- **AFK Auto-Mute** toggle (default: off)
+- **Idle Timeout** dropdown — 1 / 5 / 10 / 20 / 30 minutes (shown only when enabled; default: 10 minutes)
+
+Hook: `src/app/hooks/useAfkAutoMute.ts`
+
+### Voice Channel User Limit (P5-10)
+
+Room admins can cap the number of participants allowed in a room's voice call. The cap is a **hard, server-side limit enforced for every Matrix client** (Element, FluffyChat, …), backed by a client-side UX layer in Lotus Chat.
+
+**Client (this repo):**
+
+- Limit is stored in the `io.lotus.voice_limit` room state event with content `{ max_users: N }` (0 / absent = no limit)
+- `RoomVoiceLimit` component in Room Settings → General → **Voice** lets admins set the cap with a number input. Editing is gated by `permissions.stateEvent(StateEvent.LotusVoiceLimit, …)`, so only users with `state_default` power (or above) can change it
+- `CallPrescreen` (`CallView.tsx`) reads the limit reactively via `useStateEvent` and compares it against the live `useCallMembers` count; at capacity the **Join** button is disabled and a "Channel Full (N/N)" message is shown
+- A user already in the session (rejoining) is never blocked — only new joiners are gated
+
+Files: `src/app/features/common-settings/general/RoomVoiceLimit.tsx`, `src/app/features/call/CallView.tsx`, `StateEvent.LotusVoiceLimit` in `src/types/matrix/room.ts`
+
+**Server (the hard backstop — `matrix` repo `livekit/voice-limit-guard.py`):**
+
+- Every client must fetch a LiveKit JWT from `lk-jwt-service` before joining a call. A fail-open guard sidecar sits in front of it (guard on `:8070`, lk-jwt-service moved to `:8071`)
+- On each token request the guard reads the room's `io.lotus.voice_limit` (Synapse admin API), and if the room is at capacity it returns `403` so the client cannot obtain a token and therefore cannot join — regardless of which client they use
+- Distinct Matrix users are counted via LiveKit `ListParticipants`; rejoins / extra devices are allowed. Any failure fails open so calls never break
+
+> The client-side "Channel Full" check is UX/early-feedback; the server guard is the actual enforcement.
+
+### Custom Join / Leave Sound Effects (P5-16)
+
+A local sound plays when another participant joins or leaves a call you're in.
+
+**Implementation:**
+
+- `useCallJoinLeaveSounds(embed)` hook (wired in `CallUtils` inside `CallEmbedProvider`) listens to `MatrixRTCSession` membership changes via `useCallMembersChange`
+- Membership identity is tracked by `sender|deviceId`; a snapshot is taken when the session (re)starts so participants already present never trigger a sound
+- Your own membership is filtered out (`mx.getSafeUserId()` prefix), and sounds fire only while you are actually joined (`useCallJoined`)
+- Sounds are synthesized in-browser with the Web Audio API (`OscillatorNode` + envelope) — no audio assets to bundle. Join uses a rising motif, leave a falling one
+- Three styles: **Chime** (sine), **Soft** (triangle), **Retro** (square arpeggio), plus **Off**
+
+**Settings (Settings → Calls):**
+
+- **Join & Leave Sounds** dropdown — Off / Chime / Soft / Retro (default: Chime). Selecting a style previews the join sound immediately
+
+Files: `src/app/utils/callSounds.ts`, `src/app/hooks/useCallJoinLeaveSounds.ts`
+
+### Noise Suppression (Advanced Multi-Tier) (P5-30)
+
+A comprehensive mic noise-suppression system in **Settings → General → Calls** designed for high-end hardware and detailed performance testing.
+
+| Tier               | Description                                                                   |
+| ------------------ | ----------------------------------------------------------------------------- |
+| **Off**            | No suppression applied.                                                       |
+| **Browser-native** | Google NSNet2 (WebRTC built-in). Best general performance/CPU balance.        |
+| **ML (Advanced)**  | Custom ML pipeline supporting multiple models, series suppression, and gates. |
+
+**Advanced Features & Test Options:**
+
+- **Multiple ML Models:** Toggle between **RNNoise** (standard hybrid) and **Speex** (legacy DSP-based) to compare artifact levels and suppression strength.
+- **Series Suppression (Combination):** Optional toggle to run the browser's native stationary noise filter _before_ the ML model. This allows testing the individual performance of the ML model vs the combined effectiveness at removing fan hum.
+- **Noise Gate:** Configurable hardware-style gate with a dB threshold. Hard-cuts all audio when input is below the threshold, ensuring absolute silence between sentences.
+- **Live Microphone Meter:** A real-time volume visualizer in the settings panel to help users accurately tune their Noise Gate threshold.
+- **High-Fidelity Capture:** Captures at hardware native rates (supporting high-end gear like **Scarlett Solo + PodMic**) and handles high-quality resampling via Web Audio to prevent the "static" artifacts caused by low-quality browser pre-resamplers.
+- **Performance:** Automatic WASM SIMD detection with transparent fallback to standard binaries.
+- **Support Detection:** UI now detects `AudioWorklet` / `AudioContext` support and disables ML options in unsupported environments.
+- **Status Reporting:** The ML shim notifies the host app via `postMessage`. If initialization fails, a system toast alerts the user of the fallback to the raw microphone.
+
+**Open-Source Model Roadmap:**
+| Model | Transients (Clicks) | Voice Quality | CPU Usage (WASM) |
+| :--- | :--- | :--- | :--- |
+| **RNNoise** | Poor | Moderate | < 5% |
+| **DTLN** | Good | High | 10-20% |
+| **DeepFilterNet 3** | **Excellent** | **Very High** | 25-50%+ |
+
+> **Note:** DeepFilterNet 3 is planned for future inclusion in the desktop build where larger binaries and higher CPU overhead are more acceptable.
+
+### Files
+
+- `build/lotus-denoise.js` — multi-model getUserMedia shim
+- `vite.config.js` — `lotusDenoise()` plugin (copies assets for RNNoise, Speex, and NoiseGate)
+- `src/app/plugins/call/CallEmbed.ts` — advanced tier → widget URL params
+- `src/app/utils/lotusDenoiseUtils.ts` — support detection and model comparison metadata
+- `src/app/features/settings/general/General.tsx` — advanced settings UI + mic meter
 
 ### Call Button Scoping
 
@@ -288,6 +502,7 @@ A pill of overlapping 24px user avatars displayed at the bottom-right of each me
 ### "Seen by" Modal — `EventReaders`
 
 Clicking the avatar pill opens a modal (`src/app/components/event-readers/EventReaders.tsx`) listing:
+
 - User avatar
 - Display name
 - Formatted timestamp of when the receipt was recorded
@@ -299,11 +514,11 @@ Clicking the avatar pill opens a modal (`src/app/components/event-readers/EventR
 
 Visual feedback on message delivery state, shown on the sender's own messages:
 
-| State | Indicator |
-|---|---|
-| Sending (local echo) | ⟳ rotating clock icon |
-| Sent (server ACK received) | ✓ checkmark |
-| Failed | ✕ in red; orange glow in TDS |
+| State                      | Indicator                    |
+| -------------------------- | ---------------------------- |
+| Sending (local echo)       | ⟳ rotating clock icon        |
+| Sent (server ACK received) | ✓ checkmark                  |
+| Failed                     | ✕ in red; orange glow in TDS |
 
 The indicator is hidden once the server confirms the event (when the internal status transitions to `null`), keeping the timeline clean for settled messages.
 
@@ -316,7 +531,7 @@ The indicator is hidden once the server confirms the event (when the internal st
 - Topic `formatted_body` is rendered via `sanitizeCustomHtml` + `html-react-parser`, supporting bold, italic, links, and other inline HTML
 - The room header shows a plain-text preview of the topic
 - Clicking the topic preview opens a full modal with the formatted body
-- The room settings topic editor includes a formatting toolbar with **B**, *I*, ~~S~~, and `code` buttons
+- The room settings topic editor includes a formatting toolbar with **B**, _I_, ~~S~~, and `code` buttons
 
 ### Edit History Viewer
 
@@ -395,21 +610,21 @@ Redacted events display "This message has been deleted" along with the redaction
 
 `UrlPreviewCard.tsx` implements 13 domain-specific card layouts:
 
-| Domain | Layout |
-|---|---|
-| YouTube | Thumbnail, title, channel, duration |
-| Vimeo | Thumbnail, title, author |
-| GitHub | Repo name, description, stars/forks/language |
-| Twitter / X | Avatar, display name, handle, tweet body |
-| Reddit | Subreddit, post title, score, comment count |
-| Spotify | Album art, track/album/playlist name, artist |
-| Twitch | Stream thumbnail, streamer, game, viewer count |
-| Steam | Header image, game name, price, rating |
-| Wikipedia | Article title, extract excerpt |
-| Discord | Server name, invite metadata |
-| npm | Package name, version, description, weekly downloads |
-| Stack Overflow | Question title, vote/answer count, tags |
-| IMDb | Poster, title, year, rating |
+| Domain         | Layout                                               |
+| -------------- | ---------------------------------------------------- |
+| YouTube        | Thumbnail, title, channel, duration                  |
+| Vimeo          | Thumbnail, title, author                             |
+| GitHub         | Repo name, description, stars/forks/language         |
+| Twitter / X    | Avatar, display name, handle, tweet body             |
+| Reddit         | Subreddit, post title, score, comment count          |
+| Spotify        | Album art, track/album/playlist name, artist         |
+| Twitch         | Stream thumbnail, streamer, game, viewer count       |
+| Steam          | Header image, game name, price, rating               |
+| Wikipedia      | Article title, extract excerpt                       |
+| Discord        | Server name, invite metadata                         |
+| npm            | Package name, version, description, weekly downloads |
+| Stack Overflow | Question title, vote/answer count, tags              |
+| IMDb           | Poster, title, year, rating                          |
 
 Generic (non-domain-specific) cards display a Google S2 favicon. Empty or unparseable preview responses are suppressed entirely rather than showing a blank card.
 
@@ -436,13 +651,13 @@ Generic (non-domain-specific) cards display a Google S2 favicon. Empty or unpars
 
 A presence status selector in the user panel offering five modes:
 
-| Mode | Matrix broadcast |
-|---|---|
-| Online | `online` |
-| Idle | `unavailable` |
+| Mode           | Matrix broadcast                    |
+| -------------- | ----------------------------------- |
+| Online         | `online`                            |
+| Idle           | `unavailable`                       |
 | Do Not Disturb | `unavailable` + `status_msg: 'dnd'` |
-| Invisible | `offline` |
-| Auto | Standard Matrix presence lifecycle |
+| Invisible      | `offline`                           |
+| Auto           | Standard Matrix presence lifecycle  |
 
 - Selection persists via the `presenceStatus` setting
 - `usePresenceUpdater` short-circuits its automatic presence updates when a manual mode (anything other than Auto) is selected
@@ -457,6 +672,7 @@ A presence status selector in the user panel offering five modes:
 ### Presence Badges
 
 `PresenceBadge` component displays a colored dot indicating presence state. Used in:
+
 - Members drawer
 - User settings panel
 
@@ -465,14 +681,22 @@ A presence status selector in the user panel offering five modes:
 `PresenceRingAvatar` wraps any avatar component using `React.cloneElement` to inject an `outline: 2px solid` ring whose color maps to the user's presence state. `outlineOffset: 2px` ensures the ring sits cleanly outside the avatar regardless of the avatar's `border-radius`.
 
 Applied in:
+
 - Message timeline
 - Members drawer
 - `@mention` autocomplete dropdown
 - Inbox / notifications panel
 
+### Status Revert Bug Fix (June 2026)
+
+`usePresenceUpdater` previously captured the user's custom status message once via `localStorage.getItem` at effect initialization. When the user changed their status message in Profile Settings, subsequent automatic transitions back to `online` (e.g., returning from idle) would silently broadcast the old status message, reverting the custom status.
+
+Fixed by replacing the single read with a `readStatus()` function called inside every `setOnline` and `setUnavailable` invocation, so the current localStorage value is always used.
+
 ### Document Title Unread Count
 
 The browser tab title updates to reflect unread state:
+
 - `(N) Lotus Chat` — N unread messages
 - `· Lotus Chat` — unread activity without a specific count
 - `Lotus Chat` — no unread items
@@ -480,6 +704,7 @@ The browser tab title updates to reflect unread state:
 ### Extended Profile Fields
 
 Supports MSC4133 custom profile fields via `PUT /_matrix/client/unstable/uk.tcpip.msc4133/{userId}/{field}`:
+
 - `m.pronouns` — displayed in profile panels
 - `m.tz` — IANA timezone string (e.g., `America/New_York`)
 
@@ -488,12 +713,25 @@ Hook: `src/app/hooks/useExtendedProfile.ts`
 ### User Local Time
 
 When a user has `m.tz` set in their profile:
+
 - Their profile panel shows a clock icon, their current local time, and the timezone abbreviation
 - The displayed time updates every 60 seconds
 - Respects the global `hour24Clock` setting for 12h/24h formatting
 
 Hook: `src/app/hooks/useLocalTime.ts`
 
+### User-to-User Private Notes (P5-34)
+
+A private text note on any user's profile, visible only to the logged-in user and synced across all their devices.
+
+- Textarea in the user profile popout (below device sessions), shown only when viewing another user — never on your own profile
+- Auto-saves 800 ms after the last keystroke with a "Saving…" indicator
+- Character counter appears when fewer than 100 characters remain (max 500)
+- Stored in `io.lotus.user_notes` account data as `{ [userId]: string }` — deletes the key when the note is cleared
+- Reactive: updates immediately if account data arrives from another device mid-session
+
+Hook: `src/app/hooks/useUserNotes.ts`
+
 ---
 
 ## UX & Composer
@@ -509,6 +747,7 @@ A hover toolbar appears over messages, showing the 3 most recently used emojis (
 ### In-App Notification Toasts
 
 `LotusToastContainer.tsx` displays rich in-app notification toasts with:
+
 - 24px sender avatar
 - Sender display name
 - Message body preview
@@ -531,6 +770,7 @@ Messages exceeding a configurable line threshold are truncated with a "Show more
 ### Message Send Animation
 
 A subtle animation plays on the sender's own messages as they appear in the timeline:
+
 - `transform: scale(0.97) → scale(1)` combined with `opacity: 0.4 → 1`
 - Duration: 0.15s, ease-out
 - Only applied to the current user's outgoing messages
@@ -539,6 +779,7 @@ A subtle animation plays on the sender's own messages as they appear in the time
 ### Right-Click Room Context Menu
 
 Right-clicking a room in the sidebar opens a context menu with:
+
 - **Mute** with a duration submenu: 15 minutes, 1 hour, 8 hours, 24 hours, Indefinite
 - **Copy Room Link** — copies the `matrix.to` URI to clipboard
 - **Mark as Read** — marks all events in the room as read
@@ -558,6 +799,7 @@ A text input at the top of the room list filters rooms by display name in real t
 ### DM Last Message Preview
 
 Direct message entries in the sidebar show:
+
 - A 48-character truncated preview of the last message body
 - A relative timestamp (e.g., "2m ago")
 - Reactivity via `useRoomLatestRenderedEvent`
@@ -566,6 +808,7 @@ Direct message entries in the sidebar show:
 ### Room Sort Order
 
 The room list sort order can be configured in **Settings → Appearance**:
+
 - Recent Activity (default)
 - A → Z (alphabetical)
 - Unread First
@@ -582,6 +825,7 @@ Persists via the `homeRoomSort` setting.
 ### Invite Link + QR Code
 
 `RoomShareInvite.tsx` provides a shareable invite UI:
+
 - 160×160px QR code generated via `api.qrserver.com`
 - "Copy Link" button to copy the `matrix.to` URI
 - Also accessible via a toggle button (⊞) in the Invite modal
@@ -605,6 +849,17 @@ A toggle in **Settings → Privacy** switches between sending `m.read` (public r
 - Clicking sends `mx.knockRoom(roomId)` with an optional reason
 - The members drawer shows a "Pending Requests" section for room admins, listing users who have knocked
 
+### Knock-to-Join Notifications for Admins (P4-3)
+
+Room and space admins are notified in real time when users knock on a restricted room.
+
+- `usePendingKnocks(room)` hook listens to `RoomMemberEvent.Membership` events and returns all members currently in the `knock` state
+- Power level check: only shown to users with sufficient invite-level permissions (`usePowerLevelsContext()`)
+- **Members button badge:** when knocks are pending, a `Warning`-variant solid `Badge` overlays the Members button in the room header showing the pending count
+- Badge is `aria-hidden`; the Members button `aria-label` is updated to announce the count for screen readers
+
+Hook: `src/app/hooks/usePendingKnocks.ts`
+
 ### Code Syntax Highlighting (TDS)
 
 `syntaxHighlight.ts` provides TDS-aware syntax highlighting using inline styles derived from `--lt-accent-*` CSS variables. Supported languages: JavaScript, TypeScript, JSX, TSX, Python, Rust. Falls back to ReactPrism for unsupported languages.
@@ -643,6 +898,7 @@ Users can individually show or hide each composer toolbar button in **Settings
 - **HTML** — styled, self-contained page
 
 Features:
+
 - Optional date range filter
 - Progress indicator during export
 - Uses `mx.paginateEventTimeline()` to retrieve history in chunks
@@ -747,6 +1003,7 @@ Three one-tap presets at the top of **Settings → Notifications** that apply a
 ### Server Notices
 
 `m.server_notice` rooms receive special treatment:
+
 - A `Chip variant="Warning"` badge reading "Server Notice" is shown in the room header
 - The composer is read-only (no message input)
 - Invite, Report Room, and Room Settings menu items are hidden
@@ -760,7 +1017,7 @@ Three one-tap presets at the top of **Settings → Notifications** that apply a
 `mxcUrlToHttp()` calls now use the correct argument order for MSC3916 authenticated media:
 
 ```ts
-mxcUrlToHttp(mx, mxcUrl, useAuthentication, width, height, 'crop')
+mxcUrlToHttp(mx, mxcUrl, useAuthentication, width, height, 'crop');
 ```
 
 The `useAuthentication` parameter was previously mispositioned, causing unauthenticated requests to be sent for media in rooms that required authentication.
@@ -787,32 +1044,37 @@ The `encUrlPreview` setting defaults to `true` rather than `false`. A security a
 
 ## Key Custom Files
 
-| File | Purpose |
-|---|---|
-| `src/lotus-terminal.css.ts` | TDS CSS variable definitions, scanline/vignette effects, dark + light palette tokens |
-| `src/lotus-boot.ts` | Matrix-style boot sequence animation on the welcome page |
-| `src/app/hooks/useRoomReadPositions.ts` | Reactive hook returning `Map<eventId, userId[]>` for per-message read receipts |
-| `src/app/features/room/ReadPositionsContext.ts` | React context providing read positions map to timeline components |
-| `src/app/components/read-receipt-avatars/` | `ReadReceiptAvatars` component — overlapping avatar pill with overflow count |
-| `src/app/components/event-readers/EventReaders.tsx` | "Seen by" modal listing readers with display name and timestamp |
-| `src/app/components/GifPicker.tsx` | Giphy-powered GIF picker, TDS-styled, gated on `gifApiKey` in config |
-| `src/app/features/call/CallControls.tsx` | Push to Deafen (M key), PTT visual indicator, TDS typing dots |
-| `src/app/plugins/call/CallControl.ts` | `onControlMutation()` state tracking, screenshare audio mute logic, call button scoping |
-| `src/app/components/CallEmbedProvider.tsx` | PiP window, draggable overlay, navigate-on-click, imperative geometry sync |
-| `src/app/plugins/call/CallEmbed.ts` | `getBoundingClientRect()`-based embed positioning, ResizeObserver sync, dark mode injection |
-| `src/app/plugins/millify.ts` | Named re-export of `millify` to fix Rolldown `__toESM` CJS interop bug |
-| `src/app/features/room/MediaGallery.tsx` | Images/Videos/Files gallery drawer with pagination and E2EE awareness |
-| `src/app/features/room/PollCreator.tsx` | Poll creation UI for stable `m.poll.start`, single/multiple choice, 2–10 options |
-| `src/app/features/common-settings/general/RoomShareInvite.tsx` | QR code + copy link invite sharing modal |
-| `src/app/utils/syntaxHighlight.ts` | TDS-aware syntax highlighter using `--lt-accent-*` inline styles |
-| `src/app/features/room-settings/ExportRoomHistory.tsx` | Plain Text / JSON / HTML room history export with date range and E2EE support |
-| `src/app/features/room-settings/RoomActivityLog.tsx` | Human-readable mod log for member and state change events |
-| `src/app/features/room-settings/RoomServerACL.tsx` | `m.room.server_acl` editor with allow/deny lists and wildcard validation |
-| `src/app/features/room-settings/RoomInsights.tsx` | Room stats: top members, top reactions, media breakdown, activity heatmap |
-| `src/app/features/bookmarks/BookmarksPanel.tsx` | Bookmarks sidebar panel backed by `io.lotus.bookmarks` account data |
-| `src/app/hooks/useBookmarks.ts` | Hook for reading and mutating the bookmarks account data entry |
-| `src/app/features/room/ScheduleMessageModal.tsx` | MSC4140 delayed event scheduling UI with date/time picker |
-| `src/app/utils/scheduledMessages.ts` | Helpers for creating, listing, and cancelling MSC4140 delayed events |
-| `src/app/hooks/useExtendedProfile.ts` | MSC4133 extended profile fields (`m.pronouns`, `m.tz`) read/write |
-| `src/app/hooks/useLocalTime.ts` | Derives current local time from `m.tz` profile field, updates every 60s |
-| `src/app/components/url-preview/UrlPreviewCard.tsx` | 13 domain-specific URL preview layouts plus generic fallback with favicon |
+| File                                                           | Purpose                                                                                     |
+| -------------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
+| `src/lotus-terminal.css.ts`                                    | TDS CSS variable definitions, scanline/vignette effects, dark + light palette tokens        |
+| `src/lotus-boot.ts`                                            | Matrix-style boot sequence animation on the welcome page                                    |
+| `src/app/hooks/useRoomReadPositions.ts`                        | Reactive hook returning `Map<eventId, userId[]>` for per-message read receipts              |
+| `src/app/features/room/ReadPositionsContext.ts`                | React context providing read positions map to timeline components                           |
+| `src/app/components/read-receipt-avatars/`                     | `ReadReceiptAvatars` component — overlapping avatar pill with overflow count                |
+| `src/app/components/event-readers/EventReaders.tsx`            | "Seen by" modal listing readers with display name and timestamp                             |
+| `src/app/components/GifPicker.tsx`                             | Giphy-powered GIF picker, TDS-styled, gated on `gifApiKey` in config                        |
+| `src/app/features/call/CallControls.tsx`                       | Push to Deafen (M key), PTT visual indicator, TDS typing dots                               |
+| `src/app/plugins/call/CallControl.ts`                          | `onControlMutation()` state tracking, screenshare audio mute logic, call button scoping     |
+| `src/app/components/CallEmbedProvider.tsx`                     | PiP window, draggable overlay, navigate-on-click, imperative geometry sync                  |
+| `src/app/plugins/call/CallEmbed.ts`                            | `getBoundingClientRect()`-based embed positioning, ResizeObserver sync, dark mode injection |
+| `src/app/plugins/millify.ts`                                   | Named re-export of `millify` to fix Rolldown `__toESM` CJS interop bug                      |
+| `src/app/features/room/MediaGallery.tsx`                       | Images/Videos/Files gallery drawer with pagination and E2EE awareness                       |
+| `src/app/features/room/PollCreator.tsx`                        | Poll creation UI for stable `m.poll.start`, single/multiple choice, 2–10 options            |
+| `src/app/features/common-settings/general/RoomShareInvite.tsx` | QR code + copy link invite sharing modal                                                    |
+| `src/app/utils/syntaxHighlight.ts`                             | TDS-aware syntax highlighter using `--lt-accent-*` inline styles                            |
+| `src/app/features/room-settings/ExportRoomHistory.tsx`         | Plain Text / JSON / HTML room history export with date range and E2EE support               |
+| `src/app/features/room-settings/RoomActivityLog.tsx`           | Human-readable mod log for member and state change events                                   |
+| `src/app/features/room-settings/RoomServerACL.tsx`             | `m.room.server_acl` editor with allow/deny lists and wildcard validation                    |
+| `src/app/features/room-settings/RoomInsights.tsx`              | Room stats: top members, top reactions, media breakdown, activity heatmap                   |
+| `src/app/features/bookmarks/BookmarksPanel.tsx`                | Bookmarks sidebar panel backed by `io.lotus.bookmarks` account data                         |
+| `src/app/hooks/useBookmarks.ts`                                | Hook for reading and mutating the bookmarks account data entry                              |
+| `src/app/features/room/ScheduleMessageModal.tsx`               | MSC4140 delayed event scheduling UI with date/time picker                                   |
+| `src/app/utils/scheduledMessages.ts`                           | Helpers for creating, listing, and cancelling MSC4140 delayed events                        |
+| `src/app/hooks/useExtendedProfile.ts`                          | MSC4133 extended profile fields (`m.pronouns`, `m.tz`) read/write                           |
+| `src/app/hooks/useLocalTime.ts`                                | Derives current local time from `m.tz` profile field, updates every 60s                     |
+| `src/app/components/url-preview/UrlPreviewCard.tsx`            | 13 domain-specific URL preview layouts plus generic fallback with favicon                   |
+| `src/app/features/lotus/avatarDecorations.ts`                  | Avatar decoration catalog, CDN URL, `decorationUrl()` helper                                |
+| `src/app/hooks/useAvatarDecoration.ts`                         | Profile field fetch with module-level cache and in-flight deduplication                     |
+| `src/app/components/avatar-decoration/AvatarDecoration.tsx`    | APNG overlay wrapper rendered around avatars in timeline, members drawer, autocomplete      |
+| `src/app/features/settings/account/ProfileDecoration.tsx`      | Settings decoration picker — scrollable grid, category headers, save button                 |
+| `scripts/syncDecorations.mjs`                                  | CDN HEAD-check sync script: removes catalog entries for deleted Nextcloud files             |

LOTUS_TODO.md

@@ -5,6 +5,28 @@
 
 ---
 
+## 🏗️ Infrastructure & Maintenance
+
+- [x] **Upgrade Synapse to v1.155.0** ✅ Done 2026-06-18
+  - **Context:** 1.155.0 is the last version supporting Debian 12 Bookworm. LXC 151 is already on Debian 13 Trixie — OS migration was completed prior to this upgrade.
+  - **What changed (1.154→1.155):** No breaking changes, no config changes, no DB migrations. Bugfixes: to-device EDU size limiting, restricted room joins, sliding sync subscription response timing. Rust port of more internal classes (perf only).
+  - **MSC4452** (Preview URL capabilities) shipped in 1.154 — opt-in via `msc4452_enabled`, not enabled.
+
+---
+
+## 📱 Quick Feature Additions
+
+- [x] **Full-Screen Camera Broadcasts** ⚠️ UNTESTED — verify in a real call
+  - **Context:** Element Call currently supports full-screening screenshares. We need to parity this functionality for camera broadcasts.
+  - **Goal:** Users should be able to toggle any camera feed to full-screen mode, similar to the existing screenshare full-screen implementation.
+  - **Implemented 2026-06-18:**
+    1. **Fullscreen button always shows** — removed `screenshare &&` gate in `CallControls.tsx`. The fullscreen button is now available in camera-only calls, not just during screenshares.
+    2. **Per-participant camera focus** — `CallControl.focusCameraParticipant(userId)` added. Finds the participant's video tile via `[data-testid="videoTile"]` / `[data-video-fit]` + `[aria-label="${userId}"]`, enables spotlight mode, then clicks the tile to focus them.
+    3. **MemberGlance "Focus camera" action** — clicking a participant avatar in the call status bar now opens a mini popup with "Focus camera" (triggers focusCameraParticipant) and "View profile" options, rather than immediately opening the profile.
+    4. **PiP fullscreen button** — a small fullscreen toggle button (⛶/⊡) is shown in the PiP overlay top-right, allowing users to go fullscreen directly from PiP mode without navigating back to the call room.
+
+---
+
 ## ⚠️ TDS DESIGN LAW — READ BEFORE TOUCHING ANY UI
 
 > **ALL Lotus Terminal Design System (TDS) styling — colors, animations, glows, borders, fonts, spacing — MUST come exclusively from `/root/code/web_template/base.css` CSS variables.**
@@ -35,37 +57,37 @@ Status: `[ ]` pending · `[~]` in progress · `[x]` completed
 ## Server Capabilities (as of June 2026)
 
 - **Homeserver:** `matrix.lotusguild.org`
-- **Synapse version:** `1.153.0` (2026-05-19) — fully up to date
+- **Synapse version:** `1.155.0` (2026-06-18) — fully up to date; last version for Debian 12 (LXC 151 already on Debian 13 Trixie)
 - **Matrix spec:** up to `v1.12` formally; newer MSC features via `unstable_features`
 
 ### Confirmed facts
 
-| Finding                                                                       | Impact                                                                                                                                        |
-| ----------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
-| **MSC flags ON:** `msc4140` · `msc3771` · `msc3440.stable` · `msc4133.stable` · `simplified_msc3575` | All safe to use now |
-| **MSC flags OFF:** `msc4306` (thread subscriptions) · `msc3882` · `msc3912` · `msc4155` | These features are BLOCKED |
-| **MSC3266** room summary: returns 404 | Room Preview feature BLOCKED |
-| **MSC3892** relation redaction: not in flags | Reaction Redaction feature BLOCKED |
-| **MSC4260** report user: server at v1.12, endpoint may not exist | Report User feature BLOCKED |
-| **MSC4151** report room: HTTP 405 on GET = endpoint exists (POST only) | Report Room live ✅ |
-| `folds AvatarImage` does NOT accept children | Add frame/overlay inside `UserAvatar.tsx` itself — optional `frameName` prop |
-| No in-app toast system exists (was) | Built `ToastProvider` + Jotai queue; at `App.tsx:65` |
-| `useUnverifiedDeviceCount()` hook exists | `src/app/hooks/useDeviceVerificationStatus.ts:65-106` |
-| Voice player: `AudioContent.tsx:44-223` | Playback rate on hidden `<audio>` at line 217 |
-| `CallControl.setMicrophone(bool)` at `CallControl.ts:206-212` | For AFK auto-mute |
-| `CallControl.toggleSound()` at `CallControl.ts:230-251` | Push-to-deafen — just wire a hotkey to this |
-| matrix-js-sdk has NO arbitrary profile field methods | Use `mx.http.authedRequest()` for MSC4133 |
-| Sanitizer (`sanitize.ts`) allows table, div, span, a, code, hr | LFG HTML card is safe locally; test on Element/FluffyChat |
-| Sanitizer STRIPS `<math>`/MathML tags | Math/LaTeX task must also modify sanitizer |
-| Service worker EXISTS at `src/sw.ts` | Quick-reply task: add `notificationclick` handler |
-| `knockSupported()` utility exists at `matrix.ts:376-391` | Knock UX: only need "Request to Join" in `RoomIntro.tsx` |
-| `KeywordMessages.tsx` already has custom keyword push rules | Full push rule editor: only non-keyword rule types need new UI |
-| `getMatrixToRoom()` in `matrix-to.ts` generates invite URLs | Invite link: just add QR code to room settings |
-| Cindy CANNOT inject audio into EC call stream | In-call soundboard must be redesigned as local-only |
-| Folds uses vanilla-extract in non-TDS, NOT CSS custom properties | Custom accent color: must create new vanilla-extract theme variant dynamically |
-| Theme presets need ~50 CSS custom properties each | Significant design work before coding |
-| `useCallSpeakers.ts` CSS MutationObserver polling | Visual speaking indicator: TDS ring animation on top of existing data |
-| MSC3489/3672 live location: BOTH false on server | Live Location BLOCKED |
+| Finding                                                                                                                                             | Impact                                                                         |
+| --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ |
+| **MSC flags ON:** `msc4140` · `msc3771` · `msc3440.stable` · `msc4133.stable` · `simplified_msc3575` · `msc4222` · `msc3266` · `msc3401_matrix_rtc` | All safe to use now                                                            |
+| **MSC flags OFF:** `msc4306` (thread subscriptions) · `msc3882` · `msc3912` · `msc4155`                                                             | These features are BLOCKED                                                     |
+| **MSC3266** room summary: flag `msc3266_enabled: true` set but `GET /v1/rooms/{id}/summary` still returns 404 (M_UNRECOGNIZED)                      | Room Preview BLOCKED — endpoint not implemented in Synapse 1.155               |
+| **MSC3892** relation redaction: not in flags                                                                                                        | Reaction Redaction feature BLOCKED                                             |
+| **MSC4260** report user: `POST /_matrix/client/v3/users/{userId}/report` returns **200** ✅                                                         | **Report User UNBLOCKED** — endpoint live since Synapse 1.133; ready to build  |
+| **MSC4151** report room: HTTP 405 on GET = endpoint exists (POST only)                                                                              | Report Room live ✅                                                            |
+| `folds AvatarImage` does NOT accept children                                                                                                        | Add frame/overlay inside `UserAvatar.tsx` itself — optional `frameName` prop   |
+| No in-app toast system exists (was)                                                                                                                 | Built `ToastProvider` + Jotai queue; at `App.tsx:65`                           |
+| `useUnverifiedDeviceCount()` hook exists                                                                                                            | `src/app/hooks/useDeviceVerificationStatus.ts:65-106`                          |
+| Voice player: `AudioContent.tsx:44-223`                                                                                                             | Playback rate on hidden `<audio>` at line 217                                  |
+| `CallControl.setMicrophone(bool)` at `CallControl.ts:206-212`                                                                                       | For AFK auto-mute                                                              |
+| `CallControl.toggleSound()` at `CallControl.ts:230-251`                                                                                             | Push-to-deafen — just wire a hotkey to this                                    |
+| matrix-js-sdk has NO arbitrary profile field methods                                                                                                | Use `mx.http.authedRequest()` for MSC4133                                      |
+| Sanitizer (`sanitize.ts`) allows table, div, span, a, code, hr                                                                                      | LFG HTML card is safe locally; test on Element/FluffyChat                      |
+| Sanitizer STRIPS `<math>`/MathML tags                                                                                                               | Math/LaTeX task must also modify sanitizer                                     |
+| Service worker EXISTS at `src/sw.ts`                                                                                                                | Quick-reply task: add `notificationclick` handler                              |
+| `knockSupported()` utility exists at `matrix.ts:376-391`                                                                                            | Knock UX: only need "Request to Join" in `RoomIntro.tsx`                       |
+| `KeywordMessages.tsx` already has custom keyword push rules                                                                                         | Full push rule editor: only non-keyword rule types need new UI                 |
+| `getMatrixToRoom()` in `matrix-to.ts` generates invite URLs                                                                                         | Invite link: just add QR code to room settings                                 |
+| Cindy CANNOT inject audio into EC call stream                                                                                                       | In-call soundboard must be redesigned as local-only                            |
+| Folds uses vanilla-extract in non-TDS, NOT CSS custom properties                                                                                    | Custom accent color: must create new vanilla-extract theme variant dynamically |
+| Theme presets need ~50 CSS custom properties each                                                                                                   | Significant design work before coding                                          |
+| `useCallSpeakers.ts` CSS MutationObserver polling                                                                                                   | Visual speaking indicator: TDS ring animation on top of existing data          |
+| MSC3489/3672 live location: BOTH false on server                                                                                                    | Live Location BLOCKED                                                          |
 
 ---
 
@@ -104,17 +126,6 @@ Status: `[ ]` pending · `[~]` in progress · `[x]` completed
 
 ---
 
-## Known Bugs
-
-### [!] BUG · Drag-and-drop file overlay doesn't dismiss on hover-away
-
-**Confirmed bug** — drag a file over the window without dropping: the drop overlay persists.  
-**Fix:** Ensure `dragleave` fires correctly at the window/document level. Child element boundaries can cause spurious `dragleave` — use a counter or `relatedTarget` check.  
-**[AUDIT REQUIRED]** Find the drag-and-drop overlay component in `RoomInput.tsx` or the room view. Confirm the exact event listener structure.  
-**Complexity:** Low (bug fix).
-
----
-
 ## Priority 3 — Higher complexity / lower daily frequency
 
 ### [ ] P3-4 · Accessibility Improvements (WCAG 2.1 AA)
@@ -125,25 +136,24 @@ Status: `[ ]` pending · `[~]` in progress · `[x]` completed
 - Reading messages in the timeline (screen reader announces new messages)
 - Composing and sending a reply
 - Opening and closing modals (focus trap, return focus)
-- ARIA labels on all icon-only buttons  
-  **Scope:** Do NOT attempt to make every corner of the app AA-compliant in one pass — focus on the golden path (open app → find room → read → reply → send).  
-  **[AUDIT REQUIRED]** — Run an automated audit first: `npx axe-core` or browser DevTools accessibility tree. Document every violation before writing a single line of code. Prioritize by severity (critical > serious > moderate).  
-  **Complexity:** Medium-High (audit is the main work).
+- ARIA labels on all icon-only buttons
 
----
+**Scope:** Do NOT attempt to make every corner of the app AA-compliant in one pass — focus on the golden path (open app → find room → read → reply → send).  
+**[AUDIT REQUIRED]** — Run an automated audit first: `npx axe-core` or browser DevTools accessibility tree. Document every violation before writing a single line of code. Prioritize by severity (critical > serious > moderate).
 
-### [x] P3-6 · Configurable Composer Toolbar
+**Investigation Findings:**
 
-**What:** Let users rearrange or hide individual composer toolbar buttons (GIF, Sticker, Emoji, File, Voice, Location). Changes stored in `settingsAtom`. Access via a small "⚙ Customize toolbar" option in toolbar overflow.  
-**[AUDIT REQUIRED]** — Audit the current toolbar button rendering in `RoomInput.tsx`. Understand the layout system (is it a fixed array or already mapped from config?). Drag-to-reorder may require a DnD library; consider whether reorder is worth the complexity vs just toggle-visibility.  
-**Complexity:** Medium-High (drag reorder adds significant complexity).
+- **Root Cause:** Inconsistent focus management, missing `aria-live` regions for dynamic timeline updates, and sparse global keyboard shortcuts.
+- **Approach:** Standardize `focus-trap-react` usage (reference `RoomNavItem.tsx`). Add `aria-live` regions to the timeline. Expand `useKeyDown.ts` for section navigation shortcuts.
+- **Complexity:** Medium-High (audit is the main work).
 
 ---
 
 ### [ ] P3-8 · Thread Panel (full side drawer)
 
 **⚠️ LARGEST FEATURE — requires its own planning session before implementation.**  
-**What:** A right-side drawer for threaded conversations. Currently "Reply in Thread" exists but there is no panel to read or write thread replies.  
+**What:** A right-side drawer for threaded conversations. Currently "Reply in Thread" exists but there is no panel to read or write thread replies.
+
 Features:
 
 - Click "Reply in Thread" → opens thread drawer on the right
@@ -151,20 +161,56 @@ Features:
 - Full message rendering for all in-thread replies (reuse timeline components)
 - Reply input at the bottom (full composer with formatting, emoji, etc.)
 - Unread count badge on the thread button in the main timeline
-- Keyboard shortcut to close thread panel  
-  **Architecture:**
+- Keyboard shortcut to close thread panel
+
+**Architecture:**
+
 - New Jotai atom: `activeThreadEventId: string | null`
 - New component: `src/app/features/room/thread/ThreadPanel.tsx`
 - Rendered alongside `RoomView` as a conditional right panel (mirror the members drawer pattern)
 - Filter events in timeline to `m.thread` relation for the active root event ID
-- Shares the same `mx` client and room reference as the main timeline  
-  **[AUDIT REQUIRED]** — Deeply audit how `m.thread` relation events are currently stored and retrieved in the matrix-js-sdk. Understand the thread aggregation API: `GET /rooms/{roomId}/relations/{eventId}/m.thread`. Check if `RoomTimeline.tsx` currently filters out thread replies from the main timeline (it should — confirm).  
-  **Complexity:** High.
+- Shares the same `mx` client and room reference as the main timeline
+
+**[AUDIT REQUIRED]** — Deeply audit how `m.thread` relation events are currently stored and retrieved in the matrix-js-sdk. Understand the thread aggregation API: `GET /rooms/{roomId}/relations/{eventId}/m.thread`. Check if `RoomTimeline.tsx` currently filters out thread replies from the main timeline (it should — confirm).
+
+**Investigation Findings:**
+
+- **Root Cause:** Current `m.thread` events are treated as standard `m.room.message` events and rendered in the main timeline.
+- **Approach:** Introduce new Jotai atom `activeThreadEventId`. Create `ThreadPanel.tsx`. Update `RoomTimeline.tsx` to filter out thread relations (`m.relates_to`). Implement aggregation fetch using `GET /rooms/{roomId}/relations/{eventId}/m.thread`. Use `thread.timelineSet` directly for the most accurate thread view.
+- **Complexity:** High.
 
 ---
 
 ## Priority 4 — Specialized, high complexity, or low priority
 
+### [ ] P4-7 · Virtualized Infinite Scroll for Search Results
+
+**What:** Replace the manual "load more" button with an automated, virtualized infinite scroll for search results.  
+**Approach:** Utilize `@tanstack/react-virtual` in `MessageSearch.tsx` to handle the `nextToken` automatically as the user scrolls.
+
+### [ ] P4-8 · Encrypted Message Search Indexing & Caching
+
+**What:** Implement a persistent local cache for search results, optimized for encrypted rooms.  
+**Approach:** Use `IndexedDB` to store search metadata (event IDs, timestamps) to prevent redundant server-side decryption/fetching.
+
+### [x] P4-9 · Advanced Search Filter UI — PARTIALLY DONE (UNTESTED)
+
+**What:** Improve search filter UX in `SearchFilters.tsx`.  
+**Completed 2026-06-18:**
+
+- ✅ `SelectSenderButton` — picker UI for sender filter (previously required typing `from:@user` by hand)
+- ✅ `DateRangeButton` — quick-pick presets: Today / Last week / Last month / Last year
+- ✅ `Has link` chip — `contains_url: true` filter, wired to Matrix API and URL param
+  **UNTESTED** — needs verification at chat.lotusguild.org.
+
+**Remaining for parity with Discord/Slack:**
+
+- [ ] `has:image` / `has:file` / `has:video` — msgtype filters (require client-side post-filtering, no server API)
+- [ ] Pinned messages filter
+- [ ] Saved searches / search history
+
+---
+
 ### [ ] P4-1 · Thread Notification Mode Per-Thread (MSC3771)
 
 **Spec:** MSC3771 (stable). Depends on Thread Panel (#P3-8).  
@@ -183,20 +229,12 @@ Features:
 
 ---
 
-### [ ] P4-3 · Knock-to-join Notifications for Admins
-
-**Note:** The basic knock-to-join UX is covered in P1-11 (completed). This task adds the admin notification side.  
-**What:** Space/room admins see a notification badge when there are pending knock requests. A "Pending Join Requests" section in the members drawer or room settings. Approve (invite) or deny (kick) each knock.  
-**Complexity:** Medium.
-
----
-
 ### [ ] P4-4 · Math / LaTeX Rendering in Messages (LOW PRIORITY)
 
 **Spec:** CS-API §11.5 (stable) — `formatted_body` can contain LaTeX.  
 **What:** Render `$...$` or `$$...$$` LaTeX expressions in message bodies. Use KaTeX (lightweight, ~100KB, renders server-side-compatible CSS). Must gracefully fall back to raw LaTeX text if KaTeX fails.  
 **Note:** This is LOW PRIORITY — only useful for academic/technical communities. Implement last.  
-**[AUDIT REQUIRED]** — Confirm KaTeX bundle size impact on the Vite bundle. Check if matrix-js-sdk's HTML sanitizer strips LaTeX before it reaches the renderer. The formatted_body sanitization pipeline is the main risk here.  
+**[AUDIT REQUIRED]** — Confirm KaTeX bundle size impact on the Vite bundle. Check if matrix-js-sdk's HTML sanitizer strips LaTeX before it reaches the renderer. The formatted_body sanitization pipeline is the main risk here. (Confirmed: sanitizer STRIPS `<math>` tags — must be patched alongside the renderer.)  
 **Complexity:** Low-Medium.
 
 ---
@@ -228,77 +266,44 @@ Features:
 
 **What:** A hex/HSL color picker in Settings → Appearance. Chosen color replaces the primary accent throughout the UI: buttons, badges, active states, highlights, presence dot, links. Applied via a CSS custom property override injected into `<head>`.  
 **IMPORTANT:** This feature is completely inactive when TDS is enabled — TDS has its own fixed palette. Add this setting under a "Non-TDS Themes" section that is hidden when TDS is active.  
-**[AUDIT REQUIRED]** Identify all CSS custom properties that constitute the "accent color" in non-TDS mode. Map them to the folds/vanilla-extract token names.  
+**[AUDIT REQUIRED]** Identify all CSS custom properties that constitute the "accent color" in non-TDS mode. Map them to the folds/vanilla-extract token names. (Confirmed: folds uses vanilla-extract, NOT CSS custom properties — must create a new vanilla-extract theme variant dynamically.)  
 **Complexity:** Medium.
 
 ---
 
 ### [ ] P5-2 · Additional Color Theme Presets
 
-**What:** 5 new one-click theme presets alongside TDS. Each must be a complete, polished system with proper contrast ratios (WCAG AA). All implemented as vanilla-extract themes matching the existing TDS pattern.  
+**What:** 5 new one-click theme presets alongside TDS. Each must be a complete, polished system with proper contrast ratios (WCAG AA). All implemented as vanilla-extract themes matching the existing TDS pattern.
+
 Themes:
 
 1. **Cyberpunk** — deep navy bg (`#0a0015`), electric purple (`#bf5fff`) + hot pink (`#ff2d9b`) accents, neon glow
 2. **Ocean** — deep sea blue bg (`#020b18`), teal (`#00c9b1`) + aqua (`#0096d6`) accents, soft feel
 3. **Blood Red** — near-black bg (`#0d0203`), deep crimson (`#7a0010`) + bright red (`#ff2233`) accents
 4. **Classic Matrix** — pure black bg (`#000000`), phosphor green (`#00ff41`) text + accents
-5. **Midnight** — dark charcoal (`#111827`), cool blue-grey (`#6b7ca8`) accents, clean minimal  
-   **[AUDIT REQUIRED]** Study `src/lotus-terminal.css.ts` for the full token list before designing themes. All tokens must be covered.  
-   **Complexity:** Medium (design effort is the main cost).
+5. **Midnight** — dark charcoal (`#111827`), cool blue-grey (`#6b7ca8`) accents, clean minimal
+
+**[AUDIT REQUIRED]** Study `src/lotus-terminal.css.ts` for the full token list before designing themes. All tokens must be covered (~50 CSS custom properties each).  
+**Complexity:** Medium (design effort is the main cost).
 
 ---
 
-### [ ] P5-9 · LFG (Looking for Group) Slash Command
+### [MOVED] P5-9 · LFG (Looking for Group) Command → LotusBot
 
-**What:** `/lfg` generates a formatted LFG post visible on ALL Matrix clients using standard `m.room.message` HTML. Fields: Game, Players Needed, Platform, Skill Level, Description, DM link. Other clients see clean formatted HTML; Lotus Chat renders an enhanced styled card.  
-**[AUDIT REQUIRED]** Test which HTML tags survive Matrix HTML sanitization on Element/FluffyChat before designing the card structure. Test with minimal HTML.  
-**Complexity:** Medium.
+**Decision:** Implemented as `!lfg` in LotusBot rather than a client slash command. Bot-side rendering works consistently across all Matrix clients; client-side enhanced cards would only be visible to Lotus Chat users and require sanitizer auditing. The bot can also support richer flows (list active LFGs, DM interested players, auto-expire posts).
 
 ---
 
-### [ ] P5-10 · Voice Channel User Limit
+### [x] P5-5 · Intersection-Based Lazy Loading ⚠️ UNTESTED — needs verification in timeline with many images
 
-**What:** Admins set max participants via custom state event `io.lotus.voice_limit: { max_users: N }`. Show "Channel Full (5/5)" to users over the limit. Local enforcement only.  
-**[AUDIT REQUIRED]** Check if Element Call has its own participant limit that should be integrated with rather than duplicated.  
-**Complexity:** Medium.
+**What:** Use `IntersectionObserver` to trigger media decryption and loading only when components approach the viewport.  
+**Approach:** Reduce initial memory footprint and improve timeline load times by deferring decryption of images/videos until they are visible.
 
----
+### [x] P5-6 · Context-Aware Thumbnail Previews ⚠️ UNTESTED
 
-### [ ] P5-11 · AFK / Idle Auto-Mute in Voice
-
-**What:** Auto-mute mic after X minutes of silence (detected via Web Audio AnalyserNode). Show "You were auto-muted due to inactivity" toast with click-to-unmute. Admin-configurable via `io.lotus.afk_timeout` state event. Disableable in Settings → Calls.  
-**[AUDIT REQUIRED]** Verify auto-mute must go through the same CallControl bridge as manual mute.  
-**Complexity:** Medium.
-
----
-
-### [ ] P5-12 · Seasonal / Event Themes
-
-**What:** Automatic + manually toggleable seasonal overlays with CSS particle effects and accent color variants:
-
-- **Halloween** (Oct 15–Nov 1): purple particles, orange accents, spider web pattern
-- **Christmas** (Dec 10–Jan 2): snow fall, red/green accents, snowflake pattern
-- **New Year** (Dec 31–Jan 1): firework burst animation, gold accents
-- **Pride** (June): rainbow gradient accent cycle  
-  All toggleable manually in Settings → Appearance regardless of date. Respects `prefers-reduced-motion`.  
-  **[AUDIT REQUIRED]** Design against existing CSS animation system in `lotus-terminal.css.ts`.  
-  **Complexity:** Medium.
-
----
-
-### [ ] P5-13 · Avatar Frame / Border Decorations
-
-**What:** Decorative CSS rings/frames rendered around user avatars. Built-in options: TDS Glow (animated orange pulsing), Cyberpunk (rotating gradient), Minimal (thin ring), Gold (supporter cosmetic). Stored in Matrix account data `io.lotus.avatar_frame`. Only visible in Lotus Chat.  
-**[AUDIT REQUIRED]** Verify folds Avatar component allows overlay decoration without breaking child-type constraints (see previous white-circle avatar bug).  
-**Complexity:** Medium.
-
----
-
-### [ ] P5-14 · Animated Avatar Overlay Decorations (Discord-style)
-
-**What:** Animated WebM/GIF overlays that float around avatars (transparent center showing avatar). Curated built-in set OR user-uploaded mxc:// overlay. Stored in account data. Only Lotus Chat users see them.  
-**[AUDIT REQUIRED]** See #P5-13 audit. Also decide: curated set only vs user-uploadable.  
-**Complexity:** Medium.
+**What:** Enhance thumbnail rendering in the timeline for consistent, polished aesthetics.  
+**Approach:** Use CSS `object-fit: cover` with improved focal-point centering within `ThumbnailContent` to prevent media stretching or awkward aspect-ratio cropping.  
+**Fix Applied:** Added `objectPosition: 'center top'` to: (1) `media.css.ts` → `Image` component (timeline images), (2) video thumbnail inline style in `RenderMessageContent.tsx`, (3) `GalleryTile` `<img>` in `MediaGallery.tsx`. Full-size viewers retain `objectFit: 'contain'` — no change. `objectPosition: 'center top'` prevents face/subject cropping on tall portrait images capped at 600px by `AttachmentBox`.
 
 ---
 
@@ -310,41 +315,152 @@ Themes:
 
 ---
 
-### [ ] P5-16 · Custom Join / Leave Sound Effects
-
-**What:** Local-only sounds when participants join/leave a call you're in. Built-in options + per-user settable. Detect via Element Call participant list change events.  
-**[AUDIT REQUIRED]** Find how Element Call exposes join/leave participant events to the parent window via postMessage bridge.  
-**Complexity:** Medium.
-
----
-
-### [ ] P5-20 · Quick Reply from Browser Notification
+### [~] P5-20 · Quick Reply from Browser Notification
 
 **What:** Inline reply field in browser notification toasts via Notification Actions API. Reply sends as threaded reply to the triggering message.  
-**[AUDIT REQUIRED]** (1) Verify browser Notification Actions API support in target browsers. (2) This requires a Service Worker to handle the reply event — confirm if Lotus Chat has one or needs one.  
-**Complexity:** Medium-High.
+**[AUDIT REQUIRED]** (1) Verify browser Notification Actions API support in target browsers. (2) Confirmed: service worker EXISTS at `src/sw.ts` — add `notificationclick` handler there.  
+**Complexity:** Medium-High.  
+**Partial Fix Applied ⚠️ UNTESTED:** Notifications now (a) show the real message body (`username: message` instead of "New inbox notification from..."), (b) click navigates directly to the room at the specific event (not the inbox), (c) `window.focus()` called on click so the tab comes to front, (d) reminder toasts also link to the specific event. Full inline-reply via Notification Actions API still needs the SW `push`+`notificationclick` pipeline (requires switching from `new Notification()` to `showNotification()` through the SW).
 
 ---
 
-### [x] P5-21 · Custom @Mention Highlight Color
+### [x] P5-30 · Advanced ML Noise Suppression (Krisp-style)
 
-**What:** Each user sets their own mention highlight color in Settings → Appearance. Applied as `--user-mention-color` CSS property override on mention-highlighted message rows.  
-**Complexity:** Low.
+**What:** High-end background noise cancellation using a pre-trained ML model (RNNoise) running in the browser. Removes dogs, fans, and keyboard clicks from the mic stream.  
+**Shipped:** 3-tier setting (Off / Browser-native / ML) in Settings → General → Calls. ML tier injects a same-origin pre-init shim into the vendored Element Call `index.html` that monkeypatches `getUserMedia` and routes the captured mic through an RNNoise `AudioWorklet` before LiveKit publishes — no EC fork required. See LOTUS_FEATURES.md → "Noise Suppression (Advanced Multi-Tier)".  
+**Key decision:** LiveKit's Krisp filter is LiveKit-Cloud-only (we self-host the SFU); EC's own RNNoise PR #3892 is unmerged. The shim is the same post-capture pipeline #3892 uses, executed from the realm we control, so it survives EC version bumps.  
+**AEC note (resolved-as-accepted):** WebAudio capture routing can weaken browser AEC — same tradeoff as EC's upstream feature; mitigated by keeping `echoCancellation`/`autoGainControl` on the raw capture and labeling the tier "beta".
+
+**Model Roadmap (priority order):**
+
+- [ ] **Verify DTLN** (16 kHz narrowband fix) in a real call before investing further — wired but unverified.
+- [ ] **DeepFilterNet 3** — best self-hostable upgrade: Rust→WASM, CPU real-time, 48 kHz fullband. Effort: self-host `df_bg.wasm` + DFN3 ONNX model, wire a 48 kHz worklet.
+- [ ] **Desktop-only / HW-gated:** FRCRN or NVIDIA Maxine (RTX/Tensor only) — impossible in-browser; would run in Tauri Rust backend + bridge a virtual mic into the webview. Must detect capability and only offer on supported hardware; web falls back to RNNoise.
+- **Excluded:** Krisp (LiveKit Cloud only); FRCRN/Maxine on web (GPU/server-bound).
 
 ---
 
-### [x] P5-22 · Font Selector for the UI
+### [ ] P5-31 · Granular Voice & Screenshare Quality Controls (Discord-style)
 
-**What:** Font picker in Settings → Appearance. Options: JetBrains Mono, Inter, Geist, Fira Code, OpenDyslexic, System Default. Applied via CSS custom property overrides.  
-**[AUDIT REQUIRED]** Check if any fonts are already globally loaded to avoid double-loading.  
+**What:** Let users (or room admins via room settings) adjust audio bitrates (e.g., 64kbps to 512kbps) and screenshare quality (resolution: 720p/1080p/Source, framerate: 15/30/60fps).  
+**Note:** Requires tight integration with the LiveKit SFU and custom state events for per-room quality caps.  
+**[AUDIT REQUIRED]** Must verify if current `lk-jwt-service` can be extended with custom bitrate/resolution claims or if a new sidecar (similar to `voice-limit-guard`) is needed for server-side enforcement.  
+**Complexity:** Extreme.
+
+---
+
+### [ ] P5-35 · Desktop — Notification Click Opens Room (DEFERRED)
+
+**What:** Clicking a system tray notification navigates to the relevant room. Quick-reply from the notification toast would send the reply without opening the window.  
+**Status:** Deferred — `tauri-plugin-notification` has no Rust click/action callback API. Quick-reply would need a custom WinRT toast activator + COM registration, which can't be compile-tested without a Windows build environment.  
+**Note:** Tray icon and `matrix:` deep links already bring the window forward on most interactions. Revisit when tauri-plugin-notification gains click handler support upstream.  
+**Complexity:** High (platform-specific native code required).
+
+---
+
+### [ ] P5-36 · Desktop — Windows Jump List (DEFERRED)
+
+**What:** Right-clicking the taskbar icon shows a jump list with recent/favorite rooms for quick navigation.  
+**Status:** Deferred — implementing the Windows COM jump list API in Tauri requires iterating on C++/COM code that can only be compile-checked on Windows, making blind CI iteration impractical.  
+**Action when unblocked:** Revisit when a Tauri plugin abstracts the Windows Shell `ICustomDestinationList` interface, or when a Windows build environment is available for local iteration.  
+**Complexity:** High (Windows-only native COM).
+
+---
+
+### [x] P5-40 · Desktop — Proactive Update Notifications (Tauri) ⚠️ UNTESTED (requires Tauri build)
+
+**What:** Automatically check for app updates on launch and periodically during long sessions. If an update is available, show an in-app toast or badge (e.g., on the Settings icon) to alert the user without requiring a manual check in settings.  
+**Mechanism:** Use the `useTauriUpdater` hook in a global component like `ClientNonUIFeatures.tsx`.  
+**Note:** Ensure the check is throttled (e.g., once every 12 hours) to avoid redundant Tauri commands.  
 **Complexity:** Low-Medium.
 
 ---
 
-### [x] P5-27 · Notification Profile Presets (Gaming / Work / Sleep)
+### [ ] P5-41 · Desktop — Native WinRT Toast Notifications
 
-**What:** Saved presets that change all notification settings atomically. Gaming (mentions only), Work (DMs + mentions), Sleep (all off). Quick-switch from sidebar or settings.  
-**Complexity:** Medium.
+**What:** Replace emulated notifications with native WinRT Toast notifications.  
+**Approach:** Implement native WinRT Toast integration using `windows-rs` to enable full Action Center integration, including native Quick Reply functionality.
+
+### [ ] P5-42 · Desktop — Persistent Background Sync
+
+**What:** Maintain light connection to homeserver when WebView2 is suspended.  
+**Approach:** Implement a headless Rust sidecar to fetch unread counts/notifications while the webview is suspended to ensure instant notification delivery.
+
+### [ ] P5-43 · Desktop — System Media Transport Controls (SMTC)
+
+**What:** Integrate with Windows SMTC for volume flyout call/media control.  
+**Approach:** Use Windows SMTC API to expose call status, mic mute/unmute, and media controls to the Windows volume flyout/media overlay.
+
+### [ ] P5-44 · Desktop — Taskbar Thumbnail Toolbar
+
+**What:** Add persistent call controls to the taskbar preview.  
+**Approach:** Implement a COM thumbnail toolbar in the application preview window, featuring Mute/Deafen/End Call buttons.
+
+### [ ] P5-46 · Desktop — System Power Management (Call Continuity)
+
+**What:** Prevent system sleep/hibernate during active calls.  
+**Approach:** Use Tauri/Rust `power-manager` or platform-specific APIs to block system power saving states while a voice/video session is active.
+
+### [ ] P5-47 · Desktop — TDS-Styled Native Window Chrome
+
+**What:** Replace system titlebar with custom Lotus TDS chrome.  
+**Approach:** Configure Tauri window (`decorations: false`) and implement custom, TDS-token compliant titlebar controls (Close/Max/Min) for a cohesive UI.
+
+### [ ] P5-48 · Desktop — Native File System Drag-and-Drop Improvements
+
+**What:** Enhance drag-and-drop support for Windows.  
+**Approach:** Improve handling for Windows file shortcuts, recursive folder uploads, and shell-integrated "Send To" context menu actions.
+
+### [ ] P5-49 · Desktop — Network Awareness (NCSI Integration)
+
+**What:** Proactively detect Windows network connectivity changes.  
+**Approach:** Integrate with the Windows Network Connectivity Status Indicator (NCSI) API to improve offline mode transition latency and network recovery.
+
+### [ ] P5-50 · Desktop — Windows Hardware-Accelerated Media Pipeline
+
+**What:** Replace standard browser decoding with native Windows Media Foundation.  
+**Approach:** Leverage DirectShow/Media Foundation to offload video/audio decoding from the CPU to the GPU, significantly reducing power consumption and latency during calls.
+
+### [ ] P5-51 · Desktop — Federated "Identity Contexts" (Isolation Manager)
+
+**What:** Compartmentalize sessions, local databases, and caches into isolated "Contexts."  
+**Approach:** Implement a zero-leak boundary for personas (e.g., Work vs. Personal) by isolating `IndexedDB`, filesystem caches, and session persistence per context.  
+**Priority:** Extreme Low (Multi-sprint/Architectural).
+
+### [~] P5-52 · Desktop — Room-Level Sync Governor (Performance Control) [STILL_CONSIDERING]
+
+**What:** Granular sync tuning for individual rooms.  
+**Approach:** Allow per-room overrides for sync frequency and event type filtering (e.g., disable read receipts/typing in heavy rooms) to optimize performance. Implementation requires careful UX to prevent complexity fatigue.
+
+### [ ] P5-53 · Desktop — Local-Only "Scripting" Plugin System (Tampermonkey-like)
+
+**What:** A sandboxed environment for local execution of user scripts on Matrix events.  
+**Approach:** Implement a WASM-based execution engine that allows users to write local-only, client-side scripts to interact with incoming Matrix events, trigger sounds/notifications, or inject custom UI elements based on event payload rules. Designed for privacy — all logic runs exclusively on the local machine.
+
+### [ ] P5-55 · Desktop — Composer Toolbar Drag-and-Drop Reordering
+
+**What:** Allow users to reorder toolbar icons via drag-and-drop.  
+**Approach:** Extend the current settings-based toolbar toggle system to include a drag-and-drop UI mode in the composer settings, allowing users to personalize their icon order.
+
+### [ ] P5-56 · Desktop — Windows "Focus Assist" (DND) Sync
+
+**What:** Automatically toggle notification state based on Windows Focus Assist.  
+**Approach:** Integrate with the Windows `NotificationCenter` / `Focus` state via Tauri/Rust to automatically enable/disable Lotus Chat's internal notification suppression mode when Windows Focus Assist is toggled.
+
+### [ ] P5-57 · Desktop — Visual Draft Persistence Indicator
+
+---
+
+## 🚀 Features to Add
+
+- [ ] **Mobile Audit:** Comprehensive audit of all features in LOTUS_FEATURES.md for mobile PWA usability and layout responsiveness.
+- [x] **Remind Me Later:** Slack-style reminders for messages — fully implemented ⚠️ UNTESTED end-to-end
+  - **Storage:** `useReminders.ts` — persists to `io.lotus.reminders` account data with `addReminder` / `removeReminder` / `getReminders`
+  - **UI:** `RemindMeDialog.tsx` — 4 presets (20 min, 1 hr, 3 hr, tomorrow 9am); wired into `Message.tsx` context menu via `remindOpen` state; `useModalStyle(320)` for mobile fullscreen
+  - **Monitor:** `ReminderMonitor` in `ClientNonUIFeatures.tsx` — polls every 30s + on tab visibility; fires Lotus toast when due and calls `removeReminder`
+- [x] **Mobile Bookmarks:** Fixed ⚠️ UNTESTED — bookmarks now accessible from within any room on mobile
+  - **Root Cause:** `BookmarksPanel` renders correctly on mobile but `BookmarksTab` lives in `SidebarNav`, which is hidden when inside a room on mobile (`MobileFriendlyClientNav` returns `null`). No trigger existed.
+  - **Fix:** Added "Saved Messages" `MenuItem` to the `RoomMenu` (···More Options) in `RoomViewHeader.tsx`. Toggles `bookmarksPanelAtom` and closes the menu. Works on all screen sizes — desktop users see it as a duplicate of the sidebar star, mobile users now have their only in-room access point.
 
 ---
 
@@ -368,9 +484,9 @@ Check back after each Synapse upgrade — re-run `/matrix/client/versions` and `
 
 ### [BLOCKED] · Room Preview Before Joining (MSC3266)
 
-**Blocked by:** `GET /v1/rooms/{id}/summary` returns 404 — endpoint not available on this server  
+**Blocked by:** `GET /_matrix/client/v1/rooms/{roomId}/summary` returns `M_UNRECOGNIZED` 404 — endpoint not implemented in Synapse 1.155. Config flag `msc3266_enabled: true` is set but has no effect; Synapse appears not to have shipped a stable implementation at the v1 path. Verified 2026-06-18.  
 **What it would do:** Show room name, topic, avatar, member count before joining.  
-**Action when unblocked:** Build pre-join preview card; trigger on unjoined room navigation.
+**Action when unblocked:** Re-test after each future Synapse upgrade.
 
 ### [BLOCKED] · Thread Subscriptions (MSC4306)
 
@@ -378,12 +494,12 @@ Check back after each Synapse upgrade — re-run `/matrix/client/versions` and `
 **What it would do:** Follow a thread without posting; get notifications for replies.  
 **Action when unblocked:** Add "Follow thread" button in the thread panel header (depends on #P3-8 Thread Panel).
 
-### [BLOCKED] · Report User (MSC4260)
+### [DONE] · Report User (MSC4260) ✅
 
-**Blocked by:** Server declares only spec v1.12; MSC4260 merged in v1.14 — endpoint may not exist  
-**What it would do:** Report a specific user to homeserver admins (separate from reporting a message).  
-**Note:** Report Message already exists in upstream Cinny. This would add Report User to the profile panel.  
-**Action when unblocked:** Test `POST /_matrix/client/v3/users/{userId}/report`; if 200, add button to user profile.
+**Previously blocked by:** Server spec v1.12, but `POST /_matrix/client/v3/users/{userId}/report` was confirmed **200** on 2026-06-18 (live since Synapse 1.133.0).  
+**What it does:** Reports a specific user to homeserver admins (separate from reporting a message).  
+**Note:** Report Message already exists in upstream Cinny. This adds Report User to the profile panel.  
+**Implemented 2026-06-18:** `ReportUserModal.tsx` added at `src/app/features/room/ReportUserModal.tsx`. Button wired into `UserRoomProfile.tsx` between UserModeration and UserDeviceSessions (hidden for own profile). Category dropdown + reason text, inline success/error feedback, auto-close 1500ms after success.
 
 ---
 
@@ -395,6 +511,205 @@ Research whether Matrix spec or MSC4133 (v1.16) defines a standard profile banne
 
 ---
 
+## 📚 Implementation Reference
+
+Exhaustive, low-level implementation details for backlog items. Follow these patterns to ensure code is "Lotus-perfect" (idiomatic, performant, and TDS-compliant).
+
+### P3-8 · Thread Panel (Full Side Drawer)
+
+**Architecture:** Mirror the `MembersDrawer` pattern but with a specialized timeline.
+
+- **State (`src/app/state/room/thread.ts`):**
+  ```typescript
+  export const activeThreadIdAtom = atom<string | null>(null);
+  ```
+- **Layout (`src/app/features/room/Room.tsx`):** Insert `ThreadPanel` conditionally alongside `RoomTimeline`:
+  ```tsx
+  {
+    activeThreadId && (
+      <>
+        <Line variant="Background" direction="Vertical" size="300" />
+        <ThreadPanel roomId={roomId} threadId={activeThreadId} />
+      </>
+    );
+  }
+  ```
+- **Component (`src/app/features/room/thread/ThreadPanel.tsx`):** Use `room.getThread(threadId)` from the SDK. Render a `Header` with a "Close" button that sets `activeThreadIdAtom` to `null`. Reuse `RoomTimeline` but pass a filtered `EventTimelineSet`. Use `thread.timelineSet` directly for the most accurate thread view.
+
+---
+
+### P4-4 · Math / LaTeX Rendering
+
+**Mechanism:** KaTeX injection into the HTML parser.
+
+- **Sanitizer (`src/app/utils/sanitize.ts`):** Allow KaTeX-specific tags and classes (e.g., `span`, `annotation`, `math`). Use a specialized allowed list for math blocks.
+- **Parser (`src/app/plugins/react-custom-html-parser.tsx`):** Detect `$ ... $` and `$$ ... $$` patterns in text nodes:
+  ```tsx
+  if (node.type === 'text') {
+    const parts = node.data.split(/(\$\$.*?\$\$|\$.*?\$)/g);
+    return parts.map((p) => {
+      if (p.startsWith('$')) return <KaTeX math={p.replace(/\$/g, '')} />;
+      return p;
+    });
+  }
+  ```
+- **CSS (`src/app/styles/CustomHtml.css.ts`):** Import `katex/dist/katex.min.css` only when a math block is rendered to save initial bundle size.
+
+---
+
+### P4-6 · OIDC / SSO Next-Gen Auth (MSC3861)
+
+**Mechanism:** Matrix Authentication Service (MAS) Integration.
+
+- **Architecture:** Shift from password-based `/login` to OAuth2 `authorization_code` flow.
+- **Key Files:** `src/app/pages/auth/Login.tsx` and `src/app/hooks/useAuth.ts`.
+- **Implementation:** Use `oidc-client-ts` or a similar lightweight OIDC library. Check for `m.authentication` in `/.well-known/matrix/client`. Redirect to the MAS authorization endpoint. Handle the callback in a new `OidcCallback` route and store the OIDC `refresh_token`.
+
+---
+
+### P5-1 · Custom Accent Color Picker (Non-TDS only)
+
+**Mechanism:** Dynamic CSS variable injection.
+
+- **Setting (`src/app/state/settings.ts`):** Add `customAccentColor: string` (hex).
+- **Manager (`src/app/pages/ThemeManager.tsx`):** Inside the `useEffect` that monitors theme changes:
+  ```typescript
+  if (!lotusTerminal && customAccentColor) {
+    document.documentElement.style.setProperty('--lt-accent-orange', customAccentColor);
+    document.documentElement.style.setProperty('--lt-accent-orange-glow', `${customAccentColor}80`);
+  }
+  ```
+- **UI (`src/app/features/settings/general/General.tsx`):** Use `<Input type="color">`. Hide this section if `lotusTerminal` is `true`.
+
+---
+
+### P5-15 · In-Call Soundboard
+
+**Mechanism:** Local-to-Global Audio Bridge via Web Audio API.
+
+- Create an `AudioContext` and a `MediaStreamDestinationNode`.
+- Create an `AudioBufferSourceNode` for each clip.
+- Route the mic `MediaStream` and the clip source to the destination node.
+- Pass the destination's `.stream` to the call bridge.
+
+---
+
+### P5-20 · Quick Reply from Browser Notification
+
+**Mechanism:** Service Worker `notificationclick` Action.
+
+```typescript
+// src/sw.ts
+self.addEventListener('notificationclick', (event) => {
+  if (event.action === 'reply' && event.reply) {
+    const { roomId, threadId } = event.notification.data;
+    const session = sessions.get(event.clientId);
+    fetch(`${session.baseUrl}/_matrix/client/v3/rooms/${roomId}/send/m.room.message`, {
+      method: 'POST',
+      headers: { Authorization: `Bearer ${session.accessToken}` },
+      body: JSON.stringify({
+        msgtype: 'm.text',
+        body: event.reply,
+        'm.relates_to': threadId ? { rel_type: 'm.thread', event_id: threadId } : undefined,
+      }),
+    });
+  }
+});
+```
+
+---
+
+### P5-30 · Advanced ML Noise Suppression — Model Roadmap
+
+See shipped implementation in LOTUS_FEATURES.md → "Noise Suppression (Advanced Multi-Tier)".
+
+**Models status:**
+
+- **RNNoise** (sapphi, 48 kHz) — ✅ working, default fallback. Keep — runs on any hardware.
+- **Speex** (sapphi, 48 kHz) — ✅ working, low value; candidate to drop.
+- **DTLN** (@workadventure, 16 kHz) — 🟡 wired; sample-rate fix applied (was robotic at 48 kHz). **TODO: verify in a real call.** Narrowband (16 kHz) = slightly telephone-y even when correct.
+
+**Constraints:** client-side AudioWorklet, fully self-hosted, no GPU, self-hosted SFU (no LiveKit Cloud).
+
+**Roadmap:**
+
+- [ ] Verify DTLN 16 kHz fix in a real call.
+- [ ] **DeepFilterNet 3** — best self-hostable upgrade: Rust→WASM, CPU real-time, 48 kHz fullband. Self-host `df_bg.wasm` + DFN3 ONNX model; wire a 48 kHz worklet. Audio quality unverifiable without a real-call test.
+- [ ] **Desktop-only / HW-gated:** FRCRN (Alibaba) or NVIDIA Maxine (RTX/Tensor only). Runs in Tauri Rust backend + bridges a virtual mic into the webview. Must detect capability; web + weak HW falls back to RNNoise/DTLN.
+
+---
+
+### P5-31 · Granular Voice & Screenshare Quality Controls
+
+**Mechanism:** WebRTC Encoding Parameters + Backend Quality Guard.
+
+- **State Event:** `io.lotus.room_quality` (state key `""`) containing:
+  ```json
+  { "audio_bitrate": 128000, "screen_max_res": "1080p", "screen_max_fps": 60 }
+  ```
+- **Screenshare:** In `src/app/plugins/call/CallControl.ts`, map the "Quality" setting to `getDisplayMedia` constraints.
+- **Audio Bitrate:** After the call joins, find the `RTCRtpSender` for the audio track:
+  ```typescript
+  const sender = peerConnection.getSenders().find((s) => s.track?.kind === 'audio');
+  const params = sender.getParameters();
+  params.encodings[0].maxBitrate = roomBitrate || 128000;
+  await sender.setParameters(params);
+  ```
+- **Backend Sidecar:** Extend `voice-limit-guard.py` (LXC 151) to fetch `io.lotus.room_quality` and inject limits into the LiveKit JWT or return them as an authorized config packet.
+
+---
+
+### P5-40 · Desktop — Proactive Update Notifications (Tauri)
+
+**Key Files:** `src/app/hooks/useTauriUpdater.ts`, `src/app/pages/client/ClientNonUIFeatures.tsx`, `src/app/features/toast/LotusToastContainer.tsx`.
+
+1. Create a `TauriUpdateFeature` component. Use `useTauriUpdater()` to get the `check` function and `status`.
+2. In a `useEffect`, call `check()` on mount and then on a `setInterval` (every 12 hours).
+3. When status transitions to `{ state: 'available', version: '...' }`, fire a Lotus Toast: "Lotus Chat v[version] is available!" with an "Update" button that calls `install()`.
+4. Store `lastCheck` timestamp in `localStorage` to prevent redundant checks on refresh.
+
+---
+
+### Mobile Bookmarks Visibility Fix
+
+**Issue:** `ClientLayout.tsx` explicitly restricts `BookmarksPanel` to `ScreenSize.Desktop` (lines 51-56).
+
+```tsx
+// ClientLayout.tsx
+{
+  bookmarksOpen && (
+    <BookmarksPanel
+      onClose={() => setBookmarksOpen(false)}
+      isMobile={screenSize !== ScreenSize.Desktop}
+    />
+  );
+}
+```
+
+`BookmarksPanel.tsx` already supports the `isMobile` prop (line 127) to enable full-screen absolute positioning. No other changes required.
+
+---
+
+### Remind Me Later (Slack-style)
+
+**Mechanism:** Account Data + Timer/Service Worker.
+
+- **Storage (`src/app/hooks/useReminders.ts`):** Store in account data `io.lotus.reminders` as `Array<{ id: string, roomId: string, eventId: string, timestamp: number }>`.
+- **Context Menu (`src/app/features/room/message/MessageContextMenu.tsx`):** Add "Remind me" option → opens date/time picker modal (reuse `JumpToTime.tsx` logic).
+- **Trigger (foreground):** `setTimeout` in a hook inside `ReminderMonitor` in `ClientNonUIFeatures.tsx` → pushes to `toastQueueAtom` in `state/toast.ts` when due.
+- **Trigger (background):** Use Service Worker — `setTimeout` in the main thread will not fire when the PWA is suspended.
+
+---
+
+### Mobile Usability Audit — Methodology
+
+1. **Viewport & Touch:** All interactive elements must have at least `44px × 44px` touch targets. Audit for horizontal overflow (horizontal scrolling must be disabled).
+2. **Modal Responsiveness:** All modals (Settings, Profile, etc.) MUST cover the full screen on mobile, not float as overlays.
+3. **Sidebar / Panels:** On mobile, sidebar panels (Members, Bookmarks, Media) must become full-screen overlays (using a `Drawer` or `Modal` pattern) rather than side-by-side flexbox panels.
+4. **Input & Composer:** Ensure the composer doesn't get obscured by the mobile keyboard. Test focus trap and blur behaviors.
+
+---
+
 ## Implementation Notes
 
 ### ⚠️ TDS DESIGN LAW (repeated here for emphasis)

LOTUS_TODO_REFERENCE.md

@@ -1,99 +0,0 @@
-# Lotus Chat — Implementation Reference for Backlog
-**Date:** June 2026
-
-This document provides technical guidance, file paths, and architectural notes for unimplemented items in `LOTUS_TODO.md` to assist engineers during development.
-
----
-
-## 🧵 Priority 3 — Higher Complexity
-
-### P3-8 · Thread Panel (Full Side Drawer)
-**⚠️ Largest Feature**
-
-*   **Objective:** Add a right-side drawer to view and reply to threads (`m.thread` relations).
-*   **Key Files to Reference:**
-    *   `src/app/features/room/RoomView.tsx`: Main layout. Needs to render the new `ThreadPanel` component conditionally.
-    *   `src/app/features/room/MembersDrawer.tsx`: Use this as a pattern for side drawers (fixed width, toggleable).
-    *   `src/app/features/room/message/Message.tsx`: Check `isThreadedMessage` logic and the `onReplyClick(ev, true)` handler.
-*   **Architecture:**
-    *   Create `activeThreadEventIdAtom` in a new state file.
-    *   `ThreadPanel` should reuse `Timeline` components but filter for events where `m.relates_to.event_id === activeThreadEventId` and `rel_type === 'm.thread'`.
-    *   **SDK API:** Use `mx.getThread(eventId)` or the aggregations API: `GET /rooms/{roomId}/relations/{eventId}/m.thread`.
-*   **Note:** `RoomTimeline.tsx` currently has `handleReplyClick` (Line 978) which already supports starting threads.
-
----
-
-## 🛠️ Priority 4 — Specialized Features
-
-### P4-3 · Knock-to-join Notifications for Admins
-*   **Objective:** Alert admins when users are knocking and provide an easy way to approve/deny.
-*   **Key Files:**
-    *   `src/app/features/room/MembersDrawer.tsx`: Already contains logic to show "Pending Requests" (Line 412).
-    *   `src/app/hooks/useRoomsNotificationPreferences.ts`: Add logic to detect `Membership.Knock` events in joined rooms where the user has invite permissions.
-*   **Implementation:**
-    *   Create a hook `usePendingKnocks(room)` that returns `room.getMembersWithMembership(Membership.Knock)`.
-    *   Add a notification badge to the "Members" icon in the room header if knocks > 0.
-
-### P4-4 · Math / LaTeX Rendering
-*   **Objective:** Render `$...$` and `$$...$$` blocks using KaTeX.
-*   **Key Files:**
-    *   `src/app/utils/sanitize.ts`: **Critical.** The sanitizer currently strips many tags. You must allow specific KaTeX/MathML outputs.
-    *   `src/app/plugins/react-custom-html-parser.ts`: Add a custom rule to detect LaTeX patterns in plain text or handle the specific HTML from the server.
-    *   `src/app/styles/CustomHtml.css.ts`: Add KaTeX CSS import/styles.
-
----
-
-## 🎨 Priority 5 — Gamer / Aesthetic / Customization
-
-### P5-1 · Custom Accent Color Picker
-*   **Objective:** User-defined accent color for non-TDS themes.
-*   **Key Files:**
-    *   `src/app/hooks/useTheme.ts`: Central theme logic.
-    *   `src/app/state/settings.ts`: Add `customAccentColor: string` to the settings atom.
-*   **Implementation:**
-    *   Inject a `<style>` block into `<head>` that overrides CSS variables.
-    *   **Variables to target:** `--lt-accent-orange`, `--lt-accent-cyan`, `--lt-accent-green` (or their non-TDS equivalents in `folds`).
-
-### P5-10 · Voice Channel User Limit
-*   **Objective:** Prevent joining a voice channel if the user limit is reached.
-*   **Key Files:**
-    *   `src/app/features/call/CallView.tsx`: Join logic site.
-*   **Implementation:**
-    *   In `CallPrescreen` (Line 77), retrieve the `io.lotus.voice_limit` state event from the room.
-    *   Compare `callMembers.length` with the `max_users` value from the event content.
-    *   If current members >= limit, disable the `canJoin` flag and display a "Channel Full" message.
-
-### P5-13 · Avatar Frame / Border Decorations
-*   **Objective:** Add cosmetic frames around user avatars.
-*   **Key Files:**
-    *   `src/app/components/user-avatar/UserAvatar.tsx`: Rendering site.
-*   **Implementation:**
-    *   Add an optional `frameName` prop to the `UserAvatar` component.
-    *   Since `folds` components like `AvatarImage` are restrictive, wrap the entire return value (both fallback and image paths) in a new `Box` container that applies the frame/glow effects via CSS.
-
-### P5-21 · Custom @Mention Highlight Color
-*   **Objective:** Persistent background highlight for messages that mention the user.
-*   **Key Files:**
-    *   `src/app/components/message/layout/layout.css.ts`: Styling site.
-    *   `src/app/features/room/message/Message.tsx`: Logic site.
-*   **Implementation:**
-    *   In `layout.css.ts`, add a `mention` variant to the `MessageBase` recipe that sets a static `backgroundColor`.
-    *   In `Message.tsx`, pass the `isMentioned` boolean (Line 800) into the `MessageBase` component as a new prop to trigger the highlight variant.
-
-### P5-20 · Quick Reply from Browser Notification
-*   **Objective:** Inline reply in OS notifications.
-*   **Key Files:**
-    *   `src/sw.ts`: Handle the `notificationclick` event.
-*   **Implementation:**
-    *   Check for `event.reply` in the service worker.
-    *   Use the `accessToken` and `baseUrl` stored in the `sessions` map (already implemented in `sw.ts`) to send a Matrix message via `fetch` directly from the Service Worker.
-    *   **Crucial:** Ensure the message is sent as a relation if the notification was for a thread.
-
----
-
-## 🧪 Pending Audits Guidance
-
-### Audit-3 · Profile Banner Image
-*   **Task:** Check if MSC4133 or Matrix v1.16 defines a banner field.
-*   **Update:** Matrix spec does not currently have a stable `m.banner` field. Most clients use `org.matrix.msc4133.banner_url` (unstable).
-*   **Recommendation:** Use `mx.http.authedRequest` to experiment with this field on `matrix.lotusguild.org`.

README.md

@@ -6,6 +6,14 @@ A Matrix chat client built for Lotus Guild — fast, private, and packed with th
 
 ---
 
+## Licensing & Attribution
+
+The source code is licensed under [AGPLv3](LICENSE), the same license as the upstream Cinny project. The source for this fork is public at [code.lotusguild.org/LotusGuild/cinny](https://code.lotusguild.org/LotusGuild/cinny).
+
+The Lotus Chat logo (`lotus_chat.png`) is a derivative work based on the original Cinny logo by Ajay Bura and contributors, used under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/). The modified logo is © Lotus Guild and is also made available under CC BY 4.0.
+
+---
+
 ## Features
 
 ### Messaging
@@ -41,13 +49,18 @@ A Matrix chat client built for Lotus Guild — fast, private, and packed with th
 - Your chat background shows through the call view
 - Dark/light mode inside calls matches your Lotus Chat theme
 - Calls are available in DMs and private groups only — no accidental mass rings
+- AFK auto-mute: mic is automatically silenced after a configurable idle timeout (1–30 min); a toast confirms the action
+- Voice channel user limit: admins can cap how many people can be in a room's call — enforced server-side for every Matrix client (not just Lotus Chat); others see "Channel Full" until a spot opens
+- Custom join/leave sound effects when someone enters or leaves your call — choose Chime, Soft, Retro, or off
 
 ### Customization & Appearance
 
 - LotusGuild Terminal Design System (TDS) — a CRT terminal-inspired dark theme
 - TDS light mode variant for daytime use
 - 20+ static chat background patterns
-- 5 animated chat backgrounds: Digital Rain, Star Drift, Grid Pulse, Aurora Flow, Fireflies
+- 5 animated chat backgrounds: Digital Rain, Star Drift, Grid Pulse, Aurora Flow, Fireflies (with improved per-layer looping, phosphor-flicker rain, fluid aurora sweep, and organic firefly bioluminescence)
+- 11 seasonal & holiday theme overlays — Halloween, Christmas, New Year, Autumn, Valentine's Day, St. Patrick's Day, Earth Day, Lunar New Year, April Fools', Deep Space, and Retro Arcade; auto-selected by date with a manual override in Settings → Appearance
+- Avatar decorations — 99 animated APNG overlays (Gaming, Cyber, Space, Fantasy, Nature, Spooky, Cozy, and more) that frame your avatar across the timeline, members list, and @mention autocomplete; visible to all Lotus Chat users; select in Settings → Account → Avatar Decoration
 - Toggle to pause background animations
 - Glassmorphism sidebar — frosted glass effect that lets the background show through
 - Night Light / blue light filter with an adjustable intensity slider
@@ -58,10 +71,11 @@ A Matrix chat client built for Lotus Guild — fast, private, and packed with th
 ### Presence & Profile
 
 - Discord-style presence selector: Online, Idle, Do Not Disturb, Invisible, or Auto
-- Custom status message with emoji and an optional auto-clear timer
+- Custom status message with emoji and an optional auto-clear timer (changing your status is never silently overwritten by activity events)
 - Colored presence ring on member avatars (green / yellow / red)
 - Profile fields for pronouns and timezone
 - When a user's timezone is set, their current local time appears in their profile
+- Private notes on any user's profile — freeform text visible only to you, auto-saves and syncs across devices
 - Unread count shown in the browser tab title
 
 ### Moderation & Privacy
@@ -94,7 +108,7 @@ A Matrix chat client built for Lotus Guild — fast, private, and packed with th
 - Knock-to-join: request access to a room; admins approve or deny from the members list
 - Media gallery drawer: browse all images, videos, and files shared in a room
 - Invite link and QR code in room settings
-- Pending knock requests shown in the members list for room admins
+- Pending knock requests shown in the members list for room admins with a live badge count on the Members button
 - Homeserver support contact displayed in Help & About (MSC1929)
 - Server notice rooms are visually distinct from regular DMs
 

build/lotus-denoise.js

@@ -0,0 +1,340 @@
+/*
+ * Lotus Chat — client-side ML noise suppression shim for Element Call.
+ *
+ * Element Call runs as a same-origin iframe widget that captures the mic
+ * internally (via livekit-client -> getUserMedia) and publishes it to LiveKit.
+ * We can't reach that track from the host. Instead this classic <script> is
+ * injected (by the vite `lotus-denoise` plugin) into EC's index.html BEFORE its
+ * deferred module entry, so it runs first and monkeypatches getUserMedia. When
+ * the "ml" tier is selected (lotusDenoise=ml in the widget URL) we route the
+ * captured mic through an RNNoise AudioWorklet (@sapphi-red/web-noise-suppressor)
+ * and hand the processed track back to EC/LiveKit.
+ *
+ * RNNoise REQUIRES mono, 48 kHz float audio. Feeding it anything else (stereo,
+ * or 44.1 kHz data the model treats as 48 kHz) produces loud static. So we:
+ *   - run a 48 kHz AudioContext (which handles resampling from the hardware),
+ *   - use the SIMD build if supported for better performance,
+ *   - keep browser-native stationary suppression ON so the fans are removed
+ *     before RNNoise focuses on transient noises (keyboard, dogs, etc.).
+ *
+ * Any failure falls back to the unprocessed mic so calls never break.
+ */
+(function () {
+  'use strict';
+
+  var params;
+  try {
+    params = new URLSearchParams(window.location.search);
+    if (params.get('lotusDenoise') !== 'ml') return;
+  } catch (e) {
+    return;
+  }
+
+  var md = navigator.mediaDevices;
+  if (!md || typeof md.getUserMedia !== 'function') return;
+  if (typeof AudioWorkletNode === 'undefined' || typeof AudioContext === 'undefined') return;
+
+  var ASSET_BASE = './denoise/';
+
+  var MODEL = params.get('lotusModel') || 'rnnoise';
+  // DTLN (@workadventure) targets 16 kHz and does not resample internally, so
+  // its whole graph runs in a 16 kHz context; RNNoise/Speex (sapphi) and
+  // DeepFilterNet 3 are 48 kHz fullband. The processed MediaStreamTrack is
+  // published to LiveKit either way (WebRTC/Opus resamples as needed).
+  var SAMPLE_RATE = MODEL === 'dtln' ? 16000 : 48000;
+  var USE_NATIVE_NS = params.get('lotusNativeNS') === 'true';
+  var USE_GATE = params.get('lotusGate') === 'true';
+  var GATE_THRESHOLD = parseFloat(params.get('lotusGateThreshold') || '-45');
+
+  var PROCESSORS = {
+    rnnoise: {
+      name: '@sapphi-red/web-noise-suppressor/rnnoise',
+      script: 'rnnoiseWorklet.js',
+      wasm: 'rnnoise.wasm',
+      simdWasm: 'rnnoise_simd.wasm',
+    },
+    speex: {
+      name: '@sapphi-red/web-noise-suppressor/speex',
+      script: 'speexWorklet.js',
+      wasm: 'speex.wasm',
+    },
+    dtln: {
+      // @workadventure/noise-suppression is a self-contained ES module that
+      // resolves its own AudioWorklet processor + LiteRT WASM + TFLite models
+      // via import.meta.url. We dynamic-import this helper and let it build the
+      // node, rather than addModule-ing a flat worklet ourselves.
+      helper: 'workadventure/audio-worklet.js',
+    },
+    deepfilternet: {
+      // deepfilternet3-noise-filter ships an ESM whose AudioWorklet processor +
+      // wasm-bindgen glue are INLINED as a string (loaded via a Blob URL — no
+      // CDN for the worklet). The only assets it fetches are its single-threaded
+      // df_bg.wasm + ONNX model, which we vendor + self-host under
+      // deepfilternet/v2/... We dynamic-import the ESM, build a DeepFilterNet3Core
+      // pointed at the self-hosted base, and let it create the worklet node.
+      esm: 'deepfilternet/index.esm.js',
+    },
+    gate: {
+      name: '@sapphi-red/web-noise-suppressor/noise-gate',
+      script: 'noiseGateWorklet.js',
+    },
+  };
+
+  var origGetUserMedia = md.getUserMedia.bind(md);
+  var wasmPromises = {};
+  var ctxPromise = null;
+
+  function checkSimd() {
+    try {
+      return WebAssembly.validate(
+        new Uint8Array([
+          0, 97, 115, 109, 1, 0, 0, 0, 1, 5, 1, 96, 0, 1, 123, 3, 2, 1, 0, 10, 10, 1, 8, 0, 65, 0,
+          253, 15, 253, 98, 11,
+        ]),
+      )
+        ? Promise.resolve(true)
+        : Promise.resolve(false);
+    } catch (e) {
+      return Promise.resolve(false);
+    }
+  }
+
+  function loadWasm(modelId) {
+    if (wasmPromises[modelId]) return wasmPromises[modelId];
+    var p = PROCESSORS[modelId];
+    if (!p || !p.wasm) return Promise.resolve(null);
+
+    wasmPromises[modelId] = (modelId === 'rnnoise' ? checkSimd() : Promise.resolve(false)).then(
+      function (simd) {
+        var file = simd && p.simdWasm ? p.simdWasm : p.wasm;
+        return fetch(ASSET_BASE + file).then(function (r) {
+          if (!r.ok) {
+            if (simd && p.simdWasm)
+              return fetch(ASSET_BASE + p.wasm).then(function (r2) {
+                if (!r2.ok) throw new Error(modelId + ' wasm failed');
+                return r2.arrayBuffer();
+              });
+            throw new Error(modelId + ' wasm failed');
+          }
+          return r.arrayBuffer();
+        });
+      },
+    );
+    return wasmPromises[modelId];
+  }
+
+  function getContext() {
+    if (!ctxPromise) {
+      ctxPromise = (function () {
+        var ctx = new AudioContext({ sampleRate: SAMPLE_RATE });
+        if (ctx.sampleRate !== SAMPLE_RATE) {
+          try {
+            ctx.close();
+          } catch (e) {}
+          return Promise.reject(new Error('SampleRate mismatch: ' + ctx.sampleRate));
+        }
+        // Load worklet modules. DTLN registers its own processor via the
+        // dynamic-imported helper (see buildMlNode), so it needs nothing here.
+        var scripts = [];
+        if (MODEL === 'rnnoise' || MODEL === 'speex') scripts.push(PROCESSORS[MODEL].script);
+        if (USE_GATE) scripts.push(PROCESSORS.gate.script);
+
+        return Promise.all(
+          scripts.map(function (s) {
+            return ctx.audioWorklet.addModule(ASSET_BASE + s);
+          }),
+        ).then(function () {
+          return ctx.state === 'suspended'
+            ? ctx.resume().then(function () {
+                return ctx;
+              })
+            : ctx;
+        });
+      })();
+      ctxPromise.catch(function () {
+        ctxPromise = null;
+      });
+    }
+    return ctxPromise;
+  }
+
+  var hasNotifiedActive = false;
+
+  // Build the ML denoise AudioWorkletNode. RNNoise/Speex are flat sapphi
+  // worklets we instantiate directly with the fetched WASM binary. DTLN comes
+  // from @workadventure's self-contained helper, which we dynamic-import; it
+  // resolves its own processor + LiteRT WASM + TFLite models internally and
+  // returns the node. Resolves to { node, ready, dispose }.
+  function buildMlNode(ctx, wasmBinary) {
+    if (MODEL === 'dtln') {
+      return import(ASSET_BASE + PROCESSORS.dtln.helper).then(function (mod) {
+        // bypassUntilReady: pass raw audio through until the model is loaded so
+        // the call never has a silent/missing track during init.
+        return mod.createNoiseSuppressionAudioWorklet(ctx, { bypassUntilReady: true });
+      });
+    }
+    if (MODEL === 'deepfilternet') {
+      // Resolve an absolute self-hosted base so the package's cdnUrl override
+      // fetches our vendored df_bg.wasm + ONNX model (never the upstream CDN).
+      var dfnBase = new URL(ASSET_BASE + 'deepfilternet', window.location.href).href;
+      return import(ASSET_BASE + PROCESSORS.deepfilternet.esm).then(function (mod) {
+        var core = new mod.DeepFilterNet3Core({
+          sampleRate: SAMPLE_RATE,
+          noiseReductionLevel: 80,
+          assetConfig: { cdnUrl: dfnBase },
+        });
+        // initialize() fetches + compiles the wasm and loads the model on the
+        // main thread; the worklet node only exists once that resolves, so the
+        // graph is connected with a ready model (no half-initialised passthrough).
+        return core.initialize().then(function () {
+          return core.createAudioWorkletNode(ctx).then(function (node) {
+            return {
+              node: node,
+              ready: Promise.resolve(),
+              dispose: function () {
+                try {
+                  core.destroy();
+                } catch (e) {}
+              },
+            };
+          });
+        });
+      });
+    }
+    var node = new AudioWorkletNode(ctx, PROCESSORS[MODEL].name, {
+      channelCount: 1,
+      numberOfInputs: 1,
+      numberOfOutputs: 1,
+      processorOptions: { maxChannels: 1, wasmBinary: wasmBinary },
+    });
+    return Promise.resolve({
+      node: node,
+      ready: Promise.resolve(),
+      dispose: function () {
+        try {
+          node.port.postMessage('destroy');
+        } catch (e) {}
+      },
+    });
+  }
+
+  function processStream(stream) {
+    var audioTracks = stream.getAudioTracks();
+    if (audioTracks.length === 0) return Promise.resolve(stream);
+
+    return Promise.all([loadWasm(MODEL), getContext()])
+      .then(function (res) {
+        var wasmBinary = res[0];
+        var ctx = res[1];
+
+        var source = ctx.createMediaStreamSource(stream);
+        var dest = ctx.createMediaStreamDestination();
+        var head = source;
+
+        // 1. Optional Noise Gate
+        if (USE_GATE) {
+          var gateNode = new AudioWorkletNode(ctx, PROCESSORS.gate.name, {
+            processorOptions: {
+              openThreshold: GATE_THRESHOLD,
+              closeThreshold: GATE_THRESHOLD - 5,
+              holdMs: 150,
+              maxChannels: 1,
+            },
+          });
+          head.connect(gateNode);
+          head = gateNode;
+        }
+
+        // 2. ML Processor
+        return buildMlNode(ctx, wasmBinary).then(function (ml) {
+          var mlNode = ml.node;
+          head.connect(mlNode);
+          mlNode.connect(dest);
+
+          // Surface async init failures (e.g. DTLN model load) without blocking
+          // the track handoff — audio flows via bypassUntilReady meanwhile.
+          if (ml.ready && typeof ml.ready.then === 'function') {
+            ml.ready.catch(function (err) {
+              var m = err instanceof Error ? err.message : String(err);
+              console.error('[lotus-denoise] ' + MODEL + ' init failed:', m);
+            });
+          }
+
+          var origTrack = audioTracks[0];
+          var processedTrack = dest.stream.getAudioTracks()[0];
+
+          var torndown = false;
+          function cleanup() {
+            if (torndown) return;
+            torndown = true;
+            try {
+              ml.dispose();
+            } catch (e) {}
+            try {
+              source.disconnect();
+              mlNode.disconnect();
+            } catch (e) {}
+            try {
+              origTrack.stop();
+            } catch (e) {}
+          }
+
+          var rawStop = processedTrack.stop.bind(processedTrack);
+          processedTrack.stop = function () {
+            cleanup();
+            rawStop();
+          };
+          origTrack.addEventListener('ended', function () {
+            try {
+              rawStop();
+            } catch (e) {}
+            cleanup();
+          });
+
+          if (!hasNotifiedActive) {
+            hasNotifiedActive = true;
+            window.parent.postMessage(
+              {
+                type: 'lotus-denoise-status',
+                active: true,
+                model: MODEL,
+                nativeNS: USE_NATIVE_NS,
+                gate: USE_GATE,
+              },
+              '*',
+            );
+          }
+
+          var out = new MediaStream();
+          out.addTrack(processedTrack);
+          stream.getVideoTracks().forEach(function (t) {
+            out.addTrack(t);
+          });
+          return out;
+        });
+      })
+      .catch(function (e) {
+        var msg = e instanceof Error ? e.message : String(e);
+        console.error('[lotus-denoise] Setup failed:', msg);
+        window.parent.postMessage({ type: 'lotus-denoise-status', active: false, error: msg }, '*');
+        return stream;
+      });
+  }
+
+  navigator.mediaDevices.getUserMedia = function (constraints) {
+    var wantsAudio = !!(constraints && constraints.audio);
+    var effective = constraints;
+    if (wantsAudio) {
+      var audioC =
+        typeof constraints.audio === 'object' ? Object.assign({}, constraints.audio) : {};
+      audioC.noiseSuppression = USE_NATIVE_NS;
+      audioC.channelCount = 1;
+      if (audioC.echoCancellation === undefined) audioC.echoCancellation = true;
+      if (audioC.autoGainControl === undefined) audioC.autoGainControl = true;
+      effective = Object.assign({}, constraints, { audio: audioC });
+    }
+    return origGetUserMedia(effective).then(function (stream) {
+      return wantsAudio ? processStream(stream) : stream;
+    });
+  };
+})();

index.html

@@ -29,10 +29,8 @@
 
     <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=JetBrains+Mono:ital,wght@0,400;0,600;0,700;1,400&family=VT323&display=swap"
-      rel="stylesheet"
-    />
+    <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet" />
+    <link rel="stylesheet" href="/fonts/custom-fonts.css" />
     <link id="favicon" rel="shortcut icon" href="./public/favicon.ico" />
 
     <link rel="manifest" href="/manifest.json" />

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "lotus-chat",
-  "version": "4.12.2-lotus",
+  "version": "4.12.3-lotus",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "lotus-chat",
-      "version": "4.12.2-lotus",
+      "version": "4.12.3-lotus",
       "hasInstallScript": true,
       "license": "AGPL-3.0-only",
       "dependencies": {
@@ -20,11 +20,13 @@
         "@giphy/js-types": "5.1.0",
         "@giphy/js-util": "5.2.0",
         "@giphy/react-components": "10.1.2",
+        "@sapphi-red/web-noise-suppressor": "0.3.5",
         "@sentry/react": "10.53.1",
         "@tanstack/react-query": "5.100.13",
         "@tanstack/react-query-devtools": "5.100.13",
         "@tanstack/react-virtual": "3.13.25",
         "@types/dompurify": "3.2.0",
+        "@workadventure/noise-suppression": "0.0.4",
         "await-to-js": "3.0.0",
         "badwords-list": "2.0.1-4",
         "blurhash": "2.0.5",
@@ -33,6 +35,7 @@
         "classnames": "2.5.1",
         "dateformat": "5.0.3",
         "dayjs": "1.11.20",
+        "deepfilternet3-noise-filter": "1.2.1",
         "domhandler": "6.0.1",
         "dompurify": "3.4.5",
         "emojibase": "17.0.0",
@@ -76,7 +79,7 @@
         "ua-parser-js": "2.0.10"
       },
       "devDependencies": {
-        "@element-hq/element-call-embedded": "0.19.4",
+        "@element-hq/element-call-embedded": "0.20.1",
         "@rollup/plugin-inject": "5.0.5",
         "@rollup/plugin-wasm": "6.2.2",
         "@sentry/vite-plugin": "5.3.0",
@@ -1789,9 +1792,9 @@
       }
     },
     "node_modules/@element-hq/element-call-embedded": {
-      "version": "0.19.4",
-      "resolved": "https://registry.npmjs.org/@element-hq/element-call-embedded/-/element-call-embedded-0.19.4.tgz",
-      "integrity": "sha512-crawgHughTv6yYoCqgq7cKLxUDtYU/Xr7KgSFCT0NM++QHoYsM5WGmIU/yY2Q0QYPuzmHXIEK95IZmJaQ1jIJA==",
+      "version": "0.20.1",
+      "resolved": "https://registry.npmjs.org/@element-hq/element-call-embedded/-/element-call-embedded-0.20.1.tgz",
+      "integrity": "sha512-ODg2r7UmR8UjRpapLKbn6v1PS8fu/r58zdbvXMYaAlUEAC2f6L/9Moc9S4noG1+ARgWxY+m2vLmNDK9G9uFZYQ==",
       "dev": true
     },
     "node_modules/@emnapi/core": {
@@ -3774,6 +3777,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@sapphi-red/web-noise-suppressor": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@sapphi-red/web-noise-suppressor/-/web-noise-suppressor-0.3.5.tgz",
+      "integrity": "sha512-jh3+V9yM+zxLriQexoGm0GatoPaJWjs6ypFIbFYwQp+AoUb55eUXrjKtKQyuC5zShzzeAQUl0M5JzqB7SSrsRA==",
+      "license": "MIT"
+    },
     "node_modules/@sentry-internal/browser-utils": {
       "version": "10.53.1",
       "resolved": "https://registry.npmjs.org/@sentry-internal/browser-utils/-/browser-utils-10.53.1.tgz",
@@ -4849,6 +4858,15 @@
         }
       }
     },
+    "node_modules/@workadventure/noise-suppression": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/@workadventure/noise-suppression/-/noise-suppression-0.0.4.tgz",
+      "integrity": "sha512-v8DQgV2TQAWh7YLo7bZ1grV3iDNltRuvPaIYTcaBWoOjUaxDp/j5zrFLz4ZuijPGxzqcQxeW7ql/HJltMuLDtA==",
+      "license": "MIT",
+      "dependencies": {
+        "fft.js": "^4.0.4"
+      }
+    },
     "node_modules/@xobotyi/scrollbar-width": {
       "version": "1.9.5",
       "resolved": "https://registry.npmjs.org/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz",
@@ -6382,6 +6400,18 @@
       "integrity": "sha512-Rn+RuwkmkDwCi2/oXOFS9Gsr5lJZu/yTGpK7wAaAIE75CC+LCGEZHpY6VQJa/RoJcrmaA/docWJZvYohlNkWPA==",
       "dev": true
     },
+    "node_modules/deepfilternet3-noise-filter": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/deepfilternet3-noise-filter/-/deepfilternet3-noise-filter-1.2.1.tgz",
+      "integrity": "sha512-OAyrHTDlUHH+AhfpVNKYEOhVqb9cZpu0fdNThplA/tB/Ts4PF/UsI+abl2n1IbSxUkhiF0OqDejEhk1n42Oqpw==",
+      "license": "(Apache-2.0 OR MIT)",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "livekit-client": "^2.0.0"
+      }
+    },
     "node_modules/deepmerge": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
@@ -7612,6 +7642,12 @@
         }
       }
     },
+    "node_modules/fft.js": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/fft.js/-/fft.js-4.0.4.tgz",
+      "integrity": "sha512-f9c00hphOgeQTlDyavwTtu6RiK8AIFjD6+jvXkNkpeQ7rirK3uFWVpalkoS4LAwbdX7mfZ8aoBfFVQX1Re/8aw==",
+      "license": "MIT"
+    },
     "node_modules/file-entry-cache": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lotus-chat",
-  "version": "4.12.2-lotus",
+  "version": "4.12.3-lotus",
   "description": "Lotus Chat — Matrix client for Lotus Guild",
   "main": "index.js",
   "type": "module",
@@ -18,7 +18,8 @@
     "typecheck": "tsc --noEmit",
     "prepare": "husky",
     "commit": "git-cz",
-    "postinstall": "node scripts/patch-folds.mjs"
+    "postinstall": "node scripts/patch-folds.mjs",
+    "sync:decorations": "node scripts/syncDecorations.mjs"
   },
   "lint-staged": {
     "*.{ts,tsx,js,jsx}": "eslint",
@@ -43,11 +44,13 @@
     "@giphy/js-types": "5.1.0",
     "@giphy/js-util": "5.2.0",
     "@giphy/react-components": "10.1.2",
+    "@sapphi-red/web-noise-suppressor": "0.3.5",
     "@sentry/react": "10.53.1",
     "@tanstack/react-query": "5.100.13",
     "@tanstack/react-query-devtools": "5.100.13",
     "@tanstack/react-virtual": "3.13.25",
     "@types/dompurify": "3.2.0",
+    "@workadventure/noise-suppression": "0.0.4",
     "await-to-js": "3.0.0",
     "badwords-list": "2.0.1-4",
     "blurhash": "2.0.5",
@@ -56,6 +59,7 @@
     "classnames": "2.5.1",
     "dateformat": "5.0.3",
     "dayjs": "1.11.20",
+    "deepfilternet3-noise-filter": "1.2.1",
     "domhandler": "6.0.1",
     "dompurify": "3.4.5",
     "emojibase": "17.0.0",
@@ -99,7 +103,7 @@
     "ua-parser-js": "2.0.10"
   },
   "devDependencies": {
-    "@element-hq/element-call-embedded": "0.19.4",
+    "@element-hq/element-call-embedded": "0.20.1",
     "@rollup/plugin-inject": "5.0.5",
     "@rollup/plugin-wasm": "6.2.2",
     "@sentry/vite-plugin": "5.3.0",

public/fonts/JetBrainsMono-400.woff2

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang=en>
+  <meta charset=utf-8>
+  <meta name=viewport content="initial-scale=1, minimum-scale=1, width=device-width">
+  <title>Error 404 (Not Found)!!1</title>
+  <style>
+    *{margin:0;padding:0}html,code{font:15px/22px arial,sans-serif}html{background:#fff;color:#222;padding:15px}body{margin:7% auto 0;max-width:390px;min-height:180px;padding:30px 0 15px}* > body{background:url(//www.google.com/images/errors/robot.png) 100% 5px no-repeat;padding-right:205px}p{margin:11px 0 22px;overflow:hidden}ins{color:#777;text-decoration:none}a img{border:0}@media screen and (max-width:772px){body{background:none;margin-top:0;max-width:none;padding-right:0}}#logo{background:url(//www.google.com/images/branding/googlelogo/1x/googlelogo_color_150x54dp.png) no-repeat;margin-left:-5px}@media only screen and (min-resolution:192dpi){#logo{background:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) no-repeat 0% 0%/100% 100%;-moz-border-image:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) 0}}@media only screen and (-webkit-min-device-pixel-ratio:2){#logo{background:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) no-repeat;-webkit-background-size:100% 100%}}#logo{display:inline-block;height:54px;width:150px}
+  </style>
+  <a href=//www.google.com/><span id=logo aria-label=Google></span></a>
+  <p><b>404.</b> <ins>That’s an error.</ins>
+  <p>The requested URL <code>/s/jetbrainsmono/v18/tDbY2o-flEEny0FZhsfKu5WU4xD-IQ.woff2</code> was not found on this server.  <ins>That’s all we know.</ins>

public/fonts/JetBrainsMono-600.woff2

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang=en>
+  <meta charset=utf-8>
+  <meta name=viewport content="initial-scale=1, minimum-scale=1, width=device-width">
+  <title>Error 404 (Not Found)!!1</title>
+  <style>
+    *{margin:0;padding:0}html,code{font:15px/22px arial,sans-serif}html{background:#fff;color:#222;padding:15px}body{margin:7% auto 0;max-width:390px;min-height:180px;padding:30px 0 15px}* > body{background:url(//www.google.com/images/errors/robot.png) 100% 5px no-repeat;padding-right:205px}p{margin:11px 0 22px;overflow:hidden}ins{color:#777;text-decoration:none}a img{border:0}@media screen and (max-width:772px){body{background:none;margin-top:0;max-width:none;padding-right:0}}#logo{background:url(//www.google.com/images/branding/googlelogo/1x/googlelogo_color_150x54dp.png) no-repeat;margin-left:-5px}@media only screen and (min-resolution:192dpi){#logo{background:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) no-repeat 0% 0%/100% 100%;-moz-border-image:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) 0}}@media only screen and (-webkit-min-device-pixel-ratio:2){#logo{background:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) no-repeat;-webkit-background-size:100% 100%}}#logo{display:inline-block;height:54px;width:150px}
+  </style>
+  <a href=//www.google.com/><span id=logo aria-label=Google></span></a>
+  <p><b>404.</b> <ins>That’s an error.</ins>
+  <p>The requested URL <code>/s/jetbrainsmono/v18/tDbY2o-flEEny0FZhsfKu5WU4xD-IQ.woff2</code> was not found on this server.  <ins>That’s all we know.</ins>

public/fonts/JetBrainsMono-700.woff2

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang=en>
+  <meta charset=utf-8>
+  <meta name=viewport content="initial-scale=1, minimum-scale=1, width=device-width">
+  <title>Error 404 (Not Found)!!1</title>
+  <style>
+    *{margin:0;padding:0}html,code{font:15px/22px arial,sans-serif}html{background:#fff;color:#222;padding:15px}body{margin:7% auto 0;max-width:390px;min-height:180px;padding:30px 0 15px}* > body{background:url(//www.google.com/images/errors/robot.png) 100% 5px no-repeat;padding-right:205px}p{margin:11px 0 22px;overflow:hidden}ins{color:#777;text-decoration:none}a img{border:0}@media screen and (max-width:772px){body{background:none;margin-top:0;max-width:none;padding-right:0}}#logo{background:url(//www.google.com/images/branding/googlelogo/1x/googlelogo_color_150x54dp.png) no-repeat;margin-left:-5px}@media only screen and (min-resolution:192dpi){#logo{background:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) no-repeat 0% 0%/100% 100%;-moz-border-image:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) 0}}@media only screen and (-webkit-min-device-pixel-ratio:2){#logo{background:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) no-repeat;-webkit-background-size:100% 100%}}#logo{display:inline-block;height:54px;width:150px}
+  </style>
+  <a href=//www.google.com/><span id=logo aria-label=Google></span></a>
+  <p><b>404.</b> <ins>That’s an error.</ins>
+  <p>The requested URL <code>/s/jetbrainsmono/v18/tDbY2o-flEEny0FZhsfKu5WU4xD-IQ.woff2</code> was not found on this server.  <ins>That’s all we know.</ins>

public/fonts/custom-fonts.css

@@ -0,0 +1,51 @@
+/* Self-hosted fonts — avoids tracking prevention in desktop WebView2 */
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/fonts/JetBrainsMono-italic-400.woff2') format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/fonts/JetBrainsMono-normal-400.woff2') format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('/fonts/JetBrainsMono-normal-700.woff2') format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: 'Fira Code';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/fonts/FiraCode-400.woff2') format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: 'Fira Code';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('/fonts/FiraCode-600.woff2') format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

scripts/syncDecorations.mjs

@@ -0,0 +1,87 @@
+#!/usr/bin/env node
+/**
+ * Syncs avatarDecorations.ts with what's actually available on the Nextcloud CDN.
+ *
+ * Usage:
+ *   npm run sync:decorations
+ *
+ * Workflow after deleting files from Nextcloud:
+ *   1. Delete decoration files from your Nextcloud share.
+ *   2. Run: npm run sync:decorations
+ *   3. It probes each catalog slug via HTTP HEAD and removes entries
+ *      whose files returned 404. Empty categories are dropped automatically.
+ *   4. Commit the updated avatarDecorations.ts.
+ */
+
+import { readFileSync, writeFileSync } from 'fs';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const root = join(__dirname, '..');
+const catalogPath = join(root, 'src', 'app', 'features', 'lotus', 'avatarDecorations.ts');
+
+const CDN = 'https://drive.lotusguild.org/public.php/dav/files/bHswJ9pNKp2t26N/cinny-decorations';
+
+// Extract all slugs from the catalog file
+const catalog = readFileSync(catalogPath, 'utf8');
+const slugMatches = [...catalog.matchAll(/slug: '([^']+)'/g)].map((m) => m[1]);
+
+if (slugMatches.length === 0) {
+  console.error('No slugs found in catalog — check the file path.');
+  process.exit(1);
+}
+
+console.log(`Checking ${slugMatches.length} decorations against ${CDN} …`);
+console.log('(This makes one HEAD request per decoration)\n');
+
+// Probe all slugs in parallel batches of 16
+async function headCheck(slug) {
+  try {
+    const res = await fetch(`${CDN}/${slug}.png`, { method: 'HEAD' });
+    return { slug, ok: res.ok, status: res.status };
+  } catch {
+    return { slug, ok: false, status: 0 };
+  }
+}
+
+const BATCH = 16;
+const results = [];
+for (let i = 0; i < slugMatches.length; i += BATCH) {
+  const batch = slugMatches.slice(i, i + BATCH);
+  const batchResults = await Promise.all(batch.map(headCheck));
+  results.push(...batchResults);
+}
+
+const missing = results.filter((r) => !r.ok);
+const found = results.filter((r) => r.ok);
+
+if (missing.length === 0) {
+  console.log(`All ${found.length} decorations are available — catalog is up to date.`);
+  process.exit(0);
+}
+
+console.log(`Found: ${found.length}  Missing: ${missing.length}\n`);
+missing.forEach((r) => console.log(`  Removing (HTTP ${r.status}): ${r.slug}`));
+
+const missingSet = new Set(missing.map((r) => r.slug));
+
+// Remove individual entries for missing slugs
+let updated = catalog.replace(/^[ \t]*\{ slug: '([^']+)', name: .+\},?\r?\n/gm, (match, slug) =>
+  missingSet.has(slug) ? '' : match,
+);
+
+// Drop category blocks that now have an empty decorations array
+updated = updated.replace(
+  /  \{\n    id: '[^']+',\n    label: '[^']+',\n    decorations: \[\n?[ \t]*\],?\n  \},?\n/g,
+  '',
+);
+
+// Clean up stray blank lines
+updated = updated.replace(/\n{3,}/g, '\n\n');
+
+writeFileSync(catalogPath, updated, 'utf8');
+console.log(
+  `\nDone. Removed ${missing.length} entr${missing.length === 1 ? 'y' : 'ies'} from the catalog.`,
+);
+console.log('Review with: git diff src/app/features/lotus/avatarDecorations.ts');

src/app/components/CallEmbedProvider.tsx

@@ -42,6 +42,7 @@ import { ScreenSize, useScreenSizeContext } from '../hooks/useScreenSize';
 import { useMatrixClient } from '../hooks/useMatrixClient';
 import CallSound from '../../../public/sound/call.ogg';
 import { useCallMembersChange, useCallSession } from '../hooks/useCall';
+import { useCallJoinLeaveSounds } from '../hooks/useCallJoinLeaveSounds';
 import { useRemoteAllMuted } from '../hooks/useCallSpeakers';
 import { useRoomAvatar, useRoomName } from '../hooks/useRoomMeta';
 import { mDirectAtom } from '../state/mDirectList';
@@ -53,7 +54,7 @@ import { getChatBg } from '../features/lotus/chatBackground';
 import { useTheme, ThemeKind } from '../hooks/useTheme';
 import { useSetting } from '../state/hooks/settings';
 import { settingsAtom } from '../state/settings';
-import { getStateEvent, getMemberDisplayName } from '../utils/room';
+import { getStateEvent, getStateEvents, getMemberDisplayName } from '../utils/room';
 import { StateEvent } from '../../types/matrix/room';
 import { getPowersLevelFromMatrixEvent } from '../hooks/usePowerLevels';
 import { getRoomCreatorsForRoomId } from '../hooks/useRoomCreators';
@@ -103,6 +104,7 @@ function IncomingCall({ dm, info, onIgnore, onAnswer, onReject }: IncomingCallPr
   const { room } = info;
 
   const audioRef = useRef<HTMLAudioElement>(null);
+  const [ringtoneVolume] = useSetting(settingsAtom, 'ringtoneVolume');
 
   const roomName = useRoomName(room);
   const roomAvatar = useRoomAvatar(room, dm);
@@ -125,8 +127,10 @@ function IncomingCall({ dm, info, onIgnore, onAnswer, onReject }: IncomingCallPr
 
   const playSound = useCallback(() => {
     const audioElement = audioRef.current;
-    audioElement?.play().catch(() => undefined);
-  }, []);
+    if (!audioElement) return;
+    audioElement.volume = Math.max(0, Math.min(1, ringtoneVolume / 100));
+    audioElement.play().catch(() => undefined);
+  }, [ringtoneVolume]);
 
   useEffect(() => {
     const audioEl = audioRef.current;
@@ -188,11 +192,11 @@ function IncomingCall({ dm, info, onIgnore, onAnswer, onReject }: IncomingCallPr
                       />
                     </Avatar>
                   </Box>
-                  <Box grow="Yes" direction="Column" gap="100">
+                  <Box grow="Yes" direction="Column" gap="100" alignItems="Center">
                     <Text size="H3" align="Center" truncate>
                       {roomName}
                     </Text>
-                    <Text size="T300">
+                    <Text size="T300" align="Center">
                       {info.intent === 'video' ? 'Incoming Video Call' : 'Incoming Voice Call'}
                     </Text>
                   </Box>
@@ -279,6 +283,7 @@ function IncomingCallListener({ callEmbed, joined }: IncomingCallListenerProps)
       // only process rtc notification reference events.
       // we do not want to wait to decrypt all events.
       if (event.getRelation()?.rel_type !== RelationType.Reference) return;
+      if (room?.isCallRoom()) return;
 
       if (event.isEncrypted()) {
         if (!event.isBeingDecrypted()) {
@@ -324,18 +329,15 @@ function IncomingCallListener({ callEmbed, joined }: IncomingCallListenerProps)
       );
       if (!hasCallPermission) return;
 
-      // Only ring for DMs or private non-space group chats.
-      // Space voice channels and public rooms fire room-level RTC notifications
-      // whenever anyone joins — ringing every member is incorrect behaviour.
+      // Only ring in rooms where the call button is visible: DMs or invite-only rooms
+      // with no space parent. Persistent voice rooms (call rooms), space channels,
+      // restricted rooms, and public rooms must never trigger ringing.
+      if (room.isCallRoom()) return;
       const isDirect = directs.has(room.roomId);
-      const isSpaceChild = !!getStateEvent(room, StateEvent.SpaceParent);
+      const isSpaceChild = getStateEvents(room, StateEvent.SpaceParent).length > 0;
       const joinRule = room.getJoinRule();
-      const isPrivateGroup =
-        !isSpaceChild &&
-        (joinRule === JoinRule.Invite ||
-          joinRule === JoinRule.Knock ||
-          joinRule === JoinRule.Restricted);
-      if (!isDirect && !isPrivateGroup) return;
+      const isPrivateInviteGroup = !isSpaceChild && joinRule === JoinRule.Invite;
+      if (!isDirect && !isPrivateInviteGroup) return;
 
       const info: IncomingCallInfo = {
         room,
@@ -406,6 +408,7 @@ function CallUtils({ embed }: { embed: CallEmbed }) {
   const setCallEmbed = useSetAtom(callEmbedAtom);
 
   useCallMemberSoundSync(embed);
+  useCallJoinLeaveSounds(embed);
   useCallThemeSync(embed);
   useCallHangupEvent(
     embed,
@@ -417,34 +420,66 @@ function CallUtils({ embed }: { embed: CallEmbed }) {
   return null;
 }
 
-/** Shown inside the PiP window when the local microphone is muted. */
+/**
+ * PiP status indicators:
+ * - Bottom-left badge: local mic muted (matches Discord/Slack convention — bottom-left = "your" mic)
+ * - Top-right badge: all remote participants are muted (quiet room warning)
+ *
+ * Deliberately separated so users never mistake remote-mute state for their own.
+ */
 function PipMuteOverlay({ callEmbed }: { callEmbed: CallEmbed }) {
-  const allMuted = useRemoteAllMuted(callEmbed);
-  if (!allMuted) return null;
+  const mx = useMatrixClient();
+  const controlState = useCallControlState(callEmbed.control);
+  const allRemoteMuted = useRemoteAllMuted(callEmbed);
+
+  const localMicMuted = !controlState.microphone;
+  const localUserId = mx.getSafeUserId();
+  const localDisplayName = getMxIdLocalPart(localUserId) ?? localUserId;
+
+  // Dark translucent scrim is intentional: these badges overlay arbitrary
+  // video, so a theme surface token would not guarantee legibility.
+  const badgeStyle: React.CSSProperties = {
+    position: 'absolute',
+    zIndex: 3,
+    background: 'rgba(0,0,0,0.65)',
+    backdropFilter: 'blur(4px)',
+    borderRadius: config.radii.R300,
+    padding: `${config.space.S100} ${config.space.S200}`,
+    display: 'flex',
+    alignItems: 'center',
+    gap: config.space.S100,
+    pointerEvents: 'none',
+    lineHeight: 1,
+    userSelect: 'none',
+  };
+
   return (
-    <div
-      aria-label="Microphone muted"
-      style={{
-        position: 'absolute',
-        bottom: '8px',
-        left: '8px',
-        zIndex: 3,
-        background: 'rgba(0,0,0,0.60)',
-        backdropFilter: 'blur(4px)',
-        borderRadius: '6px',
-        padding: '3px 7px',
-        display: 'flex',
-        alignItems: 'center',
-        gap: '4px',
-        pointerEvents: 'none',
-        color: color.Critical.Main,
-        fontSize: '13px',
-        lineHeight: 1,
-        userSelect: 'none',
-      }}
-    >
-      <Icon size="100" src={Icons.MicMute} filled />
-    </div>
+    <>
+      {localMicMuted && (
+        <div
+          aria-label={`Your microphone is muted (${localDisplayName})`}
+          title="Your microphone is muted"
+          style={{ ...badgeStyle, bottom: config.space.S200, left: config.space.S200 }}
+        >
+          <Icon size="100" src={Icons.MicMute} filled style={{ color: color.Critical.Main }} />
+          <Text as="span" size="T200" style={{ color: color.Critical.Main }}>
+            You
+          </Text>
+        </div>
+      )}
+      {allRemoteMuted && (
+        <div
+          aria-label="All other participants are muted"
+          title="All other participants are muted"
+          style={{ ...badgeStyle, top: config.space.S200, right: config.space.S200 }}
+        >
+          <Icon size="50" src={Icons.MicMute} style={{ color: color.Warning.Main }} />
+          <Text as="span" size="T200" style={{ color: color.Warning.Main }}>
+            All muted
+          </Text>
+        </div>
+      )}
+    </>
   );
 }
 
@@ -500,6 +535,21 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
     [chatBackground, isDark],
   );
 
+  const [pipIsFullscreen, setPipIsFullscreen] = useState(false);
+  useEffect(() => {
+    const onFsChange = () => setPipIsFullscreen(!!document.fullscreenElement);
+    document.addEventListener('fullscreenchange', onFsChange);
+    return () => document.removeEventListener('fullscreenchange', onFsChange);
+  }, []);
+
+  const handlePipFullscreen = useCallback(() => {
+    if (document.fullscreenElement) {
+      document.exitFullscreen();
+    } else {
+      callEmbedRef.current?.requestFullscreen();
+    }
+  }, [callEmbedRef]);
+
   const pipDragRef = React.useRef<{
     startX: number;
     startY: number;
@@ -722,6 +772,54 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
     document.addEventListener('touchend', onTouchEnd);
   };
 
+  function applyResize(
+    el: HTMLElement,
+    corner: Corner,
+    sx: number,
+    sy: number,
+    sw: number,
+    sh: number,
+    sl: number,
+    st: number,
+    cx: number,
+    cy: number,
+  ) {
+    const dx = cx - sx;
+    const dy = cy - sy;
+    let w = sw;
+    let h = sh;
+    let l = sl;
+    let t = st;
+    if (corner === 'se') {
+      w = sw + dx;
+      h = sh + dy;
+    }
+    if (corner === 'sw') {
+      w = sw - dx;
+      h = sh + dy;
+      l = sl + sw - Math.max(PIP_MIN_W, w);
+    }
+    if (corner === 'ne') {
+      w = sw + dx;
+      h = sh - dy;
+      t = st + sh - Math.max(PIP_MIN_H, h);
+    }
+    if (corner === 'nw') {
+      w = sw - dx;
+      h = sh - dy;
+      l = sl + sw - Math.max(PIP_MIN_W, w);
+      t = st + sh - Math.max(PIP_MIN_H, h);
+    }
+    w = Math.max(PIP_MIN_W, Math.min(w, window.innerWidth));
+    h = Math.max(PIP_MIN_H, Math.min(h, window.innerHeight));
+    l = Math.max(0, Math.min(l, window.innerWidth - PIP_MIN_W));
+    t = Math.max(0, Math.min(t, window.innerHeight - PIP_MIN_H));
+    el.style.width = `${w}px`;
+    el.style.height = `${h}px`;
+    el.style.left = `${l}px`;
+    el.style.top = `${t}px`;
+  }
+
   const handleResizeMouseDown = (e: React.MouseEvent, corner: Corner) => {
     e.stopPropagation();
     e.preventDefault();
@@ -737,40 +835,7 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
     document.body.style.cursor = `${corner}-resize`;
     document.body.style.userSelect = 'none';
     const onMove = (ev: MouseEvent) => {
-      const dx = ev.clientX - sx;
-      const dy = ev.clientY - sy;
-      let w = sw;
-      let h = sh;
-      let l = sl;
-      let t = st;
-      if (corner === 'se') {
-        w = sw + dx;
-        h = sh + dy;
-      }
-      if (corner === 'sw') {
-        w = sw - dx;
-        h = sh + dy;
-        l = sl + sw - Math.max(PIP_MIN_W, w);
-      }
-      if (corner === 'ne') {
-        w = sw + dx;
-        h = sh - dy;
-        t = st + sh - Math.max(PIP_MIN_H, h);
-      }
-      if (corner === 'nw') {
-        w = sw - dx;
-        h = sh - dy;
-        l = sl + sw - Math.max(PIP_MIN_W, w);
-        t = st + sh - Math.max(PIP_MIN_H, h);
-      }
-      w = Math.max(PIP_MIN_W, Math.min(w, window.innerWidth));
-      h = Math.max(PIP_MIN_H, Math.min(h, window.innerHeight));
-      l = Math.max(0, Math.min(l, window.innerWidth - PIP_MIN_W));
-      t = Math.max(0, Math.min(t, window.innerHeight - PIP_MIN_H));
-      el.style.width = `${w}px`;
-      el.style.height = `${h}px`;
-      el.style.left = `${l}px`;
-      el.style.top = `${t}px`;
+      applyResize(el, corner, sx, sy, sw, sh, sl, st, ev.clientX, ev.clientY);
     };
     const onUp = () => {
       document.removeEventListener('mousemove', onMove);
@@ -789,6 +854,38 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
     document.addEventListener('mouseup', onUp);
   };
 
+  const handleResizeTouchStart = (e: React.TouchEvent, corner: Corner) => {
+    e.stopPropagation();
+    e.preventDefault();
+    const el = callEmbedRef.current;
+    if (!el || e.touches.length !== 1) return;
+    normaliseToTopLeft(el);
+    const touch = e.touches[0];
+    const sx = touch.clientX;
+    const sy = touch.clientY;
+    const sw = el.offsetWidth;
+    const sh = el.offsetHeight;
+    const sl = parseFloat(el.style.left);
+    const st = parseFloat(el.style.top);
+    const onMove = (ev: TouchEvent) => {
+      if (ev.touches.length !== 1) return;
+      ev.preventDefault();
+      const t = ev.touches[0];
+      applyResize(el, corner, sx, sy, sw, sh, sl, st, t.clientX, t.clientY);
+    };
+    const onEnd = () => {
+      document.removeEventListener('touchmove', onMove);
+      document.removeEventListener('touchend', onEnd);
+      activeDragCleanupRef.current = null;
+    };
+    activeDragCleanupRef.current = () => {
+      document.removeEventListener('touchmove', onMove);
+      document.removeEventListener('touchend', onEnd);
+    };
+    document.addEventListener('touchmove', onMove, { passive: false });
+    document.addEventListener('touchend', onEnd);
+  };
+
   return (
     <CallEmbedContextProvider value={callEmbed}>
       {callEmbed && <CallUtils embed={callEmbed} />}
@@ -834,19 +931,48 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
                 padding: '6px',
               }}
             >
-              <div
-                style={{
-                  background: 'rgba(0,0,0,0.65)',
-                  backdropFilter: 'blur(4px)',
-                  borderRadius: '6px',
-                  padding: '3px 8px',
-                  color: '#fff',
-                  fontSize: '11px',
-                  fontWeight: 600,
-                  pointerEvents: 'none',
-                }}
-              >
-                ↗ Return to call
+              <div style={{ display: 'flex', gap: config.space.S100, alignItems: 'center' }}>
+                {document.fullscreenEnabled && (
+                  <button
+                    type="button"
+                    aria-label={pipIsFullscreen ? 'Exit fullscreen' : 'Fullscreen camera'}
+                    title={pipIsFullscreen ? 'Exit fullscreen' : 'Fullscreen camera'}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handlePipFullscreen();
+                    }}
+                    style={{
+                      // Dark scrim is intentional for legibility over arbitrary video.
+                      background: 'rgba(0,0,0,0.65)',
+                      backdropFilter: 'blur(4px)',
+                      border: 'none',
+                      borderRadius: config.radii.R300,
+                      padding: `${config.space.S100} ${config.space.S200}`,
+                      color: '#fff',
+                      fontSize: '13px',
+                      cursor: 'pointer',
+                      lineHeight: 1,
+                      display: 'flex',
+                      alignItems: 'center',
+                    }}
+                  >
+                    {pipIsFullscreen ? '⊡' : '⛶'}
+                  </button>
+                )}
+                <div
+                  style={{
+                    background: 'rgba(0,0,0,0.65)',
+                    backdropFilter: 'blur(4px)',
+                    borderRadius: config.radii.R300,
+                    padding: `${config.space.S100} ${config.space.S200}`,
+                    color: '#fff',
+                    fontSize: '11px',
+                    fontWeight: 600,
+                    pointerEvents: 'none',
+                  }}
+                >
+                  ↗ Return to call
+                </div>
               </div>
             </div>
             <PipMuteOverlay callEmbed={callEmbed} />
@@ -871,6 +997,7 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
                 <div
                   key={corner}
                   onMouseDown={(ev) => handleResizeMouseDown(ev, corner)}
+                  onTouchStart={(ev) => handleResizeTouchStart(ev, corner)}
                   onClick={(ev) => ev.stopPropagation()}
                   style={{
                     position: 'absolute',

src/app/components/DeviceVerification.tsx

@@ -30,6 +30,7 @@ import {
 } from '../hooks/useVerificationRequest';
 import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
 import { ContainerColor } from '../styles/ContainerColor.css';
+import { useModalStyle } from '../hooks/useModalStyle';
 
 const DialogHeaderStyles: CSSProperties = {
   padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -232,6 +233,7 @@ type DeviceVerificationProps = {
 };
 export function DeviceVerification({ request, onExit }: DeviceVerificationProps) {
   const phase = useVerificationRequestPhase(request);
+  const modalStyle = useModalStyle(480);
 
   const handleCancel = useCallback(() => {
     if (request.phase !== VerificationPhase.Done && request.phase !== VerificationPhase.Cancelled) {
@@ -255,7 +257,7 @@ export function DeviceVerification({ request, onExit }: DeviceVerificationProps)
             escapeDeactivates: false,
           }}
         >
-          <Dialog variant="Surface">
+          <Dialog variant="Surface" style={modalStyle}>
             <Header style={DialogHeaderStyles} variant="Surface" size="500">
               <Box grow="Yes">
                 <Text as="h2" size="H4">

src/app/components/DeviceVerificationSetup.tsx

@@ -16,6 +16,7 @@ import {
 import FileSaver from 'file-saver';
 import to from 'await-to-js';
 import { AuthDict, IAuthData, MatrixError, UIAuthCallback } from 'matrix-js-sdk';
+import { useModalStyle } from '../hooks/useModalStyle';
 import { PasswordInput } from './password-input';
 import { ContainerColor } from '../styles/ContainerColor.css';
 import { copyToClipboard } from '../utils/dom';
@@ -287,9 +288,10 @@ type DeviceVerificationSetupProps = {
 export const DeviceVerificationSetup = forwardRef<HTMLDivElement, DeviceVerificationSetupProps>(
   ({ onCancel }, ref) => {
     const [recoveryKey, setRecoveryKey] = useState<string>();
+    const modalStyle = useModalStyle(480);
 
     return (
-      <Dialog ref={ref}>
+      <Dialog ref={ref} style={modalStyle}>
         <Header
           style={{
             padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -324,9 +326,10 @@ type DeviceVerificationResetProps = {
 export const DeviceVerificationReset = forwardRef<HTMLDivElement, DeviceVerificationResetProps>(
   ({ onCancel }, ref) => {
     const [reset, setReset] = useState(false);
+    const modalStyle = useModalStyle(480);
 
     return (
-      <Dialog ref={ref}>
+      <Dialog ref={ref} style={modalStyle}>
         <Header
           style={{
             padding: `0 ${config.space.S200} 0 ${config.space.S400}`,

src/app/components/GifPicker.tsx

@@ -2,7 +2,7 @@ import React, { useCallback } from 'react';
 import FocusTrap from 'focus-trap-react';
 import { Grid, SearchBar, SearchContext, SearchContextManager } from '@giphy/react-components';
 import { IGif } from '@giphy/js-types';
-import { Box } from 'folds';
+import { Box, color, config } from 'folds';
 import { useSetting } from '../state/hooks/settings';
 import { settingsAtom } from '../state/settings';
 
@@ -86,15 +86,16 @@ export function GifPicker({ apiKey, onSelect, requestClose }: GifPickerProps) {
         border: '1px solid color-mix(in srgb, var(--lt-accent-orange) 35%, transparent)',
         borderRadius: '4px',
         overflow: 'hidden',
-        boxShadow: '0 4px 24px color-mix(in srgb, var(--lt-accent-orange) 10%, transparent), 0 0 0 1px color-mix(in srgb, var(--lt-accent-orange) 8%, transparent)',
+        boxShadow:
+          '0 4px 24px color-mix(in srgb, var(--lt-accent-orange) 10%, transparent), 0 0 0 1px color-mix(in srgb, var(--lt-accent-orange) 8%, transparent)',
         width: `${PICKER_WIDTH}px`,
       }
     : {
-        background: 'var(--bg-surface)',
-        border: '1px solid rgba(255,255,255,0.08)',
-        borderRadius: '12px',
+        background: color.Surface.Container,
+        border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
+        borderRadius: config.radii.R400,
         overflow: 'hidden',
-        boxShadow: '0 8px 32px rgba(0,0,0,0.4)',
+        boxShadow: color.Other.Shadow,
         width: `${PICKER_WIDTH}px`,
       };
 
@@ -102,6 +103,7 @@ export function GifPicker({ apiKey, onSelect, requestClose }: GifPickerProps) {
     <FocusTrap
       focusTrapOptions={{
         initialFocus: false,
+        returnFocusOnDeactivate: false,
         onDeactivate: requestClose,
         clickOutsideDeactivates: true,
         allowOutsideClick: true,

src/app/components/LogoutDialog.tsx

@@ -3,6 +3,7 @@ import { Dialog, Header, config, Box, Text, Button, Spinner, color } from 'folds
 import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
 import { logoutClient } from '../../client/initMatrix';
 import { useMatrixClient } from '../hooks/useMatrixClient';
+import { useModalStyle } from '../hooks/useModalStyle';
 import { useCrossSigningActive } from '../hooks/useCrossSigning';
 import { InfoCard } from './info-card';
 import {
@@ -16,6 +17,7 @@ type LogoutDialogProps = {
 export const LogoutDialog = forwardRef<HTMLDivElement, LogoutDialogProps>(
   ({ handleClose }, ref) => {
     const mx = useMatrixClient();
+    const modalStyle = useModalStyle(480);
     const hasEncryptedRoom = !!mx.getRooms().find((room) => room.hasEncryptionStateEvent());
     const crossSigningActive = useCrossSigningActive();
     const verificationStatus = useDeviceVerificationStatus(
@@ -33,7 +35,7 @@ export const LogoutDialog = forwardRef<HTMLDivElement, LogoutDialogProps>(
     const ongoingLogout = logoutState.status === AsyncStatus.Loading;
 
     return (
-      <Dialog variant="Surface" ref={ref}>
+      <Dialog variant="Surface" ref={ref} style={modalStyle}>
         <Header
           style={{
             padding: `0 ${config.space.S200} 0 ${config.space.S400}`,

src/app/components/Modal500.tsx

@@ -2,12 +2,14 @@ import React, { ReactNode } from 'react';
 import FocusTrap from 'focus-trap-react';
 import { Modal, Overlay, OverlayBackdrop, OverlayCenter } from 'folds';
 import { stopPropagation } from '../utils/keyboard';
+import { ScreenSize, useScreenSizeContext } from '../hooks/useScreenSize';
 
 type Modal500Props = {
   requestClose: () => void;
   children: ReactNode;
 };
 export function Modal500({ requestClose, children }: Modal500Props) {
+  const isMobile = useScreenSizeContext() === ScreenSize.Mobile;
   return (
     <Overlay open backdrop={<OverlayBackdrop />}>
       <OverlayCenter>
@@ -19,7 +21,25 @@ export function Modal500({ requestClose, children }: Modal500Props) {
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Modal size="500" variant="Background">
+          <Modal
+            size="500"
+            variant="Background"
+            // On mobile expand to fill the viewport. On desktop fall back to the
+            // folds `size="500"` width (~50rem) — overriding maxWidth here would
+            // squish the two-pane settings layout.
+            style={
+              isMobile
+                ? {
+                    width: '100%',
+                    height: '100%',
+                    maxWidth: '100%',
+                    maxHeight: '100%',
+                    borderRadius: 0,
+                    overflow: 'hidden auto',
+                  }
+                : undefined
+            }
+          >
             {children}
           </Modal>
         </FocusTrap>

src/app/components/RenderMessageContent.tsx

@@ -232,7 +232,18 @@ export function RenderMessageContent({
                       <ThumbnailContent
                         info={info}
                         renderImage={(src) => (
-                          <Image alt={body} title={body} src={src} loading="lazy" />
+                          <Image
+                            alt={body}
+                            title={body}
+                            src={src}
+                            loading="lazy"
+                            style={{
+                              objectFit: 'cover',
+                              objectPosition: 'center top',
+                              width: '100%',
+                              height: '100%',
+                            }}
+                          />
                         )}
                       />
                     )

src/app/components/VoiceMessageRecorder.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { Box, Icon, IconButton, Icons, Text, config, toRem } from 'folds';
+import { Box, Icon, IconButton, Icons, Text, color, config, toRem } from 'folds';
 import { useSetting } from '../state/hooks/settings';
 import { settingsAtom } from '../state/settings';
 
@@ -51,6 +51,8 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
 
   const previewMimeRef = useRef('audio/ogg;codecs=opus');
   const previewDurationRef = useRef(0);
+  const previewAudioRef = useRef<HTMLAudioElement | null>(null);
+  const [previewPlaying, setPreviewPlaying] = useState(false);
 
   const stopAll = useCallback(() => {
     if (animFrameRef.current) cancelAnimationFrame(animFrameRef.current);
@@ -192,7 +194,7 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
         alignItems="Center"
         gap="200"
         style={{
-          background: 'var(--bg-surface-variant)',
+          background: color.SurfaceVariant.Container,
           borderRadius: config.radii.R300,
           padding: `${toRem(4)} ${toRem(8)}`,
         }}
@@ -203,7 +205,7 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
             width: toRem(8),
             height: toRem(8),
             borderRadius: '50%',
-            background: lotusTerminal ? 'var(--lt-accent-orange)' : 'var(--tc-danger-normal)',
+            background: lotusTerminal ? 'var(--lt-accent-orange)' : color.Critical.Main,
             flexShrink: 0,
             animation: 'pttLivePulse 900ms ease-in-out infinite',
           }}
@@ -214,7 +216,11 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
             minWidth: toRem(32),
             fontVariantNumeric: 'tabular-nums',
             ...(lotusTerminal
-              ? { fontFamily: 'JetBrains Mono, monospace', color: 'var(--lt-accent-green)', fontWeight: 700 }
+              ? {
+                  fontFamily: 'JetBrains Mono, monospace',
+                  color: 'var(--lt-accent-green)',
+                  fontWeight: 700,
+                }
               : {}),
           }}
         >
@@ -233,7 +239,7 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
                 width: toRem(2),
                 height: toRem(2 + (h / barMax) * 16),
                 borderRadius: toRem(1),
-                background: lotusTerminal ? 'var(--lt-accent-green)' : 'var(--tc-primary-normal)',
+                background: lotusTerminal ? 'var(--lt-accent-green)' : color.Primary.Main,
                 flexShrink: 0,
               }}
             />
@@ -269,13 +275,36 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
       alignItems="Center"
       gap="200"
       style={{
-        background: 'var(--bg-surface-variant)',
+        background: color.SurfaceVariant.Container,
         borderRadius: config.radii.R300,
         padding: `${toRem(4)} ${toRem(8)}`,
       }}
     >
       {previewUrl && (
-        <audio src={previewUrl} controls style={{ height: toRem(28), maxWidth: toRem(180) }} />
+        <>
+          <audio ref={previewAudioRef} src={previewUrl} onEnded={() => setPreviewPlaying(false)} />
+          <IconButton
+            onClick={() => {
+              const audio = previewAudioRef.current;
+              if (!audio) return;
+              if (previewPlaying) {
+                audio.pause();
+                setPreviewPlaying(false);
+              } else {
+                audio.play();
+                setPreviewPlaying(true);
+              }
+            }}
+            aria-label={previewPlaying ? 'Pause preview' : 'Play preview'}
+            variant="Secondary"
+            fill="Soft"
+            size="300"
+            radii="300"
+            title={previewPlaying ? 'Pause' : 'Play'}
+          >
+            <Icon src={previewPlaying ? Icons.Pause : Icons.Play} size="100" />
+          </IconButton>
+        </>
       )}
       <Text size="T200" style={{ fontVariantNumeric: 'tabular-nums', flexShrink: 0 }}>
         {formatDuration(previewDurationRef.current)}

src/app/components/avatar-decoration/AvatarDecoration.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { useAvatarDecoration } from '../../hooks/useAvatarDecoration';
+import { decorationUrl } from '../../features/lotus/avatarDecorations';
+
+const DEFAULT_INSET = 8;
+
+type AvatarDecorationProps = {
+  userId: string;
+  children: React.ReactNode;
+  inset?: number;
+};
+
+export function AvatarDecoration({
+  userId,
+  children,
+  inset = DEFAULT_INSET,
+}: AvatarDecorationProps) {
+  const slug = useAvatarDecoration(userId);
+
+  if (!slug) {
+    return <>{children}</>;
+  }
+
+  return (
+    <div
+      style={{
+        position: 'relative',
+        display: 'inline-flex',
+        flexShrink: 0,
+      }}
+    >
+      {children}
+      <img
+        src={decorationUrl(slug)}
+        style={{
+          position: 'absolute',
+          top: -inset,
+          left: -inset,
+          right: -inset,
+          bottom: -inset,
+          width: `calc(100% + ${inset * 2}px)`,
+          height: `calc(100% + ${inset * 2}px)`,
+          pointerEvents: 'none',
+          zIndex: 10,
+          objectFit: 'contain',
+        }}
+        alt=""
+        aria-hidden="true"
+        loading="lazy"
+        decoding="async"
+        onError={(e) => {
+          (e.currentTarget as HTMLImageElement).style.display = 'none';
+        }}
+      />
+    </div>
+  );
+}

src/app/components/editor/Toolbar.tsx

@@ -252,6 +252,7 @@ export function ExitFormatting({ tooltip }: ExitFormattingProps) {
           onClick={handleClick}
           size="400"
           radii="300"
+          aria-label="Exit formatting"
         >
           <Text size="B400">{`Exit ${KeySymbol.Hyper}`}</Text>
         </IconButton>

src/app/components/editor/autocomplete/UserMentionAutocomplete.tsx

@@ -21,6 +21,7 @@ import { UserAvatar } from '../../user-avatar';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { Membership } from '../../../../types/matrix/room';
 import { PresenceRingAvatar } from '../../presence';
+import { AvatarDecoration } from '../../avatar-decoration/AvatarDecoration';
 
 type MentionAutoCompleteHandler = (userId: string, name: string) => void;
 
@@ -48,14 +49,16 @@ function UnknownMentionItem({
       }
       onClick={() => handleAutocomplete(userId, name)}
       before={
-        <PresenceRingAvatar userId={userId}>
-          <Avatar size="200">
-            <UserAvatar
-              userId={userId}
-              renderFallback={() => <Icon size="50" src={Icons.User} filled />}
-            />
-          </Avatar>
-        </PresenceRingAvatar>
+        <AvatarDecoration userId={userId}>
+          <PresenceRingAvatar userId={userId}>
+            <Avatar size="200">
+              <UserAvatar
+                userId={userId}
+                renderFallback={() => <Icon size="50" src={Icons.User} filled />}
+              />
+            </Avatar>
+          </PresenceRingAvatar>
+        </AvatarDecoration>
       }
     >
       <Text style={{ flexGrow: 1 }} size="B400">
@@ -177,16 +180,18 @@ export function UserMentionAutocomplete({
                 </Text>
               }
               before={
-                <PresenceRingAvatar userId={roomMember.userId}>
-                  <Avatar size="200">
-                    <UserAvatar
-                      userId={roomMember.userId}
-                      src={avatarUrl ?? undefined}
-                      alt={getName(roomMember)}
-                      renderFallback={() => <Icon size="50" src={Icons.User} filled />}
-                    />
-                  </Avatar>
-                </PresenceRingAvatar>
+                <AvatarDecoration userId={roomMember.userId}>
+                  <PresenceRingAvatar userId={roomMember.userId}>
+                    <Avatar size="200">
+                      <UserAvatar
+                        userId={roomMember.userId}
+                        src={avatarUrl ?? undefined}
+                        alt={getName(roomMember)}
+                        renderFallback={() => <Icon size="50" src={Icons.User} filled />}
+                      />
+                    </Avatar>
+                  </PresenceRingAvatar>
+                </AvatarDecoration>
               }
             >
               <Text style={{ flexGrow: 1 }} size="B400" truncate>

src/app/components/event-readers/EventReaders.tsx

@@ -67,12 +67,12 @@ export const EventReaders = as<'div', EventReadersProps>(
         <Header
           className={css.Header}
           variant="Surface"
-          size="600"
+          size="500"
           style={
             lotusTerminal
               ? {
-                  borderBottom: '1px solid rgba(0,212,255,0.30)',
-                  boxShadow: '0 2px 12px rgba(0,212,255,0.08)',
+                  borderBottomWidth: config.borderWidth.B300,
+                  boxShadow: 'var(--lt-box-glow-cyan)',
                 }
               : undefined
           }
@@ -83,8 +83,8 @@ export const EventReaders = as<'div', EventReadersProps>(
               style={
                 lotusTerminal
                   ? {
-                      color: '#00D4FF',
-                      textShadow: '0 0 6px rgba(0,212,255,0.45)',
+                      color: 'var(--lt-accent-cyan)',
+                      textShadow: 'var(--lt-glow-cyan)',
                       letterSpacing: '0.05em',
                     }
                   : undefined
@@ -93,7 +93,7 @@ export const EventReaders = as<'div', EventReadersProps>(
               Seen by
             </Text>
           </Box>
-          <IconButton size="300" onClick={requestClose} aria-label="Close">
+          <IconButton size="300" radii="300" onClick={requestClose} aria-label="Close">
             <Icon src={Icons.Cross} />
           </IconButton>
         </Header>
@@ -141,14 +141,14 @@ export const EventReaders = as<'div', EventReadersProps>(
                       {receiptTs !== undefined && (
                         <Text
                           size="T200"
+                          priority="300"
                           style={
                             lotusTerminal
                               ? {
-                                  color: '#FFB300',
-                                  textShadow: '0 0 5px rgba(255,179,0,0.45)',
-                                  fontSize: '0.72rem',
+                                  color: 'var(--lt-accent-amber)',
+                                  textShadow: 'var(--lt-glow-amber)',
                                 }
-                              : { opacity: 0.6 }
+                              : undefined
                           }
                         >
                           {formatReadTs(receiptTs, hour24Clock)}

src/app/components/invite-user-prompt/InviteUserPrompt.tsx

@@ -51,6 +51,7 @@ import { useAlive } from '../../hooks/useAlive';
 import { copyToClipboard } from '../../utils/dom';
 import { getMatrixToRoom } from '../../plugins/matrix-to';
 import { getViaServers } from '../../plugins/via-servers';
+import { useModalStyle } from '../../hooks/useModalStyle';
 
 const SEARCH_OPTIONS: UseAsyncSearchOptions = {
   limit: 1000,
@@ -66,6 +67,7 @@ type InviteUserProps = {
 };
 export function InviteUserPrompt({ room, requestClose }: InviteUserProps) {
   const mx = useMatrixClient();
+  const modalStyle = useModalStyle(560);
   const alive = useAlive();
   const [linkCopied, setLinkCopied] = useState(false);
   const [showQr, setShowQr] = useState(false);
@@ -184,7 +186,7 @@ export function InviteUserPrompt({ room, requestClose }: InviteUserProps) {
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Dialog>
+          <Dialog style={modalStyle}>
             <Box grow="Yes" direction="Column">
               <Header
                 size="500"

src/app/components/join-address-prompt/JoinAddressPrompt.tsx

@@ -18,6 +18,7 @@ import {
 } from 'folds';
 import { stopPropagation } from '../../utils/keyboard';
 import { isRoomAlias, isRoomId } from '../../utils/matrix';
+import { useModalStyle } from '../../hooks/useModalStyle';
 import { parseMatrixToRoom, parseMatrixToRoomEvent, testMatrixTo } from '../../plugins/matrix-to';
 import { tryDecodeURIComponent } from '../../utils/dom';
 
@@ -26,6 +27,7 @@ type JoinAddressProps = {
   onCancel: () => void;
 };
 export function JoinAddressPrompt({ onOpen, onCancel }: JoinAddressProps) {
+  const modalStyle = useModalStyle(480);
   const [invalid, setInvalid] = useState(false);
 
   const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
@@ -71,7 +73,7 @@ export function JoinAddressPrompt({ onOpen, onCancel }: JoinAddressProps) {
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Dialog variant="Surface">
+          <Dialog variant="Surface" style={modalStyle}>
             <Header
               style={{
                 padding: `0 ${config.space.S200} 0 ${config.space.S400}`,

src/app/components/leave-room-prompt/LeaveRoomPrompt.tsx

@@ -20,6 +20,7 @@ import { MatrixError } from 'matrix-js-sdk';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { stopPropagation } from '../../utils/keyboard';
+import { useModalStyle } from '../../hooks/useModalStyle';
 
 type LeaveRoomPromptProps = {
   roomId: string;
@@ -28,6 +29,7 @@ type LeaveRoomPromptProps = {
 };
 export function LeaveRoomPrompt({ roomId, onDone, onCancel }: LeaveRoomPromptProps) {
   const mx = useMatrixClient();
+  const modalStyle = useModalStyle(480);
 
   const [leaveState, leaveRoom] = useAsyncCallback<undefined, MatrixError, []>(
     useCallback(async () => {
@@ -56,7 +58,7 @@ export function LeaveRoomPrompt({ roomId, onDone, onCancel }: LeaveRoomPromptPro
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Dialog variant="Surface" aria-labelledby="leave-room-dialog-title">
+          <Dialog variant="Surface" aria-labelledby="leave-room-dialog-title" style={modalStyle}>
             <Header
               style={{
                 padding: `0 ${config.space.S200} 0 ${config.space.S400}`,

src/app/components/leave-space-prompt/LeaveSpacePrompt.tsx

@@ -20,6 +20,7 @@ import { MatrixError } from 'matrix-js-sdk';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { stopPropagation } from '../../utils/keyboard';
+import { useModalStyle } from '../../hooks/useModalStyle';
 
 type LeaveSpacePromptProps = {
   roomId: string;
@@ -28,6 +29,7 @@ type LeaveSpacePromptProps = {
 };
 export function LeaveSpacePrompt({ roomId, onDone, onCancel }: LeaveSpacePromptProps) {
   const mx = useMatrixClient();
+  const modalStyle = useModalStyle(480);
 
   const [leaveState, leaveRoom] = useAsyncCallback<undefined, MatrixError, []>(
     useCallback(async () => {
@@ -56,7 +58,7 @@ export function LeaveSpacePrompt({ roomId, onDone, onCancel }: LeaveSpacePromptP
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Dialog variant="Surface">
+          <Dialog variant="Surface" style={modalStyle}>
             <Header
               style={{
                 padding: `0 ${config.space.S200} 0 ${config.space.S400}`,

src/app/components/media/media.css.ts

@@ -5,6 +5,7 @@ export const Image = style([
   DefaultReset,
   {
     objectFit: 'cover',
+    objectPosition: 'center top',
     width: '100%',
     height: '100%',
   },

src/app/components/message/MsgTypeRenderers.tsx

@@ -1,5 +1,5 @@
 import React, { CSSProperties, ReactNode, useEffect, useRef, useState } from 'react';
-import { Box, Button, Chip, Icon, Icons, Text, color, toRem } from 'folds';
+import { Box, Button, config, Icon, Icons, Text, color, toRem } from 'folds';
 import { IContent } from 'matrix-js-sdk';
 import { JUMBO_EMOJI_REG, URL_REG } from '../../utils/regex';
 import { trimReplyFromBody } from '../../utils/room';
@@ -94,15 +94,21 @@ function CollapsibleBody({ eventId, children }: CollapsibleBodyProps) {
         )}
       </div>
       {needsCollapse && (
-        <Button
-          size="300"
-          variant="Secondary"
-          fill="None"
-          style={{ marginTop: '4px' }}
+        <button
+          type="button"
           onClick={() => setCollapsed((c) => !c)}
+          style={{
+            cursor: 'pointer',
+            background: 'none',
+            border: 'none',
+            padding: 0,
+            marginTop: config.space.S100,
+          }}
         >
-          <Text size="B300">{collapsed ? 'Read more ↓' : 'Show less ↑'}</Text>
-        </Button>
+          <Text as="span" size="T200" style={{ color: color.Primary.Main }}>
+            {collapsed ? 'Read more ↓' : 'Show less ↑'}
+          </Text>
+        </button>
       )}
     </div>
   );
@@ -529,21 +535,22 @@ export function MLocation({ content }: MLocationProps) {
         loading="lazy"
         sandbox="allow-scripts"
       />
-      <Text size="T300" style={{ opacity: 0.65 }}>
+      <Text size="T300" priority="300">
         {`${lat.toFixed(5)}, ${lon.toFixed(5)}`}
       </Text>
-      <Chip
+      <Button
         as="a"
         size="400"
         href={`https://www.openstreetmap.org/?mlat=${location.latitude}&mlon=${location.longitude}#map=16/${location.latitude}/${location.longitude}`}
         target="_blank"
         rel="noreferrer noopener"
-        variant="Primary"
-        radii="Pill"
+        variant="Secondary"
+        fill="Solid"
+        radii="300"
         before={<Icon src={Icons.External} size="50" />}
       >
         <Text size="B300">Open Location</Text>
-      </Chip>
+      </Button>
     </Box>
   );
 }

src/app/components/message/Reaction.tsx

@@ -15,34 +15,42 @@ export const Reaction = as<
     reaction: string;
     useAuthentication?: boolean;
   }
->(({ className, mx, count, reaction, useAuthentication, ...props }, ref) => (
-  <Box
-    as="button"
-    className={classNames(css.Reaction, className)}
-    alignItems="Center"
-    shrink="No"
-    gap="200"
-    {...props}
-    ref={ref}
-  >
-    <Text className={css.ReactionText} as="span" size="T400">
-      {reaction.startsWith('mxc://') ? (
-        <img
-          className={css.ReactionImg}
-          src={mxcUrlToHttp(mx, reaction, useAuthentication) ?? reaction}
-          alt={reaction}
-        />
-      ) : (
-        <Text as="span" size="Inherit" truncate>
-          {reaction}
-        </Text>
-      )}
-    </Text>
-    <Text as="span" size="T300">
-      {count}
-    </Text>
-  </Box>
-));
+>(({ className, mx, count, reaction, useAuthentication, ...props }, ref) => {
+  const shortcode = reaction.startsWith('mxc://')
+    ? 'custom emoji'
+    : (getShortcodeFor(getHexcodeForEmoji(reaction)) ?? reaction);
+  const label = `${shortcode} reaction, ${count} ${count === 1 ? 'person' : 'people'}`;
+
+  return (
+    <Box
+      as="button"
+      className={classNames(css.Reaction, className)}
+      alignItems="Center"
+      shrink="No"
+      gap="200"
+      aria-label={label}
+      {...props}
+      ref={ref}
+    >
+      <Text className={css.ReactionText} as="span" size="T400">
+        {reaction.startsWith('mxc://') ? (
+          <img
+            className={css.ReactionImg}
+            src={mxcUrlToHttp(mx, reaction, useAuthentication) ?? reaction}
+            alt={reaction}
+          />
+        ) : (
+          <Text as="span" size="Inherit" truncate>
+            {reaction}
+          </Text>
+        )}
+      </Text>
+      <Text as="span" size="T300">
+        {count}
+      </Text>
+    </Box>
+  );
+});
 
 type ReactionTooltipMsgProps = {
   room: Room;

src/app/components/message/Reply.tsx

@@ -103,10 +103,16 @@ export const Reply = as<'div', ReplyProps>(
     return (
       <Box direction="Row" gap="200" alignItems="Center" {...props} ref={ref}>
         {threadRootId && (
-          <ThreadIndicator as="button" data-event-id={threadRootId} onClick={onClick} />
+          <ThreadIndicator
+            as="button"
+            data-event-id={threadRootId}
+            onClick={onClick}
+            aria-label="View thread"
+          />
         )}
         <ReplyLayout
           as="button"
+          aria-label="Jump to original message"
           userColor={usernameColor}
           username={
             sender && (

src/app/components/message/content/AudioContent.tsx

@@ -182,8 +182,8 @@ export function AudioContent({
 
         <Chip
           onClick={handleSpeedClick}
-          variant="SurfaceVariant"
-          radii="Pill"
+          variant="Secondary"
+          radii="300"
           aria-label={`Playback speed: ${playbackSpeed}×`}
         >
           <Text size="B300">{`${playbackSpeed}×`}</Text>

src/app/components/message/content/FallbackContent.tsx

@@ -75,6 +75,7 @@ export const MessageEditedContent = as<
       <button
         type="button"
         onClick={onEditHistoryClick}
+        aria-label="View edit history"
         style={{ cursor: 'pointer', background: 'none', border: 'none', padding: 0 }}
       >
         <Text as="span" size="T200" priority="300">

src/app/components/message/content/ImageContent.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useCallback, useEffect, useState } from 'react';
+import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import {
   Badge,
   Box,
@@ -31,6 +31,7 @@ import { decryptFile, downloadEncryptedMedia, mxcUrlToHttp } from '../../../util
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { ModalWide } from '../../../styles/Modal.css';
 import { validBlurHash } from '../../../utils/blurHash';
+import { useNearViewport } from '../../../hooks/useNearViewport';
 
 type RenderViewerProps = {
   src: string;
@@ -85,6 +86,9 @@ export const ImageContent = as<'div', ImageContentProps>(
     const [viewer, setViewer] = useState(false);
     const [blurred, setBlurred] = useState(markedAsSpoiler ?? false);
 
+    const sentinelRef = useRef<HTMLDivElement>(null);
+    const nearViewport = useNearViewport(sentinelRef);
+
     const [srcState, loadSrc] = useAsyncCallback(
       useCallback(async () => {
         const mediaUrl = mxcUrlToHttp(mx, url, useAuthentication);
@@ -113,11 +117,12 @@ export const ImageContent = as<'div', ImageContentProps>(
     };
 
     useEffect(() => {
-      if (autoPlay) loadSrc().catch(() => undefined);
-    }, [autoPlay, loadSrc]);
+      if (autoPlay && nearViewport) loadSrc().catch(() => undefined);
+    }, [autoPlay, nearViewport, loadSrc]);
 
     return (
       <Box className={classNames(css.RelativeBase, className)} {...props} ref={ref}>
+        <div ref={sentinelRef} style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }} />
         {srcState.status === AsyncStatus.Success && (
           <Overlay open={viewer} backdrop={<OverlayBackdrop />}>
             <OverlayCenter>

src/app/components/message/content/PollContent.tsx

@@ -282,10 +282,8 @@ export function PollContent({
               style={{
                 padding: '7px 12px',
                 borderRadius: '8px',
-                background: selected
-                  ? 'rgba(var(--mx-primary-rgb, 0,132,255), 0.12)'
-                  : 'rgba(255,255,255,0.04)',
-                border: `1.5px solid ${selected ? 'rgba(var(--mx-primary-rgb, 0,132,255), 0.7)' : 'rgba(255,255,255,0.12)'}`,
+                background: selected ? 'var(--accent-cyan-dim)' : 'rgba(255,255,255,0.04)',
+                border: `1.5px solid ${selected ? 'var(--accent-cyan)' : 'var(--border-color)'}`,
                 fontSize: '0.88rem',
                 lineHeight: 1.4,
                 textAlign: 'left',
@@ -308,9 +306,7 @@ export function PollContent({
                     inset: 0,
                     right: 'auto',
                     width: `${pct}%`,
-                    background: selected
-                      ? 'rgba(var(--mx-primary-rgb, 0,132,255), 0.08)'
-                      : 'rgba(255,255,255,0.03)',
+                    background: selected ? 'var(--accent-cyan-dim)' : 'rgba(255,255,255,0.03)',
                     pointerEvents: 'none',
                     transition: 'width 0.3s ease',
                   }}
@@ -325,9 +321,9 @@ export function PollContent({
                       flexShrink: 0,
                       width: '14px',
                       height: '14px',
-                      border: `1.5px solid ${selected ? 'rgba(var(--mx-primary-rgb, 0,132,255), 0.9)' : 'rgba(255,255,255,0.3)'}`,
+                      border: `1.5px solid ${selected ? 'var(--accent-cyan)' : 'var(--accent-cyan-border)'}`,
                       borderRadius: '3px',
-                      background: selected ? 'rgba(var(--mx-primary-rgb, 0,132,255), 0.8)' : 'none',
+                      background: selected ? 'var(--accent-cyan)' : 'none',
                       display: 'flex',
                       alignItems: 'center',
                       justifyContent: 'center',
@@ -345,9 +341,9 @@ export function PollContent({
                       flexShrink: 0,
                       width: '14px',
                       height: '14px',
-                      border: `1.5px solid ${selected ? 'rgba(var(--mx-primary-rgb, 0,132,255), 0.9)' : 'rgba(255,255,255,0.3)'}`,
+                      border: `1.5px solid ${selected ? 'var(--accent-cyan)' : 'var(--accent-cyan-border)'}`,
                       borderRadius: '50%',
-                      background: selected ? 'rgba(var(--mx-primary-rgb, 0,132,255), 0.8)' : 'none',
+                      background: selected ? 'var(--accent-cyan)' : 'none',
                       transition: 'all 0.15s',
                     }}
                   />

src/app/components/message/content/VideoContent.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useCallback, useEffect, useState } from 'react';
+import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import {
   Badge,
   Box,
@@ -32,6 +32,7 @@ import {
 } from '../../../utils/matrix';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { validBlurHash } from '../../../utils/blurHash';
+import { useNearViewport } from '../../../hooks/useNearViewport';
 
 type RenderVideoProps = {
   title: string;
@@ -79,6 +80,9 @@ export const VideoContent = as<'div', VideoContentProps>(
     const [error, setError] = useState(false);
     const [blurred, setBlurred] = useState(markedAsSpoiler ?? false);
 
+    const sentinelRef = useRef<HTMLDivElement>(null);
+    const nearViewport = useNearViewport(sentinelRef);
+
     const [srcState, loadSrc] = useAsyncCallback(
       useCallback(async () => {
         const mediaUrl = mxcUrlToHttp(mx, url, useAuthentication);
@@ -106,11 +110,12 @@ export const VideoContent = as<'div', VideoContentProps>(
     };
 
     useEffect(() => {
-      if (autoPlay) loadSrc().catch(() => undefined);
-    }, [autoPlay, loadSrc]);
+      if (autoPlay && nearViewport) loadSrc().catch(() => undefined);
+    }, [autoPlay, nearViewport, loadSrc]);
 
     return (
       <Box className={classNames(css.RelativeBase, className)} {...props} ref={ref}>
+        <div ref={sentinelRef} style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }} />
         {typeof blurHash === 'string' && !load && (
           <BlurhashCanvas
             style={{ width: '100%', height: '100%' }}

src/app/components/message/layout/layout.css.ts

@@ -110,10 +110,15 @@ export type MessageBaseVariants = RecipeVariants<typeof MessageBase>;
 
 // ── Mention pulse animation ───────────────────────────────────────────────────
 
+// Animates only `box-shadow` — NOT `transform`. A self-sent @mention message
+// carries both this class and `MsgAppearClass` (which animates a scale), and two
+// animations on the same element cannot share the `transform` property: the
+// later one wins and the other is silently dropped. Pulsing the glow alone keeps
+// both effects working. (The previous scale(1.003) was imperceptible anyway.)
 const mentionPulseKeyframes = keyframes({
-  '0%': { transform: 'scale(1)', boxShadow: 'none' },
-  '30%': { transform: 'scale(1.003)', boxShadow: `0 0 8px ${color.Warning.Main}` },
-  '100%': { transform: 'scale(1)', boxShadow: 'none' },
+  '0%': { boxShadow: 'none' },
+  '30%': { boxShadow: `0 0 8px ${color.Warning.Main}` },
+  '100%': { boxShadow: 'none' },
 });
 
 /**

src/app/components/page/style.css.ts

@@ -7,9 +7,15 @@ export const PageNav = recipe({
     size: {
       '400': {
         width: toRem(256),
+        '@media': {
+          '(max-width: 750px)': { width: '100%' },
+        },
       },
       '300': {
         width: toRem(222),
+        '@media': {
+          '(max-width: 750px)': { width: '100%' },
+        },
       },
     },
   },
@@ -111,6 +117,7 @@ export const PageHeroSection = style([
   },
 ]);
 
+
 export const PageContentCenter = style([
   DefaultReset,
   {

src/app/components/read-receipt-avatars/ReadReceiptAvatars.css.ts

@@ -0,0 +1,24 @@
+import { style } from '@vanilla-extract/css';
+import { config } from 'folds';
+
+// Hover/focus emphasis driven by CSS rather than JS style mutation, matching
+// how every other interactive element in the app handles hover state.
+export const ReceiptTrigger = style({
+  background: 'none',
+  border: 'none',
+  cursor: 'pointer',
+  padding: 0,
+  marginLeft: 'auto',
+  marginTop: config.space.S100,
+  display: 'flex',
+  alignItems: 'center',
+  gap: config.space.S100,
+  opacity: config.opacity.P500,
+  transition: 'opacity 150ms ease-in-out, transform 150ms ease-in-out',
+  selectors: {
+    '&:hover, &:focus-visible': {
+      opacity: 1,
+      transform: 'scale(1.04)',
+    },
+  },
+});

src/app/components/read-receipt-avatars/ReadReceiptAvatars.tsx

@@ -1,6 +1,16 @@
 import React, { useState } from 'react';
 import { Room } from 'matrix-js-sdk';
-import { Icon, Icons, Modal, Overlay, OverlayBackdrop, OverlayCenter, Text, color } from 'folds';
+import {
+  Icon,
+  Icons,
+  Modal,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  Text,
+  color,
+  config,
+} from 'folds';
 import FocusTrap from 'focus-trap-react';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useSetting } from '../../state/hooks/settings';
@@ -12,6 +22,8 @@ import { UserAvatar } from '../user-avatar';
 import { StackedAvatar } from '../stacked-avatar';
 import { EventReaders } from '../event-readers';
 import { stopPropagation } from '../../utils/keyboard';
+import { useModalStyle } from '../../hooks/useModalStyle';
+import * as css from './ReadReceiptAvatars.css';
 
 const MAX_DISPLAY = 5;
 
@@ -28,6 +40,7 @@ export function ReadReceiptAvatars({
   const useAuthentication = useMediaAuthentication();
   const [open, setOpen] = useState(false);
   const [lotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');
+  const modalStyle = useModalStyle(360);
 
   if (userIds.length === 0) return null;
 
@@ -51,7 +64,7 @@ export function ReadReceiptAvatars({
               escapeDeactivates: stopPropagation,
             }}
           >
-            <Modal variant="Surface" size="300">
+            <Modal variant="Surface" size="300" style={modalStyle}>
               <EventReaders room={room} eventId={eventId} requestClose={() => setOpen(false)} />
             </Modal>
           </FocusTrap>
@@ -62,28 +75,7 @@ export function ReadReceiptAvatars({
         onClick={() => setOpen(true)}
         title={tooltipNames}
         aria-label={tooltipNames}
-        className="receipt-pill-btn"
-        style={{
-          background: 'none',
-          border: 'none',
-          cursor: 'pointer',
-          padding: 0,
-          marginLeft: 'auto',
-          marginTop: '4px',
-          display: 'flex',
-          alignItems: 'center',
-          gap: '4px',
-          opacity: 0.85,
-          transition: 'opacity 0.15s, transform 0.15s',
-        }}
-        onMouseEnter={(e) => {
-          e.currentTarget.style.opacity = '1';
-          e.currentTarget.style.transform = 'scale(1.04)';
-        }}
-        onMouseLeave={(e) => {
-          e.currentTarget.style.opacity = '0.85';
-          e.currentTarget.style.transform = 'scale(1)';
-        }}
+        className={css.ReceiptTrigger}
       >
         {/* Pill wrapper ensures visibility on any wallpaper/background */}
         <span
@@ -93,10 +85,12 @@ export function ReadReceiptAvatars({
             backgroundColor: lotusTerminal
               ? 'rgba(0,212,255,0.07)'
               : color.SurfaceVariant.Container,
-            border: lotusTerminal ? '1px solid rgba(0,212,255,0.30)' : '1px solid transparent',
+            border: lotusTerminal
+              ? `${config.borderWidth.B300} solid rgba(0,212,255,0.30)`
+              : `${config.borderWidth.B300} solid transparent`,
             boxShadow: lotusTerminal ? '0 0 10px rgba(0,212,255,0.12)' : 'none',
-            borderRadius: '999px',
-            padding: '2px 6px',
+            borderRadius: config.radii.Pill,
+            padding: `${config.space.S100} ${config.space.S200}`,
             gap: '0px',
           }}
         >

src/app/components/room-topic-viewer/RoomTopicViewer.tsx

@@ -3,6 +3,7 @@ import parse from 'html-react-parser';
 import { as, Box, Header, Icon, IconButton, Icons, Modal, Scroll, Text } from 'folds';
 import classNames from 'classnames';
 import Linkify from 'linkify-react';
+import { useModalStyle } from '../../hooks/useModalStyle';
 import * as css from './style.css';
 import { LINKIFY_OPTS, scaleSystemEmoji } from '../../plugins/react-custom-html-parser';
 import { sanitizeCustomHtml } from '../../utils/sanitize';
@@ -17,6 +18,7 @@ export const RoomTopicViewer = as<
   }
 >(({ name, topic, requestClose, className, ...props }, ref) => {
   const topicStr = typeof topic === 'string' ? topic : topic.topic;
+  const modalStyle = useModalStyle(480);
   const isFormatted =
     typeof topic !== 'string' &&
     topic.format === 'org.matrix.custom.html' &&
@@ -28,6 +30,7 @@ export const RoomTopicViewer = as<
       flexHeight
       className={classNames(css.ModalFlex, className)}
       aria-labelledby="room-topic-title"
+      style={modalStyle}
       {...props}
       ref={ref}
     >

src/app/components/seasonal/Seasonal.css.ts

@@ -0,0 +1,136 @@
+import { keyframes } from '@vanilla-extract/css';
+
+/** Generic fall: particles drop from top to bottom with a slight rotate. */
+export const animSeasonFall = keyframes({
+  '0%': { transform: 'translateY(-20px) translateX(0) rotate(0deg)', opacity: '0' },
+  '5%': { opacity: '1' },
+  '90%': { opacity: '0.8' },
+  '100%': { transform: 'translateY(110vh) translateX(25px) rotate(360deg)', opacity: '0' },
+});
+
+/** Leaf fall: exaggerated horizontal sway as the leaf tumbles down. */
+export const animLeafFall = keyframes({
+  '0%': { transform: 'translateY(-20px) translateX(0) rotate(-20deg)', opacity: '0' },
+  '8%': { opacity: '0.85' },
+  '25%': { transform: 'translateY(25vh) translateX(35px) rotate(40deg)' },
+  '50%': { transform: 'translateY(50vh) translateX(-25px) rotate(130deg)' },
+  '75%': { transform: 'translateY(75vh) translateX(45px) rotate(260deg)' },
+  '92%': { opacity: '0.6' },
+  '100%': { transform: 'translateY(110vh) translateX(5px) rotate(380deg)', opacity: '0' },
+});
+
+/** Float up: hearts / embers rise from the bottom. */
+export const animFloatUp = keyframes({
+  '0%': { transform: 'translateY(0) scale(0.6) translateX(0)', opacity: '0' },
+  '8%': { opacity: '0.9' },
+  '50%': { transform: 'translateY(-50vh) scale(1) translateX(15px)' },
+  '85%': { opacity: '0.4' },
+  '100%': { transform: 'translateY(-105vh) scale(1.3) translateX(-10px)', opacity: '0' },
+});
+
+/** Bob: lanterns gently rise and fall with a slight tilt. */
+export const animBob = keyframes({
+  '0%': { transform: 'translateY(0px) rotate(-4deg)' },
+  '50%': { transform: 'translateY(-18px) rotate(4deg)' },
+  '100%': { transform: 'translateY(0px) rotate(-4deg)' },
+});
+
+/** Lantern tassel sway (used on the tassel element only). */
+export const animTasselSway = keyframes({
+  '0%': { transform: 'rotate(-8deg)' },
+  '50%': { transform: 'rotate(8deg)' },
+  '100%': { transform: 'rotate(-8deg)' },
+});
+
+/** Glitch jitter: rapid position jumps that feel like a signal error. */
+export const animGlitch = keyframes({
+  '0%': { transform: 'translate(0, 0)' },
+  '2%': { transform: 'translate(-4px, 2px)' },
+  '4%': { transform: 'translate(4px, -2px)' },
+  '6%': { transform: 'translate(0, 0)' },
+  '48%': { transform: 'translate(0, 0)' },
+  '50%': { transform: 'translate(3px, -3px)' },
+  '52%': { transform: 'translate(-3px, 3px)' },
+  '54%': { transform: 'translate(0, 0)' },
+  '78%': { transform: 'translate(0, 0)' },
+  '80%': { transform: 'translate(-5px, 1px)' },
+  '82%': { transform: 'translate(0, 0)' },
+  '100%': { transform: 'translate(0, 0)' },
+});
+
+/** Glitch color: hue + saturation spikes that look like a corrupted signal. */
+export const animGlitchColor = keyframes({
+  '0%': { filter: 'hue-rotate(0deg) saturate(1)' },
+  '8%': { filter: 'hue-rotate(180deg) saturate(3)' },
+  '9%': { filter: 'hue-rotate(0deg) saturate(1)' },
+  '55%': { filter: 'hue-rotate(0deg) saturate(1)' },
+  '57%': { filter: 'hue-rotate(90deg) saturate(2)' },
+  '58%': { filter: 'hue-rotate(0deg) saturate(1)' },
+  '80%': { filter: 'hue-rotate(0deg) saturate(1)' },
+  '82%': { filter: 'hue-rotate(270deg) saturate(2.5)' },
+  '83%': { filter: 'hue-rotate(0deg) saturate(1)' },
+  '100%': { filter: 'hue-rotate(0deg) saturate(1)' },
+});
+
+/** Glitch scanline: a horizontal band sweeps across, flickering. */
+export const animGlitchScan = keyframes({
+  '0%': { transform: 'translateY(-100%)' },
+  '100%': { transform: 'translateY(100vh)' },
+});
+
+/** Burst: circle expands outward from a point and fades — firework petal. */
+export const animBurst = keyframes({
+  '0%': { transform: 'scale(0) rotate(0deg)', opacity: '1' },
+  '50%': { opacity: '0.7' },
+  '100%': { transform: 'scale(1) rotate(45deg)', opacity: '0' },
+});
+
+/** Firework trail: a small dot rockets upward before bursting. */
+export const animRocket = keyframes({
+  '0%': { transform: 'translateY(0)', opacity: '1' },
+  '100%': { transform: 'translateY(-40vh)', opacity: '0' },
+});
+
+/** Deep space warp: stars streak from center outward. */
+export const animWarp = keyframes({
+  '0%': { transform: 'scale(0.05) translate(0, 0)', opacity: '0' },
+  '10%': { opacity: '1' },
+  '100%': { transform: 'scale(4) translate(0, 0)', opacity: '0' },
+});
+
+/** Arcade scanline flicker. */
+export const animScanline = keyframes({
+  '0%': { opacity: '0.12' },
+  '50%': { opacity: '0.04' },
+  '100%': { opacity: '0.12' },
+});
+
+/** Arcade pixel blink: decorative corner glyphs blink. */
+export const animPixelBlink = keyframes({
+  '0%, 49%': { opacity: '1' },
+  '50%, 100%': { opacity: '0' },
+});
+
+/** Gold shimmer: a shine sweeps across a metallic surface. */
+export const animGoldShimmer = keyframes({
+  '0%': { backgroundPosition: '-300% 0' },
+  '100%': { backgroundPosition: '300% 0' },
+});
+
+/** Clover drift: gentle fall with a slow spin. */
+export const animCloverDrift = keyframes({
+  '0%': { transform: 'translateY(-20px) rotate(0deg)', opacity: '0' },
+  '5%': { opacity: '0.7' },
+  '90%': { opacity: '0.5' },
+  '100%': { transform: 'translateY(110vh) rotate(720deg)', opacity: '0' },
+});
+
+/** Earth Day leaf sway: gentle horizontal oscillation for ambient leaf particles. */
+export const animEarthLeafDrift = keyframes({
+  '0%': { transform: 'translateY(-10px) translateX(0) rotate(0deg)', opacity: '0' },
+  '8%': { opacity: '0.6' },
+  '30%': { transform: 'translateY(30vh) translateX(20px) rotate(90deg)' },
+  '60%': { transform: 'translateY(60vh) translateX(-15px) rotate(200deg)' },
+  '90%': { opacity: '0.4' },
+  '100%': { transform: 'translateY(110vh) translateX(10px) rotate(340deg)', opacity: '0' },
+});

src/app/components/seasonal/SeasonalEffect.tsx

@@ -0,0 +1,807 @@
+import React, { useMemo } from 'react';
+import { useAtomValue } from 'jotai';
+import { settingsAtom } from '../../state/settings';
+import {
+  animSeasonFall,
+  animLeafFall,
+  animFloatUp,
+  animBob,
+  animTasselSway,
+  animGoldShimmer,
+  animCloverDrift,
+  animEarthLeafDrift,
+  animWarp,
+  animScanline,
+  animPixelBlink,
+} from './Seasonal.css';
+
+export type SeasonTheme =
+  | 'halloween'
+  | 'christmas'
+  | 'newyear'
+  | 'autumn'
+  | 'aprilfools'
+  | 'lunar'
+  | 'valentines'
+  | 'stpatricks'
+  | 'earthday'
+  | 'deepspace'
+  | 'arcade';
+
+function getActiveSeason(now: Date): SeasonTheme | null {
+  const m = now.getMonth() + 1; // 1-12
+  const d = now.getDate();
+
+  // New Year takes highest priority (Dec 31 – Jan 2)
+  if ((m === 12 && d === 31) || (m === 1 && d <= 2)) return 'newyear';
+  // Valentine's Day (Feb 10–15)
+  if (m === 2 && d >= 10 && d <= 15) return 'valentines';
+  // St. Patrick's Day (March 15–18)
+  if (m === 3 && d >= 15 && d <= 18) return 'stpatricks';
+  // April Fool's (April 1)
+  if (m === 4 && d === 1) return 'aprilfools';
+  // Earth Day (April 20–23)
+  if (m === 4 && d >= 20 && d <= 23) return 'earthday';
+  // Lunar New Year (Jan 22 – Feb 5, approximate fixed window)
+  if ((m === 1 && d >= 22) || (m === 2 && d <= 5)) return 'lunar';
+  // International Video Game Day (Sept 12)
+  if (m === 9 && d === 12) return 'arcade';
+  // World Space Week (Oct 4–10)
+  if (m === 10 && d >= 4 && d <= 10) return 'deepspace';
+  // Halloween (Oct 15 – Nov 1)
+  if ((m === 10 && d >= 15) || (m === 11 && d === 1)) return 'halloween';
+  // Christmas (Dec 10–30)
+  if (m === 12 && d >= 10) return 'christmas';
+  // Autumn (Sept 21 – Oct 31, excluding Halloween/Deep Space windows above)
+  if ((m === 9 && d >= 21) || (m === 10 && d <= 14)) return 'autumn';
+
+  return null;
+}
+
+// ─── Individual theme overlays ────────────────────────────────────────────────
+
+function HalloweenOverlay({ reduced }: { reduced: boolean }) {
+  const particles = Array.from({ length: 22 });
+  return (
+    <>
+      {/* Dark purple ambient tint */}
+      <div
+        aria-hidden="true"
+        style={{
+          position: 'absolute',
+          inset: 0,
+          backgroundColor: 'rgba(25,0,45,0.22)',
+          backgroundImage:
+            'radial-gradient(ellipse at 50% 50%, rgba(100,0,180,0.08) 0%, transparent 70%)',
+        }}
+      />
+      {/* Spider web corners */}
+      <div
+        aria-hidden="true"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: '160px',
+          height: '160px',
+          backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><g stroke='rgba(180,120,255,0.35)' stroke-width='0.7' fill='none'><line x1='0' y1='0' x2='80' y2='80'/><line x1='40' y1='0' x2='80' y2='80'/><line x1='80' y1='0' x2='80' y2='80'/><line x1='0' y1='40' x2='80' y2='80'/><line x1='0' y1='80' x2='80' y2='80'/><ellipse cx='80' cy='80' rx='20' ry='20'/><ellipse cx='80' cy='80' rx='40' ry='40'/><ellipse cx='80' cy='80' rx='60' ry='60'/><ellipse cx='80' cy='80' rx='80' ry='80'/></g></svg>")`,
+          backgroundRepeat: 'no-repeat',
+          opacity: 0.7,
+        }}
+      />
+      {/* Falling purple/orange particles */}
+      {!reduced &&
+        particles.map((_, i) => {
+          const isOrange = i % 3 === 0;
+          const size = 4 + (i % 3) * 2;
+          const left = (i * 4597 + 137) % 100;
+          const duration = 8 + (i % 7) * 1.5;
+          const delay = (i * 0.45) % 7;
+          return (
+            <div
+              key={i}
+              aria-hidden="true"
+              style={{
+                position: 'absolute',
+                top: '-8px',
+                left: `${left}%`,
+                width: `${size}px`,
+                height: `${size}px`,
+                borderRadius: '50%',
+                backgroundColor: isOrange ? 'rgba(255,100,0,0.75)' : 'rgba(160,0,255,0.7)',
+                boxShadow: isOrange ? '0 0 8px rgba(255,100,0,0.5)' : '0 0 8px rgba(160,0,255,0.5)',
+                animation: `${animSeasonFall} ${duration}s ease-in ${delay}s infinite`,
+              }}
+            />
+          );
+        })}
+    </>
+  );
+}
+
+function ChristmasOverlay({ reduced }: { reduced: boolean }) {
+  const flakes = Array.from({ length: 28 });
+  return (
+    <>
+      <div
+        aria-hidden="true"
+        style={{
+          position: 'absolute',
+          inset: 0,
+          backgroundImage:
+            'radial-gradient(ellipse at 50% 0%, rgba(220,240,255,0.06) 0%, transparent 60%)',
+        }}
+      />
+      {!reduced &&
+        flakes.map((_, i) => {
+          const size = 3 + (i % 4) * 2;
+          const left = (i * 3571 + 251) % 100;
+          const duration = 10 + (i % 8) * 2;
+          const delay = (i * 0.55) % 10;
+          const drift = ((i % 5) - 2) * 12;
+          return (
+            <div
+              key={i}
+              aria-hidden="true"
+              style={{
+                position: 'absolute',
+                top: '-10px',
+                left: `${left}%`,
+                width: `${size}px`,
+                height: `${size}px`,
+                borderRadius: '50%',
+                backgroundColor: 'rgba(255,255,255,0.82)',
+                boxShadow: '0 0 4px rgba(200,230,255,0.6)',
+                animation: `${animSeasonFall} ${duration}s ease-in ${delay}s infinite`,
+                transform: `translateX(${drift}px)`,
+              }}
+            />
+          );
+        })}
+    </>
+  );
+}
+
+// Replaced flashing burst rays with gentle falling confetti
+function NewYearOverlay({ reduced }: { reduced: boolean }) {
+  const confetti = Array.from({ length: 24 });
+  const colors = ['#ffd700', '#ff4466', '#00d4ff', '#aa44ff', '#ff8800', '#ffffff'];
+
+  return (
+    <>
+      <div
+        aria-hidden="true"
+        style={{
+          position: 'absolute',
+          inset: 0,
+          backgroundColor: 'rgba(10,5,0,0.10)',
+          backgroundImage:
+            'radial-gradient(ellipse at 50% 50%, rgba(255,200,0,0.04) 0%, transparent 70%)',
+        }}
+      />
+      {/* Gentle falling confetti */}
+      {!reduced &&
+        confetti.map((_, i) => {
+          const c = colors[i % colors.length];
+          const left = (i * 4597 + 137) % 100;
+          const size = 3 + (i % 3) * 2;
+          const duration = 8 + (i % 7) * 1.5;
+          const delay = (i * 0.4) % 8;
+          return (
+            <div
+              key={i}
+              aria-hidden="true"
+              style={{
+                position: 'absolute',
+                top: '-8px',
+                left: `${left}%`,
+                width: `${size}px`,
+                height: `${size}px`,
+                borderRadius: i % 2 === 0 ? '50%' : '1px',
+                backgroundColor: c,
+                boxShadow: `0 0 ${size + 2}px ${c}`,
+                animation: `${animSeasonFall} ${duration}s ease-in ${delay}s infinite`,
+                opacity: 0.7 + (i % 3) * 0.1,
+              }}
+            />
+          );
+        })}
+      {/* Slow gold shimmer */}
+      <div
+        aria-hidden="true"
+        style={{
+          position: 'absolute',
+          inset: 0,
+          backgroundImage:
+            'linear-gradient(105deg, transparent 30%, rgba(255,215,0,0.05) 50%, transparent 70%)',
+          backgroundSize: '200% 100%',
+          animation: reduced ? 'none' : `${animGoldShimmer} 5s linear infinite`,
+        }}
+      />
+    </>
+  );
+}
+
+function AutumnOverlay({ reduced }: { reduced: boolean }) {
+  const leaves = Array.from({ length: 18 });
+  const colors = [
+    'rgba(220,80,20,0.75)',
+    'rgba(200,120,0,0.7)',
+    'rgba(180,50,10,0.7)',
+    'rgba(230,150,0,0.65)',
+    'rgba(160,80,0,0.6)',
+  ];
+  return (
+    <>
+      <div
+        aria-hidden="true"
+        style={{
+          position: 'absolute',
+          inset: 0,
+          backgroundImage:
+            'radial-gradient(ellipse at 50% 100%, rgba(180,80,0,0.06) 0%, transparent 60%)',
+        }}
+      />
+      {!reduced &&
+        leaves.map((_, i) => {
+          const left = (i * 5381 + 179) % 100;
+          const duration = 12 + (i % 6) * 2;
+          const delay = (i * 0.65) % 12;
+          const size = 10 + (i % 4) * 4;
+          const col = colors[i % colors.length];
+          return (
+            <div
+              key={i}
+              aria-hidden="true"
+              style={{
+                position: 'absolute',
+                top: '-15px',
+                left: `${left}%`,
+                width: `${size}px`,
+                height: `${size * 0.7}px`,
+                borderRadius: '50% 0 50% 0',
+                backgroundColor: col,
+                boxShadow: `0 0 4px ${col}`,
+                animation: `${animLeafFall} ${duration}s ease-in ${delay}s infinite`,
+              }}
+            />
+          );
+        })}
+    </>
+  );
+}
+
+// Replaced aggressive glitch with playful confetti rain
+function AprilFoolsOverlay({ reduced }: { reduced: boolean }) {
+  const particles = Array.from({ length: 20 });
+  const symbols = ['?', '!', '¿', '‽', '?', '!'];
+  const colors = [
+    'rgba(255,80,80,0.55)',
+    'rgba(255,200,0,0.55)',
+    'rgba(80,200,80,0.55)',
+    'rgba(80,80,255,0.55)',
+    'rgba(200,80,200,0.55)',
+    'rgba(80,200,200,0.55)',
+  ];
+
+  return (
+    <>
+      {/* Subtle rainbow stripe along top edge */}
+      <div
+        aria-hidden="true"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          height: '3px',
+          backgroundImage:
+            'linear-gradient(90deg, rgba(255,0,0,0.4), rgba(255,165,0,0.4), rgba(255,255,0,0.4), rgba(0,200,0,0.4), rgba(0,0,255,0.4), rgba(128,0,128,0.4))',
+          opacity: 0.7,
+        }}
+      />
+      {/* Gentle falling punctuation symbols */}
+      {!reduced &&
+        particles.map((_, i) => {
+          const left = (i * 5381 + 179) % 100;
+          const duration = 11 + (i % 5) * 2.5;
+          const delay = (i * 0.55) % 10;
+          const col = colors[i % colors.length];
+          const sym = symbols[i % symbols.length];
+          const size = 12 + (i % 3) * 5;
+          return (
+            <div
+              key={i}
+              aria-hidden="true"
+              style={{
+                position: 'absolute',
+                top: '-20px',
+                left: `${left}%`,
+                fontSize: `${size}px`,
+                color: col,
+                fontWeight: 700,
+                fontFamily: 'monospace',
+                animation: `${animSeasonFall} ${duration}s ease-in ${delay}s infinite`,
+                userSelect: 'none',
+              }}
+            >
+              {sym}
+            </div>
+          );
+        })}
+    </>
+  );
+}
+
+// Reduced to 4 lanterns, subtler tint and shimmer
+function LunarNewYearOverlay({ reduced }: { reduced: boolean }) {
+  const lanterns = Array.from({ length: 4 }); // was 9
+  return (
+    <>
+      {/* Very subtle red silk tint */}
+      <div
+        aria-hidden="true"
+        style={{
+          position: 'absolute',
+          inset: 0,
+          backgroundColor: 'rgba(140,0,0,0.05)',
+          backgroundImage: [
+            'repeating-linear-gradient(45deg, rgba(200,20,0,0.015) 0px, rgba(200,20,0,0.015) 1px, transparent 1px, transparent 8px)',
+            'repeating-linear-gradient(135deg, rgba(200,20,0,0.015) 0px, rgba(200,20,0,0.015) 1px, transparent 1px, transparent 8px)',
+          ].join(','),
+        }}
+      />
+      {/* Slow gold shimmer */}
+      <div
+        aria-hidden="true"
+        style={{
+          position: 'absolute',
+          inset: 0,
+          backgroundImage:
+            'linear-gradient(100deg, transparent 25%, rgba(255,200,0,0.05) 45%, rgba(255,220,50,0.07) 50%, rgba(255,200,0,0.05) 55%, transparent 75%)',
+          backgroundSize: '300% 100%',
+          animation: reduced ? 'none' : `${animGoldShimmer} 8s linear infinite`,
+        }}
+      />
+      {/* 4 floating lanterns */}
+      {lanterns.map((_, i) => {
+        const left = 10 + ((i * 4603 + 311) % 75);
+        const top = 10 + ((i * 2311 + 97) % 50);
+        const duration = 3.5 + (i % 4) * 0.7;
+        const delay = i * 0.9;
+        return (
+          <div
+            key={i}
+            aria-hidden="true"
+            style={{
+              position: 'absolute',
+              left: `${left}%`,
+              top: `${top}%`,
+              animation: reduced
+                ? 'none'
+                : `${animBob} ${duration}s ease-in-out ${delay}s infinite`,
+            }}
+          >
+            <div
+              style={{
+                width: '18px',
+                height: '5px',
+                backgroundColor: '#ffd700',
+                borderRadius: '2px',
+                margin: '0 auto',
+                boxShadow: '0 0 4px rgba(255,215,0,0.6)',
+              }}
+            />
+            <div
+              style={{
+                width: '24px',
+                height: '32px',
+                backgroundColor: '#cc0000',
+                borderRadius: '50%',
+                border: '1.5px solid #ffd700',
+                boxShadow: '0 0 14px rgba(200,0,0,0.5), inset 0 0 10px rgba(255,200,0,0.2)',
+                margin: '1px auto',
+              }}
+            />
+            <div
+              style={{
+                width: '18px',
+                height: '5px',
+                backgroundColor: '#ffd700',
+                borderRadius: '2px',
+                margin: '0 auto',
+              }}
+            />
+            <div
+              style={{
+                width: '2px',
+                height: '14px',
+                backgroundColor: '#ffd700',
+                margin: '0 auto',
+                animation: reduced
+                  ? 'none'
+                  : `${animTasselSway} ${duration * 0.6}s ease-in-out ${delay}s infinite`,
+                transformOrigin: 'top center',
+              }}
+            />
+          </div>
+        );
+      })}
+    </>
+  );
+}
+
+function ValentinesOverlay({ reduced }: { reduced: boolean }) {
+  const hearts = Array.from({ length: 18 });
+  const colors = [
+    'rgba(255,100,140,0.8)',
+    'rgba(255,150,180,0.65)',
+    'rgba(220,70,110,0.7)',
+    'rgba(255,180,200,0.55)',
+  ];
+  return (
+    <>
+      <div
+        aria-hidden="true"
+        style={{
+          position: 'absolute',
+          inset: 0,
+          backgroundImage:
+            'radial-gradient(ellipse at 50% 100%, rgba(255,100,140,0.06) 0%, transparent 55%)',
+        }}
+      />
+      {!reduced &&
+        hearts.map((_, i) => {
+          const left = 3 + ((i * 6271 + 443) % 94);
+          const duration = 9 + (i % 6) * 1.8;
+          const delay = (i * 0.6) % 9;
+          const size = 14 + (i % 4) * 5;
+          const col = colors[i % colors.length];
+          return (
+            <div
+              key={i}
+              aria-hidden="true"
+              style={{
+                position: 'absolute',
+                bottom: '-20px',
+                left: `${left}%`,
+                fontSize: `${size}px`,
+                color: col,
+                filter: 'drop-shadow(0 0 4px rgba(255,100,140,0.4))',
+                animation: `${animFloatUp} ${duration}s ease-in ${delay}s infinite`,
+                userSelect: 'none',
+              }}
+            >
+              ♥
+            </div>
+          );
+        })}
+    </>
+  );
+}
+
+function StPatricksOverlay({ reduced }: { reduced: boolean }) {
+  const clovers = Array.from({ length: 18 });
+  return (
+    <>
+      <div
+        aria-hidden="true"
+        style={{
+          position: 'absolute',
+          inset: 0,
+          backgroundImage: [
+            'radial-gradient(ellipse at 50% 0%, rgba(0,160,60,0.07) 0%, transparent 50%)',
+            'radial-gradient(ellipse at 50% 100%, rgba(0,130,50,0.05) 0%, transparent 40%)',
+          ].join(','),
+        }}
+      />
+      <div
+        aria-hidden="true"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          height: '3px',
+          backgroundImage:
+            'linear-gradient(90deg, transparent 0%, #ffd700 20%, #fff4a0 40%, #ffd700 60%, transparent 100%)',
+          backgroundSize: '300% 100%',
+          animation: reduced ? 'none' : `${animGoldShimmer} 3s linear infinite`,
+        }}
+      />
+      {!reduced &&
+        clovers.map((_, i) => {
+          const left = (i * 4129 + 223) % 100;
+          const duration = 14 + (i % 6) * 2;
+          const delay = (i * 0.7) % 12;
+          const size = 14 + (i % 3) * 6;
+          return (
+            <div
+              key={i}
+              aria-hidden="true"
+              style={{
+                position: 'absolute',
+                top: '-20px',
+                left: `${left}%`,
+                fontSize: `${size}px`,
+                opacity: 0.45 + (i % 3) * 0.1,
+                filter: 'drop-shadow(0 0 3px rgba(0,180,60,0.3))',
+                animation: `${animCloverDrift} ${duration}s linear ${delay}s infinite`,
+                userSelect: 'none',
+              }}
+            >
+              ☘
+            </div>
+          );
+        })}
+    </>
+  );
+}
+
+function EarthDayOverlay({ reduced }: { reduced: boolean }) {
+  const leaves = Array.from({ length: 16 });
+  const leafEmoji = ['🌿', '🍃', '🌱', '🍀'];
+  return (
+    <>
+      <div
+        aria-hidden="true"
+        style={{
+          position: 'absolute',
+          inset: 0,
+          backgroundImage: [
+            'radial-gradient(ellipse at 30% 70%, rgba(60,160,60,0.07) 0%, transparent 50%)',
+            'radial-gradient(ellipse at 70% 30%, rgba(100,180,80,0.05) 0%, transparent 45%)',
+          ].join(','),
+        }}
+      />
+      <div
+        aria-hidden="true"
+        style={{
+          position: 'absolute',
+          left: 0,
+          top: 0,
+          bottom: 0,
+          width: '3px',
+          backgroundImage:
+            'linear-gradient(180deg, transparent 0%, rgba(60,160,60,0.4) 20%, rgba(80,180,60,0.6) 50%, rgba(60,160,60,0.4) 80%, transparent 100%)',
+        }}
+      />
+      {!reduced &&
+        leaves.map((_, i) => {
+          const left = 3 + ((i * 5023 + 317) % 92);
+          const duration = 13 + (i % 5) * 2;
+          const delay = (i * 0.75) % 11;
+          const size = 14 + (i % 3) * 5;
+          return (
+            <div
+              key={i}
+              aria-hidden="true"
+              style={{
+                position: 'absolute',
+                top: '-20px',
+                left: `${left}%`,
+                fontSize: `${size}px`,
+                opacity: 0.5 + (i % 3) * 0.1,
+                animation: `${animEarthLeafDrift} ${duration}s ease-in ${delay}s infinite`,
+                userSelect: 'none',
+              }}
+            >
+              {leafEmoji[i % leafEmoji.length]}
+            </div>
+          );
+        })}
+    </>
+  );
+}
+
+function DeepSpaceOverlay({ reduced }: { reduced: boolean }) {
+  const stars = Array.from({ length: 24 });
+  return (
+    <>
+      <div
+        aria-hidden="true"
+        style={{
+          position: 'absolute',
+          inset: 0,
+          backgroundColor: 'rgba(0,0,8,0.3)',
+          backgroundImage: [
+            'radial-gradient(ellipse at 30% 40%, rgba(80,0,180,0.10) 0%, transparent 50%)',
+            'radial-gradient(ellipse at 70% 60%, rgba(0,60,180,0.10) 0%, transparent 50%)',
+            'radial-gradient(ellipse at 50% 20%, rgba(120,0,200,0.07) 0%, transparent 40%)',
+          ].join(','),
+        }}
+      />
+      {!reduced &&
+        stars.map((_, i) => {
+          const angle = (i / stars.length) * 360;
+          const duration = 2.5 + (i % 5) * 0.4;
+          const delay = (i * 0.18) % 2.5;
+          const period = 3 + (i % 4) * 0.5;
+          const size = 1 + (i % 3);
+          const starColors = [
+            'rgba(200,180,255,0.9)',
+            'rgba(150,200,255,0.8)',
+            'rgba(255,255,255,0.7)',
+          ];
+          return (
+            <div
+              key={i}
+              aria-hidden="true"
+              style={{
+                position: 'absolute',
+                left: '50%',
+                top: '50%',
+                width: `${80 + i * 6}px`,
+                height: `${size}px`,
+                backgroundColor: starColors[i % starColors.length],
+                transformOrigin: '0 50%',
+                transform: `rotate(${angle}deg)`,
+                boxShadow: `0 0 ${size * 2}px ${starColors[i % starColors.length]}`,
+                animation: `${animWarp} ${duration}s ease-out ${delay}s ${period}s infinite`,
+                opacity: 0,
+              }}
+            />
+          );
+        })}
+    </>
+  );
+}
+
+function ArcadeOverlay({ reduced }: { reduced: boolean }) {
+  return (
+    <>
+      <div
+        aria-hidden="true"
+        style={{
+          position: 'absolute',
+          inset: 0,
+          backgroundImage:
+            'repeating-linear-gradient(0deg, rgba(0,0,0,0.12) 0px, rgba(0,0,0,0.12) 1px, transparent 1px, transparent 3px)',
+          animation: reduced ? 'none' : `${animScanline} 3s ease-in-out infinite`,
+        }}
+      />
+      {(['0,0', '0,auto', 'auto,0', 'auto,auto'] as const).map((corner, i) => {
+        const [t, b] = corner.split(',');
+        return (
+          <div
+            key={i}
+            aria-hidden="true"
+            style={{
+              position: 'absolute',
+              top: t === '0' ? '8px' : undefined,
+              bottom: b === '0' ? '8px' : undefined,
+              left: i % 2 === 0 ? '8px' : undefined,
+              right: i % 2 === 1 ? '8px' : undefined,
+              fontFamily: 'monospace',
+              fontSize: '11px',
+              color: 'rgba(0,255,136,0.5)',
+              letterSpacing: '0.05em',
+              animation: reduced ? 'none' : `${animPixelBlink} ${1 + i * 0.3}s step-end infinite`,
+              userSelect: 'none',
+            }}
+          >
+            {['[■]', '[■]', '[■]', '[■]'][i]}
+          </div>
+        );
+      })}
+      <div
+        aria-hidden="true"
+        style={{
+          position: 'absolute',
+          bottom: '16px',
+          left: '50%',
+          transform: 'translateX(-50%)',
+          fontFamily: 'monospace',
+          fontSize: '12px',
+          letterSpacing: '0.2em',
+          color: 'rgba(255,220,0,0.4)',
+          animation: reduced ? 'none' : `${animPixelBlink} 1.2s step-end infinite`,
+          userSelect: 'none',
+          whiteSpace: 'nowrap',
+        }}
+      >
+        — INSERT COIN —
+      </div>
+      <div
+        aria-hidden="true"
+        style={{
+          position: 'absolute',
+          inset: 0,
+          backgroundImage:
+            'radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(0,0,0,0.35) 100%)',
+        }}
+      />
+    </>
+  );
+}
+
+// ─── Overlay content map (shared between SeasonalOverlay and SeasonalPreview) ──
+
+function buildOverlayContent(theme: SeasonTheme, reduced: boolean): React.ReactNode {
+  switch (theme) {
+    case 'halloween':
+      return <HalloweenOverlay reduced={reduced} />;
+    case 'christmas':
+      return <ChristmasOverlay reduced={reduced} />;
+    case 'newyear':
+      return <NewYearOverlay reduced={reduced} />;
+    case 'autumn':
+      return <AutumnOverlay reduced={reduced} />;
+    case 'aprilfools':
+      return <AprilFoolsOverlay reduced={reduced} />;
+    case 'lunar':
+      return <LunarNewYearOverlay reduced={reduced} />;
+    case 'valentines':
+      return <ValentinesOverlay reduced={reduced} />;
+    case 'stpatricks':
+      return <StPatricksOverlay reduced={reduced} />;
+    case 'earthday':
+      return <EarthDayOverlay reduced={reduced} />;
+    case 'deepspace':
+      return <DeepSpaceOverlay reduced={reduced} />;
+    case 'arcade':
+      return <ArcadeOverlay reduced={reduced} />;
+    default:
+      return null;
+  }
+}
+
+// ─── Full-screen overlay (fixed position, used in App) ────────────────────────
+
+function SeasonalOverlay({ theme, reduced }: { theme: SeasonTheme; reduced: boolean }) {
+  return (
+    <div
+      aria-hidden="true"
+      style={{
+        position: 'fixed',
+        inset: 0,
+        pointerEvents: 'none',
+        // Below the Night Light overlay (9998) so seasonal particles are tinted
+        // by it, and below modals (9999) so dialogs are never obscured.
+        zIndex: 9997,
+        overflow: 'hidden',
+      }}
+    >
+      {buildOverlayContent(theme, reduced)}
+    </div>
+  );
+}
+
+// ─── Preview overlay (absolute position, contained in a card) ─────────────────
+
+/**
+ * Renders the ambient (reduced-motion) version of a seasonal overlay inside
+ * a parent container. The parent must have `position: relative; overflow: hidden`.
+ */
+export function SeasonalPreview({ theme }: { theme: SeasonTheme }) {
+  return (
+    <div
+      aria-hidden="true"
+      style={{ position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none' }}
+    >
+      {buildOverlayContent(theme, true)}
+    </div>
+  );
+}
+
+// ─── Main exported component ──────────────────────────────────────────────────
+
+export function SeasonalEffect() {
+  const settings = useAtomValue(settingsAtom);
+  const reduced =
+    typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+  const theme = useMemo<SeasonTheme | null>(() => {
+    const override = settings.seasonalThemeOverride ?? 'auto';
+    if (override === 'off') return null;
+    if (override === 'auto') return getActiveSeason(new Date());
+    return override as SeasonTheme;
+  }, [settings.seasonalThemeOverride]);
+
+  if (!theme) return null;
+  // Suppress seasonal overlay when a chat background is active — both running simultaneously
+  // wastes GPU and looks cluttered. The settings UI enforces mutual exclusion on write;
+  // this guard covers any legacy state already persisted.
+  if (settings.chatBackground !== 'none') return null;
+  return <SeasonalOverlay theme={theme} reduced={reduced} />;
+}

src/app/components/upload-card/UploadCardRenderer.tsx

@@ -1,5 +1,17 @@
 import React, { ReactNode, useEffect, useRef, useState } from 'react';
-import { Box, Chip, Icon, IconButton, Icons, Switch, Text, color, config, toRem } from 'folds';
+import {
+  Box,
+  Chip,
+  Icon,
+  IconButton,
+  Icons,
+  Input,
+  Switch,
+  Text,
+  color,
+  config,
+  toRem,
+} from 'folds';
 import { UploadCard, UploadCardError, UploadCardProgress } from './UploadCard';
 import { UploadStatus, UploadSuccess, useBindUploadAtom } from '../../state/upload';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
@@ -353,25 +365,18 @@ export function UploadCardRenderer({
           )}
           {(fileItem.originalFile.type.startsWith('image') ||
             fileItem.originalFile.type.startsWith('video')) && (
-            <input
+            <Input
               type="text"
               placeholder="Add a caption… (optional)"
               value={metadata.caption ?? ''}
-              onChange={(e) => setMetadata(fileItem, { ...metadata, caption: e.target.value })}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                setMetadata(fileItem, { ...metadata, caption: e.target.value })
+              }
               data-caption-input
-              style={{
-                marginTop: '6px',
-                width: '100%',
-                background: 'var(--bg-surface-low)',
-                border: '1px solid var(--bg-surface-border)',
-                borderRadius: '6px',
-                padding: '5px 8px',
-                fontSize: '0.85rem',
-                color: 'var(--text-primary)',
-                outline: 'none',
-                boxSizing: 'border-box',
-                transition: 'border-color 0.15s, box-shadow 0.15s',
-              }}
+              variant="Secondary"
+              size="300"
+              radii="300"
+              style={{ marginTop: config.space.S200, width: '100%' }}
             />
           )}
           <CompressionCheckbox fileItem={fileItem} metadata={metadata} setMetadata={setMetadata} />

src/app/components/url-preview/UrlPreviewCard.tsx

@@ -1651,8 +1651,6 @@ function GenericCard({
   const title = prev['og:title'] ?? '';
   const description = prev['og:description'] ?? '';
   const siteName = typeof prev['og:site_name'] === 'string' ? prev['og:site_name'] : undefined;
-  const domain = getDomain(url);
-  const faviconSrc = `https://www.google.com/s2/favicons?domain=${encodeURIComponent(domain)}&sz=16`;
 
   return (
     <>
@@ -1687,13 +1685,11 @@ function GenericCard({
           priority="300"
         >
           {!thumbUrl && (
-            <img
-              className={previewCss.GenericFaviconImg}
-              src={faviconSrc}
-              alt=""
+            <Icon
+              src={Icons.Link}
+              size="50"
               aria-hidden="true"
-              loading="lazy"
-              style={{ marginRight: '4px', verticalAlign: 'text-bottom' }}
+              style={{ marginRight: '4px', verticalAlign: 'text-bottom', opacity: 0.5 }}
             />
           )}
           {siteName ? `${siteName} | ` : ''}

src/app/components/user-profile/UserHero.tsx

@@ -19,6 +19,7 @@ import { getMxIdLocalPart } from '../../utils/matrix';
 import { BreakWord, LineClamp2, LineClamp3 } from '../../styles/Text.css';
 import { UserPresence } from '../../hooks/useUserPresence';
 import { AvatarPresence, PresenceBadge } from '../presence';
+import { AvatarDecoration } from '../avatar-decoration/AvatarDecoration';
 import { ImageViewer } from '../image-viewer';
 import { stopPropagation } from '../../utils/keyboard';
 import { useSetting } from '../../state/hooks/settings';
@@ -47,27 +48,30 @@ export function UserHero({ userId, avatarUrl, presence }: UserHeroProps) {
         )}
       </div>
       <div className={css.UserHeroAvatarContainer}>
-        <AvatarPresence
-          className={css.UserAvatarContainer}
-          badge={
-            presence && <PresenceBadge presence={presence.presence} status={presence.status} />
-          }
-        >
-          <Avatar
-            as={avatarUrl ? 'button' : 'div'}
-            onClick={avatarUrl ? () => setViewAvatar(avatarUrl) : undefined}
-            className={css.UserHeroAvatar}
-            size="500"
+        <div className={css.UserAvatarContainer}>
+          <AvatarPresence
+            badge={
+              presence && <PresenceBadge presence={presence.presence} status={presence.status} />
+            }
           >
-            <UserAvatar
-              className={css.UserHeroAvatarImg}
-              userId={userId}
-              src={avatarUrl}
-              alt={userId}
-              renderFallback={() => <Icon size="500" src={Icons.User} filled />}
-            />
-          </Avatar>
-        </AvatarPresence>
+            <AvatarDecoration userId={userId} inset={20}>
+              <Avatar
+                as={avatarUrl ? 'button' : 'div'}
+                onClick={avatarUrl ? () => setViewAvatar(avatarUrl) : undefined}
+                className={css.UserHeroAvatar}
+                size="500"
+              >
+                <UserAvatar
+                  className={css.UserHeroAvatarImg}
+                  userId={userId}
+                  src={avatarUrl}
+                  alt={userId}
+                  renderFallback={() => <Icon size="500" src={Icons.User} filled />}
+                />
+              </Avatar>
+            </AvatarDecoration>
+          </AvatarPresence>
+        </div>
         {viewAvatar && (
           <Overlay open backdrop={<OverlayBackdrop />}>
             <OverlayCenter>

src/app/components/user-profile/UserRoomProfile.tsx

@@ -1,5 +1,5 @@
-import { Box, Button, config, Icon, IconButton, Icons, Spinner, Text, toRem } from 'folds';
-import React, { useCallback, useState } from 'react';
+import { Box, Button, color, config, Icon, IconButton, Icons, Spinner, Text, toRem } from 'folds';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { VerificationRequest } from 'matrix-js-sdk/lib/crypto-api';
 import { AsyncState, AsyncStatus, useAsync } from '../../hooks/useAsyncCallback';
@@ -28,10 +28,12 @@ import { Membership } from '../../../types/matrix/room';
 import { useRoomCreators } from '../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../hooks/useRoomPermissions';
 import { useMemberPowerCompare } from '../../hooks/useMemberPowerCompare';
+import { ReportUserModal } from '../../features/room/ReportUserModal';
 import { CreatorChip } from './CreatorChip';
 import { getDirectCreatePath, withSearchParam } from '../../pages/pathUtils';
 import { DirectCreateSearchParams } from '../../pages/paths';
 import { useExtendedProfile } from '../../hooks/useExtendedProfile';
+import { useUserNotes, USER_NOTE_MAX_LENGTH } from '../../hooks/useUserNotes';
 
 type VerifyDeviceButtonProps = {
   userId: string;
@@ -87,7 +89,7 @@ function UserDeviceRow({ userId, device }: UserDeviceRowProps) {
   return (
     <DeviceVerificationStatus crypto={crypto} userId={userId} deviceId={device.deviceId}>
       {(status) => {
-        const color =
+        const deviceColor =
           status === VerificationStatus.Verified
             ? 'var(--tc-positive-normal, #5effc4)'
             : status === VerificationStatus.Unverified
@@ -95,7 +97,7 @@ function UserDeviceRow({ userId, device }: UserDeviceRowProps) {
               : 'var(--tc-surface-low-contrast)';
         return (
           <Box alignItems="Center" gap="200">
-            <Icon size="100" src={Icons.ShieldUser} style={{ color, flexShrink: 0 }} />
+            <Icon size="100" src={Icons.ShieldUser} style={{ color: deviceColor, flexShrink: 0 }} />
             <Box grow="Yes" direction="Column" style={{ minWidth: 0 }}>
               <Text size="T300" truncate>
                 {device.displayName ?? device.deviceId}
@@ -195,7 +197,7 @@ function UserDeviceSessions({ userId }: UserDeviceSessionsProps) {
               style={{
                 paddingTop: config.space.S100,
                 paddingBottom: config.space.S100,
-                borderTop: `${toRem(1)} solid var(--border-surface-variant)`,
+                borderTop: `${toRem(1)} solid ${color.SurfaceVariant.ContainerLine}`,
               }}
             >
               <UserDeviceRow userId={userId} device={device} />
@@ -207,11 +209,79 @@ function UserDeviceSessions({ userId }: UserDeviceSessionsProps) {
   );
 }
 
+function UserPrivateNotes({ userId }: { userId: string }) {
+  const { getNote, setNote } = useUserNotes();
+  const [draft, setDraft] = useState(() => getNote(userId));
+  const [saving, setSaving] = useState(false);
+  const saveTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+
+  // Sync if account data arrives after mount
+  useEffect(() => {
+    setDraft(getNote(userId));
+  }, [getNote, userId]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const val = e.target.value;
+    setDraft(val);
+    clearTimeout(saveTimer.current);
+    saveTimer.current = setTimeout(async () => {
+      setSaving(true);
+      await setNote(userId, val);
+      setSaving(false);
+    }, 800);
+  };
+
+  useEffect(() => () => clearTimeout(saveTimer.current), []);
+
+  const charsLeft = USER_NOTE_MAX_LENGTH - draft.length;
+
+  return (
+    <Box direction="Column" gap="200">
+      <Box justifyContent="SpaceBetween" alignItems="Center" gap="200">
+        <Text size="L400">Private Note</Text>
+        {saving ? (
+          <Box alignItems="Center" gap="100" shrink="No">
+            <Spinner variant="Success" fill="Solid" size="100" />
+            <Text size="T200" priority="400">
+              Saving…
+            </Text>
+          </Box>
+        ) : (
+          <Text size="T200" priority="400">
+            {charsLeft < 100 ? `${charsLeft} left` : ''}
+          </Text>
+        )}
+      </Box>
+      <textarea
+        value={draft}
+        onChange={handleChange}
+        maxLength={USER_NOTE_MAX_LENGTH}
+        placeholder="Notes only visible to you…"
+        rows={3}
+        style={{
+          width: '100%',
+          resize: 'vertical',
+          background: color.SurfaceVariant.Container,
+          color: 'inherit',
+          border: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
+          borderRadius: config.radii.R300,
+          padding: `${config.space.S200} ${config.space.S300}`,
+          fontFamily: 'inherit',
+          lineHeight: 1.5,
+          boxSizing: 'border-box',
+          outline: 'none',
+        }}
+      />
+    </Box>
+  );
+}
+
 type UserRoomProfileProps = {
   userId: string;
 };
 export function UserRoomProfile({ userId }: UserRoomProfileProps) {
   const mx = useMatrixClient();
+  const [reportUserOpen, setReportUserOpen] = useState(false);
   const crossSigningActive = useCrossSigningActive();
   const useAuthentication = useMediaAuthentication();
   const navigate = useNavigate();
@@ -330,7 +400,25 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
           canKick={canKickUser && membership === Membership.Join}
           canBan={canBanUser && membership !== Membership.Ban}
         />
+        {userId !== myUserId && (
+          <Box style={{ padding: `0 ${config.space.S400} ${config.space.S200}` }}>
+            <Button
+              variant="Critical"
+              fill="None"
+              size="300"
+              radii="300"
+              before={<Icon size="50" src={Icons.Warning} />}
+              onClick={() => setReportUserOpen(true)}
+            >
+              <Text size="B300">Report User</Text>
+            </Button>
+          </Box>
+        )}
         {showEncryption && userId !== myUserId && <UserDeviceSessions userId={userId} />}
+        {userId !== myUserId && <UserPrivateNotes userId={userId} />}
+        {reportUserOpen && (
+          <ReportUserModal userId={userId} onClose={() => setReportUserOpen(false)} />
+        )}
       </Box>
     </Box>
   );

src/app/features/add-existing/AddExisting.tsx

@@ -54,6 +54,7 @@ import { StateEvent } from '../../../types/matrix/room';
 import { getViaServers } from '../../plugins/via-servers';
 import { rateLimitedActions } from '../../utils/matrix';
 import { useAlive } from '../../hooks/useAlive';
+import { useModalStyle } from '../../hooks/useModalStyle';
 
 const SEARCH_OPTS: UseAsyncSearchOptions = {
   limit: 500,
@@ -72,6 +73,7 @@ type AddExistingModalProps = {
 };
 export function AddExistingModal({ parentId, space, requestClose }: AddExistingModalProps) {
   const mx = useMatrixClient();
+  const modalStyle = useModalStyle(480);
   const useAuthentication = useMediaAuthentication();
   const alive = useAlive();
 
@@ -188,7 +190,7 @@ export function AddExistingModal({ parentId, space, requestClose }: AddExistingM
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Modal size="300">
+          <Modal size="300" style={modalStyle}>
             <Box grow="Yes" direction="Column">
               <Header
                 size="500"

src/app/features/bookmarks/BookmarksPanel.css.ts

@@ -0,0 +1,42 @@
+import { style } from '@vanilla-extract/css';
+import { config, toRem } from 'folds';
+
+// Mirrors MembersDrawer: a 266px side panel on desktop that becomes a
+// full-screen fixed panel on narrow viewports — the app's canonical drawer.
+export const BookmarksPanel = style({
+  width: toRem(266),
+  '@media': {
+    '(max-width: 750px)': {
+      position: 'fixed',
+      inset: 0,
+      width: '100%',
+      zIndex: 500,
+    },
+  },
+});
+
+export const BookmarksHeader = style({
+  flexShrink: 0,
+  padding: `0 ${config.space.S200} 0 ${config.space.S300}`,
+  borderBottomWidth: config.borderWidth.B300,
+});
+
+export const BookmarksToolbar = style({
+  flexShrink: 0,
+  padding: config.space.S200,
+  borderBottomWidth: config.borderWidth.B300,
+});
+
+export const BookmarksContent = style({
+  padding: config.space.S200,
+});
+
+export const BookmarkPreview = style({
+  width: '100%',
+  display: '-webkit-box',
+  WebkitLineClamp: 2,
+  WebkitBoxOrient: 'vertical',
+  overflow: 'hidden',
+  wordBreak: 'break-word',
+  textAlign: 'left',
+});

src/app/features/bookmarks/BookmarksPanel.tsx

@@ -1,5 +1,6 @@
-import React, { ChangeEvent, useState } from 'react';
+import React, { ChangeEvent, useCallback, useEffect, useState } from 'react';
 import {
+  Avatar,
   Box,
   Button,
   Header,
@@ -12,9 +13,17 @@ import {
   color,
   config,
 } from 'folds';
+import classNames from 'classnames';
 import { useBookmarks, Bookmark } from '../../hooks/useBookmarks';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useRoomNavigate } from '../../hooks/useRoomNavigate';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { RoomAvatar } from '../../components/room-avatar';
+import { getRoomAvatarUrl } from '../../utils/room';
+import { nameInitials } from '../../utils/common';
+import { ContainerColor } from '../../styles/ContainerColor.css';
+import { stopPropagation } from '../../utils/keyboard';
+import * as css from './BookmarksPanel.css';
 
 function formatTimeAgo(ts: number): string {
   const diff = Date.now() - ts;
@@ -37,89 +46,67 @@ type BookmarkItemProps = {
 
 function BookmarkItem({ bookmark, onJump, onRemove }: BookmarkItemProps) {
   const mx = useMatrixClient();
-  const room = mx.getRoom(bookmark.roomId);
+  const useAuthentication = useMediaAuthentication();
+  const room = mx.getRoom(bookmark.roomId) ?? undefined;
   const displayRoomName = room?.name ?? bookmark.roomName;
+  const avatarUrl = room
+    ? (getRoomAvatarUrl(mx, room, 96, useAuthentication) ?? undefined)
+    : undefined;
 
   return (
     <Box
       direction="Column"
       gap="200"
       style={{
-        padding: `${config.space.S300} ${config.space.S300}`,
-        borderBottom: `1px solid ${color.Surface.ContainerLine}`,
-        background: color.Surface.Container,
-        transition: 'background 0.1s',
+        padding: config.space.S300,
+        borderRadius: config.radii.R300,
+        background: color.SurfaceVariant.Container,
       }}
     >
-      {/* Room name row */}
-      <Box alignItems="Center" gap="100">
-        <Icon src={Icons.Hash} size="50" style={{ opacity: 0.5, flexShrink: 0 }} />
-        <Text
-          size="T200"
-          style={{
-            color: color.Primary.Main,
-            fontWeight: 600,
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
-          }}
+      {/* Room identity + remove */}
+      <Box alignItems="Center" gap="200">
+        <Avatar size="200" radii="300">
+          <RoomAvatar
+            roomId={bookmark.roomId}
+            src={avatarUrl}
+            alt={displayRoomName}
+            renderFallback={() => <Text size="H6">{nameInitials(displayRoomName)}</Text>}
+          />
+        </Avatar>
+        <Box grow="Yes" direction="Column" style={{ minWidth: 0 }}>
+          <Text size="T200" truncate style={{ fontWeight: config.fontWeight.W600 }}>
+            {displayRoomName}
+          </Text>
+          <Text size="T200" priority="300">
+            {formatTimeAgo(bookmark.savedAt)}
+          </Text>
+        </Box>
+        <IconButton
+          size="300"
+          variant="SurfaceVariant"
+          fill="None"
+          radii="300"
+          onClick={() => onRemove(bookmark.eventId)}
+          aria-label="Remove saved message"
         >
-          {displayRoomName}
-        </Text>
+          <Icon size="100" src={Icons.Delete} />
+        </IconButton>
       </Box>
 
-      {/* Message preview */}
-      <Box
-        style={{
-          background: color.SurfaceVariant.Container,
-          borderRadius: config.radii.R300,
-          borderLeft: `3px solid ${color.Primary.Main}`,
-          padding: `${config.space.S100} ${config.space.S200}`,
-        }}
+      {/* Message preview — clicking jumps to the message */}
+      <Button
+        variant="Secondary"
+        fill="Soft"
+        size="300"
+        radii="300"
+        onClick={() => onJump(bookmark.roomId, bookmark.eventId)}
+        aria-label="Jump to saved message"
+        style={{ justifyContent: 'flex-start', height: 'unset', padding: config.space.S200 }}
       >
-        <Text
-          size="T300"
-          style={{
-            overflow: 'hidden',
-            display: '-webkit-box',
-            WebkitLineClamp: 2,
-            WebkitBoxOrient: 'vertical',
-            wordBreak: 'break-word',
-            opacity: 0.9,
-          }}
-        >
+        <Text className={css.BookmarkPreview} size="T200" priority="400">
           {bookmark.previewText || '(no preview)'}
         </Text>
-      </Box>
-
-      {/* Footer row */}
-      <Box alignItems="Center" justifyContent="SpaceBetween" gap="200">
-        <Text size="T200" style={{ opacity: 0.5 }}>
-          {formatTimeAgo(bookmark.savedAt)}
-        </Text>
-        <Box gap="100" shrink="No">
-          <Button
-            size="300"
-            variant="Primary"
-            fill="Soft"
-            radii="300"
-            onClick={() => onJump(bookmark.roomId, bookmark.eventId)}
-            before={<Icon size="100" src={Icons.ArrowRight} />}
-          >
-            <Text size="T300">Jump</Text>
-          </Button>
-          <IconButton
-            size="300"
-            variant="Surface"
-            fill="None"
-            radii="300"
-            onClick={() => onRemove(bookmark.eventId)}
-            aria-label="Remove bookmark"
-          >
-            <Icon size="100" src={Icons.Delete} />
-          </IconButton>
-        </Box>
-      </Box>
+      </Button>
     </Box>
   );
 }
@@ -133,86 +120,76 @@ export function BookmarksPanel({ onClose }: BookmarksPanelProps) {
   const { navigateRoom } = useRoomNavigate();
   const [filter, setFilter] = useState('');
 
-  const handleJump = (roomId: string, eventId: string) => {
-    navigateRoom(roomId, eventId);
-    onClose();
-  };
+  // Escape closes the panel (parity with the app's other overlays/drawers).
+  useEffect(() => {
+    const handleKeyDown = (evt: KeyboardEvent) => {
+      if (evt.key === 'Escape') {
+        stopPropagation(evt);
+        onClose();
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [onClose]);
+
+  const handleJump = useCallback(
+    (roomId: string, eventId: string) => {
+      navigateRoom(roomId, eventId);
+      onClose();
+    },
+    [navigateRoom, onClose],
+  );
 
   const handleFilterChange = (e: ChangeEvent<HTMLInputElement>) => {
     setFilter(e.target.value);
   };
 
+  const query = filter.trim().toLowerCase();
   const filtered: Bookmark[] =
-    filter.trim().length === 0
+    query.length === 0
       ? bookmarks
-      : bookmarks.filter((bk) => {
-          const q = filter.toLowerCase();
-          return bk.previewText.toLowerCase().includes(q) || bk.roomName.toLowerCase().includes(q);
-        });
+      : bookmarks.filter(
+          (bk) =>
+            bk.previewText.toLowerCase().includes(query) ||
+            bk.roomName.toLowerCase().includes(query),
+        );
 
   return (
     <Box
+      className={classNames(css.BookmarksPanel, ContainerColor({ variant: 'Background' }))}
+      shrink="No"
       direction="Column"
-      style={{
-        width: '266px',
-        height: '100%',
-        flexShrink: 0,
-        borderLeft: `1px solid ${color.Surface.ContainerLine}`,
-        background: color.Surface.Container,
-        overflow: 'hidden',
-        display: 'flex',
-        flexDirection: 'column',
-      }}
     >
-      {/* Header */}
-      <Header
-        style={{
-          flexShrink: 0,
-          padding: `0 ${config.space.S200} 0 ${config.space.S300}`,
-          borderBottom: `1px solid ${color.Surface.ContainerLine}`,
-        }}
-        variant="Surface"
-        size="600"
-      >
+      <Header className={css.BookmarksHeader} variant="Background" size="600">
         <Box grow="Yes" alignItems="Center" gap="200">
           <Icon src={Icons.Star} size="200" />
           <Box grow="Yes">
-            <Text size="H5">Saved Messages</Text>
+            <Text size="H4" truncate>
+              Saved Messages
+            </Text>
           </Box>
-          <IconButton
-            size="300"
-            variant="Surface"
-            radii="300"
-            aria-label="Close saved messages"
-            onClick={onClose}
-          >
-            <Icon src={Icons.Cross} size="100" />
+          <IconButton size="300" radii="300" aria-label="Close saved messages" onClick={onClose}>
+            <Icon src={Icons.Cross} />
           </IconButton>
         </Box>
       </Header>
 
       {/* Search */}
-      <Box
-        style={{
-          flexShrink: 0,
-          padding: config.space.S200,
-          borderBottom: `1px solid ${color.Surface.ContainerLine}`,
-          background: color.SurfaceVariant.Container,
-        }}
-      >
+      <Box className={css.BookmarksToolbar} direction="Column" gap="100">
         <Input
-          variant="Surface"
+          variant="SurfaceVariant"
           size="400"
-          radii="400"
+          radii="300"
           placeholder="Search saved messages…"
           value={filter}
           onChange={handleFilterChange}
-          before={<Icon size="200" src={Icons.Search} />}
+          before={<Icon size="100" src={Icons.Search} />}
           after={
             filter.length > 0 ? (
               <IconButton
                 size="300"
-                variant="Surface"
+                variant="SurfaceVariant"
+                fill="None"
                 radii="300"
                 aria-label="Clear search"
                 onClick={() => setFilter('')}
@@ -222,56 +199,47 @@ export function BookmarksPanel({ onClose }: BookmarksPanelProps) {
             ) : undefined
           }
         />
-      </Box>
-
-      {/* Count badge */}
-      {bookmarks.length > 0 && (
-        <Box
-          style={{
-            flexShrink: 0,
-            padding: `${config.space.S100} ${config.space.S300}`,
-            borderBottom: `1px solid ${color.Surface.ContainerLine}`,
-            background: color.SurfaceVariant.Container,
-          }}
-        >
-          <Text size="T200" style={{ opacity: 0.6 }}>
+        {bookmarks.length > 0 && (
+          <Text size="T200" priority="300">
             {filtered.length === bookmarks.length
               ? `${bookmarks.length} saved message${bookmarks.length !== 1 ? 's' : ''}`
               : `${filtered.length} of ${bookmarks.length} messages`}
           </Text>
-        </Box>
-      )}
+        )}
+      </Box>
 
       {/* List */}
-      <Scroll variant="Background" size="300" style={{ flexGrow: 1, minHeight: 0 }}>
-        {filtered.length === 0 ? (
-          <Box
-            direction="Column"
-            alignItems="Center"
-            justifyContent="Center"
-            gap="300"
-            style={{ padding: config.space.S600, textAlign: 'center' }}
-          >
-            <Icon size="600" src={Icons.Star} style={{ opacity: 0.3 }} />
-            <Text size="T300" priority="300" align="Center">
-              {bookmarks.length === 0
-                ? 'No saved messages yet.\nRight-click any message to bookmark it.'
-                : 'No bookmarks match your search.'}
-            </Text>
-          </Box>
-        ) : (
-          <Box direction="Column">
-            {filtered.map((bk) => (
-              <BookmarkItem
-                key={bk.eventId}
-                bookmark={bk}
-                onJump={handleJump}
-                onRemove={removeBookmark}
-              />
-            ))}
-          </Box>
-        )}
-      </Scroll>
+      <Box grow="Yes" style={{ minHeight: 0 }}>
+        <Scroll variant="Background" size="300" visibility="Hover" hideTrack>
+          {filtered.length === 0 ? (
+            <Box
+              direction="Column"
+              alignItems="Center"
+              justifyContent="Center"
+              gap="300"
+              style={{ padding: config.space.S700, textAlign: 'center' }}
+            >
+              <Icon size="600" src={Icons.Star} style={{ opacity: config.opacity.Disabled }} />
+              <Text size="T300" priority="300" align="Center">
+                {bookmarks.length === 0
+                  ? 'No saved messages yet. Right-click any message to save it.'
+                  : 'No saved messages match your search.'}
+              </Text>
+            </Box>
+          ) : (
+            <Box className={css.BookmarksContent} direction="Column" gap="200">
+              {filtered.map((bk) => (
+                <BookmarkItem
+                  key={bk.eventId}
+                  bookmark={bk}
+                  onJump={handleJump}
+                  onRemove={removeBookmark}
+                />
+              ))}
+            </Box>
+          )}
+        </Scroll>
+      </Box>
     </Box>
   );
 }

src/app/features/call-status/CallControl.tsx

@@ -12,6 +12,9 @@ type MicrophoneButtonProps = {
   disabled?: boolean;
 };
 function MicrophoneButton({ enabled, onToggle, disabled }: MicrophoneButtonProps) {
+  const [micState, toggleMic] = useAsyncCallback(onToggle);
+  const loading = micState.status === AsyncStatus.Loading;
+
   return (
     <TooltipProvider
       position="Top"
@@ -28,9 +31,9 @@ function MicrophoneButton({ enabled, onToggle, disabled }: MicrophoneButtonProps
           fill="Soft"
           radii="300"
           size="300"
-          onClick={() => onToggle()}
+          onClick={toggleMic}
           outlined
-          disabled={disabled}
+          disabled={disabled || loading}
           aria-label={enabled ? 'Turn off microphone' : 'Turn on microphone'}
           aria-pressed={!enabled}
         >
@@ -85,6 +88,9 @@ type VideoButtonProps = {
   disabled?: boolean;
 };
 function VideoButton({ enabled, onToggle, disabled }: VideoButtonProps) {
+  const [videoState, toggleVideo] = useAsyncCallback(onToggle);
+  const loading = videoState.status === AsyncStatus.Loading;
+
   return (
     <TooltipProvider
       position="Top"
@@ -101,10 +107,10 @@ function VideoButton({ enabled, onToggle, disabled }: VideoButtonProps) {
           fill="Soft"
           radii="300"
           size="300"
-          onClick={() => onToggle()}
+          onClick={toggleVideo}
           aria-label={enabled ? 'Stop Video' : 'Start Video'}
           outlined
-          disabled={disabled}
+          disabled={disabled || loading}
         >
           <Icon
             size="100"
@@ -162,6 +168,13 @@ export function CallControl({
 }) {
   const { microphone, video, sound, screenshare } = useCallControlState(callEmbed.control);
   const setCallEmbed = useSetAtom(callEmbedAtom);
+
+  const handleMicrophoneToggle = useCallback(
+    () => callEmbed.control.toggleMicrophone(),
+    [callEmbed],
+  );
+  const handleVideoToggle = useCallback(() => callEmbed.control.toggleVideo(), [callEmbed]);
+
   const [hangupState, hangup] = useAsyncCallback(
     useCallback(() => callEmbed.hangup(), [callEmbed]),
   );
@@ -181,7 +194,7 @@ export function CallControl({
       <Box alignItems="Inherit" gap="200">
         <MicrophoneButton
           enabled={microphone}
-          onToggle={() => callEmbed.control.toggleMicrophone()}
+          onToggle={handleMicrophoneToggle}
           disabled={!callJoined}
         />
         <SoundButton
@@ -190,11 +203,7 @@ export function CallControl({
           disabled={!callJoined}
         />
         {!compact && <StatusDivider />}
-        <VideoButton
-          enabled={video}
-          onToggle={() => callEmbed.control.toggleVideo()}
-          disabled={!callJoined}
-        />
+        <VideoButton enabled={video} onToggle={handleVideoToggle} disabled={!callJoined} />
         {!compact && (
           <ScreenShareButton
             enabled={screenshare}

src/app/features/call-status/CallStatus.tsx

@@ -63,7 +63,12 @@ export function CallStatus({ callEmbed }: CallStatusProps) {
         </Box>
         {memberVisible && (
           <Box shrink="No">
-            <MemberGlance room={room} members={callMembers} speakers={speakers} />
+            <MemberGlance
+              room={room}
+              members={callMembers}
+              speakers={speakers}
+              callEmbed={callEmbed}
+            />
           </Box>
         )}
       </Box>

src/app/features/call-status/MemberGlance.tsx

@@ -1,6 +1,7 @@
-import { Box, config, Icon, Icons, Text } from 'folds';
+import { Box, config, Icon, Icons, Menu, MenuItem, PopOut, RectCords, Text } from 'folds';
 import { CallMembership } from 'matrix-js-sdk/lib/matrixrtc/CallMembership';
-import React from 'react';
+import React, { useState } from 'react';
+import FocusTrap from 'focus-trap-react';
 import { Room } from 'matrix-js-sdk';
 import { UserAvatar } from '../../components/user-avatar';
 import { getMemberAvatarMxc, getMemberDisplayName } from '../../utils/room';
@@ -9,67 +10,176 @@ import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { StackedAvatar } from '../../components/stacked-avatar';
 import { useOpenUserRoomProfile } from '../../state/hooks/userRoomProfile';
-import { getMouseEventCords } from '../../utils/dom';
+import { stopPropagation } from '../../utils/keyboard';
+import { CallEmbed } from '../../plugins/call/CallEmbed';
 import * as css from './styles.css';
 
+type ParticipantMenuProps = {
+  anchor: RectCords;
+  name: string;
+  userId: string;
+  room: Room;
+  callEmbed?: CallEmbed;
+  onClose: () => void;
+  profileCords: DOMRect;
+};
+function ParticipantMenu({
+  anchor,
+  name,
+  userId,
+  room,
+  callEmbed,
+  onClose,
+  profileCords,
+}: ParticipantMenuProps) {
+  const openUserProfile = useOpenUserRoomProfile();
+
+  const handleViewProfile = () => {
+    onClose();
+    openUserProfile(room.roomId, undefined, userId, profileCords, 'Top');
+  };
+
+  const handleFocusCamera = () => {
+    onClose();
+    callEmbed?.control.focusCameraParticipant(userId);
+  };
+
+  return (
+    <PopOut
+      anchor={anchor}
+      align="Start"
+      position="Top"
+      content={
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            onDeactivate: onClose,
+            clickOutsideDeactivates: true,
+            escapeDeactivates: stopPropagation,
+          }}
+        >
+          <Menu variant="Surface" style={{ minWidth: 160, padding: config.space.S100 }}>
+            <Box direction="Column">
+              <Text
+                size="L400"
+                style={{
+                  padding: `${config.space.S100} ${config.space.S200}`,
+                  opacity: 0.6,
+                }}
+                truncate
+              >
+                {name}
+              </Text>
+              {callEmbed && (
+                <MenuItem
+                  size="300"
+                  variant="Surface"
+                  radii="300"
+                  before={<Icon size="100" src={Icons.VideoCamera} />}
+                  onClick={handleFocusCamera}
+                >
+                  <Text size="B300">Focus camera</Text>
+                </MenuItem>
+              )}
+              <MenuItem
+                size="300"
+                variant="Surface"
+                radii="300"
+                before={<Icon size="100" src={Icons.User} />}
+                onClick={handleViewProfile}
+              >
+                <Text size="B300">View profile</Text>
+              </MenuItem>
+            </Box>
+          </Menu>
+        </FocusTrap>
+      }
+    >
+      {/* PopOut requires a JSX child even if we anchor externally */}
+      <span />
+    </PopOut>
+  );
+}
+
 type MemberGlanceProps = {
   room: Room;
   members: CallMembership[];
   speakers: Set<string>;
+  callEmbed?: CallEmbed;
   max?: number;
 };
-export function MemberGlance({ room, members, speakers, max = 6 }: MemberGlanceProps) {
+export function MemberGlance({ room, members, speakers, callEmbed, max = 6 }: MemberGlanceProps) {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
-  const openUserProfile = useOpenUserRoomProfile();
+
+  const [menuState, setMenuState] = useState<{
+    anchor: RectCords;
+    profileCords: DOMRect;
+    userId: string;
+    name: string;
+  } | null>(null);
 
   const visibleMembers = members.slice(0, max);
   const remainingCount = max && members.length > max ? members.length - max : 0;
 
   return (
-    <Box alignItems="Center">
-      {visibleMembers.map((callMember) => {
-        const { userId } = callMember;
-        if (!userId) return null;
-        const name = getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
-        const avatarMxc = getMemberAvatarMxc(room, userId);
-        const avatarUrl = avatarMxc
-          ? (mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96) ?? undefined)
-          : undefined;
+    <>
+      <Box alignItems="Center">
+        {visibleMembers.map((callMember) => {
+          const { userId } = callMember;
+          if (!userId) return null;
+          const name = getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
+          const avatarMxc = getMemberAvatarMxc(room, userId);
+          const avatarUrl = avatarMxc
+            ? (mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96) ?? undefined)
+            : undefined;
 
-        return (
-          <StackedAvatar
-            key={callMember.memberId}
-            className={speakers.has(callMember.sender) ? css.SpeakerAvatarOutline : undefined}
-            title={name}
-            as="button"
-            variant="Background"
-            size="200"
-            radii="Pill"
-            onClick={(evt) =>
-              openUserProfile(
-                room.roomId,
-                undefined,
-                userId,
-                getMouseEventCords(evt.nativeEvent),
-                'Top',
-              )
-            }
-          >
-            <UserAvatar
-              userId={userId}
-              src={avatarUrl}
-              alt={name}
-              renderFallback={() => <Icon size="50" src={Icons.User} filled />}
-            />
-          </StackedAvatar>
-        );
-      })}
-      {remainingCount > 0 && (
-        <Text size="L400" style={{ paddingLeft: config.space.S100 }}>
-          +{remainingCount}
-        </Text>
+          return (
+            <StackedAvatar
+              key={callMember.memberId}
+              className={speakers.has(callMember.sender) ? css.SpeakerAvatarOutline : undefined}
+              title={name}
+              as="button"
+              variant="Background"
+              size="200"
+              radii="Pill"
+              onClick={(evt) => {
+                const rect = evt.currentTarget.getBoundingClientRect();
+                setMenuState({
+                  anchor: rect,
+                  profileCords: rect,
+                  userId,
+                  name,
+                });
+              }}
+            >
+              <UserAvatar
+                userId={userId}
+                src={avatarUrl}
+                alt={name}
+                renderFallback={() => <Icon size="50" src={Icons.User} filled />}
+              />
+            </StackedAvatar>
+          );
+        })}
+        {remainingCount > 0 && (
+          <Text size="L400" style={{ paddingLeft: config.space.S100 }}>
+            +{remainingCount}
+          </Text>
+        )}
+      </Box>
+
+      {menuState && (
+        <ParticipantMenu
+          anchor={menuState.anchor}
+          profileCords={menuState.profileCords}
+          name={menuState.name}
+          userId={menuState.userId}
+          room={room}
+          callEmbed={callEmbed}
+          onClose={() => setMenuState(null)}
+        />
       )}
-    </Box>
+    </>
   );
 }

src/app/features/call-status/styles.css.ts

@@ -1,4 +1,4 @@
-import { style } from '@vanilla-extract/css';
+import { keyframes, style } from '@vanilla-extract/css';
 import { color, config, toRem } from 'folds';
 
 export const LiveChipText = style({
@@ -16,6 +16,19 @@ export const ControlDivider = style({
   height: toRem(16),
 });
 
-export const SpeakerAvatarOutline = style({
-  boxShadow: `0 0 0 ${config.borderWidth.B600} ${color.Success.Main}`,
+const speakerPulse = keyframes({
+  '0%': { boxShadow: `0 0 0 ${config.borderWidth.B600} ${color.Success.Main}` },
+  '50%': { boxShadow: `0 0 0 ${toRem(4)} ${color.Success.ContainerActive}` },
+  '100%': { boxShadow: `0 0 0 ${config.borderWidth.B600} ${color.Success.Main}` },
+});
+
+export const SpeakerAvatarOutline = style({
+  '@media': {
+    '(prefers-reduced-motion: no-preference)': {
+      animation: `${speakerPulse} 1200ms ease-in-out infinite`,
+    },
+    '(prefers-reduced-motion: reduce)': {
+      boxShadow: `0 0 0 ${config.borderWidth.B600} ${color.Success.Main}`,
+    },
+  },
 });

src/app/features/call/CallControls.tsx

@@ -35,6 +35,7 @@ import { useResizeObserver } from '../../hooks/useResizeObserver';
 import { stopPropagation } from '../../utils/keyboard';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { useCallEmbedRef } from '../../hooks/useCallEmbed';
+import { useAfkAutoMute } from '../../hooks/useAfkAutoMute';
 
 type CallControlsProps = {
   callEmbed: CallEmbed;
@@ -71,6 +72,8 @@ export function CallControls({ callEmbed }: CallControlsProps) {
   const { microphone, video, sound, screenshare, spotlight, screenshareAudioMuted } =
     useCallControlState(callEmbed.control);
 
+  useAfkAutoMute(callEmbed);
+
   const [cords, setCords] = useState<RectCords>();
   const [shareConfirm, setShareConfirm] = useState(false);
   useEffect(() => {
@@ -126,6 +129,12 @@ export function CallControls({ callEmbed }: CallControlsProps) {
     setCords(undefined);
   };
 
+  const handleMicrophoneToggle = useCallback(
+    () => callEmbed.control.toggleMicrophone(),
+    [callEmbed],
+  );
+  const handleVideoToggle = useCallback(() => callEmbed.control.toggleVideo(), [callEmbed]);
+
   const pttActiveRef = useRef(false);
 
   useEffect(() => {
@@ -243,8 +252,8 @@ export function CallControls({ callEmbed }: CallControlsProps) {
               top: '-2.5rem',
               left: '50%',
               transform: 'translateX(-50%)',
-              background: pttActive ? 'rgba(0,255,136,0.18)' : 'rgba(255,107,0,0.12)',
-              border: `1px solid ${pttActive ? 'rgba(0,255,136,0.55)' : 'rgba(255,107,0,0.35)'}`,
+              background: pttActive ? 'var(--lt-accent-green-dim)' : 'var(--lt-accent-orange-dim)',
+              border: `1px solid ${pttActive ? 'var(--lt-accent-green-border)' : 'var(--lt-accent-orange-border)'}`,
               borderRadius: '99px',
               padding: '0.2rem 0.9rem',
               pointerEvents: 'none',
@@ -254,7 +263,7 @@ export function CallControls({ callEmbed }: CallControlsProps) {
             <Text
               size="T200"
               style={{
-                color: pttActive ? '#00FF88' : '#FF6B00',
+                color: pttActive ? 'var(--lt-accent-green)' : 'var(--lt-accent-orange)',
                 fontWeight: 700,
                 letterSpacing: '0.08em',
                 fontFamily: 'JetBrains Mono, monospace',
@@ -365,10 +374,7 @@ export function CallControls({ callEmbed }: CallControlsProps) {
       >
         <Box alignItems="Center" gap="Inherit" grow="Yes" direction={compact ? 'Column' : 'Row'}>
           <Box shrink="No" alignItems="Inherit" justifyContent="Inherit" gap="200">
-            <MicrophoneButton
-              enabled={microphone}
-              onToggle={() => callEmbed.control.toggleMicrophone()}
-            />
+            <MicrophoneButton enabled={microphone} onToggle={handleMicrophoneToggle} />
             <SoundButton enabled={sound} onToggle={() => callEmbed.control.toggleSound()} />
             <ScreenshareAudioButton
               muted={screenshareAudioMuted}
@@ -377,14 +383,14 @@ export function CallControls({ callEmbed }: CallControlsProps) {
           </Box>
           {!compact && <ControlDivider />}
           <Box shrink="No" alignItems="Inherit" justifyContent="Inherit" gap="200">
-            <VideoButton enabled={video} onToggle={() => callEmbed.control.toggleVideo()} />
+            <VideoButton enabled={video} onToggle={handleVideoToggle} />
             <ScreenShareButton
               enabled={screenshare}
               onToggle={() =>
                 screenshare ? callEmbed.control.toggleScreenshare() : setShareConfirm(true)
               }
             />
-            {screenshare && !!document.fullscreenEnabled && (
+            {!!document.fullscreenEnabled && (
               <FullscreenButton isFullscreen={isFullscreen} onToggle={handleFullscreen} />
             )}
           </Box>

src/app/features/call/CallView.tsx

@@ -10,6 +10,8 @@ import { useRoomPermissions } from '../../hooks/useRoomPermissions';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { StateEvent } from '../../../types/matrix/room';
 import { useCallMembers, useCallSession } from '../../hooks/useCall';
+import { useStateEvent } from '../../hooks/useStateEvent';
+import { VoiceLimitContent } from '../common-settings/general/RoomVoiceLimit';
 import { CallMemberRenderer } from './CallMemberCard';
 import * as css from './styles.css';
 import { CallControls } from './CallControls';
@@ -74,6 +76,14 @@ function AlreadyInCallMessage() {
   );
 }
 
+function ChannelFullMessage({ current, max }: { current: number; max: number }) {
+  return (
+    <Text style={{ margin: 'auto', color: color.Critical.Main }} size="L400" align="Center">
+      Channel Full ({current}/{max}) — Wait for someone to leave before joining.
+    </Text>
+  );
+}
+
 function CallPrescreen() {
   const mx = useMatrixClient();
   const room = useRoom();
@@ -96,7 +106,14 @@ function CallPrescreen() {
   const callEmbed = useCallEmbed();
   const inOtherCall = callEmbed && callEmbed.roomId !== room.roomId;
 
-  const canJoin = hasPermission && livekitSupported && rtcSupported;
+  // Voice channel user limit (io.lotus.voice_limit). 0 / absent means no limit.
+  const limitEvent = useStateEvent(room, StateEvent.LotusVoiceLimit);
+  const maxUsers = limitEvent?.getContent<VoiceLimitContent>().max_users ?? 0;
+  // A user already counted in the session is rejoining and should not be blocked.
+  const alreadyMember = callMembers.some((m) => m.sender === mx.getSafeUserId());
+  const channelFull = maxUsers > 0 && !alreadyMember && callMembers.length >= maxUsers;
+
+  const canJoin = hasPermission && livekitSupported && rtcSupported && !channelFull;
 
   return (
     <Scroll variant="Surface" hideTrack>
@@ -117,16 +134,17 @@ function CallPrescreen() {
           <CallMemberRenderer members={callMembers} />
           <PrescreenControls canJoin={canJoin} />
           <Box className={css.PrescreenMessage} alignItems="Center">
-            {!inOtherCall &&
-              (hasPermission ? (
-                <JoinMessage
-                  hasParticipant={hasParticipant}
-                  livekitSupported={livekitSupported}
-                  rtcSupported={rtcSupported}
-                />
-              ) : (
-                <NoPermissionMessage />
-              ))}
+            {!inOtherCall && !hasPermission && <NoPermissionMessage />}
+            {!inOtherCall && hasPermission && channelFull && (
+              <ChannelFullMessage current={callMembers.length} max={maxUsers} />
+            )}
+            {!inOtherCall && hasPermission && !channelFull && (
+              <JoinMessage
+                hasParticipant={hasParticipant}
+                livekitSupported={livekitSupported}
+                rtcSupported={rtcSupported}
+              />
+            )}
             {inOtherCall && <AlreadyInCallMessage />}
           </Box>
         </Box>

src/app/features/call/Controls.tsx

@@ -3,6 +3,7 @@ import { Icon, IconButton, Icons, Line, Text, Tooltip, TooltipProvider } from 'f
 import { useAtom } from 'jotai';
 import * as css from './styles.css';
 import { callChatAtom } from '../../state/callEmbed';
+import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 
 export function ControlDivider() {
   return (
@@ -12,9 +13,12 @@ export function ControlDivider() {
 
 type MicrophoneButtonProps = {
   enabled: boolean;
-  onToggle: () => void;
+  onToggle: () => Promise<unknown>;
 };
 export function MicrophoneButton({ enabled, onToggle }: MicrophoneButtonProps) {
+  const [micState, toggleMic] = useAsyncCallback(onToggle);
+  const loading = micState.status === AsyncStatus.Loading;
+
   return (
     <TooltipProvider
       position="Top"
@@ -32,9 +36,10 @@ export function MicrophoneButton({ enabled, onToggle }: MicrophoneButtonProps) {
           fill="Soft"
           radii="400"
           size="400"
-          onClick={() => onToggle()}
+          onClick={toggleMic}
           aria-label={enabled ? 'Turn Off Microphone' : 'Turn On Microphone'}
           outlined
+          disabled={loading}
         >
           <Icon size="400" src={enabled ? Icons.Mic : Icons.MicMute} filled={!enabled} />
         </IconButton>
@@ -82,10 +87,13 @@ export function SoundButton({ enabled, onToggle }: SoundButtonProps) {
 
 type VideoButtonProps = {
   enabled: boolean;
-  onToggle: () => void;
+  onToggle: () => Promise<unknown>;
   disabled?: boolean;
 };
 export function VideoButton({ enabled, onToggle, disabled }: VideoButtonProps) {
+  const [videoState, toggleVideo] = useAsyncCallback(onToggle);
+  const loading = videoState.status === AsyncStatus.Loading;
+
   return (
     <TooltipProvider
       position="Top"
@@ -105,9 +113,9 @@ export function VideoButton({ enabled, onToggle, disabled }: VideoButtonProps) {
           fill="Soft"
           radii="400"
           size="400"
-          onClick={() => onToggle()}
+          onClick={toggleVideo}
           outlined
-          disabled={disabled}
+          disabled={disabled || loading}
           aria-label={
             disabled ? 'Camera disabled in settings' : enabled ? 'Stop camera' : 'Start camera'
           }

src/app/features/call/PrescreenControls.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Box, Button, Icon, Icons, Spinner, Text } from 'folds';
 import { SequenceCard } from '../../components/sequence-card';
 import * as css from './styles.css';
@@ -54,6 +54,9 @@ export function PrescreenControls({ canJoin }: PrescreenControlsProps) {
     useCallPreferences();
   const [cameraOnJoin] = useSetting(settingsAtom, 'cameraOnJoin');
 
+  const handleMicrophoneToggle = useCallback(async () => toggleMicrophone(), [toggleMicrophone]);
+  const handleVideoToggle = useCallback(async () => toggleVideo(), [toggleVideo]);
+
   return (
     <SequenceCard
       className={css.ControlCard}
@@ -65,12 +68,12 @@ export function PrescreenControls({ canJoin }: PrescreenControlsProps) {
       wrap="Wrap"
     >
       <Box shrink="No" alignItems="Inherit" justifyContent="SpaceBetween" gap="200">
-        <MicrophoneButton enabled={microphone} onToggle={toggleMicrophone} />
+        <MicrophoneButton enabled={microphone} onToggle={handleMicrophoneToggle} />
         <SoundButton enabled={sound} onToggle={toggleSound} />
       </Box>
       <ControlDivider />
       <Box shrink="No" alignItems="Inherit" justifyContent="SpaceBetween" gap="200">
-        <VideoButton enabled={video} onToggle={toggleVideo} disabled={!cameraOnJoin} />
+        <VideoButton enabled={video} onToggle={handleVideoToggle} disabled={!cameraOnJoin} />
         <ChatButton />
       </Box>
       <Box grow="Yes" direction="Column" gap="200">

src/app/features/common-settings/general/RoomEncryption.tsx

@@ -28,6 +28,7 @@ import { useRoom } from '../../../hooks/useRoom';
 import { useStateEvent } from '../../../hooks/useStateEvent';
 import { stopPropagation } from '../../../utils/keyboard';
 import { RoomPermissionsAPI } from '../../../hooks/useRoomPermissions';
+import { useModalStyle } from '../../../hooks/useModalStyle';
 
 const ROOM_ENC_ALGO = 'm.megolm.v1.aes-sha2';
 
@@ -37,6 +38,7 @@ type RoomEncryptionProps = {
 export function RoomEncryption({ permissions }: RoomEncryptionProps) {
   const mx = useMatrixClient();
   const room = useRoom();
+  const modalStyle = useModalStyle(480);
 
   const canEnable = permissions.stateEvent(StateEvent.RoomEncryption, mx.getSafeUserId());
   const content = useStateEvent(room, StateEvent.RoomEncryption)?.getContent<{
@@ -111,7 +113,7 @@ export function RoomEncryption({ permissions }: RoomEncryptionProps) {
                   escapeDeactivates: stopPropagation,
                 }}
               >
-                <Dialog variant="Surface">
+                <Dialog variant="Surface" style={modalStyle}>
                   <Header
                     style={{
                       padding: `0 ${config.space.S200} 0 ${config.space.S400}`,

src/app/features/common-settings/general/RoomProfile.tsx

@@ -4,7 +4,6 @@ import {
   Button,
   Chip,
   color,
-  config,
   Icon,
   IconButton,
   Icons,
@@ -18,6 +17,7 @@ import {
 import React, { FormEventHandler, useCallback, useMemo, useRef, useState } from 'react';
 import { useAtomValue } from 'jotai';
 import Linkify from 'linkify-react';
+import parse from 'html-react-parser';
 import classNames from 'classnames';
 import { JoinRule, MatrixError } from 'matrix-js-sdk';
 import { EmojiBoard } from '../../../components/emoji-board';
@@ -33,6 +33,7 @@ import {
 import { mDirectAtom } from '../../../state/mDirectList';
 import { BreakWord, LineClamp3 } from '../../../styles/Text.css';
 import { LINKIFY_OPTS } from '../../../plugins/react-custom-html-parser';
+import { sanitizeCustomHtml } from '../../../utils/sanitize';
 import { RoomAvatar, RoomIcon } from '../../../components/room-avatar';
 import { mxcUrlToHttp } from '../../../utils/matrix';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
@@ -84,7 +85,7 @@ function buildTopicContent(topic: string): Record<string, string> {
   const formattedBody = topicMarkdownToHtml(topic);
   // Use HTML-stripped text as the plain topic so the header shows clean text, not raw markdown syntax
   const plainTopic = formattedBody.replace(/<br>/g, '\n').replace(/<[^>]+>/g, '');
-  // eslint-disable-next-line @typescript-eslint/naming-convention
+
   return { topic: plainTopic, format: 'org.matrix.custom.html', formatted_body: formattedBody };
 }
 
@@ -332,30 +333,30 @@ export function RoomProfileEdit({
                   { label: '`', syntax: '`', placeholder: 'code', title: 'Inline Code' },
                 ] as const
               ).map(({ label, syntax, placeholder, title }) => (
-                <button
+                <Button
                   key={label}
                   type="button"
-                  title={title}
+                  size="300"
+                  radii="300"
+                  variant="Secondary"
+                  fill="Soft"
                   aria-label={title}
+                  title={title}
                   onClick={() =>
                     topicRef.current && wrapSelection(topicRef.current, syntax, placeholder)
                   }
-                  style={{
-                    padding: `${config.space.S100} ${config.space.S200}`,
-                    border: `1px solid ${color.Surface.ContainerLine}`,
-                    borderRadius: config.radii.R300,
-                    background: color.Surface.Container,
-                    color: color.Surface.OnContainer,
-                    cursor: 'pointer',
-                    fontSize: '0.8rem',
-                    fontWeight: label === 'B' ? 700 : label === 'I' ? undefined : undefined,
-                    fontStyle: label === 'I' ? 'italic' : undefined,
-                    fontFamily: label === '`' ? 'monospace' : 'inherit',
-                    lineHeight: 1,
-                  }}
                 >
-                  {label}
-                </button>
+                  <Text
+                    size="B300"
+                    style={{
+                      fontWeight: label === 'B' ? 700 : undefined,
+                      fontStyle: label === 'I' ? 'italic' : undefined,
+                      fontFamily: label === '`' ? 'monospace' : undefined,
+                    }}
+                  >
+                    {label}
+                  </Text>
+                </Button>
               ))}
             </Box>
           )}
@@ -456,7 +457,12 @@ export function RoomProfile({ permissions }: RoomProfileProps) {
                 </Text>
                 {topic && (
                   <Text className={classNames(BreakWord, LineClamp3)} size="T200">
-                    <Linkify options={LINKIFY_OPTS}>{topic.topic}</Linkify>
+                    {topic.format === 'org.matrix.custom.html' &&
+                    typeof topic.formatted_body === 'string' ? (
+                      parse(sanitizeCustomHtml(topic.formatted_body))
+                    ) : (
+                      <Linkify options={LINKIFY_OPTS}>{topic.topic}</Linkify>
+                    )}
                   </Text>
                 )}
               </Box>

src/app/features/common-settings/general/RoomShareInvite.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from 'react';
-import { Box, Button, config, Icon, Icons, Text } from 'folds';
+import { Box, Button, color, config, Icon, Icons, Text } from 'folds';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../../room-settings/styles.css';
 import { SettingTile } from '../../../components/setting-tile';
@@ -12,6 +12,7 @@ export function RoomShareInvite() {
   const mx = useMatrixClient();
   const room = useRoom();
   const [copied, setCopied] = useState(false);
+  const [qrError, setQrError] = useState(false);
 
   const domain = mx.getDomain() ?? undefined;
   const inviteUrl = getMatrixToRoom(room.roomId, domain ? [domain] : undefined);
@@ -63,13 +64,35 @@ export function RoomShareInvite() {
             </Box>
           </Box>
           <Box justifyContent="Center">
-            <img
-              src={qrSrc}
-              alt="QR code for room invite link"
-              width={160}
-              height={160}
-              style={{ display: 'block', borderRadius: config.radii.R300 }}
-            />
+            {qrError ? (
+              <Box
+                direction="Column"
+                alignItems="Center"
+                justifyContent="Center"
+                gap="100"
+                style={{
+                  width: 160,
+                  height: 160,
+                  borderRadius: config.radii.R300,
+                  background: color.SurfaceVariant.Container,
+                }}
+              >
+                <Icon size="400" src={Icons.Warning} />
+                <Text size="T200" priority="300" align="Center">
+                  QR code unavailable
+                </Text>
+              </Box>
+            ) : (
+              <img
+                src={qrSrc}
+                alt="QR code for room invite link"
+                width={160}
+                height={160}
+                loading="lazy"
+                onError={() => setQrError(true)}
+                style={{ display: 'block', borderRadius: config.radii.R300 }}
+              />
+            )}
           </Box>
         </Box>
       </CutoutCard>

src/app/features/common-settings/general/RoomUpgrade.tsx

@@ -39,12 +39,14 @@ import { useAlive } from '../../../hooks/useAlive';
 import { creatorsSupported } from '../../../utils/matrix';
 import { useRoomCreators } from '../../../hooks/useRoomCreators';
 import { BreakWord } from '../../../styles/Text.css';
+import { useModalStyle } from '../../../hooks/useModalStyle';
 
 function RoomUpgradeDialog({ requestClose }: { requestClose: () => void }) {
   const mx = useMatrixClient();
   const room = useRoom();
   const alive = useAlive();
   const creators = useRoomCreators(room);
+  const modalStyle = useModalStyle(480);
 
   const capabilities = useCapabilities();
   const roomVersions = capabilities['m.room_versions'];
@@ -93,7 +95,7 @@ function RoomUpgradeDialog({ requestClose }: { requestClose: () => void }) {
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Dialog variant="Surface">
+          <Dialog variant="Surface" style={modalStyle}>
             <Header
               style={{
                 padding: `0 ${config.space.S200} 0 ${config.space.S400}`,

src/app/features/common-settings/general/RoomVoiceLimit.tsx

@@ -0,0 +1,98 @@
+import React, { FormEventHandler, useCallback } from 'react';
+import { Box, Button, color, Input, Spinner, Text } from 'folds';
+import { MatrixError } from 'matrix-js-sdk';
+import { SequenceCard } from '../../../components/sequence-card';
+import { SequenceCardStyle } from '../../room-settings/styles.css';
+import { SettingTile } from '../../../components/setting-tile';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { useRoom } from '../../../hooks/useRoom';
+import { StateEvent } from '../../../../types/matrix/room';
+import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
+import { useStateEvent } from '../../../hooks/useStateEvent';
+import { RoomPermissionsAPI } from '../../../hooks/useRoomPermissions';
+
+export type VoiceLimitContent = {
+  max_users?: number;
+};
+
+type RoomVoiceLimitProps = {
+  permissions: RoomPermissionsAPI;
+};
+export function RoomVoiceLimit({ permissions }: RoomVoiceLimitProps) {
+  const mx = useMatrixClient();
+  const room = useRoom();
+
+  const canEdit = permissions.stateEvent(StateEvent.LotusVoiceLimit, mx.getSafeUserId());
+
+  const limitEvent = useStateEvent(room, StateEvent.LotusVoiceLimit);
+  const maxUsers = limitEvent?.getContent<VoiceLimitContent>().max_users ?? 0;
+
+  const [submitState, submit] = useAsyncCallback(
+    useCallback(
+      async (value: number) => {
+        const content: VoiceLimitContent = value > 0 ? { max_users: value } : {};
+        await mx.sendStateEvent(room.roomId, StateEvent.LotusVoiceLimit as any, content);
+      },
+      [mx, room.roomId],
+    ),
+  );
+  const submitting = submitState.status === AsyncStatus.Loading;
+
+  const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
+    evt.preventDefault();
+    const target = evt.target as HTMLFormElement;
+    const limitInput = target.elements.namedItem('limitInput') as HTMLInputElement | null;
+    if (!limitInput) return;
+    const parsed = parseInt(limitInput.value, 10);
+    const value = Number.isNaN(parsed) || parsed < 0 ? 0 : parsed;
+    submit(value);
+  };
+
+  return (
+    <SequenceCard
+      className={SequenceCardStyle}
+      variant="SurfaceVariant"
+      direction="Column"
+      gap="400"
+    >
+      <SettingTile
+        title="Voice Channel Limit"
+        description="Set the maximum number of participants allowed in this room's voice call. Set to 0 for no limit. Enforced on the server for all Matrix clients."
+      >
+        <Box as="form" onSubmit={handleSubmit} gap="200" alignItems="Center">
+          <Box style={{ maxWidth: '100px' }} grow="Yes">
+            <Input
+              key={maxUsers}
+              name="limitInput"
+              defaultValue={maxUsers}
+              type="number"
+              min={0}
+              max={99}
+              size="300"
+              variant="Secondary"
+              radii="300"
+              readOnly={!canEdit}
+              disabled={!canEdit}
+            />
+          </Box>
+          <Button
+            type="submit"
+            size="300"
+            variant="Primary"
+            fill="Solid"
+            radii="300"
+            disabled={!canEdit || submitting}
+            before={submitting ? <Spinner size="100" variant="Primary" fill="Solid" /> : undefined}
+          >
+            <Text size="B300">Save</Text>
+          </Button>
+        </Box>
+        {submitState.status === AsyncStatus.Error && (
+          <Text style={{ color: color.Critical.Main }} size="T200">
+            {(submitState.error as MatrixError).message}
+          </Text>
+        )}
+      </SettingTile>
+    </SequenceCard>
+  );
+}