feat: Remind Me Later, mobile bookmarks, bug fixes, and doc cleanup

Features:
- Remind Me Later: message context menu item opens a preset time picker
  (20 min / 1 hr / 3 hr / tomorrow 9am); reminders persist to Matrix
  account data (io.lotus.reminders); ReminderMonitor fires a Lotus Toast
  when due, checks every 30s and on tab focus
- Mobile Bookmarks: BookmarksPanel now renders on all screen sizes;
  passes isMobile prop for full-screen absolute overlay on mobile

Bug fixes:
- usePan.ts: memory leak from stale closure in document listener cleanup
- EventReaders.tsx: replace hardcoded hex colors with TDS CSS variables
- CallControls.tsx: replace hardcoded hex colors with TDS CSS variables
- CustomHtml.css.ts: replace hardcoded yellow/black highlight with theme tokens

Docs:
- LOTUS_TODO.md: restore deleted content (Confirmed facts table, Pending
  Audits, P5-30 completed status, full feature descriptions), keep new
  additions (P4-7/8/9, P5-41–57, Implementation Reference), eliminate
  duplicate sections
- LOTUS_BUGS.md: merge RESILIENCE_AUDIT.md findings into Architectural &
  Resilience Audit table; delete RESILIENCE_AUDIT.md
- Remove stale LOTUS_DENOISE_ENGINEERING_REVIEW.md and LOTUS_TODO_REFERENCE.md

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

src/app/features/room/message/Message.tsx

@@ -81,6 +81,7 @@ import { PowerIcon } from '../../../components/power';
 import colorMXID from '../../../../util/colorMXID';
 import { getPowerTagIconSrc } from '../../../hooks/useMemberPowerTag';
 import { ForwardMessageDialog } from './ForwardMessageDialog';
+import { RemindMeDialog } from './RemindMeDialog';
 import { useBookmarks } from '../../../hooks/useBookmarks';
 import { PresenceRingAvatar } from '../../../components/presence';
 import { AvatarDecoration } from '../../../components/avatar-decoration/AvatarDecoration';
@@ -809,6 +810,7 @@ export const Message = React.memo(
       const [menuAnchor, setMenuAnchor] = useState<RectCords>();
       const [emojiBoardAnchor, setEmojiBoardAnchor] = useState<RectCords>();
       const [forwardOpen, setForwardOpen] = useState(false);
+      const [remindOpen, setRemindOpen] = useState(false);
       const { addBookmark, removeBookmark, isBookmarked } = useBookmarks();
 
       const senderDisplayName =
@@ -1204,6 +1206,26 @@ export const Message = React.memo(
                                 </Text>
                               </MenuItem>
                             )}
+                            {!mEvent.isRedacted() && mEvent.getId() && (
+                              <MenuItem
+                                size="300"
+                                after={<Icon size="100" src={Icons.Clock} />}
+                                radii="300"
+                                onClick={() => {
+                                  setRemindOpen(true);
+                                  closeMenu();
+                                }}
+                              >
+                                <Text
+                                  className={css.MessageMenuItemText}
+                                  as="span"
+                                  size="T300"
+                                  truncate
+                                >
+                                  Remind Me
+                                </Text>
+                              </MenuItem>
+                            )}
                             {!isThreadedMessage && (
                               <MenuItem
                                 size="300"
@@ -1372,6 +1394,14 @@ export const Message = React.memo(
           {forwardOpen && (
             <ForwardMessageDialog mEvent={mEvent} onClose={() => setForwardOpen(false)} />
           )}
+          {remindOpen && mEvent.getId() && (
+            <RemindMeDialog
+              roomId={room.roomId}
+              eventId={mEvent.getId()!}
+              previewText={(mEvent.getContent()?.body as string | undefined)?.slice(0, 120) ?? ''}
+              onClose={() => setRemindOpen(false)}
+            />
+          )}
         </MessageBase>
       );
     },

src/app/features/room/message/RemindMeDialog.tsx

@@ -0,0 +1,122 @@
+import React, { useMemo } from 'react';
+import FocusTrap from 'focus-trap-react';
+import {
+  Box,
+  Button,
+  Header,
+  Icon,
+  IconButton,
+  Icons,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  Text,
+  config,
+} from 'folds';
+import { stopPropagation } from '../../../utils/keyboard';
+import { useReminders } from '../../../hooks/useReminders';
+
+type RemindMeDialogProps = {
+  roomId: string;
+  eventId: string;
+  previewText: string;
+  onClose: () => void;
+};
+
+function getPresets(): Array<{ label: string; ms: number }> {
+  const tomorrow = new Date();
+  tomorrow.setDate(tomorrow.getDate() + 1);
+  tomorrow.setHours(9, 0, 0, 0);
+  const tomorrowMs = tomorrow.getTime() - Date.now();
+  const timeLabel = tomorrow.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  return [
+    { label: 'In 20 minutes', ms: 20 * 60_000 },
+    { label: 'In 1 hour', ms: 60 * 60_000 },
+    { label: 'In 3 hours', ms: 3 * 60 * 60_000 },
+    { label: `Tomorrow at ${timeLabel}`, ms: tomorrowMs },
+  ];
+}
+
+export function RemindMeDialog({ roomId, eventId, previewText, onClose }: RemindMeDialogProps) {
+  const { addReminder } = useReminders();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const presets = useMemo(() => getPresets(), []);
+
+  const handlePick = async (ms: number) => {
+    await addReminder({
+      roomId,
+      eventId,
+      timestamp: Date.now() + ms,
+      message: previewText || 'Reminder',
+    });
+    onClose();
+  };
+
+  return (
+    <Overlay open backdrop={<OverlayBackdrop />}>
+      <OverlayCenter>
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            returnFocusOnDeactivate: false,
+            onDeactivate: onClose,
+            clickOutsideDeactivates: true,
+            escapeDeactivates: stopPropagation,
+          }}
+        >
+          <Box
+            direction="Column"
+            style={{
+              width: 300,
+              borderRadius: 12,
+              background: 'var(--bg-surface)',
+              border: '1px solid var(--bg-surface-border)',
+              overflow: 'hidden',
+            }}
+          >
+            <Header variant="Surface" size="500">
+              <Box grow="Yes" alignItems="Center" gap="200">
+                <Icon size="100" src={Icons.Clock} />
+                <Text size="H4">Remind Me</Text>
+              </Box>
+              <IconButton size="300" onClick={onClose} aria-label="Close">
+                <Icon src={Icons.Cross} />
+              </IconButton>
+            </Header>
+            {previewText && (
+              <Box
+                style={{
+                  padding: `${config.space.S100} ${config.space.S400}`,
+                  borderBottom: '1px solid var(--bg-surface-border)',
+                }}
+              >
+                <Text size="T200" priority="300" truncate>
+                  {previewText}
+                </Text>
+              </Box>
+            )}
+            <Box
+              direction="Column"
+              gap="100"
+              style={{ padding: `${config.space.S200} ${config.space.S200} ${config.space.S300}` }}
+            >
+              {presets.map((p) => (
+                <Button
+                  key={p.label}
+                  variant="Secondary"
+                  fill="Soft"
+                  size="300"
+                  radii="300"
+                  style={{ justifyContent: 'flex-start' }}
+                  onClick={() => handlePick(p.ms)}
+                >
+                  <Text size="B300">{p.label}</Text>
+                </Button>
+              ))}
+            </Box>
+          </Box>
+        </FocusTrap>
+      </OverlayCenter>
+    </Overlay>
+  );
+}