fix(ui): resolve 29 native UI/UX inconsistencies from folds design audit

Fixes N1–N94 findings from LOTUS_BUGS.md audit pass. Key changes:

- ProfileDecoration: raw <button> → folds <Button> for save/remove; remove
  undefined --accent-cyan var
- UserRoomProfile: textarea border uses color.SurfaceVariant.ContainerLine
  and config tokens instead of undefined --border-interactive var
- LotusToastContainer: z-index raised from 9997 → 10001 so toasts appear
  above Night Light overlay (9998) and modals (9999)
- Message.tsx: DeliveryStatus replaces Unicode glyphs with Icon components;
  MessageQuickReactions returns null instead of <span />; forward menu item
  gets correct size="100" on after icon
- AudioContent: speed chip variant/radii now matches Play chip (Secondary/300)
- ReadReceiptAvatars: pill border/radius/padding → folds config tokens;
  remove dead receipt-pill-btn className
- EventReaders: Header size 600→500; close button gets radii="300";
  borderBottom shorthand → borderBottomWidth token; remove raw fontSize
- General.tsx: selected background/seasonal picker border uses
  color.Primary.Main instead of color.Critical.Main (error red)
- RoomInsights: SectionHeader drops textTransform/letterSpacing/opacity;
  chart borderRadius → config tokens; remove raw fontSize:9;
  warning banner → SequenceCard
- RoomProfile.tsx: formatting toolbar raw <button> → folds <Button>;
  topic read-mode renders formatted_body via sanitizeCustomHtml
- MsgTypeRenderers: location Open button Chip→Button; opacity:0.65→priority
- UploadCardRenderer: caption raw <input> → folds <Input>
- VoiceMessageRecorder: replace undefined --bg-surface-variant/--tc-*
  vars with color.* tokens; replace bare <audio controls> with
  IconButton play/pause toggle
- App.tsx: mention highlight uses WCAG 2.1 relative luminance (gamma
  linearization) instead of simplified approximation; border now rgba
  semi-transparent instead of same color as background
- RoomNavItem: Mute MenuItem icon moved to before prop
- SearchFilters: HasLink chip variant="Success" outlined to match filter bar
- RoomViewHeader: Server Notice chip radii Pill→300; fix jotai import order
- Fix ESLint import/order errors in DeviceVerificationSetup, RoomTopicViewer,
  MediaGallery, and RoomViewHeader

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

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} />