fix(ui): MediaGallery lightbox uses folds Overlay + FocusTrap (native-cinny audit 8/N)

The full-screen media viewer was a raw <div role="dialog"> rendered in place
with manual focus. Wrapped it in folds Overlay (portal + backdrop, proper
stacking) and FocusTrap (focus management), keeping its own arrow/Escape key
handling. The light-on-dark chrome (#fff over the forced-black media stage) is
kept — it's a justified, always-dark media-viewer scrim, not theme chrome.

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

src/app/features/room/MediaGallery.tsx

@@ -6,6 +6,8 @@ import {
   Icon,
   IconButton,
   Icons,
+  Overlay,
+  OverlayBackdrop,
   Scroll,
   Spinner,
   Text,
@@ -15,6 +17,7 @@ import {
   config,
 } from 'folds';
 import { EventType, MatrixClient, MatrixEvent, MsgType, Room } from 'matrix-js-sdk';
+import FocusTrap from 'focus-trap-react';
 import classNames from 'classnames';
 import { useNearViewport } from '../../hooks/useNearViewport';
 import { IEncryptedFile, IImageInfo, IThumbnailContent } from '../../../types/matrix/common';
@@ -250,7 +253,15 @@ function Lightbox({
   });
 
   return (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    <Overlay open backdrop={<OverlayBackdrop />}>
+      <FocusTrap
+        focusTrapOptions={{
+          initialFocus: false,
+          clickOutsideDeactivates: false,
+          escapeDeactivates: false,
+        }}
+      >
+        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
         <div
           role="dialog"
           aria-modal
@@ -346,6 +357,8 @@ function Lightbox({
             )}
           </Box>
         </div>
+      </FocusTrap>
+    </Overlay>
   );
 }