feat: MSC4260 Report User, Bug #6 mutual exclusion, TDS toast compliance

- Add ReportUserModal.tsx — category dropdown + reason input, calls
  POST /_matrix/client/v3/users/{userId}/report via mx.http.authedRequest,
  inline success/error feedback, auto-closes 1500ms after success
- Wire Report User button into UserRoomProfile.tsx between UserModeration
  and UserDeviceSessions (hidden for own profile)
- Bug #6: enforce mutual exclusion between chat backgrounds and seasonal
  themes — ChatBgGrid clears seasonal→'off' on non-'none' pick;
  SeasonalBgGrid clears chatBackground→'none' on real theme pick;
  SeasonalEffect guards against legacy persisted state at render time
- TDS: strip all hardcoded hex/rgba fallbacks from LotusToastContainer.tsx
  (var(--lt-bg-card), --lt-accent-orange, --lt-text-primary/secondary,
  --lt-accent-orange-dim/border, --lt-box-glow-orange)
- Mark Bug #6 FIXED, MSC4260 DONE, toast TDS FIXED in LOTUS_BUGS.md and
  LOTUS_TODO.md; note EventReaders + CallControls already compliant

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

src/app/components/seasonal/SeasonalEffect.tsx

@@ -797,5 +797,9 @@ export function SeasonalEffect() {
   }, [settings.seasonalThemeOverride]);
 
   if (!theme) return null;
+  // Suppress seasonal overlay when a chat background is active — both running simultaneously
+  // wastes GPU and looks cluttered. The settings UI enforces mutual exclusion on write;
+  // this guard covers any legacy state already persisted.
+  if (settings.chatBackground !== 'none') return null;
   return <SeasonalOverlay theme={theme} reduced={reduced} />;
 }

src/app/components/user-profile/UserRoomProfile.tsx

@@ -28,6 +28,7 @@ import { Membership } from '../../../types/matrix/room';
 import { useRoomCreators } from '../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../hooks/useRoomPermissions';
 import { useMemberPowerCompare } from '../../hooks/useMemberPowerCompare';
+import { ReportUserModal } from '../../features/room/ReportUserModal';
 import { CreatorChip } from './CreatorChip';
 import { getDirectCreatePath, withSearchParam } from '../../pages/pathUtils';
 import { DirectCreateSearchParams } from '../../pages/paths';
@@ -272,6 +273,7 @@ type UserRoomProfileProps = {
 };
 export function UserRoomProfile({ userId }: UserRoomProfileProps) {
   const mx = useMatrixClient();
+  const [reportUserOpen, setReportUserOpen] = useState(false);
   const crossSigningActive = useCrossSigningActive();
   const useAuthentication = useMediaAuthentication();
   const navigate = useNavigate();
@@ -390,8 +392,25 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
           canKick={canKickUser && membership === Membership.Join}
           canBan={canBanUser && membership !== Membership.Ban}
         />
+        {userId !== myUserId && (
+          <Box style={{ padding: `0 ${config.space.S400} ${config.space.S200}` }}>
+            <Button
+              variant="Critical"
+              fill="None"
+              size="300"
+              radii="300"
+              before={<Icon size="50" src={Icons.Warning} />}
+              onClick={() => setReportUserOpen(true)}
+            >
+              <Text size="B300">Report User</Text>
+            </Button>
+          </Box>
+        )}
         {showEncryption && userId !== myUserId && <UserDeviceSessions userId={userId} />}
         {userId !== myUserId && <UserPrivateNotes userId={userId} />}
+        {reportUserOpen && (
+          <ReportUserModal userId={userId} onClose={() => setReportUserOpen(false)} />
+        )}
       </Box>
     </Box>
   );

src/app/features/room/ReportUserModal.tsx

