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/room-settings/RoomInsights.tsx

@@ -2,6 +2,7 @@ import React, { useMemo } from 'react';
 import { Avatar, Box, Icon, IconButton, Icons, Scroll, Text, color, config } from 'folds';
 import { EventType } from 'matrix-js-sdk';
 import { Page, PageContent, PageHeader } from '../../components/page';
+import { SequenceCard } from '../../components/sequence-card';
 import { useRoom } from '../../hooks/useRoom';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
@@ -23,14 +24,7 @@ function formatDate(ts: number): string {
 
 function SectionHeader({ label }: { label: string }) {
   return (
-    <Text
-      size="L400"
-      style={{
-        textTransform: 'uppercase',
-        letterSpacing: '0.06em',
-        opacity: 0.6,
-      }}
-    >
+    <Text size="L400" priority="300">
       {label}
     </Text>
   );
@@ -165,31 +159,22 @@ export function RoomInsights({ requestClose }: RoomInsightsProps) {
           <PageContent>
             <Box direction="Column" gap="500">
               {/* ── Disclaimer banner ── */}
-              <Box
-                alignItems="Center"
-                gap="200"
-                style={{
-                  padding: `${config.space.S200} ${config.space.S300}`,
-                  borderRadius: config.radii.R300,
-                  border: `1px solid ${color.Warning.Main}`,
-                  background: color.Warning.Container,
-                }}
-              >
-                <Icon src={Icons.Warning} size="200" />
+              <SequenceCard variant="SurfaceVariant" gap="200" alignItems="Center">
+                <Icon src={Icons.Warning} size="200" style={{ color: color.Warning.Main }} />
                 <Box direction="Column" gap="100">
-                  <Text size="T300" style={{ color: color.Warning.OnContainer }}>
+                  <Text size="T300">
                     <strong>
                       Based on {stats.totalMessages} locally cached message
                       {stats.totalMessages !== 1 ? 's' : ''}
                     </strong>
                   </Text>
                   {stats.oldestTs !== null && stats.newestTs !== null && (
-                    <Text size="T200" style={{ color: color.Warning.OnContainer, opacity: 0.8 }}>
+                    <Text size="T200" priority="300">
                       from {formatDate(stats.oldestTs)} to {formatDate(stats.newestTs)}
                     </Text>
                   )}
                 </Box>
-              </Box>
+              </SequenceCard>
 
               {/* ── Summary row ── */}
               <Box direction="Column" gap="200">
@@ -350,7 +335,7 @@ export function RoomInsights({ requestClose }: RoomInsightsProps) {
                                   height: 6,
                                   width: barWidth,
                                   background: color.Primary.Main,
-                                  borderRadius: 3,
+                                  borderRadius: config.radii.R300,
                                   transition: 'width 0.3s ease',
                                   flexShrink: 0,
                                 }}
@@ -432,7 +417,7 @@ export function RoomInsights({ requestClose }: RoomInsightsProps) {
                               count > 0 && count === maxHour
                                 ? color.Primary.Main
                                 : color.SurfaceVariant.Container,
-                            borderRadius: '2px 2px 0 0',
+                            borderRadius: `${config.radii.R300} ${config.radii.R300} 0 0`,
                             transition: 'height 0.2s ease',
                           }}
                         />
@@ -445,7 +430,7 @@ export function RoomInsights({ requestClose }: RoomInsightsProps) {
                     {stats.hourBuckets.map((_, h) => (
                       <Box key={h} justifyContent="Center" style={{ flex: 1 }}>
                         {h % 6 === 0 ? (
-                          <Text size="T200" priority="300" align="Center" style={{ fontSize: 9 }}>
+                          <Text size="T200" priority="300" align="Center">
                             {h}
                           </Text>
                         ) : null}