fix(ui): native inputs/checkboxes, QR fallback, focus + report modal cleanup

- N23 RoomServerACL: raw text input -> folds Input; raw checkbox -> folds Checkbox
- N24 PolicyListViewer: raw room-id input -> folds Input (Critical variant on error)
- N25 ExportRoomHistory: raw <input type="date"> x2 -> folds Input
- N26 RoomShareInvite: QR <img> gets loading="lazy" + onError fallback card
  ("QR code unavailable") instead of a broken-image icon
- N27 GifPicker: FocusTrap returnFocusOnDeactivate:false (matches EmojiBoard)
- N76 Report modals: drop redundant Cancel button (dismiss via header x /
  click-outside, like MessageReportItem)
- N5 ReadReceiptAvatars: hover/focus moved to co-located css :hover/:focus-visible
  (removed JS onMouseEnter/Leave .style mutation)

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

src/app/features/room-settings/PolicyListViewer.tsx

@@ -1,5 +1,17 @@
 import React, { useCallback, useRef, useState } from 'react';
-import { Badge, Box, Button, Icon, IconButton, Icons, Scroll, Text, color, config } from 'folds';
+import {
+  Badge,
+  Box,
+  Button,
+  Icon,
+  IconButton,
+  Icons,
+  Input,
+  Scroll,
+  Text,
+  color,
+  config,
+} from 'folds';
 import { EventTimeline, MatrixEvent, Room } from 'matrix-js-sdk';
 import { Page, PageContent, PageHeader } from '../../components/page';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
@@ -242,7 +254,7 @@ export function PolicyListViewer({ requestClose }: PolicyListViewerProps) {
                   gap="300"
                 >
                   <Box gap="200" alignItems="Center">
-                    <input
+                    <Input
                       ref={inputRef}
                       value={roomIdInput}
                       onChange={(e) => setRoomIdInput(e.target.value)}
@@ -250,17 +262,10 @@ export function PolicyListViewer({ requestClose }: PolicyListViewerProps) {
                         if (e.key === 'Enter') handleLoad();
                       }}
                       placeholder="!roomId:server or #alias:server"
-                      style={{
-                        flexGrow: 1,
-                        padding: `${config.space.S200} ${config.space.S300}`,
-                        borderRadius: config.radii.R300,
-                        border: `1px solid ${error ? color.Critical.Main : color.Surface.ContainerLine}`,
-                        background: color.Surface.Container,
-                        color: color.Surface.OnContainer,
-                        fontSize: 'inherit',
-                        fontFamily: 'inherit',
-                        outline: 'none',
-                      }}
+                      variant={error ? 'Critical' : 'Secondary'}
+                      size="400"
+                      radii="300"
+                      style={{ flexGrow: 1 }}
                     />
                     <Button
                       onClick={handleLoad}