diff --git a/LOTUS_BUGS.md b/LOTUS_BUGS.md
index e8c2976be..c486ae5fc 100644
--- a/LOTUS_BUGS.md
+++ b/LOTUS_BUGS.md
@@ -307,30 +307,30 @@ This document tracks identified bugs, edge cases, and architectural discrepancie
 
 ### 🟠 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                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | 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                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `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                                                                                                                                                                                                                                                                                                                                                                                                                        | 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).                                                                                                                                                                                                                        | `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                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | 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`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `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                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | 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                                                                                                                                                                                                                                                                                                                                                                                                                                           | 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 }}`                                                                                                                                                                                                                                                                                                                                                                                                                                                         | 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                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | 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                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | 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                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | 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                                       |
+| #   | 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                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | 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                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `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                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | 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. | `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                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | 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`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `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                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | 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                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | 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 }}`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | 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                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | 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                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | 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                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | 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                                       |
 
 ---
 
diff --git a/src/app/features/room/MediaGallery.css.ts b/src/app/features/room/MediaGallery.css.ts
index 346b0d55c..af43d4035 100644
--- a/src/app/features/room/MediaGallery.css.ts
+++ b/src/app/features/room/MediaGallery.css.ts
@@ -14,7 +14,7 @@ export const MediaGalleryDrawer = style({
   overflow: 'hidden',
   borderLeftWidth: config.borderWidth.B300,
   borderLeftStyle: 'solid',
-  borderLeftColor: color.Surface.ContainerLine,
+  borderLeftColor: color.Background.ContainerLine,
   '@media': {
     '(max-width: 750px)': {
       width: '100%',
@@ -25,7 +25,102 @@ export const MediaGalleryDrawer = style({
 
 export const MediaGalleryHeader = style({
   flexShrink: 0,
-  paddingRight: config.space.S200,
-  paddingLeft: config.space.S300,
+  padding: `0 ${config.space.S200} 0 ${config.space.S300}`,
   borderBottomWidth: config.borderWidth.B300,
 });
+
+export const MediaGalleryTabs = style({
+  flexShrink: 0,
+  padding: config.space.S200,
+  gap: config.space.S100,
+  borderBottomWidth: config.borderWidth.B300,
+  borderBottomStyle: 'solid',
+  borderBottomColor: color.Background.ContainerLine,
+});
+
+export const MediaGalleryContent = style({
+  padding: config.space.S200,
+});
+
+export const MediaGalleryGroup = style({
+  marginBottom: config.space.S300,
+});
+
+export const MediaGalleryGroupLabel = style({
+  padding: `${config.space.S200} ${config.space.S100}`,
+});
+
+export const MediaGalleryGrid = style({
+  display: 'grid',
+  gridTemplateColumns: 'repeat(3, 1fr)',
+  gap: config.space.S100,
+});
+
+export const GalleryTile = style({
+  position: 'relative',
+  aspectRatio: '1',
+  overflow: 'hidden',
+  borderRadius: config.radii.R300,
+  background: color.SurfaceVariant.Container,
+  borderWidth: config.borderWidth.B300,
+  borderStyle: 'solid',
+  borderColor: color.SurfaceVariant.ContainerLine,
+  cursor: 'pointer',
+  padding: 0,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  transition: 'border-color 100ms ease-in-out',
+  selectors: {
+    '&:hover, &:focus-visible': {
+      borderColor: color.Primary.Main,
+    },
+  },
+});
+
+export const GalleryTileImg = style({
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover',
+  objectPosition: 'center top',
+  display: 'block',
+});
+
+// Dark scrim is intentional: it overlays arbitrary media, so a theme surface
+// token would not guarantee legibility of the sender/date caption.
+export const GalleryTileOverlay = style({
+  position: 'absolute',
+  inset: 0,
+  background: 'linear-gradient(to top, rgba(0,0,0,0.72) 0%, transparent 55%)',
+  opacity: 0,
+  transition: 'opacity 100ms ease-in-out',
+  pointerEvents: 'none',
+  selectors: {
+    [`${GalleryTile}:hover &, ${GalleryTile}:focus-visible &`]: {
+      opacity: 1,
+    },
+  },
+});
+
+export const GalleryTileCaption = style({
+  position: 'absolute',
+  bottom: 0,
+  left: 0,
+  right: 0,
+  padding: `${config.space.S100} ${config.space.S200}`,
+});
+
+export const GalleryVideoBadge = style({
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: toRem(28),
+  height: toRem(28),
+  borderRadius: '50%',
+  background: 'rgba(0,0,0,0.6)',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  pointerEvents: 'none',
+});
diff --git a/src/app/features/room/MediaGallery.tsx b/src/app/features/room/MediaGallery.tsx
index d819dd008..4e3559f7b 100644
--- a/src/app/features/room/MediaGallery.tsx
+++ b/src/app/features/room/MediaGallery.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
   Box,
   Button,
@@ -383,7 +383,6 @@ function GalleryTile({
     mimeType,
     nearViewport,
   );
-  const [hovered, setHovered] = useState(false);
   const relDate = formatRelativeDate(ts);
 
   return (
@@ -392,22 +391,7 @@ function GalleryTile({
       type="button"
       aria-label={body || (isVideo ? 'Video' : 'Image')}
       onClick={onClick}
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
-      style={{
-        position: 'relative',
-        aspectRatio: '1',
-        overflow: 'hidden',
-        borderRadius: config.radii.R300,
-        background: color.SurfaceVariant.Container,
-        border: `1px solid ${hovered ? color.Primary.Main : color.SurfaceVariant.ContainerLine}`,
-        cursor: 'pointer',
-        padding: 0,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        transition: 'border-color 0.15s',
-      }}
+      className={css.GalleryTile}
     >
       {media.status === 'loading' && <Spinner size="200" />}
       {media.status === 'error' && (
@@ -421,71 +405,30 @@ function GalleryTile({
           <Text
             size="T200"
             truncate
-            style={{ maxWidth: '100%', textAlign: 'center', opacity: 0.5 }}
+            priority="300"
+            style={{ maxWidth: '100%', textAlign: 'center' }}
           >
             {body}
           </Text>
         </Box>
       )}
-      {media.status === 'ok' && (
-        <img
-          src={media.url}
-          alt={body}
-          style={{
-            width: '100%',
-            height: '100%',
-            objectFit: 'cover',
-            objectPosition: 'center top',
-            display: 'block',
-          }}
-        />
-      )}
+      {media.status === 'ok' && <img src={media.url} alt={body} className={css.GalleryTileImg} />}
 
       {/* Video play badge */}
       {isVideo && media.status === 'ok' && (
-        <div
-          style={{
-            position: 'absolute',
-            top: '50%',
-            left: '50%',
-            transform: 'translate(-50%, -50%)',
-            width: 28,
-            height: 28,
-            borderRadius: '50%',
-            background: 'rgba(0,0,0,0.6)',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            pointerEvents: 'none',
-          }}
-        >
+        <div className={css.GalleryVideoBadge}>
           <Icon src={Icons.Play} size="200" />
         </div>
       )}
 
-      {/* Hover overlay */}
-      {hovered && media.status === 'ok' && (
-        <div
-          style={{
-            position: 'absolute',
-            inset: 0,
-            background: 'linear-gradient(to top, rgba(0,0,0,0.72) 0%, transparent 55%)',
-            pointerEvents: 'none',
-          }}
-        >
-          <div
-            style={{
-              position: 'absolute',
-              bottom: 0,
-              left: 0,
-              right: 0,
-              padding: `${config.space.S100} ${config.space.S200}`,
-            }}
-          >
+      {/* Hover/focus caption overlay (CSS-driven) */}
+      {media.status === 'ok' && (
+        <div className={css.GalleryTileOverlay}>
+          <div className={css.GalleryTileCaption}>
             <Text size="T200" truncate style={{ color: '#fff', display: 'block', lineHeight: 1.3 }}>
               {sender}
             </Text>
-            <Text size="T200" style={{ color: 'rgba(255,255,255,0.65)', opacity: 0.8 }}>
+            <Text size="T200" style={{ color: 'rgba(255,255,255,0.65)' }}>
               {relDate}
             </Text>
           </div>
@@ -497,30 +440,16 @@ function GalleryTile({
 
 // ── Month separator ───────────────────────────────────────────────────────────
 
-function MonthSeparator({ label }: { label: string }) {
-  return (
-    <Box
-      alignItems="Center"
-      gap="200"
-      style={{ padding: `${config.space.S100} 0`, gridColumn: '1 / -1' }}
-    >
-      <div style={{ flex: 1, height: 1, background: color.Surface.ContainerLine }} />
-      <Text size="T200" priority="300" style={{ flexShrink: 0, whiteSpace: 'nowrap' }}>
-        {label}
-      </Text>
-      <div style={{ flex: 1, height: 1, background: color.Surface.ContainerLine }} />
-    </Box>
-  );
-}
-
 // ── Tab button ────────────────────────────────────────────────────────────────
 
 function TabButton({
   label,
+  count,
   active,
   onClick,
 }: {
   label: string;
+  count: number;
   active: boolean;
   onClick: () => void;
 }) {
@@ -528,11 +457,14 @@ function TabButton({
     <Button
       size="300"
       variant={active ? 'Primary' : 'Secondary'}
-      fill={active ? 'Soft' : 'None'}
+      fill={active ? 'Solid' : 'Soft'}
       radii="300"
       onClick={onClick}
     >
-      <Text size="B300">{label}</Text>
+      <Text size="B300">
+        {label}
+        {count > 0 ? ` (${count})` : ''}
+      </Text>
     </Button>
   );
 }
@@ -657,6 +589,25 @@ export function MediaGallery({ room, onClose }: MediaGalleryProps) {
       };
     });
 
+  // Per-tab counts for the tab labels (single pass over loaded timeline)
+  const tabCounts = useMemo(() => {
+    const counts: Record<GalleryTab, number> = { image: 0, video: 0, file: 0 };
+    room
+      .getLiveTimeline()
+      .getEvents()
+      .forEach((ev) => {
+        if (ev.isRedacted() || ev.getType() !== EventType.RoomMessage) return;
+        const mt = ev.getContent().msgtype;
+        if (mt === MsgType.Image) counts.image += 1;
+        else if (mt === MsgType.Video) counts.video += 1;
+        else if (mt === MsgType.File) counts.file += 1;
+      });
+    return counts;
+    // `events` is intentional: it changes when more history is paginated in, so
+    // the counts stay in sync with the loaded window (it isn't read directly).
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [room, events]);
+
   // Group image/video events by month for the grid
   type MonthGroup = { label: string; events: MatrixEvent[] };
   const monthGroups: MonthGroup[] = [];
@@ -673,52 +624,31 @@ export function MediaGallery({ room, onClose }: MediaGalleryProps) {
   return (
     <>
       <Box
-        className={classNames(css.MediaGalleryDrawer, ContainerColor({ variant: 'Surface' }))}
+        className={classNames(css.MediaGalleryDrawer, ContainerColor({ variant: 'Background' }))}
         direction="Column"
       >
         {/* Header */}
-        <Header variant="Surface" size="600" className={css.MediaGalleryHeader}>
+        <Header variant="Background" size="600" className={css.MediaGalleryHeader}>
           <Box grow="Yes" alignItems="Center" gap="200">
             <Icon size="200" src={Icons.Photo} />
             <Box grow="Yes">
-              <Text size="H5" truncate>
+              <Text size="H4" truncate>
                 Media Gallery
               </Text>
             </Box>
-            {events.length > 0 && (
-              <Text size="T200" priority="300" style={{ flexShrink: 0 }}>
-                {events.length}
-              </Text>
-            )}
-            <TooltipProvider
-              position="Bottom"
-              align="End"
-              offset={4}
-              tooltip={
-                <Tooltip>
-                  <Text>Close</Text>
-                </Tooltip>
-              }
-            >
-              {(ref) => (
-                <IconButton ref={ref} variant="Background" aria-label="Close" onClick={onClose}>
-                  <Icon src={Icons.Cross} />
-                </IconButton>
-              )}
-            </TooltipProvider>
+            <IconButton size="300" radii="300" aria-label="Close media gallery" onClick={onClose}>
+              <Icon src={Icons.Cross} />
+            </IconButton>
           </Box>
         </Header>
 
         {/* Tabs */}
-        <Box
-          shrink="No"
-          gap="100"
-          style={{ padding: `${config.space.S200} ${config.space.S200} 0` }}
-        >
+        <Box className={css.MediaGalleryTabs} shrink="No">
           {(Object.keys(TAB_LABELS) as GalleryTab[]).map((t) => (
             <TabButton
               key={t}
               label={TAB_LABELS[t]}
+              count={tabCounts[t]}
               active={tab === t}
               onClick={() => handleTabChange(t)}
             />
@@ -728,7 +658,7 @@ export function MediaGallery({ room, onClose }: MediaGalleryProps) {
         {/* Content */}
         <Box grow="Yes" style={{ position: 'relative', overflow: 'hidden' }}>
           <Scroll variant="Background" size="300" visibility="Hover" hideTrack>
-            <Box direction="Column" style={{ padding: config.space.S200, gap: 0 }}>
+            <Box className={css.MediaGalleryContent} direction="Column">
               {/* ── Image / video grid ── */}
               {(tab === 'image' || tab === 'video') && (
                 <>
@@ -752,20 +682,14 @@ export function MediaGallery({ room, onClose }: MediaGalleryProps) {
                   {(() => {
                     let flatIdx = 0;
                     return monthGroups.map((group) => (
-                      <Box
-                        key={group.label}
-                        direction="Column"
-                        style={{ marginBottom: config.space.S200 }}
-                      >
-                        {/* Month header — only shown when there are multiple groups */}
-                        {monthGroups.length > 1 && <MonthSeparator label={group.label} />}
-                        <div
-                          style={{
-                            display: 'grid',
-                            gridTemplateColumns: 'repeat(3, 1fr)',
-                            gap: config.space.S100,
-                          }}
-                        >
+                      <Box key={group.label} direction="Column" className={css.MediaGalleryGroup}>
+                        {/* Month label — only shown when there are multiple groups */}
+                        {monthGroups.length > 1 && (
+                          <Text className={css.MediaGalleryGroupLabel} size="L400" priority="300">
+                            {group.label}
+                          </Text>
+                        )}
+                        <div className={css.MediaGalleryGrid}>
                           {group.events.map((mEvent) => {
                             const c = mEvent.getContent();
                             const isEnc = !!c.file;
@@ -843,8 +767,7 @@ export function MediaGallery({ room, onClose }: MediaGalleryProps) {
                           style={{
                             padding: `${config.space.S200} ${config.space.S300}`,
                             borderRadius: config.radii.R300,
-                            border: `1px solid ${color.Surface.ContainerLine}`,
-                            background: color.Surface.Container,
+                            background: color.SurfaceVariant.Container,
                           }}
                         >
                           <Icon size="300" src={Icons.File} />
@@ -862,7 +785,7 @@ export function MediaGallery({ room, onClose }: MediaGalleryProps) {
                             </Text>
                           </Box>
                           <IconButton
-                            variant="Background"
+                            variant="SurfaceVariant"
                             size="300"
                             radii="300"
                             aria-label={`Download ${body}`}