fix(ui): report modals use folds Dialog shell (N63)

ReportRoomModal/ReportUserModal rendered as <Box as="form" role="dialog">
with inline background/borderRadius(R400)/boxShadow. Switch both to
<Dialog as="form" variant="Surface"> so the surface (background, R300 radius,
shadow) comes from the design system, matching MessageReportItem and every
other message-action modal.

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

src/app/features/room/ReportRoomModal.tsx

@@ -5,6 +5,7 @@ import {
   Text,
   Input,
   Button,
+  Dialog,
   IconButton,
   Icon,
   Icons,
@@ -94,19 +95,14 @@ export function ReportRoomModal({ roomId, onClose }: ReportRoomModalProps) {
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Box
+          <Dialog
             as="form"
+            variant="Surface"
             role="dialog"
             aria-modal="true"
             aria-labelledby="report-room-dialog-title"
             onSubmit={handleSubmit}
-            direction="Column"
-            style={{
-              background: color.Surface.Container,
-              borderRadius: config.radii.R400,
-              boxShadow: color.Other.Shadow,
-              ...modalStyle,
-            }}
+            style={modalStyle}
           >
             <Header
               style={{
@@ -206,7 +202,7 @@ export function ReportRoomModal({ roomId, onClose }: ReportRoomModalProps) {
                 </Button>
               </Box>
             </Box>
-          </Box>
+          </Dialog>
         </FocusTrap>
       </OverlayCenter>
     </Overlay>

src/app/features/room/ReportUserModal.tsx

@@ -5,6 +5,7 @@ import {
   Text,
   Input,
   Button,
+  Dialog,
   IconButton,
   Icon,
   Icons,
@@ -100,19 +101,14 @@ export function ReportUserModal({ userId, onClose }: ReportUserModalProps) {
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Box
+          <Dialog
             as="form"
+            variant="Surface"
             role="dialog"
             aria-modal="true"
             aria-labelledby="report-user-dialog-title"
             onSubmit={handleSubmit}
-            direction="Column"
-            style={{
-              background: color.Surface.Container,
-              borderRadius: config.radii.R400,
-              boxShadow: color.Other.Shadow,
-              ...modalStyle,
-            }}
+            style={modalStyle}
           >
             <Header
               style={{
@@ -212,7 +208,7 @@ export function ReportUserModal({ userId, onClose }: ReportUserModalProps) {
                 </Button>
               </Box>
             </Box>
-          </Box>
+          </Dialog>
         </FocusTrap>
       </OverlayCenter>
     </Overlay>