@novacraft-engineering/mailbox 0.1.0 → 0.2.0

package/app/mail/page.tsx

@@ -8,9 +8,10 @@ import { parseQuery, matchesQuery } from './search'
 import { useConfirm } from './ConfirmDialog'
 import { subscribePush, unsubscribePush, useInstall, useNotifications } from './pwa'
 import RichEditor from './RichEditor'
-import { inlineEmailStyles, htmlToPlainText, dropUnreachableImages, outlookSafeImages } from '@/lib/email-html'
-import { BUILTIN_FONTS, EMPTY_FONT, FONT_SIZES, fontFaceCss, fontStack, type BaseFont, type CustomFont } from '@/lib/fonts'
+import { inlineEmailStyles, htmlToPlainText, dropUnreachableImages, outlookSafeImages, stripOwnPixel } from '@/lib/email-html'
+import { BUILTIN_FONTS, DEFAULT_LINE_SPACING, EMPTY_FONT, FONT_SIZES, LINE_SPACINGS, fontFaceCss, fontStack, lineSpacingOf, type BaseFont, type CustomFont, paragraphGap } from '@/lib/fonts'
 import MailSelect from './MailSelect'
+import Ticker from './Ticker'
 import { applyThreadFlagDeltas, normalizeSubject } from '@/lib/threads'
 import { defaultSignature, fillSignature } from '@/lib/default-signature'
 import styles from './page.module.css'
@@ -115,7 +116,7 @@ type Accessor = {
   invitedBy: string | null
 }
 