@@ -0,0 +1,223 @@
+import React, { FormEventHandler, useCallback, useEffect, useState } from 'react';
+import FocusTrap from 'focus-trap-react';
+import {
+  Box,
+  Text,
+  Input,
+  Button,
+  IconButton,
+  Icon,
+  Icons,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  Header,
+  config,
+  color,
+  Spinner,
+} from 'folds';
+import { Method } from 'matrix-js-sdk';
+import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { stopPropagation } from '../../utils/keyboard';
+
+type ReportCategory = 'spam' | 'harassment' | 'inappropriate' | 'other';
+
+const CATEGORY_LABELS: Record<ReportCategory, string> = {
+  spam: 'Spam',
+  harassment: 'Harassment',
+  inappropriate: 'Inappropriate Content',
+  other: 'Other',
+};
+
+type ReportUserModalProps = {
+  userId: string;
+  onClose: () => void;
+};
+
+export function ReportUserModal({ userId, onClose }: ReportUserModalProps) {
+  const mx = useMatrixClient();
+  const [category, setCategory] = useState<ReportCategory>('spam');
+
+  const [reportState, submitReport] = useAsyncCallback(
+    useCallback(
+      async (reason: string) => {
+        await mx.http.authedRequest(
+          Method.Post,
+          `/users/${encodeURIComponent(userId)}/report`,
+          undefined,
+          { reason },
+        );
+      },
+      [mx, userId],
+    ),
+  );
+
+  useEffect(() => {
+    if (reportState.status === AsyncStatus.Success) {
+      const timer = setTimeout(onClose, 1500);
+      return () => clearTimeout(timer);
+    }
+    return undefined;
+  }, [reportState.status, onClose]);
+
+  const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
+    evt.preventDefault();
+    if (reportState.status === AsyncStatus.Loading || reportState.status === AsyncStatus.Success) {
+      return;
+    }
+    const target = evt.target as HTMLFormElement;
+    const reasonInput = target.elements.namedItem('reasonInput') as HTMLInputElement | null;
+    const reasonText = reasonInput?.value.trim() ?? '';
+    const fullReason = `[${CATEGORY_LABELS[category]}] ${reasonText}`;
+    submitReport(fullReason);
+  };
+
+  const reportError =
+    reportState.status === AsyncStatus.Error
+      ? (reportState.error as { errcode?: string; httpStatus?: number })
+      : undefined;
+  const errcode = reportError?.errcode;
+  const errorMsg =
+    errcode === 'M_LIMIT_EXCEEDED'
+      ? 'You are being rate limited. Please wait before reporting again.'
+      : errcode === 'M_FORBIDDEN'
+        ? 'You cannot report this user.'
+        : errcode === 'M_UNRECOGNIZED' || reportError?.httpStatus === 404
+          ? 'User reporting is not supported by your homeserver.'
+          : 'Failed to submit report. Please try again.';
+
+  return (
+    <Overlay open backdrop={<OverlayBackdrop />}>
+      <OverlayCenter>
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            onDeactivate: onClose,
+            clickOutsideDeactivates: true,
+            escapeDeactivates: stopPropagation,
+          }}
+        >
+          <Box
+            as="form"
+            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,
+              width: '100%',
+              maxWidth: 420,
+              overflow: 'hidden',
+            }}
+          >
+            <Header
+              style={{
+                padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
+                borderBottomWidth: config.borderWidth.B300,
+              }}
+              variant="Surface"
+              size="500"
+            >
+              <Box grow="Yes">
+                <Text id="report-user-dialog-title" size="H4">
+                  Report User
+                </Text>
+              </Box>
+              <IconButton size="300" onClick={onClose} radii="300" aria-label="Close">
+                <Icon src={Icons.Cross} />
+              </IconButton>
+            </Header>
+
+            <Box direction="Column" gap="400" style={{ padding: config.space.S400 }}>
+              <Text priority="400">
+                Report this user to your homeserver admins. Please describe the issue below.
+              </Text>
+
+              <Box direction="Column" gap="100">
+                <Text as="label" htmlFor="report-user-category" size="L400">
+                  Category
+                </Text>
+                <Box
+                  as="select"
+                  id="report-user-category"
+                  aria-label="Report category"
+                  value={category}
+                  onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
+                    setCategory(e.target.value as ReportCategory)
+                  }
+                  style={{
+                    padding: `${config.space.S200} ${config.space.S300}`,
+                    borderRadius: config.radii.R300,
+                    border: `1px solid ${color.Surface.ContainerLine}`,
+                    background: color.Surface.Container,
+                    color: color.Surface.OnContainer,
+                    fontSize: 'inherit',
+                    fontFamily: 'inherit',
+                    width: '100%',
+                  }}
+                >
+                  {(Object.keys(CATEGORY_LABELS) as ReportCategory[]).map((key) => (
+                    <option key={key} value={key}>
+                      {CATEGORY_LABELS[key]}
+                    </option>
+                  ))}
+                </Box>
+              </Box>
+
+              <Box direction="Column" gap="100">
+                <Text as="label" htmlFor="report-user-reason-input" size="L400">
+                  Reason
+                </Text>
+                <Input
+                  id="report-user-reason-input"
+                  name="reasonInput"
+                  aria-label="Reason for report"
+                  variant="Background"
+                  required
+                />
+                {reportState.status === AsyncStatus.Error && (
+                  <Text style={{ color: color.Critical.Main }} size="T300">
+                    {errorMsg}
+                  </Text>
+                )}
+                {reportState.status === AsyncStatus.Success && (
+                  <Text style={{ color: color.Success.Main }} size="T300">
+                    User has been reported to the server.
+                  </Text>
+                )}
+              </Box>
+
+              <Box gap="200" justifyContent="End">
+                <Button type="button" variant="Secondary" fill="None" radii="300" onClick={onClose}>
+                  <Text size="B400">Cancel</Text>
+                </Button>
+                <Button
+                  type="submit"
+                  variant="Critical"
+                  radii="300"
+                  before={
+                    reportState.status === AsyncStatus.Loading ? (
+                      <Spinner fill="Solid" variant="Critical" size="200" />
+                    ) : undefined
+                  }
+                  aria-disabled={
+                    reportState.status === AsyncStatus.Loading ||
+                    reportState.status === AsyncStatus.Success
+                  }
+                >
+                  <Text size="B400">
+                    {reportState.status === AsyncStatus.Loading ? 'Reporting...' : 'Report User'}
+                  </Text>
+                </Button>
+              </Box>
+            </Box>
+          </Box>
+        </FocusTrap>
+      </OverlayCenter>
+    </Overlay>
+  );
+}

