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/features/settings/account/ProfileDecoration.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { Box, Text, Spinner } from 'folds';
+import { Box, Button, Text, Spinner, color } from 'folds';
 import { Method } from 'matrix-js-sdk';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
@@ -170,51 +170,36 @@ export function ProfileDecoration() {
                 : 'None'}
             </Text>
             {selected && (
-              <button
+              <Button
                 type="button"
+                size="300"
+                radii="300"
+                variant="Critical"
+                fill="None"
                 onClick={handleClear}
-                style={{
-                  background: 'none',
-                  border: 'none',
-                  padding: 0,
-                  cursor: 'pointer',
-                  color: 'var(--tc-surface-low-contrast)',
-                  fontSize: '0.8rem',
-                  textAlign: 'left',
-                }}
               >
-                Remove
-              </button>
+                <Text size="B300">Remove</Text>
+              </Button>
             )}
           </Box>
           {hasChanges && (
-            <button
+            <Button
               type="button"
+              size="400"
+              radii="300"
+              variant="Success"
+              fill="Solid"
               onClick={handleSave}
               disabled={saving}
-              style={{
-                padding: '6px 14px',
-                borderRadius: 6,
-                border: '1px solid var(--accent-cyan)',
-                background: 'transparent',
-                color: 'var(--accent-cyan)',
-                cursor: saving ? 'not-allowed' : 'pointer',
-                fontSize: '0.85rem',
-                display: 'flex',
-                alignItems: 'center',
-                gap: 6,
-                opacity: saving ? 0.6 : 1,
-                flexShrink: 0,
-              }}
+              before={saving ? <Spinner size="100" variant="Success" /> : undefined}
             >
-              {saving && <Spinner size="100" variant="Secondary" />}
-              {saving ? 'Saving…' : 'Save'}
-            </button>
+              <Text size="B300">{saving ? 'Saving…' : 'Save'}</Text>
+            </Button>
           )}
         </Box>
 
         {saveState.status === AsyncStatus.Error && (
-          <Text size="T200" style={{ color: 'var(--tc-critical-normal)' }}>
+          <Text size="T200" style={{ color: color.Critical.Main }}>
             Failed to save. Try again.
           </Text>
         )}