-type Folder = 'inbox' | 'starred' | 'sent' | 'scheduled' | 'drafts' | 'archived' | 'trash'
+type Folder = 'inbox' | 'starred' | 'snoozed' | 'sent' | 'scheduled' | 'drafts' | 'archived' | 'trash'
 
 type SentEmail = {
   id: string
@@ -138,7 +139,7 @@ type SentEmail = {
   inReplyTo?: string | null
 }
 
-type DownloadAttachment = { filename: string; size: number; downloadUrl: string; shareId?: string; contentType?: string }
+type DownloadAttachment = { filename: string; size: number; downloadUrl: string; shareId?: string; contentType?: string; contentId?: string }
 
 type SentDetail = SentEmail & {
   cc: string[]
@@ -151,6 +152,7 @@ type SentDetail = SentEmail & {
 
 type ConversationRow = {
   threadId: string
+  snoozedUntil?: string | null
   subject: string
   firstAt: string
   latestAt: string
@@ -169,6 +171,7 @@ type ConversationRow = {
 
 type InboundEmail = {
   id: string
+  snoozedUntil?: string | null
   from: string
   to: string[]
   cc: string[]
@@ -180,7 +183,7 @@ type InboundEmail = {
   headers: Record<string, unknown>
   receivedAt: string
   read: boolean
-  attachments: Array<{ filename: string; contentType?: string; size?: number; shareId?: string; url?: string }>
+  attachments: Array<{ filename: string; contentType?: string; size?: number; shareId?: string; url?: string; contentId?: string }>
   starred: boolean
   archived: boolean
   trashed: boolean
@@ -299,6 +302,7 @@ type MailSettings = {
   uiScale: number
   mobile: string
   replyAllDefault: boolean
+  replyStyle: 'panel' | 'mini'
   notifyEmail: string
   fonts: CustomFont[]
   defaultFont: BaseFont
@@ -306,6 +310,7 @@ type MailSettings = {
 }
 
 const EMAIL_SHAPE = /^[^@\s]+@[^@\s]+\.[^@\s]+$/
+const NOTIFY_NOTICE_KEY = 'mail:notify-notice-until'
 
 const DEFAULT_SETTINGS: MailSettings = {
   signature: '',
@@ -320,6 +325,7 @@ const DEFAULT_SETTINGS: MailSettings = {
   uiScale: 100,
   mobile: '',
   replyAllDefault: false,
+  replyStyle: 'panel',
   fonts: [],
   defaultFont: EMPTY_FONT,
 }
@@ -425,6 +431,14 @@ function inlineMd(src: string): string {
 const asRichHtml = (value: string): string =>
   /<[a-z][\s\S]*>/i.test(value) ? value : markdownToHtml(value)
 
+/** A signature is set solid: single line spacing and no paragraph gaps, whatever the message uses. */
+const tightenSignature = (html: string): string =>
+  html.replace(/<(p|div|li|td|th)(\s[^>]*)?>/gi, (match, tag: string, attrs = '') => {
+    const tight = 'line-height:1;margin:0 0 2px;'
+    if (/\sstyle="/i.test(attrs)) return `<${tag}${attrs.replace(/\sstyle="([^"]*)"/i, (_whole: string, css: string) => ` style="${css.trim().replace(/;?$/, ';')}${tight}"`)}>`
+    return `<${tag}${attrs} style="${tight}">`
+  })
+
 // A long reply chain re-embeds the sender's signature and social icons on every hop, so
 // one message can carry a hundred of them. They are part of the body, not files anyone
 // attached, and listing them buries the two or three real documents.
@@ -504,7 +518,7 @@ function buildEmailHtml(data: ComposeData, signatureHtml: string, fontCss = '',
   const body = data.bodyHtml.trim() ? data.bodyHtml : markdownToHtml(data.markdown)
   const inner = body + (data.useSignature ? signatureHtml : '')
   const fonts = fontCss ? `<style>${fontCss}</style>` : ''
-  return `${fonts}<div style="font-family:${fontStack(base.family)};font-size:${base.size || '15px'};line-height:1.65;color:#030712;">${outlookSafeImages(inlineEmailStyles(inner, base))}</div>${data.quoteHtml ?? ''}`
+  return `${fonts}<div style="font-family:${fontStack(base.family)};font-size:${base.size || '15px'};line-height:${lineSpacingOf(base)};color:#030712;">${outlookSafeImages(inlineEmailStyles(inner, base))}</div>${data.quoteHtml ?? ''}`
 }
 
 function buildEmailText(data: ComposeData, signatureText: string): string {
@@ -580,6 +594,31 @@ function htmlToQuoteText(html: string | null, text: string | null): string {
     .trim()
 }
 
+/**
+ * Parts the body embeds — a sender's signature icons, pasted pictures — are not files to list.
+ * Only embedded parts carry a Content-ID, and stored bodies hold them as data: URIs, so a
+ * small image with an id is embedded whether or not a cid: reference survives. Archives
+ * imported without ids fall back to the names mail clients give such parts. Anything
+ * larger, or not an image, is a real file.
+ */
+const INLINE_IMAGE_MAX_BYTES = 150_000
+const INLINE_IMAGE_NAME = /^(image\d*|outlook-[\w-]+|blocked|[0-9a-f]{8}|[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12})\.(png|gif|jpe?g)$/i
+function inlineAttachmentNames(message: InboundEmail): Set<string> {
+  const html = message.html ?? ''
+  const referenced = new Set((html.match(/cid:([^"'\s>)]+)/gi) ?? []).map(match => match.slice(4).toLowerCase()))
+  const names = new Set<string>()
+  for (const entry of message.attachments) {
+    if (!entry.contentType?.startsWith('image/') || (entry.size ?? 0) > INLINE_IMAGE_MAX_BYTES) continue
+    const id = entry.contentId?.replace(/^<|>$/g, '').toLowerCase()
+    if (id || INLINE_IMAGE_NAME.test(entry.filename) || (id && referenced.has(id))) names.add(entry.filename)
+  }
+  return names
+}
+function visibleAttachments(message: InboundEmail): InboundEmail['attachments'] {
+  const inline = inlineAttachmentNames(message)
+  return message.attachments.filter(entry => !inline.has(entry.filename))
+}
+
 // Real, visible images in an email (skips the 1x1 tracking pixel and inline cid: parts).
 function extractBubbleImages(html: string | null): string[] {
   if (!html) return []
@@ -621,10 +660,6 @@ function parseAddress(raw: string): string {
   return (match ? match[1] : raw).trim()
 }
 
-function isForwarded(subject: string): boolean {
-  // Fwd: markers anywhere, plus the app's own "New mail: …" forward/notification prefix.
-  return /(^|\s)fwd?\s*:/i.test(subject) || /^\s*new mail\s*:/i.test(subject)
-}
 
 /**
  * Inbound noise generated by this app itself. Deliberately narrower than isForwarded:
@@ -660,6 +695,27 @@ function describeHttp(status: number): string {
   return `The mail server refused the request (${status}).`
 }
 
+function ReaderSkeleton() {
+  return (
+    <div className={styles.readerSkeleton} role="status" aria-label="Opening conversation">
+      <span className={`${styles.skelBar} ${styles.skelSubject}`} />
+      <div className={styles.skelHeadRow}>
+        <span className={styles.skelAvatar} />
+        <div className={styles.skelHeadLines}>
+          <span className={styles.skelBar} />
+          <span className={styles.skelBar} />
+        </div>
+      </div>
+      <div className={styles.skelActions}>
+        <span className={styles.skelBar} />
+        <span className={styles.skelBar} />
+        <span className={styles.skelBar} />
+      </div>
+      <BodySkeleton />
+    </div>
+  )
+}
+
 function BodySkeleton() {
   return (
     <div className={styles.bodySkeleton} role="status" aria-label="Loading email">
@@ -690,27 +746,27 @@ function countRemoteRefs(html: string | null): number {
 // Show the email in its true colours on a light "paper" card, framed by the dark
 // reader. The markup is left untouched — the card supplies a legible white surface
 // for bare fragments, and emails that paint their own background render as designed.
-const READER_THEME = `<style>
+const readerTheme = (spacing: number, dark: boolean) => `<style>
   :root { color-scheme: light; }
   /* Transparent so the framed document takes the app's themed surface from the
      iframe element behind it. Theme variables do not cross the document boundary,
      so anything set here would be a colour frozen against one theme. */
   html { background: transparent; }
-  body { margin: 0; background: transparent; padding: 22px 22px 44px; }
+  body { margin: 0; background: transparent; padding: 0 0 12px; }
   .nc-paper {
-    max-width: 800px;
-    margin: 0 auto;
-    background: #ffffff;
+    max-width: 860px;
     color: #1A1030;
-    border-radius: 14px;
-    padding: 30px 34px;
+    background: ${dark ? '#ffffff' : 'transparent'};
+    border-radius: ${dark ? '6px' : '0'};
+    padding: ${dark ? '14px 16px' : '6px 0 12px'};
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
     font-size: 15px;
-    line-height: 1.7;
+    line-height: ${spacing};
     -webkit-font-smoothing: antialiased;
     word-break: break-word;
     overflow-wrap: anywhere;
   }
+  .nc-paper p { margin: 0 0 ${paragraphGap(spacing)}; }
   .nc-paper img { max-width: 100%; height: auto; }
   .nc-paper a { color: #5418C2; }
 </style>`
@@ -821,10 +877,6 @@ function pastedMarkdown(event: React.ClipboardEvent): string | null {
 
 // Reading our own sent mail must not register as the recipient opening it, so the
 // tracking pixel is removed before the message is ever rendered in this app.
-function stripOwnPixel(html: string): string {
-  return html.replace(/<img[^>]*\/api\/dev\/mail\/pixel\/[^>]*>/gi, '')
-}
-
 /**
  * Our own hosts stay allowed even with remote images off. Blocking a sender's images
  * is what that setting is for; the mark in our own signature is not a tracking pixel,
@@ -833,11 +885,11 @@ function stripOwnPixel(html: string): string {
 const OWN_IMAGE_HOSTS = `${CLIENT_BRAND.websiteUrl} ${CLIENT_BRAND.publicUrl}`
 
 // When allowRemote is false the CSP blocks remote fetches so tracking pixels never load.
-function frameHtml(html: string, allowRemote: boolean): string {
+function frameHtml(html: string, allowRemote: boolean, spacing = DEFAULT_LINE_SPACING, dark = false): string {
   const csp = allowRemote
     ? `<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src * data:; style-src 'unsafe-inline' *; font-src * data:; media-src * data:">`
     : `<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src ${OWN_IMAGE_HOSTS} data:; style-src 'unsafe-inline'; font-src data:">`
-  return `<!doctype html><html><head><meta charset="utf-8">${csp}${READER_THEME}<base target="_blank"></head><body><div class="nc-paper">${stripOwnPixel(html)}</div></body>`
+  return `<!doctype html><html><head><meta charset="utf-8">${csp}${readerTheme(spacing, dark)}<base target="_blank"></head><body><div class="nc-paper">${stripOwnPixel(html)}</div></body>`
 }
 
 function headerValue(email: InboundEmail, key: string): string {
@@ -1146,6 +1198,7 @@ const ICONS = {
   settings: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>,
   sliders: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="17" y1="16" x2="23" y2="16"/></svg>,
   send: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>,
+  snooze: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="13" r="8"/><path d="M11 9v4l2.5 1.6"/><path d="M16.5 2.5h4l-4 4h4"/></svg>,
   chevron: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="m6 9 6 6 6-6"/></svg>,
   bell: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/></svg>,
   bellOff: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M13.7 21a2 2 0 0 1-3.4 0"/><path d="M18.6 13A16.7 16.7 0 0 1 18 8a6 6 0 0 0-9.3-5"/><path d="M6.3 6.3A6 6 0 0 0 6 8c0 7-3 9-3 9h14"/><path d="m2 2 20 20"/></svg>,
@@ -1174,6 +1227,7 @@ const SETTINGS_TAB_ICONS: Record<SettingsTab, React.ReactNode> = {
 const FOLDER_ICONS: Record<Folder, React.ReactNode> = {
   inbox: ICONS.inbox,
   starred: ICONS.star,
+  snoozed: ICONS.snooze,
   sent: ICONS.sent,
   scheduled: ICONS.scheduled,
   drafts: ICONS.drafts,
@@ -1210,7 +1264,8 @@ export default function DevMailPage() {
   const [loadingMore, setLoadingMore] = useState(false)
   const [inboxCursor, setInboxCursor] = useState<string | null>(null)
   const inboxFetch = useRef<string | null>(null)
-  const [serverCounts, setServerCounts] = useState<{ inbox: number; unread: number; starred: number; archived: number; trashed: number } | null>(null)
+  type FolderTally = { inbox: number; unread: number; starred: number; archived: number; trashed: number; snoozed: number }
+  const [serverCounts, setServerCounts] = useState<(FolderTally & { conversations: FolderTally | null }) | null>(null)
   const [countsLoading, setCountsLoading] = useState(false)
   const [composeExpanded, setComposeExpanded] = useState(true)
   const pwSectionRef = useRef<HTMLDivElement | null>(null)
@@ -1237,6 +1292,15 @@ export default function DevMailPage() {
     media.addEventListener('change', apply)
     return () => media.removeEventListener('change', apply)
   }, [])
+  // Below this the reader is the whole screen and a docked reply has nowhere to sit.
+  const [isPhone, setIsPhone] = useState(false)
+  useEffect(() => {
+    const media = window.matchMedia('(max-width: 720px)')
+    const apply = () => setIsPhone(media.matches)
+    apply()
+    media.addEventListener('change', apply)
+    return () => media.removeEventListener('change', apply)
+  }, [])
   const [railCollapsed, setRailCollapsed] = useState(true)
   useEffect(() => {
     try {
@@ -1317,6 +1381,20 @@ export default function DevMailPage() {
   // Dismissed for this session only: it should come back next sign-in while the
   // password is still the one the mailbox was created with.
   const [pwNoticeHidden, setPwNoticeHidden] = useState(false)
+  const [notifyNoticeHidden, setNotifyNoticeHidden] = useState(true)
+  useEffect(() => {
+    try {
+      if (Number(localStorage.getItem(NOTIFY_NOTICE_KEY) ?? 0) < Date.now()) setNotifyNoticeHidden(false)
+    } catch {
+      setNotifyNoticeHidden(false)
+    }
+  }, [])
+  const dismissNotifyNotice = useCallback(() => {
+    setNotifyNoticeHidden(true)
+    try {
+      localStorage.setItem(NOTIFY_NOTICE_KEY, String(Date.now() + 14 * 86400_000))
+    } catch {}
+  }, [])
   const [settings, setMailSettings] = useState<MailSettings>(DEFAULT_SETTINGS)
   const { canInstall, installed, install } = useInstall()
   const { permission: notifyPermission, request: requestNotifyPermission, announce } = useNotifications(
@@ -1406,25 +1484,14 @@ export default function DevMailPage() {
   // Collapsed by default: the signature is long, and the composer is for the message.
   const [sigExpanded, setSigExpanded] = useState(false)
   const [sigPreviewOpen, setSigPreviewOpen] = useState(false)
-  /**
-   * Measured at the click, not on mount: before the content has settled it reports several
-   * times its real height, and the reveal then finishes long before the animation does.
-   */
   /** Clicking the folded signature opens it, unless the click was on a link inside it. */
   const expandSignatureFromBody = useCallback((event: React.MouseEvent<HTMLElement>) => {
     if (sigExpanded) return
     if ((event.target as HTMLElement).closest('a')) return
-    const body = event.currentTarget
-    body.style.setProperty('--sig-h', `${body.scrollHeight}px`)
     setSigExpanded(true)
   }, [sigExpanded])
 
-  const toggleSignature = useCallback((event: React.MouseEvent<HTMLElement>) => {
-    const fold = event.currentTarget.closest(`.${styles.composeSignature}`)
-    const body = fold?.querySelector<HTMLElement>(`.${styles.composeSignatureBody}`)
-    if (body) body.style.setProperty('--sig-h', `${body.scrollHeight}px`)
-    setSigExpanded(open => !open)
-  }, [])
+  const toggleSignature = useCallback(() => setSigExpanded(open => !open), [])
   const [quickSending, setQuickSending] = useState(false)
   const [replyMode, setReplyMode] = useState<ReplyMode>('write')
   const [replySig, setReplySig] = useState(true)
@@ -1436,7 +1503,18 @@ export default function DevMailPage() {
   const [replyRecipsOpen, setReplyRecipsOpen] = useState(false)
   // Once the recipients have been touched they are the writer's, including when emptied.
   const [replyRecipsEdited, setReplyRecipsEdited] = useState(false)
+  const [replyBar, setReplyBar] = useState<null | 'reply' | 'all' | 'forward'>(null)
   const quickReplyRef = useRef<HTMLTextAreaElement>(null)
+  useEffect(() => {
+    if (!replyBar) return
+    const focus = () => quickReplyRef.current?.focus({ preventScroll: true })
+    const frame = requestAnimationFrame(focus)
+    const settled = window.setTimeout(focus, 280)
+    return () => {
+      cancelAnimationFrame(frame)
+      window.clearTimeout(settled)
+    }
+  }, [replyBar])
   useEffect(() => {
     setQuickReply('')
     setReplyMode('write')
@@ -1448,6 +1526,7 @@ export default function DevMailPage() {
     setReplyBcc([])
     setReplyRecipsOpen(false)
     setReplyRecipsEdited(false)
+    setReplyBar(null)
   }, [selectedId])
   // Grow the reply box to fit its content; the CSS max-height caps it (8 lines) and scrolls past it.
   useEffect(() => {
@@ -1479,7 +1558,7 @@ export default function DevMailPage() {
   )
   const [threads, setThreads] = useState<ConversationRow[]>([])
   const [threadsResolved, setThreadsResolved] = useState(false)
-  const threadFolder = folder === 'archived' ? 'archive' : folder === 'trash' ? 'trash' : folder === 'starred' ? 'starred' : 'inbox'
+  const threadFolder = folder === 'archived' ? 'archive' : folder === 'trash' ? 'trash' : folder === 'starred' ? 'starred' : folder === 'snoozed' ? 'snoozed' : 'inbox'
   const threadsFetch = useRef<string | null>(null)
   const threadsLoadedFolder = useRef<string | null>(null)
   const [threadsCursor, setThreadsCursor] = useState<string | null>(null)
@@ -1748,28 +1827,101 @@ export default function DevMailPage() {
   // account and there is no one to act as.
   const actingAs: string | null = null
 
+  const decorateSent = (data: {
+    emails: Array<Omit<SentEmail, 'starred' | 'archived' | 'trashed' | 'opened' | 'openCount' | 'openedAt'>>
+    flags?: Record<string, { starred: boolean; archived: boolean; trashed: boolean }>
+    opens?: Record<string, { opened: boolean; openCount: number; openedAt: string | null }>
+  }): SentEmail[] => {
+    const flags = data.flags ?? {}
+    const opens = data.opens ?? {}
+    return data.emails.map(entry => ({
+      ...entry,
+      starred: flags[entry.id]?.starred ?? false,
+      archived: flags[entry.id]?.archived ?? false,
+      trashed: flags[entry.id]?.trashed ?? false,
+      opened: opens[entry.id]?.opened ?? false,
+      openCount: opens[entry.id]?.openCount ?? 0,
+      openedAt: opens[entry.id]?.openedAt ?? null,
+    }))
+  }
+
   const loadSent = useCallback(async () => {
     try {
       const response = await fetch(`/api/mail/emails${mailboxQuery}`, { headers: apiHeaders() })
       const data = await response.json()
-      if (data.ok) {
-        const flags: Record<string, { starred: boolean; archived: boolean; trashed: boolean }> = data.flags ?? {}
-        const opens: Record<string, { opened: boolean; openCount: number; openedAt: string | null }> = data.opens ?? {}
-        setSentEmails(
-          (data.emails as Array<Omit<SentEmail, 'starred' | 'archived' | 'trashed' | 'opened' | 'openCount' | 'openedAt'>>).map(entry => ({
-            ...entry,
-            starred: flags[entry.id]?.starred ?? false,
-            archived: flags[entry.id]?.archived ?? false,
-            trashed: flags[entry.id]?.trashed ?? false,
-            opened: opens[entry.id]?.opened ?? false,
-            openCount: opens[entry.id]?.openCount ?? 0,
-            openedAt: opens[entry.id]?.openedAt ?? null,
-          })),
-        )
-      }
+      if (data.ok) setSentEmails(decorateSent(data))
     } catch {}
   }, [apiHeaders, mailboxQuery])
 
+  /**
+   * Searching Sent asks the server. The list holds the newest few hundred sends and a
+   * search that only looked through those found nothing older, with no sign that it had
+   * not looked. Null means "no search", so the folder shows the ordinary list.
+   */
+  const [sentSearchResults, setSentSearchResults] = useState<SentEmail[] | null>(null)
+  const [crossFolder, setCrossFolder] = useState<{ folder: 'sent' | 'inbox'; count: number; more: boolean } | null>(null)
+  const crossFolderSeq = useRef(0)
+  useEffect(() => {
+    const text = search.trim()
+    const seq = ++crossFolderSeq.current
+    if (!text || parseQuery(text).isEmpty || folder === 'drafts' || folder === 'scheduled') {
+      setCrossFolder(null)
+      return
+    }
+    const timer = window.setTimeout(async () => {
+      try {
+        if (folder === 'sent') {
+          const response = await fetch(`/api/mail/inbox?limit=1&folder=inbox&q=${encodeURIComponent(text)}`, { headers: apiHeaders() })
+          const data = await response.json()
+          if (seq !== crossFolderSeq.current) return
+          setCrossFolder(data.ok && typeof data.total === 'number' && data.total > 0 ? { folder: 'inbox', count: data.total, more: false } : null)
+        } else {
+          const response = await fetch(`/api/mail/emails?q=${encodeURIComponent(text)}`, { headers: apiHeaders() })
+          const data = await response.json()
+          if (seq !== crossFolderSeq.current) return
+          const count = Array.isArray(data.emails) ? data.emails.length : 0
+          setCrossFolder(data.ok && count > 0 ? { folder: 'sent', count, more: Boolean(data.truncated) } : null)
+        }
+      } catch {
+        if (seq === crossFolderSeq.current) setCrossFolder(null)
+      }
+    }, 350)
+    return () => window.clearTimeout(timer)
+  }, [search, folder, apiHeaders])
+  const [sentSearching, setSentSearching] = useState(false)
+  const [sentSearchTruncated, setSentSearchTruncated] = useState(false)
+  const sentSearchSeq = useRef(0)
+  const loadSentSearch = useCallback(
+    async (text: string) => {
+      const seq = ++sentSearchSeq.current
+      try {
+        const response = await fetch(`/api/mail/emails?q=${encodeURIComponent(text)}`, { headers: apiHeaders() })
+        const data = await response.json()
+        if (seq !== sentSearchSeq.current) return
+        setSentSearchResults(data.ok ? decorateSent(data) : [])
+        setSentSearchTruncated(Boolean(data.ok && data.truncated))
+      } catch {
+        if (seq === sentSearchSeq.current) setSentSearchResults([])
+      } finally {
+        if (seq === sentSearchSeq.current) setSentSearching(false)
+      }
+    },
+    [apiHeaders],
+  )
+
+  useEffect(() => {
+    if (folder !== 'sent' || !search.trim() || parseQuery(search).isEmpty) {
+      sentSearchSeq.current += 1
+      setSentSearchResults(null)
+      setSentSearching(false)
+      setSentSearchTruncated(false)
+      return
+    }
+    setSentSearching(true)
+    const timer = window.setTimeout(() => { void loadSentSearch(search.trim()) }, 250)
+    return () => window.clearTimeout(timer)
+  }, [search, folder, loadSentSearch])
+
   // One request of 150 rows costs about two seconds; three of fifty cost five, because
   // the wait is the distance, not the data. Fetch the screenful in one trip.
   const INBOX_PAGE = 150
@@ -1779,12 +1931,13 @@ export default function DevMailPage() {
       // Only the first page is ever asked for twice on mount. Paging must never be
       // suppressed: a page that is skipped is a page that never arrives, and the cursor
       // stops advancing with it.
-      const key = cursor ? null : `${mailboxQuery}|${search.trim()}`
+      const key = cursor ? null : `${mailboxQuery}|${threadFolder}|${search.trim()}`
       if (key && inboxFetch.current === key) return
       if (key) inboxFetch.current = key
       try {
         const params = new URLSearchParams(mailboxQuery.replace(/^\?/, ''))
         params.set('limit', String(INBOX_PAGE))
+        params.set('folder', threadFolder)
         // A cursor asks for the page after a known row; without one this is the first page.
         if (cursor) params.set('cursor', cursor)
         const text = search.trim()
@@ -1813,7 +1966,7 @@ export default function DevMailPage() {
         if (!cursor) setSearching(false)
       }
     },
-    [apiHeaders, mailboxQuery, search],
+    [apiHeaders, mailboxQuery, search, threadFolder],
   )
 
   /**
@@ -1826,12 +1979,13 @@ export default function DevMailPage() {
     // A search re-runs when it is typed; re-running it on every poll tick charged the
     // full-text scan again for a result set that was not changing.
     if (search.trim()) return
-    const key = `${mailboxQuery}|${search.trim()}`
+    const key = `${mailboxQuery}|${threadFolder}|${search.trim()}`
     if (inboxFetch.current === key) return
     inboxFetch.current = key
     try {
       const params = new URLSearchParams(mailboxQuery.replace(/^\?/, ''))
       params.set('limit', String(INBOX_PAGE))
+      params.set('folder', threadFolder)
       const text = search.trim()
       if (text) params.set('q', text)
       const response = await fetch(`/api/mail/inbox?${params.toString()}`, { headers: apiHeaders() })
@@ -1863,7 +2017,7 @@ export default function DevMailPage() {
     } finally {
       if (inboxFetch.current === key) inboxFetch.current = null
     }
-  }, [apiHeaders, mailboxQuery, search])
+  }, [apiHeaders, mailboxQuery, search, threadFolder])
 
   /**
    * Folder totals come from the database rather than from the rows on hand: counting what
@@ -1880,6 +2034,10 @@ export default function DevMailPage() {
     setCountsLoading(true)
     try {
       const params = new URLSearchParams(mailboxQuery.replace(/^\?/, ''))
+      // A forced count follows an action that just changed the figures, so it has to skip
+      // the server's own cache as well as this one — otherwise a folder someone just moved
+      // mail into reads zero for another twenty seconds.
+      if (force) params.set('fresh', '1')
       const response = await fetch(`/api/mail/inbox/counts?${params.toString()}`, { headers: apiHeaders() })
       if (!response.ok) return
       const data = await response.json().catch(() => null)
@@ -1933,8 +2091,9 @@ export default function DevMailPage() {
       if (saved?.counts) setServerCounts(current => current ?? saved.counts!)
       const rows = Array.isArray(saved?.rows) ? saved.rows : null
       if (!rows?.length) return
+      if (saved.folder !== threadFolder) return
       setInboxEmails(current => (current.length ? current : rows))
-      if (saved.folder === threadFolder && Array.isArray(saved.threads) && saved.threads.length) {
+      if (Array.isArray(saved.threads) && saved.threads.length) {
         setThreads(current => (current.length ? current : saved.threads!))
       }
       setMailboxLoading(false)
@@ -1972,7 +2131,7 @@ export default function DevMailPage() {
     return () => window.clearTimeout(timer)
     // loadInbox changes identity on every keystroke; depending on it would loop.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [search, mailboxQuery])
+  }, [search, mailboxQuery, threadFolder])
 
   // A ref, not state: one page must be in flight at a time, and the check has to see the
   // current value synchronously — two observer callbacks can fire in the same tick.
@@ -2013,6 +2172,202 @@ export default function DevMailPage() {
     return () => node.removeEventListener('scroll', check)
   }, [moreCursor])
 
+  /**
+   * Swiping a row. Desktop reveals a row's actions on hover, which a phone cannot do, so
+   * the same two actions live on a horizontal drag instead. The action is named and
+   * coloured behind the row before it commits, and nothing fires below the threshold.
+   */
+  /**
+   * Snooze. The times are the ones people actually mean when they say "not now": the rest
+   * of today, first thing tomorrow, and the start of next week. Everything is computed in
+   * the reader's own timezone, because "tomorrow morning" is a local idea.
+   */
+  const snoozeChoices = useMemo(() => {
+    const at = (days: number, hour: number) => {
+      const when = new Date()
+      when.setDate(when.getDate() + days)
+      when.setHours(hour, 0, 0, 0)
+      return when
+    }
+    const laterToday = new Date(Date.now() + 3 * 60 * 60 * 1000)
+    const tomorrow = at(1, 8)
+    const monday = (() => {
+      const when = at(1, 8)
+      while (when.getDay() !== 1) when.setDate(when.getDate() + 1)
+      return when
+    })()
+    const weekend = (() => {
+      const when = at(1, 9)
+      while (when.getDay() !== 6) when.setDate(when.getDate() + 1)
+      return when
+    })()
+    return [
+      // Past the end of the working day this stops meaning "later today".
+      ...(laterToday.getHours() >= 7 && laterToday.getHours() <= 20
+        ? [{ key: 'later', label: 'Later today', at: laterToday }]
+        : []),
+      { key: 'tomorrow', label: 'Tomorrow morning', at: tomorrow },
+      { key: 'weekend', label: 'This weekend', at: weekend },
+      { key: 'monday', label: 'Next week', at: monday },
+    ]
+  }, [])
+
+  const [snoozeMenuOpen, setSnoozeMenuOpen] = useState(false)
+  const applySnooze = useCallback(
+    (threadId: string | null, until: Date | null) => {
+      if (!threadId) return
+      setSnoozeMenuOpen(false)
+      setThreads(list => list.filter(thread => thread.threadId !== threadId))
+      setSelectedId(null)
+      setReaderOpenMobile(false)
+      fetch('/api/mail/inbox', {
+        method: 'PATCH',
+        headers: apiHeaders(),
+        body: JSON.stringify({ threadId, snoozedUntil: until ? until.toISOString() : null }),
+      })
+        .then(() => loadCounts(true))
+        .catch(() => {})
+    },
+    [apiHeaders, loadCounts],
+  )
+
+  const SWIPE_COMMIT = 96
+  const [swipe, setSwipe] = useState<{ id: string; dx: number; top: number; height: number } | null>(null)
+  const swipeRef = useRef<{ id: string; threadId: string | null; x: number; y: number; dx: number; axis: '' | 'x' | 'y'; moved: boolean; top: number; height: number } | null>(null)
+  const swipeCommitRef = useRef<(id: string, threadId: string | null, flags: Partial<Pick<InboundEmail, 'archived' | 'trashed'>>) => void>(() => {})
+
+  const swipeActions = useMemo(() => {
+    type SwipeAction = { label: string; flags: Partial<Pick<InboundEmail, 'archived' | 'trashed'>> } | null
+    const set = (right: SwipeAction, left: SwipeAction) => ({ right, left })
+    if (folder === 'trash') return set({ label: 'Restore', flags: { trashed: false } }, null)
+    if (folder === 'archived') return set({ label: 'To inbox', flags: { archived: false } }, { label: 'Delete', flags: { trashed: true } })
+    return set({ label: 'Archive', flags: { archived: true } }, { label: 'Delete', flags: { trashed: true } })
+  }, [folder])
+
+  const onRowTouchStart = useCallback((id: string, threadId: string | null, event: React.TouchEvent<HTMLButtonElement>) => {
+    if (event.touches.length !== 1) return
+    const row = event.currentTarget
+    swipeRef.current = {
+      id,
+      threadId,
+      x: event.touches[0].clientX,
+      y: event.touches[0].clientY,
+      dx: 0,
+      axis: '',
+      moved: false,
+      top: row.offsetTop,
+      height: row.offsetHeight,
+    }
+  }, [])
+
+  const onRowTouchMove = useCallback((event: React.TouchEvent) => {
+    const gesture = swipeRef.current
+    if (!gesture) return
+    const dx = event.touches[0].clientX - gesture.x
+    const dy = event.touches[0].clientY - gesture.y
+    if (!gesture.axis) {
+      if (Math.abs(dx) < 8 && Math.abs(dy) < 8) return
+      // Whichever way it went first owns the gesture; otherwise a scroll drags rows sideways.
+      gesture.axis = Math.abs(dx) > Math.abs(dy) ? 'x' : 'y'
+    }
+    if (gesture.axis !== 'x') return
+    event.stopPropagation()
+    gesture.moved = true
+    const allowed = dx > 0 ? swipeActions.right : swipeActions.left
+    gesture.dx = allowed ? Math.max(-160, Math.min(160, dx)) : 0
+    setSwipe({ id: gesture.id, dx: gesture.dx, top: gesture.top, height: gesture.height })
+  }, [swipeActions])
+
+  const onRowTouchEnd = useCallback(() => {
+    const gesture = swipeRef.current
+    // Cleared first, so the touchcancel that can follow a touchend is a no-op.
+    swipeRef.current = null
+    setSwipe(null)
+    if (!gesture || gesture.axis !== 'x') return
+    const action = gesture.dx > 0 ? swipeActions.right : swipeActions.left
+    // Deliberately not inside the state updater: React calls those twice in development
+    // to check they are pure, and the archive went out twice because of it.
+    if (action && Math.abs(gesture.dx) >= SWIPE_COMMIT) {
+      swipeCommitRef.current(gesture.id, gesture.threadId, action.flags)
+    }
+  }, [swipeActions])
+
+  /**
+   * Pull to refresh. A phone has no hover and the header has room for one small button, so
+   * the gesture people already expect is the one worth supporting. The listener is not
+   * passive because the pull has to win over the scroll once it starts, and it only ever
+   * starts when the list is already at the top.
+   */
+  const PULL_TRIGGER = 72
+  const [pullDistance, setPullDistance] = useState(0)
+  useEffect(() => {
+    const node = listRef.current
+    if (!node) return
+    let startY = 0
+    let pulling = false
+
+    const start = (event: TouchEvent) => {
+      if (node.scrollTop > 0 || event.touches.length !== 1) return
+      startY = event.touches[0].clientY
+      pulling = true
+    }
+    const move = (event: TouchEvent) => {
+      if (!pulling) return
+      const delta = event.touches[0].clientY - startY
+      if (delta <= 0) {
+        pulling = false
+        setPullDistance(0)
+        return
+      }
+      event.preventDefault()
+      // Resistance, so the sheet follows the finger without tracking it one to one.
+      setPullDistance(Math.min(PULL_TRIGGER * 1.5, delta * 0.45))
+    }
+    const end = () => {
+      if (!pulling) return
+      pulling = false
+      setPullDistance(current => {
+        if (current >= PULL_TRIGGER * 0.75) void refreshAllRef.current()
+        return 0
+      })
+    }
+
+    node.addEventListener('touchstart', start, { passive: true })
+    node.addEventListener('touchmove', move, { passive: false })
+    node.addEventListener('touchend', end)
+    node.addEventListener('touchcancel', end)
+    return () => {
+      node.removeEventListener('touchstart', start)
+      node.removeEventListener('touchmove', move)
+      node.removeEventListener('touchend', end)
+      node.removeEventListener('touchcancel', end)
+    }
+  }, [isLoggedIn])
+
+  // Far enough down that the button is wanted, not so far that it appears on a nudge.
+  const TO_TOP_AFTER = 400
+  const [listScrolled, setListScrolled] = useState(false)
+  // Keyed on the sign-in, not on mount: the list does not exist until then, so an effect
+  // that ran once on mount attached its listener to nothing and the button never appeared.
+  useEffect(() => {
+    const node = listRef.current
+    if (!node) return
+    const check = () => setListScrolled(node.scrollTop > TO_TOP_AFTER)
+    check()
+    node.addEventListener('scroll', check, { passive: true })
+    return () => node.removeEventListener('scroll', check)
+  }, [isLoggedIn])
+
+  const scrollListToTop = useCallback(() => {
+    listRef.current?.scrollTo({ top: 0, behavior: 'smooth' })
+  }, [])
+
+  // Every folder starts at the top, so the button must not linger from the last one.
+  useEffect(() => {
+    listRef.current?.scrollTo({ top: 0 })
+    setListScrolled(false)
+  }, [folder])
+
   const loadEvents = useCallback(async () => {
     try {
       const response = await fetch('/api/mail/events', { headers: apiHeaders() })
@@ -2026,6 +2381,8 @@ export default function DevMailPage() {
     }
   }, [apiHeaders])
 
+  const refreshAllRef = useRef<() => Promise<void>>(async () => {})
+
   const refreshAll = useCallback(async () => {
     setRefreshing(true)
     try {
@@ -2039,6 +2396,7 @@ export default function DevMailPage() {
       setMailboxStale(false)
     }
   }, [loadSent, refreshInbox, loadEvents, loadThreads])
+  useEffect(() => { refreshAllRef.current = refreshAll }, [refreshAll])
 
   const loadAccessors = useCallback(async () => {
     try {
@@ -2227,6 +2585,7 @@ export default function DevMailPage() {
     }
     setMailboxLoading(true)
     setMailboxStale(false)
+    cancelThreadOpen()
     setSelectedId(null)
     setReaderOpenMobile(false)
     setSelectedBulk(new Set())
@@ -2250,11 +2609,12 @@ export default function DevMailPage() {
       .then(response => response.json())
       .then(data => {
         if (data.ok && data.settings) {
-          const stored = data.settings as MailSettings & { density?: string }
-          // "Comfortable" was the old name for a setting that changed nothing; it maps onto
-          // the roomy one now that the two actually differ.
-          const density: MailSettings['density'] = stored.density === 'compact' ? 'compact' : stored.density ? 'relaxed' : 'compact'
-          setMailSettings(current => ({ ...current, ...data.settings, density }))
+          const stored = data.settings as MailSettings & { density?: string; replyStyle?: string }
+          // Only the roomy setting is named; anything else — unset, or the retired
+          // "comfortable" — is the default. Treating every unrecognised value as roomy put
+          // six of the seven mailboxes into a reduced reader none of them had asked for.
+          const density: MailSettings['density'] = stored.density === 'relaxed' ? 'relaxed' : 'compact'
+          setMailSettings(current => ({ ...current, ...data.settings, density, replyStyle: stored.replyStyle === 'mini' ? 'mini' : 'panel' }))
           const prefs = (data.settings as MailSettings).prefs
           if (prefs?.theme) { setThemePref(prefs.theme); localStorage.setItem(LS_THEME_KEY, prefs.theme) }
           if (prefs?.accent && hexToHsl(prefs.accent)) { setAccent(prefs.accent); localStorage.setItem(LS_ACCENT_KEY, prefs.accent) }
@@ -2316,21 +2676,26 @@ export default function DevMailPage() {
   // Server figure when there is one: counting loaded rows undercounts a mailbox this size,
   // and counted unread messages against grouped conversations, which is how an unread
   // badge came to read higher than the folder total beside it.
+  // The sidebar counts mail, the list header counts conversations. They answer different
+  // questions — how much is in the folder, and how many rows that comes to — so they are
+  // deliberately different numbers rather than one of them being wrong.
   const unreadCount = serverCounts?.unread ?? 0
 
   // Without a search the list total is the folder's own count, which the sidebar has
   // already fetched; asking the list query to count the same rows again is wasted work.
   useEffect(() => {
     if (search.trim() || !serverCounts) return
-    const folder = mailboxQuery.includes('folder=archive')
+    const total = threadFolder === 'archive'
       ? serverCounts.archived
-      : mailboxQuery.includes('folder=trash')
+      : threadFolder === 'trash'
         ? serverCounts.trashed
-        : mailboxQuery.includes('folder=starred')
+        : threadFolder === 'starred'
           ? serverCounts.starred
-          : serverCounts.inbox
-    setInboxTotal(folder)
-  }, [serverCounts, search, mailboxQuery])
+          : threadFolder === 'snoozed'
+            ? serverCounts.snoozed
+            : serverCounts.inbox
+    setInboxTotal(total)
+  }, [serverCounts, search, threadFolder])
 
   const folderCounts = useMemo(
     () => ({
@@ -2338,10 +2703,28 @@ export default function DevMailPage() {
       starred: serverCounts?.starred ?? 0,
       archived: serverCounts?.archived ?? 0,
       trashed: serverCounts?.trashed ?? 0,
+      snoozed: serverCounts?.snoozed ?? 0,
     }),
     [serverCounts],
   )
 
+  /**
+   * What the folder holds, not what has been fetched. The header counted loaded rows, so a
+   * mailbox of 14,974 conversations opened on "500 conversations" — the thread page size
+   * showing through — and climbed as you scrolled. A search has no such total: the rows
+   * are the result.
+   */
+  const folderConversationTotal = useMemo(() => {
+    const tally = serverCounts?.conversations
+    if (!tally || search.trim()) return null
+    if (folder === 'archived') return tally.archived
+    if (folder === 'trash') return tally.trashed
+    if (folder === 'starred') return tally.starred
+    if (folder === 'snoozed') return tally.snoozed
+    if (folder === 'inbox') return tally.inbox
+    return null
+  }, [serverCounts, search, folder])
+
   const eventsByEmail = useMemo(() => {
     const map: Record<string, MailEvent[]> = {}
     for (const event of events) {
@@ -2352,23 +2735,6 @@ export default function DevMailPage() {
     return map
   }, [events])
 
-  const statusFor = useCallback(
-    (entry: SentEmail): string => {
-      const tracked = eventsByEmail[entry.id] ?? []
-      const has = (type: string) => tracked.filter(event => event.type === `email.${type}`)
-      if (has('complained').length) return 'complained'
-      if (has('bounced').length) return 'bounced'
-      if (has('failed').length) return 'failed'
-      const clicks = has('clicked').length
-      if (clicks) return clicks > 1 ? `clicked ×${clicks}` : 'clicked'
-      const opens = has('opened').length
-      if (opens) return opens > 1 ? `opened ×${opens}` : 'opened'
-      if (has('delivered').length) return 'delivered'
-      if (has('delivery_delayed').length) return 'delayed'
-      return entry.lastEvent || 'sent'
-    },
-    [eventsByEmail],
-  )
 
   const searchQuery = useMemo(() => parseQuery(search), [search])
 
@@ -2500,10 +2866,12 @@ export default function DevMailPage() {
 
   const inboxFolderPredicate = useCallback(
     (entry: InboundEmail) => {
+      const asleep = Boolean(entry.snoozedUntil && Date.parse(entry.snoozedUntil) > Date.now())
+      if (folder === 'snoozed') return asleep && !entry.trashed
       if (folder === 'starred') return entry.starred && !entry.trashed
       if (folder === 'archived') return entry.archived && !entry.trashed
       if (folder === 'trash') return entry.trashed
-      return !entry.archived && !entry.trashed
+      return !entry.archived && !entry.trashed && !asleep
     },
     [folder],
   )
@@ -2521,6 +2889,7 @@ export default function DevMailPage() {
 
   // An action on a thread applies to every message in it, not just the representative.
   const threadIds = useCallback((id: string): string[] => threadMembers(id).map(member => member.id), [threadMembers])
+  useEffect(() => { threadIdsRef.current = threadIds }, [threadIds])
 
   // Sent replies that belong to an inbound thread: matched by the recorded In-Reply-To
   // Message-ID, falling back to normalized subject for historical sends with no linkage.
@@ -2593,7 +2962,7 @@ export default function DevMailPage() {
 
   /** The folders backed by the paged inbound list, as opposed to ones loaded whole. */
   const isInboundFolder =
-    folder === 'inbox' || folder === 'starred' || folder === 'archived' || folder === 'trash'
+    folder === 'inbox' || folder === 'starred' || folder === 'snoozed' || folder === 'archived' || folder === 'trash'
 
   const listItems = useMemo(() => {
     const sentToItem = (entry: SentEmail) => ({
@@ -2609,12 +2978,12 @@ export default function DevMailPage() {
       unread: false,
       starred: entry.starred,
       hasAttachment: false,
-      chip: (folder === 'scheduled' ? 'scheduled' : statusFor(entry)) as string | null,
+      chip: (folder === 'scheduled' ? 'scheduled' : null) as string | null,
       threadCount: 1,
       latestAt: new Date(entry.createdAt).getTime(),
       labels: [] as string[],
     })
-    if (folder === 'inbox' || folder === 'starred' || folder === 'archived' || folder === 'trash') {
+    if (isInboundFolder) {
       const visible = inboxEmails
         .filter(inboxFolderPredicate)
         .filter(matchesInbound)
@@ -2626,11 +2995,14 @@ export default function DevMailPage() {
         if (list) list.push(entry)
         else groups.set(key, [entry])
       }
-      const inThreadFolder = (thread: ConversationRow) =>
-        folder === 'archived' ? thread.archivedCount > 0
-        : folder === 'trash' ? thread.trashedCount > 0
-        : folder === 'starred' ? thread.starredCount > 0
-        : thread.inboxCount > 0
+      const inThreadFolder = (thread: ConversationRow) => {
+        const asleep = Boolean(thread.snoozedUntil && Date.parse(thread.snoozedUntil) > Date.now())
+        if (folder === 'snoozed') return asleep
+        if (folder === 'archived') return thread.archivedCount > 0
+        if (folder === 'trash') return thread.trashedCount > 0
+        if (folder === 'starred') return thread.starredCount > 0
+        return thread.inboxCount > 0 && !asleep
+      }
       const threadItems = threads.length > 0 && !search.trim()
         ? threads
             .filter(inThreadFolder)
@@ -2719,20 +3091,39 @@ export default function DevMailPage() {
           labels: [] as string[],
         }))
     }
-    const source = folder === 'scheduled' ? scheduledEmails : deliveredEmails
+    const searched = folder === 'sent' && sentSearchResults
+    const source = folder === 'scheduled' ? scheduledEmails : searched ? sentSearchResults : deliveredEmails
     return source
-      .filter(entry => matches(`${entry.to.join(' ')} ${entry.subject}`))
-      .filter(entry => !(folder === 'sent' && hideForwarded && isForwarded(entry.subject)))
+      .filter(entry => searched || matches(`${entry.to.join(' ')} ${entry.subject}`))
       .filter(entry => !(folder === 'sent' && (entry.archived || entry.trashed)))
       .map(entry => sentToItem(entry))
-  }, [folder, inboxEmails, drafts, scheduledEmails, deliveredEmails, matches, matchesInbound, matchesSent, inboxFolderPredicate, threadKeys, statusFor, now, hideForwarded, threadSentMembers, detailCache, threads, search])
+  }, [folder, isInboundFolder, inboxEmails, drafts, scheduledEmails, deliveredEmails, sentSearchResults, matches, matchesInbound, matchesSent, inboxFolderPredicate, threadKeys, now, hideForwarded, threadSentMembers, detailCache, threads, search])
 
-  const listSettling = searching || ((mailboxLoading || !threadsResolved) && listItems.length === 0)
+  const listSettling = searching || sentSearching || ((mailboxLoading || !threadsResolved) && listItems.length === 0)
   const listRefreshing = !listSettling && (mailboxStale || mailboxLoading || !threadsResolved)
 
-  const inboxFolder = folder === 'inbox' || folder === 'starred' || folder === 'archived' || folder === 'trash'
+  const inboxFolder = isInboundFolder
+
+  // Sent, drafts and scheduled really are lists of messages, so only the threaded folders
+  // count in conversations. Where the folder total is known and the list has not reached
+  // it, say both figures rather than let one grow silently towards the other.
+  const loadedRows = listItems.length
+  const listCountPaging = folderConversationTotal != null && loadedRows < folderConversationTotal
+  const listCountFigure = listCountPaging
+    ? `${loadedRows.toLocaleString()} of ${folderConversationTotal!.toLocaleString()}`
+    : (folderConversationTotal ?? loadedRows).toLocaleString()
+  const listCountUnit = !isInboundFolder
+    ? loadedRows === 1 ? 'message' : 'messages'
+    : listCountPaging
+      ? 'conversations loaded'
+      : (folderConversationTotal ?? loadedRows) === 1 ? 'conversation' : 'conversations'
+  const listCountTitle = `${listCountFigure} ${listCountUnit}`
+
   const selectedInbound = selectedId ? inboxEmails.find(entry => entry.id === selectedId) ?? null : null
-  const selectedSent = selectedId && !selectedInbound ? sentEmails.find(entry => entry.id === selectedId) ?? null : null
+  const selectedSent =
+    selectedId && !selectedInbound
+      ? sentEmails.find(entry => entry.id === selectedId) ?? sentSearchResults?.find(entry => entry.id === selectedId) ?? null
+      : null
   const selectedDetail = selectedSent ? detailCache[selectedSent.id] ?? null : null
   const selectedIsThread = selectedInbound ? unifiedThread(selectedInbound.id).length > 1 : false
 
@@ -2854,12 +3245,49 @@ export default function DevMailPage() {
     }
   }, [selectedInbound, threadMembers, inboundAttachments, apiHeaders])
 
+  /**
+   * Every selection bumps this. A conversation fetch that finishes after a later selection
+   * finds the number moved on and does nothing — otherwise clicking B while A was still
+   * loading showed A's skeleton over B and then replaced B with A when A arrived.
+   */
+  const openSeq = useRef(0)
+  const openController = useRef<AbortController | null>(null)
+  const cancelThreadOpen = () => {
+    openSeq.current += 1
+    openController.current?.abort()
+    openController.current = null
+    setThreadOpening(null)
+  }
+
+  // Failing to open is worth a word. It used to go through loadError, which only renders
+  // when the list itself is empty, so on a phone the pane slid in and out and said nothing.
+  const [openError, setOpenError] = useState<string | null>(null)
+  useEffect(() => {
+    if (!openError) return
+    const timer = window.setTimeout(() => setOpenError(null), 4500)
+    return () => window.clearTimeout(timer)
+  }, [openError])
+
   const openThread = async (threadId: string, latestId: string) => {
     if (!inboxEmails.some(entry => entry.id === latestId)) {
+      const seq = ++openSeq.current
+      // Whatever the phone showed before the tap is what a failed open goes back to: the
+      // list if they were on the list, the message if one was open. selectedId is the
+      // wrong proxy for that, because Back on a phone hides the pane and leaves it set.
+      // A pane still sliding in for an earlier tap does not count as open.
+      const wasOpen = readerOpenMobile && !threadOpening
       setThreadOpening(threadId)
+      setReaderOpenMobile(true)
+      const controller = new AbortController()
+      openController.current = controller
+      const giveUp = window.setTimeout(() => controller.abort(), 15000)
       try {
-        const response = await fetch(`/api/mail/inbox?thread=${encodeURIComponent(threadId)}&limit=200`, { headers: apiHeaders() })
+        const response = await fetch(`/api/mail/inbox?thread=${encodeURIComponent(threadId)}&limit=200`, {
+          headers: apiHeaders(),
+          signal: controller.signal,
+        })
         const data = await response.json().catch(() => null)
+        if (seq !== openSeq.current) return
         if (data?.ok && Array.isArray(data.emails)) {
           const fresh = data.emails as InboundEmail[]
           setInboxEmails(current => {
@@ -2868,14 +3296,20 @@ export default function DevMailPage() {
           })
         } else {
           setThreadOpening(null)
-          setLoadError('Could not open that conversation')
+          setReaderOpenMobile(wasOpen)
+          setOpenError('Could not open that conversation')
           return
         }
       } catch (err) {
+        if (seq !== openSeq.current) return
         console.warn('[mail] thread load failed', err)
         setThreadOpening(null)
-        setLoadError('Could not open that conversation')
+        setReaderOpenMobile(wasOpen)
+        setOpenError('Could not open that conversation')
         return
+      } finally {
+        window.clearTimeout(giveUp)
+        if (openController.current === controller) openController.current = null
       }
       setThreadOpening(null)
     }
@@ -2883,6 +3317,7 @@ export default function DevMailPage() {
   }
 
   const openInbound = (id: string) => {
+    cancelThreadOpen()
     // Reading and writing share the same panel, so the composer has to give it up.
     // Closed through closeCompose rather than just hidden, so the draft is kept.
     if (composeOpen) closeCompose()
@@ -2894,6 +3329,10 @@ export default function DevMailPage() {
     }
   }
 
+  type InboundFlagPatch = Partial<Pick<InboundEmail, 'read' | 'starred' | 'archived' | 'trashed'>>
+  const setInboundFlagRef = useRef<(ids: string[], flags: InboundFlagPatch) => void>(() => {})
+  const threadIdsRef = useRef<(id: string) => string[]>(id => [id])
+
   const setInboundFlag = useCallback(
     (ids: string[], flags: Partial<Pick<InboundEmail, 'read' | 'starred' | 'archived' | 'trashed'>>) => {
       if (flags.read === true) ids.forEach(id => pendingRead.current.add(id))
@@ -2928,9 +3367,49 @@ export default function DevMailPage() {
     [apiHeaders],
   )
 
+  /**
+   * A row stands for a conversation, and the messages under it may not be loaded, so the
+   * id the row carries is often not enough to act on. Naming the thread lets the server
+   * find its messages; a row with no thread falls back to the ids we do hold.
+   */
+  const commitRowFlags = useCallback(
+    (id: string, threadId: string | null, flags: Partial<Pick<InboundEmail, 'archived' | 'trashed'>>) => {
+      if (!threadId) {
+        setInboundFlag(threadIds(id), flags)
+        return
+      }
+      setInboxEmails(list =>
+        list.map(entry => (threadKeys.get(entry.id) === threadKeys.get(id) ? { ...entry, ...flags } : entry)),
+      )
+      setThreads(list =>
+        list.filter(thread => {
+          if (thread.threadId !== threadId) return true
+          // The row leaves the folder it was swiped out of; the next refresh restates it.
+          return false
+        }),
+      )
+      fetch('/api/mail/inbox', {
+        method: 'PATCH',
+        headers: apiHeaders(),
+        body: JSON.stringify({ threadId, ...flags }),
+      })
+        .then(() => loadCounts(true))
+        .catch(() => {})
+    },
+    [apiHeaders, setInboundFlag, threadIds, threadKeys, loadCounts],
+  )
+  useEffect(() => { swipeCommitRef.current = commitRowFlags }, [commitRowFlags])
+  useEffect(() => { setInboundFlagRef.current = setInboundFlag }, [setInboundFlag])
+
+  const isSentId = useCallback(
+    (id: string) => sentEmails.some(entry => entry.id === id) || Boolean(sentSearchResults?.some(entry => entry.id === id)),
+    [sentEmails, sentSearchResults],
+  )
+
   const setSentFlag = useCallback(
     (ids: string[], flags: Partial<Pick<SentEmail, 'starred' | 'archived' | 'trashed'>>) => {
       setSentEmails(list => list.map(entry => (ids.includes(entry.id) ? { ...entry, ...flags } : entry)))
+      setSentSearchResults(results => (results ? results.map(entry => (ids.includes(entry.id) ? { ...entry, ...flags } : entry)) : results))
       fetch('/api/mail/emails', {
         method: 'PATCH',
         headers: apiHeaders(),
@@ -2978,7 +3457,7 @@ export default function DevMailPage() {
       const sentIds: string[] = []
       for (const id of ids) {
         if (inboxEmails.some(entry => entry.id === id)) inboundIds.push(...threadIds(id))
-        else if (sentEmails.some(entry => entry.id === id)) sentIds.push(id)
+        else if (isSentId(id)) sentIds.push(id)
       }
       if (inboundIds.length) setInboundFlag(Array.from(new Set(inboundIds)), flags)
       if (sentIds.length) {
@@ -2990,7 +3469,7 @@ export default function DevMailPage() {
       }
       setSelectedBulk(new Set())
     },
-    [selectedBulk, inboxEmails, sentEmails, threadIds, setInboundFlag, setSentFlag],
+    [selectedBulk, inboxEmails, isSentId, threadIds, setInboundFlag, setSentFlag],
   )
 
   const bulkDeleteDrafts = useCallback(() => {
@@ -3019,7 +3498,7 @@ export default function DevMailPage() {
       const ids = Array.from(selectedBulk)
       if (!ids.length || !ownerAddress) return
       const inboundIds = ids.filter(id => inboxEmails.some(entry => entry.id === id))
-      const sentIds = ids.filter(id => sentEmails.some(entry => entry.id === id))
+      const sentIds = ids.filter(isSentId)
       await Promise.all([
         inboundIds.length
           ? fetch('/api/mail/inbox', { method: 'PATCH', headers: apiHeaders(), body: JSON.stringify({ ids: inboundIds, owner: ownerAddress }) })
@@ -3031,7 +3510,7 @@ export default function DevMailPage() {
       setSelectedBulk(new Set())
       refreshAll()
     },
-    [selectedBulk, inboxEmails, sentEmails, apiHeaders, refreshAll],
+    [selectedBulk, inboxEmails, isSentId, apiHeaders, refreshAll],
   )
 
   const suggestContacts = useCallback(
@@ -3104,7 +3583,7 @@ export default function DevMailPage() {
   const signatureLogoHtml = signatureMarkSrc
     ? `<div style="margin-bottom:12px;"><img src="${absoluteLogo(signatureMarkSrc)}" alt="${escapeHtml(CLIENT_BRAND.name)}" width="200" style="${clientSignatureMarkStyle(200)}" /></div>`
     : ''
-  const signatureHtml = `<div style="margin-top:26px;padding-top:18px;border-top:1px solid #E8E2F4;">${signatureLogoHtml}${asRichHtml(dropUnreachableImages(signatureBody))}</div>`
+  const signatureHtml = `<div style="margin-top:26px;padding-top:18px;border-top:1px solid #E8E2F4;line-height:1;">${signatureLogoHtml}${tightenSignature(asRichHtml(dropUnreachableImages(signatureBody)))}</div>`
   const signatureText = `\n\n${htmlToPlainText(asRichHtml(signatureBody))}`
   // Airy is not only more room: it is the setting for someone who never wants to see the
   // source of a message or how it was authenticated.
@@ -3116,6 +3595,7 @@ export default function DevMailPage() {
   }, [plainSpoken])
   const fontCss = fontFaceCss(settings.fonts ?? [], CLIENT_BRAND.publicUrl)
   const defaultFont = settings.defaultFont ?? EMPTY_FONT
+  const readerSpacing = lineSpacingOf(defaultFont)
 
   const [logoBusy, setLogoBusy] = useState(false)
   const [logoMsg, setLogoMsg] = useState('')
@@ -3124,11 +3604,9 @@ export default function DevMailPage() {
   // loading for the recipient long after any signed link would have expired.
   const uploadInlineImage = useCallback(
     async (file: File) => {
-      const response = await fetch('/api/mail/signature-logo', {
-        method: 'POST',
-        headers: { ...apiHeaders(), 'content-type': file.type },
-        body: file,
-      })
+      const headers = new Headers(apiHeaders())
+      headers.set('Content-Type', file.type || 'application/octet-stream')
+      const response = await fetch('/api/mail/signature-logo', { method: 'POST', headers, body: file })
       const data = await response.json().catch(() => null)
       if (!response.ok || !data?.ok) throw new Error(data?.error || 'That image could not be stored.')
       return data.url as string
@@ -3219,13 +3697,14 @@ export default function DevMailPage() {
     }
   }, [compose, composeOpen, saveDraftNow])
 
-  const openCompose = (data?: Partial<ComposeData>, existingDraftId?: string) => {
+  const openCompose = (data?: Partial<ComposeData>, existingDraftId?: string, options?: { keepAttachments?: boolean }) => {
     // Full width unless a message is open — replying wants the original in view.
     setComposeExpanded(!selectedId)
     // The sender name is whoever is signed in — their profile name, else the account
     // name, else the local part of their address — not a fixed company name.
     setCompose({ ...EMPTY_COMPOSE, fromName: identityName, ...data })
-    setAttachments([])
+    // A reply handed over from the dock brings its files with it; everything else starts clean.
+    if (!options?.keepAttachments) setAttachments([])
     setComposeError('')
     setShowCcBcc(Boolean(data?.cc?.length || data?.bcc?.length))
     setDraftId(existingDraftId ?? null)
@@ -3237,7 +3716,17 @@ export default function DevMailPage() {
     setComposeOpen(false)
   }
 
-  const discardCompose = () => {
+  const discardCompose = async () => {
+    const hasWork = compose.bodyHtml.trim() || compose.subject.trim() || compose.to.length || attachments.length
+    if (hasWork) {
+      const agreed = await confirm({
+        title: 'Discard this message?',
+        body: 'What you have written and attached will be thrown away.',
+        confirmLabel: 'Discard',
+        danger: true,
+      })
+      if (!agreed) return
+    }
     if (draftId) {
       deleteStashItem('draft', draftId, apiHeaders())
       setDrafts(current => current.filter(entry => entry.id !== draftId))
@@ -3246,6 +3735,7 @@ export default function DevMailPage() {
   }
 
   const openDraft = (id: string) => {
+    cancelThreadOpen()
     const draft = drafts.find(entry => entry.id === id)
     if (!draft) return
     openCompose(draft.data, draft.id)
@@ -3785,6 +4275,20 @@ export default function DevMailPage() {
   // Recipients come from the (collapsible) To/Cc/Bcc fields; an untouched To falls back to the sender.
   const buildReplyDraft = (entry: InboundEmail): ComposeData => {
     const target = quickReplyTarget(entry)
+    if (replyBar === 'forward') {
+      return {
+        ...EMPTY_COMPOSE,
+        to: replyToList,
+        cc: replyCc,
+        bcc: replyBcc,
+        subject: target.subject.startsWith('Fwd:') ? target.subject : `Fwd: ${target.subject}`,
+        markdown: quickReply,
+        htmlSource: replyHtml,
+        htmlDirty: replyHtmlDirty,
+        useSignature: replySig,
+        quoteHtml: forwardQuote(target.subject, target.html, target.text),
+      }
+    }
     const fallback = defaultReplyRecipient(entry)
     // Replying to everyone is the default: a conversation that reached four people is
     // answered to those four, and trimming the list is the deliberate act.
@@ -3846,7 +4350,7 @@ export default function DevMailPage() {
 
   const sendQuickReply = async (entry: InboundEmail) => {
     const body = quickReply.trim() || (replyHtmlDirty ? replyHtml.trim() : '')
-    if (!body || quickSending) return
+    if ((!body && replyBar !== 'forward') || quickSending) return
     const draft = buildReplyDraft(entry)
     if (!draft.to.length) {
       openReplySettings(entry)
@@ -3896,6 +4400,7 @@ export default function DevMailPage() {
       setReplyHtml('')
       setReplyHtmlDirty(false)
       setReplyMode('write')
+      setReplyBar(null)
       setReplyToList([])
       setReplyCc([])
       setReplyBcc([])
@@ -3911,8 +4416,61 @@ export default function DevMailPage() {
   }
 
   // The settings icon on the reply bar hands the typed text off to the full composer (Cc/Bcc/formatting/attachments).
+  /**
+   * Replying to something you sent writes to the same people again, quoting what went out.
+   * The message's own id stands in for a Message-ID, as it already does for inbound mail.
+   */
+  const replyToSent = (sent: SentEmail, detail: SentDetail | null, everyone: boolean) => {
+    const to = sent.to.map(parseAddress)
+    const cc = everyone ? (detail?.cc ?? sent.cc ?? []).map(parseAddress).filter(address => !to.includes(address)) : []
+    openCompose({
+      to,
+      cc,
+      subject: sent.subject.startsWith('Re:') ? sent.subject : `Re: ${sent.subject}`,
+      quoteHtml: quoteBlock(sent.from, sent.createdAt, detail?.html ?? null, detail?.text ?? null),
+      useSignature: true,
+      inReplyTo: sent.id,
+    })
+  }
+
+  /**
+   * On a phone the docked reply becomes the composer as its own page. Everything typed or
+   * attached in the dock travels with it — the older hand-off quietly dropped the files.
+   */
+  const openReplyPage = (entry: InboundEmail) => {
+    const draft = buildReplyDraft(entry)
+    const target = quickReplyTarget(entry)
+    const typed = quickReply.trim()
+    const bodyHtml = draft.htmlDirty && draft.htmlSource.trim() ? draft.htmlSource : typed ? markdownToHtml(typed) : ''
+    openCompose(
+      {
+        to: draft.to,
+        cc: draft.cc,
+        bcc: draft.bcc,
+        subject: draft.subject,
+        bodyHtml,
+        quoteHtml: quoteBlock(target.from, target.receivedAt, target.html, target.text),
+        useSignature: draft.useSignature,
+        inReplyTo: draft.inReplyTo,
+      },
+      undefined,
+      { keepAttachments: true },
+    )
+    setComposeExpanded(true)
+    setQuickReply('')
+    setReplyHtml('')
+    setReplyHtmlDirty(false)
+    setReplyMode('write')
+    setReplyToList([])
+    setReplyCc([])
+    setReplyBcc([])
+    setReplyRecipsOpen(false)
+    setReplyRecipsEdited(false)
+  }
+
   const openReplySettings = (entry: InboundEmail) => {
-    replyAllTo(entry)
+    if (replyBar === 'forward') forwardEmail(entry.subject, entry.html, entry.text, entry.id)
+    else replyAllTo(entry)
     const typed = quickReply.trim()
     if (typed) setCompose(data => ({ ...data, bodyHtml: markdownToHtml(typed) + data.bodyHtml, useSignature: replySig }))
     setQuickReply('')
@@ -3954,6 +4512,15 @@ export default function DevMailPage() {
     }
   }
 
+  // Carries the whole original mail (full HTML), not a stripped snippet.
+  const forwardQuote = (subject: string, html: string | null, text: string | null): string => {
+    if (html && html.trim()) {
+      const header = `<div style="font-family:Arial,Helvetica,sans-serif;font-size:13px;color:#5A5170;border-left:3px solid ${CLIENT_BRAND.accent};padding:4px 0 4px 12px;margin:0 0 16px;">---------- Forwarded message ----------<br>Subject: ${escapeHtml(subject)}</div>`
+      return `${header}${html}`
+    }
+    return `<div style="font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.65;color:#030712;">${inlineEmailStyles(markdownToHtml(`---\n\nForwarded message:\n\n${text ?? ''}`))}</div>`
+  }
+
   const forwardEmail = (
     subject: string,
     html: string | null,
@@ -3962,20 +4529,34 @@ export default function DevMailPage() {
     kind: 'inbound' | 'sent' = 'inbound',
   ) => {
     const fwSubject = subject.startsWith('Fwd:') ? subject : `Fwd: ${subject}`
-    if (html && html.trim()) {
-      // Carry the whole original mail (full HTML), not a stripped snippet.
-      const header = `<div style="font-family:Arial,Helvetica,sans-serif;font-size:13px;color:#5A5170;border-left:3px solid ${CLIENT_BRAND.accent};padding:4px 0 4px 12px;margin:0 0 16px;">---------- Forwarded message ----------<br>Subject: ${escapeHtml(subject)}</div>`
-      openCompose({ subject: fwSubject, quoteHtml: `${header}${html}` })
-    } else {
-      openCompose({
-        subject: fwSubject,
-        quoteHtml: `<div style="font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.65;color:#030712;">${inlineEmailStyles(markdownToHtml(`---\n\nForwarded message:\n\n${text ?? ''}`))}</div>`,
-      })
-    }
+    openCompose({ subject: fwSubject, quoteHtml: forwardQuote(subject, html, text) })
     // After openCompose, which clears the list the files are about to go into.
     if (messageId) void carryForwardAttachments(messageId, kind)
   }
 
+  const openReplyBar = (entry: InboundEmail, kind: 'reply' | 'all' | 'forward') => {
+    setReplyBar(kind)
+    setReplyRecipsOpen(kind === 'forward')
+    if (kind === 'all') {
+      const { to, cc } = replyAllRecipients(entry)
+      setReplyToList(to)
+      setReplyCc(cc)
+      setReplyRecipsEdited(true)
+      return
+    }
+    setReplyToList([])
+    setReplyCc([])
+    setReplyRecipsEdited(kind === 'forward')
+    if (kind === 'forward') void carryForwardAttachments(entry.id)
+  }
+
+  const startReply = (entry: InboundEmail, kind: 'reply' | 'all' | 'forward') => {
+    if (!isPhone && settings.replyStyle === 'mini') return openReplyBar(entry, kind)
+    if (kind === 'reply') replyTo(entry)
+    else if (kind === 'all') replyAllTo(entry)
+    else forwardEmail(entry.subject, entry.html, entry.text, entry.id)
+  }
+
   const printMessage = (subject: string, from: string, when: string, html: string | null, text: string | null, recipients: { to?: string[]; cc?: string[] } = {}) => {
     const frame = document.createElement('iframe')
     frame.style.position = 'fixed'
@@ -4009,7 +4590,8 @@ export default function DevMailPage() {
     // print-color-adjust keeps the mark from being dropped by "background graphics off".
     const printCss = `<style>
       @page { margin: 14mm; }
-      body { margin: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+      body { margin: 0; line-height: ${readerSpacing}; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+      p { margin: 0 0 ${paragraphGap(readerSpacing)}; }
       img { max-width: 100%; }
     </style>`
     doc.open()
@@ -4062,6 +4644,7 @@ export default function DevMailPage() {
         if (composeOpen) closeCompose()
         else if (filesOpen) setFilesOpen(false)
         else if (settingsOpen) closeSettings()
+        else if (threadOpening) { cancelThreadOpen(); setReaderOpenMobile(false) }
         else if (readerOpenMobile) setReaderOpenMobile(false)
         else if (selectedId) setSelectedId(null)
         return
@@ -4091,20 +4674,29 @@ export default function DevMailPage() {
         moveSelection(-1)
         return
       }
+      if (!selectedInbound && selectedSent) {
+        if (event.key === 'r') { event.preventDefault(); replyToSent(selectedSent, selectedDetail, settings.replyAllDefault); return }
+        if (event.key === 'a') { event.preventDefault(); replyToSent(selectedSent, selectedDetail, true); return }
+        if (event.key === 'f') {
+          event.preventDefault()
+          forwardEmail(selectedSent.subject, selectedDetail?.html ?? null, selectedDetail?.text ?? null, selectedSent.id, 'sent')
+          return
+        }
+      }
       const inbound = selectedInbound
       if (!inbound) return
       switch (event.key) {
         case 'r':
           event.preventDefault()
-          replyTo(inbound)
+          startReply(inbound, 'reply')
           break
         case 'a':
           event.preventDefault()
-          replyAllTo(inbound)
+          startReply(inbound, 'all')
           break
         case 'f':
           event.preventDefault()
-          forwardEmail(inbound.subject, inbound.html, inbound.text, inbound.id)
+          startReply(inbound, 'forward')
           break
         case 's':
           event.preventDefault()
@@ -4137,7 +4729,7 @@ export default function DevMailPage() {
   useEffect(() => {
     if (!isLoggedIn || !settings.desktopNotifications || notifyPermission !== 'granted') return
     void subscribePush(apiHeaders())
-  }, [isLoggedIn, settings.desktopNotifications, notifyPermission, apiHeaders])
+  }, [isLoggedIn, settings.desktopNotifications, notifyPermission, apiHeaders, selectedSent, selectedDetail])
 
   useEffect(() => {
     announce(
@@ -4366,6 +4958,7 @@ export default function DevMailPage() {
   const folderTitles: Record<Folder, string> = {
     inbox: 'Inbox',
     starred: 'Starred',
+    snoozed: 'Snoozed',
     sent: 'Sent',
     scheduled: 'Scheduled',
     drafts: 'Drafts',
@@ -4611,7 +5204,7 @@ export default function DevMailPage() {
                 )}
               </button>
               <div className={styles.attachInfo}>
-                <span className={styles.attachName} title={attachment.filename}>{attachment.filename}</span>
+                <Ticker className={styles.attachName} title={attachment.filename}>{attachment.filename}</Ticker>
                 <span className={styles.attachMeta}>
                   {attachment.size ? formatSize(attachment.size) : null}
                   {attachment.shareId ? `${attachment.size ? ' · ' : ''}shared link` : null}
@@ -4744,7 +5337,7 @@ export default function DevMailPage() {
               <span className={styles.attachThumbExt}>{extension || 'FILE'}</span>
             </span>
           )}
-          <span className={styles.attachChipName} title={attachment.filename}>{attachment.filename}</span>
+          <Ticker className={styles.attachChipName} title={attachment.filename}>{attachment.filename}</Ticker>
           <span className={styles.attachChipSize}>{state}</span>
           {attachment.error && attachment.file && (
             <button type="button" className={styles.attachRetry} onClick={() => retryUpload(attachment)}>
@@ -4803,20 +5396,23 @@ export default function DevMailPage() {
   }
 
   const renderInboundAttachments = (message: InboundEmail) => {
-    if (!message.attachments.length) return null
+    if (!visibleAttachments(message).length) return null
     // The stored-blob lookup answers with an empty array for anything it does not
     // hold, which is every file sent as a share link. Falling back only on null
     // left the header counting attachments the grid then refused to draw.
     const fetched = inboundAttachments[message.id]
-    const list: DownloadAttachment[] = fetched?.length
+    const inline = inlineAttachmentNames(message)
+    const list: DownloadAttachment[] = (fetched?.length
       ? fetched
       : message.attachments.map(entry => ({
           filename: entry.filename,
           size: entry.size ?? 0,
           downloadUrl: entry.shareId ? `/share/${entry.shareId}` : '',
           shareId: entry.shareId,
+          contentId: entry.contentId,
         }))
-    return renderAttachmentTiles(list)
+    ).filter(entry => !inline.has(entry.filename))
+    return list.length ? renderAttachmentTiles(list) : null
   }
 
   const renderInboundBody = (message: InboundEmail, framed: boolean) => {
@@ -4834,7 +5430,7 @@ export default function DevMailPage() {
         <iframe
           className={styles.threadFrame}
           sandbox="allow-same-origin"
-          srcDoc={frameHtml(message.html, showRemote)}
+          srcDoc={frameHtml(message.html, showRemote, readerSpacing, resolvedTheme === 'dark')}
           title="Email content"
           onLoad={event => {
             try {
@@ -4845,7 +5441,7 @@ export default function DevMailPage() {
         />
       )
     }
-    return <iframe className={styles.readerFrame} sandbox="" srcDoc={frameHtml(message.html, showRemote)} title="Email content" />
+    return <iframe className={styles.readerFrame} sandbox="" srcDoc={frameHtml(message.html, showRemote, readerSpacing, resolvedTheme === 'dark')} title="Email content" />
   }
 
   // One message open at a time — opening another collapses the rest.
@@ -4861,7 +5457,7 @@ export default function DevMailPage() {
         <iframe
           className={styles.threadFrame}
           sandbox="allow-same-origin"
-          srcDoc={frameHtml(detail.html, true)}
+          srcDoc={frameHtml(detail.html, true, readerSpacing, resolvedTheme === 'dark')}
           title="Sent email"
           onLoad={event => {
             try {
@@ -4996,7 +5592,7 @@ export default function DevMailPage() {
       mine ? (detail ? htmlToSnippetText(detail.html, detail.text) : item.sent.subject) : htmlToSnippetText(item.inbound.html, item.inbound.text)
     ).slice(0, 100)
     const unread = !mine && !item.inbound.read
-    const hasAttach = mine ? (detail?.attachments?.length ?? 0) > 0 : item.inbound.attachments.length > 0
+    const hasAttach = mine ? (detail?.attachments?.length ?? 0) > 0 : visibleAttachments(item.inbound).length > 0
     const shellClass =
       layout === 'bubbles'
         ? `${styles.bubble} ${mine ? styles.bubbleOut : styles.bubbleIn} ${open ? styles.bubbleOpen : ''}`
@@ -5028,9 +5624,9 @@ export default function DevMailPage() {
           <span className={styles.threadMsgMeta}>
             <span className={styles.threadMsgFrom}>
               {unread && <span className={styles.unreadDot} />}
-              {from}
+              <Ticker className={styles.threadMsgFromText}>{from}</Ticker>
             </span>
-            {!open && <span className={styles.threadMsgSnippet}>{snippet}</span>}
+            {!open && <Ticker className={styles.threadMsgSnippet}>{snippet}</Ticker>}
           </span>
           {hasAttach && (
             <span className={styles.threadMsgTool} title="Carries an attachment" aria-label="Carries an attachment">
@@ -5102,6 +5698,7 @@ export default function DevMailPage() {
   }
 
   const reader = (() => {
+    if (threadOpening) return <ReaderSkeleton />
     if (selectedInbound) {
       const inbound = selectedInbound
       const inboundMembers = threadMembers(inbound.id)
@@ -5151,9 +5748,9 @@ export default function DevMailPage() {
             <div className={styles.readerMeta}>
               <div className={styles.avatar}>{(parseAddress(inbound.from)[0] ?? '?').toUpperCase()}</div>
               <div className={styles.readerMetaText}>
-                <div className={styles.readerFrom}>{inbound.from}</div>
-                <div className={styles.readerTo}>to {inbound.to.join(', ') || 'you'}</div>
-                {inbound.cc.length > 0 && <div className={styles.readerTo}>cc {inbound.cc.join(', ')}</div>}
+                <Ticker className={`${styles.readerFrom} ${styles.tickerBlock}`}>{inbound.from}</Ticker>
+                <Ticker className={`${styles.readerTo} ${styles.tickerBlock}`}>to {inbound.to.join(', ') || 'you'}</Ticker>
+                {inbound.cc.length > 0 && <Ticker className={`${styles.readerTo} ${styles.tickerBlock}`}>cc {inbound.cc.join(', ')}</Ticker>}
               </div>
               <div className={styles.readerDate}>
                 {new Date(inbound.receivedAt).toLocaleString()}
@@ -5177,15 +5774,15 @@ export default function DevMailPage() {
             )}
           </div>
           <div className={styles.actions}>
-            <button className={styles.actionBtn} onClick={() => replyTo(inbound)}>
+            <button className={styles.actionBtn} onClick={() => startReply(inbound, 'reply')}>
               {ICONS.reply} Reply
             </button>
             {!settings.replyAllDefault && (
-              <button className={styles.actionBtn} onClick={() => replyAllTo(inbound)}>
+              <button className={styles.actionBtn} onClick={() => startReply(inbound, 'all')}>
                 {ICONS.replyAll} Reply all
               </button>
             )}
-            <button className={styles.actionBtn} onClick={() => forwardEmail(inbound.subject, inbound.html, inbound.text, inbound.id)}>
+            <button className={styles.actionBtn} onClick={() => startReply(inbound, 'forward')}>
               {ICONS.forward} Forward
             </button>
             <span className={styles.actionSpacer} />
@@ -5230,6 +5827,50 @@ export default function DevMailPage() {
                 {inbound.archived ? ICONS.restore : ICONS.archive}
               </button>
             )}
+            {inbound.threadId && (() => {
+              // A snooze that has already come round leaves its timestamp behind, since
+              // nothing runs to clear it. Asleep means the time is still ahead, which is
+              // what every folder query asks too.
+              const wakesAt = inbound.snoozedUntil ? Date.parse(inbound.snoozedUntil) : 0
+              const asleep = wakesAt > Date.now()
+              return (
+              <span className={styles.snoozeWrap}>
+                <button
+                  className={`${styles.iconBtn} ${snoozeMenuOpen ? styles.iconBtnOn : ''}`}
+                  title={
+                    asleep
+                      ? `Snoozed until ${new Date(wakesAt).toLocaleString(undefined, { weekday: 'short', hour: 'numeric', minute: '2-digit' })} — wake it now`
+                      : 'Snooze'
+                  }
+                  aria-haspopup="menu"
+                  aria-expanded={snoozeMenuOpen}
+                  onClick={() => {
+                    if (asleep) applySnooze(inbound.threadId ?? null, null)
+                    else setSnoozeMenuOpen(open => !open)
+                  }}
+                >
+                  {ICONS.snooze}
+                </button>
+                {snoozeMenuOpen && (
+                  <div className={styles.snoozeMenu} role="menu">
+                    {snoozeChoices.map(choice => (
+                      <button
+                        key={choice.key}
+                        role="menuitem"
+                        className={styles.snoozeItem}
+                        onClick={() => applySnooze(inbound.threadId ?? null, choice.at)}
+                      >
+                        <span>{choice.label}</span>
+                        <span className={styles.snoozeWhen}>
+                          {choice.at.toLocaleString(undefined, { weekday: 'short', hour: 'numeric', minute: '2-digit' })}
+                        </span>
+                      </button>
+                    ))}
+                  </div>
+                )}
+              </span>
+              )
+            })()}
             <button
               className={styles.iconBtn}
               title={inbound.read ? 'Mark unread' : 'Mark read'}
@@ -5388,6 +6029,28 @@ export default function DevMailPage() {
             </div>
           )}
           {folder !== 'trash' && (() => {
+            if (isPhone) {
+              return (
+                <div className={styles.replyLaunch}>
+                  <button type="button" className={styles.replyLaunchBtn} onClick={() => openReplyPage(inbound)}>
+                    {ICONS.reply}
+                    <span>{quickReply.trim() ? quickReply.trim().slice(0, 60) : `Reply${settings.replyAllDefault ? ' to everyone' : ''}…`}</span>
+                  </button>
+                  {!settings.replyAllDefault && (
+                    <button
+                      type="button"
+                      className={styles.replyLaunchAll}
+                      title="Reply all"
+                      aria-label="Reply all"
+                      onClick={() => { replyAllTo(inbound); setComposeExpanded(true) }}
+                    >
+                      {ICONS.replyAll}
+                    </button>
+                  )}
+                </div>
+              )
+            }
+            if (!replyBar && !quickReply.trim() && !replyHtmlDirty) return null
             const replyDraft = buildReplyDraft(inbound)
             const replyEffHtml = buildEmailHtml(replyDraft, signatureHtml, fontCss, defaultFont)
             const replyEffText = buildEmailText(replyDraft, signatureText)
@@ -5400,7 +6063,8 @@ export default function DevMailPage() {
               '',
               replyEffHtml,
             ].filter(line => line !== null).join('\n')
-            const canSend = (quickReply.trim() || (replyHtmlDirty && replyHtml.trim())) && !quickSending
+            const hasBody = Boolean(quickReply.trim() || (replyHtmlDirty && replyHtml.trim()))
+            const canSend = (hasBody || replyBar === 'forward') && (replyBar !== 'forward' || replyDraft.to.length > 0) && !quickSending
             const recipSummary = [
               `To ${replyDraft.to.join(', ') || '—'}`,
               replyDraft.cc.length ? `Cc ${replyDraft.cc.length}` : null,
@@ -5450,7 +6114,7 @@ export default function DevMailPage() {
                     title="Recipients — Cc, Bcc"
                   >
                     <span className={styles.replyRecipsChevron}>{ICONS.chevron}</span>
-                    <span className={styles.replyRecipsSummary}>{recipSummary}</span>
+                    <Ticker className={styles.replyRecipsSummary}>{recipSummary}</Ticker>
                   </button>
                 </div>
                 {replyRecipsOpen && (
@@ -5556,7 +6220,7 @@ export default function DevMailPage() {
                   <textarea
                     ref={quickReplyRef}
                     className={styles.quickReplyInput}
-                    style={{ fontFamily: fontStack(defaultFont.family), fontSize: defaultFont.size || undefined }}
+                    style={{ fontFamily: fontStack(defaultFont.family), fontSize: defaultFont.size || undefined, lineHeight: lineSpacingOf(defaultFont) }}
                     value={quickReply}
                     onChange={event => { setQuickReply(event.target.value); setReplyHtmlDirty(false) }}
                     onPaste={event => {
@@ -5572,7 +6236,7 @@ export default function DevMailPage() {
                         sendQuickReply(inbound)
                       }
                     }}
-                    placeholder={`Reply to ${parseAddress(quickReplyTarget(inbound).from) || 'sender'}…`}
+                    placeholder={replyBar === 'forward' ? 'Add a note to go with the forwarded message…' : `Reply to ${parseAddress(quickReplyTarget(inbound).from) || 'sender'}…`}
                     rows={1}
                   />
                 )}
@@ -5593,7 +6257,7 @@ export default function DevMailPage() {
                     <iframe
                       className={styles.replyPreview}
                       sandbox="allow-same-origin"
-                      srcDoc={frameHtml(replyEffHtml, true)}
+                      srcDoc={frameHtml(replyEffHtml, true, readerSpacing, resolvedTheme === 'dark')}
                       title="Reply preview"
                       onLoad={event => {
                         try {
@@ -5669,8 +6333,8 @@ export default function DevMailPage() {
             <div className={styles.readerMeta}>
               <div className={styles.avatar}>N</div>
               <div className={styles.readerMetaText}>
-                <div className={styles.readerFrom}>{selectedDetail?.from ?? selectedSent.from}</div>
-                <div className={styles.readerTo}>to {selectedSent.to.join(', ')}</div>
+                <Ticker className={`${styles.readerFrom} ${styles.tickerBlock}`}>{selectedDetail?.from ?? selectedSent.from}</Ticker>
+                <Ticker className={`${styles.readerTo} ${styles.tickerBlock}`}>to {selectedSent.to.join(', ')}</Ticker>
               </div>
               <div className={styles.readerDate}>
                 {isScheduled && selectedSent.scheduledAt
@@ -5703,14 +6367,13 @@ export default function DevMailPage() {
               </>
             ) : (
               <>
-                <span className={styles.chip}>{statusFor(selectedSent)}</span>
-                {selectedSent.opened && (
-                  <span
-                    className={`${styles.chip} ${styles.chipOpened}`}
-                    title={`Opened${selectedSent.openCount > 1 ? ` ${selectedSent.openCount} times` : ''}${selectedSent.openedAt ? ` — first at ${new Date(selectedSent.openedAt).toLocaleString()}` : ''}`}
-                  >
-                    opened{selectedSent.openCount > 1 ? ` ×${selectedSent.openCount}` : ''}
-                  </span>
+                <button className={styles.actionBtn} onClick={() => replyToSent(selectedSent, selectedDetail, settings.replyAllDefault)}>
+                  {ICONS.reply} Reply
+                </button>
+                {!settings.replyAllDefault && (
+                  <button className={styles.actionBtn} onClick={() => replyToSent(selectedSent, selectedDetail, true)}>
+                    {ICONS.replyAll} Reply all
+                  </button>
                 )}
                 <button
                   className={styles.actionBtn}
@@ -5786,7 +6449,10 @@ export default function DevMailPage() {
             </div>
           )}
           {(() => {
-            const ordered = [...(eventsByEmail[selectedSent.id] ?? [])].sort(
+            const opened: MailEvent[] = selectedSent.openedAt
+              ? [{ emailId: selectedSent.id, type: 'email.opened', at: selectedSent.openedAt, meta: selectedSent.openCount > 1 ? { count: String(selectedSent.openCount) } : undefined }]
+              : []
+            const ordered = [...(eventsByEmail[selectedSent.id] ?? []), ...opened].sort(
               (a, b) => new Date(a.at).getTime() - new Date(b.at).getTime(),
             )
             const seen = new Set<string>()
@@ -5820,7 +6486,10 @@ export default function DevMailPage() {
                                 : ''
                           }`}
                         />
-                        <span className={styles.eventType}>{event.type.replace('email.', '')}</span>
+                        <span className={styles.eventType}>
+                          {event.type.replace('email.', '')}
+                          {event.meta?.count ? ` ×${event.meta.count}` : ''}
+                        </span>
                         <span className={styles.eventTime}>{new Date(event.at).toLocaleString()}</span>
                       </div>
                       {event.meta?.link && (
@@ -5839,7 +6508,7 @@ export default function DevMailPage() {
             {!selectedDetail ? (
               <BodySkeleton />
             ) : selectedDetail.html ? (
-              <iframe className={styles.readerFrame} sandbox="" srcDoc={frameHtml(selectedDetail.html, true)} title="Email content" />
+              <iframe className={styles.readerFrame} sandbox="" srcDoc={frameHtml(selectedDetail.html, true, readerSpacing, resolvedTheme === 'dark')} title="Email content" />
             ) : (
               <pre className={styles.readerText}>{selectedDetail.text ?? '(no content)'}</pre>
             )}
@@ -5870,6 +6539,7 @@ export default function DevMailPage() {
         ),
         ['--acting-offset' as string]: `${actingBarHeight}px`,
         ['--brand-mark' as string]: `url('${CLIENT_BRAND.chromeMarkUrl}')`,
+        ['--mail-lead' as string]: String(readerSpacing),
         ['--list-w' as string]: `${listWidth}px`,
       } as React.CSSProperties}
     >
@@ -5886,39 +6556,85 @@ export default function DevMailPage() {
           </button>
         </div>
       )}
-      {account?.defaultPassword && !pwNoticeHidden && (
-        <div className={styles.pwNotice} role="status">
-          <div className={styles.pwNoticeText}>
-            <p className={styles.pwNoticeTitle}>Set your own password</p>
-            <p className={styles.pwNoticeSub}>
-              This mailbox still uses the password it was created with, which is your own
-              address. Anyone who knows it could sign in as you.
-            </p>
-          </div>
-          <div className={styles.pwNoticeActions}>
-            <button
-              type="button"
-              className={styles.pwNoticeDismiss}
-              onClick={() => setPwNoticeHidden(true)}
-            >
-              Not now
-            </button>
-            <button
-              type="button"
-              className={styles.pwNoticeGo}
-              onClick={() => {
-                setSettingsOpen(true)
-                setSettingsTab('profile')
-                setPwNoticeHidden(true)
-                setPwFocusRequest(request => request + 1)
-              }}
-            >
-              Change it
-            </button>
+      {(() => {
+        const notices: Array<{ key: string; title: string; body: string; dismiss: string; action: string; onDismiss: () => void; onAction: () => void }> = []
+        if (isLoggedIn && !settings.desktopNotifications && notifyPermission !== 'denied' && notifyPermission !== 'unsupported' && !notifyNoticeHidden) {
+          notices.push({
+            key: 'notifications',
+            title: 'Turn on notifications',
+            body: 'Hear about new mail the moment it arrives, even with this tab in the background or the app closed.',
+            dismiss: 'Not now',
+            action: 'Turn on',
+            onDismiss: dismissNotifyNotice,
+            onAction: () => {
+              void (async () => {
+                const result = await requestNotifyPermission()
+                if (result === 'denied') dismissNotifyNotice()
+                if (result !== 'granted') return
+                const ok = await subscribePush(apiHeaders())
+                setNotifyNoticeHidden(true)
+                if (ok) setMailSettings(current => ({ ...current, desktopNotifications: true }))
+                else {
+                  setSettingsOpen(true)
+                  setSettingsTab('notifications')
+                }
+              })()
+            },
+          })
+        }
+        if (account?.defaultPassword && !pwNoticeHidden) {
+          notices.push({
+            key: 'password',
+            title: 'Set your own password',
+            body: 'This mailbox still uses the password it was created with, which is your own address. Anyone who knows it could sign in as you.',
+            dismiss: 'Not now',
+            action: 'Change it',
+            onDismiss: () => setPwNoticeHidden(true),
+            onAction: () => {
+              setSettingsOpen(true)
+              setSettingsTab('profile')
+              setPwNoticeHidden(true)
+              setPwFocusRequest(request => request + 1)
+            },
+          })
+        }
+        if (!notices.length) return null
+        return notices.slice(0, 3).map((notice, depth) => (
+          <div
+            key={notice.key}
+            className={`${styles.pwNotice} ${depth > 0 ? styles.pwNoticeBehind : ''}`}
+            style={{ ['--depth' as string]: depth } as React.CSSProperties}
+            role={depth === 0 ? 'status' : undefined}
+            aria-hidden={depth > 0}
+          >
+            {depth === 0 && notices.length > 1 && (
+              <span className={styles.pwNoticeMore}>{notices.length - 1} more</span>
+            )}
+            <div className={styles.pwNoticeText}>
+              <p className={styles.pwNoticeTitle}>{notice.title}</p>
+              <p className={styles.pwNoticeSub}>{notice.body}</p>
+            </div>
+            <div className={styles.pwNoticeActions}>
+              <button type="button" className={styles.pwNoticeDismiss} onClick={notice.onDismiss} tabIndex={depth === 0 ? 0 : -1}>
+                {notice.dismiss}
+              </button>
+              <button type="button" className={styles.pwNoticeGo} onClick={notice.onAction} tabIndex={depth === 0 ? 0 : -1}>
+                {notice.action}
+              </button>
+            </div>
           </div>
-        </div>
-      )}
+        ))
+      })()}
       <div className={styles.topRight}>
+      {isPhone && (
+        <button
+          className={`${styles.themeToggle} ${refreshing ? styles.spinning : ''}`}
+          onClick={refreshAll}
+          aria-label="Refresh"
+        >
+          {ICONS.refresh}
+        </button>
+      )}
       {canInstall && !installed && (
         <button
           className={styles.themeToggle}
@@ -5928,17 +6644,19 @@ export default function DevMailPage() {
           {ICONS.install}
         </button>
       )}
-      <button
-        className={styles.themeToggle}
-        onClick={() => { setSettingsTab('notifications'); setSettingsOpen(true) }}
-        aria-label={
-          settings.desktopNotifications && notifyPermission === 'granted'
-            ? 'Notifications are on. Open notification settings.'
-            : 'Notifications are off. Open notification settings.'
-        }
-      >
-        {settings.desktopNotifications && notifyPermission === 'granted' ? ICONS.bell : ICONS.bellOff}
-      </button>
+      {!isPhone && (
+        <button
+          className={styles.themeToggle}
+          onClick={() => { setSettingsTab('notifications'); setSettingsOpen(true) }}
+          aria-label={
+            settings.desktopNotifications && notifyPermission === 'granted'
+              ? 'Notifications are on. Open notification settings.'
+              : 'Notifications are off. Open notification settings.'
+          }
+        >
+          {settings.desktopNotifications && notifyPermission === 'granted' ? ICONS.bell : ICONS.bellOff}
+        </button>
+      )}
       <div
         className={styles.themeSwitcher}
         onMouseEnter={openThemeMenu}
@@ -6054,12 +6772,14 @@ export default function DevMailPage() {
           <span className={styles.composePen}>{ICONS.pencil}</span>
           <span className={styles.railLabel}>Compose</span>
         </button>
-        {(['inbox', 'starred', 'sent', 'scheduled', 'drafts', 'archived', 'trash'] as Folder[]).map(key => {
+        {(['inbox', 'starred', 'snoozed', 'sent', 'scheduled', 'drafts', 'archived', 'trash'] as Folder[]).map(key => {
           const count =
             key === 'inbox'
               ? folderCounts.inbox || ''
               : key === 'starred'
                 ? folderCounts.starred || ''
+                : key === 'snoozed'
+                  ? folderCounts.snoozed || ''
                 : key === 'sent'
                   ? deliveredEmails.filter(entry => !entry.archived && !entry.trashed).length || ''
                   : key === 'scheduled'
@@ -6075,6 +6795,7 @@ export default function DevMailPage() {
               className={`${styles.folder} ${folder === key ? styles.folderActive : ''}`}
               title={folderTitles[key]}
               onClick={() => {
+                cancelThreadOpen()
                 setFolder(key)
                 setSelectedId(null)
                 setReaderOpenMobile(false)
@@ -6147,16 +6868,9 @@ export default function DevMailPage() {
             {ICONS.menu}
           </button>
           <h1 className={styles.listTitle}>{folderTitles[folder]}</h1>
-          <span
-            className={styles.listMeta}
-            title={`${listItems.length.toLocaleString()} ${isInboundFolder ? (listItems.length === 1 ? 'conversation' : 'conversations') : listItems.length === 1 ? 'message' : 'messages'}`}
-          >
-            {listItems.length.toLocaleString()}{' '}
-            <span className={styles.listMetaUnit}>
-              {isInboundFolder
-                ? listItems.length === 1 ? 'conversation' : 'conversations'
-                : listItems.length === 1 ? 'message' : 'messages'}
-            </span>
+          <span className={styles.listMeta} title={listCountTitle}>
+            {listCountFigure}{' '}
+            <span className={styles.listMetaUnit}>{listCountUnit}</span>
           </span>
           <button
             className={`${styles.refreshBtn} ${refreshing ? styles.spinning : ''}`}
@@ -6166,6 +6880,11 @@ export default function DevMailPage() {
             {ICONS.refresh}
           </button>
         </div>
+        {crossFolder && (
+          <button type="button" className={styles.crossFolderHint} onClick={() => setFolder(crossFolder.folder)}>
+            Also {crossFolder.count.toLocaleString()}{crossFolder.more ? '+' : ''} in {crossFolder.folder === 'sent' ? 'Sent' : 'Inbox'} →
+          </button>
+        )}
         <div className={styles.search}>
           {ICONS.search}
           <input
@@ -6318,6 +7037,26 @@ export default function DevMailPage() {
             <span className={styles.srOnly}>Checking for new mail</span>
           </div>
         )}
+        <div
+          className={styles.pullHint}
+          style={{ height: pullDistance, opacity: pullDistance > 6 ? 1 : 0 }}
+          aria-hidden
+        >
+          <span className={`${styles.pullSpinner} ${pullDistance >= PULL_TRIGGER * 0.75 ? styles.pullSpinnerReady : ''}`}>
+            {ICONS.refresh}
+          </span>
+        </div>
+        <button
+          type="button"
+          className={`${styles.toTop} ${listScrolled ? styles.toTopOn : ''}`}
+          onClick={scrollListToTop}
+          aria-label="Back to the top of the list"
+          title="Back to top"
+          tabIndex={listScrolled ? 0 : -1}
+          aria-hidden={!listScrolled}
+        >
+          {ICONS.chevron}
+        </button>
         <div className={styles.list} ref={listRef}>
           {listSettling ? (
             Array.from({ length: 7 }).map((_, index) => (
@@ -6352,6 +7091,7 @@ export default function DevMailPage() {
               <p className={styles.emptyTitle}>
                 {folder === 'inbox' && 'Inbox zero'}
                 {folder === 'starred' && 'No starred mail'}
+                {folder === 'snoozed' && 'Nothing snoozed'}
                 {folder === 'sent' && 'Nothing sent yet'}
                 {folder === 'scheduled' && 'Nothing scheduled'}
                 {folder === 'drafts' && 'No drafts'}
@@ -6362,6 +7102,8 @@ export default function DevMailPage() {
                 {folder === 'inbox' &&
                   'Nothing new right now. Messages sent to your address will appear here.'}
                 {folder === 'starred' && 'Star a message and it will be kept here so you can find it again.'}
+                {folder === 'snoozed' &&
+                  'Put a conversation aside and it waits here, then returns to the inbox by itself at the time you chose.'}
                 {folder === 'sent' && 'Everything you send is kept here, newest first.'}
                 {folder === 'scheduled' && 'Messages waiting to go out. You can still edit or cancel them.'}
                 {folder === 'drafts' && 'Unfinished messages are saved here automatically, so nothing is lost.'}
@@ -6370,18 +7112,49 @@ export default function DevMailPage() {
               </p>
             </div>
           ) : (
-            listItems.map(item => (
+            <>
+            {swipe && (() => {
+              const action = swipe.dx > 0 ? swipeActions.right : swipeActions.left
+              if (!action || swipe.dx === 0) return null
+              return (
+                <div
+                  className={`${styles.swipeBand} ${swipe.dx > 0 ? styles.swipeBandRight : styles.swipeBandLeft} ${Math.abs(swipe.dx) >= SWIPE_COMMIT ? styles.swipeBandArmed : ''}`}
+                  style={{ top: swipe.top, height: swipe.height }}
+                  aria-hidden
+                >
+                  <span>{action.label}</span>
+                </div>
+              )
+            })()}
+            {listItems.map(item => (
               <button
                 key={item.id}
                 className={`${styles.item} ${selectedId === item.id ? styles.itemActive : ''} ${item.unread ? styles.itemUnread : ''} ${selectedBulk.has(item.id) ? styles.itemChecked : ''} ${'threadId' in item && item.threadId && threadOpening === item.threadId ? styles.itemOpening : ''}`}
                 aria-busy={'threadId' in item && item.threadId ? threadOpening === item.threadId : undefined}
+                style={
+                  swipe?.id === item.id
+                    // Two things get in the way of a row following a finger: the staggered
+                    // entry animation, which outranks an inline transform, and a 160ms
+                    // transform transition, which makes the row chase the finger instead of
+                    // tracking it. Both stand down for the duration of the drag.
+                    ? { transform: `translateX(${swipe.dx}px)`, animation: 'none', transition: 'none' }
+                    : undefined
+                }
+                onTouchStart={item.kind === 'inbound' ? event => onRowTouchStart(item.id, 'threadId' in item ? item.threadId ?? null : null, event) : undefined}
+                onTouchMove={item.kind === 'inbound' ? onRowTouchMove : undefined}
+                onTouchEnd={item.kind === 'inbound' ? onRowTouchEnd : undefined}
+                onTouchCancel={item.kind === 'inbound' ? onRowTouchEnd : undefined}
                 onClick={() => {
+                  // A swipe ends on the row it started on, so without this the release
+                  // opens the message the reader just archived.
+                  if (swipeRef.current?.moved) return
                   if (item.kind === 'draft') {
                     openDraft(item.id)
                   } else if (item.kind === 'inbound') {
                     if ('threadId' in item && item.threadId) void openThread(item.threadId, item.id)
                     else openInbound(item.id)
                   } else {
+                    cancelThreadOpen()
                     setSelectedId(item.id)
                     setReaderOpenMobile(true)
                   }
@@ -6408,15 +7181,15 @@ export default function DevMailPage() {
                 </span>
                 <span className={styles.itemBody}>
                   <span className={styles.itemTop}>
-                    <span className={styles.itemFrom}>{item.primary}</span>
+                    <Ticker className={styles.itemFrom}>{item.primary}</Ticker>
                     {item.threadCount > 1 && <span className={styles.threadBadge}>{item.threadCount}</span>}
                     <span className={styles.itemTime}>{item.time}</span>
                   </span>
                   <p className={styles.itemSubject}>
                     {item.hasAttachment && <span className={styles.itemClip}>{ICONS.attach}</span>}
-                    {item.subject}
+                    <Ticker className={styles.itemSubjectText}>{item.subject}</Ticker>
                   </p>
-                  {item.snippet && <p className={styles.itemSnippet}>{item.snippet}</p>}
+                  {item.snippet && <Ticker className={`${styles.itemSnippet} ${styles.tickerBlock}`}>{item.snippet}</Ticker>}
                   {item.labels.length > 0 && (
                     <span className={styles.itemLabels}>
                       {item.labels.map(labelId => {
@@ -6507,7 +7280,8 @@ export default function DevMailPage() {
                   </span>
                 )}
               </button>
-            ))
+            ))}
+            </>
           )}
           {/* Nothing to load more of when nothing is listed: the skeleton under an empty
               folder read as a mailbox that never finished loading. */}
@@ -6532,16 +7306,14 @@ export default function DevMailPage() {
             {!moreCursor && listItems.length > 0 && (
               <div className={styles.listEnd}>
                 {!isInboundFolder
-                  ? `${listItems.length.toLocaleString()} ${listItems.length === 1 ? 'message' : 'messages'}`
-                  : threads.length > 0 && !search.trim()
-                    ? `${threads.length.toLocaleString()} conversations`
-                    : !inboxTotal
-                      ? `${inboxEmails.length.toLocaleString()} loaded`
-                      : inboxEmails.length >= inboxTotal
-                        ? listItems.length < inboxTotal
-                          ? `All ${inboxTotal.toLocaleString()} messages, in ${listItems.length.toLocaleString()} conversations`
-                          : `All ${inboxTotal.toLocaleString()} messages`
-                        : `${inboxEmails.length.toLocaleString()} of ${inboxTotal.toLocaleString()} messages`}
+                  ? sentSearchTruncated
+                    ? `Newest ${listItems.length.toLocaleString()} matches shown — narrow the search to reach older ones`
+                    : `${listItems.length.toLocaleString()} ${listItems.length === 1 ? 'message' : 'messages'}`
+                  : search.trim() && inboxTotal
+                    // A search knows how many messages it matched but not how many
+                    // conversations they fall into, so say both rather than neither.
+                    ? `${listItems.length.toLocaleString()} ${listItems.length === 1 ? 'conversation' : 'conversations'} from ${inboxTotal.toLocaleString()} matching ${inboxTotal === 1 ? 'message' : 'messages'}`
+                    : `All ${listItems.length.toLocaleString()} ${listItems.length === 1 ? 'conversation' : 'conversations'} loaded`}
               </div>
             )}
         </div>
@@ -6554,7 +7326,7 @@ export default function DevMailPage() {
                 back to. On a wide one it is beside us, and the only thing to do is close. */}
             <button
               className={styles.actionBtn}
-              onClick={() => (listHidden ? setReaderOpenMobile(false) : setSelectedId(null))}
+              onClick={() => { cancelThreadOpen(); if (listHidden) setReaderOpenMobile(false); else setSelectedId(null) }}
             >
               {listHidden ? <>{ICONS.back} Back</> : <>{ICONS.close} Close</>}
             </button>
@@ -6563,7 +7335,7 @@ export default function DevMailPage() {
         {/* Keyed so React rebuilds it when the selection changes, which is what lets the
             animation replay: switching threads swapped the panel with no sign that
             anything had happened. */}
-        <div className={styles.readerSwap} key={selectedId ?? 'empty'}>
+        <div className={styles.readerSwap} key={threadOpening ? `opening:${threadOpening}` : (selectedId ?? 'empty')}>
           {reader}
         </div>
       </section>
@@ -6597,7 +7369,9 @@ export default function DevMailPage() {
           >
             <div className={styles.composeHead}>
               <h2 className={styles.composeTitle}>New message</h2>
-              <span className={styles.composeHint}>drafts autosave · Esc to close</span>
+              <span className={styles.composeHint}>
+                drafts autosave<span className={styles.composeHintKeys}> · Esc to close</span>
+              </span>
               <div className={styles.composeHeadActions}>
                 <button
                   className={styles.composeExpandBtn}
@@ -6812,9 +7586,9 @@ export default function DevMailPage() {
                 />
               )}
               {compose.quoteHtml && !compose.campaign.kind && (
-                <details className={styles.composeQuote} open>
+                <details className={styles.composeQuote}>
                   <summary className={styles.composeQuoteLabel}>Quoted message</summary>
-                  <iframe className={styles.composeQuoteFrame} sandbox="allow-same-origin" srcDoc={frameHtml(compose.quoteHtml, true)} title="Quoted message" />
+                  <iframe className={styles.composeQuoteFrame} sandbox="allow-same-origin" srcDoc={frameHtml(compose.quoteHtml, true, readerSpacing, resolvedTheme === 'dark')} title="Quoted message" />
                 </details>
               )}
               {/* The signature is appended on send, so show it here rather than leaving the
@@ -7447,6 +8221,7 @@ export default function DevMailPage() {
               <div className={styles.fontAdd}>
                 <MailSelect
                   ariaLabel="Default font"
+                  prefix={<span className={styles.selectGlyphSerif}>A</span>}
                   value={settings.defaultFont?.family ?? ''}
                   options={[{ value: '', label: 'Arial (standard)' }, ...[...BUILTIN_FONTS, ...(settings.fonts ?? []).map(font => font.name)].filter((font, index, all) => all.indexOf(font) === index).map(font => ({ value: font, label: font }))]}
                   optionStyle={font => (font ? { fontFamily: `'${font}', Arial, sans-serif` } : {})}
@@ -7454,6 +8229,7 @@ export default function DevMailPage() {
                 />
                 <MailSelect
                   ariaLabel="Default size"
+                  prefix="tT"
                   editable
                   placeholder="15"
                   value={settings.defaultFont?.size ?? ''}
@@ -7467,6 +8243,32 @@ export default function DevMailPage() {
               </div>
               <p className={styles.settingsNote}>Applied to everything you write; a font or size picked in the editor still wins for that text.</p>
             </div>
+            <div className={styles.settingsField}>
+              <span>Line spacing</span>
+              <div className={styles.fontAdd}>
+                <MailSelect
+                  ariaLabel="Line spacing"
+                  prefix="↕"
+                  editable
+                  placeholder={String(DEFAULT_LINE_SPACING)}
+                  value={settings.defaultFont?.lineSpacing ? String(settings.defaultFont.lineSpacing) : ''}
+                  options={[
+                    { value: '', label: `${DEFAULT_LINE_SPACING} (standard)` },
+                    ...LINE_SPACINGS.filter(spacing => spacing !== DEFAULT_LINE_SPACING).map(spacing => ({ value: String(spacing), label: String(spacing) })),
+                  ]}
+                  onChange={raw => {
+                    const spacing = parseFloat(raw)
+                    if (raw.trim() === '' || raw.startsWith(`${DEFAULT_LINE_SPACING} (`)) {
+                      setMailSettings(current => ({ ...current, defaultFont: { ...(current.defaultFont ?? EMPTY_FONT), lineSpacing: undefined } }))
+                      return
+                    }
+                    if (!(Number.isFinite(spacing) && spacing >= 0.8 && spacing <= 3)) return
+                    setMailSettings(current => ({ ...current, defaultFont: { ...(current.defaultFont ?? EMPTY_FONT), lineSpacing: spacing } }))
+                  }}
+                />
+              </div>
+              <p className={styles.settingsNote}>The space between lines and paragraphs in everything you write, in the editor and as recipients see it. 1 is single, 2 is double. The Spacing control in the editor overrides it for the paragraphs you pick.</p>
+            </div>
             <div className={styles.settingsField}>
               <span>Fonts</span>
               <p className={styles.settingsNote}>
@@ -7521,6 +8323,14 @@ export default function DevMailPage() {
               />
               <span>Reply to everyone in the conversation by default. With this off, a reply goes to the sender and a separate Reply all sits beside it.</span>
             </label>
+            <label className={styles.settingsToggle}>
+              <input
+                type="checkbox"
+                checked={settings.replyStyle === 'mini'}
+                onChange={event => setMailSettings(current => ({ ...current, replyStyle: event.target.checked ? 'mini' : 'panel' }))}
+              />
+              <span>Reply in the small bar under the conversation. With this off, Reply, Reply all and Forward open the full composer.</span>
+            </label>
             <label className={styles.settingsToggle}>
               <input
                 type="checkbox"
@@ -7961,6 +8771,11 @@ export default function DevMailPage() {
           </button>
         </div>
       )}
+      {openError && !undo && (
+        <div className={`${styles.toast} ${styles.toastError}`} role="alert">
+          {openError}
+        </div>
+      )}
       {sentFlash && !undo && (
         <div className={styles.toast}>
           <span className={sentFlash === 'Sent' ? styles.toastOk : ''}>{sentFlash}</span>