src/app/features/settings/general/General.tsx

@@ -432,6 +432,7 @@ function Appearance() {
     settingsAtom,
     'seasonalThemeOverride',
   );
+  const [, setChatBackground] = useSetting(settingsAtom, 'chatBackground');
 
   return (
     <Box direction="Column" gap="100">
@@ -512,7 +513,10 @@ function Appearance() {
         <Box style={{ padding: `0 ${config.space.S400} ${config.space.S300}` }}>
           <SeasonalBgGrid
             value={seasonalThemeOverride ?? 'auto'}
-            onChange={(v) => setSeasonalThemeOverride(v)}
+            onChange={(v) => {
+              setSeasonalThemeOverride(v);
+              if (v !== 'auto' && v !== 'off') setChatBackground('none');
+            }}
           />
         </Box>
       </SequenceCard>
@@ -1671,6 +1675,7 @@ function SeasonalBgGrid({
 
 function ChatBgGrid() {
   const [chatBackground, setChatBackground] = useSetting(settingsAtom, 'chatBackground');
+  const [, setSeasonalThemeOverride] = useSetting(settingsAtom, 'seasonalThemeOverride');
   const [pauseAnimations] = useSetting(settingsAtom, 'pauseAnimations');
   const theme = useTheme();
   const isDark = theme.kind === ThemeKind.Dark;
@@ -1683,7 +1688,10 @@ function ChatBgGrid() {
             type="button"
             aria-label={opt.label}
             aria-pressed={chatBackground === opt.value}
-            onClick={() => setChatBackground(opt.value as ChatBackground)}
+            onClick={() => {
+              setChatBackground(opt.value as ChatBackground);
+              if (opt.value !== 'none') setSeasonalThemeOverride('off');
+            }}
             style={{
               display: 'block',
               width: toRem(76),

src/app/features/toast/LotusToastContainer.tsx

@@ -53,13 +53,13 @@ function ToastCard({ toast }: ToastCardProps) {
 
   const cardStyle: CSSProperties = {
     position: 'relative',
-    background: 'var(--lt-bg-card, #1a1a2e)',
-    border: '1px solid var(--lt-border-color, rgba(255,255,255,0.1))',
+    background: 'var(--lt-bg-card)',
+    border: '1px solid var(--lt-border-color)',
     borderRadius: '12px',
     padding: '12px 14px',
     minWidth: '280px',
     maxWidth: '340px',
-    boxShadow: 'var(--lt-box-glow-orange, 0 4px 16px rgba(0,0,0,0.4))',
+    boxShadow: 'var(--lt-box-glow-orange)',
     cursor: 'pointer',
     animation: 'lotusToastIn 0.2s ease-out both',
     userSelect: 'none',
@@ -84,19 +84,19 @@ function ToastCard({ toast }: ToastCardProps) {
     width: '24px',
     height: '24px',
     borderRadius: '50%',
-    background: 'var(--lt-accent-orange-dim, rgba(255,107,0,0.15))',
-    border: '1px solid var(--lt-accent-orange-border, rgba(255,107,0,0.35))',
+    background: 'var(--lt-accent-orange-dim)',
+    border: '1px solid var(--lt-accent-orange-border)',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
     fontSize: '10px',
     fontWeight: 700,
-    color: 'var(--lt-accent-orange, #ff6b00)',
+    color: 'var(--lt-accent-orange)',
     flexShrink: 0,
   };
 
   const nameStyle: CSSProperties = {
-    color: 'var(--lt-accent-orange, #ff6b00)',
+    color: 'var(--lt-accent-orange)',
     fontWeight: 600,
     fontSize: '0.85rem',
     overflow: 'hidden',
@@ -110,7 +110,7 @@ function ToastCard({ toast }: ToastCardProps) {
     right: '10px',
     background: 'none',
     border: 'none',
-    color: 'var(--lt-text-secondary, #7fa3bf)',
+    color: 'var(--lt-text-secondary)',
     cursor: 'pointer',
     fontSize: '14px',
     lineHeight: 1,
@@ -119,7 +119,7 @@ function ToastCard({ toast }: ToastCardProps) {
   };
 
   const bodyStyle: CSSProperties = {
-    color: 'var(--lt-text-primary, #c4d9ee)',
+    color: 'var(--lt-text-primary)',
     fontSize: '0.82rem',
     margin: '4px 0 2px',
     overflow: 'hidden',
@@ -128,7 +128,7 @@ function ToastCard({ toast }: ToastCardProps) {
   };
 
   const roomNameStyle: CSSProperties = {
-    color: 'var(--lt-text-secondary, #7fa3bf)',
+    color: 'var(--lt-text-secondary)',
     fontSize: '0.75rem',
     overflow: 'hidden',
     textOverflow: 'ellipsis',